chore: Update Lucide icons and add Current Chat Model Settings to Sidepanel

src/assets/locale/en/common.json

@@ -49,11 +49,11 @@
     "noData": "No data",
     "noHistory": "No chat history",
     "chatWithCurrentPage": "Chat with current page",
+    "currentChatModelSettings":"Current Chat Model Settings",
     "beta": "Beta",
     "tts": "Read aloud",
     "modelSettings": {
         "label": "Model Settings",
-        "currentChatModelSettings":"Current Chat Model Settings",
         "description": "Set the model options globally for all chats",
         "form": {
             "keepAlive": {

src/components/Layouts/Layout.tsx

@@ -13,7 +13,6 @@ import {
   ComputerIcon,
   GithubIcon,
   PanelLeftIcon,
-  SlashIcon,
   SquarePen,
   ZapIcon
 } from "lucide-react"
@@ -195,7 +194,7 @@ export default function OptionLayout({
             <div className="flex flex-1 justify-end px-4">
               <div className="ml-4 flex items-center md:ml-6">
                 <div className="flex gap-4 items-center">
-                  <Tooltip title={t("currentChatModelSettings")}>
+                  <Tooltip title={t("common:currentChatModelSettings")}>
                     <button
                       onClick={() => setOpenModelSettings(true)}
                       className="!text-gray-500 dark:text-gray-300 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">

src/components/Sidepanel/Chat/header.tsx

@@ -2,11 +2,14 @@ import logoImage from "~/assets/icon.png"
 import { useMessage } from "~/hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
-import { BoxesIcon, CogIcon, EraserIcon, HistoryIcon } from "lucide-react"
+import { BoxesIcon, BrainCog, CogIcon, EraserIcon } from "lucide-react"
 import { useTranslation } from "react-i18next"
+import { CurrentChatModelSettings } from "@/components/Common/CurrentChatModelSettings"
+import React from "react"
 export const SidepanelHeader = () => {
   const { clearChat, isEmbedding, messages, streaming } = useMessage()
   const { t } = useTranslation(["sidepanel", "common"])
+  const [openModelSettings, setOpenModelSettings] = 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">
@@ -40,10 +43,21 @@ export const SidepanelHeader = () => {
             <HistoryIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
           </Link>
         </Tooltip> */}
+        <Tooltip title={t("common:currentChatModelSettings")}>
+          <button
+            onClick={() => setOpenModelSettings(true)}
+            className="text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+            <BrainCog className="w-5 h-5" />
+          </button>
+        </Tooltip>
         <Link to="/settings">
           <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
         </Link>
       </div>
+      <CurrentChatModelSettings
+        open={openModelSettings}
+        setOpen={setOpenModelSettings}
+      />
     </div>
   )
 }