Create new conversation component for Messenger
<wy-messenger-new> | WyMessengerNew
Weavy messenger component to render a create conversation button with dialogs.
When a conversation is created, the component fires a "wy-action" event with the action type "select" and details about the conversation.
Component layout
The button is displayed as a clickable icon that acts as a button. The default size of the button is the icon size 1.5rem/24px together with the set --wy-padding (which defaults to 0.5rem/8px) on every side of the icon, which makes a total of 2.5rem/40px per default.
The select member dialog renders in a modal overlay centered in the top layer. That means that the dialog does not occupy any visual layout space where it's placed in the DOM, it only renders in the top layer.
You can add additional styling using CSS Custom Properties and CSS Shadow Parts and further customization using slots.
Importing
If you added the UIKit with npm you can use the the following snippet to import the component into your project.
import { WyMessengerNew } from "@weavy/uikit-web";
Examples
Inline new conversation button in a text
Display an icon button that opens a dialog to select users for a new conversation.
<div>Create conversation <wy-messenger-new></wy-messenger-new></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.
| Attribute | Value | Description |
|---|---|---|
overlay |
"modal", "drawer", "sheet", "full", "none" |
Overlay appearance used for the create conversation dialog. |
JavaScript properties
Properties can be used in JavaScript. Some of them have corresponding HTML attributes where applicable.
| Property | Type | Default | Description |
|---|---|---|---|
features |
string |
Config for only enabling specific features in the weavy component. | |
overlay |
"modal", "drawer", "sheet", "full", "none" |
"modal" |
Overlay appearance used for the create conversation modal. |
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. |
selectMembers() |
async MemberIdType[] |
Opens the select member dialog to let the user select members for creating a conversation. |
whenReady() |
async | Resolves when the component has rendered the first time. |
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.
| Name | Type | Description |
|---|---|---|
wy-action |
WyActionEventType |
Emitted when a conversation app is created and should be selected. |