opendesk-react-native 0.1.3 → 0.1.7

package/lib/ui/keyboard.d.ts

@@ -0,0 +1,15 @@
+import { type RefObject } from 'react';
+import { type View } from 'react-native';
+/**
+ * How far the keyboard covers the view in `ref`, for use as its bottom padding.
+ *
+ * KeyboardAvoidingView compares the keyboard with a layout relative to its parent, so it misses
+ * anything above that parent (a header, a sheet), and on Android it relies on the window
+ * shrinking, which edge-to-edge apps no longer do. This measures the view in window coordinates
+ * instead and works the same on both platforms. Call `onLayout` from the view's `onLayout` so a
+ * window that does shrink is measured again and the padding drops back.
+ */
+export declare function useKeyboardInset(ref: RefObject<View | null>, extraOffset?: number): {
+    inset: number;
+    onLayout: () => void;
+};

package/lib/ui/keyboard.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyboardInset = useKeyboardInset;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * How far the keyboard covers the view in `ref`, for use as its bottom padding.
+ *
+ * KeyboardAvoidingView compares the keyboard with a layout relative to its parent, so it misses
+ * anything above that parent (a header, a sheet), and on Android it relies on the window
+ * shrinking, which edge-to-edge apps no longer do. This measures the view in window coordinates
+ * instead and works the same on both platforms. Call `onLayout` from the view's `onLayout` so a
+ * window that does shrink is measured again and the padding drops back.
+ */
+function useKeyboardInset(ref, extraOffset = 0) {
+    const [inset, setInset] = (0, react_1.useState)(0);
+    const keyboard = (0, react_1.useRef)(null);
+    const measure = (0, react_1.useCallback)(() => {
+        const event = keyboard.current;
+        const view = ref.current;
+        if (!event || !view) {
+            setInset(0);
+            return;
+        }
+        view.measureInWindow((_x, y, _width, height) => {
+            if (keyboard.current !== event) {
+                return;
+            }
+            const next = Math.max(0, Math.round(y + height - event.endCoordinates.screenY + extraOffset));
+            setInset((current) => {
+                if (current !== next) {
+                    animateWithKeyboard(event);
+                }
+                return next;
+            });
+        });
+    }, [ref, extraOffset]);
+    (0, react_1.useEffect)(() => {
+        const show = (event) => {
+            keyboard.current = event;
+            measure();
+        };
+        const hide = (event) => {
+            keyboard.current = null;
+            animateWithKeyboard(event);
+            setInset(0);
+        };
+        const subscriptions = react_native_1.Platform.OS === 'ios'
+            ? [react_native_1.Keyboard.addListener('keyboardWillChangeFrame', show), react_native_1.Keyboard.addListener('keyboardWillHide', hide)]
+            : [react_native_1.Keyboard.addListener('keyboardDidShow', show), react_native_1.Keyboard.addListener('keyboardDidHide', hide)];
+        return () => subscriptions.forEach((subscription) => subscription.remove());
+    }, [measure]);
+    return { inset, onLayout: measure };
+}
+/** iOS reports the keyboard's own curve, so the padding can move in step with it. */
+function animateWithKeyboard(event) {
+    if (react_native_1.Platform.OS !== 'ios' || !event?.duration) {
+        return;
+    }
+    const type = react_native_1.LayoutAnimation.Types[event.easing] ?? react_native_1.LayoutAnimation.Types.keyboard;
+    react_native_1.LayoutAnimation.configureNext({ duration: event.duration, update: { duration: event.duration, type } });
+}

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/lib/ui/strings.d.ts

@@ -20,6 +20,8 @@ export declare const defaultStrings: {
     sending: string;
     uploading: string;
     removeFile: string;
+    viewImage: string;
+    closeImage: string;
     fileTypeRefused: string;
     fileTooLarge: string;
     uploadFailed: string;

package/lib/ui/strings.js

@@ -24,6 +24,8 @@ exports.defaultStrings = {
     sending: 'Sending…',
     uploading: 'Uploading…',
     removeFile: 'Remove {name}',
+    viewImage: 'View {name}',
+    closeImage: 'Close image',
     fileTypeRefused: "{name} can't be sent here. Try another file type.",
     fileTooLarge: '{name} is larger than 25 MB.',
     uploadFailed: "Couldn't upload {name}. Try again.",

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "opendesk-react-native",
-  "version": "0.1.3",
+  "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",
   "files": [
     "lib",
     "src",
+    "assets",
     "!src/**/__tests__"
   ],
   "scripts": {