feat(chat): add template for suggestion prefix

Author: igdmdimitrov

src/components/chat/chat.ts

@@ -329,6 +329,18 @@ export default class IgcChatComponent extends EventEmitterMixin<
     </div>`;
   }
 
+  private renderSuggestionPrefix() {
+    const defaultPrefix = html`<igc-icon
+      name="star-icon"
+      collection="material"
+    ></igc-icon>`;
+    return html`<span slot="start">
+      ${this._chatState?.options?.templates?.suggestionPrefixTemplate
+        ? this._chatState.options.templates.suggestionPrefixTemplate
+        : defaultPrefix}
+    </span>`;
+  }
+
   private renderSuggestions() {
     const hasContent = this._slots.hasAssignedElements('suggestions-header');
     return html`<div part="suggestions-container">
@@ -347,11 +359,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
                   @click=${() =>
                     this._chatState?.handleSuggestionClick(suggestion)}
                 >
-                  <igc-icon
-                    slot="start"
-                    name="star-icon"
-                    collection="material"
-                  ></igc-icon>
+                  ${this.renderSuggestionPrefix()}
                   <span slot="title">${suggestion}</span>
                 </igc-list-item>
               </slot>

src/components/chat/types.ts

@@ -211,6 +211,11 @@ export type IgcChatTemplates = {
    * Template for rendering attachments that are currently queued for sending (in the input area).
    */
   textAreaAttachmentsTemplate?: AttachmentTemplate;
+
+  /**
+   * Template for rendering the suggestion prefix.
+   */
+  suggestionPrefixTemplate?: unknown;
 };
 
 export const attachmentIcon =

stories/chat.stories.ts

@@ -477,6 +477,7 @@ export const Chat_Templates: Story = {
         templates: {
           messageActionsTemplate: _messageActionsTemplate,
           textAreaActionsTemplate: actionsTemplate,
+          suggestionPrefixTemplate: html`✨`,
         },
       };
       chat.options = { ...options };