refac

src/lib/components/notes/NoteEditor.svelte

@@ -120,6 +120,8 @@
 	let enhancing = false;
 	let streaming = false;
 
+	let stopResponseFlag = false;
+
 	let inputElement = null;
 
 	const init = async () => {
@@ -214,6 +216,11 @@
 		versionIdx = null;
 	}
 
+	const stopResponseHandler = async () => {
+		stopResponseFlag = true;
+		console.log('stopResponse', stopResponseFlag);
+	};
+
 	function setContentByVersion(versionIdx) {
 		if (!note.data.versions?.length) return;
 		let idx = versionIdx;
@@ -578,7 +585,13 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 
 			while (true) {
 				const { value, done } = await reader.read();
-				if (done) {
+				if (done || stopResponseFlag) {
+					if (stopResponseFlag) {
+						controller.abort('User: Stop Response');
+					}
+
+					enhancing = false;
+					streaming = false;
 					break;
 				}
 
@@ -1019,22 +1032,28 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 				</Tooltip> -->
 
 						<Tooltip content={$i18n.t('Enhance')} placement="top">
+							{#if enhancing}
 								<button
-								class="{enhancing
-									? 'p-2'
-									: 'p-2.5'} flex justify-center items-center hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full transition shrink-0"
+									class="p-2 flex justify-center items-center hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full transition shrink-0"
+									on:click={() => {
+										stopResponseHandler();
+									}}
+									type="button"
+								>
+									<Spinner className="size-5" />
+								</button>
+							{:else}
+								<button
+									class="p-2.5 flex justify-center items-center hover:bg-gray-50 dark:hover:bg-gray-800 rounded-full transition shrink-0"
 									on:click={() => {
 										enhanceNoteHandler();
 									}}
 									disabled={enhancing}
 									type="button"
 								>
-								{#if enhancing}
-									<Spinner className="size-5" />
-								{:else}
 									<SparklesSolid />
-								{/if}
 								</button>
+							{/if}
 						</Tooltip>
 					</div>
 				{/if}
@@ -1050,8 +1069,10 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 				bind:note
 				bind:enhancing
 				bind:streaming
+				bind:stopResponseFlag
 				{files}
 				onInsert={insertHandler}
+				onStop={stopResponseHandler}
 			/>
 		{:else if selectedPanel === 'settings'}
 			<Settings bind:show={showPanel} bind:selectedModelId />

src/lib/components/notes/NoteEditor/Chat.svelte

@@ -31,6 +31,7 @@
 
 	export let enhancing = false;
 	export let streaming = false;
+	export let stopResponseFlag = false;
 
 	export let note = null;
 
@@ -38,12 +39,12 @@
 	export let messages = [];
 
 	export let onInsert = (content) => {};
+	export let onStop = () => {};
 	export let scrollToBottomHandler = () => {};
 
 	let loaded = false;
 
 	let loading = false;
-	let stopResponseFlag = false;
 
 	let messagesContainerElement: HTMLDivElement;
 
@@ -88,11 +89,6 @@ Based on the user's instruction, update and enhance the existing notes by incorp
 		}
 	};
 
-	const stopHandler = () => {
-		stopResponseFlag = true;
-		console.log('stopResponse');
-	};
-
 	const chatCompletionHandler = async () => {
 		if (selectedModelId === '') {
 			toast.error($i18n.t('Please select a model.'));
@@ -341,7 +337,7 @@ Based on the user's instruction, update and enhance the existing notes by incorp
 						acceptFiles={false}
 						inputLoading={loading}
 						onSubmit={submitHandler}
-						onStop={stopHandler}
+						{onStop}
 					>
 						<div slot="menu" class="flex items-center justify-between gap-2 w-full pr-2">
 							<div>