Prompt Input

import { Plus } from "lucide-react-native";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputToolbar,
  PromptInputSpacer,
  PromptInputButton,
  PromptInputSend,
} from "@/components/ui/prompt-input";

export function Composer() {
  return (
    <PromptInput onSend={(text) => sendMessage(text)}>
      <PromptInputTextarea />
      <PromptInputToolbar>
        <PromptInputButton onPress={() => pickImage()} accessibilityLabel="Add attachment">
          <Plus size={20} color="#71717a" />
        </PromptInputButton>
        <PromptInputSpacer />
        <PromptInputSend />
      </PromptInputToolbar>
    </PromptInput>
  );
}

import { Text } from "react-native";
import { Plus, ChevronDown, Mic, AudioLines } from "lucide-react-native";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";

<PromptInput onSend={(text) => sendMessage(text)}>
  <PromptInputTextarea />
  <PromptInputToolbar>
    <PromptInputButton onPress={() => pickImage()} accessibilityLabel="Add attachment">
      <Plus size={20} color="#71717a" />
    </PromptInputButton>
    <PromptInputSpacer />
    {/* Model selector — any AniUI overlay works inside the toolbar */}
    <DropdownMenu>
      <DropdownMenuTrigger>
        <PromptInputButton accessibilityLabel="Choose model">
          <Text className="text-sm text-muted-foreground">Opus 4.8</Text>
          <ChevronDown size={14} color="#71717a" />
        </PromptInputButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent side="top" align="end">
        <DropdownMenuItem onPress={() => setModel("opus-4.8")}>Opus 4.8</DropdownMenuItem>
        <DropdownMenuItem onPress={() => setModel("sonnet-4.9")}>Sonnet 4.9</DropdownMenuItem>
        <DropdownMenuItem onPress={() => setModel("haiku-4.5")}>Haiku 4.5</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <PromptInputButton onPress={() => startDictation()} accessibilityLabel="Dictate">
      <Mic size={20} color="#71717a" />
    </PromptInputButton>
    {/* Voice mode while empty — the send arrow appears as soon as you type */}
    <PromptInputSend
      emptyFallback={
        <PromptInputButton onPress={() => startVoiceChat()} accessibilityLabel="Voice mode">
          <AudioLines size={20} color="#71717a" />
        </PromptInputButton>
      }
    />
  </PromptInputToolbar>
</PromptInput>

// npx @aniui/cli add dropdown-menu
import { Plus } from "lucide-react-native";
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu";

<PromptInput onSend={(text) => sendMessage(text)}>
  <PromptInputTextarea />
  <PromptInputToolbar>
    <DropdownMenu>
      <DropdownMenuTrigger>
        <PromptInputButton accessibilityLabel="Open attachment menu">
          <Plus size={20} color="#71717a" />
        </PromptInputButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent side="top" align="start">
        <DropdownMenuItem onPress={() => pickFiles()}>Add files or photos</DropdownMenuItem>
        <DropdownMenuItem onPress={() => takeScreenshot()}>Take a screenshot</DropdownMenuItem>
        <DropdownMenuItem onPress={() => setWebSearch(true)}>Web search</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
    <PromptInputSpacer />
    <PromptInputSend />
  </PromptInputToolbar>
</PromptInput>

// npx @aniui/cli add keyboard-view
import { KeyboardView } from "@/components/ui/keyboard-view";

<KeyboardView className="flex-1">
  <MessageList className="flex-1" />
  <PromptInput onSend={(text) => sendMessage(text)} className="mx-4 mb-4">
    <PromptInputTextarea />
    <PromptInputToolbar>
      <PromptInputSpacer />
      <PromptInputSend />
    </PromptInputToolbar>
  </PromptInput>
</KeyboardView>

import React, { createContext, useContext, useState } from "react";
import { View, TextInput, Pressable, useColorScheme } from "react-native";
import { ArrowUp, Square } from "lucide-react-native";
import { cn } from "@/lib/utils";

// Compound composer (ChatGPT/Claude-style): textarea on top, toolbar below.
// <PromptInput onSend={…}><PromptInputTextarea /><PromptInputToolbar>…</PromptInputToolbar></PromptInput>

type PromptInputCtx = {
  text: string;
  setText: (t: string) => void;
  send: () => void;
  streaming?: boolean;
  dark: boolean;
};
const Ctx = createContext<PromptInputCtx | null>(null);

export function usePromptInput(): PromptInputCtx {
  const ctx = useContext(Ctx);
  if (!ctx) throw new Error("PromptInput.* components must be used inside <PromptInput>");
  return ctx;
}

export interface PromptInputProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
  value?: string;
  onChangeText?: (text: string) => void;
  onSend?: (text: string) => void;
  /** While `streaming`, PromptInputSend becomes a stop button firing this. */
  onStop?: () => void;
  streaming?: boolean;
  clearOnSend?: boolean;
}

export function PromptInput({
  className, value, onChangeText, onSend, onStop, streaming, clearOnSend = true, children, ...props
}: PromptInputProps) {
  const [internal, setInternal] = useState("");
  const dark = useColorScheme() === "dark";
  const text = value ?? internal;

  const setText = (t: string) => {
    if (value === undefined) setInternal(t);
    onChangeText?.(t);
  };
  const send = () => {
    if (streaming) return onStop?.();
    const t = text.trim();
    if (!t) return;
    onSend?.(t);
    if (clearOnSend && value === undefined) setInternal("");
  };

  return (
    <Ctx.Provider value={{ text, setText, send, streaming, dark }}>
      <View className={cn("rounded-3xl border border-input bg-background px-3 pt-3 pb-2", className)} {...props}>
        {children}
      </View>
    </Ctx.Provider>
  );
}

export interface PromptInputTextareaProps
  extends Omit<React.ComponentPropsWithoutRef<typeof TextInput>, "multiline" | "value" | "onChangeText"> {
  className?: string;
  /** Max height before the textarea scrolls (default 120). */
  maxHeight?: number;
}

export const PromptInputTextarea = React.forwardRef<
  React.ElementRef<typeof TextInput>,
  PromptInputTextareaProps
>(function PromptInputTextarea({ className, maxHeight = 120, style, ...props }, ref) {
  const { text, setText, dark } = usePromptInput();
  const [height, setHeight] = useState(0);
  return (
    <TextInput
      ref={ref}
      multiline
      value={text}
      onChangeText={setText}
      onContentSizeChange={(e) => setHeight(e.nativeEvent.contentSize.height)}
      // Grows with content up to maxHeight, then scrolls. Font size is inline
      // so the cursor stays centered on iOS (same convention as input.tsx).
      style={[{ fontSize: 16, maxHeight, height: Math.min(Math.max(24, height), maxHeight) }, style]}
      className={cn("p-0 text-foreground placeholder:text-muted-foreground", className)}
      placeholder="How can I help you today?"
      placeholderTextColor={dark ? "#a1a1aa" : "#71717a"}
      keyboardAppearance={dark ? "dark" : "light"}
      selectionColor={dark ? "#fafafa" : "#18181b"}
      cursorColor={dark ? "#fafafa" : "#18181b"}
      {...props}
    />
  );
});

export interface PromptInputToolbarProps extends React.ComponentPropsWithoutRef<typeof View> {
  className?: string;
}

/** Bottom action row — put leading tools first, then <PromptInputSpacer />, then trailing tools. */
export function PromptInputToolbar({ className, ...props }: PromptInputToolbarProps) {
  return <View className={cn("flex-row items-center gap-1 pt-2", className)} {...props} />;
}

export function PromptInputSpacer() {
  return <View className="flex-1" />;
}

export interface PromptInputButtonProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
  className?: string;
}

/** Ghost icon button for toolbar actions (+, mic, model selector, …). */
export function PromptInputButton({ className, ...props }: PromptInputButtonProps) {
  return (
    <Pressable
      className={cn("h-11 min-w-11 flex-row items-center justify-center gap-1 rounded-full px-2 active:bg-muted", className)}
      accessible={true}
      accessibilityRole="button"
      {...props}
    />
  );
}

export interface PromptInputSendProps extends React.ComponentPropsWithoutRef<typeof Pressable> {
  className?: string;
  /** Shown when there is no text (e.g. a voice/waveform button); default hides into the send arrow. */
  emptyFallback?: React.ReactNode;
}

export function PromptInputSend({ className, emptyFallback, ...props }: PromptInputSendProps) {
  const { text, send, streaming, dark } = usePromptInput();
  const canSend = text.trim().length > 0;
  const fg = dark ? "#18181b" : "#fafafa";
  if (!canSend && !streaming && emptyFallback) return <>{emptyFallback}</>;
  return (
    <Pressable
      onPress={send}
      disabled={!canSend && !streaming}
      className={cn("h-11 w-11 items-center justify-center rounded-full bg-primary", !canSend && !streaming && "opacity-40", className)}
      accessible={true}
      accessibilityRole="button"
      accessibilityLabel={streaming ? "Stop generating" : "Send message"}
      accessibilityState={{ disabled: !canSend && !streaming }}
      {...props}
    >
      {streaming ? <Square size={14} color={fg} fill={fg} /> : <ArrowUp size={20} color={fg} strokeWidth={2.5} />}
    </Pressable>
  );
}