Add stop control to cancel active chat generation by jannismain · Pull Request #1305 · codecentric/c4-genai-suite

jannismain · 2026-02-20T16:01:58Z

Summary

add a stop action in the chat composer while AI output is streaming
wire stop action to cancel the active stream from conversation state
make stream cancellation abort the underlying SSE request so generation actually stops
keep UI state consistent on cancel (clear writing/streaming state and end reasoning-in-progress)
add/extend chat input unit coverage for stop behavior
patch Vitest setup storage shim for Node 25 compatibility in tests

Validation

cd frontend && npx vitest run src/pages/chat/conversation/ChatInput.ui-unit.spec.tsx
pre-commit checks via lint-staged: prettier, eslint, tsc -p tsconfig.json --noEmit

Copilot

Pull request overview

This PR adds the ability to cancel active chat generation by introducing a stop button in the chat composer that appears while AI output is streaming. The implementation properly wires the cancel action through the application layers, from UI to the underlying SSE request, ensuring clean state management when generation is stopped.

Changes:

Added AbortController-based stream cancellation to the SSE API client
Extended chat state management to properly clean up UI state when stopping generation, including ending reasoning-in-progress
Implemented stop button UI in chat input that replaces the submit button during streaming
Added Node 25 compatibility fix for test storage APIs

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
frontend/vitest.setup.ts	Adds storage shim for localStorage/sessionStorage to fix Node 25 compatibility in tests
frontend/src/api/state/apiAppClient.ts	Implements AbortController to enable cancellable SSE streams via Observable teardown
frontend/src/pages/chat/state/zustand/chatStore.ts	Updates cancelActiveStream to unsubscribe, clear streaming state, and end reasoning-in-progress
frontend/src/pages/chat/state/chat.ts	Exposes stopGeneration function that wraps cancelActiveStream
frontend/src/pages/chat/conversation/ConversationPage.tsx	Passes stopGeneration and isStreaming props to ChatInput
frontend/src/pages/chat/conversation/ChatInput.tsx	Adds stop button UI with IconX that appears during streaming, replaces submit functionality
frontend/src/pages/chat/conversation/ChatInput.ui-unit.spec.tsx	Adds unit test verifying stop generation is called when submit button clicked during streaming

Comments suppressed due to low confidence (1)

frontend/src/pages/chat/conversation/ChatInput.tsx:124

The event.preventDefault() call has been moved to the start of the function, but this changes behavior. Previously, preventDefault was only called when the form was actually submitted (after validation). Now it's called unconditionally, even when validation fails. This means the default form submission behavior is prevented even when the submission is blocked by validation checks. While this likely doesn't cause issues in practice since the early return prevents further execution, it represents an unnecessary change in logic flow. Consider moving event.preventDefault() back after the validation check, or add a comment explaining why it needs to be at the start.

  const doSubmit = useEventCallback((event: React.FormEvent) => {
    event.preventDefault();
    if (isDisabled || isStreaming || !input || input.length === 0 || upload.status === 'pending') {
      return;
    }
    doSetText(input, chatFiles);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

surt91 · 2026-02-24T15:52:01Z

related to #684

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

frontend/src/pages/chat/conversation/ChatInput.tsx:121

The doSubmit function checks upload.status === 'pending' to prevent submission during file uploads, but the button's disabled state on line 318 checks uploadMutations.some((m) => m.status === 'pending'). These should use the same logic for consistency. Consider using uploadMutations.some((m) => m.status === 'pending') in both places, or alternatively checking upload.status === 'pending' in both places.

    if (isDisabled || isStreaming || !input || input.length === 0 || upload.status === 'pending') {

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-27T12:29:59Z

  const doSubmit = useEventCallback((event: React.FormEvent) => {
-    if (isDisabled || !input || input.length === 0 || upload.status === 'pending') {
+    event.preventDefault();
+    if (isDisabled || isStreaming || !input || input.length === 0 || isUploadPending) {
      return;


When isStreaming is true, doSubmit returns early, so pressing Enter in the textarea cannot trigger stopGeneration (only clicking the icon button can). This makes the stop control inaccessible to keyboard-only users; consider handling Enter (or Escape) to call stopGeneration when streaming (and it exists), or otherwise provide an equivalent keyboard interaction.

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-01T15:33:50Z

        onerror(err) {
-          try {
-            subscriber.error(err);
-          } finally {
+          if (abortController.signal.aborted) {
            subscriber.complete();
+            return;
          }

+          subscriber.error(err);
          throw err;
        },
        onclose() {
          subscriber.complete();
        },
      }).catch((err) => {
+        if (abortController.signal.aborted) {
+          subscriber.complete();
+          return;
+        }
        subscriber.error(err);
-        subscriber.complete();
      });


streamPrompt: onerror calls subscriber.error(err) and then throws, which will reject the fetchEventSource(...) promise and flow into the .catch(...) handler. That makes the error-handling path harder to reason about (and can result in a second subscriber.error(...) call unless guarded). Consider emitting the error in only one place (either throw and let .catch call subscriber.error, or don’t call subscriber.error in .catch if onerror already did, or guard with a flag / subscriber.closed).

surt91 · 2026-03-12T09:56:30Z

There was a bug in our pipeline for external PRs (see also #1419). Please rebase this PR or merge main into it to eliminate spurious e2e test failures.

Also what is the relation between this PR and #1304?

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

+                  aria-label={isStreaming ? texts.accessibility.stopGenerating : texts.common.send}
+                  title={isStreaming ? texts.chat.stopGenerating : texts.chat.sendMessage}


        onerror(err) {
-          try {
-            subscriber.error(err);
-          } finally {
+          if (abortController.signal.aborted) {
            subscriber.complete();
+            return;
          }

+          subscriber.error(err);
          throw err;
        },
        onclose() {
          subscriber.complete();
        },
      }).catch((err) => {
+        if (abortController.signal.aborted) {
+          subscriber.complete();
+          return;
+        }
        subscriber.error(err);
-        subscriber.complete();
      });


Copilot

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

        next: (event) => sendEvent('message', event),
-        error: (err: Error) => sendEvent('error', err),
-        complete: () => response.end(),
+        error: (err: Error) => {
+          sendEvent('error', err);
+          cleanup(false);
+        },


+  @ApiNoContentResponse()
+  cancelMessage(@Req() req: Request, @Param('id', ParseIntPipe) id: number) {
+    this.activeChatStreams.cancel(id, req.user.id);
  }



  const sendMessage = (input: string, files?: FileDto[], editMessageId?: number) => {
    // Only cancel existing stream for this specific chat if we're starting a new message
+    void api.stream.cancelPrompt(chatId);


-  await expect(element).toBeVisible();
-  await element.click();
-  await page.waitForLoadState('networkidle');
+  await page.getByRole('option', { name: new RegExp(configuration.name) }).click();


…ex/stop-generation-button

Copilot

Pull request overview

Copilot reviewed 22 out of 23 changed files in this pull request and generated 3 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

  }, [chatId]);

  const listOfChatsStore = useListOfChatsStore();
+  const stopGeneration = () => {


  const sendMessage = (input: string, files?: FileDto[], editMessageId?: number) => {
    // Only cancel existing stream for this specific chat if we're starting a new message
+    void api.stream.cancelPrompt(chatId);
    chatStore.cancelActiveStream(chatId);



+  @ApiNoContentResponse()
+  cancelMessage(@Req() req: Request, @Param('id', ParseIntPipe) id: number) {
+    this.activeChatStreams.cancel(id, req.user.id);
  }


Copilot AI review requested due to automatic review settings February 20, 2026 16:01

Copilot started reviewing on behalf of jannismain February 20, 2026 16:02 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 27, 2026 10:10

jannismain force-pushed the codex/stop-generation-button branch from a32d859 to 4c3e76b Compare February 27, 2026 10:10

Copilot started reviewing on behalf of jannismain February 27, 2026 10:10 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 27, 2026 12:25

Copilot started reviewing on behalf of jannismain February 27, 2026 12:25 View session

jannismain force-pushed the codex/stop-generation-button branch from 1f594d5 to 121afdb Compare February 27, 2026 12:27

Copilot AI reviewed Feb 27, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings February 27, 2026 12:32

Copilot started reviewing on behalf of jannismain February 27, 2026 12:32 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

jannismain and others added 7 commits February 27, 2026 13:42

Add stop control to cancel active chat generation

b1b256e

Add Playwright test for stop button streaming cancellation

4a02771

Fix: prevent submission when upload is pending in chat input

40bacd0

Fix streaming message isolation after stop and extend regression test

4528f47

Add context-aware aria label to chat submit button

46af86e

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fixup(test): replace waitForTimeout with poll

f990a40

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

fix linting issues

4dde196

jannismain force-pushed the codex/stop-generation-button branch from 95cc104 to 4dde196 Compare February 27, 2026 12:42

Merge branch 'main' into codex/stop-generation-button

ac807b7

Copilot AI review requested due to automatic review settings March 1, 2026 15:30

Copilot started reviewing on behalf of jannismain March 1, 2026 15:30 View session

Copilot AI reviewed Mar 1, 2026

View reviewed changes

jannismain added 2 commits March 12, 2026 12:42

Merge branch 'main' into codex/stop-generation-button

75e4fd2

Merge branch 'main' into codex/stop-generation-button

21c911a

Copilot AI review requested due to automatic review settings March 13, 2026 09:06

Copilot started reviewing on behalf of jannismain March 13, 2026 09:06 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

Comment thread frontend/src/pages/chat/conversation/ChatInput.tsx Outdated

Potential fix for pull request finding

3a4dd59

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Copilot AI review requested due to automatic review settings March 13, 2026 11:49

Copilot started reviewing on behalf of jannismain March 13, 2026 11:50 View session

Copilot AI reviewed Mar 13, 2026

View reviewed changes

jannismain added 4 commits March 15, 2026 11:07

Merge branch 'main' into codex/stop-generation-button

15d0da5

fix: add missing i18n strings

0c6e466

test: reproduce tokens persisted after generation was stopped

b79352d

Synchronize stop cancellation across backend and frontend

1a6d910

Copilot AI review requested due to automatic review settings March 16, 2026 09:40

Copilot started reviewing on behalf of jannismain March 16, 2026 09:40 View session

Copilot AI reviewed Mar 16, 2026

View reviewed changes

jannismain added 2 commits March 16, 2026 10:46

Merge branch 'main' of github.com:codecentric/c4-genai-suite into cod…

1c65c39

…ex/stop-generation-button

fix: update api spec

f929b81

Copilot AI review requested due to automatic review settings March 16, 2026 10:15

Copilot started reviewing on behalf of jannismain March 16, 2026 10:15 View session

fix: update frontend with new api spec

285cc8a

Copilot AI reviewed Mar 16, 2026

View reviewed changes

Merge branch 'main' into codex/stop-generation-button

ef94a89

surt91 mentioned this pull request Apr 10, 2026

Claude/cancel button 684 l597o #859

Closed

		aria-label={isStreaming ? texts.accessibility.stopGenerating : texts.common.send}
		title={isStreaming ? texts.chat.stopGenerating : texts.chat.sendMessage}

Conversation

jannismain commented Feb 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Validation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

surt91 commented Feb 24, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 1, 2026

Choose a reason for hiding this comment

Uh oh!

surt91 commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jannismain commented Feb 20, 2026 •

edited

Loading

surt91 commented Mar 12, 2026 •

edited

Loading