Skip to main content
Frutjam logoFrutjam
v2.3.0
Theme

Thành phần bong bóng trò chuyện

Cập nhật lần cuối:

Thành phần bong bóng trò chuyện CSS Tailwind chỉ có CSS. Vị trí bắt đầu và kết thúc cho tin nhắn đã gửi và nhận, có hình đại diện và dấu thời gian. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Các thành phần trò chuyện hiển thị tin nhắn hội thoại ở định dạng có tổ chức, dễ đọc. Được xây dựng bằng HTML ngữ nghĩa và bố cục linh hoạt, bong bóng trò chuyện thể hiện cả thông báo của người dùng và hệ thống. Hệ thống trò chuyện Frutjam hỗ trợ nhiều màu sắc, cách sắp xếp và kiểu dáng — lý tưởng cho giao diện nhắn tin, bảng hỗ trợ khách hàng và giao diện người dùng đàm thoại.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lớp họcKiểuSự miêu tả
chatCăn cứWrapper for a single chat message row
chat-bubbleCông cụ sửa đổiStyled message bubble
chat-avatarCông cụ sửa đổiAvatar displayed alongside the message
chat-headerCông cụ sửa đổiSender name or metadata above the bubble
chat-footerCông cụ sửa đổiTimestamp or status below the bubble
chat-startCông cụ sửa đổiAligns bubble to the left (incoming message)
chat-endCông cụ sửa đổiAligns bubble to the right (outgoing message)
chat-xsKích cỡCực nhỏ
chat-smKích cỡBé nhỏ
chat-mdKích cỡTrung bình (mặc định)
chat-lgKích cỡLớn
chat-xlKích cỡCực lớn
chat-bubble-primaryMàu sắcPrimary theme color bubble
chat-bubble-secondaryMàu sắcSecondary theme color bubble
chat-bubble-accentMàu sắcAccent theme color bubble
chat-bubble-neutralMàu sắcNeutral theme color bubble
chat-bubble-infoMàu sắcInfo semantic color bubble
chat-bubble-successMàu sắcSuccess semantic color bubble
chat-bubble-warningMàu sắcWarning semantic color bubble
chat-bubble-errorMàu sắcError semantic color bubble

Cách sử dụng cơ bản

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>

Chat with 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>

Chat Sizes

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>

Chat Styles

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>

Chat Header and Footer

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>

Conversation Thread

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Trò chuyện chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP