Merge pull request #571 from n4ze3m/next

v1.5.11

Author: n4ze3m

bun.lockb

@@ -33,6 +33,7 @@
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-query": "^5.17.19",
+    "@tanstack/react-virtual": "^3.13.6",
     "@vitejs/plugin-react": "^4.2.1",
     "antd": "^5.13.3",
     "axios": "^1.6.7",

package.json

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next"
 
 import { CurrentChatModelSettings } from "../Common/Settings/CurrentChatModelSettings"
 import { Header } from "./Header"
-import { EraserIcon } from "lucide-react"
+import { EraserIcon, XIcon } from "lucide-react"
 import { PageAssitDatabase } from "@/db"
 import { useMessageOption } from "@/hooks/useMessageOption"
 import { useQueryClient } from "@tanstack/react-query"
@@ -52,39 +52,47 @@ export default function OptionLayout({
             <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"
+              <div className="flex items-center space-x-3">
+                <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()
-                      await 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" />
+                      if (confirm) {
+                        const db = new PageAssitDatabase()
+                        await db.deleteAllChatHistory()
+                        await 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>
+                <button
+                  onClick={() => setSidebarOpen(false)}
+                  className="md:hidden">
+                  <XIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                 </button>
-              </Tooltip>
+              </div>
             </div>
           }
           placement="left"
           closeIcon={null}
           onClose={() => setSidebarOpen(false)}
           open={sidebarOpen}>
           <Sidebar
+            isOpen={sidebarOpen}
             onClose={() => setSidebarOpen(false)}
             setMessages={setMessages}
             setHistory={setHistory}

src/components/Layouts/Layout.tsx

@@ -96,7 +96,6 @@ export const SettingsLayout = ({ children }: { children: React.ReactNode }) => {
                     name={t("openai:settings")}
                     icon={CpuIcon}
                     current={location.pathname}
-                    beta
                   />
                   <LinkComponent
                     href="/settings/model"

src/components/Layouts/SettingsOptionLayout.tsx

@@ -0,0 +1,124 @@
+import { SaveButton } from "@/components/Common/SaveButton"
+import { getModelSettings, setModelSettings } from "@/services/model-settings"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
+import {
+  Collapse,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Skeleton,
+  Switch
+} from "antd"
+import { Loader2 } from "lucide-react"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+type Props = {
+  model_id: string
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+export const AddUpdateOAIModelSettings: React.FC<Props> = ({
+  model_id,
+  open,
+  setOpen
+}) => {
+  const [form] = Form.useForm()
+  const { t } = useTranslation("common")
+  const queryClient = useQueryClient()
+
+  const { status, isError } = useQuery({
+    queryKey: ["fetchModelSettings", model_id],
+    queryFn: async () => {
+      const data = await getModelSettings(model_id)
+      form.setFieldsValue(data)
+      return data
+    },
+    staleTime: 0
+  })
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: setModelSettings,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["fetchModel"]
+      })
+      await queryClient.invalidateQueries({
+        queryKey: ["fetchAllModels"]
+      })
+      await queryClient.invalidateQueries({
+        queryKey: ["fetchCustomModels"]
+      })
+
+      setOpen(false)
+    }
+  })
+
+  return (
+    <Modal
+      title={t("modelSettings.label")}
+      open={open}
+      onCancel={() => {
+        setOpen(false)
+      }}
+      footer={null}>
+      {status === "pending" && <Skeleton active />}
+      {status === "success" && (
+        <Form
+          onFinish={(values: any) => {
+            mutate({
+              model_id,
+              settings: values
+            })
+          }}
+          form={form}
+          layout="vertical">
+          <Form.Item
+            name="temperature"
+            label={t("modelSettings.form.temperature.label")}>
+            <InputNumber
+              size="large"
+              style={{ width: "100%" }}
+              placeholder={t("modelSettings.form.temperature.placeholder")}
+            />
+          </Form.Item>
+          <Form.Item
+            name="numPredict"
+            label={t("modelSettings.form.numPredict.label")}>
+            <InputNumber
+              style={{ width: "100%" }}
+              placeholder={t("modelSettings.form.numPredict.placeholder")}
+            />
+          </Form.Item>
+          <Form.Item name="topP" label={t("modelSettings.form.topP.label")}>
+            <InputNumber
+              style={{ width: "100%" }}
+              size="large"
+              placeholder={t("modelSettings.form.topP.placeholder")}
+            />
+          </Form.Item>
+          <Form.Item
+            name="reasoningEffort"
+            label={t("modelSettings.form.reasoningEffort.label")}>
+            <Input
+              style={{ width: "100%" }}
+              placeholder={t("modelSettings.form.reasoningEffort.placeholder")}
+            />
+          </Form.Item>
+
+          <button
+            type="submit"
+            className="inline-flex justify-center w-full text-center mt-4 items-center rounded-md border border-transparent bg-black px-2 py-2 text-sm font-medium leading-4 text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100 dark:focus:ring-gray-500 dark:focus:ring-offset-gray-100 disabled:opacity-50 ">
+            {isPending ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              t("save")
+            )}
+          </button>
+        </Form>
+      )}
+    </Modal>
+  )
+}

src/components/Option/Models/AddUpdateOAIModelSettings.tsx

@@ -2,10 +2,11 @@ import { getAllCustomModels, deleteModel } from "@/db/models"
 import { useStorage } from "@plasmohq/storage/hook"
 import { useQuery, useQueryClient, useMutation } from "@tanstack/react-query"
 import { Avatar, Skeleton, Table, Tag, Tooltip } from "antd"
-import { Pencil, Trash2 } from "lucide-react"
+import { Pencil, Settings, Trash2 } from "lucide-react"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"
 import { ModelNickModelNicknameModal } from "./ModelNicknameModal"
+import { AddUpdateOAIModelSettings } from "./AddUpdateOAIModelSettings"
 
 export const CustomModelsTable = () => {
   const [selectedModel, setSelectedModel] = useStorage("selectedModel")
@@ -20,7 +21,7 @@ export const CustomModelsTable = () => {
     model_avatar: ""
   })
   const { t } = useTranslation(["openai", "common"])
-
+  const [openSettingsModal, setOpenSettingsModal] = useState(false)
   const queryClient = useQueryClient()
 
   const { data, status } = useQuery({
@@ -96,22 +97,39 @@ export const CustomModelsTable = () => {
                 {
                   title: t("manageModels.columns.actions"),
                   render: (_, record) => (
-                    <Tooltip title={t("manageModels.tooltip.delete")}>
-                      <button
-                        onClick={() => {
-                          if (
-                            window.confirm(t("manageModels.confirm.delete"))
-                          ) {
-                            deleteCustomModel(record.id)
-                            if (selectedModel && selectedModel === record.id) {
-                              setSelectedModel(null)
+                    <div className="flex gap-2">
+                      <Tooltip title={t("common:modelSettings.label")}>
+                        <button
+                          onClick={() => {
+                            setModel({
+                              model_id: record.id
+                            })
+                            setOpenSettingsModal(true)
+                          }}
+                          className="text-gray-700 dark:text-gray-400">
+                          <Settings className="size-4" />
+                        </button>
+                      </Tooltip>
+                      <Tooltip title={t("manageModels.tooltip.delete")}>
+                        <button
+                          onClick={() => {
+                            if (
+                              window.confirm(t("manageModels.confirm.delete"))
+                            ) {
+                              deleteCustomModel(record.id)
+                              if (
+                                selectedModel &&
+                                selectedModel === record.id
+                              ) {
+                                setSelectedModel(null)
+                              }
                             }
-                          }
-                        }}
-                        className="text-red-500 dark:text-red-400">
-                        <Trash2 className="w-5 h-5" />
-                      </button>
-                    </Tooltip>
+                          }}
+                          className="text-red-500 dark:text-red-400">
+                          <Trash2 className="w-5 h-5" />
+                        </button>
+                      </Tooltip>
+                    </div>
                   )
                 }
               ]}
@@ -128,6 +146,12 @@ export const CustomModelsTable = () => {
         model_name={model.model_name}
         model_avatar={model.model_avatar}
       />
+
+      <AddUpdateOAIModelSettings
+        model_id={model.model_id}
+        open={openSettingsModal}
+        setOpen={setOpenSettingsModal}
+      />
     </div>
   )
 }

src/components/Option/Models/CustomModelsTable.tsx

@@ -209,6 +209,7 @@ export const OpenAIApp = () => {
           dataSource={configs}
           loading={isLoading}
           rowKey="id"
+          bordered
         />
 
         <Modal

src/components/Option/Settings/openai.tsx

@@ -40,6 +40,7 @@ type Props = {
   temporaryChat: boolean
   historyId: string
   history: any
+  isOpen: boolean
 }
 
 export const Sidebar = ({
@@ -52,7 +53,8 @@ export const Sidebar = ({
   clearChat,
   historyId,
   setSystemPrompt,
-  temporaryChat
+  temporaryChat,
+  isOpen
 }: Props) => {
   const { t } = useTranslation(["option", "common"])
   const client = useQueryClient()
@@ -112,7 +114,8 @@ export const Sidebar = ({
 
       return groups
     },
-    placeholderData: (prev) => prev
+    placeholderData: (prev) => prev,
+    enabled: isOpen,
   })
 
   const { mutate: deleteHistory } = useMutation({

src/components/Option/Sidebar.tsx

@@ -9,7 +9,8 @@ import {
   EraserIcon,
   // EraserIcon,
   HistoryIcon,
-  PlusSquare
+  PlusSquare,
+  XIcon
 } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { CurrentChatModelSettings } from "@/components/Common/Settings/CurrentChatModelSettings"
@@ -115,14 +116,21 @@ export const SidepanelHeader = () => {
       <Drawer
         title={
           <div className="flex items-center justify-between">
-            {t("tooltip.history")}
+            <div className="flex items-center justify-between">
+              {t("tooltip.history")}
+            </div>
+
+            <button onClick={() => setSidebarOpen(false)}>
+              <XIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+            </button>
           </div>
         }
         placement="left"
         closeIcon={null}
         onClose={() => setSidebarOpen(false)}
         open={sidebarOpen}>
         <Sidebar
+          isOpen={sidebarOpen}
           onClose={() => setSidebarOpen(false)}
           setMessages={setMessages}
           setHistory={setHistory}