Merge remote-tracking branch 'origin/next' into openai

src/components/Common/Settings/CurrentChatModelSettings.tsx

@@ -1,16 +1,29 @@
 import { getAllModelSettings } from "@/services/model-settings"
 import { useStoreChatModelSettings } from "@/store/model"
 import { useQuery } from "@tanstack/react-query"
-import { Collapse, Form, Input, InputNumber, Modal, Skeleton } from "antd"
+import {
+  Collapse,
+  Drawer,
+  Form,
+  Input,
+  InputNumber,
+  Modal,
+  Skeleton
+} from "antd"
 import React from "react"
 import { useTranslation } from "react-i18next"
 
 type Props = {
   open: boolean
   setOpen: (open: boolean) => void
+  useDrawer?: boolean
 }
 
-export const CurrentChatModelSettings = ({ open, setOpen }: Props) => {
+export const CurrentChatModelSettings = ({
+  open,
+  setOpen,
+  useDrawer
+}: Props) => {
   const { t } = useTranslation("common")
   const [form] = Form.useForm()
   const cUserSettings = useStoreChatModelSettings()
@@ -26,12 +39,151 @@ export const CurrentChatModelSettings = ({ open, setOpen }: Props) => {
         numCtx: cUserSettings.numCtx ?? data.numCtx,
         seed: cUserSettings.seed,
         numGpu: cUserSettings.numGpu ?? data.numGpu,
+        systemPrompt: cUserSettings.systemPrompt ?? ""
       })
       return data
     },
     enabled: open,
     refetchOnMount: true
   })
+
+  const renderBody = () => {
+    return (
+      <>
+        {!isLoading ? (
+          <Form
+            onFinish={(values: {
+              keepAlive: string
+              temperature: number
+              topK: number
+              topP: number
+            }) => {
+              Object.entries(values).forEach(([key, value]) => {
+                cUserSettings.setX(key, value)
+                setOpen(false)
+              })
+            }}
+            form={form}
+            layout="vertical">
+            {useDrawer && (
+              <>
+                <Form.Item
+                  name="systemPrompt"
+                  help={t("modelSettings.form.systemPrompt.help")}
+                  label={t("modelSettings.form.systemPrompt.label")}>
+                  <Input.TextArea
+                    rows={4}
+                    placeholder={t(
+                      "modelSettings.form.systemPrompt.placeholder"
+                    )}
+                  />
+                </Form.Item>
+              </>
+            )}
+            <Form.Item
+              name="keepAlive"
+              help={t("modelSettings.form.keepAlive.help")}
+              label={t("modelSettings.form.keepAlive.label")}>
+              <Input
+                placeholder={t("modelSettings.form.keepAlive.placeholder")}
+              />
+            </Form.Item>
+
+            <Form.Item
+              name="temperature"
+              label={t("modelSettings.form.temperature.label")}>
+              <InputNumber
+                style={{ width: "100%" }}
+                placeholder={t("modelSettings.form.temperature.placeholder")}
+              />
+            </Form.Item>
+            <Form.Item
+              name="seed"
+              help={t("modelSettings.form.seed.help")}
+              label={t("modelSettings.form.seed.label")}>
+              <InputNumber
+                style={{ width: "100%" }}
+                placeholder={t("modelSettings.form.seed.placeholder")}
+              />
+            </Form.Item>
+            <Form.Item
+              name="numCtx"
+              label={t("modelSettings.form.numCtx.label")}>
+              <InputNumber
+                style={{ width: "100%" }}
+                placeholder={t("modelSettings.form.numCtx.placeholder")}
+              />
+            </Form.Item>
+
+            <Collapse
+              ghost
+              className="border-none bg-transparent"
+              items={[
+                {
+                  key: "1",
+                  label: t("modelSettings.advanced"),
+                  children: (
+                    <React.Fragment>
+                      <Form.Item
+                        name="topK"
+                        label={t("modelSettings.form.topK.label")}>
+                        <InputNumber
+                          style={{ width: "100%" }}
+                          placeholder={t("modelSettings.form.topK.placeholder")}
+                        />
+                      </Form.Item>
+
+                      <Form.Item
+                        name="topP"
+                        label={t("modelSettings.form.topP.label")}>
+                        <InputNumber
+                          style={{ width: "100%" }}
+                          placeholder={t("modelSettings.form.topP.placeholder")}
+                        />
+                      </Form.Item>
+
+                      <Form.Item
+                        name="numGpu"
+                        label={t("modelSettings.form.numGpu.label")}>
+                        <InputNumber
+                          style={{ width: "100%" }}
+                          placeholder={t(
+                            "modelSettings.form.numGpu.placeholder"
+                          )}
+                        />
+                      </Form.Item>
+                    </React.Fragment>
+                  )
+                }
+              ]}
+            />
+
+            <button
+              type="submit"
+              className="inline-flex justify-center w-full text-center mt-3 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 ">
+              {t("save")}
+            </button>
+          </Form>
+        ) : (
+          <Skeleton active />
+        )}
+      </>
+    )
+  }
+
+  if (useDrawer) {
+    return (
+      <Drawer
+        placement="right"
+        open={open}
+        onClose={() => setOpen(false)}
+        width={500}
+        title={t("currentChatModelSettings")}>
+        {renderBody()}
+      </Drawer>
+    )
+  }
+
   return (
     <Modal
       title={t("currentChatModelSettings")}
@@ -39,111 +191,7 @@ export const CurrentChatModelSettings = ({ open, setOpen }: Props) => {
       onOk={() => setOpen(false)}
       onCancel={() => setOpen(false)}
       footer={null}>
-      {!isLoading ? (
-        <Form
-          onFinish={(values: {
-            keepAlive: string
-            temperature: number
-            topK: number
-            topP: number
-          }) => {
-            Object.entries(values).forEach(([key, value]) => {
-              cUserSettings.setX(key, value)
-              setOpen(false)
-            })
-          }}
-          form={form}
-          layout="vertical">
-          <Form.Item
-            name="keepAlive"
-            help={t("modelSettings.form.keepAlive.help")}
-            label={t("modelSettings.form.keepAlive.label")}>
-            <Input
-              size="large"
-              placeholder={t("modelSettings.form.keepAlive.placeholder")}
-            />
-          </Form.Item>
-
-          <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="seed"
-            help={t("modelSettings.form.seed.help")}
-            label={t("modelSettings.form.seed.label")}>
-            <InputNumber
-              size="large"
-              style={{ width: "100%" }}
-              placeholder={t("modelSettings.form.seed.placeholder")}
-            />
-          </Form.Item>
-          <Form.Item name="numCtx" label={t("modelSettings.form.numCtx.label")}>
-            <InputNumber
-              style={{ width: "100%" }}
-              placeholder={t("modelSettings.form.numCtx.placeholder")}
-              size="large"
-            />
-          </Form.Item>
-
-          <Collapse
-            ghost
-            className="border-none bg-transparent"
-            items={[
-              {
-                key: "1",
-                label: t("modelSettings.advanced"),
-                children: (
-                  <React.Fragment>
-                    <Form.Item
-                      name="topK"
-                      label={t("modelSettings.form.topK.label")}>
-                      <InputNumber
-                        style={{ width: "100%" }}
-                        placeholder={t("modelSettings.form.topK.placeholder")}
-                        size="large"
-                      />
-                    </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="numGpu"
-                      label={t("modelSettings.form.numGpu.label")}>
-                      <InputNumber
-                        style={{ width: "100%" }}
-                        size="large"
-                        placeholder={t("modelSettings.form.numGpu.placeholder")}
-                      />
-                    </Form.Item>
-                  </React.Fragment>
-                )
-              }
-            ]}
-          />
-
-          <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 ">
-            {t("save")}
-          </button>
-        </Form>
-      ) : (
-        <Skeleton active />
-      )}
+      {renderBody()}
     </Modal>
   )
 }

src/components/Common/ShareBtn.tsx

@@ -7,12 +7,13 @@ import React from "react"
 import { useMutation } from "@tanstack/react-query"
 import { getPageShareUrl } from "~/services/ollama"
 import { cleanUrl } from "~/libs/clean-url"
-import { getUserId, saveWebshare } from "@/db"
+import { getTitleById, getUserId, saveWebshare } from "@/db"
 import { useTranslation } from "react-i18next"
 import fetcher from "@/libs/fetcher"
 
 type Props = {
   messages: Message[]
+  historyId: string
 }
 
 const reformatMessages = (messages: Message[], username: string) => {
@@ -76,7 +77,7 @@ export const PlaygroundMessage = (
   )
 }
 
-export const ShareBtn: React.FC<Props> = ({ messages }) => {
+export const ShareBtn: React.FC<Props> = ({ messages, historyId }) => {
   const { t } = useTranslation("common")
   const [open, setOpen] = useState(false)
   const [form] = Form.useForm()
@@ -84,11 +85,13 @@ export const ShareBtn: React.FC<Props> = ({ messages }) => {
 
   React.useEffect(() => {
     if (messages.length > 0) {
-      form.setFieldsValue({
-        title: messages[0].message
+      getTitleById(historyId).then((title) => {
+        form.setFieldsValue({
+          title
+        })
       })
     }
-  }, [messages])
+  }, [messages, historyId])
 
   const onSubmit = async (values: { title: string; name: string }) => {
     const owner_id = await getUserId()

src/components/Layouts/Header.tsx

@@ -45,6 +45,7 @@ export const Header: React.FC<Props> = ({
     setSelectedSystemPrompt,
     messages,
     streaming,
+    historyId
   } = useMessageOption()
   const {
     data: models,
@@ -204,7 +205,9 @@ export const Header: React.FC<Props> = ({
             {pathname === "/" &&
               messages.length > 0 &&
               !streaming &&
-              shareModeEnabled && <ShareBtn messages={messages} />}
+              shareModeEnabled && <ShareBtn
+              historyId={historyId}
+              messages={messages} />}
             <Tooltip title={t("githubRepository")}>
               <a
                 href="https://github.com/n4ze3m/page-assist"

src/components/Layouts/Layout.tsx

@@ -76,6 +76,7 @@ export default function OptionLayout({
       <CurrentChatModelSettings
         open={openModelSettings}
         setOpen={setOpenModelSettings}
+        useDrawer
       />
     </>
   )