Skip to main content

​
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 NameNew Element Name
snippyly-comment-dialogvelt-comment-dialog-internal
app-comment-dialog-composervelt-comment-dialog-composer-internal
app-comment-dialog-headervelt-comment-dialog-header-internal
app-comment-dialog-bodyvelt-comment-dialog-body-internal
  1. Deploy the latest version of the Velt SDK to your product.
If you are only using class selectors (e.g., .comment-dialog-composer), no changes are required.

​
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)