{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "agent-speaker-button",
  "type": "registry:ui",
  "description": "Toggle button for muting/unmuting agent audio output",
  "files": [
    {
      "path": "components/ui/AgentSpeakerButton.tsx",
      "content": "import { useAgentPlayer } from \"@deepgram/react\";\nimport { Toggle } from \"@/components/ui/toggle\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface AgentSpeakerButtonProps {\n  className?: string;\n  activeLabel?: React.ReactNode;\n  mutedLabel?: React.ReactNode;\n  onClick?: () => void;\n}\n\nconst SpeakerIcon = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M11 5 6 9H2v6h4l5 4V5Z\" />\n    <path d=\"M15.54 8.46a5 5 0 0 1 0 7.07\" />\n    <path d=\"M19.07 4.93a10 10 0 0 1 0 14.14\" />\n  </svg>\n);\nconst SpeakerOffIcon = () => (\n  <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"M11 5 6 9H2v6h4l5 4V5Z\" />\n    <line x1=\"22\" x2=\"16\" y1=\"9\" y2=\"15\" />\n    <line x1=\"16\" x2=\"22\" y1=\"9\" y2=\"15\" />\n  </svg>\n);\n\nexport function AgentSpeakerButton({\n  className,\n  activeLabel = <SpeakerIcon />,\n  mutedLabel  = <SpeakerOffIcon />,\n  onClick,\n}: AgentSpeakerButtonProps) {\n  const { outputMuted, toggle, enabled } = useAgentPlayer();\n\n  if (!enabled) return null;\n\n  const label = outputMuted ? mutedLabel : activeLabel;\n\n  return (\n    <Toggle\n      pressed={!outputMuted}\n      onPressedChange={() => { toggle(); onClick?.(); }}\n      aria-label={typeof label === \"string\" ? label : \"Speaker\"}\n      data-agent-speaker-button\n      data-state={outputMuted ? \"muted\" : \"active\"}\n      className={cn(\n        \"dg:h-10 dg:w-10 dg:shrink-0 dg:rounded-[calc(var(--radius)-6px)] dg:border dg:border-border dg:bg-card dg:text-foreground\",\n        \"dg:hover:bg-accent dg:hover:text-accent-foreground\",\n        \"dg:data-[state=on]:bg-primary dg:data-[state=on]:text-primary-foreground dg:data-[state=on]:border-primary\",\n        \"dg:data-[state=on]:hover:bg-[var(--primary-hover)]\",\n        \"dg:data-[state=off]:text-muted-foreground\",\n        className\n      )}\n    >\n      {label}\n    </Toggle>\n  );\n}\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "dependencies": [
    "@deepgram/react"
  ],
  "registryDependencies": [
    "utils",
    "toggle"
  ]
}