Skip to main content

Libraries

  • @veltdev/react
  • @veltdev/client
  • @veltdev/sdk
5.0.0-beta.14
February 10, 2026

New Features

  • [Comments]: Added page mode composer context APIs to pass context when opening the sidebar via the comment tool. When enabled, clicking the comment tool opens the sidebar with the page mode composer and passes configured context automatically.
// Using API methods
import { useCommentUtils, VeltCommentTool } from '@veltdev/react';

const commentElement = useCommentUtils();

// Enable context passing mode
commentElement.enableContextInPageModeComposer();

// Set context with target element
commentElement.setContextInPageModeComposer({
  context: { projectId: 'abc123', section: 'header' },
  targetElementId: 'my-target-element'
});

// Focus the composer programmatically
commentElement.focusPageModeComposer();

// Clear context
commentElement.clearPageModeComposerContext();

// Disable context passing mode
commentElement.disableContextInPageModeComposer();


// Using props
<VeltCommentTool
  contextInPageModeComposer={true}
  context={{ section: 'header', elementId: 'nav-menu' }}
/>
  • [Comments]: Added setAssignToType() method to switch the assignment UI between dropdown and checkbox modes. Checkbox mode allows quick self-assignment with a toggle.
// Using Hooks
import { useCommentUtils, VeltComments } from '@veltdev/react';

const commentElement = useCommentUtils();

// Use dropdown mode (default)
commentElement.setAssignToType({ type: 'dropdown' });

// Use checkbox mode for quick self-assignment
commentElement.setAssignToType({ type: 'checkbox' });


// Using props
<VeltComments assignToType="checkbox" />
  • [Comments]: Added “Assigned to me” filter option in the sidebar to filter comments by assignment.
import { VeltCommentsSidebarWireframe } from '@veltdev/react';

<VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
  <VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content.FilterAssignedToMe />
</VeltCommentsSidebarWireframe.MinimalFilterDropdown.Content>
  • [Comments]: Added new event types to track comment tool and sidebar button clicks. Subscribe to these events to access context data for analytics and custom workflows.
// Using Hooks
import { useCommentEventCallback } from '@veltdev/react';
import { useEffect } from 'react';

const commentToolClickEvent = useCommentEventCallback('commentToolClick');

useEffect(() => {
  if (commentToolClickEvent) {
    console.log('Context:', commentToolClickEvent.context);
    console.log('Target Element ID:', commentToolClickEvent.targetElementId);
  }
}, [commentToolClickEvent]);

const sidebarButtonClickEvent = useCommentEventCallback('sidebarButtonClick');

useEffect(() => {
  if (sidebarButtonClickEvent) {
    console.log('Sidebar button clicked');
  }
}, [sidebarButtonClickEvent]);

// Using API methods
import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();
const commentElement = client.getCommentElement();

commentElement.on('commentToolClick').subscribe((event) => {
  console.log('Context:', event.context);
  console.log('Target Element ID:', event.targetElementId);
});

commentElement.on('sidebarButtonClick').subscribe((event) => {
  console.log('Sidebar button clicked');
});
  • [Comments]: Added readOnly prop to control read-only mode at the component level. The local prop takes precedence over global settings when explicitly set.
import { VeltCommentComposer, VeltInlineCommentsSection } from '@veltdev/react';

<VeltCommentComposer readOnly={true} />

<VeltInlineCommentsSection
  targetElementId="my-element"
  readOnly={true}
/>
  • [Comments]: Added wireframe component to customize the assign button on thread cards.
import { VeltCommentDialogWireframe } from '@veltdev/react';

<VeltCommentDialogWireframe.ThreadCard.AssignButton />
  • [Comments]: Added wireframe component to customize the edit composer within comment thread cards.
import { VeltCommentDialogWireframe } from '@veltdev/react';

<VeltCommentDialogWireframe.ThreadCard.EditComposer />
  • [Comments]: Added reaction pin component to pin specific reactions and exclude them from the general list.
import { VeltCommentDialogWireframe } from '@veltdev/react';

<VeltCommentDialogWireframe.ThreadCard>
  <VeltCommentDialogWireframe.ThreadCard.ReactionPin reactionId="thumbs-up" />
  <VeltCommentDialogWireframe.ThreadCard.ReactionPin reactionId="heart" />

  <VeltCommentDialogWireframe.ThreadCard.Reactions
    excludeReactionIds={['thumbs-up', 'heart']}
  />

  <VeltCommentDialogWireframe.ThreadCard.ReactionTool
    excludeReactionIds={['thumbs-up', 'heart']}
  />
</VeltCommentDialogWireframe.ThreadCard>
  • [Comments]: Added resolvedByUser property on CommentAnnotation to access the full user object of who resolved a comment.

Improvements

  • [Comments]: Renamed targetElementId to targetComposerElementId on VeltCommentComposer for clarity.
import { VeltCommentComposer } from '@veltdev/react';

// Before (deprecated)
<VeltCommentComposer targetElementId="my-composer" />

// After (required)
<VeltCommentComposer targetComposerElementId="my-composer" />
  • [Comments]: Added CSS class .velt-assign-dropdown--checkbox-icon-selected to style the checkbox selected state.

Bug Fixes

  • [Comments]: Fixed cursor jumping when clicking autocomplete tool buttons. Text now inserts at the correct cursor position.
  • [Comments]: Fixed actions menu visibility so it remains visible when the assignment dropdown is opened.
  • [Comments]: Added “Assign” tooltip to the assignment button in thread cards.
  • [Comments]: Fixed “Assign To” label capitalization to “Assign to”.
  • [Reactions]: Added .velt-reaction-pin--no-reactions CSS class for styling empty reaction pins.
  • [Comments]: Fixed autocomplete panel viewport height to respect custom itemSize from autoCompleteScrollConfig.
  • [Comments]: Fixed attachment metadata handling to use fallback values when metadata is unavailable.
  • [Comments]: Fixed read-only state management so local readOnly props are not overridden by global state changes.
  • [Reactions]: Fixed reactions panel to return an empty array on error instead of default emojis.
  • [Comments]: Fixed reactionId prop on VeltCommentDialogWireframe.ThreadCard.ReactionPin to properly convert to dashed-case in React.
5.0.0-beta.13
February 10, 2026

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();
5.0.0-beta.12
February 6, 2026

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.
5.0.0-beta.11
February 4, 2026

Improvements

  • [Comments]: Added ability to enable/disable Private Comments feature in Velt Console
5.0.0-beta.10
February 3, 2026

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
});
Return Format:
{
  data: {
    "doc-1": { total: 10, unread: 2 },
    "doc-2": { total: 15, unread: 5 }
  }
}
5.0.0-beta.9
January 31, 2026

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.
5.0.0-beta.8
January 30, 2026

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

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.
5.0.0-beta.7
January 28, 2026

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

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?',
    }
});
5.0.0-beta.6
January 28, 2026

Bug Fixes

  • [Core]: Fixed package integrity issue in v5.0.0-beta.5.
5.0.0-beta.5
January 28, 2026

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.
5.0.0-beta.4
January 23, 2026

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.
5.0.0-beta.3
January 22, 2026

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.
5.0.0-beta.2
January 22, 2026

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
});
  • [Comments]: Added submitComment(targetElementId) method to programmatically trigger comment submission. Enables custom buttons or keyboard shortcuts for submitting comments.

<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');
  • [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..." />
  • [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);
});
5.0.0-beta.1
January 21, 2026

Bug Fixes

Comment Dialog Primitives

Released 115+ primitive components for building custom comment dialogs. Each subcomponent can now be used independently without requiring the full dialog structure.
// Pattern 1: ID-Based (Standalone)
<VeltCommentDialogHeader annotationId="abc123" />
<VeltCommentDialogComposer annotationId="abc123" />

// Pattern 2: Context Wrapper
<VeltCommentDialogContextWrapper annotationId="abc123">
  <VeltCommentDialogHeader />
  <VeltCommentDialogComposer />
  <VeltCommentDialogBody />
</VeltCommentDialogContextWrapper>
Available Components:
  • 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
View full documentation → | API Methods | Data Models