Conversation
Walkthrough此次提交主要调整了图片上传及粘贴处理功能。ChatMentionInput 组件中将图片上传的处理函数从接收单个文件改为接收文件数组，并采用 Promise.all 进行并行上传，同时更新组件状态。MentionInput 组件的 paste 事件处理逻辑也被修改为异步方式，提取所有图片文件后再调用上传函数。此外，类型声明中对应的 onImageUpload 方法签名也已更新，支持接收多个文件和返回 Promise。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant CI as ChatMentionInput
participant HU as handleImageUpload
participant PA as Promise.all
participant S as 组件状态
U->>CI: 选择图片文件
CI->>HU: 调用 handleImageUpload([file])
HU->>HU: 验证并过滤文件
HU->>PA: 异步上传所有有效文件
PA-->>HU: 返回上传结果数组
HU->>S: 更新状态，合并新上传图片
sequenceDiagram
participant U as 用户
participant MI as MentionInput
participant HP as handlePaste
participant IU as onImageUpload
participant S as 组件状态
U->>MI: 粘贴内容
MI->>HP: handlePaste 触发
HP->>HP: 提取剪贴板中所有图片文件
HP->>IU: 异步调用 onImageUpload([files])
IU-->>HP: 完成图片上传
HP->>MI: 继续处理文本内容，更新状态
Possibly related PRs
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
yarn install v1.22.22 Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/ai-native/src/browser/components/ChatMentionInput.tsx (1)
300-322: 多图上传处理逻辑实现良好该实现正确处理了多图上传功能，包括类型验证和并行上传处理。使用
Promise.all进行并行上传是提高性能的好方法。建议将文件类型验证逻辑提取到单独的函数中，以提高代码重用性和可读性：
- // Validate file types - const invalidFiles = files.filter((file) => !allowedTypes.includes(file.type)); - if (invalidFiles.length > 0) { - messageService.error('Only JPG, PNG, WebP and GIF images are supported'); - return; - } + // Validate file types + const validateImageFiles = (files: File[], allowedTypes: string[]) => { + const invalidFiles = files.filter((file) => !allowedTypes.includes(file.type)); + if (invalidFiles.length > 0) { + messageService.error('Only JPG, PNG, WebP and GIF images are supported'); + return false; + } + return true; + }; + + if (!validateImageFiles(files, allowedTypes)) { + return; + }packages/ai-native/src/browser/components/mention-input/mention-input.tsx (1)
451-472: 粘贴事件处理支持多图上传异步处理粘贴事件并支持多图同时上传的实现是很好的改进。
有两点可以进一步优化：
可以在粘贴处理程序中添加图片类型验证，与
ChatMentionInput.tsx中的验证保持一致。考虑当剪贴板同时包含图片和文本时的处理。目前的实现在上传图片后会立即返回，这可能会阻止文本内容的粘贴。
// 处理所有收集到的图片 if (imageFiles.length > 0 && onImageUpload) { await onImageUpload(imageFiles); - return; } const text = e.clipboardData.getData('text/plain'); + // 只有当有文本内容且没有图片或已处理完图片时才处理文本 + if (text) { // 处理文本，保留换行和缩进 const processedText = text .replace(/\t/g, ' ') .replace(/\n\s*\n/g, '\n\n') .replace(/[ \t]+$/gm, ''); // ... 文本处理逻辑 ... + }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
packages/ai-native/src/browser/components/ChatMentionInput.tsx(3 hunks)packages/ai-native/src/browser/components/mention-input/mention-input.tsx(1 hunks)packages/ai-native/src/browser/components/mention-input/types.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: build (ubuntu-latest, 20.x)
- GitHub Check: build-windows
- GitHub Check: build (macos-latest, 20.x)
- GitHub Check: unittest (ubuntu-latest, 18.x, node)
- GitHub Check: unittest (macos-latest, 18.x, jsdom)
- GitHub Check: unittest (ubuntu-latest, 18.x, jsdom)
- GitHub Check: unittest (macos-latest, 18.x, node)
- GitHub Check: ubuntu-latest, Node.js 20.x
🔇 Additional comments (2)
packages/ai-native/src/browser/components/mention-input/types.ts (1)
79-79: 接口变更适应多图上传功能更新的
onImageUpload方法签名现在接受文件数组File[]并返回Promise<void>，很好地支持了多图上传的新功能。packages/ai-native/src/browser/components/ChatMentionInput.tsx (1)
266-266: 使用数组包装单个文件适应新的接口现在使用数组
[file]包装单个文件来调用handleImageUpload，匹配了更新后的方法签名。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4483 +/- ##
=======================================
Coverage 53.14% 53.14%
=======================================
Files 1665 1665
Lines 102628 102628
Branches 22221 22221
=======================================
+ Hits 54537 54538 +1
+ Misses 40008 40007 -1
Partials 8083 8083
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
Types
Background or solution
feat: support upload multiple images
Changelog
feat: support upload multiple images
Summary by CodeRabbit