fix: useXAgent & x-request's XRequestOptions chenge #736
Conversation
change codesandbox link of AntDesignX
docs: 更新Attachments文档
📝 WalkthroughWalkthrough本次变更主要围绕 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DemoComponent as Demo (request-options.tsx)
participant XRequest/XAgent
User->>DemoComponent: 点击“变更配置”按钮
DemoComponent->>DemoComponent: 切换 baseURL/model/API key
User->>DemoComponent: 点击“发起请求”按钮
DemoComponent->>XRequest/XAgent: 以当前配置发起请求（支持流式）
XRequest/XAgent-->>DemoComponent: 返回流式响应/错误
DemoComponent->>DemoComponent: 更新状态与 UI 展示
Suggested reviewers
Poem
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
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 (
|
|
|
WalkthroughThis pull request addresses a bug fix related to the Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
Bundle ReportBundle size has no change ✅ |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #736 +/- ##
==========================================
- Coverage 92.14% 92.12% -0.03%
==========================================
Files 66 66
Lines 1464 1460 -4
Branches 393 391 -2
==========================================
- Hits 1349 1345 -4
Misses 115 115 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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 (6)
components/use-x-agent/demo/request-options.md (1)
1-7: 文档描述清晰明了，但英文版本中使用了中文标点符号文档内容简洁地说明了如何控制和动态修改 XRequestOptions 的配置项，包括 baseURL、model 和 API key，信息传达清晰。但请注意英文版本使用了中文逗号（，）而不是英文逗号（,）。
建议将英文版本中的标点符号纠正为英文标点:
-Control change `XRequestOptions`，dynamically modify configuration items such as baseURL, model, and API key. +Control change `XRequestOptions`, dynamically modify configuration items such as baseURL, model, and API key.components/use-x-agent/demo/request-options.tsx (2)
8-16: 注意 API 密钥安全性问题示例中使用了明文 API 密钥，这在实际应用中存在安全风险。虽然有相关警告注释，但建议增强安全提示。
- /** 🔥🔥 Its dangerously! */ + /** + * 🔥🔥 危险！永远不要在客户端代码中硬编码 API 密钥！ + * 这仅用于演示目的。在生产环境中，应通过安全的后端服务处理 API 请求。 + */
45-65: Agent 请求实现与回调处理请求函数实现了流式响应处理，并通过回调更新状态。但有一个细节需要注意：
在开始新请求前应该重置 lines 和 error 状态，确保界面不显示上一次请求的残留信息：
async function request() { setStatus('pending'); + setLines([]); + setError(undefined); agent.request( { messages: [{ role: 'user', content: 'hello, who are u?' }], stream: true, }, { onSuccess: () => { setStatus('success'); }, onError: (error) => { setStatus('error'); setError(error); }, onUpdate: (msg) => { setLines((pre) => [...pre, msg]); }, }, ); }components/x-request/demo/request-options.tsx (3)
8-25: 配置和初始化状态示例配置和状态初始化合理，但关于 API 密钥的安全提示可以进一步加强。
- /** 🔥🔥 Its dangerously! */ + /** + * 🔥🔥 危险！永远不要在客户端代码中硬编码 API 密钥！ + * 这仅用于演示目的。在生产环境中，应通过安全的后端服务处理 API 请求。 + */
29-51: 请求功能实现请求实现包含完整的状态管理和错误处理，但存在日志调试代码。
onError: (error) => { setError(error); - console.log(error.message, 11); setStatus('error'); },
72-72: 按钮文本不一致按钮的文本内容与其功能不匹配，应修改为"发送请求"而非"Agent 请求"，因为这是 XRequest 而不是 Agent 的示例。
- Agent Request + 发送请求
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/use-x-agent/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snapcomponents/x-request/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (12)
components/use-x-agent/demo/preset.md(1 hunks)components/use-x-agent/demo/request-options.md(1 hunks)components/use-x-agent/demo/request-options.tsx(1 hunks)components/use-x-agent/index.en-US.md(1 hunks)components/use-x-agent/index.ts(2 hunks)components/use-x-agent/index.zh-CN.md(1 hunks)components/x-request/__tests__/index.test.tsx(0 hunks)components/x-request/demo/request-options.md(1 hunks)components/x-request/demo/request-options.tsx(1 hunks)components/x-request/index.en-US.md(1 hunks)components/x-request/index.ts(2 hunks)components/x-request/index.zh-CN.md(1 hunks)
💤 Files with no reviewable changes (1)
- components/x-request/tests/index.test.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
components/use-x-agent/demo/request-options.tsx (1)
components/use-x-agent/index.ts (1)
useXAgent(84-103)
🔇 Additional comments (19)
components/use-x-agent/index.ts (1)
84-101: 修复了配置变更不生效的问题，非常好的改进将 useMemo 的依赖数组从空数组
[]修改为[config]，确保了当配置对象发生变化时，XAgent 实例会被重新计算。这解决了 #413 和 #536 中提到的配置变更不生效的问题。components/x-request/index.ts (2)
94-94: 导出 XRequestClass 类，增加了库的灵活性将 XRequestClass 从非导出类改为导出类，使得开发者可以直接使用这个类，增加了库的灵活性和可扩展性。
115-119: 移除实例缓存机制，确保配置更新能够正确应用移除了实例缓存机制，现在
init静态方法每次调用都会返回一个新的 XRequestClass 实例，不再复用之前创建的实例。这确保了当配置更新时，新的配置能够正确应用，修复了 PR 中提到的问题。components/use-x-agent/demo/preset.md (2)
3-3: 标点符号修正修正了句尾缺少句号的问题，提高了文档的规范性。
7-7: 标点符号修正修正了英文描述句尾缺少句号的问题，提高了文档的规范性。
components/use-x-agent/index.zh-CN.md (1)
24-24: 新增“变更配置”示例提升了文档实用性，内容无误。该示例有助于用户理解如何动态控制 XRequestOptions，建议保留。
components/x-request/index.en-US.md (1)
24-24: 新增“Control XRequestOptions”示例提升了英文文档的完整性。该示例便于用户了解如何动态控制请求配置，建议保留。
components/x-request/index.zh-CN.md (1)
25-25: 新增“变更配置”示例提升了文档的实用性。该示例便于用户了解如何动态控制请求配置，建议保留。
components/use-x-agent/index.en-US.md (1)
23-23: 新增“Control XRequestOptions”示例提升了英文文档的完整性。该示例便于用户了解如何动态控制请求配置，建议保留。
components/x-request/demo/request-options.md (1)
1-8: 中英文说明简洁明了，内容准确。该文档有助于用户快速理解动态配置 XRequestOptions 的能力，建议保留。
components/use-x-agent/demo/request-options.tsx (5)
1-6: 导入相关依赖导入了必要的图标、组件和钩子函数，包括
ThoughtChain和useXAgent从@ant-design/x中导入，以及其他 Ant Design 组件。
17-34: 初始化 React 组件与状态组件正确设置了必要的状态变量和 useXAgent 钩子，并根据当前 requestOptions 创建了 agent 实例。这是动态更新配置的关键部分，体现了此 PR 修复的问题。
36-43: 切换请求选项功能实现
changeBaseData函数能够在不同的配置间切换，很好地展示了动态配置变更功能。
67-107: 用户界面实现界面使用 Splitter 和 Flex 组件构建了清晰的布局，并通过 ThoughtChain 组件展示请求状态和结果。UI 交互设计合理，禁用了进行中请求的按钮。
109-112: 组件导出组件正确导出为默认导出。
components/x-request/demo/request-options.tsx (4)
1-7: 导入相关依赖导入了必要的组件和库，结构清晰。
27-27: XRequest 实例创建每次 requestOptions 改变时都会创建新的 XRequest 实例，这正确演示了此 PR 修复的核心问题 - 确保配置更新能够正确应用。
62-101: 用户界面实现界面实现合理，使用 Splitter 和 ThoughtChain 组件展示了配置和请求状态。按钮交互逻辑设置正确。
103-106: 组件导出组件正确导出为默认导出。
| const changeBaseData = () => { | ||
| setRequestOptions((pre) => ({ | ||
| baseURL: BASE_URL, | ||
| model: pre.model === MODEL ? 'gpt-4' : MODEL, | ||
| dangerouslyApiKey: | ||
| pre.dangerouslyApiKey === API_KEY ? 'Bearer sk-your-new-dangerouslyApiKey' : API_KEY, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
配置切换功能
changeBaseData 函数实现了配置切换，但注意 baseURL 没有进行动态切换，而是始终设回 BASE_URL 常量。
const changeBaseData = () => {
setRequestOptions((pre) => ({
- baseURL: BASE_URL,
+ baseURL: pre.baseURL === BASE_URL ? 'https://api.example.com/chat/v2' : BASE_URL,
model: pre.model === MODEL ? 'gpt-4' : MODEL,
dangerouslyApiKey:
pre.dangerouslyApiKey === API_KEY ? 'Bearer sk-your-new-dangerouslyApiKey' : API_KEY,
}));
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const changeBaseData = () => { | |
| setRequestOptions((pre) => ({ | |
| baseURL: BASE_URL, | |
| model: pre.model === MODEL ? 'gpt-4' : MODEL, | |
| dangerouslyApiKey: | |
| pre.dangerouslyApiKey === API_KEY ? 'Bearer sk-your-new-dangerouslyApiKey' : API_KEY, | |
| })); | |
| }; | |
| const changeBaseData = () => { | |
| setRequestOptions((pre) => ({ | |
| baseURL: pre.baseURL === BASE_URL ? 'https://api.example.com/chat/v2' : BASE_URL, | |
| model: pre.model === MODEL ? 'gpt-4' : MODEL, | |
| dangerouslyApiKey: | |
| pre.dangerouslyApiKey === API_KEY ? 'Bearer sk-your-new-dangerouslyApiKey' : API_KEY, | |
| })); | |
| }; |
🤔 This is a ...
useXAgent 和 x-request 基础配置变更不生效问题。
#413
#536
Summary by CodeRabbit
新功能
文档
修复与优化
测试