> ## 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.

# April 24 2024

## Versions

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

## Option to Disable ShadowDOM

We've added an option for you to [disable the ShadowDOM on certain components](https://docs.velt.dev/async-collaboration/comments/customize-behavior/ui-controls).

By default, a ShadowDOM is used with certain components to ensure that your application's CSS does not interfere with the styling of the SDK components.

If you want your application's CSS to affect the styling of the SDK components, you can disable the ShadowDOM.

```jsx theme={null}
<VeltComments pinShadowDom={false} dialogShadowDom={false} />
<VeltCommentsSidebar shadowDom={false} />
```

API methods:

```jsx theme={null}
const commentElement = client.getCommentElement();
commentElement.enablePinShadowDOM();
commentElement.disablePinShadowDOM();
commentElement.enableDialogShadowDOM();
commentElement.disableDialogShadowDOM();
commentElement.enableSidebarShadowDOM();
commentElement.disableSidebarShadowDOM();
```

## Method to Unsubscribe from Subscriptions

We added an `unsubscribe()` method to unsubscribe from any event subscriptions.

Example subscription:

```jsx theme={null}
let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
// Do something with comments
});
```

To unsubscribe from the subscription:

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

## Added webhook notifications for `Huddle` Create and Join Events

Your users will now receive [webhook notifications](https://docs.velt.dev/webhooks/huddle-webhooks) when a `Huddle` is created or joined.

Example notification schema:

```jsx theme={null}
{
  "from": {
      // UserObject
  },
  "projectName": "string",
  "projectUrl": "string",
  "actionType": "string", // created | joined
  "notificationSource": "huddle",
  "documentId": "string",
  "clientDocumentId": "string",
  "id": "string",
  "timestamp": 1234567890,
  "actionUser": {
      // UserObject
  },
}
```

Click here to see the [Notification](https://docs.velt.dev/api-reference/sdk/models/data-models#notification) schema.

## Added Validations to check for Audio and Video permissions on `Huddles`

Your users will now be prompted to check for Audio and Video permissions on `Huddles`

## Option to disable `Chat` feature on `Huddles`

You can now [disable the Chat feature](https://docs.velt.dev/realtime-collaboration/huddle/customize-behavior) that is enabled by default on `Huddle` component.

## Option to disable `flockMode` feature on `Huddles`

You can now [disable the flockMode feature](https://docs.velt.dev/realtime-collaboration/huddle/customize-behavior) that is enabled by default on `Huddle` component when clicking on another user's Avatar.

## Added support to set a custom order of locations to sort by in the `Comments Sidebar`.

You can now define the [order in which locations appear](https://docs.velt.dev/async-collaboration/comments-sidebar/customize-behavior) in the `Comments Sidebar` filter through the 'order' field in the `filterConfig` object.

```jsx theme={null}
<VeltCommentsSidebar
  filterConfig={{
    location: {
      enable: true,
      name: 'Pages',
      enableGrouping: true,
      multiSelection: true,
      order: ['locationId1', 'locationId2', 'locationId3'] // pass array of location ids here
    },
  }}
/>
```

## Added configuration for Unread Comments Indicator

You can now configure the [Unread Comments Indicator](https://docs.velt.dev/async-collaboration/comments/customize-behavior/display-metadata) to be either `minimal` or `verbose`.

In `minimal` mode unread comments will be indicated by a small red dot.

In `verbose` mode unread comments will be indicated by a larger badge that says UNREAD

<Frame>
  <img src="https://mintcdn.com/velt/gY7ilEx2g4g3-HVe/images/verbose-mode-comments.png?fit=max&auto=format&n=gY7ilEx2g4g3-HVe&q=85&s=b9a8fb301fa6a4807ebb78b8ad756114" alt="" width="1276" height="808" data-path="images/verbose-mode-comments.png" />
</Frame>

## Added hook for `useUnsetDocumentId`

There is now a hook called [useUnsetDocumentId()](https://docs.velt.dev/api-reference/hooks/hooks#useunsetdocumentid) that calls [client.unsetDocumentId()](https://docs.velt.dev/api-reference/sdk/api/api-methods#client)

```jsx theme={null}
import { useUnsetDocumentId} from '@veltdev/react'
import React from 'react'

export default function YourComponent() {

  useUnsetDocumentId();

  return (
    <div>...</div>
  )
}
```

## Added option to use a specific version of the Velt React SDK.

You can now use a [specific version of the Velt React SDK](https://docs.velt.dev/get-started/advanced).

To do so, in your `VeltProvider` component, set the `config` props object to `{ version: '1.0.XYZ' }`.

Example:

```jsx theme={null}
<VeltProvider apiKey='YOUR_API_KEY' config={{ version: '1.0.126' }}>
	...
</VeltProvider>
```