@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/reasoning.jsx

@@ -0,0 +1,446 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Text, View } from "react-native";
+import { IconBrain } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize, formatElapsed } from "./chat-text";
+import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger } from "./collapsible";
+import { ResponseText } from "./response-text";
+import { Shimmer } from "./shimmer";
+const ReasoningContext = createContext(null);
+export function useReasoning() {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+}
+const AUTO_CLOSE_DELAY_MS = 1000;
+/**
+ * The AI's reasoning, folded. As on the web it opens when streaming starts,
+ * times the stream, and closes once, a second after it stops. Unlike the web,
+ * a reader can close it while it streams (the web reopens it), and a toggle
+ * after the stream cancels the pending close, as `useStreamingDisclosure`.
+ */
+export function Reasoning(t0) {
+  const $ = _c(43);
+  let className;
+  let defaultOpen;
+  let duration;
+  let onOpenChange;
+  let open;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      isStreaming: t1,
+      open,
+      defaultOpen,
+      onOpenChange,
+      duration,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = defaultOpen;
+    $[3] = duration;
+    $[4] = onOpenChange;
+    $[5] = open;
+    $[6] = props;
+    $[7] = t1;
+  } else {
+    className = $[1];
+    defaultOpen = $[2];
+    duration = $[3];
+    onOpenChange = $[4];
+    open = $[5];
+    props = $[6];
+    t1 = $[7];
+  }
+  const isStreaming = t1 === undefined ? false : t1;
+  const t2 = defaultOpen ?? isStreaming;
+  let t3;
+  if ($[8] !== onOpenChange || $[9] !== open || $[10] !== t2) {
+    t3 = {
+      value: open,
+      defaultValue: t2,
+      onChange: onOpenChange
+    };
+    $[8] = onOpenChange;
+    $[9] = open;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  const [isOpen, setOpen] = useControllableState(t3);
+  const [measured, setMeasured] = useState(undefined);
+  const [closeDue, setCloseDue] = useState(false);
+  let t4;
+  if ($[12] !== isStreaming) {
+    t4 = isStreaming ? Date.now() : null;
+    $[12] = isStreaming;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  const startedAt = useRef(t4);
+  let t5;
+  if ($[14] !== defaultOpen || $[15] !== isOpen || $[16] !== isStreaming || $[17] !== setOpen) {
+    t5 = () => {
+      if (isStreaming) {
+        if (startedAt.current === null) {
+          startedAt.current = Date.now();
+        }
+        if (!isOpen && defaultOpen !== false) {
+          setOpen(true);
+        }
+        setCloseDue(false);
+      } else {
+        if (startedAt.current !== null) {
+          setMeasured(Math.ceil((Date.now() - startedAt.current) / 1000));
+          startedAt.current = null;
+          if (isOpen) {
+            setCloseDue(true);
+          }
+        }
+      }
+    };
+    $[14] = defaultOpen;
+    $[15] = isOpen;
+    $[16] = isStreaming;
+    $[17] = setOpen;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== isStreaming) {
+    t6 = [isStreaming];
+    $[19] = isStreaming;
+    $[20] = t6;
+  } else {
+    t6 = $[20];
+  }
+  useEffect(t5, t6);
+  let t7;
+  if ($[21] !== closeDue || $[22] !== setOpen) {
+    t7 = () => {
+      if (!closeDue) {
+        return;
+      }
+      const timer = setTimeout(() => {
+        setOpen(false);
+        setCloseDue(false);
+      }, AUTO_CLOSE_DELAY_MS);
+      return () => clearTimeout(timer);
+    };
+    $[21] = closeDue;
+    $[22] = setOpen;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  let t8;
+  if ($[24] !== closeDue) {
+    t8 = [closeDue];
+    $[24] = closeDue;
+    $[25] = t8;
+  } else {
+    t8 = $[25];
+  }
+  useEffect(t7, t8);
+  let t9;
+  if ($[26] !== setOpen) {
+    t9 = next => {
+      setCloseDue(false);
+      setOpen(next);
+    };
+    $[26] = setOpen;
+    $[27] = t9;
+  } else {
+    t9 = $[27];
+  }
+  const setIsOpen = t9;
+  const t10 = duration ?? measured;
+  let t11;
+  if ($[28] !== isOpen || $[29] !== isStreaming || $[30] !== setIsOpen || $[31] !== t10) {
+    t11 = {
+      isStreaming,
+      isOpen,
+      setIsOpen,
+      duration: t10
+    };
+    $[28] = isOpen;
+    $[29] = isStreaming;
+    $[30] = setIsOpen;
+    $[31] = t10;
+    $[32] = t11;
+  } else {
+    t11 = $[32];
+  }
+  let t12;
+  if ($[33] !== className) {
+    t12 = cn("mb-4", className);
+    $[33] = className;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+  let t13;
+  if ($[35] !== isOpen || $[36] !== props || $[37] !== setIsOpen || $[38] !== t12) {
+    t13 = <Collapsible open={isOpen} onOpenChange={setIsOpen} className={t12} {...props} />;
+    $[35] = isOpen;
+    $[36] = props;
+    $[37] = setIsOpen;
+    $[38] = t12;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  let t14;
+  if ($[40] !== t11 || $[41] !== t13) {
+    t14 = <ReasoningContext.Provider value={t11}>{t13}</ReasoningContext.Provider>;
+    $[40] = t11;
+    $[41] = t13;
+    $[42] = t14;
+  } else {
+    t14 = $[42];
+  }
+  return t14;
+}
+
+/** "Thinking…" while streaming, then "Thought for 12s" ("Thought for a few seconds" with no duration). */
+export function reasoningMessage(isStreaming, duration) {
+  if (isStreaming) return "Thinking…";
+  if (duration === undefined) return "Thought for a few seconds";
+  return `Thought for ${formatElapsed(duration)}`;
+}
+/** Brain icon, the shimmering "Thinking…" or "Thought for 12s", and a chevron: the web `ReasoningTrigger`. */
+export function ReasoningTrigger(t0) {
+  const $ = _c(23);
+  let children;
+  let className;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      getThinkingMessage: t1,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const getThinkingMessage = t1 === undefined ? reasoningMessage : t1;
+  const {
+    isStreaming,
+    isOpen,
+    duration
+  } = useReasoning();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t2;
+  if ($[5] !== duration || $[6] !== getThinkingMessage || $[7] !== isStreaming) {
+    t2 = getThinkingMessage(isStreaming, duration);
+    $[5] = duration;
+    $[6] = getThinkingMessage;
+    $[7] = isStreaming;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const message = t2;
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 20 : 16;
+  let t3;
+  if ($[9] !== className) {
+    t3 = cn("w-full flex-row items-center gap-2 py-1", className);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== children || $[12] !== iconSize || $[13] !== isOpen || $[14] !== isStreaming || $[15] !== message || $[16] !== muted) {
+    t4 = children ?? <><IconBrain size={iconSize} color={muted} />{isStreaming ? <Shimmer duration={1} numberOfLines={1}>{message}</Shimmer> : <ResponseText size="small" tone="muted" selectable={false} numberOfLines={1} className="shrink">{message}</ResponseText>}<CollapsibleChevron open={isOpen} size={iconSize} color={muted} /></>;
+    $[11] = children;
+    $[12] = iconSize;
+    $[13] = isOpen;
+    $[14] = isStreaming;
+    $[15] = message;
+    $[16] = muted;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== message || $[19] !== props || $[20] !== t3 || $[21] !== t4) {
+    t5 = <CollapsibleTrigger accessibilityLabel={message} className={t3} {...props}>{t4}</CollapsibleTrigger>;
+    $[18] = message;
+    $[19] = props;
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  return t5;
+}
+/**
+ * The reasoning text, muted and monospaced, on the web `rounded-lg
+ * bg-surface-secondary/40 p-3` panel. Plain text: see `ResponseText` for
+ * markdown.
+ */
+export function ReasoningContent(t0) {
+  const $ = _c(39);
+  const {
+    children,
+    className
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let T2;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  if ($[0] !== className || $[1] !== largerText || $[2] !== scheme) {
+    const size = chatTextSize("small", largerText);
+    T2 = CollapsibleContent;
+    if ($[12] !== className) {
+      t6 = cn("pb-1 pt-2", className);
+      $[12] = className;
+      $[13] = t6;
+    } else {
+      t6 = $[13];
+    }
+    T1 = View;
+    t4 = "p-3";
+    const t7 = tokens.color.surfaceSecondary[scheme];
+    let t8;
+    if ($[14] !== t7) {
+      t8 = withAlpha(t7, 0.4);
+      $[14] = t7;
+      $[15] = t8;
+    } else {
+      t8 = $[15];
+    }
+    if ($[16] !== t8) {
+      t5 = {
+        borderRadius: tokens.radius.lg,
+        backgroundColor: t8
+      };
+      $[16] = t8;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    T0 = Text;
+    t2 = true;
+    t3 = size;
+    t1 = sizeStyle(size);
+    $[0] = className;
+    $[1] = largerText;
+    $[2] = scheme;
+    $[3] = T0;
+    $[4] = T1;
+    $[5] = T2;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+  } else {
+    T0 = $[3];
+    T1 = $[4];
+    T2 = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+  }
+  let t7;
+  if ($[18] !== scheme) {
+    t7 = textStyle("muted", scheme);
+    $[18] = scheme;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  let t8;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = {
+      fontFamily: MONO_FONT
+    };
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  let t9;
+  if ($[21] !== t1 || $[22] !== t7) {
+    t9 = [t1, t7, t8];
+    $[21] = t1;
+    $[22] = t7;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== T0 || $[25] !== children || $[26] !== t2 || $[27] !== t3 || $[28] !== t9) {
+    t10 = <T0 selectable={t2} className={t3} style={t9}>{children}</T0>;
+    $[24] = T0;
+    $[25] = children;
+    $[26] = t2;
+    $[27] = t3;
+    $[28] = t9;
+    $[29] = t10;
+  } else {
+    t10 = $[29];
+  }
+  let t11;
+  if ($[30] !== T1 || $[31] !== t10 || $[32] !== t4 || $[33] !== t5) {
+    t11 = <T1 className={t4} style={t5}>{t10}</T1>;
+    $[30] = T1;
+    $[31] = t10;
+    $[32] = t4;
+    $[33] = t5;
+    $[34] = t11;
+  } else {
+    t11 = $[34];
+  }
+  let t12;
+  if ($[35] !== T2 || $[36] !== t11 || $[37] !== t6) {
+    t12 = <T2 className={t6}>{t11}</T2>;
+    $[35] = T2;
+    $[36] = t11;
+    $[37] = t6;
+    $[38] = t12;
+  } else {
+    t12 = $[38];
+  }
+  return t12;
+}

package/dist/ai/reply-quote-chip.jsx

@@ -0,0 +1,278 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { IconX } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, fieldStyle, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+/**
+ * The chip above the composer while a reply is pending: a field-style
+ * surface with a primary accent bar, the author, up to two lines of the
+ * message and an X (44 point target). Pass it as `PromptInput` `replyTo`, or
+ * as `header`.
+ */
+export function ReplyQuoteChip(t0) {
+  const $ = _c(80);
+  const {
+    author,
+    text,
+    onDismiss,
+    accessibilityLabel,
+    dismissLabel: t1,
+    className,
+    testID
+  } = t0;
+  const dismissLabel = t1 === undefined ? "Dismiss reply quote" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let T2;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== accessibilityLabel || $[1] !== author || $[2] !== className || $[3] !== largerText || $[4] !== scheme || $[5] !== testID || $[6] !== text) {
+    const caption = chatTextSize("caption", largerText);
+    const body = chatTextSize("small", largerText);
+    T2 = View;
+    t7 = testID;
+    t8 = true;
+    t9 = accessibilityLabel ?? `Replying to ${author}`;
+    t10 = text;
+    if ($[22] !== className) {
+      t11 = cn("w-full flex-row items-center rounded-field border pl-3", className);
+      $[22] = className;
+      $[23] = t11;
+    } else {
+      t11 = $[23];
+    }
+    let t14;
+    if ($[24] !== scheme) {
+      t14 = fieldStyle(scheme);
+      $[24] = scheme;
+      $[25] = t14;
+    } else {
+      t14 = $[25];
+    }
+    const t15 = tokens.color.surfaceSecondary[scheme];
+    let t16;
+    if ($[26] !== t15) {
+      t16 = {
+        backgroundColor: t15
+      };
+      $[26] = t15;
+      $[27] = t16;
+    } else {
+      t16 = $[27];
+    }
+    if ($[28] !== t14 || $[29] !== t16) {
+      t12 = [t14, t16];
+      $[28] = t14;
+      $[29] = t16;
+      $[30] = t12;
+    } else {
+      t12 = $[30];
+    }
+    const t17 = palette.primary[scheme];
+    if ($[31] !== t17) {
+      t13 = <View className="mr-2.5 self-stretch rounded-full" style={{
+        width: 3,
+        marginVertical: 8,
+        backgroundColor: t17
+      }} />;
+      $[31] = t17;
+      $[32] = t13;
+    } else {
+      t13 = $[32];
+    }
+    T1 = View;
+    t5 = "min-w-0 flex-1 py-2";
+    const t18 = cn(caption, "font-instrument-sans-semibold");
+    const t19 = sizeStyle(caption);
+    let t20;
+    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+      t20 = typeStyle("semibold");
+      $[33] = t20;
+    } else {
+      t20 = $[33];
+    }
+    let t21;
+    if ($[34] !== scheme) {
+      t21 = textStyle("muted", scheme);
+      $[34] = scheme;
+      $[35] = t21;
+    } else {
+      t21 = $[35];
+    }
+    let t22;
+    if ($[36] !== t19 || $[37] !== t21) {
+      t22 = [t19, t20, t21];
+      $[36] = t19;
+      $[37] = t21;
+      $[38] = t22;
+    } else {
+      t22 = $[38];
+    }
+    if ($[39] !== author || $[40] !== t18 || $[41] !== t22) {
+      t6 = <Text numberOfLines={1} className={t18} style={t22}>{author}</Text>;
+      $[39] = author;
+      $[40] = t18;
+      $[41] = t22;
+      $[42] = t6;
+    } else {
+      t6 = $[42];
+    }
+    T0 = Text;
+    t3 = 2;
+    t4 = cn(body, "font-instrument-sans");
+    t2 = sizeStyle(body);
+    $[0] = accessibilityLabel;
+    $[1] = author;
+    $[2] = className;
+    $[3] = largerText;
+    $[4] = scheme;
+    $[5] = testID;
+    $[6] = text;
+    $[7] = T0;
+    $[8] = T1;
+    $[9] = T2;
+    $[10] = t10;
+    $[11] = t11;
+    $[12] = t12;
+    $[13] = t13;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    T0 = $[7];
+    T1 = $[8];
+    T2 = $[9];
+    t10 = $[10];
+    t11 = $[11];
+    t12 = $[12];
+    t13 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+    t8 = $[20];
+    t9 = $[21];
+  }
+  let t14;
+  if ($[43] !== scheme) {
+    t14 = textStyle("foreground", scheme);
+    $[43] = scheme;
+    $[44] = t14;
+  } else {
+    t14 = $[44];
+  }
+  let t15;
+  if ($[45] !== t14 || $[46] !== t2) {
+    t15 = [t2, t14];
+    $[45] = t14;
+    $[46] = t2;
+    $[47] = t15;
+  } else {
+    t15 = $[47];
+  }
+  let t16;
+  if ($[48] !== T0 || $[49] !== t15 || $[50] !== t3 || $[51] !== t4 || $[52] !== text) {
+    t16 = <T0 numberOfLines={t3} className={t4} style={t15}>{text}</T0>;
+    $[48] = T0;
+    $[49] = t15;
+    $[50] = t3;
+    $[51] = t4;
+    $[52] = text;
+    $[53] = t16;
+  } else {
+    t16 = $[53];
+  }
+  let t17;
+  if ($[54] !== T1 || $[55] !== t16 || $[56] !== t5 || $[57] !== t6) {
+    t17 = <T1 className={t5}>{t6}{t16}</T1>;
+    $[54] = T1;
+    $[55] = t16;
+    $[56] = t5;
+    $[57] = t6;
+    $[58] = t17;
+  } else {
+    t17 = $[58];
+  }
+  const t18 = testID ? `${testID}-dismiss` : undefined;
+  let t19;
+  if ($[59] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = touchSlop(MIN_TOUCH_TARGET);
+    $[59] = t19;
+  } else {
+    t19 = $[59];
+  }
+  let t20;
+  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = {
+      width: MIN_TOUCH_TARGET,
+      height: MIN_TOUCH_TARGET
+    };
+    $[60] = t20;
+  } else {
+    t20 = $[60];
+  }
+  const t21 = largerText ? 20 : 16;
+  const t22 = tokens.color.muted[scheme];
+  let t23;
+  if ($[61] !== t21 || $[62] !== t22) {
+    t23 = <IconX size={t21} color={t22} />;
+    $[61] = t21;
+    $[62] = t22;
+    $[63] = t23;
+  } else {
+    t23 = $[63];
+  }
+  let t24;
+  if ($[64] !== dismissLabel || $[65] !== onDismiss || $[66] !== t18 || $[67] !== t23) {
+    t24 = <Pressable testID={t18} accessibilityRole="button" accessibilityLabel={dismissLabel} onPress={onDismiss} hitSlop={t19} className="items-center justify-center" style={t20}>{t23}</Pressable>;
+    $[64] = dismissLabel;
+    $[65] = onDismiss;
+    $[66] = t18;
+    $[67] = t23;
+    $[68] = t24;
+  } else {
+    t24 = $[68];
+  }
+  let t25;
+  if ($[69] !== T2 || $[70] !== t10 || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t17 || $[75] !== t24 || $[76] !== t7 || $[77] !== t8 || $[78] !== t9) {
+    t25 = <T2 testID={t7} accessible={t8} accessibilityLabel={t9} accessibilityHint={t10} className={t11} style={t12}>{t13}{t17}{t24}</T2>;
+    $[69] = T2;
+    $[70] = t10;
+    $[71] = t11;
+    $[72] = t12;
+    $[73] = t13;
+    $[74] = t17;
+    $[75] = t24;
+    $[76] = t7;
+    $[77] = t8;
+    $[78] = t9;
+    $[79] = t25;
+  } else {
+    t25 = $[79];
+  }
+  return t25;
+}