fix: set flow variable default value (#1973)

eosphoros-ai · Sep 4, 2024 · ef624b0 · ef624b0
2 parents cbfd3d2 + ef04432
commit ef624b0
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 20 deletions.
diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,5 +1,5 @@
 import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
-import { IGetKeysResponseData, IVariableItem } from '@/types/flow';
+import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/flow';
 import { buildVariableString } from '@/utils/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
@@ -17,7 +17,11 @@ interface Option {
   isLeaf?: boolean;
 }
 
-export const AddFlowVariableModal: React.FC = () => {
+type Props = {
+  flowInfo?: IFlowUpdateParam;
+};
+
+export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
@@ -155,7 +159,7 @@ export const AddFlowVariableModal: React.FC = () => {
           autoComplete='off'
           layout='vertical'
           className='mt-8'
-          initialValues={{ parameters: [{}] }}
+          initialValues={{ parameters: flowInfo?.variables || [{}] }}
         >
           <Form.List name='parameters'>
             {(fields, { add, remove }) => (

diff --git a/web/pages/construct/app/index.tsx b/web/pages/construct/app/index.tsx
@@ -308,15 +308,14 @@ export default function AppContent() {
                 className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
               />
             </div>
-            <div className='flex items-center gap-4 h-10'>
-              <Button
-                className='border-none text-white bg-button-gradient h-full flex items-center'
-                icon={<PlusOutlined className='text-base' />}
-                onClick={handleCreate}
-              >
-                {t('create_app')}
-              </Button>
-            </div>
+
+            <Button
+              className='border-none text-white bg-button-gradient flex items-center'
+              icon={<PlusOutlined className='text-base' />}
+              onClick={handleCreate}
+            >
+              {t('create_app')}
+            </Button>
           </div>
           <div className=' w-full flex flex-wrap pb-12 mx-[-8px]'>
             {apps.map(item => {

diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
@@ -26,14 +26,13 @@ import 'reactflow/dist/style.css';
 
 const nodeTypes = { customNode: CanvasNode };
 const edgeTypes = { buttonedge: ButtonEdge };
-const Canvas: React.FC = () => {
 
+const Canvas: React.FC = () => {
   const { t } = useTranslation();
-  const [messageApi, contextHolder] = message.useMessage();
-
   const searchParams = useSearchParams();
   const id = searchParams?.get('id') || '';
   const reactFlow = useReactFlow();
+  const [messageApi, contextHolder] = message.useMessage();
 
   const [loading, setLoading] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -43,10 +42,10 @@ const Canvas: React.FC = () => {
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
-  
-  if (localStorage.getItem('importFlowData') ) {
-    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') );
-    localStorage.removeItem('importFlowData')
+
+  if (localStorage.getItem('importFlowData')) {
+    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
+    localStorage.removeItem('importFlowData');
     setLoading(true);
     const flowData = mapUnderlineToHump(importFlowData.flow_data);
     setFlowInfo(importFlowData);
@@ -260,7 +259,7 @@ const Canvas: React.FC = () => {
 
               <Background color='#aaa' gap={16} />
 
-              <AddFlowVariableModal />
+              <AddFlowVariableModal flowInfo={flowInfo} />
             </ReactFlow>
           </div>
         </div>