feat(chat): expose message template

Author: teodosiah

src/components/chat/chat-message.ts

@@ -41,15 +41,18 @@ export default class IgcChatMessageComponent extends LitElement {
     return html`
       <div class=${containerClass}>
         <div class="bubble">
-          ${this.message?.text.trim()
-            ? html`<div>${renderMarkdown(this.message?.text)}</div>`
-            : nothing}
-          ${this.message?.attachments && this.message?.attachments.length > 0
-            ? html`<igc-message-attachments
-                .attachments=${this.message?.attachments}
-              >
-              </igc-message-attachments>`
-            : nothing}
+          ${this._chatState?.options?.templates?.messageTemplate && this.message
+            ? this._chatState.options.templates.messageTemplate(this.message)
+            : html` ${this.message?.text.trim()
+                ? html`<div>${renderMarkdown(this.message?.text)}</div>`
+                : nothing}
+              ${this.message?.attachments &&
+              this.message?.attachments.length > 0
+                ? html`<igc-message-attachments
+                    .attachments=${this.message?.attachments}
+                  >
+                  </igc-message-attachments>`
+                : nothing}`}
           ${this._chatState?.options?.templates?.messageActionsTemplate &&
           this.message
             ? this._chatState.options.templates.messageActionsTemplate(

src/components/chat/chat.spec.ts

@@ -17,6 +17,14 @@ describe('Chat', () => {
   });
 
   const createChatComponent = () => html`<igc-chat></igc-chat>`;
+
+  const messageTemplate = (msg: any) => {
+    return html`<div>
+      <h5>${msg.sender === 'user' ? 'You' : 'Bot'}:</h5>
+      <p>${msg.text}</p>
+    </div> `;
+  };
+
   const messageActionsTemplate = (msg: any) => {
     return msg.sender !== 'user' && msg.text.trim()
       ? html`<div style="float: right">
@@ -770,6 +778,32 @@ describe('Chat', () => {
       });
     });
 
+    it('should render messageTemplate', async () => {
+      chat.options = {
+        templates: {
+          messageTemplate: messageTemplate,
+        },
+      };
+      await elementUpdated(chat);
+      await aTimeout(500);
+      const messageElements = chat.shadowRoot
+        ?.querySelector('igc-chat-message-list')
+        ?.shadowRoot?.querySelector('.message-list')
+        ?.querySelectorAll('igc-chat-message');
+      messageElements?.forEach((messageElement, index) => {
+        const messsageContainer =
+          messageElement.shadowRoot?.querySelector('.bubble');
+        expect(messsageContainer).dom.to.equal(
+          `<div class="bubble">
+                <div>
+                    <h5>${chat.messages[index].sender === 'user' ? 'You' : 'Bot'}: </h5>
+                    <p>${(messsageContainer?.querySelector('p') as HTMLElement)?.innerText}</p>
+                </div>
+            </div>`
+        );
+      });
+    });
+
     it('should render messageActionsTemplate', async () => {
       chat.options = {
         templates: {

src/components/chat/types.ts

@@ -22,7 +22,7 @@ export interface IgcMessageAttachment {
 export type AttachmentTemplate = (
   attachments: IgcMessageAttachment[]
 ) => TemplateResult;
-export type MessageActionsTemplate = (message: IgcMessage) => TemplateResult;
+export type MessageTemplate = (message: IgcMessage) => TemplateResult;
 
 export type IgcChatOptions = {
   currentUserId?: string;
@@ -47,7 +47,8 @@ export type IgcChatTemplates = {
   attachmentHeaderTemplate?: AttachmentTemplate;
   attachmentActionsTemplate?: AttachmentTemplate;
   attachmentContentTemplate?: AttachmentTemplate;
-  messageActionsTemplate?: MessageActionsTemplate;
+  messageTemplate?: MessageTemplate;
+  messageActionsTemplate?: MessageTemplate;
   composingIndicatorTemplate?: TemplateResult;
 };
 

stories/chat.stories.ts

@@ -431,7 +431,7 @@ async function handleAIMessageSend(e: CustomEvent) {
     };
 
     userMessages.push({
-      role: chat.currentUserId,
+      role: 'user',
       parts: [{ text: newMessage.text }],
     });
 
@@ -442,7 +442,7 @@ async function handleAIMessageSend(e: CustomEvent) {
             await attachment.file.arrayBuffer(),
             attachment.file.type
           );
-          userMessages.push({ role: chat.currentUserId, parts: [filePart] });
+          userMessages.push({ role: 'user', parts: [filePart] });
         }
       }
     }