feat: enhance chat room UI with user avatars and message improvements

- Added user avatar generation with external avatar service
- Implemented message styling with user-specific layouts
- Added message length counter and validation
- Updated CSS for improved message and user profile display
- Restricted message length to 2048 characters
- Added disabled state for send button based on message length

apps/web/src/App.css

@@ -79,6 +79,35 @@ body {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid white;
+}
+
+.logout-button {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.logout-button:hover {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
 .app-main {
   flex: 1;
   padding: 1rem;
@@ -180,11 +209,6 @@ button:disabled {
   border-radius: 0.25rem;
 }
 
-.logout-button {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-}
-
 /* Chat styles */
 .chat-container {
   display: flex;
@@ -357,21 +381,53 @@ button:disabled {
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+  padding: 1rem;
+}
+
+.message-wrapper {
+  display: flex;
+  align-items: flex-end;
+  max-width: 100%;
+  gap: 0.75rem;
+}
+
+.message-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  align-self: flex-end;
 }
 
 .message {
-  max-width: 70%;
+  max-width: 85%;
+  min-width: 100px;
   padding: 0.75rem;
   border-radius: 0.5rem;
+  word-break: break-word;
+  line-height: 1.4;
+  width: fit-content;
+  display: inline-block;
+}
+
+.other-message-wrapper {
+  align-self: flex-start;
+}
+
+.own-message-wrapper {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.other-message {
   background-color: #f3f4f6;
   align-self: flex-start;
 }
 
-.message.own-message {
+.own-message {
   background-color: rgba(79, 70, 229, 0.1);
   align-self: flex-end;
 }
@@ -385,18 +441,31 @@ button:disabled {
 
 .username {
   font-weight: 500;
+  margin-right: 0.5rem;
 }
 
 .time {
   color: var(--secondary-color);
+  opacity: 0.7;
 }
 
 .message-content {
   word-break: break-word;
+  white-space: pre-wrap;
+  display: inline-block;
+  text-align: justify;
+}
+
+.message-length-counter {
+  font-size: 0.75rem;
+  color: var(--secondary-color);
+  margin-right: 0.5rem;
+  align-self: center;
 }
 
 .message-form {
   display: flex;
+  align-items: center;
   padding: 1rem;
   border-top: 1px solid var(--border-color);
 }
@@ -413,6 +482,11 @@ button:disabled {
   border-radius: 0 0.25rem 0.25rem 0;
 }
 
+.message-form button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 /* Create Room styles */
 .create-room {
   padding: 1rem;