// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ChatBubbleDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_title = ctx.url.searchParams.get("pg_title") ?? "" state playground_description = ctx.url.searchParams.get("pg_description") ?? "" state playground_items = ctx.url.searchParams.get("pg_items") ?? "[\n {\n \"id\": \"question\",\n \"direction\": \"incoming\",\n \"author\": \"Support agent\",\n \"title\": \"How can we help?\",\n \"text\": \"You can ask questions like:\",\n \"bullets\": [\n \"What's WireJS UI?\",\n \"How many component examples are there?\",\n \"Is there a PRO version?\"\n ]\n },\n {\n \"id\": \"request\",\n \"direction\": \"outgoing\",\n \"author\": \"AZ\",\n \"text\": \"what's wirejs ui?\"\n },\n {\n \"id\": \"answer\",\n \"direction\": \"incoming\",\n \"author\": \"Support agent\",\n \"text\": \"WireJS UI is an open-source set of reusable UI components built for responsive applications.\",\n \"links\": [\n {\n \"label\": \"Installation guide\",\n \"href\": \"/installation\"\n },\n {\n \"label\": \"Framework guides\",\n \"href\": \"/framework-guides\"\n }\n ]\n }\n]" state playground_oneSided = ctx.url.searchParams.get("pg_oneSided") ?? "false" state playground_showAvatars = ctx.url.searchParams.get("pg_showAvatars") ?? "false" state playground_showMetadata = ctx.url.searchParams.get("pg_showMetadata") ?? "false" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Conversation" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "default" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Chat Bubble" description = "Theme-aware, responsive chat bubble component." } view {
Base component

Chat Bubble

Theme-aware, responsive chat bubble component.

11 props1 slots4 eventsTheme readyResponsive
Interactive playground

Configure Chat Bubble

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<ChatBubble
  items='[
    {
      "id": "question",
      "direction": "incoming",
      "author": "Support agent",
      "title": "How can we help?",
      "text": "You can ask questions like:",
      "bullets": [
        "What\'s WireJS UI?",
        "How many component examples are there?",
        "Is there a PRO version?"
      ]
    },
    {
      "id": "request",
      "direction": "outgoing",
      "author": "AZ",
      "text": "what\'s wirejs ui?"
    },
    {
      "id": "answer",
      "direction": "incoming",
      "author": "Support agent",
      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
      "links": [
        {
          "label": "Installation guide",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    }
  ]'
/>
Component props11 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Conversation

Show a basic two-sided conversation with incoming and outgoing messages.

01
Live preview
Component usage.wrn
<ChatBubble
  items='[
    {
      "id": "question",
      "direction": "incoming",
      "author": "Support agent",
      "title": "How can we help?",
      "text": "You can ask questions like:",
      "bullets": [
        "What\'s WireJS UI?",
        "How many component examples are there?",
        "Is there a PRO version?"
      ]
    },
    {
      "id": "request",
      "direction": "outgoing",
      "author": "AZ",
      "text": "what\'s wirejs ui?"
    },
    {
      "id": "answer",
      "direction": "incoming",
      "author": "Support agent",
      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
      "links": [
        {
          "label": "Installation guide",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    }
  ]'
/>
Layout

One-sided

Use one-sided bubbles for support transcripts or single-direction message feeds.

02
Live preview
Component usage.wrn
<ChatBubble
  items='[
    {
      "id": "question",
      "direction": "incoming",
      "author": "Support agent",
      "title": "How can we help?",
      "text": "You can ask questions like:",
      "bullets": [
        "What\'s WireJS UI?",
        "How many component examples are there?",
        "Is there a PRO version?"
      ]
    },
    {
      "id": "request",
      "direction": "outgoing",
      "author": "AZ",
      "text": "what\'s wirejs ui?"
    },
    {
      "id": "answer",
      "direction": "incoming",
      "author": "Support agent",
      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
      "links": [
        {
          "label": "Installation guide",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ]
    }
  ]'
  oneSided="true"
  ariaLabel="One-sided"
/>
Identity

Messages with avatars

Add avatars when people need to identify message ownership at a glance.

03
Live preview
Component usage.wrn
<ChatBubble
  items='[
    {
      "id": "question",
      "direction": "incoming",
      "author": "Support agent",
      "title": "How can we help?",
      "text": "You can ask questions like:",
      "bullets": [
        "What\'s WireJS UI?",
        "How many component examples are there?",
        "Is there a PRO version?"
      ],
      "avatarSrc": "/avatar-example.svg",
      "avatarAlt": "Support agent",
      "avatarLabel": "View support agent"
    },
    {
      "id": "request",
      "direction": "outgoing",
      "author": "AZ",
      "text": "what\'s wirejs ui?",
      "avatarFallback": "AZ",
      "avatarLabel": "View AZ"
    },
    {
      "id": "answer",
      "direction": "incoming",
      "author": "Support agent",
      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
      "links": [
        {
          "label": "Installation guide",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ],
      "avatarSrc": "/avatar-example.svg",
      "avatarAlt": "Support agent",
      "avatarLabel": "View support agent"
    }
  ]'
  showAvatars="true"
  ariaLabel="Messages with avatars"
/>
Message details

Message metadata

Add delivery state, timestamps, or recovery actions beneath each message.

04
Live preview
Component usage.wrn
<ChatBubble
  items='[
    {
      "id": "question",
      "direction": "incoming",
      "author": "Support agent",
      "title": "How can we help?",
      "text": "You can ask questions like:",
      "bullets": [
        "What\'s WireJS UI?",
        "How many component examples are there?",
        "Is there a PRO version?"
      ],
      "avatarSrc": "/avatar-example.svg",
      "avatarAlt": "Support agent",
      "avatarLabel": "View support agent",
      "status": "Sent",
      "statusIcon": "icon-[lucide--check-check]",
      "timestamp": "10:32",
      "datetime": "2026-07-28T10:32:00"
    },
    {
      "id": "request",
      "direction": "outgoing",
      "author": "AZ",
      "text": "what\'s wirejs ui?",
      "avatarFallback": "AZ",
      "avatarLabel": "View AZ",
      "status": "Read",
      "statusIcon": "icon-[lucide--check-check]",
      "timestamp": "10:33",
      "datetime": "2026-07-28T10:33:00"
    },
    {
      "id": "answer",
      "direction": "incoming",
      "author": "Support agent",
      "text": "WireJS UI is an open-source set of reusable UI components built for responsive applications.",
      "links": [
        {
          "label": "Installation guide",
          "href": "/installation"
        },
        {
          "label": "Framework guides",
          "href": "/framework-guides"
        }
      ],
      "avatarSrc": "/avatar-example.svg",
      "avatarAlt": "Support agent",
      "avatarLabel": "View support agent",
      "status": "Not sent",
      "statusIcon": "icon-[lucide--circle-alert]",
      "statusTone": "danger",
      "action": "retry",
      "actionLabel": "Retry"
    }
  ]'
  showAvatars="true"
  showMetadata="true"
  ariaLabel="Message metadata"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@actionFires when the component's action is selected.
@messageClickFires when a message bubble is selected.
@avatarClickFires when a message avatar is selected.
@linkClickFires when a link inside a message is selected.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('action', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
titlestring""No
descriptionstring""No
itemsstring[]No
oneSidedbooleanfalseNo
showAvatarsbooleanfalseNo
showMetadatabooleanfalseNo
ariaLabelstring"Conversation"No
variantstring"default"No
classstring""No
} }