feat: Add sidebar chat history and functionality

src/assets/locale/ar/common.json

@@ -124,5 +124,6 @@
     },
     "pin": "تثبيت",
     "unpin": "إلغاء التثبيت",
-    "generationInfo": "معلومات التوليد"
+    "generationInfo": "معلومات التوليد",
+    "sidebarChat": "دردشة الشريط الجانبي"
 }

src/assets/locale/da/common.json

@@ -117,5 +117,6 @@
     },
     "pin": "Fastgør",
     "unpin": "Frigør",
-    "generationInfo": "Genererings Info"
+    "generationInfo": "Genererings Info",
+    "sidebarChat": "Sidepanel Chat"
 }

src/assets/locale/de/common.json

@@ -117,5 +117,6 @@
     },
     "pin": "Anheften",
     "unpin": "Losheften",
-    "generationInfo": "Generierungsinformationen"
+    "generationInfo": "Generierungsinformationen",
+    "sidebarChat": "Seitenleisten-Chat"
 }

src/assets/locale/en/common.json

@@ -151,5 +151,6 @@
     },
     "pin": "Pin",
     "unpin": "Unpin",
-    "generationInfo": "Generation Info"
+    "generationInfo": "Generation Info",
+    "sidebarChat": "Sidebar Chat"
 }

src/assets/locale/es/common.json

@@ -116,5 +116,6 @@
     },
     "pin": "Fijar",
     "unpin": "Desfijar",
-    "generationInfo": "Información de Generación"
+    "generationInfo": "Información de Generación",
+    "sidebarChat": "Chat lateral"
 }

src/assets/locale/fa/common.json

@@ -110,5 +110,6 @@
     },
     "pin": "پین کردن",
     "unpin": "حذف پین",
-    "generationInfo": "اطلاعات تولید"
+    "generationInfo": "اطلاعات تولید",
+    "sidebarChat": "چت کناری"
 }

src/assets/locale/fr/common.json

@@ -116,5 +116,6 @@
     },
     "pin": "Épingler",
     "unpin": "Désépingler",
-    "generationInfo": "Informations de génération"
+    "generationInfo": "Informations de génération",
+    "sidebarChat": "Chat latéral"
 }

src/assets/locale/it/common.json

@@ -116,5 +116,6 @@
     },
     "pin": "Fissa",
     "unpin": "Rimuovi",
-    "generationInfo": "Informazioni sulla Generazione"
+    "generationInfo": "Informazioni sulla Generazione",
+    "sidebarChat": "Chat Laterale"
 }

src/assets/locale/ja-JP/common.json

@@ -116,5 +116,6 @@
   },
   "pin": "固定",
   "unpin": "固定解除",
-  "generationInfo": "生成情報"
+  "generationInfo": "生成情報",
+  "sidebarChat": "サイドバーチャット"
 }

src/assets/locale/ko/common.json

@@ -73,7 +73,8 @@
       "numPredict": {
         "label": "최대 토큰 수 (num_predict)",
         "placeholder": "최대 토큰 수를 입력하세요 (예: 2048, 4096)"
-      },      "seed": {
+      },
+      "seed": {
         "label": "시드",
         "placeholder": "시드 값을 입력하세요 (예: 1234)",
         "help": "모델 출력의 재현성"
@@ -115,5 +116,6 @@
   },
   "pin": "고정",
   "unpin": "고정 해제",
-  "generationInfo": "생성 정보"
+  "generationInfo": "생성 정보",
-}
+  "sidebarChat": "사이드바 채팅"
+}

src/assets/locale/ml/common.json

@@ -115,6 +115,7 @@
     },
     "pin": "പിൻ ചെയ്യുക",
     "unpin": "അൺപിൻ ചെയ്യുക",
-    "generationInfo": "ജനറേഷൻ വിവരങ്ങൾ"
+    "generationInfo": "ജനറേഷൻ വിവരങ്ങൾ",
+    "sidebarChat": "സൈഡ്ബാർ ചാറ്റ്"
 
 }

src/assets/locale/no/common.json

@@ -117,5 +117,6 @@
     },
     "pin": "Fest",
     "unpin": "Løsne",
-    "generationInfo": "Generasjonsinformasjon"
+    "generationInfo": "Generasjonsinformasjon",
+    "sidebarChat": "Sidepanel-chat"
 }

src/assets/locale/pt-BR/common.json

@@ -116,5 +116,6 @@
   },
   "pin": "Fixar",
   "unpin": "Desafixar",
-  "generationInfo": "Informações de Geração"
+  "generationInfo": "Informações de Geração",
+  "sidebarChat": "Chat Lateral"
 }

src/assets/locale/ru/common.json

@@ -116,5 +116,6 @@
     },
     "pin": "Закрепить",
     "unpin": "Открепить",
-    "generationInfo": "Информация о генерации"
+    "generationInfo": "Информация о генерации",
+    "sidebarChat": "Боковой чат"
 }

src/assets/locale/sv/common.json

@@ -121,5 +121,6 @@
     },
     "pin": "Fäst",
     "unpin": "Ta bort fäst",
-    "generationInfo": "Generationsinformation"
+    "generationInfo": "Generationsinformation",
-}
+    "sidebarChat": "Sidofältschatt"
+}

src/assets/locale/uk/common.json

@@ -121,5 +121,6 @@
     },
     "pin": "Прикріпити",
     "unpin": "Відкріпити",
-    "generationInfo": "Інформація про генерацію"
+    "generationInfo": "Інформація про генерацію",
-}
+    "sidebarChat": "Бічний чат"
+}

src/assets/locale/zh/common.json

@@ -116,5 +116,6 @@
     },
     "pin": "置顶",
     "unpin": "取消置顶",
-    "generationInfo": "生成信息"
+    "generationInfo": "生成信息",
+    "sidebarChat": "侧边栏聊天"
 }

src/components/Layouts/Layout.tsx

@@ -11,6 +11,7 @@ import { EraserIcon } from "lucide-react"
 import { PageAssitDatabase } from "@/db"
 import { useMessageOption } from "@/hooks/useMessageOption"
 import { useQueryClient } from "@tanstack/react-query"
+import { useStoreChatModelSettings } from "@/store/model"
 
 export default function OptionLayout({
   children
@@ -20,8 +21,19 @@ export default function OptionLayout({
   const [sidebarOpen, setSidebarOpen] = useState(false)
   const { t } = useTranslation(["option", "common", "settings"])
   const [openModelSettings, setOpenModelSettings] = useState(false)
-  const { clearChat } = useMessageOption()
+  const {
+    setMessages,
+    setHistory,
+    setHistoryId,
+    historyId,
+    clearChat,
+    setSelectedModel,
+    temporaryChat,
+    setSelectedSystemPrompt
+  } = useMessageOption()
+
   const queryClient = useQueryClient()
+  const { setSystemPrompt } = useStoreChatModelSettings()
 
   return (
     <>
@@ -70,7 +82,19 @@ export default function OptionLayout({
         closeIcon={null}
         onClose={() => setSidebarOpen(false)}
         open={sidebarOpen}>
-        <Sidebar onClose={() => setSidebarOpen(false)} />
+        <Sidebar
+          onClose={() => setSidebarOpen(false)}
+          setMessages={setMessages}
+          setHistory={setHistory}
+          setHistoryId={setHistoryId}
+          setSelectedModel={setSelectedModel}
+          setSelectedSystemPrompt={setSelectedSystemPrompt}
+          clearChat={clearChat}
+          historyId={historyId}
+          setSystemPrompt={setSystemPrompt}
+          temporaryChat={temporaryChat}
+          history={history}
+        />
       </Drawer>
 
       <CurrentChatModelSettings

src/components/Option/Sidebar.tsx

@@ -8,14 +8,14 @@ import {
   pinHistory,
   getPromptById
 } from "@/db"
-import { Empty, Skeleton, Dropdown, Menu } from "antd"
+import { Empty, Skeleton, Dropdown, Menu, Tooltip } from "antd"
-import { useMessageOption } from "~/hooks/useMessageOption"
 import {
   PencilIcon,
   Trash2,
   MoreVertical,
   PinIcon,
-  PinOffIcon
+  PinOffIcon,
+  BotIcon
 } from "lucide-react"
 import { useNavigate } from "react-router-dom"
 import { useTranslation } from "react-i18next"
@@ -24,26 +24,33 @@ import {
   getLastUsedChatSystemPrompt,
   lastUsedChatModelEnabled
 } from "@/services/model-settings"
-import { useStoreChatModelSettings } from "@/store/model"
 
 type Props = {
   onClose: () => void
+  setMessages: (messages: any) => void
+  setHistory: (history: any) => void
+  setHistoryId: (historyId: string) => void
+  setSelectedModel: (model: string) => void
+  setSelectedSystemPrompt: (prompt: string) => void
+  setSystemPrompt: (prompt: string) => void
+  clearChat: () => void
+  temporaryChat: boolean
+  historyId: string
+  history: any
 }
 
-export const Sidebar = ({ onClose }: Props) => {
+export const Sidebar = ({
-  const {
+  onClose,
-    setMessages,
+  setMessages,
-    setHistory,
+  setHistory,
-    setHistoryId,
+  setHistoryId,
-    historyId,
+  setSelectedModel,
-    clearChat,
+  setSelectedSystemPrompt,
-    setSelectedModel,
+  clearChat,
-    temporaryChat,
+  historyId,
-    setSelectedSystemPrompt
+  setSystemPrompt,
-  } = useMessageOption()
+  temporaryChat
-
+}: Props) => {
-  const { setSystemPrompt } = useStoreChatModelSettings()
-
   const { t } = useTranslation(["option", "common"])
   const client = useQueryClient()
   const navigate = useNavigate()
@@ -162,7 +169,12 @@ export const Sidebar = ({ onClose }: Props) => {
                 {group.items.map((chat, index) => (
                   <div
                     key={index}
-                    className="flex py-2 px-2 items-start gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+                    className="flex py-2 px-2 items-center gap-3 relative rounded-md truncate hover:pr-4 group transition-opacity duration-300 ease-in-out bg-gray-100 dark:bg-[#232222] dark:text-gray-100 text-gray-800 border hover:bg-gray-200 dark:hover:bg-[#2d2d2d] dark:border-gray-800">
+                    {chat?.message_source === "copilot" && (
+                      <Tooltip title={t("common:sidebarChat")} placement="top">
+                        <BotIcon className="size-3 text-green-500" />
+                      </Tooltip>
+                    )}
                     <button
                       className="flex-1 overflow-hidden break-all text-start truncate w-full"
                       onClick={async () => {

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 { Tooltip, Drawer } from "antd"
-import { BoxesIcon, BrainCog, CogIcon, EraserIcon } from "lucide-react"
+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>
   )
 }

src/hooks/useMessage.tsx

@@ -34,7 +34,6 @@ import { pageAssistModel } from "@/models"
 import { getPrompt } from "@/services/application"
 import { humanMessageFormatter } from "@/utils/human-message"
 import { pageAssistEmbeddingModel } from "@/models/embedding"
-import { PageAssistVectorStore } from "@/libs/PageAssistVectorStore"
 import { PAMemoryVectorStore } from "@/libs/PAMemoryVectorStore"
 import { getScreenshotFromCurrentTab } from "@/libs/get-screenshot"