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

[gy212]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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]

变更说明

本 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）

[op7418]

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.