Tomás Gómez nsarrazin HF staff commited on
Commit
f23c3c9
1 Parent(s): 6f3588a

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

Browse files

* 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 <sarrazin.nathan@gmail.com>

src/lib/components/NavMenu.svelte CHANGED
@@ -4,6 +4,7 @@
4
 
5
  import Logo from "$lib/components/icons/Logo.svelte";
6
  import { switchTheme } from "$lib/switchTheme";
 
7
  import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
8
  import NavConversationItem from "./NavConversationItem.svelte";
9
  import type { LayoutData } from "../../routes/$types";
@@ -21,6 +22,10 @@
21
 
22
  export let canLogin: boolean;
23
  export let user: LayoutData["user"];
 
 
 
 
24
  </script>
25
 
26
  <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 @@
30
  </a>
31
  <a
32
  href={`${base}/`}
 
33
  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"
34
  >
35
  New Chat
 
4
 
5
  import Logo from "$lib/components/icons/Logo.svelte";
6
  import { switchTheme } from "$lib/switchTheme";
7
+ import { isAborted } from "$lib/stores/isAborted";
8
  import { PUBLIC_APP_NAME, PUBLIC_ORIGIN } from "$env/static/public";
9
  import NavConversationItem from "./NavConversationItem.svelte";
10
  import type { LayoutData } from "../../routes/$types";
 
22
 
23
  export let canLogin: boolean;
24
  export let user: LayoutData["user"];
25
+
26
+ function handleNewChatClick() {
27
+ isAborted.set(true);
28
+ }
29
  </script>
30
 
31
  <div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
 
35
  </a>
36
  <a
37
  href={`${base}/`}
38
+ on:click={handleNewChatClick}
39
  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"
40
  >
41
  New Chat
src/lib/stores/isAborted.ts ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ import { writable } from "svelte/store";
2
+
3
+ export const isAborted = writable<boolean>(false);
src/routes/conversation/[id]/+page.svelte CHANGED
@@ -1,6 +1,7 @@
1
  <script lang="ts">
2
  import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
3
  import { pendingMessage } from "$lib/stores/pendingMessage";
 
4
  import { onMount } from "svelte";
5
  import { page } from "$app/stores";
6
  import { goto, invalidate } from "$app/navigation";
@@ -19,7 +20,6 @@
19
 
20
  let messages = data.messages;
21
  let lastLoadedMessages = data.messages;
22
- let isAborted = false;
23
 
24
  let webSearchMessages: WebSearchUpdate[] = [];
25
 
@@ -68,7 +68,7 @@
68
  if (!message.trim()) return;
69
 
70
  try {
71
- isAborted = false;
72
  loading = true;
73
  pending = true;
74
 
@@ -149,7 +149,7 @@
149
  // we read the stream until we get the final answer
150
  while (finalAnswer === "") {
151
  // check for abort
152
- if (isAborted) {
153
  reader?.cancel();
154
  break;
155
  }
@@ -307,7 +307,7 @@
307
  }
308
  }
309
 
310
- $: $page.params.id, ((isAborted = true), (loading = false));
311
  $: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
312
  </script>
313
 
@@ -333,7 +333,7 @@
333
  on:retry={onRetry}
334
  on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
335
  on:share={() => shareConversation($page.params.id, data.title)}
336
- on:stop={() => (isAborted = true)}
337
  models={data.models}
338
  currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
339
  settings={data.settings}
 
1
  <script lang="ts">
2
  import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
3
  import { pendingMessage } from "$lib/stores/pendingMessage";
4
+ import { isAborted } from "$lib/stores/isAborted";
5
  import { onMount } from "svelte";
6
  import { page } from "$app/stores";
7
  import { goto, invalidate } from "$app/navigation";
 
20
 
21
  let messages = data.messages;
22
  let lastLoadedMessages = data.messages;
 
23
 
24
  let webSearchMessages: WebSearchUpdate[] = [];
25
 
 
68
  if (!message.trim()) return;
69
 
70
  try {
71
+ $isAborted = false;
72
  loading = true;
73
  pending = true;
74
 
 
149
  // we read the stream until we get the final answer
150
  while (finalAnswer === "") {
151
  // check for abort
152
+ if ($isAborted) {
153
  reader?.cancel();
154
  break;
155
  }
 
307
  }
308
  }
309
 
310
+ $: $page.params.id, (($isAborted = true), (loading = false));
311
  $: title = data.conversations.find((conv) => conv.id === $page.params.id)?.title ?? data.title;
312
  </script>
313
 
 
333
  on:retry={onRetry}
334
  on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
335
  on:share={() => shareConversation($page.params.id, data.title)}
336
+ on:stop={() => (($isAborted = true), (loading = false))}
337
  models={data.models}
338
  currentModel={findCurrentModel([...data.models, ...data.oldModels], data.model)}
339
  settings={data.settings}