Get pro (#1930)

* BREAKING? Remove overflow-hidden from message info container

The overflow-hidden class was removed from the message info container div to allow content to overflow as needed. This may improve the display of message metadata or related elements.

* Add subscribe modal and improve error handling

Introduces a SubscribeModal component to prompt users to upgrade when hitting message limits, shown on 402 errors in conversation pages. Enhances error propagation and handling in router and endpoint logic, preserving HTTP status codes and error messages, and updates types to support status codes in message updates. Also includes minor UI improvements to Toast and refines error extraction and logging throughout the routing flow.

* Sanitize and improve error handling in router endpoints

Introduces functions to sanitize error messages before sending them to clients, preventing leakage of provider details. Differentiates between policy errors (e.g., authorization, payment) and transient errors, surfacing only policy errors to users while allowing fallback for transient errors. Also updates conversation update logic for compatibility with different MongoDB driver versions.

* Remove public error message sanitization

Eliminated the publicErrorMessage function and now forward raw error messages to clients. This simplifies error handling and avoids altering upstream error messages before sending them to the client.

* Hide router UI elements on error and refactor RetryBtn

Router examples and follow-ups are now hidden when the last message is an error. Also refactored the RetryBtn rendering logic to simplify the condition and only show it when not loading and lastIsError is true.

* Improve error handling and type safety in server code

Refactored error extraction logic in endpoint.ts for better type safety and more robust handling of OpenAI and HTTP errors. Updated conversation group and conversation server routes to use stricter type checks for status codes. Removed unused import and variable from SubscribeModal.svelte.

src/lib/components/SubscribeModal.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div
+			class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
+		>
+			<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
+				<div
+					class="flex size-14 items-center justify-center rounded-full bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15 text-3xl"
+				>
+					<svg
+						width="1em"
+						height="1em"
+						viewBox="0 0 12 12"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<path
+							d="M6.48 1.26001C6.48 2.81001 7.15 3.84001 7.98 4.50001C8.84 5.18001 9.88 5.50001 10.56 5.57001V6.43001C9.6233 6.5513 8.73602 6.92071 7.99 7.50001C7.50131 7.88332 7.10989 8.37647 6.84753 8.93943C6.58516 9.50238 6.45925 10.1193 6.48 10.74H5.52C5.52 9.19001 4.85 8.16001 4.02 7.50001C3.27114 6.91907 2.3802 6.54958 1.44 6.43001V5.57001C2.37671 5.44872 3.26398 5.07931 4.01 4.50001C4.4987 4.1167 4.89011 3.62355 5.15248 3.06059C5.41484 2.49764 5.54076 1.88075 5.52 1.26001H6.48Z"
+							fill="url(#paint0_linear_141_2)"
+						/>
+						<defs>
+							<linearGradient
+								id="paint0_linear_141_2"
+								x1="3.37"
+								y1="3.43001"
+								x2="8.14"
+								y2="8.90001"
+								gradientUnits="userSpaceOnUse"
+							>
+								<stop stop-color="#FF0789" />
+								<stop offset="0.63" stop-color="#21DE75" />
+								<stop offset="1" stop-color="#FF8D00" />
+							</linearGradient>
+						</defs>
+					</svg>
+				</div>
+				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Upgrade Required</h2>
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			<p class="text-[15px] leading-relaxed">
+				You've reached your message limit. Upgrade to Hugging Face PRO to continue using
+				HuggingChat.
+			</p>
+			<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+				It's also possible to use your PRO credits in your favorite AI tools.
+			</p>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<a
+				href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+			>
+				Upgrade to Pro
+			</a>
+			<button
+				class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
+				onclick={close}
+			>
+				Maybe later
+			</button>
+		</div>
+	</div>
+</Modal>

src/lib/components/Toast.svelte

@@ -13,12 +13,12 @@
 <Portal>
 	<div
 		transition:fade|global={{ duration: 300 }}
-		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
+		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 max-sm:text-sm md:top-0 md:pr-8 md:pt-5"
 	>
 		<div
 			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
 		>
-			<IconDazzled classNames="text-2xl mr-2" />
+			<IconDazzled classNames="text-2xl mr-2 flex-none" />
 			<h2 class="line-clamp-2 max-w-2xl font-semibold text-gray-800 dark:text-gray-200">
 				{message}
 			</h2>

src/lib/components/chat/ChatMessage.svelte

@@ -196,7 +196,7 @@
 			<div
 				class="absolute -bottom-3.5 {message.routerMetadata && messageInfoWidth > messageWidth
 					? 'left-1 pl-1 lg:pl-7'
-					: 'right-1'} flex max-w-[calc(100dvw-40px)] items-center gap-0.5 overflow-hidden"
+					: 'right-1'} flex max-w-[calc(100dvw-40px)] items-center gap-0.5"
 				bind:offsetWidth={messageInfoWidth}
 			>
 				{#if message.routerMetadata && (!isLast || !loading)}

src/lib/components/chat/ChatWindow.svelte

@@ -398,7 +398,7 @@
 			dark:from-gray-900 dark:via-gray-900/100
 			dark:to-gray-900/0 max-sm:py-0 sm:px-5 md:pb-4 xl:max-w-4xl [&>*]:pointer-events-auto"
 	>
-		{#if !message.length && !messages.length && !sources.length && !loading && currentModel.isRouter && routerExamples.length && !hideRouterExamples}
+		{#if !message.length && !messages.length && !sources.length && !loading && currentModel.isRouter && routerExamples.length && !hideRouterExamples && !lastIsError}
 			<div
 				class="no-scrollbar mb-3 flex w-full select-none justify-start gap-2 overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500"
 			>
@@ -410,7 +410,7 @@
 				{/each}
 			</div>
 		{/if}
-		{#if shouldShowRouterFollowUps}
+		{#if shouldShowRouterFollowUps && !lastIsError}
 			<div
 				class="no-scrollbar mb-3 flex w-full select-none justify-start gap-2 overflow-x-auto whitespace-nowrap text-gray-400 dark:text-gray-500"
 			>
@@ -446,19 +446,17 @@
 
 		<div class="w-full">
 			<div class="flex w-full *:mb-3">
-				{#if !loading}
-					{#if lastIsError}
-						<RetryBtn
-							classNames="ml-auto"
-							onClick={() => {
-								if (lastMessage && lastMessage.ancestors) {
-									onretry?.({
-										id: lastMessage.id,
-									});
-								}
-							}}
-						/>
-					{/if}
+				{#if !loading && lastIsError}
+					<RetryBtn
+						classNames="ml-auto"
+						onClick={() => {
+							if (lastMessage && lastMessage.ancestors) {
+								onretry?.({
+									id: lastMessage.id,
+								});
+							}
+						}}
+					/>
 				{/if}
 			</div>
 			<form

src/lib/server/api/routes/groups/conversations.ts

@@ -191,7 +191,12 @@ export const conversationGroup = new Elysia().use(authPlugin).group("/conversati
 									}
 								);
 
-								if (res.modifiedCount === 0) {
+								// Use matchedCount if available (newer drivers), fallback to modifiedCount for compatibility
+								if (
+									typeof res.matchedCount === "number"
+										? res.matchedCount === 0
+										: res.modifiedCount === 0
+								) {
 									throw new Error("Conversation not found");
 								}
 

src/lib/server/router/arch.ts

@@ -1,7 +1,7 @@
 import { config } from "$lib/server/config";
 import { logger } from "$lib/server/logger";
 import type { EndpointMessage } from "../endpoints/endpoints";
-import type { Route, RouteConfig } from "./types";
+import type { Route, RouteConfig, RouteSelection } from "./types";
 import { getRoutes } from "./policy";
 import { getApiToken } from "$lib/server/apiToken";
 
@@ -71,7 +71,7 @@ export async function archSelectRoute(
 	messages: EndpointMessage[],
 	traceId: string | undefined,
 	locals: App.Locals | undefined
-): Promise<{ routeName: string }> {
+): Promise<RouteSelection> {
 	const routes = await getRoutes();
 	const prompt = toRouterPrompt(messages, routes);
 
@@ -107,7 +107,35 @@ export async function archSelectRoute(
 			signal: ctrl.signal,
 		});
 		clearTimeout(to);
-		if (!resp.ok) throw new Error(`arch-router ${resp.status}`);
+		if (!resp.ok) {
+			// Extract error message from response
+			let errorMessage = `arch-router ${resp.status}`;
+			try {
+				const errorData = await resp.json();
+				// Try to extract message from OpenAI-style error format
+				if (errorData.error?.message) {
+					errorMessage = errorData.error.message;
+				} else if (errorData.message) {
+					errorMessage = errorData.message;
+				}
+			} catch {
+				// If JSON parsing fails, use status text
+				errorMessage = resp.statusText || errorMessage;
+			}
+
+			logger.warn(
+				{ status: resp.status, error: errorMessage, traceId },
+				"[arch] router returned error"
+			);
+
+			return {
+				routeName: "arch_router_failure",
+				error: {
+					message: errorMessage,
+					statusCode: resp.status,
+				},
+			};
+		}
 		const data: { choices: { message: { content: string } }[] } = await resp.json();
 		const text = (data?.choices?.[0]?.message?.content ?? "").toString().trim();
 		const raw = parseRouteName(text);
@@ -118,7 +146,15 @@ export async function archSelectRoute(
 		return { routeName: exists ? chosen : "casual_conversation" };
 	} catch (e) {
 		clearTimeout(to);
+		const err = e as Error;
 		logger.warn({ err: String(e), traceId }, "arch router selection failed");
-		return { routeName: "arch_router_failure" };
+
+		// Return error with context but no status code (network/timeout errors)
+		return {
+			routeName: "arch_router_failure",
+			error: {
+				message: err.message || String(e),
+			},
+		};
 	}
 }

src/lib/server/router/endpoint.ts

@@ -11,11 +11,75 @@ import { logger } from "$lib/server/logger";
 import { archSelectRoute } from "./arch";
 import { getRoutes, resolveRouteModels } from "./policy";
 import { getApiToken } from "$lib/server/apiToken";
+import { ROUTER_FAILURE } from "./types";
 
 const REASONING_BLOCK_REGEX = /<think>[\s\S]*?(?:<\/think>|$)/g;
 
 const ROUTER_MULTIMODAL_ROUTE = "multimodal";
 
+/**
+ * Custom error class that preserves HTTP status codes
+ */
+class HTTPError extends Error {
+	constructor(
+		message: string,
+		public statusCode?: number
+	) {
+		super(message);
+		this.name = "HTTPError";
+	}
+}
+
+/**
+ * Extract the actual error message and status from OpenAI SDK errors or other upstream errors
+ */
+function extractUpstreamError(error: unknown): { message: string; statusCode?: number } {
+	// Check if it's an OpenAI APIError with structured error info
+	if (error && typeof error === "object") {
+		const err = error as Record<string, unknown>;
+
+		// OpenAI SDK error with error.error.message and status
+		if (
+			err.error &&
+			typeof err.error === "object" &&
+			"message" in err.error &&
+			typeof err.error.message === "string"
+		) {
+			return {
+				message: err.error.message,
+				statusCode: typeof err.status === "number" ? err.status : undefined,
+			};
+		}
+
+		// HTTPError or error with statusCode
+		if (typeof err.statusCode === "number" && typeof err.message === "string") {
+			return { message: err.message, statusCode: err.statusCode };
+		}
+
+		// Error with status field
+		if (typeof err.status === "number" && typeof err.message === "string") {
+			return { message: err.message, statusCode: err.status };
+		}
+
+		// Direct error message
+		if (typeof err.message === "string") {
+			return { message: err.message };
+		}
+	}
+
+	return { message: String(error) };
+}
+
+/**
+ * Determines if an error is a policy/entitlement error that should be shown to users immediately
+ * (vs transient errors that should trigger fallback)
+ */
+function isPolicyError(statusCode?: number): boolean {
+	if (!statusCode) return false;
+	// 402: Payment Required, 401: Unauthorized, 403: Forbidden
+	return statusCode === 402 || statusCode === 401 || statusCode === 403;
+}
+
 function stripReasoningBlocks(text: string): string {
 	const stripped = text.replace(REASONING_BLOCK_REGEX, "");
 	return stripped === text ? text : stripped.trim();
@@ -124,32 +188,66 @@ export async function makeRouterEndpoint(routerModel: ProcessedModel): Promise<E
 				const gen = await ep({ ...params });
 				return metadataThenStream(gen, multimodalCandidate, ROUTER_MULTIMODAL_ROUTE);
 			} catch (e) {
+				const { message, statusCode } = extractUpstreamError(e);
 				logger.error(
-					{ route: ROUTER_MULTIMODAL_ROUTE, model: multimodalCandidate, err: String(e) },
+					{
+						route: ROUTER_MULTIMODAL_ROUTE,
+						model: multimodalCandidate,
+						err: message,
+						...(statusCode && { status: statusCode }),
+					},
 					"[router] multimodal fallback failed"
 				);
-				throw new Error(
-					"Failed to call the configured multimodal model. Remove the image or try again later."
-				);
+				throw statusCode ? new HTTPError(message, statusCode) : new Error(message);
 			}
 		}
 
-		const { routeName } = await archSelectRoute(sanitizedMessages, undefined, params.locals);
+		const routeSelection = await archSelectRoute(sanitizedMessages, undefined, params.locals);
+
+		// If arch router failed with an error, only hard-fail for policy errors (402/401/403)
+		// For transient errors (5xx, timeouts, network), allow fallback to continue
+		if (routeSelection.routeName === ROUTER_FAILURE && routeSelection.error) {
+			const { message, statusCode } = routeSelection.error;
+
+			if (isPolicyError(statusCode)) {
+				// Policy errors should be surfaced to the user immediately (e.g., subscription required)
+				logger.error(
+					{ err: message, ...(statusCode && { status: statusCode }) },
+					"[router] arch router failed with policy error, propagating to client"
+				);
+				throw statusCode ? new HTTPError(message, statusCode) : new Error(message);
+			}
+
+			// Transient errors: log and continue to fallback
+			logger.warn(
+				{ err: message, ...(statusCode && { status: statusCode }) },
+				"[router] arch router failed with transient error, attempting fallback"
+			);
+		}
 
 		const fallbackModel = config.LLM_ROUTER_FALLBACK_MODEL || routerModel.id;
-		const { candidates } = resolveRouteModels(routeName, routes, fallbackModel);
+		const { candidates } = resolveRouteModels(routeSelection.routeName, routes, fallbackModel);
 
 		let lastErr: unknown = undefined;
 		for (const candidate of candidates) {
 			try {
-				logger.info({ route: routeName, model: candidate }, "[router] trying candidate");
+				logger.info(
+					{ route: routeSelection.routeName, model: candidate },
+					"[router] trying candidate"
+				);
 				const ep = await createCandidateEndpoint(candidate);
 				const gen = await ep({ ...params });
-				return metadataThenStream(gen, candidate, routeName);
+				return metadataThenStream(gen, candidate, routeSelection.routeName);
 			} catch (e) {
 				lastErr = e;
+				const { message: errMsg, statusCode: errStatus } = extractUpstreamError(e);
 				logger.warn(
-					{ route: routeName, model: candidate, err: String(e) },
+					{
+						route: routeSelection.routeName,
+						model: candidate,
+						err: errMsg,
+						...(errStatus && { status: errStatus }),
+					},
 					"[router] candidate failed"
 				);
 				continue;
@@ -157,6 +255,8 @@ export async function makeRouterEndpoint(routerModel: ProcessedModel): Promise<E
 		}
 
 		// Exhausted all candidates — throw to signal upstream failure
-		throw new Error(`Routing failed for route=${routeName}: ${String(lastErr)}`);
+		// Forward the upstream error to the client
+		const { message, statusCode } = extractUpstreamError(lastErr);
+		throw statusCode ? new HTTPError(message, statusCode) : new Error(message);
 	};
 }

src/lib/server/router/types.ts

@@ -10,4 +10,12 @@ export interface RouteConfig {
 	description: string;
 }
 
+export interface RouteSelection {
+	routeName: string;
+	error?: {
+		message: string;
+		statusCode?: number;
+	};
+}
+
 export const ROUTER_FAILURE = "arch_router_failure";

src/lib/types/MessageUpdate.ts

@@ -28,6 +28,7 @@ export interface MessageStatusUpdate {
 	type: MessageUpdateType.Status;
 	status: MessageUpdateStatus;
 	message?: string;
+	statusCode?: number;
 }
 
 // Everything else

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

@@ -30,12 +30,14 @@
 	import type { TreeNode, TreeId } from "$lib/utils/tree/tree";
 	import "katex/dist/katex.min.css";
 	import { updateDebouncer } from "$lib/utils/updates.js";
+	import SubscribeModal from "$lib/components/SubscribeModal.svelte";
 
 	let { data = $bindable() } = $props();
 
 	let loading = $state(false);
 	let pending = $state(false);
 	let initialRun = true;
+	let showSubscribeModal = $state(false);
 
 	let files: File[] = $state([]);
 
@@ -302,7 +304,12 @@
 					update.type === MessageUpdateType.Status &&
 					update.status === MessageUpdateStatus.Error
 				) {
-					$error = update.message ?? "An error has occurred";
+					// Check if this is a 402 payment required error
+					if (update.statusCode === 402) {
+						showSubscribeModal = true;
+					} else {
+						$error = update.message ?? "An error has occurred";
+					}
 				} else if (update.type === MessageUpdateType.Title) {
 					const convInData = conversations.find(({ id }) => id === page.params.id);
 					if (convInData) {
@@ -518,3 +525,7 @@
 	models={data.models}
 	currentModel={findCurrentModel(data.models, data.oldModels, data.model)}
 />
+
+{#if showSubscribeModal}
+	<SubscribeModal close={() => (showSubscribeModal = false)} />
+{/if}

src/routes/conversation/[id]/+server.ts

@@ -494,10 +494,16 @@ export async function POST({ request, locals, params, getClientAddress }) {
 					}
 				} else {
 					hasError = true;
+					// Extract status code if available from HTTPError or APIError
+					const errObj = err as unknown as Record<string, unknown>;
+					const statusCode =
+						(typeof errObj.statusCode === "number" ? errObj.statusCode : undefined) ||
+						(typeof errObj.status === "number" ? errObj.status : undefined);
 					await update({
 						type: MessageUpdateType.Status,
 						status: MessageUpdateStatus.Error,
 						message: err.message,
+						...(statusCode && { statusCode }),
 					});
 					logger.error(err);
 				}