logoAnt Design X

设计研发组件X MarkdownX SDK演示国内镜像
  • 介绍
  • 数据流
    • useXChat会话数据
    • useXConversations会话管理
  • 数据提供
    • Chat Provider数据提供
    • OpenAIChatProvider
    • DeepSeekChatProvider
    • Custom Chat Provider自定义
  • 工具
    • XRequest请求
    • XStream流

useXChat
会话数据

何时使用

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

代码演示

API

useXChat

tsx
type useXChat<
ChatMessage extends SimpleType = object,
ParsedMessage extends SimpleType = ChatMessage,
Input = RequestParams<ChatMessage>,
Output = SSEOutput,
> = (config: XChatConfig<ChatMessage, ParsedMessage, Input, Output>) => XChatConfigReturnType;

XChatConfig

属性说明类型默认值版本
provider数据提供方,用于将不同结构的数据及请求转换为useXChat能消费的格式,平台内置了DefaultChatProvider和OpenAIChatProvider,你也可以通过继承AbstractChatProvider实现自己的Provider。详见:Chat Provider文档AbstractChatProvider<ChatMessage, Input, Output>--
defaultMessages默认展示信息{ message: ChatMessage ,status: MessageStatus}[]--
parser将 ChatMessage 转换成消费使用的 ParsedMessage,不设置时则直接消费 ChatMessage。支持将一条 ChatMessage 转换成多条 ParsedMessage(message: ChatMessage) => BubbleMessage | BubbleMessage[]--
requestFallback请求失败的兜底信息,不提供则不会展示ChatMessage | (requestParams: Partial<Input>,info: { error: Error; errorInfo: any; messages: ChatMessage[], message: ChatMessage }) => ChatMessage|Promise<ChatMessage>--
requestPlaceholder请求中的占位信息,不提供则不会展示ChatMessage | (requestParams: Partial<Input>, info: { messages: Message[] }) => ChatMessage |Promise<Message>--

XChatConfigReturnType

属性说明类型默认值版本
abort取消请求() => void--
isRequesting是否在请求中boolean--
messages当前管理消息列表的内容MessageInfo<ChatMessage>[]--
parsedMessages经过 parser 转译过的内容MessageInfo<ParsedMessages>[]--
onReload重新生成,会发送请求到后台,使用新返回数据更新该条消息(id: string | number, requestParams: Partial<Input>,opts: { extra: AnyObject }) => void--
onRequest添加一条 Message,并且触发请求(requestParams: Partial<Input>,opts: { extra: AnyObject }) => void--
setMessages直接修改 messages,不会触发请求(messages: Partial<MessageInfo<ChatMessage>>[]) => void--
setMessage直接修改单条 message,不会触发请求(id: string | number, info: Partial<MessageInfo<ChatMessage>>) => void--

MessageInfo

ts
interface MessageInfo<ChatMessage> {
id: number | string;
message: ChatMessage;
status: MessageStatus;
extra?: AnyObject;
}

MessageStatus

ts
type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';
Current status: Q&A completed
This is a historical message
OpenAI 模型接入

使用 OpenAIChatProvider,接入 OpenAI 数据格式的模型,可发送消息、处理数据、终止消息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Current status:No messages yet, please enter a question and send
DeepSeek 思考模型接入

使用 DeepSeekChatProvider,接入思考模型,可发送消息、处理数据、终止消息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Current status: Q&A completed
Hello!
历史消息设置

可使用 defaultMessages 设置历史消息。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Current status: Q&A completed
Current system prompt: You are a helpful chatbot
Hello!
系统提示词设置

可使用 defaultMessages 设置系统提示词。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义 XRequest.fetch

自定义 XRequest.fetch。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义 request

当使用一些 SDKs(例如:openai-node,@openrouter/ai-sdk-provider)请求模型或者智能体时需要使用内置的Provider处理数据,需要自定义Request,可参考此示例。 注意:此示例仅展示使用X SDK接入 openai 的逻辑参考,并未对模型数据进行处理,需填写正确的apiKey再进行数据调试。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code