Conversations

• The reader has more than one chat and switches between them.
• The product has several agents or modes, and each one is a place the reader picks before typing.
• Each chat needs actions of its own: rename, pin, share, delete.

Use something else when

• The list is site navigation, not a list of chats. That is a Menu, which has submenus and keyboard support built in.
• The reader picks one option from a short fixed set, like a model. That is a Select or a Segmented.
• There is only ever one chat. Leave the list out and give the space to the conversation.

• A controlled list only moves when you update activeKey. If you pass activeKey without handling onActiveChange, clicking an item does nothing.
• When the reader deletes the open chat, pick the next one and set activeKey yourself. The list does not choose for you.
• Keys are strings. A numeric id from your API has to be turned into a string before it is used as key or activeKey.

• Keep labels as strings where you can. A node label loses the tooltip, and a truncated title then has no way to be read in full.
• Name a new chat from its first message once it has one. A list of “New chat” rows is a list the reader cannot use.

• Pass menu as a function when actions need the conversation. The function gets the item and returns the menu, so its onClick knows which chat to rename or delete. The object form gives every item the same handler with no item in it.
• Picking a menu action does not select the item, so the open chat stays open while the reader renames another one.
• Ask before a delete. Put a Modal or a Popconfirm between the menu item and the request.
• A custom trigger replaces the kit's button. Use the function form and keep the className of originNode, or your trigger stays visible on every row instead of showing on hover.
• Inside a scrolling sidebar or a drawer, set getPopupContainer so the menu scrolls with the list.

• Sort the items yourself. Groups appear in the order their first item appears in items, so put today's chats first in the array.
• Items with no group are listed with no heading. Give every item a group once grouping is on, or the ungrouped ones look like they belong to the group above.
• Make long-tail groups collapsible and leave the recent ones open, with collapsible as a function and defaultExpandedKeys.

• Select the new chat in onClick by setting activeKey to its key. Otherwise the reader is left looking at the old one.
• If a new empty chat is already open, reuse it instead of creating another. Repeated clicks otherwise fill the list with empty rows.
• The button's text comes from the locale. Pass label to change it, for example to the agent's name.

• Check your combinations against the browser's and your app's. Meta plus a number already switches browser tabs on macOS, so Alt plus a number is the safer pick for items.
• Tell the reader the shortcuts exist. The label function of creation gets the shortcut info, so the keys can show beside “New chat”.

• The list has no background of its own. Put it on a surface, like a sidebar with bg-container or bg-layout.
• The “New chat” button takes its tint from the primary color, and the selected item uses the same light gray fill as hover. If the selection needs to stand out more, give the open item its own className in items.