Data display

Chat

Themed chat message log with bubble variants, avatars, and accessible inbound-message announcements.

03

Import

#import

Add the symbol to your component's imports array. The walkthrough below shows the most common usages — copy & tweak.

import { KjChatLogComponent } from '@kouji-ui/components';
04

Playground

#playground
Assistant

How can I help you today?

You

Summarise yesterday's release notes.

ReadAssistant

Three highlights — token system, accordion polish, and overlay fixes.

self variant
bubble size
read state
messages
<kj-chat-log kjChatLogLabel="Conversation with the assistant">
  <kj-chat kjSide="start" kjChatAuthor="assistant">
    <kj-chat-avatar>
      <kj-avatar content="AI" alt="Assistant" />
    </kj-chat-avatar>
    <kj-chat-header>Assistant <time>12:46</time></kj-chat-header>
    <kj-chat-bubble kjVariant="default" kjSize="md">How can I help you today?</kj-chat-bubble>
  </kj-chat>
  <kj-chat kjSide="end" kjChatAuthor="me">
    <kj-chat-header>You <time>12:47</time></kj-chat-header>
    <kj-chat-bubble kjVariant="primary" kjSize="md">Summarise yesterday's release notes.</kj-chat-bubble>
    <kj-chat-footer kjState="read">Read</kj-chat-footer>
  </kj-chat>
  <kj-chat kjSide="start" kjChatAuthor="assistant">
    <kj-chat-avatar>
      <kj-avatar content="AI" alt="Assistant" />
    </kj-chat-avatar>
    <kj-chat-header>Assistant <time>12:48</time></kj-chat-header>
    <kj-chat-bubble kjVariant="default" kjSize="md">Three highlights — token system, accordion polish, and overlay fixes.</kj-chat-bubble>
  </kj-chat>
</kj-chat-log>