Add image attachment support to router examples (#1883)

Simplify image attachment implementation for router examples

- Simplified RouterExampleAttachment type to only require src field
- Removed resolveExampleSrc helper function in favor of direct path construction
- Let browser infer MIME types from blob response
- Reduced code complexity while maintaining functionality

src/lib/components/chat/ChatWindow.svelte

@@ -286,8 +286,26 @@
 		handleSubmit();
 	}
 
-	function startExample(example: RouterExample) {
+	async function startExample(example: RouterExample) {
 		activeRouterExamplePrompt = example.prompt;
+
+		if (browser && example.attachments?.length) {
+			const loadedFiles: File[] = [];
+			for (const attachment of example.attachments) {
+				try {
+					const response = await fetch(`${base}/${attachment.src}`);
+					if (!response.ok) continue;
+
+					const blob = await response.blob();
+					const name = attachment.src.split("/").pop() ?? "attachment";
+					loadedFiles.push(new File([blob], name, { type: blob.type || "application/octet-stream" }));
+				} catch (err) {
+					console.error("Error loading attachment:", err);
+				}
+			}
+			files = loadedFiles;
+		}
+
 		triggerPrompt(example.prompt);
 	}
 

src/lib/constants/routerExamples.ts

@@ -3,10 +3,15 @@ export type RouterFollowUp = {
 	prompt: string;
 };
 
+export type RouterExampleAttachment = {
+	src: string;
+};
+
 export type RouterExample = {
 	title: string;
 	prompt: string;
 	followUps?: RouterFollowUp[];
+	attachments?: RouterExampleAttachment[];
 };
 
 export const routerExamples: RouterExample[] = [
@@ -30,6 +35,15 @@ export const routerExamples: RouterExample[] = [
 			},
 		],
 	},
+	{
+		title: "Weird painting",
+		prompt: "is this a real painting?",
+		attachments: [
+			{
+				src: "huggingchat/castle-example.jpg",
+			},
+		],
+	},
 	{
 		title: "Landing page",
 		prompt: