"use client"; import { Button } from "@/components/ui/button"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { cn } from "@/lib/utils"; import { AlertTriangle, ArrowUp, Cloud, FileText, Gauge, ScanEye, } from "lucide-react"; import { useRef, useState } from "react"; const PROMPTS = [ { icon: FileText, text: "Write documentation", prompt: "Write comprehensive documentation for this codebase, including setup instructions, API references, and usage examples.", }, { icon: Gauge, text: "Optimize performance", prompt: "Analyze the codebase for performance bottlenecks and suggest optimizations to improve loading times and runtime efficiency.", }, { icon: AlertTriangle, text: "Find and fix 3 bugs", prompt: "Scan through the codebase to identify and fix 3 critical bugs, providing detailed explanations for each fix.", }, ]; const MODELS = [ { value: "gpt-4o", name: "GPT-4o", description: "Most advanced model", max: true, }, { value: "gpt-4o-mini", name: "GPT-4o Mini", description: "Fast and capable", }, { value: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", description: "Great for coding tasks", }, { value: "gemini-pro", name: "Gemini Pro", description: "Reliable and accurate", }, ]; export default function Ai02() { const [inputValue, setInputValue] = useState(""); const [selectedModel, setSelectedModel] = useState(MODELS[0]!); const inputRef = useRef(null); const handlePromptClick = (prompt: string) => { if (inputRef.current) { inputRef.current.value = prompt; setInputValue(prompt); inputRef.current.focus(); } }; const handleModelChange = (value: string) => { const model = MODELS.find((m) => m.value === value); if (model) { setSelectedModel(model); } }; const renderMaxBadge = () => (

MAX

); return (

setInputValue(e.target.value)}
            placeholder="Ask anything"
            className="w-full border-0 p-3 transition-[padding] duration-200 ease-in-out min-h-[48.4px] outline-none text-[16px] text-foreground resize-none shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 bg-transparent! whitespace-pre-wrap break-words"
          />
        </div>

<div className="relative flex items-center">
            <Select
              value={selectedModel.value}
              onValueChange={handleModelChange}
            >
              <SelectTrigger className="w-fit border-none bg-transparent! p-0 text-sm text-muted-foreground hover:text-foreground focus:ring-0 shadow-none">
                <SelectValue>
                  {selectedModel.max ? (
                    <div className="flex items-center gap-1">
                      <span>{selectedModel.name}</span>
                      {renderMaxBadge()}
                    </div>
                  ) : (
                    <span>{selectedModel.name}</span>
                  )}
                </SelectValue>
              </SelectTrigger>
              <SelectContent>
                {MODELS.map((model) => (
                  <SelectItem key={model.value} value={model.value}>
                    {model.max ? (
                      <div className="flex items-center gap-1">
                        <span>{model.name}</span>
                        {renderMaxBadge()}
                      </div>
                    ) : (
                      <span>{model.name}</span>
                    )}
                    <span className="text-muted-foreground block text-xs">
                      {model.description}
                    </span>
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

<div className="flex flex-wrap justify-center gap-2">
        {PROMPTS.map((button) => {
          const IconComponent = button.icon;
          return (
            <Button
              key={button.text}
              variant="ghost"
              className="group flex items-center gap-2 rounded-full border px-3 py-2 text-sm text-foreground transition-all duration-200 hover:bg-muted/30 h-auto bg-transparent dark:bg-muted"
              onClick={() => handlePromptClick(button.prompt)}
            >
              <IconComponent className="h-4 w-4 text-muted-foreground transition-colors group-hover:text-foreground" />
              <span>{button.text}</span>
            </Button>
          );
        })}
      </div>
    </div>
  );
}
</article></body></html>

AI Chat with Model Selection