From defeddf21b450e207d51ec9479049a905a7ee9e0 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 8 Mar 2026 17:28:26 -0500
Subject: [PATCH] fix: display image thumbnails in pending message queue

Previously, QueuedMessageItem only rendered text content and ignored
the files array, causing queued messages with only images to appear
blank. Now passes files to the component and renders image thumbnails
and file name indicators inline.

Fixes #22256
---
 src/lib/components/chat/MessageInput.svelte   |  1 +
 .../MessageInput/QueuedMessageItem.svelte     | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/chat/MessageInput.svelte b/src/lib/components/chat/MessageInput.svelte
index 9bf3a0813..4664940d3 100644
--- a/src/lib/components/chat/MessageInput.svelte
+++ b/src/lib/components/chat/MessageInput.svelte
@@ -1187,6 +1187,7 @@
 									<QueuedMessageItem
 										id={queuedMessage.id}
 										content={queuedMessage.prompt}
+										files={queuedMessage.files}
 										onSendNow={onQueueSendNow}
 										onEdit={onQueueEdit}
 										onDelete={onQueueDelete}
diff --git a/src/lib/components/chat/MessageInput/QueuedMessageItem.svelte b/src/lib/components/chat/MessageInput/QueuedMessageItem.svelte
index 5614ac2d9..d1c985074 100644
--- a/src/lib/components/chat/MessageInput/QueuedMessageItem.svelte
+++ b/src/lib/components/chat/MessageInput/QueuedMessageItem.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Image from '$lib/components/common/Image.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';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
 
 	const i18n = getContext('i18n');
 
 	export let id: string;
 	export let content: string;
+	export let files: any[] = [];
 	export let onSendNow: (id: string) => void;
 	export let onEdit: (id: string) => void;
 	export let onDelete: (id: string) => void;
@@ -21,8 +24,34 @@
 	</div>
 
 	<!-- Message content -->
-	<div class="flex-1 min-w-0">
-		<p class="text-sm text-gray-600 dark:text-gray-300 truncate">{content}</p>
+	<div class="flex-1 min-w-0 flex items-center gap-2">
+		{#if files.length > 0}
+			<div class="flex items-center gap-1 shrink-0">
+				{#each files as file}
+					{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
+						{@const fileUrl =
+							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"
+						/>
+					{: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">
+							<span class="max-w-[80px] truncate">{file.name ?? 'file'}</span>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+
+		{#if content}
+			<p class="text-sm text-gray-600 dark:text-gray-300 truncate">{content}</p>
+		{:else if files.length === 0}
+			<p class="text-sm text-gray-400 dark:text-gray-500 truncate italic">{$i18n.t('Empty message')}</p>
+		{/if}
 	</div>
 
 	<!-- Actions -->