Conversation
op7418
left a comment
There was a problem hiding this comment.
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-pathfallback) — robust cross-browser - Path deduplication in
addContextMentionprevents duplicate chips - Native DOM event listeners on the drop zone (via
useEffect) correctly prevent the browser's default text-insert behavior readFileTreeDropDatahas proper JSON parse error handling- The
onAttachFailedfallback (appending@pathas text) is a nice graceful degradation - Chip color coding by file type is a thoughtful UX detail
mimeFromFilenameimprovement (falling back totext/plaininstead ofapplication/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.
变更说明
本 PR 为文件树拖拽交互补全:支持从
FileTree拖拽文件/目录到MessageInput,并生成ContextMentionChip。主要改动
src/components/ai-elements/file-tree.tsx增加拖拽源能力draggableonDragStart写入自定义 MIME:application/x-codepilot-path(及回退类型)src/components/chat/MessageInput.tsx增加拖拽目标和上下文 chip 流程contextMentions状态(按路径去重)ContextMentionChips(可移除)@路径前缀拼接到消息兼容性
+按钮“添加附件到聊天”的通路验证
npm run lint -- src/components/chat/MessageInput.tsx src/components/ai-elements/file-tree.tsx