perf: custom varialbe (#4225)

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

@@ -126,22 +126,10 @@ export const ExternalVariableInputItem = ({
   const { t } = useTranslation();
   const { register, control } = variablesForm;
 
-  return (
-    <Box key={item.id} mb={4} pl={1}>
-      <Box
-        as={'label'}
-        display={'flex'}
-        position={'relative'}
-        mb={1}
-        alignItems={'center'}
-        w={'full'}
-      >
+  const Label = useMemo(() => {
+    return (
+      <Box display={'flex'} position={'relative'} mb={1} alignItems={'center'} w={'full'}>
         {item.label}
-        {item.required && (
-          <Box position={'absolute'} top={'-2px'} left={'-8px'} color={'red.500'}>
-            *
-          </Box>
-        )}
         {item.description && <QuestionTip ml={1} label={item.description} />}
         {showTag && (
           <Flex
@@ -155,22 +143,19 @@ export const ExternalVariableInputItem = ({
             rounded={'sm'}
           >
             <MyIcon name={'common/info'} color={'primary.600'} w={4} />
-            {t('common:core.chat.Variable_Visiable_in_test')}
+            {t('chat:variable_invisable_in_share')}
           </Flex>
         )}
       </Box>
+    );
+  }, [item.description, item.label, showTag, t]);
+
+  return (
+    <Box key={item.id} mb={4} pl={1}>
+      {Label}
       <Controller
         control={control}
         name={`variables.${item.key}`}
-        rules={{
-          required: item.required,
-          validate: (value) => {
-            if (item.valueType === WorkflowIOValueTypeEnum.boolean) {
-              return value !== undefined;
-            }
-            return !!value;
-          }
-        }}
         render={({ field: { onChange, value } }) => {
           if (item.valueType === WorkflowIOValueTypeEnum.string) {
             return (
@@ -179,9 +164,7 @@ export const ExternalVariableInputItem = ({
                 minH={40}
                 maxH={160}
                 bg={'myGray.50'}
-                {...register(`variables.${item.key}`, {
-                  required: item.required
-                })}
+                {...register(`variables.${item.key}`)}
               />
             );
           }
@@ -231,7 +214,7 @@ const VariableInput = ({
         setValue(`variables.${item.key}`, item.defaultValue);
       }
     });
-  }, [variableList]);
+  }, [allVariableList, getValues, setValue, variableList]);
 
   return (
     <Box py={3}>
@@ -257,7 +240,7 @@ const VariableInput = ({
               rounded={'sm'}
             >
               <MyIcon name={'common/info'} color={'primary.600'} w={4} />
-              {t('common:core.chat.Visiable_in_test')}
+              {t('chat:variable_invisable_in_share')}
             </Flex>
             {externalVariableList.map((item) => (
               <ExternalVariableInputItem key={item.id} item={item} variablesForm={variablesForm} />

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

@@ -65,7 +65,7 @@ const VariablePopover = ({
                 rounded={'sm'}
               >
                 <MyIcon name={'common/info'} color={'primary.600'} w={4} />
-                {t('common:core.chat.Visiable_in_test')}
+                {t('chat:variable_invisable_in_share')}
               </Flex>
               {externalVariableList.map((item) => (
                 <ExternalVariableInputItem

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

@@ -921,14 +921,14 @@ const ChatBox = ({
 
     const container = ScrollContainerRef.current;
     if (container) {
-      container.addEventListener('scroll', checkVariableVisibility);
       checkVariableVisibility();
+      container.addEventListener('scroll', checkVariableVisibility);
 
       return () => {
         container.removeEventListener('scroll', checkVariableVisibility);
       };
     }
-  }, [setIsVariableVisible]);
+  }, [chatType, setIsVariableVisible]);
 
   const RenderRecords = useMemo(() => {
     return (

projects/app/src/components/core/chat/ChatContainer/PluginRunBox/components/renderPluginInput.tsx

@@ -255,7 +255,7 @@ const RenderPluginInput = ({
               rounded={'sm'}
             >
               <MyIcon name={'common/info'} color={'primary.600'} w={4} />
-              {t('common:core.chat.Variable_Visiable_in_test')}
+              {t('chat:variable_invisable_in_share')}
             </Flex>
           )}
         </Flex>

projects/app/src/pageComponents/app/detail/SimpleApp/ChatTest.tsx

@@ -70,7 +70,7 @@ const ChatTest = ({ appForm, setRenderEdit }: Props) => {
           <Box fontSize={['md', 'lg']} fontWeight={'bold'} color={'myGray.900'} mr={3}>
             {t('app:chat_debug')}
           </Box>
-          {!isVariableVisible && <VariablePopover showExternalVariables={true} />}
+          {!isVariableVisible && <VariablePopover showExternalVariables />}
           <Box flex={1} />
           <MyTooltip label={t('common:core.chat.Restart')}>
             <IconButton

projects/app/src/pageComponents/app/detail/WorkflowComponents/Flow/ChatTest.tsx

@@ -121,7 +121,7 @@ const ChatTest = ({ isOpen, nodes = [], edges = [], onClose }: Props) => {
               <MyIcon name={'common/paused'} w={'14px'} mr={2.5} />
               {t('common:core.chat.Run test')}
             </Flex>
-            {!isVariableVisible && <VariablePopover showExternalVariables={true} />}
+            {!isVariableVisible && <VariablePopover showExternalVariables />}
             <Box flex={1} />
             <MyTooltip label={t('common:core.chat.Restart')}>
               <IconButton