Pull Request: Implement File Handling Capabilities for chat0

.gitignore

@@ -41,4 +41,5 @@ yarn-error.log*
 next-env.d.ts
 
 #cloudflare
-.open-next
+.open-next 
+package-lock.json

frontend/components/ChatInput.tsx

@@ -1,5 +1,5 @@
-import { ChevronDown, Check, ArrowUpIcon } from 'lucide-react';
-import { memo, useCallback, useMemo } from 'react';
+import { ChevronDown, Check, ArrowUpIcon, Plus, CircleX } from 'lucide-react';
+import { memo, useCallback, useMemo, useRef, useState } from 'react';
 import { Textarea } from '@/frontend/components/ui/textarea';
 import { cn } from '@/lib/utils';
 import { Button } from '@/frontend/components/ui/button';
@@ -18,11 +18,12 @@ import { useAPIKeyStore } from '@/frontend/stores/APIKeyStore';
 import { useModelStore } from '@/frontend/stores/ModelStore';
 import { AI_MODELS, AIModel, getModelConfig } from '@/lib/models';
 import KeyPrompt from '@/frontend/components/KeyPrompt';
-import { UIMessage } from 'ai';
+import {  UIMessage } from 'ai';
 import { v4 as uuidv4 } from 'uuid';
-import { StopIcon } from './ui/icons';
-import { toast } from 'sonner';
+import { StopIcon } from './ui/icons'; 
 import { useMessageSummary } from '../hooks/useMessageSummary';
+import { useFileHandler } from '../hooks/useFileHandler';
+import FilePreview from './filePreview';
 
 interface ChatInputProps {
   threadId: string;
@@ -65,6 +66,9 @@ function PureChatInput({
     maxHeight: 200,
   });
 
+  const { fileList, fileUrls, contentTypes,  handlePaste, handleFileChange, clearFiles , handleDragOver  , handleDrop} = useFileHandler();
+
+
   const navigate = useNavigate();
   const { id } = useParams();
 
@@ -99,10 +103,11 @@ function PureChatInput({
 
     const userMessage = createUserMessage(messageId, currentInput.trim());
     await createMessage(threadId, userMessage);
-
-    append(userMessage);
+    append(userMessage, { experimental_attachments: fileList })
     setInput('');
+    clearFiles();
     adjustHeight(true);
+
   }, [
     input,
     status,
@@ -113,7 +118,8 @@ function PureChatInput({
     textareaRef,
     threadId,
     complete,
-  ]);
+  ]); 
+
 
   if (!canChat) {
     return <KeyPrompt />;
@@ -137,6 +143,14 @@ function PureChatInput({
         <div className="relative">
           <div className="flex flex-col">
             <div className="bg-secondary overflow-y-auto max-h-[300px]">
+
+              <FilePreview
+                clearFiles={clearFiles}
+                contentTypes={contentTypes}
+                fileList={fileList}
+                fileUrls={fileUrls}
+              />
+
               <Textarea
                 id="chat-input"
                 value={input}
@@ -152,6 +166,9 @@ function PureChatInput({
                 ref={textareaRef}
                 onKeyDown={handleKeyDown}
                 onChange={handleInputChange}
+                onPaste={handlePaste}
+                onDrop={handleDrop}
+                onDragOver={handleDragOver}
                 aria-label="Chat message input"
                 aria-describedby="chat-input-description"
               />
@@ -163,12 +180,18 @@ function PureChatInput({
             <div className="h-14 flex items-center px-2">
               <div className="flex items-center justify-between w-full">
                 <ChatModelDropdown />
+                <div className="flex gap-2 items-center">
+                  <input onChange={handleFileChange} className='hidden' type="file" name="" id="fileChange" />
+                  <label htmlFor="fileChange">
+                    <Plus />
+                  </label>
 
-                {status === 'submitted' || status === 'streaming' ? (
-                  <StopButton stop={stop} />
-                ) : (
-                  <SendButton onSubmit={handleSubmit} disabled={isDisabled} />
-                )}
+                  {status === 'submitted' || status === 'streaming' ? (
+                    <StopButton stop={stop} />
+                  ) : (
+                    <SendButton onSubmit={handleSubmit} disabled={isDisabled} />
+                  )}
+                </div>
               </div>
             </div>
           </div>

frontend/components/Message.tsx

@@ -1,12 +1,13 @@
 import { memo, useState } from 'react';
 import MarkdownRenderer from '@/frontend/components/MemoizedMarkdown';
 import { cn } from '@/lib/utils';
-import { UIMessage } from 'ai';
+import { Attachment, UIMessage } from 'ai';
 import equal from 'fast-deep-equal';
 import MessageControls from './MessageControls';
 import { UseChatHelpers } from '@ai-sdk/react';
 import MessageEditor from './MessageEditor';
 import MessageReasoning from './MessageReasoning';
+import { TextFilePreview } from './filePreview';
 
 function PureMessage({
   threadId,
@@ -67,7 +68,27 @@ function PureMessage({
                   stop={stop}
                 />
               )}
-              {mode === 'view' && <p>{part.text}</p>}
+              {mode === 'view' && (
+                <div className='flex flex-col gap-2'>
+                  {message.experimental_attachments
+                    ?.map((attachment, index) => (
+                      <section key={attachment.name}>
+                        {attachment.contentType?.startsWith("image/") ?
+                          <img className='w-12 h-12 rounded-md'
+                            key={`${message.id}-${index}`}
+                            src={attachment.url}
+                            alt={attachment.name}
+                          /> 
+                         : attachment.contentType?.startsWith("text/") ?
+                           <TextFilePreview fileList={undefined} /> :
+                          <iframe src={attachment.url} className="w-20 h-20 overflow-hidden" scrolling="no"></iframe>   
+
+                        }
+                      </section>
+                    ))}
+                  <p>{part.text}</p>
+                </div>
+              )}
 
               {mode === 'view' && (
                 <MessageControls

frontend/components/filePreview.tsx

@@ -0,0 +1,72 @@
+import { CircleX } from "lucide-react";
+import { memo, useEffect, useState } from "react";
+
+
+interface FileInputProps {
+    fileUrls: string[],
+    fileList: FileList | undefined,
+    contentTypes: string[],
+    clearFiles: () => void
+}
+
+export function TextFilePreview({ fileList }: { fileList: FileList | undefined }) {
+    const [content, setContent] = useState<string>("");
+
+    useEffect(() => {
+        if (!fileList || fileList.length === 0) {
+            setContent("");
+            return;
+        }
+        const file = fileList[0];
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            const text = e.target?.result;
+            setContent(typeof text === "string" ? text.slice(0, 100) : "");
+        };
+        reader.readAsText(file);
+    }, [fileList]);
+
+    return (
+        <div className="text-[5px] leading-1 w-15 h-14 overflow-hidden text-zinc-500 border p-2 rounded-lg bg-white dark:bg-zinc-800 dark:border-zinc-700 dark:text-zinc-400">
+            <p className="">
+                {content}
+                {content.length >= 100 && "..."}
+            </p>
+        </div>
+    );
+}
+
+
+function PreviewFile({ fileUrls, clearFiles, fileList, contentTypes }: FileInputProps) {
+    return (
+        <>
+            {fileUrls?.length > 0 &&
+                <div className="relative overflow-hidden rounded-md mb-2">
+                    <CircleX
+                        onClick={() => clearFiles()}
+                        className={`absolute top-2  ${contentTypes[0] === "image/jpeg" ? 'w-5 h-5 left-14' : 'w-4 h-4 left-10'} hover:stroke-red-400`}
+                    />
+                    {contentTypes[0] === "image/jpeg" ?
+                        <img src={fileUrls[0]} className='w-20 h-20 rounded-md' alt="attached_image" />
+                        :
+                    contentTypes[0] === "text/plain" ?
+                        <TextFilePreview fileList={fileList} />
+                     :
+                     <iframe src={fileUrls[0]} className="w-20 h-20 overflow-hidden" scrolling="no"></iframe>   
+                    }
+
+                </div>
+            }
+        </>
+    );
+}
+
+
+
+const FilePreview = memo(PreviewFile, (prevProps, nextProps) => {
+    if (prevProps.fileUrls !== nextProps.fileUrls) return false;
+    return true;
+});
+
+
+export default FilePreview;

frontend/hooks/useFileHandler.tsx

@@ -0,0 +1,84 @@
+import { useState, useCallback } from 'react';
+
+export function useFileHandler() {
+  const [fileUrls, setFileUrls] = useState<string[]>([]);
+  const [fileList, setFileList] = useState<FileList | undefined>(undefined);
+  const [contentTypes, setContentTypes] = useState<string[]>([]);
+
+  const processFiles = useCallback((files: FileList) => {
+    const urls = Array.from(files).map((file) => URL.createObjectURL(file));
+    const types = Array.from(files).map((file) => file.type);
+
+    setFileUrls(urls);
+    setFileList(files);
+    setContentTypes(types);
+    console.log("type" , types , fileUrls , fileList);
+
+  }, []);
+
+  const handlePaste = useCallback((event: React.ClipboardEvent) => {
+    event.preventDefault();
+
+    const items = event.clipboardData?.items;
+    if (!items) return;
+
+    for (let i = 0; i < items.length; i++) {
+    if (
+      items[i].type.startsWith('image') ||
+      items[i].type === 'application/pdf' ||
+      items[i].type === 'text/plain'
+    ) {
+        const file = items[i].getAsFile();
+        if (file) {
+          const dt = new DataTransfer();
+          dt.items.add(file);
+          processFiles(dt.files);
+          break;
+        }
+      }
+    }
+
+    // Optional: handle pasted text if needed
+    const text = event.clipboardData.getData('text/plain');
+    if (text) {
+      document.execCommand('insertText', false, text);
+    }
+  }, [processFiles]);
+
+  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files && files.length > 0) {
+      processFiles(files);
+    }
+  }, [processFiles]);
+
+
+  const handleDrop = useCallback((event: React.DragEvent) => {
+    event.preventDefault();
+    const files = event.dataTransfer.files;
+    if (files && files.length > 0) {
+      processFiles(files);
+    }
+  }, [processFiles]);
+
+  const handleDragOver = useCallback((event: React.DragEvent) => {
+    event.preventDefault(); 
+  }, []);
+
+  const clearFiles = useCallback(() =>{
+    setFileList(undefined);
+    setFileUrls([]);
+    setContentTypes([]) 
+  } , [])
+
+  return {
+    fileUrls,
+    fileList,
+    contentTypes,
+    handlePaste,
+    handleFileChange,
+    handleDragOver,
+    handleDrop,
+    clearFiles
+  };
+}