{
  "name": "WidgetShell",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WidgetShell.tsx",
  "chapterTag": "25 Chat Widget",
  "chapter": "25-widget.html",
  "sectionId": "shell",
  "elName": "WidgetShell",
  "demoUrl": "https://brand.magicblocks.ai/components/25-widget#shell",
  "hasLiveDemo": false,
  "description": "",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WidgetShell",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WidgetShellProps",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { WidgetShell } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "open",
      "optional": true,
      "type": "boolean",
      "doc": "Whether the shell is rendered. Default `true`."
    },
    {
      "name": "header",
      "optional": true,
      "type": "ReactNode",
      "doc": "Override the auto-built header entirely."
    },
    {
      "name": "agentName",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent name in the auto-built header. Falls back to theme `labels.agentName`."
    },
    {
      "name": "agentSubtitle",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent subtitle in the header (e.g. \"Online · usually replies in 1 min\")."
    },
    {
      "name": "agentAvatar",
      "optional": true,
      "type": "ReactNode",
      "doc": "Agent avatar slot in the header."
    },
    {
      "name": "headerActions",
      "optional": true,
      "type": "ReactNode",
      "doc": "Right-aligned header slot — typically More / Options menu."
    },
    {
      "name": "onClose",
      "optional": true,
      "type": "() => void",
      "doc": "Fires when the close × is clicked."
    },
    {
      "name": "welcomeDisclaimer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Welcome disclaimer node. If absent, auto-built from theme when `welcomeDisclaimer.enabled` is true."
    },
    {
      "name": "legalDisclaimer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Legal disclaimer node. If absent, auto-built from theme when `legalDisclaimer.enabled` is true."
    },
    {
      "name": "branding",
      "optional": true,
      "type": "ReactNode",
      "doc": "Branding footer node. If absent, auto-built when `shell.showBranding` is true."
    },
    {
      "name": "composer",
      "optional": true,
      "type": "ReactNode",
      "doc": "Composer footer slot."
    },
    {
      "name": "quickReplies",
      "optional": true,
      "type": "ReactNode",
      "doc": "Suggestion-chip row rendered just above the composer."
    },
    {
      "name": "children",
      "optional": true,
      "type": "ReactNode",
      "doc": "Transcript content — a stack of `<WidgetMessage>` nodes."
    },
    {
      "name": "floating",
      "optional": true,
      "type": "boolean",
      "doc": "Render as a fixed-positioned panel anchored to the launcher. Default `true`. Pass `false` to render in-flow for the StyleEditor preview."
    }
  ],
  "classesUsed": [
    "title",
    "widget-shell",
    "widget-shell-actions",
    "widget-shell-agent",
    "widget-shell-avatar",
    "widget-shell-branding",
    "widget-shell-close",
    "widget-shell-composer",
    "widget-shell-header",
    "widget-shell-header-text",
    "widget-shell-legal",
    "widget-shell-list",
    "widget-shell-quick-replies",
    "widget-shell-scroll",
    "widget-shell-subtitle",
    "widget-shell-welcome"
  ],
  "examples": {
    "react": null,
    "html": "<div class=\"widget-frame widget-theme-scope\" style=\"\n          --w-launcher-bg: #C69C6D;\n          --w-launcher-icon: #FFFFFF;\n          --w-shell-header-bg: #C69C6D;\n          --w-shell-header-text: #FCFCFC;\n          --w-shell-chat-bg: #FCFCFC;\n          --w-shell-width: 380px;\n          --w-shell-height: 560px;\n          --w-msg-user-bubble: #C69C6D;\n          --w-msg-user-text: #FFFFFF;\n          --w-msg-user-border: #C69C6D;\n          --w-msg-user-radius: 8px;\n          --w-msg-user-time: #2B2B30;\n          --w-msg-ai-bubble: #FFFFFF;\n          --w-msg-ai-text: #18181B;\n          --w-msg-ai-border: #E4E4E7;\n          --w-msg-ai-radius: 8px;\n          --w-msg-ai-name: #2B2B30;\n          --w-msg-ai-time: #2B2B30;\n          --w-send-bg: #C69C6D;\n          --w-send-text: #FFFFFF;\n          --w-send-border: #C69C6D;\n          --w-send-radius: 8px;\n          --w-btn-suggest-bg: transparent;\n          --w-btn-suggest-text: #C69C6D;\n          --w-btn-suggest-border: #C69C6D;\n          --w-btn-suggest-radius: 999px;\n          --w-composer-bg: #FFFFFF;\n          --w-composer-text: #18181B;\n          --w-composer-placeholder: #A1A1AA;\n          --w-composer-border: #C69C6D;\n          --w-composer-font-size: 14px;\n          --w-disclaimer-welcome-bg: #E4E4E7;\n          --w-disclaimer-welcome-text: #2B2B30;\n          --w-disclaimer-legal-text: #2B2B30;\n          --w-disclaimer-legal-align: left;\n        \">\n          <div class=\"widget-shell\">\n            <header class=\"widget-shell-header\">\n              <span class=\"widget-shell-avatar\">CW</span>\n              <div class=\"widget-shell-header-text\">\n                <span class=\"widget-shell-agent\">Charlie's Wines</span>\n                <span class=\"widget-shell-subtitle\">Online · usually replies in 1 min</span>\n              </div>\n              <button class=\"widget-shell-close\" aria-label=\"Close chat\">\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M4 4l8 8M12 4l-8 8\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"/></svg>\n              </button>\n            </header>\n\n            <div class=\"widget-shell-welcome\">You're chatting with an AI assistant. It may make mistakes sometimes.</div>\n\n            <div class=\"widget-shell-scroll\">\n              <div class=\"widget-shell-list\">\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's Wines</div>\n                    <div class=\"widget-msg-bubble\">\n                      <div class=\"widget-msg-body\">Hi! 👋 Looking for the perfect wine, or browsing today?</div>\n                    </div>\n                    <div class=\"widget-msg-time\">2:14 PM</div>\n                  </div>\n                </div>\n                <div class=\"widget-msg is-from-user\">\n                  <div class=\"widget-msg-stack\">\n                    <div class=\"widget-msg-bubble\">\n                      <div class=\"widget-msg-body\">Looking for a Hunter Valley red under $50.</div>\n                    </div>\n                    <div class=\"widget-msg-time\">2:14 PM</div>\n                  </div>\n                </div>\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-bubble\">\n                      <div class=\"widget-msg-body\">Great choice — Hunter has some bold Shiraz this season. Which style do you prefer?</div>\n                    </div>\n                    <div class=\"widget-msg-time\">2:14 PM</div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"widget-shell-quick-replies\">\n              <button class=\"widget-button is-suggestion\">Bold &amp; spicy</button>\n              <button class=\"widget-button is-suggestion\">Smooth &amp; fruity</button>\n              <button class=\"widget-button is-suggestion\">Talk to human</button>\n            </div>\n\n            <div class=\"widget-shell-composer\">\n              <form class=\"widget-composer\">\n                <div class=\"widget-composer-row\">\n                  <textarea class=\"widget-composer-input\" rows=\"1\" placeholder=\"Ask me…\" aria-label=\"Message\"></textarea>\n                  <button type=\"submit\" class=\"widget-composer-send is-icon-after\" aria-label=\"Send\">\n                    <span class=\"widget-composer-send-label\">Send</span>\n                    <span class=\"widget-composer-send-icon\">\n                      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M2 8l12-6-4 14-3-5-5-3z\" fill=\"currentColor\"/></svg>\n                    </span>\n                  </button>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"widget-shell-legal\">I'm an AI agent and may not be 100% accurate. Please verify critical information.</div>\n            <div class=\"widget-shell-branding\">\n              <span style=\"display: inline-flex; align-items: center; gap: 6px;\">\n                <svg width=\"11\" height=\"11\" viewBox=\"61.6 495.46 184 184\" aria-hidden=\"true\"><polygon points=\"208.13,587.46 239.61,555.98 185.08,501.46 165.48,576.24\" fill=\"#F982C3\"/><polygon points=\"196.79,544.61 185.08,501.46 153.61,532.94 165.48,576.24\" fill=\"#EF56A3\"/><polygon points=\"239.61,555.98 228.09,512.98 185.08,501.46 196.79,544.61\" fill=\"#EA2880\"/><polygon points=\"99.08,587.46 67.6,555.98 122.13,501.46 141.73,576.24\" fill=\"#FFD878\"/><polygon points=\"110.42,544.61 122.13,501.46 153.6,532.94 141.73,576.24\" fill=\"#F9C33E\"/><polygon points=\"67.6,555.98 79.12,512.98 122.13,501.46 110.42,544.61\" fill=\"#F9AD03\"/><polygon points=\"99.08,587.46 67.6,618.94 122.13,673.46 141.73,598.69\" fill=\"#7DF4D0\"/><polygon points=\"110.42,630.32 122.13,673.46 153.6,641.99 141.73,598.69\" fill=\"#47DDB2\"/><polygon points=\"67.6,618.94 79.12,661.94 122.13,673.46 110.42,630.32\" fill=\"#37BC9B\"/><polygon points=\"208.13,587.46 239.61,618.94 185.08,673.46 165.48,598.69\" fill=\"#5BD9FC\"/><polygon points=\"196.79,630.32 185.08,673.46 153.61,641.99 165.48,598.69\" fill=\"#30C4F2\"/><polygon points=\"239.61,618.94 228.09,661.94 185.08,673.46 196.79,630.32\" fill=\"#1FAAE8\"/></svg>\n                Powered by MagicBlocks\n              </span>\n            </div>\n          </div>\n        </div>",
    "css": ".title { font: 700 32px/1.15 var(--f-display); letter-spacing: -0.015em; margin: 0; }\n\n.widget-shell {\n  display: flex;\n  flex-direction: column;\n  width: var(--w-shell-width, 380px);\n  height: var(--w-shell-height, 560px);\n  max-height: calc(100vh - 80px);\n  background: var(--w-shell-chat-bg, #FCFCFC);\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 20px 50px color-mix(in oklab, #000 24%, transparent);\n  border: 1px solid color-mix(in oklab, #000 8%, transparent);\n}\n\n.widget-shell-actions { display: inline-flex; align-items: center; gap: 4px; }\n\n.widget-shell-agent {\n  font: 600 15px/1.3 var(--f-display);\n  color: inherit;\n}\n\n.widget-shell-avatar {\n  width: 32px;\n  height: 32px;\n  border-radius: 999px;\n  background: color-mix(in oklab, var(--w-shell-header-text, #FFFFFF) 18%, transparent);\n  color: var(--w-shell-header-text, #FFFFFF);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font: 600 13px/1 var(--f-mono);\n}\n\n.widget-shell-branding {\n  padding: 6px 14px 10px;\n  font: 500 10.5px/1 var(--f-mono);\n  color: color-mix(in oklab, #000 45%, transparent);\n  text-align: center;\n  text-transform: uppercase;\n  letter-spacing: 0.08em;\n  flex-shrink: 0;\n  background: var(--w-shell-chat-bg, #FCFCFC);\n}\n\n.widget-shell-close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 28px;\n  height: 28px;\n  border-radius: 999px;\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: background var(--dur-2) var(--ease);\n}\n\n.widget-shell-composer {\n  padding: 10px 12px 14px;\n  flex-shrink: 0;\n  background: var(--w-shell-chat-bg, #FCFCFC);\n}\n\n.widget-shell-header {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto;\n  align-items: center;\n  gap: 10px;\n  padding: 14px 16px;\n  background: var(--w-shell-header-bg, #18181B);\n  background-image: var(--w-shell-bg-image, none);\n  background-size: cover;\n  background-position: center;\n  color: var(--w-shell-header-text, #FCFCFC);\n  flex-shrink: 0;\n}\n\n.widget-shell-header-text {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  min-width: 0;\n}\n\n.widget-shell-legal {\n  padding: 8px 14px;\n  font: 400 11px/1.4 var(--f-mono);\n  color: var(--w-disclaimer-legal-text, var(--fg-soft));\n  text-align: var(--w-disclaimer-legal-align, left);\n  flex-shrink: 0;\n  background: var(--w-shell-chat-bg, #FCFCFC);\n  border-top: 1px solid color-mix(in oklab, #000 6%, transparent);\n}\n\n.widget-shell-list {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  padding: 16px 12px;\n}\n\n.widget-shell-quick-replies {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n  padding: 8px 12px 4px;\n  flex-shrink: 0;\n}\n\n.widget-shell-scroll {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  background: var(--w-shell-chat-bg, #FCFCFC);\n  scroll-behavior: smooth;\n}\n\n.widget-shell-subtitle {\n  font: 400 12px/1.3 var(--f-body);\n  opacity: 0.78;\n}\n\n.widget-shell-welcome {\n  padding: 10px 14px;\n  background: var(--w-disclaimer-welcome-bg, #E4E4E7);\n  color: var(--w-disclaimer-welcome-text, #2B2B30);\n  font: 400 12.5px/1.5 var(--f-body);\n  flex-shrink: 0;\n  border-bottom: 1px solid color-mix(in oklab, #000 6%, transparent);\n}"
  }
}