@sonex/sdk-browser

React chatbot widget component for Sonex SDK - customizable, embeddable AI chat interface.

Features

• 🎨 Fully customizable UI with 6+ predefined themes
• 🎤 Voice input support with real-time transcription
• 💬 Real-time chat messaging with streaming responses
• 📱 Responsive design (mobile & desktop)
• 🔧 Easy configuration with TypeScript support
• 🎯 Custom template system for rich message rendering
• 🔐 Flexible token management (providers, storage adapters)

Installation

npm install @sonex/sdk-browser

Note: This package includes @sonex/sdk-core as a dependency - you don't need to install it separately.

Peer Dependencies

This package requires React 16.8+ as a peer dependency:

npm install react react-dom

Quick Start

import { SonexWidget, WidgetConfig } from '@sonex/sdk-browser';

function App() {
  const config: WidgetConfig = {
    chatbotConfig: {
      apiEndpoint: 'https://your-api.com/transcribe',
      sessionEndpoint: 'https://your-api.com/session',
      authTokenProvider: {
        getAuthToken: () => localStorage.getItem('auth_token'),
      },
    },
    widgetTitle: 'My Assistant',
    widgetSubtitle: 'How can I help you?',
    position: 'bottom-right',
    theme: {
      primaryColor: '#007bff',
      headerBackground: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    },
  };

  return <SonexWidget config={config} />;
}

Configuration Options

WidgetConfig

| Property | Type | Description | |----------|------|-------------| | chatbotConfig | ChatbotConfig | Required. Core chatbot configuration | | widgetTitle | string | Title displayed in widget header | | widgetSubtitle | string | Subtitle displayed in widget header | | position | 'bottom-right' \| 'bottom-left' | Widget position | | theme | Partial<SonexTheme> | Custom theme options | | enableVoice | boolean | Enable voice input (default: true) | | placeholder | string | Input placeholder text | | templates | TemplateDefinition[] | Custom message templates |

ChatbotConfig

| Property | Type | Description | |----------|------|-------------| | apiEndpoint | string | Required. URL for chat API | | sessionEndpoint | string | URL for session token endpoint | | authTokenProvider | AuthTokenProvider | Provider for auth token (session API) | | tokenProvider | TokenProvider | Provider for Sonex session token | | storage | StorageConfig | Token storage strategy |

Predefined Themes

import { SonexWidget, getTheme } from '@sonex/sdk-browser';

// Available themes: 'light', 'dark', 'professional-blue',
// 'friendly-green', 'modern-purple', 'minimal'
const config: WidgetConfig = {
  chatbotConfig: { apiEndpoint: '...' },
  theme: getTheme('dark'),
};

Custom Templates

Render custom UI for specific message types:

const config: WidgetConfig = {
  chatbotConfig: { apiEndpoint: '...' },
  templates: [
    {
      name: 'expense-card',
      matcher: (data) => data?.parameters?.amount !== undefined,
      component: ExpenseCardTemplate,
    },
  ],
};

Documentation

For comprehensive documentation, see the Integration Guide.

Related Packages

• @sonex/sdk-core - Core services (included as dependency)
• @sonex/sdk-node - Server-side utilities

License

MIT