feat(motheship): add docx support

Author: Sg312

apps/sim/app/api/files/serve/[...path]/route.ts

@@ -4,7 +4,11 @@ import { createLogger } from '@sim/logger'
 import type { NextRequest } from 'next/server'
 import { NextResponse } from 'next/server'
 import { checkSessionOrInternalAuth } from '@/lib/auth/hybrid'
-import { generatePptxFromCode } from '@/lib/execution/pptx-vm'
+import {
+  generateDocxFromCode,
+  generatePdfFromCode,
+  generatePptxFromCode,
+} from '@/lib/execution/doc-vm'
 import { CopilotFiles, isUsingCloudStorage } from '@/lib/uploads'
 import type { StorageContext } from '@/lib/uploads/config'
 import { parseWorkspaceFileKey } from '@/lib/uploads/contexts/workspace/workspace-file-manager'
@@ -22,47 +26,73 @@ import {
 const logger = createLogger('FilesServeAPI')
 
 const ZIP_MAGIC = Buffer.from([0x50, 0x4b, 0x03, 0x04])
+const PDF_MAGIC = Buffer.from([0x25, 0x50, 0x44, 0x46, 0x2d]) // %PDF-
+
+interface CompilableFormat {
+  magic: Buffer
+  compile: (code: string, workspaceId: string) => Promise<Buffer>
+  contentType: string
+}
+
+const COMPILABLE_FORMATS: Record<string, CompilableFormat> = {
+  '.pptx': {
+    magic: ZIP_MAGIC,
+    compile: generatePptxFromCode,
+    contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  },
+  '.docx': {
+    magic: ZIP_MAGIC,
+    compile: generateDocxFromCode,
+    contentType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  },
+  '.pdf': {
+    magic: PDF_MAGIC,
+    compile: generatePdfFromCode,
+    contentType: 'application/pdf',
+  },
+}
 
-const MAX_COMPILED_PPTX_CACHE = 10
-const compiledPptxCache = new Map<string, Buffer>()
+const MAX_COMPILED_DOC_CACHE = 10
+const compiledDocCache = new Map<string, Buffer>()
 
 function compiledCacheSet(key: string, buffer: Buffer): void {
-  if (compiledPptxCache.size >= MAX_COMPILED_PPTX_CACHE) {
-    compiledPptxCache.delete(compiledPptxCache.keys().next().value as string)
+  if (compiledDocCache.size >= MAX_COMPILED_DOC_CACHE) {
+    compiledDocCache.delete(compiledDocCache.keys().next().value as string)
   }
-  compiledPptxCache.set(key, buffer)
+  compiledDocCache.set(key, buffer)
 }
 
-async function compilePptxIfNeeded(
+async function compileDocumentIfNeeded(
   buffer: Buffer,
   filename: string,
   workspaceId?: string,
   raw?: boolean
 ): Promise<{ buffer: Buffer; contentType: string }> {
-  const isPptx = filename.toLowerCase().endsWith('.pptx')
-  if (raw || !isPptx || buffer.subarray(0, 4).equals(ZIP_MAGIC)) {
+  if (raw) return { buffer, contentType: getContentType(filename) }
+
+  const ext = filename.slice(filename.lastIndexOf('.')).toLowerCase()
+  const format = COMPILABLE_FORMATS[ext]
+  if (!format) return { buffer, contentType: getContentType(filename) }
+
+  const magicLen = format.magic.length
+  if (buffer.length >= magicLen && buffer.subarray(0, magicLen).equals(format.magic)) {
     return { buffer, contentType: getContentType(filename) }
   }
 
   const code = buffer.toString('utf-8')
   const cacheKey = createHash('sha256')
+    .update(ext)
     .update(code)
     .update(workspaceId ?? '')
     .digest('hex')
-  const cached = compiledPptxCache.get(cacheKey)
+  const cached = compiledDocCache.get(cacheKey)
   if (cached) {
-    return {
-      buffer: cached,
-      contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-    }
+    return { buffer: cached, contentType: format.contentType }
   }
 
-  const compiled = await generatePptxFromCode(code, workspaceId || '')
+  const compiled = await format.compile(code, workspaceId || '')
   compiledCacheSet(cacheKey, compiled)
-  return {
-    buffer: compiled,
-    contentType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  }
+  return { buffer: compiled, contentType: format.contentType }
 }
 
 const STORAGE_KEY_PREFIX_RE = /^\d{13}-[a-z0-9]{7}-/
@@ -169,7 +199,7 @@ async function handleLocalFile(
     const segment = filename.split('/').pop() || filename
     const displayName = stripStorageKeyPrefix(segment)
     const workspaceId = getWorkspaceIdForCompile(filename)
-    const { buffer: fileBuffer, contentType } = await compilePptxIfNeeded(
+    const { buffer: fileBuffer, contentType } = await compileDocumentIfNeeded(
       rawBuffer,
       displayName,
       workspaceId,
@@ -226,7 +256,7 @@ async function handleCloudProxy(
     const segment = cloudKey.split('/').pop() || 'download'
     const displayName = stripStorageKeyPrefix(segment)
     const workspaceId = getWorkspaceIdForCompile(cloudKey)
-    const { buffer: fileBuffer, contentType } = await compilePptxIfNeeded(
+    const { buffer: fileBuffer, contentType } = await compileDocumentIfNeeded(
       rawBuffer,
       displayName,
       workspaceId,

apps/sim/app/api/workspaces/[id]/pptx/preview/route.ts

@@ -1,7 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { type NextRequest, NextResponse } from 'next/server'
 import { getSession } from '@/lib/auth'
-import { generatePptxFromCode } from '@/lib/execution/pptx-vm'
+import { generatePptxFromCode } from '@/lib/execution/doc-vm'
 import { verifyWorkspaceMembership } from '@/app/api/workflows/utils'
 
 export const dynamic = 'force-dynamic'

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx

@@ -44,34 +44,44 @@ const TEXT_EDITABLE_EXTENSIONS = new Set([
   'svg',
 ])
 
-const IFRAME_PREVIEWABLE_MIME_TYPES = new Set(['application/pdf'])
+const IFRAME_PREVIEWABLE_MIME_TYPES = new Set(['application/pdf', 'text/x-pdflibjs'])
 const IFRAME_PREVIEWABLE_EXTENSIONS = new Set(['pdf'])
 
 const IMAGE_PREVIEWABLE_MIME_TYPES = new Set(['image/png', 'image/jpeg', 'image/gif', 'image/webp'])
 const IMAGE_PREVIEWABLE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'webp'])
 
 const PPTX_PREVIEWABLE_MIME_TYPES = new Set([
   'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'text/x-pptxgenjs',
 ])
 const PPTX_PREVIEWABLE_EXTENSIONS = new Set(['pptx'])
 
+const DOCX_PREVIEWABLE_MIME_TYPES = new Set([
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'text/x-docxjs',
+])
+const DOCX_PREVIEWABLE_EXTENSIONS = new Set(['docx'])
+
 type FileCategory =
   | 'text-editable'
   | 'iframe-previewable'
   | 'image-previewable'
   | 'pptx-previewable'
+  | 'docx-previewable'
   | 'unsupported'
 
 function resolveFileCategory(mimeType: string | null, filename: string): FileCategory {
   if (mimeType && TEXT_EDITABLE_MIME_TYPES.has(mimeType)) return 'text-editable'
   if (mimeType && IFRAME_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'iframe-previewable'
   if (mimeType && IMAGE_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'image-previewable'
+  if (mimeType && DOCX_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'docx-previewable'
   if (mimeType && PPTX_PREVIEWABLE_MIME_TYPES.has(mimeType)) return 'pptx-previewable'
 
   const ext = getFileExtension(filename)
   if (TEXT_EDITABLE_EXTENSIONS.has(ext)) return 'text-editable'
   if (IFRAME_PREVIEWABLE_EXTENSIONS.has(ext)) return 'iframe-previewable'
   if (IMAGE_PREVIEWABLE_EXTENSIONS.has(ext)) return 'image-previewable'
+  if (DOCX_PREVIEWABLE_EXTENSIONS.has(ext)) return 'docx-previewable'
   if (PPTX_PREVIEWABLE_EXTENSIONS.has(ext)) return 'pptx-previewable'
 
   return 'unsupported'
@@ -138,6 +148,10 @@ export function FileViewer({
     return <ImagePreview file={file} />
   }
 
+  if (category === 'docx-previewable') {
+    return <DocxPreview file={file} workspaceId={workspaceId} />
+  }
+
   if (category === 'pptx-previewable') {
     return <PptxPreview file={file} workspaceId={workspaceId} streamingContent={streamingContent} />
   }
@@ -181,7 +195,14 @@ function TextEditor({
     isLoading,
     error,
     dataUpdatedAt,
-  } = useWorkspaceFileContent(workspaceId, file.id, file.key, file.type === 'text/x-pptxgenjs')
+  } = useWorkspaceFileContent(
+    workspaceId,
+    file.id,
+    file.key,
+    file.type === 'text/x-pptxgenjs' ||
+      file.type === 'text/x-docxjs' ||
+      file.type === 'text/x-pdflibjs'
+  )
 
   const updateContent = useUpdateWorkspaceFileContent()
   const updateContentRef = useRef(updateContent)
@@ -551,6 +572,71 @@ const ImagePreview = memo(function ImagePreview({ file }: { file: WorkspaceFileR
   )
 })
 
+const DocxPreview = memo(function DocxPreview({
+  file,
+  workspaceId,
+}: {
+  file: WorkspaceFileRecord
+  workspaceId: string
+}) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const {
+    data: fileData,
+    isLoading,
+    error: fetchError,
+  } = useWorkspaceFileBinary(workspaceId, file.id, file.key)
+  const [renderError, setRenderError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current || !fileData) return
+
+    let cancelled = false
+
+    async function render() {
+      try {
+        const { renderAsync } = await import('docx-preview')
+        if (cancelled || !containerRef.current) return
+        containerRef.current.innerHTML = ''
+        await renderAsync(fileData, containerRef.current, undefined, {
+          inWrapper: true,
+          ignoreWidth: false,
+          ignoreHeight: false,
+        })
+      } catch (err) {
+        if (!cancelled) {
+          const msg = err instanceof Error ? err.message : 'Failed to render document'
+          logger.error('DOCX render failed', { error: msg })
+          setRenderError(msg)
+        }
+      }
+    }
+
+    render()
+    return () => {
+      cancelled = true
+    }
+  }, [fileData])
+
+  if (isLoading) {
+    return (
+      <div className='flex h-full items-center justify-center'>
+        <Skeleton className='h-[200px] w-[80%]' />
+      </div>
+    )
+  }
+
+  if (fetchError || renderError) {
+    return (
+      <div className='flex h-full flex-col items-center justify-center gap-2 text-[var(--text-muted)]'>
+        <p className='text-[13px]'>Failed to preview document</p>
+        <p className='text-[11px]'>{renderError || 'Could not load file'}</p>
+      </div>
+    )
+  }
+
+  return <div ref={containerRef} className='h-full w-full overflow-auto bg-white' />
+})
+
 const pptxSlideCache = new Map<string, string[]>()
 
 function pptxCacheKey(fileId: string, dataUpdatedAt: number, byteLength: number): string {

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

@@ -83,7 +83,12 @@ export const ResourceContent = memo(function ResourceContent({
   }, [streamingFile])
   const syntheticFile = useMemo(() => {
     const ext = getFileExtension(streamFileName)
-    const type = ext === 'pptx' ? 'text/x-pptxgenjs' : getMimeTypeFromExtension(ext)
+    const SOURCE_MIME_MAP: Record<string, string> = {
+      pptx: 'text/x-pptxgenjs',
+      docx: 'text/x-docxjs',
+      pdf: 'text/x-pdflibjs',
+    }
+    const type = SOURCE_MIME_MAP[ext] ?? getMimeTypeFromExtension(ext)
     return {
       id: 'streaming-file',
       workspaceId,