Participate in the WeaveFox "AI Artist" contest to win SEE Conf tickets and thousands of prizes

logoAnt Design X

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

useXConversations

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
  • 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
Hello! This is the welcome message for Conversation 1. I can help you answer various questions.
Hello, this is Conversation 1!