@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/code-block.jsx

@@ -0,0 +1,574 @@
+import { c as _c } from "react/compiler-runtime";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { ScrollView, Text, View } from "react-native";
+import { IconCheck, IconCopy, IconTextWrap } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { GITHUB_CODE_COLORS, SCRIPT_LANGUAGES, SHELL_LANGUAGES, codeTokenColor, loadPrismReactRenderer, scriptTokens, shellTokens } from "../highlight";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize } from "./chat-text";
+import { ChatIconButton } from "./icon-button";
+
+/**
+ * `variant="markdown"`, the web `.markdown-code` (`MarkdownCodeBlock`): the header is `0.25rem 0.3rem 0 0.9rem` around a 28
+ * line (32 high), the code `0.25rem 0.9rem 0.8rem` at 13 with line-height
+ * 1.55, and the header actions are `icon-xs` (28) buttons.
+ */
+export const CODE_BLOCK_METRICS = {
+  header: {
+    minHeight: 32,
+    paddingTop: 4,
+    paddingLeft: 14,
+    paddingRight: 5
+  },
+  code: {
+    paddingTop: 4,
+    paddingHorizontal: 14,
+    paddingBottom: 13
+  },
+  text: {
+    fontSize: 13,
+    lineHeight: 13 * 1.55
+  }
+};
+/** Ghost copy button: the copy icon, then a check for `timeout` after a copy. */
+export function CodeBlockCopyButton(t0) {
+  const $ = _c(15);
+  const {
+    code,
+    onCopy,
+    timeout: t1,
+    label: t2,
+    size,
+    slop
+  } = t0;
+  const timeout = t1 === undefined ? 2000 : t1;
+  const label = t2 === undefined ? "Copy code" : t2;
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(undefined);
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => () => clearTimeout(timer.current);
+    t4 = [];
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  useEffect(t3, t4);
+  let t5;
+  if ($[2] !== code || $[3] !== copied || $[4] !== onCopy || $[5] !== timeout) {
+    t5 = async () => {
+      if (copied) {
+        return;
+      }
+      try {
+        await onCopy(code);
+      } catch {
+        return;
+      }
+      setCopied(true);
+      timer.current = setTimeout(() => setCopied(false), timeout);
+    };
+    $[2] = code;
+    $[3] = copied;
+    $[4] = onCopy;
+    $[5] = timeout;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const copy = t5;
+  const t6 = copied ? IconCheck : IconCopy;
+  const t7 = copied ? "Copied" : label;
+  let t8;
+  if ($[7] !== copy) {
+    t8 = () => void copy();
+    $[7] = copy;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  let t9;
+  if ($[9] !== size || $[10] !== slop || $[11] !== t6 || $[12] !== t7 || $[13] !== t8) {
+    t9 = <ChatIconButton icon={t6} label={t7} size={size} slop={slop} onPress={t8} />;
+    $[9] = size;
+    $[10] = slop;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  return t9;
+}
+/**
+ * Code on the flat panel at radius 16, selectable, long lines scrolling
+ * sideways. With `prism-react-renderer` installed and a `language`, tokens
+ * take the GitHub colours of the scheme.
+ *
+ * `default` is the web `CodeBlock` (`ai-elements/code-block.tsx`): `text-sm`
+ * code in `p-4`, and a `px-3` header with the language and a copy button when
+ * either is given. `markdown` is the web `MarkdownCodeBlock`, which `Markdown`
+ * draws for fenced code: 13 / 20.15 code, a 32 header with `icon-xs` actions,
+ * a wrap toggle ("Wrap long lines", foreground while on) and then copy.
+ */
+/**
+ * Android fades the code at a side with more to scroll (there is no scroll
+ * bar), so a cut line reads as "scroll sideways". iOS ignores it.
+ */
+const CODE_FADING_EDGE = 24;
+export function CodeBlock(t0) {
+  const $ = _c(21);
+  const {
+    code,
+    language,
+    highlight: t1,
+    onCopy,
+    variant: t2,
+    className
+  } = t0;
+  const highlight = t1 === undefined ? true : t1;
+  const variant = t2 === undefined ? "default" : t2;
+  const parts = useCodeParts(code, language, highlight, variant === "markdown");
+  if (variant === "markdown") {
+    let t3;
+    if ($[0] !== className || $[1] !== code || $[2] !== language || $[3] !== onCopy || $[4] !== parts) {
+      t3 = <MarkdownCodeBlock code={code} language={language} onCopy={onCopy} className={className} parts={parts} />;
+      $[0] = className;
+      $[1] = code;
+      $[2] = language;
+      $[3] = onCopy;
+      $[4] = parts;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    return t3;
+  }
+  const header = Boolean(language || onCopy);
+  let t3;
+  if ($[6] !== className) {
+    t3 = cn("w-full overflow-hidden", className);
+    $[6] = className;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== code || $[9] !== header || $[10] !== onCopy || $[11] !== parts.label) {
+    t4 = header ? <View className="min-h-11 flex-row items-center justify-between pl-3 pr-1.5">{parts.label}{onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} /> : null}</View> : null;
+    $[8] = code;
+    $[9] = header;
+    $[10] = onCopy;
+    $[11] = parts.label;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const t5 = header ? "px-4 pb-4" : "p-4";
+  let t6;
+  if ($[13] !== parts.text || $[14] !== t5) {
+    t6 = <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} fadingEdgeLength={CODE_FADING_EDGE} contentContainerClassName={t5}>{parts.text}</ScrollView>;
+    $[13] = parts.text;
+    $[14] = t5;
+    $[15] = t6;
+  } else {
+    t6 = $[15];
+  }
+  let t7;
+  if ($[16] !== parts.panel || $[17] !== t3 || $[18] !== t4 || $[19] !== t6) {
+    t7 = <View className={t3} style={parts.panel}>{t4}{t6}</View>;
+    $[16] = parts.panel;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t6;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
+}
+
+/** The web `MarkdownCodeBlock`: `CodeBlock` with `variant="markdown"`. A component of its own for the wrap state. */
+function MarkdownCodeBlock(t0) {
+  const $ = _c(21);
+  const {
+    code,
+    language,
+    onCopy,
+    className,
+    parts
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [wrap, setWrap] = useState(false);
+  const header = Boolean(language || onCopy);
+  const {
+    header: headerBox,
+    code: codeBox
+  } = CODE_BLOCK_METRICS;
+  let t1;
+  if ($[0] !== header) {
+    t1 = header ? codeBox : {
+      ...codeBox,
+      paddingTop: codeBox.paddingBottom
+    };
+    $[0] = header;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const padding = t1;
+  let t2;
+  if ($[2] !== className) {
+    t2 = cn("w-full overflow-hidden", className);
+    $[2] = className;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== code || $[5] !== header || $[6] !== largerText || $[7] !== onCopy || $[8] !== parts.label || $[9] !== scheme || $[10] !== wrap) {
+    t3 = header ? <View className={cn("flex-row items-center justify-between gap-2", largerText && "min-h-11")} style={largerText ? {
+      paddingLeft: headerBox.paddingLeft,
+      paddingRight: headerBox.paddingRight
+    } : headerBox}>{parts.label}<View className="flex-row items-center gap-0.5"><ChatIconButton icon={IconTextWrap} label={wrap ? "Scroll long lines" : "Wrap long lines"} size="xs" iconColor={wrap ? tokens.color.foreground[scheme] : tokens.color.muted[scheme]} accessibilityState={{
+          selected: wrap
+        }} slop={{
+          left: 8,
+          right: 0
+        }} onPress={() => setWrap(!wrap)} />{onCopy ? <CodeBlockCopyButton code={code} onCopy={onCopy} size="xs" slop={{
+          left: 0,
+          right: 5
+        }} /> : null}</View></View> : null;
+    $[4] = code;
+    $[5] = header;
+    $[6] = largerText;
+    $[7] = onCopy;
+    $[8] = parts.label;
+    $[9] = scheme;
+    $[10] = wrap;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== padding || $[13] !== parts.text || $[14] !== wrap) {
+    t4 = wrap ? <View style={padding}>{parts.text}</View> : <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} fadingEdgeLength={CODE_FADING_EDGE} contentContainerStyle={padding}>{parts.text}</ScrollView>;
+    $[12] = padding;
+    $[13] = parts.text;
+    $[14] = wrap;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== parts.panel || $[17] !== t2 || $[18] !== t3 || $[19] !== t4) {
+    t5 = <View className={t2} style={parts.panel}>{t3}{t4}</View>;
+    $[16] = parts.panel;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  return t5;
+}
+
+/** The panel style, the language label and the code text both code blocks draw. */
+function useCodeParts(code, language, highlight, markdown) {
+  const $ = _c(42);
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let t0;
+  let t1;
+  let t2;
+  if ($[0] !== code || $[1] !== highlight || $[2] !== language || $[3] !== largerText || $[4] !== markdown || $[5] !== scheme) {
+    const size = chatTextSize("small", largerText);
+    const caption = chatTextSize("caption", largerText);
+    const t3 = markdown && !largerText ? CODE_BLOCK_METRICS.text : sizeStyle(size);
+    let t4;
+    if ($[10] !== scheme) {
+      t4 = textStyle("foreground", scheme);
+      $[10] = scheme;
+      $[11] = t4;
+    } else {
+      t4 = $[11];
+    }
+    let t5;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = {
+        fontFamily: MONO_FONT
+      };
+      $[12] = t5;
+    } else {
+      t5 = $[12];
+    }
+    let t6;
+    if ($[13] !== t3 || $[14] !== t4) {
+      t6 = [t3, t4, t5];
+      $[13] = t3;
+      $[14] = t4;
+      $[15] = t6;
+    } else {
+      t6 = $[15];
+    }
+    let t7;
+    if ($[16] !== code || $[17] !== highlight || $[18] !== language || $[19] !== scheme) {
+      t7 = highlight && language ? <HighlightedCode code={code} language={language} scheme={scheme} /> : code;
+      $[16] = code;
+      $[17] = highlight;
+      $[18] = language;
+      $[19] = scheme;
+      $[20] = t7;
+    } else {
+      t7 = $[20];
+    }
+    let t8;
+    if ($[21] !== size || $[22] !== t6 || $[23] !== t7) {
+      t8 = <Text selectable={true} className={size} style={t6}>{t7}</Text>;
+      $[21] = size;
+      $[22] = t6;
+      $[23] = t7;
+      $[24] = t8;
+    } else {
+      t8 = $[24];
+    }
+    const text = t8;
+    t2 = text;
+    T0 = Text;
+    t1 = caption;
+    t0 = sizeStyle(caption);
+    $[0] = code;
+    $[1] = highlight;
+    $[2] = language;
+    $[3] = largerText;
+    $[4] = markdown;
+    $[5] = scheme;
+    $[6] = T0;
+    $[7] = t0;
+    $[8] = t1;
+    $[9] = t2;
+  } else {
+    T0 = $[6];
+    t0 = $[7];
+    t1 = $[8];
+    t2 = $[9];
+  }
+  let t3;
+  if ($[25] !== scheme) {
+    t3 = textStyle("muted", scheme);
+    $[25] = scheme;
+    $[26] = t3;
+  } else {
+    t3 = $[26];
+  }
+  let t4;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      fontFamily: MONO_FONT
+    };
+    $[27] = t4;
+  } else {
+    t4 = $[27];
+  }
+  let t5;
+  if ($[28] !== t0 || $[29] !== t3) {
+    t5 = [t0, t3, t4];
+    $[28] = t0;
+    $[29] = t3;
+    $[30] = t5;
+  } else {
+    t5 = $[30];
+  }
+  const t6 = language ?? "";
+  let t7;
+  if ($[31] !== T0 || $[32] !== t1 || $[33] !== t5 || $[34] !== t6) {
+    t7 = <T0 className={t1} style={t5}>{t6}</T0>;
+    $[31] = T0;
+    $[32] = t1;
+    $[33] = t5;
+    $[34] = t6;
+    $[35] = t7;
+  } else {
+    t7 = $[35];
+  }
+  const t8 = tokens.color.surfaceSecondary[scheme];
+  let t9;
+  if ($[36] !== t8) {
+    t9 = {
+      borderRadius: tokens.radius.lg,
+      backgroundColor: t8
+    };
+    $[36] = t8;
+    $[37] = t9;
+  } else {
+    t9 = $[37];
+  }
+  let t10;
+  if ($[38] !== t2 || $[39] !== t7 || $[40] !== t9) {
+    t10 = {
+      text: t2,
+      label: t7,
+      panel: t9
+    };
+    $[38] = t2;
+    $[39] = t7;
+    $[40] = t9;
+    $[41] = t10;
+  } else {
+    t10 = $[41];
+  }
+  return t10;
+}
+
+/**
+ * Coloured runs as nested `Text` spans, lines joined by newlines. They
+ * inherit the size and font of the code `Text` around them.
+ */
+function CodeRuns(t0) {
+  const $ = _c(7);
+  const {
+    lines,
+    scheme
+  } = t0;
+  let t1;
+  if ($[0] !== lines || $[1] !== scheme) {
+    let t2;
+    if ($[3] !== scheme) {
+      t2 = (line, lineIndex) => <Fragment key={lineIndex}>{lineIndex > 0 ? "\n" : null}{line.map((token, tokenIndex) => <Text key={tokenIndex} style={{
+          color: GITHUB_CODE_COLORS[scheme][token.role]
+        }}>{token.content}</Text>)}</Fragment>;
+      $[3] = scheme;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    t1 = lines.map(t2);
+    $[0] = lines;
+    $[1] = scheme;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[5] !== t1) {
+    t2 = <>{t1}</>;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}
+
+/**
+ * The code in the web's Shiki colours: shell blocks through `shellTokens`
+ * (no peer needed), other languages through Prism, the JavaScript family
+ * recoloured where Prism and Shiki disagree (`scriptTokens`). Without
+ * `prism-react-renderer` a non-shell block is the plain code.
+ */
+function HighlightedCode(t0) {
+  const $ = _c(19);
+  const {
+    code,
+    language,
+    scheme
+  } = t0;
+  let lang;
+  let source;
+  let t1;
+  if ($[0] !== code || $[1] !== language || $[2] !== scheme) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      lang = language.toLowerCase();
+      source = code.replace(/\n$/, "");
+      if (SHELL_LANGUAGES.has(lang)) {
+        t1 = <CodeRuns lines={shellTokens(source)} scheme={scheme} />;
+        break bb0;
+      }
+    }
+    $[0] = code;
+    $[1] = language;
+    $[2] = scheme;
+    $[3] = lang;
+    $[4] = source;
+    $[5] = t1;
+  } else {
+    lang = $[3];
+    source = $[4];
+    t1 = $[5];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  const Highlight = loadPrismReactRenderer()?.Highlight;
+  if (!Highlight) {
+    return code;
+  }
+  const t2 = GITHUB_CODE_COLORS[scheme];
+  let t3;
+  if ($[6] !== t2.plain) {
+    t3 = {
+      color: t2.plain
+    };
+    $[6] = t2.plain;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = [];
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== t3) {
+    t5 = {
+      plain: t3,
+      styles: t4
+    };
+    $[9] = t3;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== lang || $[12] !== scheme) {
+    t6 = t7 => {
+      const {
+        tokens
+      } = t7;
+      return SCRIPT_LANGUAGES.has(lang) ? <CodeRuns lines={scriptTokens(tokens)} scheme={scheme} /> : <>{tokens.map((line, lineIndex) => <Fragment key={lineIndex}>{lineIndex > 0 ? "\n" : null}{line.map((token, tokenIndex) => token.empty ? null : <Text key={tokenIndex} style={{
+            color: codeTokenColor(token.types, scheme)
+          }}>{token.content}</Text>)}</Fragment>)}</>;
+    };
+    $[11] = lang;
+    $[12] = scheme;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== lang || $[15] !== source || $[16] !== t5 || $[17] !== t6) {
+    t7 = <Highlight code={source} language={lang} theme={t5}>{t6}</Highlight>;
+    $[14] = lang;
+    $[15] = source;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  return t7;
+}