Merge branch 'feat/mothership-copilot' of github.com:simstudioai/sim into feat/mothership-copilot

Author: icecrasher321

apps/sim/app/api/files/upload/route.ts

@@ -251,9 +251,18 @@ export async function POST(request: NextRequest) {
         }
       }
 
-      // Handle image-only contexts (copilot, chat, profile-pictures)
+      // Handle copilot, chat, profile-pictures contexts
       if (context === 'copilot' || context === 'chat' || context === 'profile-pictures') {
-        if (!isImageFileType(file.type)) {
+        if (context === 'copilot') {
+          const { isSupportedFileType: isCopilotSupported } = await import(
+            '@/lib/uploads/contexts/copilot/copilot-file-manager'
+          )
+          if (!isImageFileType(file.type) && !isCopilotSupported(file.type)) {
+            throw new InvalidRequestError(
+              'Unsupported file type. Allowed: images, PDF, and text files (TXT, CSV, MD, HTML, JSON, XML).'
+            )
+          }
+        } else if (!isImageFileType(file.type)) {
           throw new InvalidRequestError(
             `Only image files (JPEG, PNG, GIF, WebP, SVG) are allowed for ${context} uploads`
           )

apps/sim/app/api/mothership/chat/route.ts

@@ -184,12 +184,15 @@ export async function POST(req: NextRequest) {
             timestamp: new Date().toISOString(),
           }
 
-          const assistantMessage = {
+          const assistantMessage: Record<string, unknown> = {
             id: crypto.randomUUID(),
             role: 'assistant' as const,
             content: result.content,
             timestamp: new Date().toISOString(),
           }
+          if (result.toolCalls.length > 0) {
+            assistantMessage.toolCalls = result.toolCalls
+          }
 
           const updatedMessages = [...conversationHistory, userMessage, assistantMessage]
 

apps/sim/app/chat/components/message/message.tsx

@@ -8,6 +8,7 @@ import {
   ChatFileDownloadAll,
 } from '@/app/chat/components/message/components/file-download'
 import MarkdownRenderer from '@/app/chat/components/message/components/markdown-renderer'
+import { useThrottledValue } from '@/hooks/use-throttled-value'
 
 export interface ChatAttachment {
   id: string
@@ -39,7 +40,8 @@ export interface ChatMessage {
 }
 
 function EnhancedMarkdownRenderer({ content }: { content: string }) {
-  return <MarkdownRenderer content={content} />
+  const throttled = useThrottledValue(content)
+  return <MarkdownRenderer content={throttled} />
 }
 
 export const ClientChatMessage = memo(

apps/sim/app/chat/hooks/use-chat-streaming.ts

@@ -78,18 +78,15 @@ export function useChatStreaming() {
       abortControllerRef.current.abort()
       abortControllerRef.current = null
 
-      // Add a message indicating the response was stopped
+      const latestContent = accumulatedTextRef.current
+
       setMessages((prev) => {
         const lastMessage = prev[prev.length - 1]
 
-        // Only modify if the last message is from the assistant (as expected)
         if (lastMessage && lastMessage.type === 'assistant') {
-          // Append a note that the response was stopped
+          const content = latestContent || lastMessage.content
           const updatedContent =
-            lastMessage.content +
-            (lastMessage.content
-              ? '\n\n_Response stopped by user._'
-              : '_Response stopped by user._')
+            content + (content ? '\n\n_Response stopped by user._' : '_Response stopped by user._')
 
           return [
             ...prev.slice(0, -1),
@@ -100,7 +97,6 @@ export function useChatStreaming() {
         return prev
       })
 
-      // Reset streaming state immediately
       setIsStreamingResponse(false)
       accumulatedTextRef.current = ''
       lastStreamedPositionRef.current = 0
@@ -139,9 +135,49 @@ export function useChatStreaming() {
     let accumulatedText = ''
     let lastAudioPosition = 0
 
-    // Track which blocks have streamed content (like chat panel)
     const messageIdMap = new Map<string, string>()
     const messageId = crypto.randomUUID()
+
+    const UI_BATCH_MAX_MS = 50
+    let uiDirty = false
+    let uiRAF: number | null = null
+    let uiTimer: ReturnType<typeof setTimeout> | null = null
+    let lastUIFlush = 0
+
+    const flushUI = () => {
+      if (uiRAF !== null) {
+        cancelAnimationFrame(uiRAF)
+        uiRAF = null
+      }
+      if (uiTimer !== null) {
+        clearTimeout(uiTimer)
+        uiTimer = null
+      }
+      if (!uiDirty) return
+      uiDirty = false
+      lastUIFlush = performance.now()
+      const snapshot = accumulatedText
+      setMessages((prev) =>
+        prev.map((msg) => {
+          if (msg.id !== messageId) return msg
+          if (!msg.isStreaming) return msg
+          return { ...msg, content: snapshot }
+        })
+      )
+    }
+
+    const scheduleUIFlush = () => {
+      if (uiRAF !== null) return
+      const elapsed = performance.now() - lastUIFlush
+      if (elapsed >= UI_BATCH_MAX_MS) {
+        flushUI()
+        return
+      }
+      uiRAF = requestAnimationFrame(flushUI)
+      if (uiTimer === null) {
+        uiTimer = setTimeout(flushUI, Math.max(0, UI_BATCH_MAX_MS - elapsed))
+      }
+    }
     setMessages((prev) => [
       ...prev,
       {
@@ -165,6 +201,7 @@ export function useChatStreaming() {
         const { done, value } = await reader.read()
 
         if (done) {
+          flushUI()
           // Stream any remaining text for TTS
           if (
             shouldPlayAudio &&
@@ -217,6 +254,7 @@ export function useChatStreaming() {
               }
 
               if (eventType === 'final' && json.data) {
+                flushUI()
                 const finalData = json.data as {
                   success: boolean
                   error?: string | { message?: string }
@@ -367,18 +405,16 @@ export function useChatStreaming() {
                 }
 
                 accumulatedText += contentChunk
+                accumulatedTextRef.current = accumulatedText
                 logger.debug('[useChatStreaming] Received chunk', {
                   blockId,
                   chunkLength: contentChunk.length,
                   totalLength: accumulatedText.length,
                   messageId,
                   chunk: contentChunk.substring(0, 20),
                 })
-                setMessages((prev) =>
-                  prev.map((msg) =>
-                    msg.id === messageId ? { ...msg, content: accumulatedText } : msg
-                  )
-                )
+                uiDirty = true
+                scheduleUIFlush()
 
                 // Real-time TTS for voice mode
                 if (shouldPlayAudio && streamingOptions?.audioStreamHandler) {
@@ -419,10 +455,13 @@ export function useChatStreaming() {
       }
     } catch (error) {
       logger.error('Error processing stream:', error)
+      flushUI()
       setMessages((prev) =>
         prev.map((msg) => (msg.id === messageId ? { ...msg, isStreaming: false } : msg))
       )
     } finally {
+      if (uiRAF !== null) cancelAnimationFrame(uiRAF)
+      if (uiTimer !== null) clearTimeout(uiTimer)
       setIsStreamingResponse(false)
       abortControllerRef.current = null
 

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx

@@ -3,6 +3,7 @@
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
+import { useThrottledValue } from '@/hooks/use-throttled-value'
 import type { ContentBlock, ToolCallStatus } from '../../types'
 
 const REMARK_PLUGINS = [remarkGfm]
@@ -96,6 +97,15 @@ function parseBlocks(blocks: ContentBlock[], isStreaming: boolean): MessageSegme
   return segments
 }
 
+function ThrottledTextSegment({ content }: { content: string }) {
+  const throttled = useThrottledValue(content)
+  return (
+    <div className={PROSE_CLASSES}>
+      <ReactMarkdown remarkPlugins={REMARK_PLUGINS}>{throttled}</ReactMarkdown>
+    </div>
+  )
+}
+
 interface MessageContentProps {
   blocks: ContentBlock[]
   fallbackContent: string
@@ -118,11 +128,7 @@ export function MessageContent({ blocks, fallbackContent, isStreaming }: Message
     <div className='space-y-[10px]'>
       {segments.map((segment, i) => {
         if (segment.type === 'text') {
-          return (
-            <div key={`text-${i}`} className={PROSE_CLASSES}>
-              <ReactMarkdown remarkPlugins={REMARK_PLUGINS}>{segment.content}</ReactMarkdown>
-            </div>
-          )
+          return <ThrottledTextSegment key={`text-${i}`} content={segment.content} />
         }
 
         return (

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/index.ts

@@ -0,0 +1,2 @@
+export { ResourceContent } from './resource-content'
+export { ResourceTabs } from './resource-tabs'

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

@@ -0,0 +1 @@
+export { ResourceContent } from './resource-content'

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

@@ -0,0 +1,74 @@
+'use client'
+
+import { lazy, Suspense, useMemo } from 'react'
+import { Skeleton } from '@/components/emcn'
+import { FileViewer } from '@/app/workspace/[workspaceId]/files/components/file-viewer'
+import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+import { Table } from '@/app/workspace/[workspaceId]/tables/[tableId]/components'
+import { useWorkspaceFiles } from '@/hooks/queries/workspace-files'
+
+const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
+
+const LOADING_SKELETON = (
+  <div className='flex h-full flex-col gap-[8px] p-[24px]'>
+    <Skeleton className='h-[16px] w-[60%]' />
+    <Skeleton className='h-[16px] w-[80%]' />
+    <Skeleton className='h-[16px] w-[40%]' />
+  </div>
+)
+
+interface ResourceContentProps {
+  workspaceId: string
+  resource: MothershipResource
+}
+
+/**
+ * Renders the content for the currently active mothership resource.
+ * Handles table, file, and workflow resource types with appropriate
+ * embedded rendering for each.
+ */
+export function ResourceContent({ workspaceId, resource }: ResourceContentProps) {
+  switch (resource.type) {
+    case 'table':
+      return <Table key={resource.id} workspaceId={workspaceId} tableId={resource.id} embedded />
+
+    case 'file':
+      return <EmbeddedFile key={resource.id} workspaceId={workspaceId} fileId={resource.id} />
+
+    case 'workflow':
+      return (
+        <Suspense fallback={LOADING_SKELETON}>
+          <Workflow key={resource.id} workspaceId={workspaceId} workflowId={resource.id} embedded />
+        </Suspense>
+      )
+
+    default:
+      return null
+  }
+}
+
+interface EmbeddedFileProps {
+  workspaceId: string
+  fileId: string
+}
+
+function EmbeddedFile({ workspaceId, fileId }: EmbeddedFileProps) {
+  const { data: files = [], isLoading } = useWorkspaceFiles(workspaceId)
+  const file = useMemo(() => files.find((f) => f.id === fileId), [files, fileId])
+
+  if (isLoading) return LOADING_SKELETON
+
+  if (!file) {
+    return (
+      <div className='flex h-full items-center justify-center'>
+        <span className='text-[13px] text-[var(--text-muted)]'>File not found</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-full flex-col overflow-hidden'>
+      <FileViewer key={file.id} file={file} workspaceId={workspaceId} canEdit={true} />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/index.ts

@@ -0,0 +1 @@
+export { ResourceTabs } from './resource-tabs'

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

@@ -0,0 +1,36 @@
+'use client'
+
+import { cn } from '@/lib/core/utils/cn'
+import type { MothershipResource } from '@/app/workspace/[workspaceId]/home/types'
+
+interface ResourceTabsProps {
+  resources: MothershipResource[]
+  activeId: string | null
+  onSelect: (id: string) => void
+}
+
+/**
+ * Horizontal tab bar for switching between mothership resources.
+ * Mirrors the role of ResourceHeader in the Resource abstraction.
+ */
+export function ResourceTabs({ resources, activeId, onSelect }: ResourceTabsProps) {
+  return (
+    <div className='flex shrink-0 gap-[2px] overflow-x-auto border-[var(--border)] border-b px-[12px]'>
+      {resources.map((resource) => (
+        <button
+          key={resource.id}
+          type='button'
+          onClick={() => onSelect(resource.id)}
+          className={cn(
+            'shrink-0 cursor-pointer border-b-[2px] px-[12px] py-[10px] text-[13px] transition-colors',
+            activeId === resource.id
+              ? 'border-[var(--text-primary)] font-medium text-[var(--text-primary)]'
+              : 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+          )}
+        >
+          {resource.title}
+        </button>
+      ))}
+    </div>
+  )
+}