From 64e2cfa35ab76f382564126484f878506a0bb358 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 7 Nov 2025 11:54:11 +0800
Subject: [PATCH] fix: auto expand the fields group

---
 src/assets/styles/common.less                 |  8 +--
 src/components/seal-form/base/select.tsx      | 10 ++-
 .../components/not-found-content.tsx          |  5 +-
 src/config/index.ts                           |  9 +++
 src/hooks/use-app-utils.ts                    |  7 ++
 src/locales/en-US/models.ts                   |  4 +-
 src/locales/ja-JP/models.ts                   |  7 +-
 src/locales/ru-RU/models.ts                   | 30 ++++++---
 src/locales/zh-CN/models.ts                   |  4 +-
 src/pages/backends/components/add-modal.tsx   | 10 ++-
 src/pages/backends/config/index.ts            | 15 ++++-
 src/pages/backends/forms/basic.tsx            | 66 ++++++++++---------
 src/pages/backends/forms/index.tsx            |  1 -
 src/pages/llmodels/forms/basic.tsx            |  6 ++
 src/pages/llmodels/forms/index.tsx            | 18 +++--
 .../llmodels/forms/speculative-decode.tsx     |  4 +-
 src/pages/llmodels/index.tsx                  | 53 +++++++--------
 .../playground/components/ground-reranker.tsx | 12 ++--
 18 files changed, 168 insertions(+), 101 deletions(-)

diff --git a/src/assets/styles/common.less b/src/assets/styles/common.less
index 7bc5c764..8ed396d6 100644
--- a/src/assets/styles/common.less
+++ b/src/assets/styles/common.less
@@ -229,6 +229,10 @@
   margin-bottom: 0;
 }
 
+.m-t-0 {
+  margin-top: 0;
+}
+
 .m-b-16 {
   margin-bottom: 16px;
 }
@@ -278,10 +282,6 @@
   gap: 16px;
 }
 
-.gap-4 {
-  gap: 4px;
-}
-
 .color-white-tertiary {
   color: var(--color-white-tertiary);
 }
diff --git a/src/components/seal-form/base/select.tsx b/src/components/seal-form/base/select.tsx
index 7a78b6c5..7132f553 100644
--- a/src/components/seal-form/base/select.tsx
+++ b/src/components/seal-form/base/select.tsx
@@ -2,9 +2,11 @@ import IconFont from '@/components/icon-font';
 import type { SelectProps } from 'antd';
 import { Select } from 'antd';
 import React, { forwardRef, useImperativeHandle } from 'react';
+import NotFoundContent from '../components/not-found-content';
 
 const BaseSelect: React.FC<SelectProps & { ref?: any }> = forwardRef(
   (props, ref) => {
+    const { notFoundContent, loading, ...restProps } = props;
     const [isFocus, setIsFocus] = React.useState(false);
     const inputRef = React.useRef<any>(null);
 
@@ -32,7 +34,13 @@ const BaseSelect: React.FC<SelectProps & { ref?: any }> = forwardRef(
 
     return (
       <Select
-        {...props}
+        {...restProps}
+        notFoundContent={
+          <NotFoundContent
+            loading={loading}
+            notFoundContent={notFoundContent}
+          />
+        }
         ref={inputRef}
         onFocus={handleFocus}
         onBlur={handleBlur}
diff --git a/src/components/seal-form/components/not-found-content.tsx b/src/components/seal-form/components/not-found-content.tsx
index 6d7bc13d..63e95c40 100644
--- a/src/components/seal-form/components/not-found-content.tsx
+++ b/src/components/seal-form/components/not-found-content.tsx
@@ -34,7 +34,10 @@ const NotFoundContent: React.FC<{
   return (
     <NoContent>
       {notFoundContent || (
-        <Empty description={intl.formatMessage({ id: 'common.data.empty' })} />
+        <Empty
+          description={intl.formatMessage({ id: 'common.data.empty' })}
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+        />
       )}
     </NoContent>
   );
diff --git a/src/config/index.ts b/src/config/index.ts
index 126766ac..cccb8a30 100644
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -62,3 +62,12 @@ export const specialCharacterReg = /(?=.*[\W_])/;
 export const noSpaceReg = /(?=\S+$)/;
 
 export const lengthReg = /^.{6,12}$/;
+
+/**
+ * Model name rules:
+ * 1. no more than 63 characters
+ * 2. contain only alphanumeric characters, '-', '_', and '.'
+ * 3. start and end with an alphanumeric character
+ */
+export const modelNameReg =
+  /^[A-Za-z0-9](?:[A-Za-z0-9._-]{0,61}[A-Za-z0-9])?$/g;
diff --git a/src/hooks/use-app-utils.ts b/src/hooks/use-app-utils.ts
index ffbfbeab..8a59a47a 100644
--- a/src/hooks/use-app-utils.ts
+++ b/src/hooks/use-app-utils.ts
@@ -7,6 +7,13 @@ const useAppUtils = () => {
   const intl = useIntl();
   const [messageApi, contextHolder] = message.useMessage();
 
+  /**
+   *
+   * @param type Array<'input' | 'select'>
+   * @param name
+   * @param locale boolean
+   * @returns
+   */
   const getRuleMessage = (
     type: MessageType | MessageType[],
     name: string,
diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts
index 743b2684..63d91847 100644
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@@ -238,5 +238,7 @@ export default {
   'models.form.draftModel.tips':
     'You can enter a local path (e.g., /path/to/model) or select a model from Hugging Face or ModelScope (e.g., Tengyunw/qwen3_8b_eagle3). The system will automatically match based on the primary model source.',
   'models.form.quantization': 'Quantization',
-  'models.form.backend.custom': 'User-defined'
+  'models.form.backend.custom': 'User-defined',
+  'models.form.rules.name':
+    'Up to 63 characters; letters, numbers, dots (.), underscores (_), and hyphens (-) only; must start and end with an alphanumeric character.'
 };
diff --git a/src/locales/ja-JP/models.ts b/src/locales/ja-JP/models.ts
index eaa7cade..5a84ad1a 100644
--- a/src/locales/ja-JP/models.ts
+++ b/src/locales/ja-JP/models.ts
@@ -238,7 +238,9 @@ export default {
   'models.form.draftModel.tips':
     'You can enter a local path (e.g., /path/to/model) or select a model from Hugging Face or ModelScope (e.g., Tengyunw/qwen3_8b_eagle3). The system will automatically match based on the primary model source.',
   'models.form.quantization': 'Quantization',
-  'models.form.backend.custom': 'User Defined'
+  'models.form.backend.custom': 'User Defined',
+  'models.form.rules.name':
+    'Up to 63 characters; letters, numbers, dots (.), underscores (_), and hyphens (-) only; must start and end with an alphanumeric character.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -306,5 +308,6 @@ export default {
 // 45. 'models.form.draftModel.placeholder': 'Please select or enter a draft model',
 // 46. 'models.form.draftModel.tips': 'You can enter a local path (e.g., /path/to/model) or select a model from Hugging Face or ModelScope (e.g., Tengyunw/qwen3_8b_eagle3). The system will automatically match based on the primary model source.'
 // 47. 'models.form.quantization': 'Quantization',
-// 48. 'models.form.backend.custom': 'User Defined'
+// 48. 'models.form.backend.custom': 'User Defined',
+// 49. 'models.form.rules.name': 'Up to 63 characters; letters, numbers, dots (.), underscores (_), and hyphens (-) only; must start and end with an alphanumeric character.'
 // ========== End of To-Do List ==========
diff --git a/src/locales/ru-RU/models.ts b/src/locales/ru-RU/models.ts
index c187267b..75bca1d9 100644
--- a/src/locales/ru-RU/models.ts
+++ b/src/locales/ru-RU/models.ts
@@ -208,13 +208,17 @@ export default {
   'models.mymodels.status.inactive': 'Остановлен',
   'models.mymodels.status.degrade': 'Аномальный',
   'models.mymodels.status.active': 'Активен',
-  'models.form.kvCache.tips': 'Расширенный KV-кэш и спекулятивное декодирование доступны только со встроенными бэкендами (vLLM / SGLang). Переключите бэкенд в <span class="bold-text">Расширенных</span> настройках, чтобы включить их.',
-  'models.form.kvCache.tips2': 'Поддерживается только при использовании встроенных бэкендов вывода (vLLM или SGLang).',
+  'models.form.kvCache.tips':
+    'Расширенный KV-кэш и спекулятивное декодирование доступны только со встроенными бэкендами (vLLM / SGLang). Переключите бэкенд в <span class="bold-text">Расширенных</span> настройках, чтобы включить их.',
+  'models.form.kvCache.tips2':
+    'Поддерживается только при использовании встроенных бэкендов вывода (vLLM или SGLang).',
   'models.form.scheduling': 'Планирование',
   'models.form.ramRatio': 'Соотношение ОЗУ к VRAM',
   'models.form.ramSize': 'Максимальный размер ОЗУ (ГиБ)',
-  'models.form.ramRatio.tips': 'Соотношение системной оперативной памяти к видеопамяти GPU, используемое для KV-кэша. Например, 2.0 означает, что кэш в ОЗУ может быть в два раза больше, чем в видеопамяти GPU.',
-  'models.form.ramSize.tips': 'Максимальный размер KV-кэша, хранящегося в системной памяти (ГиБ). Если задано, это значение переопределяет "{content}".',
+  'models.form.ramRatio.tips':
+    'Соотношение системной оперативной памяти к видеопамяти GPU, используемое для KV-кэша. Например, 2.0 означает, что кэш в ОЗУ может быть в два раза больше, чем в видеопамяти GPU.',
+  'models.form.ramSize.tips':
+    'Максимальный размер KV-кэша, хранящегося в системной памяти (ГиБ). Если задано, это значение переопределяет "{content}".',
   'models.form.chunkSize.tips': 'Количество токенов на чанк KV-кэша.',
   'models.form.mode': 'Режим',
   'models.form.algorithm': 'Алгоритм',
@@ -225,15 +229,21 @@ export default {
   'models.form.mode.throughput': 'Пропускная способность',
   'models.form.mode.latency': 'Задержка',
   'models.form.mode.baseline': 'Стандартный',
-  'models.form.mode.throughput.tips': 'оптимизировано для высокой пропускной способности при высокой конкурентности запросов.',
-  'models.form.mode.latency.tips': 'оптимизировано для низкой задержки при низкой конкурентности запросов.',
-  'models.form.mode.baseline.tips': 'наиболее совместимый вариант с полной точностью.',
+  'models.form.mode.throughput.tips':
+    'оптимизировано для высокой пропускной способности при высокой конкурентности запросов.',
+  'models.form.mode.latency.tips':
+    'оптимизировано для низкой задержки при низкой конкурентности запросов.',
+  'models.form.mode.baseline.tips':
+    'наиболее совместимый вариант с полной точностью.',
   'models.form.draftModel.placeholder': 'Выберите или введите черновую модель',
-  'models.form.draftModel.tips': 'Вы можете ввести локальный путь (например, /path/to/model) или выбрать модель из Hugging Face или ModelScope (например, Tengyunw/qwen3_8b_eagle3). Система автоматически сопоставит модель на основе источника основной модели.',
+  'models.form.draftModel.tips':
+    'Вы можете ввести локальный путь (например, /path/to/model) или выбрать модель из Hugging Face или ModelScope (например, Tengyunw/qwen3_8b_eagle3). Система автоматически сопоставит модель на основе источника основной модели.',
   'models.form.quantization': 'Квантование',
-  'models.form.backend.custom': 'Пользовательский'
+  'models.form.backend.custom': 'Пользовательский',
+  'models.form.rules.name':
+    'Up to 63 characters; letters, numbers, dots (.), underscores (_), and hyphens (-) only; must start and end with an alphanumeric character.'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
-
+// 1. 'models.form.rules.name': 'Up to 63 characters; letters, numbers, dots (.), underscores (_), and hyphens (-) only; must start and end with an alphanumeric character.'
 // ========== End of To-Do List ==========
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 3e66bf48..5dc6ed52 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -225,5 +225,7 @@ export default {
   'models.form.draftModel.tips':
     '可填写本地路径（如 /path/to/model），或从 Hugging Face、ModelScope 选择模型（如 Tengyunw/qwen3_8b_eagle3）。系统将根据主模型来源自动匹配。',
   'models.form.quantization': '量化',
-  'models.form.backend.custom': '用户定义'
+  'models.form.backend.custom': '用户定义',
+  'models.form.rules.name':
+    '长度不超过 63 个字符，只能包含字母、数字、点（.）、下划线（_）和连字符（-），且必须以字母或数字开头和结尾。'
 };
diff --git a/src/pages/backends/components/add-modal.tsx b/src/pages/backends/components/add-modal.tsx
index 5c4139fa..db20f7a1 100644
--- a/src/pages/backends/components/add-modal.tsx
+++ b/src/pages/backends/components/add-modal.tsx
@@ -9,7 +9,11 @@ import _ from 'lodash';
 import React, { useEffect, useId, useRef, useState } from 'react';
 import styled from 'styled-components';
 import ColumnWrapper from '../../_components/column-wrapper';
-import { backendFields, json2Yaml } from '../config';
+import {
+  builtInBackendFields,
+  customBackendFields,
+  json2Yaml
+} from '../config';
 import { FormData, ListItem } from '../config/types';
 import BackendForm from '../forms';
 import ImportYAML from './import-yaml';
@@ -151,10 +155,10 @@ const AddModal: React.FC<AddModalProps> = (props) => {
       );
 
       if (currentData?.is_built_in) {
-        return json2Yaml(_.pick(copyValues, backendFields));
+        return json2Yaml(_.pick(copyValues, builtInBackendFields));
       }
       return json2Yaml(
-        _.pick(copyValues, [...backendFields, 'default_version'])
+        _.pick(copyValues, [...customBackendFields, 'default_version'])
       );
     };
 
diff --git a/src/pages/backends/config/index.ts b/src/pages/backends/config/index.ts
index 4cc6e9f2..ef09f8c8 100644
--- a/src/pages/backends/config/index.ts
+++ b/src/pages/backends/config/index.ts
@@ -109,13 +109,26 @@ export const customIcons = [
   '≥'
 ];
 
-export const backendFields = [
+/**
+ * custom backend fields for config yaml
+ */
+export const customBackendFields = [
   'description',
   'health_check_path',
   'default_run_command',
   'version_configs',
   'default_backend_param'
 ];
+
+/**
+ * built-in backend fields for config yaml
+ */
+export const builtInBackendFields = [
+  'description',
+  'version_configs',
+  'default_backend_param'
+];
+
 export const frameworks = [
   {
     label: 'CUDA',
diff --git a/src/pages/backends/forms/basic.tsx b/src/pages/backends/forms/basic.tsx
index d9cf31ea..823133fc 100644
--- a/src/pages/backends/forms/basic.tsx
+++ b/src/pages/backends/forms/basic.tsx
@@ -37,38 +37,40 @@ const BasicForm: React.FC<AddModalProps> = ({ action, currentData }) => {
           required
         ></SealInput.Input>
       </Form.Item>
-      <Form.Item<FormData>
-        name="health_check_path"
-        rules={[{ required: false }]}
-      >
-        <SealInput.Input
-          trim
-          placeholder={intl.formatMessage(
-            { id: 'common.help.default' },
-            { content: '/v1/models' }
-          )}
-          label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
-        ></SealInput.Input>
-      </Form.Item>
-
-      <Form.Item name="default_run_command">
-        <SealTextArea
-          scaleSize={true}
-          alwaysFocus={true}
-          description={intl.formatMessage({
-            id: 'backend.form.defaultExecuteCommand.tips'
-          })}
-          placeholder={intl.formatMessage(
-            { id: 'common.help.eg' },
-            { content: 'vllm serve {{model_path}} --port {{port}}' }
-          )}
-          autoSize={{ minRows: 2, maxRows: 4 }}
-          label={intl.formatMessage({
-            id: 'backend.form.defaultExecuteCommand'
-          })}
-        ></SealTextArea>
-      </Form.Item>
-
+      {!currentData?.is_built_in && (
+        <>
+          <Form.Item<FormData>
+            name="health_check_path"
+            rules={[{ required: false }]}
+          >
+            <SealInput.Input
+              trim
+              placeholder={intl.formatMessage(
+                { id: 'common.help.default' },
+                { content: '/v1/models' }
+              )}
+              label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
+            ></SealInput.Input>
+          </Form.Item>
+          <Form.Item name="default_run_command">
+            <SealTextArea
+              scaleSize={true}
+              alwaysFocus={true}
+              description={intl.formatMessage({
+                id: 'backend.form.defaultExecuteCommand.tips'
+              })}
+              placeholder={intl.formatMessage(
+                { id: 'common.help.eg' },
+                { content: 'vllm serve {{model_path}} --port {{port}}' }
+              )}
+              autoSize={{ minRows: 2, maxRows: 4 }}
+              label={intl.formatMessage({
+                id: 'backend.form.defaultExecuteCommand'
+              })}
+            ></SealTextArea>
+          </Form.Item>
+        </>
+      )}
       <Form.Item<FormData>
         name="default_backend_param"
         rules={[{ required: false }]}
diff --git a/src/pages/backends/forms/index.tsx b/src/pages/backends/forms/index.tsx
index f4a9e6ee..52e038b3 100644
--- a/src/pages/backends/forms/index.tsx
+++ b/src/pages/backends/forms/index.tsx
@@ -51,7 +51,6 @@ const BackendForm: React.FC<AddModalProps> = forwardRef(
         }
         return item;
       });
-
       onFinish(data);
     };
 
diff --git a/src/pages/llmodels/forms/basic.tsx b/src/pages/llmodels/forms/basic.tsx
index dfb34a35..8ae7badf 100644
--- a/src/pages/llmodels/forms/basic.tsx
+++ b/src/pages/llmodels/forms/basic.tsx
@@ -1,5 +1,6 @@
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
+import { modelNameReg } from '@/config';
 import useAppUtils from '@/hooks/use-app-utils';
 import {
   ClusterStatusLabelMap,
@@ -65,10 +66,15 @@ const BasicForm: React.FC<BasicFormProps> = (props) => {
           {
             required: true,
             message: getRuleMessage('input', 'common.table.name')
+          },
+          {
+            pattern: modelNameReg,
+            message: intl.formatMessage({ id: 'models.form.rules.name' })
           }
         ]}
       >
         <SealInput.Input
+          description={intl.formatMessage({ id: 'models.form.rules.name' })}
           label={intl.formatMessage({
             id: 'common.table.name'
           })}
diff --git a/src/pages/llmodels/forms/index.tsx b/src/pages/llmodels/forms/index.tsx
index e01c0b86..638f8d32 100644
--- a/src/pages/llmodels/forms/index.tsx
+++ b/src/pages/llmodels/forms/index.tsx
@@ -30,12 +30,10 @@ import BasicForm from './basic';
 import Performance from './performance';
 import ScheduleTypeForm from './schedule-type';
 
-const advancedRequiredFields = [
-  'gpu_selector',
-  'backend',
-  'image_name',
-  'run_command'
-];
+const advancedRequiredFields = ['backend', 'image_name', 'run_command'];
+
+const scheduleRequiredFields = ['gpu_selector'];
+
 const performanceRequiredFields = ['speculative_config'];
 
 const SegmentedInner = styled(Segmented)`
@@ -281,6 +279,14 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
         performanceRequiredFields.includes(name)
       );
 
+      const isScheduleRequired = names.some((name: string) =>
+        scheduleRequiredFields.includes(name)
+      );
+
+      if (isScheduleRequired) {
+        collapseKeys.push('scheduling');
+      }
+
       if (isPerformanceRequired) {
         collapseKeys.push('performance');
       }
diff --git a/src/pages/llmodels/forms/speculative-decode.tsx b/src/pages/llmodels/forms/speculative-decode.tsx
index 762bbfe0..1cfc784d 100644
--- a/src/pages/llmodels/forms/speculative-decode.tsx
+++ b/src/pages/llmodels/forms/speculative-decode.tsx
@@ -40,7 +40,7 @@ const SpeculativeDecode = () => {
   const onValuesChangeDebounced = _.debounce(() => {
     const allValues = form.getFieldsValue();
     onValuesChange?.({}, allValues);
-  }, 200);
+  }, 150);
 
   const handleSpeculativeEnabledChange = (e: any) => {
     if (e.target.checked) {
@@ -57,8 +57,8 @@ const SpeculativeDecode = () => {
       });
     } else {
       speculativeConfigRef.current = form.getFieldValue('speculative_config');
-      onValuesChangeDebounced();
     }
+    onValuesChangeDebounced();
   };
 
   const handleAlgorithemChange = (value: string) => {
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
index 32c2e535..6f3c0b02 100644
--- a/src/pages/llmodels/index.tsx
+++ b/src/pages/llmodels/index.tsx
@@ -3,9 +3,10 @@ import useSetChunkRequest from '@/hooks/use-chunk-request';
 import useUpdateChunkedList from '@/hooks/use-update-chunk-list';
 import { queryWorkersList } from '@/pages/resources/apis';
 import { ListItem as WokerListItem } from '@/pages/resources/config/types';
+import { useMemoizedFn } from 'ahooks';
 import _ from 'lodash';
 import qs from 'query-string';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   MODELS_API,
   MODEL_INSTANCE_API,
@@ -73,7 +74,7 @@ const Models: React.FC = () => {
     setDataList: setModelInstances
   });
 
-  const getAllModelInstances = useCallback(async () => {
+  const getAllModelInstances = useMemoizedFn(async () => {
     try {
       instancesToken.current?.cancel?.();
       instancesToken.current = createAxiosToken();
@@ -89,9 +90,9 @@ const Models: React.FC = () => {
     } catch (error) {
       // ignore
     }
-  }, []);
+  });
 
-  const fetchData = useCallback(
+  const fetchData = useMemoizedFn(
     async (params?: {
       loadingVal?: boolean;
       query?: {
@@ -156,8 +157,7 @@ const Models: React.FC = () => {
           });
         }
       }
-    },
-    [queryParams]
+    }
   );
 
   const handleQueryChange = (params: any) => {
@@ -168,14 +168,13 @@ const Models: React.FC = () => {
     fetchData({ query: { ...queryParams, ...params } });
   };
 
-  const handlePageChange = useCallback(
+  const handlePageChange = useMemoizedFn(
     (page: number, pageSize: number | undefined) => {
       handleQueryChange({
         page: page,
         perPage: pageSize || 10
       });
-    },
-    [queryParams]
+    }
   );
 
   const updateHandler = (list: any) => {
@@ -191,7 +190,7 @@ const Models: React.FC = () => {
     });
   };
 
-  const createModelsChunkRequest = useCallback(
+  const createModelsChunkRequest = useMemoizedFn(
     async (params?: {
       search: string;
       categories: any[];
@@ -212,11 +211,10 @@ const Models: React.FC = () => {
       } catch (error) {
         // ignore
       }
-    },
-    [queryParams.categories, queryParams.search]
+    }
   );
 
-  const createModelsInstanceChunkRequest = useCallback(async () => {
+  const createModelsInstanceChunkRequest = useMemoizedFn(async () => {
     chunkInstanceRequedtRef.current?.current?.cancel?.();
     try {
       chunkInstanceRequedtRef.current = setModelInstanceChunkRequest({
@@ -227,18 +225,18 @@ const Models: React.FC = () => {
     } catch (error) {
       // ignore
     }
-  }, [updateInstanceHandler]);
+  });
 
-  const handleOnViewLogs = useCallback(() => {
+  const handleOnViewLogs = useMemoizedFn(() => {
     isPageHidden.current = true;
     chunkRequedtRef.current?.current?.cancel?.();
     cacheDataListRef.current = [];
     cacheInsDataListRef.current = [];
     chunkInstanceRequedtRef.current?.current?.cancel?.();
     instancesToken.current?.cancel?.();
-  }, []);
+  });
 
-  const handleOnCancelViewLogs = useCallback(async () => {
+  const handleOnCancelViewLogs = useMemoizedFn(async () => {
     isPageHidden.current = false;
     await getAllModelInstances();
     await createModelsInstanceChunkRequest();
@@ -246,23 +244,20 @@ const Models: React.FC = () => {
     fetchData({
       loadingVal: false
     });
-  }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
+  });
 
-  const handleSearchBySilent = useCallback(async () => {
+  const handleSearchBySilent = useMemoizedFn(async () => {
     await new Promise((resolve) => {
       setTimeout(resolve, 300);
     });
     fetchData({
       loadingVal: false
     });
-  }, [fetchData]);
+  });
 
-  const handleSearch = useCallback(
-    async (params?: any) => {
-      await fetchData(params);
-    },
-    [fetchData]
-  );
+  const handleSearch = useMemoizedFn(async (params?: any) => {
+    await fetchData(params);
+  });
 
   const debounceUpdateFilter = _.debounce((e: any) => {
     handleQueryChange({
@@ -276,7 +271,7 @@ const Models: React.FC = () => {
     });
   }, 350);
 
-  const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);
+  const handleNameChange = useMemoizedFn(debounceUpdateFilter);
 
   const handleCategoryChange = async (value: any) => {
     handleQueryChange({
@@ -369,9 +364,9 @@ const Models: React.FC = () => {
     };
   }, []);
 
-  const setDisableExpand = useCallback((record: any) => {
+  const setDisableExpand = useMemoizedFn((record: any) => {
     return !record?.replicas;
-  }, []);
+  });
 
   useEffect(() => {
     const handleVisibilityChange = async () => {
diff --git a/src/pages/playground/components/ground-reranker.tsx b/src/pages/playground/components/ground-reranker.tsx
index 3c83c0bd..6ac6141f 100644
--- a/src/pages/playground/components/ground-reranker.tsx
+++ b/src/pages/playground/components/ground-reranker.tsx
@@ -259,11 +259,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     );
   };
 
-  const handleStopConversation = () => {
-    requestToken.current?.cancel?.();
-    setLoading(false);
-  };
-
   const submitMessage = async (query: string) => {
     try {
       setIsEmptyQuery(!queryValue);
@@ -507,9 +502,12 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
             )}
           </SearchInputWrapper>
         </div>
-        <div className="center" ref={scroller}>
+        <div className="center" ref={scroller} style={{ marginTop: 16 }}>
           <div className="documents">
-            <div className="flex-between m-b-8 doc-header">
+            <div
+              className="flex-between m-b-8 doc-header"
+              style={{ marginTop: 0 }}
+            >
               <h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-0">
                 <span>
                   {intl.formatMessage({ id: 'playground.embedding.documents' })}