1.1.6 • Published 4 months ago
qurveaiwidget v1.1.6
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"
/>
);
}