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

# July 29 2024

## Versions

* Latest React SDK: [2.0.22](https://www.npmjs.com/package/@veltdev/react)
* Latest Non-React SDK: [2.0.22](https://www.npmjs.com/package/@veltdev/client)
* Latest Types: [2.0.22](https://www.npmjs.com/package/@veltdev/types)

## Added Wireframe for Custom Annotation Dropdown

We have added wireframes for custom annotation. [Learn more](https://docs.velt.dev/ui-customization/features/async/comments/comment-dialog/subcomponents/custom-annotation-dropdown).

## Added Custom Annotation Dropdown Component Feature

You can now customize annotation dropdown component feature. Create custom list data on annotation as required.

```jsx theme={null}
const customChipDropdownData: {
    type: 'multi' | 'single',
    data: {
        id: string,
        label: string
    }[]
} = {
    type: 'multi',
    data: [
        { id: 'violent', label: 'Violent' },
        { id: 'inappropriate', label: 'Inappropriate' },
        { id: 'robbery', label: 'Robbery' },
        { id: 'nsfw', label: 'NSFW' },
    ]
}
```

## Configure `maxDays` In Notification Tool and Notification Element

Set maximum days for notifications tool and notifications element by using the `setMaxDays()` API method. By default, the maximum days are set to 30.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsTool maxDays={15} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-notifications-tool max-days="15"></velt-notifications-tool>
    ```
  </Tab>
</Tabs>

API Methods:

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const notificationElement = client.getNotificationElement();
    notificationElement.setMaxDays(15);
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const notificationElement = Velt.getNotificationElement();
    notificationElement.setMaxDays(15);
    ```
  </Tab>
</Tabs>

## Added New Action Types

We have added new action types within notifications: `reactionAdded`, `reactionDeleted`.

## Added Notifications Metadata Type

Added notifications metadata type. User will get this metadata from `notification.metadata` object in the notification callback. [Learn more](/api-reference/sdk/models/data-models#notification#notificationmetadata-class-properties).

```jsx theme={null}
export class NotificationMetadata {
 
  apiKey?: string;
  clientOrganizationId?: string;
  organizationId?: string;
  clientDocumentId?: string | number;
  documentId?: string;
  locationId?: number;
  location?: Location;
}
```

## Added `customListDataOnComment` Method

For Autocomplete data, you can now directly set the data from comment element.

```jsx theme={null}
const customListDataOnComment: {
        hotkey: string,
        type: string,
        data: {
            id: string,
            name: string,
            description: string
        }[]
    } =  {
        hotkey: "!",
        type: "custom",
        data: [
            {
                id: '1',
                name: 'Name 1',
                description: 'Test Description 1'
            },
            {
                id: '2',
                name: 'Name 2',
                description: 'Test Description 2'
            },
            {
                id: '3',
                name: 'Name 3',
                description: 'Test Description 3'
            }
        ],
    }
```

API Methods

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    const commentElement = client.getCommentElement();			
    <VeltComments customListDataOnComment={customListDataOnComment} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const commentElement = Velt.getCommentElement();			
    commentElement.createCustomListDataOnComment(customListDataOnComment);
    ```
  </Tab>
</Tabs>