Skip to content

feat: 支持从文件树拖拽到输入框生成 ContextMention Chip#159

Closed
gy212 wants to merge 1 commit intoop7418:mainfrom
gy212:feat/filetree-dnd-context-mention
Closed

feat: 支持从文件树拖拽到输入框生成 ContextMention Chip#159
gy212 wants to merge 1 commit intoop7418:mainfrom
gy212:feat/filetree-dnd-context-mention

Conversation

@gy212
Copy link
Contributor

@gy212 gy212 commented Mar 4, 2026

变更说明

本 PR 为文件树拖拽交互补全:支持从 FileTree 拖拽文件/目录MessageInput,并生成 ContextMention Chip。

主要改动

  • src/components/ai-elements/file-tree.tsx 增加拖拽源能力
    • 文件、目录节点均支持 draggable
    • onDragStart 写入自定义 MIME:application/x-codepilot-path(及回退类型)
  • src/components/chat/MessageInput.tsx 增加拖拽目标和上下文 chip 流程
    • 识别文件树自定义拖拽 MIME
    • Drop 后新增 contextMentions 状态(按路径去重)
    • 渲染 ContextMentionChips(可移除)
    • 发送时自动将 mentions 作为 @路径 前缀拼接到消息
    • 仅有 context mentions 时发送按钮可用

兼容性

  • 保留原有 + 按钮“添加附件到聊天”的通路
  • 此 PR 仅涉及 2 个文件,不改动后端接口

验证

  • 本地执行:
    • npm run lint -- src/components/chat/MessageInput.tsx src/components/ai-elements/file-tree.tsx
  • 结果:通过(仅有既有 warning,无 error)

Copy link
Owner

@op7418 op7418 left a comment

Choose a reason for hiding this comment

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

Good feature PR — the drag-and-drop implementation is solid. A few notes:

Positives

  • Clean MIME type approach (application/x-codepilot-path + text/x-codepilot-path fallback) — robust cross-browser
  • Path deduplication in addContextMention prevents duplicate chips
  • Native DOM event listeners on the drop zone (via useEffect) correctly prevent the browser's default text-insert behavior
  • readFileTreeDropData has proper JSON parse error handling
  • The onAttachFailed fallback (appending @path as text) is a nice graceful degradation
  • Chip color coding by file type is a thoughtful UX detail
  • mimeFromFilename improvement (falling back to text/plain instead of application/octet-stream) is independently useful

Issues to address

1. grid-cols-5 for ContextMentionChips is too rigid

The chip grid uses grid-cols-5 which means 5 columns regardless of window width. On narrow panels, chips will be compressed. On wide panels, the grid wastes space with few items. Consider using flex flex-wrap instead, or at minimum grid-cols-2 sm:grid-cols-3 md:grid-cols-5.

2. appendPathMention is unused/dead code

The appendPathMention callback is defined but only passed to FileTreeAttachmentBridge as onAttachFailed. However, looking at the implementation, when attachment fails it appends raw @path text to the input. This seems like it should add a context mention chip instead (via addContextMention). If the intent is to fall back to text mentions when file read fails, that's fine, but clarify.

3. Missing nanoid import

The addContextMention callback uses nanoid() but I don't see it imported in the diff. If it's already imported in the file, fine. If not, this will fail at runtime.

4. No i18n for chip UI

The drag-and-drop chip UI has no translatable strings (the chip itself only shows the filename), but the "Add to chat" title and any future tooltips should use i18n. Minor — not blocking.

5. hasDragType over-engineering

The hasDragType function handles includes, contains, and Array.from fallbacks. In modern browsers (which Electron guarantees), dataTransfer.types is always a DOMStringList with contains() or an array with includes(). The triple fallback is unnecessary but harmless.

Verdict

Solid implementation overall. The grid-cols-5 issue (#1) and the nanoid import (#3) are the most important items to verify. Otherwise, approve after minor fixes.

@gy212 gy212 closed this Mar 5, 2026
@gy212 gy212 deleted the feat/filetree-dnd-context-mention branch March 5, 2026 04:23
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.

2 participants