Merge pull request #120 from ajaythapliyal/ui-cleanup

Nick's feedback List : 1, 2, 4, 6

frontend/src/Navigation.tsx

@@ -1,5 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import Arrow1 from './assets/arrow.svg';
+import Message from './assets/message.svg';
 import Hamburger from './assets/hamburger.svg';
 import Key from './assets/key.svg';
 import Info from './assets/info.svg';
@@ -56,6 +57,18 @@ export default function Navigation({
             />
           </button>
         </div>
+        <NavLink
+          to={'/'}
+          className={({ isActive }) =>
+            `${
+              isActive ? 'bg-gray-3000' : ''
+            } my-auto mx-4 mt-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100`
+          }
+        >
+          <img src={Message} className="ml-2 w-5"></img>
+          <p className="my-auto text-eerie-black">Chat</p>
+        </NavLink>
+
         <div className="flex-grow border-b-2 border-gray-100"></div>
 
         <div className="flex flex-col gap-2 border-b-2 border-gray-100 py-2">
@@ -85,7 +98,11 @@ export default function Navigation({
         <div className="flex h-48 flex-col border-b-2 border-gray-100">
           <NavLink
             to="/about"
-            className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+            className={({ isActive }) =>
+              `my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100 ${
+                isActive ? 'bg-gray-3000' : ''
+              }`
+            }
           >
             <img src={Info} alt="info" className="ml-2 w-5" />
             <p className="my-auto text-eerie-black">About</p>

frontend/src/assets/message.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0H2C0.9 0 0 0.9 0 2V20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H4L2 16V2H18V14Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/conversation/Conversation.tsx

@@ -35,20 +35,20 @@ export default function Conversation() {
           return (
             <ConversationBubble
               ref={index === messages.length - 1 ? endMessageRef : null}
-              className="mb-7"
+              className={`${index === messages.length - 1 ? 'mb-20' : 'mb-7'}`}
               key={index}
               message={message.text}
               type={message.type}
             ></ConversationBubble>
           );
         })}
-        {messages.length === 0 && <Hero className="mt-24"></Hero>}
+        {messages.length === 0 && <Hero className="mt-24 md:mt-52"></Hero>}
       </div>
-      <div className="fixed bottom-2 flex w-10/12 md:w-[50%]">
+      <div className="fixed bottom-14 flex w-10/12 md:bottom-12 md:w-[50%]">
         <div
           ref={inputRef}
           contentEditable
-          className={`min-h-5 border-000000 overflow-x-hidden; max-h-24 w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
+          className={`border-000000 overflow-x-hidden; max-h-24 min-h-[2.6rem] w-full overflow-y-auto rounded-xl border bg-white p-2 pr-9 opacity-100 focus:border-2 focus:outline-none`}
         ></div>
         {status === 'loading' ? (
           <img
@@ -68,6 +68,10 @@ export default function Conversation() {
           ></img>
         )}
       </div>
+      <p className="fixed bottom-6 w-10/12 text-center text-xs text-gray-2000">
+        This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
+        questions.
+      </p>
     </div>
   );
 }

frontend/src/preferences/APIKeyModal.tsx

@@ -41,7 +41,7 @@ export default function APIKeyModal({
     >
       <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">OpenAI API Key</p>
-        <p className="text-lg leading-5 text-gray-500">
+        <p className="text-md leading-6 text-gray-500">
           Before you can start using DocsGPT we need you to provide an API key
           for llm. Currently, we support only OpenAI but soon many more. You can
           find it here.

frontend/src/preferences/SelectDocsModal.tsx

@@ -1,132 +1,132 @@
-import { useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ActiveState } from '../models/misc';
-import {
-  setSelectedDocs,
-  setSourceDocs,
-  selectSourceDocs,
-} from './preferenceSlice';
-import { getDocs, Doc } from './selectDocsApi';
-
-export default function APIKeyModal({
-  modalState,
-  setModalState,
-  isCancellable = true,
-}: {
-  modalState: ActiveState;
-  setModalState: (val: ActiveState) => void;
-  isCancellable?: boolean;
-}) {
-  const dispatch = useDispatch();
-  const docs = useSelector(selectSourceDocs);
-  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
-  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
-  const [isError, setIsError] = useState(false);
-
-  function handleSubmit() {
-    if (!localSelectedDocs) {
-      setIsError(true);
-    } else {
-      dispatch(setSelectedDocs(localSelectedDocs));
-      setModalState('INACTIVE');
-      setLocalSelectedDocs(null);
-      setIsError(false);
-    }
-  }
-
-  function handleCancel() {
-    setLocalSelectedDocs(null);
-    setIsError(false);
-    setModalState('INACTIVE');
-  }
-
-  useEffect(() => {
-    async function requestDocs() {
-      const data = await getDocs();
-      dispatch(setSourceDocs(data));
-    }
-
-    requestDocs();
-  }, []);
-
-  return (
-    <div
-      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="text-xl text-jet">Select Source Documentation</p>
-        <p className="text-lg leading-5 text-gray-500">
-          Please select the library of documentation that you would like to use
-          with our app.
-        </p>
-        <div className="relative">
-          <div
-            className="h-10 w-full cursor-pointer border-b-2"
-            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-          >
-            {!localSelectedDocs ? (
-              <p className="py-3 text-gray-500">Select</p>
-            ) : (
-              <p className="py-3">
-                {localSelectedDocs.name} {localSelectedDocs.version}
-              </p>
-            )}
-          </div>
-          {isDocsListOpen && (
-            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
-              {docs ? (
-                docs.map((doc, index) => {
-                  if (doc.model) {
-                    return (
-                      <div
-                        key={index}
-                        onClick={() => {
-                          setLocalSelectedDocs(doc);
-                          setIsDocsListOpen(false);
-                        }}
-                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
-                      >
-                        <p className="ml-5 py-3">
-                          {doc.name} {doc.version}
-                        </p>
-                      </div>
-                    );
-                  }
-                })
-              ) : (
-                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
-                  <p className="ml-5 py-3">No default documentation.</p>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div className="flex flex-row-reverse">
-          {isCancellable && (
-            <button
-              onClick={() => handleCancel()}
-              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
-            >
-              Cancel
-            </button>
-          )}
-          <button
-            onClick={() => {
-              handleSubmit();
-            }}
-            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
-          >
-            Save
-          </button>
-          {isError && (
-            <p className="mr-auto text-sm text-red-500">
-              Please select source documentation.
-            </p>
-          )}
-        </div>
-      </article>
-    </div>
-  );
-}
+import { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import {
+  setSelectedDocs,
+  setSourceDocs,
+  selectSourceDocs,
+} from './preferenceSlice';
+import { getDocs, Doc } from './selectDocsApi';
+
+export default function APIKeyModal({
+  modalState,
+  setModalState,
+  isCancellable = true,
+}: {
+  modalState: ActiveState;
+  setModalState: (val: ActiveState) => void;
+  isCancellable?: boolean;
+}) {
+  const dispatch = useDispatch();
+  const docs = useSelector(selectSourceDocs);
+  const [localSelectedDocs, setLocalSelectedDocs] = useState<Doc | null>(null);
+  const [isDocsListOpen, setIsDocsListOpen] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  function handleSubmit() {
+    if (!localSelectedDocs) {
+      setIsError(true);
+    } else {
+      dispatch(setSelectedDocs(localSelectedDocs));
+      setModalState('INACTIVE');
+      setLocalSelectedDocs(null);
+      setIsError(false);
+    }
+  }
+
+  function handleCancel() {
+    setLocalSelectedDocs(null);
+    setIsError(false);
+    setModalState('INACTIVE');
+  }
+
+  useEffect(() => {
+    async function requestDocs() {
+      const data = await getDocs();
+      dispatch(setSourceDocs(data));
+    }
+
+    requestDocs();
+  }, []);
+
+  return (
+    <div
+      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="text-xl text-jet">Select Source Documentation</p>
+        <p className="text-md leading-6 text-gray-500">
+          Please select the library of documentation that you would like to use
+          with our app.
+        </p>
+        <div className="relative">
+          <div
+            className="h-10 w-full cursor-pointer border-b-2"
+            onClick={() => setIsDocsListOpen(!isDocsListOpen)}
+          >
+            {!localSelectedDocs ? (
+              <p className="py-3 text-gray-500">Select</p>
+            ) : (
+              <p className="py-3">
+                {localSelectedDocs.name} {localSelectedDocs.version}
+              </p>
+            )}
+          </div>
+          {isDocsListOpen && (
+            <div className="absolute top-10 left-0 max-h-52 w-full overflow-y-scroll bg-white">
+              {docs ? (
+                docs.map((doc, index) => {
+                  if (doc.model) {
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => {
+                          setLocalSelectedDocs(doc);
+                          setIsDocsListOpen(false);
+                        }}
+                        className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100"
+                      >
+                        <p className="ml-5 py-3">
+                          {doc.name} {doc.version}
+                        </p>
+                      </div>
+                    );
+                  }
+                })
+              ) : (
+                <div className="h-10 w-full cursor-pointer border-x-2 border-b-2 hover:bg-gray-100">
+                  <p className="ml-5 py-3">No default documentation.</p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-row-reverse">
+          {isCancellable && (
+            <button
+              onClick={() => handleCancel()}
+              className="ml-5 h-10 w-20 rounded-lg border border-violet-700 bg-white text-violet-800 transition-all hover:bg-violet-700 hover:text-white"
+            >
+              Cancel
+            </button>
+          )}
+          <button
+            onClick={() => {
+              handleSubmit();
+            }}
+            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+          {isError && (
+            <p className="mr-auto text-sm text-red-500">
+              Please select source documentation.
+            </p>
+          )}
+        </div>
+      </article>
+    </div>
+  );
+}

frontend/tailwind.config.cjs

@@ -12,8 +12,10 @@ module.exports = {
         jet: '#343541',
         'gray-alpha': 'rgba(0,0,0, .1)',
         'gray-1000': '#F6F6F6',
+        'gray-2000': 'rgba(0, 0, 0, 0.5)',
+        'gray-3000': 'rgba(243, 243, 243, 1)',
         'red-1000': 'rgb(254, 202, 202)',
-        'red-2000' : '#F44336',
+        'red-2000': '#F44336',
         'red-3000': '#621B16',
       },
     },