KrosAI Voice Widget

A modern, embeddable voice widget for websites and web applications. This widget provides voice interaction with KrosAI agents along with text chat capabilities.

Features

• Voice and text chat with KrosAI agents
• Customizable appearance and positioning
• Multiple language support
• LiveKit integration for high-quality audio streaming
• Auto-collapse on scroll for better UX
• Dark and light theme support

Installation

npm install krosai-voice-react-widget --save

Usage

Basic React Integration

import React from 'react';
import KrosAIWidget from 'krosai-voice-react-widget';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <KrosAIWidget 
        agentId="your-agent-id"
        apiKey="your-api-key"
        position="bottom-right"
        primaryColor="#FFD600"
      />
    </div>
  );
}

export default App;

Web Component (HTML)

Include the script:

<script src="node_modules/krosai-voice-react-widget/dist/krosai-widget.js"></script>

Add the widget to your page:

<krosai-widget 
  agent-id="your-agent-id"
  api-key="your-api-key"
  position="bottom-right"
  language="ZA"
></krosai-widget>

Configuration Options

| Property | Type | Default | Description | |-------------------|-----------|-----------------|-----------------------------------------------------------| | agentId | string | - | KrosAI agent ID (required) | | apiKey | string | - | API key for authentication (required) | | position | string | 'bottom-right' | Widget position ('bottom-right', 'bottom-left', 'top-right', 'top-left') | | primaryColor | string | '#FFD600' | Primary brand color | | backgroundColor | string | '#000000' | Background color | | languageCode | string | 'ZA' | Language code ('ZA', 'US', 'GB', 'FR', etc.) | | theme | string | 'dark' | Widget theme ('dark' or 'light') | | apiEndpoint | string | - | Custom API endpoint URL | | debug | boolean | false | Enable debug mode |

Browser Support

The widget supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript Support

The package includes TypeScript type definitions. You can use it in your TypeScript projects without any additional setup:

import React from 'react';
import KrosAIWidget from 'krosai-voice-react-widget';

const App: React.FC = () => {
  return (
    <div>
      <h1>My TypeScript App</h1>
      <KrosAIWidget 
        agentId="your-agent-id"
        apiKey="your-api-key"
        position="bottom-right"
        theme="dark"
      />
    </div>
  );
};

export default App;

If you're still seeing TypeScript errors, you can add this to your project:

// In a declaration file (e.g., types.d.ts)
declare module 'krosai-voice-react-widget';

Integration Examples

Vue.js

// In your Vue component
<template>
  <div>
    <h1>My Vue App</h1>
    <div ref="widgetContainer"></div>
  </div>
</template>

<script>
import 'krosai-voice-react-widget/dist/krosai-widget.js';

export default {
  mounted() {
    const widget = document.createElement('krosai-widget');
    widget.setAttribute('agent-id', 'your-agent-id');
    widget.setAttribute('api-key', 'your-api-key');
    widget.setAttribute('position', 'bottom-right');
    this.$refs.widgetContainer.appendChild(widget);
  }
}
</script>

Angular

// In your Angular component
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import 'krosai-voice-react-widget/dist/krosai-widget.js';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <h1>My Angular App</h1>
      <div #widgetContainer></div>
    </div>
  `
})
export class AppComponent implements OnInit {
  @ViewChild('widgetContainer', { static: true }) widgetContainer: ElementRef;

  ngOnInit() {
    const widget = document.createElement('krosai-widget');
    widget.setAttribute('agent-id', 'your-agent-id');
    widget.setAttribute('api-key', 'your-api-key');
    widget.setAttribute('position', 'bottom-right');
    this.widgetContainer.nativeElement.appendChild(widget);
  }
}

Flutter WebView

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class KrosAIWidgetPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('KrosAI Widget')),
      body: WebView(
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          controller.loadUrl('about:blank');
          _loadWidget(controller);
        },
      ),
    );
  }

  void _loadWidget(WebViewController controller) {
    final String widgetHtml = '''
      <!DOCTYPE html>
      <html>
      <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://unpkg.com/[email protected]/dist/krosai-widget.js"></script>
      </head>
      <body>
        <krosai-widget 
          agent-id="your-agent-id"
          api-key="your-api-key"
          position="bottom-right">
        </krosai-widget>
      </body>
      </html>
    ''';
    controller.loadUrl(Uri.dataFromString(
      widgetHtml,
      mimeType: 'text/html',
      encoding: Encoding.getByName('utf-8'),
    ).toString());
  }
}

Development

To run the test environment:

npm run test-widget

License

ISC © KrosAI