open-index/open-npm huggingface dataset:
npm package: @maiglonl/chat-widget
Description: A lightweight, customizable, and production-ready chat widget for React applications.
Latest version: 0.1.1

# React Chat Widget

A lightweight, customizable, and production-ready chat widget for React applications.

## Features

- 🚀 **Easy Integration**: Drop-in component with minimal setup.
- 🎨 **Customizable**: Control colors, position, titles, and fonts.
- 💾 **Persistence**: Auto-saves chat history to `localStorage`.
- 🚧 **Maintenance Mode**: Built-in support for maintenance banners and read-only states.
- 📱 **Responsive**: Mobile-first design that works on all devices.
- 🤖 **AI Powered**: Connects directly to Google Gemini models.

## Installation

```bash
npm install @maiglonl/chat-widget
# or
yarn add @maiglonl/chat-widget
```

## Usage

1. **Import the component** in your root `App` or layout file.
2. **Configure usage** with your style preferences.
3. **Set your API Key** securely (preferably via a backend proxy for production, though direct API key is supported for demos).

```tsx
import { ChatWidget } from "@maiglonl/chat-widget";

function App() {
  return (
    <div>
      <YourWebsiteContent />

      <ChatWidget
        title="Customer Success"
        subtitle="Ask us anything!"
        theme={{
          primaryColor: "#6F33B7",
          position: "bottom-right",
        }}
      />
    </div>
  );
}
```

## API Reference

| Prop                | Type    | Default                       | Description                                           |
| ------------------- | ------- | ----------------------------- | ----------------------------------------------------- |
| `title`             | string  | "Support Chat"                | Header text.                                          |
| `subtitle`          | string  | "We reply instantly"          | Sub-header status text.                               |
| `theme`             | object  | `{ primaryColor: '#2563eb' }` | Color and position (`bottom-right` \| `bottom-left`). |
| `isMaintenanceMode` | boolean | `false`                       | Disables input and shows a warning banner.            |
| `isOffline`         | boolean | `false`                       | Sets status indicator to grey and label to "Offline". |
| `defaultIsOpen`     | boolean | `false`                       | Whether the widget loads open.                        |