fix: new chat when old one is still streaming (#578)

* fix: new chat when old one is still streaming

* linting

* make sure loading is off if isAborted is true

To avoid loading indicator showing up when stopping generation early

* got rid of reactive statement

---------

Co-authored-by: Nathan Sarrazin <[email protected]>

src/lib/components/NavMenu.svelte

@@ -4,6 +4,7 @@
 
 	import Logo from "$lib/components/icons/Logo.svelte";
 	import { switchTheme } from "$lib/switchTheme";
+	import { isAborted } from "$lib/stores/isAborted";
 	import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
 	import NavConversationItem from "./NavConversationItem.svelte";
 	import type { LayoutData } from "../../routes/$types";
@@ -21,6 +22,10 @@
 
 	export let canLogin: boolean;
 	export let user: LayoutData["user"];
+
+	function handleNewChatClick() {
+		isAborted.set(true);
+	}
 </script>
 
 <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
@@ -30,6 +35,7 @@
 	</a>
 	<a
 		href={`${base}/`}
+		on:click={handleNewChatClick}
 		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
 	>
 		New Chat

src/lib/stores/isAborted.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const isAborted = writable<boolean>(false);

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
 	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { isAborted } from "$lib/stores/isAborted";
 	import { onMount } from "svelte";
 	import { page } from "$app/stores";
 	import { goto, invalidate } from "$app/navigation";
@@ -19,7 +20,6 @@
 
 	let messages = data.messages;
 	let lastLoadedMessages = data.messages;
-	let isAborted = false;
 
 	let webSearchMessages: WebSearchUpdate[] = [];
 
@@ -68,7 +68,7 @@
 		if (!message.trim()) return;
 
 		try {
-			isAborted = false;
+			$isAborted = false;
 			loading = true;
 			pending = true;
 
@@ -149,7 +149,7 @@
 			// we read the stream until we get the final answer
 			while (finalAnswer === "") {
 				// check for abort
-				if (isAborted) {
+				if ($isAborted) {
 					reader?.cancel();
 					break;
 				}
@@ -307,7 +307,7 @@
 		}
 	}
 
-	$: $page.params.id, ((isAborted = true), (loading = false));
+	$: $page.params.id, (($isAborted = true), (loading = false));
 	$: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
 </script>
 
@@ -333,7 +333,7 @@
 	on:retry={onRetry}
 	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
 	on:share={() => shareConversation($page.params.id, data.title)}
-	on:stop={() => (isAborted = true)}
+	on:stop={() => (($isAborted = true), (loading = false))}
 	models={data.models}
 	currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
 	settings={data.settings}