@crafter/rn-ai-elements 0.0.1

package/lib/module/chatbot/ConversationScrollButton.js

@@ -0,0 +1,126 @@
+"use strict";
+
+import React from 'react';
+import { Platform, Pressable, StyleSheet } from 'react-native';
+import { ArrowDown } from 'lucide-react-native';
+import { GlassView } from 'expo-glass-effect';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+import { jsx as _jsx } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// 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'
+}) {
+  const theme = useAIElementsTheme();
+  if (!visible) return null;
+  return /*#__PURE__*/_jsx(GlassView, {
+    glassEffectStyle: isIOS ? 'regular' : 'none',
+    isInteractive: true,
+    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],
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      style: ({
+        pressed
+      }) => [styles.circleButtonInner, {
+        opacity: pressed ? 0.6 : 1
+      }],
+      children: /*#__PURE__*/_jsx(ArrowDown, {
+        size: ICON_SIZE,
+        color: theme.colors.foreground
+      })
+    })
+  });
+}
+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'
+  }
+});
+//# sourceMappingURL=ConversationScrollButton.js.map

package/lib/module/chatbot/ConversationScrollButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","Pressable","StyleSheet","ArrowDown","GlassView","useAIElementsTheme","jsx","_jsx","CIRCLE_BUTTON_SIZE","ICON_SIZE","isIOS","OS","ConversationScrollButton","visible","onPress","style","accessibilityLabel","theme","glassEffectStyle","isInteractive","colorScheme","dark","styles","circleButton","backgroundColor","colors","secondary","children","accessibilityRole","pressed","circleButtonInner","opacity","size","color","foreground","displayName","create","width","height","borderRadius","overflow","alignItems","justifyContent"],"sourceRoot":"../../../src","sources":["chatbot/ConversationScrollButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,QAAQ,EACRC,SAAS,EACTC,UAAU,QAGL,cAAc;AACrB,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,SAAS,QAAQ,mBAAmB;AAC7C,SAASC,kBAAkB,QAAQ,UAAU;;AAE7C;AACA;AACA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAkBA;AACA;AACA;;AAEA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,EAAE;AAC7B,MAAMC,SAAS,GAAG,EAAE;AACpB,MAAMC,KAAK,GAAGV,QAAQ,CAACW,EAAE,KAAK,KAAK;;AAEnC;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,wBAAwBA,CAAC;EACvCC,OAAO;EACPC,OAAO;EACPC,KAAK;EACLC,kBAAkB,GAAG;AACQ,CAAC,EAAE;EAChC,MAAMC,KAAK,GAAGZ,kBAAkB,CAAC,CAAC;EAElC,IAAI,CAACQ,OAAO,EAAE,OAAO,IAAI;EAEzB,oBACEN,IAAA,CAACH,SAAS;IACRc,gBAAgB,EAAER,KAAK,GAAG,SAAS,GAAG,MAAO;IAC7CS,aAAa;IACbC,WAAW,EAAEH,KAAK,CAACI,IAAI,GAAG,MAAM,GAAG,OAAQ;IAC3CN,KAAK,EAAE,CACLO,MAAM,CAACC,YAAY;IACnB;IACA;IACA,CAACb,KAAK,IAAI;MAAEc,eAAe,EAAEP,KAAK,CAACQ,MAAM,CAACC;IAAU,CAAC,EACrDX,KAAK,CACL;IAAAY,QAAA,eAEFpB,IAAA,CAACN,SAAS;MACRa,OAAO,EAAEA,OAAQ;MACjBc,iBAAiB,EAAC,QAAQ;MAC1BZ,kBAAkB,EAAEA,kBAAmB;MACvCD,KAAK,EAAEA,CAAC;QAAEc;MAAQ,CAAC,KAAK,CACtBP,MAAM,CAACQ,iBAAiB,EACxB;QAAEC,OAAO,EAAEF,OAAO,GAAG,GAAG,GAAG;MAAE,CAAC,CAC9B;MAAAF,QAAA,eAEFpB,IAAA,CAACJ,SAAS;QAAC6B,IAAI,EAAEvB,SAAU;QAACwB,KAAK,EAAEhB,KAAK,CAACQ,MAAM,CAACS;MAAW,CAAE;IAAC,CACrD;EAAC,CACH,CAAC;AAEhB;AAEAtB,wBAAwB,CAACuB,WAAW,GAAG,0BAA0B;;AAEjE;AACA;AACA;;AAEA,MAAMb,MAAM,GAAGpB,UAAU,CAACkC,MAAM,CAAC;EAC/Bb,YAAY,EAAE;IACZc,KAAK,EAAE7B,kBAAkB;IACzB8B,MAAM,EAAE9B,kBAAkB;IAC1B+B,YAAY,EAAE/B,kBAAkB,GAAG,CAAC;IACpC;IACAgC,QAAQ,EAAE,QAAQ;IAClBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDZ,iBAAiB,EAAE;IACjBO,KAAK,EAAE,MAAM;IACbC,MAAM,EAAE,MAAM;IACdG,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/chatbot/Message.js

@@ -0,0 +1,198 @@
+"use strict";
+
+import React, { createContext, memo, useContext } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { useAIElementsTheme } from '../theme';
+import { StreamingMarkdown } from '../streaming';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const MessageContext = /*#__PURE__*/createContext(null);
+function useMessageContext() {
+  const ctx = useContext(MessageContext);
+  if (!ctx) {
+    throw new Error('Message compound components must be used within a <Message>.');
+  }
+  return ctx;
+}
+
+// ---------------------------------------------------------------------------
+// Prop types
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Message (root)
+// ---------------------------------------------------------------------------
+
+function MessageRoot({
+  message,
+  isStreaming,
+  children,
+  style
+}) {
+  const theme = useAIElementsTheme();
+  const isUser = message.role === 'user';
+  return /*#__PURE__*/_jsx(MessageContext.Provider, {
+    value: {
+      message,
+      isStreaming
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.container, {
+        alignItems: isUser ? 'flex-end' : 'flex-start',
+        paddingHorizontal: theme.spacing.lg,
+        marginBottom: theme.spacing.md
+      }, style],
+      children: children ?? /*#__PURE__*/_jsx(_Fragment, {
+        children: /*#__PURE__*/_jsx(MessageContent, {})
+      })
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// MessageAvatar
+// ---------------------------------------------------------------------------
+
+function MessageAvatarComponent({
+  children,
+  style
+}) {
+  const theme = useAIElementsTheme();
+  const {
+    message
+  } = useMessageContext();
+  const isUser = message.role === 'user';
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.avatar, {
+      backgroundColor: isUser ? theme.colors.primary : theme.colors.muted,
+      width: 32,
+      height: 32,
+      borderRadius: theme.radius.full
+    }, style],
+    children: children ?? /*#__PURE__*/_jsx(Text, {
+      style: [styles.avatarText, {
+        color: isUser ? theme.colors.primaryForeground : theme.colors.foreground,
+        fontSize: theme.typography.fontSize.sm,
+        fontWeight: theme.typography.fontWeight.semibold,
+        fontFamily: theme.typography.fontFamily
+      }],
+      children: isUser ? 'U' : 'AI'
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// MessageContent
+// ---------------------------------------------------------------------------
+
+function MessageContentComponent({
+  style
+}) {
+  const theme = useAIElementsTheme();
+  const {
+    message,
+    isStreaming
+  } = useMessageContext();
+  const isUser = message.role === 'user';
+  const bubbleStyle = getBubbleStyle(isUser, theme);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.bubble, bubbleStyle, style],
+    children: isUser ? /*#__PURE__*/_jsx(Text, {
+      style: {
+        color: theme.colors.primaryForeground,
+        fontSize: 12,
+        fontFamily: theme.typography.fontFamily,
+        lineHeight: 12 * theme.typography.lineHeight.normal
+      },
+      children: message.content
+    }) : /*#__PURE__*/_jsx(StreamingMarkdown, {
+      content: message.content,
+      isStreaming: isStreaming
+    })
+  });
+}
+
+// ---------------------------------------------------------------------------
+// MessageActions
+// ---------------------------------------------------------------------------
+
+function MessageActionsComponent({
+  children,
+  style
+}) {
+  const theme = useAIElementsTheme();
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.actions, {
+      marginTop: theme.spacing.xs,
+      gap: theme.spacing.sm
+    }, style],
+    children: children
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function getBubbleStyle(isUser, theme) {
+  if (isUser) {
+    return {
+      backgroundColor: theme.colors.primary,
+      borderRadius: theme.radius.lg,
+      borderBottomRightRadius: theme.radius.sm,
+      paddingHorizontal: theme.spacing.lg,
+      paddingVertical: theme.spacing.sm,
+      maxWidth: '80%'
+    };
+  }
+  return {
+    backgroundColor: theme.colors.card,
+    borderColor: theme.colors.border,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: theme.radius.lg,
+    borderBottomLeftRadius: theme.radius.sm,
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.md,
+    maxWidth: '85%'
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Styles
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    width: '100%'
+  },
+  avatar: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  avatarText: {
+    textAlign: 'center'
+  },
+  bubble: {},
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+
+// ---------------------------------------------------------------------------
+// Exports (memoized)
+// ---------------------------------------------------------------------------
+
+export const Message = /*#__PURE__*/memo(MessageRoot);
+export const MessageAvatar = /*#__PURE__*/memo(MessageAvatarComponent);
+export const MessageContent = /*#__PURE__*/memo(MessageContentComponent);
+export const MessageActions = /*#__PURE__*/memo(MessageActionsComponent);
+//# sourceMappingURL=Message.js.map

package/lib/module/chatbot/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","memo","useContext","View","Text","StyleSheet","useAIElementsTheme","StreamingMarkdown","jsx","_jsx","Fragment","_Fragment","MessageContext","useMessageContext","ctx","Error","MessageRoot","message","isStreaming","children","style","theme","isUser","role","Provider","value","styles","container","alignItems","paddingHorizontal","spacing","lg","marginBottom","md","MessageContent","MessageAvatarComponent","avatar","backgroundColor","colors","primary","muted","width","height","borderRadius","radius","full","avatarText","color","primaryForeground","foreground","fontSize","typography","sm","fontWeight","semibold","fontFamily","MessageContentComponent","bubbleStyle","getBubbleStyle","bubble","lineHeight","normal","content","MessageActionsComponent","actions","marginTop","xs","gap","borderBottomRightRadius","paddingVertical","maxWidth","card","borderColor","border","borderWidth","hairlineWidth","borderBottomLeftRadius","create","flexDirection","justifyContent","textAlign","Message","MessageAvatar","MessageActions"],"sourceRoot":"../../../src","sources":["chatbot/Message.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chatbot/PromptInput.js

@@ -0,0 +1,347 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, StyleSheet, TextInput, View } from 'react-native';
+import { Plus, Mic, ArrowUp, Square, AlertCircle } from 'lucide-react-native';
+import { KeyboardStickyView } from 'react-native-keyboard-controller';
+import { GlassView } from 'expo-glass-effect';
+import { useAIElementsTheme } from '../theme';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+/**
+ * Lifecycle status of the chat the PromptInput is attached to. Drives the
+ * shape of the right-side action button.
+ *
+ * - `'ready'`     — idle. Right action shows mic (empty) or send (has text).
+ * - `'submitted'` — request just sent, awaiting first token. Right action
+ *                   shows a spinner.
+ * - `'streaming'` — assistant is generating. Right action shows a Stop
+ *                   button (calls `onStop` when pressed).
+ * - `'error'`     — request failed. Right action shows an error icon; tap
+ *                   re-submits.
+ *
+ * Inspired by Vercel ai-elements `PromptInputSubmit.status`.
+ */
+
+/** Imperative handle exposed via ref. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const DEFAULT_MIN_HEIGHT = 36;
+const DEFAULT_MAX_HEIGHT = 100;
+const CIRCLE_BUTTON_SIZE = 36;
+const ICON_SIZE = 18;
+const isIOS = Platform.OS === 'ios';
+
+// ---------------------------------------------------------------------------
+// CircleButton — lucide icon inside a native iOS glass circle.
+// Uses `expo-glass-effect`'s GlassView, which renders a real
+// UIVisualEffectView on iOS (liquid glass on iOS 26+) and degrades to a
+// plain View on Android/web.
+// ---------------------------------------------------------------------------
+
+function CircleButton({
+  icon,
+  onPress,
+  isDisabled = false,
+  tintColor,
+  dark,
+  fallbackBackground,
+  accessibilityLabel
+}) {
+  return /*#__PURE__*/_jsx(GlassView, {
+    glassEffectStyle: isIOS ? 'regular' : 'none',
+    tintColor: tintColor,
+    isInteractive: true,
+    colorScheme: dark ? 'dark' : 'light',
+    style: [styles.circleButton,
+    // On non-iOS GlassView is just a plain View, so paint the bg
+    // ourselves to keep the visible circle.
+    !isIOS && {
+      backgroundColor: fallbackBackground
+    }],
+    children: /*#__PURE__*/_jsx(Pressable, {
+      onPress: onPress,
+      disabled: isDisabled,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      style: ({
+        pressed
+      }) => [styles.circleButtonInner, {
+        opacity: pressed ? 0.6 : isDisabled ? 0.5 : 1
+      }],
+      children: icon
+    })
+  });
+}
+CircleButton.displayName = 'PromptInput.CircleButton';
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * The sticky bottom input bar for a chat. Owns its own expanding-textarea
+ * height state so keystrokes don't re-render the parent screen. Moves with
+ * the keyboard via `KeyboardStickyView` from `react-native-keyboard-controller`.
+ *
+ * The right-side action is computed from `status`:
+ *   - `'submitted'` → spinner
+ *   - `'streaming'` → Stop button (calls `onStop`)
+ *   - `'error'`     → error icon (tap re-submits)
+ *   - otherwise     → Mic (empty input) or Send (has input)
+ *
+ * @example
+ * ```tsx
+ * <PromptInput
+ *   value={input}
+ *   onChangeText={setInput}
+ *   onSubmit={sendMessage}
+ *   onStop={stop}
+ *   status={isStreaming ? 'streaming' : 'ready'}
+ *   bottomInset={insets.bottom}
+ *   suggestions={messages.length === 0 ? <Suggestions /> : null}
+ * />
+ * ```
+ */
+const PromptInputImpl = /*#__PURE__*/forwardRef(function PromptInput({
+  value,
+  onChangeText,
+  onSubmit,
+  onStop,
+  status = 'ready',
+  disabled = false,
+  placeholder = 'Ask me anything...',
+  minHeight = DEFAULT_MIN_HEIGHT,
+  maxHeight = DEFAULT_MAX_HEIGHT,
+  bottomInset = 0,
+  suggestions,
+  leftAction,
+  onLeftActionPress,
+  rightAction,
+  isListening = false,
+  onMicPress,
+  keyboardAppearance,
+  style,
+  ...viewProps
+}, ref) {
+  const theme = useAIElementsTheme();
+  const textInputRef = useRef(null);
+  const [inputHeight, setInputHeight] = useState(minHeight);
+
+  // Default the iOS keyboard to match the current theme. An explicit prop
+  // from the caller still wins.
+  const effectiveKeyboardAppearance = keyboardAppearance ?? (theme.dark ? 'dark' : 'light');
+  const hasText = value.trim().length > 0;
+  const canSubmit = hasText && !disabled && status === 'ready';
+  useImperativeHandle(ref, () => ({
+    focus: () => textInputRef.current?.focus(),
+    blur: () => textInputRef.current?.blur(),
+    clear: () => {
+      onChangeText('');
+      setInputHeight(minHeight);
+    },
+    isFocused: () => textInputRef.current?.isFocused() ?? false
+  }), [onChangeText, minHeight]);
+  const handleContentSizeChange = useCallback(e => {
+    const next = Math.min(Math.max(e.nativeEvent.contentSize.height, minHeight), maxHeight);
+    setInputHeight(next);
+  }, [minHeight, maxHeight]);
+  const handleSubmit = useCallback(() => {
+    if (!canSubmit) return;
+    onSubmit();
+    setInputHeight(minHeight);
+  }, [canSubmit, onSubmit, minHeight]);
+
+  // --- Defaults -----------------------------------------------------------
+  // CircleButton wraps a lucide icon inside a real native iOS glass effect
+  // (UIVisualEffectView / liquid glass on iOS 26+). On Android/web it
+  // degrades to a flat themed circle so behavior is preserved.
+
+  const defaultLeftAction = /*#__PURE__*/_jsx(CircleButton, {
+    icon: /*#__PURE__*/_jsx(Plus, {
+      size: ICON_SIZE,
+      color: theme.colors.foreground
+    }),
+    onPress: onLeftActionPress,
+    dark: theme.dark,
+    fallbackBackground: theme.colors.secondary,
+    accessibilityLabel: "More options"
+  });
+
+  // The right-side action is a function of `status` first, then text content.
+  const defaultRightAction = (() => {
+    if (status === 'streaming') {
+      return /*#__PURE__*/_jsx(CircleButton, {
+        icon: /*#__PURE__*/_jsx(Square, {
+          size: 14,
+          color: theme.colors.background,
+          fill: theme.colors.background
+        }),
+        onPress: onStop,
+        tintColor: theme.colors.foreground,
+        dark: theme.dark,
+        fallbackBackground: theme.colors.foreground,
+        accessibilityLabel: "Stop generating"
+      });
+    }
+    if (status === 'submitted') {
+      return /*#__PURE__*/_jsx(CircleButton, {
+        icon: /*#__PURE__*/_jsx(ActivityIndicator, {
+          size: "small",
+          color: theme.colors.foreground
+        }),
+        isDisabled: true,
+        dark: theme.dark,
+        fallbackBackground: theme.colors.secondary,
+        accessibilityLabel: "Sending"
+      });
+    }
+    if (status === 'error') {
+      return /*#__PURE__*/_jsx(CircleButton, {
+        icon: /*#__PURE__*/_jsx(AlertCircle, {
+          size: ICON_SIZE,
+          color: theme.colors.destructive
+        }),
+        onPress: hasText && !disabled ? handleSubmit : undefined,
+        dark: theme.dark,
+        fallbackBackground: theme.colors.secondary,
+        accessibilityLabel: "Send failed \u2014 tap to retry"
+      });
+    }
+
+    // status === 'ready' — original mic/send behavior.
+    if (hasText) {
+      return /*#__PURE__*/_jsx(CircleButton, {
+        icon: /*#__PURE__*/_jsx(ArrowUp, {
+          size: ICON_SIZE,
+          color: canSubmit ? theme.colors.background : theme.colors.mutedForeground
+        }),
+        onPress: canSubmit ? handleSubmit : undefined,
+        isDisabled: !canSubmit
+        // Tint the glass with the foreground color so the active send
+        // button reads as prominent against the muted plus/mic siblings.
+        ,
+        tintColor: canSubmit ? theme.colors.foreground : undefined,
+        dark: theme.dark,
+        fallbackBackground: canSubmit ? theme.colors.foreground : theme.colors.secondary,
+        accessibilityLabel: "Send message"
+      });
+    }
+
+    // Empty input + not streaming → Mic (voice input).
+    // While listening, tint the glass with `destructive` and flip the
+    // icon color so the recording state is unmissable.
+    return /*#__PURE__*/_jsx(CircleButton, {
+      icon: /*#__PURE__*/_jsx(Mic, {
+        size: ICON_SIZE,
+        color: isListening ? theme.colors.destructiveForeground : theme.colors.foreground
+      }),
+      onPress: onMicPress,
+      tintColor: isListening ? theme.colors.destructive : undefined,
+      dark: theme.dark,
+      fallbackBackground: isListening ? theme.colors.destructive : theme.colors.secondary,
+      accessibilityLabel: isListening ? 'Stop voice input' : 'Start voice input'
+    });
+  })();
+  return /*#__PURE__*/_jsxs(KeyboardStickyView, {
+    offset: {
+      opened: bottomInset,
+      closed: 0
+    },
+    children: [suggestions, /*#__PURE__*/_jsxs(View, {
+      ...viewProps,
+      style: [styles.row, {
+        paddingHorizontal: theme.spacing.md,
+        paddingBottom: bottomInset + theme.spacing.sm
+      }, style],
+      children: [leftAction ?? defaultLeftAction, /*#__PURE__*/_jsx(GlassView, {
+        glassEffectStyle: isIOS ? 'regular' : 'none',
+        isInteractive: true,
+        colorScheme: theme.dark ? 'dark' : 'light',
+        style: [styles.inputPill,
+        // On iOS, the glass provides its own subtle edge — no border.
+        // On Android/web fall back to the original tinted pill.
+        isIOS ? null : {
+          backgroundColor: theme.colors.secondary,
+          borderWidth: 1,
+          borderColor: theme.dark ? 'transparent' : theme.colors.border
+        }],
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ref: textInputRef,
+          value: value,
+          onChangeText: onChangeText,
+          placeholder: placeholder,
+          placeholderTextColor: theme.colors.mutedForeground,
+          multiline: true,
+          editable: !disabled,
+          keyboardAppearance: effectiveKeyboardAppearance,
+          onContentSizeChange: handleContentSizeChange,
+          onSubmitEditing: handleSubmit,
+          blurOnSubmit: false,
+          accessibilityLabel: "Message input",
+          style: [styles.textInput, {
+            height: inputHeight,
+            maxHeight,
+            color: theme.colors.foreground,
+            fontSize: theme.typography.fontSize.md,
+            fontFamily: theme.typography.fontFamily
+          }]
+        })
+      }), rightAction ?? defaultRightAction]
+    })]
+  });
+});
+PromptInputImpl.displayName = 'PromptInput';
+export const PromptInput = PromptInputImpl;
+
+// ---------------------------------------------------------------------------
+// Styles — static so they're not reallocated per render
+// ---------------------------------------------------------------------------
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 8
+  },
+  circleButton: {
+    width: CIRCLE_BUTTON_SIZE,
+    height: CIRCLE_BUTTON_SIZE,
+    borderRadius: CIRCLE_BUTTON_SIZE / 2,
+    // Clip the GlassView blur to the rounded shape on iOS, and the
+    // background fill on other platforms.
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  circleButtonInner: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  inputPill: {
+    flex: 1,
+    borderRadius: 20,
+    paddingHorizontal: 14,
+    // Clip the GlassView blur (and the non-iOS background) to the rounded
+    // pill shape.
+    overflow: 'hidden'
+  },
+  textInput: {
+    textAlignVertical: 'top',
+    paddingTop: Platform.OS === 'ios' ? 8 : 6,
+    paddingBottom: Platform.OS === 'ios' ? 8 : 6,
+    paddingHorizontal: 0
+  }
+});
+//# sourceMappingURL=PromptInput.js.map