Velt SDK Changelog

​

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