starred/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-24 10:14:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: display image thumbnails in pending message queue

Browse Source 
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
This commit is contained in:
Timothy Jaeryang Baek
2026-03-08 17:28:26 -05:00
parent c97767424f
commit defeddf21b
2 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/MessageInput.svelte
+1
View File
@@ -1187,6 +1187,7 @@
<QueuedMessageItem
id={queuedMessage.id}
content={queuedMessage.prompt}
files={queuedMessage.files}
onSendNow={onQueueSendNow}
onEdit={onQueueEdit}
onDelete={onQueueDelete}
src/lib/components/chat/MessageInput/QueuedMessageItem.svelte
+31 -2
View File
@@ -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 -->