fix: chat compare switch model meta

src/pages/playground/components/multiple-chat/active-models.tsx

@@ -14,6 +14,7 @@ interface ActiveModelsProps {
 
 const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
   const { spans, modelSelections, setModelRefs } = props;
+
   return (
     <Row gutter={[16, 0]} style={{ height: '100%' }}>
       {modelSelections.map((model, index) => (
@@ -21,7 +22,8 @@ const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
           span={spans.span}
           key={`${model.value || 'empty'}-${model.uid}`}
           style={{
-            height: spans.count < 4 ? 'calc(100% - 16px)' : 'calc(50% - 16px)'
+            height: spans.count < 4 ? 'calc(100% - 16px)' : 'calc(50% - 16px)',
+            overflow: 'hidden'
           }}
         >
           <ModelItem

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

@@ -47,7 +47,8 @@ interface ModelItemProps {
 }
 
 const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
-  const { modelList, model, instanceId } = props;
+  const { modelList, ...restProps } = props;
+  const { model, instanceId } = restProps;
   const {
     globalParams,
     setGlobalParams,
@@ -66,14 +67,20 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
     paramsConfig,
     initialValues,
     parameters
-  } = useInitLLmMeta(props, {
+  } = useInitLLmMeta(
+    {
+      ...restProps,
+      modelList: modelFullList
+    },
+    {
       defaultValues: {
         ...llmInitialValues,
         model: model
       },
       defaultParamsConfig: ChatParamsConfig,
       metaKeys: LLM_METAKEYS
-  });
+    }
+  );
   const intl = useIntl();
   const isApplyToAllModels = useRef(false);
   const [systemMessage, setSystemMessage] = useState<string>('');

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

@@ -12,13 +12,7 @@ import { generateRandomNumber } from '@/utils';
 import { useSearchParams } from '@umijs/max';
 import { useMemoizedFn } from 'ahooks';
 import _ from 'lodash';
-import React, {
+import React, { useEffect, useMemo, useRef, useState } from 'react';
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from 'react';
 import { ParamsSchema } from '../config/types';
 import {
   IMG_METAKEYS,
@@ -133,8 +127,7 @@ export const useInitLLmMeta = (
     return fields?.join(',');
   }, [paramsConfig]);
 
-  const handleOnModelChange = useCallback(
+  const handleOnModelChange = useMemoizedFn((val: string) => {
-    (val: string) => {
     if (!val) return;
     const model = modelList.find((item) => item.value === val);
     const { form: initialData, meta } = extractLLMMeta(model?.meta);
@@ -159,11 +152,9 @@ export const useInitLLmMeta = (
       };
     });
     setParamsConfig(config);
-    },
+  });
-    [modelList, defaultParamsConfig]
-  );
 
-  const handleOnValuesChange = useCallback(
+  const handleOnValuesChange = useMemoizedFn(
     (changeValues: Record<string, any>, allValues: Record<string, any>) => {
       if (changeValues.model) {
         handleOnModelChange(changeValues.model);
@@ -172,8 +163,7 @@ export const useInitLLmMeta = (
         setParams(allValues);
         setInitialValues(allValues);
       }
-    },
+    }
-    [handleOnModelChange]
   );
 
   useEffect(() => {
@@ -405,8 +395,7 @@ export const useInitImageMeta = (
     return fields?.join(',');
   }, [paramsConfig]);
 
-  const handleOnModelChange = useCallback(
+  const handleOnModelChange = useMemoizedFn((val: string) => {
-    (val: string) => {
     if (!val) return;
     const model = modelList.find((item) => item.value === val);
     const { form: initialData, sizeOptions } = extractIMGMeta(model?.meta);
@@ -431,9 +420,7 @@ export const useInitImageMeta = (
       model: val
     });
     updateCacheFormData(initialData);
-    },
+  });
-    [modelList, isOpenaiCompatible]
-  );
 
   const handleOnValuesChange = useMemoizedFn(
     (changeValues: Record<string, any>, allValues: Record<string, any>) => {