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


First import and configure Weavy and the WyMessenger component.

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

const weavy = new Weavy();
weavy.url = "";
weavy.tokenFactory = async (refresh) => "token_from_server";

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


Bot mode

The messenger can be used in a mode tailored for one-to-one chats with a bot. This limits the user to only create new conversations with the specified bot. This is a great way to keep track of AI conversations. You need to create a bot user and optionally link it to AI, then just specify the uid of the bot to use the bot mode.

<wy-messenger bot="mybot"></wy-messenger>

You must Configure a bot to use the bot mode.


Property Type Description
name string Sets a custom name of the Messenger to appear in the title bar.
bot string Enables single bot mode with the specified bot uid. This limits the Messenger to only have conversations with the specified bot.
conversationId number 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.

The available features are controlled by your product license. To disable a feature you can use the following attributes/properties.

Property Description
noAttachments Disable the possibility to upload local attachments.
noCloudFiles Disable the cloud file picker (Google Drive, Dropbox etc).
noMeetings Disable Zoom meetings.
noMentions Disable the possibility to mention other people in the directory.
noPolls Disable possibility to create a poll.
noPreviews Disable previews of files.
noReactions Disable the possibility to add emoji reactions to a message.
noReceipts Disable read receipts on a message.
noTyping Disable the typing indicator in the chat when other people types.

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

const messenger = new WyMessenger();
messenger.noReactions = true;



Method Returns Description
clearConversation() Deselects any active conversation.
conversationBelongsToMessenger(conversation: number \| AppRef \| 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();