Changelog - Velt

4.3.0

Apr 18 2025

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.

Using Props:

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

Using API:

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

Using Props:

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

Using API:

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

Using Props:

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

Using API:

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

4.3.0-beta.7

Apr 17 2025

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.

Using Hook:

const recordings = useRecordings(); 

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

Using API:

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

Using Hook:

const recordings = useRecordings(); 

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

Using API:

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.

Using Hook:

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

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

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

Using API:

const recorderElement = useRecorderUtils();

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

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

Using Hook:

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

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

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

Using API:

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.

4.3.0-beta.6

Apr 16 2025

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.

Using Hook:

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

Using API:

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

Using Hook:

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

Using API:

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.

4.3.0-beta.5

Apr 16 2025

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

4.3.0-beta.4

Apr 14 2025

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

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

<VeltCommentsSidebar filterCount={false}/>

4.3.0-beta.3

Apr 11 2025

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.

4.3.0-beta.2

Apr 7 2025

Improvements

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

4.3.0-beta.1

Apr 7 2025

Improvements

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

4.2.1-beta.11

Apr 4 2025

Improvements

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

4.2.1-beta.11

Apr 3 2025

Improvements

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

4.2.1-beta.10

Apr 3 2025

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.

4.2.1-beta.9

Apr 2 2025

New Features

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

4.2.1-beta.8

Apr 2 2025

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.

4.2.1-beta.7

Mar 31 2025

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

4.2.1-beta.6

Mar 28 2025

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.

4.2.1-beta.5

Mar 26 2025

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.

4.2.1-beta.4

Mar 21 2025

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

4.2.1-beta.3

Mar 20 2025

Improvements

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

4.2.1-beta.2

Mar 20 2025

New Features

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

Using Props:

<VeltComments svgAsImg={true} />

Using API:

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

Using Props:

<VeltComments svgAsImg={true} />

Using API:

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

Using Props:

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

Using API:

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

4.2.1-beta.1

Mar 19 2025

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.

4.2.0

Mar 18 2025

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.

4.2.0-beta.5

Mar 13 2025

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.

4.2.0-beta.4

Mar 12 2025

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.

4.2.0-beta.3

Mar 11 2025

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

4.2.0-beta.2

Mar 7 2025

New Features

[Recorder]: Added Video Editing feature allowing users to edit recorded videos.

Using Props:

<VeltRecorderNotes videoEditor={true} />

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enableVideoEditor();
recorderElement.disableVideoEditor();

Using Props:

<VeltRecorderNotes videoEditor={true} />

Using API:

const recorderElement = client.getRecorderElement();
recorderElement.enableVideoEditor();
recorderElement.disableVideoEditor();

Using Props:

<velt-recorder-notes video-editor="true"></velt-recorder-notes>

Using API:

const recorderElement = Velt.getRecorderElement();
recorderElement.enableVideoEditor();
recorderElement.disableVideoEditor();

Improvements

[Recorder]: Improved Recorder player UX.

4.2.0-beta.1

Mar 7 2025

New Features

[Comments]: Comments Self Hosting now available. Store and retrieve comment and notification text on your own backend while using Velt’s UI components.
- Combined with existing user PII self hosting, you can now store all sensitive data on your infrastructure.
- Support for self-hosted attachments and recordings coming soon.

// Define your comment data provider
const commentDataProvider = {
  get: async (request) => {
    const result = await getDataFromYourServer(request);
    // Ensure the result is in the required format
    return result;
  },
  save: async (request) => {
    const result = await saveDataOnYourServer(request);
    return result;
  },
  delete: async (request) => {
    await deleteDataFromYourServer(request.commentAnnotationId);
  },
};

// Set the data provider
<VeltProvider
  apiKey="YOUR_API_KEY_HERE"
  dataProviders={{ comment: commentDataProvider }}>
  {/* Your app content */}
</VeltProvider>

Request Objects:

// GET Request:
{
    organizationId: string;
    commentAnnotationIds?: string[];
    documentIds?: string[];
    folderId?: string;
    allDocuments?: boolean;
}

// Save Request:
{
    commentAnnotation: { [key: string]: IStrippedCommentAnnotation };
}

// IStrippedCommentAnnotation:
{
    annotationId: string;
    metadata?: any;
    comments: {
        [commentId: string]: StrippedComment;
    };
}

// StrippedComment:
{
    commentId: string | number;
    commentHtml?: string;
    commentText?: string;
}

// Delete Request:
{
    commentAnnotationId: string;
    metadata?: any;
}

// Define your comment data provider
const commentDataProvider = {
  get: async (request) => {
    const result = await getDataFromYourServer(request);
    // Ensure the result is in the required format
    return result;
  },
  save: async (request) => {
    const result = await saveDataOnYourServer(request);
    return result;
  },
  delete: async (request) => {
    await deleteDataFromYourServer(request.commentAnnotationId);
  },
};

// Set the data provider
<VeltProvider
  apiKey="YOUR_API_KEY_HERE"
  dataProviders={{ comment: commentDataProvider }}>
  {/* Your app content */}
</VeltProvider>

Request Objects:

// GET Request:
{
    organizationId: string;
    commentAnnotationIds?: string[];
    documentIds?: string[];
    folderId?: string;
    allDocuments?: boolean;
}

// Save Request:
{
    commentAnnotation: { [key: string]: IStrippedCommentAnnotation };
}

// IStrippedCommentAnnotation:
{
    annotationId: string;
    metadata?: any;
    comments: {
        [commentId: string]: StrippedComment;
    };
}

// StrippedComment:
{
    commentId: string | number;
    commentHtml?: string;
    commentText?: string;
}

// Delete Request:
{
    commentAnnotationId: string;
    metadata?: any;
}

// Define your comment data provider
const commentDataProvider = {
  get: async (request) => {
    const result = await getDataFromYourServer(request);
    // Ensure the result is in the required format
    return result;
  },
  save: async (request) => {
    const result = await saveDataOnYourServer(request);
    return result;
  },
  delete: async (request) => {
    await deleteDataFromYourServer(request.commentAnnotationId);
  },
};

// Set the data provider
client.setDataProviders({
  comment: commentDataProvider,
});

Request Objects:

// GET Request:
{
    organizationId: string;
    commentAnnotationIds?: string[];
    documentIds?: string[];
    folderId?: string;
    allDocuments?: boolean;
}

// Save Request:
{
    commentAnnotation: { [key: string]: IStrippedCommentAnnotation };
}

// IStrippedCommentAnnotation:
{
    annotationId: string;
    metadata?: any;
    comments: {
        [commentId: string]: StrippedComment;
    };
}

// StrippedComment:
{
    commentId: string | number;
    commentHtml?: string;
    commentText?: string;
}

// Delete Request:
{
    commentAnnotationId: string;
    metadata?: any;
}

4.1.1

Mar 5 2025

Improvements

[Comments]: Added mobile support for inline comment section, improving the user experience on smaller screens.
[Debugging]: Now client.getMetadata() method only returns the currently set documents instead of all documents used in the current session.

4.1.0

Mar 4 2025

New Features

[Comments]: Tiptap comments marks are now persisted automatically by default. This simplifies implementation as you no longer need to store marks yourself or modify your editor’s content handling.
[Comments]: Added Sorting Dropdown Wireframe support for inline comments section. Learn more

Improvements

[Comments]: Made the freestyle comment pins adapt to DOM elements with complex layouts.
[Comments]: Improved loading skeleton in inline comments section to match comment card width and adapt responsively to smaller widths.
[Comments]: Improved the alignment of the assign to dropdown in inline comments section when the width of the section is large.
[Comments]: Added dark mode styling for the new sorting dropdown in inline comments section.

Bug Fixes

[Comments]: Fixed an issue where the comment bubble was not keeping the dialog open when a fresh annotation was added.

4.0.0-beta.27

Feb 28 2025

New Features

[Comments]: Added a default sorting UI component in the inline comments section. This was one of the most requested features.
[Comments]: Added config to prevent deleting the entire thread when the first comment is deleted.

<VeltComments deleteThreadWithFirstComment={false} />

Improvements

[Comments]: Improved the overall UI/UX of the inline comments section based on user feedback, including: loading state, inner padding, layout shift etc.

Bug Fixes

[Comments]: Fixed an issue where inline comments sorting was not working when the prop was changed dynamically.
[Comments]: Fixed issue in single-threaded mode where delete thread label now correctly appears on the root comment regardless of sorting order.

4.0.0-beta.26

Feb 25 2025

New Features

[Core]: Added ability to enable or disable Velt’s logs/warnings in Browser Console.

client.enableLogs();
client.disableLogs();

Improvements

[Core]: Added performance improvements for scenarios where the user accesses and switches between large number of documents at a high frequency.

4.0.0-beta.25

Feb 20 2025

Improvements

[Recording]: Improved TranscriptionDoneEvent object.
[Comments]: Fixed useSetDocuments hook to properly support setDocuments method in dependency array in React useEffect:

const { setDocuments } = useSetDocuments();
useEffect(() => {
    setDocuments(yourDocuments);
}, [setDocuments]);

[Comments]: Made small UI improvements:
- Removed 0 from Velt bubble count.
- Fixed Velt bubble wireframe layout shift issue.

Bug Fixes

[Comments]: Fixed small UI issues:
- Fixed an issue where draft comments were showing up when reaction was updated.
- Fixed an issue where selecting a comment in inline comment section was also opening the Velt Comment bubble.
- Fixed an issue where focused thread mode scroll was not working as expected.

4.0.0-beta.24

Feb 17 2025

Bug Fixes

[Comments]: Fixed an issue where the SeenBy dropdown wasn’t opening on the first click.
[Comments]: Fixed an issue where clicking @mention button was not opening the mention dropdown. Typing @ was working as expected.
[Comments]: Fixed a re-rendering issue when adding reactions.

4.0.0-beta.23

Feb 15 2025

New Features

[Core]: Added getUser method to get the current user.

const user = client.getUser();
console.log(user);

[UI Customization]: Simplified how UI can be customized using wireframes.
- Conditional Component Rendering: Conditionally render any component directly without needing to specify parent or sibling wireframes.
- Conditional CSS Classes: Classes can now be conditionally applied to components based on the data in the component.
- Wireframe CSS Classes Support: CSS Classes added to wireframes components are automatically applied to the related rendered components.

Conditional Component Rendering:

// Old
<VeltCommentDialogWireframe.Header>
  <VeltIf condition="{annotation.status.id} === 'OPEN'" >
      <VeltCommentDialogWireframe.Status />
  </VeltIf>
</VeltCommentDialogWireframe.Header>


// New
<VeltCommentDialogWireframe.Status veltIf="{annotation.status.id} === 'OPEN'" />

Conditional CSS Classes:

<VeltCommentDialogWireframe.ThreadCard.Message veltClass="'color-yellow': {annotation.status.id} === 'in_progress'" />

Wireframe CSS Classes Support:

<VeltCommentDialogWireframe.ThreadCard.Message className="color-yellow" />

Conditional Component Rendering:

// Old
<VeltCommentDialogWireframe.Header>
  <VeltIf condition="{annotation.status.id} === 'OPEN'" >
      <VeltCommentDialogWireframe.Status />
  </VeltIf>
</VeltCommentDialogWireframe.Header>


// New
<VeltCommentDialogWireframe.Status veltIf="{annotation.status.id} === 'OPEN'" />

Conditional CSS Classes:

<VeltCommentDialogWireframe.ThreadCard.Message veltClass="'color-yellow': {annotation.status.id} === 'in_progress'" />

Wireframe CSS Classes Support:

<VeltCommentDialogWireframe.ThreadCard.Message className="color-yellow" />

Conditional Component Rendering:

<!-- Old -->
<velt-comment-dialog-header-wireframe>
  <velt-if condition="{annotation.status.id} === 'OPEN'" >
      <velt-comment-dialog-status-wireframe></velt-comment-dialog-status-wireframe>
  </velt-if>
</velt-comment-dialog-header-wireframe>


<!-- New -->
<velt-comment-dialog-status-wireframe velt-if="{annotation.status.id} === 'OPEN'" >
</velt-comment-dialog-status-wireframe>

Conditional CSS Classes:

<velt-comment-dialog-thread-card-message-wireframe velt-class="'color-yellow': {annotation.status.id} === 'in_progress'" > </velt-comment-dialog-thread-card-message-wireframe>

Wireframe CSS Classes Support:

<velt-comment-dialog-thread-card-message-wireframe class="color-yellow"> </velt-comment-dialog-thread-card-message-wireframe>

[UI Customization]: Set and render custom state data into Velt components. This data is available in all Velt Wireframes, Velt If and Velt Data components.

// Setter
client.setUiState({
    dashboardName: 'MRR Growth',
    anyKey: 'anyValue'
});

// Getter
client.getUiState().subscribe((data) => {
    console.log('UI State: ', data);
});

// Use it in Velt Wireframe
<VeltCommentDialogWireframe.Header>
    <VeltData field={dashboardName} />
</VeltCommentDialogWireframe.Header>

// Setter
client.setUiState({
    dashboardName: 'MRR Growth',
    anyKey: 'anyValue'
});

// Getter
client.getUiState().subscribe((data) => {
    console.log('UI State: ', data);
});

// Use it in Velt Wireframe
<VeltCommentDialogWireframe.Header>
    <VeltData field={dashboardName} />
</VeltCommentDialogWireframe.Header>

// Setter
Velt.setUiState({
    dashboardName: 'MRR Growth',
    anyKey: 'anyValue'
});

// Getter
Velt.getUiState().subscribe((data) => {
    console.log('UI State: ', data);
});

// Use it in Velt Wireframe
<velt-wireframe style="display:none;">
    <velt-comment-dialog-wireframe.header>
        <velt-data field={dashboardName}></velt-data>
    </velt-comment-dialog-wireframe.header>
</velt-wireframe>

[Comments]: Added support for custom autocomplete search for contact list or custom lists. You should use this if you have a large dataset that you want to plug into the autocomplete dropdown, and search directly your own data source.

Enable the feature:

// Enable via props
<VeltComments customAutocompleteSearch={true} />


// Or, enable via Comment Element API
const commentElement = client.getCommentElement();
commentElement.enableCustomAutocompleteSearch();
commentElement.disableCustomAutocompleteSearch();

Set initial list:

// For @mentions feature
contactElement.updateContactList(users);

// For custom list feature
commentElement.createCustomListDataOnComment({
    hotkey: "#",
    type: "custom",
    data: customListData,
});

Handle search event:

commentElement.on('autocompleteSearch').subscribe(async (inputData) => {
    const searchText = inputData.searchText;

    // For @mentions feature
    if (inputData.type === 'contact') {
        const filteredUsersData = await __your_api_call__(searchText);
        contactElement.updateContactList(filteredUsersData, { merge: false });
    }

    // For custom list feature
    if (inputData.type === 'custom') {
        const filteredListData = await __your_api_call__(searchText, autocompleteData);
        commentElement.createCustomListDataOnComment({
            hotkey: "#",
            type: "custom",
            data: filteredListData,
        });
    }
});

interface AutocompleteSearchEvent {
    event: KeyboardEvent | InputEvent | Event;
    searchText: string;
    type?: 'contact' | 'custom';
    metadata?: VeltEventMetadata;
}

Enable the feature:

// Enable via props
<VeltComments customAutocompleteSearch={true} />


// Or, enable via Comment Element API
const commentElement = client.getCommentElement();
commentElement.enableCustomAutocompleteSearch();
commentElement.disableCustomAutocompleteSearch();

Set initial list:

// For @mentions feature
contactElement.updateContactList(users);

// For custom list feature
commentElement.createCustomListDataOnComment({
    hotkey: "#",
    type: "custom",
    data: customListData,
});

Handle search event:

commentElement.on('autocompleteSearch').subscribe(async (inputData) => {
    const searchText = inputData.searchText;

    // For @mentions feature
    if (inputData.type === 'contact') {
        const filteredUsersData = await __your_api_call__(searchText);
        contactElement.updateContactList(filteredUsersData, { merge: false });
    }

    // For custom list feature
    if (inputData.type === 'custom') {
        const filteredListData = await __your_api_call__(searchText, autocompleteData);
        commentElement.createCustomListDataOnComment({
            hotkey: "#",
            type: "custom",
            data: filteredListData,
        });
    }
});

interface AutocompleteSearchEvent {
    event: KeyboardEvent | InputEvent | Event;
    searchText: string;
    type?: 'contact' | 'custom';
    metadata?: VeltEventMetadata;
}

Enable the feature:

// Enable via attribute
<velt-comments custom-autocomplete-search="true"></velt-comments>

// Or, enable via Comment Element API
const commentElement = Velt.getCommentElement();
commentElement.enableCustomAutocompleteSearch();
commentElement.disableCustomAutocompleteSearch();

Set initial list:

// For @mentions feature
contactElement.updateContactList(users);

// For custom list feature
commentElement.createCustomListDataOnComment({
    hotkey: "#",
    type: "custom",
    data: customListData,
});

Handle search event:

commentElement.on('autocompleteSearch').subscribe(async (inputData) => {
    const searchText = inputData.searchText;

    // For @mentions feature
    if (inputData.type === 'contact') {
        const filteredUsersData = await __your_api_call__(searchText);
        contactElement.updateContactList(filteredUsersData, { merge: false });
    }

    // For custom list feature
    if (inputData.type === 'custom') {
        const filteredListData = await __your_api_call__(searchText, autocompleteData);
        commentElement.createCustomListDataOnComment({
            hotkey: "#",
            type: "custom",
            data: filteredListData,
        });
    }
});

interface AutocompleteSearchEvent {
    event: KeyboardEvent | InputEvent | Event;
    searchText: string;
    type?: 'contact' | 'custom';
    metadata?: VeltEventMetadata;
}

[Comments]: Added composerClicked event to detect when comment composer is clicked.

const composerClickEvent = useCommentEventCallback('composerClicked');

const composerClickEvent = useCommentEventCallback('composerClicked');

const commentElement = Velt.getCommentElement();
commentElement.on('composerClicked').subscribe((data) => {
    console.log('Composer clicked', data);
});

Bug Fixes

[Comments]: Fixed assign comment input double border CSS issue.

4.0.0-beta.22

Feb 13 2025

New Features

[Folders]: Added an API to fetch folder metadata and subfolders by organizationId, folderId with pagination.

// Get all folders for a specific organization
client.fetchFolders({
  organizationId: 'org1'
});

// Get a specific folder's metadata with its immediate subfolders
client.fetchFolders({
  organizationId: 'org1',
  folderId: 'folder1'
});

interface FetchFoldersRequest {
  organizationId?: string;
  folderId?: string;
}

interface FetchFoldersResponse {
  data: Record<string, FolderMetadata> | null;
  nextPageToken: string;
}

// Get all folders for a specific organization
client.fetchFolders({
  organizationId: 'org1'
});

// Get a specific folder's metadata with its immediate subfolders
client.fetchFolders({
  organizationId: 'org1',
  folderId: 'folder1'
});

interface FetchFoldersRequest {
  organizationId?: string;
  folderId?: string;
}

interface FetchFoldersResponse {
  data: Record<string, FolderMetadata> | null;
  nextPageToken: string;
}

// Get all folders for a specific organization
Velt.fetchFolders({
  organizationId: 'org1'
});

// Get a specific folder's metadata with its immediate subfolders
Velt.fetchFolders({
  organizationId: 'org1',
  folderId: 'folder1'
});

interface FetchFoldersRequest {
  organizationId?: string;
  folderId?: string;
}

interface FetchFoldersResponse {
  data: Record<string, FolderMetadata> | null;
  nextPageToken: string;
}

[Documents]: Added an API to fetch document metadata by organizationId, folderId or documentIds with pagination.

// Get all documents for a specific folder
client.fetchDocuments({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get specific documents by IDs
client.fetchDocuments({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchDocumentsRequest {
  organizationId?: string;
  documentIds?: string[];
  folderId?: string;
  allDocuments?: boolean;
}

interface FetchDocumentsResponse {
  data: Record<string, DocumentMetadata> | null;
  nextPageToken: string;
}

// Get all documents for a specific folder
client.fetchDocuments({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get specific documents by IDs
client.fetchDocuments({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchDocumentsRequest {
  organizationId?: string;
  documentIds?: string[];
  folderId?: string;
  allDocuments?: boolean;
}

interface FetchDocumentsResponse {
  data: Record<string, DocumentMetadata> | null;
  nextPageToken: string;
}

// Get all documents for a specific folder
Velt.fetchDocuments({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get specific documents by IDs
Velt.fetchDocuments({
docElement.fetchDocuments({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchDocumentsRequest {
  organizationId?: string;
  documentIds?: string[];
  folderId?: string;
  allDocuments?: boolean;
}

interface FetchDocumentsResponse {
  data: Record<string, DocumentMetadata> | null;
  nextPageToken: string;
}

[Comments]: Added a new API to fetch comment annotations by organizationId, folderId or documentIds with pagination and filtering options. This is different from the existing subscription API which susbcribes to realtime changes to the comments data.

// Get all annotations for a specific folder
const commentElement = client.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get annotations for specific documents
const commentElement = client.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchCommentAnnotationsRequest {
  createdAfter?: number;
  createdBefore?: number;
  updatedAfter?: number;
  updatedBefore?: number;
  statusIds?: string[];
  order?: 'asc' | 'desc';
  pageToken?: string;
  allDocuments?: boolean;
  pageSize?: number;
  organizationId?: string;
  locationId?: string;
  documentIds?: string[];
  folderId?: string;
}

interface FetchCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]> | null;
  nextPageToken: string;
}

// Get all annotations for a specific folder
const commentElement = client.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get annotations for specific documents
const commentElement = client.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchCommentAnnotationsRequest {
  createdAfter?: number;
  createdBefore?: number;
  updatedAfter?: number;
  updatedBefore?: number;
  statusIds?: string[];
  order?: 'asc' | 'desc';
  pageToken?: string;
  allDocuments?: boolean;
  pageSize?: number;
  organizationId?: string;
  locationId?: string;
  documentIds?: string[];
  folderId?: string;
}

interface FetchCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]> | null;
  nextPageToken: string;
}

// Get all annotations for a specific folder
const commentElement = Velt.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1', 
  folderId: 'folder1',
  allDocuments: true
});

// Get annotations for specific documents
const commentElement = Velt.getCommentElement();
commentElement.fetchCommentAnnotations({
  organizationId: 'org1',
  documentIds: ['doc1', 'doc2']
});

interface FetchCommentAnnotationsRequest {
  createdAfter?: number;
  createdBefore?: number;
  updatedAfter?: number;
  updatedBefore?: number;
  statusIds?: string[];
  order?: 'asc' | 'desc';
  pageToken?: string;
  allDocuments?: boolean;
  pageSize?: number;
  organizationId?: string;
  locationId?: string;
  documentIds?: string[];
  folderId?: string;
}

interface FetchCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]> | null;
  nextPageToken: string;
}

4.0.0-beta.21

Feb 11 2025

Features

[Security] You can now self-host your user PII metadata.
- Send only userId instead of full user object and a client side data provider.
- Components will automatically fetch the user details from the provider and hydrate the user object.
- The metadata will not be sent to Velt servers.

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

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

<VeltProvider 
    apiKey='YOUR_API_KEY'
    userDataProvider={{
        getUsers: fetchUsersFromDB
    }}
>
</VeltProvider>

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

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

<VeltProvider 
    apiKey='YOUR_API_KEY'
    userDataProvider={{
        getUsers: fetchUsersFromDB
    }}
>
</VeltProvider>

Velt.setUserDataProvider({
    getUsers: fetchUsersFromDB
});

function fetchUsersFromDB(userIds) {
    // Fetch users from your DB
    const usersData = getUsersFromYourDB(userIds);
    return formatUsersToRecord(usersData);
}

function 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;
    }, {});
}

Improvements

[Core]: Added core performance improvements throughout the SDK.
[Recorder]: Added new API methods to get the recorded data.

const recorderElement = client.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

const recorderElement = client.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

const recorderElement = Velt.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

[Recorder] Added missing props to disable shadow DOM for recorder components in React SDK.

<VeltRecorderNotes shadowDom={false} />
<VeltRecorderTool shadowDom={false} />
<VeltRecorderPlayer shadowDom={false} />

4.0.0-beta.20

Feb 10 2025

Bug Fixes

[Recording]: Fixed Safari recording compatibility issues across some macOS versions.

4.0.0-beta.19

Jan 31 2025

Features

[Core]: Added support for React v19 in sdk-react library.

Improvements

[Authentication]: Made organizationId mandatory in identify method.
[New Accounts]: New accounts or API keys will have advanced queries turned on by default.

Bug Fixes

[Notifications]: Fixed an issue where notifications were not working when organizationId was not set.
[REST API]: Fixed an issue where the REST API for adding or updating organizations and documents did not allow custom fields in metadata.

4.0.0-beta.18

Jan 30 2025

Improvements

[Comments]: Improved comments performance with optimistic local-first reads and writes.
[Notifications]: Added documentMetadata object in the properties that are sent to SendGrid for emails.

Bug Fixes

[Comments]: Fixed an issue where custom metadata added to a comment using addContext was not sent to the first notification event (newlyAdded).

4.0.0-beta.17

Jan 29 2025

Features

[Comments]: Added a transcriptionDone event callback when recording transcription is done.

Using Hooks:

const onTranscriptionDone = useRecorderEventCallback('transcriptionDone');

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

Using API:

const recorderElement = client.getRecorderElement();

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

Using Hooks:

const onTranscriptionDone = useRecorderEventCallback('transcriptionDone');

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

Using API:

const recorderElement = client.getRecorderElement();

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

Using API:

const recorderElement = Velt.getRecorderElement();

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

Improvements

[Comments]: Disabled @here in the contacts dropdown by default. You can turn it on using this.

Bug Fixes

[Comments]: Removed virtual scroll from autocomplete panel and removed fixed height. This was causing weird UI issues. We are rewriting the autocomplete panel with virtual scroll.
[Comments]: Fixed an issue where horizontal scroll was visible on sidebar in some scenarios.
[Comments]: Fixed an issue where the shadowDom prop was not passed down to page mode composer in comment sidebar.
[Comments]: Fixed an issue where sortData prop was not working in comments sidebar.

4.0.0-beta.16

Jan 28 2025

Bug Fixes

[Comments]: Fixed an issue where comments was not working for fresh documents if the advanced queries option wasn’t enabled. Note this is mandatory for all versions of v4 SDK.
[Comments]: Fixed an issue where updateContactList was not working.
[Comments]: Fixed an issue where in inline comments, the resolve button was visible for all messages in a thread.

4.0.0-beta.15

Jan 24 2025

Features

[Security] You can now self-host your user PII metadata.
- Send only userId instead of full user object and a client side data provider.
- Components will automatically fetch the user details from the provider and hydrate the user object.
- The metadata will not be sent to Velt servers.

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

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

<VeltProvider 
    apiKey='YOUR_API_KEY'
    userDataProvider={{
        getUsers: fetchUsersFromDB
    }}
>
</VeltProvider>

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

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

<VeltProvider 
    apiKey='YOUR_API_KEY'
    userDataProvider={{
        getUsers: fetchUsersFromDB
    }}
>
</VeltProvider>

Velt.setUserDataProvider({
    getUsers: fetchUsersFromDB
});

function fetchUsersFromDB(userIds) {
    // Fetch users from your DB
    const usersData = getUsersFromYourDB(userIds);
    return formatUsersToRecord(usersData);
}

function 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;
    }, {});
}

Improvements

[Core]: Added core performance improvements throughout the SDK.
[Recorder]: Added new API methods to get the recorded data.

const recorderElement = client.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

const recorderElement = client.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

const recorderElement = Velt.getRecorderElement();
await recorderElement.getRecordingData({
    recorderIds: ['RECORDER_ID']
});

[Recorder] Added missing props to disable shadow DOM for recorder components in React SDK.

<VeltRecorderNotes shadowDom={false} />
<VeltRecorderTool shadowDom={false} />
<VeltRecorderPlayer shadowDom={false} />

4.0.0-beta.14

Jan 20 2025

Bug Fixes

[Recording]: Fixed Safari recording compatibility issues across some macOS versions.

4.0.0-beta.13

Jan 13 2025

Features

[Core]: Added support for React v19 in sdk-react library.

Improvements

[Authentication]: Made organizationId mandatory in identify method.
[New Accounts]: New accounts or API keys will have advanced queries turned on by default.

Bug Fixes

[Notifications]: Fixed an issue where notifications were not working when organizationId was not set.
[REST API]: Fixed an issue where the REST API for adding or updating organizations and documents did not allow custom fields in metadata.

4.0.0-beta.12

Jan 10 2025

Improvements

[Comments]: Improved comments performance with optimistic local-first reads and writes.
[Notifications]: Added documentMetadata object in the properties that are sent to SendGrid for emails.

Bug Fixes

[Comments]: Fixed an issue where custom metadata added to a comment using addContext was not sent to the first notification event (newlyAdded).

4.0.0-beta.11

Jan 6 2025

Bug Fixes

[Comments]: Fixed an issue with getCommentAnnotationsCount API when filtering by specific document IDs in the query.

4.0.0-beta.10

Dec 24 2024

Improvements

[Security]: Merged security patch in the React package

Bug Fixes

[Recording]: Fixed an issue where the floating recording player was visible for threaded recorder notes
[Comments]: Fixed an issue where the sidebar button border color was using light mode colors in dark mode

4.0.0-beta.9

Dec 19 2024

New APIs

1. setDocuments

Set multiple documents at the same time. You can specify 30 documents at a time.
The first document in the list will be considered as the root document.
For features like comments, notifications, recorder, reactions etc. you will be able to read and write to multiple documents at the same time.
For features like cursors, presence, huddle, live state sync etc. it will default to the root document.
Sidebar will automatically show data from all the documents.
Params:
- documents: Document[]
- options?: SetDocumentsRequestOptions

Using Hooks:

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
const { setDocuments } = useSetDocuments();
setDocuments(documents);

Using API:

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
client.setDocuments(documents);

Using Hooks:

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
const { setDocuments } = useSetDocuments();
setDocuments(documents);

Using API:

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
client.setDocuments(documents);

Using API:

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
Velt.setDocuments(documents);

2. getCommentAnnotations

Get all the comment annotations for all the specified documents.
You can specify 30 documents at a time.
If you don’t specify any query, it will return data from the documents specified in the setDocuments method.

Using Hooks:

const { data } = useGetCommentAnnotations(query);
// initial data value will be null while the request is in progress

Using API:

const commentElement = client.getCommentElement();
commentElement.getCommentAnnotations(query).subscribe((response) => {
  console.log(response.data);
  // initial data value will be null while the request is in progress
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]> | null; // Key: documentId, Value: CommentAnnotation[]
};

Using Hooks:

const { data } = useGetCommentAnnotations(query);
// initial data value will be null while the request is in progress

Using API:

const commentElement = client.getCommentElement();
commentElement.getCommentAnnotations(query).subscribe((response) => {
  console.log(response.data);
  // initial data value will be null while the request is in progress
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]> | null; // Key: documentId, Value: CommentAnnotation[]
};

Using API:

const commentElement = Velt.getCommentElement();
commentElement.getCommentAnnotations(query).subscribe((response) => {
  console.log(response.data);
  // initial data value will be null while the request is in progress
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsResponse {
  data: Record<string, CommentAnnotation[]>; // Key: documentId, Value: CommentAnnotation[]
};

3. getCommentAnnotationsCount

Get the total and unread comment annotations count of all the comment annotations for all the specified documents.
You can specify 30 documents at a time.
If you don’t specify any query, it will return data from the documents specified in the setDocuments method.

Using Hooks:

const { data } = useCommentAnnotationsCount(query);
// initial data value will be null while the request is in progress

Using API:

const commentElement = client.getCommentElement();
commentElement.getCommentAnnotationsCount(query).subscribe((response) => {
  console.log(response.data);
  // initial data value will be null while the request is in progress
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsCountResponse {
  data: Record<string, CommentAnnotationsCount> | null; // Key: documentId, Value: CommentAnnotationsCount
};

CommentAnnotationsCount {
  unread: number,
  total: number
}

Using Hooks:

const { data } = useCommentAnnotationsCount(query);
// initial data value will be null while the request is in progress

Using API:

const commentElement = client.getCommentElement();
commentElement.getCommentAnnotationsCount(query).subscribe((response) => {
  console.log(response.data);
  // initial data value will be null while the request is in progress
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsCountResponse {
  data: Record<string, CommentAnnotationsCount> | null; // Key: documentId, Value: CommentAnnotationsCount
};

CommentAnnotationsCount {
  unread: number,
  total: number
}

Using API:

const commentElement = Velt.getCommentElement();
commentElement.getCommentAnnotationsCount(query).subscribe((response) => {
  console.log(response.data);
});

CommentRequestQuery {
  documentIds!: string[],
  locationIds!: string[],
  statusIds!: string[]
};

GetCommentAnnotationsCountResponse {
  data: Record<string, CommentAnnotationsCount>; // Key: documentId, Value: CommentAnnotationsCount
};

CommentAnnotationsCount {
  unread: number,
  total: number
}

4. Read/Write data from multiple documents on the same page

If you want to display data (eg: comments) from multiple documents on the same page, you can add data-velt-document-id attribute to the container that contains the document.
It will be used to identify which part of the DOM belongs to which document.

<div class="document-container" data-velt-document-id="document-1">
  ...
</div>

<div class="document-container" data-velt-document-id="document-2">
  ...
</div>

<div class="document-container" data-velt-document-id="document-3">
  ...
</div>

Other updates

New Features

[Comments]: Added support for Status Filter in Comments Sidebar’s main filter menu:
- By default, the status filter is disabled in the main filter menu.
- Currently, it doesn’t support grouping.
- Added Wireframe support for this. Learn more.
- If you were using wireframes before, you will add this to your wireframes.

const filterConfig = {
  status: {
    enable: true,
    name: "Status",
    multiSelection: true,
  }
};

<VeltCommentsSidebar filterConfig={filterConfig} />

const filterConfig = {
  status: {
    enable: true,
    name: "Status",
    multiSelection: true,
  }
};

<VeltCommentsSidebar filterConfig={filterConfig} />

const filterConfig = {
  status: {
    enable: true,
    name: "Status",
    multiSelection: true,
  }
};

const commentsSidebar = document.querySelector(`velt-comments-sidebar`);
commentsSidebar?.setAttribute("filter-config",JSON.stringify(filterConfig));

Bug Fixes

[Comments]: Fixed an issue where empty state visibility was not visible when filter is applied and grouping was disabled.
[Comments]: Fixed an issue where users could click on the comment in the sidebar and navigate to comments when they shouldn’t.

Release Notes

​New Features

​New Features

​Improvements

​New Features

​Improvements

​Bug Fixes

​New Features

​New Features

​Improvements

​Bug Fixes

​Improvements

​Improvements

​Improvements

​Improvements

​New Features

​New Features

​Bug Fixes

​Improvements

​Improvements

​New Features

​Improvements

​Improvements

​Bug Fixes

​New Features

​Improvements

​Improvements

​New Features

​Improvements

​Improvements

​Bug Fixes

​Improvements

​Bug Fixes

​New Features

​Improvements

​Bug Fixes

​Improvements

​New Features

​Improvements

​New Features

​Improvements

​New Features

​Improvements

​Bug Fixes

​New Features

​Improvements

​Bug Fixes

​New Features

​Improvements

​Improvements

​Bug Fixes

​Bug Fixes

​New Features

​Bug Fixes

​New Features

​Features

​Improvements

​Bug Fixes

​Features

​Improvements

​Bug Fixes

​Improvements

​Bug Fixes

​Features

​Improvements

​Bug Fixes

​Bug Fixes

​Features

​Improvements

​Bug Fixes

​Features

​Improvements

​Bug Fixes

​Improvements

​Bug Fixes

​Bug Fixes

​Improvements

​Bug Fixes

​New APIs

​1. setDocuments

New Features

New Features

Improvements

New Features

Improvements

Bug Fixes

New Features

New Features

Improvements

Bug Fixes

Improvements

Improvements

Improvements

Improvements

New Features

New Features

Bug Fixes

Improvements

Improvements

New Features

Improvements

Improvements

Bug Fixes

New Features

Improvements

Improvements

New Features

Improvements

Improvements

Bug Fixes

Improvements

Bug Fixes

New Features

Improvements

Bug Fixes

Improvements

New Features

Improvements

New Features

Improvements

New Features

Improvements

Bug Fixes

New Features

Improvements

Bug Fixes

New Features

Improvements

Improvements

Bug Fixes

Bug Fixes

New Features

Bug Fixes

New Features

Features

Improvements

Bug Fixes

Features

Improvements

Bug Fixes

Improvements

Bug Fixes

Features

Improvements

Bug Fixes

Bug Fixes

Features

Improvements

Bug Fixes

Features

Improvements

Bug Fixes

Improvements

Bug Fixes

Bug Fixes

Improvements

Bug Fixes

New APIs

1. setDocuments

2. getCommentAnnotations