chore: init chat params

src/pages/playground/components/dynamic-params.tsx

@@ -18,7 +18,7 @@ type ParamsSettingsProps = {
   ref?: any;
   parametersTitle?: React.ReactNode;
   showModelSelector?: boolean;
-  modelList: Global.BaseOption<string>[];
+  modelList?: Global.BaseOption<string>[];
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
   onModelChange?: (model: string) => void;
   paramsConfig?: ParamsSchema[];
@@ -143,6 +143,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                   </span>
                 )}
               </h3>
+              {showModelSelector && (
                 <Form.Item
                   name="model"
                   rules={[
@@ -164,6 +165,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                     label={intl.formatMessage({ id: 'playground.model' })}
                   ></SealSelect>
                 </Form.Item>
+              )}
             </>
           }
           {renderFields}

src/pages/playground/components/ground-left.tsx

@@ -1,25 +1,26 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { useIntl } from '@umijs/max';
-import { useIntl, useSearchParams } from '@umijs/max';
 import { Spin } from 'antd';
 import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState
 } from 'react';
 import { OpenAIViewCode, Roles, generateMessages } from '../config';
+import { ChatParamsConfig } from '../config/params-config';
 import { MessageItem, MessageItemAction } from '../config/types';
+import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
 import useChatCompletion from '../hooks/use-chat-completion';
+import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
+import DynamicParams from './dynamic-params';
 import MessageInput from './message-input';
 import MessageContent from './multiple-chat/message-content';
 import SystemMessage from './multiple-chat/system-message';
-import ParamsSettings from './params-settings';
 import ReferenceParams from './reference-params';
 import ViewCodeModal from './view-code-modal';
 
@@ -32,21 +33,16 @@ interface MessageProps {
 const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const intl = useIntl();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [parameters, setParams] = useState<any>({});
   const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const [actions, setActions] = useState<MessageItemAction[]>([
     'upload',
     'delete',
     'copy'
   ]);
 
-  const { initialize: innitializeParams } = useOverlayScroller();
   const {
     submitMessage,
     handleStopConversation,
@@ -57,6 +53,24 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     messageList,
     loading
   } = useChatCompletion(scroller);
+  const {
+    handleOnValuesChange,
+    formRef,
+    paramsRef,
+    paramsConfig,
+    initialValues,
+    parameters
+  } = useInitLLmMeta(
+    { modelList, isChat: true },
+    {
+      defaultValues: {
+        ...llmInitialValues,
+        model: modelList[0]?.value
+      },
+      defaultParamsConfig: ChatParamsConfig,
+      metaKeys: LLM_METAKEYS
+    }
+  );
 
   useImperativeHandle(ref, () => {
     return {
@@ -93,8 +107,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setShow(false);
   };
 
-  const handleSelectModel = () => {};
-
   const handleOnCheck = (e: any) => {
     const checked = e.target.checked;
     if (checked) {
@@ -104,12 +116,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
@@ -176,7 +182,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             addMessage={handleAddNewMessage}
             handleAbortFetch={handleStopConversation}
             clearAll={handleClear}
-            setModelSelections={handleSelectModel}
           />
         </div>
       </div>
@@ -187,11 +192,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         ref={paramsRef}
       >
         <div className="box">
-          <ParamsSettings
+          <DynamicParams
-            setParams={setParams}
+            ref={formRef}
-            params={parameters}
+            onValuesChange={handleOnValuesChange}
-            selectedModel={selectModel}
+            paramsConfig={paramsConfig}
+            initialValues={initialValues}
             modelList={modelList}
+            showModelSelector={true}
           />
         </div>
       </div>

src/pages/playground/components/multiple-chat/index.tsx

@@ -28,13 +28,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
   const [modelSelections, setModelSelections] = useState<ModelSelectionItem[]>(
     []
   );
-  const [globalParams, setGlobalParams] = useState<Record<string, any>>({
+  const [globalParams, setGlobalParams] = useState<Record<string, any>>({});
-    seed: null,
-    stop: null,
-    temperature: 1,
-    top_p: 1,
-    max_tokens: 1024
-  });
   const [spans, setSpans] = useState<{
     span: number;
     count: number;

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -23,10 +23,13 @@ import React, {
 import 'simplebar-react/dist/simplebar.min.css';
 import { OpenAIViewCode, Roles, generateMessages } from '../../config';
 import CompareContext from '../../config/compare-context';
+import { ChatParamsConfig } from '../../config/params-config';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
+import { LLM_METAKEYS, llmInitialValues } from '../../hooks/config';
 import useChatCompletion from '../../hooks/use-chat-completion';
+import { useInitLLmMeta } from '../../hooks/use-init-meta';
 import '../../style/model-item.less';
-import ParamsSettings from '../params-settings';
+import DynamicParams from '../dynamic-params';
 import ReferenceParams from '../reference-params';
 import ViewCodeModal from '../view-code-modal';
 import MessageContent from './message-content';
@@ -39,8 +42,8 @@ interface ModelItemProps {
   ref: any;
 }
 
-const ModelItem: React.FC<ModelItemProps> = forwardRef(
+const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
-  ({ model, modelList, instanceId }, ref) => {
+  const { modelList, model, instanceId } = props;
   const {
     globalParams,
     setGlobalParams,
@@ -50,12 +53,26 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     modelFullList,
     actions
   } = useContext(CompareContext);
+  const {
+    handleOnValuesChange,
+    handleOnModelChange,
+    setParams,
+    setInitialValues,
+    formRef,
+    paramsConfig,
+    initialValues,
+    parameters
+  } = useInitLLmMeta(props, {
+    defaultValues: {
+      ...llmInitialValues,
+      model: model
+    },
+    defaultParamsConfig: ChatParamsConfig,
+    metaKeys: LLM_METAKEYS
+  });
   const intl = useIntl();
   const isApplyToAllModels = useRef(false);
   const [systemMessage, setSystemMessage] = useState<string>('');
-    const [params, setParams] = useState<Record<string, any>>({
-      model: model
-    });
   const [show, setShow] = useState(false);
   const scroller = useRef<any>(null);
 
@@ -97,7 +114,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         ? { role: Roles.System, content: systemMessage }
         : undefined,
       current: currentMsg,
-        parameters: params
+      parameters: parameters
     });
   };
 
@@ -105,40 +122,32 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     isApplyToAllModels.current = e.target.checked;
     if (e.target.checked) {
       setGlobalParams({
-          ..._.omit(params, 'model')
+        ..._.omit(parameters, 'model')
       });
     }
   };
 
-    const handleOnValuesChange = useCallback(
+  const OnValuesChange = useCallback(
     (changeValues: any, allValues: Record<string, any>) => {
-        if (isApplyToAllModels.current) {
+      handleOnValuesChange(changeValues, {
-          setParams({
+        ...allValues,
-            ...params,
+        model: parameters.model
-            ...allValues
       });
+      if (isApplyToAllModels.current) {
         setGlobalParams({
           ...allValues
         });
-        } else {
-          setParams({
-            ...params,
-            ...changeValues
-          });
       }
     },
-      [params, isApplyToAllModels.current]
+    [parameters, isApplyToAllModels.current]
   );
 
   const handleCloseViewCode = () => {
     setShow(false);
   };
 
-    const handleModelChange = (value: string) => {
+  const onModelChange = (value: string) => {
-      setParams({
+    handleOnModelChange(value);
-        ...params,
-        model: value
-      });
     handleClear();
   };
 
@@ -179,9 +188,17 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
   }, [modelList, intl]);
 
   useEffect(() => {
-      setParams({
+    setParams((prev: any) => {
-        ...params,
+      return {
+        ...prev,
         ...globalParams
+      };
+    });
+    setInitialValues((prev: any) => {
+      return {
+        ...prev,
+        ...globalParams
+      };
     });
   }, [globalParams]);
 
@@ -211,8 +228,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
             style={{ width: '100%' }}
             variant="borderless"
             options={modelFullList}
-              onChange={handleModelChange}
+            onChange={onModelChange}
-              value={params.model}
+            value={parameters.model}
             labelRender={(data) => {
               return (
                 <AutoTooltip
@@ -259,14 +276,14 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           </Dropdown>
           <Popover
             placement="bottomRight"
+            overlayInnerStyle={{ width: 384 }}
             content={
-                <ParamsSettings
+              <DynamicParams
+                ref={formRef}
+                onValuesChange={OnValuesChange}
+                paramsConfig={paramsConfig}
+                initialValues={initialValues}
                 showModelSelector={false}
-                  setParams={setParams}
-                  modelList={modelList}
-                  globalParams={globalParams}
-                  selectedModel={params.model}
-                  onValuesChange={handleOnValuesChange}
               />
             }
             trigger={['click']}
@@ -313,13 +330,12 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         payload={{
           messages: viewCodeMessage
         }}
-          parameters={params}
+        parameters={parameters}
         onCancel={handleCloseViewCode}
         title={intl.formatMessage({ id: 'playground.viewcode' })}
       ></ViewCodeModal>
     </div>
   );
-  }
+});
-);
 
 export default React.memo(ModelItem);

src/pages/playground/hooks/config.ts

@@ -23,7 +23,7 @@ export const llmInitialValues = {
   stop: null,
   temperature: 1,
   top_p: 1,
-  max_tokens: 1024
+  max_tokens: null
 };
 
 export const advancedFieldsDefaultValus = {

src/pages/playground/hooks/use-init-meta.ts

@@ -28,7 +28,9 @@ import {
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
+  model?: string;
   loaded?: boolean;
+  isChat?: boolean;
   ref?: any;
 }
 
@@ -43,7 +45,7 @@ export const useInitLLmMeta = (
   props: MessageProps,
   options: InitMetaOptions
 ) => {
-  const { modelList } = props;
+  const { modelList, model, isChat } = props;
   const {
     metaKeys = {},
     defaultValues = {},
@@ -51,7 +53,9 @@ export const useInitLLmMeta = (
   } = options;
   const formRef = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
+  const defaultModel =
+    searchParams.get('model') ||
+    (isChat ? model ?? modelList?.[0]?.value : model);
   const [modelMeta, setModelMeta] = useState<any>({});
   const [initialValues, setInitialValues] = useState<any>({
     ...defaultValues,
@@ -103,18 +107,12 @@ export const useInitLLmMeta = (
     return fields?.join(',');
   }, [paramsConfig]);
 
-  const handleOnValuesChange = useCallback(
-    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
-      setParams(allValues);
-    },
-    []
-  );
-
   const handleOnModelChange = useCallback(
     (val: string) => {
       if (!val) return;
       const model = modelList.find((item) => item.value === val);
       const { form: initialData, meta } = extractLLMMeta(model?.meta);
+
       setModelMeta(meta || {});
       setInitialValues({
         ...initialData,
@@ -124,8 +122,31 @@ export const useInitLLmMeta = (
         ...initialData,
         model: val
       });
+      const config = defaultParamsConfig.map((item) => {
+        return {
+          ...item,
+          attrs:
+            item.name === 'max_tokens'
+              ? { ...item.attrs, max: meta.max_tokens || 16 * 1024 }
+              : {
+                  ...item.attrs
+                }
+        };
+      });
+      setParamsConfig(config);
     },
-    [modelList]
+    [modelList, defaultParamsConfig]
+  );
+
+  const handleOnValuesChange = useCallback(
+    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
+      if (changeValues.model) {
+        handleOnModelChange(changeValues.model);
+        return;
+      }
+      setParams(allValues);
+    },
+    [handleOnModelChange]
   );
 
   useEffect(() => {
@@ -138,7 +159,7 @@ export const useInitLLmMeta = (
     if (paramsRef.current) {
       innitializeParams(paramsRef.current);
     }
-  }, [paramsRef.current, innitializeParams]);
+  }, [innitializeParams]);
 
   return {
     extractLLMMeta,