Prompt Input

React Native

A chat composer with attachments, voice and stop.

Install

Source on GitHub

It works in Expo and in bare React Native. New to beUI Native? Set up your app first.

$ bunx beui-native add

Copies the component and the shared files it needs into src/, adds the theme tokens if they're missing, and installs its libraries. Files you've changed are kept.

Keep the folder layout, since the component imports the shared files by relative path.

1Install the libraries

npx expo install react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
npm install uniwind tailwindcss

Wrap your app in GestureHandlerRootView if it isn't already.

2Add the theme tokens

Once per app. Import it from the CSS file Uniwind reads, after Tailwind and Uniwind, and change the values to match your brand.

CSSsrc/styles/theme.css

/* Matches the default beUI palette in ui-components/lib/themes.ts.
   Native surface maps to card; muted maps to muted-foreground. */
@layer theme {
  :root {
    @variant light {
      --color-background: oklch(99% 0 0);
      --color-surface: oklch(97% 0 0);
      --color-foreground: oklch(15% 0 0);
      --color-muted: oklch(50% 0 0);
      --color-border: oklch(15% 0 0 / 0.06);
      --color-border-strong: oklch(15% 0 0 / 0.16);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #dc2626;
      --color-success: #059669;
      --color-warning: #d97706;
    }
  }

  :root {
    @variant dark {
      --color-background: #151515;
      --color-surface: #1c1c1c;
      --color-foreground: oklch(96% 0 0);
      --color-muted: oklch(62% 0 0);
      --color-border: rgb(255 255 255 / 0.05);
      --color-border-strong: rgb(255 255 255 / 0.14);
      --color-primary: #0285f7;
      --color-on-primary: #ffffff;
      --color-destructive: #f87171;
      --color-success: #34d399;
      --color-warning: #fbbf24;
    }
  }

  /* Tailwind's default monospace stack isn't a font React Native can load. */
  :root {
    @variant ios {
      --font-mono: Menlo;
    }
  }

  :root {
    @variant android {
      --font-mono: monospace;
    }
  }
}

3Copy the shared files

TSXsrc/components/menu/menu.tsx

import {
  createContext,
  type ReactNode,
  useCallback,
  useContext,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  Modal,
  Pressable,
  type PressableProps,
  ScrollView,
  StyleSheet,
  Text,
  useWindowDimensions,
  View,
} from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
  LinearTransition,
  ReduceMotion,
  type SharedValue,
  useAnimatedReaction,
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { scheduleOnRN } from "react-native-worklets";
import { useResolveClassNames } from "uniwind";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import { CheckGlyph, ChevronDownGlyph } from "../../primitives/agent-icons";
import { type IconSource, renderIcon } from "../../primitives/render-icon";
import { EASE_OUT, SPRING_LAYOUT, SPRING_SWAP } from "../../styles/motion";

const EDGE = 12;
const GAP = 8;
const TOP_CLEARANCE = 56;
const STAGGER = 24;
// The panel's height glides as a submenu replaces the items.
const PANEL_RESIZE = LinearTransition.springify()
  .stiffness(SPRING_LAYOUT.stiffness)
  .damping(SPRING_LAYOUT.damping)
  .mass(SPRING_LAYOUT.mass);
const SPRING_OPEN = {
  stiffness: 380,
  damping: 30,
  mass: 0.6,
  reduceMotion: ReduceMotion.System,
};
const CLOSE = { duration: 150, easing: EASE_OUT };

type Frame = { x: number; y: number; width: number; height: number };
type Slot = { top: number; height: number; disabled: boolean };
type Entry = { slot: Slot; select: () => void; closes: boolean };

type MenuContextValue = {
  open: boolean;
  setOpen: (open: boolean) => void;
  anchor: Frame | null;
  triggerRef: React.RefObject<View | null>;
  reduce: boolean;
  /** Item frames in layout order, read on the UI thread while sliding. */
  slots: SharedValue<Slot[]>;
  highlight: SharedValue<number>;
  register: (id: string, entry: Entry | null) => void;
  selectAt: (index: number) => void;
  /** Order in which items mount, for the entrance stagger. */
  order: (id: string) => number;
  /** The page on show: the root list, or a submenu's id. */
  page: string;
  /** The open submenus, outermost first. */
  stack: { id: string; label: string }[];
  /** 1 after opening a submenu, -1 after going back. */
  direction: number;
  push: (id: string, label: string) => void;
  back: () => void;
};

const ROOT = "root";
/** Which page an item belongs to. */
const PageContext = createContext(ROOT);

/** True when the item's page is the one on show. */
function useOnPage() {
  const page = useContext(PageContext);
  const context = useContext(MenuContext);
  return context ? context.page === page : false;
}

const MenuContext = createContext<MenuContextValue | null>(null);

function useMenuContext(part: string) {
  const context = useContext(MenuContext);
  if (!context) throw new Error(`${part} must be used within <Menu>`);
  return context;
}

/** Open state for custom triggers and items. */
export function useMenu() {
  const { open, setOpen } = useMenuContext("useMenu");
  return { open, setOpen, close: () => setOpen(false) };
}

export type MenuProps = {
  open?: boolean;
  /** Defaults to false. */
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  /** Opens and closes without motion, independently of the system preference. */
  disableAnimation?: boolean;
  children: ReactNode;
};

/**
 * A pull-down menu: a trigger and the actions it reveals. Compose MenuTrigger
 * and MenuContent with MenuItem, MenuLabel, MenuSeparator, MenuRadioGroup and
 * MenuCheckboxItem inside.
 */
export function Menu({
  open: controlledOpen,
  defaultOpen = false,
  onOpenChange,
  disableAnimation = false,
  children,
}: MenuProps) {
  const reducedMotion = useReducedMotionPreference();
  const reduce = reducedMotion || disableAnimation;
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const open = controlledOpen ?? internalOpen;
  const [anchor, setAnchor] = useState<Frame | null>(null);
  const triggerRef = useRef<View>(null);
  const slots = useSharedValue<Slot[]>([]);
  const highlight = useSharedValue(-1);
  const entries = useRef(new Map<string, Entry>());
  const sorted = useRef<Entry[]>([]);
  const mountOrder = useRef(new Map<string, number>());
  const [stack, setStack] = useState<{ id: string; label: string }[]>([]);
  const [direction, setDirection] = useState(1);
  const page = stack[stack.length - 1]?.id ?? ROOT;

  const setOpen = useCallback(
    (next: boolean) => {
      const apply = () => {
        if (controlledOpen === undefined) setInternalOpen(next);
        onOpenChange?.(next);
      };
      if (next) {
        // Measure the trigger first, so the menu opens from where it is now.
        triggerRef.current?.measureInWindow((x, y, width, height) => {
          setAnchor({ x, y, width, height });
          apply();
        });
        if (!triggerRef.current) apply();
      } else {
        apply();
      }
    },
    [controlledOpen, onOpenChange],
  );

  useEffect(() => {
    if (!open) {
      highlight.value = -1;
      mountOrder.current.clear();
      setStack([]);
    }
  }, [highlight, open]);

  const push = useCallback((id: string, label: string) => {
    mountOrder.current.clear();
    setDirection(1);
    setStack((current) => [...current, { id, label }]);
  }, []);
  const back = useCallback(() => {
    mountOrder.current.clear();
    setDirection(-1);
    setStack((current) => current.slice(0, -1));
  }, []);

  // A controlled open without a measured trigger still needs its anchor.
  useEffect(() => {
    if (!open || anchor) return;
    triggerRef.current?.measureInWindow((x, y, width, height) =>
      setAnchor({ x, y, width, height }),
    );
  }, [anchor, open]);

  const register = useCallback(
    (id: string, entry: Entry | null) => {
      if (entry) entries.current.set(id, entry);
      else entries.current.delete(id);
      sorted.current = [...entries.current.values()].sort(
        (a, b) => a.slot.top - b.slot.top,
      );
      slots.value = sorted.current.map((item) => item.slot);
    },
    [slots],
  );

  const selectAt = useCallback(
    (index: number) => {
      const entry = sorted.current[index];
      if (!entry || entry.slot.disabled) return;
      entry.select();
      if (entry.closes) setOpen(false);
    },
    [setOpen],
  );

  const order = useCallback((id: string) => {
    const map = mountOrder.current;
    if (!map.has(id)) map.set(id, map.size);
    return map.get(id) ?? 0;
  }, []);

  const value = useMemo(
    () => ({
      open,
      setOpen,
      anchor,
      triggerRef,
      reduce,
      slots,
      highlight,
      register,
      selectAt,
      order,
      page,
      stack,
      direction,
      push,
      back,
    }),
    [
      back,
      direction,
      page,
      push,
      stack,
      anchor,
      highlight,
      open,
      order,
      reduce,
      register,
      selectAt,
      setOpen,
      slots,
    ],
  );

  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
}

export type MenuTriggerProps = Omit<PressableProps, "onPress" | "children"> & {
  children: ReactNode;
};

/** Opens the menu. Wraps your button content; it reports whether the menu is open. */
export function MenuTrigger({
  children,
  accessibilityLabel,
  ...props
}: MenuTriggerProps) {
  const { open, setOpen, triggerRef } = useMenuContext("MenuTrigger");
  return (
    <View ref={triggerRef} collapsable={false}>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={accessibilityLabel}
        accessibilityState={{ expanded: open }}
        hitSlop={6}
        onPress={() => setOpen(!open)}
        {...props}
      >
        {children}
      </Pressable>
    </View>
  );
}

const SectionContext = createContext({
  radio: undefined as RadioContextValue | undefined,
});

/** Each row fades down into place, a beat after the one above. */
function useEntrance(index: number) {
  const { open, reduce } = useMenuContext("Menu items");
  const shown = useSharedValue(0);
  useEffect(() => {
    shown.value = open
      ? withDelay(
          reduce ? 0 : 50 + index * STAGGER,
          withTiming(1, { duration: 160, easing: EASE_OUT }),
        )
      : withTiming(0, { duration: 90 });
  }, [index, open, reduce, shown]);
  return useAnimatedStyle(() => ({
    opacity: shown.value,
    transform: [{ translateY: reduce ? 0 : (1 - shown.value) * -6 }],
  }));
}

function useSlot({
  disabled,
  select,
  closes,
}: {
  disabled: boolean;
  select: () => void;
  closes: boolean;
}) {
  const { register, slots, highlight, order } = useMenuContext("Menu items");
  const id = useId();
  const latest = useRef({ select, closes, disabled });
  latest.current = { select, closes, disabled };
  const frame = useRef<{ top: number; height: number } | null>(null);
  const index = order(id);

  const sync = useCallback(() => {
    if (!frame.current) return;
    register(id, {
      slot: { ...frame.current, disabled: latest.current.disabled },
      select: () => latest.current.select(),
      closes: latest.current.closes,
    });
  }, [id, register]);

  useEffect(() => {
    sync();
  }, [disabled, closes, sync]);
  useEffect(() => () => register(id, null), [id, register]);

  const onLayout = (event: {
    nativeEvent: { layout: { y: number; height: number } };
  }) => {
    frame.current = {
      top: event.nativeEvent.layout.y,
      height: event.nativeEvent.layout.height,
    };
    sync();
  };

  const style = useEntrance(index);

  return { onLayout, style, slots, highlight };
}

type ItemBodyProps = {
  icon?: IconSource;
  description?: string;
  destructive?: boolean;
  disabled?: boolean;
  trailing?: ReactNode;
  children: ReactNode;
};

function ItemBody({
  icon,
  description,
  destructive,
  disabled,
  trailing,
  children,
}: ItemBodyProps) {
  const { color: muted } = useResolveClassNames("text-muted");
  const { color: danger } = useResolveClassNames("text-destructive");
  return (
    <View
      style={[styles.item, disabled && styles.disabled]}
      className="px-3 py-2.5"
    >
      {icon ? (
        <View style={styles.icon}>
          {renderIcon(icon, { size: 18, color: destructive ? danger : muted })}
        </View>
      ) : null}
      <View style={styles.flex}>
        {typeof children === "string" ? (
          <Text
            numberOfLines={1}
            className={`text-[15px] ${destructive ? "text-destructive" : "text-foreground"}`}
          >
            {children}
          </Text>
        ) : (
          children
        )}
        {description ? (
          <Text numberOfLines={2} className="text-xs leading-4 text-muted">
            {description}
          </Text>
        ) : null}
      </View>
      {trailing}
    </View>
  );
}

export type MenuItemProps = Omit<ItemBodyProps, "trailing"> & {
  onSelect?: () => void;
  /** Defaults to true. */
  closeOnSelect?: boolean;
  /** Spoken name when the children aren't plain text. */
  accessibilityLabel?: string;
};

/** An action. Tap it, or slide onto it and let go. */
function MenuItemRow({
  onSelect,
  closeOnSelect = true,
  disabled = false,
  accessibilityLabel,
  ...body
}: MenuItemProps) {
  const { setOpen } = useMenuContext("MenuItem");
  const { onLayout, style } = useSlot({
    disabled,
    select: () => onSelect?.(),
    closes: closeOnSelect,
  });
  return (
    <Animated.View
      onLayout={onLayout}
      style={style}
      accessible
      accessibilityRole="menuitem"
      accessibilityLabel={
        accessibilityLabel ??
        (typeof body.children === "string" ? body.children : undefined)
      }
      accessibilityHint={body.description}
      accessibilityState={{ disabled }}
      onAccessibilityTap={() => {
        if (disabled) return;
        onSelect?.();
        if (closeOnSelect) setOpen(false);
      }}
    >
      <ItemBody disabled={disabled} {...body} />
    </Animated.View>
  );
}

/** A check that springs in when its item is chosen. */
function Check({ on, reduce }: { on: boolean; reduce: boolean }) {
  const { color: primary } = useResolveClassNames("text-primary");
  const shown = useSharedValue(on ? 1 : 0);
  useEffect(() => {
    shown.value = reduce ? (on ? 1 : 0) : withSpring(on ? 1 : 0, SPRING_SWAP);
  }, [on, reduce, shown]);
  const style = useAnimatedStyle(() => ({
    opacity: shown.value,
    transform: [{ scale: 0.4 + shown.value * 0.6 }],
  }));
  return (
    <Animated.View style={[styles.check, style]}>
      <CheckGlyph size={18} color={primary} strokeWidth={2.25} />
    </Animated.View>
  );
}

export type MenuCheckboxItemProps = Omit<ItemBodyProps, "trailing"> & {
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  /** Defaults to false, so several can be toggled in one visit. */
  closeOnSelect?: boolean;
};

/** An option that toggles on and off, with a check that springs in. */
function MenuCheckboxItemRow({
  checked,
  onCheckedChange,
  closeOnSelect = false,
  disabled = false,
  ...body
}: MenuCheckboxItemProps) {
  const { reduce, setOpen } = useMenuContext("MenuCheckboxItem");
  const { onLayout, style } = useSlot({
    disabled,
    select: () => onCheckedChange(!checked),
    closes: closeOnSelect,
  });
  return (
    <Animated.View
      onLayout={onLayout}
      style={style}
      accessible
      accessibilityRole="checkbox"
      accessibilityLabel={
        typeof body.children === "string" ? body.children : undefined
      }
      accessibilityState={{ checked, disabled }}
      onAccessibilityTap={() => {
        if (disabled) return;
        onCheckedChange(!checked);
        if (closeOnSelect) setOpen(false);
      }}
    >
      <ItemBody
        disabled={disabled}
        trailing={<Check on={checked} reduce={reduce} />}
        {...body}
      />
    </Animated.View>
  );
}

type RadioContextValue = {
  value: string | undefined;
  select: (value: string) => void;
};

export type MenuRadioGroupProps = {
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  children: ReactNode;
};

/** A set of options where one is chosen. */
export function MenuRadioGroup({
  value: controlled,
  defaultValue,
  onValueChange,
  children,
}: MenuRadioGroupProps) {
  const [internal, setInternal] = useState(defaultValue);
  const value = controlled ?? internal;
  const radio = useMemo(
    () => ({
      value,
      select: (next: string) => {
        if (controlled === undefined) setInternal(next);
        onValueChange?.(next);
      },
    }),
    [controlled, onValueChange, value],
  );
  return (
    <SectionContext.Provider value={{ radio }}>
      {children}
    </SectionContext.Provider>
  );
}

export type MenuRadioItemProps = Omit<ItemBodyProps, "trailing"> & {
  value: string;
  /** Defaults to true. */
  closeOnSelect?: boolean;
};

/** One choice in a MenuRadioGroup, checked when it's the group's value. */
function MenuRadioItemRow({
  value,
  closeOnSelect = true,
  disabled = false,
  ...body
}: MenuRadioItemProps) {
  const { reduce, setOpen } = useMenuContext("MenuRadioItem");
  const { radio } = useContext(SectionContext);
  if (!radio)
    throw new Error("MenuRadioItem must be used within <MenuRadioGroup>");
  const checked = radio.value === value;
  const { onLayout, style } = useSlot({
    disabled,
    select: () => radio.select(value),
    closes: closeOnSelect,
  });
  return (
    <Animated.View
      onLayout={onLayout}
      style={style}
      accessible
      accessibilityRole="radio"
      accessibilityLabel={
        typeof body.children === "string" ? body.children : undefined
      }
      accessibilityHint={body.description}
      accessibilityState={{ checked, disabled }}
      onAccessibilityTap={() => {
        if (disabled) return;
        radio.select(value);
        if (closeOnSelect) setOpen(false);
      }}
    >
      <ItemBody
        disabled={disabled}
        trailing={<Check on={checked} reduce={reduce} />}
        {...body}
      />
    </Animated.View>
  );
}

/** An action. Tap it, or slide onto it and let go. */
export function MenuItem(props: MenuItemProps) {
  return useOnPage() ? <MenuItemRow {...props} /> : null;
}

/** An option that toggles on and off, with a check that springs in. */
export function MenuCheckboxItem(props: MenuCheckboxItemProps) {
  return useOnPage() ? <MenuCheckboxItemRow {...props} /> : null;
}

/** One choice in a MenuRadioGroup, checked when it's the group's value. */
export function MenuRadioItem(props: MenuRadioItemProps) {
  return useOnPage() ? <MenuRadioItemRow {...props} /> : null;
}

type SubContextValue = { id: string };
const SubContext = createContext<SubContextValue | null>(null);

/** A submenu: a MenuSubTrigger and the MenuSubContent it opens. */
export function MenuSub({ children }: { children: ReactNode }) {
  const id = useId();
  const value = useMemo(() => ({ id }), [id]);
  return <SubContext.Provider value={value}>{children}</SubContext.Provider>;
}

function Chevron({ back = false }: { back?: boolean }) {
  const { color: muted } = useResolveClassNames("text-muted");
  return (
    <View style={{ transform: [{ rotate: back ? "90deg" : "-90deg" }] }}>
      <ChevronDownGlyph size={16} color={muted} />
    </View>
  );
}

export type MenuSubTriggerProps = Omit<
  ItemBodyProps,
  "trailing" | "destructive"
> & {
  /** The submenu's title on its back row. Defaults to the text of the trigger. */
  title?: string;
};

function MenuSubTriggerRow({
  disabled = false,
  title,
  ...body
}: MenuSubTriggerProps) {
  const { push } = useMenuContext("MenuSubTrigger");
  const sub = useContext(SubContext);
  if (!sub) throw new Error("MenuSubTrigger must be used within <MenuSub>");
  const label =
    title ?? (typeof body.children === "string" ? body.children : "Back");
  const open = () => push(sub.id, label);
  const { onLayout, style } = useSlot({
    disabled,
    select: open,
    closes: false,
  });
  return (
    <Animated.View
      onLayout={onLayout}
      style={style}
      accessible
      accessibilityRole="menuitem"
      accessibilityLabel={label}
      accessibilityHint="Opens a submenu"
      accessibilityState={{ disabled }}
      onAccessibilityTap={() => {
        if (!disabled) open();
      }}
    >
      <ItemBody disabled={disabled} trailing={<Chevron />} {...body} />
    </Animated.View>
  );
}

/** A row that opens its submenu in place of the current items. */
export function MenuSubTrigger(props: MenuSubTriggerProps) {
  return useOnPage() ? <MenuSubTriggerRow {...props} /> : null;
}

/** The back row at the top of a submenu, titled with the submenu's name. */
function BackRow({ label }: { label: string }) {
  const { back } = useMenuContext("MenuSubContent");
  const { onLayout, style } = useSlot({
    disabled: false,
    select: back,
    closes: false,
  });
  return (
    <Animated.View
      onLayout={onLayout}
      style={style}
      accessible
      accessibilityRole="button"
      accessibilityLabel={`Back from ${label}`}
      onAccessibilityTap={back}
    >
      {/* The chevron's stroke lines up with the item text edge below. */}
      <View style={[styles.item, styles.backRow]} className="px-3 py-2.5">
        <View style={styles.backChevron}>
          <Chevron back />
        </View>
        <Text
          numberOfLines={1}
          className="flex-1 text-[15px] font-semibold text-foreground"
        >
          {label}
        </Text>
      </View>
    </Animated.View>
  );
}

/**
 * The items a MenuSubTrigger opens. They replace the current items, with a
 * back row on top; submenus can nest.
 */
export function MenuSubContent({ children }: { children: ReactNode }) {
  const sub = useContext(SubContext);
  const context = useContext(MenuContext);
  if (!sub) throw new Error("MenuSubContent must be used within <MenuSub>");
  const active = context?.page === sub.id;
  const label =
    context?.stack.find((entry) => entry.id === sub.id)?.label ?? "";
  return (
    <PageContext.Provider value={sub.id}>
      {active ? (
        <>
          <BackRow label={label} />
          <MenuSeparator />
        </>
      ) : null}
      {children}
    </PageContext.Provider>
  );
}

/** A small heading over a group of items. */
export function MenuLabel({ children }: { children: string }) {
  return useOnPage() ? <MenuLabelRow>{children}</MenuLabelRow> : null;
}

function MenuLabelRow({ children }: { children: string }) {
  const { order } = useMenuContext("MenuLabel");
  const style = useEntrance(order(useId()));
  return (
    <Animated.View style={style}>
      <Text
        accessibilityRole="header"
        className="px-3 pb-1 pt-2 text-xs font-medium text-muted"
      >
        {children}
      </Text>
    </Animated.View>
  );
}

/** A hairline between groups of items. */
export function MenuSeparator() {
  return useOnPage() ? <MenuSeparatorRow /> : null;
}

function MenuSeparatorRow() {
  const { order } = useMenuContext("MenuSeparator");
  const style = useEntrance(order(useId()));
  return (
    <Animated.View style={style}>
      <View style={styles.separator} className="mx-3 my-1 bg-border-strong" />
    </Animated.View>
  );
}

/** The pill that glides under your finger from item to item. */
function Highlight({
  slots,
  highlight,
}: {
  slots: SharedValue<Slot[]>;
  highlight: SharedValue<number>;
}) {
  const top = useSharedValue(0);
  const height = useSharedValue(0);
  const opacity = useSharedValue(0);
  useAnimatedReaction(
    () => highlight.value,
    (index) => {
      const slot = index >= 0 ? slots.value[index] : undefined;
      if (slot) {
        // The first touch places it; later moves glide on the layout spring.
        const fresh = opacity.value < 0.05;
        top.value = fresh ? slot.top : withSpring(slot.top, SPRING_LAYOUT);
        height.value = fresh
          ? slot.height
          : withSpring(slot.height, SPRING_LAYOUT);
      }
      opacity.value = withTiming(slot ? 1 : 0, { duration: slot ? 80 : 140 });
    },
  );
  const style = useAnimatedStyle(() => ({
    top: top.value,
    height: height.value,
    opacity: opacity.value,
  }));
  return (
    <Animated.View
      pointerEvents="none"
      style={[styles.highlight, style]}
      className="bg-foreground/5"
    />
  );
}

const PAGE_SLIDE = 28;

/**
 * Slides each new page in from the side it's arriving from. It stays mounted
 * across pages, so submenus keep their identity.
 */
function PageSlide({
  page,
  direction,
  reduce,
  children,
}: {
  page: string;
  direction: number;
  reduce: boolean;
  children: ReactNode;
}) {
  const progress = useSharedValue(1);
  const first = useRef(true);
  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    if (reduce) return;
    progress.value = 0;
    progress.value = withSpring(1, SPRING_LAYOUT);
  }, [page, progress, reduce]);
  const style = useAnimatedStyle(() => ({
    opacity: Math.min(1, progress.value * 1.4),
    transform: [{ translateX: (1 - progress.value) * PAGE_SLIDE * direction }],
  }));
  return <Animated.View style={style}>{children}</Animated.View>;
}

export type MenuContentProps = {
  children: ReactNode;
  /** Which edge lines up with the trigger. Defaults to "start". */
  align?: "start" | "center" | "end";
  /** "auto" opens below the trigger, or above when there isn't room. Defaults to "auto". */
  side?: "auto" | "top" | "bottom";
  /** Defaults to 260. */
  width?: number;
  className?: string;
};

/**
 * The menu panel. It springs out of the corner nearest its trigger, and its
 * rows fade in one after another. Slide a finger across it and a highlight
 * glides from item to item; let go to choose.
 */
export function MenuContent({
  children,
  align = "start",
  side = "auto",
  width: preferredWidth = 260,
  className = "",
}: MenuContentProps) {
  const {
    open,
    setOpen,
    anchor,
    reduce,
    slots,
    highlight,
    selectAt,
    page,
    direction,
    back,
    stack,
  } = useMenuContext("MenuContent");
  const window = useWindowDimensions();
  const [present, setPresent] = useState(open);
  const [contentHeight, setContentHeight] = useState(0);
  const progress = useSharedValue(0);
  if (open && !present) setPresent(true);
  const hide = useCallback(() => setPresent(false), []);

  useEffect(() => {
    if (!present) return;
    if (open)
      progress.value = reduce
        ? withTiming(1, { duration: 120 })
        : withSpring(1, SPRING_OPEN);
    else
      progress.value = withTiming(
        0,
        reduce ? { duration: 120 } : CLOSE,
        (done) => {
          if (done) scheduleOnRN(hide);
        },
      );
  }, [hide, open, present, progress, reduce]);

  const panelStyle = useAnimatedStyle(() => {
    const p = progress.value;
    return {
      opacity: Math.min(1, p * 1.8),
      transform: reduce ? [] : [{ scale: 0.55 + Math.max(0, p) * 0.45 }],
    };
  }, [reduce]);
  const scrimStyle = useAnimatedStyle(() => ({
    opacity: Math.min(1, progress.value),
  }));

  if (!present || !anchor) return null;

  const width = Math.min(preferredWidth, window.width - EDGE * 2);
  const below = window.height - (anchor.y + anchor.height) - GAP - EDGE;
  const above = anchor.y - GAP - TOP_CLEARANCE;
  const placeBelow =
    side === "bottom" ||
    (side === "auto" && (below >= contentHeight || below >= above));
  const maxHeight = Math.max(120, placeBelow ? below : above);
  const height = Math.min(contentHeight, maxHeight);
  const scrollable = contentHeight > maxHeight;
  const desired =
    align === "start"
      ? anchor.x
      : align === "end"
        ? anchor.x + anchor.width - width
        : anchor.x + anchor.width / 2 - width / 2;
  const left = Math.max(EDGE, Math.min(desired, window.width - width - EDGE));
  const top = placeBelow
    ? anchor.y + anchor.height + GAP
    : anchor.y - GAP - height;
  // Grow out of the point nearest the trigger.
  const originX = Math.max(
    0,
    Math.min(width, anchor.x + anchor.width / 2 - left),
  );

  const indexAt = (y: number) => {
    "worklet";
    const list = slots.value;
    for (let i = 0; i < list.length; i++) {
      const slot = list[i];
      if (slot && y >= slot.top && y < slot.top + slot.height)
        return slot.disabled ? -1 : i;
    }
    return -1;
  };

  const tap = Gesture.Tap()
    .maxDuration(600)
    .onBegin((event) => {
      highlight.value = indexAt(event.y);
    })
    .onEnd((event, success) => {
      const index = indexAt(event.y);
      if (success && index >= 0) scheduleOnRN(selectAt, index);
    })
    .onFinalize(() => {
      highlight.value = -1;
    });
  // Slide to choose when everything fits; a still tap falls through to the
  // tap. A scrolling menu leaves dragging to the scroll and chooses on tap.
  const choose = scrollable
    ? tap
    : Gesture.Exclusive(
        Gesture.Pan()
          .minDistance(4)
          .onBegin((event) => {
            highlight.value = indexAt(event.y);
          })
          .onUpdate((event) => {
            highlight.value = indexAt(event.y);
          })
          .onEnd((event) => {
            const index = indexAt(event.y);
            if (index >= 0) scheduleOnRN(selectAt, index);
          })
          .onFinalize(() => {
            highlight.value = -1;
          }),
        tap,
      );

  const list = (
    <GestureDetector gesture={choose}>
      <View
        collapsable={false}
        onLayout={({ nativeEvent }) =>
          setContentHeight(nativeEvent.layout.height)
        }
      >
        <Highlight slots={slots} highlight={highlight} />
        <PageSlide page={page} direction={direction} reduce={reduce}>
          {children}
        </PageSlide>
      </View>
    </GestureDetector>
  );

  return (
    <Modal
      transparent
      visible
      animationType="none"
      statusBarTranslucent
      navigationBarTranslucent
      onRequestClose={() => (stack.length > 0 ? back() : setOpen(false))}
    >
      <Animated.View
        style={[StyleSheet.absoluteFill, scrimStyle]}
        className="bg-foreground/5"
      >
        <Pressable
          accessibilityLabel="Close menu"
          style={StyleSheet.absoluteFill}
          onPress={() => setOpen(false)}
        />
      </Animated.View>
      <Animated.View
        accessibilityViewIsModal
        accessibilityRole="menu"
        layout={reduce ? undefined : PANEL_RESIZE}
        style={[
          styles.panel,
          {
            left,
            top,
            width,
            transformOrigin: [originX, placeBelow ? "0%" : "100%", 0],
          },
          panelStyle,
        ]}
        className={`rounded-2xl border border-border bg-background p-1.5 ${className}`}
      >
        {scrollable ? (
          <ScrollView
            style={{ maxHeight: maxHeight - 12 }}
            bounces={false}
            showsVerticalScrollIndicator={false}
          >
            {list}
          </ScrollView>
        ) : (
          list
        )}
      </Animated.View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1, minWidth: 0 },
  item: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 44 },
  disabled: { opacity: 0.4 },
  icon: { width: 22, alignItems: "center" },
  backRow: { gap: 4 },
  // The glyph's stroke starts 4 points into its 16 point box.
  backChevron: { marginLeft: -4 },
  check: { width: 20, alignItems: "center" },
  separator: { height: StyleSheet.hairlineWidth },
  highlight: { position: "absolute", left: 0, right: 0, borderRadius: 12 },
  panel: {
    position: "absolute",
    shadowColor: "#000",
    shadowOpacity: 0.12,
    shadowRadius: 28,
    shadowOffset: { width: 0, height: 10 },
    elevation: 10,
  },
});

TSsrc/hooks/use-presence.ts

import { useEffect, useRef, useState } from "react";

export type PresenceItem<T> = {
  key: string;
  value: T;
  /** False for the item present on first render, so it does not animate in. */
  appear: boolean;
  exiting: boolean;
};

/**
 * Keeps replaced items mounted while they animate out, like AnimatePresence.
 * A key that returns while exiting is revived in place.
 */
export function usePresence<T>(
  key: string | null,
  value: T,
  exitDuration: (value: T) => number,
) {
  const [items, setItems] = useState<PresenceItem<T>[]>(() =>
    key === null ? [] : [{ key, value, appear: false, exiting: false }],
  );
  const [currentKey, setCurrentKey] = useState(key);
  const exitDurationRef = useRef(exitDuration);
  exitDurationRef.current = exitDuration;

  // Adjust during render so the new item and the exits start in the same frame.
  if (key !== currentKey) {
    setCurrentKey(key);
    setItems((previous) => {
      const next = previous.map((item) =>
        item.key === key
          ? { ...item, value, exiting: false }
          : { ...item, exiting: true },
      );
      if (key !== null && !previous.some((item) => item.key === key)) {
        next.push({ key, value, appear: true, exiting: false });
      }
      return next;
    });
  }

  const exitingKeys = items
    .filter((item) => item.exiting)
    .map((item) => item.key)
    .join("\n");

  useEffect(() => {
    if (!exitingKeys) return;
    const timers = items
      .filter((item) => item.exiting)
      .map((item) =>
        setTimeout(() => {
          setItems((previous) =>
            previous.filter(
              (candidate) => !(candidate.key === item.key && candidate.exiting),
            ),
          );
        }, exitDurationRef.current(item.value)),
      );
    return () => {
      for (const timer of timers) clearTimeout(timer);
    };
    // Restart removal timers only when the set of exiting items changes.
  }, [exitingKeys]);

  return items;
}

TSsrc/hooks/use-reduced-motion.ts

import { useEffect, useState } from "react";
import { AccessibilityInfo } from "react-native";
import { useReducedMotion } from "react-native-reanimated";

/** Reanimated supplies a synchronous initial value; native events keep it current. */
export function useReducedMotionPreference() {
  const initialValue = useReducedMotion();
  const [reducedMotion, setReducedMotion] = useState(initialValue);

  useEffect(() => {
    let active = true;
    let receivedEvent = false;
    const subscription = AccessibilityInfo.addEventListener(
      "reduceMotionChanged",
      (value) => {
        receivedEvent = true;
        setReducedMotion(value);
      },
    );
    void AccessibilityInfo.isReduceMotionEnabled().then((value) => {
      if (active && !receivedEvent) setReducedMotion(value);
    });
    return () => {
      active = false;
      subscription.remove();
    };
  }, []);

  return reducedMotion;
}

TSXsrc/primitives/agent-icons.tsx

import type { ReactNode } from "react";
import type { ColorValue } from "react-native";
import Svg, { Circle, Path, Rect } from "react-native-svg";

type GlyphProps = { size?: number; color?: ColorValue; strokeWidth?: number };

function Glyph({
  size = 16,
  color = "currentColor",
  strokeWidth = 2,
  children,
}: GlyphProps & { children: ReactNode }) {
  return (
    <Svg
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill="none"
      stroke={color}
      strokeWidth={strokeWidth}
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {children}
    </Svg>
  );
}

// Simple 24-unit stroke glyphs shared by the agent components.

export function ChevronDownGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6 9l6 6 6-6" />
    </Glyph>
  );
}

export function ArrowUpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 19V5M5.5 11.5L12 5l6.5 6.5" />
    </Glyph>
  );
}

export function PlusGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 5v14M5 12h14" />
    </Glyph>
  );
}

export function StopGlyph({ size = 12, color }: GlyphProps) {
  return (
    <Svg width={size} height={size} viewBox="0 0 12 12">
      <Rect x={1} y={1} width={10} height={10} rx={2.5} fill={color} />
    </Svg>
  );
}

export function CheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M5 12.5l4.5 4.5L19 7" />
    </Glyph>
  );
}

export function CopyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={8.5} y={8.5} width={12} height={12} rx={2.5} />
      <Path d="M15.5 5.5v-.5A2 2 0 0 0 13.5 3h-8.5A2 2 0 0 0 3 5v8.5a2 2 0 0 0 2 2h.5" />
    </Glyph>
  );
}

export function RetryGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5" />
      <Path d="M3.5 3.5v5h5" />
    </Glyph>
  );
}

export function ThumbGlyph({
  down = false,
  ...props
}: GlyphProps & { down?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M7.5 10.5v10M7.5 10.5L11 3.5a2.5 2.5 0 0 1 2.5 2.5v3.5h5a2 2 0 0 1 2 2.3l-1.2 7A2 2 0 0 1 17.3 20.5H4.5a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z"
        transform={down ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function SearchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={11} cy={11} r={6.5} />
      <Path d="M16 16l4 4" />
    </Glyph>
  );
}

export function GlobeGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M3.5 12h17M12 3.5c2.4 2.5 3.5 5.3 3.5 8.5s-1.1 6-3.5 8.5c-2.4-2.5-3.5-5.3-3.5-8.5s1.1-6 3.5-8.5z" />
    </Glyph>
  );
}

export function FileGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z" />
      <Path d="M14 3.5V8h4.5M9 13h6M9 16.5h4" />
    </Glyph>
  );
}

export function PencilGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z" />
      <Path d="M13.5 6.5l4 4M14 20h6" />
    </Glyph>
  );
}

export function TerminalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Path d="M7.5 10l2.5 2-2.5 2M12.5 15h4" />
    </Glyph>
  );
}

export function WrenchGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14.5 6.5a4 4 0 0 0 5 5l-8.8 8.8a2.1 2.1 0 0 1-3-3l8.8-8.8a4 4 0 0 1-2-2z" />
    </Glyph>
  );
}

export function SparkleGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 4l1.8 4.6L18.5 10.5l-4.7 1.9L12 17l-1.8-4.6-4.7-1.9 4.7-1.9z" />
      <Path d="M18.5 16.5v3M17 18h3" />
    </Glyph>
  );
}

export function MessageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20 14.5a2 2 0 0 1-2 2H8.5L4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z" />
    </Glyph>
  );
}

export function ImageGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={3.5} y={4.5} width={17} height={15} rx={2.5} />
      <Circle cx={9} cy={10} r={1.5} />
      <Path d="M20.5 15.5l-4.5-4.5-9 8.5" />
    </Glyph>
  );
}

export function ShieldGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 3.5l7 2.5v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z" />
      <Path d="M9 12l2 2 4-4" />
    </Glyph>
  );
}

export function AlertGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 8v4.5M12 16h.01" />
    </Glyph>
  );
}

export function CrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M6.5 6.5l11 11M17.5 6.5l-11 11" />
    </Glyph>
  );
}

export function HelpGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.6 9.5a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.5M12 16.8h.01" />
    </Glyph>
  );
}

export function ArrowGlyph({
  back = false,
  ...props
}: GlyphProps & { back?: boolean }) {
  return (
    <Glyph {...props}>
      <Path
        d="M5 12h14M13 6l6 6-6 6"
        transform={back ? "rotate(180 12 12)" : undefined}
      />
    </Glyph>
  );
}

export function BracesGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M8.5 4H8a2 2 0 0 0-2 2v3.5A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5V18a2 2 0 0 0 2 2h.5M15.5 4h.5a2 2 0 0 1 2 2v3.5a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5V18a2 2 0 0 1-2 2h-.5" />
    </Glyph>
  );
}

export function BanGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M6 6l12 12" />
    </Glyph>
  );
}

export function CircleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M8.5 12.2l2.4 2.4 4.6-4.8" />
    </Glyph>
  );
}

export function CircleCrossGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" />
    </Glyph>
  );
}

export function ListGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5l1.5 1.5L8 5.5M4 13l1.5 1.5L8 12M11.5 7h8.5M11.5 13.5h8.5M11.5 19h8.5M4.5 19h2" />
    </Glyph>
  );
}

/** An open ring, spun by SpinGlyph. */
export function RingGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M20.5 12a8.5 8.5 0 1 1-6-8.1" />
    </Glyph>
  );
}

export function ReplyGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M9.5 7L4.5 12l5 5M4.5 12h10a5 5 0 0 1 5 5v1" />
    </Glyph>
  );
}

export function WrapGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M4 6.5h16M4 12h12.5a3.25 3.25 0 0 1 0 6.5H12M4 18.5h4.5M14 16.5l-2 2 2 2" />
    </Glyph>
  );
}

export function BookGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M12 6.5c-1.6-1.3-4-2-7.5-2v13c3.5 0 5.9.7 7.5 2 1.6-1.3 4-2 7.5-2v-13c-3.5 0-5.9.7-7.5 2zM12 6.5v13" />
    </Glyph>
  );
}

export function ExternalGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M14 4.5h5.5V10M19.5 4.5L11 13M17 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h4" />
    </Glyph>
  );
}

export function DoubleCheckGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Path d="M2.5 12.5l4.5 4.5 9-9.5M12 16.5l.5.5 9-9.5" />
    </Glyph>
  );
}

export function ClockGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Circle cx={12} cy={12} r={8.5} />
      <Path d="M12 7.5V12l3 2" />
    </Glyph>
  );
}

export function MicGlyph(props: GlyphProps) {
  return (
    <Glyph {...props}>
      <Rect x={9} y={3.5} width={6} height={11} rx={3} />
      <Path d="M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5v3" />
    </Glyph>
  );
}

TSXsrc/primitives/render-icon.tsx

import {
  type ComponentType,
  createElement,
  isValidElement,
  type ReactNode,
} from "react";
import type { ColorValue } from "react-native";

export type IconProps = { size: number; color: ColorValue | undefined };
/** A component receiving `{ size, color }` (such as a lucide icon), or a prebuilt node. */
export type IconSource = ComponentType<IconProps> | ReactNode;

export function renderIcon(icon: IconSource, props: IconProps) {
  if (typeof icon === "function") return createElement(icon, props);
  // forwardRef and memo components (lucide-react-native, for example) are objects.
  if (
    icon != null &&
    typeof icon === "object" &&
    !isValidElement(icon) &&
    "$$typeof" in icon
  ) {
    return createElement(icon as unknown as ComponentType<IconProps>, props);
  }
  return icon;
}

TSXsrc/primitives/rise-in.tsx

import { type ReactNode, useEffect } from "react";
import type { ViewProps } from "react-native";
import Animated, {
  LinearTransition,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
  withTiming,
} from "react-native-reanimated";
import { EASE_OUT, SPRING_LAYOUT } from "../styles/motion";

const FADE = { duration: 180, easing: EASE_OUT };
const RISE = 6;
const EXIT_DURATION = 140;

/** Leaving rows reverse their entrance: fade and lift 3 points away. */
function riseOut() {
  "worklet";
  return {
    initialValues: { opacity: 1, transform: [{ translateY: 0 }] },
    animations: {
      opacity: withTiming(0, { duration: EXIT_DURATION, easing: EASE_OUT }),
      transform: [
        {
          translateY: withTiming(-3, {
            duration: EXIT_DURATION,
            easing: EASE_OUT,
          }),
        },
      ],
    },
  };
}

const GLIDE = LinearTransition.springify()
  .stiffness(SPRING_LAYOUT.stiffness)
  .damping(SPRING_LAYOUT.damping)
  .mass(SPRING_LAYOUT.mass);

/**
 * A row that fades and rises 6 points into place when it mounts, and lifts
 * away as it leaves, while its neighbours glide to make room. Shared by the agent activity lists.
 */
export function RiseIn({
  reduce,
  appear = true,
  children,
  style,
  ...props
}: ViewProps & { reduce: boolean; appear?: boolean; children: ReactNode }) {
  const animate = appear && !reduce;
  const opacity = useSharedValue(animate ? 0 : 1);
  const lift = useSharedValue(animate ? RISE : 0);

  // Plays once, on mount.
  useEffect(() => {
    if (!animate) return;
    opacity.value = withTiming(1, FADE);
    lift.value = withSpring(0, SPRING_LAYOUT);
  }, []);

  const rise = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: lift.value }],
  }));

  return (
    <Animated.View
      layout={reduce ? undefined : GLIDE}
      exiting={reduce ? undefined : riseOut}
      style={[rise, style]}
      {...props}
    >
      {children}
    </Animated.View>
  );
}

TSsrc/styles/motion.ts

import { Easing, ReduceMotion } from "react-native-reanimated";

// Mirrors beUI's lib/ease.ts so native motion matches the web library.

export const EASE_OUT = Easing.bezier(0.16, 1, 0.3, 1);
export const EASE_IN_OUT = Easing.bezier(0.77, 0, 0.175, 1);

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  stiffness: 500,
  damping: 30,
  mass: 0.6,
  reduceMotion: ReduceMotion.System,
} as const;

/** Content swaps: label and icon slots trading places inside a control. */
export const SPRING_SWAP = {
  stiffness: 460,
  damping: 30,
  mass: 0.55,
  reduceMotion: ReduceMotion.System,
} as const;

/** Shared-layout glides: pills, indicators and panels moving between positions. */
export const SPRING_LAYOUT = {
  stiffness: 360,
  damping: 32,
  mass: 0.6,
  reduceMotion: ReduceMotion.System,
} as const;

/** Dragged handles and fills; critically damped so values never rebound off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
  reduceMotion: ReduceMotion.System,
} as const;

export const motion = {
  press: SPRING_PRESS,
  swap: SPRING_SWAP,
  layout: SPRING_LAYOUT,
  glide: SPRING_GLIDE,
  exit: { duration: 160, easing: EASE_OUT, reduceMotion: ReduceMotion.System },
  fade: { duration: 150, reduceMotion: ReduceMotion.System },
} as const;

4Copy the component

TSsrc/components/prompt-input/index.ts

export type {
  PromptAction,
  PromptAttachment,
  PromptInputProps,
  PromptModel,
} from "./prompt-input";
export { PromptInput } from "./prompt-input";

TSXsrc/components/prompt-input/prompt-input.tsx

import { type ReactNode, type Ref, useEffect, useRef, useState } from "react";
import {
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  type TextInputProps,
  View,
} from "react-native";
import Animated, {
  FadeIn,
  LinearTransition,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from "react-native-reanimated";
import { useResolveClassNames } from "uniwind";
import { usePresence } from "../../hooks/use-presence";
import { useReducedMotionPreference } from "../../hooks/use-reduced-motion";
import {
  ArrowUpGlyph,
  CrossGlyph,
  MicGlyph,
  PlusGlyph,
  StopGlyph,
} from "../../primitives/agent-icons";
import { type IconSource, renderIcon } from "../../primitives/render-icon";
import { RiseIn } from "../../primitives/rise-in";
import { SPRING_LAYOUT, SPRING_PRESS, SPRING_SWAP } from "../../styles/motion";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuLabel,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
  MenuTrigger,
} from "../menu/menu";

export type PromptModel = {
  value: string;
  label: string;
  description?: string;
  icon?: IconSource;
  disabled?: boolean;
};

export type PromptAction = {
  value: string;
  label: string;
  description?: string;
  icon?: IconSource;
  disabled?: boolean;
};

export type PromptAttachment = {
  id: string;
  label: string;
  /** A thumbnail or file icon. */
  icon?: IconSource;
};

const LINE_HEIGHT = 22;
const FIELD_PADDING = 8;
const BUTTON = 36;
const SURFACE_PADDING = 6;
const INLINE_INSET = 6;
const WIDE_INSET = 10;
const GLIDE = LinearTransition.springify()
  .stiffness(SPRING_LAYOUT.stiffness)
  .damping(SPRING_LAYOUT.damping)
  .mass(SPRING_LAYOUT.mass);

/** Progress runs 0 (arriving) → 1 (resting) → 2 (leaving), with a small scale. */
function SwapIcon({
  appear,
  exiting,
  reduce,
  children,
}: {
  appear: boolean;
  exiting: boolean;
  reduce: boolean;
  children: ReactNode;
}) {
  const progress = useSharedValue(appear && !reduce ? 0 : 1);
  useEffect(() => {
    const target = exiting ? 2 : 1;
    progress.value = reduce ? target : withSpring(target, SPRING_SWAP);
  }, [exiting, progress, reduce]);
  const style = useAnimatedStyle(() => {
    const away = Math.abs(1 - progress.value);
    return {
      opacity: Math.max(0, 1 - away),
      transform: reduce ? [] : [{ scale: 1 - away * 0.4 }],
    };
  }, [reduce]);
  return (
    <Animated.View style={[styles.layer, style]}>{children}</Animated.View>
  );
}

function RoundButton({
  label,
  disabled,
  onPress,
  className,
  reduce,
  children,
}: {
  label: string;
  disabled?: boolean;
  onPress?: () => void;
  className: string;
  reduce: boolean;
  children: ReactNode;
}) {
  const scale = useSharedValue(1);
  const style = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
  }));
  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled }}
      disabled={disabled}
      hitSlop={6}
      onPress={onPress}
      onPressIn={() => {
        if (!reduce) scale.value = withSpring(0.9, SPRING_PRESS);
      }}
      onPressOut={() => {
        scale.value = withSpring(1, SPRING_PRESS);
      }}
    >
      <Animated.View style={[styles.round, style]} className={className}>
        {children}
      </Animated.View>
    </Pressable>
  );
}

function AttachmentChip({
  attachment,
  reduce,
  onRemove,
}: {
  attachment: PromptAttachment;
  reduce: boolean;
  onRemove?: (id: string) => void;
}) {
  const { color: muted } = useResolveClassNames("text-muted");
  return (
    <RiseIn reduce={reduce}>
      <View
        className="h-9 flex-row items-center gap-2 rounded-xl bg-background pl-2.5 pr-1.5"
        style={styles.chip}
      >
        {attachment.icon
          ? renderIcon(attachment.icon, { size: 16, color: muted })
          : null}
        <Text
          numberOfLines={1}
          className="max-w-40 text-[13px] text-foreground"
        >
          {attachment.label}
        </Text>
        {onRemove ? (
          <Pressable
            accessibilityRole="button"
            accessibilityLabel={`Remove ${attachment.label}`}
            hitSlop={8}
            onPress={() => onRemove(attachment.id)}
            className="size-6 items-center justify-center rounded-full active:bg-surface"
          >
            <CrossGlyph size={12} color={muted} />
          </Pressable>
        ) : null}
      </View>
    </RiseIn>
  );
}

export type PromptInputProps = Omit<
  TextInputProps,
  "value" | "defaultValue" | "onChangeText" | "onSubmitEditing" | "children"
> & {
  value?: string;
  /** Defaults to "". */
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** Models to choose from, listed in the + menu. */
  models?: PromptModel[];
  model?: string;
  /** Defaults to the first model. */
  defaultModel?: string;
  onModelChange?: (model: string) => void;
  /** Things to add to the prompt, listed in the + menu. */
  actions?: PromptAction[];
  onAction?: (action: string) => void;
  /** Files and images added to the prompt, shown as chips above the text. */
  attachments?: PromptAttachment[];
  onRemoveAttachment?: (id: string) => void;
  /** Shows a mic while the field is empty, such as to start dictation or voice mode. */
  onVoice?: () => void;
  /** Called with the trimmed prompt and the selected model. Clears the field when uncontrolled. */
  onSubmit?: (value: string, model?: string) => void | Promise<void>;
  /** While true, the send button becomes a stop button. */
  loading?: boolean;
  onStop?: () => void;
  /** Puts the last prompt back in an empty field when you stop a reply. Defaults to true. */
  restoreOnStop?: boolean;
  /** Lines the field grows to before scrolling. Defaults to 6. */
  maxRows?: number;
  /** Extra controls beside the + button once the composer opens up. */
  leadingAction?: ReactNode;
  disabled?: boolean;
  /** Classes for the composer surface. */
  className?: string;
  disableAnimation?: boolean;
  ref?: Ref<TextInput>;
};

/**
 * A chat composer in the style of ChatGPT: a soft pill with a + menu, the
 * field, and a mic that turns into a send arrow as you type. When the text
 * wraps, the pill opens into a card with the buttons in a row underneath.
 * Attachments ride above the text as removable chips.
 */
export function PromptInput({
  value: controlledValue,
  defaultValue = "",
  onValueChange,
  models = [],
  model: controlledModel,
  defaultModel,
  onModelChange,
  actions = [],
  onAction,
  attachments = [],
  onRemoveAttachment,
  onVoice,
  onSubmit,
  loading = false,
  onStop,
  restoreOnStop = true,
  maxRows = 6,
  leadingAction,
  disabled = false,
  className = "",
  disableAnimation = false,
  placeholder = "Ask anything",
  accessibilityLabel = "Prompt",
  ref,
  ...inputProps
}: PromptInputProps) {
  const reducedMotion = useReducedMotionPreference();
  const reduce = reducedMotion || disableAnimation;
  const [internalValue, setInternalValue] = useState(defaultValue);
  const value = controlledValue ?? internalValue;
  const [internalModel, setInternalModel] = useState(
    defaultModel ?? models[0]?.value,
  );
  const model = controlledModel ?? internalModel;
  const [width, setWidth] = useState(0);
  // Wrapped heights of the text at the pill's field width and at full width,
  // measured off-screen so the layout never feeds back into its own choice.
  const [inlineHeight, setInlineHeight] = useState(LINE_HEIGHT);
  const [wideHeight, setWideHeight] = useState(LINE_HEIGHT);
  const [menuOpen, setMenuOpen] = useState(false);
  const lastPrompt = useRef("");
  const turn = useSharedValue(0);
  const plusScale = useSharedValue(1);
  const { color: onPrimary } = useResolveClassNames("text-on-primary");
  const { color: foreground } = useResolveClassNames("text-foreground");
  const { color: muted } = useResolveClassNames("text-muted");

  const trimmed = value.trim();
  const canSubmit =
    (trimmed.length > 0 || attachments.length > 0) && !disabled && !loading;
  const hasMenu = actions.length > 0 || models.length > 0;
  // One line sits in the pill; a second line opens it into a card.
  const multiline = inlineHeight > LINE_HEIGHT * 1.5;
  const expanded = multiline || attachments.length > 0;
  const contentHeight = expanded ? wideHeight : inlineHeight;
  const fieldHeight = Math.min(
    maxRows * LINE_HEIGHT,
    Math.max(LINE_HEIGHT, contentHeight),
  );
  const inner = Math.max(0, width - SURFACE_PADDING * 2);
  const inlineWidth =
    inner - (hasMenu ? BUTTON : 0) - BUTTON - 4 - INLINE_INSET * 2;
  const wideWidth = inner - WIDE_INSET * 2;
  // A zero-width space keeps a trailing newline's line in the measurement.
  const mirror = `${value}\u200b`;
  const selectedModel = models.find((entry) => entry.value === model);

  useEffect(() => {
    turn.value = reduce
      ? menuOpen
        ? 1
        : 0
      : withSpring(menuOpen ? 1 : 0, SPRING_SWAP);
  }, [menuOpen, reduce, turn]);
  const plusPressStyle = useAnimatedStyle(() => ({
    transform: [{ scale: plusScale.value }],
  }));
  const plusStyle = useAnimatedStyle(() => ({
    transform: [{ rotate: `${turn.value * 45}deg` }],
  }));

  const setValue = (next: string) => {
    if (controlledValue === undefined) setInternalValue(next);
    onValueChange?.(next);
  };

  const submit = () => {
    if (!canSubmit) return;
    lastPrompt.current = trimmed;
    void onSubmit?.(trimmed, model);
    if (controlledValue === undefined) setInternalValue("");
  };

  const stop = () => {
    onStop?.();
    if (restoreOnStop && value.trim() === "" && lastPrompt.current)
      setValue(lastPrompt.current);
  };

  // The trailing button: stop while loading, send once there's something to
  // send, otherwise the mic when there's a voice handler.
  const trailing: "stop" | "send" | "voice" = loading
    ? "stop"
    : canSubmit || !onVoice
      ? "send"
      : "voice";
  const trailingIcons = usePresence(trailing, trailing, () =>
    reduce ? 0 : 240,
  );
  const filled = trailing === "stop" || (trailing === "send" && canSubmit);

  const plus = hasMenu ? (
    <Animated.View layout={reduce ? undefined : GLIDE}>
      <Menu
        open={menuOpen}
        onOpenChange={setMenuOpen}
        disableAnimation={disableAnimation}
      >
        <MenuTrigger
          accessibilityLabel={
            selectedModel
              ? `Add to prompt, model ${selectedModel.label}`
              : "Add to prompt"
          }
          disabled={disabled}
          onPressIn={() => {
            if (!reduce) plusScale.value = withSpring(0.9, SPRING_PRESS);
          }}
          onPressOut={() => {
            plusScale.value = withSpring(1, SPRING_PRESS);
          }}
        >
          <Animated.View
            style={[styles.round, plusPressStyle]}
            className={menuOpen ? "bg-foreground/10" : ""}
          >
            <Animated.View style={plusStyle}>
              <PlusGlyph size={20} color={foreground} strokeWidth={1.8} />
            </Animated.View>
          </Animated.View>
        </MenuTrigger>
        <MenuContent align="start">
          {actions.map((action) => (
            <MenuItem
              key={action.value}
              icon={action.icon}
              description={action.description}
              disabled={action.disabled}
              onSelect={() => onAction?.(action.value)}
            >
              {action.label}
            </MenuItem>
          ))}
          {actions.length > 0 && models.length > 0 ? <MenuSeparator /> : null}
          {models.length > 0 ? (
            <>
              <MenuLabel>Model</MenuLabel>
              <MenuRadioGroup
                value={model}
                onValueChange={(next) => {
                  if (controlledModel === undefined) setInternalModel(next);
                  onModelChange?.(next);
                }}
              >
                {models.map((entry) => (
                  <MenuRadioItem
                    key={entry.value}
                    value={entry.value}
                    icon={entry.icon}
                    description={entry.description}
                    disabled={entry.disabled}
                  >
                    {entry.label}
                  </MenuRadioItem>
                ))}
              </MenuRadioGroup>
            </>
          ) : null}
        </MenuContent>
      </Menu>
    </Animated.View>
  ) : null;

  const send = (
    <Animated.View layout={reduce ? undefined : GLIDE}>
      <RoundButton
        label={
          trailing === "stop"
            ? "Stop generating"
            : trailing === "voice"
              ? "Voice"
              : "Send prompt"
        }
        disabled={
          trailing === "stop"
            ? !onStop
            : trailing === "send"
              ? !canSubmit
              : disabled
        }
        reduce={reduce}
        onPress={
          trailing === "stop" ? stop : trailing === "voice" ? onVoice : submit
        }
        className={
          filled ? "bg-primary" : trailing === "voice" ? "" : "bg-foreground/10"
        }
      >
        {trailingIcons.map((item) => (
          <SwapIcon
            key={item.key}
            appear={item.appear}
            exiting={item.exiting}
            reduce={reduce}
          >
            {item.value === "stop" ? (
              <StopGlyph size={12} color={onPrimary} />
            ) : item.value === "voice" ? (
              <MicGlyph size={20} color={foreground} strokeWidth={1.8} />
            ) : (
              <ArrowUpGlyph
                size={18}
                color={canSubmit ? onPrimary : muted}
                strokeWidth={2.25}
              />
            )}
          </SwapIcon>
        ))}
      </RoundButton>
    </Animated.View>
  );

  const field = (
    <TextInput
      ref={ref}
      multiline
      value={value}
      onChangeText={setValue}
      editable={!disabled}
      placeholder={placeholder}
      accessibilityLabel={accessibilityLabel}
      scrollEnabled={contentHeight > maxRows * LINE_HEIGHT}
      placeholderTextColor={muted}
      cursorColor={foreground}
      selectionColor={foreground}
      className="text-[16px] text-foreground"
      style={[
        styles.field,
        { height: fieldHeight + FIELD_PADDING * 2 },
        expanded ? styles.fieldWide : styles.fieldInline,
      ]}
      {...inputProps}
    />
  );

  return (
    <Animated.View
      layout={reduce ? undefined : GLIDE}
      onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
      style={[styles.surface, expanded ? styles.card : styles.pill]}
      className={`bg-surface ${disabled ? "opacity-60" : ""} ${className}`}
    >
      {attachments.length > 0 ? (
        <View style={styles.attachments}>
          {attachments.map((attachment) => (
            <AttachmentChip
              key={attachment.id}
              attachment={attachment}
              reduce={reduce}
              onRemove={onRemoveAttachment}
            />
          ))}
        </View>
      ) : null}
      {/* The field keeps one place in the tree, so it never loses focus as the shape changes. */}
      <View style={expanded ? undefined : styles.row}>
        {expanded ? null : plus}
        {field}
        {expanded ? null : send}
      </View>
      {expanded ? (
        <Animated.View
          entering={reduce ? undefined : FadeIn.duration(160)}
          style={styles.toolbar}
        >
          {plus}
          {leadingAction}
          <View style={styles.spacer} />
          {send}
        </Animated.View>
      ) : null}
      {width > 0 ? (
        <View
          pointerEvents="none"
          style={styles.mirrors}
          importantForAccessibility="no-hide-descendants"
        >
          <Text
            className="text-[16px]"
            style={[styles.mirror, { width: inlineWidth }]}
            onLayout={({ nativeEvent }) =>
              setInlineHeight(nativeEvent.layout.height)
            }
          >
            {mirror}
          </Text>
          <Text
            className="text-[16px]"
            style={[styles.mirror, { width: wideWidth }]}
            onLayout={({ nativeEvent }) =>
              setWideHeight(nativeEvent.layout.height)
            }
          >
            {mirror}
          </Text>
        </View>
      ) : null}
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  surface: { overflow: "hidden", padding: SURFACE_PADDING },
  pill: { borderRadius: 28 },
  card: { borderRadius: 24 },
  row: { flexDirection: "row", alignItems: "flex-end", gap: 2 },
  field: {
    lineHeight: LINE_HEIGHT,
    paddingTop: FIELD_PADDING,
    paddingBottom: FIELD_PADDING,
    textAlignVertical: "top",
  },
  fieldInline: { flex: 1, paddingHorizontal: INLINE_INSET },
  fieldWide: { paddingHorizontal: WIDE_INSET },
  mirrors: { position: "absolute", left: 0, top: 0, opacity: 0 },
  mirror: { position: "absolute", left: 0, top: 0, lineHeight: LINE_HEIGHT },
  toolbar: { flexDirection: "row", alignItems: "center", gap: 2, marginTop: 2 },
  spacer: { flex: 1 },
  attachments: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 6,
    padding: 4,
    paddingBottom: 2,
  },
  chip: {
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 4,
    shadowOffset: { width: 0, height: 1 },
    elevation: 1,
  },
  round: {
    width: BUTTON,
    height: BUTTON,
    borderRadius: BUTTON / 2,
    alignItems: "center",
    justifyContent: "center",
  },
  layer: { position: "absolute" },
});

Documentation

Native port of beUI Prompt Input: a chat composer for agents, in the style of the ChatGPT app.

import { PromptInput } from "./src";

<PromptInput
  actions={[{ value: "photos", label: "Add photos" }]}
  models={[
    { value: "balanced", label: "Balanced" },
    { value: "deep", label: "Deep reasoning" },
  ]}
  attachments={attachments}
  onRemoveAttachment={remove}
  onVoice={startDictation}
  loading={streaming}
  onSubmit={(prompt, model) => send(prompt, model)}
  onStop={stop}
/>

Behavior

While the prompt fits on one line, the composer is a soft pill: a + button, the field ("Ask anything"), and a button on the right.
The right button is a mic while the field is empty and you pass onVoice, a primary send arrow once there's something to send, and stop while loading.
When the text wraps, the pill opens into a card: the text takes the full width and the + and send buttons sit in a row underneath. It grows to maxRows (6) lines, then scrolls.
attachments appear as chips above the text, each with a remove button when you pass onRemoveAttachment. A prompt can be sent with only attachments.
The + opens a Menu listing actions, then the models under a "Model" heading with the selected one checked. Slide a finger through it to choose.
Send submits the trimmed prompt with the selected model and clears the field when uncontrolled. Control it with value and onValueChange.
leadingAction adds your own controls beside the + button once the composer opens into a card.
Other TextInput props pass through to the field.

Better on a phone

Stopping a reply puts your last prompt back in an empty field, so you can adjust it and send again without retyping. Turn it off with restoreOnStop={false}.
The + menu keeps models and actions in one place within thumb reach, so the composer itself stays a single clean line.
The pill and card share one surface that glides between shapes, and the buttons glide to their new places.

Motion

Mic, send and stop trade places with a quick scale on one spring (stiffness 460, damping 30, mass 0.55).
The + turns 45° while its menu is open, and the menu's rows fade down into place 30 ms apart.
Buttons press to 0.9, and attachment chips rise in.

Accessibility

The field is named "Prompt", and the buttons "Add to prompt", "Voice", "Send prompt" and "Stop generating". The + button also says which model is selected.
Menus are announced as menus, and the selected model as selected. Attachment chips have "Remove …" buttons.
Reduced motion, or disableAnimation, swaps buttons and opens menus with fades only.

Keep the composer above the keyboard with your app's keyboard handling, such as KeyboardStickyView from react-native-keyboard-controller.

Copy this directory, components/menu/, hooks/use-presence.ts, hooks/use-reduced-motion.ts, primitives/agent-icons.tsx, primitives/render-icon.tsx, primitives/rise-in.tsx, styles/motion.ts, and the semantic tokens in styles/theme.css. It uses react-native-svg for its icons.

Also on the web. The React version of Prompt Input, built with Motion and Tailwind CSS.

Prompt Input

Preview