Chat Message Bell UI component

Introduction

The <ChatMessageBell/> component is typically used in the header off your application. It informs the user about unread messages in the chat. Please refer to the chat feature guide for more information and instructions.

All the Chat related UI widgets need to be used within a <ChatProvider> component. The <ChatProvider> needs to be inserted only once, at a higher level component, typically in the App.tsx or a layout component.

The <ChatMessageBell /> requires the <Chat/> component to be used as well.

See this component in action on Storybook (opens in a new tab).

Integration

<ChatMessageBell/>

To show the bell component, you can copy this snippet in your code:

import { ChatProvider, ChatMessageBell } from '@roq/ui-react';
 
function App() {
  return (
    <ChatProvider>
      <TopBar>
        <ChatMessageBell />
      </TopBar>
    </ChatProvider>
  );
}