Message

A single turn from the user or the assistant, with hover-revealed actions.

Can you shorten this paragraph?

Sure. Shipping is free over €50 and takes two to four working days.

Installation

pnpm dlx shadcn@latest add @jds/message

Usage

import { Message, MessageContent } from "@/components/ai/message"

<Message from="user">
  <MessageContent>Summarize this thread.</MessageContent>
</Message>

API Reference

Message

Prop	Type	Default
`from` Sets alignment and bubble style.	"user" \| "assistant" \| "system"	–

MessageStyleProvider

Prop	Type	Default
`bubbles` Who gets a bubble. For messages outside a Conversation.	"user" \| "all" \| "none"	"user"
`shape` Bubble corners: a tail toward the speaker, fully round, or squarer.	"tail" \| "round" \| "square"	"tail"
`density` Spacing between and inside messages. Compact suits side panels.	"comfortable" \| "compact"	"comfortable"

MessageAction

Prop	Type	Default
`label` Accessible name and tooltip text.	string	–

Conversation Model Picker