[Enhancement] Group widget messages by users (#367)

* Remove thumbnail

* Show grouped messages

.rubocop.yml

@@ -39,3 +39,4 @@ AllCops:
     - vendor/**/*
     - node_modules/**/*
     - lib/tasks/auto_annotate_models.rake
+    - config/environments/**/*

app/javascript/dashboard/assets/scss/_woot.scss

@@ -21,7 +21,6 @@
 @import 'widgets/states';
 @import 'widgets/status-bar';
 @import 'widgets/tabs';
-@import 'widgets/thumbnail';
 @import 'widgets/woot-tables';
 
 @import 'views/settings/inbox';

app/javascript/dashboard/assets/scss/widgets/_thumbnail.scss

@@ -1,18 +0,0 @@
-.user-thumbnail-box {
-  @include flex-shrink;
-  position: relative;
-
-  .user-thumbnail {
-    border-radius: 50%;
-    height: 100%;
-    width: 100%;
-  }
-
-  .source-badge {
-    bottom: -$space-micro / 2;
-    height: $space-slab;
-    position: absolute;
-    right: $zero;
-    width: $space-slab;
-  }
-}

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -76,3 +76,27 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@import '~dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/mixins';
+
+.user-thumbnail-box {
+  @include flex-shrink;
+  position: relative;
+
+  .user-thumbnail {
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+  }
+
+  .source-badge {
+    bottom: -$space-micro / 2;
+    height: $space-slab;
+    position: absolute;
+    right: $zero;
+    width: $space-slab;
+  }
+}
+</style>

app/javascript/widget/components/AgentMessage.vue

@@ -1,31 +1,38 @@
 <template>
   <div class="agent-message">
     <div class="avatar-wrap">
-      <UserAvatar size="small" :src="avatarUrl" />
+      <thumbnail
+        v-if="showAvatar"
+        :src="avatarUrl"
+        size="24px"
+        :username="agentName"
+      />
     </div>
     <div class="message-wrap">
-      <h5 class="agent-name">
-        {{ agentName }}
-      </h5>
       <AgentMessageBubble :message="message" />
+      <p v-if="showAvatar" class="agent-name">
+        {{ agentName }}
+      </p>
     </div>
   </div>
 </template>
 
 <script>
-import UserAvatar from 'widget/components/UserAvatar.vue';
 import AgentMessageBubble from 'widget/components/AgentMessageBubble.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 export default {
   name: 'AgentMessage',
   components: {
-    UserAvatar,
     AgentMessageBubble,
+    Thumbnail,
   },
   props: {
     message: String,
     avatarUrl: String,
     agentName: String,
+    showAvatar: Boolean,
+    createdAt: Number,
   },
 };
 </script>
@@ -35,10 +42,10 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 .conversation-wrap {
   .agent-message {
+    align-items: flex-end;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: flex-end;
     margin: 0 0 $space-micro $space-small;
     max-width: 88%;
 
@@ -48,14 +55,6 @@ export default {
       .chat-bubble {
         border-top-left-radius: $space-smaller;
       }
-
-      .user-avatar {
-        visibility: hidden;
-      }
-
-      .agent-name {
-        display: none;
-      }
     }
 
     & + .user-message {
@@ -63,23 +62,28 @@ export default {
     }
 
     .avatar-wrap {
-      flex-shrink: 1;
+      height: $space-medium;
-      flex-grow: 0;
+      width: $space-medium;
+
+      .user-thumbnail-box {
+        margin-top: -$space-large;
+      }
     }
 
     .message-wrap {
-      max-width: 90%;
-      flex-shrink: 0;
       flex-grow: 1;
+      flex-shrink: 0;
       margin-left: $space-small;
-
+      max-width: 90%;
-      .agent-name {
-        font-weight: $font-weight-medium;
-        margin-bottom: $space-smaller;
-        margin-left: $space-two;
-        color: $color-body;
-      }
     }
   }
+
+  .agent-name {
+    color: $color-body;
+    font-size: $font-size-default;
+    font-weight: $font-weight-medium;
+    margin-bottom: $space-small;
+    margin-top: $space-small;
+  }
 }
 </style>

app/javascript/widget/components/ChatMessage.vue

@@ -4,7 +4,13 @@
     :message="message.content"
     :status="message.status"
   />
-  <AgentMessage v-else :agent-name="agentName" :message="message.content" />
+  <AgentMessage
+    v-else
+    :agent-name="agentName"
+    :message="message.content"
+    :show-avatar="message.showAvatar"
+    :avatar-url="avatarUrl"
+  />
 </template>
 
 <script>
@@ -19,6 +25,7 @@ export default {
   },
   props: {
     message: Object,
+    showAvatar: Boolean,
   },
   computed: {
     isUserMessage() {
@@ -27,6 +34,9 @@ export default {
     agentName() {
       return this.message.sender ? this.message.sender.name : '';
     },
+    avatarUrl() {
+      return this.message.sender ? this.message.sender.avatar_url : '';
+    },
   },
 };
 </script>

app/javascript/widget/components/ConversationWrap.vue

@@ -4,10 +4,10 @@
       <div v-if="isFetchingList" class="message--loader">
         <spinner></spinner>
       </div>
-      <div v-for="date in conversationDates" :key="date">
+      <div v-for="groupedMessage in groupedMessages" :key="groupedMessage.date">
-        <date-separator :date="date"></date-separator>
+        <date-separator :date="groupedMessage.date"></date-separator>
         <ChatMessage
-          v-for="message in groupedMessages[date]"
+          v-for="message in groupedMessage.messages"
           :key="message.id"
           :message="message"
         />
@@ -33,7 +33,7 @@ export default {
     Spinner,
   },
   props: {
-    groupedMessages: Object,
+    groupedMessages: Array,
   },
   data() {
     return {
@@ -48,9 +48,6 @@ export default {
       isFetchingList: 'conversation/getIsFetchingList',
       conversationSize: 'conversation/getConversationSize',
     }),
-    conversationDates() {
-      return Object.keys(this.groupedMessages);
-    },
   },
   watch: {
     allMessagesLoaded() {

app/javascript/widget/components/UserMessage.vue

@@ -43,12 +43,6 @@ export default {
       .chat-bubble {
         border-top-right-radius: $space-smaller;
       }
-      .user-avatar {
-        visibility: hidden;
-      }
-      .agent-name {
-        display: none;
-      }
     }
     & + .agent-message {
       margin-top: $space-normal;

app/javascript/widget/store/modules/conversation.js

@@ -45,9 +45,33 @@ export const getters = {
     return {};
   },
   getGroupedConversation: _state => {
-    return groupBy(Object.values(_state.conversations), message =>
+    const conversationGroupedByDate = groupBy(
-      new DateHelper(message.created_at).format()
+      Object.values(_state.conversations),
+      message => new DateHelper(message.created_at).format()
     );
+
+    return Object.keys(conversationGroupedByDate).map(date => {
+      const messages = conversationGroupedByDate[date].map((message, index) => {
+        let showAvatar = false;
+        if (index === conversationGroupedByDate[date].length - 1) {
+          showAvatar = true;
+        } else {
+          const nextMessage = conversationGroupedByDate[date][index + 1];
+          const currentSender = message.sender ? message.sender.name : '';
+          const nextSender = nextMessage.sender ? nextMessage.sender.name : '';
+          showAvatar = currentSender !== nextSender;
+        }
+        return {
+          showAvatar,
+          ...message,
+        };
+      });
+
+      return {
+        date,
+        messages,
+      };
+    });
   },
   getIsFetchingList: _state => _state.uiFlags.isFetchingList,
 };

app/javascript/widget/store/modules/specs/conversation/getters.spec.js

@@ -79,31 +79,41 @@ describe('#getters', () => {
         },
       },
     };
-    expect(getters.getGroupedConversation(state)).toEqual({
+    expect(getters.getGroupedConversation(state)).toEqual([
-      'Nov 18, 2019': [
+      {
-        {
+        date: 'Nov 18, 2019',
-          id: 1,
+        messages: [
-          content: 'Thanks for the help',
+          {
-          created_at: 1574075964,
+            id: 1,
-        },
+            content: 'Thanks for the help',
-        {
+            created_at: 1574075964,
-          id: 2,
+            showAvatar: false,
-          content: 'Yes, It makes sense',
+          },
-          created_at: 1574092218,
+          {
-        },
+            id: 2,
-      ],
+            content: 'Yes, It makes sense',
-      'Dec 14, 2019': [
+            created_at: 1574092218,
-        {
+            showAvatar: true,
-          id: 3,
+          },
-          content: 'Hey',
+        ],
-          created_at: 1576340623,
+      },
-        },
+      {
-        {
+        date: 'Dec 14, 2019',
-          id: 4,
+        messages: [
-          content: 'How may I help you',
+          {
-          created_at: 1576340626,
+            id: 3,
-        },
+            content: 'Hey',
-      ],
+            created_at: 1576340623,
-    });
+            showAvatar: false,
+          },
+          {
+            id: 4,
+            content: 'How may I help you',
+            created_at: 1576340626,
+            showAvatar: true,
+          },
+        ],
+      },
+    ]);
   });
 });

app/models/user.rb

@@ -47,6 +47,7 @@ class User < ApplicationRecord
   include DeviseTokenAuth::Concerns::User
   include Events::Types
   include Pubsubable
+  include Rails.application.routes.url_helpers
 
   devise :database_authenticatable,
          :registerable,
@@ -103,9 +104,18 @@ class User < ApplicationRecord
     Rails.configuration.dispatcher.dispatch(AGENT_REMOVED, Time.zone.now, account: account)
   end
 
+  def avatar_url
+    if avatar.attached? && avatar.representable?
+      url_for(avatar.representation(resize: '250x250'))
+    else
+      ''
+    end
+  end
+
   def push_event_data
     {
-      name: name
+      name: name,
+      avatar_url: avatar_url
     }
   end
 end

config/environments/development.rb

@@ -40,6 +40,8 @@ Rails.application.configure do
   config.action_mailer.delivery_method = :letter_opener
   config.action_mailer.perform_deliveries = true
 
+  Rails.application.routes.default_url_options = { host: 'localhost', port: 3000 }
+
   # Print deprecation notices to the Rails logger.
   config.active_support.deprecation = :log
 
@@ -67,7 +69,6 @@ Rails.application.configure do
   # Disable host check during development
   config.hosts = nil
 
-
   # Bullet configuration to fix the N+1 queries
   config.after_initialize do
     Bullet.enable = true

config/environments/production.rb

@@ -56,16 +56,18 @@ Rails.application.configure do
   # config.active_job.queue_name_prefix = "chatwoot_production"
 
   config.action_mailer.perform_caching = false
-  config.action_mailer.default_url_options = { :host => ENV['FRONTEND_URL'] }
+  config.action_mailer.default_url_options = { host: ENV['FRONTEND_URL'] }
   config.action_mailer.smtp_settings = {
-    :address => ENV['SMTP_ADDRESS'],
+    address: ENV['SMTP_ADDRESS'],
-    :port => 587,
+    port: 587,
-    :user_name => ENV["SMTP_USERNAME"],
+    user_name: ENV['SMTP_USERNAME'],
-    :password => ENV["SMTP_PASSWORD"],
+    password: ENV['SMTP_PASSWORD'],
-    :authentication => :login,
+    authentication: :login,
-    :enable_starttls_auto => true
+    enable_starttls_auto: true
   }
 
+  Rails.application.routes.default_url_options = { host: ENV['FRONTEND_URL'] }
+
   # Ignore bad email addresses and do not raise email delivery errors.
   # Set this to true and configure the email server for immediate delivery to raise delivery errors.
   # config.action_mailer.raise_delivery_errors = false

config/environments/staging.rb

@@ -66,6 +66,8 @@ Rails.application.configure do
     enable_starttls_auto: true
   }
 
+  Rails.application.routes.default_url_options = { host: ENV['FRONTEND_URL'] }
+
   # Ignore bad email addresses and do not raise email delivery errors.
   # Set this to true and configure the email server for immediate delivery to raise delivery errors.
   # config.action_mailer.raise_delivery_errors = false

config/environments/test.rb

@@ -21,6 +21,7 @@ Rails.application.configure do
     'Cache-Control' => "public, max-age=#{1.hour.to_i}"
   }
   config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
+  Rails.application.routes.default_url_options = { host: 'localhost', port: 3000 }
 
   # Show full error reports and disable caching.
   config.consider_all_requests_local       = true