feat(chat): add template for message author

Author: igdmdimitrov

src/components/chat/chat-state.ts

@@ -80,6 +80,7 @@ export class ChatState {
       this.renderDefaultAttachmentHeader(att, msg),
     attachmentContentTemplate: (att: IgcMessageAttachment) =>
       this.renderDefaultAttachmentContent(att),
+    messageAuthorTemplate: () => {},
     messageTemplate: (
       m: IgcMessage,
       ctx: { textContent: unknown; templates: Partial<IgcChatTemplates> }
@@ -226,6 +227,7 @@ export class ChatState {
   ) => {
     const templates = { ...this._defaultTemplates, ...ctx.templates };
     return html`
+      ${templates.messageAuthorTemplate(m) ?? nothing}
       ${ctx?.textContent ?? m.text}
       ${m.attachments?.length
         ? html`<igc-message-attachments .message=${m}>

src/components/chat/chat.spec.ts

@@ -36,6 +36,10 @@ describe('Chat', () => {
 
   const createChatComponent = () => html`<igc-chat></igc-chat>`;
 
+  const messageAuthorTemplate = (msg: any) => {
+    return msg.sender !== 'user' ? html`<span>AI Assistant</span>` : html``;
+  };
+
   const messageTemplate = (msg: any) => {
     return html`<div>
       <h5>${msg.sender === 'user' ? 'You' : 'Bot'}:</h5>
@@ -1123,6 +1127,39 @@ describe('Chat', () => {
         draftMessage.text
       );
     });
+
+    it.only('should render messageAuthorTemplate', async () => {
+      chat.options = {
+        templates: {
+          messageAuthorTemplate: messageAuthorTemplate,
+        },
+      };
+      await elementUpdated(chat);
+      await aTimeout(500);
+
+      const messageElements = chat.shadowRoot
+        ?.querySelector('igc-chat-message-list')
+        ?.shadowRoot?.querySelectorAll('igc-chat-message');
+      expect(messageElements).not.to.be.undefined;
+      messageElements?.forEach((messageElement, index) => {
+        const isCurrentUser = chat.messages[index].sender === 'user';
+        const messsageContainer = messageElement.shadowRoot?.querySelector(
+          `div[part='message-container${isCurrentUser ? ' sent' : ''}']`
+        );
+        expect(messsageContainer).not.to.be.undefined;
+        expect(messsageContainer).dom.to.equal(
+          `<div part="message-container${isCurrentUser ? ' sent' : ''}">
+              ${!isCurrentUser ? '<span>AI Assistant</span>' : ''}
+              <pre part="plain-text">
+                ${chat.messages[index].text}
+              </pre>
+              <igc-message-attachments>
+              </igc-message-attachments>
+              ${!isCurrentUser ? messageReactions : ''}
+            </div>`
+        );
+      });
+    });
   });
 
   describe('Interactions', () => {

src/components/chat/types.ts

@@ -188,6 +188,12 @@ export type IgcChatTemplates = {
    */
   attachmentContentTemplate?: (attachment: IgcMessageAttachment) => unknown;
 
+  /**
+   * Template for rendering an information about the author of a single chat message.
+   * Use this to customize message layout, formatting, or metadata.
+   */
+  messageAuthorTemplate?: (message: IgcMessage) => unknown;
+
   /**
    * Template for rendering a single chat message.
    * Use this to customize message layout, formatting, or metadata.

stories/chat.stories.ts

@@ -102,6 +102,24 @@ const userMessages: any[] = [];
 
 let isResponseSent: boolean;
 
+const _messageAuthorTemplate = (msg: any) => {
+  return msg.sender !== 'user'
+    ? html`
+        <div>
+          <igc-avatar
+            shape="circle"
+            src="https://www.infragistics.com/angular-demos/assets/images/men/1.jpg"
+            style="position: relative;"
+          >
+          </igc-avatar>
+          <span
+            style="color: #c00000; font-weight: bold; position: absolute; margin: 8px"
+            >AI Assistant</span
+          >
+        </div>
+      `
+    : html``;
+};
 const _messageActionsTemplate = (msg: any) => {
   return msg.sender !== 'user' && msg.text.trim()
     ? isResponseSent !== false
@@ -521,6 +539,7 @@ export const Chat_Templates: Story = {
         inputPlaceholder: 'Type your message here...',
         suggestions: ['Hello', 'Hi', 'Generate an image!'],
         templates: {
+          messageAuthorTemplate: _messageAuthorTemplate,
           messageActionsTemplate: _messageActionsTemplate,
           textAreaAttachmentsTemplate: _textAreaAttachmentsTemplate,
           textAreaActionsTemplate: actionsTemplate,