Changelog

​

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

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

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

    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>

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

const client = await initVelt('YOUR_API_KEY', {
   apiProxyDomain: 'https://api.yourdomain.com'
 });

​

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

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

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

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

<VeltPresence offlineInactivityTime={600000} />

<velt-presence offline-inactivity-time="600000"></velt-presence>

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

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

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

  Using Hooks:

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

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

  const liveStateSyncElement = Velt.getLiveStateSyncElement();
  // 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

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

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

  const recorderelement = Velt.getRecorderElement();
  recorderelement.on('recordingEditDone').subscribe((event) => {
      console.log('recording edit done:' , event);
  });

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

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

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

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

<VeltCommentsSidebar systemFiltersOperator='or' />

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

<velt-comments-sidebar system-filters-operator="or"></velt-comments-sidebar>

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

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

<VeltComments commentToNearestAllowedElement={true} />

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

<velt-comments comment-to-nearest-allowed-element="true"></velt-comments>

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

<VeltComments draftMode={false} />

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

<velt-comments draft-mode="false"></velt-comments>

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

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

<VeltPresence shadowDom={false} />

<VeltPresence shadowDom={false} />

<velt-presence shadow-dom="false"></velt-presence>

​

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

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

<velt-recorder-notes play-video-in-full-screen="true"></velt-recorder-notes>
<velt-recorder-control-panel play-video-in-full-screen="true"></velt-recorder-control-panel>
<velt-recorder-player play-video-in-full-screen="true"></velt-recorder-player>

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

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

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

  <velt-single-editor-mode-panel shadow-dom="false" dark-mode="true" variant="custom-ui"></velt-single-editor-mode-panel>

​

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

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

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

​

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

<VeltPresence locationId={"YOUR_LOCATION_ID"} />

<velt-presence location-id="YOUR_LOCATION_ID"></velt-presence>

​

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.

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

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

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

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

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

<velt-recorder-control-panel auto-open-video-editor="true" settings-embedded="true"></velt-recorder-control-panel>

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

<VeltRecorderControlPanelWireframe.FloatingMode.Screen />

<VeltRecorderControlPanelWireframe.FloatingMode.Screen />

<velt-recorder-control-panel-screen-wireframe></velt-recorder-control-panel-screen-wireframe>

​

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

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

<!-- Apply this change globally to all types of comments -->
<velt-comments full-expanded="true"></velt-comments>

<!-- Apply this change only in comments sidebar -->
<velt-comments-sidebar full-expanded="true"></velt-comments-sidebar>

<!-- Apply this change only in inline comments section -->
<velt-inline-comments-section full-expanded="true"></velt-inline-comments-section>

<!-- Apply this change only in the standalone comment thread -->
<velt-comment-thread full-expanded="true"></velt-comment-thread>

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

const recordings = useRecordings(); 

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

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

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

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

const recorderElement = Velt.getRecorderElement();

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

recorderElement.on('recordingDone').subscribe((data) => {
    console.log('recordingDone:' , 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);
});

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

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

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

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

• [Recorder]: Added ability to enable/disable video editor via props on Velt Recorder Player and Velt Recorder Control Panel components. You could use any of these.

<VeltRecorderPlayer videoEditor={true}  />
 <VeltRecorderControlPanel videoEditor={true}/>

<VeltRecorderPlayer videoEditor={true}  />
 <VeltRecorderControlPanel videoEditor={true}/>

<velt-recorder-player video-editor="true"></velt-recorder-player>
 <velt-recorder-control-panel video-editor="true"></velt-recorder-control-panel>

• [Recorder]: Added recordingCountdown and recordingTranscription props on Velt Recorder Notes and Velt Recorder Control Panel components.

<VeltRecorderNotes recordingTranscription={false} recordingCountdown={false} />
 <VeltRecorderControlPanel recordingTranscription={false} recordingCountdown={false} />

<VeltRecorderNotes recordingTranscription={false} recordingCountdown={false} />
 <VeltRecorderControlPanel recordingTranscription={false} recordingCountdown={false} />

<velt-recorder-notes recording-countdown="false" recording-transcription="false"></velt-recorder-notes>
 <velt-recorder-control-panel recording-countdown="false" recording-transcription="false"></velt-recorder-control-panel>

• [Recorder]: Added video editor wireframes.

​

Improvements

• [Core]: Improved types for data resolvers.
• [Recorder]: Removed drag functionality from recording control panel and player.
• [Recorder]: If a null value is set for recorder Id prop in Velt Recorder Player component, a warning will be thrown.

​

Bug Fixes

• [Comments]: Added a check to prevent an error in @mentions dropdown if the user group has no users and the expandMentionGroups config is set to true.

​

New Features

• [Comments]: Added support for new filters in fetchCommentAnnotations method:

  • resolvedBy: string, Filter comments by user who resolved the comment
  • userIds: string[], Filter comments by comment annotation author
  • mentionedUserIds: string[], Filter comments if the provided users are tagged in the comment

• [Contacts]: Added API and Hook to get the list of users added to organization, document, user groups or the ones overwritten using the updateContactList API.

export interface UserGroup {
    groupId!: string;
    groupName!: string;
    users?: User[];
}

export interface GetContactListResponse {
    organizationUsers?: User[];
    folderUsers?: User[];
    documentUsers?: User[];
    userGroups?: UserGroup[];
    updatedContactList?: User[];
}


// React Hook
const contactList = useContactList();
console.log(contactList); // initial value will be null

// API method
const contactElement = client.getContactElement();
contactElement.getContactList().subscribe((response) => {
  console.log(response); // initial value will be null
});

export interface UserGroup {
    groupId!: string;
    groupName!: string;
    users?: User[];
}

export interface GetContactListResponse {
    organizationUsers?: User[];
    folderUsers?: User[];
    documentUsers?: User[];
    userGroups?: UserGroup[];
    updatedContactList?: User[];
}


// React Hook
const contactList = useContactList();
console.log(contactList); // initial value will be null

// API method
const contactElement = client.getContactElement();
contactElement.getContactList().subscribe((response) => {
  console.log(response); // initial value will be null
});

export interface UserGroup {
    groupId!: string;
    groupName!: string;
    users?: User[];
}

export interface GetContactListResponse {
    organizationUsers?: User[];
    folderUsers?: User[];
    documentUsers?: User[];
    userGroups?: UserGroup[];
    updatedContactList?: User[];
}

// API method
const contactElement = Velt.getContactElement();
contactElement.getContactList().subscribe((response) => {
  console.log(response); // initial value will be null
});

​

New Features

• [Comments]: Added a config to show expanded user groups inside the @mentions dropdown menu.
  • Added new wireframes to customize the display of user groups.
  • Here are some props to control the display of user groups:
    • expandMentionGroups: Whether to expand the user groups and show individual users inside the groups in the @mentions dropdown menu.
    • showMentionGroupsFirst: Whether to show the user groups in the @mentions dropdown menu before the non-group users.
    • showMentionGroupsOnly: Whether to show only the user groups in the @mentions dropdown menu and not the non-group users.

<VeltComments 
      expandMentionGroups={true} 
      showMentionGroupsFirst={false} 
      showMentionGroupsOnly={false} 
/>

<VeltComments 
      expandMentionGroups={true} 
      showMentionGroupsFirst={false} 
      showMentionGroupsOnly={false} 
/>

<velt-comments 
     expand-mention-groups="true" 
     show-mention-groups-first="false"
     show-mention-groups-only="true"
></velt-comments>

• [Comments Sidebar]: Added two new default system filters and their wireframes to the sidebar:

  • Tagged: Filter comments by specifying the user who was tagged in the comment. (Wireframe)
  • Assigned: Filter comments by specifying the user who was assigned to the comment. (Wireframe)

  class CommentSidebarFilterConfig {
      // ... existing properties ...
      tagged?: FilterTypeConfig;
      assigned?: FilterTypeConfig;
      // ... existing properties ...
  }

• [Comments Sidebar]: Added another UI pattern for filters options: searchable dropdown with checklist. (Example Wireframe)

<VeltCommentsSidebar filterOptionLayout="dropdown | checkbox"/>

<VeltCommentsSidebar filterOptionLayout="dropdown | checkbox"/>

<velt-comments-sidebar filter-option-layout="dropdown | checkbox"></velt-comments-sidebar>

• [Comments Sidebar]: Added a reset filter button. (Wireframe)
• [Comments Sidebar]: Added prop to disable count calculation for sidebar filter options.

<VeltCommentsSidebar filterCount={false}/>

<VeltCommentsSidebar filterCount={false}/>

<velt-comments-sidebar filter-count="false"></velt-comments-sidebar>

​

Improvements

• [Comments]: Updated getCommentAnnotations() method to now query and subscribe to comments data even if its not the currently set document.
• [Comments]: Improved comment dialog positioning on text comments when the text is at the bottom edge of the page.
• [Notifications]: Added support in getNotificationsData() for retrieving custom notifications created with notifyAll: false.
• [REST API]: Improved the performance of GDPR Delete API and made it 90%+ faster and more efficient.

​

Bug Fixes

• [Comments]: Fixed an issue with SlateJS comments where comment was not being added when the text was selected from right to left.

​

Improvements

• [Recorder]: Optimized the video recording performance: 50% smaller files with 90% faster uploads!

​

Improvements

• [Core]: Upgraded several dependency packages to new versions.

​

Improvements

• [REST API]: Added support to get all user data for GDPR requests. Learn more.

​

Improvements

• [Localization]: Added additional null checks for provided localization strings.
• [REST API]: Added support for special characters (_, -) while creating custom notifications.

​

New Features

• [Localization]: Added support for localization for all static strings visible in the SDK Components.
  • You can get the complete list of strings that can be localized here.

// Provide the localization object for the languages you want to support.
client.setTranslations({
  'en': {
    'All comments': 'All comments',
  },
  'fr': {
    'All comments': 'Tous les commentaires',
  },
  // Add more languages as needed.
});

// Set one of the languages you've provided the translations for.
client.setLanguage('en');

// Provide the localization object for the languages you want to support.
client.setTranslations({
  'en': {
    'All comments': 'All comments',
  },
  'fr': {
    'All comments': 'Tous les commentaires',
  },
  // Add more languages as needed.
});

// Set one of the languages you've provided the translations for.
client.setLanguage('en');

// Provide the localization object for the languages you want to support.
Velt.setTranslations({
  'en': {
    'All comments': 'All comments',
  },
  'fr': {
    'All comments': 'Tous les commentaires',
  },
  // Add more languages as needed.
});

// Set one of the languages you've provided the translations for.
Velt.setLanguage('en');

• [Comments]: Added support for .txt file attachments in Comments.

​

New Features

• [Comments, Notifications]: Added a first-party extension for SlateJS to allow comments and notifications on text content.

​

Bug Fixes

• [UI Customization]: Fixed an issue where empty wireframes for repeated components were not being rendered in some scenarios.

​

Improvements

• [Comments]: Changed default value of pin-highlighter to false for better initial experience.
• [REST API]: Added deleteAll parameter to /v1/organizations/usergroups/users/delete remove all users from a group.
• [REST API]: Added metadata field on the returned comment annotation objects. It will contain documentId, organizationId, folderId, etc.

​

Improvements

• [Recorder]: Improved the video editor to be smoother and enabled “select and delete” feature.
• [Recorder]: Added support for audio waveform visualization in video recordings.
• [Recorder]: Reduced the size of the video recordings by 50%.

​

New Features

• [Reactions]: Added support for self hosting reactions data.

​

Improvements

• [Core]: Improved signature of User Resolver (used for self hosting user PII) for better consistency with backward compatibility.
• [Core]: Extended data resolvers with an option to configure retries and optimized operation order to prioritize client-side execution. Learn more here.
• [REST API]: Added support for updating users in existing comment annotations via REST APIs. Learn more here.

​

Improvements

• [Core]: Added support for automatic folder creation from the frontend when folders don’t exist. New documents without existing data are now automatically added to the currently set folder.
• [REST API]: Added support for user mentions via REST APIs. Learn more here.

​

Bug Fixes

• [Comments]: Fixed an issue where deleting inline comments in multi-document scenarios wasn’t always updating the UI state.

​

New Features

• [Core]: Added updateLocations method to update location(s) metadata. Previously this could only be done via REST APIs.

client.updateLocations({
  organizationId: 'org1', 
  documentIds: ['doc1', 'doc2'], 
  locations: [{
    id: 'location1', 
    locationName: 'MyLocation'
  }]
})

export interface UpdateLocationsRequest<T = unknown> {
    organizationId?: string;
    documentIds?: string[];
    locations?: UpdateLocationMetadata<T>[];
}

export interface UpdateLocationMetadata<T = unknown> {
    id: string;
    [key: string]: T | string;
}

​

Improvements

• [Core]: Improved types for updateDocuments method.

client.updateDocuments({
  organizationId: 'org1', 
  documents: [{
    documentId: 'doc1', 
    documentName: 'MyDoc'
  }]
})

export interface UpdateDocumentsRequest<T = unknown> {
    organizationId?: string;
    documents?: UpdateDocumentMetadata<T>[];
}

export interface UpdateDocumentMetadata<T = unknown> {
    documentId: string;
    [key: string]: T | string;
}

• [Core]: Added support for location persistence by after debounced document updates.
• [Core]: Show the most updated location metadata in features like sidebar and notifications even if the features have stale data.
• [Core]: client.getMetadata() method now provides most updated information about organization, folders documents and locations for debugging purposes.
• [Core]: Added logs for get API methods like fetchCommentAnnotations if it’s called without an authenticated user.
• [Core]: SDK state and location are preserved after auto-relogin when browser extensions clear indexedDb during idle periods of >1hr.
• [Core]: Enhanced disableLogs method with more granular control:
  • disableLogs(): turns off only warnings
  • disableLogs({suppressAll: true}): turns off all logs
  • disableLogs({warning: false, suppressAll: true}): Keeps the warning logs but turns off all other logs

​

Improvements

• [Core]: Auto-relogin user in rare scenarios where after an hour of idle time indexedDb is cleared by browser extensions.

​

New Features

• [Comments]: Added svgAsImg configuration in comments to treat SVGs as images instead layered elements. Default is false.

<VeltComments svgAsImg={true} />

const commentElement = client.getCommentElement();
commentElement.enableSvgAsImg();
commentElement.disableSvgAsImg();

<VeltComments svgAsImg={true} />

const commentElement = client.getCommentElement();
commentElement.enableSvgAsImg();
commentElement.disableSvgAsImg();

<velt-comments svg-as-img="true"></velt-comments>

const commentElement = client.getCommentElement();
commentElement.enableSvgAsImg();
commentElement.disableSvgAsImg();

​

Improvements

• [Comments]: Added data-velt-comment-dialog-comments-priority attribute in comment dialog if a comment priority is set. This can be used to style comments differently based on their priority.
• [Notifications]: Changed min height to 300px in Notification panel.
• [Comments]: Added ability to apply filters via API before mounting the Sidebar (in embed mode).

​

Improvements

• [Comments]: Now, if both inline and popover comments are used, clicking on a comment in the inline comments section will not activate comment bubble.
• [Comments]: Added additional classes to inline comments section’s container divs to allow for more precise custom styling.
• [Core]: Added configuration options to aggressively suppress error messages especially on Safari related to index db and network errors.

client.disableLogs({suppressAll:true})

​

Bug Fixes

• [Comments]: Added missing type for placeholder field in createCustomListDataOnAnnotation in React.
• [Comments]: Fixed minor bugs with Custom Lists wireframes.

​

Improvements

• [Notifications]: Added minimum height to notification panel to prevent layout shift when there is just one notification.
• [Notifications]: Removed default styling from notifications tool when Wireframe is used.
• [Comments]: Added active state support in Tiptap comments mark tags.

​

Bug Fixes

• [Comments]: Fixed an issue with onCommentAdd event that was not triggered once the comments component was unmounted and remounted during the session.

​

New Features

• [Debugging]: Added events for unsetDocuments and unsetLocations.
• [Comments]: Added type for fetchCommentAnnotations in CommentElement for React.
• [Documents]: Added updateDocuments method to update document(s) metadata.

client.updateDocuments({
  organizationId: 'org1',
  documents: [
    {
      documentId: 'document-id',
      documentName: 'document-name'
    }, 
    {
      documentId: 'document-id-2',
      documentName: 'document-name-2'
    }
  ]
});

export interface UpdateDocumentsRequest {
    organizationId?: string;
    documents?: {documentId: string; [key: string]: any}[];
}

• [Debugging]: Added folderId property in Velt.getMetadata() response.

​

Improvements

• [Notifications]: Improved the notification tool component to prevent layout shift when notification count was updated.

​

Bug Fixes

• [Comments]: Added missing type definition for Sidebar Filter Config in React to include status property.

​

Improvements

• [Comments]: Improved type names for comment resolver.

// Data models
export interface VeltDataProvider {
    comment?: CommentAnnotationDataProvider;
    user?: UserDataProvider;
}

export interface CommentAnnotationDataProvider {
    get: (request: GetCommentResolverRequest) => Promise<Record<string, PartialCommentAnnotation>>;
    save: (request: SaveCommentResolverRequest) => Promise<void>;
    delete: (request: DeleteCommentResolverRequest) => Promise<void>;
    resolveTimeout?: number; // optional. In milliseconds. Expected timeout to get a response from your API.
}

export interface GetCommentResolverRequest {
    organizationId: string;
    commentAnnotationIds?: string[];
    documentIds?: string[];
    folderId?: string;
    allDocuments?: boolean;
}

export interface SaveCommentResolverRequest {
    commentAnnotation: { [key: string]: PartialCommentAnnotation };
}

export interface PartialComment {
    commentId: string | number;
    commentHtml?: string;
    commentText?: string;
}

export interface PartialCommentAnnotation {
    annotationId: string;
    metadata?: VeltMetadata;
    comments: {
        [commentId: string]: PartialComment;
    };
}