A chat-style AI prompt composer with agent and model chips, a plus-button attachment menu, a settings dropdown, and an animated gradient wave that plays when a message is sent.
"use client";
import {
AIInput,
type AIInputMenuItem,
type PromptSettingGroup,
} from "@/components/ui/ai-input";
import { Archive, Camera, LayoutGrid, Paperclip, Plug } from "lucide-react";
const settingGroups: PromptSettingGroup[] = [
{
id: "model",
label: "Model",
display: "featured",
options: [
{ value: "claude-5", label: "Claude 5", description: "Most capable" },
{ value: "claude-5-fast", label: "Claude 5 Fast", description: "Faster" },
],
},
{
id: "effort",
label: "Effort",
display: "submenu",
options: [
{ value: "high", label: "High" },
{ value: "medium", label: "Medium" },
{ value: "low", label: "Low" },
],
},
];
const menuItems: AIInputMenuItem[] = [
{
value: "add-files",
label: "Add files or photos",
icon: Paperclip,
shortcut: "⌘U",
},
{ value: "screenshot", label: "Take a screenshot", icon: Camera },
{
value: "add-to-project",
label: "Add to project",
icon: Archive,
items: [
{ value: "new-project", label: "New project" },
{ value: "existing-project", label: "Existing project" },
],
},
{ value: "sep-1", type: "separator" },
{
value: "skills",
label: "Skills",
icon: LayoutGrid,
items: [
{ value: "skill-creator", label: "skill-creator" },
{ value: "manage-skills", label: "Manage skills" },
{ value: "browse-skills", label: "Browse skills" },
],
},
{ value: "add-connector", label: "Add connector", icon: Plug },
];
export default function AIInputPreview() {
return (
<div className="mx-auto w-full max-w-2xl px-4 py-10">
<AIInput
menuItems={menuItems}
settingGroups={settingGroups}
onMenuSelect={(value) => console.log("menu:", value)}
onSettingsChange={(settings) => console.log("settings:", settings)}
onSend={(message, meta) => console.log(message, meta)}
placeholder="Ask for follow-up changes"
/>
</div>
);
}