Function ChatInput

src/components/ChatInput.tsx:14–125

({ 
  onSend, 
  onStop,
  disabled = false, 
  placeholder = 'Message',
  selectedModel,
  availableModels,
  onModelChange,
  isGenerating = false
}: ChatInputProps)

}

export function ChatInput({ 
  onSend, 
  onStop,
  disabled = false, 
  placeholder = 'Message',
  selectedModel,
  availableModels,
  onModelChange,
  isGenerating = false
}: ChatInputProps) {
  const [value, setValue] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 150)}px`;
    }
  }, [value]);

  const handleSend = () => {
    if (!value.trim() || disabled || isGenerating) return;
    
    onSend(value);
    setValue('');
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
    }
  };

  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  const selectedModelLabel = getModelDisplayName(selectedModel);

  return (
    <div className="p-4 pb-6">
      <div className="max-w-3xl mx-auto">
        {/* Floating input container */}
        <div className="glass-strong rounded-2xl p-1 glow-crail-sm">
          <div className="flex items-center gap-2 bg-[#1C1C1C] rounded-xl p-2">
            {/* Model selector */}
            <div className="relative flex-shrink-0 max-w-[240px]">
              <span
                className="pointer-events-none absolute left-3 right-8 top-1/2 -translate-y-1/2 truncate text-white text-xs font-medium"
                title={selectedModel}
              >
                {selectedModelLabel}
              </span>
              <select
                value={selectedModel}
                onChange={(e) => onModelChange(e.target.value)}
                disabled={disabled || isGenerating}
                className="appearance-none h-10 w-[240px] px-3 py-2 bg-[#1F1F1F] hover:bg-[#2A2A2A] border border-[#333] hover:border-[#C15F3C] rounded-lg text-transparent focus:outline-none focus:border-[#C15F3C] transition-all disabled:opacity-50 pr-8 cursor-pointer [&>option]:text-white [&>option]:bg-[#1F1F1F]"