refactor(client): convert ClearConvos component from jsx to tsx

refactor(client): convert Dialog, DialogButton, Input, Label, Checkbox, and DialogTemplate components from jsx to tsx
refactor(client): export ClearChatsButton component from General.tsx
refactor(client): add useCallback hook to moveToTop function in Nav component

client/src/components/Nav/ClearConvos.jsx

@@ -1,40 +0,0 @@
-import { useEffect } from 'react';
-import store from '~/store';
-import { Dialog } from '../ui/Dialog.tsx';
-import DialogTemplate from '../ui/DialogTemplate';
-import { useClearConversationsMutation } from '~/data-provider';
-
-const ClearConvos = ({ open, onOpenChange}) => {
-  const { newConversation } = store.useConversation();
-  const { refreshConversations } = store.useConversations();
-  const clearConvosMutation = useClearConversationsMutation();
-
-  const clickHandler = () => {
-    console.log('Clearing conversations...');
-    clearConvosMutation.mutate();
-  };
-
-  useEffect(() => {
-    if (clearConvosMutation.isSuccess) {
-      newConversation();
-      refreshConversations();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [clearConvosMutation.isSuccess]);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogTemplate
-        title="Clear conversations"
-        description="Are you sure you want to clear all conversations? This is irreversible."
-        selection={{
-          selectHandler: clickHandler,
-          selectClasses: 'bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
-          selectText: 'Clear'
-        }}
-      />
-    </Dialog>
-  );
-};
-
-export default ClearConvos;

client/src/components/Nav/ClearConvos.tsx

@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogTemplate } from '../ui/';
+import { ClearChatsButton } from './SettingsTabs/';
+import { useClearConversationsMutation } from '~/data-provider';
+import store from '~/store';
+
+const ClearConvos = ({ open, onOpenChange }) => {
+  const { newConversation } = store.useConversation();
+  const { refreshConversations } = store.useConversations();
+  const clearConvosMutation = useClearConversationsMutation();
+  const [confirmClear, setConfirmClear] = useState(false);
+
+  const clearConvos = useCallback(() => {
+    if (confirmClear) {
+      console.log('Clearing conversations...');
+      clearConvosMutation.mutate({});
+      setConfirmClear(false);
+    } else {
+      setConfirmClear(true);
+    }
+  }, [confirmClear, clearConvosMutation]);
+
+  useEffect(() => {
+    if (clearConvosMutation.isSuccess) {
+      refreshConversations();
+      newConversation();
+    }
+  }, [clearConvosMutation.isSuccess, newConversation, refreshConversations]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTemplate
+        title="Clear conversations"
+        description="Are you sure you want to clear all conversations? This is irreversible."
+        leftButtons={<ClearChatsButton showText={false} confirmClear={confirmClear} onClick={clearConvos} />}
+      />
+    </Dialog>
+  );
+};
+
+export default ClearConvos;

client/src/components/Nav/ExportConversation/ExportModel.jsx

@@ -3,12 +3,7 @@ import { useRecoilValue, useRecoilCallback } from 'recoil';
 import filenamify from 'filenamify';
 import exportFromJSON from 'export-from-json';
 import download from 'downloadjs';
-import DialogTemplate from '~/components/ui/DialogTemplate.jsx';
+import { Dialog, DialogButton, DialogTemplate, Input, Label, Checkbox, Dropdown } from '~/components/ui/';
-import { Dialog, DialogButton } from '~/components/ui/Dialog.tsx';
-import { Input } from '~/components/ui/Input.tsx';
-import { Label } from '~/components/ui/Label.tsx';
-import { Checkbox } from '~/components/ui/Checkbox.tsx';
-import Dropdown from '~/components/ui/Dropdown';
 import { cn } from '~/utils/';
 import { useScreenshot } from '~/utils/screenshotContext';
 

client/src/components/Nav/SettingsTabs/General.tsx

@@ -19,9 +19,9 @@ const ThemeSelector = ({ theme, onChange }: { theme: string, onChange: (value: s
   </div>
 );
 
-const ClearChatsButton = ({ confirmClear, onClick }: { confirmClear: boolean, onClick: () => void }) => (
+export const ClearChatsButton = ({ confirmClear, showText = true, onClick }: { confirmClear: boolean, showText: boolean, onClick: () => void }) => (
   <div className="flex items-center justify-between">
-    <div>Clear all chats</div>
+    {showText && <div>Clear all chats</div>}
     <button
       className="btn relative bg-red-600  text-white hover:bg-red-800"
       type="button"
@@ -67,7 +67,7 @@ function General() {
           <ThemeSelector theme={theme} onChange={changeTheme} />
         </div>
         <div className="border-b pb-3 last-of-type:border-b-0 dark:border-gray-700">
-          <ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} />
+          <ClearChatsButton confirmClear={confirmClear} onClick={clearConvos} showText={true}/>
         </div>
       </div>
     </Tabs.Content>

client/src/components/Nav/SettingsTabs/index.ts

@@ -1 +1,2 @@
 export { default as General } from './General';
+export { ClearChatsButton } from './General';

client/src/components/Nav/index.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useState, useEffect, useRef, useContext } from 'react';
+import { useState, useEffect, useRef, useContext, useCallback } from 'react';
 import NewChat from './NewChat';
 import Panel from '../svg/Panel';
 import Spinner from '../svg/Spinner';
@@ -100,12 +100,12 @@ export default function Nav({ navVisible, setNavVisible }) {
     }
   };
 
-  const moveToTop = () => {
+  const moveToTop = useCallback(() => {
     const container = containerRef.current;
     if (container) {
       scrollPositionRef.current = container.scrollTop;
     }
-  };
+  }, [containerRef, scrollPositionRef]);
 
   const nextPage = async () => {
     moveToTop();