@crafter/rn-ai-elements 0.0.1

package/src/chatbot/Conversation.tsx

@@ -0,0 +1,537 @@
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import {
+  FlatList,
+  StyleSheet,
+  View,
+  type LayoutChangeEvent,
+  type ListRenderItemInfo,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+/**
+ * Distance in px from the bottom of the content that still counts as "at the
+ * bottom" for the purposes of auto-following content growth (e.g. expanding
+ * a Sources collapsible).
+ */
+const STICK_TO_BOTTOM_THRESHOLD = 80;
+
+/** Delay before retrying a failed `scrollToIndex` once layout settles. */
+const SCROLL_RETRY_DELAY_MS = 120;
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Minimum shape Conversation requires from a message. Most chat libraries
+ * (the Vercel `ai` SDK, OpenAI's `ChatMessage`, Anthropic's `Message`) all
+ * satisfy this contract via `id` + `role`.
+ */
+export interface ConversationMessage {
+  id: string;
+  /** Optional — used by the default `isUserMessage` predicate. */
+  role?: string;
+}
+
+/** Order in which `messages` is provided. */
+export type ConversationMessageOrder = 'oldest-first' | 'newest-first';
+
+/**
+ * How `Conversation` reacts to new messages and content growth.
+ *
+ * - `'anchor-user-message'` *(default)* — When a new user message arrives,
+ *   scroll it to the top of the viewport and use dynamic bottom padding so
+ *   the assistant response streams downward beneath it. Auto-scroll on
+ *   collapsible expansion (e.g. opening a Sources block) when the user is
+ *   already near the bottom and not currently streaming. This mimics how
+ *   ChatGPT, Claude, and Vercel ai-elements anchor each new turn.
+ * - `'stick-to-bottom'` — Classic chat behavior: always follow the bottom
+ *   on any content size change, even mid-stream. The list "sticks" to the
+ *   newest content. Matches what `use-stick-to-bottom` does on the web.
+ * - `'none'` — Disable all automatic scrolling and dynamic padding. The
+ *   consumer is fully responsible for managing scroll position via the
+ *   imperative `ConversationRef`.
+ */
+export type ConversationScrollBehavior =
+  | 'anchor-user-message'
+  | 'stick-to-bottom'
+  | 'none';
+
+/** Imperative handle exposed via ref. */
+export interface ConversationRef {
+  /** Scroll to a given display index, optionally animated. */
+  scrollToIndex: (
+    index: number,
+    opts?: { animated?: boolean; viewPosition?: number },
+  ) => void;
+  /** Scroll to the top of the list (oldest message). */
+  scrollToTop: (opts?: { animated?: boolean }) => void;
+  /** Scroll to the bottom of the list (newest message). */
+  scrollToBottom: (opts?: { animated?: boolean }) => void;
+  /** Whether the user is currently scrolled near the bottom of content. */
+  isAtBottom: () => boolean;
+}
+
+export interface ConversationProps<T extends ConversationMessage>
+  extends Omit<ViewProps, 'children'> {
+  /** Imperative handle. Use `useRef<ConversationRef>(null)` and pass it here. */
+  ref?: Ref<ConversationRef>;
+  /** The conversation messages. Order is controlled by the `order` prop. */
+  messages: T[];
+  /** Render a single message. Called for each item in display order. */
+  renderMessage: (item: T) => ReactNode;
+  /** Rendered when `messages` is empty. Filled to the chat area (`flex: 1`). */
+  emptyState?: ReactNode;
+  /**
+   * Whether the assistant is currently generating. While true, content
+   * growth from streaming is **not** auto-scrolled — the user-message
+   * anchor takes precedence. Once it flips back to false, content growth
+   * (e.g. expanding a Sources / Reasoning collapsible) auto-scrolls if
+   * the user was already near the bottom.
+   */
+  isStreaming?: boolean;
+  /**
+   * Order of items in the `messages` array. Defaults to `'oldest-first'`,
+   * matching what `@ai-sdk/react`'s `useChat()` and most LLM SDKs return.
+   * Use `'newest-first'` if your state is built with `[newMsg, ...prev]`.
+   */
+  order?: ConversationMessageOrder;
+  /**
+   * Predicate for identifying user messages — used to anchor the most
+   * recent user message to the top of the viewport when it appears.
+   * Defaults to `(m) => m.role === 'user'`.
+   */
+  isUserMessage?: (item: T) => boolean;
+  /**
+   * Push-based notification when the "near the bottom" state changes.
+   * Fires once on each transition (true → false or false → true), driven
+   * by either user scroll events or content-size growth from streaming.
+   * Use this to drive a floating scroll-to-bottom button — see
+   * `ConversationScrollButton`.
+   */
+  onIsAtBottomChange?: (isAtBottom: boolean) => void;
+  /**
+   * How to react to new messages and content growth. Defaults to
+   * `'anchor-user-message'`. See {@link ConversationScrollBehavior}.
+   */
+  scrollBehavior?: ConversationScrollBehavior;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const defaultIsUserMessage = (m: ConversationMessage): boolean =>
+  m.role === 'user';
+
+/**
+ * Find the most-recently-added user message regardless of array order.
+ * - For `'newest-first'`: the newest user msg is the *first* match in the
+ *   forward direction.
+ * - For `'oldest-first'`: the newest user msg is the *last* match, so we
+ *   walk backward.
+ */
+function findNewestUserMessage<T extends ConversationMessage>(
+  messages: T[],
+  isUserMessage: (m: T) => boolean,
+  order: ConversationMessageOrder,
+): T | undefined {
+  if (order === 'newest-first') {
+    return messages.find(isUserMessage);
+  }
+  for (let i = messages.length - 1; i >= 0; i -= 1) {
+    if (isUserMessage(messages[i])) return messages[i];
+  }
+  return undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Chat list, top-to-bottom, with three signature behaviors:
+ *
+ * 1. **Anchor on send.** When a new user message arrives, the list scrolls
+ *    that message to the top of the viewport. The assistant response then
+ *    streams downward beneath it.
+ * 2. **Dynamic bottom padding.** When the conversation is shorter than the
+ *    viewport, padding fills the gap so the user message can still be
+ *    anchored to the top. Once natural content fills the viewport, the
+ *    padding collapses to zero so the user can't scroll into empty space.
+ * 3. **Stick-to-bottom on growth.** When the user is already near the
+ *    bottom and content grows (e.g. they tap "Sources" to expand), the
+ *    list animates to show the new content. Disabled while
+ *    `isStreaming === true` to avoid fighting the anchor.
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<ConversationRef>(null);
+ *
+ * <Conversation
+ *   ref={ref}
+ *   messages={messages}                  // any T extends { id, role? }
+ *   renderMessage={(m) => <Bubble msg={m} />}
+ *   isStreaming={isLoading}
+ *   order="oldest-first"                  // or "newest-first"
+ *   emptyState={<EmptyChat />}
+ * />
+ * ```
+ */
+function ConversationInner<T extends ConversationMessage>({
+  ref,
+  messages,
+  renderMessage,
+  emptyState,
+  isStreaming = false,
+  order = 'oldest-first',
+  isUserMessage = defaultIsUserMessage as (item: T) => boolean,
+  onIsAtBottomChange,
+  scrollBehavior = 'anchor-user-message',
+  style,
+  ...viewProps
+}: ConversationProps<T>) {
+  const theme = useAIElementsTheme();
+  const listRef = useRef<FlatList<T>>(null);
+
+  // --- Refs (frequently updated, no re-render) ----------------------------
+
+  /** Latest scroll position (true when within threshold of the bottom). */
+  const isAtBottomRef = useRef(true);
+  /** Latest "natural" content height (i.e. without dynamic padding). */
+  const previousNaturalRef = useRef(0);
+  /** Newest natural content height — readable from the imperative API. */
+  const naturalContentHeightRef = useRef(0);
+  /** Mirror of `isStreaming` so callbacks can read the freshest value. */
+  const isStreamingRef = useRef(isStreaming);
+  isStreamingRef.current = isStreaming;
+  /** Mirror of `scrollBehavior` so callbacks read the freshest value. */
+  const scrollBehaviorRef = useRef(scrollBehavior);
+  scrollBehaviorRef.current = scrollBehavior;
+  /** Last user-message id we anchored to — guards against re-anchoring. */
+  const lastUserMsgIdRef = useRef<string | null>(null);
+  /**
+   * The natural content height as it stood **before** the most recent user
+   * message was added. Used as the baseline for the dynamic-padding
+   * formula so the new user message can always be scrolled to viewport
+   * top, regardless of how much history sits above it. `null` until the
+   * first user message has been anchored.
+   */
+  const naturalAtAnchorRef = useRef<number | null>(null);
+
+  // --- onIsAtBottomChange plumbing ----------------------------------------
+  /** Mirror the callback so call sites don't bust useCallback memos. */
+  const onIsAtBottomChangeRef = useRef(onIsAtBottomChange);
+  onIsAtBottomChangeRef.current = onIsAtBottomChange;
+  /** Last value emitted to the consumer — used to dedupe transitions. */
+  const lastEmittedIsAtBottomRef = useRef(true);
+  /** Latest scroll metrics — needed so contentSize changes can recompute. */
+  const scrollMetricsRef = useRef({ contentOffset: 0, layoutHeight: 0 });
+
+  /**
+   * Compute isAtBottom from the latest scroll metrics + a known content
+   * height. Updates `isAtBottomRef` and fires the change callback if the
+   * value transitioned.
+   *
+   * Skips when `layoutHeight === 0` — that's the "no scroll event has
+   * fired yet" sentinel. Without this guard, the first
+   * `handleListContentSizeChange` after mount would compute
+   * `distanceFromBottom = contentHeight - 0 - 0 = contentHeight`, which
+   * is always huge, and emit a false `isAtBottom: false` before the user
+   * has even scrolled.
+   */
+  const updateIsAtBottom = useCallback((contentHeight: number) => {
+    const { contentOffset, layoutHeight } = scrollMetricsRef.current;
+    if (layoutHeight === 0) return;
+    const distanceFromBottom = contentHeight - (contentOffset + layoutHeight);
+    const isAtBottom = distanceFromBottom < STICK_TO_BOTTOM_THRESHOLD;
+    isAtBottomRef.current = isAtBottom;
+    if (isAtBottom !== lastEmittedIsAtBottomRef.current) {
+      lastEmittedIsAtBottomRef.current = isAtBottom;
+      onIsAtBottomChangeRef.current?.(isAtBottom);
+    }
+  }, []);
+
+  // --- Display order ------------------------------------------------------
+  // We always render top-to-bottom = oldest-first. If the caller passes
+  // newest-first, reverse internally.
+  const orderedMessages = useMemo(
+    () => (order === 'newest-first' ? [...messages].reverse() : messages),
+    [messages, order],
+  );
+
+  // --- Dynamic bottom padding ---------------------------------------------
+  const [chatAreaHeight, setChatAreaHeight] = useState(0);
+  const [listPaddingBottom, setListPaddingBottom] = useState(0);
+
+  const handleAreaLayout = useCallback((e: LayoutChangeEvent) => {
+    setChatAreaHeight(e.nativeEvent.layout.height);
+  }, []);
+
+  const handleListContentSizeChange = useCallback(
+    (_w: number, h: number) => {
+      // `h` is the *total* content height, which already includes whatever
+      // bottom padding we previously set. Subtract it back out to get the
+      // natural (real) content height.
+      const natural = Math.max(0, h - listPaddingBottom);
+      const grew = natural > previousNaturalRef.current;
+      previousNaturalRef.current = natural;
+      naturalContentHeightRef.current = natural;
+
+      const behavior = scrollBehaviorRef.current;
+
+      // --- Dynamic bottom padding (anchor-user-message mode only) ---------
+      // Reserve enough room so the most recent user message can be
+      // scrolled to the top of the viewport. We measure this as "content
+      // added since the user message arrived" and pad the rest of the
+      // viewport. As the assistant streams below the user message,
+      // contentBelowAnchor grows and the padding shrinks proportionally —
+      // total content height stays constant until the assistant has
+      // produced enough text to fill the viewport on its own, at which
+      // point padding naturally hits zero.
+      //
+      // The other modes don't need padding manipulation, so they fall
+      // back to zero.
+      let desired = 0;
+      if (behavior === 'anchor-user-message') {
+        const contentBelowAnchor =
+          naturalAtAnchorRef.current !== null
+            ? Math.max(0, natural - naturalAtAnchorRef.current)
+            : natural;
+        desired = Math.max(0, chatAreaHeight - contentBelowAnchor);
+      }
+      if (desired !== listPaddingBottom) {
+        setListPaddingBottom(desired);
+      }
+
+      // Re-evaluate isAtBottom against the new content height. The user
+      // may have been "at the bottom" before this growth and now no longer
+      // be — common during streaming when the assistant pushes content
+      // past the viewport while the user passively watches.
+      updateIsAtBottom(h);
+
+      // --- Auto-scroll on growth ------------------------------------------
+      // Behavior depends on the mode:
+      //
+      //   anchor-user-message: only follow the bottom when the user is
+      //     already near it AND not streaming. Streaming uses the
+      //     user-message anchor instead, and auto-scrolling would fight
+      //     it. Post-streaming this catches collapsible expansions.
+      //   stick-to-bottom: always follow the bottom on growth, even
+      //     mid-stream — classic chat behavior.
+      //   none: never auto-scroll. Consumer drives the list via the ref.
+      if (!grew || behavior === 'none') return;
+
+      const shouldFollow =
+        behavior === 'stick-to-bottom'
+          ? true
+          : !isStreamingRef.current && isAtBottomRef.current;
+
+      if (shouldFollow) {
+        requestAnimationFrame(() => {
+          listRef.current?.scrollToEnd({ animated: true });
+        });
+      }
+    },
+    [listPaddingBottom, chatAreaHeight, updateIsAtBottom],
+  );
+
+  const handleScroll = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const { contentOffset, layoutMeasurement, contentSize } = e.nativeEvent;
+      scrollMetricsRef.current = {
+        contentOffset: contentOffset.y,
+        layoutHeight: layoutMeasurement.height,
+      };
+      updateIsAtBottom(contentSize.height);
+    },
+    [updateIsAtBottom],
+  );
+
+  // Recompute the padding if the viewport itself changes (rotation, keyboard).
+  // Mirrors the formula in handleListContentSizeChange — same anchor-aware
+  // contentBelowAnchor calculation so the user message stays anchored
+  // through orientation changes. Skipped entirely outside the
+  // anchor-user-message mode since other modes don't manage padding.
+  useEffect(() => {
+    if (chatAreaHeight === 0) return;
+    if (scrollBehavior !== 'anchor-user-message') {
+      if (listPaddingBottom !== 0) setListPaddingBottom(0);
+      return;
+    }
+    const contentBelowAnchor =
+      naturalAtAnchorRef.current !== null
+        ? Math.max(
+            0,
+            naturalContentHeightRef.current - naturalAtAnchorRef.current,
+          )
+        : naturalContentHeightRef.current;
+    const desired = Math.max(0, chatAreaHeight - contentBelowAnchor);
+    setListPaddingBottom(desired);
+    // listPaddingBottom intentionally omitted to avoid feedback loops —
+    // the same set of conditions runs again whenever it actually matters.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [chatAreaHeight, scrollBehavior]);
+
+  // --- Auto-anchor new user message to the top of the viewport -----------
+  // Only the `'anchor-user-message'` mode performs this scroll. The other
+  // modes leave scroll position to the consumer (or to stick-to-bottom).
+  useEffect(() => {
+    if (scrollBehavior !== 'anchor-user-message') return;
+
+    const newestUserMsg = findNewestUserMessage(messages, isUserMessage, order);
+    if (!newestUserMsg || newestUserMsg.id === lastUserMsgIdRef.current) {
+      return;
+    }
+    lastUserMsgIdRef.current = newestUserMsg.id;
+
+    // Capture the natural content height as it stood **before** this new
+    // user message arrived. handleListContentSizeChange may or may not
+    // have already processed the new content, but `previousNaturalRef`
+    // always holds the value from the most recent step *before* the
+    // latest update — which for a freshly-arrived message is the height
+    // without it. This becomes the baseline for the dynamic-padding
+    // formula so the new message can be scrolled all the way to the top
+    // even when there's history above it.
+    naturalAtAnchorRef.current = previousNaturalRef.current;
+
+    const displayIndex = orderedMessages.findIndex(
+      (m) => m.id === newestUserMsg.id,
+    );
+    if (displayIndex < 0) return;
+
+    // Wait for the new item to be laid out before scrolling.
+    requestAnimationFrame(() => {
+      listRef.current?.scrollToIndex({
+        index: displayIndex,
+        viewPosition: 0,
+        animated: true,
+      });
+    });
+  }, [messages, orderedMessages, order, isUserMessage, scrollBehavior]);
+
+  // --- Imperative handle --------------------------------------------------
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToIndex: (index, opts) => {
+        listRef.current?.scrollToIndex({
+          index,
+          viewPosition: opts?.viewPosition ?? 0,
+          animated: opts?.animated ?? true,
+        });
+      },
+      scrollToTop: (opts) => {
+        listRef.current?.scrollToOffset({
+          offset: 0,
+          animated: opts?.animated ?? true,
+        });
+      },
+      scrollToBottom: (opts) => {
+        listRef.current?.scrollToEnd({ animated: opts?.animated ?? true });
+      },
+      isAtBottom: () => isAtBottomRef.current,
+    }),
+    [],
+  );
+
+  // --- Row renderer -------------------------------------------------------
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<T>) => <>{renderMessage(item)}</>,
+    [renderMessage],
+  );
+
+  const keyExtractor = useCallback((item: T) => item.id, []);
+
+  const handleScrollToIndexFailed = useCallback(
+    (info: {
+      index: number;
+      highestMeasuredFrameIndex: number;
+      averageItemLength: number;
+    }) => {
+      // Fallback for items not yet measured: approximate offset, then
+      // retry once layout settles.
+      const offset = info.averageItemLength * info.index;
+      listRef.current?.scrollToOffset({ offset, animated: true });
+      setTimeout(() => {
+        listRef.current?.scrollToIndex({
+          index: info.index,
+          viewPosition: 0,
+          animated: true,
+        });
+      }, SCROLL_RETRY_DELAY_MS);
+    },
+    [],
+  );
+
+  return (
+    <View
+      {...viewProps}
+      style={[styles.root, style]}
+      onLayout={handleAreaLayout}
+    >
+      {messages.length === 0 ? (
+        <View style={styles.emptyFill}>{emptyState}</View>
+      ) : (
+        <FlatList
+          ref={listRef}
+          data={orderedMessages}
+          renderItem={renderItem}
+          keyExtractor={keyExtractor}
+          scrollEventThrottle={16}
+          showsVerticalScrollIndicator={false}
+          keyboardDismissMode="interactive"
+          onScroll={handleScroll}
+          onContentSizeChange={handleListContentSizeChange}
+          contentContainerStyle={{
+            paddingTop: theme.spacing.lg,
+            paddingBottom: listPaddingBottom,
+          }}
+          onScrollToIndexFailed={handleScrollToIndexFailed}
+        />
+      )}
+    </View>
+  );
+}
+
+ConversationInner.displayName = 'Conversation';
+
+// `memo` strips the generic from the function signature, so we cast it back
+// to a generic-friendly call signature for the public export. The runtime
+// behavior is unchanged — only the type is preserved.
+export const Conversation = memo(ConversationInner) as <
+  T extends ConversationMessage,
+>(
+  props: ConversationProps<T>,
+) => ReactElement;
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+  emptyFill: {
+    flex: 1,
+  },
+});

package/src/chatbot/ConversationScrollButton.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { ArrowDown } from 'lucide-react-native';
+import { GlassView } from 'expo-glass-effect';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ConversationScrollButtonProps {
+  /**
+   * Whether the button is currently visible. When false, the component
+   * returns `null` (mount/unmount instead of fade) so the underlying
+   * `GlassView` native view is never wrapped in something Reanimated
+   * touches — see the comment block below for why that matters.
+   */
+  visible: boolean;
+  /** Press handler — typically calls `conversationRef.current.scrollToBottom()`. */
+  onPress: () => void;
+  /** Outer style for the floating wrapper (use for absolute positioning). */
+  style?: StyleProp<ViewStyle>;
+  /** Optional accessibility label override. */
+  accessibilityLabel?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+// Match the PromptInput's CircleButton dimensions exactly so the scroll
+// button visually stacks above the Plus button as a continuation of the
+// same control column.
+const CIRCLE_BUTTON_SIZE = 36;
+const ICON_SIZE = 18;
+const isIOS = Platform.OS === 'ios';
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * A floating circle button that appears when the user has scrolled away
+ * from the bottom of a conversation, and disappears when they return.
+ *
+ * Designed to sit in the chat area's bottom-left corner so it visually
+ * stacks above the PromptInput's Plus button — same size, same glass
+ * treatment, same press feedback. Pairs with
+ * `<Conversation onIsAtBottomChange={...} />`: the parent screen tracks
+ * the boolean and passes it as `visible`.
+ *
+ * @example
+ * ```tsx
+ * const [isAtBottom, setIsAtBottom] = useState(true);
+ * const ref = useRef<ConversationRef>(null);
+ *
+ * <View style={{ flex: 1 }}>
+ *   <Conversation
+ *     ref={ref}
+ *     onIsAtBottomChange={setIsAtBottom}
+ *     ...
+ *   />
+ *   <ConversationScrollButton
+ *     visible={!isAtBottom}
+ *     onPress={() => ref.current?.scrollToBottom()}
+ *     style={{ position: 'absolute', left: 12, bottom: 12 }}
+ *   />
+ * </View>
+ * ```
+ *
+ * **Why no fade animation?**
+ * Earlier iterations wrapped this in a Reanimated `Animated.View` for a
+ * smooth fade-in/out. On the iOS simulator (and likely device) the
+ * `expo-glass-effect` `GlassView` would render correctly on first mount
+ * but lose its glass material after a Fast Refresh or reload. Reanimated
+ * drives styles on the UI thread via a code path that conflicts with
+ * `expo-glass-effect`'s custom native view manager — the prop diff that
+ * re-applies the glass layer never reaches the native view. Dropping the
+ * animation wrapper and using a plain conditional render keeps the
+ * GlassView in exactly the same context as the working `Plus` button
+ * inside `PromptInput.CircleButton`.
+ */
+export function ConversationScrollButton({
+  visible,
+  onPress,
+  style,
+  accessibilityLabel = 'Scroll to latest message',
+}: ConversationScrollButtonProps) {
+  const theme = useAIElementsTheme();
+
+  if (!visible) return null;
+
+  return (
+    <GlassView
+      glassEffectStyle={isIOS ? 'regular' : 'none'}
+      isInteractive
+      colorScheme={theme.dark ? 'dark' : 'light'}
+      style={[
+        styles.circleButton,
+        // On non-iOS GlassView is just a plain View — paint the bg
+        // ourselves to match the PromptInput's Plus fallback.
+        !isIOS && { backgroundColor: theme.colors.secondary },
+        style,
+      ]}
+    >
+      <Pressable
+        onPress={onPress}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel}
+        style={({ pressed }) => [
+          styles.circleButtonInner,
+          { opacity: pressed ? 0.6 : 1 },
+        ]}
+      >
+        <ArrowDown size={ICON_SIZE} color={theme.colors.foreground} />
+      </Pressable>
+    </GlassView>
+  );
+}
+
+ConversationScrollButton.displayName = 'ConversationScrollButton';
+
+// ---------------------------------------------------------------------------
+// Styles — mirror the PromptInput CircleButton's dimensions exactly
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  circleButton: {
+    width: CIRCLE_BUTTON_SIZE,
+    height: CIRCLE_BUTTON_SIZE,
+    borderRadius: CIRCLE_BUTTON_SIZE / 2,
+    // Clip the GlassView blur (and the non-iOS bg) to the rounded shape.
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  circleButtonInner: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});