Prompt params (#1949)

* Add support for 'prompt' URL param and draft binding

Introduces a utility to sanitize URL parameters and updates chat window logic to use a 'draft' state instead of 'message'. Both main and model-specific chat pages now support pre-filling the chat input from a 'prompt' URL parameter, and clear the parameter after use. This improves UX for deep-linking and sharing prompts.

* Sanitize URL parameters in model page

Added usage of sanitizeUrlParam for 'q' and 'prompt' URL parameters in the model page to prevent unsafe input. Wrapped parameter handling in a try-catch block to improve error handling and log failures.

src/lib/components/chat/ChatWindow.svelte

@@ -49,6 +49,7 @@
 		onstop?: () => void;
 		onretry?: (payload: { id: Message["id"]; content?: string }) => void;
 		onshowAlternateMsg?: (payload: { id: Message["id"] }) => void;
+		draft?: string;
 	}
 
 	let {
@@ -61,6 +62,7 @@
 		models,
 		preprompt = undefined,
 		files = $bindable([]),
+		draft = $bindable(""),
 		onmessage,
 		onstop,
 		onretry,
@@ -69,15 +71,14 @@
 
 	let isReadOnly = $derived(!models.some((model) => model.id === currentModel.id));
 
-	let message: string = $state("");
 	let shareModalOpen = $state(false);
 	let editMsdgId: Message["id"] | null = $state(null);
 	let pastedLongContent = $state(false);
 
 	const handleSubmit = () => {
-		if (loading) return;
-		onmessage?.(message);
-		message = "";
+		if (loading || !draft) return;
+		onmessage?.(draft);
+		draft = "";
 	};
 
 	let lastTarget: EventTarget | null = null;
@@ -248,7 +249,7 @@
 	);
 	let routerUserMessages = $derived(messages.filter((msg) => msg.from === "user"));
 	let shouldShowRouterFollowUps = $derived(
-		!message.length &&
+		!draft.length &&
 			activeRouterExamplePrompt &&
 			routerFollowUps.length > 0 &&
 			routerUserMessages.length === 1 &&
@@ -279,7 +280,7 @@
 			$loginModalOpen = true;
 			return;
 		}
-		message = prompt;
+		draft = prompt;
 		handleSubmit();
 	}
 
@@ -398,7 +399,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 && !lastIsError}
+		{#if !draft.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"
 			>
@@ -485,7 +486,7 @@
 							<ChatInput
 								placeholder={isReadOnly ? "This conversation is read-only." : "Ask anything"}
 								{loading}
-								bind:value={message}
+								bind:value={draft}
 								bind:files
 								mimeTypes={activeMimeTypes}
 								onsubmit={handleSubmit}
@@ -504,11 +505,11 @@
 							/>
 						{:else}
 							<button
-								class="btn absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none enabled:hover:bg-white enabled:hover:shadow-inner dark:border-transparent dark:bg-gray-600 dark:text-white dark:hover:enabled:bg-black {!message ||
+								class="btn absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none enabled:hover:bg-white enabled:hover:shadow-inner dark:border-transparent dark:bg-gray-600 dark:text-white dark:hover:enabled:bg-black {!draft ||
 								isReadOnly
 									? ''
 									: '!bg-black !text-white dark:!bg-white dark:!text-black'}"
-								disabled={!message || isReadOnly}
+								disabled={!draft || isReadOnly}
 								type="submit"
 								aria-label="Send message"
 								name="submit"

src/lib/utils/urlParams.ts

@@ -0,0 +1,13 @@
+const MAX_PARAM_LENGTH = 10_000;
+
+export function sanitizeUrlParam(value: string | null): string | null {
+	if (value == null) return null;
+
+	const trimmed = value.trim();
+	if (!trimmed.length) return null;
+	if (trimmed.length > MAX_PARAM_LENGTH) return null;
+
+	return trimmed;
+}
+
+export { MAX_PARAM_LENGTH };

src/routes/+page.svelte

@@ -7,17 +7,19 @@
 	const publicConfig = usePublicConfig();
 
 	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
-	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
-	import { pendingMessage } from "$lib/stores/pendingMessage";
-	import { useSettingsStore } from "$lib/stores/settings.js";
-	import { findCurrentModel } from "$lib/utils/models";
-	import { onMount } from "svelte";
+import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+import { pendingMessage } from "$lib/stores/pendingMessage";
+import { useSettingsStore } from "$lib/stores/settings.js";
+import { findCurrentModel } from "$lib/utils/models";
+import { sanitizeUrlParam } from "$lib/utils/urlParams";
+import { onMount } from "svelte";
 
 	let { data } = $props();
 
 	let hasModels = $derived(Boolean(data.models?.length));
 	let loading = $state(false);
 	let files: File[] = $state([]);
+	let draft = $state("");
 
 	const settings = useSettingsStore();
 
@@ -74,9 +76,26 @@
 	}
 
 	onMount(() => {
-		// check if there's a ?q query param with a message
-		const query = page.url.searchParams.get("q");
-		if (query) createConversation(query);
+		try {
+			const query = sanitizeUrlParam(page.url.searchParams.get("q"));
+			if (query) {
+				void createConversation(query);
+				const url = new URL(page.url);
+				url.searchParams.delete("q");
+				history.replaceState({}, "", url);
+				return;
+			}
+
+			const promptQuery = sanitizeUrlParam(page.url.searchParams.get("prompt"));
+			if (promptQuery && !draft) {
+				draft = promptQuery;
+				const url = new URL(page.url);
+				url.searchParams.delete("prompt");
+				history.replaceState({}, "", url);
+			}
+		} catch (err) {
+			console.error("Failed to process URL parameters:", err);
+		}
 	});
 
 	let currentModel = $derived(findCurrentModel(data.models, data.oldModels, $settings.activeModel));
@@ -93,6 +112,7 @@
 		{currentModel}
 		models={data.models}
 		bind:files
+		bind:draft
 	/>
 {:else}
 	<div class="mx-auto my-20 max-w-xl rounded-xl border p-6 text-center dark:border-gray-700">

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

@@ -10,11 +10,13 @@
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { sanitizeUrlParam } from "$lib/utils/urlParams";
 
 	let { data } = $props();
 
 	let loading = $state(false);
 	let files: File[] = $state([]);
+	let draft = $state("");
 
 	const settings = useSettingsStore();
 	const modelId = page.params.model;
@@ -59,9 +61,27 @@
 		}
 	}
 
-	onMount(async () => {
-		const query = page.url.searchParams.get("q");
-		if (query) createConversation(query);
+	onMount(() => {
+		try {
+			const query = sanitizeUrlParam(page.url.searchParams.get("q"));
+			if (query) {
+				void createConversation(query);
+				const url = new URL(page.url);
+				url.searchParams.delete("q");
+				history.replaceState({}, "", url);
+				return;
+			}
+
+			const promptQuery = sanitizeUrlParam(page.url.searchParams.get("prompt"));
+			if (promptQuery && !draft) {
+				draft = promptQuery;
+				const url = new URL(page.url);
+				url.searchParams.delete("prompt");
+				history.replaceState({}, "", url);
+			}
+		} catch (err) {
+			console.error("Failed to process URL parameters:", err);
+		}
 
 		settings.instantSet({ activeModel: modelId });
 	});
@@ -85,4 +105,5 @@
 	currentModel={findCurrentModel(data.models, data.oldModels, modelId)}
 	models={data.models}
 	bind:files
+	bind:draft
 />