opendesk-react-native 0.1.3 → 0.1.7

package/README.md

@@ -47,6 +47,23 @@ Both adapters store the token as *after first unlock, this device only*. It's re
 
 Leave `storage` out and the token lives in memory only, so every launch starts a new visitor. Any `{ getItem, setItem, removeItem }` object also works. AsyncStorage fits that shape, but it writes plain text, so don't use it for this.
 
+## Reply sound
+
+The SDK can play the web widget's reply chime when an agent or AI replies in a conversation the visitor doesn't have open. It follows the widget's **Sound** setting in openDesk, the same as on the web. Install `expo-audio` and pass it in:
+
+```tsx
+// npx expo install expo-audio
+import * as ExpoAudio from 'expo-audio';
+import { expoAudioSound } from 'opendesk-react-native';
+
+export const support = new OpenDesk({
+  // …
+  sound: expoAudioSound(ExpoAudio), // or expoAudioSound(ExpoAudio, { volume: 0.5 })
+});
+```
+
+The chime ships with the package (`assets/chime.wav`). The SDK leaves your app's audio mode alone; under expo-audio's default the chime mixes with other audio rather than pausing it. To play something else, pass any function as `sound`. Leave `sound` out for no sound.
+
 ## Identify the signed-in user
 
 To attach chats to a known contact, pass `{ user_id, user_hash, email, name }` as `identity`. `user_hash` is `hex(HMAC-SHA256(widget_secret, user_id))`, as described in [Identity verification](https://docs.opendesk.sh/guides/live-chat/identity-verification/). Compute it on your server, never in the app, and serve it from an authenticated endpoint of your own:
@@ -76,7 +93,6 @@ import { OpenDeskChat, OpenDeskLauncher } from 'opendesk-react-native';
 
 <OpenDeskChat
   onClose={() => navigation.goBack()}
-  keyboardVerticalOffset={headerHeight}
   pickAttachment={async () => {
     const result = await DocumentPicker.getDocumentAsync({ type: ['image/*', 'application/pdf'] });
     const file = result.assets?.[0];
@@ -93,6 +109,14 @@ import { OpenDeskChat, OpenDeskLauncher } from 'opendesk-react-native';
 - `accentColor`
 - `strings`: replaces any of the built-in English copy (`defaultStrings` lists every key)
 - `initialConversationId`
+- `keyboardVerticalOffset`: extra space between the composer and the keyboard (see below)
+
+The chat keeps its composer above the keyboard by measuring where it sits on screen, so it needs no offset under a navigation header. Two cases it can't measure past:
+
+- **React Native's `<Modal>` on Android** is a separate window that gets no keyboard events, so the composer stays under the keyboard. Show the chat as a screen, or as a full-screen view over your app, instead.
+- **An iOS page sheet** (`presentationStyle="pageSheet"`, or a sheet-style navigation modal) starts below the top of the screen. Pass the sheet's distance from the top as `keyboardVerticalOffset`, or present it full screen.
+
+Tapping an attached image opens it inside the chat. On Android, the back button closes it.
 
 For an in-app banner while the chat is closed, use `support.onMessage(({ conversationId, from, message }) => …)`.
 

package/lib/api.js

@@ -63,13 +63,14 @@ class OpenDeskApi {
         const form = new FormData();
         if (isBlob(file)) {
             form.append('file', file, 'name' in file && typeof file.name === 'string' ? file.name : 'upload');
+            return this.request('POST', '/v1/widget/attachments', form);
         }
-        else {
-            form.append('file', { uri: file.uri, name: file.name, type: file.type || 'application/octet-stream' });
-        }
-        return this.request('POST', '/v1/widget/attachments', form);
+        form.append('file', { uri: file.uri, name: file.name, type: file.type || 'application/octet-stream' });
+        // Expo replaces `fetch` with expo/fetch, which can't send `{ uri }` parts; React Native's
+        // XMLHttpRequest reads the file from disk itself.
+        return this.request('POST', '/v1/widget/attachments', form, true, typeof XMLHttpRequest === 'undefined' ? this.fetcher : xhrFetch);
     }
-    async request(method, path, body, authenticated = true) {
+    async request(method, path, body, authenticated = true, fetcher = this.fetcher) {
         const headers = { Accept: 'application/json' };
         let payload;
         if (body instanceof FormData) {
@@ -84,10 +85,10 @@ class OpenDeskApi {
         }
         let response;
         try {
-            response = await this.fetcher(this.baseUrl + path, { method, headers, body: payload });
+            response = await fetcher(this.baseUrl + path, { method, headers, body: payload });
         }
-        catch {
-            throw new errors_1.OpenDeskError(0, 'network_error', "Can't reach the server");
+        catch (cause) {
+            throw new errors_1.OpenDeskError(0, 'network_error', "Can't reach the server", cause);
         }
         if (!response.ok) {
             let code = 'error';
@@ -112,3 +113,19 @@ exports.OpenDeskApi = OpenDeskApi;
 function isBlob(file) {
     return typeof Blob !== 'undefined' && file instanceof Blob;
 }
+/** `fetch` over XMLHttpRequest, for the multipart uploads expo/fetch can't send. */
+const xhrFetch = (input, init) => new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(init?.method ?? 'GET', String(input));
+    Object.entries((init?.headers ?? {})).forEach(([name, value]) => xhr.setRequestHeader(name, value));
+    xhr.onload = () => {
+        const empty = xhr.status === 204 || xhr.status === 205 || xhr.status === 304;
+        resolve(new Response(empty ? null : xhr.responseText, {
+            status: xhr.status,
+            headers: { 'content-type': xhr.getResponseHeader('content-type') ?? '' },
+        }));
+    };
+    xhr.onerror = () => reject(new TypeError('Network request failed'));
+    xhr.ontimeout = xhr.onerror;
+    xhr.send((init?.body ?? null));
+});

package/lib/client.d.ts

@@ -9,8 +9,14 @@ export interface OpenDeskOptions {
     widgetKey: string;
     /** Persists the visitor token so conversations survive restarts. Defaults to memory. */
     storage?: TokenStorage;
+    /** Replaces `fetch`. Native `{ uri }` uploads still go over XMLHttpRequest, which can read the file. */
     fetcher?: Fetcher;
     socketFactory?: SocketFactory;
+    /**
+     * Played when an agent or AI reply arrives in a conversation that isn't open, if the widget
+     * has sound on. `expoAudioSound(ExpoAudio)` plays the web widget's chime.
+     */
+    sound?: () => void;
 }
 /** An AI answer being streamed before it lands as a message. */
 export interface AIReply {
@@ -61,6 +67,7 @@ export declare class OpenDesk {
     private readonly storage;
     private readonly storageKey;
     private readonly socketFactory;
+    private readonly sound;
     private readonly subscribers;
     private readonly messageListeners;
     private readonly typingTimers;
@@ -103,6 +110,8 @@ export declare class OpenDesk {
     private authorized;
     private catchUp;
     private onRealtimeEvent;
+    /** The widget's sound setting decides, as on the web; the app decides what plays. */
+    private playSound;
     private onLiveEvent;
     private onAgentTyping;
     private clearTyping;

package/lib/client.js

@@ -45,6 +45,7 @@ class OpenDesk {
         this.storage = options.storage ?? (0, storage_1.memoryStorage)();
         this.storageKey = `opendesk.visitor.${options.widgetKey}`;
         this.socketFactory = options.socketFactory ?? realtime_1.phoenixSocketFactory;
+        this.sound = options.sound ?? null;
     }
     /** Called for every agent or AI reply, e.g. to show an in-app banner. */
     onMessage(listener) {
@@ -290,6 +291,7 @@ class OpenDesk {
             this.set((state) => ({
                 unread: { ...state.unread, [conversationId]: (state.unread[conversationId] ?? 0) + 1 },
             }));
+            this.playSound();
         }
         const from = message.author.user?.name || message.author.bot?.name || this.state.config?.workspace_name || 'Support';
         this.messageListeners.forEach((listener) => {
@@ -301,6 +303,18 @@ class OpenDesk {
             }
         });
     }
+    /** The widget's sound setting decides, as on the web; the app decides what plays. */
+    playSound() {
+        if (!this.sound || this.state.config?.sound !== true) {
+            return;
+        }
+        try {
+            this.sound();
+        }
+        catch {
+            // A sound that fails must not break the stream.
+        }
+    }
     onLiveEvent(event) {
         const { reply_id: replyId, ticket_id: conversationId } = event.data;
         if (typeof replyId !== 'string' || typeof conversationId !== 'string') {

package/lib/errors.d.ts

@@ -1,8 +1,12 @@
-/** A failed openDesk request; `status` is 0 when the server could not be reached. */
+/**
+ * A failed openDesk request; `status` is 0 when the server could not be reached, and then
+ * `cause` holds what `fetch` threw.
+ */
 export declare class OpenDeskError extends Error {
     readonly status: number;
     readonly code: string;
-    constructor(status: number, code: string, message: string);
+    readonly cause?: unknown | undefined;
+    constructor(status: number, code: string, message: string, cause?: unknown | undefined);
     /** The visitor token is unknown or revoked; a fresh session is needed. */
     get isUnauthorized(): boolean;
 }

package/lib/errors.js

@@ -1,12 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OpenDeskError = void 0;
-/** A failed openDesk request; `status` is 0 when the server could not be reached. */
+/**
+ * A failed openDesk request; `status` is 0 when the server could not be reached, and then
+ * `cause` holds what `fetch` threw.
+ */
 class OpenDeskError extends Error {
-    constructor(status, code, message) {
+    constructor(status, code, message, cause) {
         super(message);
         this.status = status;
         this.code = code;
+        this.cause = cause;
         this.name = 'OpenDeskError';
     }
     /** The visitor token is unknown or revoked; a fresh session is needed. */

package/lib/index.d.ts

@@ -7,6 +7,8 @@ export { OpenDeskRealtime, phoenixSocketFactory } from './realtime';
 export type { RealtimeChannel, RealtimeSocket, SocketFactory } from './realtime';
 export { keychainStorage, memoryStorage, secureStoreStorage } from './storage';
 export type { ExpoSecureStoreModule, KeychainModule, TokenStorage } from './storage';
+export { expoAudioSound } from './sound';
+export type { ExpoAudioModule, ExpoAudioPlayer } from './sound';
 export { OpenDeskProvider, useConversation, useConversations, useOpenDesk, useOpenDeskState, useUnreadCount, } from './react';
 export type { ConversationView, OpenDeskProviderProps } from './react';
 export { OpenDeskChat } from './ui/OpenDeskChat';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultStrings = exports.OpenDeskLauncher = exports.OpenDeskChat = exports.useUnreadCount = exports.useOpenDeskState = exports.useOpenDesk = exports.useConversations = exports.useConversation = exports.OpenDeskProvider = exports.secureStoreStorage = exports.memoryStorage = exports.keychainStorage = exports.phoenixSocketFactory = exports.OpenDeskRealtime = exports.OpenDeskError = exports.OpenDeskApi = exports.OpenDesk = void 0;
+exports.defaultStrings = exports.OpenDeskLauncher = exports.OpenDeskChat = exports.useUnreadCount = exports.useOpenDeskState = exports.useOpenDesk = exports.useConversations = exports.useConversation = exports.OpenDeskProvider = exports.expoAudioSound = exports.secureStoreStorage = exports.memoryStorage = exports.keychainStorage = exports.phoenixSocketFactory = exports.OpenDeskRealtime = exports.OpenDeskError = exports.OpenDeskApi = exports.OpenDesk = void 0;
 var client_1 = require("./client");
 Object.defineProperty(exports, "OpenDesk", { enumerable: true, get: function () { return client_1.OpenDesk; } });
 var api_1 = require("./api");
@@ -14,6 +14,8 @@ var storage_1 = require("./storage");
 Object.defineProperty(exports, "keychainStorage", { enumerable: true, get: function () { return storage_1.keychainStorage; } });
 Object.defineProperty(exports, "memoryStorage", { enumerable: true, get: function () { return storage_1.memoryStorage; } });
 Object.defineProperty(exports, "secureStoreStorage", { enumerable: true, get: function () { return storage_1.secureStoreStorage; } });
+var sound_1 = require("./sound");
+Object.defineProperty(exports, "expoAudioSound", { enumerable: true, get: function () { return sound_1.expoAudioSound; } });
 var react_1 = require("./react");
 Object.defineProperty(exports, "OpenDeskProvider", { enumerable: true, get: function () { return react_1.OpenDeskProvider; } });
 Object.defineProperty(exports, "useConversation", { enumerable: true, get: function () { return react_1.useConversation; } });

package/lib/sound.d.ts

@@ -0,0 +1,22 @@
+/** The parts of `expo-audio` the adapter uses; pass the module itself. */
+export interface ExpoAudioModule {
+    createAudioPlayer(source: number): ExpoAudioPlayer;
+}
+export interface ExpoAudioPlayer {
+    volume: number;
+    play(): void;
+    seekTo(seconds: number): Promise<void>;
+}
+/**
+ * Plays the web widget's reply chime with `expo-audio`. Takes the module as an argument, so the
+ * SDK has no dependency on Expo:
+ *
+ *     import * as ExpoAudio from 'expo-audio';
+ *     new OpenDesk({ …, sound: expoAudioSound(ExpoAudio) });
+ *
+ * The player is made on the first reply and kept for the next. The app's audio mode is left
+ * alone; under expo-audio's default the chime mixes with other audio instead of pausing it.
+ */
+export declare function expoAudioSound(ExpoAudio: ExpoAudioModule, options?: {
+    volume?: number;
+}): () => void;

package/lib/sound.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.expoAudioSound = expoAudioSound;
+const chime_wav_1 = __importDefault(require("../assets/chime.wav"));
+/**
+ * Plays the web widget's reply chime with `expo-audio`. Takes the module as an argument, so the
+ * SDK has no dependency on Expo:
+ *
+ *     import * as ExpoAudio from 'expo-audio';
+ *     new OpenDesk({ …, sound: expoAudioSound(ExpoAudio) });
+ *
+ * The player is made on the first reply and kept for the next. The app's audio mode is left
+ * alone; under expo-audio's default the chime mixes with other audio instead of pausing it.
+ */
+function expoAudioSound(ExpoAudio, options = {}) {
+    let player = null;
+    return () => {
+        if (!player) {
+            player = ExpoAudio.createAudioPlayer(chime_wav_1.default);
+            if (options.volume !== undefined) {
+                player.volume = options.volume;
+            }
+        }
+        const current = player;
+        void current
+            .seekTo(0)
+            .catch(() => undefined)
+            .then(() => current.play());
+    };
+}

package/lib/types.d.ts

@@ -20,6 +20,8 @@ export interface WidgetConfig {
     locale: string;
     language: string;
     open: boolean;
+    /** Whether replies play a sound while the visitor isn't looking at them. */
+    sound: boolean;
     require_email: boolean;
     chat_welcome: boolean;
     help_center_url: string;

package/lib/ui/OpenDeskChat.d.ts

@@ -17,7 +17,11 @@ export interface OpenDeskChatProps {
     theme?: 'light' | 'dark' | 'auto';
     /** Replaces any of the built-in English strings. */
     strings?: Partial<ChatStrings>;
-    /** Height of any navigation header above the chat, so the keyboard never covers the composer on iOS. */
+    /**
+     * Extra space to keep between the composer and the keyboard. The chat measures its own position,
+     * so navigation headers need nothing here; inside an iOS page sheet, which it can't see past,
+     * pass the sheet's distance from the top of the screen.
+     */
     keyboardVerticalOffset?: number;
 }
 /**

package/lib/ui/OpenDeskChat.js

@@ -7,6 +7,9 @@ const react_native_1 = require("react-native");
 const react_2 = require("../react");
 const BotFace_1 = require("./BotFace");
 const icons_1 = require("./icons");
+const keyboard_1 = require("./keyboard");
+const rich_1 = require("./rich");
+const RichText_1 = require("./RichText");
 const strings_1 = require("./strings");
 const theme_1 = require("./theme");
 const MAX_UPLOAD_BYTES = 25 * 1024 * 1024;
@@ -26,8 +29,10 @@ function OpenDeskChat({ initialConversationId, onClose, pickAttachment, accentCo
     const strings = (0, react_1.useMemo)(() => ({ ...strings_1.defaultStrings, ...stringOverrides }), [stringOverrides]);
     const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
     const ui = (0, react_1.useMemo)(() => ({ theme, strings, styles, bot: config?.bot ?? null }), [theme, strings, styles, config?.bot]);
+    const rootRef = (0, react_1.useRef)(null);
+    const keyboard = (0, keyboard_1.useKeyboardInset)(rootRef, keyboardVerticalOffset);
     const inThread = conversationId !== null || composing;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.KeyboardAvoidingView, { style: styles.root, behavior: react_native_1.Platform.OS === 'ios' ? 'padding' : undefined, keyboardVerticalOffset: keyboardVerticalOffset, children: inThread ? ((0, jsx_runtime_1.jsx)(Thread, { ui: ui, conversationId: conversationId, pickAttachment: pickAttachment, onBack: () => {
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: rootRef, style: [styles.root, { paddingBottom: keyboard.inset }], onLayout: keyboard.onLayout, children: inThread ? ((0, jsx_runtime_1.jsx)(Thread, { ui: ui, conversationId: conversationId, pickAttachment: pickAttachment, onBack: () => {
                 setConversationId(null);
                 setComposing(false);
             }, onClose: onClose, onStarted: (id) => {
@@ -67,6 +72,12 @@ function Thread({ ui, conversationId, pickAttachment, onBack, onClose, onStarted
     const [focused, setFocused] = (0, react_1.useState)(false);
     const [inputHeight, setInputHeight] = (0, react_1.useState)(30);
     const [error, setError] = (0, react_1.useState)(null);
+    const [viewing, setViewing] = (0, react_1.useState)(null);
+    const openImage = (0, react_1.useCallback)((attachment) => {
+        react_native_1.Keyboard.dismiss();
+        setViewing(attachment);
+    }, []);
+    const closeImage = (0, react_1.useCallback)(() => setViewing(null), []);
     const topics = config?.topics ?? [];
     const topic = topics.find((t) => t.id === topicId) ?? null;
     const needsTopic = conversationId === null && topics.length > 0 && topic === null;
@@ -160,14 +171,14 @@ function Thread({ ui, conversationId, pickAttachment, onBack, onClose, onStarted
     }, [client, config?.attachment_extensions, pickAttachment, strings]);
     const showAttach = Boolean(pickAttachment) && config?.attachments !== false && (config?.attachment_extensions?.length ?? 1) > 0;
     const bot = config?.ai_answers ? config.bot : null;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.head, children: [(0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.back, onPress: onBack, icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg3, direction: "left" }) }), bot ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 26, look: bot.look, avatarUrl: bot.avatar_url })) : ((0, jsx_runtime_1.jsx)(Glyph, { ui: ui, name: name, url: config?.avatar_url ?? null })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headMain, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, numberOfLines: 1, children: conversation?.subject || name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.titleSub, numberOfLines: 1, children: subtitleFor(config, strings) })] }), onClose ? (0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.closeChat, onPress: onClose, icon: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3 }) }) : null] }), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.emptyScroll, keyboardShouldPersistTaps: "handled", children: needsTopic ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.picker], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerTitle, children: strings.topicsTitle }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerHint, children: strings.topicsHint }), topics.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => setTopicId(item.id), style: ({ pressed }) => [styles.topic, index > 0 && styles.convBorder, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicText, children: item.label }), (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg4, size: 14, direction: "right" })] }, item.id)))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.empty, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: config?.greeting || strings.greeting }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: config?.intro || strings.emptyHint })] })) })) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { inverted: true, style: styles.flex, data: rows, keyExtractor: (row) => row.key, contentContainerStyle: styles.thread, keyboardShouldPersistTaps: "handled", renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(ThreadRow, { ui: ui, row: item, showHandoff: item.kind === 'message' && item.message.id === handoffMessageId, onDecide: decide, onRequestHuman: requestHuman })) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.composer, children: [topic && conversationId === null ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topicRow, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.topicChip, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicChipText, numberOfLines: 1, children: topic.label }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.changeTopic, onPress: () => setTopicId(null), style: styles.topicChipX, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }) })) : null, attachments.length > 0 || uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pendingFiles, children: [attachments.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: (0, strings_1.format)(strings.removeFile, { name: attachment.filename }), onPress: () => setAttachments((current) => current.filter((a) => a.id !== attachment.id)), hitSlop: 8, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }, attachment.id))), uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.fg3, style: styles.chipSpinner }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: uploadingName })] })) : null] })) : null, error ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.err, children: error }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.cbar, showAttach && styles.cbarLead, focused && styles.cbarFocus, needsTopic && styles.cbarOff], children: [showAttach ? ((0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.attach, onPress: attach, disabled: uploadingName !== null || needsTopic, icon: (0, jsx_runtime_1.jsx)(icons_1.PaperclipIcon, { color: theme.fg3 }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, { height: inputHeight }], value: draft, onContentSizeChange: (event) => setInputHeight(Math.min(120, Math.max(30, Math.ceil(event.nativeEvent.contentSize.height)))), ...(react_native_1.Platform.OS === 'web' ? { rows: 1 } : {}), editable: !needsTopic, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onChangeText: (text) => {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.head, children: [(0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.back, onPress: onBack, icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg3, direction: "left" }) }), bot ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 26, look: bot.look, avatarUrl: bot.avatar_url })) : ((0, jsx_runtime_1.jsx)(Glyph, { ui: ui, name: name, url: config?.avatar_url ?? null })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headMain, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.title, numberOfLines: 1, children: conversation?.subject || name }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.titleSub, numberOfLines: 1, children: subtitleFor(config, strings) })] }), onClose ? (0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.closeChat, onPress: onClose, icon: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3 }) }) : null] }), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.emptyScroll, keyboardShouldPersistTaps: "handled", children: needsTopic ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.card, styles.picker], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerTitle, children: strings.topicsTitle }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.pickerHint, children: strings.topicsHint }), topics.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => setTopicId(item.id), style: ({ pressed }) => [styles.topic, index > 0 && styles.convBorder, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicText, children: item.label }), (0, jsx_runtime_1.jsx)(icons_1.ChevronIcon, { color: theme.fg4, size: 14, direction: "right" })] }, item.id)))] })) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.empty, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyTitle, children: config?.greeting || strings.greeting }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.emptyText, children: config?.intro || strings.emptyHint })] })) })) : ((0, jsx_runtime_1.jsx)(react_native_1.FlatList, { inverted: true, style: styles.flex, data: rows, keyExtractor: (row) => row.key, contentContainerStyle: styles.thread, keyboardShouldPersistTaps: "handled", renderItem: ({ item }) => ((0, jsx_runtime_1.jsx)(ThreadRow, { ui: ui, row: item, showHandoff: item.kind === 'message' && item.message.id === handoffMessageId, onDecide: decide, onRequestHuman: requestHuman, onOpenImage: openImage })) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.composer, children: [topic && conversationId === null ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topicRow, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.topicChip, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.topicChipText, numberOfLines: 1, children: topic.label }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.changeTopic, onPress: () => setTopicId(null), style: styles.topicChipX, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }) })) : null, attachments.length > 0 || uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pendingFiles, children: [attachments.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: (0, strings_1.format)(strings.removeFile, { name: attachment.filename }), onPress: () => setAttachments((current) => current.filter((a) => a.id !== attachment.id)), hitSlop: 8, children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: theme.fg3, size: 10 }) })] }, attachment.id))), uploadingName ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.chip, styles.pendingChip], children: [(0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.fg3, style: styles.chipSpinner }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: uploadingName })] })) : null] })) : null, error ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.err, children: error }) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.cbar, showAttach && styles.cbarLead, focused && styles.cbarFocus, needsTopic && styles.cbarOff], children: [showAttach ? ((0, jsx_runtime_1.jsx)(IconButton, { ui: ui, label: strings.attach, onPress: attach, disabled: uploadingName !== null || needsTopic, icon: (0, jsx_runtime_1.jsx)(icons_1.PaperclipIcon, { color: theme.fg3 }) })) : null, (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [styles.input, { height: inputHeight }], value: draft, onContentSizeChange: (event) => setInputHeight(Math.min(120, Math.max(30, Math.ceil(event.nativeEvent.contentSize.height)))), ...(react_native_1.Platform.OS === 'web' ? { rows: 1 } : {}), editable: !needsTopic, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onChangeText: (text) => {
                                     setDraft(text);
                                     if (conversationId) {
                                         client.typing(conversationId);
                                     }
-                                }, placeholder: needsTopic ? strings.placeholderTopic : strings.placeholder, placeholderTextColor: theme.fg4, accessibilityLabel: strings.placeholder, multiline: true }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.send, disabled: !ready, onPress: send, style: [styles.send, ready && styles.sendReady], children: (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.accentFg, size: 14, angle: -90 }) })] })] })] }));
+                                }, placeholder: needsTopic ? strings.placeholderTopic : strings.placeholder, placeholderTextColor: theme.fg4, accessibilityLabel: strings.placeholder, multiline: true }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.send, disabled: !ready, onPress: send, style: [styles.send, ready && styles.sendReady], children: (0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.accentFg, size: 14, angle: -90 }) })] })] }), viewing ? (0, jsx_runtime_1.jsx)(ImageViewer, { ui: ui, attachment: viewing, onClose: closeImage }) : null] }));
 }
-const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, onDecide, onRequestHuman, }) {
+const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, onDecide, onRequestHuman, onOpenImage, }) {
     const { theme, strings, styles } = ui;
     switch (row.kind) {
         case 'day':
@@ -177,16 +188,16 @@ const ThreadRow = (0, react_1.memo)(function ThreadRow({ ui, row, showHandoff, o
         case 'handed':
             return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.handed, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.handedIc, children: (0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg2 }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.flex, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handedTitle, children: strings.handedOff }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handedText, children: strings.handedOffHint })] })] }));
         case 'reply':
-            return (0, jsx_runtime_1.jsx)(Bubble, { ui: ui, reply: row.reply, first: true, last: true, gap: true, showHandoff: false, onDecide: onDecide, onRequestHuman: onRequestHuman });
+            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, reply: row.reply, first: true, last: true, gap: true, showHandoff: false, onDecide: onDecide, onRequestHuman: onRequestHuman, onOpenImage: onOpenImage }));
         case 'message':
-            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, message: row.message, first: row.first, last: row.last, gap: row.gap, showHandoff: showHandoff, onDecide: onDecide, onRequestHuman: onRequestHuman }));
+            return ((0, jsx_runtime_1.jsx)(Bubble, { ui: ui, message: row.message, first: row.first, last: row.last, gap: row.gap, showHandoff: showHandoff, onDecide: onDecide, onRequestHuman: onRequestHuman, onOpenImage: onOpenImage }));
     }
 });
 /**
  * One bubble for a stored message or an AI answer still streaming. Both share one element
  * tree, so when the stored message replaces the stream (same row key) nothing remounts.
  */
-function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, onRequestHuman, }) {
+function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, onRequestHuman, onOpenImage, }) {
     const { theme, strings, styles, bot: fallbackBot } = ui;
     const mine = message?.direction === 'inbound';
     const ai = reply !== undefined || message?.ai === true;
@@ -195,6 +206,7 @@ function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, o
     const avatar = message ? (message.author.user?.avatar_url ?? bot?.avatar_url) : bot?.avatar_url;
     const botLook = bot?.look ?? fallbackBot?.look;
     const text = message ? (message.body_text ?? '') : (reply?.text ?? '');
+    const body = (0, react_1.useMemo)(() => bodyOf(message, reply, mine, ai), [message, reply, mine, ai]);
     const local = message?.id.startsWith('local-') === true;
     const action = message?.ai_action;
     const tools = reply?.tools ?? [];
@@ -205,12 +217,29 @@ function Bubble({ ui, message, reply, first, last, gap, showHandoff, onDecide, o
     const files = (message?.attachments ?? []).filter((a) => !a.content_type.startsWith('image/'));
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.row, mine ? styles.rowMe : styles.rowThem, gap && styles.rowGap], children: [!mine && first && author ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.who, children: [ai ? ((0, jsx_runtime_1.jsx)(BotFace_1.BotFace, { size: 18, look: botLook, avatarUrl: avatar })) : avatar ? ((0, jsx_runtime_1.jsx)(Avatar, { ui: ui, size: 18, name: author, url: avatar, tint: theme.bg2 })) : null, (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.whoName, children: author }), ai ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.aiPill, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.aiPillText, children: strings.ai }) })) : null] })) : null, tools.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.tools, children: tools.map((tool, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.tool, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.toolIc, tool.status === 'error' && { backgroundColor: theme.bg2 }], children: (0, jsx_runtime_1.jsx)(icons_1.SparkIcon, { color: tool.status === 'error' ? theme.fg3 : theme.ai, size: 8 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.toolText, tool.status === 'running' && { color: theme.fg2 }], children: (0, strings_1.format)(tool.status === 'running' ? strings.checking : tool.status === 'error' ? strings.toolFailed : strings.checked, {
                                 tool: tool.name.replace(/_/g, ' '),
-                            }) })] }, `${tool.name}-${index}`))) })) : null, text || reply ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            }) })] }, `${tool.name}-${index}`))) })) : null, text || body.blocks.length > 0 || reply ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     styles.msg,
                     mine ? styles.msgMe : ai ? styles.msgAi : styles.msgThem,
                     corners,
                     local && styles.sendingMsg,
-                ], children: text ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.msgText, mine && { color: theme.accentFg }], children: text }) : (0, jsx_runtime_1.jsx)(Dots, { color: theme.ai }) })) : null, images.map((attachment) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: styles.fileGap, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.thumb, accessibilityLabel: attachment.filename, resizeMode: "cover" }) }, attachment.id))), files.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: [styles.chip, styles.fileGap], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipSize, children: fileSize(attachment.size_bytes) })] }, attachment.id))), message && action ? (0, jsx_runtime_1.jsx)(ActionCard, { ui: ui, message: message, onDecide: onDecide }) : null, message && showHandoff ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => onRequestHuman(message), style: ({ pressed }) => [styles.handoff, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg, size: 14 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handoffText, children: strings.talkToPerson })] })) : null, last && message ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.meta, children: local ? strings.sending : clockTime(message.created_at) }) : null] }));
+                ], children: mine ? ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.msgText, { color: theme.accentFg }], children: text })) : body.blocks.length > 0 ? ((0, jsx_runtime_1.jsx)(RichText_1.RichText, { blocks: body.blocks, textStyle: styles.msgText, codeBackground: ai ? theme.bg2 : theme.line, quoteColor: theme.line2, mono: theme.mono })) : ((0, jsx_runtime_1.jsx)(Dots, { color: theme.ai })) })) : null, body.sources.length > 0 ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.sources, children: body.sources.map((source) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "link", accessibilityHint: (0, rich_1.hostOf)(source.href), onPress: () => {
+                        react_native_1.Linking.openURL(source.href).catch(() => undefined);
+                    }, style: ({ pressed }) => [styles.src, pressed && { borderColor: theme.aiLine, backgroundColor: theme.aiSoft }], children: [(0, jsx_runtime_1.jsx)(icons_1.ArrowIcon, { color: theme.ai, size: 11, angle: -45 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.srcText, numberOfLines: 1, children: source.title })] }, source.href))) })) : null, images.map((attachment) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "imagebutton", accessibilityLabel: (0, strings_1.format)(strings.viewImage, { name: attachment.filename }), onPress: () => onOpenImage(attachment), style: ({ pressed }) => [styles.fileGap, pressed && styles.pressed], children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.thumb, resizeMode: "cover" }) }, attachment.id))), files.map((attachment) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => react_native_1.Linking.openURL(attachment.url), style: [styles.chip, styles.fileGap], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipText, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.chipSize, children: fileSize(attachment.size_bytes) })] }, attachment.id))), message && action ? (0, jsx_runtime_1.jsx)(ActionCard, { ui: ui, message: message, onDecide: onDecide }) : null, message && showHandoff ? ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { accessibilityRole: "button", onPress: () => onRequestHuman(message), style: ({ pressed }) => [styles.handoff, pressed && { backgroundColor: theme.bg2 }], children: [(0, jsx_runtime_1.jsx)(icons_1.PersonIcon, { color: theme.fg, size: 14 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.handoffText, children: strings.talkToPerson })] })) : null, last && message ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.meta, children: local ? strings.sending : clockTime(message.created_at) }) : null] }));
+}
+/**
+ * What a bubble shows: the visitor's own text as typed; stored replies from their HTML (links
+ * included), falling back to markdown in the text; AI answers still streaming as markdown. An AI
+ * answer's trailing list of links becomes its sources.
+ */
+function bodyOf(message, reply, mine, ai) {
+    if (mine) {
+        return { blocks: [], sources: [] };
+    }
+    if (reply && !message) {
+        return { blocks: (0, rich_1.parseMarkdown)(reply.text, true), sources: [] };
+    }
+    const blocks = message?.body_html?.trim() ? (0, rich_1.parseHtml)(message.body_html, ai) : (0, rich_1.parseMarkdown)(message?.body_text ?? '');
+    return ai ? (0, rich_1.extractSources)(blocks) : { blocks, sources: [] };
 }
 function ActionCard({ ui, message, onDecide, }) {
     const { theme, strings, styles } = ui;
@@ -225,6 +254,21 @@ function ActionCard({ ui, message, onDecide, }) {
     }[action.status];
     return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.action, pending && styles.actionPending], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionTop, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionTool, children: [(0, jsx_runtime_1.jsx)(icons_1.SparkIcon, { color: theme.ai, size: 8 }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionToolText, numberOfLines: 1, children: action.tool.replace(/_/g, ' ') })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.actionNeed, action.status === 'failed' && { color: theme.danger }], children: label })] }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionTitle, children: action.title }), action.summary ? (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.actionSum, children: action.summary }) : null, pending ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.actionBtns, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onDecide(message, 'decline'), style: [styles.btn, styles.btnGhost], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.btnGhostText, children: strings.cancel }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onDecide(message, 'confirm'), style: [styles.btn, styles.btnSolid], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.btnSolidText, children: strings.confirm }) })] })) : null] }));
 }
+/** An attached image shown full size over the thread, so it opens in the chat instead of a browser. */
+function ImageViewer({ ui, attachment, onClose }) {
+    const { strings, styles } = ui;
+    (0, react_1.useEffect)(() => {
+        if (react_native_1.Platform.OS !== 'android') {
+            return;
+        }
+        const subscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', () => {
+            onClose();
+            return true;
+        });
+        return () => subscription.remove();
+    }, [onClose]);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.viewer, accessibilityViewIsModal: true, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.viewerHead, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.viewerName, numberOfLines: 1, children: attachment.filename }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: strings.closeImage, onPress: onClose, hitSlop: 6, style: ({ pressed }) => [styles.iconBtn, pressed && styles.viewerPressed], children: (0, jsx_runtime_1.jsx)(icons_1.CloseIcon, { color: "#ffffff" }) })] }), (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: styles.flex, contentContainerStyle: styles.viewerBody, maximumZoomScale: 4, minimumZoomScale: 1, centerContent: true, showsHorizontalScrollIndicator: false, showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri: attachment.url }, style: styles.viewerImage, resizeMode: "contain", accessibilityLabel: attachment.filename }) })] }));
+}
 function IconButton({ ui, label, onPress, icon, disabled, }) {
     return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityLabel: label, onPress: onPress, disabled: disabled, hitSlop: 6, style: ({ pressed }) => [ui.styles.iconBtn, pressed && { backgroundColor: ui.theme.bg2 }, disabled && ui.styles.disabled], children: icon }));
 }
@@ -377,13 +421,13 @@ function createStyles(t) {
             alignItems: 'center',
             gap: 10,
             paddingHorizontal: 12,
-            paddingTop: 12,
-            paddingBottom: 11,
+            paddingTop: 18,
+            paddingBottom: 14,
             borderBottomWidth: 1,
             borderBottomColor: t.line,
             backgroundColor: t.bg,
         },
-        headHome: { flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: 16, paddingBottom: 20, backgroundColor: t.headBg },
+        headHome: { flexDirection: 'column', alignItems: 'stretch', gap: 0, padding: 16, paddingTop: 22, paddingBottom: 20, backgroundColor: t.headBg },
         headRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 },
         headMain: { flex: 1, minWidth: 0 },
         ws: { flexDirection: 'row', alignItems: 'center', gap: 9, flexShrink: 1 },
@@ -480,6 +524,21 @@ function createStyles(t) {
         msgMe: { backgroundColor: t.accent },
         msgThem: { backgroundColor: t.bg2 },
         msgAi: { backgroundColor: t.bg3, borderWidth: 1, borderColor: t.line },
+        sources: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 6 },
+        src: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            maxWidth: 240,
+            height: 26,
+            paddingLeft: 8,
+            paddingRight: 10,
+            borderRadius: r.ctl,
+            borderWidth: 1,
+            borderColor: t.line,
+            backgroundColor: t.bg,
+        },
+        srcText: { flexShrink: 1, fontSize: 12, color: t.fg2 },
         msgText: { fontSize: 13.5, lineHeight: 19.5, color: t.fg },
         sendingMsg: { opacity: 0.7 },
         meta: { fontFamily: t.mono, fontSize: 10, color: t.fg4, marginTop: 3, marginHorizontal: 4 },
@@ -489,6 +548,12 @@ function createStyles(t) {
         toolText: { fontSize: 12, lineHeight: 18, color: t.fg3 },
         fileGap: { marginTop: 4 },
         thumb: { width: 220, height: 160, borderRadius: r.card, borderWidth: 1, borderColor: t.line, backgroundColor: t.bg2 },
+        viewer: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, zIndex: 10, elevation: 10, backgroundColor: '#000000' },
+        viewerHead: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 12, paddingTop: 18, paddingBottom: 14 },
+        viewerName: { flex: 1, fontSize: 14, fontWeight: '600', color: '#ffffff' },
+        viewerPressed: { backgroundColor: 'rgba(255,255,255,0.16)' },
+        viewerBody: { flexGrow: 1 },
+        viewerImage: { flex: 1, width: '100%' },
         chip: {
             flexDirection: 'row',
             alignItems: 'center',

package/lib/ui/RichText.d.ts

@@ -0,0 +1,15 @@
+import { type TextStyle } from 'react-native';
+import type { Block } from './rich';
+interface RichTextProps {
+    blocks: Block[];
+    /** The bubble's text style; colour and size carry into every block. */
+    textStyle: TextStyle;
+    /** Fill behind inline code and code blocks. */
+    codeBackground: string;
+    /** Rule beside quotes. */
+    quoteColor: string;
+    mono: string;
+}
+/** Renders parsed message blocks like the widget's `.msg`: paragraphs, lists, quotes, code and underlined links. */
+export declare function RichText({ blocks, textStyle, codeBackground, quoteColor, mono }: RichTextProps): import("react").JSX.Element;
+export {};

package/lib/ui/RichText.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = RichText;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/** Renders parsed message blocks like the widget's `.msg`: paragraphs, lists, quotes, code and underlined links. */
+function RichText({ blocks, textStyle, codeBackground, quoteColor, mono }) {
+    const color = textStyle.color;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.blocks, children: blocks.map((block, index) => {
+            switch (block.kind) {
+                case 'paragraph':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: textStyle, children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: block.inlines, codeStyle: { fontFamily: mono, backgroundColor: codeBackground } }) }, index));
+                case 'heading':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle, styles.bold], children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: block.inlines, codeStyle: { fontFamily: mono, backgroundColor: codeBackground } }) }, index));
+                case 'quote':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.quote, { borderLeftColor: quoteColor }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle, styles.quoteText], children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: block.inlines, codeStyle: { fontFamily: mono, backgroundColor: codeBackground } }) }) }, index));
+                case 'code':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.pre, { backgroundColor: codeBackground }], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle, styles.preText, { fontFamily: mono }], children: block.text }) }, index));
+                case 'list':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.list, children: block.items.map((item, itemIndex) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.item, children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle, styles.marker, { color }], children: block.ordered ? `${itemIndex + 1}.` : '•' }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [textStyle, styles.itemText], children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: item, codeStyle: { fontFamily: mono, backgroundColor: codeBackground } }) })] }, itemIndex))) }, index));
+            }
+        }) }));
+}
+function Inlines({ inlines, codeStyle }) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inlines.map((inline, index) => {
+            switch (inline.kind) {
+                case 'text':
+                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: inline.text }, index);
+                case 'break':
+                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: '\n' }, index);
+                case 'bold':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.bold, children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: inline.children, codeStyle: codeStyle }) }, index));
+                case 'italic':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: styles.italic, children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: inline.children, codeStyle: codeStyle }) }, index));
+                case 'code':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [styles.code, codeStyle], children: inline.text }, index));
+                case 'link':
+                    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { accessibilityRole: "link", onPress: () => {
+                            react_native_1.Linking.openURL(inline.href).catch(() => undefined);
+                        }, style: styles.link, children: (0, jsx_runtime_1.jsx)(Inlines, { inlines: inline.children, codeStyle: codeStyle }) }, index));
+            }
+        }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    blocks: { gap: 6 },
+    bold: { fontWeight: '600' },
+    italic: { fontStyle: 'italic' },
+    link: { textDecorationLine: 'underline', fontWeight: '500' },
+    code: { fontSize: 12 },
+    pre: { borderRadius: 6, paddingHorizontal: 8, paddingVertical: 6 },
+    preText: { fontSize: 12, lineHeight: 17 },
+    quote: { borderLeftWidth: 2, paddingLeft: 8 },
+    quoteText: { opacity: 0.8 },
+    list: { gap: 2 },
+    item: { flexDirection: 'row' },
+    marker: { minWidth: 16, paddingRight: 4 },
+    itemText: { flex: 1 },
+});