{
  "name": "LiveChatTester",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/LiveChatTester.tsx",
  "chapterTag": "19 Conversation",
  "chapter": "19-conversation.html",
  "sectionId": "live-chat-tester",
  "elName": "LiveChatTester",
  "demoUrl": "https://brand.magicblocks.ai/components/19-conversation#live-chat-tester",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "LiveChatTester",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "LiveChatTesterProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "LiveChatStatus",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { LiveChatTester } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Stack of `<ChatMessage>` nodes for the transcript body."
    },
    {
      "name": "agentName",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent display name (header)."
    },
    {
      "name": "agentVersion",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent version pill — `\"v15\"`, `\"draft\"`."
    },
    {
      "name": "agentAvatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent avatar slot (header)."
    },
    {
      "name": "status",
      "optional": true,
      "type": "LiveChatStatus",
      "doc": "Status drives the small dot beside the agent name."
    },
    {
      "name": "statusLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the status label text."
    },
    {
      "name": "agentTyping",
      "optional": true,
      "type": "boolean",
      "doc": "Show the typing indicator at the end of the transcript."
    },
    {
      "name": "emptyState",
      "optional": true,
      "type": "ReactNode",
      "doc": "Empty-state node for an empty transcript."
    },
    {
      "name": "onSubmit",
      "optional": true,
      "type": "(text: string) => void",
      "doc": "Fires when the user submits a message."
    },
    {
      "name": "composerValue",
      "optional": true,
      "type": "string",
      "doc": "Controlled composer value."
    },
    {
      "name": "onComposerValueChange",
      "optional": true,
      "type": "(text: string) => void",
      "doc": "Fires on composer keystroke."
    },
    {
      "name": "sending",
      "optional": true,
      "type": "boolean",
      "doc": "Pending state — disables Send + swaps to spinner."
    },
    {
      "name": "composerPlaceholder",
      "optional": true,
      "type": "string",
      "doc": "Composer placeholder."
    },
    {
      "name": "composerDisabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the composer."
    },
    {
      "name": "disabled",
      "optional": true,
      "type": "boolean",
      "doc": "Disable the entire tester (header + transcript + composer)."
    },
    {
      "name": "onReset",
      "optional": true,
      "type": "() => void",
      "doc": "Render a Reset button in the header."
    },
    {
      "name": "resetLabel",
      "optional": true,
      "type": "ReactNode",
      "doc": "Reset button label. Default `\"Restart\"`."
    },
    {
      "name": "headerActions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned slot in the header (after status, before reset)."
    },
    {
      "name": "caption",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional caption beneath the agent name in the header."
    },
    {
      "name": "header",
      "optional": true,
      "type": "ReactNode | null",
      "doc": "Override the entire header. Pass `null` to omit the header."
    },
    {
      "name": "density",
      "optional": true,
      "type": "\"comfortable\" | \"compact\"",
      "doc": "Density preset passed through to the transcript."
    }
  ],
  "classesUsed": [
    "live-chat-tester",
    "live-chat-tester-actions",
    "live-chat-tester-avatar",
    "live-chat-tester-caption",
    "live-chat-tester-head",
    "live-chat-tester-name",
    "live-chat-tester-name-row",
    "live-chat-tester-reset",
    "live-chat-tester-sep",
    "live-chat-tester-status-dot",
    "live-chat-tester-status-label",
    "live-chat-tester-status-row",
    "live-chat-tester-title-block",
    "live-chat-tester-version",
    "title"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"chat-demo-frame\">\n          <div class=\"live-chat-tester\">\n            <div class=\"chat-transcript\">\n              <div class=\"chat-transcript-header\">\n                <header class=\"live-chat-tester-head\">\n                  <div class=\"live-chat-tester-avatar\" aria-hidden=\"true\">CW</div>\n                  <div class=\"live-chat-tester-title-block\">\n                    <div class=\"live-chat-tester-name-row\">\n                      <span class=\"live-chat-tester-name\">Charlie&rsquo;s Wines agent</span>\n                      <span class=\"live-chat-tester-version\"><span class=\"badge tone-warning\">draft v15</span></span>\n                    </div>\n                    <div class=\"live-chat-tester-status-row\">\n                      <span class=\"live-chat-tester-status-dot is-online\" aria-hidden=\"true\"></span>\n                      <span class=\"live-chat-tester-status-label\">Online</span>\n                      <span class=\"live-chat-tester-sep\" aria-hidden=\"true\">&middot;</span>\n                      <span class=\"live-chat-tester-caption\">Powered by gpt-4.1</span>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"live-chat-tester-reset\" aria-label=\"Restart\">\n                    <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><path d=\"M11.5 7a4.5 4.5 0 1 1-1.32-3.18M11.5 2.5v3h-3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n                    <span>Restart</span>\n                  </button>\n                </header>\n              </div>\n              <div class=\"chat-transcript-scroll\" role=\"log\" aria-live=\"polite\" aria-relevant=\"additions\">\n                <div class=\"chat-transcript-list\">\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-bubble-wrap\">\n                        <div class=\"chat-msg-bubble\">\n                          <div class=\"chat-msg-body\">Hi! Try asking me anything about your agent.</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\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-bubble-wrap\">\n                        <div class=\"chat-msg-bubble\">\n                          <div class=\"chat-msg-body\">What&rsquo;s on the secret-deals page right now?</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\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-bubble-wrap\">\n                        <div class=\"chat-msg-bubble\">\n                          <div class=\"chat-msg-body\">Three offers &mdash; a 2021 Aglianico at 22% off, a 2020 Riesling at 18%, and a magnum bundle at 15%. Want the SMS code?</div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\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-bubble-wrap\">\n                        <div class=\"chat-msg-bubble\">\n                          <div class=\"chat-msg-body\">Yes &mdash; text me the Aglianico one.</div>\n                        </div>\n                      </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=\"Type a message to test the agent&hellip;\" aria-label=\"Message\"></textarea>\n                    <button type=\"submit\" class=\"chat-composer-send\" disabled aria-label=\"Send\"><span class=\"chat-composer-send-label\">Send</span></button>\n                  </div>\n                </form>\n              </div>\n            </div>\n          </div>\n        </div>",
    "css": ".live-chat-tester {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 360px;\n}\n\n.live-chat-tester-actions { display: inline-flex; align-items: center; gap: 4px; }\n\n.live-chat-tester-avatar {\n  width: 36px;\n  height: 36px;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--accent) 18%, var(--bg-warm));\n  color: var(--accent);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 600 13px/1 var(--f-mono);\n  flex-shrink: 0;\n}\n\n.live-chat-tester-caption { color: var(--fg-soft); }\n\n.live-chat-tester-head {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  align-items: center;\n  gap: var(--s-3);\n  width: 100%;\n}\n\n.live-chat-tester-name {\n  font: 600 14px/1.3 var(--f-display);\n  color: var(--fg);\n}\n\n.live-chat-tester-name-row {\n  display: inline-flex;\n  align-items: baseline;\n  gap: 6px;\n}\n\n.live-chat-tester-reset {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  background: transparent;\n  border: 1px solid var(--hair);\n  border-radius: var(--r-sm);\n  font: 500 12.5px/1 var(--f-body);\n  color: var(--fg);\n  cursor: pointer;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.live-chat-tester-sep { opacity: 0.5; }\n\n.live-chat-tester-status-dot {\n  width: 7px;\n  height: 7px;\n  border-radius: 999px;\n  background: var(--fg-faint);\n}\n\n.live-chat-tester-status-label { font-weight: 500; color: var(--fg); }\n\n.live-chat-tester-status-row {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font: 400 12px/1.3 var(--f-body);\n  color: var(--fg-soft);\n}\n\n.live-chat-tester-title-block {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.live-chat-tester-version {\n  font: 500 11px/1 var(--f-mono);\n  padding: 2px 6px;\n  border-radius: 999px;\n  background: var(--bg-warm);\n  color: var(--fg-soft);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }"
  }
}