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.

  React / Next.js

  Using props:

  <VeltComments bubbleOnHover={true} />
  

  Using API:

  const commentElement = client.getCommentElement();
  commentElement.showBubbleOnHover(); // Enable bubble on hover
  commentElement.hideBubbleOnHover(); // Disable bubble on hover
  

  Other Frameworks

  Using props:

  <velt-comments bubble-on-hover="true"></velt-comments>
  

  Using API:

  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.

  React / Next.js with Hooks

  <VeltNotificationsTool tabConfig={{
      "forYou": {
          name: 'Custom For You',
          enable: true,
      },
      "documents": {
          name: 'Custom Documents',
          enable: true,
      },
      "all": {
          name: 'Custom All',
          enable: false,
      },
  }} />
  

  Using APIs:

  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);
  

  React / Next.js

  <VeltNotificationsTool tabConfig={{
      "forYou": {
          name: 'Custom For You',
          enable: true,
      },
      "documents": {
          name: 'Custom Documents',
          enable: true,
      },
      "all": {
          name: 'Custom All',
          enable: false,
      },
  }} />
  

  Using APIs:

  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);
  

  Other Frameworks

  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:

  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.

  • The merge parameter is used to determine if the new contact list should be merged with the existing contact list or replaced. Default: false.

React / Next.js with Hooks

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: '[e-mail]'}], {merge: true});
}, [contactElement]);

React / Next.js

const contactElement = client.getContactElement();
contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: '[e-mail]'}], {merge: true});

Other Frameworks

const contactElement = Velt.getContactElement();
contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: '[e-mail]'}], {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.

React / Next.js with Hooks

useSetDocument('unique-document-id', {documentName: 'Document Name'});

React / Next.js

const { client } = useVeltClient();

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

HTML

if(Velt){
    Velt.setDocument('unique-document-id', {documentName: 'Document Name'});
}

Angular

this.client.setDocument('unique-document-id', {documentName: 'Document Name'});

Vue.js

client.setDocument('unique-document-id', {documentName: 'Document Name'});

Improvements

• [Comments]: Improved the get comment annotations API to determine data loading state in React:
  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.