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

# Aug 8 2024

# 2.0.29

### New Features

* \[**Comments**]: Added feature to render a comment bubble on the comment pin or triangle instead of the comment dialog. Hovering or clicking the bubble will open the comment dialog.

  > [tab] React / Next.js
  >
  > Using props:
  >
  > ```jsx theme={null}
  > <VeltComments bubbleOnHover={true} />
  > ```
  >
  > Using API:
  >
  > ```javascript theme={null}
  > const commentElement = client.getCommentElement();
  > commentElement.showBubbleOnHover(); // Enable bubble on hover
  > commentElement.hideBubbleOnHover(); // Disable bubble on hover
  > ```

  > [tab] Other Frameworks
  >
  > Using props:
  >
  > ```html theme={null}
  > <velt-comments bubble-on-hover="true"></velt-comments>
  > ```
  >
  > Using API:
  >
  > ```javascript theme={null}
  > const commentElement = Velt.getCommentElement();
  > commentElement.showBubbleOnHover(); // Enable bubble on hover
  > commentElement.hideBubbleOnHover(); // Disable bubble on hover
  > ```

* \[**Location**]: For multiple location setup, added support for using `data-velt-location-id` vs full location object for marking additional locations.

### Improvements

* \[**Comments**]:Refactored comment components code for better maintainability.

### Bug Fixes

* \[**Comments**]: Fixed an issue where assignee banner text color was not being applied correctly for custom statuses.
* \[**Notifications**]: Fixed an issue where the document name in the notifications documents tab was not being displayed correctly.

# 2.0.28

### New Features

* \[**Notifications**]: Added ability to customize tabs on the Notifications Panel.

  > [tab] React / Next.js with Hooks
  >
  > ```jsx theme={null}
  > <VeltNotificationsTool tabConfig={{
  >     "forYou": {
  >         name: 'Custom For You',
  >         enable: true,
  >     },
  >     "documents": {
  >         name: 'Custom Documents',
  >         enable: true,
  >     },
  >     "all": {
  >         name: 'Custom All',
  >         enable: false,
  >     },
  > }} />
  > ```
  >
  > Using APIs:
  >
  > ```jsx theme={null}
  > const notificationElement = useNotificationUtils();
  >
  > const tabConfig = {
  >   "forYou": {
  >     name: 'Custom For You',
  >     enable: true,
  >   },
  >   "documents": {
  >     name: 'Custom Documents',
  >     enable: true,
  >   },
  >   "all": {
  >     name: "Custom All",
  >     enable: false,
  >   },
  > };
  >
  > notificationElement.setTabConfig(tabConfig);
  > ```

  > [tab] React / Next.js
  >
  > ```jsx theme={null}
  > <VeltNotificationsTool tabConfig={{
  >     "forYou": {
  >         name: 'Custom For You',
  >         enable: true,
  >     },
  >     "documents": {
  >         name: 'Custom Documents',
  >         enable: true,
  >     },
  >     "all": {
  >         name: 'Custom All',
  >         enable: false,
  >     },
  > }} />
  > ```
  >
  > Using APIs:
  >
  > ```jsx theme={null}
  > const notificationElement = client.getNotificationElement();
  >
  > const tabConfig = {
  >   "forYou": {
  >     name: 'Custom For You',
  >     enable: true,
  >   },
  >   "documents": {
  >     name: 'Custom Documents',
  >     enable: true,
  >   },
  >   "all": {
  >     name: 'Custom All',
  >     enable: false,
  >   },
  > };
  >
  > notificationElement.setTabConfig(tabConfig);
  > ```

  > [tab] Other Frameworks
  >
  > ```js theme={null}
  > const tabConfig = {
  >   "forYou": {
  >     name: 'Custom For You',
  >     enable: true,
  >   },
  >   "documents": {
  >     name: 'Custom Documents',
  >     enable: true,
  >   },
  >   "all": {
  >     name: 'Custom All',
  >     enable: false,
  >   },
  > };
  >
  > const notificationsTool = document.querySelector('velt-notifications-tool');
  > notificationsTool?.setAttribute("tab-config", JSON.stringify(tabConfig));
  > ```
  >
  > Using APIs:
  >
  > ```jsx theme={null}
  > const notificationElement = Velt.getNotificationElement();
  >
  > const tabConfig = {
  >   "forYou": {
  >     name: 'Custom For You',
  >     enable: true,
  >   },
  >   "documents": {
  >     name: 'Custom Documents',
  >     enable: true,
  >   },
  >   "all": {
  >     name: 'Custom All',
  >     enable: false,
  >   },
  > };
  >
  > notificationElement.setTabConfig(tabConfig);
  > ```

* \[**@ mention**]: Added ability to override contact list on the client side. [Learn more](https://velt.dev/docs/async-collaboration/comments/customize-behavior.md#mentions).
  * The `merge` parameter is used to determine if the new contact list should be merged with the existing contact list or replaced. Default: `false`.

> [tab] React / Next.js with Hooks
>
> ```jsx theme={null}
> const contactElement = useContactUtils();
>
> useEffect(() => {
>   contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});
> }, [contactElement]);
>
> ```

> [tab] React / Next.js
>
> ```jsx theme={null}
> const contactElement = client.getContactElement();
> contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});
> ```

> [tab] Other Frameworks
>
> ```jsx theme={null}
> const contactElement = Velt.getContactElement();
> contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});
> ```

* \[**Document**]: Added ability to set metadata on the document while setting the `documentId`.
  * You can set any key/value pair in the metadata object. `documentName` is a special field that we use to display the document name in some Velt Components.

> [tab] React / Next.js with Hooks
>
> ```jsx theme={null}
> useSetDocument('unique-document-id', {documentName: 'Document Name'});
> ```

> [tab] React / Next.js
>
> ```jsx theme={null}
> const { client } = useVeltClient();
>
> useEffect(() => {
>     if (client) {
>         client.setDocument('unique-document-id', {documentName: 'Document Name'});
>     }
> }, [client]);
> ```

> [tab] HTML
>
> ```jsx theme={null}
> if(Velt){
>     Velt.setDocument('unique-document-id', {documentName: 'Document Name'});
> }
> ```

> [tab] Angular
>
> ```jsx theme={null}
> this.client.setDocument('unique-document-id', {documentName: 'Document Name'});
> ```

> [tab] Vue.js
>
> ```jsx theme={null}
> client.setDocument('unique-document-id', {documentName: 'Document Name'});
> ```

### Improvements

* \[**Comments**]: Improved the get comment annotations API to determine data loading state in React:
  ```jsx theme={null}
  const [loading, setLoading] = useState(true);
  const commentAnnotations = useCommentAnnotations();

  useEffect(() => {
    if (commentAnnotations) {
      setLoading(false);
    } else {
      setLoading(true);
    }
  }, [commentAnnotations]);
  ```
* \[**Core**]:Updated SDK CDN URL in React and Client libraries to point to `cdn.velt.dev`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.