Message

fandhe-frontend-pre-styled-ui の message mod が提供するスタイル済み Message 部品です。AI チャット UI の「会話 1 発言」を表現する Root / Avatar / Header / Content / Footer / Group の 6 パーツ構成で、発言者の役割・整列・応答待ち・送信失敗を見た目に反映します。

role（user / assistant / system）・align（start / end）・loading / error は headless 層が出力する data-role / data-align / data-loading / data-error を CSS セレクタとして参照するだけで、class ベースの軸は持ちません。role ごとに content の背景・文字色が切り替わり（user は accent、assistant は muted、system は透明 + 斜体）、loading は root を半透明化、error は content の背景・文字色・枠線を危険色へ切り替えます。

group は複数 root をまとめる連続発言のコンテナです。2 件目以降の root は余白が詰まり、avatar は幅を残したまま非表示になります（display: none ではなく visibility: hidden を使うことで先頭行との横位置ずれを防ぎます）。応答のストリーミング通知（aria-live）や応答待ちの読み上げ（aria-busy）はこの部品では付与しません。通知が必要な場合は呼び出し側が自前で aria-live リージョンを合成してください。

バリデーション・送信処理・Markdown レンダリングといったアプリケーションロジックはこの部品では実装しません。

Demo

AI チャット UI の会話 1 発言。data-role（user/assistant/system）・data-align（start/end）は headless の data-* を参照するのみで class 軸は持ちません。group は連続発言をまとめ、2 件目以降の avatar を CSS で省略します。

YOU

You

What is the release checklist for this crate?

09:41

Assistant

Bump the crate version, run the golden tests, then open a PR.

Copy · Regenerate

Here is the first part of the answer.

...and here is a follow-up detail.

Thinking...

YOU

Message failed to send.

The assistant joined the conversation.

Features

MessageRole（User/Assistant/System、message.rs recipe() の data-role 参照）で発言者ごとに content の背景・文字色を切り替える
MessageAlign（Start/End）で root の水平整列を切り替える（data-role とは独立した軸、headless message.rs モジュール doc「会話系 4 部品の共通語彙」参照）
root/avatar/header/content/footer/group の 6 パーツで会話 1 発言を構造化する
loading/error の bool props で data-loading/data-error 存在属性を切り替え、応答待ち・送信失敗を見た目のみで表す（判定・再送はアプリ責務）
group は連続発言をまとめるコンテナで、2 件目以降の root の余白を詰め avatar を非表示にする raw CSS 追記を持つ（message.rs モジュール doc「raw CSS 追記の理由」節参照）
バリデーション・送信処理・Markdown レンダリングはこの部品では実装しない（docs/policy/intentional-non-adoption.md §3.25 規則 1、message.rs モジュール doc「責務境界」節）

Anatomy

root
  avatar
  header
  content
  footer
group

API Reference

Arguments

Name	Type	Default	Description
`role`	`MessageRole`	`User`	発言者の役割（User/Assistant/System。data-role として出力され、content の背景・文字色を切り替える）。
`align`	`MessageAlign`	`Start`	root の水平整列（Start/End。role から独立した軸で、center は持たない）。
`loading`	`bool`	`false`	true の場合 data-loading 存在属性を付与し、root を半透明化する（応答待ちの表示のみ）。
`error`	`bool`	`false`	true の場合 data-error 存在属性を付与し、content の背景・文字色・枠線を危険色へ切り替える（送信失敗の表示のみ）。

Data Attributes

Part	Attribute	Observed Values
`root`	`data-align`	`end`, `start`
`root`	`data-error`	（値なし）
`root`	`data-loading`	（値なし）
`root`	`data-role`	`assistant`, `system`, `user`

CSS Variables

Variable	Default
`--fandhe-message-content-bg`	—
`--fandhe-message-content-border`	—
`--fandhe-message-content-fg`	—
`--fandhe-message-max-width`	`42rem`

Examples

Conversation turn

user（align=end）と assistant（align=start）の 1 往復の例です。

YOU

What is the release checklist?

Bump the version, run the golden tests, open a PR.

Consecutive assistant messages in a group

group で連続発言をまとめると、2 件目以降の avatar が省略され余白が詰まります。

Here is the first part.

...and a follow-up detail.

Loading and error states

data-loading（応答待ち）と data-error（送信失敗）の表示状態の例です。

Thinking...

Message failed to send.

Accessibility

WAI-ARIA

Attribute	Description
role="listitem" (root)	root は role="listitem" を固定付与する（headless message.rs モジュール doc「role="listitem"/role="list"」節参照）。
role="list" / aria-label (group)	group は role="list" を固定付与し、渡した label が空でなければ aria-label へ出力する（root の listitem に対する required context）。
(付与しない) aria-live / aria-busy	ストリーミング通知・応答待ちの読み上げはアプリ固有の UX 判断のため、本モジュールは data-loading/data-error の見た目のみを担い aria-live/aria-busy は付与しない（headless message.rs モジュール doc「aria-live/aria-busy を付けない理由」節参照）。