feat: build categorize list from object #918 (#1276)

### What problem does this PR solve?

feat: build categorize list from object #918

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/llm-select/index.tsx

@@ -1,16 +1,30 @@
 import { Popover, Select } from 'antd';
 import LlmSettingItems from '../llm-setting-items';
 
-const LLMSelect = () => {
+interface IProps {
+  id?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+const LLMSelect = ({ id, value, onChange }: IProps) => {
   const content = (
-    <div>
-      <LlmSettingItems handleParametersChange={() => {}}></LlmSettingItems>
+    <div style={{ width: 400 }}>
+      <LlmSettingItems
+        formItemLayout={{ labelCol: { span: 10 }, wrapperCol: { span: 14 } }}
+      ></LlmSettingItems>
     </div>
   );
 
   return (
     <Popover content={content} trigger="click" placement="left" arrow={false}>
-      <Select style={{ width: '100%' }} dropdownStyle={{ display: 'none' }} />
+      <Select
+        style={{ width: '100%' }}
+        dropdownStyle={{ display: 'none' }}
+        id={id}
+        value={value}
+        onChange={onChange}
+      />
     </Popover>
   );
 };

web/src/components/llm-setting-items/index.tsx

@@ -1,24 +1,38 @@
-import { LlmModelType, ModelVariableType } from '@/constants/knowledge';
+import {
+  LlmModelType,
+  ModelVariableType,
+  settledModelVariableMap,
+} from '@/constants/knowledge';
 import { Divider, Flex, Form, InputNumber, Select, Slider, Switch } from 'antd';
 import camelCase from 'lodash/camelCase';
 
 import { useTranslate } from '@/hooks/commonHooks';
 import { useSelectLlmOptionsByModelType } from '@/hooks/llmHooks';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import styles from './index.less';
 
 interface IProps {
   prefix?: string;
-  handleParametersChange(value: ModelVariableType): void;
+  formItemLayout?: any;
+  handleParametersChange?(value: ModelVariableType): void;
 }
 
-const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
+const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
+  const form = Form.useFormInstance();
   const { t } = useTranslate('chat');
   const parameterOptions = Object.values(ModelVariableType).map((x) => ({
     label: t(camelCase(x)),
     value: x,
   }));
 
+  const handleParametersChange = useCallback(
+    (value: ModelVariableType) => {
+      const variable = settledModelVariableMap[value];
+      form?.setFieldsValue(variable);
+    },
+    [form],
+  );
+
   const memorizedPrefix = useMemo(() => (prefix ? [prefix] : []), [prefix]);
 
   const modelOptions = useSelectLlmOptionsByModelType();
@@ -29,6 +43,7 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
         label={t('model')}
         name="llm_id"
         tooltip={t('modelTip')}
+        {...formItemLayout}
         rules={[{ required: true, message: t('modelMessage') }]}
       >
         <Select options={modelOptions[LlmModelType.Chat]} showSearch />
@@ -38,6 +53,7 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
         label={t('freedom')}
         name="parameters"
         tooltip={t('freedomTip')}
+        {...formItemLayout}
         initialValue={ModelVariableType.Precise}
       >
         <Select<ModelVariableType>
@@ -45,7 +61,11 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
           onChange={handleParametersChange}
         />
       </Form.Item>
-      <Form.Item label={t('temperature')} tooltip={t('temperatureTip')}>
+      <Form.Item
+        label={t('temperature')}
+        tooltip={t('temperatureTip')}
+        {...formItemLayout}
+      >
         <Flex gap={20} align="center">
           <Form.Item
             name={'temperatureEnabled'}
@@ -87,7 +107,7 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
           </Form.Item>
         </Flex>
       </Form.Item>
-      <Form.Item label={t('topP')} tooltip={t('topPTip')}>
+      <Form.Item label={t('topP')} tooltip={t('topPTip')} {...formItemLayout}>
         <Flex gap={20} align="center">
           <Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
             <Switch size="small" />
@@ -122,7 +142,11 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
           </Form.Item>
         </Flex>
       </Form.Item>
-      <Form.Item label={t('presencePenalty')} tooltip={t('presencePenaltyTip')}>
+      <Form.Item
+        label={t('presencePenalty')}
+        tooltip={t('presencePenaltyTip')}
+        {...formItemLayout}
+      >
         <Flex gap={20} align="center">
           <Form.Item
             name={'presencePenaltyEnabled'}
@@ -170,6 +194,7 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
       <Form.Item
         label={t('frequencyPenalty')}
         tooltip={t('frequencyPenaltyTip')}
+        {...formItemLayout}
       >
         <Flex gap={20} align="center">
           <Form.Item
@@ -215,7 +240,11 @@ const LlmSettingItems = ({ prefix, handleParametersChange }: IProps) => {
           </Form.Item>
         </Flex>
       </Form.Item>
-      <Form.Item label={t('maxTokens')} tooltip={t('maxTokensTip')}>
+      <Form.Item
+        label={t('maxTokens')}
+        tooltip={t('maxTokensTip')}
+        {...formItemLayout}
+      >
         <Flex gap={20} align="center">
           <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
             <Switch size="small" />