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

Author: igdmdimitrov

src/components/chat/chat-message-list.ts

@@ -65,7 +65,7 @@ export default class IgcChatMessageListComponent extends LitElement {
    * @param messageId - The id of the message to scroll to
    * @private
    */
-  private scrollToMessage(messageId: string) {
+  public scrollToMessage(messageId: string) {
     const messageElement = this.shadowRoot?.querySelector(
       `#message-${messageId}`
     );
@@ -133,7 +133,10 @@ export default class IgcChatMessageListComponent extends LitElement {
                    id=${messageId}
                    role="option"
                    part="message-item"
+                   data-role=${message.sender}
                    .message=${message}
+                   exportparts="message-container, bubble, message-text, message-attachments, message-actions,
+                   attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
                  >
                  </igc-chat-message>
                `;

src/components/chat/chat-message.ts

@@ -1,5 +1,5 @@
 import { consume } from '@lit/context';
-import DOMPurify from 'dompurify';
+// import DOMPurify from 'dompurify';
 import { html, LitElement, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
@@ -79,7 +79,7 @@ export default class IgcChatMessageComponent extends LitElement {
    * @private
    */
   private sanitizeMessageText(text: string): string {
-    return DOMPurify.sanitize(text);
+    return text.trim();
   }
 
   constructor() {
@@ -96,7 +96,7 @@ export default class IgcChatMessageComponent extends LitElement {
     return this.message?.sender !== 'user' &&
       this.message?.text.trim() &&
       (!isLastMessage || !this._chatState?.options?.isTyping)
-      ? html`<div>
+      ? html`<div part="message-actions">
           <igc-icon-button
             name="copy"
             collection="material"
@@ -152,10 +152,16 @@ export default class IgcChatMessageComponent extends LitElement {
           ${this._chatState?.options?.templates?.messageTemplate && this.message
             ? this._chatState.options.templates.messageTemplate(this.message)
             : html`${sanitizedMessageText
-                ? html`<div>${renderer(sanitizedMessageText)}</div>`
+                ? html`<div part="message-text">
+                    ${renderer(sanitizedMessageText)}
+                  </div>`
                 : nothing}`}
           ${this.message?.attachments && this.message?.attachments.length > 0
-            ? html`<igc-message-attachments .message=${this.message}>
+            ? html` <igc-message-attachments
+                .message=${this.message}
+                part="message-attachments"
+                exportparts="message-attachments,attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
+              >
               </igc-message-attachments>`
             : nothing}
           ${this._chatState?.options?.templates?.messageActionsTemplate &&

src/components/chat/chat.ts

@@ -366,21 +366,85 @@ export default class IgcChatComponent extends EventEmitterMixin<
       this._chatState.options?.suggestions &&
       this._chatState.options.suggestions.length > 0;
     return html`
-      <div part="chat-container">
+      <div
+        part="chat-container"
+        exportparts="
+          chat-container,
+          header,
+          prefix,
+          title,
+          actions,
+          chat-wrapper,
+          chat-messages,
+          empty-state,
+          suggestions-container,
+          suggestions-header,
+          suggestions,
+          suggestions-actions,
+          suggestion,
+          message-container,
+          message-list,
+          message-item,
+          message,
+          bubble,
+          message-text,
+          message-attachments,
+          message-actions,
+          typing-indicator,
+          attachments-container,
+          attachment,
+          attachment-header,
+          attachment-content,
+          attachment-icon,
+          file-name,
+          attachment-actions
+        "
+      >
         ${this.renderHeader()}
         <div part="chat-wrapper">
           ${this.messages.length === 0
             ? html`<div part="empty-state">
                 <slot name="empty-state"> </slot>
               </div>`
-            : html`<igc-chat-message-list part="chat-messages">
+            : html` <igc-chat-message-list
+                part="chat-messages"
+                exportparts="
+                  message-container,
+                  message-list,
+                  message-item,
+                  message,
+                  bubble,
+                  message-text,
+                  message-attachments,
+                  message-actions,
+                  typing-indicator,
+                  attachments-container,
+                  attachment,
+                  attachment-header,
+                  attachment-content,
+                  attachment-icon,
+                  file-name,
+                  actions: attachment-actions"
+              >
               </igc-chat-message-list>`}
           ${hasSuggestions &&
           this._chatState.suggestionsPosition === 'below-messages'
             ? this.renderSuggestions()
             : nothing}
         </div>
-        <igc-chat-input> </igc-chat-input>
+        <igc-chat-input
+          exportparts="
+              input-container,
+              input-wrapper,
+              attachments: input-attachments-container,
+              attachments-wrapper: input-attachment,
+              attachment-name: input-attachment-name,
+              text-input,
+              buttons-container: input-buttons-container,
+              upload-button,
+              send-button"
+        >
+        </igc-chat-input>
         ${hasSuggestions &&
         this._chatState.suggestionsPosition === 'below-input'
           ? this.renderSuggestions()