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

igdmdimitrov · igdmdimitrov · commit f3e1233aa233 · 2025-05-16T14:56:28.000+03:00
diff --git a/src/components/chat/chat-message-list.ts b/src/components/chat/chat-message-list.ts
@@ -4,7 +4,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { registerComponent } from '../common/definitions/register.js';
 import IgcChatMessageComponent from './chat-message.js';
 import { styles } from './themes/message-list.base.css.js';
-import type { IgcMessage } from './types.js';
+import type { AttachmentTemplate, IgcMessage } from './types.js';
 
 /**
  *
@@ -31,6 +31,18 @@ export default class IgcChatMessageListComponent extends LitElement {
   @property({ type: Boolean, attribute: 'disable-auto-scroll' })
   public disableAutoScroll = false;
 
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
+
   private formatDate(date: Date): string {
     const today = new Date();
     const yesterday = new Date(today);
@@ -109,6 +121,10 @@ export default class IgcChatMessageListComponent extends LitElement {
                   <igc-chat-message
                     .message=${message}
                     .isResponse=${message.isResponse}
+                    .attachmentTemplate=${this.attachmentTemplate}
+                    .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+                    .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+                    .attachmentContentTemplate=${this.attachmentContentTemplate}
                   ></igc-chat-message>
                 `
               )}
diff --git a/src/components/chat/chat-message.ts b/src/components/chat/chat-message.ts
@@ -5,7 +5,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import { renderMarkdown } from './markdown-util.js';
 import { IgcMessageAttachmentsComponent } from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
-import type { IgcMessage } from './types.js';
+import type { AttachmentTemplate, IgcMessage } from './types.js';
 
 /**
  *
@@ -33,19 +33,33 @@ export default class IgcChatMessageComponent extends LitElement {
   @property({ reflect: true, attribute: false })
   public isResponse = false;
 
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
+
   protected override render() {
-    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
+    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''} bubble`;
 
     return html`
       <div class=${containerClass}>
         ${this.message?.text.trim()
-          ? html` <div class="bubble">
-              ${renderMarkdown(this.message?.text)}
-            </div>`
+          ? html` <div>${renderMarkdown(this.message?.text)}</div>`
           : ''}
         ${this.message?.attachments && this.message?.attachments.length > 0
           ? html`<igc-message-attachments
               .attachments=${this.message?.attachments}
+              .attachmentTemplate=${this.attachmentTemplate}
+              .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+              .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+              .attachmentContentTemplate=${this.attachmentContentTemplate}
             >
             </igc-message-attachments>`
           : ''}
diff --git a/src/components/chat/chat.ts b/src/components/chat/chat.ts
@@ -7,7 +7,11 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageListComponent from './chat-message-list.js';
 import { styles } from './themes/chat.base.css.js';
-import type { IgcMessage, IgcMessageAttachment } from './types.js';
+import type {
+  AttachmentTemplate,
+  IgcMessage,
+  IgcMessageAttachment,
+} from './types.js';
 
 export interface IgcChatComponentEventMap {
   igcMessageSend: CustomEvent<IgcMessage>;
@@ -59,6 +63,18 @@ export default class IgcChatComponent extends EventEmitterMixin<
   @property({ type: String, attribute: 'header-text', reflect: true })
   public headerText = '';
 
+  @property({ type: Function })
+  public attachmentTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentHeaderTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentActionsTemplate?: AttachmentTemplate;
+
+  @property({ type: Function })
+  public attachmentContentTemplate?: AttachmentTemplate;
+
   public override connectedCallback() {
     super.connectedCallback();
     this.addEventListener(
@@ -155,6 +171,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
           .messages=${this.messages}
           .disableAutoScroll=${this.disableAutoScroll}
           .isAiResponding=${this.isAiResponding}
+          .attachmentTemplate=${this.attachmentTemplate}
+          .attachmentHeaderTemplate=${this.attachmentHeaderTemplate}
+          .attachmentActionsTemplate=${this.attachmentActionsTemplate}
+          .attachmentContentTemplate=${this.attachmentContentTemplate}
         >
         </igc-chat-message-list>
         <igc-chat-input
diff --git a/src/components/chat/message-attachments.ts b/src/components/chat/message-attachments.ts
@@ -7,6 +7,7 @@ import IgcIconComponent from '../icon/icon.js';
 import { registerIconFromText } from '../icon/icon.registry.js';
 import { styles } from './themes/message-attachments.base.css';
 import {
+  type AttachmentTemplate,
   type IgcMessageAttachment,
   closeIcon,
   fileIcon,
@@ -41,6 +42,18 @@ export class IgcMessageAttachmentsComponent extends LitElement {
   @property({ type: String })
   previewImage = '';
 
+  @property({ type: Function })
+  attachmentTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentHeaderTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentActionsTemplate: AttachmentTemplate | undefined;
+
+  @property({ type: Function })
+  attachmentContentTemplate: AttachmentTemplate | undefined;
+
   constructor() {
     super();
     registerIconFromText('close', closeIcon, 'material');
@@ -50,12 +63,6 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     registerIconFromText('more', moreIcon, 'material');
   }
 
-  private formatFileSize(bytes = 0): string {
-    if (bytes < 1024) return `${bytes} B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-
   private openImagePreview(url: string) {
     this.previewImage = url;
   }
@@ -82,60 +89,82 @@ export class IgcMessageAttachmentsComponent extends LitElement {
   protected override render() {
     return html`
       <div class="attachments-container">
-        ${this.attachments.map(
-          (attachment) => html`
-            <igc-expansion-panel
-              indicator-position="none"
-              .open=${attachment.type === 'image'}
-              @igcClosing=${(ev: CustomEvent) =>
-                this.handleToggle(ev, attachment)}
-              @igcOpening=${(ev: CustomEvent) =>
-                this.handleToggle(ev, attachment)}
-            >
-              <div slot="title" class="attachment">
-                <div class="details">
-                  ${attachment.type === 'image'
-                    ? html`<igc-icon
-                        name="image"
-                        collection="material"
-                        class="medium"
-                      ></igc-icon>`
-                    : html`<igc-icon
-                        name="file"
-                        collection="material"
-                        class="medium"
-                      ></igc-icon>`}
-                  <span class="file-name">${attachment.name}</span>
-                </div>
-                <div class="actions">
-                  ${attachment.type === 'image'
-                    ? html` <igc-icon-button
-                        name="preview"
-                        collection="material"
-                        variant="flat"
-                        class="small"
-                        @click=${() => this.openImagePreview(attachment.url)}
-                      ></igc-icon-button>`
-                    : ''}
-                  <igc-icon-button
-                    name="more"
-                    collection="material"
-                    variant="flat"
-                    class="small"
-                  ></igc-icon-button>
-                </div>
-              </div>
-
-              ${attachment.type === 'image'
-                ? html` <img
-                    class="image-attachment"
-                    src=${attachment.url}
-                    alt=${attachment.name}
-                  />`
-                : ''}
-            </igc-expansion-panel>
-          `
-        )}
+        ${this.attachmentTemplate
+          ? this.attachmentTemplate(this.attachments)
+          : html` ${this.attachments.map(
+              (attachment) =>
+                html` <igc-expansion-panel
+                  indicator-position="none"
+                  .open=${attachment.type === 'image'}
+                  @igcClosing=${(ev: CustomEvent) =>
+                    this.handleToggle(ev, attachment)}
+                  @igcOpening=${(ev: CustomEvent) =>
+                    this.handleToggle(ev, attachment)}
+                >
+                  <div slot="title" class="attachment">
+                    <div class="details">
+                      ${this.attachmentHeaderTemplate
+                        ? this.attachmentHeaderTemplate(this.attachments)
+                        : html`
+                            <slot name="attachment-icon">
+                              ${attachment.type === 'image'
+                                ? html`<igc-icon
+                                    name="image"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`
+                                : html`<igc-icon
+                                    name="file"
+                                    collection="material"
+                                    class="medium"
+                                  ></igc-icon>`}
+                            </slot>
+                            <slot name="attachment-name">
+                              <span class="file-name">${attachment.name}</span>
+                            </slot>
+                          `}
+                    </div>
+                    <div class="actions">
+                      ${this.attachmentActionsTemplate
+                        ? this.attachmentActionsTemplate(this.attachments)
+                        : html`
+                            <slot name="attachment-actions">
+                              ${attachment.type === 'image'
+                                ? html` <igc-icon-button
+                                    name="preview"
+                                    collection="material"
+                                    variant="flat"
+                                    class="small"
+                                    @click=${() =>
+                                      this.openImagePreview(attachment.url)}
+                                  ></igc-icon-button>`
+                                : ''}
+                              <igc-icon-button
+                                name="more"
+                                collection="material"
+                                variant="flat"
+                                class="small"
+                              ></igc-icon-button>
+                            </slot>
+                          `}
+                    </div>
+                  </div>
+
+                  ${this.attachmentContentTemplate
+                    ? this.attachmentContentTemplate(this.attachments)
+                    : html`
+                        <slot name="attachment-content">
+                          ${attachment.type === 'image'
+                            ? html` <img
+                                class="image-attachment"
+                                src=${attachment.url}
+                                alt=${attachment.name}
+                              />`
+                            : ''}
+                        </slot>
+                      `}
+                </igc-expansion-panel>`
+            )}`}
       </div>
 
       ${this.previewImage
diff --git a/src/components/chat/themes/message.base.scss b/src/components/chat/themes/message.base.scss
@@ -8,18 +8,14 @@
   }
 
   .message-container {
-    display: flex;
+    display: block;
     justify-content: flex-start;
     align-items: flex-end;
     gap: 8px;
     margin-bottom: 4px;
     animation: fadeIn 0.2s ease-out;
   }
 
-  .message-container.sent {
-    flex-direction: row-reverse;
-  }
-
   .avatar {
     width: 32px;
     height: 32px;
@@ -51,19 +47,18 @@
   .bubble {
     padding: 12px 16px;
     border-radius: 18px;
-    background-color: #E5E5EA;
     color: black;
     word-break: break-all;
     font-weight: 400;
     line-height: 1.4;
     position: relative;
     transition: all 0.2s ease;
+    width: fit-content;
   }
 
-  .sent .bubble {
+  .sent {
     border-radius: 18px 18px 4px;
-    background-color: #0A84FF;
-    color: white;
+    background-color: #E5E5EA;
   }
 
   .received .bubble {
diff --git a/src/components/chat/types.ts b/src/components/chat/types.ts
@@ -1,3 +1,5 @@
+import type { TemplateResult } from 'lit';
+
 export type IgcMessageAttachmentType = 'image' | 'file';
 
 export interface IgcMessage {
@@ -16,7 +18,9 @@ export interface IgcMessageAttachment {
   size?: number;
   thumbnail?: string;
 }
-
+export type AttachmentTemplate = (
+  attachments: IgcMessageAttachment[]
+) => TemplateResult;
 export const attachmentIcon =
   '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z"/></svg>';
 export const sendButtonIcon =
