7onicDESIGN SYSTEM

ChatMessage

ChatMessageは、AIチャットインターフェース向けのメッセージ表示コンポーネントです。送信者のロール（assistant / user）に応じたバブルスタイル、タイピングインジケーター、配信ステータス、ホバーアクションをシンプルなAPIで制御できます。

2
Variants
3
Sizes
Compound
4 Parts
Pure
React

Playground

Preview
messengerbubbledefault
Sure! Let me help you with that.
12:33
That makes sense!
12:34
Message
Type
AI Color
User Color
Size
Radius
Tail
Status
Avatar
Size
Options
Options
Options
<div className="flex flex-col gap-4">
  <ChatMessage avatarSize="md">
    <ChatMessageAvatar />
    <div className="flex flex-col gap-1">
      <ChatMessageContent>Sure! Let me help you with that.</ChatMessageContent>
      <ChatMessageFooter timestamp="12:33" />
    </div>
  </ChatMessage>

  <ChatMessage role="user" color="muted">
    <div className="flex flex-col gap-1 items-end">
      <ChatMessageContent>That makes sense!</ChatMessageContent>
      <ChatMessageFooter timestamp="12:34" />
    </div>
  </ChatMessage>
</div>

Variants

How do design tokens work?
12:34
Bubble
ボーダーと背景色付きのバブルスタイル。チャットUIの標準デザイン。
Default
How do design tokens work?
They map values to semantic names.
Flat
背景なしのフラットスタイル。コンテンツ寄りの表示に適している。
Minimal

Sizes

sm
パディング12 × 6px
フォント13px
Avatar24px
default
パディング14 × 8px
フォント14px
Avatar28px
lg
パディング16 × 10px
フォント16px
Avatar32px

Features

Role

role="assistant"は左揃え、role="user"は右揃えで表示されます。ロールに応じてレイアウトと配置が自動的に切り替わります。

How can I help you?
12:34
That makes sense!
Read12:35
<ChatMessage role="assistant">
  <ChatMessageAvatar />
  <div className="flex flex-col gap-1">
    <ChatMessageContent>How can I help you?</ChatMessageContent>
    <ChatMessageFooter timestamp="12:34" />
  </div>
</ChatMessage>

<ChatMessage role="user" color="muted">
  <div className="flex flex-col gap-1 items-end">
    <ChatMessageContent>That makes sense!</ChatMessageContent>
    <ChatMessageFooter timestamp="12:35" status="read" />
  </div>
</ChatMessage>

UI Type

MessengerはバブルスタイルのチャットUI、Historyはフラットスタイルの履歴UIです。用途に合わせて使い分けます。

Messenger
Sure! Let me help.
12:33
That makes sense!
Read12:34
History
Sure! Let me help.
That makes sense!

Typing

typing=trueにすると、Contentエリアにタイピングドットアニメーションが表示されます。AI生成中の状態表示に使用します。

Here is the previous message.
12:34
<ChatMessage role="assistant" typing>
  <ChatMessageAvatar />
  <ChatMessageContent />
</ChatMessage>

Actions

actionsプロパティにReactNodeを渡すと、バブルにホバーしたときにアクションボタンが表示されます。

Hover over the bubble to reveal actions.
12:34
<ChatMessage
  role="assistant"
  actions={
    <button className="p-1 rounded hover:bg-background-muted">
      <svg>...</svg>
    </button>
  }
>
  <ChatMessageAvatar />
  <div className="flex flex-col gap-1">
    <ChatMessageContent>How can I help?</ChatMessageContent>
    <ChatMessageFooter timestamp="12:34" />
  </div>
</ChatMessage>

API

Component Structure

ChatMessage— Compound · Pure React
ChatMessageコンテキストプロバイダー + Flexコンテナ
ChatMessageAvatarアバター（画像・テキスト・アイコン）
ChatMessageContentバブルまたはフラットのメッセージ内容
ChatMessageFooterタイムスタンプと配信ステータス

サブコンポーネント構成。ChatMessage（Root）、ChatMessageAvatar、ChatMessageContent、ChatMessageFooterの4部構成です。

Props

ChatMessage

role"assistant"
"assistant" | "user"

送信者のロール。assistantは左揃え、userは右揃えでバブルカラーも切り替わる

variant"bubble"
"bubble" | "flat"

バブルの視覚スタイル（bubble: バブルスタイル、flat: フラットスタイル）

color"default"
"default" | "muted" | "primary" | "dark"

バブルの背景色（default: ボーダー付き白、muted: 薄い背景、primary: ブランドカラー、dark: ダーク）

size"default"
"sm" | "default" | "lg"

全体のサイズスケール（sm / default / lg）

radius"2xl"
"md" | "lg" | "xl" | "2xl"

バブルの角丸の大きさ

tailtrue
boolean

吹き出しのテール表示。バブルのアバター側コーナーを非対称（0）にする

avatarSizeundefined
"sm" | "md" | "lg"

アバターのサイズ（sm / md / lg）。バブルとのギャップも合わせて調整される

typingfalse
boolean | { variant?: "dots" | "cursor", color?: "default" | "primary" | "muted", speed?: "slow" | "default" | "fast", label?: string, showLabel?: boolean }

trueにするとContentエリアにタイピングドットアニメーションを表示

actionsundefined
ReactNode

ホバー時に表示するアクションボタン（コピー・リアクションなど）

classNameundefined
string

追加のCSSクラス

ChatMessageAvatar

size"md"
"sm" | "md" | "lg"

アバターの表示サイズ（sm: 24px / md: 28px / lg: 32px）

srcundefined
string

アバター画像のURL

alt"Avatar"
string

アバター画像の代替テキスト

initialsundefined
string

画像がない場合に表示するイニシャル（1〜2文字）

iconundefined
ReactNode

アバター内に表示するカスタムアイコン

classNameundefined
string

追加のCSSクラス

ChatMessageContent

classNameundefined
string

追加のCSSクラス

ChatMessageFooter

timestampundefined
string

タイムスタンプ文字列（例: "12:34 PM"）

statusundefined
ReactNode | "sending" | "sent" | "read" | "error"

配信ステータス（sending / sent / read / error）

sizeundefined
"sm" | "default" | "lg"

フッターのフォントサイズを上書きする（省略するとコンテキストの値を使用）

classNameundefined
string

追加のCSSクラス

Anatomy

1
2
AI
3
Message text
4Read12:34
1
ChatMessage
ロール別のFlexレイアウトコンテナ
2
ChatMessageAvatar
送信者を示すアバター
3
ChatMessageContent
スタイル付きメッセージバブル
4
ChatMessageFooter
タイムスタンプと配信状態

Best Practices

✓

推奨

  • ✓role="assistant"にはChatMessageAvatarを含める
  • ✓role="user"のFooterにstatusを指定して配信状態を示す
  • ✓typing=trueのときはChatMessageContentを空にする
✕

避けるべき

  • ✗role="user"にChatMessageAvatarを配置しない
  • ✗同じメッセージにtypingとchildrenを同時に使わない
  • ✗汎用コンテンツ表示には使わない — Cardを使用する

Accessibility

キーボード操作

Tabアクションボタンへのフォーカス移動
Enter / Spaceフォーカス中のアクションを実行

ARIA / WCAG

  • アバターにaria-hidden="true"を設定（装飾的要素）
  • 配信ステータスはスクリーンリーダーが読み取れるテキストで表示
  • タイピングドットにaria-hidden="true"を設定