{
  "name": "MessageField",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MessageField.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": "Snippet-or-custom message editor — a Select | Custom toggle that swaps\nbetween picking a saved snippet (`<Select>`) and typing inline text\n(token-friendly `<textarea>`). The kit's canonical \"agent says X\" field;\nbacks the `message` action-field kind (Send Message, Add Link, End Chat,\nOpt-Out, …). Value is a {@link MessageRef} (`snippetId` xor `content`).",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "MessageField",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MessageFieldProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "MessageFieldSnippet",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { MessageField } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "value",
      "optional": true,
      "type": "MessageRef",
      "doc": "Controlled value — a snippet reference or inline custom text."
    },
    {
      "name": "onChange",
      "optional": true,
      "type": "(next: MessageRef) => void",
      "doc": "Fires with the next `MessageRef` on any edit."
    },
    {
      "name": "snippets",
      "optional": true,
      "type": "MessageFieldSnippet[]",
      "doc": "Saved snippets for the \"Select\" tab."
    },
    {
      "name": "placeholder",
      "optional": true,
      "type": "string",
      "doc": "Placeholder for the custom textarea."
    },
    {
      "name": "rows",
      "optional": true,
      "type": "number",
      "doc": "Custom textarea row count. Default `4`."
    },
    {
      "name": "selectPlaceholder",
      "optional": true,
      "type": "ReactNode",
      "doc": "Label for the \"Select a snippet\" empty option."
    }
  ],
  "classesUsed": [
    "message-field",
    "message-field-tab",
    "message-field-tabs",
    "message-field-textarea",
    "tab"
  ],
  "examples": {
    "react": "<MessageField value={msg} onChange={setMsg} snippets={savedSnippets} />",
    "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": ".message-field { display: flex; flex-direction: column; gap: 8px; }\n\n.message-field-tab { font: 500 12px/1 var(--f-body); color: var(--fg-soft); background: transparent; border: 0; cursor: pointer; padding: 5px 12px; border-radius: calc(var(--r-sm) - 2px); }\n\n.message-field-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-warm); border-radius: var(--r-sm); align-self: flex-start; }\n\n.message-field-textarea { width: 100%; resize: vertical; min-height: 88px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: var(--r-sm); background: var(--bg-paper); color: var(--fg); font: 400 13px/1.5 var(--f-body); }\n\n.tab {\n  appearance: none; background: transparent; border: 0;\n  padding: 12px var(--s-4) 14px;\n  font: 500 13.5px/1 var(--f-body); color: var(--fg-dim);\n  cursor: pointer;\n  position: relative; white-space: nowrap;\n  transition: color var(--dur-2) var(--ease);\n  display: inline-flex; align-items: center; gap: var(--s-2);\n}"
  }
}