> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# May 24 2024

## Versions

* Latest SDK: [1.0.133](https://www.npmjs.com/package/@veltdev/react)
* Latest Types: [1.0.150](https://www.npmjs.com/package/@veltdev/types)

## Added Skeleton loader subcomponent to Comments Sidebar Wireframe

The Comments Sidebar Wireframe now has a [Skeleton loader subcomponent](/ui-customization/features/async/comments/comment-sidebar-components) 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](/async-collaboration/comments/customize-behavior/visibility-controls).

```jsx theme={null}
// 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()](/get-started/advanced)

```jsx theme={null}
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:

* [Priority Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/priority-dropdown)
* [Status Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/status-dropdown)
* [Options Dropdown](/ui-customization/features/async/comments/comment-dialog/subcomponents/options-dropdown)
* [Reaction Tool](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-tool)
* [Reaction Pin](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin)
* [Reactions Panel](/ui-customization/features/async/comments/comment-dialog/subcomponents/reactions-panel)
* [Reactions Pin Tooltip](/ui-customization/features/async/comments/comment-dialog/subcomponents/reaction-pin-tooltip)
* [Autocomplete Option](/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-option)
* [Autocomplete Chip Tooltip](/ui-customization/features/async/comments/comment-dialog/subcomponents/autocomplete-chip-tooltip)

## Added support to set custom reactions

You can [set custom reactions](/async-collaboration/comments/customize-behavior/multimedia) 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.

```jsx theme={null}
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:

```jsx theme={null}
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](/ui-customization/features/async/comments/comment-dialog-components), 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](/ui-customization/features/async/comments/comment-dialog-components) now support customization.

## Added method listen to Comment Selection changes.

The [onCommentSelectionChange()](/async-collaboration/comments/customize-behavior#event-subscription) method can be used to listen to Comment selection changes.

```jsx theme={null}
const onCommentSelectionChange = (data) => {
  console.log('onCommentSelectionChange', data);
}

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

Callback response schema:

```jsx theme={null}
export class CommentSelectionChangeData {
  selected!: boolean;
  annotation!: CommentAnnotation;
}
```

API Methods:

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

To unsubscribe from the subscription:

```jsx theme={null}
subscription?.unsubscribe()
```

Using Hooks:

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

```jsx theme={null}
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](/async-collaboration/comments/customize-behavior/ui-controls)

```jsx theme={null}
<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](/key-concepts/overview#locations) 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.

```jsx theme={null}
{
    "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
    }
}
```