WebVox Chat Widget

A beautiful, embeddable chat widget for any website. Built with React and optimized for performance.

Features

• Lightweight & Fast - Optimized bundle with minimal dependencies.
• Multilingual Support - Supports English, Urdu, and Arabic with RTL support.
• Voice Interaction - Built-in voice input and text-to-speech capabilities.
• Customizable - Easily change colors, bot name, and initial theme via props.
• Iframe-Free - Direct React component integration for seamless styling.

Installation

npm install webvox-chat

or

yarn add webvox-chat

Quick Start

Basic Usage

import { ChatWidget } from 'webvox-chat';

function App() {
  return (
    <div className="App">
      <ChatWidget 
        apiUrl="https://your-backend-api.com" 
        theme={{
          primaryColor: '#6366F1',
          botName: 'WebVox Assistant'
        }}
      />
    </div>
  );
}

Component Breakdown

The package exports several components if you want to build a custom UI:

• ChatWidget: The main high-level component (recommended).
• Chat: The core chat interface.
• VoiceService: The service used for API interactions and voice processing.

Configuration (Props)

ChatWidget Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiUrl | string | 'http://localhost:8000' | The base URL for your WebVox backend. | | sessionId | string | (auto-generated) | Optional session ID to track conversations. | | theme | object | {} | Theme overrides (see below). |

Theme Object

| Key | Type | Description | |-----|------|-------------| | primaryColor | string | Main accent color (e.g., #6366F1). | | backgroundColor | string | Background color for the widget. | | textColor | string | Color for the text. | | botName | string | Display name shown in the header. | | mode | string | 'full' or 'widget'. |

Backend Requirements

This widget expects a backend that implements the following endpoints:

• POST /api/v1/chat: For sending and receiving messages.
• POST /api/translate: For real-time translation.
• POST /api/tts: For text-to-speech.
• POST /api/stt: For speech-to-text.

License

MIT © WebVox