@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/ai/message.tsx

@@ -1,6 +1,8 @@
-import { createContext, useContext, type ComponentType, type ReactNode } from "react";
-import { Text, View, type ViewProps } from "react-native";
+import { createContext, useContext, useEffect, useState, type ComponentType, type ReactNode } from "react";
+import { Pressable, StyleSheet, Text, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import {
+  IconArrowBackUp,
   IconCopy,
   IconRefresh,
   IconThumbDown,
@@ -8,13 +10,15 @@ import {
   type IconProps,
 } from "@tabler/icons-react-native";
 import { cn } from "../cn";
-import { sizeStyle } from "../controlStyles";
+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 { chatTextSize } from "./chat-text";
-import { ChatIconButton } from "./icon-button";
+import { META_TEXT_STYLE, chatTextSize } from "./chat-text";
+import { ChatIconButton, type ChatIconButtonSize } from "./icon-button";
+import { MESSAGE_ACTIONS_TITLE, MessageActionSheet, type MessageSheetAction } from "./message-action-sheet";
 import { ChatTextColorContext, ResponseText } from "./response-text";
 
 export type MessageRole = "user" | "assistant" | "system";
@@ -24,25 +28,146 @@ const MessageContext = createContext<MessageRole>("assistant");
 export type MessageProps = ViewProps & {
   from: MessageRole;
   className?: string;
+  /**
+   * Called on a long press of the message. Without it (and without `actions`)
+   * the message is a plain `View`, as before.
+   */
+  onLongPress?: () => void;
+  /**
+   * Actions for a `MessageActionSheet` that opens on a long press, such as
+   * Reply and Copy. `onLongPress` also runs, before the sheet opens.
+   */
+  actions?: MessageSheetAction[];
+  /** Title of the action sheet. Default "Message actions". */
+  actionSheetTitle?: string;
+  /**
+   * True while the message is the target of a quote tap: a primary wash that
+   * fades over about 1.4 seconds, and a ring while it stays true. Set it back
+   * to `false` after the scroll, about 1.5 seconds later.
+   */
+  highlighted?: boolean;
+  /**
+   * For group chats: which bot sent this message. Draws a `MessageBotLabel`
+   * (avatar and name) above the content. Only when set; assistant messages only.
+   */
+  bot?: MessageBot;
 };
 
+/** The bot behind an incoming message in a group chat. */
+export type MessageBot = { name: string; avatar?: ReactNode };
+
+/** 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 scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const wash = useSharedValue(reduceMotion ? 0.5 : 1);
+  useEffect(() => {
+    if (reduceMotion) {
+      wash.set(0.5);
+      return;
+    }
+    wash.set(1);
+    wash.set(withTiming(0, { duration: MESSAGE_HIGHLIGHT_MS }));
+  }, [wash, reduceMotion]);
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: wash.get() }));
+  return (
+    <Animated.View
+      testID="message-highlight"
+      pointerEvents="none"
+      style={[
+        StyleSheet.absoluteFill,
+        {
+          borderRadius: tokens.radius.lg,
+          borderWidth: 1.5,
+          borderColor: withAlpha(palette.primary[scheme], 0.5),
+          backgroundColor: withAlpha(palette.primary[scheme], HIGHLIGHT_WASH),
+        },
+        animatedStyle,
+      ]}
+    />
+  );
+}
+
 /**
  * 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({ from, className, style, ...props }: MessageProps) {
+export function Message({
+  from,
+  className,
+  style,
+  onLongPress,
+  actions,
+  actionSheetTitle,
+  highlighted = false,
+  bot,
+  children,
+  ...props
+}: MessageProps) {
   const user = from === "user";
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const hasActions = actions != null && actions.length > 0;
+  const longPressable = onLongPress != null || hasActions;
+  const longPress = () => {
+    onLongPress?.();
+    if (hasActions) setSheetOpen(true);
+  };
+  const layout: ViewProps["style"] = [
+    { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
+    style,
+  ];
+  const merged = cn("w-full max-w-[95%] gap-2", className);
+  const parts = (
+    <>
+      {bot && !user ? <MessageBotLabel name={bot.name} avatar={bot.avatar} /> : null}
+      {children}
+      {highlighted ? <MessageHighlight /> : null}
+    </>
+  );
   return (
     <MessageContext.Provider value={from}>
-      <View
-        className={cn("w-full max-w-[95%] gap-2", className)}
-        style={[
-          { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
-          style,
-        ]}
-        {...props}
-      />
+      {longPressable ? (
+        <>
+          <Pressable
+            accessible={false}
+            className={merged}
+            style={layout}
+            onLongPress={longPress}
+            // TalkBack's actions menu reaches the same sheet as a long press.
+            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>
+      )}
     </MessageContext.Provider>
   );
 }
@@ -62,8 +187,8 @@ export function userBubbleStyle(scheme: "light" | "dark") {
 /**
  * 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 px-3 py-2 text-foreground`): a 10% wash of the primary colour
- * with foreground text and every corner at 16.
+ * 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.
  */
 export type MessageBubble = "primary" | "tint";
 
@@ -75,54 +200,112 @@ export function tintBubbleStyle(scheme: "light" | "dark") {
   };
 }
 
+export type MessageBotLabelProps = {
+  name: string;
+  /** An avatar node, such as `<Avatar size="xs" />`. Drawn before the name. */
+  avatar?: ReactNode;
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * 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({ name, avatar, className, testID = "message-bot-label" }: MessageBotLabelProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("caption", largerText);
+  return (
+    <View
+      testID={testID}
+      accessible
+      accessibilityLabel={`From ${name}`}
+      className={cn("flex-row items-center gap-1.5", className)}
+    >
+      {avatar}
+      <Text
+        numberOfLines={1}
+        className={cn(size, "font-instrument-sans-semibold")}
+        style={[sizeStyle(size), typeStyle("semibold"), { color: tokens.color.muted[scheme] }]}
+      >
+        {name}
+      </Text>
+    </View>
+  );
+}
+
 export type MessageContentProps = ViewProps & {
   /** User messages only. Default `"primary"`. */
   bubble?: MessageBubble;
+  /** A `MessageQuote` drawn above the content, inside the bubble. */
+  quote?: ReactNode;
   className?: string;
 };
 
 /**
- * The message body. A user message is a filled bubble: by default `px-4 py-3`
- * with the primary fill and label colour, or with `bubble="tint"` `px-3 py-2`
- * on a 10% primary wash with the foreground colour. An assistant message has
+ * 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({ children, bubble = "primary", className, style, ...props }: MessageContentProps) {
+export function MessageContent({ children, bubble = "primary", quote, className, style, ...props }: MessageContentProps) {
   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];
   const bubbleStyle = !user ? null : tint ? tintBubbleStyle(scheme) : userBubbleStyle(scheme);
+  const body = typeof children === "string" ? <ResponseText>{children}</ResponseText> : children;
   return (
     <ChatTextColorContext.Provider value={color}>
       <View
-        className={cn("min-w-0 max-w-full gap-2", user && (tint ? "px-3 py-2" : "px-4 py-3"), className)}
+        className={cn("min-w-0 max-w-full gap-2", user && "px-4 py-3", className)}
         style={[bubbleStyle, style]}
         {...props}
       >
-        {typeof children === "string" ? <ResponseText>{children}</ResponseText> : children}
+        {quote ? (
+          <>
+            {quote}
+            {body}
+          </>
+        ) : (
+          body
+        )}
       </View>
     </ChatTextColorContext.Provider>
   );
 }
 
-export type MessageMetaProps = { children: ReactNode; className?: string };
+export type MessageMetaProps = {
+  children: ReactNode;
+  /**
+   * Default `caption` (`text-xs`, 12 / 16). `2xs` is the web `text-2xs` token
+   * (11 / 16), as Eva's web chat. Larger text draws both at the caption step.
+   */
+  size?: "caption" | "2xs";
+  className?: string;
+};
 
 /**
  * The muted clock and duration after a message's actions, as Eva's web chat
- * (`text-2xs tabular-nums text-muted-foreground/60`, "10:21 PM · 1m"): the
- * caption size on phones, the muted colour at 60%, tabular figures.
+ * (`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({ children, className }: MessageMetaProps) {
+export function MessageMeta({ children, size = "caption", className }: MessageMetaProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
-  const size = chatTextSize("caption", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const tiny = size === "2xs" && !largerText;
   return (
     <Text
-      className={cn(size, "font-instrument-sans", className)}
-      style={[sizeStyle(size), { color: withAlpha(tokens.color.muted[scheme], 0.6), fontVariant: ["tabular-nums"] }]}
+      className={cn(!tiny && caption, "font-instrument-sans", className)}
+      style={[
+        tiny ? META_TEXT_STYLE : sizeStyle(caption),
+        { color: withAlpha(tokens.color.muted[scheme], 0.6), fontVariant: ["tabular-nums"] },
+      ]}
     >
       {children}
     </Text>
@@ -138,6 +321,7 @@ export function MessageActionsBar({ className, ...props }: MessageActionsBarProp
 
 /** 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" },
@@ -159,12 +343,20 @@ export type MessageActionProps = {
    */
   selected?: boolean;
   disabled?: boolean;
+  /**
+   * Default `sm`, the web `icon-sm` (32, 16 icon). `xs` is the web `icon-xs`
+   * (28, 14 icon), as Eva's web chat; `touch` is a whole 44 square (16 icon)
+   * for a phone, so the row needs no slop.
+   */
+  size?: ChatIconButtonSize;
   testID?: string;
 };
 
 /**
- * A ghost icon button under a message: the web `icon-sm` (32, 16 icon) with
- * the slop to 44. Copying is up to the app (`onPress`): React Native's own
+ * 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({
@@ -174,6 +366,7 @@ export function MessageAction({
   onPress,
   selected = false,
   disabled,
+  size,
   testID,
 }: MessageActionProps) {
   const scheme = useScheme();
@@ -187,6 +380,8 @@ export function MessageAction({
       accessibilityState={{ selected }}
       onPress={onPress}
       disabled={disabled}
+      size={size}
+      slop="vertical"
       testID={testID}
     />
   );

package/src/ai/prompt-input-menu.tsx

@@ -0,0 +1,197 @@
+import { Children, useEffect, type ReactNode } 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 } as const;
+
+/** Menu height for a window height: the share, kept inside the web's 160 to 340. */
+export function promptInputMenuHeight(windowHeight: number): number {
+  return Math.round(
+    Math.max(PROMPT_INPUT_MENU.minHeight, Math.min(PROMPT_INPUT_MENU.maxHeight, windowHeight * PROMPT_INPUT_MENU.windowShare)),
+  );
+}
+
+export type PromptInputMenuProps = {
+  /** Names the list for VoiceOver and TalkBack, as the web listbox `aria-label` (such as "Mentions" or "Skills"). */
+  title: string;
+  /** `PromptInputMenuItem`s. With none, `empty` shows instead. */
+  children?: ReactNode;
+  /** Shown when there are no rows. Default "No matches.", as the web. */
+  empty?: ReactNode;
+  /**
+   * Closes the picker, as Escape does on the web. Android back calls it while
+   * the picker is mounted, before the screen behind gets the press.
+   */
+  onDismiss?: () => void;
+  testID?: string;
+};
+
+/**
+ * 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({ title, children, empty = "No matches.", onDismiss, testID }: PromptInputMenuProps) {
+  const scheme = useScheme();
+  // Back closes the picker first. An effect: the subscription is a native one.
+  useEffect(() => {
+    if (!onDismiss) return;
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onDismiss();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [onDismiss]);
+  const { height } = useWindowDimensions();
+  const hasRows = Children.toArray(children).length > 0;
+  return (
+    <View
+      testID={testID}
+      className="overflow-hidden border"
+      style={{
+        backgroundColor: palette.overlay[scheme],
+        borderColor: tokens.color.border[scheme],
+        borderRadius: tokens.radius.lg,
+        maxHeight: promptInputMenuHeight(height),
+      }}
+    >
+      {hasRows ? (
+        <ScrollView
+          accessibilityRole="list"
+          accessibilityLabel={title}
+          keyboardShouldPersistTaps="always"
+          contentContainerClassName="py-1"
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        // Web: `px-3 py-2.5 text-xs leading-relaxed text-muted-foreground`.
+        <Text
+          className="px-3 py-2.5 font-instrument-sans text-xs"
+          style={[sizeStyle("text-xs", "relaxed"), textStyle("muted", scheme)]}
+        >
+          {empty}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+/** 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 } as const;
+
+export type PromptInputMenuItemProps = {
+  /** The character that inserts this row, muted before the label: `@` or `/`. Left out when `leading` names a person. */
+  prefix?: string;
+  label: string;
+  /** One muted line under the label, such as a skill's description. */
+  description?: string;
+  /** Before the text, such as a teammate's `Avatar` (24). */
+  leading?: ReactNode;
+  /** At the end in place of `badge`, such as a 16 kind icon. */
+  trailing?: ReactNode;
+  /** A small source chip at the end (such as "Eva" or "Claude"), with an optional 11 `badgeIcon`. */
+  badge?: string;
+  badgeIcon?: ReactNode;
+  /** The row Return picks, tinted as the web's keyboard-selected row. */
+  selected?: boolean;
+  onPress?: () => void;
+  testID?: string;
+};
+
+/** A description longer than this is cut with "…", as the web `previewOneLine`. */
+const DESCRIPTION_MAX = 72;
+
+function oneLine(text: string): string {
+  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({
+  prefix,
+  label,
+  description,
+  leading,
+  trailing,
+  badge,
+  badgeIcon,
+  selected = false,
+  onPress,
+  testID,
+}: PromptInputMenuItemProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = textStyle("muted", scheme);
+  const labelSize = sizeStyle(largerText ? "text-lg" : "text-sm");
+  const detail = description ? oneLine(description) : undefined;
+  const end =
+    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);
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      accessibilityLabel={[`${prefix ?? ""}${label}`, detail, badge].filter(Boolean).join(", ")}
+      onPress={onPress}
+      // Already 44 high and the list's width: no slop past the row.
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      // A plain style: NativeWind drops a function `style` beside `className`.
+      className={cn("mx-1 flex-row items-center gap-2 px-2 py-1.5 active:opacity-70", largerText && "py-2")}
+      style={{
+        minHeight: MIN_TOUCH_TARGET,
+        borderRadius: 8,
+        backgroundColor: selected ? withAlpha(palette.primary[scheme], scheme === "dark" ? 0.25 : 0.15) : "transparent",
+      }}
+    >
+      {leading}
+      <View className="min-w-0 flex-1 gap-0.5">
+        <View className="min-w-0 flex-row items-center gap-1.5">
+          <Text
+            numberOfLines={1}
+            className={cn("min-w-0 flex-1", selected ? "font-instrument-sans-medium" : "font-instrument-sans")}
+            style={[labelSize, textStyle("foreground", scheme), selected ? typeStyle("medium") : null]}
+          >
+            {prefix ? <Text style={muted}>{prefix}</Text> : null}
+            {label}
+          </Text>
+          {end}
+        </View>
+        {detail ? (
+          <Text numberOfLines={1} className="font-instrument-sans text-xs" style={[sizeStyle("text-xs"), muted]}>
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}