1. Reference
  2. React UI kit
  3. Components

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. Only needed if you want to use a combination of the ConversationList and Conversation 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
ConversationBadge A component showing the number of unread converastions as a badge
Chat This is a variant of the Conversation component that you should use to render a contextual Chat. This component expects an uid of the chat app to render
Posts A posts app displaying a feed of posts and comments. This is a contextual component. The component expects an uid of the posts app to render
Files A files app displaying a uploaded files and linked cloud files. This is a contextual component. The component expects an uid of the files app to render

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> 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="my_chat" />            
</WeavyProvider>

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

<WeavyProvider client={weavyClient}>    
    <Posts uid="my_feed" />            
</WeavyProvider>

Example: When using the Posts component.

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.
  • The <Posts> component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the post component can create posts and comments.
  • The <Files> component is contextual. These are often connected to a specific entity, for example a specific product page or similar. Every user that is a member of the files component can upload files and post comments.

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_ENVIRONMENT_URL}/api/apps/init -d '{app: {"uid": "product-chat", "name": "Product Chat", "type": "chat"}, user: {"uid": "johnd"}}'

The request above creates a new Chat app with the unique id 'product-chat'. The user with the user id 'johnd' is added as a member if not already a member. 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.

WeavyClient

When adding a new <WeavyProvider> component, you must specify a new instance of the WeavyClient class. The WeavyClient is responsible for handling the connection to the Weavy environment.

const getToken = useCallback(async (refresh: boolean) => {  
    // return a generated token from your backend api
    let response = await fetch(`/token?&refresh=${refresh}`);
    let json = await response.json();
    return json.access_token
}, []);

...

const weavyClient = new WeavyClient({ 
    url: "https://example.weavy.io", 
    tokenFactory: getToken
});

...

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

THe constructor expects a WeavyClientOptions with an url to the Weavy environment, and a tokenFactory function returning a token for the user. The user token is used in all communication with the Weavy environment and the Weavy Api.

Files app properties

The files app has properties to set the view and sorting of the file list.

  • view = "list" | "grid"
  • order = { by: "name" | "size" | "modified_at", descending: boolean }
  • trashed = boolean
Weavy Docs