fix: fix option set

zhpd · Mar 31, 2023 · 3806221 · 3806221
1 parent fb5a2e8
commit 3806221
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
@@ -44,6 +44,8 @@
       "apiType": "访问方式",
       "apiTypeAPI": "api",
       "apiTypeWEB": "web",
+      "model": "模型",
+      "modelTip": "选择模型",
       "max_tokens": "单次回复限制",
       "max_tokensTip": "单次交互所用的最大 Token 数",
       "top_p": "回复筛选",

diff --git a/src/pages/chat/components/Message.tsx b/src/pages/chat/components/Message.tsx
@@ -20,7 +20,7 @@ import InputArea from './InputArea'
 function Message() {
   const { token } = antdTheme.useToken()
   const { theme } = useSiteContext()
-  const { message } = App.useApp()
+  const { message, modal } = App.useApp()
   const { activeChat, setActiveChat, newChat, newMessage, delChat, upChat } = useChatContext()
   const { t } = useTranslation()
   const { sendMessage, loading } = useChat()
@@ -324,17 +324,20 @@ function Message() {
           </div>
         </div>
         <Space>
-          <Popover
-            content={() => {
-              return <Option chat={activeChat as Chat} />
+          <Button
+            type={'default'}
+            size="middle"
+            icon={<ControlOutlined />}
+            onClick={() => {
+              modal.info({
+                title: t('chat.optionTitle') as string,
+                centered: true,
+                closable: true,
+                footer: null,
+                content: <Option chat={activeChat as Chat} />,
+              })
             }}
-            title={t('chat.optionTitle')}
-            getPopupContainer={(triggerNode) => triggerNode?.parentElement as HTMLElement}
-            trigger="click"
-            destroyTooltipOnHide={true}
-          >
-            <Button type={'default'} size="middle" icon={<ControlOutlined />}></Button>
-          </Popover>
+          ></Button>
           <Button
             type={'default'}
             size="middle"

diff --git a/src/pages/chat/components/Option.tsx b/src/pages/chat/components/Option.tsx
@@ -25,6 +25,10 @@ function Option(props: { chat: Chat }) {
   })
   const [form] = Form.useForm()
 
+  useEffect(() => {
+    form.setFieldsValue({ ...initValue, ...chat?.option })
+  }, [chat?.option])
+
   const onValuesChange = (changedValues: any, values: any) => {
     console.log('changedValues', changedValues)
     if (apitype !== values.apitype) {
@@ -40,7 +44,11 @@ function Option(props: { chat: Chat }) {
         })
       }
     }
-    upChat(chat.uuid, { ...changedValues })
+    chat?.uuid && upChat(chat?.uuid, { ...changedValues })
+  }
+
+  function onFieldsChange(changedFields: any, allFields: any): void {
+    console.log('changedFields', changedFields)
   }
 
   return (
@@ -49,6 +57,7 @@ function Option(props: { chat: Chat }) {
         form={form}
         initialValues={{ ...initValue }}
         onValuesChange={onValuesChange}
+        onFieldsChange={onFieldsChange}
         labelCol={{ span: 8 }}
         wrapperCol={{ span: 14, offset: 1 }}
         layout="horizontal"
@@ -63,45 +72,36 @@ function Option(props: { chat: Chat }) {
         </Form.Item>
         {'chatgpt-api' == apitype && (
           <>
-            <Form.Item label="model" name="model">
-              <Select getPopupContainer={(triggerNode) => triggerNode.parentElement}>
+            <Form.Item label={t('chat.option.model')} tooltip={{ title: t('chat.option.modelTip') }} name="model">
+              <Select>
                 <Select.Option value="gpt-3.5-turbo">gpt-3.5-turbo</Select.Option>
                 <Select.Option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</Select.Option>
+                <Select.Option value="gpt-4" disabled>
+                  gpt-4
+                </Select.Option>
               </Select>
             </Form.Item>
             <Form.Item label={t('chat.option.max_tokens')} tooltip={{ title: t('chat.option.max_tokensTip') }} name="max_tokens">
               <InputNumber max={4096} />
             </Form.Item>
             <Form.Item label={t('chat.option.top_p')} tooltip={{ title: t('chat.option.top_pTip') }} name="top_p">
-              <>
-                <Slider min={0} max={1} step={0.1} tooltip={{ getPopupContainer: (triggerNode) => triggerNode.parentElement as HTMLElement }} />
-                <Typography.Text>{form.getFieldValue('temperature')}</Typography.Text>
-              </>
+              <Slider min={0} max={1} step={0.1} range={false} marks={{ [parseFloat(form.getFieldValue('top_p'))]: parseFloat(form.getFieldValue('top_p')) }} />
             </Form.Item>
             <Form.Item label={t('chat.option.temperature')} tooltip={{ title: t('chat.option.temperatureTip') }} name="temperature">
-              <>
-                <Slider min={0.0} max={0.9} step={0.1} tooltip={{ getPopupContainer: (triggerNode) => triggerNode.parentElement as HTMLElement }} />
-                <Typography.Text>{form.getFieldValue('temperature')}</Typography.Text>
-              </>
+              <Slider min={0.0} max={0.9} step={0.1} range={false} marks={{ [parseFloat(form.getFieldValue('temperature'))]: parseFloat(form.getFieldValue('temperature')) }} />
             </Form.Item>
             <Form.Item label={t('chat.option.presence_penalty')} tooltip={{ title: t('chat.option.presence_penaltyTip') }} name="presence_penalty">
-              <>
-                <Slider min={-2.0} max={2.0} step={1} tooltip={{ getPopupContainer: (triggerNode) => triggerNode.parentElement as HTMLElement }} />
-                <Typography.Text>{form.getFieldValue('presence_penalty')}</Typography.Text>
-              </>
+              <Slider min={-2.0} max={2.0} step={1} range={false} marks={{ [parseFloat(form.getFieldValue('presence_penalty'))]: parseFloat(form.getFieldValue('presence_penalty')) }} />
             </Form.Item>
             <Form.Item label={t('chat.option.frequency_penalty')} tooltip={{ title: t('chat.option.frequency_penaltyTip') }} name="frequency_penalty">
-              <>
-                <Slider min={-2.0} max={2.0} step={1} tooltip={{ getPopupContainer: (triggerNode) => triggerNode.parentElement as HTMLElement }} />
-                <Typography.Text>{form.getFieldValue('frequency_penalty')}</Typography.Text>
-              </>
+              <Slider min={-2.0} max={2.0} step={1} range={false} marks={{ [parseFloat(form.getFieldValue('frequency_penalty'))]: parseFloat(form.getFieldValue('frequency_penalty')) }} />
             </Form.Item>
           </>
         )}
         {'chatgpt-web' == apitype && (
           <>
             <Form.Item label="model" name="model">
-              <Select disabled getPopupContainer={(triggerNode) => triggerNode.parentElement}>
+              <Select disabled>
                 <Select.Option value="text-davinci-002-render-sha">text-davinci-002-render-sha</Select.Option>
               </Select>
             </Form.Item>