fix(chat): fix file drag&drop

Author: teodosiah

src/components/chat/chat-input.ts

@@ -78,7 +78,7 @@ export default class IgcChatInputComponent extends LitElement {
   private inputPlaceholder = '';
 
   @state()
-  private dragPart = '';
+  private containerPart = 'input-container';
 
   constructor() {
     super();
@@ -216,7 +216,7 @@ export default class IgcChatInputComponent extends LitElement {
       this._chatState?.isFileTypeAccepted(item.getAsFile() as File, item.type)
     );
 
-    this.dragPart = hasValidFiles ? 'dragging' : '';
+    this.containerPart = `input-container ${hasValidFiles ? ' dragging' : ''}`;
 
     this._chatState?.emitEvent('igcAttachmentDrag');
   }
@@ -241,14 +241,14 @@ export default class IgcChatInputComponent extends LitElement {
       y <= rect.top ||
       y >= rect.bottom
     ) {
-      this.dragPart = '';
+      this.containerPart = 'input-container';
     }
   }
 
   private handleDrop(e: DragEvent) {
     e.preventDefault();
     e.stopPropagation();
-    this.dragPart = '';
+    this.containerPart = 'input-container';
 
     const files = Array.from(e.dataTransfer?.files || []);
     if (files.length === 0) return;
@@ -330,7 +330,7 @@ export default class IgcChatInputComponent extends LitElement {
 
   protected override render() {
     return html`
-      <div part="input-container ${this.dragPart}">
+      <div part="${this.containerPart}">
         ${this._chatState?.inputAttachments &&
         this._chatState?.inputAttachments.length > 0
           ? this.renderAttachmentsArea()

src/components/chat/chat-message.ts

@@ -78,15 +78,15 @@ export default class IgcChatMessageComponent extends LitElement {
    * - Renders attachments and custom templates if provided.
    */
   protected override render() {
-    const containerClass = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;
+    const containerPart = `message-container ${this.message?.sender === this._chatState?.currentUserId ? 'sent' : ''}`;
     const sanitizedMessageText = this.sanitizeMessageText(
       this.message?.text.trim() || ''
     );
     const renderer =
       this._chatState?.options?.markdownRenderer || renderMarkdown;
 
     return html`
-      <div part=${containerClass}>
+      <div part=${containerPart}>
         <div part="bubble">
           ${this._chatState?.options?.templates?.messageTemplate && this.message
             ? this._chatState.options.templates.messageTemplate(this.message)

src/components/chat/chat.spec.ts

@@ -209,7 +209,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container ">
+        `<div part="input-container">
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
@@ -500,7 +500,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container ">
+        `<div part="input-container">
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
@@ -562,7 +562,7 @@ describe('Chat', () => {
       expect(eventArgs).to.deep.equal(args);
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container ">
+        `<div part="input-container">
             <div aria-label="Attachments" part="attachments" role="list">
               <div part="attachment-wrapper" role="listitem">
                 <igc-chip removable="">
@@ -982,7 +982,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container ">
+        `<div part="input-container">
           <div aria-label="Attachments" part="attachments" role="list">
               <div>
                 <a href=${draftMessage.attachments[0].url} target="_blank">