Chat

Bulles de message de chat pour afficher les conversations avec avatars et métadonnées.

Import

import { Chat } from 'asterui'

Exemples

Chat de base

Bulles de chat simples avec différentes positions.

</>

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

Avec avatars

Bulles de chat avec avatars d'utilisateur.

</>

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

Avec en-têtes

Bulles de chat avec en-têtes de nom et d'horodatage.

</>

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

Bulles colorées

Bulles de chat avec différentes variantes de couleur.

</>

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

Avec pied de page

Bulles de chat avec pied de page d'état de livraison.

</>

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

Propriété	Description	Type	Défaut
message	Contenu du message	React.ReactNode	-
position	Position de la bulle	'start' | 'end'	'start'
avatar	URL de l’image de l’avatar	string	-
avatarAlt	Texte alternatif de l’avatar	string	-
header	Contenu de l’en-tête (nom, heure)	React.ReactNode	-
footer	Contenu du pied de page (statut)	React.ReactNode	-
color	Variante de couleur de la bulle	'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'	-
className	Classes CSS supplémentaires	string	-
data-testid	ID de test pour les tests	string	-

Accessibilité

• Utilisez un texte alternatif significatif pour les images d’avatar
• Le contenu du message est lisible par les lecteurs d’écran
• Les classes de position aident à transmettre le flux de conversation