feat(chat): revert sent message to row-reverse

Author: teodosiah

src/components/chat/chat-message.ts

@@ -46,23 +46,25 @@ export default class IgcChatMessageComponent extends LitElement {
   public attachmentContentTemplate?: AttachmentTemplate;
 
   protected override render() {
-    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''} bubble`;
+    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
 
     return html`
       <div class=${containerClass}>
-        ${this.message?.text.trim()
-          ? 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>`
-          : ''}
+        <div class="bubble">
+          ${this.message?.text.trim()
+            ? 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>`
+            : ''}
+        </div>
       </div>
     `;
   }

src/components/chat/themes/message.base.scss

@@ -8,14 +8,19 @@
   }
 
   .message-container {
-    display: block;
+    display: flex;
     justify-content: flex-start;
     align-items: flex-end;
     gap: 8px;
     margin-bottom: 4px;
     animation: fadeIn 0.2s ease-out;
   }
 
+  .message-container.sent {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
   .avatar {
     width: 32px;
     height: 32px;
@@ -45,6 +50,7 @@
   }
 
   .bubble {
+    display: block;
     padding: 12px 16px;
     border-radius: 18px;
     color: black;
@@ -58,6 +64,9 @@
 
   .sent {
     border-radius: 18px 18px 4px;
+  }
+
+  .sent .bubble {
     background-color: #E5E5EA;
   }