logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Data Flow
    • useXChatConversation Data
    • useXConversationsConversation Management
    • Chat ProviderData Provider
  • Utilities
    • XRequestRequest
    • XStreamStream

useXChat
Conversation Data

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

When To Use

Manage conversation data via Agent and produce data for page rendering.

Code Demo

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

PropertyDescriptionTypeDefaultVersion
providerData provider, used to convert different data structures and requests into a format consumable by useXChat. The platform provides DefaultChatProvider and OpenAIChatProvider by default, and you can also implement your own Provider by extending AbstractChatProvider. See: Chat Provider DocsAbstractChatProvider<ChatMessage, Input, Output>--
defaultMessagesDefault display messages{ message: ChatMessage ,status: MessageStatus}[]--
parserConverts ChatMessage to ParsedMessage for consumption. If not set, ChatMessage is consumed directly. Supports converting one ChatMessage to multiple ParsedMessages(message: ChatMessage) => BubbleMessage | BubbleMessage[]--
requestFallbackFallback message when request fails. If not provided, nothing will be displayedChatMessage | () => ChatMessage--
requestPlaceholderPlaceholder message during request. If not provided, nothing will be displayedChatMessage | () => ChatMessage--

XChatConfigReturnType

PropertyDescriptionTypeDefaultVersion
abortCancel request() => void--
isRequestingIs requestingboolean--
messagesCurrent managed message listChatMessage[]--
parsedMessagesContent converted by parserParsedMessages[]--
onReloadRegenerate, sends a request to the backend and updates the message with new data(id: string | number, requestParams: Partial<Input>) => void--
onRequestAdd a Message and trigger a request(requestParams: Partial<Input>) => void--
setMessagesDirectly modify messages without triggering a request(messages: { message: ChatMessage, status:MessageStatus }[]) => void--
setMessageDirectly modify a single message without triggering a request(id: string | number, data: { message: ChatMessage, status: MessageStatus }) => void--

MessageStatus

ts
type MessageStatus = 'local' | 'loading' | 'updating' | 'success' | 'error' | 'abort';
Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Model Integration

Access to cloud service platform,can send messages, process data, abort stream.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code