Button to clean chat history

frontend/src/Navigation.tsx

@@ -19,7 +19,9 @@ 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 {
   selectApiKeyStatus,
   selectSelectedDocs,
@@ -41,6 +43,7 @@ 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;
@@ -75,6 +78,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const [apiKeyModalState, setApiKeyModalState] =
     useState<ActiveState>('INACTIVE');
 
+  const [deleteConvModalState, setDeleteConvState] =
+    useState<ActiveState>('INACTIVE');
+
   const isSelectedDocsSet = useSelector(selectSelectedDocsStatus);
   const [selectedDocsModalState, setSelectedDocsModalState] =
     useState<ActiveState>(isSelectedDocsSet ? 'INACTIVE' : 'ACTIVE');
@@ -112,6 +118,16 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
       .catch((error) => console.error(error));
   };
 
+  const handleDeleteAllConversations = () => {
+    fetch(`${apiHost}/api/delete_all_conversations`, {
+      method: 'POST',
+    })
+      .then(() => {
+        fetchConversations();
+      })
+      .catch((error) => console.error(error));
+  };
+
   const handleDeleteClick = (index: number, doc: Doc) => {
     const docPath = 'indexes/' + 'local' + '/' + doc.name;
 
@@ -260,7 +276,20 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         <div className="mb-auto h-[56vh] overflow-y-auto overflow-x-hidden dark:text-white">
           {conversations && (
             <div>
-              <p className="ml-6 mt-3 text-sm font-semibold">Chats</p>
+              <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) => (
                   <ConversationTile
@@ -312,7 +341,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               </p>
             </NavLink>
           </div>
-
           <div className="flex flex-col gap-2 border-b-[1.5px] py-2 dark:border-b-purple-taupe">
             <NavLink
               to="/about"
@@ -370,6 +398,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           />
         </button>
       </div>
+
       <SelectDocsModal
         modalState={selectedDocsModalState}
         setModalState={setSelectedDocsModalState}
@@ -380,6 +409,11 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
         setModalState={setApiKeyModalState}
         isCancellable={isApiKeySet}
       />
+      <DeleteConvModal
+        modalState={deleteConvModalState}
+        setModalState={setDeleteConvState}
+        handleDeleteAllConv={handleDeleteAllConversations}
+      />
       <Upload
         modalState={uploadModalState}
         setModalState={setUploadModalState}

frontend/src/preferences/DeleteConvModal.tsx

@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+import { ActiveState } from '../models/misc';
+import { useMediaQuery, useOutsideAlerter } from './../hooks';
+import Modal from '../Modal';
+
+export default function DeleteConvModal({
+  modalState,
+  setModalState,
+  handleDeleteAllConv,
+}: {
+  modalState: ActiveState;
+  setModalState: (val: ActiveState) => void;
+  handleDeleteAllConv: () => void;
+}) {
+  //   const dispatch = useDispatch()
+  const modalRef = useRef(null);
+  const { isMobile } = useMediaQuery();
+
+  useOutsideAlerter(
+    modalRef,
+    () => {
+      if (isMobile && modalState === 'ACTIVE') {
+        setModalState('INACTIVE');
+      }
+    },
+    [modalState],
+  );
+
+  function handleSubmit() {
+    handleDeleteAllConv();
+    setModalState('INACTIVE');
+  }
+
+  function handleCancel() {
+    setModalState('INACTIVE');
+  }
+
+  return (
+    <Modal
+      handleCancel={handleCancel}
+      isError={false}
+      modalState={modalState}
+      isCancellable={true}
+      handleSubmit={handleSubmit}
+      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 p-6 shadow-lg"
+          >
+            <p className="text-xl text-jet">
+              Are you sure you want to delete all the conversations?
+            </p>
+            <p className="text-md leading-6 text-gray-500"></p>
+          </article>
+        );
+      }}
+    />
+  );
+}