Velt SDK Changelog

​

New Features

• [Notifications]: Added ability to enable organization-level notification settings. This allows you to configure notifications once for all documents in an organization instead of per document.

  <VeltNotificationsPanel
    enableSettingsAtOrganizationLevel={true}
    settings={true}
  />
  {/* or */}
  <VeltNotificationsTool
    enableSettingsAtOrganizationLevel="true"
    settings={true}
  />

// Using API methods
const notificationElement = client.getNotificationElement();
// Enable organization-level settings
notificationElement.enableSettingsAtOrganizationLevel();

// Disable organization-level settings
notificationElement.disableSettingsAtOrganizationLevel();

<!-- Using panel or tool components -->
<velt-notifications-panel
  enable-settings-at-organization-level="true"
  settings="true">
</velt-notifications-panel>
<!-- or -->
<velt-notifications-tool
  enable-settings-at-organization-level="true"
  settings="true">
</velt-notifications-tool>

<script>
// Using API methods
const notificationElement = Velt.getNotificationElement();

// Enable organization-level settings
notificationElement.enableSettingsAtOrganizationLevel();

// Disable organization-level settings
notificationElement.disableSettingsAtOrganizationLevel();
</script>

​

Improvements

• [Comments]: Comments sidebar group-by views now display “Unassigned” for annotations without assignees and “Untagged” for annotations without tagged users.

​

Bug Fixes

• [Comments]: Fixed an issue where image attachments in comment dialog were not opening in a lightbox view.
• [Comments]: Fixed an issue where sometimes user mentions did not include the leading @ symbol in display text.
• [Comments]: Fixed an issue where the recorder control panel in comment dialog composer did not appear when a valid comment dialog ID was not present in component configuration.
• [Comments]: Fixed an issue where assignment and private comment options did not respect explicit configuration in sidebar mode.
• [Comments]: Fixed an issue where the comment dialog internal tag was changed from snippyly-comment-dialog to velt-comment-dialog-internal for correct sidebar focus and keyboard behavior.

​

Improvements

• [Comments]: Added ability to enable/disable Private Comments feature in Velt Console

​

Improvements

• [Comments]: Added batchedPerDocument mode for getCommentAnnotationsCount() that makes the query more efficient by up to 80% while maintaining per-document granularity. Very useful for UIs that need to display comment counts for 100 documents or less on the same page.

// Using hook
const commentElement = useCommentUtils();
const counts = commentElement.getCommentAnnotationsCount({
  documentIds: ['doc-1', 'doc-2', ..., 'doc-100'],
  batchedPerDocument: true
});

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
const counts = commentElement.getCommentAnnotationsCount({
  documentIds: ['doc-1', 'doc-2', ..., 'doc-100'],
  batchedPerDocument: true,
  debounceMs: 5000
});

<script>
const commentElement = Velt.getCommentElement();
const counts = commentElement.getCommentAnnotationsCount({
  documentIds: ['doc-1', 'doc-2', ..., 'doc-100'],
  batchedPerDocument: true
});

const countsWithDebounce = commentElement.getCommentAnnotationsCount({
  documentIds: ['doc-1', 'doc-2', ..., 'doc-100'],
  batchedPerDocument: true,
  debounceMs: 5000
});
</script>

{
  data: {
    "doc-1": { total: 10, unread: 2 },
    "doc-2": { total: 15, unread: 5 }
  }
}

​

Bug Fixes

• [Comments]: Fixed draft mode not working properly. Draft content is now preserved when the dialog is closed and the shake animation now works as expected.
• [Comments]: Fixed context property access in velt-data elements. Templates can now access context properties using {context.propertyName} patterns.
• [Comments]: Fixed edit mode state persisting after dialog close. Reopening the dialog now shows the normal view instead of the edit composer.
• [Comments]: Fixed text reappearing when using select-all-and-delete in edit mode composer. Users can now properly delete all text in edit mode.
• [Comments]: Fixed links in comment body not clickable. Clicking links in comment text now opens them in a new tab.
• [Comments]: Fixed paste handling. Pasting a URL over selected text creates a hyperlink, multiline text preserves line breaks, and images paste as attachments.
• [Comments]: Fixed ghost comment banners not displaying. “Comment is syncing…” messages now properly show while annotation data is loading.
• [Comments]: Fixed priority selection not working on new annotations. Users can now set priority before submitting the first comment.
• [Comments]: Fixed email detection after @ symbol. Typing @user@example.com and pressing space now creates an email mention.
• [Comments]: Fixed recording in progress flag not clearing. Dialog now properly closes on click outside after recording finishes.
• [Comments]: Fixed links and @here mentions not highlighted in comment text. URLs are now styled as clickable links and @here mentions are properly highlighted.

​

New Features

• [Comments]: Introducing Private Comments feature: Added updateVisibility() method to programmatically set comment access (public, organization, or private). Learn more

// Using hook
const commentElement = useCommentUtils();

// Set comment to organization-only
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'organization',
  organizationId: 'org-123'
});

// Set comment to private (specific users)
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'self',
  userIds: ['user-1', 'user-2']
});

// Set comment to public
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'public'
});

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'organization',
  organizationId: 'org-123'
});

<script>
const commentElement = Velt.getCommentElement();

// Set comment to organization-only
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'organization',
  organizationId: 'org-123'
});

// Set comment to private (specific users)
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'self',
  userIds: ['user-1', 'user-2']
});

// Set comment to public
commentElement.updateVisibility({
  annotationId: "annotationId",
  type: 'public'
});
</script>

​

Bug Fixes

• [Comments]: Fixed mentioned users not receiving notifications. Users @mentioned in comments now correctly receive notifications.
• [Comments]: Fixed notification action type validation. Clients only receive data for valid event types.
• [Comments]: Fixed status reset when deleting comments. Status now only resets when current status is terminal.

​

New Features

• [Comments]: Added addCommentAnnotationDraft event to dynamically set context when creating comment annotations. Triggered before addCommentAnnotation event clicks on the comment tool and the composer is rendered.

// Using hook
const addCommentAnnotationDraftEvent = useCommentEventCallback('addCommentAnnotationDraft');

useEffect(() => {
    if (addCommentAnnotationDraftEvent?.addContext) {
        addCommentAnnotationDraftEvent.addContext({
            questionId: '123',
            questionText: 'What is the capital of France?',
        });
    }
}, [addCommentAnnotationDraftEvent]);

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
commentElement.on('addCommentAnnotationDraft').subscribe((event) => {
    if (event?.addContext) {
        event.addContext({
            questionId: '123',
            questionText: 'What is the capital of France?',
        });
    }
});

<script>
const commentElement = Velt.getCommentElement();
commentElement.on('addCommentAnnotationDraft').subscribe((event) => {
    if (event?.addContext) {
        event.addContext({
            questionId: '123',
            questionText: 'What is the capital of France?',
        });
    }
});
</script>

​

Improvements

• [Comments]: Added setContextProvider method to set a global context provider for all comment annotations. Also added useSetContextProvider hook for React applications.

// Using hook
import { useCallback, useEffect } from 'react';
import { useSetContextProvider } from '@veltdev/react';

const contextProvider = useCallback((documentId, location) => {
    return {
        questionId: '123',
        questionText: 'What is the capital of France?',
    }
}, []);

const { setContextProvider } = useSetContextProvider();

useEffect(() => {
    if (setContextProvider && contextProvider) {
        setContextProvider(contextProvider);
    }
}, []);

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
commentElement.setContextProvider((documentId, location) => {
    return {
        questionId: '123',
        questionText: 'What is the capital of France?',
    }
});

<script>
const commentElement = Velt.getCommentElement();
commentElement.setContextProvider((documentId, location) => {
    return {
        questionId: '123',
        questionText: 'What is the capital of France?',
    }
});
</script>

​

Bug Fixes

• [Core]: Fixed package integrity issue in v5.0.0-beta.5.

​

Bug Fixes

• [Comments]: Fixed page mode and multi-thread annotation ID not found error. Page mode and multi-thread comments now work as expected.
• [Comments]: Fixed updateOverlayPosition function not triggering. Comment dialog now opens in the correct position.
• [Comments]: Fixed unread status issues in inline and focused thread modes. Annotations are now marked as read when opened or clicked.
• [Comments]: Fixed three-dot menu not visible in sidebar.
• [Comments]: Fixed composer not being focused when opened.
• [Comments]: Fixed comments navigating on click. Comments now only navigate when the navigation button is clicked.

​

Bug Fixes

• [Comments]: Fixed lastUpdated timestamp not being updated when changing context in comment annotation via SDK. Ensures context updates are properly synced to other users.

​

Improvements

• [Core]: Added robustness to initialization when VeltProvider was re-rendered multiple times over a slow network.

​

Bug Fixes

• [Comments]: Refactored submitComment method to fix resolver issue for velt-comment-composer. Now follows the standard comment submission flow.
• [Comments]: Fixed unread status not updating correctly in bottom sheet. This was a regression in v5.
• [Comments]: Fixed navigation button not working properly. This was a regression in v5.
• [Comments]: Fixed disable recording option not working in velt-comment-composer. This was a regression in v5.

​

New Features

• [Core]: Added globalStyles option to control whether Velt’s global CSS is loaded. Set to false to disable default styles when implementing custom theming.

// Using VeltProvider
<VeltProvider apiKey='API_KEY' config={{
    globalStyles: false
}}>
    {/* Your app content */}
</VeltProvider>

// Using API method
const client = useVeltClient();
client.initConfig('API_KEY', {
  globalStyles: false
});

<script>
Velt.initConfig('API_KEY', {
  globalStyles: false
});
</script>

• [Comments]: Added submitComment(targetElementId) method to programmatically trigger comment submission. Enables custom buttons or keyboard shortcuts for submitting comments. Learn more

<VeltCommentComposer targetElementId="composer-1" />
<VeltCommentDialogComposer targetElementId="composer-2" />

// Using hook
const commentElement = useCommentUtils();
commentElement.submitComment('composer-1');

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
commentElement.submitComment('composer-1');

<velt-comment-composer target-element-id="composer-1"></velt-comment-composer>
<velt-comment-dialog-composer target-element-id="composer-2"></velt-comment-dialog-composer>

<button onclick="submitComment('composer-1')">Send 1</button>
<button onclick="submitComment('composer-2')">Send 2</button>

<script>
  function submitComment(targetElementId) {
    const commentElement = Velt.getCommentElement();
    commentElement.submitComment(targetElementId);
  }
</script>

• [Comments]: Added placeholder prop to customize input placeholder text in comment composer. Overrides default placeholders. Learn more

<VeltCommentComposer placeholder="Share your thoughts..." />
<VeltCommentDialogComposer placeholder="Add a comment..." />

<velt-comment-composer placeholder="Share your thoughts..."></velt-comment-composer>
<velt-comment-dialog-composer placeholder="Add a comment..."></velt-comment-dialog-composer>

• [Comments]: Added composerTextChange event that fires when text changes in any comment composer. Enables features like auto-save drafts, character counters, or real-time validation. Learn more

// Using hook
const composerTextChangeEvent = useCommentEventCallback('composerTextChange');
useEffect(() => {
    if (composerTextChangeEvent) {
        console.log('Text changed:', composerTextChangeEvent.text);
    }
}, [composerTextChangeEvent]);

// Using API method
const client = useVeltClient();
const commentElement = client.getCommentElement();
commentElement.on('composerTextChange').subscribe((event) => {
    console.log('Text changed:', event.text);
});

<script>
const commentElement = Velt.getCommentElement();
commentElement.on('composerTextChange').subscribe((event) => {
    console.log('Text changed:', event.text);
});
</script>

​

Bug Fixes

​

Comment Dialog Primitives

// Pattern 1: ID-Based (Standalone)
<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

// Pattern 2: Context Wrapper
<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
  <VeltCommentDialogBody />
</VeltCommentDialogContextWrapper>

<!-- Pattern 1: ID-Based (Standalone) -->
<velt-comment-dialog-header annotation-id="abc123"></velt-comment-dialog-header>
<velt-comment-dialog-composer annotation-id="abc123"></velt-comment-dialog-composer>

<!-- Pattern 2: Context Wrapper -->
<velt-comment-dialog-context-wrapper annotation-id="abc123">
  <velt-comment-dialog-header></velt-comment-dialog-header>
  <velt-comment-dialog-composer></velt-comment-dialog-composer>
  <velt-comment-dialog-body></velt-comment-dialog-body>
</velt-comment-dialog-context-wrapper>

• Header/Body: Header, Body, CloseButton
• Thread: ThreadCard with Avatar, Name, Time, Message, Reactions, Recordings, Reply, Options, and more
• Composer: Composer, ComposerInput, ComposerActionButton, ComposerAttachmentButton, ComposerRecorderButton, ComposerRecorderPlayer, ComposerFiles
• Dropdowns: StatusDropdown, PriorityDropdown, OptionsDropdown, CustomAnnotationDropdown (each with full sub-component breakdown)
• Additional: ReplyAvatars, AssigneeBanner, ResolveButton, UnresolveButton, CopyLink, DeleteButton, PrivateBanner, NavigationButton, and 90+ more