fix: language does not refresh after toggling

src/locales/en-US/playground.ts

@@ -37,10 +37,10 @@ export default {
   'playground.img.upload.error': 'Upload Error',
   'playground.toolbar.clearmsg': 'Clear Messages',
   'playground.toolbar.prompts': 'Prompts',
-  'playground.toolbar.compare2Model': '2-Model Compare',
+  'playground.toolbar.compare2Model': '2-Model Comparison',
-  'playground.toolbar.compare3Model': '3-Model Compare',
+  'playground.toolbar.compare3Model': '3-Model Comparison',
-  'playground.toolbar.compare4Model': '4-Model Compare',
+  'playground.toolbar.compare4Model': '4-Model Comparison',
-  'playground.toolbar.compare6Model': '6-Model Compare',
+  'playground.toolbar.compare6Model': '6-Model Comparison',
   'playground.input.holder': 'Type <kbd>/</kbd> to input message',
   'playground.compare.apply': 'Apply',
   'playground.compare.applytoall': 'Apply to all models',

src/pages/dashboard/components/active-table.tsx

@@ -2,71 +2,9 @@ import PageTools from '@/components/page-tools';
 import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Col, Row, Table } from 'antd';
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 
-const projectColumns = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name'
-  },
-  {
-    title: 'Token Quota',
-    dataIndex: 'quota',
-    key: 'quota',
-    render: (text: any, record: any) => <span>{record.quota}k</span>
-  },
-  {
-    title: 'Token Utilization',
-    dataIndex: 'utilization',
-    key: 'utilization',
-    render: (text: any, record: any) => <span>{record.utilization}%</span>
-  },
-  {
-    title: 'Members',
-    dataIndex: 'members',
-    key: 'members'
-  }
-];
-
-const projectData = [
-  {
-    id: 1,
-    name: 'copilot-dev',
-    quota: 100,
-    utilization: 50,
-    members: 4
-  },
-  {
-    id: 2,
-    name: 'rag-wiki',
-    quota: 200,
-    utilization: 70,
-    members: 3
-  },
-  {
-    id: 3,
-    name: 'smart-auto-agent',
-    quota: 100,
-    utilization: 20,
-    members: 5
-  },
-  {
-    id: 4,
-    name: 'office-auto-docs',
-    quota: 100,
-    utilization: 25,
-    members: 1
-  },
-  {
-    id: 5,
-    name: 'smart-customer-service',
-    quota: 100,
-    utilization: 46,
-    members: 2
-  }
-];
 const ActiveTable = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext).active_models || [];
@@ -76,14 +14,6 @@ const ActiveTable = () => {
       dataIndex: 'name',
       key: 'name'
     },
-    // {
-    //   title: intl.formatMessage({ id: 'dashboard.gpuutilization' }),
-    //   dataIndex: 'gpu_utilization',
-    //   key: 'gpu_utilization',
-    //   render: (text: any, record: any) => (
-    //     <ProgressBar percent={_.round(text, 0)}></ProgressBar>
-    //   )
-    // },
     {
       title: intl.formatMessage({ id: 'dashboard.allocatevram' }),
       dataIndex: 'resource_claim.memory',
@@ -133,4 +63,4 @@ const ActiveTable = () => {
   );
 };
 
-export default ActiveTable;
+export default memo(ActiveTable);

src/pages/dashboard/components/over-view.tsx

@@ -29,7 +29,7 @@ const renderCardItem = (data: {
 const Overview: React.FC = () => {
   const intl = useIntl();
   const data = useContext(DashboardContext).resource_counts || {};
-  console.log('overview===');
+
   const renderValue = (
     value:
       | number
@@ -74,4 +74,4 @@ const Overview: React.FC = () => {
   );
 };
 
-export default Overview;
+export default React.memo(Overview);

src/pages/dashboard/components/resource-utilization.tsx

@@ -110,7 +110,6 @@ const option = {
 };
 
 const UtilizationOvertime: React.FC = () => {
-  console.log('systemload=====================');
   const intl = useIntl();
   const data = useContext(DashboardContext)?.system_load?.history || {};
 
@@ -147,7 +146,7 @@ const UtilizationOvertime: React.FC = () => {
       legendData,
       xAxisData: _.uniq(xAxisData)
     };
-  }, [data]);
+  }, [data, intl]);
 
   return (
     <>

src/pages/dashboard/components/system-load.tsx

@@ -5,9 +5,8 @@ import breakpoints from '@/config/breakpoints';
 import useWindowResize from '@/hooks/use-window-resize';
 import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
-import dayjs from 'dayjs';
 import _ from 'lodash';
-import { useContext, useEffect, useState } from 'react';
+import { memo, useContext, useEffect, useMemo, useState } from 'react';
 import { DashboardContext } from '../config/dashboard-context';
 import ResourceUtilization from './resource-utilization';
 
@@ -28,11 +27,29 @@ const SystemLoad = () => {
   const [paddingRight, setPaddingRight] = useState<string>('20px');
   const [smallChartHeight, setSmallChartHeight] = useState<number>(190);
   const [largeChartHeight, setLargeChartHeight] = useState<number>(400);
-  const thresholds = [0.5, 0.7, 1];
-  const height = 400;
-  const currentDate = dayjs().format('YYYY-MM-DD');
 
-  const handleSelectDate = (date: any) => {};
+  const height = 400;
+
+  const chartData = useMemo(() => {
+    return {
+      gpu: {
+        data: _.round(data.gpu || 0, 1),
+        color: strokeColorFunc(data.gpu)
+      },
+      vram: {
+        data: _.round(data.vram || 0, 1),
+        color: strokeColorFunc(data.vram)
+      },
+      cpu: {
+        data: _.round(data.cpu || 0, 1),
+        color: strokeColorFunc(data.cpu)
+      },
+      ram: {
+        data: _.round(data.ram || 0, 1),
+        color: strokeColorFunc(data.ram)
+      }
+    };
+  }, [data]);
 
   useEffect(() => {
     if (size.width < breakpoints.xl) {
@@ -70,8 +87,8 @@ const SystemLoad = () => {
                 <Col span={12} style={{ height: smallChartHeight }}>
                   <GaugeChart
                     height={smallChartHeight}
-                    value={_.round(data.gpu || 0, 1)}
+                    value={chartData.gpu.data}
-                    color={strokeColorFunc(data.gpu)}
+                    color={chartData.gpu.color}
                     title={intl.formatMessage({
                       id: 'dashboard.gpuutilization'
                     })}
@@ -83,8 +100,8 @@ const SystemLoad = () => {
                       id: 'dashboard.vramutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.vram)}
+                    color={chartData.vram.color}
-                    value={_.round(data.vram || 0, 1)}
+                    value={chartData.vram.data}
                   ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
@@ -93,8 +110,8 @@ const SystemLoad = () => {
                       id: 'dashboard.cpuutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.cpu)}
+                    color={chartData.cpu.color}
-                    value={_.round(data.cpu || 0, 1)}
+                    value={chartData.cpu.data}
                   ></GaugeChart>
                 </Col>
                 <Col span={12} style={{ height: smallChartHeight }}>
@@ -103,8 +120,8 @@ const SystemLoad = () => {
                       id: 'dashboard.memoryutilization'
                     })}
                     height={smallChartHeight}
-                    color={strokeColorFunc(data.ram)}
+                    color={chartData.ram.color}
-                    value={_.round(data.ram || 0, 1)}
+                    value={chartData.ram.data}
                   ></GaugeChart>
                 </Col>
               </Row>
@@ -116,4 +133,4 @@ const SystemLoad = () => {
   );
 };
 
-export default SystemLoad;
+export default memo(SystemLoad);

src/pages/dashboard/components/usage-inner/index.tsx

@@ -4,7 +4,7 @@ import { useIntl } from '@umijs/max';
 import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useCallback, useContext } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { DashboardContext } from '../../config/dashboard-context';
 import RequestTokenInner from './request-token-inner';
 import TopUser from './top-user';
@@ -33,18 +33,29 @@ const getCurrentMonthDays = () => {
 
 const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
   const intl = useIntl();
-  const currentDate = dayjs();
+
-  const currentMonthDays = getCurrentMonthDays();
+  const [topUserData, setTopUserData] = useState<{
-  let requestData: {
+    userData: { name: string; value: number }[];
-    name: string;
+    topUserList: string[];
-    color: string;
+  }>({
-    areaStyle: any;
+    userData: [],
-    data: { time: string; value: number }[];
+    topUserList: []
-  }[] = [];
+  });
-  let tokenData: { time: string; value: number }[] = [];
+
-  let userData: { name: string; value: number }[] = [];
+  const [requestTokenData, setRequestTokenData] = useState<{
-  const xAxisData: string[] = currentMonthDays;
+    requestData: {
-  let topUserList: string[] = [];
+      name: string;
+      color: string;
+      areaStyle: any;
+      data: { time: string; value: number }[];
+    }[];
+    tokenData: { time: string; value: number }[];
+    xAxisData: string[];
+  }>({
+    requestData: [],
+    tokenData: [],
+    xAxisData: []
+  });
 
   const { model_usage } = useContext(DashboardContext);
   const data = model_usage || {};
@@ -54,6 +65,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
   };
 
   const generateData = useCallback(() => {
+    const currentMonthDays = getCurrentMonthDays();
     const requestList: {
       name: string;
       color: string;
@@ -88,7 +100,7 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
       data: []
     };
 
-    _.each(xAxisData, (date: string) => {
+    _.each(currentMonthDays, (date: string) => {
       // tokens data
       const item = _.find(data.completion_token_history, (item: any) => {
         return dayjs(item.timestamp * 1000).format('YYYY-MM-DD') === date;
@@ -140,8 +152,10 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
 
     // ========== top users ============
     if (!data.top_users?.length) {
-      userData = [];
+      setTopUserData({
-      topUserList = [];
+        userData: [],
+        topUserList: []
+      });
     } else {
       const users: string[] = [];
       _.each(data.top_users, (item: any) => {
@@ -155,15 +169,23 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
           value: item.completion_token_count
         });
       });
-      topUserList = _.uniq(users);
+
-      userData = [topUserCompletion, topUserPrompt];
+      setTopUserData({
+        userData: [topUserCompletion, topUserPrompt],
+        topUserList: _.uniq(users)
+      });
     }
 
-    requestData = [requestList];
+    setRequestTokenData({
-    tokenData = [completionData, prompData];
+      requestData: [requestList],
-  }, [data, xAxisData]);
+      tokenData: [completionData, prompData],
+      xAxisData: currentMonthDays
+    });
+  }, [data]);
 
-  generateData();
+  useEffect(() => {
+    generateData();
+  }, [generateData]);
 
   return (
     <>
@@ -181,13 +203,16 @@ const UsageInner: React.FC<{ paddingRight: string }> = ({ paddingRight }) => {
           style={{ paddingRight: paddingRight }}
         >
           <RequestTokenInner
-            requestData={requestData}
+            requestData={requestTokenData.requestData}
-            xAxisData={xAxisData}
+            xAxisData={requestTokenData.xAxisData}
-            tokenData={tokenData}
+            tokenData={requestTokenData.tokenData}
           ></RequestTokenInner>
         </Col>
         <Col xs={24} sm={24} md={24} lg={24} xl={8}>
-          <TopUser userData={userData} topUserList={topUserList}></TopUser>
+          <TopUser
+            userData={topUserData.userData}
+            topUserList={topUserData.topUserList}
+          ></TopUser>
         </Col>
       </Row>
     </>

src/pages/dashboard/components/usage-inner/request-token-inner.tsx

@@ -17,7 +17,6 @@ interface RequestTokenInnerProps {
   xAxisData: string[];
 }
 const RequestTokenInner: React.FC<RequestTokenInnerProps> = (props) => {
-  console.log('request token inner=====================');
   const { requestData, tokenData, xAxisData } = props;
   const intl = useIntl();
   const labelFormatter = (v: any) => {

src/pages/dashboard/components/usage-inner/top-user.tsx

@@ -8,7 +8,6 @@ interface TopUserProps {
   topUserList: string[];
 }
 const TopUser: React.FC<TopUserProps> = (props) => {
-  console.log('TopUser=====================');
   const { userData, topUserList } = props;
   const intl = useIntl();
 

src/pages/llmodels/components/data-form.tsx

@@ -260,7 +260,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     }
 
     return null;
-  }, [props.source, isGGUF]);
+  }, [props.source, isGGUF, intl]);
 
   const handleOk = (formdata: FormData) => {
     const gpu = _.find(gpuOptions, (item: any) => {

src/pages/llmodels/components/update-modal.tsx

@@ -226,7 +226,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     }
 
     return null;
-  }, [props.data?.source, isGGUF]);
+  }, [props.data?.source, isGGUF, intl]);
 
   const handleSumit = () => {
     form.submit();

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();
+    if (loading) {
-  }, [messageList]);
+      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) => {
+      ref?.addNewMessage(message);
-        return [...preList, { ...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,