+ {/* Error Messages */}
+ {uploadErrors.length > 0 && (
+
-
+
+ )}
+
{/* Text Input Area with Controls */}
+
+
+
+
+
+
+ File upload error
+
+
+ {uploadErrors.map((error, idx) => (
+
+
+ {error}
+
+ ))}
+
- {/* Voice Input */}
- {isSttAvailable && (
-
-
-
-
+
+
+
+
+
+
+
+ )}
+
{/* Send Button */}
)
}
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index 4565ac4c57..a22bad3bbd 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -1,10 +1,18 @@
'use client'
import { memo, useMemo, useState } from 'react'
-import { Check, Copy } from 'lucide-react'
+import { Check, Copy, File as FileIcon, FileText, Image as ImageIcon } from 'lucide-react'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import MarkdownRenderer from './components/markdown-renderer'
+export interface ChatAttachment {
+ id: string
+ name: string
+ type: string
+ dataUrl: string
+ size?: number
+}
+
export interface ChatMessage {
id: string
content: string | Record
@@ -12,6 +20,7 @@ export interface ChatMessage {
timestamp: Date
isInitialMessage?: boolean
isStreaming?: boolean
+ attachments?: ChatAttachment[]
}
function EnhancedMarkdownRenderer({ content }: { content: string }) {
@@ -39,15 +48,96 @@ export const ClientChatMessage = memo(
return (
)}
- ((resolve, reject) => {
+ const reader = new FileReader()
+ reader.onload = () => resolve(reader.result as string)
+ reader.onerror = reject
+ reader.readAsDataURL(file.file)
+ })
+ } catch (error) {
+ logger.error('Error reading file as data URL:', error)
+ }
+ }
+ return {
+ id: file.id,
+ name: file.name,
+ type: file.type,
+ size: file.size,
+ dataUrl,
+ }
+ })
+ )
+
+ // Add user message with attachments (include all files, even non-images without dataUrl)
addMessage({
content:
sentMessage || (chatFiles.length > 0 ? `Uploaded ${chatFiles.length} file(s)` : ''),
workflowId: activeWorkflowId,
type: 'user',
+ attachments: attachmentsWithData,
})
// Prepare workflow input
@@ -626,66 +652,212 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
if (validNewFiles.length > 0) {
setChatFiles([...chatFiles, ...validNewFiles])
+ setUploadErrors([]) // Clear errors when files are successfully added
}
}
}
}}
>
- {/* File upload section */}
- (blockId, subBlock.id)
+ const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
// Get the knowledge base ID from other sub-blocks
const [knowledgeBaseIdValue] = useSubBlockValue(blockId, 'knowledgeBaseId')
@@ -301,7 +303,12 @@ export function DocumentTagEntry({
)}
/>
- 0 && (
+
+ )}
+
+
+ {attachedFiles.map((file) => {
+ const formatFileSize = (bytes: number) => {
+ if (bytes === 0) return '0 B'
+ const k = 1024
+ const sizes = ['B', 'KB', 'MB', 'GB']
+ const i = Math.floor(Math.log(bytes) / Math.log(k))
+ return `${Math.round((bytes / k ** i) * 10) / 10} ${sizes[i]}`
+ }
+
+ return (
+
-
-
-
- )}
+ ) : (
+ <>
+
+ )
+ })}
+
+ {file.dataUrl ? (
+ 
-
-
- Start voice conversation
- Click to enter voice mode -
+
+
+
+
+ )}
+
+
+ {file.name}
+
+
+ {formatFileSize(file.size)}
+
+
+ {/* Paperclip Button */}
+
+
+
+
+
+
+
+
+
+
+ {/* Hidden file input */}
+ {
+ handleFileSelect(e.target.files)
+ if (fileInputRef.current) {
+ fileInputRef.current.value = ''
+ }
+ }}
+ className='hidden'
+ disabled={isStreaming}
+ />
{/* Text Input Container */}
+ {/* Voice Input */}
+ {isSttAvailable && (
+ Attach files
+
@@ -208,10 +380,30 @@ export const ChatInput: React.FC<{
+
+ Start voice conversation
+
+ {/* File attachments displayed above the message */}
+ {message.attachments && message.attachments.length > 0 && (
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command.tsx
index ce3ee3d8fc..4ba1a4cb4f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command.tsx
@@ -236,8 +236,8 @@ export function ExampleCommand({
+
+ )}
+
+ {message.attachments.map((attachment) => {
+ const isImage = attachment.type.startsWith('image/')
+ const getFileIcon = (type: string) => {
+ if (type.includes('pdf'))
+ return (
+
+ {
+ if (attachment.dataUrl?.trim()) {
+ e.preventDefault()
+ window.open(attachment.dataUrl, '_blank')
+ }
+ }}
+ >
+ {isImage ? (
+ 
+ ) : (
+ <>
+
+ )
+ })}
+
+ {getFileIcon(attachment.type)}
+
+
+
+
+ )}
+
+ {attachment.name}
+
+ {attachment.size && (
+
+ {formatFileSize(attachment.size)}
+
+ )}
+
-
- {isJsonObject ? (
-
+ {/* Render text content if present and not just file count message */}
+ {message.content && !String(message.content).startsWith('Sent') && (
+ {JSON.stringify(message.content, null, 2)}
- ) : (
- {message.content as string}
- )}
-
+ {isJsonObject ? (
+
+ )}
{JSON.stringify(message.content, null, 2)}
+ ) : (
+ {message.content as string}
+ )}
+
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/deploy-modal.tsx
index 310dbd341a..82cf7cfca3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/deploy-modal.tsx
@@ -139,6 +139,16 @@ export function DeployModal({
case 'array':
exampleData[field.name] = [1, 2, 3]
break
+ case 'files':
+ exampleData[field.name] = [
+ {
+ data: 'data:application/pdf;base64,...',
+ type: 'file',
+ name: 'document.pdf',
+ mime: 'application/pdf',
+ },
+ ]
+ break
}
}
})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx
index 441d8625ea..9ecbc00426 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx
@@ -1,10 +1,9 @@
'use client'
import { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowDown, ArrowUp } from 'lucide-react'
+import { AlertCircle, ArrowDown, ArrowUp, File, FileText, Image, Paperclip, X } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
-import { Notice } from '@/components/ui/notice'
import { ScrollArea } from '@/components/ui/scroll-area'
import { createLogger } from '@/lib/logs/console/logger'
import {
@@ -13,7 +12,6 @@ import {
parseOutputContentSafely,
} from '@/lib/response-format'
import {
- ChatFileUpload,
ChatMessage,
OutputSelect,
} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components'
@@ -261,12 +259,40 @@ export function Chat({ chatMessage, setChatMessage }: ChatProps) {
let result: any = null
try {
- // Add user message
+ // Read files as data URLs for display in chat (only images to avoid localStorage quota issues)
+ const attachmentsWithData = await Promise.all(
+ chatFiles.map(async (file) => {
+ let dataUrl = ''
+ // Only read images as data URLs to avoid storing large files in localStorage
+ if (file.type.startsWith('image/')) {
+ try {
+ dataUrl = await new Promise{getDisplayCommand()}
+
+
{getDisplayCommand()}
- {uploadErrors.length > 0 && (
-
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx
index 2709da199f..28c07c2e6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx
@@ -1,4 +1,13 @@
import { useMemo } from 'react'
+import { File, FileText, Image as ImageIcon } from 'lucide-react'
+
+interface ChatAttachment {
+ id: string
+ name: string
+ type: string
+ dataUrl: string
+ size?: number
+}
interface ChatMessageProps {
message: {
@@ -7,6 +16,7 @@ interface ChatMessageProps {
timestamp: string | Date
type: 'user' | 'workflow'
isStreaming?: boolean
+ attachments?: ChatAttachment[]
}
}
@@ -58,12 +68,81 @@ export function ChatMessage({ message }: ChatMessageProps) {
if (message.type === 'user') {
return (
-
-
+ {/* Error messages */}
+ {uploadErrors.length > 0 && (
+
-
- {uploadErrors.map((err, idx) => (
-
- {err} - ))} -
+
+ )}
+
+ {/* Combined input container matching copilot style */}
+
+
+
+
+
+
+
+ File upload error
+
+
+ {uploadErrors.map((err, idx) => (
+
+
+ {err}
+
+ ))}
+
+ {/* File thumbnails */}
+ {chatFiles.length > 0 && (
+ {
- setChatFiles(files)
- }}
- maxFiles={5}
- maxSize={10}
- disabled={!activeWorkflowId || isExecuting || isUploadingFiles}
- onError={(errors) => setUploadErrors(errors)}
- />
-
-
+ {chatFiles.map((file) => {
+ const isImage = file.type.startsWith('image/')
+ const previewUrl = isImage ? URL.createObjectURL(file.file) : null
+ const getFileIcon = (type: string) => {
+ if (type.includes('pdf'))
+ return
)}
-
+ {previewUrl ? (
+ 
+ ) : (
+ <>
+
+ )
+ })}
+ {getFileIcon(file.type)}
+
+
+
+
+ )}
+
+ {/* Remove button */}
+
+
+ {file.name}
+
+
+ {formatFileSize(file.size)}
+
+
- {
- setChatMessage(e.target.value)
- setHistoryIndex(-1) // Reset history index when typing
- }}
- onKeyDown={handleKeyPress}
- placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
- className={`h-9 flex-1 rounded-lg border-[#E5E5E5] bg-[#FFFFFF] text-muted-foreground shadow-xs focus-visible:ring-0 focus-visible:ring-offset-0 dark:border-[#414141] dark:bg-[var(--surface-elevated)] ${
- isDragOver
- ? 'border-[var(--brand-primary-hover-hex)] bg-purple-50/50 dark:border-[var(--brand-primary-hover-hex)] dark:bg-purple-950/20'
- : ''
- }`}
- disabled={!activeWorkflowId || isExecuting || isUploadingFiles}
- />
-
+ {/* Input row */}
+
+ {/* Attach button */}
+
+
+ {/* Hidden file input */}
+ {
+ const files = e.target.files
+ if (!files) return
+
+ const newFiles: ChatFile[] = []
+ const errors: string[] = []
+ for (let i = 0; i < files.length; i++) {
+ if (chatFiles.length + newFiles.length >= 5) {
+ errors.push('Maximum 5 files allowed')
+ break
+ }
+ const file = files[i]
+ if (file.size > 10 * 1024 * 1024) {
+ errors.push(`${file.name} is too large (max 10MB)`)
+ continue
+ }
+
+ // Check for duplicates
+ const isDuplicate = chatFiles.some(
+ (existingFile) =>
+ existingFile.name === file.name && existingFile.size === file.size
+ )
+ if (isDuplicate) {
+ errors.push(`${file.name} already added`)
+ continue
+ }
+
+ newFiles.push({
+ id: crypto.randomUUID(),
+ name: file.name,
+ size: file.size,
+ type: file.type,
+ file,
+ })
+ }
+ if (errors.length > 0) setUploadErrors(errors)
+ if (newFiles.length > 0) {
+ setChatFiles([...chatFiles, ...newFiles])
+ setUploadErrors([]) // Clear errors when files are successfully added
+ }
+ e.target.value = ''
+ }}
+ className='hidden'
+ disabled={!activeWorkflowId || isExecuting || isUploadingFiles}
+ />
+
+ {/* Text input */}
+ {
+ setChatMessage(e.target.value)
+ setHistoryIndex(-1)
+ }}
+ onKeyDown={handleKeyPress}
+ placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
+ className='h-8 flex-1 border-0 bg-transparent font-sans text-foreground text-sm shadow-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+ disabled={!activeWorkflowId || isExecuting || isUploadingFiles}
+ />
+
+ {/* Send button */}
+
+
+ {/* File attachments displayed above the message, completely separate from message box */}
+ {message.attachments && message.attachments.length > 0 && (
+
@@ -78,7 +157,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 0f25671850..fccca2b5e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -9,6 +9,7 @@ import { checkTagTrigger, TagDropdown } from '@/components/ui/tag-dropdown'
import { MAX_TAG_SLOTS } from '@/lib/knowledge/consts'
import { cn } from '@/lib/utils'
import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
import type { SubBlockConfig } from '@/blocks/types'
import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
import { useTagSelection } from '@/hooks/use-tag-selection'
@@ -40,6 +41,7 @@ export function DocumentTagEntry({
isConnecting = false,
}: DocumentTagEntryProps) {
const [storeValue, setStoreValue] = useSubBlockValue
+
+ )}
+
+ {message.attachments.map((attachment) => {
+ const isImage = attachment.type.startsWith('image/')
+ const getFileIcon = (type: string) => {
+ if (type.includes('pdf'))
+ return
+ {
+ if (attachment.dataUrl?.trim()) {
+ e.preventDefault()
+ window.open(attachment.dataUrl, '_blank')
+ }
+ }}
+ >
+ {isImage && attachment.dataUrl ? (
+
+ ) : (
+ <>
+
+ )
+ })}
+
+ {getFileIcon(attachment.type)}
+
+
+
+
+ )}
+
+ {attachment.name}
+
+ {attachment.size && (
+
+ {formatFileSize(attachment.size)}
+
+ )}
+
-
-
+ {/* Render text content if present and not just file count message */}
+ {formattedContent && !formattedContent.startsWith('Uploaded') && (
+
+
+ )}
-
{showDropdown && availableTagDefinitions.length > 0 && (
{formatDisplayText(cellValue)}
+
+ {formatDisplayText(cellValue, {
+ accessiblePrefixes,
+ highlightAll: !accessiblePrefixes,
+ })}
+
@@ -389,7 +396,10 @@ export function DocumentTagEntry({
/>
{showTypeDropdown && !isReadOnly && (
@@ -469,7 +479,12 @@ export function DocumentTagEntry({
className='w-full border-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 focus-visible:ring-0 focus-visible:ring-offset-0'
/>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 6df8d6582c..9b06b8649c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -239,7 +239,12 @@ export function KnowledgeTagFilters({
onBlur={handleBlur}
/>
- {formatDisplayText(cellValue)}
+ {formatDisplayText(cellValue, {
+ accessiblePrefixes,
+ highlightAll: !accessiblePrefixes,
+ })}
-
{formatDisplayText(cellValue)}
+
+ {formatDisplayText(cellValue, {
+ accessiblePrefixes,
+ highlightAll: !accessiblePrefixes,
+ })}
+
-
{showDropdown && tagDefinitions.length > 0 && (
{formatDisplayText(cellValue || 'Select tag')}
+
+ {formatDisplayText(cellValue || 'Select tag', {
+ accessiblePrefixes,
+ highlightAll: !accessiblePrefixes,
+ })}
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
index 1eb5b15cd9..d40f8d0302 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -1,5 +1,6 @@
import { useCallback } from 'react'
import { useParams } from 'next/navigation'
+import { formatDisplayText } from '@/components/ui/formatted-text'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
@@ -14,6 +15,7 @@ import { Switch } from '@/components/ui/switch'
import { Textarea } from '@/components/ui/textarea'
import { cn } from '@/lib/utils'
import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
+import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
import { useMcpTools } from '@/hooks/use-mcp-tools'
import { formatParameterLabel } from '@/tools/params'
@@ -37,6 +39,7 @@ export function McpDynamicArgs({
const { mcpTools } = useMcpTools(workspaceId)
const [selectedTool] = useSubBlockValue(blockId, 'tool')
const [toolArgs, setToolArgs] = useSubBlockValue(blockId, subBlockId)
+ const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
const selectedToolConfig = mcpTools.find((tool) => tool.id === selectedTool)
const toolSchema = selectedToolConfig?.inputSchema
@@ -180,7 +183,7 @@ export function McpDynamicArgs({
case 'long-input':
return (
-
+