From 1148d1c927d096e14917b6d762789fca3188f281 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 6 Jan 2026 03:25:39 +0400
Subject: [PATCH] fix/refac: images

---
 src/lib/components/chat/Chat.svelte                     | 2 +-
 src/lib/components/chat/Messages/ResponseMessage.svelte | 2 +-
 src/lib/components/chat/Messages/UserMessage.svelte     | 2 +-
 src/lib/components/common/Collapsible.svelte            | 2 +-
 src/lib/components/notes/NoteEditor.svelte              | 8 +++++---
 src/lib/components/notes/NoteEditor/Controls.svelte     | 2 +-
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/chat/Chat.svelte b/src/lib/components/chat/Chat.svelte
index 011afca87..117710023 100644
--- a/src/lib/components/chat/Chat.svelte
+++ b/src/lib/components/chat/Chat.svelte
@@ -1734,7 +1734,7 @@
 					// Skip this check if image generation is enabled, as images may be for editing or are generated outputs in the history
 					const hasImages = createMessagesList(_history, parentId).some((message) =>
 						message.files?.some(
-							(file) => file.type === 'image' || file?.content_type?.startsWith('image/')
+							(file) => file.type === 'image' || (file?.content_type ?? '').startsWith('image/')
 						)
 					);
 
diff --git a/src/lib/components/chat/Messages/ResponseMessage.svelte b/src/lib/components/chat/Messages/ResponseMessage.svelte
index 7c2273560..d2056554d 100644
--- a/src/lib/components/chat/Messages/ResponseMessage.svelte
+++ b/src/lib/components/chat/Messages/ResponseMessage.svelte
@@ -649,7 +649,7 @@
 							>
 								{#each message.files as file}
 									<div>
-										{#if file.type === 'image'}
+										{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
 											<Image src={file.url} alt={message.content} />
 										{:else}
 											<FileItem
diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 7f83ad6db..126b3732c 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -221,7 +221,7 @@
 					{#if (editedFiles ?? []).length > 0}
 						<div class="flex items-center flex-wrap gap-2 -mx-2 mb-1">
 							{#each editedFiles as file, fileIdx}
-								{#if file.type === 'image'}
+								{#if file.type === 'image' || (file?.content_type ?? '').startsWith('image/')}
 									<div class=" relative group">
 										<div class="relative flex items-center">
 											<Image
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 8f788c6d8..69262328b 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -206,7 +206,7 @@
 							/>
 						{/if}
 					{:else if typeof file === 'object'}
-						{#if file.type === 'image' && file.url}
+						{#if (file.type === 'image' || (file?.content_type ?? '').startsWith('image/')) && file.url}
 							<Image
 								id={`${collapsibleId}-tool-calls-${attributes?.id}-result-${idx}`}
 								src={file.url}
diff --git a/src/lib/components/notes/NoteEditor.svelte b/src/lib/components/notes/NoteEditor.svelte
index 390a39f8a..977d00ef7 100644
--- a/src/lib/components/notes/NoteEditor.svelte
+++ b/src/lib/components/notes/NoteEditor.svelte
@@ -146,7 +146,9 @@
 	let inputElement = null;
 
 	// Computed HTML for editor: fall back to markdown if HTML is missing
-	$: editorHtml = note?.data?.content?.html || (note?.data?.content?.md ? marked.parse(note.data.content.md) : '');
+	$: editorHtml =
+		note?.data?.content?.html ||
+		(note?.data?.content?.md ? marked.parse(note.data.content.md) : '');
 
 	const init = async () => {
 		loading = true;
@@ -157,7 +159,7 @@
 
 		messages = [];
 
-	if (res) {
+		if (res) {
 			note = res;
 			files = res.data.files || [];
 
@@ -780,7 +782,7 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 		await tick();
 
 		for (const file of files) {
-			if (file.type === 'image') {
+			if (file.type === 'image' || (file?.content_type ?? '').startsWith('image/')) {
 				const e = new CustomEvent('data', { files: files });
 
 				const img = document.getElementById(`image:${file.id}`);
diff --git a/src/lib/components/notes/NoteEditor/Controls.svelte b/src/lib/components/notes/NoteEditor/Controls.svelte
index 675056ee4..3d80425f7 100644
--- a/src/lib/components/notes/NoteEditor/Controls.svelte
+++ b/src/lib/components/notes/NoteEditor/Controls.svelte
@@ -68,7 +68,7 @@
 				{/each}
 
 				<div class="flex items-center flex-wrap gap-2 mt-1.5">
-					{#each files.filter((file) => file.type === 'image') as file, fileIdx}
+					{#each files.filter((file) => file.type === 'image' || (file?.content_type ?? '').startsWith('image/')) as file, fileIdx}
 						<Image
 							src={file.url}
 							imageClassName=" size-14 rounded-xl object-cover"