@crafter/rn-ai-elements 0.0.1

package/src/streaming/parser.ts

@@ -0,0 +1,506 @@
+// ---------------------------------------------------------------------------
+// Incremental markdown parser -- zero dependencies, streaming-aware.
+// Designed for AI chat output: pragmatic, not spec-complete.
+// ---------------------------------------------------------------------------
+
+export type MarkdownNodeType =
+  | 'paragraph'
+  | 'heading'
+  | 'text'
+  | 'bold'
+  | 'italic'
+  | 'bold_italic'
+  | 'code_inline'
+  | 'code_block'
+  | 'link'
+  | 'image'
+  | 'list'
+  | 'list_item'
+  | 'blockquote'
+  | 'horizontal_rule'
+  | 'table'
+  | 'table_row'
+  | 'table_cell';
+
+export interface MarkdownNode {
+  type: MarkdownNodeType;
+  content?: string;
+  children?: MarkdownNode[];
+  /** Heading level 1-6 */
+  level?: number;
+  /** Code block language hint */
+  language?: string;
+  /** Link / image URL */
+  url?: string;
+  /** Image alt text */
+  alt?: string;
+  /** Whether a list is ordered */
+  ordered?: boolean;
+  /** Whether a table cell is a header cell */
+  header?: boolean;
+}
+
+export interface ParseResult {
+  /** Fully-parsed AST nodes */
+  nodes: MarkdownNode[];
+  /** true when trailing content looks like an unclosed block */
+  isStreaming: boolean;
+  /** Index up to which the text has been safely consumed */
+  lastSafeIndex: number;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Split text into lines, preserving trailing empty line when text ends with \n */
+function splitLines(text: string): string[] {
+  return text.split('\n');
+}
+
+/** Check if a line is a horizontal rule (---, ***, ___) */
+function isHorizontalRule(line: string): boolean {
+  const trimmed = line.trim();
+  return /^[-*_]{3,}$/.test(trimmed) && /^(-{3,}|\*{3,}|_{3,})$/.test(trimmed);
+}
+
+/** Check if a line opens or closes a fenced code block */
+function isFenceLine(line: string): { isFence: boolean; language: string } {
+  const match = line.match(/^```(\w*)\s*$/);
+  if (match) return { isFence: true, language: match[1] };
+  return { isFence: false, language: '' };
+}
+
+/** Detect heading line. Returns level (1-6) or 0. */
+function headingLevel(line: string): number {
+  const match = line.match(/^(#{1,6})\s+/);
+  return match ? match[1].length : 0;
+}
+
+/** Detect unordered list item. Returns the content after the bullet or null. */
+function unorderedListItem(line: string): string | null {
+  const match = line.match(/^(\s*)[-*+]\s+(.*)/);
+  return match ? match[2] : null;
+}
+
+/** Detect ordered list item. Returns content or null. */
+function orderedListItem(line: string): string | null {
+  const match = line.match(/^(\s*)\d+[.)]\s+(.*)/);
+  return match ? match[2] : null;
+}
+
+/** Detect blockquote line. Returns inner content or null. */
+function blockquoteContent(line: string): string | null {
+  const match = line.match(/^>\s?(.*)/);
+  return match ? match[1] : null;
+}
+
+/** Detect a table row (starts and ends with |, or starts with |). */
+function isTableRow(line: string): boolean {
+  const trimmed = line.trim();
+  return trimmed.startsWith('|') && trimmed.endsWith('|');
+}
+
+/** Check if a table row is a separator row (| --- | --- |). */
+function isTableSeparator(line: string): boolean {
+  const trimmed = line.trim();
+  if (!trimmed.startsWith('|') || !trimmed.endsWith('|')) return false;
+  const inner = trimmed.slice(1, -1);
+  const cells = inner.split('|');
+  return cells.every((c) => /^\s*:?-{2,}:?\s*$/.test(c));
+}
+
+/** Parse cells from a table row string. */
+function parseTableCells(line: string): string[] {
+  const trimmed = line.trim();
+  const inner = trimmed.startsWith('|') ? trimmed.slice(1) : trimmed;
+  const withoutTrailing = inner.endsWith('|') ? inner.slice(0, -1) : inner;
+  return withoutTrailing.split('|').map((c) => c.trim());
+}
+
+// ---------------------------------------------------------------------------
+// Inline parsing
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse inline markdown (bold, italic, bold-italic, code, links, images)
+ * into a flat list of MarkdownNode children.
+ */
+function parseInline(text: string): MarkdownNode[] {
+  const nodes: MarkdownNode[] = [];
+  let i = 0;
+  let buffer = '';
+
+  const flush = () => {
+    if (buffer.length > 0) {
+      nodes.push({ type: 'text', content: buffer });
+      buffer = '';
+    }
+  };
+
+  while (i < text.length) {
+    // --- Images: ![alt](url) ---
+    if (text[i] === '!' && text[i + 1] === '[') {
+      const altClose = text.indexOf(']', i + 2);
+      if (altClose !== -1 && text[altClose + 1] === '(') {
+        const urlClose = text.indexOf(')', altClose + 2);
+        if (urlClose !== -1) {
+          flush();
+          const alt = text.slice(i + 2, altClose);
+          const url = text.slice(altClose + 2, urlClose);
+          nodes.push({ type: 'image', alt, url });
+          i = urlClose + 1;
+          continue;
+        }
+      }
+    }
+
+    // --- Links: [text](url) ---
+    if (text[i] === '[') {
+      const labelClose = text.indexOf(']', i + 1);
+      if (labelClose !== -1 && text[labelClose + 1] === '(') {
+        const urlClose = text.indexOf(')', labelClose + 2);
+        if (urlClose !== -1) {
+          flush();
+          const label = text.slice(i + 1, labelClose);
+          const url = text.slice(labelClose + 2, urlClose);
+          nodes.push({
+            type: 'link',
+            url,
+            children: parseInline(label),
+          });
+          i = urlClose + 1;
+          continue;
+        }
+      }
+    }
+
+    // --- Inline code: `...` ---
+    if (text[i] === '`') {
+      const end = text.indexOf('`', i + 1);
+      if (end !== -1) {
+        flush();
+        nodes.push({ type: 'code_inline', content: text.slice(i + 1, end) });
+        i = end + 1;
+        continue;
+      }
+    }
+
+    // --- Bold-italic: ***...*** or ___...___ ---
+    if (
+      (text[i] === '*' && text[i + 1] === '*' && text[i + 2] === '*') ||
+      (text[i] === '_' && text[i + 1] === '_' && text[i + 2] === '_')
+    ) {
+      const marker = text.slice(i, i + 3);
+      const end = text.indexOf(marker, i + 3);
+      if (end !== -1) {
+        flush();
+        nodes.push({
+          type: 'bold_italic',
+          children: parseInline(text.slice(i + 3, end)),
+        });
+        i = end + 3;
+        continue;
+      }
+    }
+
+    // --- Bold: **...** or __...__ ---
+    if (
+      (text[i] === '*' && text[i + 1] === '*') ||
+      (text[i] === '_' && text[i + 1] === '_')
+    ) {
+      const marker = text.slice(i, i + 2);
+      const end = text.indexOf(marker, i + 2);
+      if (end !== -1) {
+        flush();
+        nodes.push({
+          type: 'bold',
+          children: parseInline(text.slice(i + 2, end)),
+        });
+        i = end + 2;
+        continue;
+      }
+    }
+
+    // --- Italic: *...* or _..._ ---
+    if (text[i] === '*' || text[i] === '_') {
+      const marker = text[i];
+      const end = text.indexOf(marker, i + 1);
+      if (end !== -1 && end > i + 1) {
+        flush();
+        nodes.push({
+          type: 'italic',
+          children: parseInline(text.slice(i + 1, end)),
+        });
+        i = end + 1;
+        continue;
+      }
+    }
+
+    buffer += text[i];
+    i++;
+  }
+
+  flush();
+  return nodes;
+}
+
+// ---------------------------------------------------------------------------
+// Block-level parsing
+// ---------------------------------------------------------------------------
+
+/**
+ * Group consecutive lines of the same block type. Returns parsed nodes.
+ * `lines` must NOT include a trailing empty string from a final newline
+ * unless it is meaningful.
+ */
+function parseBlocks(lines: string[]): MarkdownNode[] {
+  const nodes: MarkdownNode[] = [];
+  let i = 0;
+
+  while (i < lines.length) {
+    const line = lines[i];
+
+    // --- Empty line: skip ---
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+
+    // --- Fenced code block ---
+    const fence = isFenceLine(line);
+    if (fence.isFence) {
+      const codeLines: string[] = [];
+      i++;
+      let closed = false;
+      while (i < lines.length) {
+        if (isFenceLine(lines[i]).isFence && lines[i].trim() === '```') {
+          closed = true;
+          i++;
+          break;
+        }
+        codeLines.push(lines[i]);
+        i++;
+      }
+      nodes.push({
+        type: 'code_block',
+        content: codeLines.join('\n'),
+        language: fence.language || undefined,
+      });
+      // If not closed, the outer caller marks isStreaming via lastSafeIndex
+      if (!closed) {
+        // Return what we have; caller will detect incomplete state
+      }
+      continue;
+    }
+
+    // --- Horizontal rule ---
+    if (isHorizontalRule(line)) {
+      nodes.push({ type: 'horizontal_rule' });
+      i++;
+      continue;
+    }
+
+    // --- Heading ---
+    const hl = headingLevel(line);
+    if (hl > 0) {
+      const content = line.replace(/^#{1,6}\s+/, '');
+      nodes.push({
+        type: 'heading',
+        level: hl,
+        children: parseInline(content),
+      });
+      i++;
+      continue;
+    }
+
+    // --- Table ---
+    if (isTableRow(line)) {
+      const tableRows: MarkdownNode[] = [];
+      let isHeader = true;
+      while (i < lines.length && isTableRow(lines[i])) {
+        if (isTableSeparator(lines[i])) {
+          // Separator row: skip it, next rows are body
+          isHeader = false;
+          i++;
+          continue;
+        }
+        const cellTexts = parseTableCells(lines[i]);
+        const cells: MarkdownNode[] = cellTexts.map((ct) => ({
+          type: 'table_cell' as const,
+          header: isHeader,
+          children: parseInline(ct),
+        }));
+        tableRows.push({ type: 'table_row', children: cells });
+        i++;
+      }
+      nodes.push({ type: 'table', children: tableRows });
+      continue;
+    }
+
+    // --- Blockquote ---
+    const bqContent = blockquoteContent(line);
+    if (bqContent !== null) {
+      const bqLines: string[] = [bqContent];
+      i++;
+      while (i < lines.length) {
+        const next = blockquoteContent(lines[i]);
+        if (next !== null) {
+          bqLines.push(next);
+          i++;
+        } else {
+          break;
+        }
+      }
+      nodes.push({
+        type: 'blockquote',
+        children: parseBlocks(bqLines),
+      });
+      continue;
+    }
+
+    // --- Unordered list ---
+    const ulContent = unorderedListItem(line);
+    if (ulContent !== null) {
+      const items: MarkdownNode[] = [];
+      while (i < lines.length) {
+        const itemContent = unorderedListItem(lines[i]);
+        if (itemContent !== null) {
+          items.push({
+            type: 'list_item',
+            children: parseInline(itemContent),
+          });
+          i++;
+        } else if (lines[i].trim() === '') {
+          // Allow a single blank line within a list
+          i++;
+        } else {
+          break;
+        }
+      }
+      nodes.push({ type: 'list', ordered: false, children: items });
+      continue;
+    }
+
+    // --- Ordered list ---
+    const olContent = orderedListItem(line);
+    if (olContent !== null) {
+      const items: MarkdownNode[] = [];
+      while (i < lines.length) {
+        const itemContent = orderedListItem(lines[i]);
+        if (itemContent !== null) {
+          items.push({
+            type: 'list_item',
+            children: parseInline(itemContent),
+          });
+          i++;
+        } else if (lines[i].trim() === '') {
+          i++;
+        } else {
+          break;
+        }
+      }
+      nodes.push({ type: 'list', ordered: true, children: items });
+      continue;
+    }
+
+    // --- Paragraph (default) ---
+    // Collect consecutive non-blank, non-special lines.
+    const paraLines: string[] = [line];
+    i++;
+    while (i < lines.length) {
+      const next = lines[i];
+      if (
+        next.trim() === '' ||
+        headingLevel(next) > 0 ||
+        isFenceLine(next).isFence ||
+        isHorizontalRule(next) ||
+        unorderedListItem(next) !== null ||
+        orderedListItem(next) !== null ||
+        blockquoteContent(next) !== null ||
+        isTableRow(next)
+      ) {
+        break;
+      }
+      paraLines.push(next);
+      i++;
+    }
+    nodes.push({
+      type: 'paragraph',
+      children: parseInline(paraLines.join('\n')),
+    });
+  }
+
+  return nodes;
+}
+
+// ---------------------------------------------------------------------------
+// Streaming-awareness helpers
+// ---------------------------------------------------------------------------
+
+/**
+ * Find the last "safe" index in the source text: the position up to which
+ * all blocks are fully closed.  An unclosed fenced code block means we
+ * are still streaming.
+ */
+function computeSafeIndex(text: string): { lastSafeIndex: number; isStreaming: boolean } {
+  let fenceOpen = false;
+  let lastSafeIndex = 0;
+  const lines = splitLines(text);
+  let charIndex = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const lineLength = lines[i].length;
+    const lineEnd = charIndex + lineLength + (i < lines.length - 1 ? 1 : 0); // +1 for \n
+
+    if (fenceOpen) {
+      if (lines[i].trim() === '```') {
+        fenceOpen = false;
+        lastSafeIndex = lineEnd;
+      }
+    } else {
+      const fence = isFenceLine(lines[i]);
+      if (fence.isFence) {
+        fenceOpen = true;
+      } else {
+        lastSafeIndex = lineEnd;
+      }
+    }
+
+    charIndex = lineEnd;
+  }
+
+  return { lastSafeIndex, isStreaming: fenceOpen };
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Parse a complete markdown string into an AST.
+ * Suitable for non-streaming use cases.
+ */
+export function parseMarkdown(text: string): MarkdownNode[] {
+  const lines = splitLines(text);
+  return parseBlocks(lines);
+}
+
+/**
+ * Incremental streaming-aware parse.
+ *
+ * When `previousResult` is supplied the parser can skip re-parsing blocks
+ * that haven't changed (those before `previousResult.lastSafeIndex`).
+ * In practice, for simplicity in v1, we re-parse the full text but still
+ * return `isStreaming` and `lastSafeIndex` so the renderer can optimise.
+ */
+export function parseMarkdownIncremental(
+  text: string,
+  _previousResult?: ParseResult,
+): ParseResult {
+  const { lastSafeIndex, isStreaming } = computeSafeIndex(text);
+  const lines = splitLines(text);
+  const nodes = parseBlocks(lines);
+
+  return { nodes, isStreaming, lastSafeIndex };
+}

package/src/streaming/renderers/BlockquoteRenderer.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import type { MarkdownNode } from '../parser';
+import { renderNode } from './renderNode';
+
+export interface BlockquoteRendererProps {
+  node: MarkdownNode;
+}
+
+export const BlockquoteRenderer = React.memo(function BlockquoteRenderer({
+  node,
+}: BlockquoteRendererProps) {
+  const theme = useAIElementsTheme();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderLeftColor: theme.colors.border,
+          backgroundColor: theme.colors.muted,
+          borderRadius: theme.radius.sm,
+        },
+      ]}
+    >
+      {(node.children ?? []).map((child, index) =>
+        renderNode(child, `bq-${index}`),
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    borderLeftWidth: 3,
+    paddingLeft: 12,
+    paddingVertical: 8,
+    paddingRight: 8,
+    marginVertical: 8,
+  },
+});

package/src/streaming/renderers/CodeRenderer.tsx

@@ -0,0 +1,158 @@
+import React, { useCallback } from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  Pressable,
+  StyleSheet,
+  type TextStyle,
+} from 'react-native';
+import { useAIElementsTheme } from '../../theme';
+import { useClipboard } from '../../hooks/useClipboard';
+import type { MarkdownNode } from '../parser';
+
+export interface CodeRendererProps {
+  node: MarkdownNode;
+}
+
+export const CodeRenderer = React.memo(function CodeRenderer({
+  node,
+}: CodeRendererProps) {
+  const theme = useAIElementsTheme();
+  const { copy, copied } = useClipboard();
+
+  const handleCopy = useCallback(() => {
+    if (node.content) {
+      copy(node.content);
+    }
+  }, [copy, node.content]);
+
+  // --- Inline code ---
+  if (node.type === 'code_inline') {
+    const inlineStyle: TextStyle = {
+      fontFamily: theme.typography.monoFontFamily,
+      fontSize: theme.typography.fontSize.sm,
+      backgroundColor: theme.colors.muted,
+      color: theme.colors.foreground,
+      borderRadius: theme.radius.sm,
+      paddingHorizontal: 4,
+      paddingVertical: 1,
+    };
+    return <Text style={inlineStyle}>{node.content}</Text>;
+  }
+
+  // --- Code block ---
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: theme.colors.muted,
+          borderRadius: theme.radius.md,
+          borderColor: theme.colors.border,
+        },
+      ]}
+    >
+      {/* Header with language + copy button */}
+      <View
+        style={[
+          styles.header,
+          {
+            borderBottomColor: theme.colors.border,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.language,
+            {
+              color: theme.colors.mutedForeground,
+              fontFamily: theme.typography.monoFontFamily,
+              fontSize: theme.typography.fontSize.xs,
+            },
+          ]}
+        >
+          {node.language ?? ''}
+        </Text>
+        <Pressable
+          onPress={handleCopy}
+          hitSlop={8}
+          style={({ pressed }) => [
+            styles.copyButton,
+            {
+              backgroundColor: pressed
+                ? theme.colors.border
+                : 'transparent',
+              borderRadius: theme.radius.sm,
+            },
+          ]}
+        >
+          <Text
+            style={{
+              color: theme.colors.mutedForeground,
+              fontSize: theme.typography.fontSize.xs,
+              fontFamily: theme.typography.fontFamily,
+            }}
+          >
+            {copied ? 'Copied!' : 'Copy'}
+          </Text>
+        </Pressable>
+      </View>
+
+      {/* Code content */}
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={styles.scrollView}
+        contentContainerStyle={styles.scrollContent}
+      >
+        <Text
+          style={[
+            styles.code,
+            {
+              color: theme.colors.foreground,
+              fontFamily: theme.typography.monoFontFamily,
+              fontSize: theme.typography.fontSize.sm,
+              lineHeight:
+                theme.typography.fontSize.sm * theme.typography.lineHeight.normal,
+            },
+          ]}
+        >
+          {node.content}
+        </Text>
+      </ScrollView>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 8,
+    borderWidth: 1,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+  },
+  language: {
+    textTransform: 'lowercase',
+  },
+  copyButton: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  scrollView: {
+    flexGrow: 0,
+  },
+  scrollContent: {
+    padding: 12,
+  },
+  code: {
+    // fontFamily and fontSize applied dynamically
+  },
+});