# @pubuduth-aplicy/chat-ui

A flexible and easy-to-use React chat UI component.

## Description

`@pubuduth-aplicy/chat-ui` provides a complete chat interface that can be easily integrated into any React application. It includes features like real-time messaging, user presence, and a customizable interface. The component is built with TypeScript, React, and Zustand for state management.

## Installation

To install the package, use npm or yarn:

```bash
npm install @pubuduth-aplicy/chat-ui
```

or

```bash
yarn add @pubuduth-aplicy/chat-ui
```

## Usage

To use the chat component, you need to initialize the configuration, wrap your application with the `ChatProvider`, and then render the `Chat` component.

### 1. Initialize the Configuration

First, you need to initialize the chat configuration at the entry point of your application (e.g., `index.tsx` or `main.tsx`).

```tsx
// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { initChatConfig } from '@pubuduth-aplicy/chat-ui';

// Initialize the chat configuration
initChatConfig({
  apiUrl: 'YOUR_API_URL', // Your backend API URL
  role: 'user', // Optional: 'user' or 'admin'
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);
```

### 2. Wrap with ChatProvider

Next, wrap your component tree with `ChatProvider`. This provider manages the chat state and WebSocket connection.

```tsx
// src/App.tsx
import { ChatProvider, Chat } from '@pubuduth-aplicy/chat-ui';

function App() {
  const userId = 'CURRENT_USER_ID'; // The ID of the currently logged-in user

  return (
    <ChatProvider userId={userId}>
      <div className="App">
        {/* Your other components */}
        <Chat />
      </div>
    </ChatProvider>
  );
}

export default App;
```

### 3. Render the Chat Component

Finally, render the `<Chat />` component wherever you want the chat interface to appear.

## Configuration

### `initChatConfig(config)`

This function initializes the chat component's configuration. It must be called once before any chat components are rendered.

**Parameters:**

*   `config` (object):
    *   `apiUrl` (string, required): The base URL of your chat backend. The WebSocket connection will be derived from this URL.
    *   `role` (string, optional): The role of the user, e.g., 'user' or 'admin'.

## API Reference

### `<ChatProvider />`

This component provides the chat context to its children.

**Props:**

*   `userId` (string, required): The unique identifier for the current user.
*   `children` (ReactNode, required): The child components. The `<Chat />` component must be a descendant of `ChatProvider`.

### `<Chat />`

This component renders the main chat interface. It takes no props.

## Development

To set up the project for local development:

1.  **Clone the repository:**
    ```bash
    git clone https://github.com/pubuduth-aplicy/chat-ui.git
    cd chat-ui
    ```

2.  **Install dependencies:**
    ```bash
    npm install
    ```

3.  **Run the development server:**
    This project uses Vite. To run the development server, you can add a `dev` script to your `package.json`:
    ```json
    "scripts": {
      "dev": "vite",
      "build": "tsc",
      "prepare": "npm run build"
    }
    ```
    Then run:
    ```bash
    npm run dev
    ```

## Building

To build the component for production, run the following command. This will transpile the TypeScript code.

```bash
npm run build
```

For a full production build, you should use `vite build`. You can add this to your `package.json`:

```json
"scripts": {
  "build:vite": "vite build"
}
```

## License

This project is licensed under the [ISC License](LICENSE).