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);
Properties
| Property | Type | Description |
|---|---|---|
agent |
string |
Enables agent mode. See AI agents for details. |
conversationId |
number |
Sets the selected conversation. This is handled automatically and there's normally no need to set this manually. |
data |
string[] |
Array with any contextual data. The data is uploaded upon change. Note: Only the first item in the array is currently used. |
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>. |
Learn more about attributes and properties.
Available 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. |
Events
| Name | Type | Description |
|---|---|---|
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 |
Learn more about events.
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. |
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.
actions- Floating buttons placed in the top right.conversation-new- The button for creating a new conversation. Replaces the button..
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;
}
Methods
The component exposes the following methods.
createConversation()
Lets the user create a new conversation. Behaves the same as clicking the new conversation button. Can be used together with an external or custom button.
An array of member uids can be passed to the function to bypass the user select dialog.
Parameters
members?: (string | number)[]
Optional array of user uids. Skips the user select dialog when provided.
clearConversation()
Deselects any active conversation.
Deprecated: Use .conversationId = null; instead.
conversationBelongsToMessenger()
Checks if a conversation belongs to Messenger.
Deprecated: Use MessengerTypes.has(app.type) instead.
Parameters
conversation: (number | AppRef | AppType)
The conversation or id to check if it belongs to Messenger.
Returns
Promise<Boolean>
selectConversation()
Set the active conversation.
Deprecated: Use .conversationId = id; instead.
Parameters
id: number
The id of the conversation to select.
Returns
Promise<Boolean>