@experiaapp/webchat-react-native 2.0.1

package/lib/ui/CallPlaceholder.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CallPlaceholder = CallPlaceholder;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const Icon_1 = require("./Icon");
+const i18n_1 = require("../i18n");
+/** First letter of the name for the avatar fallback (latin + arabic safe). */
+function initialOf(name) {
+    const n = (name !== null && name !== void 0 ? name : "").trim();
+    return n ? n[0].toUpperCase() : "";
+}
+function CallPlaceholder({ variant, name, avatarUrl, theme, language, style, testID, }) {
+    var _a, _b;
+    const t = (0, i18n_1.makeT)(language);
+    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 : "#2D6CDF";
+    if (variant === "cameraOff") {
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID !== null && testID !== void 0 ? testID : "call-placeholder-camera-off", accessible: true, accessibilityLabel: t("camera_off_status"), style: [
+                {
+                    backgroundColor: "#1C1C1E",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    overflow: "hidden",
+                },
+                style,
+            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                        width: 46,
+                        height: 46,
+                        borderRadius: 23,
+                        backgroundColor: "rgba(255,255,255,0.12)",
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "videocamOff", color: "#FFFFFF", size: 22 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "rgba(255,255,255,0.7)", fontSize: 11, marginTop: 8 }, children: t("you") })] }));
+    }
+    // variant === "waiting"
+    const displayName = (name === null || name === void 0 ? void 0 : name.trim()) || t("agent");
+    const initial = initialOf(name);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { testID: testID !== null && testID !== void 0 ? testID : "call-placeholder-waiting", accessible: true, accessibilityLabel: `${displayName} — ${t("connecting")}`, style: [
+            {
+                backgroundColor: "#0B0C0F", // off-black: a touch of depth vs the pure-black video
+                alignItems: "center",
+                justifyContent: "center",
+            },
+            style,
+        ], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: 132,
+                    height: 132,
+                }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: "absolute",
+                            width: 132,
+                            height: 132,
+                            borderRadius: 66,
+                            borderWidth: 1,
+                            borderColor: "rgba(255,255,255,0.06)",
+                        } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            position: "absolute",
+                            width: 112,
+                            height: 112,
+                            borderRadius: 56,
+                            borderWidth: 1,
+                            borderColor: "rgba(255,255,255,0.10)",
+                        } }), avatarUrl ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { testID: "call-placeholder-avatar", accessibilityRole: "image", source: { uri: avatarUrl }, resizeMode: "cover", style: { width: 92, height: 92, borderRadius: 46 } })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "call-placeholder-avatar", style: {
+                            width: 92,
+                            height: 92,
+                            borderRadius: 46,
+                            backgroundColor: primary,
+                            alignItems: "center",
+                            justifyContent: "center",
+                        }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#FFFFFF", fontSize: 38, fontWeight: "600" }, children: initial }) }))] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#FFFFFF", fontSize: 20, fontWeight: "600", marginTop: 20 }, children: displayName }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "rgba(255,255,255,0.6)", fontSize: 14, marginTop: 6 }, children: t("connecting") })] }));
+}
+exports.default = CallPlaceholder;

package/lib/ui/Composer.d.ts

@@ -0,0 +1,5 @@
+export declare function Composer({ onSend, onAttachPress, // legacy single-shot trigger (back-compat; used only when no onPick* props)
+onPickImages, // open OS image library → attach()
+onPickVideos, // open OS video library → attach()
+onPickDocuments, // open OS document picker → attach()
+onAttach, dir, theme, disabledInput, audioAdapter, language, emojiEnabled, placeholder, }: any): import("react/jsx-runtime").JSX.Element;

package/lib/ui/Composer.js

@@ -0,0 +1,272 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Composer = Composer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// src/ui/Composer.tsx
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const dir_1 = require("../theme/dir");
+const AttachButton_1 = require("./AttachButton");
+const AudioRecorder_1 = require("./AudioRecorder");
+// Bundled i18n: a tiny, language-keyed lookup (makeT) that reads the plain JSON
+// strings without pulling in any native peer (react-native-localize). It is the
+// shared helper used across every prop-driven UI component, so it stays
+// test-safe and works before initI18n has run (audit #8).
+const i18n_1 = require("../i18n");
+const Icon_1 = require("./Icon");
+const MediaUploadMenu_1 = require("./MediaUploadMenu");
+const themeFactory_1 = require("../theme/themeFactory");
+// A small built-in set of common emojis — no extra npm dependency required.
+const EMOJIS = ["😀", "😂", "👍", "🙏", "❤️", "🎉", "😢", "🔥"];
+// Web parity (DigitalGovernmentFooter): the composer reads the server-driven
+// `send` token group (web `sendSectionStyle`). The unit tests pass a minimal
+// theme with only { colors, font }, so every token is read defensively with the
+// same defaults buildTheme() would produce.
+function sendTokens(theme) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const s = (_a = theme === null || theme === void 0 ? void 0 : theme.send) !== null && _a !== void 0 ? _a : {};
+    const primary = (_c = (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) !== null && _c !== void 0 ? _c : "#1B8354";
+    // back-compat folded icon color — used as the per-icon fallback so a minimal
+    // theme ({colors, font} only, as the unit tests pass) keeps a single tint.
+    const iconColor = (_d = s.iconColor) !== null && _d !== void 0 ? _d : primary;
+    return {
+        fieldBg: (_e = s.fieldBg) !== null && _e !== void 0 ? _e : "#F3F4F6",
+        fieldColor: (_h = (_f = s.fieldColor) !== null && _f !== void 0 ? _f : (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.text) !== null && _h !== void 0 ? _h : "#2d2d2d",
+        fieldRadius: (_j = s.fieldRadius) !== null && _j !== void 0 ? _j : 4,
+        hintColor: (_k = s.hintColor) !== null && _k !== void 0 ? _k : "#6C737F",
+        // hint typography (web hintFontSize / hintFontWeight). RN's TextInput has no
+        // separate placeholder font, so the field text itself carries these — the
+        // placeholder inherits the field's fontSize/fontWeight. undefined => inherit
+        // the global font size / weight (set below on the input style).
+        hintFontSize: s.hintFontSize,
+        hintFontWeight: s.hintFontWeight,
+        sendBtnBg: (_l = s.sendBtnBg) !== null && _l !== void 0 ? _l : primary,
+        sendBtnColor: (_m = s.sendBtnColor) !== null && _m !== void 0 ? _m : "#FFFFFF",
+        sendBtnRadius: (_o = s.sendBtnRadius) !== null && _o !== void 0 ? _o : 4,
+        iconColor,
+        // independent icon tints (web uploadFileBtnColor / emojiBtnColor / audioBtnColor).
+        // Each falls back to the folded iconColor so legacy single-color themes are unchanged.
+        uploadIconColor: (_p = s.uploadIconColor) !== null && _p !== void 0 ? _p : iconColor,
+        emojiIconColor: (_q = s.emojiIconColor) !== null && _q !== void 0 ? _q : iconColor,
+        audioIconColor: (_r = s.audioIconColor) !== null && _r !== void 0 ? _r : iconColor,
+        // attach-button background + radius (web uploadFileBtnBg / uploadFileBtnCornerRadius).
+        uploadBtnBg: s.uploadBtnBg,
+        uploadBtnRadius: s.uploadBtnRadius,
+    };
+}
+// `onAttachPress` (when provided) wires the 📎 AttachButton: pressing it runs the
+// host's picker→attach() flow (see WebChat Surface). Omitted in pure-text contexts.
+//
+// `disabledInput` (audit #disabledInput) hard-disables the input + send (and the
+// emoji/attach/record affordances) — e.g. while a call holds the mic, or the host
+// suspends sending.
+//
+// `audioAdapter` (audit #12 voice) threads an injected capture surface: when present
+// the composer renders <AudioRecorder> and routes the completed RecordingResult through
+// the provider's attach() (handed down as `onAttach` — useWebchat().attach in the live
+// Surface) as a single media entry (web parity — voice rides the same base64-in-socket
+// media[] path as picked files). `onAttach`/`language` are props, not a context read, so
+// a provider-less Composer (the pure-text unit tests) renders without throwing.
+function Composer({ onSend, onAttachPress, // legacy single-shot trigger (back-compat; used only when no onPick* props)
+onPickImages, // open OS image library → attach()
+onPickVideos, // open OS video library → attach()
+onPickDocuments, // open OS document picker → attach()
+onAttach, dir, theme, disabledInput = false, audioAdapter, language, 
+// web `config.emoji` — gates the emoji affordance. Default true so legacy
+// callers (and the existing unit tests) keep the emoji button; the live
+// Surface passes the resolved flag (web default false) through.
+emojiEnabled = true, 
+// web `config.inputTextFieldHint` — composer placeholder override; falls back
+// to the localized t("type_message") when absent.
+placeholder, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const [value, setValue] = (0, react_1.useState)("");
+    const [pickerOpen, setPickerOpen] = (0, react_1.useState)(false);
+    const [mediaMenuOpen, setMediaMenuOpen] = (0, react_1.useState)(false);
+    const [recordingArmed, setRecordingArmed] = (0, react_1.useState)(false);
+    // Web parity (handleSetFileValue/MultiFileDisplay): picked/recorded media is
+    // STAGED here and previewed; it sends only on the Send tap, not on pick.
+    const [pending, setPending] = (0, react_1.useState)([]);
+    const d = (0, dir_1.dirStyles)(dir);
+    const t = (0, i18n_1.makeT)(language);
+    const s = sendTokens(theme);
+    // Placeholder: the tenant override (config.inputTextFieldHint) wins; otherwise
+    // the localized default. Treat an empty string as "unset" so it never blanks.
+    const placeholderText = placeholder && String(placeholder).length > 0 ? placeholder : t("type_message");
+    // Field/placeholder typography (web defaultFontWeight + hintFont*). The input
+    // text size/weight default to the global font; the placeholder inherits them
+    // (RN has no separate placeholder font), with the hint* tokens overriding.
+    const baseFontSize = (_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;
+    const baseFontWeight = (_c = theme === null || theme === void 0 ? void 0 : theme.font) === null || _c === void 0 ? void 0 : _c.weight;
+    const fieldFontSize = (_d = s.hintFontSize) !== null && _d !== void 0 ? _d : baseFontSize;
+    const fieldFontWeight = (_e = s.hintFontWeight) !== null && _e !== void 0 ? _e : baseFontWeight;
+    // Tenant custom font (item 28): the field text (and, since RN has no separate
+    // placeholder font, the placeholder) use the loaded family for the field weight.
+    // `undefined` => omit fontFamily (system font, today's look).
+    const fieldFontFamily = (0, themeFactory_1.resolveFontFamily)((_f = theme === null || theme === void 0 ? void 0 : theme.font) === null || _f === void 0 ? void 0 : _f.familyMap, fieldFontWeight);
+    const submit = () => {
+        if (disabledInput)
+            return;
+        const v = value.trim();
+        // Web parity (handleSend): if media is staged, send it WITH the optional caption
+        // as ONE message (onAttach(assets, text)) then clear both; otherwise text-only.
+        if (pending.length > 0) {
+            void (onAttach === null || onAttach === void 0 ? void 0 : onAttach(pending, v));
+            setPending([]);
+            setValue("");
+            return;
+        }
+        if (v) {
+            onSend(v);
+            setValue("");
+        }
+    };
+    // Web parity (handleSetFileValue): a pick STAGES its returned assets into the
+    // preview; nothing is sent until Send. `pick` returns the picked Asset[].
+    // Only ONE OS picker can be open at a time. A double-tap (or a row that fires
+    // onPress twice) would launch a second pick while the first is in flight —
+    // expo-document-picker throws "Different document picking in progress" on that.
+    // Serialize behind a ref: a re-entrant tap is a no-op until the first settles.
+    // NO re-entry guard: expo-document-picker already serializes (a concurrent call
+    // THROWS "Different document picking in progress", which we catch). A JS guard that
+    // waited for the promise to settle would PERMANENTLY lock the picker whenever a
+    // getDocumentAsync call hangs — so retries must always be allowed.
+    const stagePick = async (pick) => {
+        if (!pick)
+            return;
+        try {
+            const assets = await pick();
+            if (Array.isArray(assets) && assets.length > 0) {
+                setPending((prev) => [...prev, ...assets]);
+            }
+        }
+        catch {
+            /* user cancelled or the pick failed — nothing to stage */
+        }
+    };
+    // Document picker ONLY: present it AFTER the attach-menu <Modal> has dismissed.
+    // Presenting iOS UIDocumentPickerViewController while the RN Modal is tearing down
+    // makes iOS drop the presentation — the Files sheet never appears and the promise
+    // never resolves (the "hang"). Image/video pickers (PHPicker) tolerate this race,
+    // so only the document path defers. The beat outlasts the menu's dismissal so the
+    // picker presents from a settled view controller.
+    const requestPick = (pick) => {
+        setMediaMenuOpen(false);
+        setTimeout(() => void stagePick(pick), 300);
+    };
+    // Append the selected emoji to the current input value.
+    const onEmoji = (e) => setValue((v) => v + e);
+    // Selector rows: each capability is gated on its injected trigger / adapter.
+    // Picking image/document fires the host trigger (picker → attach); "record
+    // audio" arms the inline recorder (it mounts already-recording, see below).
+    const mediaOptions = [];
+    if (onPickImages) {
+        mediaOptions.push({
+            key: "image",
+            icon: "image",
+            label: t("upload_image"),
+            testID: "media-option-image",
+            onPress: () => void stagePick(onPickImages),
+        });
+    }
+    if (onPickVideos) {
+        mediaOptions.push({
+            key: "video",
+            icon: "videocam",
+            label: t("upload_video"),
+            testID: "media-option-video",
+            onPress: () => void stagePick(onPickVideos),
+        });
+    }
+    if (onPickDocuments) {
+        mediaOptions.push({
+            key: "document",
+            icon: "document",
+            label: t("upload_document"),
+            testID: "media-option-document",
+            onPress: () => requestPick(onPickDocuments),
+        });
+    }
+    // §6.2 refinement (back-compat): the menu exists only when a PICKER row exists;
+    // audio alone keeps the always-on inline recorder so existing tests stay green.
+    const hasMediaMenu = !!onPickImages || !!onPickVideos || !!onPickDocuments;
+    if (hasMediaMenu && audioAdapter) {
+        mediaOptions.push({
+            key: "audio",
+            icon: "mic",
+            label: t("record_audio"),
+            testID: "media-option-audio",
+            onPress: () => setRecordingArmed(true),
+        });
+    }
+    // Attach affordance: when the multi-option selector is wired the button opens
+    // the menu; otherwise fall back to the legacy single trigger.
+    const onAttachButton = () => {
+        if (disabledInput)
+            return;
+        if (hasMediaMenu)
+            setMediaMenuOpen(true);
+        else if (onAttachPress)
+            void onAttachPress();
+    };
+    const showAttach = hasMediaMenu || !!audioAdapter || !!onAttachPress;
+    // Voice note → route through attach() as a single media entry (web parity, #12).
+    const onRecorded = (result) => {
+        var _a;
+        setRecordingArmed(false);
+        // Web parity: a finished recording STAGES like a picked file and sends on the
+        // Send tap (with any caption) via the staged-attach path in submit().
+        const ext = ((_a = result.mimeType) !== null && _a !== void 0 ? _a : "").includes("ogg") ? "ogg" : "m4a";
+        const asset = {
+            uri: result.uri,
+            name: `voice-${Date.now()}.${ext}`,
+            mimeType: result.mimeType,
+            size: 0,
+        };
+        setPending((prev) => [...prev, asset]);
+    };
+    // Show the inline recorder when a menu is present ONLY after the user picks
+    // "record audio" (parity: audio is a selector option). With no menu (legacy
+    // audio-only Composer) keep the always-on recorder so existing flows/tests pass.
+    const showRecorder = !!audioAdapter && (!hasMediaMenu || recordingArmed);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.KeyboardAvoidingView, { behavior: react_native_1.Platform.OS === "ios" ? "padding" : undefined, children: [(0, jsx_runtime_1.jsx)(MediaUploadMenu_1.MediaUploadMenu, { visible: mediaMenuOpen && !disabledInput, onClose: () => setMediaMenuOpen(false), options: mediaOptions, dir: dir, theme: theme, language: language }), emojiEnabled && pickerOpen && !disabledInput ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "emoji-picker", accessibilityRole: "menu", style: { flexDirection: d.rowDirection, flexWrap: "wrap", padding: 8 }, children: EMOJIS.map((e) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `emoji-${e}`, accessibilityRole: "button", accessibilityLabel: e, onPress: () => onEmoji(e), style: { padding: 6 }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: theme.font.size + 6 }, children: e }) }, e))) })) : null, pending.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { testID: "composer-pending", style: { flexDirection: d.rowDirection, flexWrap: "wrap", gap: 6, paddingHorizontal: 12, paddingTop: 8 }, children: pending.map((a, i) => {
+                    var _a;
+                    const isImage = ((_a = a.mimeType) !== null && _a !== void 0 ? _a : "").startsWith("image");
+                    const previewUri = a.base64 ? `data:${a.mimeType};base64,${a.base64}` : a.uri;
+                    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flexDirection: "row", alignItems: "center", gap: 4, backgroundColor: s.fieldBg, borderRadius: 6, padding: 4, paddingRight: 6 }, children: [isImage && previewUri ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: previewUri }, style: { width: 28, height: 28, borderRadius: 4 } })) : ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { fontSize: 16 }, children: "\uD83D\uDCCE" })), (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: { maxWidth: 120, color: s.fieldColor, fontSize: 12 }, children: a.name }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: `composer-pending-remove-${i}`, accessibilityRole: "button", accessibilityLabel: `Remove ${a.name}`, onPress: () => setPending((p) => p.filter((_, j) => j !== i)), style: { padding: 2 }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "close", color: s.uploadIconColor, size: 14 }) })] }, `${a.name}-${i}`));
+                }) })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                    flexDirection: d.rowDirection,
+                    paddingVertical: 16,
+                    paddingHorizontal: 12,
+                    backgroundColor: (_h = (_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.surface) !== null && _h !== void 0 ? _h : "#FCFCFD",
+                    alignItems: "center",
+                    gap: 4,
+                }, children: [showAttach ? ((0, jsx_runtime_1.jsx)(AttachButton_1.AttachButton, { onPick: onAttachButton, theme: theme, disabled: disabledInput, backgroundColor: s.uploadBtnBg, borderRadius: s.uploadBtnRadius, iconColor: s.uploadIconColor })) : null, showRecorder ? ((0, jsx_runtime_1.jsx)(AudioRecorder_1.AudioRecorder, { adapter: audioAdapter, onRecorded: onRecorded, onError: () => setRecordingArmed(false), disabled: disabledInput, autoStart: hasMediaMenu, theme: theme, iconColor: s.audioIconColor })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            flex: 1,
+                            flexDirection: d.rowDirection,
+                            alignItems: "center",
+                            backgroundColor: s.fieldBg,
+                            borderRadius: s.fieldRadius,
+                            paddingHorizontal: 4,
+                            opacity: disabledInput ? 0.4 : 1,
+                        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.TextInput, { testID: "composer-input", value: value, onChangeText: setValue, editable: !disabledInput, placeholder: placeholderText, placeholderTextColor: s.hintColor, accessibilityLabel: placeholderText, accessibilityState: { disabled: disabledInput }, style: {
+                                    flex: 1,
+                                    color: s.fieldColor,
+                                    // field/placeholder typography: defaultFontWeight + hintFont* (web parity).
+                                    fontSize: fieldFontSize,
+                                    fontWeight: fieldFontWeight,
+                                    fontFamily: fieldFontFamily,
+                                    textAlign: d.textAlign,
+                                    paddingVertical: 6,
+                                    paddingHorizontal: 8,
+                                } }), emojiEnabled ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "composer-emoji", accessibilityRole: "button", accessibilityLabel: "Emoji", accessibilityState: { disabled: disabledInput }, disabled: disabledInput, onPress: () => setPickerOpen((o) => !o), style: { padding: 4, opacity: disabledInput ? 0.4 : 1 }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "emoji", color: s.emojiIconColor, size: ((_k = (_j = theme === null || theme === void 0 ? void 0 : theme.font) === null || _j === void 0 ? void 0 : _j.size) !== null && _k !== void 0 ? _k : 14) + 6 }) })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { testID: "composer-send", accessibilityRole: "button", accessibilityLabel: t("send"), accessibilityState: { disabled: disabledInput }, disabled: disabledInput, onPress: submit, style: {
+                            backgroundColor: s.sendBtnBg,
+                            borderRadius: s.sendBtnRadius,
+                            minWidth: 32,
+                            height: 32,
+                            paddingHorizontal: 8,
+                            alignItems: "center",
+                            justifyContent: "center",
+                            opacity: disabledInput ? 0.4 : 1,
+                        }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "send", color: s.sendBtnColor, size: ((_m = (_l = theme === null || theme === void 0 ? void 0 : theme.font) === null || _l === void 0 ? void 0 : _l.size) !== null && _m !== void 0 ? _m : 14) + 4 }) })] })] }));
+}

package/lib/ui/FileTile.d.ts

@@ -0,0 +1,9 @@
+export interface FileTileProps {
+    /** hosted URL (or data-URL) for the attachment */
+    uri: string;
+    /** display name; falls back to the last URL path segment */
+    name?: string;
+    theme: any;
+    testID?: string;
+}
+export declare function FileTile({ uri, name, theme, testID }: FileTileProps): import("react/jsx-runtime").JSX.Element;

package/lib/ui/FileTile.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FileTile = FileTile;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const openLink_1 = require("./openLink");
+function fileName(uri, name) {
+    if (name)
+        return name;
+    const tail = (uri || "").split(/[?#]/)[0].split("/").pop();
+    return tail || "file";
+}
+function FileTile({ uri, name, theme, testID }) {
+    var _a, _b, _c, _d;
+    const label = fileName(uri, name);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { testID: testID, accessibilityRole: "button", accessibilityLabel: `Open ${label}`, onPress: () => (0, openLink_1.openLink)(uri), style: {
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 8,
+            padding: 8,
+            borderRadius: 6,
+            backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.surface,
+        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { accessibilityElementsHidden: true, importantForAccessibility: "no-hide-descendants", style: {
+                    width: 32,
+                    height: 32,
+                    borderRadius: 6,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: (_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary,
+                }, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: "#fff", fontSize: 16 }, children: "📎" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { numberOfLines: 1, style: { color: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.text, fontSize: (_d = theme === null || theme === void 0 ? void 0 : theme.font) === null || _d === void 0 ? void 0 : _d.size, flexShrink: 1 }, children: label })] }));
+}

package/lib/ui/Header.d.ts

@@ -0,0 +1,52 @@
+import { type Dir } from "../theme/dir";
+/** A configurable image reference (web parity — `{ url, name }`). */
+interface ConfigImage {
+    url?: string;
+    name?: string;
+}
+interface HeaderProps {
+    variant?: string;
+    dir?: Dir;
+    theme: any;
+    title?: string;
+    /** optional subtitle under the title (web `config.subTitle`). */
+    subtitle?: string;
+    /** resolved language — localizes the back affordance label (audit #8). */
+    language?: string;
+    /** Close the chat surface. Renders a ✕ button unless showClose is false. */
+    onClose?: () => void;
+    /** Gate the close button (config.showCloseButton !== false). Default shown. */
+    showClose?: boolean;
+    /**
+     * Start a video call. When provided, the header renders an in-header
+     * video-call button on the trailing edge (web parity) — the floating
+     * surface button is gone. Omitted -> no call button (video disabled).
+     */
+    onStartCall?: () => void;
+    /** Connection status — drives the online/offline status indicator. */
+    connected?: boolean;
+    /** Show the online/offline status indicator (web `config.statusIndicator`). */
+    statusIndicator?: boolean;
+    /**
+     * Connecting-banner text (web `config.connectingText`). When provided AND the
+     * surface is not yet connected, a banner renders under the title styled from
+     * the theme.header.connecting* tokens (web parity). Omitted -> no banner.
+     */
+    connectingText?: string;
+    /**
+     * Agent avatar image (web `config.avatar`). When `showAvatar` is true AND a url
+     * is present, the header renders this as an avatar <Image> (sized via the
+     * theme.header.avatar* tokens) with the online/offline status dot — replacing
+     * the DG logo placeholder. Absent url => fall back to the built-in logo/monogram.
+     */
+    avatar?: ConfigImage;
+    /** Gate the agent avatar (web `config.showAvatar`; default true). */
+    showAvatar?: boolean;
+    /**
+     * Custom header close-button image (web `config.closeImage`). When a url is
+     * present it replaces the built-in close ✕ Icon; otherwise the Icon is used.
+     */
+    closeImage?: ConfigImage;
+}
+export declare function Header({ variant, dir, theme, title, subtitle, language, onClose, showClose, onStartCall, connected, statusIndicator, connectingText, avatar, showAvatar, closeImage, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};