(feat:attach) functionality to upload files

frontend/src/components/MessageInput.tsx

@@ -22,6 +22,7 @@ interface MessageInputProps {
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
   onSubmit: () => void;
   loading: boolean;
+  onAttachmentChange?: (attachments: { fileName: string; id: string }[]) => void;
 }
 
 interface UploadState {
@@ -38,6 +39,7 @@ export default function MessageInput({
   onChange,
   onSubmit,
   loading,
+  onAttachmentChange,
 }: MessageInputProps) {
   const { t } = useTranslation();
   const [isDarkTheme] = useDarkTheme();
@@ -199,7 +201,7 @@ export default function MessageInput({
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
     if (e.key === 'Enter' && !e.shiftKey) {
       e.preventDefault();
-      onSubmit();
+      handleSubmit();
       if (inputRef.current) {
         inputRef.current.value = '';
         handleInput();
@@ -211,18 +213,22 @@ export default function MessageInput({
     console.log('Selected document:', doc);
   };
 
-  const renderUploadStatus = () => {
+  useEffect(() => {
-    const activeUploads = uploads.filter(u => 
+    if (onAttachmentChange) {
-      u.status === 'uploading' || u.status === 'processing'
+      const completedAttachments = uploads
-    );
+        .filter(upload => upload.status === 'completed' && upload.attachment_id)
-    
+        .map(upload => ({
-    if (activeUploads.length === 0) {
+          fileName: upload.fileName,
-      return 'Attach';
+          id: upload.attachment_id as string
+        }));
+      onAttachmentChange(completedAttachments);
     }
+  }, [uploads, onAttachmentChange]);
 
-    return `Uploading ${activeUploads.length} file(s)`;
+  const handleSubmit = () => {
+    onSubmit();
+    setUploads(prevUploads => prevUploads.filter(upload => upload.status !== 'completed'));
   };
-
   return (
     <div className="flex flex-col w-full mx-2">
       <div className="flex flex-col w-full rounded-[23px] border dark:border-grey border-dark-gray bg-lotion dark:bg-transparent relative">
@@ -332,7 +338,7 @@ export default function MessageInput({
           </div>
 
           <button
-            onClick={loading ? undefined : onSubmit}
+            onClick={loading ? undefined : handleSubmit}
             aria-label={loading ? t('loading') : t('send')}
             className={`flex items-center justify-center p-2.5 rounded-full ${loading ? 'bg-gray-300 dark:bg-gray-600' : 'bg-black dark:bg-white'} ml-auto`}
             disabled={loading}

frontend/src/conversation/Conversation.tsx

@@ -29,6 +29,11 @@ import { ActiveState } from '../models/misc';
 import ConversationMessages from './ConversationMessages';
 import MessageInput from '../components/MessageInput';
 
+interface AttachmentState {
+  fileName: string;
+  id: string;
+}
+
 export default function Conversation() {
   const token = useSelector(selectToken);
   const queries = useSelector(selectQueries);
@@ -45,6 +50,7 @@ export default function Conversation() {
     useState<ActiveState>('INACTIVE');
   const [files, setFiles] = useState<File[]>([]);
   const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
+  const [attachments, setAttachments] = useState<AttachmentState[]>([]);
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     setUploadModalState('ACTIVE');
@@ -95,21 +101,26 @@ export default function Conversation() {
     isRetry = false,
     updated = null,
     indx = undefined,
+    attachments = [],
   }: {
     question: string;
     isRetry?: boolean;
     updated?: boolean | null;
     indx?: number;
+    attachments?: { fileName: string; id: string }[];
   }) => {
     if (updated === true) {
       !isRetry &&
-        dispatch(resendQuery({ index: indx as number, prompt: question })); //dispatch only new queries
+        dispatch(resendQuery({ index: indx as number, prompt: question }));
       fetchStream.current = dispatch(fetchAnswer({ question, indx }));
     } else {
       question = question.trim();
       if (question === '') return;
-      !isRetry && dispatch(addQuery({ prompt: question })); //dispatch only new queries
+      !isRetry && dispatch(addQuery({ prompt: question, attachments }));
-      fetchStream.current = dispatch(fetchAnswer({ question }));
+      fetchStream.current = dispatch(fetchAnswer({ 
+        question, 
+        attachments: attachments.map(a => a.id) 
+      }));
     }
   };
 
@@ -160,7 +171,11 @@ export default function Conversation() {
           isRetry: true,
         });
       } else {
-        handleQuestion({ question: input });
+        handleQuestion({ 
+          question: input, 
+          attachments: attachments
+        });
+        setAttachments([]);
       }
       setInput('');
     }
@@ -245,6 +260,7 @@ export default function Conversation() {
             onChange={(e) => setInput(e.target.value)}
             onSubmit={handleQuestionSubmission}
             loading={status === 'loading'}
+            onAttachmentChange={setAttachments}
           />
         </div>