"use client"; import React, { useState } from "react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; const ClaudeIcon = ({ className = "" }: { className?: string }) => ( ); const OpenAIIcon = ({ className = "" }: { className?: string }) => ( ); export default function Ai05() { const [selectedModel, setSelectedModel] = useState("sonnet-4-5"); return (

<div className="mt-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <button className="flex size-9 cursor-pointer items-center justify-center rounded-2xl bg-primary p-2 shadow-sm transition-transform duration-150 ease-in-out active:scale-95">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                  <g clipPath="url(#clip0_4418_6669)">
                    <path d="M12.33 21.3404C11.24 21.3404 10.15 20.9304 9.32004 20.1004C7.66004 18.4404 7.66004 15.7504 9.32004 14.0904L11.8 11.6204C12.09 11.3304 12.57 11.3304 12.86 11.6204C13.15 11.9104 13.15 12.3904 12.86 12.6804L10.38 15.1504C9.31004 16.2204 9.31004 17.9704 10.38 19.0404C11.45 20.1104 13.2 20.1104 14.27 19.0404L18.16 15.1504C19.34 13.9704 19.99 12.4004 19.99 10.7304C19.99 9.06035 19.34 7.49035 18.16 6.31035C15.72 3.87035 11.76 3.87035 9.32004 6.31035L5.08004 10.5504C4.09004 11.5404 3.54004 12.8604 3.54004 14.2604C3.54004 15.6604 4.09004 16.9804 5.08004 17.9704C5.37004 18.2604 5.37004 18.7404 5.08004 19.0304C4.79004 19.3204 4.31004 19.3204 4.02004 19.0304C2.75004 17.7504 2.04004 16.0604 2.04004 14.2604C2.04004 12.4604 2.74004 10.7604 4.02004 9.49035L8.26004 5.25035C11.28 2.23035 16.2 2.23035 19.22 5.25035C20.68 6.71035 21.49 8.66035 21.49 10.7304C21.49 12.8004 20.68 14.7504 19.22 16.2104L15.33 20.1004C14.5 20.9304 13.42 21.3404 12.33 21.3404Z" fill="white" />
                  </g>
                  <defs>
                    <clipPath id="clip0_4418_6669"><rect width="24" height="24" fill="white" /></clipPath>
                  </defs>
                </svg>
              </button>
              <Select value={selectedModel} onValueChange={setSelectedModel}>
                <SelectTrigger className="h-9 w-[180px] rounded-2xl border-gray-200">
                  <div className="flex items-center gap-2">
                    <SelectValue />
                  </div>
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="gpt-5" className="rounded-2xl">
                    <div className="flex items-center gap-2">
                      <OpenAIIcon className="h-4 w-4" />
                      <span>GPT 5</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="codex" className="rounded-2xl">
                    <div className="flex items-center gap-2">
                      <OpenAIIcon className="h-4 w-4" />
                      <span>Codex</span>
                    </div>
                  </SelectItem>
                  <SelectItem value="sonnet-4-5" className="rounded-2xl">
                    <div className="flex items-center gap-2">
                      <ClaudeIcon className="h-4 w-4" />
                      <span>Sonnet 4.5</span>
                    </div>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
            <button className="flex size-9 cursor-pointer items-center justify-center rounded-2xl bg-primary p-2 shadow-sm transition-transform duration-150 ease-in-out active:scale-95">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                <g clipPath="url(#clip0_4418_8610)">
                  <path d="M16.1401 2.95907L7.11012 5.95907C1.04012 7.98907 1.04012 11.2991 7.11012 13.3191L9.79012 14.2091L10.6801 16.8891C12.7001 22.9591 16.0201 22.9591 18.0401 16.8891L21.0501 7.86907C22.3901 3.81907 20.1901 1.60907 16.1401 2.95907ZM16.4601 8.33907L12.6601 12.1591C12.5101 12.3091 12.3201 12.3791 12.1301 12.3791C11.9401 12.3791 11.7501 12.3091 11.6001 12.1591C11.3101 11.8691 11.3101 11.3891 11.6001 11.0991L15.4001 7.27907C15.6901 6.98907 16.1701 6.98907 16.4601 7.27907C16.7501 7.56907 16.7501 8.04907 16.4601 8.33907Z" fill="white" />
                </g>
                <defs>
                  <clipPath id="clip0_4418_8610"><rect width="24" height="24" fill="white" /></clipPath>
                </defs>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
</article></body></html>

AI Input with Model Selector