"use client"; import { Check, Globe, Lightbulb, Mic, MoreHorizontal, Paperclip, Plus, Send, X, } from "lucide-react"; import Image from "next/image"; import { useCallback, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Textarea } from "@/components/ui/textarea"; import { Toggle } from "@/components/ui/toggle"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; const mockUsers = [ { id: "shadcn", name: "shadcn", avatar: "https://github.com/shadcn.png", }, { id: "preetsuthar17", name: "preetsuthar17", avatar: "https://github.com/preetsuthar17.png", }, { id: "evilrabbit", name: "evilrabbit", avatar: "https://github.com/evilrabbit.png", }, ]; const mockPages = [ { id: "analytics-report", name: "Analytics Report", icon: "📊" }, { id: "technical-specs", name: "Technical Specs", icon: "📑" }, { id: "user-guide", name: "User Guide", icon: "💡" }, { id: "team-directory", name: "Team Directory", icon: "👥" }, { id: "attachments", name: "Attachments", icon: "📎" }, { id: "new-feature", name: "New Feature Plan", icon: "✨" }, ]; const models = [ { value: "claude-sonnet-4-preview", label: "Claude Sonnet 4 (Preview)" }, { value: "claude-sonnet-3.7", label: "Claude Sonnet 3.7" }, { value: "claude-sonnet-3.5", label: "Claude Sonnet 3.5" }, { value: "gemini-2.5-pro-preview", label: "Gemini 2.5 pro (Preview)" }, { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" }, { value: "gpt-4", label: "GPT-4" }, { value: "gpt-4o", label: "GPT-4o" }, { value: "gpt-o4-mini", label: "o4-mini (Preview)" }, ]; const agentModes = [ { value: "auto", label: "Auto" }, { value: "agent", label: "Agent" }, { value: "plan", label: "Plan" }, ]; const hideScrollbar = { msOverflowStyle: "none", scrollbarWidth: "none" as const, } as React.CSSProperties; interface ContextBadgeProps { label: string; icon?: string; avatar?: string; onRemove: () => void; } function ContextBadge({ label, icon, avatar, onRemove }: ContextBadgeProps) { return ( {icon && ( {icon} )} {avatar && (

)} {label} ); } interface ContextPopoverProps { open: boolean; onOpenChange: (open: boolean) => void; selectedUsers: string[]; selectedPages: string[]; onUserToggle: (userId: string) => void; onPageToggle: (pageId: string) => void; } function ContextPopover({ open, onOpenChange, selectedUsers, selectedPages, onUserToggle, onPageToggle, }: ContextPopoverProps) { return (

Pages

{mockPages.map((page) => { const isSelected = selectedPages.includes(page.id); return ( ); })}

Users

{mockUsers.map((user) => { const isSelected = selectedUsers.includes(user.id); return ( ); })}

); } interface ContextSelectorProps { selectedUsers: string[]; selectedPages: string[]; onUserToggle: (userId: string) => void; onPageToggle: (pageId: string) => void; onRemoveUser: (userId: string) => void; onRemovePage: (pageId: string) => void; } function ContextSelector({ selectedUsers, selectedPages, onUserToggle, onPageToggle, onRemoveUser, onRemovePage, }: ContextSelectorProps) { const [popoverOpen, setPopoverOpen] = useState(false); const hasSelectedContext = selectedPages.length > 0 || selectedUsers.length > 0; return (

{selectedPages.map((id) => { const page = mockPages.find((p) => p.id === id); if (!page) return null; return ( onRemovePage(id)} /> ); })} {selectedUsers.map((id) => { const user = mockUsers.find((u) => u.id === id); if (!user) return null; return ( onRemoveUser(id)} /> ); })}

{hasSelectedContext && (

)}

); } interface ModelSelectProps { value: string; onValueChange: (value: string) => void; } function ModelSelect({ value, onValueChange }: ModelSelectProps) { return ( ); } interface AgentModeSelectProps { value: string; onValueChange: (value: string) => void; } function AgentModeSelect({ value, onValueChange }: AgentModeSelectProps) { return ( ); } interface LeftActionButtonsProps { webSearchEnabled: boolean; thinkingEnabled: boolean; onWebSearchToggle: (enabled: boolean) => void; onThinkingToggle: (enabled: boolean) => void; } function LeftActionButtons({ webSearchEnabled, thinkingEnabled, onWebSearchToggle, onThinkingToggle, }: LeftActionButtonsProps) { return ( <>

Attach file {thinkingEnabled ? "Disable Thinking" : "Enable Thinking"} Search {webSearchEnabled ? "Disable web search" : "Enable web search"}

{}}> Attach file onThinkingToggle(!thinkingEnabled)}> Thinking {thinkingEnabled && } onWebSearchToggle(!webSearchEnabled)} > Web search {webSearchEnabled && } ); } interface RightActionButtonsProps { input: string; } function RightActionButtons({ input }: RightActionButtonsProps) { const hasInput = input.trim().length > 0; return ( {hasInput ? "Send message" : "Start voice input"} ); } export default function AIPromptInput() { const [input, setInput] = useState(""); const [model, setModel] = useState("gpt-3.5-turbo"); const [agentMode, setAgentMode] = useState("auto"); const [contextOptions, setContextOptions] = useState([]); const [webSearchEnabled, setWebSearchEnabled] = useState(false); const [thinkingEnabled, setThinkingEnabled] = useState(false); const [selectedUsers, setSelectedUsers] = useState([]); const [selectedPages, setSelectedPages] = useState([]); const handleUserToggle = (userId: string) => { setSelectedUsers((prev) => prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId] ); if (!contextOptions.includes("users")) { setContextOptions((prev) => [...prev, "users"]); } }; const handlePageToggle = (pageId: string) => { setSelectedPages((prev) => prev.includes(pageId) ? prev.filter((id) => id !== pageId) : [...prev, pageId] ); if (!contextOptions.includes("pages")) { setContextOptions((prev) => [...prev, "pages"]); } }; const handleRemoveUser = (userId: string) => { setSelectedUsers((prev) => prev.filter((id) => id !== userId)); }; const handleRemovePage = (pageId: string) => { setSelectedPages((prev) => prev.filter((id) => id !== pageId)); }; const handleSubmit = useCallback( (e?: React.FormEvent) => { e?.preventDefault(); if (!input.trim()) return; console.log("Submitted:", { input, model, agentMode, contextOptions, webSearchEnabled, thinkingEnabled, selectedUsers, selectedPages, }); setInput(""); }, [ input, model, agentMode, contextOptions, webSearchEnabled, thinkingEnabled, selectedUsers, selectedPages, ] ); return (

setInput(e.target.value)}
                onKeyDown={(e) => {
                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                    handleSubmit();
                  }
                }}
                placeholder="Type your message…"
                rows={4}
                value={input}
              />

Example Usage