refactor(*): Adding wrapping containers for some renderers

Author: gedinakova

src/components/chat/chat-input.ts

@@ -334,10 +334,16 @@ export default class IgcChatInputComponent extends LitElement {
     const ctx: ChatRenderContext = { instance: this._state.host };
 
     return html`
-      ${this._getRenderer('fileUploadButton')(ctx)}
-      ${this._getRenderer('inputActionsStart')(ctx)}
-      ${this._getRenderer('sendButton')(ctx)}
-      ${this._getRenderer('inputActionsEnd')(ctx)}
+      <div part="file-upload">
+        ${this._getRenderer('fileUploadButton')(ctx)}
+      </div>
+      <div part="input-actions-start">
+        ${this._getRenderer('inputActionsStart')(ctx)}
+      </div>
+      <div part="send-button">${this._getRenderer('sendButton')(ctx)}</div>
+      <div part="input-actions-end">
+        ${this._getRenderer('inputActionsEnd')(ctx)}
+      </div>
     `;
   }
 

src/components/chat/chat-message.ts

@@ -266,7 +266,10 @@ export default class IgcChatMessageComponent extends LitElement {
       ${cache(
         this.message
           ? html`
-              <div part=${partMap(parts)}>
+              <div
+                part=${partMap(parts)}
+                exportparts="attachment: message-attachment, attachments-container: message-attachments-container"
+              >
                 ${cache(
                   messageRenderer ? messageRenderer(ctx) : this._renderMessage()
                 )}

src/components/chat/chat.ts

@@ -386,8 +386,8 @@ export default class IgcChatComponent extends EventEmitterMixin<
                 id=${`message-${message.id}`}
                 part="message-item"
                 .message=${message}
-                exportparts="message-container, message-text, message-attachments, message-actions, sent,
-                    attachments-container, attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
+                exportparts="message-container, message-text, message-attachments-container, message-attachment, message-actions, sent,
+                    attachment, attachment-header, attachment-content, attachment-icon, file-name, actions: attachment-actions"
               >
               </igc-chat-message>
             `;
@@ -489,7 +489,8 @@ export default class IgcChatComponent extends EventEmitterMixin<
           message-item,
           message,
           message-text,
-          message-attachments,
+          message-attachment,
+          message-attachments-container,
           message-actions,
           typing-indicator,
           attachments-container,
@@ -499,7 +500,11 @@ export default class IgcChatComponent extends EventEmitterMixin<
           attachment-icon,
           file-name,
           attachment-actions,
-          sent
+          sent,
+          file-upload,
+          input-actions-start,
+          input-actions-end,
+          send-button
         "
       >
         ${this._renderHeader()}

src/components/chat/message-attachments.ts

@@ -139,10 +139,7 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
 
   private _renderAttachment(attachment: IgcChatMessageAttachment) {
     const isCurrentUser = this._state.isCurrentUserMessage(this.message);
-    const attachmentParts = {
-      attachment: true,
-      sent: isCurrentUser,
-    };
+
     const contentParts = {
       'attachment-content': true,
       sent: isCurrentUser,
@@ -172,16 +169,18 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
     </div>`;
 
     return html`
-      <div part=${partMap(attachmentParts)}>
-        ${isCurrentUser ? content : nothing} ${header}
-        ${!isCurrentUser ? content : nothing}
-      </div>
+      ${isCurrentUser ? content : nothing} ${header}
+      ${!isCurrentUser ? content : nothing}
     `;
   }
 
   protected override render() {
     const attachments = this.message?.attachments ?? [];
-
+    const isCurrentUser = this._state.isCurrentUserMessage(this.message);
+    const attachmentParts = {
+      attachment: true,
+      sent: isCurrentUser,
+    };
     return html`${cache(
       this.message
         ? html`
@@ -190,13 +189,15 @@ export default class IgcMessageAttachmentsComponent extends LitElement {
                 attachments,
                 (attachment) => attachment.id,
                 (attachment) => html`
-                  ${until(
-                    this._getRenderer('attachment')({
-                      attachment,
-                      message: this.message!,
-                      instance: this._state.host,
-                    })
-                  )}
+                  <div part="${partMap(attachmentParts)}">
+                    ${until(
+                      this._getRenderer('attachment')({
+                        attachment,
+                        message: this.message!,
+                        instance: this._state.host,
+                      })
+                    )}
+                  </div>
                 `
               )}
             </div>