From 5f77a0082c4eb97cbe2dfba3b0c39e0685b59c4c Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Mon, 30 Sep 2024 11:44:44 +0800
Subject: [PATCH] fix: models compare system message sync to all

---
 package.json                                  |  2 +-
 src/components/list-input/hint-input.tsx      |  2 ++
 src/components/list-input/index.tsx           |  2 ++
 src/components/list-input/list-item.tsx       |  2 ++
 src/components/seal-form/auto-complete.tsx    |  4 ++--
 src/components/seal-form/input-number.tsx     |  2 +-
 src/components/seal-form/input-search.tsx     |  2 +-
 src/components/seal-form/password.tsx         |  2 +-
 src/components/seal-form/seal-input.tsx       |  4 ++--
 src/components/seal-form/seal-select.tsx      |  2 +-
 src/components/seal-form/seal-textarea.tsx    |  2 +-
 src/locales/en-US/models.ts                   |  6 +++++-
 src/locales/zh-CN/models.ts                   |  6 +++++-
 .../llmodels/components/advance-config.tsx    |  9 +++++++++
 src/pages/llmodels/config/llama-config.ts     |  2 +-
 src/pages/llmodels/config/vllm-config.ts      |  2 +-
 .../multiple-chat/system-message.tsx          | 20 +++++++++----------
 src/pages/playground/style/sys-message.less   |  5 ++++-
 18 files changed, 51 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 9d3ebe54..c2650a95 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "author": "jialin <jialinkuang@126.com>",
+  "author": "jialin",
   "scripts": {
     "build": "max build",
     "dev": "max dev",
diff --git a/src/components/list-input/hint-input.tsx b/src/components/list-input/hint-input.tsx
index e261d4a7..1a9ff9c0 100644
--- a/src/components/list-input/hint-input.tsx
+++ b/src/components/list-input/hint-input.tsx
@@ -6,6 +6,7 @@ interface HintInputProps {
   value: string;
   label?: string;
   onChange: (value: string) => void;
+  placeholder?: string;
   sourceOptions?: Global.HintOptions[];
 }
 
@@ -82,6 +83,7 @@ const HintInput: React.FC<HintInputProps> = (props) => {
 
   return (
     <AutoComplete
+      placeholder={props.placeholder}
       defaultActiveFirstOption={true}
       value={value}
       onInput={handleInput}
diff --git a/src/components/list-input/index.tsx b/src/components/list-input/index.tsx
index e7358ecd..37282847 100644
--- a/src/components/list-input/index.tsx
+++ b/src/components/list-input/index.tsx
@@ -12,6 +12,7 @@ interface ListInputProps {
   description?: string;
   btnText?: string;
   options?: Global.HintOptions[];
+  placeholder?: string;
   onChange: (data: string[]) => void;
 }
 
@@ -75,6 +76,7 @@ const ListInput: React.FC<ListInputProps> = (props) => {
         {_.map(list, (item: any, index: number) => {
           return (
             <ListItem
+              placeholder={props.placeholder}
               options={options}
               key={item.uid}
               value={item.value}
diff --git a/src/components/list-input/list-item.tsx b/src/components/list-input/list-item.tsx
index 196f4a7e..78733f10 100644
--- a/src/components/list-input/list-item.tsx
+++ b/src/components/list-input/list-item.tsx
@@ -10,6 +10,7 @@ interface LabelItemProps {
   onChange: (value: string) => void;
   value: string;
   label?: string;
+  placeholder?: string;
   options?: Global.HintOptions[];
 }
 
@@ -27,6 +28,7 @@ const ListItem: React.FC<LabelItemProps> = (props) => {
         onChange={handleOnChange}
         label={label}
         sourceOptions={options}
+        placeholder={props.placeholder}
       />
       <Button
         size="small"
diff --git a/src/components/seal-form/auto-complete.tsx b/src/components/seal-form/auto-complete.tsx
index be3707a1..eccdbc09 100644
--- a/src/components/seal-form/auto-complete.tsx
+++ b/src/components/seal-form/auto-complete.tsx
@@ -75,7 +75,7 @@ const SealAutoComplete: React.FC<
     <Wrapper
       status={status}
       extra={extra}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
@@ -87,7 +87,7 @@ const SealAutoComplete: React.FC<
         {...rest}
         ref={inputRef}
         placeholder={
-          isFocus ? (
+          isFocus || !label ? (
             <span style={{ paddingLeft: '12px' }}>{placeholder}</span>
           ) : (
             ''
diff --git a/src/components/seal-form/input-number.tsx b/src/components/seal-form/input-number.tsx
index 9f4d394b..49d6279e 100644
--- a/src/components/seal-form/input-number.tsx
+++ b/src/components/seal-form/input-number.tsx
@@ -62,7 +62,7 @@ const SealInputNumber: React.FC<InputNumberProps & SealFormItemProps> = (
   return (
     <Wrapper
       status={status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
diff --git a/src/components/seal-form/input-search.tsx b/src/components/seal-form/input-search.tsx
index 206b0b54..730a4891 100644
--- a/src/components/seal-form/input-search.tsx
+++ b/src/components/seal-form/input-search.tsx
@@ -68,7 +68,7 @@ const SealInputSearch: React.FC<SearchProps & SealFormItemProps> = (props) => {
   return (
     <Wrapper
       status={status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
diff --git a/src/components/seal-form/password.tsx b/src/components/seal-form/password.tsx
index ccd6f5e4..3f9b376c 100644
--- a/src/components/seal-form/password.tsx
+++ b/src/components/seal-form/password.tsx
@@ -57,7 +57,7 @@ const SealPassword: React.FC<InputProps & SealFormItemProps> = (props) => {
   return (
     <Wrapper
       status={status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
diff --git a/src/components/seal-form/seal-input.tsx b/src/components/seal-form/seal-input.tsx
index 17ce221b..d2c4a4fe 100644
--- a/src/components/seal-form/seal-input.tsx
+++ b/src/components/seal-form/seal-input.tsx
@@ -72,7 +72,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
   return (
     <Wrapper
       status={checkStatus || status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
@@ -83,7 +83,7 @@ const SealInput: React.FC<InputProps & SealFormItemProps> = (props) => {
     >
       <Input
         {...rest}
-        placeholder={isFocus ? placeholder : ''}
+        placeholder={isFocus || !label ? placeholder : ''}
         ref={inputRef}
         autoComplete="off"
         onInput={handleInput}
diff --git a/src/components/seal-form/seal-select.tsx b/src/components/seal-form/seal-select.tsx
index 8ab74618..f88c1006 100644
--- a/src/components/seal-form/seal-select.tsx
+++ b/src/components/seal-form/seal-select.tsx
@@ -60,7 +60,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
   return (
     <Wrapper
       status={status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
diff --git a/src/components/seal-form/seal-textarea.tsx b/src/components/seal-form/seal-textarea.tsx
index 4e69d87f..b55b105c 100644
--- a/src/components/seal-form/seal-textarea.tsx
+++ b/src/components/seal-form/seal-textarea.tsx
@@ -79,7 +79,7 @@ const SealTextArea: React.FC<TextAreaProps & SealFormItemProps> = (props) => {
   return (
     <Wrapper
       status={status}
-      label={label || (placeholder as string)}
+      label={label}
       isFocus={isFocus}
       required={required}
       description={description}
diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts
index ca20aa80..625181f6 100644
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@@ -60,5 +60,9 @@ export default {
   'models.form.backend_parameters': 'Backend Parameters',
   'models.search.gguf.tips': '1. GGUF model backend is llama-box(llama.cpp).',
   'models.search.vllm.tips': '2. Non-GGUF model backend is vLLM.',
-  'models.form.ollamalink': 'Find More in Ollama Library'
+  'models.form.ollamalink': 'Find More in Ollama Library',
+  'models.form.backend_parameters.llamabox.placeholder':
+    'e.g., --ctx-size=8192',
+  'models.form.backend_parameters.vllm.placeholder':
+    'e.g., --max-model-len=8192'
 };
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 0dc61ddb..5671e50a 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -59,5 +59,9 @@ export default {
   'models.form.backend_parameters': '后端参数',
   'models.search.gguf.tips': '1. GGUF 模型后端为 llama-box(llama.cpp)',
   'models.search.vllm.tips': '2. 非 GGUF 模型后端为 vLLM',
-  'models.form.ollamalink': '在 Ollama Library 中查找'
+  'models.form.ollamalink': '在 Ollama Library 中查找',
+  'models.form.backend_parameters.llamabox.placeholder':
+    '例如，--ctx-size=8192',
+  'models.form.backend_parameters.vllm.placeholder':
+    '例如，--max-model-len=8192'
 };
diff --git a/src/pages/llmodels/components/advance-config.tsx b/src/pages/llmodels/components/advance-config.tsx
index e33b0a8f..fcc49c4b 100644
--- a/src/pages/llmodels/components/advance-config.tsx
+++ b/src/pages/llmodels/components/advance-config.tsx
@@ -238,6 +238,15 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
         </Form.Item>
         <Form.Item<FormData> name="backend_parameters">
           <ListInput
+            placeholder={
+              backend === backendOptionsMap.llamaBox
+                ? intl.formatMessage({
+                    id: 'models.form.backend_parameters.llamabox.placeholder'
+                  })
+                : intl.formatMessage({
+                    id: 'models.form.backend_parameters.vllm.placeholder'
+                  })
+            }
             btnText="common.button.addParams"
             label={intl.formatMessage({ id: 'models.form.backend_parameters' })}
             dataList={form.getFieldValue('backend_parameters') || []}
diff --git a/src/pages/llmodels/config/llama-config.ts b/src/pages/llmodels/config/llama-config.ts
index c903251e..2af59f07 100644
--- a/src/pages/llmodels/config/llama-config.ts
+++ b/src/pages/llmodels/config/llama-config.ts
@@ -6,7 +6,7 @@ const options = [
   {
     label: '--ctx-size',
     value: '--ctx-size',
-    options: ['8192']
+    options: []
   },
   {
     label: '--flash-attn',
diff --git a/src/pages/llmodels/config/vllm-config.ts b/src/pages/llmodels/config/vllm-config.ts
index 277f04a2..ad10f820 100644
--- a/src/pages/llmodels/config/vllm-config.ts
+++ b/src/pages/llmodels/config/vllm-config.ts
@@ -183,7 +183,7 @@ const options = [
   {
     label: '--max-model-len',
     value: '--max-model-len',
-    options: ['8192']
+    options: []
   },
   {
     label: '--guided-decoding-backend',
diff --git a/src/pages/playground/components/multiple-chat/system-message.tsx b/src/pages/playground/components/multiple-chat/system-message.tsx
index 932ece07..f32ad243 100644
--- a/src/pages/playground/components/multiple-chat/system-message.tsx
+++ b/src/pages/playground/components/multiple-chat/system-message.tsx
@@ -2,7 +2,7 @@ import { CloseOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import '../../style/sys-message.less';
 
 interface SystemMessageProps {
@@ -17,7 +17,7 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
   const { systemMessage, showApplyToAll, setSystemMessage, style, applyToAll } =
     props;
   const intl = useIntl();
-  const [isChange, setIsChange] = useState(false);
+  const [applyToAllModels, setApplyToAllModels] = useState(false);
   const systemMessageRef = React.useRef<any>(null);
   const [autoSize, setAutoSize] = useState<{
     minRows: number;
@@ -44,12 +44,10 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
       maxRows: 1,
       focus: false
     });
-    setIsChange(false);
   };
 
   const handleOnChange = (e: any) => {
     setSystemMessage(e.target.value);
-    setIsChange(true);
   };
 
   const handleClearSystemMessage = () => {
@@ -58,13 +56,14 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
 
   const handleClickCheckbox = (e?: any) => {
     e.preventDefault();
+    setApplyToAllModels(!applyToAllModels);
   };
 
-  const handleApplyToAllModels = (e: any) => {
-    if (e.target.checked) {
+  useEffect(() => {
+    if (applyToAllModels) {
       applyToAll?.(systemMessage);
     }
-  };
+  }, [applyToAllModels]);
 
   return (
     <div
@@ -100,13 +99,14 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
             allowClear={false}
             onChange={handleOnChange}
           ></Input.TextArea>
-          {isChange && showApplyToAll && (
+          {showApplyToAll && (
             <span className="apply-check" onMouseDown={handleClickCheckbox}>
-              <Checkbox onChange={handleApplyToAllModels}>
+              <span className="m-r-5">
                 {intl.formatMessage({
                   id: 'playground.compare.applytoall'
                 })}
-              </Checkbox>
+              </span>
+              <Checkbox checked={applyToAllModels}></Checkbox>
             </span>
           )}
           <Divider style={{ margin: '0' }}></Divider>
diff --git a/src/pages/playground/style/sys-message.less b/src/pages/playground/style/sys-message.less
index 5002a2bf..9c5d435e 100644
--- a/src/pages/playground/style/sys-message.less
+++ b/src/pages/playground/style/sys-message.less
@@ -8,10 +8,13 @@
   .apply-check {
     position: absolute;
     bottom: 10px;
+    display: flex;
     right: 10px;
-    direction: rtl;
     background-color: var(--color-white-1);
     box-shadow: var(--ant-box-shadow-tertiary);
+    align-items: center;
+    padding: 1px 4px;
+    cursor: pointer;
   }
 
   .sys-content-wrap {