ME

Deploying to prod real quick.

R

It's 4:55 PM. On a Friday.

ME

It's a one-line change.

Delivered

R

It's always a one-line change 😭.

Alright, let me take a look.

👍

Oliver is typing...

Komponen Message menata satu pesan di dalam percakapan. Ia mengurus avatar, perataan, header, dan footer yang mengelilingi badan pesan.

Untuk aplikasi AI, komponen Message bisa Anda pakai menampilkan langkah penalaran, pemanggilan tool, dan balasan asisten.

Installation

pnpm dlx kliping@latest add message

Usage

<script setup lang="ts">
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Bubble, BubbleContent } from "@/components/ui/bubble"
import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"
</script>

<template>
  <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>
</template>

Catatan: Message yang mengurus tata letak barisnya — avatar, perataan, header, dan footer. Badan pesan yang terlihat ditampilkan di dalamnya memakai Bubble.

Composition

Susunan berikut adalah cara membangun sebuah message:

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

Pakai MessageGroup untuk menumpuk pesan berurutan dari pengirim yang sama:

MessageGroup
├── Message
└── Message

Features

• Perataan awal dan akhir untuk baris pengirim dan penerima, lewat prop align.
• Slot avatar yang menempel di bagian bawah pesan tanpa bertabrakan dengan footer.
• Slot header dan footer untuk nama pengirim, status, dan aksi pesan.
• Footer mengikuti sisi pesan; aksinya tetap sejajar pada baris align="end".
• Pembungkus grup untuk menumpuk pesan berurutan dari pengirim yang sama.
• Pembungkus polimorfik lewat as atau as-child.
• Style tiap bagian bisa disesuaikan lewat prop class.

Examples

Avatar

Pakai MessageAvatar untuk menampilkan avatar di samping pesan. Isi align="end" pada pesan agar avatarnya berada di sisi akhir.

R

The build failed during dependency installation.

R

Can you share the exact error?

R

Here's the error from the logs

Something went wrong with the build. The libraries are not installed correctly. Try running the build again.

align	Description
start	Align the message to the start of the conversation.
end	Align the message to the end of the conversation.

Grup

Pakai MessageGroup untuk menumpuk pesan berurutan dari pengirim yang sama. Tampilkan MessageAvatar kosong pada pesan-pesan sebelumnya supaya sejajar dengan avatar di pesan terakhir.

I checked the registry addresses.

CN

The component and example JSON now live under the UI registry.

Header dan Footer

Pakai MessageHeader untuk nama pengirim, dan MessageFooter untuk metadata seperti status terkirim atau sudah dibaca.

Olivia

I already checked the logs.

Send the report to the team. Ping @shadcn if you need help.

Read Yesterday

Aksi

Letakkan aksi tingkat pesan di dalam MessageFooter, misalnya tombol salin, coba lagi, atau umpan balik.

The install failure is coming from the workspace package.

Okay drop me a link. Taking a look...

Failed to send

Accessibility

Message hanyalah pembungkus tata letak. Aksesibilitasnya datang dari konten yang Anda letakkan di dalamnya.

Beri label pada aksi yang hanya berupa ikon

Tombol aksi di MessageFooter biasanya hanya berupa ikon, jadi berilah masing-masing sebuah aria-label.

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

Pembaruan Status

Untuk pesan yang masih berjalan, pakai Marker dengan role="status" supaya teknologi bantu membacakan pembaruannya begitu muncul.

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

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	reka-ui@^2.10.3
Files	components/ui/message/message.vue components/ui/message/message-avatar.vue components/ui/message/message-content.vue components/ui/message/message-footer.vue components/ui/message/message-group.vue components/ui/message/message-header.vue components/ui/message/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Message>
  <MessageContent>
    <MessageFooter />
    <MessageHeader />
  </MessageContent>
  <MessageAvatar />
</Message>
<MessageGroup>
  <Message>
    <MessageAvatar />
    <MessageContent />
  </Message>
</MessageGroup>

API Reference

Semua bagian Message menghasilkan <div> secara bawaan. Pakai as untuk memilih elemen lain, atau as-child untuk menggabungkan atribut dan style komponen ke satu elemen atau komponen di dalam slot bawaannya.

Message

Pembungkus baris pesan.

Prop	Type	Default	Description
align?	"start" | "end"	"start"	The alignment of the message in the conversation.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message"
[data-align]	"start" | "end"

MessageGroup

Mengelompokkan pesan berurutan dari pengirim yang sama.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message-group"

MessageAvatar

Slot avatar yang menempel di bagian bawah pesan. Kalau pesannya punya MessageFooter, avatarnya bergeser naik agar tetap sejajar dengan badan pesan, bukan dengan footer.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message-avatar"

MessageContent

Membungkus header, badan pesan, dan footer.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message-content"

MessageHeader

Menampilkan konten di atas pesan, misalnya nama pengirim. Mengikuti sisi pesannya.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message-header"

MessageFooter

Menampilkan konten di bawah pesan, misalnya status atau aksi. Mengikuti sisi pesannya.

Prop	Type	Default	Description
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"message-footer"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --muted, --muted-foreground.