Changelog

​

Improvements

• [Notifications]: Added an option to filter notifications based on type in the getNotificationsData method.
  • Now this method/hook can accept an optional GetNotificationsDataQuery object, which supports a type property:
    • 'all' (default): returns all notifications from the documents the user has access to.
    • 'forYou': returns notifications where the current user is involved.
    • 'documents': returns notifications for documents where the current user has access to.

const notificationsData = useNotificationsData({ type: 'forYou' });

useEffect(() => {
  if (notificationsData) {
    console.log(notificationsData);
  }
}, [notificationsData]);

​

Bug Fixes

• [Comments]: Fixed an issue with aggregated comments dialog, where hitting the reply button would close the dialog.
• [Notifications]: Fixed empty state issue in the notification API where the data would first return an empty array before returning the actual data.

​

Bug Fixes

• [Comments]: Fixed an issue with the comment tool in popover mode where the tool would not hide sometimes even when the comment was added.

​

Improvements

• [Video Editor]: Added robustness for edge cases with short videos (< 2-3s) that could cause unexpected behavior in the editor. eg: zooming, trimming, etc.
• [Video Editor]: Added robustness to playhead action buttons group and tooltip display and position logic for edge cases.

​

Improvements

• [Core]: Added internal optimzations for realtime data fetching.

​

Updates

• [Huddle]: Added serverFallback config in huddle. By default Huddle service is peer-to-peer. This will enable or disable the fallback to server-side for connectivity if peer-to-peer fails. Default: true

<VeltHuddle serverFallback={false} />

​

Improvements

• [Notifications]: Updated documentName rendering logic in the notification panel to only render the component if the documentName is available. Earlier it was falling back to the documentId.
• [Notifications]: Added support to open and close the notification panel using APIs.

const notificationElement = useNotificationUtils()
notificationElement.openNotificationsPanel()
notificationElement.closeNotificationsPanel()

​

Bug Fixes

• [Comments]: Fixed an issue where DOM changes detection was not working for text comments in some scenarios.
• [Video Editor]: Hide video editor tooltips and selection during playback.
• [Notifications]: Fixed an issue where notification panel was not closing when clicked on notification tool.

​

New Features

• [Video Editor]: Updated video editor with new UI design for improved UX including tooltips, floating action buttons, active/inactive states, etc.
• [Video Editor]: Added a retake button on video editor.

<VeltRecorderPlayer retakeOnVideoEditor={true} />
<VeltRecorderControlPanel retakeOnVideoEditor={true} />
<VeltRecorderTool retakeOnVideoEditor={true} />

const recorderElement = useRecorderUtils();

// Enable/disable retake button on video editor
recorderElement.enableRetakeOnVideoEditor();
recorderElement.disableRetakeOnVideoEditor();

• [Video Editor]: Added onboarding tooltip for new users.
  • React / Next.js
  • Other Frameworks

  Using APIs:

  Copy

  Ask AI

  const recorderElement = useRecorderUtils();
  
  // Enable/disable onboarding tooltip
  recorderElement.enableOnboardingTooltip();
  recorderElement.disableOnboardingTooltip();
  

​

Bug Fixes

• [Core]: Added central DB for user metadata. Going forward, if user metadata changes via REST API or via identify method, it will be reflected across all data rendered in the UI. Note after this update, if you plan to go back to older version of the SDK, then please reach out to us for a graceful rollback.

​

Bug Fixes

• [Comments]: Fixed the issue where context was not applied to freestyle area comments.

​

New Features

• [Comments]: Added support to filter and aggregate comment annotations by locationId in InlineCommentsSection, VeltCommentPin and VeltCommentBubble components. folderId or documentId is required.
  • React / Next.js
  • Other Frameworks

  Inline Comments Section:

  Copy

  Ask AI

  // folderId + locationId
  <VeltInlineCommentsSection folderId="YOUR_FOLDER_ID" locationId="YOUR_LOCATION_ID" />
  // documentId + locationId
  <VeltInlineCommentsSection documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" />
  

  Comment Tool - Comment Bubble for popover comments:

  Copy

  Ask AI

  // folderId + locationId
  <VeltCommentTool folderId="YOUR_FOLDER_ID" locationId="YOUR_LOCATION_ID" />
  <VeltCommentBubble folderId="YOUR_FOLDER_ID" locationId="YOUR_LOCATION_ID" />
  // documentId + locationId
  <VeltCommentTool documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" />
  <VeltCommentBubble documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" />
  

  Comment Pin:

  Copy

  Ask AI

  // folderId + locationId
  <VeltCommentPin folderId="YOUR_FOLDER_ID" locationId="YOUR_LOCATION_ID" />
  // documentId + locationId
  <VeltCommentPin documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" />
  

• [Comments]: Add ability to filter and aggregate comments by mulitple conditions: folderId/documentId/locationId and context. Only those comment annotations that satisfy all the conditions will be visible.
  • React / Next.js
  • Other Frameworks

  Inline Comments Section:

  Copy

  Ask AI

  <VeltInlineCommentsSection folderId="YOUR_FOLDER_ID" documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" context={{ key1: "value1" }} />
  

  Comment Tool - Comment Bubble:

  Copy

  Ask AI

  <VeltCommentTool folderId="YOUR_FOLDER_ID" documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" context={{ key1: "value1" }} />
  <VeltCommentBubble folderId="YOUR_FOLDER_ID" documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" context={{ key1: "value1" }} />
  

  Comment Pin:

  Copy

  Ask AI

  <VeltCommentPin folderId="YOUR_FOLDER_ID" documentId="YOUR_DOCUMENT_ID" locationId="YOUR_LOCATION_ID" context={{ key1: "value1" }} />
  

• [Comments]: Added support to add context to comment tool in freestyle mode.
• [Core]: Added window load event for Velt object after it is initialized. This is useful for developers using pure HTML/JS packages.
  Copy

  Ask AI

  window.addEventListener('onVeltLoad', (event) => {
      console.log('onVeltLoad', window.Velt);
  });
  

​

Bug Fixes

• [Comments]: Fixed issue where bubble count was showing the total comments count instead of the non-terminal state comments count.
• [Comments]: Fixed issue where area comments were not respecting dom id boundaries.

​

New Features

• [Notifications]: Added support to enable self notifications. By default notifications api and components exclude notifications where the current user is the action user.
  • React / Next.js
  • Other Frameworks

  Using props:

  Copy

  Ask AI

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

  Using API:

  Copy

  Ask AI

  const notificationElement = useNotificationUtils();
  notificationElement.enableSelfNotifications(); // Enables self notifications.
  notificationElement.disableSelfNotifications(); // Disables self notifications.
  

​

Bug Fixes

• [Comments]: Fixed issue where comment text and HTML content was not being properly stripped during deletion for self-hosted data.

​

New Features

• [CRDT]: Added Yjs based CRDT library (`@veltdev/tiptap-crdt) for Tiptap Editor (in beta).
  • This enables live cursors and collaborative editing out of the box.
  • This is framework agnostic and can be used with any Tiptap editor.
  • Learn more
• [Video Editor]: Added zoom button in video editor with wireframes support.
• [Recorder]: Added API to turn on/off the microphone on the recorder control panel.

const recorderElement = useRecorderUtils();
recorderElement.enableRecordingMic(); // Enables the microphone.
recorderElement.disableRecordingMic(); // Disables the microphone.

​

Improvements

• [Video Editor]: Enabled zoom options dropdown to be positioned at the center of the zoom track.
• [Comments]: Enabled standalone comment composer width to be set to 100% of the parent container.

​

New Features

• [Comments]: Added reply avatar component with wireframes support. This shows the avatars of unique users who have replied to a comment.
  • React / Next.js
  • Other Frameworks

  Using props:

  Copy

  Ask AI

  <VeltComments maxReplyAvatars={2} replyAvatars={true} />
  

  Using API:

  Copy

  Ask AI

  const commentsElement = client.getCommentsElement();
  commentsElement.enableReplyAvatars(); // Enables the reply avatar component.
  commentsElement.disableReplyAvatars(); // Disables the reply avatar component.
  commentsElement.setMaxReplyAvatars(2); // Sets the maximum number of reply avatars to show.
  

• [Comments]: Added template variable totalReplies for comment wireframes. It displays the total number of replies for a comment.

​

Bug Fixes

• [Comments]: Fixed locationName logic to use locationId in sidebar for ‘This Page’ filter.
• [Comments]: Fixed ”@” dropdown issue where it was not opening after user selection.

​

New Features

• [Cursors]: Added wireframes support for Cursors component.

​

Improvements

• [Comments]: Added sidebar filter dropdown into overlays for better handling of screen and UI edges.

​

Bug Fixes

• [Comments]: Fixed an issue where inline comments section width was not being set correctly.

​

New Features

• [Core]: Added MCP Servers for:
  • Velt REST APIs: Allows you to interact with your Velt data directly from various MCP compatible clients, such as Cursor, Windsurf, Claude Desktop, etc. Learn More.
  • Velt Docs: Allows you to search and browse Velt’s documentation directly within your MCP-compatible IDEs, like Cursor, Windsurf etc. This enables you to quickly find information about our SDKs, APIs, and features without having to leave your editor, streamlining your development workflow when implementing Velt. Learn More.

​

Bug Fixes

• [Comments]: Minor UX fixes:
  • Fixed an issue where composer auto-scroll was not working in sidebar embed mode.
  • The composer now auto-scrolls to the text cursor when a long message is pasted.
  • Mentions are now added at the cursor’s position, and the cursor is placed after the mention, not at the end of the input.

​

Improvements

• [Comments]: Comment timestamps now show the created timestamp by default, and the last updated timestamp as fallback.
• [Core]: Added improved error messages for identify method so it’s easier to debug scenarios like domain mismatch, token expired, organization mismatch, missing token etc.
• [Comments]: Added tooltips to an overlay.

​

New Features

• [REST APIs]: Extended v2 endpoints for all APIs. These come with additional schema validation.
  • The previous v1 endpoints will work as usual.

​

Bug Fixes

• [Core]: Fixed an issue where location metadata, reset etc was not working as expected in some scenarios.

​

Bug Fixes

• [Comments]: Minor UX fixes:
  • Fixed mention dropdown opening when typing space at the very start of input.
  • Fixed mention dropdown opening when @ was added at the end of a word. Exceptions: (,, ;, :).
  • Updated custom list dropdowns to behave like the default @ dropdown.
  • Fixed ESC key not closing the mentions dropdown.
  • When clicking on collapsed composer, it will bring it into view.
  • The composer will auto-scroll to the text cursor when the inputted text is very long.
  • Comment dialog will come into view when returning from focused thread mode.
  • Fixed an issue where custom filter was getting reset on page refresh.
  • Fixed search placeholder type in React <VeltCommentsSidebarWireframe.Search placeholder="Search Comments" />.
  • Fixed composer collapsing when clicking away with text or attachments present - now only collapses when empty.

​

New Features

• [Debugger]: Added Activity Logs to the Console.
  • Review the historical Velt events stream of your users.
  • This can help debug issues, user behaviour on Velt features, etc.
  • Currently supports the last 30 days of events.
  • There is a 24-48 hour delay in the events being shown in the console.

​

Improvements

• [Comments]: Improved autoscroll behavior in comment sidebar for new comment additions, comment dialog clicks, and composer clicks.
• [Comments]: Added system type support in filterConfig for default filters

​

Bug Fixes

• [Comments]: Fixed autocomplete dropdown opening while typing @ in a word.
• [Comments]: Fixed autocomplete dropdown not closing after @ followed by immediate space.
• [Comments]: Fixed comment sidebar filter type menu closing on outside clicks.
• [Comments]: Fixed comment sidebar filter search toggle functionality.

​

Improvements

• [Comments]: Added support to aggregate and show comment annotations by folderId, documentId and context in InlineCommentSection, VeltCommentPin, VeltCommentTool and VeltCommentBubble components.
  • All the comment annotations matching these props will be aggregated and shown in the component.
  • This will only work when the documents or the relevant folder are initialized first.
  • React / Next.js
  • Other Frameworks

  Inline Comments Section:

  Copy

  Ask AI

  // Filter by folderId
  <VeltInlineCommentsSection folderId="YOUR_FOLDER_ID" />
  
  // Filter by documentId
  <VeltInlineCommentsSection documentId="YOUR_DOCUMENT_ID" />
  
  // Filter by context
  <VeltInlineCommentsSection context={{ key1: "value1" }} contextOptions={{ partialMatch: true }} />
  

  Comment Tool (Works only in popover mode). This will attach these props to the new comment annotation created by the tool.

  Copy

  Ask AI

  // Filter by folderId
  <VeltCommentTool folderId="YOUR_FOLDER_ID" />
  
  // Filter by documentId
  <VeltCommentTool documentId="YOUR_DOCUMENT_ID" />
  
  // Filter by context
  <VeltCommentTool context={{ key1: "value1" }} contextOptions={{ partialMatch: true }} />
  

  Comment Bubble:

  Copy

  Ask AI

  // Filter by folderId
  <VeltCommentBubble folderId="YOUR_FOLDER_ID" />
  
  // Filter by documentId
  <VeltCommentBubble documentId="YOUR_DOCUMENT_ID" />
  
  // Filter by context
  <VeltCommentBubble context={{ key1: "value1" }} contextOptions={{ partialMatch: true }} />
  

  Comment Pin:

  Copy

  Ask AI

  // Filter by folderId
  <VeltCommentPin folderId="YOUR_FOLDER_ID" />
  
  // Filter by documentId
  <VeltCommentPin documentId="YOUR_DOCUMENT_ID" />
  
  // Filter by context
  <VeltCommentPin context={{ key1: "value1" }} contextOptions={{ partialMatch: true }} />
  

​

Improvements

• [Notifications]: Modified getSettings in notifications from a one-time call to a subscription and added a new hook for it.
  • React / Next.js
  • Other Frameworks

  Using Hook:

  Copy

  Ask AI

  const { setSettingsInitialConfig, setSettings, settings } = useNotificationSettings();
  // setSettingsInitialConfig will set the default settings for the notifications.
  // setSettings will update the settings for the notifications in the server.
  // settings will return the current settings for the notifications. Initially it will be null and will be updated when the settings are fetched.
  

  Using API:

  Copy

  Ask AI

  const notificationsElement = client.getNotificationElement();
  notificationsElement.getSettings().subscribe((settings) => {
    console.log('current settings are', settings);
  });
  

• [Documents]: Added support for folderId in updateDocuments method.
  • React / Next.js
  • Other Frameworks

  Copy

  Ask AI

  await client.updateDocuments({
    organizationId: 'ORGANIZATION_ID',
    folderId: 'FOLDER_ID',
    documents: [
      {
        documentId: 'DOCUMENT_ID',
      }
    ]
  });
  

​

Bug Fixes

• [UI Customization]: Fixed an issue where the internal state for User variable was not being cleaned up in Velt If component.

​

Improvements

• [Comments]: Added support for multiple text format selection and multiple paragraphs selection in tiptap-velt-comments.

​

Bug Fixes

• [Comments]: Reverted back sidebar filter panel default layout to checkbox from dropdown.

​

Improvements

• [Comments]: Added default value for sidebar filter search input.
• [Recorder]: Updated the video editor apply button behavior. Now it will always be enabled whether or not the user edited the video.
• [Comments]: Added ability to add custom filters via FilterConfig.
  1. First enable custom actions.
  2. Add custom filters in filter config.
  3. Add custom filters wireframe to the sidebar wireframe.
  4. Add callbacks to update sidebar data when the filters are used.
  • React / Next.js
  • Other Frameworks

  1. Enable Custom Actions:

  Copy

  Ask AI

  <VeltCommentsSidebar customActions={true} />
  

  2. Add custom filters in filter config:

  Copy

  Ask AI

  const filterConfig = {
    location: {
      name: 'Pages',
      enable: true,
      multiSelection: true,
      enableGrouping: true,
      placeholder: 'Search pages',
    },
    // ... Remaining filters
    deviceType: {  // Custom Filter 1
      name: 'Device Type',
      enable: true,
      multiSelection: true,
      enableGrouping: false,
      placeholder: 'Search device type',
      id: 'deviceType',
      type: 'custom',
      options: [
        {
          id: 'desktop',
          name: 'Desktop',
        },
        {
          id: 'mobile',
          name: 'Mobile',
        },
        {
          id: 'tablet',
          name: 'Tablet',
        },
      ]
    },
    otherCustomFilter: { // Custom Filter 2
      name: 'Other Custom Filter',
      enable: true,
      multiSelection: false,
      enableGrouping: false,
      placeholder: 'Search any field',
      id: 'otherCustomFilter',
      type: 'custom',
      options: [
        {
          id: 'field1',
          name: 'Field 1',
        },
        {
          id: 'field2',
          name: 'Field 2',
        },
        {
          id: 'field3',
          name: 'Field 3',
        },
        {
          id: 'field4',
          name: 'Field 4',
        },
        {
          id: 'field5',
          name: 'Field 5',
        },
      ]
    },
  };
  
  <VeltCommentsSidebar 
    customActions={true}
    filterConfig={filterConfig}
  />
  

  See all 69 lines

  3. Add custom filters wireframe for each custom filter you added in filter config:

  Copy

  Ask AI

  <VeltCommentsSidebarFilterWireframe>
    <VeltCommentsSidebarWireframe.Filter.Custom id='deviceType' />
    <VeltCommentsSidebarWireframe.Filter.Custom id='otherCustomFilter' />
    {/* ... remaining filters */}
  </VeltCommentsSidebarFilterWireframe>
  

  4. Add callbacks to update sidebar data when the filters are used:

  • The following callbacks will contain the customFilters field with the custom filter id and its options indicating which options are selected:
  • commentSidebarDataUpdate
  • commentSidebarDataInit
  • veltButtonClick

  Copy

  Ask AI

    const commentElement = client.getCommentElement();
    
    // Button click callback
    client.on('veltButtonClick').subscribe(contextData => {
      console.log('veltButtonClick', contextData);
    });
  
    // Sidebar data callbacks
    commentElement.on('commentSidebarDataUpdate').subscribe((contextData) => {
      console.log('commentSidebarDataUpdate', contextData);
    });
  
    commentElement.on('commentSidebarDataInit').subscribe((contextData) => {
      console.log('commentSidebarDataInit', contextData);
    });
  

​

Improvements

• [Comments]: Renamed groupMultipleMatch config to groupMatchedComments config for grouping multiple comment annotations in Comment Bubble component when multiple annotations match the provided context or targetElementId. The old config is still supported.
  • Default: false
  • React / Next.js
  • Other Frameworks

  Using Props:

  Copy

  Ask AI

  <VeltComments groupMatchedComments={true} />
  

  Using API:

  Copy

  Ask AI

  const commentElement = client.getCommentElement();
  commentElement.enableGroupMatchedComments();
  commentElement.disableGroupMatchedComments();
  

​

New Features

• [Presence]: Added wireframes support for Presence component.

​

Improvements

• [Comments]: Added support for setting custom filter placeholders through filterConfig. This is used when filterOptionLayout is set to dropdown.
  • React / Next.js
  • Other Frameworks

  Copy

  Ask AI

  const filterConfig = {
    location: {
      name: 'Pages',
      enable: true,
      placeholder: 'Custom Location'
    },
    document: {
      name: 'Documents',
      enable: true,
      placeholder: 'Custom Document'
    }
  };
  
  <VeltCommentsSidebar filterConfig={filterConfig} />
  

• [Comments]: Added a filteredCommentAnnotationsCount template variable for visible comments in sidebar when a filter is applied.

​

Bug Fixes

• [Comments]: Fixed an issue where the assign input was not closing when clicked outside in the sidebar.
• [Comments]: Fixed an issue where the reaction panel tool was getting hidden when hovered out.
• [Comments]: Fixed an issue where users set through updateContactList were not visible in tagged and assigned filters.

​

New Features

• [Comments]: Added support for grouping multiple comment annotations in Comment Bubble component when multiple annotations match the provided context or targetElementId
  • Default: false
  • React / Next.js
  • Other Frameworks

  Using Props:

  Copy

  Ask AI

  <VeltComments groupMultipleMatch={true} />
  

  Using API:

  Copy

  Ask AI

  const commentElement = client.getCommentElement();
  commentElement.enableGroupMultipleMatch();
  commentElement.disableGroupMultipleMatch();
  

​

Bug Fixes

• [Comments]: Fixed an issue that happened on sidebar where the recording service got into a bad state when the user cancelled the recording.

​

Improvements

• [Comments]: Added support for filterCommentsOnDom when custom sidebar filters are configured.
• [Comments]: Added additional testIds in following components:
  • Message input (element with class velt-composer-input--message)
  • Container for author (element with class velt-thread-card--author)
  • Confirmation dialog (element with class velt-confirm-dialog)
  • Velt buttons (elements with class velt-button)
• [Comments]: Removed quotes from the display message when notificationSource is custom.

​

Improvements

• [Core]: Added unsetLocationsIds method to unset locations by passing location IDs as parameters
  Copy

  Ask AI

  client.unsetLocationsIds(['location1', 'location2', 'location3'])
  

​

Improvements

• [Core]: Improved SDK initialization layer and added new core methods to improve developer experience:
  • Added rootDocumentId param in setDocuments method to specify which document should act as root. By default 1st document will be set as root document unless rootDocumentId is specified.
  Copy

  Ask AI

  client.setDocuments([{id:'doc1'},{id:'doc2'}], {rootDocumentId:'doc2'})
  

  • Added setRootDocument method to set a different document as root. If user has passed multiple documents and wants to switch the root document:
  Copy

  Ask AI

  client.setRootDocument({id:'doc2'})
  // There won't be any change in the other documents internally. They will remain as is.
  

  • Added setLocations method to add multiple locations:
  Copy

  Ask AI

  client.setLocations([
    {id:'location1', locationName:'location1'},
    {id:'location2', locationName:'location2'}
  ], {rootLocationId: 'location2'})
  // By default 1st location will be set as root location unless rootLocationId is specified.
  
  // If User wants to append new locations then 'appendLocation' flag needs to be passed.
  client.setLocations([
    {id:'location3', locationName:'location3'},
    {id:'location4', locationName:'location4'}
  ], {appendLocation: true})
  

  • Added setRootLocation method to set a different location as root:
  Copy

  Ask AI

  client.setRootLocation({id:'location3', locationName:'location3'})
  // There won't be any change in the other locations internally. They will remain as is.
  

  • Added removeLocations method to remove multiple locations:
  Copy

  Ask AI

  client.removeLocations(
    {id:'location3', locationName:'location3'},
    {id:'location4', locationName:'location4'}
  )
  

  • Most init methods now return promises:
    • await setDocuments
    • await setDocument
    • await setDocumentId
    • await setRootDocument
    • await setLocation
    • await setLocations
    • await setRootLocation
  • Added a listener event on ON method to subscribe to init changes:
  Copy

  Ask AI

  Velt.on('initUpdate').subscribe((e) => console.log('New init event', e))
  

  • Most Analytics events now trigger a common naming pattern:
    • setDocumentsTriggered
    • setRootDocumentTriggered
    • unsetDocumentsTriggered
    • setLocationsTriggered
    • setRootLocationTriggered
    • removeLocationsTriggered
    • setDocumentsSuccess
    • unsetDocumentsSuccess
    • setLocationsSuccess
    • removeLocationsSuccess

​

New Features

• [Self-hosting]: Added support to disable getting user resolver requests for organization, document and folder users. Helps optimize performance by avoiding unnecessary user data requests
  • Sometimes you may have a lot of users within your organization, document or folder. In such cases, you may want to disable user resolver requests for organization, document and folder users and instead use custom autocomplete feature.
  • Learn more about user data provider

const formatUsersToRecord = (users) => {
    // Format users array into a Record object with userId as key and user data as value
    return users.reduce((record, user) => {
        record[user.userId] = {
            userId: user.userId,
            name: user.name,
            // any other fields
        };
        return record;
    }, {});
};

const fetchUsersFromDB = async (userIds) => {
    // Fetch users from your DB
    const usersData = await __getUsersFromYourDB__(userIds);
    return formatUsersToRecord(usersData);
};

const userDataProvider: UserDataProvider = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

<VeltProvider 
    apiKey='YOUR_API_KEY'
    dataProviders={{
        user: userDataProvider
    }}
>
</VeltProvider>

​

New Features

• [Comments]: Added custom metadata support for comment tool and comment bubble components.
  • Works only with popover mode comments. Perfect for complex tables with filtering and segmentation needs.
  • Set flexible comment anchoring and filtering logic at the cell level using key-value pairs.
  • Supports aggregate views: Eg: comments added in day view can appear in week/month views automatically.
  • Two new props:
    • context: key-value object for metadata
    • contextOptions: matching behavior (default: full match, or set partialMatch: true for flexible matching)
  • How Partial Match Works:
    • A comment will match if ALL provided filter criteria exist in the comment’s context
    • Extra fields in the comment’s context don’t prevent matching
    • Missing fields in the comment’s context prevent matching
    • Example: Comment has { day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" }
      • Filter { day: "01", product: "cheese" } → ✅ matches (both fields exist in comment)
      • Filter { day: "01", category: "dairy" } → ❌ no match (category doesn’t exist in comment)
  • Partial Match Examples:
    • Comment has { day: "01", week: "01", month: "jan", product: "cheese" }
    • Filter with { day: "01", week: "01", month: "jan", product: "cheese" } → matches (full)
    • Filter with { week: "01", month: "jan", product: "cheese" } → matches (partial)
    • Filter with { day: "01", week: "01", month: "jan", product: "cheese", location: "zurich" } → no match
    • React / Next.js
    • Other Frameworks

    Copy

    Ask AI

    <VeltCommentTool context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Full match
    <VeltCommentBubble context={{ 'key1': 'value1', 'key2': 'value2' }} />
    // Partial match
    <VeltCommentBubble context={{ 'key1': 'value1' }} contextOptions={{ partialMatch: true }} />
    

​

Bug Fixes

• [Recorder]: Fixed an issue where sometimes the recorder service would not update the saved file url after the processing was completed due to a race condition.

​

New Features

• [Comments]: Added ability to filter out comments in the DOM when they are filtered in the sidebar.
  • When the sidebar is closed (default mode) or unmounted (embed mode), the DOM filter will be removed.
  • Default: false
    • React / Next.js
    • Other Frameworks

    Using Props:

    Copy

    Ask AI

    <VeltComments filterCommentsOnDom={true} />
    

    Using API:

    Copy

    Ask AI

    const commentElement = client.getCommentElement();
    commentElement.enableFilterCommentsOnDom();
    commentElement.disableFilterCommentsOnDom();
    

​

New Features

• [Notifications]: Added notification settings feature to allow users to configure their notification preferences.
  • Enable this feature in the Velt Console.
  • Then enable settings on the notifications tool or panel in the UI. Learn more
    • React / Next.js
    • Other Frameworks

    Copy

    Ask AI

    // You can enable this on either the tool or the panel
    <VeltNotificationsTool settings={true} />
    <VeltNotificationsPanel settings={true} />
    

  • Configure default settings with setSettingsInitialConfig() API and extend it to add more channels where you intend to send notifications to your users. Learn more
  • Update settings programmatically with setSettings() API. Learn more
  • Get current settings with getSettings() API. Learn more
  • Subscribe to settings updates with settingsUpdated event. Learn more
  • Added wireframe components for notifications panel settings UI. Learn more
  • Added Backend APIs to set and get notifications settings. Learn more

​

Improvements

• [DevTools]: Exposed more events and improved the event stream ordering. The latest version is 1.1.6
• [Recorder]: Added transcription field to RecorderDataAsset.
  Copy

  Ask AI

  class RecorderDataAsset {
    // ...
    transcription: RecorderDataTranscription;
    // ...
  }
  

​

Bug Fixes

• [Recorder]: Fixed an issue where the mini player wouldn’t play or pause the video on click.
• [Recorder]: Fixed an issue where the mini player was not playing the latest edited version of the video.
• [Recorder]: Fixed the alignment of the play button in the mini player.
• [Recorder]: Fixed the responsive behavior of the expanded player.
• [Comments]: Fixed an issue in composer wireframe where clicking on attachments, recordings, avatar components inside the composer was closing the composer.

​

Bug Fixes

• [Comments]: Reopen the resolved thread if someone replies.

​

New Features

• [Recorder]: Added a feature to download the latest version of a recording.
  • It’s available in the UI by default. Wireframe added.
  • Added an API method to trigger download programmatically:
    • React / Next.js
    • Other Frameworks

    Copy

    Ask AI

    const recorderElement = client.getRecorderElement();
    await recorderElement.downloadLatestVideo('RECORDER_ID');
    

​

Improvements

• [Recorder]: Changed the background of removed video segments to a diagonal stripe pattern to clearly indicate removal (instead of waveform/thumbnails).
• [Recorder]: Added a center focal point to the zoom selection rectangle for better UX.
• [Recorder]: Added Edit button Wireframe in the recorder player.

​

Bug Fixes

• [Recorder]: Implemented several UX fixes for the video editor:
  • Maintained correct aspect ratio for the zoom selection rectangle during resizing.
  • Ensured the zoom selection rectangle maintains its original position while resizing with aspect ratio locked.
  • Ensured video preview displays correct content at responsive widths.
  • Prevented the zoom selection rectangle from moving outside the video content area.
  • Corrected corner dragging behavior to ensure the zoom selection stays within boundaries.
  • Fixed an issue where a small zoom selection at the boundary would go out of bounds when decreasing scale.
  • Updated recorderTime.duration logic to store precise millisecond values.
  • Resolved an issue where dragging the trim/scale handler during video playback affected both operations simultaneously.
  • Reduced the drag threshold for improved responsiveness of drag operations.
• [Recorder]: Fixed an issue where playback on the mini video player would not stop when the video player was expanded.

​

Bug Fixes

• [Comments]: Fixed an issue where folderId was getting unset when switching between documents too quickly.

​

Improvements

• [Comments]: Render default comment sidebar only when it is opened. Note this is not applicable for sidebar in embed mode.
• [Comments]: Added a dynamic class for unread comment annotation in comment pin component: velt-comment-pin-unread-comment.

​

New Features

• [Presence]: Added event to track changes in user’s presence state: online, offline, away.

const userStateChangeEventData = usePresenceEventCallback('userStateChange');

useEffect(() => {
    if (userStateChangeEventData) {
        console.log('userStateChange: ', userStateChangeEventData);
    }
}, [userStateChangeEventData]);

const presenceElement = client.getPresenceElement();
presenceElement.on("userStateChange").subscribe((data: PresenceUserStateChangeEvent) => {
    console.log("userStateChange", data);
});

export interface PresenceUserStateChangeEvent {
    user: PresenceUser; // Object containing user details
    state: string;      // New state of the user, e.g., 'online', 'away', 'offline'
};

• [Presence]: Added api and hook to fetch presence data with query filters.

// Fetch online users
const onlineUsersPresenceData = usePresenceData({ statuses: ['online'] });
useEffect(() => {
    if (onlineUsersPresenceData && onlineUsersPresenceData.data) {
        console.log('Presence data (online users): ', onlineUsersPresenceData.data);
    }
}, [onlineUsersPresenceData]);

// Fetch all users (no query)
const allUsersPresenceData = usePresenceData();
useEffect(() => {
    if (allUsersPresenceData && allUsersPresenceData.data) {
        console.log('Presence data (all users): ', allUsersPresenceData.data);
    }
}, [allUsersPresenceData]);

const presenceElement = client.getPresenceElement();
// Fetch online users
presenceElement.getData({ statuses: ['online'] }).subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (online users): ", response.data);
});

// Fetch all users (no query)
presenceElement.getData().subscribe((response: GetPresenceDataResponse) => {
    console.log("Presence data (all users): ", response.data);
});

PresenceRequestQuery {
    documentId?: string;
    organizationId?: string;
    statuses?: string[]; // Filter by statuses, e.g., ['online', 'away', 'offline']
}

GetPresenceDataResponse {
    data: PresenceUser[] | null; // Array of PresenceUser objects or null
}

• [Workspace]: Added API to add and delete domains to the allowed domains list. Learn more

​

New Features

• [Comments]: Added a new Document Filter Dropdown component to the Comment Sidebar. This feature allows users to filter comments based on documents.
  • By default, this filter is disabled. You need to enable it in filter config.
  • This works when you are using multiple documents or folders.

  const filterConfig = {
    document: {
      enable: true,
      name: "Documents", // Optional: Customize the display name of the filter
      enableGrouping: true, // Optional: Enable grouping of documents
      multiSelection: true, // Optional: Allow multiple documents to be selected
    }
  };

  <VeltCommentsSidebar filterConfig={filterConfig} />

​

Improvements

• [Comments]: Added support to add context in Velt Comment Tool component as well. Previously, context for comments could only be added via event callbacks or APIs. With this update, you can now predefine context directly within the Velt Comment Tool component itself. Currently, this feature is specific to popover comments, allowing you to, for example, assign unique context to each cell in a table.

<VeltCommentTool targetElementId="elementId" context={{ key1: 'value1' }} />

• [Recorder]: Enhanced error handling for the recorder by introducing a new RecordingErrorEvent event. It will be triggered when the following errors occur:
  • transcriptionFailed: When transcription fails.
  • editFailed: When a video edit operation fails.
  • recordingFailed: When a recording fails.

// Hook
const recorderErrorEvent = useRecorderEventCallback('error');
useEffect(() => {
  if (recorderErrorEvent) {
      if (recorderErrorEvent.type === 'transcriptionFailed') {
          console.error('Transcription failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'editFailed') {
          console.error('Edit failed:', recorderErrorEvent);
      } else if (recorderErrorEvent.type === 'recordingFailed') {
          console.error('Recording failed:', recorderErrorEvent);
      }
  }
}, [recorderErrorEvent]);

// API Method
const recorderElement = client.getRecorderElement();
recorderElement.on('error').subscribe((event) => {
    if (event.type === 'transcriptionFailed') {
        console.error('Transcription failed:', event);
    } else if (event.type === 'editFailed') {
        console.error('Edit failed:', event);
    } else if (event.type === 'recordingFailed') {
        console.error('Recording failed:', event);
    }
});

• [Recorder]: Added RecordingSaveInitiatedEvent event. This event is dispatched before the actual save operation begins for original or edited recording.

// Using the hook
const recordingSaveInitiatedEvent = useRecorderEventCallback('recordingSaveInitiated');

useEffect(() => {
  if (recordingSaveInitiatedEvent) {
    if (recordingSaveInitiatedEvent.type === 'edit') {
      console.log('Edited recording save initiated);
    } else {
      console.log('New recording save initiated.');
    }
  }
}, [recordingSaveInitiatedEvent]);

// Using the API method
const recorderElement = client.getRecorderElement(); 

recorderElement.on('recordingSaveInitiated').subscribe((event) => {
  if (event.type === 'edit') {
    console.log('Edited recording save initiated');
  } else {
    console.log('New recording save initiated');
  }
});

• [Recorder]: Changed background color for video in the editor to gray when the editor is resized to a smaller size.
• [Recorder]: Video playback now stops upon reaching the end and the player state is reset.
• [Recorder]: Improved type for the legacy onRecordedData callback.

​

Bug Fixes

• [Single Editor Mode]: Fixed an issue where the editor sometimes lost edit access when opening the document in another tab when additional users were also present in the document.

​

Improvements

• [Recorder]: Added wireframes for Timeline and Zoom feature.

​

Features

• [SDK]: Added apiProxyDomain support, allowing Velt API calls to be proxied through your own domain. Learn more.

<VeltProvider
  config={{
      apiProxyDomain: 'https://api.yourdomain.com'
  }}
></VeltProvider>

​

Bug Fixes

• [Comments]: Fixed an issue where Thread Card Dropdown Options: Delete Thread and Delete Comment button wireframes text was not updated correctly.

​

Improvements

• [Recorder]: Improved the post processing speed for zoom in effect by 90%.
• [Recorder]: Added configuration API to specify recording quality constraints and encoding options. This provides finer control over the video and audio output of recordings.
  • React / Next.js
  • Other Frameworks

  Copy

  Ask AI

  const recorderElement = useRecorderUtils();
  
  recorderElement.setRecordingQualityConstraints({
      'other': {
          'video': {
              width: { exact: 3024  },
              height: { exact: 1542 },
              frameRate: { exact: 20 },
          }
      }
  });
  
  recorderElement.setRecordingEncodingOptions({
      'other': {
          videoBitsPerSecond: 2000000,
          audioBitsPerSecond: 128000
      }
  });
  

​

Bug Fixes

• [Recorder]: Removed loading animation in the apply button which was causing performance issues.
• [Recorder]: Fixed the issue where disabled buttons were still clickable.

​

Improvements

• [Presence]: Added ability to configure when user is considered offline after being inactive. Default value: 600000ms (10 minutes).

<VeltPresence offlineInactivityTime={600000} />

• [Presence]: Added isUserIdle and isTabAway fields in presence user objects.
  • When a user navigates away from the current tab, their status will be marked as away, and the isTabAway field in their presence object will be set to true.
  • If a user remains inactive (no mouse movement) for a duration defined by inactivityTime (default: 5 minutes), their status will be set to away, and the isUserIdle field in their presence object will be set to true.
• [Single Editor Mode]: Added new events for Single Editor Mode, enabling finer-grained tracking of collaborative states and user interactions. The new events are:
  • accessRequested: When a user requests editor access.
  • accessRequestCanceled: When a user cancels their request for editor access.
  • accessAccepted: When a user’s request for editor access is accepted.
  • accessRejected: When a user’s request for editor access is rejected.
  • editorAssigned: When a user is assigned as the editor.
  • viewerAssigned: When a user is assigned as a viewer.
  • editorOnDifferentTabDetected: When the current editor navigates away to a different browser tab or window.
  • React / Next.js
  • Other Frameworks

  Using Hooks:

  Copy

  Ask AI

  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  const eventData = useLiveStateSyncEventCallback("EVENT_TYPE"); 
  
  useEffect(() => {
    if (eventData) { 
      console.log("EVENT_TYPE data: ", eventData);
    }
  }, [eventData]);
  

  Using API:

  Copy

  Ask AI

  const liveStateSyncElement = useLiveStateSyncUtils();
  // Replace "EVENT_TYPE" with an actual event string. eg: "accessRequested".
  liveStateSyncElement.on("EVENT_TYPE").subscribe((eventData) => {
    console.log("EVENT_TYPE data: ", eventData);
  });
  

• [Comments]: The updateContext method is now supported even when multiple documents are initialized.

​

New Features

• [Recorder]: Added zooming functionality. Users can now add smooth zoom in and out effects on the video scenes. Note: This is in beta and currently the processing time for zoom in effect is quite high. We are working to optimize it.

​

Improvements

• [Recorder]: Improved wireframes for video editor elements with mouse events to remove all styles if children are provided in the wireframe. Earlier for these elements, some residual styles were required to be overridden via CSS.
• [Recorder]: Added the recordingEditDone event. This event fires the recording edits are done processing and the new recording file is generated.
  • React / Next.js
  • Other Frameworks

  Copy

  Ask AI

  const recordingEditDoneEvent = useRecorderEventCallback('recordingEditDone');
  useEffect(() => {
      if (recordingEditDoneEvent) {
          console.log('recordingEditDone: ', recordingEditDoneEvent);
      }
  }, [recordingEditDoneEvent]);
  
  

• [Recorder]: Added the deleteRecordings API method to delete recordings.

const recorderelement = client.getRecorderElement();
await recorderelement.deleteRecordings({
    recorderIds: ['RECORDER_ID_1']
});

​

Bug Fixes

• [Core]: Release 4.4.0 stable version.

​

Bug Fixes

• [Comments]: Fixed an issue where the velt-comment-sidebar-filter-item--Added class was not being applied correctly in the people filter.
• [Notifications]: Fixed an issue where setNotificationAsRead was not working as expected in some scenarios.

​

Bug Fixes

• [Live State Sync]: Fixed an issue where serverConnectionState value was not updating correctly in some scenarios.

​

Improvements

• [Comments]: Added support to specify whether the system filters (e.g., “me”, “this page”) should be combined with an “and” or “or” operator. Default is and.

<VeltCommentsSidebar systemFiltersOperator='or' />

const commentElement = client.getCommentElement();
commentElement.setSystemFiltersOperator('or');

• [Comments]: Improved filters for comments author in the sidebar.

​

Bug Fixes

• [SDK]: Fixed an issue where delete notification REST API was causing some older notifications to be hidden in the frontend component.

​

Improvements

• [REST APIs]: Added support for persisting read notifications in “For You” tab through Update Notifications REST API. You can pass persistReadForUsers param as true.

​

Bug Fixes

• [SDK]: Fixed an issue where the setAllNotificationsAsRead SDK API method was not working as expected.

​

Improvements

• [REST APIs]: Added realtime updates to SDK when notifications are deleted via the REST APIs.
• [REST APIs]: Added support for marking notifications as read through Update Notifications REST API.

​

Bug Fixes

• [Single Editor Mode]: Fixed accept reject buttons disappearing issue when multiple users request access in single editor mode.

​

Improvements

• [Live State Sync]: Improved types in getLiveStateData, setLiveStateData methods and hooks.
• [Comments Sidebar]: Ensured that “me” and “this page” options are on the top of the comments sidebar filters.
• [Notifications]: Added missing panelOpenMode prop to VeltNotificationsPanel in React.
  Copy

  Ask AI

  <VeltNotificationsPanel panelOpenMode='sidebar'/>
  

​

Bug Fixes

• [Comments]: Fixed an edge case where Tiptap comments were not being added when commentToNearestAllowedElement is enabled and comment mode is on.

​

New Features

• [Comments]: Added ability to attach comment pins to the closest allowed element when clicking on a non-allowed element. Default: false

<VeltComments commentToNearestAllowedElement={true} />

const commentElement = client.getCommentElement();
commentElement.enableCommentToNearestAllowedElement();
commentElement.disableCommentToNearestAllowedElement();

• [Comments]: Added ability to enable/disable draft mode in comments. Default: true

<VeltComments draftMode={false} />

const commentElement = client.getCommentElement();
commentElement.enableDraftMode();
commentElement.disableDraftMode();

• [Presence]: Added ability to turn off shadow DOM in Presence component. Default: true

<VeltPresence shadowDom={false} />

​

Improvements

• [Webhooks]: Added assigned: true in comment added event when someone is assigned to the comment during creation.
• [Live State Sync]: Enhanced Redux middleware with support to dynamically update configuration options:
  • allowedActionTypes
  • disabledActionTypes
  • allowAction

​

Bug Fixes

• [Core]: Added additional compatibility for Safari v16 and older versions.

​

Improvements

• [Recorder]: Added ability to control whether recorded videos play in fullscreen mode.
  • You can use this prop on any of the following components:
    • Velt Recorder Notes
    • Velt Recorder Control Panel
    • Velt Recorder Player
  • Its turned on by default for Comments feature and off by default for standalone Recorder feature.

// Change behaviour globally
<VeltRecorderNotes playVideoInFullScreen={true} />
<VeltRecorderControlPanel playVideoInFullScreen={true} />
// Change behaviour for specific player 
<VeltRecorderPlayer playVideoInFullScreen={true} />

• [Recorder]: Added keyboard shortcuts in video editor for improved editing experience:
  • s: Split the video at the selected frame.
  • d, delete, or backspace: Delete the selected video section.
  • space: Toggle video play/pause.
• [Single Editor Mode]: Added wireframe for Single Editor Mode Panel.
• [Single Editor Mode]: Added embeddable component for Single Editor Mode Panel.
  • React / Next.js
  • Other Frameworks

  Copy

  Ask AI

  <VeltSingleEditorModePanel shadowDom={false} darkMode={true} variant="custom-ui" />
  

​

Improvements

• [UI Customization]: Added dynamic key support and square bracket notation support in Velt If conditions for more flexible conditional logic.

​

Bug Fixes

• [Follow Mode]: Fixed an issue where follow mode was not working as expected.
• [Comments]: Fixed “All” status filter not displaying all comments in sidebar.

​

New Features

• [UI Customization]: Added support of adding dynamic id on Velt Button. You can use template variables to set the id.

<VeltButtonWireframe id="someStaticId" type="button-toggle" />
<VeltButtonWireframe id="{annotation.annotationId}" type="button-toggle" />

​

Improvements

• [Recorder]: Improved video editor UX for trimming and splitting videos.
• [Single Editor Mode]: Return undefined value in isUserEditor when there are no current editors available in single editor mode.
• [Presence]: Added locationId support in presence component.

<VeltPresence locationId={"YOUR_LOCATION_ID"} />

​

Bug Fixes

• [Comments]: Fixed an issue where comment dialog composer in sidebar was getting autofocused when fullExpanded mode was enabled.

​

New Features

• [UI Customization]: Added resetVeltButtonState method to reset the state of Velt Button components.
  Copy

  Ask AI

  // Reset state for a specific button in a given group
  client.resetVeltButtonState({id: 'openSidebar', group: 'multi'})
  
  // Reset state for all buttons in a given group
  client.resetVeltButtonState({group: 'multi'})
  
  // Reset state for a specific button in all groups
  client.resetVeltButtonState({id: 'openSidebar'})
  
  // Reset state for all buttons
  client.resetVeltButtonState()
  

​

Improvements

• [Comments]: Updated copy and icons for sidebar filter buttons.
• [Recorder]: Made the transition to editor smoother when autoOpenVideoEditor is enabled.
• [Recorder]: Improved the control panel embedded settings menu UX.
• [Recorder]: Added keyboard shortcuts for Play, Pause, Split, and Delete actions in video editor.

​

Bug Fixes

• [Comments]: Fixed an issue where the dialog might close if the user clicked outside the dialog while a recording was in progress.

​

New Features

• [Self Hosting]: Added support for self-hosting file attachments in comments.

​

Improvements

• [Self Hosting]: Added retries for GET operations.
• [Analytics]: Exposed additional events to Velt Debugger.
• [Live State Sync]: Added config to choose between merging and replacing live state data.

const liveStateData = {
  'yourKey': 'yourValue'
};

useSetLiveStateData('LIVE_STATE_DATA_KEY',liveStateData, { merge: true });

const liveStateSyncElement = useLiveStateSyncUtils();
const liveStateData = {
  'yourKey': 'yourValue'
};
liveStateSyncElement.setLiveStateData('LIVE_STATE_DATA_KEY', liveStateData, {
    merge: true
});

​

Bug Fixes

• [Live State Sync]: Fixed an issue in the Redux Middleware where the middleware was not initializing when Velt Provider was added conditionally.

​

Bug Fixes

• [Single Editor Mode]: Fixed an issue where contenteditable div’s access was not syncing properly when editor state changed.

​

Improvements

• [Recorder]: Added missing audio waveform visualization for screen recordings.
• [Recorder]: Made query parameter optional for fetchRecordings method.
• [Recorder]: Improved metadata handling to ensure clean object state.
  Copy

  Ask AI

  export class RecorderData {
    recorderId!: string;
    from?: User | null; 
    metadata?: RecorderMetadata;
    assets: RecorderDataAsset[] = [];
    transcription: RecorderDataTranscription = new RecorderDataTranscription();
  }
  

​

Improvements

• [Recorder]: Added additional props in Recorder Control Panel component:
  • settingsEmbedded: If set to true, the settings will be embedded in the control panel vs a menu. Default is false. Please use this together with the Control Panel Wireframes so that you can move the settings panel in a different part of the control panel UI.
  • autoOpenVideoEditor: If set to true, the video editor will be opened automatically when the recording is done. Default is false.

<VeltRecorderControlPanel autoOpenVideoEditor={true} settingsEmbedded={true} />

• [Recorder]: Added wireframe for recording preview in recording control panel.

<VeltRecorderControlPanelWireframe.FloatingMode.Screen />

​

New Features

• [Comments]: Added fullExpanded mode to control the expanded state of comments.
  • When enabled, comments will be shown in fully expanded state by default.
  • Available on all comment-related components and can be controlled via props or API methods.

// Apply this change globally to all types of comments
<VeltComments fullExpanded={true} />

// Apply this change only in comments sidebar
<VeltCommentsSidebar fullExpanded={true} />

// Apply this change only in inline comments section
<VeltInlineCommentsSection fullExpanded={true} />

// Apply this change only in the standalone comment thread
<VeltCommentThread fullExpanded={true} />

const commentElement = client.getCommentElement();
commentElement.enableFullExpanded();
commentElement.disableFullExpanded();

​

New Features

• [Dev Tools]: Published beta version of Velt Devtools Chrome extension. It allows you to inspect and debug your Velt implementation. If you are interested in trying it out, please reach out to us.
• [Console]: Added support for viewing folders, recordings and notifications data in the console data page.
• [Console]: Added support for additional filters in the console data page: organizationId, folderId, documentId, userId.
• [Comments]: Added support for folder users in @ mentions dropdown.
• [Recorder]: Added an API to subscribe to all recorder data in the current document.
  • Param: RecorderRequestQuery, optional, Gets the data for the provided query.
  • Returns: Observable<GetRecordingsResponse>, Subscription of the recorder data.

const recordings = useRecordings(); 

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

const recorderElement = useRecorderUtils();
recorderElement.getRecordings().subscribe((data) => {
    console.log('recordings', data);
});

• [Recorder]: Extended the on event subscription API to include:
  • recordingDone: Triggered when recording is completed.
  • deleteRecording: Triggered when a recording is deleted.

const recordingDoneEvent = useRecorderEventCallback('recordingDone');
const recordingDeleteEvent = useRecorderEventCallback('deleteRecording');

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

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

const recorderElement = useRecorderUtils();

recorderElement.on('recordingDone').subscribe((data) => {
    console.log('recordingDone:' , data);
});

recorderElement.on('deleteRecording').subscribe((data) => {
    console.log('deleteRecording:' , data);
});

​

Improvements

• [UI]: Made custom list search case insensitive.
• [Recorder]: Make the video preview responsive in video editor.
• [Recorder]: Improved types for all APIs and Props for the recording feature.

​

New Features

• [Core]: Added the following events in on method of Velt client:
  • userUpdate: Triggered when the Velt user is updated.
  • documentInit: Triggered when the Velt document is initialized.
  • error: Triggered when an error occurs. Currently this is only triggered for token_expired error. In future, this will be extended for other relevant errors.

const userUpdateEvent = useVeltEventCallback('userUpdate');
const documentInitEvent = useVeltEventCallback('documentInit');
const errorEvent = useVeltEventCallback('error');

useEffect(() => {
    console.log('userUpdate', userUpdateEvent);
}, [userUpdateEvent]);

useEffect(() => {
    console.log('documentInit', documentInitEvent);
}, [documentInitEvent]);

useEffect(() => {
    // for token expired, error.code = 'token_expired'
    console.log('error', errorEvent);
}, [errorEvent]);

client.on('userUpdate').subscribe((user) => {
    console.log('userUpdate', user);
});

client.on('documentInit').subscribe((documentInit) => {
    console.log('documentInit', documentInit);
});

client.on('error').subscribe((error) => {
    // for token expired, error.code = 'token_expired'
    console.log('error', error);
});