Fix: When I click to interrupt the chat, the page reports an error #10553 (#10554)

### What problem does this PR solve?
Fix: When I click to interrupt the chat, the page reports an error
#10553

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx

@@ -44,6 +44,7 @@ import { useAddChatBox } from '../use-add-box';
 type MultipleChatBoxProps = {
   controller: AbortController;
   chatBoxIds: string[];
+  stopOutputMessage(): void;
 } & Pick<
   ReturnType<typeof useAddChatBox>,
   'removeChatBox' | 'addChatBox' | 'chatBoxIds'
@@ -200,6 +201,7 @@ export function MultipleChatBox({
   chatBoxIds,
   removeChatBox,
   addChatBox,
+  stopOutputMessage,
 }: MultipleChatBoxProps) {
   const {
     value,
@@ -207,7 +209,6 @@ export function MultipleChatBox({
     messageRecord,
     handleInputChange,
     handlePressEnter,
-    stopOutputMessage,
     setFormRef,
     handleUploadFile,
   } = useSendMultipleChatMessage(controller, chatBoxIds);

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -20,9 +20,10 @@ import { buildMessageItemReference } from '../../utils';
 
 interface IProps {
   controller: AbortController;
+  stopOutputMessage(): void;
 }
 
-export function SingleChatBox({ controller }: IProps) {
+export function SingleChatBox({ controller, stopOutputMessage }: IProps) {
   const {
     value,
     scrollRef,
@@ -34,7 +35,6 @@ export function SingleChatBox({ controller }: IProps) {
     handlePressEnter,
     regenerateMessage,
     removeMessageById,
-    stopOutputMessage,
     handleUploadFile,
     removeFile,
   } = useSendMessage(controller);

web/src/pages/next-chats/chat/index.tsx

@@ -39,7 +39,7 @@ export default function Chat() {
   const { t } = useTranslation();
   const { data: conversation } = useFetchConversation();
 
-  const { handleConversationCardClick, controller } =
+  const { handleConversationCardClick, controller, stopOutputMessage } =
     useHandleClickConversationCard();
   const { visible: settingVisible, switchVisible: switchSettingVisible } =
     useSetModalState(true);
@@ -74,6 +74,7 @@ export default function Chat() {
           controller={controller}
           removeChatBox={removeChatBox}
           addChatBox={addChatBox}
+          stopOutputMessage={stopOutputMessage}
         ></MultipleChatBox>
       </section>
     );
@@ -129,7 +130,10 @@ export default function Chat() {
                 </CardTitle>
               </CardHeader>
               <CardContent className="flex-1 p-0 min-h-0">
-                <SingleChatBox controller={controller}></SingleChatBox>
+                <SingleChatBox
+                  controller={controller}
+                  stopOutputMessage={stopOutputMessage}
+                ></SingleChatBox>
               </CardContent>
             </Card>
             {settingVisible && (

web/src/pages/next-chats/hooks/use-click-card.ts

@@ -5,16 +5,20 @@ export function useHandleClickConversationCard() {
   const [controller, setController] = useState(new AbortController());
   const { handleClickConversation } = useClickConversationCard();
 
+  const stopOutputMessage = useCallback(() => {
+    setController((pre) => {
+      pre.abort();
+      return new AbortController();
+    });
+  }, []);
+
   const handleConversationCardClick = useCallback(
     (conversationId: string, isNew: boolean) => {
       handleClickConversation(conversationId, isNew ? 'true' : '');
-      setController((pre) => {
+      stopOutputMessage();
-        pre.abort();
-        return new AbortController();
-      });
     },
-    [handleClickConversation],
+    [handleClickConversation, stopOutputMessage],
   );
 
-  return { controller, handleConversationCardClick };
+  return { controller, handleConversationCardClick, stopOutputMessage };
 }

web/src/pages/next-chats/hooks/use-send-chat-message.ts

@@ -123,10 +123,6 @@ export const useSendMessage = (controller: AbortController) => {
     [getConversationIsNew, handleUploadFile, setConversation],
   );
 
-  const stopOutputMessage = useCallback(() => {
-    controller.abort();
-  }, [controller]);
-
   const sendMessage = useCallback(
     async ({
       message,
@@ -249,7 +245,6 @@ export const useSendMessage = (controller: AbortController) => {
     messageContainerRef,
     derivedMessages,
     removeMessageById,
-    stopOutputMessage,
     handleUploadFile: onUploadFile,
     isUploading,
     removeFile,

web/src/pages/next-chats/hooks/use-send-multiple-message.ts

@@ -35,10 +35,6 @@ export function useSendMultipleChatMessage(
   const { setFormRef, getLLMConfigById, isLLMConfigEmpty } =
     useBuildFormRefs(chatBoxIds);
 
-  const stopOutputMessage = useCallback(() => {
-    controller.abort();
-  }, [controller]);
-
   const addNewestQuestion = useCallback(
     (message: Message, answer: string = '') => {
       setMessageRecord((pre) => {
@@ -236,7 +232,6 @@ export function useSendMultipleChatMessage(
     sendMessage,
     handleInputChange,
     handlePressEnter,
-    stopOutputMessage,
     sendLoading: !allDone,
     setFormRef,
     handleUploadFile,