Adding an option for positioning the suggestions (#1803)

* feat(*): Adding an option to control suggestions position

* chore(*): Adding a new test for suggestions

* test(*): Adding tests for suggestions positioning

* fix(*): Fixed the failing suggestions test

* chore(*): Remove supabase stuff

* fix(*): Removed 'above-input' option for suggestions

* chore(*): Removed irrelevant content

* chore(*): Deleted leftover 'above-input'.

* chore(*): remove duplicated tests

---------

Co-authored-by: igdmdimitrov <[email protected]>

Author: gedinakova

src/components/chat/chat-input.ts

@@ -339,7 +339,6 @@ export default class IgcChatInputComponent extends LitElement {
         this._chatState?.inputAttachments.length > 0
           ? this.renderAttachmentsArea()
           : nothing}
-
         <div part="input-wrapper">
           ${this._chatState?.options?.templates?.textInputTemplate
             ? this._chatState.options.templates.textInputTemplate(

src/components/chat/chat-state.ts

@@ -36,6 +36,8 @@ export class ChatState {
     wildcardTypes: Set<string>;
   } | null = null;
 
+  private _suggestionsPosition: 'below-input' | 'below-messages' =
+    'below-messages';
   //#endregion
 
   //#region Public properties
@@ -87,6 +89,12 @@ export class ChatState {
     return this._options?.currentUserId ?? 'user';
   }
 
+  /**
+   * Gets the current suggestionsPosition from options or returns the default value 'below-messages'.
+   */
+  public get suggestionsPosition(): string {
+    return this._options?.suggestionsPosition ?? this._suggestionsPosition;
+  }
   /**
    * Gets the text area component.
    */

src/components/chat/chat.spec.ts

@@ -160,6 +160,8 @@ describe('Chat', () => {
     new File(['image data'], 'image.png', { type: 'image/png' }),
   ];
 
+  const GAP = 40; // Default gap between elements in the chat container
+
   let chat: IgcChatComponent;
   let clock: SinonFakeTimers;
 
@@ -181,7 +183,7 @@ describe('Chat', () => {
 
     it('is rendered correctly', () => {
       expect(chat).dom.to.equal(
-        `<igc-chat>                   
+        `<igc-chat>
         </igc-chat>`
       );
 
@@ -414,39 +416,6 @@ describe('Chat', () => {
       expect(textArea?.placeholder).to.equal('Type message here...');
     });
 
-    it('should render suggestions', async () => {
-      chat.options = {
-        suggestions: ['Suggestion 1', 'Suggestion 2'],
-      };
-      await elementUpdated(chat);
-
-      const suggestionsContainer = chat.shadowRoot?.querySelector(
-        'div[part="suggestions-container"]'
-      );
-
-      expect(suggestionsContainer).dom.to.equal(
-        `<div aria-label="Suggestions" part="suggestions-container" role="list">
-          <slot name="suggestions-header" part="suggestions-header"> </slot>
-          <slot name="suggestions" part="suggestions">
-              <slot name="suggestion" part="suggestion" role="listitem">
-                  <igc-chip>
-                      <span>
-                      Suggestion 1
-                      </span>
-                  </igc-chip>
-              </slot>
-              <slot name="suggestion" part="suggestion" role="listitem">
-                  <igc-chip>
-                      <span>
-                      Suggestion 2
-                      </span>
-                  </igc-chip>
-              </slot>
-          </slot>
-      </div>`
-      );
-    });
-
     it('should enable/disable the send button properly', async () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
       const sendButton =
@@ -683,7 +652,15 @@ describe('Chat', () => {
       });
     });
 
-    it('should render suggestions', async () => {
+    it('should not render container if suggestions are not provided', async () => {
+      const suggestionsContainer = chat.shadowRoot?.querySelector(
+        `div[part='suggestions-container']`
+      );
+
+      expect(suggestionsContainer).to.be.null;
+    });
+
+    it('should render suggestions if provided', async () => {
       chat.options = {
         suggestions: ['Suggestion 1', 'Suggestion 2'],
       };
@@ -712,10 +689,69 @@ describe('Chat', () => {
                             </igc-chip>
                         </slot>
                     </slot>
+                    <slot name="suggestions-actions" part="suggestions-actions"> </slot>
                 </div>`
       );
     });
 
+    it('should render suggestions below empty state by default', async () => {
+      chat.options = {
+        suggestions: ['Suggestion 1', 'Suggestion 2'],
+      };
+      await elementUpdated(chat);
+      const suggestionsContainer = chat.shadowRoot?.querySelector(
+        `div[part='suggestions-container']`
+      );
+
+      expect(suggestionsContainer?.previousElementSibling?.part[0]).to.equal(
+        'empty-state'
+      );
+    });
+
+    it('should render suggestions below messages by default', async () => {
+      chat.options = {
+        suggestions: ['Suggestion 1', 'Suggestion 2'],
+      };
+      chat.messages.push({
+        id: '5',
+        text: 'New message',
+        sender: 'user',
+        timestamp: new Date(),
+      });
+      await elementUpdated(chat);
+
+      const suggestionsContainer = chat.shadowRoot?.querySelector(
+        `div[part='suggestions-container']`
+      )!;
+
+      const messageList = chat.shadowRoot?.querySelector(
+        'igc-chat-message-list'
+      )!;
+
+      const diff =
+        suggestionsContainer.getBoundingClientRect().top -
+        messageList.getBoundingClientRect().bottom;
+      expect(diff).to.equal(GAP);
+    });
+
+    it("should render suggestions below input area when position is 'below-input'", async () => {
+      chat.options = {
+        suggestions: ['Suggestion 1', 'Suggestion 2'],
+        suggestionsPosition: 'below-input',
+      };
+      await elementUpdated(chat);
+
+      const suggestionsContainer = chat.shadowRoot?.querySelector(
+        `div[part='suggestions-container']`
+      )!;
+
+      const inputArea = chat.shadowRoot?.querySelector('igc-chat-input')!;
+      const diff =
+        suggestionsContainer.getBoundingClientRect().top -
+        inputArea.getBoundingClientRect().bottom;
+      expect(diff).to.equal(GAP);
+    });
+
     it('should render composing indicator if `isComposing` is true', async () => {
       chat.messages = [messages[0]];
       chat.options = {

src/components/chat/chat.ts

@@ -115,7 +115,9 @@ export interface IgcChatComponentEventMap {
  * @slot prefix - Slot for injecting content (e.g., avatar or icon) before the chat title.
  * @slot title - Slot for overriding the chat title content.
  * @slot actions - Slot for injecting header actions (e.g., buttons, menus).
+ * @slot suggestions-header - Slot for rendering a custom header for the suggestions list.
  * @slot suggestions - Slot for rendering a custom list of quick reply suggestions.
+ * @slot suggestions-actions - Slot for rendering additional actions.
  * @slot suggestion - Slot for rendering a single suggestion item.
  * @slot empty-state - Slot shown when there are no messages.
  *
@@ -278,6 +280,7 @@ export default class IgcChatComponent extends EventEmitterMixin<
           `
         )}
       </slot>
+      <slot name="suggestions-actions" part="suggestions-actions"></slot>
     </div>`;
   }
 
@@ -297,6 +300,9 @@ export default class IgcChatComponent extends EventEmitterMixin<
   }
 
   protected override render() {
+    const hasSuggestions =
+      this._chatState.options?.suggestions &&
+      this._chatState.options.suggestions.length > 0;
     return html`
       <div part="chat-container">
         ${this._hasContent || this._chatState.options?.headerText
@@ -307,11 +313,15 @@ export default class IgcChatComponent extends EventEmitterMixin<
               <slot name="empty-state"> </slot>
             </div>`
           : html`<igc-chat-message-list> </igc-chat-message-list>`}
-        ${this._chatState.options?.suggestions &&
-        this._chatState.options?.suggestions?.length > 0
+        ${hasSuggestions &&
+        this._chatState.suggestionsPosition === 'below-messages'
+          ? this.renderSuggestions()
+          : nothing}
+        <igc-chat-input> </igc-chat-input>
+        ${hasSuggestions &&
+        this._chatState.suggestionsPosition === 'below-input'
           ? this.renderSuggestions()
           : nothing}
-        <igc-chat-input></igc-chat-input>
       </div>
     `;
   }

src/components/chat/types.ts

@@ -132,6 +132,16 @@ export type IgcChatOptions = {
    * Suggested text snippets or quick replies that can be shown as user-selectable options.
    */
   suggestions?: string[];
+  /**
+   * Controls the position of the chat suggestions within the component layout.
+   *
+   * - `"below-input"`: Renders suggestions below the chat input area.
+   * - `"below-messages"`: Renders suggestions below the chat messages area.
+   *
+   * Default is `"below-messages"`.
+   */
+  suggestionsPosition?: 'below-input' | 'below-messages';
+
   /**
    * A set of template override functions used to customize rendering of messages, attachments, etc.
    */

stories/chat.stories.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components-vite';
 import { html } from 'lit';
 
 import { GoogleGenAI, Modality } from '@google/genai';
-import { createClient } from '@supabase/supabase-js';
+// import { createClient } from '@supabase/supabase-js';
 import {
   IgcChatComponent,
   defineComponents,
@@ -13,12 +13,12 @@ import type {
   IgcMessageAttachment,
 } from '../src/components/chat/types.js';
 
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
-const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
-const supabase = createClient(supabaseUrl, supabaseKey);
+// const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+// const supabaseKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+const supabase = ''; // createClient(supabaseUrl, supabaseKey);
 
 const ai = new GoogleGenAI({
-  apiKey: googleGenAIKey,
+  apiKey: 'googleGenAIKey',
 });
 
 defineComponents(IgcChatComponent);
@@ -146,7 +146,10 @@ const ai_chat_options = {
 
 const chat_options = {
   disableAutoScroll: false,
-  disableAttachments: true,
+  disableAttachments: false,
+  suggestions: ['Hello', 'Hi', 'How are you?'],
+  inputPlaceholder: 'Type your message here...',
+  headerText: 'Chat',
 };
 
 function handleCustomSendClick() {