Merge pull request #758 from arc53/bug/UI-fixes-and-settings-prep

Bug/UI fixes and settings prep

frontend/src/Navigation.tsx

@@ -11,7 +11,6 @@ import Github from './assets/github.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
 import SettingGear from './assets/settingGear.svg';
-import Key from './assets/key.svg';
 import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
@@ -229,7 +228,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           className={({ isActive }) =>
             `${
               isActive ? 'bg-gray-3000' : ''
-            } group my-auto mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
+            } group mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray hover:bg-gray-3000`
           }
         >
           <img
@@ -241,9 +240,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             New Chat
           </p>
         </NavLink>
+        <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
         {conversations && (
-          <div className="conversations-container max-h-[25rem] overflow-y-auto">
+          <div className="conversations-container mb-auto max-h-[25rem] overflow-y-auto">
-            <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
             {conversations?.map((conversation) => (
               <ConversationTile
                 key={conversation.id}
@@ -323,18 +322,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </div>
           <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
         </div>
-        <div className="flex flex-col gap-2 border-b-2 py-2">
-          <div
-            className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100"
-            onClick={() => {
-              setApiKeyModalState('ACTIVE');
-            }}
-          >
-            <img src={Key} alt="key" className="ml-2 w-6" />
-            <p className="my-auto text-sm text-eerie-black">Reset Key</p>
-          </div>
-        </div>
-
         <div className="flex flex-col gap-2 border-b-2 py-2">
           <NavLink
             to="/settings"
@@ -347,6 +334,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img src={SettingGear} alt="info" className="ml-2 w-5 opacity-60" />
             <p className="my-auto text-eerie-black">Settings</p>
           </NavLink>
+        </div>
+
+        <div className="flex flex-col gap-2 border-b-2 py-2">
           <NavLink
             to="/about"
             className={({ isActive }) =>

frontend/src/Setting.tsx

@@ -74,9 +74,9 @@ const Setting = () => {
 const General = () => {
   const [theme, setTheme] = useState('Light');
   const [isThemeListOpen, setIsThemeListOpen] = useState(false);
-  const themes = ['Light', 'Dark'];
+  const themes = ['Light', 'Dark (WIP)'];
   const [language, setLanguage] = useState('English');
-  const languages = ['English', 'French'];
+  const languages = ['English'];
   const [isLanguageListOpen, setIsLanguageListOpen] = useState(false);
   return (
     <>
@@ -165,12 +165,12 @@ const General = () => {
   );
 };
 const Prompts = () => {
-  return <div>This is prompts</div>;
+  return <div>This is prompts WIP</div>;
 };
 const Documents = () => {
-  return <div>This is Documents</div>;
+  return <div>This is Documents WIP</div>;
 };
 const Widgets = () => {
-  return <div>This is widgets</div>;
+  return <div>This is widgets WIP</div>;
 };
 export default Setting;

frontend/src/conversation/Conversation.tsx

@@ -192,7 +192,7 @@ export default function Conversation() {
             </div>
           )}
         </div>
-        <p className="w-[100vw] self-center bg-white p-5 text-center text-xs text-gray-595959 md:w-full">
+        <p className="text-gray-595959 w-[100vw] self-center bg-white p-5 text-center text-xs md:w-full">
           This is a chatbot that uses the GPT-3, Faiss and LangChain to answer
           questions.
         </p>

frontend/src/index.css

@@ -367,7 +367,7 @@ template {
 
 /* third container laylout for Firefox */
 @-moz-document url-prefix() {
-  .firefox{
+  .firefox {
     padding: 32px;
   }
 }
@@ -377,4 +377,4 @@ template {
   .firefox {
     padding: 16px;
   }
-}
+}