From b089151d63b93a7c9d61180bb5114aefd98bf0b3 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 4 May 2026 12:29:10 -0700
Subject: [PATCH 1/2] feat(mothership): restore attachment previews on draft
 and add video support

---
 .../components/chat-message-attachments.tsx   | 23 +++++++++++++++----
 .../components/attached-files-list.tsx        | 13 +++++++++--
 .../home/components/user-input/user-input.tsx |  3 +++
 .../[workspaceId]/home/hooks/use-chat.ts      |  5 ++--
 .../user-input/hooks/use-file-attachments.ts  |  5 +++-
 .../lib/copilot/chat/attachment-preview.ts    |  9 ++++++++
 apps/sim/lib/copilot/chat/display-message.ts  |  5 ++--
 7 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 apps/sim/lib/copilot/chat/attachment-preview.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
index e39d3a0dd37..00d02b1b19d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
@@ -30,13 +30,26 @@ export function ChatMessageAttachments(props: {
       )}
     >
       {attachments.map((att) => {
-        const isImage = att.media_type.startsWith('image/')
-        return isImage && att.previewUrl ? (
+        if (!att.previewUrl) {
+          return (
+            <FileAttachmentPill key={att.id} mediaType={att.media_type} filename={att.filename} />
+          )
+        }
+        const isVideo = att.media_type.startsWith('video/')
+        return (
           <div key={att.id} className='h-[56px] w-[56px] overflow-hidden rounded-[8px]'>
-            <img src={att.previewUrl} alt={att.filename} className='h-full w-full object-cover' />
+            {isVideo ? (
+              <video
+                src={att.previewUrl}
+                muted
+                playsInline
+                preload='metadata'
+                className='h-full w-full object-cover'
+              />
+            ) : (
+              <img src={att.previewUrl} alt={att.filename} className='h-full w-full object-cover' />
+            )}
           </div>
-        ) : (
-          <FileAttachmentPill key={att.id} mediaType={att.media_type} filename={att.filename} />
         )
       })}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
index 6046107e6d6..2ea1c66d082 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
@@ -22,7 +22,8 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
   return (
     <div className='mb-1.5 flex flex-wrap gap-1.5'>
       {attachedFiles.map((file) => {
-        const isImage = file.type.startsWith('image/')
+        const isVideo = file.type.startsWith('video/')
+        const hasPreview = Boolean(file.previewUrl)
         return (
           <Tooltip.Root key={file.id}>
             <Tooltip.Trigger asChild>
@@ -30,7 +31,15 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
                 className='group relative h-[56px] w-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] hover:bg-[var(--surface-4)]'
                 onClick={() => onFileClick(file)}
               >
-                {isImage && file.previewUrl ? (
+                {hasPreview && isVideo ? (
+                  <video
+                    src={file.previewUrl}
+                    muted
+                    playsInline
+                    preload='metadata'
+                    className='h-full w-full object-cover'
+                  />
+                ) : hasPreview ? (
                   <img
                     src={file.previewUrl}
                     alt={file.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index a60c8ebff23..1304d009086 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -16,6 +16,7 @@ import { Paperclip } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Tooltip } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
+import { getMothershipAttachmentPreviewUrl } from '@/lib/copilot/chat/attachment-preview'
 import { SIM_RESOURCE_DRAG_TYPE, SIM_RESOURCES_DRAG_TYPE } from '@/lib/copilot/resource-types'
 import { cn } from '@/lib/core/utils/cn'
 import { CHAT_ACCEPT_ATTRIBUTE } from '@/lib/uploads/utils/validation'
@@ -211,6 +212,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
           path: a.path ?? '',
           key: a.key,
           uploading: false,
+          previewUrl: getMothershipAttachmentPreviewUrl(a),
         }))
       }
       if (typeof draft.text === 'string' && draft.text.length > 0) {
@@ -385,6 +387,7 @@ export const UserInput = forwardRef<UserInputHandle, UserInputProps>(function Us
           path: a.path ?? '',
           key: a.key,
           uploading: false,
+          previewUrl: getMothershipAttachmentPreviewUrl(a),
         }))
         files.restoreAttachedFiles(restored)
         contextManagement.setSelectedContexts(msg.contexts ?? [])
diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
index b4dccd4d4df..aab9c199c74 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat.ts
@@ -5,6 +5,7 @@ import { sleep } from '@sim/utils/helpers'
 import { generateId } from '@sim/utils/id'
 import { useQueryClient } from '@tanstack/react-query'
 import { usePathname, useRouter } from 'next/navigation'
+import { getMothershipAttachmentPreviewUrl } from '@/lib/copilot/chat/attachment-preview'
 import { toDisplayMessage } from '@/lib/copilot/chat/display-message'
 import { getLiveAssistantMessageId } from '@/lib/copilot/chat/effective-transcript'
 import type {
@@ -3291,9 +3292,7 @@ export function useChat(
         filename: f.filename,
         media_type: f.media_type,
         size: f.size,
-        previewUrl: f.media_type.startsWith('image/')
-          ? `/api/files/serve/${encodeURIComponent(f.key)}?context=mothership`
-          : undefined,
+        previewUrl: getMothershipAttachmentPreviewUrl(f),
       }))
 
       const optimisticUserMessage: ChatMessage = {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts
index 73dc76e3792..9c09054d5ba 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/hooks/use-file-attachments.ts
@@ -126,7 +126,10 @@ export function useFileAttachments(props: UseFileAttachmentsProps) {
         type: resolveFileType(file),
         path: '',
         uploading: true,
-        previewUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+        previewUrl:
+          file.type.startsWith('image/') || file.type.startsWith('video/')
+            ? URL.createObjectURL(file)
+            : undefined,
       }))
 
       setAttachedFiles((prev) => [...prev, ...placeholders])
diff --git a/apps/sim/lib/copilot/chat/attachment-preview.ts b/apps/sim/lib/copilot/chat/attachment-preview.ts
new file mode 100644
index 00000000000..f4a65aa0ce0
--- /dev/null
+++ b/apps/sim/lib/copilot/chat/attachment-preview.ts
@@ -0,0 +1,9 @@
+export function getMothershipAttachmentPreviewUrl(file: {
+  key: string
+  media_type: string
+}): string | undefined {
+  if (!file.media_type.startsWith('image/') && !file.media_type.startsWith('video/')) {
+    return undefined
+  }
+  return `/api/files/serve/${encodeURIComponent(file.key)}?context=mothership`
+}
diff --git a/apps/sim/lib/copilot/chat/display-message.ts b/apps/sim/lib/copilot/chat/display-message.ts
index a254e5e3e94..51622070009 100644
--- a/apps/sim/lib/copilot/chat/display-message.ts
+++ b/apps/sim/lib/copilot/chat/display-message.ts
@@ -15,6 +15,7 @@ import {
   type ToolCallInfo,
   ToolCallStatus,
 } from '@/app/workspace/[workspaceId]/home/types'
+import { getMothershipAttachmentPreviewUrl } from './attachment-preview'
 import type { PersistedContentBlock, PersistedMessage } from './persisted-message'
 import { withBlockTiming } from './persisted-message'
 
@@ -91,9 +92,7 @@ function toDisplayAttachment(f: PersistedMessage['fileAttachments']): ChatMessag
     filename: a.filename,
     media_type: a.media_type,
     size: a.size,
-    previewUrl: a.media_type.startsWith('image/')
-      ? `/api/files/serve/${encodeURIComponent(a.key)}?context=mothership`
-      : undefined,
+    previewUrl: getMothershipAttachmentPreviewUrl(a),
   }))
 }
 

From edcf1d2f48a0ef9537b5078fc5f1ca89ca5dd7ff Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Mon, 4 May 2026 12:37:08 -0700
Subject: [PATCH 2/2] fix(mothership): icon fallback behind video preview

---
 .../components/chat-message-attachments.tsx   | 24 +++++++++++++------
 .../components/attached-files-list.tsx        | 22 +++++++++++------
 2 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
index 00d02b1b19d..d430fb14e61 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/chat-message-attachments.tsx
@@ -36,19 +36,29 @@ export function ChatMessageAttachments(props: {
           )
         }
         const isVideo = att.media_type.startsWith('video/')
-        return (
-          <div key={att.id} className='h-[56px] w-[56px] overflow-hidden rounded-[8px]'>
-            {isVideo ? (
+        if (isVideo) {
+          const Icon = getDocumentIcon(att.media_type, att.filename)
+          return (
+            <div
+              key={att.id}
+              className='relative h-[56px] w-[56px] overflow-hidden rounded-[8px] bg-[var(--surface-5)]'
+            >
+              <div className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
+                <Icon className='h-[18px] w-[18px]' />
+              </div>
               <video
                 src={att.previewUrl}
                 muted
                 playsInline
                 preload='metadata'
-                className='h-full w-full object-cover'
+                className='relative h-full w-full object-cover'
               />
-            ) : (
-              <img src={att.previewUrl} alt={att.filename} className='h-full w-full object-cover' />
-            )}
+            </div>
+          )
+        }
+        return (
+          <div key={att.id} className='h-[56px] w-[56px] overflow-hidden rounded-[8px]'>
+            <img src={att.previewUrl} alt={att.filename} className='h-full w-full object-cover' />
           </div>
         )
       })}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
index 2ea1c66d082..3dc97d208ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/attached-files-list.tsx
@@ -32,13 +32,21 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
                 onClick={() => onFileClick(file)}
               >
                 {hasPreview && isVideo ? (
-                  <video
-                    src={file.previewUrl}
-                    muted
-                    playsInline
-                    preload='metadata'
-                    className='h-full w-full object-cover'
-                  />
+                  <>
+                    <div className='absolute inset-0 flex items-center justify-center text-[var(--text-icon)]'>
+                      {(() => {
+                        const Icon = getDocumentIcon(file.type, file.name)
+                        return <Icon className='h-[18px] w-[18px]' />
+                      })()}
+                    </div>
+                    <video
+                      src={file.previewUrl}
+                      muted
+                      playsInline
+                      preload='metadata'
+                      className='relative h-full w-full object-cover'
+                    />
+                  </>
                 ) : hasPreview ? (
                   <img
                     src={file.previewUrl}