@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/prompt-input.jsx

@@ -0,0 +1,626 @@
+import { c as _c } from "react/compiler-runtime";
+import { useContext, useState } from "react";
+import { Platform, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconArrowUp, IconChevronDown, IconPlayerStopFilled } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, fieldStyle, fieldTextStyle, sizeStyle, touchSlop, typeStyle } from "../controlStyles";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { Input as FieldInput } from "../primitives/input";
+import { COMPOSER_INPUT_ID, KeyboardAvoidingView, KeyboardLiftContext } from "../primitives/keyboard-parts";
+import { usePressFeedback } from "../motion";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { ChatIconButton } from "./icon-button";
+
+/** The `ai` SDK chat status the web `PromptInputSubmit` takes. */
+
+/** Whether the AI is answering: `submitted` (waiting) or `streaming`. */
+export function isGenerating(status) {
+  return status === "submitted" || status === "streaming";
+}
+// The web `PromptInputSubmit` and `PromptInputButton` keep `shape="rounded"`
+// (`rounded-lg`, 16) as field addons. At the 32 `icon-sm` size 16 is half the
+// side, so the web draws a circle. These stay pills: the same circle at 32, and
+// still a circle at 44 with larger text, where 16 would draw a rounded square.
+
+/**
+ * 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, faded by
+ * the disabled `Button` with nothing to send, as the web send button. While
+ * `status` is `submitted` or `streaming` it is a filled square labelled
+ * "Stop" that calls `onStop` (disabled without one).
+ */
+export function PromptInputSubmit(t0) {
+  const $ = _c(10);
+  const {
+    status,
+    onSubmit,
+    onStop,
+    canSubmit: t1,
+    size,
+    testID
+  } = t0;
+  const canSubmit = t1 === undefined ? true : t1;
+  if (isGenerating(status)) {
+    const t2 = !onStop;
+    let t3;
+    if ($[0] !== onStop || $[1] !== size || $[2] !== t2 || $[3] !== testID) {
+      t3 = <ChatIconButton icon={IconPlayerStopFilled} label="Stop" variant="primary" size={size} onPress={onStop} disabled={t2} testID={testID} />;
+      $[0] = onStop;
+      $[1] = size;
+      $[2] = t2;
+      $[3] = testID;
+      $[4] = t3;
+    } else {
+      t3 = $[4];
+    }
+    return t3;
+  }
+  const t2 = !canSubmit;
+  let t3;
+  if ($[5] !== onSubmit || $[6] !== size || $[7] !== t2 || $[8] !== testID) {
+    t3 = <ChatIconButton icon={IconArrowUp} label="Send" variant="primary" size={size} onPress={onSubmit} disabled={t2} testID={testID} />;
+    $[5] = onSubmit;
+    $[6] = size;
+    $[7] = t2;
+    $[8] = testID;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+/** A ghost tool button for the composer `toolbar`, such as attach (web `PromptInputButton`). Give it `icon` and `label`. */
+export function PromptInputButton(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <ChatIconButton variant="ghost" {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/**
+ * The web `ModelPicker` trigger (`model-picker.tsx` `TRIGGER_CLASS`), the
+ * chip a composer footer holds: `h-7 gap-1.5 rounded-md px-2`, a 14 icon, the
+ * suffix at `/70` after " · ", and a 12 chevron at `opacity-60`. The label is
+ * `text-sm` (14), the phone floor for tappable text (the web is `text-xs`).
+ */
+export const PROMPT_INPUT_CHIP = {
+  height: 28,
+  paddingX: 8,
+  gap: 6,
+  radius: tokens.radius.md,
+  iconSize: 14,
+  chevronSize: 12,
+  chevronOpacity: 0.6,
+  suffixOpacity: 0.7,
+  /** The narrowest label worth drawing: about two characters and the ellipsis at `text-sm` (2em). */
+  labelMinWidth: 28,
+  /** `size="touch"`: 36 on screen, 4 slop above and below, so a 44 bar holds its whole target. */
+  touchHeight: 36
+};
+/**
+ * A chip for the composer `footer`, the web `ModelPicker` trigger: 28 high on
+ * screen (36 with `size="touch"`), slop to 44 above and below. The label shrinks and truncates, so a
+ * long model name gives up width to the chips beside it, as the web
+ * `max-sm:truncate`; the icon and chevron keep their size. Below
+ * `labelMinWidth` (scaled by the system font size) the label hides, so a
+ * squeezed chip is its icon and chevron, as the web at 390, not a sliver of a
+ * letter. Disabled dims to 50%, as the web `disabled:opacity-50`.
+ */
+export function PromptInputChip(t0) {
+  const $ = _c(60);
+  const {
+    icon,
+    label,
+    suffix,
+    count,
+    chevron: t1,
+    weight: t2,
+    color,
+    accessibilityLabel,
+    expanded,
+    disabled: t3,
+    size: t4,
+    onPress,
+    testID
+  } = t0;
+  const chevron = t1 === undefined ? true : t1;
+  const weight = t2 === undefined ? "medium" : t2;
+  const disabled = t3 === undefined ? false : t3;
+  const size = t4 === undefined ? "sm" : t4;
+  const height = size === "touch" ? PROMPT_INPUT_CHIP.touchHeight : PROMPT_INPUT_CHIP.height;
+  const scheme = useScheme();
+  const pressed = usePressFeedback();
+  const {
+    fontScale
+  } = useWindowDimensions();
+  const [readable, setReadable] = useState(true);
+  const tint = color ?? tokens.color.muted[scheme];
+  let t5;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = sizeStyle("text-sm");
+    $[0] = t5;
+  } else {
+    t5 = $[0];
+  }
+  let t6;
+  if ($[1] !== tint) {
+    t6 = [t5, {
+      color: tint
+    }];
+    $[1] = tint;
+    $[2] = t6;
+  } else {
+    t6 = $[2];
+  }
+  const text = t6;
+  let t7;
+  if ($[3] !== accessibilityLabel || $[4] !== count || $[5] !== label || $[6] !== suffix) {
+    t7 = accessibilityLabel ?? [label, suffix, count].filter(_temp).join(", ");
+    $[3] = accessibilityLabel;
+    $[4] = count;
+    $[5] = label;
+    $[6] = suffix;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const name = t7;
+  let t8;
+  if ($[8] !== disabled || $[9] !== expanded) {
+    t8 = {
+      disabled,
+      expanded
+    };
+    $[8] = disabled;
+    $[9] = expanded;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== height) {
+    t9 = touchSlop(MIN_TOUCH_TARGET, height);
+    $[11] = height;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  const t10 = disabled && "opacity-50";
+  let t11;
+  if ($[13] !== pressed || $[14] !== t10) {
+    t11 = cn("min-w-0 shrink flex-row items-center", pressed, t10);
+    $[13] = pressed;
+    $[14] = t10;
+    $[15] = t11;
+  } else {
+    t11 = $[15];
+  }
+  let t12;
+  if ($[16] !== height) {
+    t12 = {
+      minHeight: height,
+      paddingHorizontal: PROMPT_INPUT_CHIP.paddingX,
+      gap: PROMPT_INPUT_CHIP.gap,
+      borderRadius: PROMPT_INPUT_CHIP.radius
+    };
+    $[16] = height;
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] !== icon) {
+    t13 = icon ? <View className="shrink-0">{icon}</View> : null;
+    $[18] = icon;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  let t14;
+  if ($[20] !== fontScale) {
+    t14 = event => setReadable(event.nativeEvent.layout.width >= PROMPT_INPUT_CHIP.labelMinWidth * Math.max(1, fontScale));
+    $[20] = fontScale;
+    $[21] = t14;
+  } else {
+    t14 = $[21];
+  }
+  const t15 = weight === "medium" ? "font-instrument-sans-medium" : "font-instrument-sans";
+  let t16;
+  if ($[22] !== t15) {
+    t16 = cn("min-w-0 shrink text-sm", t15);
+    $[22] = t15;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+  let t17;
+  if ($[24] !== weight) {
+    t17 = weight === "medium" ? typeStyle("medium") : null;
+    $[24] = weight;
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] !== readable) {
+    t18 = readable ? null : {
+      opacity: 0
+    };
+    $[26] = readable;
+    $[27] = t18;
+  } else {
+    t18 = $[27];
+  }
+  let t19;
+  if ($[28] !== t17 || $[29] !== t18 || $[30] !== text) {
+    t19 = [...text, t17, t18];
+    $[28] = t17;
+    $[29] = t18;
+    $[30] = text;
+    $[31] = t19;
+  } else {
+    t19 = $[31];
+  }
+  let t20;
+  if ($[32] !== suffix || $[33] !== tint) {
+    t20 = suffix ? <Text style={{
+      color: withAlpha(tint, PROMPT_INPUT_CHIP.suffixOpacity)
+    }}>{` · ${suffix}`}</Text> : null;
+    $[32] = suffix;
+    $[33] = tint;
+    $[34] = t20;
+  } else {
+    t20 = $[34];
+  }
+  let t21;
+  if ($[35] !== label || $[36] !== t14 || $[37] !== t16 || $[38] !== t19 || $[39] !== t20) {
+    t21 = <Text numberOfLines={1} onLayout={t14} className={t16} style={t19}>{label}{t20}</Text>;
+    $[35] = label;
+    $[36] = t14;
+    $[37] = t16;
+    $[38] = t19;
+    $[39] = t20;
+    $[40] = t21;
+  } else {
+    t21 = $[40];
+  }
+  let t22;
+  if ($[41] !== count || $[42] !== text) {
+    t22 = count !== undefined ? <Text className="font-instrument-sans-medium text-sm" style={[...text, typeStyle("medium"), {
+      fontVariant: ["tabular-nums"]
+    }]}>{count}</Text> : null;
+    $[41] = count;
+    $[42] = text;
+    $[43] = t22;
+  } else {
+    t22 = $[43];
+  }
+  let t23;
+  if ($[44] !== chevron || $[45] !== tint) {
+    t23 = chevron ? <View style={{
+      opacity: PROMPT_INPUT_CHIP.chevronOpacity
+    }}><IconChevronDown size={PROMPT_INPUT_CHIP.chevronSize} color={tint} /></View> : null;
+    $[44] = chevron;
+    $[45] = tint;
+    $[46] = t23;
+  } else {
+    t23 = $[46];
+  }
+  let t24;
+  if ($[47] !== disabled || $[48] !== name || $[49] !== onPress || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t21 || $[54] !== t22 || $[55] !== t23 || $[56] !== t8 || $[57] !== t9 || $[58] !== testID) {
+    t24 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={name} accessibilityState={t8} disabled={disabled} onPress={onPress} hitSlop={t9} className={t11} style={t12}>{t13}{t21}{t22}{t23}</Pressable>;
+    $[47] = disabled;
+    $[48] = name;
+    $[49] = onPress;
+    $[50] = t11;
+    $[51] = t12;
+    $[52] = t13;
+    $[53] = t21;
+    $[54] = t22;
+    $[55] = t23;
+    $[56] = t8;
+    $[57] = t9;
+    $[58] = testID;
+    $[59] = t24;
+  } else {
+    t24 = $[59];
+  }
+  return t24;
+}
+function _temp(part) {
+  return part !== undefined;
+}
+/** The web `Composer` inline radius, `rounded-[1.25rem]`. */
+const INLINE_RADIUS = 20;
+
+/**
+ * Eva's `pill` composer: 48 high on one line (border 1, then 5 around a 36
+ * field: the web `h-12 py-1` centres the 36 field and send button in 38),
+ * `pl-1.5` / `pr-1.5`, and radius 24 (`rounded-full` at 48). Its placeholder
+ * is the muted colour at 90% (`data-empty:before:text-muted-foreground/90`).
+ */
+const PILL = {
+  radius: 24,
+  paddingY: 5,
+  paddingX: 6,
+  lineHeight: 36,
+  placeholderAlpha: 0.9
+};
+
+/** The field grows to this height, then scrolls: about 6 lines of 24 (with `py-2.5`), and about 8 of `text-xl` with larger text. */
+const MAX_FIELD_HEIGHT = {
+  regular: 160,
+  larger: 240
+};
+
+/**
+ * React Native Web draws a multiline field as a `textarea` with the HTML
+ * default of 2 rows, and the auto-grow keeps that height. One row there; on
+ * native, `numberOfLines` would lock the line count on Android, so none.
+ */
+const ONE_ROW = Platform.OS === "web" ? 1 : undefined;
+
+/**
+ * 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; frame by frame with `KeyboardControllerProvider`) and
+ * pads the safe-area insets, so put it last in a full-height column, under the
+ * `Conversation`. Inside a part that lifts it already (`ConversationDock`
+ * with `KeyboardControllerProvider`, `ChatThread`) it adds no lift of its own.
+ */
+export function PromptInput(t0) {
+  const $ = _c(65);
+  const {
+    value,
+    defaultValue: t1,
+    onChangeText,
+    onSubmit,
+    status,
+    onStop,
+    placeholder: t2,
+    accessibilityLabel: t3,
+    replyTo,
+    header,
+    toolbar,
+    footer,
+    menu,
+    layout: t4,
+    shape: t5,
+    leading,
+    disabled: t6,
+    safeBottom: t7,
+    keyboardVerticalOffset: t8,
+    className,
+    testID
+  } = t0;
+  const defaultValue = t1 === undefined ? "" : t1;
+  const placeholder = t2 === undefined ? "What would you like to know?" : t2;
+  const accessibilityLabel = t3 === undefined ? "Message" : t3;
+  const layout = t4 === undefined ? "stacked" : t4;
+  const shape = t5 === undefined ? "rounded" : t5;
+  const disabled = t6 === undefined ? false : t6;
+  const safeBottom = t7 === undefined ? true : t7;
+  const keyboardVerticalOffset = t8 === undefined ? 0 : t8;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const lifted = useContext(KeyboardLiftContext);
+  let t9;
+  if ($[0] !== defaultValue || $[1] !== onChangeText || $[2] !== value) {
+    t9 = {
+      value,
+      defaultValue,
+      onChange: onChangeText
+    };
+    $[0] = defaultValue;
+    $[1] = onChangeText;
+    $[2] = value;
+    $[3] = t9;
+  } else {
+    t9 = $[3];
+  }
+  const [text, setText] = useControllableState(t9);
+  let t10;
+  if ($[4] !== text) {
+    t10 = text.trim();
+    $[4] = text;
+    $[5] = t10;
+  } else {
+    t10 = $[5];
+  }
+  const message = t10;
+  let t11;
+  if ($[6] !== disabled || $[7] !== message.length || $[8] !== status) {
+    t11 = message.length > 0 && !disabled && !isGenerating(status);
+    $[6] = disabled;
+    $[7] = message.length;
+    $[8] = status;
+    $[9] = t11;
+  } else {
+    t11 = $[9];
+  }
+  const canSubmit = t11;
+  const bottom = safeBottom ? insets.bottom : 0;
+  const [contentHeight, setContentHeight] = useState(0);
+  const maxHeight = largerText ? MAX_FIELD_HEIGHT.larger : MAX_FIELD_HEIGHT.regular;
+  let t12;
+  if ($[10] !== contentHeight || $[11] !== maxHeight) {
+    t12 = contentHeight > 0 ? {
+      height: Math.min(contentHeight, maxHeight)
+    } : null;
+    $[10] = contentHeight;
+    $[11] = maxHeight;
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
+  const growStyle = t12;
+  const scrollEnabled = contentHeight > maxHeight;
+  const pill = layout === "inline" && shape === "pill";
+  let t13;
+  if ($[13] !== largerText || $[14] !== layout || $[15] !== pill) {
+    t13 = largerText ? sizeStyle("text-xl") : layout === "inline" ? {
+      fontSize: 14,
+      lineHeight: pill ? 20 : 24
+    } : sizeStyle("text-base");
+    $[13] = largerText;
+    $[14] = layout;
+    $[15] = pill;
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  const fieldText = t13;
+  let t14;
+  if ($[17] !== setText) {
+    t14 = next => {
+      setText(next);
+      if (next === "") {
+        setContentHeight(0);
+      }
+    };
+    $[17] = setText;
+    $[18] = t14;
+  } else {
+    t14 = $[18];
+  }
+  const changeText = t14;
+  let t15;
+  if ($[19] !== canSubmit || $[20] !== message || $[21] !== onSubmit || $[22] !== setText) {
+    t15 = () => {
+      if (!canSubmit) {
+        return;
+      }
+      onSubmit(message);
+      setText("");
+      setContentHeight(0);
+    };
+    $[19] = canSubmit;
+    $[20] = message;
+    $[21] = onSubmit;
+    $[22] = setText;
+    $[23] = t15;
+  } else {
+    t15 = $[23];
+  }
+  const submit = t15;
+  let t16;
+  if ($[24] !== className) {
+    t16 = cn("pt-2", className);
+    $[24] = className;
+    $[25] = t16;
+  } else {
+    t16 = $[25];
+  }
+  const t17 = bottom + 8;
+  const t18 = insets.left + 12;
+  const t19 = insets.right + 12;
+  let t20;
+  if ($[26] !== t17 || $[27] !== t18 || $[28] !== t19) {
+    t20 = {
+      paddingBottom: t17,
+      paddingLeft: t18,
+      paddingRight: t19
+    };
+    $[26] = t17;
+    $[27] = t18;
+    $[28] = t19;
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  let t21;
+  if ($[30] !== menu) {
+    t21 = menu ? <View className="mb-1.5">{menu}</View> : null;
+    $[30] = menu;
+    $[31] = t21;
+  } else {
+    t21 = $[31];
+  }
+  let t22;
+  if ($[32] !== accessibilityLabel || $[33] !== canSubmit || $[34] !== changeText || $[35] !== disabled || $[36] !== fieldText || $[37] !== growStyle || $[38] !== header || $[39] !== largerText || $[40] !== layout || $[41] !== leading || $[42] !== maxHeight || $[43] !== onStop || $[44] !== pill || $[45] !== placeholder || $[46] !== replyTo || $[47] !== scheme || $[48] !== scrollEnabled || $[49] !== status || $[50] !== submit || $[51] !== testID || $[52] !== text || $[53] !== toolbar) {
+    t22 = layout === "inline" ? <View className="border" style={[fieldStyle(scheme), {
+      borderRadius: pill ? PILL.radius : INLINE_RADIUS
+    }]}>{replyTo ? <View className="px-1.5 pt-1.5">{replyTo}</View> : null}{header ? <View className="flex-row flex-wrap gap-1 px-1.5 pt-1.5">{header}</View> : null}<View className={cn("flex-row items-end gap-1", !pill && "p-1.5")} style={pill ? {
+        paddingVertical: PILL.paddingY,
+        paddingHorizontal: PILL.paddingX
+      } : null}>{leading ? <View className="shrink-0 flex-row items-center gap-1" style={pill ? {
+          minHeight: PILL.lineHeight
+        } : null}>{leading}</View> : null}<FieldInput testID={testID ? `${testID}-input` : undefined} nativeID={COMPOSER_INPUT_ID} multiline={true} numberOfLines={ONE_ROW} value={text} onChangeText={changeText} placeholder={placeholder} placeholderTextColor={pill ? withAlpha(tokens.color.muted[scheme], PILL.placeholderAlpha) : undefined} accessibilityLabel={accessibilityLabel} editable={!disabled} textAlignVertical="center" scrollEnabled={scrollEnabled} onContentSizeChange={e => setContentHeight(e.nativeEvent.contentSize.height)} className={cn("flex-1 border-0 text-sm font-instrument-sans", pill ? "min-h-9 px-1 py-2" : "min-h-8 px-2 py-1", largerText && "min-h-11 py-2 text-xl font-instrument-sans-medium")} style={[fieldTextStyle(scheme), fieldText, largerText ? typeStyle("medium") : null, {
+          backgroundColor: "transparent",
+          maxHeight,
+          ...growStyle
+        }]} /><View className="shrink-0 flex-row items-center gap-1" style={pill ? {
+          minHeight: PILL.lineHeight
+        } : null}>{toolbar}<PromptInputSubmit status={status} onSubmit={submit} onStop={onStop} canSubmit={canSubmit} size={pill ? "md" : undefined} /></View></View></View> : <View className="border" style={fieldStyle(scheme)}>{replyTo ? <View className="px-2 pt-2">{replyTo}</View> : null}{header ? <View className="flex-row flex-wrap gap-1 px-2 pt-2">{header}</View> : null}<FieldInput testID={testID ? `${testID}-input` : undefined} nativeID={COMPOSER_INPUT_ID} multiline={true} numberOfLines={ONE_ROW} value={text} onChangeText={changeText} placeholder={placeholder} accessibilityLabel={accessibilityLabel} editable={!disabled} textAlignVertical="top" scrollEnabled={scrollEnabled} onContentSizeChange={e_0 => setContentHeight(e_0.nativeEvent.contentSize.height)} 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), fieldText, largerText ? typeStyle("medium") : null, {
+        backgroundColor: "transparent",
+        maxHeight,
+        ...growStyle
+      }]} /><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>;
+    $[32] = accessibilityLabel;
+    $[33] = canSubmit;
+    $[34] = changeText;
+    $[35] = disabled;
+    $[36] = fieldText;
+    $[37] = growStyle;
+    $[38] = header;
+    $[39] = largerText;
+    $[40] = layout;
+    $[41] = leading;
+    $[42] = maxHeight;
+    $[43] = onStop;
+    $[44] = pill;
+    $[45] = placeholder;
+    $[46] = replyTo;
+    $[47] = scheme;
+    $[48] = scrollEnabled;
+    $[49] = status;
+    $[50] = submit;
+    $[51] = testID;
+    $[52] = text;
+    $[53] = toolbar;
+    $[54] = t22;
+  } else {
+    t22 = $[54];
+  }
+  let t23;
+  if ($[55] !== footer || $[56] !== t16 || $[57] !== t20 || $[58] !== t21 || $[59] !== t22 || $[60] !== testID) {
+    t23 = <View testID={testID} className={t16} style={t20}>{t21}{t22}{footer}</View>;
+    $[55] = footer;
+    $[56] = t16;
+    $[57] = t20;
+    $[58] = t21;
+    $[59] = t22;
+    $[60] = testID;
+    $[61] = t23;
+  } else {
+    t23 = $[61];
+  }
+  const composer = t23;
+  if (lifted) {
+    return composer;
+  }
+  const t24 = keyboardVerticalOffset - bottom;
+  let t25;
+  if ($[62] !== composer || $[63] !== t24) {
+    t25 = <KeyboardAvoidingView keyboardVerticalOffset={t24}>{composer}</KeyboardAvoidingView>;
+    $[62] = composer;
+    $[63] = t24;
+    $[64] = t25;
+  } else {
+    t25 = $[64];
+  }
+  return t25;
+}