@vanira/sdk-react-native 0.0.2

package/src/ui/providers/VaniraInternalProvider.ts

@@ -0,0 +1,1066 @@
+import { ChatService } from '../../api/services/ChatService';
+import { AbstractWidgetProvider } from '../abstraction/AbstractWidgetProvider';
+import { VaniraAI } from '../../core/VaniraAI';
+import { SessionManager } from '../../core/SessionManager';
+import { WidgetMode } from '../../types';
+import { generateThemeVars, widgetIcons, icons } from '../styles';
+import { widgetStyles as baseCss } from '../styles/widget.css';
+import { FloatingButton, Panel, FloatingWelcomeChips, WelcomeChip } from '../components';
+import { VoiceOnlyView, ChatOnlyView, ChatVoiceView, AvatarOnlyView, ChatAvatarView } from '../views';
+import { VaniraChatAdapter } from '../adapters/VaniraChatAdapter';
+import { WidgetPresetRenderer } from '../presets/WidgetPresetRenderer';
+
+export class VaniraInternalProvider extends AbstractWidgetProvider {
+    private vaniraClient: VaniraAI | null = null;
+    private currentView: any = null;
+    private presetRenderer: WidgetPresetRenderer | null = null;
+    private isPanelOpen: boolean = false;
+    private callActive: boolean = false;
+    private eventSource: { close: () => void } | null = null;
+
+    // Components
+    private floatingButton: FloatingButton | null = null;
+    private floatingWelcomeChips: FloatingWelcomeChips | null = null;
+    private panel: Panel | null = null;
+    private welcomeChipsData: WelcomeChip[] = [];
+
+    // Chat Adapter
+    private chatAdapter: VaniraChatAdapter;
+
+    // ─── Session Manager ─────────────────────────────────────────────────────
+    private sessionManager: SessionManager | null = null;
+    /** Whether this tab currently owns the widget session. */
+    private sessionActive: boolean = false;
+
+    // Config derived state
+    private widgetMode: WidgetMode = 'voice_only';
+    private agentId: string = '';
+    private prospectGroupId: string = '';
+    private chatServerUrl: string = '';
+
+    private prospectId: string = '';
+    private chatId: string | null = null;
+    private conversationId: string | null = null;
+    private widgetId: string = '';
+    private pkKey: string = '';
+    private chatInitialized: boolean = false;
+
+    // Appearance (Defaults)
+    private primaryColor: string = '#000000';
+    private secondaryColor: string = '#111111';
+    private gradient: string | null = null;
+    private positionType: 'fixed' | 'absolute' = 'fixed';
+    private position: string = 'bottom-right';
+    private widgetIcon: string | null = null;
+    private iconConfig: { logo_text?: string; title?: string; button_text?: string } | null = null;
+    private chatWelcomeMessage: any = null;
+
+    constructor(config: any) {
+        super(config);
+        this.chatAdapter = new VaniraChatAdapter();
+        this.processConfig(config);
+    }
+
+    // ─── Session Initialisation ───────────────────────────────────────────────
+
+    /**
+     * Boot the SessionManager.
+     * Called once we have a stable widgetId to key the session on.
+     * Returns true if this tab owns the session, false if another tab owns it.
+     */
+    private initSessionManager(): boolean {
+        const key = this.widgetId || this.agentId || 'default';
+        this.sessionManager = new SessionManager(key);
+
+        // Wire cross-tab events
+        this.sessionManager.on('tab_took_over', () => {
+            // Another tab stole the session → show "taken over" banner in this tab
+            console.warn('[VaniraAI] Session taken over by another tab.');
+            this.sessionActive = false;
+            this.showTabConflictBanner('taken_over');
+        });
+
+        this.sessionManager.on('session_cleared', () => {
+            console.log('[VaniraAI] Session cleared externally.');
+        });
+
+        const claimed = this.sessionManager.claimSession();
+        this.sessionActive = claimed;
+        return claimed;
+    }
+
+    /**
+     * Restore persisted chat messages into the chat window.
+     * Called after the view is rendered.
+     */
+    private restoreSessionMessages(): void {
+        const session = this.sessionManager?.getSession();
+        if (!session) return;
+
+        const cw = this.currentView?.getChatWindow?.();
+        if (!cw) return;
+
+        // Filter out empty placeholder messages
+        const visibleMessages = session.messages.filter(msg => msg.content.trim() !== '');
+
+        // Load persisted call records
+        const callKey = `vanira_calls_${this.widgetId || this.agentId}`;
+        const callRecords: Array<{ durationMs: number; startedAt: number }> =
+            JSON.parse(localStorage.getItem(callKey) || '[]');
+
+        if (visibleMessages.length === 0 && callRecords.length === 0) return;
+
+        cw.clearMessages();
+
+        // Merge messages and call records by timestamp, then render in order
+        type Entry =
+            | { type: 'msg'; role: 'user' | 'assistant'; content: string; ts: number }
+            | { type: 'call'; durationMs: number; startedAt: number; ts: number };
+
+        const entries: Entry[] = [
+            ...visibleMessages.map((m, i) => ({
+                type: 'msg' as const,
+                role: m.role,
+                content: m.content,
+                // If session messages have no timestamp, use index as tiebreaker
+                ts: (m as any).timestamp ?? i,
+            })),
+            ...callRecords.map(r => ({
+                type: 'call' as const,
+                durationMs: r.durationMs,
+                startedAt: r.startedAt,
+                ts: r.startedAt,
+            })),
+        ];
+
+        entries.sort((a, b) => a.ts - b.ts);
+
+        entries.forEach((entry) => {
+            if (entry.type === 'msg') {
+                cw.addMessage(entry.role, entry.content, entry.ts);
+            } else {
+                cw.addCallRecord(entry.durationMs, entry.startedAt);
+            }
+        });
+
+        console.log(`[VaniraAI] Restored ${visibleMessages.length} messages + ${callRecords.length} call records from session.`);
+    }
+
+    // ─── Tab Conflict UI ─────────────────────────────────────────────────────
+
+    /**
+     * Renders a friendly overlay when:
+     *  - 'conflict'   → this tab tried to open but another tab owns the session
+     *  - 'taken_over' → another tab stole the session while this tab was active
+     */
+    private showTabConflictBanner(reason: 'conflict' | 'taken_over'): void {
+        if (!this.root) return;
+
+        // Remove any existing banner
+        this.root.querySelector('.vanira-tab-conflict-banner')?.remove();
+
+        if (reason === 'conflict') {
+            this.sessionManager?.forceClaimSession();
+            this.sessionActive = true;
+            if (this.widgetMode.includes('chat')) {
+                this.initializeChatSession(false);
+            }
+        }
+        // If 'taken_over', do nothing. The tab silently becomes dormant.
+    }
+
+    private static audioContext: AudioContext | null = null;
+    private playMessageSound(type: 'send' | 'receive') {
+        try {
+            if (!VaniraInternalProvider.audioContext) {
+                const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
+                if (!AudioContextClass) return;
+                VaniraInternalProvider.audioContext = new AudioContextClass();
+            }
+            const ctx = VaniraInternalProvider.audioContext;
+
+            // Required by modern browsers to play sound after interaction
+            if (ctx.state === 'suspended') {
+                ctx.resume().catch(() => { });
+            }
+
+            const osc = ctx.createOscillator();
+            const gain = ctx.createGain();
+            osc.connect(gain);
+            gain.connect(ctx.destination);
+
+            const now = ctx.currentTime;
+            if (type === 'send') {
+                // A subtle rising pop for sending
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(300, now);
+                osc.frequency.exponentialRampToValueAtTime(500, now + 0.05);
+                gain.gain.setValueAtTime(0, now);
+                gain.gain.linearRampToValueAtTime(0.1, now + 0.01);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.1);
+                osc.start(now);
+                osc.stop(now + 0.1);
+            } else {
+                // A friendly bright pop for receiving
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(500, now);
+                osc.frequency.exponentialRampToValueAtTime(800, now + 0.1);
+                gain.gain.setValueAtTime(0, now);
+                gain.gain.linearRampToValueAtTime(0.15, now + 0.02);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
+                osc.start(now);
+                osc.stop(now + 0.2);
+            }
+        } catch (e) {
+            console.warn('[VaniraAI] Audio feedback failed', e);
+        }
+    }
+
+    // ─── Chat Logic ───────────────────────────────────────────────────────────
+
+    private handleWelcomePayload(payload: any, role: 'user' | 'assistant' = 'assistant') {
+        if (!payload || this.widgetMode === 'voice_only') return;
+
+        // 1. Update Floating Chips (Stateless/Floating UI - always do this)
+        if (payload.buttons && Array.isArray(payload.buttons)) {
+            this.welcomeChipsData = payload.buttons;
+        } else if (payload.widget?.type === 'button_list' && payload.widget.data?.buttons) {
+            this.welcomeChipsData = payload.widget.data.buttons;
+        }
+        this.updateWelcomeChipsVisibility();
+
+        // 2. Update Chat Window (Stateful UI - only if window is ready)
+        const cw = this.currentView?.getChatWindow?.();
+
+        // Robust Extraction of text from JSON or object
+        let welcomeText = payload.text || payload.response || payload.content || payload.message || '';
+
+        // If it's still empty, use the user's preferred fallback
+        if (!welcomeText && !this.welcomeChipsData.length) {
+            welcomeText = 'Hey! how can I help you ?';
+        }
+
+        // If the payload itself is a string that might be JSON (Double safety)
+        if (!welcomeText && typeof payload === 'string' && payload.trim().startsWith('{')) {
+            try {
+                const parsed = JSON.parse(payload);
+                welcomeText = parsed.text || parsed.response || parsed.content || parsed.message || '';
+                // If it has buttons inside nested widget
+                if (parsed.widget?.type === 'button_list' && parsed.widget.data?.buttons) {
+                    this.welcomeChipsData = parsed.widget.data.buttons;
+                }
+            } catch (e) { }
+        }
+
+        console.log('[VaniraAI] Processing Welcome Payload:', {
+            hasText: !!welcomeText,
+            chipsCount: this.welcomeChipsData.length,
+            hasChatWindow: !!cw,
+            mode: this.widgetMode
+        });
+
+        if (cw) {
+            if (!welcomeText && this.welcomeChipsData.length === 0) return;
+
+            // Only add if not already present in session (to avoid duplicates on refresh)
+            const session = this.sessionManager?.getSession();
+            const alreadyExists = session?.messages.some(m => m.content === welcomeText && m.role === role);
+
+            if (!alreadyExists) {
+                if (welcomeText) {
+                    cw.addMessage(role, welcomeText);
+                    this.sessionManager?.pushMessage(role, welcomeText);
+                }
+
+                if (this.welcomeChipsData.length > 0) {
+                    cw.addButtons(this.welcomeChipsData);
+                }
+            }
+        }
+    }
+
+    private async initializeChatSession(forceNew: boolean = false): Promise<void> {
+        if (!this.sessionActive) return;
+        if (this.chatInitialized) return;
+        this.chatInitialized = true;
+
+        try {
+            ChatService.setChatUrl(this.chatServerUrl);
+
+            const session = this.sessionManager?.getSession();
+
+            // ── Restore existing session ──────────────────────────────────────
+            if (!forceNew && session?.prospectId) {
+                this.prospectId = session.prospectId;
+                this.chatId = session.chatId;
+                this.conversationId = session.conversationId || null;
+
+                console.log(`[VaniraAI] Session restored — tab: ${this.sessionManager?.getTabId()}, prospect: ${this.prospectId}`);
+
+                // Restore messages into UI
+                this.restoreSessionMessages();
+
+                // Re-attach the SSE admin-reply stream
+                if (this.chatId && !this.eventSource) {
+                    this.eventSource = ChatService.listenForAdminReplies(
+                        this.chatId,
+                        this.prospectId,
+                        (text) => {
+                            this.currentView?.getChatWindow?.().addMessage('assistant', text);
+                            this.sessionManager?.pushMessage('assistant', text);
+                            this.playMessageSound('receive');
+                        }
+                    );
+                }
+
+                return; // Don't fetch a new welcome message
+            }
+
+            // ── Fresh session ─────────────────────────────────────────────────
+            if (!this.prospectId) {
+                if (this.prospectGroupId) {
+                    this.prospectId = await ChatService.createChatProspect(this.prospectGroupId);
+                } else {
+                    this.prospectId = `anon_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+                }
+            }
+
+            const welcome = await ChatService.fetchWelcomeMessage(this.agentId, this.prospectId, this.widgetId || undefined, this.pkKey || undefined);
+
+            if (welcome) {
+                // Ensure the welcome message is rendered in the chat window
+                this.handleWelcomePayload(welcome);
+
+                if (welcome.chatId && !this.chatId) {
+                    this.chatId = welcome.chatId;
+                    if (!this.eventSource) {
+                        this.eventSource = ChatService.listenForAdminReplies(
+                            this.chatId,
+                            this.prospectId,
+                            (text) => {
+                                this.currentView?.getChatWindow?.().addMessage('assistant', text);
+                                this.sessionManager?.pushMessage('assistant', text);
+                                this.playMessageSound('receive');
+                            }
+                        );
+                    }
+                }
+                if (welcome.conversationId) {
+                    this.conversationId = welcome.conversationId;
+                }
+            }
+
+            // Persist IDs so a refresh restores the session
+            this.sessionManager?.saveIds(this.prospectId, this.chatId, this.conversationId);
+        } catch (error) {
+            console.error('[VaniraAI] Chat init failed', error);
+            const fallback = 'Hey! how can I help you ?';
+            this.currentView?.getChatWindow?.().addMessage('assistant', fallback);
+            this.sessionManager?.pushMessage('assistant', fallback);
+        }
+    }
+
+    async initialize(config: any): Promise<void> {
+        await super.initialize(config);
+        this.processConfig(config);
+        if (this.root) {
+            this.ui_renderer(this.root);
+        }
+    }
+
+    private processConfig(config: any) {
+        this.widgetId = config.widgetId || config.widget_id || this.widgetId || '';
+        this.agentId = config.agentId || config.agent_id || this.agentId || '';
+        this.prospectGroupId = config.prospectGroupId || config.client?.base_prospect_group_id || this.prospectGroupId || '';
+        this.widgetMode = config.widgetMode || config.mode || this.widgetMode || 'voice_only';
+        this.pkKey = config.pkKey || config.pk_key || config.publicKey || config.public_key || this.pkKey || '';
+
+        this.primaryColor = config.primaryColor || config.primary_color || '#000000';
+        this.secondaryColor = config.secondaryColor || config.secondary_color || '#111111';
+        this.gradient = config.gradient || null;
+        this.position = config.position || 'bottom-right';
+        this.positionType = config.positionType || 'fixed';
+        this.widgetIcon = config.widgetIcon || config.icon || null;
+        this.iconConfig = config.iconConfig || config.icon_config || null;
+        this.chatWelcomeMessage = config.chatWelcomeMessage || config.chat_welcome_message || config.agent?.chat_welcome_message || null;
+
+        console.log('[VaniraAI] processConfig:', {
+            hasPrimary: !!this.primaryColor,
+            hasSecondary: !!this.secondaryColor,
+            hasWelcome: !!this.chatWelcomeMessage
+        });
+
+        // Try to parse if it's a string
+        if (typeof this.chatWelcomeMessage === 'string') {
+            try {
+                this.chatWelcomeMessage = JSON.parse(this.chatWelcomeMessage);
+            } catch (e) {
+                console.warn('[VaniraAI] Failed to parse chatWelcomeMessage string', e);
+            }
+        }
+
+        // Configurable server URLs — fall back to Vanira production endpoints
+        this.chatServerUrl = config.serverUrl || config.chatServerUrl || 'https://inboxapi.vanira.io';
+
+        this.updateWelcomeChipsVisibility();
+    }
+
+    async create_call(behavior: 'continue' | 'new' = 'continue'): Promise<void> {
+        if (this.callActive || !this.agentId) return;
+        if (!this.sessionActive) {
+            this.sessionManager?.forceClaimSession();
+            this.sessionActive = true;
+        }
+        if (behavior === 'new') {
+            this.presetRenderer?.resetChalkboard();
+        }
+        try {
+            this.callActive = true;
+            this.updateViewCallState(true);
+            this.updateViewStatus('connecting');
+
+            const customUrl = this.config?.serverUrl || this.config?.chatServerUrl;
+            const backendUrl = customUrl && !customUrl.includes('travelr.club') ? customUrl : 'https://api.vanira.io';
+
+            // Use VaniraAI SDK — handles pre-flight, storage, and session continuity automatically!
+            const client = new VaniraAI({
+                agentId: this.agentId,
+                apiKey: this.pkKey || undefined,
+                sessionBehavior: behavior,
+                prospectId: this.prospectId || undefined,
+                backendUrl,
+            });
+
+            // Synchronize unified prospect identity between voice and chat channels
+            client.on('session_started', ({ prospectId }) => {
+                if (prospectId) {
+                    this.prospectId = prospectId;
+                    this.sessionManager?.saveIds(prospectId, this.chatId);
+                }
+            });
+
+            // Status events
+            client
+                .on('connected', () => this.updateViewStatus('connected'))
+                .on('disconnected', () => this.end_call())
+                .on('error', (msg) => {
+                    console.error('[VaniraAI Widget] Call error:', msg);
+                    this.updateViewStatus('error', msg);
+                })
+                .on('transcription', ({ text, isFinal }) => {
+                    this.currentView?.setTranscription?.(text, isFinal);
+                })
+                .on('track', ({ track }) => {
+                    if (this.widgetMode.includes('avatar') && track.kind === 'video' && this.currentView?.setVideoTrack) {
+                        this.currentView.setVideoTrack(track);
+                    }
+                })
+                .on('tool_call', (toolCall) => {
+                    console.log('[VaniraAI Widget] Tool call received:', toolCall.name, toolCall.arguments);
+
+                    // ── Try preset renderer first ────────────────────────────
+                    const handled = this.presetRenderer?.handle(
+                        toolCall,
+                        (result) => {
+                            // onComplete — wake AI with triggerInterrupt (sends action + wakes TTS)
+                            const args = toolCall.arguments || (toolCall as any).args || {};
+                            let parsedArgs = args;
+                            if (typeof args === 'string') {
+                                try { parsedArgs = JSON.parse(args); } catch (_) { }
+                            }
+                            const presetId = (toolCall as any).client_fields?.preset_id || parsedArgs?.preset_id;
+
+                            // If it's a typing or erase preset, don't send back anything to the AI
+                            if (presetId === 'vanira_type_text' || presetId === 'vanira_erase_text') {
+                                console.log(`[VaniraInternalProvider] Preset ${presetId}: skipping triggerInterrupt to prevent sending anything back to the AI.`);
+                                return;
+                            }
+
+                            // Skip client action trigger if client_media_update already happened (result has media_id)
+                            if (result && (result.media_id || result.url)) {
+                                console.log('[VaniraInternalProvider] Skipping triggerInterrupt because media was already updated.');
+                                return;
+                            }
+
+                            const actionName = ((toolCall as any).client_fields?.action_name || (presetId === 'vanira_calendar' ? 'calendar_slot_selected' : `user_submitted_${toolCall.name}`)) as string;
+                            client.triggerInterrupt(actionName, result);
+                        },
+                        (_reason) => {
+                            // onCancel — send cancelled status so AI isn't left hanging
+                            const args = toolCall.arguments || (toolCall as any).args || {};
+                            let parsedArgs = args;
+                            if (typeof args === 'string') {
+                                try { parsedArgs = JSON.parse(args); } catch (_) { }
+                            }
+                            const presetId = (toolCall as any).client_fields?.preset_id || parsedArgs?.preset_id;
+
+                            // If it's a typing or erase preset, don't send back anything to the AI
+                            if (presetId === 'vanira_type_text' || presetId === 'vanira_erase_text') {
+                                console.log(`[VaniraInternalProvider] Preset ${presetId}: skipping sendToolResult onCancel.`);
+                                return;
+                            }
+
+                            const toolCallId = toolCall.tool_call_id;
+                            try { client.sendToolResult(toolCallId, { status: 'cancelled', reason: 'User dismissed' }); } catch (_) { }
+                        },
+                        client  // pass client so camera/upload can call uploadMedia()
+                    );
+                    if (handled) return;
+
+                    // ── Not a preset — dispatch to host page ─────────────────
+                    const event = new CustomEvent('vaniraai:tool_call', {
+                        detail: toolCall,
+                        bubbles: true,
+                        composed: true,
+                    });
+                    this.root?.host?.dispatchEvent(event);
+                });
+
+            this.vaniraClient = client;
+            await client.start();
+
+        } catch (err: any) {
+            console.error('[VaniraAI Widget] Call failed', err);
+            this.updateViewStatus('error', err?.message || String(err));
+        }
+    }
+
+    end_call(): void {
+        this.callActive = false;
+        const client = this.vaniraClient;
+        this.vaniraClient = null;
+        if (client) {
+            client.stop();
+        }
+        this.presetRenderer?.dismiss(); // close any open preset when call ends
+        this.updateViewCallState(false);
+    }
+
+    private updateViewCallState(active: boolean) {
+        if (this.currentView?.setCallActive) {
+            this.currentView.setCallActive(active);
+        }
+    }
+
+    private updateViewStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string) {
+        if (this.currentView?.setStatus) {
+            this.currentView.setStatus(status, errorMsg);
+        }
+    }
+
+    ui_renderer(root: ShadowRoot): void {
+        this.root = root;
+        this.root.innerHTML = ''; // Start fresh
+        this.presetRenderer = new WidgetPresetRenderer(root);
+
+        // Apply portal class to host for visibility if mode is fixed
+        if (this.root.host) {
+            if (this.positionType === 'fixed') {
+                this.root.host.classList.add('vanira-portal');
+            } else {
+                this.root.host.classList.remove('vanira-portal');
+            }
+        }
+
+        // ── Session Management ──────────────────────────────────────────────
+        // Inject keyframe animation for the conflict banner
+        const animStyle = document.createElement('style');
+        animStyle.textContent = `@keyframes vanira-slide-up {
+            from { opacity:0; transform:translateY(16px); }
+            to   { opacity:1; transform:translateY(0);    }
+        }`;
+        this.root.appendChild(animStyle);
+
+        // Establish the design tokens
+        const style = document.createElement('style');
+        style.textContent = `
+            ${baseCss}
+            :host { ${generateThemeVars(this.primaryColor, this.secondaryColor)} }
+            ${FloatingButton.styles}
+            ${FloatingWelcomeChips.styles}
+            ${Panel.styles}
+            ${this.gradient ? `.widget-fab { background: ${this.gradient} !important; }` : ''}
+            .clean-card-launcher {
+                position: fixed;
+                z-index: 9999;
+                bottom: 20px;
+                right: 20px;
+                background: #ffffff;
+                border-radius: 14px;
+                padding: 12px 14px 10px;
+                box-shadow: 0 6px 28px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                min-width: 180px;
+                max-width: 230px;
+                cursor: pointer;
+                pointer-events: auto !important;
+                animation: fadeInScale 0.35s cubic-bezier(0.34,1.56,0.64,1);
+                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+            }
+            .clean-card-logo {
+                font-size: 8px;
+                font-weight: 800;
+                letter-spacing: 0.18em;
+                text-transform: uppercase;
+                color: rgba(0,0,0,0.28);
+                line-height: 1;
+            }
+            .clean-card-title {
+                font-size: 12px;
+                font-weight: 700;
+                color: #0f172a;
+                line-height: 1.3;
+                margin: 1px 0 0;
+            }
+            .clean-card-btn {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 5px;
+                width: 100%;
+                padding: 7px 12px;
+                border-radius: 8px;
+                background: #0f172a;
+                color: #ffffff;
+                font-size: 10px;
+                font-weight: 700;
+                letter-spacing: 0.05em;
+                text-transform: uppercase;
+                border: none;
+                cursor: pointer;
+                box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+                transition: background 0.2s, transform 0.15s;
+            }
+            .clean-card-btn:hover {
+                background: #1e293b;
+                transform: scale(1.02);
+            }
+            .clean-card-btn svg {
+                width: 12px;
+                height: 12px;
+                fill: currentColor;
+            }
+        `;
+        this.root.appendChild(style);
+
+        // Load saved position
+        const posKey = `vanira_pos_${this.widgetId || this.agentId}`;
+        const savedPos = localStorage.getItem(posKey);
+        let coords: { x: number; y: number } | null = null;
+        if (savedPos) {
+            try { coords = JSON.parse(savedPos); } catch (e) { }
+        }
+
+        // FloatingButton
+        this.floatingButton = new FloatingButton(
+            () => this.togglePanel(),
+            (x, y) => {
+                // Sync chips
+                this.floatingWelcomeChips?.updateCoordinates(x, y, y > window.innerHeight / 2);
+                // Sync panel if open
+                if (this.isPanelOpen) {
+                    this.panel?.updatePosition({
+                        left: `${Math.max(20, Math.min(x - 170, window.innerWidth - 420))}px`,
+                        top: y > window.innerHeight / 2 ? 'auto' : `${y + 80}px`,
+                        bottom: y > window.innerHeight / 2 ? `${window.innerHeight - y + 20}px` : 'auto'
+                    });
+                }
+            },
+            (x, y) => {
+                localStorage.setItem(posKey, JSON.stringify({ x, y }));
+            }
+        );
+        this.floatingButton.setIcon(this.getFabIcon());
+
+        // Initial Positioning
+        if (coords) {
+            this.floatingButton.updateCoordinates(coords.x, coords.y);
+        } else {
+            this.floatingButton.setPosition(this.getPosStyle());
+        }
+
+        // Floating Welcome Chips
+        this.floatingWelcomeChips = new FloatingWelcomeChips((text) => this.handleFloatingChipClick(text));
+        if (coords) {
+            this.floatingWelcomeChips.updateCoordinates(coords.x, coords.y, coords.y > window.innerHeight / 2);
+        } else {
+            this.floatingWelcomeChips.setPosition(this.getPosStyle());
+        }
+
+        // Panel
+        this.panel = new Panel(() => this.closePanel(), this.getPanelTitle());
+
+        // Append components
+        this.root.appendChild(this.floatingWelcomeChips.getElement());
+
+        // ── Clean Card Launcher (replaces FAB when widgetIcon === 'clean_assistant') ──
+        if (this.widgetIcon === 'clean_assistant') {
+            const logoText = this.iconConfig?.logo_text || 'vanira';
+            const title = this.iconConfig?.title || 'Vanira Voice AI Assistant';
+            const buttonText = this.iconConfig?.button_text || 'Begin Call';
+
+            const hasSavedSession = typeof window !== 'undefined' &&
+                ((window.sessionStorage.getItem('vanira_prospect_id') || window.localStorage.getItem('vanira_prospect_id')) &&
+                    (window.sessionStorage.getItem('vanira_latest_call_id') || window.localStorage.getItem('vanira_latest_call_id')));
+
+            let selectedBehavior: 'continue' | 'new' = 'continue';
+
+            const card = document.createElement('div');
+            card.className = 'clean-card-launcher';
+            card.innerHTML = `
+                <div>
+                    <div class="clean-card-logo">${logoText}</div>
+                    <div class="clean-card-title">${title}</div>
+                </div>
+                ${hasSavedSession ? `
+                <div class="session-selector-container">
+                    <div class="session-option active" data-behavior="continue">
+                        <span class="session-title">Resume</span>
+                    </div>
+                    <div class="session-option" data-behavior="new">
+                        <span class="session-title">Start Fresh</span>
+                    </div>
+                </div>
+                ` : ''}
+                <button class="clean-card-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                        <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.14 12 19.79 19.79 0 0 1 1.07 3.4 2 2 0 0 1 3 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
+                    </svg>
+                    ${buttonText}
+                </button>
+            `;
+
+            const options = card.querySelectorAll('.session-option');
+            options.forEach(opt => {
+                opt.addEventListener('click', (e) => {
+                    e.stopPropagation(); // Avoid launching card action on selection change
+                    options.forEach(o => o.classList.remove('active'));
+                    opt.classList.add('active');
+                    selectedBehavior = opt.getAttribute('data-behavior') as 'continue' | 'new';
+                });
+            });
+
+            const handleCardClick = (e: Event) => {
+                e.stopPropagation();
+                card.style.display = 'none';
+                this.openPanel();
+                this.create_call(selectedBehavior);
+            };
+            card.addEventListener('click', handleCardClick);
+            const btn = card.querySelector('.clean-card-btn') as HTMLButtonElement;
+            btn?.addEventListener('click', (e) => {
+                e.stopPropagation();
+                handleCardClick(e);
+            });
+
+            this.root.appendChild(card);
+        } else {
+            // Standard FAB
+            this.root.appendChild(this.floatingButton.getElement());
+        }
+
+        this.root.appendChild(this.panel.getElement());
+
+        // Setup content view
+        this.setupPanelContent();
+
+        // ── Render Welcome (Stateless/Instant) ──────────────────────────────
+        // Skip static welcome in chat modes — initializeChatSession() fetches a
+        // fresh one from the API. Showing both causes the message to appear twice.
+        if (this.chatWelcomeMessage && !this.widgetMode.includes('chat')) {
+            this.handleWelcomePayload(this.chatWelcomeMessage);
+        }
+
+        // ── Init Session ────────────────────────────────────────────────────
+        const owned = this.initSessionManager();
+
+        if (!owned) {
+            // Another live tab owns the session — show a conflict banner
+            this.showTabConflictBanner('conflict');
+        } else if (this.widgetMode.includes('chat')) {
+            // Session is ours — initialise chat (will restore if session exists)
+            this.initializeChatSession();
+        }
+    }
+
+    private getFabIcon(): string {
+        if (this.widgetIcon && widgetIcons[this.widgetIcon]) {
+            return widgetIcons[this.widgetIcon];
+        }
+        if (this.widgetMode.includes('chat')) {
+            return icons.chat;
+        }
+        return icons.voice_orb;
+    }
+
+    private getPanelTitle(): string {
+        return 'Assistant';
+    }
+
+    private getPosStyle() {
+        const posStyles: Record<string, string> = {
+            'bottom-right': 'bottom: 24px; right: 24px;',
+            'bottom-left': 'bottom: 24px; left: 24px;',
+            'top-right': 'top: 24px; right: 24px;',
+            'top-left': 'top: 24px; left: 24px;',
+        };
+        return posStyles[this.position] || posStyles['bottom-right'];
+    }
+
+    private setupPanelContent() {
+        // ── Voice Call History callback ──────────────────────────────────────────
+        const onCallEnded = (durationMs: number, startedAt: number) => {
+            // 1. Inject card into active chat window (chat_voice / chat_avatar modes)
+            const cw = this.currentView?.getChatWindow?.();
+            if (cw) cw.addCallRecord(durationMs, startedAt);
+
+            // 2. Persist to localStorage for cross-session restore
+            const key = `vanira_calls_${this.widgetId || this.agentId}`;
+            const existing: Array<{ durationMs: number; startedAt: number }> = JSON.parse(localStorage.getItem(key) || '[]');
+            existing.push({ durationMs, startedAt });
+            // Keep last 50 records max
+            if (existing.length > 50) existing.splice(0, existing.length - 50);
+            localStorage.setItem(key, JSON.stringify(existing));
+        };
+
+        switch (this.widgetMode) {
+            case 'chat_only':
+                this.currentView = new ChatOnlyView((msg: string) => this.handleChatSend(msg));
+                break;
+            case 'chat_voice':
+                this.currentView = new ChatVoiceView(
+                    (msg: string) => this.handleChatSend(msg),
+                    () => this.create_call(),
+                    () => this.end_call(),
+                    this.primaryColor, this.secondaryColor,
+                    onCallEnded
+                );
+                break;
+            case 'avatar_only':
+                this.currentView = new AvatarOnlyView(
+                    () => this.create_call(),
+                    () => this.end_call(),
+                    this.primaryColor, this.secondaryColor,
+                    onCallEnded
+                );
+                break;
+            case 'chat_avatar':
+                this.currentView = new ChatAvatarView(
+                    (msg: string) => this.handleChatSend(msg),
+                    () => this.create_call(),
+                    () => this.end_call(),
+                    this.primaryColor, this.secondaryColor,
+                    onCallEnded
+                );
+                break;
+            case 'voice_only':
+            default:
+                this.currentView = new VoiceOnlyView(
+                    (behavior) => this.create_call(behavior),
+                    () => this.end_call(),
+                    this.primaryColor, this.secondaryColor,
+                    onCallEnded
+                );
+                break;
+        }
+
+        if (this.currentView && this.panel) {
+            this.panel.setContent(this.currentView.getElement());
+
+            if (this.widgetMode === 'voice_only') {
+                this.panel.getElement().classList.add('voice-only-panel');
+            } else {
+                this.panel.getElement().classList.remove('voice-only-panel');
+            }
+
+            const cw = this.currentView.getChatWindow?.();
+            if (cw) {
+                cw.setResolveCallback(() => this.resolveActiveConversation());
+            }
+        }
+    }
+
+    private async handleChatSend(text: string) {
+        if (!text) return;
+        if (!this.sessionActive) {
+            this.sessionManager?.forceClaimSession();
+            this.sessionActive = true;
+            if (this.widgetMode.includes('chat')) {
+                await this.initializeChatSession(false);
+            }
+        }
+
+        const cw = this.currentView?.getChatWindow?.();
+        if (!cw) return;
+
+        // Ensure SSE stream is running
+        if (this.chatId && !this.eventSource) {
+            this.eventSource = ChatService.listenForAdminReplies(
+                this.chatId,
+                this.prospectId,
+                (replyText) => {
+                    this.currentView?.getChatWindow?.().addMessage('assistant', replyText);
+                    this.sessionManager?.pushMessage('assistant', replyText);
+                    this.playMessageSound('receive');
+                }
+            );
+        }
+
+        cw.addMessage('user', text);
+        this.sessionManager?.pushMessage('user', text);
+        cw.setTyping(true);
+
+        // Push an empty assistant placeholder BEFORE streaming starts.
+        // This ensures updateLastAssistantMessage always targets this new slot,
+        // not the previous welcome message.
+        this.sessionManager?.pushMessage('assistant', '');
+
+        try {
+            let hasPlayedReceive = false;
+
+            await this.chatAdapter.sendMessage(
+                text,
+                this.agentId,
+                this.prospectId,
+                this.chatId,
+                (response) => {
+                    if (!hasPlayedReceive) {
+                        this.playMessageSound('receive');
+                        hasPlayedReceive = true;
+                    }
+                    // onWidget
+                    cw.setTyping(false);
+                    if (response?.type === 'button_list' && response.data?.buttons) {
+                        cw.addButtons(response.data.buttons);
+                        this.welcomeChipsData = response.data.buttons;
+                        this.updateWelcomeChipsVisibility();
+                    }
+                },
+                (streamText) => {
+                    if (!hasPlayedReceive) {
+                        this.playMessageSound('receive');
+                        hasPlayedReceive = true;
+                    }
+                    // onStream — update last assistant message
+                    cw.setTyping(false);
+                    cw.updateLastAssistantMessage(streamText);
+                    this.sessionManager?.updateLastAssistantMessage(streamText);
+                },
+                (newId, newConversationId) => {
+                    if (newId) {
+                        this.chatId = newId;
+                    }
+                    if (newConversationId) {
+                        this.conversationId = newConversationId;
+                    }
+                    if (newId || newConversationId) {
+                        this.sessionManager?.saveIds(this.prospectId, this.chatId, this.conversationId);
+                    }
+                },
+                this.widgetId || undefined,
+                this.pkKey || undefined
+            );
+        } catch (err) {
+            cw.setTyping(false);
+            console.error('[VaniraAI] Send message failed', err);
+            cw.addMessage('assistant', 'Error sending message.');
+        }
+    }
+
+    // ─── Panel Management ─────────────────────────────────────────────────────
+
+    private togglePanel() {
+        this.isPanelOpen ? this.closePanel() : this.openPanel();
+    }
+
+    private openPanel() {
+        this.isPanelOpen = true;
+        this.updateWelcomeChipsVisibility();
+
+        const rect = this.floatingButton?.getElement().getBoundingClientRect();
+        const hasRect = rect && rect.width > 0;
+
+        if (hasRect) {
+            const isBottom = rect.top > window.innerHeight / 2;
+            this.panel?.open({
+                left: `${Math.max(20, Math.min(rect.left - 170, window.innerWidth - 420))}px`,
+                bottom: isBottom ? `${window.innerHeight - rect.top + 20}px` : undefined,
+                top: !isBottom ? `${rect.top + 80}px` : undefined,
+            });
+        } else {
+            // Fallback for clean_assistant or detached FAB
+            this.panel?.open({
+                bottom: '90px',
+                right: '20px',
+                left: 'auto',
+                top: 'auto',
+            });
+        }
+
+        if (this.root?.host) {
+            this.root.host.classList.add('vanira-panel-open');
+        }
+    }
+
+    private closePanel() {
+        this.isPanelOpen = false;
+        this.updateWelcomeChipsVisibility();
+        this.panel?.close();
+        if (this.root?.host) {
+            this.root.host.classList.remove('vanira-panel-open');
+        }
+    }
+
+    private updateWelcomeChipsVisibility() {
+        if (!this.floatingWelcomeChips) return;
+
+        const shouldShow = !this.isPanelOpen && this.welcomeChipsData.length > 0;
+
+        console.log('[VaniraAI] updateWelcomeChipsVisibility:', {
+            visible: shouldShow,
+            isPanelOpen: this.isPanelOpen,
+            chipsCount: this.welcomeChipsData.length
+        });
+
+        if (shouldShow) {
+            this.floatingWelcomeChips.setChips(this.welcomeChipsData);
+            this.floatingWelcomeChips.getElement().style.display = 'flex';
+        } else {
+            this.floatingWelcomeChips.getElement().style.display = 'none';
+        }
+    }
+
+    private handleFloatingChipClick(text: string) {
+        this.openPanel();
+        this.handleChatSend(text);
+    }
+
+    private async resolveActiveConversation() {
+        if (this.eventSource) {
+            this.eventSource.close();
+            this.eventSource = null;
+        }
+
+        if (this.conversationId) {
+            try {
+                await ChatService.resolveConversation(this.conversationId);
+            } catch (e) {
+                console.error('[VaniraAI] Failed to resolve conversation on backend:', e);
+            }
+        } else {
+            console.warn('[VaniraAI] Cannot resolve — conversation_id not yet received from /widget/chat');
+        }
+
+        // Reset local session and restart fresh
+        this.sessionManager?.clearChatKeepProspect();
+        this.conversationId = null;
+        this.chatId = null;
+        const cw = this.currentView?.getChatWindow?.();
+        if (cw) cw.clearMessages();
+
+        this.chatInitialized = false;
+        await this.initializeChatSession(true);
+    }
+}