Components
AI Input With Search
A modern chat input component with a web search toggle and file upload functionality. This component features an animated search toggle, file attachment support, and smooth transitions.
Features: • Animated search toggle button • File upload support • Auto-resizing textarea • Dark mode compatibility • Keyboard shortcuts • Framer Motion animations for enhanced user experience • Mobile responsiveness
import { AIInputWithSearch } from "@/components/ui/ai-input-with-search";
export function AIInputWithSearchDemo() {
return (
<div className="space-y-8 min-w-[350px]">
<div>
<AIInputWithSearch
onSubmit={(value, withSearch) => {
console.log('Message:', value);
console.log('Search enabled:', withSearch);
}}
onFileSelect={(file) => {
console.log('Selected file:', file);
}}
/>
</div>
</div>
);
}Dependencies
Source
Published
Similar components
Explore more
Part of Kokonut UI — browse the full library on 21st.dev.