sw-ui-content-drawer

Slide-in drawer that displays rich content the agent pushed mid-call (a snippet, a markdown article, a sanitized HTML fragment, or plain text) without leaving the call view.

1
<sw-ui-content-drawer open>
2
  <h2>Article</h2>
3
  <p>Rich content pushed from the agent appears here.</p>
4
</sw-ui-content-drawer>

Used by <sw-call-widget> to render display_content user events from the AI agent. The drawer auto-orients itself to the available space:

• Wide containers — slides in from the right at ~360 px wide.
• Narrow containers (parent ≤ 480 px) — slides up from the bottom at ~50 % container height for better mobile ergonomics.

Four content formats are supported, each with appropriate sanitisation:

• text — rendered verbatim with whitespace preserved.
• markdown — parsed via marked, sanitised via DOMPurify with a strict tag/attribute allowlist; target="_blank" links are rewritten with rel="noopener noreferrer".
• code — highlighted via Prism; the language must be supplied in payload.language and is loaded lazily.
• html — passed through DOMPurify with the same allowlist as markdown.

Class: SwUiContentDrawer · Module: packages/web-components/src/components/UI/layout/sw-ui-content-drawer.ts

class: SwUiContentDrawer, sw-ui-content-drawer

Fields

Attributes

CSS Properties

CSS Parts

Events