Changelog

​

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

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

  Inline Comments Section:

  Copy

  Ask AI

  <!-- Filter by folderId -->
  <velt-inline-comments-section folder-id="YOUR_FOLDER_ID"></velt-inline-comments-section>
  
  <!-- Filter by documentId -->
  <velt-inline-comments-section document-id="YOUR_DOCUMENT_ID"></velt-inline-comments-section>
  
  <!-- Filter by context -->
  <velt-inline-comments-section context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-inline-comments-section>
  

  Comment Tool:

  Copy

  Ask AI

  <!-- Filter by folderId -->
  <velt-comment-tool folder-id="YOUR_FOLDER_ID"></velt-comment-tool>
  
  <!-- Filter by documentId -->
  <velt-comment-tool document-id="YOUR_DOCUMENT_ID"></velt-comment-tool>
  
  <!-- Filter by context -->
  <velt-comment-tool context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-comment-tool>
  

  Comment Bubble:

  Copy

  Ask AI

  <!-- Filter by folderId -->
  <velt-comment-bubble folder-id="YOUR_FOLDER_ID"></velt-comment-bubble>
  
  <!-- Filter by documentId -->
  <velt-comment-bubble document-id="YOUR_DOCUMENT_ID"></velt-comment-bubble>
  
  <!-- Filter by context -->
  <velt-comment-bubble context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-comment-bubble>
  

  Comment Pin:

  Copy

  Ask AI

  <!-- Filter by folderId -->
  <velt-comment-pin folder-id="YOUR_FOLDER_ID"></velt-comment-pin>
  
  <!-- Filter by documentId -->
  <velt-comment-pin document-id="YOUR_DOCUMENT_ID"></velt-comment-pin>
  
  <!-- Filter by context -->
  <velt-comment-pin context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-comment-pin>
  

​

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

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

  Using API:

  Copy

  Ask AI

  const notificationsElement = Velt.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',
      }
    ]
  });
  

  Copy

  Ask AI

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

  Copy

  Ask AI

  await Velt.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);
    });
  

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

  1. Enable Custom Actions:

  Copy

  Ask AI

  <velt-comments-sidebar custom-actions="true"></velt-comments-sidebar>
  

  2. Add Custom Filters:

  Copy

  Ask AI

  const filterConfig = {
    location: {
      name: 'Pages',
      enable: true,
      multiSelection: true,
      enableGrouping: true,
      placeholder: 'Search pages',
    },
    // ... other default 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',
        },
      ]
    },
    anyField: { // Custom Filter 2
      name: 'Any Field',
      enable: true,
      multiSelection: false,
      enableGrouping: false,
      placeholder: 'Search any field',
      id: 'anyField',
      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',
        },
      ]
    },
  };
  
  const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
  commentsSidebar?.setAttribute("filter-config", JSON.stringify(filterConfig));
  

  See all 67 lines

  3. Add custom filters wireframe to the sidebar wireframe:

  Copy

  Ask AI

  <velt-comments-sidebar-filter-wireframe>
    <velt-comments-sidebar-filter-custom-wireframe id="deviceType"></velt-comments-sidebar-filter-custom-wireframe>
    <velt-comments-sidebar-filter-custom-wireframe id="otherCustomFilter"></velt-comments-sidebar-filter-custom-wireframe>
    <!-- ... remaining filters -->
  </velt-comments-sidebar-filter-wireframe>
  

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

  Copy

  Ask AI

  const commentElement = Velt.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();
  

  Using Props:

  Copy

  Ask AI

  <VeltComments groupMatchedComments={true} />
  

  Using API:

  Copy

  Ask AI

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

  Using Props:

  Copy

  Ask AI

  <velt-comments group-matched-comments="true"></velt-comments>
  

  Using API:

  Copy

  Ask AI

  const commentElement = Velt.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} />
  

  Copy

  Ask AI

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

  Copy

  Ask AI

  const filterConfig = {
    location: {
      name: 'Pages',
      enable: true,
      placeholder: 'Custom Location'
    },
    document: {
      name: 'Documents',
      enable: true,
      placeholder: 'Custom Document'
    }
  };
  const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
  commentsSidebar?.setAttribute("filter-config", JSON.stringify(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();
  

  Using Props:

  Copy

  Ask AI

  <VeltComments groupMultipleMatch={true} />
  

  Using API:

  Copy

  Ask AI

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

  Using Props:

  Copy

  Ask AI

  <velt-comments group-multiple-match="true"></velt-comments>
  

  Using API:

  Copy

  Ask AI

  const commentElement = Velt.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>

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>

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 = {
    get: fetchUsersFromDB,
    config: {
        resolveUsersConfig: {
            organization: false, // Disable organization user requests
            folder: false, // Disable folder user requests
            document: true // Enable document user requests
        }
    }
};

Velt.setDataProviders({
    user: userDataProvider
});

​

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

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

    Copy

    Ask AI

    <velt-comment-tool context='{"key1": "value1", "key2": "value2"}'></velt-comment-tool>
    
    <!-- Full match -->
    <velt-comment-bubble context='{"key1": "value1", "key2": "value2"}'></velt-comment-bubble>
    <!-- Partial match -->
    <velt-comment-bubble context='{"key1": "value1"}' context-options='{"partialMatch": true}'></velt-comment-bubble>
    

​

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

    Using Props:

    Copy

    Ask AI

    <VeltComments filterCommentsOnDom={true} />
    

    Using API:

    Copy

    Ask AI

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

    Using Props:

    Copy

    Ask AI

    <velt-comments filter-comments-on-dom="true"></velt-comments>
    

    Using API:

    Copy

    Ask AI

    const commentElement = Velt.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} />
    

    Copy

    Ask AI

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

    Copy

    Ask AI

    <!-- You can enable this on either the tool or the panel -->
    <velt-notifications-tool settings="true"></velt-notifications-tool>
    <velt-notifications-panel settings="true"></velt-notifications-panel>
    

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

    Copy

    Ask AI

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

    Copy

    Ask AI

    const recorderElement = Velt.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'
};

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

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

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

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

const presenceElement = Velt.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} />

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

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
  }
};
const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filter-config", JSON.stringify(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' }} />

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

<velt-comment-tool target-element-id="elementId" context='{"key1": "value1"}'></velt-comment-tool>

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

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

const recorderElement = Velt.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');
  }
});

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

const recorderElement = Velt.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>