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

@@ -57,7 +57,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">Select Source Documentation</p>
-        <p className="text-lg leading-5 text-gray-500">
+        <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>

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',
       },
     },