Url attachments (#1965)

* Add custom scrollbar class to Modal component

Applied the 'scrollbar-custom' class to the Modal's main container to enable custom scrollbar styling. This improves the appearance and consistency of scrollbars within modals.

* Add support for loading attachments from URLs

Implements the ability to load file attachments via URL parameters using a new utility (loadAttachmentsFromUrls) and a server-side proxy endpoint (/api/fetch-url) to securely fetch remote files. Updates chat and model pages to handle 'attachments' query parameters, injects file content into user messages, and improves multimodal message preparation. Also includes minor UI adjustments for file display and refactors Plausible analytics script initialization.

* Block redirects in fetch-url API endpoint

src/lib/components/Modal.svelte

@@ -78,7 +78,7 @@
 				bind:this={modalEl}
 				onkeydown={handleKeydown}
 				class={[
-					"relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
 					width,
 				]}
 			>
@@ -97,7 +97,7 @@
 				onkeydown={handleKeydown}
 				in:fly={{ y: 100 }}
 				class={[
-					"relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
 					width,
 				]}
 			>

src/lib/components/chat/UploadedFile.svelte

@@ -73,8 +73,11 @@
 				/>
 			{/if}
 		{:else if isPlainText(file.mime)}
-			<div class="relative flex h-full w-full flex-col gap-4 p-4">
-				<h3 class="-mb-4 pt-2 text-xl font-bold">{file.name}</h3>
+			<div class="relative flex h-full w-full flex-col gap-2 p-4">
+				<div class="flex items-center gap-1">
+					<CarbonDocument />
+					<h3 class="text-lg font-semibold">{file.name}</h3>
+				</div>
 				{#if file.mime === "application/vnd.chatui.clipboard"}
 					<p class="text-sm text-gray-500">
 						If you prefer to inject clipboard content directly in the chat, you can disable this
@@ -95,7 +98,7 @@
 						</div>
 					{:then result}
 						<pre
-							class="w-full whitespace-pre-wrap break-words pt-0 text-sm"
+							class="w-full whitespace-pre-wrap break-words pt-0 text-xs"
 							class:font-sans={file.mime === "text/plain" ||
 								file.mime === "application/vnd.chatui.clipboard"}
 							class:font-mono={file.mime !== "text/plain" &&
@@ -103,7 +106,7 @@
 					{/await}
 				{:else}
 					<pre
-						class="w-full whitespace-pre-wrap break-words pt-0 text-sm"
+						class="w-full whitespace-pre-wrap break-words pt-0 text-xs"
 						class:font-sans={file.mime === "text/plain" ||
 							file.mime === "application/vnd.chatui.clipboard"}
 						class:font-mono={file.mime !== "text/plain" &&
@@ -124,7 +127,6 @@
 			showModal = true;
 		}
 	}}
-	class="mt-4"
 	class:clickable={isClickable}
 	role="button"
 	tabindex="0"
@@ -161,7 +163,7 @@
 			</div>
 		{:else if isPlainText(file.mime)}
 			<div
-				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class="flex h-14 w-64 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900 2xl:w-72"
 				class:file-hoverable={isClickable}
 			>
 				<div

src/lib/server/endpoints/openai/endpointOai.ts

@@ -246,12 +246,27 @@ async function prepareMessages(
 ): Promise<OpenAI.Chat.Completions.ChatCompletionMessageParam[]> {
 	return Promise.all(
 		messages.map(async (message) => {
-			if (message.from === "user" && isMultimodal) {
-				const imageParts = await prepareFiles(imageProcessor, message.files ?? []);
-				if (imageParts.length) {
-					const parts = [{ type: "text" as const, text: message.content }, ...imageParts];
+			if (message.from === "user" && message.files && message.files.length > 0) {
+				const { imageParts, textContent } = await prepareFiles(
+					imageProcessor,
+					message.files,
+					isMultimodal
+				);
+
+				// If we have text files, prepend their content to the message
+				let messageText = message.content;
+				if (textContent.length > 0) {
+					messageText = textContent + "\n\n" + message.content;
+				}
+
+				// If we have images and multimodal is enabled, use structured content
+				if (imageParts.length > 0 && isMultimodal) {
+					const parts = [{ type: "text" as const, text: messageText }, ...imageParts];
 					return { role: message.from, content: parts };
 				}
+
+				// Otherwise just use the text (possibly with injected file content)
+				return { role: message.from, content: messageText };
 			}
 			return { role: message.from, content: message.content };
 		})
@@ -260,18 +275,48 @@ async function prepareMessages(
 
 async function prepareFiles(
 	imageProcessor: ReturnType<typeof makeImageProcessor>,
-	files: MessageFile[]
-): Promise<OpenAI.Chat.Completions.ChatCompletionContentPartImage[]> {
-	const processedFiles = await Promise.all(
-		files.filter((file) => file.mime.startsWith("image/")).map(imageProcessor)
+	files: MessageFile[],
+	isMultimodal: boolean
+): Promise<{
+	imageParts: OpenAI.Chat.Completions.ChatCompletionContentPartImage[];
+	textContent: string;
+}> {
+	// Separate image and text files
+	const imageFiles = files.filter((file) => file.mime.startsWith("image/"));
+	const textFiles = files.filter(
+		(file) =>
+			file.mime.startsWith("text/") ||
+			file.mime === "application/json" ||
+			file.mime === "application/xml" ||
+			file.mime === "application/csv"
 	);
-	return processedFiles.map((file) => ({
-		type: "image_url" as const,
-		image_url: {
-			url: `data:${file.mime};base64,${file.image.toString("base64")}`,
-			// Improves compatibility with some OpenAI-compatible servers
-			// that expect an explicit detail setting.
-			detail: "auto",
-		},
-	}));
+
+	// Process images if multimodal is enabled
+	let imageParts: OpenAI.Chat.Completions.ChatCompletionContentPartImage[] = [];
+	if (isMultimodal && imageFiles.length > 0) {
+		const processedFiles = await Promise.all(imageFiles.map(imageProcessor));
+		imageParts = processedFiles.map((file) => ({
+			type: "image_url" as const,
+			image_url: {
+				url: `data:${file.mime};base64,${file.image.toString("base64")}`,
+				// Improves compatibility with some OpenAI-compatible servers
+				// that expect an explicit detail setting.
+				detail: "auto",
+			},
+		}));
+	}
+
+	// Process text files - inject their content
+	let textContent = "";
+	if (textFiles.length > 0) {
+		const textParts = await Promise.all(
+			textFiles.map(async (file) => {
+				const content = Buffer.from(file.value, "base64").toString("utf-8");
+				return `<document name="${file.name}" type="${file.mime}">\n${content}\n</document>`;
+			})
+		);
+		textContent = textParts.join("\n\n");
+	}
+
+	return { imageParts, textContent };
 }

src/lib/utils/loadAttachmentsFromUrls.ts

@@ -0,0 +1,104 @@
+import { base } from "$app/paths";
+
+export interface AttachmentLoadResult {
+	files: File[];
+	errors: string[];
+}
+
+/**
+ * Parse attachment URLs from query parameters
+ * Supports both comma-separated (?attachments=url1,url2) and multiple params (?attachments=url1&attachments=url2)
+ */
+function parseAttachmentUrls(searchParams: URLSearchParams): string[] {
+	const urls: string[] = [];
+
+	// Get all 'attachments' parameters
+	const attachmentParams = searchParams.getAll("attachments");
+
+	for (const param of attachmentParams) {
+		// Split by comma in case multiple URLs are in one param
+		const splitUrls = param.split(",").map((url) => url.trim());
+		urls.push(...splitUrls);
+	}
+
+	// Filter out empty strings
+	return urls.filter((url) => url.length > 0);
+}
+
+/**
+ * Extract filename from URL or Content-Disposition header
+ */
+function extractFilename(url: string, contentDisposition?: string | null): string {
+	// Try to get filename from Content-Disposition header
+	if (contentDisposition) {
+		const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
+		if (match && match[1]) {
+			return match[1].replace(/['"]/g, "");
+		}
+	}
+
+	// Fallback: extract from URL
+	try {
+		const urlObj = new URL(url);
+		const pathname = urlObj.pathname;
+		const segments = pathname.split("/");
+		const lastSegment = segments[segments.length - 1];
+
+		if (lastSegment && lastSegment.length > 0) {
+			return decodeURIComponent(lastSegment);
+		}
+	} catch {
+		// Invalid URL, fall through to default
+	}
+
+	return "attachment";
+}
+
+/**
+ * Load files from remote URLs via server-side proxy
+ */
+export async function loadAttachmentsFromUrls(
+	searchParams: URLSearchParams
+): Promise<AttachmentLoadResult> {
+	const urls = parseAttachmentUrls(searchParams);
+
+	if (urls.length === 0) {
+		return { files: [], errors: [] };
+	}
+
+	const files: File[] = [];
+	const errors: string[] = [];
+
+	await Promise.all(
+		urls.map(async (url) => {
+			try {
+				// Fetch via our proxy endpoint to bypass CORS
+				const proxyUrl = `${base}/api/fetch-url?${new URLSearchParams({ url })}`;
+				const response = await fetch(proxyUrl);
+
+				if (!response.ok) {
+					const errorText = await response.text();
+					errors.push(`Failed to fetch ${url}: ${errorText}`);
+					return;
+				}
+
+				const blob = await response.blob();
+				const contentDisposition = response.headers.get("content-disposition");
+				const filename = extractFilename(url, contentDisposition);
+
+				// Create File object
+				const file = new File([blob], filename, {
+					type: blob.type || "application/octet-stream",
+				});
+
+				files.push(file);
+			} catch (err) {
+				const message = err instanceof Error ? err.message : "Unknown error";
+				errors.push(`Failed to load ${url}: ${message}`);
+				console.error(`Error loading attachment from ${url}:`, err);
+			}
+		})
+	);
+
+	return { files, errors };
+}

src/routes/+layout.svelte

@@ -57,7 +57,7 @@
 		}, 5000);
 	}
 
-	const canShare = $derived(
+	let canShare = $derived(
 		publicConfig.isHuggingChat &&
 			Boolean(page.params?.id) &&
 			page.route.id?.startsWith("/conversation/")

src/routes/+page.svelte

@@ -14,6 +14,7 @@
 	import { sanitizeUrlParam } from "$lib/utils/urlParams";
 	import { onMount, tick } from "svelte";
 	import { loading } from "$lib/stores/loading.js";
+	import { loadAttachmentsFromUrls } from "$lib/utils/loadAttachmentsFromUrls";
 
 	let { data } = $props();
 
@@ -75,8 +76,27 @@
 		}
 	}
 
-	onMount(() => {
+	onMount(async () => {
 		try {
+			// Handle attachments parameter first
+			if (page.url.searchParams.has("attachments")) {
+				const result = await loadAttachmentsFromUrls(page.url.searchParams);
+				files = result.files;
+
+				// Show errors if any
+				if (result.errors.length > 0) {
+					console.error("Failed to load some attachments:", result.errors);
+					error.set(
+						`Failed to load ${result.errors.length} attachment(s). Check console for details.`
+					);
+				}
+
+				// Clean up URL
+				const url = new URL(page.url);
+				url.searchParams.delete("attachments");
+				history.replaceState({}, "", url);
+			}
+
 			const query = sanitizeUrlParam(page.url.searchParams.get("q"));
 			if (query) {
 				void createConversation(query);

src/routes/api/fetch-url/+server.ts

@@ -0,0 +1,98 @@
+import { error } from "@sveltejs/kit";
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+const FETCH_TIMEOUT = 30000; // 30 seconds
+
+// Validate URL safety - HTTPS only
+function isValidUrl(urlString: string): boolean {
+	try {
+		const url = new URL(urlString);
+		// Only allow HTTPS protocol
+		if (url.protocol !== "https:") {
+			return false;
+		}
+		// Prevent localhost/private IPs (basic check)
+		const hostname = url.hostname.toLowerCase();
+		if (
+			hostname === "localhost" ||
+			hostname.startsWith("127.") ||
+			hostname.startsWith("192.168.") ||
+			hostname.startsWith("10.") ||
+			hostname.startsWith("172.16.") ||
+			hostname === "[::1]" ||
+			hostname === "0.0.0.0"
+		) {
+			return false;
+		}
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+export async function GET({ url, fetch }) {
+	const targetUrl = url.searchParams.get("url");
+
+	if (!targetUrl) {
+		throw error(400, "Missing 'url' parameter");
+	}
+
+	if (!isValidUrl(targetUrl)) {
+		throw error(400, "Invalid or unsafe URL (only HTTPS is supported)");
+	}
+
+	try {
+		// Fetch with timeout
+		const controller = new AbortController();
+		const timeoutId = setTimeout(() => controller.abort(), FETCH_TIMEOUT);
+
+		const response = await fetch(targetUrl, {
+			signal: controller.signal,
+			redirect: "error", // Block all redirects
+			headers: {
+				"User-Agent": "HuggingChat-Attachment-Fetcher/1.0",
+			},
+		}).finally(() => clearTimeout(timeoutId));
+
+		if (!response.ok) {
+			throw error(response.status, `Failed to fetch: ${response.statusText}`);
+		}
+
+		// Check content length if available
+		const contentLength = response.headers.get("content-length");
+		if (contentLength && parseInt(contentLength) > MAX_FILE_SIZE) {
+			throw error(413, "File too large (max 10MB)");
+		}
+
+		// Stream the response back
+		const contentType = response.headers.get("content-type") || "application/octet-stream";
+		const contentDisposition = response.headers.get("content-disposition");
+
+		const headers: HeadersInit = {
+			"Content-Type": contentType,
+			"Cache-Control": "public, max-age=3600",
+		};
+
+		if (contentDisposition) {
+			headers["Content-Disposition"] = contentDisposition;
+		}
+
+		// Get the body as array buffer to check size
+		const arrayBuffer = await response.arrayBuffer();
+
+		if (arrayBuffer.byteLength > MAX_FILE_SIZE) {
+			throw error(413, "File too large (max 10MB)");
+		}
+
+		return new Response(arrayBuffer, { headers });
+	} catch (err) {
+		if (err instanceof Error) {
+			if (err.name === "AbortError") {
+				throw error(504, "Request timeout");
+			}
+			console.error("Error fetching URL:", err);
+			throw error(500, `Failed to fetch URL: ${err.message}`);
+		}
+		throw error(500, "Failed to fetch URL");
+	}
+}

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

@@ -11,6 +11,7 @@
 	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
 	import { pendingMessage } from "$lib/stores/pendingMessage";
 	import { sanitizeUrlParam } from "$lib/utils/urlParams";
+	import { loadAttachmentsFromUrls } from "$lib/utils/loadAttachmentsFromUrls";
 
 	let { data } = $props();
 
@@ -61,8 +62,27 @@
 		}
 	}
 
-	onMount(() => {
+	onMount(async () => {
 		try {
+			// Handle attachments parameter first
+			if (page.url.searchParams.has("attachments")) {
+				const result = await loadAttachmentsFromUrls(page.url.searchParams);
+				files = result.files;
+
+				// Show errors if any
+				if (result.errors.length > 0) {
+					console.error("Failed to load some attachments:", result.errors);
+					error.set(
+						`Failed to load ${result.errors.length} attachment(s). Check console for details.`
+					);
+				}
+
+				// Clean up URL
+				const url = new URL(page.url);
+				url.searchParams.delete("attachments");
+				history.replaceState({}, "", url);
+			}
+
 			const query = sanitizeUrlParam(page.url.searchParams.get("q"));
 			if (query) {
 				void createConversation(query);