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

# March 14 2024

## Versions

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

## Notifications Component

The [Notifications](/async-collaboration/notifications/setup) component can be used to notify your users in-app when they receive a reply to a comment or are `@mentioned` by a teammate.

<Info>
  You will need to [enable Notifications in your console](https://console.velt.dev/dashboard/config/notification) in order for Notifications component to work.
</Info>

<Frame>
  <iframe src="https://landing-page-demo-velt.vercel.app/?feature=notifications" allow="camera; microphone" scrolling="no" frameBorder="0" className="w-full" height="700px" />
</Frame>

[Open in larger window](https://landing-page-demo-velt.vercel.app/?feature=notifications)

To implement `Notifications`, simply add it to your app like this:

```jsx React / Next.js theme={null}
import { VeltNotificationsTool, VeltNotificationsHistoryPanel} from '@veltdev/react';

function YourComponent() {

  return (
    <div className="toolbar">
      <VeltNotificationsTool />
      <VeltNotificationsHistoryPanel />
    </div>
  )
  
}
```

## Custom Notifications

Additionally, you can [send custom notifications](/async-collaboration/notifications/api-add-notification) to this component using our  `https://api.velt.dev/v1/notifications/add` API end point.

Sample Post Request:

```jsx theme={null}
const options = {method: 'POST', body: JSON.stringify(body)};

fetch('https://api.velt.dev/v1/notifications/add', options)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error(err));
```

Sample Body:

```jsx theme={null}
{
    "data": {
        "apiKey": "YOUR_API_KEY",
        "authToken": "YOUR_AUTH_TOKEN",
        "documentId": "YOUR_DOCUMENT_ID", 
        "actionUser": {
            "email": "actionuseremail@domain", // required
            "name": "Action Username", // optional
            "photoUrl": "Action User Photo URL", // optional
            "userId": "User ID", // required
        },
        "displayHeadlineMessageTemplate": "This is main template, you can pass variables using curly brackets like this: {actionUser}, {recipientUser}, {yourCustomVariableWithStringValue}",
        "displayHeadlineMessageTemplateData": {
            "actionUser": {
                "email": "actionuseremail@domain", // required
                "name": "Action Username", // optional
                "photoUrl": "Action User Photo URL", // optional
                "userId": "User ID", // required
            },
            "recipientUser": {
                "email": "recipientuseremail@domain", // required
                "name": "Recipient Username", // optional
                "photoUrl": "Recipient User Photo URL", // optional
                "userId": "User ID", // required
            },
            "yourCustomVariableWithStringValue": "Variable will be replaced with this text"
        },
        "displayBodyMessage": "This is body message (Secondary message)",

	 // Pass list of users who should be notified, notification will be shown to all the users in all section in notification panel and notification history panel, but it will be shown in 'forYou' section also to notifyUsers.
        "notifyUsers": [
            {
                "email": "notifyuseremail@domain", // required
                "name": "Notify User Name", // optional
                "photoUrl": "Notify User Photo URL", // optional
                "userId": "User ID", // required
            }
        ]
    }
}
```

## Dark Mode on All Tool and Button Components

You can now configure Dark Mode individually on all Tool and Button Components in the Velt SDK.

Example:

```jsx theme={null}
<VeltCommentTool darkMode={true} />
<VeltSidebarButton darkMode={true} />
<VeltHuddleTool darkMode={true} />
<VeltRecorderTool darkMode={true} />
<VeltUserInviteTool darkMode={true} />
<VeltArrowTool darkMode={true} />
<VeltNotificationsTool darkMode={true} />
<VeltNotificationsPanel darkMode={true} />
<VeltNotificationsHistoryPanel darkMode={true} />
```

If you want to configure Dark Mode globally, you can also use:

```jsx theme={null}
client.setDarkMode(true)
```

## Bug Fixes

* Fixed bug where you could still drag comments into restricted areas
* Fixed user email related issue for admin users in invite dialog
* Fixed typed related issues in darkMode
* Added option to disable live selection with disableFeatures()