LINE 風格聊天
台灣人最熟的聊天 UI 組件：綠白氣泡、已讀、貼圖、日期分隔。
台灣使用者最熟悉的聊天視覺語彙：右側綠氣泡、左側白氣泡（深色模式自動適配）、每則時間與「已讀」小字、大型貼圖訊息、日期置中分隔與「輸入中…」動畫氣泡，新訊息掛載時逐則彈入。僅取通用視覺語彙，不含任何品牌標誌或名稱。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<LineChatBubbles />
安裝
npx shadcn@latest add https://webberui.com/r/line-chat-bubbles.json或在 components.json 設定 registries 後，改用 @webberui/line-chat-bubbles 安裝。
安裝依賴後，從 registry JSON（/r/line-chat-bubbles.json 的 files[0].content）複製 line-chat-bubbles.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import {
LineChatBubbles,
type LineChatMessage,
} from "@/components/ui/line-chat-bubbles";
const messages: LineChatMessage[] = [
{ divider: "今天" },
{
side: "left",
name: "阿哲",
avatar: "🍱",
text: "午餐要不要一起訂便當？",
time: "11:42",
},
{ side: "right", text: "好啊，我要滷雞腿飯", time: "11:43", read: true },
{ side: "right", sticker: "🧋", time: "11:45", read: true },
];
<LineChatBubbles messages={messages} typing className="h-80" />即時聊天情境下，把新訊息 append 到 messages 陣列即可，新掛載的氣泡會自動彈入並捲動到底部；對方打字時把 typing 設為 true 顯示「輸入中…」氣泡。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
messages | LineChatMessage[] | — | 訊息串，由上到下依序渲染 |
typing | boolean | false | 是否在底部顯示左側「輸入中…」動畫氣泡 |
typingAvatar | string | — | 輸入中氣泡旁的頭像 emoji |
autoScroll | boolean | true | 訊息或輸入中狀態變動時自動捲動到底部 |
className | string | — | 透傳到聊天容器（可覆寫高度、圓角與背景色） |
LineChatMessage
| 欄位 | 型別 | 說明 |
|---|---|---|
side | "left" | "right" | 訊息位置：left 對方白氣泡、right 自己綠氣泡，預設 left |
text | string | 文字內容（與 sticker 擇一，sticker 優先） |
sticker | string | 貼圖訊息：傳入 emoji，以大型貼圖樣式呈現 |
time | string | 訊息時間字串，例如 "11:42"，由呼叫端自行格式化 |
read | boolean | 顯示「已讀」小字（慣例上標在右側自己的訊息） |
name | string | 左側訊息的發送者名稱，顯示於氣泡上方 |
avatar | string | 左側訊息的頭像 emoji |
divider | string | 日期分隔籤條：設定後此則只渲染置中日期，忽略其他欄位 |
可及性
- 訊息容器使用
role="log"，輔助科技會將新加入的訊息視為即時內容播報 - 「已讀」與時間為可見文字可直接朗讀；輸入中氣泡附
sr-only說明「對方輸入中」，貼圖 emoji 帶aria-label - 使用者系統開啟「減少動態效果」時，彈入動畫與「輸入中…」三點跳動停用，自動捲動改為即時定位不做平滑捲動