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

# Version 3.0.0

## Change Log

<Update label="3.0.87" description="Dec 17 2024">
  ### Improvements

  * \[**Comments**]: Added pagination in autocomplete option dropdown for improved performance.
  * \[**Comments**]: Added "Edit Comment" option in header options dropdown menu for editing the first comment. Only visible to comment author and admins. [Learn more](/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown).
  * \[**Recorder**]: Added `shadow dom` prop in Recorder Player component to control shadow DOM encapsulation.

  <Tabs>
    <Tab title="React / Next.js">
      Using Props:

      ```jsx theme={null}
      <VeltRecorderPlayer recorderId="-OEIX04CL_jGATT_zunp" shadowDom={false} />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
        <velt-recorder-player recorder-id="-OEIX04CL_jGATT_zunp" shadow-dom="false"></velt-recorder-player>
      ```
    </Tab>
  </Tabs>

  ### Bug Fixes

  * \[**Recorder**]: Fixed an issue where `summary` prop was not working in Recorder Player component.
</Update>

<Update label="3.0.86" description="Dec 17 2024">
  ### Improvements

  * \[**Core**]: Added updates to the core library packages.
</Update>

<Update label="3.0.85" description="Dec 16 2024">
  ### Improvements

  * \[**Core**]: Added accessibility props and test ids for most Velt components within Comments, Notifications, Live Selection features.
</Update>

<Update label="3.0.84" description="Dec 12 2024">
  ### Features

  * \[**UI Customization**]: Added additional CSS variables for z-index customization. [Learn more](/ui-customization/styling#themes).
    * `--velt-comment-pin-z-index: 2147483557`: For Components like Comment Pin, Triangle, etc.
    * `--velt-arrow-z-index: 2147483557`: For Arrow Component.
    * `--velt-recorder-player-z-index: 2147483557`: For Recorder Player Component.
    * `--velt-cursor-z-index: 2147483647`: For Cursor Component.
    * `--velt-persistent-comment-frame-z-index: 2147483647`: For Persistent Comment Frame Component.
    * `--velt-toast-popup-z-index: 2147483647`: For Toast Popup Component.
    * `--velt-live-state-sync-overlay-z-index: 2147483647`: For Live State Sync Overlay Component.
    * `--velt-follow-mode-overlay-z-index: 2147483647`: For Follow Mode Overlay Component.
    * `--velt-comments-minimap-z-index: 2147483637`: For Comments Minimap Component.
    * `--velt-global-overlay-z-index: 2147483637`: For Global Overlay Component.

  ### Improvements

  * \[**Comments**]: Improved comment annotation view count logic.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where default custom status was not applied when adding new comment annotation.
  * \[**Comments**]: Added support for setting dynamic `targetElementId` value asynchronously in comment tool.
  * \[**Comments**]: Fixed an issue where assign dropdown input wasn't closing after user selection.
  * \[**Comments**]: Fixed padding around assign dropdown.
  * \[**Comments**]: Fixed horizontal scroll and overflow issues for longer emails in assign dropdown input and assign banner.
</Update>

<Update label="3.0.83" description="Dec 11 2024">
  <Warning>
    This release changes how users navigate to comments from the sidebar. We've made navigation more explicit by requiring users to click a dedicated button rather than the comment itself.
  </Warning>

  ### Improvements

  * \[**Comments**]: Added navigation button as default in Comments Sidebar.
    * Now just clicking on a comment doesn't open the comment on the DOM.
    * A lot of users reported this behaviour as frustrating. That's why now there is an explicit navigation button for that.
    * You will still get the [`onCommentClick`](/async-collaboration/comments-sidebar/customize-behavior#oncommentclick) event. You can still use that to maintain the old behavior [using this](/async-collaboration/comments/customize-behavior#selectcommentbyannotationid).
    * If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/features/async/comments/comment-dialog/wireframes#header) to show the navigation button.
  * \[**Comments**]: Added feature to show resolved comments on for inline comments section.
  * \[**Comments**]: Disabled collapsed comments by default. Most customers don't want to show collapsed comments by default so we disabled it. You can enable it by setting using [this](/async-collaboration/comments/customize-behavior#enablecollapsedcomments).
  * \[**Comments**]: Disabled auto-focus on new comments in inline comments section and sidebar page mode.

  ### Bug Fixes

  * \[**Comments**]: Fixed inline comment section horizontal scroll issue when the available width is too narrow.
  * \[**Comments**]: Fixed Composer Send Button vertical alignment.
  * \[**Comments**]: Removed autofocus for inline comments section when the page loads.
  * \[**Comments**]: Fixed issue where clicking composer in edit mode was passing clicks through to the sidebar.
  * \[**Comments**]: Fixed copy paste replace issue in the composer where pasting text over selected text was not working correctly.
  * \[**Comments**]: Fixed Velt Button Sidebar wireframe loading default UI initially.
  * \[**Comments**]: Fixed unread comments count APIs to return correct values on document switch.
</Update>

<Update label="3.0.82" description="Dec 10 2024">
  ### Improvements

  * \[**Core**]: Added library upgrades to the SDK.
</Update>

<Update label="3.0.81" description="Dec 9 2024">
  ### Improvements

  * \[**Comments**]: Added `readOnly` property in comment sidebar context so that it's available in `Velt Data` and `Velt If` features.
</Update>

<Update label="3.0.80" description="Dec 9 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the Comments Sidebar was emitting multiple update calls.
  * \[**UI Customization**]: Updated border radius for the status component in the Comment Dialog.
</Update>

<Update label="3.0.79" description="Dec 6 2024">
  ### Features

  * \[**Velt Button**]: Added a customizable button component that can be used to add custom actions and extend the functionality of any Velt component. [Learn more](/ui-customization/custom-action-component). Some examples include:
    * Add custom filtering, sorting and grouping to the Comment Sidebar.
    * Add custom actions to each item in the Notifications panel.
    * Add custom actions to the Comment Dialog.

  * \[**Theme Playground**]: Added a new [Theme Playground](https://playground.velt.dev/themes). You can customize and test your themes. It will generate CSS variables that you can just copy and paste into your app.
</Update>

<Update label="3.0.78" description="Dec 5 2024">
  ### Improvements

  * \[**Comments**]: Added additional wireframes for Comment Dialog Toggle Reply Component. [Learn more](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/togglereply).
  * \[**Comments**]: Now users can't submit empty comments during editing.
  * \[**Comments**]: Improved the padding on the @mention autocomplete dropdown.
  * \[**Ergonomics**]: Updated `useCommentActionCallback` to `useCommentEventCallback`. The old hook name will continue to work.
  * \[**Ergonomics**]: For Sidebar Custom actions and filters, updated APIs and Hooks:
    * `onCommentSidebarInit` can now be also be accessed with `useCommentEventCallback('commentSidebarDataInit')` or `commentElement.on('commentSidebarDataInit')`
    * `onCommentSidebarData` can now be also be accessed with `useCommentEventCallback('commentSidebarDataUpdate')` or `commentElement.on('commentSidebarDataUpdate')`

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the Comment sidebar group count was not updated correctly.
  * \[**Comments**]: Fixed an issue where attached files were not displayed on the very first comment in inline and page mode comments.
  * \[**Comments**]: Fixed a UI issue where attachments were misaligned when a comment was edited.
  * \[**Comments**]: Fixed a UX issue where the comment composer did not scroll into view when comment edit button was clicked.
  * \[**Comments**]: Resolved a UI issue where the Page Mode composer in the comment sidebar during embed mode was not taking the full width of the parent container.
</Update>

<Update label="3.0.77" description="Dec 3 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the Comment Annotation unread count was not updated correctly.
</Update>

<Update label="3.0.76" description="Dec 2 2024">
  ### Features

  * \[**Comments**]: Added ability to make comments read-only. When comments are made read-only, any features requiring user interaction (e.g., Composer, Reactions, Status) will be removed.

  <Tabs>
    <Tab title="React / Next.JS">
      Using Props:

      ```jsx theme={null}
      <VeltComments readOnly={true} />
      ```

      Using API:

      ```js theme={null}
        const commentElement = client.getCommentElement();
        commentElement.enableReadOnly();
        commentElement.disableReadOnly();
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-comments read-only="true"></velt-comments>
      ```

      Using API:

      ```js theme={null}
        const commentElement = Velt.getCommentElement();
        commentElement.enableReadOnly();
        commentElement.disableReadOnly();
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.75" description="Nov 29 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed image lightbox CSS related issue
</Update>

<Update label="3.0.74" description="Nov 29 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed undefined value error while updating context.
</Update>

<Update label="3.0.73" description="Nov 28 2024">
  ### Bug Fixes

  * \[**Comments**]: Added `composerVariant` prop to `VeltInlineCommentsSection` component to support inline composer variant

  <Tabs>
    <Tab title="React / Next.JS">
      ```jsx theme={null}
      <VeltInlineCommentsSection composerVariant='inline' />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-inline-comments-section composer-variant='inline'></velt-inline-comments-section>
      ```
    </Tab>
  </Tabs>

  * \[**UI**]: Minor CSS fixes and improvements
</Update>

<Update label="3.0.74" description="Nov 29 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed undefined value error while updating context.
</Update>

<Update label="3.0.72" description="Nov 26 2024">
  ### Improvements

  * \[**Comments**]: Added support for programatic selection and scrolling to comments in the `velt-comment-text` component used in Tiptap Comments.
</Update>

<Update label="3.0.71" description="Nov 25 2024">
  ### Features

  * \[**Comments**]: Added ability to customize the placeholder text shown in the search input of the comments sidebar:

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      <VeltWireframe>
          <VeltCommentsSidebarWireframe.Header>
              ...
              <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
              ...
          </VeltCommentsSidebarWireframe.Header>
      </VeltWireframe>
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-wireframe style="display:none;">
          <velt-comments-sidebar-header-wireframe>
              ...
              <velt-comments-sidebar-search-wireframe placeholder="Search Comments"></velt-comments-sidebar-search-wireframe>
              ...
          </velt-comments-sidebar-header-wireframe>
      </velt-wireframe>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.70" description="Nov 22 2024">
  ### Features

  * \[**Comment**]: Added [new APIs, hooks and event callbacks](/async-collaboration/comments/customize-behavior) for each action that the user can perform on the Comment's Feature Components or API:
    * **APIs & Hooks**:
      * **Comment Annotation**: addCommentAnnotation, deleteCommentAnnotation
      * **Comment**: addComment, deleteComment, updateComment, getComment
      * **@Mention**: subscribeCommentAnnotation, unsubscribeCommentAnnotation, assignUser
      * **Reaction**: addReaction, deleteReaction, toggleReaction
      * **Attachment**: addAttachment, deleteAttachment, getAttachment
      * **Status & Priority**: updateStatus, updatePriority, resolveCommentAnnotation
      * **Recording**: getRecording, deleteRecording
      * **Deep Link**: getLink, copyLink
      * **Moderation**: approveCommentAnnotation, acceptCommentAnnotation, rejectCommentAnnotation, updateAccess
    * **More Event Callbacks**:
      * [On](/async-collaboration/comments/customize-behavior#on)
      * [Here](/async-collaboration/comments/customize-behavior#on) is the list of events you can subscribe to.

  * \[**Metadata**]: Get the currently set organization, document and location objects:
    ```jsx theme={null}
    const metadata = await client.getMetadata();
    ```

  * \[**UI Customization**]: Added ability to customize comment sidebar search placeholder:

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
        <VeltCommentsSidebar searchPlaceholder="New placeholder" />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-comments-sidebar search-placeholder="New placeholder"></velt-comments-sidebar>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.69" description="Nov 21 2024">
  ### Features

  * \[**UI Customization**]: Extended themes to include more components:
    * Comments:
      * Autocomplete
      * Tooltip
      * Chart Comments
      * Text Comment Toolbar
      * Comment Inbox
      * Comment Text Portal
      * Persistent Comment Mode
      * Minimap
      * Inline Comment Section
      * Multi Thread Comments
    * Notifications
      * Notifications Panel
      * Notification Tool
</Update>

<Update label="3.0.67" description="Nov 20 2024">
  ### Features

  * \[**UI Customization**]: Introducing Themes! Now you can customize the look and feel of Velt components using CSS variables. This enables you to match Velt's UI with your application's design system.

    * The following components now support theming (others will be added soon):
      * Comment Components
      * Recording Components
      * Reactions

    * You can customize:
      * Border radius
      * Spacing
      * Typography
      * Colors for light and dark modes
        * Base Colors
        * Accent Colors
        * Text Shades
        * Background Shades
        * Border Shades
        * Status Colors (error, warning, success)
        * Transparent colors

    * Learn more about UI Customization [here](/ui-customization/overview).

  <Tabs>
    <Tab title="Border Radius">
      ```css theme={null}
      --velt-border-radius-2xs: 0.125rem; // 2px
      --velt-border-radius-xs: 0.25rem; // 4px
      --velt-border-radius-sm: 0.5rem; // 8px
      --velt-border-radius-md: 0.75rem; // 12px
      --velt-border-radius-lg: 1rem; // 16px
      --velt-border-radius-xl: 1.25rem; // 20px
      --velt-border-radius-2xl: 1.5rem; // 24px
      --velt-border-radius-3xl: 2rem; // 32px
      --velt-border-radius-full: 5rem; // 80px
      ```
    </Tab>

    <Tab title="Spacing">
      ```css theme={null}
        --velt-spacing-2xs: 0.125rem; // 2px
        --velt-spacing-xs: 0.25rem; // 4px
        --velt-spacing-sm: 0.5rem; // 8px
        --velt-spacing-md: 0.75rem; // 12px
        --velt-spacing-lg: 1rem; // 16px
        --velt-spacing-xl: 1.25rem; // 20px
        --velt-spacing-2xl: 1.5rem; // 24px
      ```
    </Tab>

    <Tab title="Typography">
      ```css theme={null}
        --velt-default-font-family: sans-serif;
        --velt-font-size-2xs: 0.625rem; // 10px
        --velt-font-size-xs: 0.75rem; // 12px
        --velt-font-size-sm: 0.875rem; // 14px
        --velt-font-size-md: 1rem; // 16px
        --velt-font-size-lg: 1.5rem; // 24px
        --velt-font-size-xl: 1.75rem; // 28px
        --velt-font-size-2xl: 2rem; // 32px
      ```
    </Tab>

    <Tab title="Colors - Light Mode">
      ```css theme={null}
        /* Base Colors */
        --velt-light-mode-green: #0DCF82;
        --velt-light-mode-magenta: #A259FE;
        --velt-light-mode-amber: #FF7162;
        --velt-light-mode-purple: #625DF5;
        --velt-light-mode-cyan: #4BC9F0;
        --velt-light-mode-orange: #FE965C;
        --velt-light-mode-black: #080808;
        --velt-light-mode-white: #FFFFFF;
        --velt-light-mode-gray: #EBEBEB;

        /* Accent Colors */
        --velt-light-mode-accent: #625DF5;
        --velt-light-mode-accent-text: #9491F8;
        --velt-light-mode-accent-hover: #534FCF;
        --velt-light-mode-accent-foreground: #FFFFFF;
        --velt-light-mode-accent-light: #F2F2FE;
        --velt-light-mode-accent-transparent: rgba(148, 145, 248, 0.08);

        /* Text Shades */
        --velt-light-mode-text-0: #0A0A0A;
        --velt-light-mode-text-1: #141414;
        --velt-light-mode-text-2: #1F1F1F;
        --velt-light-mode-text-3: #292929;
        --velt-light-mode-text-4: #3D3D3D;
        --velt-light-mode-text-5: #525252;
        --velt-light-mode-text-6: #666666;
        --velt-light-mode-text-7: #7A7A7A;
        --velt-light-mode-text-8: #858585;
        --velt-light-mode-text-9: #999999;
        --velt-light-mode-text-10: #B8B8B8;
        --velt-light-mode-text-11: #A3A3A3;
        --velt-light-mode-text-12: #8F8F8F;

        /* Background Shades */
        --velt-light-mode-background-0: #FFFFFF;
        --velt-light-mode-background-1: #FAFAFA;
        --velt-light-mode-background-2: #F5F5F5;
        --velt-light-mode-background-3: #F0F0F0;
        --velt-light-mode-background-4: #EBEBEB;
        --velt-light-mode-background-5: #E5E5E5;
        --velt-light-mode-background-6: #E0E0E0;
        --velt-light-mode-background-7: #DBDBDB;
        --velt-light-mode-background-8: #D6D6D6;
        --velt-light-mode-background-9: #D1D1D1;
        --velt-light-mode-background-10: #CCCCCC;

        /* Border Shades */
        --velt-light-mode-border-0: #FFFFFF;
        --velt-light-mode-border-1: #FAFAFA;
        --velt-light-mode-border-2: #F5F5F5;
        --velt-light-mode-border-3: #F0F0F0;
        --velt-light-mode-border-4: #EBEBEB;
        --velt-light-mode-border-5: #E5E5E5;
        --velt-light-mode-border-6: #E0E0E0;
        --velt-light-mode-border-7: #DBDBDB;
        --velt-light-mode-border-8: #D6D6D6;
        --velt-light-mode-border-9: #D1D1D1;
        --velt-light-mode-border-10: #CCCCCC;

        /* Status Colors */
        /* Error */
        --velt-light-mode-error: #FF7162;
        --velt-light-mode-error-hover: #DE5041;
        --velt-light-mode-error-foreground: #FFFFFF;
        --velt-light-mode-error-light: #FFF4F2;
        --velt-light-mode-error-transparent: rgba(255, 113, 98, 0.08);

        /* Warning */
        --velt-light-mode-warning: #FFCD2E;
        --velt-light-mode-warning-hover: #C69400;
        --velt-light-mode-warning-foreground: #474747;
        --velt-light-mode-warning-light: #FFFBEE;
        --velt-light-mode-warning-transparent: rgba(255, 205, 46, 0.08);

        /* Success */
        --velt-light-mode-success: #198F65;
        --velt-light-mode-success-hover: #006B41;
        --velt-light-mode-success-foreground: #FFFFFF;
        --velt-light-mode-success-light: #EDF6F3;
        --velt-light-mode-success-transparent: rgba(25, 143, 101, 0.08);

        /* Transparent Colors */
        --velt-light-mode-background-transparent: rgba(255, 255, 255, 0.80);
        --velt-light-mode-border-transparent: rgba(0, 0, 0, 0.16);
        --velt-light-mode-animation-transparent: rgba(255, 255, 255, 0.2);
      ```
    </Tab>

    <Tab title="Colors - Dark Mode">
      ```css theme={null}
        /* Base Colors */
        --velt-dark-mode-green: #0DCF82;
        --velt-dark-mode-magenta: #A259FE;
        --velt-dark-mode-amber: #FF7162;
        --velt-dark-mode-purple: #625DF5;
        --velt-dark-mode-cyan: #4BC9F0;
        --velt-dark-mode-orange: #FE965C;
        --velt-dark-mode-black: #080808;
        --velt-dark-mode-white: #FFFFFF;
        --velt-dark-mode-gray: #EBEBEB;

        /* Accent Colors */
        --velt-dark-mode-accent: #625DF5;
        --velt-dark-mode-accent-text: #9491F8;
        --velt-dark-mode-accent-hover: #534FCF;
        --velt-dark-mode-accent-foreground: #FFFFFF;
        --velt-dark-mode-accent-light: #F2F2FE;
        --velt-dark-mode-accent-transparent: rgba(148, 145, 248, 0.08);

        /* Text Shades */
        --velt-dark-mode-text-0: #FFFFFF;
        --velt-dark-mode-text-1: #F5F5F5;
        --velt-dark-mode-text-2: #EBEBEB;
        --velt-dark-mode-text-3: #E0E0E0;
        --velt-dark-mode-text-4: #D6D6D6;
        --velt-dark-mode-text-5: #C2C2C2;
        --velt-dark-mode-text-6: #ADADAD;
        --velt-dark-mode-text-7: #8F8F8F;
        --velt-dark-mode-text-8: #7A7A7A;
        --velt-dark-mode-text-9: #666666;
        --velt-dark-mode-text-10: #525252;
        --velt-dark-mode-text-11: #474747;
        --velt-dark-mode-text-12: #3D3D3D;

        /* Background Shades */
        --velt-dark-mode-background-0: #0F0F0F;
        --velt-dark-mode-background-1: #1A1A1A;
        --velt-dark-mode-background-2: #1F1F1F;
        --velt-dark-mode-background-3: #242424;
        --velt-dark-mode-background-4: #292929;
        --velt-dark-mode-background-5: #2E2E2E;
        --velt-dark-mode-background-6: #333333;
        --velt-dark-mode-background-7: #383838;
        --velt-dark-mode-background-8: #3D3D3D;
        --velt-dark-mode-background-9: #424242;
        --velt-dark-mode-background-10: #474747;

        /* Border Shades */
        --velt-dark-mode-border-0: #0F0F0F;
        --velt-dark-mode-border-1: #1A1A1A;
        --velt-dark-mode-border-2: #1F1F1F;
        --velt-dark-mode-border-3: #242424;
        --velt-dark-mode-border-4: #292929;
        --velt-dark-mode-border-5: #2E2E2E;
        --velt-dark-mode-border-6: #333333;
        --velt-dark-mode-border-7: #383838;
        --velt-dark-mode-border-8: #3D3D3D;
        --velt-dark-mode-border-9: #424242;
        --velt-dark-mode-border-10: #474747;

        /* Status Colors */
        /* Error */
        --velt-dark-mode-error: #FF7162;
        --velt-dark-mode-error-hover: #DE5041;
        --velt-dark-mode-error-foreground: #FFFFFF;
        --velt-dark-mode-error-light: #FFF4F2;
        --velt-dark-mode-error-transparent: rgba(255, 113, 98, 0.08);

        /* Warning */
        --velt-dark-mode-warning: #FFCD2E;
        --velt-dark-mode-warning-hover: #C69400;
        --velt-dark-mode-warning-foreground: #474747;
        --velt-dark-mode-warning-light: #FFFBEE;
        --velt-dark-mode-warning-transparent: rgba(255, 205, 46, 0.08);

        /* Success */
        --velt-dark-mode-success: #198F65;
        --velt-dark-mode-success-hover: #006B41;
        --velt-dark-mode-success-foreground: #FFFFFF;
        --velt-dark-mode-success-light: #EDF6F3;
        --velt-dark-mode-success-transparent: rgba(25, 143, 101, 0.08);

        /* Transparent Colors */
        --velt-dark-mode-background-transparent: rgba(0, 0, 0, 0.80);
        --velt-dark-mode-border-transparent: rgba(255, 255, 255, 0.16);
        --velt-dark-mode-animation-transparent: rgba(255, 255, 255, 0.2);
      ```
    </Tab>
  </Tabs>

  * Example of theme customisation:
    * You can update the following variables in `<body>` tag to change the theme.
    * For testing, try copy pasting the following sample themes in body tag:
    ```css theme={null}
    body {
      --velt-light-mode-accent: #0BA528;
      --velt-light-mode-accent-text: #0BA528;
      --velt-light-mode-accent-hover: #08841F;
      --velt-light-mode-accent-foreground: #FFFFFF;
      --velt-light-mode-accent-light: #DFF9E4;
      --velt-light-mode-accent-transparent: rgba(11, 165, 40, 0.08);

      --velt-dark-mode-accent: #0BA528;
      --velt-dark-mode-accent-text: #0BA528;
      --velt-dark-mode-accent-hover: #08841F;
      --velt-dark-mode-accent-foreground: #FFFFFF;
      --velt-dark-mode-accent-light: #DFF9E4;
      --velt-dark-mode-accent-transparent: rgba(11, 165, 40, 0.08);

      --velt-border-radius-2xs: 2px;
      --velt-border-radius-xs: 2px;
      --velt-border-radius-sm: 2px;
      --velt-border-radius-md: 2px;
      --velt-border-radius-lg: 2px;
      --velt-border-radius-xl: 2px;
      --velt-border-radius-2xl: 2px;
      --velt-border-radius-3xl: 2px;
      --velt-border-radius-full: 2px;
    }
    ```
</Update>

<Update label="3.0.66" description="Nov 18 2024">
  ### Features

  * \[**Comments**]: Added support for passing Comment Annotation objects to Standalone Comment Thread component.

    * When using annotations from other documents:
      * Comments will be read-only
      * Reactions and recordings will not be rendered
    * This enables creating Kanban boards by fetching comment annotations from multiple documents using our REST APIs.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentThread annotation={COMMENT_ANNOTATION_OBJECT} />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-thread annotation="STRINGIFIED_COMMENT_ANNOTATION_OBJECT"></velt-comment-thread>
          ```
        </Tab>
      </Tabs>

  * \[**Comments**]: Added `shortUserName` feature to control display of user names.

    * For long names, this will first create an initial of the second name and if the name is still long, it will truncate it with ellipses.
    * It's enabled by default.

      <Tabs>
        <Tab title="React / Next.js">
          **Using Props:**

          ```jsx theme={null}
          <VeltComments shortUserName={false} />
          ```

          **Using API:**

          ```js theme={null}
          const commentElement = client.getCommentElement();
          commentElement.enableShortUserName();
          commentElement.disableShortUserName();
          ```
        </Tab>

        <Tab title="Other Frameworks">
          **Using Props:**

          ```html theme={null}
          <velt-comments short-user-name="false"></velt-comments>
          ```

          **Using API:**

          ```js theme={null}
          const commentElement = Velt.getCommentElement();
          commentElement.enableShortUserName();
          commentElement.disableShortUserName();
          ```
        </Tab>
      </Tabs>
</Update>

<Update label="3.0.65" description="Nov 15 2024">
  ### Improvements

  * \[**Comments**]: Added support for light mode in the contact chip tooltip.
  * \[**Comments**]: Removed unnecessary filtering in the sidebar when comment annotation selection changes.
</Update>

<Update label="3.0.64" description="Nov 13 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where `onCommentSidebarData` event was getting triggered multiple times on sidebar clicks.
  * \[**Comments**]: Fixed an issue where empty placeholder was not being displayed in the sidebar for page mode and custom action filters.
</Update>

<Update label="3.0.63" description="Nov 12 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed issue where bottom sheet was incorrectly opening in the sidebar on mobile devices.
</Update>

<Update label="3.0.62" description="Nov 12 2024">
  ### Features

  * \[**Comments**]: Fixed issue where edit comment composer was not appearing in the sidebar.

  * \[**Comments**]: Added offset property to Comment Player Timeline. This allows comment bubbles to be positioned relative to both parent and child video clips.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentPlayerTimeline offset={10} />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-player-timeline offset="10"></velt-comment-player-timeline>
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Dynamic Hooks**]: Now the LiveStateSync and Views hooks support dynamic input parameters for non-primitive data types.

  ### Bug Fixes

  * \[**Comments**]: Fixed issue where edit comment composer was not appearing in the sidebar.
</Update>

<Update label="3.0.61" description="Nov 9 2024">
  ### Features

  * \[**REST APIs**]: Added advanced queries and pagination for GET endpoints.
    * You need to upgrade to version 3.0.61 and enable this in your developer console.
    * Check out the [V2 REST APIs endpoints](/api-reference/rest-apis/comments-feature/comment-annotations/get-comment-annotations-v2) for more information.
</Update>

<Update label="3.0.60" description="Nov 9 2024">
  ### Features

  * \[**Comments**]: Added ability to enable/disable recording transcription feature on recorder:

      <Tabs>
        <Tab title="React / Next.js">
          **Using Props:**

          ```jsx theme={null}
          <VeltComments recordingTranscription={false} />
          ```

          **Using API Methods:**

          ```javascript theme={null}
          // Using comment element
          const commentElement = client.getCommentElement();
          commentElement.enableRecordingTranscription();
          commentElement.disableRecordingTranscription();

          // Or using recorder element 
          const recorderElement = client.getRecorderElement();
          recorderElement.enableRecordingTranscription();
          recorderElement.disableRecordingTranscription();
          ```
        </Tab>

        <Tab title="Other Frameworks">
          **Using Props:**

          ```html theme={null}
          <velt-comments recording-transcription="false"></velt-comments>
          ```

          **Using API Methods:**

          ```javascript theme={null}
          // Using comment element
          const commentElement = Velt.getCommentElement();
          commentElement.enableRecordingTranscription();
          commentElement.disableRecordingTranscription();

          // Or using recorder element 
          const recorderElement = Velt.getRecorderElement();
          recorderElement.enableRecordingTranscription();
          recorderElement.disableRecordingTranscription();
          ```
        </Tab>
      </Tabs>

  ### Bug Fixes

  * \[**Comments**]: Fixed range error that occurred when recording without comment text.
</Update>

<Update label="3.0.59" description="Nov 8 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed several issues with the comment dialog and inline comments:
    * Fixed cursor position not being set correctly when focusing comment input
    * Fixed an issue where editing a comment and saving it as a draft created a new comment
    * Fixed an issue where sometimes comment pin was visible on the inline comments section
</Update>

<Update label="3.0.58" description="Nov 6 2024">
  ### Improvements

  * \[**Comments**]: Added ability to sort inline comments:

    * `asc`: Show comments in ascending order of last updated timestamp
    * `desc`: Show comments in descending order of last updated timestamp
    * `none`: Show comments in order of creation (default)

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltInlineCommentsSection sortData="desc" />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-inline-comments-section sort-data="asc"></velt-inline-comments-section> 
          ```
        </Tab>
      </Tabs>

  * \[**Comments**]: Further improved how empty comments are handled:
    * Empty comments are now hidden from the sidebar and sidebar button count
    * In popover mode, clicking a new comment button discards any previous empty comment

  * \[**Comments**]: Added delete option for each comment in annotations when user has admin privileges.
</Update>

<Update label="3.0.57" description="Nov 5 2024">
  ### Bug Fixes

  * \[**Notifications**]: Optimized and fixed issues related to loading notifications on `documentId` and `organizationId` change.
</Update>

<Update label="3.0.56" description="Nov 1 2024">
  ### Improvements

  * \[**Comments**]: Improved the system grouping logic for locations.
  * \[**Comments**]: Enhanced `updateContext` logic to prevent unnecessary updates if the passed context object remains unchanged.
  * \[**Comments**]: Exposed `commentAnnotations` variable in the comments sidebar so that it can be used in `Velt Data` and `Velt If` Components.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where adding the `Copy Link` wireframe component in the header options menu generated undefined Comment URLs.
</Update>

<Update label="3.0.54" description="Oct 30 2024">
  ### Improvements

  * \[**Comments**]: The "clear filter" button in the sidebar now only appears when comments are hidden due to active filters, not when there are no comments on the document.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue with the Assign feature across different comment modes:
    * Page mode
    * Inline mode
    * Multi-thread mode

  * \[**Comments**]: Fixed an issue where reactions were not updated in focused thread mode.
</Update>

<Update label="3.0.53" description="Oct 29 2024">
  ### New Features

  * \[**Comments**]: Now comments are supported on elements with duplicate DOM IDs.

    * This is useful in cases where you have multiple instances of the same data component on a page and want the comment to appear on each instance, eg: Popover comments on a table.
    * By default, comments appear on all matching elements. Use the `sourceId` attribute to control which element displays the comment dialog when adding a new comment.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentTool sourceId="sourceId1" />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-tool source-id="sourceId1"></velt-comment-tool>
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: In multithread mode, now you can deselect a thread by clicking on the header of the multi-thread dialog.
  * \[**Comments**]: Removed self user from the list of users in the "Seen By" dropdown.
  * \[**Comments**]: Removed users without name and email from the list of users in the "Seen By" dropdown.

  ### Bug Fixes

  * \[**Tiptap Comments**]: Removed `data-velt-content` attribute. Now the highlighted text styling is only applied to text when there are comments available.
  * \[**Comments**]: Fixed an issue where undefined and null string values appeared in individual and group contact lists.
</Update>

<Update label="3.0.52" description="Oct 25 2024">
  ### Bug Fixes

  * \[**Security**]: Added security updates.
</Update>

<Update label="3.0.51" description="Oct 25 2024">
  ### New Features

  * \[**Recorder**]: Added `getRecordingData` API to fetch [recording data](/api-reference/models/RecorderData) including transcript, summary, and recording URLs.

      <Tabs>
        <Tab title="React / Next.js">
          **Using Hook:**

          ```jsx theme={null}
          const recorderData = useRecordingDataByRecorderId('-O9yTMWmEe5u6YGX8EFV');

          useEffect(() => {
              console.log('Recorder Data: ', recorderData);
          }, [recorderData]);
          ```

          **Using API:**

          ```jsx theme={null}
          const recorderElement = client.getRecorderElement();

          recorderElement.getRecordingDataByRecorderId("-O9yGiYS8lehOXMpQf4j").subscribe((recorderData) => {
              console.log('Recorder Data: ', recorderData);
          });
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```javascript theme={null}
          const recorderElement = Velt.getRecorderElement();

          recorderElement.getRecordingDataByRecorderId("-O9yGiYS8lehOXMpQf4j").subscribe((recorderData) => {
              console.log('Recorder Data: ', recorderData);
          });
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: In the sidebar, changed default `isExpanded` behavior in custom filtering. If not explicitly set, the first group will be expanded while remaining groups are collapsed.
</Update>

<Update label="3.0.50" description="Oct 24 2024">
  ### New Features

  * \[**Comments**]: Added variant support to the `Velt Comment Pin` component. This is useful for customizing how the pin looks on different elements like charts, tables, etc.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentPin variant="CUSTOM_VARIANT" />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-pin variant="CUSTOM_VARIANT"></velt-comment-pin>
          ```
        </Tab>
      </Tabs>

  * \[**Access Control**]: Enabled users logged in with "Org A" to access documents belonging to "Org B".
    * By default, users can only access documents within their own organization.
    * You can enable cross-organization access by specifying the `organizationId` of the target document in the document metadata.
    * Ensure that the user has access to the target document in the target organization.

  <Tabs>
    <Tab title="React / Next.js">
      **Using Hook:**

      ```jsx theme={null}
      useSetDocument(DOCUMENT_ID, {
        organizationId: 'ANOTHER_ORGANIZATION_ID'
      });
      ```

      **Using API:**

      ```jsx theme={null}
      client.setDocument(DOCUMENT_ID, {
        organizationId: 'ANOTHER_ORGANIZATION_ID'
      });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```javascript theme={null}
      Velt.setDocument(DOCUMENT_ID, {
        organizationId: 'ANOTHER_ORGANIZATION_ID'
      });
      ```
    </Tab>
  </Tabs>

  * \[**Comments**]: Added ability to toggle the "Seen By" feature:

      <Tabs>
        <Tab title="React / Next.js">
          **Using Props:**

          ```jsx theme={null}
          <VeltComments seenByUsers={false} />
          ```

          **Using API:**

          ```jsx theme={null}
          const commentElement = client.getCommentElement();
          commentElement.enableSeenByUsers();
          commentElement.disableSeenByUsers();
          ```
        </Tab>

        <Tab title="Other Frameworks">
          **Using Props:**

          ```html theme={null}
          <velt-comments seen-by-users="false"></velt-comments>
          ```

          **Using API:**

          ```javascript theme={null}
          const commentElement = Velt.getCommentElement();
          commentElement.enableSeenByUsers();
          commentElement.disableSeenByUsers();
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Live Selection**]: Improved the live selection UI.

  * \[**Recording**]: Added new wireframes for the recording feature:
    * Media Source Settings
    * Recorder All Tool
    * Recorder All Tool Menu
    * Recorder Audio Tool
    * Recorder Video Tool
    * Recorder Screen Tool
    * Recording Preview Steps Dialog
    * Recorder Control Panel
    * Recorder Player
    * Video Player
    * Subtitles
    * Transcription

  * \[**Comments**]: Updated the empty state UI and added a clear filter button in the sidebar.

  * \[**Comments**]: The "Custom filters" applied by the user are now stored in session storage just like the System filters.

  ### Improvements

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue in Tiptap editor where the comment dialog closed prematurely after adding a comment in single-thread mode.
  * \[**Comments**]: Fixed an issue on minimap where clicking on it was not navigating to the comment location.
  * \[**Comments**]: Fixed an issue where image attachments in comments were not opening in the lightbox.
  * \[**Comments**]: Fixed an issue where the "AtHere" was not working when the label was set to "all".
</Update>

<Update label="3.0.49" description="Oct 17 2024">
  ### Improvements

  * \[**Security**]: Added security updates.
</Update>

<Update label="3.0.48" description="Oct 17 2024">
  ### Improvements

  * \[**Comments**]: Added dark mode support for the "Seen By" dropdown in the comment dialog.
</Update>

<Update label="3.0.47" description="Oct 16 2024">
  ### New Features

  * \[**Webhooks**]: Added configuration option to encrypt webhook payloads using a secret key.
    * Configure this option in the [Velt Console](https://console.velt.dev/dashboard/config/webhook).
    * Encryption details:
      * Payload encryption: AES-256-CBC
      * Key encryption: RSA with PKCS1 OAEP padding and SHA-256 hash
    * Public key format:
      * Provide only the base64-encoded key string, without PEM headers/footers
      * Recommended key size: 2048 bits
    * Example of setting up encryption for Node.js:

  <Tabs>
    <Tab title="Sample Encrypted Payload">
      ```js theme={null}
      {
        "encryptedData": "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",
        "encryptedKey": "OzSHFXzrXFC5wDvM5NPRkriY/NaC/USvFUPE+f4NZ30tiD2qb8sJM2XT2K7uNIZ05uDLfsJ6/BbEoYC1SOPXcFJMYqRiYFiI9RWrNgR4EtPWZ84RgrmxGcZZjzSqHzjuls8g++cuqJGRV+ePbTRH+z2OuZZu0vMKZiemaZpHL46Ewi9HUnbRDXvOlKFFHmQm5tayZ7m7Mv5iu4T5R3DPEAHlZnGqtP98ToLxUJUS2Eku/iLHXRmhmZXn55Qt5GYiyss8P5/miPqJCu1QG0CStn5Nsl4KvU+I4QYAOcMFWWUAGofOwPWtt8vPh8Bx+7t7BbayKpA4ZUEWWAjC+zASxg==",
        "iv": "SHM0UHU5WXoyTG03TnExWA=="
      }
      ```
    </Tab>

    <Tab title="Sample Decryption Code">
      ```javascript theme={null}
          const crypto = require('crypto');

          /**
           * Decrypts the symmetric key using the provided private key.
           * @param {string} encryptedKey - Base64 encoded encrypted symmetric key
           * @param {string} privateKey - RSA private key
           * @returns {Buffer} Decrypted symmetric key
           */
          function decryptSymmetricKey(encryptedKey, privateKey) {
              try {
                  const encryptedSymmetricKey = Buffer.from(encryptedKey, 'base64');
                  const decryptedSymmetricKey = crypto.privateDecrypt(
                      {
                          key: `-----BEGIN RSA PRIVATE KEY-----\n${privateKey}\n-----END RSA PRIVATE KEY-----`,
                          padding: crypto.constants.RSA_PKCS1_OAEP_PADDING,
                          oaepHash: 'sha256',
                      },
                      encryptedSymmetricKey
                  );
                  return decryptedSymmetricKey;
              } catch (error) {
                  console.error('Error decrypting symmetric key:', error);
                  throw new Error('Failed to decrypt symmetric key');
              }
          }

          /**
           * Decrypts the webhook data using the provided symmetric key and IV.
           * @param {string} encryptedWebhookData - Base64 encoded encrypted webhook data
           * @param {Buffer} symmetricKey - Decrypted symmetric key
           * @param {string} payloadIv - Base64 encoded initialization vector
           * @returns {Object} Decrypted webhook data as a JSON object
           */
          function decryptWebhookData(encryptedWebhookData, symmetricKey, payloadIv) {
              try {
                  const iv = Buffer.from(payloadIv, 'base64');
                  const decipher = crypto.createDecipheriv('aes-256-cbc', symmetricKey, iv);
                  let decryptedData = decipher.update(encryptedWebhookData, 'base64', 'utf8');
                  decryptedData += decipher.final('utf8');
                  return JSON.parse(decryptedData);
              } catch (error) {
                  console.error('Error decrypting webhook data:', error);
                  throw new Error('Failed to decrypt webhook data');
              }
          }

          // Example usage:
          // const decryptedKey = decryptSymmetricKey(encryptedKey, privateKey);
          // const decryptedData = decryptWebhookData(encryptedWebhookData, decryptedKey, payloadIv);
      ```
    </Tab>
  </Tabs>

  ### Improvements

  * \[**Comments**]: Improved time display in comment dialog by removing "just" from timeago text to make it more concise.
</Update>

<Update label="3.0.46" description="Oct 16 2024">
  ### New Features

  * \[**Comments**]: Added "Seen" Feature in the comment dialog. It shows which users have seen the comments. It's automatically enabled in the default component.
    * If you had previously used a wireframe for the comment dialog, you will need to add the [seen component wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard).

  <Frame>
    <img src="https://mintcdn.com/velt/vGgIoGfoceFP8dEI/images/seen-feature.png?fit=max&auto=format&n=vGgIoGfoceFP8dEI&q=85&s=024e7621542b4c2bb94f1351f64d56d2" alt="" width="2004" height="1128" data-path="images/seen-feature.png" />
  </Frame>

  * \[**Comments**]: Added a dynamic attribute to identify if the current user is the author of a comment inside the comment thread:
    * Use the `velt-current-user-author` attribute to conditionally hide options for non-authors:
      ```css theme={null}
      [velt-current-user-author='false'] app-comment-dialog-thread-card-options {
        display: none;
      }
      ```
</Update>

<Update label="3.0.45" description="Oct 15 2024">
  ### New Features

  * \[**Comments**]: Added config to restrict resolve action to admin users only:

      <Tabs>
        <Tab title="React / Next.js">
          **Using props:**

          ```jsx theme={null}
          <VeltComments resolveStatusAccessAdminOnly={true} />
          ```

          **Using API:**

          ```javascript theme={null}
          const commentElement = client.getCommentElement();
          // To enable resolve status access admin only
          commentElement.enableResolveStatusAccessAdminOnly();
          // To disable resolve status access admin only
          commentElement.disableResolveStatusAccessAdminOnly();
          ```
        </Tab>

        <Tab title="Other Frameworks">
          **Using props:**

          ```html theme={null}
          <velt-comments resolve-status-access-admin-only="true"></velt-comments>
          ```

          **Using API:**

          ```javascript theme={null}
          const commentElement = Velt.getCommentElement();
          // To enable resolve status access admin only
          commentElement.enableResolveStatusAccessAdminOnly();
          // To disable resolve status access admin only
          commentElement.disableResolveStatusAccessAdminOnly();
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: Added ability to @mention emails not present in the contact list.
  * \[**Comments**]: Implemented focus on composer when clicked anywhere within the composer.
</Update>

<Update label="3.0.44" description="Oct 14 2024">
  ### Improvements

  * \[**Comments**]: Added "This page" label to the sidebar filters.
  * \[**Comments**]: Added React wireframe component for Navigation button:

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      <VeltCommentDialogWireframe.NavigationButton />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-comment-dialog-navigation-button-wireframe></velt-comment-dialog-navigation-button-wireframe>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.43" description="Oct 14 2024">
  ### New Features

  * \[**Comments**]: Added "focused thread mode" in the comments sidebar:
    * In this mode, when you click on a comment in the sidebar, it will open the thread in expanded view within the sidebar itself.
    * Other threads and actions like filters, search etc are hidden behind a back button.
    * Turning this on also adds a navigation button in the comment dialog. Clicking it will navigate to the comment and also trigger a callback.
    * If you had previously used a wireframe for the comment dialog, you will need to add the [navigation button wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/navigation-button) and the [focused thread wireframe](/ui-customization/features/async/comments/comments-sidebar/subcomponents/focused-thread).

        <Tabs>
          <Tab title="React / Next.js">
            ```jsx theme={null}
            <VeltCommentsSidebar focusedThreadMode={true} />
            ```

            **Handling the navigation button click:**

            ```jsx theme={null}
            <VeltCommentsSidebar onCommentNavigationButtonClick={onCommentNavigationButtonClick} />

              // event handler for when a comment is clicked on 
              const onCommentNavigationButtonClick = (event) => {
                console.log('onCommentNavigationButtonClick', event);
                //handle custom navigation by getting location if you have used Locations
                const { pageId } = event.location;
                //handle custom navigation by getting context if you have used addContext()
                const { pageId } = event.context;
                yourNavigateToPageMethod(pageId);
              };
            ```
          </Tab>

          <Tab title="Other Frameworks">
            ```html theme={null}
            <velt-comments-sidebar focused-thread-mode="true"></velt-comments-sidebar>
            ```

            **Handling the navigation button click:**

            ```javascript theme={null}
            const commentSidebarElement = document.querySelector('velt-comments-sidebar');
            commentSidebarElement.addEventListener('onCommentNavigationButtonClick', (s) => {
              console.log('onCommentNavigationButtonClick', s.detail);
            });
            ```
          </Tab>
        </Tabs>

  * \[**Comments**]: Added standalone thread wireframe component:

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltWireframe>
            <VeltCommentThreadWireframe>
              {/* Velt Comment Dialog Wireframe */}
            </VeltCommentThreadWireframe>
          </VeltWireframe>
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-wireframe style="display: none;">
            <velt-comment-thread-wireframe>
              <!-- Velt Comment Dialog Wireframe -->
            </velt-comment-thread-wireframe>
          </velt-wireframe>
          ```
        </Tab>
      </Tabs>

  * \[**Live Selection**]: Add ability to get live selection data for the document:

      <Tabs>
        <Tab title="React / Next.js">
          **Using Hook:**

          ```jsx theme={null}
            const liveSelectionData = useLiveSelectionDataHandler();

            useEffect(() => {
              console.log('liveSelectionData', liveSelectionData);
            }, [liveSelectionData]);
          ```

          **Using API:**

          ```javascript theme={null}
            const selectionElement = client.getSelectionElement();
            selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
              console.log("liveSelectionData: ", liveSelectionData);
            });
          ```
        </Tab>

        <Tab title="Other Frameworks">
          **Using API:**

          ```javascript theme={null}
            const selectionElement = Velt.getSelectionElement();
            selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
              console.log("liveSelectionData: ", liveSelectionData);
            });
          ```
        </Tab>
      </Tabs>

  * \[**Comments**]: Added standalone `Velt Comment Text` component:

    * When you put any text inside this component and provide an annotationId, it will automatically highlight the text and attach the comment to it.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentText multiThreadAnnotationId='MULTI_THREAD_ANNOTATION_ID'>
            {/* your content here */}
          </VeltCommentText>

          <VeltCommentText annotationId='ANNOTATION_ID'>
            {/* your content here */}
          </VeltCommentText>
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-text multi-thread-annotation-id="MULTI_THREAD_ANNOTATION_ID">
            <!-- your content here -->
          </velt-comment-text>

          <velt-comment-text annotation-id="ANNOTATION_ID">
            <!-- your content here -->
          </velt-comment-text>
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Notifications**]: Changed the default maximum days for which Notifications should be displayed from 30 days to 15 days.
  * \[**Notifications**]: Added complete document and organization metadata objects to the Notification metadata object.
</Update>

<Update label="3.0.42" description="Oct 11 2024">
  ### New Features

  * \[**Live Selection**]: Added new configurations to customize the UI and behavior of the live selection feature:
    * Enable/disable user indicator
    * Set user indicator position
    * Set user indicator type
    * Enable/disable default elements tracking
    * Enable/disable default styling
    * Earlier the live selection was triggered on click, now it is triggered on keyboard actions as well.
    * [Learn more](/realtime-collaboration/live-selection/customize-behavior).
</Update>

<Update label="3.0.41" description="Oct 11 2024">
  ### New Features

  * \[**Comments**]: Added ability to apply custom filtering, sorting and grouping in comments sidebar.
    * Here is the overview on how it works:
      * Enable custom actions in the comments sidebar.
      * Add action buttons to the sidebar wireframe.
      * Implement callback and event handlers to handle custom filtering, sorting, and grouping logic.
      * Set custom filtered data in the comments sidebar.
    * [Learn more](/async-collaboration/comments-sidebar/customize-behavior#2-custom-filtering-sorting-and-grouping).
</Update>

<Update label="3.0.40" description="Oct 10 2024">
  ### Bug Fixes

  * \[**Mentions**]: Resolved an issue where `atHereDescription` was not rendering for non-organization users.
</Update>

<Update label="3.0.39" description="Oct 10 2024">
  ### New Features

  * \[**Notifications**]: Added API to mark a single notification as read by notificationId.

      <Tabs>
        <Tab title="React / Next.js">
          ```javascript theme={null}
          const notificationElement = client.getNotificationElement();
          notificationElement.markNotificationAsReadById("notificationId");
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```javascript theme={null}
          const notificationElement = Velt.getNotificationElement();
          notificationElement.markNotificationAsReadById("notificationId");
          ```
        </Tab>
      </Tabs>

  * \[**Debugger**]: Added call to `setDocument` method to the debugger.

  ### Improvements

  * \[**Mentions**]: Added `atHereDescription` to the `description` field of the @mention data object.

  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where the "For You" tab was not displaying the updated document name on initial load.
</Update>

<Update label="3.0.38" description="Oct 10 2024">
  ### New Features

  * \[**Mentions**]: Added styling for @mention in the composer when adding or editing a comment.

  ### Improvements

  * \[**React Hooks**]: Updated client and comment related hooks to support dynamic input values.

  ### Bug Fixes

  * \[**Mentions**]: Fixed an issue in the `updateContactList` API where the passed contact list data was being mutated directly.
  * \[**Mentions**]: Resolved an issue where @mentions with special characters were not working correctly.
</Update>

<Update label="3.0.37" description="Oct 9 2024">
  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where the `unreadCommentsMap` count was not updating correctly when switching between documents with no unread comments.
</Update>

<Update label="3.0.36" description="Oct 9 2024">
  ### New Features

  * \[**Comments**]: Added shadowDOM, dark mode, and variant support in standalone Comment Thread component.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentThread 
            darkMode={true}
            shadowDom={false}
            variant="component-variant" 
            dialogVariant="dialog-variant"
          />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-thread 
            dark-mode="true" 
            shadow-dom="false"
            dialog-variant="dialog-variant"
            variant="component-variant"
          ></velt-comment-thread> 
          ```
        </Tab>
      </Tabs>

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where scroll was causing the "Add reply" button to hide.
  * \[**Comments**]: Fixed an issue where the assign to dialog was not closing after assigning a user using the keyboard.
</Update>

<Update label="3.0.35" description="Oct 8 2024">
  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where the `document` tab was not visible when user email was not set.
</Update>

<Update label="3.0.34" description="Oct 8 2024">
  ### New Features

  * \[**Comments**]: Added support for overlay text commenting in Tiptap editor.
    * It works with all frontend frameworks that are supported by Tiptap.
    * You can find the extension [here](https://www.npmjs.com/package/@veltdev/tiptap-velt-comments).

  <Steps titleSize="h2">
    <Step title="Install the Velt Tiptap extension">
      ```bash theme={null}
      npm i @veltdev/tiptap-velt-comments
      ```
    </Step>

    <Step title="Import and add the extension to your Tiptap editor">
      ```javascript theme={null}
      import { TiptapVeltComments } from '@veltdev/tiptap-velt-comments';

      const editor = new Editor({
        extensions: [
          TiptapVeltComments,
          // ... other extensions
        ],
      });
      ```
    </Step>

    <Step title="Add a comment using the `addTiptapVeltComment` method">
      * Call this method to add a comment to selected text in the Tiptap editor. You can use this when the user clicks on the comment button in context menu or presses a keyboard shortcut.

      * Args:
        * `editor`: instance of the Tiptap editor.
        * `tiptapVeltCommentConfig`: optional object to set the Comment Annotation's custom metadata.

      * Example:
        ```javascript theme={null}
        import { addTiptapVeltComment } from '@veltdev/tiptap-velt-comments';

        addTiptapVeltComment(editor, tiptapVeltCommentConfig);
        ```
    </Step>
  </Steps>

  ### Improvements

  * \[**Console Debugger**]: Added logs for the `updateContactList` method to improve debugging.
</Update>

<Update label="3.0.33" description="Oct 7 2024">
  ### Improvements

  * \[**Console Debugger**]: Added logs for `addContext` and `updateContext` methods. The context object is now included in the log event properties for better debugging and tracking.
  * \[**Comments**]: Now comments will be marked as read if opened via the `selectCommentByAnnotationId()` API.

  ### Bug Fixes

  * \[**Comment Display**]: Improved comment rendering performance for Comments Sidebar.
</Update>

<Update label="3.0.32" description="Oct 7 2024">
  ### New Features

  * \[**Comments Sidebar**]: Added a reset filter button to easily clear all applied filters.
    * This new button allows users to quickly reset all filters in the comments sidebar when no comments are available for the applied filters.
    * Here is the wireframe for the reset filter button:

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      <VeltCommentsSidebarWireframe.ResetFilterButton />
      ```
    </Tab>

    <Tab title="HTML">
      ```html theme={null}
      <velt-comments-sidebar-reset-filter-button-wireframe></velt-comments-sidebar-reset-filter-button-wireframe>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.31" description="Oct 4 2024">
  ### Improvements

  * \[**Notifications**]: Improved loading state for API calls, now returns null until data is fully loaded.
</Update>

<Update label="3.0.30" description="Oct 4 2024">
  ### New Features

  * \[**Notifications**]: Added API to get unread notifications count.
    * **Sample response:**
    ```javascript theme={null}
    { 
      forYou: 4, // # of unread notifications in the "For You" tab
      all: 5     // # of unread notifications in the "All" or "Document" tab
    }
    ```

  <Tabs>
    <Tab title="React / Next.js">
      Using Hooks:

      ```jsx theme={null}
      const unreadCount = useUnreadNotificationsCount();

      useEffect(() => {
        console.log('Unread Count', unreadCount);
      }, [unreadCount]);
      ```

      Using API:

      ```javascript theme={null}
      const notificationElement = client.getNotificationElement();
      notificationElement.getUnreadNotificationsCount().subscribe((data) => {
        console.log('Unread notifications count:', data);
      });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```javascript theme={null}
      const notificationElement = Velt.getNotificationElement();
      notificationElement.getUnreadNotificationsCount().subscribe((data) => {
        console.log('Unread notifications count:', data);
      });
      ```
    </Tab>
  </Tabs>

  ### Improvements

  * \[**Comments**]: Improved search functionality in @mentions to support spaces in search queries.
</Update>

<Update label="3.0.29" description="Oct 3 2024">
  ### New Features

  * \[**Comments**]: Added ability to control whether comments inside the annotation should be collapsed.

  <Tabs>
    <Tab title="React / Next.js">
      Using Props:

      ```jsx theme={null}
      <VeltComments collapsedComments={false} />
      ```

      Using API:

      ```javascript theme={null}
      const commentElement = client.getCommentElement();
      commentElement.enableCollapsedComments();
      commentElement.disableCollapsedComments();
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-comments collapsed-comments="false"></velt-comments>
      ```

      Using API:

      ```javascript theme={null}
      const commentElement = Velt.getCommentElement();
      commentElement.enableCollapsedComments();
      commentElement.disableCollapsedComments();
      ```
    </Tab>
  </Tabs>

  * \[**Comments**]: Added ability to get comment annotation by ID.

  <Tabs>
    <Tab title="React / Next.js">
      Using Hooks:

      ```jsx theme={null}
      const annotation = useCommentAnnotationById({
        annotationId: '-O6W3jD0Lz3rxuDuqQFx',  // AnnotationID
        documentId: 'document-id'              // DocumentId (Optional)
      });

      React.useEffect(() => {
        console.log('annotation', annotation);
      }, [annotation]);
      ```

      Using API:

      ```javascript theme={null}
      const commentElement = client.getCommentElement();

      commentElement.getCommentAnnotationById({
        annotationId: '-O6W3jD0Lz3rxuDuqQFx',  // AnnotationID
        documentId: 'document-id'              // DocumentId (Optional)
      }).subscribe((annotation) => {
        console.log('annotation', annotation);
      });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using API:

      ```javascript theme={null}
      const commentElement = Velt.getCommentElement();

      commentElement.getCommentAnnotationById({
        annotationId: '-O6W3jD0Lz3rxuDuqQFx',  // AnnotationID
        documentId: 'document-id'              // DocumentId (Optional)
      }).subscribe((annotation) => {
        console.log('annotation', annotation);
      });
      ```
    </Tab>
  </Tabs>

  * \[**Notifications**]: Added API to mark all notifications as read.
    * Mark all notifications as read, either globally or for a specific tab.
    * Using 'all' or 'document' as the `tabId` marks all notifications as read across all tabs (equivalent to calling `setAllNotificationsAsRead()` without arguments).
    * Using 'for-you' as the `tabId` only marks notifications in the 'for-you' tab as read.

  <Tabs>
    <Tab title="React / Next.js">
      ```javascript theme={null}
      const notificationElement = client.getNotificationElement();

      // Mark all notifications as read
      notificationElement.setAllNotificationsAsRead();

      // Mark all notifications as read for a specific tab
      notificationElement.setAllNotificationsAsRead({ tabId: 'for-you' });
      notificationElement.setAllNotificationsAsRead({ tabId: 'all' });
      notificationElement.setAllNotificationsAsRead({ tabId: 'document' });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```javascript theme={null}
      const notificationElement = Velt.getNotificationElement();

      // Mark all notifications as read
      notificationElement.setAllNotificationsAsRead();

      // Mark all notifications as read for a specific tab
      notificationElement.setAllNotificationsAsRead({ tabId: 'for-you' });
      notificationElement.setAllNotificationsAsRead({ tabId: 'all' });
      notificationElement.setAllNotificationsAsRead({ tabId: 'document' });
      ```
    </Tab>
  </Tabs>

  ### Bug Fixes

  * \[**UI Customization**]: Fixed an issue in `velt if` where string comparisions were not working as expected.
</Update>

<Update label="3.0.28" description="Oct 3 2024">
  ### New Features

  * \[**Comments**]: Added a reset filter button wireframe in multithread comment dialog.

  * \[**Notifications**]: Added a notifications panel loading state skeleton with wireframes.

  <Tabs>
    <Tab title="React / Next.js">
      ```javascript theme={null}
      <VeltNotificationsPanelWireframe.Skeleton />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-notifications-panel-skeleton></velt-notifications-panel-skeleton>
      ```
    </Tab>
  </Tabs>

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where draft comments were not being saved for multithread comments in some cases.
  * \[**Comments**]: Fixed an issue where in inline mode, when editing a comment, the annotation was not being selected.
</Update>

<Update label="3.0.27" description="Oct 1 2024">
  ### New Features

  * \[**Comments**]: Added a prop to enable confirmation before deleting a reply.

  <Tabs>
    <Tab title="React / Next.js">
      Using Props:

      ```jsx theme={null}
      <VeltComments deleteReplyConfirmation={true} />
      ```

      Using API:

      ```javascript theme={null}
      const commentElement = client.getCommentElement();
      commentElement.enableDeleteReplyConfirmation();
      commentElement.disableDeleteReplyConfirmation();
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-comments delete-reply-confirmation="true"></velt-comments>
      ```

      Using API:

      ```javascript theme={null}
      const commentElement = Velt.getCommentElement();
      commentElement.enableDeleteReplyConfirmation();
      commentElement.disableDeleteReplyConfirmation();
      ```
    </Tab>
  </Tabs>

  * \[**Comments**]: Added a callback method for when a comment link is copied. You can use this to track when a comment link is copied or show a confirmation toast.

  <Tabs>
    <Tab title="React / Next.js with Hooks">
      Using Hooks:

      ```jsx theme={null}
        const commentLink = useCommentCopyLinkHandler();
        useEffect(() => {
          console.log('commentLink', commentLink);
        }, [commentLink]);
      ```

      Using API:

      ```jsx theme={null}
      const commentElement = client.getCommentElement();
      commentElement.onCopyLink().subscribe((commentLink) => {
        console.log(commentLink);
      });
      ```
    </Tab>

    <Tab title="React / Next.js">
      Using API:

      ```jsx theme={null}
      const commentElement = client.getCommentElement();
      commentElement.onCopyLink().subscribe((commentLink) => {
        console.log(commentLink);
      });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using API:

      ```javascript theme={null}
      const commentElement = Velt.getCommentElement();
      commentElement.onCopyLink().subscribe((commentLink) => {
        console.log(commentLink);
      });
      ```
    </Tab>
  </Tabs>

  * \[**Comments**]: Added a minimal Actions Dropdown in Multithread comment dialog. It contains actions like 'Mark all as read', 'Mark all as resolved'.

  ### Improvements

  * \[**UI Customization**]: Renamed the `velt data` prop to `field` (old: `path`) to improve readability. This is backward compatible.

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      <VeltData field='userContact.name' />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```jsx theme={null}
      <velt-data field="userContact.name"></velt-data>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.26" description="Sept 30 2024">
  ### Improvements

  * \[**Comments**]: Renamed `multiThreadMode` prop to `multiThread` for improved clarity and consistency.
  * \[**Comments**]: Removed the "0 comments" from the multithread container header, when the first thread is created.
  * \[**Comments**]: The comment pin bubble count in multithread mode would sync with the number of unresolved comments in the multithread container.
  * \[**Comments**]: Added an unread indicator on the comment pin bubble in multithread mode to help users quickly identify new or unread comments.
  * \[**UI Customization**]: Added improvements to the `velt if` conditional rendering logic.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the menu trigger button would hide when the mouse moved on the menu.
  * \[**Notifications**]: Resolved an issue where `documentName` wasn't displayed on the notification item in the notification panel.
</Update>

<Update label="3.0.25" description="Sept 28 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the composer would throw a console error on Firefox. This didn't have any impact on functionality or UX.
  * \[**Comments**]: Fixed reply button toggle issue.
</Update>

<Update label="3.0.24" description="Sept 28 2024">
  ### Improvements

  * \[**Comments**]: Improvements to the comments UX in multithread mode.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where sign in button was showing up for logged in users on mobile. This only impacted customers where signIn button was enabled.
</Update>

<Update label="3.0.23" description="Sept 26 2024">
  ### New Features

  * \[**Webhooks**]: Added configuration option for base64 encoding of webhook payloads (disabled by default).
    * Addresses issues with payloads containing HTML tags that may fail due to strict endpoint policies.
    * Ensures payload validity and processability by your endpoint.
    * Example of decoding a base64 encoded payload:

  ```js theme={null}
  const encodedData="eyJ0ZXN0IjoxLCJ0ZXN0MSI6IjxkaXY+PC9kaXY+In0="
  const decodedData = Buffer.from(encodedData, 'base64').toString('utf-8');
  console.log(JSON.parse(decodedData));
  ```

  ### Improvements

  * \[**Comments**]: Significant enhancements to the comments UX in multithread mode:
    * Implemented smooth auto-scroll animation to new threads for improved visibility
    * Added a new comment button to the header for easier thread creation
    * Refined composer show/hide logic for a more intuitive user experience
    * Shortened the displayed timestamp format

  * \[**Comments**]: Improved the UI for [custom autocomplete dropdown chip](/async-collaboration/comments/customize-behavior#custom-lists).

  * \[**Notifications**]: Notifications feature and API no longer require documentId to be set for initialization.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the custom autocomplete chip would fail to render if the same chip is added multiple times.
</Update>

<Update label="3.0.22" description="Sept 25 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed a bug where clicking on one's own reaction on the [Velt Comment Player Timeline](/async-collaboration/comments/setup/video-player-setup/custom-video-player-setup) didn't toggle it correctly.
</Update>

<Update label="3.0.21" description="Sept 25 2024">
  ### Improvements

  * \[**Comments**]: Added `createdAt` field for [CommentAnnotation](/api-reference/models/CommentAnnotation) model. This can now be used to sort annotations in ascending order of creation.
  * \[**Comments**]: Added `isEdited` and `editedAt` fields in [Comment](/api-reference/models/Comment) model. This can now used to indicate if and when a comment is edited.
  * \[**Comments**]: In multithread mode, the count on the header is now synced with the total threads visible after all the filters are applied.
  * \[**Comments**]: Inline and multi-thread comments are now sorted in ascending order by the `createdAt` field, maintaining backward compatibility.
  * \[**Comments**]: Improved the behavior where the mutlthread container was auto-closing when one of the threads was deleted or resolved.

  ### Bug Fixes

  * \[**Comments**]: Fixed a bug where deleting a recording in a single-comment thread incorrectly triggered the Delete Thread dialog.
  * \[**Comments**]: Fixed a bug where resolved comment threads weren't disappearing in [inline comment mode](/async-collaboration/comments/setup/inline-comments).
</Update>

<Update label="3.0.20" description="Sept 25 2024">
  ### New Features

  * \[**Notifications**]: Added a configurable option to show read notifications in the "For You" tab. By default, read notifications are removed from the "For You" tab.

  <Tabs>
    <Tab title="React / Next.js with Hooks">
      Using Props:

      ```jsx theme={null}
      <VeltNotificationsTool readNotificationsOnForYouTab={true} />
      <VeltNotificationsPanel readNotificationsOnForYouTab={true} />
      ```

      Using APIs:

      ```jsx theme={null}
      const notificationElement = useNotificationUtils();
      // Enable to keep read notifications in the for you tab
      notificationElement.enableReadNotificationsOnForYouTab();
      // Disable to hide read notifications in the for you tab
      notificationElement.disableReadNotificationsOnForYouTab();
      ```
    </Tab>

    <Tab title="React / Next.js">
      Using Props:

      ```jsx theme={null}
      <VeltNotificationsTool readNotificationsOnForYouTab={true} />
      <VeltNotificationsPanel readNotificationsOnForYouTab={true} />
      ```

      Using APIs:

      ```jsx theme={null}
      const notificationElement = client.getNotificationElement();
      // Enable to keep read notifications in the for you tab
      notificationElement.enableReadNotificationsOnForYouTab();
      // Disable to hide read notifications in the for you tab
      notificationElement.disableReadNotificationsOnForYouTab();
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-notifications-tool read-notifications-on-for-you-tab="true">
      </velt-notifications-tool>
      <velt-notifications-panel read-notifications-on-for-you-tab="true">
      </velt-notifications-panel>
      ```

      Using API:

      ```html theme={null}
      <script>
        // Using APIs
        const notificationElement = Velt.getNotificationElement();
        // Enable to keep read notifications in the for you tab
        notificationElement.enableReadNotificationsOnForYouTab();
        // Disable to hide read notifications in the for you tab
        notificationElement.disableReadNotificationsOnForYouTab();
      </script>
      ```
    </Tab>
  </Tabs>

  For more details on customizing notifications behavior, refer to the [Notifications Behavior](/async-collaboration/notifications/customize-behavior) section.

  ### Improvements

  * \[**REST API**]: Added advanced querying and pagination on REST APIs for improved performance and functionality.
  * \[**Comments**]: Made the rendering of comment dialog action buttons configurable via CSS on hover or selection.

  ### Bug Fixes

  * \[**Comments**]: Resolved a rare bug where the triangle pin component would cause the comment dialog to flicker on hover in popover comment mode.
  * \[**Autocomplete dropdowns**]: Fixed a bug where the autocomplete dropdown component would not apply the `--velt-default-font-family`.
  * \[**Notifications**]: Fixed a bug occurring when marking all notifications as read in large notification data sets.
</Update>

<Update label="3.0.19" description="Sept 25 2024">
  ### New Features

  * \[**Comments**]: Added a standalone Comment Composer component. Now you can use this in combination with [Velt Comment Threads](/async-collaboration/comments/standalone-components/comment-thread/overview) component to embed commenting experiences in custom ways.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltCommentComposer />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comment-composer></velt-comment-composer>
          ```
        </Tab>
      </Tabs>

  * \[**Inline Comments**]: Added single thread option to inline comments. By default, it will be in multithread mode.
    Default value: `true`

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltInlineCommentsSection multiThread={false} />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-inline-comments-section multi-thread="false">
          </velt-inline-comments-section>
          ```
        </Tab>
      </Tabs>
</Update>

<Update label="3.0.18" description="Sept 24 2024">
  ### New Features

  * \[**Comments**]: Added a new prop to control the use of ShadowDOM for [Persistent Comment Mode](/async-collaboration/comments/customize-behavior/modes#persistent-comment-mode) banner.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltComments persistentCommentShadowDom={false} />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-comments persistent-comment-shadow-dom="false"></velt-comments>
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: Action buttons are now consistently displayed across all states (default, hover, selection) of the comment dialog and can be customized via CSS alone.

  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where the `tabConfig` React props was not working as expected.
</Update>

<Update label="3.0.17" description="Sept 23 2024">
  ### Improvements

  * \[**Notifications**]: Added an empty state for the document and all tabs in the notification panel.
  * \[**Notifications**]: Added type definition for the `tabConfig` prop to improve TypeScript support.

  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where React props for customizing the notification panel were not working as expected.
</Update>

<Update label="3.0.16" description="Sept 20 2024">
  ### New Features

  * \[**Comments**]: Added a new `atHereDescription` prop to customize the description that appears for the @here mention.

  <Tabs>
    <Tab title="React / Next.js with Hooks">
      Using Props:

      ```jsx theme={null}
      <VeltComments atHereDescription="Notify all users in this document" />
      ```

      Using API Method:

      ```jsx theme={null}
      const contactElement = useContactUtils();

      useEffect(() => {
        contactElement.setAtHereDescription('Notify all users in this document');
      }, [contactElement]);
      ```
    </Tab>

    <Tab title="React / Next.js">
      Using Props:

      ```jsx theme={null}
      <VeltComments atHereDescription="Notify all users in this document" />
      ```

      Using API Method:

      ```jsx theme={null}
      const contactElement = client.getContactElement();
      contactElement.setAtHereDescription('Notify all users in this document');
      ```
    </Tab>

    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-comments at-here-description="Notify all users in this document"></velt-comments>
      ```

      Using API Method:

      ```javascript theme={null}
      const contactElement = Velt.getContactElement();
      contactElement.setAtHereDescription('Notify all users in this document');
      ```
    </Tab>
  </Tabs>

  * \[**Comments**]: Added the `getSelectedComments()` API to get the currently selected comment annotations.
    * This returns an array of [`CommentAnnotation`](/api-reference/models/CommentAnnotation) objects.

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      const commentElement = client.getCommentElement();
      const subscription = commentElement.getSelectedComments().subscribe((selectedComments) => {
        console.log('Selected comments:', selectedComments);
      });

      ```

      Unsubscribe from the subscription when you're done:

      ```jsx theme={null}
      subscription?.unsubscribe()

      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```js theme={null}
      const commentElement = Velt.getCommentElement();
      const subscription = commentElement.getSelectedComments().subscribe((selectedComments) => {
        console.log('Selected comments:', selectedComments);
      });
      ```

      Unsubscribe from the subscription when you're done:

      ```js theme={null}
      subscription?.unsubscribe()
      ```
    </Tab>
  </Tabs>

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the [custom list](/async-collaboration/comments/customize-behavior#custom-lists) chip tooltip icon was not displayed.
  * \[**Comments**]: Fixed an issue where the reaction tooltip in the [comment player timeline component](/async-collaboration/comments/setup/video-player-setup/custom-video-player-setup) was getting distorted on hover.
  * \[**Comments**]: Fixed an issue where the reaction bubble on the [comment player timeline component](/async-collaboration/comments/setup/video-player-setup/custom-video-player-setup) had a transparent background.
</Update>

<Update label="3.0.15" description="Sept 20 2024">
  ### New Features

  * \[**Comments**]: Added a Minimal Filter Dropdown Component for the Multithread Comment Dialog. This provides basic filtering and sorting options, including:
    * Sorting: by date, by unread status
    * Filtering: unread comments, read comments, resolved comments

  ### Improvements

  * \[**Comments**]: Updated multithread behavior to ensure only one composer is open at a time.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the Floating Mode Comment Sidebar would not close when clicked outside.
  * \[**Comments**]: Resolved a problem where sidebar dropdowns were not closing when clicked on the trigger button again.
  * \[**Comments**]: Fixed an issue where the Add Reply button wasn't working in Inline Comment Section.
</Update>

<Update label="3.0.14" description="Sept 18 2024">
  ### Bug Fixes

  * \[**Comments**]: Fixed a bug related to updating comment annotations.
</Update>

<Update label="3.0.13" description="Sept 18 2024">
  ### New Features

  * \[**Comments**]: Added Draft State:
    * Empty comments are no longer saved.
    * Partial comments are saved as drafts, visible only to the author.
    * Draft creation:
      * Comment is saved as draft when the user adds text, recording, or attachment and closes the comment dialog without submitting.
      * On first attempt to close: Dialog shakes to indicate draft status.
      * On second attempt: the comment is saved as draft and the dialog closes.
    * Added a visual indicator for draft comments in the dialog.
    * If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard).
</Update>

<Update label="3.0.12" description="Sept 18 2024">
  ### Improvements

  * \[**UI Customization**]: Refactored `velt if` and `velt data` logic for improved performance.
</Update>

<Update label="3.0.13" description="Sept 18 2024">
  ### New Features

  * \[**Comments**]: Added Draft State:
    * Empty comments are no longer saved.
    * Partial comments are saved as drafts, visible only to the author.
    * Draft creation:
      * Comment is saved as draft when the user adds text, recording, or attachment and closes the comment dialog without submitting.
      * On first attempt to close: Dialog shakes to indicate draft status.
      * On second attempt: the comment is saved as draft and the dialog closes.
    * Added a visual indicator for draft comments in the dialog.
    * If you had previously used a wireframe for the comment dialog, you will need to add the [draft wireframe](/ui-customization/features/async/comments/comment-dialog/subcomponents/body/subcomponents/threadcard).
</Update>

<Update label="3.0.11" description="Sept 14 2024">
  ### New Features

  * \[**UI Customization**]: Added **Conditional Templates**! These let you conditionally show or hide parts of the Velt Component Wireframes.

    * You can add conditions based on the same data models available in [Template Variables](/ui-customization/template-variables).

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
            {/* Content to render if condition is true */}
          </VeltIf>
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-if condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
            <!-- Content to render if condition is true -->
          </velt-if>
          ```
        </Tab>
      </Tabs>

  * \[**UI Customization**]: You can now customize confirmation dialogs (eg: Delete thread, Delete recorder etc) for each feature by defining variants.
    * Supported variants: `recorder`, `comment`, `arrow`, `area`.

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
        <VeltWireframe>
          <VeltConfirmDialogWireframe variant="comment">
            <div>
              <VeltConfirmDialogWireframe.Title>
                Custom Title
              </VeltConfirmDialogWireframe.Title>

              <VeltConfirmDialogWireframe.Message>
                Custom Message
              </VeltConfirmDialogWireframe.Message>

              <VeltConfirmDialogWireframe.RejectButton>
                Custom Reject Button
              </VeltConfirmDialogWireframe.RejectButton>

              <VeltConfirmDialogWireframe.ApproveButton>
                Custom Approve Button
              </VeltConfirmDialogWireframe.ApproveButton>
            </div>
          </VeltConfirmDialogWireframe>
        </VeltWireframe>
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
        <velt-wireframe style="display:none">
          <velt-confirm-dialog-wireframe variant="comment">
            <div>
              <velt-confirm-dialog-title-wireframe>
                Custom Title
              </velt-confirm-dialog-title-wireframe>

              <velt-confirm-dialog-message-wireframe>
                Custom Message
              </velt-confirm-dialog-message-wireframe>

              <velt-confirm-dialog-reject-button-wireframe>
                Custom Reject Button
              </velt-confirm-dialog-reject-button-wireframe>

              <velt-confirm-dialog-approve-button-wireframe>
                Custom Approve Button
              </velt-confirm-dialog-approve-button-wireframe>
            </div>
          </velt-confirm-dialog-wireframe>
        </velt-wireframe>
      ```
    </Tab>
  </Tabs>

  * \[**UI Customization**]: Added two new global [Template Variables](/ui-customization/template-variables):
    * `unreadCommentAnnotationCount`: Number of unread comment annotations on the current document.
    * `unreadCommentCount`: Total number of unread comments on the current document.

  * \[**Comments**]: Added `updateContext` method for updating custom metadata (`context`) on comment annotations. [Learn more](/async-collaboration/comments/customize-behavior#metadata#2-update-custom-metadata-on-comment-annotation). This method is available in two scenarios:

    1. **In the `onCommentUpdate` event callback:**
       Use this to update the context when a comment is modified.

    2. **Via the `updateContext` API method:**
       Utilize this method to update the context of a comment annotation at any time. For example, you might use this when the name of the dashboard containing the comment annotation changes.

  ### Improvements

  * \[**Comments**]: Updated the icon for the Unresolve button.
  * \[**Comments**]: Whenever the comment sidebar is opened using the button or the api, any open comment dialog will be closed.
  * \[**Comments**]: Made position of the reaction tool consistent across different states and content types in the comment dialog.

  ### Bug Fixes

  * \[**Comments**]: Fixed the flicker issue when new popover comment thread was created. This only happened when the triangle component was disabled.
  * \[**Comments**]: Fixed minor rendering issue with the @mention chip when it was added at the end of the content.
  * \[**Velt Components**]: Reduced the default z-index for all Velt Components to prevent them from going over the host app's header or any other important UI elements.
  * \[**Comments**]: Fixed menu overlay positioning to stay with its trigger during page scrolling.
</Update>

<Update label="3.0.10" description="Sept 13 2024">
  ### Bug Fixes

  * \[**Comments**]: Reverted comment sidebar button wireframe changes.
</Update>

<Update label="3.0.9" description="Sept 12 2024">
  ### New Features

  * \[**Inline Reactions**]: Added `customReactions` prop for `VeltInlineReactionsSection` component in React, allowing custom emoji definitions:

    ```jsx theme={null}
    const customReactions = {
      "EMOJI_ID_1": {
        "emoji": "🔥" // You could also set emoji using a url or raw svg definition
      },
      "EMOJI_ID_2": {
        "emoji": "🙌" // You could also set emoji using a url or raw svg definition
      },
      "EMOJI_ID_3": {
        "emoji": "💪" // You could also set emoji using a url or raw svg definition
      }
    }
    <VeltInlineReactionsSection customReactions={customReactions} />
    ```

  * \[**Comments**]: Added `multiThreadMode` prop for `VeltComments` component in React:

    ```jsx theme={null}
    <VeltComments multiThreadMode={true} />
    ```

  ### Improvements

  * \[**Comments**]: Updated the unresolved button icon for better understanding.
  * \[**Comments**]: Added types for `enableMultiThreadMode` and `disableMultiThreadMode` API methods.
</Update>

<Update label="3.0.8" description="Sept 12 2024">
  ### New Features

  * \[**Comments**]: Added multi-thread support for Comments:

  <Tabs>
    <Tab title="Other Frameworks">
      Using Props:

      ```html theme={null}
      <velt-comments multi-thread-mode="true"></velt-comments>
      ```

      Using API Method:

      ```javascript theme={null}
      const commentElement = Velt.getCommentElement();
      // To enable multi-thread mode
      commentElement.enableMultiThreadMode();
      // To disable multi-thread mode
      commentElement.disableMultiThreadMode();
      ```
    </Tab>
  </Tabs>

  * \[**Inline Reactions**]: Added ability to add list of custom reactions:

  <Tabs>
    <Tab title="Other Frameworks">
      Using API Method:

      ```javascript theme={null}
        const reactionElement = client.getReactionElement();
        const customReactions = {
          "EMOJI_ID_1": {
            "emoji": "🔥" // You could also set emoji using a url or raw svg definition
          },
          "EMOJI_ID_2": {
            "emoji": "🙌" // You could also set emoji using a url or raw svg definition
          },
          "EMOJI_ID_3": {
            "emoji": "💪" // You could also set emoji using a url or raw svg definition
          }
        };
        reactionElement.setCustomReactions(customReactions);
      ```
    </Tab>
  </Tabs>

  * \[**UI Customization**]: Added wireframe for MultiThreaded Comment Dialog.
  * \[**UI Customization**]: Added wireframe for Comment Sidebar Button with the new name.

  ### Improvements

  * \[**Comments**]: Made element binding consistent by using common `targetElementId` attribute in comment feature components:

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
        <VeltCommentTool targetElementId={'yourTargetElementId'} />
        <VeltCommentBubble targetElementId={'yourTargetElementId'} />
        <VeltInlineCommentsSection targetElementId={'yourTargetElementId'} />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
        <velt-comment-tool target-element-id="yourTargetElementId"></velt-comment-tool>
        <velt-comment-bubble target-element-id="yourTargetElementId"></velt-comment-bubble>
        <velt-inline-comments-section target-element-id="yourTargetElementId"></velt-inline-comments-section>
      ```
    </Tab>
  </Tabs>

  ### Bug Fixes

  * \[**Notifications**]: Fixed an issue where unread icon was not showing up when a comment was added by the user themselves.
  * \[**Notifications**]: Resolved a UI issue where the "All Read" container was showing up while the data was still loading.
  * \[**Notifications**]: Fixed the load more button on all notifications tabs.
  * \[**Notifications**]: Fixed an issue where using the "assign to" options from the thread options menu wasn't generating a notification.
  * \[**Recorder**]: Fixed an issue where recording was saved when minimizing the preview panel.
</Update>

<Update label="3.0.7" description="Sept 10 2024">
  ### Improvements

  * \[**Comments**]: Pass the `id` attribute on either the `<video>` tag or its parent element. This simplifies the implementation of comments on custom video players.

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
        <div id="videoPlayerId">
          <YourVideoPlayerComponent></YourVideoPlayerComponent>
          <VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" totalMediaLength="12"></VeltCommentPlayerTimeline>
          <VeltReactionTool videoPlayerId="videoPlayerId"></VeltReactionTool>
        </div>
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
        <div id="videoPlayerId">
          <your-video-player-component></your-video-player-component>
          <velt-comment-player-timeline video-player-id="videoPlayerId" total-media-length="12"></velt-comment-player-timeline>
          <velt-reaction-tool video-player-id="videoPlayerId"></velt-reaction-tool>
        </div>
      ```
    </Tab>
  </Tabs>
</Update>

<Update label="3.0.6" description="Sept 10 2024">
  ### New Features

  * \[**Comments**]: Added an "Unresolve Comment" button component in the comment dialog. This button is used to unresolve a comment that was previously marked as resolved.

  <Tabs>
    <Tab title="React / Next.js">
      ```jsx theme={null}
      <VeltCommentDialogWireframe.UnresolveButton />
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```html theme={null}
      <velt-comment-dialog-unresolve-button-wireframe></velt-comment-dialog-unresolve-button-wireframe>
      ```
    </Tab>
  </Tabs>

  ### Improvements

  * \[**Comments**]: Improved comment text handling by trimming whitespace from `commentText` and `commentHtml` in the comment dialog.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue with autocomplete chip shadowDOM not being updated.
  * \[**Notifications**]: Resolved an issue where documents with empty notifications were still being rendered.
  * \[**Users**]: Fixed a bug related to special characters in user names.
  * \[**Comments**]: Fixed an issue where the checkbox in the location filter dropdown in sidebar wasn't updating on selection.
  * \[**Comments**]: Fixed an issue where the status filter menu in the sidebar wasn't closing properly.
  * \[**Recorder**]: Resolved a problem where the device list wasn't updating correctly in the recording settings menu in certain scenarios.
</Update>

<Update label="3.0.5" description="Sept 7 2024">
  ### New Features

  * \[**Comments**]: Added a minimal location filter in the sidebar wireframe for basic location based filtering. By default it's not enabled. You need to explicitly add the wireframe to the sidebar.
  * \[**Sidebar**]: Added `Floating Mode` for Comments Sidebar. This allows the sidebar panel to appear as an overlay on top of the sidebar button when clicked.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltSidebarButton floatingMode={true} />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-sidebar-button floating-mode="true"></velt-sidebar-button>
          ```
        </Tab>
      </Tabs>

  ### Bug Fixes

  * \[**Comments**]: Fixed a bug where clicking the "replies" button in the sidebar comment dialog incorrectly opened the comment dialog on the DOM. This issue only affected implementations using the sidebar comment dialog wireframe.
</Update>

<Update label="3.0.4" description="Sept 5 2024">
  ### New Features

  * \[**Comments**]: Added persistent comment mode banner wireframe.

  * \[**API**]: Added `getDocumentMetadata` method to get the current document's metadata. It returns a subscription with [`DocumentMetadata`](/api-reference/sdk/models/data-models#documentmetadata) object.

  <Tabs>
    <Tab title="React / Next.js">
      ```javascript theme={null}
      client.getDocumentMetadata().subscribe((documentMetadata) => {
          console.log("Current document metadata: ", documentMetadata);
      });
      ```
    </Tab>

    <Tab title="Other Frameworks">
      ```js theme={null}
      Velt.getDocumentMetadata().subscribe((documentMetadata) => {
        console.log("Current document metadata: ", documentMetadata);
      });
      ```
    </Tab>
  </Tabs>

  ### Improvements

  * \[**Comments**]: The persistent comment banner now inherits the shadow DOM property from `Velt Comments`.
</Update>

<Update label="3.0.3" description="Sept 4 2024">
  ### New Features

  * \[**Comments**]: Added a minimal filtering and sorting dropdown in the sidebar wireframe. By default it's not enabled. You need to explicitly add the wireframe to the sidebar. It includes options like:
  * Filter by `All`
  * Filter by `Unread`
  * Filter by `Read`
  * Filter by `Resolved`
  * Sort by `Unread`
  * Sort by `Last Updated Timestamp`

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the dialog was overflowing out of the screen in some cases.
</Update>

<Update label="3.0.2" description="Sept 3 2024">
  ### New Features

  * \[**Reactions**]: Added [inline reaction section](/async-collaboration/reactions/setup) feature component.

      <Tabs>
        <Tab title="React / Next.js">
          ```jsx theme={null}
          <VeltInlineReactionsSection 
            targetReactionElementId="containerId"
          />
          ```
        </Tab>

        <Tab title="Other Frameworks">
          ```html theme={null}
          <velt-inline-reactions-section target-reaction-element-id="containerId"></velt-inline-reactions-section>
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: Truncated video timeline comment card to 100 characters for improved readability.
  * \[**Users**]: Limited user names to a maximum of 20 characters and disallowed URLs in names for security purposes.

  ### Bug Fixes

  * \[**Comments**]: Resolved an issue with the unread indicator in the comment dialog.
</Update>

<Update label="3.0.1" description="Aug 31 2024">
  ### New Features

  * \[**Comments**]: Added feature to render a comment bubble on the comment pin or triangle instead of the comment dialog. Hovering or clicking the bubble will open the comment dialog.

    * `bubbleOnPin`: Whether to show bubble on pin \[default: false]
    * `bubbleOnPinHover`: If the above is true, whether to show bubble when the pin is hovered over or clicked \[default: true]

      <Tabs>
        <Tab title="React / Next.js">
          Using Props:

          ```jsx theme={null}
          <VeltComments bubbleOnPin={true} bubbleOnPinHover={false} />
          ```

          Using API:

          ```javascript theme={null}
          const commentElement = client.getCommentElement();

          // To enable showing bubble on pin
          commentElement.enableBubbleOnPin();

          // To disable showing bubble on pin
          commentElement.disableBubbleOnPin();

          // To enable option to show bubble on pin hover vs only on click
          commentElement.enableBubbleOnPinHover();

          // To disable option to show bubble on pin hover
          commentElement.disableBubbleOnPinHover();
          ```
        </Tab>

        <Tab title="Other Frameworks">
          Using Props:

          ```html theme={null}
          <velt-comments bubble-on-pin="true" bubble-on-pin-hover="false"></velt-comments>
          ```

          Using API:

          ```javascript theme={null}
          const commentElement = Velt.getCommentElement();

          // To enable showing bubble on pin
          commentElement.enableBubbleOnPin();

          // To disable showing bubble on pin
          commentElement.disableBubbleOnPin();

          // To enable option to show bubble on pin hover vs only on click
          commentElement.enableBubbleOnPinHover();

          // To disable option to show bubble on pin hover
          commentElement.disableBubbleOnPinHover();
          ```
        </Tab>
      </Tabs>

  ### Improvements

  * \[**Comments**]: Increased the max allowed size of attachments in composer from 2MB to 15MB.
  * \[**Comments**]: Decreased the size of triangle in comment pin from 15px to 10px.

  ### Bug Fixes

  * \[**Comments**]: Fixed an issue where the comment dialog composer user avatar wireframe was not working.
  * \[**Comments**]: Resolved minor signal-related issues.
  * \[**Comments**]: Fixed Comment Dialog Attachments and Recording UI for inline comment mode, addressing aspect ratio issues.
</Update>

<Update label="3.0.0" description="Aug 30 2024">
  ### Improvements

  * \[**Performance**]: Rewrote change detection and state management for the entire SDK to make it more performant. This is a major update and will benefit all developers.
</Update>