IInbox
Composed

Messages

Thread list, transcript bubbles, attachments and a pipeline timeline.

TODAY
Morning — did you get a chance to look at the SOW?
Just opened it. Reading now.
SOW-northwind-signed.pdfPDF · 480 KB
In contact5 MarSigned SOW received
Lead created24 FebInbound — referral

Installation

npx shadcn@latest add https://ui.whoisroktim.lol/r/messages.json

Only one side gets a bubble

Incoming and outgoing are visually asymmetric, and first controls the corner that squares off so a run of consecutive messages reads as one block rather than a stack of identical pills.

Attachments are rows, not cards

A file in a transcript is a line item — name, type, size. AttachmentImage is the exception, because a preview is the whole point of sending an image.

PropTypeDefaultDescription
threadThreadThreadRow. id, name, time, initials, preview, unread, tag.
direction"incoming" | "outgoing"MessageBubble.
firstbooleanfalseMessageBubble. First in a run — squares the inner corner.
stageStageTimelineItem. The pipeline stage this event belongs to.
lastbooleanfalseTimelineItem. Drops the connecting line.