Salesforce Einstein Bot: LWC Custom UI Implementation (2026)

import { LightningElement, api, wire } from ‘lwc’;import getMetadata from ‘@salesforce/apex/BotCustomUIController.getCustomMetadataByPrefix’;/**

* Utility function to convert plain text into rich text HTML.

* Handles line breaks and ensures content is safe for rendering.

*/const textToRichText = (text) => {

   if (!text) return ”;

   // Convert simple line breaks to HTML <br/> tags

   let richText = text.replace(/\n/g, ‘<br/>’);

   return richText;

};export default class ChatMessage extends LightningElement {

   @api message = {};

   @api messageContent = {};

   @api messageStyle = ‘text’;

   @api messageType = ‘text’;

   richContent = ”;

   contentId = ”;

   prefix = ”;

   isYoutube = false;

   isMap = false;

   @wire(getMetadata, { prefix: ‘$prefix’ })

   wiredMetadata({ error, data }) {

       if (data && this.richContent) {

           const metadataLink = data.Url__c;

           this.richContent = this.richContent.replace(‘<AGENTFORCE_LINK>’, metadataLink);

       } else if (error) {

           console.error(‘Error retrieving metadata:’, error);

       }

   }

   connectedCallback() {

       const rawText = this.messageContent.value;

       if (!rawText) return;

       const parts = rawText.split(‘:’, 2);

       this.prefix = parts[0].toUpperCase().trim();

       let contentValue = parts.length > 1 ? parts[1].trim() : rawText;

       switch (this.prefix) {

           case ‘YOUTUBE’:

               this.isYoutube = true;

               this.contentId = contentValue;

               break;

           case ‘MAP’:

               this.isMap = true;

               this.contentId = contentValue;

               break;

           default:

               this.richContent = textToRichText(contentValue);

               break;

       }

   }

}