feat(deployed-chat): added file upload to workflow execute API, added to deployed chat, updated chat panel#1588
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Overview
Summary
This PR implements comprehensive file upload functionality across the entire workflow platform, enabling users to attach and process files through the workflow execute API, deployed chat interfaces, and the chat panel. The implementation adds 'files' as a new primitive value type throughout the type system, allowing workflows to handle file data as a first-class data type alongside strings, numbers, and other primitives.The changes span multiple layers of the application architecture:
Type System Foundation: The core type system is extended with a new 'files' primitive type, enabling proper type safety and autocompletion for file handling throughout the block system. This foundational change allows blocks to define file inputs/outputs and provides structured access to file properties like URL, name, size, type, and timestamps.
API Layer: The workflow execute API now processes files from input payloads, supporting both base64-encoded files and URL references. Files are validated (20MB limit), uploaded to execution-scoped cloud storage (S3/Azure Blob), and converted to UserFile objects that workflows can process. The deployed chat API extends this functionality to handle file attachments alongside text messages.
SDK Integration: Both Python and TypeScript SDKs are updated with automatic file detection and conversion capabilities. The SDKs transparently handle File objects by converting them to base64 format before transmission, maintaining a seamless developer experience while supporting the API's expected data structure.
User Interface: The chat panel and deployed chat interfaces receive comprehensive file upload UIs including drag-and-drop support, file validation (5 file limit, 10MB max), image preview thumbnails, and proper error handling. The implementation includes visual feedback systems and integrates with existing chat message structures through optional attachment arrays.
Documentation: Extensive documentation updates across API trigger docs, chat trigger docs, and SDK documentation provide clear examples and reference materials for developers using the new file upload capabilities. The documentation includes detailed property access patterns and practical code examples.
The implementation maintains backward compatibility throughout, using optional parameters and conditional rendering to ensure existing functionality remains unaffected while enabling rich file-based workflow interactions.
Important Files Changed
Changed Files
| Filename | Score | Overview |
|---|---|---|
| apps/sim/blocks/types.ts | 5/5 | Added 'files' as new primitive value type to support file uploads |
| apps/sim/app/api/workflows/[id]/execute/route.ts | 4/5 | Added file upload processing to workflow execute API with validation and error handling |
| apps/sim/app/api/workflows/utils.ts | 4/5 | Added file processing utilities for base64 and URL file handling |
| apps/sim/app/api/chat/[identifier]/route.ts | 4/5 | Extended deployed chat API to support file uploads alongside text messages |
| apps/sim/app/api/chat/utils.ts | 4/5 | Added processChatFiles function for handling file uploads in chat contexts |
| packages/python-sdk/simstudio/init.py | 4/5 | Added automatic file detection and base64 conversion for Python SDK |
| packages/ts-sdk/src/index.ts | 4/5 | Added file upload support with automatic File object conversion |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/chat.tsx | 4/5 | Major UI overhaul adding comprehensive file upload functionality to chat panel |
| apps/sim/app/chat/[identifier]/chat.tsx | 4/5 | Added file upload support to deployed chat interface |
| apps/sim/app/chat/components/input/input.tsx | 4/5 | Added file attachment functionality to chat input component |
| apps/sim/components/ui/tag-dropdown.tsx | 4/5 | Updated to handle file properties with automatic array indexing |
| apps/sim/lib/workflows/block-outputs.ts | 4/5 | Changed files output type from 'array' to 'files' and added file property handling |
| apps/sim/stores/panel/chat/types.ts | 4/5 | Added ChatAttachment interface and file support to chat message system |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/chat/components/chat-message/chat-message.tsx | 4/5 | Added file attachment rendering to chat messages |
| apps/sim/app/chat/components/message/message.tsx | 4/5 | Added file attachment support to deployed chat messages |
| apps/docs/content/docs/en/triggers/api.mdx | 4/5 | Added comprehensive file upload documentation for API triggers |
| packages/ts-sdk/README.md | 4/5 | Added detailed file upload documentation with examples |
| apps/sim/executor/handlers/response/response-handler.ts | 5/5 | Added 'files' type support to response handler with pass-through behavior |
| apps/sim/blocks/blocks/chat_trigger.ts | 5/5 | Changed files output type from 'array' to 'files' for proper typing |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/starter/input-format.tsx | 5/5 | Added 'files' type option to workflow input field configuration |
| apps/docs/content/docs/en/triggers/chat.mdx | 5/5 | Updated chat trigger documentation with comprehensive file properties reference |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/deploy-modal.tsx | 5/5 | Added files type support to API example generation |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/deployment-info/components/example-command/example-command.tsx | 5/5 | Improved command display styling with horizontal scrolling |
| apps/sim/app/chat/components/input/voice-input.tsx | 5/5 | Standardized button styling for UI consistency |
| packages/db/index.ts | 5/5 | Removed verbose console logging for cleaner logs |
| packages/python-sdk/README.md | 5/5 | Added comprehensive file upload documentation with examples |
| apps/docs/content/docs/en/sdks/typescript.mdx | 5/5 | Added detailed file upload documentation for TypeScript SDK |
| apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/response/response-format.tsx | 4/5 | Added 'file' type option to response format configuration |
| packages/python-sdk/examples/file_upload.py | 3/5 | Added Python SDK file upload example with hardcoded paths that may not exist |
Confidence score: 4/5
- This PR implements a significant new feature with comprehensive coverage across multiple system layers, but the large scope increases potential for integration issues
- Score reflects the thorough implementation approach and extensive testing mentioned, though some files have potential issues like hardcoded paths in examples
- Pay close attention to the API route handlers and SDK conversion logic as these handle the core file processing functionality
Sequence Diagram
sequenceDiagram
participant User
participant ChatClient
participant ChatAPI
participant WorkflowExecuteAPI
participant FileStorage
participant Executor
participant Database
User->>ChatClient: Send message with file attachments
ChatClient->>ChatClient: Convert files to base64 dataUrls
ChatClient->>ChatAPI: POST /api/chat/{identifier} with input, conversationId, files
ChatAPI->>ChatAPI: Validate authentication
ChatAPI->>FileStorage: Process and upload chat files
FileStorage-->>ChatAPI: Return uploaded file URLs
ChatAPI->>WorkflowExecuteAPI: Execute workflow with files and input
WorkflowExecuteAPI->>WorkflowExecuteAPI: Process API workflow files
WorkflowExecuteAPI->>FileStorage: Upload files to execution storage
FileStorage-->>WorkflowExecuteAPI: Return UserFile objects
WorkflowExecuteAPI->>Executor: Execute workflow with file references
Executor->>Executor: Process workflow blocks
Executor-->>WorkflowExecuteAPI: Return execution result
WorkflowExecuteAPI->>Database: Update run counts and stats
WorkflowExecuteAPI-->>ChatAPI: Stream execution response
ChatAPI-->>ChatClient: Stream response via SSE
ChatClient->>ChatClient: Display streamed content
ChatClient->>User: Show workflow output
Additional Comments (2)
-
apps/docs/content/docs/en/sdks/typescript.mdx, line 682-684 (link)syntax: There appears to be a stray code block closing and misplaced JavaScript comment here that should be removed
-
apps/sim/app/chat/components/message/message.tsx, line 204-211 (link)logic: memo comparison missing attachments field - this will cause unnecessary re-renders when only attachments change
29 files reviewed, 17 comments
… checks in api/workflows
waleedlatif1
force-pushed
the
feat/deployed-chat
branch
from
9fce280 to
876b397
Compare
… to deployed chat, updated chat panel (#1588) * feat(deployed-chat): updated chat panel UI, deployed chat and API can now accept files * added nested tag dropdown for files * added duplicate file validation to chat panel * update docs & SDKs * fixed build * rm extraneous comments * ack PR comments, cut multiple DB roundtrips for permissions & api key checks in api/workflows * allow read-only users to access deployment info, but not take actions * add downloadable file to logs for files passed in via API * protect files/serve route that is only used client-side --------- Co-authored-by: waleed <waleed>
1 participant
Summary
Type of Change
Testing
Tested everything manually, via API, via deployed chat, via chat panel. Accessed various attributes in the workflow itself to make sure we can access file attributes.
Checklist