ConversationRow
One conversation in the Inbox: who wrote, from where, when, and what was said last — a link to its thread.
An inbox
The list is the latest first. A row the client wrote in since the studio last looked is unread: its last words in ink and medium weight, beside an iOS-red dot. The open one wears the sidebar's soft ink wash.
import { ConversationRow } from "@/components/shared/conversation-row";
<ConversationRow
href="?c=7"
name="Petra"
channels={[{ channel: "instagram", label: "Instagram" }]}
time="09:05"
preview="Do you do gel nails?"
unread
unreadLabel="Unread"
status={<LiveIndicator label="Okami is replying" />}
/>States
Read, unread and open. Hover washes the row faintly; focus draws the ring.
<ConversationRow {...row} />
<ConversationRow {...row} unread unreadLabel="Unread" />
<ConversationRow {...row} selected />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | — | The client's name, or what stands in for it (“Visitor”). Cut to a line. |
| channels | { channel: Channel; label: string }[] | — | Every channel of the client's thread, the latest first: each a ChannelIcon (the booking page is “link”), with its name in words for assistive tech. |
| time | string | — | When it last moved: the time today, the day before. |
| preview | ReactNode | — | What was said last, cut to a line; prefix who said it when it wasn't the client. Empty, the line goes: a client's rating sits in the status instead, as RatingStars icons after its badge, never the font's ★ glyphs. |
| unread | boolean | false | The client wrote since the studio last opened it: ink, medium weight and an iOS-red dot. |
| unreadLabel | string | — | What the dot says to assistive tech: “Unread”. |
| selected | boolean | false | The open conversation: the sidebar's soft ink wash and aria-current. |
| status | ReactNode | — | What's happening in it, beneath: a LiveIndicator, a short line. |
| …props | ComponentProps<"a"> | — | href, onClick and the rest, on the link. |
Guidelines
- A row is a link to its thread, so it opens in a new tab like any other. Selecting it in place is the page's job.
- Unread is never colour alone: weight and the words for assistive tech carry it too.
- The status line only for what is true now — Okami replying, the studio answering. Leave it out otherwise.