chore: add packages

feat: add linear
feat: add sitemap for help center (#9280 )
2024-04-30 09:13:36 +05:30 · 2024-04-29 13:27:18 +05:30 · 2024-04-26 21:36:39 +05:30 · 2024-04-26 16:02:10 +05:30 · 2024-04-26 15:41:02 +05:30 · 2024-04-25 22:49:10 -07:00
845 changed files with 18606 additions and 5129 deletions
@@ -180,8 +180,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Sentry
 # SENTRY_DSN=

-## LogRocket
-# LOG_ROCKET_PROJECT_ID=xxxxx/some-project

 # MICROSOFT CLARITY
 # MS_CLARITY_TOKEN=xxxxxxxxx
@@ -251,9 +249,6 @@ AZURE_APP_SECRET=
 ## OpenAI key
 # OPENAI_API_KEY=

-# Sentiment analysis model file path
-SENTIMENT_FILE_PATH=
-
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
@@ -1,7 +1,2 @@
-## All javascript files should be reviewed by pranav before merging
-*.js @pranavrajs
-*.vue @pranavrajs
-
-
 ## All enterprise related files should be reviewed by sojan before merging
 /enterprise/* @sojan-official
@@ -69,7 +69,7 @@ gem 'webpacker'
 gem 'barnes'

 ##--- gems for authentication & authorization ---##
-gem 'devise', '>= 4.9.3'
+gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth'
 # authorization
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'

 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'

 ## Gems for reponse bot
@@ -175,9 +175,6 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'

-# Sentiment analysis
-gem 'informers'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################

@@ -203,7 +200,7 @@ group :development do
  gem 'rack-mini-profiler', '>= 3.2.0', require: false
  gem 'stackprof'
  # Should install the associated chrome extension to view query logs
-  gem 'meta_request'
+  gem 'meta_request', '>= 0.8.0'
 end

 group :test do
@@ -149,9 +149,8 @@ GEM
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
    base64 (0.1.1)
-    bcrypt (3.1.19)
+    bcrypt (3.1.20)
    bindex (0.8.1)
-    blingfire (0.1.8)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
    brakeman (5.4.1)
@@ -194,7 +193,7 @@ GEM
      irb (>= 1.5.0)
      reline (>= 0.3.1)
    declarative (0.0.20)
-    devise (4.9.3)
+    devise (4.9.4)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0)
@@ -237,9 +236,8 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.7.4)
-      faraday-net_http (>= 2.0, < 3.1)
-      ruby2_keywords (>= 0.0.4)
+    faraday (2.9.0)
+      faraday-net_http (>= 2.0, < 3.2)
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -247,7 +245,8 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.0.2)
+    faraday-net_http (3.1.0)
+      net-http
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
@@ -316,15 +315,15 @@ GEM
    google-cloud-translate-v3 (0.6.0)
      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.2)
-    google-protobuf (3.25.2-arm64-darwin)
-    google-protobuf (3.25.2-x86_64-darwin)
-    google-protobuf (3.25.2-x86_64-linux)
+    google-protobuf (3.25.3)
+    google-protobuf (3.25.3-arm64-darwin)
+    google-protobuf (3.25.3-x86_64-darwin)
+    google-protobuf (3.25.3-x86_64-linux)
    googleapis-common-protos (1.4.0)
      google-protobuf (~> 3.14)
      googleapis-common-protos-types (~> 1.2)
      grpc (~> 1.27)
-    googleapis-common-protos-types (1.11.0)
+    googleapis-common-protos-types (1.14.0)
      google-protobuf (~> 3.18)
    googleauth (1.5.2)
      faraday (>= 0.17.3, < 3.a)
@@ -335,14 +334,17 @@ GEM
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.54.3)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0)
+      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.3-x86_64-darwin)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0-arm64-darwin)
+      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.54.3-x86_64-linux)
-      google-protobuf (~> 3.21)
+    grpc (1.62.0-x86_64-darwin)
+      google-protobuf (~> 3.25)
+      googleapis-common-protos-types (~> 1.0)
+    grpc (1.62.0-x86_64-linux)
+      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
    hairtrigger (1.0.0)
@@ -366,15 +368,11 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.4)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
      ruby-vips (>= 2.0.17, < 3)
-    informers (0.2.0)
-      blingfire (>= 0.1.7)
-      numo-narray
-      onnxruntime (>= 0.5.1)
    io-console (0.6.0)
    irb (1.7.2)
      reline (>= 0.3.6)
@@ -394,7 +392,8 @@ GEM
      hana (~> 1.3)
      regexp_parser (~> 2.0)
      uri_template (~> 0.7)
-    jwt (2.7.0)
+    jwt (2.8.1)
+      base64
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.2.2)
@@ -451,17 +450,17 @@ GEM
    marcel (1.0.2)
    maxminddb (0.1.22)
    memoist (0.16.2)
-    meta_request (0.7.4)
+    meta_request (0.8.2)
      rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 7.1)
+      railties (>= 3.0.0, < 8)
    method_source (1.0.0)
    mime-types (3.4.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.5)
-    minitest (5.21.2)
+    mini_portile2 (2.8.6)
+    minitest (5.22.3)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -470,6 +469,8 @@ GEM
    multipart-post (2.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
+    net-http (0.4.1)
+      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
    net-imap (0.4.9)
@@ -488,16 +489,15 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.0)
-    nokogiri (1.16.2)
+    nokogiri (1.16.4)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.2-arm64-darwin)
+    nokogiri (1.16.4-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-darwin)
+    nokogiri (1.16.4-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-linux)
+    nokogiri (1.16.4-x86_64-linux)
      racc (~> 1.4)
-    numo-narray (0.9.2.1)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
      snaky_hash (~> 2.0)
@@ -515,25 +515,17 @@ GEM
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
-    omniauth-google-oauth2 (1.1.1)
+    omniauth-google-oauth2 (1.1.2)
      jwt (>= 2.0)
-      oauth2 (~> 2.0.6)
+      oauth2 (~> 2.0)
      omniauth (~> 2.0)
-      omniauth-oauth2 (~> 1.8.0)
+      omniauth-oauth2 (~> 1.8)
    omniauth-oauth2 (1.8.0)
      oauth2 (>= 1.4, < 3)
      omniauth (~> 2.0)
    omniauth-rails_csrf_protection (1.0.1)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
-    onnxruntime (0.7.6)
-      ffi
-    onnxruntime (0.7.6-arm64-darwin)
-      ffi
-    onnxruntime (0.7.6-x86_64-darwin)
-      ffi
-    onnxruntime (0.7.6-x86_64-linux)
-      ffi
    openssl (3.1.0)
    orm_adapter (0.5.0)
    os (1.1.4)
@@ -559,7 +551,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.7.3)
-    rack (2.2.8.1)
+    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.4.0)
@@ -568,7 +560,8 @@ GEM
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.1.0)
+    rack-protection (3.2.0)
+      base64 (>= 0.1.0)
      rack (~> 2.2, >= 2.2.4)
    rack-proxy (0.7.6)
      rack
@@ -604,7 +597,7 @@ GEM
      thor (~> 1.0)
      zeitwerk (~> 2.5)
    rainbow (3.1.1)
-    rake (13.1.0)
+    rake (13.2.1)
    rb-fsevent (0.11.2)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
@@ -765,7 +758,7 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.0)
+    thor (1.3.1)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -790,11 +783,12 @@ GEM
    unf_ext (0.0.8.2)
    unicode-display_width (2.4.2)
    uniform_notifier (1.16.0)
+    uri (0.13.0)
    uri_template (0.7.0)
    valid_email2 (4.0.6)
      activemodel (>= 3.2)
      mail (~> 2.5)
-    version_gem (1.1.3)
+    version_gem (1.1.4)
    warden (1.2.9)
      rack (>= 2.0.9)
    web-console (4.2.1)
@@ -823,7 +817,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.13)

 PLATFORMS
  arm64-darwin-20
@@ -862,7 +856,7 @@ DEPENDENCIES
  database_cleaner
  ddtrace
  debug (~> 1.8)
-  devise (>= 4.9.3)
+  devise (>= 4.9.4)
  devise-secure_password!
  devise_token_auth
  dotenv-rails
@@ -887,7 +881,6 @@ DEPENDENCIES
  hashie
  html2text!
  image_processing
-  informers
  jbuilder
  json_refs
  json_schemer
@@ -900,14 +893,14 @@ DEPENDENCIES
  listen
  lograge (~> 0.14.0)
  maxminddb
-  meta_request
+  meta_request (>= 0.8.0)
  mock_redis
  neighbor
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
  omniauth (>= 2.1.2)
-  omniauth-google-oauth2
+  omniauth-google-oauth2 (>= 1.1.2)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0)
  pg
@@ -17,6 +17,9 @@ db_migrate:
 db_seed:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:seed

+db_reset:
+	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:reset
+
 db:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:chatwoot_prepare

@@ -49,4 +52,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .

-.PHONY: setup db_create db_migrate db_seed db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker
@@ -53,7 +53,23 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def conversation
-    @conversation ||= Conversation.find_by(conversation_params) || build_conversation
+    @conversation ||= set_conversation_based_on_inbox_config
+  end
+
+  def set_conversation_based_on_inbox_config
+    if @inbox.lock_to_single_conversation
+      Conversation.where(conversation_params).order(created_at: :desc).first || build_conversation
+    else
+      find_or_build_for_multiple_conversations
+    end
+  end
+
+  def find_or_build_for_multiple_conversations
+    # If lock to single conversation is disabled, we will create a new conversation if previous conversation is resolved
+    last_conversation = Conversation.where(conversation_params).where.not(status: :resolved).order(created_at: :desc).first
+    return build_conversation if last_conversation.nil?
+
+    last_conversation
  end

  def build_conversation
@@ -69,9 +69,28 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def conversation
-    @conversation ||= Conversation.where(conversation_params).find_by(
-      "additional_attributes ->> 'type' = 'instagram_direct_message'"
-    ) || build_conversation
+    @conversation ||= set_conversation_based_on_inbox_config
+  end
+
+  def instagram_direct_message_conversation
+    Conversation.where(conversation_params)
+                .where("additional_attributes ->> 'type' = 'instagram_direct_message'")
+  end
+
+  def set_conversation_based_on_inbox_config
+    if @inbox.lock_to_single_conversation
+      instagram_direct_message_conversation.order(created_at: :desc).first || build_conversation
+    else
+      find_or_build_for_multiple_conversations
+    end
+  end
+
+  def find_or_build_for_multiple_conversations
+    last_conversation = instagram_direct_message_conversation.where.not(status: :resolved).order(created_at: :desc).first
+
+    return build_conversation if last_conversation.nil?
+
+    last_conversation
  end

  def message_content
@@ -19,7 +19,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
      account: Current.account
    )

-    builder.perform
+    @agent = builder.perform
  end

  def update
@@ -2,13 +2,9 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
  before_action :authorize_request

  def create
-    ActiveRecord::Base.transaction do
-      authenticate_twilio
-      build_inbox
-      setup_webhooks if @twilio_channel.sms?
-    rescue StandardError => e
-      render_could_not_create_error(e.message)
-    end
+    process_create
+  rescue StandardError => e
+    render_could_not_create_error(e.message)
  end

  private
@@ -17,6 +13,14 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
    authorize ::Inbox
  end

+  def process_create
+    ActiveRecord::Base.transaction do
+      authenticate_twilio
+      build_inbox
+      setup_webhooks if @twilio_channel.sms?
+    end
+  end
+
  def authenticate_twilio
    client = if permitted_params[:api_key_sid].present?
               Twilio::REST::Client.new(permitted_params[:api_key_sid], permitted_params[:auth_token], permitted_params[:account_sid])
@@ -65,6 +65,10 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
    contacts = result[:contacts]
    @contacts_count = result[:count]
    @contacts = fetch_contacts(contacts)
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
  end

  def contactable_inboxes
@@ -44,6 +44,10 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    result = ::Conversations::FilterService.new(params.permit!, current_user).perform
    @conversations = result[:conversations]
    @conversations_count = result[:count]
+  rescue CustomExceptions::CustomFilter::InvalidAttribute,
+         CustomExceptions::CustomFilter::InvalidOperator,
+         CustomExceptions::CustomFilter::InvalidValue => e
+    render_could_not_create_error(e.message)
  end

  def mute
@@ -33,10 +33,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end

  def transcript
-    if permitted_params[:email].present? && conversation.present?
+    if conversation.present? && conversation.contact.present? && conversation.contact.email.present?
      ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
        conversation,
-        permitted_params[:email]
+        conversation.contact.email
      )&.deliver_later
    end
    head :ok
@@ -25,3 +25,4 @@ class ApplicationController < ActionController::Base
    }
  end
 end
+ApplicationController.include_mod_with('Concerns::ApplicationControllerConcern')
@@ -0,0 +1,5 @@
+module DomainHelper
+  def self.chatwoot_domain?(domain = request.host)
+    [URI.parse(ENV.fetch('FRONTEND_URL', '')).host, URI.parse(ENV.fetch('HELPCENTER_URL', '')).host].include?(domain)
+  end
+end
@@ -6,6 +6,7 @@ module SwitchLocale
  def switch_locale(&)
    # priority is for locale set in query string (mostly for widget/from js sdk)
    locale ||= locale_from_params
+    locale ||= locale_from_custom_domain
    # if locale is not set in account, let's use DEFAULT_LOCALE env variable
    locale ||= locale_from_env_variable
    set_locale(locale, &)
@@ -16,6 +17,20 @@ module SwitchLocale
    set_locale(locale, &)
  end

+  # If the request is coming from a custom domain, it should be for a helpcenter portal
+  # We will use the portal locale in such cases
+  def locale_from_custom_domain(&)
+    return if params[:locale]
+
+    domain = request.host
+    return if DomainHelper.chatwoot_domain?(domain)
+
+    @portal = Portal.find_by(custom_domain: domain)
+    return unless @portal
+
+    @portal.default_locale
+  end
+
  def set_locale(locale, &)
    # if locale is empty, use default_locale
    locale ||= I18n.default_locale
@@ -18,6 +18,7 @@ class DashboardController < ActionController::Base
      'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
      'INSTALLATION_NAME',
      'WIDGET_BRAND_URL', 'TERMS_URL',
+      'BRAND_URL', 'BRAND_NAME',
      'PRIVACY_URL',
      'DISPLAY_MANIFEST',
      'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',
@@ -4,6 +4,10 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
  wrap_parameters format: []
  before_action :process_sso_auth_token, only: [:create]

+  def new
+    redirect_to login_page_url(error: 'access-denied')
+  end
+
  def create
    # Authenticate user via the temporary sso auth token
    if params[:sso_auth_token].present? && @resource.present?
@@ -21,6 +25,12 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController

  private

+  def login_page_url(error: nil)
+    frontend_url = ENV.fetch('FRONTEND_URL', nil)
+
+    "#{frontend_url}/app/login?error=#{error}"
+  end
+
  def authenticate_resource_with_sso_token
    @token = @resource.create_token
    @resource.save!
@@ -7,7 +7,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def index
    @articles = @portal.articles
-    @articles = @articles.search(list_params) if list_params.present?
+    search_articles
    order_by_sort_param
    @articles.page(list_params[:page]) if list_params[:page].present?
  end
@@ -16,6 +16,10 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  private

+  def search_articles
+    @articles = @articles.search(list_params) if list_params.present?
+  end
+
  def order_by_sort_param
    @articles = if list_params[:sort].present? && list_params[:sort] == 'views'
                  @articles.order_by_views
@@ -51,3 +55,5 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
    ChatwootMarkdownRenderer.new(content).render_article
  end
 end
+
+Public::Api::V1::Portals::ArticlesController.prepend_mod_with('Public::Api::V1::Portals::ArticlesController')
@@ -47,7 +47,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
    @locale = if article.category.present?
                article.category.locale
              else
-                'en'
+                article.portal.default_locale
              end

    I18n.with_locale(@locale, &)
@@ -6,6 +6,12 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl

  def show; end

+  def sitemap
+    @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root
+    # if help_center_url does not contain a protocol, prepend it with https
+    @help_center_url = "https://#{@help_center_url}" unless @help_center_url.include?('://')
+  end
+
  private

  def portal
@@ -8,8 +8,7 @@ class PublicController < ActionController::Base

  def ensure_custom_domain_request
    domain = request.host
-
-    return if [URI.parse(ENV.fetch('FRONTEND_URL', '')).host, URI.parse(ENV.fetch('HELPCENTER_URL', '')).host].include?(domain)
+    return if DomainHelper.chatwoot_domain?(domain)

    @portal = ::Portal.find_by(custom_domain: domain)
    return if @portal.present?
@@ -163,10 +163,14 @@ class ConversationFinder
    params[:page] || 1
  end

-  def conversations
-    @conversations = @conversations.includes(
+  def conversations_base_query
+    @conversations.includes(
      :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
    )
+  end
+
+  def conversations
+    @conversations = conversations_base_query

    sort_by, sort_order = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['last_activity_at_desc']
    @conversations = @conversations.send(sort_by, sort_order)
@@ -178,3 +182,4 @@ class ConversationFinder
    end
  end
 end
+ConversationFinder.prepend_mod_with('ConversationFinder')
@@ -2,4 +2,11 @@ module ApplicationHelper
  def available_locales_with_name
    LANGUAGES_CONFIG.map { |_key, val| val.slice(:name, :iso_639_1_code) }
  end
+
+  def feature_help_urls
+    features = YAML.safe_load(Rails.root.join('config/features.yml').read).freeze
+    features.each_with_object({}) do |feature, hash|
+      hash[feature['name']] = feature['help_url'] if feature['help_url']
+    end
+  end
 end
@@ -0,0 +1,84 @@
+module FilterHelper
+  def build_condition_query(model_filters, query_hash, current_index)
+    current_filter = model_filters[query_hash['attribute_key']]
+
+    # Throw InvalidOperator Error if the attribute is a standard attribute
+    # and the operator is not allowed in the config
+    if current_filter.present? && current_filter['filter_operators'].exclude?(query_hash[:filter_operator])
+      raise CustomExceptions::CustomFilter::InvalidOperator.new(
+        attribute_name: query_hash['attribute_key'],
+        allowed_keys: current_filter['filter_operators']
+      )
+    end
+
+    # Every other filter expects a value to be present
+    if %w[is_present is_not_present].exclude?(query_hash[:filter_operator]) && query_hash['values'].blank?
+      raise CustomExceptions::CustomFilter::InvalidValue.new(attribute_name: query_hash['attribute_key'])
+    end
+
+    condition_query = build_condition_query_string(current_filter, query_hash, current_index)
+    # The query becomes empty only when it doesn't match to any supported
+    # standard attribute or custom attribute defined in the account.
+    if condition_query.empty?
+      raise CustomExceptions::CustomFilter::InvalidAttribute.new(key: query_hash['attribute_key'],
+                                                                 allowed_keys: model_filters.keys)
+    end
+
+    condition_query
+  end
+
+  def build_condition_query_string(current_filter, query_hash, current_index)
+    filter_operator_value = filter_operation(query_hash, current_index)
+
+    return handle_nil_filter(query_hash, current_index) if current_filter.nil?
+
+    case current_filter['attribute_type']
+    when 'additional_attributes'
+      handle_additional_attributes(query_hash, filter_operator_value, current_filter['data_type'])
+    else
+      handle_standard_attributes(current_filter, query_hash, current_index, filter_operator_value)
+    end
+  end
+
+  def handle_nil_filter(query_hash, current_index)
+    attribute_type = "#{filter_config[:entity].downcase}_attribute"
+    custom_attribute_query(query_hash, attribute_type, current_index)
+  end
+
+  def handle_additional_attributes(query_hash, filter_operator_value, data_type)
+    if data_type == 'text_case_insensitive'
+      "LOWER(#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}') " \
+        "#{filter_operator_value} #{query_hash[:query_operator]}"
+    else
+      "#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}' " \
+        "#{filter_operator_value} #{query_hash[:query_operator]} "
+    end
+  end
+
+  def handle_standard_attributes(current_filter, query_hash, current_index, filter_operator_value)
+    case current_filter['data_type']
+    when 'date'
+      date_filter(current_filter, query_hash, filter_operator_value)
+    when 'labels'
+      tag_filter_query(query_hash, current_index)
+    when 'text_case_insensitive'
+      text_case_insensitive_filter(query_hash, filter_operator_value)
+    else
+      default_filter(query_hash, filter_operator_value)
+    end
+  end
+
+  def date_filter(current_filter, query_hash, filter_operator_value)
+    "(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::#{current_filter['data_type']} " \
+      "#{filter_operator_value}#{current_filter['data_type']} #{query_hash[:query_operator]}"
+  end
+
+  def text_case_insensitive_filter(query_hash, filter_operator_value)
+    "LOWER(#{filter_config[:table_name]}.#{query_hash[:attribute_key]}) " \
+      "#{filter_operator_value} #{query_hash[:query_operator]}"
+  end
+
+  def default_filter(query_hash, filter_operator_value)
+    "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
+  end
+end
@@ -0,0 +1,78 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SLAReportsAPI extends ApiClient {
+  constructor() {
+    super('applied_slas', { accountScoped: true });
+  }
+
+  get({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+    label_list,
+    page,
+  } = {}) {
+    return axios.get(this.url, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        sla_policy_id,
+        label_list,
+        page,
+      },
+    });
+  }
+
+  download({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    sla_policy_id,
+    label_list,
+  } = {}) {
+    return axios.get(`${this.url}/download`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        team_id,
+        label_list,
+        sla_policy_id,
+      },
+    });
+  }
+
+  getMetrics({
+    from,
+    to,
+    assigned_agent_id,
+    inbox_id,
+    team_id,
+    label_list,
+    sla_policy_id,
+  } = {}) {
+    return axios.get(`${this.url}/metrics`, {
+      params: {
+        since: from,
+        until: to,
+        assigned_agent_id,
+        inbox_id,
+        label_list,
+        team_id,
+        sla_policy_id,
+      },
+    });
+  }
+}
+
+export default new SLAReportsAPI();
@@ -0,0 +1,104 @@
+import SLAReportsAPI from '../slaReports';
+import ApiClient from '../ApiClient';
+
+describe('#SLAReports API', () => {
+  it('creates correct instance', () => {
+    expect(SLAReportsAPI).toBeInstanceOf(ApiClient);
+    expect(SLAReportsAPI.apiVersion).toBe('/api/v1');
+    expect(SLAReportsAPI).toHaveProperty('get');
+    expect(SLAReportsAPI).toHaveProperty('getMetrics');
+  });
+
+  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', () => {
+      SLAReportsAPI.get({
+        page: 1,
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/applied_slas', {
+        params: {
+          page: 1,
+          since: 1622485800,
+          until: 1623695400,
+          assigned_agent_id: 1,
+          inbox_id: 1,
+          team_id: 1,
+          sla_policy_id: 1,
+          label_list: ['label1'],
+        },
+      });
+    });
+    it('#getMetrics', () => {
+      SLAReportsAPI.getMetrics({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/metrics',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+            label_list: ['label1'],
+          },
+        }
+      );
+    });
+    it('#download', () => {
+      SLAReportsAPI.download({
+        from: 1622485800,
+        to: 1623695400,
+        assigned_agent_id: 1,
+        inbox_id: 1,
+        team_id: 1,
+        sla_policy_id: 1,
+        label_list: ['label1'],
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/applied_slas/download',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            assigned_agent_id: 1,
+            inbox_id: 1,
+            team_id: 1,
+            sla_policy_id: 1,
+            label_list: ['label1'],
+          },
+        }
+      );
+    });
+  });
+});
@@ -1,6 +1,13 @@
@import '~vue2-datepicker/scss/index';

 .date-picker {
+  // To be removed one SLA reports date picker is created
+  &.small {
+    .mx-input {
+      @apply h-8 text-sm;
+    }
+  }
+
  &.no-margin {
    .mx-input {
      @apply mb-0;
@@ -1,17 +1,17 @@
 // scss-lint:disable SpaceAfterPropertyColon
-// @import 'shared/assets/fonts/inter';
-
+@import 'shared/assets/fonts/inter';
+// Inter,
 html,
 body {
  font-family:
    'PlusJakarta',
-    Inter,
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
+    Tahoma,
    Arial,
    sans-serif !important;
  -moz-osx-font-smoothing: grayscale;
@@ -40,3 +40,347 @@
 .hide {
  @apply hidden;
 }
+
+@layer base {
+  // scss-lint:disable PropertySortOrder
+  :root {
+    --color-amber-25: 254 253 251;
+    --color-amber-50: 255 249 237;
+    --color-amber-75: 255 243 208;
+    --color-amber-100: 255 236 183;
+    --color-amber-200: 255 224 161;
+    --color-amber-300: 245 208 140;
+    --color-amber-400: 228 187 120;
+    --color-amber-500: 214 163 92;
+    --color-amber-600: 214 163 92;
+    --color-amber-700: 255 186 26;
+    --color-amber-800: 145 89 48;
+    --color-amber-900: 79 52 34;
+
+    --color-ash-100: 235 235 239;
+    --color-ash-200: 228 228 233;
+    --color-ash-25: 252 252 253;
+    --color-ash-300: 221 221 227;
+    --color-ash-400: 211 212 219;
+    --color-ash-50: 249 249 251;
+    --color-ash-500: 185 187 198;
+    --color-ash-600: 139 141 152;
+    --color-ash-700: 126 128 138;
+    --color-ash-75: 242 242 245;
+    --color-ash-800: 96 100 108;
+    --color-ash-900: 28 32 36;
+
+    --color-primary-25: 251 253 255;
+    --color-primary-50: 245 249 255;
+    --color-primary-75: 233 243 255;
+    --color-primary-100: 218 236 255;
+    --color-primary-200: 201 226 255;
+    --color-primary-300: 181 213 255;
+    --color-primary-400: 155 195 252;
+    --color-primary-500: 117 171 247;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 16 115 233;
+    --color-primary-800: 8 109 224;
+    --color-primary-900: 11 50 101;
+
+    --color-ruby-100: 255 220 225;
+    --color-ruby-200: 255 206 214;
+    --color-ruby-25: 255 252 253;
+    --color-ruby-300: 248 191 200;
+    --color-ruby-400: 239 172 184;
+    --color-ruby-50: 255 247 248;
+    --color-ruby-500: 229 146 163;
+    --color-ruby-600: 229 70 102;
+    --color-ruby-700: 220 59 93;
+    --color-ruby-75: 254 234 237;
+    --color-ruby-800: 202 36 77;
+    --color-ruby-900: 100 23 43;
+
+    --color-teal-100: 224 248 243;
+    --color-teal-200: 204 243 234;
+    --color-teal-25: 250 254 253;
+    --color-teal-300: 184 234 224;
+    --color-teal-400: 161 222 210;
+    --color-teal-50: 243 251 249;
+    --color-teal-500: 83 185 171;
+    --color-teal-600: 18 165 148;
+    --color-teal-700: 13 155 138;
+    --color-teal-75: 236 249 255;
+    --color-teal-800: 0 133 115;
+    --color-teal-900: 13 61 56;
+
+    --color-green-25: 251 254 252;
+    --color-green-50: 244 251 246;
+    --color-green-75: 230 246 235;
+    --color-green-100: 214 241 223;
+    --color-green-200: 196 232 209;
+    --color-green-300: 173 221 192;
+    --color-green-400: 142 206 170;
+    --color-green-500: 91 185 139;
+    --color-green-600: 48 164 108;
+    --color-green-700: 43 154 102;
+    --color-green-800: 33 131 88;
+    --color-green-900: 25 59 45;
+
+    --color-mint-25: 249 254 253;
+    --color-mint-50: 242 251 249;
+    --color-mint-75: 221 249 242;
+    --color-mint-100: 200 244 233;
+    --color-mint-200: 179 236 222;
+    --color-mint-300: 156 224 208;
+    --color-mint-400: 126 207 189;
+    --color-mint-500: 76 187 165;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 125 224 203;
+    --color-mint-800: 2 120 100;
+    --color-mint-900: 22 67 60;
+
+    --color-sky-25: 249 254 255;
+    --color-sky-50: 241 250 253;
+    --color-sky-75: 225 246 253;
+    --color-sky-100: 209 240 250;
+    --color-sky-200: 190 231 245;
+    --color-sky-300: 169 218 237;
+    --color-sky-400: 141 202 227;
+    --color-sky-500: 96 179 215;
+    --color-sky-600: 124 226 254;
+    --color-sky-700: 116 218 248;
+    --color-sky-800: 0 116 158;
+    --color-sky-900: 29 62 86;
+
+    --color-indigo-25: 253 253 254;
+    --color-indigo-50: 247 249 255;
+    --color-indigo-75: 237 242 254;
+    --color-indigo-100: 225 233 255;
+    --color-indigo-200: 210 222 255;
+    --color-indigo-300: 193 208 255;
+    --color-indigo-400: 171 189 249;
+    --color-indigo-500: 141 164 239;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 51 88 212;
+    --color-indigo-800: 58 91 199;
+    --color-indigo-900: 31 45 92;
+
+    --color-iris-25: 253 253 255;
+    --color-iris-50: 248 248 255;
+    --color-iris-75: 240 241 254;
+    --color-iris-100: 230 231 255;
+    --color-iris-200: 218 220 255;
+    --color-iris-300: 203 205 255;
+    --color-iris-400: 184 186 248;
+    --color-iris-500: 155 158 240;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 81 81 205;
+    --color-iris-800: 87 83 198;
+    --color-iris-900: 39 41 98;
+
+    --color-violet-25: 253 252 254;
+    --color-violet-50: 250 248 255;
+    --color-violet-75: 244 240 254;
+    --color-violet-100: 235 228 255;
+    --color-violet-200: 225 217 255;
+    --color-violet-300: 212 202 254;
+    --color-violet-400: 194 181 245;
+    --color-violet-500: 170 153 236;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 101 77 196;
+    --color-violet-800: 101 80 185;
+    --color-violet-900: 47 38 95;
+
+    --color-pink-25: 255 252 254;
+    --color-pink-50: 254 247 251;
+    --color-pink-75: 254 233 245;
+    --color-pink-100: 251 220 239;
+    --color-pink-200: 246 206 231;
+    --color-pink-300: 239 191 221;
+    --color-pink-400: 231 172 208;
+    --color-pink-500: 221 147 194;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 207 56 151;
+    --color-pink-800: 194 41 138;
+    --color-pink-900: 101 18 73;
+
+    --color-orange-25: 254 252 251;
+    --color-orange-50: 255 247 237;
+    --color-orange-75: 255 239 214;
+    --color-orange-100: 255 223 181;
+    --color-orange-200: 255 209 154;
+    --color-orange-300: 255 193 130;
+    --color-orange-400: 245 174 115;
+    --color-orange-500: 236 148 85;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 239 95 0;
+    --color-orange-800: 204 78 0;
+    --color-orange-900: 88 45 29;
+  }
+  // scss-lint:disable QualifyingElement
+  body.dark {
+    --color-amber-25: 31 19 0;
+    --color-amber-50: 37 24 4;
+    --color-amber-75: 48 32 11;
+    --color-amber-100: 57 39 15;
+    --color-amber-200: 67 46 18;
+    --color-amber-300: 83 57 22;
+    --color-amber-400: 111 77 29;
+    --color-amber-500: 169 118 42;
+    --color-amber-600: 169 118 42;
+    --color-amber-700: 255 203 71;
+    --color-amber-800: 255 204 77;
+    --color-amber-900: 255 231 179;
+
+    --color-ash-100: 46 48 53;
+    --color-ash-200: 53 55 60;
+    --color-ash-25: 24 24 26;
+    --color-ash-300: 60 63 68;
+    --color-ash-400: 70 75 80;
+    --color-ash-50: 27 27 31;
+    --color-ash-500: 90 97 101;
+    --color-ash-600: 105 110 119;
+    --color-ash-700: 120 127 133;
+    --color-ash-75: 39 40 45;
+    --color-ash-800: 173 177 184;
+    --color-ash-900: 237 238 240;
+
+    --color-primary-25: 10 17 28;
+    --color-primary-50: 15 24 38;
+    --color-primary-75: 15 39 72;
+    --color-primary-100: 10 49 99;
+    --color-primary-200: 18 61 117;
+    --color-primary-300: 29 74 134;
+    --color-primary-400: 40 89 156;
+    --color-primary-500: 48 106 186;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 21 116 231;
+    --color-primary-800: 126 182 255;
+    --color-primary-900: 205 227 255;
+
+    --color-ruby-100: 78 19 37;
+    --color-ruby-200: 94 26 46;
+    --color-ruby-25: 25 17 19;
+    --color-ruby-300: 111 37 57;
+    --color-ruby-400: 136 52 71;
+    --color-ruby-50: 30 21 23;
+    --color-ruby-500: 179 68 90;
+    --color-ruby-600: 229 70 102;
+    --color-ruby-700: 236 90 114;
+    --color-ruby-75: 58 20 30;
+    --color-ruby-800: 255 148 157;
+    --color-ruby-900: 254 210 225;
+
+    --color-teal-100: 2 59 55;
+    --color-teal-200: 8 72 67;
+    --color-teal-25: 13 21 20;
+    --color-teal-300: 28 105 97;
+    --color-teal-400: 28 105 97;
+    --color-teal-50: 17 28 27;
+    --color-teal-500: 32 126 115;
+    --color-teal-600: 41 163 131;
+    --color-teal-700: 14 179 158;
+    --color-teal-75: 13 45 42;
+    --color-teal-800: 11 216 182;
+    --color-teal-900: 173 240 221;
+
+    --color-green-25: 14 21 18;
+    --color-green-50: 18 27 23;
+    --color-green-75: 19 45 33;
+    --color-green-100: 17 59 41;
+    --color-green-200: 23 73 51;
+    --color-green-300: 32 87 62;
+    --color-green-400: 40 104 74;
+    --color-green-500: 47 124 87;
+    --color-green-600: 48 164 108;
+    --color-green-700: 51 176 116;
+    --color-green-800: 61 214 140;
+    --color-green-900: 177 241 203;
+
+    --color-mint-25: 14 21 21;
+    --color-mint-50: 15 27 27;
+    --color-mint-75: 9 44 43;
+    --color-mint-100: 0 58 56;
+    --color-mint-200: 0 71 68;
+    --color-mint-300: 16 86 80;
+    --color-mint-400: 30 104 95;
+    --color-mint-500: 39 127 112;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 168 245 229;
+    --color-mint-800: 88 213 186;
+    --color-mint-900: 196 245 225;
+
+    --color-sky-25: 14 21 21;
+    --color-sky-50: 15 27 27;
+    --color-sky-75: 9 44 43;
+    --color-sky-100: 0 58 56;
+    --color-sky-200: 0 71 68;
+    --color-sky-300: 16 86 80;
+    --color-sky-400: 30 104 95;
+    --color-sky-500: 39 127 112;
+    --color-sky-600: 134 234 212;
+    --color-sky-700: 168 245 229;
+    --color-sky-800: 88 213 186;
+    --color-sky-900: 196 245 225;
+
+    --color-indigo-25: 17 19 31;
+    --color-indigo-50: 20 23 38;
+    --color-indigo-75: 24 36 73;
+    --color-indigo-100: 29 46 98;
+    --color-indigo-200: 37 57 116;
+    --color-indigo-300: 48 67 132;
+    --color-indigo-400: 58 79 151;
+    --color-indigo-500: 67 93 177;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 84 114 228;
+    --color-indigo-800: 158 177 255;
+    --color-indigo-900: 214 225 255;
+
+    --color-iris-25: 19 19 30;
+    --color-iris-50: 23 22 37;
+    --color-iris-75: 32 34 72;
+    --color-iris-100: 38 42 101;
+    --color-iris-200: 48 51 116;
+    --color-iris-300: 61 62 130;
+    --color-iris-400: 74 74 149;
+    --color-iris-500: 89 88 177;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 110 106 222;
+    --color-iris-800: 177 169 255;
+    --color-iris-900: 224 223 254;
+
+    --color-violet-25: 20 18 31;
+    --color-violet-50: 27 21 37;
+    --color-violet-75: 41 31 67;
+    --color-violet-100: 51 37 91;
+    --color-violet-200: 60 46 105;
+    --color-violet-300: 71 56 118;
+    --color-violet-400: 86 70 139;
+    --color-violet-500: 105 88 173;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 125 102 217;
+    --color-violet-800: 186 167 255;
+    --color-violet-900: 226 221 254;
+
+    --color-pink-25: 25 17 23;
+    --color-pink-50: 33 18 29;
+    --color-pink-75: 55 23 47;
+    --color-pink-100: 75 20 61;
+    --color-pink-200: 89 28 71;
+    --color-pink-300: 105 41 85;
+    --color-pink-400: 131 56 105;
+    --color-pink-500: 168 72 133;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 222 81 168;
+    --color-pink-800: 255 141 204;
+    --color-pink-900: 253 209 234;
+    --color-orange-25: 23 18 14;
+    --color-orange-50: 30 22 15;
+    --color-orange-75: 51 30 11;
+    --color-orange-100: 70 33 0;
+    --color-orange-200: 86 40 0;
+    --color-orange-300: 102 53 12;
+    --color-orange-400: 126 69 29;
+    --color-orange-500: 163 88 41;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 255 128 31;
+    --color-orange-800: 255 160 87;
+    --color-orange-900: 255 224 194;
+  }
+}
@@ -153,6 +153,29 @@
 }

 .multiselect-wrap--small {
+  // To be removed one SLA reports date picker is created
+  &.tiny {
+    .multiselect.no-margin {
+      @apply min-h-[32px];
+    }
+
+    .multiselect__select {
+      @apply min-h-[32px] h-8;
+
+      &::before {
+        @apply top-[60%];
+      }
+    }
+
+    .multiselect__tags {
+      @apply min-h-[32px] max-h-[32px];
+
+      .multiselect__single {
+        @apply pt-1 pb-1;
+      }
+    }
+  }
+
  .multiselect__tags,
  .multiselect__input,
  .multiselect {
@@ -63,12 +63,12 @@ input:focus {
 }

 // Inputs
-input[type='text'],
-input[type='number'],
-input[type='password'],
-input[type='date'],
-input[type='email'],
-input[type='url'] {
+input[type='text']:not(.reset-base),
+input[type='number']:not(.reset-base),
+input[type='password']:not(.reset-base),
+input[type='date']:not(.reset-base),
+input[type='email']:not(.reset-base),
+input[type='url']:not(.reset-base) {
  @apply block box-border w-full transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] h-10 appearance-none mx-0 mt-0 mb-4 p-2 rounded-md text-base font-normal bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;

  &[disabled] {
@@ -118,7 +118,7 @@ button {
    @apply border border-woot-500 bg-transparent dark:bg-transparent 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;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
@@ -1,14 +1,14 @@
 <template>
  <div
-    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
-    :class="{
-      hide: !showConversationList,
-      'list--full-width': isOnExpandedLayout,
-    }"
+    class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    :class="[
+      { hidden: !showConversationList },
+      isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp',
+    ]"
  >
    <slot />
    <div
-      class="flex items-center justify-between py-0 px-4"
+      class="flex items-center justify-between px-4 py-0"
      :class="{
        'pb-3 border-b border-slate-75 dark:border-slate-700':
          hasAppliedFiltersOrActiveFolders,
@@ -16,7 +16,7 @@
    >
      <div class="flex max-w-[85%] justify-center items-center">
        <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap font-medium text-ellipsis text-black-900 dark:text-slate-100 mb-0"
+          class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100"
          :title="pageTitle"
        >
          {{ pageTitle }}
@@ -107,7 +107,7 @@

    <p
      v-if="!chatListLoading && !conversationList.length"
-      class="overflow-auto p-4 flex justify-center items-center"
+      class="flex items-center justify-center p-4 overflow-auto"
    >
      {{ $t('CHAT_LIST.LIST.404') }}
    </p>
@@ -127,7 +127,7 @@
    />
    <div
      ref="conversationList"
-      class="conversations-list flex-1"
+      class="flex-1 conversations-list"
      :class="{ 'overflow-hidden': isContextMenuOpen }"
    >
      <virtual-list
@@ -136,16 +136,16 @@
        :data-sources="conversationList"
        :data-component="itemComponent"
        :extra-props="virtualListExtraProps"
-        class="w-full overflow-auto h-full"
+        class="w-full h-full overflow-auto"
        footer-tag="div"
      >
        <template #footer>
          <div v-if="chatListLoading" class="text-center">
-            <span class="spinner mt-4 mb-4" />
+            <span class="mt-4 mb-4 spinner" />
          </div>
          <p
            v-if="showEndOfListMessage"
-            class="text-center text-slate-400 dark:text-slate-300 p-4"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
          >
            {{ $t('CHAT_LIST.EOF') }}
          </p>
@@ -185,7 +185,7 @@ import ConversationBasicFilter from './widgets/conversation/ConversationBasicFil
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
 import timeMixin from '../mixins/time';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
@@ -199,11 +199,6 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
 import countries from 'shared/constants/countries';
 import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-
-import {
-  hasPressedAltAndJKey,
-  hasPressedAltAndKKey,
-} from 'shared/helpers/KeyboardHelpers';
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
  isOnMentionsView,
@@ -228,7 +223,7 @@ export default {
  mixins: [
    timeMixin,
    conversationMixin,
-    eventListenerMixins,
+    keyboardEventListenerMixins,
    alertMixin,
    filterMixin,
    uiSettingsMixin,
@@ -691,30 +686,40 @@ export default {
        lastConversationIndex,
      };
    },
-    handleKeyEvents(e) {
-      if (hasPressedAltAndJKey(e)) {
-        const { allConversations, activeConversationIndex } =
-          this.getKeyboardListenerParams();
-        if (activeConversationIndex === -1) {
-          allConversations[0].click();
-        }
-        if (activeConversationIndex >= 1) {
-          allConversations[activeConversationIndex - 1].click();
-        }
+    handlePreviousConversation() {
+      const { allConversations, activeConversationIndex } =
+        this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
      }
-      if (hasPressedAltAndKKey(e)) {
-        const {
-          allConversations,
-          activeConversationIndex,
-          lastConversationIndex,
-        } = this.getKeyboardListenerParams();
-        if (activeConversationIndex === -1) {
-          allConversations[lastConversationIndex].click();
-        } else if (activeConversationIndex < lastConversationIndex) {
-          allConversations[activeConversationIndex + 1].click();
-        }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
      }
    },
+    handleNextConversation() {
+      const {
+        allConversations,
+        activeConversationIndex,
+        lastConversationIndex,
+      } = this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
+      }
+    },
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyJ': {
+          action: () => this.handlePreviousConversation(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyK': {
+          action: () => this.handleNextConversation(),
+          allowOnFocusedInput: true,
+        },
+      };
+    },
    resetAndFetchData() {
      this.appliedFilter = [];
      this.resetBulkActions();
@@ -1034,24 +1039,10 @@ export default {
 </style>

 <style scoped lang="scss">
-.conversations-list-wrap {
-  &.hide {
-    @apply hidden;
-  }
-
-  &.list--full-width {
-    @apply basis-full;
-  }
-}
-
 .conversations-list {
  @apply overflow-hidden hover:overflow-y-auto;
 }

-.load-more--button {
-  @apply text-center rounded-none;
-}
-
 .tab--chat-type {
  @apply py-0 px-4;

@@ -2,23 +2,27 @@
  <div class="py-3 px-4">
    <div class="flex items-center mb-1">
      <h4 class="text-sm flex items-center m-0 w-full error">
-        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
+        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
          <input
            v-model="editedValue"
-            class="checkbox"
+            class="!my-0 mr-2 ml-0"
            type="checkbox"
            @change="onUpdate"
          />
        </div>
        <div class="flex items-center justify-between w-full">
          <span
-            class="attribute-name w-full text-slate-800 dark:text-slate-100 font-medium text-sm mb-0"
-            :class="{ error: $v.editedValue.$error }"
+            class="w-full font-medium text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
          >
            {{ label }}
          </span>
          <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
            variant="link"
            size="medium"
@@ -31,7 +35,7 @@
      </h4>
    </div>
    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-show="isEditing">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
        <div class="mb-2 w-full flex items-center">
          <input
            ref="inputfield"
@@ -61,7 +65,7 @@
      </div>
      <div
        v-show="!isEditing"
-        class="value--view"
+        class="flex group"
        :class="{ 'is-editable': showActions }"
      >
        <a
@@ -69,35 +73,35 @@
          :href="hrefURL"
          target="_blank"
          rel="noopener noreferrer"
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
        >
          {{ urlValue }}
        </a>
        <p
          v-else
-          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
+          class="group-hover:bg-slate-50 group-hover:dark:bg-slate-700 inline-block rounded-sm mb-0 break-all py-0.5 px-1"
        >
          {{ displayValue || '---' }}
        </p>
        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
          <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
            variant="link"
            size="small"
            color-scheme="secondary"
            icon="clipboard"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
            @click="onCopy"
          />
          <woot-button
-            v-if="showActions"
+            v-if="showEditButton"
            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
            variant="link"
            size="small"
            color-scheme="secondary"
            icon="edit"
-            class-names="edit-button"
+            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
            @click="onEdit"
          />
        </div>
@@ -126,6 +130,7 @@
 </template>

 <script>
+import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -138,7 +143,7 @@ export default {
  components: {
    MultiselectDropdown,
  },
-  mixins: [customAttributeMixin],
+  mixins: [customAttributeMixin, clickaway],
  props: {
    label: { type: String, required: true },
    values: { type: Array, default: () => [] },
@@ -160,11 +165,18 @@ export default {
      editedValue: null,
    };
  },
-
  computed: {
+    showCopyAndDeleteButton() {
+      return this.value && this.showActions;
+    },
+    showEditButton() {
+      return !this.value && this.showActions;
+    },
    displayValue() {
      if (this.isAttributeTypeDate) {
-        return new Date(this.value || new Date()).toLocaleDateString();
+        return this.value
+          ? new Date(this.value || new Date()).toLocaleDateString()
+          : '';
      }
      if (this.isAttributeTypeCheckbox) {
        return this.value === 'false' ? false : this.value;
@@ -230,6 +242,10 @@ export default {
      this.isEditing = false;
      this.editedValue = this.formattedValue;
    },
+    contactId() {
+      // Fix to solve validation not resetting when contactId changes in contact page
+      this.$v.$reset();
+    },
  },

  validations() {
@@ -268,6 +284,10 @@ export default {
        this.$refs.inputfield.focus();
      }
    },
+    onClickAway() {
+      this.$v.$reset();
+      this.isEditing = false;
+    },
    onEdit() {
      this.isEditing = true;
      this.$nextTick(() => {
@@ -294,6 +314,7 @@ export default {
    },
    onDelete() {
      this.isEditing = false;
+      this.$v.$reset();
      this.$emit('delete', this.attributeKey);
    },
    onCopy() {
@@ -304,35 +325,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.checkbox-wrap {
-  @apply flex items-center;
-}
-.checkbox {
-  @apply my-0 mr-2 ml-0;
-}
-.attribute-name {
-  &.error {
-    @apply text-red-400 dark:text-red-500;
-  }
-}
-
-.edit-button {
-  @apply hidden;
-}
-
-.value--view {
-  @apply flex;
-
-  &.is-editable:hover {
-    .value {
-      @apply bg-slate-50 dark:bg-slate-700 mb-0;
-    }
-    .edit-button {
-      @apply block;
-    }
-  }
-}
-
 ::v-deep {
  .selector-wrap {
    @apply m-0 top-1;
@@ -7,7 +7,13 @@
      @mousedown="handleMouseDown"
    >
      <div
-        :class="modalContainerClassName"
+        :class="{
+          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
+          'rounded-xl w-[37.5rem]': !fullWidth,
+          'items-center rounded-none flex h-full justify-center w-full':
+            fullWidth,
+          [size]: true,
+        }"
        @mouse.stop
        @mousedown="event => event.stopPropagation()"
      >
@@ -16,7 +22,7 @@
          color-scheme="secondary"
          icon="dismiss"
          variant="clear"
-          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
          @click="close"
        />
        <slot />
@@ -60,15 +66,6 @@ export default {
    };
  },
  computed: {
-    modalContainerClassName() {
-      let className =
-        'modal-container rtl:text-right shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem] bg-white dark:bg-slate-800 skip-context-menu';
-      if (this.fullWidth) {
-        return `${className} items-center rounded-none flex h-full justify-center w-full`;
-      }
-
-      return `${className} ${this.size}`;
-    },
    modalClassName() {
      const modalClassNameMap = {
        centered: '',
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start pt-8 px-8 pb-0">
+  <div class="flex flex-col items-start px-8 pt-8 pb-0">
    <img v-if="headerImage" :src="headerImage" alt="No image" />
    <h2
      ref="modalHeaderTitle"
-      class="text-slate-800 text-lg font-semibold dark:text-slate-50"
+      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
    >
      {{ headerTitle }}
    </h2>
    <p
      v-if="headerContent"
      ref="modalHeaderContent"
-      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
+      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
    >
      {{ headerContent }}
      <span
        v-if="headerContentValue"
-        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
+        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
      >
        {{ headerContentValue }}
      </span>
@@ -91,12 +91,7 @@ import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedAltAndEKey,
-  hasPressedCommandPlusAltAndEKey,
-  hasPressedAltAndMKey,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -114,7 +109,7 @@ export default {
    WootDropdownMenu,
    CustomSnoozeModal,
  },
-  mixins: [clickaway, alertMixin, eventListenerMixins],
+  mixins: [clickaway, alertMixin, keyboardEventListenerMixins],
  props: { conversationId: { type: [String, Number], required: true } },
  data() {
    return {
@@ -159,37 +154,52 @@ export default {
    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  methods: {
-    async handleKeyEvents(e) {
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyM': {
+          action: () => this.$refs.arrowDownButton?.$el.click(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyE': this.resolveOrToast,
+        '$mod+Alt+KeyE': async event => {
+          const { all, activeIndex, lastIndex } = this.getConversationParams();
+          await this.resolveOrToast();
+
+          if (activeIndex < lastIndex) {
+            all[activeIndex + 1].click();
+          } else if (all.length > 1) {
+            all[0].click();
+            document.querySelector('.conversations-list').scrollTop = 0;
+          }
+
+          event.preventDefault();
+        },
+      };
+    },
+    getConversationParams() {
      const allConversations = document.querySelectorAll(
        '.conversations-list .conversation'
      );
-      if (hasPressedAltAndMKey(e)) {
-        if (this.$refs.arrowDownButton) {
-          this.$refs.arrowDownButton.$el.click();
-        }
-      }
-      if (hasPressedAltAndEKey(e)) {
-        const activeConversation = document.querySelector(
-          'div.conversations-list div.conversation.active'
-        );
-        const activeConversationIndex = [...allConversations].indexOf(
-          activeConversation
-        );
-        const lastConversationIndex = allConversations.length - 1;
-        try {
-          await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-        } catch (error) {
-          // error
-        }
-        if (hasPressedCommandPlusAltAndEKey(e)) {
-          if (activeConversationIndex < lastConversationIndex) {
-            allConversations[activeConversationIndex + 1].click();
-          } else if (allConversations.length > 1) {
-            allConversations[0].click();
-            document.querySelector('.conversations-list').scrollTop = 0;
-          }
-          e.preventDefault();
-        }
+
+      const activeConversation = document.querySelector(
+        'div.conversations-list div.conversation.active'
+      );
+      const activeConversationIndex = [...allConversations].indexOf(
+        activeConversation
+      );
+      const lastConversationIndex = allConversations.length - 1;
+
+      return {
+        all: allConversations,
+        activeIndex: activeConversationIndex,
+        lastIndex: lastConversationIndex,
+      };
+    },
+    async resolveOrToast() {
+      try {
+        await this.toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
+      } catch (error) {
+        // error
      }
    },
    onCmdSnoozeConversation(snoozeType) {
@@ -1,5 +1,5 @@
 <template>
-  <aside class="h-full flex">
+  <aside class="flex h-full">
    <primary-sidebar
      :logo-source="globalConfig.logoThumbnail"
      :installation-name="globalConfig.installationName"
@@ -36,15 +36,7 @@ import alertMixin from 'shared/mixins/alertMixin';

 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import {
-  hasPressedAltAndCKey,
-  hasPressedAltAndRKey,
-  hasPressedAltAndSKey,
-  hasPressedAltAndVKey,
-  hasPressedCommandAndForwardSlash,
-  isEscape,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import router from '../../routes';

 export default {
@@ -52,7 +44,7 @@ export default {
    PrimarySidebar,
    SecondarySidebar,
  },
-  mixins: [adminMixin, alertMixin, eventListenerMixins],
+  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
  props: {
    showSecondarySidebar: {
      type: Boolean,
@@ -173,30 +165,27 @@ export default {
    closeKeyShortcutModal() {
      this.$emit('close-key-shortcut-modal');
    },
-    handleKeyEvents(e) {
-      if (hasPressedCommandAndForwardSlash(e)) {
-        this.toggleKeyShortcutModal();
-      }
-      if (isEscape(e)) {
-        this.closeKeyShortcutModal();
-      }
-
-      if (hasPressedAltAndCKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('home')) {
-          router.push({ name: 'home' });
-        }
-      } else if (hasPressedAltAndVKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('contacts_dashboard')) {
-          router.push({ name: 'contacts_dashboard' });
-        }
-      } else if (hasPressedAltAndRKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('settings_account_reports')) {
-          router.push({ name: 'settings_account_reports' });
-        }
-      } else if (hasPressedAltAndSKey(e)) {
-        if (!this.isCurrentRouteSameAsNavigation('agent_list')) {
-          router.push({ name: 'agent_list' });
-        }
+    getKeyboardEvents() {
+      return {
+        '$mod+Slash': this.toggleKeyShortcutModal,
+        '$mod+Escape': this.closeKeyShortcutModal,
+        'Alt+KeyC': {
+          action: () => this.navigateToRoute('home'),
+        },
+        'Alt+KeyV': {
+          action: () => this.navigateToRoute('contacts_dashboard'),
+        },
+        'Alt+KeyR': {
+          action: () => this.navigateToRoute('account_overview_reports'),
+        },
+        'Alt+KeyS': {
+          action: () => this.navigateToRoute('agent_list'),
+        },
+      };
+    },
+    navigateToRoute(routeName) {
+      if (!this.isCurrentRouteSameAsNavigation(routeName)) {
+        router.push({ name: routeName });
      }
    },
    isCurrentRouteSameAsNavigation(routeName) {
@@ -12,6 +12,7 @@ const reports = accountId => ({
    'label_reports',
    'inbox_reports',
    'team_reports',
+    'sla_reports',
  ],
  menuItems: [
    {
@@ -71,6 +72,14 @@ const reports = accountId => ({
      toState: frontendURL(`accounts/${accountId}/reports/teams`),
      toStateName: 'team_reports',
    },
+    {
+      icon: 'document-list-clock',
+      label: 'REPORTS_SLA',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.SLA,
+      toState: frontendURL(`accounts/${accountId}/reports/sla`),
+      toStateName: 'sla_reports',
+    },
  ],
 });

@@ -142,20 +142,13 @@ const settings = accountId => ({
      toStateName: 'settings_applications',
      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
    },
-    {
-      icon: 'credit-card-person',
-      label: 'BILLING',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/billing`),
-      toStateName: 'billing_settings_index',
-      showOnlyOnCloud: true,
-    },
    {
      icon: 'key',
      label: 'AUDIT_LOGS',
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
      toStateName: 'auditlogs_list',
+      isEnterpriseOnly: true,
      featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
      beta: true,
    },
@@ -165,9 +158,18 @@ const settings = accountId => ({
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
      toStateName: 'sla_list',
+      isEnterpriseOnly: true,
      featureFlag: FEATURE_FLAGS.SLA,
      beta: true,
    },
+    {
+      icon: 'credit-card-person',
+      label: 'BILLING',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/settings/billing`),
+      toStateName: 'billing_settings_index',
+      showOnlyOnCloud: true,
+    },
  ],
 });

@@ -2,7 +2,7 @@
  <li v-show="isMenuItemVisible" class="mt-1">
    <div v-if="hasSubMenu" class="flex justify-between">
      <span
-        class="text-sm text-slate-700 dark:text-slate-200 font-semibold my-2 px-2 pt-1"
+        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
      >
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
@@ -19,7 +19,7 @@
    </div>
    <router-link
      v-else
-      class="rounded-lg leading-4 font-medium flex items-center p-2 m-0 text-sm text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
+      class="flex items-center p-2 m-0 text-sm font-medium leading-4 rounded-lg text-slate-700 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-800"
      :class="computedClass"
      :to="menuItem && menuItem.toState"
    >
@@ -31,7 +31,7 @@
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
      <span
        v-if="showChildCount(menuItem.count)"
-        class="rounded-md text-xxs font-medium mx-1 py-0 px-1"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
        :class="{
          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
@@ -46,13 +46,13 @@
        v-if="menuItem.beta"
        data-view-component="true"
        label="Beta"
-        class="px-1 mx-1 inline-block font-medium leading-4 border border-green-400 text-green-500 rounded-lg text-xxs"
+        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
      >
        {{ $t('SIDEBAR.BETA') }}
      </span>
    </router-link>

-    <ul v-if="hasSubMenu" class="list-none ml-0 mb-0">
+    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
      <secondary-child-nav-item
        v-for="child in menuItem.children"
        :key="child.id"
@@ -94,6 +94,7 @@
 import { mapGetters } from 'vuex';

 import adminMixin from '../../../mixins/isAdmin';
+import configMixin from 'shared/mixins/configMixin';
 import {
  getInboxClassByType,
  getInboxWarningIconClass,
@@ -107,7 +108,7 @@ import {

 export default {
  components: { SecondaryChildNavItem },
-  mixins: [adminMixin],
+  mixins: [adminMixin, configMixin],
  props: {
    menuItem: {
      type: Object,
@@ -132,15 +133,33 @@ export default {
    },
    isMenuItemVisible() {
      if (this.menuItem.globalConfigFlag) {
+        // this checks for the `csmlEditorHost` flag in the global config
+        // if this is present, we toggle the CSML editor menu item
+        // TODO: This is very specific, and can be handled better, fix it
        return !!this.globalConfig[this.menuItem.globalConfigFlag];
      }
+
+      let isFeatureEnabled = true;
+      if (this.menuItem.featureFlag) {
+        isFeatureEnabled = this.isFeatureEnabledonAccount(
+          this.accountId,
+          this.menuItem.featureFlag
+        );
+      }
+
+      if (this.menuItem.isEnterpriseOnly) {
+        if (!this.isEnterprise) return false;
+        return isFeatureEnabled || this.globalConfig.displayManifest;
+      }
+
      if (this.menuItem.featureFlag) {
        return this.isFeatureEnabledonAccount(
          this.accountId,
          this.menuItem.featureFlag
        );
      }
-      return true;
+
+      return isFeatureEnabled;
    },
    isAllConversations() {
      return (
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="ltr:mr-1 rtl:ml-1 mb-1"
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
    :class="labelClass"
    :style="labelStyle"
    :title="description"
@@ -111,7 +111,7 @@ export default {

 <style scoped lang="scss">
 .label {
-  @apply inline-flex items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;
+  @apply items-center font-medium text-xs rounded-[4px] gap-1 p-1 bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100 border border-solid border-slate-75 dark:border-slate-600 h-6;

  &.small {
    @apply text-xs py-0.5 px-1 leading-tight h-5;
@@ -40,8 +40,7 @@ import AIAssistanceModal from './AIAssistanceModal.vue';
 import adminMixin from 'dashboard/mixins/aiMixin';
 import aiMixin from 'dashboard/mixins/isAdmin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';

@@ -51,7 +50,7 @@ export default {
    AICTAModal,
    AIAssistanceCTAButton,
  },
-  mixins: [aiMixin, eventListenerMixins, adminMixin, uiSettingsMixin],
+  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
  data: () => ({
    showAIAssistanceModal: false,
    showAICtaModal: false,
@@ -87,14 +86,17 @@ export default {
  },

  methods: {
-    onKeyDownHandler(event) {
-      const keyPattern = buildHotKeys(event);
-      const shouldRevertTheContent =
-        ['meta+z', 'ctrl+z'].includes(keyPattern) && !!this.initialMessage;
-      if (shouldRevertTheContent) {
-        this.$emit('replace-text', this.initialMessage);
-        this.initialMessage = '';
-      }
+    getKeyboardEvents() {
+      return {
+        '$mod+KeyZ': {
+          action: () => {
+            if (this.initialMessage) {
+              this.$emit('replace-text', this.initialMessage);
+              this.initialMessage = '';
+            }
+          },
+        },
+      };
    },
    hideAIAssistanceModal() {
      this.recordAnalytics('DISMISS_AI_SUGGESTION', {
@@ -1,17 +1,17 @@
 <template>
-  <div class="preview-item__wrap flex overflow-auto max-h-[12.5rem]">
+  <div class="flex overflow-auto max-h-[12.5rem]">
    <div
-      v-for="(attachment, index) in attachments"
+      v-for="(attachment, index) in nonRecordedAudioAttachments"
      :key="attachment.id"
      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
          v-if="isTypeImage(attachment.resource)"
-          class="image-thumb"
+          class="object-cover w-6 h-6 rounded-sm"
          :src="attachment.thumb"
        />
-        <span v-else class="w-6 h-6 text-lg relative -top-px text-left">
+        <span v-else class="relative w-6 h-6 text-lg text-left -top-px">
          📄
        </span>
      </div>
@@ -23,73 +23,62 @@
        </span>
      </div>
      <div class="w-[30%] justify-center">
-        <span
-          class="item overflow-hidden text-xs text-ellipsis whitespace-nowrap"
-        >
+        <span class="overflow-hidden text-xs text-ellipsis whitespace-nowrap">
          {{ formatFileSize(attachment.resource) }}
        </span>
      </div>
      <div class="flex items-center justify-center">
        <woot-button
-          v-if="!isTypeAudio(attachment.resource)"
-          class="remove--attachment clear secondary"
+          class="!w-6 !h-6 text-sm rounded-md hover:bg-slate-50 dark:hover:bg-slate-800 clear secondary"
          icon="dismiss"
-          @click="() => onRemoveAttachment(index)"
+          @click="onRemoveAttachment(index)"
        />
      </div>
    </div>
  </div>
 </template>
-<script>
+
+<script setup>
+import { computed } from 'vue';
 import { formatBytes } from 'shared/helpers/FileHelper';
-export default {
-  props: {
-    attachments: {
-      type: Array,
-      default: () => [],
-    },
-    removeAttachment: {
-      type: Function,
-      default: () => {},
-    },
-  },
-  methods: {
-    onRemoveAttachment(index) {
-      this.removeAttachment(index);
-    },
-    formatFileSize(file) {
-      const size = file.byte_size || file.size;
-      return formatBytes(size, 0);
-    },
-    isTypeImage(file) {
-      const type = file.content_type || file.type;
-      return type.includes('image');
-    },
-    isTypeAudio(file) {
-      const type = file.content_type || file.type;
-      return type.includes('audio');
-    },
-    fileName(file) {
-      return file.filename || file.name;
-    },
+
+const props = defineProps({
+  attachments: {
+    type: Array,
+    default: () => [],
  },
+});
+
+const emits = defineEmits(['remove-attachment']);
+
+const nonRecordedAudioAttachments = computed(() => {
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
+});
+
+const recordedAudioAttachments = computed(() =>
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
+);
+
+const onRemoveAttachment = itemIndex => {
+  emits(
+    'remove-attachment',
+    nonRecordedAudioAttachments.value
+      .filter((_, index) => index !== itemIndex)
+      .concat(recordedAudioAttachments.value)
+  );
+};
+
+const formatFileSize = file => {
+  const size = file.byte_size || file.size;
+  return formatBytes(size, 0);
+};
+
+const isTypeImage = file => {
+  const type = file.content_type || file.type;
+  return type.includes('image');
+};
+
+const fileName = file => {
+  return file.filename || file.name;
 };
 </script>
-<style lang="scss" scoped>
-.image-thumb {
-  @apply w-6 h-6 object-cover rounded-sm;
-}
-
-.file-name-wrap,
-.file-size-wrap {
-  @apply flex items-center py-0 px-1;
-
-  > .item {
-    @apply m-0 overflow-hidden text-xs font-medium;
-  }
-}
-
-.remove--attachment {
-  @apply w-6 h-6 rounded-md text-sm cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800;
-}
-</style>
@@ -10,11 +10,10 @@
 </template>
 <script>
 import wootConstants from 'dashboard/constants/globals';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import { hasPressedAltAndNKey } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 export default {
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
  props: {
    items: {
      type: Array,
@@ -31,14 +30,18 @@ export default {
    },
  },
  methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndNKey(e)) {
-        if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
-          this.onTabChange(0);
-        } else {
-          this.onTabChange(this.activeTabIndex + 1);
-        }
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyN': {
+          action: () => {
+            if (this.activeTab === wootConstants.ASSIGNEE_TYPE.ALL) {
+              this.onTabChange(0);
+            } else {
+              this.onTabChange(this.activeTabIndex + 1);
+            }
+          },
+        },
+      };
    },
    onTabChange(selectedTabIndex) {
      if (this.items[selectedTabIndex].key !== this.activeTab) {
@@ -31,15 +31,10 @@

 <script>
 import AddLabel from 'shared/components/ui/dropdown/AddLabel.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import LabelDropdown from 'shared/components/ui/label/LabelDropdown.vue';
 import { mixin as clickaway } from 'vue-clickaway';
 import adminMixin from 'dashboard/mixins/isAdmin';
-import {
-  buildHotKeys,
-  isEscape,
-  isActiveElementTypeable,
-} from 'shared/helpers/KeyboardHelpers';

 export default {
  components: {
@@ -47,7 +42,7 @@ export default {
    LabelDropdown,
  },

-  mixins: [clickaway, adminMixin, eventListenerMixins],
+  mixins: [clickaway, adminMixin, keyboardEventListenerMixins],

  props: {
    allLabels: {
@@ -88,17 +83,19 @@ export default {
    closeDropdownLabel() {
      this.showSearchDropdownLabel = false;
    },
-
-    handleKeyEvents(e) {
-      const keyPattern = buildHotKeys(e);
-
-      if (keyPattern === 'l' && !isActiveElementTypeable(e)) {
-        this.toggleLabels();
-        e.preventDefault();
-      } else if (isEscape(e) && this.showSearchDropdownLabel) {
-        this.closeDropdownLabel();
-        e.preventDefault();
-      }
+    getKeyboardEvents() {
+      return {
+        KeyL: {
+          action: e => {
+            this.toggleLabels();
+            e.preventDefault();
+          },
+        },
+        Escape: {
+          action: () => this.closeDropdownLabel(),
+          allowOnFocusedInput: true,
+        },
+      };
    },
  },
 };
@@ -1,171 +1,48 @@
 <template>
  <footer
    v-if="isFooterVisible"
-    class="bg-white dark:bg-slate-800 h-12 border-t border-solid border-slate-75 dark:border-slate-700/50 flex items-center justify-between px-6"
+    class="h-12 flex items-center justify-between px-6"
  >
-    <div class="left-aligned-wrap">
-      <div class="text-xs text-slate-600 dark:text-slate-200">
-        <strong>{{ firstIndex }}</strong>
-        - <strong>{{ lastIndex }}</strong> of
-        <strong>{{ totalCount }}</strong> items
-      </div>
-    </div>
-    <div class="right-aligned-wrap">
-      <div
-        v-if="totalCount"
-        class="primary button-group pagination-button-group"
-      >
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-first"
-          :is-disabled="hasFirstPage"
-          @click="onFirstPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-          <fluent-icon
-            icon="chevron-left"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasPrevPage"
-          @click="onPrevPage"
-        >
-          <fluent-icon icon="chevron-left" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          @click.prevent
-        >
-          {{ currentPage }}
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          :is-disabled="hasNextPage"
-          @click="onNextPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-        </woot-button>
-        <woot-button
-          size="small"
-          variant="smooth"
-          color-scheme="secondary"
-          class-names="goto-last"
-          :is-disabled="hasLastPage"
-          @click="onLastPage"
-        >
-          <fluent-icon icon="chevron-right" size="18" />
-          <fluent-icon
-            icon="chevron-right"
-            size="18"
-            :class="pageFooterIconClass"
-          />
-        </woot-button>
-      </div>
-    </div>
+    <table-footer-results
+      :first-index="firstIndex"
+      :last-index="lastIndex"
+      :total-count="totalCount"
+    />
+    <table-footer-pagination
+      v-if="totalCount"
+      :current-page="currentPage"
+      :total-pages="totalPages"
+      :total-count="totalCount"
+      :page-size="pageSize"
+      @page-change="$emit('page-change', $event)"
+    />
  </footer>
 </template>

-<script>
-import rtlMixin from 'shared/mixins/rtlMixin';
-
-export default {
-  components: {},
-  mixins: [rtlMixin],
-  props: {
-    currentPage: {
-      type: Number,
-      default: 1,
-    },
-    pageSize: {
-      type: Number,
-      default: 25,
-    },
-    totalCount: {
-      type: Number,
-      default: 0,
-    },
+<script setup>
+import { computed } from 'vue';
+import TableFooterResults from './TableFooterResults.vue';
+import TableFooterPagination from './TableFooterPagination.vue';
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
  },
-  computed: {
-    pageFooterIconClass() {
-      return this.isRTLView ? '-mr-3' : '-ml-3';
-    },
-    isFooterVisible() {
-      return this.totalCount && !(this.firstIndex > this.totalCount);
-    },
-    firstIndex() {
-      return this.pageSize * (this.currentPage - 1) + 1;
-    },
-    lastIndex() {
-      return Math.min(this.totalCount, this.pageSize * this.currentPage);
-    },
-    searchButtonClass() {
-      return this.searchQuery !== '' ? 'show' : '';
-    },
-    hasLastPage() {
-      return !!Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasFirstPage() {
-      return this.currentPage === 1;
-    },
-    hasNextPage() {
-      return this.currentPage === Math.ceil(this.totalCount / this.pageSize);
-    },
-    hasPrevPage() {
-      return this.currentPage === 1;
-    },
+  pageSize: {
+    type: Number,
+    default: 25,
  },
-  methods: {
-    onNextPage() {
-      if (this.hasNextPage) {
-        return;
-      }
-      const newPage = this.currentPage + 1;
-      this.onPageChange(newPage);
-    },
-    onPrevPage() {
-      if (this.hasPrevPage) {
-        return;
-      }
-      const newPage = this.currentPage - 1;
-      this.onPageChange(newPage);
-    },
-    onFirstPage() {
-      if (this.hasFirstPage) {
-        return;
-      }
-      const newPage = 1;
-      this.onPageChange(newPage);
-    },
-    onLastPage() {
-      if (this.hasLastPage) {
-        return;
-      }
-      const newPage = Math.ceil(this.totalCount / this.pageSize);
-      this.onPageChange(newPage);
-    },
-    onPageChange(page) {
-      this.$emit('page-change', page);
-    },
+  totalCount: {
+    type: Number,
+    default: 0,
  },
-};
+});
+const totalPages = computed(() => Math.ceil(props.totalCount / props.pageSize));
+const firstIndex = computed(() => props.pageSize * (props.currentPage - 1) + 1);
+const lastIndex = computed(() =>
+  Math.min(props.totalCount, props.pageSize * props.currentPage)
+);
+const isFooterVisible = computed(
+  () => props.totalCount && !(firstIndex.value > props.totalCount)
+);
 </script>
-
-<style lang="scss" scoped>
-.goto-first,
-.goto-last {
-  i:last-child {
-    @apply -ml-1;
-  }
-}
-</style>
@@ -0,0 +1,143 @@
+<template>
+  <div class="flex items-center bg-slate-50 dark:bg-slate-800 h-8 rounded-lg">
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasFirstPage"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-l-lg ltr:rounded-r-none rtl:rounded-r-lg rtl:rounded-l-none"
+      :class="buttonClass(hasFirstPage)"
+      @click="onFirstPage"
+    >
+      <fluent-icon
+        icon="chevrons-left"
+        size="20"
+        icon-lib="lucide"
+        :class="hasFirstPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasPrevPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasPrevPage)"
+      @click="onPrevPage"
+    >
+      <fluent-icon
+        icon="chevron-left-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasPrevPage && 'opacity-40'"
+      />
+    </woot-button>
+
+    <div
+      class="flex px-3 items-center gap-3 tabular-nums bg-slate-50 dark:bg-slate-800 text-slate-700 dark:text-slate-100"
+    >
+      <span class="text-sm text-slate-800 dark:text-slate-75">
+        {{ currentPage }}
+      </span>
+      <span class="text-slate-600 dark:text-slate-500">/</span>
+      <span class="text-sm text-slate-600 dark:text-slate-500">
+        {{ totalPages }}
+      </span>
+    </div>
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      :is-disabled="hasNextPage"
+      class-names="dark:!bg-slate-800 !opacity-100 rounded-none"
+      :class="buttonClass(hasNextPage)"
+      @click="onNextPage"
+    >
+      <fluent-icon
+        icon="chevron-right-single"
+        size="20"
+        icon-lib="lucide"
+        :class="hasNextPage && 'opacity-40'"
+      />
+    </woot-button>
+    <div class="bg-slate-75 dark:bg-slate-700/50 w-px rounded-sm h-4" />
+    <woot-button
+      size="small"
+      variant="smooth"
+      color-scheme="secondary"
+      class-names="dark:!bg-slate-800 !opacity-100 ltr:rounded-r-lg ltr:rounded-l-none rtl:rounded-l-lg rtl:rounded-r-none"
+      :class="buttonClass(hasLastPage)"
+      :is-disabled="hasLastPage"
+      @click="onLastPage"
+    >
+      <fluent-icon
+        icon="chevrons-right"
+        size="20"
+        icon-lib="lucide"
+        :class="hasLastPage && 'opacity-40'"
+      />
+    </woot-button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// Props
+const props = defineProps({
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+  totalPages: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const hasLastPage = computed(
+  () => props.currentPage === props.totalPages || props.totalPages === 1
+);
+const hasFirstPage = computed(() => props.currentPage === 1);
+const hasNextPage = computed(() => props.currentPage === props.totalPages);
+const hasPrevPage = computed(() => props.currentPage === 1);
+
+const emit = defineEmits(['page-change']);
+
+function buttonClass(hasPage) {
+  if (hasPage) {
+    return 'hover:!bg-slate-50 dark:hover:!bg-slate-800';
+  }
+  return 'dark:hover:!bg-slate-700/50';
+}
+
+function onPageChange(newPage) {
+  emit('page-change', newPage);
+}
+
+const onNextPage = () => {
+  if (!onNextPage.value) {
+    onPageChange(props.currentPage + 1);
+  }
+};
+const onPrevPage = () => {
+  if (!hasPrevPage.value) {
+    onPageChange(props.currentPage - 1);
+  }
+};
+const onFirstPage = () => {
+  if (!hasFirstPage.value) {
+    onPageChange(1);
+  }
+};
+const onLastPage = () => {
+  if (!hasLastPage.value) {
+    onPageChange(props.totalPages);
+  }
+};
+</script>
@@ -0,0 +1,28 @@
+<template>
+  <span class="text-sm text-slate-700 dark:text-slate-200 font-medium">
+    {{
+      $t('GENERAL.SHOWING_RESULTS', {
+        firstIndex,
+        lastIndex,
+        totalCount,
+      })
+    }}
+  </span>
+</template>
+
+<script setup>
+defineProps({
+  firstIndex: {
+    type: Number,
+    default: 0,
+  },
+  lastIndex: {
+    type: Number,
+    default: 0,
+  },
+  totalCount: {
+    type: Number,
+    default: 0,
+  },
+});
+</script>
@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  span: {
+    type: Number,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+    default: '',
+  },
+});
+
+const spanClass = computed(() => {
+  if (props.span === 1) return 'col-span-1';
+  if (props.span === 2) return 'col-span-2';
+  if (props.span === 3) return 'col-span-3';
+  if (props.span === 4) return 'col-span-4';
+  if (props.span === 5) return 'col-span-5';
+  if (props.span === 6) return 'col-span-6';
+  if (props.span === 7) return 'col-span-7';
+  if (props.span === 8) return 'col-span-8';
+  if (props.span === 9) return 'col-span-9';
+  if (props.span === 10) return 'col-span-10';
+
+  return 'col-span-1';
+});
+</script>
+<template>
+  <div
+    class="flex items-center px-0 py-2 text-xs font-medium text-left uppercase text-slate-700 dark:text-slate-100 rtl:text-right"
+    :class="spanClass"
+  >
+    <slot>
+      {{ label }}
+    </slot>
+  </div>
+</template>
@@ -231,7 +231,18 @@ export default {
    @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
  }
 }
-.video-js .vjs-control-bar {
-  background-color: transparent;
+// Added to override the default text and bg style to support dark and light mode.
+.video-js .vjs-control-bar,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:before {
+  @apply text-slate-600 dark:text-slate-200 bg-transparent dark:bg-transparent;
+}
+// Added to fix  div overlays the screen and takes over the button clicks
+// https://github.com/collab-project/videojs-record/issues/688
+// https://github.com/collab-project/videojs-record/pull/709
+.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden,
+.vjs-record.video-js .vjs-control.vjs-record-indicator,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:before,
+.vjs-record.video-js .vjs-control.vjs-record-indicator:after {
+  @apply pointer-events-none;
 }
 </style>
@@ -78,10 +78,8 @@ const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 import {
  hasPressedEnterAndNotCmdOrShift,
  hasPressedCommandAndEnter,
-  hasPressedAltAndPKey,
-  hasPressedAltAndLKey,
 } from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import {
@@ -121,7 +119,7 @@ const createState = (
 export default {
  name: 'WootMessageEditor',
  components: { TagAgents, CannedResponse, VariableList },
-  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
  props: {
    value: { type: String, default: '' },
    editorId: { type: String, default: '' },
@@ -522,13 +520,21 @@ export default {
    isCmdPlusEnterToSendEnabled() {
      return isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter');
    },
-    handleKeyEvents(e) {
-      if (hasPressedAltAndPKey(e)) {
-        this.focusEditorInputField();
-      }
-      if (hasPressedAltAndLKey(e)) {
-        this.focusEditorInputField();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyP': {
+          action: () => {
+            this.focusEditorInputField();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyL': {
+          action: () => {
+            this.focusEditorInputField();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
    },
    focusEditorInputField(pos = 'end') {
      const { tr } = this.editorView.state;
@@ -25,7 +25,7 @@ import {
 } from '@chatwoot/prosemirror-schema';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import alertMixin from 'shared/mixins/alertMixin';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';

 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
@@ -51,7 +51,7 @@ const createState = (
 };

 export default {
-  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, alertMixin],
  props: {
    value: { type: String, default: '' },
    editorId: { type: String, default: '' },
@@ -136,8 +136,7 @@
 <script>
 import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
-import { hasPressedAltAndAKey } from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -154,7 +153,7 @@ import { mapGetters } from 'vuex';
 export default {
  name: 'ReplyBottomPanel',
  components: { FileUpload, VideoCallButton, AIAssistanceButton },
-  mixins: [eventListenerMixins, uiSettingsMixin, inboxMixin],
+  mixins: [keyboardEventListenerMixins, uiSettingsMixin, inboxMixin],
  props: {
    mode: {
      type: String,
@@ -340,10 +339,15 @@ export default {
    ActiveStorage.start();
  },
  methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndAKey(e)) {
-        this.$refs.upload.$children[1].$el.click();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyA': {
+          action: () => {
+            this.$refs.upload.$children[1].$el.click();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
    },
    toggleMessageSignature() {
      this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-black-50 flex justify-between dark:bg-slate-800">
+  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
    <div class="button-group">
      <woot-button
        variant="clear"
@@ -20,7 +20,7 @@
        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
      </woot-button>
    </div>
-    <div class="flex items-center my-0 mx-4">
+    <div class="flex items-center mx-4 my-0">
      <div v-if="isMessageLengthReachingThreshold" class="text-xs">
        <span :class="charLengthClass">
          {{ characterLengthWarning }}
@@ -48,14 +48,10 @@

 <script>
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
-import {
-  hasPressedAltAndPKey,
-  hasPressedAltAndLKey,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 export default {
  name: 'ReplyTopPanel',
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
  props: {
    mode: {
      type: String,
@@ -99,13 +95,17 @@ export default {
    },
  },
  methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndPKey(e)) {
-        this.handleNoteClick();
-      }
-      if (hasPressedAltAndLKey(e)) {
-        this.handleReplyClick();
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyP': {
+          action: () => this.handleNoteClick(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyL': {
+          action: () => this.handleReplyClick(),
+          allowOnFocusedInput: true,
+        },
+      };
    },
    handleReplyClick() {
      this.setReplyMode(REPLY_EDITOR_MODES.REPLY);
@@ -2,7 +2,7 @@
  <div
    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-4 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-slate-25 dark:hover:bg-slate-800 group"
    :class="{
-      'animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
+      'active animate-card-select bg-slate-25 dark:bg-slate-800 border-woot-500':
        isActiveChat,
      'unread-chat': hasUnread,
      'has-inbox-name': showInboxName,
@@ -86,7 +86,11 @@
          {{ unreadCount > 9 ? '9+' : unreadCount }}
        </span>
      </div>
-      <card-labels :conversation-id="chat.id" />
+      <card-labels :conversation-id="chat.id" class="mt-0.5 mx-2 mb-0">
+        <template v-if="hasSlaPolicyId" #before>
+          <SLA-card-label :chat="chat" class="ltr:mr-1 rtl:ml-1" />
+        </template>
+      </card-labels>
    </div>
    <woot-context-menu
      v-if="showContextMenu"
@@ -125,6 +129,7 @@ import alertMixin from 'shared/mixins/alertMixin';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import PriorityMark from './PriorityMark.vue';
+import SLACardLabel from './components/SLACardLabel.vue';

 export default {
  components: {
@@ -135,6 +140,7 @@ export default {
    TimeAgo,
    MessagePreview,
    PriorityMark,
+    SLACardLabel,
  },

  mixins: [inboxMixin, timeMixin, conversationMixin, alertMixin],
@@ -252,6 +258,9 @@ export default {
      const stateInbox = this.inbox;
      return stateInbox.name || '';
    },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
  },
  methods: {
    onCardClick(e) {
@@ -1,12 +1,12 @@
 <template>
  <div
-    class="bg-white dark:bg-slate-900 flex justify-between items-center py-2 px-4 border-b border-slate-50 dark:border-slate-800/50 flex-col md:flex-row"
+    class="flex flex-col items-center justify-between px-4 py-2 bg-white border-b dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 md:flex-row"
  >
    <div
-      class="flex-1 w-full min-w-0 flex flex-col items-center justify-center"
+      class="flex flex-col items-center justify-center flex-1 w-full min-w-0"
      :class="isInboxView ? 'sm:flex-row' : 'md:flex-row'"
    >
-      <div class="flex justify-start items-center min-w-0 w-fit max-w-full">
+      <div class="flex items-center justify-start max-w-full min-w-0 w-fit">
        <back-button
          v-if="showBackButton"
          :back-url="backButtonUrl"
@@ -19,10 +19,10 @@
          :status="currentContact.availability_status"
        />
        <div
-          class="items-start flex flex-col ml-2 rtl:ml-0 rtl:mr-2 min-w-0 w-fit overflow-hidden"
+          class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2 w-fit"
        >
          <div
-            class="flex items-center flex-row gap-1 m-0 p-0 w-fit max-w-full"
+            class="flex flex-row items-center max-w-full gap-1 p-0 m-0 w-fit"
          >
            <woot-button
              variant="link"
@@ -31,7 +31,7 @@
              @click.prevent="$emit('contact-panel-toggle')"
            >
              <span
-                class="text-base leading-tight font-medium text-slate-900 dark:text-slate-100"
+                class="text-base font-medium leading-tight text-slate-900 dark:text-slate-100"
              >
                {{ currentContact.name }}
              </span>
@@ -46,7 +46,7 @@
          </div>

          <div
-            class="conversation--header--actions items-center flex text-xs gap-2 text-ellipsis overflow-hidden whitespace-nowrap"
+            class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
          >
            <inbox-name v-if="hasMultipleInboxes" :inbox="inbox" />
            <span
@@ -67,24 +67,25 @@
        </div>
      </div>
      <div
-        class="header-actions-wrap items-center flex flex-row flex-grow justify-end mt-3 lg:mt-0"
+        class="flex flex-row items-center justify-end flex-grow gap-2 mt-3 header-actions-wrap lg:mt-0"
        :class="{ 'justify-end': isContactPanelOpen }"
      >
+        <SLA-card-label v-if="hasSlaPolicyId" :chat="chat" show-extended-info />
        <more-actions :conversation-id="currentChat.id" />
      </div>
    </div>
  </div>
 </template>
 <script>
-import { hasPressedAltAndOKey } from 'shared/helpers/KeyboardHelpers';
 import { mapGetters } from 'vuex';
 import agentMixin from '../../../mixins/agentMixin.js';
 import BackButton from '../BackButton.vue';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Thumbnail from '../Thumbnail.vue';
+import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
@@ -95,8 +96,9 @@ export default {
    InboxName,
    MoreActions,
    Thumbnail,
+    SLACardLabel,
  },
-  mixins: [inboxMixin, agentMixin, eventListenerMixins],
+  mixins: [inboxMixin, agentMixin, keyboardEventListenerMixins],
  props: {
    chat: {
      type: Object,
@@ -173,13 +175,18 @@ export default {
    hasMultipleInboxes() {
      return this.$store.getters['inboxes/getInboxes'].length > 1;
    },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
  },

  methods: {
-    handleKeyEvents(e) {
-      if (hasPressedAltAndOKey(e)) {
-        this.$emit('contact-panel-toggle');
-      }
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyO': {
+          action: () => this.$emit('contact-panel-toggle'),
+        },
+      };
    },
  },
 };
@@ -14,11 +14,7 @@
          @click="retrySendMessage"
        />
      </div>
-      <div
-        v-tooltip.top-start="messageToolTip"
-        :class="bubbleClass"
-        @contextmenu="openContextMenu($event)"
-      >
+      <div :class="bubbleClass" @contextmenu="openContextMenu($event)">
        <bubble-mail-head
          :email-attributes="contentAttributes.email"
          :cc="emailHeadAttributes.cc"
@@ -90,7 +86,7 @@
          :id="data.id"
          :sender="data.sender"
          :story-sender="storySender"
-          :external-error="externalError"
+          :external-error="errorMessageTooltip"
          :story-id="`${storyId}`"
          :is-a-tweet="isATweet"
          :is-a-whatsapp-channel="isAWhatsAppChannel"
@@ -412,14 +408,11 @@ export default {
          }
        : false;
    },
-    messageToolTip() {
-      if (this.isMessageDeleted) {
-        return false;
-      }
+    errorMessageTooltip() {
      if (this.isFailed) {
        return this.externalError || this.$t(`CONVERSATION.SEND_FAILED`);
      }
-      return false;
+      return '';
    },
    wrapClass() {
      return {
@@ -116,13 +116,12 @@ import conversationMixin, {
 } from '../../../mixins/conversations';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import configMixin from 'shared/mixins/configMixin';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import aiMixin from 'dashboard/mixins/aiMixin';

 // utils
 import { getTypingUsersText } from '../../../helper/commons';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
-import { isEscape } from 'shared/helpers/KeyboardHelpers';
 import { LocalStorage } from 'shared/helpers/localStorage';

 // constants
@@ -141,7 +140,7 @@ export default {
  mixins: [
    conversationMixin,
    inboxMixin,
-    eventListenerMixins,
+    keyboardEventListenerMixins,
    configMixin,
    aiMixin,
  ],
@@ -418,10 +417,12 @@ export default {
    closePopoutReplyBox() {
      this.isPopoutReplyBox = false;
    },
-    handleKeyEvents(e) {
-      if (isEscape(e)) {
-        this.closePopoutReplyBox();
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => this.closePopoutReplyBox(),
+        },
+      };
    },
    addScrollListener() {
      this.conversationPanel = this.$el.querySelector('.conversation-panel');
@@ -100,7 +100,7 @@
      <attachment-preview
        class="flex-col mt-4"
        :attachments="attachedFiles"
-        :remove-attachment="removeAttachment"
+        @remove-attachment="removeAttachment"
      />
    </div>
    <message-signature-missing-alert
@@ -155,6 +155,7 @@
 import { mapGetters } from 'vuex';
 import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 import CannedResponse from './CannedResponse.vue';
 import ReplyToMessage from './ReplyToMessage.vue';
@@ -178,7 +179,6 @@ import {
  replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
@@ -225,6 +225,7 @@ export default {
    messageFormatterMixin,
    rtlMixin,
    fileUploadMixin,
+    keyboardEventListenerMixins,
  ],
  props: {
    popoutReplyBox: {
@@ -701,24 +702,41 @@ export default {
        this.$store.dispatch('draftMessages/delete', { key });
      }
    },
-    handleKeyEvents(e) {
-      const keyCode = buildHotKeys(e);
-      if (keyCode === 'escape') {
-        this.hideEmojiPicker();
-        this.hideMentions();
-      } else if (keyCode === 'meta+k') {
-        const ninja = document.querySelector('ninja-keys');
-        ninja.open();
-        e.preventDefault();
-      } else if (keyCode === 'enter' && this.isAValidEvent('enter')) {
-        this.onSendReply();
-        e.preventDefault();
-      } else if (
-        ['meta+enter', 'ctrl+enter'].includes(keyCode) &&
-        this.isAValidEvent('cmd_enter')
-      ) {
-        this.onSendReply();
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => {
+            this.hideEmojiPicker();
+            this.hideMentions();
+          },
+          allowOnFocusedInput: true,
+        },
+        '$mod+KeyK': {
+          action: e => {
+            e.preventDefault();
+            const ninja = document.querySelector('ninja-keys');
+            ninja.open();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            if (this.isAValidEvent('enter')) {
+              this.onSendReply();
+              e.preventDefault();
+            }
+          },
+          allowOnFocusedInput: true,
+        },
+        '$mod+Enter': {
+          action: () => {
+            if (this.isAValidEvent('cmd_enter')) {
+              this.onSendReply();
+            }
+          },
+          allowOnFocusedInput: true,
+        },
+      };
    },
    isAValidEvent(selectedKey) {
      return (
@@ -937,6 +955,13 @@ export default {
      this.bccEmails = '';
      this.toEmails = '';
    },
+    clearRecorder() {
+      this.isRecordingAudio = false;
+      // Only clear the recorded audio when we click toggle button.
+      this.attachedFiles = this.attachedFiles.filter(
+        file => !file?.isRecordedAudio
+      );
+    },
    toggleEmojiPicker() {
      this.showEmojiPicker = !this.showEmojiPicker;
    },
@@ -944,8 +969,7 @@ export default {
      this.isRecordingAudio = !this.isRecordingAudio;
      this.isRecorderAudioStopped = !this.isRecordingAudio;
      if (!this.isRecordingAudio) {
-        this.clearMessage();
-        this.clearEmailField();
+        this.clearRecorder();
      }
    },
    toggleAudioRecorderPlayPause() {
@@ -989,7 +1013,13 @@ export default {
      }
    },
    onFinishRecorder(file) {
-      return file && this.onFileUpload(file);
+      // Added a new key isRecordedAudio to the file to find it's and recorded audio
+      // Because to filter and show only non recorded audio and other attachments
+      const autoRecordedFile = {
+        ...file,
+        isRecordedAudio: true,
+      };
+      return file && this.onFileUpload(autoRecordedFile);
    },
    toggleTyping(status) {
      const conversationId = this.currentChat.id;
@@ -1015,13 +1045,12 @@ export default {
          isPrivate: this.isPrivate,
          thumb: reader.result,
          blobSignedId: blob ? blob.signed_id : undefined,
+          isRecordedAudio: file?.isRecordedAudio || false,
        });
      };
    },
-    removeAttachment(itemIndex) {
-      this.attachedFiles = this.attachedFiles.filter(
-        (item, index) => itemIndex !== index
-      );
+    removeAttachment(attachments) {
+      this.attachedFiles = attachments;
    },
    setReplyToInPayload(payload) {
      if (this.inReplyTo?.id) {
@@ -75,9 +75,10 @@ export default {
  },

  methods: {
-    handleKeyboardEvent(e) {
-      this.processKeyDownEvent(e);
-      this.$el.scrollTop = 50 * this.selectedIndex;
+    adjustScroll() {
+      this.$nextTick(() => {
+        this.$el.scrollTop = 50 * this.selectedIndex;
+      });
    },
    onHover(index) {
      this.selectedIndex = index;
@@ -17,7 +17,7 @@
      @error="onImgError"
      @click="onClick"
    />
-    <audio v-else-if="isAudio" controls class="skip-context-menu">
+    <audio v-else-if="isAudio" controls class="skip-context-menu mb-0.5">
      <source :src="`${dataUrl}?t=${Date.now()}`" />
    </audio>
    <gallery-view
@@ -182,12 +182,7 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
-import {
-  isEscape,
-  hasPressedArrowLeftKey,
-  hasPressedArrowRightKey,
-} from 'shared/helpers/KeyboardHelpers';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 import timeMixin from 'dashboard/mixins/time';

 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
@@ -205,7 +200,7 @@ export default {
  components: {
    Thumbnail,
  },
-  mixins: [eventListenerMixins, clickaway, timeMixin],
+  mixins: [keyboardEventListenerMixins, clickaway, timeMixin],
  props: {
    show: {
      type: Boolean,
@@ -304,20 +299,30 @@ export default {
      this.activeAttachment = attachment;
      this.activeFileType = type;
    },
-    onKeyDownHandler(e) {
-      if (isEscape(e)) {
-        this.onClose();
-      } else if (hasPressedArrowLeftKey(e)) {
-        this.onClickChangeAttachment(
-          this.allAttachments[this.activeImageIndex - 1],
-          this.activeImageIndex - 1
-        );
-      } else if (hasPressedArrowRightKey(e)) {
-        this.onClickChangeAttachment(
-          this.allAttachments[this.activeImageIndex + 1],
-          this.activeImageIndex + 1
-        );
-      }
+    getKeyboardEvents() {
+      return {
+        Escape: {
+          action: () => {
+            this.onClose();
+          },
+        },
+        ArrowLeft: {
+          action: () => {
+            this.onClickChangeAttachment(
+              this.allAttachments[this.activeImageIndex - 1],
+              this.activeImageIndex - 1
+            );
+          },
+        },
+        ArrowRight: {
+          action: () => {
+            this.onClickChangeAttachment(
+              this.allAttachments[this.activeImageIndex + 1],
+              this.activeImageIndex + 1
+            );
+          },
+        },
+      };
    },
    onClickDownload() {
      const { file_type: type, data_url: url } = this.activeAttachment;
@@ -0,0 +1,153 @@
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    class="relative flex items-center border cursor-pointer min-w-fit border-slate-100 dark:border-slate-700"
+    :class="showExtendedInfo ? 'h-[26px] rounded-lg' : 'rounded h-5'"
+  >
+    <div
+      v-on-clickaway="closeSlaPopover"
+      class="flex items-center w-full truncate"
+      :class="showExtendedInfo ? 'px-1.5' : 'px-2 gap-1'"
+      @mouseover="openSlaPopover()"
+    >
+      <div
+        class="flex items-center gap-1"
+        :class="
+          showExtendedInfo &&
+          'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-solid border-slate-100 dark:border-slate-700'
+        "
+      >
+        <fluent-icon
+          size="14"
+          :icon="slaStatus.icon"
+          type="outline"
+          :icon-lib="isSlaMissed ? 'lucide' : 'fluent'"
+          class="flex-shrink-0"
+          :class="slaTextStyles"
+        />
+        <span
+          v-if="showExtendedInfo"
+          class="text-xs font-medium"
+          :class="slaTextStyles"
+        >
+          {{ slaStatusText }}
+        </span>
+      </div>
+      <span
+        class="text-xs font-medium"
+        :class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
+      >
+        {{ slaStatus.threshold }}
+      </span>
+    </div>
+    <SLA-popover-card
+      v-if="showSlaPopoverCard"
+      :sla-missed-events="slaEvents"
+      class="right-0 top-7"
+    />
+  </div>
+</template>
+
+<script>
+import { evaluateSLAStatus } from '../helpers/SLAHelper';
+import SLAPopoverCard from './SLAPopoverCard.vue';
+import { mixin as clickaway } from 'vue-clickaway';
+
+const REFRESH_INTERVAL = 60000;
+
+export default {
+  components: {
+    SLAPopoverCard,
+  },
+  mixins: [clickaway],
+  props: {
+    chat: {
+      type: Object,
+      default: () => ({}),
+    },
+    showExtendedInfo: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      timer: null,
+      showSlaPopover: false,
+      slaStatus: {
+        threshold: null,
+        isSlaMissed: false,
+        type: null,
+        icon: null,
+      },
+    };
+  },
+  computed: {
+    slaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
+    appliedSLA() {
+      return this.chat?.applied_sla;
+    },
+    slaEvents() {
+      return this.chat?.sla_events;
+    },
+    hasSlaThreshold() {
+      return this.slaStatus?.threshold;
+    },
+    isSlaMissed() {
+      return this.slaStatus?.isSlaMissed;
+    },
+    slaTextStyles() {
+      return this.isSlaMissed
+        ? 'text-red-400 dark:text-red-300'
+        : 'text-yellow-600 dark:text-yellow-500';
+    },
+    slaStatusText() {
+      const upperCaseType = this.slaStatus?.type?.toUpperCase(); // FRT, NRT, or RT
+      const statusKey = this.isSlaMissed ? 'MISSED' : 'DUE';
+
+      return this.$t(`CONVERSATION.HEADER.SLA_STATUS.${upperCaseType}`, {
+        status: this.$t(`CONVERSATION.HEADER.SLA_STATUS.${statusKey}`),
+      });
+    },
+    showSlaPopoverCard() {
+      return (
+        this.showExtendedInfo && this.showSlaPopover && this.slaEvents.length
+      );
+    },
+  },
+  watch: {
+    chat() {
+      this.updateSlaStatus();
+    },
+  },
+  mounted() {
+    this.updateSlaStatus();
+    this.createTimer();
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  },
+  methods: {
+    createTimer() {
+      this.timer = setTimeout(() => {
+        this.updateSlaStatus();
+        this.createTimer();
+      }, REFRESH_INTERVAL);
+    },
+    updateSlaStatus() {
+      this.slaStatus = evaluateSLAStatus(this.appliedSLA, this.chat);
+    },
+    openSlaPopover() {
+      if (!this.showExtendedInfo) return;
+      this.showSlaPopover = true;
+    },
+    closeSlaPopover() {
+      this.showSlaPopover = false;
+    },
+  },
+};
+</script>
@@ -0,0 +1,35 @@
+<script setup>
+import { format, fromUnixTime } from 'date-fns';
+
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  items: {
+    type: Array,
+    required: true,
+  },
+});
+const formatDate = timestamp =>
+  format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
+</script>
+<template>
+  <div class="flex justify-between w-full">
+    <span
+      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-slate-600 dark:text-slate-200"
+    >
+      {{ label }}
+    </span>
+    <div class="flex flex-col w-full gap-2">
+      <span
+        v-for="item in items"
+        :key="item.id"
+        class="text-sm font-normal text-slate-900 dark:text-slate-25 text-right tabular-nums"
+      >
+        {{ formatDate(item.created_at) }}
+      </span>
+      <slot name="showMore" />
+    </div>
+  </div>
+</template>
@@ -0,0 +1,85 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import wootConstants from 'dashboard/constants/globals';
+import SLAEventItem from './SLAEventItem.vue';
+
+const { SLA_MISS_TYPES } = wootConstants;
+
+const props = defineProps({
+  slaMissedEvents: {
+    type: Array,
+    required: true,
+  },
+});
+
+const shouldShowAllNrts = ref(false);
+
+const frtMisses = computed(() =>
+  props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.FRT
+  )
+);
+const nrtMisses = computed(() => {
+  const missedEvents = props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.NRT
+  );
+  return shouldShowAllNrts.value ? missedEvents : missedEvents.slice(0, 6);
+});
+const rtMisses = computed(() =>
+  props.slaMissedEvents.filter(
+    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.RT
+  )
+);
+
+const shouldShowMoreNRTButton = computed(() => nrtMisses.value.length > 6);
+const toggleShowAllNRT = () => {
+  shouldShowAllNrts.value = !shouldShowAllNrts.value;
+};
+</script>
+<template>
+  <div
+    class="absolute flex flex-col items-start bg-[#fdfdfd] dark:bg-slate-800 z-50 p-4 border border-solid border-slate-75 dark:border-slate-700 w-[384px] rounded-xl gap-4 max-h-96 overflow-auto"
+  >
+    <span class="text-sm font-medium text-slate-900 dark:text-slate-25">
+      {{ $t('SLA.EVENTS.TITLE') }}
+    </span>
+    <SLA-event-item
+      v-if="frtMisses.length"
+      :label="$t('SLA.EVENTS.FRT')"
+      :items="frtMisses"
+    />
+    <SLA-event-item
+      v-if="nrtMisses.length"
+      :label="$t('SLA.EVENTS.NRT')"
+      :items="nrtMisses"
+    >
+      <template #showMore>
+        <div
+          v-if="shouldShowMoreNRTButton"
+          class="flex flex-col items-end w-full"
+        >
+          <woot-button
+            size="small"
+            :icon="!shouldShowAllNrts ? 'plus-sign' : ''"
+            variant="link"
+            color-scheme="secondary"
+            class="hover:!no-underline !gap-1 hover:!bg-transparent dark:hover:!bg-transparent"
+            @click="toggleShowAllNRT"
+          >
+            {{
+              shouldShowAllNrts
+                ? $t('SLA.EVENTS.HIDE', { count: nrtMisses.length })
+                : $t('SLA.EVENTS.SHOW_MORE', { count: nrtMisses.length })
+            }}
+          </woot-button>
+        </div>
+      </template>
+    </SLA-event-item>
+    <SLA-event-item
+      v-if="rtMisses.length"
+      :label="$t('SLA.EVENTS.RT')"
+      :items="rtMisses"
+    />
+  </div>
+</template>
@@ -1,13 +1,14 @@
 <template>
  <div
-    v-show="activeLabels.length"
+    v-if="activeLabels.length || $slots.before"
    ref="labelContainer"
-    class="label-container mt-0.5 mx-2 mb-0"
+    v-resize="computeVisibleLabelPosition"
  >
    <div
-      class="labels-wrap flex items-end min-w-0 flex-shrink gap-y-1 flex-wrap"
-      :class="{ expand: showAllLabels }"
+      class="flex items-end flex-shrink min-w-0 gap-y-1"
+      :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
    >
+      <slot name="before" />
      <woot-label
        v-for="(label, index) in activeLabels"
        :key="label.id"
@@ -26,7 +27,7 @@
            ? $t('CONVERSATION.CARD.HIDE_LABELS')
            : $t('CONVERSATION.CARD.SHOW_LABELS')
        "
-        class="show-more--button sticky flex-shrink-0 right-0 mr-6 rtl:rotate-180"
+        class="sticky right-0 flex-shrink-0 mr-6 show-more--button rtl:rotate-180"
        color-scheme="secondary"
        variant="hollow"
        :icon="showAllLabels ? 'chevron-left' : 'chevron-right'"
@@ -45,6 +46,11 @@ export default {
      type: Number,
      required: true,
    },
+    conversationLabels: {
+      type: String,
+      required: false,
+      default: '',
+    },
  },
  data() {
    return {
@@ -59,26 +65,34 @@ export default {
    },
  },
  mounted() {
+    // the problem here is that there is a certain amount of delay between the conversation
+    // card being mounted and the resize event eventually being triggered
+    // This means we need to run the function immediately after the component is mounted
+    // Happens especially when used in a virtual list.
+    // We can make the first trigger, a standard part of the directive, in case
+    // we face this issue again
    this.computeVisibleLabelPosition();
  },
  methods: {
    onShowLabels(e) {
      e.stopPropagation();
      this.showAllLabels = !this.showAllLabels;
+      this.$nextTick(() => this.computeVisibleLabelPosition());
    },
    computeVisibleLabelPosition() {
+      const beforeSlot = this.$slots.before ? 100 : 0;
      const labelContainer = this.$refs.labelContainer;
-      const labels = this.$refs.labelContainer.querySelectorAll('.label');
+      if (!labelContainer) return;
+
+      const labels = Array.from(labelContainer.querySelectorAll('.label'));
      let labelOffset = 0;
      this.showExpandLabelButton = false;
-
-      Array.from(labels).forEach((label, index) => {
+      labels.forEach((label, index) => {
        labelOffset += label.offsetWidth + 8;
-
-        if (labelOffset < labelContainer.clientWidth - 16) {
+        if (labelOffset < labelContainer.clientWidth - 16 - beforeSlot) {
          this.labelPosition = index;
        } else {
-          this.showExpandLabelButton = true;
+          this.showExpandLabelButton = labels.length > 1;
        }
      });
    },
@@ -95,10 +109,6 @@ export default {
 }

 .labels-wrap {
-  &.expand {
-    @apply h-auto overflow-visible flex-row flex-wrap;
-  }
-
  .secondary {
    @apply border border-solid border-slate-100 dark:border-slate-700;
  }
@@ -0,0 +1,117 @@
+const calculateThreshold = (timeOffset, threshold) => {
+  // Calculate the time left for the SLA to breach or the time since the SLA has missed
+  if (threshold === null) return null;
+  const currentTime = Math.floor(Date.now() / 1000);
+  return timeOffset + threshold - currentTime;
+};
+
+const findMostUrgentSLAStatus = SLAStatuses => {
+  // Sort the SLAs based on the threshold and return the most urgent SLA
+  SLAStatuses.sort(
+    (sla1, sla2) => Math.abs(sla1.threshold) - Math.abs(sla2.threshold)
+  );
+  return SLAStatuses[0];
+};
+
+const formatSLATime = seconds => {
+  const units = {
+    y: 31536000, // 60 * 60 * 24 * 365
+    mo: 2592000, // 60 * 60 * 24 * 30
+    d: 86400, // 60 * 60 * 24
+    h: 3600, // 60 * 60
+    m: 60,
+  };
+
+  if (seconds < 60) {
+    return '1m';
+  }
+
+  // we will only show two parts, two max granularity's, h-m, y-d, d-h, m, but no seconds
+  const parts = [];
+
+  Object.keys(units).forEach(unit => {
+    const value = Math.floor(seconds / units[unit]);
+    if (seconds < 60 && parts.length > 0) return;
+    if (parts.length === 2) return;
+    if (value > 0) {
+      parts.push(value + unit);
+      seconds -= value * units[unit];
+    }
+  });
+  return parts.join(' ');
+};
+
+const createSLAObject = (
+  type,
+  {
+    sla_first_response_time_threshold: frtThreshold,
+    sla_next_response_time_threshold: nrtThreshold,
+    sla_resolution_time_threshold: rtThreshold,
+    created_at: createdAt,
+  } = {},
+  {
+    first_reply_created_at: firstReplyCreatedAt,
+    waiting_since: waitingSince,
+    status,
+  } = {}
+) => {
+  // Mapping of breach types to their logic
+  const SLATypes = {
+    FRT: {
+      threshold: calculateThreshold(createdAt, frtThreshold),
+      //   Check FRT only if threshold is not null and first reply hasn't been made
+      condition:
+        frtThreshold !== null &&
+        (!firstReplyCreatedAt || firstReplyCreatedAt === 0),
+    },
+    NRT: {
+      threshold: calculateThreshold(waitingSince, nrtThreshold),
+      // Check NRT only if threshold is not null, first reply has been made and we are waiting since
+      condition:
+        nrtThreshold !== null && !!firstReplyCreatedAt && !!waitingSince,
+    },
+    RT: {
+      threshold: calculateThreshold(createdAt, rtThreshold),
+      // Check RT only if the conversation is open and threshold is not null
+      condition: status === 'open' && rtThreshold !== null,
+    },
+  };
+
+  const SLAStatus = SLATypes[type];
+  return SLAStatus ? { ...SLAStatus, type } : null;
+};
+
+const evaluateSLAConditions = (appliedSla, chat) => {
+  // Filter out the SLA based on conditions and update the object with the breach status(icon, isSlaMissed)
+  const SLATypes = ['FRT', 'NRT', 'RT'];
+  return SLATypes.map(type => createSLAObject(type, appliedSla, chat))
+    .filter(SLAStatus => SLAStatus && SLAStatus.condition)
+    .map(SLAStatus => ({
+      ...SLAStatus,
+      icon: SLAStatus.threshold <= 0 ? 'flame' : 'alarm',
+      isSlaMissed: SLAStatus.threshold <= 0,
+    }));
+};
+
+export const evaluateSLAStatus = (appliedSla, chat) => {
+  if (!appliedSla || !chat)
+    return { type: '', threshold: '', icon: '', isSlaMissed: false };
+
+  // Filter out the SLA and create the object for each breach
+  const SLAStatuses = evaluateSLAConditions(appliedSla, chat);
+
+  // Return the most urgent SLA which is latest to breach or has missed
+  const mostUrgent = findMostUrgentSLAStatus(SLAStatuses);
+  return mostUrgent
+    ? {
+        type: mostUrgent.type,
+        threshold: formatSLATime(
+          mostUrgent.threshold <= 0
+            ? -mostUrgent.threshold
+            : mostUrgent.threshold
+        ),
+        icon: mostUrgent.icon,
+        isSlaMissed: mostUrgent.isSlaMissed,
+      }
+    : { type: '', threshold: '', icon: '', isSlaMissed: false };
+};
@@ -0,0 +1,150 @@
+import { evaluateSLAStatus } from '../SLAHelper';
+
+beforeEach(() => {
+  jest
+    .spyOn(Date, 'now')
+    .mockImplementation(() => new Date('2024-01-01T00:00:00Z').getTime());
+});
+
+afterEach(() => {
+  jest.restoreAllMocks();
+});
+
+describe('SLAHelper', () => {
+  describe('evaluateSLAStatus', () => {
+    it('returns an empty object when sla or chat is not present', () => {
+      expect(evaluateSLAStatus(null, null)).toEqual({
+        type: '',
+        threshold: '',
+        icon: '',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when FRT SLA is missed
+    it('correctly identifies a missed FRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066540,
+      };
+      const chatMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when FRT SLA is not missed
+    it('correctly identifies an FRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704066660,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 0,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'FRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when NRT SLA is missed
+    it('correctly identifies a missed NRT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704065940,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when NRT SLA is not missed
+    it('correctly identifies an NRT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065200 - 2000,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 1704066060,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'NRT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+
+    // Case when RT SLA is missed
+    it('correctly identifies a missed RT SLA', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065340,
+      };
+      const chatMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'flame',
+        isSlaMissed: true,
+      });
+    });
+
+    // Case when RT SLA is not missed
+    it('correctly identifies an RT SLA not yet breached', () => {
+      const appliedSla = {
+        sla_first_response_time_threshold: 600,
+        sla_next_response_time_threshold: 1200,
+        sla_resolution_time_threshold: 1800,
+        created_at: 1704065460,
+      };
+      const chatNotMissed = {
+        first_reply_created_at: 1704066200,
+        waiting_since: 0,
+        status: 'open',
+      };
+      expect(evaluateSLAStatus(appliedSla, chatNotMissed)).toEqual({
+        type: 'RT',
+        threshold: '1m',
+        icon: 'alarm',
+        isSlaMissed: false,
+      });
+    });
+  });
+});
@@ -74,15 +74,10 @@
 <script>
 import countries from 'shared/constants/countries.js';
 import parsePhoneNumber from 'libphonenumber-js';
-import eventListenerMixins from 'shared/mixins/eventListenerMixins';
-import {
-  hasPressedArrowUpKey,
-  hasPressedArrowDownKey,
-  isEnter,
-} from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 export default {
-  mixins: [eventListenerMixins],
+  mixins: [keyboardEventListenerMixins],
  props: {
    value: {
      type: [String, Number],
@@ -183,6 +178,7 @@ export default {
      this.$emit('blur', e.target.value);
    },
    dropdownItem() {
+      if (!this.showDropdown) return [];
      return Array.from(
        this.$refs.dropdown.querySelectorAll(
          'div.country-dropdown div.country-dropdown--item'
@@ -190,34 +186,27 @@ export default {
      );
    },
    focusedItem() {
+      if (!this.showDropdown) return [];
      return Array.from(
        this.$refs.dropdown.querySelectorAll('div.country-dropdown div.focus')
      );
    },
    focusedItemIndex() {
+      if (!this.showDropdown) return -1;
      return Array.from(this.dropdownItem()).indexOf(this.focusedItem()[0]);
    },
-    onKeyDownHandler(e) {
-      const { showDropdown, filteredCountriesBySearch, onSelectCountry } = this;
-      const { selectedIndex } = this;
-
-      if (showDropdown) {
-        if (hasPressedArrowDownKey(e)) {
-          e.preventDefault();
-          this.selectedIndex = Math.min(
-            selectedIndex + 1,
-            filteredCountriesBySearch.length - 1
-          );
-          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28;
-        } else if (hasPressedArrowUpKey(e)) {
-          e.preventDefault();
-          this.selectedIndex = Math.max(selectedIndex - 1, 0);
-          this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
-        } else if (isEnter(e)) {
-          e.preventDefault();
-          onSelectCountry(filteredCountriesBySearch[selectedIndex]);
-        }
-      }
+    moveUp() {
+      if (!this.showDropdown) return;
+      this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
+    },
+    moveDown() {
+      if (!this.showDropdown) return;
+      this.selectedIndex = Math.min(
+        this.selectedIndex + 1,
+        this.filteredCountriesBySearch.length - 1
+      );
+      this.$refs.dropdown.scrollTop = this.focusedItemIndex() * 28 - 56;
    },
    onSelectCountry(country) {
      this.activeCountryCode = country.id;
@@ -235,6 +224,33 @@ export default {
        this.activeDialCode = number.countryCallingCode;
      }
    },
+    getKeyboardEvents() {
+      return {
+        ArrowUp: {
+          action: e => {
+            e.preventDefault();
+            this.moveUp();
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            e.preventDefault();
+            this.moveDown();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            e.preventDefault();
+            this.onSelectCountry(
+              this.filteredCountriesBySearch[this.selectedIndex]
+            );
+          },
+          allowOnFocusedInput: true,
+        },
+      };
+    },
    toggleCountryDropdown() {
      this.showDropdown = !this.showDropdown;
      this.selectedIndex = -1;
@@ -84,9 +84,7 @@ export default {
    },
  },
  methods: {
-    handleKeyboardEvent(e) {
-      this.processKeyDownEvent(e);
-    },
+    adjustScroll() {},
    onHover(index) {
      this.selectedIndex = index;
    },
@@ -1,12 +1,7 @@
-import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';

 export default {
-  mounted() {
-    document.addEventListener('keydown', this.handleKeyboardEvent);
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleKeyboardEvent);
-  },
+  mixins: [keyboardEventListenerMixins],
  methods: {
    moveSelectionUp() {
      if (!this.selectedIndex) {
@@ -14,6 +9,7 @@ export default {
      } else {
        this.selectedIndex -= 1;
      }
+      this.adjustScroll();
    },
    moveSelectionDown() {
      if (this.selectedIndex === this.items.length - 1) {
@@ -21,19 +17,46 @@ export default {
      } else {
        this.selectedIndex += 1;
      }
+      this.adjustScroll();
    },
-    processKeyDownEvent(e) {
-      const keyPattern = buildHotKeys(e);
-      if (['arrowup', 'ctrl+p'].includes(keyPattern)) {
-        this.moveSelectionUp();
-        e.preventDefault();
-      } else if (['arrowdown', 'ctrl+n'].includes(keyPattern)) {
-        this.moveSelectionDown();
-        e.preventDefault();
-      } else if (keyPattern === 'enter') {
-        this.onSelect();
-        e.preventDefault();
-      }
+    getKeyboardEvents() {
+      return {
+        ArrowUp: {
+          action: e => {
+            this.moveSelectionUp();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Control+KeyP': {
+          action: e => {
+            this.moveSelectionUp();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        ArrowDown: {
+          action: e => {
+            this.moveSelectionDown();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        'Control+KeyN': {
+          action: e => {
+            this.moveSelectionDown();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+        Enter: {
+          action: e => {
+            this.onSelect();
+            e.preventDefault();
+          },
+          allowOnFocusedInput: true,
+        },
+      };
    },
  },
 };
@@ -1,64 +1,69 @@
-import mentionSelectionKeyboardMixin from '../mentionSelectionKeyboardMixin';
-import { shallowMount } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+
+const localVue = createLocalVue();

 const buildComponent = ({ data = {}, methods = {} }) => ({
  render() {},
  data() {
-    return data;
+    return { ...data, selectedIndex: 0, items: [1, 2, 3] };
  },
-  methods,
-  mixins: [mentionSelectionKeyboardMixin],
+  methods: { ...methods, onSelect: jest.fn(), adjustScroll: jest.fn() },
+  mixins: [keyboardEventListenerMixins],
 });

 describe('mentionSelectionKeyboardMixin', () => {
-  test('register listeners', () => {
-    jest.spyOn(document, 'addEventListener');
+  let wrapper;
+
+  beforeEach(() => {
    const Component = buildComponent({});
-    shallowMount(Component);
-    // undefined expected as the method is not defined in the component
-    expect(document.addEventListener).toHaveBeenCalledWith(
-      'keydown',
-      undefined
-    );
+    wrapper = shallowMount(Component, { localVue });
  });

-  test('processKeyDownEvent updates index on arrow up', () => {
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      ctrlKey: true,
-      key: 'p',
-      preventDefault: jest.fn(),
-    });
-    expect(wrapper.vm.selectedIndex).toBe(2);
+  it('ArrowUp and Control+KeyP update selectedIndex correctly', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.ArrowUp) {
+      keyboardEvents.ArrowUp.action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(2);
+      expect(preventDefault).toHaveBeenCalled();
+    }
+
+    wrapper.setData({ selectedIndex: 1 });
+    if (keyboardEvents && keyboardEvents['Control+KeyP']) {
+      keyboardEvents['Control+KeyP'].action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(0);
+      expect(preventDefault).toHaveBeenCalledTimes(2);
+    }
  });

-  test('processKeyDownEvent updates index on arrow down', () => {
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      key: 'ArrowDown',
-      preventDefault: jest.fn(),
-    });
-    expect(wrapper.vm.selectedIndex).toBe(1);
+  it('ArrowDown and Control+KeyN update selectedIndex correctly', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.ArrowDown) {
+      keyboardEvents.ArrowDown.action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(1);
+      expect(preventDefault).toHaveBeenCalled();
+    }
+
+    wrapper.setData({ selectedIndex: 1 });
+    if (keyboardEvents && keyboardEvents['Control+KeyN']) {
+      keyboardEvents['Control+KeyN'].action({ preventDefault });
+      expect(wrapper.vm.selectedIndex).toBe(2);
+      expect(preventDefault).toHaveBeenCalledTimes(2);
+    }
  });

-  test('processKeyDownEvent calls select methods on Enter Key', () => {
-    const onSelectMockFn = jest.fn();
-    const Component = buildComponent({
-      data: { selectedIndex: 0, items: [1, 2, 3] },
-      methods: { onSelect: () => onSelectMockFn('enterKey pressed') },
-    });
-    const wrapper = shallowMount(Component);
-    wrapper.vm.processKeyDownEvent({
-      key: 'Enter',
-      preventDefault: jest.fn(),
-    });
-    expect(onSelectMockFn).toHaveBeenCalledWith('enterKey pressed');
-    wrapper.vm.onSelect();
+  it('Enter key triggers onSelect method', () => {
+    const preventDefault = jest.fn();
+    const keyboardEvents = wrapper.vm.getKeyboardEvents();
+
+    if (keyboardEvents && keyboardEvents.Enter) {
+      keyboardEvents.Enter.action({ preventDefault });
+      expect(wrapper.vm.onSelect).toHaveBeenCalled();
+      expect(preventDefault).toHaveBeenCalled();
+    }
  });
 });
@@ -53,12 +53,6 @@ export const SHORTCUT_KEYS = [
    firstKey: 'Alt / ⌥',
    secondKey: 'S',
  },
-  {
-    id: 10,
-    label: 'SWITCH_CONVERSATION_STATUS',
-    firstKey: 'Alt / ⌥',
-    secondKey: 'B',
-  },
  {
    id: 11,
    label: 'SWITCH_TO_PRIVATE_NOTE',
@@ -0,0 +1,32 @@
+import { computed, getCurrentInstance } from 'vue';
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+let i18nInstance = VueI18n;
+
+export function useI18n() {
+  if (!i18nInstance) throw new Error('vue-i18n not initialized');
+
+  const i18n = i18nInstance;
+
+  const instance = getCurrentInstance();
+  const vm = instance?.proxy || instance || new Vue({});
+
+  const locale = computed({
+    get() {
+      return i18n.locale;
+    },
+    set(v) {
+      i18n.locale = v;
+    },
+  });
+
+  return {
+    locale,
+    t: vm.$t.bind(vm),
+    tc: vm.$tc.bind(vm),
+    d: vm.$d.bind(vm),
+    te: vm.$te.bind(vm),
+    n: vm.$n.bind(vm),
+  };
+}
@@ -59,5 +59,10 @@ export default {
    TYPE: 'type',
    SORT_ORDER: 'sort_order',
  },
+  SLA_MISS_TYPES: {
+    FRT: 'frt',
+    NRT: 'nrt',
+    RT: 'rt',
+  },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
@@ -20,4 +20,14 @@ export const FEATURE_FLAGS = {
  INBOX_VIEW: 'inbox_view',
  SLA: 'sla',
  RESPONSE_BOT: 'response_bot',
+  CHANNEL_EMAIL: 'channel_email',
+  CHANNEL_FACEBOOK: 'channel_facebook',
+  CHANNEL_TWITTER: 'channel_twitter',
+  CHANNEL_WEBSITE: 'channel_website',
+  CUSTOM_REPLY_DOMAIN: 'custom_reply_domain',
+  CUSTOM_REPLY_EMAIL: 'custom_reply_email',
+  DISABLE_BRANDING: 'disable_branding',
+  EMAIL_CONTINUITY_ON_API_CHANNEL: 'email_continuity_on_api_channel',
+  INBOUND_EMAILS: 'inbound_emails',
+  IP_LOOKUP: 'ip_lookup',
 };
@@ -0,0 +1,41 @@
+import { debounce } from '@chatwoot/utils';
+
+const RESIZE_OBSERVER_DEBOUNCE_TIME = 100;
+
+function createResizeObserver(el, binding) {
+  const { value } = binding;
+  const observer = new ResizeObserver(
+    debounce(entries => {
+      const entry = entries[0];
+      if (entry && value && typeof value === 'function') {
+        value(entry);
+      }
+    }, RESIZE_OBSERVER_DEBOUNCE_TIME)
+  );
+
+  el.cwResizeObserver = observer;
+  observer.observe(el);
+}
+
+function destroyResizeObserver(el) {
+  if (el.cwResizeObserver) {
+    el.cwResizeObserver.unobserve(el);
+    el.cwResizeObserver.disconnect();
+    delete el.cwResizeObserver;
+  }
+}
+
+export default {
+  bind(el, binding) {
+    createResizeObserver(el, binding);
+  },
+  update(el, binding) {
+    if (binding.oldValue !== binding.value) {
+      destroyResizeObserver(el);
+      createResizeObserver(el, binding);
+    }
+  },
+  unbind(el) {
+    destroyResizeObserver(el);
+  },
+};
@@ -0,0 +1,4 @@
+export function getHelpUrlForFeature(featureName) {
+  const { helpUrls } = window.chatwootConfig;
+  return helpUrls[featureName];
+}
@@ -1,5 +1,4 @@
 import AnalyticsHelper from './AnalyticsHelper';
-import LogRocket from 'logrocket';
 import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotificationHelper';

 export const CHATWOOT_SET_USER = 'CHATWOOT_SET_USER';
@@ -11,12 +10,6 @@ export const ANALYTICS_RESET = 'ANALYTICS_RESET';
 export const initializeAnalyticsEvents = () => {
  window.bus.$on(ANALYTICS_IDENTITY, ({ user }) => {
    AnalyticsHelper.identify(user);
-    if (window.logRocketProjectId) {
-      LogRocket.identify(user.id, {
-        email: user.email,
-        name: user.name,
-      });
-    }
  });
 };

@@ -0,0 +1,78 @@
+import resize from '../../directives/resize';
+
+class ResizeObserverMock {
+  // eslint-disable-next-line class-methods-use-this
+  observe() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  unobserve() {}
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnect() {}
+}
+
+describe('resize directive', () => {
+  let el;
+  let binding;
+  let observer;
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+    observer = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+    window.ResizeObserver = ResizeObserverMock;
+    jest.spyOn(window, 'ResizeObserver').mockImplementation(() => observer);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should create ResizeObserver on bind', () => {
+    resize.bind(el, binding);
+
+    expect(ResizeObserver).toHaveBeenCalled();
+    expect(observer.observe).toHaveBeenCalledWith(el);
+  });
+
+  it('should call callback on observer callback', () => {
+    el = document.createElement('div');
+    binding = {
+      value: jest.fn(),
+    };
+
+    resize.bind(el, binding);
+
+    const entries = [{ contentRect: { width: 100, height: 100 } }];
+    const callback = binding.value;
+    callback(entries[0]);
+
+    expect(binding.value).toHaveBeenCalledWith(entries[0]);
+  });
+
+  it('should destroy and recreate observer on update', () => {
+    resize.bind(el, binding);
+
+    resize.update(el, { ...binding, oldValue: 'old' });
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+    expect(ResizeObserver).toHaveBeenCalledTimes(2);
+    expect(observer.observe).toHaveBeenCalledTimes(2);
+  });
+
+  it('should destroy observer on unbind', () => {
+    resize.bind(el, binding);
+
+    resize.unbind(el);
+
+    expect(observer.unobserve).toHaveBeenCalledWith(el);
+    expect(observer.disconnect).toHaveBeenCalled();
+  });
+});
@@ -296,6 +296,8 @@
    "BUTTON": "Add custom attribute",
    "NOT_AVAILABLE": "There are no custom attributes available for this contact.",
    "COPY_SUCCESSFUL": "Copied to clipboard successfully",
+    "SHOW_MORE": "Show all attributes",
+    "SHOW_LESS": "Show less attributes",
    "ACTIONS": {
      "COPY": "Copy attribute",
      "DELETE": "Delete attribute",
@@ -44,7 +44,8 @@
      "CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
      "CREATED_AT": "Created At",
      "LAST_ACTIVITY": "Last Activity",
-      "REFERER_LINK": "Referrer link"
+      "REFERER_LINK": "Referrer link",
+      "BLOCKED": "Blocked"
    },
    "GROUPS": {
      "STANDARD_FILTERS": "Standard Filters",
@@ -64,7 +64,14 @@
      "SNOOZED_UNTIL": "Snoozed until",
      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week",
-      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply"
+      "SNOOZED_UNTIL_NEXT_REPLY": "Snoozed until next reply",
+      "SLA_STATUS": {
+        "FRT": "FRT {status}",
+        "NRT": "NRT {status}",
+        "RT": "RT {status}",
+        "MISSED": "missed",
+        "DUE": "due"
+      }
    },
    "RESOLVE_DROPDOWN": {
      "MARK_PENDING": "Mark as pending",
@@ -0,0 +1,5 @@
+{
+  "GENERAL": {
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+  }
+}
@@ -87,7 +87,10 @@
      "conversation_assignment": "Conversation Assigned",
      "assigned_conversation_new_message": "New Message",
      "participating_conversation_new_message": "New Message",
-      "conversation_mention": "Mention"
+      "conversation_mention": "Mention",
+      "sla_missed_first_response": "SLA Missed",
+      "sla_missed_next_response": "SLA Missed",
+      "sla_missed_resolution": "SLA Missed"
    }
  },
  "NETWORK": {
@@ -4,24 +4,28 @@
      "TITLE": "Inbox",
      "DISPLAY_DROPDOWN": "Display",
      "LOADING": "Fetching notifications",
-      "EOF": "All notifications loaded 🎉",
      "404": "There are no active notifications in this group.",
      "NO_NOTIFICATIONS": "No notifications",
      "NOTE": "Notifications from all subscribed inboxes",
+      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
      "SNOOZED_UNTIL": "Snoozed until",
      "SNOOZED_UNTIL_TOMORROW": "Snoozed until tomorrow",
      "SNOOZED_UNTIL_NEXT_WEEK": "Snoozed until next week"
    },
    "ACTION_HEADER": {
      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
+      "DELETE": "Delete notification",
+      "BACK": "Back"
    },
    "TYPES": {
      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
      "CONVERSATION_CREATION": "New conversation created",
      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
+      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
    },
    "MENU_ITEM": {
      "MARK_AS_READ": "Mark as read",
@@ -35,6 +35,14 @@
        "NAME": "Resolution Count",
        "DESC": "( Total )"
      },
+      "BOT_RESOLUTION_COUNT": {
+        "NAME": "Resolution Count",
+        "DESC": "( Total )"
+      },
+      "BOT_HANDOFF_COUNT": {
+        "NAME": "Handoff Count",
+        "DESC": "( Total )"
+      },
      "REPLY_TIME": {
        "NAME": "Customer waiting time",
        "TOOLTIP_TEXT": "Waiting time is %{metricValue} (based on %{conversationCount} replies)"
@@ -130,7 +138,11 @@
        "groupBy": "Year"
      }
    ],
-    "BUSINESS_HOURS": "Business Hours"
+    "BUSINESS_HOURS": "Business Hours",
+    "FILTER_ACTIONS": {
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found"
+    }
  },
  "AGENT_REPORTS": {
    "HEADER": "Agents Overview",
@@ -433,6 +445,27 @@
      }
    }
  },
+  "BOT_REPORTS": {
+    "HEADER": "Bot Reports",
+    "METRIC": {
+      "TOTAL_CONVERSATIONS": {
+        "LABEL": "No. of Conversations",
+        "TOOLTIP": "Total number of conversations handled by the bot"
+      },
+      "TOTAL_RESPONSES": {
+        "LABEL": "Total Responses",
+        "TOOLTIP": "Total number of responses sent by the bot"
+      },
+      "RESOLUTION_RATE": {
+        "LABEL": "Resolution Rate",
+        "TOOLTIP": "Total number of conversations resolved by the bot / Total number of conversations handled by the bot * 100"
+      },
+      "HANDOFF_RATE": {
+        "LABEL": "Handoff Rate",
+        "TOOLTIP": "Total number of conversations handed off to agents / Total number of conversations handled by the bot * 100"
+      }
+    }
+  },
  "OVERVIEW_REPORTS": {
    "HEADER": "Overview",
    "LIVE": "Live",
@@ -476,5 +509,54 @@
    "THURSDAY": "Thursday",
    "FRIDAY": "Friday",
    "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
+    "DROPDOWN": {
+      "ADD_FIlTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "No results found",
+      "NO_FILTER": "No filters available",
+      "SEARCH": "Search filter",
+      "INPUT_PLACEHOLDER": {
+        "SLA": "SLA name",
+        "AGENTS": "Agent name",
+        "INBOXES": "Inbox name",
+        "LABELS": "Label name",
+        "TEAMS": "Team name"
+      },
+      "SLA": "SLA Policy",
+      "INBOXES": "Inbox",
+      "AGENTS": "Agent",
+      "LABELS": "Label",
+      "TEAMS": "Team"
+    },
+    "METRICS": {
+      "HIT_RATE": {
+        "LABEL": "Hit Rate",
+        "TOOLTIP": "Percentage of SLAs created were completed successfully"
+      },
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "Conversation",
+        "AGENT": "Agent"
+      },
+      "VIEW_DETAILS": "View Details"
+    }
  }
 }
@@ -83,7 +83,10 @@
        "CONVERSATION_CREATION": "Send email notifications when a new conversation is created",
        "CONVERSATION_MENTION": "Send email notifications when you are mentioned in a conversation",
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in an assigned conversation",
-        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation"
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send email notifications when a new message is created in a participating conversation",
+        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
      },
      "API": {
        "UPDATE_SUCCESS": "Your notification preferences are updated successfully",
@@ -98,7 +101,10 @@
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in an assigned conversation",
        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "Send push notifications when a new message is created in a participating conversation",
        "HAS_ENABLED_PUSH": "You have enabled push for this browser.",
-        "REQUEST_PUSH": "Enable push notifications"
+        "REQUEST_PUSH": "Enable push notifications",
+        "SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
      },
      "PROFILE_IMAGE": {
        "LABEL": "Profile Image"
@@ -199,6 +205,7 @@
  "SIDEBAR": {
    "CURRENTLY_VIEWING_ACCOUNT": "Currently viewing:",
    "SWITCH": "Switch",
+    "INBOX_VIEW": "Inbox View",
    "CONVERSATIONS": "Conversations",
    "INBOX": "Inbox",
    "ALL_CONVERSATIONS": "All Conversations",
@@ -237,6 +244,8 @@
    "CAMPAIGNS": "Campaigns",
    "ONGOING": "Ongoing",
    "ONE_OFF": "One off",
+    "REPORTS_SLA": "SLA",
+    "REPORTS_BOT": "Bot",
    "REPORTS_AGENT": "Agents",
    "REPORTS_LABEL": "Labels",
    "REPORTS_INBOX": "Inbox",
@@ -1,22 +1,31 @@
 {
  "SLA": {
    "HEADER": "SLA",
-    "HEADER_BTN_TXT": "Add SLA",
+    "ADD_ACTION": "Add SLA",
+    "ADD_ACTION_LONG": "Create a new SLA Policy",
+    "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
+    "LEARN_MORE": "Learn more about SLA",
    "LOADING": "Fetching SLAs",
-    "SEARCH_404": "There are no items matching this query",
-    "SIDEBAR_TXT": "<p><b>SLA</b> <p>Think of Service Level Agreements (SLAs) like friendly promises between a service provider and a customer.</p> <p> These promises set clear expectations for things like how quickly the team will respond to issues, making sure you always get a reliable and top-notch experience!</p>",
    "LIST": {
      "404": "There are no SLAs available in this account.",
-      "TITLE": "Manage SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
-      "TABLE_HEADER": [
-        "Name",
-        "Description",
-        "FRT",
-        "NRT",
-        "RT",
-        "Business Hours"
-      ]
+      "EMPTY": {
+        "TITLE_1": "Enterprise P0",
+        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
+        "TITLE_2": "Enterprise P1",
+        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+      },
+      "BUSINESS_HOURS_ON": "Business hours on",
+      "BUSINESS_HOURS_OFF": "Business hours off",
+      "RESPONSE_TYPES": {
+        "FRT": "First response time threshold",
+        "NRT": "Next response time threshold",
+        "RT": "Resolution time threshold",
+        "SHORT_HAND": {
+          "FRT": "FRT",
+          "NRT": "NRT",
+          "RT": "RT"
+        }
+      }
    },
    "FORM": {
      "NAME": {
@@ -56,18 +65,32 @@
    },
    "ADD": {
      "TITLE": "Add SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
+      "DESC": "Friendly promises for great service!",
      "API": {
        "SUCCESS_MESSAGE": "SLA added successfully",
        "ERROR_MESSAGE": "There was an error, please try again"
      }
    },
-    "EDIT": {
-      "TITLE": "Edit SLA",
+    "DELETE": {
+      "TITLE": "Delete SLA",
      "API": {
-        "SUCCESS_MESSAGE": "SLA updated successfully",
+        "SUCCESS_MESSAGE": "SLA deleted successfully",
        "ERROR_MESSAGE": "There was an error, please try again"
+      },
+      "CONFIRM": {
+        "TITLE": "Confirm Deletion",
+        "MESSAGE": "Are you sure you want to delete ",
+        "YES": "Yes, Delete ",
+        "NO": "No, Keep "
      }
+    },
+    "EVENTS": {
+      "TITLE": "SLA Misses",
+      "FRT": "First response time",
+      "NRT": "Next response time",
+      "RT": "Resolution time",
+      "SHOW_MORE": "{count} more",
+      "HIDE": "Hide {count} rows"
    }
  }
 }
@@ -296,6 +296,8 @@
    "BUTTON": "إضافة سمة خاصة",
    "NOT_AVAILABLE": "لا توجد سمات مخصصة متاحة لجهة الاتصال هذه.",
    "COPY_SUCCESSFUL": "تم النسخ إلى الحافظة بنجاح",
+    "SHOW_MORE": "Show all attributes",
+    "SHOW_LESS": "Show less attributes",
    "ACTIONS": {
      "COPY": "نسخ السمة",
      "DELETE": "حذف السمة",
@@ -44,7 +44,8 @@
      "CUSTOM_ATTRIBUTE_CHECKBOX": "مربع",
      "CREATED_AT": "تم إنشاؤها في",
      "LAST_ACTIVITY": "آخر نشاط",
-      "REFERER_LINK": "رابط المرجع"
+      "REFERER_LINK": "رابط المرجع",
+      "BLOCKED": "Blocked"
    },
    "GROUPS": {
      "STANDARD_FILTERS": "الفلاتر القياسية",
@@ -64,7 +64,14 @@
      "SNOOZED_UNTIL": "Snoozed until",
      "SNOOZED_UNTIL_TOMORROW": "غفوة حتى الغد",
      "SNOOZED_UNTIL_NEXT_WEEK": "غفوة حتى الأسبوع القادم",
-      "SNOOZED_UNTIL_NEXT_REPLY": "غفوة حتى الرد التالي"
+      "SNOOZED_UNTIL_NEXT_REPLY": "غفوة حتى الرد التالي",
+      "SLA_STATUS": {
+        "FRT": "FRT {status}",
+        "NRT": "NRT {status}",
+        "RT": "RT {status}",
+        "MISSED": "missed",
+        "DUE": "due"
+      }
    },
    "RESOLVE_DROPDOWN": {
      "MARK_PENDING": "تحديد كمعلق",
@@ -0,0 +1,5 @@
+{
+  "GENERAL": {
+    "SHOWING_RESULTS": "Showing {firstIndex}-{lastIndex} of {totalCount} items"
+  }
+}
@@ -87,7 +87,10 @@
      "conversation_assignment": "تم تعيين المحادثة",
      "assigned_conversation_new_message": "رسالة جديدة",
      "participating_conversation_new_message": "رسالة جديدة",
-      "conversation_mention": "إشارة"
+      "conversation_mention": "إشارة",
+      "sla_missed_first_response": "SLA Missed",
+      "sla_missed_next_response": "SLA Missed",
+      "sla_missed_resolution": "SLA Missed"
    }
  },
  "NETWORK": {
@@ -4,24 +4,28 @@
      "TITLE": "صندوق الوارد",
      "DISPLAY_DROPDOWN": "Display",
      "LOADING": "Fetching notifications",
-      "EOF": "تم تحميل كافة الإشعارات 🎉",
      "404": "There are no active notifications in this group.",
      "NO_NOTIFICATIONS": "No notifications",
      "NOTE": "Notifications from all subscribed inboxes",
+      "NO_MESSAGES_AVAILABLE": "Oops! Not able to fetch messages",
      "SNOOZED_UNTIL": "Snoozed until",
      "SNOOZED_UNTIL_TOMORROW": "غفوة حتى الغد",
      "SNOOZED_UNTIL_NEXT_WEEK": "غفوة حتى الأسبوع القادم"
    },
    "ACTION_HEADER": {
      "SNOOZE": "Snooze notification",
-      "DELETE": "Delete notification"
+      "DELETE": "Delete notification",
+      "BACK": "العودة"
    },
    "TYPES": {
      "CONVERSATION_MENTION": "You have been mentioned in a conversation",
      "CONVERSATION_CREATION": "New conversation created",
      "CONVERSATION_ASSIGNMENT": "A conversation has been assigned to you",
      "ASSIGNED_CONVERSATION_NEW_MESSAGE": "New message in an assigned conversation",
-      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in"
+      "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "New message in a conversation you are participating in",
+      "SLA_MISSED_FIRST_RESPONSE": "SLA target first response missed for conversation",
+      "SLA_MISSED_NEXT_RESPONSE": "SLA target next response missed for conversation",
+      "SLA_MISSED_RESOLUTION": "SLA target resolution missed for conversation"
    },
    "MENU_ITEM": {
      "MARK_AS_READ": "Mark as read",
@@ -35,6 +35,14 @@
        "NAME": "عدد مرات الإغلاق",
        "DESC": "(الإجمالي)"
      },
+      "BOT_RESOLUTION_COUNT": {
+        "NAME": "عدد مرات الإغلاق",
+        "DESC": "(الإجمالي)"
+      },
+      "BOT_HANDOFF_COUNT": {
+        "NAME": "Handoff Count",
+        "DESC": "(الإجمالي)"
+      },
      "REPLY_TIME": {
        "NAME": "Customer waiting time",
        "TOOLTIP_TEXT": "Waiting time is %{metricValue} (based on %{conversationCount} replies)"
@@ -130,7 +138,11 @@
        "groupBy": "الشهر"
      }
    ],
-    "BUSINESS_HOURS": "ساعات العمل"
+    "BUSINESS_HOURS": "ساعات العمل",
+    "FILTER_ACTIONS": {
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "لم يتم العثور على النتائج"
+    }
  },
  "AGENT_REPORTS": {
    "HEADER": "نظرة عامة للوكلاء",
@@ -433,6 +445,27 @@
      }
    }
  },
+  "BOT_REPORTS": {
+    "HEADER": "Bot Reports",
+    "METRIC": {
+      "TOTAL_CONVERSATIONS": {
+        "LABEL": "No. of Conversations",
+        "TOOLTIP": "Total number of conversations handled by the bot"
+      },
+      "TOTAL_RESPONSES": {
+        "LABEL": "Total Responses",
+        "TOOLTIP": "Total number of responses sent by the bot"
+      },
+      "RESOLUTION_RATE": {
+        "LABEL": "Resolution Rate",
+        "TOOLTIP": "Total number of conversations resolved by the bot / Total number of conversations handled by the bot * 100"
+      },
+      "HANDOFF_RATE": {
+        "LABEL": "Handoff Rate",
+        "TOOLTIP": "Total number of conversations handed off to agents / Total number of conversations handled by the bot * 100"
+      }
+    }
+  },
  "OVERVIEW_REPORTS": {
    "HEADER": "نظرة عامة",
    "LIVE": "مباشر",
@@ -476,5 +509,54 @@
    "THURSDAY": "Thursday",
    "FRIDAY": "Friday",
    "SATURDAY": "Saturday"
+  },
+  "SLA_REPORTS": {
+    "HEADER": "SLA Reports",
+    "NO_RECORDS": "SLA applied conversations are not available.",
+    "LOADING": "Loading SLA data...",
+    "DOWNLOAD_SLA_REPORTS": "Download SLA reports",
+    "DOWNLOAD_FAILED": "Failed to download SLA Reports",
+    "DROPDOWN": {
+      "ADD_FIlTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "CLEAR_FILTER": "Clear filter",
+      "EMPTY_LIST": "لم يتم العثور على النتائج",
+      "NO_FILTER": "No filters available",
+      "SEARCH": "Search filter",
+      "INPUT_PLACEHOLDER": {
+        "SLA": "SLA name",
+        "AGENTS": "اسم الموظف",
+        "INBOXES": "اسم صندوق الوارد",
+        "LABELS": "اسم الوسم",
+        "TEAMS": "اسم الفريق"
+      },
+      "SLA": "SLA Policy",
+      "INBOXES": "صندوق الوارد",
+      "AGENTS": "موظف الدعم",
+      "LABELS": "الوسم",
+      "TEAMS": "الفريق"
+    },
+    "METRICS": {
+      "HIT_RATE": {
+        "LABEL": "Hit Rate",
+        "TOOLTIP": "Percentage of SLAs created were completed successfully"
+      },
+      "NO_OF_MISSES": {
+        "LABEL": "Number of Misses",
+        "TOOLTIP": "Total SLA misses in a certain period"
+      },
+      "NO_OF_CONVERSATIONS": {
+        "LABEL": "Number of Conversations",
+        "TOOLTIP": "Total number of conversations with SLA"
+      }
+    },
+    "TABLE": {
+      "HEADER": {
+        "POLICY": "Policy",
+        "CONVERSATION": "المحادثات",
+        "AGENT": "موظف الدعم"
+      },
+      "VIEW_DETAILS": "View Details"
+    }
  }
 }
@@ -83,7 +83,10 @@
        "CONVERSATION_CREATION": "إرسال إشعارات للبريد الإلكتروني عند ورود محادثة جديدة",
        "CONVERSATION_MENTION": "إرسال إشعارات بالبريد الإلكتروني عندما يتم ذكرك في محادثة",
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "إرسال إشعارات البريد الإلكتروني عند إنشاء رسالة جديدة في محادثة موكلة",
-        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "إرسال إشعارات التنية عند إنشاء رسالة جديدة في محادثة موكلة"
+        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "إرسال إشعارات التنية عند إنشاء رسالة جديدة في محادثة موكلة",
+        "SLA_MISSED_FIRST_RESPONSE": "Send email notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send email notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send email notifications when a conversation misses resolution SLA"
      },
      "API": {
        "UPDATE_SUCCESS": "يتم تحديث إعدادات الإشعارات بنجاح",
@@ -98,7 +101,10 @@
        "ASSIGNED_CONVERSATION_NEW_MESSAGE": "إرسال إشعارات التنية عند إنشاء رسالة جديدة في محادثة موكلة",
        "PARTICIPATING_CONVERSATION_NEW_MESSAGE": "إرسال إشعارات التنية عند إنشاء رسالة جديدة في محادثة موكلة",
        "HAS_ENABLED_PUSH": "لقد قمت بتمكين الإشعارات لهذا المتصفح.",
-        "REQUEST_PUSH": "تفعيل إشعارات المتصفح"
+        "REQUEST_PUSH": "تفعيل إشعارات المتصفح",
+        "SLA_MISSED_FIRST_RESPONSE": "Send push notifications when a conversation misses first response SLA",
+        "SLA_MISSED_NEXT_RESPONSE": "Send push notifications when a conversation misses next response SLA",
+        "SLA_MISSED_RESOLUTION": "Send push notifications when a conversation misses resolution SLA"
      },
      "PROFILE_IMAGE": {
        "LABEL": "صورة الملف الشخصي"
@@ -199,6 +205,7 @@
  "SIDEBAR": {
    "CURRENTLY_VIEWING_ACCOUNT": "مشاهدة حاليا:",
    "SWITCH": "تبديل",
+    "INBOX_VIEW": "Inbox View",
    "CONVERSATIONS": "المحادثات",
    "INBOX": "صندوق الوارد",
    "ALL_CONVERSATIONS": "كل المحادثات",
@@ -237,6 +244,8 @@
    "CAMPAIGNS": "الحملات",
    "ONGOING": "جارية",
    "ONE_OFF": "إيقاف واحد",
+    "REPORTS_SLA": "SLA",
+    "REPORTS_BOT": "رد آلي",
    "REPORTS_AGENT": "موظف الدعم",
    "REPORTS_LABEL": "الوسوم",
    "REPORTS_INBOX": "صندوق الوارد",
@@ -1,22 +1,31 @@
 {
  "SLA": {
    "HEADER": "SLA",
-    "HEADER_BTN_TXT": "Add SLA",
+    "ADD_ACTION": "Add SLA",
+    "ADD_ACTION_LONG": "Create a new SLA Policy",
+    "DESCRIPTION": "Service Level Agreements (SLAs) are contracts that define clear expectations between your team and customers. They establish standards for response and resolution times, creating a framework for accountability and ensures a consistent, high-quality experience.",
+    "LEARN_MORE": "Learn more about SLA",
    "LOADING": "Fetching SLAs",
-    "SEARCH_404": "لا توجد عناصر مطابقة لهذا الاستعلام",
-    "SIDEBAR_TXT": "<p><b>SLA</b> <p>Think of Service Level Agreements (SLAs) like friendly promises between a service provider and a customer.</p> <p> These promises set clear expectations for things like how quickly the team will respond to issues, making sure you always get a reliable and top-notch experience!</p>",
    "LIST": {
      "404": "There are no SLAs available in this account.",
-      "TITLE": "Manage SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
-      "TABLE_HEADER": [
-        "الاسم",
-        "الوصف",
-        "FRT",
-        "NRT",
-        "RT",
-        "ساعات العمل"
-      ]
+      "EMPTY": {
+        "TITLE_1": "Enterprise P0",
+        "DESC_1": "Issues raised by enterprise customers, that require immediate attention.",
+        "TITLE_2": "Enterprise P1",
+        "DESC_2": "Issues raised by enterprise customers, that needs to be acknowledged quickly."
+      },
+      "BUSINESS_HOURS_ON": "Business hours on",
+      "BUSINESS_HOURS_OFF": "Business hours off",
+      "RESPONSE_TYPES": {
+        "FRT": "First response time threshold",
+        "NRT": "Next response time threshold",
+        "RT": "Resolution time threshold",
+        "SHORT_HAND": {
+          "FRT": "FRT",
+          "NRT": "NRT",
+          "RT": "RT"
+        }
+      }
    },
    "FORM": {
      "NAME": {
@@ -56,18 +65,32 @@
    },
    "ADD": {
      "TITLE": "Add SLA",
-      "DESC": "SLAs: Friendly promises for great service!",
+      "DESC": "Friendly promises for great service!",
      "API": {
        "SUCCESS_MESSAGE": "SLA added successfully",
        "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى"
      }
    },
-    "EDIT": {
-      "TITLE": "Edit SLA",
+    "DELETE": {
+      "TITLE": "Delete SLA",
      "API": {
-        "SUCCESS_MESSAGE": "SLA updated successfully",
+        "SUCCESS_MESSAGE": "SLA deleted successfully",
        "ERROR_MESSAGE": "حدث خطأ، الرجاء المحاولة مرة أخرى"
+      },
+      "CONFIRM": {
+        "TITLE": "تأكيد الحذف",
+        "MESSAGE": "Are you sure you want to delete ",
+        "YES": "نعم، احذف ",
+        "NO": "لا، احتفظ "
      }
+    },
+    "EVENTS": {
+      "TITLE": "SLA Misses",
+      "FRT": "وقت الاستجابة الأولى",
+      "NRT": "Next response time",
+      "RT": "Resolution time",
+      "SHOW_MORE": "{count} more",
+      "HIDE": "Hide {count} rows"
    }
  }
 }
@@ -83,7 +83,7 @@
      "SELECT_ALL": "تحديد جميع الوكلاء",
      "SELECTED_COUNT": "تم تحديد %{selected} من أصل %{total} وكيل.",
      "BUTTON_TEXT": "إضافة موظفين",
-      "AGENT_VALIDATION_ERROR": "اختيار وكيل واحد على الاقل."
+      "AGENT_VALIDATION_ERROR": "اختيار وكيل واحد على الأقل."
    },
    "FINISH": {
      "TITLE": "أصبح فريقك جاهزة الآن!",
--- a/Show More
+++ b/Show More