Feat: Modify the Preset configurations item style to distinguish it from other fields #4844 (#4845)

### What problem does this PR solve?

Feat: Modify the Preset configurations item style to distinguish it from
other fields #4844

### Type of change


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

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

@@ -3,11 +3,12 @@ import {
   ModelVariableType,
   settledModelVariableMap,
 } from '@/constants/knowledge';
-import { Divider, Flex, Form, InputNumber, Select, Slider, Switch } from 'antd';
+import { Flex, Form, InputNumber, Select, Slider, Switch, Tooltip } from 'antd';
 import camelCase from 'lodash/camelCase';
 
 import { useTranslate } from '@/hooks/common-hooks';
 import { useComposeLlmOptionsByModelTypes } from '@/hooks/llm-hooks';
+import { QuestionCircleOutlined } from '@ant-design/icons';
 import { useCallback, useMemo } from 'react';
 import styles from './index.less';
 
@@ -55,19 +56,33 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
       >
         <Select options={modelOptions} showSearch />
       </Form.Item>
-      <Divider></Divider>
+      <div className="border rounded-md">
+        <div className="flex justify-between bg-slate-100 p-2 mb-2">
+          <div className="space-x-1 items-center">
+            <span className="text-lg font-semibold">{t('freedom')}</span>
+            <Tooltip title={t('freedomTip')}>
+              <QuestionCircleOutlined></QuestionCircleOutlined>
+            </Tooltip>
+          </div>
+          <div className="w-1/4 min-w-32">
             <Form.Item
               label={t('freedom')}
               name="parameter"
               tooltip={t('freedomTip')}
-        {...formItemLayout}
               initialValue={ModelVariableType.Precise}
+              labelCol={{ span: 0 }}
+              wrapperCol={{ span: 24 }}
+              className="m-0"
             >
               <Select<ModelVariableType>
                 options={parameterOptions}
                 onChange={handleParametersChange}
               />
             </Form.Item>
+          </div>
+        </div>
+
+        <div className="pr-2">
           <Form.Item
             label={t('temperature')}
             tooltip={t('temperatureTip')}
@@ -99,7 +114,10 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                           />
                         </Form.Item>
                       </Flex>
-                  <Form.Item name={[...memorizedPrefix, 'temperature']} noStyle>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'temperature']}
+                        noStyle
+                      >
                         <InputNumber
                           className={styles.sliderInputNumber}
                           max={1}
@@ -114,7 +132,11 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
               </Form.Item>
             </Flex>
           </Form.Item>
-      <Form.Item label={t('topP')} tooltip={t('topPTip')} {...formItemLayout}>
+          <Form.Item
+            label={t('topP')}
+            tooltip={t('topPTip')}
+            {...formItemLayout}
+          >
             <Flex gap={20} align="center">
               <Form.Item name={'topPEnabled'} valuePropName="checked" noStyle>
                 <Switch size="small" />
@@ -253,7 +275,11 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
             {...formItemLayout}
           >
             <Flex gap={20} align="center">
-          <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
+              <Form.Item
+                name={'maxTokensEnabled'}
+                valuePropName="checked"
+                noStyle
+              >
                 <Switch size="small" />
               </Form.Item>
               <Form.Item noStyle dependencies={['maxTokensEnabled']}>
@@ -274,7 +300,10 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
                           />
                         </Form.Item>
                       </Flex>
-                  <Form.Item name={[...memorizedPrefix, 'max_tokens']} noStyle>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'max_tokens']}
+                        noStyle
+                      >
                         <InputNumber
                           disabled={disabled}
                           className={styles.sliderInputNumber}
@@ -288,6 +317,8 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
               </Form.Item>
             </Flex>
           </Form.Item>
+        </div>
+      </div>
     </>
   );
 };