Merge branch 'develop' into chore-replace-window-bus

![CleanShot 2024-05-09 at 12 44
07@2x](https://github.com/chatwoot/chatwoot/assets/18097732/2b2861d4-ddcb-481a-b411-f553c19ff573)

![CleanShot 2024-05-09 at 12 44
36@2x](https://github.com/chatwoot/chatwoot/assets/18097732/9cdb8213-acce-4499-a72b-1feba2b611a6)

---------

Co-authored-by: Fayaz Ahmed <fayazara@gmail.com>

.env.example

@@ -23,6 +23,9 @@ FORCE_SSL=false
 ENABLE_ACCOUNT_SIGNUP=false
 
 # Redis config
+# specify the configs via single URL or individual variables
+# ref: https://www.iana.org/assignments/uri-schemes/prov/redis
+# You can also use the following format for the URL: redis://:password@host:port/db_number
 REDIS_URL=redis://redis:6379
 # If you are using docker-compose, set this variable's value to be any string,
 # which will be the password for the redis service running inside the docker-compose
@@ -180,8 +183,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 +252,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

.github/CODEOWNERS

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

Gemfile

@@ -69,15 +69,15 @@ 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'
+gem 'devise_token_auth', '>= 1.2.3'
 # authorization
 gem 'jwt'
 gem 'pundit'
 # super admin
 gem 'administrate', '>= 0.20.1'
-gem 'administrate-field-active_storage', '>= 1.0.1'
+gem 'administrate-field-active_storage', '>= 1.0.2'
 gem 'administrate-field-belongs_to_search', '>= 0.9.0'
 
 ##--- gems for pubsub service ---##
@@ -113,10 +113,10 @@ gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
 gem 'sentry-rails', '>= 5.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.14.0', require: false
+gem 'sentry-sidekiq', '>= 5.15.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.2.1'
+gem 'sidekiq', '>= 7.2.4'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
 
@@ -165,8 +165,8 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2'
-gem 'omniauth-rails_csrf_protection', '~> 1.0'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
+gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
 ## Gems for reponse bot
 # adds cosine similarity to postgres using vector extension
@@ -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

Gemfile.lock

@@ -113,7 +113,7 @@ GEM
       kaminari (~> 1.2.2)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
-    administrate-field-active_storage (1.0.1)
+    administrate-field-active_storage (1.0.2)
       administrate (>= 0.2.2)
       rails (>= 7.0)
     administrate-field-belongs_to_search (0.9.0)
@@ -148,10 +148,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.1.1)
-    bcrypt (3.1.19)
+    base64 (0.2.0)
+    bcrypt (3.1.20)
+    bigdecimal (3.1.7)
     bindex (0.8.1)
-    blingfire (0.1.8)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
     brakeman (5.4.1)
@@ -194,16 +194,16 @@ 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)
       responders
       warden (~> 1.2.3)
-    devise_token_auth (1.2.1)
+    devise_token_auth (1.2.3)
       bcrypt (~> 3.0)
       devise (> 3.5.2, < 5)
-      rails (>= 4.2.0, < 7.1)
+      rails (>= 4.2.0, < 7.2)
     diff-lcs (1.5.0)
     digest-crc (0.6.4)
       rake (>= 12.0.0, < 14.0.0)
@@ -237,9 +237,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 +246,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 +316,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 +335,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 +369,11 @@ GEM
       mini_mime (>= 1.0.0)
       multi_xml (>= 0.5.2)
     httpclient (2.8.3)
-    i18n (1.14.1)
+    i18n (1.14.5)
       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 +393,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)
@@ -448,20 +448,20 @@ GEM
       net-imap
       net-pop
       net-smtp
-    marcel (1.0.2)
+    marcel (1.0.4)
     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)
-    method_source (1.0.0)
+      railties (>= 3.0.0, < 8)
+    method_source (1.1.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,9 +470,11 @@ 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)
+    net-imap (0.4.11)
       date
       net-protocol
     net-pop (0.1.2)
@@ -487,17 +489,16 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.0)
-    nokogiri (1.16.2)
+    nio4r (2.7.3)
+    nokogiri (1.16.5)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.16.2-arm64-darwin)
+    nokogiri (1.16.5-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-darwin)
+    nokogiri (1.16.5-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.16.2-x86_64-linux)
+    nokogiri (1.16.5-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 +516,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)
+    omniauth-rails_csrf_protection (1.0.2)
       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 +552,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 +561,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,13 +598,13 @@ 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)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.19.1)
+    redis-client (0.22.1)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -634,7 +628,8 @@ GEM
     retriable (3.1.2)
     reverse_markdown (2.1.1)
       nokogiri
-    rexml (3.2.5)
+    rexml (3.2.8)
+      strscan (>= 3.0.9)
     rspec-core (3.12.2)
       rspec-support (~> 3.12.0)
     rspec-expectations (3.12.3)
@@ -709,18 +704,19 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.14.0)
+    sentry-rails (5.17.3)
       railties (>= 5.0)
-      sentry-ruby (~> 5.14.0)
-    sentry-ruby (5.14.0)
+      sentry-ruby (~> 5.17.3)
+    sentry-ruby (5.17.3)
+      bigdecimal
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.14.0)
-      sentry-ruby (~> 5.14.0)
+    sentry-sidekiq (5.17.3)
+      sentry-ruby (~> 5.17.3)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.1)
+    sidekiq (7.2.4)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
@@ -763,9 +759,10 @@ GEM
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (8.5.0)
+    strscan (3.1.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 +787,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 +821,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.12)
+    zeitwerk (2.6.14)
 
 PLATFORMS
   arm64-darwin-20
@@ -841,7 +839,7 @@ DEPENDENCIES
   activerecord-import
   acts-as-taggable-on
   administrate (>= 0.20.1)
-  administrate-field-active_storage (>= 1.0.1)
+  administrate-field-active_storage (>= 1.0.2)
   administrate-field-belongs_to_search (>= 0.9.0)
   annotate
   attr_extras
@@ -862,9 +860,9 @@ DEPENDENCIES
   database_cleaner
   ddtrace
   debug (~> 1.8)
-  devise (>= 4.9.3)
+  devise (>= 4.9.4)
   devise-secure_password!
-  devise_token_auth
+  devise_token_auth (>= 1.2.3)
   dotenv-rails
   down
   elastic-apm
@@ -887,7 +885,6 @@ DEPENDENCIES
   hashie
   html2text!
   image_processing
-  informers
   jbuilder
   json_refs
   json_schemer
@@ -900,16 +897,16 @@ 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)
+  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   pg
   pg_search
   pgvector
@@ -938,9 +935,9 @@ DEPENDENCIES
   seed_dump
   sentry-rails (>= 5.14.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.14.0)
+  sentry-sidekiq (>= 5.15.0)
   shoulda-matchers
-  sidekiq (>= 7.2.1)
+  sidekiq (>= 7.2.4)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)

Makefile

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

app.json

@@ -55,7 +55,7 @@
       "plan": "heroku-redis:mini"
     },
     {
-      "plan": "heroku-postgresql:mini"
+      "plan": "heroku-postgresql:essential-0"
     }
   ],
   "stack": "heroku-20",

app/builders/agent_builder.rb

@@ -16,7 +16,6 @@ class AgentBuilder
   def perform
     ActiveRecord::Base.transaction do
       @user = find_or_create_user
-      send_confirmation_if_required
       create_account_user
     end
     @user
@@ -34,11 +33,6 @@ class AgentBuilder
     User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
   end
 
-  # Sends confirmation instructions if the user is persisted and not confirmed.
-  def send_confirmation_if_required
-    @user.send_confirmation_instructions if user_needs_confirmation?
-  end
-
   # Checks if the user needs confirmation.
   # @return [Boolean] true if the user is persisted and not confirmed, false otherwise.
   def user_needs_confirmation?

app/builders/contact_inbox_with_contact_builder.rb

@@ -19,9 +19,9 @@ class ContactInboxWithContactBuilder
 
     ActiveRecord::Base.transaction(requires_new: true) do
       build_contact_with_contact_inbox
-      update_contact_avatar(@contact) unless @contact.avatar.attached?
-      @contact_inbox
     end
+    update_contact_avatar(@contact) unless @contact.avatar.attached?
+    @contact_inbox
   end
 
   private

app/builders/messages/facebook/message_builder.rb

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

app/builders/messages/instagram/message_builder.rb

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

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

@@ -19,7 +19,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
       account: Current.account
     )
 
-    builder.perform
+    @agent = builder.perform
   end
 
   def update

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

@@ -21,6 +21,6 @@ class Api::V1::Accounts::BulkActionsController < Api::V1::Accounts::BaseControll
   end
 
   def permitted_params
-    params.permit(:type, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
+    params.permit(:type, :snoozed_until, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
   end
 end

app/controllers/api/v1/accounts/channels/twilio_channels_controller.rb

@@ -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])

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

@@ -46,7 +46,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
 
   def export
     column_names = params['column_names']
-    Account::ContactsExportJob.perform_later(Current.account.id, column_names, Current.user.email)
+    filter_params = { :payload => params.permit!['payload'], :label => params.permit!['label'] }
+    Account::ContactsExportJob.perform_later(Current.account.id, Current.user.id, column_names, filter_params)
     head :ok, message: I18n.t('errors.contacts.export.success')
   end
 
@@ -61,10 +62,14 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def show; end
 
   def filter
-    result = ::Contacts::FilterService.new(params.permit!, current_user).perform
+    result = ::Contacts::FilterService.new(Current.account, Current.user, params.permit!).perform
     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

app/controllers/api/v1/accounts/conversations/draft_messages_controller.rb

@@ -0,0 +1,28 @@
+class Api::V1::Accounts::Conversations::DraftMessagesController < Api::V1::Accounts::Conversations::BaseController
+  def show
+    render json: { has_draft: false } and return unless Redis::Alfred.exists?(draft_redis_key)
+
+    draft_message = Redis::Alfred.get(draft_redis_key)
+    render json: { has_draft: true, message: draft_message }
+  end
+
+  def update
+    Redis::Alfred.set(draft_redis_key, draft_message_params)
+    head :ok
+  end
+
+  def destroy
+    Redis::Alfred.delete(draft_redis_key)
+    head :ok
+  end
+
+  private
+
+  def draft_redis_key
+    format(Redis::Alfred::CONVERSATION_DRAFT_MESSAGE, id: @conversation.id)
+  end
+
+  def draft_message_params
+    params.dig(:draft_message, :message) || ''
+  end
+end

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

@@ -36,10 +36,18 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     end
   end
 
+  def update
+    @conversation.update!(permitted_update_params)
+  end
+
   def filter
     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
@@ -110,6 +118,11 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   private
 
+  def permitted_update_params
+    # TODO: Move the other conversation attributes to this method and remove specific endpoints for each attribute
+    params.permit(:priority)
+  end
+
   def update_last_seen_on_conversation(last_seen_at, update_assignee)
     # rubocop:disable Rails/SkipsModelValidations
     @conversation.update_column(:agent_last_seen_at, last_seen_at)
@@ -176,3 +189,5 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.assignee_id? && Current.user == @conversation.assignee
   end
 end
+
+Api::V1::Accounts::ConversationsController.prepend_mod_with('Api::V1::Accounts::ConversationsController')

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

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

app/controllers/application_controller.rb

@@ -25,3 +25,4 @@ class ApplicationController < ActionController::Base
     }
   end
 end
+ApplicationController.include_mod_with('Concerns::ApplicationControllerConcern')

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update],
     'api/v1/accounts/conversations/messages' => ['create'],
     'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze

app/controllers/concerns/domain_helper.rb

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

app/controllers/concerns/microsoft_concern.rb

@@ -2,7 +2,10 @@ module MicrosoftConcern
   extend ActiveSupport::Concern
 
   def microsoft_client
-    ::OAuth2::Client.new(ENV.fetch('AZURE_APP_ID', nil), ENV.fetch('AZURE_APP_SECRET', nil),
+    app_id = GlobalConfigService.load('AZURE_APP_ID', nil)
+    app_secret = GlobalConfigService.load('AZURE_APP_SECRET', nil)
+
+    ::OAuth2::Client.new(app_id, app_secret,
                          {
                            site: 'https://login.microsoftonline.com',
                            authorize_url: 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize',

app/controllers/concerns/switch_locale.rb

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

app/controllers/dashboard_controller.rb

@@ -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',
@@ -57,7 +58,7 @@ class DashboardController < ActionController::Base
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
       IS_ENTERPRISE: ChatwootApp.enterprise?,
-      AZURE_APP_ID: ENV.fetch('AZURE_APP_ID', ''),
+      AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
       GIT_SHA: GIT_HASH
     }
   end

app/controllers/devise_overrides/sessions_controller.rb

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

app/controllers/microsoft_controller.rb

@@ -12,6 +12,6 @@ class MicrosoftController < ApplicationController
   end
 
   def microsoft_indentity
-    @identity_json = ENV.fetch('AZURE_APP_ID', nil)
+    @identity_json = GlobalConfigService.load('AZURE_APP_ID', nil)
   end
 end

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

@@ -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')

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

@@ -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, &)

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

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

app/controllers/public_controller.rb

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

app/controllers/super_admin/app_configs_controller.rb

@@ -35,6 +35,8 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
     @allowed_configs = case @config
                        when 'facebook'
                          %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
+                       when 'microsoft'
+                         %w[AZURE_APP_ID AZURE_APP_SECRET]
                        when 'email'
                          ['MAILER_INBOUND_EMAIL_DOMAIN']
                        else

app/dispatchers/async_dispatcher.rb

@@ -10,14 +10,15 @@ class AsyncDispatcher < BaseDispatcher
 
   def listeners
     [
+      AutomationRuleListener.instance,
       CampaignListener.instance,
       CsatSurveyListener.instance,
       HookListener.instance,
       InstallationWebhookListener.instance,
       NotificationListener.instance,
+      ParticipationListener.instance,
       ReportingEventListener.instance,
-      WebhookListener.instance,
-      AutomationRuleListener.instance
+      WebhookListener.instance
     ]
   end
 end

app/finders/conversation_finder.rb

@@ -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')

app/helpers/api/v2/accounts/reports_helper.rb

@@ -1,7 +1,7 @@
 module Api::V2::Accounts::ReportsHelper
   def generate_agents_report
     Current.account.users.map do |agent|
-      agent_report = generate_report({ type: :agent, id: agent.id })
+      agent_report = report_builder({ type: :agent, id: agent.id }).summary
       [agent.name] + generate_readable_report_metrics(agent_report)
     end
   end
@@ -15,7 +15,7 @@ module Api::V2::Accounts::ReportsHelper
 
   def generate_teams_report
     Current.account.teams.map do |team|
-      team_report = generate_report({ type: :team, id: team.id })
+      team_report = report_builder({ type: :team, id: team.id }).summary
       [team.name] + generate_readable_report_metrics(team_report)
     end
   end
@@ -27,7 +27,7 @@ module Api::V2::Accounts::ReportsHelper
     end
   end
 
-  def generate_report(report_params)
+  def report_builder(report_params)
     V2::ReportBuilder.new(
       Current.account,
       report_params.merge(
@@ -37,7 +37,11 @@ module Api::V2::Accounts::ReportsHelper
           business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
         }
       )
-    ).short_summary
+    )
+  end
+
+  def generate_report(report_params)
+    report_builder(report_params).short_summary
   end
 
   private
@@ -46,7 +50,9 @@ module Api::V2::Accounts::ReportsHelper
     [
       report_metric[:conversations_count],
       Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:reply_time]).format,
+      report_metric[:resolutions_count]
     ]
   end
 end

app/helpers/application_helper.rb

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

app/helpers/filter_helper.rb

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

app/javascript/dashboard/api/contacts.js

@@ -77,8 +77,8 @@ class ContactAPI extends ApiClient {
     return axios.delete(`${this.url}/${contactId}/avatar`);
   }
 
-  exportContacts() {
-    return axios.get(`${this.url}/export`);
+  exportContacts(queryPayload) {
+    return axios.post(`${this.url}/export`, queryPayload);
   }
 }
 

app/javascript/dashboard/api/reports.js

@@ -84,6 +84,24 @@ class ReportsAPI extends ApiClient {
       params: { since, until, business_hours: businessHours },
     });
   }
+
+  getBotMetrics({ from, to } = {}) {
+    return axios.get(`${this.url}/bot_metrics`, {
+      params: { since: from, until: to },
+    });
+  }
+
+  getBotSummary({ from, to, groupBy, businessHours } = {}) {
+    return axios.get(`${this.url}/bot_summary`, {
+      params: {
+        since: from,
+        until: to,
+        type: 'account',
+        group_by: groupBy,
+        business_hours: businessHours,
+      },
+    });
+  }
 }
 
 export default new ReportsAPI();

app/javascript/dashboard/api/slaReports.js

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

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

@@ -111,6 +111,40 @@ describe('#Reports API', () => {
       });
     });
 
+    it('#getBotMetrics', () => {
+      reportsAPI.getBotMetrics({ from: 1621103400, to: 1621621800 });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/bot_metrics',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+          },
+        }
+      );
+    });
+
+    it('#getBotSummary', () => {
+      reportsAPI.getBotSummary({
+        from: 1621103400,
+        to: 1621621800,
+        groupBy: 'date',
+        businessHours: true,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/bot_summary',
+        {
+          params: {
+            since: 1621103400,
+            until: 1621621800,
+            type: 'account',
+            group_by: 'date',
+            business_hours: true,
+          },
+        }
+      );
+    });
+
     it('#getConversationMetric', () => {
       reportsAPI.getConversationMetric('account');
       expect(axiosMock.get).toHaveBeenCalledWith(

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

@@ -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'],
+          },
+        }
+      );
+    });
+  });
+});

app/javascript/dashboard/assets/scss/_date-picker.scss

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

app/javascript/dashboard/assets/scss/_layout.scss

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

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

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

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

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

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

@@ -12,7 +12,6 @@ h6 {
 
 p {
   text-rendering: optimizeLegibility;
-  word-spacing: 0.12em;
 
   @apply mb-2 leading-[1.65] text-sm;
 
@@ -63,12 +62,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] {

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

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

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,9 +1,9 @@
 <template>
   <button
-    class="sm:w-[50%] md:w-1/3 lg:w-1/4 bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
     @click="$emit('click')"
   >
-    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
     <h3
       class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
     >

app/javascript/dashboard/components/ChatList.vue

@@ -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,
@@ -293,7 +288,6 @@ export default {
       foldersQuery: {},
       showAddFoldersModal: false,
       showDeleteFoldersModal: false,
-      selectedConversations: [],
       selectedInboxes: [],
       isContextMenuOpen: false,
       appliedFilter: [],
@@ -334,6 +328,7 @@ export default {
       inboxesList: 'inboxes/getInboxes',
       campaigns: 'campaigns/getAllCampaigns',
       labels: 'labels/getLabels',
+      selectedConversations: 'bulkActions/getSelectedConversationIds',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -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();
@@ -794,7 +799,7 @@ export default {
       });
     },
     resetBulkActions() {
-      this.selectedConversations = [];
+      this.$store.dispatch('bulkActions/clearSelectedConversationIds');
       this.selectedInboxes = [];
     },
     onBasicFilterChange(value, type) {
@@ -825,12 +830,16 @@ export default {
       return this.selectedConversations.includes(id);
     },
     selectConversation(conversationId, inboxId) {
-      this.selectedConversations.push(conversationId);
+      this.$store.dispatch(
+        'bulkActions/setSelectedConversationIds',
+        conversationId
+      );
       this.selectedInboxes.push(inboxId);
     },
     deSelectConversation(conversationId, inboxId) {
-      this.selectedConversations = this.selectedConversations.filter(
-        item => item !== conversationId
+      this.$store.dispatch(
+        'bulkActions/removeSelectedConversationIds',
+        conversationId
       );
       this.selectedInboxes = this.selectedInboxes.filter(
         item => item !== inboxId
@@ -838,7 +847,10 @@ export default {
     },
     selectAllConversations(check) {
       if (check) {
-        this.selectedConversations = this.conversationList.map(item => item.id);
+        this.$store.dispatch(
+          'bulkActions/setSelectedConversationIds',
+          this.conversationList.map(item => item.id)
+        );
         this.selectedInboxes = this.conversationList.map(item => item.inbox_id);
       } else {
         this.resetBulkActions();
@@ -854,7 +866,7 @@ export default {
             assignee_id: agent.id,
           },
         });
-        this.selectedConversations = [];
+        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -952,7 +964,7 @@ export default {
             add: labels,
           },
         });
-        this.selectedConversations = [];
+        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         if (conversationId) {
           this.showAlert(
             this.$t(
@@ -979,13 +991,13 @@ export default {
             team_id: team.id,
           },
         });
-        this.selectedConversations = [];
+        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
       }
     },
-    async onUpdateConversations(status) {
+    async onUpdateConversations(status, snoozedUntil) {
       try {
         await this.$store.dispatch('bulkActions/process', {
           type: 'Conversation',
@@ -993,8 +1005,9 @@ export default {
           fields: {
             status,
           },
+          snoozed_until: snoozedUntil,
         });
-        this.selectedConversations = [];
+        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
       } catch (err) {
         this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
@@ -1034,24 +1047,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;
 

app/javascript/dashboard/components/CustomAttribute.vue

@@ -2,23 +2,32 @@
   <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 inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
           >
             {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
           </span>
           <woot-button
-            v-if="showActions"
+            v-if="showCopyAndDeleteButton"
             v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
             variant="link"
             size="medium"
@@ -31,13 +40,13 @@
       </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"
             v-model="editedValue"
             :type="inputType"
-            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
             autofocus="true"
             :class="{ error: $v.editedValue.$error }"
             @blur="$v.editedValue.$touch"
@@ -61,7 +70,7 @@
       </div>
       <div
         v-show="!isEditing"
-        class="value--view"
+        class="flex group"
         :class="{ 'is-editable': showActions }"
       >
         <a
@@ -69,35 +78,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>
@@ -130,17 +139,21 @@ import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
+import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
 import customAttributeMixin from '../mixins/customAttributeMixin';
+
 const DATE_FORMAT = 'yyyy-MM-dd';
 
 export default {
   components: {
     MultiselectDropdown,
+    HelperTextPopup,
   },
   mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
+    description: { type: String, default: '' },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
@@ -160,11 +173,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 +250,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 +292,10 @@ export default {
         this.$refs.inputfield.focus();
       }
     },
+    onClickAway() {
+      this.$v.$reset();
+      this.isEditing = false;
+    },
     onEdit() {
       this.isEditing = true;
       this.$nextTick(() => {
@@ -294,6 +322,7 @@ export default {
     },
     onDelete() {
       this.isEditing = false;
+      this.$v.$reset();
       this.$emit('delete', this.attributeKey);
     },
     onCopy() {
@@ -304,35 +333,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;

app/javascript/dashboard/components/FormSection.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flex flex-col items-start w-full gap-6">
+    <div class="flex flex-col w-full gap-4">
+      <h4 v-if="title" class="text-lg font-medium text-ash-900">
+        {{ title }}
+      </h4>
+      <div class="flex flex-row items-center justify-between">
+        <div class="flex-grow h-px bg-ash-200" />
+      </div>
+      <p v-if="description" class="mb-0 text-sm font-normal text-ash-900">
+        {{ description }}
+      </p>
+    </div>
+    <div class="flex flex-col w-full gap-6">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>

app/javascript/dashboard/components/Modal.vue

@@ -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: '',

app/javascript/dashboard/components/ModalHeader.vue

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

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

@@ -88,15 +88,9 @@
 <script>
 import { getUnixTime } from 'date-fns';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.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 +108,7 @@ export default {
     WootDropdownMenu,
     CustomSnoozeModal,
   },
-  mixins: [clickaway, alertMixin, eventListenerMixins],
+  mixins: [alertMixin, keyboardEventListenerMixins],
   props: { conversationId: { type: [String, Number], required: true } },
   data() {
     return {
@@ -159,37 +153,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) {

app/javascript/dashboard/components/index.js

@@ -24,6 +24,7 @@ import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
 import Thumbnail from './widgets/Thumbnail.vue';
+import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
   AvatarUploader,
@@ -51,6 +52,7 @@ const WootUIKit = {
   Tabs,
   TabsItem,
   Thumbnail,
+  DatePicker,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

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

@@ -47,7 +47,6 @@
 
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -67,7 +66,7 @@ export default {
     AvailabilityStatusBadge,
   },
 
-  mixins: [clickaway, alertMixin],
+  mixins: [alertMixin],
 
   data() {
     return {

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

@@ -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) {

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

@@ -1,3 +1,4 @@
+import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';
 
 const reports = accountId => ({
@@ -6,10 +7,12 @@ const reports = accountId => ({
     'account_overview_reports',
     'conversation_reports',
     'csat_reports',
+    'bot_reports',
     'agent_reports',
     'label_reports',
     'inbox_reports',
     'team_reports',
+    'sla_reports',
   ],
   menuItems: [
     {
@@ -33,6 +36,14 @@ const reports = accountId => ({
       toState: frontendURL(`accounts/${accountId}/reports/csat`),
       toStateName: 'csat_reports',
     },
+    {
+      icon: 'bot',
+      label: 'REPORTS_BOT',
+      hasSubMenu: false,
+      featureFlag: FEATURE_FLAGS.RESPONSE_BOT,
+      toState: frontendURL(`accounts/${accountId}/reports/bot`),
+      toStateName: 'bot_reports',
+    },
     {
       icon: 'people',
       label: 'REPORTS_AGENT',
@@ -61,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',
+    },
   ],
 });
 

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

@@ -142,6 +142,26 @@ const settings = accountId => ({
       toStateName: 'settings_applications',
       featureFlag: FEATURE_FLAGS.INTEGRATIONS,
     },
+    {
+      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,
+    },
+    {
+      icon: 'document-list-clock',
+      label: 'SLA',
+      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',
@@ -150,24 +170,6 @@ const settings = accountId => ({
       toStateName: 'billing_settings_index',
       showOnlyOnCloud: true,
     },
-    {
-      icon: 'key',
-      label: 'AUDIT_LOGS',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
-      toStateName: 'auditlogs_list',
-      featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
-      beta: true,
-    },
-    {
-      icon: 'key',
-      label: 'SLA',
-      hasSubMenu: false,
-      toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
-      toStateName: 'sla_list',
-      featureFlag: FEATURE_FLAGS.SLA,
-      beta: true,
-    },
   ],
 });
 

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

@@ -7,7 +7,7 @@
       :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
       :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
     />
-    <div class="px-8 pt-4 pb-8">
+    <div class="px-8 py-4">
       <div
         v-for="account in currentUser.accounts"
         :id="`account-${account.id}`"
@@ -45,10 +45,10 @@
 
     <div
       v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center p-8 gap-2"
+      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
     >
       <button
-        class="button success large expanded nice"
+        class="button success large expanded nice w-full"
         @click="$emit('show-create-account-modal')"
       >
         {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}

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

@@ -106,7 +106,6 @@
 </template>
 
 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -119,7 +118,6 @@ export default {
     WootDropdownItem,
     AvailabilityStatus,
   },
-  mixins: [clickaway],
   props: {
     show: {
       type: Boolean,

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

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

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

@@ -0,0 +1,304 @@
+<script setup>
+import { ref, watch } from 'vue';
+import {
+  getActiveDateRange,
+  moveCalendarDate,
+  DATE_RANGE_TYPES,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from './helpers/DatePickerHelper';
+import {
+  isValid,
+  startOfMonth,
+  subDays,
+  startOfDay,
+  endOfDay,
+  isBefore,
+  subMonths,
+  addMonths,
+  isSameMonth,
+  differenceInCalendarMonths,
+  setMonth,
+  setYear,
+  isAfter,
+} from 'date-fns';
+
+import DatePickerButton from './components/DatePickerButton.vue';
+import CalendarDateInput from './components/CalendarDateInput.vue';
+import CalendarDateRange from './components/CalendarDateRange.vue';
+import CalendarYear from './components/CalendarYear.vue';
+import CalendarMonth from './components/CalendarMonth.vue';
+import CalendarWeek from './components/CalendarWeek.vue';
+import CalendarFooter from './components/CalendarFooter.vue';
+
+const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
+
+const showDatePicker = ref(false);
+const calendarViews = ref({ start: WEEK, end: WEEK });
+const currentDate = ref(new Date());
+const selectedStartDate = ref(startOfDay(subDays(currentDate.value, 6))); // LAST_7_DAYS
+const selectedEndDate = ref(endOfDay(currentDate.value));
+// Setting the start and end calendar
+const startCurrentDate = ref(startOfDay(selectedStartDate.value));
+const endCurrentDate = ref(
+  isSameMonth(selectedStartDate.value, selectedEndDate.value)
+    ? startOfMonth(addMonths(selectedEndDate.value, 1)) // Moves to the start of the next month if dates are in the same month (Mounted case LAST_7_DAYS)
+    : startOfMonth(selectedEndDate.value) // Always shows the month of the end date starting from the first (Mounted case LAST_7_DAYS)
+);
+const selectingEndDate = ref(false);
+const selectedRange = ref(LAST_7_DAYS);
+const hoveredEndDate = ref(null);
+
+const manualStartDate = ref(selectedStartDate.value);
+const manualEndDate = ref(selectedEndDate.value);
+
+const emit = defineEmits(['change']);
+
+// Watcher will set the start and end dates based on the selected range
+watch(selectedRange, newRange => {
+  if (newRange !== CUSTOM_RANGE) {
+    // If selecting a range other than last 7 days or last 30 days, set the start and end dates to the selected start and end dates
+    // If selecting last 7 days or last 30 days is, set the start date to the selected start date
+    // and the end date to one month ahead of the start date if the start date and end date are in the same month
+    // Otherwise set the end date to the selected end date
+    const isLastSevenOrThirtyDays =
+      newRange === LAST_7_DAYS || newRange === LAST_30_DAYS;
+    startCurrentDate.value = selectedStartDate.value;
+    endCurrentDate.value =
+      isLastSevenOrThirtyDays &&
+      isSameMonth(selectedStartDate.value, selectedEndDate.value)
+        ? startOfMonth(addMonths(selectedStartDate.value, 1))
+        : selectedEndDate.value;
+    selectingEndDate.value = false;
+  } else if (!selectingEndDate.value) {
+    // If selecting a custom range and not selecting an end date, set the start date to the selected start date
+    startCurrentDate.value = startOfDay(currentDate.value);
+  }
+});
+
+// Watcher will set the input values based on the selected start and end dates
+watch(
+  [selectedStartDate, selectedEndDate],
+  ([newStart, newEnd]) => {
+    if (isValid(newStart)) {
+      manualStartDate.value = newStart;
+    } else {
+      manualStartDate.value = selectedStartDate.value;
+    }
+
+    if (isValid(newEnd)) {
+      manualEndDate.value = newEnd;
+    } else {
+      manualEndDate.value = selectedEndDate.value;
+    }
+  },
+  { immediate: true }
+);
+
+// Watcher to ensure dates are always in logical order
+// This watch is will ensure that the start date is always before the end date
+watch(
+  [startCurrentDate, endCurrentDate],
+  ([newStart, newEnd], [oldStart, oldEnd]) => {
+    const monthDifference = differenceInCalendarMonths(newEnd, newStart);
+
+    if (newStart !== oldStart) {
+      if (isAfter(newStart, newEnd) || monthDifference === 0) {
+        // Adjust the end date forward if the start date is adjusted and is after the end date or in the same month
+        endCurrentDate.value = addMonths(newStart, 1);
+      }
+    }
+    if (newEnd !== oldEnd) {
+      if (isBefore(newEnd, newStart) || monthDifference === 0) {
+        // Adjust the start date backward if the end date is adjusted and is before the start date or in the same month
+        startCurrentDate.value = subMonths(newEnd, 1);
+      }
+    }
+  },
+  { immediate: true, deep: true }
+);
+
+const setDateRange = range => {
+  selectedRange.value = range.value;
+  const { start, end } = getActiveDateRange(range.value, currentDate.value);
+  selectedStartDate.value = start;
+  selectedEndDate.value = end;
+};
+
+const moveCalendar = (calendar, direction, period = MONTH) => {
+  const { start, end } = moveCalendarDate(
+    calendar,
+    startCurrentDate.value,
+    endCurrentDate.value,
+    direction,
+    period
+  );
+  startCurrentDate.value = start;
+  endCurrentDate.value = end;
+};
+
+const selectDate = day => {
+  selectedRange.value = CUSTOM_RANGE;
+  if (!selectingEndDate.value || day < selectedStartDate.value) {
+    selectedStartDate.value = day;
+    selectedEndDate.value = null;
+    selectingEndDate.value = true;
+  } else {
+    selectedEndDate.value = day;
+    selectingEndDate.value = false;
+  }
+};
+
+const setViewMode = (calendar, mode) => {
+  selectedRange.value = CUSTOM_RANGE;
+  calendarViews.value[calendar] = mode;
+};
+
+const openCalendar = (index, calendarType, period = MONTH) => {
+  const current =
+    calendarType === START_CALENDAR
+      ? startCurrentDate.value
+      : endCurrentDate.value;
+  const newDate =
+    period === MONTH
+      ? setMonth(startOfMonth(current), index)
+      : setYear(current, index);
+  if (calendarType === START_CALENDAR) {
+    startCurrentDate.value = newDate;
+  } else {
+    endCurrentDate.value = newDate;
+  }
+  setViewMode(calendarType, period === MONTH ? WEEK : MONTH);
+};
+
+const updateManualInput = (newDate, calendarType) => {
+  if (calendarType === START_CALENDAR) {
+    selectedStartDate.value = newDate;
+    startCurrentDate.value = newDate;
+  } else {
+    selectedEndDate.value = newDate;
+    endCurrentDate.value = newDate;
+  }
+  selectingEndDate.value = false;
+};
+
+const handleManualInputError = message => {
+  bus.$emit('newToastMessage', message);
+};
+
+const resetDatePicker = () => {
+  startCurrentDate.value = startOfDay(currentDate.value); // Resets to today at start of the day
+  endCurrentDate.value = addMonths(startOfDay(currentDate.value), 1); // Resets to one month ahead
+  selectedStartDate.value = startOfDay(subDays(currentDate.value, 6));
+  selectedEndDate.value = endOfDay(currentDate.value);
+  selectingEndDate.value = false;
+  selectedRange.value = LAST_7_DAYS;
+  // Reset view modes if they are being used to toggle between different calendar views
+  calendarViews.value = { start: WEEK, end: WEEK };
+};
+
+const emitDateRange = () => {
+  if (!isValid(selectedStartDate.value) || !isValid(selectedEndDate.value)) {
+    bus.$emit('newToastMessage', 'Please select a valid time range');
+  } else {
+    showDatePicker.value = false;
+    emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
+  }
+};
+</script>
+
+<template>
+  <div class="relative font-inter">
+    <DatePickerButton
+      :selected-start-date="selectedStartDate"
+      :selected-end-date="selectedEndDate"
+      :selected-range="selectedRange"
+      @open="showDatePicker = !showDatePicker"
+    />
+    <div
+      v-if="showDatePicker"
+      class="flex absolute top-9 ltr:left-0 rtl:right-0 z-30 shadow-md select-none w-[880px] h-[490px] rounded-2xl border border-slate-50 dark:border-slate-800 bg-white dark:bg-slate-800"
+    >
+      <CalendarDateRange
+        :selected-range="selectedRange"
+        @set-range="setDateRange"
+      />
+      <div
+        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
+      >
+        <div class="flex justify-around h-fit">
+          <!-- Calendars for Start and End Dates -->
+          <div
+            v-for="calendar in [START_CALENDAR, END_CALENDAR]"
+            :key="`${calendar}-calendar`"
+            class="flex flex-col items-center"
+          >
+            <CalendarDateInput
+              :calendar-type="calendar"
+              :date-value="
+                calendar === START_CALENDAR ? manualStartDate : manualEndDate
+              "
+              :compare-date="
+                calendar === START_CALENDAR ? manualEndDate : manualStartDate
+              "
+              :is-disabled="selectedRange !== CUSTOM_RANGE"
+              @update="
+                calendar === START_CALENDAR
+                  ? (manualStartDate = $event)
+                  : (manualEndDate = $event)
+              "
+              @validate="updateManualInput($event, calendar)"
+              @error="handleManualInputError($event)"
+            />
+            <div class="py-5 border-b border-slate-50 dark:border-slate-700/50">
+              <div
+                class="flex flex-col items-center gap-2 px-5 min-w-[340px] max-h-[352px]"
+                :class="
+                  calendar === START_CALENDAR &&
+                  'ltr:border-r rtl:border-l border-slate-50 dark:border-slate-700/50'
+                "
+              >
+                <CalendarYear
+                  v-if="calendarViews[calendar] === YEAR"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-year="openCalendar($event, calendar, YEAR)"
+                />
+                <CalendarMonth
+                  v-else-if="calendarViews[calendar] === MONTH"
+                  :calendar-type="calendar"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev', YEAR)"
+                  @next="moveCalendar(calendar, 'next', YEAR)"
+                />
+                <CalendarWeek
+                  v-else-if="calendarViews[calendar] === WEEK"
+                  :calendar-type="calendar"
+                  :current-date="currentDate"
+                  :start-current-date="startCurrentDate"
+                  :end-current-date="endCurrentDate"
+                  :selected-start-date="selectedStartDate"
+                  :selected-end-date="selectedEndDate"
+                  :selecting-end-date="selectingEndDate"
+                  :hovered-end-date="hoveredEndDate"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
+                  @prev="moveCalendar(calendar, 'prev')"
+                  @next="moveCalendar(calendar, 'next')"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <CalendarFooter @change="emitDateRange" @clear="resetDatePicker" />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarAction.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { CALENDAR_PERIODS } from '../helpers/DatePickerHelper';
+
+defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  firstButtonLabel: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  viewMode: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['prev', 'next', 'set-view']);
+
+const { YEAR } = CALENDAR_PERIODS;
+
+const onClickPrev = type => {
+  emit('prev', type);
+};
+
+const onClickNext = type => {
+  emit('next', type);
+};
+
+const onClickSetView = (type, mode) => {
+  emit('set-view', type, mode);
+};
+</script>
+
+<template>
+  <div class="flex items-start justify-between w-full h-9">
+    <button
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+      @click="onClickPrev(calendarType)"
+    >
+      <fluent-icon
+        icon="chevron-left"
+        size="14"
+        class="text-slate-900 dark:text-slate-50"
+      />
+    </button>
+    <div class="flex items-center gap-1">
+      <button
+        v-if="firstButtonLabel"
+        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50 hover:text-woot-600 dark:hover:text-woot-600"
+        @click="onClickSetView(calendarType, viewMode)"
+      >
+        {{ firstButtonLabel }}
+      </button>
+      <button
+        v-if="buttonLabel"
+        class="p-0 text-sm font-medium text-center text-slate-800 dark:text-slate-50"
+        :class="{ 'hover:text-woot-600 dark:hover:text-woot-600': viewMode }"
+        @click="onClickSetView(calendarType, YEAR)"
+      >
+        {{ buttonLabel }}
+      </button>
+    </div>
+    <button
+      class="p-1 rounded-lg hover:bg-slate-75 dark:hover:bg-slate-700/50 rtl:rotate-180"
+      @click="onClickNext(calendarType)"
+    >
+      <fluent-icon
+        icon="chevron-right"
+        size="14"
+        class="text-slate-900 dark:text-slate-50"
+      />
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateInput.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue';
+import { parse, isValid, isAfter, isBefore } from 'date-fns';
+import {
+  getIntlDateFormatForLocale,
+  CALENDAR_TYPES,
+} from '../helpers/DatePickerHelper';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: '',
+  },
+  dateValue: Date,
+  compareDate: Date,
+  isDisabled: Boolean,
+});
+
+const emit = defineEmits(['update', 'validate', 'error']);
+
+const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
+
+const dateFormat = computed(() => getIntlDateFormatForLocale()?.toUpperCase());
+
+const localDateValue = computed({
+  get: () => props.dateValue?.toLocaleDateString(navigator.language) || '',
+  set: newValue => {
+    const format = getIntlDateFormatForLocale();
+    const parsedDate = parse(newValue, format, new Date());
+    if (isValid(parsedDate)) {
+      emit('update', parsedDate);
+    }
+  },
+});
+
+const validateDate = () => {
+  if (!isValid(props.dateValue)) {
+    emit('error', `Please enter the date in valid format: ${dateFormat.value}`);
+    return;
+  }
+
+  const { calendarType, compareDate, dateValue } = props;
+  const isStartCalendar = calendarType === START_CALENDAR;
+  const isEndCalendar = calendarType === END_CALENDAR;
+
+  if (compareDate && isStartCalendar && isAfter(dateValue, compareDate)) {
+    emit('error', 'Start date must be before the end date.');
+  } else if (compareDate && isEndCalendar && isBefore(dateValue, compareDate)) {
+    emit('error', 'End date must be after the start date.');
+  } else {
+    emit('validate', dateValue);
+  }
+};
+</script>
+
+<template>
+  <div class="h-[82px] flex flex-col items-start px-5 gap-1.5 pt-4 w-full">
+    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{
+        calendarType === START_CALENDAR
+          ? $t('DATE_PICKER.DATE_RANGE_INPUT.START')
+          : $t('DATE_PICKER.DATE_RANGE_INPUT.END')
+      }}
+    </span>
+    <input
+      v-model="localDateValue"
+      type="text"
+      class="reset-base border bg-slate-25 dark:bg-slate-900 ring-offset-ash-900 border-slate-50 dark:border-slate-700/50 w-full disabled:text-slate-200 dark:disabled:text-slate-700 disabled:cursor-not-allowed text-slate-800 dark:text-slate-50 px-1.5 py-1 text-sm rounded-xl h-10"
+      :placeholder="dateFormat"
+      :disabled="isDisabled"
+      @keypress.enter="validateDate"
+    />
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarDateRange.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { dateRanges } from '../helpers/DatePickerHelper';
+
+defineProps({
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['set-range']);
+
+const setDateRange = range => {
+  emit('set-range', range);
+};
+</script>
+
+<template>
+  <div class="w-[200px] flex flex-col items-start">
+    <h4
+      class="w-full px-5 py-4 text-sm font-medium capitalize text-start text-slate-600 dark:text-slate-200"
+    >
+      {{ $t('DATE_PICKER.DATE_RANGE_OPTIONS.TITLE') }}
+    </h4>
+    <div class="flex flex-col items-start w-full">
+      <button
+        v-for="range in dateRanges"
+        :key="range.label"
+        class="w-full px-5 py-3 text-sm font-medium truncate border-none rounded-none text-start hover:bg-slate-50 dark:hover:bg-slate-700"
+        :class="
+          range.value === selectedRange
+            ? 'text-slate-800 dark:text-slate-50 bg-slate-50 dark:bg-slate-700'
+            : 'text-slate-600 dark:text-slate-200'
+        "
+        @click="setDateRange(range)"
+      >
+        {{ $t(range.label) }}
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarFooter.vue

@@ -0,0 +1,28 @@
+<script setup>
+const emit = defineEmits(['clear', 'apply']);
+
+const onClickClear = () => {
+  emit('clear');
+};
+
+const onClickApply = () => {
+  emit('change');
+};
+</script>
+
+<template>
+  <div class="h-[56px] flex justify-between px-5 py-3 items-center">
+    <button
+      class="p-1.5 rounded-lg w-fit text-sm font-medium text-slate-600 dark:text-slate-200 hover:text-slate-800 dark:hover:text-slate-100"
+      @click="onClickClear"
+    >
+      {{ $t('DATE_PICKER.CLEAR_BUTTON') }}
+    </button>
+    <button
+      class="p-1.5 rounded-lg w-fit text-sm font-medium text-woot-500 dark:text-woot-300 hover:text-woot-700 dark:hover:text-woot-500"
+      @click="onClickApply"
+    >
+      {{ $t('DATE_PICKER.APPLY_BUTTON') }}
+    </button>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarMonth.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { format, getMonth, setMonth, startOfMonth } from 'date-fns';
+import {
+  yearName,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH, YEAR } = CALENDAR_PERIODS;
+
+const months = Array.from({ length: 12 }, (_, index) =>
+  format(setMonth(startOfMonth(new Date()), index), 'MMM')
+);
+
+const activeMonthIndex = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getMonth(date);
+});
+
+const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
+
+const setViewMode = (type, mode) => {
+  emit('set-view', type, mode);
+};
+
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const selectMonth = index => {
+  emit('select-month', index);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="YEAR"
+      :calendar-type="calendarType"
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate,
+          MONTH
+        )
+      "
+      @set-view="setViewMode"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid w-full grid-cols-3 gap-x-3 gap-y-2 auto-rows-[61px]">
+      <button
+        v-for="(month, index) in months"
+        :key="index"
+        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[92px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        :class="{
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:bg-woot-700':
+            index === activeMonthIndex,
+        }"
+        @click="selectMonth(index)"
+      >
+        {{ month }}
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeek.vue

@@ -0,0 +1,172 @@
+<script setup>
+import {
+  monthName,
+  yearName,
+  getWeeksForMonth,
+  isToday,
+  dayIsInRange,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  CALENDAR_TYPES,
+  CALENDAR_PERIODS,
+} from '../helpers/DatePickerHelper';
+
+import CalendarWeekLabel from './CalendarWeekLabel.vue';
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  currentDate: Date,
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+  selectedStartDate: Date,
+  selectingEndDate: Boolean,
+  selectedEndDate: Date,
+  hoveredEndDate: Date,
+});
+
+const emit = defineEmits([
+  'update-hovered-end-date',
+  'select-date',
+  'prev',
+  'next',
+  'set-view',
+]);
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+const { MONTH } = CALENDAR_PERIODS;
+
+const emitHoveredEndDate = day => {
+  emit('update-hovered-end-date', day);
+};
+
+const emitSelectDate = day => {
+  emit('select-date', day);
+};
+const onClickPrev = () => {
+  emit('prev');
+};
+
+const onClickNext = () => {
+  emit('next');
+};
+
+const setViewMode = (type, mode) => {
+  emit('set-view', type, mode);
+};
+
+const weeks = calendarType => {
+  return getWeeksForMonth(
+    calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isSelectedStartOrEndDate = day => {
+  return (
+    dayIsInRange(day, props.selectedStartDate, props.selectedStartDate) ||
+    dayIsInRange(day, props.selectedEndDate, props.selectedEndDate)
+  );
+};
+
+const isInRange = day => {
+  return dayIsInRange(day, props.selectedStartDate, props.selectedEndDate);
+};
+
+const isInCurrentMonth = day => {
+  return isCurrentMonth(
+    day,
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  );
+};
+
+const isHoveringInRange = day => {
+  return isHoveringDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectingEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const isNextDayInRange = day => {
+  return isHoveringNextDayInRange(
+    day,
+    props.selectedStartDate,
+    props.selectedEndDate,
+    props.hoveredEndDate
+  );
+};
+
+const dayClasses = day => ({
+  'text-slate-500 dark:text-slate-400 pointer-events-none':
+    !isInCurrentMonth(day),
+  'text-slate-800 dark:text-slate-50 hover:text-slate-800 dark:hover:text-white hover:bg-woot-100 dark:hover:bg-woot-700':
+    isInCurrentMonth(day),
+  'bg-woot-600 dark:bg-woot-600 text-white dark:text-white':
+    isSelectedStartOrEndDate(day) && isInCurrentMonth(day),
+  'bg-woot-50 dark:bg-woot-800':
+    (isInRange(day) || isHoveringInRange(day)) &&
+    !isSelectedStartOrEndDate(day) &&
+    isInCurrentMonth(day),
+  'outline outline-1 outline-woot-200 -outline-offset-1 dark:outline-woot-700 text-woot-600 dark:text-woot-400':
+    isToday(props.currentDate, day) && !isSelectedStartOrEndDate(day),
+});
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :view-mode="MONTH"
+      :calendar-type="calendarType"
+      :first-button-label="
+        monthName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      :button-label="
+        yearName(
+          calendarType === START_CALENDAR ? startCurrentDate : endCurrentDate
+        )
+      "
+      @prev="onClickPrev"
+      @next="onClickNext"
+      @set-view="setViewMode"
+    />
+    <CalendarWeekLabel />
+    <div
+      v-for="week in weeks(calendarType)"
+      :key="week[0].getTime()"
+      class="grid max-w-md grid-cols-7 gap-2 mx-auto overflow-hidden rounded-lg"
+    >
+      <div
+        v-for="day in week"
+        :key="day.getTime()"
+        class="flex relative items-center justify-center w-9 h-8 py-1.5 px-2 font-medium text-sm rounded-lg cursor-pointer"
+        :class="dayClasses(day)"
+        @mouseenter="emitHoveredEndDate(day)"
+        @mouseleave="emitHoveredEndDate(null)"
+        @click="emitSelectDate(day)"
+      >
+        {{ day.getDate() }}
+        <span
+          v-if="
+            (isInRange(day) || isHoveringInRange(day)) &&
+            isNextDayInRange(day) &&
+            !isLastDayOfMonth(day) &&
+            isInCurrentMonth(day)
+          "
+          class="absolute bottom-0 w-6 h-8 ltr:-right-4 rtl:-left-4 bg-woot-50 dark:bg-woot-800 -z-10"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarWeekLabel.vue

@@ -0,0 +1,15 @@
+<script setup>
+import { calendarWeeks } from '../helpers/DatePickerHelper';
+</script>
+
+<template>
+  <div class="max-w-md mx-auto grid grid-cols-7 gap-2">
+    <div
+      v-for="day in calendarWeeks"
+      :key="day.id"
+      class="flex items-center justify-center font-medium text-sm w-9 h-7 py-1.5 px-2"
+    >
+      {{ day.label }}
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/CalendarYear.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { getYear, addYears, subYears } from 'date-fns';
+import { CALENDAR_TYPES } from '../helpers/DatePickerHelper';
+
+import CalendarAction from './CalendarAction.vue';
+
+const props = defineProps({
+  calendarType: {
+    type: String,
+    default: 'start',
+  },
+  startCurrentDate: Date,
+  endCurrentDate: Date,
+});
+
+const { START_CALENDAR } = CALENDAR_TYPES;
+
+const calculateStartYear = date => {
+  const year = getYear(date);
+  return year - (year % 10); // Align with the beginning of a decade
+};
+
+const startYear = ref(
+  calculateStartYear(
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate
+  )
+);
+
+const years = computed(() =>
+  Array.from({ length: 10 }, (_, i) => startYear.value + i)
+);
+
+const firstYear = computed(() => years.value[0]);
+const lastYear = computed(() => years.value[years.value.length - 1]);
+
+const activeYear = computed(() => {
+  const date =
+    props.calendarType === START_CALENDAR
+      ? props.startCurrentDate
+      : props.endCurrentDate;
+  return getYear(date);
+});
+
+const onClickPrev = () => {
+  startYear.value = subYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const onClickNext = () => {
+  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
+};
+
+const emit = defineEmits(['select-year']);
+
+const selectYear = year => {
+  emit('select-year', year);
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-2 max-h-[312px]">
+    <CalendarAction
+      :calendar-type="calendarType"
+      :button-label="`${firstYear} - ${lastYear}`"
+      @prev="onClickPrev"
+      @next="onClickNext"
+    />
+
+    <div class="grid grid-cols-2 gap-x-3 gap-y-2 w-full auto-rows-[47px]">
+      <button
+        v-for="year in years"
+        :key="year"
+        class="p-2 text-sm font-medium text-center text-slate-800 dark:text-slate-50 w-[144px] h-10 rounded-lg py-2.5 px-2 hover:bg-slate-75 dark:hover:bg-slate-700"
+        :class="{
+          'bg-woot-600 dark:bg-woot-600 text-white dark:text-white hover:bg-woot-500 dark:hover:bg-woot-700':
+            year === activeYear,
+        }"
+        @click="selectYear(year)"
+      >
+        {{ year }}
+      </button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components/ui/DatePicker/components/DatePickerButton.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+import { dateRanges } from '../helpers/DatePickerHelper';
+import { format, isSameYear, isValid } from 'date-fns';
+
+const props = defineProps({
+  selectedStartDate: Date,
+  selectedEndDate: Date,
+  selectedRange: {
+    type: String,
+    default: '',
+  },
+});
+
+const formatDateRange = computed(() => {
+  const startDate = props.selectedStartDate;
+  const endDate = props.selectedEndDate;
+
+  if (!isValid(startDate) || !isValid(endDate)) {
+    return 'Select a date range';
+  }
+
+  const formatString = isSameYear(startDate, endDate)
+    ? 'MMM d' // Same year: "Apr 1"
+    : 'MMM d yyyy'; // Different years: "Apr 1 2025"
+
+  if (isSameYear(startDate, new Date()) && isSameYear(endDate, new Date())) {
+    // Both dates are in the current year
+    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
+  }
+  // At least one date is not in the current year
+  return `${format(startDate, formatString)} - ${format(
+    endDate,
+    formatString
+  )}`;
+});
+
+const activeDateRange = computed(
+  () => dateRanges.find(range => range.value === props.selectedRange).label
+);
+
+const emit = defineEmits(['open']);
+
+const openDatePicker = () => {
+  emit('open');
+};
+</script>
+
+<template>
+  <button
+    class="inline-flex relative items-center rounded-lg gap-2 py-1.5 px-3 h-8 bg-slate-50 dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
+    @click="openDatePicker"
+  >
+    <fluent-icon
+      class="text-slate-800 dark:text-slate-50"
+      icon="calendar"
+      size="16"
+    />
+    <span class="text-sm font-medium text-slate-800 dark:text-slate-50">
+      {{ $t(activeDateRange) }}
+    </span>
+    <span class="text-sm font-medium text-slate-600 dark:text-slate-200">
+      {{ formatDateRange }}
+    </span>
+    <fluent-icon
+      class="text-slate-800 dark:text-slate-50"
+      icon="chevron-down"
+      size="14"
+    />
+  </button>
+</template>

app/javascript/dashboard/components/ui/DatePicker/helpers/DatePickerHelper.js

@@ -0,0 +1,219 @@
+import {
+  startOfDay,
+  subDays,
+  endOfDay,
+  subMonths,
+  addMonths,
+  subYears,
+  addYears,
+  startOfMonth,
+  isSameMonth,
+  format,
+  startOfWeek,
+  addDays,
+  eachDayOfInterval,
+  endOfMonth,
+  isSameDay,
+  isWithinInterval,
+} from 'date-fns';
+
+// Constants for calendar and date ranges
+export const calendarWeeks = [
+  { id: 1, label: 'M' },
+  { id: 2, label: 'T' },
+  { id: 3, label: 'W' },
+  { id: 4, label: 'T' },
+  { id: 5, label: 'F' },
+  { id: 6, label: 'S' },
+  { id: 7, label: 'S' },
+];
+
+export const dateRanges = [
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_7_DAYS', value: 'last7days' },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_30_DAYS', value: 'last30days' },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_3_MONTHS',
+    value: 'last3months',
+  },
+  {
+    label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_6_MONTHS',
+    value: 'last6months',
+  },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.LAST_YEAR', value: 'lastYear' },
+  { label: 'DATE_PICKER.DATE_RANGE_OPTIONS.CUSTOM_RANGE', value: 'custom' },
+];
+
+export const DATE_RANGE_TYPES = {
+  LAST_7_DAYS: 'last7days',
+  LAST_30_DAYS: 'last30days',
+  LAST_3_MONTHS: 'last3months',
+  LAST_6_MONTHS: 'last6months',
+  LAST_YEAR: 'lastYear',
+  CUSTOM_RANGE: 'custom',
+};
+
+export const CALENDAR_TYPES = {
+  START_CALENDAR: 'start',
+  END_CALENDAR: 'end',
+};
+
+export const CALENDAR_PERIODS = {
+  WEEK: 'week',
+  MONTH: 'month',
+  YEAR: 'year',
+};
+
+// Utility functions for date operations
+export const monthName = currentDate => format(currentDate, 'MMMM');
+export const yearName = currentDate => format(currentDate, 'yyyy');
+
+export const getIntlDateFormatForLocale = () => {
+  const year = 2222;
+  const month = 12;
+  const day = 15;
+  const date = new Date(year, month - 1, day);
+  const formattedDate = new Intl.DateTimeFormat(navigator.language).format(
+    date
+  );
+  return formattedDate
+    .replace(`${year}`, 'yyyy')
+    .replace(`${month}`, 'MM')
+    .replace(`${day}`, 'dd');
+};
+
+// Utility functions for calendar operations
+export const chunk = (array, size) =>
+  Array.from({ length: Math.ceil(array.length / size) }, (_, index) =>
+    array.slice(index * size, index * size + size)
+  );
+
+export const getWeeksForMonth = (date, weekStartsOn = 1) => {
+  const startOfTheMonth = startOfMonth(date);
+  const startOfTheFirstWeek = startOfWeek(startOfTheMonth, { weekStartsOn });
+  const endOfTheLastWeek = addDays(startOfTheFirstWeek, 41); // Covering six weeks to fill the calendar
+  return chunk(
+    eachDayOfInterval({ start: startOfTheFirstWeek, end: endOfTheLastWeek }),
+    7
+  );
+};
+
+export const moveCalendarDate = (
+  calendar,
+  startCurrentDate,
+  endCurrentDate,
+  direction,
+  period
+) => {
+  const adjustFunctions = {
+    month: { prev: subMonths, next: addMonths },
+    year: { prev: subYears, next: addYears },
+  };
+
+  const adjust = adjustFunctions[period][direction];
+
+  if (calendar === 'start') {
+    const newStart = adjust(startCurrentDate, 1);
+    return { start: newStart, end: endCurrentDate };
+  }
+  const newEnd = adjust(endCurrentDate, 1);
+  return { start: startCurrentDate, end: newEnd };
+};
+
+// Date comparison functions
+export const isToday = (currentDate, date) =>
+  date.getDate() === currentDate.getDate() &&
+  date.getMonth() === currentDate.getMonth() &&
+  date.getFullYear() === currentDate.getFullYear();
+
+export const isCurrentMonth = (day, referenceDate) =>
+  isSameMonth(day, referenceDate);
+
+export const isLastDayOfMonth = day => {
+  const lastDay = endOfMonth(day);
+  return day.getDate() === lastDay.getDate();
+};
+
+export const dayIsInRange = (date, startDate, endDate) => {
+  if (!startDate || !endDate) {
+    return false;
+  }
+  // Normalize dates to ignore time differences
+  let startOfDayStart = startOfDay(startDate);
+  let startOfDayEnd = startOfDay(endDate);
+  // Swap if start is greater than end
+  if (startOfDayStart > startOfDayEnd) {
+    [startOfDayStart, startOfDayEnd] = [startOfDayEnd, startOfDayStart];
+  }
+  // Check if the date is within the interval or is the same as the start date
+  return (
+    isSameDay(date, startOfDayStart) ||
+    isWithinInterval(date, {
+      start: startOfDayStart,
+      end: startOfDayEnd,
+    })
+  );
+};
+
+// Handling hovering states in date range pickers
+export const isHoveringDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (endDate && hoveredEndDate && startDate <= hoveredEndDate) {
+    // Ensure the start date is not after the hovered end date
+    return isWithinInterval(day, { start: startDate, end: hoveredEndDate });
+  }
+  return false;
+};
+
+export const isHoveringNextDayInRange = (
+  day,
+  startDate,
+  endDate,
+  hoveredEndDate
+) => {
+  if (startDate && !endDate && hoveredEndDate) {
+    // If a start date is selected, and we're hovering (but haven't clicked an end date yet)
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: hoveredEndDate });
+  }
+  if (startDate && endDate) {
+    // Normal range checking between selected start and end dates
+    const nextDay = addDays(day, 1);
+    return isWithinInterval(nextDay, { start: startDate, end: endDate });
+  }
+  return false;
+};
+
+// Helper func to determine active date ranges based on user selection
+export const getActiveDateRange = (range, currentDate) => {
+  const ranges = {
+    last7days: () => ({
+      start: startOfDay(subDays(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    last30days: () => ({
+      start: startOfDay(subDays(currentDate, 29)),
+      end: endOfDay(currentDate),
+    }),
+    last3months: () => ({
+      start: startOfDay(subMonths(currentDate, 3)),
+      end: endOfDay(currentDate),
+    }),
+    last6months: () => ({
+      start: startOfDay(subMonths(currentDate, 6)),
+      end: endOfDay(currentDate),
+    }),
+    lastYear: () => ({
+      start: startOfDay(subMonths(currentDate, 12)),
+      end: endOfDay(currentDate),
+    }),
+    custom: () => ({ start: currentDate, end: currentDate }),
+  };
+
+  return (
+    ranges[range] || (() => ({ start: currentDate, end: currentDate }))
+  )();
+};

app/javascript/dashboard/components/ui/DatePicker/helpers/specs/DatePickerHelper.spec.js

@@ -0,0 +1,309 @@
+import {
+  monthName,
+  yearName,
+  getIntlDateFormatForLocale,
+  getWeeksForMonth,
+  isToday,
+  isCurrentMonth,
+  isLastDayOfMonth,
+  dayIsInRange,
+  getActiveDateRange,
+  isHoveringDayInRange,
+  isHoveringNextDayInRange,
+  moveCalendarDate,
+  chunk,
+} from '../DatePickerHelper';
+
+describe('Date formatting functions', () => {
+  const testDate = new Date(2020, 4, 15); // May 15, 2020
+
+  beforeEach(() => {
+    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-US');
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('returns the correct month name from a date', () => {
+    expect(monthName(testDate)).toBe('May');
+  });
+
+  it('returns the correct year from a date', () => {
+    expect(yearName(testDate)).toBe('2020');
+  });
+
+  it('returns the correct date format for the current locale en-US', () => {
+    const expected = 'MM/dd/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+
+  it('returns the correct date format for the current locale en-IN', () => {
+    jest.spyOn(navigator, 'language', 'get').mockReturnValue('en-IN');
+    const expected = 'dd/MM/yyyy';
+    expect(getIntlDateFormatForLocale()).toBe(expected);
+  });
+});
+
+describe('chunk', () => {
+  const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+
+  it('correctly chunks an array into smaller arrays of given size', () => {
+    const expected = [
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 9],
+    ];
+    expect(chunk(array, 3)).toEqual(expected);
+  });
+
+  it('handles arrays that do not divide evenly by the chunk size', () => {
+    const expected = [[1, 2], [3, 4], [5, 6], [7, 8], [9]];
+    expect(chunk(array, 2)).toEqual(expected);
+  });
+});
+
+describe('getWeeksForMonth', () => {
+  it('returns the correct weeks array for a month starting on Monday', () => {
+    const date = new Date(2020, 3, 1); // April 2020
+    const weeks = getWeeksForMonth(date, 1);
+    expect(weeks.length).toBe(6);
+    expect(weeks[0][0]).toEqual(new Date(2020, 2, 30)); // Check if first day of the first week is correct
+  });
+});
+
+describe('moveCalendarDate', () => {
+  it('handles the year transition when moving the start date backward by one month from January', () => {
+    const startDate = new Date(2021, 0, 1);
+    const endDate = new Date(2021, 0, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'prev',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 11, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the start date forward by one month from January', () => {
+    const startDate = new Date(2020, 0, 1);
+    const endDate = new Date(2020, 1, 31);
+    const result = moveCalendarDate(
+      'start',
+      startDate,
+      endDate,
+      'next',
+      'month'
+    );
+    const expectedStartDate = new Date(2020, 1, 1);
+    expect(result.start.toISOString()).toEqual(expectedStartDate.toISOString());
+    expect(result.end.toISOString()).toEqual(endDate.toISOString());
+  });
+
+  it('handles the year transition when moving the end date forward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'next', 'month');
+    const expectedEndDate = new Date(2022, 0, 31);
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+  it('handles the year transition when moving the end date backward by one month from December', () => {
+    const startDate = new Date(2021, 11, 1);
+    const endDate = new Date(2021, 11, 31);
+    const result = moveCalendarDate('end', startDate, endDate, 'prev', 'month');
+    const expectedEndDate = new Date(2021, 10, 30);
+
+    expect(result.start).toEqual(startDate);
+    expect(result.end.toISOString()).toEqual(expectedEndDate.toISOString());
+  });
+});
+
+describe('isToday', () => {
+  it('returns true if the dates are the same', () => {
+    const today = new Date();
+    const alsoToday = new Date(today);
+    expect(isToday(today, alsoToday)).toBeTruthy();
+  });
+
+  it('returns false if the dates are not the same', () => {
+    const today = new Date();
+    const notToday = new Date(
+      today.getFullYear(),
+      today.getMonth(),
+      today.getDate() - 1
+    );
+    expect(isToday(today, notToday)).toBeFalsy();
+  });
+});
+
+describe('isCurrentMonth', () => {
+  const referenceDate = new Date(2020, 6, 15); // July 15, 2020
+
+  it('returns true if the day is in the same month as the reference date', () => {
+    const testDay = new Date(2020, 6, 1);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeTruthy();
+  });
+
+  it('returns false if the day is not in the same month as the reference date', () => {
+    const testDay = new Date(2020, 5, 30);
+    expect(isCurrentMonth(testDay, referenceDate)).toBeFalsy();
+  });
+});
+
+describe('isLastDayOfMonth', () => {
+  it('returns true if the day is the last day of the month', () => {
+    const testDay = new Date(2020, 6, 31); // July 31, 2020
+    expect(isLastDayOfMonth(testDay)).toBeTruthy();
+  });
+
+  it('returns false if the day is not the last day of the month', () => {
+    const testDay = new Date(2020, 6, 30); // July 30, 2020
+    expect(isLastDayOfMonth(testDay)).toBeFalsy();
+  });
+});
+
+describe('dayIsInRange', () => {
+  it('returns true if the date is within the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 15);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns true if the date is the same as the start date', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 10);
+    expect(dayIsInRange(testDate, start, end)).toBeTruthy();
+  });
+
+  it('returns false if the date is outside the range', () => {
+    const start = new Date(2020, 1, 10);
+    const end = new Date(2020, 1, 20);
+    const testDate = new Date(2020, 1, 9);
+    expect(dayIsInRange(testDate, start, end)).toBeFalsy();
+  });
+});
+
+describe('isHoveringDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const endDate = new Date(2020, 6, 20);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 12);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the day is outside the hovered date range', () => {
+    const testDay = new Date(2020, 6, 16);
+    expect(
+      isHoveringDayInRange(testDay, startDate, endDate, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('isHoveringNextDayInRange', () => {
+  const startDate = new Date(2020, 6, 10);
+  const hoveredEndDate = new Date(2020, 6, 15);
+
+  it('returns true if the next day after the given day is within the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 14);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeTruthy();
+  });
+
+  it('returns false if the next day is outside the start and hovered end dates', () => {
+    const testDay = new Date(2020, 6, 15);
+    expect(
+      isHoveringNextDayInRange(testDay, startDate, null, hoveredEndDate)
+    ).toBeFalsy();
+  });
+});
+
+describe('getActiveDateRange', () => {
+  const currentDate = new Date(2020, 5, 15, 12, 0); // May 15, 2020, at noon
+
+  beforeAll(() => {
+    // Mocking the current date to ensure consistency in tests
+    jest.useFakeTimers().setSystemTime(currentDate.getTime());
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns the correct range for "last7days"', () => {
+    const range = getActiveDateRange('last7days', new Date());
+    const expectedStart = new Date(2020, 5, 9);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last30days"', () => {
+    const range = getActiveDateRange('last30days', new Date());
+    const expectedStart = new Date(2020, 4, 17);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last3months"', () => {
+    const range = getActiveDateRange('last3months', new Date());
+    const expectedStart = new Date(2020, 2, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "last6months"', () => {
+    const range = getActiveDateRange('last6months', new Date());
+    const expectedStart = new Date(2019, 11, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "lastYear"', () => {
+    const range = getActiveDateRange('lastYear', new Date());
+    const expectedStart = new Date(2019, 5, 15);
+    expectedStart.setHours(0, 0, 0, 0);
+    const expectedEnd = new Date();
+    expectedEnd.setHours(23, 59, 59, 999);
+
+    expect(range.start).toEqual(expectedStart);
+    expect(range.end).toEqual(expectedEnd);
+  });
+
+  it('returns the correct range for "custom date range"', () => {
+    const range = getActiveDateRange('custom', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+
+  it('handles an unknown range label gracefully', () => {
+    const range = getActiveDateRange('unknown', new Date());
+    expect(range.start).toEqual(new Date(currentDate));
+    expect(range.end).toEqual(new Date(currentDate));
+  });
+});

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

@@ -0,0 +1,24 @@
+<script setup>
+defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<template>
+  <div class="relative group w-[inherit] whitespace-normal z-20">
+    <fluent-icon
+      icon="info"
+      size="14"
+      class="mt-0.5 text-slate-600 absolute dark:text-slate-400"
+    />
+    <div
+      class="bg-white dark:bg-slate-900 w-fit ltr:left-4 rtl:right-4 top-0 border p-2.5 group-hover:flex items-center hidden absolute border-slate-75 dark:border-slate-800 rounded-lg shadow-md"
+    >
+      <p class="text-slate-800 dark:text-slate-75 mb-0 text-xs">
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>

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

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

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

@@ -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', {

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

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

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

@@ -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) {

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

@@ -18,13 +18,11 @@
 
 <script>
 import { Chrome } from 'vue-color';
-import { mixin as clickaway } from 'vue-clickaway';
 
 export default {
   components: {
     Chrome,
   },
-  mixins: [clickaway],
   props: {
     value: {
       type: String,

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

@@ -31,15 +31,9 @@
 
 <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 +41,7 @@ export default {
     LabelDropdown,
   },
 
-  mixins: [clickaway, adminMixin, eventListenerMixins],
+  mixins: [adminMixin, keyboardEventListenerMixins],
 
   props: {
     allLabels: {
@@ -88,17 +82,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,
+        },
+      };
     },
   },
 };

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import getUuid from 'widget/helpers/uuid';
 import 'video.js/dist/video-js.css';
 import 'videojs-record/dist/css/videojs.record.css';
 
@@ -28,9 +29,25 @@ import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-
 
 import { format, addSeconds } from 'date-fns';
 import { AUDIO_FORMATS } from 'shared/constants/messages';
+import { convertWavToMp3 } from './utils/mp3ConversionUtils';
 
 WaveSurfer.microphone = MicrophonePlugin;
 
+const RECORDER_CONFIG = {
+  [AUDIO_FORMATS.WAV]: {
+    audioMimeType: 'audio/wav',
+    audioWorkerURL: waveWorker,
+  },
+  [AUDIO_FORMATS.MP3]: {
+    audioMimeType: 'audio/wav',
+    audioWorkerURL: waveWorker,
+  },
+  [AUDIO_FORMATS.OGG]: {
+    audioMimeType: 'audio/ogg',
+    audioWorkerURL: encoderWorker,
+  },
+};
+
 export default {
   name: 'WootAudioRecorder',
   mixins: [alertMixin],
@@ -39,6 +56,10 @@ export default {
       type: String,
       default: AUDIO_FORMATS.WAV,
     },
+    isAWhatsAppChannel: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -88,14 +109,7 @@ export default {
             audioSampleRate: 48000,
             audioBitRate: 128,
             audioEngine: 'opus-recorder',
-            ...(this.audioRecordFormat === AUDIO_FORMATS.WAV && {
-              audioMimeType: 'audio/wav',
-              audioWorkerURL: waveWorker,
-            }),
-            ...(this.audioRecordFormat === AUDIO_FORMATS.OGG && {
-              audioMimeType: 'audio/ogg',
-              audioWorkerURL: encoderWorker,
-            }),
+            ...RECORDER_CONFIG[this.audioRecordFormat],
           },
         },
       },
@@ -133,7 +147,11 @@ export default {
   methods: {
     deviceReady() {
       if (this.player.record().engine instanceof OpusRecorderEngine) {
-        if (this.audioRecordFormat === AUDIO_FORMATS.WAV) {
+        if (
+          [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes(
+            this.audioRecordFormat
+          )
+        ) {
           this.player.record().engine.audioType = 'audio/wav';
         }
       }
@@ -145,12 +163,16 @@ export default {
     stopRecord() {
       this.fireStateRecorderChanged('stopped');
     },
-    finishRecord() {
-      const file = new File(
-        [this.player.recordedData],
-        this.player.recordedData.name,
-        { type: this.player.recordedData.type }
-      );
+    async finishRecord() {
+      let recordedContent = this.player.recordedData;
+      let fileName = this.player.recordedData.name;
+      let type = this.player.recordedData.type;
+      if (this.audioRecordFormat === AUDIO_FORMATS.MP3) {
+        recordedContent = await convertWavToMp3(this.player.recordedData);
+        fileName = `${getUuid()}.mp3`;
+        type = AUDIO_FORMATS.MP3;
+      }
+      const file = new File([recordedContent], fileName, { type });
       this.fireRecorderBlob(file);
     },
     progressRecord() {
@@ -231,7 +253,20 @@ 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>

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

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

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

@@ -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: '' },

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

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

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

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

app/javascript/dashboard/components/widgets/WootWriter/utils/mp3ConversionUtils.js

@@ -0,0 +1,53 @@
+import lamejs from 'lamejs';
+/**
+ * Encodes a mono channel audio stream to MP3 format.
+ * @param {number} channels - Number of audio channels.
+ * @param {number} sampleRate - Sample rate in Hz.
+ * @param {Int16Array} samples - Audio samples to be encoded.
+ * @returns {Blob} - The MP3 encoded audio as a Blob.
+ */
+export const encodeToMP3 = (channels, sampleRate, samples) => {
+  const outputBuffer = [];
+  const encoder = new lamejs.Mp3Encoder(channels, sampleRate, 128);
+  const maxSamplesPerFrame = 1152;
+
+  for (let offset = 0; offset < samples.length; offset += maxSamplesPerFrame) {
+    const sliceEnd = Math.min(offset + maxSamplesPerFrame, samples.length);
+    const sampleSlice = samples.subarray(offset, sliceEnd);
+    const mp3Buffer = encoder.encodeBuffer(sampleSlice);
+
+    if (mp3Buffer.length > 0) {
+      outputBuffer.push(new Int8Array(mp3Buffer));
+    }
+  }
+
+  const remainingData = encoder.flush();
+  if (remainingData.length > 0) {
+    outputBuffer.push(new Int8Array(remainingData));
+  }
+
+  return new Blob(outputBuffer, { type: 'audio/mp3' });
+};
+
+/**
+ * Converts a WAV audio Blob to an MP3 format Blob.
+ * @param {Blob} blob - The audio data in WAV format as a Blob.
+ * @returns {Promise<Blob>} - A Blob containing the MP3 encoded audio.
+ */
+export const convertWavToMp3 = async blob => {
+  try {
+    const audioBuffer = await blob.arrayBuffer();
+    const wavHeader = lamejs.WavHeader.readHeader(new DataView(audioBuffer));
+    const samples = new Int16Array(
+      audioBuffer,
+      wavHeader.dataOffset,
+      wavHeader.dataLen / 2
+    );
+
+    return encodeToMP3(wavHeader.channels, wavHeader.sampleRate, samples);
+  } catch (error) {
+    // eslint-disable-next-line
+    console.log('Failed to convert WAV to MP3:', error);
+    throw new Error('Conversion from WAV to MP3 failed.');
+  }
+};

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

@@ -45,7 +45,6 @@
 <script>
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import FilterItem from './FilterItem.vue';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 
@@ -53,7 +52,7 @@ export default {
   components: {
     FilterItem,
   },
-  mixins: [clickaway, uiSettingsMixin],
+  mixins: [uiSettingsMixin],
   data() {
     return {
       showActionsDropdown: false,

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

@@ -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) {

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

@@ -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'),
+        },
+      };
     },
   },
 };

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

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

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

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

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

@@ -37,7 +37,6 @@
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import { mixin as clickaway } from 'vue-clickaway';
 import alertMixin from 'shared/mixins/alertMixin';
 import EmailTranscriptModal from './EmailTranscriptModal.vue';
 import ResolveAction from '../../buttons/ResolveAction.vue';
@@ -52,7 +51,7 @@ export default {
     EmailTranscriptModal,
     ResolveAction,
   },
-  mixins: [alertMixin, clickaway],
+  mixins: [alertMixin],
   data() {
     return {
       showEmailActionsModal: false,

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

@@ -100,7 +100,7 @@
       <attachment-preview
         class="flex-col mt-4"
         :attachments="attachedFiles"
-        :remove-attachment="removeAttachment"
+        @remove-attachment="removeAttachment"
       />
     </div>
     <message-signature-missing-alert
@@ -153,8 +153,8 @@
 
 <script>
 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 +178,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';
@@ -218,13 +217,13 @@ export default {
     ArticleSearchPopover,
   },
   mixins: [
-    clickaway,
     inboxMixin,
     uiSettingsMixin,
     alertMixin,
     messageFormatterMixin,
     rtlMixin,
     fileUploadMixin,
+    keyboardEventListenerMixins,
   ],
   props: {
     popoutReplyBox: {
@@ -502,11 +501,10 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (
-        this.isAWhatsAppChannel ||
-        this.isAPIInbox ||
-        this.isATelegramChannel
-      ) {
+      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
+        return AUDIO_FORMATS.MP3;
+      }
+      if (this.isAPIInbox) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;
@@ -701,24 +699,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 +952,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 +966,7 @@ export default {
       this.isRecordingAudio = !this.isRecordingAudio;
       this.isRecorderAudioStopped = !this.isRecordingAudio;
       if (!this.isRecordingAudio) {
-        this.clearMessage();
-        this.clearEmailField();
+        this.clearRecorder();
       }
     },
     toggleAudioRecorderPlayPause() {
@@ -989,7 +1010,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 +1042,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) {
@@ -1226,6 +1252,7 @@ export default {
     }
   }
 }
+
 .send-button {
   @apply mb-0;
 }
@@ -1250,6 +1277,7 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
+
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

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

@@ -9,7 +9,7 @@
           <woot-input
             v-model.trim="$v.toEmailsVal.$model"
             type="text"
-            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
@@ -25,7 +25,7 @@
         <div class="rounded-none flex-1 min-w-0 m-0 whitespace-nowrap">
           <woot-input
             v-model.trim="$v.ccEmailsVal.$model"
-            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             type="text"
             :class="{ error: $v.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
@@ -54,7 +54,7 @@
           <woot-input
             v-model.trim="$v.bccEmailsVal.$model"
             type="text"
-            class="[&>input]:mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
+            class="[&>input]:!mb-0 [&>input]:border-transparent [&>input]:h-8 [&>input]:text-sm [&>input]:!border-0 [&>input]:border-none"
             :class="{ error: $v.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')

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

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

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

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