Add rotating INIT_PROMPTS placeholder in chat input

.env

@@ -34,6 +34,9 @@ MONGO_STORAGE_PATH= # where is the db folder stored
 
 REASONING_SUMMARY=false # Change this to false to disable reasoning summary
 
+# Comma-separated list of placeholder prompts that rotate in the chat input when empty
+INIT_PROMPTS=Should the government subsidize healthcare for all citizens?,What are the trade-offs of a single-payer healthcare system?,Is the Affordable Care Act helping or hurting middle-class families?,Should prescription drug prices be regulated by the government?,Is universal healthcare a right or a privilege?,How should we balance healthcare access with fiscal responsibility?,What role should private insurance play alongside public options?,Should preventive care be free for everyone regardless of income?
+
 ## Models overrides
 MODELS=
 

src/lib/components/chat/ChatInput.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, tick } from "svelte";
+	import { fly, fade } from "svelte/transition";
 
 	import HoverTooltip from "$lib/components/HoverTooltip.svelte";
 	import IconPaperclip from "$lib/components/icons/IconPaperclip.svelte";
@@ -12,9 +13,9 @@
 		mimeTypes?: string[];
 		value?: string;
 		placeholder?: string;
+		animatePlaceholder?: boolean;
 		loading?: boolean;
 		disabled?: boolean;
-		// tools removed
 		modelIsMultimodal?: boolean;
 		children?: import("svelte").Snippet;
 		onPaste?: (e: ClipboardEvent) => void;
@@ -27,6 +28,7 @@
 		mimeTypes = [],
 		value = $bindable(""),
 		placeholder = "",
+		animatePlaceholder = false,
 		loading = false,
 		disabled = false,
 
@@ -37,6 +39,8 @@
 		onsubmit,
 	}: Props = $props();
 
+	let showAnimatedPlaceholder = $derived(animatePlaceholder && value === "");
+
 	const onFileChange = async (e: Event) => {
 		if (!e.target) return;
 		const target = e.target as HTMLInputElement;
@@ -95,29 +99,48 @@
 </script>
 
 <div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
-	<textarea
-		rows="1"
-		tabindex="0"
-		inputmode="text"
-		class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none placeholder:text-gray-400 focus:ring-0 focus-visible:ring-0 dark:placeholder:text-gray-500 sm:px-3 md:max-h-[8lh]"
-		class:text-gray-400={disabled}
-		bind:value
-		bind:this={textareaElement}
-		onkeydown={handleKeydown}
-		oncompositionstart={() => (isCompositionOn = true)}
-		oncompositionend={() => (isCompositionOn = false)}
-		oninput={adjustTextareaHeight}
-		onbeforeinput={(ev) => {
-			if (page.data.loginRequired) {
-				ev.preventDefault();
-				$loginModalOpen = true;
-			}
-		}}
-		{placeholder}
-		{disabled}
-		onfocus={() => (focused = true)}
-		onblur={() => (focused = false)}
-	></textarea>
+	<div class="relative w-full">
+		<textarea
+			rows="1"
+			tabindex="0"
+			inputmode="text"
+			class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none placeholder:text-gray-400 focus:ring-0 focus-visible:ring-0 dark:placeholder:text-gray-500 sm:px-3 md:max-h-[8lh]"
+			class:text-gray-400={disabled}
+			bind:value
+			bind:this={textareaElement}
+			onkeydown={handleKeydown}
+			oncompositionstart={() => (isCompositionOn = true)}
+			oncompositionend={() => (isCompositionOn = false)}
+			oninput={adjustTextareaHeight}
+			onbeforeinput={(ev) => {
+				if (page.data.loginRequired) {
+					ev.preventDefault();
+					$loginModalOpen = true;
+				}
+			}}
+			placeholder={showAnimatedPlaceholder ? "" : placeholder}
+			{disabled}
+			onfocus={() => (focused = true)}
+			onblur={() => (focused = false)}
+		></textarea>
+
+		{#if showAnimatedPlaceholder}
+			<div
+				class="pointer-events-none absolute inset-0 overflow-hidden px-2.5 py-2.5 sm:px-3"
+				aria-hidden="true"
+			>
+				{#key placeholder}
+					<span
+						class="animated-placeholder absolute inset-0 px-2.5 py-2.5 text-gray-400 sm:px-3 dark:text-gray-500"
+						in:fly={{ y: 8, duration: 350, delay: 200 }}
+						out:fade={{ duration: 180 }}
+					>
+						{placeholder}
+					</span>
+				{/key}
+			</div>
+		{/if}
+	</div>
 
 	{#if !showNoTools}
 		<div
@@ -171,4 +194,14 @@
 		line-height: 1.5;
 		font-size: 16px;
 	}
+
+	.animated-placeholder {
+		font-family: inherit;
+		font-size: 16px;
+		line-height: 1.5;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 100%;
+	}
 </style>

src/lib/components/chat/ChatWindow.svelte

@@ -58,6 +58,7 @@
 			personaName: string;
 		} | null;
 		files?: File[];
+		initPrompts?: string[];
 		metacognitiveConfig?: MetacognitiveConfig;
 		metacognitiveState?: {
 			targetFrequency?: number;
@@ -85,6 +86,7 @@
 		lockedPersonaId,
 		branchState,
 		files = $bindable([]),
+		initPrompts = [],
 		metacognitiveConfig,
 		metacognitiveState,
 		onmessage,
@@ -142,6 +144,25 @@
 	let editMsdgId: Message["id"] | null = $state(null);
 	let pastedLongContent = $state(false);
 
+	let initPromptIndex = $state(0);
+
+	$effect(() => {
+		if (initPrompts.length > 1) {
+			const interval = setInterval(() => {
+				initPromptIndex = (initPromptIndex + 1) % initPrompts.length;
+			}, 4000);
+			return () => clearInterval(interval);
+		}
+	});
+
+	let rotatingPlaceholder = $derived.by(() => {
+		if (messages.length > 0 || branchState) {
+			return branchState ? `Branched from ${branchState.personaName}` : "Ask anything";
+		}
+		if (initPrompts.length === 0) return "Ask anything";
+		return initPrompts[initPromptIndex];
+	});
+
 	const handleSubmit = () => {
 		if (loading) return;
 		onmessage?.(message);
@@ -609,22 +630,21 @@
 						{#if lastIsError}
 							<ChatInput value="Sorry, something went wrong. Please try again." disabled={true} />
 						{:else}
-							<ChatInput
-								placeholder={isReadOnly 
-									? "This conversation is read-only." 
-									: branchState 
-										? `Branched from ${branchState.personaName}` 
-										: "Ask anything"}
-								{loading}
-								bind:value={message}
-								bind:files
-								mimeTypes={activeMimeTypes}
-								onsubmit={handleSubmit}
-								{onPaste}
-								disabled={isReadOnly || lastIsError}
-								{modelIsMultimodal}
-								bind:focused
-							/>
+						<ChatInput
+							placeholder={isReadOnly 
+								? "This conversation is read-only." 
+								: rotatingPlaceholder}
+							animatePlaceholder={!isReadOnly && initPrompts.length > 1 && messages.length === 0 && !branchState}
+							{loading}
+							bind:value={message}
+							bind:files
+							mimeTypes={activeMimeTypes}
+							onsubmit={handleSubmit}
+							{onPaste}
+							disabled={isReadOnly || lastIsError}
+							{modelIsMultimodal}
+							bind:focused
+						/>
 						{/if}
 
 						{#if loading}

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

@@ -24,6 +24,16 @@ export type ApiReturnType = Awaited<ReturnType<typeof Client.prototype.view_api>
 export const misc = new Elysia()
 	.use(authPlugin)
 	.get("/public-config", async () => config.getPublicConfig())
+	.get("/init-prompts", async () => {
+		const raw = config.INIT_PROMPTS;
+		if (!raw || raw.trim() === "") return { prompts: [] };
+		return {
+			prompts: raw
+				.split(",")
+				.map((s: string) => s.trim())
+				.filter(Boolean),
+		};
+	})
 	.get("/metacognitive-config", async () => {
 		const metacogConfig = getMetacognitiveConfig();
 		return {

src/lib/server/config.ts

@@ -158,7 +158,8 @@ type ExtraConfigKeys =
 	| "ALLOWED_MODELS"
 	| "METACOGNITIVE_FREQUENCIES"
 	| "METACOGNITIVE_PROMPTS_COMPREHENSION"
-	| "METACOGNITIVE_PROMPTS_PERSPECTIVE";
+	| "METACOGNITIVE_PROMPTS_PERSPECTIVE"
+	| "INIT_PROMPTS";
 
 type ConfigProxy = ConfigManager & { [K in ConfigKey | ExtraConfigKeys]: string };
 

src/routes/+layout.ts

@@ -17,6 +17,7 @@ export const load = async ({ depends, fetch, url }) => {
 		featureFlags,
 		conversationsData,
 		metacognitiveConfig,
+		initPromptsData,
 	] = await Promise.all([
 		client.user.settings.get().then(handleResponse),
 		client.models.get().then(handleResponse),
@@ -26,6 +27,7 @@ export const load = async ({ depends, fetch, url }) => {
 		client["feature-flags"].get().then(handleResponse),
 		client.conversations.get({ query: { p: 0 } }).then(handleResponse),
 		client["metacognitive-config"].get().then(handleResponse),
+		client["init-prompts"].get().then(handleResponse),
 	]);
 
 	const defaultModel = models[0];
@@ -66,6 +68,7 @@ export const load = async ({ depends, fetch, url }) => {
 			perspectivePrompts: string[];
 			enabled: boolean;
 		},
+		initPrompts: (initPromptsData as { prompts: string[] }).prompts,
 		...featureFlags,
 	};
 };

src/routes/+page.svelte

@@ -97,6 +97,7 @@ const publicConfig = usePublicConfig();
 		{loading}
 		{currentModel}
 		models={data.models}
+		initPrompts={data.initPrompts}
 		bind:files
 	/>
 {:else}

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

@@ -726,6 +726,7 @@ let branchSyncTimeout: ReturnType<typeof setTimeout> | null = null;
 	preprompt={data.preprompt}
 	personaId={(data as any).personaId}
 	branchState={activeBranch}
+	initPrompts={data.initPrompts}
 	metacognitiveConfig={data.metacognitiveConfig}
 	metacognitiveState={(data as any).metacognitiveState}
 	bind:files

src/routes/models/[...model]/+page.svelte

@@ -90,5 +90,6 @@
 	{loading}
 	currentModel={findCurrentModel(data.models, data.oldModels, modelId)}
 	models={data.models}
+	initPrompts={data.initPrompts}
 	bind:files
 />