reads uploaded files and adds icon to launch upload feature

frontend/src/Navigation.tsx

@@ -7,6 +7,7 @@ import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
 import Info from './assets/info.svg';
 import Link from './assets/link.svg';
+import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
 import SelectDocsModal from './preferences/SelectDocsModal';
@@ -109,7 +110,7 @@ export default function Navigation({
 
         <div className="flex-grow border-b-2 border-gray-100"></div>
         <div className="flex flex-col-reverse border-b-2">
-          <div className="relative my-4 px-6">
+          <div className="relative my-4 flex gap-2 px-2">
             <div
               className="flex h-12 w-full cursor-pointer justify-between rounded-md border-2 bg-white"
               onClick={() => setIsDocsListOpen(!isDocsListOpen)}
@@ -127,8 +128,9 @@ export default function Navigation({
                 } mr-3 w-3 transition-all`}
               />
             </div>
+            <img className="hover:cursor-pointer" src={UploadIcon}></img>
             {isDocsListOpen && (
-              <div className="absolute top-12 left-0 right-0 mx-6 max-h-52 overflow-y-scroll bg-white shadow-lg">
+              <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
                 {docs ? (
                   docs.map((doc, index) => {
                     if (doc.model) {
@@ -222,6 +224,7 @@ export default function Navigation({
         setModalState={setApiKeyModalState}
         isCancellable={isApiKeySet}
       />
+      {/* <Upload></Upload> */}
     </>
   );
 }

frontend/src/assets/upload.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.35 6.04C18.67 2.59 15.64 0 12 0C9.11 0 6.6 1.64 5.35 4.04C2.34 4.36 0 6.91 0 10C0 13.31 2.69 16 6 16H19C21.76 16 24 13.76 24 11C24 8.36 21.95 6.22 19.35 6.04ZM14 9V13H10V9H7L12 4L17 9H14Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/upload/Upload.tsx

@@ -3,13 +3,15 @@ import { useDropzone } from 'react-dropzone';
 
 export default function Upload() {
   const [docName, setDocName] = useState('');
+  const [files, setfiles] = useState<File[]>([]);
+
   const onDrop = useCallback((acceptedFiles: File[]) => {
-    console.log(acceptedFiles);
+    setfiles(acceptedFiles);
+    setDocName(acceptedFiles[0]?.name);
   }, []);
 
-  const doNothing = () => {
-    return undefined;
-  };
+  const doNothing = () => undefined;
+
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
     multiple: true,
@@ -37,8 +39,13 @@ export default function Upload() {
           </label>
         </div>
         <div className="mt-9">
-          <p className="font-medium text-eerie-black">Uploaded Files</p>
-          <p className="mt-5 text-gray-6000">None</p>
+          <p className="mb-5 font-medium text-eerie-black">Uploaded Files</p>
+          {files.map((file) => (
+            <p key={file.name} className="text-gray-6000">
+              {file.name}
+            </p>
+          ))}
+          {files.length === 0 && <p className="text-gray-6000">None</p>}
         </div>
         <div className="flex flex-row-reverse">
           <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">