lift 10 image restriction

app/api/chat/route.ts

@@ -33,6 +33,7 @@ export async function POST(req: Request) {
 	const formattedMessage: ChatCompletionMessageParam[] = messages.map(
 		message => {
 			const { dataset, ...rest } = message;
+			console.log('[Ming] ~ POST ~ dataset:', dataset?.length);
 
 			const contentWithImage: ChatCompletionContentPart[] = [
 				{

components/chat/ImageList.tsx

@@ -15,7 +15,7 @@ const ImageList: React.FC<ImageListProps> = () => {
 	const [dataset, setDataset] = useAtom(datasetAtom);
 	return (
 		<div className="relative size-full px-12 max-w-3xl mx-auto">
-			{dataset.length < 10 ? (
+			{/* {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 by dragging image.
 				</div>
@@ -23,7 +23,7 @@ const ImageList: React.FC<ImageListProps> = () => {
 				<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"

components/prompt-form.tsx

@@ -1,52 +1,52 @@
-import * as React from 'react'
-import Textarea from 'react-textarea-autosize'
-import { UseChatHelpers } from 'ai/react'
-import { useEnterSubmit } from '@/lib/hooks/use-enter-submit'
-import { cn } from '@/lib/utils'
-import { Button, buttonVariants } from '@/components/ui/button'
+import * as React from 'react';
+import Textarea from 'react-textarea-autosize';
+import { UseChatHelpers } from 'ai/react';
+import { useEnterSubmit } from '@/lib/hooks/use-enter-submit';
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/ui/button';
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@/components/ui/tooltip'
-import { IconArrowElbow, IconPlus } from '@/components/ui/icons'
-import { useRouter } from 'next/navigation'
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { IconArrowElbow, IconPlus } from '@/components/ui/icons';
+import { useRouter } from 'next/navigation';
 
 export interface PromptProps
-  extends Pick<UseChatHelpers, 'input' | 'setInput'> {
-  onSubmit: (value: string) => void
-  isLoading: boolean
+	extends Pick<UseChatHelpers, 'input' | 'setInput'> {
+	onSubmit: (value: string) => void;
+	isLoading: boolean;
 }
 
 export function PromptForm({
-  onSubmit,
-  input,
-  setInput,
-  isLoading
+	onSubmit,
+	input,
+	setInput,
+	isLoading,
 }: PromptProps) {
-  const { formRef, onKeyDown } = useEnterSubmit()
-  const inputRef = React.useRef<HTMLTextAreaElement>(null)
-  const router = useRouter()
-  React.useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
+	const { formRef, onKeyDown } = useEnterSubmit();
+	const inputRef = React.useRef<HTMLTextAreaElement>(null);
+	const router = useRouter();
+	React.useEffect(() => {
+		if (inputRef.current) {
+			inputRef.current.focus();
+		}
+	}, []);
 
-  return (
-    <form
-      onSubmit={async e => {
-        e.preventDefault()
-        if (!input?.trim()) {
-          return
-        }
-        setInput('')
-        await onSubmit(input)
-      }}
-      ref={formRef}
-    >
-      <div className="relative flex flex-col w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
-        {/* <Tooltip>
+	return (
+		<form
+			onSubmit={async e => {
+				e.preventDefault();
+				if (!input?.trim()) {
+					return;
+				}
+				setInput('');
+				await onSubmit(input);
+			}}
+			ref={formRef}
+		>
+			<div className="relative flex flex-col w-full px-8 pl-2 overflow-hidden max-h-60 grow bg-background sm:rounded-md sm:border sm:px-12 sm:pl-2">
+				{/* <Tooltip>
           <TooltipTrigger asChild>
             <button
               onClick={e => {
@@ -65,33 +65,33 @@ export function PromptForm({
           </TooltipTrigger>
           <TooltipContent>New Chat</TooltipContent>
         </Tooltip> */}
-        <Textarea
-          ref={inputRef}
-          tabIndex={0}
-          onKeyDown={onKeyDown}
-          rows={1}
-          value={input}
-          onChange={e => setInput(e.target.value)}
-          placeholder="Send a message."
-          spellCheck={false}
-          className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
-        />
-        <div className="absolute right-0 top-4 sm:right-4">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                type="submit"
-                size="icon"
-                disabled={isLoading || input === ''}
-              >
-                <IconArrowElbow />
-                <span className="sr-only">Send message</span>
-              </Button>
-            </TooltipTrigger>
-            <TooltipContent>Send message</TooltipContent>
-          </Tooltip>
-        </div>
-      </div>
-    </form>
-  )
+				<Textarea
+					ref={inputRef}
+					tabIndex={0}
+					onKeyDown={onKeyDown}
+					rows={1}
+					value={input}
+					onChange={e => setInput(e.target.value)}
+					placeholder="Ask questions about all or selected the images."
+					spellCheck={false}
+					className="min-h-[60px] w-full resize-none bg-transparent px-4 py-[1.3rem] focus-within:outline-none sm:text-sm"
+				/>
+				<div className="absolute right-0 top-4 sm:right-4">
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								type="submit"
+								size="icon"
+								disabled={isLoading || input === ''}
+							>
+								<IconArrowElbow />
+								<span className="sr-only">Send message</span>
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>Send message</TooltipContent>
+					</Tooltip>
+				</div>
+			</div>
+		</form>
+	);
 }

lib/hooks/useChatWithDataset.ts

@@ -73,14 +73,14 @@ const useChatWithDataset = () => {
 			dataset;
 
 	const appendWithDataset: typeof append = message => {
-		const newSystemMessage: Message = {
-			id: 'fake-id',
-			content:
-				'For the next prompt, here are names of images provided by user, please use these name if you need reference: ' +
-				selectedDataset.map(entity => entity.name).join(', '),
-			role: 'system',
-		};
-		setMessages([...messages, newSystemMessage]);
+		// const newSystemMessage: Message = {
+		// 	id: 'fake-id',
+		// 	content:
+		// 		'For the next prompt, here are names of images provided by user, please use these name if you need reference: ' +
+		// 		selectedDataset.map(entity => entity.name).join(', '),
+		// 	role: 'system',
+		// };
+		// setMessages([...messages, newSystemMessage]);
 		return append({
 			...message,
 			// @ts-ignore this is extra fields

lib/hooks/useImageUpload.ts

@@ -12,12 +12,12 @@ const useImageUpload = (options?: Partial<DropzoneOptions>) => {
 		},
 		multiple: true,
 		onDrop: acceptedFiles => {
-			if (acceptedFiles.length > 10) {
-				toast('You can only upload 10 images max.', {
-					icon: '⚠️',
-				});
-			}
-			acceptedFiles.slice(0, 10).forEach(file => {
+			// if (acceptedFiles.length > 10) {
+			// 	toast('You can only upload 10 images max.', {
+			// 		icon: '⚠️',
+			// 	});
+			// }
+			acceptedFiles.forEach(file => {
 				try {
 					const reader = new FileReader();
 					reader.onloadend = () => {
@@ -25,7 +25,7 @@ const useImageUpload = (options?: Partial<DropzoneOptions>) => {
 						setTarget(prev => {
 							// Check if the image already exists in the state
 							if (
-								prev.length >= 10 ||
+								// prev.length >= 10 ||
 								prev.find(entity => entity.url === newImage)
 							) {
 								// If it does, return the state unchanged