Merge branch 'dmdimitrov/chat-ai-component' of https://github.com/IgniteUI/igniteui-webcomponents into dmdimitrov/chat-ai-component

Author: gedinakova

src/components/chat/chat.ts

@@ -325,36 +325,33 @@ export default class IgcChatComponent extends EventEmitterMixin<
   }
 
   private renderSuggestions() {
-    const hasContent = this._slots.hasAssignedElements('suggestions-header');
-    return html` <igc-list
-      part="suggestions-container"
-      role="list"
-      aria-label="Suggestions"
-    >
-      <igc-list-header part="suggestions-header" ?hidden=${!hasContent}>
-        <slot name="suggestions-header"></slot>
-      </igc-list-header>
-      <slot name="suggestions" part="suggestions">
-        ${this._chatState.options?.suggestions?.map(
-          (suggestion) => html`
-            <slot name="suggestion" part="suggestion" role="listitem">
-              <igc-list-item
-                @click=${() =>
-                  this._chatState?.handleSuggestionClick(suggestion)}
-              >
-                <igc-icon
-                  slot="start"
-                  name="star-icon"
-                  collection="material"
-                ></igc-icon>
-                <span>${suggestion}</span>
-              </igc-list-item>
-            </slot>
-          `
-        )}
-      </slot>
-      <slot name="suggestions-actions" part="suggestions-actions"></slot>
-    </igc-list>`;
+    return html`<div part="suggestions-container">
+      <igc-list role="list" aria-label="Suggestions">
+        <igc-list-header part="suggestions-header">
+          <slot name="suggestions-header">Suggestions</slot>
+        </igc-list-header>
+        <slot name="suggestions" part="suggestions">
+          ${this._chatState.options?.suggestions?.map(
+            (suggestion) => html`
+              <slot name="suggestion" part="suggestion" role="listitem">
+                <igc-list-item
+                  @click=${() =>
+                    this._chatState?.handleSuggestionClick(suggestion)}
+                >
+                  <igc-icon
+                    slot="start"
+                    name="star-icon"
+                    collection="material"
+                  ></igc-icon>
+                  <span slot="title">${suggestion}</span>
+                </igc-list-item>
+              </slot>
+            `
+          )}
+        </slot>
+        <slot name="suggestions-actions" part="suggestions-actions"></slot>
+      </igc-list>
+    </div>`;
   }
 
   protected override firstUpdated() {

src/components/chat/themes/chat.base.scss

@@ -9,7 +9,6 @@ $inline-inset: rem(16px);
   width: 100%;
   height: var(--igc-chat-height);
   overflow: hidden;
-  box-shadow: var(--ig-elevation-24);
   display: flex;
   flex-direction: column;
 }
@@ -70,15 +69,16 @@ $inline-inset: rem(16px);
 igc-list {
   --ig-size: 3;
 
-  min-height: fit-content;
   padding-block-end: rem(24px);
-}
-
-igc-list-header,
-igc-list-item {
+  min-height: fit-content;
+  width: fit-content;
   max-width: rem(576px);
 }
 
 igc-list-item {
   cursor: pointer;
 }
+
+igc-list-item::part(title) {
+  @include line-clamp(2, true, true);
+}

src/components/chat/themes/input.base.scss

@@ -15,7 +15,9 @@
     max-width: rem(760px);
     width: 100%;
     margin-inline: rem(16px);
-    gap: rem(8px);
+    border-radius: rem(4px);
+    padding: rem(16px);
+    gap: rem(12px);
 }
 
 [part='buttons-container'] {

src/components/chat/themes/message.base.scss

@@ -14,6 +14,7 @@
   padding: rem(12px) rem(16px);
   border-radius: rem(24px) rem(24px) 0;
   max-width: rem(576px);
+  width: fit-content;
 }
 
 [part~='bubble'] {

src/components/chat/themes/shared/chat-message/chat-message.bootstrap.scss

@@ -1,5 +1,5 @@
 @use 'styles/utilities' as *;
 
 [part~='sent'] {
-    border-radius: rem(4px);
+    border-radius: rem(8px) rem(8px) 0;
 }

src/components/chat/themes/shared/chat-message/chat-message.fluent.scss

@@ -1,5 +1,5 @@
 @use 'styles/utilities' as *;
 
-[part~='sent'] {
-    border-radius: rem(2px);
-}
+// [part~='sent'] {
+//     border-radius: rem(2px);
+// }

src/components/chat/themes/shared/chat.bootstrap.scss

@@ -4,6 +4,7 @@ igc-list {
     border: none;
 }
 
-igc-list-item {
+igc-list-item:not(:hover),
+igc-list-header {
     background: initial;
 }

src/components/chat/themes/shared/input/input.common.scss

@@ -3,7 +3,6 @@
 
 $theme: $material;
 
-:host {
-    // border-block-start: rem(1px) solid var-get($theme, 'chat-input-border');
-    border-block-start: rem(1px) solid color(gray, 300);
+[part~='input-container'] {
+    border: rem(1px) solid var-get($theme, 'chat-input-border');
 }

stories/chat.stories.ts

@@ -12,8 +12,9 @@ import type {
   IgcMessageAttachment,
 } from '../src/components/chat/types.js';
 
+const googleGenAIKey = import.meta.env.VITE_GOOGLE_GEN_AI_KEY;
 const ai = new GoogleGenAI({
-  apiKey: 'googleGenAIKey',
+  apiKey: googleGenAIKey,
 });
 
 defineComponents(IgcChatComponent);
@@ -379,7 +380,35 @@ async function handleAIMessageSend(e: CustomEvent) {
         };
         chat.messages = [...chat.messages];
       }
-      chat.options = { ...ai_chat_options, suggestions: ['Thank you!'] };
+
+      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: '...'`,
+      ];
+      const responseWithSuggestions = await ai.models.generateContent({
+        model: 'gemini-2.0-flash',
+        contents: messagesForSuggestions,
+        config: {
+          responseModalities: [Modality.TEXT],
+        },
+      });
+      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 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 };
+      }
     }
   }, 2000);
 }
@@ -438,7 +467,7 @@ export const Chat_Templates: Story = {
         <igc-icon-button variant="flat">🎤</igc-icon-button>
         <div style="margin-inline-start: auto;">
           <igc-button @click=${handleCustomSendClick}>Ask</igc-button>
-          <igc-button variant="flat">...</igc-button>
+          <igc-icon-button variant="flat">...</igc-icon-button>
         </div>
       `;
       options = {
@@ -473,7 +502,7 @@ export const Chat_Templates: Story = {
           variant="flat"
           name="search"
         ></igc-icon-button>
-        <div slot="suggestions-header">Suggestions</div>
+        <div slot="suggestions-header">Get Inspired</div>
       </igc-chat>
     `;
   },