Agentic BP DScode-first design system

ChatList

The saved chats or playbooks beside the assistant: a titled panel with a search box and rows that open what they name.

Master

Switch between saved chats and playbooks. Open a row, fold a group away, search to narrow the rows, or use a row's menu.

Close chats

Chats

Start new chat

Usage

Use ChatList for the panel of saved chats, or of playbooks, next to an assistant. It is one component: pass items for one plain list, or groups for named groups like Pinned Chats and Recent Chats, which people can fold away. Searching narrows the rows as it is typed, and empty groups drop out. Each row can carry its own menu, like Pin, Rename and Delete for a chat, or Edit and Delete for a playbook; it stays out of sight until the row is hovered or has focus. more adds the last row that reaches further back, like View chats older than 30 days. onCreate adds the button that starts a new one, and onClose the × that shuts the panel. See contracts/chatlist.json for the full contract.

Do's

  • The saved chats beside an assistant panel.
  • The playbooks people can run.
  • Any short list of saved things that open in the panel beside it.

Don'ts

  • Do not use it for app navigation. Use AppNav.
  • Do not use it for a list of records people sort and filter. Use Table.
  • Do not build the rows from your own divs, or add a ChatRow or PlaybookItem. Pass items.
  • Do not pass both items and groups; pick one.
  • Do not use raw hex.
<ChatList

/>