Request cancellation with E2E tests and fixups (#229)

Co-authored-by: Dhruv <dhruv166arya@gmail.com>

Author: dokterbob

.github/workflows/ci.yml

@@ -7,13 +7,21 @@ on:
     branches: ["**"]
   workflow_dispatch:
 
+permissions: {}
+
 env:
   DOCKER_IMAGE_NAME: ghcr.io/synergyai-nl/svelte-langgraph-frontend
 
 jobs:
   ci-job:
     name: "CI Job"
     runs-on: "ubuntu-latest"
+    permissions:
+      contents: read       # checkout
+      checks: write        # run-report-action
+      pull-requests: write # run-report-action, moon-ci-retrospect
+      statuses: write      # moon-ci-retrospect
+      actions: write       # setup-toolchain cache
     steps:
       - uses: actions/checkout@v5
         with:
@@ -22,7 +30,11 @@ jobs:
         with:
           cache-base: main
           auto-install: true
-      - run: "moon ci --color"
+      - uses: nick-fields/retry@v3
+        with:
+          timeout_minutes: 5
+          max_attempts: 3
+          command: "moon ci --color"
       - uses: moonrepo/run-report-action@v1
         if: success() || failure()
         with:
@@ -61,6 +73,9 @@ jobs:
   build:
     name: "Docker Build"
     runs-on: ubuntu-latest
+    permissions:
+      contents: read  # checkout
+      packages: write # push to ghcr.io
     outputs:
       image_version: ${{ steps.meta.outputs.version }}
     steps:

apps/frontend/src/lib/components/Chat.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Client, type Thread } from '@langchain/langgraph-sdk';
+	import { Client, type HumanMessage, type Thread } from '@langchain/langgraph-sdk';
 	import { streamAnswer } from '$lib/langgraph/streamAnswer.js';
 	import { convertThreadMessages } from '$lib/langgraph/utils.js';
 	import ChatInput from './ChatInput.svelte';
@@ -39,6 +39,8 @@
 	let generationError = $state<Error | null>(null);
 	let last_user_message = $state<string>('');
 
+	let generateController: AbortController | null;
+
 	// Load existing messages from thread on component initialization
 	onMount(() => {
 		if (thread?.values?.messages && thread.values.messages.length > 0) {
@@ -118,17 +120,25 @@
 			final_answer_started = false;
 			generationError = null; // Clear previous errors
 
+			generateController = new AbortController();
+			const signal = generateController.signal;
+
+			const inputMessage: HumanMessage = { type: 'human', content: messageText, id: messageId };
+
 			try {
 				for await (const chunk of streamAnswer(
 					langGraphClient,
 					thread.thread_id,
 					assistantId,
-					messageText,
-					messageId
+					inputMessage,
+					signal
 				))
 					updateMessages(chunk);
-			} catch (err) {
-				if (err instanceof Error) generationError = err;
+			} catch (e) {
+				// Aborted by user, ignore.
+				if (e instanceof DOMException && e.name === 'AbortError') return;
+
+				if (e instanceof Error) generationError = e;
 				error(500, {
 					message: 'Error during generation'
 				});
@@ -144,6 +154,14 @@
 			submitInputOrRetry(true);
 		}
 	}
+
+	async function stopGeneration() {
+		if (!generateController)
+			throw Error(
+				'Unable to cancel null generateController. This is a bug! Was a generation running? Was an abort controller passed?'
+			);
+		generateController.abort();
+	}
 </script>
 
 <div class="flex h-[calc(100vh-4rem)] flex-col">
@@ -167,5 +185,10 @@
 			/>
 		{/if}
 	</div>
-	<ChatInput bind:value={current_input} isStreaming={is_streaming} onSubmit={submitInputOrRetry} />
+	<ChatInput
+		bind:value={current_input}
+		isStreaming={is_streaming}
+		onSubmit={submitInputOrRetry}
+		onStop={() => stopGeneration()}
+	/>
 </div>

apps/frontend/src/lib/components/Chat.svelte.test.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect, vi } from 'vitest';
-import { screen, waitFor } from '@testing-library/svelte';
+import { screen, waitFor, within } from '@testing-library/svelte';
 import { userEvent } from '@testing-library/user-event';
 import { renderWithProviders } from './__tests__/render';
 import { anAIMessage } from './__tests__/fixtures';
@@ -106,8 +106,12 @@ describe('Chat', () => {
 					mockClient,
 					'test-123',
 					'assistant-1',
-					'Tell me about AI',
-					expect.any(String)
+					expect.objectContaining({
+						type: 'human',
+						content: 'Tell me about AI',
+						id: expect.any(String)
+					}),
+					expect.any(AbortSignal)
 				);
 			});
 		});
@@ -157,6 +161,88 @@ describe('Chat', () => {
 		});
 	});
 
+	describe('when stop is clicked', () => {
+		test('stop button aborts the stream signal', async () => {
+			const user = userEvent.setup();
+			let capturedSignal: AbortSignal | undefined;
+
+			vi.mocked(streamAnswer).mockImplementation(async function* (_c, _t, _a, _im, signal) {
+				capturedSignal = signal;
+				yield anAIMessage({ text: 'Partial...' });
+				await new Promise<void>((r) => signal.addEventListener('abort', () => r()));
+			});
+
+			renderChat();
+			await user.type(screen.getByPlaceholderText('Message...'), 'Hello');
+			await user.keyboard('{Enter}');
+
+			const form = document.getElementById('input_form')!;
+			const stopButton = await within(form).findByRole('button');
+			await user.click(stopButton);
+
+			expect(capturedSignal?.aborted).toBe(true);
+		});
+
+		test('aborting stream shows no error', async () => {
+			const user = userEvent.setup();
+			vi.mocked(streamAnswer).mockImplementation(async function* () {
+				const empty: Message[] = [];
+				yield* empty;
+				throw new DOMException('Aborted', 'AbortError');
+			});
+
+			renderChat();
+			await user.type(screen.getByPlaceholderText('Message...'), 'Hello');
+			await user.keyboard('{Enter}');
+
+			await waitFor(() => {
+				expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+				expect(screen.getByRole('textbox')).not.toBeDisabled();
+			});
+		});
+
+		test('partial messages are preserved after stopping', async () => {
+			const user = userEvent.setup();
+
+			vi.mocked(streamAnswer).mockImplementation(async function* (_c, _t, _a, _im, signal) {
+				yield anAIMessage({ text: 'Partial response' });
+				await new Promise<void>((r) => signal.addEventListener('abort', () => r()));
+			});
+
+			renderChat();
+			await user.type(screen.getByPlaceholderText('Message...'), 'Hello');
+			await user.keyboard('{Enter}');
+
+			await screen.findByText('Partial response');
+
+			const stopButton = within(document.getElementById('input_form')!).getByRole('button');
+			await user.click(stopButton);
+
+			await waitFor(() => {
+				expect(screen.getByText('Partial response')).toBeInTheDocument();
+			});
+		});
+
+		test('input is re-enabled after stopping', async () => {
+			const user = userEvent.setup();
+
+			vi.mocked(streamAnswer).mockImplementation(async function* (_c, _t, _a, _im, signal) {
+				yield anAIMessage({ text: 'Partial...' });
+				await new Promise<void>((r) => signal.addEventListener('abort', () => r()));
+			});
+
+			renderChat();
+			await user.type(screen.getByPlaceholderText('Message...'), 'Hello');
+			await user.keyboard('{Enter}');
+
+			await waitFor(() => expect(screen.getByRole('textbox')).toBeDisabled());
+
+			await user.click(within(document.getElementById('input_form')!).getByRole('button'));
+
+			await waitFor(() => expect(screen.getByRole('textbox')).not.toBeDisabled());
+		});
+	});
+
 	describe('when rendered with existing thread messages', () => {
 		test('displays messages view immediately', async () => {
 			const existingMessages = [

apps/frontend/src/lib/components/ChatInput.svelte

@@ -7,13 +7,15 @@
 		value: string;
 		isStreaming?: boolean;
 		onSubmit: () => void;
+		onStop?: () => void;
 		placeholder?: string;
 	}
 
 	let {
 		value = $bindable(''),
 		isStreaming = false,
 		onSubmit,
+		onStop,
 		placeholder = m.chat_input_placeholder()
 	}: Props = $props();
 
@@ -52,7 +54,7 @@
 
 				<!-- Submit button -->
 				<div class="flex shrink-0 items-end pb-1">
-					<SubmitButton {isStreaming} disabled={isStreaming || isEmpty} />
+					<SubmitButton {isStreaming} disabled={isStreaming || isEmpty} {onStop} />
 				</div>
 			</div>
 		</form>

apps/frontend/src/lib/components/ChatInput.svelte.test.ts

@@ -58,16 +58,25 @@ describe('ChatInput', () => {
 	});
 
 	describe('when isStreaming is true', () => {
-		beforeEach(() => {
+		test('disables the textarea', () => {
 			renderChatInput({ value: 'Hello', isStreaming: true });
+			expect(screen.getByRole('textbox')).toBeDisabled();
 		});
 
-		test('disables the textarea', () => {
-			expect(screen.getByRole('textbox')).toBeDisabled();
+		test('shows enabled stop button', () => {
+			renderChatInput({ value: 'Hello', isStreaming: true });
+			expect(screen.getByRole('button')).not.toBeDisabled();
 		});
 
-		test('disables the submit button', () => {
-			expect(screen.getByRole('button')).toBeDisabled();
+		test('calls onStop when stop button is clicked', async () => {
+			const user = userEvent.setup();
+			const onStop = vi.fn();
+			renderChatInput({ value: 'Hello', isStreaming: true, onStop });
+
+			const button = screen.getByRole('button');
+			await user.click(button);
+
+			expect(onStop).toHaveBeenCalled();
 		});
 	});
 

apps/frontend/src/lib/components/SubmitButton.svelte

@@ -1,26 +1,34 @@
 <script lang="ts">
-	import { Spinner } from '$lib/components/ui/spinner';
-	import { SendHorizontal } from '@lucide/svelte';
+	import { SendHorizontal, Square } from '@lucide/svelte';
 	import { Button } from '$lib/components/ui/button';
 
 	interface Props {
 		isStreaming: boolean;
 		disabled: boolean;
+		onStop?: () => void;
 	}
 
-	let { isStreaming, disabled }: Props = $props();
+	let { isStreaming, disabled, onStop }: Props = $props();
 </script>
 
-<Button
-	type="submit"
-	{disabled}
-	size="icon-sm"
-	variant="default"
-	class="bg-primary-600 hover:bg-primary-700 flex h-8 w-8 shrink-0 items-center justify-center rounded-full p-0 text-white shadow-sm disabled:cursor-not-allowed disabled:bg-gray-300"
->
-	{#if isStreaming}
-		<Spinner />
-	{:else}
+{#if isStreaming}
+	<Button
+		type="button"
+		size="icon-sm"
+		variant="destructive"
+		class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full p-0 text-white shadow-sm"
+		onclick={onStop}
+	>
+		<Square class="h-4 w-4" />
+	</Button>
+{:else}
+	<Button
+		type="submit"
+		{disabled}
+		size="icon-sm"
+		variant="default"
+		class="bg-primary-600 hover:bg-primary-700 flex h-8 w-8 shrink-0 items-center justify-center rounded-full p-0 text-white shadow-sm disabled:cursor-not-allowed disabled:bg-gray-300"
+	>
 		<SendHorizontal />
-	{/if}
-</Button>
+	</Button>
+{/if}

apps/frontend/src/lib/components/SubmitButton.svelte.test.ts

@@ -27,8 +27,10 @@ describe('SubmitButton', () => {
 			renderComponent({ isStreaming: true, disabled: false });
 		});
 
-		test('shows the spinner instead of send icon', () => {
-			expect(screen.getByRole('status', { name: 'Loading' })).toBeInTheDocument();
+		test('shows stop button instead of submit button', () => {
+			const button = screen.getByRole('button');
+			expect(button).toBeInTheDocument();
+			expect(button).toHaveAttribute('type', 'button');
 		});
 	});