CChatMessage

Bong bóng hiển thị một tin nhắn trong hội thoại AI. Thuần trình bày: nhận role và content, không giữ state.

Dùng khi: tự dựng khung hội thoại khác với CChat — ví dụ nhúng vài tin nhắn vào một trang khác, hoặc trang xem lại lịch sử hội thoại.

Không dùng khi: cần khung chat đầy đủ (ô soạn, cuộn, nút dừng) — dùng CChat.

<script setup lang="ts">
// Ba trạng thái hiển thị của một bong bóng: người dùng, trợ lý, và đang chờ token đầu.
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 520px">
    <CChatMessage
      role="user"
      content="Đơn DH-0001 đang ở trạng thái nào?"
    />
    <CChatMessage
      role="assistant"
      content="Đơn DH-0001 đã hoàn thành ngày 03/09/2026."
    />
    <CChatMessage
      role="assistant"
      content=""
      pending
    />
  </div>
</template>

Vai trò

role	Hiển thị
user	Bong bóng căn phải, nền màu nhấn
assistant	Bong bóng căn trái, nền bề mặt
system	Không nên hiển thị — CChat lọc bỏ trước khi render

Chờ token đầu tiên

<CChatMessage role="assistant" content="" pending />

pending hiện chấm gõ nhấp nháy, dùng cho khoảng thời gian giữa lúc gửi câu hỏi và lúc chữ đầu tiên về. Có nội dung rồi thì bỏ pending — nếu không chấm gõ sẽ đứng cạnh chữ.

API

Props

Tên	Kiểu	Mặc định	Mô tả
role*	"system" | "user" | "assistant"	—	Vai trò message — quyết định căn lề và màu bong bóng.
content*	string	—	Nội dung message; hiển thị nguyên văn, không parse markdown.
pending	boolean	false	Đang chờ token đầu tiên (content rỗng) → hiện chấm gõ nhấp nháy.

Lưu ý

• Nội dung hiển thị nguyên văn: xuống dòng được giữ, markdown không được parse. Cần định dạng thì tự xử lý ở tầng trên và chú ý an toàn nội dung.
• Component không giới hạn độ dài; khung chứa nên có overflow riêng.

Liên quan

• CChat — khung hội thoại đầy đủ.
• AI trong sản phẩm.