4.8 test fix (#1385)

* fix: tool name cannot startwith number

* fix: chatbox update

* fix: chatbox

* perf: drag ui

* perf: drag component

* drag component

projects/app/src/components/ChatBox/components/VariableInput.tsx

@@ -1,5 +1,5 @@
 import { VariableItemType } from '@fastgpt/global/core/app/type.d';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { UseFormReturn } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 import { Box, Button, Card, Input, Textarea } from '@chakra-ui/react';
@@ -24,10 +24,23 @@ const VariableInput = ({
   chatForm: UseFormReturn<ChatBoxInputFormType>;
 }) => {
   const { t } = useTranslation();
-  const [refresh, setRefresh] = useState(false);
-  const { register, setValue, handleSubmit: handleSubmitChat, watch } = chatForm;
+  const { register, unregister, setValue, handleSubmit: handleSubmitChat, watch } = chatForm;
   const variables = watch('variables');
 
+  useEffect(() => {
+    // 重新注册所有字段
+    variableModules.forEach((item) => {
+      register(`variables.${item.key}`, { required: item.required });
+    });
+
+    return () => {
+      // 组件卸载时注销所有字段
+      variableModules.forEach((item) => {
+        unregister(`variables.${item.key}`);
+      });
+    };
+  }, [register, unregister, variableModules]);
+
   return (
     <Box py={3}>
       {/* avatar */}
@@ -92,7 +105,6 @@ const VariableInput = ({
                   value={variables[item.key]}
                   onchange={(e) => {
                     setValue(`variables.${item.key}`, e);
-                    setRefresh((state) => !state);
                   }}
                 />
               )}
@@ -116,4 +128,4 @@ const VariableInput = ({
   );
 };
 
-export default React.memo(VariableInput);
+export default VariableInput;

projects/app/src/components/ChatBox/index.tsx

@@ -158,12 +158,6 @@ const ChatBox = (
     isChatting
   } = useChatProviderStore();
 
-  /* variable */
-  const filterVariableModules = useMemo(
-    () => variableModules.filter((item) => item.type !== VariableInputEnum.custom),
-    [variableModules]
-  );
-
   // compute variable input is finish.
   const chatForm = useForm<ChatBoxInputFormType>({
     defaultValues: {
@@ -174,9 +168,15 @@ const ChatBox = (
     }
   });
   const { setValue, watch, handleSubmit } = chatForm;
-  const variables = watch('variables');
   const chatStarted = watch('chatStarted');
-  const variableIsFinish = useMemo(() => {
+
+  /* variable */
+  const variables = watch('variables');
+  const filterVariableModules = useMemo(
+    () => variableModules.filter((item) => item.type !== VariableInputEnum.custom),
+    [variableModules]
+  );
+  const variableIsFinish = (() => {
     if (!filterVariableModules || filterVariableModules.length === 0 || chatHistories.length > 0)
       return true;
 
@@ -188,7 +188,7 @@ const ChatBox = (
     }
 
     return chatStarted;
-  }, [filterVariableModules, chatHistories.length, chatStarted, variables]);
+  })();
 
   // 滚动到底部
   const scrollToBottom = (behavior: 'smooth' | 'auto' = 'smooth') => {
@@ -360,6 +360,12 @@ const ChatBox = (
     [questionGuide, shareId, outLinkUid, teamId, teamToken]
   );
 
+  /* Abort chat completions, questionGuide */
+  const abortRequest = useCallback(() => {
+    chatController.current?.abort('stop');
+    questionGuideController.current?.abort('stop');
+  }, []);
+
   /**
    * user confirm send prompt
    */
@@ -383,6 +389,8 @@ const ChatBox = (
           return;
         }
 
+        abortRequest();
+
         text = text.trim();
 
         if (!text && files.length === 0) {
@@ -472,7 +480,8 @@ const ChatBox = (
             generatingMessage: (e) => generatingMessage({ ...e, autoTTSResponse }),
             variables
           });
-          setValue('variables', newVariables || []);
+
+          newVariables && setValue('variables', newVariables);
 
           isNewChatReplace.current = isNewChat;
 
@@ -540,6 +549,7 @@ const ChatBox = (
       })();
     },
     [
+      abortRequest,
       chatHistories,
       createQuestionGuide,
       finishSegmentedAudio,
@@ -710,7 +720,7 @@ const ChatBox = (
         });
       };
     },
-    [appId, chatId, feedbackType, teamId, teamToken]
+    [appId, chatId, feedbackType, setChatHistories, teamId, teamToken]
   );
   const onADdUserDislike = useCallback(
     (chat: ChatSiteItemType) => {
@@ -747,7 +757,7 @@ const ChatBox = (
         return () => setFeedbackId(chat.dataId);
       }
     },
-    [appId, chatId, feedbackType, outLinkUid, shareId, teamId, teamToken]
+    [appId, chatId, feedbackType, outLinkUid, setChatHistories, shareId, teamId, teamToken]
   );
   const onReadUserDislike = useCallback(
     (chat: ChatSiteItemType) => {
@@ -868,6 +878,7 @@ const ChatBox = (
       setValue('variables', e || defaultVal);
     },
     resetHistory(e) {
+      abortRequest();
       setValue('chatStarted', e.length > 0);
       setChatHistories(e);
     },