Chat component

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

Element: <wy-chat>
Class: WyChat

Initialize app

Before the <wy-chat> component can be loaded, a Chat app with the corresponding uid must first be created in the Weavy environment. This is typically something you do in your server-side code before rendering the page. Here's what it would look like using curl.

curl https://{WEAVY-SERVER}/api/apps/init 
-H "Authorization: Bearer {API-KEY}"
--json "{ 'app': { 'uid': 'my-chat-1', 'type': 'chat', 'name': 'My Chat' }, 'user': { 'uid': 'user-1' } }"

The code above creates a new Chat app in Weavy (if it doesn't already exist). The uid is set to my-chat-1 which is the same uid you'll use when adding the <wy-chat> component to your HTML.

Additionally the user with uid=user-1 is added as a member (the user passed in is usually the authenticated user in your application).

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.

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.

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

Properties

Property Type Default Description
uid string Unique identifier for the Chat app to load
features FeaturesConfigType {} Overrides the default features available for the product

The available features are controlled by your product license. The features config is opt-out, meaning you can disable available features, but never enable features that are not included in your license.

Feature Description
attachments Disable the possibility to upload local attachments
cloudFiles Disable the cloud file picker (Google Drive, Dropbox etc.)
meetings Disable Zoom meetings
mentions Disable the possibility to mention other people in the directory
previews Disable previews of files
reactions Disable the possibility to add emoji reactions to a message. Setting this to false will only enable the thumbs up reaction
receipts Disable read receipts on a message
typing Disable the typing indicator in the chat when other people types

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

const chat = new WyChat();
chat.features = {
    reactions: false
};

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.
Weavy Docs