feat: Add sidebar chat history and functionality

src/components/Sidepanel/Chat/header.tsx

@@ -1,13 +1,20 @@
 import logoImage from "~/assets/icon.png"
 import { useMessage } from "~/hooks/useMessage"
 import { Link } from "react-router-dom"
-import { Tooltip } from "antd"
-import { BoxesIcon, BrainCog, CogIcon, EraserIcon } from "lucide-react"
+import { Tooltip, Drawer } from "antd"
+import {
+  BoxesIcon,
+  BrainCog,
+  CogIcon,
+  EraserIcon,
+  HistoryIcon
+} from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { CurrentChatModelSettings } from "@/components/Common/Settings/CurrentChatModelSettings"
 import React from "react"
 import { useStorage } from "@plasmohq/storage/hook"
 import { PromptSelect } from "@/components/Common/PromptSelect"
+import { Sidebar } from "@/components/Option/Sidebar"
 export const SidepanelHeader = () => {
   const [hideCurrentChatModelSettings] = useStorage(
     "hideCurrentChatModelSettings",
@@ -21,10 +28,16 @@ export const SidepanelHeader = () => {
     streaming,
     selectedSystemPrompt,
     setSelectedSystemPrompt,
-    setSelectedQuickPrompt
+    setSelectedQuickPrompt,
+    setMessages,
+    setHistory,
+    setHistoryId,
+    setSelectedModel,
+    historyId
   } = useMessage()
   const { t } = useTranslation(["sidepanel", "common"])
   const [openModelSettings, setOpenModelSettings] = React.useState(false)
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
 
   return (
     <div className="flex px-3 justify-between bg-white dark:bg-[#171717] border-b border-gray-300 dark:border-gray-700 py-4 items-center">
@@ -53,13 +66,21 @@ export const SidepanelHeader = () => {
             <EraserIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
           </button>
         )}
+        <Tooltip title={t("tooltip.history")}>
+          <button
+            onClick={() => {
+              setSidebarOpen(true)
+            }}
+            className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
+            <HistoryIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+          </button>
+        </Tooltip>
         <PromptSelect
           selectedSystemPrompt={selectedSystemPrompt}
           setSelectedSystemPrompt={setSelectedSystemPrompt}
           setSelectedQuickPrompt={setSelectedQuickPrompt}
           className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
         />
-
         {!hideCurrentChatModelSettings && (
           <Tooltip title={t("common:currentChatModelSettings")}>
             <button
@@ -77,6 +98,31 @@ export const SidepanelHeader = () => {
         open={openModelSettings}
         setOpen={setOpenModelSettings}
       />
+
+      <Drawer
+        title={
+          <div className="flex items-center justify-between">
+            {t("tooltip.history")}
+          </div>
+        }
+        placement="left"
+        closeIcon={null}
+        onClose={() => setSidebarOpen(false)}
+        open={sidebarOpen}>
+        <Sidebar
+          onClose={() => setSidebarOpen(false)}
+          setMessages={setMessages}
+          setHistory={setHistory}
+          setHistoryId={setHistoryId}
+          setSelectedModel={setSelectedModel}
+          setSelectedSystemPrompt={setSelectedSystemPrompt}
+          clearChat={clearChat}
+          historyId={historyId}
+          setSystemPrompt={(e) => {}}
+          temporaryChat={false}
+          history={history}
+        />
+      </Drawer>
     </div>
   )
 }