ChatInput

ChatInput is the headless input surface used inside ChatContainer. Use it directly when you are composing your own layout but still want the smart prompt toolbar, model selector, and compression UI.

Props


interface ChatInputProps {
  value: string;
  onChange: (value: string) => void;
  onSubmit: (event: FormEvent) => void;
  onAttach?: () => void;
  onRetry?: () => void;
  disabled?: boolean;
  submitDisabled?: boolean;
  status?: ChatStatus;
  maxRows?: number;
  placeholder?: string;
  className?: string;
  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
 
  // Model selection
  models?: ChatModelOption[];
  selectedModelId?: string;
  onModelChange?: (modelId: string) => void;
 
  // Suggestions
  enableSuggestions?: boolean;
  suggestions?: Suggestion[];
  suggestionsCount?: number;
  onSuggestionClick?: (suggestion: Suggestion) => void;
 
  // Focus chips
  allFocusItems?: FocusItem[];
  clearFocus?: (id: string) => void;
 
  // Error banner
  error?: string | null;
  setError?: (value: string | null) => void;
 
  // Compression controller (from useAIChat / useAIChatCompression)
  compression?: CompressionController;
}

Types such as FormEvent, KeyboardEvent, ChatStatus, and CompressionController refer to the React and AI Chat Bootstrap exports.

Usage


import { ChatInput } from "ai-chat-bootstrap";
 
export function MyInput() {
  const [input, setInput] = useState("");
  const [selectedModel, setSelectedModel] = useState("gpt-4");
 
  const models = [
    { id: "gpt-4", label: "GPT-4" },
    { id: "gpt-4o-mini", label: "GPT-4o mini" },
  ];
 
  return (
    <ChatInput
      value={input}
      onChange={setInput}
      onSubmit={(event) => {
        event?.preventDefault();
        console.log("Submitted:", input);
        setInput("");
      }}
      models={models}
      selectedModelId={selectedModel}
      onModelChange={setSelectedModel}
      placeholder="Ask me anything…"
      enableSuggestions
      suggestions={[
        {
          shortSuggestion: "Summarise the last conversation",
          longSuggestion: "Summarise the previous conversation in bullet points.",
        },
      ]}
    />
  );
}

Features

Prompt Toolbar – Consolidated model selector, attachment button, compression usage meter, suggestions trigger, and submit button. Use the exported promptVariants helper (ai-chat-bootstrap/variants) to float or hide it.
Model Selection – Dropdown appears automatically when you provide multiple models.
Suggestions & Slash Commands – Works with the suggestions store and shows the command palette when useAIChatCommand is configured.
Compression Awareness – Pass a compression controller to surface token usage, pinned message badges, and the artifact review sheet button.
Focus Chips – Focus items render above the textarea with one-click removal.
Auto-resize & Keyboard Shortcuts – Textarea grows as you type, Enter submits, Shift+Enter inserts a newline (while preventing accidental sends mid-stream).