feat(chat): fixed reaction icons and suggestions generation in AI story

Author: igdmdimitrov

src/components/chat/chat-message.ts

@@ -6,22 +6,14 @@ import { addThemingController } from '../../theming/theming-controller.js';
 import IgcAvatarComponent from '../avatar/avatar.js';
 import { chatContext } from '../common/context.js';
 import { registerComponent } from '../common/definitions/register.js';
-import { registerIconFromText } from '../icon/icon.registry.js';
+import IgcTooltipComponent from '../tooltip/tooltip.js';
 import type { DefaultChatRenderer } from './chat-renderer.js';
 import type { ChatState } from './chat-state.js';
 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 IgcTooltipComponent from '../tooltip/tooltip.js';
-import {
-  thumbDownIcon as badResponseIcon,
-  copyIcon as copyResponseIcon,
-  thumbUpIcon as goodResponseIcon,
-  type IgcMessage,
-  regenerateIcon as redoIcon,
-} from './types.js';
+import type { IgcMessage } from './types.js';
 
 /**
  * A chat message component for displaying individual messages in `<igc-chat>`.
@@ -88,10 +80,6 @@ export default class IgcChatMessageComponent extends LitElement {
   constructor() {
     super();
     addThemingController(this, all);
-    registerIconFromText('copy-response', copyResponseIcon, 'material');
-    registerIconFromText('good-response', goodResponseIcon, 'material');
-    registerIconFromText('bad-response', badResponseIcon, 'material');
-    registerIconFromText('redo', redoIcon, 'material');
   }
 
   /**

src/components/chat/chat-state.ts

@@ -4,17 +4,22 @@ import { createRef, type Ref, ref } from 'lit/directives/ref.js';
 import { enterKey } from '../common/controllers/key-bindings.js';
 import { IgcChatResourceStringEN } from '../common/i18n/chat.resources.js';
 import { partMap } from '../common/part-map.js';
+import { registerIconFromText } from '../icon/icon.registry.js';
 import type IgcTextareaComponent from '../textarea/textarea.js';
 import type IgcTooltipComponent from '../tooltip/tooltip.js';
 import type IgcChatComponent from './chat.js';
 import type { IgcChatComponentEventMap } from './chat.js';
 import { DefaultChatRenderer } from './chat-renderer.js';
 import { PlainTextRenderer } from './plain-text-renderer.js';
-import type {
-  IgcChatOptions,
-  IgcChatTemplates,
-  IgcMessage,
-  IgcMessageAttachment,
+import {
+  copyIcon,
+  type IgcChatOptions,
+  type IgcChatTemplates,
+  type IgcMessage,
+  type IgcMessageAttachment,
+  regenerateIcon,
+  thumbDownIcon,
+  thumbUpIcon,
 } from './types.js';
 
 /**
@@ -328,7 +333,7 @@ export class ChatState {
                 'copy-response-button',
                 this.resourceStrings.reactionCopyResponse
               )}
-            name="copy"
+            name="copy-response"
             collection="material"
             variant="flat"
             @click=${(e: MouseEvent) =>
@@ -341,7 +346,7 @@ export class ChatState {
                 'good-response-button',
                 this.resourceStrings.reactionGoodResponse
               )}
-            name="thumb_up"
+            name="good-response"
             collection="material"
             variant="flat"
             @click=${(e: MouseEvent) =>
@@ -354,7 +359,7 @@ export class ChatState {
                 'bad-response-button',
                 this.resourceStrings.reactionBadResponse
               )}
-            name="thumb_down"
+            name="bad-response"
             variant="flat"
             collection="material"
             @click=${(e: MouseEvent) =>
@@ -367,7 +372,7 @@ export class ChatState {
                 'redo-button',
                 this.resourceStrings.reactionRedo
               )}
-            name="regenerate"
+            name="redo"
             variant="flat"
             collection="material"
             @click=${(e: MouseEvent) =>
@@ -424,6 +429,7 @@ export class ChatState {
   private showTooltip(elementId: string, text: string) {
     if (!this._sharedTooltip) return;
     this._sharedTooltip.message = text;
+    this._sharedTooltip.hideDelay = 300;
     this._sharedTooltip.show(elementId);
   }
 
@@ -591,6 +597,10 @@ export class ChatState {
    */
   constructor(chat: IgcChatComponent) {
     this._host = chat;
+    registerIconFromText('copy-response', copyIcon, 'material');
+    registerIconFromText('good-response', thumbUpIcon, 'material');
+    registerIconFromText('bad-response', thumbDownIcon, 'material');
+    registerIconFromText('redo', regenerateIcon, 'material');
   }
 
   //#region Event handlers

stories/chat.stories.ts

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
-
 import { GoogleGenAI, Modality } from '@google/genai';
 import {
   IgcChatComponent,
@@ -118,11 +117,11 @@ const _messageActionsTemplate = (msg: any) => {
     : html``;
 };
 
-const _typingIndicatorTemplate = html`<span>LOADING...</span>`;
-const _textInputTemplate = (text: string) =>
-  html`<igc-input placeholder="Type text here..." .value=${text}></igc-input>`;
-const _textAreaActionsTemplate = () =>
-  html`<igc-button @click=${handleCustomSendClick}>Send</igc-button>`;
+// const _typingIndicatorTemplate = html`<span>LOADING...</span>`;
+// const _textInputTemplate = (text: string) =>
+//   html`<igc-input placeholder="Type text here..." .value=${text}></igc-input>`;
+// const _textAreaActionsTemplate = () =>
+//   html`<igc-button @click=${handleCustomSendClick}>Send</igc-button>`;
 const _textAreaAttachmentsTemplate = (attachments: IgcMessageAttachment[]) => {
   return html`<div>
     ${attachments.map(
@@ -178,11 +177,11 @@ const chat_options = {
     // languages: ['typescript']
     // theme: 'github-dark'
   }),
-  templates: {
-    messageActionsTemplate: _messageActionsTemplate,
-    textAreaAttachmentsTemplate: _textAreaAttachmentsTemplate,
-    textAreaActionsTemplate: _textAreaActionsTemplate,
-  },
+  // templates: {
+  //   messageActionsTemplate: _messageActionsTemplate,
+  //   textAreaAttachmentsTemplate: _textAreaAttachmentsTemplate,
+  //   textAreaActionsTemplate: _textAreaActionsTemplate,
+  // },
 };
 
 function handleCustomSendClick() {
@@ -334,7 +333,6 @@ async function handleAIMessageSend(e: CustomEvent) {
 
   chat.options = { ...ai_chat_options, suggestions: [], isTyping: true };
   setTimeout(async () => {
-    chat.options = { ...ai_chat_options, suggestions: [], isTyping: false };
     let response: any;
     let responseText = '';
     const attachments: IgcMessageAttachment[] = [];
@@ -364,7 +362,7 @@ async function handleAIMessageSend(e: CustomEvent) {
 
     if (newMessage.text.includes('image')) {
       response = await ai.models.generateContent({
-        model: 'gemini-2.0-flash-preview-image-generation',
+        model: 'gemini-2.5-flash-preview-image-generation',
         contents: userMessages,
         config: {
           responseModalities: [Modality.TEXT, Modality.IMAGE],
@@ -401,11 +399,12 @@ async function handleAIMessageSend(e: CustomEvent) {
 
       botResponse.text = responseText;
       botResponse.attachments = attachments;
+      chat.options = { ...ai_chat_options, isTyping: false };
       chat.messages = [...chat.messages, botResponse];
     } else {
       chat.messages = [...chat.messages, botResponse];
       response = await ai.models.generateContentStream({
-        model: 'gemini-2.0-flash',
+        model: 'gemini-2.5-flash',
         contents: userMessages,
         config: {
           responseModalities: [Modality.TEXT],
@@ -423,10 +422,10 @@ async function handleAIMessageSend(e: CustomEvent) {
 
       const messagesForSuggestions = [
         ...chat.messages,
-        `Based on all my previous prompts give me 3 strings that would act like a suggestions for my next prompt. Don't repeat my previous prompts, I want just the suggestions in the format "suggestion1: '...', suggestion2: '...', suggestion3: '...'`,
+        `Based on all my previous prompts give me 3 strings that would act like a suggestions for my next prompt. Don't repeat my previous prompts, I want just the suggestions in the format "suggestion1: ***...***, suggestion2: ***...***, suggestion3: ***...***`,
       ];
       const responseWithSuggestions = await ai.models.generateContent({
-        model: 'gemini-2.0-flash',
+        model: 'gemini-2.5-flash',
         contents: messagesForSuggestions,
         config: {
           responseModalities: [Modality.TEXT],
@@ -435,19 +434,20 @@ async function handleAIMessageSend(e: CustomEvent) {
       response = responseWithSuggestions?.candidates?.[0]?.content?.parts;
       if (response && response.length === 1) {
         const responseText = response[0]?.text ?? '';
-        const regex: RegExp = /'(.*?)'/g;
-
-        // Use String.prototype.matchAll() to get an iterator of all matches, including captured groups.
+        const regex: RegExp = /\*\*\*(.*?)\*\*\*/g; // suggestions between  *** and ***
         const matches: IterableIterator<RegExpMatchArray> =
           responseText.matchAll(regex);
 
-        // Map the matches to an array, extracting the first capturing group (the content).
         const suggestions: string[] = Array.from(
           matches,
           (match: RegExpMatchArray) => match[1]
         );
 
-        chat.options = { ...ai_chat_options, suggestions: suggestions };
+        chat.options = {
+          ...ai_chat_options,
+          suggestions: suggestions,
+          isTyping: false,
+        };
       }
     }
   }, 2000);
@@ -503,7 +503,6 @@ export const Chat_Templates: Story = {
     const chat = document.querySelector('igc-chat');
     if (chat) {
       const actionsTemplate = () => html`
-        <!-- ${chat.defaultFileUploadButton} -->
         <igc-icon-button variant="flat">🎤</igc-icon-button>
         <div style="margin-inline-start: auto;">
           <igc-button @click=${handleCustomSendClick}>Ask</igc-button>
@@ -517,6 +516,7 @@ export const Chat_Templates: Story = {
         suggestions: ['Hello', 'Hi', 'Generate an image!'],
         templates: {
           messageActionsTemplate: _messageActionsTemplate,
+          textAreaAttachmentsTemplate: _textAreaAttachmentsTemplate,
           textAreaActionsTemplate: actionsTemplate,
           suggestionPrefixTemplate: html`✨`,
         },