feat(chat): drag workflows and folders from sidebar into chat input#4028
feat(chat): drag workflows and folders from sidebar into chat input#4028waleedlatif1 merged 15 commits intostagingfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryMedium Risk Overview Extends the resource model to include Refactors workflow color ring styling by centralizing the border alpha logic in Reviewed by Cursor Bugbot for commit e471b2e. Configure here. |
...paceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
Show resolved
Hide resolved
Greptile SummaryThis PR adds drag-and-drop support so users can drag workflows, folders, and past chat items from the sidebar directly into the chat input — equivalent to tagging with Key changes:
Confidence Score: 5/5Safe to merge — the previously reported P0/P1 issues (stale ref after batch drop, intentional folder/past_chat omission) are resolved. Only two minor P2 findings remain. Both stale-ref issues flagged in previous rounds are fixed. The only remaining findings are: (1) ghost element not cleaned up on component unmount — an edge-case leak that has no user-visible impact under normal usage, and (2) the removal of the #888 workflow-icon fallback in user-input.tsx — a cosmetic regression only visible when a workflow isn't in the query cache. Neither blocks shipping. sidebar/utils.ts, workflow-item.tsx, folder-item.tsx, sidebar.tsx — all share the same ghost-element teardown gap on unmount.
|
| Filename | Overview |
|---|---|
| apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts | New file: adds buildDragResources (O(1) map lookup for workflow/folder names from query cache) and createSidebarDragGhost (imperative DOM pill with CSS-variable theming). Ghost cleanup relies entirely on handleDragEnd — missing useEffect teardown in callers means leaks if component unmounts mid-drag. |
| apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx | Core feature integration: adds multi-resource drop handling with SIM_RESOURCES_DRAG_TYPE, eagerly syncs atInsertPosRef so batch drops chain correctly, resets ref after the loop, and guards drag-enter/leave from showing the file overlay on resource drags. Minor regression: workflow icon loses its #888 fallback. |
| apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx | Extends drag start to set SIM_RESOURCES_DRAG_TYPE data and a custom ghost pill; fixes workspaceId/workflow.name/workflow.color missing from useCallback deps; ghost cleanup has same missing-unmount teardown issue as folder-item. |
| apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx | Mirrors workflow-item changes: adds resource drag data, custom ghost, fixes useCallback deps. Ghost not removed on component unmount (only on dragend). |
| apps/sim/app/workspace/[workspaceId]/home/components/context-mention-icon.tsx | New shared component extracted from the duplicated icon-switch logic in user-input and user-message-content; adds past_chat (Blimp icon) case. Clean extraction, well-typed props. |
| apps/sim/app/workspace/[workspaceId]/home/home.tsx | Refactors handleContextAdd to use shared resolveResourceFromContext; adds handleContextRemove for when context chips are removed. folder/past_chat intentionally excluded from resolver (no resource panel UI for those types). |
| apps/sim/lib/copilot/resource-types.ts | Adds task resource type and exports SIM_RESOURCE_DRAG_TYPE / SIM_RESOURCES_DRAG_TYPE constants to replace scattered raw MIME-type strings. |
| apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx | Makes SidebarTaskItem draggable with SIM_RESOURCES_DRAG_TYPE and a custom ghost; same ghost-cleanup gap as other drag items (no unmount teardown). |
| apps/sim/lib/workspaces/colors.ts | Extracts workflowBorderColor(color) helper that converts a hex color to its 38%-alpha border variant, replacing scattered inline template-literal expressions. |
| apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx | Replaces the inline icon-switch block with ContextMentionIcon; now correctly renders past_chat (Blimp) icons. Classes are passed directly to the icon element rather than via a wrapping span — harmless in the flex context. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A["User drags WorkflowItem / FolderItem / SidebarTaskItem"] --> B["handleDragStart"]
B --> C["buildDragResources(selection, workspaceId)\n(reads React Query cache)"]
C --> D["e.dataTransfer.setData\n(SIM_RESOURCES_DRAG_TYPE, JSON)"]
B --> E["createSidebarDragGhost(label, icon)\n(appends to document.body)"]
E --> F["e.dataTransfer.setDragImage(ghost, …)"]
F --> G["User drags over chat input"]
G --> H{"handleContainerDragOver\ntypes.includes SIM_RESOURCE*?"}
H -- yes --> I["e.preventDefault → dropEffect = copy"]
H -- no --> J["handleDragEnter shows file overlay"]
I --> K["User drops on chat input"]
K --> L{"handleContainerDrop\nSIM_RESOURCES_DRAG_TYPE present?"}
L -- yes --> M["JSON.parse → for each resource:\nhandleResourceSelect(resource)\natInsertPosRef chains"]
M --> N["atInsertPosRef.current = null (after batch)"]
L -- no --> O["SIM_RESOURCE_DRAG_TYPE fallback\n(single resource)"]
O --> P["handleResourceSelect(resource)\natInsertPosRef.current = null"]
M --> Q["mapResourceToContext → ChatContext\naddContext → onContextAdd → addResource"]
P --> Q
G --> R["handleDragEnd\nremove ghost from DOM"]
Reviews (5): Last reviewed commit: "fix(chat): guard chatId before adding ta..." | Re-trigger Greptile
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
Show resolved
Hide resolved
…erlay for resource drags
…ion and add workflowBorderColor utility
655cc03 to
7b8fa00
Compare
|
@greptile |
|
@cursor review |
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
Show resolved
Hide resolved
apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts
Outdated
Show resolved
Hide resolved
…istingResourceKeys, and use workflowBorderColor in drag ghost
… panel UI for these types
|
@greptile |
|
@cursor review |
...Id]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
Outdated
Show resolved
Hide resolved
…rag callback deps
|
@greptile |
|
@cursor review |
apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
Outdated
Show resolved
Hide resolved
|
@greptile |
|
@cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit e471b2e. Configure here.
Summary
Type of Change
Testing
Tested manually — dragged single workflow, single folder, and multi-selection into chat; all tagged correctly in sequence.
Checklist