​
Versions

​
Added Skeleton loader subcomponent to Comments Sidebar Wireframe

The Comments Sidebar Wireframe now has a Skeleton loader subcomponent that you can modify.

​
Added functionality to search by name in @mention dropdown

You can now search by name, in addition to just email, in the @mention dropdown

​
Added option to show resolved Comments on DOM

By default, resolved Comments are not shown on the DOM.

There is now an option to show resolved Comments on the DOM.

// Html
<velt-comments resolved-comments-on-dom="true"></velt-comments>

// React
<VeltComments resolvedCommentsOnDom={true} />

// API Methods
const commentElement = client.getCommentElement();
// To show resolved comments on dom
commentElement.showResolvedCommentsOnDom();
// To hide resolved comments on dom
commentElement.hideResolvedCommentsOnDom();

​
User background color

You can now pass in a color when you identify a user using client.identify()

const user = {
    userId: uid,
    name: displayName,
    email: email,
    photoUrl: photoURL,
    color: colorCode, // Hex code value goes in the place of colorCode
    groupId: groupId // this is the organization id the user belongs to.
};

await client.identify(user);

​
Added additional subcomponents to the Comments Dialog Wireframe

The following subcomponents were added to the Comments Dialog Wireframe:

​
Added support to set custom reactions

You can set custom reactions by passing a map that contains information about the reactions you want to add.

The map keys should be the reaction ID, and the map value should contain an object with either an url, svg, or emoji field to represent the reaction icon you want to use.

const customReactions = {
    "URL_EMOJI_ID": {
        "url": "EMOJI_URL"
    },
    "SVG_EMOJI_ID": {
        "svg": "EMOJI_SVG"
    },
    "TEXT_EMOJI_ID": {
        "emoji": "🤣" // emoji as a text
    }
};

<VeltComments customReactions={customReactions} />

API Methods:

const commentElement = client.getCommentElement();

const customReactions = {
    "URL_EMOJI_ID": {
        "url": "EMOJI_URL"
    },
    "SVG_EMOJI_ID": {
        "svg": "EMOJI_SVG"
    },
    "TEXT_EMOJI_ID": {
        "emoji": "🤣" // emoji as a text
    }
}
commentElement.setCustomReactions(customReactions);

​
Changed type in VeltCommentDialogWireframe.Composer.ActionButton from file to attachments. Keeping legacy support for file.

In the Comment Dialog Wireframe, we changed the type from file to attachments

<VeltCommentDialogWireframe.Composer.ActionButton type="file" /> -> <VeltCommentDialogWireframe.Composer.ActionButton type="attachments" />

​
Added support for customizing attachments in Comment Dialog

The VeltCommentDialogWireframe.Composer.Attachments and VeltCommentDialogWireframe.ThreadCard.Attachments subcomponents within the Comment Dialog Wireframe now support customization.

​
Added method listen to Comment Selection changes.

The onCommentSelectionChange() method can be used to listen to Comment selection changes.

const onCommentSelectionChange = (data) => {
  console.log('onCommentSelectionChange', data);
}

<VeltComments onCommentSelectionChange={(data) => onCommentSelectionChange(data)} />

Callback response schema:

export class CommentSelectionChangeData {
  selected!: boolean;
  annotation!: CommentAnnotation;
}

API Methods:

const commentElement = client.getCommentElement();
let subscription = commentElement.onCommentSelectionChange().subscribe((data) => {
  console.log('onCommentSelectionChange: ', data);
});

To unsubscribe from the subscription:

subscription?.unsubscribe()

Using Hooks:

The useCommentSelectionChangeHandler hook can be used to subscribe to Comment selection changes.

import React, { useEffect } from 'react';
import { useCommentSelectionChangeHandler } from '@veltdev/react';

function YourComponent() {
    const commentSelectionChange = useCommentSelectionChangeHandler();

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

    return (
        <>
            Selected Comment: {commentSelectionChange.annotation.id}
        </>
    );
}

​
Added prop to enable or disable Comment Pin Highlighter

The API Methods already existed, but we added a prop to enable or disable the Comment Pin Highlighter

<velt-comments comment-pin-highlighter="false"></velt-comments>

// React
<VeltComments commentPinHighlighter={false} />

// API method was already added before, adding here just for refernece purpose
const commentElement = client.getCommentElement();
// To enable comment pin highlighter
commentElement.enableCommentPinHighlighter();
// To disable comment pin highlighter
commentElement.disableCommentPinHighlighter();

​
Added flag to merge location in updateLocation cloud function

You can update a Location’s object fields while keeping the location id the same using an api call.

Set the merge flag to true if you want to merge the new location fields into the old location fields.

Set the flag to false if you want the new location object to completely replace the old location object.

{
    "data": {
        "apiKey": "YOUR_API_KEY",
        "authToken": "YOUR_AUTH_TOKEN",
        "documentId": "YOUR_DOCUMENT_ID",
        "migrate": {
            "oldLocation": YOUR_OLD_LOCATION_OBJECT_HERE,
            "newLocation": YOUR_NEW_LOCATION_OBJECT_HERE
        },
        "merge" : true
    }
}

Was this page helpful?

May 29 2024May 23 2024