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/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) => {
-        pre.abort();
-        return new AbortController();
-      });
+      stopOutputMessage();
     },
-    [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,