feature: Drag and drop training, from input box

frontend/src/Navigation.tsx

@@ -476,8 +476,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       />
       {uploadModalState === 'ACTIVE' && (
         <Upload
+          receivedFile={[]}
           setModalState={setUploadModalState}
           isOnboarding={false}
+          renderTab={null}
           close={() => setUploadModalState('INACTIVE')}
         ></Upload>
       )}

frontend/src/api/endpoints.ts

@@ -17,7 +17,7 @@ const endpoints = {
     TOKEN_ANALYTICS: '/api/get_token_analytics',
     FEEDBACK_ANALYTICS: '/api/get_feedback_analytics',
     LOGS: `/api/get_user_logs`,
-    MANAGE_SYNC: '/api/manage_sync'
+    MANAGE_SYNC: '/api/manage_sync',
   },
   CONVERSATION: {
     ANSWER: '/api/answer',

frontend/src/conversation/Conversation.tsx

@@ -1,8 +1,10 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import Hero from '../Hero';
+import { useDropzone } from 'react-dropzone';
+import DragFileUpload from '../assets/DragFileUpload.svg';
 import ArrowDown from '../assets/arrow-down.svg';
 import newChatIcon from '../assets/openNewChat.svg';
 import Send from '../assets/send.svg';
@@ -28,6 +30,8 @@ import {
   updateConversationId,
   updateQuery,
 } from './conversationSlice';
+import Upload from '../upload/Upload';
+import { ActiveState } from '../models/misc';
 
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -45,6 +49,47 @@ export default function Conversation() {
   const [isShareModalOpen, setShareModalState] = useState<boolean>(false);
   const { t } = useTranslation();
   const { isMobile } = useMediaQuery();
+  const [uploadModalState, setUploadModalState] =
+    useState<ActiveState>('INACTIVE');
+  const [files, setFiles] = useState<File[]>([]);
+  const [handleDragActive, setHandleDragActive] = useState<boolean>(false);
+
+  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 handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
@@ -323,7 +368,11 @@ export default function Conversation() {
       </div>
 
       <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 z-3 sm:w-[62%] h-auto py-1">
-        <div className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black">
+        <div
+          {...getRootProps()}
+          className="flex w-full items-center rounded-[40px] border border-silver bg-white dark:bg-raisin-black"
+        >
+          <input {...getInputProps()}></input>
           <textarea
             id="inputbox"
             ref={inputRef}
@@ -358,6 +407,26 @@ export default function Conversation() {
           {t('tagline')}
         </p>
       </div>
+      {handleDragActive && (
+        <div className="pointer-events-none fixed top-0 left-0 z-30 flex flex-col size-full items-center justify-center bg-opacity-50 bg-white dark:bg-gray-alpha">
+          <img className="filter dark:invert" src={DragFileUpload} />
+          <span className="px-2 text-2xl font-bold text-outer-space dark:text-silver">
+            {t('modals.uploadDoc.drag.title')}
+          </span>
+          <span className="p-2 text-s w-48 text-center text-outer-space dark:text-silver">
+            {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

@@ -99,6 +99,10 @@
         "agent": "User agent",
         "searchQueries": "Search queries",
         "numberOfPosts": "Number of posts"
+      },
+      "drag": {
+        "title": "Upload a source file",
+        "description": "Drop your file here to add it as a source"
       }
     },
     "createAPIKey": {

frontend/src/locale/es.json

@@ -99,6 +99,10 @@
         "agent": "Agente de Usuario",
         "searchQueries": "Consultas de Búsqueda",
         "numberOfPosts": "Número de publicaciones"
+      },
+      "drag": {
+        "title": "Cargar un archivo fuente",
+        "description": "Suelta tu archivo aquí para agregarlo como fuente."
       }
     },
     "createAPIKey": {

frontend/src/locale/jp.json

@@ -99,6 +99,10 @@
         "agent": "ユーザーエージェント",
         "searchQueries": "検索クエリ",
         "numberOfPosts": "投稿数"
+      },
+      "drag": {
+        "title": "ソースファイルをアップロードする",
+        "description": "ファイルをここにドロップしてソースとして追加します"
       }
     },
     "createAPIKey": {

frontend/src/locale/zh-TW.json

@@ -92,6 +92,10 @@
         "agent": "使用者代理(User-Agent)",
         "searchQueries": "搜尋查詢",
         "numberOfPosts": "貼文數量"
+      },
+      "drag": {
+        "title": "上傳原始檔",
+        "description": "將您的文件拖放到此處以將其添加為來源"
       }
     },
     "createAPIKey": {

frontend/src/locale/zh.json

@@ -99,6 +99,10 @@
         "agent": "用户代理",
         "searchQueries": "搜索查询",
         "numberOfPosts": "帖子数量"
+      },
+      "drag": {
+        "title": "上传源文件",
+        "description": "将您的文件拖放到此处以将其添加为源"
       }
     },
     "createAPIKey": {

frontend/src/settings/Documents.tsx

@@ -325,8 +325,10 @@ const Documents: React.FC<DocumentsProps> = ({
             <div className="w-full h-full bg-transparent flex flex-col items-center justify-center p-8">
               {/* Your Upload component */}
               <Upload
+                receivedFile={[]}
                 setModalState={setModalState}
                 isOnboarding={isOnboarding}
+                renderTab={null}
                 close={() => setModalState('INACTIVE')}
               />
             </div>

frontend/src/upload/Upload.tsx

@@ -19,15 +19,19 @@ import {
 import WrapperModal from '../modals/WrapperModal';
 
 function Upload({
+  receivedFile = [],
   setModalState,
   isOnboarding,
+  renderTab = null,
   close,
 }: {
+  receivedFile: File[];
   setModalState: (state: ActiveState) => void;
   isOnboarding: boolean;
+  renderTab: string | null;
   close: () => void;
 }) {
-  const [docName, setDocName] = useState('');
+  const [docName, setDocName] = useState(receivedFile[0]?.name);
   const [urlName, setUrlName] = useState('');
   const [url, setUrl] = useState('');
   const [repoUrl, setRepoUrl] = useState(''); // P3f93
@@ -38,8 +42,8 @@ function Upload({
     search_queries: [''],
     number_posts: 10,
   });
-  const [activeTab, setActiveTab] = useState<string | null>(null);
-  const [files, setfiles] = useState<File[]>([]);
+  const [activeTab, setActiveTab] = useState<string | null>(renderTab);
+  const [files, setfiles] = useState<File[]>(receivedFile);
   const [progress, setProgress] = useState<{
     type: 'UPLOAD' | 'TRAINING';
     percentage: number;