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

  <Tabs>
    <Tab title="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>

    <Tab title="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
      ```
    </Tab>
  </Tabs>

* \[**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.

  <Tabs>
    <Tab title="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>

    <Tab title="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>

    <Tab title="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);
      ```
    </Tab>
  </Tabs>

* \[**@ mention**]: Added ability to override contact list on the client side. [Learn more](/async-collaboration/comments/customize-behavior#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`.

<Tabs>
  <Tab title="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>

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

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

* \[**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.

<Tabs>
  <Tab title="React / Next.js with Hooks">
    ```jsx theme={null}
    useSetDocument('unique-document-id', {documentName: 'Document Name'});
    ```
  </Tab>

  <Tab title="React / Next.js">
    ```jsx theme={null}
    const { client } = useVeltClient();

    useEffect(() => {
        if (client) {
            client.setDocument('unique-document-id', {documentName: 'Document Name'});
        }
    }, [client]);
    ```
  </Tab>

  <Tab title="HTML">
    ```jsx theme={null}
    if(Velt){
        Velt.setDocument('unique-document-id', {documentName: 'Document Name'});
    }
    ```
  </Tab>

  <Tab title="Angular">
    ```jsx theme={null}
    this.client.setDocument('unique-document-id', {documentName: 'Document Name'});
    ```
  </Tab>

  <Tab title="Vue.js">
    ```jsx theme={null}
    client.setDocument('unique-document-id', {documentName: 'Document Name'});
    ```
  </Tab>
</Tabs>

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