logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 数据流
    • useXChat会话数据
    • useXConversations会话管理
    • 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; messages: ChatMessage[], message: ChatMessage }) => ChatMessage|Promise<ChatMessage>--
requestPlaceholder请求中的占位信息,不提供则不会展示ChatMessage | (requestParams: Partial<Input>, info: { error: Error; messagesInfo: { id: string | number; message: ChatMessage; status: MessageStatus; }, message: ChatMessage }) => 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: No messages yet, please enter a question and send
模型接入

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

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

使用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
自定义request

自定义request(不推荐,请使用默认内置的request)。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义request(使用openai-node)

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code