From 1a1f66d2a0b704f5e66349880175165af06525e5 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Mon, 13 Mar 2023 09:59:29 +0530
Subject: [PATCH 1/7] adds upload modal

---
 frontend/src/upload/Upload.tsx | 37 ++++++++++++++++++++++++++++++++++
 frontend/tailwind.config.cjs   |  3 +++
 2 files changed, 40 insertions(+)
 create mode 100644 frontend/src/upload/Upload.tsx

diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
new file mode 100644
index 0000000..a2af7c2
--- /dev/null
+++ b/frontend/src/upload/Upload.tsx
@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+export default function Upload() {
+  //   return null;
+
+  const [docName, setDocName] = useState('');
+  return (
+    <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">Upload New Documentation</p>
+        <input
+          type="text"
+          className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"
+          value={docName}
+          onChange={(e) => setDocName(e.target.value)}
+        ></input>
+        <div className="relative bottom-16 left-2">
+          <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
+        </div>
+        <div>
+          <label className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000">
+            <input type="file" className="hidden" />
+            Choose Files
+          </label>
+        </div>
+        <div className="flex flex-row-reverse">
+          <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
+            Train
+          </button>
+          <button className="font-medium">Cancel</button>
+        </div>
+      </article>
+    </article>
+  );
+}
+
+// TODO: sanitize all inputs
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 2c44007..ca65c28 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -16,10 +16,13 @@ module.exports = {
         'gray-2000': 'rgba(0, 0, 0, 0.5)',
         'gray-3000': 'rgba(243, 243, 243, 1)',
         'gray-4000': '#949494',
+        'gray-5000': '#BBBBBB',
         'red-1000': 'rgb(254, 202, 202)',
         'red-2000': '#F44336',
         'red-3000': '#621B16',
         'blue-1000': '#7D54D1',
+        'blue-2000': '#002B49',
+        'blue-3000': '#4B02E2',
       },
     },
   },

From fa31f1ee262a428cd01c9208e9ba02e9eb0789cd Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Wed, 15 Mar 2023 08:10:44 +0530
Subject: [PATCH 2/7] modal ui done

---
 frontend/src/upload/Upload.tsx | 6 +++++-
 frontend/tailwind.config.cjs   | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index a2af7c2..f35ce05 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -14,7 +14,7 @@ export default function Upload() {
           value={docName}
           onChange={(e) => setDocName(e.target.value)}
         ></input>
-        <div className="relative bottom-16 left-2">
+        <div className="relative bottom-12 left-2 mt-[-18.39px]">
           <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
         </div>
         <div>
@@ -23,6 +23,10 @@ export default function Upload() {
             Choose Files
           </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>
+        </div>
         <div className="flex flex-row-reverse">
           <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
             Train
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index ca65c28..a824c5c 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -17,6 +17,7 @@ module.exports = {
         'gray-3000': 'rgba(243, 243, 243, 1)',
         'gray-4000': '#949494',
         'gray-5000': '#BBBBBB',
+        'gray-6000': '#757575',
         'red-1000': 'rgb(254, 202, 202)',
         'red-2000': '#F44336',
         'red-3000': '#621B16',

From ddef31ecdfb9af1fc988ec69bd7276b4e6ed4371 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Wed, 15 Mar 2023 08:16:05 +0530
Subject: [PATCH 3/7] margin

---
 frontend/src/upload/Upload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index f35ce05..6e19ea8 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -7,7 +7,7 @@ export default function Upload() {
   return (
     <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
-        <p className="text-xl text-jet">Upload New Documentation</p>
+        <p className="mb-7 text-xl text-jet">Upload New Documentation</p>
         <input
           type="text"
           className="h-10 w-[60%] rounded-md border-2 border-gray-5000 px-3 outline-none"

From 97f47f5415a4103f5ae0d99c0cf05673126f98f5 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Wed, 15 Mar 2023 09:41:44 +0530
Subject: [PATCH 4/7] adds react dropzone to add upload functionality

---
 frontend/package-lock.json     | 34 +++++++++++++++++++++++++++++++---
 frontend/package.json          |  1 +
 frontend/src/upload/Upload.tsx | 25 +++++++++++++++++++------
 3 files changed, 51 insertions(+), 9 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7e90164..f249b29 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1105,6 +1105,11 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "autoprefixer": {
       "version": "10.4.13",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz",
@@ -2168,6 +2173,21 @@
         "flat-cache": "^3.0.4"
       }
     },
+    "file-selector": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz",
+      "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==",
+      "requires": {
+        "tslib": "^2.4.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -3088,8 +3108,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-hash": {
       "version": "3.0.0",
@@ -3395,7 +3414,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3437,6 +3455,16 @@
         "scheduler": "^0.23.0"
       }
     },
+    "react-dropzone": {
+      "version": "14.2.3",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.3.tgz",
+      "integrity": "sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==",
+      "requires": {
+        "attr-accept": "^2.2.2",
+        "file-selector": "^0.6.0",
+        "prop-types": "^15.8.1"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 4abaeba..16ee4ff 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -23,6 +23,7 @@
     "@vercel/analytics": "^0.1.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.8.1"
   },
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 6e19ea8..5dda306 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,9 +1,22 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
 
 export default function Upload() {
-  //   return null;
-
   const [docName, setDocName] = useState('');
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    console.log(acceptedFiles);
+  }, []);
+
+  const doNothing = () => {
+    return undefined;
+  };
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    multiple: true,
+    onDragEnter: doNothing,
+    onDragOver: doNothing,
+    onDragLeave: doNothing,
+  });
   return (
     <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
@@ -17,9 +30,9 @@ export default function Upload() {
         <div className="relative bottom-12 left-2 mt-[-18.39px]">
           <span className="bg-white px-2 text-xs text-gray-4000">Name</span>
         </div>
-        <div>
-          <label className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000">
-            <input type="file" className="hidden" />
+        <div {...getRootProps()}>
+          <label className="rounded-md border border-blue-2000 px-4 py-2 font-medium text-blue-2000 hover:cursor-pointer">
+            <input type="button" {...getInputProps()} />
             Choose Files
           </label>
         </div>

From dbaa116fe091a1557d2537fd75837a5e8dca4129 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Fri, 17 Mar 2023 13:05:44 +0530
Subject: [PATCH 5/7] reads uploaded files and adds icon to launch upload
 feature

---
 frontend/src/Navigation.tsx    |  7 +++++--
 frontend/src/assets/upload.svg |  3 +++
 frontend/src/upload/Upload.tsx | 19 +++++++++++++------
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/assets/upload.svg

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index a2cedb0..372f64c 100644
--- a/frontend/src/Navigation.tsx
+++ b/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> */}
     </>
   );
 }
diff --git a/frontend/src/assets/upload.svg b/frontend/src/assets/upload.svg
new file mode 100644
index 0000000..6d7be21
--- /dev/null
+++ b/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>
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 5dda306..5fb1a6b 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/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">

From 6dd13c68451122258b4cc79650ac3426d1233dc8 Mon Sep 17 00:00:00 2001
From: ajaythapliyal <ajaythapliyal1703@gmail.com>
Date: Fri, 17 Mar 2023 13:25:21 +0530
Subject: [PATCH 6/7] adds upload modal visibility

---
 frontend/src/Navigation.tsx    | 15 +++++++++++++--
 frontend/src/upload/Upload.tsx | 26 +++++++++++++++++++++++---
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 372f64c..562be92 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -20,6 +20,7 @@ import {
   setSelectedDocs,
 } from './preferences/preferenceSlice';
 import { useOutsideAlerter } from './hooks';
+import Upload from './upload/Upload';
 
 export default function Navigation({
   navState,
@@ -43,6 +44,9 @@ export default function Navigation({
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
 
+  const [uploadModalState, setUploadModalState] =
+    useState<ActiveState>('INACTIVE');
+
   const navRef = useRef(null);
   useOutsideAlerter(
     navRef,
@@ -128,7 +132,11 @@ export default function Navigation({
                 } mr-3 w-3 transition-all`}
               />
             </div>
-            <img className="hover:cursor-pointer" src={UploadIcon}></img>
+            <img
+              className="hover:cursor-pointer"
+              src={UploadIcon}
+              onClick={() => setUploadModalState('ACTIVE')}
+            ></img>
             {isDocsListOpen && (
               <div className="absolute top-12 left-0 right-6 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white shadow-lg">
                 {docs ? (
@@ -224,7 +232,10 @@ export default function Navigation({
         setModalState={setApiKeyModalState}
         isCancellable={isApiKeySet}
       />
-      {/* <Upload></Upload> */}
+      <Upload
+        modalState={uploadModalState}
+        setModalState={setUploadModalState}
+      ></Upload>
     </>
   );
 }
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 5fb1a6b..88afa96 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -1,7 +1,14 @@
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { ActiveState } from '../models/misc';
 
-export default function Upload() {
+export default function Upload({
+  modalState,
+  setModalState,
+}: {
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+}) {
   const [docName, setDocName] = useState('');
   const [files, setfiles] = useState<File[]>([]);
 
@@ -20,7 +27,11 @@ export default function Upload() {
     onDragLeave: doNothing,
   });
   return (
-    <article className="absolute z-30  h-screen w-screen  bg-gray-alpha">
+    <article
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
       <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
         <p className="mb-7 text-xl text-jet">Upload New Documentation</p>
         <input
@@ -51,7 +62,16 @@ export default function Upload() {
           <button className="ml-6 rounded-md bg-blue-3000 py-2 px-6 text-white">
             Train
           </button>
-          <button className="font-medium">Cancel</button>
+          <button
+            onClick={() => {
+              setDocName('');
+              setfiles([]);
+              setModalState('INACTIVE');
+            }}
+            className="font-medium"
+          >
+            Cancel
+          </button>
         </div>
       </article>
     </article>

From 2523d039fb244cbd327b86e4c2bbf78dae351e48 Mon Sep 17 00:00:00 2001
From: Alex <a@tushynski.me>
Date: Fri, 17 Mar 2023 11:19:09 +0000
Subject: [PATCH 7/7] Little cloud - right size and location

---
 frontend/src/Navigation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index 562be92..b2b6328 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -133,7 +133,7 @@ export default function Navigation({
               />
             </div>
             <img
-              className="hover:cursor-pointer"
+              className="mt-2 h-9 w-9 hover:cursor-pointer"
               src={UploadIcon}
               onClick={() => setUploadModalState('ACTIVE')}
             ></img>