@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/ai/icon-button.tsx

@@ -10,17 +10,44 @@ import { useScheme } from "../useScheme";
 /** The web `icon-sm` button: 32 square with a 16 icon. */
 export const CHAT_ICON_BUTTON_SIZE = 32;
 
+/**
+ * Side and icon per size: `sm` is the web `icon-sm` (32, 16 icon), `xs` the
+ * web `icon-xs` (28, 14 icon) and `md` the web `size-9` (36, 16 icon), Eva's
+ * composer send button. `touch` has no web twin: a 44 square with a 16 icon,
+ * for a row of ghost buttons a thumb taps (the message actions), where the
+ * web 28 squares 2 apart are a mouse's density.
+ */
+const CHAT_ICON_BUTTON = {
+  xs: { side: 28, icon: 14, className: "h-7 w-7" },
+  sm: { side: CHAT_ICON_BUTTON_SIZE, icon: 16, className: "h-8 w-8" },
+  md: { side: 36, icon: 16, className: "h-9 w-9" },
+  touch: { side: MIN_TOUCH_TARGET, icon: 16, className: "h-11 w-11" },
+} as const;
+
+export type ChatIconButtonSize = keyof typeof CHAT_ICON_BUTTON;
+
 export type ChatIconButtonProps = Omit<ButtonProps, "children" | "size" | "icon"> & {
   icon: ComponentType<IconProps>;
   /** Names the button for VoiceOver and TalkBack; it has no text. */
   label: string;
   /** Default: the variant's label colour. */
   iconColor?: string;
+  /** Default `sm`. Larger text paints each 44 with a 20 icon. */
+  size?: ChatIconButtonSize;
+  /**
+   * `"square"` (default) slops to 44 on every side. `"vertical"` slops only
+   * the height to 44, for a dense row (the message actions sit 2 to 4 apart),
+   * where sideways slop would overlap the next button and steal its taps.
+   * `{ left, right }` is `"vertical"` plus that much on each side, for the
+   * outer side of a button at the end of such a row.
+   */
+  slop?: "square" | "vertical" | { left: number; right: number };
 };
 
 /**
- * A round `Button` at the web `icon-sm` size (32), with the slop to 44. With
- * larger text it is painted 44 with a 20 icon. The message
+ * A round `Button` at the web `icon-sm` size (32), or another
+ * `ChatIconButtonSize`, with the slop to 44. With larger text it is painted
+ * 44 with a 20 icon. The message
  * actions, the composer tools and its send button, and the code copy button.
  * Round from the `Button` pill default; `shape="rounded"` gives radius 16.
  */
@@ -29,23 +56,31 @@ export function ChatIconButton({
   label,
   iconColor,
   variant = "ghost",
+  size = "sm",
+  slop = "square",
   className,
   ...props
 }: ChatIconButtonProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
-  const size = largerText ? MIN_TOUCH_TARGET : CHAT_ICON_BUTTON_SIZE;
+  const metrics = largerText
+    ? { side: MIN_TOUCH_TARGET, icon: 20, className: "h-11 w-11" }
+    : CHAT_ICON_BUTTON[size];
   const color = iconColor ?? buttonColors(variant, scheme)?.color ?? tokens.color.foreground[scheme];
   return (
     <Button
       variant={variant}
       size="icon"
       accessibilityLabel={label}
-      hitSlop={touchSlop(size)}
-      className={cn(largerText ? "h-11 w-11" : "h-8 w-8", className)}
+      hitSlop={
+        slop === "square"
+          ? touchSlop(metrics.side)
+          : { ...touchSlop(MIN_TOUCH_TARGET, metrics.side), ...(slop === "vertical" ? null : slop) }
+      }
+      className={cn(metrics.className, className)}
       {...props}
     >
-      <Icon size={largerText ? 20 : 16} color={color} />
+      <Icon size={metrics.icon} color={color} />
     </Button>
   );
 }

package/src/ai/index.ts

@@ -2,7 +2,7 @@
 // `@vvedantb/native-ui/ai` entry only, so apps without a chat do not bundle
 // them. Generic: no model names and no app logic.
 export { useStreamingDisclosure } from "./use-streaming-disclosure";
-export { chatTextSize, formatElapsed, MONO_FONT } from "./chat-text";
+export { chatTextSize, formatElapsed, META_TEXT_STYLE, MONO_FONT } from "./chat-text";
 export type { ChatTextKind } from "./chat-text";
 export { Shimmer, SHIMMER_LOW_OPACITY } from "./shimmer";
 export type { ShimmerProps } from "./shimmer";
@@ -17,8 +17,10 @@ export type { CollapsibleProps, CollapsibleTriggerProps } from "./collapsible";
 export {
   Conversation,
   ConversationContent,
+  ConversationList,
   ConversationEmptyState,
   ConversationScrollButton,
+  ConversationDock,
   useConversation,
   isScrolledToBottom,
   AT_BOTTOM_THRESHOLD,
@@ -26,8 +28,11 @@ export {
 export type {
   ConversationProps,
   ConversationContentProps,
+  ConversationListProps,
+  ConversationScroller,
   ConversationEmptyStateProps,
   ConversationScrollButtonProps,
+  ConversationDockProps,
 } from "./conversation";
 export {
   Message,
@@ -35,7 +40,9 @@ export {
   MessageActionsBar,
   MessageAction,
   MessageMeta,
+  MessageBotLabel,
   MESSAGE_ACTIONS,
+  MESSAGE_HIGHLIGHT_MS,
   userBubbleStyle,
   tintBubbleStyle,
 } from "./message";
@@ -46,9 +53,17 @@ export type {
   MessageBubble,
   MessageActionsBarProps,
   MessageMetaProps,
+  MessageBot,
+  MessageBotLabelProps,
   MessageActionKind,
   MessageActionProps,
 } from "./message";
+export { MessageActionSheet } from "./message-action-sheet";
+export type { MessageActionSheetProps, MessageSheetAction } from "./message-action-sheet";
+export { ReplyQuoteChip } from "./reply-quote-chip";
+export type { ReplyQuoteChipProps } from "./reply-quote-chip";
+export { MessageQuote, QUOTE_MAX_LINES } from "./message-quote";
+export type { MessageQuoteProps } from "./message-quote";
 export {
   Reasoning,
   ReasoningTrigger,
@@ -92,18 +107,48 @@ export type {
 } from "./chain-of-thought";
 export { ActivityStep } from "./activity-step";
 export type { ActivityStepProps, ActivityStepStatus } from "./activity-step";
+// The web timeline's pure logic (byte-identical copies) and its folded rules.
+// The step type is `ActivityTimelineStep` here: `ActivityStep` is the line above.
+export { activityStepHasRichDetail } from "./activity-step-types";
+export type {
+  ActivityStep as ActivityTimelineStep,
+  ActivityStepEdit,
+  ActivityStepOutput,
+  ActivityTodoItem,
+} from "./activity-step-types";
+export {
+  deriveActionGroupSummary,
+  deriveReadableCommandDisplay,
+  deriveStepRowPresentation,
+  resolveCommandVisualKind,
+} from "./activity-step-label";
+export type { CommandVisualKind, StepRowPresentation } from "./activity-step-label";
+export { activityRowKey, activitySegmentKey, buildActivityRows, groupActivityRows } from "./activity-tasks-utils";
+export type { ActivityRow, ActivitySegment } from "./activity-tasks-utils";
+export {
+  ACTIVITY_MAX_VISIBLE_BLOCKS,
+  ACTIVITY_MAX_VISIBLE_CHILDREN,
+  activityChildRows,
+  activityStepSeconds,
+  foldedActivitySegments,
+} from "./activity-timeline";
 export {
   PromptInput,
   PromptInputButton,
+  PromptInputChip,
   PromptInputSubmit,
+  PROMPT_INPUT_CHIP,
   isGenerating,
 } from "./prompt-input";
 export type {
   ChatStatus,
+  PromptInputChipProps,
   PromptInputProps,
   PromptInputButtonProps,
   PromptInputSubmitProps,
 } from "./prompt-input";
+export { PromptInputMenu, PromptInputMenuItem, PROMPT_INPUT_MENU, promptInputMenuHeight } from "./prompt-input-menu";
+export type { PromptInputMenuProps, PromptInputMenuItemProps } from "./prompt-input-menu";
 export { Suggestions, Suggestion } from "./suggestion";
 export type { SuggestionsProps, SuggestionProps } from "./suggestion";
 export { Sources, SourcesTrigger, SourcesContent, Source, sourcesLabel } from "./sources";
@@ -136,3 +181,9 @@ export { ChoiceQuestion, choiceAnswers } from "./choice-question";
 export type { ChoiceQuestionProps, ChoiceQuestionItem } from "./choice-question";
 export { ActivityStepDetail } from "./activity-step-detail";
 export type { ActivityStepDetailProps, ActivityStepDetailStep } from "./activity-step-detail";
+export { UnifiedDiff, DiffStat, UNIFIED_DIFF } from "./unified-diff";
+export type { UnifiedDiffProps, UnifiedDiffLine, DiffStatProps } from "./unified-diff";
+export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS } from "./tool-approval-card";
+export type { ToolApprovalCardProps, ToolDraftCardProps, ToolDecision } from "./tool-approval-card";
+export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";
+export type { SubagentRunCardProps, SubagentResultCardProps, SubagentStatus } from "./subagent-cards";

package/src/ai/message-action-sheet.tsx

@@ -0,0 +1,168 @@
+import { useEffect, type ComponentType } from "react";
+import { Modal, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import type { IconProps } from "@tabler/icons-react-native";
+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`. */
+export type MessageSheetAction = {
+  key: string;
+  label: string;
+  icon?: ComponentType<IconProps>;
+  /** Draws the row in the danger colour, such as Delete. */
+  destructive?: boolean;
+  onPress: () => void;
+};
+
+/** The sheet's default title, also the message's `longpress` action label. */
+export const MESSAGE_ACTIONS_TITLE = "Message actions";
+
+export type MessageActionSheetProps = {
+  open: boolean;
+  /** Called on a backdrop tap, Cancel, Android back and after an action runs. */
+  onClose: () => void;
+  actions: MessageSheetAction[];
+  /** Shown above the rows, and names the sheet for VoiceOver and TalkBack. Default "Message actions". */
+  title?: string;
+  /** Default "Cancel". */
+  cancelLabel?: string;
+  testID?: string;
+};
+
+/**
+ * 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({
+  open,
+  onClose,
+  actions,
+  title = MESSAGE_ACTIONS_TITLE,
+  cancelLabel = "Cancel",
+  testID = "message-action-sheet",
+}: MessageActionSheetProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+
+  useEffect(() => {
+    if (open) selectionHaptic();
+  }, [open]);
+
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("body", largerText);
+  const minHeight = largerText ? 56 : MIN_TOUCH_TARGET + 4;
+
+  return (
+    <Modal
+      visible={open}
+      transparent
+      animationType={reduceMotion ? "none" : "fade"}
+      statusBarTranslucent
+      onRequestClose={onClose}
+    >
+      <Pressable
+        testID={`${testID}-backdrop`}
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        onPress={onClose}
+        hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+        style={[StyleSheet.absoluteFill, { backgroundColor: palette.backdrop[scheme] }]}
+      />
+      <View pointerEvents="box-none" style={styles.anchor}>
+        <View
+          testID={testID}
+          accessibilityViewIsModal
+          accessibilityLabel={title}
+          onAccessibilityEscape={onClose}
+          className="w-full self-center px-2"
+          style={{ maxWidth: 480, paddingBottom: insets.bottom + 8 }}
+        >
+          <View
+            className="overflow-hidden"
+            style={{ backgroundColor: tokens.color.surface[scheme], borderRadius: tokens.radius.card }}
+          >
+            <Text
+              accessibilityRole="header"
+              numberOfLines={1}
+              className={cn(caption, "px-4 pb-1 pt-3 font-instrument-sans-medium")}
+              style={[sizeStyle(caption), typeStyle("medium"), textStyle("muted", scheme)]}
+            >
+              {title}
+            </Text>
+            {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>
+          <Pressable
+            testID={`${testID}-cancel`}
+            accessibilityRole="button"
+            accessibilityLabel={cancelLabel}
+            onPress={onClose}
+            hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+            className="mt-2 items-center justify-center"
+            style={{
+              minHeight,
+              backgroundColor: tokens.color.surface[scheme],
+              borderRadius: tokens.radius.card,
+            }}
+          >
+            <Text
+              className={cn(body, "font-instrument-sans-semibold")}
+              style={[sizeStyle(body), typeStyle("semibold"), textStyle("foreground", scheme)]}
+            >
+              {cancelLabel}
+            </Text>
+          </Pressable>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  anchor: { flex: 1, justifyContent: "flex-end" },
+});

package/src/ai/message-quote.tsx

@@ -0,0 +1,98 @@
+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";
+
+export type MessageQuoteProps = {
+  /** Who wrote the quoted message, such as "You" or the bot name. */
+  author: string;
+  /** The quoted text. Shown on up to two lines. */
+  text: string;
+  /** Makes the quote a button, so the app can scroll to and highlight the original. */
+  onPress?: () => void;
+  /** Names the button. Default "Go to quoted message from {author}". Used with `onPress` only. */
+  accessibilityLabel?: string;
+  className?: string;
+  testID?: string;
+};
+
+/** 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({
+  author,
+  text,
+  onPress,
+  accessibilityLabel,
+  className,
+  testID,
+}: MessageQuoteProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  const color = inherited ?? textStyle("foreground", scheme).color;
+  const caption = chatTextSize("caption", largerText);
+  const body = chatTextSize("small", largerText);
+  const content = (
+    <>
+      <Text
+        numberOfLines={1}
+        className={cn(caption, "font-instrument-sans-semibold")}
+        style={[sizeStyle(caption), typeStyle("semibold"), { color: withAlpha(color, 0.75) }]}
+      >
+        {author}
+      </Text>
+      <Text
+        numberOfLines={QUOTE_MAX_LINES}
+        className={cn(body, "font-instrument-sans")}
+        style={[sizeStyle(body), { color: withAlpha(color, 0.9) }]}
+      >
+        {text}
+      </Text>
+    </>
+  );
+  const style = {
+    borderLeftWidth: 3,
+    borderLeftColor: withAlpha(color, 0.45),
+    borderRadius: 4,
+  };
+  if (!onPress) {
+    return (
+      <View
+        testID={testID}
+        accessible
+        accessibilityLabel={`Quoted message from ${author}: ${text}`}
+        className={cn("min-w-0 gap-0.5 py-0.5 pl-2.5", className)}
+        style={style}
+      >
+        {content}
+      </View>
+    );
+  }
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? `Go to quoted message from ${author}`}
+      accessibilityHint={text}
+      onPress={onPress}
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      className={cn("min-h-11 min-w-0 justify-center gap-0.5 py-0.5 pl-2.5", className)}
+      style={style}
+    >
+      {content}
+    </Pressable>
+  );
+}