Messenger component

Use the Messenger component to render a typical messenger used for private messaging and chat rooms.

The layout of the component depends on the size of it's container. In narrow layouts, the conversation list and the chat will be stacked and clicking on a conversation in the list will navigate to the actual chat. In wider layouts, the Messenger has a side-by-side layout with the conversation list on the left hand side and the chat window on the right hand side.

Element: <wy-messenger>
Class: WyMessenger

Usage

First import and configure Weavy and the WyMessenger component.

import { Weavy, WyMessenger } from "@weavy/uikit-web";

const weavy = new Weavy();
weavy.url = "https://myenvironment.weavy.io";
weavy.tokenFactory = async (refresh) => "token_from_server";

Then add the <wy-messenger> component to your HTML.

<wy-messenger></wy-messenger>

Properties

Property Type Default Description
conversationId number null Sets the selected conversation in the Messenger. This is handled automatically by the Messenger component and there's normally no need to ever set this manually.
features FeaturesConfigType {} Overrides the default features available for the Messenger.
name string Sets a custom name of the Messenger to appear in the title bar.

The available features are controlled by your product license. The features config is opt-out, meaning you can disable available features, but never enable features that are not included in your license.

Feature Description
attachments Disable the possibility to upload local attachments
cloudFiles Disable the cloud file picker (Google Drive, Dropbox etc.)
meetings Disable Zoom meetings
mentions Disable the possibility to mention other people in the directory
previews Disable previews of files
reactions Disable the possibility to add emoji reactions to a message. Setting this to false will only enable the thumbs up reaction
receipts Disable read receipts on a message
typing Disable the typing indicator in the chat when other people types

Example: Render a messenger component with the reactions features disabled.

const messenger = new WyMessenger();
messenger.features = {
  reactions: false,
};

document.body.append(messenger);

Methods

Method Returns Description
clearConversation() Deselects any active conversation.
conversationBelongsToMessenger(conversation: number \| AppType) Promise<Boolean> Checks if a conversation belongs to Messenger.

conversation: The conversation or id to check if it belongs to Messenger.
selectConversation(id: number) Promise Set the active conversation.

id: The id of the conversation to select.

Example: Select conversation with id 123.

const messenger = new WyMessenger();
document.body.append(messenger);

messenger.selectConversation(123);

Events

The WyMessenger component emits the following events.

Event Detail Description
wy:message_created { message: MessageType } New message created.
wy:conversation_marked { conversation: ConversationType, marked_at: string, marked_id: number } Message seen-by status updated.
wy:conversation_delivered { conversation: ConversationType, delivered_at: string } Message delivery status updated.
wy:app_created { app: AppType } A new chat is created.
wy:member_added { app: AppType, member: MemberType } A member is added to a chat.
Weavy Docs