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>

Single 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 name 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	Default	Description
`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`	`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.
`submodals`	`boolean`	`false`	Enables modal compatibility with other modals, backdrops and focus-traps. Note that it may have implications with layout (such as z-index effects) in your app.

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.
`polls`	Disable possibility to create a poll.
`previews`	Disable previews of files.
`reactions`	Disable the possibility to add emoji reactions to a message.
`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 feature 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.