logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

useXChat
数据管理

配合 Agent hook 进行对话数据管理。
使用import { useXChat } from "@ant-design/x";
源码components/use-x-chat
文档
编辑此页更新日志

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

何时使用

通过 Agent 进行会话数据管理,并产出供页面渲染使用的数据。

代码演示

基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
流式输出

使用流式输出更新内容。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hello, what can I do for you?
多项建议

通过定制能力,返回多个推荐内容。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
模型接入

接入云服务平台,可发送消息、处理数据、终止消息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

tsx
type useXChat<
AgentMessage,
ParsedMessage = AgentMessage,
Input = RequestParams<AgentMessage>,
Output = SSEOutput,
> = (config: XChatConfig<AgentMessage, ParsedMessage>) => XChatConfigReturnType;

XChatConfig

属性说明类型默认值版本
agent通过 useXAgent 生成的 agent,当使用 onRequest 方法时, agent 参数是必需的。XAgent--
defaultMessages默认展示信息{ status, message }[]--
parser将 AgentMessage 转换成消费使用的 ParsedMessage,不设置时则直接消费 AgentMessage。支持将一条 AgentMessage 转换成多条 ParsedMessage(message: AgentMessage) => BubbleMessage | BubbleMessage[]--
requestFallback请求失败的兜底信息,不提供则不会展示AgentMessage | () => AgentMessage--
requestPlaceholder请求中的占位信息,不提供则不会展示AgentMessage | () => AgentMessage--
transformMessage可在更新数据时对messages做转换,同时会更新到messages(info: {originMessage?: AgentMessage,chunk: Output,chunks: Output[],status: MessageStatus}) => AgentMessage--
transformStream可选的转换函数,用于处理流数据XStreamOptions<Output>['transformStream']--
resolveAbortControllerAbortController 控制器,用于控制流状态(abortController: AbortController) => void--

XChatConfigReturnType

属性说明类型默认值版本
messages当前管理的内容AgentMessages[]--
parsedMessages经过 parser 转译过的内容ParsedMessages[]--
onRequest添加一条 Message,并且触发请求,若无key为message的数据则会将整个数据做为消息处理(requestParams: AgentMessage | RequestParams) => void--
setMessages直接修改 messages,不会触发请求(messages: { message, status }[]) => void--

RequestParams

继承 XRequestParams。

属性说明类型默认值版本
message当前消息的内容AgentMessage--