Reference
UIKit
Messenger

Messenger component

<wy-messenger> | WyMessenger

Use the messenger component to render a full featured chat interface for private messaging and chat rooms. The layout depends on the size of its container. In narrow layouts, the conversation list and chat will be stacked and clicking on a conversation in the list will navigate to the chat. In wider layouts, the component has a side-by-side layout with the conversation list on the left hand side and the chat window on the right hand side.

Importing

If you installed the UIKit with npm you can use the following snippet to import the component into your project. Otherwise, if you installed the UIKit as a <script> you can ignore this section.

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

Examples

Typically the component does not need any configuration and can be added to your page like this.

<wy-messenger></wy-messenger>

You can also use JavaScript to create the component and add it you your page.

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

HTML attributes

Attributes can be set when using the component in HTML. All attributes have corresponding Javascript properties.

Most attributes are optional and/or has sensible default values. Any required attributes are indicated with an asterisk (*).

Learn more about attributes and properties.

Attribute	Value	Description
`agent`	`string`	Enables agent mode. See AI agents for details.
`annotations`	`"buttons-inline", "none"`	Set the appearance of annotations. Defaults to `"buttons-inline"`.
`contextualData`	`string`	Contextual data for agents to reference.
`conversationId`	`number`	Sets the selected conversation. This is handled automatically and there's normally no need to set this manually.
`enterToSend`	`"never", "modifier", "auto", "always"`	Sets whether to use enter to send in the editor. Modifier is enter combined with `Ctrl` or `Cmd`. Defaults to `"auto"`.
`features`	`string`	Explicit space separated list of enabled features. All default features are enabled when this property is not defined.
`placeholder`	`string`	Placeholder text for the editor. Overrides default text.
`reactions`	`string`	Space separated string of unicode emojis to use for reactions. Defaults to reactions from the `Weavy` instance or `<wy-context>`.

JavaScript properties

Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.

Property	Type	Default	Description
`annotations`	`"buttons-inline", "none"`	`"buttons-inline"`	Appearance of annotations.
`agent`	`string`		Agent uid that enables agent mode. When set, conversations are limited to the agent chat. See AI agents for details.
`appTypes`	`AppTypeGuid[]`	`[AppTypeGuid.ChatRoom, AppTypeGuid.PrivateChat]`	Conversation types included in the messenger list. Automatically changed when agent mode is enabled.
`conversationId`	`number, null`	`null`	Active conversation id.
`contextualData`	`string`		Contextual data for agents to reference. Provide descriptive data for optimal results. ### Examples
`enterToSend`	`"never", "modifier", "auto", "always"`	`"auto"`	Enter-to-send keymap in the editor. `"modifier"` is `Enter` combined with `Ctrl` or `Cmd`.
`features`	`string`		Config for only enabling specific features in the weavy component.
`link`	`LinkType`		Any provided link that should be loaded, shown and highlighted.
`placeholder`	`string`		Placeholder text for the message editor.
`reactions`	`string`	`"😍 😎 😉 😜 👍"`	A space separated string of available reaction emojis in unicode.
`unread`	`number`	(readonly)	Current unread conversation count.

JavaScript methods

Methods for the component are available in JavaScript. Methods that are async return a promise.

Method	Returns	Description
`createConversation(members?: MemberIdType[])`	async `AppType`	Creates a new conversation with the given members. When in agent mode, the members array is ignored.
`selectMembers()`	async `MemberIdType[]`	Opens the select member dialog to let the user select members for creating a conversation.
`reset()`		Sets the component to it's initial state and resets the `app` state.
`subscribe(subscribe: boolean)`	async	Subscribes or unsubscribes to notification updates from the app. Check `.app.is_subscribed` to see current state.
`whenApp()`	async `AppType`	Waits for `app` data and returns the data when available.

DOM Events

The component triggers custom events that bubbles up the DOM tree. They can be listened to using the addEventListener() method.

Learn more about events.

Event	Type	Description
`wy-action`	`WyActionEventType`	Emitted when a conversation is created or an action is performed on a conversation.
`wy-unread`	`WyUnreadEventType`	Emitted when the number of unread conversations in the Messenger changes.
`wy-preview-open`	`WyPreviewOpenEventType`	Emitted when preview is about to be opened. The event may be prevented.
`wy-preview-close`	`WyPreviewCloseEventType`	Emitted when preview is closed.

Slots

The slots can be used to inject elements into the component. All predefined child nodes of the slot will be replaced with the injected content.

Slot	Description
`header`	Header content rendered above the conversation list.
`actions`	Action buttons for the conversation list toolbar.
`conversation-new`	Custom content for the new-conversation action.

To prevent child nodes from rendering before the component has loaded you can hide them using CSS.

/* Hide slotted elements before the component is registered. */
wy-messenger:not(:defined) {
  display: none;
}

To hide the conversation-new button, you can use the wy-conversation-new-button CSS shadow part.

/* Hide the new conversation button */
::part(wy-conversation-new-button) {
  display: none;
}

Available features

The following features are available for the component. Configure them with a space separated list using the features attribute. All features are enabled by default.

Learn more about features.

Feature	Description
`attachments`	Possibility to upload local files.
`cloud_files`	Cloud file picker (Google Drive, Dropbox etc.).
`context_data`	Possibility to upload contextual data.
`embeds`	Creating embeds from urls in editor text.
`google_meet`	Google Meet video meetings.
`meetings`	General availability for meetings. This can be ignored if using all individual meeting feature flags, i.e. `google_meet`, `microsoft_teams` and `zoom_meetings`.
`mentions`	Possibility to mention other people from the current directory in the editor.
`microsoft_teams`	Microsoft Teams video meetings.
`polls`	Possibility to create polls in editor.
`previews`	Previews of files and attachments.
`reactions`	Possibility to add emoji reactions to a message, post or comment.
`receipts`	Read receipts on messages.
`typing`	Typing indicators in the chat when other people types.
`zoom_meetings`	Zoom video meetings.

Type maps

Type Maps can be imported and used to check messenger types against app data. They contain the app types for messenger conversations. Use them to check if a conversation belongs to messenger.

Name	Type	Description
`MessengerTypes`	`Map`	Map of app guid to app string types for messenger conversations. Includes reverse mapping.
`MessengerAgentTypes`	`Map`	Map of app guid to app string types for messenger agent conversations. Includes reverse mapping.