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

# July 26 2024

## Versions

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

## Added Notifications Panel and Tool Wireframes

We have just added Notifications Panel and Notifications Tool wireframes.

## Deprecated Notification History Panel

We have deprecated the Notification History Panel. It will now load the Notification Panel Component.

## Added Option to Open Sidebar From Left

Previously, the sidebar would only open from right by default. Now, we have added the option to open the sidebar from left as well.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltCommentsSidebar position="left | right"/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-comments-sidebar position="left | right"/>
    ```
  </Tab>
</Tabs>

## Added More Props Within Notifications Tool Component

We have added `variant`, `panelVariant` and `panelOpenMode` props in Notification Tool Component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsTool panelOpenMode='sidebar | popover' variant="tool1" panelVariant='panel1'/>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    <velt-notifications-tool panel-open-mode='sidebar | popover' variant="tool1" panel-variant='panel1'/>
    ```
  </Tab>
</Tabs>

## Added Tab Configuration Support for Notification Tool

You can now customize your tabs for Notifications Tool Component.

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltNotificationsTool tabConfig={{
        "forYou": {
            name: 'Custom For You',
            enable: true,
        },
        "documents": {
            name: 'Custom Document',
            enable: false,
        },
        "people": {
            name: 'Custom People',
            enable: false,
        },
        "all": {
            name: "Custom All",
            enable: true,
        },
    }
    } />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```jsx theme={null}
    const tabConfig = {
    	"forYou": {
    		name: 'Custom For You',
    		enable: true,
    	},
    	"documents": {
    		name: 'Custom Document',
    		enable: false,
    	},
    	"people": {
    		name: 'Custom People',
    		enable: false,
    	},
    	"all": {
    		name: "Custom All",
    		enable: true,
    	},
    }


    const notificationsTool = document.querySelector('velt-notifications-tool');
    notificationsTool?.setAttribute("tab-config", JSON.stringify(tabConfig));
    ```
  </Tab>
</Tabs>