AI Input Chat Window

A dynamic AI chat input component with optional mic button, bubble tail, and typing animation.

The AI Input Chat Window component is a customizable, animated input box for AI chat interfaces.
It includes auto-resizing, typing animations, bubble tail toggle, and optional mic + send actions.


Live Preview
Open in
AI Chat
GSAP
Framer Motion

Import

import { AIInputFour } from "@/components/FingUIComponents/ai-input/ai-input-04"

Default

<AIInputFour 
  onSubmit={(msg) => alert(`You typed: ${msg}`)} 
/>

Without Mic & Bubble Tail


<AIInputFour 
  showMic={false}
  showBubbleTail={false}
  title="Support Chat"
  onSubmit={(msg) => console.log("Support:", msg)}
/>

Custom placeholder

<AIInputFour 
  placeholder="Ask me anything..."
  title="AI Assistant"
  onSubmit={(msg) => console.log("Assistant received:", msg)}
/>