Merge pull request #946 from siiddhantt/refactor/ui-elements

refactor: several small ui refactor for generalisation
arc53 · May 13, 2024 · a69ac37 · a69ac37
2 parents 16b2a54 + 96034a9
commit a69ac37
Show file tree

Hide file tree

Showing 16 changed files with 193 additions and 114 deletions.
diff --git a/frontend/public/fonts/Inter-Variable.ttf b/frontend/public/fonts/Inter-Variable.ttf
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
@@ -20,7 +20,7 @@ import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
 import APIKeyModal from './preferences/APIKeyModal';
-import DeleteConvModal from './preferences/DeleteConvModal';
+import DeleteConvModal from './modals/DeleteConvModal';
 
 import {
   selectApiKeyStatus,
@@ -275,10 +275,10 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           </p>
         </NavLink>
         <div className="mb-auto h-[56vh] overflow-y-auto overflow-x-hidden dark:text-white">
-          {conversations && (
+          {conversations && conversations.length > 0 ? (
             <div>
               <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
-                <p className="my-auto ml-6 text-sm font-semibold">Chats</p>
+                <p className="mt-1 ml-4 text-sm font-semibold">Chats</p>
               </div>
               <div className="conversations-container">
                 {conversations?.map((conversation) => (
@@ -294,12 +294,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 ))}
               </div>
             </div>
+          ) : (
+            <></>
           )}
         </div>
 
         <div className="flex h-auto flex-col justify-end text-eerie-black dark:text-white">
           <div className="flex flex-col-reverse border-b-[1px] dark:border-b-purple-taupe">
-            <div className="relative my-4 flex gap-2 px-2">
+            <div className="relative my-4 mx-4 flex gap-2">
               <SourceDropdown
                 options={docs}
                 selectedDocs={selectedDocs}
@@ -314,13 +316,13 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => setUploadModalState('ACTIVE')}
               ></img>
             </div>
-            <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
+            <p className="ml-5 mt-3 text-sm font-semibold">Source Docs</p>
           </div>
           <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
             <NavLink
               to="/settings"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
                   isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
                 }`
               }
@@ -335,8 +337,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <NavLink
               to="/about"
               className={({ isActive }) =>
-                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
-                  isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
+                `my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
+                  isActive ? 'bg-gray-3000 dark:bg-[#28292E]' : ''
                 }`
               }
             >
@@ -348,7 +350,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://docs.docsgpt.cloud/"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Documentation} Dark={DocumentationDark} />
               <p className="my-auto text-sm ">Documentation</p>
@@ -357,7 +359,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://discord.gg/WHJdfbQDR4"
               target="_blank"
               rel="noreferrer"
-              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Discord} Dark={DiscordDark} />
               {/*  <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
@@ -368,7 +370,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               href="https://github.com/arc53/DocsGPT"
               target="_blank"
               rel="noreferrer"
-              className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
+              className="mx-4 mt-auto flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E]"
             >
               <NavImage Light={Github} Dark={GithubDark} />
               <p className="my-auto text-sm">Visit our Github</p>

diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
@@ -9,6 +9,8 @@ function Dropdown({
   onSelect,
   size = 'w-32',
   rounded = 'xl',
+  border = 'border-2',
+  borderColor = 'silver',
   showEdit,
   onEdit,
   showDelete,
@@ -26,13 +28,17 @@ function Dropdown({
     | ((value: { label: string; value: string }) => void);
   size?: string;
   rounded?: 'xl' | '3xl';
+  border?: 'border' | 'border-2';
+  borderColor?: string;
   showEdit?: boolean;
   onEdit?: (value: { name: string; id: string; type: string }) => void;
   showDelete?: boolean;
   onDelete?: (value: string) => void;
   placeholder?: string;
 }) {
   const [isOpen, setIsOpen] = React.useState(false);
+  const borderRadius = rounded === 'xl' ? 'rounded-xl' : 'rounded-3xl';
+  const borderTopRadius = rounded === 'xl' ? 'rounded-t-xl' : 'rounded-t-3xl';
   return (
     <div
       className={[
@@ -44,8 +50,8 @@ function Dropdown({
     >
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className={`flex w-full cursor-pointer items-center justify-between border-2 border-silver bg-white px-5 py-3 dark:border-chinese-silver dark:bg-transparent ${
-          isOpen ? `rounded-t-${rounded}` : `rounded-${rounded}`
+        className={`flex w-full cursor-pointer items-center justify-between ${border} border-${borderColor} bg-white px-5 py-3 dark:border-${borderColor}/40 dark:bg-transparent ${
+          isOpen ? `${borderTopRadius}` : `${borderRadius}`
         }`}
       >
         {typeof selectedValue === 'string' ? (
@@ -74,7 +80,9 @@ function Dropdown({
         />
       </button>
       {isOpen && (
-        <div className="absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 border-silver bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+        <div
+          className={`absolute left-0 right-0 z-20 -mt-1 max-h-40 overflow-y-auto rounded-b-xl ${border} border-${borderColor} bg-white shadow-lg dark:border-${borderColor}/40 dark:bg-dark-charcoal`}
+        >
           {options.map((option: any, index) => (
             <div
               key={index}

diff --git a/frontend/src/components/SourceDropdown.tsx b/frontend/src/components/SourceDropdown.tsx
@@ -34,14 +34,16 @@ function SourceDropdown({
     <div className="relative w-5/6 rounded-3xl">
       <button
         onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-        className={`flex w-full cursor-pointer items-center  border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
-          isDocsListOpen ? 'rounded-t-3xl' : 'rounded-3xl'
+        className={`flex w-full cursor-pointer items-center border border-silver bg-white p-[14px] dark:bg-transparent ${
+          isDocsListOpen
+            ? 'rounded-t-3xl dark:border-silver/40'
+            : 'rounded-3xl dark:border-purple-taupe'
         }`}
       >
         <span className="ml-1 mr-2 flex-1 overflow-hidden text-ellipsis text-left dark:text-bright-gray">
           <div className="flex flex-row gap-2">
             <p className="max-w-3/4 truncate whitespace-nowrap">
-              {selectedDocs?.name || ''}
+              {selectedDocs?.name || 'None'}
             </p>
             <p className="flex flex-col items-center justify-center">
               {selectedDocs?.version}
@@ -57,7 +59,7 @@ function SourceDropdown({
         />
       </button>
       {isDocsListOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border-2 bg-white  shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+        <div className="absolute left-0 right-0 z-50 -mt-1 max-h-40 overflow-y-auto rounded-b-xl border border-silver bg-white shadow-lg dark:border-silver/40 dark:bg-dark-charcoal">
           {options ? (
             options.map((option: any, index: number) => {
               if (option.model === embeddingsName) {
@@ -95,16 +97,14 @@ function SourceDropdown({
               }
             })
           ) : (
-            <div className="h-10 w-full cursor-pointer  border-b-[1px] hover:bg-gray-100 dark:border-b-purple-taupe dark:hover:bg-purple-taupe">
-              <p className="ml-5 py-3">No default documentation.</p>
-            </div>
+            <></>
           )}
           <div
             className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
             onClick={handleEmptyDocumentSelect}
           >
             <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-              Empty
+              None
             </span>
           </div>
         </div>

diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
@@ -32,15 +32,6 @@ export default function ConversationTile({
   const [isDarkTheme] = useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
-  // useOutsideAlerter(
-  //   tileRef,
-  //   () =>
-  //     handleSaveConversation({
-  //       id: conversationId || conversation.id,
-  //       name: conversationName,
-  //     }),
-  //   [conversationName],
-  // );
 
   useEffect(() => {
     setConversationsName(conversation.name);
@@ -69,9 +60,9 @@ export default function ConversationTile({
       onClick={() => {
         selectConversation(conversation.id);
       }}
-      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe ${
+      className={`my-auto mx-4 mt-4 flex h-9 cursor-pointer items-center justify-between gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-[#28292E] ${
         conversationId === conversation.id
-          ? 'bg-gray-100 dark:bg-purple-taupe'
+          ? 'bg-gray-100 dark:bg-[#28292E]'
           : ''
       }`}
     >

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -398,3 +398,13 @@ template {
     padding: 16px;
   }
 }
+
+@font-face {
+  font-family: 'Inter';
+  font-weight: 100 200 300 400 500 600 700 800 900;
+  src: url('/fonts/Inter-Variable.ttf');
+}
+
+::-webkit-scrollbar {
+  width: 0;
+}
diff --git a/frontend/src/modals/ConfirmationModal.tsx b/frontend/src/modals/ConfirmationModal.tsx
@@ -0,0 +1,68 @@
+import Exit from '../assets/exit.svg';
+import { ActiveState } from '../models/misc';
+
+function ConfirmationModal({
+  message,
+  modalState,
+  setModalState,
+  submitLabel,
+  handleSubmit,
+  cancelLabel,
+  handleCancel,
+}: {
+  message: string;
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  submitLabel: string;
+  handleSubmit: () => void;
+  cancelLabel?: string;
+  handleCancel?: () => void;
+}) {
+  return (
+    <article
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-[35vh] flex w-[90vw] max-w-lg  flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
+        <div className="relative">
+          <button
+            className="absolute top-3 right-4 m-2 w-3"
+            onClick={() => {
+              setModalState('INACTIVE');
+              handleCancel && handleCancel();
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+          <div className="p-8">
+            <p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
+              {message}
+            </p>
+            <div>
+              <div className="mt-6 flex flex-row-reverse gap-1">
+                <button
+                  onClick={handleSubmit}
+                  className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+                >
+                  {submitLabel}
+                </button>
+                <button
+                  onClick={() => {
+                    setModalState('INACTIVE');
+                    handleCancel && handleCancel();
+                  }}
+                  className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                >
+                  {cancelLabel ? cancelLabel : 'Cancel'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </article>
+    </article>
+  );
+}
+
+export default ConfirmationModal;
diff --git a/frontend/src/preferences/DeleteConvModal.tsx → frontend/src/modals/DeleteConvModal.tsx b/frontend/src/preferences/DeleteConvModal.tsx → frontend/src/modals/DeleteConvModal.tsx
@@ -1,8 +1,9 @@
-import { useRef } from 'react';
-import { ActiveState } from '../models/misc';
-import { useMediaQuery, useOutsideAlerter } from './../hooks';
-import Modal from '../Modal';
+import React from 'react';
 import { useDispatch } from 'react-redux';
+import { ActiveState } from '../models/misc';
+import { useMediaQuery, useOutsideAlerter } from '../hooks';
+import ConfirmationModal from './ConfirmationModal';
+
 import { Action } from '@reduxjs/toolkit';
 
 export default function DeleteConvModal({
@@ -14,8 +15,8 @@ export default function DeleteConvModal({
   setModalState: (val: ActiveState) => Action;
   handleDeleteAllConv: () => void;
 }) {
+  const modalRef = React.useRef(null);
   const dispatch = useDispatch();
-  const modalRef = useRef(null);
   const { isMobile } = useMediaQuery();
 
   useOutsideAlerter(
@@ -38,25 +39,13 @@ export default function DeleteConvModal({
   }
 
   return (
-    <Modal
-      handleCancel={handleCancel}
-      isError={false}
+    <ConfirmationModal
+      message="Are you sure you want to delete all the conversations?"
       modalState={modalState}
-      isCancellable={true}
+      setModalState={setModalState}
+      submitLabel={'Delete'}
       handleSubmit={handleSubmit}
-      textDelete={true}
-      render={() => {
-        return (
-          <article
-            ref={modalRef}
-            className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-t-lg bg-white dark:bg-outer-space dark:text-silver p-6 shadow-lg"
-          >
-            <p className="text-xl text-jet dark:text-silver">
-              Are you sure you want to delete all the conversations?
-            </p>
-          </article>
-        );
-      }}
+      handleCancel={handleCancel}
     />
   );
 }
diff --git a/frontend/src/Modal/index.tsx → frontend/src/modals/index.tsx b/frontend/src/Modal/index.tsx → frontend/src/modals/index.tsx
diff --git a/frontend/src/preferences/APIKeyModal.tsx b/frontend/src/preferences/APIKeyModal.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { selectApiKey, setApiKey } from './preferenceSlice';
 import { useMediaQuery, useOutsideAlerter } from './../hooks';
-import Modal from '../Modal';
+import Modal from '../modals';
 
 export default function APIKeyModal({
   modalState,

diff --git a/frontend/src/preferences/PromptsModal.tsx b/frontend/src/preferences/PromptsModal.tsx
@@ -37,7 +37,7 @@ function AddPrompt({
           <input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={newPromptName}
             onChange={(e) => setNewPromptName(e.target.value)}
           ></input>
@@ -52,7 +52,7 @@ function AddPrompt({
             </span>
           </div>
           <textarea
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={newPromptContent}
             onChange={(e) => setNewPromptContent(e.target.value)}
           ></textarea>
@@ -108,7 +108,7 @@ function EditPrompt({
           <input
             placeholder="Prompt Name"
             type="text"
-            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+            className="h-10 w-full rounded-lg border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={editPromptName}
             onChange={(e) => setEditPromptName(e.target.value)}
           ></input>
@@ -123,7 +123,7 @@ function EditPrompt({
             </span>
           </div>
           <textarea
-            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:bg-transparent dark:text-silver"
+            className="h-56 w-full rounded-lg border-2 border-silver px-3 py-2 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
             value={editPromptContent}
             onChange={(e) => setEditPromptContent(e.target.value)}
           ></textarea>