feat: clear all chats

fixes #6

src/components/Menu/MenuOptions/ClearConversation.tsx

@@ -1,13 +1,38 @@
-import React from 'react';
+import React, { useState } from 'react';
 
+import PopupModal from '@components/PopupModal';
 import DeleteIcon from '@icon/DeleteIcon';
+import useInitialiseNewChat from '@hooks/useInitialiseNewChat';
 
 const ClearConversation = () => {
+  const initialiseNewChat = useInitialiseNewChat();
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+
+  const handleConfirm = () => {
+    setIsModalOpen(false);
+    initialiseNewChat();
+  };
+
   return (
-    <a className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'>
-      <DeleteIcon />
-      Clear conversations
-    </a>
+    <>
+      <a
+        className='flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm'
+        onClick={() => {
+          setIsModalOpen(true);
+        }}
+      >
+        <DeleteIcon />
+        Clear conversations
+      </a>
+      {isModalOpen && (
+        <PopupModal
+          setIsModalOpen={setIsModalOpen}
+          title='Warning'
+          message='Please be advised that by confirming this action, all messages will be deleted!'
+          handleConfirm={handleConfirm}
+        />
+      )}
+    </>
   );
 };
 

src/components/Menu/MenuOptions/MenuOptions.tsx

@@ -11,7 +11,7 @@ import Updates from './Updates';
 const MenuOptions = () => {
   return (
     <>
-      {/* <ClearConversation /> */}
+      <ClearConversation />
       <Config />
       <ThemeSwitcher />
       {/* <Account /> */}