feat: add PRO badge and credits modal for HuggingChat (#2048)

* feat: add PRO badge and credits modal for HuggingChat

- Add isPro field to User type and persist from OAuth login
- Fetch fresh isPro status from HuggingFace public API on page load
- Display "Get PRO" button for non-PRO users in sidebar
- Display "PRO" badge for PRO users in sidebar
- Update SubscribeModal to show "Purchase Credits" for PRO users
- Add IconPro component for gradient sparkle icon

* feat: improve SubscribeModal UI for PRO users

- Use IconDazzled with yellow-orange-red gradient for "Out of Credits"
- Use IconPro with pink-green-yellow gradient for "Upgrade Required"
- Update credits message to mention HF services and Inference Providers

src/lib/components/NavMenu.svelte

@@ -29,6 +29,8 @@
 	import { useAPIClient, handleResponse } from "$lib/APIClient";
 	import { requireAuthUser } from "$lib/utils/auth";
 	import { enabledServersCount } from "$lib/stores/mcpServers";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
 	import MCPServerManager from "./mcp/MCPServerManager.svelte";
 
 	const publicConfig = usePublicConfig();
@@ -171,16 +173,37 @@
 >
 	{#if user?.username || user?.email}
 		<div
-			class="group flex items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 dark:hover:bg-gray-700"
+			class="group flex items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 first:hover:bg-transparent dark:hover:bg-gray-700 first:dark:hover:bg-transparent"
 		>
 			<span
 				class="flex h-9 flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
 				>{user?.username || user?.email}</span
 			>
 
+			{#if publicConfig.isHuggingChat && $isPro === false}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="ml-auto flex h-[20px] items-center gap-1 rounded-md bg-gradient-to-r from-pink-500/10 via-green-500/10 to-green-500/5 px-1.5 py-0.5 text-xs text-gray-500 hover:from-pink-500/20 hover:via-green-500/20 dark:from-pink-500/20 dark:via-green-500/20 dark:to-green-500/10 dark:text-gray-400 dark:hover:from-pink-500/30 dark:hover:via-green-500/30"
+				>
+					<IconPro />
+					Get PRO
+				</a>
+			{:else if publicConfig.isHuggingChat && $isPro === true}
+				<span
+					class="ml-auto flex h-[20px] items-center gap-1 rounded-md bg-gradient-to-r from-pink-500/10 via-green-500/10 to-green-500/5 px-1.5 py-0.5 text-xs text-gray-500 hover:from-pink-500/20 hover:via-green-500/20 dark:from-pink-500/20 dark:via-green-500/20 dark:to-green-500/10 dark:text-gray-400 dark:hover:from-pink-500/30 dark:hover:via-green-500/30"
+				>
+					<IconPro />
+					PRO
+				</span>
+			{/if}
+
 			<img
 				src="https://huggingface.co/api/users/{user.username}/avatar?redirect=true"
-				class="ml-auto size-4 rounded-full border bg-gray-500 dark:border-white/40"
+				class="{!(publicConfig.isHuggingChat && $isPro !== null)
+					? 'ml-auto'
+					: ''} size-4 rounded-full border bg-gray-500 dark:border-white/40"
 				alt=""
 			/>
 		</div>

src/lib/components/SubscribeModal.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import Modal from "$lib/components/Modal.svelte";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
 
 	interface Props {
 		close: () => void;
@@ -17,58 +20,62 @@
 		>
 			<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"
+					class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
+						? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
+						: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
 				>
-					<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>
+					{#if $isPro}
+						<IconDazzled />
+					{:else}
+						<IconPro classNames="!mr-0" />
+					{/if}
 				</div>
-				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Upgrade Required</h2>
+				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+					{$isPro ? "Out of Credits" : "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>
+			{#if $isPro}
+				<p class="text-[15px] leading-relaxed">
+					You've used all your available credits. Purchase additional credits to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					Your credits can be used in other HF services and external apps via Inference Providers.
+				</p>
+			{:else}
+				<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>
+			{/if}
 		</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>
+			{#if $isPro}
+				<a
+					href="https://huggingface.co/settings/billing?add-credits=true"
+					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"
+				>
+					Purchase Credits
+				</a>
+			{:else}
+				<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>
+			{/if}
 			<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}

src/lib/components/icons/IconPro.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+	}
+
+	let { classNames = "" }: Props = $props();
+
+	// I've no idea wht a fixed id doesnt work...
+	const gradientId = `gradient-${Math.random().toString(36).slice(2, 9)}`;
+</script>
+
+<svg
+	class="text-gray-500 {classNames}"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	role="img"
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	><defs
+		><linearGradient
+			id={gradientId}
+			x1="3.371"
+			y1="3.43"
+			x2="8.141"
+			y2="8.9"
+			gradientUnits="userSpaceOnUse"
+			><stop stop-color="#FF0789" /><stop offset=".63" stop-color="#21DE75" /><stop
+				offset="1"
+				stop-color="#FF8D00"
+			/></linearGradient
+		></defs
+	><path
+		d="M6.481 1.26c0 1.55.67 2.58 1.5 3.24.86.68 1.9 1 2.58 1.07v.86a5.3 5.3 0 0 0-2.57 1.07 3.95 3.95 0 0 0-1.51 3.24h-.96c0-1.55-.67-2.58-1.5-3.24a5.3 5.3 0 0 0-2.58-1.07v-.86a5.3 5.3 0 0 0 2.57-1.07 3.95 3.95 0 0 0 1.51-3.24h.96Z"
+		fill="url(#{gradientId})"
+	/></svg
+>

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

@@ -34,6 +34,7 @@ export const userGroup = new Elysia()
 							email: locals.user.email,
 							isAdmin: locals.user.isAdmin ?? false,
 							isEarlyAccess: locals.user.isEarlyAccess ?? false,
+							isPro: locals.user.isPro ?? false,
 						}
 					: null;
 			})

src/lib/stores/isPro.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+// null = unknown/loading, true = PRO, false = not PRO
+export const isPro = writable<boolean | null>(null);

src/lib/types/User.ts

@@ -11,4 +11,5 @@ export interface User extends Timestamps {
 	hfUserId: string;
 	isAdmin?: boolean;
 	isEarlyAccess?: boolean;
+	isPro?: boolean;
 }

src/routes/+layout.svelte

@@ -19,6 +19,7 @@
 	import { setContext } from "svelte";
 	import { handleResponse, useAPIClient } from "$lib/APIClient";
 	import { isAborted } from "$lib/stores/isAborted";
+	import { isPro } from "$lib/stores/isPro";
 	import IconShare from "$lib/components/icons/IconShare.svelte";
 	import { shareModal } from "$lib/stores/shareModal";
 	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
@@ -123,6 +124,18 @@
 	const settings = createSettingsStore(data.settings);
 
 	onMount(async () => {
+		if (publicConfig.isHuggingChat && data.user?.username) {
+			fetch(`https://huggingface.co/api/users/${data.user.username}/overview`)
+				.then((res) => res.json())
+				.then((userData) => {
+					isPro.set(userData.isPro ?? false);
+				})
+				.catch(() => {
+					// Fallback to database value on error
+					isPro.set(data.user?.isPro ?? false);
+				});
+		}
+
 		if (page.url.searchParams.has("model")) {
 			await settings
 				.instantSet({

src/routes/login/callback/updateUser.ts

@@ -39,6 +39,7 @@ export async function updateUser(params: {
 		picture: avatarUrl,
 		sub: hfUserId,
 		orgs,
+		isPro,
 	} = z
 		.object({
 			preferred_username: z.string().optional(),
@@ -46,6 +47,7 @@ export async function updateUser(params: {
 			picture: z.string().optional(),
 			sub: z.string(),
 			email: z.string().email().optional(),
+			isPro: z.boolean().optional(),
 			orgs: z
 				.array(
 					z.object({
@@ -72,6 +74,7 @@ export async function updateUser(params: {
 		picture?: string;
 		sub: string;
 		name: string;
+		isPro?: boolean;
 		orgs?: Array<{
 			sub: string;
 			name: string;
@@ -134,7 +137,7 @@ export async function updateUser(params: {
 		// update existing user if any
 		await collections.users.updateOne(
 			{ _id: existingUser._id },
-			{ $set: { username, name, avatarUrl, isAdmin, isEarlyAccess } }
+			{ $set: { username, name, avatarUrl, isAdmin, isEarlyAccess, isPro } }
 		);
 
 		// remove previous session if it exists and add new one
@@ -164,6 +167,7 @@ export async function updateUser(params: {
 			hfUserId,
 			isAdmin,
 			isEarlyAccess,
+			isPro,
 		});
 
 		userId = insertedId;