feat: refresh max token

client/src/pages/app/detail/components/Charts/TotalUsage.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import * as echarts from 'echarts';
 import { useGlobalStore } from '@/store/global';
-import { getTokenUsage } from '@/api/app';
+import { getAppTotalUsage } from '@/api/app';
 import { useQuery } from '@tanstack/react-query';
 import dayjs from 'dayjs';
+import { formatPrice } from '@/utils/user';
 
 const map = {
   blue: {
@@ -98,7 +99,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
 
   const Dom = useRef<HTMLDivElement>(null);
   const myChart = useRef<echarts.ECharts>();
-  const { data = [] } = useQuery(['init'], () => getTokenUsage({ appId }));
+  const { data = [] } = useQuery(['init'], () => getAppTotalUsage({ appId }));
 
   const option = useMemo(
     () => ({
@@ -110,7 +111,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
       },
       yAxis: {
         type: 'value',
-        max: Math.max(...data.map((item) => item.tokenLen)),
+        max: Math.max(...data.map((item) => item.total)),
         min: 0
       },
       grid: {
@@ -132,14 +133,14 @@ const TokenUsage = ({ appId }: { appId: string }) => {
           return `
           <div>
             <div>${dayjs(data.axisValue).format('YYYY/MM/DD')}</div>
-            <div>${((e[0]?.value || 0) / 1000).toFixed(2)}k Tokens</div>
+            <div>${formatPrice(e[0]?.value || 0)}元</div>
           </div>
 `;
         }
       },
       series: [
         {
-          data: data.map((item) => item.tokenLen),
+          data: data.map((item) => item.total),
           type: 'line',
           showSymbol: true,
           animationDuration: 300,
@@ -170,7 +171,7 @@ const TokenUsage = ({ appId }: { appId: string }) => {
     if (!Dom.current || myChart?.current?.getOption()) return;
     myChart.current = echarts.init(Dom.current);
     myChart.current && myChart.current.setOption(option);
-  }, [Dom]);
+  }, []);
 
   // data changed, update
   useEffect(() => {

client/src/pages/app/detail/components/Settings.tsx

@@ -14,8 +14,8 @@ import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
 
 const InfoModal = dynamic(() => import('./InfoModal'));
-const TokenUsage = dynamic(() => import('./Charts/TokenUsage'));
-const AppEdit = dynamic(() => import('./edit'));
+const TotalUsage = dynamic(() => import('./Charts/TotalUsage'), { ssr: false });
+const AppEdit = dynamic(() => import('./edit'), { ssr: false });
 import styles from '../../list/index.module.scss';
 
 const Settings = ({ appId }: { appId: string }) => {
@@ -143,10 +143,10 @@ const Settings = ({ appId }: { appId: string }) => {
           </Box>
           <Box>
             <Box mb={2} fontSize={['md', 'xl']}>
-              近 7 日 Tokens 消耗
+              近 7 日消费
             </Box>
-            <Box h={'150px'}>
-              <TokenUsage appId={appId} />
+            <Box h={'150px'} w={'100%'}>
+              <TotalUsage appId={appId} />
             </Box>
           </Box>
         </Grid>

client/src/pages/app/detail/components/edit/components/NodeChat.tsx

@@ -7,6 +7,8 @@ import Container from './modules/Container';
 import RenderInput from './render/RenderInput';
 import RenderOutput from './render/RenderOutput';
 import { FlowOutputItemTypeEnum } from '@/constants/flow';
+import MySelect from '@/components/Select';
+import { chatModelList } from '@/store/static';
 
 const NodeChat = ({
   data: { moduleId, inputs, outputs, onChangeNode, ...props }
@@ -15,11 +17,57 @@ const NodeChat = ({
     () => outputs.filter((item) => item.type !== FlowOutputItemTypeEnum.hidden).length,
     [outputs]
   );
+
   return (
-    <NodeCard minW={'400px'} logo={'/icon/logo.png'} name={'对话'} moduleId={moduleId} {...props}>
+    <NodeCard minW={'400px'} moduleId={moduleId} {...props}>
       <Divider text="Input" />
       <Container>
-        <RenderInput moduleId={moduleId} onChangeNode={onChangeNode} flowInputList={inputs} />
+        <RenderInput
+          moduleId={moduleId}
+          onChangeNode={onChangeNode}
+          flowInputList={inputs}
+          CustomComponent={{
+            model: (inputItem) => (
+              <MySelect
+                width={'100%'}
+                value={inputItem.value}
+                list={inputItem.list || []}
+                onchange={(e) => {
+                  onChangeNode({
+                    moduleId,
+                    key: inputItem.key,
+                    value: e
+                  });
+                  // update max tokens
+                  const model = chatModelList.find((item) => item.model === e);
+                  if (!model) return;
+
+                  onChangeNode({
+                    moduleId,
+                    key: 'maxToken',
+                    valueKey: 'markList',
+                    value: [
+                      { label: '0', value: 0 },
+                      { label: `${model.contextMaxToken}`, value: model.contextMaxToken }
+                    ]
+                  });
+                  onChangeNode({
+                    moduleId,
+                    key: 'maxToken',
+                    valueKey: 'max',
+                    value: model.contextMaxToken
+                  });
+                  onChangeNode({
+                    moduleId,
+                    key: 'maxToken',
+                    valueKey: 'value',
+                    value: model.contextMaxToken / 2
+                  });
+                }}
+              />
+            )
+          }}
+        />
       </Container>
       {outputsLen > 0 && (
         <>