perf: custom varialbe (#4225)

docSite/content/zh-cn/docs/development/upgrading/492.md

@@ -11,6 +11,7 @@ weight: 799
 ## 🚀 新增内容
 
 1. 知识库分块增加自定义分隔符预设值，同时支持自定义换行符分割。
+2. 外部变量改名：自定义变量。 并且支持在测试时调试，在分享链接中，该变量直接隐藏。
 
 ## ⚙️ 优化
 

packages/web/i18n/en/chat.json

@@ -59,6 +59,7 @@
   "to_dataset": "Go to the Knowledge Base",
   "unsupported_file_type": "Unsupported file types",
   "upload": "Upload",
+  "variable_invisable_in_share": "Custom variables are not visible in login-free links",
   "view_citations": "View References",
   "web_site_sync": "Web Site Sync"
 }

packages/web/i18n/en/common.json

@@ -430,8 +430,6 @@
   "core.chat.Start Chat": "Start Chat",
   "core.chat.Type a message": "Enter a Question, Press [Enter] to Send / Press [Ctrl(Alt/Shift) + Enter] for New Line",
   "core.chat.Unpin": "Unpin",
-  "core.chat.Variable_Visiable_in_test": "This variable is not visible in the login-free link",
-  "core.chat.Visiable_in_test": "Custom variables are not visible in login-free links",
   "core.chat.You need to a chat app": "You Do Not Have an Available App",
   "core.chat.error.Chat error": "Chat Error",
   "core.chat.error.Messages empty": "API Content is Empty, Possibly Due to Text Being Too Long",

packages/web/i18n/zh-CN/chat.json

@@ -59,6 +59,7 @@
   "to_dataset": "前往知识库",
   "unsupported_file_type": "不支持的文件类型",
   "upload": "上传",
+  "variable_invisable_in_share": "自定义变量在免登录链接中不可见",
   "view_citations": "查看引用",
   "web_site_sync": "Web站点同步"
 }

packages/web/i18n/zh-CN/common.json

@@ -433,8 +433,6 @@
   "core.chat.Start Chat": "开始对话",
   "core.chat.Type a message": "输入问题，发送 [Enter]/换行 [Ctrl(Alt/Shift) + Enter]",
   "core.chat.Unpin": "取消置顶",
-  "core.chat.Variable_Visiable_in_test": "该变量在免登录链接中不可见",
-  "core.chat.Visiable_in_test": "自定义变量在免登录链接中不可见",
   "core.chat.You need to a chat app": "你没有可用的应用",
   "core.chat.error.Chat error": "对话出现异常",
   "core.chat.error.Messages empty": "接口内容为空，可能文本超长了~",

packages/web/i18n/zh-Hant/chat.json

@@ -58,6 +58,7 @@
   "to_dataset": "前往知識庫",
   "unsupported_file_type": "不支援的檔案類型",
   "upload": "上傳",
+  "variable_invisable_in_share": "自定義變量在免登錄鏈接中不可見",
   "view_citations": "檢視引用",
   "web_site_sync": "網站同步"
 }

packages/web/i18n/zh-Hant/common.json

@@ -429,8 +429,6 @@
   "core.chat.Start Chat": "開始對話",
   "core.chat.Type a message": "輸入問題，按 [Enter] 傳送 / 按 [Ctrl(Alt/Shift) + Enter] 換行",
   "core.chat.Unpin": "取消釘選",
-  "core.chat.Variable_Visiable_in_test": "該變量在免登錄鏈接中不可見",
-  "core.chat.Visiable_in_test": "自定義變量在免登錄鏈接中不可見",
   "core.chat.You need to a chat app": "您沒有可用的應用程式",
   "core.chat.error.Chat error": "對話發生錯誤",
   "core.chat.error.Messages empty": "API 內容為空，可能是文字過長",

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