enh: allow direct file upload to knowledge attachment

src/lib/components/chat/Placeholder/FolderTitle.svelte

@@ -125,7 +125,7 @@
 			</div>
 		</div>
 
-		<div class="flex items-center">
+		<div class="flex items-center translate-x-2.5">
 			<FolderMenu
 				align="end"
 				onEdit={() => {

src/lib/components/workspace/Models/Knowledge.svelte

@@ -1,16 +1,144 @@
 <script lang="ts">
 	import { getContext, onMount } from 'svelte';
-	import { knowledge } from '$lib/stores';
+	import { config, knowledge, settings, user } from '$lib/stores';
 
 	import Selector from './Knowledge/Selector.svelte';
 	import FileItem from '$lib/components/common/FileItem.svelte';
+
 	import { getKnowledgeBases } from '$lib/apis/knowledge';
+	import { uploadFile } from '$lib/apis/files';
+
+	import { toast } from 'svelte-sonner';
+	import { v4 as uuidv4 } from 'uuid';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	export let selectedItems = [];
 	const i18n = getContext('i18n');
 
 	let loaded = false;
 
+	let filesInputElement = null;
+	let inputFiles = [];
+
+	const uploadFileHandler = async (file, fullContext: boolean = false) => {
+		if ($user?.role !== 'admin' && !($user?.permissions?.chat?.file_upload ?? true)) {
+			toast.error($i18n.t('You do not have permission to upload files.'));
+			return null;
+		}
+
+		const tempItemId = uuidv4();
+		const fileItem = {
+			type: 'file',
+			file: '',
+			id: null,
+			url: '',
+			name: file.name,
+			collection_name: '',
+			status: 'uploading',
+			size: file.size,
+			error: '',
+			itemId: tempItemId,
+			...(fullContext ? { context: 'full' } : {})
+		};
+
+		if (fileItem.size == 0) {
+			toast.error($i18n.t('You cannot upload an empty file.'));
+			return null;
+		}
+
+		selectedItems = [...selectedItems, fileItem];
+
+		try {
+			// If the file is an audio file, provide the language for STT.
+			let metadata = null;
+			if (
+				(file.type.startsWith('audio/') || file.type.startsWith('video/')) &&
+				$settings?.audio?.stt?.language
+			) {
+				metadata = {
+					language: $settings?.audio?.stt?.language
+				};
+			}
+
+			// During the file upload, file content is automatically extracted.
+			const uploadedFile = await uploadFile(localStorage.token, file, metadata);
+
+			if (uploadedFile) {
+				console.log('File upload completed:', {
+					id: uploadedFile.id,
+					name: fileItem.name,
+					collection: uploadedFile?.meta?.collection_name
+				});
+
+				if (uploadedFile.error) {
+					console.warn('File upload warning:', uploadedFile.error);
+					toast.warning(uploadedFile.error);
+				}
+
+				fileItem.status = 'uploaded';
+				fileItem.file = uploadedFile;
+				fileItem.id = uploadedFile.id;
+				fileItem.collection_name =
+					uploadedFile?.meta?.collection_name || uploadedFile?.collection_name;
+				fileItem.url = `${WEBUI_API_BASE_URL}/files/${uploadedFile.id}`;
+
+				selectedItems = selectedItems;
+			} else {
+				selectedItems = selectedItems.filter((item) => item?.itemId !== tempItemId);
+			}
+		} catch (e) {
+			toast.error(`${e}`);
+			selectedItems = selectedItems.filter((item) => item?.itemId !== tempItemId);
+		}
+	};
+
+	const inputFilesHandler = async (inputFiles) => {
+		console.log('Input files handler called with:', inputFiles);
+
+		if (
+			($config?.file?.max_count ?? null) !== null &&
+			files.length + inputFiles.length > $config?.file?.max_count
+		) {
+			toast.error(
+				$i18n.t(`You can only chat with a maximum of {{maxCount}} file(s) at a time.`, {
+					maxCount: $config?.file?.max_count
+				})
+			);
+			return;
+		}
+
+		inputFiles.forEach(async (file) => {
+			console.log('Processing file:', {
+				name: file.name,
+				type: file.type,
+				size: file.size,
+				extension: file.name.split('.').at(-1)
+			});
+
+			if (
+				($config?.file?.max_size ?? null) !== null &&
+				file.size > ($config?.file?.max_size ?? 0) * 1024 * 1024
+			) {
+				console.log('File exceeds max size limit:', {
+					fileSize: file.size,
+					maxSize: ($config?.file?.max_size ?? 0) * 1024 * 1024
+				});
+				toast.error(
+					$i18n.t(`File size should not exceed {{maxSize}} MB.`, {
+						maxSize: $config?.file?.max_size
+					})
+				);
+				return;
+			}
+
+			if (!file['type'].startsWith('image/')) {
+				uploadFileHandler(file);
+			} else {
+				toast.error($i18n.t(`Unsupported file type.`));
+			}
+		});
+	};
+
 	onMount(async () => {
 		if (!$knowledge) {
 			knowledge.set(await getKnowledgeBases(localStorage.token));
@@ -19,6 +147,24 @@
 	});
 </script>
 
+<input
+	bind:this={filesInputElement}
+	bind:files={inputFiles}
+	type="file"
+	hidden
+	multiple
+	on:change={async () => {
+		if (inputFiles && inputFiles.length > 0) {
+			const _inputFiles = Array.from(inputFiles);
+			inputFilesHandler(_inputFiles);
+		} else {
+			toast.error($i18n.t(`File not found.`));
+		}
+
+		filesInputElement.value = '';
+	}}
+/>
+
 <div>
 	<slot name="label">
 		<div class="mb-2">
@@ -57,7 +203,7 @@
 		{/if}
 
 		{#if loaded}
-			<div class="flex flex-wrap text-sm font-medium gap-1.5">
+			<div class="flex flex-wrap flex-row text-sm gap-1">
 				<Selector
 					knowledgeItems={$knowledge || []}
 					on:select={(e) => {
@@ -73,11 +219,20 @@
 						}
 					}}
 				>
-					<button
+					<div
 						class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-850 rounded-3xl"
-						type="button">{$i18n.t('Select Knowledge')}</button
 					>
+						{$i18n.t('Select Knowledge')}
+					</div>
 				</Selector>
+
+				<button
+					class=" px-3.5 py-1.5 font-medium hover:bg-black/5 dark:hover:bg-white/5 outline outline-1 outline-gray-100 dark:outline-gray-850 rounded-3xl"
+					type="button"
+					on:click={() => {
+						filesInputElement.click();
+					}}>{$i18n.t('Upload Files')}</button
+				>
 			</div>
 		{/if}
 		<!-- {knowledge} -->

src/lib/components/workspace/Models/ModelEditor.svelte

@@ -226,7 +226,7 @@
 			filterIds = model?.meta?.filterIds ?? [];
 			actionIds = model?.meta?.actionIds ?? [];
 			knowledge = (model?.meta?.knowledge ?? []).map((item) => {
-				if (item?.collection_name) {
+				if (item?.collection_name && item?.type !== 'file') {
 					return {
 						id: item.collection_name,
 						name: item.name,