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.

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:

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:

   npm install

3. Start the development server:

   npm run dev

4. Build the package:

   npm run build

License

MIT