@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:

npm install @pubuduth-aplicy/chat-ui

or

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).

// 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.

// 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:

   git clone https://github.com/pubuduth-aplicy/chat-ui.git
   cd chat-ui

2. Install dependencies:

   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:

   "scripts": {
     "dev": "vite",
     "build": "tsc",
     "prepare": "npm run build"
   }

   Then run:

   npm run dev

Building

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

npm run build

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

"scripts": {
  "build:vite": "vite build"
}

License

This project is licensed under the ISC License.