Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Chat Bubble Component

CSS-only Tailwind CSS chat bubble component. Start and end positions for sent and received messages, with avatar and timestamp slots. WCAG AA, works with Django, HTMX, Laravel, React, and any stack.

Les composants de discussion affichent les messages conversationnels dans un format lisible et organisé. Construites avec du HTML sémantique et des mises en page flexibles, les bulles de discussion représentent à la fois les messages de l'utilisateur et du système. Le système de discussion Frutjam prend en charge plusieurs couleurs, alignements et styles, ce qui est idéal pour les interfaces de messagerie, les panneaux de support client et l'interface utilisateur conversationnelle.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Classe Taper Description
chatBaseWrapper pour une seule ligne de message de discussion
chat-bubbleModificateurBulle de message stylisée
chat-avatarModificateurAvatar affiché à côté du message
chat-headerModificateurNom de l'expéditeur ou métadonnées au-dessus de la bulle
chat-footerModificateurHorodatage ou statut sous la bulle
chat-startModificateurAligne la bulle à gauche (message entrant)
chat-endModificateurAligne la bulle à droite (message sortant)
chat-xsTailleTrès petit
chat-smTaillePetit
chat-mdTailleMoyen (par défaut)
chat-lgTailleGrand
chat-xlTailleTrès grand
chat-bubble-primaryCouleurBulle de couleur du thème principal
chat-bubble-secondaryCouleurBulle de couleur du thème secondaire
chat-bubble-accentCouleurBulle de couleur du thème d'accentuation
chat-bubble-neutralCouleurBulle de couleur thème neutre
chat-bubble-infoCouleurBulle de couleur sémantique d'information
chat-bubble-successCouleurBulle de couleur sémantique de succès
chat-bubble-warningCouleurBulle de couleur sémantique d'avertissement
chat-bubble-errorCouleurBulle de couleur sémantique d'erreur

Utilisation de base

Hello! How are you?
I'm doing great, thanks!
1
2
3
4
5
6
7
<div class="chat chat-start">
  <div class="chat-bubble">Hello! How are you?</div>
</div>

<div class="chat chat-end">
  <div class="chat-bubble">I'm doing great, thanks!</div>
</div>

1
2
3
4
5
6
7
<div className="chat chat-start">
  <div className="chat-bubble">Hello! How are you?</div>
</div>

<div className="chat chat-end">
  <div className="chat-bubble">I'm doing great, thanks!</div>
</div>

Discutez avec un avatar

Hello!
Hi there!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div class="chat chat-start">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-primary"></div>
  </div>
  <div class="chat-bubble">Hello!</div>
</div>

<div class="chat chat-end">
  <div class="chat-avatar avatar">
    <div class="w-10 rounded-full bg-secondary"></div>
  </div>
  <div class="chat-bubble">Hi there!</div>
</div>

Tailles des discussions

Small message
Medium message
Large message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start chat-sm">
  <div class="chat-bubble">Small message</div>
</div>

<div class="chat chat-start chat-md">
  <div class="chat-bubble">Medium message</div>
</div>

<div class="chat chat-start chat-lg">
  <div class="chat-bubble">Large message</div>
</div>

Styles de discussion

Default style
Primary message
Secondary message
Accent message
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="chat chat-start">
  <div class="chat-bubble">Default style</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-primary">Primary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-secondary">Secondary message</div>
</div>

<div class="chat chat-start">
  <div class="chat-bubble chat-bubble-accent">Accent message</div>
</div>

En-tête et pied de page du chat

John
Thanks! I'm looking forward to it.
You
I'll see you tomorrow!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="chat chat-start">
  <div class="chat-header">John</div>
  <div class="chat-bubble">Thanks! I'm looking forward to it.</div>
  <time class="text-xs opacity-50">12:45</time>
</div>

<div class="chat chat-end">
  <div class="chat-header">You</div>
  <div class="chat-bubble">I'll see you tomorrow!</div>
  <time class="text-xs opacity-50">12:46</time>
</div>

Fil de conversation

Hello! How can I help?
I need help with my order
I'd be happy to assist you!
html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div>
  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">Hello! How can I help?</div>
  </div>

  <div class="chat chat-end">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-secondary"></div>
    </div>
    <div class="chat-bubble">I need help with my order</div>
  </div>

  <div class="chat chat-start">
    <div class="chat-avatar avatar">
      <div class="w-10 rounded-full bg-primary"></div>
    </div>
    <div class="chat-bubble">I'd be happy to assist you!</div>
  </div>
</div>