{
  "name": "WidgetProactiveMessage",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetProactiveMessage.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "proactive",
  "elName": "WidgetProactiveMessage",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#proactive",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetProactiveMessage",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetProactiveMessageProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetProactiveMessage } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "message",
      "optional": true,
      "type": "ReactNode",
      "doc": "Body text. Falls back to the theme's `proactive.text`."
    },
    {
      "name": "avatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional avatar slot at the top-left of the bubble."
    },
    {
      "name": "title",
      "optional": true,
      "type": "ReactNode",
      "doc": "Optional title rendered above the body."
    },
    {
      "name": "onOpen",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when the bubble is clicked (typically opens the chat)."
    },
    {
      "name": "onDismiss",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when × is clicked (dismiss without opening)."
    },
    {
      "name": "offset",
      "optional": true,
      "type": "number",
      "doc": "Position offset above the launcher in px. Default `88` — enough to clear a `size: 60` launcher with breathing room. The CSS reads the launcher's size / bottom / side offsets to position automatically."
    },
    {
      "name": "floating",
      "optional": true,
      "type": "boolean",
      "doc": "Render as `position: fixed`. Default `true`. Pass `false` to render in-flow for the StyleEditor preview."
    }
  ],
  "classesUsed": [
    "title",
    "widget-proactive",
    "widget-proactive-avatar",
    "widget-proactive-body",
    "widget-proactive-dismiss",
    "widget-proactive-message",
    "widget-proactive-text",
    "widget-proactive-title"
  ],
  "examples": {
    "react": null,
    "html": "<div style=\"display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4); max-width: 380px; margin: 0 auto;\">\n          <div class=\"widget-proactive\" style=\"--w-proactive-bg: #FFFFFF; --w-proactive-text: #18181B; --w-proactive-border: #E4E4E7; --w-proactive-radius: 12px;\">\n            <button class=\"widget-proactive-body\" type=\"button\">\n              <span class=\"widget-proactive-avatar\">CW</span>\n              <span class=\"widget-proactive-text\">\n                <span class=\"widget-proactive-title\">Charlie's Wines</span>\n                <span class=\"widget-proactive-message\">Hi! Looking for the perfect wine?</span>\n              </span>\n            </button>\n            <button class=\"widget-proactive-dismiss\" aria-label=\"Dismiss\">\n              <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" aria-hidden=\"true\"><path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/></svg>\n            </button>\n          </div>\n          <button class=\"widget-launcher\" style=\"--w-launcher-bg: #C69C6D; --w-launcher-icon: #FFFFFF;\" aria-label=\"Open chat\">\n            <span class=\"widget-launcher-disc\"></span>\n            <span class=\"widget-launcher-icon\">\n              <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 6a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H9l-5 4v-4a3 3 0 0 1 0-6V6z\" fill=\"currentColor\"/><circle cx=\"8.5\" cy=\"10\" r=\"1.45\" fill=\"var(--w-launcher-bg, #18181B)\"/><circle cx=\"12\" cy=\"10\" r=\"1.45\" fill=\"var(--w-launcher-bg, #18181B)\"/><circle cx=\"15.5\" cy=\"10\" r=\"1.45\" fill=\"var(--w-launcher-bg, #18181B)\"/></svg>\n            </span>\n          </button>\n        </div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-proactive {\n  display: inline-flex;\n  align-items: stretch;\n  max-width: 320px;\n  background: var(--w-proactive-bg, var(--w-agent-bg));\n  border: 1px solid var(--w-proactive-border, var(--w-agent-border));\n  border-radius: var(--w-proactive-radius, var(--w-r-card));\n  color: var(--w-proactive-text, var(--w-agent-fg));\n  box-shadow: 0 8px 24px color-mix(in oklab, #000 16%, transparent);\n  overflow: hidden;\n}\n.widget-proactive { animation: widget-in 320ms var(--ease) both; }\n\n.widget-proactive-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--accent) 20%, var(--bg-warm));\n  color: var(--accent);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 600 12px/1 var(--f-mono);\n}\n.widget-proactive-avatar { animation: widget-breathe 3.4s var(--ease) infinite; }\n\n.widget-proactive-body {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  flex: 1;\n  display: grid;\n  grid-template-columns: auto 1fr;\n  gap: 10px;\n  padding: 12px 14px;\n  text-align: left;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n}\n\n.widget-proactive-dismiss {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-left: 1px solid var(--w-proactive-border, var(--w-agent-border));\n  width: 32px;\n  cursor: pointer;\n  color: color-mix(in oklab, var(--w-proactive-text, var(--w-agent-fg)) 60%, transparent);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.widget-proactive-message { font: 400 13px/1.5 var(--f-body); }\n\n.widget-proactive-text {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n\n.widget-proactive-title { font: 600 13px/1.3 var(--f-body); }"
  }
}