Messaging

A conversation laid out in time: MessageItem renders one Message whose fields decide its shape, plus MessageStatus and three demo composers.

Demo

hero
  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
    • 🎉3
    • 👍
Component
Shape
Side
import type { Message } from "@/components/application/messaging/messaging"; import { MessageItem } from "@/components/application/messaging/messaging"; const message: Message = { id: "message-001", user: { name: "Phoenix Baker", avatarUrl: "https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80", status: "online", }, sentAt: "Thursday 11:40am", text: "Can you review the latest design when you have a minute?", reactions: [{ content: "🎉", count: 3 }, { content: "👍", count: 1 }], }; <ol aria-label="Conversation" className="flex flex-col gap-4"> <MessageItem msg={message} /> </ol>

In context

in-context
View in a page

Family

family
  1. Phoenix Baker
    Phoenix Baker
    See you at three.
MessageItem
MessageStatus
MessageActionMinimal
MessageActionTextarea
MessageActionAdvanced

Types

cells

The sheet’s nine types, the reaction chips, and three composers.

Message

  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
Text: the bubble, start corner squared
  1. Phoenix Baker
    Phoenix Baker
    Sure, I’ll have a look this afternoon.
    Done, I left two comments on the header.
Reply: the quoted nest above the text
  1. Phoenix Baker
    Phoenix Baker
    Wireframe of the dashboard layout
    Dashboard wireframe.png1.4 MB
Image: the figure, name and size as its caption
  1. Phoenix Baker
    Phoenix Baker

    00:28

Audio: play, the waveform, the duration
  1. Phoenix Baker
    Phoenix Baker
Video: the 16:9 player over the poster
  1. Phoenix Baker
    Phoenix Baker

    Tech requirements.pdf

    1.2 MB

File: the type icon, the name and size
  1. Phoenix Baker
    Phoenix Baker
    https://www.untitledui.com
Link minimal: the card in the bubble, URL line under
  1. Phoenix Baker
Link preview: the OG cover in the bubble, URL line under
  1. Phoenix Baker
    Phoenix Baker
    Shipped the new header this morning.
    • 🎉3
    • 👍
Reactions: chips end-aligned under the bubble
  1. Phoenix Baker
    Phoenix Baker
    Phoenix Baker is typing
Writing: the typing bubble under the name

Message action

Minimal: the input and an icon-only Send
Textarea: Record in the top corner; Attach, Emoji, Send in the bottom
Advanced: a framed field, a microphone, the sender picker, Shortcuts, Attach

Sizes

cells

Minimal

size sm
size md
size lg

Layouts

cells

Sent side

  1. You
    Sure, I’ll have a look this afternoon.
sent Text: no avatar, “You”, end corner squared
  1. You
    Can you review the latest design when you have a minute?
    Thanks, fixing them now.
sent Reply
  1. You
    Wireframe of the dashboard layout
    Dashboard wireframe.png1.4 MB
sent Image
  1. You

    00:28

sent Audio
  1. You
sent Video
  1. You

    Tech requirements.pdf

    1.2 MB

sent File
sent Link minimal
sent Link preview
  1. You
    Shipped the new header this morning.
    • 🎉3
    • 👍
sent Reactions

The list

  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
  2. You
    Sure, I’ll have a look this afternoon.
  3. Phoenix Baker
    Phoenix Baker
    Phoenix Baker is typing
received, sent and typing in one named list
  1. Welcome back. What would you like to change in your calendar?
  2. Move my sync with Rhea to Friday afternoon.
  3. Friday at 1:30pm is free for both of you. Shall I move it and let Rhea know?
assistant thread: showUserLabel false, replies with no user

Content

cells
  1. Phoenix Baker
    Phoenix Baker
    The pricing page is the last thing standing between us and a launch, so let’s get the copy signed off before Friday and ship the rest as it is, comments and all.
a long text wraps in the bubble
  1. You
    The pricing page is the last thing standing between us and a launch, so let’s get the copy signed off before Friday and ship the rest as it is, comments and all.
    Thanks, fixing them now.
a long reply quote clamps to one line
  1. Phoenix Baker
    Phoenix Baker

    Q3_dashboard_design_brief_final_v3_reviewed_by_legal.pdf

    1.2 MB

a long file name truncates
a link inside the text
  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
no sentAt: the name alone in the header
  1. Friday at 1:30pm is free for both of you.
no user: no avatar, no header

Behaviour

cells

Two shapes, one message

  1. Phoenix Baker
    Phoenix Baker
    Wireframe of the dashboard layout
    Here’s the latest wireframe.
text with image: the picture inside the text bubble
  1. Phoenix Baker
    Phoenix Baker
    The requirements are attached.

    Tech requirements.pdf

    1.2 MB

text with attachment: the file bubble as a second block

Kit extras

  1. You
    You is typing
typing on the sent side, start corner squared
  1. Lana Steiner
    Can you review the latest design when you have a minute?
showUserLabel false: no name in the header

Loading

cells
Loading messages
received
Loading messages
sent
Loading messages
three rows, received and sent mixed

States

cells

Three status glyphs, the avatar dot, and the actions panel.

Status on sent

  1. You
    Sure, I’ll have a look this afternoon.
status sent: one check, named Unread
  1. You
    Sure, I’ll have a look this afternoon.
status read with readAt: two checks, named Read
  1. You
    Sure, I’ll have a look this afternoon.
status failed: the alert circle, named Failed

Avatar dot

  1. Olivia Rhye
    Olivia Rhye
    Can you review the latest design when you have a minute?
user.status online
  1. Lana Steiner
    Lana Steiner
    Can you review the latest design when you have a minute?
user.status offline

The actions panel

  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
at rest: hover the bubble, or tab to Generate with AI
  1. Phoenix Baker
    Phoenix Baker
    Can you review the latest design when you have a minute?
pinned open on a text bubble: Edit message
  1. Phoenix Baker
    Phoenix Baker

    Tech requirements.pdf

    1.2 MB

pinned open on a file bubble: Download