@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/trace.jsx

@@ -0,0 +1,728 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize, formatElapsed } from "./chat-text";
+import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger, useCollapsible } from "./collapsible";
+import { ResponseText } from "./response-text";
+import { Shimmer } from "./shimmer";
+
+// One agent step as one line: icon, title, optional faded description and an
+// optional fold. Reasoning, tool calls, grouped calls and to-dos can all
+// render through these parts, as on the web (`trace.tsx`). The web icon
+// crossfade (`iconKey`) is not ported: the icon swaps at once.
+
+/** Text and icon colour of a line: muted, or the danger colour for an error (web `text-destructive`). */
+export function traceLineColor(status, scheme) {
+  return status === "error" ? palette.danger[scheme] : tokens.color.muted[scheme];
+}
+
+// Native text and icons do not inherit a colour, so the line hands its own down.
+const TraceLineColorContext = createContext(undefined);
+function useTraceColor() {
+  const scheme = useScheme();
+  return useContext(TraceLineColorContext) ?? tokens.color.muted[scheme];
+}
+
+/**
+ * A column of trace lines (web `flex w-full flex-col gap-2`). Each line is 28
+ * high (its `py-1` around the 20 text) with no gap, so the rows keep the web
+ * 28 pitch and each is its whole tap area, without slop over its neighbours.
+ */
+export function AgentTrace(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("w-full min-w-0", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+/** One line, 28 high (`py-1`): a row of icon, title and description. `pending` fades it to 60%, `error` turns it the danger colour. */
+export function AgentTraceLine(t0) {
+  const $ = _c(22);
+  let className;
+  let props;
+  let status;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      status,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = status;
+    $[4] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    status = $[3];
+    style = $[4];
+  }
+  const scheme = useScheme();
+  let t1;
+  if ($[5] !== scheme || $[6] !== status) {
+    t1 = traceLineColor(status, scheme);
+    $[5] = scheme;
+    $[6] = status;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== className) {
+    t2 = cn("min-w-0 max-w-full shrink flex-row items-center gap-2 py-1", className);
+    $[8] = className;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let t3;
+  if ($[10] !== status) {
+    t3 = status === "pending" ? {
+      opacity: 0.6
+    } : null;
+    $[10] = status;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== style || $[13] !== t3) {
+    t4 = [t3, style];
+    $[12] = style;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== props || $[16] !== t2 || $[17] !== t4) {
+    t5 = <View className={t2} style={t4} {...props} />;
+    $[15] = props;
+    $[16] = t2;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== t1 || $[20] !== t5) {
+    t6 = <TraceLineColorContext.Provider value={t1}>{t5}</TraceLineColorContext.Provider>;
+    $[19] = t1;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  return t6;
+}
+/** The 16 icon box at the start of a line. Hidden from assistive tech, as the web `aria-hidden`. */
+export function AgentTraceIcon(t0) {
+  const $ = _c(13);
+  const {
+    icon: Icon,
+    children,
+    className
+  } = t0;
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  const size = largerText ? 20 : 16;
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("shrink-0 items-center justify-center", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== size) {
+    t2 = {
+      width: size,
+      height: size
+    };
+    $[2] = size;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== Icon || $[5] !== children || $[6] !== color || $[7] !== size) {
+    t3 = Icon ? <Icon size={size} color={color} /> : children;
+    $[4] = Icon;
+    $[5] = children;
+    $[6] = color;
+    $[7] = size;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3) {
+    t4 = <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" className={t1} style={t2}>{t3}</View>;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+/** The step title, on one line, cut off at the end. */
+export function AgentTraceTitle(t0) {
+  const $ = _c(20);
+  const {
+    children,
+    shimmer: t1,
+    className
+  } = t0;
+  const shimmer = t1 === undefined ? false : t1;
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  if (shimmer) {
+    let t2;
+    if ($[0] !== children || $[1] !== className) {
+      t2 = <Shimmer duration={2.5} numberOfLines={1} className={className}>{children}</Shimmer>;
+      $[0] = children;
+      $[1] = className;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    return t2;
+  }
+  let T0;
+  let t2;
+  let t3;
+  let t4;
+  if ($[3] !== className || $[4] !== largerText) {
+    const size = chatTextSize("small", largerText);
+    T0 = Text;
+    t3 = 1;
+    t4 = cn(size, "min-w-0 shrink font-instrument-sans", className);
+    t2 = sizeStyle(size);
+    $[3] = className;
+    $[4] = largerText;
+    $[5] = T0;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    T0 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== color) {
+    t5 = {
+      color
+    };
+    $[9] = color;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== t2 || $[12] !== t5) {
+    t6 = [t2, t5];
+    $[11] = t2;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== T0 || $[15] !== children || $[16] !== t3 || $[17] !== t4 || $[18] !== t6) {
+    t7 = <T0 numberOfLines={t3} className={t4} style={t6}>{children}</T0>;
+    $[14] = T0;
+    $[15] = children;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  return t7;
+}
+
+/** Faded detail after the title, such as "3 files" or "12s", in tabular figures (web `opacity-70 tabular-nums`). */
+export function AgentTraceDescription(t0) {
+  const $ = _c(18);
+  const {
+    children,
+    className
+  } = t0;
+  const color = useTraceColor();
+  const largerText = useLargerText();
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== className || $[1] !== largerText) {
+    const size = chatTextSize("small", largerText);
+    T0 = Text;
+    t2 = 1;
+    t3 = cn(size, "shrink-0 font-instrument-sans", className);
+    t1 = sizeStyle(size);
+    $[0] = className;
+    $[1] = largerText;
+    $[2] = T0;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    T0 = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = ["tabular-nums"];
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== color) {
+    t5 = {
+      color,
+      opacity: 0.7,
+      fontVariant: t4
+    };
+    $[7] = color;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== t1 || $[10] !== t5) {
+    t6 = [t1, t5];
+    $[9] = t1;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== T0 || $[13] !== children || $[14] !== t2 || $[15] !== t3 || $[16] !== t6) {
+    t7 = <T0 numberOfLines={t2} className={t3} style={t6}>{children}</T0>;
+    $[12] = T0;
+    $[13] = children;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t6;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  return t7;
+}
+
+/** A line with a fold (web `flex w-full min-w-0 flex-col`). Spread `useStreamingDisclosure(isStreaming)` on it to follow a stream. */
+export function AgentTraceCollapsible(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("w-full min-w-0", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <Collapsible className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+/** No slop: the 28 high line is the whole target, as trace lines stack with no gap. */
+const LINE_SLOP = {
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0
+};
+
+/** The chevron's slop: 4 back toward the line, 14 on past it (a 34 wide target), none above or below. */
+const CHEVRON_SLOP = {
+  top: 0,
+  bottom: 0,
+  left: 4,
+  right: 14
+};
+
+/**
+ * The line as a toggle, with a chevron after it that turns down when open.
+ * The trigger stretches to the line's 28 height and takes no slop above or
+ * below, so a tap under one line never opens the next.
+ */
+export function AgentTraceCollapsibleTrigger(t0) {
+  const $ = _c(32);
+  let children;
+  let className;
+  let props;
+  let trailing;
+  if ($[0] !== t0) {
+    ({
+      children,
+      trailing,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = trailing;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    trailing = $[4];
+  }
+  const {
+    open,
+    setOpen
+  } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const iconSize = largerText ? 20 : 16;
+  const t1 = tokens.color.muted[scheme];
+  let t2;
+  if ($[5] !== iconSize || $[6] !== open || $[7] !== t1) {
+    t2 = <CollapsibleChevron open={open} variant="right" size={iconSize} color={t1} />;
+    $[5] = iconSize;
+    $[6] = open;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const chevron = t2;
+  if (trailing === undefined) {
+    let t3;
+    if ($[9] !== className) {
+      t3 = cn("max-w-full flex-row items-center gap-1 self-start", className);
+      $[9] = className;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    let t4;
+    if ($[11] !== chevron || $[12] !== children || $[13] !== props || $[14] !== t3) {
+      t4 = <CollapsibleTrigger hitSlop={LINE_SLOP} className={t3} {...props}>{children}{chevron}</CollapsibleTrigger>;
+      $[11] = chevron;
+      $[12] = children;
+      $[13] = props;
+      $[14] = t3;
+      $[15] = t4;
+    } else {
+      t4 = $[15];
+    }
+    return t4;
+  }
+  let t3;
+  if ($[16] !== className) {
+    t3 = cn("max-w-full flex-row items-center gap-2 self-start", className);
+    $[16] = className;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+  let t4;
+  if ($[18] !== children || $[19] !== props) {
+    t4 = <CollapsibleTrigger hitSlop={LINE_SLOP} className="min-w-0 shrink flex-row items-center self-stretch" {...props}>{children}</CollapsibleTrigger>;
+    $[18] = children;
+    $[19] = props;
+    $[20] = t4;
+  } else {
+    t4 = $[20];
+  }
+  let t5;
+  if ($[21] !== open || $[22] !== setOpen) {
+    t5 = () => setOpen(!open);
+    $[21] = open;
+    $[22] = setOpen;
+    $[23] = t5;
+  } else {
+    t5 = $[23];
+  }
+  let t6;
+  if ($[24] !== chevron || $[25] !== t5) {
+    t6 = <Pressable accessible={false} importantForAccessibility="no-hide-descendants" hitSlop={CHEVRON_SLOP} onPress={t5} className="self-stretch justify-center">{chevron}</Pressable>;
+    $[24] = chevron;
+    $[25] = t5;
+    $[26] = t6;
+  } else {
+    t6 = $[26];
+  }
+  let t7;
+  if ($[27] !== t3 || $[28] !== t4 || $[29] !== t6 || $[30] !== trailing) {
+    t7 = <View className={t3}>{t4}{trailing}{t6}</View>;
+    $[27] = t3;
+    $[28] = t4;
+    $[29] = t6;
+    $[30] = trailing;
+    $[31] = t7;
+  } else {
+    t7 = $[31];
+  }
+  return t7;
+}
+
+/**
+ * The folded body, indented behind a rail that starts under the centre of the
+ * line icon (web `ml-[calc(--spacing(2)-1px)] border-l pl-4`). A string child
+ * is drawn as muted `ResponseText`.
+ */
+export function AgentTraceCollapsibleContent(t0) {
+  const $ = _c(20);
+  let children;
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+  }
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const iconSize = largerText ? 20 : 16;
+  let t1;
+  if ($[5] !== className) {
+    t1 = cn("mb-2 mt-1 min-w-0 pl-4 pr-1", className);
+    $[5] = className;
+    $[6] = t1;
+  } else {
+    t1 = $[6];
+  }
+  const t2 = iconSize / 2 - 1;
+  const t3 = tokens.color.border[scheme];
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = {
+      marginLeft: t2,
+      borderLeftWidth: 1,
+      borderLeftColor: t3
+    };
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== style || $[11] !== t4) {
+    t5 = [t4, style];
+    $[10] = style;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== children) {
+    t6 = typeof children === "string" ? <ResponseText size="small" tone="muted">{children}</ResponseText> : children;
+    $[13] = children;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== props || $[16] !== t1 || $[17] !== t5 || $[18] !== t6) {
+    t7 = <CollapsibleContent><View className={t1} style={t5} {...props}>{t6}</View></CollapsibleContent>;
+    $[15] = props;
+    $[16] = t1;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  return t7;
+}
+/**
+ * A settled turn folded behind one line, as the web `ActivityTasks` in its
+ * folded (Codex-style) mode: "Worked for …" over a hairline
+ * 6 below the text (web `border-b border-border pb-1.5`: the line's own 4 and
+ * 2 more), closed by default, and the steps in an
+ * `AgentTrace` 8 below when open.
+ */
+export function AgentTraceFold(t0) {
+  const $ = _c(27);
+  let children;
+  let className;
+  let duration;
+  let props;
+  let seconds;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      seconds,
+      duration,
+      children,
+      defaultOpen: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = duration;
+    $[4] = props;
+    $[5] = seconds;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    duration = $[3];
+    props = $[4];
+    seconds = $[5];
+    t1 = $[6];
+  }
+  const defaultOpen = t1 === undefined ? false : t1;
+  const scheme = useScheme();
+  let t2;
+  if ($[7] !== duration || $[8] !== seconds) {
+    t2 = duration ?? formatElapsed(seconds ?? 0);
+    $[7] = duration;
+    $[8] = seconds;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  const elapsed = t2;
+  let t3;
+  if ($[10] !== className) {
+    t3 = cn("w-full min-w-0", className);
+    $[10] = className;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const t4 = tokens.color.border[scheme];
+  let t5;
+  if ($[12] !== t4) {
+    t5 = {
+      borderBottomWidth: 1,
+      borderBottomColor: t4,
+      paddingBottom: 2
+    };
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const t6 = `Worked for ${elapsed}`;
+  let t7;
+  if ($[14] !== t6) {
+    t7 = <AgentTraceCollapsibleTrigger><AgentTraceLine><AgentTraceTitle>{t6}</AgentTraceTitle></AgentTraceLine></AgentTraceCollapsibleTrigger>;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== t5 || $[17] !== t7) {
+    t8 = <View style={t5}>{t7}</View>;
+    $[16] = t5;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== children) {
+    t9 = <CollapsibleContent><AgentTrace className="mt-1">{children}</AgentTrace></CollapsibleContent>;
+    $[19] = children;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== defaultOpen || $[22] !== props || $[23] !== t3 || $[24] !== t8 || $[25] !== t9) {
+    t10 = <Collapsible className={t3} defaultOpen={defaultOpen} {...props}>{t8}{t9}</Collapsible>;
+    $[21] = defaultOpen;
+    $[22] = props;
+    $[23] = t3;
+    $[24] = t8;
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  return t10;
+}