1.1.6 • Published 4 months ago

qurveaiwidget v1.1.6

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

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

PropTypeDefaultDescription
apiKeystringrequiredYour API key for authentication
clientNamestring'AI Assistant'Name displayed in the widget header
environmentstring'development'Environment setting ('development' or 'production')
colorPaletteobject{}Custom color palette override
fontstring'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"
    />
  );
}
1.1.6

4 months ago

1.0.6

5 months ago

1.0.5

5 months ago

1.0.4

5 months ago

1.0.3

5 months ago

1.0.1

5 months ago

1.0.0

5 months ago