stop gen

src/routes/canvas/chat-node.svelte

@@ -10,6 +10,7 @@
 	import IconLoading from "~icons/lucide/loader-2";
 	import IconAdd from "~icons/lucide/plus";
 	import IconX from "~icons/lucide/x";
+	import IconStop from "~icons/lucide/square";
 	import type { ChatCompletionInputMessage } from "@huggingface/tasks";
 	import ModelPicker from "./model-picker.svelte";
 	import ProviderPicker from "./provider-picker.svelte";
@@ -32,6 +33,7 @@
 	const autosized = new TextareaAutosize();
 
 	let isLoading = $state(false);
+	let abortController = $state<AbortController | null>(null);
 
 	const history = $derived.by(function getNodeHistory() {
 		const node = nodes.current.find(n => n.id === id);
@@ -63,6 +65,7 @@
 	async function handleSubmit(e: SubmitEvent) {
 		e.preventDefault();
 		isLoading = true;
+		abortController = new AbortController();
 		updateNodeData(id, { response: "" });
 
 		try {
@@ -86,23 +89,47 @@
 				return res;
 			});
 
-			const stream = client.chatCompletionStream({
-				// eslint-disable-next-line @typescript-eslint/no-explicit-any
-				provider: (data.provider || "auto") as any,
-				model: data.modelId,
-				messages,
-				temperature: 0.5,
-				top_p: 0.7,
-			});
+			const stream = client.chatCompletionStream(
+				{
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any
+					provider: (data.provider || "auto") as any,
+					model: data.modelId,
+					messages,
+					temperature: 0.5,
+					top_p: 0.7,
+				},
+				{
+					signal: abortController.signal,
+				},
+			);
 
 			for await (const chunk of stream) {
+				if (abortController.signal.aborted) {
+					break;
+				}
 				if (chunk.choices && chunk.choices.length > 0) {
 					const newContent = chunk.choices[0]?.delta.content ?? "";
 					updateNodeData(id, { response: data.response + newContent });
 				}
 			}
+		} catch (error) {
+			if (error instanceof Error && error.name === "AbortError") {
+				// Generation was aborted, this is expected
+				return;
+			}
+			// Re-throw other errors
+			throw error;
 		} finally {
 			isLoading = false;
+			abortController = null;
+		}
+	}
+
+	function stopGeneration(e: MouseEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		if (abortController) {
+			abortController.abort();
 		}
 	}
 
@@ -143,17 +170,17 @@
 		</div>
 
 		<button
-			type="submit"
-			disabled={isLoading}
+			type={isLoading ? "button" : "submit"}
+			onclick={isLoading ? stopGeneration : undefined}
 			class="flex items-center justify-center gap-2 self-center rounded-xl
 			bg-black px-6 py-2.5 text-sm font-medium
 			text-white transition-all hover:scale-[1.02] hover:bg-gray-900
 			focus:ring-2 focus:ring-gray-900/20 focus:outline-none
-			active:scale-[0.98] disabled:cursor-not-allowed disabled:opacity-50"
+			active:scale-[0.98]"
 		>
 			{#if isLoading}
-				<IconLoading class="h-4 w-4 animate-spin" />
-				Sending...
+				<IconStop class="h-4 w-4" />
+				Stop Generation
 			{:else}
 				Send Message
 			{/if}
@@ -162,14 +189,16 @@
 
 	{#if data.response || isLoading}
 		<div class="mt-4 rounded-lg border border-gray-100 bg-gray-50/50 p-4">
-			<div class="mb-2 text-xs font-medium text-gray-600">Response</div>
+			<div class="mb-2 flex items-center gap-2 text-xs font-medium text-gray-600">
+				Response
+				{#if isLoading}
+					<IconLoading class="h-3 w-3 animate-spin" />
+				{/if}
+			</div>
 			{#if data.response}
 				<pre class="text-sm leading-relaxed whitespace-pre-wrap text-gray-800">{data.response}</pre>
 			{:else if isLoading}
-				<div class="flex items-center gap-2 text-sm text-gray-500">
-					<IconLoading class="h-4 w-4 animate-spin" />
-					Generating response...
-				</div>
+				<div class="text-sm text-gray-500">Generating response...</div>
 			{/if}
 		</div>
 	{/if}

src/routes/canvas/model-picker.svelte

@@ -151,6 +151,9 @@
 			e.preventDefault();
 			virtualScroll.container.onscroll(e);
 		}}
+		onwheel={e => {
+			e.stopPropagation();
+		}}
 	>
 		<!-- Virtualized model list -->
 		{#snippet modelEntry(model: Model | CustomModel, trending?: boolean)}