From 78d15c2a2f92d45c6706d8eae8744d9bedac1eaf Mon Sep 17 00:00:00 2001
From: heheer <heheer@sealos.io>
Date: Thu, 26 Sep 2024 16:33:38 +0800
Subject: [PATCH] fix: form input value type & default form & ui (#2802)

* fix: form input value type & default form & ui

* variables form ui
---
 .../components/core/chat/components/AIResponseBox.tsx |  5 +++--
 .../Flow/nodes/NodeFormInput/InputFormEditModal.tsx   | 11 ++++++++++-
 .../Flow/nodes/NodeFormInput/index.tsx                |  3 +--
 .../Flow/nodes/NodePluginIO/InputTypeConfig.tsx       |  2 +-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/projects/app/src/components/core/chat/components/AIResponseBox.tsx b/projects/app/src/components/core/chat/components/AIResponseBox.tsx
index 9f1dec9f6..776eefa4c 100644
--- a/projects/app/src/components/core/chat/components/AIResponseBox.tsx
+++ b/projects/app/src/components/core/chat/components/AIResponseBox.tsx
@@ -215,9 +215,9 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
     <Flex flexDirection={'column'} gap={2} w={'250px'}>
       {interactive.params.inputForm?.map((input) => (
         <Box key={input.label}>
-          <Flex mb={1}>
+          <Flex mb={1} alignItems={'center'}>
             <FormLabel required={input.required}>{input.label}</FormLabel>
-            <QuestionTip ml={1} label={input.description} />
+            {input.description && <QuestionTip ml={1} label={input.description} />}
           </Flex>
           {input.type === FlowNodeInputTypeEnum.input && (
             <Input
@@ -247,6 +247,7 @@ const RenderUserFormInteractive = React.memo(function RenderFormInput({
               max={input.max}
               isDisabled={interactive.params.submitted}
               bg={'white'}
+              rounded={'md'}
             >
               <NumberInputField
                 bg={'white'}
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/InputFormEditModal.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/InputFormEditModal.tsx
index 5edddbc27..bd3b33a57 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/InputFormEditModal.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/InputFormEditModal.tsx
@@ -14,7 +14,10 @@ export const defaultFormInput: UserInputFormItemType = {
   type: FlowNodeInputTypeEnum.input,
   key: '',
   label: '',
+  description: '',
   value: '',
+  maxLength: undefined,
+  defaultValue: '',
   valueType: WorkflowIOValueTypeEnum.string,
   required: false
 };
@@ -76,6 +79,10 @@ const InputFormEditModal = ({
     }
   ];
 
+  const defaultValueType = inputTypeList
+    .flat()
+    .find((item) => item.value === inputType)?.defaultValueType;
+
   const onSubmitSuccess = useCallback(
     (data: UserInputFormItemType, action: 'confirm' | 'continue') => {
       const isChangeKey = defaultValue.key !== data.key;
@@ -90,6 +97,7 @@ const InputFormEditModal = ({
       }
 
       data.key = data.label;
+      data.valueType = defaultValueType;
 
       if (action === 'confirm') {
         onSubmit(data);
@@ -103,7 +111,7 @@ const InputFormEditModal = ({
         reset(defaultFormInput);
       }
     },
-    [toast, t, reset, onSubmit, onClose, defaultFormInput]
+    [toast, t, reset, onSubmit, onClose, defaultFormInput, defaultValueType]
   );
 
   const onSubmitError = useCallback(
@@ -192,6 +200,7 @@ const InputFormEditModal = ({
           onClose={onClose}
           onSubmitSuccess={onSubmitSuccess}
           onSubmitError={onSubmitError}
+          valueType={defaultValueType}
         />
       </Flex>
     </MyModal>
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx
index 9f61f9f8e..5a393fd10 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodeFormInput/index.tsx
@@ -145,7 +145,7 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
               )}
             </HStack>
 
-            <TableContainer>
+            <TableContainer borderWidth={'1px'} borderRadius={'md'} borderBottom="none">
               <Table bg={'white'}>
                 <Thead>
                   <Tr>
@@ -187,7 +187,6 @@ const NodeFormInput = ({ data, selected }: NodeProps<FlowNodeItemType>) => {
                             w={'16px'}
                             color={'myGray.600'}
                             cursor={'pointer'}
-                            ml={2}
                             _hover={{ color: 'red.500' }}
                             onClick={() => {
                               onDelete(item.key);
diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
index 9749490e9..0a18e5148 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/nodes/NodePluginIO/InputTypeConfig.tsx
@@ -149,7 +149,7 @@ const InputTypeConfig = ({
         </Flex>
 
         {/* value type */}
-        {valueType && (
+        {type === 'plugin' && (
           <Flex alignItems={'center'}>
             <FormLabel flex={'0 0 100px'} fontWeight={'medium'}>
               {t('common:core.module.Data Type')}