> This page is for Browser SDK, version v4 (default).
> For other versions, use one of these documentation indexes:
> - v4 (default): https://signalwire.com/docs/browser-sdk/v4/llms.txt
> - v3: https://signalwire.com/docs/browser-sdk/v3/llms.txt
> - v2: https://signalwire.com/docs/browser-sdk/v2/llms.txt

> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.

# 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.

```html
<sw-ui-content-drawer open>
  <h2>Article</h2>
  <p>Rich content pushed from the agent appears here.</p>
</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`** `boolean` — default: false

`open` field.

---

**`narrow`** `boolean` — default: false

`narrow` field.

---

**`title`** `string` — default: ''

`title` field.

---

**`content`** `string` — default: ''

`content` field.

---

**`format`** `ContentFormat` — default: 'text'

`format` field.

---

**`language`** `string` — default: ''

`language` field.

---

### Attributes

| Name       | Field    | Inherited From |
| ---------- | -------- | -------------- |
| `open`     | open     |                |
| `narrow`   | narrow   |                |
| `title`    | title    |                |
| `content`  | content  |                |
| `format`   | format   |                |
| `language` | language |                |

### CSS Properties

| Name                 | Default | Description                                      |
| -------------------- | ------- | ------------------------------------------------ |
| `--bg-page`          |         | Drawer background.                               |
| `--fg-default`       |         | Primary text color.                              |
| `--border-default`   |         | Header divider color.                            |
| `--shadow-md`        |         | Drawer drop shadow.                              |
| `--radius-md`        |         | Drawer corner rounding (only the visible edges). |
| `--type-family-body` |         | Body font family.                                |
| `--type-size-small`  |         | Body font size.                                  |

### CSS Parts

| Name        | Description                           |
| ----------- | ------------------------------------- |
| `container` | Outer drawer container.               |
| `header`    | Sticky header (title + close button). |
| `title`     | Title heading.                        |
| `close`     | Close-button anchor.                  |
| `body`      | Scrollable content body.              |

### Events

| Name                      | Detail | Description                               |
| ------------------------- | ------ | ----------------------------------------- |
| `sw-content-drawer-close` | —      | User clicked the close button. No detail. |

---