From e4bd879686a23209c8ffc81fe57b30bba8d3ffc6 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Mon, 10 Feb 2025 16:49:07 +0800
Subject: [PATCH] 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)
---
 .../components/llm-setting-items/index.tsx    | 495 ++++++++++--------
 1 file changed, 263 insertions(+), 232 deletions(-)

diff --git a/web/src/components/llm-setting-items/index.tsx b/web/src/components/llm-setting-items/index.tsx
index f665aa0b1..158761c3e 100644
--- a/web/src/components/llm-setting-items/index.tsx
+++ b/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,239 +56,269 @@ const LlmSettingItems = ({ prefix, formItemLayout = {} }: IProps) => {
       >
         <Select options={modelOptions} showSearch />
       </Form.Item>
-      <Divider></Divider>
-      <Form.Item
-        label={t('freedom')}
-        name="parameter"
-        tooltip={t('freedomTip')}
-        {...formItemLayout}
-        initialValue={ModelVariableType.Precise}
-      >
-        <Select<ModelVariableType>
-          options={parameterOptions}
-          onChange={handleParametersChange}
-        />
-      </Form.Item>
-      <Form.Item
-        label={t('temperature')}
-        tooltip={t('temperatureTip')}
-        {...formItemLayout}
-      >
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'temperatureEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['temperatureEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('temperatureEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={[...memorizedPrefix, 'temperature']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={[...memorizedPrefix, 'temperature']} noStyle>
-                    <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')} {...formItemLayout}>
-        <Flex gap={20} align="center">
-          <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 name={[...memorizedPrefix, 'top_p']} noStyle>
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
-                    <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')}
-        {...formItemLayout}
-      >
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'presencePenaltyEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('presencePenaltyEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={[...memorizedPrefix, 'presence_penalty']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item
-                    name={[...memorizedPrefix, 'presence_penalty']}
-                    noStyle
-                  >
-                    <InputNumber
-                      className={styles.sliderInputNumber}
-                      max={1}
-                      min={0}
-                      step={0.01}
-                      disabled={disabled}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
-          </Form.Item>
-        </Flex>
-      </Form.Item>
-      <Form.Item
-        label={t('frequencyPenalty')}
-        tooltip={t('frequencyPenaltyTip')}
-        {...formItemLayout}
-      >
-        <Flex gap={20} align="center">
-          <Form.Item
-            name={'frequencyPenaltyEnabled'}
-            valuePropName="checked"
-            noStyle
-          >
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('frequencyPenaltyEnabled');
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={[...memorizedPrefix, 'frequency_penalty']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={1}
-                        step={0.01}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item
-                    name={[...memorizedPrefix, 'frequency_penalty']}
-                    noStyle
-                  >
-                    <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')}
-        {...formItemLayout}
-      >
-        <Flex gap={20} align="center">
-          <Form.Item name={'maxTokensEnabled'} valuePropName="checked" noStyle>
-            <Switch size="small" />
-          </Form.Item>
-          <Form.Item noStyle dependencies={['maxTokensEnabled']}>
-            {({ getFieldValue }) => {
-              const disabled = !getFieldValue('maxTokensEnabled');
+      <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')}
+              initialValue={ModelVariableType.Precise}
+              labelCol={{ span: 0 }}
+              wrapperCol={{ span: 24 }}
+              className="m-0"
+            >
+              <Select<ModelVariableType>
+                options={parameterOptions}
+                onChange={handleParametersChange}
+              />
+            </Form.Item>
+          </div>
+        </div>
 
-              return (
-                <>
-                  <Flex flex={1}>
-                    <Form.Item
-                      name={[...memorizedPrefix, 'max_tokens']}
-                      noStyle
-                    >
-                      <Slider
-                        className={styles.variableSlider}
-                        max={128000}
-                        disabled={disabled}
-                      />
-                    </Form.Item>
-                  </Flex>
-                  <Form.Item name={[...memorizedPrefix, 'max_tokens']} noStyle>
-                    <InputNumber
-                      disabled={disabled}
-                      className={styles.sliderInputNumber}
-                      max={128000}
-                      min={0}
-                    />
-                  </Form.Item>
-                </>
-              );
-            }}
+        <div className="pr-2">
+          <Form.Item
+            label={t('temperature')}
+            tooltip={t('temperatureTip')}
+            {...formItemLayout}
+          >
+            <Flex gap={20} align="center">
+              <Form.Item
+                name={'temperatureEnabled'}
+                valuePropName="checked"
+                noStyle
+              >
+                <Switch size="small" />
+              </Form.Item>
+              <Form.Item noStyle dependencies={['temperatureEnabled']}>
+                {({ getFieldValue }) => {
+                  const disabled = !getFieldValue('temperatureEnabled');
+                  return (
+                    <>
+                      <Flex flex={1}>
+                        <Form.Item
+                          name={[...memorizedPrefix, 'temperature']}
+                          noStyle
+                        >
+                          <Slider
+                            className={styles.variableSlider}
+                            max={1}
+                            step={0.01}
+                            disabled={disabled}
+                          />
+                        </Form.Item>
+                      </Flex>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'temperature']}
+                        noStyle
+                      >
+                        <InputNumber
+                          className={styles.sliderInputNumber}
+                          max={1}
+                          min={0}
+                          step={0.01}
+                          disabled={disabled}
+                        />
+                      </Form.Item>
+                    </>
+                  );
+                }}
+              </Form.Item>
+            </Flex>
           </Form.Item>
-        </Flex>
-      </Form.Item>
+          <Form.Item
+            label={t('topP')}
+            tooltip={t('topPTip')}
+            {...formItemLayout}
+          >
+            <Flex gap={20} align="center">
+              <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 name={[...memorizedPrefix, 'top_p']} noStyle>
+                          <Slider
+                            className={styles.variableSlider}
+                            max={1}
+                            step={0.01}
+                            disabled={disabled}
+                          />
+                        </Form.Item>
+                      </Flex>
+                      <Form.Item name={[...memorizedPrefix, 'top_p']} noStyle>
+                        <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')}
+            {...formItemLayout}
+          >
+            <Flex gap={20} align="center">
+              <Form.Item
+                name={'presencePenaltyEnabled'}
+                valuePropName="checked"
+                noStyle
+              >
+                <Switch size="small" />
+              </Form.Item>
+              <Form.Item noStyle dependencies={['presencePenaltyEnabled']}>
+                {({ getFieldValue }) => {
+                  const disabled = !getFieldValue('presencePenaltyEnabled');
+                  return (
+                    <>
+                      <Flex flex={1}>
+                        <Form.Item
+                          name={[...memorizedPrefix, 'presence_penalty']}
+                          noStyle
+                        >
+                          <Slider
+                            className={styles.variableSlider}
+                            max={1}
+                            step={0.01}
+                            disabled={disabled}
+                          />
+                        </Form.Item>
+                      </Flex>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'presence_penalty']}
+                        noStyle
+                      >
+                        <InputNumber
+                          className={styles.sliderInputNumber}
+                          max={1}
+                          min={0}
+                          step={0.01}
+                          disabled={disabled}
+                        />
+                      </Form.Item>
+                    </>
+                  );
+                }}
+              </Form.Item>
+            </Flex>
+          </Form.Item>
+          <Form.Item
+            label={t('frequencyPenalty')}
+            tooltip={t('frequencyPenaltyTip')}
+            {...formItemLayout}
+          >
+            <Flex gap={20} align="center">
+              <Form.Item
+                name={'frequencyPenaltyEnabled'}
+                valuePropName="checked"
+                noStyle
+              >
+                <Switch size="small" />
+              </Form.Item>
+              <Form.Item noStyle dependencies={['frequencyPenaltyEnabled']}>
+                {({ getFieldValue }) => {
+                  const disabled = !getFieldValue('frequencyPenaltyEnabled');
+                  return (
+                    <>
+                      <Flex flex={1}>
+                        <Form.Item
+                          name={[...memorizedPrefix, 'frequency_penalty']}
+                          noStyle
+                        >
+                          <Slider
+                            className={styles.variableSlider}
+                            max={1}
+                            step={0.01}
+                            disabled={disabled}
+                          />
+                        </Form.Item>
+                      </Flex>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'frequency_penalty']}
+                        noStyle
+                      >
+                        <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')}
+            {...formItemLayout}
+          >
+            <Flex gap={20} align="center">
+              <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
+                          name={[...memorizedPrefix, 'max_tokens']}
+                          noStyle
+                        >
+                          <Slider
+                            className={styles.variableSlider}
+                            max={128000}
+                            disabled={disabled}
+                          />
+                        </Form.Item>
+                      </Flex>
+                      <Form.Item
+                        name={[...memorizedPrefix, 'max_tokens']}
+                        noStyle
+                      >
+                        <InputNumber
+                          disabled={disabled}
+                          className={styles.sliderInputNumber}
+                          max={128000}
+                          min={0}
+                        />
+                      </Form.Item>
+                    </>
+                  );
+                }}
+              </Form.Item>
+            </Flex>
+          </Form.Item>
+        </div>
+      </div>
     </>
   );
 };