Remove dynamic primary color theme support

Eliminates the PUBLIC_APP_COLOR environment variable and related dynamic theming for primary colors. Updates UI components to use static gray color classes instead of primary color classes. Removes OverloadedModal component and its usage, and updates routerExamples with new and improved prompts.

.github/workflows/deploy-prod.yml

@@ -47,7 +47,6 @@ jobs:
           build-args: |
             INCLUDE_DB=false
             APP_BASE=/chat
-            PUBLIC_APP_COLOR=yellow
             PUBLIC_COMMIT_SHA=${{ env.GITHUB_SHA_SHORT }}
   deploy:
     name: Deploy on prod

Dockerfile

@@ -43,7 +43,7 @@ WORKDIR /app
 COPY --link --chown=1000 package-lock.json package.json ./
 
 ARG APP_BASE=
-ARG PUBLIC_APP_COLOR=blue
+ARG PUBLIC_APP_COLOR=
 ENV BODY_SIZE_LIMIT=15728640
 
 RUN --mount=type=cache,target=/app/.npm \
@@ -81,8 +81,7 @@ ENV INCLUDE_DB=${INCLUDE_DB}
 
 # svelte requires APP_BASE at build time so it must be passed as a build arg
 ARG APP_BASE=
-# tailwind requires the primary theme to be known at build time so it must be passed as a build arg
-ARG PUBLIC_APP_COLOR=blue
+ARG PUBLIC_APP_COLOR=
 ARG PUBLIC_COMMIT_SHA=
 ENV PUBLIC_COMMIT_SHA=${PUBLIC_COMMIT_SHA}
 ENV BODY_SIZE_LIMIT=15728640

README.md

@@ -113,14 +113,12 @@ You can use a few environment variables to customize the look and feel of chat-u
 ```env
 PUBLIC_APP_NAME=ChatUI
 PUBLIC_APP_ASSETS=chatui
-PUBLIC_APP_COLOR=blue
 PUBLIC_APP_DESCRIPTION="Making the community's best AI chat models available to everyone."
 PUBLIC_APP_DATA_SHARING=
 ```
 
 - `PUBLIC_APP_NAME` The name used as a title throughout the app.
 - `PUBLIC_APP_ASSETS` Is used to find logos & favicons in `static/$PUBLIC_APP_ASSETS`, current options are `chatui` and `huggingchat`.
-- `PUBLIC_APP_COLOR` Can be any of the [tailwind colors](https://tailwindcss.com/docs/customizing-colors#default-color-palette).
 - `PUBLIC_APP_DATA_SHARING` Can be set to 1 to add a toggle in the user settings that lets your users opt-in to data sharing with models creator.
 
 ### Models

src/lib/components/AnnouncementBanner.svelte

@@ -10,7 +10,7 @@
 
 <div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
 	<span
-		class="from-primary-300 text-primary-700 dark:from-primary-900 dark:text-primary-400 mr-2 inline-flex items-center rounded-lg bg-gradient-to-br px-2 py-1 text-xxs font-medium uppercase leading-3"
+		class="mr-2 inline-flex items-center rounded-lg bg-gradient-to-br from-gray-300 px-2 py-1 text-xxs font-medium uppercase leading-3 text-gray-700 dark:from-gray-900 dark:text-gray-400"
 		>New</span
 	>
 	{title}

src/lib/components/LoginModal.svelte

@@ -19,7 +19,7 @@
 
 <Modal onclose={() => onclose?.()} width="!max-w-[400px] !m-4">
 	<div
-		class="from-primary-500/40 via-primary-500/10 to-primary-500/0 flex w-full flex-col items-center gap-6 bg-gradient-to-b px-5 pb-8 pt-9 text-center"
+		class="flex w-full flex-col items-center gap-6 bg-gradient-to-b from-gray-500/40 via-gray-500/10 to-gray-500/0 px-5 pb-8 pt-9 text-center"
 	>
 		<h2 class="flex items-center text-2xl font-semibold text-gray-800">
 			<Logo classNames="mr-1" />

src/lib/components/OverloadedModal.svelte

@@ -1,42 +0,0 @@
-<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 onclose={onClose} width="!max-w-[400px] !m-4">
-	<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/lib/constants/routerExamples.ts

@@ -28,11 +28,15 @@ export const routerExamples: RouterExample[] = [
 				prompt:
 					"Add a power-up mechanic to the Pong game so paddles temporarily grow when a player scores twice in a row.",
 			},
-
 			{
 				title: "CRT Screen",
 				prompt: "Add a CRT screen effect to the game",
 			},
+			{
+				title: "Explain collision logic",
+				prompt:
+					"Explain the collision detection algorithm in the pong game in simple terms with examples.",
+			},
 		],
 	},
 	{
@@ -61,7 +65,13 @@ export const routerExamples: RouterExample[] = [
 			},
 			{
 				title: "Translate to Italian",
-				prompt: "Translate the visible content of the page into italian",
+				prompt:
+					"Translate only the text content displayed to users (headings, paragraphs, buttons) into Italian. Keep all code, class names, and IDs unchanged.",
+			},
+			{
+				title: "Architecture review",
+				prompt:
+					"Review the architecture and suggest improvements for scalability, SEO optimization, and performance.",
 			},
 		],
 	},
@@ -72,7 +82,7 @@ export const routerExamples: RouterExample[] = [
 		followUps: [
 			{
 				title: "Psychological analysis",
-				prompt: "Provide a psychological analysis of Eminem’s emotions in this song.",
+				prompt: "Provide a psychological analysis of Eminem's emotions in this song.",
 			},
 			{
 				title: "Wired Article",
@@ -82,6 +92,10 @@ export const routerExamples: RouterExample[] = [
 				title: "Roleplay",
 				prompt: "Roleplay as Eminem so I can discuss the song with him.",
 			},
+			{
+				title: "Translate to Spanish",
+				prompt: "Translate the rap lyrics to Spanish while maintaining the rhyme scheme and flow.",
+			},
 		],
 	},
 	{
@@ -103,6 +117,11 @@ export const routerExamples: RouterExample[] = [
 				prompt:
 					"Rewrite the previous response from Yoda into plain English while keeping the same meaning.",
 			},
+			{
+				title: "Compare philosophies",
+				prompt:
+					"Compare Yoda's Jedi philosophy to Stoic philosophy from ancient Greece and explain the similarities and differences.",
+			},
 		],
 	},
 	{
@@ -111,13 +130,18 @@ export const routerExamples: RouterExample[] = [
 		followUps: [
 			{
 				title: "Turn into JSON",
-				prompt: `Generate a detailed JSON object for each prompt. Include fields for subjects (list of objects), scene (setting, environment, background details), actions (what’s happening), style (artistic style or medium)`,
+				prompt: `Generate a detailed JSON object for each prompt. Include fields for subjects (list of objects), scene (setting, environment, background details), actions (what's happening), style (artistic style or medium)`,
 			},
 			{
 				title: "Sci-fi portraits",
 				prompt:
 					"Produce five futuristic character portrait prompts with unique professions and settings.",
 			},
+			{
+				title: "Explain image generation",
+				prompt:
+					"Explain how text-to-image diffusion models work, covering the denoising process and how text prompts guide generation.",
+			},
 		],
 	},
 	{
@@ -139,11 +163,16 @@ export const routerExamples: RouterExample[] = [
 				prompt:
 					"Summarize the explanation of large language models for a high school student using relatable analogies.",
 			},
+			{
+				title: "Write a blog post",
+				prompt:
+					"Write a blog post about how transformers revolutionized NLP, targeting software engineers who are new to AI.",
+			},
 		],
 	},
 	{
 		title: "Translate in Italian",
-		prompt: `Translate in Italian: Some are born great, some achieve greatness, and some have greatness thrust upon ’em`,
+		prompt: `Translate in Italian: Some are born great, some achieve greatness, and some have greatness thrust upon 'em`,
 		followUps: [
 			{
 				title: "Back to English",
@@ -159,6 +188,11 @@ export const routerExamples: RouterExample[] = [
 				prompt:
 					"Modernize the Italian translation into contemporary informal Italian suitable for social media.",
 			},
+			{
+				title: "Teach me Italian",
+				prompt:
+					"Help me practice Italian by conversing about this Shakespeare quote, correcting my grammar when needed.",
+			},
 		],
 	},
 ];

src/routes/+layout.svelte

@@ -17,7 +17,6 @@
 	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 { setContext } from "svelte";
 	import { handleResponse, useAPIClient } from "$lib/APIClient";
 	import { isAborted } from "$lib/stores/isAborted";
@@ -39,8 +38,6 @@
 
 	let isNavCollapsed = $state(false);
 
-	let overloadedModalOpen = $state(false);
-
 	let errorToastTimeout: ReturnType<typeof setTimeout>;
 	let currentError: string | undefined = $state();
 
@@ -54,9 +51,6 @@
 
 		currentError = $error;
 
-		if (currentError === "Model is overloaded") {
-			overloadedModalOpen = true;
-		}
 		errorToastTimeout = setTimeout(() => {
 			$error = undefined;
 			currentError = undefined;
@@ -234,10 +228,6 @@
 	/>
 {/if}
 
-{#if overloadedModalOpen && publicConfig.isHuggingChat}
-	<OverloadedModal onClose={() => (overloadedModalOpen = false)} />
-{/if}
-
 <BackgroundGenerationPoller />
 
 <div

tailwind.config.cjs

@@ -9,7 +9,6 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
-				primary: colors[process.env.PUBLIC_APP_COLOR],
 				gray: {
 					600: "#323843",
 					700: "#252a33",