Components
A sophisticated interface for text and voice communication, featuring an auto-resizing textarea, file attachment capabilities, and a visual voice recording mode with animated waveform display. The component supports theme-aware styling, accessibility features like reduced motion preferences, and smooth animations that enhance user interaction without compromising performance. It's particularly well-suited for AI chat applications, voice assistants, messaging platforms, and any interface requiring rich multimodal input with professional visual feedback.
Loading preview...
"use client";
import { AIVoiceInput } from "@/components/ui/ai-chat-voice-input";
export default function AIVoiceInputDemo() {
const handleSend = (message: string) => {
console.log("Message sent:", message);
};
const handleVoiceStart = () => {
console.log("Voice recording started");
};
const handleVoiceStop = (duration: number) => {
console.log("Voice recording stopped. Duration:", duration, "seconds");
};
const handleFileAttach = () => {
console.log("File attach clicked");
};
return (
<div className="min-h-screen bg-background p-8">
<div className="max-w-4xl mx-auto space-y-8">
{/* Header */}
<div className="text-center space-y-4">
<h1 className="text-4xl font-bold text-foreground">
AI Voice Input
</h1>
<p className="text-lg text-muted-foreground">
Chat input with voice overlay and waveform animation
</p>
</div>
{/* Demo */}
<div className="space-y-6">
<AIVoiceInput
placeholder="Send message..."
onSend={handleSend}
onVoiceStart={handleVoiceStart}
onVoiceStop={handleVoiceStop}
onFileAttach={handleFileAttach}
/>
</div>
</div>
</div>
);
}