New react Inbox limitations

[RuslanHryn]

The new React Inbox component (@magicbell/react) has been released, and the old inbox (@magicbell/magicbell-react) has been deprecated.
However, the new inbox currently does not appear to provide all the functionality available in the old version. In particular, some core features, such as tabs, seem to be missing.

I could not find the following features in the new inbox:

1. Tabs
2. Support of HTML tags in notification body
3. Bell counter
4. Localization for inbox labels
5. closeOnNotificationClick option
6. Property to replace the bell icon

Could you please confirm whether these features are planned to be added in future releases, or if they already exist and I may have overlooked them?

[smeijer]

Hi @RuslanHryn ,

There are some changes to the new SDK, as we believe it should be opinionated while suiting most our customers. For that reason, some features from the old SDK did not make it to the new SDK.

• Tabs; this is one of the features that we don't natively support any more. However, it should be trivial to build it on your end using the components our SDK exports.

• HTML tags; I've pushed an update adding support for HTML tags in notification titles & content. Please update to @magicbell/[email protected]

• Bell Counter, please see the usage example under Bell Icon. The old "BellCounter", is now the "InlineNotification" which offers more functionality. It can be rendered anywhere in your app, and be paired with the ButtonComponent for a custom bell icon + badge like in the old sdk.

• Localisation is currently not supported. Which parts would you want to see localized?

• closeOnNotificationClick is something we've dropped as well. We believe that closing the inbox when a the user clicks a notification in the inbox, is confusing. The proper way to dismiss the inbox is by clicking outside of it, or pressing Esc.

• Bell Icon, to replace the bell icon, you'll need to create a custom ButtonComponent, like:

   import FloatingInbox from '@magicbell/react/floating-inbox';
   import InlineNotification from '@magicbell/react/inline-notification';
   import { BellIcon } from '@radix-ui/react-icons';
  
   function Bell() {
     return (
       <Box css={{ position: 'relative', pointerEvents: 'none' }}>
         <BellIcon />
         <Box css={{ position: 'absolute', top: -4, right: -3 }}>
           <InlineNotification variant="dot" />
         </Box>
       </Box>
     );
   }
   
   function InboxButton(props: { onClick: () => void; open: boolean }) {
     return (
       <Menu.Item icon={<Bell />} onClick={props.onClick} active={props.open}>
         Notifications
       </Menu.Item>
     );
   }
   
   function Inbox() {
     return (
       <FloatingInbox
         height={500}
         width={400}
         placement='bottom-end'
         ButtonComponent={InboxButton}
         offset={{ mainAxis: 12, crossAxis: -12 }}
       />
     );
   }