You are given a task to integrate an existing React component in the codebase The codebase should support: - shadcn project structure - Tailwind CSS - Typescript If it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind or Typescript. Determine the default path for components and styles. If default path for components is not /components/ui, provide instructions on why it's important to create this folder Copy-paste this component to /components/ui folder: ```tsx chatgpt-prompt-input.tsx // component.tsx import * as React from "react"; import * as TooltipPrimitive from "@radix-ui/react-tooltip"; import * as PopoverPrimitive from "@radix-ui/react-popover"; import * as DialogPrimitive from "@radix-ui/react-dialog"; // --- Utility Function & Radix Primitives (Unchanged) --- type ClassValue = string | number | boolean | null | undefined; function cn(...inputs: ClassValue[]): string { return inputs.filter(Boolean).join(" "); } const TooltipProvider = TooltipPrimitive.Provider; const Tooltip = TooltipPrimitive.Root; const TooltipTrigger = TooltipPrimitive.Trigger; const TooltipContent = React.forwardRef, React.ComponentPropsWithoutRef & { showArrow?: boolean }>(({ className, sideOffset = 4, showArrow = false, ...props }, ref) => ( {props.children}{showArrow && })); TooltipContent.displayName = TooltipPrimitive.Content.displayName; const Popover = PopoverPrimitive.Root; const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )); PopoverContent.displayName = PopoverPrimitive.Content.displayName; const Dialog = DialogPrimitive.Root; const DialogPortal = DialogPrimitive.Portal; const DialogTrigger = DialogPrimitive.Trigger; const DialogOverlay = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => ( )); DialogOverlay.displayName = DialogPrimitive.Overlay.displayName; const DialogContent = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, children, ...props }, ref) => (

{children}Close

)); DialogContent.displayName = DialogPrimitive.Content.displayName; // --- SVG Icon Components --- const PlusIcon = (props: React.SVGProps) => ( ); const Settings2Icon = (props: React.SVGProps) => ( ); const SendIcon = (props: React.SVGProps) => ( ); const XIcon = (props: React.SVGProps) => ( ); const GlobeIcon = (props: React.SVGProps) => ( ); const PencilIcon = (props: React.SVGProps) => ( ); const PaintBrushIcon = (props: React.SVGProps) => ( ); const TelescopeIcon = (props: React.SVGProps) => ( ); const LightbulbIcon = (props: React.SVGProps) => ( ); // NEW: MicIcon const MicIcon = (props: React.SVGProps) => ( ); const toolsList = [ { id: 'createImage', name: 'Create an image', shortName: 'Image', icon: PaintBrushIcon }, { id: 'searchWeb', name: 'Search the web', shortName: 'Search', icon: GlobeIcon }, { id: 'writeCode', name: 'Write or code', shortName: 'Write', icon: PencilIcon }, { id: 'deepResearch', name: 'Run deep research', shortName: 'Deep Search', icon: TelescopeIcon, extra: '5 left' }, { id: 'thinkLonger', name: 'Think for longer', shortName: 'Think', icon: LightbulbIcon }, ]; // --- The Final, Self-Contained PromptBox Component --- export const PromptBox = React.forwardRef>( ({ className, ...props }, ref) => { // ... all state and handlers are unchanged ... const internalTextareaRef = React.useRef(null); const fileInputRef = React.useRef(null); const [value, setValue] = React.useState(""); const [imagePreview, setImagePreview] = React.useState(null); const [selectedTool, setSelectedTool] = React.useState(null); const [isPopoverOpen, setIsPopoverOpen] = React.useState(false); const [isImageDialogOpen, setIsImageDialogOpen] = React.useState(false); React.useImperativeHandle(ref, () => internalTextareaRef.current!, []); React.useLayoutEffect(() => { const textarea = internalTextareaRef.current; if (textarea) { textarea.style.height = "auto"; const newHeight = Math.min(textarea.scrollHeight, 200); textarea.style.height = `${newHeight}px`; } }, [value]); const handleInputChange = (e: React.ChangeEvent) => { setValue(e.target.value); if (props.onChange) props.onChange(e); }; const handlePlusClick = () => { fileInputRef.current?.click(); }; const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file && file.type.startsWith("image/")) { const reader = new FileReader(); reader.onloadend = () => { setImagePreview(reader.result as string); }; reader.readAsDataURL(file); } event.target.value = ""; }; const handleRemoveImage = (e: React.MouseEvent) => { e.stopPropagation(); setImagePreview(null); if(fileInputRef.current) { fileInputRef.current.value = ""; } }; const hasValue = value.trim().length > 0 || imagePreview; const activeTool = selectedTool ? toolsList.find(t => t.id === selectedTool) : null; const ActiveToolIcon = activeTool?.icon; return (

{imagePreview && ( )}

<div className="mt-0.5 p-1 pt-0">
          <TooltipProvider delayDuration={100}>
            <div className="flex items-center gap-2">
              <Tooltip> <TooltipTrigger asChild><button type="button" onClick={handlePlusClick} className="flex h-8 w-8 items-center justify-center rounded-full text-foreground dark:text-white transition-colors hover:bg-accent dark:hover:bg-[#515151] focus-visible:outline-none"><PlusIcon className="h-6 w-6" /><span className="sr-only">Attach image</span></button></TooltipTrigger> <TooltipContent side="top" showArrow={true}><p>Attach image</p></TooltipContent> </Tooltip>
              
              <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
                <Tooltip>
                  <TooltipTrigger asChild>
                    <PopoverTrigger asChild>
                      <button type="button" className="flex h-8 items-center gap-2 rounded-full p-2 text-sm text-foreground dark:text-white transition-colors hover:bg-accent dark:hover:bg-[#515151] focus-visible:outline-none focus-visible:ring-ring">
                        <Settings2Icon className="h-4 w-4" />
                        {!selectedTool && 'Tools'}
                      </button>
                    </PopoverTrigger>
                  </TooltipTrigger>
                  <TooltipContent side="top" showArrow={true}><p>Explore Tools</p></TooltipContent>
                </Tooltip>
                <PopoverContent side="top" align="start">
                  <div className="flex flex-col gap-1">
                    {toolsList.map(tool => ( <button key={tool.id} onClick={() => { setSelectedTool(tool.id); setIsPopoverOpen(false); }} className="flex w-full items-center gap-2 rounded-md p-2 text-left text-sm hover:bg-accent dark:hover:bg-[#515151]"> <tool.icon className="h-4 w-4" /> <span>{tool.name}</span> {tool.extra && <span className="ml-auto text-xs text-muted-foreground dark:text-gray-400">{tool.extra}</span>} </button> ))}
                  </div>
                </PopoverContent>
              </Popover>

{activeTool && (
                <>
                  <div className="h-4 w-px bg-border dark:bg-gray-600" />
                  <button onClick={() => setSelectedTool(null)} className="flex h-8 items-center gap-2 rounded-full px-2 text-sm dark:hover:bg-[#3b4045] hover:bg-accent cursor-pointer dark:text-[#99ceff] text-[#2294ff] transition-colors flex-row items-center justify-center">
                    {ActiveToolIcon && <ActiveToolIcon className="h-4 w-4" />}
                    {activeTool.shortName}
                    <XIcon className="h-4 w-4" />
                  </button>
                </>
              )}

{/* MODIFIED: Right-aligned buttons container */}
              <div className="ml-auto flex items-center gap-2">
                <Tooltip>
                  <TooltipTrigger asChild>
                    <button type="button" className="flex h-8 w-8 items-center justify-center rounded-full text-foreground dark:text-white transition-colors hover:bg-accent dark:hover:bg-[#515151] focus-visible:outline-none">
                      <MicIcon className="h-5 w-5" />
                      <span className="sr-only">Record voice</span>
                    </button>
                  </TooltipTrigger>
                  <TooltipContent side="top" </article></body></html>

Flash Apps

Ships (1)

CHAT GPT UI