Widget Integration

import React, { useEffect, useState } from 'react';
import KonproWidget from '@konpro/avatar-widget';

function App() {
    const [isWidgetReady, setIsWidgetReady] = useState(false);
    
    useEffect(() => {
        async function setupWidget() {
            try {
                // Fetch session token from your backend
                const response = await fetch('/api/widget-session', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        // Include your auth headers if needed
                        'Authorization': `Bearer ${userAuthToken}`
                    },
                    body: JSON.stringify({
                        avatarId: 'YOUR_AGENTIC_AVATAR_ID'
                    })
                });
                
                const { sessionToken } = await response.json();
                
                // Initialize widget with session token
                const widget = new KonproWidget({
                    sessionToken: sessionToken, // Secure: using session token
                    config: {
                        position: 'bottom-right',
                        theme: 'light'
                    }
                });

                widget.mount('#konpro-avatar');
                setIsWidgetReady(true);

                return () => {
                    widget.destroy();
                };
            } catch (error) {
                console.error('Failed to initialize widget:', error);
            }
        }
        
        setupWidget();
    }, []);

    return (
        <div>
            <div id="konpro-avatar"></div>
            {!isWidgetReady && <p>Loading avatar...</p>}
        </div>
    );
}

// Initialize Widget
KonproWidget.init(config);

// Open Widget
KonproWidget.open();

// Close Widget
KonproWidget.close();

// Toggle Widget
KonproWidget.toggle();

// Send Message
KonproWidget.sendMessage('Hello, how are you?');

// Update Configuration
KonproWidget.updateConfig({
    theme: 'dark',
    language: 'es'
});

// Destroy Widget
KonproWidget.destroy();

// Check if widget is open
const isOpen = KonproWidget.isOpen();

// Get current session info
const session = KonproWidget.getSession();

// Clear conversation history
KonproWidget.clearHistory();

// Set custom metadata
KonproWidget.setMetadata({
    userId: 'user-123',
    userName: 'John Doe',
    context: 'support'
});

// Widget opened
KonproWidget.on('open', () => {
    console.log('Widget opened');
});

// Widget closed
KonproWidget.on('close', () => {
    console.log('Widget closed');
});

// Message received
KonproWidget.on('message', (data) => {
    console.log('Message received:', data.message);
});

// Error occurred
KonproWidget.on('error', (error) => {
    console.error('Widget error:', error);
});

// Session started
KonproWidget.on('session:start', (session) => {
    console.log('Session started:', session.id);
});

// Session ended
KonproWidget.on('session:end', () => {
    console.log('Session ended');
});