fix: fixed the issue that ModelSetting could not be saved #614 (#617)

### What problem does this PR solve?

fix: fixed the issue that ModelSetting  could not be saved #614

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/interfaces/database/chat.ts

@@ -21,11 +21,11 @@ export interface LlmSetting {
 }
 
 export interface Variable {
-  frequency_penalty: number;
+  frequency_penalty?: number;
-  max_tokens: number;
+  max_tokens?: number;
-  presence_penalty: number;
+  presence_penalty?: number;
-  temperature: number;
+  temperature?: number;
-  top_p: number;
+  top_p?: number;
 }
 
 export interface IDialog {
@@ -38,7 +38,7 @@ export interface IDialog {
   kb_names: string[];
   language: string;
   llm_id: string;
-  llm_setting: LlmSetting;
+  llm_setting: Variable;
   llm_setting_type: string;
   name: string;
   prompt_config: PromptConfig;

web/src/pages/chat/chat-configuration-modal/index.tsx

@@ -181,6 +181,9 @@ const ChatConfigurationModal = ({
             key={key}
             show={key === value}
             form={form}
+            {...(key === ConfigurationSegmented.ModelSetting
+              ? { initialLlmSetting: initialDialog.llm_setting, visible }
+              : {})}
             {...(key === ConfigurationSegmented.PromptEngine
               ? { ref: promptEngineRef }
               : {})}

web/src/pages/chat/chat-configuration-modal/model-setting.tsx

@@ -11,10 +11,19 @@ import { ISegmentedContentProps } from '../interface';
 
 import { useTranslate } from '@/hooks/commonHooks';
 import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
+import { Variable } from '@/interfaces/database/chat';
 import { variableEnabledFieldMap } from '../constants';
 import styles from './index.less';
 
-const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
+const ModelSetting = ({
+  show,
+  form,
+  initialLlmSetting,
+  visible,
+}: ISegmentedContentProps & {
+  initialLlmSetting?: Variable;
+  visible?: boolean;
+}) => {
   const { t } = useTranslate('chat');
   const parameterOptions = Object.values(ModelVariableType).map((x) => ({
     label: t(camelCase(x)),
@@ -29,14 +38,23 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
   };
 
   useEffect(() => {
+    if (visible) {
       const values = Object.keys(variableEnabledFieldMap).reduce<
         Record<string, boolean>
       >((pre, field) => {
-      pre[field] = true;
+        pre[field] =
+          initialLlmSetting === undefined
+            ? true
+            : !!initialLlmSetting[
+                variableEnabledFieldMap[
+                  field as keyof typeof variableEnabledFieldMap
+                ] as keyof Variable
+              ];
         return pre;
       }, {});
       form.setFieldsValue(values);
-  }, [form]);
+    }
+  }, [form, initialLlmSetting, visible]);
 
   useFetchLlmList(LlmModelType.Chat);
 
@@ -60,7 +78,6 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
         name="parameters"
         tooltip={t('freedomTip')}
         initialValue={ModelVariableType.Precise}
-        // rules={[{ required: true, message: 'Please input!' }]}
       >
         <Select<ModelVariableType>
           options={parameterOptions}
@@ -76,27 +93,34 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           >
             <Switch size="small" />
           </Form.Item>
+          <Form.Item noStyle dependencies={['temperatureEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('temperatureEnabled');
+              return (
+                <>
                   <Flex flex={1}>
-            <Form.Item
+                    <Form.Item name={['llm_setting', 'temperature']} noStyle>
-              name={['llm_setting', 'temperature']}
+                      <Slider
-              noStyle
+                        className={styles.variableSlider}
-              rules={[{ required: true, message: t('temperatureMessage') }]}
+                        max={1}
-            >
+                        step={0.01}
-              <Slider className={styles.variableSlider} max={1} step={0.01} />
+                        disabled={disabled}
+                      />
                     </Form.Item>
                   </Flex>
-          <Form.Item
+                  <Form.Item name={['llm_setting', 'temperature']} noStyle>
-            name={['llm_setting', 'temperature']}
-            noStyle
-            rules={[{ required: true, message: t('temperatureMessage') }]}
-          >
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
                       min={0}
                       step={0.01}
+                      disabled={disabled}
                     />
                   </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
         </Flex>
       </Form.Item>
       <Form.Item label={t('topP')} tooltip={t('topPTip')}>
@@ -104,27 +128,34 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
             <Switch size="small" />
           </Form.Item>
+          <Form.Item noStyle dependencies={['topPEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('topPEnabled');
+              return (
+                <>
                   <Flex flex={1}>
-            <Form.Item
+                    <Form.Item name={['llm_setting', 'top_p']} noStyle>
-              name={['llm_setting', 'top_p']}
+                      <Slider
-              noStyle
+                        className={styles.variableSlider}
-              rules={[{ required: true, message: t('topPMessage') }]}
+                        max={1}
-            >
+                        step={0.01}
-              <Slider className={styles.variableSlider} max={1} step={0.01} />
+                        disabled={disabled}
+                      />
                     </Form.Item>
                   </Flex>
-          <Form.Item
+                  <Form.Item name={['llm_setting', 'top_p']} noStyle>
-            name={['llm_setting', 'top_p']}
-            noStyle
-            rules={[{ required: true, message: t('topPMessage') }]}
-          >
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
                       min={0}
                       step={0.01}
+                      disabled={disabled}
                     />
                   </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
         </Flex>
       </Form.Item>
       <Form.Item label={t('presencePenalty')} tooltip={t('presencePenaltyTip')}>
@@ -136,27 +167,37 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           >
             <Switch size="small" />
           </Form.Item>
+          <Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('presencePenaltyEnabled');
+              return (
+                <>
                   <Flex flex={1}>
                     <Form.Item
                       name={['llm_setting', 'presence_penalty']}
                       noStyle
-              rules={[{ required: true, message: t('presencePenaltyMessage') }]}
                     >
-              <Slider className={styles.variableSlider} max={1} step={0.01} />
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
                     </Form.Item>
                   </Flex>
-          <Form.Item
+                  <Form.Item name={['llm_setting', 'presence_penalty']} noStyle>
-            name={['llm_setting', 'presence_penalty']}
-            noStyle
-            rules={[{ required: true, message: t('presencePenaltyMessage') }]}
-          >
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
                       min={0}
                       step={0.01}
+                      disabled={disabled}
                     />
                   </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
         </Flex>
       </Form.Item>
       <Form.Item
@@ -171,29 +212,40 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           >
             <Switch size="small" />
           </Form.Item>
+          <Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('frequencyPenaltyEnabled');
+              return (
+                <>
                   <Flex flex={1}>
                     <Form.Item
                       name={['llm_setting', 'frequency_penalty']}
                       noStyle
-              rules={[
-                { required: true, message: t('frequencyPenaltyMessage') },
-              ]}
                     >
-              <Slider className={styles.variableSlider} max={1} step={0.01} />
+                      <Slider
+                        className={styles.variableSlider}
+                        max={1}
+                        step={0.01}
+                        disabled={disabled}
+                      />
                     </Form.Item>
                   </Flex>
                   <Form.Item
                     name={['llm_setting', 'frequency_penalty']}
                     noStyle
-            rules={[{ required: true, message: t('frequencyPenaltyMessage') }]}
                   >
                     <InputNumber
                       className={styles.sliderInputNumber}
                       max={1}
                       min={0}
                       step={0.01}
+                      disabled={disabled}
                     />
                   </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
         </Flex>
       </Form.Item>
       <Form.Item label={t('maxTokens')} tooltip={t('maxTokensTip')}>
@@ -201,26 +253,33 @@ const ModelSetting = ({ show, form }: ISegmentedContentProps) => {
           <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
             <Switch size="small" />
           </Form.Item>
+          <Form.Item noStyle dependencies={['maxTokensEnabled']}>
+            {({ getFieldValue }) => {
+              const disabled = !getFieldValue('maxTokensEnabled');
+
+              return (
+                <>
                   <Flex flex={1}>
-            <Form.Item
+                    <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
-              name={['llm_setting', 'max_tokens']}
+                      <Slider
-              noStyle
+                        className={styles.variableSlider}
-              rules={[{ required: true, message: t('maxTokensMessage') }]}
+                        max={2048}
-            >
+                        disabled={disabled}
-              <Slider className={styles.variableSlider} max={2048} />
+                      />
                     </Form.Item>
                   </Flex>
-          <Form.Item
+                  <Form.Item name={['llm_setting', 'max_tokens']} noStyle>
-            name={['llm_setting', 'max_tokens']}
-            noStyle
-            rules={[{ required: true, message: t('maxTokensMessage') }]}
-          >
                     <InputNumber
+                      disabled={disabled}
                       className={styles.sliderInputNumber}
                       max={2048}
                       min={0}
                     />
                   </Form.Item>
+                </>
+              );
+            }}
+          </Form.Item>
         </Flex>
       </Form.Item>
     </section>