{
  "name": "WidgetMessage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetMessage.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "messages",
  "elName": "WidgetMessage",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#messages",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetMessage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetMessageProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WidgetMessageFrom",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WidgetMessage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "from",
      "optional": false,
      "type": "WidgetMessageFrom",
      "doc": "Which side of the conversation."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body text or rich content."
    },
    {
      "name": "name",
      "optional": true,
      "type": "ReactNode",
      "doc": "Sender display name (rendered above the bubble for AI side, per theme)."
    },
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Avatar slot rendered beside the AI bubble."
    },
    {
      "name": "timestamp",
      "optional": true,
      "type": "Date | number | string | ReactNode",
      "doc": "Timestamp. Accepts a Date / number (epoch ms) and formats per the theme (`12-hour` / `24-hour`), or a pre-formatted ReactNode."
    },
    {
      "name": "showTimestamp",
      "optional": true,
      "type": "boolean | null",
      "doc": "Override the theme's `showTimestamp` for this side. `null` follows the theme."
    },
    {
      "name": "showName",
      "optional": true,
      "type": "boolean | null",
      "doc": "Override the theme's `showName` for the AI side. `null` follows the theme."
    },
    {
      "name": "streaming",
      "optional": true,
      "type": "boolean",
      "doc": "Streaming state — adds a typing cursor after the body."
    },
    {
      "name": "failed",
      "optional": true,
      "type": "boolean",
      "doc": "Failed delivery state."
    }
  ],
  "classesUsed": [
    "alert",
    "title",
    "widget-msg",
    "widget-msg-avatar",
    "widget-msg-body",
    "widget-msg-bubble",
    "widget-msg-caret",
    "widget-msg-failed",
    "widget-msg-name",
    "widget-msg-stack",
    "widget-msg-time"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"widget-frame widget-theme-scope\" style=\"--w-msg-user-bubble:#18181B;--w-msg-user-text:#FFFFFF;--w-msg-user-radius:12px;--w-msg-ai-bubble:#FFFFFF;--w-msg-ai-text:#18181B;--w-msg-ai-border:#E4E4E7;--w-msg-ai-radius:12px;--w-msg-ai-name:#2B2B30;\">\n          <div style=\"display: flex; flex-direction: column; gap: 12px; padding: var(--s-4); background: #FCFCFC; border-radius: var(--r-md); border: 1px solid var(--hair);\">\n            <!-- Standard AI message -->\n            <div class=\"widget-msg is-from-ai\">\n              <div class=\"widget-msg-avatar\">CW</div>\n              <div class=\"widget-msg-stack\">\n                <div class=\"widget-msg-name\">Charlie</div>\n                <div class=\"widget-msg-bubble\"><div class=\"widget-msg-body\">Hi there 👋</div></div>\n                <div class=\"widget-msg-time\">2:14 PM</div>\n              </div>\n            </div>\n            <!-- Standard user message -->\n            <div class=\"widget-msg is-from-user\">\n              <div class=\"widget-msg-stack\">\n                <div class=\"widget-msg-bubble\"><div class=\"widget-msg-body\">Hi! Quick question about pricing.</div></div>\n                <div class=\"widget-msg-time\">2:14 PM</div>\n              </div>\n            </div>\n            <!-- Streaming state -->\n            <div class=\"widget-msg is-from-ai is-streaming\">\n              <div class=\"widget-msg-avatar\">CW</div>\n              <div class=\"widget-msg-stack\">\n                <div class=\"widget-msg-bubble\">\n                  <div class=\"widget-msg-body\">Looking that up for you</div>\n                  <span class=\"widget-msg-caret\" aria-hidden=\"true\"></span>\n                </div>\n              </div>\n            </div>\n            <!-- Failed delivery -->\n            <div class=\"widget-msg is-from-user is-failed\" role=\"alert\">\n              <div class=\"widget-msg-stack\">\n                <div class=\"widget-msg-bubble\"><div class=\"widget-msg-body\">Hi! Can I get a refund?</div></div>\n                <div class=\"widget-msg-failed\">Couldn't deliver — tap to retry.</div>\n              </div>\n            </div>\n          </div>\n        </div>",
    "css": ".alert {\n  display: flex; gap: var(--s-3);\n  padding: var(--s-4);\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-left: 3px solid var(--success);\n  border-radius: var(--r-md);\n}\n\n.title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-msg {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 8px;\n  align-items: flex-end;\n}\n.widget-msg { animation: widget-in 380ms var(--ease) both; }\n\n.widget-msg-avatar {\n  width: 28px;\n  height: 28px;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--w-msg-ai-bubble, var(--w-agent-bg)) 80%, var(--ink) 20%);\n  color: var(--w-msg-ai-text, var(--w-agent-fg));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 600 11px/1 var(--f-mono);\n  align-self: flex-end;\n  margin-bottom: 4px;\n  flex-shrink: 0;\n}\n\n.widget-msg-body { white-space: pre-wrap; }\n\n.widget-msg-bubble {\n  position: relative;\n  padding: 10px 14px;\n  font: 400 14px/1.5 var(--w-font-family, var(--f-body));\n  word-break: break-word;\n}\n\n.widget-msg-caret {\n  display: inline-block;\n  width: 2px;\n  height: 1em;\n  background: currentColor;\n  margin-left: 2px;\n  vertical-align: text-bottom;\n  animation: widget-msg-caret 1s steps(2, end) infinite;\n}\n\n.widget-msg-failed {\n  font: 400 11.5px/1.3 var(--w-font-family, var(--f-body));\n  color: #C0392B;\n  padding: 2px 4px 0;\n}\n\n.widget-msg-name {\n  font: 500 11.5px/1 var(--w-font-family, var(--f-body));\n  color: var(--w-msg-ai-name, #2B2B30);\n  padding: 0 4px 2px;\n}\n\n.widget-msg-stack {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  max-width: 86%;\n}\n\n.widget-msg-time {\n  font: 400 10.5px/1 var(--f-mono);\n  padding: 2px 4px 0;\n  font-variant-numeric: tabular-nums;\n}"
  }
}