handle abort properly + finally clause to resolve (#6227)

web-app/src/hooks/useChat.ts

@@ -309,7 +309,7 @@ export const useChat = () => {
               let pendingDeltaCount = 0
               const reasoningProcessor = new ReasoningProcessor()
               const scheduleFlush = () => {
-                if (rafScheduled) return
+                if (rafScheduled || abortController.signal.aborted) return
                 rafScheduled = true
                 const doSchedule = (cb: () => void) => {
                   if (typeof requestAnimationFrame !== 'undefined') {
@@ -321,6 +321,12 @@ export const useChat = () => {
                   }
                 }
                 doSchedule(() => {
+                  // Check abort status before executing the scheduled callback
+                  if (abortController.signal.aborted) {
+                    rafScheduled = false
+                    return
+                  }
+
                   const currentContent = newAssistantThreadContent(
                     activeThread.id,
                     accumulatedText,
@@ -367,7 +373,13 @@ export const useChat = () => {
                 pendingDeltaCount = 0
                 rafScheduled = false
               }
+              try {
                 for await (const part of completion) {
+                  // Check if aborted before processing each part
+                  if (abortController.signal.aborted) {
+                    break
+                  }
+
                   // Error message
                   if (!part.choices) {
                     throw new Error(
@@ -398,11 +410,27 @@ export const useChat = () => {
                     scheduleFlush()
                   }
                 }
+              } finally {
+                // Always clean up scheduled RAF when stream ends (either normally or via abort)
+                if (rafHandle !== undefined) {
+                  if (typeof cancelAnimationFrame !== 'undefined') {
+                    cancelAnimationFrame(rafHandle)
+                  } else {
+                    clearTimeout(rafHandle)
+                  }
+                  rafHandle = undefined
+                  rafScheduled = false
+                }
+
+                // Only finalize and flush if not aborted
+                if (!abortController.signal.aborted) {
                   // Finalize reasoning (close any open think tags)
                   accumulatedText += reasoningProcessor.finalize()
                   // Ensure any pending buffered content is rendered at the end
                   flushIfPending()
                 }
+              }
+            }
           } catch (error) {
             const errorMessage =
               error && typeof error === 'object' && 'message' in error