chat 0.2.0 → 0.9.0

data/app/assets/stylesheets/chat/message_form.sass

@@ -1,7 +1,7 @@
-@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
 
 #chat .new_message
-  margin: 0px 40px 36px 40px
+  margin: 0px 20px 25px 20px
   flex-direction: column
   display: flex
   position: relative
@@ -15,7 +15,7 @@
     cursor: pointer
     font-size: 22px
     &:hover
-      color: #212121
+      color: #fff
   input[type='text'], textarea
     font-size: 17px
     font-family: "Lato" !important
@@ -35,7 +35,7 @@
       width: 0
       bottom: 0px
       position: absolute
-      background: #3f51b5
+      background: #fff
       transition: 0.2s ease all
       -moz-transition: 0.2s ease all
       -webkit-transition: 0.2s ease all
@@ -48,3 +48,6 @@
     width: 50%
   input[type='file']
     display: none !important
+  .emojionearea .emojionearea-editor
+    border-bottom: 1px solid #bdbdbd !important
+    color: #fff !important

data/app/assets/stylesheets/chat/new.sass

@@ -1,52 +1,57 @@
-@import "https://fonts.googleapis.com/css?family=Lato:300&subset=latin-ext"
+@import "https://fonts.googleapis.com/css?family=Lato:300,400,700,900"
 
 #chat .new_conversation
-  height: calc(100% - 48px)
-  display: none
+  height: calc(100% - 50px)
+  overflow-y: scroll
+  position: absolute
+  right: 100%
+  transition: 0.5s
+  width: 100%
+  z-index: 13
+  display: flex
   flex-direction: column
-  .chat__user-check-boxes
-    margin: 10px 20px 0px 20px
-    display: flex
-    flex-direction: column
-    height: calc(100% - 48px)
-    overflow-y: auto
-    &::-webkit-scrollbar
-      display: none
+  &::-webkit-scrollbar
+    visibility: hidden
   label
     position: relative
     margin: 1rem
-    line-height: 135%
     cursor: pointer
-    font-size: 18px
     font-family: "Lato" !important
     letter-spacing: 1.5px !important
     padding-left: 40px
+    color: #fff
+    width: calc(100% - 40px - 1rem)
   .chat__status
     &:after
       content: "\2022"
     &.offline
       &:after
-        color: #EF5350
+        color: hsl(355, 65%, 65%)
     &.online
       &:after
         color: #AED581
 
+  .chat__submit-container
+    margin: 1rem
+    padding: 10px 0
+    width: calc(100% - 1rem)
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
   input[type='submit']
-    border-top: 1px solid #BDBDBD
-    border-left: none
-    border-bottom: none
-    border-right: none
+    border: none
     font-family: "Lato" !important
     letter-spacing: 1.5px !important
     font-size: 17px
     background: transparent
-    width: 100%
-    padding: 10px 0 10px 0
+    padding: 0
     cursor: pointer
     transition: all 0.3s ease
     z-index: 10
-    &:hover
-      background: #BDBDBD
+    color: #fff
+    margin: 0px
 
 #chat .chat__errors
   text-align: center

data/app/assets/stylesheets/chat/transcript.sass

@@ -1,76 +1,72 @@
 #chat .current_chat
-  height: calc(100% - 48px)
+  display: flex
   flex-direction: column
+  overflow-y: scroll
+  position: absolute
+  width: 100%
+  height: calc(100% - 50px)
+  left: 100%
+  opacity: 1
+  transition: 0.5s
+  z-index: 13
+  &::-webkit-scrollbar
+    visibility: hidden
   img.chat__user-avatar
     width: 50px
     height: 50px
     object-fit: cover
     border-radius: 50%
+  .transcript_placeholder_avatar
+    width: 50px
+    height: 50px
   i.chat__user-avatar
     font-size: 50px
   .chat__transcript
-    max-height: calc(100% - 78px)
-    overflow-y: auto
-    &::-webkit-scrollbar
-      display: none
-  .chat__image-message
-    width: 100%
-    padding-top: 10px
-    padding-bottom: 10px
-    img
-      width: 100%
-      border-bottom: 4px solid #C8E6C9
-    &.current img
-      border-bottom: 4px solid #B2EBF2
-  .chat__message
-    padding: 10px
-    display: flex
-    flex-direction: row
-    img
-      font-size: inherit
-      height: 2ex
-      width: 2.1ex
-      min-height: 20px
-      min-width: 20px
-      display: inline-block
-      margin: -.2ex .15em .2ex
-      line-height: normal
-      vertical-align: middle
-      max-width: 100%
-      top: 0
-    .text
-      padding: 5px
-      flex: 1
-      position: relative
+    margin-left: 25px
+    margin-right: 25px
+    .message-container
+      display: flex
+      flex-direction: row
       &.right
-        margin-right: 10px
-        border-radius: 5px 0px 5px 5px
-        background: #B2EBF2
-        border: none
-        &:after
-          content: ""
-          position: absolute
-          border-style: solid
-          border-width: 0px 0 13px 15px
-          border-color: transparent #B2EBF2
-          display: block
-          width: 0
-          z-index: 1
-          right: -15px
-          top: 0px
-      &.left
-        margin-left: 10px
-        border-radius: 0px 5px 5px 5px
-        background: #C8E6C9
-        border: none
-        &:after
-          content: ""
-          position: absolute
-          border-style: solid
-          border-width: 0px 15px 13px 0px
-          border-color: transparent #C8E6C9
+        text-align: right
+        flex-direction: row-reverse
+        .message
+          flex-direction: row-reverse
+          .content
+            border-top-right-radius: 0 !important
+            border-top-left-radius: 10px !important
+          &.image img
+            border-top-right-radius: 0 !important
+            border-top-left-radius: 10px !important
+      .message
+        min-height: 50px
+        display: flex
+        margin: 0 10px 5px 10px
+        flex: 1
+        flex-direction: row
+        max-width: 100%
+        &.image
           display: block
-          width: 0
-          z-index: 1
-          left: -15px
-          top: 0px
+          img
+            max-width: 100%
+            border-radius: 10px
+            border-top-left-radius: 0
+        .content
+          background: #fff
+          padding: 10px
+          border-radius: 10px
+          color: #212121
+          border-top-left-radius: 0
+          word-break: break-all
+          img
+            font-size: inherit
+            height: 2ex
+            width: 2.1ex
+            min-height: 20px
+            min-width: 20px
+            display: inline-block
+            margin: -.2ex .15em .2ex
+            line-height: normal
+            vertical-align: middle
+            max-width: 100%
+            top: 0

data/app/channels/chat/messages_channel.rb

@@ -1,11 +1,12 @@
+# frozen_string_literal: true
+
 class Chat::MessagesChannel < ApplicationCable::Channel
   def follow(data)
     stop_all_streams
     stream_from "chats::#{data['chat_id']}::messages"
   end
 
-  def unfollow
+  def unsubscribed
     stop_all_streams
   end
-  alias unsubscribed unfollow
 end

data/app/channels/chat/notification_channel.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 class Chat::NotificationChannel < ApplicationCable::Channel
   def follow(data)
     stop_all_streams

data/app/channels/chat/status_channel.rb

@@ -1,12 +1,14 @@
-  class Chat::StatusChannel < ApplicationCable::Channel
-    def online
-      stop_all_streams
-      stream_from "chat::status"
-      current_user.online
-    end
+# frozen_string_literal: true
 
-    def unsubscribed
-      current_user.offline
-      stop_all_streams
-    end
+class Chat::StatusChannel < ApplicationCable::Channel
+  def online
+    stop_all_streams
+    stream_from "chat::status"
+    current_user.online
   end
+
+  def unsubscribed
+    current_user.offline
+    stop_all_streams
+  end
+end

data/app/controllers/chat/application_controller.rb

@@ -1,5 +1,9 @@
+# frozen_string_literal: true
+
 module Chat
-  class ApplicationController < ActionController::Base
+  class ApplicationController < ::ApplicationController
     protect_from_forgery with: :exception
+
+    before_action Chat.logged_in_check
   end
 end

data/app/controllers/chat/conversations_controller.rb

@@ -1,6 +1,7 @@
+# frozen_string_literal: true
+
 module Chat
   class ConversationsController < ApplicationController
-    before_action Chat.logged_in_check
     before_action :set_conversation, only: :show
 
     def show
@@ -8,6 +9,14 @@ module Chat
 
     def create
       @conversation = Chat::Conversation.create(conversation_params)
+
+      if @conversation.persisted? ||
+          @conversation.errors.messages[:sessions].present?
+        render template: :create
+      else
+        @conversation = find_existing_conversation
+        render template: "chat/conversations/show"
+      end
     end
 
     private
@@ -20,11 +29,24 @@ module Chat
 
     def conversation_params
       chat_params = params.require(:conversation).permit(user_ids: [])
-      if chat_params[:user_ids].reject(&:blank?).present?
+      if chat_params[:user_ids].reject!(&:blank?).present?
         chat_params[:user_ids] << current_user.id
+        chat_params[:user_ids].map!(&:to_i)
       end
 
       chat_params
     end
+
+    def find_existing_conversation
+      Chat::Conversation.includes(
+        :users, messages: :user
+      ).find(
+        Chat::Conversation.joins(:users).having(
+          "COUNT(DISTINCT users.id) = ?", conversation_params[:user_ids].count
+        ).group(:id).find_by(
+          users: { id: conversation_params[:user_ids] }
+        ).id
+      )
+    end
   end
 end

data/app/controllers/chat/messages_controller.rb

@@ -1,7 +1,9 @@
+# frozen_string_literal: true
+
 module Chat
   class MessagesController < ApplicationController
-    before_action Chat.logged_in_check
     before_action :set_conversation
+    before_action :set_session
 
     def create
       @conversation.messages.create(message_params)
@@ -19,9 +21,13 @@ module Chat
       @conversation = Chat::Conversation.find(params[:conversation_id])
     end
 
+    def set_session
+      @session = @conversation.sessions.find_by(user: current_user)
+    end
+
     def message_params
       params.require(:message).permit(:text, :image).merge(
-        user_id: current_user.id
+        user_id: current_user.id, session_id: @session.id
       )
     end
   end

data/app/helpers/chat/application_helper.rb

@@ -1,18 +1,19 @@
+# frozen_string_literal: true
+
 module Chat
   module ApplicationHelper
-    def render_chat(background = nil, color = nil)
+    def render_chat
       return unless send Chat.signed_in
 
-      render "chat/chat", background: background, color: color
+      render "chat/chat"
     end
 
-    def launch_chat_fab(background = "#4CAF50", color = "light")
+    def launch_chat_fab
       attrs = {
-        class: "chat__launch", style: "background: #{background}",
-        data: { "current-user" => current_user.id }
+        class: "chat__launch", data: { "current-user" => current_user.id }
       }
       button_tag(attrs) do
-        material_icon.forum.css_class("md-#{color}").to_s.html_safe
+        material_icon.forum.css_class("md-dark").to_s.html_safe
       end
     end
 
@@ -32,31 +33,41 @@ module Chat
     end
 
     def chat_avatar(user)
-      if user.send(Chat.user_avatar.to_s + "?")
-        image_tag(user.send(Chat.user_avatar), class: "chat__user-avatar")
+      if user.chat_avatar?
+        image_tag(user.chat_avatar, class: "chat__user-avatar")
       else
         MaterialIcon.new.css_class("chat__user-avatar").person
       end
     end
 
     def chat_list
-      @chat_list ||=
-        Chat::Conversation.joins(:users)
-                          .group("chat_sessions.conversation_id")
-                          .select(:id, group_concat)
-                          .merge(current_user.conversations)
-                          .order(created_at: :desc)
-    end
-
-    private
-
-    def group_concat
-      if ActiveRecord::Base.connection.adapter_name == "SQLite"
-        "GROUP_CONCAT(users.#{::User.first_name} || ' ' || users.#{::User.last_name}, ', ') as names"
-      elsif ActiveRecord::Base.connection.adapter_name == "MySQL"
-        "GROUP_CONCAT(CONCAT(\"users.#{User.first_name}\",\" \", \"users.#{User.last_name}\") "\
-        "SEPARATOR ', ') as names"
+      @chat_list ||= current_user.conversations.includes(:users).order(
+        "chat_conversations.created_at desc"
+      )
+    end
+
+    def chat_avatars(conversation)
+      (conversation.users - [current_user]).first(2).map do |u|
+        chat_avatar(u)
       end
     end
+
+    def chat_avatar_count(conversation)
+      if (count = conversation_user_count(conversation)) <= 2
+        "count_#{count}"
+      else
+        "count_default"
+      end
+    end
+
+    def conversation_user_count(conversation)
+      conversation.users.to_a.size - 1
+    end
+
+    def message_classes(message)
+      css_class = message.user == current_user ? "right" : "left"
+      css_class += message.image? ? " image" : ""
+      css_class
+    end
   end
 end