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 && (