Components
AI Chat Sheet
AI Chat Sheet is a mock design for a responsive AI assistant panel. It showcases an interactive interface with quick action buttons, model selection, and a chat input, giving a realistic preview of how an AI assistant could look and behave. This component is intended for design and prototyping purposes only, and does not provide actual AI functionality.
import { AIChatSheet ,type QuickAction , type ModelOption } from "@/components/ui/ai-chat-sheet";
import {
ImageIcon,
BarChart3,
Sparkles,
FileText,
PenLine,
} from "lucide-react";
export default function DemoOne() {
const quickActions: QuickAction[] = [
{ icon: ImageIcon, label: "Create image", color: "text-emerald-600" },
{ icon: BarChart3, label: "Analyze data", color: "text-blue-600" },
{ icon: Sparkles, label: "Make a plan", color: "text-purple-600" },
{ icon: FileText, label: "Summarize text", color: "text-pink-600" },
{ icon: PenLine, label: "Help me write", color: "text-orange-600" },
];
const models: ModelOption[] = [
{ id: "claude", name: "Claude Sonnet" },
{ id: "gpt4", name: "GPT-4" },
{ id: "mistral", name: "Mistral Large" },
{ id: "llama3", name: "Llama 3" },
{ id: "gemini", name: "Gemini Pro" },
];
return (
<main className="flex min-h-screen items-center justify-center bg-background">
<AIChatSheet
username="Muhammet"
models={models}
quickActions={quickActions}
/>
</main>
)
}