From 2e97f6470d64a815fb0181dd3253f5463ba9e69e Mon Sep 17 00:00:00 2001
From: n4ze3m <n4ze3m@gmail.com>
Date: Fri, 27 Sep 2024 19:38:29 +0530
Subject: [PATCH] feat: Add clear chat history button to drawer

Adds a button to the sidebar drawer for clearing chat history.
The button uses a confirmation prompt to ensure user intent and clears the database entries.
This allows users to reset their chat history for a fresh start.
The button uses a tooltip to provide more information on its function.
---
 src/components/Layouts/Layout.tsx | 43 ++++++++++++++++++++++++++++---
 wxt.config.ts                     |  2 +-
 2 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/Layouts/Layout.tsx b/src/components/Layouts/Layout.tsx
index 0da5433..93a41ba 100644
--- a/src/components/Layouts/Layout.tsx
+++ b/src/components/Layouts/Layout.tsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react"
 
 import { Sidebar } from "../Option/Sidebar"
-import { Drawer } from "antd"
+import { Drawer, Tooltip } from "antd"
 
 import { useTranslation } from "react-i18next"
 
 import { CurrentChatModelSettings } from "../Common/Settings/CurrentChatModelSettings"
 import { Header } from "./Header"
+import { EraserIcon } from "lucide-react"
+import { PageAssitDatabase } from "@/db"
+import { useMessageOption } from "@/hooks/useMessageOption"
+import { useQueryClient } from "@tanstack/react-query"
 
 export default function OptionLayout({
   children
@@ -14,8 +18,10 @@ export default function OptionLayout({
   children: React.ReactNode
 }) {
   const [sidebarOpen, setSidebarOpen] = useState(false)
-  const { t } = useTranslation(["option", "common"])
+  const { t } = useTranslation(["option", "common", "settings"])
   const [openModelSettings, setOpenModelSettings] = useState(false)
+  const { clearChat } = useMessageOption()
+  const queryClient = useQueryClient()
 
   return (
     <>
@@ -28,7 +34,38 @@ export default function OptionLayout({
       </div>
 
       <Drawer
-        title={t("sidebarTitle")}
+        title={
+          <div className="flex items-center justify-between">
+            {t("sidebarTitle")}
+
+            <Tooltip
+              title={t(
+                "settings:generalSettings.system.deleteChatHistory.label"
+              )}
+              placement="right">
+              <button
+                onClick={async () => {
+                  const confirm = window.confirm(
+                    t(
+                      "settings:generalSettings.system.deleteChatHistory.confirm"
+                    )
+                  )
+
+                  if (confirm) {
+                    const db = new PageAssitDatabase()
+                    await db.deleteAllChatHistory()
+                    queryClient.invalidateQueries({
+                      queryKey: ["fetchChatHistory"]
+                    })
+                    clearChat()
+                  }
+                }}
+                className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100">
+                <EraserIcon className="size-5"   />
+              </button>
+            </Tooltip>
+          </div>
+        }
         placement="left"
         closeIcon={null}
         onClose={() => setSidebarOpen(false)}
diff --git a/wxt.config.ts b/wxt.config.ts
index 6ad0b4e..bc9001e 100644
--- a/wxt.config.ts
+++ b/wxt.config.ts
@@ -50,7 +50,7 @@ export default defineConfig({
   outDir: "build",
 
   manifest: {
-    version: "1.2.3",
+    version: "1.2.4",
     name:
       process.env.TARGET === "firefox"
         ? "Page Assist - A Web UI for Local AI Models"