Skip to content

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

Merged
waleedlatif1 merged 15 commits intostagingfrom
feat/chat-drag-drop-resources
Apr 8, 2026
Merged

feat(chat): drag workflows and folders from sidebar into chat input#4028
waleedlatif1 merged 15 commits intostagingfrom
feat/chat-drag-drop-resources

Conversation

@waleedlatif1
Copy link
Copy Markdown
Collaborator

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
Copy link
Copy Markdown

vercel bot commented Apr 8, 2026

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

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

Request Review

@cursor
Copy link
Copy Markdown

cursor bot commented Apr 8, 2026

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
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Apr 8, 2026

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 waleedlatif1 force-pushed the feat/chat-drag-drop-resources branch from 655cc03 to 7b8fa00 Compare April 8, 2026 02:01
@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

…istingResourceKeys, and use workflowBorderColor in drag ghost
@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@greptile

@waleedlatif1
Copy link
Copy Markdown
Collaborator Author

@cursor review

Copy link
Copy Markdown

@cursor cursor bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@waleedlatif1 waleedlatif1 merged commit 6c3caf6 into staging Apr 8, 2026
12 checks passed
@waleedlatif1 waleedlatif1 deleted the feat/chat-drag-drop-resources branch April 8, 2026 03:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant