feat(chat): modify messages styling

Author: teodosiah

src/components/chat/chat-message.ts

@@ -46,14 +46,12 @@ export default class IgcChatMessageComponent extends LitElement {
   public attachmentContentTemplate?: AttachmentTemplate;
 
   protected override render() {
-    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''}`;
+    const containerClass = `message-container ${!this.isResponse ? 'sent' : ''} bubble`;
 
     return html`
       <div class=${containerClass}>
         ${this.message?.text.trim()
-          ? html` <div class="bubble">
-              ${renderMarkdown(this.message?.text)}
-            </div>`
+          ? html` <div>${renderMarkdown(this.message?.text)}</div>`
           : ''}
         ${this.message?.attachments && this.message?.attachments.length > 0
           ? html`<igc-message-attachments

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

@@ -8,18 +8,14 @@
   }
 
   .message-container {
-    display: flex;
+    display: block;
     justify-content: flex-start;
     align-items: flex-end;
     gap: 8px;
     margin-bottom: 4px;
     animation: fadeIn 0.2s ease-out;
   }
 
-  .message-container.sent {
-    flex-direction: row-reverse;
-  }
-
   .avatar {
     width: 32px;
     height: 32px;
@@ -51,19 +47,18 @@
   .bubble {
     padding: 12px 16px;
     border-radius: 18px;
-    background-color: #E5E5EA;
     color: black;
     word-break: break-all;
     font-weight: 400;
     line-height: 1.4;
     position: relative;
     transition: all 0.2s ease;
+    width: fit-content;
   }
 
-  .sent .bubble {
+  .sent {
     border-radius: 18px 18px 4px;
-    background-color: #0A84FF;
-    color: white;
+    background-color: #E5E5EA;
   }
 
   .received .bubble {