Menu
专注讲解如何使用 useXChat Hook，包括自定义 Provider 的集成、消息管理、错误处理等
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle 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 确保无类型错误