Function ChatInput

lib/chat/components/chat-input.jsx:46–478

({ input, setInput, onSubmit, status, stop, files, setFiles, disabled = false, placeholder = 'Send a message...', canSendOverride, bare = false, className, codeMode = false, codeModeSettings })

}

export function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, disabled = false, placeholder = 'Send a message...', canSendOverride, bare = false, className, codeMode = false, codeModeSettings }) {
  const textareaRef = useRef(null);
  const fileInputRef = useRef(null);
  const [isDragging, setIsDragging] = useState(false);
  const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
  const [partialText, setPartialText] = useState('');
  const [secretsOpen, setSecretsOpen] = useState(false);
  const dropdownRef = useRef(null);
  const agentPickerRef = useRef(null);
  const isStreaming = status === 'streaming' || status === 'submitted';
  const volumeRef = useRef(0);

  const { voiceAvailable, isConnecting, isRecording, startRecording, stopRecording } = useVoiceInput({
    getToken: getVoiceTokenFetch,
    onVolumeChange: (rms) => { volumeRef.current = rms; },
    onTranscript: (text) => {
      setInput((prev) => {
        const needsSpace = prev && !prev.endsWith(' ');
        return prev + (needsSpace ? ' ' : '') + text;
      });
    },
    onPartialTranscript: (text) => setPartialText(text),
    onError: (err) => console.error('[voice]', err),
  });

  // Auto-resize textarea
  const adjustHeight = useCallback(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    textarea.style.height = 'auto';
    textarea.style.height = `${textarea.scrollHeight}px`;
    textarea.scrollTop = textarea.scrollHeight;
  }, []);

  useEffect(() => {
    adjustHeight();
  }, [input, adjustHeight]);

  // Focus textarea on mount
  useEffect(() => {
    textareaRef.current?.focus();
  }, []);

  // Refocus textarea when streaming ends so the user can immediately type the next message
  const wasStreaming = useRef(isStreaming);
  useEffect(() => {
    if (wasStreaming.current && !isStreaming) {
      textareaRef.current?.focus();
    }
    wasStreaming.current = isStreaming;
  }, [isStreaming]);

  // Close dropdown on outside click
  useEffect(() => {
    if (!modeDropdownOpen) return;
    const handleClickOutside = (e) => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {