opendesk-react-native 0.1.6 → 0.1.7

package/lib/ui/OpenDeskChat.js

@@ -8,6 +8,8 @@ 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;
@@ -204,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 ?? [];
@@ -214,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, { 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] }));
+                ], 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;
@@ -504,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 },

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 },
+});

package/lib/ui/rich.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Turns message bodies into a small block/inline tree that React Native can render, the way
+ * openDesk's web widget does: stored messages from `body_html`, AI answers still streaming (and
+ * messages with only `body_text`) from the widget's markdown subset. A trailing list of links in
+ * an AI answer becomes its sources.
+ */
+export type Inline = {
+    kind: 'text';
+    text: string;
+} | {
+    kind: 'bold' | 'italic';
+    children: Inline[];
+} | {
+    kind: 'code';
+    text: string;
+} | {
+    kind: 'link';
+    href: string;
+    children: Inline[];
+} | {
+    kind: 'break';
+};
+export type Block = {
+    kind: 'paragraph' | 'heading' | 'quote';
+    inlines: Inline[];
+} | {
+    kind: 'list';
+    ordered: boolean;
+    items: Inline[][];
+} | {
+    kind: 'code';
+    text: string;
+};
+export interface Source {
+    href: string;
+    title: string;
+}
+/** Only web and mail links open; anything else (javascript:, intent:, …) renders as text. */
+export declare function isSafeHref(href: string): boolean;
+/** The domain shown with a source, without `www.`. */
+export declare function hostOf(href: string): string;
+/** Plain text of inlines, e.g. for accessibility labels. */
+export declare function textOf(inlines: Inline[]): string;
+export declare function parseMarkdown(source: string, streaming?: boolean): Block[];
+/** Parses stored message HTML. `citations` drops AI `[1]` markers, as for markdown. */
+export declare function parseHtml(html: string, citations?: boolean): Block[];
+/**
+ * Splits off an AI answer's sources: a trailing list in which every item is just one web link.
+ * Like the web widget, it leaves the answer alone when the list is all there is.
+ */
+export declare function extractSources(blocks: Block[]): {
+    blocks: Block[];
+    sources: Source[];
+};

package/lib/ui/rich.js

@@ -0,0 +1,444 @@
+"use strict";
+/**
+ * Turns message bodies into a small block/inline tree that React Native can render, the way
+ * openDesk's web widget does: stored messages from `body_html`, AI answers still streaming (and
+ * messages with only `body_text`) from the widget's markdown subset. A trailing list of links in
+ * an AI answer becomes its sources.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isSafeHref = isSafeHref;
+exports.hostOf = hostOf;
+exports.textOf = textOf;
+exports.parseMarkdown = parseMarkdown;
+exports.parseHtml = parseHtml;
+exports.extractSources = extractSources;
+/** Only web and mail links open; anything else (javascript:, intent:, …) renders as text. */
+function isSafeHref(href) {
+    return /^(https?:\/\/|mailto:)/i.test(href.trim());
+}
+/** The domain shown with a source, without `www.`. */
+function hostOf(href) {
+    const match = /^https?:\/\/([^/?#:]+)/i.exec(href);
+    return match ? match[1].replace(/^www\./i, '') : '';
+}
+/** Plain text of inlines, e.g. for accessibility labels. */
+function textOf(inlines) {
+    return inlines
+        .map((inline) => {
+        switch (inline.kind) {
+            case 'text':
+            case 'code':
+                return inline.text;
+            case 'break':
+                return '\n';
+            default:
+                return textOf(inline.children);
+        }
+    })
+        .join('');
+}
+// ---------------------------------------------------------------------------------------------
+// Markdown: the web widget's subset (bold, italic, code, links, bare URLs, lists, headings,
+// quotes, fences), including its clean-ups for text that is still streaming in.
+// ---------------------------------------------------------------------------------------------
+const CITATIONS = /[ \t]*\[\d{1,3}(?:\s*,\s*\d{1,3})*\](?!\()/g;
+const PARTIAL_CITATION = /[ \t]*\[\d{0,3}(?:\s*,\s*\d{0,3})*$/;
+const INLINE = /(\*\*([^*\n]+?)\*\*)|(`([^`\n]+?)`)|(\[([^\]\n]+)\]\(([^)\s]+)\))|((^|[^\w*])\*([^*\s][^*\n]*?)\*(?![\w*]))|(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/g;
+const BULLET = /^\s{0,3}[-*+]\s+(.*)$/;
+const NUMBERED = /^\s{0,3}\d{1,3}[.)]\s+(.*)$/;
+const HEADING = /^\s{0,3}#{1,6}\s+(.*)$/;
+const QUOTE = /^\s{0,3}>\s?(.*)$/;
+const FENCE = /^\s{0,3}```/;
+/** Drops `[1]`-style citation markers the AI leaves in its text. */
+function stripCitations(text, streaming) {
+    const stripped = text.replace(CITATIONS, '');
+    return streaming ? stripped.replace(PARTIAL_CITATION, '') : stripped;
+}
+/** Hides half-typed markup while an answer streams in, so `**bo` never shows its asterisks. */
+function closeOpenMarkup(text) {
+    let result = text;
+    if ((result.match(/```/g) ?? []).length % 2 === 1) {
+        return result;
+    }
+    if ((result.match(/\*\*/g) ?? []).length % 2 === 1) {
+        const at = result.lastIndexOf('**');
+        result = result.slice(0, at) + result.slice(at + 2);
+    }
+    if ((result.replace(/```/g, '').match(/`/g) ?? []).length % 2 === 1) {
+        const at = result.lastIndexOf('`');
+        result = result.slice(0, at) + result.slice(at + 1);
+    }
+    return result.replace(/\[([^\]\n]*)\]\([^)\s]*$/, '$1').replace(/\[([^\]\n]*)$/, '$1');
+}
+function markdownInlines(text) {
+    const inlines = [];
+    const pattern = new RegExp(INLINE.source, 'g');
+    let last = 0;
+    for (let match = pattern.exec(text); match; match = pattern.exec(text)) {
+        if (match.index > last) {
+            inlines.push({ kind: 'text', text: text.slice(last, match.index) });
+        }
+        if (match[1]) {
+            inlines.push({ kind: 'bold', children: markdownInlines(match[2]) });
+        }
+        else if (match[3]) {
+            inlines.push({ kind: 'code', text: match[4] });
+        }
+        else if (match[5]) {
+            const href = match[7];
+            inlines.push(isSafeHref(href) ? { kind: 'link', href, children: markdownInlines(match[6]) } : { kind: 'text', text: match[6] });
+        }
+        else if (match[8]) {
+            if (match[9]) {
+                inlines.push({ kind: 'text', text: match[9] });
+            }
+            inlines.push({ kind: 'italic', children: markdownInlines(match[10]) });
+        }
+        else if (match[11]) {
+            inlines.push({ kind: 'link', href: match[11], children: [{ kind: 'text', text: match[11] }] });
+        }
+        last = match.index + match[0].length;
+    }
+    if (last < text.length) {
+        inlines.push({ kind: 'text', text: text.slice(last) });
+    }
+    return inlines;
+}
+function parseMarkdown(source, streaming = false) {
+    let text = stripCitations(source.replace(/\r\n?/g, '\n'), streaming);
+    if (streaming) {
+        text = closeOpenMarkup(text);
+    }
+    const lines = text.split('\n');
+    const blocks = [];
+    let paragraph = [];
+    const flush = () => {
+        if (paragraph.length === 0) {
+            return;
+        }
+        const inlines = [];
+        paragraph.forEach((line, index) => {
+            if (index > 0) {
+                inlines.push({ kind: 'break' });
+            }
+            inlines.push(...markdownInlines(line));
+        });
+        blocks.push({ kind: 'paragraph', inlines });
+        paragraph = [];
+    };
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (FENCE.test(line)) {
+            flush();
+            const code = [];
+            for (i++; i < lines.length && !FENCE.test(lines[i]); i++) {
+                code.push(lines[i]);
+            }
+            blocks.push({ kind: 'code', text: code.join('\n') });
+            continue;
+        }
+        const listPattern = BULLET.test(line) ? BULLET : NUMBERED.test(line) ? NUMBERED : null;
+        if (listPattern) {
+            flush();
+            const items = [];
+            for (; i < lines.length && listPattern.test(lines[i]); i++) {
+                items.push(markdownInlines(listPattern.exec(lines[i])[1]));
+            }
+            i--;
+            blocks.push({ kind: 'list', ordered: listPattern === NUMBERED, items });
+            continue;
+        }
+        const heading = HEADING.exec(line);
+        if (heading) {
+            flush();
+            blocks.push({ kind: 'heading', inlines: markdownInlines(heading[1]) });
+        }
+        else if (QUOTE.test(line)) {
+            flush();
+            const quoted = [];
+            for (; i < lines.length && QUOTE.test(lines[i]); i++) {
+                quoted.push(QUOTE.exec(lines[i])[1]);
+            }
+            i--;
+            blocks.push({ kind: 'quote', inlines: markdownInlines(quoted.join(' ')) });
+        }
+        else if (line.trim()) {
+            paragraph.push(line.trim());
+        }
+        else {
+            flush();
+        }
+    }
+    flush();
+    return blocks;
+}
+const VOID = new Set(['br', 'img', 'hr', 'input', 'meta', 'link', 'wbr', 'source', 'col']);
+const SKIP = new Set(['script', 'style', 'head', 'title', 'template', 'noscript', 'svg']);
+const BLOCK = new Set([
+    'p',
+    'div',
+    'section',
+    'article',
+    'header',
+    'footer',
+    'main',
+    'aside',
+    'ul',
+    'ol',
+    'li',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'blockquote',
+    'pre',
+    'table',
+    'thead',
+    'tbody',
+    'tr',
+    'td',
+    'th',
+    'hr',
+    'figure',
+    'figcaption',
+]);
+const ENTITIES = {
+    amp: '&',
+    lt: '<',
+    gt: '>',
+    quot: '"',
+    apos: "'",
+    nbsp: ' ',
+    ndash: '–',
+    mdash: '—',
+    hellip: '…',
+    lsquo: '‘',
+    rsquo: '’',
+    ldquo: '“',
+    rdquo: '”',
+    bull: '•',
+    middot: '·',
+    copy: '©',
+    reg: '®',
+    trade: '™',
+};
+function decodeEntities(text) {
+    return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (match, entity) => {
+        if (entity[0] === '#') {
+            const code = entity[1]?.toLowerCase() === 'x' ? parseInt(entity.slice(2), 16) : parseInt(entity.slice(1), 10);
+            return Number.isFinite(code) && code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : match;
+        }
+        return ENTITIES[entity.toLowerCase()] ?? match;
+    });
+}
+function parseAttributes(source) {
+    const attrs = {};
+    const pattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+    for (let match = pattern.exec(source); match; match = pattern.exec(source)) {
+        attrs[match[1].toLowerCase()] = decodeEntities(match[2] ?? match[3] ?? match[4] ?? '');
+    }
+    return attrs;
+}
+function parseTree(html) {
+    const root = { tag: '#root', attrs: {}, children: [] };
+    const stack = [root];
+    const pattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][a-zA-Z0-9]*)([^>]*)>|([^<]+|<)/g;
+    let skipping = null;
+    for (let match = pattern.exec(html); match; match = pattern.exec(html)) {
+        const [whole, closing, rawTag, rawAttrs, text] = match;
+        const current = stack[stack.length - 1];
+        if (whole.startsWith('<!--')) {
+            continue;
+        }
+        if (text !== undefined) {
+            if (!skipping) {
+                current.children.push(decodeEntities(text));
+            }
+            continue;
+        }
+        const tag = rawTag.toLowerCase();
+        if (skipping) {
+            if (closing && tag === skipping) {
+                skipping = null;
+            }
+            continue;
+        }
+        if (closing) {
+            const at = stack.map((element) => element.tag).lastIndexOf(tag);
+            if (at > 0) {
+                stack.length = at;
+            }
+            continue;
+        }
+        if (SKIP.has(tag)) {
+            if (!rawAttrs.trim().endsWith('/')) {
+                skipping = tag;
+            }
+            continue;
+        }
+        const element = { tag, attrs: parseAttributes(rawAttrs ?? ''), children: [] };
+        current.children.push(element);
+        if (!VOID.has(tag) && !rawAttrs.trim().endsWith('/')) {
+            stack.push(element);
+        }
+    }
+    return root.children;
+}
+function textContent(nodes) {
+    return nodes.map((node) => (typeof node === 'string' ? node : node.tag === 'br' ? '\n' : textContent(node.children))).join('');
+}
+function htmlInlines(nodes, citations) {
+    const inlines = [];
+    for (const node of nodes) {
+        if (typeof node === 'string') {
+            const text = node.replace(/[ \t\r\n\f]+/g, ' ');
+            inlines.push({ kind: 'text', text: citations ? text.replace(CITATIONS, '') : text });
+            continue;
+        }
+        switch (node.tag) {
+            case 'br':
+                inlines.push({ kind: 'break' });
+                break;
+            case 'img':
+                if (node.attrs.alt) {
+                    inlines.push({ kind: 'text', text: node.attrs.alt });
+                }
+                break;
+            case 'strong':
+            case 'b':
+                inlines.push({ kind: 'bold', children: htmlInlines(node.children, citations) });
+                break;
+            case 'em':
+            case 'i':
+                inlines.push({ kind: 'italic', children: htmlInlines(node.children, citations) });
+                break;
+            case 'code':
+            case 'kbd':
+            case 'samp':
+                inlines.push({ kind: 'code', text: textContent(node.children) });
+                break;
+            case 'a': {
+                const href = node.attrs.href ?? '';
+                const children = htmlInlines(node.children, citations);
+                if (isSafeHref(href)) {
+                    inlines.push({ kind: 'link', href: href.trim(), children });
+                }
+                else {
+                    inlines.push(...children);
+                }
+                break;
+            }
+            default:
+                if (BLOCK.has(node.tag) && inlines.length > 0) {
+                    inlines.push({ kind: 'break' });
+                }
+                inlines.push(...htmlInlines(node.children, citations));
+        }
+    }
+    return inlines;
+}
+/** Trims whitespace and breaks at both ends of a run of inlines; returns [] when nothing is left. */
+function tidy(inlines) {
+    const result = [...inlines];
+    const blank = (inline) => inline?.kind === 'break' || (inline?.kind === 'text' && !inline.text.trim());
+    while (blank(result[0])) {
+        result.shift();
+    }
+    while (blank(result[result.length - 1])) {
+        result.pop();
+    }
+    const first = result[0];
+    if (first?.kind === 'text') {
+        result[0] = { kind: 'text', text: first.text.replace(/^\s+/, '') };
+    }
+    const last = result[result.length - 1];
+    if (last?.kind === 'text') {
+        result[result.length - 1] = { kind: 'text', text: last.text.replace(/\s+$/, '') };
+    }
+    return textOf(result).trim() ? result : [];
+}
+function htmlBlocks(nodes, citations) {
+    const blocks = [];
+    let pending = [];
+    const flush = () => {
+        const inlines = tidy(htmlInlines(pending, citations));
+        if (inlines.length > 0) {
+            blocks.push({ kind: 'paragraph', inlines });
+        }
+        pending = [];
+    };
+    for (const node of nodes) {
+        if (typeof node === 'string' || !BLOCK.has(node.tag)) {
+            pending.push(node);
+            continue;
+        }
+        flush();
+        switch (node.tag) {
+            case 'ul':
+            case 'ol': {
+                const items = node.children
+                    .filter((child) => typeof child !== 'string' && child.tag === 'li')
+                    .map((item) => tidy(htmlInlines(item.children, citations)))
+                    .filter((item) => item.length > 0);
+                if (items.length > 0) {
+                    blocks.push({ kind: 'list', ordered: node.tag === 'ol', items });
+                }
+                break;
+            }
+            case 'pre':
+                blocks.push({ kind: 'code', text: textContent(node.children).replace(/^\n+|\s+$/g, '') });
+                break;
+            case 'blockquote': {
+                const inlines = tidy(htmlInlines(node.children, citations));
+                if (inlines.length > 0) {
+                    blocks.push({ kind: 'quote', inlines });
+                }
+                break;
+            }
+            case 'h1':
+            case 'h2':
+            case 'h3':
+            case 'h4':
+            case 'h5':
+            case 'h6': {
+                const inlines = tidy(htmlInlines(node.children, citations));
+                if (inlines.length > 0) {
+                    blocks.push({ kind: 'heading', inlines });
+                }
+                break;
+            }
+            case 'hr':
+                break;
+            default:
+                blocks.push(...htmlBlocks(node.children, citations));
+        }
+    }
+    flush();
+    return blocks;
+}
+/** Parses stored message HTML. `citations` drops AI `[1]` markers, as for markdown. */
+function parseHtml(html, citations = false) {
+    return htmlBlocks(parseTree(html), citations);
+}
+/**
+ * Splits off an AI answer's sources: a trailing list in which every item is just one web link.
+ * Like the web widget, it leaves the answer alone when the list is all there is.
+ */
+function extractSources(blocks) {
+    const last = blocks[blocks.length - 1];
+    if (!last || last.kind !== 'list' || blocks.length < 2) {
+        return { blocks, sources: [] };
+    }
+    const sources = [];
+    for (const item of last.items) {
+        const content = item.filter((inline) => !(inline.kind === 'text' && !inline.text.trim()));
+        const link = content[0];
+        if (content.length !== 1 || link?.kind !== 'link' || !/^https?:/i.test(link.href)) {
+            return { blocks, sources: [] };
+        }
+        sources.push({ href: link.href, title: textOf(link.children).trim() || link.href });
+    }
+    return { blocks: blocks.slice(0, -1), sources };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opendesk-react-native",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "React Native SDK for openDesk live chat: headless client, realtime, hooks and a drop-in chat screen.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",