القائمة
专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理等
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | use-x-chat |
| version | 2.5.0 |
| description | 专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理等 |
核心定位：使用
useXChatHook 构建专业级 AI 对话应用 前置要求：已具备自定义 Chat Provider（参考 x-chat-provider 技能）
如果检测到版本不匹配，技能会自动：
use-x-chat 技能已内置版本检查功能，启动时自动检查版本兼容性：
🔍 自动检查功能 技能启动时会自动检查 @ant-design/x-sdk 版本是否符合要求（≥2.2.2）：
📋 检查内容包括：
🛠️ 版本问题修复 如果检测到版本不匹配，技能会提供具体的修复命令：
# 自动提示的修复命令
npm install @ant-design/x-sdk@^2.2.2
# 或安装最新版本
npm install @ant-design/x-sdk@latest
这部分由 x-chat-provider 技能负责
import { MyChatProvider } from './MyChatProvider';
import { XRequest } from '@ant-design/x-sdk';
// 推荐使用 XRequest 作为默认请求方式
const provider = new MyChatProvider({
// 默认使用 XRequest，无需自定义 fetch
request: XRequest('https://your-api.com/chat'),
// 当设置 requestPlaceholder 时，会在请求开始前显示占位消息
requestPlaceholder: {
content: '正在思考中...',
role: 'assistant',
timestamp: Date.now(),
},
// 当设置 requestFallback 时，会在请求失败时显示兜底消息
requestFallback: (_, { error, errorInfo, messageInfo }) => {
if (error.name === 'AbortError') {
return {
content: messageInfo?.message?.content || '已取消回复',
role: 'assistant' as const,
timestamp: Date.now(),
};
}
return {
content: errorInfo?.error?.message || '网络异常，请稍后重试',
role: 'assistant' as const,
timestamp: Date.now(),
};
},
});
import { useXChat } from '@ant-design/x-sdk';
const ChatComponent = () => {
const { messages, onRequest, isRequesting } = useXChat({ provider });
return (
<div>
{messages.map((msg) => (
<div key={msg.id}>
{msg.message.role}: {msg.message.content}
</div>
))}
<button onClick={() => onRequest({ query: '你好' })}>发送</button>
</div>
);
};
import { Bubble, Sender } from '@ant-design/x';
const ChatUI = () => {
const { messages, onRequest, isRequesting, abort } = useXChat({ provider });
return (
<div style={{ height: 600 }}>
<Bubble.List items={messages} />
<Sender
loading={isRequesting}
onSubmit={(content) => onRequest({ query: content })}
onCancel={abort}
/>
</div>
);
};
graph TD
A[useXChat Hook] --> B[Chat Provider]
B --> C[XRequest]
A --> D[Ant Design X UI]
D --> E[Bubble组件]
D --> F[Sender组件]
⚠️ 重要提醒：
messages类型是MessageInfo<MessageType>[]，不是直接的MessageType
interface MessageInfo<Message> {
id: number | string; // 消息唯一标识
message: Message; // 实际消息内容
status: MessageStatus; // 发送状态
extraInfo?: AnyObject; // 扩展信息
}
// 消息状态枚举
type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';
💡 提示：API可能会随版本更新，建议查看官方文档获取最新信息
核心功能参考内容 CORE.md
use-x-chat 必须依赖以下技能之一：
| 依赖类型 | 技能 | 说明 | 是否必须 |
|---|---|---|---|
| 核心依赖 | x-chat-provider | 提供自定义 Provider 实例，默认使用 XRequest, 必须配合 use-x-chat | 必须 |
| 或 | 内置 Provider | OpenAI/DeepSeek 等内置 Provider，默认使用 XRequest | 必须 |
| 推荐依赖 | x-request | 配置请求参数和认证，作为默认请求方式 | 推荐 |
| 使用场景 | 需要的技能组合 | 使用顺序 |
|---|---|---|
| 私有API适配 | x-chat-provider → use-x-chat | 先创建Provider，再使用 |
| 标准API使用 | use-x-chat（内置Provider） | 直接使用 |
| 需要认证配置 | x-request → use-x-chat | 先配置请求，再使用 |
| 完整自定义 | x-chat-provider → x-request → use-x-chat | 完整工作流 |
tsc --noEmit 确保无类型错误