opendesk-react-native 0.1.6 → 0.1.7

package/src/ui/rich.ts

@@ -0,0 +1,507 @@
+/**
+ * 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 function isSafeHref(href: string): boolean {
+  return /^(https?:\/\/|mailto:)/i.test(href.trim());
+}
+
+/** The domain shown with a source, without `www.`. */
+export function hostOf(href: string): string {
+  const match = /^https?:\/\/([^/?#:]+)/i.exec(href);
+
+  return match ? match[1]!.replace(/^www\./i, '') : '';
+}
+
+/** Plain text of inlines, e.g. for accessibility labels. */
+export function textOf(inlines: Inline[]): string {
+  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: string, streaming: boolean): string {
+  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: string): string {
+  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: string): Inline[] {
+  const inlines: Inline[] = [];
+  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;
+}
+
+export function parseMarkdown(source: string, streaming = false): Block[] {
+  let text = stripCitations(source.replace(/\r\n?/g, '\n'), streaming);
+  if (streaming) {
+    text = closeOpenMarkup(text);
+  }
+  const lines = text.split('\n');
+  const blocks: Block[] = [];
+  let paragraph: string[] = [];
+
+  const flush = () => {
+    if (paragraph.length === 0) {
+      return;
+    }
+    const inlines: Inline[] = [];
+    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: string[] = [];
+      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: Inline[][] = [];
+      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: string[] = [];
+      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;
+}
+
+// ---------------------------------------------------------------------------------------------
+// HTML: a forgiving parser for the HTML openDesk stores on messages. No DOM is available in
+// React Native, so it builds a tiny tree and keeps only what a chat bubble can show.
+// ---------------------------------------------------------------------------------------------
+
+interface Element {
+  tag: string;
+  attrs: Record<string, string>;
+  children: Node[];
+}
+
+type Node = Element | string;
+
+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: Record<string, string> = {
+  amp: '&',
+  lt: '<',
+  gt: '>',
+  quot: '"',
+  apos: "'",
+  nbsp: ' ',
+  ndash: '–',
+  mdash: '—',
+  hellip: '…',
+  lsquo: '‘',
+  rsquo: '’',
+  ldquo: '“',
+  rdquo: '”',
+  bull: '•',
+  middot: '·',
+  copy: '©',
+  reg: '®',
+  trade: '™',
+};
+
+function decodeEntities(text: string): string {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (match, entity: string) => {
+    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: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  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: string): Node[] {
+  const root: Element = { tag: '#root', attrs: {}, children: [] };
+  const stack: Element[] = [root];
+  const pattern = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][a-zA-Z0-9]*)([^>]*)>|([^<]+|<)/g;
+  let skipping: string | null = 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: 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: Node[]): string {
+  return nodes.map((node) => (typeof node === 'string' ? node : node.tag === 'br' ? '\n' : textContent(node.children))).join('');
+}
+
+function htmlInlines(nodes: Node[], citations: boolean): Inline[] {
+  const inlines: Inline[] = [];
+
+  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: Inline[]): Inline[] {
+  const result = [...inlines];
+  const blank = (inline: Inline | undefined) => 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: Node[], citations: boolean): Block[] {
+  const blocks: Block[] = [];
+  let pending: Node[] = [];
+
+  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): child is Element => 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. */
+export function parseHtml(html: string, citations = false): Block[] {
+  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.
+ */
+export function extractSources(blocks: Block[]): { blocks: Block[]; sources: Source[] } {
+  const last = blocks[blocks.length - 1];
+  if (!last || last.kind !== 'list' || blocks.length < 2) {
+    return { blocks, sources: [] };
+  }
+
+  const sources: Source[] = [];
+  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 };
+}