Changelog

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

• [Comments]: Added support updating users in existing comment annotations via REST APIs. Learn more here.
• [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.

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.
• [Comments]: 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();

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: GetCommentRequest) => Promise<Record<string, PartialCommentAnnotation>>;
    save: (request: SaveCommentRequest) => Promise<void>;
    delete: (request: DeleteCommentRequest) => Promise<void>;
    resolveTimeout?: number; // optional. In milliseconds. Expected timeout to get a response from your API.
}

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

export interface SaveCommentRequest {
    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;
    };
}

New Features

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

<VeltRecorderNotes videoEditor={true} />

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

Improvements

• [Recorder]: Improved Recorder player UX.

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>

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

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.

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.

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.

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.

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.

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.

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.

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


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

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

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

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

• [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 via props
<VeltComments customAutocompleteSearch={true} />


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

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

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

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

Bug Fixes

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

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

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

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

New Features

• [Folders]: Introducing Folders! Organize documents hierarchically with granular access control. Modeled after Google Drive’s folder structure.

  • Folders can contain documents and other folders.
  • Uses same permission model as Organizations and Documents.
  • APIs:
    • Frontend: Subscribe to folders and query by folderId.
    • Backend: CRUD operations for folders and access control. Learn More
    • Added folder support to existing relevant APIs.

• [Folders]: API to subscribe to a particular folder and all its documents at the same time.

const { setDocuments } = useSetDocuments();

{/* Subscribe to a folder and all its documents */}
const rootDocument = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  }
];

setDocuments(
  rootDocument,
  {
    folderId: 'folder1',
    allDocuments: true
  }
);


{/* Subscribe to a folder and some documents */}
const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];

setDocuments(
  documents,
  {
    folderId: 'folder1',
  }
);

{/* Subscribe to a folder and all its documents */}
client.setDocuments(
  rootDocument,
  {
    folderId: 'folder1',
    allDocuments: true
  }
);

{/* Subscribe to a folder and some documents */}
client.setDocuments(
  documents,
  {
    folderId: 'folder1',
  }
);

• [Locations]: API to subscribe to a particular location within a single or multiple documents. This will only fetch a filtered set of data associated with that location.

const { setDocuments } = useSetDocuments();

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

setDocuments(
  documents,
  { locationId: 'location123' }
);

client.setDocuments(
  documents,
  { locationId: 'location123' }
);

Improvements

• [Comments]: Paste image from clipboard as attachment in the comment composer.

Bug Fixes

• [Comments]: Fixed an issue where standalone comment composer was not working.
• [Comments]: Fixed an issue where line breaks were not being preserved in comments.
• [Comments]: Fixed an issue where image preview was not opening in sidebar.
• [Comments]: Fixed an issue where inline comment threads had unnecessary scroll.
• [Comments]: Fixed an issue where assign user component was not being removed after editing a comment.

Improvements

• [Core]: Added support for additional regions.

Bug Fixes

• [Core]: Fixed an issue where setting an avatar image URL would not update all the time.
• [Comments]: Fixed URL parsing issues when editing comments.

New Features

• [Core]: Added useUnsetDocuments hook to unsubscribe from all documents at once.

    useUnsetDocuments();

Bug Fixes

• [Core]: Fixed performance issues in @mention autocomplete feature.
• [Comments]: Fixed spacing around mentioned tags when editing comments.

Improvements

• [Core]: Added unsetDocuments method to unsubscribe from all documents at once.

  client.unsetDocuments();

• [Comments]: Added new props to customize inline comments section:
  • composerPosition: Position the comment composer at ‘top’ or ‘bottom’ of the section
  • sortBy: Sort comments by ‘createdAt’ or ‘lastUpdated’
  • sortOrder: Sort comments in ‘asc’ or ‘desc’ order

  <VeltInlineCommentsSection 
    composerPosition="top"
    sortBy="createdAt" 
    sortOrder="desc"
  />

• [Core]: Flushed cached data for Notifications and Comments when the User signs out.

Bug Fixes

• [Comments]: Fixed an issue where the comments data was not updated in the frontend local cache when all comments were deleted from the document using REST API.

Improvements

• [Comments]: Removed extra margin appearing around @mention chips in comment text.
• [Comments]: Improved the alignment of the inline assign dropdown menu.
• [Notifications]: Removed the people tab by default in notification panel. You can enable it using custom props.

Bug Fixes

• [Comments]: Fixed an issue where delete confirmation dialog was appearing behind the sidebar.
• [Comments]: Fixed an issue where inline comments would disappear from the inline section when comment was clicked in the sidebar.
• [UI]: Fixed dark mode styling issues in autocomplete tool and copy link button.
• [Notifications]: Fixed an issue where loading skeleton was visible in notifications “For You” tab when no document was set.

Improvements

• [REST API]: Added notificationId parameter to Add Notifications REST API so you can have more control on the ID being set and prevent duplicate notifications.
• [REST API]: Added notifyAll parameter to Add Notifications REST API to target notifications to specific users. If its set to false, the notification will be sent to only the users specified in the request.

Bug Fixes

• [UI Customization]: Fixed an issue where Velt Button was not returning context data in the callback.
• [Comments]: Fixed an issue where getCommentAnnotationsCount and getCommentAnnotations APIs were first returning empty data before returning the actual data.

Known Issues

• [UI Customization]: Velt Button component is missing context data in the callback.

Improvements

• [Comments]: Added loading skeleton in inline comments section.
• [Performance]: Improved SDK performance for apps with complex UI.

Bug Fixes

• [Comments]: Fixed multiple documents subscription permission issue. It should now subscribe to 30 documents at a time.
• [Comments]: Fixed an issue where selectCommentByAnnotationId API was not working when triggered after a comment was clicked in the sidebar.
• [UI Customization]: Fixed an issue where Velt Button was not triggering callback when type was set to button.
• [UI Customization]: Fixed an issue where Velt Button with type single-select was incorrectly toggling when clicked again.

New Features

• [Live State]: Now you can broadcast events with any arbitrary data to any document using the new REST API.

Improvements

• [UI Customization]: Simplified how UI can be customized using wireframes. React support pending.

  • Conditional Component Rendering: conditionally show/hide any component directly without needing to specify parent or sibling wireframes.
  • Wireframe CSS Classes Support: classes added to wireframes are automatically applied to the rendered components.
  Breaking change: This only affects you if you added CSS to wireframe component selectors.

  • Wireframe components are no longer rendered within Velt components. There were a few wireframe components that were rendered within Velt components.
  • CSS targeting wireframe component selectors needs to be updated to target Velt component selectors directly.

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

• [Comments]: Improved comment dialog positioning to be more stable when near screen edges, providing a smoother user experience.

Bug Fixes

• [Comments]: Fixed an issue where custom lists were extending out of the comment dialog.

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.

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>

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

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

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

Bug Fixes

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

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.

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

Features

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

const onTranscriptionDone = useRecorderEventCallback('transcriptionDone');

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

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

Bug Fixes

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

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

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

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

const documents = [
  {
    id: 'document-1',
    metadata: {
      documentName: 'Document 1'
    }
  },
  {
    id: 'document-2',
    metadata: {
      documentName: 'Document 2'
    }
  }
];
client.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.

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

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

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.

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

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
}

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

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.