LiveChat
live-chatDisplays live message types, sender levels, pinned items, auto-scroll, and new-message recovery.
Usage
Basic usage
items controlled append, the component automatically rolls to the bottom; supports message / enter / gift / follow / system multiple message types.
<LiveChat
items={[
{ id: "s0", type: "system", text: "Welcome to the live broadcast room~" },
{ id: "e1", type: "enter", user: { name: "Night Ship" } },
{ id: "m1", type: "message", user: { name: "Abai", level: 12 }, text: "Hello anchor~" },
{ id: "g1", type: "gift", user: { name: "Fawn" }, gift: { name: "Be careful", icon: "💖", combo: 6 } },
]}
/>Pinned Announcement
pinned is rendered in the top sticky area (announcements/rules) and does not participate in the scroll flow.
<LiveChat
items={items}
pinned={[{ id: "p1", type: "system", text: "The draw will be held at 8 o'clock tonight, pay attention to not get lost" }]}
/>Video overlay status
overlay C for public screen superimposed on dark video: hide scroll bar, top fade, text turned white with shadow.
<div className="relative aspect-[9/16] bg-black">
<video ... />
<div className="absolute inset-x-2 bottom-2 h-48">
<LiveChat items={items} overlay className="h-full" />
</div>
</div>When to use
Use LiveChat for a one-way livestream public chat. Enable overlay over video. Use Conversation for AI turns or LogViewer for structured logs.
Import
import { LiveChat } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items* | LiveChatItem[] | — | Controlled appended messages. |
| pinned | LiveChatItem[] | — | Pinned notices above the stream. |
| autoScroll | boolean | true | Sticks to bottom until the user scrolls up. |
| maxItems | number | 200 | Render-window limit. |
| overlay | boolean | false | Light text and shadow over dark video. |
| className | string | — | Container class. |
Slots
| Slot | Type | Description |
|---|---|---|
| renderItem | (item: LiveChatItem) => ReactNode | Custom item renderer. |
LiveChatItem is { id; type: "message"\|"enter"\|"gift"\|"follow"\|"system"; user?; text?; gift?; at? }. LiveChatUser is { name; avatar?; level?; badge? }.
Usage notes
- The separator after a message author follows
ConfigProvider locale: the Chinese locale uses a full-width colon, whileenUSuses:. Older custom dictionaries without this field keep the Chinese fallback.
- Scrolling up pauses sticky-bottom behavior and exposes a new-message recovery button; do not force external scrolling.
- Give the stream a fixed-height container.
- Keep
maxItemsbounded rather than passing complete history. - Built-in “Pinned / new messages / joined / followed / sent” copy follows
ConfigProvider locale;enUSprovides English, and the no-provider fallback remains Chinese.
Related
Table · Book3D · ProTable · PricingTable · JsonViewer · EditableTable