ConversationList

A list of channels and people, with previews and unread counts.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { ConversationList, Stack, Text } from '@weft-js/warp'import type { ChatConversation } from '@weft-js/warp'export function Inbox() {  const open = state('incidents')  const name = () => CONVERSATIONS.find(c => c.id === open.value)!.name  return (    <Stack gap="related">      <ConversationList title={<Text role="label">Messages</Text>} items={CONVERSATIONS} value={open} />      <Text subtle>Open: {name()}</Text>    </Stack>  )}const CONVERSATIONS: ChatConversation[] = [  { id: 'incidents', name: '# incidents', color: 3, channel: true, preview: 'Sam: Rolled back, 5xx are dropping', time: '15:41', unread: 3, pinned: true },  { id: 'deploys', name: '# deploys', color: 5, channel: true, preview: 'storefront is live', time: '16:42', unread: 1 },  { id: 'jun', name: 'Jun Tanaka', color: 2, preview: 'You: thanks, merging now', time: '14:30', online: true },  { id: 'web', name: '# web', color: 4, channel: true, preview: 'Priya: new image cache is in', time: '12:05' },  { id: 'lena', name: 'Lena Fischer', color: 5, preview: 'Ranking v2 is building', time: 'Thu' },  { id: 'random', name: '# random', color: 8, channel: true, preview: 'Tomás pinned a message', time: 'Wed', muted: true },]

Installation

npm install @weft-js/warp

Usage

tsx

import { ConversationList } from '@weft-js/warp'

Accessibility

↑↓: Moves through the list
HomeEnd: Jumps to the first or last
Enter: Opens it

API Reference

Prop	Type	Default	Description
`label`	`string`	`'Conversations'`	Names the list.
`title`	`unknown`	—	The heading.
`actions`	`unknown`	—	Buttons beside the heading.
`items`	`ChatConversation[]`	—	The conversations.
`value`	`string \| State<string>`	—	The open one, as a state or an id.

Event	Type	Default	Description
`onSelect`	`((c: ChatConversation) => void)`	—	Called when one is picked.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="conversations"] [data-part="side"]

side

RelatedThread