@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/message.jsx

@@ -0,0 +1,739 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { IconArrowBackUp, IconCopy, IconRefresh, IconThumbDown, IconThumbUp } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { META_TEXT_STYLE, chatTextSize } from "./chat-text";
+import { ChatIconButton } from "./icon-button";
+import { MESSAGE_ACTIONS_TITLE, MessageActionSheet } from "./message-action-sheet";
+import { ChatTextColorContext, ResponseText } from "./response-text";
+const MessageContext = createContext("assistant");
+
+/** The bot behind an incoming message in a group chat. */
+
+/** How long the highlight wash takes to fade, in milliseconds. */
+export const MESSAGE_HIGHLIGHT_MS = 1400;
+
+/** Peak opacity of the highlight wash (the primary colour). */
+const HIGHLIGHT_WASH = 0.18;
+function MessageHighlight() {
+  const $ = _c(14);
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const wash = useSharedValue(reduceMotion ? 0.5 : 1);
+  let t0;
+  let t1;
+  if ($[0] !== reduceMotion || $[1] !== wash) {
+    t0 = () => {
+      if (reduceMotion) {
+        wash.set(0.5);
+        return;
+      }
+      wash.set(1);
+      wash.set(withTiming(0, {
+        duration: MESSAGE_HIGHLIGHT_MS
+      }));
+    };
+    t1 = [wash, reduceMotion];
+    $[0] = reduceMotion;
+    $[1] = wash;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  useEffect(t0, t1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: wash.get()
+  }));
+  const t2 = palette.primary[scheme];
+  let t3;
+  if ($[4] !== t2) {
+    t3 = withAlpha(t2, 0.5);
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  const t4 = palette.primary[scheme];
+  let t5;
+  if ($[6] !== t4) {
+    t5 = withAlpha(t4, HIGHLIGHT_WASH);
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t3 || $[9] !== t5) {
+    t6 = {
+      borderRadius: tokens.radius.lg,
+      borderWidth: 1.5,
+      borderColor: t3,
+      backgroundColor: t5
+    };
+    $[8] = t3;
+    $[9] = t5;
+    $[10] = t6;
+  } else {
+    t6 = $[10];
+  }
+  let t7;
+  if ($[11] !== animatedStyle || $[12] !== t6) {
+    t7 = <Animated.View testID="message-highlight" pointerEvents="none" style={[StyleSheet.absoluteFill, t6, animatedStyle]} />;
+    $[11] = animatedStyle;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  return t7;
+}
+
+/**
+ * One message: the web `w-full max-w-[95%] flex-col gap-2`. A user message
+ * sits at the end of the row with its parts at the end; an assistant message
+ * at the start, its parts full width.
+ *
+ * With `onLongPress` or `actions` the message is a `Pressable` (same layout,
+ * `className`, `style` and view props) and a long press opens the
+ * `MessageActionSheet`; TalkBack reaches it as the `longpress` action. It stays
+ * a non-accessible container so its buttons and links keep their own focus:
+ * also offer the actions in a `MessageActionsBar` for screen reader users. `highlighted` draws the quote-jump highlight.
+ */
+export function Message(t0) {
+  const $ = _c(45);
+  let actionSheetTitle;
+  let actions;
+  let bot;
+  let children;
+  let className;
+  let from;
+  let onLongPress;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      from,
+      className,
+      style,
+      onLongPress,
+      actions,
+      actionSheetTitle,
+      highlighted: t1,
+      bot,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = actionSheetTitle;
+    $[2] = actions;
+    $[3] = bot;
+    $[4] = children;
+    $[5] = className;
+    $[6] = from;
+    $[7] = onLongPress;
+    $[8] = props;
+    $[9] = style;
+    $[10] = t1;
+  } else {
+    actionSheetTitle = $[1];
+    actions = $[2];
+    bot = $[3];
+    children = $[4];
+    className = $[5];
+    from = $[6];
+    onLongPress = $[7];
+    props = $[8];
+    style = $[9];
+    t1 = $[10];
+  }
+  const highlighted = t1 === undefined ? false : t1;
+  const user = from === "user";
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const hasActions = actions != null && actions.length > 0;
+  const longPressable = onLongPress != null || hasActions;
+  let t2;
+  if ($[11] !== hasActions || $[12] !== onLongPress) {
+    t2 = () => {
+      onLongPress?.();
+      if (hasActions) {
+        setSheetOpen(true);
+      }
+    };
+    $[11] = hasActions;
+    $[12] = onLongPress;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  const longPress = t2;
+  const t3 = user ? "flex-end" : "flex-start";
+  const t4 = user ? "flex-end" : "stretch";
+  let t5;
+  if ($[14] !== t3 || $[15] !== t4) {
+    t5 = {
+      alignSelf: t3,
+      alignItems: t4
+    };
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== style || $[18] !== t5) {
+    t6 = [t5, style];
+    $[17] = style;
+    $[18] = t5;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  const layout = t6;
+  let t7;
+  if ($[20] !== className) {
+    t7 = cn("w-full max-w-[95%] gap-2", className);
+    $[20] = className;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  const merged = t7;
+  let t8;
+  if ($[22] !== bot || $[23] !== user) {
+    t8 = bot && !user ? <MessageBotLabel name={bot.name} avatar={bot.avatar} /> : null;
+    $[22] = bot;
+    $[23] = user;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== highlighted) {
+    t9 = highlighted ? <MessageHighlight /> : null;
+    $[25] = highlighted;
+    $[26] = t9;
+  } else {
+    t9 = $[26];
+  }
+  let t10;
+  if ($[27] !== children || $[28] !== t8 || $[29] !== t9) {
+    t10 = <>{t8}{children}{t9}</>;
+    $[27] = children;
+    $[28] = t8;
+    $[29] = t9;
+    $[30] = t10;
+  } else {
+    t10 = $[30];
+  }
+  const parts = t10;
+  let t11;
+  if ($[31] !== actionSheetTitle || $[32] !== actions || $[33] !== hasActions || $[34] !== layout || $[35] !== longPress || $[36] !== longPressable || $[37] !== merged || $[38] !== parts || $[39] !== props || $[40] !== sheetOpen) {
+    t11 = longPressable ? <><Pressable accessible={false} className={merged} style={layout} onLongPress={longPress} accessibilityActions={[{
+        name: "longpress",
+        label: actionSheetTitle ?? MESSAGE_ACTIONS_TITLE
+      }]} onAccessibilityAction={event => {
+        if (event.nativeEvent.actionName === "longpress") {
+          longPress();
+        }
+      }} {...props}>{parts}</Pressable>{hasActions ? <MessageActionSheet open={sheetOpen} onClose={() => setSheetOpen(false)} actions={actions} title={actionSheetTitle} /> : null}</> : <View className={merged} style={layout} {...props}>{parts}</View>;
+    $[31] = actionSheetTitle;
+    $[32] = actions;
+    $[33] = hasActions;
+    $[34] = layout;
+    $[35] = longPress;
+    $[36] = longPressable;
+    $[37] = merged;
+    $[38] = parts;
+    $[39] = props;
+    $[40] = sheetOpen;
+    $[41] = t11;
+  } else {
+    t11 = $[41];
+  }
+  let t12;
+  if ($[42] !== from || $[43] !== t11) {
+    t12 = <MessageContext.Provider value={from}>{t11}</MessageContext.Provider>;
+    $[42] = from;
+    $[43] = t11;
+    $[44] = t12;
+  } else {
+    t12 = $[44];
+  }
+  return t12;
+}
+
+/**
+ * The web user bubble: `rounded-2xl rounded-br-md bg-primary` (radius 16 with
+ * the bottom-right corner at 14, `tokens.radius.md`).
+ */
+export function userBubbleStyle(scheme) {
+  return {
+    backgroundColor: palette.primary[scheme],
+    borderRadius: tokens.radius.lg,
+    borderBottomRightRadius: tokens.radius.md
+  };
+}
+
+/**
+ * A user bubble's look. `primary` is the web default (`bg-primary` with the
+ * label colour). `tint` is the chat override Eva uses (`rounded-surface
+ * bg-primary/10 text-foreground`, still `px-4 py-3`): a 10% wash of the
+ * primary colour with foreground text and every corner at 16.
+ */
+
+/** The `tint` bubble: the primary colour at 10% alpha, radius 16 on every corner. */
+export function tintBubbleStyle(scheme) {
+  return {
+    backgroundColor: withAlpha(palette.primary[scheme], 0.1),
+    borderRadius: tokens.radius.lg
+  };
+}
+/**
+ * Which bot sent a message, for group chats: an optional avatar and the name
+ * in the caption size. `Message` draws it for its `bot` prop. To compose it
+ * yourself, render it above `MessageContent` (for example in `renderMessage`).
+ */
+export function MessageBotLabel(t0) {
+  const $ = _c(37);
+  const {
+    name,
+    avatar,
+    className,
+    testID: t1
+  } = t0;
+  const testID = t1 === undefined ? "message-bot-label" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== avatar || $[1] !== className || $[2] !== largerText || $[3] !== name || $[4] !== testID) {
+    const size = chatTextSize("caption", largerText);
+    T1 = View;
+    t5 = testID;
+    t6 = true;
+    t7 = `From ${name}`;
+    if ($[15] !== className) {
+      t8 = cn("flex-row items-center gap-1.5", className);
+      $[15] = className;
+      $[16] = t8;
+    } else {
+      t8 = $[16];
+    }
+    t9 = avatar;
+    T0 = Text;
+    t3 = 1;
+    t4 = cn(size, "font-instrument-sans-semibold");
+    t2 = sizeStyle(size);
+    $[0] = avatar;
+    $[1] = className;
+    $[2] = largerText;
+    $[3] = name;
+    $[4] = testID;
+    $[5] = T0;
+    $[6] = T1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    T0 = $[5];
+    T1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+    t7 = $[12];
+    t8 = $[13];
+    t9 = $[14];
+  }
+  let t10;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = typeStyle("semibold");
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  const t11 = tokens.color.muted[scheme];
+  let t12;
+  if ($[18] !== t11) {
+    t12 = {
+      color: t11
+    };
+    $[18] = t11;
+    $[19] = t12;
+  } else {
+    t12 = $[19];
+  }
+  let t13;
+  if ($[20] !== t12 || $[21] !== t2) {
+    t13 = [t2, t10, t12];
+    $[20] = t12;
+    $[21] = t2;
+    $[22] = t13;
+  } else {
+    t13 = $[22];
+  }
+  let t14;
+  if ($[23] !== T0 || $[24] !== name || $[25] !== t13 || $[26] !== t3 || $[27] !== t4) {
+    t14 = <T0 numberOfLines={t3} className={t4} style={t13}>{name}</T0>;
+    $[23] = T0;
+    $[24] = name;
+    $[25] = t13;
+    $[26] = t3;
+    $[27] = t4;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== T1 || $[30] !== t14 || $[31] !== t5 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9) {
+    t15 = <T1 testID={t5} accessible={t6} accessibilityLabel={t7} className={t8}>{t9}{t14}</T1>;
+    $[29] = T1;
+    $[30] = t14;
+    $[31] = t5;
+    $[32] = t6;
+    $[33] = t7;
+    $[34] = t8;
+    $[35] = t9;
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  return t15;
+}
+/**
+ * The message body. A user message is a filled bubble, `px-4 py-3`: by
+ * default with the primary fill and label colour, or with `bubble="tint"` on
+ * a 10% primary wash with the foreground colour. An assistant message has
+ * no fill and the foreground colour. A string child is drawn as
+ * `ResponseText`, and `ResponseText` inside takes the colour.
+ */
+export function MessageContent(t0) {
+  const $ = _c(30);
+  let children;
+  let className;
+  let props;
+  let quote;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      bubble: t1,
+      quote,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = quote;
+    $[5] = style;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    quote = $[4];
+    style = $[5];
+    t1 = $[6];
+  }
+  const bubble = t1 === undefined ? "primary" : t1;
+  const from = useContext(MessageContext);
+  const scheme = useScheme();
+  const user = from === "user";
+  const tint = user && bubble === "tint";
+  const color = user && !tint ? palette.primaryForeground[scheme] : tokens.color.foreground[scheme];
+  let t2;
+  if ($[7] !== scheme || $[8] !== tint || $[9] !== user) {
+    t2 = !user ? null : tint ? tintBubbleStyle(scheme) : userBubbleStyle(scheme);
+    $[7] = scheme;
+    $[8] = tint;
+    $[9] = user;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  const bubbleStyle = t2;
+  let t3;
+  if ($[11] !== children) {
+    t3 = typeof children === "string" ? <ResponseText>{children}</ResponseText> : children;
+    $[11] = children;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  const body = t3;
+  const t4 = user && "px-4 py-3";
+  let t5;
+  if ($[13] !== className || $[14] !== t4) {
+    t5 = cn("min-w-0 max-w-full gap-2", t4, className);
+    $[13] = className;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== bubbleStyle || $[17] !== style) {
+    t6 = [bubbleStyle, style];
+    $[16] = bubbleStyle;
+    $[17] = style;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  let t7;
+  if ($[19] !== body || $[20] !== quote) {
+    t7 = quote ? <>{quote}{body}</> : body;
+    $[19] = body;
+    $[20] = quote;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== props || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+    t8 = <View className={t5} style={t6} {...props}>{t7}</View>;
+    $[22] = props;
+    $[23] = t5;
+    $[24] = t6;
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== color || $[28] !== t8) {
+    t9 = <ChatTextColorContext.Provider value={color}>{t8}</ChatTextColorContext.Provider>;
+    $[27] = color;
+    $[28] = t8;
+    $[29] = t9;
+  } else {
+    t9 = $[29];
+  }
+  return t9;
+}
+/**
+ * The muted clock and duration after a message's actions, as Eva's web chat
+ * (`tabular-nums text-muted-foreground/60`, "10:21 PM · 1m"): the caption
+ * size (or `size="2xs"`), the muted colour at 60%, tabular figures.
+ */
+export function MessageMeta(t0) {
+  const $ = _c(19);
+  const {
+    children,
+    size: t1,
+    className
+  } = t0;
+  const size = t1 === undefined ? "caption" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let t2;
+  let t3;
+  if ($[0] !== className || $[1] !== largerText || $[2] !== size) {
+    const caption = chatTextSize("caption", largerText);
+    const tiny = size === "2xs" && !largerText;
+    T0 = Text;
+    t3 = cn(!tiny && caption, "font-instrument-sans", className);
+    t2 = tiny ? META_TEXT_STYLE : sizeStyle(caption);
+    $[0] = className;
+    $[1] = largerText;
+    $[2] = size;
+    $[3] = T0;
+    $[4] = t2;
+    $[5] = t3;
+  } else {
+    T0 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+  }
+  const t4 = tokens.color.muted[scheme];
+  let t5;
+  if ($[6] !== t4) {
+    t5 = withAlpha(t4, 0.6);
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = ["tabular-nums"];
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== t5) {
+    t7 = {
+      color: t5,
+      fontVariant: t6
+    };
+    $[9] = t5;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== t2 || $[12] !== t7) {
+    t8 = [t2, t7];
+    $[11] = t2;
+    $[12] = t7;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] !== T0 || $[15] !== children || $[16] !== t3 || $[17] !== t8) {
+    t9 = <T0 className={t3} style={t8}>{children}</T0>;
+    $[14] = T0;
+    $[15] = children;
+    $[16] = t3;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  return t9;
+}
+/** A row of `MessageAction`s under a message, as the web `flex items-center gap-1`. */
+export function MessageActionsBar(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("flex-row items-center gap-1", 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;
+}
+
+/** The usual actions, with their icons and accessibility labels. */
+export const MESSAGE_ACTIONS = {
+  reply: {
+    icon: IconArrowBackUp,
+    label: "Reply"
+  },
+  copy: {
+    icon: IconCopy,
+    label: "Copy"
+  },
+  retry: {
+    icon: IconRefresh,
+    label: "Retry"
+  },
+  like: {
+    icon: IconThumbUp,
+    label: "Good response"
+  },
+  dislike: {
+    icon: IconThumbDown,
+    label: "Bad response"
+  }
+};
+/**
+ * A ghost icon button under a message: the web `icon-sm` (32, 16 icon), or
+ * `icon-xs` with `size="xs"`, with the slop to 44 high. It has no sideways
+ * slop: the actions sit 2 to 4 apart, and slop there would overlap the next
+ * one, so a tap on Copy could fork or rate instead. Copying is up to the app (`onPress`): React Native's own
+ * `Clipboard` is deprecated, and native-ui adds no clipboard package.
+ */
+export function MessageAction(t0) {
+  const $ = _c(11);
+  const {
+    kind,
+    icon,
+    label,
+    onPress,
+    selected: t1,
+    disabled,
+    size,
+    testID
+  } = t0;
+  const selected = t1 === undefined ? false : t1;
+  const scheme = useScheme();
+  const preset = kind ? MESSAGE_ACTIONS[kind] : undefined;
+  const Icon = icon ?? preset?.icon ?? IconCopy;
+  const t2 = label ?? preset?.label ?? "";
+  const t3 = selected ? tokens.color.foreground[scheme] : undefined;
+  let t4;
+  if ($[0] !== selected) {
+    t4 = {
+      selected
+    };
+    $[0] = selected;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== Icon || $[3] !== disabled || $[4] !== onPress || $[5] !== size || $[6] !== t2 || $[7] !== t3 || $[8] !== t4 || $[9] !== testID) {
+    t5 = <ChatIconButton icon={Icon} label={t2} iconColor={t3} accessibilityState={t4} onPress={onPress} disabled={disabled} size={size} slop="vertical" testID={testID} />;
+    $[2] = Icon;
+    $[3] = disabled;
+    $[4] = onPress;
+    $[5] = size;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = testID;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  return t5;
+}