CChat

Khung hội thoại AI hoàn chỉnh: danh sách tin nhắn tự cuộn, ô soạn có phím tắt, nút Gửi đổi thành Dừng khi đang nhận dữ liệu.

Dùng khi: sản phẩm có trợ lý AI — tra cứu, tóm tắt, soạn nội dung.

Không dùng khi: chỉ cần một lần gọi AI không có hội thoại (tóm tắt một đoạn văn bản) — gọi thẳng useAiChat rồi hiển thị kết quả theo cách của trang.

<script setup lang="ts">
import { ref } from 'vue'
import type { ChatMessage } from '@tasco/ui'

// CChat là component ĐƯỢC ĐIỀU KHIỂN: không tự gọi API. Ở app thật, `messages`,
// `status`, `error` đến từ useAiChat của @tasco/ai. Demo này giả lập stream để
// thấy đúng hành vi: nút Gửi đổi thành Dừng, chấm gõ khi chờ token đầu.
const messages = ref<ChatMessage[]>([
  { role: 'assistant', content: 'Chào bạn, mình có thể tra cứu đơn hàng giúp gì?' },
])
const status = ref<'idle' | 'streaming' | 'error'>('idle')

let timer: ReturnType<typeof setInterval> | undefined

function onSend(text: string) {
  messages.value = [...messages.value, { role: 'user', content: text }, { role: 'assistant', content: '' }]
  status.value = 'streaming'

  const reply = 'Đơn DH-0001 của Công ty An Bình đang ở trạng thái Hoàn thành, giá trị 12.500.000 ₫.'
  let index = 0
  timer = setInterval(() => {
    index += 3
    const last = messages.value[messages.value.length - 1]
    if (last) last.content = reply.slice(0, index)
    if (index >= reply.length) onStop()
  }, 40)
}

function onStop() {
  if (timer) clearInterval(timer)
  timer = undefined
  status.value = 'idle'
}

function onClear() {
  onStop()
  messages.value = []
}
</script>

<template>
  <div style="max-width: 560px">
    <CChat
      title="Trợ lý đơn hàng"
      :messages="messages"
      :status="status"
      @send="onSend"
      @stop="onStop"
      @clear="onClear"
    />
  </div>
</template>

Component được điều khiển

CChat không gọi API. Nó nhận messages, status, error từ ngoài và phát send, stop, clear — nhờ vậy tầng UI không phụ thuộc tầng AI.

Nối với useAiChat của @tasco/ai:

<script setup lang="ts">
import { useAiChat } from '@tasco/ai'

const { messages, status, error, send, abort, reset } = useAiChat()
</script>

<template>
  <CChat
    :messages="messages"
    :status="status"
    :error="error?.message"
    @send="send"
    @stop="abort"
    @clear="reset"
  />
</template>

Sự kiện	Nối vào	Ý nghĩa
@send(text)	send	Người dùng nhấn Enter hoặc bấm Gửi
@stop	abort	Dừng stream, giữ phần đã nhận
@clear	reset	Xoá hội thoại

Phím tắt và IME

• Enter gửi, Shift + Enter xuống dòng.
• Đang gõ tiếng Việt kiểu telex/VNI (IME đang soạn) thì Enter không cắt ngang — tránh gửi nhầm khi đang chọn dấu.
• Ô nhập khoá khi status === 'streaming' hoặc khi truyền disabled.

Trạng thái

status	Giao diện
idle	Nút Gửi; ô nhập mở
streaming	Nút đổi thành Dừng; ô nhập khoá; tin nhắn cuối hiện chấm gõ tới khi có token đầu
error	Ô nhập mở lại để người dùng thử lại

Lỗi hiển thị bằng error (chuỗi) dưới dạng dải cảnh báo trong khung chat:

<CChat :error="error?.message" />

Tin nhắn role: 'system' bị lọc khỏi giao diện — prompt hệ thống không bao giờ phô ra cho người dùng.

API

Props

Tên	Kiểu	Mặc định	Mô tả
messages*	ChatMessage[]	—	Lịch sử hội thoại — bind thẳng `messages` của useAiChat.
status	"idle" | "error" | "streaming"	'idle'	Vòng đời phiên chat — 'streaming' đổi nút Gửi thành Dừng.
error	string | null	null	Thông báo lỗi hiển thị dạng Alert (thường là error.message).
title	string	''	Tiêu đề khung chat.
placeholder	string	'Nhập tin nhắn… (Enter để gửi, Shift+Enter xuống dòng)'	Gợi ý trong ô nhập.
emptyText	string	'Bắt đầu cuộc trò chuyện với trợ lý AI.'	Văn bản khi hội thoại trống.
disabled	boolean	false	Khoá ô nhập (ví dụ chưa đăng nhập / hết quota).

Sự kiện

Tên	Payload	Mô tả
send	[text: string]	Gửi tin nhắn (Enter hoặc bấm Gửi) — nối thẳng vào useAiChat().send.
stop	[]	Dừng stream đang chạy, giữ lại phần đã nhận — useAiChat().abort.
clear	[]	Xoá hội thoại — useAiChat().reset.

Khả năng tiếp cận

• Ô soạn là <textarea> thật, có nhãn; phím tắt không thay thế nút — nút Gửi luôn hiện và bấm được.
• Danh sách tin nhắn tự cuộn xuống cuối khi có nội dung mới; người dùng cuộn lên đọc lại thì đó là thao tác của họ, đừng ép cuộn lại bằng code của trang.
• Nội dung trả về hiển thị nguyên văn, không parse markdown — không có nguy cơ HTML lạ chen vào.

Lưu ý

• Khoá bằng disabled khi người dùng chưa đăng nhập hoặc hết hạn mức, kèm empty-text giải thích.
• Nội dung AI có thể sai: đặt câu nhắc kiểm chứng ngay cạnh khung chat với nghiệp vụ quan trọng.
• Đừng đưa dữ liệu nhạy cảm vào prompt mặc định — xem AI trong sản phẩm.

Liên quan

• CChatMessage — bong bóng tin nhắn.
• AI trong sản phẩm — useAiChat, BFF proxy, thư viện prompt.