Message

A chat message with avatar, author, timestamp and actions.

MessageProps packages/core/src/chat-controls.ts:107 ↗

Import

import { Message } from "@tarve/core";

Usage

Message.tsx

import { Button, Message, Text } from "@tarve/core";

<Message
  side="incoming"
  author="Assistant"
  avatarFallback="AI"
  timestamp="10:42"
  actions={<Button variant="ghost" size="sm">Copy</Button>}
>
  <Text>Your build finished in 2.4s.</Text>
</Message>

Props

Prop	Type	Default
`actions`	`Child`	—
`author`	`string`	—
`avatarFallback`	`string`	—
`avatarSrc`	`string`	—
`bubbleVariant`	`BubbleVariant`	`"default"`
`side`	`BubbleSide`	`"incoming"`
`timestamp`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

BubbleSide

type BubbleSide = "incoming" | "outgoing";

BubbleVariant

type BubbleVariant = "default" | "secondary" | "destructive";