feat: add overloaded model modal for huggingchat

Author: nsarrazin

src/lib/components/OverloadedModal.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import IconDazzled from "./icons/IconDazzled.svelte";
+	import Modal from "./Modal.svelte";
+
+	let { onClose }: { onClose: () => void } = $props();
+</script>
+
+<Modal on:close={onClose}>
+	<div
+		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-3 bg-gradient-to-b px-5 pb-4 pt-9 text-center sm:px-6"
+	>
+		<div class="flex flex-wrap items-center gap-2">
+			<IconDazzled classNames="text-3xl mx-auto" />
+			<h2 class="flex flex-wrap items-center text-lg font-semibold text-gray-800">
+				This model is currently overloaded.
+			</h2>
+		</div>
+
+		<p class="text-sm text-gray-500">
+			Please try again later or consider using a different model. We currently have {page.data
+				.models.length} models available.
+		</p>
+
+		<div class="flex w-full flex-col items-center gap-4 pt-4">
+			<button
+				onclick={() => (onClose(), goto(`${base}/models`))}
+				class="flex w-full flex-wrap items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+			>
+				See all available models
+			</button>
+			<button
+				onclick={onClose}
+				class="flex w-fit flex-wrap items-center justify-center whitespace-nowrap px-2 py-1 text-gray-600 transition-colors hover:text-gray-900"
+			>
+				Close
+			</button>
+		</div>
+	</div>
+</Modal>

src/routes/+layout.svelte

@@ -23,6 +23,8 @@
 	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
 	import { loginModalOpen } from "$lib/stores/loginModal";
 	import LoginModal from "$lib/components/LoginModal.svelte";
+	import OverloadedModal from "$lib/components/OverloadedModal.svelte";
+	import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
 	let { data = $bindable(), children } = $props();
 
@@ -34,6 +36,8 @@
 	let isNavOpen = $state(false);
 	let isNavCollapsed = $state(false);
 
+	let overloadedModalOpen = $state(false);
+
 	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | undefined = $state();
 
@@ -47,6 +51,9 @@
 
 		currentError = $error;
 
+		if (currentError === "Model is overloaded") {
+			overloadedModalOpen = true;
+		}
 		errorToastTimeout = setTimeout(() => {
 			$error = undefined;
 			currentError = undefined;
@@ -235,6 +242,10 @@
 	/>
 {/if}
 
+{#if overloadedModalOpen && isHuggingChat}
+	<OverloadedModal onClose={() => (overloadedModalOpen = false)} />
+{/if}
+
 <div
 	class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
 		? 'md:grid-cols-[290px,1fr]'