@facepe/widget-mobile-app 1.0.0 → 1.2.0

package/dist/FacePeMobileAvatar.js

@@ -1,100 +1,595 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState, useImperativeHandle, forwardRef } from 'react';
-import { View, StyleSheet, ActivityIndicator, Text } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, useImperativeHandle, forwardRef, useCallback, } from 'react';
+import { View, StyleSheet, ActivityIndicator, Text, TouchableOpacity } from 'react-native';
 import { useFacePeMobileContext } from './FacePeMobileProvider';
-export const FacePeMobileAvatar = forwardRef(({ avatarKey, language = 'en', style, onTranscript, onSpeakStart, onSpeakEnd, onUserSpeakStart, onUserSpeakEnd, onOrderUpdate, onCheckout, onError, }, ref) => {
-    const { token, loading, error, apiBaseUrl } = useFacePeMobileContext();
-    const [streamReady, setStreamReady] = useState(false);
-    const webViewRef = useRef(null);
-    // Build the mobile streaming URL
-    const streamUrl = (() => {
-        if (!token)
-            return '';
-        const base = apiBaseUrl.replace(/\/sdk$/, '').replace(/\/api\/v1$/, '');
-        const search = new URLSearchParams({
-            token,
-            embedded: '1',
-            mobile: '1',
-            lang: language,
-        });
-        if (avatarKey)
-            search.set('avatar', avatarKey);
-        return `${base}/?${search.toString()}`;
-    })();
+// Resolve LiveKit dynamically at runtime so bare/Expo projects can run smoothly.
+// @livekit/react-native brings the native parts (registerGlobals, AudioSession,
+// VideoView); Room, RoomEvent and Track come from livekit-client, which it
+// does not re-export.
+function getLiveKitRN() {
+    try {
+        const native = require('@livekit/react-native');
+        const client = require('livekit-client');
+        return { ...native, Room: client.Room, RoomEvent: client.RoomEvent, Track: client.Track };
+    }
+    catch {
+        return null;
+    }
+}
+// "stream" connections (hosted avatars) are played natively with the stream
+// SDK's `stream()`, which returns plain MediaStreams — shown in the native
+// RTCView, no WebView. It needs crypto.randomUUID, which React Native lacks.
+function getStreamSdk() {
+    try {
+        const g = globalThis;
+        g.crypto = g.crypto || {};
+        if (typeof g.crypto.randomUUID !== 'function') {
+            g.crypto.randomUUID = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+                const r = (Math.random() * 16) | 0;
+                return (c === 'x' ? r : (r & 0x3) | 0x8).toString(16);
+            });
+        }
+        return require('@anam-ai/js-sdk');
+    }
+    catch {
+        return null;
+    }
+}
+function getRTCView() {
+    try {
+        return require('@livekit/react-native-webrtc').RTCView;
+    }
+    catch {
+        return null;
+    }
+}
+let globalsRegistered = false;
+function ensureLiveKitGlobals(LiveKitRN) {
+    if (globalsRegistered || !LiveKitRN)
+        return;
+    try {
+        if (typeof LiveKitRN.registerGlobals === 'function') {
+            LiveKitRN.registerGlobals();
+            globalsRegistered = true;
+        }
+    }
+    catch (err) {
+        console.warn('[FacePeMobileAvatar] registerGlobals warning:', err);
+    }
+}
+export const FacePeMobileAvatar = forwardRef(({ avatarKey, language = 'en', style, videoStyle, objectFit = 'cover', mirror = false, autoStart = true, enableMic = true, onTranscript, onSpeakStart, onSpeakEnd, onUserSpeakStart, onUserSpeakEnd, onOrderUpdate, onCheckout, onStatusChange, onError, }, ref) => {
+    const { token, loading: tokenLoading, error: tokenError, apiBaseUrl, refreshToken } = useFacePeMobileContext();
+    const [status, setStatus] = useState('idle');
+    const [videoTrack, setVideoTrack] = useState(null);
+    const [isMicEnabled, setIsMicEnabled] = useState(enableMic);
+    const [isAvatarSpeaking, setIsAvatarSpeaking] = useState(false);
+    const [isUserSpeaking, setIsUserSpeaking] = useState(false);
+    const [errorMessage, setErrorMessage] = useState(null);
+    const LiveKitRN = getLiveKitRN();
+    const hasLiveKit = !!LiveKitRN;
+    const roomRef = useRef(null);
+    // A "stream" connection: the stream SDK client, and its video for RTCView.
+    const streamClientRef = useRef(null);
+    const [streamURL, setStreamURL] = useState(null);
+    const usageIdRef = useRef(null);
+    const mountedRef = useRef(true);
+    const isConnectingRef = useRef(false);
+    const tokenRef = useRef(token);
+    tokenRef.current = token;
+    // Helper: Safely emit status changes
+    const updateStatus = useCallback((newStatus) => {
+        if (!mountedRef.current)
+            return;
+        setStatus(newStatus);
+        onStatusChange?.(newStatus);
+    }, [onStatusChange]);
+    // Helper: Safely publish data channel packet
+    const sendData = (msg) => {
+        const room = roomRef.current;
+        if (!room || room.state !== 'connected')
+            return;
+        try {
+            const jsonStr = JSON.stringify(msg);
+            let payload;
+            if (typeof TextEncoder !== 'undefined') {
+                payload = new TextEncoder().encode(jsonStr);
+            }
+            else {
+                const arr = new Uint8Array(jsonStr.length);
+                for (let i = 0; i < jsonStr.length; i++) {
+                    arr[i] = jsonStr.charCodeAt(i);
+                }
+                payload = arr;
+            }
+            room.localParticipant.publishData(payload, { reliable: true });
+        }
+        catch (err) {
+            console.warn('[FacePeMobileAvatar] Error publishing data packet:', err);
+        }
+    };
+    // Helper: Notify FacePe backend that session ended (for billing/usage)
+    const endUsage = async () => {
+        const uId = usageIdRef.current;
+        usageIdRef.current = null;
+        const currentToken = tokenRef.current;
+        if (!uId || !currentToken)
+            return;
+        try {
+            const cleanBase = apiBaseUrl.replace(/\/+$/, '');
+            await fetch(`${cleanBase}/avatar-sessions/${uId}/end`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${currentToken}`,
+                },
+            });
+        }
+        catch {
+            // ignore background teardown error
+        }
+    };
+    // Start streaming session
+    const startStream = useCallback(async () => {
+        if (isConnectingRef.current || roomRef.current || streamClientRef.current)
+            return;
+        if (!hasLiveKit) {
+            const msg = 'Please install `@livekit/react-native` and `@livekit/react-native-webrtc` to enable native AI avatar streaming.';
+            setErrorMessage(msg);
+            updateStatus('error');
+            onError?.({ code: 'MISSING_DEPENDENCY', message: msg });
+            return;
+        }
+        isConnectingRef.current = true;
+        setErrorMessage(null);
+        updateStatus('connecting');
+        try {
+            ensureLiveKitGlobals(LiveKitRN);
+            // Ensure active SDK auth token
+            let currentToken = tokenRef.current;
+            if (!currentToken) {
+                currentToken = await refreshToken();
+            }
+            if (!currentToken) {
+                throw new Error('Authentication token not available. Please verify your token provider.');
+            }
+            const cleanBase = apiBaseUrl.replace(/\/+$/, '');
+            // Resolve target avatar ID
+            let targetAvatarId = avatarKey;
+            if (!targetAvatarId) {
+                // No avatar given: use the first one assigned to this token's user.
+                const listRes = await fetch(`${cleanBase}/avatars`, {
+                    method: 'GET',
+                    headers: {
+                        Authorization: `Bearer ${currentToken}`,
+                    },
+                });
+                if (listRes.ok) {
+                    const listData = await listRes.json();
+                    const avatars = listData?.data?.avatars || [];
+                    if (avatars.length > 0) {
+                        targetAvatarId = avatars[0].id;
+                    }
+                }
+            }
+            if (!targetAvatarId) {
+                throw new Error('No Avatar configured or assigned to this token.');
+            }
+            // Request live streaming session from FacePe SDK backend
+            const sessionResp = await fetch(`${cleanBase}/avatars/${targetAvatarId}/sessions`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    Authorization: `Bearer ${currentToken}`,
+                },
+                body: JSON.stringify({ language }),
+            });
+            if (!sessionResp.ok) {
+                const errBody = await sessionResp.json().catch(() => ({}));
+                const errMsg = errBody?.error?.message || errBody?.message || 'Failed to initialize avatar session';
+                throw new Error(errMsg);
+            }
+            const sessionPayload = await sessionResp.json();
+            const sessionInfo = sessionPayload?.data || sessionPayload;
+            usageIdRef.current = sessionInfo?.usageId || null;
+            const connection = sessionInfo?.connection;
+            if (connection?.type === 'stream') {
+                // Hosted avatar: the stream SDK gives plain MediaStreams (video +
+                // the avatar's voice) and captures the microphone itself.
+                const StreamSdk = getStreamSdk();
+                if (!StreamSdk || !getRTCView() || !connection.token) {
+                    throw new Error('This avatar needs `@anam-ai/js-sdk` in the app (npm install @anam-ai/js-sdk).');
+                }
+                const client = StreamSdk.createClient(connection.token);
+                streamClientRef.current = client;
+                const ev = StreamSdk.AnamEvent;
+                const seen = new Set();
+                client.addListener(ev.MESSAGE_HISTORY_UPDATED, (messages) => {
+                    if (!mountedRef.current)
+                        return;
+                    for (const m of messages ?? []) {
+                        const text = String(m?.content ?? '').trim();
+                        const key = `${m?.id}:${text}`;
+                        if (!text || seen.has(key))
+                            continue;
+                        seen.add(key);
+                        onTranscript?.({ payload: { role: String(m.role).includes('user') ? 'user' : 'assistant', text, isFinal: true } });
+                    }
+                });
+                client.addListener(ev.USER_SPEECH_STARTED, () => { setIsUserSpeaking(true); onUserSpeakStart?.(); });
+                client.addListener(ev.USER_SPEECH_ENDED, () => { setIsUserSpeaking(false); onUserSpeakEnd?.(); });
+                client.addListener(ev.CONNECTION_CLOSED, () => {
+                    if (!mountedRef.current || streamClientRef.current !== client)
+                        return;
+                    streamClientRef.current = null;
+                    setStreamURL(null);
+                    setIsUserSpeaking(false);
+                    updateStatus('disconnected');
+                    void endUsage();
+                });
+                const streams = await client.stream();
+                const video = streams.find((s) => s?.getVideoTracks?.().length > 0) ?? streams[0];
+                if (!video)
+                    throw new Error('The avatar did not send a video stream.');
+                if (!mountedRef.current) {
+                    await client.stopStreaming().catch(() => undefined);
+                    return;
+                }
+                setStreamURL(video.toURL());
+                setIsMicEnabled(true);
+                updateStatus('connected');
+                if (!enableMic) {
+                    client.muteInputAudio();
+                    setIsMicEnabled(false);
+                }
+                if (connection.greeting)
+                    client.talk(String(connection.greeting)).catch(() => undefined);
+                return;
+            }
+            if (!connection || connection.type !== 'room' || !connection.url || !connection.token) {
+                throw new Error('Avatar server did not return a valid room connection.');
+            }
+            // Initialize LiveKit Room natively
+            const room = new LiveKitRN.Room({
+                adaptiveStream: false, // Ensure full video frames arrive without adaptive downscaling
+                dynacast: false,
+            });
+            roomRef.current = room;
+            // Start Audio Session on iOS/Android
+            if (LiveKitRN.AudioSession?.startAudioSession) {
+                try {
+                    await LiveKitRN.AudioSession.startAudioSession();
+                }
+                catch {
+                    // non-fatal
+                }
+            }
+            // 1. Remote video track subscription
+            room.on(LiveKitRN.RoomEvent.TrackSubscribed, (track) => {
+                if (!mountedRef.current)
+                    return;
+                const isVideo = track.kind === 'video' ||
+                    (LiveKitRN.Track?.Kind?.Video && track.kind === LiveKitRN.Track.Kind.Video);
+                if (isVideo) {
+                    setVideoTrack(track);
+                    updateStatus('connected');
+                }
+            });
+            room.on(LiveKitRN.RoomEvent.TrackUnsubscribed, (track) => {
+                if (!mountedRef.current)
+                    return;
+                const isVideo = track.kind === 'video' ||
+                    (LiveKitRN.Track?.Kind?.Video && track.kind === LiveKitRN.Track.Kind.Video);
+                if (isVideo) {
+                    setVideoTrack(null);
+                }
+            });
+            // 2. Active speaker detection
+            room.on(LiveKitRN.RoomEvent.ActiveSpeakersChanged, (speakers) => {
+                if (!mountedRef.current)
+                    return;
+                const hasAssistant = speakers.some((p) => !p.isLocal);
+                const hasUser = speakers.some((p) => p.isLocal);
+                setIsAvatarSpeaking(hasAssistant);
+                if (hasAssistant)
+                    onSpeakStart?.();
+                else
+                    onSpeakEnd?.();
+                setIsUserSpeaking(hasUser);
+                if (hasUser)
+                    onUserSpeakStart?.();
+                else
+                    onUserSpeakEnd?.();
+            });
+            // 3. Bidirectional data-channel events (transcriptions, orders, interrupts)
+            room.on(LiveKitRN.RoomEvent.DataReceived, (payload) => {
+                if (!mountedRef.current)
+                    return;
+                try {
+                    let text = '';
+                    if (typeof TextDecoder !== 'undefined') {
+                        text = new TextDecoder().decode(payload);
+                    }
+                    else {
+                        text = String.fromCharCode.apply(null, Array.from(payload));
+                    }
+                    const msg = JSON.parse(text);
+                    const type = String(msg.type ?? msg.event_type ?? '');
+                    // Speaking indicators
+                    if (type === 'avatar.speak_started' || type === 'response.created') {
+                        setIsAvatarSpeaking(true);
+                        onSpeakStart?.();
+                    }
+                    else if (type === 'avatar.speak_ended' || type === 'response.done') {
+                        setIsAvatarSpeaking(false);
+                        onSpeakEnd?.();
+                    }
+                    if (type === 'user.speak_started' || type === 'input_audio_buffer.speech_started') {
+                        setIsUserSpeaking(true);
+                        onUserSpeakStart?.();
+                    }
+                    else if (type === 'user.speak_ended' || type === 'input_audio_buffer.speech_stopped') {
+                        setIsUserSpeaking(false);
+                        onUserSpeakEnd?.();
+                    }
+                    // Real-time transcriptions
+                    if (type === 'avatar.transcription' || type === 'response.audio_transcript.done') {
+                        const str = msg.text || msg.transcript || msg.payload?.text;
+                        if (str)
+                            onTranscript?.({ payload: { role: 'assistant', text: String(str).trim() } });
+                    }
+                    else if (type === 'user.transcription' ||
+                        type === 'conversation.item.input_audio_transcription.completed') {
+                        const str = msg.text || msg.transcript || msg.payload?.text;
+                        if (str)
+                            onTranscript?.({ payload: { role: 'user', text: String(str).trim() } });
+                    }
+                    // Order & checkout intents
+                    if (type === 'order.update') {
+                        const items = Array.isArray(msg.items) ? msg.items : msg.payload?.items || [];
+                        onOrderUpdate?.({ items });
+                    }
+                    else if (type === 'order.checkout') {
+                        onCheckout?.();
+                    }
+                }
+                catch {
+                    // ignore non-json data frames
+                }
+            });
+            // 4. Connection state transitions
+            room.on(LiveKitRN.RoomEvent.Disconnected, () => {
+                if (!mountedRef.current)
+                    return;
+                setVideoTrack(null);
+                setIsAvatarSpeaking(false);
+                setIsUserSpeaking(false);
+                updateStatus('disconnected');
+            });
+            room.on(LiveKitRN.RoomEvent.Reconnecting, () => {
+                updateStatus('reconnecting');
+            });
+            room.on(LiveKitRN.RoomEvent.Reconnected, () => {
+                updateStatus('connected');
+            });
+            // Connect room over WebRTC
+            await room.connect(connection.url, connection.token, { autoSubscribe: true });
+            // Check already subscribed remote tracks in case track arrived before/during connection
+            try {
+                room.remoteParticipants?.forEach?.((participant) => {
+                    participant.trackPublications?.forEach?.((pub) => {
+                        if (pub?.track) {
+                            const isVid = pub.track.kind === 'video' ||
+                                pub.kind === 'video' ||
+                                (LiveKitRN.Track?.Kind?.Video && pub.track.kind === LiveKitRN.Track.Kind.Video);
+                            if (isVid && mountedRef.current) {
+                                setVideoTrack(pub.track);
+                                updateStatus('connected');
+                            }
+                        }
+                    });
+                });
+            }
+            catch {
+                // ignore inspection error
+            }
+            // Enable microphone capture if requested
+            if (enableMic) {
+                try {
+                    await room.localParticipant.setMicrophoneEnabled(true);
+                    setIsMicEnabled(true);
+                }
+                catch (micErr) {
+                    console.warn('[FacePeMobileAvatar] Microphone setup warning:', micErr);
+                }
+            }
+            // Configure server VAD and Whisper transcription
+            const sessionUpdate = {
+                type: 'session.update',
+                session: {
+                    input_audio_transcription: { model: 'whisper-1' },
+                    turn_detection: { type: 'server_vad' },
+                },
+            };
+            sendData(sessionUpdate);
+            // Fallback status if video arrives quickly
+            if (mountedRef.current && status !== 'connected') {
+                updateStatus('connected');
+            }
+        }
+        catch (err) {
+            // A failed hosted-avatar start: close its connection too.
+            const failedClient = streamClientRef.current;
+            streamClientRef.current = null;
+            setStreamURL(null);
+            if (failedClient)
+                await failedClient.stopStreaming().catch(() => undefined);
+            if (!mountedRef.current)
+                return;
+            const msg = err?.message || 'Connection failed';
+            setErrorMessage(msg);
+            updateStatus('error');
+            onError?.({ code: 'CONNECT_ERROR', message: msg });
+            await endUsage();
+        }
+        finally {
+            isConnectingRef.current = false;
+        }
+    }, [
+        hasLiveKit,
+        avatarKey,
+        language,
+        enableMic,
+        apiBaseUrl,
+        refreshToken,
+        updateStatus,
+        onSpeakStart,
+        onSpeakEnd,
+        onUserSpeakStart,
+        onUserSpeakEnd,
+        onTranscript,
+        onOrderUpdate,
+        onCheckout,
+        onError,
+    ]);
+    // Stop streaming session
+    const stopStream = useCallback(async () => {
+        const room = roomRef.current;
+        roomRef.current = null;
+        const streamClient = streamClientRef.current;
+        streamClientRef.current = null;
+        setStreamURL(null);
+        if (streamClient)
+            await streamClient.stopStreaming().catch(() => undefined);
+        if (room) {
+            try {
+                if (room.localParticipant) {
+                    await room.localParticipant.setMicrophoneEnabled(false);
+                }
+                await room.disconnect();
+            }
+            catch {
+                // ignore
+            }
+        }
+        setVideoTrack(null);
+        setIsAvatarSpeaking(false);
+        setIsUserSpeaking(false);
+        updateStatus('idle');
+        await endUsage();
+    }, [updateStatus]);
+    // Imperative methods exposed via ref
     useImperativeHandle(ref, () => ({
         start: async () => {
-            webViewRef.current?.injectJavaScript?.('window.FacePeBridge && window.FacePeBridge.start()');
+            await startStream();
         },
         stop: async () => {
-            webViewRef.current?.injectJavaScript?.('window.FacePeBridge && window.FacePeBridge.stop()');
+            await stopStream();
         },
         toggleMic: async () => {
-            webViewRef.current?.injectJavaScript?.('window.FacePeBridge && window.FacePeBridge.toggleMic()');
+            const streamClient = streamClientRef.current;
+            if (streamClient) {
+                const next = !isMicEnabled;
+                if (next)
+                    streamClient.unmuteInputAudio();
+                else
+                    streamClient.muteInputAudio();
+                setIsMicEnabled(next);
+                return next;
+            }
+            const room = roomRef.current;
+            if (!room || !room.localParticipant)
+                return isMicEnabled;
+            const nextState = !isMicEnabled;
+            try {
+                await room.localParticipant.setMicrophoneEnabled(nextState);
+                setIsMicEnabled(nextState);
+                return nextState;
+            }
+            catch (err) {
+                console.warn('[FacePeMobileAvatar] toggleMic error:', err);
+                return isMicEnabled;
+            }
         },
-    }));
-    // Handle incoming messages from bridge (transcripts, order updates, speaking states)
-    const handleBridgeMessage = (event) => {
-        try {
-            const raw = event?.nativeEvent?.data;
-            if (!raw)
+        setMicEnabled: async (enabled) => {
+            const streamClient = streamClientRef.current;
+            if (streamClient) {
+                if (enabled)
+                    streamClient.unmuteInputAudio();
+                else
+                    streamClient.muteInputAudio();
+                setIsMicEnabled(enabled);
                 return;
-            const msg = JSON.parse(raw);
-            switch (msg.type) {
-                case 'avatar:ready':
-                    setStreamReady(true);
-                    break;
-                case 'avatar:transcript':
-                    onTranscript?.({ payload: msg.payload });
-                    break;
-                case 'avatar:speak:start':
-                    onSpeakStart?.();
-                    break;
-                case 'avatar:speak:end':
-                    onSpeakEnd?.();
-                    break;
-                case 'user:speak:start':
-                    onUserSpeakStart?.();
-                    break;
-                case 'user:speak:end':
-                    onUserSpeakEnd?.();
-                    break;
-                case 'order:update':
-                    onOrderUpdate?.({ items: msg.payload?.items || [] });
-                    break;
-                case 'order:checkout':
-                    onCheckout?.();
-                    break;
-                case 'avatar:error':
-                    onError?.({ code: msg.code || 'UNKNOWN', message: msg.message || 'Stream error' });
-                    break;
-                default:
-                    break;
             }
+            const room = roomRef.current;
+            if (!room || !room.localParticipant)
+                return;
+            try {
+                await room.localParticipant.setMicrophoneEnabled(enabled);
+                setIsMicEnabled(enabled);
+            }
+            catch (err) {
+                console.warn('[FacePeMobileAvatar] setMicEnabled error:', err);
+            }
+        },
+        speak: async (text) => {
+            if (streamClientRef.current) {
+                await streamClientRef.current.talk(text).catch(() => undefined);
+                return;
+            }
+            sendData({ event_type: 'avatar.speak_text', text });
+        },
+        interrupt: async () => {
+            if (streamClientRef.current)
+                streamClientRef.current.interruptPersona();
+            else
+                sendData({ event_type: 'avatar.interrupt' });
+            setIsAvatarSpeaking(false);
+            onSpeakEnd?.();
+        },
+        get status() {
+            return status;
+        },
+        get isMicEnabled() {
+            return isMicEnabled;
+        },
+    }), [startStream, stopStream, isMicEnabled, status, onSpeakEnd]);
+    // Auto-start on mount once token is resolved
+    useEffect(() => {
+        mountedRef.current = true;
+        if (autoStart && token && !tokenLoading && !tokenError && status === 'idle') {
+            void startStream();
         }
-        catch {
-            // ignore parse error
-        }
-    };
-    if (loading) {
-        return (_jsxs(View, { style: [styles.container, styles.center, style], children: [_jsx(ActivityIndicator, { size: "large", color: "#7c3aed" }), _jsx(Text, { style: styles.loadingText, children: "Connecting to FacePe AI Avatar\u2026" })] }));
-    }
-    if (error) {
-        return (_jsx(View, { style: [styles.container, styles.center, style], children: _jsxs(Text, { style: styles.errorText, children: ["Unable to connect to Avatar: ", error.message] }) }));
-    }
-    // Try dynamically requiring react-native-webview
-    let WebViewComponent = null;
-    try {
-        WebViewComponent = require('react-native-webview').WebView;
+        return () => {
+            mountedRef.current = false;
+            void stopStream();
+        };
+    }, [autoStart, token, tokenLoading, tokenError]);
+    // Handle token loading
+    if (tokenLoading) {
+        return (_jsxs(View, { style: [styles.container, styles.center, style], children: [_jsx(ActivityIndicator, { size: "large", color: "#8B5CF6" }), _jsx(Text, { style: styles.loadingText, children: "Authenticating with FacePe AI\u2026" })] }));
     }
-    catch {
-        // WebView not installed in project
+    // Handle token error
+    if (tokenError) {
+        return (_jsxs(View, { style: [styles.container, styles.center, style], children: [_jsx(Text, { style: styles.errorTitle, children: "Authentication Failed" }), _jsx(Text, { style: styles.errorText, children: tokenError.message }), _jsx(TouchableOpacity, { style: styles.retryButton, onPress: () => void refreshToken(true), children: _jsx(Text, { style: styles.retryText, children: "Retry" }) })] }));
     }
-    if (!WebViewComponent) {
-        return (_jsxs(View, { style: [styles.container, styles.center, styles.fallbackBox, style], children: [_jsx(Text, { style: styles.noticeTitle, children: "FacePe Mobile SDK" }), _jsx(Text, { style: styles.noticeBody, children: "Please install `react-native-webview` or `@livekit/react-native` in your project to render the live stream:" }), _jsx(Text, { style: styles.codeSnippet, children: "npm install react-native-webview" })] }));
+    // If @livekit/react-native is not installed in the host app, render native guidance banner
+    if (!hasLiveKit) {
+        return (_jsxs(View, { style: [styles.container, styles.center, styles.fallbackBox, style], children: [_jsx(View, { style: styles.badge, children: _jsx(Text, { style: styles.badgeText, children: "Native Streaming Required" }) }), _jsx(Text, { style: styles.noticeTitle, children: "FacePe Mobile SDK" }), _jsx(Text, { style: styles.noticeBody, children: "To stream interactive 3D digital avatars natively without webviews, please install LiveKit WebRTC peer dependencies:" }), _jsx(Text, { style: styles.codeSnippet, children: "npm install @livekit/react-native @livekit/react-native-webrtc" })] }));
     }
-    return (_jsx(View, { style: [styles.container, style], children: _jsx(WebViewComponent, { ref: webViewRef, source: { uri: streamUrl }, style: styles.webview, onMessage: handleBridgeMessage, allowsInlineMediaPlayback: true, mediaPlaybackRequiresUserAction: false, javaScriptEnabled: true, domStorageEnabled: true, cacheEnabled: true, 
-            // iOS WebRTC permissions
-            originWhitelist: ['*'], allowsAirPlayForMediaPlayback: false, bounces: false, scrollEnabled: false }) }));
+    // Native LiveKit VideoView component
+    const VideoViewComponent = LiveKitRN.VideoView;
+    // Native WebRTC view, for a hosted avatar's MediaStream
+    const RTCViewComponent = streamURL ? getRTCView() : null;
+    return (_jsxs(View, { style: [styles.container, style], children: [streamURL && RTCViewComponent ? (_jsx(RTCViewComponent, { streamURL: streamURL, style: StyleSheet.flatten([styles.video, videoStyle]), objectFit: objectFit, mirror: mirror, zOrder: 0 })) : videoTrack && VideoViewComponent ? (_jsx(VideoViewComponent, { track: videoTrack, videoTrack: videoTrack, 
+                // A plain object, not an array: VideoView spreads `style` into its
+                // container ({ ...style }), and spreading an array loses every
+                // size — the video got no height and stayed invisible.
+                style: StyleSheet.flatten([styles.video, videoStyle]), objectFit: objectFit, mirror: mirror })) : (_jsx(View, { style: [styles.container, styles.center], children: status === 'connecting' || status === 'reconnecting' ? (_jsxs(_Fragment, { children: [_jsx(ActivityIndicator, { size: "large", color: "#8B5CF6" }), _jsx(Text, { style: styles.loadingText, children: status === 'connecting'
+                                ? 'Connecting to FacePe AI Avatar…'
+                                : 'Reconnecting stream…' })] })) : status === 'error' ? (_jsxs(_Fragment, { children: [_jsx(Text, { style: styles.errorTitle, children: "Connection Failed" }), _jsx(Text, { style: styles.errorText, children: errorMessage || 'Unable to connect to stream' }), _jsx(TouchableOpacity, { style: styles.retryButton, onPress: () => void startStream(), children: _jsx(Text, { style: styles.retryText, children: "Reconnect" }) })] })) : (_jsx(TouchableOpacity, { style: styles.startButton, onPress: () => void startStream(), children: _jsx(Text, { style: styles.startText, children: "Start Avatar Session" }) })) })), status === 'connected' && (isAvatarSpeaking || isUserSpeaking) && (_jsxs(View, { style: styles.speakerPill, children: [_jsx(View, { style: [
+                            styles.speakerDot,
+                            isAvatarSpeaking ? styles.dotAvatar : styles.dotUser,
+                        ] }), _jsx(Text, { style: styles.speakerText, children: isAvatarSpeaking ? 'Avatar speaking' : 'Listening to you…' })] }))] }));
 });
 FacePeMobileAvatar.displayName = 'FacePeMobileAvatar';
 const styles = StyleSheet.create({
@@ -102,12 +597,14 @@ const styles = StyleSheet.create({
         width: '100%',
         height: '100%',
         backgroundColor: '#0F172A',
-        borderRadius: 16,
+        borderRadius: 20,
         overflow: 'hidden',
+        position: 'relative',
     },
-    webview: {
+    video: {
         flex: 1,
-        backgroundColor: 'transparent',
+        width: '100%',
+        height: '100%',
     },
     center: {
         justifyContent: 'center',
@@ -115,41 +612,116 @@ const styles = StyleSheet.create({
         padding: 24,
     },
     loadingText: {
-        marginTop: 12,
+        marginTop: 14,
         color: '#94A3B8',
-        fontSize: 13,
+        fontSize: 14,
         fontWeight: '500',
     },
-    errorText: {
+    errorTitle: {
         color: '#EF4444',
+        fontSize: 16,
+        fontWeight: '700',
+        marginBottom: 6,
+    },
+    errorText: {
+        color: '#F87171',
         fontSize: 13,
         textAlign: 'center',
+        lineHeight: 18,
+        marginBottom: 16,
+    },
+    retryButton: {
+        backgroundColor: '#7C3AED',
+        paddingHorizontal: 20,
+        paddingVertical: 10,
+        borderRadius: 12,
+    },
+    retryText: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+        fontSize: 13,
+    },
+    startButton: {
+        backgroundColor: '#7C3AED',
+        paddingHorizontal: 24,
+        paddingVertical: 14,
+        borderRadius: 14,
+    },
+    startText: {
+        color: '#FFFFFF',
+        fontWeight: '700',
+        fontSize: 15,
     },
     fallbackBox: {
         backgroundColor: '#1E293B',
         borderColor: '#334155',
         borderWidth: 1,
     },
+    badge: {
+        backgroundColor: 'rgba(124, 58, 237, 0.15)',
+        borderColor: '#7C3AED',
+        borderWidth: 1,
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+        borderRadius: 20,
+        marginBottom: 12,
+    },
+    badgeText: {
+        color: '#A78BFA',
+        fontSize: 11,
+        fontWeight: '600',
+    },
     noticeTitle: {
         color: '#FFFFFF',
         fontWeight: '700',
-        fontSize: 16,
+        fontSize: 17,
         marginBottom: 8,
     },
     noticeBody: {
         color: '#94A3B8',
         fontSize: 13,
         textAlign: 'center',
-        lineHeight: 18,
-        marginBottom: 12,
+        lineHeight: 19,
+        marginBottom: 16,
     },
     codeSnippet: {
-        color: '#A78BFA',
+        color: '#C4B5FD',
         backgroundColor: '#0F172A',
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        borderRadius: 10,
+        fontFamily: 'monospace',
+        fontSize: 12,
+        textAlign: 'center',
+    },
+    speakerPill: {
+        position: 'absolute',
+        top: 16,
+        alignSelf: 'center',
+        backgroundColor: 'rgba(15, 23, 42, 0.85)',
+        borderColor: 'rgba(255, 255, 255, 0.1)',
+        borderWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
         paddingHorizontal: 12,
         paddingVertical: 6,
-        borderRadius: 8,
-        fontFamily: 'monospace',
+        borderRadius: 20,
+    },
+    speakerDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginRight: 8,
+    },
+    dotAvatar: {
+        backgroundColor: '#10B981',
+    },
+    dotUser: {
+        backgroundColor: '#3B82F6',
+    },
+    speakerText: {
+        color: '#F8FAFC',
         fontSize: 12,
+        fontWeight: '500',
     },
 });