fix: variablesinit (#5247)

Author: c121914yu

projects/app/src/components/core/app/formRender/LabelAndForm.tsx

@@ -2,7 +2,7 @@ import type { BoxProps } from '@chakra-ui/react';
 import { Box, Flex } from '@chakra-ui/react';
 import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
 import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
-import React, { useMemo } from 'react';
+import React from 'react';
 import type { UseFormReturn } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 import InputRender from '.';
@@ -46,14 +46,13 @@ const LabelAndFormRender = ({
   const { control } = variablesForm;
 
   return (
-    <Box _notLast={{ mb: 4 }} px={1}>
+    <Box _notLast={{ mb: 4 }}>
       <Flex alignItems={'center'} mb={1}>
         <FormLabel required={required}>{label}</FormLabel>
         {placeholder && <QuestionTip ml={1} label={placeholder} />}
       </Flex>
 
       <Controller
-        key={formKey}
         control={control}
         name={formKey}
         rules={{

projects/app/src/components/core/app/formRender/utils.ts

@@ -11,7 +11,7 @@ export const variableInputTypeToInputType = (inputType: VariableInputEnum) => {
   if (inputType === VariableInputEnum.textarea) return InputTypeEnum.textarea;
   if (inputType === VariableInputEnum.numberInput) return InputTypeEnum.numberInput;
   if (inputType === VariableInputEnum.select) return InputTypeEnum.select;
-  return InputTypeEnum.textarea;
+  return InputTypeEnum.JSONEditor;
 };
 
 // 节点输入类型（通常是一个 reference+一个 form input）

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariableInputForm.tsx

@@ -37,16 +37,21 @@ const VariableInput = ({
     [allVariableList, showExternalVariables]
   );
 
-  const { getValues, setValue } = variablesForm;
+  const { getValues, setValue, reset } = variablesForm;
 
+  // Init variables and add default values
   useEffect(() => {
+    const values = getValues();
+
     allVariableList.forEach((item) => {
       const val = getValues(`variables.${item.key}`);
       if (item.defaultValue !== undefined && (val === undefined || val === null || val === '')) {
-        setValue(`variables.${item.key}`, item.defaultValue);
+        values.variables[item.key] = item.defaultValue;
       }
     });
-  }, [allVariableList, getValues, setValue, variableList]);
+
+    reset(values);
+  }, [allVariableList, getValues, reset, setValue, variableList]);
 
   return (
     <Box py={3}>
@@ -90,6 +95,7 @@ const VariableInput = ({
                 leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}
                 size={'sm'}
                 maxW={'100px'}
+                mt={4}
                 onClick={variablesForm.handleSubmit(() => {
                   chatForm.setValue('chatStarted', true);
                 })}
@@ -123,18 +129,17 @@ const VariableInput = ({
               />
             ))}
             {!chatStarted && (
-              <Box>
-                <Button
-                  leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}
-                  size={'sm'}
-                  maxW={'100px'}
-                  onClick={variablesForm.handleSubmit(() => {
-                    chatForm.setValue('chatStarted', true);
-                  })}
-                >
-                  {t('chat:start_chat')}
-                </Button>
-              </Box>
+              <Button
+                leftIcon={<MyIcon name={'core/chat/chatFill'} w={'16px'} />}
+                size={'sm'}
+                maxW={'100px'}
+                mt={4}
+                onClick={variablesForm.handleSubmit(() => {
+                  chatForm.setValue('chatStarted', true);
+                })}
+              >
+                {t('chat:start_chat')}
+              </Button>
             )}
           </Card>
         </Box>

projects/app/src/components/core/chat/ChatContainer/ChatBox/components/VariablePopover.tsx

@@ -29,16 +29,18 @@ const VariablePopover = ({
   const hasExternalVariable = externalVariableList.length > 0;
   const hasVariable = variableList.length > 0;
 
-  const { getValues, setValue } = variablesForm;
+  const { getValues, reset } = variablesForm;
 
   useEffect(() => {
+    const values = getValues();
     variables.forEach((item) => {
       const val = getValues(`variables.${item.key}`);
       if (item.defaultValue !== undefined && (val === undefined || val === null || val === '')) {
-        setValue(`variables.${item.key}`, item.defaultValue);
+        values.variables[item.key] = item.defaultValue;
       }
     });
-  }, [variables]);
+    reset(values);
+  }, [getValues, reset, variables]);
 
   return (
     <MyPopover
@@ -52,7 +54,7 @@ const VariablePopover = ({
       }
     >
       {({ onClose }) => (
-        <Box p={4}>
+        <Box p={4} maxH={'60vh'}>
           {hasExternalVariable && (
             <Box textAlign={'left'}>
               <Flex
@@ -83,7 +85,7 @@ const VariablePopover = ({
           )}
           {hasExternalVariable && hasVariable && <MyDivider h={'1px'} />}
           {hasVariable && (
-            <Box textAlign={'left'}>
+            <Box>
               {variableList.map((item) => (
                 <LabelAndFormRender
                   {...item}
@@ -97,11 +99,6 @@ const VariablePopover = ({
               ))}
             </Box>
           )}
-          <Flex w={'full'} justifyContent={'flex-end'}>
-            <Button size={'sm'} onClick={onClose}>
-              {t('common:Confirm')}
-            </Button>
-          </Flex>
         </Box>
       )}
     </MyPopover>