Chat

Bolhas de mensagem de chat para exibir conversas com avatares e metadados.

Importação

import { Chat } from 'asterui'

Exemplos

Chat Básico

Bolhas de chat simples com posições diferentes.

</>

Hey! How are you?

I'm doing great, thanks for asking!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" message="Hey! How are you?" />
        <Chat position="end" message="I'm doing great, thanks for asking!" />
      </div>
    )
}

export default App

Com Avatares

Bolhas de chat com avatares de usuário.

</>

Hey! Did you see the new updates?

Yes! They look amazing!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          avatarAlt="User"
          message="Hey! Did you see the new updates?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          avatarAlt="Me"
          message="Yes! They look amazing!"
        />
      </div>
    )
}

export default App

Com Cabeçalhos

Bolhas de chat com cabeçalhos de nome e timestamp.

</>

Alice 12:45

Good morning! Ready for the meeting?

Bob 12:46

Yes, joining now!

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="start"
          avatar="/avatar-1.webp"
          header={<span>Alice <time className="text-xs opacity-50">12:45</time></span>}
          message="Good morning! Ready for the meeting?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          header={<span>Bob <time className="text-xs opacity-50">12:46</time></span>}
          message="Yes, joining now!"
        />
      </div>
    )
}

export default App

Bolhas Coloridas

Bolhas de chat com diferentes variantes de cor.

</>

Primary color message

Secondary color message

Success color message

Error color message

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat position="start" color="primary" message="Primary color message" />
        <Chat position="end" color="secondary" message="Secondary color message" />
        <Chat position="start" color="success" message="Success color message" />
        <Chat position="end" color="error" message="Error color message" />
      </div>
    )
}

export default App

Com Rodapé

Bolhas de chat com rodapé de status de entrega.

</>

Did you get my message?

Delivered

Hello?

Seen at 12:46

import { Chat } from 'asterui'

function App() {
  return (
      <div>
        <Chat
          position="end"
          avatar="/avatar-1.webp"
          footer={<span className="text-xs opacity-50">Delivered</span>}
          message="Did you get my message?"
        />
        <Chat
          position="end"
          avatar="/avatar-2.webp"
          footer={<span className="text-xs opacity-50">Seen at 12:46</span>}
          message="Hello?"
        />
      </div>
    )
}

export default App

API

Chat

Propriedade	Descrição	Tipo	Padrão
message	Conteúdo da mensagem	React.ReactNode	-
position	Posição da bolha	'start' | 'end'	'start'
avatar	URL da imagem do avatar	string	-
avatarAlt	Texto alternativo do avatar	string	-
header	Conteúdo do cabeçalho (nome, hora)	React.ReactNode	-
footer	Conteúdo do rodapé (status)	React.ReactNode	-
color	Variante de cor da bolha	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	-
className	Classes CSS adicionais	string	-
data-testid	ID de teste para testes	string	-

Acessibilidade

• Use texto alternativo significativo para imagens de avatar
• Conteúdo da mensagem é legível por leitores de tela
• Classes de posição ajudam a transmitir o fluxo da conversa