add the stylesheet for chats

app/assets/stylesheets/messages.scss

@@ -31,3 +31,30 @@
     }
   }
 }
+
+.chat {
+  .message {
+    display: flex;
+  }
+  @mixin message-layout($textAlign, $justifyContent) {
+    justify-content: $justifyContent;
+    .user-profile {
+      text-align: $textAlign;
+      .name {
+        font-size: 50%;
+      }
+    }
+    .message-body {
+      width: 350px;
+      margin: 0 10px;
+      text-align: $textAlign;
+      word-break: break-all;
+    }
+  }
+  .message-left {
+    @include message-layout(left, flex-start);
+  }
+  .message-right {
+    @include message-layout(right, flex-end);
+  }
+}

app/views/messages/show_chat.html.erb

@@ -1,11 +1,28 @@
-<div class="chats">
+<div class="chat">
   <% @messages.each do |message| %>
-    <% if message.to.id == current_user.id %>
-      <div class="message-left">
-    <% else %>
-      <div class="message-right">
-    <% end %>
-        <%= message.from.name %>: <%= message.body %>
-      </div>
+    <div class="message <%= message.to.id == current_user.id ? "message-left" : "message-right" %>">
+        <% if message.to.id != current_user.id %>
+          <div class="message-body">
+            <p>
+              <%= message.body %>
+            </p>
+          </div>
+        <% end %>
+        <div class="user-profile">
+          <div class="avatar">
+            <img src="<%= get_gavater_img(message.from.email, 50) %>"/>
+          </div>
+          <div class="name">
+            <%= message.from.name %>
+          </div>
+        </div>
+        <% if message.to.id == current_user.id %>
+          <div class="message-body">
+            <p>
+              <%= message.body %>
+            </p>
+          </div>
+        <% end %>
+    </div>
   <% end %>
 </div>