chat css

app/assets/stylesheets/pages/_index.scss

@@ -2,6 +2,7 @@
 @import "home";
 @import "contacts";
 @import "settings";
+@import "messages";
 
 .accept-call-button {
   border-style: none;

app/assets/stylesheets/pages/_messages.scss

@@ -0,0 +1,19 @@
+.messages-container-container {
+  background-color: $card-background;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  .chat {
+    position: absolute;
+    bottom: 10px;
+  }
+}
+
+#messages-container {
+  overflow: scroll;
+  height: 80%;
+  padding: 10px;
+  .message {
+    color: white;
+  }
+}

app/controllers/pages_controller.rb

@@ -39,6 +39,7 @@ class PagesController < ApplicationController
     chatroom = 'chat_room_' + params[:chat_room_id]
     puts params
     user_info = {}
+    photo_url = current_user.photo.url || "https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
 
     if current_user.first_name.nil? || current_user.last_name.nil?
       user_info[:name] = current_user.email
@@ -50,7 +51,9 @@ class PagesController < ApplicationController
       chat_message: {
         message: 'test',
         user_info: user_info,
-        time_stamp: Time.now }
+        time_stamp: Time.now,
+        photo_url: photo_url
+        }
       })
     head :ok
   end

app/javascript/packs/chatrooms.js

@@ -1,5 +1,5 @@
 import ActionCable from 'actioncable'
-
+// import { scrollLastMessageIntoView } from './chatrooms'
 // create App object with key cable == new cosumer
 (function() {
   window.App || (window.App = {});
@@ -24,11 +24,20 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
         const chatMessage = data["chat_message"]
         const message = `${chatMessage["message"]}`
         const messagesContainer = document.getElementById('messages-container')
+
+
+        const messageDiv = document.createElement("div")
+        const photo = document.createElement("img")
+        photo.src = chatMessage["photo_url"]
+
+        // messageDiv.appendChild(photo)
+
         const messageElement = document.createElement("p")
+        messageElement.classList.add("message")
         messageElement.innerText = message
         messagesContainer.appendChild(messageElement)
-      }
-      else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
+
+      } else if (data["chat_message"] && data["chat_message"]["userId"] != userId) {
         const chatMessage = data["chat_message"]
         const target = document.getElementById('language-1').value
 
@@ -51,9 +60,11 @@ App['chatroom' + chatroomId] = App.cable.subscriptions.create({
         }
       } else if (data["translated_message"] && data["userId"] == userId) {
           const messagesContainer = document.getElementById('messages-container')
-          const message = document.createElement("p")
-          message.innerText = data["translated_message"]
-          messagesContainer.appendChild(message)
+          const messageElement = document.createElement("p")
+          messageElement.classList.add("message")
+          messageElement.innerText = data["translated_message"]
+          messagesContainer.appendChild(messageElement)
+          scrollLastMessageIntoView();
       } else {
         // console.log(data)
       }

app/javascript/packs/scroll.js

@@ -0,0 +1,10 @@
+function scrollLastMessageIntoView() {
+  const messages = document.querySelectorAll('.message');
+  const lastMessage = messages[messages.length - 1];
+
+  if (lastMessage !== undefined) {
+    lastMessage.scrollIntoView();
+  }
+}
+
+export { scrollLastMessageIntoView }

app/views/chat_rooms/show.html.erb

@@ -4,6 +4,11 @@
 
 <div id="chatroom-hook" data-chatroom-id='<%= @chat_room.id %>'></div>
 
+
+<!-- <div class="row">
+  <div class="col-xs-12 col-sm-6 col-lg-4"></div>
+  <div class="col-xs-12 col-sm-6 col-lg-4"></div>
+</div> -->
 <div class="call-container">
   <div id="remote-video-container">
     <div id="video_overlays">
@@ -13,25 +18,19 @@
       <i class="far fa-hand-paper hand"></i>
   </div>
 
-  <div class="translate-container">
-
-  </div>
   <div class="messages-container-container">
-    <div id="messages-container" style="color: white;">
+    <div id="messages-container">
     </div>
-
-    <div class="input-group mb-3">
+    <div class="chat">
       <select id="language-1" class="input-field-text-black input-dropdown form-control">
         <% @languages.each do |language| %>
           <option value="<%= language.code %>"><%= language.name %></option>
         <% end %>
       </select>
-      <input type="text" class="form-control" name="chat-input" id="chat-input" value="" aria-describedby="basic-addon2">
-      <div class="input-group-append">
+      <input type="text" class="form-control" name="chat-input" id="chat-input" value="">
       <button class="btn btn-primary" id="send-btn" type="submit" remote: true>Send</button>
     </div>
   </div>
-  </div>
 </div>
 
 <div><span id="current-user" class="text-color" style="display:none"><%= current_user.id %></span></div>