@experiaapp/webchat-react-native 2.0.1

package/lib/ui/PrechatForm.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PrechatForm = PrechatForm;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/PrechatForm.tsx
+//
+// Pre-chat form at web parity (audit Section 3, Tier B #22). Renders the
+// server-configured (or host-supplied) `fields[]` with per-field type support
+// (text / email / phone / dropdown), `{en,ar}` localized label/placeholder/
+// errorMessage, a localized headline + submit label, RTL via `dirStyles(dir)`,
+// an in-form language toggle, inline error-clear on change, and a
+// submitting/disabled state. Validation (required + email/phone regex) is ported
+// verbatim from the web widget's `redux/setting/actions.ts`.
+//
+// On a valid submit it calls `onSubmit(values)` with the collected values keyed
+// by `field.key` — exactly the shape `core/greet.ts` (`buildGreet`) consumes, so
+// the greet plumbing stays untouched.
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+// ---- Validation regexes (PORTED VERBATIM from web actions.ts:84-85) ----
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const PHONE_RE = /^\+?[\d\s\-()]{6,}$/;
+// Localized-text resolver: web reads `text[lang] || text.en`. We additionally
+// accept a plain string (back-compat with hosts/tests that pass `label: "Name"`)
+// and tolerate an absent value.
+function localize(text, lang) {
+    if (text == null)
+        return "";
+    if (typeof text === "string")
+        return text;
+    return text[lang] || text.en || "";
+}
+// Default per-field error (web parity: actions.ts validatePrechatField). Used
+// only when the field has no `errorMessage[lang]` override.
+function defaultError(kind, lang) {
+    if (kind === "email") {
+        return lang === "ar" ? "بريد إلكتروني غير صالح" : "Invalid email address";
+    }
+    if (kind === "phone") {
+        return lang === "ar" ? "رقم هاتف غير صالح" : "Invalid phone number";
+    }
+    return lang === "ar" ? "هذا الحقل مطلوب" : "This field is required";
+}
+// Per-field validation mirroring web validatePrechatField (actions.ts:87-116):
+// required (default true -> required !== false) empty-check first, then the
+// type-specific regex on a non-empty trimmed value. Returns the localized
+// error string or null when valid.
+function validateField(field, value, lang) {
+    const trimmed = (value !== null && value !== void 0 ? value : "").trim();
+    const required = field.required !== false;
+    const custom = (kind) => localize(field.errorMessage, lang) || defaultError(kind, lang);
+    if (required && trimmed === "")
+        return custom("required");
+    if (trimmed === "")
+        return null; // optional + empty -> valid
+    if (field.type === "email" && !EMAIL_RE.test(trimmed))
+        return custom("email");
+    if (field.type === "phone" && !PHONE_RE.test(trimmed))
+        return custom("phone");
+    return null;
+}
+// RN keyboardType per field type (web parity: inputMode email/tel/text).
+function keyboardTypeFor(type) {
+    if (type === "email")
+        return "email-address";
+    if (type === "phone")
+        return "phone-pad";
+    return "default";
+}
+// Custom RN dropdown: a Pressable anchor opening a Modal bottom-sheet listing the
+// localized options (reuses the MediaUploadMenu sheet pattern — NO native picker
+// peer). The selected option's localized label shows in the anchor; the
+// placeholder shows when nothing is selected.
+function Dropdown({ field, value, lang, dir, theme, hasError, onSelect }) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const d = (0, dir_1.dirStyles)(dir);
+    const options = (_a = field.options) !== null && _a !== void 0 ? _a : [];
+    const placeholder = localize(field.placeholder, lang);
+    const selected = options.find((o) => o.value === value);
+    const display = selected ? localize(selected.label, lang) : placeholder;
+    const textColor = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : "#161616";
+    const muted = "#9DA4AE";
+    const borderColor = hasError ? "#B42318" : "#9DA4AE";
+    const surface = (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.surface) !== null && _e !== void 0 ? _e : "#FFFFFF";
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { testID: `prechat-field-${field.key}`, accessibilityRole: "button", accessibilityLabel: localize(field.label, lang), onPress: () => setOpen(true), style: {
+                    flexDirection: d.rowDirection,
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    borderWidth: 1,
+                    borderColor,
+                    borderRadius: 4,
+                    minHeight: 40,
+                    paddingHorizontal: 12,
+                    backgroundColor: surface,
+                }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                            flex: 1,
+                            color: selected ? textColor : muted,
+                            textAlign: d.textAlign,
+                            fontSize: (_g = (_f = theme === null || theme === void 0 ? void 0 : theme.font) === null || _f === void 0 ? void 0 : _f.size) !== null && _g !== void 0 ? _g : 16,
+                        }, children: display }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: muted, marginHorizontal: 4 }, children: "\u25BE" })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false), children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `prechat-dropdown-backdrop-${field.key}`, accessibilityRole: "button", onPress: () => setOpen(false), style: {
+                        flex: 1,
+                        backgroundColor: "rgba(0,0,0,0.35)",
+                        justifyContent: "flex-end",
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `prechat-dropdown-sheet-${field.key}`, accessibilityViewIsModal: true, accessibilityRole: "menu", onPress: () => { }, style: {
+                            backgroundColor: surface,
+                            borderTopLeftRadius: 12,
+                            borderTopRightRadius: 12,
+                            paddingVertical: 8,
+                        }, children: options.map((opt) => {
+                            var _a, _b;
+                            const isSel = opt.value === value;
+                            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `prechat-option-${field.key}-${opt.value}`, accessibilityRole: "menuitem", accessibilityState: { selected: isSel }, accessibilityLabel: localize(opt.label, lang), onPress: () => {
+                                    onSelect(opt.value);
+                                    setOpen(false);
+                                }, style: {
+                                    paddingVertical: 14,
+                                    paddingHorizontal: 20,
+                                    backgroundColor: isSel ? "#F3F4F6" : "transparent",
+                                }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: {
+                                        color: textColor,
+                                        textAlign: d.textAlign,
+                                        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 : 16,
+                                        fontWeight: isSel ? "600" : "400",
+                                    }, children: localize(opt.label, lang) }) }, opt.value));
+                        }) }) }) })] }));
+}
+function PrechatForm({ fields, onSubmit, dir, theme, headline, submitLabel, 
+// Initial language: ar when dir is rtl (web derives both from the same source);
+// the in-form toggle then drives `lang` independently of the host dir.
+language, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const initialLang = language === "ar" || (language == null && dir === "rtl") ? "ar" : "en";
+    const [lang, setLang] = (0, react_1.useState)(initialLang);
+    const [values, setValues] = (0, react_1.useState)({});
+    const [errors, setErrors] = (0, react_1.useState)({});
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    // The toggle flips the displayed language; direction follows it (web parity —
+    // the form direction tracks the form language, not the host dir).
+    const effectiveDir = lang === "ar" ? "rtl" : "ltr";
+    const d = (0, dir_1.dirStyles)(effectiveDir);
+    const fieldList = Array.isArray(fields) ? fields : [];
+    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 : "#1B8354";
+    const textColor = (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : "#161616";
+    const surface = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.surface) !== null && _f !== void 0 ? _f : "#FFFFFF";
+    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 : 16;
+    const headlineText = localize(headline, lang);
+    const submitText = localize(submitLabel, lang) || (lang === "ar" ? "ابدأ المحادثة" : "Start chat");
+    const toggleLabel = lang === "ar" ? "EN" : "AR";
+    const setValue = (key, v) => {
+        setValues((prev) => ({ ...prev, [key]: v }));
+        // Inline error-clear on change (web ChatContainer parity).
+        setErrors((prev) => {
+            if (!prev[key])
+                return prev;
+            const next = { ...prev };
+            delete next[key];
+            return next;
+        });
+    };
+    const submit = () => {
+        if (submitting)
+            return;
+        const nextErrors = {};
+        fieldList.forEach((f) => {
+            var _a;
+            const err = validateField(f, (_a = values[f.key]) !== null && _a !== void 0 ? _a : "", lang);
+            if (err)
+                nextErrors[f.key] = err;
+        });
+        setErrors(nextErrors);
+        if (Object.keys(nextErrors).length > 0)
+            return; // block submit until valid
+        setSubmitting(true);
+        onSubmit(values);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "prechat-form", style: { padding: 16, flexDirection: "column" }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: d.rowDirection, marginBottom: 8 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "prechat-language-toggle", accessibilityRole: "button", accessibilityLabel: lang === "ar" ? "Switch to English" : "التبديل إلى العربية", onPress: () => setLang((l) => (l === "ar" ? "en" : "ar")), style: {
+                        borderWidth: 1,
+                        borderColor: primary,
+                        borderRadius: 999,
+                        paddingVertical: 4,
+                        paddingHorizontal: 10,
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: primary, fontWeight: "600", fontSize: fontSize - 2 }, children: toggleLabel }) }) }), headlineText ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: "prechat-headline", style: {
+                    color: textColor,
+                    fontSize: fontSize + 4,
+                    fontWeight: "600",
+                    textAlign: d.textAlign,
+                    marginBottom: 16,
+                }, children: headlineText })) : null, fieldList.map((f) => {
+                var _a, _b, _c;
+                const label = localize(f.label, lang);
+                const placeholder = localize(f.placeholder, lang);
+                const required = f.required !== false;
+                const error = (_a = errors[f.key]) !== null && _a !== void 0 ? _a : null;
+                const isDropdown = f.type === "dropdown";
+                return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { marginBottom: 16 }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.Text, { testID: `prechat-label-${f.key}`, style: {
+                                color: textColor,
+                                fontSize,
+                                fontWeight: "500",
+                                textAlign: d.textAlign,
+                                marginBottom: 6,
+                            }, children: [label, required ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#B42318" }, children: " *" }) : null] }), isDropdown ? ((0, jsx_runtime_1.jsx)(Dropdown, { field: f, value: (_b = values[f.key]) !== null && _b !== void 0 ? _b : "", lang: lang, dir: effectiveDir, theme: theme, hasError: Boolean(error), onSelect: (v) => setValue(f.key, v) })) : ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { testID: `prechat-field-${f.key}`, accessibilityLabel: label, value: (_c = values[f.key]) !== null && _c !== void 0 ? _c : "", onChangeText: (t) => setValue(f.key, t), placeholder: placeholder, placeholderTextColor: "#9DA4AE", editable: !submitting, keyboardType: keyboardTypeFor(f.type), autoCapitalize: f.type === "email" ? "none" : "sentences", autoCorrect: f.type !== "email", style: {
+                                borderWidth: 1,
+                                borderColor: error ? "#B42318" : "#9DA4AE",
+                                borderRadius: 4,
+                                minHeight: 40,
+                                paddingHorizontal: 12,
+                                paddingVertical: 8,
+                                color: textColor,
+                                fontSize,
+                                textAlign: d.textAlign,
+                                backgroundColor: surface,
+                                writingDirection: effectiveDir,
+                            } })), error ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: `prechat-error-${f.key}`, style: {
+                                color: "#B42318",
+                                fontSize: fontSize - 2,
+                                textAlign: d.textAlign,
+                                marginTop: 4,
+                            }, children: error })) : null] }, f.key));
+            }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: d.rowDirection }, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "prechat-submit", accessibilityRole: "button", accessibilityLabel: submitText, accessibilityState: { disabled: submitting, busy: submitting }, disabled: submitting, onPress: submit, style: {
+                        backgroundColor: primary,
+                        borderRadius: 4,
+                        paddingVertical: 10,
+                        paddingHorizontal: 16,
+                        minWidth: 90,
+                        alignItems: "center",
+                        opacity: submitting ? 0.6 : 1,
+                    }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#FFFFFF", fontWeight: "500", fontSize }, children: submitText }) }) })] }));
+}

package/lib/ui/QuickReplies.d.ts

@@ -0,0 +1 @@
+export declare function QuickReplies({ items, onSelect, theme, dir }: any): import("react/jsx-runtime").JSX.Element;

package/lib/ui/QuickReplies.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickReplies = QuickReplies;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+const themeFactory_1 = require("../theme/themeFactory");
+// Quick-reply chips for a bot message (audit #3). The row honours the resolved
+// direction (audit #10): rowDirection flips to row-reverse under RTL so the
+// chips read leading-edge first. Selecting a chip calls onSelect(q) — the caller
+// (MessageList) routes it through send({ text: title, payload }).
+function QuickReplies({ items, onSelect, theme, dir = "ltr" }) {
+    var _a, _b, _c, _d, _e;
+    const d = (0, dir_1.dirStyles)(dir);
+    // Chip typography (web quickReplyFontSize / quickReplyFontWeight + defaultFontWeight).
+    // Fall back to the global font size / weight when the chat tokens are unset.
+    const chatStyle = (_a = theme === null || theme === void 0 ? void 0 : theme.chat) !== null && _a !== void 0 ? _a : {};
+    const fontSize = (_b = chatStyle.quickReplyFontSize) !== null && _b !== void 0 ? _b : theme.font.size;
+    const fontWeight = (_c = chatStyle.quickReplyFontWeight) !== null && _c !== void 0 ? _c : (_d = theme === null || theme === void 0 ? void 0 : theme.font) === null || _d === void 0 ? void 0 : _d.weight;
+    // Tenant custom font (item 28): loaded RN family for the chip weight; undefined =>
+    // omit fontFamily (system font).
+    const fontFamily = (0, themeFactory_1.resolveFontFamily)((_e = theme === null || theme === void 0 ? void 0 : theme.font) === null || _e === void 0 ? void 0 : _e.familyMap, fontWeight);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { flexDirection: d.rowDirection, flexWrap: "wrap", gap: 8, marginTop: 6 }, children: items.map((q) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: q.title, onPress: () => onSelect(q), style: { borderWidth: 1, borderColor: theme.colors.primary, borderRadius: 15, paddingHorizontal: 12, paddingVertical: 6 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.colors.primary, fontSize, fontWeight, fontFamily }, children: q.title }) }, q.payload))) }));
+}

package/lib/ui/TypingIndicator.d.ts

@@ -0,0 +1,9 @@
+import { type Dir } from "../theme/dir";
+interface TypingIndicatorProps {
+    theme: any;
+    dir?: Dir;
+    /** testID hook for the container (defaults to "typing-indicator"). */
+    testID?: string;
+}
+export declare function TypingIndicator({ theme, dir, testID }: TypingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export default TypingIndicator;

package/lib/ui/TypingIndicator.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypingIndicator = TypingIndicator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/TypingIndicator.tsx
+//
+// Animated three-dot "agent is typing" bubble (web parity — Body/index.tsx:134-191
+// renders an avatar + a white bubble with three pulsing dots while
+// `displayTypingIndication` is on). The web build wires it to a CSS `@keyframes wave`
+// opacity pulse; RN has no CSS keyframes, so we drive the same staggered fade with an
+// Animated.loop over three dots (each offset so the wave reads left → right).
+//
+// Themed: the bubble background + the leading-edge squared "tail" follow the received
+// bubble tokens (theme.bubble.receivedBg / receivedRadius), and the dots take the
+// bubble text color so they read on any tenant palette. Laid out with the logical
+// `dir` so the bubble sits on the leading edge (left in LTR, right in RTL).
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+/** One pulsing dot — a looped opacity fade with a per-dot start delay. */
+function Dot({ color, delay }) {
+    // 0.3 → 1 → 0.3 opacity wave (web uses opacity:0.4 idle); RN drives it with a loop.
+    const opacity = react_1.default.useRef(new react_native_1.Animated.Value(0.3)).current;
+    react_1.default.useEffect(() => {
+        const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
+            react_native_1.Animated.delay(delay),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 1,
+                duration: 400,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(opacity, {
+                toValue: 0.3,
+                duration: 400,
+                easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                useNativeDriver: true,
+            }),
+        ]));
+        loop.start();
+        return () => loop.stop();
+    }, [opacity, delay]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: {
+            width: 6,
+            height: 6,
+            borderRadius: 3,
+            marginHorizontal: 2,
+            backgroundColor: color,
+            opacity,
+        } }));
+}
+function TypingIndicator({ theme, dir = "ltr", testID = "typing-indicator" }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const d = (0, dir_1.dirStyles)(dir);
+    const bubble = (_a = theme === null || theme === void 0 ? void 0 : theme.bubble) !== null && _a !== void 0 ? _a : {};
+    const bg = (_d = (_b = bubble.receivedBg) !== null && _b !== void 0 ? _b : (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.surface) !== null && _d !== void 0 ? _d : "#FFFFFF";
+    // dots take the received text color (web uses black @ 0.4 opacity on the white bubble).
+    const dotColor = (_g = (_e = bubble.receivedText) !== null && _e !== void 0 ? _e : (_f = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : "#000000";
+    const radius = (_j = (_h = bubble.receivedRadius) !== null && _h !== void 0 ? _h : bubble.radius) !== null && _j !== void 0 ? _j : 8;
+    const marginX = (_k = bubble.marginX) !== null && _k !== void 0 ? _k : 15;
+    // Squared leading-edge tail to match a received bubble (web 0 1em 1em 1em).
+    const tail = d.bubbleTail("response");
+    const corner = tail === "bottomLeft"
+        ? { borderBottomLeftRadius: 0 }
+        : { borderBottomRightRadius: 0 };
+    const shadow = {
+        shadowColor: (_l = bubble.shadowColor) !== null && _l !== void 0 ? _l : "#000",
+        shadowOpacity: (_m = bubble.shadowOpacity) !== null && _m !== void 0 ? _m : 0.12,
+        shadowRadius: (_o = bubble.shadowRadius) !== null && _o !== void 0 ? _o : 6,
+        shadowOffset: (_p = bubble.shadowOffset) !== null && _p !== void 0 ? _p : { width: 0, height: 2 },
+        elevation: (_q = bubble.elevation) !== null && _q !== void 0 ? _q : 2,
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: testID, accessibilityLabel: "Agent is typing", style: { alignSelf: "flex-start", maxWidth: "85%" }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                flexDirection: d.rowDirection,
+                alignItems: "center",
+                backgroundColor: bg,
+                borderRadius: radius,
+                ...corner,
+                marginHorizontal: marginX,
+                paddingHorizontal: 14,
+                paddingVertical: 12,
+                ...shadow,
+            }, children: [(0, jsx_runtime_1.jsx)(Dot, { color: dotColor, delay: 0 }), (0, jsx_runtime_1.jsx)(Dot, { color: dotColor, delay: 150 }), (0, jsx_runtime_1.jsx)(Dot, { color: dotColor, delay: 300 })] }) }));
+}
+exports.default = TypingIndicator;

package/lib/ui/VideoBubble.d.ts

@@ -0,0 +1,10 @@
+export interface VideoBubbleProps {
+    /** hosted URL (mediaUrl) or local/data URI for the video */
+    uri: string;
+    /** display name (used by the FileTile fallback) */
+    name?: string;
+    theme: any;
+    testID?: string;
+}
+export declare function VideoBubble({ uri, name, theme, testID }: VideoBubbleProps): import("react/jsx-runtime").JSX.Element;
+export default VideoBubble;

package/lib/ui/VideoBubble.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoBubble = VideoBubble;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/VideoBubble.tsx
+// Inline video player for a received/sent message file with a uri/mediaUrl.
+//
+// Drawn with `expo-video` (useVideoPlayer + <VideoView/>). The dep is OPTIONAL at
+// runtime (chat-only consumers may not have the native side, and jest mocks it):
+// we lazy-require it inside a guarded helper (mirroring Icon.tsx loadSvg +
+// VideoTile.tsx). When it is absent — or fails to resolve under metro/jest — the
+// bubble degrades to a <FileTile> download link instead of throwing at render.
+//
+// HOOK-SAFETY: `useVideoPlayer` is a React hook and MUST NOT be called
+// conditionally. So this file never calls it directly. Instead it (a) resolves
+// expo-video once at render; (b) when it is ABSENT renders <FileTile> (a path
+// that calls no hook); (c) when it is PRESENT renders an inner <ExpoVideoPlayer>
+// component that UNCONDITIONALLY calls useVideoPlayer. Because the present/absent
+// decision picks a whole component (never a branch inside one component's body),
+// the hook order in each component stays stable across renders.
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const FileTile_1 = require("./FileTile");
+/**
+ * Lazily resolve `expo-video`. Returns `null` when the optional dep is not
+ * installed (or fails to resolve) so the caller renders the <FileTile> fallback
+ * instead of crashing. Mirrors Icon.tsx's loadSvg() / VideoTile's pattern.
+ */
+function loadExpoVideo() {
+    var _a;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const ev = require("expo-video");
+        if (ev && ev.useVideoPlayer && ev.VideoView) {
+            return { useVideoPlayer: ev.useVideoPlayer, VideoView: ev.VideoView };
+        }
+        if (globalThis.__DEV__ === true) {
+            // eslint-disable-next-line no-console
+            console.log("[webchat adapters] expo-video loaded but missing useVideoPlayer/VideoView");
+        }
+        return null;
+    }
+    catch (e) {
+        // DEV diagnostic: native expo-video absent from the running build (rebuild) -> link fallback.
+        if (globalThis.__DEV__ === true) {
+            // eslint-disable-next-line no-console
+            console.log(`[webchat adapters] require("expo-video") FAILED — ${(_a = e === null || e === void 0 ? void 0 : e.message) !== null && _a !== void 0 ? _a : e} (native missing → rebuild)`);
+        }
+        return null;
+    }
+}
+/**
+ * Inner player — only mounted when expo-video resolved, so the useVideoPlayer
+ * hook here is ALWAYS called (never conditionally). Sized like ImageBubble:
+ * full width up to 100%, a bounded height (~200), rounded, contain-fit.
+ */
+function ExpoVideoPlayer({ useVideoPlayer, VideoView, uri, name, theme, testID, }) {
+    var _a, _b;
+    const [failed, setFailed] = react_1.default.useState(false);
+    const player = useVideoPlayer(uri, (p) => {
+        p.loop = false;
+    });
+    // ASYNC playback failures (an unreachable / non-video URL, an unsupported codec,
+    // or a `data:` video URL iOS AVPlayer can't open) surface via the player's
+    // 'statusChange' event with status 'error' — they are NOT render throws, so the
+    // VideoErrorBoundary can't catch them and the bubble would otherwise sit as a dead
+    // empty box. Listen for the error status and degrade to a tappable <FileTile>.
+    react_1.default.useEffect(() => {
+        if (!(player === null || player === void 0 ? void 0 : player.addListener))
+            return;
+        const sub = player.addListener("statusChange", (payload) => {
+            if ((payload === null || payload === void 0 ? void 0 : payload.status) === "error")
+                setFailed(true);
+        });
+        return () => {
+            var _a;
+            try {
+                (_a = sub === null || sub === void 0 ? void 0 : sub.remove) === null || _a === void 0 ? void 0 : _a.call(sub);
+            }
+            catch { /* already removed */ }
+        };
+    }, [player]);
+    if (failed) {
+        return (0, jsx_runtime_1.jsx)(FileTile_1.FileTile, { uri: uri, name: name, theme: theme, testID: testID });
+    }
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: testID, children: (0, jsx_runtime_1.jsx)(VideoView, { testID: testID ? `${testID}-view` : undefined, player: player, nativeControls: true, allowsFullscreen: true, contentFit: "contain", style: {
+                // EXPLICIT pixel dimensions (like ImageBubble's 200x150). The previous
+                // width:"100%" collapsed to ~0px because the wrapping <View> has NO defined
+                // width — a 0-width VideoView is mounted in the tree but invisible on screen
+                // (the exact symptom: React DevTools shows VideoView present, nothing renders).
+                width: 240,
+                height: 180,
+                borderRadius: 8,
+                backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.surface) !== null && _b !== void 0 ? _b : "#000",
+            } }) }));
+}
+/**
+ * Catches a render throw from <ExpoVideoPlayer>. expo-video's JS can be present
+ * (Metro bundled it) while the NATIVE module is absent — e.g. a dev client built
+ * BEFORE expo-video was bundled. In that case useVideoPlayer/VideoView throw at
+ * render; rather than a dead/empty tall box we degrade to the <FileTile> link.
+ * After a dev-client rebuild the native module is present and the player renders.
+ */
+class VideoErrorBoundary extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false };
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    render() {
+        return this.state.failed ? this.props.fallback : this.props.children;
+    }
+}
+function VideoBubble({ uri, name, theme, testID = "video-bubble" }) {
+    const ev = loadExpoVideo();
+    // Graceful fallback: no expo-video JS at all (chat-only consumer / test without
+    // the mock) -> a plain link tile (no native dep, no hook).
+    if (!ev) {
+        return (0, jsx_runtime_1.jsx)(FileTile_1.FileTile, { uri: uri, name: name, theme: theme, testID: testID });
+    }
+    // expo-video JS is present but the NATIVE module may be missing (dev client not
+    // yet rebuilt) -> if the player throws, the boundary degrades to the link tile.
+    return ((0, jsx_runtime_1.jsx)(VideoErrorBoundary, { fallback: (0, jsx_runtime_1.jsx)(FileTile_1.FileTile, { uri: uri, name: name, theme: theme, testID: testID }), children: (0, jsx_runtime_1.jsx)(ExpoVideoPlayer, { useVideoPlayer: ev.useVideoPlayer, VideoView: ev.VideoView, uri: uri, name: name, theme: theme, testID: testID }) }));
+}
+exports.default = VideoBubble;

package/lib/ui/VideoCall.d.ts

@@ -0,0 +1,34 @@
+import { type VideoCallClient, type VideoCallClientOptions, type WebRTCFactory } from "../core/VideoCallClient";
+import type { Dir } from "../theme/dir";
+/** The audio-route surface the screen drives — `AudioRoute` satisfies it. */
+export interface AudioRouteLike {
+    start(opts?: {
+        media?: "video" | "audio";
+    }): void;
+    stop(): void;
+    setSpeaker?(on: boolean): void;
+}
+export interface VideoCallProps {
+    /** existing chat socket (the call rides it; no second connection) */
+    socket: VideoCallClientOptions["socket"];
+    /** web-parity call scoping (C8): the active chat session id, sent on join */
+    getSessionId: () => string;
+    /** called once the call ends (leave / inbound hangup / chat-close S6) */
+    onEnd?: () => void;
+    /** WebRTC seam — defaults to the real react-native-webrtc factory */
+    webrtcFactory?: WebRTCFactory;
+    /** audio-route seam — defaults to the real react-native-incall-manager wrapper */
+    audioRoute?: AudioRouteLike;
+    /** client factory seam — defaults to the real createVideoCallClient */
+    createClient?: (opts: VideoCallClientOptions) => VideoCallClient;
+    /** layout direction (controls mirror under rtl) */
+    dir?: Dir;
+    /** resolved language — localizes the error copy + control labels (audit #8). */
+    language?: string;
+    /** agent display name — shown on the "connecting" placeholder before the remote joins */
+    agentName?: string;
+    /** agent avatar URL — shown on the "connecting" placeholder (falls back to initials) */
+    agentAvatarUrl?: string;
+    theme: any;
+}
+export declare function VideoCall({ socket, getSessionId, onEnd, webrtcFactory, audioRoute, createClient, dir, language, agentName, agentAvatarUrl, theme, }: VideoCallProps): import("react/jsx-runtime").JSX.Element;