npm package: @sarthakb009/conversation
Description: Conversation
Author: Sarthak
Latest version: 1.0.3

# Conversation

A complete React chat interface component with message display, input field, typing indicators, and interactive actions. Perfect for chat applications, AI assistants, or customer support interfaces. Built with TypeScript.

## Installation

```bash
npm install @sarthakb009/conversation
```

## Peer Dependencies

Make sure you have these installed in your project:

```bash
npm install react react-dom lucide-react
```

Required versions:
- `react` ^18.0.0
- `react-dom` ^18.0.0
- `lucide-react` ^0.294.0

## Usage

### Basic Example

```tsx
import { Conversation } from '@sarthakb009/conversation';
import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([
    {
      id: 1,
      role: 'user',
      content: 'Hello!',
      timestamp: '10:00 AM',
    },
    {
      id: 2,
      role: 'assistant',
      content: 'Hi there! How can I help you?',
      timestamp: '10:01 AM',
    },
  ]);

  const handleSend = (message: string) => {
    const newMessage = {
      id: messages.length + 1,
      role: 'user' as const,
      content: message,
      timestamp: new Date().toLocaleTimeString(),
    };
    setMessages([...messages, newMessage]);
  };

  return (
    <Conversation
      messages={messages}
      onSend={handleSend}
      height="600px"
    />
  );
}
```

### With Loading State

```tsx
import { Conversation } from '@sarthakb009/conversation';
import { useState } from 'react';

function App() {
  const [messages, setMessages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  const handleSend = async (message: string) => {
    // Add user message
    setMessages(prev => [...prev, {
      id: Date.now(),
      role: 'user',
      content: message,
    }]);

    // Show loading
    setIsLoading(true);

    // Simulate API call
    setTimeout(() => {
      setMessages(prev => [...prev, {
        id: Date.now() + 1,
        role: 'assistant',
        content: 'This is a response!',
      }]);
      setIsLoading(false);
    }, 2000);
  };

  return (
    <Conversation
      messages={messages}
      isLoading={isLoading}
      onSend={handleSend}
    />
  );
}
```

### With Callbacks

```tsx
import { Conversation } from '@sarthakb009/conversation';

function App() {
  return (
    <Conversation
      messages={messages}
      onSend={(message) => console.log('Sent:', message)}
      onCopy={(content) => {
        navigator.clipboard.writeText(content);
        console.log('Copied:', content);
      }}
      onThumbsUp={(messageId) => {
        console.log('Thumbs up for:', messageId);
      }}
      onThumbsDown={(messageId) => {
        console.log('Thumbs down for:', messageId);
      }}
    />
  );
}
```

### Custom Styling

```tsx
import { Conversation } from '@sarthakb009/conversation';

function App() {
  return (
    <Conversation
      messages={messages}
      onSend={handleSend}
      height="500px"
      width="800px"
      className="my-conversation"
      style={{ border: '2px solid #e5e7eb' }}
      placeholder="Type your message here..."
    />
  );
}
```

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `messages` | `ConversationMessage[]` | - | **Yes** | Array of messages to display |
| `onSend` | `(message: string) => void` | - | **Yes** | Callback fired when message is sent |
| `isLoading` | `boolean` | `false` | No | Shows typing indicator when true |
| `placeholder` | `string` | `"Type a message..."` | No | Placeholder text for input field |
| `height` | `string` | `"500px"` | No | Height of the conversation container |
| `width` | `string` | `"100%"` | No | Width of the conversation container |
| `onCopy` | `(content: string) => void` | `undefined` | No | Callback fired when copy button is clicked |
| `onThumbsUp` | `(messageId: number \| string) => void` | `undefined` | No | Callback fired when thumbs up is clicked |
| `onThumbsDown` | `(messageId: number \| string) => void` | `undefined` | No | Callback fired when thumbs down is clicked |
| `className` | `string` | `""` | No | Additional CSS classes |
| `style` | `CSSProperties` | `undefined` | No | Inline styles for container |

## ConversationMessage Type

```tsx
interface ConversationMessage {
  id: number | string;
  role: 'user' | 'assistant';
  content: string;
  timestamp?: string;
}
```

## Features

- ✅ **Message Display**: Clean chat bubble interface
- ✅ **Auto-scroll**: Automatically scrolls to latest message
- ✅ **Typing Indicator**: Animated dots when loading
- ✅ **Interactive Actions**: Copy, thumbs up/down for assistant messages
- ✅ **Keyboard Support**: Enter to send, Shift+Enter for new line
- ✅ **Hover Effects**: Actions appear on message hover
- ✅ **Responsive**: Adapts to different screen sizes
- ✅ **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 { Conversation, ConversationProps, ConversationMessage } from '@sarthakb009/conversation';

const message: ConversationMessage = {
  id: 1,
  role: 'user',
  content: 'Hello!',
  timestamp: '10:00 AM',
};

const props: ConversationProps = {
  messages: [message],
  onSend: (msg) => console.log(msg),
};
```

## License

MIT