own error component

src/lib/components/chat/User.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Send, X, TriangleAlert } from '@lucide/svelte';
+	import { Send, X } from '@lucide/svelte';
 	import {
 		Handle,
 		useEdges,
@@ -11,7 +11,9 @@
 		type Node,
 		useSvelteFlow
 	} from '@xyflow/svelte';
+	import { onMount } from 'svelte';
 
+	import ErrorMessage from '$lib/components/error/Error.svelte';
 	import type { ChatModel, ChatMessage, TokenUsage } from '$lib/helpers/types';
 	import { Button } from '$lib/components/ui/button';
 	import ComboBoxModels from '$lib/components/model/ComboBoxModels.svelte';
@@ -22,7 +24,6 @@
 	import { SUGGESTIONS_PROMPT } from '$lib/consts';
 	import { authState } from '$lib/state/auth.svelte';
 	import { signinModalState } from '$lib/state/signin-modal.svelte';
-	import { onMount } from 'svelte';
 
 	let { id }: NodeProps = $props();
 
@@ -280,7 +281,7 @@
 			</div>
 		</header>
 		{#if errorMessage}
-			<div
+			<!-- <div
 				class="mb-2.5 flex items-center justify-between gap-3 rounded-lg bg-rose-500/10 p-3 text-sm text-rose-600"
 			>
 				<div class="flex items-center gap-1">
@@ -295,7 +296,8 @@
 				>
 					<X class="size-3" />
 				</Button>
-			</div>
+			</div> -->
+			<ErrorMessage error={errorMessage} />
 		{/if}
 		{#if lastMessage}
 			<Message message={lastMessage} />

src/lib/components/error/Error.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { TriangleAlert, X } from '@lucide/svelte';
+
+	let { error }: { error: string } = $props();
+</script>
+
+<div class="mb-2.5">
+	<div
+		class="relative inline-flex w-fit items-center gap-1.5 rounded-t-2xl bg-rose-500/10 pt-3 pr-5 pl-4 text-[11px] font-semibold text-rose-600 uppercase"
+	>
+		<div
+			class="flex size-3 -translate-y-[0.5px] items-center justify-center rounded-full bg-rose-600 text-white"
+		>
+			<X class="size-2.5" />
+		</div>
+		Error
+		<div
+			class="absolute -right-2.5 bottom-0 h-2.5 w-2.5"
+			style="background: radial-gradient(circle at top right, transparent 10px, rgb(244 63 94 / 0.1) 10px)"
+		></div>
+	</div>
+	<div
+		class="-translate-y-[3px] rounded-r-2xl rounded-b-xl bg-rose-500/10 px-4 py-3 text-xs text-rose-500"
+	>
+		{error}
+	</div>
+</div>

src/routes/+layout.svelte

@@ -10,7 +10,6 @@
 	import { breakpointsState } from '$lib/state/breakpoints.svelte';
 	import { initAuth, handleAuthCallback, authState } from '$lib/state/auth.svelte';
 	import SigninModal from '$lib/components/auth/SigninModal.svelte';
-	import Toaster from '$lib/components/toaster/Toaster.svelte';
 
 	interface Props {
 		children?: import('svelte').Snippet;
@@ -51,7 +50,6 @@
 		{:else}
 			{@render children?.()}
 		{/if}
-		<Toaster />
 		<SigninModal />
 	</div>
 </svelte:boundary>