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>