Chat component

The chat component renders a complete and functional user interface for a contextual Weavy Chat app.

Element: <wy-chat>
Class: WyChat

Usage

First import and configure Weavy and the WyChat component.

import { Weavy, WyChat } 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-chat> component to your HTML. Since it is a contextual app you must specify the uid property. The corresponding app will be created automatically on the server when a new uid is defined.

You can also adjust permissions and details for the app with the Apps API.

<wy-chat uid="my-chat-1"></wy-chat>

Note: The unique ids (uid) used when creating apps, users etc. is something you decide what it should be. Since the apps are contextual, the uid is often related to the context it's in. For example "product-123-chat", "customer-2-files etc".

Properties

Property Type Default Description
uid string Unique identifier for the Chat app to load .
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. Each feature can also be disabled in the client using boolean attributes/properties.

Property Description
noAttachments Disable the possibility to upload local attachments.
noCloudFiles Disable the cloud file picker (Google Drive, Dropbox etc).
noMeetings Disable Zoom meetings
noMentions Disable the possibility to mention other people in the directory.
noPolls Disable possibility to create a poll.
noPreviews Disable previews of files.
noReactions Disable the possibility to add emoji reactions to a message.

Example: Render a chat component with the reactions feature disabled.

const chat = new WyChat();
chat.noReactions = true;

document.body.append(chat);

Events

The WyChat component emits the following events.

Event Detail Description
wy:message_created { message: MessageType } New message created.
wy:reaction_added { reaction: string, entity: EntityType } Message reaction added.
wy:reaction_removed { reaction: string, entity: EntityType } Message reaction removed.
wy:app_updated { app: AppType } Chat details updated.
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.