From 0a0b96735c78c4e7f5b92c5dd250e0e8ef387fe1 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 12 Jul 2024 16:16:58 +0800
Subject: [PATCH] fix: model list not refresh

---
 src/components/footer/index.tsx                |  6 ++----
 .../seal-table/components/table-row.tsx        |  7 ++-----
 src/components/status-tag/index.tsx            |  5 ++++-
 src/components/version-info/index.less         |  1 +
 src/components/version-info/index.tsx          | 11 ++++++++---
 src/hooks/use-container-scorll.ts              |  7 +++++++
 src/hooks/use-update-chunk-list.ts             | 11 ++++++++---
 src/layouts/index.tsx                          |  6 ++----
 src/locales/zh-CN/playground.ts                |  6 +++---
 src/pages/llmodels/components/table-list.tsx   |  9 +++++----
 src/pages/llmodels/index.tsx                   |  8 +++-----
 .../playground/components/ground-left.tsx      | 18 ++++++++++++++++--
 .../playground/components/reference-params.tsx |  3 ++-
 13 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index b2a74ea1..462d98f9 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -1,6 +1,6 @@
 import { GPUStackVersionAtom } from '@/atoms/user';
 import { getAtomStorage } from '@/atoms/utils';
-import VersionInfo from '@/components/version-info';
+import VersionInfo, { modalConfig } from '@/components/version-info';
 import externalLinks from '@/config/external-links';
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Space } from 'antd';
@@ -11,9 +11,7 @@ const Footer: React.FC = () => {
 
   const showVersion = () => {
     Modal.info({
-      icon: null,
-      centered: false,
-      width: 500,
+      ...modalConfig,
       content: <VersionInfo intl={intl} />
     });
   };
diff --git a/src/components/seal-table/components/table-row.tsx b/src/components/seal-table/components/table-row.tsx
index b523438d..b3643a79 100644
--- a/src/components/seal-table/components/table-row.tsx
+++ b/src/components/seal-table/components/table-row.tsx
@@ -36,8 +36,9 @@ const TableRow: React.FC<
   const pollTimer = useRef<any>(null);
   const chunkRequestRef = useRef<any>(null);
   const childrenDataRef = useRef<any[]>([]);
+  childrenDataRef.current = childrenData;
 
-  console.log('table row====');
+  console.log('table row====', record.name, firstLoad, expanded);
   const { updateChunkedList } = useUpdateChunkedList({
     setDataList: setChildrenData
     // callback: (list) => renderChildren?.(list)
@@ -54,10 +55,6 @@ const TableRow: React.FC<
     }
   }, [rowSelection]);
 
-  useEffect(() => {
-    childrenDataRef.current = childrenData;
-  }, [childrenData]);
-
   // useEffect(() => {
   //   if (expandedRowKeys?.includes(record[rowKey])) {
   //     setExpanded(true);
diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx
index a16c88c4..c6789bb9 100644
--- a/src/components/status-tag/index.tsx
+++ b/src/components/status-tag/index.tsx
@@ -69,7 +69,10 @@ const StatusTag: React.FC<StatusTagProps> = ({
       }}
     >
       {statusValue.message ? (
-        <Tooltip title={statusValue.message}>
+        <Tooltip
+          title={statusValue.message}
+          overlayInnerStyle={{ maxHeight: 200, overflow: 'auto' }}
+        >
           <span className="m-r-5">
             <InfoCircleOutlined />
           </span>
diff --git a/src/components/version-info/index.less b/src/components/version-info/index.less
index 58b1a58d..b3c6c4cd 100644
--- a/src/components/version-info/index.less
+++ b/src/components/version-info/index.less
@@ -6,6 +6,7 @@
 
   .img {
     margin-top: 16px;
+    margin-bottom: 30px;
     text-align: center;
     height: 30px;
 
diff --git a/src/components/version-info/index.tsx b/src/components/version-info/index.tsx
index 2d33300f..fb99387a 100644
--- a/src/components/version-info/index.tsx
+++ b/src/components/version-info/index.tsx
@@ -13,9 +13,6 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
       <div className="img">
         <img src={Logo} alt="logo" />
       </div>
-      <div className="title">
-        {intl.formatMessage({ id: 'common.footer.version.title' })}
-      </div>
       <div>
         <div className="ver">
           <span className="label">
@@ -36,4 +33,12 @@ const VersionInfo: React.FC<{ intl: any }> = ({ intl }) => {
   );
 };
 
+export const modalConfig = {
+  icon: null,
+  centered: false,
+  maskClosable: true,
+  footer: null,
+  width: 400
+};
+
 export default VersionInfo;
diff --git a/src/hooks/use-container-scorll.ts b/src/hooks/use-container-scorll.ts
index b790679a..00feef70 100644
--- a/src/hooks/use-container-scorll.ts
+++ b/src/hooks/use-container-scorll.ts
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { useRef } from 'react';
 
 export default function useContainerScroll(
@@ -8,8 +9,14 @@ export default function useContainerScroll(
   const scroller = useRef(container);
   const optionsRef = useRef(options);
   const toBottomFlag = useRef(options?.toBottom);
+
+  const debunceResetWheeled = _.debounce(() => {
+    isWheeled.current = false;
+  }, 5000);
+
   const handleContentWheel = (e: any) => {
     isWheeled.current = true;
+    debunceResetWheeled();
   };
 
   const scrollerRun = () => {
diff --git a/src/hooks/use-update-chunk-list.ts b/src/hooks/use-update-chunk-list.ts
index e2225cad..7bcd4e1a 100644
--- a/src/hooks/use-update-chunk-list.ts
+++ b/src/hooks/use-update-chunk-list.ts
@@ -35,6 +35,7 @@ export function useUpdateChunkedList(options: {
     const ids = data?.ids || [];
     // CREATE
     if (data?.type === WatchEventType.CREATE) {
+      const newDataList = _.cloneDeep(dataList);
       _.each(collections, (item: any) => {
         const updateIndex = _.findIndex(
           dataList,
@@ -42,12 +43,13 @@ export function useUpdateChunkedList(options: {
         );
         if (updateIndex === -1) {
           const updateItem = _.cloneDeep(item);
-          options.setDataList?.((preDataList: any) => {
-            return _.concat(updateItem, preDataList);
-          });
+          newDataList.push(updateItem);
         }
         console.log('create=========', updateIndex, dataList, collections);
       });
+      options.setDataList?.(() => {
+        return newDataList;
+      });
     }
     // DELETE
     if (data?.type === WatchEventType.DELETE) {
@@ -71,6 +73,9 @@ export function useUpdateChunkedList(options: {
           if (updateIndex > -1) {
             const updateItem = _.cloneDeep(item);
             updatedDataList[updateIndex] = updateItem;
+          } else if (updateIndex === -1) {
+            const updateItem = _.cloneDeep(item);
+            updatedDataList.push(updateItem);
           }
         });
 
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 1edc2a6b..ae66044b 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -1,7 +1,7 @@
 // @ts-nocheck
 
 import { userAtom } from '@/atoms/user';
-import VersionInfo from '@/components/version-info';
+import VersionInfo, { modalConfig } from '@/components/version-info';
 import { logout } from '@/pages/login/apis';
 import { useAccessMarkedRoutes } from '@@/plugin-access';
 import { useModel } from '@@/plugin-model';
@@ -105,9 +105,7 @@ export default (props: any) => {
 
   const showVersion = () => {
     Modal.info({
-      icon: null,
-      centered: false,
-      width: 500,
+      ...modalConfig,
       content: <VersionInfo intl={intl} />
     });
   };
diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts
index b4792c6e..bab82ccb 100644
--- a/src/locales/zh-CN/playground.ts
+++ b/src/locales/zh-CN/playground.ts
@@ -18,11 +18,11 @@ export default {
   'playground.params.temperature.tips':
     '控制随机性：降低温度会导致更少的随机完成。当温度接近零时，模型将变得确定性和重复性。',
   'playground.params.maxtokens.tips':
-    '生成的最大 token 数。输入标记和生成的标记的总长度受模型上下文长度的限制。',
+    '生成的最大 token 数。输入的 token 和生成的 token 的总长度受模型上下文长度的限制。',
   'playground.params.topp.tips':
     '通过核心采样控制多样性：0.5 表示考虑所有基于概率权重选项的一半。',
   'playground.params.seed.tips':
-    '如果指定，我们的系统将尽最大努力进行确定性采样，以便使用相同种子和参数的重复请求应返回相同的结果。',
+    '如果指定，我们的系统将尽最大努力进行确定性采样，以便使用相同 seed 和参数的重复请求应返回相同的结果。',
   'playground.params.stop.tips':
-    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的标记。'
+    '停止序列是一个预定义或用户指定的文本字符串，当这些序列出现时，它会提示 AI 停止生成后续的 token。'
 };
diff --git a/src/pages/llmodels/components/table-list.tsx b/src/pages/llmodels/components/table-list.tsx
index 6bbc157e..66f22004 100644
--- a/src/pages/llmodels/components/table-list.tsx
+++ b/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');
             }}
           />
diff --git a/src/pages/llmodels/index.tsx b/src/pages/llmodels/index.tsx
index 1d1b1a31..cf4dc3cd 100644
--- a/src/pages/llmodels/index.tsx
+++ b/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);
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index 3c5aa1c6..b4c6c73e 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/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()}
diff --git a/src/pages/playground/components/reference-params.tsx b/src/pages/playground/components/reference-params.tsx
index 0f76e47d..b59135fa 100644
--- a/src/pages/playground/components/reference-params.tsx
+++ b/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>
   );