@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/conversation.jsx

@@ -0,0 +1,723 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, isValidElement, useContext, useRef, useState } from "react";
+import { FlatList, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import { IconArrowDown } from "@tabler/icons-react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { EASE_OUT } from "../motion";
+import { Button } from "../Button";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { KeyboardLiftContext, useKeyboardParts } from "../primitives/keyboard-parts";
+import { NativeOnlyAnimatedView } from "../primitives/native-only-animated-view";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/** Within this many points of the end, the thread counts as at the bottom and keeps following new content. */
+export const AT_BOTTOM_THRESHOLD = 70;
+
+/**
+ * Whether a scroll position is within `AT_BOTTOM_THRESHOLD` of the end.
+ * Content shorter than the view is at the bottom. `bottomInset` is space
+ * added past the content (the keyboard's, with `KeyboardControllerProvider`).
+ * An `inverted` list (newest first) has its end at offset 0, and there
+ * `bottomInset` is space added before offset 0 (the keyboard's on iOS), so
+ * the end is at minus `bottomInset`.
+ */
+export function isScrolledToBottom({
+  contentOffset,
+  contentSize,
+  layoutMeasurement
+}, bottomInset = 0, inverted = false) {
+  if (inverted) return contentOffset.y + bottomInset <= AT_BOTTOM_THRESHOLD;
+  return contentSize.height + bottomInset - layoutMeasurement.height - contentOffset.y <= AT_BOTTOM_THRESHOLD;
+}
+
+/**
+ * What the thread scrolls with: the `ScrollView` of `ConversationContent` or
+ * the `FlatList` of `ConversationList`. `scrollToEnd` goes to the newest
+ * message, which is offset 0 in an inverted list. `scrollTo` goes to an
+ * offset; only the `ScrollView` has it, so call it as `scrollTo?.(...)`.
+ */
+
+const ConversationContext = createContext(null);
+
+/** `isAtBottom` and `scrollToBottom` of the enclosing `Conversation`, for a custom scroll button. */
+export function useConversation() {
+  const context = useContext(ConversationContext);
+  if (!context) {
+    throw new Error("Conversation parts must be used within Conversation");
+  }
+  return context;
+}
+/**
+ * The thread frame (web `relative flex-1`). It sticks to the bottom: while the
+ * reader is at the end, new and growing messages stay in view; once they
+ * scroll up, it stops following and `ConversationScrollButton` shows.
+ */
+export function Conversation(t0) {
+  const $ = _c(21);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  const reduceMotion = useReduceMotion();
+  const scrollRef = useRef(null);
+  const atBottom = useRef(true);
+  const autoScrolling = useRef(false);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [dockHeight, setDockHeight] = useState(0);
+  let t1;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = next => {
+      atBottom.current = next;
+      setIsAtBottom(next);
+    };
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  const update = t1;
+  let t2;
+  if ($[4] !== reduceMotion) {
+    t2 = () => {
+      autoScrolling.current = true;
+      update(true);
+      scrollRef.current?.scrollToEnd({
+        animated: !reduceMotion
+      });
+    };
+    $[4] = reduceMotion;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  let t4;
+  let t5;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (event, bottomInset, inverted) => {
+      const bottom = isScrolledToBottom(event, bottomInset, inverted);
+      if (bottom) {
+        autoScrolling.current = false;
+      } else {
+        if (autoScrolling.current) {
+          return;
+        }
+      }
+      update(bottom);
+    };
+    t4 = () => {
+      autoScrolling.current = false;
+    };
+    t5 = () => {
+      if (atBottom.current) {
+        scrollRef.current?.scrollToEnd({
+          animated: false
+        });
+      }
+    };
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== dockHeight || $[10] !== isAtBottom || $[11] !== t2) {
+    t6 = {
+      isAtBottom,
+      scrollRef,
+      scrollToBottom: t2,
+      onScroll: t3,
+      onUserScroll: t4,
+      followContent: t5,
+      dockHeight,
+      setDockHeight
+    };
+    $[9] = dockHeight;
+    $[10] = isAtBottom;
+    $[11] = t2;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const value = t6;
+  let t7;
+  if ($[13] !== className) {
+    t7 = cn("relative flex-1", className);
+    $[13] = className;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== props || $[16] !== t7) {
+    t8 = <View className={t7} {...props} />;
+    $[15] = props;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== t8 || $[19] !== value) {
+    t9 = <ConversationContext.Provider value={value}>{t8}</ConversationContext.Provider>;
+    $[18] = t8;
+    $[19] = value;
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  return t9;
+}
+
+/** The scroll handlers a thread's scroller passes on, as `ScrollView` and `FlatList` both take them. */
+
+/**
+ * Taps reach rows while the keyboard is up; a drag lowers it (interactively
+ * on iOS, and on Android 11+ with `KeyboardControllerProvider`, in
+ * `ConversationList`); scroll events at 60 Hz.
+ */
+const SCROLL_DEFAULTS = {
+  keyboardShouldPersistTaps: "handled",
+  keyboardDismissMode: Platform.OS === "ios" ? "interactive" : "on-drag",
+  scrollEventThrottle: 16
+};
+
+/**
+ * The wiring `ConversationContent` and `ConversationList` share: the ref the
+ * scroll button and the follow use, taps that reach rows while the keyboard is
+ * up, and the handlers that track the bottom and follow new content. The
+ * defaults come first so `props` can override them; the handlers come last
+ * and call the app's own after the thread's. An inverted list needs no
+ * follow: its newest message is at offset 0, so it stays in view as the
+ * content and the view change. While `paused` is true the bottom is not
+ * tracked: something other than the reader scrolls the list.
+ */
+function useConversationScroll({
+  onScroll,
+  onScrollBeginDrag,
+  onContentSizeChange,
+  onLayout,
+  ...props
+}, {
+  bottomInset,
+  inverted = false,
+  paused
+} = {}) {
+  const conversation = useConversation();
+  return {
+    ref: scroller => {
+      conversation.scrollRef.current = scroller;
+    },
+    ...SCROLL_DEFAULTS,
+    ...props,
+    onScroll: event => {
+      if (!paused?.()) conversation.onScroll(event.nativeEvent, bottomInset?.(), inverted);
+      onScroll?.(event);
+    },
+    onScrollBeginDrag: event_0 => {
+      conversation.onUserScroll();
+      onScrollBeginDrag?.(event_0);
+    },
+    // The app's handler first, so a scroller that measures itself (`ConversationList`) has the new size to follow.
+    onContentSizeChange: (width, height) => {
+      onContentSizeChange?.(width, height);
+      if (!inverted) conversation.followContent();
+    },
+    // The keyboard or composer resizing the view keeps the end in view too.
+    onLayout: event_1 => {
+      onLayout?.(event_1);
+      if (!inverted) conversation.followContent();
+    }
+  };
+}
+/**
+ * The scrolling message column: the web `flex flex-col gap-4 px-3 py-3`. A
+ * `ScrollView`, which draws every message; a thread that can grow long
+ * should use `ConversationList`.
+ */
+export function ConversationContent(t0) {
+  const $ = _c(12);
+  let className;
+  let contentContainerClassName;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      contentContainerClassName,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = contentContainerClassName;
+    $[3] = props;
+  } else {
+    className = $[1];
+    contentContainerClassName = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("flex-1", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== contentContainerClassName) {
+    t2 = cn("gap-4 px-3 py-3", contentContainerClassName);
+    $[6] = contentContainerClassName;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const t3 = useConversationScroll(props);
+  let t4;
+  if ($[8] !== t1 || $[9] !== t2 || $[10] !== t3) {
+    t4 = <ScrollView className={t1} contentContainerClassName={t2} {...t3} />;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}
+/**
+ * `ConversationContent` as a virtualised `FlatList`, for a thread that can
+ * grow long: only the messages near the view are drawn. The same sticking to
+ * the bottom, scroll button and keyboard behaviour. The column has the
+ * `px-3 py-3` padding but no gap, as a `FlatList` gap would also space its
+ * hidden-row placeholders: give `ItemSeparatorComponent` for the space
+ * between messages, and a stable `keyExtractor`.
+ *
+ * With `inverted` (give `data` newest first) the newest message is the first
+ * row, drawn at the bottom, so a thread opens at its end in its first frame,
+ * with no scroll and no measuring. A streamed reply (row 0) grows upwards and
+ * stays in view. Scrolled up, new content keeps what the reader sees in place
+ * (`maintainVisibleContentPosition`, iOS and Android). A thread shorter than
+ * the view starts at its top, as without `inverted`. `ListHeaderComponent`
+ * draws at the bottom, under the newest message, and `ListFooterComponent` at
+ * the top. An empty list draws `ListEmptyComponent` in place of the list, the
+ * right way up. On Android React Native flips an inverted list on both axes,
+ * so the column's left and right padding swap: keep it even, and put uneven
+ * side padding in the rows.
+ *
+ * Without `inverted`, it scrolls to the end it has measured, not with
+ * `FlatList.scrollToEnd`, which places the end from estimated row heights. A
+ * FlatList draws from its start, so a thread opened with messages would show
+ * its first rows and then jump to the end: it stays hidden until its first
+ * jump to the end (the next frame, once both sizes are known). Rows that are
+ * drawn or measured later can still move it once it shows; prefer `inverted`.
+ *
+ * With `KeyboardControllerProvider` the list keeps its size as the keyboard
+ * opens: its content gains the keyboard's height at the end and rises with
+ * the keyboard frame by frame, so the newest message stays on the composer.
+ * A drag down on it moves the keyboard with the finger once the finger
+ * reaches the composer, and lets it go at the finger's speed (iOS, Android
+ * 11+; Android 10 and below lower it at once, as without the provider).
+ */
+export function ConversationList({
+  className,
+  contentContainerClassName,
+  onContentSizeChange,
+  onLayout,
+  ...props
+}) {
+  const conversation = useConversation();
+  const keyboard = useKeyboardParts();
+  const insets = useSafeAreaInsets();
+  const inverted = props.inverted === true;
+  // Sizes from the list's own events, for the scroll offset; no render reads
+  // them. `inset` is the keyboard's space past the content (before offset 0
+  // when inverted); `keyboardMoving` is true while the keyboard scrolls the
+  // list, which is not the reader leaving the bottom.
+  const size = useRef({
+    content: 0,
+    view: 0,
+    inset: 0,
+    keyboardMoving: false
+  });
+  // Not inverted: hidden until the first jump to the end (see above). An
+  // empty list (a spinner, an empty state) shows at once.
+  const hasRows = (props.data?.length ?? 0) > 0;
+  const [placed, setPlaced] = useState(false);
+  const placeOnce = () => {
+    if (!inverted && !placed && hasRows && size.current.content > 0 && size.current.view > 0) {
+      requestAnimationFrame(() => setPlaced(true));
+    }
+  };
+  const wired = useConversationScroll({
+    ...props,
+    onContentSizeChange: (width, height) => {
+      size.current.content = height;
+      onContentSizeChange?.(width, height);
+      placeOnce();
+    },
+    onLayout: event => {
+      size.current.view = event.nativeEvent.layout.height;
+      onLayout?.(event);
+      placeOnce();
+    }
+  }, {
+    bottomInset: () => size.current.inset,
+    inverted,
+    paused: () => size.current.keyboardMoving
+  });
+  // An inverted list would draw its empty state at the bottom, flipped back
+  // only if the element takes a `style`: draw it the right way up instead.
+  if (inverted && !hasRows) {
+    const Empty = props.ListEmptyComponent;
+    return <View style={styles.fill}>{isValidElement(Empty) ? Empty : Empty ? <Empty /> : null}</View>;
+  }
+  // The newest message's offset: inverted, 0 less the space before it.
+  const end = () => inverted ? size.current.inset > 0 ? -size.current.inset : 0 : Math.max(0, size.current.content + size.current.inset - size.current.view);
+  const list_0 = <FlatList className={cn("flex-1", className)}
+  // Inverted, the column's end is the top: a short thread sits there.
+  contentContainerClassName={cn("px-3 py-3", inverted && "grow justify-end", contentContainerClassName)} {...wired} style={[wired.style, !inverted && hasRows && !placed ? styles.hidden : null]}
+  // At the bottom, a new message shows at offset 0; scrolled up, it must not move what the reader sees.
+  maintainVisibleContentPosition={props.maintainVisibleContentPosition ?? (inverted && !conversation.isAtBottom ? KEEP_VISIBLE : undefined)} keyboardDismissMode={props.keyboardDismissMode ?? (keyboard?.interactive ? "interactive" : SCROLL_DEFAULTS.keyboardDismissMode)} renderScrollComponent={keyboard ? scrollProps => <keyboard.ChatScrollView {...scrollProps} inverted={inverted}
+  // The composer pads the bottom inset, which the keyboard covers: the content rises by the rest.
+  bottomOffset={insets.bottom} onInsetChange={inset => {
+    size.current.inset = inset;
+  }} onKeyboardMove={moving => {
+    size.current.keyboardMoving = moving;
+  }} /> : props.renderScrollComponent} ref={list => {
+    conversation.scrollRef.current = list && {
+      scrollToEnd: options => list.scrollToOffset({
+        offset: end(),
+        animated: options?.animated
+      })
+    };
+  }} />;
+  if (!keyboard) return list_0;
+  // The keyboard follows the finger from the composer's top: the dock less the inset it pads.
+  return <keyboard.GestureArea offset={Math.max(0, conversation.dockHeight - insets.bottom)} style={styles.fill}>
+      {list_0}
+    </keyboard.GestureArea>;
+}
+
+/** Scrolled up in an inverted list: the first drawn row in view keeps its place as rows are added or grow. */
+const KEEP_VISIBLE = {
+  minIndexForVisible: 0
+};
+/** Centred placeholder for a thread with no messages: the web title (medium) and muted description. */
+export function ConversationEmptyState(t0) {
+  const $ = _c(26);
+  let Icon;
+  let children;
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      title: t1,
+      description: t2,
+      icon: Icon,
+      className,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = Icon;
+    $[2] = children;
+    $[3] = className;
+    $[4] = props;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    Icon = $[1];
+    children = $[2];
+    className = $[3];
+    props = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const title = t1 === undefined ? "No messages yet" : t1;
+  const description = t2 === undefined ? "Start a conversation to see messages here" : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let t3;
+  let t4;
+  let t5;
+  if ($[7] !== Icon || $[8] !== children || $[9] !== className || $[10] !== description || $[11] !== largerText || $[12] !== props || $[13] !== scheme || $[14] !== title) {
+    const size = chatTextSize("small", largerText);
+    T0 = View;
+    if ($[19] !== className) {
+      t3 = cn("flex-1 items-center justify-center gap-3 p-8", className);
+      $[19] = className;
+      $[20] = t3;
+    } else {
+      t3 = $[20];
+    }
+    t4 = props;
+    t5 = children ?? <>{Icon ? <Icon size={largerText ? 28 : 24} color={tokens.color.muted[scheme]} /> : null}<View className="items-center gap-1"><Text accessibilityRole="header" className={cn(size, "text-center font-instrument-sans-medium")} style={[sizeStyle(size), textStyle("foreground", scheme), typeStyle("medium")]}>{title}</Text>{description ? <Text className={cn(size, "text-center font-instrument-sans")} style={[sizeStyle(size), textStyle("muted", scheme)]}>{description}</Text> : null}</View></>;
+    $[7] = Icon;
+    $[8] = children;
+    $[9] = className;
+    $[10] = description;
+    $[11] = largerText;
+    $[12] = props;
+    $[13] = scheme;
+    $[14] = title;
+    $[15] = T0;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    T0 = $[15];
+    t3 = $[16];
+    t4 = $[17];
+    t5 = $[18];
+  }
+  let t6;
+  if ($[21] !== T0 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5) {
+    t6 = <T0 className={t3} {...t4}>{t5}</T0>;
+    $[21] = T0;
+    $[22] = t3;
+    $[23] = t4;
+    $[24] = t5;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  return t6;
+}
+/**
+ * The group under the thread, inside `Conversation` after the list: the
+ * composer, or a docked question card in its place. `ConversationScrollButton`
+ * sits centred 16 above its top edge (the web button's `bottom-4` over the
+ * dock), so the button stays with the dock as it grows (a reply quote, a
+ * taller field) and as the keyboard lifts it, instead of a fixed height over
+ * the messages.
+ *
+ * With `KeyboardControllerProvider` the dock moves with the keyboard frame by
+ * frame (`translateY`, no layout), less the bottom inset: its content pads
+ * that inset, as `PromptInput` does, and the keyboard covers it. A
+ * `PromptInput` in it then adds no lift of its own.
+ */
+export function ConversationDock(t0) {
+  const $ = _c(15);
+  let onLayout;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      onLayout,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onLayout;
+    $[2] = props;
+  } else {
+    onLayout = $[1];
+    props = $[2];
+  }
+  const {
+    setDockHeight
+  } = useConversation();
+  const keyboard = useKeyboardParts();
+  const insets = useSafeAreaInsets();
+  let t1;
+  if ($[3] !== onLayout || $[4] !== setDockHeight) {
+    t1 = event => {
+      setDockHeight(event.nativeEvent.layout.height);
+      onLayout?.(event);
+    };
+    $[3] = onLayout;
+    $[4] = setDockHeight;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== props || $[7] !== t1) {
+    t2 = <View {...props} onLayout={t1} />;
+    $[6] = props;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const dock = t2;
+  if (!keyboard) {
+    return dock;
+  }
+  let t3;
+  if ($[9] !== dock) {
+    t3 = <KeyboardLiftContext.Provider value={true}>{dock}</KeyboardLiftContext.Provider>;
+    $[9] = dock;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== insets.bottom || $[12] !== keyboard.StickyView || $[13] !== t3) {
+    t4 = <keyboard.StickyView bottomOffset={insets.bottom}>{t3}</keyboard.StickyView>;
+    $[11] = insets.bottom;
+    $[12] = keyboard.StickyView;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
+}
+/** The scroll button fades in and out on the strong ease-out. */
+const SCROLL_BUTTON_ENTER = FadeIn.duration(150).easing(EASE_OUT);
+const SCROLL_BUTTON_EXIT = FadeOut.duration(120).easing(EASE_OUT);
+
+/** The labelled pill's height (web `h-7`). */
+const SCROLL_PILL_HEIGHT = 28;
+
+/**
+ * Round outline arrow, centred 16 above the bottom of the `Conversation`, or
+ * above its `ConversationDock` when it has one, shown while the reader is
+ * away from the end (the web `absolute bottom-4`).
+ * The web `Button` `icon` size (40, slop to 48). It has an opaque surface
+ * fill and no shadow, so it reads over the messages under it. With
+ * `showLabel`, a compact pill with the icon and `label`.
+ */
+export function ConversationScrollButton(t0) {
+  const $ = _c(22);
+  const {
+    label: t1,
+    icon: t2,
+    showLabel: t3,
+    insets,
+    testID
+  } = t0;
+  const label = t1 === undefined ? "Scroll to bottom" : t1;
+  const Icon = t2 === undefined ? IconArrowDown : t2;
+  const showLabel = t3 === undefined ? false : t3;
+  const {
+    isAtBottom,
+    scrollToBottom,
+    dockHeight
+  } = useConversation();
+  const keyboard = useKeyboardParts();
+  const safeArea = useSafeAreaInsets();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (isAtBottom) {
+    return null;
+  }
+  let t4;
+  if ($[0] !== largerText) {
+    t4 = chatTextSize("small", largerText);
+    $[0] = largerText;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const labelSize = t4;
+  const t5 = insets?.left ?? 0;
+  const t6 = insets?.right ?? 0;
+  const t7 = dockHeight + 16;
+  let t8;
+  if ($[2] !== t5 || $[3] !== t6 || $[4] !== t7) {
+    t8 = {
+      position: "absolute",
+      left: t5,
+      right: t6,
+      bottom: t7,
+      alignItems: "center"
+    };
+    $[2] = t5;
+    $[3] = t6;
+    $[4] = t7;
+    $[5] = t8;
+  } else {
+    t8 = $[5];
+  }
+  let t9;
+  if ($[6] !== Icon || $[7] !== label || $[8] !== labelSize || $[9] !== largerText || $[10] !== scheme || $[11] !== scrollToBottom || $[12] !== showLabel || $[13] !== testID) {
+    t9 = showLabel ? <Pressable accessibilityRole="button" accessibilityLabel={label} onPress={scrollToBottom} testID={testID} hitSlop={touchSlop(MIN_TOUCH_TARGET, SCROLL_PILL_HEIGHT)} style={{
+      minHeight: SCROLL_PILL_HEIGHT,
+      flexDirection: "row",
+      alignItems: "center",
+      paddingHorizontal: 12,
+      borderRadius: tokens.radius.pill,
+      borderWidth: 1,
+      borderColor: withAlpha(tokens.color.border[scheme], 0.6),
+      backgroundColor: tokens.color.surface[scheme]
+    }}>{t10 => {
+        const {
+          pressed
+        } = t10;
+        return <View style={{
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 6,
+          opacity: pressed ? 0.7 : 1
+        }}><Icon size={largerText ? 20 : 16} color={tokens.color.muted[scheme]} /><Text className={cn(labelSize, "font-instrument-sans")} style={[sizeStyle(labelSize), textStyle("muted", scheme)]}>{label}</Text></View>;
+      }}</Pressable> : <Button variant="outline" size="icon" accessibilityLabel={label} onPress={scrollToBottom} testID={testID} style={{
+      borderRadius: tokens.radius.pill,
+      backgroundColor: tokens.color.surface[scheme]
+    }}><Icon size={largerText ? 20 : 16} color={tokens.color.foreground[scheme]} /></Button>;
+    $[6] = Icon;
+    $[7] = label;
+    $[8] = labelSize;
+    $[9] = largerText;
+    $[10] = scheme;
+    $[11] = scrollToBottom;
+    $[12] = showLabel;
+    $[13] = testID;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  let t10;
+  if ($[15] !== t8 || $[16] !== t9) {
+    t10 = <NativeOnlyAnimatedView entering={SCROLL_BUTTON_ENTER} exiting={SCROLL_BUTTON_EXIT} pointerEvents="box-none" style={t8}>{t9}</NativeOnlyAnimatedView>;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = t10;
+  } else {
+    t10 = $[17];
+  }
+  const button = t10;
+  if (!keyboard) {
+    return button;
+  }
+  let t11;
+  if ($[18] !== button || $[19] !== keyboard.StickyView || $[20] !== safeArea.bottom) {
+    t11 = <keyboard.StickyView bottomOffset={safeArea.bottom} pointerEvents="box-none" style={StyleSheet.absoluteFill}>{button}</keyboard.StickyView>;
+    $[18] = button;
+    $[19] = keyboard.StickyView;
+    $[20] = safeArea.bottom;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  return t11;
+}
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1
+  },
+  hidden: {
+    opacity: 0
+  }
+});