chore: Fixes issue showing the CSAT error message (#6136)

Approved by Muhsin

.env.example

@@ -60,9 +60,10 @@ MAILER_SENDER_EMAIL=Chatwoot <accounts@chatwoot.com>
 
 #SMTP domain key is set up for HELO checking
 SMTP_DOMAIN=chatwoot.com
-# the default value is set "mailhog" and is used by docker-compose for development environments,
+# Set the value to "mailhog" if using docker-compose for development environments,
 # Set the value as "localhost" or your SMTP address in other environments
-SMTP_ADDRESS=mailhog
+# If SMTP_ADDRESS is empty, Chatwoot would try to use sendmail(postfix)
+SMTP_ADDRESS=
 SMTP_PORT=1025
 SMTP_USERNAME=
 SMTP_PASSWORD=

.gitignore

@@ -60,3 +60,5 @@ test/cypress/videos/*
 
 /config/master.key
 /config/*.enc
+
+.vscode/settings.json

.rubocop.yml

@@ -16,7 +16,6 @@ Metrics/ClassLength:
     - 'app/models/message.rb'
     - 'app/builders/messages/facebook/message_builder.rb'
     - 'app/controllers/api/v1/accounts/contacts_controller.rb'
-    - 'app/controllers/api/v1/accounts/conversations_controller.rb'
     - 'app/listeners/action_cable_listener.rb'
     - 'app/models/conversation.rb'
 RSpec/ExampleLength:

.vscode/settings.json

@@ -0,0 +1 @@
+{}

Gemfile

@@ -4,7 +4,7 @@ ruby '3.0.4'
 
 ##-- base gems for rails --##
 gem 'rack-cors', require: 'rack/cors'
-gem 'rails', '~>6.1'
+gem 'rails', '~> 6.1', '>= 6.1.6.1'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
 
@@ -56,7 +56,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails'
 gem 'foreman'
 gem 'puma'
-gem 'webpacker', '~> 5.x'
+gem 'webpacker', '~> 5.4', '>= 5.4.3'
 # metrics on heroku
 gem 'barnes'
 
@@ -94,7 +94,7 @@ gem 'ddtrace'
 gem 'elastic-apm'
 gem 'newrelic_rpm'
 gem 'scout_apm'
-gem 'sentry-rails', '~> 5.3'
+gem 'sentry-rails', '~> 5.3', '>= 5.3.1'
 gem 'sentry-ruby', '~> 5.3'
 gem 'sentry-sidekiq', '~> 5.3'
 
@@ -175,7 +175,7 @@ group :development, :test do
   gem 'mock_redis'
   gem 'pry-rails'
   gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '~> 5.0.0'
+  gem 'rspec-rails', '~> 5.0.3'
   gem 'rubocop', require: false
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false

Gemfile.lock

@@ -398,7 +398,7 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    loofah (2.18.0)
+    loofah (2.19.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -427,14 +427,14 @@ GEM
     netrc (0.11.0)
     newrelic_rpm (8.9.0)
     nio4r (2.5.8)
-    nokogiri (1.13.9)
+    nokogiri (1.13.10)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.9-arm64-darwin)
+    nokogiri (1.13.10-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.9-x86_64-darwin)
+    nokogiri (1.13.10-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.9-x86_64-linux)
+    nokogiri (1.13.10-x86_64-linux)
       racc (~> 1.4)
     oauth (0.5.10)
     orm_adapter (0.5.0)
@@ -459,7 +459,7 @@ GEM
     pundit (2.2.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
-    racc (1.6.0)
+    racc (1.6.1)
     rack (2.2.4)
     rack-attack (6.6.1)
       rack (>= 1.0, < 3)
@@ -488,8 +488,8 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.4.3)
+    rails-html-sanitizer (1.4.4)
-      loofah (~> 2.3)
+      loofah (~> 2.19, >= 2.19.1)
     railties (6.1.6.1)
       actionpack (= 6.1.6.1)
       activesupport (= 6.1.6.1)
@@ -765,12 +765,12 @@ DEPENDENCIES
   rack-attack
   rack-cors
   rack-timeout
-  rails (~> 6.1)
+  rails (~> 6.1, >= 6.1.6.1)
   redis
   redis-namespace
   responders
   rest-client
-  rspec-rails (~> 5.0.0)
+  rspec-rails (~> 5.0.3)
   rspec_junit_formatter
   rubocop
   rubocop-performance
@@ -778,7 +778,7 @@ DEPENDENCIES
   rubocop-rspec
   scout_apm
   seed_dump
-  sentry-rails (~> 5.3)
+  sentry-rails (~> 5.3, >= 5.3.1)
   sentry-ruby (~> 5.3)
   sentry-sidekiq (~> 5.3)
   shoulda-matchers
@@ -799,7 +799,7 @@ DEPENDENCIES
   valid_email2
   web-console
   webmock
-  webpacker (~> 5.x)
+  webpacker (~> 5.4, >= 5.4.3)
   webpush
   wisper (= 2.0.0)
   working_hours

app.json

@@ -41,16 +41,24 @@
   "formation": {
     "web": {
       "quantity": 1,
-      "size": "FREE"
+      "size": "basic"
     },
     "worker": {
       "quantity": 1,
-      "size": "FREE"
+      "size": "basic"
     }
   },
   "stack": "heroku-20",
   "image": "heroku/ruby",
-  "addons": [ "heroku-redis", "heroku-postgresql"],
+  "addons": [
+    {
+      "plan": "heroku-redis:mini"
+    },
+    {
+      "plan": "heroku-postgresql:mini"
+    }
+  ],
+  "stack": "heroku-20",
   "buildpacks": [
     {
       "url": "heroku/ruby"

app/builders/conversation_builder.rb

@@ -0,0 +1,40 @@
+class ConversationBuilder
+  pattr_initialize [:params!, :contact_inbox!]
+
+  def perform
+    look_up_exising_conversation || create_new_conversation
+  end
+
+  private
+
+  def look_up_exising_conversation
+    return unless @contact_inbox.inbox.lock_to_single_conversation?
+
+    @contact_inbox.conversations.last
+  end
+
+  def create_new_conversation
+    ::Conversation.create!(conversation_params)
+  end
+
+  def conversation_params
+    additional_attributes = params[:additional_attributes]&.permit! || {}
+    custom_attributes = params[:custom_attributes]&.permit! || {}
+    status = params[:status].present? ? { status: params[:status] } : {}
+
+    # TODO: temporary fallback for the old bot status in conversation, we will remove after couple of releases
+    # commenting this out to see if there are any errors, if not we can remove this in subsequent releases
+    # status = { status: 'pending' } if status[:status] == 'bot'
+    {
+      account_id: @contact_inbox.inbox.account_id,
+      inbox_id: @contact_inbox.inbox_id,
+      contact_id: @contact_inbox.contact_id,
+      contact_inbox_id: @contact_inbox.id,
+      additional_attributes: additional_attributes,
+      custom_attributes: custom_attributes,
+      snoozed_until: params[:snoozed_until],
+      assignee_id: params[:assignee_id],
+      team_id: params[:team_id]
+    }.merge(status)
+  end
+end

app/builders/messages/messenger/message_builder.rb

@@ -46,6 +46,7 @@ class Messages::Messenger::MessageBuilder
   end
 
   def update_attachment_file_type(attachment)
+    return if @message.reload.attachments.blank?
     return unless attachment.file_type == 'share' || attachment.file_type == 'story_mention'
 
     attachment.file_type = file_type(attachment.file&.content_type)
@@ -62,6 +63,7 @@ class Messages::Messenger::MessageBuilder
     story_sender = result['from']['username']
     message.content_attributes[:story_sender] = story_sender
     message.content_attributes[:story_id] = story_id
+    message.content_attributes[:image_type] = 'story_mention'
     message.content = I18n.t('conversations.messages.instagram_story_content', story_sender: story_sender)
     message.save!
   end
@@ -74,6 +76,7 @@ class Messages::Messenger::MessageBuilder
     raise
   rescue Koala::Facebook::ClientError => e
     # The exception occurs when we are trying fetch the deleted story or blocked story.
+    @message.attachments.destroy_all
     @message.update(content: I18n.t('conversations.messages.instagram_deleted_story_content'))
     Rails.logger.error e
     {}

app/controllers/api/v1/accounts/contacts/conversations_controller.rb

@@ -2,7 +2,7 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
   def index
     @conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: @contact.id)
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(id: :desc).limit(20)
   end
 
   private

app/controllers/api/v1/accounts/conversations_controller.rb

@@ -24,7 +24,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def create
     ActiveRecord::Base.transaction do
-      @conversation = ::Conversation.create!(conversation_params)
+      @conversation = ConversationBuilder.new(params: params, contact_inbox: @contact_inbox).perform
       Messages::MessageBuilder.new(Current.user, @conversation, params[:message]).perform if params[:message].present?
     end
   end
@@ -75,10 +75,13 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def update_last_seen
-    # rubocop:disable Rails/SkipsModelValidations
+    update_last_seen_on_conversation(DateTime.now.utc, assignee?)
-    @conversation.update_column(:agent_last_seen_at, DateTime.now.utc)
+  end
-    @conversation.update_column(:assignee_last_seen_at, DateTime.now.utc) if assignee?
+
-    # rubocop:enable Rails/SkipsModelValidations
+  def unread
+    last_incoming_message = @conversation.messages.incoming.last
+    last_seen_at = last_incoming_message.created_at - 1.second if last_incoming_message.present?
+    update_last_seen_on_conversation(last_seen_at, true)
   end
 
   def custom_attributes
@@ -88,9 +91,18 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   private
 
+  def update_last_seen_on_conversation(last_seen_at, update_assignee)
+    # rubocop:disable Rails/SkipsModelValidations
+    @conversation.update_column(:agent_last_seen_at, last_seen_at)
+    @conversation.update_column(:assignee_last_seen_at, last_seen_at) if update_assignee.present?
+    # rubocop:enable Rails/SkipsModelValidations
+  end
+
   def set_conversation_status
-    status = params[:status] == 'bot' ? 'pending' : params[:status]
+    # TODO: temporary fallback for the old bot status in conversation, we will remove after couple of releases
-    @conversation.status = status
+    # commenting this out to see if there are any errors, if not we can remove this in subsequent releases
+    # status = params[:status] == 'bot' ? 'pending' : params[:status]
+    @conversation.status = params[:status]
     @conversation.snoozed_until = parse_date_time(params[:snoozed_until].to_s) if params[:snoozed_until]
   end
 
@@ -142,31 +154,11 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     ).perform
   end
 
-  def conversation_params
-    additional_attributes = params[:additional_attributes]&.permit! || {}
-    custom_attributes = params[:custom_attributes]&.permit! || {}
-    status = params[:status].present? ? { status: params[:status] } : {}
-
-    # TODO: temporary fallback for the old bot status in conversation, we will remove after couple of releases
-    status = { status: 'pending' } if status[:status] == 'bot'
-    {
-      account_id: Current.account.id,
-      inbox_id: @contact_inbox.inbox_id,
-      contact_id: @contact_inbox.contact_id,
-      contact_inbox_id: @contact_inbox.id,
-      additional_attributes: additional_attributes,
-      custom_attributes: custom_attributes,
-      snoozed_until: params[:snoozed_until],
-      assignee_id: params[:assignee_id],
-      team_id: params[:team_id]
-    }.merge(status)
-  end
-
   def conversation_finder
-    @conversation_finder ||= ConversationFinder.new(current_user, params)
+    @conversation_finder ||= ConversationFinder.new(Current.user, params)
   end
 
   def assignee?
-    @conversation.assignee_id? && current_user == @conversation.assignee
+    @conversation.assignee_id? && Current.user == @conversation.assignee
   end
 end

app/controllers/api/v1/accounts/inboxes_controller.rb

@@ -113,7 +113,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
 
   def inbox_attributes
     [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
-     :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved]
+     :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
+     :lock_to_single_conversation]
   end
 
   def permitted_params(channel_attributes = [])

app/controllers/api/v1/accounts/portals_controller.rb

@@ -21,6 +21,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
 
   def create
     @portal = Current.account.portals.build(portal_params)
+    @portal.custom_domain = parsed_custom_domain
     @portal.save!
     process_attached_logo
   end
@@ -28,6 +29,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   def update
     ActiveRecord::Base.transaction do
       @portal.update!(portal_params) if params[:portal].present?
+      # @portal.custom_domain = parsed_custom_domain
       process_attached_logo
     rescue StandardError => e
       Rails.logger.error e
@@ -73,4 +75,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   def set_current_page
     @current_page = params[:page] || 1
   end
+
+  def parsed_custom_domain
+    domain = URI.parse(@portal.custom_domain)
+    domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
+  end
 end

app/controllers/api/v1/profiles_controller.rb

@@ -18,6 +18,10 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
+  def auto_offline
+    @user.account_users.find_by!(account_id: auto_offline_params[:account_id]).update!(auto_offline: auto_offline_params[:auto_offline] || false)
+  end
+
   def availability
     @user.account_users.find_by!(account_id: availability_params[:account_id]).update!(availability: availability_params[:availability])
   end
@@ -37,6 +41,10 @@ class Api::V1::ProfilesController < Api::BaseController
     params.require(:profile).permit(:account_id, :availability)
   end
 
+  def auto_offline_params
+    params.require(:profile).permit(:account_id, :auto_offline)
+  end
+
   def profile_params
     params.require(:profile).permit(
       :email,

app/controllers/api/v1/widget/base_controller.rb

@@ -50,7 +50,9 @@ class Api::V1::Widget::BaseController < ApplicationController
   end
 
   def contact_name
-    params[:contact][:name] || contact_email.split('@')[0] if contact_email.present?
+    return if @contact.email.present? || @contact.phone_number.present? || @contact.identifier.present?
+
+    permitted_params.dig(:contact, :name) || (contact_email.split('@')[0] if contact_email.present?)
   end
 
   def contact_phone_number

app/controllers/dashboard_controller.rb

@@ -16,8 +16,7 @@ class DashboardController < ActionController::Base
     @global_config = GlobalConfig.get(
       'LOGO', 'LOGO_THUMBNAIL',
       'INSTALLATION_NAME',
-      'WIDGET_BRAND_URL',
+      'WIDGET_BRAND_URL', 'TERMS_URL',
-      'TERMS_URL',
       'PRIVACY_URL',
       'DISPLAY_MANIFEST',
       'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',
@@ -25,12 +24,12 @@ class DashboardController < ActionController::Base
       'API_CHANNEL_NAME',
       'API_CHANNEL_THUMBNAIL',
       'ANALYTICS_TOKEN',
-      'ANALYTICS_HOST',
       'DIRECT_UPLOADS_ENABLED',
       'HCAPTCHA_SITE_KEY',
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
-      'DEPLOYMENT_ENV'
+      'DEPLOYMENT_ENV',
+      'CSML_EDITOR_HOST'
     ).merge(app_config)
   end
 

app/controllers/platform/api/v1/accounts_controller.rb

@@ -1,8 +1,7 @@
 class Platform::Api::V1::AccountsController < PlatformController
   def create
-    @resource = Account.new(account_params)
+    @resource = Account.create!(account_params)
     update_resource_features
-    @resource.save!
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 

app/finders/conversation_finder.rb

@@ -56,7 +56,6 @@ class ConversationFinder
     filter_by_team if @team
     filter_by_labels if params[:labels]
     filter_by_query if params[:q]
-    filter_by_reply_status
   end
 
   def set_inboxes
@@ -76,12 +75,9 @@ class ConversationFinder
   end
 
   def find_all_conversations
-    if params[:conversation_type] == 'mention'
+    @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
-      conversation_ids = current_account.mentions.where(user: current_user).pluck(:conversation_id)
+    filter_by_conversation_type if params[:conversation_type]
-      @conversations = current_account.conversations.where(id: conversation_ids)
+    @conversations
-    else
-      @conversations = current_account.conversations.where(inbox_id: @inbox_ids)
-    end
   end
 
   def filter_by_assignee_type
@@ -96,8 +92,15 @@ class ConversationFinder
     @conversations
   end
 
-  def filter_by_reply_status
+  def filter_by_conversation_type
-    @conversations = @conversations.where(first_reply_created_at: nil) if params[:reply_status] == 'unattended'
+    case @params[:conversation_type]
+    when 'mention'
+      conversation_ids = current_account.mentions.where(user: current_user).pluck(:conversation_id)
+      @conversations = @conversations.where(id: conversation_ids)
+    when 'unattended'
+      @conversations = @conversations.where(first_reply_created_at: nil)
+    end
+    @conversations
   end
 
   def filter_by_query

app/finders/message_finder.rb

@@ -21,7 +21,9 @@ class MessageFinder
   end
 
   def current_messages
-    if @params[:before].present?
+    if @params[:after].present?
+      messages.reorder('created_at asc').where('id >= ?', @params[:before].to_i).limit(20)
+    elsif @params[:before].present?
       messages.reorder('created_at desc').where('id < ?', @params[:before].to_i).limit(20).reverse
     else
       messages.reorder('created_at desc').limit(20).reverse

app/javascript/dashboard/api/auth.js

@@ -144,6 +144,12 @@ export default {
     });
   },
 
+  updateAutoOffline(accountId, autoOffline = false) {
+    return axios.post(endPoints('autoOffline').url, {
+      profile: { account_id: accountId, auto_offline: autoOffline },
+    });
+  },
+
   deleteAvatar() {
     return axios.delete(endPoints('deleteAvatar').url);
   },

app/javascript/dashboard/api/endPoints.js

@@ -16,6 +16,9 @@ const endPoints = {
   availabilityUpdate: {
     url: '/api/v1/profile/availability',
   },
+  autoOffline: {
+    url: '/api/v1/profile/auto_offline',
+  },
   logout: {
     url: 'auth/sign_out',
   },

app/javascript/dashboard/api/inbox/conversation.js

@@ -68,6 +68,10 @@ class ConversationApi extends ApiClient {
     return axios.post(`${this.url}/${id}/update_last_seen`);
   }
 
+  markMessagesUnread({ id }) {
+    return axios.post(`${this.url}/${id}/unread`);
+  }
+
   toggleTyping({ conversationId, status, isPrivate }) {
     return axios.post(`${this.url}/${conversationId}/toggle_typing_status`, {
       typing_status: status,

app/javascript/dashboard/api/inboxes.js

@@ -13,6 +13,16 @@ class Inboxes extends ApiClient {
   deleteInboxAvatar(inboxId) {
     return axios.delete(`${this.url}/${inboxId}/avatar`);
   }
+
+  getAgentBot(inboxId) {
+    return axios.get(`${this.url}/${inboxId}/agent_bot`);
+  }
+
+  setAgentBot(inboxId, botId) {
+    return axios.post(`${this.url}/${inboxId}/set_agent_bot`, {
+      agent_bot: botId,
+    });
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/specs/inboxes.spec.js

@@ -11,6 +11,8 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('update');
     expect(inboxesAPI).toHaveProperty('delete');
     expect(inboxesAPI).toHaveProperty('getCampaigns');
+    expect(inboxesAPI).toHaveProperty('getAgentBot');
+    expect(inboxesAPI).toHaveProperty('setAgentBot');
   });
   describeWithAPIMock('API calls', context => {
     it('#getCampaigns', () => {

app/javascript/dashboard/api/testimonials.js

@@ -0,0 +1,6 @@
+/* global axios */
+import wootConstants from 'dashboard/constants';
+
+export const getTestimonialContent = () => {
+  return axios.get(wootConstants.TESTIMONIAL_URL);
+};

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -74,8 +74,8 @@ Tahoma,
 Arial,
 sans-serif;
 $body-antialiased: true;
-$global-margin: $space-one;
+$global-margin: $space-small;
-$global-padding: $space-one;
+$global-padding: $space-micro;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;

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

@@ -20,6 +20,24 @@
 
 @include foundation-everything($flex: true);
 
+@include foundation-prototype-text-utilities;
+@include foundation-prototype-text-transformation;
+@include foundation-prototype-text-decoration;
+@include foundation-prototype-font-styling;
+@include foundation-prototype-list-style-type;
+@include foundation-prototype-rounded;
+@include foundation-prototype-bordered;
+@include foundation-prototype-shadow;
+@include foundation-prototype-separator;
+@include foundation-prototype-overflow;
+@include foundation-prototype-display;
+@include foundation-prototype-position;
+@include foundation-prototype-border-box;
+@include foundation-prototype-border-none;
+@include foundation-prototype-sizing;
+@include foundation-prototype-spacing;
+
+
 @import 'typography';
 @import 'layout';
 @import 'animations';

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

@@ -155,12 +155,20 @@ $default-button-height: 4.0rem;
   // Sizes
   &.tiny {
     height: var(--space-medium);
+
+    .icon+.button__content {
+      padding-left: var(--space-micro);
+    }
   }
 
   &.small {
     height: var(--space-large);
     padding-bottom: var(--space-smaller);
     padding-top: var(--space-smaller);
+
+    .icon+.button__content {
+      padding-left: var(--space-smaller);
+    }
   }
 
   &.large {
@@ -190,6 +198,10 @@ $default-button-height: 4.0rem;
     height: auto;
     margin: 0;
     padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
 }

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

@@ -59,12 +59,8 @@
 
 .hamburger--menu {
   cursor: pointer;
-  display: none;
+  display: block;
   margin-right: $space-normal;
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
 }
 
 .header--icon {

app/javascript/dashboard/components/ChatList.vue

@@ -102,6 +102,7 @@
       @assign-agent="onAssignAgent"
       @update-conversations="onUpdateConversations"
       @assign-labels="onAssignLabels"
+      @assign-team="onAssignTeamsForBulk"
     />
     <div
       ref="activeConversation"
@@ -125,6 +126,7 @@
         @assign-label="onAssignLabels"
         @update-conversation-status="toggleConversationStatus"
         @context-menu-toggle="onContextMenuToggle"
+        @mark-as-unread="markAsUnread"
       />
 
       <div v-if="chatListLoading" class="text-center">
@@ -184,6 +186,11 @@ import {
   hasPressedAltAndJKey,
   hasPressedAltAndKKey,
 } from 'shared/helpers/KeyboardHelpers';
+import { conversationListPageURL } from '../helper/URLHelper';
+import {
+  isOnMentionsView,
+  isOnUnattendedView,
+} from '../store/modules/conversations/helpers/actionHelpers';
 
 export default {
   components: {
@@ -332,14 +339,15 @@ export default {
         status: this.activeStatus,
         page: this.currentPage + 1,
         labels: this.label ? [this.label] : undefined,
-        teamId: this.teamId ? this.teamId : undefined,
+        teamId: this.teamId || undefined,
-        conversationType: this.conversationType
+        conversationType: this.conversationType || undefined,
-          ? this.conversationType
-          : undefined,
         folders: this.hasActiveFolders ? this.savedFoldersValue : undefined,
       };
     },
     pageTitle() {
+      if (this.hasAppliedFilters) {
+        return this.$t('CHAT_LIST.TAB_HEADING');
+      }
       if (this.inbox.name) {
         return this.inbox.name;
       }
@@ -352,6 +360,9 @@ export default {
       if (this.conversationType === 'mention') {
         return this.$t('CHAT_LIST.MENTION_HEADING');
       }
+      if (this.conversationType === 'unattended') {
+        return this.$t('CHAT_LIST.UNATTENDED_HEADING');
+      }
       if (this.hasActiveFolders) {
         return this.activeFolder.name;
       }
@@ -431,9 +442,6 @@ export default {
   },
   methods: {
     onApplyFilter(payload) {
-      if (this.$route.name !== 'home') {
-        this.$router.push({ name: 'home' });
-      }
       this.resetBulkActions();
       this.foldersQuery = filterQueryGenerator(payload);
       this.$store.dispatch('conversationPage/reset');
@@ -636,6 +644,35 @@ export default {
         this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
       }
     },
+    async markAsUnread(conversationId) {
+      try {
+        await this.$store.dispatch('markMessagesUnread', {
+          id: conversationId,
+        });
+        const {
+          params: { accountId, inbox_id: inboxId, label, teamId },
+          name,
+        } = this.$route;
+        let conversationType = '';
+        if (isOnMentionsView({ route: { name } })) {
+          conversationType = 'mention';
+        } else if (isOnUnattendedView({ route: { name } })) {
+          conversationType = 'unattended';
+        }
+        this.$router.push(
+          conversationListPageURL({
+            accountId,
+            conversationType: conversationType,
+            customViewId: this.foldersId,
+            inboxId,
+            label,
+            teamId,
+          })
+        );
+      } catch (error) {
+        // Ignore error
+      }
+    },
     async onAssignTeam(team, conversationId = null) {
       try {
         await this.$store.dispatch('assignTeam', {
@@ -685,6 +722,21 @@ export default {
         this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
       }
     },
+    async onAssignTeamsForBulk(team) {
+      try {
+        await this.$store.dispatch('bulkActions/process', {
+          type: 'Conversation',
+          ids: this.selectedConversations,
+          fields: {
+            team_id: team.id,
+          },
+        });
+        this.selectedConversations = [];
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
+      }
+    },
     async onUpdateConversations(status) {
       try {
         await this.$store.dispatch('bulkActions/process', {

app/javascript/dashboard/components/SidemenuIcon.vue

@@ -1,7 +1,12 @@
 <template>
-  <button @click="onMenuItemClick">
+  <woot-button
-    <fluent-icon class="hamburger--menu" icon="list" />
+    size="small"
-  </button>
+    variant="clear"
+    color-scheme="secondary"
+    icon="list"
+    class="toggle-sidebar"
+    @click="onMenuItemClick"
+  />
 </template>
 
 <script>
@@ -16,13 +21,8 @@ export default {
 };
 </script>
 <style scoped lang="scss">
-.hamburger--menu {
+.toggle-sidebar {
-  cursor: pointer;
+  margin-right: var(--space-small);
-  display: none;
+  margin-left: var(--space-minus-small);
-  margin-right: var(--space-normal);
-
-  @media screen and (max-width: 1200px) {
-    display: block;
-  }
 }
 </style>

app/javascript/dashboard/components/layout/AvailabilityStatus.vue

@@ -18,12 +18,35 @@
       </woot-button>
     </woot-dropdown-item>
     <woot-dropdown-divider />
+    <woot-dropdown-item class="auto-offline--toggle">
+      <div class="info-wrap">
+        <fluent-icon
+          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
+          icon="info"
+          size="14"
+          class="info-icon"
+        />
+
+        <span class="auto-offline--text">
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </span>
+      </div>
+
+      <woot-switch
+        size="small"
+        class="auto-offline--switch"
+        :value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </woot-dropdown-item>
+    <woot-dropdown-divider />
   </woot-dropdown-menu>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
+import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
@@ -41,7 +64,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [clickaway],
+  mixins: [clickaway, alertMixin],
 
   data() {
     return {
@@ -54,6 +77,7 @@ export default {
     ...mapGetters({
       getCurrentUserAvailability: 'getCurrentUserAvailability',
       currentAccountId: 'getCurrentAccountId',
+      currentUserAutoOffline: 'getCurrentUserAutoOffline',
     }),
     availabilityDisplayLabel() {
       const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
@@ -85,21 +109,30 @@ export default {
     closeStatusMenu() {
       this.isStatusMenuOpened = false;
     },
+    updateAutoOffline(autoOffline) {
+      this.$store.dispatch('updateAutoOffline', {
+        accountId: this.currentAccountId,
+        autoOffline,
+      });
+    },
     changeAvailabilityStatus(availability) {
-      const accountId = this.currentAccountId;
       if (this.isUpdating) {
         return;
       }
 
       this.isUpdating = true;
-      this.$store
+      try {
-        .dispatch('updateAvailability', {
+        this.$store.dispatch('updateAvailability', {
-          availability: availability,
+          availability,
-          account_id: accountId,
+          account_id: this.currentAccountId,
-        })
-        .finally(() => {
-          this.isUpdating = false;
         });
+      } catch (error) {
+        this.showAlert(
+          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
+        );
+      } finally {
+        this.isUpdating = false;
+      }
     },
   },
 };
@@ -143,4 +176,32 @@ export default {
     align-items: baseline;
   }
 }
+
+.auto-offline--toggle {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--space-smaller) 0 var(--space-smaller) var(--space-small);
+  margin: 0;
+
+  .info-wrap {
+    display: flex;
+    align-items: center;
+  }
+
+  .info-icon {
+    margin-top: -1px;
+  }
+
+  .auto-offline--switch {
+    margin: -1px var(--space-micro) 0;
+  }
+
+  .auto-offline--text {
+    margin: 0 var(--space-smaller);
+    font-size: var(--font-size-mini);
+    font-weight: var(--font-weight-medium);
+    color: var(--s-700);
+  }
+}
 </style>

app/javascript/dashboard/components/layout/config/sidebarItems/conversations.js

@@ -16,6 +16,8 @@ const conversations = accountId => ({
     'conversation_through_mentions',
     'folder_conversations',
     'conversations_through_folders',
+    'conversation_unattended',
+    'conversation_through_unattended',
   ],
   menuItems: [
     {
@@ -33,6 +35,13 @@ const conversations = accountId => ({
       toState: frontendURL(`accounts/${accountId}/mentions/conversations`),
       toStateName: 'conversation_mentions',
     },
+    {
+      icon: 'mail-unread',
+      label: 'UNATTENDED_CONVERSATIONS',
+      key: 'conversation_unattended',
+      toState: frontendURL(`accounts/${accountId}/unattended/conversations`),
+      toStateName: 'conversation_unattended',
+    },
   ],
 });
 

app/javascript/dashboard/components/layout/config/sidebarItems/primaryMenu.js

@@ -1,3 +1,4 @@
+import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 const primaryMenuItems = accountId => [
@@ -13,6 +14,7 @@ const primaryMenuItems = accountId => [
     icon: 'book-contacts',
     key: 'contacts',
     label: 'CONTACTS',
+    featureFlag: FEATURE_FLAGS.CRM,
     toState: frontendURL(`accounts/${accountId}/contacts`),
     toStateName: 'contacts_dashboard',
     roles: ['administrator', 'agent'],
@@ -21,6 +23,7 @@ const primaryMenuItems = accountId => [
     icon: 'arrow-trending-lines',
     key: 'reports',
     label: 'REPORTS',
+    featureFlag: FEATURE_FLAGS.REPORTS,
     toState: frontendURL(`accounts/${accountId}/reports`),
     toStateName: 'settings_account_reports',
     roles: ['administrator'],
@@ -29,6 +32,7 @@ const primaryMenuItems = accountId => [
     icon: 'megaphone',
     key: 'campaigns',
     label: 'CAMPAIGNS',
+    featureFlag: FEATURE_FLAGS.CAMPAIGNS,
     toState: frontendURL(`accounts/${accountId}/campaigns`),
     toStateName: 'settings_account_campaigns',
     roles: ['administrator'],
@@ -37,7 +41,7 @@ const primaryMenuItems = accountId => [
     icon: 'library',
     key: 'helpcenter',
     label: 'HELP_CENTER.TITLE',
-    featureFlag: 'help_center',
+    featureFlag: FEATURE_FLAGS.HELP_CENTER,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
     roles: ['administrator'],

app/javascript/dashboard/components/layout/config/sidebarItems/settings.js

@@ -102,6 +102,7 @@ const settings = accountId => ({
       label: 'AGENT_BOTS',
       beta: true,
       hasSubMenu: false,
+      globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
       toStateName: 'agent_bots',
       featureFlag: FEATURE_FLAGS.AGENT_BOTS,

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -61,6 +61,24 @@
             </a>
           </router-link>
         </woot-dropdown-item>
+        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
+          <a
+            href="/super_admin"
+            class="button small clear secondary"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            @click="$emit('close')"
+          >
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
+          </a>
+        </woot-dropdown-item>
         <woot-dropdown-item>
           <woot-button
             variant="clear"
@@ -135,7 +153,7 @@ export default {
 .dropdown-pane {
   left: var(--space-slab);
   bottom: var(--space-larger);
-  min-width: 16.8rem;
+  min-width: 22rem;
-  z-index: var(--z-index-much-higher);
+  z-index: var(--z-index-low);
 }
 </style>

app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue

@@ -261,14 +261,7 @@ export default {
   width: 20rem;
   flex-shrink: 0;
   overflow-y: hidden;
-
+  position: unset;
-  @include breakpoint(xlarge down) {
-    position: absolute;
-  }
-
-  @include breakpoint(xlarge up) {
-    position: unset;
-  }
 
   &:hover {
     overflow-y: hidden;

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue

@@ -112,6 +112,7 @@ $label-badge-size: var(--space-slab);
   padding: var(--space-smaller) var(--space-smaller);
   margin: var(--space-smaller) 0;
   text-align: left;
+  line-height: 1.2;
 
   &:hover {
     background: var(--s-25);
@@ -135,8 +136,6 @@ $label-badge-size: var(--space-slab);
 
 .menu-label {
   flex-grow: 1;
-  display: inline-flex;
-  align-items: center;
 }
 
 .inbox-icon {

app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue

@@ -87,6 +87,10 @@ import {
 } from 'dashboard/helper/inbox';
 
 import SecondaryChildNavItem from './SecondaryChildNavItem';
+import {
+  isOnMentionsView,
+  isOnUnattendedView,
+} from '../../../store/modules/conversations/helpers/actionHelpers';
 
 export default {
   components: { SecondaryChildNavItem },
@@ -102,32 +106,48 @@ export default {
       activeInbox: 'getSelectedInbox',
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
+      globalConfig: 'globalConfig/get',
     }),
     hasSubMenu() {
       return !!this.menuItem.children;
     },
     isMenuItemVisible() {
-      if (!this.menuItem.featureFlag) {
+      if (this.menuItem.globalConfigFlag) {
-        return true;
+        return !!this.globalConfig[this.menuItem.globalConfigFlag];
       }
-      return this.isFeatureEnabledonAccount(
+      if (this.menuItem.featureFlag) {
-        this.accountId,
+        return this.isFeatureEnabledonAccount(
-        this.menuItem.featureFlag
+          this.accountId,
-      );
+          this.menuItem.featureFlag
+        );
+      }
+      return true;
     },
-    isInboxConversation() {
+    isAllConversations() {
       return (
         this.$store.state.route.name === 'inbox_conversation' &&
         this.menuItem.toStateName === 'home'
       );
     },
+    isMentions() {
+      return (
+        isOnMentionsView({ route: this.$route }) &&
+        this.menuItem.toStateName === 'conversation_mentions'
+      );
+    },
+    isUnattended() {
+      return (
+        isOnUnattendedView({ route: this.$route }) &&
+        this.menuItem.toStateName === 'conversation_unattended'
+      );
+    },
     isTeamsSettings() {
       return (
         this.$store.state.route.name === 'settings_teams_edit' &&
         this.menuItem.toStateName === 'settings_teams_list'
       );
     },
-    isInboxsSettings() {
+    isInboxSettings() {
       return (
         this.$store.state.route.name === 'settings_inbox_show' &&
         this.menuItem.toStateName === 'settings_inbox_list'
@@ -150,14 +170,20 @@ export default {
     },
 
     computedClass() {
-      // If active Inbox is present
+      // If active inbox is present, do not highlight conversations
-      // donot highlight conversations
       if (this.activeInbox) return ' ';
+      if (
+        this.isAllConversations ||
+        this.isMentions ||
+        this.isUnattended ||
+        this.isCurrentRoute
+      ) {
+        return 'is-active';
+      }
       if (this.hasSubMenu) {
         if (
-          this.isInboxConversation ||
           this.isTeamsSettings ||
-          this.isInboxsSettings ||
+          this.isInboxSettings ||
           this.isIntegrationsSettings ||
           this.isApplicationsSettings
         ) {
@@ -166,10 +192,6 @@ export default {
         return ' ';
       }
 
-      if (this.isCurrentRoute) {
-        return 'is-active';
-      }
-
       return '';
     },
   },

app/javascript/dashboard/components/specs/__snapshots__/SidemenuIcon.spec.js.snap

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SidemenuIcon matches snapshot 1`] = `
-<button>
+<woot-button
-  <fluent-icon
+  class="toggle-sidebar"
-    class="hamburger--menu"
+  color-scheme="secondary"
-    icon="list"
+  icon="list"
-  />
+  size="small"
-</button>
+  variant="clear"
+/>
 `;

app/javascript/dashboard/components/ui/Label.vue

@@ -4,7 +4,7 @@
       <fluent-icon :icon="icon" size="12" class="label--icon" />
     </span>
     <span
-      v-if="variant === 'smooth'"
+      v-if="variant === 'smooth' && title && !icon"
       :style="{ background: color }"
       class="label-color-dot"
     />
@@ -117,14 +117,16 @@ export default {
   height: var(--space-medium);
 
   &.small {
-    font-size: var(--font-size-micro);
+    font-size: var(--font-size-mini);
     padding: var(--space-micro) var(--space-smaller);
     line-height: 1.2;
-    letter-spacing: 0.15px;
+    height: var(--space-two);
   }
 
   .label--icon {
     cursor: pointer;
+  }
+  .label-color-dot {
     margin-right: var(--space-smaller);
   }
 
@@ -199,8 +201,8 @@ export default {
 
   &.smooth {
     background: transparent;
-    border: 1px solid var(--s-75);
+    border: 1px solid var(--s-100);
-    color: var(--s-800);
+    color: var(--s-700);
   }
 }
 
@@ -221,14 +223,22 @@ export default {
 }
 
 .label-action--button {
-  margin-bottom: var(--space-minus-micro);
+  display: flex;
+  margin-right: var(--space-smaller);
 }
 
 .label-color-dot {
   display: inline-block;
-  width: var(--space-one);
+  width: var(--space-slab);
-  height: var(--space-one);
+  height: var(--space-slab);
   border-radius: var(--border-radius-small);
   margin-right: var(--space-smaller);
+  box-shadow: var(--shadow-small);
+}
+.label.small .label-color-dot {
+  width: var(--space-small);
+  height: var(--space-small);
+  border-radius: var(--border-radius-small);
+  box-shadow: var(--shadow-small);
 }
 </style>

app/javascript/dashboard/components/ui/Switch.vue

@@ -2,7 +2,7 @@
   <button
     type="button"
     class="toggle-button"
-    :class="{ active: value }"
+    :class="{ active: value, small: size === 'small' }"
     role="switch"
     :aria-checked="value.toString()"
     @click="onClick"
@@ -15,6 +15,7 @@
 export default {
   props: {
     value: { type: Boolean, default: false },
+    size: { type: String, default: '' },
   },
   methods: {
     onClick() {
@@ -45,6 +46,20 @@ export default {
     background-color: var(--w-500);
   }
 
+  &.small {
+    width: 22px;
+    height: 14px;
+
+    span {
+      height: var(--space-one);
+      width: var(--space-one);
+
+      &.active {
+        transform: translate(var(--space-small), var(--space-zero));
+      }
+    }
+  }
+
   span {
     --space-one-point-five: 1.5rem;
     background-color: var(--white);

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

@@ -18,14 +18,32 @@
       <div v-if="showActionInput" class="filter__answer--wrap">
         <div v-if="inputType">
           <div
-            v-if="inputType === 'multi_select'"
+            v-if="inputType === 'search_select'"
             class="multiselect-wrap--small"
           >
             <multiselect
               v-model="action_params"
               track-by="id"
               label="name"
-              :placeholder="'Select'"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
+              selected-label
+              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+              deselect-label=""
+              :max-height="160"
+              :options="dropdownValues"
+              :allow-empty="false"
+              :option-height="104"
+            />
+          </div>
+          <div
+            v-else-if="inputType === 'multi_select'"
+            class="multiselect-wrap--small"
+          >
+            <multiselect
+              v-model="action_params"
+              track-by="id"
+              label="name"
+              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
               :multiple="true"
               selected-label
               :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
@@ -33,6 +51,7 @@
               :max-height="160"
               :options="dropdownValues"
               :allow-empty="false"
+              :option-height="104"
             />
           </div>
           <input
@@ -260,6 +279,6 @@ export default {
   margin-bottom: var(--space-zero);
 }
 .action-message {
-  margin: var(--space-small) 0 0;
+  margin: var(--space-small) var(--space-zero) var(--space-zero);
 }
 </style>

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

@@ -48,5 +48,6 @@ export default {
   text-align: center;
   background-image: linear-gradient(to top, var(--w-100) 0%, var(--w-75) 100%);
   color: var(--w-600);
+  cursor: default;
 }
 </style>

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

@@ -67,6 +67,9 @@ export default {
       if (Object.keys(this.enabledFeatures).length === 0) {
         return false;
       }
+      if (key === 'website') {
+        return this.enabledFeatures.channel_website;
+      }
       if (key === 'facebook') {
         return this.enabledFeatures.channel_facebook;
       }

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

@@ -61,6 +61,7 @@ export default {
 }
 
 .colorpicker--selected {
+  border: 1px solid var(--color-border-light);
   border-radius: $space-smaller;
   cursor: pointer;
   height: $space-large;

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -5,6 +5,11 @@
       :key="index"
       class="dashboard-app--list"
     >
+      <loading-state
+        v-if="iframeLoading"
+        :message="$t('DASHBOARD_APPS.LOADING_MESSAGE')"
+        class="dashboard-app_loading-container"
+      />
       <iframe
         v-if="configItem.type === 'frame' && configItem.url"
         :id="`dashboard-app--frame-${index}`"
@@ -16,7 +21,11 @@
 </template>
 
 <script>
+import LoadingState from 'dashboard/components/widgets/LoadingState';
 export default {
+  components: {
+    LoadingState,
+  },
   props: {
     config: {
       type: Array,
@@ -27,16 +36,26 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    return {
+      iframeLoading: true,
+    };
+  },
   computed: {
     dashboardAppContext() {
       return {
         conversation: this.currentChat,
         contact: this.$store.getters['contacts/getContact'](this.contactId),
+        currentAgent: this.currentAgent,
       };
     },
     contactId() {
       return this.currentChat?.meta?.sender?.id;
     },
+    currentAgent() {
+      const { id, name, email } = this.$store.getters.getCurrentUser;
+      return { id, name, email };
+    },
   },
 
   mounted() {
@@ -57,6 +76,7 @@ export default {
       );
       const eventData = { event: 'appContext', data: this.dashboardAppContext };
       frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+      this.iframeLoading = false;
     },
   },
 };
@@ -73,4 +93,11 @@ export default {
 .dashboard-app--list iframe {
   border: 0;
 }
+.dashboard-app_loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
 </style>

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -32,6 +32,7 @@
             v-for="attribute in filterAttributes"
             :key="attribute.key"
             :value="attribute.key"
+            :disabled="attribute.disabled"
           >
             {{ attribute.name }}
           </option>
@@ -173,6 +174,10 @@ export default {
       type: Array,
       default: () => [],
     },
+    customAttributeType: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     attributeKey: {

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

@@ -1,7 +1,11 @@
 <template>
   <span>
     {{ textToBeDisplayed }}
-    <button class="show-more--button" @click="toggleShowMore">
+    <button
+      v-if="text.length > limit"
+      class="show-more--button"
+      @click="toggleShowMore"
+    >
       {{ buttonLabel }}
     </button>
   </span>
@@ -25,7 +29,7 @@ export default {
   },
   computed: {
     textToBeDisplayed() {
-      if (this.showMore) {
+      if (this.showMore || this.text.length <= this.limit) {
         return this.text;
       }
 

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

@@ -1,5 +1,9 @@
 <template>
-  <div :class="thumbnailBoxClass" :style="{ height: size, width: size }">
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
     <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
     <img
       v-show="shouldShowImage"
@@ -72,6 +76,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    title: {
+      type: String,
+      default: '',
+    },
     variant: {
       type: String,
       default: 'circle',

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

@@ -3,11 +3,13 @@
     <thumbnail
       v-for="user in usersList"
       :key="user.id"
+      v-tooltip="user.name"
+      :title="user.name"
       :src="user.thumbnail"
       :username="user.name"
       :has-border="true"
       :size="size"
-      class="overlapping-thumbnail"
+      :class="`overlapping-thumbnail gap-${gap}`"
     />
     <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
       {{ moreThumbnailsText }}
@@ -38,6 +40,14 @@ export default {
       type: String,
       default: '',
     },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
+    },
   },
 };
 </script>
@@ -52,6 +62,10 @@ export default {
   box-shadow: var(--shadow-small);
 
   &:not(:first-child) {
+    margin-left: var(--space-minus-smaller);
+  }
+
+  .gap-tight {
     margin-left: var(--space-minus-small);
   }
 }

app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue

@@ -10,11 +10,11 @@ import 'videojs-record/dist/css/videojs.record.css';
 
 import videojs from 'video.js';
 
-import inboxMixin from '../../../../shared/mixins/inboxMixin';
 import alertMixin from '../../../../shared/mixins/alertMixin';
 
 import Recorder from 'opus-recorder';
 import encoderWorker from 'opus-recorder/dist/encoderWorker.min';
+import waveWorker from 'opus-recorder/dist/waveWorker.min';
 
 import WaveSurfer from 'wavesurfer.js';
 import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
@@ -23,19 +23,25 @@ import 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
 import 'videojs-record/dist/videojs.record.js';
 import 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
 import { format, addSeconds } from 'date-fns';
+import { AUDIO_FORMATS } from 'shared/constants/messages';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
 export default {
   name: 'WootAudioRecorder',
-  mixins: [inboxMixin, alertMixin],
+  mixins: [alertMixin],
+  props: {
+    audioRecordFormat: {
+      type: String,
+      default: AUDIO_FORMATS.WEBM,
+    },
+  },
   data() {
     return {
       player: false,
       recordingDateStarted: new Date(0),
       initialTimeDuration: '00:00',
       recorderOptions: {
-        debug: true,
         controls: true,
         bigPlayButton: false,
         fluid: false,
@@ -70,13 +76,28 @@ export default {
           record: {
             audio: true,
             video: false,
-            displayMilliseconds: false,
+            maxLength: 900,
-            maxLength: 300,
+            timeSlice: 1000,
-            audioEngine: 'opus-recorder',
+            maxFileSize: 15 * 1024 * 1024,
-            audioWorkerURL: encoderWorker,
+            ...(this.audioRecordFormat === AUDIO_FORMATS.WEBM && {
-            audioChannels: 1,
+              monitorGain: 0,
-            audioSampleRate: 48000,
+              recordingGain: 1,
-            audioBitRate: 128,
+              numberOfChannels: 1,
+              encoderSampleRate: 16000,
+              originalSampleRateOverride: 16000,
+              streamPages: true,
+              maxFramesPerPage: 1,
+              encoderFrameSize: 1,
+              encoderPath: waveWorker,
+            }),
+            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
+              displayMilliseconds: false,
+              audioEngine: 'opus-recorder',
+              audioWorkerURL: encoderWorker,
+              audioChannels: 1,
+              audioSampleRate: 48000,
+              audioBitRate: 128,
+            }),
           },
         },
       },

app/javascript/dashboard/components/widgets/WootWriter/Editor.vue

@@ -39,10 +39,17 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 
 import '@chatwoot/prosemirror-schema/src/woot-editor.css';
 import {
+  hasPressedEnterAndNotCmdOrShift,
+  hasPressedCommandAndEnter,
   hasPressedAltAndPKey,
   hasPressedAltAndLKey,
 } from 'shared/helpers/KeyboardHelpers';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
 
 const createState = (content, placeholder, plugins = []) => {
   return EditorState.create({
@@ -58,13 +65,15 @@ const createState = (content, placeholder, plugins = []) => {
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse },
-  mixins: [eventListenerMixins],
+  mixins: [eventListenerMixins, uiSettingsMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
     isPrivate: { type: Boolean, default: false },
     enableSuggestions: { type: Boolean, default: true },
+    overrideLineBreaks: { type: Boolean, default: false },
+    updateSelectionWith: { type: String, default: '' },
   },
   data() {
     return {
@@ -162,6 +171,25 @@ export default {
     isPrivate() {
       this.reloadState();
     },
+
+    updateSelectionWith(newValue, oldValue) {
+      if (!this.editorView) {
+        return null;
+      }
+      if (newValue !== oldValue) {
+        if (this.updateSelectionWith !== '') {
+          const node = this.editorView.state.schema.text(
+            this.updateSelectionWith
+          );
+          const tr = this.editorView.state.tr.replaceSelectionWith(node);
+          this.editorView.focus();
+          this.state = this.editorView.state.apply(tr);
+          this.emitOnChange();
+          this.$emit('clear-selection');
+        }
+      }
+      return null;
+    },
   },
   created() {
     this.state = createState(this.value, this.placeholder, this.plugins);
@@ -188,6 +216,9 @@ export default {
           keyup: () => {
             this.onKeyup();
           },
+          keydown: (view, event) => {
+            this.onKeydown(event);
+          },
           focus: () => {
             this.onFocus();
           },
@@ -203,6 +234,12 @@ export default {
         },
       });
     },
+    isEnterToSendEnabled() {
+      return isEditorHotKeyEnabled(this.uiSettings, 'enter');
+    },
+    isCmdPlusEnterToSendEnabled() {
+      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
+    },
     handleKeyEvents(e) {
       if (hasPressedAltAndPKey(e)) {
         this.focusEditorInputField();
@@ -233,7 +270,10 @@ export default {
         node
       );
       this.state = this.editorView.state.apply(tr);
-      return this.emitOnChange();
+      this.emitOnChange();
+      AnalyticsHelper.track(ANALYTICS_EVENTS.USED_MENTIONS);
+
+      return false;
     },
 
     insertCannedResponse(cannedItem) {
@@ -241,22 +281,27 @@ export default {
         return null;
       }
 
-      const tr = this.editorView.state.tr.insertText(
+      let from = this.range.from - 1;
-        cannedItem,
+      let node = addMentionsToMarkdownParser(defaultMarkdownParser).parse(
-        this.range.from,
+        cannedItem
-        this.range.to
       );
+
+      if (node.childCount === 1) {
+        node = this.editorView.state.schema.text(cannedItem);
+        from = this.range.from;
+      }
+
+      const tr = this.editorView.state.tr.replaceWith(
+        from,
+        this.range.to,
+        node
+      );
+
       this.state = this.editorView.state.apply(tr);
       this.emitOnChange();
 
-      // Hacky fix for #5501
+      tr.scrollIntoView();
-      this.state = createState(
+      AnalyticsHelper.track(ANALYTICS_EVENTS.INSERTED_A_CANNED_RESPONSE);
-        this.contentFromEditor,
-        this.placeholder,
-        this.plugins
-      );
-      this.editorView.updateState(this.state);
-      this.focusEditorInputField();
       return false;
     },
 
@@ -278,6 +323,24 @@ export default {
         clearTimeout(this.idleTimer);
       }
     },
+    handleLineBreakWhenEnterToSendEnabled(event) {
+      if (
+        hasPressedEnterAndNotCmdOrShift(event) &&
+        this.isEnterToSendEnabled() &&
+        !this.overrideLineBreaks
+      ) {
+        event.preventDefault();
+      }
+    },
+    handleLineBreakWhenCmdAndEnterToSendEnabled(event) {
+      if (
+        hasPressedCommandAndEnter(event) &&
+        this.isCmdPlusEnterToSendEnabled() &&
+        !this.overrideLineBreaks
+      ) {
+        event.preventDefault();
+      }
+    },
     onKeyup() {
       if (!this.idleTimer) {
         this.$emit('typing-on');
@@ -288,6 +351,14 @@ export default {
         TYPING_INDICATOR_IDLE_TIME
       );
     },
+    onKeydown(event) {
+      if (this.isEnterToSendEnabled()) {
+        this.handleLineBreakWhenEnterToSendEnabled(event);
+      }
+      if (this.isCmdPlusEnterToSendEnabled()) {
+        this.handleLineBreakWhenCmdAndEnterToSendEnabled(event);
+      }
+    },
     onBlur() {
       this.turnOffIdleTimer();
       this.resetTyping();

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -232,11 +232,18 @@ export default {
       return this.showFileUpload || this.isNote;
     },
     showAudioRecorderButton() {
+      // Disable audio recorder for safari browser as recording is not supported
+      const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
+        navigator.userAgent
+      );
+
       return (
         this.isFeatureEnabledonAccount(
           this.accountId,
           FEATURE_FLAGS.VOICE_RECORDER
-        ) && this.showAudioRecorder
+        ) &&
+        this.showAudioRecorder &&
+        !isSafari
       );
     },
     showAudioPlayStopButton() {

app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue

@@ -42,7 +42,7 @@
     </div>
     <dashboard-app-frame
       v-else
-      :key="currentChat.id"
+      :key="currentChat.id + '-' + activeIndex"
       :config="dashboardApps[activeIndex - 1].content"
       :current-chat="currentChat"
     />

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -91,6 +91,7 @@
         </span>
         <span class="unread">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
       </div>
+      <card-labels :conversation-id="chat.id" />
     </div>
     <woot-context-menu
       v-if="showContextMenu"
@@ -102,10 +103,12 @@
       <conversation-context-menu
         :status="chat.status"
         :inbox-id="inbox.id"
+        :has-unread-messages="hasUnread"
         @update-conversation="onUpdateConversation"
         @assign-agent="onAssignAgent"
         @assign-label="onAssignLabel"
         @assign-team="onAssignTeam"
+        @mark-as-unread="markAsUnread"
       />
     </woot-context-menu>
   </div>
@@ -123,8 +126,8 @@ import InboxName from '../InboxName';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
-import timeAgo from 'dashboard/components/ui/TimeAgo';
+import TimeAgo from 'dashboard/components/ui/TimeAgo';
-
+import CardLabels from './conversationCardComponents/CardLabels.vue';
 const ATTACHMENT_ICONS = {
   image: 'image',
   audio: 'headphones-sound-wave',
@@ -136,10 +139,11 @@ const ATTACHMENT_ICONS = {
 
 export default {
   components: {
+    CardLabels,
     InboxName,
     Thumbnail,
     ConversationContextMenu,
-    timeAgo,
+    TimeAgo,
   },
 
   mixins: [
@@ -241,7 +245,7 @@ export default {
     },
 
     unreadCount() {
-      return this.unreadMessagesCount(this.chat);
+      return this.chat.unread_count;
     },
 
     hasUnread() {
@@ -359,16 +363,24 @@ export default {
       this.$emit('assign-team', team, this.chat.id);
       this.closeContextMenu();
     },
+    async markAsUnread() {
+      this.$emit('mark-as-unread', this.chat.id);
+      this.closeContextMenu();
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .conversation {
-  align-items: center;
+  align-items: flex-start;
 
   &:hover {
     background: var(--color-background-light);
   }
+
+  &::v-deep .user-thumbnail-box {
+    margin-top: var(--space-normal);
+  }
 }
 
 .conversation-selected {
@@ -377,8 +389,10 @@ export default {
 
 .has-inbox-name {
   &::v-deep .user-thumbnail-box {
-    margin-top: var(--space-normal);
+    margin-top: var(--space-large);
-    align-items: flex-start;
+  }
+  .checkbox-wrapper {
+    margin-top: var(--space-large);
   }
   .conversation--meta {
     margin-top: var(--space-normal);
@@ -423,6 +437,7 @@ export default {
   margin-top: var(--space-minus-micro);
   vertical-align: middle;
 }
+
 .checkbox-wrapper {
   height: 40px;
   width: 40px;
@@ -432,6 +447,7 @@ export default {
   border-radius: 100%;
   margin-top: var(--space-normal);
   cursor: pointer;
+
   &:hover {
     background-color: var(--w-100);
   }

app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -21,7 +21,11 @@
           />
         </h3>
         <div class="conversation--header--actions">
-          <inbox-name :inbox="inbox" class="margin-right-small" />
+          <inbox-name
+            v-if="hasMultipleInboxes"
+            :inbox="inbox"
+            class="margin-right-small"
+          />
           <span
             v-if="isSnoozed"
             class="snoozed--display-text margin-right-small"
@@ -145,6 +149,9 @@ export default {
       const { inbox_id: inboxId } = this.chat;
       return this.$store.getters['inboxes/getInbox'](inboxId);
     },
+    hasMultipleInboxes() {
+      return this.$store.getters['inboxes/getInboxes'].length > 1;
+    },
   },
 
   methods: {

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -15,7 +15,6 @@
           v-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
-          :readable-time="readableTime"
           :display-quoted-button="displayQuotedButton"
         />
         <span
@@ -29,7 +28,6 @@
             <bubble-image
               v-if="attachment.file_type === 'image' && !hasImageError"
               :url="attachment.data_url"
-              :readable-time="readableTime"
               @error="onImageLoadError"
             />
             <audio v-else-if="attachment.file_type === 'audio'" controls>
@@ -38,7 +36,6 @@
             <bubble-video
               v-else-if="attachment.file_type === 'video'"
               :url="attachment.data_url"
-              :readable-time="readableTime"
             />
             <bubble-location
               v-else-if="attachment.file_type === 'location'"
@@ -46,11 +43,7 @@
               :longitude="attachment.coordinates_long"
               :name="attachment.fallback_title"
             />
-            <bubble-file
+            <bubble-file v-else :url="attachment.data_url" />
-              v-else
-              :url="attachment.data_url"
-              :readable-time="readableTime"
-            />
           </div>
         </div>
         <bubble-actions
@@ -59,14 +52,15 @@
           :story-sender="storySender"
           :story-id="storyId"
           :is-a-tweet="isATweet"
+          :is-a-whatsapp-channel="isAWhatsAppChannel"
           :has-instagram-story="hasInstagramStory"
           :is-email="isEmailContentType"
           :is-private="data.private"
           :message-type="data.message_type"
-          :readable-time="readableTime"
+          :message-status="status"
           :source-id="data.source_id"
           :inbox-id="data.inbox_id"
-          :message-read="showReadTicks"
+          :created-at="createdAt"
         />
       </div>
       <spinner v-if="isPending" size="tiny" />
@@ -117,8 +111,6 @@
 </template>
 <script>
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
-import timeMixin from '../../../mixins/time';
-
 import BubbleMailHead from './bubble/MailHead';
 import BubbleText from './bubble/Text';
 import BubbleImage from './bubble/Image';
@@ -147,7 +139,7 @@ export default {
     ContextMenu,
     Spinner,
   },
-  mixins: [alertMixin, timeMixin, messageFormatterMixin, contentTypeMixin],
+  mixins: [alertMixin, messageFormatterMixin, contentTypeMixin],
   props: {
     data: {
       type: Object,
@@ -157,11 +149,11 @@ export default {
       type: Boolean,
       default: false,
     },
-    hasInstagramStory: {
+    isAWhatsAppChannel: {
       type: Boolean,
       default: false,
     },
-    hasUserReadMessage: {
+    hasInstagramStory: {
       type: Boolean,
       default: false,
     },
@@ -231,6 +223,9 @@ export default {
     sender() {
       return this.data.sender || {};
     },
+    status() {
+      return this.data.status;
+    },
     storySender() {
       return this.contentAttributes.story_sender || null;
     },
@@ -264,11 +259,8 @@ export default {
         'has-tweet-menu': this.isATweet,
       };
     },
-    readableTime() {
+    createdAt() {
-      return this.messageStamp(
+      return this.contentAttributes.external_created_at || this.data.created_at;
-        this.contentAttributes.external_created_at || this.data.created_at,
-        'LLL d, h:mm a'
-      );
     },
     isBubble() {
       return [0, 1, 3].includes(this.data.message_type);
@@ -279,14 +271,6 @@ export default {
     isOutgoing() {
       return this.data.message_type === MESSAGE_TYPE.OUTGOING;
     },
-    showReadTicks() {
-      return (
-        (this.isOutgoing || this.isTemplate) &&
-        this.hasUserReadMessage &&
-        this.isWebWidgetInbox &&
-        !this.data.private
-      );
-    },
     isTemplate() {
       return this.data.message_type === MESSAGE_TYPE.TEMPLATE;
     },

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -35,20 +35,18 @@
       <message
         v-for="message in getReadMessages"
         :key="message.id"
-        class="message--read"
+        class="message--read ph-no-capture"
         :data="message"
         :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
-        :has-user-read-message="
-          hasUserReadMessage(message.created_at, getLastSeenAt)
-        "
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
-      <li v-show="getUnreadCount != 0" class="unread--toast">
+      <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span class="text-uppercase">
-          {{ getUnreadCount }}
+          {{ unreadMessageCount }}
           {{
-            getUnreadCount > 1
+            unreadMessageCount > 1
               ? $t('CONVERSATION.UNREAD_MESSAGES')
               : $t('CONVERSATION.UNREAD_MESSAGE')
           }}
@@ -57,13 +55,11 @@
       <message
         v-for="message in getUnReadMessages"
         :key="message.id"
-        class="message--unread"
+        class="message--unread ph-no-capture"
         :data="message"
         :is-a-tweet="isATweet"
+        :is-a-whatsapp-channel="isAWhatsAppChannel"
         :has-instagram-story="hasInstagramStory"
-        :has-user-read-message="
-          hasUserReadMessage(message.created_at, getLastSeenAt)
-        "
         :is-web-widget-inbox="isAWebWidgetInbox"
       />
     </ul>
@@ -137,7 +133,6 @@ export default {
       allConversations: 'getAllConversations',
       inboxesList: 'inboxes/getInboxes',
       listLoadingStatus: 'getAllMessagesLoaded',
-      getUnreadCount: 'getUnreadCount',
       loadingChatList: 'getChatListLoadingStatus',
     }),
     inboxId() {
@@ -271,6 +266,9 @@ export default {
       }
       return '';
     },
+    unreadMessageCount() {
+      return this.currentChat.unread_count;
+    },
   },
 
   watch: {
@@ -331,7 +329,7 @@ export default {
     },
     scrollToBottom() {
       let relevantMessages = [];
-      if (this.getUnreadCount > 0) {
+      if (this.unreadMessageCount > 0) {
         // capturing only the unread messages
         relevantMessages = this.conversationPanel.querySelectorAll(
           '.message--unread'
@@ -429,12 +427,7 @@ export default {
       position: fixed;
       left: unset;
       position: absolute;
-
+      bottom: var(--space-smaller);
-      &::before {
-        transform: rotate(0deg);
-        left: var(--space-smaller);
-        bottom: var(--space-minus-slab);
-      }
     }
   }
 }

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -37,6 +37,7 @@
       <woot-audio-recorder
         v-if="showAudioRecorderEditor"
         ref="audioRecorderInput"
+        :audio-record-format="audioRecordFormat"
         @state-recorder-progress-changed="onStateProgressRecorderChanged"
         @state-recorder-changed="onStateRecorderChanged"
         @finish-record="onFinishRecorder"
@@ -60,6 +61,7 @@
         class="input"
         :is-private="isOnPrivateNote"
         :placeholder="messagePlaceHolder"
+        :update-selection-with="updateEditorSelectionWith"
         :min-height="4"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
@@ -67,6 +69,7 @@
         @blur="onBlur"
         @toggle-user-mention="toggleUserMention"
         @toggle-canned-menu="toggleCannedMenu"
+        @clear-selection="clearEditorSelection"
       />
     </div>
     <div v-if="hasAttachments" class="attachment-preview-box" @paste="onPaste">
@@ -130,7 +133,6 @@ import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 
-import EmojiInput from 'shared/components/emoji/EmojiInput';
 import CannedResponse from './CannedResponse';
 import ResizableTextArea from 'shared/components/ResizableTextArea';
 import AttachmentPreview from 'dashboard/components/widgets/AttachmentsPreview';
@@ -146,6 +148,7 @@ import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import {
   MAXIMUM_FILE_UPLOAD_SIZE,
   MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+  AUDIO_FORMATS,
 } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 
@@ -160,6 +163,11 @@ import { LocalStorage, LOCAL_STORAGE_KEYS } from '../../../helper/localStorage';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
+import AnalyticsHelper, {
+  ANALYTICS_EVENTS,
+} from '../../../helper/AnalyticsHelper';
+
+const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
 export default {
   components: {
@@ -215,6 +223,7 @@ export default {
       ccEmails: '',
       doAutoSaveDraft: () => {},
       showWhatsAppTemplatesModal: false,
+      updateEditorSelectionWith: '',
     };
   },
   computed: {
@@ -398,7 +407,7 @@ export default {
       return conversationDisplayType !== CONDENSED;
     },
     emojiDialogClassOnExpanedLayout() {
-      return this.isOnExpandedLayout && !this.popoutReplyBox
+      return this.isOnExpandedLayout || this.popoutReplyBox
         ? 'emoji-dialog--expanded'
         : '';
     },
@@ -450,12 +459,17 @@ export default {
       return this.currentChat.id;
     },
     conversationIdByRoute() {
-      const { conversation_id: conversationId } = this.$route.params;
+      return this.conversationId;
-      return conversationId;
     },
     editorStateId() {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
+    audioRecordFormat() {
+      if (this.isAWebWidgetInbox) {
+        return AUDIO_FORMATS.WEBM;
+      }
+      return AUDIO_FORMATS.OGG;
+    },
   },
   watch: {
     currentChat(conversation) {
@@ -587,6 +601,7 @@ export default {
         e.preventDefault();
       } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
         this.onSendReply();
+        e.preventDefault();
       } else if (
         ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
         this.isAValidEvent('cmd_enter')
@@ -694,6 +709,7 @@ export default {
     },
     replaceText(message) {
       setTimeout(() => {
+        AnalyticsHelper.track(ANALYTICS_EVENTS.INSERTED_A_CANNED_RESPONSE);
         this.message = message;
       }, 100);
     },
@@ -708,8 +724,26 @@ export default {
       }
       this.$nextTick(() => this.$refs.messageInput.focus());
     },
+    clearEditorSelection() {
+      this.updateEditorSelectionWith = '';
+    },
+    insertEmoji(emoji, selectionStart, selectionEnd) {
+      const { message } = this;
+      const newMessage =
+        message.slice(0, selectionStart) +
+        emoji +
+        message.slice(selectionEnd, message.length);
+      this.message = newMessage;
+    },
     emojiOnClick(emoji) {
-      this.message = `${this.message}${emoji} `;
+      if (this.showRichContentEditor) {
+        this.updateEditorSelectionWith = emoji;
+        this.onFocus();
+      }
+      if (!this.showRichContentEditor) {
+        const { selectionStart, selectionEnd } = this.$refs.messageInput.$el;
+        this.insertEmoji(emoji, selectionStart, selectionEnd);
+      }
     },
     clearMessage() {
       this.message = '';
@@ -964,13 +998,13 @@ export default {
 
 .emoji-dialog {
   top: unset;
-  bottom: 12px;
+  bottom: var(--space-normal);
   left: -320px;
   right: unset;
 
   &::before {
-    right: -16px;
+    right: var(--space-minus-normal);
-    bottom: 10px;
+    bottom: var(--space-small);
     transform: rotate(270deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
@@ -984,7 +1018,7 @@ export default {
   &::before {
     transform: rotate(0deg);
     left: var(--space-smaller);
-    bottom: var(--space-minus-slab);
+    bottom: var(--space-minus-small);
   }
 }
 .message-signature {

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -1,22 +1,38 @@
 <template>
   <div class="message-text--metadata">
-    <span class="time" :class="{ delivered: messageRead }">{{
+    <span
-      readableTime
+      class="time"
-    }}</span>
+      :class="{
-    <span v-if="showSentIndicator" class="time">
+        'has-status-icon':
+          showSentIndicator || showDeliveredIndicator || showReadIndicator,
+      }"
+    >
+      {{ readableTime }}
+    </span>
+    <span v-if="showReadIndicator" class="read-indicator-wrap">
       <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-        icon="checkmark"
+        icon="checkmark-double"
+        class="action--icon read-tick read-indicator"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showDeliveredIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.DELIVERED')"
+        icon="checkmark-double"
+        class="action--icon read-tick"
+        size="14"
+      />
+    </span>
+    <span v-else-if="showSentIndicator" class="read-indicator-wrap">
+      <fluent-icon
+        v-tooltip.top-start="$t('CHAT_LIST.SENT')"
+        icon="checkmark"
+        class="action--icon read-tick"
         size="14"
       />
     </span>
-    <fluent-icon
-      v-if="messageRead"
-      v-tooltip.top-start="$t('CHAT_LIST.MESSAGE_READ')"
-      icon="checkmark-double"
-      class="action--icon read-tick"
-      size="12"
-    />
     <fluent-icon
       v-if="isEmail"
       v-tooltip.top-start="$t('CHAT_LIST.RECEIVED_VIA_EMAIL')"
@@ -44,19 +60,6 @@
         size="16"
       />
     </button>
-    <a
-      v-if="hasInstagramStory && (isIncoming || isOutgoing) && linkToStory"
-      :href="linkToStory"
-      target="_blank"
-      rel="noopener noreferrer nofollow"
-    >
-      <fluent-icon
-        v-tooltip.top-start="$t('CHAT_LIST.LINK_TO_STORY')"
-        icon="open"
-        class="action--icon cursor-pointer"
-        size="16"
-      />
-    </a>
     <a
       v-if="isATweet && (isOutgoing || isIncoming) && linkToTweet"
       :href="linkToTweet"
@@ -74,20 +77,22 @@
 </template>
 
 <script>
-import { MESSAGE_TYPE } from 'shared/constants/messages';
+import { MESSAGE_TYPE, MESSAGE_STATUS } from 'shared/constants/messages';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import inboxMixin from 'shared/mixins/inboxMixin';
+import { mapGetters } from 'vuex';
+import timeMixin from '../../../../mixins/time';
 
 export default {
-  mixins: [inboxMixin],
+  mixins: [inboxMixin, timeMixin],
   props: {
     sender: {
       type: Object,
       default: () => ({}),
     },
-    readableTime: {
+    createdAt: {
-      type: String,
+      type: Number,
-      default: '',
+      default: 0,
     },
     storySender: {
       type: String,
@@ -117,6 +122,10 @@ export default {
       type: Number,
       default: 1,
     },
+    messageStatus: {
+      type: String,
+      default: '',
+    },
     sourceId: {
       type: String,
       default: '',
@@ -129,12 +138,9 @@ export default {
       type: [String, Number],
       default: 0,
     },
-    messageRead: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
     inbox() {
       return this.$store.getters['inboxes/getInbox'](this.inboxId);
     },
@@ -144,6 +150,21 @@ export default {
     isOutgoing() {
       return MESSAGE_TYPE.OUTGOING === this.messageType;
     },
+    isTemplate() {
+      return MESSAGE_TYPE.TEMPLATE === this.messageType;
+    },
+    isDelivered() {
+      return MESSAGE_STATUS.DELIVERED === this.messageStatus;
+    },
+    isRead() {
+      return MESSAGE_STATUS.READ === this.messageStatus;
+    },
+    isSent() {
+      return MESSAGE_STATUS.SENT === this.messageStatus;
+    },
+    readableTime() {
+      return this.messageStamp(this.createdAt, 'LLL d, h:mm a');
+    },
     screenName() {
       const { additional_attributes: additionalAttributes = {} } =
         this.sender || {};
@@ -164,12 +185,52 @@ export default {
       const { storySender, storyId } = this;
       return `https://www.instagram.com/stories/${storySender}/${storyId}`;
     },
+    showStatusIndicators() {
+      if ((this.isOutgoing || this.isTemplate) && !this.private) {
+        return true;
+      }
+      return false;
+    },
     showSentIndicator() {
-      return (
+      if (!this.showStatusIndicators) {
-        this.isOutgoing &&
+        return false;
-        this.sourceId &&
+      }
-        (this.isAnEmailChannel || this.isAWhatsAppChannel)
+
-      );
+      if (this.isAnEmailChannel) {
+        return !!this.sourceId;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isSent;
+      }
+      return false;
+    },
+    showDeliveredIndicator() {
+      if (!this.showStatusIndicators) {
+        return false;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isDelivered;
+      }
+
+      return false;
+    },
+    showReadIndicator() {
+      if (!this.showStatusIndicators) {
+        return false;
+      }
+
+      if (this.isAWebWidgetInbox) {
+        const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
+        return contactLastSeenAt >= this.createdAt;
+      }
+
+      if (this.isAWhatsAppChannel) {
+        return this.sourceId && this.isRead;
+      }
+
+      return false;
     },
   },
   methods: {
@@ -185,16 +246,21 @@ export default {
 
 .right {
   .message-text--metadata {
+    align-items: center;
     .time {
       color: var(--w-100);
     }
 
     .action--icon {
+      color: var(--white);
+
       &.read-tick {
         color: var(--v-100);
-        margin-top: calc(var(--space-micro) + var(--space-micro) / 2);
       }
-      color: var(--white);
+
+      &.read-indicator {
+        color: var(--g-200);
+      }
     }
 
     .lock--icon--private {
@@ -258,8 +324,9 @@ export default {
       position: absolute;
       right: var(--space-small);
       white-space: nowrap;
-      &.delivered {
+
-        right: var(--space-medium);
+      &.has-status-icon {
+        right: var(--space-large);
         line-height: 2;
       }
     }
@@ -296,4 +363,10 @@ export default {
 .delivered-icon {
   margin-left: -var(--space-normal);
 }
+
+.read-indicator-wrap {
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue

@@ -35,10 +35,6 @@ export default {
       type: String,
       default: '',
     },
-    readableTime: {
-      type: String,
-      default: '',
-    },
     isEmail: {
       type: Boolean,
       default: true,

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="menu-container">
+    <menu-item
+      v-if="!hasUnreadMessages"
+      :option="unreadOption"
+      variant="icon"
+      @click="$emit('mark-as-unread')"
+    />
     <template v-for="option in statusMenuConfig">
       <menu-item
         v-if="show(option.key)"
@@ -79,6 +85,10 @@ export default {
       type: String,
       default: '',
     },
+    hasUnreadMessages: {
+      type: Boolean,
+      default: false,
+    },
     inboxId: {
       type: Number,
       default: null,
@@ -87,6 +97,10 @@ export default {
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
+      unreadOption: {
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
+        icon: 'mail',
+      },
       statusMenuConfig: [
         {
           key: wootConstants.STATUS_TYPE.RESOLVED,

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bulk-action__agents">
-    <div class="triangle">
+    <div class="triangle" :style="cssVars">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -105,13 +105,14 @@ import { mapGetters } from 'vuex';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner';
 import { mixin as clickaway } from 'vue-clickaway';
+import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 
 export default {
   components: {
     Thumbnail,
     Spinner,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, bulkActionsMixin],
   props: {
     selectedInboxes: {
       type: Array,
@@ -233,7 +234,7 @@ export default {
     z-index: var(--z-index-one);
     position: absolute;
     top: calc(var(--space-slab) * -1);
-    right: var(--space-micro);
+    right: var(--triangle-position);
     text-align: left;
   }
 }

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/Index.vue

@@ -43,25 +43,26 @@
           variant="smooth"
           color-scheme="secondary"
           icon="person-assign"
+          class="margin-right-smaller"
           @click="toggleAgentList"
         />
+        <woot-button
+          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+          size="tiny"
+          variant="smooth"
+          color-scheme="secondary"
+          icon="people-team-add"
+          @click="toggleTeamsList"
+        />
       </div>
       <transition name="popover-animation">
         <label-actions
           v-if="showLabelActions"
+          triangle-position="8.5"
           @assign="assignLabels"
           @close="showLabelActions = false"
         />
       </transition>
-      <transition name="popover-animation">
-        <agent-selector
-          v-if="showAgentsList"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="submit"
-          @close="showAgentsList = false"
-        />
-      </transition>
       <transition name="popover-animation">
         <update-actions
           v-if="showUpdateActions"
@@ -70,10 +71,29 @@
           :show-resolve="!showResolvedAction"
           :show-reopen="!showOpenAction"
           :show-snooze="!showSnoozedAction"
+          triangle-position="5.6"
           @update="updateConversations"
           @close="showUpdateActions = false"
         />
       </transition>
+      <transition name="popover-animation">
+        <agent-selector
+          v-if="showAgentsList"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          triangle-position="2.8"
+          @select="submit"
+          @close="showAgentsList = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <team-actions
+          v-if="showTeamsList"
+          triangle-position="0.2"
+          @assign-team="assignTeam"
+          @close="showTeamsList = false"
+        />
+      </transition>
     </div>
     <div v-if="allConversationsSelected" class="bulk-action__alert">
       {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
@@ -85,11 +105,13 @@
 import AgentSelector from './AgentSelector.vue';
 import UpdateActions from './UpdateActions.vue';
 import LabelActions from './LabelActions.vue';
+import TeamActions from './TeamActions.vue';
 export default {
   components: {
     AgentSelector,
     UpdateActions,
     LabelActions,
+    TeamActions,
   },
   props: {
     conversations: {
@@ -122,6 +144,8 @@ export default {
       showAgentsList: false,
       showUpdateActions: false,
       showLabelActions: false,
+      showTeamsList: false,
+      popoverPositions: {},
     };
   },
   methods: {
@@ -137,6 +161,9 @@ export default {
     assignLabels(labels) {
       this.$emit('assign-labels', labels);
     },
+    assignTeam(team) {
+      this.$emit('assign-team', team);
+    },
     resolveConversations() {
       this.$emit('resolve-conversations');
     },
@@ -149,6 +176,9 @@ export default {
     toggleAgentList() {
       this.showAgentsList = !this.showAgentsList;
     },
+    toggleTeamsList() {
+      this.showTeamsList = !this.showTeamsList;
+    },
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onClose" class="labels-container">
-    <div class="triangle">
+    <div class="triangle" :style="cssVars">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -75,9 +75,10 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
+import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
 
 export default {
-  mixins: [clickaway],
+  mixins: [clickaway, bulkActionsMixin],
   data() {
     return {
       query: '',
@@ -160,7 +161,7 @@ export default {
   max-width: var(--space-giga);
   min-width: var(--space-giga);
   position: absolute;
-  right: 4.5rem;
+  right: var(--space-small);
   top: var(--space-larger);
   transform-origin: top right;
   width: auto;
@@ -204,7 +205,7 @@ export default {
   .triangle {
     display: block;
     position: absolute;
-    right: var(--space-two);
+    right: var(--triangle-position);
     text-align: left;
     top: calc(var(--space-slab) * -1);
     z-index: var(--z-index-one);

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -0,0 +1,174 @@
+<template>
+  <div v-on-clickaway="onClose" class="bulk-action__teams">
+    <div class="triangle" :style="cssVars">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path
+          d="M20 12l-8-8-12 12"
+          fill="var(--white)"
+          fill-rule="evenodd"
+          stroke="var(--s-50)"
+          stroke-width="1px"
+        />
+      </svg>
+    </div>
+    <div class="header flex-between">
+      <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
+      <woot-button
+        size="tiny"
+        variant="clear"
+        color-scheme="secondary"
+        icon="dismiss"
+        @click="onClose"
+      />
+    </div>
+    <div class="container">
+      <div class="team__list-container">
+        <ul>
+          <li class="search-container">
+            <div class="agent-list-search flex-between">
+              <fluent-icon icon="search" class="search-icon" size="16" />
+              <input
+                ref="search"
+                v-model="query"
+                type="search"
+                placeholder="Search"
+                class="agent--search_input"
+              />
+            </div>
+          </li>
+          <template v-if="filteredTeams.length">
+            <li v-for="team in filteredTeams" :key="team.id">
+              <div class="team__list-item" @click="assignTeam(team)">
+                <span class="reports-option__title">{{ team.name }}</span>
+              </div>
+            </li>
+          </template>
+          <li v-else>
+            <div class="team__list-item">
+              <span class="reports-option__title">{{
+                $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE')
+              }}</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mixin as clickaway } from 'vue-clickaway';
+import { mapGetters } from 'vuex';
+import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
+export default {
+  mixins: [clickaway, bulkActionsMixin],
+  data() {
+    return {
+      query: '',
+      selectedteams: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ teams: 'teams/getTeams' }),
+    filteredTeams() {
+      return [
+        { name: 'None', id: 0 },
+        ...this.teams.filter(team =>
+          team.name.toLowerCase().includes(this.query.toLowerCase())
+        ),
+      ];
+    },
+  },
+  methods: {
+    assignTeam(key) {
+      this.$emit('assign-team', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.bulk-action__teams {
+  background-color: var(--white);
+  border-radius: var(--border-radius-large);
+  border: 1px solid var(--s-50);
+  box-shadow: var(--shadow-dropdown-pane);
+  max-width: 75%;
+  position: absolute;
+  right: var(--space-small);
+  top: var(--space-larger);
+  transform-origin: top right;
+  width: auto;
+  z-index: var(--z-index-twenty);
+  min-width: var(--space-giga);
+  .header {
+    padding: var(--space-one);
+
+    span {
+      font-size: var(--font-size-small);
+      font-weight: var(--font-weight-medium);
+    }
+  }
+
+  .container {
+    max-height: var(--space-giga);
+    overflow-y: auto;
+    .team__list-container {
+      height: 100%;
+    }
+    .agent-list-search {
+      padding: 0 var(--space-one);
+      border: 1px solid var(--s-100);
+      border-radius: var(--border-radius-medium);
+      background-color: var(--s-50);
+      .search-icon {
+        color: var(--s-400);
+      }
+
+      .agent--search_input {
+        border: 0;
+        font-size: var(--font-size-mini);
+        margin: 0;
+        background-color: transparent;
+        height: unset;
+      }
+    }
+  }
+  .triangle {
+    display: block;
+    z-index: var(--z-index-one);
+    position: absolute;
+    top: calc(var(--space-slab) * -1);
+    right: var(--triangle-position);
+    text-align: left;
+  }
+}
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+.team__list-item {
+  display: flex;
+  align-items: center;
+  padding: var(--space-one);
+  cursor: pointer;
+  &:hover {
+    background-color: var(--s-50);
+  }
+  span {
+    font-size: var(--font-size-small);
+  }
+}
+
+.search-container {
+  padding: 0 var(--space-one);
+  position: sticky;
+  top: 0;
+  z-index: var(--z-index-twenty);
+  background-color: var(--white);
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-on-clickaway="onClose" class="actions-container">
-    <div class="triangle">
+    <div class="triangle" :style="cssVars">
       <svg height="12" viewBox="0 0 24 12" width="24">
         <path
           d="M20 12l-8-8-12 12"
@@ -45,12 +45,14 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import bulkActionsMixin from 'dashboard/mixins/bulkActionsMixin.js';
+
 export default {
   components: {
     WootDropdownItem,
     WootDropdownMenu,
   },
-  mixins: [clickaway],
+  mixins: [clickaway, bulkActionsMixin],
   props: {
     selectedInboxes: {
       type: Array,
@@ -131,7 +133,7 @@ export default {
   box-shadow: var(--shadow-dropdown-pane);
   position: absolute;
   right: var(--space-small);
-  top: 48px;
+  top: var(--space-larger);
   transform-origin: top right;
   width: auto;
   z-index: var(--z-index-twenty);
@@ -152,7 +154,7 @@ export default {
   .triangle {
     display: block;
     position: absolute;
-    right: 2.8rem;
+    right: var(--triangle-position);
     text-align: left;
     top: calc(var(--space-slab) * -1);
     z-index: var(--z-index-one);

app/javascript/dashboard/components/widgets/conversation/conversationCardComponents/CardLabels.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    v-show="activeLabels.length"
+    ref="labelContainer"
+    class="label-container"
+  >
+    <div class="labels-wrap" :class="{ expand: showAllLabels }">
+      <woot-label
+        v-for="(label, index) in activeLabels"
+        :key="label.id"
+        :title="label.title"
+        :description="label.description"
+        :color="label.color"
+        variant="smooth"
+        small
+        :class="{ hidden: !showAllLabels && index > labelPosition }"
+      />
+      <woot-button
+        v-if="showExpandLabelButton"
+        :title="
+          showAllLabels
+            ? $t('CONVERSATION.CARD.HIDE_LABELS')
+            : $t('CONVERSATION.CARD.SHOW_LABELS')
+        "
+        class="show-more--button"
+        color-scheme="secondary"
+        variant="hollow"
+        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
+        size="tiny"
+        @click="onShowLabels"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import conversationLabelMixin from 'dashboard/mixins/conversation/labelMixin';
+export default {
+  mixins: [conversationLabelMixin],
+  props: {
+    conversationId: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      showAllLabels: false,
+      showExpandLabelButton: false,
+      labelPosition: -1,
+    };
+  },
+  watch: {
+    activeLabels() {
+      this.$nextTick(() => this.computeVisibleLabelPosition());
+    },
+  },
+  mounted() {
+    this.computeVisibleLabelPosition();
+  },
+  methods: {
+    onShowLabels(e) {
+      e.stopPropagation();
+      this.showAllLabels = !this.showAllLabels;
+    },
+    computeVisibleLabelPosition() {
+      const labelContainer = this.$refs.labelContainer;
+      const labels = this.$refs.labelContainer.querySelectorAll('.label');
+      let labelOffset = 0;
+      this.showExpandLabelButton = false;
+
+      Array.from(labels).forEach((label, index) => {
+        labelOffset += label.offsetWidth + 8;
+
+        if (labelOffset < labelContainer.clientWidth - 16) {
+          this.labelPosition = index;
+        } else {
+          this.showExpandLabelButton = true;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.show-more--button {
+  height: var(--space-two);
+  position: sticky;
+  flex-shrink: 0;
+  right: 0;
+  margin-right: var(--space-medium);
+
+  &.secondary:focus {
+    color: var(--s-700);
+    border-color: var(--s-300);
+  }
+}
+
+.label-container {
+  margin-top: var(--space-micro);
+}
+
+.labels-wrap {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex-shrink: 1;
+
+  &.expand {
+    height: auto;
+    overflow: visible;
+    flex-flow: row wrap;
+
+    .label {
+      margin-bottom: var(--space-smaller);
+    }
+
+    .show-more--button {
+      margin-bottom: var(--space-smaller);
+    }
+  }
+
+  .secondary {
+    border: 1px solid var(--s-100);
+  }
+
+  .label {
+    margin-bottom: 0;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+  position: absolute;
+}
+</style>

app/javascript/dashboard/constants.js

@@ -22,5 +22,6 @@ export default {
     EXPANDED: 'expanded',
   },
   DOCS_URL: '//www.chatwoot.com/docs/product/',
+  TESTIMONIAL_URL: 'https://testimonials.cdn.chatwoot.com/content.json',
 };
 export const DEFAULT_REDIRECT_URL = '/app/';

app/javascript/dashboard/featureFlags.js

@@ -1,13 +1,18 @@
 export const FEATURE_FLAGS = {
   AGENT_BOTS: 'agent_bots',
   AGENT_MANAGEMENT: 'agent_management',
+  AUTO_RESOLVE_CONVERSATIONS: 'auto_resolve_conversations',
   AUTOMATIONS: 'automations',
+  CAMPAIGNS: 'campaigns',
   CANNED_RESPONSES: 'canned_responses',
+  CRM: 'crm',
   CUSTOM_ATTRIBUTES: 'custom_attributes',
   INBOX_MANAGEMENT: 'inbox_management',
   INTEGRATIONS: 'integrations',
   LABELS: 'labels',
   MACROS: 'macros',
+  HELP_CENTER: 'help_center',
+  REPORTS: 'reports',
   TEAM_MANAGEMENT: 'team_management',
   VOICE_RECORDER: 'voice_recorder',
 };

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -0,0 +1,9 @@
+export const EXECUTED_A_MACRO = 'Executed a macro';
+export const SENT_MESSAGE = 'Sent a message';
+export const SENT_PRIVATE_NOTE = 'Sent a private note';
+export const INSERTED_A_CANNED_RESPONSE = 'Inserted a canned response';
+export const USED_MENTIONS = 'Used mentions';
+export const MERGED_CONTACTS = 'Used merge contact option';
+export const ADDED_TO_CANNED_RESPONSE = 'Used added to canned response option';
+export const ADDED_A_CUSTOM_ATTRIBUTE = 'Added a custom attribute';
+export const ADDED_AN_INBOX = 'Added an inbox';

app/javascript/dashboard/helper/AnalyticsHelper/index.js

@@ -0,0 +1,67 @@
+import { AnalyticsBrowser } from '@june-so/analytics-next';
+
+class AnalyticsHelper {
+  constructor({ token: analyticsToken } = {}) {
+    this.analyticsToken = analyticsToken;
+    this.analytics = null;
+    this.user = {};
+  }
+
+  async init() {
+    if (!this.analyticsToken) {
+      return;
+    }
+
+    let [analytics] = await AnalyticsBrowser.load({
+      writeKey: this.analyticsToken,
+    });
+    this.analytics = analytics;
+  }
+
+  identify(user) {
+    if (!this.analytics) {
+      return;
+    }
+    this.user = user;
+    this.analytics.identify(this.user.email, {
+      userId: this.user.id,
+      email: this.user.email,
+      name: this.user.name,
+      avatar: this.user.avatar_url,
+    });
+
+    const { accounts, account_id: accountId } = this.user;
+    const [currentAccount] = accounts.filter(
+      account => account.id === accountId
+    );
+    if (currentAccount) {
+      this.analytics.group(currentAccount.id, this.user.id, {
+        name: currentAccount.name,
+      });
+    }
+  }
+
+  track(eventName, properties = {}) {
+    if (!this.analytics) {
+      return;
+    }
+
+    this.analytics.track({
+      userId: this.user.id,
+      event: eventName,
+      properties,
+    });
+  }
+
+  page(params) {
+    if (!this.analytics) {
+      return;
+    }
+
+    this.analytics.page(params);
+  }
+}
+
+export * as ANALYTICS_EVENTS from './events';
+
+export default new AnalyticsHelper(window.analyticsConfig);

app/javascript/dashboard/helper/URLHelper.js

@@ -56,6 +56,8 @@ export const conversationUrl = ({
     url = `accounts/${accountId}/custom_view/${foldersId}/conversations/${id}`;
   } else if (conversationType === 'mention') {
     url = `accounts/${accountId}/mentions/conversations/${id}`;
+  } else if (conversationType === 'unattended') {
+    url = `accounts/${accountId}/unattended/conversations/${id}`;
   }
   return url;
 };
@@ -66,16 +68,23 @@ export const conversationListPageURL = ({
   inboxId,
   label,
   teamId,
+  customViewId,
 }) => {
   let url = `accounts/${accountId}/dashboard`;
   if (label) {
     url = `accounts/${accountId}/label/${label}`;
   } else if (teamId) {
     url = `accounts/${accountId}/team/${teamId}`;
-  } else if (conversationType === 'mention') {
-    url = `accounts/${accountId}/mentions/conversations`;
   } else if (inboxId) {
     url = `accounts/${accountId}/inbox/${inboxId}`;
+  } else if (customViewId) {
+    url = `accounts/${accountId}/custom_view/${customViewId}`;
+  } else if (conversationType) {
+    const urlMap = {
+      mention: 'mentions/conversations',
+      unattended: 'unattended/conversations',
+    };
+    url = `accounts/${accountId}/${urlMap[conversationType]}`;
   }
   return frontendURL(url);
 };

app/javascript/dashboard/helper/actionQueryGenerator.js

@@ -17,13 +17,22 @@ const formatArray = params => {
   return params;
 };
 
+const generatePayloadForObject = item => {
+  if (item.action_params.id) {
+    item.action_params = [item.action_params.id];
+  } else {
+    item.action_params = [item.action_params];
+  }
+  return item.action_params;
+};
+
 const generatePayload = data => {
   const actions = JSON.parse(JSON.stringify(data));
   let payload = actions.map(item => {
     if (Array.isArray(item.action_params)) {
       item.action_params = formatArray(item.action_params);
-    } else if (typeof item.values === 'object') {
+    } else if (typeof item.action_params === 'object') {
-      item.action_params = [item.action_params.id];
+      item.action_params = generatePayloadForObject(item);
     } else if (!item.action_params) {
       item.action_params = [];
     } else {

app/javascript/dashboard/helper/automationHelper.js

@@ -0,0 +1,242 @@
+import {
+  OPERATOR_TYPES_1,
+  OPERATOR_TYPES_3,
+  OPERATOR_TYPES_4,
+} from 'dashboard/routes/dashboard/settings/automation/operators';
+import filterQueryGenerator from './filterQueryGenerator';
+import actionQueryGenerator from './actionQueryGenerator';
+const MESSAGE_CONDITION_VALUES = [
+  {
+    id: 'incoming',
+    name: 'Incoming Message',
+  },
+  {
+    id: 'outgoing',
+    name: 'Outgoing Message',
+  },
+];
+
+export const getCustomAttributeInputType = key => {
+  const customAttributeMap = {
+    date: 'date',
+    text: 'plain_text',
+    list: 'search_select',
+    checkbox: 'search_select',
+  };
+
+  return customAttributeMap[key] || 'plain_text';
+};
+
+export const isACustomAttribute = (customAttributes, key) => {
+  return customAttributes.find(attr => {
+    return attr.attribute_key === key;
+  });
+};
+
+export const getCustomAttributeListDropdownValues = (
+  customAttributes,
+  type
+) => {
+  return customAttributes
+    .find(attr => attr.attribute_key === type)
+    .attribute_values.map(item => {
+      return {
+        id: item,
+        name: item,
+      };
+    });
+};
+
+export const isCustomAttributeCheckbox = (customAttributes, key) => {
+  return customAttributes.find(attr => {
+    return (
+      attr.attribute_key === key && attr.attribute_display_type === 'checkbox'
+    );
+  });
+};
+
+export const isCustomAttributeList = (customAttributes, type) => {
+  return customAttributes.find(attr => {
+    return (
+      attr.attribute_key === type && attr.attribute_display_type === 'list'
+    );
+  });
+};
+
+export const getOperatorTypes = key => {
+  const operatorMap = {
+    list: OPERATOR_TYPES_1,
+    text: OPERATOR_TYPES_3,
+    number: OPERATOR_TYPES_1,
+    link: OPERATOR_TYPES_1,
+    date: OPERATOR_TYPES_4,
+    checkbox: OPERATOR_TYPES_1,
+  };
+
+  return operatorMap[key] || OPERATOR_TYPES_1;
+};
+
+export const generateCustomAttributeTypes = (customAttributes, type) => {
+  return customAttributes.map(attr => {
+    return {
+      key: attr.attribute_key,
+      name: attr.attribute_display_name,
+      inputType: getCustomAttributeInputType(attr.attribute_display_type),
+      filterOperators: getOperatorTypes(attr.attribute_display_type),
+      customAttributeType: type,
+    };
+  });
+};
+
+export const generateConditionOptions = (options, key = 'id') => {
+  return options.map(i => {
+    return {
+      id: i[key],
+      name: i.title,
+    };
+  });
+};
+
+export const getActionOptions = ({ teams, labels, type }) => {
+  const actionsMap = {
+    assign_team: teams,
+    send_email_to_team: teams,
+    add_label: generateConditionOptions(labels, 'title'),
+  };
+  return actionsMap[type];
+};
+
+export const getConditionOptions = ({
+  agents,
+  booleanFilterOptions,
+  campaigns,
+  contacts,
+  countries,
+  customAttributes,
+  inboxes,
+  languages,
+  statusFilterOptions,
+  teams,
+  type,
+}) => {
+  if (isCustomAttributeCheckbox(customAttributes, type)) {
+    return booleanFilterOptions;
+  }
+
+  if (isCustomAttributeList(customAttributes, type)) {
+    return getCustomAttributeListDropdownValues(customAttributes, type);
+  }
+
+  const conditionFilterMaps = {
+    status: statusFilterOptions,
+    assignee_id: agents,
+    contact: contacts,
+    inbox_id: inboxes,
+    team_id: teams,
+    campaigns: generateConditionOptions(campaigns),
+    browser_language: languages,
+    country_code: countries,
+    message_type: MESSAGE_CONDITION_VALUES,
+  };
+
+  return conditionFilterMaps[type];
+};
+
+export const getFileName = (action, files = []) => {
+  const blobId = action.action_params[0];
+  if (!blobId) return '';
+  if (action.action_name === 'send_attachment') {
+    const file = files.find(item => item.blob_id === blobId);
+    if (file) return file.filename.toString();
+  }
+  return '';
+};
+
+export const getDefaultConditions = eventName => {
+  if (eventName === 'message_created') {
+    return [
+      {
+        attribute_key: 'message_type',
+        filter_operator: 'equal_to',
+        values: '',
+        query_operator: 'and',
+        custom_attribute_type: '',
+      },
+    ];
+  }
+  return [
+    {
+      attribute_key: 'status',
+      filter_operator: 'equal_to',
+      values: '',
+      query_operator: 'and',
+      custom_attribute_type: '',
+    },
+  ];
+};
+
+export const getDefaultActions = () => {
+  return [
+    {
+      action_name: 'assign_team',
+      action_params: [],
+    },
+  ];
+};
+
+export const filterCustomAttributes = customAttributes => {
+  return customAttributes.map(attr => {
+    return {
+      key: attr.attribute_key,
+      name: attr.attribute_display_name,
+      type: attr.attribute_display_type,
+    };
+  });
+};
+
+export const getStandardAttributeInputType = (automationTypes, event, key) => {
+  return automationTypes[event].conditions.find(item => item.key === key)
+    .inputType;
+};
+
+export const generateAutomationPayload = payload => {
+  const automation = JSON.parse(JSON.stringify(payload));
+  automation.conditions[automation.conditions.length - 1].query_operator = null;
+  automation.conditions = filterQueryGenerator(automation.conditions).payload;
+  automation.actions = actionQueryGenerator(automation.actions);
+  return automation;
+};
+
+export const isCustomAttribute = (attrs, key) => {
+  return attrs.find(attr => attr.key === key);
+};
+
+export const generateCustomAttributes = (
+  conversationAttributes = [],
+  contactAttribtues = [],
+  conversationlabel,
+  contactlabel
+) => {
+  const customAttributes = [];
+  if (conversationAttributes.length) {
+    customAttributes.push(
+      {
+        key: `conversation_custom_attribute`,
+        name: conversationlabel,
+        disabled: true,
+      },
+      ...conversationAttributes
+    );
+  }
+  if (contactAttribtues.length) {
+    customAttributes.push(
+      {
+        key: `contact_custom_attribute`,
+        name: contactlabel,
+        disabled: true,
+      },
+      ...contactAttribtues
+    );
+  }
+  return customAttributes;
+};

app/javascript/dashboard/helper/filterQueryGenerator.js

@@ -1,15 +1,3 @@
-const lowerCaseValues = (operator, values) => {
-  if (operator === 'equal_to' || operator === 'not_equal_to') {
-    values = values.map(val => {
-      if (typeof val === 'string') {
-        return val.toLowerCase();
-      }
-      return val;
-    });
-  }
-  return values;
-};
-
 const generatePayload = data => {
   // Make a copy of data to avoid vue data reactivity issues
   const filters = JSON.parse(JSON.stringify(data));
@@ -23,8 +11,6 @@ const generatePayload = data => {
     } else {
       item.values = [item.values];
     }
-    // Convert all values to lowerCase if operator_type is 'equal_to' or 'not_equal_to'
-    item.values = lowerCaseValues(item.filter_operator, item.values);
     return item;
   });
   // For every query added, the query_operator is set default to and so the

app/javascript/dashboard/helper/preChat.js

@@ -60,15 +60,11 @@ export const getFormattedPreChatFields = ({ preChatFields }) => {
     return {
       ...item,
       label: getLabel({
-        key: standardFieldKeys[item.name]
+        key: item.name,
-          ? standardFieldKeys[item.name].key
-          : item.name,
         label: item.label ? item.label : item.name,
       }),
       placeholder: getPlaceHolder({
-        key: standardFieldKeys[item.name]
+        key: item.name,
-          ? standardFieldKeys[item.name].key
-          : item.name,
         placeholder: item.placeholder ? item.placeholder : item.name,
       }),
     };

app/javascript/dashboard/helper/scriptHelpers.js

@@ -1,4 +1,4 @@
-import posthog from 'posthog-js';
+import AnalyticsHelper from './AnalyticsHelper';
 
 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
 export const CHATWOOT_RESET = 'CHATWOOT_RESET';
@@ -8,16 +8,9 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 
 export const initializeAnalyticsEvents = () => {
   window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
-    if (window.analyticsConfig) {
+    AnalyticsHelper.identify(user);
-      posthog.identify(user.id, { name: user.name, email: user.email });
-    }
-  });
-
-  window.bus.$on(ANALYTICS_RESET, () => {
-    if (window.analyticsConfig) {
-      posthog.reset();
-    }
   });
+  window.bus.$on(ANALYTICS_RESET, () => {});
 };
 
 export const initializeChatwootEvents = () => {

app/javascript/dashboard/helper/specs/URLHelper.spec.js

@@ -29,6 +29,12 @@ describe('#URL Helpers', () => {
         '/app/accounts/1/team/1'
       );
     });
+
+    it('should return url to custom view', () => {
+      expect(conversationListPageURL({ accountId: 1, customViewId: 1 })).toBe(
+        '/app/accounts/1/custom_view/1'
+      );
+    });
   });
   describe('conversationUrl', () => {
     it('should return direct conversation URL if activeInbox is nil', () => {

app/javascript/dashboard/helper/specs/filterQueryGenerator.spec.js

@@ -5,7 +5,7 @@ const testData = [
     attribute_key: 'status',
     filter_operator: 'equal_to',
     values: [
-      { id: 'PENDING', name: 'Pending' },
+      { id: 'pending', name: 'Pending' },
       { id: 'resolved', name: 'Resolved' },
     ],
     query_operator: 'and',
@@ -18,7 +18,7 @@ const testData = [
       account_id: 1,
       auto_offline: true,
       confirmed: true,
-      email: 'fayazara@gmail.com',
+      email: 'fayaz@test.com',
       available_name: 'Fayaz',
       name: 'Fayaz',
       role: 'agent',
@@ -52,7 +52,7 @@ const finalResult = {
     {
       attribute_key: 'id',
       filter_operator: 'equal_to',
-      values: ['this is a test'],
+      values: ['This is a test'],
     },
   ],
 };

app/javascript/dashboard/helper/specs/macrosFixtures.js

@@ -70,6 +70,34 @@ export const labels = [
   },
 ];
 
+export const agents = [
+  {
+    id: 1,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'john@doe.com',
+    available_name: 'John Doe',
+    name: 'John Doe',
+    role: 'agent',
+    thumbnail:
+      'http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBUZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--746506837470c1a3dd063e90211ba2386963d52f/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJY0c1bkJqb0dSVlE2QzNKbGMybDZaVWtpRERJMU1IZ3lOVEFHT3daVSIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--e0e35266e8ed66e90c51be02408be8a022aca545/batman_90804.png',
+  },
+  {
+    id: 9,
+    account_id: 1,
+    availability_status: 'offline',
+    auto_offline: true,
+    confirmed: true,
+    email: 'clark@kent.com',
+    available_name: 'Clark Kent',
+    name: 'Clark Kent',
+    role: 'agent',
+    thumbnail: '',
+  },
+];
+
 export const files = [
   {
     id: 76,

app/javascript/dashboard/helper/specs/macrosHelper.spec.js

@@ -4,9 +4,10 @@ import {
   resolveLabels,
   resolveTeamIds,
   getFileName,
+  resolveAgents,
 } from '../../routes/dashboard/settings/macros/macroHelper';
 import { MACRO_ACTION_TYPES } from '../../routes/dashboard/settings/macros/constants';
-import { teams, labels, files } from './macrosFixtures';
+import { teams, labels, files, agents } from './macrosFixtures';
 
 describe('#emptyMacro', () => {
   const defaultMacro = {
@@ -52,6 +53,13 @@ describe('#resolveLabels', () => {
   });
 });
 
+describe('#resolveAgents', () => {
+  it('resolves agents names from ids and returns a joined string', () => {
+    const resolvedAgents = 'John Doe';
+    expect(resolveAgents(agents, [1])).toEqual(resolvedAgents);
+  });
+});
+
 describe('#getFileName', () => {
   it('returns the correct file name from the list of files', () => {
     expect(getFileName(files[0].blob_id, 'send_attachment', files)).toEqual(

app/javascript/dashboard/i18n/index.js

@@ -15,6 +15,7 @@ import id from './locale/id';
 import it from './locale/it';
 import ja from './locale/ja';
 import ko from './locale/ko';
+import lv from './locale/lv';
 import ml from './locale/ml';
 import nl from './locale/nl';
 import no from './locale/no';
@@ -52,6 +53,7 @@ export default {
   ja,
   ko,
   ml,
+  lv,
   nl,
   no,
   pl,

app/javascript/dashboard/i18n/locale/ar/agentBots.json

@@ -1,5 +1,70 @@
 {
   "AGENT_BOTS": {
-    "HEADER": "Bots"
+    "HEADER": "Bots",
+    "LOADING_EDITOR": "Loading Editor...",
+    "HEADER_BTN_TXT": "Add Bot Configuration",
+    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent bots allows you to automate the conversations</p>",
+    "CSML_BOT_EDITOR": {
+      "NAME": {
+        "LABEL": "Bot Name",
+        "PLACEHOLDER": "Give your bot a name",
+        "ERROR": "Bot name is required"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Bot Description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "BOT_CONFIG": {
+        "ERROR": "Please enter your CSML bot configuration above",
+        "API_ERROR": "Your CSML configuration is invalid, please fix it and try again."
+      },
+      "SUBMIT": "Validate and save"
+    },
+    "BOT_CONFIGURATION": {
+      "TITLE": "Select an agent bot",
+      "DESC": "You can set an agent bot from the list to this inbox. The bot can initially handle the conversation and transfer it to an agent when needed.",
+      "SUBMIT": "تحديث",
+      "SUCCESS_MESSAGE": "Successfully updated the agent bot",
+      "ERROR_MESSAGE": "Could not update the agent bot, please try again later",
+      "SELECT_PLACEHOLDER": "Select Bot"
+    },
+    "ADD": {
+      "TITLE": "Configure new bot",
+      "CANCEL_BUTTON_TEXT": "إلغاء",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot added successfully",
+        "ERROR_MESSAGE": "Could not add bot, Please try again later"
+      }
+    },
+    "LIST": {
+      "404": "No Bots found, you can create a bot by clicking the 'Configure new bot' Button ↗",
+      "LOADING": "Fetching Bots...",
+      "TYPE": "Bot Type"
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "حذف",
+      "TITLE": "Delete Bot",
+      "SUBMIT": "حذف",
+      "CANCEL_BUTTON_TEXT": "إلغاء",
+      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot deleted successfully",
+        "ERROR_MESSAGE": "Could not able to delete bot, Please try again later"
+      }
+    },
+    "EDIT": {
+      "BUTTON_TEXT": "تعديل",
+      "LOADING": "Fetching Bots...",
+      "TITLE": "Edit Bot",
+      "CANCEL_BUTTON_TEXT": "إلغاء",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot updated successfully",
+        "ERROR_MESSAGE": "Could not update bot, Please try again later"
+      }
+    },
+    "TYPES": {
+      "WEBHOOK": "Webhook Bot",
+      "CSML": "CSML Bot"
+    }
   }
 }

app/javascript/dashboard/i18n/locale/ar/automation.json

@@ -86,7 +86,9 @@
       "RESET_MESSAGE": "تغيير نوع الحدث سوف يعيد تعيين الشروط والأحداث التي أضفتها أدناه"
     },
     "CONDITION": {
-      "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ"
+      "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
     },
     "ACTION": {
       "DELETE_MESSAGE": "يجب أن يكون لديك على الأقل شرط واحد للحفظ",

app/javascript/dashboard/i18n/locale/ar/bulkActions.json

@@ -8,6 +8,7 @@
     "ASSIGN_LABEL": "تكليف",
     "YES": "نعم",
     "ASSIGN_AGENT_TOOLTIP": "إسناد وكيل",
+    "ASSIGN_TEAM_TOOLTIP": "تعيين فريق",
     "ASSIGN_SUCCESFUL": "تم تعيين المحادثات بنجاح",
     "ASSIGN_FAILED": "فشل في تعيين المحادثات، الرجاء المحاولة مرة أخرى",
     "RESOLVE_SUCCESFUL": "تم تسوية المحادثات بنجاح",
@@ -26,6 +27,14 @@
       "ASSIGN_SELECTED_LABELS": "تعيين التسميات المحددة",
       "ASSIGN_SUCCESFUL": "تم تعيين التسميات بنجاح",
       "ASSIGN_FAILED": "فشل في تعيين التسميات ، الرجاء المحاولة مرة أخرى"
+    },
+    "TEAMS": {
+      "TEAM_SELECT_LABEL": "اختيار فريق",
+      "NONE": "لا شيء",
+      "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
+      "ASSIGN_SELECTED_TEAMS": "Assign selected team",
+      "ASSIGN_SUCCESFUL": "Teams assiged successfully",
+      "ASSIGN_FAILED": "Failed to assign team, please try again"
     }
   }
 }

app/javascript/dashboard/i18n/locale/ar/chatlist.json

@@ -8,6 +8,7 @@
     },
     "TAB_HEADING": "المحادثات",
     "MENTION_HEADING": "الإشارات",
+    "UNATTENDED_HEADING": "بدون حضور",
     "SEARCH": {
       "INPUT": "البحث عن جهات الاتصال، المحادثات، قوالب الردود الجاهزة .."
     },
@@ -56,6 +57,8 @@
     "REPLY_TO_TWEET": "الرد على هذه التغريدة",
     "LINK_TO_STORY": "الذهاب إلى قصة الإنستقرام",
     "SENT": "Sent successfully",
+    "READ": "Read successfully",
+    "DELIVERED": "Delivered successfully",
     "NO_MESSAGES": "لا توجد رسائل",
     "NO_CONTENT": "لم يتم العثور على محتوى",
     "HIDE_QUOTED_TEXT": "Hide Quoted Text",

app/javascript/dashboard/i18n/locale/ar/conversation.json

@@ -41,6 +41,10 @@
     "NO_RESPONSE": "لا توجد استجابة",
     "RATING_TITLE": "التقييم",
     "FEEDBACK_TITLE": "الملاحظات",
+    "CARD": {
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels"
+    },
     "HEADER": {
       "RESOLVE_ACTION": "إغلاق المحادثة",
       "REOPEN_ACTION": "إعادة فتح",
@@ -64,6 +68,7 @@
     "CARD_CONTEXT_MENU": {
       "PENDING": "تحديد كمعلق",
       "RESOLVED": "تحديد كمحلولة",
+      "MARK_AS_UNREAD": "Mark as unread",
       "REOPEN": "إعادة فتح المحادثة",
       "SNOOZE": {
         "TITLE": "غفوة",

app/javascript/dashboard/i18n/locale/ar/emoji.json

@@ -0,0 +1,6 @@
+{
+  "EMOJI": {
+    "PLACEHOLDER": "Search emojis",
+    "NOT_FOUND": "No emoji match your search"
+  }
+}

app/javascript/dashboard/i18n/locale/ar/generalSettings.json

@@ -23,7 +23,7 @@
         "ERROR": "الرجاء إدخال اسم حساب صحيح"
       },
       "LANGUAGE": {
-        "LABEL": "لغة الموقع (تجريبي)",
+        "LABEL": "Site language",
         "PLACEHOLDER": "اسم الحساب الخاص بك",
         "ERROR": ""
       },
@@ -54,7 +54,8 @@
     "MULTISELECT": {
       "ENTER_TO_SELECT": "اضغط على زر الإدخال للاختيار",
       "ENTER_TO_REMOVE": "اضغط على زر الإدخال للحذف",
-      "SELECT_ONE": "اختر واحدا"
+      "SELECT_ONE": "اختر واحدا",
+      "SELECT": "Select"
     }
   },
   "NOTIFICATIONS_PAGE": {
@@ -136,5 +137,8 @@
       "UNTIL_NEXT_WEEK": "حتى الأسبوع القادم",
       "UNTIL_TOMORROW": "حتى الغد"
     }
+  },
+  "DASHBOARD_APPS": {
+    "LOADING_MESSAGE": "Loading Dashboard App..."
   }
 }

app/javascript/dashboard/i18n/locale/ar/inboxMgmt.json

@@ -134,7 +134,7 @@
         "PHONE_NUMBER": {
           "LABEL": "رقم الهاتف",
           "PLACEHOLDER": "الرجاء إدخال رقم الهاتف الذي سيتم إرسال الرسائل منه.",
-          "ERROR": "الرجاء إدخال قيمة صحيحة. يجب أن يبدأ رقم الهاتف بعلامة `+`."
+          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
         "API_CALLBACK": {
           "TITLE": "عنوان Callback URL",
@@ -185,7 +185,7 @@
           "PHONE_NUMBER": {
             "LABEL": "رقم الهاتف",
             "PLACEHOLDER": "الرجاء إدخال رقم الهاتف الذي سيتم إرسال الرسائل منه.",
-            "ERROR": "الرجاء إدخال قيمة صحيحة. يجب أن يبدأ رقم الهاتف بعلامة `+`."
+            "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
           },
           "SUBMIT_BUTTON": "إنشاء قناة عرض التردد",
           "API": {
@@ -214,7 +214,7 @@
         "PHONE_NUMBER": {
           "LABEL": "رقم الهاتف",
           "PLACEHOLDER": "الرجاء إدخال رقم الهاتف الذي سيتم إرسال الرسائل منه.",
-          "ERROR": "الرجاء إدخال قيمة صحيحة. يجب أن يبدأ رقم الهاتف بعلامة `+`."
+          "ERROR": "Please provide a valid phone number that starts with a `+` sign and does not contain any spaces."
         },
         "PHONE_NUMBER_ID": {
           "LABEL": "رقم الهاتف",
@@ -388,6 +388,10 @@
         "ENABLED": "مفعل",
         "DISABLED": "معطّل"
       },
+      "LOCK_TO_SINGLE_CONVERSATION": {
+        "ENABLED": "مفعل",
+        "DISABLED": "معطّل"
+      },
       "ENABLE_HMAC": {
         "LABEL": "تمكين"
       }
@@ -416,7 +420,8 @@
       "CAMPAIGN": "الحملات",
       "PRE_CHAT_FORM": "نموذج ما قبل الدردشة",
       "BUSINESS_HOURS": "ساعات العمل",
-      "WIDGET_BUILDER": "منشئ اللايف شات"
+      "WIDGET_BUILDER": "منشئ اللايف شات",
+      "BOT_CONFIGURATION": "Bot Configuration"
     },
     "SETTINGS": "الإعدادات",
     "FEATURES": {
@@ -440,6 +445,8 @@
       "ENABLE_CSAT_SUB_TEXT": "تمكين/تعطيل تقييم خدمة العملاء بعد إنتهاء المحادثة",
       "ENABLE_CONTINUITY_VIA_EMAIL": "تمكين استمرارية المحادثة عبر البريد الإلكتروني",
       "ENABLE_CONTINUITY_VIA_EMAIL_SUB_TEXT": "المحادثات ستستمر عبر البريد الإلكتروني إذا كان عنوان البريد الإلكتروني لجهة الاتصال متاحاً.",
+      "LOCK_TO_SINGLE_CONVERSATION": "Lock to single conversation",
+      "LOCK_TO_SINGLE_CONVERSATION_SUB_TEXT": "Enable or disable multiple conversations for the same contact in this inbox",
       "INBOX_UPDATE_TITLE": "إعدادات قناة التواصل",
       "INBOX_UPDATE_SUB_TEXT": "تحديث إعدادات قناة التواصل",
       "AUTO_ASSIGNMENT_SUB_TEXT": "تمكين أو تعطيل الإسناد التلقائي للمحادثات الجديدة إلى الموظفين المضافين إلى قناة التواصل هذه.",

app/javascript/dashboard/i18n/locale/ar/settings.json

@@ -103,7 +103,9 @@
           "متصل",
           "مشغول",
           "غير متصل"
-        ]
+        ],
+        "SET_AVAILABILITY_SUCCESS": "Availability has been set successfully",
+        "SET_AVAILABILITY_ERROR": "Couldn't set availability, please try again"
       },
       "EMAIL": {
         "LABEL": "عنوان البريد الإلكتروني الخاص بك",
@@ -134,6 +136,7 @@
     "SELECTOR_SUBTITLE": "اختر حساباً من القائمة التالية",
     "PROFILE_SETTINGS": "إعدادات الملف الشخصي",
     "KEYBOARD_SHORTCUTS": "اختصارات لوحة المفاتيح",
+    "SUPER_ADMIN_CONSOLE": "Super Admin Console",
     "LOGOUT": "تسجيل الخروج"
   },
   "APP_GLOBAL": {
@@ -158,6 +161,9 @@
       "DOWNLOAD": "تنزيل",
       "UPLOADING": "جاري الرفع..."
     },
+    "LOCATION_BUBBLE": {
+      "SEE_ON_MAP": "See on map"
+    },
     "FORM_BUBBLE": {
       "SUBMIT": "إرسال"
     }
@@ -174,6 +180,7 @@
     "CONVERSATIONS": "المحادثات",
     "ALL_CONVERSATIONS": "كل المحادثات",
     "MENTIONED_CONVERSATIONS": "الإشارات",
+    "UNATTENDED_CONVERSATIONS": "بدون حضور",
     "REPORTS": "التقارير",
     "SETTINGS": "الإعدادات",
     "CONTACTS": "جهات الاتصال",
@@ -222,6 +229,10 @@
       "CATEGORY": "الفئة",
       "CATEGORY_EMPTY_MESSAGE": "لم يتم العثور على فئات"
     },
+    "SET_AUTO_OFFLINE": {
+      "TEXT": "Mark offline automatically",
+      "INFO_TEXT": "Let the system automatically mark you offline when you aren't using the app or dashboard."
+    },
     "DOCS": "قراءة المستندات"
   },
   "BILLING_SETTINGS": {
@@ -253,7 +264,7 @@
     },
     "FORM": {
       "NAME": {
-        "LABEL": "اسم الحساب",
+        "LABEL": "اسم الشركة",
         "PLACEHOLDER": "مؤسسة Wayne"
       },
       "SUBMIT": "إرسال"

app/javascript/dashboard/i18n/locale/ar/signup.json

@@ -2,11 +2,13 @@
   "REGISTER": {
     "TRY_WOOT": "تسجيل حساب",
     "TITLE": "تسجيل",
+    "TESTIMONIAL_HEADER": "All it takes is one step to move forward",
+    "TESTIMONIAL_CONTENT": "You're one step away from engaging your customers, retaining them and finding new ones.",
     "TERMS_ACCEPT": "من خلال التسجيل، فإنك توافق على <a href=\"https://www.chatwoot.com/terms\">شروط الخدمة</a> و <a href=\"https://www.chatwoot.com/privacy-policy\">سياسة الخصوصية</a>",
-    "ACCOUNT_NAME": {
+    "COMPANY_NAME": {
-      "LABEL": "اسم الحساب",
+      "LABEL": "Company name",
-      "PLACEHOLDER": "أدخل اسم الحساب. مثال: Wayne Enterprises",
+      "PLACEHOLDER": "Enter your company name. eg: Wayne Enterprises",
-      "ERROR": "اسم الحساب قصير جداً"
+      "ERROR": "Company name is too short"
     },
     "FULL_NAME": {
       "LABEL": "الاسم الكامل",
@@ -16,7 +18,7 @@
     "EMAIL": {
       "LABEL": "البريد الإلكتروني للعمل",
       "PLACEHOLDER": "أدخل عنوان بريدك الإلكتروني للعمل. مثال: bruce@wayne.enterprises",
-      "ERROR": "عنوان البريد الإلكتروني غير صالح"
+      "ERROR": "Please enter a valid work email address"
     },
     "PASSWORD": {
       "LABEL": "كلمة المرور",

app/javascript/dashboard/i18n/locale/bg/agentBots.json

@@ -1,5 +1,70 @@
 {
   "AGENT_BOTS": {
-    "HEADER": "Bots"
+    "HEADER": "Bots",
+    "LOADING_EDITOR": "Loading Editor...",
+    "HEADER_BTN_TXT": "Add Bot Configuration",
+    "SIDEBAR_TXT": "<p><b>Agent Bots</b> <p>Agent bots allows you to automate the conversations</p>",
+    "CSML_BOT_EDITOR": {
+      "NAME": {
+        "LABEL": "Bot Name",
+        "PLACEHOLDER": "Give your bot a name",
+        "ERROR": "Bot name is required"
+      },
+      "DESCRIPTION": {
+        "LABEL": "Bot Description",
+        "PLACEHOLDER": "What does this bot do?"
+      },
+      "BOT_CONFIG": {
+        "ERROR": "Please enter your CSML bot configuration above",
+        "API_ERROR": "Your CSML configuration is invalid, please fix it and try again."
+      },
+      "SUBMIT": "Validate and save"
+    },
+    "BOT_CONFIGURATION": {
+      "TITLE": "Select an agent bot",
+      "DESC": "You can set an agent bot from the list to this inbox. The bot can initially handle the conversation and transfer it to an agent when needed.",
+      "SUBMIT": "Обновяване",
+      "SUCCESS_MESSAGE": "Successfully updated the agent bot",
+      "ERROR_MESSAGE": "Could not update the agent bot, please try again later",
+      "SELECT_PLACEHOLDER": "Select Bot"
+    },
+    "ADD": {
+      "TITLE": "Configure new bot",
+      "CANCEL_BUTTON_TEXT": "Отмени",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot added successfully",
+        "ERROR_MESSAGE": "Could not add bot, Please try again later"
+      }
+    },
+    "LIST": {
+      "404": "No Bots found, you can create a bot by clicking the 'Configure new bot' Button ↗",
+      "LOADING": "Fetching Bots...",
+      "TYPE": "Bot Type"
+    },
+    "DELETE": {
+      "BUTTON_TEXT": "Изтрий",
+      "TITLE": "Delete Bot",
+      "SUBMIT": "Изтрий",
+      "CANCEL_BUTTON_TEXT": "Отмени",
+      "DESCRIPTION": "Are you sure you want to delete this bot? This action is irreversible",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot deleted successfully",
+        "ERROR_MESSAGE": "Could not able to delete bot, Please try again later"
+      }
+    },
+    "EDIT": {
+      "BUTTON_TEXT": "Редактирай",
+      "LOADING": "Fetching Bots...",
+      "TITLE": "Edit Bot",
+      "CANCEL_BUTTON_TEXT": "Отмени",
+      "API": {
+        "SUCCESS_MESSAGE": "Bot updated successfully",
+        "ERROR_MESSAGE": "Could not update bot, Please try again later"
+      }
+    },
+    "TYPES": {
+      "WEBHOOK": "Webhook Bot",
+      "CSML": "CSML Bot"
+    }
   }
 }

app/javascript/dashboard/i18n/locale/bg/automation.json

@@ -86,7 +86,9 @@
       "RESET_MESSAGE": "Changing event type will reset the conditions and events you have added below"
     },
     "CONDITION": {
-      "DELETE_MESSAGE": "You need to have atleast one condition to save"
+      "DELETE_MESSAGE": "You need to have atleast one condition to save",
+      "CONTACT_CUSTOM_ATTR_LABEL": "Contact Custom Attributes",
+      "CONVERSATION_CUSTOM_ATTR_LABEL": "Conversation Custom Attributes"
     },
     "ACTION": {
       "DELETE_MESSAGE": "You need to have atleast one action to save",

app/javascript/dashboard/i18n/locale/bg/bulkActions.json

@@ -8,6 +8,7 @@
     "ASSIGN_LABEL": "Assign",
     "YES": "Yes",
     "ASSIGN_AGENT_TOOLTIP": "Assign Agent",
+    "ASSIGN_TEAM_TOOLTIP": "Assign team",
     "ASSIGN_SUCCESFUL": "Conversations assigned successfully",
     "ASSIGN_FAILED": "Failed to assign conversations, please try again",
     "RESOLVE_SUCCESFUL": "Conversations resolved successfully",
@@ -26,6 +27,14 @@
       "ASSIGN_SELECTED_LABELS": "Assign selected labels",
       "ASSIGN_SUCCESFUL": "Labels assigned successfully",
       "ASSIGN_FAILED": "Failed to assign labels, please try again"
+    },
+    "TEAMS": {
+      "TEAM_SELECT_LABEL": "Select Team",
+      "NONE": "Нито един",
+      "NO_TEAMS_AVAILABLE": "There are no teams added to this account yet.",
+      "ASSIGN_SELECTED_TEAMS": "Assign selected team",
+      "ASSIGN_SUCCESFUL": "Teams assiged successfully",
+      "ASSIGN_FAILED": "Failed to assign team, please try again"
     }
   }
 }

app/javascript/dashboard/i18n/locale/bg/chatlist.json

@@ -8,6 +8,7 @@
     },
     "TAB_HEADING": "Разговори",
     "MENTION_HEADING": "Споменавания",
+    "UNATTENDED_HEADING": "Unattended",
     "SEARCH": {
       "INPUT": "Търсене на хора, чатове, запазени отговори .."
     },
@@ -56,6 +57,8 @@
     "REPLY_TO_TWEET": "Отговори на този туит",
     "LINK_TO_STORY": "Go to instagram story",
     "SENT": "Успено изпратено",
+    "READ": "Read successfully",
+    "DELIVERED": "Delivered successfully",
     "NO_MESSAGES": "Няма съобщения",
     "NO_CONTENT": "Няма налично съдържание",
     "HIDE_QUOTED_TEXT": "Скриване на цитирания текст",

app/javascript/dashboard/i18n/locale/bg/conversation.json

@@ -41,6 +41,10 @@
     "NO_RESPONSE": "No response",
     "RATING_TITLE": "Rating",
     "FEEDBACK_TITLE": "Feedback",
+    "CARD": {
+      "SHOW_LABELS": "Show labels",
+      "HIDE_LABELS": "Hide labels"
+    },
     "HEADER": {
       "RESOLVE_ACTION": "Resolve",
       "REOPEN_ACTION": "Reopen",
@@ -64,6 +68,7 @@
     "CARD_CONTEXT_MENU": {
       "PENDING": "Mark as pending",
       "RESOLVED": "Mark as resolved",
+      "MARK_AS_UNREAD": "Mark as unread",
       "REOPEN": "Reopen conversation",
       "SNOOZE": {
         "TITLE": "Snooze",

app/javascript/dashboard/i18n/locale/bg/emoji.json

@@ -0,0 +1,6 @@
+{
+  "EMOJI": {
+    "PLACEHOLDER": "Search emojis",
+    "NOT_FOUND": "No emoji match your search"
+  }
+}