app/chat/page.tsx

'use client';

import ImageSelector from '@/components/chat/ImageSelector';
import { generateInputImageMarkdown } from '@/lib/messageUtils';
import { ChatEntity, MessageBase } from '@/lib/types';
import { fetcher } from '@/lib/utils';
import Image from 'next/image';
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';

const exampleMessages = [
  {
    heading: 'Counting',
    subheading: 'number of cereals in an image',
    url: 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
    initMessages: [
      {
        role: 'user',
        content:
          'how many cereals are there in the image?' +
          '\n\n' +
          generateInputImageMarkdown(
            'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
          ),
        id: 'fake-id-1',
      },
    ],
  },
  // {
  //   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();
  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={`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 () => {
              const resp = await fetcher<ChatEntity>('/api/upload', {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                  url: example.url,
                  initMessages: example.initMessages,
                }),
              });
              if (resp) {
                router.push(`/chat/${resp.id}`);
              }
            }}
          >
            <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>
  );
}