app/chat/page.tsx

'use client';

import ImageSelector from '@/components/chat/ImageSelector';
import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { fetcher } from '@/lib/utils';
import { useRouter } from 'next/navigation';

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from '@/components/ui/Tooltip';
import { IconDiscord, IconGitHub } from '@/components/ui/Icons';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';
import Img from '@/components/ui/Img';
import { MessageRaw } from '@/lib/db/types';
import { dbPostCreateChat } from '@/lib/db/functions';
import { useState } from 'react';
import Loading from '@/components/ui/Loading';

// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
const EXAMPLE_URL =
  'https://vision-agent-dev.s3.us-east-2.amazonaws.com/examples/flower.png';
const EXAMPLE_HEADER = 'Count and find';
const EXAMPLE_SUBHEADER =
  'number of flowers, area of largest and smallest flower';
const EXAMPLE_PROMPT =
  'Count the number of flowers and find the area of the largest and smallest flower';

const exampleMessages = [
  {
    heading: EXAMPLE_HEADER,
    subheading: EXAMPLE_SUBHEADER,
    url: EXAMPLE_URL,
    initMessages: [
      {
        role: 'user' as MessageRaw['role'],
        content:
          EXAMPLE_PROMPT + '\n\n' + generateInputImageMarkdown(EXAMPLE_URL),
      },
    ],
  },
  // {
  //   heading: 'Detecting',
  //   url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
  //   subheading: 'number of cereals in an image',
  //   message: `How many cereals are there in the image?`,
  // },
];

export default function Page() {
  const router = useRouter();
  const [isUploading, setUploading] = useState<false | Number>(false);
  return (
    <div className="mx-auto max-w-2xl px-4 mt-8">
      <div className="rounded-lg border bg-background p-8 mb-6">
        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
        <p>
          Vision Agent is a library that helps you utilize agent frameworks for
          your vision tasks. Vision Agent aims to provide an in-seconds
          experience by allowing users to describe their problem in text and
          utilizing agent frameworks to solve the task for them.
        </p>
        <div className="my-2">
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="link" size="icon" asChild className="mr-2">
                <Link
                  href="https://github.com/landing-ai/vision-agent"
                  target="_blank"
                >
                  <IconGitHub className="size-6" />
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Github</TooltipContent>
          </Tooltip>
          <Tooltip>
            <TooltipTrigger asChild>
              <Button variant="link" size="icon" asChild className="mr-2">
                <Link href="https://discord.gg/wZ2A7J69" target="_blank">
                  <IconDiscord className="size-6" />
                </Link>
              </Button>
            </TooltipTrigger>
            <TooltipContent>Discord</TooltipContent>
          </Tooltip>
        </div>
        <ImageSelector />
      </div>
      <div className="mb-4 grid grid-cols-2 gap-2 px-4 sm:px-0">
        {exampleMessages.map((example, index) => (
          <div
            key={index}
            className={`relative cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
              index > 1 && 'hidden md:block'
            }`}
            onClick={async () => {
              setUploading(index);
              const resp = await dbPostCreateChat({
                mediaUrl: example.url,
                initMessages: example.initMessages,
                title: example.heading,
              });
              setUploading(false);
              if (resp) {
                router.push(`/chat/${resp.id}`);
              }
            }}
          >
            {isUploading === index && (
              <div className="absolute top-0 left-0 size-full flex items-center justify-center bg-white/60">
                <Loading />
              </div>
            )}
            <Img src={example.url} alt="example images" className="w-1/4" />
            <div className="flex items-start flex-col h-full ml-3 w-3/4">
              <div className="text-sm font-semibold">{example.heading}</div>
              <div className="text-sm text-zinc-600">{example.subheading}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}