import { useState, useRef, useEffect } from "react"; export default function PromptInputBar() { const [value, setValue] = useState(""); const textareaRef = useRef(null); useEffect(() => { const el = textareaRef.current; if (el) { el.style.height = "auto"; el.style.height = Math.min(el.scrollHeight, 200) + "px"; } }, [value]); return (

setValue(e.target.value)}
            placeholder="Describe the component you want to build..."
            rows={1}
            className="w-full resize-none bg-transparent px-1 py-1 text-sm text-white placeholder-zinc-500 outline-none"
          />
          
          {/* Toolbar */}
          <div className="mt-2 flex items-center justify-between">
            <div className="flex items-center gap-2">
              {/* Attach */}
              <button className="rounded-md p-1.5 text-zinc-500 transition hover:bg-zinc-800 hover:text-zinc-300">
                <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
                </svg>
              </button>
              
              {/* Model selector */}
              <button className="flex items-center gap-1.5 rounded-md border border-zinc-700 px-2 py-1 text-xs text-zinc-400 transition hover:border-zinc-600 hover:text-zinc-300">
                <span className="h-1.5 w-1.5 rounded-full bg-orange-400" />
                Claude Sonnet 4
                <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              
              {/* Char count */}
              <span className="text-[10px] tabular-nums text-zinc-600">{value.length}/4000</span>
            </div>
            
            {/* Send */}
            <button
              disabled={!value.trim()}
              className="flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-1.5 text-xs font-medium text-white transition hover:bg-orange-600 disabled:opacity-40 disabled:cursor-not-allowed"
            >
              Send
              <svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                <path strokeLinecap="round" d="M5 12h14M12 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>
        <p className="mt-2 text-center text-[10px] text-zinc-600">Cmd+Enter to send</p>
      </div>
    </div>
  );
}</article></body></html>

Prompt Input Components

Prompt Input Bar