fix: Retry message

fix: Show sent status for messenger channel (#8145 )
feat: Add support for Instagram delivery reports (#8125 )
2023-10-19 16:47:18 +05:30 · 2023-10-19 13:22:19 +05:30 · 2023-10-18 23:42:34 -07:00 · 2023-10-18 10:11:13 +05:30 · 2023-10-17 17:55:42 -07:00 · 2023-10-17 17:54:38 -07:00
1031 changed files with 20503 additions and 5687 deletions
@@ -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
@@ -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',
@@ -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
@@ -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'
@@ -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'
@@ -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)
-      activerecord (>= 5.0, < 7.1)
+    audited (5.4.0)
+      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.11.0)
+      sentry-ruby (~> 5.12.0)
+    sentry-ruby (5.12.0)
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.11.0)
-      sentry-ruby (~> 5.11.0)
+    sentry-sidekiq (5.12.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
@@ -1 +1 @@
-2.17.0
+3.1.0
@@ -1 +1 @@
-2.3.0
+2.6.0
@@ -29,3 +29,5 @@
@import 'components/pagination';
@import 'components/search';
@import 'components/reports';
+
+@import 'custom_styles';
@@ -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%;
@@ -4,8 +4,8 @@
  float: left;
  margin-bottom: $base-spacing;
  margin-top: 0.25em;
-  text-align: right;
-  width: calc(15% - 1rem);
+  text-align: left;
+  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 {
@@ -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;
@@ -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;
 }
@@ -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;
@@ -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;
+}
@@ -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;
@@ -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;
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
@@ -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
@@ -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],
@@ -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
@@ -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
-    {
-      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
-    }
+    params.permit(custom_attributes: {})
  end
 end
@@ -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
@@ -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?
@@ -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
@@ -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
@@ -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
@@ -18,8 +18,8 @@ class AccountDashboard < Administrate::BaseDashboard
                               end

  ATTRIBUTE_TYPES = {
-    id: Field::Number,
-    name: Field::String,
+    id: Field::Number.with_options(searchable: true),
+    name: Field::String.with_options(searchable: true),
    created_at: Field::DateTime,
    updated_at: Field::DateTime,
    users: CountField,
@@ -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'),
-    user: Field::BelongsTo.with_options(searchable: true, searchable_field: 'name', order: 'id DESC'),
-    inviter: Field::BelongsTo.with_options(class_name: 'User', searchable: true, searchable_field: 'name'),
+    account: Field::BelongsToSearch.with_options(class_name: 'Account', searchable: true, searchable_field: [:name, :id], order: 'id DESC'),
+    user: Field::BelongsToSearch.with_options(class_name: 'User', searchable: true, searchable_field: [:name, :email, :id], order: 'id DESC'),
+    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,
@@ -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,
@@ -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
@@ -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 {
-        locale,
-        latest_chatwoot_version: latestChatwootVersion,
-      } = this.getAccount(this.currentAccountId);
+      const { locale, latest_chatwoot_version: latestChatwootVersion } =
+        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
      this.setLocale(locale);
      this.updateRTLDirectionView(locale);
@@ -15,9 +15,8 @@ class ApiClient {

  // eslint-disable-next-line class-methods-use-this
  get accountIdFromRoute() {
-    const isInsideAccountScopedURLs = window.location.pathname.includes(
-      '/app/accounts'
-    );
+    const isInsideAccountScopedURLs =
+      window.location.pathname.includes('/app/accounts');

    if (isInsideAccountScopedURLs) {
      return window.location.pathname.split('/')[3];
@@ -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, {
@@ -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);
@@ -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'
      );
    });
@@ -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: {
@@ -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',
      });
    });
@@ -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,
@@ -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);
-  });
-}
@@ -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'
      );
    });
@@ -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(
-        '/api/v1/assignable_agents',
-        {
-          params: {
-            inbox_ids: [1],
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
+        params: {
+          inbox_ids: [1],
+        },
+      });
    });
  });
 });
@@ -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@#@$',
@@ -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(
-        '/api/v1/contacts/1/labels'
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/contacts/1/labels');
    });

    it('#updateContactLabels', () => {
      const labels = ['support-query'];
      contactAPI.updateContactLabels(1, labels);
-      expect(context.axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/contacts/1/labels',
-        {
-          labels,
-        }
-      );
+      expect(axiosMock.post).toHaveBeenCalledWith('/api/v1/contacts/1/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'
      );
    });
@@ -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,
@@ -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: {
@@ -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(
-        '/api/v1/conversations',
-        {
-          params: {
-            inbox_id: 1,
-            team_id: 1,
-            status: 'open',
-            assignee_type: 'me',
-            page: 1,
-            labels: [],
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
+        params: {
+          inbox_id: 1,
+          team_id: 1,
+          status: 'open',
+          assignee_type: 'me',
+          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(
-        '/api/v1/conversations/meta',
-        {
-          params: {
-            inbox_id: 1,
-            team_id: 1,
-            status: 'open',
-            assignee_type: 'me',
-            labels: [],
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations/meta', {
+        params: {
+          inbox_id: 1,
+          team_id: 1,
+          status: 'open',
+          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(
-        context.axiosMock.post
-      ).toHaveBeenCalledWith(
+      expect(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'
      );
    });
@@ -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,
      });
    });
  });
@@ -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(
-        '/api/v1/inboxes/2/campaigns'
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/inboxes/2/campaigns');
    });

    it('#deleteInboxAvatar', () => {
      inboxesAPI.deleteInboxAvatar(2);
-      expect(context.axiosMock.delete).toHaveBeenCalledWith(
-        '/api/v1/inboxes/2/avatar'
-      );
+      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
    });
  });
 });
@@ -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(
-        '/api/v1/integrations/2'
-      );
+      expect(axiosMock.delete).toHaveBeenCalledWith('/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'
      );
    });
@@ -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,
@@ -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'
      );
    });
@@ -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(
-        '/api/v2/reports/summary',
-        {
-          params: {
-            business_hours: undefined,
-            group_by: undefined,
-            id: undefined,
-            since: 1621103400,
-            timezone_offset: -0,
-            type: 'account',
-            until: 1621621800,
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/summary', {
+        params: {
+          business_hours: undefined,
+          group_by: undefined,
+          id: undefined,
+          since: 1621103400,
+          timezone_offset: -0,
+          type: 'account',
+          until: 1621621800,
+        },
+      });
    });

    it('#getAgentReports', () => {
@@ -60,60 +72,48 @@ describe('#Reports API', () => {
        to: 1621621800,
        businessHours: true,
      });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
-        '/api/v2/reports/agents',
-        {
-          params: {
-            since: 1621103400,
-            until: 1621621800,
-            business_hours: true,
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/agents', {
+        params: {
+          since: 1621103400,
+          until: 1621621800,
+          business_hours: true,
+        },
+      });
    });

    it('#getLabelReports', () => {
      reportsAPI.getLabelReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
-        '/api/v2/reports/labels',
-        {
-          params: {
-            since: 1621103400,
-            until: 1621621800,
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/labels', {
+        params: {
+          since: 1621103400,
+          until: 1621621800,
+        },
+      });
    });

    it('#getInboxReports', () => {
      reportsAPI.getInboxReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
-        '/api/v2/reports/inboxes',
-        {
-          params: {
-            since: 1621103400,
-            until: 1621621800,
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/inboxes', {
+        params: {
+          since: 1621103400,
+          until: 1621621800,
+        },
+      });
    });

    it('#getTeamReports', () => {
      reportsAPI.getTeamReports({ from: 1621103400, to: 1621621800 });
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
-        '/api/v2/reports/teams',
-        {
-          params: {
-            since: 1621103400,
-            until: 1621621800,
-          },
-        }
-      );
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/teams', {
+        params: {
+          since: 1621103400,
+          until: 1621621800,
+        },
+      });
    });

    it('#getConversationMetric', () => {
      reportsAPI.getConversationMetric('account');
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
+      expect(axiosMock.get).toHaveBeenCalledWith(
        '/api/v2/reports/conversations',
        {
          params: {
@@ -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,
@@ -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;
@@ -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 {
@@ -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';

@@ -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;
      }
    }
  }
@@ -152,6 +152,10 @@

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

@@ -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;

@@ -31,7 +31,7 @@
 </template>

 <script>
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';

 export default {
  components: {
@@ -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"
        >
-          {{
-            this.$t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`)
-          }}
+          {{ $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 ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter';
-import ChatTypeTabs from './widgets/ChatTypeTabs';
-import ConversationCard from './widgets/conversation/ConversationCard';
+import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
+import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
+import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
+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 {
-          allConversations,
-          activeConversationIndex,
-        } = this.getKeyboardListenerParams();
+        const { allConversations, activeConversationIndex } =
+          this.getKeyboardListenerParams();
        if (activeConversationIndex === -1) {
          allConversations[0].click();
        }
@@ -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>
@@ -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
@@ -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[
-        this.modalType
-      ] || ''}`;
+      return `modal-mask skip-context-menu ${
+        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() {
-      if (this.closeOnBackdropClick) {
+    onMouseUp() {
+      if (this.mousedDownOnBackdrop) {
+        this.mousedDownOnBackdrop = false;
        this.onClose();
      }
    },
@@ -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">
@@ -10,7 +10,7 @@
 </template>

 <script>
-import WootSnackbar from './Snackbar';
+import WootSnackbar from './Snackbar.vue';

 export default {
  components: {
@@ -72,10 +72,8 @@ export default {
      const { custom_attributes: subscription } = account;
      if (!subscription) return EMPTY_SUBSCRIPTION_INFO;

-      const {
-        subscription_status: status,
-        subscription_ends_on: endsOn,
-      } = subscription;
+      const { subscription_status: status, subscription_ends_on: endsOn } =
+        subscription;

      return { status, endsOn: new Date(endsOn) };
    },
@@ -1,4 +1,4 @@
-const semver = require('semver');
+import semver from 'semver';

 export const hasAnUpdateAvailable = (latestVersion, currentVersion) => {
  if (!semver.valid(latestVersion)) {
@@ -13,7 +13,7 @@
 </template>

 <script>
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';

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

 const { AVAILABILITY_STATUS_KEYS } = wootConstants;
@@ -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 SecondarySidebar from './sidebarComponents/Secondary';
+import PrimarySidebar from './sidebarComponents/Primary.vue';
+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,
@@ -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'],
@@ -34,8 +34,8 @@
            <woot-submit-button
              :disabled="
                $v.accountName.$invalid ||
-                  $v.accountName.$invalid ||
-                  uiFlags.isCreating
+                $v.accountName.$invalid ||
+                uiFlags.isCreating
              "
              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
              :loading="uiFlags.isCreating"
@@ -16,7 +16,7 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import Thumbnail from '../../widgets/Thumbnail';
+import Thumbnail from '../../widgets/Thumbnail.vue';

 export default {
  components: {
@@ -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"
    >
@@ -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 WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';

 export default {
  components: {
@@ -39,11 +39,11 @@
  </div>
 </template>
 <script>
-import Logo from './Logo';
-import PrimaryNavItem from './PrimaryNavItem';
-import OptionsMenu from './OptionsMenu';
-import AgentDetails from './AgentDetails';
-import NotificationBell from './NotificationBell';
+import Logo from './Logo.vue';
+import PrimaryNavItem from './PrimaryNavItem.vue';
+import OptionsMenu from './OptionsMenu.vue';
+import AgentDetails from './AgentDetails.vue';
+import NotificationBell from './NotificationBell.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
@@ -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 }}
@@ -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,
@@ -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}`
-        : `Created at: ${this.dateFormat(this.createdAtTimestamp)}`;
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
+            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}`
-        : `Last activity: ${this.dateFormat(this.lastActivityTimestamp)}`;
+        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.ACTIVE')} ${
+            this.lastActivityAtTimeAgo
+          }`
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
+          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
    },
    tooltipText() {
      return `${this.createdAt}
@@ -28,8 +28,8 @@
  </button>
 </template>
 <script>
-import Spinner from 'shared/components/Spinner';
-import EmojiOrIcon from 'shared/components/EmojiOrIcon';
+import Spinner from 'shared/components/Spinner.vue';
+import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';

 export default {
  name: 'WootButton',
@@ -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') }}
@@ -1,11 +1,9 @@
 <template>
-  <div
-    class="preview-item__wrap flex flex-col overflow-auto mt-4 max-h-[12.5rem]"
-  >
+  <div class="preview-item__wrap flex overflow-auto 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"
        >
@@ -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,
@@ -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: {
@@ -7,7 +7,7 @@
  />
 </template>
 <script>
-import ChannelSelector from '../ChannelSelector';
+import ChannelSelector from '../ChannelSelector.vue';
 export default {
  components: { ChannelSelector },
  props: {
@@ -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(
-        `dashboard-app--frame-${index}`
-      );
+      // A possible alternative is to use ref instead of document.getElementById
+      // 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;
@@ -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,
@@ -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 {
@@ -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 {
@@ -17,7 +17,7 @@
  </div>
 </template>
 <script>
-import Thumbnail from './Thumbnail';
+import Thumbnail from './Thumbnail.vue';

 export default {
  components: {
@@ -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 CannedResponse from '../conversation/CannedResponse';
-import VariableList from '../conversation/VariableList';
+import TagAgents from '../conversation/TagAgents.vue';
+import CannedResponse from '../conversation/CannedResponse.vue';
+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 { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
+import {
+  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
-        .replaceWith(this.range.from, this.range.to, node)
-        .insertText(` `);
-      this.state = this.editorView.state.apply(tr);
-      this.emitOnChange();
+      this.insertNodeIntoEditor(node, this.range.from, this.range.to);
      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) {
-        node = this.editorView.state.schema.text(updatedMessage);
-        from = this.range.from;
-      }
+      const from =
+        node.textContent === updatedMessage
+          ? this.range.from
+          : this.range.from - 1;

-      const tr = this.editorView.state.tr.replaceWith(
-        from,
-        this.range.to,
-        node
-      );
+      this.insertNodeIntoEditor(node, from, this.range.to);

-      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(
-        from,
-        this.range.to,
-        node
-      );
+      const content = `{{${variable}}}`;
+      let node = this.editorView.state.schema.text(content);
+      const { from, to } = this.range;

-      this.state = this.editorView.state.apply(tr);
-      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.insertNodeIntoEditor(node, from, to);
      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>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Muhsin Keloth	f2171ffa76	fix: Retry message	2023-10-19 16:47:18 +05:30
Muhsin KelothandGitHub	b94c89ebf1	fix: Show sent status for messenger channel (#8145 )	2023-10-19 13:22:19 +05:30
Muhsin KelothandGitHub	78ce8a4652	feat: Add support for Instagram delivery reports (#8125 )	2023-10-18 23:42:34 -07:00
Muhsin KelothandGitHub	04c874fe35	feat: Add delivery reports for API channel (#8116 )	2023-10-18 10:11:13 +05:30
Sojan	eabe548520	Merge branch 'release/3.2.0' into develop	2023-10-17 17:55:42 -07:00
Sojan	f96b54e57f	Bump version to 3.2.0	2023-10-17 17:54:38 -07:00
Pranav Raj SandGitHub	d3bf828524	chore: Adds hasConversation flag in chatwoot:on-start-conversation event (#8132 )	2023-10-17 16:24:00 -07:00
Shivam Mishra GitHub Sojan Jose	c20415f3ba	test: reset Current.user before each example (#8126 ) Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-10-17 15:42:45 -07:00
Pranav Raj SandGitHub	6b2ed4fe79	fix: Add reset password for edit agent screen (#8130 )	2023-10-17 12:54:05 -07:00
Shivam MishraandGitHub	eca9ca90f1	feat: Add June event for reply to (#8118 )	2023-10-17 09:51:28 -07:00
Shivam MishraandGitHub	9018ec9678	test: reset `Current.user` after spec (#8123 )	2023-10-17 18:06:54 +05:30
Shivam MishraandGitHub	e55fe33f1b	test: fix flaky test by adding margin for time diff (#8121 )	2023-10-17 14:20:40 +05:30
Chatwoot Bot GitHub Sojan Jose	3b0788c3be	chore: Update translations (#8024 ) Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-10-16 19:55:25 -07:00
Vishnu NarayananandGitHub	626e67b859	feat: add autoupdate for cwctl (#8108 ) - During cwctl --upgrade, check for the latest version of cwctl from master branch - Upgrade cwctl if a newer version is found	2023-10-16 19:43:44 -07:00
Nithin David ThomasandGitHub	28db18ebbd	chore: Shows articles in dark mode for widget (#8115 )	2023-10-16 16:59:15 +05:30
Nithin David Thomas GitHub Sivin Varghese	b28721e10b	feat: Creates components for Article Search in Reply [CW-2285] (#7957 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-10-16 15:02:02 +05:30
Shivam MishraandGitHub	f77db4d814	refactor: disable bubble by flag (#8109 )	2023-10-13 21:34:22 +05:30
Shivam Mishra GitHub Pranav Raj S	62d8ec7edb	feat: support reply to for incoming messages on facebook (#8076 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-13 16:33:50 +05:30
Sojan Jose GitHub snyk-bot	7b09fa4a03	chore(snyk): Upgrade gems to fix SNYK-RUBY-RACK-1061917 (#8104 ) Co-authored-by: snyk-bot <snyk-bot@snyk.io>	2023-10-13 09:24:50 +05:30
Muhsin KelothandGitHub	980013abae	feat: Add delivery reports for live chat (#8092 )	2023-10-12 20:48:20 +05:30
Shivam MishraandGitHub	5c729ccea5	chore: Add null checks (#8100 )	2023-10-12 19:39:19 +05:30
Vishnu NarayananandGitHub	ae52ca87aa	fix: Handle empty status in conversation controller (#8091 ) Fixes CW-2644	2023-10-12 17:11:04 +05:30
Vishnu NarayananandGitHub	415bb23c37	fix: Handle invalid metric in ReportsController (#8086 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com> Fixes CW-2643	2023-10-12 17:01:23 +05:30
Pranav Raj SandGitHub	9e173fca3c	fix: Return 404 if conversation is nil (#8098 )	2023-10-12 17:00:51 +05:30
Muhsin KelothandGitHub	bd918ee506	fix: Change the message status to `failed` if the Twilio message delivery status is `undelivered` (#8097 )	2023-10-12 15:27:38 +05:30
Shivam MishraandGitHub	7c9884b853	feat: Remove unused prop (#8093 )	2023-10-12 12:14:39 +05:30
Shivam Mishra GitHub Pranav Raj S	7ffa669c5c	feat: Implement message bubble reply to (#8068 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-11 22:04:12 +05:30
Muhsin Keloth GitHub Pranav Raj S	0bc20873f6	feat: Add delivery status for Twilio Channel (#8082 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-11 21:17:46 +05:30
Sivin Varghese GitHub Pranav Raj S	88de3359a5	fix: Long names hide the resolve button (#8083 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-11 13:25:20 +05:30
Sojan JoseandGitHub	a3d008da06	chore: Ensure null validation for private attribute in messages (#8085 )	2023-10-11 13:16:59 +05:30
Shivam Mishra GitHub Pranav Raj S	cbae95422d	feat: Implement reply to for reply editor (#8063 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-10 19:13:12 +05:30
Shivam MishraandGitHub	081c845c56	chore: Remove twitter actions (#8079 )	2023-10-10 16:48:58 +05:30
Pranav Raj SandGitHub	1e54d6deb3	fix: Update duplicate ids for dashboard app frame (#8077 )	2023-10-10 16:46:32 +05:30
Shivam MishraandGitHub	bb5c6a416a	fix: insert position for canned responses (#8069 )	2023-10-10 10:36:10 +05:30
Sojan Jose GitHub Muhsin Keloth	6a07251007	feat: Add the ability to self-assign conversations in macros (#8048 ) Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-10-10 09:38:23 +05:30
Sivin VargheseandGitHub	759a66dd21	feat: Add the ability to send attachment in new conversation (#7913 )	2023-10-10 09:34:36 +05:30
Vishnu NarayananandGitHub	8189dd932c	feat: Report cwctl events to hub (#8009 )	2023-10-10 09:16:03 +05:30
Sivin Varghese GitHub Pranav Raj S	b6ba0f343e	feat: Reverse the contact merge (#8057 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-10 08:20:48 +05:30
Sivin VargheseandGitHub	86ca90aa15	feat: Support image resize in message signature (#8042 )	2023-10-09 13:20:12 +05:30
Muhsin KelothandGitHub	26e8877cd9	feat: Support link unfurling for all the channels within the same connected channel account. (#8033 )	2023-10-08 17:55:03 +05:30
Shivam Mishra GitHub Muhsin Keloth	1b63adfb2e	feat: add option for reply to in context menu (#8043 ) Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-10-05 20:01:20 +05:30
Nithin David Thomas GitHub Sivin Varghese	e27274a5a8	chore: Adds a bus event to insert text at cursor in editor (#7968 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-10-05 14:37:01 +05:30
Shivam Mishra GitHub Muhsin Keloth	e5c198f839	refactor: Remove redundant accounts/get (#8056 ) Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-10-05 13:54:04 +05:30
Sojan JoseandGitHub	72ba429159	fix: Show sources in bot response only if documents are present (#8055 ) - show sources section in bot only based on appropriate conditions	2023-10-05 00:11:01 -07:00
Pranav Raj SandGitHub	3227cf7ff3	fix: Update query to support multiple tag conditions (#8054 )	2023-10-05 10:47:42 +05:30
GitStart GitHub BikashSah999 Nithin David Thomas Sivin Varghese	f0740120a8	chore: Add a fix for mouse up event in modal (#7950 ) Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com> Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-10-05 10:44:31 +05:30
Sivin Varghese GitHub Sojan Jose Pranav Raj S	3ea54065b1	feat: Upgrade prompt for help center (#8010 ) Co-authored-by: Sojan Jose <sojan@pepalo.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-05 08:34:21 +05:30
Sojan JoseandGitHub	6f19546c3c	feat: Add article messages along with bot responses (#7993 ) ref: https://linear.app/chatwoot/issue/CW-2464/bot-should-also-return-links-to-the-information	2023-10-04 15:40:59 -07:00
Mazen KhalilandGitHub	5c9ab21617	fix: Application not loading after setting RACK_ATTACK_LIMIT ENV variable [CW-2587] (#8044 )	2023-10-04 15:56:20 +05:30
Nithin David Thomas GitHub Sivin Varghese	b71a580573	feat: Adds dark theme support for public portal [CW-2525] (#7979 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-10-04 11:56:00 +05:30
Sojan JoseandGitHub	6a73953003	chore: Add delay before running dataimport job (#8039 ) - We have observed some failures for data import jobs in the cloud due to race conditions with job executions and active storage file uploading. This PR adds delays and retries to accommodate that.	2023-10-03 22:18:57 -07:00
Sojan JoseandGitHub	336af1ac9a	chore: Create client API conversations with custom attributes (#8040 ) - Update client API create conversations endpoint to accept custom attributes as well.	2023-10-03 22:18:35 -07:00
Sojan Jose GitHub Pranav Raj S	e4de366b8d	feat: Add an option to listen to the start conversation click events (#8038 ) This PR will add a new event chatwoot:on-start-conversation to the chat widget, which you can listen to and trigger custom interactions on your end. Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-10-03 18:01:40 -07:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	373c3dcd6c	chore(deps): bump postcss from 8.4.30 to 8.4.31 (#8034 ) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2023-10-03 10:08:18 -07:00
Shivam MishraandGitHub	4b12dd89b0	fix: videojs-record version (#8029 )	2023-10-03 20:57:23 +05:30
Sivin Varghese GitHub Shivam Mishra	c19cfeaa81	feat: Adds message signature for new email conversations (#7946 ) Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>	2023-10-03 13:45:28 +05:30
GitStart GitHub AqidaHaidari Sivin Varghese	fa118ad18c	fix: Issue on the status filter field (#7949 ) Co-authored-by: AqidaHaidari <42426077+AqidaHaidari@users.noreply.github.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-10-03 09:20:46 +05:30
José Sobral GitHub Sivin Varghese iamsivin	249bfe44bb	fix: issue of translation for `TimeAgo.vue` (#7951 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: iamsivin <iamsivin@gmail.com>	2023-10-03 08:41:30 +05:30
Sojan JoseandGitHub	826d9ec5a7	chore: Refactor Response Bot Data Schema (#8011 ) This PR refactors the schema we introduced in #7518 based on the feedback from production tests. Here is the change log - Decouple Inbox association to a new table inbox_response_sources -> this lets us share the same response source between multiple inboxes - Add a status field to responses. This ensures that, by default, responses are created in pending status. You can do quality assurance before making them active. In future, this status can be leveraged by the bot to auto-generate response questions from conversations which require a handoff - Add response_source association to responses and remove hard dependency from response_documents. This lets users write free-form question answers based on conversations, which doesn't necessarily need a response source.	2023-10-01 19:31:38 -07:00
Sojan Jose GitHub snyk-bot	d8b53f5d2f	chore: [Snyk] Security upgrade audited from 5.3.3 to 5.4.0 (#8023 ) Co-authored-by: snyk-bot <snyk-bot@snyk.io>	2023-09-30 19:49:03 -07:00
Jordan BroughandGitHub	08ced452e1	chore: Log errors handled by RequestExceptionHandler (#8013 ) - Logging this info is invaluable when using logs to track down the reason why a particular request failed.	2023-09-30 19:46:58 -07:00
Muhsin Keloth GitHub Pranav Raj S	24fe3805d8	feat: Slack link unfurling (#7940 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-29 19:35:56 +05:30
Sivin VargheseandGitHub	845b0c0a68	fix: Editor file upload browser showing bug (#8019 )	2023-09-29 17:53:54 +05:30
Chatwoot BotandGitHub	8ce7539c5e	chore: Update translations (#8016 )	2023-09-29 15:46:29 +05:30
Shivam MishraandGitHub	5ee980465f	fix: Token type `hr` not supported by Markdown parser (#8003 )	2023-09-29 12:05:32 +05:30
Pranav Raj SandGitHub	fd633e1613	feat: Add inbox webhook events (#8006 ) - Add webhook events for inbox creation/updation. - Right now, the feature is added under a feature_flag. It is not available by default on all installations.	2023-09-28 15:28:10 -07:00
Pranav Raj SandGitHub	12a64f1b10	chore: Add an API to find the contacts using contact inbox sourceId (#8012 ) Fixes: https://linear.app/chatwoot/issue/CW-2578/search-by-facebook-id	2023-09-28 15:26:28 -07:00
Pranav Raj SandGitHub	ffc2d98fb8	fix: Use installation locale if configured (#8002 )	2023-09-27 19:06:36 +05:30
Sojan Jose GitHub Pranav Raj S	f7f04f788e	feat: Add an option to view the generated articles by Robin AI (#7995 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-27 18:16:36 +05:30
Shivam Mishra GitHub Pranav Raj S	a88d155dd7	feat: update tool-chain to latest (#7975 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-27 14:02:34 +05:30
Chatwoot BotandGitHub	e8b7e791a5	chore: Update translations (#7969 )	2023-09-27 12:47:03 +05:30
Sivin Varghese GitHub Muhsin Keloth	b18cac77fb	chore: Moved file upload methods to mixin (#7987 ) Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-09-27 11:05:19 +05:30
Sojan JoseandGitHub	647161121e	chore: pass to agent if there is error parsing json (#7990 ) - GPT bot should pass the conversation to the agent if AI returns invalid json or any other error	2023-09-26 21:05:21 -07:00
Muhsin KelothandGitHub	cbbe939662	fix: Set avatar for users(agent/contact) in slack channels (#7960 )	2023-09-26 09:38:14 +05:30
Sojan	30cb141e5e	Merge branch 'master' into develop	2023-09-22 19:55:11 -07:00
Sojan	b0d5c438ac	Merge branch 'release/3.1.1' into develop	2023-09-22 19:54:48 -07:00
Sojan	3eefa4daee	Merge branch 'release/3.1.1' Publish Chatwoot CE docker images / build (push) Waiting to run Details	2023-09-22 19:54:43 -07:00
Sojan	ddce999385	Bump version to 3.1.1	2023-09-22 19:54:20 -07:00
Pranav Raj S GitHub Sojan Jose	ff915dd2ea	fix: Avoid joining tables to fix the distinct value query (#7965 ) DISTINCT query with custom attributes return an error. To avoid the error, this PR refactors the query to include tags only when it is required. Fixes #7931 Fixes #7836 Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-09-22 19:48:56 -07:00
Sojan Jose GitHub Vishnu Narayanan Pranav Raj S	dd0930d75e	chore: Improve search in super admin panel (#7952 ) Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-22 19:41:13 +05:30
Shivam MishraandGitHub	3f0d96c24d	chore: Add better error messages for Facebook unauthorized (#7936 )	2023-09-22 16:41:04 +05:30
Pranav Raj SandGitHub	c16b801562	chore: Update the filter for articles in the widget (#7961 )	2023-09-21 19:40:46 +05:30
Nithin David Thomas GitHub Pranav Raj S	018c468303	chore: Refactors widget to use i18n locale for articles (#7958 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-21 18:24:03 +05:30
Shivam Mishra GitHub Pranav Raj S	48bf8d08e5	feat: Update dependencies and fix import syntax for Vite migration (#7959 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-21 17:55:54 +05:30
Nithin David ThomasandGitHub	fabb3c8da4	fix: Help Center articles are not available on the widget [CW-2534] (#7954 )	2023-09-21 17:06:15 +05:30
Liam GitHub Sojan Jose	bdeb2f9812	feat: Searching contacts by company name (#7867 ) Implement the functionality of being able to search the contacts page by company name. Fixes: #7818 Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-09-21 00:53:12 -07:00
Nithin David Thomas GitHub Sojan Jose	53dc38e650	fix: Renders youtube and vimeo links within blank lines as embeds (#7422 ) Within the article we are now rendering every link for youtube and vimeo as embeds. This isn't a good solution, as users might need to have plain links as well. This fix will render only links within two blank lines as embeds. Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-09-21 00:16:03 -07:00
Shivam Mishra GitHub Sivin Varghese	27fc24375d	fix: Handling markdown before replacing or appending signature [CW-2532] (#7944 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-09-21 11:28:29 +05:30
Hricha Shandily GitHub Shivam Mishra Pranav Raj S	f999777a2d	chore: Update message signature description (#7943 ) Co-authored-by: Shivam Mishra <scm.mymail@gmail.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com>	2023-09-20 21:09:25 -07:00
Pranav Raj SandGitHub	71d1e98765	chore: Remove spinkit from dependencies (#7948 )	2023-09-20 18:18:55 +05:30
Sivin VargheseandGitHub	2c93d563c1	fix: Update colors to fix dark mode in the editor add-link modal header (#7947 )	2023-09-20 17:29:27 +05:30
Pranav Raj SandGitHub	f1b556d4a3	fix: Downcase content filter values to fix the query (#7942 )	2023-09-20 13:14:00 +05:30
Chatwoot BotandGitHub	73c119cd3d	chore: Update translations (#7937 )	2023-09-19 21:19:46 -07:00
Smit BosamiyaandGitHub	0ad2f94151	fix: Error when attempting to Delete User-Associated Accounts via Super Admin Console (#7810 ) This pull request addresses the issue where an error is encountered while attempting to delete user-associated accounts through the Super Admin Console. The problem arises from an error that occurs when the "destroy" action is triggered on an associated account. Fixes: #7809	2023-09-19 21:16:11 -07:00
Shivam Mishra GitHub Sivin Varghese	f8cb806548	fix: remove trailing spaces before pushing signature (#7935 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2023-09-19 13:29:44 +05:30
Sojan Jose GitHub Pranav Raj S Muhsin Keloth	9ba5adfd60	chore: Support multiple values for automation message content (#7871 ) Co-authored-by: Pranav Raj S <pranav@chatwoot.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-09-19 13:04:58 +05:30
Muhsin KelothandGitHub	0dd5104acb	chore: Move slack message concern to the helper (#7912 )	2023-09-19 11:09:23 +05:30
Sojan JoseandGitHub	0968aead6c	chore: Migration status in super admin (#7938 )	2023-09-19 10:31:41 +05:30
Shivam MishraandGitHub	53d530b815	feat: Add upload under account scope (#7914 )	2023-09-19 09:51:54 +05:30
Vishnu Narayanan GitHub Sojan Jose	2429daa45c	feat: cwctl upgrade node for existing installations (#7772 ) Co-authored-by: Sojan Jose <sojan@pepalo.com>	2023-09-18 23:49:29 +05:30
Sojan	86894b27b5	Merge branch 'release/3.1.0' into develop	2023-09-15 16:46:47 -07:00
Sojan	05df4d4212	Merge branch 'release/3.1.0' Publish Chatwoot CE docker images / build (push) Waiting to run Details	2023-09-15 16:46:37 -07:00
Sojan	47fd0ea2b2	Bump version to 3.1.0	2023-09-15 16:45:59 -07:00
Sojan JoseandGitHub	30b8a365dc	chore: Improve the feature management styles in super admin (#7920 )	2023-09-15 15:55:15 -07:00
Shivam Mishra GitHub Sivin Varghese Muhsin Keloth	29110ffd6b	feat: Allow signature in the editor directly (#7881 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com> Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>	2023-09-15 18:46:40 +05:30
Sojan	fe8a67b76a	Merge branch 'release/3.0.0' Publish Chatwoot CE docker images / build (push) Waiting to run Details	2023-08-15 22:41:04 -07:00
Sojan	e204fe1c1f	Merge branch 'release/2.18.0' Publish Chatwoot CE docker images / build (push) Waiting to run Details	2023-06-15 18:44:51 +05:30
Sojan	08fa370261	Merge branch 'hotfix/2.17.1' Publish Chatwoot CE docker images / build (push) Waiting to run Details	2023-05-19 20:56:06 +05:30
@@ -1 +1 @@
 .17.0
 .1.0
@@ -1 +1 @@
 .3.0
 .6.0