Feat: Interrupt streaming #6515 (#6723)

### What problem does this PR solve?

Feat: Interrupt streaming #6515
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/logic-hooks.ts

@@ -160,6 +160,11 @@ export const useSendMessageWithSse = (
   const [answer, setAnswer] = useState<IAnswer>({} as IAnswer);
   const [done, setDone] = useState(true);
   const timer = useRef<any>();
+  const sseRef = useRef<AbortController>();
+
+  const initializeSseRef = useCallback(() => {
+    sseRef.current = new AbortController();
+  }, []);
 
   const resetAnswer = useCallback(() => {
     if (timer.current) {
@@ -176,6 +181,7 @@ export const useSendMessageWithSse = (
       body: any,
       controller?: AbortController,
     ): Promise<{ response: Response; data: ResponseType } | undefined> => {
+      initializeSseRef();
       try {
         setDone(false);
         const response = await fetch(url, {
@@ -185,7 +191,7 @@ export const useSendMessageWithSse = (
             'Content-Type': 'application/json',
           },
           body: JSON.stringify(body),
-          signal: controller?.signal,
+          signal: controller?.signal || sseRef.current?.signal,
         });
 
         const res = response.clone().json();
@@ -230,10 +236,14 @@ export const useSendMessageWithSse = (
         console.warn(e);
       }
     },
-    [url, resetAnswer],
+    [initializeSseRef, url, resetAnswer],
   );
 
-  return { send, answer, done, setDone, resetAnswer };
+  const stopOutputMessage = useCallback(() => {
+    sseRef.current?.abort();
+  }, []);
+
+  return { send, answer, done, setDone, resetAnswer, stopOutputMessage };
 };
 
 export const useSpeechWithSse = (url: string = api.tts) => {