components/chat/ImageSelector.tsx

'use client';

import React from 'react';
import Image from 'next/image';
import useImageUpload from '../../lib/hooks/useImageUpload';
import { fetcher } from '@/lib/utils';
import { ChatEntity, MessageBase } from '@/lib/types';
import { useRouter } from 'next/navigation';

export interface ImageSelectorProps {}

type Example = {
  url: string;
  initMessages: MessageBase[];
};

const examples: Example[] = [
  {
    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?',
        id: 'fake-id-1',
      },
    ],
  },
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/people-example.jpeg',
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/house-exmaple.jpg',
  // 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/safari-example.png',
];

const ImageSelector: React.FC<ImageSelectorProps> = () => {
  const router = useRouter();
  const { getRootProps, getInputProps } = useImageUpload(
    undefined,
    async files => {
      const formData = new FormData();
      if (files.length !== 1) {
        throw new Error('Only one image can be uploaded at a time');
      }
      console.log();
      const reader = new FileReader();
      reader.readAsDataURL(files[0]);
      reader.onload = async () => {
        const resp = await fetcher<ChatEntity>('/api/upload', {
          method: 'POST',
          body: JSON.stringify({
            base64: reader.result as string,
            fileType: files[0].type,
          }),
        });
        if (resp) {
          router.push(`/chat/${resp.id}`);
        }
      };
    },
  );
  return (
    <div className="mx-auto max-w-2xl px-4 mt-8">
      <div className="rounded-lg border bg-background p-8">
        <h1 className="mb-2 text-lg font-semibold">Welcome to Vision Agent</h1>
        <p>Lets start by choosing an image</p>
        <div
          {...getRootProps()}
          className="dropzone border-2 border-dashed border-gray-400 w-full h-64 flex items-center justify-center rounded-lg mt-4 cursor-pointer"
        >
          <input {...getInputProps()} />
          <p className="text-gray-400 text-lg">
            Drag or drop image here, or click to select images
          </p>
        </div>
        <p className="mt-4 mb-2">
          You can also choose from below examples we provided
        </p>
        <div className="flex">
          {examples.map(({ url, initMessages }, index) => (
            <Image
              src={url}
              key={index}
              width={120}
              height={120}
              alt="example images"
              className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
              onClick={async () => {
                const resp = await fetcher<ChatEntity>('/api/upload', {
                  method: 'POST',
                  headers: {
                    'Content-Type': 'application/json',
                  },
                  body: JSON.stringify({ url, initMessages }),
                });
                if (resp) {
                  router.push(`/chat/${resp.id}`);
                }
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default ImageSelector;