@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/suggestion.jsx

@@ -0,0 +1,186 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop } from "../controlStyles";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+/**
+ * Prompt suggestions. Horizontal is a `ScrollView` with no scroll bar (the web
+ * row with its scroll arrows; a phone swipes instead).
+ */
+export function Suggestions(t0) {
+  const $ = _c(13);
+  const {
+    orientation: t1,
+    className,
+    contentContainerClassName,
+    children
+  } = t0;
+  const orientation = t1 === undefined ? "horizontal" : t1;
+  if (orientation === "vertical") {
+    let t2;
+    if ($[0] !== className) {
+      t2 = cn("w-full gap-2", className);
+      $[0] = className;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== children || $[3] !== t2) {
+      t3 = <View className={t2}>{children}</View>;
+      $[2] = children;
+      $[3] = t2;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    return t3;
+  }
+  let t2;
+  if ($[5] !== className) {
+    t2 = cn("w-full grow-0", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== contentContainerClassName) {
+    t3 = cn("items-center gap-2 px-1", contentContainerClassName);
+    $[7] = contentContainerClassName;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== children || $[10] !== t2 || $[11] !== t3) {
+    t4 = <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps="handled" className={t2} contentContainerClassName={t3}>{children}</ScrollView>;
+    $[9] = children;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+/** A `text-sm` line with the web `py-1.5`: 32 high. The slop brings it to 44. */
+const CHIP_HEIGHT = 32;
+
+/**
+ * A round chip with the web suggestion look: `rounded-full border
+ * bg-surface-secondary px-3 py-1.5 text-sm text-muted-foreground`. Pressed,
+ * it takes the web hover (`bg-surface-tertiary text-foreground`).
+ */
+export function Suggestion(t0) {
+  const $ = _c(27);
+  const {
+    suggestion,
+    onPress,
+    children,
+    disabled,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t1;
+  if ($[0] !== largerText) {
+    t1 = chatTextSize("small", largerText);
+    $[0] = largerText;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const size = t1;
+  const t2 = Boolean(disabled);
+  let t3;
+  if ($[2] !== t2) {
+    t3 = {
+      disabled: t2
+    };
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = touchSlop(MIN_TOUCH_TARGET, CHIP_HEIGHT);
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== onPress || $[6] !== suggestion) {
+    t5 = () => onPress?.(suggestion);
+    $[5] = onPress;
+    $[6] = suggestion;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  const t6 = largerText ? "min-h-12 px-4 py-2" : "min-h-8 px-3 py-1.5";
+  const t7 = disabled && "opacity-45";
+  let t8;
+  if ($[8] !== t6 || $[9] !== t7) {
+    t8 = cn("justify-center border", t6, t7);
+    $[8] = t6;
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== scheme) {
+    t9 = t10 => {
+      const {
+        pressed
+      } = t10;
+      return {
+        borderRadius: tokens.radius.pill,
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: pressed ? palette.surfaceTertiary[scheme] : tokens.color.surfaceSecondary[scheme]
+      };
+    };
+    $[11] = scheme;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== children || $[14] !== scheme || $[15] !== size || $[16] !== suggestion) {
+    t10 = t11 => {
+      const {
+        pressed: pressed_0
+      } = t11;
+      return <Text className={cn(size, "font-instrument-sans")} style={[sizeStyle(size), textStyle(pressed_0 ? "foreground" : "muted", scheme)]}>{children ?? suggestion}</Text>;
+    };
+    $[13] = children;
+    $[14] = scheme;
+    $[15] = size;
+    $[16] = suggestion;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  let t11;
+  if ($[18] !== disabled || $[19] !== suggestion || $[20] !== t10 || $[21] !== t3 || $[22] !== t5 || $[23] !== t8 || $[24] !== t9 || $[25] !== testID) {
+    t11 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={suggestion} accessibilityState={t3} disabled={disabled} hitSlop={t4} onPress={t5} className={t8} style={t9}>{t10}</Pressable>;
+    $[18] = disabled;
+    $[19] = suggestion;
+    $[20] = t10;
+    $[21] = t3;
+    $[22] = t5;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = testID;
+    $[26] = t11;
+  } else {
+    t11 = $[26];
+  }
+  return t11;
+}

package/dist/ai/tool-approval-card.jsx

@@ -0,0 +1,359 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import { IconTool } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { cardStyle, sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { withAlpha, palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { Input } from "../Input";
+import { Textarea } from "../Textarea";
+import { CardButton } from "./card-button";
+import { chatTextSize, MONO_FONT } from "./chat-text";
+export const DRAFT_ROLE_LABELS = {
+  to: "To",
+  cc: "Cc",
+  bcc: "Bcc",
+  subject: "Subject",
+  body: "Message"
+};
+
+/** The fields whose value differs from the original. `read` returns the edited value, or undefined for no edit. */
+export function changedDraftEdits(fields, read) {
+  return fields.flatMap(field => {
+    const value = read(field.key);
+    return value === undefined || value === field.value ? [] : [{
+      key: field.key,
+      value
+    }];
+  });
+}
+
+/** What the reader chose. `edit` is offered by `ToolDraftCard` only. */
+
+/** Characters of the args summary before it is cut with an ellipsis. */
+export const ARGS_MAX_CHARS = 160;
+
+/** One line summary of tool arguments, cut at `max` characters. */
+export function summarizeArgs(args, max = ARGS_MAX_CHARS) {
+  if (args == null) return "";
+  let text;
+  if (typeof args === "string") {
+    text = args;
+  } else {
+    try {
+      text = JSON.stringify(args) ?? "";
+    } catch {
+      text = "[unserialisable arguments]";
+    }
+  }
+  text = text.replace(/\s+/g, " ").trim();
+  return text.length > max ? `${text.slice(0, Math.max(0, max - 1))}…` : text;
+}
+function ToolCardBase(t0) {
+  const $ = _c(60);
+  const {
+    toolName,
+    args,
+    onDecide,
+    pending: t1,
+    disabled: t2,
+    approveLabel: t3,
+    denyLabel: t4,
+    editLabel: t5,
+    allowEdit: t6,
+    heading,
+    metaNote,
+    fields,
+    server,
+    routineMode: t7,
+    expiresLabel,
+    target,
+    meta,
+    chrome,
+    className,
+    testID: t8
+  } = t0;
+  const pending = t1 === undefined ? false : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const approveLabel = t3 === undefined ? "Approve" : t3;
+  const denyLabel = t4 === undefined ? "Deny" : t4;
+  const editLabel = t5 === undefined ? "Edit" : t5;
+  const allowEdit = t6 === undefined ? false : t6;
+  const routineMode = t7 === undefined ? false : t7;
+  const testID = t8 === undefined ? "tool-approval-card" : t8;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const body = chatTextSize("body", largerText);
+  const small = chatTextSize("small", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const off = pending || disabled;
+  let t9;
+  if ($[0] !== args) {
+    t9 = summarizeArgs(args);
+    $[0] = args;
+    $[1] = t9;
+  } else {
+    t9 = $[1];
+  }
+  const summary = t9;
+  const [edits, setEdits] = useState(null);
+  const hasFields = fields !== undefined;
+  const headerFields = fields?.filter(_temp) ?? [];
+  let t10;
+  if ($[2] !== fields) {
+    t10 = fields?.find(_temp2);
+    $[2] = fields;
+    $[3] = t10;
+  } else {
+    t10 = $[3];
+  }
+  const bodyField = t10;
+  const t11 = server ? `via ${server}` : "built-in tool";
+  let t12;
+  if ($[4] !== metaNote) {
+    t12 = metaNote ? [metaNote] : [];
+    $[4] = metaNote;
+    $[5] = t12;
+  } else {
+    t12 = $[5];
+  }
+  let t13;
+  if ($[6] !== t11 || $[7] !== t12) {
+    t13 = [t11, ...t12];
+    $[6] = t11;
+    $[7] = t12;
+    $[8] = t13;
+  } else {
+    t13 = $[8];
+  }
+  const metaText = t13.join(" \xB7 ") + (routineMode ? " \xB7 queued while you were away" : "") + (expiresLabel ? ` · Expires ${expiresLabel}` : "");
+  const showMeta = meta !== undefined || server !== undefined || routineMode || expiresLabel !== undefined || metaNote !== undefined;
+  let t14;
+  if ($[9] !== edits || $[10] !== fields || $[11] !== onDecide) {
+    t14 = () => {
+      if (!fields) {
+        return onDecide?.("edit");
+      }
+      setEdits(edits ? null : Object.fromEntries(fields.map(_temp3)));
+    };
+    $[9] = edits;
+    $[10] = fields;
+    $[11] = onDecide;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  const onEdit = t14;
+  let t15;
+  if ($[13] !== edits || $[14] !== fields || $[15] !== onDecide) {
+    t15 = () => {
+      if (fields && edits) {
+        onDecide?.("approve", changedDraftEdits(fields, key => edits[key]));
+      } else {
+        onDecide?.("approve");
+      }
+    };
+    $[13] = edits;
+    $[14] = fields;
+    $[15] = onDecide;
+    $[16] = t15;
+  } else {
+    t15 = $[16];
+  }
+  const onApprove = t15;
+  let t16;
+  if ($[17] !== className) {
+    t16 = cn("w-full gap-3 p-4", className);
+    $[17] = className;
+    $[18] = t16;
+  } else {
+    t16 = $[18];
+  }
+  let t17;
+  if ($[19] !== scheme) {
+    t17 = cardStyle(scheme);
+    $[19] = scheme;
+    $[20] = t17;
+  } else {
+    t17 = $[20];
+  }
+  const t18 = palette.primary[scheme];
+  let t19;
+  if ($[21] !== t18) {
+    t19 = withAlpha(t18, 0.25);
+    $[21] = t18;
+    $[22] = t19;
+  } else {
+    t19 = $[22];
+  }
+  let t20;
+  if ($[23] !== t19) {
+    t20 = {
+      borderWidth: 1,
+      borderColor: t19
+    };
+    $[23] = t19;
+    $[24] = t20;
+  } else {
+    t20 = $[24];
+  }
+  let t21;
+  if ($[25] !== t17 || $[26] !== t20) {
+    t21 = [t17, t20];
+    $[25] = t17;
+    $[26] = t20;
+    $[27] = t21;
+  } else {
+    t21 = $[27];
+  }
+  const t22 = largerText ? 20 : 16;
+  const t23 = tokens.color.muted[scheme];
+  let t24;
+  if ($[28] !== t22 || $[29] !== t23) {
+    t24 = <IconTool size={t22} color={t23} />;
+    $[28] = t22;
+    $[29] = t23;
+    $[30] = t24;
+  } else {
+    t24 = $[30];
+  }
+  let t25;
+  if ($[31] !== pending) {
+    t25 = {
+      busy: pending
+    };
+    $[31] = pending;
+    $[32] = t25;
+  } else {
+    t25 = $[32];
+  }
+  const t26 = `${testID}-deny`;
+  const t27 = `${denyLabel} ${toolName}`;
+  let t28;
+  if ($[33] !== onDecide) {
+    t28 = () => onDecide?.("deny");
+    $[33] = onDecide;
+    $[34] = t28;
+  } else {
+    t28 = $[34];
+  }
+  let t29;
+  if ($[35] !== denyLabel || $[36] !== off || $[37] !== t26 || $[38] !== t27 || $[39] !== t28) {
+    t29 = <CardButton testID={t26} label={denyLabel} accessibilityLabel={t27} variant="outline" disabled={off} onPress={t28} />;
+    $[35] = denyLabel;
+    $[36] = off;
+    $[37] = t26;
+    $[38] = t27;
+    $[39] = t28;
+    $[40] = t29;
+  } else {
+    t29 = $[40];
+  }
+  let t30;
+  if ($[41] !== allowEdit || $[42] !== editLabel || $[43] !== edits || $[44] !== off || $[45] !== onEdit || $[46] !== testID || $[47] !== toolName) {
+    t30 = allowEdit ? <CardButton testID={`${testID}-edit`} label={edits ? "Cancel edit" : editLabel} accessibilityLabel={`${edits ? "Cancel edit" : editLabel} ${toolName}`} variant="secondary" disabled={off} onPress={onEdit} /> : null;
+    $[41] = allowEdit;
+    $[42] = editLabel;
+    $[43] = edits;
+    $[44] = off;
+    $[45] = onEdit;
+    $[46] = testID;
+    $[47] = toolName;
+    $[48] = t30;
+  } else {
+    t30 = $[48];
+  }
+  const t31 = `${testID}-approve`;
+  const t32 = `${approveLabel} ${toolName}`;
+  let t33;
+  if ($[49] !== approveLabel || $[50] !== off || $[51] !== onApprove || $[52] !== t31 || $[53] !== t32) {
+    t33 = <CardButton testID={t31} label={approveLabel} accessibilityLabel={t32} variant="primary" disabled={off} onPress={onApprove} />;
+    $[49] = approveLabel;
+    $[50] = off;
+    $[51] = onApprove;
+    $[52] = t31;
+    $[53] = t32;
+    $[54] = t33;
+  } else {
+    t33 = $[54];
+  }
+  let t34;
+  if ($[55] !== t25 || $[56] !== t29 || $[57] !== t30 || $[58] !== t33) {
+    t34 = <View className="flex-row flex-wrap items-center justify-end gap-2" accessibilityState={t25}>{t29}{t30}{t33}</View>;
+    $[55] = t25;
+    $[56] = t29;
+    $[57] = t30;
+    $[58] = t33;
+    $[59] = t34;
+  } else {
+    t34 = $[59];
+  }
+  return <View testID={testID} accessible={false} accessibilityLabel={`${heading}: ${toolName}`} className={t16} style={t21}><View className="flex-row items-center gap-2">{t24}<Text className={cn(caption, "font-instrument-sans-semibold")} style={[sizeStyle(caption), typeStyle("semibold"), textStyle("muted", scheme)]}>{pending ? "Sending decision\u2026" : heading}</Text></View>{showMeta ? meta ?? <Text testID={`${testID}-meta`} className={caption} style={[sizeStyle(caption), textStyle("muted", scheme)]}>{metaText}</Text> : null}{chrome}<Text testID={`${testID}-name`} numberOfLines={2} className={cn(body, "font-instrument-sans-semibold")} style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}>{toolName}</Text>{target ? <Text testID={`${testID}-target`} className={small} style={[sizeStyle(small), textStyle("muted", scheme)]}>{`Target: ${target}`}</Text> : null}{hasFields ? edits ? <View testID={`${testID}-editor`} className="gap-2">{fields.map(field_2 => <View key={field_2.key} className="gap-1"><Text className={caption} style={[sizeStyle(caption), textStyle("muted", scheme)]}>{DRAFT_ROLE_LABELS[field_2.role]}</Text>{field_2.role === "body" ? <Textarea testID={`${testID}-field-${field_2.key}`} value={edits[field_2.key] ?? ""} onChangeText={value => setEdits({
+          ...edits,
+          [field_2.key]: value
+        })} numberOfLines={8} accessibilityLabel={DRAFT_ROLE_LABELS[field_2.role]} /> : <Input testID={`${testID}-field-${field_2.key}`} value={edits[field_2.key] ?? ""} onChangeText={value_0 => setEdits({
+          ...edits,
+          [field_2.key]: value_0
+        })} accessibilityLabel={DRAFT_ROLE_LABELS[field_2.role]} />}</View>)}</View> : <View testID={`${testID}-preview`} className="gap-2">{headerFields.map(field_3 => <View key={field_3.key} className="flex-row gap-2"><Text className={cn(caption, "w-16")} style={[sizeStyle(caption), textStyle("muted", scheme)]}>{DRAFT_ROLE_LABELS[field_3.role]}</Text><Text className={cn(small, "min-w-0 flex-1")} style={[sizeStyle(small), textStyle("foreground", scheme)]}>{field_3.value}</Text></View>)}{bodyField ? <Text numberOfLines={12} className={body} style={[sizeStyle(body), textStyle("foreground", scheme)]}>{bodyField.value}</Text> : null}</View> : summary ? <Text testID={`${testID}-args`} numberOfLines={3} className={small} style={[sizeStyle(small), textStyle("muted", scheme), {
+      fontFamily: MONO_FONT
+    }]}>{summary}</Text> : null}{t34}</View>;
+}
+
+/**
+ * A pending tool call that needs a yes or no: the tool name, a cut summary of
+ * the arguments, and Deny and Approve buttons (44 point targets). With
+ * `pending` or `disabled` both buttons are off.
+ */
+function _temp3(field_1) {
+  return [field_1.key, field_1.value];
+}
+function _temp2(field_0) {
+  return field_0.role === "body";
+}
+function _temp(field) {
+  return field.role !== "body";
+}
+export function ToolApprovalCard(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <ToolCardBase {...props} heading="Approval needed" />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+/** As `ToolApprovalCard`, plus an Edit button that reports `"edit"`, for a draft the reader may change first. */
+export function ToolDraftCard(t0) {
+  const $ = _c(6);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      testID: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const testID = t1 === undefined ? "tool-draft-card" : t1;
+  let t2;
+  if ($[3] !== props || $[4] !== testID) {
+    t2 = <ToolCardBase {...props} testID={testID} allowEdit={true} heading="Draft for review" metaNote="Nothing is sent until you press Send" />;
+    $[3] = props;
+    $[4] = testID;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}