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..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
@@ -30,13 +30,36 @@ export function ChatMessageAttachments(props: {
)}
>
{attachments.map((att) => {
- const isImage = att.media_type.startsWith('image/')
- return isImage && att.previewUrl ? (
+ if (!att.previewUrl) {
+ return (
+
+ )
+ }
+ const isVideo = att.media_type.startsWith('video/')
+ if (isVideo) {
+ const Icon = getDocumentIcon(att.media_type, att.filename)
+ return (
+
+ )
+ }
+ return (
- ) : (
-
)
})}
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..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
@@ -22,7 +22,8 @@ export const AttachedFilesList = React.memo(function AttachedFilesList({
return (
{attachedFiles.map((file) => {
- const isImage = file.type.startsWith('image/')
+ const isVideo = file.type.startsWith('video/')
+ const hasPreview = Boolean(file.previewUrl)
return (
@@ -30,7 +31,23 @@ 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 ? (
+ <>
+
+ {(() => {
+ const Icon = getDocumentIcon(file.type, file.name)
+ return
+ })()}
+
+
+ >
+ ) : hasPreview ? (
(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(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),
}))
}