AI Chat Bot Plugin 🤖

A customizable React chat widget with mobile verification and streaming AI responses. Perfect for adding AI-powered chat functionality to any website.

✨ Features

• 📱 Mobile/Email verification with OTP (80+ country codes)
• 💬 Real-time streaming responses (like ChatGPT/DeepSeek)
• 🎨 Fully customizable theme colors and text
• 📦 Easy NPM package integration
• ⚛️ Built with React + TypeScript
• 🚀 Lightweight and performant
• 📍 Flexible positioning (bottom-right/left)
• 🔐 Custom headers support for authentication
• 🎙️ Voice input with multiple English variants
• 🗂️ Conversation history management

📦 Installation

# npm
npm install @shiftboolean/ai-chat-widget

# yarn
yarn add @shiftboolean/ai-chat-widget

# pnpm
pnpm add @shiftboolean/ai-chat-widget

# bun
bun add @shiftboolean/ai-chat-widget

🚀 Quick Start

import { ChatWidget } from "@shiftboolean/ai-chat-widget";

function App() {
  return (
    <ChatWidget
      primaryColor="#6366f1"
      title="AI Assistant"
      subtitle="How can I help you?"
      placeholder="Type a message..."
      welcomeMessage="Hello! How can I help?"
      requireMobileVerification={true}
      requireEmailVerification={true}
      position="bottom-right"
      zIndex={9999}
    />
  );
}

⚙️ Props

| Prop | Type | Default | Description | | --------------------------- | ------------------------------------------------- | -------------------------------------- | ------------------------------------------------- | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Where the widget appears on screen | | primaryColor | string | '#6366f1' | Main color for buttons and accents | | title | string | 'AI Assistant' | Header text displayed in the widget | | subtitle | string | 'How can I help you today?' | Subheading text below the title | | placeholder | string | 'Type your message...' | Hint text in the message input field | | welcomeMessage | string | 'Hello! I'm your AI assistant...' | First message shown from the AI | | chatIcon | React.ReactNode | Built-in icon | Custom icon for the chat button | | WidgetToggleButton | React.ReactElement | - | Custom button to open/close chat | | requireMobileVerification | boolean | true | Enable phone number OTP verification | | requireEmailVerification | boolean | true | Enable email OTP verification | | headers | Record<string, string> | {} | Additional HTTP headers for API requests | | onOpen | () => void | - | Function called when chat opens | | onClose | () => void | - | Function called when chat closes | | onMessageSent | (message: string) => void | - | Function called when user sends a message | | onMessageReceived | (message: string) => void | - | Function called when AI responds | | onOtpVerified | (verifiedWith: string) => void | - | Function called after successful OTP verification | | onOtpSent | () => void | - | Function called when OTP is sent | | onLogout | () => void | - | Function called when user logs out | | className | string | - | CSS class name for custom styling | | zIndex | number | 9999 | Stacking order of the widget | | voiceChat | { enabled: boolean; language: EnglishLanguage } | { enabled: true, language: 'en-US' } | Voice input configuration and language | | theme | 'light' \| 'dark' | 'dark' | Visual theme (light or dark mode) | | userEmail | string | - | Pre-filled email for trusted login | | userPhone | string | - | Pre-filled phone for trusted login | | style | React.CSSProperties | - | Inline CSS styles for custom appearance |

Voice Chat Languages

Supported English language variants for voice input: en-US | en-GB | en-AU | en-CA | en-IN | en-NZ | en-ZA | en-IE | en-SG

🎨 Usage Examples

Basic Usage with Email & Phone Verification

<ChatWidget requireMobileVerification={true} requireEmailVerification={true} />

Skip Verification (Direct Chat)

<ChatWidget
  requireMobileVerification={false}
  requireEmailVerification={false}
/>

Pre-authenticated User (Trusted Login)

<ChatWidget userEmail="[email protected]" userPhone="+919999999999" />

Custom Theme and Colors

<ChatWidget
  primaryColor="#10b981"
  theme="light"
  title="Support Bot"
  subtitle="We're here to help!"
/>

Custom Toggle Button

<ChatWidget
  WidgetToggleButton={<button style={{ padding: 10 }}>Chat with us</button>}
/>

Voice Input Configuration

<ChatWidget
  voiceChat={{
    enabled: true,
    language: "en-GB", // UK English
  }}
/>

With Custom Styling

<ChatWidget
  className="my-custom-widget"
  style={{ fontFamily: "ui-monospace" }}
  zIndex={10000}
/>

With Event Callbacks

<ChatWidget
  onOpen={() => }
  onClose={() => }
  onMessageSent={(msg) => }
  onMessageReceived={(msg) => }
  onOtpVerified={(verifiedWith) => }
  onOtpSent={() => }
  onLogout={() => }
/>

📄 License

MIT © ShiftBoolean

Made with ❤️ by ShiftBoolean