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>

Example: When using the Messenger component.

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

Example: When using the individual components.

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

Example: When using the individual Chat component. No need for MessengerProvider here

Contextual and non-contextual components

The difference between these two similar components are:

  • The <Conversation> component is non-contextual and 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. These are 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.

Contextual components needs to be created and the user needs to be a member of the app before it can be loaded using our frontend libraries. You can use the Web API to init the app on your server side before loading the contextual app from your frontend.

Example: Execute a single request that creates the app (if it does not already exist) with the given uid identifier. Then the user with the given identifier will be added as a member in that app (if the user is not already a member).

$ curl -H 'Authorization: Bearer {token}' {WEAVY_BACKEND_URL}/api/apps/init -d '{app: {"uid": "product-chat", "name": "Product Chat", "type": "chat"}, user: {"uid": "u32"}}'

After the request is sent you can load and display the app using your frontend. For example the Chat component:

<WeavyProvider client={weavyClient}>    
    <Chat uid="product-chat" />            
</WeavyProvider>

Example: Contextual Chat component.

Layout

The Weavy components will resize and adapt automatically to a flex layout in the container where they are placed.

The <Messenger> and <Chat> have predefined overflow scroll styles. If you use other UI components to provide a custom messenger you will need to provide overflow scrolling to the container you are placing the component in by adding overflow-y: scroll in your CSS.

Weavy Docs