feat(chat): add support for custom markdown renderer

Author: igdmdimitrov

src/components/chat/chat-message.ts

@@ -45,14 +45,16 @@ export default class IgcChatMessageComponent extends LitElement {
     const sanitizedMessageText = this.sanitizeMessageText(
       this.message?.text.trim() || ''
     );
+    const renderer =
+      this._chatState?.options?.markdownRenderer || renderMarkdown;
 
     return html`
       <div class=${containerClass}>
         <div class="bubble">
           ${this._chatState?.options?.templates?.messageTemplate && this.message
             ? this._chatState.options.templates.messageTemplate(this.message)
             : html` ${sanitizedMessageText
-                ? html`<div>${renderMarkdown(sanitizedMessageText)}</div>`
+                ? html`<div>${renderer(sanitizedMessageText)}</div>`
                 : nothing}
               ${this.message?.attachments &&
               this.message?.attachments.length > 0

src/components/chat/types.ts

@@ -23,6 +23,7 @@ export type AttachmentTemplate = (
   attachments: IgcMessageAttachment[]
 ) => TemplateResult;
 export type MessageTemplate = (message: IgcMessage) => TemplateResult;
+export type MarkdownRenderer = (text: string) => TemplateResult;
 
 export type IgcChatOptions = {
   currentUserId?: string;
@@ -40,6 +41,7 @@ export type IgcChatOptions = {
   headerText?: string;
   suggestions?: string[];
   templates?: IgcChatTemplates;
+  markdownRenderer?: MarkdownRenderer;
 };
 
 export type IgcChatTemplates = {

stories/chat.stories.ts

@@ -106,6 +106,8 @@ const messageActionsTemplate = (msg: any) => {
 };
 
 const _composingIndicatorTemplate = html`<span>LOADING...</span>`;
+const _customRenderer = (text: string) =>
+  html`<span>${text.toUpperCase()}</span>`;
 
 const ai_chat_options = {
   headerText: 'Chat',
@@ -114,6 +116,7 @@ const ai_chat_options = {
     messageActionsTemplate: messageActionsTemplate,
     //composingIndicatorTemplate: _composingIndicatorTemplate,
   },
+  // markdownRenderer: _customRenderer
 };
 
 const chat_options = {