From 19664daeef96acbe316e16b95569fdf745051cbe Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 27 Jan 2026 11:19:07 +0800
Subject: [PATCH] feat(chat): enhance file handling in chat by converting file
 types to MIME format

---
 web/app/components/base/chat/chat/hooks.ts | 31 ++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/web/app/components/base/chat/chat/hooks.ts b/web/app/components/base/chat/chat/hooks.ts
index 801382e550..9e220d7a57 100644
--- a/web/app/components/base/chat/chat/hooks.ts
+++ b/web/app/components/base/chat/chat/hooks.ts
@@ -273,10 +273,37 @@ export const useChat = (
         }
       },
       onFile(file) {
+        // Convert simple file type to MIME type for non-agent mode
+        // Backend sends: { id, type: "image", belongs_to, url }
+        // Frontend expects: { id, type: "image/png", transferMethod, url, uploadedId, supportFileType, name, size }
+
+        // Determine file type for MIME conversion
+        const fileType = (file as { type?: string }).type || 'image'
+
+        // If file already has transferMethod, use it as base and ensure all required fields exist
+        // Otherwise, create a new complete file object
+        const baseFile = ('transferMethod' in file) ? (file as Partial<FileEntity>) : null
+
+        const convertedFile: FileEntity = {
+          id: baseFile?.id || (file as { id: string }).id,
+          type: baseFile?.type || (fileType === 'image' ? 'image/png' : fileType === 'video' ? 'video/mp4' : fileType === 'audio' ? 'audio/mpeg' : 'application/octet-stream'),
+          transferMethod: (baseFile?.transferMethod as FileEntity['transferMethod']) || (fileType === 'image' ? 'remote_url' : 'local_file'),
+          uploadedId: baseFile?.uploadedId || (file as { id: string }).id,
+          supportFileType: baseFile?.supportFileType || (fileType === 'image' ? 'image' : fileType === 'video' ? 'video' : fileType === 'audio' ? 'audio' : 'document'),
+          progress: baseFile?.progress ?? 100,
+          name: baseFile?.name || `generated_${fileType}.${fileType === 'image' ? 'png' : fileType === 'video' ? 'mp4' : fileType === 'audio' ? 'mp3' : 'bin'}`,
+          url: baseFile?.url || (file as { url?: string }).url,
+          size: baseFile?.size ?? 0, // Generated files don't have a known size
+        }
         updateChatTreeNode(messageId, (responseItem) => {
           const lastThought = responseItem.agent_thoughts?.[responseItem.agent_thoughts?.length - 1]
-          if (lastThought)
-            responseItem.agent_thoughts![responseItem.agent_thoughts!.length - 1].message_files = [...(lastThought as any).message_files, file]
+          if (lastThought) {
+            responseItem.agent_thoughts![responseItem.agent_thoughts!.length - 1].message_files = [...(lastThought as any).message_files, convertedFile]
+          }
+          else {
+            const currentFiles = (responseItem.message_files as FileEntity[] | undefined) ?? []
+            responseItem.message_files = [...currentFiles, convertedFile]
+          }
         })
       },
       onThought(thought) {