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>

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.

Properties

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;

document.body.append(messenger);

Methods

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();
document.body.append(messenger);

messenger.selectConversation(123);