npm package: @sarthakb009/message
Description: Message
Author: Sarthak
Latest version: 1.0.3

# 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

```bash
npm install @sarthakb009/message
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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:

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

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

## License

MIT