feat: chat completion notification

src/lib/components/NotificationToast.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import DOMPurify from 'dompurify';
+
+	import { marked } from 'marked';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	export let onClick: Function = () => {};
+	export let title: string = 'HI';
+	export let content: string;
+</script>
+
+<button
+	class="flex gap-3 text-left w-[var(--width)] dark:bg-gray-850 dark:text-white bg-white text-black border border-gray-50 dark:border-gray-800 rounded-xl px-3 py-4"
+	on:click={() => {
+		onClick();
+		dispatch('closeToast');
+	}}
+>
+	<div class="flex-shrink-0 self-top -translate-y-1">
+		<img src={'/static/favicon.png'} alt="favicon" class="size-8 rounded-full" />
+	</div>
+
+	<div>
+		{#if title}
+			<div class=" text-[13px] font-medium mb-0.5 line-clamp-1">{title}</div>
+		{/if}
+
+		<div class=" line-clamp-2 text-xs self-center dark:text-gray-300 font-normal">
+			{@html DOMPurify.sanitize(marked(content))}
+		</div>
+	</div>
+</button>

src/lib/components/chat/Chat.svelte

@@ -79,6 +79,7 @@
 	import EventConfirmDialog from '../common/ConfirmDialog.svelte';
 	import Placeholder from './Placeholder.svelte';
 	import { getTools } from '$lib/apis/tools';
+	import NotificationToast from '../NotificationToast.svelte';
 
 	export let chatIdProp = '';
 
@@ -308,7 +309,23 @@
 			const type = event?.data?.type ?? null;
 			const data = event?.data?.data ?? null;
 
-			if (type === 'chat:title') {
+			if (type === 'chat:completion') {
+				const { done, content, title } = data;
+
+				if (done) {
+					toast.custom(NotificationToast, {
+						componentProps: {
+							onClick: () => {
+								goto(`/c/${event.chat_id}`);
+							},
+							content: content,
+							title: title
+						},
+						duration: 15000,
+						unstyled: true
+					});
+				}
+			} else if (type === 'chat:title') {
 				currentChatPage.set(1);
 				await chats.set(await getChatList(localStorage.token, $currentChatPage));
 			} else if (type === 'chat:tags') {