Merge pull request #867 from siiddhantt/main

fix: issue #157

frontend/src/Navigation.tsx

@@ -7,9 +7,7 @@ import DocumentationDark from './assets/documentation-dark.svg';
 import Discord from './assets/discord.svg';
 import DiscordDark from './assets/discord-dark.svg';
 
-import Arrow2 from './assets/dropdown-arrow.svg';
 import Expand from './assets/expand.svg';
-import Trash from './assets/trash.svg';
 import Github from './assets/github.svg';
 import GithubDark from './assets/github-dark.svg';
 import Hamburger from './assets/hamburger.svg';
@@ -42,27 +40,23 @@ import { Doc, getConversations } from './preferences/preferenceApi';
 import SelectDocsModal from './preferences/SelectDocsModal';
 import ConversationTile from './conversation/ConversationTile';
 import { useDarkTheme } from './hooks';
+import SourceDropdown from './components/SourceDropdown';
 
 interface NavigationProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
-const NavImage: React.FC<{ Light: string, Dark: string }> = ({ Light, Dark }) => {
+const NavImage: React.FC<{ Light: string; Dark: string }> = ({
+  Light,
+  Dark,
+}) => {
   return (
     <>
-      <img
-        src={Dark}
-        alt="icon"
-        className="ml-2 w-5 hidden dark:block "
-      />
-      <img
-        src={Light}
-        alt="icon"
-        className="ml-2 w-5 dark:hidden "
-      />
+      <img src={Dark} alt="icon" className="ml-2 hidden w-5 dark:block " />
+      <img src={Light} alt="icon" className="ml-2 w-5 dark:hidden " />
     </>
-  )
-}
+  );
+};
 export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
@@ -86,9 +80,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
 
   const navRef = useRef(null);
   const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
-  const embeddingsName =
-    import.meta.env.VITE_EMBEDDINGS_NAME ||
-    'huggingface_sentence-transformers/all-mpnet-base-v2';
 
   const navigate = useNavigate();
 
@@ -203,15 +194,17 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           <img
             src={Expand}
             alt="menu toggle"
-            className={`${!navOpen ? 'rotate-180' : 'rotate-0'
-              } m-auto transition-all duration-200`}
+            className={`${
+              !navOpen ? 'rotate-180' : 'rotate-0'
+            } m-auto transition-all duration-200`}
           />
         </button>
       )}
       <div
         ref={navRef}
-        className={`${!navOpen && '-ml-96 md:-ml-[18rem]'
-          } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 dark:border-r-purple-taupe bg-white dark:bg-chinese-black transition-all dark:text-white`}
+        className={`${
+          !navOpen && '-ml-96 md:-ml-[18rem]'
+        } duration-20 fixed top-0 z-20 flex h-full w-72 flex-col border-r-[1px] border-b-0 bg-white transition-all dark:border-r-purple-taupe dark:bg-chinese-black dark:text-white`}
       >
         <div
           className={'visible mt-2 flex h-[6vh] w-full justify-between md:h-12'}
@@ -229,8 +222,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <img
               src={Expand}
               alt="menu toggle"
-              className={`${!navOpen ? 'rotate-180' : 'rotate-0'
-                } m-auto transition-all duration-200`}
+              className={`${
+                !navOpen ? 'rotate-180' : 'rotate-0'
+              } m-auto transition-all duration-200`}
             />
           </button>
         </div>
@@ -245,8 +239,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             );
           }}
           className={({ isActive }) =>
-            `${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
-            } group sticky mx-4 mt-4 flex cursor-pointer gap-2.5 rounded-3xl border border-silver p-3 hover:border-rainy-gray dark:border-purple-taupe dark:text-white dark:hover:bg-transparent hover:bg-gray-3000`
+            `${
+              isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
+            } group sticky 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 dark:border-purple-taupe dark:text-white dark:hover:bg-transparent`
           }
         >
           <img
@@ -258,7 +253,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             New Chat
           </p>
         </NavLink>
-        <div className="mb-auto h-[56vh] overflow-x-hidden dark:text-white overflow-y-scroll">
+        <div className="mb-auto h-[56vh] overflow-x-hidden overflow-y-scroll dark:text-white">
           {conversations && (
             <div>
               <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
@@ -282,88 +277,44 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         <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="flex h-12 w-5/6 cursor-pointer justify-between rounded-3xl border-2 dark:border-chinese-silver bg-white dark:bg-chinese-black"
-                onClick={() => setIsDocsListOpen(!isDocsListOpen)}
-              >
-                {selectedDocs && (
-                  <p className="my-3 mx-4 overflow-hidden text-ellipsis whitespace-nowrap">
-                    {selectedDocs.name} {selectedDocs.version}
-                  </p>
-                )}
-                <img
-                  src={Arrow2}
-                  alt="arrow"
-                  className={`${!isDocsListOpen ? 'rotate-0' : 'rotate-180'
-                    } ml-auto mr-3 w-3 transition-all`}
-                />
-              </div>
+              <SourceDropdown
+                options={docs}
+                selectedDocs={selectedDocs}
+                setSelectedDocs={setSelectedDocs}
+                isDocsListOpen={isDocsListOpen}
+                setIsDocsListOpen={setIsDocsListOpen}
+                handleDeleteClick={handleDeleteClick}
+              />
               <img
                 className="mt-2 h-9 w-9 hover:cursor-pointer"
                 src={UploadIcon}
                 onClick={() => setUploadModalState('ACTIVE')}
               ></img>
-              {isDocsListOpen && (
-                <div className="absolute top-12 left-0 right-6 z-10 ml-2 mr-4 max-h-52 overflow-y-scroll bg-white dark:bg-chinese-black shadow-lg">
-                  {docs ? (
-                    docs.map((doc, index) => {
-                      if (doc.model === embeddingsName) {
-                        return (
-                          <div
-                            key={index}
-                            onClick={() => {
-                              dispatch(setSelectedDocs(doc));
-                              setIsDocsListOpen(false);
-                            }}
-                            className="flex h-10 w-full cursor-pointer items-center justify-between border-x-2 border-b-[1px] dark:border-purple-taupe hover:bg-gray-100 dark:hover:bg-purple-taupe"
-                          >
-                            <p className="ml-5 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-                              {doc.name} {doc.version}
-                            </p>
-                            {doc.location === 'local' && (
-                              <img
-                                src={Trash}
-                                alt="Delete"
-                                className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
-                                id={`img-${index}`}
-                                onClick={(event) => {
-                                  event.stopPropagation();
-                                  handleDeleteClick(index, doc);
-                                }}
-                              />
-                            )}
-                          </div>
-                        );
-                      }
-                    })
-                  ) : (
-                    <div className="h-10 w-full cursor-pointer  border-b-[1px] dark:border-b-purple-taupe hover:bg-gray-100">
-                      <p className="ml-5 py-3">No default documentation.</p>
-                    </div>
-                  )}
-                </div>
-              )}
             </div>
             <p className="ml-6 mt-3 text-sm font-semibold">Source Docs</p>
           </div>
-          <div className="flex flex-col gap-2 border-b-[1px] dark:border-b-purple-taupe py-2">
+          <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 ${isActive ? 'bg-gray-3000 dark:bg-transparent' : ''
+                `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-transparent' : ''
                 }`
               }
             >
               <NavImage Light={SettingGear} Dark={SettingGearDark} />
-              <p className="my-auto text-sm text-eerie-black  dark:text-white">Settings</p>
+              <p className="my-auto text-sm text-eerie-black  dark:text-white">
+                Settings
+              </p>
             </NavLink>
           </div>
 
-          <div className="flex flex-col gap-2 border-b-[1.5px] dark:border-b-purple-taupe py-2">
+          <div className="flex flex-col gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
             <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-purple-taupe ${
+                  isActive ? 'bg-gray-3000 dark:bg-purple-taupe' : ''
                 }`
               }
             >
@@ -388,31 +339,31 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             >
               <NavImage Light={Discord} Dark={DiscordDark} />
               {/*  <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
-              <p className="my-auto text-sm">
-                Visit our Discord
-              </p>
+              <p className="my-auto text-sm">Visit our Discord</p>
             </a>
 
             <a
               href="https://github.com/arc53/DocsGPT"
               target="_blank"
               rel="noreferrer"
-              className="mt-auto mx-4 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-purple-taupe"
             >
               <NavImage Light={Github} Dark={GithubDark} />
-              <p className="my-auto text-sm">
-                Visit our Github
-              </p>
+              <p className="my-auto text-sm">Visit our Github</p>
             </a>
           </div>
         </div>
       </div>
-      <div className="fixed z-10 h-16 w-full border-b-2 dark:border-b-purple-taupe bg-gray-50 dark:bg-chinese-black md:hidden">
+      <div className="fixed z-10 h-16 w-full border-b-2 bg-gray-50 dark:border-b-purple-taupe dark:bg-chinese-black md:hidden">
         <button
           className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavOpen(true)}
         >
-          <img src={isDarkTheme ? HamburgerDark : Hamburger} alt="menu toggle" className="w-7" />
+          <img
+            src={isDarkTheme ? HamburgerDark : Hamburger}
+            alt="menu toggle"
+            className="w-7"
+          />
         </button>
       </div>
       <SelectDocsModal

frontend/src/Setting.tsx

@@ -12,6 +12,7 @@ import {
 } from './preferences/preferenceSlice';
 import { Doc } from './preferences/preferenceApi';
 import { useDarkTheme } from './hooks';
+import Dropdown from './components/Dropdown';
 type PromptProps = {
   prompts: { name: string; id: string; type: string }[];
   selectedPrompt: { name: string; id: string; type: string };
@@ -87,8 +88,11 @@ const Setting: React.FC = () => {
       method: 'GET',
     })
       .then((response) => {
-        if(response.ok && documents){
-          const updatedDocuments = [...documents.slice(0, index), ...documents.slice(index + 1)];
+        if (response.ok && documents) {
+          const updatedDocuments = [
+            ...documents.slice(0, index),
+            ...documents.slice(index + 1),
+          ];
           dispatch(setSourceDocs(updatedDocuments));
         }
       })
@@ -96,8 +100,10 @@ const Setting: React.FC = () => {
   };
 
   return (
-    <div className="p-4 pt-20 md:p-12 wa">
-      <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">Settings</p>
+    <div className="wa p-4 pt-20 md:p-12">
+      <p className="text-2xl font-bold text-eerie-black dark:text-bright-gray">
+        Settings
+      </p>
       <div className="mt-6 flex flex-row items-center space-x-4 overflow-x-auto md:space-x-8 ">
         <div className="md:hidden">
           <button
@@ -112,10 +118,11 @@ const Setting: React.FC = () => {
             <button
               key={index}
               onClick={() => setActiveTab(tab)}
-              className={`h-9 rounded-3xl px-4 font-bold ${activeTab === tab
+              className={`h-9 rounded-3xl px-4 font-bold ${
+                activeTab === tab
                   ? 'bg-purple-3000 text-purple-30 dark:bg-dark-charcoal'
                   : 'text-gray-6000'
-                }`}
+              }`}
             >
               {tab}
             </button>
@@ -188,7 +195,9 @@ const General: React.FC = () => {
   const themes = ['Light', 'Dark'];
   const languages = ['English'];
   const [isDarkTheme, toggleTheme] = useDarkTheme();
-  const [selectedTheme, setSelectedTheme] = useState(isDarkTheme ? 'Dark' : 'Light');
+  const [selectedTheme, setSelectedTheme] = useState(
+    isDarkTheme ? 'Dark' : 'Light',
+  );
   const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
   return (
     <div className="mt-[59px]">
@@ -197,14 +206,16 @@ const General: React.FC = () => {
         <Dropdown
           options={themes}
           selectedValue={selectedTheme}
-          onSelect={(option:string)=>{
-              setSelectedTheme(option);
-              option !==selectedTheme && toggleTheme();
-            }}
+          onSelect={(option: string) => {
+            setSelectedTheme(option);
+            option !== selectedTheme && toggleTheme();
+          }}
         />
       </div>
       <div>
-        <p className="font-bold text-jet dark:text-bright-gray">Select Language</p>
+        <p className="font-bold text-jet dark:text-bright-gray">
+          Select Language
+        </p>
         <Dropdown
           options={languages}
           selectedValue={selectedLanguage}
@@ -348,7 +359,7 @@ const Prompts: React.FC<PromptProps> = ({
     <div className="mt-[59px]">
       <div className="mb-4">
         <p className="font-semibold dark:text-bright-gray">Active Prompt</p>
-        <DropdownPrompt
+        <Dropdown
           options={prompts}
           selectedValue={selectedPrompt.name}
           onSelect={handleSelectPrompt}
@@ -356,7 +367,7 @@ const Prompts: React.FC<PromptProps> = ({
       </div>
 
       <div className="mb-4">
-        <p className='dark:text-bright-gray'>Prompt name </p>{' '}
+        <p className="dark:text-bright-gray">Prompt name </p>{' '}
         <p className="mb-2 text-xs italic text-eerie-black dark:text-bright-gray">
           start by editing name
         </p>
@@ -372,7 +383,7 @@ const Prompts: React.FC<PromptProps> = ({
       <div className="mb-4">
         <p className="mb-2 dark:text-bright-gray">Prompt content</p>
         <textarea
-          className="h-32 w-full rounded-lg  border-2 p-2 dark:border-chinese-silver dark:text-white dark:bg-transparent"
+          className="h-32 w-full rounded-lg  border-2 p-2 dark:border-chinese-silver dark:bg-transparent dark:text-white"
           value={newPromptContent}
           onChange={(e) => setNewPromptContent(e.target.value)}
           placeholder="Active prompt contents"
@@ -381,30 +392,33 @@ const Prompts: React.FC<PromptProps> = ({
 
       <div className="flex justify-between">
         <button
-          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${newPromptName === selectedPrompt.name
+          className={`rounded-lg bg-green-500 px-4 py-2 font-bold text-white transition-all hover:bg-green-700 ${
+            newPromptName === selectedPrompt.name
               ? 'cursor-not-allowed opacity-50'
               : ''
-            }`}
+          }`}
           onClick={handleAddPrompt}
           disabled={newPromptName === selectedPrompt.name}
         >
           Add New Prompt
         </button>
         <button
-          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${selectedPrompt.type === 'public'
+          className={`rounded-lg bg-red-500 px-4 py-2 font-bold text-white transition-all hover:bg-red-700 ${
+            selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-            }`}
+          }`}
           onClick={handleDeletePrompt}
           disabled={selectedPrompt.type === 'public'}
         >
           Delete Prompt
         </button>
         <button
-          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${selectedPrompt.type === 'public'
+          className={`rounded-lg bg-blue-500 px-4 py-2 font-bold text-white transition-all hover:bg-blue-700 ${
+            selectedPrompt.type === 'public'
               ? 'cursor-not-allowed opacity-50'
               : ''
-            }`}
+          }`}
           onClick={handleSaveChanges}
           disabled={selectedPrompt.type === 'public'}
         >
@@ -415,118 +429,6 @@ const Prompts: React.FC<PromptProps> = ({
   );
 };
 
-function DropdownPrompt({
-  options,
-  selectedValue,
-  onSelect,
-}: {
-  options: { name: string; id: string; type: string }[];
-  selectedValue: string;
-  onSelect: (value: { name: string; id: string; type: string }) => void;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="relative mt-2 w-32">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
-      >
-        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
-          {selectedValue}
-        </span>
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
-            } h-3 w-3 transition-transform`}
-        />
-      </button>
-      {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 dark:border-chinese-silver bg-white dark:bg-dark-charcoal  shadow-lg">
-          {options.map((option, index) => (
-            <div
-              key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray "
-            >
-              <span
-                onClick={() => {
-                  onSelect(option);
-                  setIsOpen(false);
-                }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
-              >
-                {option.name}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function Dropdown({
-  options,
-  selectedValue,
-  onSelect,
-  showDelete,
-  onDelete,
-}: {
-  options: string[];
-  selectedValue: string;
-  onSelect: (value: string) => void;
-  showDelete?: boolean; // optional
-  onDelete?: (value: string) => void; // optional
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <div className="relative mt-2 w-32">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full cursor-pointer items-center rounded-xl border-2 dark:border-chinese-silver bg-white p-3 dark:bg-transparent"
-      >
-        <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
-          {selectedValue}
-        </span>
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
-            } h-3 w-3 transition-transform`}
-        />
-      </button>
-      {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-3 rounded-b-xl border-2 bg-white dark:border-chinese-silver dark:bg-dark-charcoal shadow-lg">
-          {options.map((option, index) => (
-            <div
-              key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
-            >
-              <span
-                onClick={() => {
-                  onSelect(option);
-                  setIsOpen(false);
-                }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
-              >
-                {option}
-              </span>
-              {showDelete && onDelete && (
-                <button onClick={() => onDelete(option)} className="p-2">
-                  {/* Icon or text for delete button */}
-                  Delete
-                </button>
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 type AddPromptModalProps = {
   newPromptName: string;
   onNewPromptNameChange: (name: string) => void;
@@ -549,7 +451,7 @@ const AddPromptModal: React.FC<AddPromptModalProps> = ({
           placeholder="Enter Prompt Name"
           value={newPromptName}
           onChange={(e) => onNewPromptNameChange(e.target.value)}
-          className="mb-4 w-full rounded-3xl border-2 dark:border-chinese-silver p-2"
+          className="mb-4 w-full rounded-3xl border-2 p-2 dark:border-chinese-silver"
         />
         <button
           onClick={onAddPrompt}
@@ -582,13 +484,13 @@ const Documents: React.FC<DocumentsProps> = ({
       <div className="flex flex-col">
         {/* <h2 className="text-xl font-semibold">Documents</h2> */}
 
-        <div className="mt-[27px] overflow-x-auto border dark:border-chinese-silver rounded-xl w-max">
-          <table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray" >
+        <div className="mt-[27px] w-max overflow-x-auto rounded-xl border dark:border-chinese-silver">
+          <table className="block w-full table-auto content-center justify-center text-center dark:text-bright-gray">
             <thead>
               <tr>
                 <th className="border-r p-4 md:w-[244px]">Document Name</th>
-                <th className="border-r px-4 py-2 w-[244px]">Vector Date</th>
-                <th className="border-r px-4 py-2 w-[244px]">Type</th>
+                <th className="w-[244px] border-r px-4 py-2">Vector Date</th>
+                <th className="w-[244px] border-r px-4 py-2">Type</th>
                 <th className="px-4 py-2"></th>
               </tr>
             </thead>
@@ -596,8 +498,12 @@ const Documents: React.FC<DocumentsProps> = ({
               {documents &&
                 documents.map((document, index) => (
                   <tr key={index}>
-                    <td className="border-r border-t px-4 py-2">{document.name}</td>
-                    <td className="border-r border-t px-4 py-2">{document.date}</td>
+                    <td className="border-r border-t px-4 py-2">
+                      {document.name}
+                    </td>
+                    <td className="border-r border-t px-4 py-2">
+                      {document.date}
+                    </td>
                     <td className="border-r border-t px-4 py-2">
                       {document.location === 'remote'
                         ? 'Pre-loaded'

frontend/src/components/Dropdown.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import Arrow2 from '../assets/dropdown-arrow.svg';
+
+function Dropdown({
+  options,
+  selectedValue,
+  onSelect,
+  showDelete,
+  onDelete,
+}: {
+  options:
+    | string[]
+    | { name: string; id: string; type: string }[]
+    | { label: string; value: string }[];
+  selectedValue: string | { label: string; value: string };
+  onSelect:
+    | ((value: string) => void)
+    | ((value: { name: string; id: string; type: string }) => void)
+    | ((value: { label: string; value: string }) => void);
+  showDelete?: boolean;
+  onDelete?: (value: string) => void;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <div
+      className={
+        typeof selectedValue === 'string'
+          ? 'relative mt-2 w-32'
+          : 'relative w-full align-middle'
+      }
+    >
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className={`flex w-full cursor-pointer items-center justify-between border-2 bg-white p-3 dark:border-chinese-silver dark:bg-transparent ${
+          isOpen
+            ? typeof selectedValue === 'string'
+              ? 'rounded-t-xl'
+              : 'rounded-t-2xl'
+            : typeof selectedValue === 'string'
+            ? 'rounded-xl'
+            : 'rounded-full'
+        }`}
+      >
+        {typeof selectedValue === 'string' ? (
+          <span className="flex-1 overflow-hidden text-ellipsis dark:text-bright-gray">
+            {selectedValue}
+          </span>
+        ) : (
+          <span
+            className={`overflow-hidden text-ellipsis dark:text-bright-gray ${
+              !selectedValue && 'text-silver'
+            }`}
+          >
+            {selectedValue ? selectedValue.label : 'From URL'}
+          </span>
+        )}
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${
+            isOpen ? 'rotate-180' : 'rotate-0'
+          } h-3 w-3 transition-transform`}
+        />
+      </button>
+      {isOpen && (
+        <div className="absolute left-0 right-0 z-50 -mt-1 overflow-y-auto rounded-b-xl border-2 bg-white shadow-lg dark:border-chinese-silver dark:bg-dark-charcoal">
+          {options.map((option: any, index) => (
+            <div
+              key={index}
+              className="hover:eerie-black flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe"
+            >
+              <span
+                onClick={() => {
+                  onSelect(option);
+                  setIsOpen(false);
+                }}
+                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3 dark:text-light-gray"
+              >
+                {typeof option === 'string'
+                  ? option
+                  : option.name
+                  ? option.name
+                  : option.label}
+              </span>
+              {showDelete && onDelete && (
+                <button onClick={() => onDelete(option)} className="p-2">
+                  Delete
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Dropdown;

frontend/src/components/SourceDropdown.tsx

@@ -0,0 +1,102 @@
+import Trash from '../assets/trash.svg';
+import Arrow2 from '../assets/dropdown-arrow.svg';
+import { Doc } from '../preferences/preferenceApi';
+import { useDispatch } from 'react-redux';
+
+type Props = {
+  options: Doc[] | null;
+  selectedDocs: Doc | null;
+  setSelectedDocs: any;
+  isDocsListOpen: boolean;
+  setIsDocsListOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  handleDeleteClick: any;
+};
+
+function SourceDropdown({
+  options,
+  setSelectedDocs,
+  selectedDocs,
+  setIsDocsListOpen,
+  isDocsListOpen,
+  handleDeleteClick,
+}: Props) {
+  const dispatch = useDispatch();
+  const embeddingsName =
+    import.meta.env.VITE_EMBEDDINGS_NAME ||
+    'huggingface_sentence-transformers/all-mpnet-base-v2';
+  return (
+    <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'
+        }`}
+      >
+        <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}
+            </p>
+            <p className="flex flex-col items-center justify-center">
+              {selectedDocs?.version}
+            </p>
+          </div>
+        </span>
+        <img
+          src={Arrow2}
+          alt="arrow"
+          className={`transform ${
+            isDocsListOpen ? 'rotate-180' : 'rotate-0'
+          } h-3 w-3 transition-transform`}
+        />
+      </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">
+          {options ? (
+            options.map((option: any, index: number) => {
+              if (option.model !== embeddingsName) {
+                return (
+                  <div
+                    key={index}
+                    className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:text-bright-gray dark:hover:bg-purple-taupe"
+                    onClick={() => {
+                      dispatch(setSelectedDocs(option));
+                      setIsDocsListOpen(false);
+                    }}
+                  >
+                    <span
+                      onClick={() => {
+                        setIsDocsListOpen(false);
+                      }}
+                      className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3"
+                    >
+                      {option.name}
+                    </span>
+                    {option.location === 'local' && (
+                      <img
+                        src={Trash}
+                        alt="Delete"
+                        className="mr-4 h-4 w-4 cursor-pointer hover:opacity-50"
+                        id={`img-${index}`}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          handleDeleteClick(index, option);
+                        }}
+                      />
+                    )}
+                  </div>
+                );
+              }
+            })
+          ) : (
+            <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>
+      )}
+    </div>
+  );
+}
+
+export default SourceDropdown;

frontend/src/upload/Upload.tsx

@@ -4,61 +4,9 @@ import { useDropzone } from 'react-dropzone';
 import { useDispatch } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
-import Arrow2 from '../assets/dropdown-arrow.svg';
 import { setSourceDocs } from '../preferences/preferenceSlice';
-type urlOption = {
-  label: string,
-  value: string
-} | null
-function DropdownUrlType({
-  options,
-  selectedOption,
-  onSelect,
-}: {
-  options: urlOption[];
-  selectedOption: urlOption;
-  onSelect: (value: urlOption) => void;
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div className="relative w-full align-middle">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className={`${isOpen ? 'rounded-t-2xl' : 'rounded-full'} flex w-full cursor-pointer justify-between border-2 border-silver dark:border-chinese-silver bg-white p-3 dark:bg-transparent`}
-      >
-        <span className={`overflow-hidden text-ellipsis dark:text-bright-gray ${!selectedOption && 'text-silver'}`}>
-          {selectedOption ? selectedOption.label : 'From URL'}
-        </span>
-        <img
-          src={Arrow2}
-          alt="arrow"
-          className={`transform ${isOpen ? 'rotate-180' : 'rotate-0'
-            } h-3 w-3 transition-transform mt-1`}
-        />
-      </button>
-      {isOpen && (
-        <div className="absolute left-0 right-0 z-50 -mt-1 rounded-b-xl border-2 border-silver dark:border-chinese-silver bg-white dark:bg-dark-charcoal  shadow-lg">
-          {options.map((option, index) => (
-            <div
-              key={index}
-              className="flex cursor-pointer items-center justify-between hover:bg-gray-100 dark:hover:bg-purple-taupe dark:text-bright-gray text-sonic-silver hover:eerie-black "
-            >
-              <span
-                onClick={() => {
-                  onSelect(option);
-                  setIsOpen(false);
-                }}
-                className="ml-2 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap px-1 py-3"
-              >
-                {option?.label}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+import Dropdown from '../components/Dropdown';
+
 export default function Upload({
   modalState,
   setModalState,
@@ -67,13 +15,17 @@ export default function Upload({
   setModalState: (state: ActiveState) => void;
 }) {
   const [docName, setDocName] = useState('');
-  const [urlName, setUrlName] = useState('')
-  const [url, setUrl] = useState('')
-  const urlOptions: urlOption[] = [
+  const [urlName, setUrlName] = useState('');
+  const [url, setUrl] = useState('');
+  const urlOptions: { label: string; value: string }[] = [
     { label: 'Crawler', value: 'crawler' },
     // { label: 'Sitemap', value: 'sitemap' },
-    { label: 'Link', value: 'url' }]
-  const [urlType, setUrlType] = useState<urlOption>(null)
+    { label: 'Link', value: 'url' },
+  ];
+  const [urlType, setUrlType] = useState<{ label: string; value: string }>({
+    label: '',
+    value: '',
+  });
   const [activeTab, setActiveTab] = useState<string>('file');
   const [files, setfiles] = useState<File[]>([]);
   const [progress, setProgress] = useState<{
@@ -116,8 +68,9 @@ export default function Upload({
             setProgress(undefined);
             setModalState('INACTIVE');
           }}
-          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${isCancellable ? '' : 'hidden'
-            }`}
+          className={`rounded-3xl bg-purple-30 px-4 py-2 text-sm font-medium text-white ${
+            isCancellable ? '' : 'hidden'
+          }`}
         >
           Finish
         </button>
@@ -210,7 +163,7 @@ export default function Upload({
   };
 
   const uploadRemote = () => {
-    console.log("here")
+    console.log('here');
     const formData = new FormData();
     formData.append('name', urlName);
     formData.append('user', 'local');
@@ -257,87 +210,115 @@ export default function Upload({
   } else {
     view = (
       <>
-        <p className="text-xl text-jet dark:text-bright-gray">Upload New Documentation</p>
-        <div >
+        <p className="text-xl text-jet dark:text-bright-gray">
+          Upload New Documentation
+        </p>
+        <div>
           <button
             onClick={() => setActiveTab('file')}
-            className={`${activeTab === 'file' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver  hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
+            className={`${
+              activeTab === 'file'
+                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
+                : 'text-sonic-silver  hover:text-purple-30'
+            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
+          >
             From File
           </button>
           <button
             onClick={() => setActiveTab('remote')}
-            className={`${activeTab === 'remote' ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400' : 'text-sonic-silver  hover:text-purple-30'} text-sm font-semibold mr-4 px-[20px] py-[5px] rounded-full`}>
+            className={`${
+              activeTab === 'remote'
+                ? 'bg-soap text-purple-30 dark:bg-independence dark:text-purple-400'
+                : 'text-sonic-silver  hover:text-purple-30'
+            } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
+          >
             Remote
           </button>
         </div>
-        {
-          activeTab === 'file' && (
-            <>
-              <input
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-gray-5000 dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={docName}
-                onChange={(e) => setDocName(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-gray-4000 dark:text-silver dark:bg-outer-space">Name</span>
-              </div>
-              <div {...getRootProps()}>
-                <span className="rounded-3xl border border-purple-30 dark:bg-purple-taupe px-4 py-2 font-medium text-purple-30 dark:text-silver hover:cursor-pointer">
-                  <input type="button" {...getInputProps()} />
-                  Choose Files
-                </span>
-              </div>
-              <p className="mb-0 italic text-xs text-gray-4000">
-                Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
+        {activeTab === 'file' && (
+          <>
+            <input
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-gray-5000 px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={docName}
+              onChange={(e) => setDocName(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
+                Name
+              </span>
+            </div>
+            <div {...getRootProps()}>
+              <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:bg-purple-taupe dark:text-silver">
+                <input type="button" {...getInputProps()} />
+                Choose Files
+              </span>
+            </div>
+            <p className="mb-0 text-xs italic text-gray-4000">
+              Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
+            </p>
+            <div className="mt-0">
+              <p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">
+                Uploaded Files
               </p>
-              <div className="mt-0">
-                <p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">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 dark:text-light-gray">None</p>}
-              </div>
-            </>
-          )
-        }
-        {
-          activeTab === 'remote' && (
-            <>
-              <DropdownUrlType onSelect={(value: urlOption) => setUrlType(value)} selectedOption={urlType} options={urlOptions} />
-              <input
-                placeholder='Enter name'
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={urlName}
-                onChange={(e) => setUrlName(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Name</span>
-              </div>
-              <input
-                placeholder='URL Link'
-                type="text"
-                className="h-10 w-full rounded-full border-2 border-silver dark:text-silver dark:bg-transparent px-3 outline-none"
-                value={url}
-                onChange={(e) => setUrl(e.target.value)}
-              ></input>
-              <div className="relative bottom-12 left-2 mt-[-18.39px]">
-                <span className="bg-white px-2 text-xs text-silver dark:text-silver dark:bg-outer-space">Link</span>
-              </div>
-            </>
-          )
-        }
+              {files.map((file) => (
+                <p key={file.name} className="text-gray-6000">
+                  {file.name}
+                </p>
+              ))}
+              {files.length === 0 && (
+                <p className="text-gray-6000 dark:text-light-gray">None</p>
+              )}
+            </div>
+          </>
+        )}
+        {activeTab === 'remote' && (
+          <>
+            <Dropdown
+              options={urlOptions}
+              selectedValue={urlType}
+              onSelect={(value: { label: string; value: string }) =>
+                setUrlType(value)
+              }
+            />
+            <input
+              placeholder="Enter name"
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={urlName}
+              onChange={(e) => setUrlName(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                Name
+              </span>
+            </div>
+            <input
+              placeholder="URL Link"
+              type="text"
+              className="h-10 w-full rounded-full border-2 border-silver px-3 outline-none dark:bg-transparent dark:text-silver"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+            ></input>
+            <div className="relative bottom-12 left-2 mt-[-18.39px]">
+              <span className="bg-white px-2 text-xs text-silver dark:bg-outer-space dark:text-silver">
+                Link
+              </span>
+            </div>
+          </>
+        )}
         <div className="flex flex-row-reverse">
           <button
-            onClick={activeTab === 'file' ? uploadFile : uploadRemote} 
-            className={`ml-6 rounded-3xl bg-purple-30 text-white cursor-pointer ${files.length > 0 && docName.trim().length > 0
-              ? ''
-              : 'bg-opacity-75 text-opacity-80'
-              } py-2 px-6`}
-            disabled={(files.length === 0 || docName.trim().length === 0) && (activeTab === 'file') } // Disable the button if no file is selected or docName is empty
+            onClick={activeTab === 'file' ? uploadFile : uploadRemote}
+            className={`ml-6 cursor-pointer rounded-3xl bg-purple-30 text-white ${
+              files.length > 0 && docName.trim().length > 0
+                ? ''
+                : 'bg-opacity-75 text-opacity-80'
+            } py-2 px-6`}
+            disabled={
+              (files.length === 0 || docName.trim().length === 0) &&
+              activeTab === 'file'
+            } // Disable the button if no file is selected or docName is empty
           >
             Train
           </button>
@@ -347,7 +328,7 @@ export default function Upload({
               setfiles([]);
               setModalState('INACTIVE');
             }}
-            className="font-medium dark:text-light-gray cursor-pointer"
+            className="cursor-pointer font-medium dark:text-light-gray"
           >
             Cancel
           </button>
@@ -358,10 +339,11 @@ export default function Upload({
 
   return (
     <article
-      className={`${modalState === 'ACTIVE' ? 'visible' : 'hidden'
-        } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+      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 dark:bg-outer-space p-6 shadow-lg">
+      <article className="mx-auto mt-24 flex w-[90vw] max-w-lg  flex-col gap-4 rounded-lg bg-white p-6 shadow-lg dark:bg-outer-space">
         {view}
       </article>
     </article>