How to intercept/modify chat message in Salesforce Embedded Service Deployment Chat?

HTML:
<template>
<div class={messageStyle}>
<lightning-formatted-rich-text
value={messageText}>
</lightning-formatted-rich-text>
</div>
</template>
JavaScript:
import BaseChatMessage from 'lightningsnapin/baseChatMessage';
const CHAT_CONTENT_CLASS = 'chat-content';
const AGENT_USER_TYPE = 'agent';
const CHASITOR_USER_TYPE = 'chasitor';
const SUPPORTED_USER_TYPES = [ AGENT_USER_TYPE, CHASITOR_USER_TYPE ];
export default class EmbeddedServiceChatMessage extends BaseChatMessage {messageStyle;
messageText;
isSupportedUserType( userType ) {return SUPPORTED_USER_TYPES.some( ( supportedUserType ) => supportedUserType === userType );}connectedCallback() {

console.log( 'messageContent value is ' + this.messageContent.value );
console.log( 'User Type is ' + this.userType );
if ( this.isSupportedUserType( this.userType ) ) {

this.messageStyle = `${CHAT_CONTENT_CLASS} ${this.userType}`;
if ( this.messageContent.value == 'test' ) {

this.messageText = 'Entered test for testing';

} else {
this.messageText = this.messageContent.value;

}
}}}js-meta.xml:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>52.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningSnapin__ChatMessage</target>
</targets>
</LightningComponentBundle>
CSS:
.chat-content {
position: relative;
font-weight: 400;
line-height: 1.3;
max-width: 70%;
padding: 10px;
font-size: 0.875em;
border-radius: 10px 10px 0;
float: right;
margin-left: 40px;
white-space: pre-wrap;
text-align: left;
}
.agent.chat-content {
color: green;
background: lightgrey;
border-radius: 10px 10px 10px 0;
float: left;
}
.chasitor.chat-content {
background: yellow;
color: blueviolet;
margin-left: auto;
}

--

--

--

Technical Blogger, Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A Guide To Prototype-Based Class Inheritance In JavaScript

How to Access React Environment Variables on Netlify

Values, Data Types and some operators

Singly Linked List

JavaScript callback functions

HTML Quick Notes

My Minimal Express Backend with Babel Setup

Getting Started with Gatsby and Cockpit — Part 2 of 2

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
InfallibleTechie

InfallibleTechie

Technical Blogger, Software Engineer

More from Medium

Stader Labs Deep Dive Essay

Introduction

Adding a feature to La Villette app

Sororities- Defying Hazing Stereotypes with Heather Saxe