{
  "name": "ActionConfigPanel",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ActionConfigPanel.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "actions",
  "elName": "Action wizard &mdash; <em style=\"font-family:var(--f-serif); font-weight:400;\">Step 1 (Action + config)</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#actions",
  "hasLiveDemo": false,
  "description": "Renders the config surface for an action, driven by the registry:\na custom `Panel` if the type declares one, else its declarative `fields`\nvia `<ActionField>`, else the type's description (no-config actions).\nThis is the one brick the wizard shows under the action picker — adding a\nnew action type needs no change here.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ActionConfigPanel",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "ActionConfigPanelProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { ActionConfigPanel } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "action",
      "optional": false,
      "type": "Action",
      "doc": "The action being configured."
    },
    {
      "name": "onChange",
      "optional": false,
      "type": "(next: Action) => void",
      "doc": "Fires with the next action on any field edit."
    },
    {
      "name": "registry",
      "optional": true,
      "type": "ActionRegistry",
      "doc": "Override the action registry (defaults to the kit's)."
    },
    {
      "name": "context",
      "optional": true,
      "type": "ActionConfigContext",
      "doc": "Workspace data the fields/panels need (snippets, calendar source fields, …)."
    }
  ],
  "classesUsed": [
    "action-config",
    "action-config-desc",
    "action-config-empty"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"action-wizard\" role=\"region\" aria-label=\"Action wizard\">\n\n  <!-- Actions list mini-column → <ActionList> -->\n  <aside class=\"action-list\" aria-label=\"Actions list\">\n    <div class=\"action-list-head\">\n      <span>Actions <span class=\"action-list-count\">2</span></span>\n      <button type=\"button\" class=\"action-list-new\" aria-label=\"Add action\">+</button>\n    </div>\n    <button type=\"button\" class=\"action-row has-meta is-active\">\n      <span class=\"action-row-chip\">Send message</span>\n      <span class=\"action-row-text\">\n        <span class=\"action-row-name\">Welcome &amp; qualify</span>\n        <span class=\"action-row-meta\">Fires every turn</span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"action-row has-meta\">\n      <span class=\"action-row-chip\">Switch journey</span>\n      <span class=\"action-row-text\">\n        <span class=\"action-row-name\">Route to booking</span>\n        <span class=\"action-row-meta\">2 conditions &middot; any</span>\n      </span>\n    </button>\n    <button type=\"button\" class=\"action-list-add\">+ New Action</button>\n  </aside>\n\n  <!-- Wizard pane → <ActionWizard> -->\n  <div class=\"wizard-pane\">\n    <header class=\"wizard-head\">\n      <nav class=\"wizard-steps\" role=\"tablist\">\n        <button type=\"button\" class=\"wizard-step is-active\" role=\"tab\" aria-selected=\"true\">\n          <span class=\"wizard-step-num\">1</span> Action\n        </button>\n        <button type=\"button\" class=\"wizard-step\" role=\"tab\">\n          <span class=\"wizard-step-num\">2</span> Conditions\n          <span class=\"wizard-step-count\">1</span>\n        </button>\n        <button type=\"button\" class=\"wizard-step\" role=\"tab\">\n          <span class=\"wizard-step-num\">3</span> Goal\n        </button>\n      </nav>\n      <span class=\"ab-only-once\">\n        Only match once\n        <button type=\"button\" class=\"ab-only-once-toggle\" aria-pressed=\"true\" aria-label=\"Only match once\"></button>\n      </span>\n    </header>\n\n    <div class=\"wizard-body\">\n\n      <div class=\"ab-form-title-row\" style=\"margin-bottom: var(--s-3);\">\n        <h2 style=\"font-size: 14px;\">Select an action</h2>\n      </div>\n\n      <!-- Action picker → <ActionPicker> (registry-driven) -->\n      <div class=\"action-picker-wrap\">\n        <div class=\"action-picker\" role=\"radiogroup\" aria-label=\"Action type\">\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\" aria-checked=\"false\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 11.5 L11.5 3.5\"/><path d=\"M11 3 L13 1 L14 2 L12 4 Z\" fill=\"currentColor\"/><path d=\"M3 4 L3.4 5 L4.4 5.4 L3.4 5.8 L3 6.8 L2.6 5.8 L1.6 5.4 L2.6 5 Z\"/></svg></span>\n            <span class=\"action-tile-name\">Auto</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 5 H9 L11 3 L11 7 L9 5\"/><path d=\"M12 9 H5 L3 7 L3 11 L5 9\"/></svg></span>\n            <span class=\"action-tile-name\">Switch Journey</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3.5 1.5 V12.5\"/><path d=\"M3.5 2.5 H10.5 L8.8 5 L10.5 7.5 H3.5 Z\"/></svg></span>\n            <span class=\"action-tile-name\">Change stage</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 3 H12 V11 H5 L2 7 Z\"/><circle cx=\"6.3\" cy=\"7\" r=\"0.8\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Change segment</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><line x1=\"4\" y1=\"6\" x2=\"10\" y2=\"6\"/><line x1=\"4\" y1=\"8\" x2=\"8\" y2=\"8\"/></svg></span>\n            <span class=\"action-tile-name\">End Chat</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-selected\" role=\"radio\" aria-checked=\"true\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><circle cx=\"5\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"7\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"9\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Send Message</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"2.5\" width=\"8\" height=\"10\" rx=\"1\"/><path d=\"M5 2.5 V1.5 H9 V2.5\"/><path d=\"M5 6 L6 7 L8.5 4.5\"/><line x1=\"5\" y1=\"9.5\" x2=\"9\" y2=\"9.5\"/></svg></span>\n            <span class=\"action-tile-name\">Run Task</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2.5\" y=\"4\" width=\"9\" height=\"6\" rx=\"1.5\"/><rect x=\"2.5\" y=\"4\" width=\"9\" height=\"6\" rx=\"1.5\" fill=\"currentColor\" fill-opacity=\"0.15\"/></svg></span>\n            <span class=\"action-tile-name\">Add Buttons</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2.5\" width=\"10\" height=\"9\" rx=\"1.5\"/><line x1=\"4\" y1=\"5.5\" x2=\"10\" y2=\"5.5\"/><line x1=\"4\" y1=\"7.5\" x2=\"8\" y2=\"7.5\"/><rect x=\"4\" y=\"9\" width=\"3\" height=\"1.5\" rx=\"0.3\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Add Forms</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"3.5\" width=\"10\" height=\"8\" rx=\"1.3\"/><line x1=\"2\" y1=\"6\" x2=\"12\" y2=\"6\"/><line x1=\"4.5\" y1=\"2.5\" x2=\"4.5\" y2=\"4.5\"/><line x1=\"9.5\" y1=\"2.5\" x2=\"9.5\" y2=\"4.5\"/><rect x=\"5\" y=\"8\" width=\"2\" height=\"2\" fill=\"currentColor\"/></svg></span>\n            <span class=\"action-tile-name\">Add Calendar</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M6 8 L8 6 M5 5 H4 C2.5 5 1.5 6 1.5 7.5 S2.5 10 4 10 H5\"/><path d=\"M8 9 H10 C11.5 9 12.5 8 12.5 6.5 S11.5 4 10 4 H9\"/></svg></span>\n            <span class=\"action-tile-name\">Add Link</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"7\" cy=\"7\" r=\"5\"/><line x1=\"3.5\" y1=\"3.5\" x2=\"10.5\" y2=\"10.5\"/></svg></span>\n            <span class=\"action-tile-name\">Opt-Out</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile is-disabled\" role=\"radio\" disabled>\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 4 L2 7 L5 10\"/><path d=\"M9 4 L12 7 L9 10\"/></svg></span>\n            <span class=\"action-tile-name\">Embed</span>\n            <span class=\"action-tile-meta\">Website only</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5\" cy=\"5\" r=\"2\"/><path d=\"M2 11 C2 9 3.3 8 5 8 S8 9 8 11\"/><path d=\"M9 5 H12.5 M9 7 H12.5 M9 9 H11.5\"/></svg></span>\n            <span class=\"action-tile-name\">Human Takeover</span>\n          </button>\n\n          <button type=\"button\" class=\"action-tile\" role=\"radio\">\n            <span class=\"action-tile-glyph\"><svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"8\" height=\"8\" rx=\"1\"/><line x1=\"5\" y1=\"5\" x2=\"9\" y2=\"9\"/><line x1=\"9\" y1=\"5\" x2=\"5\" y2=\"9\"/></svg></span>\n            <span class=\"action-tile-name\">Do not respond</span>\n          </button>\n\n        </div>\n\n        <div class=\"action-detail\">\n          <span class=\"action-detail-glyph\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M2 4 H12 V10 H7 L4 12 V10 H2 Z\"/><circle cx=\"5\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"7\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/><circle cx=\"9\" cy=\"7\" r=\"0.6\" fill=\"currentColor\"/></svg>\n          </span>\n          <div class=\"action-detail-body\">\n            <span class=\"action-detail-title\">Send Message</span>\n            <span class=\"action-detail-sub\">Send a message to the end user &mdash; a saved snippet or custom text.</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Config panel for the selected action → <ActionConfigPanel> → <MessageField> -->\n      <div class=\"action-config\">\n        <div class=\"field-row\">\n          <label class=\"field-label\">Message</label>\n          <div class=\"message-field\">\n            <div class=\"message-field-tabs\" role=\"tablist\" aria-label=\"Message source\">\n              <button type=\"button\" class=\"message-field-tab\" role=\"tab\" aria-selected=\"false\">Select</button>\n              <button type=\"button\" class=\"message-field-tab is-active\" role=\"tab\" aria-selected=\"true\">Custom</button>\n            </div>\n            <textarea class=\"message-field-textarea\" rows=\"4\" placeholder=\"Type a message&hellip;\">Thanks! I&rsquo;ll send those secret deals your way now. 🍷</textarea>\n          </div>\n        </div>\n      </div>\n\n    </div>\n\n    <footer class=\"wizard-foot\">\n      <button type=\"button\" class=\"ab-h-pill\" disabled style=\"opacity: 0.4;\">&lsaquo; Back</button>\n      <div class=\"wizard-foot-pages\" aria-hidden=\"true\">\n        <span class=\"wizard-foot-page is-active\"></span>\n        <span class=\"wizard-foot-page\"></span>\n        <span class=\"wizard-foot-page\"></span>\n      </div>\n      <button type=\"button\" class=\"ab-h-pill is-primary\">Continue &rsaquo;</button>\n    </footer>\n\n  </div>\n\n</div>",
    "css": ".action-config { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.action-config-desc { font: 400 13px/1.5 var(--f-body); color: var(--fg-dim); margin: 0; }\n\n.action-config-empty { padding: var(--s-2) 0; }"
  }
}