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

Author: igdmdimitrov

package.json

@@ -84,6 +84,7 @@
     "lint-staged": "^16.1.4",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
+    "marked": "^12.0.0",
     "node-watch": "^0.7.4",
     "playwright": "^1.54.2",
     "postcss": "^8.5.6",

src/components/chat/assets/file.png

@@ -331,38 +331,36 @@ 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">
-        <span ?hidden=${hasContent}
-          >${this.resourceStrings.suggestionsHeader}</span
-        >
-        <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">
+          <span ?hidden=${hasContent}>
+            ${this.resourceStrings.suggestionsHeader}
+          </span>
+          <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 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/assets/json.png

@@ -7,6 +7,9 @@ import { registerComponent } from '../common/definitions/register.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import IgcIconComponent from '../icon/icon.js';
 import { registerIconFromText } from '../icon/icon.registry.js';
+import defaultFileIcon from './assets/file.png';
+import jsonIcon from './assets/json.png';
+import linkIcon from './assets/link.png';
 import type { ChatState } from './chat-state.js';
 import { styles } from './themes/message-attachments.base.css.js';
 import { styles as shared } from './themes/shared/message-attachments.common.css.js';
@@ -76,6 +79,32 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     this._chatState?.emitEvent('igcAttachmentClick', { detail: attachment });
   }
 
+  private isImageAttachment(attachment: IgcMessageAttachment): boolean {
+    return (
+      attachment.type === 'image' ||
+      !!attachment.file?.type.startsWith('image/')
+    );
+  }
+  private _fileIconMap: Record<string, string> = {
+    pdf: defaultFileIcon,
+    doc: defaultFileIcon,
+    docx: defaultFileIcon,
+    xls: defaultFileIcon,
+    xlsx: defaultFileIcon,
+    txt: defaultFileIcon,
+    json: jsonIcon,
+    link: linkIcon,
+    default: defaultFileIcon, // A fallback icon
+  };
+
+  private getFileExtension(fileName: string): string {
+    const parts = fileName.split('.');
+    if (parts.length > 1) {
+      return parts.pop()!.toLowerCase();
+    }
+    return '';
+  }
+
   private getURL(attachment: IgcMessageAttachment): string {
     if (attachment.url) {
       return attachment.url;
@@ -87,14 +116,13 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
   }
 
   private renderDefaultAttachmentContent(attachment: IgcMessageAttachment) {
-    return html`${attachment.type === 'image' ||
-    attachment.file?.type.startsWith('image/')
-      ? html`<img
-          part="image-attachment"
-          src=${this.getURL(attachment)}
-          alt=${attachment.name}
-        />`
-      : nothing}`;
+    const ext = this.getFileExtension(attachment.name);
+    const isImage = this.isImageAttachment(attachment);
+    const url = isImage
+      ? this.getURL(attachment)
+      : (this._fileIconMap[ext] ?? this._fileIconMap['default']);
+    const partName = isImage ? 'image-attachment' : 'file-attachment';
+    return html` <img part="${partName}" src=${url} alt=${attachment.name} />`;
   }
 
   private renderAttachmentHeaderText(attachment: IgcMessageAttachment) {
@@ -146,6 +174,9 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     return html`${this.message?.attachments?.map(
       (attachment) =>
         html`<div part="attachment">
+          ${this.message?.sender === this._chatState?.currentUserId
+            ? this.renderAttachmentContent(attachment)
+            : nothing}
           <div
             part="attachment-header"
             role="button"
@@ -155,9 +186,7 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
             ${this.renderAttachmentHeaderActions()}
           </div>
 
-          ${attachment.type === 'image' ||
-          attachment.file?.type.startsWith('image/') ||
-          this._chatState?.options?.templates?.attachmentContentTemplate
+          ${this.message?.sender !== this._chatState?.currentUserId
             ? this.renderAttachmentContent(attachment)
             : nothing}
         </div>`

src/components/chat/assets/link.png

@@ -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/chat.ts

@@ -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/message-attachments.ts

@@ -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/chat.base.scss

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