feat(chat): drag workflows and folders from sidebar into chat input

[waleedlatif1]

Summary

• Drag any workflow or folder from the sidebar directly onto the chat input — works the same as tagging it manually with `@` or the `+` menu
• Multi-selection drag supported: select several workflows/folders and drop them all at once
• Added `SIM_RESOURCE_DRAG_TYPE` / `SIM_RESOURCES_DRAG_TYPE` constants to `lib/copilot/resource-types.ts` to replace scattered raw MIME type strings
• Extracted `buildDragResources(selection, workspaceId)` into `sidebar/utils.ts` — shared by both `WorkflowItem` and `FolderItem`, uses O(1) map lookup for workflow names
• Fixed `workspaceId` missing from `useCallback` deps in both drag handlers

Type of Change

• New feature

Testing

Tested manually — dragged single workflow, single folder, and multi-selection into chat; all tagged correctly in sequence.

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Apr 8, 2026 2:53am

[cursor]

PR Summary

Medium Risk
Adds new drag-and-drop pathways and context/resource synchronization in the chat input, which can subtly affect text insertion, selection state, and resource tab behavior. Risk is moderate because changes span multiple interactive UI components but don’t touch auth or server-side data handling.

Overview
Enables dragging items from the workspace sidebar into the chat input to insert @ mentions/resources, including multi-select drag via a new application/x-sim-resources payload and a custom drag-ghost preview.

Extends the resource model to include task and wires task/workflow/folder resources through the add-resource dropdown, resource registry invalidation, and context mapping; the chat input now also emits onContextRemove so removing a mention/context can remove the corresponding resource tab.

Refactors workflow color ring styling by centralizing the border alpha logic in workflowBorderColor() and replaces scattered ${color}60 usages across landing previews, logs, and sidebar UI. Also standardizes drag MIME types via SIM_RESOURCE_DRAG_TYPE/SIM_RESOURCES_DRAG_TYPE constants and improves keyboard UX in the + menu (Tab-to-select).

^{Reviewed by Cursor Bugbot for commit e471b2e. Configure here.}

[greptile-apps]

Greptile Summary

This 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 @ or the + menu. Multi-selection drags (select several items, drop them all) are also supported.

Key changes:

• lib/copilot/resource-types.ts: new SIM_RESOURCE_DRAG_TYPE / SIM_RESOURCES_DRAG_TYPE constants and task resource type replace scattered raw MIME strings
• sidebar/utils.ts: new buildDragResources (O(1) map lookup) and createSidebarDragGhost (imperative DOM pill with CSS-variable theming) are shared by WorkflowItem, FolderItem, and SidebarTaskItem
• user-input.tsx: handles both single (SIM_RESOURCE_DRAG_TYPE) and batch (SIM_RESOURCES_DRAG_TYPE) drops; eagerly syncs atInsertPosRef to chain successive insertions, then resets after the batch; handleDragEnter/handleDragLeave now guard against showing the file-drop overlay during resource drags
• context-mention-icon.tsx: new shared component consolidates the duplicated icon-switch logic from user-input and user-message-content, adding a past_chat → Blimp icon case
• home.tsx: extracts resolveResourceFromContext shared between handleContextAdd and the new handleContextRemove; folder/past_chat are intentionally excluded (no resource panel UI)
• workflowBorderColor() helper centralises the ${color}60 border-alpha pattern used across several components

Confidence Score: 5/5

Safe 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.

Vulnerabilities

No security concerns identified. Drag data is parsed with a try/catch guard and typed as MothershipResource[] before use. No user-supplied input reaches the DOM without sanitisation; the ghost element only sets textContent (not innerHTML) for the label string.

Important Files Changed

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"]

Loading

_{Reviews (5): Last reviewed commit: "fix(chat): guard chatId before adding ta..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

✅ 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.}