fix: model list not refresh

src/pages/llmodels/components/table-list.tsx

@@ -204,7 +204,7 @@ const Models: React.FC<ModelsProps> = ({
     });
   };
 
-  const getModelInstances = useCallback(async (row: any) => {
+  const getModelInstances = async (row: any) => {
     const params = {
       id: row.id,
       page: 1,
@@ -212,7 +212,7 @@ const Models: React.FC<ModelsProps> = ({
     };
     const data = await queryModelInstancesList(params);
     return data.items || [];
-  }, []);
+  };
 
   const generateChildrenRequestAPI = (params: any) => {
     return `${MODELS_API}/${params.id}/instances`;
@@ -249,14 +249,14 @@ const Models: React.FC<ModelsProps> = ({
     []
   );
 
-  const renderChildren = (list: any) => {
+  const renderChildren = useCallback((list: any) => {
     return (
       <InstanceItem
         list={list}
         handleChildSelect={handleChildSelect}
       ></InstanceItem>
     );
-  };
+  }, []);
 
   return (
     <>
@@ -371,6 +371,7 @@ const Models: React.FC<ModelsProps> = ({
             showSorterTooltip={false}
             sorter={true}
             render={(val, row) => {
+              console.log('val=====', val, row['created_at'], row.name);
               return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
             }}
           />

src/pages/llmodels/index.tsx

@@ -28,14 +28,12 @@ const Models: React.FC = () => {
   });
   // request data
 
+  dataSourceRef.current = dataSource;
+
   const { updateChunkedList } = useUpdateChunkedList({
     setDataList: setDataSource
   });
 
-  useEffect(() => {
-    dataSourceRef.current = dataSource;
-  }, [dataSource]);
-
   const fetchData = useCallback(async () => {
     axiosToken?.cancel?.();
     axiosToken = createAxiosToken();
@@ -44,7 +42,7 @@ const Models: React.FC = () => {
       const params = {
         ..._.pickBy(queryParams, (val: any) => !!val)
       };
-      const res = await queryModelsList(params, {
+      const res: any = await queryModelsList(params, {
         cancelToken: axiosToken.token
       });
       console.log('res=======', res);

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

@@ -1,11 +1,12 @@
 import TransitionWrapper from '@/components/transition';
 import HotKeys from '@/config/hotkeys';
+import useContainerScroll from '@/hooks/use-container-scorll';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
 import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Spin } from 'antd';
 import _ from 'lodash';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { CHAT_API } from '../apis';
 import { Roles } from '../config';
@@ -48,6 +49,15 @@ const MessageList: React.FC<MessageProps> = (props) => {
   const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
   const controllerRef = useRef<any>(null);
+  const scroller = useRef<any>(null);
+  const { updateScrollerPosition, handleContentWheel } = useContainerScroll(
+    scroller,
+    { toBottom: true }
+  );
+
+  useEffect(() => {
+    updateScrollerPosition();
+  }, [messageList]);
 
   const handleSystemMessageChange = (e: any) => {
     setSystemMessage(e.target.value);
@@ -208,7 +218,11 @@ const MessageList: React.FC<MessageProps> = (props) => {
 
   return (
     <div className="ground-left">
-      <div className="message-list-wrap">
+      <div
+        className="message-list-wrap"
+        ref={scroller}
+        onWheel={handleContentWheel}
+      >
         <div style={{ marginBottom: 40 }}>
           <TransitionWrapper
             header={renderLabel()}

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

@@ -1,5 +1,6 @@
 import { useIntl } from '@umijs/max';
 import { Space, Tooltip } from 'antd';
+import _ from 'lodash';
 import '../style/reference-params.less';
 
 interface ReferenceParamsProps {
@@ -43,7 +44,7 @@ const ReferenceParams = (props: ReferenceParamsProps) => {
 
       <span>
         {intl.formatMessage({ id: 'playground.tokenoutput' })}:{' '}
-        {usage.tokens_per_second} Tokens/s
+        {_.round(usage.tokens_per_second, 2)} Tokens/s
       </span>
     </div>
   );