mutil image selection

components/chat-panel.tsx

@@ -1,103 +1,103 @@
-import * as React from 'react'
-import { type UseChatHelpers } from 'ai/react'
+import * as React from 'react';
+import { type UseChatHelpers } from 'ai/react';
 
-import { shareChat } from '@/app/actions'
-import { Button } from '@/components/ui/button'
-import { PromptForm } from '@/components/prompt-form'
-import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom'
-import { IconRefresh, IconShare, IconStop } from '@/components/ui/icons'
-import { ChatShareDialog } from '@/components/chat-share-dialog'
+import { shareChat } from '@/app/actions';
+import { Button } from '@/components/ui/button';
+import { PromptForm } from '@/components/prompt-form';
+import { ButtonScrollToBottom } from '@/components/button-scroll-to-bottom';
+import { IconRefresh, IconShare, IconStop } from '@/components/ui/icons';
+import { ChatShareDialog } from '@/components/chat-share-dialog';
 
 export interface ChatPanelProps
-  extends Pick<
-    UseChatHelpers,
-    | 'append'
-    | 'isLoading'
-    | 'reload'
-    | 'messages'
-    | 'stop'
-    | 'input'
-    | 'setInput'
-  > {
-  id?: string
-  title?: string
+	extends Pick<
+		UseChatHelpers,
+		| 'append'
+		| 'isLoading'
+		| 'reload'
+		| 'messages'
+		| 'stop'
+		| 'input'
+		| 'setInput'
+	> {
+	id?: string;
+	title?: string;
 }
 
 export function ChatPanel({
-  id,
-  title,
-  isLoading,
-  stop,
-  append,
-  reload,
-  input,
-  setInput,
-  messages
+	id,
+	title,
+	isLoading,
+	stop,
+	append,
+	reload,
+	input,
+	setInput,
+	messages,
 }: ChatPanelProps) {
-  const [shareDialogOpen, setShareDialogOpen] = React.useState(false)
+	const [shareDialogOpen, setShareDialogOpen] = React.useState(false);
 
-  return (
-    <div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% animate-in duration-300 ease-in-out dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
-      <ButtonScrollToBottom />
-      <div className="mx-auto sm:max-w-2xl sm:px-4">
-        <div className="flex items-center justify-center h-12">
-          {isLoading ? (
-            <Button
-              variant="outline"
-              onClick={() => stop()}
-              className="bg-background"
-            >
-              <IconStop className="mr-2" />
-              Stop generating
-            </Button>
-          ) : (
-            messages?.length >= 2 && (
-              <div className="flex space-x-2">
-                <Button variant="outline" onClick={() => reload()}>
-                  <IconRefresh className="mr-2" />
-                  Regenerate response
-                </Button>
-                {id && title ? (
-                  <>
-                    <Button
-                      variant="outline"
-                      onClick={() => setShareDialogOpen(true)}
-                    >
-                      <IconShare className="mr-2" />
-                      Share
-                    </Button>
-                    <ChatShareDialog
-                      open={shareDialogOpen}
-                      onOpenChange={setShareDialogOpen}
-                      onCopy={() => setShareDialogOpen(false)}
-                      shareChat={shareChat}
-                      chat={{
-                        id,
-                        title,
-                        messages
-                      }}
-                    />
-                  </>
-                ) : null}
-              </div>
-            )
-          )}
-        </div>
-        <div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
-          <PromptForm
-            onSubmit={async value => {
-              await append({
-                id,
-                content: value,
-                role: 'user'
-              })
-            }}
-            input={input}
-            setInput={setInput}
-            isLoading={isLoading}
-          />
-        </div>
-      </div>
-    </div>
-  )
+	return (
+		<div className="fixed inset-x-0 bottom-0 w-full bg-gradient-to-b from-muted/30 from-0% to-muted/30 to-50% animate-in duration-300 ease-in-out dark:from-background/10 dark:from-10% dark:to-background/80 peer-[[data-state=open]]:group-[]:lg:pl-[250px] peer-[[data-state=open]]:group-[]:xl:pl-[300px]">
+			<ButtonScrollToBottom />
+			<div className="mx-auto sm:max-w-3xl sm:px-4">
+				<div className="flex items-center justify-center h-12">
+					{isLoading ? (
+						<Button
+							variant="outline"
+							onClick={() => stop()}
+							className="bg-background"
+						>
+							<IconStop className="mr-2" />
+							Stop generating
+						</Button>
+					) : (
+						messages?.length >= 2 && (
+							<div className="flex space-x-2">
+								<Button variant="outline" onClick={() => reload()}>
+									<IconRefresh className="mr-2" />
+									Regenerate response
+								</Button>
+								{id && title ? (
+									<>
+										<Button
+											variant="outline"
+											onClick={() => setShareDialogOpen(true)}
+										>
+											<IconShare className="mr-2" />
+											Share
+										</Button>
+										<ChatShareDialog
+											open={shareDialogOpen}
+											onOpenChange={setShareDialogOpen}
+											onCopy={() => setShareDialogOpen(false)}
+											shareChat={shareChat}
+											chat={{
+												id,
+												title,
+												messages,
+											}}
+										/>
+									</>
+								) : null}
+							</div>
+						)
+					)}
+				</div>
+				<div className="px-4 py-2 space-y-4 border-t shadow-lg bg-background sm:rounded-t-xl sm:border md:py-4">
+					<PromptForm
+						onSubmit={async value => {
+							await append({
+								id,
+								content: value,
+								role: 'user',
+							});
+						}}
+						input={input}
+						setInput={setInput}
+						isLoading={isLoading}
+					/>
+				</div>
+			</div>
+		</div>
+	);
 }

components/chat/ChatList.tsx

@@ -57,7 +57,7 @@ export function ChatList({ messages, isLoading }: ChatList) {
 			: messages;
 
 	return (
-		<div className="relative mx-auto max-w-2xl px-8 pr-12">
+		<div className="relative mx-auto max-w-3xl px-8 pr-12">
 			{messageWithLoading.map((message, index) => (
 				<div key={index}>
 					<ChatMessage message={message} />

components/chat/ImageList.tsx

@@ -1,19 +1,23 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import useImageUpload from '../../lib/hooks/useImageUpload';
-import { useAtomValue } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { datasetAtom } from '../../state';
 import Image from 'next/image';
+import { produce } from 'immer';
 
 export interface ImageListProps {}
 
 const ImageList: React.FC<ImageListProps> = () => {
-	const { getRootProps, getInputProps, isDragActive } = useImageUpload();
-	const dataset = useAtomValue(datasetAtom);
+	const { getRootProps, getInputProps, isDragActive } = useImageUpload({
+		noClick: true,
+	});
+
+	const [dataset, setDataset] = useAtom(datasetAtom);
 	return (
-		<div className="relative aspect-[1/1] size-full px-12">
+		<div className="relative size-full px-12 max-w-3xl mx-auto">
 			{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.
+					You can upload up to 10 images max by dragging image.
 				</div>
 			) : (
 				<div className="col-span-full px-8 py-4 rounded-xl bg-red-100 text-red-400 mb-8">
@@ -24,17 +28,34 @@ const ImageList: React.FC<ImageListProps> = () => {
 				{...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) => {
+				{dataset.map(entity => {
+					const { url: imageSrc, name, selected } = entity;
 					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
+							key={name}
+							onClick={() =>
+								setDataset(prev =>
+									produce(prev, draft => {
+										const index = draft.findIndex(d => d.name === name);
+										draft[index].selected = !selected;
+									}),
+								)
+							}
+							className={`relative rounded-xl overflow-hidden shadow-md cursor-pointer transition-transform hover:scale-105 box-content ${selected ? 'border-4 border-blue-500' : ''}`}
+						>
+							<Image
+								src={imageSrc}
+								draggable={false}
+								alt="dataset images"
+								width={500}
+								height={500}
+								objectFit="cover"
+								className="rounded-xl"
+							/>
+							<div className="absolute bottom-0 left-0 bg-gray-800/50 text-white px-3 py-1 rounded-tr-lg">
+								<p className="text-xs font-bold">{name}</p>
+							</div>
+						</div>
 					);
 				})}
 			</div>

components/chat/index.tsx

@@ -24,7 +24,7 @@ export function Chat({ id, initialMessages, className }: ChatProps) {
 			id,
 			body: {
 				id,
-				dataset: dataset,
+				dataset: dataset.filter(entity => entity.selected),
 			},
 			onResponse(response) {
 				if (response.status === 401) {

components/empty-screen.tsx

@@ -40,7 +40,9 @@ 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([{ url: example, name: 'i-1', selected: false }])
+							}
 						/>
 					))}
 				</div>

lib/hooks/useImageUpload.ts

@@ -1,29 +1,44 @@
 import { useAtom } from 'jotai';
-import { useDropzone } from 'react-dropzone';
-import { datasetAtom } from '../../state';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import { DatasetImageEntity, datasetAtom } from '../../state';
+import { toast } from 'react-hot-toast';
 
-const useImageUpload = () => {
+const useImageUpload = (options?: Partial<DropzoneOptions>) => {
 	const [, setTarget] = useAtom(datasetAtom);
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({
 		accept: {
 			'image/*': ['.jpeg', '.png'],
 		},
-		maxFiles: 10,
 		multiple: true,
 		onDrop: acceptedFiles => {
-			acceptedFiles.forEach(file => {
+			if (acceptedFiles.length > 10) {
+				toast('You can only upload 10 images max.', {
+					icon: '⚠️',
+				});
+			}
+			acceptedFiles.slice(0, 10).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 (
+								prev.length >= 10 ||
+								prev.find(entity => entity.url === 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];
+								return [
+									...prev,
+									{
+										url: newImage,
+										selected: false,
+										name: `i-${prev.length + 1}`,
+									} satisfies DatasetImageEntity,
+								];
 							}
 						});
 					};
@@ -33,6 +48,7 @@ const useImageUpload = () => {
 				}
 			});
 		},
+		...options,
 	});
 
 	return { getRootProps, getInputProps, isDragActive };

package.json

@@ -30,6 +30,7 @@
     "focus-trap-react": "^10.2.3",
     "framer-motion": "^10.18.0",
     "geist": "^1.2.1",
+    "immer": "^10.0.3",
     "jotai": "^2.7.0",
     "nanoid": "^5.0.4",
     "next": "14.1.0",

state/index.ts

@@ -1,4 +1,10 @@
 import { atom } from 'jotai';
 
+export type DatasetImageEntity = {
+	url: string;
+	selected: boolean;
+	name: string;
+};
 // list of image urls or base64 strings
-export const datasetAtom = atom<string[]>([]);
+export const datasetAtom = atom<DatasetImageEntity[]>([]);
+// export const selectedImagesAtom = atom<number[]>([]);

yarn.lock

@@ -2262,6 +2262,11 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"