1. Reference
2. UIKit
3. Messenger

Messenger component

<wy-messenger> | WyMessenger

The Weavy Messenger component renders a full featured chat interface for private messaging, chat rooms, or AI agent conversations.

It displays a list of all conversations with possibility to pin, star and mark conversations as read. Each conversation item displays an avatar, the participants or the room name as title, a line with the latest message. It also indicates if the conversation is read/unread and if anyone in the conversation is typing.

The list has a search in the top and can open a modal for creating new conversations where the user can search for other people or agents to create private chats or chat rooms.

When a user clicks a conversation item, the conversation is loaded. The conversation can show rich messages with markdown formatting including code syntax highlight. Messages can have uploaded images, attached files and cloud files with full browser preview of 100+ formats. Polls, video meetings, rich link embeds, tags and mentions can be used in messages. Users can react with predefined emojis to each message.

Read receipts indicate which messages that has been sent and read. The online presence for users is indicated both in the conversation list as well as in the conversation.

Typing indicators are shown when other users are typing in a conversation.

New messages are indicated as new when received.

For chat rooms, the name and avatar for the chat room can be edited. Members can be added or removed from the chat room.

The editor features markdown preview, including code syntax highlighting. It has buttons for adding polls, video meetings, images, files and cloud files. Mentions brings up a user selector. Drafts are automatically saved for each conversation.

The Messenger can optionally be configured in agent mode, by defining the agent property, to only show conversations with a given AI agent. In agent mode, the create conversation button instantly creates a new conversation with the agent when clicked, instead of opening a create conversation modal.

Complement this with the <wy-notification-toasts> component to also get realtime in-app notifications or browser notifications when new messages arrive.

Component layout

The layout depends on the width of its container, which has a breakpoint at 768px.

• 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.

The component is block-level with pre-defined CSS styling to adapt to flex- and grid-layouts as well as traditional flow-layouts. It's usually recommended to use a proper flex-layout for the container you are placing the component in for a smooth layout integration.

The content within the components is per default aligned to the edges of it's own box and designed to not be placed next to a edge or border. It's recommended to adjust the layout with your default padding. Setting the --wy-padding-outer to your default padding will allow the component to still fill the are where it's placed, but with proper padding within the scrollable area of the component. If you want to make the component go all the way to the edges without padding or any outermost roundness instead, set --wy-padding-outer: 0; and --wy-border-radius-outer: 0; to make the component fit nicely with the edge.

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

Standard Messenger

A messenger placed in a container using a flex layout.

<div style="display: flex; height: 100%;">
  <wy-messenger></wy-messenger>
</div>

Agent Messenger

Messenger in agent mode only using the built-in "assistant" agent. Using optional contextualData to connect content from the page with the agent.

<div id="my-sample-content">
  <h1>ACME</h1>
  <ul>
    <li>Wile E. Coyote</li>
    <li>Daffy Duck</li>
    <li>Porky Pig</li>
  </ul>
</div>
<wy-messenger agent="assistant"></wy-messenger>
<script>
  const myContent = document.querySelector("#my-sample-content");
  const messenger = document.querySelector("wy-messenger");
  messenger.instructions = "Answer in a whacky way with many emojis.";
  messenger.contextualData = myContent.innerHTML;
</script>

Messenger adapting to edges

Messenger that adapts to fit nicely with the edges of a panel.

<style>
  .messenger-panel {
    display: flex;
    height: 100%;
    width: 32rem;
    border: 1px solid gray;
    --wy-padding-outer: 0;
    --wy-border-radius-outer: 0;
  }
</style>
<div class="messenger-panel">
  <wy-messenger></wy-messenger>
</div>

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.

JavaScript properties

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

JavaScript methods

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

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.

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.

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.

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.