@crafter/rn-ai-elements 0.0.1

package/src/chatbot/PromptInput.tsx

@@ -0,0 +1,532 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  StyleSheet,
+  TextInput,
+  View,
+  type NativeSyntheticEvent,
+  type TextInputContentSizeChangeEventData,
+  type TextInputProps,
+  type ViewProps,
+} 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`.
+ */
+export type PromptInputStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+
+/** Imperative handle exposed via ref. */
+export interface PromptInputRef {
+  /** Focus the underlying TextInput. */
+  focus: () => void;
+  /** Blur the underlying TextInput. */
+  blur: () => void;
+  /** Clear the input value and reset the expanding-textarea height. */
+  clear: () => void;
+  /** Whether the underlying TextInput currently has focus. */
+  isFocused: () => boolean;
+}
+
+export interface PromptInputProps extends Omit<ViewProps, 'children'> {
+  /** Current input text value (controlled). */
+  value: string;
+  /** Called when the input text changes. */
+  onChangeText: (text: string) => void;
+  /**
+   * Called when the user submits — either by tapping the send button or
+   * pressing enter/return on the keyboard.
+   */
+  onSubmit: () => void;
+  /**
+   * Called when the user taps the Stop button while `status === 'streaming'`.
+   * If omitted, the Stop button still appears but does nothing on press.
+   */
+  onStop?: () => void;
+  /**
+   * Lifecycle status. When omitted (or `'ready'`), the right-side action
+   * uses the legacy mic-or-send behavior driven by `disabled`.
+   */
+  status?: PromptInputStatus;
+  /**
+   * Disables editing. Independent of `status` so callers can keep the bar
+   * editable while showing a loader, or vice-versa.
+   */
+  disabled?: boolean;
+  /** Placeholder text. Default: `"Ask me anything..."` */
+  placeholder?: string;
+  /** Minimum pill height. Default `36`. */
+  minHeight?: number;
+  /** Maximum pill height before the textarea scrolls. Default `100`. */
+  maxHeight?: number;
+  /** Safe-area bottom inset — applied to the row and the keyboard offset. */
+  bottomInset?: number;
+  /** Slot above the input row (e.g. starter suggestions). */
+  suggestions?: ReactNode;
+  /** Optional override for the default left action (Plus circle). */
+  leftAction?: ReactNode;
+  /** Pressed when the default Plus button is tapped. */
+  onLeftActionPress?: () => void;
+  /** Optional override for the default right action (Mic / Send / Stop). */
+  rightAction?: ReactNode;
+  /**
+   * True while a speech-recognition session is active. When set, the
+   * default mic button flips to an "active" look (destructive tint +
+   * subtle pulsing) so the recording state is obvious. Pair with
+   * `onMicPress` to actually start/stop recognition.
+   */
+  isListening?: boolean;
+  /**
+   * Handler for the default mic button. When omitted (or when a custom
+   * `rightAction` is provided) the built-in mic is a no-op placeholder.
+   * Typically wired to a `useSpeechRecognition` hook's `toggle()`.
+   */
+  onMicPress?: () => void;
+  /**
+   * iOS software keyboard appearance. Defaults to the current theme's mode
+   * (`'dark'` when the theme is dark, `'light'` otherwise). Pass `'default'`
+   * to fall back to the system setting, or force a specific value.
+   *
+   * Note: iOS only — Android ignores this.
+   */
+  keyboardAppearance?: TextInputProps['keyboardAppearance'];
+}
+
+// ---------------------------------------------------------------------------
+// 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.
+// ---------------------------------------------------------------------------
+
+interface CircleButtonProps {
+  /** Icon node (any RN component — lucide, image, custom). */
+  icon: React.ReactNode;
+  /** Press handler. Skipped when undefined / disabled. */
+  onPress?: () => void;
+  /** Disables the button visually and prevents press events. */
+  isDisabled?: boolean;
+  /**
+   * Optional tint color for the glass — used to make the active send
+   * button visually prominent. Hex string.
+   */
+  tintColor?: string;
+  /** Drives the GlassView color scheme so the glass picks the right tone. */
+  dark: boolean;
+  /** Background color used on non-iOS where GlassView is a plain View. */
+  fallbackBackground: string;
+  /** Accessibility label for screen readers. */
+  accessibilityLabel?: string;
+}
+
+function CircleButton({
+  icon,
+  onPress,
+  isDisabled = false,
+  tintColor,
+  dark,
+  fallbackBackground,
+  accessibilityLabel,
+}: CircleButtonProps) {
+  return (
+    <GlassView
+      glassEffectStyle={isIOS ? 'regular' : 'none'}
+      tintColor={tintColor}
+      isInteractive
+      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 },
+      ]}
+    >
+      <Pressable
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: isDisabled }}
+        style={({ pressed }) => [
+          styles.circleButtonInner,
+          { opacity: pressed ? 0.6 : isDisabled ? 0.5 : 1 },
+        ]}
+      >
+        {icon}
+      </Pressable>
+    </GlassView>
+  );
+}
+
+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 = forwardRef<PromptInputRef, PromptInputProps>(
+  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<TextInput>(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: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+        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 = (
+      <CircleButton
+        icon={<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 (
+          <CircleButton
+            icon={
+              <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 (
+          <CircleButton
+            icon={
+              <ActivityIndicator
+                size="small"
+                color={theme.colors.foreground}
+              />
+            }
+            isDisabled
+            dark={theme.dark}
+            fallbackBackground={theme.colors.secondary}
+            accessibilityLabel="Sending"
+          />
+        );
+      }
+
+      if (status === 'error') {
+        return (
+          <CircleButton
+            icon={
+              <AlertCircle size={ICON_SIZE} color={theme.colors.destructive} />
+            }
+            onPress={hasText && !disabled ? handleSubmit : undefined}
+            dark={theme.dark}
+            fallbackBackground={theme.colors.secondary}
+            accessibilityLabel="Send failed — tap to retry"
+          />
+        );
+      }
+
+      // status === 'ready' — original mic/send behavior.
+      if (hasText) {
+        return (
+          <CircleButton
+            icon={
+              <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 (
+        <CircleButton
+          icon={
+            <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 (
+      <KeyboardStickyView offset={{ opened: bottomInset, closed: 0 }}>
+        {suggestions}
+
+        <View
+          {...viewProps}
+          style={[
+            styles.row,
+            {
+              paddingHorizontal: theme.spacing.md,
+              paddingBottom: bottomInset + theme.spacing.sm,
+            },
+            style,
+          ]}
+        >
+          {leftAction ?? defaultLeftAction}
+
+          <GlassView
+            glassEffectStyle={isIOS ? 'regular' : 'none'}
+            isInteractive
+            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,
+                  },
+            ]}
+          >
+            <TextInput
+              ref={textInputRef}
+              value={value}
+              onChangeText={onChangeText}
+              placeholder={placeholder}
+              placeholderTextColor={theme.colors.mutedForeground}
+              multiline
+              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,
+                },
+              ]}
+            />
+          </GlassView>
+
+          {rightAction ?? defaultRightAction}
+        </View>
+      </KeyboardStickyView>
+    );
+  },
+);
+
+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,
+  },
+});