code

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

@@ -9,6 +9,8 @@ import RenderOutput from './render/RenderOutput';
 import { FlowOutputItemTypeEnum } from '@/constants/flow';
 import MySelect from '@/components/Select';
 import { chatModelList } from '@/store/static';
+import MySlider from '@/components/Slider';
+import { Box } from '@chakra-ui/react';
 
 const NodeChat = ({
   data: { moduleId, inputs, outputs, onChangeNode, ...props }
@@ -47,7 +49,7 @@ const NodeChat = ({
                     key: 'maxToken',
                     valueKey: 'markList',
                     value: [
-                      { label: '0', value: 0 },
+                      { label: '100', value: 100 },
                       { label: `${model.contextMaxToken}`, value: model.contextMaxToken }
                     ]
                   });
@@ -65,7 +67,35 @@ const NodeChat = ({
                   });
                 }}
               />
-            )
+            ),
+            maxToken: (inputItem) => {
+              const model = inputs.find((item) => item.key === 'model')?.value;
+              const modelData = chatModelList.find((item) => item.model === model);
+              const maxToken = modelData ? modelData.contextMaxToken : 4000;
+              const markList = [
+                { label: '100', value: 100 },
+                { label: `${maxToken}`, value: maxToken }
+              ];
+              return (
+                <Box pt={5} pb={4} px={2}>
+                  <MySlider
+                    markList={markList}
+                    width={'100%'}
+                    min={inputItem.min || 100}
+                    max={maxToken}
+                    step={inputItem.step || 1}
+                    value={inputItem.value}
+                    onChange={(e) => {
+                      onChangeNode({
+                        moduleId,
+                        key: inputItem.key,
+                        value: e
+                      });
+                    }}
+                  />
+                </Box>
+              );
+            }
           }}
         />
       </Container>

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

@@ -84,6 +84,7 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
   const { x, y, zoom } = useViewport();
   const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [loaded, setLoaded] = useState(false);
   const {
     isOpen: isOpenTemplate,
     onOpen: onOpenTemplate,
@@ -255,6 +256,9 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
           })
         )
       );
+
+      setLoaded(true);
+      onFixView();
     },
     [onDelConnect, setEdges, setNodes, onChangeNode, onDelNode]
   );
@@ -377,14 +381,15 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
             isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
           }}
         />
+
         <ReactFlow
           ref={reactFlowWrapper}
           className={styles.panel}
+          fitView
           nodes={nodes}
           edges={edges}
           minZoom={0.4}
           maxZoom={1.5}
-          fitView
           defaultEdgeOptions={edgeOptions}
           connectionLineStyle={connectionLineStyle}
           nodeTypes={nodeTypes}

client/src/pages/app/list/component/CreateModal.tsx

@@ -21,9 +21,8 @@ import { getErrText } from '@/utils/tools';
 import { useToast } from '@/hooks/useToast';
 import { postCreateApp } from '@/api/app';
 import { useRouter } from 'next/router';
-import { appTemplates } from '@/constants/app';
+import { appTemplates } from '@/constants/flow/ModuleTemplate';
 import Avatar from '@/components/Avatar';
-import MyIcon from '@/components/Icon';
 
 type FormType = {
   avatar: string;