open-index/open-npm huggingface dataset:
npm package: @mikebel111/chatui
Description: A chat UI component that can be installed via npx
Latest version: 1.0.0

# ChatUI - NPX Chat UI Component

A customizable chat UI component that can be installed via npx.

## Features

- Modern, responsive chat interface
- Message bubbles with sender information and timestamps
- Support for attachments (images, files)
- Typing indicators
- Dark mode support
- Customizable styling with Tailwind CSS
- TypeScript support

## Installation

This package is designed to be used with npx. You don't need to install it globally.

```bash
npx chatui
```

This will create a `chat-ui` directory in your current project with all the necessary components.

## Usage

After running the npx command, you can import and use the Chat component in your React application:

```jsx
import { Chat } from './chat-ui';
import './chat-ui/styles/index.css';

function App() {
  return (
    <div style={{ height: '500px', width: '400px' }}>
      <Chat 
        headerTitle="Customer Support"
        inputPlaceholder="Type your message..."
        onSendMessage={(message, attachments) => {
          console.log('Message sent:', message, attachments);
          // Handle sending the message to your backend
        }}
      />
    </div>
  );
}
```

## Props

The `Chat` component accepts the following props:

| Prop | Type | Description |
|------|------|-------------|
| `initialMessages` | `Message[]` | Array of initial messages to display |
| `initialParticipants` | `Participant[]` | Array of participants in the chat |
| `onSendMessage` | `(content: string, attachments?: any[]) => void` | Callback function when a message is sent |
| `headerTitle` | `string` | Title to display in the header |
| `inputPlaceholder` | `string` | Placeholder text for the input field |
| `showAttachmentButton` | `boolean` | Whether to show the attachment button |
| `className` | `string` | Additional CSS classes to apply to the container |

## Development

If you want to contribute to this project or modify it for your own use:

1. Clone the repository
2. Install dependencies:
   ```bash
   npm install
   ```
3. Start the development server:
   ```bash
   npm run dev
   ```
4. Build the package:
   ```bash
   npm run build
   ```

## License

MIT