Chat

Burbujas de mensajes de chat para mostrar conversaciones con avatares y metadatos.

Importar

import { Chat } from 'asterui'

Ejemplos

Chat Básico

Burbujas de chat simples con diferentes posiciones.

</>

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

Con Avatares

Burbujas de chat con avatares de usuario.

</>

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

Con Encabezados

Burbujas de chat con encabezados de nombre y marca de tiempo.

</>

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

Burbujas de Colores

Burbujas de chat con diferentes variantes de color.

</>

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

Con Pie de Página

Burbujas de chat con pie de página de estado 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

Propiedad	Descripción	Tipo	Predeterminado
message	Contenido del mensaje	React.ReactNode	-
position	Posición de la burbuja	'start' | 'end'	'start'
avatar	URL de imagen del avatar	string	-
avatarAlt	Texto alternativo del avatar	string	-
header	Contenido del encabezado (nombre, hora)	React.ReactNode	-
footer	Contenido del pie de página (estado)	React.ReactNode	-
color	Variante de color de la burbuja	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	-
className	Clases CSS adicionales	string	-
data-testid	ID de prueba para pruebas	string	-

Accesibilidad

• Usa texto alternativo significativo para las imágenes de avatar
• El contenido del mensaje es legible por lectores de pantalla
• Las clases de posición ayudan a transmitir el flujo de conversación