From d39b279684ec306cf9e826edf6f4d4a9cbdb2911 Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:07:35 +0100
Subject: [PATCH 1/6] init impl. add webpage modal

---
 src/lib/components/chat/Chat.svelte           |  16 ++-
 .../MessageInput/AttachWebpageModal.svelte    | 106 ++++++++----------
 .../workspace/Knowledge/KnowledgeBase.svelte  |  69 +++++++++++-
 .../KnowledgeBase/AddContentMenu.svelte       |  21 ++++
 4 files changed, 149 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 7f80bca601..7acf3ee60e 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -2531,7 +2531,13 @@
 										const { type, data } = e.detail;
 
 										if (type === 'web') {
-											await uploadWeb(data);
+											if (Array.isArray(data)) {
+												for (const url of data) {
+													await uploadWeb(url);
+												}
+											} else {
+												await uploadWeb(data);
+											}
 										} else if (type === 'youtube') {
 											await uploadYoutubeTranscription(data);
 										} else if (type === 'google-drive') {
@@ -2583,7 +2589,13 @@
 										const { type, data } = e.detail;
 
 										if (type === 'web') {
-											await uploadWeb(data);
+											if (Array.isArray(data)) {
+												for (const url of data) {
+													await uploadWeb(url);
+												}
+											} else {
+												await uploadWeb(data);
+											}
 										} else if (type === 'youtube') {
 											await uploadYoutubeTranscription(data);
 										}
diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
index ae6f63ef22..be085b9d20 100644
--- a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -1,85 +1,77 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-
-	import { getContext } from 'svelte';
-	const i18n = getContext('i18n');
-	import { settings } from '$lib/stores';
-
+	import { onMount, getContext } from 'svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
-	import XMark from '$lib/components/icons/XMark.svelte';
-	import { isValidHttpUrl, isYoutubeUrl } from '$lib/utils';
+	import { isValidHttpUrl } from '$lib/utils';
+
+	const i18n = getContext('i18n');
 
 	export let show = false;
-	export let onSubmit: (e) => void;
+	export let onSubmit: Function = () => {};
 
 	let url = '';
 
 	const submitHandler = () => {
-		if (isValidHttpUrl(url)) {
-			onSubmit({
-				type: isYoutubeUrl(url) ? 'youtube' : 'web',
-				data: url
-			});
+		const urls = url
+			.split('\n')
+			.map((u) => u.trim())
+			.filter((u) => u !== '');
 
-			show = false;
-			url = '';
-		} else {
-			toast.error($i18n.t('Please enter a valid URL.'));
+		const validUrls = urls.filter((u) => isValidHttpUrl(u));
+
+		if (validUrls.length === 0) {
+			toast.error($i18n.t('Please enter at least one valid URL.'));
+			return;
 		}
+
+		onSubmit({ type: 'web', data: validUrls });
+		show = false;
+		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>
+<Modal size="sm" bind:show>
+	<div>
+		<div class="flex justify-between items-center mb-3">
+			<div class="text-lg font-bold">{$i18n.t('Attach Webpage')}</div>
 			<button
 				class="self-center"
-				aria-label={$i18n.t('Close modal')}
 				on:click={() => {
 					show = false;
 				}}
 			>
-				<XMark className="size-5" />
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="w-5 h-5"
+				>
+					<path
+						d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+					/>
+				</svg>
 			</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>
+		<div class="flex flex-col w-full">
+			<div class="mb-2 text-xs text-gray-500">
+				{$i18n.t('Enter one URL per line.')}
+			</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
-				/>
+			<textarea
+				class="w-full h-32 p-2 rounded-lg bg-gray-50 dark:bg-gray-850 border border-gray-200 dark:border-gray-800 outline-hidden resize-none text-sm"
+				placeholder={$i18n.t('Enter URLs here...')}
+				bind:value={url}
+			/>
 
-				<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 class="flex justify-end mt-3">
+				<button
+					class="px-4 py-2 bg-black text-white dark:bg-white dark:text-black rounded-full font-medium text-sm transition hover:opacity-80"
+					on:click={submitHandler}
+				>
+					{$i18n.t('Add')}
+				</button>
+			</div>
 		</div>
 	</div>
 </Modal>
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
index d09e608d51..4a0ba4b92e 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
@@ -33,6 +33,7 @@
 		updateFileFromKnowledgeById,
 		updateKnowledgeById
 	} from '$lib/apis/knowledge';
+	import { processWeb } from '$lib/apis/retrieval';
 	import { blobToFile } from '$lib/utils';
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
@@ -209,6 +210,52 @@
 		}
 	};
 
+	const uploadWebBatchHandler = async (urls) => {
+		for (const url of urls) {
+			const tempItemId = uuidv4();
+			const fileItem = {
+				type: 'file',
+				file: '',
+				id: null,
+				url: url,
+				name: url,
+				size: 0,
+				status: 'uploading',
+				error: '',
+				itemId: tempItemId
+			};
+
+			knowledge.files = [...(knowledge.files ?? []), fileItem];
+
+			try {
+				const res = await processWeb(localStorage.token, '', url).catch((e) => {
+					toast.error(`${e}`);
+					return null;
+				});
+
+				if (res) {
+					console.log(res);
+					knowledge.files = knowledge.files.map((item) => {
+						if (item.itemId === tempItemId) {
+							item.id = res.id;
+							item.name = res.name;
+							item.size = res.size;
+							item.status = 'uploaded';
+						}
+						return item;
+					});
+
+					await addFileHandler(res.id);
+				} else {
+					knowledge.files = knowledge.files.filter((item) => item.itemId !== tempItemId);
+				}
+			} catch (e) {
+				toast.error(`${e}`);
+				knowledge.files = knowledge.files.filter((item) => item.itemId !== tempItemId);
+			}
+		}
+	};
+
 	const uploadDirectoryHandler = async () => {
 		// Check if File System Access API is supported
 		const isFileSystemAccessSupported = 'showDirectoryPicker' in window;
@@ -920,16 +967,30 @@
 								<div>
 									<AddContentMenu
 										on:upload={(e) => {
-											if (e.detail.type === 'directory') {
+											if (e.detail.type === 'files') {
+												const input = document.createElement('input');
+												input.type = 'file';
+												input.multiple = true;
+												input.onchange = async (e) => {
+													if (e.target.files) {
+														for (const file of e.target.files) {
+															uploadFileHandler(file);
+														}
+													}
+												};
+												input.click();
+											} else if (e.detail.type === 'directory') {
 												uploadDirectoryHandler();
 											} else if (e.detail.type === 'text') {
 												showAddTextContentModal = true;
-											} else {
-												document.getElementById('files-input').click();
+											} else if (e.detail.type === 'web') {
+												uploadWebBatchHandler(e.detail.data);
 											}
 										}}
 										on:sync={(e) => {
-											showSyncConfirmModal = true;
+											if (e.detail.type === 'directory') {
+												showSyncConfirmModal = true;
+											}
 										}}
 									/>
 								</div>
diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte
index a617e45854..844d1af795 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase/AddContentMenu.svelte
@@ -10,14 +10,25 @@
 	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
 	import FolderOpen from '$lib/components/icons/FolderOpen.svelte';
 	import ArrowPath from '$lib/components/icons/ArrowPath.svelte';
+	import GlobeAlt from '$lib/components/icons/GlobeAlt.svelte';
+
+	import AttachWebpageModal from '$lib/components/chat/MessageInput/AttachWebpageModal.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let onClose: Function = () => {};
 
 	let show = false;
+	let showAttachWebpageModal = false;
 </script>
 
+<AttachWebpageModal
+	bind:show={showAttachWebpageModal}
+	onSubmit={(e) => {
+		dispatch('upload', e);
+	}}
+/>
+
 <Dropdown
 	bind:show
 	on:change={(e) => {
@@ -93,6 +104,16 @@
 				</DropdownMenu.Item>
 			</Tooltip>
 
+			<DropdownMenu.Item
+				class="flex  gap-2  items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+				on:click={() => {
+					showAttachWebpageModal = true;
+				}}
+			>
+				<GlobeAlt strokeWidth="2" />
+				<div class="flex items-center">{$i18n.t('Add from Website')}</div>
+			</DropdownMenu.Item>
+
 			<DropdownMenu.Item
 				class="flex  gap-2  items-center px-3 py-2 text-sm  cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
 				on:click={() => {

From ac75c19d2e6765447957fe515b75996365d8080e Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:12:51 +0100
Subject: [PATCH 2/6] Update AttachWebpageModal.svelte

---
 src/lib/components/chat/MessageInput/AttachWebpageModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
index be085b9d20..1cc1cb8484 100644
--- a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <Modal size="sm" bind:show>
-	<div>
+	<div class="px-6 py-4">
 		<div class="flex justify-between items-center mb-3">
 			<div class="text-lg font-bold">{$i18n.t('Attach Webpage')}</div>
 			<button

From 3a9251c8e4e85120ff6a35527a1233339ffc8585 Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:14:08 +0100
Subject: [PATCH 3/6] Update AttachWebpageModal.svelte

---
 src/lib/components/chat/MessageInput/AttachWebpageModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
index 1cc1cb8484..3c757a052c 100644
--- a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <Modal size="sm" bind:show>
-	<div class="px-6 py-4">
+	<div class="px-5 py-4">
 		<div class="flex justify-between items-center mb-3">
 			<div class="text-lg font-bold">{$i18n.t('Attach Webpage')}</div>
 			<button

From efe4bab305618fae281fe2961d83473204ab036f Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:16:08 +0100
Subject: [PATCH 4/6] Update AttachWebpageModal.svelte

---
 src/lib/components/chat/MessageInput/AttachWebpageModal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
index 3c757a052c..169bddf0d0 100644
--- a/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
+++ b/src/lib/components/chat/MessageInput/AttachWebpageModal.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <Modal size="sm" bind:show>
-	<div class="px-5 py-4">
+	<div class="px-4 py-3">
 		<div class="flex justify-between items-center mb-3">
 			<div class="text-lg font-bold">{$i18n.t('Attach Webpage')}</div>
 			<button

From e093310787dde4eca114e5c3c8c8c26298eb1458 Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:24:17 +0100
Subject: [PATCH 5/6] Update KnowledgeBase.svelte

---
 .../workspace/Knowledge/KnowledgeBase.svelte  | 40 ++++++++++++++-----
 1 file changed, 29 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
index 4a0ba4b92e..d58efcd745 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
@@ -219,8 +219,9 @@
 				id: null,
 				url: url,
 				name: url,
-				size: 0,
+				collection_name: '',
 				status: 'uploading',
+				size: 0,
 				error: '',
 				itemId: tempItemId
 			};
@@ -235,17 +236,34 @@
 
 				if (res) {
 					console.log(res);
-					knowledge.files = knowledge.files.map((item) => {
-						if (item.itemId === tempItemId) {
-							item.id = res.id;
-							item.name = res.name;
-							item.size = res.size;
-							item.status = 'uploaded';
-						}
-						return item;
-					});
 
-					await addFileHandler(res.id);
+					const content = res.file.data.content;
+					const filename = res.filename || url;
+
+					const file = new File([content], filename, { type: 'text/plain' });
+					const uploadedFile = await uploadFile(localStorage.token, file);
+
+					if (uploadedFile) {
+						knowledge.files = knowledge.files.map((item) => {
+							if (item.itemId === tempItemId) {
+								item.id = uploadedFile.id;
+								item.name = uploadedFile.filename;
+								item.size = uploadedFile.size;
+								item.status = 'uploaded';
+							}
+							return item;
+						});
+
+						await addFileHandler(uploadedFile.id);
+					} else {
+						knowledge.files = knowledge.files.map((item) => {
+							if (item.itemId === tempItemId) {
+								item.status = 'failed';
+								item.error = 'Failed to upload file';
+							}
+							return item;
+						});
+					}
 				} else {
 					knowledge.files = knowledge.files.filter((item) => item.itemId !== tempItemId);
 				}

From 6e2333ccf7f339e4c512fdff201b3afc7706033d Mon Sep 17 00:00:00 2001
From: DrMelone <27028174+Classic298@users.noreply.github.com>
Date: Sat, 29 Nov 2025 14:27:29 +0100
Subject: [PATCH 6/6] Update KnowledgeBase.svelte

---
 .../components/workspace/Knowledge/KnowledgeBase.svelte  | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
index d58efcd745..49381dd7fd 100644
--- a/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
+++ b/src/lib/components/workspace/Knowledge/KnowledgeBase.svelte
@@ -240,14 +240,17 @@
 					const content = res.file.data.content;
 					const filename = res.filename || url;
 
-					const file = new File([content], filename, { type: 'text/plain' });
-					const uploadedFile = await uploadFile(localStorage.token, file);
+					// Create a safe filename for the File object to avoid filesystem issues
+					const safeFilename = `web_content_${uuidv4()}.txt`;
+
+					const file = new File([content], safeFilename, { type: 'text/plain' });
+					const uploadedFile = await uploadFile(localStorage.token, file, { name: filename });
 
 					if (uploadedFile) {
 						knowledge.files = knowledge.files.map((item) => {
 							if (item.itemId === tempItemId) {
 								item.id = uploadedFile.id;
-								item.name = uploadedFile.filename;
+								item.name = filename; // Use the URL/filename as the title
 								item.size = uploadedFile.size;
 								item.status = 'uploaded';
 							}