> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrade Guide

## Overview

* **Key improvements in this series**:
  * 115+ primitive components for building custom comment dialogs
  * Each subcomponent can now be used independently without requiring the full dialog structure
  * Two usage patterns: ID-Based (Standalone) and Context Wrapper
  * Full control over comment dialog layout and styling

## Breaking Changes

* \[**CSS Element Names**] If you applied CSS to comment dialog element selectors, you need to update them to target the new element names.
  * Replace `snippyly-comment-dialog` with `velt-comment-dialog-internal`
  * Replace `app-comment-dialog-*` pattern with `velt-comment-dialog-*-internal`
  * For example: `app-comment-dialog-composer` becomes `velt-comment-dialog-composer-internal`
  * **Important**: Only element names need to be updated. Class names remain unchanged.

## How to Upgrade

### Upgrade Manually

1. Search your CSS files for any element selectors using `snippyly-comment-dialog` or `app-comment-dialog-*` patterns.
2. Update the element selectors using the following replacements:

| Old Element Name              | New Element Name                        |
| ----------------------------- | --------------------------------------- |
| `snippyly-comment-dialog`     | `velt-comment-dialog-internal`          |
| `app-comment-dialog-composer` | `velt-comment-dialog-composer-internal` |
| `app-comment-dialog-header`   | `velt-comment-dialog-header-internal`   |
| `app-comment-dialog-body`     | `velt-comment-dialog-body-internal`     |

3. Deploy the latest version of the Velt SDK to your product.

<Note>
  If you are only using class selectors (e.g., `.comment-dialog-composer`), no changes are required.
</Note>

### Upgrade using AI

Use this prompt to update the CSS element selectors in all CSS files for the comment dialog components ONLY.

```
Update CSS element selectors in all CSS files for the comment dialog components ONLY.

Replacements needed:
1. `snippyly-comment-dialog` (element) → `velt-comment-dialog-internal`
2. `app-comment-dialog-{name}` (element) → `velt-comment-dialog-{name}-internal`

SCOPE: Only modify selectors that match these EXACT patterns:
- `snippyly-comment-dialog`
- `app-comment-dialog-*` (e.g., app-comment-dialog-composer, app-comment-dialog-header, etc.)

Do NOT modify any other elements like app-recording-*, app-presence-*, etc.

CRITICAL: Only modify ELEMENT selectors, not class selectors.
- Element selectors have NO dot prefix: `app-comment-dialog-composer { }`
- Class selectors HAVE a dot prefix: `.velt-comment-dialog-composer { }`

Correct transformations:
✅ `snippyly-comment-dialog { }` → `velt-comment-dialog-internal { }`
✅ `app-comment-dialog-composer::part(btn)` → `velt-comment-dialog-composer-internal::part(btn)`
✅ `div > app-comment-dialog-header` → `div > velt-comment-dialog-header-internal`

Do NOT modify:
❌ `.velt-comment-dialog-composer` (class selector - has dot prefix)
❌ `.snippyly-comment-dialog` (class selector - has dot prefix)
❌ `app-recording-player` (different component - out of scope)
❌ `app-presence-avatar` (different component - out of scope)

```