Channel Chat

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add channel-chat

Usage#

import {
  ChannelChat,
  ChannelChatViewport,
  ChannelChatGroup,
  ChannelChatAvatar,
  ChannelChatGroupHeader,
  ChannelChatAuthor,
  ChannelChatTime,
  ChannelChatMessage,
  ChannelChatComposer,
  ChannelChatInput,
  ChannelChatSend,
  groupChannelMessages,
} from "@/components/ui/channel-chat"

Chat or Channel Chat#

Chat is a two-party thread: you and an assistant, a bubble or a document each, built for streaming answers and reasoning. A channel has many authors talking at once, so it needs different structure: author groups with a name, a callsign and an avatar, separators between days, system notices for who joined, and a log that can be read while it moves. That is this component. It is built out of the same parts: the log scrolls in ScrollArea, the avatar is Avatar, separators are Divider, and the composer is PromptInput laid out as one row.

Anatomy#

Every part is a named export and every part is optional: a log without a header, a composer on its own, a group without an avatar (the text column keeps its place). Grouping is data, not markup: groupChannelMessages turns your flat list into rows, and you render each row with the parts.

import {
  ChannelChat,
  ChannelChatAuthor,
  ChannelChatAvatar,
  ChannelChatCallsign,
  ChannelChatComposer,
  ChannelChatCount,
  ChannelChatEmpty,
  ChannelChatGroup,
  ChannelChatGroupHeader,
  ChannelChatHeader,
  ChannelChatInput,
  ChannelChatMessage,
  ChannelChatMeta,
  ChannelChatSend,
  ChannelChatSeparator,
  ChannelChatSystem,
  ChannelChatTime,
  ChannelChatTitle,
  ChannelChatViewport,
} from "@/components/ui/channel-chat"

<ChannelChat>
  <ChannelChatHeader>
    <ChannelChatTitle />
    <ChannelChatMeta />
  </ChannelChatHeader>
  <ChannelChatViewport>
    <ChannelChatSeparator />
    <ChannelChatGroup>
      <ChannelChatAvatar />
      <ChannelChatGroupHeader>
        <ChannelChatAuthor />
        <ChannelChatCallsign />
        <ChannelChatTime />
      </ChannelChatGroupHeader>
      <ChannelChatMessage />
    </ChannelChatGroup>
    <ChannelChatSystem />
    <ChannelChatEmpty />
  </ChannelChatViewport>
  <ChannelChatComposer>
    <ChannelChatInput />
    <ChannelChatCount />
    <ChannelChatSend />
  </ChannelChatComposer>
</ChannelChat>

Grouping and separators#

Consecutive messages from one author within windowMs (5 minutes) of the previous one share a header. A new local day opens a day separator, a silence of gapMs (an hour) on the same day opens a time separator, and a system notice always ends the run. Pass own on your own groups: they take a soft brand wash and your name in the link ink.

Following and jump to latest#

The viewport opens on the newest message and follows new ones while you are at the bottom. Scroll up and it holds your place: a pill appears over the log, counting what arrived since, and takes you back down. Only a move up leaves the bottom, so the log never loses you halfway through its own smooth scroll. Sending from the composer jumps to the newest message too. Scroll up in the log below, then receive a message.

What the log opened with is history and never animates. Only rows that mount after its first commit fade in, and a batch of more than five messages in one commit (a backlog that loaded late, a reconnect) lands still, as history. To open a different channel as fresh history, give the viewport a key per channel.

Empty states#

ChannelChatEmpty is our compact EmptyState, centered in the room it gets: inside the viewport for a quiet channel, or in place of it when there is no log at all. A composer with nowhere to send takes disabled.

Composer#

maxLength caps the draft, and ChannelChatCount shows length/max only once the draft nears it (20 characters out by default, or counterFrom). When the server refuses a message (too fast, filtered, not delivered), pass the reason as notice: it tucks in behind the composer as PromptInput's banner and is announced as an alert. Enter sends, Shift+Enter breaks the line, and focus returns to the field after a send.

Accessibility#

• The log is role="log" with aria-live="polite": each arrival is read once, without interrupting. Name it with aria-label (the channel).
• Avatars are decorative (the name sits beside them). Times are <time> elements; pass dateTime.
• The hidden jump pill is out of the tab order and the accessibility tree; it rejoins both when it shows.
• The counter is a live region that stays mounted, and reads “15 characters left” rather than the visual 185/200. The rejected notice is role="alert".
• Arrivals honor reduced motion: no fade, and the jump is instant.

Older engines#

Built for Chromium 103 (in-game browsers such as CEF): no :has(), container queries or standalone translate/scale properties. The pill moves with transform, and the field grows with PromptInput's measured fallback where field-sizing is missing.

API reference#

FAQ#