[UI/UX] Improve image upload experience — add preview & drag-to-reord… (#2095)

* [UI/UX] Improve image upload experience — add preview & drag-to-reorder in chat section

* chore(chat): remove image previews, keep drag-to-reorder

* chore(chat): prevent attachment drag from triggering upload dropzone

* Revert "chore(chat): prevent attachment drag from triggering upload dropzone"

This reverts commit dd4b96256c.

* (feat:conv) rmv drag-drop on sources

* (feat:msg-input) drop attachments

---------

Co-authored-by: ManishMadan2882 <manishmadan321@gmail.com>

frontend/src/components/MessageInput.tsx

@@ -1,4 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -6,6 +8,7 @@ import endpoints from '../api/endpoints';
 import userService from '../api/services/userService';
 import AlertIcon from '../assets/alert.svg';
 import ClipIcon from '../assets/clip.svg';
+import DragFileUpload from '../assets/DragFileUpload.svg';
 import ExitIcon from '../assets/exit.svg';
 import SendArrowIcon from './SendArrowIcon';
 import SourceIcon from '../assets/source.svg';
@@ -17,6 +20,7 @@ import {
   selectAttachments,
   updateAttachment,
 } from '../upload/uploadSlice';
+import { reorderAttachments } from '../upload/uploadSlice';
 
 import { ActiveState } from '../models/misc';
 import {
@@ -53,6 +57,7 @@ export default function MessageInput({
   const [isToolsPopupOpen, setIsToolsPopupOpen] = useState(false);
   const [uploadModalState, setUploadModalState] =
     useState<ActiveState>('INACTIVE');
+  const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
 
   const selectedDocs = useSelector(selectSelectedDocs);
   const token = useSelector(selectToken);
@@ -82,79 +87,134 @@ export default function MessageInput({
     };
   }, [browserOS]);
 
-  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!e.target.files || e.target.files.length === 0) return;
+  const uploadFiles = useCallback(
+    (files: File[]) => {
+      const apiHost = import.meta.env.VITE_API_HOST;
 
-    const file = e.target.files[0];
-    const formData = new FormData();
-    formData.append('file', file);
+      files.forEach((file) => {
+        const formData = new FormData();
+        formData.append('file', file);
+        const xhr = new XMLHttpRequest();
+        const uniqueId = crypto.randomUUID();
 
-    const apiHost = import.meta.env.VITE_API_HOST;
-    const xhr = new XMLHttpRequest();
-    const uniqueId = crypto.randomUUID();
+        const newAttachment = {
+          id: uniqueId,
+          fileName: file.name,
+          progress: 0,
+          status: 'uploading' as const,
+          taskId: '',
+        };
 
-    const newAttachment = {
-      id: uniqueId,
-      fileName: file.name,
-      progress: 0,
-      status: 'uploading' as const,
-      taskId: '',
-    };
+        dispatch(addAttachment(newAttachment));
 
-    dispatch(addAttachment(newAttachment));
+        xhr.upload.addEventListener('progress', (event) => {
+          if (event.lengthComputable) {
+            const progress = Math.round((event.loaded / event.total) * 100);
+            dispatch(
+              updateAttachment({
+                id: uniqueId,
+                updates: { progress },
+              }),
+            );
+          }
+        });
 
-    xhr.upload.addEventListener('progress', (event) => {
-      if (event.lengthComputable) {
-        const progress = Math.round((event.loaded / event.total) * 100);
-        dispatch(
-          updateAttachment({
-            id: uniqueId,
-            updates: { progress },
-          }),
-        );
-      }
-    });
+        xhr.onload = () => {
+          if (xhr.status === 200) {
+            const response = JSON.parse(xhr.responseText);
+            if (response.task_id) {
+              dispatch(
+                updateAttachment({
+                  id: uniqueId,
+                  updates: {
+                    taskId: response.task_id,
+                    status: 'processing',
+                    progress: 10,
+                  },
+                }),
+              );
+            }
+          } else {
+            dispatch(
+              updateAttachment({
+                id: uniqueId,
+                updates: { status: 'failed' },
+              }),
+            );
+          }
+        };
 
-    xhr.onload = () => {
-      if (xhr.status === 200) {
-        const response = JSON.parse(xhr.responseText);
-        if (response.task_id) {
+        xhr.onerror = () => {
           dispatch(
             updateAttachment({
               id: uniqueId,
-              updates: {
-                taskId: response.task_id,
-                status: 'processing',
-                progress: 10,
-              },
+              updates: { status: 'failed' },
             }),
           );
-        }
-      } else {
-        dispatch(
-          updateAttachment({
-            id: uniqueId,
-            updates: { status: 'failed' },
-          }),
-        );
-      }
-    };
+        };
 
-    xhr.onerror = () => {
-      dispatch(
-        updateAttachment({
-          id: uniqueId,
-          updates: { status: 'failed' },
-        }),
-      );
-    };
+        xhr.open('POST', `${apiHost}${endpoints.USER.STORE_ATTACHMENT}`);
+        xhr.setRequestHeader('Authorization', `Bearer ${token}`);
+        xhr.send(formData);
+      });
+    },
+    [dispatch, token],
+  );
 
-    xhr.open('POST', `${apiHost}${endpoints.USER.STORE_ATTACHMENT}`);
-    xhr.setRequestHeader('Authorization', `Bearer ${token}`);
-    xhr.send(formData);
+  const handleFileAttachment = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files || e.target.files.length === 0) return;
+
+    const files = Array.from(e.target.files);
+    uploadFiles(files);
+
+    // clear input so same file can be selected again
     e.target.value = '';
   };
 
+  // Drag and drop handler
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      uploadFiles(acceptedFiles);
+      setHandleDragActive(false);
+    },
+    [uploadFiles],
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    onDrop,
+    noClick: true,
+    noKeyboard: true,
+    multiple: true,
+    onDragEnter: () => {
+      setHandleDragActive(true);
+    },
+    onDragLeave: () => {
+      setHandleDragActive(false);
+    },
+    maxSize: 25000000,
+    accept: {
+      'application/pdf': ['.pdf'],
+      'text/plain': ['.txt'],
+      'text/x-rst': ['.rst'],
+      'text/x-markdown': ['.md'],
+      'application/zip': ['.zip'],
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+        ['.docx'],
+      'application/json': ['.json'],
+      'text/csv': ['.csv'],
+      'text/html': ['.html'],
+      'application/epub+zip': ['.epub'],
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
+        '.xlsx',
+      ],
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+        ['.pptx'],
+      'image/png': ['.png'],
+      'image/jpeg': ['.jpeg'],
+      'image/jpg': ['.jpg'],
+    },
+  });
+
   useEffect(() => {
     const checkTaskStatus = () => {
       const processingAttachments = attachments.filter(
@@ -261,86 +321,131 @@ export default function MessageInput({
     handleAbort();
   };
 
+  // Drag state for reordering
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+
+  // no preview object URLs to revoke (preview removed per reviewer request)
+
+  const findIndexById = (id: string) =>
+    attachments.findIndex((a) => a.id === id);
+
+  const handleDragStart = (e: React.DragEvent, id: string) => {
+    setDraggingId(id);
+    try {
+      e.dataTransfer.setData('text/plain', id);
+      e.dataTransfer.effectAllowed = 'move';
+    } catch (err) {
+      // ignore
+    }
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const handleDropOn = (e: React.DragEvent, targetId: string) => {
+    e.preventDefault();
+    const sourceId = e.dataTransfer.getData('text/plain');
+    if (!sourceId || sourceId === targetId) return;
+
+    const sourceIndex = findIndexById(sourceId);
+    const destIndex = findIndexById(targetId);
+    if (sourceIndex === -1 || destIndex === -1) return;
+
+    dispatch(reorderAttachments({ sourceIndex, destinationIndex: destIndex }));
+    setDraggingId(null);
+  };
+
   return (
-    <div className="flex w-full flex-col">
+    <div {...getRootProps()} className="flex w-full flex-col">
+      <input {...getInputProps()} />
       <div className="border-dark-gray bg-lotion dark:border-grey relative flex w-full flex-col rounded-[23px] border dark:bg-transparent">
         <div className="flex flex-wrap gap-1.5 px-2 py-2 sm:gap-2 sm:px-3">
-          {attachments.map((attachment) => (
-            <div
-              key={attachment.id}
-              className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
-                attachment.status !== 'completed' ? 'opacity-70' : 'opacity-100'
-              }`}
-              title={attachment.fileName}
-            >
-              <div className="bg-purple-30 mr-2 items-center justify-center rounded-lg p-[5.5px]">
-                {attachment.status === 'completed' && (
-                  <img
-                    src={DocumentationDark}
-                    alt="Attachment"
-                    className="h-[15px] w-[15px] object-fill"
-                  />
-                )}
-
-                {attachment.status === 'failed' && (
-                  <img
-                    src={AlertIcon}
-                    alt="Failed"
-                    className="h-[15px] w-[15px] object-fill"
-                  />
-                )}
-
-                {(attachment.status === 'uploading' ||
-                  attachment.status === 'processing') && (
-                  <div className="flex h-[15px] w-[15px] items-center justify-center">
-                    <svg className="h-[15px] w-[15px]" viewBox="0 0 24 24">
-                      <circle
-                        className="opacity-0"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="transparent"
-                        strokeWidth="4"
-                        fill="none"
-                      />
-                      <circle
-                        className="text-[#ECECF1]"
-                        cx="12"
-                        cy="12"
-                        r="10"
-                        stroke="currentColor"
-                        strokeWidth="4"
-                        fill="none"
-                        strokeDasharray="62.83"
-                        strokeDashoffset={
-                          62.83 * (1 - attachment.progress / 100)
-                        }
-                        transform="rotate(-90 12 12)"
-                      />
-                    </svg>
-                  </div>
-                )}
-              </div>
-
-              <span className="max-w-[120px] truncate font-medium sm:max-w-[150px]">
-                {attachment.fileName}
-              </span>
-
-              <button
-                className="ml-1.5 flex items-center justify-center rounded-full p-1"
-                onClick={() => {
-                  dispatch(removeAttachment(attachment.id));
-                }}
-                aria-label={t('conversation.attachments.remove')}
+          {attachments.map((attachment) => {
+            return (
+              <div
+                key={attachment.id}
+                draggable={true}
+                onDragStart={(e) => handleDragStart(e, attachment.id)}
+                onDragOver={handleDragOver}
+                onDrop={(e) => handleDropOn(e, attachment.id)}
+                className={`group dark:text-bright-gray relative flex items-center rounded-xl bg-[#EFF3F4] px-2 py-1 text-[12px] text-[#5D5D5D] sm:px-3 sm:py-1.5 sm:text-[14px] dark:bg-[#393B3D] ${
+                  attachment.status !== 'completed'
+                    ? 'opacity-70'
+                    : 'opacity-100'
+                } ${draggingId === attachment.id ? 'ring-dashed opacity-60 ring-2 ring-purple-200' : ''}`}
+                title={attachment.fileName}
               >
-                <img
-                  src={ExitIcon}
-                  alt={t('conversation.attachments.remove')}
-                  className="h-2.5 w-2.5 filter dark:invert"
-                />
-              </button>
-            </div>
-          ))}
+                <div className="bg-purple-30 mr-2 flex h-8 w-8 items-center justify-center rounded-md p-1">
+                  {attachment.status === 'completed' && (
+                    <img
+                      src={DocumentationDark}
+                      alt="Attachment"
+                      className="h-[15px] w-[15px] object-fill"
+                    />
+                  )}
+
+                  {attachment.status === 'failed' && (
+                    <img
+                      src={AlertIcon}
+                      alt="Failed"
+                      className="h-[15px] w-[15px] object-fill"
+                    />
+                  )}
+
+                  {(attachment.status === 'uploading' ||
+                    attachment.status === 'processing') && (
+                    <div className="flex h-[15px] w-[15px] items-center justify-center">
+                      <svg className="h-[15px] w-[15px]" viewBox="0 0 24 24">
+                        <circle
+                          className="opacity-0"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="transparent"
+                          strokeWidth="4"
+                          fill="none"
+                        />
+                        <circle
+                          className="text-[#ECECF1]"
+                          cx="12"
+                          cy="12"
+                          r="10"
+                          stroke="currentColor"
+                          strokeWidth="4"
+                          fill="none"
+                          strokeDasharray="62.83"
+                          strokeDashoffset={
+                            62.83 * (1 - attachment.progress / 100)
+                          }
+                          transform="rotate(-90 12 12)"
+                        />
+                      </svg>
+                    </div>
+                  )}
+                </div>
+
+                <span className="max-w-[120px] truncate font-medium sm:max-w-[150px]">
+                  {attachment.fileName}
+                </span>
+
+                <button
+                  className="ml-1.5 flex items-center justify-center rounded-full p-1"
+                  onClick={() => {
+                    dispatch(removeAttachment(attachment.id));
+                  }}
+                  aria-label={t('conversation.attachments.remove')}
+                >
+                  <img
+                    src={ExitIcon}
+                    alt={t('conversation.attachments.remove')}
+                    className="h-2.5 w-2.5 filter dark:invert"
+                  />
+                </button>
+              </div>
+            );
+          })}
         </div>
 
         <div className="w-full">
@@ -422,6 +527,7 @@ export default function MessageInput({
               <input
                 type="file"
                 className="hidden"
+                multiple
                 onChange={handleFileAttachment}
               />
             </label>
@@ -481,6 +587,20 @@ export default function MessageInput({
           close={() => setUploadModalState('INACTIVE')}
         />
       )}
+
+      {handleDragActive &&
+        createPortal(
+          <div className="dark:bg-gray-alpha/50 pointer-events-none fixed top-0 left-0 z-50 flex size-full flex-col items-center justify-center bg-white/85">
+            <img className="filter dark:invert" src={DragFileUpload} />
+            <span className="text-outer-space dark:text-silver px-2 text-2xl font-bold">
+              {t('modals.uploadDoc.drag.title')}
+            </span>
+            <span className="text-s text-outer-space dark:text-silver w-48 p-2 text-center">
+              {t('modals.uploadDoc.drag.description')}
+            </span>
+          </div>,
+          document.body,
+        )}
     </div>
   );
 }

frontend/src/conversation/Conversation.tsx

@@ -1,20 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 
 import SharedAgentCard from '../agents/SharedAgentCard';
-import DragFileUpload from '../assets/DragFileUpload.svg';
 import MessageInput from '../components/MessageInput';
 import { useMediaQuery } from '../hooks';
-import { ActiveState } from '../models/misc';
 import {
   selectConversationId,
   selectSelectedAgent,
   selectToken,
 } from '../preferences/preferenceSlice';
 import { AppDispatch } from '../store';
-import Upload from '../upload/Upload';
 import { handleSendFeedback } from './conversationHandlers';
 import ConversationMessages from './ConversationMessages';
 import { FEEDBACK, Query } from './conversationModels';
@@ -45,53 +41,12 @@ export default function Conversation() {
   const selectedAgent = useSelector(selectSelectedAgent);
   const completedAttachments = useSelector(selectCompletedAttachments);
 
-  const [uploadModalState, setUploadModalState] =
-    useState<ActiveState>('INACTIVE');
-  const [files, setFiles] = useState<File[]>([]);
   const [lastQueryReturnedErr, setLastQueryReturnedErr] =
     useState<boolean>(false);
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
-  const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
 
   const fetchStream = useRef<any>(null);
 
-  const onDrop = useCallback((acceptedFiles: File[]) => {
-    setUploadModalState('ACTIVE');
-    setFiles(acceptedFiles);
-    setHandleDragActive(false);
-  }, []);
-
-  const { getRootProps, getInputProps } = useDropzone({
-    onDrop,
-    noClick: true,
-    multiple: true,
-    onDragEnter: () => {
-      setHandleDragActive(true);
-    },
-    onDragLeave: () => {
-      setHandleDragActive(false);
-    },
-    maxSize: 25000000,
-    accept: {
-      'application/pdf': ['.pdf'],
-      'text/plain': ['.txt'],
-      'text/x-rst': ['.rst'],
-      'text/x-markdown': ['.md'],
-      'application/zip': ['.zip'],
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-        ['.docx'],
-      'application/json': ['.json'],
-      'text/csv': ['.csv'],
-      'text/html': ['.html'],
-      'application/epub+zip': ['.epub'],
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': [
-        '.xlsx',
-      ],
-      'application/vnd.openxmlformats-officedocument.presentationml.presentation':
-        ['.pptx'],
-    },
-  });
-
   const handleFetchAnswer = useCallback(
     ({ question, index }: { question: string; index?: number }) => {
       fetchStream.current = dispatch(fetchAnswer({ question, indx: index }));
@@ -222,14 +177,7 @@ export default function Conversation() {
       />
 
       <div className="bg-opacity-0 z-3 flex h-auto w-full max-w-[1300px] flex-col items-end self-center rounded-2xl py-1 md:w-9/12 lg:w-8/12 xl:w-8/12 2xl:w-6/12">
-        <div
-          {...getRootProps()}
-          className="flex w-full items-center rounded-[40px] px-2"
-        >
-          <label htmlFor="file-upload" className="sr-only">
-            {t('modals.uploadDoc.label')}
-          </label>
-          <input {...getInputProps()} id="file-upload" />
+        <div className="flex w-full items-center rounded-[40px] px-2">
           <MessageInput
             onSubmit={(text) => {
               handleQuestionSubmission(text);
@@ -244,26 +192,6 @@ export default function Conversation() {
           {t('tagline')}
         </p>
       </div>
-      {handleDragActive && (
-        <div className="bg-opacity-50 dark:bg-gray-alpha pointer-events-none fixed top-0 left-0 z-30 flex size-full flex-col items-center justify-center bg-white">
-          <img className="filter dark:invert" src={DragFileUpload} />
-          <span className="text-outer-space dark:text-silver px-2 text-2xl font-bold">
-            {t('modals.uploadDoc.drag.title')}
-          </span>
-          <span className="text-s text-outer-space dark:text-silver w-48 p-2 text-center">
-            {t('modals.uploadDoc.drag.description')}
-          </span>
-        </div>
-      )}
-      {uploadModalState === 'ACTIVE' && (
-        <Upload
-          receivedFile={files}
-          setModalState={setUploadModalState}
-          isOnboarding={false}
-          renderTab={'file'}
-          close={() => setUploadModalState('INACTIVE')}
-        ></Upload>
-      )}
     </div>
   );
 }

frontend/src/locale/en.json

@@ -255,8 +255,8 @@
         "addQuery": "Add Query"
       },
       "drag": {
-        "title": "Upload a source file",
-        "description": "Drop your file here to add it as a source"
+        "title": "Drop attachments here",
+        "description": "Release to upload your attachments"
       },
       "progress": {
         "upload": "Upload is in progress",

frontend/src/locale/es.json

@@ -218,8 +218,8 @@
         "addQuery": "Agregar Consulta"
       },
       "drag": {
-        "title": "Subir archivo fuente",
-        "description": "Arrastra tu archivo aquí para agregarlo como fuente"
+        "title": "Suelta los archivos adjuntos aquí",
+        "description": "Suelta para subir tus archivos adjuntos"
       },
       "progress": {
         "upload": "Subida en progreso",

frontend/src/locale/jp.json

@@ -218,8 +218,8 @@
         "addQuery": "クエリを追加"
       },
       "drag": {
-        "title": "ソースファイルをアップロード",
-        "description": "ファイルをここにドロップしてソースとして追加してください"
+        "title": "添付ファイルをここにドロップ",
+        "description": "リリースして添付ファイルをアップロード"
       },
       "progress": {
         "upload": "アップロード中",

frontend/src/locale/ru.json

@@ -218,8 +218,8 @@
         "addQuery": "Добавить запрос"
       },
       "drag": {
-        "title": "Загрузить исходный файл",
-        "description": "Перетащите файл сюда, чтобы добавить его как источник"
+        "title": "Перетащите вложения сюда",
+        "description": "Отпустите, чтобы загрузить ваши вложения"
       },
       "progress": {
         "upload": "Идет загрузка",

frontend/src/locale/zh-TW.json

@@ -218,8 +218,8 @@
         "addQuery": "新增查詢"
       },
       "drag": {
-        "title": "上傳來源檔案",
-        "description": "將檔案拖放到此處以新增為來源"
+        "title": "將附件拖放到此處",
+        "description": "釋放以上傳您的附件"
       },
       "progress": {
         "upload": "正在上傳",

frontend/src/locale/zh.json

@@ -218,8 +218,8 @@
         "addQuery": "添加查询"
       },
       "drag": {
-        "title": "上传源文件",
-        "description": "将文件拖放到此处以添加为源"
+        "title": "将附件拖放到此处",
+        "description": "释放以上传您的附件"
       },
       "progress": {
         "upload": "正在上传",

frontend/src/upload/uploadSlice.ts

@@ -66,6 +66,23 @@ export const uploadSlice = createSlice({
         (att) => att.id !== action.payload,
       );
     },
+    // Reorder attachments array by moving item from sourceIndex to destinationIndex
+    reorderAttachments: (
+      state,
+      action: PayloadAction<{ sourceIndex: number; destinationIndex: number }>,
+    ) => {
+      const { sourceIndex, destinationIndex } = action.payload;
+      if (
+        sourceIndex < 0 ||
+        destinationIndex < 0 ||
+        sourceIndex >= state.attachments.length ||
+        destinationIndex >= state.attachments.length
+      )
+        return;
+
+      const [moved] = state.attachments.splice(sourceIndex, 1);
+      state.attachments.splice(destinationIndex, 0, moved);
+    },
     clearAttachments: (state) => {
       state.attachments = state.attachments.filter(
         (att) => att.status === 'uploading' || att.status === 'processing',
@@ -121,6 +138,7 @@ export const {
   addAttachment,
   updateAttachment,
   removeAttachment,
+  reorderAttachments,
   clearAttachments,
   addUploadTask,
   updateUploadTask,