feat(chat): initial styling

Author: SisIvanova

package-lock.json

@@ -79,7 +79,7 @@
     "globby": "^14.1.0",
     "husky": "^9.1.7",
     "ig-typedoc-theme": "^6.2.2",
-    "igniteui-theming": "^19.1.2",
+    "igniteui-theming": "^19.3.0-beta.1",
     "keep-a-changelog": "^2.6.2",
     "lint-staged": "^16.1.2",
     "lit-analyzer": "^2.0.3",

package.json

@@ -243,15 +243,15 @@ export default class IgcChatInputComponent extends LitElement {
       name="send-message"
       collection="material"
       variant="contained"
-      class="small"
+      part="send-button"
       ?disabled=${!this.inputValue.trim() &&
       this._chatState?.inputAttachments.length === 0}
       @click=${this.sendMessage}
     ></igc-icon-button>`;
   }
 
   private renderActionsArea() {
-    return html`<div class="buttons-container">
+    return html`<div part="buttons-container">
       ${this._chatState?.options?.templates?.textAreaActionsTemplate
         ? this._chatState?.options?.templates?.textAreaActionsTemplate
         : html` ${this.renderDefaultFileUploadTemplate()}
@@ -260,19 +260,19 @@ export default class IgcChatInputComponent extends LitElement {
   }
 
   private renderAttachmentsArea() {
-    return html`<div role="list" aria-label="Attachments">
+    return html`<div part="attachments" role="list" aria-label="Attachments">
       ${this._chatState?.options?.templates?.textAreaAttachmentsTemplate
         ? this._chatState.options.templates.textAreaAttachmentsTemplate(
             this._chatState?.inputAttachments
           )
         : html`${this._chatState?.inputAttachments?.map(
             (attachment, index) => html`
-              <div class="attachment-wrapper" role="listitem">
+              <div part="attachment-wrapper" role="listitem">
                 <igc-chip
                   removable
                   @igcRemove=${() => this.removeAttachment(index)}
                 >
-                  <span class="attachment-name">${attachment.name}</span>
+                  <span part="attachment-name">${attachment.name}</span>
                 </igc-chip>
               </div>
             `
@@ -282,16 +282,16 @@ export default class IgcChatInputComponent extends LitElement {
 
   protected override render() {
     return html`
-      <div class="input-container ${this.dragClass}">
+      <div part="input-container" class="${this.dragClass}">
         ${this.renderAttachmentsArea()}
 
-        <div class="input-wrapper">
+        <div part="input-wrapper">
           ${this._chatState?.options?.templates?.textInputTemplate
             ? this._chatState.options.templates.textInputTemplate(
                 this._chatState?.inputValue
               )
             : html` <igc-textarea
-                class="text-input"
+                part="text-input"
                 placeholder="Type a message..."
                 resize="auto"
                 rows="1"

src/components/chat/chat-input.ts

@@ -156,10 +156,10 @@ export default class IgcChatMessageListComponent extends LitElement {
   protected *renderLoadingTemplate() {
     yield html`${this._chatState?.options?.templates?.composingIndicatorTemplate
       ? this._chatState.options.templates.composingIndicatorTemplate
-      : html`<div class="typing-indicator">
-          <div class="typing-dot"></div>
-          <div class="typing-dot"></div>
-          <div class="typing-dot"></div>
+      : html`<div part="typing-indicator">
+          <div part="typing-dot"></div>
+          <div part="typing-dot"></div>
+          <div part="typing-dot"></div>
         </div>`}`;
   }
 
@@ -170,15 +170,15 @@ export default class IgcChatMessageListComponent extends LitElement {
 
     return html`
       <div
-        class='message-container'
+        part="message-container"
         aria-activedescendant=${this._activeMessageId}
         role="group"
         aria-label="Message list"
         tabindex='0'
         @focusin=${this.handleFocusIn}
         @focusout=${this.handleFocusOut}
         @keydown=${this.handleKeyDown}></div>
-        <div class="message-list">
+        <div part="message-list">
           ${repeat(
             groupedMessages,
             (group) => group.date,
@@ -192,9 +192,9 @@ export default class IgcChatMessageListComponent extends LitElement {
                     <igc-chat-message
                       id=${messageId}
                       role="option"
-                      class=${this._activeMessageId === messageId
+                      part="message-item ${this._activeMessageId === messageId
                         ? 'active'
-                        : ''}
+                        : ''}"
                       .message=${message}
                     >
                     </igc-chat-message>

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

@@ -9,6 +9,7 @@ import type { ChatState } from './chat-state.js';
 import { renderMarkdown } from './markdown-util.js';
 import IgcMessageAttachmentsComponent from './message-attachments.js';
 import { styles } from './themes/message.base.css.js';
+import { styles as shared } from './themes/shared/chat-message.common.css.js';
 import type { IgcMessage } from './types.js';
 
 /**
@@ -19,7 +20,7 @@ import type { IgcMessage } from './types.js';
 export default class IgcChatMessageComponent extends LitElement {
   public static readonly tagName = 'igc-chat-message';
 
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   @consume({ context: chatContext, subscribe: true })
   private _chatState?: ChatState;
@@ -49,8 +50,8 @@ export default class IgcChatMessageComponent extends LitElement {
       this._chatState?.options?.markdownRenderer || renderMarkdown;
 
     return html`
-      <div class=${containerClass}>
-        <div class="bubble">
+      <div part=${containerClass}>
+        <div part="bubble">
           ${this._chatState?.options?.templates?.messageTemplate && this.message
             ? this._chatState.options.templates.messageTemplate(this.message)
             : html` ${sanitizedMessageText