import * as React from "react"; import { CheckCircle2, MessageSquareText, SquarePen } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Typography } from "@/components/ui/Typography"; const { Small: TypographySmall, Large: TypographyLarge } = Typography; import { SidebarAppShellSupportAgentContextDrawerFour } from "@/registry/sidebar-app-shell-support-agent-context-drawer-four/sidebar-app-shell-support-agent-context-drawer-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof SidebarAppShellSupportAgentContextDrawerFour >; type SidebarAppShellSupportAgentContextDrawerFourQueue = NonNullable< ComponentProps["queues"] >[number]; type SidebarAppShellSupportAgentContextDrawerFourConversation = NonNullable< ComponentProps["conversations"] >[number]; type SidebarAppShellSupportAgentContextDrawerFourDrawerSection = NonNullable< ComponentProps["drawerSections"] >[number]; type SidebarAppShellSupportAgentContextDrawerFourMacro = NonNullable< ComponentProps["macros"] >[number]; const queues: SidebarAppShellSupportAgentContextDrawerFourQueue[] = [ { id: "my-cases", label: "My cases", count: 12 }, { id: "team-queues", label: "Team queues", count: 34 }, ]; const conversations: SidebarAppShellSupportAgentContextDrawerFourConversation[] = [ { id: "case-001", queueId: "my-cases", customer: "Orbit Analytics", subject: "Automation macros not syncing in sandbox", lastMessagePreview: "Thanks for confirming! We'll wait for the cron job to finish before closing.", avatarFallback: "OA", priority: "urgent", slaMinutesRemaining: 12, updatedAtLabel: "2m ago", unreadCount: 2, tags: [ { id: "plan", label: "Enterprise" }, { id: "topic", label: "Automation", variant: "secondary" }, ], }, { id: "case-002", queueId: "my-cases", customer: "Brightwave", subject: "Macro undo not visible to junior agents", lastMessagePreview: "We can see the undo toast on desktop but not on mobile.", avatarFallback: "BW", priority: "high", slaMinutesRemaining: 45, updatedAtLabel: "14m ago", tags: [{ id: "mobile", label: "Mobile", variant: "outline" }], }, { id: "case-003", queueId: "team-queues", customer: "Northwind Partners", subject: "Need transcript of AI call summary", lastMessagePreview: "Could you email the call summary? Legal needs archive copies.", avatarFallback: "NP", priority: "normal", slaMinutesRemaining: 90, updatedAtLabel: "25m ago", }, ]; const drawerSections: SidebarAppShellSupportAgentContextDrawerFourDrawerSection[] = [ { id: "profile", title: "Customer profile", description: "Workspace attributes and subscription context", items: [ { id: "plan", label: "Plan", value: "Enterprise" }, { id: "users", label: "Seats", value: "148", helper: "Agents enabled for macros", }, { id: "renewal", label: "Renewal", value: "Feb 18", tone: "warning" }, ], }, { id: "history", title: "Previous conversations", items: [ { id: "case-139", label: "Case #139", value: "Resolved", helper: "Macro permissions", }, { id: "case-128", label: "Case #128", value: "Resolved", helper: "Undo toast visibility", }, ], }, { id: "knowledge", title: "Knowledge articles", items: [ { id: "article-undo", label: "Undo macros basics", value: "KB-142" }, { id: "article-sync", label: "Sandbox sync checklist", value: "KB-067", tone: "positive", }, ], }, ]; const macros: SidebarAppShellSupportAgentContextDrawerFourMacro[] = [ { id: "macro-sandbox", label: "Confirm sandbox sync", description: "Guides customers through macro library sync in under 5 minutes.", shortcut: "M 1", }, { id: "macro-undo", label: "Resend undo instructions", description: "Shares undo toast troubleshooting steps with mobile agents.", shortcut: "M 2", }, { id: "macro-escalate", label: "Escalate to solutions", description: "Tag escalations and notify solutions team in Slack.", shortcut: "M 3", }, ]; export function SidebarAppShellSupportAgentContextDrawerFourDemo() { const [activeConversationId, setActiveConversationId] = React.useState( conversations[0].id, ); return ( setActiveConversationId(conversation.id) } drawerSections={drawerSections} macros={macros} headerStatusLabel="4 cases overdue" headerStatusVariant="destructive" floatingActions={[ { id: "reply", label: "Reply", icon: , }, { id: "note", label: "Internal note", icon: , variant: "outline", }, { id: "resolve", label: "Resolve", icon: , variant: "default", }, ]} onMacroApply={(macro) => console.log("Applied macro", macro.id)} > Agent performance Track response time, macros applied, and CSAT over the last 7 days. SLA Macros CSAT SLA response time averaged 11 minutes this week with 2 preventable misses.

Agents applied 86 macros with a 94% undo completion rate.

CSAT held steady at 4.7/5 with automation-related cases scoring higher than average.

); } export interface MetricProps { title: string; value: string; helper: string; } function Metric({ title, value, helper }: MetricProps) { return (

{title} {value} {helper}

); } export default SidebarAppShellSupportAgentContextDrawerFourDemo;

Simple