chore: up prompt style & page data localstorage

zhpd · Jun 1, 2023 · a9c163f · a9c163f
1 parent 7fdb404
commit a9c163f
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 153 deletions.
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "emoji-mart": "5.5.2",
     "github-markdown-css": "5.2.0",
     "i18next": "22.5.0",
+    "i18next-browser-languagedetector": "^7.0.2",
     "katex": "0.16.7",
     "markdown-it": "13.0.1",
     "nanoid": "4.0.2",

diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -36,7 +36,6 @@ export default function LayoutBase(props: any) {
   const { title, theme, setTheme, event$ } = useSiteContext()
   const { surface: surfaceConfig, common: commonConfig } = useSettingContext()
   const router = useRouter()
-  const [colorBgContainer, setColorBgContainer] = useState(token.colorBgContainer)
   const [colorPrimary, setColorPrimary] = useState(token.colorPrimary)
   const [collapsed, setCollapsed] = useState(true)
   const [side, setSide] = useState(true)
@@ -87,7 +86,6 @@ export default function LayoutBase(props: any) {
       default:
         break
     }
-    setColorBgContainer(newTheme == 'dark' ? token.colorFillContent : token.colorBgContainer)
     console.log('switchTheme', theme, newTheme)
     setTheme(newTheme)
   }
@@ -196,13 +194,14 @@ export default function LayoutBase(props: any) {
                     setHeadTitle(t('c.setting'))
                     router.push('/setting')
                   }}
-                  ghost={getActive('/setting') ? false : true}
+                  type={getActive('/setting') ? 'primary' : 'text'}
+                  // ghost={getActive('/setting') ? false : true}
                   style={{ border: getActive('/setting') ? undefined : 'none', color: getActive('/setting') ? colorPrimary : theme === 'dark' ? iconColor : '#555' }}
                   size={'large'}
                   icon={<SettingOutlined style={{ color: theme === 'dark' ? iconColor : '#555' }} />}
                 ></Button>
                 <Button
-                  onClick={() =>  {
+                  onClick={() => {
                     setCollapsed(!collapsed)
                     // setSide(!side)
                   }}
@@ -237,7 +236,7 @@ export default function LayoutBase(props: any) {
               style={{
                 paddingLeft: 20,
                 paddingRight: 20,
-                background: colorBgContainer,
+                background: theme == 'dark' ? token.colorFillContent : token.colorBgContainer,
                 borderBottom: `1px solid ${theme == 'dark' ? '#42424255' : '#e8e8e855'}`,
                 display: 'flex',
                 alignItems: 'center',
@@ -258,7 +257,7 @@ export default function LayoutBase(props: any) {
                 // padding: 24,
                 minHeight: 280,
                 overflow: 'hidden',
-                background: colorBgContainer,
+                background: theme == 'dark' ? token.colorFillContent : token.colorBgContainer,
               }}
             >
               <main style={{ height: '100%' }}>{props.children}</main>

diff --git a/src/components/pages/chat/InputArea.tsx b/src/components/pages/chat/InputArea.tsx
@@ -1,10 +1,10 @@
 import { useSiteContext } from '@/contexts/site'
-import { Avatar, Button, Mentions, Popconfirm, Space, Tooltip, theme as antdTheme } from 'antd'
+import { Avatar, Button, Mentions, Popconfirm, Space, Tooltip, Typography, theme as antdTheme } from 'antd'
 import { DisconnectOutlined, LinkOutlined, SendOutlined } from '@ant-design/icons'
 import type { Message } from '@/types/chat'
 import type { MentionsOptionProps } from 'antd/es/mentions'
 import { useEffect, useState } from 'react'
-import { useKeyPress } from 'ahooks';
+import { useKeyPress } from 'ahooks'
 import { t } from 'i18next'
 import { usePromptContext, useSettingContext } from '@/contexts'
 
@@ -17,22 +17,27 @@ export type BoxProps = {
 function InputArea(props: BoxProps) {
   const { coiled, setCoiled, sendMessageText } = props
   const { promptList } = usePromptContext()
-  const { common: commonConfig  } = useSettingContext()
-  const [plist, setPlist] = useState<{ label: string; value: string }[]>([])
+  const { common: commonConfig } = useSettingContext()
+  const [plist, setPlist] = useState<{ label: any; value: string }[]>([])
   const [input, setInput] = useState<string>('')
   const [canSend, setCanSend] = useState<boolean>(false)
   const { theme } = useSiteContext()
   const { token } = antdTheme.useToken()
 
   useEffect(() => {
     if (promptList) {
-      const list = promptList?.map?.((item) => {
-        return {
-          key: item.uuid as string,
-          label: item.name as string,
-          value: item.prompt as string,
-        }
-      }) || []
+      const list =
+        promptList?.map?.((item) => {
+          return {
+            key: item.uuid as string,
+            label: (
+              <div>
+                <p>{item.name as string}</p>
+              </div>
+            ),
+            value: item.prompt as string,
+          }
+        }) || []
       setPlist(list)
     }
   }, [promptList])
@@ -54,19 +59,19 @@ function InputArea(props: BoxProps) {
   }
 
   useKeyPress(
-    [commonConfig?.send_style||'ctrl.enter'],
+    [commonConfig?.send_style || 'ctrl.enter'],
     (event) => {
-      console.log('event', event);
+      console.log('event', event)
       onSend()
-      setTimeout(()=>{
+      setTimeout(() => {
         setInput('')
       }, 200)
     },
     {
       exactMatch: true,
       // events: ['keydown', 'keyup'],
-    },
-  );
+    }
+  )
 
   return (
     <div
@@ -90,6 +95,7 @@ function InputArea(props: BoxProps) {
         autoFocus={true}
         placeholder={t('chat.inputPlaceholder') || ''}
         autoSize={true}
+        placement={'top'}
         value={input}
         prefix={['/']}
         onChange={inputChange}

diff --git a/src/components/pages/chat/Option.tsx b/src/components/pages/chat/Option.tsx
@@ -17,7 +17,7 @@ function Option(props: { chat: Chat }) {
   const [option, setOption] = useState<{ [key: string]: string | number }>({
     apitype: 'chatgpt-api',
     model: 'chatgpt-web' == apitype ? 'text-davinci-002-render-sha' : 'gpt-3.5-turbo',
-    max_tokens: 4000,
+    max_tokens: 2000,
     temperature: 0.8,
     top_p: 1.0,
     presence_penalty: 1.0,
@@ -121,48 +121,16 @@ function Option(props: { chat: Chat }) {
           <InputNumber max={4096} disabled={'chatgpt-web' == apitype} />
         </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}
-            range={false}
-            disabled={'chatgpt-web' == apitype}
-            tooltip={{ open: false }}
-            marks={{ [parseFloat(form.getFieldValue('top_p'))]: parseFloat(form.getFieldValue('top_p')) }}
-          />
+          <InputNumber min={0} max={1} step={0.1} disabled={'chatgpt-web' == apitype} />
         </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}
-            range={false}
-            disabled={'chatgpt-web' == apitype}
-            tooltip={{ open: false }}
-            marks={{ [parseFloat(form.getFieldValue('temperature'))]: parseFloat(form.getFieldValue('temperature')) }}
-          />
+          <InputNumber min={0.0} max={0.9} step={0.1} disabled={'chatgpt-web' == apitype} />
         </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}
-            range={false}
-            disabled={'chatgpt-web' == apitype}
-            tooltip={{ open: false }}
-            marks={{ [parseFloat(form.getFieldValue('presence_penalty'))]: parseFloat(form.getFieldValue('presence_penalty')) }}
-          />
+          <InputNumber min={-2.0} max={2.0} step={1} disabled={'chatgpt-web' == apitype} />
         </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}
-            range={false}
-            disabled={'chatgpt-web' == apitype}
-            tooltip={{ open: false }}
-            marks={{ [parseFloat(form.getFieldValue('frequency_penalty'))]: parseFloat(form.getFieldValue('frequency_penalty')) }}
-          />
+          <InputNumber min={-2.0} max={2.0} step={1} disabled={'chatgpt-web' == apitype} />
         </Form.Item>
       </Form>
     </>

diff --git a/src/components/pages/prompt/Edit.tsx b/src/components/pages/prompt/Edit.tsx
@@ -20,14 +20,24 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
   const [initForm, setInitForm] = useState<any>({
     type: 'text',
     name: prompt?.name || '',
+    lang: lang,
+    ...prompt,
     context: prompt?.context || [
       {
         key: 'user',
         role: 'user',
         content: prompt?.prompt || '',
       },
     ],
-    ...prompt,
+    modelConfig: {
+      model: Model['GPT-3.5-Turbo'],
+      max_tokens: 2000,
+      top_p: 1.0,
+      temperature: 0.8,
+      presence_penalty: 1.0,
+      frequency_penalty: 0,
+      ...prompt?.modelConfig,
+    },
   })
   const [form] = Form.useForm()
 
@@ -133,7 +143,7 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
           <Input readOnly={!edit} />
         </Form.Item>
         <Form.Item label="语言" name="lang" required>
-          <Select defaultValue={lang} disabled={!edit} style={{ width: 120 }} placeholder={t('prompt.languagePlaceholder') as string}>
+          <Select disabled={!edit} style={{ width: 120 }} placeholder={t('prompt.languagePlaceholder') as string}>
             {LanguageList.map((item) => {
               return (
                 <Select.Option key={item.value} value={item.value}>
@@ -150,7 +160,7 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
                 {fields.map((field, index) => (
                   <div key={field.name + index} style={{ display: 'flex', alignItems: 'flex-start', flexDirection: 'column', width: '100%', marginBottom: 10 }}>
                     <Form.Item {...field} name={[field.name, 'role']} noStyle rules={[{ required: true, message: 'Role is required' }]}>
-                      <Select placeholder="Role" disabled={!edit} defaultValue={'user'} style={{ width: '100%', marginBottom: 4 }}>
+                      <Select placeholder="Role" disabled={!edit} style={{ width: '100%', marginBottom: 4 }}>
                         <Select.Option value="user">
                           <div style={{ justifyContent: 'flex-start', flexDirection: 'row', display: 'flex', alignItems: 'center' }}>
                             User{' '}
@@ -197,29 +207,29 @@ function Edit(props: { action: string; page: boolean; prompt?: Prompt; edit: boo
 
         <Divider plain>{'模型参数配置'}</Divider>
 
-        <Form.Item label={t('chat.option.model')} extra={t('chat.option.modelTip')} name="model">
-          <Select defaultValue={Model['GPT-3.5-Turbo']} disabled={!edit}>
+        <Form.Item label={t('chat.option.model')} extra={t('chat.option.modelTip')} name={['modelConfig', 'model']}>
+          <Select disabled={!edit}>
             {ModelList.map((item) => (
               <Select.Option key={item?.value} value={item.value}>
                 {item.label}
               </Select.Option>
             ))}
           </Select>
         </Form.Item>
-        <Form.Item label={t('chat.option.max_tokens')} extra={t('chat.option.max_tokensTip')} name="max_tokens">
-          <InputNumber readOnly={!edit} defaultValue={2000} min={0} max={2000} />
+        <Form.Item label={t('chat.option.max_tokens')} extra={t('chat.option.max_tokensTip')} name={['modelConfig', 'max_tokens']}>
+          <InputNumber readOnly={!edit} min={0} max={2000} />
         </Form.Item>
-        <Form.Item label={t('chat.option.top_p')} extra={t('chat.option.top_pTip')} name="top_p">
-          <InputNumber readOnly={!edit} defaultValue={1} min={0} max={1} step={0.1} />
+        <Form.Item label={t('chat.option.top_p')} extra={t('chat.option.top_pTip')} name={['modelConfig', 'top_p']}>
+          <InputNumber readOnly={!edit} min={0} max={1} step={0.1} />
         </Form.Item>
-        <Form.Item label={t('chat.option.temperature')} extra={t('chat.option.temperatureTip')} name="temperature">
-          <InputNumber readOnly={!edit} defaultValue={0.5} min={0.0} max={0.9} step={0.1} />
+        <Form.Item label={t('chat.option.temperature')} extra={t('chat.option.temperatureTip')} name={['modelConfig', 'temperature']}>
+          <InputNumber readOnly={!edit} min={0.0} max={0.9} step={0.1} />
         </Form.Item>
-        <Form.Item label={t('chat.option.presence_penalty')} extra={t('chat.option.presence_penaltyTip')} name="presence_penalty">
-          <InputNumber readOnly={!edit} defaultValue={1} min={-2.0} max={2.0} step={1} />
+        <Form.Item label={t('chat.option.presence_penalty')} extra={t('chat.option.presence_penaltyTip')} name={['modelConfig', 'presence_penalty']}>
+          <InputNumber readOnly={!edit} min={-2.0} max={2.0} step={1} />
         </Form.Item>
-        <Form.Item label={t('chat.option.frequency_penalty')} extra={t('chat.option.frequency_penaltyTip')} name="frequency_penalty">
-          <InputNumber readOnly={!edit} defaultValue={1} min={-2.0} max={2.0} step={1} />
+        <Form.Item label={t('chat.option.frequency_penalty')} extra={t('chat.option.frequency_penaltyTip')} name={['modelConfig', 'frequency_penalty']}>
+          <InputNumber readOnly={!edit} min={-2.0} max={2.0} step={1} />
         </Form.Item>
 
         {/* <Form.Item label="Select">