feat(chat): add default suggestions header and reaction tooltips

Author: igdmdimitrov

src/components/chat/chat-message.ts

@@ -13,12 +13,15 @@ import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
 import { all } from './themes/message.js';
 import { styles as shared } from './themes/shared/chat-message/chat-message.common.css.js';
+import '../tooltip/tooltip.js';
+import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
+import IgcTooltipComponent from '../tooltip/tooltip.js';
 import {
-  copyIcon,
+  thumbDownIcon as badResponseIcon,
+  copyIcon as copyResponseIcon,
+  thumbUpIcon as goodResponseIcon,
   type IgcMessage,
-  regenerateIcon,
-  thumbDownIcon,
-  thumbUpIcon,
+  regenerateIcon as redoIcon,
 } from './types.js';
 
 /**
@@ -55,7 +58,8 @@ export default class IgcChatMessageComponent extends LitElement {
     registerComponent(
       IgcChatMessageComponent,
       IgcMessageAttachmentsComponent,
-      IgcAvatarComponent
+      IgcAvatarComponent,
+      IgcTooltipComponent
     );
   }
 
@@ -72,6 +76,10 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ attribute: false })
   public message: IgcMessage | undefined;
 
+  /** The resource strings. */
+  @property({ attribute: false })
+  public resourceStrings = IgcChatResourceStringEN;
+
   /**
    * Sanitizes message text to prevent XSS or invalid HTML.
    * @param text The raw message text
@@ -85,10 +93,10 @@ export default class IgcChatMessageComponent extends LitElement {
   constructor() {
     super();
     addThemingController(this, all);
-    registerIconFromText('copy', copyIcon, 'material');
-    registerIconFromText('thumb_up', thumbUpIcon, 'material');
-    registerIconFromText('thumb_down', thumbDownIcon, 'material');
-    registerIconFromText('regenerate', regenerateIcon, 'material');
+    registerIconFromText('copy-response', copyResponseIcon, 'material');
+    registerIconFromText('good-response', goodResponseIcon, 'material');
+    registerIconFromText('bad-response', badResponseIcon, 'material');
+    registerIconFromText('redo', redoIcon, 'material');
   }
 
   private get defaultMessageActionsTemplate() {
@@ -98,29 +106,45 @@ export default class IgcChatMessageComponent extends LitElement {
       (!isLastMessage || !this._chatState?.options?.isTyping)
       ? html`<div part="message-actions">
           <igc-icon-button
-            name="copy"
+            id="copy-response-button"
+            name="copy-response"
             collection="material"
             variant="flat"
             @click=${this.handleMessageActionClick}
           ></igc-icon-button>
+          <igc-tooltip anchor="copy-response-button" hide-delay="0">
+            ${this.resourceStrings.reactionCopyResponse}
+          </igc-tooltip>
           <igc-icon-button
-            name="thumb_up"
+            id="good-response-button"
+            name="good-response"
             collection="material"
             variant="flat"
             @click=${this.handleMessageActionClick}
           ></igc-icon-button>
+          <igc-tooltip anchor="good-response-button" hide-delay="0">
+            ${this.resourceStrings.reactionGoodResponse}
+          </igc-tooltip>
           <igc-icon-button
-            name="thumb_down"
+            id="bad-response-button"
+            name="bad-response"
             variant="flat"
             collection="material"
             @click=${this.handleMessageActionClick}
           ></igc-icon-button>
+          <igc-tooltip anchor="bad-response-button" hide-delay="0">
+            ${this.resourceStrings.reactionBadResponse}
+          </igc-tooltip>
           <igc-icon-button
-            name="regenerate"
+            id="redo-button"
+            name="redo"
             variant="flat"
             collection="material"
             @click=${this.handleMessageActionClick}
           ></igc-icon-button>
+          <igc-tooltip anchor="redo-button" hide-delay="0">
+            ${this.resourceStrings.reactionRedo}
+          </igc-tooltip>
         </div>`
       : nothing;
   }

src/components/chat/chat.ts

@@ -7,6 +7,7 @@ import { chatContext } from '../common/context.js';
 import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { watch } from '../common/decorators/watch.js';
 import { registerComponent } from '../common/definitions/register.js';
+import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
 import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import IgcIconComponent from '../icon/icon.js';
@@ -253,6 +254,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
     return this._chatState.options;
   }
 
+  /** The resource strings. */
+  @property({ attribute: false })
+  public resourceStrings = IgcChatResourceStringEN;
+
   /** Returns the default attachments element. */
   public get defaultAttachments(): TemplateResult {
     return this._chatInput.defaultAttachmentsArea;
@@ -331,7 +336,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
       role="list"
       aria-label="Suggestions"
     >
-      <igc-list-header part="suggestions-header" ?hidden=${!hasContent}>
+      <igc-list-header part="suggestions-header">
+        <span ?hidden=${hasContent}
+          >${this.resourceStrings.suggestionsHeader}</span
+        >
         <slot name="suggestions-header"></slot>
       </igc-list-header>
       <slot name="suggestions" part="suggestions">

src/components/common/i18n/chat.resources.ts

@@ -0,0 +1,16 @@
+/* blazorSuppress */
+export interface IgcChatResourceStrings {
+  suggestionsHeader: string;
+  reactionCopyResponse: string;
+  reactionGoodResponse: string;
+  reactionBadResponse: string;
+  reactionRedo: string;
+}
+
+export const IgcChatResourceStringEN: IgcChatResourceStrings = {
+  suggestionsHeader: 'Suggestions',
+  reactionCopyResponse: 'Copy Response',
+  reactionGoodResponse: 'Good Response',
+  reactionBadResponse: 'Bad Response',
+  reactionRedo: 'Redo',
+};

src/index.ts

@@ -89,6 +89,10 @@ export {
   IgcCalendarResourceStringEN,
   type IgcCalendarResourceStrings,
 } from './components/common/i18n/calendar.resources.js';
+export {
+  IgcChatResourceStringEN,
+  type IgcChatResourceStrings,
+} from './components/common/i18n/chat.resources.js';
 
 // Event maps
 export type { IgcBannerComponentEventMap } from './components/banner/banner.js';