logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

Conversations

Used to manage and view the conversation list
Importimport { Conversations } from "@ant-design/x";
Sourcecomponents/conversations
Docs
Edit this pageChangelog

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

  • Multiple sessions need to be managed
  • View a list of historical sessions

Examples

API

Common props ref:Common props

ConversationsProps

PropertyDescriptionTypeDefaultVersion
activeKeyCurrently selected valuestring--
defaultActiveKeyDefault selected valuestring--
itemsData source for conversation listConversation[]--
onActiveChangeCallback for selection change(value: string) => void--
menuOperation menu for conversationsMenuProps | ((value: Conversation) => MenuProps)--
groupableIf grouping is supported, it defaults to the Conversation.group fieldboolean | GroupableProps--
stylesSemantic structure stylesRecord<'item', React.CSSProperties>--
classNamesSemantic structure class namesRecord<'item', string>--

Conversation

PropertyDescriptionTypeDefaultVersion
keyUnique identifierstring--
labelConversation nameReact.ReactNode--
timestampConversation timestampnumber--
groupConversation type, linked to ConversationsProps.groupablestring--
iconConversation iconReact.ReactNode--
disabledWhether to disableboolean--

GroupableProps

PropertyDescriptionTypeDefaultVersion
sortGroup sorter(a: string, b: string) => number--
titleSemantic custom rendering((group: string, info: { components: { GroupTitle: React.ComponentType } }) => React.ReactNode)--

MenuProps

For more properties, see MenuProps.

PropertyDescriptionTypeDefaultVersion
triggerCustomize menu triggerReact.ReactNode | ((conversation: Conversation, info: { originNode: React.ReactNode }) => React.ReactNode)--

Design Token

Basic

Basic usage.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Operations

Use the menu property to configure conversation.

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

Customize the menu trigger.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Controlled Mode

Use the activeKey and onChange property to configure conversation.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Group

After using groupable properties open group, open the default according to Conversation.Group field group

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Group Sort

Use the groupable.sort property to sort groups, and the groupable.title property to customize group rendering.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Scrolling loaded

The example of infinite load with react-infinite-scroll-component.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Conversation Item 4
  • Conversation Item 1
  • Conversation Item 2
  • Conversation Item 3
  • Group1
    • Conversation Item 1
    • Conversation Item 2
    • Conversation Item 3
  • Group2
    • Conversation Item 4
  • Today
    • Conversation 1732204800000
    • Conversation 1732204803600
    • Conversation 1732204807200
    • Conversation 1732204810800
  • Yesterday
    • Conversation 1732204728000
    • Conversation 1732204731600