Message

A beautiful, feature-rich React component for displaying chat messages with typing animations, copy functionality, and rating capabilities. Built with TypeScript and GSAP animations.

Installation

npm install @sarthakb009/message

Peer Dependencies

Make sure you have these installed in your project:

npm install react react-dom lucide-react gsap @gsap/react

Required versions:

• react ^18.0.0
• react-dom ^18.0.0
• lucide-react ^0.294.0
• gsap ^3.13.0
• @gsap/react ^2.1.2

Usage

Basic Example

import { Message } from '@sarthakb009/message';

function App() {
  return (
    <Message
      role="assistant"
      content="Hello! How can I help you today?"
      timestamp="10:23 AM"
    />
  );
}

With Typing Animation

import { Message } from '@sarthakb009/message';

function App() {
  return (
    <Message
      role="assistant"
      content="This message will animate as if being typed in real-time!"
      timestamp="10:23 AM"
      animateTyping={true}
    />
  );
}

With Callbacks

import { Message } from '@sarthakb009/message';

function App() {
  return (
    <Message
      role="assistant"
      content="Rate this response!"
      timestamp="10:23 AM"
      onCopy={(content) => {
        console.log('Copied:', content);
      }}
      onRate={(isPositive) => {
        console.log('Rated:', isPositive ? 'positive' : 'negative');
      }}
      onRetry={() => {
        console.log('Retry clicked');
      }}
    />
  );
}

User Message with Error State

import { Message } from '@sarthakb009/message';

function App() {
  return (
    <Message
      role="user"
      content="This message failed to send"
      timestamp="10:23 AM"
      status="error"
      onRetry={() => {
        // Retry sending the message
      }}
    />
  );
}

Props

| Prop | Type | Default | Required | Description | |------|------|---------|----------|-------------| | content | string | - | Yes | The text content to display in the message | | role | 'user' \| 'assistant' \| 'system' | 'assistant' | No | The role of the message sender | | avatarSrc | string | undefined | No | URL for a custom avatar image | | timestamp | string | undefined | No | Time string to display (e.g., "10:42 AM") | | status | 'sending' \| 'sent' \| 'error' | 'sent' | No | Status of the message (affects UI display) | | animateTyping | boolean | false | No | Enable typewriter animation effect for assistant messages | | onRetry | () => void | undefined | No | Callback fired when retry button is clicked (shown on error) | | onCopy | (content: string) => void | undefined | No | Callback fired when copy button is clicked | | onRate | (isPositive: boolean \| null) => void | undefined | No | Callback for thumbs up/down rating (true = up, false = down, null = neutral) | | className | string | "" | No | Additional CSS classes to apply to the wrapper |

Features

• ✅ Role-based Styling: Automatically styles user vs assistant messages
• ✅ Typing Animation: Smooth typewriter effect for assistant messages
• ✅ Copy to Clipboard: One-click copy functionality
• ✅ Rating System: Thumbs up/down feedback
• ✅ Error Handling: Visual error states with retry option
• ✅ Hover Actions: Actions appear on hover for clean UI
• ✅ Smooth Animations: GSAP-powered entrance animations
• ✅ TypeScript: Full TypeScript support with exported types
• ✅ Accessible: Proper ARIA labels and semantic HTML

TypeScript

The component is written in TypeScript and exports all types:

import { Message, MessageProps, Role, Status } from '@sarthakb009/message';

const props: MessageProps = {
  content: "Hello!",
  role: "assistant" as Role,
  status: "sent" as Status,
};

License

MIT