feat(drag-and-drop): implement workspace item drag-and-drop functiona…

[zhangmo8]

…lity and reference insertion

20260331_162142.mp4

Summary by CodeRabbit

• New Features

  • Added drag-and-drop support: users can now drag workspace files and folders directly into the chat input box for seamless reference insertion.
  • Improved workspace file reference formatting in chat mentions to use a consistent reference format.
  • Added visual feedback for draggable items with cursor styling to indicate drag availability.

• Tests

  • Added comprehensive test coverage for workspace drag-and-drop functionality and file node dragging behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 74066e23-ea5c-4a51-88ac-e628470329d6

📥 Commits

Reviewing files that changed from the base of the PR and between b3644b6 and 817fd9d.

📒 Files selected for processing (6)

• src/renderer/src/components/chat/ChatInputBox.vue
• src/renderer/src/components/chat/composables/useChatInputMentions.ts
• src/renderer/src/components/workspace/WorkspaceFileNode.vue
• src/renderer/src/lib/chatInputWorkspaceReference.ts
• test/renderer/components/ChatInputBox.test.ts
• test/renderer/components/WorkspaceFileNode.test.ts

---

📝 Walkthrough

Walkthrough

This PR introduces drag-and-drop support for workspace file nodes into the chat input box. Users can now drag files and folders from the workspace tree and drop them as workspace references in the chat input. A new utility module handles the custom drag payload format and reference text generation, with updates to chat input components, file mention suggestions, and corresponding tests.

Changes

Cohort / File(s)	Summary
Workspace Reference Utilities src/renderer/src/lib/chatInputWorkspaceReference.ts	New module providing MIME type constant, drag payload interface, and functions to serialize/deserialize drag data, resolve workspace reference paths, and build reference text strings.
Chat Input Drop/Drag Handling src/renderer/src/components/chat/ChatInputBox.vue, src/renderer/src/components/chat/composables/useChatInputMentions.ts	Enhanced drop handling in ChatInputBox to prioritize workspace item drag data before file drops; updated mention suggestions to use centralized reference path and text builders.
Workspace Node Drag Support src/renderer/src/components/workspace/WorkspaceFileNode.vue	Added draggable="true" and @dragstart handler to serialize workspace node metadata (path and isDirectory) into the custom drag payload format.
Tests test/renderer/components/ChatInputBox.test.ts, test/renderer/components/WorkspaceFileNode.test.ts	Extended ChatInputBox drop test to verify workspace item drag handling; added new test file validating WorkspaceFileNode drag-start payload serialization.

Sequence Diagram

sequenceDiagram
    actor User
    participant WorkspaceFileNode
    participant DataTransfer as Drag Payload
    participant ChatInputBox
    participant TipTap as TipTap Editor

    User->>WorkspaceFileNode: dragstart on file node
    WorkspaceFileNode->>DataTransfer: setChatInputWorkspaceItemDragData()<br/>(path, isDirectory)
    DataTransfer->>DataTransfer: Store via custom MIME type
    
    User->>ChatInputBox: dragover on input
    ChatInputBox->>ChatInputBox: onDragOver()<br/>preventDefault() & set dropEffect
    
    User->>ChatInputBox: drop on input
    ChatInputBox->>DataTransfer: getChatInputWorkspaceItemDragData()
    DataTransfer-->>ChatInputBox: Parsed payload (path, isDirectory)
    ChatInputBox->>ChatInputBox: buildChatInputWorkspaceReferenceText()
    ChatInputBox->>ChatInputBox: resolveChatInputWorkspaceReferencePath()
    ChatInputBox->>TipTap: insertContent(`@workspace/path` )
    TipTap->>TipTap: Insert reference into editor

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Poem

🐰 With whiskers twitching at each file,
I drag them swift with rabbit style!
From workspace tree to chat they glide,
With @ signs as my faithful guide.
Now references hop without a care—
Workspace drops fill the chat air! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(drag-and-drop): implement workspace item drag-and-drop functionality and reference insertion' accurately describes the main change—adding drag-and-drop support for workspace items with reference insertion in the chat input.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch dnd-workspace

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}