Message

Import

import { Message, MessageList } from 'tuimorphic';

Usage

The Message component displays chat-style messages with rectangular speech bubbles and triangular pointers.

System

Welcome to the terminal interface.

<Message position="left" author="Alice" timestamp="10:30 AM">
  Hello! How are you?
</Message>

Props

Prop	Type	Default	Description
children	`React.ReactNode`	-	Message content (required)
position	`'left' \| 'right'`	`'left'`	Position of the message bubble
author	`string`	-	Author name displayed above the message
timestamp	`string`	-	Timestamp displayed below the message
className	`string`	-	Additional CSS class names

MessageList

Prop	Type	Default	Description
children	`React.ReactNode`	-	Message components to render
className	`string`	-	Additional CSS class names

Variants

Left Position (Sender)

<Message position="left" author="Alice" timestamp="10:30 AM">
  Hello! How are you?
</Message>

Right Position (Receiver)

<Message position="right" author="Bob" timestamp="10:31 AM">
  I'm doing great, thanks!
</Message>

Conversation Layout

Alice

Hello! How are you today?

10:30 AM

Bob

I'm doing great, thanks for asking!

10:31 AM

Alice

Wonderful! Have you seen the new terminal UI components?

10:32 AM

Bob

Yes! They look amazing. The retro aesthetic is perfect.

10:33 AM

Alice

Agreed! The box-drawing characters add a nice touch.

10:34 AM

<MessageList>
  <Message position="left" author="Alice" timestamp="10:30 AM">
    Hello! How are you?
  </Message>
  <Message position="right" author="Bob" timestamp="10:31 AM">
    I'm doing great, thanks!
  </Message>
  <Message position="left" author="Alice" timestamp="10:32 AM">
    That's wonderful to hear!
  </Message>
</MessageList>

Without Author

<Message position="left" timestamp="10:30 AM">
  Anonymous message
</Message>

Without Timestamp

<Message position="left" author="System">
  This is a system message.
</Message>

Message

On this page