AI Input With Search

A customizable AI input box with support for file upload, search toggle, and submit handling.

The AIInputSecond component provides an interactive input box that supports:

  • Auto-resizing textarea
  • File uploads
  • Search toggle with animations
  • Submit handling (press Enter or click Send button)

Live Preview
Open in
GSAP
Framer Motion

Example Usage

"use client";

import { AIInputSecond } from "@/components/ai-input/AIInputSecond";

export default function ExamplePage() {
  const handleSubmit = (text: string, file?: File) => {
    console.log("Submitted text:", text);
    if (file) {
      console.log("Submitted file:", file.name);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-black">
      <div className="w-full max-w-lg">
        <AIInputSecond 
          placeholder="Ask me anything..." 
          onSubmit={handleSubmit}
        />
      </div>
    </div>
  );
}