image-upload

app/components/chat/Chat.client.tsx

@@ -73,8 +73,11 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
   useShortcuts();
 
   const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   const [chatStarted, setChatStarted] = useState(initialMessages.length > 0);
+  const [uploadedFiles, setUploadedFiles] = useState<File[]>([]);  // Move here
+  const [imageDataList, setImageDataList] = useState<string[]>([]); // Move here
+
+
   const [model, setModel] = useState(() => {
     const savedModel = Cookies.get('selectedModel');
     return savedModel || DEFAULT_MODEL;
@@ -196,7 +199,19 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        * manually reset the input and we'd have to manually pass in file attachments. However, those
        * aren't relevant here.
        */
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}` });
+      append({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${diff}\n\n${_input}`
+          },
+          ...(imageDataList.map(imageData => ({
+            type: 'image',
+            image: imageData
+          })))
+        ]
+      });
 
       /**
        * After sending a new message we reset all modifications since the model
@@ -204,16 +219,30 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
        */
       workbenchStore.resetAllFileModifications();
     } else {
-      append({ role: 'user', content: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}` });
+      append({
+        role: 'user',
+        content: [
+          {
+            type: 'text',
+            text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${_input}`
+          },
+          ...(imageDataList.map(imageData => ({
+            type: 'image',
+            image: imageData
+          })))
+        ]
+      });
     }
 
     setInput('');
+    // Add file cleanup here
+    setUploadedFiles([]);
+    setImageDataList([]);
 
     resetEnhancer();
 
     textareaRef.current?.blur();
   };
-
   const [messageRef, scrollRef] = useSnapScroll();
 
   useEffect(() => {
@@ -274,6 +303,11 @@ export const ChatImpl = memo(({ initialMessages, storeMessageHistory }: ChatProp
           apiKeys
         );
       }}
+      uploadedFiles={uploadedFiles}
+      setUploadedFiles={setUploadedFiles}
+      imageDataList={imageDataList}
+      setImageDataList={setImageDataList}
     />
   );
 });
+