{
  "name": "MessageTraceButton",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/MessageTraceButton.tsx",
  "chapterTag": "19 Conversation",
  "chapter": "19-conversation.html",
  "sectionId": "chat-message",
  "elName": "ChatMessage",
  "demoUrl": "https://brand.magicblocks.ai/components/19-conversation#chat-message",
  "hasLiveDemo": false,
  "description": "Per-message \"robot head\" trace button — the icon a consumer renders in a\n`<ChatMessage actions={...}>` slot to open the trace modal for that\nspecific message. Pairs with `<TraceTimeline>` (shipping in v1.45.0).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "MessageTraceButton",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "MessageTraceButtonProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { MessageTraceButton } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "count",
      "optional": true,
      "type": "number",
      "doc": "Optional event count badge (e.g. \"3 actions fired\")."
    },
    {
      "name": "noteworthy",
      "optional": true,
      "type": "boolean",
      "doc": "Render a dot indicator for noteworthy turns — block transition, an action fired, a guardrail triggered, a RAG miss. Surfaces visually even when the action set isn't expanded."
    },
    {
      "name": "label",
      "optional": true,
      "type": "ReactNode",
      "doc": "Visible label rendered to the right of the icon."
    },
    {
      "name": "tooltipLabel",
      "optional": true,
      "type": "string",
      "doc": "Tooltip / aria-label. Default `\"View trace\"`."
    },
    {
      "name": "size",
      "optional": true,
      "type": "\"xs\" | \"sm\" | \"md\"",
      "doc": "Size preset. Default `\"sm\"`."
    }
  ],
  "classesUsed": [
    "message-trace-button",
    "message-trace-button-count",
    "message-trace-button-dot",
    "message-trace-button-label"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"chat-grid\">\n          <div class=\"chat-grid-cell\">\n            <span class=\"chat-grid-label\">agent &middot; with meta</span>\n            <div class=\"chat-msg is-from-agent\">\n              <div class=\"chat-msg-avatar\" aria-hidden=\"true\">CW</div>\n              <div class=\"chat-msg-stack\">\n                <div class=\"chat-msg-meta\">\n                  <span class=\"chat-msg-name\">Charlie&rsquo;s Wines agent</span>\n                  <span class=\"chat-msg-time\">14:02</span>\n                </div>\n                <div class=\"chat-msg-bubble-wrap\">\n                  <div class=\"chat-msg-bubble\">\n                    <div class=\"chat-msg-body\">Hey Jay &mdash; looking for the secret deals?</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"chat-grid-cell\">\n            <span class=\"chat-grid-label\">user &middot; with timestamp</span>\n            <div class=\"chat-msg is-from-user\">\n              <div class=\"chat-msg-avatar\" aria-hidden=\"true\">JS</div>\n              <div class=\"chat-msg-stack\">\n                <div class=\"chat-msg-meta\">\n                  <span class=\"chat-msg-time\">14:02</span>\n                </div>\n                <div class=\"chat-msg-bubble-wrap\">\n                  <div class=\"chat-msg-bubble\">\n                    <div class=\"chat-msg-body\">Yes please.</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"chat-grid-cell\">\n            <span class=\"chat-grid-label\">agent &middot; streaming</span>\n            <div class=\"chat-msg is-from-agent is-status-streaming\">\n              <div class=\"chat-msg-avatar\" aria-hidden=\"true\">CW</div>\n              <div class=\"chat-msg-stack\">\n                <div class=\"chat-msg-bubble-wrap\">\n                  <div class=\"chat-msg-bubble\">\n                    <div class=\"chat-msg-body\">Looking that up for you</div>\n                    <span class=\"chat-msg-caret\" aria-hidden=\"true\"></span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"chat-grid-cell\">\n            <span class=\"chat-grid-label\">system &middot; pill</span>\n            <div class=\"chat-msg is-from-system\" role=\"status\">\n              <div class=\"chat-msg-system-line\">\n                Block transition &middot; Hook &rarr; Align\n                <span class=\"chat-msg-system-time\">14:03</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"chat-grid-cell\">\n            <span class=\"chat-grid-label\">agent &middot; tool call + actions</span>\n            <div class=\"chat-msg is-from-agent\">\n              <div class=\"chat-msg-avatar\" aria-hidden=\"true\">SA</div>\n              <div class=\"chat-msg-stack\">\n                <div class=\"chat-msg-bubble-wrap\">\n                  <div class=\"chat-msg-bubble\">\n                    <div class=\"chat-msg-body\">Pulled three matching offers from the regional catalogue.</div>\n                  </div>\n                  <div class=\"chat-msg-actions\" role=\"group\" aria-label=\"Message actions\">\n                    <button type=\"button\" class=\"message-trace-button is-size-sm is-noteworthy\" aria-label=\"View trace\" title=\"View trace\">\n                      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><rect x=\"2\" y=\"3\" width=\"10\" height=\"7\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\"/><circle cx=\"5\" cy=\"6.5\" r=\"0.9\" fill=\"currentColor\"/><circle cx=\"9\" cy=\"6.5\" r=\"0.9\" fill=\"currentColor\"/><path d=\"M5 9.2h4M7 3v-1.5M3 11.5l-1 1M11 11.5l1 1\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\"/></svg>\n                      <span class=\"message-trace-button-count\" aria-label=\"3 events\">3</span>\n                      <span class=\"message-trace-button-dot\" aria-hidden=\"true\"></span>\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>",
    "css": ".message-trace-button {\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 6px;\n  background: transparent;\n  border: 0;\n  border-radius: var(--r-xs);\n  cursor: pointer;\n  color: var(--fg-soft);\n  transition: color var(--dur-2) var(--ease),\n              background var(--dur-2) var(--ease);\n}\n\n.message-trace-button-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 16px;\n  padding: 0 5px;\n  height: 16px;\n  border-radius: 999px;\n  background: var(--bg-warm);\n  color: var(--fg);\n  font: 600 10.5px/1 var(--f-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n.message-trace-button-dot {\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: var(--accent);\n  border: 1.5px solid var(--bg-paper);\n}\n\n.message-trace-button-label {\n  font: 500 12px/1 var(--f-body);\n  line-height: 1.1;\n}"
  }
}