@vvedantb/native-ui 0.3.16 → 0.4.0

package/src/ai/message.tsx

@@ -0,0 +1,146 @@
+import { createContext, useContext, type ComponentType } from "react";
+import { View, type ViewProps } from "react-native";
+import {
+  IconCopy,
+  IconRefresh,
+  IconThumbDown,
+  IconThumbUp,
+  type IconProps,
+} from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { palette } from "../palette";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { ChatIconButton } from "./icon-button";
+import { ChatTextColorContext, ResponseText } from "./response-text";
+
+export type MessageRole = "user" | "assistant" | "system";
+
+const MessageContext = createContext<MessageRole>("assistant");
+
+export type MessageProps = ViewProps & {
+  from: MessageRole;
+  className?: string;
+};
+
+/**
+ * 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.
+ */
+export function Message({ from, className, style, ...props }: MessageProps) {
+  const user = from === "user";
+  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}
+      />
+    </MessageContext.Provider>
+  );
+}
+
+/**
+ * The web user bubble: `rounded-2xl rounded-br-md bg-primary` (radius 16 with
+ * the bottom-right corner at 14, `tokens.radius.md`).
+ */
+export function userBubbleStyle(scheme: "light" | "dark") {
+  return {
+    backgroundColor: palette.primary[scheme],
+    borderRadius: tokens.radius.lg,
+    borderBottomRightRadius: tokens.radius.md,
+  };
+}
+
+export type MessageContentProps = ViewProps & { className?: string };
+
+/**
+ * The message body. A user message is a filled bubble (`px-4 py-3`, the
+ * primary fill and label 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, className, style, ...props }: MessageContentProps) {
+  const from = useContext(MessageContext);
+  const scheme = useScheme();
+  const user = from === "user";
+  const color = user ? palette.primaryForeground[scheme] : tokens.color.foreground[scheme];
+  return (
+    <ChatTextColorContext.Provider value={color}>
+      <View
+        className={cn("min-w-0 max-w-full gap-2", user && "px-4 py-3", className)}
+        style={[user ? userBubbleStyle(scheme) : null, style]}
+        {...props}
+      >
+        {typeof children === "string" ? <ResponseText>{children}</ResponseText> : children}
+      </View>
+    </ChatTextColorContext.Provider>
+  );
+}
+
+export type MessageActionsBarProps = ViewProps & { className?: string };
+
+/** A row of `MessageAction`s under a message, as the web `flex items-center gap-1`. */
+export function MessageActionsBar({ className, ...props }: MessageActionsBarProps) {
+  return <View className={cn("flex-row items-center gap-1", className)} {...props} />;
+}
+
+/** The usual actions, with their icons and accessibility labels. */
+export const MESSAGE_ACTIONS = {
+  copy: { icon: IconCopy, label: "Copy" },
+  retry: { icon: IconRefresh, label: "Retry" },
+  like: { icon: IconThumbUp, label: "Good response" },
+  dislike: { icon: IconThumbDown, label: "Bad response" },
+} as const;
+
+export type MessageActionKind = keyof typeof MESSAGE_ACTIONS;
+
+export type MessageActionProps = {
+  /** A preset icon and label from `MESSAGE_ACTIONS`. `icon` and `label` override it. */
+  kind?: MessageActionKind;
+  icon?: ComponentType<IconProps>;
+  /** The accessibility label (the web `label` / `tooltip`). Required without `kind`. */
+  label?: string;
+  onPress?: () => void;
+  /**
+   * For feedback: the chosen action draws its icon in the foreground and
+   * reports `selected` to VoiceOver and TalkBack.
+   */
+  selected?: boolean;
+  disabled?: boolean;
+  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
+ * `Clipboard` is deprecated, and native-ui adds no clipboard package.
+ */
+export function MessageAction({
+  kind,
+  icon,
+  label,
+  onPress,
+  selected = false,
+  disabled,
+  testID,
+}: MessageActionProps) {
+  const scheme = useScheme();
+  const preset = kind ? MESSAGE_ACTIONS[kind] : undefined;
+  const Icon = icon ?? preset?.icon ?? IconCopy;
+  return (
+    <ChatIconButton
+      icon={Icon}
+      label={label ?? preset?.label ?? ""}
+      iconColor={selected ? tokens.color.foreground[scheme] : undefined}
+      accessibilityState={{ selected }}
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+    />
+  );
+}

package/src/ai/prompt-input.tsx

@@ -0,0 +1,186 @@
+import type { ReactNode } from "react";
+import { KeyboardAvoidingView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconArrowUp, IconPlayerStopFilled } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { fieldStyle, fieldTextStyle, typeStyle } from "../controlStyles";
+import { Input as FieldInput } from "../primitives/input";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { ChatIconButton, type ChatIconButtonProps } from "./icon-button";
+
+/** The `ai` SDK chat status the web `PromptInputSubmit` takes. */
+export type ChatStatus = "ready" | "submitted" | "streaming" | "error";
+
+/** Whether the AI is answering: `submitted` (waiting) or `streaming`. */
+export function isGenerating(status: ChatStatus | undefined) {
+  return status === "submitted" || status === "streaming";
+}
+
+export type PromptInputSubmitProps = {
+  status?: ChatStatus;
+  onSubmit?: () => void;
+  onStop?: () => void;
+  /** Whether there is something to send. Default `true`. */
+  canSubmit?: boolean;
+  testID?: string;
+};
+
+/**
+ * Send, or stop while the AI answers: the web `default` `icon-sm` button
+ * (32, round, slop to 44). Send is an up arrow on the primary fill, and the
+ * `secondary` fill, disabled, with nothing to send. While `status` is
+ * `submitted` or `streaming` it is a filled square labelled "Stop" that calls
+ * `onStop` (disabled without one).
+ */
+export function PromptInputSubmit({
+  status,
+  onSubmit,
+  onStop,
+  canSubmit = true,
+  testID,
+}: PromptInputSubmitProps) {
+  if (isGenerating(status)) {
+    return (
+      <ChatIconButton
+        icon={IconPlayerStopFilled}
+        label="Stop"
+        variant="primary"
+        onPress={onStop}
+        disabled={!onStop}
+        testID={testID}
+      />
+    );
+  }
+  return (
+    <ChatIconButton
+      icon={IconArrowUp}
+      label="Send"
+      variant={canSubmit ? "primary" : "secondary"}
+      onPress={onSubmit}
+      disabled={!canSubmit}
+      testID={testID}
+    />
+  );
+}
+
+export type PromptInputButtonProps = ChatIconButtonProps;
+
+/** A ghost tool button for the composer `toolbar`, such as attach (web `PromptInputButton`). Give it `icon` and `label`. */
+export function PromptInputButton(props: PromptInputButtonProps) {
+  return <ChatIconButton variant="ghost" {...props} />;
+}
+
+export type PromptInputProps = {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (text: string) => void;
+  /** Called with the trimmed text when Send is pressed. The field then clears. */
+  onSubmit: (text: string) => void;
+  status?: ChatStatus;
+  onStop?: () => void;
+  /** Default "What would you like to know?", as on the web. */
+  placeholder?: string;
+  /** Names the field for VoiceOver and TalkBack. Default "Message". */
+  accessibilityLabel?: string;
+  /** Above the field, such as `Attachments`. */
+  header?: ReactNode;
+  /** Before the send button, such as `PromptInputButton`s. */
+  toolbar?: ReactNode;
+  disabled?: boolean;
+  /** Pad the bottom safe-area inset (home indicator). Default `true`; turn it off when a tab bar below already does. */
+  safeBottom?: boolean;
+  /** Height of anything above the screen's own top, such as a navigation header, for the `KeyboardAvoidingView`. Default 0. */
+  keyboardVerticalOffset?: number;
+  className?: string;
+  testID?: string;
+};
+
+/** The field grows to this height, then scrolls: about 6 lines of `text-base` (24 each, with `py-2.5`), and about 8 of `text-xl` with larger text. */
+const MAX_FIELD_HEIGHT = { regular: 160, larger: 240 } as const;
+
+/**
+ * The chat composer: the web `PromptInput` field (`rounded-field border
+ * bg-field-background`, `fieldStyle`) with an optional `header` row, a
+ * multiline field that grows from one line, and a footer of `toolbar` tools
+ * and the send / stop button. It sits in a `KeyboardAvoidingView` (padding,
+ * on iOS and Android) and pads the safe-area insets, so put it last in a
+ * full-height column, under the `Conversation`.
+ */
+export function PromptInput({
+  value,
+  defaultValue = "",
+  onChangeText,
+  onSubmit,
+  status,
+  onStop,
+  placeholder = "What would you like to know?",
+  accessibilityLabel = "Message",
+  header,
+  toolbar,
+  disabled = false,
+  safeBottom = true,
+  keyboardVerticalOffset = 0,
+  className,
+  testID,
+}: PromptInputProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const [text, setText] = useControllableState({ value, defaultValue, onChange: onChangeText });
+  const message = text.trim();
+  const canSubmit = message.length > 0 && !disabled && !isGenerating(status);
+  const bottom = safeBottom ? insets.bottom : 0;
+
+  const submit = () => {
+    if (!canSubmit) return;
+    onSubmit(message);
+    setText("");
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior="padding"
+      // The keyboard covers the home indicator, so the inset padded below is
+      // taken off the lift: the composer sits right on the keyboard.
+      keyboardVerticalOffset={keyboardVerticalOffset - bottom}
+    >
+      <View
+        testID={testID}
+        className={cn("pt-2", className)}
+        style={{ paddingBottom: bottom + 8, paddingLeft: insets.left + 12, paddingRight: insets.right + 12 }}
+      >
+        <View className="border" style={fieldStyle(scheme)}>
+          {header ? <View className="flex-row flex-wrap gap-1 px-2 pt-2">{header}</View> : null}
+          {/* The `Textarea` field without its `numberOfLines` (default 4), which on Android sets the line count: this one starts at one line and grows. */}
+          <FieldInput
+            multiline
+            value={text}
+            onChangeText={setText}
+            placeholder={placeholder}
+            accessibilityLabel={accessibilityLabel}
+            editable={!disabled}
+            textAlignVertical="top"
+            className={cn(
+              "min-h-11 border-0 px-3.5 py-2.5 text-base font-instrument-sans",
+              largerText && "min-h-14 px-4 py-3 text-xl font-instrument-sans-medium",
+            )}
+            style={[
+              fieldTextStyle(scheme),
+              largerText ? typeStyle("medium") : null,
+              {
+                backgroundColor: "transparent",
+                maxHeight: largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular,
+              },
+            ]}
+          />
+          <View className="flex-row items-center justify-between gap-1 px-2 pb-2">
+            <View className="min-w-0 shrink flex-row items-center gap-1">{toolbar}</View>
+            <PromptInputSubmit status={status} onSubmit={submit} onStop={onStop} canSubmit={canSubmit} />
+          </View>
+        </View>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}

package/src/ai/reasoning.tsx

@@ -0,0 +1,200 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Text, View } from "react-native";
+import { IconBrain } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { MONO_FONT, chatTextSize, formatElapsed } from "./chat-text";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+} from "./collapsible";
+import { ResponseText } from "./response-text";
+import { Shimmer } from "./shimmer";
+
+type ReasoningContextValue = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  /** Whole seconds the reasoning streamed for, or `undefined` before it is known. */
+  duration: number | undefined;
+};
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export function useReasoning() {
+  const context = useContext(ReasoningContext);
+  if (!context) throw new Error("Reasoning components must be used within Reasoning");
+  return context;
+}
+
+const AUTO_CLOSE_DELAY_MS = 1000;
+
+export type ReasoningProps = Omit<CollapsibleProps, "open" | "defaultOpen" | "onOpenChange"> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  /** Default: open while streaming. `false` keeps it shut when streaming starts, as on the web. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Seconds, when the app knows them (a reloaded thread). Default: timed from `isStreaming`. */
+  duration?: number;
+};
+
+/**
+ * The AI's reasoning, folded. As on the web it opens when streaming starts,
+ * times the stream, and closes once, a second after it stops. Unlike the web,
+ * a reader can close it while it streams (the web reopens it), and a toggle
+ * after the stream cancels the pending close, as `useStreamingDisclosure`.
+ */
+export function Reasoning({
+  isStreaming = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  duration,
+  className,
+  ...props
+}: ReasoningProps) {
+  const [isOpen, setOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen ?? isStreaming,
+    onChange: onOpenChange,
+  });
+  const [measured, setMeasured] = useState<number | undefined>(undefined);
+  const [closeDue, setCloseDue] = useState(false);
+  const startedAt = useRef<number | null>(isStreaming ? Date.now() : null);
+
+  // Runs when the stream starts or stops, not on every open change, so a
+  // reader's own close mid-stream holds.
+  useEffect(() => {
+    if (isStreaming) {
+      if (startedAt.current === null) startedAt.current = Date.now();
+      if (!isOpen && defaultOpen !== false) setOpen(true);
+      setCloseDue(false);
+    } else if (startedAt.current !== null) {
+      setMeasured(Math.ceil((Date.now() - startedAt.current) / 1000));
+      startedAt.current = null;
+      if (isOpen) setCloseDue(true);
+    }
+  }, [isStreaming]);
+
+  useEffect(() => {
+    if (!closeDue) return;
+    const timer = setTimeout(() => {
+      setOpen(false);
+      setCloseDue(false);
+    }, AUTO_CLOSE_DELAY_MS);
+    return () => clearTimeout(timer);
+  }, [closeDue]);
+
+  const setIsOpen = (next: boolean) => {
+    setCloseDue(false);
+    setOpen(next);
+  };
+
+  return (
+    <ReasoningContext.Provider
+      value={{ isStreaming, isOpen, setIsOpen, duration: duration ?? measured }}
+    >
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className={cn("mb-4", className)}
+        {...props}
+      />
+    </ReasoningContext.Provider>
+  );
+}
+
+/** "Thinking…" while streaming, then "Thought for 12s" ("Thought for a few seconds" with no duration). */
+export function reasoningMessage(isStreaming: boolean, duration?: number): string {
+  if (isStreaming) return "Thinking…";
+  if (duration === undefined) return "Thought for a few seconds";
+  return `Thought for ${formatElapsed(duration)}`;
+}
+
+export type ReasoningTriggerProps = CollapsibleTriggerProps & {
+  /** Replaces `reasoningMessage`. A string, as it is also the accessibility label. */
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => string;
+};
+
+/** Brain icon, the shimmering "Thinking…" or "Thought for 12s", and a chevron: the web `ReasoningTrigger`. */
+export function ReasoningTrigger({
+  children,
+  getThinkingMessage = reasoningMessage,
+  className,
+  ...props
+}: ReasoningTriggerProps) {
+  const { isStreaming, isOpen, duration } = useReasoning();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const message = getThinkingMessage(isStreaming, duration);
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 20 : 16;
+  return (
+    <CollapsibleTrigger
+      accessibilityLabel={message}
+      className={cn("w-full flex-row items-center gap-2 py-1", className)}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <IconBrain size={iconSize} color={muted} />
+          {isStreaming ? (
+            <Shimmer duration={1} numberOfLines={1}>
+              {message}
+            </Shimmer>
+          ) : (
+            <ResponseText size="small" tone="muted" selectable={false} numberOfLines={1} className="shrink">
+              {message}
+            </ResponseText>
+          )}
+          <CollapsibleChevron open={isOpen} size={iconSize} color={muted} />
+        </>
+      )}
+    </CollapsibleTrigger>
+  );
+}
+
+export type ReasoningContentProps = {
+  children: string;
+  className?: string;
+};
+
+/**
+ * The reasoning text, muted and monospaced, on the web `rounded-lg
+ * bg-surface-secondary/40 p-3` panel. Plain text: see `ResponseText` for
+ * markdown.
+ */
+export function ReasoningContent({ children, className }: ReasoningContentProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const size = chatTextSize("small", largerText);
+  return (
+    <CollapsibleContent className={cn("pb-1 pt-2", className)}>
+      <View
+        className="p-3"
+        style={{
+          borderRadius: tokens.radius.lg,
+          backgroundColor: withAlpha(tokens.color.surfaceSecondary[scheme], 0.4),
+        }}
+      >
+        <Text
+          selectable
+          className={size}
+          style={[sizeStyle(size), textStyle("muted", scheme), { fontFamily: MONO_FONT }]}
+        >
+          {children}
+        </Text>
+      </View>
+    </CollapsibleContent>
+  );
+}

package/src/ai/response-text.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext } from "react";
+import { Text, type TextProps } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize, type ChatTextKind } from "./chat-text";
+
+// Markdown stub. The web renders replies with Streamdown; native-ui has no
+// markdown peer, so `ResponseText` draws the text as it is, newlines kept.
+// An app that wants markdown can render one of these in its place:
+// `react-native-markdown-display`, `@ronradtke/react-native-markdown-display`
+// (a maintained fork) or `react-native-marked`.
+
+/**
+ * The text colour `MessageContent` hands down: React Native text does not
+ * inherit a colour from its parent view, as web text does from `color`.
+ */
+export const ChatTextColorContext = createContext<string | undefined>(undefined);
+
+export type ResponseTextProps = Omit<TextProps, "children"> & {
+  children: string;
+  /** Default: the enclosing `MessageContent` colour, else the foreground. */
+  tone?: "foreground" | "muted";
+  /** Default `"body"` (16, `text-xl` with larger text). See `chatTextSize`. */
+  size?: ChatTextKind;
+  className?: string;
+};
+
+/** Plain reply text, selectable, newlines kept. The markdown placeholder. */
+export function ResponseText({
+  children,
+  tone,
+  size = "body",
+  selectable = true,
+  className,
+  style,
+  ...props
+}: ResponseTextProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  const textSize = chatTextSize(size, largerText);
+  const color =
+    tone || !inherited ? textStyle(tone ?? "foreground", scheme) : { color: inherited };
+  return (
+    <Text
+      selectable={selectable}
+      className={cn(textSize, "font-instrument-sans", className)}
+      style={[sizeStyle(textSize), color, style]}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}

package/src/ai/shimmer.tsx

@@ -0,0 +1,86 @@
+import { useEffect } from "react";
+import { Text, type StyleProp, type TextStyle } from "react-native";
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from "react-native-reanimated";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize, type ChatTextKind } from "./chat-text";
+
+/**
+ * Lowest opacity of the pulse. The foreground at 0.45 on the page is close to
+ * the muted colour, the far end of the web sweep.
+ */
+export const SHIMMER_LOW_OPACITY = 0.45;
+
+export type ShimmerProps = {
+  children: string;
+  /** Seconds for one pass, as on the web. Default 2. */
+  duration?: number;
+  /** Default `"small"` (14, `text-lg` with larger text). */
+  size?: ChatTextKind;
+  numberOfLines?: number;
+  className?: string;
+  style?: StyleProp<TextStyle>;
+};
+
+/**
+ * "Live" text, such as "Thinking…". The web sweeps a foreground band across
+ * muted text (`bg-clip-text`), which React Native cannot clip to the glyphs
+ * without a masked view. Here the foreground text fades to
+ * `SHIMMER_LOW_OPACITY` and back once per `duration`, on the UI thread with
+ * Reanimated. With Reduce Motion it holds still in the muted colour.
+ */
+export function Shimmer({
+  children,
+  duration = 2,
+  size = "small",
+  numberOfLines,
+  className,
+  style,
+}: ShimmerProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const reduceMotion = useReduceMotion();
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    if (reduceMotion) {
+      cancelAnimation(opacity);
+      opacity.value = 1;
+      return;
+    }
+    opacity.value = withRepeat(
+      withTiming(SHIMMER_LOW_OPACITY, { duration: (duration * 1000) / 2 }),
+      -1,
+      true,
+    );
+    return () => cancelAnimation(opacity);
+  }, [opacity, reduceMotion, duration]);
+
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
+  const textSize = chatTextSize(size, largerText);
+
+  return (
+    <Animated.View className="min-w-0 shrink" style={animatedStyle}>
+      <Text
+        numberOfLines={numberOfLines}
+        className={cn(textSize, "font-instrument-sans", className)}
+        style={[
+          sizeStyle(textSize),
+          textStyle(reduceMotion ? "muted" : "foreground", scheme),
+          style,
+        ]}
+      >
+        {children}
+      </Text>
+    </Animated.View>
+  );
+}