fix: models compare system message sync to all

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}

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}

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"

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>
           ) : (
             ''

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}

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}

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}

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}

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}

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}

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'
 };

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'
 };

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') || []}

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',

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',

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>

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 {