Message

Layout de fila de conversación con avatar, cabecera, pie y alineación.

Lucia10:24

Can you review the pagination PR today?

Sure, give me an hour.

10:26Read

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Bubble } from '@/components/ui/bubble';
5import { Message } from '@/components/ui/message';
6
7export function Default() {
8  return (
9    <div className="flex w-full max-w-md flex-col gap-4">
10      <Message align="start">
11        <Message.Avatar>
12          <Avatar size="sm">
13            <Avatar.Fallback>LR</Avatar.Fallback>
14          </Avatar>
15        </Message.Avatar>
16        <Message.Content>
17          <Message.Header>
18            <span className="text-foreground font-medium">Lucia</span>
19            <span>10:24</span>
20          </Message.Header>
21          <Bubble variant="secondary">
22            <Bubble.Content>Can you review the pagination PR today?</Bubble.Content>
23          </Bubble>
24        </Message.Content>
25      </Message>
26      <Message align="end">
27        <Message.Avatar>
28          <Avatar size="sm">
29            <Avatar.Fallback>NA</Avatar.Fallback>
30          </Avatar>
31        </Message.Avatar>
32        <Message.Content>
33          <Bubble align="end">
34            <Bubble.Content>Sure, give me an hour.</Bubble.Content>
35          </Bubble>
36          <Message.Footer>
37            <span>10:26</span>
38            <span aria-hidden="true">·</span>
39            <span>Read</span>
40          </Message.Footer>
41        </Message.Content>
42      </Message>
43    </div>
44  );
45}

Instalación

pnpm dlx nachui add message

Anatomía

1import { Message } from '@/components/ui/message';

1<Message align="start">
2  <Message.Avatar>
3    <Avatar size="sm">
4      <Avatar.Fallback>LR</Avatar.Fallback>
5    </Avatar>
6  </Message.Avatar>
7  <Message.Content>
8    <Message.Header>Lucia</Message.Header>
9    <Bubble variant="secondary">
10      <Bubble.Content>¿En qué puedo ayudar?</Bubble.Content>
11    </Bubble>
12    <Message.Footer>10:24</Message.Footer>
13  </Message.Content>
14</Message>

Message resuelve el layout alrededor de un mensaje: quién lo envió, cuándo y en qué lado va. La superficie es un Bubble. Cada parte es un elemento plano, así que toda la fila se renderiza en el servidor.

Composición

Usa la siguiente composición para construir un Message:

Message.Group
└── Message
    ├── Message.Avatar
    └── Message.Content
        ├── Message.Header
        ├── Bubble
        └── Message.Footer

Variantes

Agrupado

Envuelve los mensajes consecutivos del mismo remitente en Message.Group y apila sus burbujas con Bubble.Group, de modo que el avatar y la cabecera aparecen una sola vez.

Lucia09:12

Morning! Quick heads up.

The registry sync job finished without errors.

All five new components are live.

Great, closing the ticket.

09:15

1'use client';
2
3import { Avatar } from '@/components/ui/avatar';
4import { Bubble } from '@/components/ui/bubble';
5import { Message } from '@/components/ui/message';
6
7export function Grouped() {
8  return (
9    <div className="flex w-full max-w-md flex-col gap-4">
10      <Message.Group>
11        <Message align="start">
12          <Message.Avatar>
13            <Avatar size="sm">
14              <Avatar.Fallback>LR</Avatar.Fallback>
15            </Avatar>
16          </Message.Avatar>
17          <Message.Content>
18            <Message.Header>
19              <span className="text-foreground font-medium">Lucia</span>
20              <span>09:12</span>
21            </Message.Header>
22            <Bubble.Group align="start">
23              <Bubble variant="secondary">
24                <Bubble.Content>Morning! Quick heads up.</Bubble.Content>
25              </Bubble>
26              <Bubble variant="secondary">
27                <Bubble.Content>The registry sync job finished without errors.</Bubble.Content>
28              </Bubble>
29              <Bubble variant="secondary">
30                <Bubble.Content>All five new components are live.</Bubble.Content>
31              </Bubble>
32            </Bubble.Group>
33          </Message.Content>
34        </Message>
35      </Message.Group>
36      <Message align="end">
37        <Message.Content>
38          <Bubble align="end">
39            <Bubble.Content>Great, closing the ticket.</Bubble.Content>
40          </Bubble>
41          <Message.Footer>
42            <span>09:15</span>
43          </Message.Footer>
44        </Message.Content>
45      </Message>
46    </div>
47  );
48}