AI Chat Input Bar

import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { useState, useRef, useEffect } from "react";

export default function AIChatInput01() {
    const [message, setMessage] = useState("");
    const [selectedModel, setSelectedModel] = useState("chatgpt");
    const [searchEnabled, setSearchEnabled] = useState(false);
    const textareaRef = useRef<HTMLTextAreaElement>(null);

    // Auto-resize textarea
    useEffect(() => {
        if (textareaRef.current) {
            textareaRef.current.style.height = "0px";
            textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
        }
    }, [message]);

    const handleSend = () => {
        if (!message.trim()) return;
        console.log("Send message:", message, "Model:", selectedModel, "Search:", searchEnabled);
        setMessage("");
    };

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

    return (
        <div className="flex flex-col gap-2">
            {/* Top controls: model selection + search toggle */}
            <div className="flex items-center gap-2">
                <Select onValueChange={(val) => setSelectedModel(val)} defaultValue={selectedModel}>
                    <SelectTrigger className="w-[150px]">
                        <SelectValue placeholder="Select model" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="chatgpt">ChatGPT</SelectItem>
                        <SelectItem value="gpt4">GPT-4</SelectItem>
                        <SelectItem value="custom-llm">Custom LLM</SelectItem>
                    </SelectContent>
                </Select>

                <Button
                    variant={searchEnabled ? "default" : "outline"}
                    onClick={() => setSearchEnabled((prev) => !prev)}
                >
                    {searchEnabled ? "Search Enabled" : "Search"}
                </Button>
            </div>

            {/* Text input + send */}
            <div className="flex items-end gap-2">
                <Textarea
                    ref={textareaRef}
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    onKeyDown={handleKeyDown}
                    placeholder="Type your message..."
                    className="resize-none grow overflow-hidden p-2"
                    rows={1}
                />
                <Button onClick={handleSend} className="flex-shrink-0">
                    Send
                </Button>
            </div>
        </div>
    );
}