fix: language does not refresh after toggling

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

@@ -50,6 +50,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const scroller = useRef<any>(null);
   const currentMessageRef = useRef<any>(null);
   const paramsRef = useRef<any>(null);
+  const messageListLengthCache = useRef<number>(0);
 
   const { initialize, updateScrollerPosition } = useOverlayScroller();
   const { initialize: innitializeParams } = useOverlayScroller();
@@ -68,6 +69,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
+
   const handleNewMessage = (message?: { role: string; content: string }) => {
     const newMessage = message || {
       role:
@@ -247,8 +249,17 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [paramsRef.current, innitializeParams]);
 
   useEffect(() => {
-    updateScrollerPosition();
-  }, [messageList]);
+    if (loading) {
+      updateScrollerPosition();
+    }
+  }, [messageList, loading]);
+
+  useEffect(() => {
+    if (messageList.length > messageListLengthCache.current) {
+      updateScrollerPosition();
+    }
+    messageListLengthCache.current = messageList.length;
+  }, [messageList.length]);
 
   return (
     <div className="ground-left-wrapper">

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

@@ -79,9 +79,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
     const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
     modelRefList.forEach((instanceId: symbol) => {
       const ref = modelRefs.current[instanceId];
-      ref?.setMessageList((preList: any) => {
-        return [...preList, { ...message }];
-      });
+      ref?.addNewMessage(message);
     });
   };
 

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

@@ -65,19 +65,13 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const controllerRef = useRef<any>(null);
     const currentMessageRef = useRef<MessageItem[]>([]);
     const modelScrollRef = useRef<any>(null);
+    const messageListLengthCache = useRef<number>(0);
 
     const { initialize, updateScrollerPosition } = useOverlayScroller();
 
     const setMessageId = () => {
       messageId.current = messageId.current + 1;
     };
-    const maxHeight = useMemo(() => {
-      const total = 72 + 110 + 46 + 16 + 32;
-      if (spans.count < 4) {
-        return `calc(100vh - ${total}px)`;
-      }
-      return `calc(100vh - ${total * 2 + 16}px)`;
-    }, [spans.count]);
 
     const abortFetch = () => {
       controllerRef.current?.abort?.();
@@ -255,6 +249,19 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       currentMessageRef.current = [];
     };
 
+    const addNewMessage = (message: Omit<MessageItem, 'uid'>) => {
+      setMessageId();
+      setMessageList((preList) => {
+        return [
+          ...preList,
+          {
+            ...message,
+            uid: messageId.current
+          }
+        ];
+      });
+    };
+
     const handleCloseViewCode = () => {
       setShow(false);
     };
@@ -345,14 +352,23 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     }, [modelScrollRef.current, initialize]);
 
     useEffect(() => {
-      updateScrollerPosition();
+      if (loadingStatus[instanceId]) {
+        updateScrollerPosition();
+      }
     }, [messageList]);
 
+    useEffect(() => {
+      if (messageList.length > messageListLengthCache.current) {
+        updateScrollerPosition();
+      }
+      messageListLengthCache.current = messageList.length;
+    }, [messageList.length]);
+
     useImperativeHandle(ref, () => {
       return {
         submit: handleSubmit,
         abortFetch,
-        setMessageList,
+        addNewMessage,
         clear: handleClearMessage,
         presetPrompt: handlePresetMessageList,
         setSystemMessage,