Add download file shortcut on mothership file view

Author: Theodore Li

apps/sim/app/workspace/[workspaceId]/files/files.tsx

@@ -26,6 +26,7 @@ import { File as FilesIcon } from '@/components/emcn/icons'
 import { getDocumentIcon } from '@/components/icons/document-icons'
 import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import {
+  downloadWorkspaceFile,
   formatFileSize,
   getFileExtension,
   getMimeTypeFromExtension,
@@ -115,23 +116,6 @@ function formatFileType(mimeType: string | null, filename: string): string {
   return mimeType ?? 'File'
 }
 
-async function downloadFile(file: WorkspaceFileRecord) {
-  const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace&t=${Date.now()}`
-  const response = await fetch(serveUrl, { cache: 'no-store' })
-  if (!response.ok) {
-    throw new Error(`Failed to download file: ${response.statusText}`)
-  }
-  const blob = await response.blob()
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = file.name
-  document.body.appendChild(a)
-  a.click()
-  document.body.removeChild(a)
-  URL.revokeObjectURL(url)
-}
-
 export function Files() {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const saveRef = useRef<(() => Promise<void>) | null>(null)
@@ -292,7 +276,7 @@ export function Files() {
 
   const handleDownload = useCallback(async (file: WorkspaceFileRecord) => {
     try {
-      await downloadFile(file)
+      await downloadWorkspaceFile(file)
     } catch (err) {
       logger.error('Failed to download file:', err)
     }

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx

@@ -1,14 +1,16 @@
 'use client'
 
 import { lazy, Suspense, useCallback, useEffect, useMemo } from 'react'
+import { createLogger } from '@sim/logger'
 import { Square } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { Button, PlayOutline, Skeleton, Tooltip } from '@/components/emcn'
-import { FileX, SquareArrowUpRight, WorkflowX } from '@/components/emcn/icons'
+import { Download, FileX, SquareArrowUpRight, WorkflowX } from '@/components/emcn/icons'
 import {
   markRunToolManuallyStopped,
   reportManualRunToolStop,
 } from '@/lib/copilot/client-sse/run-tool-execution'
+import { downloadWorkspaceFile } from '@/lib/uploads/utils/file-utils'
 import {
   FileViewer,
   type PreviewMode,
@@ -93,6 +95,8 @@ export function ResourceActions({ workspaceId, resource }: ResourceActionsProps)
   switch (resource.type) {
     case 'workflow':
       return <EmbeddedWorkflowActions workspaceId={workspaceId} workflowId={resource.id} />
+    case 'file':
+      return <EmbeddedFileActions workspaceId={workspaceId} fileId={resource.id} />
     case 'knowledgebase':
       return (
         <EmbeddedKnowledgeBaseActions workspaceId={workspaceId} knowledgeBaseId={resource.id} />
@@ -230,6 +234,68 @@ export function EmbeddedKnowledgeBaseActions({
   )
 }
 
+const fileLogger = createLogger('EmbeddedFileActions')
+
+interface EmbeddedFileActionsProps {
+  workspaceId: string
+  fileId: string
+}
+
+function EmbeddedFileActions({ workspaceId, fileId }: EmbeddedFileActionsProps) {
+  const router = useRouter()
+  const { data: files = [] } = useWorkspaceFiles(workspaceId)
+  const file = useMemo(() => files.find((f) => f.id === fileId), [files, fileId])
+
+  const handleDownload = useCallback(async () => {
+    if (!file) return
+    try {
+      await downloadWorkspaceFile(file)
+    } catch (err) {
+      fileLogger.error('Failed to download file:', err)
+    }
+  }, [file])
+
+  const handleOpenInFiles = useCallback(() => {
+    router.push(`/workspace/${workspaceId}/files?fileId=${fileId}`)
+  }, [router, workspaceId, fileId])
+
+  return (
+    <>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='subtle'
+            onClick={handleOpenInFiles}
+            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+            aria-label='Open in files'
+          >
+            <SquareArrowUpRight className={RESOURCE_TAB_ICON_CLASS} />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <p>Open in files</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <Button
+            variant='subtle'
+            onClick={() => void handleDownload()}
+            disabled={!file}
+            className={RESOURCE_TAB_ICON_BUTTON_CLASS}
+            aria-label='Download file'
+          >
+            <Download className={RESOURCE_TAB_ICON_CLASS} />
+          </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content side='bottom'>
+          <p>Download</p>
+        </Tooltip.Content>
+      </Tooltip.Root>
+    </>
+  )
+}
+
 interface EmbeddedWorkflowProps {
   workspaceId: string
   workflowId: string

apps/sim/lib/uploads/utils/file-utils.ts

@@ -739,3 +739,24 @@ export function getViewerUrl(fileKey: string, workspaceId?: string): string | nu
 
   return `/workspace/${resolvedWorkspaceId}/files/${fileKey}/view`
 }
+
+/**
+ * Downloads a workspace file to the user's device via the serve API.
+ * Fetches the file as a blob and triggers a browser download.
+ */
+export async function downloadWorkspaceFile(file: { key: string; name: string }): Promise<void> {
+  const serveUrl = `/api/files/serve/${encodeURIComponent(file.key)}?context=workspace&t=${Date.now()}`
+  const response = await fetch(serveUrl, { cache: 'no-store' })
+  if (!response.ok) {
+    throw new Error(`Failed to download file: ${response.statusText}`)
+  }
+  const blob = await response.blob()
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = file.name
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}