Message Component

The Message component renders individual chat messages with support for different roles, timestamps, and actions.

Import

import { Message } from 'aichatkit'

Usage

Basic Example

basic-message.tsx

import { Message } from 'aichatkit'
 
function BasicMessage() {
  const message = {
    id: '1',
    role: 'assistant',
    content: 'Hello! How can I help you today?',
    timestamp: new Date()
  }
 
  return <Message message={message} />
}

With Actions

message-with-actions.tsx

<Message 
  message={message}
  showActions={true}
  onCopy={(content) => navigator.clipboard.writeText(content)}
  onRetry={() => console.log('Retry message')}
  onEdit={(newContent) => console.log('Edit message:', newContent)}
/>

API Reference

Props

Prop	Type	Default	Description
`message`	`Message`	-	The message object to render
`showActions`	`boolean`	`false`	Whether to show message actions
`showTimestamp`	`boolean`	`false`	Whether to show timestamp
`showAvatar`	`boolean`	`false`	Whether to show user avatar
`onCopy`	`(content: string) => void`	-	Copy action callback
`onRetry`	`() => void`	-	Retry action callback
`onEdit`	`(content: string) => void`	-	Edit action callback

The Message component automatically handles different message types and provides appropriate styling for each role.

Chat MessageList