multi image

app/(chat)/chat/[id]/page.tsx

@@ -1,47 +1,47 @@
-import { type Metadata } from 'next'
-import { notFound, redirect } from 'next/navigation'
+import { type Metadata } from 'next';
+import { notFound, redirect } from 'next/navigation';
 
-import { auth } from '@/auth'
-import { getChat } from '@/app/actions'
-import { Chat } from '@/components/chat'
+import { auth } from '@/auth';
+import { getChat } from '@/app/actions';
+import { Chat } from '@/components/chat';
 
 export interface ChatPageProps {
-  params: {
-    id: string
-  }
+	params: {
+		id: string;
+	};
 }
 
 export async function generateMetadata({
-  params
+	params,
 }: ChatPageProps): Promise<Metadata> {
-  const session = await auth()
+	const session = await auth();
 
-  if (!session?.user) {
-    return {}
-  }
+	if (!session?.user) {
+		return {};
+	}
 
-  const chat = await getChat(params.id, session.user.id)
-  return {
-    title: chat?.title.toString().slice(0, 50) ?? 'Chat'
-  }
+	const chat = await getChat(params.id, session.user.id);
+	return {
+		title: chat?.title.toString().slice(0, 50) ?? 'Chat',
+	};
 }
 
 export default async function ChatPage({ params }: ChatPageProps) {
-  const session = await auth()
+	const session = await auth();
 
-  if (!session?.user) {
-    redirect(`/sign-in?next=/chat/${params.id}`)
-  }
+	if (!session?.user) {
+		redirect(`/sign-in?next=/chat/${params.id}`);
+	}
 
-  const chat = await getChat(params.id, session.user.id)
+	const chat = await getChat(params.id, session.user.id);
 
-  if (!chat) {
-    notFound()
-  }
+	if (!chat) {
+		notFound();
+	}
 
-  if (chat?.userId !== session?.user?.id) {
-    notFound()
-  }
+	if (chat?.userId !== session?.user?.id) {
+		notFound();
+	}
 
-  return <Chat id={chat.id} initialMessages={chat.messages} />
+	return <Chat id={chat.id} initialMessages={chat.messages} />;
 }

app/(chat)/page.tsx

@@ -4,14 +4,14 @@ import { nanoid } from '@/lib/utils';
 import { Chat } from '@/components/chat';
 import { ThemeToggle } from '../../components/theme-toggle';
 import { useAtomValue } from 'jotai';
-import { targetImageAtom } from '../../state';
+import { datasetAtom } from '../../state';
 import { EmptyScreen } from '../../components/empty-screen';
 
 export default function IndexPage() {
 	const id = nanoid();
-	const targetImage = useAtomValue(targetImageAtom);
+	const dataset = useAtomValue(datasetAtom);
 
-	if (!targetImage)
+	if (!dataset.length)
 		return (
 			<div className="pb-[150px] pt-4 md:pt-10 h-full">
 				<EmptyScreen />
@@ -20,16 +20,7 @@ export default function IndexPage() {
 
 	return (
 		<>
-			<Chat
-				id={id}
-				initialMessages={[
-					{
-						id: '123',
-						content: 'Hi, what do you want to know about this image?',
-						role: 'system',
-					},
-				]}
-			/>
+			<Chat id={id} />
 			<ThemeToggle />
 		</>
 	);

app/api/chat/route.ts

@@ -5,6 +5,7 @@ import { auth } from '@/auth';
 import { nanoid } from '@/lib/utils';
 import {
 	ChatCompletionContentPart,
+	ChatCompletionContentPartImage,
 	ChatCompletionMessageParam,
 } from 'openai/resources';
 
@@ -16,9 +17,9 @@ const openai = new OpenAI({
 
 export async function POST(req: Request) {
 	const json = await req.json();
-	const { messages, image } = json as {
+	const { messages, dataset } = json as {
 		messages: ChatCompletionMessageParam[];
-		image: string;
+		dataset: string[];
 	};
 
 	const userId = (await auth())?.user.id;
@@ -37,10 +38,13 @@ export async function POST(req: Request) {
 					type: 'text',
 					text: message.content as string,
 				},
-				{
-					type: 'image_url',
-					image_url: { url: image },
-				},
+				...dataset.map(
+					image =>
+						({
+							type: 'image_url',
+							image_url: { url: image },
+						}) satisfies ChatCompletionContentPartImage,
+				),
 			];
 			return {
 				role: 'user',

app/share/[id]/page.tsx

@@ -3,7 +3,7 @@ import { notFound } from 'next/navigation';
 
 import { formatDate } from '@/lib/utils';
 import { getSharedChat } from '@/app/actions';
-import { ChatList } from '@/components/chat-list';
+import { ChatList } from '@/components/chat/ChatList';
 
 interface SharePageProps {
 	params: {

components/chat/ImageList.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import useImageUpload from '../../lib/hooks/useImageUpload';
+import { useAtomValue } from 'jotai';
+import { datasetAtom } from '../../state';
+import Image from 'next/image';
+
+export interface ImageListProps {}
+
+const ImageList: React.FC<ImageListProps> = () => {
+	const { getRootProps, getInputProps, isDragActive } = useImageUpload();
+	const dataset = useAtomValue(datasetAtom);
+	return (
+		<div className="relative aspect-[1/1] size-full px-12">
+			{dataset.length < 10 ? (
+				<div className="col-span-full px-8 py-4 rounded-xl bg-blue-100 text-blue-400 mb-8">
+					You can upload up to 10 images max.
+				</div>
+			) : (
+				<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
+					You have reached the maximum limit of 10 images.
+				</div>
+			)}
+			<div
+				{...getRootProps()}
+				className="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4"
+			>
+				{dataset.map((imageSrc, index) => {
+					return (
+						<Image
+							src={imageSrc}
+							key={index}
+							alt="dataset images"
+							width={500}
+							height={500}
+							objectFit="cover"
+							className="relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105"
+						/>
+					);
+				})}
+			</div>
+
+			{isDragActive && (
+				<div
+					{...getRootProps()}
+					className="dropzone border-2 border-dashed border-gray-400 size-full absolute top-0 left-0 flex items-center justify-center rounded-lg cursor-pointer bg-gray-500/50"
+				>
+					<input {...getInputProps()} />
+					<p className="text-white">Drop the files here ...</p>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default ImageList;

components/{chat.tsx → chat/index.tsx}

@@ -1,22 +1,15 @@
 'use client';
 
 import { useChat, type Message } from 'ai/react';
-import '@/app/globals.css';
 
 import { cn } from '@/lib/utils';
-import { ChatList } from '@/components/chat-list';
+import { ChatList } from '@/components/chat/ChatList';
 import { ChatPanel } from '@/components/chat-panel';
-import { EmptyScreen } from '@/components/empty-screen';
 import { ChatScrollAnchor } from '@/components/chat-scroll-anchor';
-import { useState } from 'react';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
 import { toast } from 'react-hot-toast';
-import { usePathname, useRouter } from 'next/navigation';
 import { useAtom } from 'jotai';
-import { targetImageAtom } from '@/state';
-import Image from 'next/image';
-import { ThemeToggle } from './theme-toggle';
+import { datasetAtom } from '@/state';
+import ImageList from './ImageList';
 
 export interface ChatProps extends React.ComponentProps<'div'> {
 	initialMessages?: Message[];
@@ -24,14 +17,14 @@ export interface ChatProps extends React.ComponentProps<'div'> {
 }
 
 export function Chat({ id, initialMessages, className }: ChatProps) {
-	const [targetImage, setTargetImage] = useAtom(targetImageAtom);
+	const [dataset] = useAtom(datasetAtom);
 	const { messages, append, reload, stop, isLoading, input, setInput } =
 		useChat({
 			initialMessages,
 			id,
 			body: {
 				id,
-				image: targetImage,
+				dataset: dataset,
 			},
 			onResponse(response) {
 				if (response.status === 401) {
@@ -45,43 +38,13 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 			<div className={cn('pb-[150px] pt-4 md:pt-10 h-full', className)}>
 				<div className="flex h-full">
 					<div className="w-1/2 relative border-r-2 border-gray-200">
-						<div className="relative aspect-[1/1] w-full px-12">
-							<div className="flex items-center h-[600px] relative">
-								<Image
-									src={targetImage!}
-									alt="target image"
-									layout="fill"
-									objectFit="contain"
-									className="rounded-xl bg-gray-200"
-								/>
-							</div>
-							<button
-								className="px-2 py-1 rounded-lg text-gray-600 border-2 border-gray-600 flex items-center mt-4"
-								onClick={() => setTargetImage(null)}
-							>
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									className="size-4"
-								>
-									<path
-										strokeLinecap="round"
-										strokeLinejoin="round"
-										strokeWidth={2}
-										d="M15 19l-7-7 7-7"
-									/>
-								</svg>
-								Back
-							</button>
-						</div>
+						<ImageList />
 					</div>
 					<div className="w-1/2 relative overflow-auto">
 						<ChatList messages={messages} isLoading={isLoading} />
+						<ChatScrollAnchor trackVisibility={isLoading} />
 					</div>
 				</div>
-				<ChatScrollAnchor trackVisibility={isLoading} />
 			</div>
 			<ChatPanel
 				id={id}

components/empty-screen.tsx

@@ -1,7 +1,8 @@
 import { useAtom } from 'jotai';
 import { useDropzone } from 'react-dropzone';
-import { targetImageAtom } from '../state';
+import { datasetAtom } from '../state';
 import Image from 'next/image';
+import useImageUpload from '../lib/hooks/useImageUpload';
 
 const examples = [
 	'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg',
@@ -11,25 +12,8 @@ const examples = [
 ];
 
 export function EmptyScreen() {
-	const [, setTarget] = useAtom(targetImageAtom);
-	const { getRootProps, getInputProps } = useDropzone({
-		accept: {
-			'image/*': ['.jpeg', '.png'],
-		},
-		multiple: false,
-		onDrop: async acceptedFiles => {
-			try {
-				const file = acceptedFiles[0];
-				const reader = new FileReader();
-				reader.onloadend = () => {
-					setTarget(reader.result as string);
-				};
-				reader.readAsDataURL(file);
-			} catch (err) {
-				console.error(err);
-			}
-		},
-	});
+	const [, setTarget] = useAtom(datasetAtom);
+	const { getRootProps, getInputProps } = useImageUpload();
 	return (
 		<div className="mx-auto max-w-2xl px-4">
 			<div className="rounded-lg border bg-background p-8">
@@ -56,7 +40,7 @@ export function EmptyScreen() {
 							height={120}
 							alt="example images"
 							className="object-cover rounded mr-3 shadow-md hover:scale-105 cursor-pointer transition-transform"
-							onClick={() => setTarget(example)}
+							onClick={() => setTarget([example])}
 						/>
 					))}
 				</div>

lib/hooks/useImageUpload.ts

@@ -0,0 +1,41 @@
+import { useAtom } from 'jotai';
+import { useDropzone } from 'react-dropzone';
+import { datasetAtom } from '../../state';
+
+const useImageUpload = () => {
+	const [, setTarget] = useAtom(datasetAtom);
+	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		accept: {
+			'image/*': ['.jpeg', '.png'],
+		},
+		maxFiles: 10,
+		multiple: true,
+		onDrop: acceptedFiles => {
+			acceptedFiles.forEach(file => {
+				try {
+					const reader = new FileReader();
+					reader.onloadend = () => {
+						const newImage = reader.result as string;
+						setTarget(prev => {
+							// Check if the image already exists in the state
+							if (prev.length >= 10 || prev.includes(newImage)) {
+								// If it does, return the state unchanged
+								return prev;
+							} else {
+								// If it doesn't, add the new image to the state
+								return [...prev, newImage];
+							}
+						});
+					};
+					reader.readAsDataURL(file);
+				} catch (err) {
+					console.error(err);
+				}
+			});
+		},
+	});
+
+	return { getRootProps, getInputProps, isDragActive };
+};
+
+export default useImageUpload;

state/index.ts

@@ -1,3 +1,4 @@
 import { atom } from 'jotai';
 
-export const targetImageAtom = atom<string | null>(null);
+// list of image urls or base64 strings
+export const datasetAtom = atom<string[]>([]);