{
  "name": "JourneyBlockPicker",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/JourneyBlockPicker.tsx",
  "chapterTag": "19 Conversation",
  "chapter": "19-conversation.html",
  "sectionId": "takeover-console",
  "elName": "TakeoverConsole",
  "demoUrl": "https://brand.magicblocks.ai/components/19-conversation#takeover-console",
  "hasLiveDemo": false,
  "description": "Hand-back target picker for `<TakeoverConsole>` — when the operator is done,\nthey choose where the AI resumes: pick up where it paused, jump to a specific\nJourney Block, or end the session with no further automation. A thin compose\nover the kit's `<DropdownMenu>` (all popover positioning, keyboard nav, and\nfocus management live there); this only shapes the trigger and groups the\noptions, rendering `end` as a destructive item below a divider.",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "JourneyBlockPicker",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "JourneyBlockPickerProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "JourneyBlockOption",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { JourneyBlockPicker } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "options",
      "optional": false,
      "type": "JourneyBlockOption[]",
      "doc": "Hand-back targets. Typically one `resume`, several `block`s, one `end`."
    },
    {
      "name": "onSelect",
      "optional": true,
      "type": "(id: string) => void",
      "doc": "Fires with the chosen option id."
    },
    {
      "name": "triggerLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Trigger button label. Default `\"Hand back\"`."
    },
    {
      "name": "align",
      "optional": true,
      "type": "\"start\" | \"end\"",
      "doc": "Menu alignment relative to the trigger. Default `\"end\"`."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": "Extra class on the trigger button."
    }
  ],
  "classesUsed": [
    "jbp-caret",
    "jbp-detail",
    "jbp-item",
    "jbp-label",
    "jbp-trigger"
  ],
  "examples": {
    "react": "<JourneyBlockPicker\n  triggerLabel=\"Hand back\"\n  options={[\n    { id: \"resume\", kind: \"resume\", label: \"Resume where the AI paused\", detail: \"Recommended\" },\n    { id: \"meeting\", kind: \"block\", label: \"Book a meeting\" },\n    { id: \"nurture\", kind: \"block\", label: \"Post-demo nurture\" },\n    { id: \"end\", kind: \"end\", label: \"End — no further automation\" },\n  ]}\n  onSelect={(id) => handBack(id)}\n/>",
    "html": "<div class=\"takeover-console\" data-state=\"human_in_control\">\n          <div class=\"tc-main\">\n            <div class=\"tc-controlbar\">\n              <span class=\"tc-state\"><span class=\"tc-state-dot\" aria-hidden=\"true\"></span> You're in control · AI paused</span>\n              <span class=\"tc-channel\"><span class=\"channel-chip\" data-channel=\"sms\">SMS</span><span class=\"tc-channel-id\">+1 (415) 555-0132</span></span>\n              <div class=\"tc-controlbar-action\">\n                <button type=\"button\" class=\"jbp-trigger\">Hand back <span class=\"jbp-caret\" aria-hidden=\"true\"></span></button>\n              </div>\n            </div>\n            <div class=\"tc-transcript\">\n              <div class=\"chat-transcript\">\n                <div class=\"chat-transcript-scroll\" role=\"log\">\n                  <div class=\"chat-transcript-list\">\n                    <div class=\"chat-msg is-from-user\">\n                      <div class=\"chat-msg-avatar\" aria-hidden=\"true\">MR</div>\n                      <div class=\"chat-msg-stack\">\n                        <div class=\"chat-msg-meta\"><span class=\"chat-msg-name\">Marcus</span><span class=\"chat-msg-time\">2:31</span></div>\n                        <div class=\"chat-msg-bubble-wrap\"><div class=\"chat-msg-bubble\"><div class=\"chat-msg-body\">This still isn't working and I've tried twice now.</div></div></div>\n                      </div>\n                    </div>\n                    <div class=\"chat-msg is-from-agent\">\n                      <div class=\"chat-msg-avatar\" aria-hidden=\"true\">S</div>\n                      <div class=\"chat-msg-stack\">\n                        <div class=\"chat-msg-meta\"><span class=\"chat-msg-name\">Sage</span><span class=\"chat-msg-time\">2:31</span></div>\n                        <div class=\"chat-msg-bubble-wrap\"><div class=\"chat-msg-bubble\"><div class=\"chat-msg-body\">I'm sorry about that — connecting you with a teammate now.</div></div></div>\n                      </div>\n                    </div>\n                    <div class=\"chat-msg is-from-system\" role=\"status\">\n                      <div class=\"chat-msg-system-line\">You took over · AI paused<span class=\"chat-msg-system-time\">2:32</span></div>\n                    </div>\n                    <div class=\"chat-msg is-from-operator\">\n                      <div class=\"chat-msg-avatar\" aria-hidden=\"true\">JS</div>\n                      <div class=\"chat-msg-stack\">\n                        <div class=\"chat-msg-meta\"><span class=\"chat-msg-name\">You</span><span class=\"chat-msg-human\">human</span><span class=\"chat-msg-time\">2:32</span></div>\n                        <div class=\"chat-msg-bubble-wrap\"><div class=\"chat-msg-bubble\"><div class=\"chat-msg-body\">Hi Marcus — I'll sort this out personally. What do you see on the final step?</div></div></div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"chat-transcript-footer\">\n                  <form class=\"chat-composer\">\n                    <div class=\"chat-composer-row\">\n                      <textarea class=\"chat-composer-input\" rows=\"1\" placeholder=\"Reply as Acme…\" aria-label=\"Message\"></textarea>\n                      <div class=\"chat-composer-actions\"><button type=\"button\" class=\"tc-sage-insert\">Insert Sage draft</button></div>\n                      <button type=\"submit\" class=\"chat-composer-send\" aria-label=\"Send as human\"><span class=\"chat-composer-send-label\">Send as human</span></button>\n                    </div>\n                    <div class=\"chat-composer-helper\"><span class=\"tc-guard\"><span class=\"tc-guard-dot\" aria-hidden=\"true\"></span> Guardrails off · sending as a human</span></div>\n                  </form>\n                </div>\n              </div>\n            </div>\n          </div>\n          <aside class=\"tc-aside\" aria-label=\"Operator context\">\n            <div class=\"tc-aside-head\">\n              <span class=\"chat-msg-name\">Marcus Reid</span>\n              <span class=\"tc-channel-id\">SMS · negative sentiment</span>\n            </div>\n            <div class=\"tc-sage\">\n              <div class=\"tc-aside-k\">Sage suggests</div>\n              <div class=\"tc-sage-text\">Offer the 14-day trial extension and confirm their renewal date before they churn.</div>\n              <button type=\"button\" class=\"tc-sage-insert\">Insert into reply</button>\n            </div>\n            <div class=\"tc-facts\">\n              <div class=\"tc-aside-k\">Key facts so far</div>\n              <div class=\"key-fact-grid\" data-layout=\"list\">\n                <div class=\"kfg-row\"><span class=\"kfg-key\">Plan</span><span class=\"kfg-val\">Scale (5 seats)</span></div>\n                <div class=\"kfg-row\"><span class=\"kfg-key\">Renewal</span><span class=\"kfg-val\">Apr 30</span></div>\n              </div>\n            </div>\n            <div class=\"tc-journey\">\n              <div class=\"tc-aside-k\">Journey position</div>\n              <div class=\"tc-journey-v\">Post-demo nurture · step 2</div>\n            </div>\n          </aside>\n        </div>",
    "css": ".jbp-caret { width: 7px; height: 7px; flex: none; position: relative; color: var(--fg-faint); }\n\n.jbp-detail { font: 400 11.5px/1.3 var(--f-body); color: var(--fg-faint); }\n\n.jbp-item { display: flex; flex-direction: column; gap: 2px; text-align: left; }\n\n.jbp-label { font: 500 13px/1.3 var(--f-body); color: inherit; }\n\n.jbp-trigger {\n  display: inline-flex; align-items: center; gap: 7px;\n  font: 600 12.5px/1 var(--f-body); color: var(--fg);\n  background: var(--bg-paper); border: 1px solid var(--hair);\n  border-radius: var(--r-md); padding: 8px 13px; cursor: pointer;\n  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);\n}"
  }
}