@experiaapp/webchat-react-native 2.0.1

package/lib/ui/AudioRecorder.js

@@ -0,0 +1,228 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AudioRecorder = AudioRecorder;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/AudioRecorder.tsx
+// Voice-note recorder UI (Task 6 UI). Two capture paths, picked HOOK-SAFELY:
+//
+//   1. INJECTED IMPERATIVE ADAPTER (host-supplied, or the test fakes): when the
+//      adapter's `recordingDelegated` flag is NOT set, its imperative
+//      startRecording()/stopRecording() are the real capture surface and are used
+//      as-is (the original Task 6 behaviour, unchanged).
+//
+//   2. DEFAULT expo-audio PATH: the batteries-included default adapter
+//      (createExpoAudioAdapter) marks itself `recordingDelegated:true` because
+//      expo-audio's recorder is HOOK-ONLY (useAudioRecorder, Rules of Hooks) and
+//      cannot live on an object method. In that case this component drives the
+//      hook directly: it renders an inner <ExpoRecorderControls> that
+//      UNCONDITIONALLY calls useAudioRecorder(RecordingPresets.HIGH_QUALITY) and
+//      runs permission → setAudioModeAsync → prepare → record → stop → read uri,
+//      emitting onRecorded({ uri, mimeType:"audio/mp4" }). When expo-audio is
+//      absent the recorder stays hidden/disabled (graceful degradation).
+//
+// HOOK-SAFETY (mirrors VideoBubble.tsx): useAudioRecorder is a React hook and MUST
+// NOT be called conditionally. So the present/absent decision picks a WHOLE
+// component (the imperative <RecorderControls>, the hook-driven
+// <ExpoRecorderControls>, or nothing) — never a branch inside one component's body
+// — keeping each component's hook order stable across renders.
+//
+// State machine (shared by both paths): idle → recording → (stopped, emits
+// onRecorded). The recorded asset is handed up via onRecorded so the host routes
+// it through the same attach() path as picked files. The onRecorded → attach
+// (base64-over-socket) flow + the autoStart behaviour are intact in both paths.
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const Icon_1 = require("./Icon");
+/** Container mime the expo-audio HIGH_QUALITY preset records (M4A/AAC, iOS+Android). */
+const RECORDED_AUDIO_MIME = "audio/mp4";
+/** mm:ss formatter for the live timer. */
+function formatTimer(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")}`;
+}
+/**
+ * Lazily resolve `expo-audio`'s recorder surface. Returns `null` when the optional
+ * dep is not installed (or fails to resolve under metro/jest) so the caller renders
+ * nothing instead of crashing. Mirrors VideoBubble.loadExpoVideo().
+ */
+function loadExpoRecorder() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const ea = require("expo-audio");
+        if (ea && typeof ea.useAudioRecorder === "function" && ea.RecordingPresets) {
+            return {
+                useAudioRecorder: ea.useAudioRecorder,
+                RecordingPresets: ea.RecordingPresets,
+                requestRecordingPermissionsAsync: ea.requestRecordingPermissionsAsync,
+                setAudioModeAsync: ea.setAudioModeAsync,
+            };
+        }
+        return null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * Shared presentational state machine. PROP-DRIVEN by abstract `start`/`stop`
+ * async callbacks so the imperative-adapter path and the expo-audio hook path
+ * reuse one identical UI (toggle glyph, live timer, idle→recording→stopped). The
+ * testIDs (`audio-recorder`, `record-toggle`, `record-timer`) are stable across
+ * both paths.
+ */
+function RecorderUI({ start, stop, onRecorded, onError, disabled, autoStart, theme, iconColor, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const [state, setState] = (0, react_1.useState)("idle");
+    const [elapsedMs, setElapsedMs] = (0, react_1.useState)(0);
+    const startedAtRef = (0, react_1.useRef)(0);
+    const tickRef = (0, react_1.useRef)(null);
+    const autoStartedRef = (0, react_1.useRef)(false);
+    const clearTick = () => {
+        if (tickRef.current != null) {
+            clearInterval(tickRef.current);
+            tickRef.current = null;
+        }
+    };
+    // Tear down the timer on unmount.
+    (0, react_1.useEffect)(() => clearTick, []);
+    // If a video call suspends us mid-record, stop the ticking timer.
+    (0, react_1.useEffect)(() => {
+        if (disabled && state === "recording") {
+            clearTick();
+        }
+    }, [disabled, state]);
+    const startRecording = async () => {
+        try {
+            await start();
+            startedAtRef.current = Date.now();
+            setElapsedMs(0);
+            setState("recording");
+            clearTick();
+            tickRef.current = setInterval(() => {
+                setElapsedMs(Date.now() - startedAtRef.current);
+            }, 250);
+        }
+        catch (err) {
+            clearTick();
+            setState("idle");
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+    };
+    const stopRecording = async () => {
+        clearTick();
+        try {
+            const result = await stop();
+            setState("stopped");
+            setElapsedMs(0);
+            onRecorded(result);
+        }
+        catch (err) {
+            setState("idle");
+            onError === null || onError === void 0 ? void 0 : onError(err);
+        }
+    };
+    // Selector-driven launch: arm once on mount when asked to autoStart. Placed
+    // after startRecording/stopRecording so they are in scope (no TDZ).
+    (0, react_1.useEffect)(() => {
+        if (autoStart && !autoStartedRef.current && !disabled && state === "idle") {
+            autoStartedRef.current = true;
+            void startRecording();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [autoStart]);
+    const isRecording = state === "recording";
+    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 recColor = "#E5484D"; // record red, distinct from the brand colour
+    const txt = (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.text) !== null && _d !== void 0 ? _d : "#1A1A1A";
+    const fontSize = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.font) === null || _e === void 0 ? void 0 : _e.size) !== null && _f !== void 0 ? _f : 14;
+    const micColor = iconColor !== null && iconColor !== void 0 ? iconColor : primary;
+    // While recording: a red record dot + mm:ss timer + a round STOP button.
+    // Idle: a single mic affordance. The `record-toggle` testID is on BOTH branches
+    // (tests press it to start, then again to stop) and the a11y labels/state are
+    // preserved verbatim.
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "audio-recorder", style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 10,
+            paddingVertical: 6,
+            paddingHorizontal: isRecording ? 12 : 0,
+            borderRadius: 20,
+            backgroundColor: isRecording ? "rgba(229,72,77,0.10)" : "transparent",
+        }, children: isRecording ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: recColor } }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: "record-timer", style: { color: txt, fontSize, fontVariant: ["tabular-nums"] }, children: formatTimer(elapsedMs) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "record-toggle", accessibilityRole: "button", accessibilityLabel: "Stop recording", accessibilityState: { disabled, busy: true }, disabled: disabled, onPress: () => {
+                        if (!disabled)
+                            void stopRecording();
+                    }, style: {
+                        width: 36,
+                        height: 36,
+                        borderRadius: 18,
+                        alignItems: "center",
+                        justifyContent: "center",
+                        backgroundColor: recColor,
+                        opacity: disabled ? 0.4 : 1,
+                    }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "stop", color: "#FFFFFF", size: 18 }) })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "record-toggle", accessibilityRole: "button", accessibilityLabel: "Record voice message", accessibilityState: { disabled, busy: false }, disabled: disabled, onPress: () => {
+                if (!disabled)
+                    void startRecording();
+            }, style: { padding: 6, opacity: disabled ? 0.4 : 1 }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "mic", color: micColor, size: fontSize + 8 }) })) }));
+}
+/**
+ * DEFAULT expo-audio capture path. Only mounted when expo-audio resolved, so the
+ * useAudioRecorder hook here is ALWAYS called (never conditionally). Drives the
+ * confirmed expo-audio recording lifecycle and hands abstract start/stop callbacks
+ * to the shared <RecorderUI>:
+ *   useAudioRecorder(HIGH_QUALITY) → requestRecordingPermissionsAsync()
+ *   → setAudioModeAsync({ playsInSilentMode:true, allowsRecording:true })
+ *   → prepareToRecordAsync() → record()   (start)
+ *   → stop(); read recorder.uri           (stop, emits audio/mp4)
+ */
+function ExpoRecorderControls({ expo, onRecorded, onError, disabled, autoStart, theme, iconColor, }) {
+    const recorder = expo.useAudioRecorder(expo.RecordingPresets.HIGH_QUALITY);
+    const startedAtRef = (0, react_1.useRef)(0);
+    const start = async () => {
+        // Permission first; a denial throws to onError (parity with the imperative path).
+        if (typeof expo.requestRecordingPermissionsAsync === "function") {
+            const perm = await expo.requestRecordingPermissionsAsync();
+            if (perm && perm.granted === false) {
+                throw new Error("Microphone permission denied");
+            }
+        }
+        if (typeof expo.setAudioModeAsync === "function") {
+            await expo.setAudioModeAsync({ playsInSilentMode: true, allowsRecording: true });
+        }
+        await recorder.prepareToRecordAsync();
+        recorder.record();
+        startedAtRef.current = Date.now();
+    };
+    const stop = async () => {
+        var _a;
+        await recorder.stop();
+        return {
+            uri: (_a = recorder.uri) !== null && _a !== void 0 ? _a : "",
+            // expo-audio HIGH_QUALITY records an M4A/AAC container on iOS+Android. We
+            // HONESTLY tag the real container mime (already in the media ALLOW_LIST);
+            // we do NOT mislabel it as the canonical audio/ogg;codecs=opus.
+            mimeType: RECORDED_AUDIO_MIME,
+            durationMs: startedAtRef.current ? Date.now() - startedAtRef.current : 0,
+        };
+    };
+    return ((0, jsx_runtime_1.jsx)(RecorderUI, { start: start, stop: stop, onRecorded: onRecorded, onError: onError, disabled: disabled, autoStart: autoStart, theme: theme, iconColor: iconColor }));
+}
+function AudioRecorder({ adapter, onRecorded, onError, disabled = false, autoStart = false, theme, iconColor, }) {
+    // PATH 1 — injected imperative adapter (host-supplied / test fakes). When the
+    // adapter does NOT delegate recording, its startRecording/stopRecording ARE the
+    // real capture surface; use them as-is (original Task 6 behaviour).
+    if (!(adapter === null || adapter === void 0 ? void 0 : adapter.recordingDelegated)) {
+        return ((0, jsx_runtime_1.jsx)(RecorderUI, { start: () => adapter.startRecording(), stop: () => adapter.stopRecording(), onRecorded: onRecorded, onError: onError, disabled: disabled, autoStart: autoStart, theme: theme, iconColor: iconColor }));
+    }
+    // PATH 2 — default adapter delegates recording to the expo-audio hook. Resolve
+    // the peer once at render; mount the hook-driven controls when present.
+    const expo = loadExpoRecorder();
+    if (expo) {
+        return ((0, jsx_runtime_1.jsx)(ExpoRecorderControls, { expo: expo, onRecorded: onRecorded, onError: onError, disabled: disabled, autoStart: autoStart, theme: theme, iconColor: iconColor }));
+    }
+    // PATH 3 — recording delegated but expo-audio is absent (chat-only consumer /
+    // jest without the mock): no capture surface exists, so the recorder stays
+    // hidden (graceful — calls no hook, pulls in no native dep).
+    return null;
+}

package/lib/ui/Bubble.d.ts

@@ -0,0 +1 @@
+export declare function Bubble({ message, dir, theme, testID, audioAdapter, onQuickReply, react, showMessageDate, showAvatar, avatar }: any): import("react/jsx-runtime").JSX.Element;

package/lib/ui/Bubble.js

@@ -0,0 +1,265 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bubble = Bubble;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const linkify_1 = require("../core/linkify");
+const openLink_1 = require("./openLink");
+const dir_1 = require("../theme/dir");
+const ImageBubble_1 = require("./ImageBubble");
+const FileTile_1 = require("./FileTile");
+const VideoBubble_1 = require("./VideoBubble");
+const VoiceMessage_1 = require("./VoiceMessage");
+const Icon_1 = require("./Icon");
+const mediaType_1 = require("../core/mediaType");
+const themeFactory_1 = require("../theme/themeFactory");
+// Map the logical start/end edge (which flips under RTL) onto an RN alignSelf.
+// Bot messages sit on the leading edge, user echoes on the trailing edge.
+function bubbleAlignSelf(sender, d) {
+    const onStart = sender === "response";
+    return onStart ? "flex-start" : "flex-end";
+}
+// Translate the logical tail corner from dir.bubbleTail into the matching
+// per-corner radius overrides. Web squares off the tail corner of the bubble
+// (sent: bottom-end is squared; received: bottom-start is squared); every other
+// corner keeps the configured radius.
+function tailCornerStyle(corner, radius) {
+    return corner === "bottomLeft"
+        ? { borderBottomLeftRadius: 0, borderBottomRightRadius: radius }
+        : { borderBottomRightRadius: 0, borderBottomLeftRadius: radius };
+}
+// Classify an attachment into image | video | audio | document, mirroring web
+// FileDisplay. `detectMediaKind` (src/core/mediaType.ts) is the single shared
+// classifier: MIME (type/mimeType) wins, else the extension of name/mediaUrl/uri.
+// We also honor data-URLs (data:image / data:video / data:audio) which carry no
+// extension by mapping the data: prefix onto a synthetic mime for the classifier.
+function attachmentKind(uri, file) {
+    var _a;
+    let type = (_a = file === null || file === void 0 ? void 0 : file.type) !== null && _a !== void 0 ? _a : file === null || file === void 0 ? void 0 : file.mimeType;
+    if (!type && typeof uri === "string" && uri.startsWith("data:")) {
+        // data:<mime>;... — hand the embedded mime to the classifier (MIME wins).
+        type = uri.slice(5).split(/[;,]/)[0];
+    }
+    return (0, mediaType_1.detectMediaKind)({ name: file === null || file === void 0 ? void 0 : file.name, type, mediaUrl: file === null || file === void 0 ? void 0 : file.mediaUrl, uri });
+}
+// Normalize the web RecieverMsg shapes (files[] objects + media[]/mediaUrl URL
+// strings) into a flat list of { uri, name, file } we can render.
+function collectAttachments(message) {
+    const out = [];
+    const files = Array.isArray(message.files) ? message.files : [];
+    const media = Array.isArray(message.media) ? message.media : [];
+    const meaningfulFiles = files.filter((f) => f && typeof f === "object" && Object.keys(f).length > 0 && (f.name || f.blobURL || f.mediaUrl || f.uri));
+    if (meaningfulFiles.length > 0) {
+        meaningfulFiles.forEach((f, i) => {
+            var _a, _b;
+            // Display-URL precedence:
+            //   f.mediaUrl / f.blobURL  — explicit hosted/blob URL on the file object
+            //   message.mediaUrl        — the server echo's hosted URL (after ack/relaunch)
+            //   f.uri                   — the LOCAL file:// uri (alive in the optimistic window)
+            //   media[i]                — the inline base64 data: URL (last resort)
+            // CRITICAL: the local file:// uri must beat the base64 data: URL. iOS AVPlayer
+            // (expo-video) CANNOT open a `data:video/...;base64,...` URL — it throws
+            // "Cannot Open … media format is not supported", so a freshly-sent VIDEO showed
+            // an empty box. The local file:// (and the hosted URL after ack) ARE playable, so
+            // we prefer them; the data: URL stays only as a final fallback. `message.mediaUrl`
+            // stays ahead of f.uri so a persisted/relaunched sent message (whose file:// may
+            // be gone) still resolves to the hosted URL, not a dead local path.
+            const uri = f.mediaUrl || f.blobURL || message.mediaUrl || f.uri || media[i] || "";
+            // Classification mime: the file's own mime, else the message-level mime (web
+            // `message.type`) — so a hosted, extension-less URL still classifies as
+            // image/video instead of defaulting to a document/browser link.
+            if (uri)
+                out.push({ uri, name: f.name, file: { ...f, type: (_b = (_a = f.type) !== null && _a !== void 0 ? _a : f.mimeType) !== null && _b !== void 0 ? _b : message.type } });
+        });
+        return out;
+    }
+    // No usable file objects — fall back to media[] / mediaUrl URL strings.
+    const urls = media.length > 0 ? media : message.mediaUrl ? [message.mediaUrl] : [];
+    urls.forEach((url) => {
+        if (url)
+            out.push({ uri: url, name: undefined, file: { type: message.type } });
+    });
+    return out;
+}
+// Web formats the per-message time as "hh:mm a" (dayjs). Keep a tiny dependency-free
+// equivalent so the timestamp row matches without pulling dayjs into the SDK.
+function formatTime(ts) {
+    const dt = new Date(ts);
+    if (isNaN(dt.getTime()))
+        return "";
+    let h = dt.getHours();
+    const m = dt.getMinutes();
+    const ampm = h >= 12 ? "pm" : "am";
+    h = h % 12;
+    if (h === 0)
+        h = 12;
+    const hh = h < 10 ? `0${h}` : `${h}`;
+    const mm = m < 10 ? `0${m}` : `${m}`;
+    return `${hh}:${mm} ${ampm}`;
+}
+function Bubble({ message, dir, theme, testID, audioAdapter, onQuickReply, react, showMessageDate = true, showAvatar = false, avatar }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
+    const isBot = message.sender === "response";
+    // Per-message dir: Arabic content forces rtl regardless of the surface dir;
+    // otherwise follow the resolved surface dir.
+    const d = (0, dir_1.dirStyles)(message.text && /[؀-ۿ]/.test(message.text) ? "rtl" : dir);
+    const tokens = (0, linkify_1.linkify)((_a = message.text) !== null && _a !== void 0 ? _a : "");
+    const attachments = collectAttachments(message);
+    const quickReplies = Array.isArray(message.quick_replies) ? message.quick_replies : [];
+    // Web-parity bubble tokens (theme.bubble). Legacy callers/tests without a `bubble`
+    // block still work via the surface/text fallbacks below.
+    const bubbleStyle = (_b = theme.bubble) !== null && _b !== void 0 ? _b : {};
+    const quickReplyStyle = (_c = theme.quickReply) !== null && _c !== void 0 ? _c : {};
+    const chatStyle = (_d = theme.chat) !== null && _d !== void 0 ? _d : {};
+    // Per-side corner radius + squared tail corner (web: sent uses sendMsgCornerRadius,
+    // received uses receivedMsgCornerRadius; the tail corner is squared off).
+    const radius = (_f = (_e = (isBot ? bubbleStyle.receivedRadius : bubbleStyle.sentRadius)) !== null && _e !== void 0 ? _e : bubbleStyle.radius) !== null && _f !== void 0 ? _f : 8;
+    const padding = (_g = bubbleStyle.padding) !== null && _g !== void 0 ? _g : 8;
+    const marginX = (_h = bubbleStyle.marginX) !== null && _h !== void 0 ? _h : 15;
+    // dir.ts consumers (audit #10): alignSelf from the logical start/end edge,
+    // and the squared tail corner from bubbleTail(sender).
+    const alignSelf = bubbleAlignSelf(message.sender, d);
+    const corner = tailCornerStyle(d.bubbleTail(isBot ? "response" : "user"), radius);
+    // Sender differentiation (audit: bubbles were all white). Bot ("response") uses
+    // the received palette; user echoes use the sent palette. Falls back to the old
+    // surface/text colours when a theme has no `bubble` block (legacy callers/tests).
+    const backgroundColor = isBot
+        ? ((_j = bubbleStyle.receivedBg) !== null && _j !== void 0 ? _j : theme.colors.surface)
+        : ((_k = bubbleStyle.sentBg) !== null && _k !== void 0 ? _k : theme.colors.surface);
+    const textColor = isBot
+        ? ((_l = bubbleStyle.receivedText) !== null && _l !== void 0 ? _l : theme.colors.text)
+        : ((_m = bubbleStyle.sentText) !== null && _m !== void 0 ? _m : theme.colors.text);
+    // Link colour stays the brand primary on bot bubbles, but on the (coloured) user
+    // bubble that is unreadable — use the sent text colour there for contrast.
+    const linkColor = isBot ? theme.colors.primary : textColor;
+    // Per-message timestamp colour (web sent/receivedDateFontColor). Each side now
+    // has its own token (chatStyle.sentDateColor / receivedDateColor); fall back to
+    // the shared chat date colour, then the bubble text colour, so legacy themes
+    // without the split tokens keep the old behaviour.
+    const dateColor = isBot
+        ? ((_p = (_o = chatStyle.receivedDateColor) !== null && _o !== void 0 ? _o : chatStyle.dateColor) !== null && _p !== void 0 ? _p : textColor)
+        : ((_r = (_q = chatStyle.sentDateColor) !== null && _q !== void 0 ? _q : chatStyle.dateColor) !== null && _r !== void 0 ? _r : textColor);
+    // Body typography (web defaultFontWeight + chatSectionStyle msg*). The message
+    // text size/weight come from the chat tokens, falling back to the global font
+    // size / weight (undefined weight => RN default). #7/#8/#9.
+    const baseWeight = (_s = theme === null || theme === void 0 ? void 0 : theme.font) === null || _s === void 0 ? void 0 : _s.weight;
+    const msgFontSize = (_t = chatStyle.msgFontSize) !== null && _t !== void 0 ? _t : theme.font.size;
+    const msgFontWeight = (_u = chatStyle.msgFontWeight) !== null && _u !== void 0 ? _u : baseWeight;
+    // Date row size/weight (web dateFontSize / dateFontWeight); default 11 to keep
+    // the historical timestamp size when unset.
+    const dateFontSize = (_v = chatStyle.dateFontSize) !== null && _v !== void 0 ? _v : 11;
+    const dateFontWeight = (_w = chatStyle.dateFontWeight) !== null && _w !== void 0 ? _w : baseWeight;
+    // Quick-reply chip typography (web quickReplyFontSize / quickReplyFontWeight).
+    const quickReplyFontSize = (_x = chatStyle.quickReplyFontSize) !== null && _x !== void 0 ? _x : theme.font.size;
+    const quickReplyFontWeight = (_y = chatStyle.quickReplyFontWeight) !== null && _y !== void 0 ? _y : baseWeight;
+    // Tenant custom font (item 28): resolve the loaded RN family for the weight EACH
+    // row renders. `undefined` (no tenant font, or no entry for that weight) => the
+    // style omits fontFamily and RN uses the system font (today's look).
+    const familyMap = (_z = theme === null || theme === void 0 ? void 0 : theme.font) === null || _z === void 0 ? void 0 : _z.familyMap;
+    const msgFontFamily = (0, themeFactory_1.resolveFontFamily)(familyMap, msgFontWeight);
+    const dateFontFamily = (0, themeFactory_1.resolveFontFamily)(familyMap, dateFontWeight);
+    const quickReplyFontFamily = (0, themeFactory_1.resolveFontFamily)(familyMap, quickReplyFontWeight);
+    // Soft drop shadow (web theme.palette.general.boxShadow). RN needs shadow* on iOS
+    // and elevation on Android — without this a white received bubble is invisible on
+    // the white chat background (user's #1 complaint).
+    const shadow = {
+        shadowColor: (_0 = bubbleStyle.shadowColor) !== null && _0 !== void 0 ? _0 : "#000",
+        shadowOpacity: (_1 = bubbleStyle.shadowOpacity) !== null && _1 !== void 0 ? _1 : 0.12,
+        shadowRadius: (_2 = bubbleStyle.shadowRadius) !== null && _2 !== void 0 ? _2 : 6,
+        shadowOffset: (_3 = bubbleStyle.shadowOffset) !== null && _3 !== void 0 ? _3 : { width: 0, height: 2 },
+        elevation: (_4 = bubbleStyle.elevation) !== null && _4 !== void 0 ? _4 : 2,
+    };
+    const timeLabel = showMessageDate && message.timestamp != null ? formatTime(message.timestamp) : "";
+    // Per-message avatar (item 25, web RecieverMsg.tsx:76-90/100-118): an agent avatar
+    // <Image> rendered on the leading edge of a RECEIVED bubble, gated by showAvatar &&
+    // avatar?.url. Sized from theme.chat.avatarMsg* (web chatSectionStyle avatarMsg*),
+    // circular. No url => no avatar (graceful fallback; web shows a default image, but
+    // the SDK has no bundled asset so it omits the element rather than shipping one).
+    const showMsgAvatar = isBot && showAvatar && Boolean(avatar === null || avatar === void 0 ? void 0 : avatar.url);
+    const avatarW = (_5 = chatStyle.avatarMsgWidth) !== null && _5 !== void 0 ? _5 : 32;
+    const avatarH = (_6 = chatStyle.avatarMsgHeight) !== null && _6 !== void 0 ? _6 : 32;
+    const avatarNode = showMsgAvatar ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { testID: testID ? `${testID}-avatar` : "bubble-avatar", accessibilityRole: "image", accessibilityLabel: (_7 = avatar === null || avatar === void 0 ? void 0 : avatar.name) !== null && _7 !== void 0 ? _7 : "agent avatar", source: { uri: avatar.url }, resizeMode: "cover", style: {
+            width: avatarW,
+            height: avatarH,
+            borderRadius: Math.max(avatarW, avatarH) / 2,
+            marginHorizontal: 6,
+            alignSelf: "flex-end",
+        } })) : null;
+    // Feedback thumbs row (web parity, RecieverMsg.tsx:216-259). Shown ONLY on a
+    // received bubble that carries the server gate (`options.enableReaction`) AND a
+    // stable server id (`messageKey`) — both must be present or the row is unreachable.
+    // Active reaction = full-opacity primary (like) / danger (dislike); inactive = dimmed.
+    const showReactions = isBot && Boolean(message.messageKey) && Boolean((_8 = message.options) === null || _8 === void 0 ? void 0 : _8.enableReaction);
+    const reaction = (_9 = message.userReaction) !== null && _9 !== void 0 ? _9 : null;
+    const likeActive = reaction === "like";
+    const dislikeActive = reaction === "dislike";
+    // Danger colour for an active dislike (web error.main); fall back to a red when the
+    // theme has no dedicated danger token. Like uses the brand primary.
+    const dangerColor = (_13 = (_11 = (_10 = theme.colors) === null || _10 === void 0 ? void 0 : _10.danger) !== null && _11 !== void 0 ? _11 : (_12 = theme.colors) === null || _12 === void 0 ? void 0 : _12.error) !== null && _13 !== void 0 ? _13 : "#EB5757";
+    const likeColor = theme.colors.primary;
+    const DIMMED = 0.5;
+    // The bubble + its quick-reply chips share a column so the chips sit BELOW the
+    // bubble (web renders them outside/under the received bubble), aligned to the
+    // same leading edge and capped so a long thread doesn't span the full width.
+    // When a per-message avatar is shown, the column sits in a row beside the avatar
+    // (avatar on the leading edge, flipped under RTL via d.rowDirection).
+    const column = ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { alignSelf, maxWidth: avatarNode ? undefined : "85%", flexShrink: 1 }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID, accessible: true, accessibilityRole: "text", 
+                // announce only bot messages (per Task 16 note); user echoes are not live regions
+                accessibilityLiveRegion: isBot ? "polite" : "none", style: {
+                    backgroundColor,
+                    padding,
+                    borderRadius: radius,
+                    marginHorizontal: marginX,
+                    ...corner,
+                    ...shadow,
+                }, children: [message.text ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: textColor, fontSize: msgFontSize, fontWeight: msgFontWeight, fontFamily: msgFontFamily, textAlign: d.textAlign }, children: tokens.map((t, i) => t.type === "link"
+                            ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "link", style: { color: linkColor, textDecorationLine: "underline" }, onPress: () => (0, openLink_1.openLink)(t.href), children: t.value }, i)
+                            : (0, jsx_runtime_1.jsx)(react_native_1.Text, { children: t.value }, i)) })) : null, attachments.map((a, i) => {
+                        var _a, _b;
+                        // Route every file (received AND sent) by its detected media kind, web
+                        // FileDisplay parity: image -> ImageBubble, video -> VideoBubble, audio
+                        // -> inline VoiceMessage (unchanged), document/other -> FileTile.
+                        const kind = attachmentKind(a.uri, a.file);
+                        // Received voice (audit #23): an audio attachment renders as an inline
+                        // <VoiceMessage> when an audioAdapter is injected; otherwise we fall back
+                        // to a plain FileTile (download link) so chat-only consumers still work.
+                        if (kind === "audio" && audioAdapter) {
+                            return ((0, jsx_runtime_1.jsx)(VoiceMessage_1.VoiceMessage, { testID: testID ? `${testID}-voice-${i}` : undefined, adapter: audioAdapter, uri: a.uri, durationMs: (_b = (_a = a.file) === null || _a === void 0 ? void 0 : _a.durationMs) !== null && _b !== void 0 ? _b : 0, theme: theme }, `att-${i}`));
+                        }
+                        if (kind === "image") {
+                            return ((0, jsx_runtime_1.jsx)(ImageBubble_1.ImageBubble, { testID: testID ? `${testID}-image-${i}` : undefined, uri: a.uri, name: a.name, theme: theme }, `att-${i}`));
+                        }
+                        if (kind === "video") {
+                            return ((0, jsx_runtime_1.jsx)(VideoBubble_1.VideoBubble, { testID: testID ? `${testID}-video-${i}` : undefined, uri: a.uri, name: a.name, theme: theme }, `att-${i}`));
+                        }
+                        // audio without an adapter, document, or anything unrecognized -> FileTile.
+                        return ((0, jsx_runtime_1.jsx)(FileTile_1.FileTile, { testID: testID ? `${testID}-file-${i}` : undefined, uri: a.uri, name: a.name, theme: theme }, `att-${i}`));
+                    }), timeLabel ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { testID: testID ? `${testID}-time` : undefined, style: { color: dateColor, fontSize: dateFontSize, fontWeight: dateFontWeight, fontFamily: dateFontFamily, marginTop: 2, alignSelf: "flex-end" }, children: timeLabel })) : null] }), showReactions ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    flexDirection: d.rowDirection,
+                    gap: 12,
+                    marginTop: 6,
+                    marginHorizontal: marginX,
+                    alignSelf,
+                }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: testID ? `${testID}-reaction-like` : "reaction-like", accessibilityRole: "button", accessibilityLabel: "like", accessibilityState: { selected: likeActive }, onPress: () => react === null || react === void 0 ? void 0 : react(message.messageKey, "like"), style: { opacity: likeActive ? 1 : DIMMED }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumbUp", color: likeColor, size: 18 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: testID ? `${testID}-reaction-dislike` : "reaction-dislike", accessibilityRole: "button", accessibilityLabel: "dislike", accessibilityState: { selected: dislikeActive }, onPress: () => react === null || react === void 0 ? void 0 : react(message.messageKey, "dislike"), style: { opacity: dislikeActive ? 1 : DIMMED }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "thumbDown", color: dangerColor, size: 18 }) })] })) : null, isBot && quickReplies.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    flexDirection: d.rowDirection,
+                    flexWrap: "wrap",
+                    gap: 8,
+                    marginTop: 6,
+                    marginHorizontal: marginX,
+                }, children: quickReplies.map((q) => {
+                    var _a, _b, _c, _d, _e;
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: testID ? `${testID}-qr-${q.payload}` : undefined, accessibilityRole: "button", accessibilityLabel: q.title, onPress: () => onQuickReply === null || onQuickReply === void 0 ? void 0 : onQuickReply(q), style: {
+                            backgroundColor: (_a = quickReplyStyle.bg) !== null && _a !== void 0 ? _a : "#FFFFFF",
+                            borderWidth: (_b = quickReplyStyle.borderWidth) !== null && _b !== void 0 ? _b : 1,
+                            borderColor: (_c = quickReplyStyle.borderColor) !== null && _c !== void 0 ? _c : theme.colors.primary,
+                            borderRadius: (_d = quickReplyStyle.borderRadius) !== null && _d !== void 0 ? _d : 15,
+                            paddingHorizontal: 12,
+                            paddingVertical: 6,
+                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: (_e = quickReplyStyle.color) !== null && _e !== void 0 ? _e : theme.colors.primary, fontSize: quickReplyFontSize, fontWeight: quickReplyFontWeight, fontFamily: quickReplyFontFamily }, children: q.title }) }, q.payload));
+                }) })) : null] }));
+    // No avatar: return the column directly (back-compat — existing layout unchanged).
+    if (!avatarNode)
+        return column;
+    // With an avatar: avatar + column in a row on the leading edge (RTL flips via row).
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: d.rowDirection, alignSelf, maxWidth: "90%" }, children: [avatarNode, column] }));
+}

package/lib/ui/CallControls.d.ts

@@ -0,0 +1,27 @@
+import type { Dir } from "../theme/dir";
+export interface CallControlsProps {
+    /** toggle the local microphone track (mirror of web handleMuteUnmute) */
+    onToggleMute: () => void;
+    /** toggle the local camera track (mirror of web handleStartStopVideo) */
+    onToggleCamera: () => void;
+    /** flip the local camera front<->back (RN-only; reaches client.switchCamera) */
+    onFlipCamera?: () => void;
+    /** toggle the audio output route (speakerphone <-> earpiece, audit #25) */
+    onToggleSpeaker?: () => void;
+    /** leave the call — host tears down the PC + releases the camera */
+    onLeave: () => void;
+    /** reflects the current mic state so the label/icon track the live track */
+    isMuted?: boolean;
+    /** reflects the current camera state (true == camera off) */
+    isCameraOff?: boolean;
+    /** reflects the current speaker route (true == speakerphone, B14 default) */
+    isSpeaker?: boolean;
+    /** disable the whole bar (e.g. while connecting / after teardown) */
+    disabled?: boolean;
+    /** layout direction; controls mirror under "rtl" */
+    dir?: Dir;
+    /** resolved language — localizes the control labels (audit #8). */
+    language?: string;
+    theme: any;
+}
+export declare function CallControls({ onToggleMute, onToggleCamera, onFlipCamera, onToggleSpeaker, onLeave, isMuted, isCameraOff, isSpeaker, disabled, dir, language, theme, }: CallControlsProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/CallControls.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallControls = CallControls;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+const i18n_1 = require("../i18n");
+const Icon_1 = require("./Icon");
+// --- Call-dock visual constants ---------------------------------------------
+const SIZE = 56; // circular toggle touch target (mic / camera / flip / speaker)
+const END_SIZE = 64; // larger, prominent hang-up
+const ICON = 26;
+const END_ICON = 28;
+const IDLE_FILL = "rgba(255,255,255,0.16)"; // translucent "glass" on the dark dock
+const ENGAGED_FILL = "#FFFFFF"; // engaged toggle -> solid light chip (iOS idiom)
+const IDLE_ICON = "#FFFFFF";
+const ENGAGED_ICON = "#1A1A1A"; // dark glyph on the light chip
+function CallControls({ onToggleMute, onToggleCamera, onFlipCamera, onToggleSpeaker, onLeave, isMuted = false, isCameraOff = false, isSpeaker = true, disabled = false, dir = "ltr", language, theme, }) {
+    var _a, _b, _c, _d;
+    const d = (0, dir_1.dirStyles)(dir);
+    const t = (0, i18n_1.makeT)(language);
+    // End-call reads as destructive: theme danger/error if the brand defines one,
+    // else the iOS system red. Used for the fill + a soft glow so it pops off the dock.
+    const endFill = (_d = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.danger) !== null && _b !== void 0 ? _b : (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.error) !== null && _d !== void 0 ? _d : "#FF3B30";
+    // Round toggle button: a solid light chip when ENGAGED, translucent otherwise;
+    // gentle press feedback (dim + scale). `disabled` dims the whole control.
+    const toggleStyle = (engaged) => ({ pressed }) => ({
+        width: SIZE,
+        height: SIZE,
+        borderRadius: SIZE / 2,
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: engaged ? ENGAGED_FILL : IDLE_FILL,
+        opacity: disabled ? 0.4 : pressed ? 0.7 : 1,
+        transform: [{ scale: pressed ? 0.94 : 1 }],
+    });
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: "call-controls", accessibilityRole: "toolbar", style: {
+            flexDirection: d.rowDirection,
+            alignItems: "center",
+            // space-around keeps the large buttons evenly spaced and never overflows,
+            // whether the optional flip/speaker controls are present or not.
+            justifyContent: "space-around",
+            paddingTop: 18,
+            paddingBottom: 22,
+            paddingHorizontal: 10,
+            // The dock is a dark sheet rising from the bottom over the (black) video,
+            // with rounded top corners + a faint top hairline to lift it off the frame.
+            backgroundColor: "rgba(17,18,20,0.96)",
+            borderTopLeftRadius: 28,
+            borderTopRightRadius: 28,
+            borderTopWidth: 1,
+            borderTopColor: "rgba(255,255,255,0.08)",
+        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "call-mute", accessibilityRole: "button", 
+                // Label describes the ACTION the press performs, and flips with state so
+                // screen-reader users hear "Mute" vs "Unmute" depending on the live track.
+                accessibilityLabel: isMuted ? t("unmute") : t("mute"), accessibilityState: { disabled, selected: isMuted }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onToggleMute();
+                }, style: toggleStyle(isMuted), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isMuted ? "micOff" : "mic", color: isMuted ? ENGAGED_ICON : IDLE_ICON, size: ICON }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "call-camera", accessibilityRole: "button", accessibilityLabel: isCameraOff ? t("camera_on") : t("camera_off"), accessibilityState: { disabled, selected: isCameraOff }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onToggleCamera();
+                }, style: toggleStyle(isCameraOff), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isCameraOff ? "videocamOff" : "videocam", color: isCameraOff ? ENGAGED_ICON : IDLE_ICON, size: ICON }) }), onFlipCamera ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "call-flip", accessibilityRole: "button", accessibilityLabel: t("flip_camera"), accessibilityState: { disabled }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onFlipCamera();
+                }, style: toggleStyle(false), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "cameraSwitch", color: IDLE_ICON, size: ICON }) })) : null, onToggleSpeaker ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "call-speaker", accessibilityRole: "button", 
+                // Label describes the route the press switches TO, and reflects the
+                // live route so screen-reader users hear the current state.
+                accessibilityLabel: isSpeaker ? "Switch to earpiece" : "Switch to speakerphone", accessibilityState: { disabled, selected: isSpeaker }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onToggleSpeaker();
+                }, style: toggleStyle(isSpeaker), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: isSpeaker ? "speaker" : "speakerOff", color: isSpeaker ? ENGAGED_ICON : IDLE_ICON, size: ICON }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "call-leave", accessibilityRole: "button", accessibilityLabel: t("leave_call"), accessibilityState: { disabled }, disabled: disabled, onPress: () => {
+                    if (!disabled)
+                        onLeave();
+                }, 
+                // The destructive hang-up: a larger solid-red circle with a white handset
+                // and a soft red glow so it's the unmistakable primary action on the dock.
+                style: ({ pressed }) => ({
+                    width: END_SIZE,
+                    height: END_SIZE,
+                    borderRadius: END_SIZE / 2,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: endFill,
+                    opacity: disabled ? 0.4 : pressed ? 0.85 : 1,
+                    transform: [{ scale: pressed ? 0.94 : 1 }],
+                    shadowColor: endFill,
+                    shadowOpacity: 0.5,
+                    shadowRadius: 10,
+                    shadowOffset: { width: 0, height: 4 },
+                    elevation: 6,
+                }), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "callEnd", color: "#fff", size: END_ICON }) })] }));
+}

package/lib/ui/CallPlaceholder.d.ts

@@ -0,0 +1,16 @@
+import { type ViewStyle } from "react-native";
+export interface CallPlaceholderProps {
+    variant: "waiting" | "cameraOff";
+    /** agent display name (waiting variant) */
+    name?: string;
+    /** agent avatar URL (waiting variant); falls back to initials when absent */
+    avatarUrl?: string;
+    theme: any;
+    /** resolved language — localizes the status copy */
+    language?: string;
+    /** layout/position style merged onto the container */
+    style?: ViewStyle;
+    testID?: string;
+}
+export declare function CallPlaceholder({ variant, name, avatarUrl, theme, language, style, testID, }: CallPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+export default CallPlaceholder;