@vanira/sdk-react-native 0.0.2

package/src/ui/components/VoiceOverlay.ts

@@ -0,0 +1,497 @@
+
+import { icons } from '../styles';
+
+export class VoiceOverlay {
+    private element: HTMLDivElement;
+
+    // Layout
+    private contentContainer: HTMLDivElement;
+
+    // Orb / visual
+    private orbWrapper: HTMLDivElement;        // w-52 h-52 centered circle area
+    private connectingRing: HTMLDivElement;    // spinning conic-gradient ring (connecting)
+    private errorRing: HTMLDivElement;         // red ring (error)
+    private waveLayers: HTMLDivElement[] = [];  // active wave layers
+    private outerGlow: HTMLDivElement;
+    private wave1: HTMLDivElement;
+    private wave2: HTMLDivElement;
+    private wave3: HTMLDivElement;
+    private centerIcon: HTMLDivElement;        // dark circle with phone/spinner
+
+    // Status area
+    private statusArea: HTMLDivElement;
+    private connectingLabel: HTMLDivElement;
+    private connectedBadge: HTMLDivElement;
+    private errorLabel: HTMLDivElement;
+    private giveItAMinuteLabel: HTMLDivElement;
+    private retryBtn: HTMLButtonElement;
+    private timerEl: HTMLDivElement;
+
+    // Transcription
+    private transcriptionEl: HTMLDivElement;
+
+    // Footer
+    private hangupBtn: HTMLButtonElement;
+
+    // Avatar
+    private videoContainer: HTMLDivElement;
+    private videoElement: HTMLVideoElement;
+    private prepareBadge: HTMLDivElement;
+    private statusBadge: HTMLDivElement;
+
+    private startTime: number | null = null;
+    private timerInterval: any = null;
+    private isAvatarMode: boolean = false;
+    private callStartedAt: number | null = null;  // wall-clock ms when call started
+
+    constructor(
+        private onHangup: () => void,
+        private primaryColor: string = '#000000',
+        private secondaryColor: string = '#111111',
+        private onCallEnded?: (durationMs: number, startedAt: number) => void
+    ) {
+        // ── ROOT ────────────────────────────────────────────────────────────────
+        this.element = document.createElement('div');
+        this.element.id = 'voice-active-overlay';
+        this.element.style.cssText = `
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: #f9fafb;
+            pointer-events: auto;
+            z-index: 60;
+            display: none;
+            flex-direction: column;
+            align-items: center;
+        `;
+
+        // ── CONTENT AREA ────────────────────────────────────────────────────────
+        this.contentContainer = document.createElement('div');
+        this.contentContainer.className = 'voice-content-container';
+        this.contentContainer.style.cssText = `
+            flex: 1; min-height: 0; display: flex; flex-direction: column;
+            align-items: center; justify-content: center;
+            width: 100%; padding: 24px 20px 12px;
+        `;
+
+        // ── AVATAR VIDEO ─────────────────────────────────────────────────────────
+        this.videoContainer = document.createElement('div');
+        this.videoContainer.className = 'voice-video-container';
+        this.videoContainer.style.cssText = `
+            display: none; position: relative; width: 100%; max-width: 260px;
+            aspect-ratio: 1/1; margin-bottom: 16px; overflow: hidden;
+            border-radius: 16px;
+            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25), 0 0 0 1px rgba(17,24,39,0.05);
+        `;
+        this.videoElement = document.createElement('video');
+        this.videoElement.style.cssText = 'width:100%; height:100%; object-fit:cover; background:black;';
+        this.videoElement.autoplay = true;
+        this.videoElement.playsInline = true;
+        this.videoElement.muted = true;
+        this.videoContainer.appendChild(this.videoElement);
+        this.contentContainer.appendChild(this.videoContainer);
+
+        // ── ORB WRAPPER ──────────────────────────────────────────────────────────
+        this.orbWrapper = document.createElement('div');
+        this.orbWrapper.className = 'voice-orb-wrapper';
+        this.orbWrapper.style.cssText = `
+            position: relative; width: 208px; height: 208px;
+            display: flex; align-items: center; justify-content: center;
+            margin: 8px 0;
+        `;
+
+        // Connecting: spinning conic-gradient ring
+        this.connectingRing = document.createElement('div');
+        this.connectingRing.style.cssText = `
+            position: absolute; width: 180px; height: 180px;
+            border-radius: 50%;
+            background: conic-gradient(from 0deg, #000000, #374151, #000000);
+            animation: spin 2s linear infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.connectingRing);
+
+        // Error: red conic ring
+        this.errorRing = document.createElement('div');
+        this.errorRing.style.cssText = `
+            position: absolute; width: 180px; height: 180px;
+            border-radius: 50%;
+            background: conic-gradient(from 0deg, #ef4444, #f87171, #fca5a5, #ef4444);
+            animation: pulse 1.5s ease-in-out infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.errorRing);
+
+        // Wave layers (connected state)
+        this.outerGlow = document.createElement('div');
+        this.outerGlow.style.cssText = `
+            position: absolute; inset: 0; border-radius: 50%;
+            background: radial-gradient(circle, ${this.primaryColor}20 0%, transparent 70%);
+            animation: pulse 2s ease-in-out infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.outerGlow);
+
+        this.wave1 = document.createElement('div');
+        this.wave1.style.cssText = `
+            position: absolute; width: 200px; height: 200px; border-radius: 50%;
+            background: conic-gradient(from 0deg, ${this.primaryColor}, ${this.secondaryColor}, #fcd34d, ${this.primaryColor});
+            animation: wave-rotate-1 8s ease-in-out infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.wave1);
+
+        this.wave2 = document.createElement('div');
+        this.wave2.style.cssText = `
+            position: absolute; width: 180px; height: 180px; border-radius: 50%;
+            background: conic-gradient(from 60deg, ${this.secondaryColor}, #fcd34d, ${this.primaryColor}, ${this.secondaryColor});
+            opacity: 0.8;
+            animation: wave-rotate-2 6s ease-in-out infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.wave2);
+
+        this.wave3 = document.createElement('div');
+        this.wave3.style.cssText = `
+            position: absolute; width: 160px; height: 160px; border-radius: 50%;
+            background: conic-gradient(from 120deg, #fcd34d, ${this.primaryColor}, ${this.secondaryColor}, #fcd34d);
+            opacity: 0.9;
+            animation: wave-rotate-3 4s ease-in-out infinite;
+            display: none;
+        `;
+        this.orbWrapper.appendChild(this.wave3);
+
+        // Inner shine (connected only)
+        const shine = document.createElement('div');
+        shine.style.cssText = `
+            position: absolute; width: 140px; height: 140px; border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
+            display: none; pointer-events: none;
+        `;
+        shine.id = 'voice-shine';
+        this.orbWrapper.appendChild(shine);
+
+        this.waveLayers = [this.outerGlow, this.wave1, this.wave2, this.wave3, shine];
+
+        // Center dark circle with phone/spinner icon
+        this.centerIcon = document.createElement('div');
+        this.centerIcon.style.cssText = `
+            position: relative; z-index: 10;
+            width: 56px; height: 56px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            background: #374151;
+            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1);
+            color: white;
+        `;
+        this.centerIcon.innerHTML = icons.phone;
+        const phoneSvg = this.centerIcon.querySelector('svg');
+        if (phoneSvg) { phoneSvg.style.width = '20px'; phoneSvg.style.height = '20px'; }
+        this.orbWrapper.appendChild(this.centerIcon);
+
+        this.contentContainer.appendChild(this.orbWrapper);
+
+        // ── STATUS AREA ──────────────────────────────────────────────────────────
+        this.statusArea = document.createElement('div');
+        this.statusArea.className = 'voice-status-area';
+        this.statusArea.style.cssText = 'display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:8px;';
+
+        // Connecting label
+        this.connectingLabel = document.createElement('p');
+        this.connectingLabel.textContent = 'Connecting to Vanira...';
+        this.connectingLabel.style.cssText = 'font-size:11px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:0.1em; margin:0; display:none;';
+        this.statusArea.appendChild(this.connectingLabel);
+
+        // Give it a minute label
+        this.giveItAMinuteLabel = document.createElement('p');
+        this.giveItAMinuteLabel.textContent = 'Give it a minute';
+        this.giveItAMinuteLabel.style.cssText = 'font-size:9px; font-weight:500; color:#94a3b8; text-transform:uppercase; letter-spacing:0.15em; margin:0; display:none; animation:pulse 1.5s infinite;';
+        this.statusArea.appendChild(this.giveItAMinuteLabel);
+
+        // Connected badge
+        this.connectedBadge = document.createElement('div');
+        this.connectedBadge.style.cssText = `
+            display: none; align-items: center; gap: 8px;
+            padding: 5px 16px; background: #f0fdf4;
+            border-radius: 9999px; border: 1px solid #dcfce7;
+        `;
+        const greenDot = document.createElement('div');
+        greenDot.style.cssText = 'width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; padding:0 !important; animation:pulse 2s infinite; box-shadow:0 0 8px rgba(34,197,94,0.6);';
+        const connectedText = document.createElement('span');
+        connectedText.textContent = 'Connected';
+        connectedText.style.cssText = 'font-size:11px; font-weight:600; color:#15803d; text-transform:uppercase; letter-spacing:0.1em;';
+        this.connectedBadge.appendChild(greenDot);
+        this.connectedBadge.appendChild(connectedText);
+        this.statusArea.appendChild(this.connectedBadge);
+
+        // Timer
+        this.timerEl = document.createElement('div');
+        this.timerEl.textContent = '00:00';
+        this.timerEl.style.cssText = 'font-size:13px; color:#6b7280; font-variant-numeric:tabular-nums; display:none;';
+        this.statusArea.appendChild(this.timerEl);
+
+        // Error label + retry
+        this.errorLabel = document.createElement('p');
+        this.errorLabel.textContent = 'Connection failed';
+        this.errorLabel.style.cssText = 'font-size:12px; color:#ef4444; font-weight:500; margin:0; display:none;';
+        this.statusArea.appendChild(this.errorLabel);
+
+        this.retryBtn = document.createElement('button');
+        this.retryBtn.textContent = '↻  Retry Connection';
+        this.retryBtn.style.cssText = `
+            display:none; padding:6px 14px; background:#f3f4f6; border:none;
+            border-radius:9999px; font-size:12px; font-weight:500; color:#374151;
+            cursor:pointer; transition:background 0.2s; pointer-events:auto;
+        `;
+        this.retryBtn.onmouseover = () => this.retryBtn.style.background = '#e5e7eb';
+        this.retryBtn.onmouseout = () => this.retryBtn.style.background = '#f3f4f6';
+        this.statusArea.appendChild(this.retryBtn);
+
+        // Avatar preparing / connected badges
+        this.prepareBadge = document.createElement('p');
+        this.prepareBadge.style.cssText = 'display:none; font-size:11px; font-weight:600; color:#a855f7; text-transform:uppercase; letter-spacing:0.1em; margin:0; animation:pulse 1.5s infinite;';
+        this.statusArea.appendChild(this.prepareBadge);
+
+        this.statusBadge = document.createElement('div');
+        this.statusBadge.style.cssText = 'display:none; align-items:center; gap:8px; padding:5px 16px; background:#f0fdf4; border-radius:9999px; border:1px solid #dcfce7;';
+        const sDot = document.createElement('div');
+        sDot.style.cssText = 'width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; padding:0 !important; animation:pulse 2s infinite;';
+        const sTxt = document.createElement('span');
+        sTxt.textContent = 'Connected';
+        sTxt.style.cssText = 'font-size:11px; font-weight:600; color:#15803d; text-transform:uppercase; letter-spacing:0.1em;';
+        this.statusBadge.appendChild(sDot);
+        this.statusBadge.appendChild(sTxt);
+        this.statusArea.appendChild(this.statusBadge);
+
+        this.contentContainer.appendChild(this.statusArea);
+
+        // ── TRANSCRIPTION ────────────────────────────────────────────────────────
+        this.transcriptionEl = document.createElement('div');
+        this.transcriptionEl.className = 'voice-transcription';
+        this.transcriptionEl.style.cssText = `
+            margin-top: 14px; padding: 0 20px; text-align: center;
+            min-height: 36px; max-height: 72px; overflow-y: auto;
+            font-size: 13px; color: #9ca3af; font-style: italic;
+        `;
+        this.contentContainer.appendChild(this.transcriptionEl);
+
+        this.element.appendChild(this.contentContainer);
+
+        // ── FOOTER: always-on End Call ───────────────────────────────────────────
+        const footer = document.createElement('div');
+        footer.className = 'voice-footer';
+        footer.style.cssText = 'width:100%; display:flex; justify-content:center; padding:0 20px 20px; pointer-events:auto;';
+
+        this.hangupBtn = document.createElement('button');
+        this.hangupBtn.className = 'voice-hangup-btn';
+        this.hangupBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transform:rotate(135deg);flex-shrink:0;"><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.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.77a16 16 0 0 0 6.29 6.29l.87-.87a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> End Call`;
+        this.hangupBtn.style.cssText = `
+            display: flex; align-items: center; gap: 8px;
+            padding: 10px 28px; background: #ef4444; color: white;
+            border: none; border-radius: 9999px; font-size: 14px; font-weight: 500;
+            cursor: pointer; pointer-events: auto;
+            transition: background-color 0.2s;
+            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
+        `;
+        this.hangupBtn.onmouseover = () => this.hangupBtn.style.backgroundColor = '#dc2626';
+        this.hangupBtn.onmouseout = () => this.hangupBtn.style.backgroundColor = '#ef4444';
+        this.hangupBtn.onclick = () => {
+            const duration = this.callStartedAt ? Date.now() - this.callStartedAt : 0;
+            const startedAt = this.callStartedAt ?? Date.now();
+            if (this.onCallEnded && duration > 0) {
+                this.onCallEnded(duration, startedAt);
+            }
+            this.onHangup();
+        };
+
+        footer.appendChild(this.hangupBtn);
+        this.element.appendChild(footer);
+    }
+
+    public getElement(): HTMLDivElement {
+        return this.element;
+    }
+
+    public setMode(mode: 'voice' | 'avatar') {
+        this.isAvatarMode = (mode === 'avatar');
+    }
+
+    public setVideoTrack(track: MediaStreamTrack) {
+        this.isAvatarMode = true;
+        if (track.kind === 'video' && this.videoElement) {
+            const stream = new MediaStream([track]);
+            this.videoElement.srcObject = stream;
+            this.videoContainer.style.display = 'block';
+            this.orbWrapper.style.display = 'none';
+            this.connectingLabel.style.display = 'none';
+            this.timerEl.style.display = 'none';
+
+            this.videoElement.onplaying = () => {
+                this.prepareBadge.style.display = 'none';
+                this.statusBadge.style.display = 'flex';
+            };
+            this.videoElement.play().catch(e => console.warn('Video play error', e));
+        }
+    }
+
+    public setStatus(status: 'connecting' | 'connected' | 'disconnected' | 'error', errorMsg?: string) {
+        if (status === 'connecting') {
+            // CENTER ICON: spinner while connecting
+            this.centerIcon.style.background = '#4b5563';
+            this.centerIcon.innerHTML = `<div style="width:18px;height:18px;border:2px solid #ffffff;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;"></div>`;
+
+            if (this.isAvatarMode) {
+                this.videoContainer.style.display = 'block';
+                this.orbWrapper.style.display = 'none';
+                this.prepareBadge.textContent = 'CONNECTING...';
+                this.prepareBadge.style.display = 'block';
+                this.statusBadge.style.display = 'none';
+                this.connectingLabel.style.display = 'none';
+            } else {
+                this.orbWrapper.style.display = 'flex';
+                this.videoContainer.style.display = 'none';
+                this.connectingRing.style.display = 'block';
+                this.errorRing.style.display = 'none';
+                this.waveLayers.forEach(l => l.style.display = 'none');
+                this.connectingLabel.style.display = 'block';
+                this.giveItAMinuteLabel.style.display = 'block';
+                this.connectedBadge.style.display = 'none';
+                this.timerEl.style.display = 'none';
+                this.errorLabel.style.display = 'none';
+                this.retryBtn.style.display = 'none';
+            }
+            this.stopTimer();
+
+        } else if (status === 'connected') {
+            // CENTER ICON: phone
+            this.centerIcon.style.background = '#1f2937';
+            this.centerIcon.innerHTML = icons.phone;
+            const svg = this.centerIcon.querySelector('svg');
+            if (svg) { svg.style.cssText = 'width:20px;height:20px;'; }
+
+            if (this.isAvatarMode) {
+                const isPlaying = this.videoElement && !this.videoElement.paused && this.videoElement.readyState > 2;
+                if (isPlaying) {
+                    this.prepareBadge.style.display = 'none';
+                    this.statusBadge.style.display = 'flex';
+                } else {
+                    this.prepareBadge.textContent = 'AGENT IS ON THE WAY...';
+                    this.prepareBadge.style.display = 'block';
+                    setTimeout(() => {
+                        if (this.prepareBadge.style.display !== 'none') {
+                            this.prepareBadge.style.display = 'none';
+                            this.statusBadge.style.display = 'flex';
+                        }
+                    }, 5000);
+                }
+            } else {
+                this.connectingRing.style.display = 'none';
+                this.errorRing.style.display = 'none';
+                this.waveLayers.forEach(l => l.style.display = 'flex');
+                this.connectingLabel.style.display = 'none';
+                this.giveItAMinuteLabel.style.display = 'none';
+                this.connectedBadge.style.display = 'flex';
+                this.timerEl.style.display = 'block';
+                this.errorLabel.style.display = 'none';
+                this.retryBtn.style.display = 'none';
+                this.startTimer();
+            }
+
+        } else if (status === 'error') {
+            this.centerIcon.style.background = '#dc2626';
+            this.centerIcon.innerHTML = icons.phone;
+            this.connectingRing.style.display = 'none';
+            this.errorRing.style.display = 'block';
+            this.waveLayers.forEach(l => l.style.display = 'none');
+            this.connectingLabel.style.display = 'none';
+            this.giveItAMinuteLabel.style.display = 'none';
+            this.connectedBadge.style.display = 'none';
+            this.timerEl.style.display = 'none';
+            this.errorLabel.textContent = errorMsg || 'Connection failed';
+            this.errorLabel.style.display = 'block';
+            this.retryBtn.style.display = 'block';
+            this.stopTimer();
+        }
+    }
+
+    public setTranscription(text: string, isFinal: boolean) {
+        this.transcriptionEl.textContent = `"${text}"`;
+        this.transcriptionEl.style.color = isFinal ? '#1f2937' : '#9ca3af';
+        this.transcriptionEl.style.fontStyle = isFinal ? 'normal' : 'italic';
+    }
+
+    public show() {
+        this.callStartedAt = Date.now();
+        this.element.style.display = 'flex';
+        this.setStatus('connecting');
+    }
+
+    public hide() {
+        this.element.style.display = 'none';
+        this.reset();
+    }
+
+    public reset() {
+        if (this.videoElement) this.videoElement.srcObject = null;
+        this.isAvatarMode = false;
+        this.callStartedAt = null;
+        this.stopTimer();
+        this.transcriptionEl.textContent = '';
+
+        // Reset to defaults
+        this.videoContainer.style.display = 'none';
+        this.orbWrapper.style.display = 'flex';
+        this.connectingRing.style.display = 'none';
+        this.errorRing.style.display = 'none';
+        this.waveLayers.forEach(l => l.style.display = 'none');
+        this.connectingLabel.style.display = 'none';
+        this.connectedBadge.style.display = 'none';
+        this.timerEl.style.display = 'none';
+        this.errorLabel.style.display = 'none';
+        this.retryBtn.style.display = 'none';
+        this.prepareBadge.style.display = 'none';
+        this.statusBadge.style.display = 'none';
+        this.giveItAMinuteLabel.style.display = 'none';
+        this.centerIcon.style.background = '#374151';
+        this.centerIcon.innerHTML = icons.phone;
+        const svg = this.centerIcon.querySelector('svg');
+        if (svg) { svg.style.cssText = 'width:20px;height:20px;'; }
+    }
+
+    private startTimer() {
+        if (this.timerInterval) clearInterval(this.timerInterval);
+        this.startTime = Date.now();
+        this.timerEl.textContent = '00:00';
+        this.timerInterval = setInterval(() => {
+            if (!this.startTime) return;
+            const diff = Math.floor((Date.now() - this.startTime) / 1000);
+            const mins = Math.floor(diff / 60).toString().padStart(2, '0');
+            const secs = (diff % 60).toString().padStart(2, '0');
+            this.timerEl.textContent = `${mins}:${secs}`;
+        }, 1000);
+    }
+
+    private stopTimer() {
+        if (this.timerInterval) { clearInterval(this.timerInterval); this.timerInterval = null; }
+        this.timerEl.textContent = '';
+    }
+
+    public setFullScreen(enable: boolean) {
+        if (enable) {
+            this.videoContainer.style.position = 'absolute';
+            this.videoContainer.style.top = '0';
+            this.videoContainer.style.left = '0';
+            this.videoContainer.style.width = '100%';
+            this.videoContainer.style.height = '100%';
+            this.videoContainer.style.maxWidth = 'none';
+            this.videoContainer.style.borderRadius = '0';
+            this.videoContainer.style.margin = '0';
+            this.videoContainer.style.zIndex = '0';
+        } else {
+            this.videoContainer.style.position = 'relative';
+            this.videoContainer.style.width = '100%';
+            this.videoContainer.style.maxWidth = '260px';
+            this.videoContainer.style.height = 'auto';
+            this.videoContainer.style.aspectRatio = '1/1';
+            this.videoContainer.style.borderRadius = '16px';
+            this.videoContainer.style.marginBottom = '16px';
+        }
+    }
+}

package/src/ui/components/index.ts

@@ -0,0 +1,7 @@
+export * from './FloatingButton';
+export * from './Panel';
+export * from './VoiceOverlay';
+export * from './ChatWindow';
+export * from './AvatarView';
+export * from './VoiceOrb';
+export * from './FloatingWelcomeChips';

package/src/ui/factory/WidgetFactory.ts

@@ -0,0 +1,16 @@
+import { IWidgetProvider } from '../abstraction/interfaces';
+import { VaniraInternalProvider } from '../providers/VaniraInternalProvider';
+
+export class WidgetProviderFactory {
+    /**
+     * Factory Method to create the appropriate Widget Provider.
+     * Implements the Factory Pattern to decouple creation logic.
+     * Trade-off: Currently hardcoded to VaniraInternalProvider, but extensible for other providers.
+     */
+    static getProvider(config: any): IWidgetProvider {
+        // Here we could check config.providerType to return different implementations
+        // e.g. if (config.provider === 'external_sip') return new ExternalSIPProvider(config);
+
+        return new VaniraInternalProvider(config);
+    }
+}