@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/message-action-sheet.jsx

@@ -0,0 +1,408 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { selectionHaptic } from "../haptics";
+import { palette } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** One row of `MessageActionSheet`. */
+
+/** The sheet's default title, also the message's `longpress` action label. */
+export const MESSAGE_ACTIONS_TITLE = "Message actions";
+/**
+ * The sheet that opens on a long press of a chat message: a bottom sheet in
+ * an RN `Modal` (no `@gorhom/bottom-sheet`) with one pressable row per action
+ * and a Cancel row. It closes on the backdrop, Cancel, Android back and after
+ * an action. A `selectionHaptic()` fires when it opens (`expo-haptics` is an
+ * optional peer). Row testIDs are `{testID}-action-{key}`.
+ */
+export function MessageActionSheet(t0) {
+  const $ = _c(112);
+  const {
+    open,
+    onClose,
+    actions,
+    title: t1,
+    cancelLabel: t2,
+    testID: t3
+  } = t0;
+  const title = t1 === undefined ? MESSAGE_ACTIONS_TITLE : t1;
+  const cancelLabel = t2 === undefined ? "Cancel" : t2;
+  const testID = t3 === undefined ? "message-action-sheet" : t3;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  let t4;
+  let t5;
+  if ($[0] !== open) {
+    t4 = () => {
+      if (open) {
+        selectionHaptic();
+      }
+    };
+    t5 = [open];
+    $[0] = open;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t4 = $[1];
+    t5 = $[2];
+  }
+  useEffect(t4, t5);
+  let T0;
+  let T1;
+  let T2;
+  let T3;
+  let T4;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  let t15;
+  let t16;
+  let t17;
+  let t18;
+  let t19;
+  let t20;
+  let t21;
+  let t22;
+  let t23;
+  let t24;
+  let t25;
+  let t26;
+  let t27;
+  let t28;
+  let t29;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[3] !== actions || $[4] !== cancelLabel || $[5] !== insets.bottom || $[6] !== largerText || $[7] !== onClose || $[8] !== open || $[9] !== reduceMotion || $[10] !== scheme || $[11] !== testID || $[12] !== title) {
+    const caption = chatTextSize("caption", largerText);
+    const body = chatTextSize("body", largerText);
+    const minHeight = largerText ? 56 : MIN_TOUCH_TARGET + 4;
+    T4 = Modal;
+    t24 = open;
+    t25 = true;
+    t26 = reduceMotion ? "none" : "fade";
+    t27 = true;
+    t28 = onClose;
+    const t30 = `${testID}-backdrop`;
+    let t31;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+      t31 = touchSlop(MIN_TOUCH_TARGET);
+      $[42] = t31;
+    } else {
+      t31 = $[42];
+    }
+    const t32 = palette.backdrop[scheme];
+    let t33;
+    if ($[43] !== t32) {
+      t33 = [StyleSheet.absoluteFill, {
+        backgroundColor: t32
+      }];
+      $[43] = t32;
+      $[44] = t33;
+    } else {
+      t33 = $[44];
+    }
+    if ($[45] !== onClose || $[46] !== t30 || $[47] !== t33) {
+      t29 = <Pressable testID={t30} accessibilityRole="button" accessibilityLabel="Close" onPress={onClose} hitSlop={t31} style={t33} />;
+      $[45] = onClose;
+      $[46] = t30;
+      $[47] = t33;
+      $[48] = t29;
+    } else {
+      t29 = $[48];
+    }
+    T3 = View;
+    t22 = "box-none";
+    t23 = styles.anchor;
+    T2 = View;
+    t15 = testID;
+    t16 = true;
+    t17 = title;
+    t18 = onClose;
+    t19 = "w-full self-center px-2";
+    const t34 = insets.bottom + 8;
+    if ($[49] !== t34) {
+      t20 = {
+        maxWidth: 480,
+        paddingBottom: t34
+      };
+      $[49] = t34;
+      $[50] = t20;
+    } else {
+      t20 = $[50];
+    }
+    const t35 = tokens.color.surface[scheme];
+    let t36;
+    if ($[51] !== t35) {
+      t36 = {
+        backgroundColor: t35,
+        borderRadius: tokens.radius.card
+      };
+      $[51] = t35;
+      $[52] = t36;
+    } else {
+      t36 = $[52];
+    }
+    const t37 = cn(caption, "px-4 pb-1 pt-3 font-instrument-sans-medium");
+    const t38 = sizeStyle(caption);
+    let t39;
+    if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
+      t39 = typeStyle("medium");
+      $[53] = t39;
+    } else {
+      t39 = $[53];
+    }
+    let t40;
+    if ($[54] !== scheme) {
+      t40 = textStyle("muted", scheme);
+      $[54] = scheme;
+      $[55] = t40;
+    } else {
+      t40 = $[55];
+    }
+    let t41;
+    if ($[56] !== t38 || $[57] !== t40) {
+      t41 = [t38, t39, t40];
+      $[56] = t38;
+      $[57] = t40;
+      $[58] = t41;
+    } else {
+      t41 = $[58];
+    }
+    let t42;
+    if ($[59] !== t37 || $[60] !== t41 || $[61] !== title) {
+      t42 = <Text accessibilityRole="header" numberOfLines={1} className={t37} style={t41}>{title}</Text>;
+      $[59] = t37;
+      $[60] = t41;
+      $[61] = title;
+      $[62] = t42;
+    } else {
+      t42 = $[62];
+    }
+    t21 = <View className="overflow-hidden" style={t36}>{t42}{actions.map((action, index) => {
+        const Icon = action.icon;
+        const color = action.destructive ? palette.danger[scheme] : tokens.color.foreground[scheme];
+        return <Pressable key={action.key} testID={`${testID}-action-${action.key}`} accessibilityRole="button" accessibilityLabel={action.label} hitSlop={touchSlop(MIN_TOUCH_TARGET)} onPress={() => {
+          onClose();
+          action.onPress();
+        }} className="flex-row items-center gap-3 px-4" style={[{
+          minHeight
+        }, index > 0 && {
+          borderTopWidth: StyleSheet.hairlineWidth,
+          borderTopColor: tokens.color.separator[scheme]
+        }]}>{Icon ? <Icon size={largerText ? 22 : 20} color={color} /> : null}<Text numberOfLines={1} className={cn(body, "min-w-0 flex-1 font-instrument-sans-medium")} style={[sizeStyle(body), typeStyle("medium"), {
+            color
+          }]}>{action.label}</Text></Pressable>;
+      })}</View>;
+    T1 = Pressable;
+    t8 = `${testID}-cancel`;
+    t9 = "button";
+    t10 = cancelLabel;
+    t11 = onClose;
+    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+      t12 = touchSlop(MIN_TOUCH_TARGET);
+      $[63] = t12;
+    } else {
+      t12 = $[63];
+    }
+    t13 = "mt-2 items-center justify-center";
+    const t43 = tokens.color.surface[scheme];
+    if ($[64] !== minHeight || $[65] !== t43) {
+      t14 = {
+        minHeight,
+        backgroundColor: t43,
+        borderRadius: tokens.radius.card
+      };
+      $[64] = minHeight;
+      $[65] = t43;
+      $[66] = t14;
+    } else {
+      t14 = $[66];
+    }
+    T0 = Text;
+    t7 = cn(body, "font-instrument-sans-semibold");
+    t6 = sizeStyle(body);
+    $[3] = actions;
+    $[4] = cancelLabel;
+    $[5] = insets.bottom;
+    $[6] = largerText;
+    $[7] = onClose;
+    $[8] = open;
+    $[9] = reduceMotion;
+    $[10] = scheme;
+    $[11] = testID;
+    $[12] = title;
+    $[13] = T0;
+    $[14] = T1;
+    $[15] = T2;
+    $[16] = T3;
+    $[17] = T4;
+    $[18] = t10;
+    $[19] = t11;
+    $[20] = t12;
+    $[21] = t13;
+    $[22] = t14;
+    $[23] = t15;
+    $[24] = t16;
+    $[25] = t17;
+    $[26] = t18;
+    $[27] = t19;
+    $[28] = t20;
+    $[29] = t21;
+    $[30] = t22;
+    $[31] = t23;
+    $[32] = t24;
+    $[33] = t25;
+    $[34] = t26;
+    $[35] = t27;
+    $[36] = t28;
+    $[37] = t29;
+    $[38] = t6;
+    $[39] = t7;
+    $[40] = t8;
+    $[41] = t9;
+  } else {
+    T0 = $[13];
+    T1 = $[14];
+    T2 = $[15];
+    T3 = $[16];
+    T4 = $[17];
+    t10 = $[18];
+    t11 = $[19];
+    t12 = $[20];
+    t13 = $[21];
+    t14 = $[22];
+    t15 = $[23];
+    t16 = $[24];
+    t17 = $[25];
+    t18 = $[26];
+    t19 = $[27];
+    t20 = $[28];
+    t21 = $[29];
+    t22 = $[30];
+    t23 = $[31];
+    t24 = $[32];
+    t25 = $[33];
+    t26 = $[34];
+    t27 = $[35];
+    t28 = $[36];
+    t29 = $[37];
+    t6 = $[38];
+    t7 = $[39];
+    t8 = $[40];
+    t9 = $[41];
+  }
+  let t30;
+  if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+    t30 = typeStyle("semibold");
+    $[67] = t30;
+  } else {
+    t30 = $[67];
+  }
+  let t31;
+  if ($[68] !== scheme) {
+    t31 = textStyle("foreground", scheme);
+    $[68] = scheme;
+    $[69] = t31;
+  } else {
+    t31 = $[69];
+  }
+  let t32;
+  if ($[70] !== t31 || $[71] !== t6) {
+    t32 = [t6, t30, t31];
+    $[70] = t31;
+    $[71] = t6;
+    $[72] = t32;
+  } else {
+    t32 = $[72];
+  }
+  let t33;
+  if ($[73] !== T0 || $[74] !== cancelLabel || $[75] !== t32 || $[76] !== t7) {
+    t33 = <T0 className={t7} style={t32}>{cancelLabel}</T0>;
+    $[73] = T0;
+    $[74] = cancelLabel;
+    $[75] = t32;
+    $[76] = t7;
+    $[77] = t33;
+  } else {
+    t33 = $[77];
+  }
+  let t34;
+  if ($[78] !== T1 || $[79] !== t10 || $[80] !== t11 || $[81] !== t12 || $[82] !== t13 || $[83] !== t14 || $[84] !== t33 || $[85] !== t8 || $[86] !== t9) {
+    t34 = <T1 testID={t8} accessibilityRole={t9} accessibilityLabel={t10} onPress={t11} hitSlop={t12} className={t13} style={t14}>{t33}</T1>;
+    $[78] = T1;
+    $[79] = t10;
+    $[80] = t11;
+    $[81] = t12;
+    $[82] = t13;
+    $[83] = t14;
+    $[84] = t33;
+    $[85] = t8;
+    $[86] = t9;
+    $[87] = t34;
+  } else {
+    t34 = $[87];
+  }
+  let t35;
+  if ($[88] !== T2 || $[89] !== t15 || $[90] !== t16 || $[91] !== t17 || $[92] !== t18 || $[93] !== t19 || $[94] !== t20 || $[95] !== t21 || $[96] !== t34) {
+    t35 = <T2 testID={t15} accessibilityViewIsModal={t16} accessibilityLabel={t17} onAccessibilityEscape={t18} className={t19} style={t20}>{t21}{t34}</T2>;
+    $[88] = T2;
+    $[89] = t15;
+    $[90] = t16;
+    $[91] = t17;
+    $[92] = t18;
+    $[93] = t19;
+    $[94] = t20;
+    $[95] = t21;
+    $[96] = t34;
+    $[97] = t35;
+  } else {
+    t35 = $[97];
+  }
+  let t36;
+  if ($[98] !== T3 || $[99] !== t22 || $[100] !== t23 || $[101] !== t35) {
+    t36 = <T3 pointerEvents={t22} style={t23}>{t35}</T3>;
+    $[98] = T3;
+    $[99] = t22;
+    $[100] = t23;
+    $[101] = t35;
+    $[102] = t36;
+  } else {
+    t36 = $[102];
+  }
+  let t37;
+  if ($[103] !== T4 || $[104] !== t24 || $[105] !== t25 || $[106] !== t26 || $[107] !== t27 || $[108] !== t28 || $[109] !== t29 || $[110] !== t36) {
+    t37 = <T4 visible={t24} transparent={t25} animationType={t26} statusBarTranslucent={t27} onRequestClose={t28}>{t29}{t36}</T4>;
+    $[103] = T4;
+    $[104] = t24;
+    $[105] = t25;
+    $[106] = t26;
+    $[107] = t27;
+    $[108] = t28;
+    $[109] = t29;
+    $[110] = t36;
+    $[111] = t37;
+  } else {
+    t37 = $[111];
+  }
+  return t37;
+}
+const styles = StyleSheet.create({
+  anchor: {
+    flex: 1,
+    justifyContent: "flex-end"
+  }
+});

package/dist/ai/message-quote.jsx

@@ -0,0 +1,241 @@
+import { c as _c } from "react/compiler-runtime";
+import { useContext } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import { ChatTextColorContext } from "./response-text";
+/** Lines of the quoted text before it is cut with an ellipsis. */
+export const QUOTE_MAX_LINES = 2;
+
+/**
+ * A compact quote inside a message bubble, above the message text: a left
+ * border, the author in the caption size and the quoted text on up to two
+ * lines. It takes its colour from the enclosing `MessageContent`, so it reads
+ * on the primary user bubble as well as on the tint and assistant ones. With
+ * `onPress` it is a button (44 point minimum height).
+ */
+export function MessageQuote(t0) {
+  const $ = _c(62);
+  const {
+    author,
+    text,
+    onPress,
+    accessibilityLabel,
+    className,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  let t1;
+  if ($[0] !== inherited || $[1] !== scheme) {
+    t1 = inherited ?? textStyle("foreground", scheme).color;
+    $[0] = inherited;
+    $[1] = scheme;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const color = t1;
+  let T0;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[3] !== author || $[4] !== color || $[5] !== largerText) {
+    const caption = chatTextSize("caption", largerText);
+    const body = chatTextSize("small", largerText);
+    const t6 = cn(caption, "font-instrument-sans-semibold");
+    const t7 = sizeStyle(caption);
+    let t8;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = typeStyle("semibold");
+      $[11] = t8;
+    } else {
+      t8 = $[11];
+    }
+    let t9;
+    if ($[12] !== color) {
+      t9 = withAlpha(color, 0.75);
+      $[12] = color;
+      $[13] = t9;
+    } else {
+      t9 = $[13];
+    }
+    let t10;
+    if ($[14] !== t9) {
+      t10 = {
+        color: t9
+      };
+      $[14] = t9;
+      $[15] = t10;
+    } else {
+      t10 = $[15];
+    }
+    let t11;
+    if ($[16] !== t10 || $[17] !== t7) {
+      t11 = [t7, t8, t10];
+      $[16] = t10;
+      $[17] = t7;
+      $[18] = t11;
+    } else {
+      t11 = $[18];
+    }
+    if ($[19] !== author || $[20] !== t11 || $[21] !== t6) {
+      t5 = <Text numberOfLines={1} className={t6} style={t11}>{author}</Text>;
+      $[19] = author;
+      $[20] = t11;
+      $[21] = t6;
+      $[22] = t5;
+    } else {
+      t5 = $[22];
+    }
+    T0 = Text;
+    t3 = QUOTE_MAX_LINES;
+    t4 = cn(body, "font-instrument-sans");
+    t2 = sizeStyle(body);
+    $[3] = author;
+    $[4] = color;
+    $[5] = largerText;
+    $[6] = T0;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+  } else {
+    T0 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+  }
+  let t6;
+  if ($[23] !== color) {
+    t6 = withAlpha(color, 0.9);
+    $[23] = color;
+    $[24] = t6;
+  } else {
+    t6 = $[24];
+  }
+  let t7;
+  if ($[25] !== t6) {
+    t7 = {
+      color: t6
+    };
+    $[25] = t6;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== t2 || $[28] !== t7) {
+    t8 = [t2, t7];
+    $[27] = t2;
+    $[28] = t7;
+    $[29] = t8;
+  } else {
+    t8 = $[29];
+  }
+  let t9;
+  if ($[30] !== T0 || $[31] !== t3 || $[32] !== t4 || $[33] !== t8 || $[34] !== text) {
+    t9 = <T0 numberOfLines={t3} className={t4} style={t8}>{text}</T0>;
+    $[30] = T0;
+    $[31] = t3;
+    $[32] = t4;
+    $[33] = t8;
+    $[34] = text;
+    $[35] = t9;
+  } else {
+    t9 = $[35];
+  }
+  let t10;
+  if ($[36] !== t5 || $[37] !== t9) {
+    t10 = <>{t5}{t9}</>;
+    $[36] = t5;
+    $[37] = t9;
+    $[38] = t10;
+  } else {
+    t10 = $[38];
+  }
+  const content = t10;
+  let t11;
+  if ($[39] !== color) {
+    t11 = withAlpha(color, 0.45);
+    $[39] = color;
+    $[40] = t11;
+  } else {
+    t11 = $[40];
+  }
+  let t12;
+  if ($[41] !== t11) {
+    t12 = {
+      borderLeftWidth: 3,
+      borderLeftColor: t11,
+      borderRadius: 4
+    };
+    $[41] = t11;
+    $[42] = t12;
+  } else {
+    t12 = $[42];
+  }
+  const style = t12;
+  if (!onPress) {
+    const t13 = `Quoted message from ${author}: ${text}`;
+    let t14;
+    if ($[43] !== className) {
+      t14 = cn("min-w-0 gap-0.5 py-0.5 pl-2.5", className);
+      $[43] = className;
+      $[44] = t14;
+    } else {
+      t14 = $[44];
+    }
+    let t15;
+    if ($[45] !== content || $[46] !== style || $[47] !== t13 || $[48] !== t14 || $[49] !== testID) {
+      t15 = <View testID={testID} accessible={true} accessibilityLabel={t13} className={t14} style={style}>{content}</View>;
+      $[45] = content;
+      $[46] = style;
+      $[47] = t13;
+      $[48] = t14;
+      $[49] = testID;
+      $[50] = t15;
+    } else {
+      t15 = $[50];
+    }
+    return t15;
+  }
+  const t13 = accessibilityLabel ?? `Go to quoted message from ${author}`;
+  let t14;
+  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = touchSlop(MIN_TOUCH_TARGET);
+    $[51] = t14;
+  } else {
+    t14 = $[51];
+  }
+  let t15;
+  if ($[52] !== className) {
+    t15 = cn("min-h-11 min-w-0 justify-center gap-0.5 py-0.5 pl-2.5", className);
+    $[52] = className;
+    $[53] = t15;
+  } else {
+    t15 = $[53];
+  }
+  let t16;
+  if ($[54] !== content || $[55] !== onPress || $[56] !== style || $[57] !== t13 || $[58] !== t15 || $[59] !== testID || $[60] !== text) {
+    t16 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={t13} accessibilityHint={text} onPress={onPress} hitSlop={t14} className={t15} style={style}>{content}</Pressable>;
+    $[54] = content;
+    $[55] = onPress;
+    $[56] = style;
+    $[57] = t13;
+    $[58] = t15;
+    $[59] = testID;
+    $[60] = text;
+    $[61] = t16;
+  } else {
+    t16 = $[61];
+  }
+  return t16;
+}