Version 3.0.0

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.
• [Recorder]: Added shadow dom prop in Recorder Player component to control shadow DOM encapsulation.

• React / Next.js
• Other Frameworks

<VeltRecorderPlayer recorderId="-OEIX04CL_jGATT_zunp" shadowDom={false} />

Bug Fixes

• [Recorder]: Fixed an issue where summary prop was not working in Recorder Player component.

Improvements

• [Core]: Added updates to the core library packages.

Improvements

• [Core]: Added accessibility props and test ids for most Velt components within Comments, Notifications, Live Selection features.

Features

• [UI Customization]: Added additional CSS variables for z-index customization. Learn more.
  • --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.

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 event. You can still use that to maintain the old behavior using this.
  • If you had previously used a wireframe for the comment dialog, you will need to add the navigation button wireframe 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.
• [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.

Improvements

• [Core]: Added library upgrades to the SDK.

Improvements

• [Comments]: Added readOnly property in comment sidebar context so that it’s available in Velt Data and Velt If features.

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.

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. 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. You can customize and test your themes. It will generate CSS variables that you can just copy and paste into your app.

Improvements

• [Comments]: Added additional wireframes for Comment Dialog Toggle Reply Component. Learn more.
• [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.

Bug Fixes

• [Comments]: Fixed an issue where the Comment Annotation unread count was not updated correctly.

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.

• React / Next.JS
• Other Frameworks

<VeltComments readOnly={true} />

  const commentElement = client.getCommentElement();
  commentElement.enableReadOnly();
  commentElement.disableReadOnly();

Bug Fixes

• [Comments]: Fixed image lightbox CSS related issue

Bug Fixes

• [Comments]: Fixed undefined value error while updating context.

Bug Fixes

• [Comments]: Added composerVariant prop to VeltInlineCommentsSection component to support inline composer variant

• React / Next.JS
• Other Frameworks

<VeltInlineCommentsSection composerVariant='inline' />

• [UI]: Minor CSS fixes and improvements

Bug Fixes

• [Comments]: Fixed undefined value error while updating context.

Improvements

• [Comments]: Added support for programatic selection and scrolling to comments in the velt-comment-text component used in Tiptap Comments.

Features

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

• React / Next.js
• Other Frameworks

<VeltWireframe>
    <VeltCommentsSidebarWireframe.Header>
        ...
        <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />
        ...
    </VeltCommentsSidebarWireframe.Header>
</VeltWireframe>

Features

• [Comment]: Added new APIs, hooks and event callbacks 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
    • Here is the list of events you can subscribe to.

• [Metadata]: Get the currently set organization, document and location objects:

  const metadata = await client.getMetadata();
  

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

• React / Next.js
• Other Frameworks

  <VeltCommentsSidebar searchPlaceholder="New placeholder" />

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

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.

• Border Radius
• Spacing
• Typography
• Colors - Light Mode
• Colors - Dark Mode

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

• 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:

  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;
  }
  

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.
  • React / Next.js
  • Other Frameworks

  <VeltCommentThread annotation={COMMENT_ANNOTATION_OBJECT} />
  

• [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.
  • React / Next.js
  • Other Frameworks

  Using Props:

  <VeltComments shortUserName={false} />
  

  Using API:

  const commentElement = client.getCommentElement();
  commentElement.enableShortUserName();
  commentElement.disableShortUserName();
  

Improvements

• [Comments]: Added support for light mode in the contact chip tooltip.
• [Comments]: Removed unnecessary filtering in the sidebar when comment annotation selection changes.

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.

Bug Fixes

• [Comments]: Fixed issue where bottom sheet was incorrectly opening in the sidebar on mobile devices.

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.

  • React / Next.js
  • Other Frameworks

  <VeltCommentPlayerTimeline offset={10} />
  

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.

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 for more information.

Features

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

  • React / Next.js
  • Other Frameworks

  Using Props:

  <VeltComments recordingTranscription={false} />
  

  Using API Methods:

  // Using comment element
  const commentElement = client.getCommentElement();
  commentElement.enableRecordingTranscription();
  commentElement.disableRecordingTranscription();
  
  // Or using recorder element 
  const recorderElement = client.getRecorderElement();
  recorderElement.enableRecordingTranscription();
  recorderElement.disableRecordingTranscription();
  

Bug Fixes

• [Comments]: Fixed range error that occurred when recording without comment text.

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

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)
  • React / Next.js
  • Other Frameworks

  <VeltInlineCommentsSection sortData="desc" />
  

• [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.

Bug Fixes

• [Notifications]: Optimized and fixed issues related to loading notifications on documentId and organizationId change.

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.

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.

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.
  • React / Next.js
  • Other Frameworks

  <VeltCommentTool sourceId="sourceId1" />
  

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.

Bug Fixes

• [Security]: Added security updates.

New Features

• [Recorder]: Added getRecordingData API to fetch recording data including transcript, summary, and recording URLs.

  • React / Next.js
  • Other Frameworks

  Using Hook:

  const recorderData = useRecordingDataByRecorderId('-O9yTMWmEe5u6YGX8EFV');
  
  useEffect(() => {
      console.log('Recorder Data: ', recorderData);
  }, [recorderData]);
  

  Using API:

  const recorderElement = client.getRecorderElement();
  
  recorderElement.getRecordingDataByRecorderId("-O9yGiYS8lehOXMpQf4j").subscribe((recorderData) => {
      console.log('Recorder Data: ', recorderData);
  });
  

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.

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.

  • React / Next.js
  • Other Frameworks

  <VeltCommentPin variant="CUSTOM_VARIANT" />
  

• [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.

• React / Next.js
• Other Frameworks

useSetDocument(DOCUMENT_ID, {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

client.setDocument(DOCUMENT_ID, {
  organizationId: 'ANOTHER_ORGANIZATION_ID'
});

• [Comments]: Added ability to toggle the “Seen By” feature:

  • React / Next.js
  • Other Frameworks

  Using Props:

  <VeltComments seenByUsers={false} />
  

  Using API:

  const commentElement = client.getCommentElement();
  commentElement.enableSeenByUsers();
  commentElement.disableSeenByUsers();
  

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

Improvements

• [Security]: Added security updates.

Improvements

• [Comments]: Added dark mode support for the “Seen By” dropdown in the comment dialog.

New Features

• [Webhooks]: Added configuration option to encrypt webhook payloads using a secret key.
  • Configure this option in the Velt Console.
  • 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:

• Sample Encrypted Payload
• Sample Decryption Code

{
  "encryptedData": "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",
  "encryptedKey": "OzSHFXzrXFC5wDvM5NPRkriY/NaC/USvFUPE+f4NZ30tiD2qb8sJM2XT2K7uNIZ05uDLfsJ6/BbEoYC1SOPXcFJMYqRiYFiI9RWrNgR4EtPWZ84RgrmxGcZZjzSqHzjuls8g++cuqJGRV+ePbTRH+z2OuZZu0vMKZiemaZpHL46Ewi9HUnbRDXvOlKFFHmQm5tayZ7m7Mv5iu4T5R3DPEAHlZnGqtP98ToLxUJUS2Eku/iLHXRmhmZXn55Qt5GYiyss8P5/miPqJCu1QG0CStn5Nsl4KvU+I4QYAOcMFWWUAGofOwPWtt8vPh8Bx+7t7BbayKpA4ZUEWWAjC+zASxg==",
  "iv": "SHM0UHU5WXoyTG03TnExWA=="
}

Improvements

• [Comments]: Improved time display in comment dialog by removing “just” from timeago text to make it more concise.

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.

• [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:

    [velt-current-user-author='false'] app-comment-dialog-thread-card-options {
      display: none;
    }
    

New Features

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

  • React / Next.js
  • Other Frameworks

  Using props:

  <VeltComments resolveStatusAccessAdminOnly={true} />
  

  Using API:

  const commentElement = client.getCommentElement();
  // To enable resolve status access admin only
  commentElement.enableResolveStatusAccessAdminOnly();
  // To disable resolve status access admin only
  commentElement.disableResolveStatusAccessAdminOnly();
  

Improvements

• [Comments]: Added ability to @mention emails not present in the contact list.
• [Comments]: Implemented focus on composer when clicked anywhere within the composer.

Improvements

• [Comments]: Added “This page” label to the sidebar filters.
• [Comments]: Added React wireframe component for Navigation button:

• React / Next.js
• Other Frameworks

<VeltCommentDialogWireframe.NavigationButton />

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 and the focused thread wireframe.

    • React / Next.js
    • Other Frameworks

    <VeltCommentsSidebar focusedThreadMode={true} />
    

    Handling the navigation button click:

    <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);
      };
    

• [Comments]: Added standalone thread wireframe component:

  • React / Next.js
  • Other Frameworks

  <VeltWireframe>
    <VeltCommentThreadWireframe>
      {/* Velt Comment Dialog Wireframe */}
    </VeltCommentThreadWireframe>
  </VeltWireframe>
  

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

  • React / Next.js
  • Other Frameworks

  Using Hook:

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

  Using API:

    const selectionElement = client.getSelectionElement();
    selectionElement.getLiveSelectionData().subscribe((liveSelectionData: LiveSelectionData) => {
      console.log("liveSelectionData: ", liveSelectionData);
    });
  

• [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.
  • React / Next.js
  • Other Frameworks

  <VeltCommentText multiThreadAnnotationId='MULTI_THREAD_ANNOTATION_ID'>
    {/* your content here */}
  </VeltCommentText>
  
  <VeltCommentText annotationId='ANNOTATION_ID'>
    {/* your content here */}
  </VeltCommentText>
  

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.

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.

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.

Bug Fixes

• [Mentions]: Resolved an issue where atHereDescription was not rendering for non-organization users.

New Features

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

  • React / Next.js
  • Other Frameworks

  const notificationElement = client.getNotificationElement();
  notificationElement.markNotificationAsReadById("notificationId");
  

• [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.

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.

Bug Fixes

• [Notifications]: Fixed an issue where the unreadCommentsMap count was not updating correctly when switching between documents with no unread comments.

New Features

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

  • React / Next.js
  • Other Frameworks

  <VeltCommentThread 
    darkMode={true}
    shadowDom={false}
    variant="component-variant" 
    dialogVariant="dialog-variant"
  />
  

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.

Bug Fixes

• [Notifications]: Fixed an issue where the document tab was not visible when user email was not set.

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.

npm i @veltdev/tiptap-velt-comments

import { TiptapVeltComments } from '@veltdev/tiptap-velt-comments';

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

Improvements

• [Console Debugger]: Added logs for the updateContactList method to improve debugging.

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.

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:

• React / Next.js
• HTML

<VeltCommentsSidebarWireframe.ResetFilterButton />

Improvements

• [Notifications]: Improved loading state for API calls, now returns null until data is fully loaded.

New Features

• [Notifications]: Added API to get unread notifications count.
  • Sample response:

  { 
    forYou: 4, // # of unread notifications in the "For You" tab
    all: 5     // # of unread notifications in the "All" or "Document" tab
  }
  

• React / Next.js
• Other Frameworks

const unreadCount = useUnreadNotificationsCount();

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

const notificationElement = client.getNotificationElement();
notificationElement.getUnreadNotificationsCount().subscribe((data) => {
  console.log('Unread notifications count:', data);
});

Improvements

• [Comments]: Improved search functionality in @mentions to support spaces in search queries.

New Features

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

• React / Next.js
• Other Frameworks

<VeltComments collapsedComments={false} />

const commentElement = client.getCommentElement();
commentElement.enableCollapsedComments();
commentElement.disableCollapsedComments();

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

• React / Next.js
• Other Frameworks

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

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

const commentElement = client.getCommentElement();

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

• [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.

• React / Next.js
• Other Frameworks

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' });

Bug Fixes

• [UI Customization]: Fixed an issue in velt if where string comparisions were not working as expected.

New Features

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

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

• React / Next.js
• Other Frameworks

<VeltNotificationsPanelWireframe.Skeleton />

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.

New Features

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

• React / Next.js
• Other Frameworks

<VeltComments deleteReplyConfirmation={true} />

const commentElement = client.getCommentElement();
commentElement.enableDeleteReplyConfirmation();
commentElement.disableDeleteReplyConfirmation();

• [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.

• React / Next.js with Hooks
• React / Next.js
• Other Frameworks

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

const commentElement = client.getCommentElement();
commentElement.onCopyLink().subscribe((commentLink) => {
  console.log(commentLink);
});

• [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.

• React / Next.js
• Other Frameworks

<VeltData field='userContact.name' />

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.

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.

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.

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:

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.

• [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.

Bug Fixes

• [Comments]: Fixed a bug where clicking on one’s own reaction on the Velt Comment Player Timeline didn’t toggle it correctly.

Improvements

• [Comments]: Added createdAt field for CommentAnnotation model. This can now be used to sort annotations in ascending order of creation.
• [Comments]: Added isEdited and editedAt fields in 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 fitlers 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.

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.

• React / Next.js with Hooks
• React / Next.js
• Other Frameworks

<VeltNotificationsTool readNotificationsOnForYouTab={true} />
<VeltNotificationsPanel readNotificationsOnForYouTab={true} />

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();

For more details on customizing notifications behavior, refer to the Notifications 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.

New Features

• [Comments]: Added a standalone Comment Composer component. Now you can use this in combination with Velt Comment Threads component to embed commenting experiences in custom ways.

  • React / Next.js
  • Other Frameworks

  <VeltCommentComposer />
  

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

  • React / Next.js
  • Other Frameworks

  <VeltInlineCommentsSection multiThread={false} />
  

New Features

• [Comments]: Added a new prop to control the use of ShadowDOM for Persistent Comment Mode banner.

  • React / Next.js
  • Other Frameworks

  <VeltComments persistentCommentShadowDom={false} />
  

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.

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.

New Features

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

• React / Next.js with Hooks
• React / Next.js
• Other Frameworks

<VeltComments atHereDescription="Notify all users in this document" />

const contactElement = useContactUtils();

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

• [Comments]: Added the getSelectedComments() API to get the currently selected comment annotations.
  • This returns an array of CommentAnnotation objects.

• React / Next.js
• Other Frameworks

const commentElement = client.getCommentElement();
const subscription = commentElement.getSelectedComments().subscribe((selectedComments) => {
  console.log('Selected comments:', selectedComments);
});

subscription?.unsubscribe()

Bug Fixes

• [Comments]: Fixed an issue where the custom list chip tooltip icon was not displayed.
• [Comments]: Fixed an issue where the reaction tooltip in the comment player timeline component was getting distorted on hover.
• [Comments]: Fixed an issue where the reaction bubble on the comment player timeline component had a transparent background.

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.

Bug Fixes

• [Comments]: Fixed a bug related to updating comment annotations.

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.

Improvements

• [UI Customization]: Refactored velt if and velt data logic for improved performance.

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.

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.
  • React / Next.js
  • Other Frameworks

  <VeltIf condition="{annotation.status.id} === 'OPEN' && {annotation.comments.length} === 3">
    {/* Content to render if condition is true */}
  </VeltIf>
  

• [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.

• React / Next.js
• Other Frameworks

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

• [UI Customization]: Added two new global 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. 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.

Bug Fixes

• [Comments]: Reverted comment sidebar button wireframe changes.

New Features

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

  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:

  <VeltComments multiThreadMode={true} />
  

Improvements

• [Comments]: Updated the unresolved button icon for better understanding.
• [Comments]: Added types for enableMultiThreadMode and disableMultiThreadMode API methods.

New Features

• [Comments]: Added multi-thread support for Comments:

• Other Frameworks

<velt-comments multi-thread-mode="true"></velt-comments>

const commentElement = Velt.getCommentElement();
// To enable multi-thread mode
commentElement.enableMultiThreadMode();
// To disable multi-thread mode
commentElement.disableMultiThreadMode();

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

• Other Frameworks

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

• [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:

• React / Next.js
• Other Frameworks

  <VeltCommentTool targetElementId={'yourTargetElementId'} />
  <VeltCommentBubble targetElementId={'yourTargetElementId'} />
  <VeltInlineCommentsSection targetElementId={'yourTargetElementId'} />

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.

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.

• React / Next.js
• Other Frameworks

  <div id="videoPlayerId">
    <YourVideoPlayerComponent></YourVideoPlayerComponent>
    <VeltCommentPlayerTimeline videoPlayerId="videoPlayerId" totalMediaLength="12"></VeltCommentPlayerTimeline>
    <VeltReactionTool videoPlayerId="videoPlayerId"></VeltReactionTool>
  </div>

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.

• React / Next.js
• Other Frameworks

<VeltCommentDialogWireframe.UnresolveButton />

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.

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.

  • React / Next.js
  • Other Frameworks

  <VeltSidebarButton floatingMode={true} />
  

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.

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

• React / Next.js
• Other Frameworks

client.getDocumentMetadata().subscribe((documentMetadata) => {
    console.log("Current document metadata: ", documentMetadata);
});

Improvements

• [Comments]: The persistent comment banner now inherits the shadow DOM property from Velt Comments.

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.

New Features

• [Reactions]: Added inline reaction section feature component.

  • React / Next.js
  • Other Frameworks

  <VeltInlineReactionsSection 
    targetReactionElementId="containerId"
  />
  

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.

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]
  • React / Next.js
  • Other Frameworks

  Using Props:

  <VeltComments bubbleOnPin={true} bubbleOnPinHover={false} />
  

  Using API:

  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();
  

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.

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.