Toast errors (#91)

Co-authored-by: Julien Chaumond <julien@huggingface.co>
Co-authored-by: Adrien Denat <oi@adriendenat.com>

src/lib/components/Toast.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	export let message = "";
+</script>
+
+<div
+	transition:fade={{ duration: 300 }}
+	class="fixed right-0 top-12 md:top-0 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pt-2 md:pt-5 pr-2 md:pr-8 pl-36 pb-36 z-20 pointer-events-none"
+>
+	<div
+		class="flex items-center bg-white/90 dark:bg-gray-900/80 rounded-full py-1 px-3 shadow-sm pointer-events-auto"
+	>
+		<IconDazzled classNames="text-2xl mr-2" />
+		<h2 class="font-semibold">{message}</h2>
+	</div>
+</div>

src/lib/components/icons/IconDazzled.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	class={classNames}
+	fill="none"
+	viewBox="0 0 26 23"
+>
+	<path
+		fill="url(#a)"
+		d="M.93 10.65A10.17 10.17 0 0 1 11.11.48h4.67a9.45 9.45 0 0 1 0 18.89H4.53L1.62 22.2a.38.38 0 0 1-.69-.28V10.65Z"
+	/>
+	<path
+		fill="#000"
+		fill-rule="evenodd"
+		d="M11.52 7.4a1.86 1.86 0 1 1-3.72 0 1.86 1.86 0 0 1 3.72 0Zm7.57 0a1.86 1.86 0 1 1-3.73 0 1.86 1.86 0 0 1 3.73 0ZM8.9 12.9a.55.55 0 0 0-.11.35.76.76 0 0 1-1.51 0c0-.95.67-1.94 1.76-1.94 1.09 0 1.76 1 1.76 1.94H9.3a.55.55 0 0 0-.12-.35c-.06-.07-.1-.08-.13-.08s-.08 0-.14.08Zm4.04 0a.55.55 0 0 0-.12.35h-1.51c0-.95.68-1.94 1.76-1.94 1.1 0 1.77 1 1.77 1.94h-1.51a.55.55 0 0 0-.12-.35c-.06-.07-.11-.08-.14-.08-.02 0-.07 0-.13.08Zm-1.89.79c-.02 0-.07-.01-.13-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.75 1.95 1.1 0 1.77-1 1.77-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.14.08Zm4.04 0c-.03 0-.08-.01-.14-.08a.55.55 0 0 1-.12-.36h-1.5c0 .95.67 1.95 1.76 1.95 1.08 0 1.76-1 1.76-1.95h-1.51c0 .16-.06.28-.12.36-.06.07-.11.08-.13.08Zm1.76-.44c0-.16.05-.28.12-.35.06-.07.1-.08.13-.08s.08 0 .14.08c.06.07.11.2.11.35a.76.76 0 0 0 1.51 0c0-.95-.67-1.94-1.76-1.94-1.09 0-1.76 1-1.76 1.94h1.5Z"
+		clip-rule="evenodd"
+	/>
+	<defs>
+		<radialGradient
+			id="a"
+			cx="0"
+			cy="0"
+			r="1"
+			gradientTransform="matrix(0 31.37 -34.85 0 13.08 -9.02)"
+			gradientUnits="userSpaceOnUse"
+		>
+			<stop stop-color="#FFD21E" />
+			<stop offset="1" stop-color="red" />
+		</radialGradient>
+	</defs>
+</svg>

src/lib/shareConversation.ts

@@ -1,4 +1,5 @@
 import { base } from "$app/paths";
+import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 
 export async function shareConversation(id: string, title: string) {
 	try {
@@ -10,7 +11,8 @@ export async function shareConversation(id: string, title: string) {
 		});
 
 		if (!res.ok) {
-			alert("Error while sharing conversation: " + (await res.text()));
+			error.set("Error while sharing conversation, try again.");
+			console.error("Error while sharing conversation: " + (await res.text()));
 			return;
 		}
 
@@ -26,7 +28,7 @@ export async function shareConversation(id: string, title: string) {
 			prompt("Copy this public url to share:", url);
 		}
 	} catch (err) {
+		error.set(ERROR_MESSAGES.default);
 		console.error(err);
-		alert(String(err));
 	}
 }

src/lib/stores/errors.ts

@@ -0,0 +1,7 @@
+import { writable } from "svelte/store";
+
+export const ERROR_MESSAGES = {
+	default: "Oops, something went wrong.",
+};
+
+export const error = writable<string | null>(null);

src/routes/+layout.svelte

@@ -1,19 +1,41 @@
 <script lang="ts">
+	import { onDestroy } from "svelte";
 	import { goto, invalidate } from "$app/navigation";
 	import { page } from "$app/stores";
 	import "../styles/main.css";
 	import type { LayoutData } from "./$types";
 	import { base } from "$app/paths";
+	import { PUBLIC_ORIGIN } from "$env/static/public";
+
 	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
+	import { error } from "$lib/stores/errors";
 
 	import MobileNav from "$lib/components/MobileNav.svelte";
 	import NavMenu from "$lib/components/NavMenu.svelte";
-	import { PUBLIC_ORIGIN } from "$env/static/public";
+	import Toast from "$lib/components/Toast.svelte";
 
 	export let data: LayoutData;
 
 	let isNavOpen = false;
+	let errorToastTimeout: NodeJS.Timeout;
+	let currentError: string | null;
+
+	async function onError() {
+		// If a new different error comes, wait for the current error to hide first
+		if ($error && currentError && $error !== currentError) {
+			clearTimeout(errorToastTimeout);
+			currentError = null;
+			await new Promise((resolve) => setTimeout(resolve, 300));
+		}
+
+		currentError = $error;
+
+		errorToastTimeout = setTimeout(() => {
+			$error = null;
+			currentError = null;
+		}, 3000);
+	}
 
 	async function deleteConversation(id: string) {
 		try {
@@ -25,7 +47,7 @@
 			});
 
 			if (!res.ok) {
-				alert("Error while deleting conversation: " + (await res.text()));
+				$error = "Error while deleting conversation, try again.";
 				return;
 			}
 
@@ -36,9 +58,15 @@
 			}
 		} catch (err) {
 			console.error(err);
-			alert(String(err));
+			$error = String(err);
 		}
 	}
+
+	onDestroy(() => {
+		clearTimeout(errorToastTimeout);
+	});
+
+	$: if ($error) onError();
 </script>
 
 <svelte:head>
@@ -70,5 +98,8 @@
 			on:deleteConversation={(ev) => deleteConversation(ev.detail)}
 		/>
 	</nav>
+	{#if currentError}
+		<Toast message={currentError} />
+	{/if}
 	<slot />
 </div>

src/routes/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { base } from '$app/paths';
-	import ChatWindow from '$lib/components/chat/ChatWindow.svelte';
-	import { pendingMessage } from '$lib/stores/pendingMessage';
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
 
 	let loading = false;
 
@@ -17,7 +18,8 @@
 			});
 
 			if (!res.ok) {
-				alert('Error while creating conversation: ' + (await res.text()));
+				error.set("Error while creating conversation, try again.");
+				console.error("Error while creating conversation: " + (await res.text()));
 				return;
 			}
 
@@ -29,7 +31,8 @@
 			// invalidateAll to update list of conversations
 			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
 		} catch (err) {
-			alert(String(err));
+			error.set(ERROR_MESSAGES.default);
+			console.error(err);
 		} finally {
 			loading = false;
 		}

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

@@ -10,6 +10,7 @@
 	import { PUBLIC_MAX_INPUT_TOKENS } from "$env/static/public";
 	import { shareConversation } from "$lib/shareConversation";
 	import { UrlDependency } from "$lib/types/UrlDependency";
+	import { error } from "$lib/stores/errors";
 
 	export let data: PageData;
 
@@ -105,8 +106,9 @@
 				await invalidate(UrlDependency.ConversationList);
 			}
 		} catch (err) {
+			// TODO: Should prob check if this is really a TooManyRequests error
+			$error = "Too much traffic, please try again.";
 			console.error(err);
-			alert(String(err));
 		} finally {
 			loading = false;
 		}

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

@@ -3,6 +3,7 @@
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
 	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 	import { pendingMessage } from "$lib/stores/pendingMessage";
 	import type { PageData } from "./$types";
 
@@ -24,7 +25,8 @@
 			});
 
 			if (!res.ok) {
-				alert("Error while creating conversation: " + (await res.text()));
+				error.set("Error while creating conversation, try again.");
+				console.error("Error while creating conversation: " + (await res.text()));
 				return;
 			}
 
@@ -36,7 +38,8 @@
 			// invalidateAll to update list of conversations
 			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
 		} catch (err) {
-			alert(String(err));
+			error.set(ERROR_MESSAGES.default);
+			console.error(String(err));
 		} finally {
 			loading = false;
 		}