feat(chat): add template for message actions

igdmdimitrov · igdmdimitrov · commit 36a7a5ea883c · 2025-05-20T17:54:00.000+03:00
diff --git a/src/components/chat/chat-message-list.ts b/src/components/chat/chat-message-list.ts
@@ -4,7 +4,11 @@ import { repeat } from 'lit/directives/repeat.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcChatMessageComponent from './chat-message.js';
 import { styles } from './themes/message-list.base.css.js';
-import type { AttachmentTemplate, IgcMessage } from './types.js';
+import type {
+  AttachmentTemplate,
+  IgcMessage,
+  MessageActionsTemplate,
+} from './types.js';
 
 /**
  *
@@ -40,6 +44,9 @@ export default class IgcChatMessageListComponent extends LitElement {
   @property({ type: Function })
   public attachmentContentTemplate?: AttachmentTemplate;
 
+  @property({ type: Function })
+  public messageActionsTemplate?: MessageActionsTemplate;
+
   private formatDate(date: Date): string {
     const today = new Date();
     const yesterday = new Date(today);
@@ -121,6 +128,7 @@ export default class IgcChatMessageListComponent extends LitElement {
                     .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
                     .attachmentActionsTemplate=${this.attachmentActionsTemplate}
                     .attachmentContentTemplate=${this.attachmentContentTemplate}
+                    .messageActionsTemplate=${this.messageActionsTemplate}
                   ></igc-chat-message>
                 `
               )}
diff --git a/src/components/chat/chat-message.ts b/src/components/chat/chat-message.ts
@@ -5,7 +5,11 @@ import { registerComponent } from '../common/definitions/register.js';
 import { renderMarkdown } from './markdown-util.js';
 import { IgcMessageAttachmentsComponent } from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
-import type { AttachmentTemplate, IgcMessage } from './types.js';
+import type {
+  AttachmentTemplate,
+  IgcMessage,
+  MessageActionsTemplate,
+} from './types.js';
 
 /**
  *
@@ -45,6 +49,9 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ type: Function })
   public attachmentContentTemplate?: AttachmentTemplate;
 
+  @property({ type: Function })
+  public messageActionsTemplate?: MessageActionsTemplate;
+
   protected override render() {
     const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
 
@@ -64,6 +71,9 @@ export default class IgcChatMessageComponent extends LitElement {
               >
               </igc-message-attachments>`
             : ''}
+          ${this.messageActionsTemplate && this.message
+            ? this.messageActionsTemplate(this.message)
+            : ''}
         </div>
       </div>
     `;
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
@@ -11,6 +11,7 @@ import type {
   AttachmentTemplate,
   IgcMessage,
   IgcMessageAttachment,
+  MessageActionsTemplate,
 } from './types.js';
 
 export interface IgcChatComponentEventMap {
@@ -72,6 +73,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @property({ type: Function })
   public attachmentContentTemplate?: AttachmentTemplate;
 
+  @property({ type: Function })
+  public messageActionsTemplate?: MessageActionsTemplate;
+
   public override connectedCallback() {
     super.connectedCallback();
     this.addEventListener(
@@ -138,6 +142,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
           .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
           .attachmentActionsTemplate=${this.attachmentActionsTemplate}
           .attachmentContentTemplate=${this.attachmentContentTemplate}
+          .messageActionsTemplate=${this.messageActionsTemplate}
         >
         </igc-chat-message-list>
         <igc-chat-input
diff --git a/src/components/chat/types.ts b/src/components/chat/types.ts
@@ -18,9 +18,12 @@ export interface IgcMessageAttachment {
   size?: number;
   thumbnail?: string;
 }
+
 export type AttachmentTemplate = (
   attachments: IgcMessageAttachment[]
 ) => TemplateResult;
+export type MessageActionsTemplate = (message: IgcMessage) => TemplateResult;
+
 export const attachmentIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>';
 export const sendButtonIcon =
diff --git a/stories/chat.stories.ts b/stories/chat.stories.ts
@@ -1,8 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
-import { IgcChatComponent, defineComponents } from 'igniteui-webcomponents';
-import type { IgcMessageAttachment } from '../src/components/chat/types.js';
+import {
+  IgcChatComponent,
+  defineComponents,
+  registerIconFromText,
+} from 'igniteui-webcomponents';
+import type {
+  AttachmentTemplate,
+  IgcMessageAttachment,
+  MessageActionsTemplate,
+} from '../src/components/chat/types.js';
 
 defineComponents(IgcChatComponent);
 
@@ -53,6 +61,10 @@ const metadata: Meta<IgcChatComponent> = {
       type: 'AttachmentTemplate',
       control: 'AttachmentTemplate',
     },
+    messageActionsTemplate: {
+      type: 'MessageActionsTemplate',
+      control: 'MessageActionsTemplate',
+    },
   },
   args: {
     hideAvatar: false,
@@ -75,11 +87,23 @@ interface IgcChatArgs {
   attachmentHeaderTemplate: AttachmentTemplate;
   attachmentActionsTemplate: AttachmentTemplate;
   attachmentContentTemplate: AttachmentTemplate;
+  messageActionsTemplate: MessageActionsTemplate;
 }
 type Story = StoryObj<IgcChatArgs>;
 
 // endregion
 
+const thumbUpIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-120H280v-520l280-280 50 50q7 7 11.5 19t4.5 23v14l-44 174h258q32 0 56 24t24 56v80q0 7-2 15t-4 15L794-168q-9 20-30 34t-44 14Zm-360-80h360l120-280v-80H480l54-220-174 174v406Zm0-406v406-406Zm-80-34v80H160v360h120v80H80v-520h200Z"/></svg>';
+const thumbDownIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M240-840h440v520L400-40l-50-50q-7-7-11.5-19t-4.5-23v-14l44-174H120q-32 0-56-24t-24-56v-80q0-7 2-15t4-15l120-282q9-20 30-34t44-14Zm360 80H240L120-480v80h360l-54 220 174-174v-406Zm0 406v-406 406Zm80 34v-80h120v-360H680v-80h200v520H680Z"/></svg>';
+const regenerateIcon =
+  '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-160q-134 0-227-93t-93-227q0-134 93-227t227-93q69 0 132 28.5T720-690v-110h80v280H520v-80h168q-32-56-87.5-88T480-720q-100 0-170 70t-70 170q0 100 70 170t170 70q77 0 139-44t87-116h84q-28 106-114 173t-196 67Z"/></svg>';
+
+registerIconFromText('thumb_up', thumbUpIcon, 'material');
+registerIconFromText('thumb_down', thumbDownIcon, 'material');
+registerIconFromText('regenerate', regenerateIcon, 'material');
+
 let messages: any[] = [
   {
     id: '1',
@@ -89,6 +113,8 @@ let messages: any[] = [
   },
 ];
 
+let isResponseSent = false;
+
 function handleMessageSend(e: CustomEvent) {
   const newMessage = e.detail;
   messages.push(newMessage);
@@ -121,10 +147,12 @@ function handleMessageSend(e: CustomEvent) {
   };
   chat.messages = [...messages, emptyResponse];
 
+  isResponseSent = false;
   setTimeout(() => {
     const responseParts = generateAIResponse(e.detail.text).split(' ');
     showResponse(chat, responseParts).then(() => {
       messages = chat.messages;
+      isResponseSent = true;
       // TODO: add attachments (if any) to the response message
     });
   }, 1000);
@@ -196,6 +224,34 @@ export const Basic: Story = {
       .hideAvatar=${args.hideAvatar}
       .hideUserName=${args.hideUserName}
       @igcMessageSend=${handleMessageSend}
+      .messageActionsTemplate=${(msg) =>
+        msg.isResponse && msg.text.trim()
+          ? isResponseSent
+            ? html`
+                <div>
+                  <igc-icon-button
+                    name="thumb_up"
+                    collection="material"
+                    variant="flat"
+                    @click=${() => alert(`Liked·message:·${msg.text}`)}
+                  ></igc-icon-button>
+                  <igc-icon-button
+                    name="thumb_down"
+                    variant="flat"
+                    collection="material"
+                    @click=${() => alert(`Disliked·message:·${msg.text}`)}
+                  ></igc-icon-button>
+                  <igc-icon-button
+                    name="regenerate"
+                    variant="flat"
+                    collection="material"
+                    @click=${() =>
+                      alert(`Response·should·be·re-generated:·${msg.text}`)}
+                  ></igc-icon-button>
+                </div>
+              `
+            : ''
+          : ''}
     >
     </igc-chat>
   `,
