fix: query modelscope files by recursive

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

@@ -1,9 +1,10 @@
-import useContainerScroll from '@/hooks/use-container-scorll';
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { useIntl, useSearchParams } from '@umijs/max';
 import { Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
+import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
   memo,
@@ -12,7 +13,6 @@ import {
   useRef,
   useState
 } from 'react';
-import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../apis';
 import { Roles } from '../config';
 import { MessageItem } from '../config/types';
@@ -48,21 +48,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
   const currentMessageRef = useRef<any>(null);
-  const paramsScroller = useRef<any>(null);
-  const leftSimple = useRef<any>(null);
-  const { updateScrollerPosition, handleContentWheel } = useContainerScroll(
-    scroller,
-    { toBottom: true }
-  );
+  const paramsRef = useRef<any>(null);
 
-  useEffect(() => {
-    updateScrollerPosition();
-  }, [messageList]);
-
-  useEffect(() => {
-    paramsScroller.current?.recalculate();
-    leftSimple.current?.recalculate();
-  }, [collapse]);
+  const { initialize, updateScrollerPosition } = useOverlayScroller();
+  const { initialize: innitializeParams } = useOverlayScroller();
 
   useImperativeHandle(ref, () => {
     return {
@@ -200,9 +189,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       setLoading(false);
     } catch (error) {
       console.log('error=====', error);
-      setMessageList((pre) => {
-        return [...pre, ...currentMessageRef.current];
-      });
+
       setLoading(false);
     }
   };
@@ -243,14 +230,26 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setMessageList(userMsg);
   };
 
+  useEffect(() => {
+    if (scroller.current) {
+      initialize(scroller.current);
+    }
+  }, [scroller.current, initialize]);
+
+  useEffect(() => {
+    if (paramsRef.current) {
+      innitializeParams(paramsRef.current);
+    }
+  }, [paramsRef.current, innitializeParams]);
+
+  useEffect(() => {
+    updateScrollerPosition();
+  }, [messageList]);
+
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
-        <div
-          className="message-list-wrap custome-scrollbar"
-          onWheel={handleContentWheel}
-          ref={scroller}
-        >
+        <div className="message-list-wrap" ref={scroller}>
           <div
             style={{
               marginBottom: 20
@@ -305,11 +304,11 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           />
         </div>
       </div>
-
       <div
         className={classNames('params-wrapper', {
           collapsed: collapse
         })}
+        ref={paramsRef}
       >
         <div className="box">
           <ParamsSettings

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

@@ -1,4 +1,6 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import _ from 'lodash';
+import 'overlayscrollbars/overlayscrollbars.css';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CompareContext from '../../config/compare-context';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
@@ -14,6 +16,7 @@ interface MultiCompareProps {
 }
 
 const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
+  const { initialize } = useOverlayScroller();
   const [loadingStatus, setLoadingStatus] = useState<Record<symbol, boolean>>(
     {}
   );
@@ -36,6 +39,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
   });
   const modelsCounterMap = useRef<Record<string, number>>({});
   const modelRefs = useRef<any>({});
+  const chatListScrollRef = useRef<any>(null);
   const boxHeight = 'calc(100vh - 72px)';
 
   const isLoading = useMemo(() => {
@@ -249,29 +253,33 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
     setModelSelections(resultList);
   }, [modelList]);
 
+  useEffect(() => {
+    if (chatListScrollRef.current) {
+      initialize(chatListScrollRef.current);
+    }
+  }, [chatListScrollRef.current, initialize]);
+
   return (
     <div className="multiple-chat" style={{ height: boxHeight }}>
-      <div className="chat-list">
-        <div className="chat-list-inner">
-          <CompareContext.Provider
-            value={{
-              spans,
-              globalParams,
-              loadingStatus,
-              modelFullList: modelList,
-              handleApplySystemChangeToAll,
-              setGlobalParams,
-              setLoadingStatus: handleSetLoadingStatus,
-              handleDeleteModel: handleDeleteModel
-            }}
-          >
-            <ActiveModels
-              spans={spans}
-              modelSelections={modelSelections}
-              setModelRefs={setModelRefs}
-            ></ActiveModels>
-          </CompareContext.Provider>
-        </div>
+      <div className="chat-list" ref={chatListScrollRef}>
+        <CompareContext.Provider
+          value={{
+            spans,
+            globalParams,
+            loadingStatus,
+            modelFullList: modelList,
+            handleApplySystemChangeToAll,
+            setGlobalParams,
+            setLoadingStatus: handleSetLoadingStatus,
+            handleDeleteModel: handleDeleteModel
+          }}
+        >
+          <ActiveModels
+            spans={spans}
+            modelSelections={modelSelections}
+            setModelRefs={setModelRefs}
+          ></ActiveModels>
+        </CompareContext.Provider>
       </div>
       <div>
         <MessageInput

src/pages/playground/components/multiple-chat/message-content.tsx

@@ -31,6 +31,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
     newMessageList.splice(index, 1);
     setMessageList?.(newMessageList);
   };
+
   return (
     <>
       {!!messageList.length && (

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

@@ -1,4 +1,5 @@
 import IconFont from '@/components/icon-font';
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import {
   ClearOutlined,
@@ -9,6 +10,7 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Dropdown, Popover, Select, Spin } from 'antd';
 import _ from 'lodash';
+import 'overlayscrollbars/overlayscrollbars.css';
 import React, {
   forwardRef,
   useContext,
@@ -18,7 +20,6 @@ import React, {
   useRef,
   useState
 } from 'react';
-import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../../apis';
 import { Roles } from '../../config';
@@ -62,6 +63,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const contentRef = useRef<any>('');
     const controllerRef = useRef<any>(null);
     const currentMessageRef = useRef<MessageItem[]>([]);
+    const modelScrollRef = useRef<any>(null);
+
+    const { initialize } = useOverlayScroller();
 
     const setMessageId = () => {
       messageId.current = messageId.current + 1;
@@ -122,8 +126,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         setMessageList((preList) => {
           return [...preList, ...currentMessageRef.current];
         });
-        console.log('currentMessageRef.current 1:', currentMessageRef.current);
-        console.log('currentMessage==========4', messageList);
         const messages = _.map(
           [...messageList, ...currentMessageRef.current],
           (item: MessageItem) => {
@@ -194,9 +196,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         });
         setLoadingStatus(instanceId, false);
       } catch (error) {
-        setMessageList((preList) => {
-          return [...preList, ...currentMessageRef.current];
-        });
         setLoadingStatus(instanceId, false);
       }
     };
@@ -333,6 +332,12 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       };
     }, []);
 
+    useEffect(() => {
+      if (modelScrollRef.current) {
+        initialize(modelScrollRef.current);
+      }
+    }, [modelScrollRef.current, initialize]);
+
     useImperativeHandle(ref, () => {
       return {
         submit: handleSubmit,
@@ -410,8 +415,12 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           applyToAll={handleApplySystemChangeToAll}
           setSystemMessage={setSystemMessage}
         ></SystemMessage>
-        <SimpleBar style={{ maxHeight: maxHeight }}>
-          <div className="content">
+        <div
+          className="content"
+          ref={modelScrollRef}
+          style={{ maxHeight: maxHeight }}
+        >
+          <div>
             <MessageContent
               spans={spans}
               messageList={messageList}
@@ -424,7 +433,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               style={{ width: '100%' }}
             />
           </div>
-        </SimpleBar>
+        </div>
         <ViewCodeModal
           open={show}
           systemMessage={systemMessage}