first change

frontend/package.json

@@ -14,7 +14,6 @@
   },
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
-      "npm run lint-fix",
       "npm run format"
     ]
   },

frontend/src/Navigation.tsx

@@ -19,8 +19,8 @@ import SettingGearDark from './assets/settingGear-dark.svg';
 import Add from './assets/add.svg';
 import UploadIcon from './assets/upload.svg';
 import { ActiveState } from './models/misc';
-import Trash from '../src/assets/trash.svg';
 import APIKeyModal from './preferences/APIKeyModal';
+import DeleteConvModal from './preferences/DeleteConvModal';
 
 import {
   selectApiKeyStatus,
@@ -31,6 +31,7 @@ import {
   selectConversations,
   setConversations,
   selectConversationId,
+  selectModalState,
 } from './preferences/preferenceSlice';
 import {
   setConversation,
@@ -43,7 +44,6 @@ import SelectDocsModal from './preferences/SelectDocsModal';
 import ConversationTile from './conversation/ConversationTile';
 import { useDarkTheme } from './hooks';
 import SourceDropdown from './components/SourceDropdown';
-import DeleteConvModal from './preferences/DeleteConvModal';
 
 interface NavigationProps {
   navOpen: boolean;
@@ -69,7 +69,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
+  const modalState = useSelector(selectModalState);
   const conversationId = useSelector(selectConversationId);
+
   const { isMobile } = useMediaQuery();
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
@@ -98,18 +100,24 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       fetchConversations();
     }
   }, [conversations, dispatch]);
+
+  useEffect(() => {
+    console.log(modalState);
+  }, [modalState]);
+
   async function fetchConversations() {
     return await getConversations()
       .then((fetchedConversations) => {
         dispatch(setConversations(fetchedConversations));
+        console.log(conversations);
       })
       .catch((error) => {
         console.error('Failed to fetch conversations: ', error);
       });
   }
 
-  const handleDeleteConversation = (id: string) => {
-    fetch(`${apiHost}/api/delete_conversation?id=${id}`, {
+  const handleDeleteAllConversations = () => {
+    fetch(`${apiHost}/api/delete_all_conversations`, {
       method: 'POST',
     })
       .then(() => {
@@ -118,8 +126,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       .catch((error) => console.error(error));
   };
 
-  const handleDeleteAllConversations = () => {
-    fetch(`${apiHost}/api/delete_all_conversations`, {
+  const handleDeleteConversation = (id: string) => {
+    fetch(`${apiHost}/api/delete_conversation?id=${id}`, {
       method: 'POST',
     })
       .then(() => {
@@ -278,17 +286,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             <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>
-                <img
-                  src={Trash}
-                  alt="Exit"
-                  className={`mr-4 ${
-                    conversations?.length === 0
-                      ? ' hidden '
-                      : 'h-4 w-4 bg-blue-400'
-                  }mt-px  cursor-pointer hover:opacity-50`}
-                  id={`img-trash`}
-                  onClick={() => setDeleteConvState('ACTIVE')}
-                />
               </div>
               <div className="conversations-container">
                 {conversations?.map((conversation) => (
@@ -410,7 +407,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         isCancellable={isApiKeySet}
       />
       <DeleteConvModal
-        modalState={deleteConvModalState}
+        modalState={modalState}
         setModalState={setDeleteConvState}
         handleDeleteAllConv={handleDeleteAllConversations}
       />

frontend/src/preferences/preferenceSlice.ts

@@ -5,6 +5,7 @@ import {
 } from '@reduxjs/toolkit';
 import { Doc, setLocalApiKey, setLocalRecentDocs } from './preferenceApi';
 import { RootState } from '../store';
+import { ActiveState } from '../models/misc';
 
 interface Preference {
   apiKey: string;
@@ -13,6 +14,7 @@ interface Preference {
   chunks: string;
   sourceDocs: Doc[] | null;
   conversations: { name: string; id: string }[] | null;
+  modalState: ActiveState;
 }
 
 const initialState: Preference = {
@@ -32,6 +34,7 @@ const initialState: Preference = {
   } as Doc,
   sourceDocs: null,
   conversations: null,
+  modalState: 'ACTIVE',
 };
 
 export const prefSlice = createSlice({
@@ -56,6 +59,9 @@ export const prefSlice = createSlice({
     setChunks: (state, action) => {
       state.chunks = action.payload;
     },
+    setModalStateDeleteConv: (state, action) => {
+      state.modalState = action.payload;
+    },
   },
 });
 
@@ -66,6 +72,7 @@ export const {
   setConversations,
   setPrompt,
   setChunks,
+  setModalStateDeleteConv,
 } = prefSlice.actions;
 export default prefSlice.reducer;
 
@@ -114,6 +121,8 @@ export const selectSelectedDocsStatus = (state: RootState) =>
   !!state.preference.selectedDocs;
 export const selectSourceDocs = (state: RootState) =>
   state.preference.sourceDocs;
+export const selectModalState = (state: RootState) =>
+  state.preference.modalState;
 export const selectSelectedDocs = (state: RootState) =>
   state.preference.selectedDocs;
 export const selectConversations = (state: RootState) =>

frontend/src/settings/General.tsx

@@ -8,7 +8,9 @@ import {
   setPrompt,
   setChunks,
   selectChunks,
+  setModalStateDeleteConv,
 } from '../preferences/preferenceSlice';
+import Trash from '../assets/trash.svg';
 
 const apiHost = import.meta.env.VITE_API_HOST || 'https://docsapi.arc53.com';
 
@@ -43,6 +45,7 @@ const General: React.FC = () => {
     };
     fetchPrompts();
   }, []);
+
   return (
     <div className="mt-[59px]">
       <div className="mb-4">
@@ -93,6 +96,25 @@ const General: React.FC = () => {
           apiHost={apiHost}
         />
       </div>
+      <div className="w-55 w-56">
+        <p className="font-bold text-jet dark:text-bright-gray">
+          Delete all conversations
+        </p>
+        <button
+          className="mt-2 flex w-full cursor-pointer items-center justify-between rounded-3xl border-2 border-silver bg-white px-5 py-3 dark:border-chinese-silver dark:bg-transparent"
+          onClick={() => dispatch(setModalStateDeleteConv('ACTIVE'))}
+        >
+          <span className="overflow-hidden text-ellipsis dark:text-bright-gray">
+            Delete
+          </span>
+          <img
+            src={Trash}
+            alt="Exit"
+            className={`mr-4 mt-px  cursor-pointer hover:opacity-50`}
+            id={`img-trash`}
+          />
+        </button>
+      </div>
     </div>
   );
 };