refac

src/lib/components/chat/Chat.svelte

@@ -1523,12 +1523,16 @@
 			toast.success($i18n.t('File uploaded successfully'));
 		} catch (e) {
 			console.error('Error uploading file:', e);
+			fileItem.status = 'error';
+			fileItem.error = e.message || `${e}`;
 			files = files.filter((f) => f.itemId !== tempItemId);
 			toast.error(
 				$i18n.t('Error uploading file: {{error}}', {
 					error: e.message || 'Unknown error'
 				})
 			);
+		} finally {
+			await processNextInQueue($chatId);
 		}
 	};
 
@@ -1573,10 +1577,14 @@
 
 				files = [...files];
 			} catch (e) {
+				fileItem.status = 'error';
+				fileItem.error = `${e}`;
 				files = files.filter((f) => f.name !== url);
 				toast.error(`${e}`);
 			}
 		}
+
+		await processNextInQueue($chatId);
 	};
 
 	const onUpload = async (event) => {
@@ -1586,6 +1594,8 @@
 			await uploadGoogleDriveFile(data);
 		} else if (type === 'web') {
 			await uploadWeb(data);
+		} else if (type === 'file') {
+			await processNextInQueue($chatId);
 		}
 	};
 
@@ -2159,6 +2169,15 @@
 
 		const queue = $chatRequestQueues[targetChatId];
 		if (!queue || queue.length === 0) return;
+		const lastMessage = history.currentId ? history.messages[history.currentId] : null;
+		if (
+			(lastMessage && lastMessage.role === 'assistant' && !lastMessage.done) ||
+			queue.some((m) =>
+				(m.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))
+			)
+		) {
+			return;
+		}
 
 		processingQueueChats.add(targetChatId);
 		try {
@@ -2176,6 +2195,43 @@
 		}
 	};
 
+	const sendQueuedMessageNow = async (id) => {
+		const queue = $chatRequestQueues[$chatId] ?? [];
+		const item = queue.find((m) => m.id === id);
+		if (!item || (item.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))) {
+			return;
+		}
+
+		chatRequestQueues.update((q) => ({
+			...q,
+			[$chatId]: queue.filter((m) => m.id !== id)
+		}));
+		await stopResponse(false);
+		await tick();
+		await submitPrompt(item.prompt, item.files);
+	};
+
+	const editQueuedMessage = (id) => {
+		const queue = $chatRequestQueues[$chatId] ?? [];
+		const item = queue.find((m) => m.id === id);
+		if (!item) return;
+
+		chatRequestQueues.update((q) => ({
+			...q,
+			[$chatId]: queue.filter((m) => m.id !== id)
+		}));
+		files = item.files;
+		messageInput?.setText(item.prompt);
+	};
+
+	const deleteQueuedMessage = (id) => {
+		const queue = $chatRequestQueues[$chatId] ?? [];
+		chatRequestQueues.update((q) => ({
+			...q,
+			[$chatId]: queue.filter((m) => m.id !== id)
+		}));
+	};
+
 	const chatCompletedHandler = async (_chatId, modelId, responseMessageId, messages) => {
 		// Backend handles outlet filters and persistence inline.
 		// Just refresh the sidebar chat list.
@@ -2736,16 +2792,6 @@
 			return;
 		}
 
-		if (
-			files.length > 0 &&
-			files.filter((file) => file.type !== 'image' && file.status === 'uploading').length > 0
-		) {
-			toast.error(
-				$i18n.t(`Oops! There are files still uploading. Please wait for the upload to complete.`)
-			);
-			return;
-		}
-
 		if (
 			($config?.file?.max_count ?? null) !== null &&
 			files.length + chatFiles.length > $config?.file?.max_count
@@ -2768,6 +2814,22 @@
 			return;
 		}
 
+		if (
+			($chatRequestQueues[$chatId] ?? []).some((m) =>
+				(m.files ?? []).some((file) => ['uploading', 'error'].includes(file.status))
+			) ||
+			(files.length > 0 && files.some((file) => ['uploading', 'error'].includes(file.status)))
+		) {
+			chatRequestQueues.update((q) => ({
+				...q,
+				[$chatId]: [...(q[$chatId] ?? []), { id: uuidv4(), prompt: userPrompt, files }]
+			}));
+			messageInput?.setText('');
+			prompt = '';
+			files = [];
+			return;
+		}
+
 		// Check if the assistant is still generating the main response
 		// (don't block on background tasks like title gen, follow-ups, tags)
 		const lastMessage = history.currentId ? history.messages[history.currentId] : null;
@@ -4029,41 +4091,9 @@
 										{onUpload}
 										messageQueue={$chatRequestQueues[$chatId] ?? []}
 										{chatTasks}
-										onQueueSendNow={async (id) => {
+										onQueueSendNow={sendQueuedMessageNow}
-											const queue = $chatRequestQueues[$chatId] ?? [];
+										onQueueEdit={editQueuedMessage}
-											const item = queue.find((m) => m.id === id);
+										onQueueDelete={deleteQueuedMessage}
-											if (item) {
-												// Remove from queue
-												chatRequestQueues.update((q) => ({
-													...q,
-													[$chatId]: queue.filter((m) => m.id !== id)
-												}));
-												await stopResponse(false);
-												await tick();
-												await submitPrompt(item.prompt, item.files);
-											}
-										}}
-										onQueueEdit={(id) => {
-											const queue = $chatRequestQueues[$chatId] ?? [];
-											const item = queue.find((m) => m.id === id);
-											if (item) {
-												// Remove from queue
-												chatRequestQueues.update((q) => ({
-													...q,
-													[$chatId]: queue.filter((m) => m.id !== id)
-												}));
-												// Set files and restore prompt to input
-												files = item.files;
-												messageInput?.setText(item.prompt);
-											}
-										}}
-										onQueueDelete={(id) => {
-											const queue = $chatRequestQueues[$chatId] ?? [];
-											chatRequestQueues.update((q) => ({
-												...q,
-												[$chatId]: queue.filter((m) => m.id !== id)
-											}));
-										}}
 										onChange={(data) => {
 											if (!$temporaryChatEnabled) {
 												saveDraft(data, $chatId);
@@ -4148,6 +4178,9 @@
 										{onUpload}
 										messageQueue={$chatRequestQueues[$chatId] ?? []}
 										{chatTasks}
+										onQueueSendNow={sendQueuedMessageNow}
+										onQueueEdit={editQueuedMessage}
+										onQueueDelete={deleteQueuedMessage}
 										onWebSearchToggle={handleWebSearchToggle}
 										on:chatVariables={() => {
 											showChatVariablesModal = true;
@@ -4186,6 +4219,10 @@
 									{createMessagePair}
 									{onSelect}
 									{onUpload}
+									messageQueue={$chatRequestQueues[$chatId] ?? []}
+									onQueueSendNow={sendQueuedMessageNow}
+									onQueueEdit={editQueuedMessage}
+									onQueueDelete={deleteQueuedMessage}
 									onWebSearchToggle={handleWebSearchToggle}
 									on:chatVariables={() => {
 										showChatVariablesModal = true;

src/lib/components/chat/MessageInput.svelte

@@ -880,11 +880,17 @@
 
 					files = files;
 				} else {
+					fileItem.status = 'error';
+					fileItem.error = $i18n.t('Failed to upload file.');
 					files = files.filter((item) => item?.itemId !== tempItemId);
 				}
 			} catch (e) {
+				fileItem.status = 'error';
+				fileItem.error = `${e}`;
 				toast.error(`${e}`);
 				files = files.filter((item) => item?.itemId !== tempItemId);
+			} finally {
+				onUpload({ type: 'file' });
 			}
 		} else {
 			// If temporary chat is enabled, we just add the file to the list without uploading it.
@@ -897,8 +903,11 @@
 			});
 
 			if (content === null) {
+				fileItem.status = 'error';
+				fileItem.error = $i18n.t('Failed to extract content from the file.');
 				toast.error($i18n.t('Failed to extract content from the file.'));
 				files = files.filter((item) => item?.itemId !== tempItemId);
+				onUpload({ type: 'file' });
 				return null;
 			} else {
 				console.log('Extracted content from file:', {
@@ -913,6 +922,7 @@
 				fileItem.id = uuidv4(); // Temporary ID for the file
 
 				files = files;
+				onUpload({ type: 'file' });
 			}
 		}
 	};

src/lib/components/chat/MessageInput/QueuedMessageItem.svelte

@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Image from '$lib/components/common/Image.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import EditPencil from '$lib/components/icons/EditPencil.svelte';
 	import ArrowForward from '$lib/components/icons/ArrowForward.svelte';
@@ -33,11 +34,27 @@
 							file.url?.startsWith('data') || file.url?.startsWith('http')
 								? file.url
 								: `${WEBUI_API_BASE_URL}/files/${file.url}${file?.content_type ? '/content' : ''}`}
-						<Image src={fileUrl} alt="" imageClassName="size-6 rounded-md object-cover" />
+						<div
+							class="relative size-6 shrink-0 overflow-hidden rounded-lg border border-gray-100/60 bg-white/60 dark:border-white/[0.06] dark:bg-white/[0.025]"
+						>
+							<Image src={fileUrl} alt="" imageClassName="size-full object-cover" />
+							{#if file.status === 'uploading'}
+								<div
+									class="absolute inset-0 flex items-center justify-center bg-white/75 text-gray-500 backdrop-blur-[1px] dark:bg-gray-950/70 dark:text-gray-300"
+								>
+									<Spinner className="size-3" />
+								</div>
+							{/if}
+						</div>
 					{:else}
 						<div
-							class="flex items-center px-1.5 py-0.5 rounded-md bg-gray-100 dark:bg-gray-800 text-xs text-gray-500 dark:text-gray-400"
+							class="flex h-6 max-w-[9rem] items-center gap-1 rounded-lg border border-gray-100/60 bg-white/60 px-1.5 text-[11px] leading-none text-gray-500 dark:border-white/[0.06] dark:bg-white/[0.025] dark:text-gray-400"
 						>
+							{#if file.status === 'uploading'}
+								<span class="shrink-0 text-gray-400 dark:text-gray-500">
+									<Spinner className="size-3" />
+								</span>
+							{/if}
 							<span class="max-w-[80px] truncate">{file.name ?? 'file'}</span>
 						</div>
 					{/if}
@@ -52,17 +69,38 @@
 				{$i18n.t('Empty message')}
 			</p>
 		{/if}
+
+		{#if files.some((file) => file.status === 'error')}
+			<span class="shrink-0 text-xs text-gray-400 dark:text-gray-500">
+				{$i18n.t('Upload failed')}
+			</span>
+		{/if}
 	</div>
 
 	<!-- Actions -->
 	<div class="flex items-center gap-1 shrink-0">
 		<!-- Send immediately -->
-		<Tooltip content={$i18n.t('Send now')}>
+		<Tooltip
+			content={files.some((file) => ['uploading', 'error'].includes(file.status))
+				? $i18n.t('Waiting for upload')
+				: $i18n.t('Send now')}
+		>
 			<button
 				type="button"
-				class="p-1 text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
+				class="p-1 text-gray-400 transition-colors {files.some((file) =>
-				on:click={() => onSendNow(id)}
+					['uploading', 'error'].includes(file.status)
-				aria-label={$i18n.t('Send now')}
+				)
+					? 'opacity-40 cursor-not-allowed'
+					: 'hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300'}"
+				disabled={files.some((file) => ['uploading', 'error'].includes(file.status))}
+				on:click={() => {
+					if (!files.some((file) => ['uploading', 'error'].includes(file.status))) {
+						onSendNow(id);
+					}
+				}}
+				aria-label={files.some((file) => ['uploading', 'error'].includes(file.status))
+					? $i18n.t('Waiting for upload')
+					: $i18n.t('Send now')}
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"

src/lib/components/chat/Placeholder.svelte

@@ -59,6 +59,10 @@
 	export let onSelect = (e) => {};
 	export let onChange = (e) => {};
 	export let onWebSearchToggle: Function = () => {};
+	export let messageQueue: { id: string; prompt: string; files: any[] }[] = [];
+	export let onQueueSendNow: (id: string) => void = () => {};
+	export let onQueueEdit: (id: string) => void = () => {};
+	export let onQueueDelete: (id: string) => void = () => {};
 
 	export let toolServers = [];
 
@@ -239,6 +243,10 @@
 						placeholder={$i18n.t('How can I help you today?')}
 						{onChange}
 						{onUpload}
+						{messageQueue}
+						{onQueueSendNow}
+						{onQueueEdit}
+						{onQueueDelete}
 						{onWebSearchToggle}
 						on:chatVariables
 						on:submit={(e) => {