fix: Retry message

Co-authored-by: Sojan Jose <sojan@pepalo.com>

.env.example

@@ -199,7 +199,7 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Rack Attack configuration
 ## To prevent and throttle abusive requests
 # ENABLE_RACK_ATTACK=true
-# RACK_ATTACK_IP_LIMIT=3000
+# RACK_ATTACK_LIMIT=300
 # ENABLE_RACK_ATTACK_WIDGET_API=true
 
 ## Running chatwoot as an API only server

.eslintrc.js

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:storybook/recommended',
   ],
   parserOptions: {
-    parser: 'babel-eslint',
+    parser: '@babel/eslint-parser',
     ecmaVersion: 2020,
     sourceType: 'module',
   },
@@ -24,13 +24,16 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
+    'vue/html-indent': 'off',
+    'vue/multi-word-component-names': 'off',
     'vue/max-attributes-per-line': [
       'error',
       {
-        singleline: 20,
+        singleline: {
+          max: 20,
+        },
         multiline: {
           max: 1,
-          allowFirstLine: false,
         },
       },
     ],
@@ -47,6 +50,7 @@ module.exports = {
       },
     ],
     'vue/no-v-html': 'off',
+    'vue/component-definition-name-casing': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
     'no-console': 'error',

.github/workflows/run_response_bot_spec.yml

@@ -69,7 +69,12 @@ jobs:
     # Run  Response Bot specs
     - name: Run backend tests
       run: |
-        bundle exec rspec spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 --profile=10 --format documentation
+        bundle exec rspec \
+          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
+          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
+          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
+          --profile=10 \
+          --format documentation
 
     - name: Upload rails log folder
       uses: actions/upload-artifact@v3

.rubocop.yml

@@ -58,6 +58,7 @@ Metrics/BlockLength:
 Metrics/ModuleLength:
   Exclude:
     - lib/seeders/message_seeder.rb
+    - spec/support/slack_stubs.rb
 Rails/ApplicationController:
   Exclude:
     - 'app/controllers/api/v1/widget/messages_controller.rb'

Gemfile

@@ -15,7 +15,7 @@ gem 'browser'
 gem 'hashie'
 gem 'jbuilder'
 gem 'kaminari'
-gem 'responders'
+gem 'responders', '>= 3.1.1'
 gem 'rest-client'
 gem 'telephone_number'
 gem 'time_diff'
@@ -67,7 +67,7 @@ gem 'webpacker'
 gem 'barnes'
 
 ##--- gems for authentication & authorization ---##
-gem 'devise'
+gem 'devise', '>= 4.9.3'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth'
 # authorization
@@ -76,6 +76,7 @@ gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.19.0'
 gem 'administrate-field-active_storage'
+gem 'administrate-field-belongs_to_search'
 
 ##--- gems for pubsub service ---##
 # https://karolgalanciak.com/blog/2019/11/30/from-activerecord-callbacks-to-publish-slash-subscribe-pattern-and-event-driven-design/
@@ -91,7 +92,7 @@ gem 'twitty', '~> 0.1.5'
 # facebook client
 gem 'koala'
 # slack client
-gem 'slack-ruby-client', '~> 2.0.0'
+gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
 gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
@@ -108,9 +109,9 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.11.0', require: false
+gem 'sentry-rails', '>= 5.12.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.11.0', require: false
+gem 'sentry-sidekiq', '>= 5.12.0', require: false
 
 ##-- background job processing --##
 gem 'sidekiq', '>= 7.1.3'
@@ -153,12 +154,12 @@ gem 'stripe'
 gem 'faker'
 
 # Include logrange conditionally in intializer using env variable
-gem 'lograge', '~> 0.13.0', require: false
+gem 'lograge', '~> 0.14.0', require: false
 
 # worked with microsoft refresh token
 gem 'omniauth-oauth2'
 
-gem 'audited', '~> 5.3'
+gem 'audited', '~> 5.4', '>= 5.4.0'
 
 # need for google auth
 gem 'omniauth'

Gemfile.lock

@@ -116,13 +116,18 @@ GEM
     administrate-field-active_storage (0.4.2)
       administrate (>= 0.2.2)
       rails (>= 7.0)
+    administrate-field-belongs_to_search (0.8.0)
+      administrate (>= 0.3, < 1.0)
+      jbuilder (~> 2)
+      rails (>= 4.2, < 7.1)
+      selectize-rails (~> 0.6)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
     ast (2.4.2)
     attr_extras (7.1.0)
-    audited (5.3.3)
+    audited (5.4.0)
-      activerecord (>= 5.0, < 7.1)
+      activerecord (>= 5.0, < 7.2)
       request_store (~> 1.2)
     aws-eventstream (1.2.0)
     aws-partitions (1.760.0)
@@ -143,7 +148,7 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    bcrypt (3.1.18)
+    bcrypt (3.1.19)
     bindex (0.8.1)
     blingfire (0.1.8)
     bootsnap (1.16.0)
@@ -188,7 +193,7 @@ GEM
       irb (>= 1.5.0)
       reline (>= 0.3.1)
     declarative (0.0.20)
-    devise (4.9.2)
+    devise (4.9.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -268,7 +273,7 @@ GEM
       googleauth (~> 1.0)
       grpc (~> 1.36)
     geocoder (1.8.1)
-    gli (2.21.0)
+    gli (2.21.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     gmail_xoauth (0.4.2)
@@ -429,12 +434,12 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    lograge (0.13.0)
+    lograge (0.14.0)
       actionpack (>= 4)
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.21.3)
+    loofah (2.21.4)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -611,7 +616,7 @@ GEM
       uber (< 0.2.0)
     request_store (1.5.1)
       rack (>= 1.4)
-    responders (3.1.0)
+    responders (3.1.1)
       actionpack (>= 5.2)
       railties (>= 5.2)
     rest-client (2.1.0)
@@ -697,18 +702,18 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.11.0)
+    sentry-rails (5.12.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.11.0)
+      sentry-ruby (~> 5.12.0)
-    sentry-ruby (5.11.0)
+    sentry-ruby (5.12.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.11.0)
+    sentry-sidekiq (5.12.0)
-      sentry-ruby (~> 5.11.0)
+      sentry-ruby (~> 5.12.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.1.3)
+    sidekiq (7.1.6)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -727,13 +732,12 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    slack-ruby-client (2.0.0)
+    slack-ruby-client (2.2.0)
       faraday (>= 2.0)
       faraday-mashify
       faraday-multipart
       gli
       hashie
-      websocket-driver
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
@@ -812,7 +816,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.11)
+    zeitwerk (2.6.12)
 
 PLATFORMS
   arm64-darwin-20
@@ -831,9 +835,10 @@ DEPENDENCIES
   acts-as-taggable-on
   administrate (>= 0.19.0)
   administrate-field-active_storage
+  administrate-field-belongs_to_search
   annotate
   attr_extras
-  audited (~> 5.3)
+  audited (~> 5.4, >= 5.4.0)
   aws-sdk-s3
   azure-storage-blob!
   barnes
@@ -850,7 +855,7 @@ DEPENDENCIES
   database_cleaner
   ddtrace
   debug (~> 1.8)
-  devise
+  devise (>= 4.9.3)
   devise-secure_password!
   devise_token_auth
   dotenv-rails
@@ -886,7 +891,7 @@ DEPENDENCIES
   line-bot-api
   liquid
   listen
-  lograge (~> 0.13.0)
+  lograge (~> 0.14.0)
   maxminddb
   mock_redis
   neighbor
@@ -910,7 +915,7 @@ DEPENDENCIES
   rails (~> 7.0.8.0)
   redis
   redis-namespace
-  responders
+  responders (>= 3.1.1)
   rest-client
   reverse_markdown
   rspec-rails
@@ -922,14 +927,14 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.11.0)
+  sentry-rails (>= 5.12.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.11.0)
+  sentry-sidekiq (>= 5.12.0)
   shoulda-matchers
   sidekiq (>= 7.1.3)
   sidekiq-cron (>= 1.10.1)
   simplecov (= 0.17.1)
-  slack-ruby-client (~> 2.0.0)
+  slack-ruby-client (~> 2.2.0)
   spring
   spring-watcher-listen
   squasher

VERSION_CW

@@ -1 +1 @@
-2.17.0
+3.1.0

VERSION_CWCTL

@@ -1 +1 @@
-2.3.0
+2.6.0

app/assets/stylesheets/administrate/application.scss

@@ -29,3 +29,5 @@
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';
+
+@import 'custom_styles';

app/assets/stylesheets/administrate/base/_forms.scss

@@ -24,14 +24,6 @@ select {
   font-size: $base-font-size;
 }
 
-input,
-select,
-textarea {
-  display: block;
-  font-family: $base-font-family;
-  font-size: 16px;
-}
-
 [type="color"],
 [type="date"],
 [type="datetime-local"],
@@ -51,6 +43,7 @@ textarea {
   background-color: $white;
   border: $base-border;
   border-radius: $base-border-radius;
+  font-family: $base-font-family;
   padding: 0.5em;
   transition: border-color $base-duration $base-timing;
   width: 100%;

app/assets/stylesheets/administrate/components/_attributes.scss

@@ -4,8 +4,8 @@
   float: left;
   margin-bottom: $base-spacing;
   margin-top: 0.25em;
-  text-align: right;
+  text-align: left;
-  width: calc(15% - 1rem);
+  width: calc(16% - 1rem);
 }
 
 .preserve-whitespace {
@@ -17,7 +17,7 @@
   float: left;
   margin-bottom: $base-spacing;
   margin-left: 2rem;
-  width: calc(85% - 1rem);
+  width: calc(84% - 1rem);
 }
 
 .attribute--nested {

app/assets/stylesheets/administrate/components/_buttons.scss

@@ -10,7 +10,7 @@ input[type="submit"],
   color: $white;
   cursor: pointer;
   display: inline-block;
-  font-size: $font-size-default;
+  font-size: $font-size-small;
   -webkit-font-smoothing: antialiased;
   font-weight: $font-weight-medium;
   line-height: 1;

app/assets/stylesheets/administrate/components/_main-content.scss

@@ -1,13 +1,18 @@
 .main-content {
   font-size: $font-size-default;
-  left: 23rem;
+  left: 21rem;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 .main-content__body {
+  font-size: $font-size-small;
   padding: $space-two;
+
+  table {
+    font-size: $font-size-small;
+  }
 }
 
 .main-content__header {
@@ -20,7 +25,7 @@
 }
 
 .main-content__page-title {
-  font-size: $font-size-large;
+  font-size: $font-size-medium;
   font-weight: $font-weight-medium;
   margin-right: auto;
 }

app/assets/stylesheets/administrate/components/_navigation.scss

@@ -1,7 +1,12 @@
 .logo-brand {
   margin-bottom: $space-normal;
   padding: $space-normal $space-smaller $space-small;
-  text-align: center;
+  text-align: left;
+
+  img {
+    margin-bottom: $space-smaller;
+    max-height: 3rem;
+  }
 }
 
 .navigation {
@@ -19,12 +24,13 @@
   padding: $space-normal;
   position: fixed;
   top: 0;
-  width: 23rem;
+  width: 21rem;
   z-index: 1023;
 
   li {
     align-items: center;
     display: flex;
+    font-size: $font-size-small;
 
     a {
       color: $color-gray;
@@ -35,6 +41,10 @@
       min-width: $space-medium;
     }
   }
+
+  hr {
+    margin: $space-slab;
+  }
 }
 
 .navigation__link {
@@ -43,7 +53,7 @@
   display: block;
   line-height: 1;
   margin-bottom: $space-smaller;
-  padding: $space-one;
+  padding: $space-small;
 
   &:hover {
     color: $blue;

app/assets/stylesheets/administrate/custom_styles.scss

@@ -0,0 +1,24 @@
+// custom styles for the dashboard
+
+.feature-cell {
+  background: $color-extra-light-blue;
+  border-radius: 10px;
+  float: left;
+  margin-left: 8px;
+  margin-top: 6px;
+  padding: 4px 12px;
+
+  .icon-container {
+    margin-right: 4px;
+
+  }
+
+  .value-container {
+    margin-left: 6px;
+  }
+}
+
+
+.feature-container {
+  max-width: 100rem;
+}

app/assets/stylesheets/administrate/library/_variables.scss

@@ -4,7 +4,7 @@ $base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe
   sans-serif !default;
 $heading-font-family: $base-font-family !default;
 
-$base-font-size: 16px !default;
+$base-font-size: 14px !default;
 
 $base-line-height: 1.5 !default;
 $heading-line-height: 1.2 !default;

app/assets/stylesheets/administrate/utilities/_variables.scss

@@ -78,11 +78,6 @@ $conv-header-height: 4rem;
 $inbox-thumb-size: 4.8rem;
 
 
-// Spinner
-$spinkit-spinner-color: $color-white !default;
-$spinkit-spinner-margin: 0 0 0 1.6rem !default;
-$spinkit-size: 1.6rem !default;
-
 // Snackbar default
 $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;

app/builders/messages/facebook/message_builder.rb

@@ -93,6 +93,9 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
       message_type: @message_type,
       content: response.content,
       source_id: response.identifier,
+      content_attributes: {
+        in_reply_to_external_id: response.in_reply_to_external_id
+      },
       sender: @outgoing_echo ? nil : @contact_inbox.contact
     }
   end

app/builders/v2/report_builder.rb

@@ -15,7 +15,10 @@ class V2::ReportBuilder
   end
 
   def timeseries
-    send(params[:metric])
+    return send(params[:metric]) if metric_valid?
+
+    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
+    {}
   end
 
   # For backward compatible with old report
@@ -53,6 +56,16 @@ class V2::ReportBuilder
 
   private
 
+  def metric_valid?
+    %w[conversations_count
+       incoming_messages_count
+       outgoing_messages_count
+       avg_first_response_time
+       avg_resolution_time reply_time
+       resolutions_count
+       reply_time].include?(params[:metric])
+  end
+
   def inbox
     @inbox ||= account.inboxes.find(params[:id])
   end

app/controllers/api/v1/accounts/actions/contact_merges_controller.rb

@@ -9,7 +9,6 @@ class Api::V1::Accounts::Actions::ContactMergesController < Api::V1::Accounts::B
       mergee_contact: @mergee_contact
     )
     contact_merge_action.perform
-    render json: @base_contact
   end
 
   private

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

@@ -0,0 +1,21 @@
+class Api::V1::Accounts::ContactInboxesController < Api::V1::Accounts::BaseController
+  before_action :ensure_inbox
+
+  def filter
+    contact_inbox = @inbox.contact_inboxes.where(inbox_id: permitted_params[:inbox_id], source_id: permitted_params[:source_id])
+    return head :not_found if contact_inbox.empty?
+
+    @contact = contact_inbox.first.contact
+  end
+
+  private
+
+  def ensure_inbox
+    @inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
+    authorize @inbox, :show?
+  end
+
+  def permitted_params
+    params.permit(:inbox_id, :source_id)
+  end
+end

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

@@ -25,7 +25,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     render json: { error: 'Specify search string with parameter q' }, status: :unprocessable_entity if params[:q].blank? && return
 
     contacts = resolved_contacts.where(
-      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search',
+      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search
+        OR contacts.additional_attributes->>\'company_name\' ILIKE :search',
       search: "%#{params[:q].strip}%"
     )
     @contacts_count = contacts.count

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

@@ -60,7 +60,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def toggle_status
-    if params[:status]
+    if params[:status].present?
       set_conversation_status
       @status = @conversation.save!
     else

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

@@ -1,4 +1,4 @@
-class Api::V1::UploadController < Api::BaseController
+class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create
     file_blob = ActiveStorage::Blob.create_and_upload!(
       key: nil,

app/controllers/api/v1/integrations/webhooks_controller.rb

@@ -1,7 +1,15 @@
 class Api::V1::Integrations::WebhooksController < ApplicationController
   def create
-    builder = Integrations::Slack::IncomingMessageBuilder.new(params)
+    builder = Integrations::Slack::IncomingMessageBuilder.new(permitted_params)
     response = builder.perform
     render json: response
   end
+
+  private
+
+  # TODO: This is a temporary solution to permit all params for slack unfurling job.
+  # We should only permit the params that we use. Handle all the params based on events and send it to the respective services.
+  def permitted_params
+    params.permit!
+  end
 end

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

@@ -1,5 +1,6 @@
 class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   include Events::Types
+  before_action :render_not_found_if_empty, only: [:toggle_typing, :toggle_status, :set_custom_attributes, :destroy_custom_attributes]
 
   def index
     @conversation = conversation
@@ -27,6 +28,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
 
     conversation.contact_last_seen_at = DateTime.now.utc
     conversation.save!
+    ::Conversations::MarkMessagesAsReadJob.perform_later(conversation)
     head :ok
   end
 
@@ -41,8 +43,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def toggle_typing
-    head :ok && return if conversation.nil?
-
     case permitted_params[:typing_status]
     when 'on'
       trigger_typing_event(CONVERSATION_TYPING_ON)
@@ -54,8 +54,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def toggle_status
-    return head :not_found if conversation.nil?
-
     return head :forbidden unless @web_widget.end_conversation?
 
     unless conversation.resolved?
@@ -81,6 +79,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
     Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: conversation, user: @contact)
   end
 
+  def render_not_found_if_empty
+    return head :not_found if conversation.nil?
+  end
+
   def permitted_params
     params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
                                                                message: [:content, :referer_url, :timestamp, :echo_id],

app/controllers/concerns/request_exception_handler.rb

@@ -9,11 +9,14 @@ module RequestExceptionHandler
 
   def handle_with_exception
     yield
-  rescue ActiveRecord::RecordNotFound
+  rescue ActiveRecord::RecordNotFound => e
+    log_handled_error(e)
     render_not_found_error('Resource could not be found')
-  rescue Pundit::NotAuthorizedError
+  rescue Pundit::NotAuthorizedError => e
+    log_handled_error(e)
     render_unauthorized('You are not authorized to do this action')
   rescue ActionController::ParameterMissing => e
+    log_handled_error(e)
     render_could_not_create_error(e.message)
   ensure
     # to address the thread variable leak issues in Puma/Thin webserver
@@ -41,6 +44,7 @@ module RequestExceptionHandler
   end
 
   def render_record_invalid(exception)
+    log_handled_error(exception)
     render json: {
       message: exception.record.errors.full_messages.join(', '),
       attributes: exception.record.errors.attribute_names
@@ -48,6 +52,11 @@ module RequestExceptionHandler
   end
 
   def render_error_response(exception)
+    log_handled_error(exception)
     render json: exception.to_hash, status: exception.http_status
   end
+
+  def log_handled_error(exception)
+    logger.info("Handled error: #{exception.inspect}")
+  end
 end

app/controllers/public/api/v1/inboxes/conversations_controller.rb

@@ -23,6 +23,7 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
   def update_last_seen
     @conversation.contact_last_seen_at = DateTime.now.utc
     @conversation.save!
+    ::Conversations::MarkMessagesAsReadJob.perform_later(@conversation)
     head :ok
   end
 
@@ -33,7 +34,7 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
   end
 
   def create_conversation
-    ::Conversation.create!(conversation_params)
+    ConversationBuilder.new(params: conversation_params, contact_inbox: @contact_inbox).perform
   end
 
   def trigger_typing_event(event)
@@ -41,11 +42,6 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
   end
 
   def conversation_params
-    {
+    params.permit(custom_attributes: {})
-      account_id: @contact_inbox.contact.account_id,
-      inbox_id: @contact_inbox.inbox_id,
-      contact_id: @contact_inbox.contact_id,
-      contact_inbox_id: @contact_inbox.id
-    }
   end
 end

app/controllers/public/api/v1/portals/articles_controller.rb

@@ -44,7 +44,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort)
+    params.permit(:query, :locale, :sort, :status)
   end
 
   def permitted_params

app/controllers/public/api/v1/portals/base_controller.rb

@@ -1,5 +1,6 @@
 class Public::Api::V1::Portals::BaseController < PublicController
   before_action :show_plain_layout
+  before_action :set_color_scheme
   around_action :set_locale
   after_action :allow_iframe_requests
 
@@ -9,6 +10,14 @@ class Public::Api::V1::Portals::BaseController < PublicController
     @is_plain_layout_enabled = params[:show_plain_layout] == 'true'
   end
 
+  def set_color_scheme
+    @theme = if %w[dark light].include?(params[:theme])
+               params[:theme]
+             else
+               ''
+             end
+  end
+
   def set_locale(&)
     switch_locale_with_portal(&) if params[:locale].present?
     switch_locale_with_article(&) if params[:article_slug].present?

app/controllers/slack_uploads_controller.rb

@@ -0,0 +1,27 @@
+class SlackUploadsController < ApplicationController
+  include Rails.application.routes.url_helpers
+  before_action :set_blob, only: [:show]
+
+  def show
+    if @blob
+      redirect_to blob_url
+    else
+      redirect_to avatar_url
+    end
+  end
+
+  private
+
+  def set_blob
+    @blob = ActiveStorage::Blob.find_by(key: params[:blob_key])
+  end
+
+  def blob_url
+    url_for(@blob.representation(resize_to_fill: [250, nil]))
+  end
+
+  def avatar_url
+    base_url = ENV.fetch('FRONTEND_URL', nil)
+    "#{base_url}/integrations/slack/#{params[:sender_type]}.png"
+  end
+end

app/controllers/super_admin/instance_statuses_controller.rb

@@ -6,6 +6,7 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
     postgres_status
     redis_metrics
     chatwoot_edition
+    instance_meta
   end
 
   def chatwoot_edition
@@ -18,6 +19,10 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
                                    end
   end
 
+  def instance_meta
+    @metrics['Database Migrations'] = ActiveRecord::Base.connection.migration_context.needs_migration? ? 'pending' : 'completed'
+  end
+
   def chatwoot_version
     @metrics['Chatwoot version'] = Chatwoot.config[:version]
   end

app/controllers/twilio/delivery_status_controller.rb

@@ -0,0 +1,21 @@
+class Twilio::DeliveryStatusController < ApplicationController
+  def create
+    ::Twilio::DeliveryStatusService.new(params: permitted_params).perform
+
+    head :no_content
+  end
+
+  private
+
+  def permitted_params
+    params.permit(
+      :AccountSid,
+      :From,
+      :MessageSid,
+      :MessagingServiceSid,
+      :MessageStatus,
+      :ErrorCode,
+      :ErrorMessage
+    )
+  end
+end

app/dashboards/account_dashboard.rb

@@ -18,8 +18,8 @@ class AccountDashboard < Administrate::BaseDashboard
                                end
 
   ATTRIBUTE_TYPES = {
-    id: Field::Number,
+    id: Field::Number.with_options(searchable: true),
-    name: Field::String,
+    name: Field::String.with_options(searchable: true),
     created_at: Field::DateTime,
     updated_at: Field::DateTime,
     users: CountField,

app/dashboards/account_user_dashboard.rb

@@ -8,9 +8,9 @@ class AccountUserDashboard < Administrate::BaseDashboard
   # which determines how the attribute is displayed
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
-    account: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
+    account: Field::BelongsToSearch.with_options(class_name: 'Account', searchable: true, searchable_field: [:name, :id], order: 'id DESC'),
-    user: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
+    user: Field::BelongsToSearch.with_options(class_name: 'User', searchable: true, searchable_field: [:name, :email, :id], order: 'id DESC'),
-    inviter: Field::BelongsTo.with_options(class_name: 'User', searchable: true, searchable_field: 'name'),
+    inviter: Field::BelongsToSearch.with_options(class_name: 'User', searchable: true, searchable_field: [:name, :email, :id], order: 'id DESC'),
     id: Field::Number,
     role: Field::Select.with_options(collection: AccountUser.roles.keys),
     created_at: Field::DateTime,

app/dashboards/user_dashboard.rb

@@ -9,7 +9,7 @@ class UserDashboard < Administrate::BaseDashboard
   # on pages throughout the dashboard.
   ATTRIBUTE_TYPES = {
     account_users: Field::HasMany,
-    id: Field::Number,
+    id: Field::Number.with_options(searchable: true),
     avatar_url: AvatarField,
     avatar: Field::ActiveStorage.with_options(
       destroy_url: proc do |_namespace, _resource, attachment|
@@ -28,9 +28,9 @@ class UserDashboard < Administrate::BaseDashboard
     confirmed_at: Field::DateTime,
     confirmation_sent_at: Field::DateTime,
     unconfirmed_email: Field::String,
-    name: Field::String,
+    name: Field::String.with_options(searchable: true),
     display_name: Field::String,
-    email: Field::String,
+    email: Field::String.with_options(searchable: true),
     tokens: Field::String.with_options(searchable: false),
     created_at: Field::DateTime,
     updated_at: Field::DateTime,

app/helpers/portal_helper.rb

@@ -0,0 +1,11 @@
+module PortalHelper
+  def generate_portal_bg_color(portal_color, theme)
+    base_color = theme == 'dark' ? 'black' : 'white'
+    "color-mix(in srgb, #{portal_color} 10%, #{base_color})"
+  end
+
+  def generate_portal_bg(portal_color, theme)
+    bg_image = theme == 'dark' ? 'grid_dark.svg' : 'grid.svg'
+    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
+  end
+end

app/javascript/dashboard/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    v-if="!authUIFlags.isFetching"
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
     class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
     :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="!accountUIFlags.isFetchingItem && currentAccountId">
+    <template v-if="currentAccountId">
       <payment-pending-banner />
       <upgrade-banner />
     </template>
@@ -26,14 +26,14 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
+import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
-import NetworkNotification from './components/NetworkNotification';
+import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import vueActionCable from './helper/actionCable';
-import WootSnackbarBox from './components/SnackbarContainer';
+import WootSnackbarBox from './components/SnackbarContainer.vue';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import {
@@ -111,10 +111,8 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
-      const {
+      const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        locale,
+        this.getAccount(this.currentAccountId);
-        latest_chatwoot_version: latestChatwootVersion,
-      } = this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       this.setLocale(locale);
       this.updateRTLDirectionView(locale);

app/javascript/dashboard/api/ApiClient.js

@@ -15,9 +15,8 @@ class ApiClient {
 
   // eslint-disable-next-line class-methods-use-this
   get accountIdFromRoute() {
-    const isInsideAccountScopedURLs = window.location.pathname.includes(
+    const isInsideAccountScopedURLs =
-      '/app/accounts'
+      window.location.pathname.includes('/app/accounts');
-    );
 
     if (isInsideAccountScopedURLs) {
       return window.location.pathname.split('/')[3];

app/javascript/dashboard/api/auth.js

@@ -84,6 +84,11 @@ export default {
     return axios.delete(endPoints('deleteAvatar').url);
   },
 
+  resetPassword({ email }) {
+    const urlData = endPoints('resetPassword');
+    return axios.post(urlData.url, { email });
+  },
+
   setActiveAccount({ accountId }) {
     const urlData = endPoints('setActiveAccount');
     return axios.put(urlData.url, {

app/javascript/dashboard/api/contacts.js

@@ -53,6 +53,7 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;
     return axios.post(requestURL, queryPayload);

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -1,6 +1,5 @@
 import accountAPI from '../account';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../../specs/apiSpecHelper';
 
 describe('#enterpriseAccountAPI', () => {
   it('creates correct instance', () => {
@@ -13,17 +12,33 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('checkout');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#checkout', () => {
       accountAPI.checkout();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/checkout'
       );
     });
 
     it('#subscription', () => {
       accountAPI.subscription();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/enterprise/api/v1/subscription'
       );
     });

app/javascript/dashboard/api/reports.js

@@ -31,6 +31,7 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {
       params: {

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

@@ -1,6 +1,5 @@
 import accountAPI from '../account';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -13,12 +12,28 @@ describe('#accountAPI', () => {
     expect(accountAPI).toHaveProperty('createAccount');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#createAccount', () => {
       accountAPI.createAccount({
         name: 'Chatwoot',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
+      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/accounts', {
         name: 'Chatwoot',
       });
     });

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

@@ -1,6 +1,5 @@
 import accountActionsAPI from '../accountActions';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -8,10 +7,26 @@ describe('#ContactsAPI', () => {
     expect(accountActionsAPI).toHaveProperty('merge');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#merge', () => {
       accountActionsAPI.merge(1, 2);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/actions/contact_merge',
         {
           base_contact_id: 1,

app/javascript/dashboard/api/specs/apiSpecHelper.js

@@ -1,27 +0,0 @@
-function apiSpecHelper() {
-  beforeEach(() => {
-    this.originalAxios = window.axios;
-    this.axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-    window.axios = this.axiosMock;
-  });
-
-  afterEach(() => {
-    window.axios = this.originalAxios;
-  });
-}
-// https://stackoverflow.com/a/59344023/3901856
-const sharedWrapper = describe('sharedWrapper', () => {});
-export default function describeWithAPIMock(skillName, testFn) {
-  return describe(skillName, function configureContext() {
-    function Context() {}
-    Context.prototype = sharedWrapper.ctx;
-    this.ctx = new Context();
-    apiSpecHelper.call(this);
-    testFn.call(this, this);
-  });
-}

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

@@ -1,6 +1,5 @@
 import articlesAPI from '../helpCenter/articles';
 import ApiClient from 'dashboard/api/helpCenter/portals';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#PortalAPI', () => {
   it('creates correct instance', () => {
@@ -12,7 +11,23 @@ describe('#PortalAPI', () => {
     expect(articlesAPI).toHaveProperty('delete');
     expect(articlesAPI).toHaveProperty('getArticles');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getArticles', () => {
       articlesAPI.getArticles({
         pageNumber: 1,
@@ -21,30 +36,62 @@ describe('#PortalAPI', () => {
         status: 'published',
         author_id: '1',
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getArticle', () => {
       articlesAPI.getArticle({
         id: 1,
         portalSlug: 'room-rental',
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#updateArticle', () => {
       articlesAPI.updateArticle({
         articleId: 1,
         portalSlug: 'room-rental',
         articleObj: { title: 'Update shipping address' },
       });
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1',
         {
           title: 'Update shipping address',
@@ -52,13 +99,29 @@ describe('#PortalAPI', () => {
       );
     });
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#deleteArticle', () => {
       articlesAPI.deleteArticle({
         articleId: 1,
         portalSlug: 'room-rental',
       });
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/portals/room-rental/articles/1'
       );
     });

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

@@ -1,18 +1,30 @@
 import assignableAgentsAPI from '../assignableAgents';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#AssignableAgentsAPI', () => {
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAssignableAgents', () => {
       assignableAgentsAPI.get([1]);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
-        '/api/v1/assignable_agents',
+        params: {
-        {
+          inbox_ids: [1],
-          params: {
+        },
-            inbox_ids: [1],
+      });
-          },
-        }
-      );
     });
   });
 });

app/javascript/dashboard/api/specs/channel/fbChannel.spec.js

@@ -1,6 +1,5 @@
 import fbChannel from '../../channel/fbChannel';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#FBChannel', () => {
   it('creates correct instance', () => {
@@ -11,10 +10,26 @@ describe('#FBChannel', () => {
     expect(fbChannel).toHaveProperty('update');
     expect(fbChannel).toHaveProperty('delete');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#create', () => {
       fbChannel.create({ omniauthToken: 'ASFM131CSF@#@$', appId: 'chatwoot' });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/register_facebook_page',
         {
           omniauthToken: 'ASFM131CSF@#@$',
@@ -27,7 +42,7 @@ describe('#FBChannel', () => {
         omniauthToken: 'ASFM131CSF@#@$',
         inboxId: 1,
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/callbacks/reauthorize_page',
         {
           omniauth_token: 'ASFM131CSF@#@$',

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

@@ -1,6 +1,5 @@
 import contactAPI, { buildContactParams } from '../contacts';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ContactsAPI', () => {
   it('creates correct instance', () => {
@@ -15,56 +14,67 @@ describe('#ContactsAPI', () => {
     expect(contactAPI).toHaveProperty('destroyAvatar');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       contactAPI.get(1, 'name', 'customer-support');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts?include_contact_inboxes=false&page=1&sort=name&labels[]=customer-support'
       );
     });
 
     it('#getConversations', () => {
       contactAPI.getConversations(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/conversations'
       );
     });
 
     it('#getContactableInboxes', () => {
       contactAPI.getContactableInboxes(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/1/contactable_inboxes'
       );
     });
 
     it('#getContactLabels', () => {
       contactAPI.getContactLabels(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/contacts/1/labels');
-        '/api/v1/contacts/1/labels'
-      );
     });
 
     it('#updateContactLabels', () => {
       const labels = ['support-query'];
       contactAPI.updateContactLabels(1, labels);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/contacts/1/labels', {
-        '/api/v1/contacts/1/labels',
+        labels,
-        {
+      });
-          labels,
-        }
-      );
     });
 
     it('#search', () => {
       contactAPI.search('leads', 1, 'date', 'customer-support');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support'
       );
     });
 
     it('#destroyCustomAttributes', () => {
       contactAPI.destroyCustomAttributes(1, ['cloudCustomer']);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/1/destroy_custom_attributes',
         {
           custom_attributes: ['cloudCustomer'],
@@ -75,7 +85,7 @@ describe('#ContactsAPI', () => {
     it('#importContacts', () => {
       const file = 'file';
       contactAPI.importContacts(file);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/import',
         expect.any(FormData),
         {
@@ -96,7 +106,7 @@ describe('#ContactsAPI', () => {
         ],
       };
       contactAPI.filter(1, 'name', queryPayload);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/contacts/filter?include_contact_inboxes=false&page=1&sort=name',
         queryPayload
       );
@@ -104,7 +114,7 @@ describe('#ContactsAPI', () => {
 
     it('#destroyAvatar', () => {
       contactAPI.destroyAvatar(1);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/contacts/1/avatar'
       );
     });

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

@@ -1,6 +1,5 @@
 import conversationsAPI from '../conversations';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#ConversationApi', () => {
   it('creates correct instance', () => {
@@ -14,10 +13,26 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('updateLabels');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getLabels', () => {
       conversationsAPI.getLabels(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels'
       );
     });
@@ -25,7 +40,7 @@ describe('#ConversationApi', () => {
     it('#updateLabels', () => {
       const labels = ['support-query'];
       conversationsAPI.updateLabels(1, labels);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/1/labels',
         {
           labels,

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

@@ -1,6 +1,5 @@
 import csatReportsAPI from '../csatReports';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -9,10 +8,26 @@ describe('#Reports API', () => {
     expect(csatReportsAPI).toHaveProperty('get');
     expect(csatReportsAPI).toHaveProperty('getMetrics');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       csatReportsAPI.get({ page: 1, from: 1622485800, to: 1623695400 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses',
         {
           params: {
@@ -26,7 +41,7 @@ describe('#Reports API', () => {
     });
     it('#getMetrics', () => {
       csatReportsAPI.getMetrics({ from: 1622485800, to: 1623695400 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/metrics',
         {
           params: { since: 1622485800, until: 1623695400 },
@@ -39,7 +54,7 @@ describe('#Reports API', () => {
         to: 1623695400,
         user_ids: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/csat_survey_responses/download',
         {
           params: {

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

@@ -1,6 +1,5 @@
 import conversationAPI from '../../inbox/conversation';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -22,7 +21,23 @@ describe('#ConversationAPI', () => {
     expect(conversationAPI).toHaveProperty('filter');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get conversations', () => {
       conversationAPI.get({
         inboxId: 1,
@@ -32,19 +47,16 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
-        '/api/v1/conversations',
+        params: {
-        {
+          inbox_id: 1,
-          params: {
+          team_id: 1,
-            inbox_id: 1,
+          status: 'open',
-            team_id: 1,
+          assignee_type: 'me',
-            status: 'open',
+          page: 1,
-            assignee_type: 'me',
+          labels: [],
-            page: 1,
+        },
-            labels: [],
+      });
-          },
-        }
-      );
     });
 
     it('#search', () => {
@@ -53,7 +65,7 @@ describe('#ConversationAPI', () => {
         page: 1,
       });
 
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/search',
         {
           params: {
@@ -66,7 +78,7 @@ describe('#ConversationAPI', () => {
 
     it('#toggleStatus', () => {
       conversationAPI.toggleStatus({ conversationId: 12, status: 'online' });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_status`,
         {
           status: 'online',
@@ -77,7 +89,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignAgent', () => {
       conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments?assignee_id=34`,
         {}
       );
@@ -85,7 +97,7 @@ describe('#ConversationAPI', () => {
 
     it('#assignTeam', () => {
       conversationAPI.assignTeam({ conversationId: 12, teamId: 1 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments`,
         {
           team_id: 1,
@@ -95,7 +107,7 @@ describe('#ConversationAPI', () => {
 
     it('#markMessageRead', () => {
       conversationAPI.markMessageRead({ id: 12 });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/update_last_seen`
       );
     });
@@ -105,7 +117,7 @@ describe('#ConversationAPI', () => {
         conversationId: 12,
         status: 'typing_on',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/toggle_typing_status`,
         {
           typing_status: 'typing_on',
@@ -115,14 +127,14 @@ describe('#ConversationAPI', () => {
 
     it('#mute', () => {
       conversationAPI.mute(45);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/mute'
       );
     });
 
     it('#unmute', () => {
       conversationAPI.unmute(45);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/unmute'
       );
     });
@@ -135,18 +147,15 @@ describe('#ConversationAPI', () => {
         labels: [],
         teamId: 1,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations/meta', {
-        '/api/v1/conversations/meta',
+        params: {
-        {
+          inbox_id: 1,
-          params: {
+          team_id: 1,
-            inbox_id: 1,
+          status: 'open',
-            team_id: 1,
+          assignee_type: 'me',
-            status: 'open',
+          labels: [],
-            assignee_type: 'me',
+        },
-            labels: [],
+      });
-          },
-        }
-      );
     });
 
     it('#sendEmailTranscript', () => {
@@ -154,7 +163,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         email: 'john@acme.inc',
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/transcript',
         {
           email: 'john@acme.inc',
@@ -167,7 +176,7 @@ describe('#ConversationAPI', () => {
         conversationId: 45,
         customAttributes: { order_d: '1001' },
       });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/conversations/45/custom_attributes',
         {
           custom_attributes: { order_d: '1001' },
@@ -202,9 +211,7 @@ describe('#ConversationAPI', () => {
         },
       };
       conversationAPI.filter(payload);
-      expect(
+      expect(axiosMock.post).toHaveBeenCalledWith(
-        context.axiosMock.post
-      ).toHaveBeenCalledWith(
         '/api/v1/conversations/filter',
         payload.queryData,
         { params: { page: payload.page } }
@@ -213,7 +220,7 @@ describe('#ConversationAPI', () => {
 
     it('#getAllAttachments', () => {
       conversationAPI.getAllAttachments(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/conversations/1/attachments'
       );
     });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -1,6 +1,5 @@
 import messageAPI, { buildCreatePayload } from '../../inbox/message';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#ConversationAPI', () => {
   it('creates correct instance', () => {
@@ -13,13 +12,29 @@ describe('#ConversationAPI', () => {
     expect(messageAPI).toHaveProperty('getPreviousMessages');
   });
 
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getPreviousMessages', () => {
       messageAPI.getPreviousMessages({
         conversationId: 12,
         before: 4573,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         `/api/v1/conversations/12/messages`,
         {
           params: {
@@ -35,7 +50,6 @@ describe('#ConversationAPI', () => {
         message: 'test content',
         echoId: 12,
         isPrivate: true,
-
         files: [new Blob(['test-content'], { type: 'application/pdf' })],
       });
       expect(formPayload).toBeInstanceOf(FormData);
@@ -58,8 +72,10 @@ describe('#ConversationAPI', () => {
         private: false,
         echo_id: 12,
         content_attributes: { in_reply_to: 12 },
-        bcc_emails: '',
         cc_emails: '',
+        bcc_emails: '',
+        to_emails: '',
+        template_params: undefined,
       });
     });
   });

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

@@ -1,6 +1,5 @@
 import inboxesAPI from '../inboxes';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#InboxesAPI', () => {
   it('creates correct instance', () => {
@@ -14,19 +13,32 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
   });
-  describeWithAPIMock('API calls', context => {
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getCampaigns', () => {
       inboxesAPI.getCampaigns(2);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/inboxes/2/campaigns');
-        '/api/v1/inboxes/2/campaigns'
-      );
     });
 
     it('#deleteInboxAvatar', () => {
       inboxesAPI.deleteInboxAvatar(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
-        '/api/v1/inboxes/2/avatar'
-      );
     });
   });
 });

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

@@ -1,6 +1,5 @@
 import integrationAPI from '../integrations';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#integrationAPI', () => {
   it('creates correct instance', () => {
@@ -16,11 +15,27 @@ describe('#integrationAPI', () => {
     expect(integrationAPI).toHaveProperty('listAllSlackChannels');
     expect(integrationAPI).toHaveProperty('deleteHook');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#connectSlack', () => {
       const code = 'SDNFJNSDFNDSJN';
       integrationAPI.connectSlack(code);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           code,
@@ -31,7 +46,7 @@ describe('#integrationAPI', () => {
     it('#updateSlack', () => {
       const updateObj = { referenceId: 'SDFSDGSVE' };
       integrationAPI.updateSlack(updateObj);
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/integrations/slack',
         {
           reference_id: updateObj.referenceId,
@@ -41,16 +56,14 @@ describe('#integrationAPI', () => {
 
     it('#listAllSlackChannels', () => {
       integrationAPI.listAllSlackChannels();
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/integrations/slack/list_all_channels'
       );
     });
 
     it('#delete', () => {
       integrationAPI.delete(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/integrations/2');
-        '/api/v1/integrations/2'
-      );
     });
 
     it('#createHook', () => {
@@ -59,7 +72,7 @@ describe('#integrationAPI', () => {
         settings: { api_key: 'SDFSDGSVE' },
       };
       integrationAPI.createHook(hookData);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks',
         hookData
       );
@@ -67,7 +80,7 @@ describe('#integrationAPI', () => {
 
     it('#deleteHook', () => {
       integrationAPI.deleteHook(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
+      expect(axiosMock.delete).toHaveBeenCalledWith(
         '/api/v1/integrations/hooks/2'
       );
     });

app/javascript/dashboard/api/specs/integrations/dyte.spec.js

@@ -1,6 +1,5 @@
 import DyteAPIClient from '../../integrations/dyte';
 import ApiClient from '../../ApiClient';
-import describeWithAPIMock from '../apiSpecHelper';
 
 describe('#accountAPI', () => {
   it('creates correct instance', () => {
@@ -9,10 +8,26 @@ describe('#accountAPI', () => {
     expect(DyteAPIClient).toHaveProperty('addParticipantToMeeting');
   });
 
-  describeWithAPIMock('createAMeeting', context => {
+  describe('createAMeeting', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('creates a valid request', () => {
       DyteAPIClient.createAMeeting(1);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/create_a_meeting',
         {
           conversation_id: 1,
@@ -21,10 +36,26 @@ describe('#accountAPI', () => {
     });
   });
 
-  describeWithAPIMock('addParticipantToMeeting', context => {
+  describe('addParticipantToMeeting', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('creates a valid request', () => {
       DyteAPIClient.addParticipantToMeeting(1);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/dyte/add_participant_to_meeting',
         {
           message_id: 1,

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

@@ -1,6 +1,5 @@
 import notificationsAPI from '../notifications';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#NotificationAPI', () => {
   it('creates correct instance', () => {
@@ -11,31 +10,47 @@ describe('#NotificationAPI', () => {
     expect(notificationsAPI).toHaveProperty('read');
     expect(notificationsAPI).toHaveProperty('readAll');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#get', () => {
       notificationsAPI.get(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications?page=1'
       );
     });
 
     it('#getNotifications', () => {
       notificationsAPI.getNotifications(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/1/notifications'
       );
     });
 
     it('#getUnreadCount', () => {
       notificationsAPI.getUnreadCount();
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/notifications/unread_count'
       );
     });
 
     it('#read', () => {
       notificationsAPI.read(48670, 'Conversation');
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all',
         {
           primary_actor_id: 'Conversation',
@@ -46,7 +61,7 @@ describe('#NotificationAPI', () => {
 
     it('#readAll', () => {
       notificationsAPI.readAll();
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/notifications/read_all'
       );
     });

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

@@ -1,6 +1,5 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#Reports API', () => {
   it('creates correct instance', () => {
@@ -18,14 +17,30 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('getInboxReports');
     expect(reportsAPI).toHaveProperty('getTeamReports');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAccountReports', () => {
       reportsAPI.getReports({
         metric: 'conversations_count',
         from: 1621103400,
         to: 1621621800,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
           metric: 'conversations_count',
           since: 1621103400,
@@ -38,20 +53,17 @@ describe('#Reports API', () => {
 
     it('#getAccountSummary', () => {
       reportsAPI.getSummary(1621103400, 1621621800);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/summary', {
-        '/api/v2/reports/summary',
+        params: {
-        {
+          business_hours: undefined,
-          params: {
+          group_by: undefined,
-            business_hours: undefined,
+          id: undefined,
-            group_by: undefined,
+          since: 1621103400,
-            id: undefined,
+          timezone_offset: -0,
-            since: 1621103400,
+          type: 'account',
-            timezone_offset: -0,
+          until: 1621621800,
-            type: 'account',
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getAgentReports', () => {
@@ -60,60 +72,48 @@ describe('#Reports API', () => {
         to: 1621621800,
         businessHours: true,
       });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/agents', {
-        '/api/v2/reports/agents',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+          business_hours: true,
-            until: 1621621800,
+        },
-            business_hours: true,
+      });
-          },
-        }
-      );
     });
 
     it('#getLabelReports', () => {
       reportsAPI.getLabelReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/labels', {
-        '/api/v2/reports/labels',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getInboxReports', () => {
       reportsAPI.getInboxReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/inboxes', {
-        '/api/v2/reports/inboxes',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getTeamReports', () => {
       reportsAPI.getTeamReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/teams', {
-        '/api/v2/reports/teams',
+        params: {
-        {
+          since: 1621103400,
-          params: {
+          until: 1621621800,
-            since: 1621103400,
+        },
-            until: 1621621800,
+      });
-          },
-        }
-      );
     });
 
     it('#getConversationMetric', () => {
       reportsAPI.getConversationMetric('account');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/conversations',
         {
           params: {

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

@@ -1,6 +1,5 @@
 import teamsAPI from '../teams';
 import ApiClient from '../ApiClient';
-import describeWithAPIMock from './apiSpecHelper';
 
 describe('#TeamsAPI', () => {
   it('creates correct instance', () => {
@@ -14,17 +13,33 @@ describe('#TeamsAPI', () => {
     expect(teamsAPI).toHaveProperty('addAgents');
     expect(teamsAPI).toHaveProperty('updateAgents');
   });
-  describeWithAPIMock('API calls', context => {
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: jest.fn(() => Promise.resolve()),
+      get: jest.fn(() => Promise.resolve()),
+      patch: jest.fn(() => Promise.resolve()),
+      delete: jest.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
     it('#getAgents', () => {
       teamsAPI.getAgents({ teamId: 1 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members'
       );
     });
 
     it('#addAgents', () => {
       teamsAPI.addAgents({ teamId: 1, agentsList: { user_ids: [1, 10, 21] } });
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
+      expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: { user_ids: [1, 10, 21] },
@@ -38,7 +53,7 @@ describe('#TeamsAPI', () => {
         teamId: 1,
         agentsList,
       });
-      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+      expect(axiosMock.patch).toHaveBeenCalledWith(
         '/api/v1/teams/1/team_members',
         {
           user_ids: agentsList,

app/javascript/dashboard/assets/scss/_variables.scss

@@ -81,11 +81,6 @@ $conv-header-height: 2.5rem;
 $inbox-thumb-size: 3rem;
 
 
-// Spinner
-$spinkit-spinner-color: $color-white !default;
-$spinkit-spinner-margin: 0 0 0 1rem !default;
-$spinkit-size: 1rem !default;
-
 // Snackbar default
 $woot-snackbar-bg: #323232;
 $woot-snackbar-button: #ffeb3b;

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -149,15 +149,11 @@
 }
 
 .multiselect-wrap--small {
-  .multiselect__tags,
-  .multiselect__input {
-    @apply items-center flex;
-  }
 
   .multiselect__tags,
   .multiselect__input,
   .multiselect {
-    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm h-10 min-h-[2.5rem];
+    @apply bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 rounded-[5px] text-sm  min-h-[2.5rem];
   }
 
   .multiselect__input {
@@ -165,11 +161,15 @@
   }
 
   .multiselect__single {
-    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-1 px-0.5;
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] text-slate-800 dark:text-slate-100 bg-white dark:bg-slate-900 py-3 px-0.5;
   }
 
   .multiselect__placeholder {
-    @apply m-0 py-1 px-0.5;
+    @apply m-0 py-2 px-0.5;
+  }
+
+  .multiselect__tag {
+    @apply py-[6px] my-[1px];
   }
 
   .multiselect__select {
@@ -181,9 +181,6 @@
     @apply bg-transparent;
   }
 
-  .multiselect__tags-wrap {
-    @apply flex-shrink-0;
-  }
 }
 
 .multiselect-wrap--medium {

app/javascript/dashboard/assets/scss/storybook.scss

@@ -9,7 +9,6 @@
 @import 'shared/assets/stylesheets/border-radius';
 @import 'variables';
 
-@import '~spinkit/scss/spinners/7-three-bounce';
 @import 'vue-multiselect/dist/vue-multiselect.min.css';
 @import '~shared/assets/stylesheets/ionicons';
 

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

@@ -34,26 +34,26 @@
   }
 
   &.hollow {
-    @apply border border-slate-200 dark:border-slate-600 text-woot-700 dark:text-woot-100 hover:bg-woot-50 dark:hover:bg-woot-900;
+    @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
       @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {
-      @apply text-green-700 dark:text-green-100 hover:bg-green-50 dark:hover:bg-green-800;
+      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
     }
 
     &.alert {
-      @apply text-red-700 dark:text-red-100 hover:bg-red-50 dark:hover:bg-red-800;
+      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-100 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
     }
 
     &:hover {
-      @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
+      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
 
       &.secondary {
         @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
@@ -68,7 +68,7 @@
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
       }
     }
   }

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -152,6 +152,10 @@
 
       &.is-image {
         @apply rounded-lg;
+
+        .message__mail-head {
+          @apply px-4 py-2;
+        }
       }
     }
 

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

@@ -4,10 +4,6 @@
   @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
-.modal--close {
-  @apply absolute right-2 rtl:right-[unset] rtl:left-2 top-2;
-}
-
 .page-top-bar {
   @apply px-8 pt-9 pb-0;
 

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -31,7 +31,7 @@
 </template>
 
 <script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
 export default {
   components: {

app/javascript/dashboard/components/ChatList.vue

@@ -10,7 +10,8 @@
     <div
       class="flex items-center justify-between py-0 px-4"
       :class="{
-        'pb-3 border-b border-slate-75 dark:border-slate-700': hasAppliedFiltersOrActiveFolders,
+        'pb-3 border-b border-slate-75 dark:border-slate-700':
+          hasAppliedFiltersOrActiveFolders,
       }"
     >
       <div class="flex max-w-[85%] justify-center items-center">
@@ -24,9 +25,7 @@
           v-if="!hasAppliedFiltersOrActiveFolders"
           class="p-1 my-0.5 mx-1 rounded-md capitalize bg-slate-50 dark:bg-slate-800 text-xxs text-slate-600 dark:text-slate-300"
         >
-          {{
+          {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
-            this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
-          }}
         </span>
       </div>
       <div class="flex items-center gap-1">
@@ -193,17 +192,17 @@
 <script>
 import { mapGetters } from 'vuex';
 
-import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter';
+import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
-import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter';
+import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
-import ChatTypeTabs from './widgets/ChatTypeTabs';
+import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationCard from './widgets/conversation/ConversationCard';
+import ConversationCard from './widgets/conversation/ConversationCard.vue';
 import timeMixin from '../mixins/time';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
-import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
+import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import alertMixin from 'shared/mixins/alertMixin';
@@ -642,10 +641,8 @@ export default {
     },
     handleKeyEvents(e) {
       if (hasPressedAltAndJKey(e)) {
-        const {
+        const { allConversations, activeConversationIndex } =
-          allConversations,
+          this.getKeyboardListenerParams();
-          activeConversationIndex,
-        } = this.getKeyboardListenerParams();
         if (activeConversationIndex === -1) {
           allConversations[0].click();
         }

app/javascript/dashboard/components/CustomSnoozeModal.vue

@@ -13,10 +13,10 @@
       />
       <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
         <woot-button variant="clear" @click.prevent="onClose">
-          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
         </woot-button>
         <woot-button>
-          {{ this.$t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
         </woot-button>
       </div>
     </form>

app/javascript/dashboard/components/MaskedText.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="text--container">
-    <woot-button size="small" class=" button--text" @click="onCopy">
+    <woot-button size="small" class="button--text" @click="onCopy">
       {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
     </woot-button>
     <woot-button

app/javascript/dashboard/components/Modal.vue

@@ -4,15 +4,19 @@
       v-if="show"
       :class="modalClassName"
       transition="modal"
-      @click="onBackDropClick"
+      @mousedown="handleMouseDown"
     >
-      <div :class="modalContainerClassName" @click.stop>
+      <div
+        :class="modalContainerClassName"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
         <woot-button
           v-if="showCloseButton"
           color-scheme="secondary"
           icon="dismiss"
           variant="clear"
-          class="modal--close"
+          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
           @click="close"
         />
         <slot />
@@ -50,6 +54,11 @@ export default {
       default: '',
     },
   },
+  data() {
+    return {
+      mousedDownOnBackdrop: false,
+    };
+  },
   computed: {
     modalContainerClassName() {
       let className =
@@ -66,9 +75,9 @@ export default {
         'right-aligned': 'right-aligned',
       };
 
-      return `modal-mask skip-context-menu ${modalClassNameMap[
+      return `modal-mask skip-context-menu ${
-        this.modalType
+        modalClassNameMap[this.modalType] || ''
-      ] || ''}`;
+      }`;
     },
   },
   mounted() {
@@ -77,13 +86,22 @@ export default {
         this.onClose();
       }
     });
+
+    document.body.addEventListener('mouseup', this.onMouseUp);
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.onMouseUp);
   },
   methods: {
+    handleMouseDown() {
+      this.mousedDownOnBackdrop = true;
+    },
     close() {
       this.onClose();
     },
-    onBackDropClick() {
+    onMouseUp() {
-      if (this.closeOnBackdropClick) {
+      if (this.mousedDownOnBackdrop) {
+        this.mousedDownOnBackdrop = false;
         this.onClose();
       }
     },

app/javascript/dashboard/components/SettingsSection.vue

@@ -2,7 +2,8 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
+        showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">

app/javascript/dashboard/components/SnackbarContainer.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import WootSnackbar from './Snackbar';
+import WootSnackbar from './Snackbar.vue';
 
 export default {
   components: {

app/javascript/dashboard/components/app/PaymentPendingBanner.vue

@@ -72,10 +72,8 @@ export default {
       const { custom_attributes: subscription } = account;
       if (!subscription) return EMPTY_SUBSCRIPTION_INFO;
 
-      const {
+      const { subscription_status: status, subscription_ends_on: endsOn } =
-        subscription_status: status,
+        subscription;
-        subscription_ends_on: endsOn,
-      } = subscription;
 
       return { status, endsOn: new Date(endsOn) };
     },

app/javascript/dashboard/components/app/versionCheckHelper.js

@@ -1,4 +1,4 @@
-const semver = require('semver');
+import semver from 'semver';
 
 export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
   if (!semver.valid(latestVersion)) {

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
 
 export default {
   components: {

app/javascript/dashboard/components/buttons/ResolveAction.vue

@@ -10,7 +10,7 @@
         :is-loading="isLoading"
         @click="onCmdResolveConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.RESOLVE_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="isResolved"
@@ -21,7 +21,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-else-if="showOpenButton"
@@ -31,7 +31,7 @@
         :is-loading="isLoading"
         @click="onCmdOpenConversation"
       >
-        {{ this.$t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
       </woot-button>
       <woot-button
         v-if="showAdditionalActions"
@@ -57,7 +57,7 @@
             icon="snooze"
             @click="() => openSnoozeModal()"
           >
-            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
           </woot-button>
         </woot-dropdown-item>
         <woot-dropdown-item v-if="!isPending">
@@ -68,7 +68,7 @@
             icon="book-clock"
             @click="() => toggleStatus(STATUS_TYPE.PENDING)"
           >
-            {{ this.$t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
           </woot-button>
         </woot-dropdown-item>
       </woot-dropdown-menu>
@@ -90,7 +90,7 @@ import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
-import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal';
+import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import {
   hasPressedAltAndEKey,

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

@@ -49,11 +49,11 @@
 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 WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader';
+import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
-import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider';
+import WootDropdownDivider from 'shared/components/ui/dropdown/DropdownDivider.vue';
-import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge';
+import AvailabilityStatusBadge from '../widgets/conversation/AvailabilityStatusBadge.vue';
 import wootConstants from 'dashboard/constants/globals';
 
 const { AVAILABILITY_STATUS_KEYS } = wootConstants;

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

@@ -11,7 +11,6 @@
       @key-shortcut-modal="toggleKeyShortcutModal"
       @open-notification-panel="openNotificationPanel"
     />
-
     <secondary-sidebar
       v-if="showSecondarySidebar"
       :class="sidebarClassName"
@@ -35,8 +34,8 @@ import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
 import alertMixin from 'shared/mixins/alertMixin';
 
-import PrimarySidebar from './sidebarComponents/Primary';
+import PrimarySidebar from './sidebarComponents/Primary.vue';
-import SecondarySidebar from './sidebarComponents/Secondary';
+import SecondarySidebar from './sidebarComponents/Secondary.vue';
 import {
   hasPressedAltAndCKey,
   hasPressedAltAndRKey,
@@ -114,7 +113,12 @@ export default {
         if (!isAvailableForTheUser) {
           return false;
         }
-
+        if (
+          menuItem.alwaysVisibleOnChatwootInstances &&
+          !this.isACustomBrandedInstance
+        ) {
+          return true;
+        }
         if (menuItem.featureFlag) {
           return this.isFeatureEnabledonAccount(
             this.accountId,

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

@@ -42,6 +42,7 @@ const primaryMenuItems = accountId => [
     key: 'helpcenter',
     label: 'HELP_CENTER.TITLE',
     featureFlag: FEATURE_FLAGS.HELP_CENTER,
+    alwaysVisibleOnChatwootInstances: true,
     toState: frontendURL(`accounts/${accountId}/portals`),
     toStateName: 'default_portal_articles',
     roles: ['administrator'],

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

@@ -34,8 +34,8 @@
             <woot-submit-button
               :disabled="
                 $v.accountName.$invalid ||
-                  $v.accountName.$invalid ||
+                $v.accountName.$invalid ||
-                  uiFlags.isCreating
+                uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
               :loading="uiFlags.isCreating"

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

@@ -16,7 +16,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from '../../widgets/Thumbnail';
+import Thumbnail from '../../widgets/Thumbnail.vue';
 
 export default {
   components: {

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

@@ -3,7 +3,8 @@
     <button
       class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
-        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
+        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
+          isNotificationPanelActive,
       }"
       @click="openNotificationPanel"
     >

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

@@ -109,9 +109,9 @@
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
 
 export default {
   components: {

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

@@ -39,11 +39,11 @@
   </div>
 </template>
 <script>
-import Logo from './Logo';
+import Logo from './Logo.vue';
-import PrimaryNavItem from './PrimaryNavItem';
+import PrimaryNavItem from './PrimaryNavItem.vue';
-import OptionsMenu from './OptionsMenu';
+import OptionsMenu from './OptionsMenu.vue';
-import AgentDetails from './AgentDetails';
+import AgentDetails from './AgentDetails.vue';
-import NotificationBell from './NotificationBell';
+import NotificationBell from './NotificationBell.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';

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

@@ -9,7 +9,8 @@
       class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
       :class="{
         'bg-woot-25 dark:bg-slate-800': isActive,
-        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
+          shouldTruncate,
       }"
       @click="navigate"
     >
@@ -44,7 +45,8 @@
             class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
-              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
+              'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
+                shouldTruncate,
             }"
           >
             {{ label }}

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

@@ -35,7 +35,8 @@
         :class="{
           'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
           'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600': isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
           'bg-slate-50 dark:bg-slate-700': !isActiveView,
         }"
       >
@@ -97,7 +98,7 @@ import {
   getInboxWarningIconClass,
 } from 'dashboard/helper/inbox';
 
-import SecondaryChildNavItem from './SecondaryChildNavItem';
+import SecondaryChildNavItem from './SecondaryChildNavItem.vue';
 import {
   isOnMentionsView,
   isOnUnattendedView,

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

@@ -53,16 +53,24 @@ export default {
       const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
       const isBeforeAMonth = createdTimeDiff > DAY_IN_MILLI_SECONDS * 30;
       return !isBeforeAMonth
-        ? `Created ${this.createdAtTimeAgo}`
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
-        : `Created at: ${this.dateFormat(this.createdAtTimestamp)}`;
+            this.createdAtTimeAgo
+          }`
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
+          )} ${this.dateFormat(this.createdAtTimestamp)}`;
     },
     lastActivity() {
       const lastActivityTimeDiff =
         Date.now() - this.lastActivityTimestamp * 1000;
       const isNotActive = lastActivityTimeDiff > DAY_IN_MILLI_SECONDS * 30;
       return !isNotActive
-        ? `Last activity ${this.lastActivityAtTimeAgo}`
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
-        : `Last activity: ${this.dateFormat(this.lastActivityTimestamp)}`;
+            this.lastActivityAtTimeAgo
+          }`
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
+          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
     },
     tooltipText() {
       return `${this.createdAt}

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

@@ -28,8 +28,8 @@
   </button>
 </template>
 <script>
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
 
 export default {
   name: 'WootButton',

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

@@ -1,6 +1,6 @@
 <template>
   <div class="animation-container margin-top-1">
-    <div class="ai-typing--wrap ">
+    <div class="ai-typing--wrap">
       <fluent-icon icon="wand" size="14" class="ai-typing--icon" />
       <label>
         {{ $t('INTEGRATION_SETTINGS.OPEN_AI.ASSISTANCE_MODAL.AI_WRITING') }}

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

@@ -1,11 +1,9 @@
 <template>
-  <div
+  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
-    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
-  >
     <div
       v-for="(attachment, index) in attachments"
       :key="attachment.id"
-      class="preview-item flex p-1 bg-slate-50 dark:bg-slate-800 rounded-md w-[15rem] mb-1"
+      class="preview-item flex items-center p-1 bg-slate-50 dark:bg-slate-800 gap-1 rounded-md w-[15rem] mb-1"
     >
       <div class="max-w-[4rem] flex-shrink-0 w-6 flex items-center">
         <img
@@ -17,7 +15,7 @@
           📄
         </span>
       </div>
-      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis ml-2">
+      <div class="max-w-[60%] min-w-[50%] overflow-hidden text-ellipsis">
         <span
           class="h-4 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap"
         >

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

@@ -108,7 +108,7 @@
 <script>
 import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
 import AutomationActionFileInput from './AutomationFileInput.vue';
-import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 export default {
   components: {
     AutomationActionTeamMessageInput,

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

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
 import alertMixin from 'shared/mixins/alertMixin';
 export default {
   components: {

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

@@ -7,7 +7,7 @@
   />
 </template>
 <script>
-import ChannelSelector from '../ChannelSelector';
+import ChannelSelector from '../ChannelSelector.vue';
 export default {
   components: { ChannelSelector },
   props: {

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

@@ -12,7 +12,7 @@
       />
       <iframe
         v-if="configItem.type === 'frame' && configItem.url"
-        :id="`dashboard-app--frame-${index}`"
+        :id="getFrameId(index)"
         :src="configItem.url"
         @load="() => onIframeLoad(index)"
       />
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import LoadingState from 'dashboard/components/widgets/LoadingState';
+import LoadingState from 'dashboard/components/widgets/LoadingState.vue';
 export default {
   components: {
     LoadingState,
@@ -39,6 +39,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    position: {
+      type: Number,
+      required: true,
+    },
   },
   data() {
     return {
@@ -82,10 +86,14 @@ export default {
     };
   },
   methods: {
+    getFrameId(index) {
+      return `dashboard-app--frame-${this.position}-${index}`;
+    },
     onIframeLoad(index) {
-      const frameElement = document.getElementById(
+      // A possible alternative is to use ref instead of document.getElementById
-        `dashboard-app--frame-${index}`
+      // However, when ref is used together with v-for, the ref you get will be
-      );
+      // an array containing the child components mirroring the data source.
+      const frameElement = document.getElementById(this.getFrameId(index));
       const eventData = { event: 'appContext', data: this.dashboardAppContext };
       frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
       this.iframeLoading = false;

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

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div
@@ -255,7 +256,9 @@ export default {
           value === 'conversation_attribute' ||
           value === 'contact_attribute'
         ) {
+          // eslint-disable-next-line vue/no-mutating-props
           this.value.custom_attribute_type = this.customAttributeType;
+          // eslint-disable-next-line vue/no-mutating-props
         } else this.value.custom_attribute_type = '';
       },
       immediate: true,

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

@@ -30,9 +30,9 @@
 </template>
 
 <script>
-import AddLabel from 'shared/components/ui/dropdown/AddLabel';
+import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import LabelDropdown from 'shared/components/ui/label/LabelDropdown';
+import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
 import {

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

@@ -42,7 +42,7 @@
  * Badge - Chat source indication { fb / telegram }
  * Username - Username for avatar
  */
-import Avatar from './Avatar';
+import Avatar from './Avatar.vue';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 export default {

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

@@ -17,7 +17,7 @@
   </div>
 </template>
 <script>
-import Thumbnail from './Thumbnail';
+import Thumbnail from './Thumbnail.vue';
 
 export default {
   components: {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="editor-root">
+  <div ref="editorRoot" class="relative editor-root">
     <tag-agents
       v-if="showUserMentions && isPrivate"
       :search-key="mentionSearchKey"
@@ -23,6 +23,24 @@
       @change="onFileChange"
     />
     <div ref="editor" />
+    <div
+      v-show="isImageNodeSelected && showImageResizeToolbar"
+      class="absolute shadow-md rounded-[4px] flex gap-1 py-1 px-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50"
+      :style="{
+        top: toolbarPosition.top,
+        left: toolbarPosition.left,
+      }"
+    >
+      <button
+        v-for="size in sizes"
+        :key="size.name"
+        class="text-xs font-medium rounded-[4px] border border-solid border-slate-200 dark:border-slate-600 px-1.5 py-0.5 hover:bg-slate-100 dark:hover:bg-slate-800"
+        @click="setURLWithQueryAndImageSize(size)"
+      >
+        {{ size.name }}
+      </button>
+    </div>
+    <slot name="footer" />
   </div>
 </template>
 
@@ -40,10 +58,19 @@ import {
   suggestionsPlugin,
   triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
-import TagAgents from '../conversation/TagAgents';
+import TagAgents from '../conversation/TagAgents.vue';
-import CannedResponse from '../conversation/CannedResponse';
+import CannedResponse from '../conversation/CannedResponse.vue';
-import VariableList from '../conversation/VariableList';
+import VariableList from '../conversation/VariableList.vue';
+import {
+  appendSignature,
+  removeSignature,
+  insertAtCursor,
+  scrollCursorIntoView,
+  findNodeToInsertImage,
+  setURLWithQueryAndSize,
+} from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
@@ -62,13 +89,17 @@ import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import alertMixin from 'shared/mixins/alertMixin';
-import { findNodeToInsertImage } from 'dashboard/helper/messageEditorHelper';
+import {
-import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+  MESSAGE_EDITOR_MENU_OPTIONS,
+  MESSAGE_EDITOR_IMAGE_RESIZES,
+} from 'dashboard/constants/editor';
 
 const createState = (
   content,
   placeholder,
+  // eslint-disable-next-line default-param-last
   plugins = [],
+  // eslint-disable-next-line default-param-last
   methods = {},
   enabledMenuOptions
 ) => {
@@ -100,6 +131,11 @@ export default {
     enableCannedResponses: { type: Boolean, default: true },
     variables: { type: Object, default: () => ({}) },
     enabledMenuOptions: { type: Array, default: () => [] },
+    signature: { type: String, default: '' },
+    // allowSignature is a kill switch, ensuring no signature methods
+    // are triggered except when this flag is true
+    allowSignature: { type: Boolean, default: false },
+    showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
   },
   data() {
     return {
@@ -112,9 +148,16 @@ export default {
       editorView: null,
       range: null,
       state: undefined,
+      isImageNodeSelected: false,
+      toolbarPosition: { top: 0, left: 0 },
+      sizes: MESSAGE_EDITOR_IMAGE_RESIZES,
+      selectedImageNode: null,
     };
   },
   computed: {
+    editorRoot() {
+      return this.$refs.editorRoot;
+    },
     contentFromEditor() {
       return MessageMarkdownSerializer.serialize(this.editorView.state.doc);
     },
@@ -220,6 +263,12 @@ export default {
         }),
       ];
     },
+    sendWithSignature() {
+      // this is considered the source of truth, we watch this property
+      // on change, we toggle the signature in the editor
+      const { send_with_signature: isEnabled } = this.uiSettings;
+      return isEnabled && this.allowSignature && !this.isPrivate;
+    },
   },
   watch: {
     showUserMentions(updatedValue) {
@@ -244,7 +293,6 @@ export default {
     isPrivate() {
       this.reloadState(this.value);
     },
-
     updateSelectionWith(newValue, oldValue) {
       if (!this.editorView) {
         return null;
@@ -257,12 +305,19 @@ export default {
           const tr = this.editorView.state.tr.replaceSelectionWith(node);
           this.editorView.focus();
           this.state = this.editorView.state.apply(tr);
+          this.editorView.updateState(this.state);
           this.emitOnChange();
           this.$emit('clear-selection');
         }
       }
       return null;
     },
+    sendWithSignature(newValue) {
+      // see if the allowSignature flag is true
+      if (this.allowSignature) {
+        this.toggleSignatureInEditor(newValue);
+      }
+    },
   },
   created() {
     this.state = createState(
@@ -277,6 +332,16 @@ export default {
     this.createEditorView();
     this.editorView.updateState(this.state);
     this.focusEditorInputField();
+
+    // BUS Event to insert text or markdown into the editor at the
+    // current cursor position.
+    // Components using this
+    // 1. SearchPopover.vue
+
+    bus.$on(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
+  },
+  beforeDestroy() {
+    bus.$off(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, this.insertContentIntoEditor);
   },
   methods: {
     reloadState(content = this.value) {
@@ -288,13 +353,82 @@ export default {
         this.editorMenuOptions
       );
       this.editorView.updateState(this.state);
-      this.focusEditorInputField();
+
+      this.focusEditor(content);
+    },
+    focusEditor(content) {
+      if (this.isBodyEmpty(content) && this.sendWithSignature) {
+        // reload state can be called when switching between conversations, or when drafts is loaded
+        // these drafts can also have a signature, so we need to check if the body is empty
+        // and handle things accordingly
+        this.handleEmptyBodyWithSignature();
+      } else {
+        // this is in the else block, handleEmptyBodyWithSignature also has a call to the focus method
+        // the position is set to start, because the signature is added at the end of the body
+        this.focusEditorInputField('end');
+      }
+    },
+    toggleSignatureInEditor(signatureEnabled) {
+      // The toggleSignatureInEditor gets the new value from the
+      // watcher, this means that if the value is true, the signature
+      // is supposed to be added, else we remove it.
+      if (signatureEnabled) {
+        this.addSignature();
+      } else {
+        this.removeSignature();
+      }
+    },
+    addSignature() {
+      let content = this.value;
+      // see if the content is empty, if it is before appending the signature
+      // we need to add a paragraph node and move the cursor at the start of the editor
+      const contentWasEmpty = this.isBodyEmpty(content);
+      content = appendSignature(content, this.signature);
+      // need to reload first, ensuring that the editorView is updated
+      this.reloadState(content);
+
+      if (contentWasEmpty) {
+        this.handleEmptyBodyWithSignature();
+      }
+    },
+    removeSignature() {
+      if (!this.signature) return;
+      let content = this.value;
+      content = removeSignature(content, this.signature);
+      // reload the state, ensuring that the editorView is updated
+      this.reloadState(content);
+    },
+    isBodyEmpty(content) {
+      // if content is undefined, we assume that the body is empty
+      if (!content) return true;
+
+      // if the signature is present, we need to remove it before checking
+      // note that we don't update the editorView, so this is safe
+      const bodyWithoutSignature = this.signature
+        ? removeSignature(content, this.signature)
+        : content;
+
+      // trimming should remove all the whitespaces, so we can check the length
+      return bodyWithoutSignature.trim().length === 0;
+    },
+    handleEmptyBodyWithSignature() {
+      const { schema, tr } = this.state;
+
+      // create a paragraph node and
+      // start a transaction to append it at the end
+      const paragraph = schema.nodes.paragraph.create();
+      const paragraphTransaction = tr.insert(0, paragraph);
+      this.editorView.dispatch(paragraphTransaction);
+
+      // Set the focus at the start of the input field
+      this.focusEditorInputField('start');
     },
     createEditorView() {
       this.editorView = new EditorView(this.$refs.editor, {
         state: this.state,
         dispatchTransaction: tx => {
           this.state = this.state.apply(tx);
+          this.editorView.updateState(this.state);
           this.emitOnChange();
         },
         handleDOMEvents: {
@@ -307,6 +441,9 @@ export default {
           focus: () => {
             this.onFocus();
           },
+          click: () => {
+            // this.isEditorMouseFocusedOnAnImage(); Enable it when the backend supports for message resize is done.
+          },
           blur: () => {
             this.onBlur();
           },
@@ -319,6 +456,50 @@ export default {
         },
       });
     },
+    isEditorMouseFocusedOnAnImage() {
+      if (!this.showImageResizeToolbar) {
+        return;
+      }
+      this.selectedImageNode = document.querySelector(
+        'img.ProseMirror-selectednode'
+      );
+      if (this.selectedImageNode) {
+        this.isImageNodeSelected = !!this.selectedImageNode;
+        // Get the position of the selected node
+        this.setToolbarPosition();
+      } else {
+        this.isImageNodeSelected = false;
+      }
+    },
+    setToolbarPosition() {
+      const editorRect = this.editorRoot.getBoundingClientRect();
+      const rect = this.selectedImageNode.getBoundingClientRect();
+      this.toolbarPosition = {
+        top: `${rect.top - editorRect.top - 30}px`,
+        left: `${rect.left - editorRect.left - 4}px`,
+      };
+    },
+    setURLWithQueryAndImageSize(size) {
+      if (!this.showImageResizeToolbar) {
+        return;
+      }
+      setURLWithQueryAndSize(this.selectedImageNode, size, this.editorView);
+      this.isImageNodeSelected = false;
+    },
+    updateImgToolbarOnDelete() {
+      // check if the selected node is present or not on keyup
+      // this is needed because the user can select an image and then delete it
+      // in that case, the selected node will be null and we need to hide the toolbar
+      // otherwise, the toolbar will be visible even when the image is deleted and cause some errors
+      if (this.selectedImageNode) {
+        const hasImgSelectedNode = document.querySelector(
+          'img.ProseMirror-selectednode'
+        );
+        if (!hasImgSelectedNode) {
+          this.isImageNodeSelected = false;
+        }
+      }
+    },
     isEnterToSendEnabled() {
       return isEditorHotKeyEnabled(this.uiSettings, 'enter');
     },
@@ -333,9 +514,11 @@ export default {
         this.focusEditorInputField();
       }
     },
-    focusEditorInputField() {
+    focusEditorInputField(pos = 'end') {
       const { tr } = this.editorView.state;
-      const selection = Selection.atEnd(tr.doc);
+
+      const selection =
+        pos === 'end' ? Selection.atEnd(tr.doc) : Selection.atStart(tr.doc);
 
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
@@ -349,11 +532,7 @@ export default {
         userFullName: mentionItem.name,
       });
 
-      const tr = this.editorView.state.tr
+      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
-        .replaceWith(this.range.from, this.range.to, node)
-        .insertText(` `);
-      this.state = this.editorView.state.apply(tr);
-      this.emitOnChange();
       this.$track(CONVERSATION_EVENTS.USED_MENTIONS);
 
       return false;
@@ -363,30 +542,22 @@ export default {
         message: cannedItem,
         variables: this.variables,
       });
+
       if (!this.editorView) {
         return null;
       }
 
-      let from = this.range.from - 1;
       let node = new MessageMarkdownTransformer(messageSchema).parse(
         updatedMessage
       );
 
-      if (node.textContent === updatedMessage) {
+      const from =
-        node = this.editorView.state.schema.text(updatedMessage);
+        node.textContent === updatedMessage
-        from = this.range.from;
+          ? this.range.from
-      }
+          : this.range.from - 1;
 
-      const tr = this.editorView.state.tr.replaceWith(
+      this.insertNodeIntoEditor(node, from, this.range.to);
-        from,
-        this.range.to,
-        node
-      );
 
-      this.state = this.editorView.state.apply(tr);
-      this.emitOnChange();
-
-      tr.scrollIntoView();
       this.$track(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
       return false;
     },
@@ -394,23 +565,14 @@ export default {
       if (!this.editorView) {
         return null;
       }
-      let node = this.editorView.state.schema.text(`{{${variable}}}`);
-      const from = this.range.from;
 
-      const tr = this.editorView.state.tr.replaceWith(
+      const content = `{{${variable}}}`;
-        from,
+      let node = this.editorView.state.schema.text(content);
-        this.range.to,
+      const { from, to } = this.range;
-        node
-      );
 
-      this.state = this.editorView.state.apply(tr);
+      this.insertNodeIntoEditor(node, from, to);
-      this.emitOnChange();
-
-      // The `{{ }}` are added to the message, but the cursor is placed
-      // and onExit of suggestionsPlugin is not called. So we need to manually hide
       this.showVariables = false;
       this.$track(CONVERSATION_EVENTS.INSERTED_A_VARIABLE);
-      tr.scrollIntoView();
       return false;
     },
     openFileBrowser() {
@@ -466,8 +628,6 @@ export default {
     },
 
     emitOnChange() {
-      this.editorView.updateState(this.state);
-
       this.$emit('input', this.contentFromEditor);
     },
 
@@ -510,6 +670,7 @@ export default {
         () => this.resetTyping(),
         TYPING_INDICATOR_IDLE_TIME
       );
+      // this.updateImgToolbarOnDelete(); Enable it when the backend supports for message resize is done.
     },
     onKeydown(event) {
       if (this.isEnterToSendEnabled()) {
@@ -527,6 +688,19 @@ export default {
     onFocus() {
       this.$emit('focus');
     },
+    insertContentIntoEditor(content, defaultFrom = 0) {
+      const from = defaultFrom || this.editorView.state.selection.from || 0;
+      let node = new MessageMarkdownTransformer(messageSchema).parse(content);
+
+      this.insertNodeIntoEditor(node, from, undefined);
+    },
+    insertNodeIntoEditor(node, from = 0, to = 0) {
+      this.state = insertAtCursor(this.editorView, node, from, to);
+      this.emitOnChange();
+      this.$nextTick(() => {
+        scrollCursorIntoView(this.editorView);
+      });
+    },
   },
 };
 </script>
@@ -581,6 +755,10 @@ export default {
 
 .ProseMirror-prompt {
   @apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
+
+  h5 {
+    @apply dark:text-slate-25 text-slate-800;
+  }
 }
 
 .is-private {
@@ -616,6 +794,6 @@ export default {
 }
 
 .editor-warning__message {
-  @apply text-red-400 dark:text-red-400 font-normal pt-1 pb-0 px-0;
+  @apply text-red-400 dark:text-red-400 font-normal text-sm pt-1 pb-0 px-0;
 }
 </style>