Web Components

sw-ui-content-drawer

View as MarkdownOpen in Claude

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

open
booleanDefaults to false

open field.

narrow
booleanDefaults to false

narrow field.

title
stringDefaults to ''

title field.

content
stringDefaults to ''

content field.

format
ContentFormatDefaults to 'text'

format field.

language
stringDefaults to ''

language field.

Attributes

NameFieldInherited From
openopen
narrownarrow
titletitle
contentcontent
formatformat
languagelanguage

CSS Properties

NameDefaultDescription
--bg-pageDrawer background.
--fg-defaultPrimary text color.
--border-defaultHeader divider color.
--shadow-mdDrawer drop shadow.
--radius-mdDrawer corner rounding (only the visible edges).
--type-family-bodyBody font family.
--type-size-smallBody font size.

CSS Parts

NameDescription
containerOuter drawer container.
headerSticky header (title + close button).
titleTitle heading.
closeClose-button anchor.
bodyScrollable content body.

Events

NameDetailDescription
sw-content-drawer-close—User clicked the close button. No detail.