feat(chat): expose suggestions prop & add tests

teodosiah · teodosiah · commit 111c0b9a4f9c · 2025-06-25T09:09:40.000+03:00
diff --git a/src/components/chat/chat.spec.ts b/src/components/chat/chat.spec.ts
@@ -1,6 +1,6 @@
 import { aTimeout, elementUpdated, expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
-import { type SinonFakeTimers, useFakeTimers } from 'sinon';
+import { type SinonFakeTimers, spy, useFakeTimers } from 'sinon';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { simulateClick, simulateFocus } from '../common/utils.spec.js';
 import IgcChatComponent from './chat.js';
@@ -129,6 +129,10 @@ describe('Chat', () => {
                     </div>
                     <igc-chat-message-list>
                     </igc-chat-message-list>
+                    <div class="suggestions-container">
+                        <slot name="suggestions" part="suggestions">
+                        </slot>
+                    </div>
                     <igc-chat-input>
                     </igc-chat-input>
                 </div>`
@@ -450,6 +454,38 @@ describe('Chat', () => {
         }
       });
     });
+
+    it('should render suggestions', async () => {
+      chat.options = {
+        suggestions: ['Suggestion 1', 'Suggestion 2'],
+      };
+      await elementUpdated(chat);
+
+      const suggestionsContainer = chat.shadowRoot?.querySelector(
+        '.suggestions-container'
+      );
+
+      expect(suggestionsContainer).dom.to.equal(
+        `<div class="suggestions-container">
+                    <slot name="suggestions" part="suggestions">
+                        <slot name="suggestion" part="suggestion">
+                            <igc-chip>
+                                <span>
+                                Suggestion 1
+                                </span>
+                            </igc-chip>
+                            </slot>
+                            <slot name="suggestion" part="suggestion">
+                            <igc-chip>
+                                <span>
+                                Suggestion 2
+                                </span>
+                            </igc-chip>
+                        </slot>
+                    </slot>
+                </div>`
+      );
+    });
   });
 
   describe('Slots', () => {
@@ -470,6 +506,7 @@ describe('Chat', () => {
     it('should slot header prefix', () => {});
     it('should slot header title', () => {});
     it('should slot header action buttons area', () => {});
+    it('should slot suggetions area', () => {});
   });
 
   describe('Templates', () => {
@@ -597,6 +634,7 @@ describe('Chat', () => {
   describe('Interactions', () => {
     describe('Click', () => {
       it('should update messages properly on send button click', async () => {
+        const eventSpy = spy(chat, 'emitEvent');
         const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
         const sendButton = inputArea?.shadowRoot?.querySelector(
           'igc-icon-button[name="send-message"]'
@@ -610,11 +648,49 @@ describe('Chat', () => {
           simulateClick(sendButton);
           await elementUpdated(chat);
           await clock.tickAsync(500);
+
+          expect(eventSpy).calledWith('igcMessageCreated');
+          const eventArgs = eventSpy.getCall(0).args[1]?.detail;
+          const args =
+            eventArgs && typeof eventArgs === 'object'
+              ? { ...eventArgs, text: 'Hello!', sender: 'user' }
+              : { text: 'Hello!', sender: 'user' };
+          expect(eventArgs).to.deep.equal(args);
           expect(chat.messages.length).to.equal(1);
           expect(chat.messages[0].text).to.equal('Hello!');
           expect(chat.messages[0].sender).to.equal('user');
         }
       });
+
+      it('should update messages properly on suggestion chip click', async () => {
+        const eventSpy = spy(chat, 'emitEvent');
+        chat.options = {
+          suggestions: ['Suggestion 1', 'Suggestion 2'],
+        };
+        await elementUpdated(chat);
+
+        const suggestionChips = chat.shadowRoot
+          ?.querySelector('.suggestions-container')
+          ?.querySelectorAll('igc-chip');
+
+        expect(suggestionChips?.length).to.equal(2);
+        if (suggestionChips) {
+          simulateClick(suggestionChips[0]);
+          await elementUpdated(chat);
+
+          expect(eventSpy).calledWith('igcMessageCreated');
+          const eventArgs = eventSpy.getCall(0).args[1]?.detail;
+          const args =
+            eventArgs && typeof eventArgs === 'object'
+              ? { ...eventArgs, text: 'Suggestion 1', sender: 'user' }
+              : { text: 'Suggestion 1', sender: 'user' };
+          expect(eventArgs).to.deep.equal(args);
+          expect(chat.messages.length).to.equal(1);
+          expect(chat.messages[0].text).to.equal('Suggestion 1');
+          expect(chat.messages[0].sender).to.equal('user');
+        }
+      });
+
       it('should remove attachement on chip remove button click', () => {});
     });
 
@@ -624,6 +700,7 @@ describe('Chat', () => {
 
     describe('Keyboard', () => {
       it('should update messages properly on `Enter` keypress when the textarea is focused', async () => {
+        const eventSpy = spy(chat, 'emitEvent');
         const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
         const sendButton = inputArea?.shadowRoot?.querySelector(
           'igc-icon-button[name="send-message"]'
@@ -644,6 +721,14 @@ describe('Chat', () => {
           );
           await elementUpdated(chat);
           await clock.tickAsync(500);
+
+          expect(eventSpy).calledWith('igcMessageCreated');
+          const eventArgs = eventSpy.getCall(0).args[1]?.detail;
+          const args =
+            eventArgs && typeof eventArgs === 'object'
+              ? { ...eventArgs, text: 'Hello!', sender: 'user' }
+              : { text: 'Hello!', sender: 'user' };
+          expect(eventArgs).to.deep.equal(args);
           expect(chat.messages.length).to.equal(1);
           expect(chat.messages[0].text).to.equal('Hello!');
           expect(chat.messages[0].sender).to.equal('user');
@@ -653,7 +738,6 @@ describe('Chat', () => {
   });
 
   describe('Events', () => {
-    it('emits igcMessageCreated', async () => {});
     it('emits igcAttachmentClick', async () => {});
     it('emits igcAttachmentChange', async () => {});
     it('emits igcTypingChange', async () => {});
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
@@ -1,5 +1,5 @@
 import { ContextProvider } from '@lit/context';
-import { LitElement, html } from 'lit';
+import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import IgcButtonComponent from '../button/button.js';
 import { chatContext } from '../common/context.js';
@@ -98,23 +98,32 @@ export default class IgcChatComponent extends EventEmitterMixin<
 
     if (!text.trim() && attachments.length === 0) return;
 
-    const newMessage: IgcMessage = {
-      id: Date.now().toString(),
-      text,
-      sender: 'user',
-      timestamp: new Date(),
-      attachments,
-    };
-
-    this.messages = [...this.messages, newMessage];
-    this.emitEvent('igcMessageCreated', { detail: newMessage });
+    this.addMessage({ text, attachments });
   }
 
   private handleAttachmentClick(e: CustomEvent) {
     const attachmentArgs = e.detail.attachment;
     this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
   }
 
+  private addMessage(message: {
+    id?: string;
+    text: string;
+    sender?: string;
+    timestamp?: Date;
+    attachments?: IgcMessageAttachment[];
+  }) {
+    const newMessage: IgcMessage = {
+      id: message.id ?? Date.now().toString(),
+      text: message.text,
+      sender: message.sender ?? 'user',
+      timestamp: message.timestamp ?? new Date(),
+      attachments: message.attachments || [],
+    };
+    this.messages = [...this.messages, newMessage];
+    this.emitEvent('igcMessageCreated', { detail: newMessage });
+  }
+
   protected override firstUpdated() {
     this._context.setValue(this, true);
   }
@@ -132,6 +141,21 @@ export default class IgcChatComponent extends EventEmitterMixin<
           </slot>
         </div>
         <igc-chat-message-list> </igc-chat-message-list>
+        <div class="suggestions-container">
+          <slot name="suggestions" part="suggestions">
+            ${this.options?.suggestions?.map(
+              (suggestion) => html`
+                <slot name="suggestion" part="suggestion">
+                  <igc-chip
+                    @click=${() => this.addMessage({ text: suggestion })}
+                  >
+                    <span>${suggestion}</span>
+                  </igc-chip>
+                </slot>
+              `
+            )}
+          </slot>
+        </div>
         <igc-chat-input
           @message-created=${this.handleSendMessage}
         ></igc-chat-input>
diff --git a/src/components/chat/themes/chat.base.scss b/src/components/chat/themes/chat.base.scss
@@ -75,4 +75,16 @@
 
   .action-button:hover {
     background-color: #E5E5EA;
+  }
+
+  .suggestions-container {
+    display: flex;
+    justify-content: end;
+  
+    igc-chip::part(base) {
+      background-color: transparent;
+      border: 1px solid var(--ig-primary-500);
+      color: var(--ig-primary-500);
+    }
+
   }
diff --git a/src/components/chat/types.ts b/src/components/chat/types.ts
@@ -36,6 +36,7 @@ export type IgcChatOptions = {
    */
   acceptedFiles?: string;
   headerText?: string;
+  suggestions?: string[];
   templates?: IgcChatTemplates;
 };
 
diff --git a/stories/chat.stories.ts b/stories/chat.stories.ts
@@ -101,12 +101,13 @@ const messageActionsTemplate = (msg: any) => {
             ></igc-icon-button>
           </div>
         `
-      : ''
-    : '';
+      : html``
+    : html``;
 };
 
 const ai_chat_options = {
   headerText: 'Chat',
+  suggestions: ['Hello', 'Hi', 'Generate an image of a pig!'],
   templates: {
     messageActionsTemplate: messageActionsTemplate,
   },
@@ -413,6 +414,8 @@ async function handleAIMessageSend(e: CustomEvent) {
     return;
   }
 
+  chat.options = { ...ai_chat_options, suggestions: [] };
+
   let response: any;
   let responseText = '';
   const attachments: IgcMessageAttachment[] = [];
@@ -495,6 +498,7 @@ async function handleAIMessageSend(e: CustomEvent) {
       };
       chat.messages = [...chat.messages];
     }
+    chat.options = { ...ai_chat_options, suggestions: ['Thank you!'] };
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -101,12 +101,13 @@ const messageActionsTemplate = (msg: any) => {`
`101`	`101`	`></igc-icon-button>`
`102`	`102`	`</div>`
`103`	`103`	`
`104`		`- : ''`
`105`		`- : '';`
	`104`	+ : html``
	`105`	+ : html``;
`106`	`106`	`};`
`107`	`107`
`108`	`108`	`const ai_chat_options = {`
`109`	`109`	`headerText: 'Chat',`
	`110`	`+ suggestions: ['Hello', 'Hi', 'Generate an image of a pig!'],`
`110`	`111`	`templates: {`
`111`	`112`	`messageActionsTemplate: messageActionsTemplate,`
`112`	`113`	`},`
`@@ -413,6 +414,8 @@ async function handleAIMessageSend(e: CustomEvent) {`
`413`	`414`	`return;`
`414`	`415`	`}`
`415`	`416`
	`417`	`+ chat.options = { ...ai_chat_options, suggestions: [] };`
	`418`	`+`
`416`	`419`	`let response: any;`
`417`	`420`	`let responseText = '';`
`418`	`421`	`const attachments: IgcMessageAttachment[] = [];`
`@@ -495,6 +498,7 @@ async function handleAIMessageSend(e: CustomEvent) {`
`495`	`498`	`};`
`496`	`499`	`chat.messages = [...chat.messages];`
`497`	`500`	`}`
	`501`	`+ chat.options = { ...ai_chat_options, suggestions: ['Thank you!'] };`
`498`	`502`	`}`
`499`	`503`	`}`
`500`	`504`