fix/refac: images

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/')
 						)
 					);
 

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

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

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}

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}`);

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"