Merge pull request #7 from omarkhater-school/chat_improvement

Chat improvement

Gemfile.lock

@@ -519,4 +519,4 @@ RUBY VERSION
    ruby 3.2.2p53
 
 BUNDLED WITH
-   2.4.10
+   2.4.10

app/controllers/room_controller.rb

@@ -7,7 +7,13 @@ def show
       puts "sessions current_user_key" + user_key_current.to_s
 
       @user = GeneralInfo.find_by(userKey: user_key_current)
-      @users = GeneralInfo.where.not(userKey: user_key_current)
+      user_ids = Message.where("general_info_id = ? OR chatting_with = ?", @user[:id], @user[:id])
+          .pluck(:general_info_id, :chatting_with)
+          .flatten
+          .uniq
+
+      @users = user_ids.present? ? GeneralInfo.where(id: user_ids).where.not(userKey: user_key_current).order(updated_at: :desc) : nil
+      @allusers = GeneralInfo.where.not(userKey: user_key_current)
       @loader = true
 
       if @user && @user.notification
@@ -91,6 +97,10 @@ def create_message
         @single_room = Room.where(name: @room_name).first || Room.create_private_room([@user, @chatting_with], @room_name)
 
         @message = Message.create(general_info_id: @user[:id], room_id: @single_room[:id], body: params[:body], chatting_with: @chatid)
+        # Check if there are any files in params[:files] and attach them
+        if params[:files].present?
+          @message.files.attach(params[:files])
+        end
       end
 
       redirect_to @chatlink

app/models/message.rb

@@ -1,6 +1,7 @@
 class Message < ApplicationRecord
   belongs_to :general_info
   belongs_to :room
+  has_many_attached :files
   after_commit :notify, on: :create
 
   def notify
@@ -10,4 +11,10 @@ def notify
     @user[:notification_from].append(@from)
     @user.save
   end
+
+  private
+
+  def message_params
+    params.require(:message).permit(:body, :general_info_id, :chatting_with, :room_id)
+  end
 end

app/views/layouts/_new_message_form.html.erb

@@ -1,4 +1,90 @@
-<%= form_tag(@chatlink) do %>
-  <%= text_field_tag "body", "", style: "width: 80%; padding: 12px 20px; margin: 8px 0; border-radius: 4px;", autocomplete: "off", autofocus: "autofocus", placeholder: "Message..." %>
-  <%= submit_tag "send", style: "border-radius: 4px; background-color: #333333; color: white; font-size:20px; padding: 8px 20px; margin: 8px; border-color: #333333"%>
-<% end %>
+<%= form_tag(@chatlink, multipart: true, style: "display: flex; align-items: flex-start;") do %>
+
+  <!-- File upload field as a paperclip symbol, now to the left of the message body -->
+  <div style="display: inline-block; position: relative; margin-right: 10px;">
+  <%= file_field_tag "files[]", 
+    multiple: true, 
+    style: "display: none;", 
+    id: "file-upload-input" %>
+
+  <label for="file-upload-input" style="
+  display: inline-block; 
+  cursor: pointer; 
+  padding: 10px;
+  background-color: transparent;
+  color: #333333;
+  font-size: 20px;
+  ">
+  <i class="fas fa-paperclip"></i> <!-- Font Awesome paperclip icon -->
+  </label>
+  </div>
+
+  <!-- Text field for the body of the message with automatic resizing and scrollable after 4 rows -->
+  <div style="flex-grow: 1; margin-right: 10px; position: relative;">
+  <%= text_area_tag "body", "", 
+    style: "width: 100%; padding: 12px 20px; border-radius: 4px; resize: none; overflow-y: hidden;", 
+    rows: 1,
+    autocomplete: "off", 
+    autofocus: "autofocus", 
+    placeholder: "Message...", 
+    id: "message-body" %>
+  </div>
+
+  <!-- Submit button -->
+  <%= submit_tag "Send", 
+  style: "border-radius: 4px; background-color: #333333; color: white; font-size: 20px; padding: 8px 20px; border-color: #333333; opacity: 0.5; cursor: not-allowed;", 
+  id: "send-button", 
+  disabled: true %>
+<% end %>
+
+<!-- Script to auto-resize the message body and update file count -->
+<script>
+  function updateSendButtonState() {
+  var messageBody = document.getElementById('message-body').value;
+  var fileUploadInput = document.getElementById('file-upload-input').files.length;
+  var sendButton = document.getElementById('send-button');
+
+  if (messageBody.length > 0 || fileUploadInput > 0) {
+    sendButton.style.opacity = '1';
+    sendButton.style.cursor = 'pointer';
+    sendButton.disabled = false;
+  } else {
+    sendButton.style.opacity = '0.5';
+    sendButton.style.cursor = 'not-allowed';
+    sendButton.disabled = true;
+  }
+  }
+
+  document.getElementById('file-upload-input').addEventListener('change', function() {
+  var label = document.querySelector('label[for="file-upload-input"]');
+  if (this.files.length > 0) {
+    label.innerHTML = this.files.length + ' file(s) selected <i class="fas fa-paperclip"></i>';
+  } else {
+    label.innerHTML = '<i class="fas fa-paperclip"></i>';
+  }
+  updateSendButtonState();
+  });
+
+  document.getElementById('message-body').addEventListener('input', function() {
+  const lineHeight = 24; // Approximate height of one line in pixels
+  const maxRows = 5; // Maximum number of rows to show before scrolling
+  const maxHeight = lineHeight * maxRows; // Maximum height before scrollbar appears
+
+  // Reset the height to auto to get the real scrollHeight
+  this.style.height = 'auto'; 
+
+  // If the content is less than the max height, grow normally
+  if (this.scrollHeight <= maxHeight) {
+    this.style.height = this.scrollHeight + 'px';
+    this.style.overflowY = 'hidden'; // Disable scrolling if within limit
+  } else {
+    // If content exceeds max height, fix the height and enable scrolling
+    this.style.height = maxHeight + 'px';
+    this.style.overflowY = 'scroll'; // Enable scrolling
+  }
+  updateSendButtonState();
+  });
+
+  // Initial call to set the correct state of the send button
+  updateSendButtonState();
+</script>

app/views/room/_messages.html.erb

@@ -0,0 +1,34 @@
+<div id="single_room">
+    <a href="<%= show_profile_show_profile_path(:user_key => @chatting_with.userKey) %>">
+    <h1 class="text-center"> <img class="profile-img img-thumbnail" src="<%= @chatting_with.profile_picture.url %>" width="50px" height="50px" style="border-radius:50%;" alt=""> <b> <%= @chatname %> </b></h1>
+    </a>
+    <div id="messages">
+    <% @messages.each do |message| %>
+        <% if message[:general_info_id] == @user[:id] %>
+        <div class="message-box" style="background-color: #147efb; margin-left: auto; margin-right: 0;">
+            <%= simple_format(message[:body]) %>
+            <% message.files.each do |file| %>
+            <p><%= link_to rails_blob_path(file, disposition: "attachment"), style: "color: black; text-decoration: none;", onmouseover: "this.style.color='#404040'", onmouseout: "this.style.color='black'" do %>
+                <i class="fas fa-file" style="margin-right: 5px;"></i>
+                <%= file.filename %>
+                <i class="fas fa-download" style="margin-left: 5px;"></i>
+            <% end %><p>
+            <% end %>
+        </div>
+        <% else %>
+        <div class="message-box" style="background-color: #333333;">
+            <%= simple_format(message[:body]) %>
+            <% message.files.each do |file| %>
+            <p><%= link_to rails_blob_path(file, disposition: "attachment"), style: "color: #008ae6; text-decoration: none;", onmouseover: "this.style.color='#006bb3'", onmouseout: "this.style.color='#008ae6'" do %>
+                <i class="fas fa-file" style="margin-right: 5px;"></i>
+                <%= file.filename %>
+                <i class="fas fa-download" style="margin-left: 5px;"></i>
+            <% end %><p>
+            <% end %>
+        </div>
+        <% end %>
+    <% end%>
+    </div>
+
+    <%= render 'layouts/new_message_form'%>
+</div>