@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/prompt-input-menu.jsx

@@ -0,0 +1,365 @@
+import { c as _c } from "react/compiler-runtime";
+import { Children, useEffect } from "react";
+import { BackHandler, Pressable, ScrollView, Text, View, useWindowDimensions } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/**
+ * The web panel picker height (`computePanelPopupPlacement`): at most 340 and
+ * at least 160, here a share of the window, as a phone has the keyboard up.
+ */
+export const PROMPT_INPUT_MENU = {
+  maxHeight: 340,
+  minHeight: 160,
+  windowShare: 0.35
+};
+
+/** Menu height for a window height: the share, kept inside the web's 160 to 340. */
+export function promptInputMenuHeight(windowHeight) {
+  return Math.round(Math.max(PROMPT_INPUT_MENU.minHeight, Math.min(PROMPT_INPUT_MENU.maxHeight, windowHeight * PROMPT_INPUT_MENU.windowShare)));
+}
+/**
+ * The web `@` / `/` picker (`MentionPickerPopup`, `panel` layout) for touch:
+ * the composer's full width, docked right above the field, so it rides the
+ * keyboard with it. Give it to `PromptInput` as `menu`. The popover surface
+ * (`rounded-surface bg-popover`, the field border in place of the web shadow
+ * ring, as the AI parts draw no shadow) holds a `py-1` list that scrolls past
+ * `promptInputMenuHeight`. Taps reach a row while the keyboard
+ * is up, so picking never drops the keyboard.
+ */
+export function PromptInputMenu(t0) {
+  const $ = _c(21);
+  const {
+    title,
+    children,
+    empty: t1,
+    onDismiss,
+    testID
+  } = t0;
+  const empty = t1 === undefined ? "No matches." : t1;
+  const scheme = useScheme();
+  let t2;
+  let t3;
+  if ($[0] !== onDismiss) {
+    t2 = () => {
+      if (!onDismiss) {
+        return;
+      }
+      const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+        onDismiss();
+        return true;
+      });
+      return () => subscription.remove();
+    };
+    t3 = [onDismiss];
+    $[0] = onDismiss;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t2 = $[1];
+    t3 = $[2];
+  }
+  useEffect(t2, t3);
+  const {
+    height
+  } = useWindowDimensions();
+  let t4;
+  if ($[3] !== children) {
+    t4 = Children.toArray(children);
+    $[3] = children;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const hasRows = t4.length > 0;
+  const t5 = palette.overlay[scheme];
+  const t6 = tokens.color.border[scheme];
+  let t7;
+  if ($[5] !== height) {
+    t7 = promptInputMenuHeight(height);
+    $[5] = height;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== t5 || $[8] !== t6 || $[9] !== t7) {
+    t8 = {
+      backgroundColor: t5,
+      borderColor: t6,
+      borderRadius: tokens.radius.lg,
+      maxHeight: t7
+    };
+    $[7] = t5;
+    $[8] = t6;
+    $[9] = t7;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== children || $[12] !== empty || $[13] !== hasRows || $[14] !== scheme || $[15] !== title) {
+    t9 = hasRows ? <ScrollView accessibilityRole="list" accessibilityLabel={title} keyboardShouldPersistTaps="always" contentContainerClassName="py-1">{children}</ScrollView> : <Text className="px-3 py-2.5 font-instrument-sans text-xs" style={[sizeStyle("text-xs", "relaxed"), textStyle("muted", scheme)]}>{empty}</Text>;
+    $[11] = children;
+    $[12] = empty;
+    $[13] = hasRows;
+    $[14] = scheme;
+    $[15] = title;
+    $[16] = t9;
+  } else {
+    t9 = $[16];
+  }
+  let t10;
+  if ($[17] !== t8 || $[18] !== t9 || $[19] !== testID) {
+    t10 = <View testID={testID} className="overflow-hidden border" style={t8}>{t9}</View>;
+    $[17] = t8;
+    $[18] = t9;
+    $[19] = testID;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  return t10;
+}
+
+/** Web badge chip: `rounded-md bg-muted px-1.5 py-0.5 text-3xs font-medium` (10). */
+const BADGE_TEXT = {
+  fontSize: 10,
+  lineHeight: 12
+};
+/** A description longer than this is cut with "…", as the web `previewOneLine`. */
+const DESCRIPTION_MAX = 72;
+function oneLine(text) {
+  const line = text.replace(/\s+/g, " ").trim();
+  return line.length <= DESCRIPTION_MAX ? line : `${line.slice(0, DESCRIPTION_MAX - 1)}…`;
+}
+
+/**
+ * One picker row, the web `MentionRow` in its option button
+ * (`mx-1 rounded-lg px-2 text-sm`), at least 44 high. `selected` takes the
+ * web `bg-primary/15` (`/25` dark) and a medium label; a press fades to 70%,
+ * as the composer chips, in place of the web hover fill.
+ */
+export function PromptInputMenuItem(t0) {
+  const $ = _c(62);
+  const {
+    prefix,
+    label,
+    description,
+    leading,
+    trailing,
+    badge,
+    badgeIcon,
+    selected: t1,
+    onPress,
+    testID
+  } = t0;
+  const selected = t1 === undefined ? false : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t2;
+  if ($[0] !== scheme) {
+    t2 = textStyle("muted", scheme);
+    $[0] = scheme;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const muted = t2;
+  const t3 = largerText ? "text-lg" : "text-sm";
+  let t4;
+  if ($[2] !== t3) {
+    t4 = sizeStyle(t3);
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+  const labelSize = t4;
+  let t5;
+  if ($[4] !== description) {
+    t5 = description ? oneLine(description) : undefined;
+    $[4] = description;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  const detail = t5;
+  let t6;
+  if ($[6] !== badge || $[7] !== badgeIcon || $[8] !== muted || $[9] !== scheme || $[10] !== trailing) {
+    t6 = trailing ?? (badge ? <View className="shrink-0 flex-row items-center gap-1 px-1.5 py-0.5" style={{
+      backgroundColor: tokens.color.surfaceSecondary[scheme],
+      borderRadius: 6
+    }}>{badgeIcon}<Text className="font-instrument-sans-medium" style={[BADGE_TEXT, muted, typeStyle("medium")]}>{badge}</Text></View> : null);
+    $[6] = badge;
+    $[7] = badgeIcon;
+    $[8] = muted;
+    $[9] = scheme;
+    $[10] = trailing;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  const end = t6;
+  let t7;
+  if ($[12] !== selected) {
+    t7 = {
+      selected
+    };
+    $[12] = selected;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  const t8 = `${prefix ?? ""}${label}`;
+  let t9;
+  if ($[14] !== badge || $[15] !== detail || $[16] !== t8) {
+    t9 = [t8, detail, badge].filter(Boolean);
+    $[14] = badge;
+    $[15] = detail;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  const t10 = t9.join(", ");
+  let t11;
+  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = touchSlop(MIN_TOUCH_TARGET);
+    $[18] = t11;
+  } else {
+    t11 = $[18];
+  }
+  const t12 = largerText && "py-2";
+  let t13;
+  if ($[19] !== t12) {
+    t13 = cn("mx-1 flex-row items-center gap-2 px-2 py-1.5 active:opacity-70", t12);
+    $[19] = t12;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  let t14;
+  if ($[21] !== scheme || $[22] !== selected) {
+    t14 = selected ? withAlpha(palette.primary[scheme], scheme === "dark" ? 0.25 : 0.15) : "transparent";
+    $[21] = scheme;
+    $[22] = selected;
+    $[23] = t14;
+  } else {
+    t14 = $[23];
+  }
+  let t15;
+  if ($[24] !== t14) {
+    t15 = {
+      minHeight: MIN_TOUCH_TARGET,
+      borderRadius: 8,
+      backgroundColor: t14
+    };
+    $[24] = t14;
+    $[25] = t15;
+  } else {
+    t15 = $[25];
+  }
+  const t16 = selected ? "font-instrument-sans-medium" : "font-instrument-sans";
+  let t17;
+  if ($[26] !== t16) {
+    t17 = cn("min-w-0 flex-1", t16);
+    $[26] = t16;
+    $[27] = t17;
+  } else {
+    t17 = $[27];
+  }
+  let t18;
+  if ($[28] !== scheme) {
+    t18 = textStyle("foreground", scheme);
+    $[28] = scheme;
+    $[29] = t18;
+  } else {
+    t18 = $[29];
+  }
+  let t19;
+  if ($[30] !== selected) {
+    t19 = selected ? typeStyle("medium") : null;
+    $[30] = selected;
+    $[31] = t19;
+  } else {
+    t19 = $[31];
+  }
+  let t20;
+  if ($[32] !== labelSize || $[33] !== t18 || $[34] !== t19) {
+    t20 = [labelSize, t18, t19];
+    $[32] = labelSize;
+    $[33] = t18;
+    $[34] = t19;
+    $[35] = t20;
+  } else {
+    t20 = $[35];
+  }
+  let t21;
+  if ($[36] !== muted || $[37] !== prefix) {
+    t21 = prefix ? <Text style={muted}>{prefix}</Text> : null;
+    $[36] = muted;
+    $[37] = prefix;
+    $[38] = t21;
+  } else {
+    t21 = $[38];
+  }
+  let t22;
+  if ($[39] !== label || $[40] !== t17 || $[41] !== t20 || $[42] !== t21) {
+    t22 = <Text numberOfLines={1} className={t17} style={t20}>{t21}{label}</Text>;
+    $[39] = label;
+    $[40] = t17;
+    $[41] = t20;
+    $[42] = t21;
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] !== end || $[45] !== t22) {
+    t23 = <View className="min-w-0 flex-row items-center gap-1.5">{t22}{end}</View>;
+    $[44] = end;
+    $[45] = t22;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  let t24;
+  if ($[47] !== detail || $[48] !== muted) {
+    t24 = detail ? <Text numberOfLines={1} className="font-instrument-sans text-xs" style={[sizeStyle("text-xs"), muted]}>{detail}</Text> : null;
+    $[47] = detail;
+    $[48] = muted;
+    $[49] = t24;
+  } else {
+    t24 = $[49];
+  }
+  let t25;
+  if ($[50] !== t23 || $[51] !== t24) {
+    t25 = <View className="min-w-0 flex-1 gap-0.5">{t23}{t24}</View>;
+    $[50] = t23;
+    $[51] = t24;
+    $[52] = t25;
+  } else {
+    t25 = $[52];
+  }
+  let t26;
+  if ($[53] !== leading || $[54] !== onPress || $[55] !== t10 || $[56] !== t13 || $[57] !== t15 || $[58] !== t25 || $[59] !== t7 || $[60] !== testID) {
+    t26 = <Pressable testID={testID} accessibilityRole="button" accessibilityState={t7} accessibilityLabel={t10} onPress={onPress} hitSlop={t11} className={t13} style={t15}>{leading}{t25}</Pressable>;
+    $[53] = leading;
+    $[54] = onPress;
+    $[55] = t10;
+    $[56] = t13;
+    $[57] = t15;
+    $[58] = t25;
+    $[59] = t7;
+    $[60] = testID;
+    $[61] = t26;
+  } else {
+    t26 = $[61];
+  }
+  return t26;
+}