refactor stop generating button to not have useless dispatch event

src/lib/components/StopGeneratingBtn.svelte

@@ -1,21 +1,17 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-
 	import CarbonPause from "~icons/carbon/pause-filled";
 
 	export let visible: boolean = false;
 	export let className = "";
-
-	const dispatch = createEventDispatcher<{ stop: string }>();
 </script>
 
 <button
 	type="button"
+	on:click
 	class="absolute btn flex rounded-lg border py-1 px-3 shadow-sm bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all 
     {className}
     {visible ? 'opacity-100 visible' : 'opacity-0 invisible'}
     "
-	on:click={() => dispatch("stop")}
 >
 	<CarbonPause class="mr-1 -ml-1 w-[1.1875rem] h-[1.25rem] text-gray-400" /> Stop generating
 </button>

src/lib/components/chat/ChatWindow.svelte

@@ -17,15 +17,19 @@
 
 	let message: string;
 
-	const dispatch = createEventDispatcher<{ message: string; share: void }>();
+	const dispatch = createEventDispatcher<{ message: string; share: void; stop: void }>();
 </script>
 
 <div class="relative min-h-0">
 	<ChatMessages {loading} {pending} {messages} on:message />
 	<div
 		class="flex flex-col max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-5 bottom-0 py-4 md:py-8 w-full"
 	>
-		<StopGeneratingBtn visible={loading} className="right-7 top-10 z-10" on:stop />
+		<StopGeneratingBtn
+			visible={loading}
+			className="right-7 top-10 z-10"
+			on:click={() => dispatch("stop")}
+		/>
 		<form
 			on:submit|preventDefault={() => {
 				if (loading) return;

src/routes/r/[id]/+page.svelte

@@ -58,7 +58,6 @@
 <ChatWindow
 	on:message={(ev) => createConversation(ev.detail)}
 	on:share={shareConversation}
-	on:stop={shareConversation}
 	messages={data.messages}
 	{loading}
 />