Bulle de chat

Bulle de message conversationnelle pour afficher des échanges de type messagerie. Variantes envoyé, reçu et système.

Exemples

Amina

Bonjour, comment puis-je vous aider ?

10:32

J'ai besoin d'informations sur mon dossier.

10:33

Conversation démarrée

Variantes — Reçu

Amina

Bonjour, comment puis-je vous aider ?

10:32

<div role="list">
  <div class="bj-chat-bubble bj-chat-bubble--received" role="listitem" aria-label="Message de Amina à 10:32">
    <div class="bj-chat-bubble__avatar">
      <img src="/avatar.jpg" alt="Amina" />
    </div>
    <div class="bj-chat-bubble__content">
      <span class="bj-chat-bubble__sender">Amina</span>
      <div class="bj-chat-bubble__text">Bonjour, comment puis-je vous aider ?</div>
      <div class="bj-chat-bubble__meta">
        <span class="bj-chat-bubble__time">10:32</span>
      </div>
    </div>
  </div>
</div>

Variantes — Envoyé

J'ai besoin d'informations sur mon dossier.

10:33

<div class="bj-chat-bubble bj-chat-bubble--sent" role="listitem" aria-label="Message envoyé à 10:33">
  <div class="bj-chat-bubble__content">
    <div class="bj-chat-bubble__text">J'ai besoin d'informations sur mon dossier.</div>
    <div class="bj-chat-bubble__meta">
      <span class="bj-chat-bubble__time">10:33</span>
      <span class="bj-chat-bubble__status bj-chat-bubble__status--read">
        <i class="ri-check-double-line" aria-hidden="true"></i>
      </span>
    </div>
  </div>
</div>

Variantes — Système

Amina a rejoint la conversation

<div class="bj-chat-bubble bj-chat-bubble--system" role="listitem">
  <div class="bj-chat-bubble__content">
    <div class="bj-chat-bubble__text">Amina a rejoint la conversation</div>
  </div>
</div>

Classes CSS

Classe	Description
`bj-chat-bubble`	Conteneur principal de la bulle.
`bj-chat-bubble__avatar`	Avatar de l'expéditeur.
`bj-chat-bubble__content`	Zone de contenu (texte + métadonnées).
`bj-chat-bubble__text`	Texte du message.
`bj-chat-bubble__time`	Horodatage du message.
`bj-chat-bubble__status`	Indicateur de statut d'envoi.
`bj-chat-bubble--sent`	Message envoyé (aligné à droite).
`bj-chat-bubble--received`	Message reçu (aligné à gauche).
`bj-chat-bubble--system`	Message système (centré, discret).
`bj-chat-bubble--error`	État d'erreur d'envoi.