logoAnt Design X

DesignDevelopmentComponentsX MarkdownX SDKPlayground
  • Introduction
  • Data Flow
    • useXChatConversation Data
      2.0.0
    • useXConversations
      2.0.0
  • Chat Provider
    • Chat Provider
      2.0.0
    • OpenAIChatProvider
      2.0.0
    • DeepSeekChatProvider
      2.0.0
    • Custom Chat Provider
      2.0.0
  • Utilities
    • XRequestRequest
      2.0.0
    • XStreamStream
      2.0.0

useXConversations

Manage conversation persistence and CRUD operations for multiple sessions.
Importimport { useXConversations } from "@ant-design/x";
Sourcecomponents/use-x-conversations
Docs
Edit this page
Versionsupported since 2.0.0

When To Use

  • Use when you need to manage conversation lists, including operations like creating, deleting, and updating conversations.

Code Demo

API

useXConversations

tsx
type useXConversations = (config: XConversationConfig) => {
  conversations: ConversationData[];
  activeConversationKey: string;
  setActiveConversationKey: (key: string) => boolean;
  addConversation: (conversation: ConversationData, placement?: 'prepend' | 'append') => boolean;
  removeConversation: (key: string) => boolean;
  setConversation: (key: string, conversation: ConversationData) => boolean;
  getConversation: (key: string) => ConversationData;
  setConversations: (conversations: ConversationData[]) => boolean;
  getMessages: (conversationKey: string) => any[];
};

XConversationConfig

tsx
interface XConversationConfig {
  defaultConversations?: ConversationData[];
  defaultActiveConversationKey?: string;
}

ConversationData

tsx
interface ConversationData extends AnyObject {
  key: string;
  label?: string;
}
Basic Usage

Use useXConversations to manage conversation lists, demonstrating basic conversation item configuration and interaction features.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Conversation Operations

Demonstrate complete conversation operation capabilities, including dynamically adding, updating, deleting, resetting conversation items, and retrieving current conversation data.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Multiple Instances

Demonstrate independent management of multiple conversation instances, supporting add, update, and delete conversation items with fully decoupled state management.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Integration with useXChat for message management

Integrate useXConversations and useXChat to achieve complete integration of conversation management and chat functionality, supporting multi-conversation independent chatting and context switching.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Request Remote Historical Messages

Set defaultMessages as an asynchronous method to load historical messages during initialization. This method is commonly used with the useXConversations hook to achieve dynamic management of conversation data and state synchronization, suitable for scenarios involving message updates in conversation lists and initialization of conversation content.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Conversation Item 1
  • Conversation Item 2
  • This's Conversation Item 3, you can click me!
  • Conversation Item 4
  • Conversation Item 1
  • Conversation Item 2
  • This's Conversation Item 3, you can click me!
  • Conversation Item 4
Current Conversation Data:
{
  "key": "item1",
  "label": "Conversation Item 1"
}

List 1

  • Conversation Item 1
  • Conversation Item 2
  • This's Conversation Item 3, you can click me!
  • Conversation Item 4

List 2

  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 1
  • Conversation Item 2
  • This's Conversation Item 3, you can click me!
  • Conversation Item 4
  • Conversation Item 1
  • Conversation Item 2
  • This's Conversation Item 3, you can click me!
  • Conversation Item 4