logoAnt Design X

useXChat数据管理

配合 Agent hook 进行对话数据管理。
使用
import{ useXChat }from"@ant-design/x";

何时使用

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

代码演示

基础用法。

codepen icon
External Link Icon
expand codeexpand code

使用流式输出更新内容。

codepen icon
External Link Icon
expand codeexpand code

打断正在流式输出的内容。

codepen icon
External Link Icon
expand codeexpand code
Hello, what can I do for you?

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

codepen icon
External Link Icon
expand codeexpand code

API

type useXChat<AgentMessage, ParsedMessage = AgentMessage> = (
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-

XChatConfigReturnType

属性说明类型版本
messages当前管理的内容AgentMessages[]
parsedMessages经过 parser 转译过的内容ParsedMessages[]
onRequest添加一条 Message,并且触发请求(message) => void
setMessages直接修改 messages,不会触发请求(messages: { message, status }[]) => void
Ask me