From 2a95cbcef7e9ecb59c279ab767170d35150e4887 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 24 Sep 2025 11:11:26 -0500
Subject: [PATCH] enh: attach webpage input menu

---
 src/lib/components/chat/MessageInput.svelte   |  3 +
 .../MessageInput/AttachWebpageModal.svelte    | 88 +++++++++++++++++++
 .../chat/MessageInput/InputMenu.svelte        | 22 +++++
 3 files changed, 113 insertions(+)
 create mode 100644 src/lib/components/chat/MessageInput/AttachWebpageModal.svelte

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index d56a6bf57a..049c759391 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1414,6 +1414,9 @@
 													console.error('OneDrive Error:', error);
 												}
 											}}
+											onUpload={async (e) => {
+												dispatch('upload', e);
+											}}
 											onClose={async () => {
 												await tick();
 
diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
new file mode 100644
index 0000000000..9105c10362
--- /dev/null
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+	import { toast } from 'svelte-sonner';
+
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+	import { settings } from '$lib/stores';
+
+	import Modal from '$lib/components/common/Modal.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import { isValidHttpUrl } from '$lib/utils';
+
+	export let show = false;
+	export let onSubmit: (e) => void;
+
+	let url = '';
+
+	const submitHandler = () => {
+		if (isValidHttpUrl(url)) {
+			onSubmit({
+				type:
+					url.startsWith('https://www.youtube.com') || url.startsWith('https://youtu.be')
+						? 'youtube'
+						: 'web',
+				data: url
+			});
+
+			show = false;
+			url = '';
+		} else {
+			toast.error($i18n.t('Please enter a valid URL.'));
+		}
+	};
+</script>
+
+<Modal bind:show size="sm">
+	<div class="flex flex-col h-full">
+		<div class="flex justify-between items-center dark:text-gray-100 px-5 pt-4 pb-1.5">
+			<h1 class="text-lg font-medium self-center font-primary">
+				{$i18n.t('Attach Webpage')}
+			</h1>
+			<button
+				class="self-center"
+				aria-label={$i18n.t('Close modal')}
+				on:click={() => {
+					show = false;
+				}}
+			>
+				<XMark className="size-5" />
+			</button>
+		</div>
+
+		<div class="px-5 pb-4">
+			<form
+				on:submit={(e) => {
+					e.preventDefault();
+					submitHandler();
+				}}
+			>
+				<div class="flex justify-between mb-0.5">
+					<label
+						for="webpage-url"
+						class={`text-xs ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
+						>{$i18n.t('Webpage URL')}</label
+					>
+				</div>
+
+				<input
+					id="webpage-url"
+					class={`w-full flex-1 text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
+					type="text"
+					bind:value={url}
+					placeholder={'https://example.com'}
+					autocomplete="off"
+					required
+				/>
+
+				<div class="flex justify-end gap-2 pt-3 bg-gray-50 dark:bg-gray-900/50">
+					<button
+						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-800 text-white dark:bg-white dark:text-black dark:hover:bg-gray-200 transition rounded-full"
+						type="submit"
+					>
+						{$i18n.t('Add')}
+					</button>
+				</div>
+			</form>
+		</div>
+	</div>
+</Modal>
diff --git a/src/lib/components/chat/MessageInput/InputMenu.svelte b/src/lib/components/chat/MessageInput/InputMenu.svelte
index a8a44944c3..3c27ba31b6 100644
--- a/src/lib/components/chat/MessageInput/InputMenu.svelte
+++ b/src/lib/components/chat/MessageInput/InputMenu.svelte
@@ -24,6 +24,8 @@
 	import Chats from './InputMenu/Chats.svelte';
 	import Notes from './InputMenu/Notes.svelte';
 	import Knowledge from './InputMenu/Knowledge.svelte';
+	import Link from '$lib/components/icons/Link.svelte';
+	import AttachWebpageModal from './AttachWebpageModal.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -39,11 +41,14 @@
 	export let uploadGoogleDriveHandler: Function;
 	export let uploadOneDriveHandler: Function;
 
+	export let onUpload: Function;
 	export let onClose: Function;
 
 	let show = false;
 	let tab = '';
 
+	let showAttachWebpageModal = false;
+
 	let fileUploadEnabled = true;
 	$: fileUploadEnabled =
 		fileUploadCapableModels.length === selectedModels.length &&
@@ -78,6 +83,13 @@
 	};
 </script>
 
+<AttachWebpageModal
+	bind:show={showAttachWebpageModal}
+	onSubmit={(e) => {
+		onUpload(e);
+	}}
+/>
+
 <!-- Hidden file input used to open the camera on mobile -->
 <input
 	id="camera-input"
@@ -166,6 +178,16 @@
 						</DropdownMenu.Item>
 					</Tooltip>
 
+					<DropdownMenu.Item
+						class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+						on:click={() => {
+							showAttachWebpageModal = true;
+						}}
+					>
+						<Link />
+						<div class="line-clamp-1">{$i18n.t('Attach Webpage')}</div>
+					</DropdownMenu.Item>
+
 					{#if $config?.features?.enable_notes ?? false}
 						<Tooltip
 							content={fileUploadCapableModels.length !== selectedModels.length