@experiaapp/webchat-react-native 2.0.1

package/lib/ui/VideoCall.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoCall = VideoCall;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/VideoCall.tsx
+// In-call screen (Plan Task 5). Wires a VideoCallClient (core signaling state
+// machine) to the UI: local + remote VideoTiles + a CallControls bar. WebRTC and
+// audio routing are reached ONLY through injectable seams so the whole screen is
+// exercisable in RNTL with fakes (no native modules):
+//
+//   - `webrtcFactory`  defaults to the real `reactNativeWebRTCFactory()`; tests
+//                      inject a fake factory (createPeerConnection/getUserMedia).
+//   - `audioRoute`     defaults to the real `reactNativeAudioRoute()`; tests inject
+//                      a spy AudioRoute. start()/stop() bracket the call so remote
+//                      audio is audible (speakerphone default, B14) and the session
+//                      is restored on teardown (Plan Task 4).
+//   - `createClient`   defaults to `createVideoCallClient`; tests can inject a
+//                      FakeSocket-backed (or fully fake) client to drive events.
+//
+// Lifecycle: on mount we build the client, subscribe to localStream/remoteStream/
+// ended/error, start the audio route, and `start()` the call (createAnswer-only
+// signaling — see core/VideoCallClient). Leave (control or chat-close S6) tears
+// down the client + stops the audio route + calls onEnd. A getUserMedia denial
+// surfaces an in-call error with a Settings deep-link (C13).
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const CallControls_1 = require("./CallControls");
+const CallPlaceholder_1 = require("./CallPlaceholder");
+const VideoTile_1 = require("./VideoTile");
+const VideoCallClient_1 = require("../core/VideoCallClient");
+const webrtc_1 = require("../adapters/webrtc");
+const audioRoute_1 = require("../adapters/audioRoute");
+const i18n_1 = require("../i18n");
+function VideoCall({ socket, getSessionId, onEnd, webrtcFactory, audioRoute, createClient = VideoCallClient_1.createVideoCallClient, dir = "ltr", language, agentName, agentAvatarUrl, theme, }) {
+    var _a, _b, _c, _d;
+    const t = (0, i18n_1.makeT)(language);
+    const [localStream, setLocalStream] = (0, react_1.useState)(null);
+    const [remoteStream, setRemoteStream] = (0, react_1.useState)(null);
+    const [isMuted, setIsMuted] = (0, react_1.useState)(false);
+    const [isCameraOff, setIsCameraOff] = (0, react_1.useState)(false);
+    // Speakerphone is the default route for a video call (B14); the toggle
+    // flips between speakerphone and the earpiece/OS-preferred route.
+    const [isSpeaker, setIsSpeaker] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [ended, setEnded] = (0, react_1.useState)(false);
+    const clientRef = (0, react_1.useRef)(null);
+    const audioRef = (0, react_1.useRef)(null);
+    // onEnd kept in a ref so the mount effect can stay [] and not re-run/leak the call.
+    const onEndRef = (0, react_1.useRef)(onEnd);
+    onEndRef.current = onEnd;
+    (0, react_1.useEffect)(() => {
+        const factory = webrtcFactory !== null && webrtcFactory !== void 0 ? webrtcFactory : (0, webrtc_1.reactNativeWebRTCFactory)();
+        const route = audioRoute !== null && audioRoute !== void 0 ? audioRoute : (0, audioRoute_1.reactNativeAudioRoute)();
+        audioRef.current = route;
+        const client = createClient({
+            socket,
+            webrtcFactory: factory,
+            getSessionId,
+        });
+        clientRef.current = client;
+        client.on("localStream", (s) => setLocalStream(s));
+        client.on("remoteStream", (s) => setRemoteStream(s));
+        client.on("ended", () => {
+            var _a;
+            setEnded(true);
+            (_a = onEndRef.current) === null || _a === void 0 ? void 0 : _a.call(onEndRef);
+        });
+        client.on("error", (e) => {
+            var _a;
+            // getUserMedia denial (and any start/signaling failure) -> in-call error
+            // with a Settings deep-link (C13). The call never connected, so release
+            // the audio route too.
+            setError((_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : t("call_error"));
+            try {
+                route.stop();
+            }
+            catch {
+                /* route may never have started */
+            }
+        });
+        // Bracket the call with the audio session: speakerphone default for video.
+        try {
+            route.start({ media: "video" });
+        }
+        catch {
+            /* non-fatal: audio route may be unavailable; the call can still render */
+        }
+        void client.start();
+        // Cleanup (unmount / chat-close S6): leave fully tears down + releases camera.
+        return () => {
+            try {
+                client.leave();
+            }
+            catch {
+                /* already torn down */
+            }
+            try {
+                route.stop();
+            }
+            catch {
+                /* already stopped */
+            }
+        };
+        // Mount-once: the seams are captured on first render by design (a live call
+        // must not be rebuilt when a parent re-renders). eslint-disable next line.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const handleToggleMute = () => {
+        var _a, _b;
+        const muted = (_b = (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.toggleMute()) !== null && _b !== void 0 ? _b : false;
+        setIsMuted(muted);
+    };
+    const handleToggleCamera = () => {
+        var _a, _b;
+        const off = (_b = (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.toggleVideo()) !== null && _b !== void 0 ? _b : false;
+        setIsCameraOff(off);
+    };
+    // Flip front<->back. Reaches the foundation client.switchCamera(), which
+    // prefers the native track's _switchCamera() (multi-camera safe) and falls
+    // back to an explicit back-camera getUserMedia + replaceTrack.
+    const handleFlipCamera = () => {
+        var _a;
+        void ((_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.switchCamera());
+    };
+    const handleToggleSpeaker = () => {
+        setIsSpeaker((prev) => {
+            var _a, _b;
+            const next = !prev;
+            try {
+                (_b = (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.setSpeaker) === null || _b === void 0 ? void 0 : _b.call(_a, next);
+            }
+            catch {
+                /* audio route may be unavailable; keep the UI state in sync regardless */
+            }
+            return next;
+        });
+    };
+    const handleLeave = () => {
+        var _a, _b;
+        try {
+            (_a = clientRef.current) === null || _a === void 0 ? void 0 : _a.leave();
+        }
+        finally {
+            try {
+                (_b = audioRef.current) === null || _b === void 0 ? void 0 : _b.stop();
+            }
+            catch {
+                /* already stopped */
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_safe_area_context_1.SafeAreaView, { testID: "video-call", style: { flex: 1, backgroundColor: "#000" }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1 }, children: [(0, jsx_runtime_1.jsx)(VideoTile_1.VideoTile, { kind: "remote", stream: remoteStream, objectFit: "cover", style: { flex: 1 } }), !remoteStream && !error && !ended ? ((0, jsx_runtime_1.jsx)(CallPlaceholder_1.CallPlaceholder, { variant: "waiting", name: agentName, avatarUrl: agentAvatarUrl, theme: theme, language: language, style: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 } })) : null, (0, jsx_runtime_1.jsx)(VideoTile_1.VideoTile, { kind: "local", stream: localStream, mirror: true, objectFit: "cover", style: {
+                            position: "absolute",
+                            top: 16,
+                            right: dir === "rtl" ? undefined : 16,
+                            left: dir === "rtl" ? 16 : undefined,
+                            width: 110,
+                            aspectRatio: 3 / 4,
+                            borderRadius: 10,
+                        } }), isCameraOff && !error ? ((0, jsx_runtime_1.jsx)(CallPlaceholder_1.CallPlaceholder, { variant: "cameraOff", theme: theme, language: language, testID: "call-local-camera-off", style: {
+                            position: "absolute",
+                            top: 16,
+                            right: dir === "rtl" ? undefined : 16,
+                            left: dir === "rtl" ? 16 : undefined,
+                            width: 110,
+                            aspectRatio: 3 / 4,
+                            borderRadius: 10,
+                        } })) : null, error ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "video-call-error", accessibilityRole: "alert", style: {
+                            position: "absolute",
+                            left: 16,
+                            right: 16,
+                            top: 0,
+                            bottom: 0,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            padding: 24,
+                        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                    color: "#fff",
+                                    fontSize: ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.font) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 14) + 2,
+                                    textAlign: "center",
+                                    marginBottom: 16,
+                                }, children: error }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "video-call-settings", accessibilityRole: "button", accessibilityLabel: "Open settings to grant camera and microphone access", onPress: () => {
+                                    void react_native_1.Linking.openSettings();
+                                }, style: {
+                                    paddingVertical: 10,
+                                    paddingHorizontal: 20,
+                                    borderRadius: 8,
+                                    backgroundColor: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary) !== null && _d !== void 0 ? _d : "#6C5CE7",
+                                }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#fff" }, children: t("open_settings") }) })] })) : null] }), (0, jsx_runtime_1.jsx)(CallControls_1.CallControls, { onToggleMute: handleToggleMute, onToggleCamera: handleToggleCamera, onFlipCamera: handleFlipCamera, onToggleSpeaker: handleToggleSpeaker, onLeave: handleLeave, isMuted: isMuted, isCameraOff: isCameraOff, isSpeaker: isSpeaker, disabled: ended || !!error, dir: dir, language: language, theme: theme })] }));
+}

package/lib/ui/VideoTile.d.ts

@@ -0,0 +1,25 @@
+import { type ViewStyle } from "react-native";
+/** The subset of a media stream a tile needs: a `toURL()` for RTCView. */
+export interface VideoTileStream {
+    toURL?(): string;
+}
+export interface VideoTileProps {
+    /** the stream to render; when null/undefined the tile is an empty placeholder */
+    stream?: VideoTileStream | null;
+    /** mirror the local preview so it reads like a front-facing camera */
+    mirror?: boolean;
+    /** "local" | "remote" — drives the testID + a11y label */
+    kind: "local" | "remote";
+    /** extra layout style merged onto the tile container */
+    style?: ViewStyle;
+    /** accessibility label override (defaults from `kind`) */
+    accessibilityLabel?: string;
+    /**
+     * How the frame fits the tile. "cover" fills the tile and crops the edges
+     * (the mobile-native default — fullscreen remote, self-view thumbnail);
+     * "contain" letterboxes so the whole frame is visible. Tunable per-tile so the
+     * crop-vs-letterbox tradeoff can be flipped on-device without a layout rewrite.
+     */
+    objectFit?: "contain" | "cover";
+}
+export declare function VideoTile({ stream, mirror, kind, style, accessibilityLabel, objectFit, }: VideoTileProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/VideoTile.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoTile = VideoTile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const react_native_webrtc_1 = require("react-native-webrtc");
+function VideoTile({ stream, mirror = false, kind, style, accessibilityLabel, objectFit = "cover", }) {
+    var _a, _b;
+    const streamURL = (_b = (_a = stream === null || stream === void 0 ? void 0 : stream.toURL) === null || _a === void 0 ? void 0 : _a.call(stream)) !== null && _b !== void 0 ? _b : null;
+    const label = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : (kind === "local" ? "Your camera preview" : "Remote video");
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: `video-tile-${kind}`, accessibilityLabel: label, style: [{ backgroundColor: "#000", overflow: "hidden" }, style], children: streamURL ? ((0, jsx_runtime_1.jsx)(react_native_webrtc_1.RTCView, { testID: `rtcview-${kind}`, streamURL: streamURL, mirror: mirror, objectFit: objectFit, style: { flex: 1 } })) : null }));
+}

package/lib/ui/VoiceMessage.d.ts

@@ -0,0 +1,19 @@
+import type { AudioAdapter } from "../adapters/audio";
+export interface VoiceMessageProps {
+    /** injected playback surface (fake in tests, real player on device) */
+    adapter: AudioAdapter;
+    /** local or hosted URI of the voice note */
+    uri: string;
+    /** recorded length, for the inline duration label */
+    durationMs?: number;
+    /**
+     * suspend playback (mic/audio mutual-exclusion with a video call, §4.4).
+     * When true the toggle is disabled.
+     */
+    disabled?: boolean;
+    /** optional typed-error sink for play/stop failures */
+    onError?: (err: unknown) => void;
+    theme: any;
+    testID?: string;
+}
+export declare function VoiceMessage({ adapter, uri, durationMs, disabled, onError, theme, testID, }: VoiceMessageProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/VoiceMessage.js

@@ -0,0 +1,127 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VoiceMessage = VoiceMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/VoiceMessage.tsx
+// Inline voice-note player (Task 6 UI). PROP-DRIVEN: playback is the injected
+// AudioAdapter prop (never a direct native module), so the play/pause toggle is
+// exercised in tests with a fake that resolves immediately.
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const Icon_1 = require("./Icon");
+// Static waveform motif (bar heights, px). Decorative — the AudioAdapter exposes
+// only play()/stop() with no position callback, so there is no live scrubber; the
+// whole waveform dims when paused and lights up while playing.
+const WAVEFORM = [10, 16, 24, 14, 20, 12, 22, 28, 16, 10, 22, 14, 18, 12, 9];
+/** mm:ss formatter for the duration label. */
+function formatDuration(ms) {
+    const total = Math.floor(ms / 1000);
+    const m = Math.floor(total / 60);
+    const s = total % 60;
+    return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+function VoiceMessage({ adapter, uri, durationMs = 0, disabled = false, onError, theme, testID = "voice-message", }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [playing, setPlaying] = (0, react_1.useState)(false);
+    // Live playback position; total prefers the engine-reported duration (fills in for
+    // received notes that arrive with durationMs:0) and falls back to the prop.
+    const [positionMs, setPositionMs] = (0, react_1.useState)(0);
+    const [playedTotalMs, setPlayedTotalMs] = (0, react_1.useState)(0);
+    const mountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    // A video call (or unmount-driven disable) stops any in-flight playback.
+    (0, react_1.useEffect)(() => {
+        if (disabled && playing) {
+            void adapter.stop().catch((err) => onError === null || onError === void 0 ? void 0 : onError(err));
+            setPlaying(false);
+            setPositionMs(0);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [disabled]);
+    // Live progress from the adapter (engines that report it). Advances the position,
+    // learns the real total when known, and resets to the start when the note ends.
+    const onStatus = (s) => {
+        if (!mountedRef.current)
+            return;
+        setPositionMs(s.positionMs);
+        if (s.durationMs > 0)
+            setPlayedTotalMs(s.durationMs);
+        if (s.didJustFinish) {
+            setPlaying(false);
+            setPositionMs(0);
+            void adapter.stop().catch(() => { });
+        }
+    };
+    const toggle = async () => {
+        if (disabled)
+            return;
+        try {
+            if (playing) {
+                await adapter.stop();
+                if (mountedRef.current) {
+                    setPlaying(false);
+                    setPositionMs(0);
+                }
+            }
+            else {
+                setPlaying(true);
+                await adapter.play(uri, { onStatus });
+            }
+        }
+        catch (err) {
+            if (mountedRef.current)
+                setPlaying(false);
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+    };
+    const primary = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.primary) !== null && _b !== void 0 ? _b : "#0B7A4B";
+    const surface = (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.surface) !== null && _d !== void 0 ? _d : "#F2F4F7";
+    const textColor = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) !== null && _f !== void 0 ? _f : "#1A1A1A";
+    const fontSize = (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.font) === null || _g === void 0 ? void 0 : _g.size) !== null && _h !== void 0 ? _h : 14;
+    const BTN = 44; // round play/pause tap target (>= 44 a11y minimum)
+    // Total prefers the engine-reported duration (received notes often arrive with
+    // durationMs:0); falls back to the recorded prop. While PLAYING show "current /
+    // total"; when idle show just the total (matches the recorded-duration contract).
+    const totalMs = playedTotalMs || durationMs;
+    const durationLabel = playing
+        ? `${formatDuration(positionMs)} / ${formatDuration(totalMs)}`
+        : formatDuration(totalMs);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID, style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 12,
+            paddingVertical: 10,
+            paddingHorizontal: 12,
+            borderRadius: 18,
+            minWidth: 200,
+            backgroundColor: surface,
+            borderWidth: 1,
+            borderColor: "rgba(0,0,0,0.06)",
+        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `${testID}-toggle`, accessibilityRole: "button", accessibilityLabel: playing ? "Pause voice message" : "Play voice message", accessibilityState: { disabled, selected: playing }, disabled: disabled, onPress: () => void toggle(), style: {
+                    width: BTN,
+                    height: BTN,
+                    borderRadius: BTN / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: primary,
+                    opacity: disabled ? 0.4 : 1,
+                }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: playing ? "pause" : "play", color: "#FFFFFF", size: 22 }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    flex: 1,
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 3,
+                    height: 30,
+                    opacity: playing ? 1 : 0.45,
+                }, children: WAVEFORM.map((h, i) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 3, height: h, borderRadius: 2, backgroundColor: primary } }, i))) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: `${testID}-duration`, style: {
+                    color: textColor,
+                    fontSize: fontSize - 1,
+                    minWidth: playing ? 78 : 42,
+                    textAlign: "right",
+                    fontVariant: ["tabular-nums"],
+                }, children: durationLabel })] }));
+}

package/lib/ui/WebChat.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface WebChatHandle {
+    open(): void;
+    close(): void;
+    sendMessage(text: string): void;
+    getUnreadCount(): number;
+    clearHistory(): void;
+    resetSession(): void;
+}
+export declare const WebChat: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<WebChatHandle>>;