css_and_others_ok

public/style/chat.css

@@ -226,15 +226,9 @@ body {
 }
 
 .message-container {
-    max-width: 100%;
-    border-radius: 5px;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    background-color: #f1f1f1;
     display: flex;
-    flex-direction: column;
+    margin: 8px;
 }
-
 .message-container .message {
     align-self: flex-start;
 }
@@ -246,27 +240,26 @@ body {
 }
 
 .message {
-    padding: 12px 18px;
-    background-color: #e1e1e1;
-    border-radius: 15px;
     max-width: 70%;
-    font-size: 16px;
-    line-height: 1.4;
-    margin-bottom: 0%;
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    position: relative;
-    display: inline-block;
+    padding: 10px;
+    border-radius: 12px;
+    background:var(--secondary-color);
+    margin: 2px 0;
 }
 
 /* Messages de l'utilisateur */
 .message.user {
-    background-color: #3498db;
+    background: #2196f3;
     color: white;
-    align-self: flex-end;
-    text-align: right;
 }
 
+.message-time {
+    font-size: 0.8em;
+    opacity: 0.8;
+    margin-left: 8px;
+}
+
+
 /* Amélioration de l'esthétique des messages */
 /* .message.user:before {
     content: '';

src/pages/chat/chat.ts

@@ -23,7 +23,6 @@ import Database from '../../services/database.service';
 
 const storageUrl = `/storage`;
 
-
 interface LocalNotification {
     memberId: string;
     text: string;
@@ -495,24 +494,27 @@ class ChatElement extends HTMLElement {
             for (const message of memberMessages.messages) {
                 const messageElement = document.createElement('div');
                 messageElement.className = 'message-container';
+                
+                // Ajouter le style pour aligner les messages
+                if (message.sender === myAddresses[0]) {
+                    messageElement.style.justifyContent = 'flex-end';
+                } else {
+                    messageElement.style.justifyContent = 'flex-start';
+                }
 
                 const messageContent = document.createElement('div');
                 messageContent.className = 'message';
                 
                 if (message.sender === myAddresses[0]) {
                     messageContent.classList.add('user');
-                }
-
-                if (message.type === 'file') {
-                    messageContent.innerHTML = `<a href="${message.fileData}" download="${message.fileName}" target="_blank">${message.fileName}</a>`;
-                } else {
-                    const senderDisplay = message.sender === myAddresses[0] 
-                        ? "Me"
-                        : await addressToEmoji(memberAddress);
-                    
                     messageContent.innerHTML = `
-                        <strong>${senderDisplay}</strong>: ${message.text} 
-                        <span style="float: right;">${message.time}</span>
+                        ${message.text}
+                        <span class="message-time">${message.time}</span>
+                    `;
+                } else {
+                    messageContent.innerHTML = `
+                        <strong>${await addressToEmoji(memberAddress)}</strong>: ${message.text}
+                        <span class="message-time">${message.time}</span>
                     `;
                 }