feat(use-x-chat): add updating status #833
Conversation
📝 Walkthrough""" Walkthrough本次变更在 useXChat 组件中，为消息状态 MessageStatus 新增了 'updating' 状态，并在流式返回期间（onUpdate 回调）将消息状态从 'loading' 改为 'updating'，以便更精确地区分消息加载与更新阶段。其余逻辑未发生变化。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant useXChat
participant Agent
User->>useXChat: 发起消息请求
useXChat->>Agent: 调用 agent.request
Agent-->>useXChat: onUpdate(流式返回)
useXChat->>useXChat: updateMessage(status: 'updating')
Agent-->>useXChat: onSuccess/完成
useXChat->>useXChat: updateMessage(status: 'success')
Assessment against linked issues
Suggested reviewers
Poem
""" Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ Context from checks skipped due to timeout of 90000ms (2)
✨ Finishing Touches
🧪 Generate Unit Tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
|
|
WalkthroughThis pull request introduces a new feature to the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -8,7 +8,7 @@ import useSyncState from './useSyncState'; | |||
|
|
|||
| export type SimpleType = string | number | boolean | object; | |||
|
|
|||
| export type MessageStatus = 'local' | 'loading' | 'success' | 'error'; | |||
| export type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error'; | |||
There was a problem hiding this comment.
The addition of the updating status to the MessageStatus type is a critical change that allows for more precise tracking of message states during updates. Ensure that all parts of the codebase that rely on MessageStatus are updated accordingly to handle this new status.
Bundle ReportBundle size has no change ✅ |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/use-x-chat/index.ts (1)
11-11: 添加了新的消息状态类型将
MessageStatus类型扩展为包含 'updating' 状态，有助于更精确地区分消息的不同阶段。这是一个公共类型的变更，可能需要在文档或 changelog 中说明此变化。使用新的 'updating' 状态可以帮助 UI 层区分初始加载和内容更新阶段，提供更精细的用户体验。
建议在 changelog 中明确记录这个类型变更，以便使用者了解新增状态的用途。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/use-x-chat/index.ts(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build preview
- GitHub Check: test / react component workflow
- GitHub Check: size
🔇 Additional comments (2)
components/use-x-chat/index.ts (2)
181-181: 代码简化改进将多行条件检查简化为单行表达式，保持了相同的逻辑功能，同时提高了代码的可读性。这是一个良好的重构实践。
1-300: 整体评估：功能增强和状态区分此变更通过添加新的消息状态 'updating' 并在流式返回期间使用该状态，提高了组件状态管理的精确度。这种区分有助于 UI 层提供更精细的反馈。
变更范围相对集中且影响可控，主要是在消息状态类型和状态更新逻辑上。考虑到这是一个公共 API 的变更，建议：
- 在文档中明确新状态的用途和使用场景
- 确认是否需要调整依赖消息状态的其他逻辑（如过滤函数）
- 在 changelog 中记录这一变更
请确认消息状态变更是否会影响依赖此组件的现有功能，特别是那些基于消息状态进行条件渲染或逻辑处理的组件。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #833 +/- ##
==========================================
- Coverage 92.35% 92.34% -0.02%
==========================================
Files 66 66
Lines 1492 1490 -2
Branches 388 401 +13
==========================================
- Hits 1378 1376 -2
Misses 114 114 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/use-x-chat/demo/stream.tsx (1)
49-49: 确保UI正确反映新的'updating'状态当前实现仅为
'loading'状态的消息设置了加载指示器。根据学习内容，'updating'状态的消息应被视为正常内容返回，这与当前实现一致。但考虑到PR的目标是引入'updating'状态以区分消息加载与更新阶段，可能需要考虑是否应该为'updating'状态的消息提供某种视觉指示。建议修改为：
- loading: status === 'loading', + loading: status === 'loading', + updating: status === 'updating',并在组件中适当处理
updating属性，以便用户能够区分消息的加载状态和更新状态。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/use-x-chat/demo/stream.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: wzc520pyfm
PR: ant-design/x#833
File: components/use-x-chat/index.ts:256-256
Timestamp: 2025-05-17T05:29:02.470Z
Learning: 在 'use-x-chat' 组件中，'updating' 状态的消息应被视为正常的内容返回，不应被过滤掉。与 'loading' 和 'error' 状态不同，'updating' 状态代表内容正在更新的中间状态，但仍然是有效内容。
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: test / react component workflow
- GitHub Check: build preview
- GitHub Check: size
| @@ -46,6 +46,7 @@ const App = () => { | |||
| style={{ maxHeight: 300 }} | |||
| items={messages.map(({ id, message, status }) => ({ | |||
| key: id, | |||
| loading: status === 'loading', | |||
There was a problem hiding this comment.
该pr之后，流式输出和非流式输出可以使用相同的方式设置bubble loading
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
Close #832 .
💡 Background and Solution
之前的行为：
使用流式返回时，消息更新的回调（onUpdate）status为
loadingpr改动：
使用流式返回时，消息更新的回调（onUpdate）设置status为
updating而不是loading，以此区分开loading和updating。这样，流式返回和非流式返回就可以使用相同的方式设置bubble loading：
📝 Change Log
Summary by CodeRabbit
新功能
测试