{
  "name": "ButtonsActionConfig",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/ButtonsActionConfig.tsx",
  "chapterTag": "18 Agent Builder",
  "chapter": "18-agent-builder.html",
  "sectionId": "actions",
  "elName": "Add Buttons, Add Forms &amp; <em style=\"font-family:var(--f-serif); font-weight:400;\">declarative actions</em>",
  "demoUrl": "https://brand.magicblocks.ai/components/18-agent-builder#actions",
  "hasLiveDemo": false,
  "description": "Custom config panel for **Add Buttons** — quick-reply buttons shown before\nand after a message. Composes two `<MessageField>`s (before / after) and an\ninline button-label repeater (`<Input>` rows + add/remove). Each button's\nown triggered action (v1 `actionButton.action`) is a Phase-3 concern; the\n`action` slot is carried untouched.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "ButtonsActionConfig",
      "isPrincipal": true,
      "isType": false
    }
  ],
  "importStatement": "import { ButtonsActionConfig } from \"@magicblocksai/ui\";",
  "props": [],
  "classesUsed": [
    "action-button-item",
    "action-button-row",
    "action-button-rows",
    "action-button-subaction",
    "action-config-stack",
    "field-help",
    "field-label",
    "field-row"
  ],
  "examples": {
    "react": null,
    "html": null,
    "css": ".action-button-item { display: flex; flex-direction: column; gap: 8px; }\n\n.action-button-row { display: flex; align-items: center; gap: var(--s-2); }\n\n.action-button-rows { display: flex; flex-direction: column; gap: 8px; }\n\n.action-button-subaction { padding-left: var(--s-3); border-left: 2px solid var(--hair); }\n\n.action-config-stack { display: flex; flex-direction: column; gap: var(--s-4); }\n\n.field-help { font: 400 11.5px/1.4 var(--f-body); color: var(--fg-faint); margin: 0; }\n\n.field-label { font: 600 12.5px/1.3 var(--f-body); color: var(--fg); }\n\n.field-row { display: flex; flex-direction: column; gap: 6px; }"
  }
}