Combined AI Widget

A versatile React component that provides both chat and voice interaction capabilities with AI. This widget seamlessly integrates into your web application, offering a modern user interface with customizable themes and fonts.

Features

• 🎯 Dual-mode functionality: Chat and Voice interactions
• 🎨 Customizable color themes and fonts
• 📱 Responsive design with mobile support
• ⚡ Real-time streaming responses
• 🔊 Voice call capabilities with mute controls
• 🕒 Configurable call duration limits
• 🎭 Multiple color palettes included
• 🖼️ iframe detection and handling

Basic Usage

import { CombinedAIWidget } from 'combined-ai-widget';

function App() {
  return (
    <CombinedAIWidget
      apiKey="your-api-key"
      clientName="AI Assistant"
    />
  );
}

Props

| Prop | Type | Default | Description | |-------------------|---------|---------------|-------------| | apiKey | string | required | Your API key for authentication | | clientName | string | 'AI Assistant' | Name displayed in the widget header | | environment | string | 'development' | Environment setting ('development' or 'production') | | colorPalette | object | {} | Custom color palette override | | font | string | 'default' | Font family selection ('default', 'modern', 'classic') |

Color Palettes

The widget comes with three built-in color palettes that you can use or extend:

import { WidgetUtils } from 'combined-ai-widget';
`

### Custom Color Palette

You can create your own color palette by providing an object with the following structure:

```jsx
const customPalette = {
  primary: '#ff0000',    // Main brand color
  aiprimary: '#000000',  // Color of the AI icon
  secondary: '#00ff00',  // Secondary brand color
  background: '#ffffff', // Widget background
  aibackground: '#ffffff' // AI icon background color
  text: '#000000',      // Text color
  accent: '#0000ff'     // Accent color for alerts/buttons
};

<CombinedAIWidget
  apiKey="your-api-key"
  colorPalette={customPalette}
/>

Font Families

The widget supports three font family presets:

import { WidgetUtils } from 'combined-ai-widget';

const { FONT_FAMILIES } = WidgetUtils;

// Available options: 'default', 'modern', 'classic'
<CombinedAIWidget
  apiKey="your-api-key"
  font="modern"
/>

Example with All Options

import { CombinedAIWidget, WidgetUtils } from 'combined-ai-widget';

function App() {
  return (
    <CombinedAIWidget
      apiKey="your-api-key"
      clientName="Custom Assistant"
      colorPalette={WidgetUtils.COLOR_PALETTES.dark}
      font="modern"
    />
  );
}