{
  "name": "TriggerAgentDialog",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TriggerAgentDialog.tsx",
  "chapterTag": "16 Pipeline & CRM",
  "chapter": "16-app-pipeline.html",
  "sectionId": "trigger-agent-dialog",
  "elName": "TriggerAgentDialog",
  "demoUrl": "https://brand.magicblocks.ai/components/16-app-pipeline#trigger-agent-dialog",
  "hasLiveDemo": false,
  "description": "Channel-aware outbound agent picker. The launcher opens a `<Modal>` listing\nthe agents that can start an outbound to this contact, each with its channel\nand a Trigger action. Composes the kit's `<Modal>` + `<Button>`.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "TriggerAgentDialog",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TriggerAgentDialogProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TriggerableAgent",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { TriggerAgentDialog } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "agents",
      "optional": false,
      "type": "TriggerableAgent[]",
      "doc": "The channel-aware outbound agents to choose from."
    },
    {
      "name": "contactName",
      "optional": true,
      "type": "ReactNode",
      "doc": "Shown in the sub-line (\"Start an outbound to <name>\")."
    },
    {
      "name": "note",
      "optional": true,
      "type": "ReactNode",
      "doc": "A quiet footer note — typically the quiet-hours caveat."
    },
    {
      "name": "trigger",
      "optional": true,
      "type": "ReactNode",
      "doc": "The launcher element. Defaults to a primary \"Trigger Agent\" button."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Dialog title. Defaults to \"Trigger an agent\"."
    },
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Controlled open state."
    },
    {
      "name": "defaultOpen",
      "optional": true,
      "type": "boolean",
      "doc": "Uncontrolled initial open state."
    },
    {
      "name": "onOpenChange",
      "optional": true,
      "type": "(open: boolean) => void",
      "doc": "Fires when the dialog opens or closes."
    }
  ],
  "classesUsed": [
    "channel-chip",
    "trigger-agent",
    "trigger-agent-av",
    "trigger-agent-desc",
    "trigger-agent-id",
    "trigger-agent-launch",
    "trigger-agent-name",
    "trigger-agent-note",
    "trigger-agent-row",
    "trigger-agent-sub"
  ],
  "examples": {
    "react": "<TriggerAgentDialog\n  contactName=\"Jay Stockwell\"\n  agents={[\n    { id: \"sms\", name: \"SMS Follow-up Agent\", description: \"Sends a text nudge.\", channel: \"sms\", initials: \"SF\", primary: true, onTrigger: fire },\n  ]}\n  note=\"SMS is allowed now (8 AM–9 PM CT).\"\n/>",
    "html": "<div style=\"display:flex; flex-direction:column; gap:16px;\">\n  <div><button type=\"button\" class=\"btn btn-primary\">Trigger Agent</button></div>\n  <div class=\"trigger-agent\" style=\"max-width:480px;\">\n    <div class=\"trigger-agent-row\">\n      <span class=\"trigger-agent-av\" data-channel=\"sms\">SF</span>\n      <div class=\"trigger-agent-id\"><div class=\"trigger-agent-name\">SMS Follow-up Agent</div><div class=\"trigger-agent-desc\">Sends a personalised text nudge and books a call.</div></div>\n      <span class=\"channel-chip\" data-channel=\"sms\">SMS</span>\n      <button type=\"button\" class=\"btn btn-primary\">Trigger</button>\n    </div>\n    <div class=\"trigger-agent-row\">\n      <span class=\"trigger-agent-av\" data-channel=\"voice\">VO</span>\n      <div class=\"trigger-agent-id\"><div class=\"trigger-agent-name\">Voice Outreach Agent</div><div class=\"trigger-agent-desc\">Places an AI call to check in and answer questions.</div></div>\n      <span class=\"channel-chip\" data-channel=\"voice\">Voice</span>\n      <button type=\"button\" class=\"btn btn-secondary\">Trigger</button>\n    </div>\n    <div class=\"trigger-agent-note\">SMS is allowed now (8 AM&ndash;9 PM CT); a Voice call placed outside 9 AM&ndash;6 PM will be queued until morning.</div>\n  </div>\n</div>",
    "css": ".channel-chip { display: inline-flex; align-items: center; gap: var(--s-1); font: 600 10px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.04em; padding: 5px 9px; border-radius: var(--r-sm); background: var(--bg-sunk); color: var(--fg-dim); }\n\n.trigger-agent { display: flex; flex-direction: column; gap: var(--s-2); }\n\n.trigger-agent-av { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); background: var(--info-soft); color: var(--info-text); font: 700 13px var(--f-display); flex: none; }\n\n.trigger-agent-desc { font: 400 12px/1.4 var(--f-body); color: var(--fg-dim); margin-top: 2px; }\n\n.trigger-agent-id { flex: 1; min-width: 0; }\n\n.trigger-agent-launch { display: contents; }\n\n.trigger-agent-name { font: 700 13.5px/1.3 var(--f-display); color: var(--fg); }\n\n.trigger-agent-note { display: flex; gap: var(--s-2); font: 500 11.5px/1.5 var(--f-body); color: var(--fg-dim); background: var(--bg-sunk); border-radius: var(--r-md); padding: var(--s-3); margin-top: var(--s-1); }\n\n.trigger-agent-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--hair); border-radius: var(--r-md); }\n\n.trigger-agent-sub { font: 400 13px/1.5 var(--f-body); color: var(--fg-soft); margin: 0 0 var(--s-3); }"
  }
}