Message

会話内にメッセージを表示します。アバター、ヘッダー、フッター、配置はオプションです。

Base Radix React Aria

本番環境にすぐデプロイします。

金曜日の午後4時55分だよ。

1行だけの変更だよ。

配信済み

いつも「1行だけの変更」なんだよね 😭。

わかった、確認するよ。

👍

Oliver が入力中...

import {
  Avatar,
  AvatarFallback,

Message コンポーネントは、会話内の 1 つのメッセージをレイアウトします。メッセージ表示部分の周囲にあるアバター、配置、ヘッダー、フッターを扱います。

AI アプリケーションでは、Message コンポーネントを使って推論ステップ、ツール呼び出し、アシスタントメッセージをレンダリングできます。

インストール


pnpm dlx shadcn@latest add message

使い方

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"

<Message>
  <MessageAvatar>
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  </MessageAvatar>
  <MessageContent>
    <Bubble>
      <BubbleContent>How can I help you today?</BubbleContent>
    </Bubble>
  </MessageContent>
</Message>

注意: Message は行のレイアウト（アバター、配置、ヘッダー、フッター）を管理します。実際に表示されるメッセージ本体は、内部に配置した Bubble でレンダリングしてください。会話全体を囲むスクロールコンテナには MessageScroller を使用します。

構成

メッセージを作成するには、次の構成を使用します。

Message
├── MessageAvatar
└── MessageContent
    ├── MessageHeader
    ├── Bubble
    └── MessageFooter

同じ送信者からの連続メッセージをスタックするには、MessageGroup を使用します。

MessageGroup
├── Message
└── Message

機能

align プロップによる、送信者側・受信者側の行の先頭/末尾揃え
メッセージの下端に固定され、フッターと重ならないアバタースロット
送信者名やステータス、メッセージアクション用のヘッダー・フッタースロット
フッターはメッセージ側に追従し、align="end" の行でもアクションの位置が揃います
同じ送信者からの連続メッセージをまとめて表示するグループラッパー
すべてのパーツに用意された className プロップによるカスタマイズ可能なスタイル

アバター

Use MessageAvatar to render an avatar next to the message. Set align="end" on the message to align the avatar to the end of the message.

依存関係のインストール中にビルドが失敗しました。

正確なエラーを共有してもらえますか？

ログからのエラーです

ビルドで問題が発生しました。ライブラリが正しくインストールされていません。もう一度ビルドを実行してみてください。

import {
  Avatar,
  AvatarFallback,

align	Description
`start`	メッセージを会話の先頭に揃えます。
`end`	メッセージを会話の末尾に揃えます。

グループ

MessageGroup を使用して、同じ送信者からの連続したメッセージをスタックします。前のメッセージに空の MessageAvatar をレンダリングして、最後のメッセージのアバターと位置を合わせます。

レジストリのアドレスを確認しました。

コンポーネントとサンプルのJSONは、UIレジストリ配下に置かれるようになりました。

import {
  Avatar,
  AvatarFallback,

ヘッダーとフッター

Use MessageHeader for a sender name and MessageFooter for metadata such as a delivery or read status.

Olivia

すでにログを確認しました。

レポートをチームに送ってください。手伝いが必要なら @shadcn にメンションしてください。

既読昨日

import { Bubble, BubbleContent } from "@/components/ui/base/bubble"
import {
  Message,

アクション

コピー、再試行、フィードバックボタンなど、メッセージレベルのアクションは MessageFooter に配置します。

インストールの失敗はワークスペースパッケージが原因です。

了解、リンクを送ってください。確認します...

送信に失敗しました

import {
  CopyIcon,
  RefreshCcwIcon,

添付ファイル

画像です。PDFに追加してもらえますか？表紙に使ってください。

完了しました。画像を表紙に追加したPDFです。

sales-dashboard.pdfPDF · 2.4 MB

ありがとう。いい感じです。

"use client"

import { DownloadIcon, FileTextIcon } from "lucide-react"

アクセシビリティ

Message はレイアウトのための装飾的なラッパーです。アクセシビリティは、その内部に配置するコンテンツによって決まります。

アイコンのみのアクションにラベルを付ける

MessageFooter 内のアクションボタンは通常アイコンのみなので、それぞれに aria-label を付けてください。

<MessageFooter>
  <Button variant="ghost" size="icon" aria-label="Copy">
    <CopyIcon />
  </Button>
</MessageFooter>

ステータス更新

処理中のメッセージには、role="status" を指定した Marker を使用し、更新が表示された際に支援技術が読み上げるようにします。

<Message>
  <Marker role="status">
    <MarkerIcon>
      <Spinner />
    </MarkerIcon>
    <MarkerContent>Checking the logs...</MarkerContent>
  </Marker>
</Message>

API リファレンス

Message

メッセージ行ラッパー。

Prop	Type	Default	Description
`align`	`"start" \| "end"`	`"start"`	The alignment of the message in the conversation.
`className`	`string`	-	Additional classes to apply to the row.

MessageGroup

同じ送信者からの連続したメッセージをグループ化します。

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the group root.

MessageAvatar

アバタースロット。メッセージの下部に配置されます。メッセージに MessageFooter が含まれている場合、アバターは上に移動して、フッターではなくメッセージの表面に合わせて配置されます。

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the avatar slot.

MessageContent

Wraps the header, message surface, and footer.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the content slot.

MessageHeader

メッセージの上に送信者名などのコンテンツを表示します。align に関係なく、先頭に揃えられます。

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the header.

MessageFooter

Displays content below the message, such as status or actions. Aligns to the message side.

Prop	Type	Default	Description
`className`	`string`	-	Additional classes to apply to the footer.

Menubar Message Scroller

On This Page

インストール使い方構成機能アバターグループヘッダーとフッターアクション添付ファイルアクセシビリティアイコンのみのアクションにラベルを付けるステータス更新 API リファレンス Message MessageGroup MessageAvatar MessageContent MessageHeader MessageFooter

shadcn/uiアプリをVercelにデプロイ

OpenAI、Sonos、Adobeなどに採用されています。

Vercelは、アプリや機能を大規模にデプロイするためのツールとインフラを提供します。