From f56ce9d3b1ad33b31a445be8b497d45918643d8e Mon Sep 17 00:00:00 2001
From: hyl64 <78853927+hyl64@users.noreply.github.com>
Date: Fri, 17 Apr 2026 16:34:04 +0800
Subject: [PATCH] fix: guard chat file preview rendering when mime type is
 missing (#35355)

Co-authored-by: Stephen Zhou <hi@hyoban.cc>
---
 .../__tests__/file-item.spec.tsx                  | 15 +++++++++++++++
 .../file-uploader-in-chat-input/file-item.tsx     |  7 ++++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
index c03f009cee..00dd7d9971 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/__tests__/file-item.spec.tsx
@@ -222,6 +222,21 @@ describe('FileItem (chat-input)', () => {
     expect(document.querySelector('audio')).not.toBeInTheDocument()
   })
 
+  it('should not throw when file type is missing', () => {
+    expect(() => {
+      render(
+        <FileItem
+          file={createFile({
+            name: 'generated.png',
+            type: undefined as unknown as string,
+            supportFileType: 'document',
+          })}
+          canPreview
+        />,
+      )
+    }).not.toThrow()
+  })
+
   it('should close video preview', () => {
     render(
       <FileItem
diff --git a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
index 34056a85d5..a23d616481 100644
--- a/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
+++ b/web/app/components/base/file-uploader/file-uploader-in-chat-input/file-item.tsx
@@ -36,6 +36,7 @@ const FileItem = ({
   const [previewUrl, setPreviewUrl] = useState('')
   const ext = getFileExtension(name, type, isRemote)
   const uploadError = progress === -1
+  const [typeCategory = '', typeSubtype = ''] = type?.split('/') ?? []
 
   let tmp_preview_url = url || base64Url
   if (!tmp_preview_url && file?.originalFile)
@@ -121,7 +122,7 @@ const FileItem = ({
         </div>
       </div>
       {
-        type.split('/')[0] === 'audio' && canPreview && previewUrl && (
+        typeCategory === 'audio' && canPreview && previewUrl && (
           <AudioPreview
             title={name}
             url={previewUrl}
@@ -130,7 +131,7 @@ const FileItem = ({
         )
       }
       {
-        type.split('/')[0] === 'video' && canPreview && previewUrl && (
+        typeCategory === 'video' && canPreview && previewUrl && (
           <VideoPreview
             title={name}
             url={previewUrl}
@@ -139,7 +140,7 @@ const FileItem = ({
         )
       }
       {
-        type.split('/')[1] === 'pdf' && canPreview && previewUrl && (
+        typeSubtype === 'pdf' && canPreview && previewUrl && (
           <PdfPreview url={previewUrl} onCancel={() => { setPreviewUrl('') }} />
         )
       }