Components
Loading preview...
A versatile React component for creating AI chat interfaces. Supports text input and file attachments (images, videos, audio, PDF, etc.) with interactive previews. Includes integrated send and stop buttons, automatic textarea resizing, and optional suggested actions for new conversations. Built using modern hooks and Tailwind CSS for easy styling
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/multimodal-ai-chat-input'use client';
import React, { useState, useCallback } from 'react';
import { PureMultimodalInput } from "@/components/ui/multimodal-ai-chat-input"
type VisibilityType = 'public' | 'private' | 'unlisted' | string;
interface Attachment {
url: string;
name: string;
contentType: string;
size: number;
}
interface UIMessage {
id: string;
content: string;
role: string;
attachments?: Attachment[];
}
export function PureMultimodalInputOnlyDisplay() {
// Minimal state and handlers required by PureMultimodalInput
const [attachments, setAttachments] = useState<Attachment[]>([]);
const [isGenerating, setIsGenerating] = useState(false); // Control the stop button visibility
const [chatId] = useState('demo-input-only'); // Dummy chat ID
const handleSendMessage = useCallback(({ input, attachments }: { input: string; attachments: Attachment[] }) => {
console.log("--- Simulating Sending Message ---");
console.log("Input:", input);
console.log("Attachments:", attachments);
console.log("---------------------------------");
setIsGenerating(true);
setTimeout(() => {
setIsGenerating(false);
// In a real app, you'd clear attachments after successful send
// setAttachments([]);
}, 2000); // Simulate a 2 second response time
}, []);
const handleStopGenerating = useCallback(() => {
console.log("Stop button clicked (simulated).");
setIsGenerating(false);
}, []);
// Other necessary props for PureMultimodalInput
const canSend = true; // Always allow sending in this minimal demo
const messages: UIMessage[] = []; // Provide an empty array as required by type, though not used for context here
const selectedVisibilityType: VisibilityType = 'private'; // Dummy visibility
return (
// Added a simple container div for basic centering/padding if needed
// but the focus is on the input component itself
<div className="w-full max-w-3xl mx-auto p-4">
<PureMultimodalInput
chatId={chatId}
messages={messages} // Empty array
attachments={attachments}
setAttachments={setAttachments}
onSendMessage={handleSendMessage}
onStopGenerating={handleStopGenerating}
isGenerating={isGenerating}
canSend={canSend} // True
selectedVisibilityType={selectedVisibilityType} // 'private'
/>
</div>
);
}