Components

The following components are available in the React UI kit:

Component name Description
WeavyProvider Wrapper component needed for all other components. This should always be the top most component in the Weavy component hierarchy
MessengerProvider Wrapper component when you don't use the Messenger component below and instead creating the UI from individual Weavy UI components.
Messenger A convenient component consisting of both ConversationList and Conversation sub components. This component renders the UI with a left sidebar with all the conversations and the current selected conversation to the right.
ConversationList A list of all the available conversastions for the user
Conversation The actual conversation with messages and a input form for sending new messages. This component is used to render Private Chats and Chat Rooms
Chat This is a variant of the Conversation component that you should use to render a Contextual Chat. This component expects an id of the chat app to render
ConversationBadge A component showing the number of unread converastions as a badge

Provider components

The <WeavyProvider> and <MessengerProvider> components are wrapper components that takes care of common and Messenger functionality respectively. When using the <Messenger> component, this component already wraps the <MessengerProvider> so no need to add that separately.

import { WeavyProvider, MessengerProvider } from "@weavy/uikit-react";

When you use the individual <ConversationList>, <Conversation> and <Chat> components, you must wrap these in both the <WeavyProvider> and <MessengerProvider> components.

<WeavyProvider client={weavyClient}>
    <Messenger />
</WeavyProvider>

Fig 1. When using the Messenger component.

<WeavyProvider client={weavyClient}>
    <MessengerProvider>
        <ConversastionList />
        <Conversastion />
    </MessengerProvider>
</WeavyProvider>

Fig 2. When using the individual components.

<WeavyProvider client={weavyClient}>    
    <Chat id="context_1" />            
</WeavyProvider>

Fig 2. When using the individual Chat component. No need for MessengerProvider here

<Conversation> vs <Chat> components

The difference between these two similar components is:

  • The <Conversation> component is used to render a Private Chat or a Chat Room. A Private Chat is a one-to-one chat and a Chat Room is multi user chat where users are invited.
  • The <Chat> component is used to render a Contextual chat. A contextual chat is often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the Contextual chat can post and read messages.

Please note! A contextual Chat and the members that should have access to it must be created before hand on the server side. Please read this article where you can find information about displaying a contextual app.

The different conversation types above are all different types in the Weavy Backend and depending on which one you creates and use in the backend, use the correct component in the frontend.

Weavy Docs