chore: Update translations (#8983 )

feat(ee): Add support for SLA in automation rules (#8910 )
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2024-02-22 12:18:55 +05:30 · 2024-02-22 12:18:55 +05:30 · 2024-02-22 12:18:54 +05:30
1238 changed files with 9579 additions and 24599 deletions
@@ -180,6 +180,8 @@ 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
@@ -249,6 +251,9 @@ AZURE_APP_SECRET=
 ## OpenAI key
 # OPENAI_API_KEY=

+# Sentiment analysis model file path
+SENTIMENT_FILE_PATH=
+
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
@@ -1,2 +1,7 @@
+## 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
@@ -1,45 +0,0 @@
-## github action to check deployment success
-## curl the deployment url and check for 200 status
-## deployment url will be of the form chatwoot-pr-<pr_number>.herokuapp.com
-name: Deploy Check
-
-on:
-  pull_request:
-
-jobs:
-  deployment_check:
-    name: Check Deployment
-    runs-on: ubuntu-latest
-    steps:
-      - name: Install jq
-        run: sudo apt-get install -y jq
-      - name: Print Deployment URL
-        run: echo "https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com"
-      - name: Check Deployment Status
-        run: |
-          max_attempts=10
-          attempt=1
-          status_code=0
-          echo "Waiting for review app to be deployed/redeployed, trying in  10 minutes..."
-          sleep 600
-          while [ $attempt -le $max_attempts ]; do
-            response=$(curl -s -o /dev/null -w "%{http_code}" https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com/api)
-            status_code=$(echo $response | head -n   1)
-            if [ $status_code -eq   200 ]; then
-              body=$(curl -s https://chatwoot-pr-${{ github.event.pull_request.number }}.herokuapp.com/api)
-              if echo "$body" | jq -e '.version and .timestamp and .queue_services == "ok" and .data_services == "ok"' > /dev/null; then
-                echo "Deployment successful"
-                exit 0
-              else
-                echo "Deployment status unknown, retrying in   3 minutes..."
-                sleep 180
-              fi
-            else
-              echo "Waiting for review app to be ready, retrying in  3 minutes..."
-              sleep 180
-              attempt=$((attempt +  1))
-            fi
-          done
-          echo "Deployment failed after $max_attempts attempts"
-          exit  1
-          fi
@@ -73,7 +73,6 @@ jobs:
          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
-          spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb \
          --profile=10 \
          --format documentation

@@ -2,8 +2,6 @@ require:
  - rubocop-performance
  - rubocop-rails
  - rubocop-rspec
-  - ./rubocop/use_from_email.rb
-  - ./rubocop/custom_cop_location.rb

 Layout/LineLength:
  Max: 150
@@ -142,16 +140,6 @@ RSpec/MultipleExpectations:
 RSpec/MultipleMemoizedHelpers:
  Max: 14

-# custom rules
-UseFromEmail:
-  Enabled: true
-  Exclude:
-    - 'app/models/user.rb'
-    - 'app/models/contact.rb'
-
-CustomCopLocation:
-  Enabled: true
-
 AllCops:
  NewCops: enable
  Exclude:
@@ -3,8 +3,8 @@ source 'https://rubygems.org'
 ruby '3.2.2'

 ##-- base gems for rails --##
-gem 'rack-cors', '2.0.0', require: 'rack/cors'
-gem 'rails', '~> 7.0.8.1'
+gem 'rack-cors', require: 'rack/cors'
+gem 'rails', '~> 7.0.8.0'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false

@@ -69,7 +69,7 @@ gem 'webpacker'
 gem 'barnes'

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

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

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

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

@@ -200,7 +203,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', '>= 0.8.0'
+  gem 'meta_request'
 end

 group :test do
@@ -33,70 +33,70 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actioncable (7.0.8)
+      actionpack (= 7.0.8)
+      activesupport (= 7.0.8)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      activejob (= 7.0.8.1)
-      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actionmailbox (7.0.8)
+      actionpack (= 7.0.8)
+      activejob (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      actionview (= 7.0.8.1)
-      activejob (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actionmailer (7.0.8)
+      actionpack (= 7.0.8)
+      actionview (= 7.0.8)
+      activejob (= 7.0.8)
+      activesupport (= 7.0.8)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.1)
-      actionview (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actionpack (7.0.8)
+      actionview (= 7.0.8)
+      activesupport (= 7.0.8)
      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actiontext (7.0.8)
+      actionpack (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.1)
-      activesupport (= 7.0.8.1)
+    actionview (7.0.8)
+      activesupport (= 7.0.8)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.8.1)
-      activesupport (= 7.0.8.1)
+    activejob (7.0.8)
+      activesupport (= 7.0.8)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.1)
-      activesupport (= 7.0.8.1)
-    activerecord (7.0.8.1)
-      activemodel (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    activemodel (7.0.8)
+      activesupport (= 7.0.8)
+    activerecord (7.0.8)
+      activemodel (= 7.0.8)
+      activesupport (= 7.0.8)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      activejob (= 7.0.8.1)
-      activerecord (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    activestorage (7.0.8)
+      actionpack (= 7.0.8)
+      activejob (= 7.0.8)
+      activerecord (= 7.0.8)
+      activesupport (= 7.0.8)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.1)
+    activesupport (7.0.8)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
@@ -149,8 +149,9 @@ GEM
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
    base64 (0.1.1)
-    bcrypt (3.1.20)
+    bcrypt (3.1.19)
    bindex (0.8.1)
+    blingfire (0.1.8)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
    brakeman (5.4.1)
@@ -193,7 +194,7 @@ GEM
      irb (>= 1.5.0)
      reline (>= 0.3.1)
    declarative (0.0.20)
-    devise (4.9.4)
+    devise (4.9.3)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 4.1.0)
@@ -236,8 +237,9 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.7.4)
+      faraday-net_http (>= 2.0, < 3.1)
+      ruby2_keywords (>= 0.0.4)
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -245,8 +247,7 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    faraday-net_http (3.0.2)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
@@ -315,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.3)
-    google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.3-x86_64-darwin)
-    google-protobuf (3.25.3-x86_64-linux)
+    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)
    googleapis-common-protos (1.4.0)
      google-protobuf (~> 3.14)
      googleapis-common-protos-types (~> 1.2)
      grpc (~> 1.27)
-    googleapis-common-protos-types (1.14.0)
+    googleapis-common-protos-types (1.11.0)
      google-protobuf (~> 3.18)
    googleauth (1.5.2)
      faraday (>= 0.17.3, < 3.a)
@@ -334,17 +335,14 @@ GEM
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
+    grpc (1.54.3)
+      google-protobuf (~> 3.21)
      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
+    grpc (1.54.3-x86_64-darwin)
+      google-protobuf (~> 3.21)
      googleapis-common-protos-types (~> 1.0)
-    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)
+    grpc (1.54.3-x86_64-linux)
+      google-protobuf (~> 3.21)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
    hairtrigger (1.0.0)
@@ -368,11 +366,15 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.4)
+    i18n (1.14.1)
      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)
@@ -392,8 +394,7 @@ GEM
      hana (~> 1.3)
      regexp_parser (~> 2.0)
      uri_template (~> 0.7)
-    jwt (2.8.1)
-      base64
+    jwt (2.7.0)
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.2.2)
@@ -450,17 +451,17 @@ GEM
    marcel (1.0.2)
    maxminddb (0.1.22)
    memoist (0.16.2)
-    meta_request (0.8.2)
+    meta_request (0.7.4)
      rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 8)
+      railties (>= 3.0.0, < 7.1)
    method_source (1.0.0)
    mime-types (3.4.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.6)
-    minitest (5.22.3)
+    mini_portile2 (2.8.5)
+    minitest (5.21.2)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -469,8 +470,6 @@ 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)
@@ -489,15 +488,16 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.0)
-    nokogiri (1.16.4)
+    nokogiri (1.16.2)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.4-arm64-darwin)
+    nokogiri (1.16.2-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.4-x86_64-darwin)
+    nokogiri (1.16.2-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.4-x86_64-linux)
+    nokogiri (1.16.2-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,17 +515,25 @@ GEM
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
-    omniauth-google-oauth2 (1.1.2)
+    omniauth-google-oauth2 (1.1.1)
      jwt (>= 2.0)
-      oauth2 (~> 2.0)
+      oauth2 (~> 2.0.6)
      omniauth (~> 2.0)
-      omniauth-oauth2 (~> 1.8)
+      omniauth-oauth2 (~> 1.8.0)
    omniauth-oauth2 (1.8.0)
      oauth2 (>= 1.4, < 3)
      omniauth (~> 2.0)
    omniauth-rails_csrf_protection (1.0.1)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
+    onnxruntime (0.7.6)
+      ffi
+    onnxruntime (0.7.6-arm64-darwin)
+      ffi
+    onnxruntime (0.7.6-x86_64-darwin)
+      ffi
+    onnxruntime (0.7.6-x86_64-linux)
+      ffi
    openssl (3.1.0)
    orm_adapter (0.5.0)
    os (1.1.4)
@@ -551,37 +559,36 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.7.3)
-    rack (2.2.9)
+    rack (2.2.8)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.4.0)
      rack (< 4)
-    rack-cors (2.0.0)
+    rack-cors (2.0.1)
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.2.0)
-      base64 (>= 0.1.0)
+    rack-protection (3.1.0)
      rack (~> 2.2, >= 2.2.4)
    rack-proxy (0.7.6)
      rack
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.1)
-      actioncable (= 7.0.8.1)
-      actionmailbox (= 7.0.8.1)
-      actionmailer (= 7.0.8.1)
-      actionpack (= 7.0.8.1)
-      actiontext (= 7.0.8.1)
-      actionview (= 7.0.8.1)
-      activejob (= 7.0.8.1)
-      activemodel (= 7.0.8.1)
-      activerecord (= 7.0.8.1)
-      activestorage (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    rails (7.0.8)
+      actioncable (= 7.0.8)
+      actionmailbox (= 7.0.8)
+      actionmailer (= 7.0.8)
+      actionpack (= 7.0.8)
+      actiontext (= 7.0.8)
+      actionview (= 7.0.8)
+      activejob (= 7.0.8)
+      activemodel (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.1)
+      railties (= 7.0.8)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -589,15 +596,15 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.1)
-      actionpack (= 7.0.8.1)
-      activesupport (= 7.0.8.1)
+    railties (7.0.8)
+      actionpack (= 7.0.8)
+      activesupport (= 7.0.8)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
      zeitwerk (~> 2.5)
    rainbow (3.1.1)
-    rake (13.2.1)
+    rake (13.1.0)
    rb-fsevent (0.11.2)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
@@ -758,7 +765,7 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.3.0)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -783,12 +790,11 @@ 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.4)
+    version_gem (1.1.3)
    warden (1.2.9)
      rack (>= 2.0.9)
    web-console (4.2.1)
@@ -817,7 +823,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.13)
+    zeitwerk (2.6.12)

 PLATFORMS
  arm64-darwin-20
@@ -856,7 +862,7 @@ DEPENDENCIES
  database_cleaner
  ddtrace
  debug (~> 1.8)
-  devise (>= 4.9.4)
+  devise (>= 4.9.3)
  devise-secure_password!
  devise_token_auth
  dotenv-rails
@@ -881,6 +887,7 @@ DEPENDENCIES
  hashie
  html2text!
  image_processing
+  informers
  jbuilder
  json_refs
  json_schemer
@@ -893,14 +900,14 @@ DEPENDENCIES
  listen
  lograge (~> 0.14.0)
  maxminddb
-  meta_request (>= 0.8.0)
+  meta_request
  mock_redis
  neighbor
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
  omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.2)
+  omniauth-google-oauth2
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0)
  pg
@@ -911,10 +918,10 @@ DEPENDENCIES
  puma
  pundit
  rack-attack (>= 6.7.0)
-  rack-cors (= 2.0.0)
+  rack-cors
  rack-mini-profiler (>= 3.2.0)
  rack-timeout
-  rails (~> 7.0.8.1)
+  rails (~> 7.0.8.0)
  redis
  redis-namespace
  responders (>= 3.1.1)
@@ -17,9 +17,6 @@ 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

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

-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db console server burn docker run force_run debug debug_worker
@@ -23,6 +23,7 @@ Customer engagement suite, an open-source alternative to Intercom, Zendesk, Sale
  <img src="https://img.shields.io/github/commit-activity/m/chatwoot/chatwoot" alt="Commits-per-month">
  <a title="Crowdin" target="_self" href="https://chatwoot.crowdin.com/chatwoot"><img src="https://badges.crowdin.net/e/37ced7eba411064bd792feb3b7a28b16/localized.svg"></a>
  <a href="https://discord.gg/cJXdrwS"><img src="https://img.shields.io/discord/647412545203994635" alt="Discord"></a>
+  <a href="https://huntr.dev/bounties/disclose"><img src="https://cdn.huntr.dev/huntr_security_badge_mono.svg" alt="Huntr"></a>
  <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fuptime.json" alt="uptime"></a>
  <a href="https://status.chatwoot.com"><img src="https://img.shields.io/endpoint?url=https%3A%2F%2Fraw.githubusercontent.com%2Fchatwoot%2Fstatus%2Fmaster%2Fapi%2Fchatwoot%2Fresponse-time.json" alt="response time"></a>
  <a href="https://artifacthub.io/packages/helm/chatwoot/chatwoot"><img src="https://img.shields.io/endpoint?url=https://artifacthub.io/badge/repository/artifact-hub" alt="Artifact HUB"></a>
@@ -72,11 +72,6 @@
      "scripts": {
        "test": "bundle exec rake test"
      }
-    },
-    "review": {
-      "scripts": {
-        "postdeploy": "bundle exec rails db:seed"
-      }
    }
  }
 }
@@ -59,7 +59,7 @@ class ContactIdentifyAction
  def existing_email_contact
    return if params[:email].blank?

-    @existing_email_contact ||= account.contacts.from_email(params[:email])
+    @existing_email_contact ||= account.contacts.find_by(email: params[:email])
  end

  def existing_phone_number_contact
@@ -16,6 +16,7 @@ class AgentBuilder
  def perform
    ActiveRecord::Base.transaction do
      @user = find_or_create_user
+      send_confirmation_if_required
      create_account_user
    end
    @user
@@ -26,13 +27,18 @@ class AgentBuilder
  # Finds a user by email or creates a new one with a temporary password.
  # @return [User] the found or created user.
  def find_or_create_user
-    user = User.from_email(email)
+    user = User.find_by(email: email)
    return user if user

    temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
    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?
@@ -75,7 +75,7 @@ class ContactInboxWithContactBuilder
  def find_contact_by_email(email)
    return if email.blank?

-    account.contacts.from_email(email)
+    account.contacts.find_by(email: email.downcase)
  end

  def find_contact_by_phone_number(phone_number)
@@ -53,23 +53,7 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def 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
+    @conversation ||= Conversation.find_by(conversation_params) || build_conversation
  end

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

  def 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
+    @conversation ||= Conversation.where(conversation_params).find_by(
+      "additional_attributes ->> 'type' = 'instagram_direct_message'"
+    ) || build_conversation
  end

  def message_content
@@ -54,13 +54,6 @@ class V2::ReportBuilder
    }
  end

-  def bot_summary
-    {
-      bot_resolutions_count: bot_resolutions.count,
-      bot_handoffs_count: bot_handoffs.count
-    }
-  end
-
  def conversation_metrics
    if params[:type].equal?(:account)
      live_conversations
@@ -78,8 +71,6 @@ class V2::ReportBuilder
       avg_first_response_time
       avg_resolution_time reply_time
       resolutions_count
-       bot_resolutions_count
-       bot_handoffs_count
       reply_time].include?(params[:metric])
  end

@@ -132,7 +123,6 @@ class V2::ReportBuilder
      unattended: @open_conversations.unattended.count
    }
    metric[:unassigned] = @open_conversations.unassigned.count if params[:type].equal?(:account)
-    metric[:pending] = @open_conversations.pending.count if params[:type].equal?(:account)
    metric
  end
 end
@@ -1,54 +0,0 @@
-class V2::Reports::BotMetricsBuilder
-  include DateRangeHelper
-  attr_reader :account, :params
-
-  def initialize(account, params)
-    @account = account
-    @params = params
-  end
-
-  def metrics
-    {
-      conversation_count: bot_conversations.count,
-      message_count: bot_messages.count,
-      resolution_rate: bot_resolution_rate.to_i,
-      handoff_rate: bot_handoff_rate.to_i
-    }
-  end
-
-  private
-
-  def bot_activated_inbox_ids
-    @bot_activated_inbox_ids ||= account.inboxes.filter(&:active_bot?).map(&:id)
-  end
-
-  def bot_conversations
-    @bot_conversations ||= account.conversations.where(inbox_id: bot_activated_inbox_ids).where(created_at: range)
-  end
-
-  def bot_messages
-    @bot_messages ||= account.messages.outgoing.where(conversation_id: bot_conversations.ids).where(created_at: range)
-  end
-
-  def bot_resolutions_count
-    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
-                                                                                 created_at: range).distinct.count
-  end
-
-  def bot_handoffs_count
-    account.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_handoff,
-                                                                                 created_at: range).distinct.count
-  end
-
-  def bot_resolution_rate
-    return 0 if bot_conversations.count.zero?
-
-    bot_resolutions_count.to_f / bot_conversations.count * 100
-  end
-
-  def bot_handoff_rate
-    return 0 if bot_conversations.count.zero?
-
-    bot_handoffs_count.to_f / bot_conversations.count * 100
-  end
-end
@@ -19,7 +19,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
      account: Current.account
    )

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

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

  def create
-    process_create
-  rescue StandardError => e
-    render_could_not_create_error(e.message)
+    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
  end

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

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

  def contactable_inboxes
@@ -36,18 +36,10 @@ 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
@@ -118,11 +110,6 @@ 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)
@@ -189,5 +176,3 @@ 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')
@@ -33,10 +33,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end

  def transcript
-    if conversation.present? && conversation.contact.present? && conversation.contact.email.present?
+    if permitted_params[:email].present? && conversation.present?
      ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
        conversation,
-        conversation.contact.email
+        permitted_params[:email]
      )&.deliver_later
    end
    head :ok
@@ -14,12 +14,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
    render json: summary_metrics
  end

-  def bot_summary
-    summary = V2::ReportBuilder.new(Current.account, current_summary_params).bot_summary
-    summary[:previous] = V2::ReportBuilder.new(Current.account, previous_summary_params).bot_summary
-    render json: summary
-  end
-
  def agents
    @report_data = generate_agents_report
    generate_csv('agents_report', 'api/v2/accounts/reports/agents')
@@ -54,11 +48,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
    render json: conversation_metrics
  end

-  def bot_metrics
-    bot_metrics = V2::Reports::BotMetricsBuilder.new(Current.account, params).metrics
-    render json: bot_metrics
-  end
-
  private

  def generate_csv(filename, template)
@@ -25,4 +25,3 @@ class ApplicationController < ActionController::Base
    }
  end
 end
-ApplicationController.include_mod_with('Concerns::ApplicationControllerConcern')
@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
  BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create],
    'api/v1/accounts/conversations/messages' => ['create'],
    'api/v1/accounts/conversations/assignments' => ['create']
  }.freeze
@@ -1,5 +0,0 @@
-module DomainHelper
-  def self.chatwoot_domain?(domain = request.host)
-    [URI.parse(ENV.fetch('FRONTEND_URL', '')).host, URI.parse(ENV.fetch('HELPCENTER_URL', '')).host].include?(domain)
-  end
-end
@@ -6,7 +6,6 @@ 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, &)
@@ -17,20 +16,6 @@ module SwitchLocale
    set_locale(locale, &)
  end

-  # If the request is coming from a custom domain, it should be for a helpcenter portal
-  # We will use the portal locale in such cases
-  def locale_from_custom_domain(&)
-    return if params[:locale]
-
-    domain = request.host
-    return if DomainHelper.chatwoot_domain?(domain)
-
-    @portal = Portal.find_by(custom_domain: domain)
-    return unless @portal
-
-    @portal.default_locale
-  end
-
  def set_locale(locale, &)
    # if locale is empty, use default_locale
    locale ||= I18n.default_locale
@@ -18,7 +18,6 @@ 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',
@@ -5,7 +5,7 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
  skip_before_action :authenticate_user!, raise: false

  def create
-    @user = User.from_email(params[:email])
+    @user = User.find_by(email: params[:email])
    if @user
      @user.send_reset_password_instructions
      build_response(I18n.t('messages.reset_password_success'), 200)
@@ -4,10 +4,6 @@ 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?
@@ -25,12 +21,6 @@ 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!
@@ -43,7 +33,7 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
  def process_sso_auth_token
    return if params[:email].blank?

-    user = User.from_email(params[:email])
+    user = User.find_by(email: params[:email])
    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
  end
 end
@@ -8,7 +8,7 @@ class Platform::Api::V1::UsersController < PlatformController
  def show; end

  def create
-    @resource = (User.from_email(user_params[:email]) || User.new(user_params))
+    @resource = (User.find_by(email: user_params[:email]) || User.new(user_params))
    @resource.skip_confirmation!
    @resource.save!
    @platform_app.platform_app_permissibles.find_or_create_by!(permissible: @resource)
@@ -7,7 +7,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def index
    @articles = @portal.articles
-    search_articles
+    @articles = @articles.search(list_params) if list_params.present?
    order_by_sort_param
    @articles.page(list_params[:page]) if list_params[:page].present?
  end
@@ -16,10 +16,6 @@ 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
@@ -55,5 +51,3 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
    ChatwootMarkdownRenderer.new(content).render_article
  end
 end
-
-Public::Api::V1::Portals::ArticlesController.prepend_mod_with('Public::Api::V1::Portals::ArticlesController')
@@ -47,7 +47,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
    @locale = if article.category.present?
                article.category.locale
              else
-                article.portal.default_locale
+                'en'
              end

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

  def show; end

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

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

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

    @portal = ::Portal.find_by(custom_domain: domain)
    return if @portal.present?
@@ -5,10 +5,6 @@
 # If you want to add pagination or other controller-level concerns,
 # you're free to overwrite the RESTful controller actions.
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
-  include ActionView::Helpers::TagHelper
-  include ActionView::Context
-
-  helper_method :render_vue_component
  # authenticiation done via devise : SuperAdmin Model
  before_action :authenticate_super_admin!

@@ -27,17 +23,6 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController

  private

-  def render_vue_component(component_name, props = {})
-    html_options = {
-      id: 'app',
-      data: {
-        component_name: component_name,
-        props: props.to_json
-      }
-    }
-    content_tag(:div, '', html_options)
-  end
-
  def invalid_action_perfomed
    # rubocop:disable Rails/I18nLocaleTexts
    flash[:error] = 'Invalid action performed'
@@ -163,14 +163,10 @@ class ConversationFinder
    params[:page] || 1
  end

-  def conversations_base_query
-    @conversations.includes(
+  def conversations
+    @conversations = @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)
@@ -182,4 +178,3 @@ class ConversationFinder
    end
  end
 end
-ConversationFinder.prepend_mod_with('ConversationFinder')
@@ -2,11 +2,4 @@ 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
@@ -1,83 +0,0 @@
-module ContactHelper
-  def parse_name(full_name)
-    #  If the input is nil or not a string, return a hash with all values set to nil
-    return default_name_hash if invalid_name?(full_name)
-
-    # If the input is a number, return a hash with the number as the first name
-    return numeric_name_hash(full_name) if valid_number?(full_name)
-
-    full_name = full_name.squish
-
-    # If full name consists of only one word, consider it as the first name
-    return single_word_name_hash(full_name) if single_word?(full_name)
-
-    parts = split_name(full_name)
-    parts = handle_conjunction(parts)
-    build_name_hash(parts)
-  end
-
-  private
-
-  def default_name_hash
-    { first_name: nil, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
-  end
-
-  def invalid_name?(full_name)
-    !full_name.is_a?(String) || full_name.empty?
-  end
-
-  def numeric_name_hash(full_name)
-    { first_name: full_name, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
-  end
-
-  def valid_number?(full_name)
-    full_name.gsub(/\s+/, '').match?(/\A\+?\d+\z/)
-  end
-
-  def single_word_name_hash(full_name)
-    { first_name: full_name, last_name: nil, middle_name: nil, prefix: nil, suffix: nil }
-  end
-
-  def single_word?(full_name)
-    full_name.split.size == 1
-  end
-
-  def split_name(full_name)
-    full_name.split
-  end
-
-  def handle_conjunction(parts)
-    conjunctions = ['and', '&']
-    parts.each_index do |i|
-      next unless conjunctions.include?(parts[i]) && i.positive?
-
-      parts[i - 1] = [parts[i - 1], parts[i + 1]].join(' ')
-      parts.delete_at(i)
-      parts.delete_at(i)
-    end
-    parts
-  end
-
-  def build_name_hash(parts)
-    suffix = parts.pop if parts.last.match?(/(\w+\.|[IVXLM]+|[A-Z]+)$/)
-    last_name = parts.pop
-    prefix = parts.shift if parts.first.match?(/^\w+\./)
-    first_name = parts.shift
-    middle_name = parts.join(' ')
-
-    hash = {
-      first_name: first_name,
-      last_name: last_name,
-      prefix: prefix,
-      middle_name: middle_name,
-      suffix: suffix
-    }
-
-    # Reverse name if "," was used in Last, First notation.
-    if hash[:first_name] =~ /,$/
-      hash[:first_name] = hash[:last_name]
-      hash[:last_name] = Regexp.last_match.pre_match
-    end
-    hash
-  end
-end
@@ -1,84 +0,0 @@
-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
@@ -32,14 +32,6 @@ module ReportHelper
    (get_grouped_values resolutions).count
  end

-  def bot_resolutions_count
-    (get_grouped_values bot_resolutions).count
-  end
-
-  def bot_handoffs_count
-    (get_grouped_values bot_handoffs).count
-  end
-
  def conversations
    scope.conversations.where(account_id: account.id, created_at: range)
  end
@@ -57,16 +49,6 @@ module ReportHelper
                                                                               conversations: { status: :resolved }, created_at: range).distinct
  end

-  def bot_resolutions
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
-                                                                               conversations: { status: :resolved }, created_at: range).distinct
-  end
-
-  def bot_handoffs
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_handoff,
-                                                                               created_at: range).distinct
-  end
-
  def avg_first_response_time
    grouped_reporting_events = (get_grouped_values scope.reporting_events.where(name: 'first_response', account_id: account.id))
    return grouped_reporting_events.average(:value_in_business_hours) if params[:business_hours]
@@ -84,24 +84,6 @@ 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();
@@ -1,78 +0,0 @@
-/* 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();
@@ -111,40 +111,6 @@ 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(
@@ -1,104 +0,0 @@
-import SLAReportsAPI from '../slaReports';
-import ApiClient from '../ApiClient';
-
-describe('#SLAReports API', () => {
-  it('creates correct instance', () => {
-    expect(SLAReportsAPI).toBeInstanceOf(ApiClient);
-    expect(SLAReportsAPI.apiVersion).toBe('/api/v1');
-    expect(SLAReportsAPI).toHaveProperty('get');
-    expect(SLAReportsAPI).toHaveProperty('getMetrics');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: jest.fn(() => Promise.resolve()),
-      get: jest.fn(() => Promise.resolve()),
-      patch: jest.fn(() => Promise.resolve()),
-      delete: jest.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#get', () => {
-      SLAReportsAPI.get({
-        page: 1,
-        from: 1622485800,
-        to: 1623695400,
-        assigned_agent_id: 1,
-        inbox_id: 1,
-        team_id: 1,
-        sla_policy_id: 1,
-        label_list: ['label1'],
-      });
-      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/applied_slas', {
-        params: {
-          page: 1,
-          since: 1622485800,
-          until: 1623695400,
-          assigned_agent_id: 1,
-          inbox_id: 1,
-          team_id: 1,
-          sla_policy_id: 1,
-          label_list: ['label1'],
-        },
-      });
-    });
-    it('#getMetrics', () => {
-      SLAReportsAPI.getMetrics({
-        from: 1622485800,
-        to: 1623695400,
-        assigned_agent_id: 1,
-        inbox_id: 1,
-        team_id: 1,
-        sla_policy_id: 1,
-        label_list: ['label1'],
-      });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/applied_slas/metrics',
-        {
-          params: {
-            since: 1622485800,
-            until: 1623695400,
-            assigned_agent_id: 1,
-            inbox_id: 1,
-            team_id: 1,
-            sla_policy_id: 1,
-            label_list: ['label1'],
-          },
-        }
-      );
-    });
-    it('#download', () => {
-      SLAReportsAPI.download({
-        from: 1622485800,
-        to: 1623695400,
-        assigned_agent_id: 1,
-        inbox_id: 1,
-        team_id: 1,
-        sla_policy_id: 1,
-        label_list: ['label1'],
-      });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/applied_slas/download',
-        {
-          params: {
-            since: 1622485800,
-            until: 1623695400,
-            assigned_agent_id: 1,
-            inbox_id: 1,
-            team_id: 1,
-            sla_policy_id: 1,
-            label_list: ['label1'],
-          },
-        }
-      );
-    });
-  });
-});
@@ -1,13 +1,6 @@
@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;
@@ -0,0 +1,58 @@
+.button {
+  font-family: $body-font-family;
+  font-weight: $font-weight-medium;
+
+  &.round {
+    border-radius: 1000px;
+  }
+}
+
+select {
+  height: 2.5rem;
+}
+
+.card {
+  margin-bottom: var(--space-small);
+  padding: var(--space-normal);
+}
+
+code {
+  border: 0;
+  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
+    '"Liberation Mono"', '"Courier New"', 'monospace';
+  font-size: $font-size-mini;
+
+  &.hljs {
+    background: $color-background;
+    border-radius: var(--border-radius-large);
+    padding: $space-two;
+    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
+  }
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+// remove when grid gutters are fixed
+.columns.with-right-space {
+  padding-right: var(--space-normal);
+}
+
+.badge {
+  border-radius: var(--border-radius-normal);
+}
+
+.padding-right-small {
+  padding-right: var(--space-one);
+}
@@ -0,0 +1,623 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Card
+//  15. Close Button
+//  16. Drilldown
+//  17. Dropdown
+//  18. Dropdown Menu
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Meter
+//  24. Off-canvas
+//  25. Orbit
+//  26. Pagination
+//  27. Progress Bar
+//  28. Responsive Embed
+//  29. Reveal
+//  30. Slider
+//  31. Switch
+//  32. Table
+//  33. Tabs
+//  34. Thumbnail
+//  35. Title Bar
+//  36. Tooltip
+//  37. Top Bar
+
+@import '~foundation-sites/scss/util/util';
+// 1. Global
+// ---------
+
+// Disable contrast warnings in Foundation.
+$contrast-warnings: false;
+
+$global-font-size: 16px;
+$global-width: 100%;
+$global-lineheight: 1.5;
+$foundation-palette: (primary: $color-woot,
+  secondary: #5d7592,
+  success: #44ce4b,
+  warning: #ffc532,
+  alert: #ff382d);
+$light-gray: #c0ccda;
+$medium-gray: #8492a6;
+$dark-gray: $color-gray;
+$black: #000;
+$white: #fff;
+$body-background: $white;
+$body-font-color: $color-body;
+$body-font-family: 'PlusJakarta',
+-apple-system,
+system-ui,
+BlinkMacSystemFont,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+Tahoma,
+Arial,
+sans-serif;
+$body-antialiased: true;
+$global-margin: $space-small;
+$global-padding: $space-small;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 0;
+$global-text-direction: ltr;
+$global-flexbox: false;
+$print-transparent-backgrounds: true;
+
+@include add-foundation-colors;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1400px,
+  xxxlarge: 1600px,
+);
+$print-breakpoint: large;
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-gutter: (small: $zero,
+  medium: $zero);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $font-weight-medium;
+$header-font-style: normal;
+$font-family-monospace: $body-font-family;
+$header-color: $color-heading;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.3125rem;
+$header-styles: (small: ("h1": ("font-size": 24),
+    "h2": ("font-size": 20),
+    "h3": ("font-size": 19),
+    "h4": ("font-size": 18),
+    "h5": ("font-size": 17),
+    "h6": ("font-size": 16)),
+  medium: ("h1": ("font-size": 48),
+    "h2": ("font-size": 40),
+    "h3": ("font-size": 31),
+    "h4": ("font-size": 25),
+    "h5": ("font-size": 20),
+    "h6": ("font-size": 16)));
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.65;
+$paragraph-margin-bottom: var(--space-small);
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 0.78125rem;
+$list-nested-side-margin: 0.78125rem;
+$defnlist-margin-bottom: 0.6875rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.1875rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$cite-pseudo-content: '\2014 \0020';
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.125rem;
+$subheader-margin-bottom: 0.3125rem;
+$stat-font-size: 1.5625rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: get-color(alert);
+$form-label-color-invalid: get-color(alert);
+$input-error-color: get-color(alert);
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-title-font-size: rem-calc(12);
+$accordion-item-color: $primary-color;
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 0.78125rem 0.625rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: $body-font-color;
+$accordion-content-padding: 0.625rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+$accordionmenu-arrow-size: 6px;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: $white;
+$badge-color-alt: $black;
+$badge-palette: $foundation-palette;
+$badge-padding: var(--space-smaller);
+$badge-minwidth: 2.1em;
+$badge-font-size: var(--font-size-nano);
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.46875rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: var(--space-smaller) 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: $white;
+$button-color-alt: $white;
+$button-radius: var(--border-radius-normal);
+$button-sizes: (tiny: var(--font-size-micro),
+  small: var(--font-size-mini),
+  default: var(--font-size-small),
+  large: var(--font-size-medium));
+$button-palette: $foundation-palette;
+$button-opacity-disabled: 0.4;
+$button-background-hover-lightness: -20%;
+$button-hollow-hover-lightness: -50%;
+$button-transition: background-color 0.25s ease-out,
+color 0.25s ease-out;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 0;
+$buttongroup-spacing: 0;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+$buttongroup-radius-on-each: false;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 0.625rem 0;
+$callout-padding: 0.625rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Card
+// --------
+
+$card-background: $white;
+$card-font-color: $body-font-color;
+$card-divider-background: $light-gray;
+$card-border: 1px solid var(--color-border);
+$card-shadow: var(--shadow-small);
+$card-border-radius: var(--border-radius-normal);
+$card-padding: var(--space-small);
+$card-margin: $global-margin;
+
+// 15. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: (small: 0.66rem,
+  medium: 1rem);
+$closebutton-offset-vertical: (small: 0.33em,
+  medium: 0.5rem);
+$closebutton-size: (small: 1.5em,
+  medium: 2em);
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 16. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-arrow-color: $primary-color;
+$drilldown-arrow-size: 6px;
+$drilldown-background: $white;
+
+// 17. Dropdown
+// ------------
+
+$dropdown-padding: 0.625rem;
+$dropdown-background: $body-background;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 0.625rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (tiny: 100px,
+  small: 200px,
+  large: 400px);
+
+// 18. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-arrow-size: 6px;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $light-gray;
+$fieldset-padding: $space-two;
+$fieldset-margin: $space-one $zero;
+$legend-padding: rem-calc(0 3);
+$form-spacing: $space-normal;
+$helptext-color: $color-body;
+$helptext-font-size: $font-size-small;
+$helptext-font-style: italic;
+$input-prefix-color: $color-body;
+$input-prefix-background: var(--b-100);
+$input-prefix-border: 1px solid $color-border;
+$input-prefix-padding: 0.625rem;
+$form-label-color: $color-body;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $font-weight-medium;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: $dark-gray;
+$select-radius: var(--border-radius-normal);
+$input-color: $color-body;
+$input-placeholder-color: $light-gray;
+$input-font-family: inherit;
+$input-font-size: $font-size-default;
+$input-font-weight: $global-weight-normal;
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid var(--s-200);
+$input-border-focus: 1px solid lighten($primary-color, 15%);
+$input-shadow: 0;
+$input-shadow-focus: 0;
+$input-cursor-disabled: not-allowed;
+$input-transition: border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: var(--border-radius-normal);
+$form-button-radius: var(--border-radius-normal);
+
+// 20. Label
+// ---------
+
+$label-background: $white;
+$label-color: $black;
+$label-color-alt: $black;
+$label-palette: $foundation-palette;
+$label-font-size: $font-size-mini;
+$label-padding: $space-smaller $space-small;
+$label-radius: var(--border-radius-small);
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: $space-medium;
+$menu-item-padding: $space-slab;
+$menu-item-color-active: $white;
+$menu-item-background-active: $color-background;
+$menu-icon-spacing: 0.15625rem;
+$menu-item-background-hover: $light-gray;
+$menu-border: $light-gray;
+
+// 23. Meter
+// ---------
+
+$meter-height: 0.625rem;
+$meter-radius: $global-radius;
+$meter-background: $medium-gray;
+$meter-fill-good: $success-color;
+$meter-fill-medium: $warning-color;
+$meter-fill-bad: $alert-color;
+
+// 24. Off-canvas
+// --------------
+
+$offcanvas-sizes: (small: 14.375,
+  medium: 14.375,
+);
+$offcanvas-vertical-sizes: (small: 14.375,
+  medium: 14.375,
+);
+$offcanvas-background: $light-gray;
+$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
+$offcanvas-push-zindex: 1;
+$offcanvas-overlap-zindex: 10;
+$offcanvas-reveal-zindex: 1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+
+// 25. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 0.75rem;
+$orbit-bullet-margin: 0.0625rem;
+$orbit-bullet-margin-top: 0.5rem;
+$orbit-bullet-margin-bottom: 0.5rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 0.625rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 0.625rem;
+$orbit-control-zindex: 10;
+
+// 26. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: $white;
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-mobile-current-item: false;
+$pagination-arrows: true;
+
+// 27. Progress Bar
+// ----------------
+
+$progress-height: 0.625rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 28. Responsive Embed
+// --------------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratios: (default: 4 by 3,
+  widescreen: 16 by 9);
+
+// 29. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 30. Slider
+// ----------
+
+$slider-width-vertical: 0.3125rem;
+$slider-transition: all 0.2s ease-in-out;
+$slider-height: 0.3125rem;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 0.875rem;
+$slider-handle-width: 0.875rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+
+// 31. Switch
+// ----------
+
+$switch-background: $light-gray;
+$switch-background-active: $primary-color;
+$switch-height: $space-two;
+$switch-height-tiny: $space-slab;
+$switch-height-small: $space-normal;
+$switch-height-large: $space-large;
+$switch-radius: $space-large;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: $space-micro;
+$switch-paddle-radius: $space-large;
+$switch-paddle-transition: all 0.15s ease-out;
+
+// 32. Table
+// ---------
+
+$table-background: transparent;
+$table-color-scale: 5%;
+$table-border: 1px solid transparent;
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background,
+  $table-color-scale + $table-hover-scale);
+$table-is-striped: false;
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-head-row-hover: darken($table-head-background, $table-hover-scale);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
+$table-head-font-color: $body-font-color;
+$table-foot-font-color: $body-font-color;
+$show-header-for-stacked: false;
+
+// 33. Tabs
+// --------
+
+$tab-margin: 0;
+
+$tab-background: transparent;
+$tab-background-active: transparent;
+$tab-item-font-size: $font-size-small;
+$tab-item-background-hover: transparent;
+$tab-item-padding: $space-one $zero;
+$tab-color: $primary-color;
+$tab-active-color: $primary-color;
+$tab-expand-max: 6;
+$tab-content-background: transparent;
+$tab-content-border: transparent;
+$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-padding: 0.625rem;
+
+// 34. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 35. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.3125rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.15625rem;
+
+// 36. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.46875rem;
+$tooltip-font-size: $font-size-mini;
+$tooltip-pip-width: 0.46875rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-radius: $global-radius;
+
+// 37. Top Bar
+// -----------
+
+$topbar-padding: 0.3125;
+$topbar-background: $light-gray;
+$topbar-submenu-background: $topbar-background;
+$topbar-title-spacing: 0.3125 0.625rem 0.3125 0;
+$topbar-input-width: 200px;
+$topbar-unstack-breakpoint: medium;
+
+
+// Internal variable that contains the flex justifying options
+$-zf-flex-justify: -zf-flex-justify($global-text-direction);
+
+$menu-items-padding: $space-one;
+$xy-grid: false;
@@ -1,22 +1,64 @@
-// loader class
+.bg-light {
+  @apply bg-slate-25 dark:bg-slate-800;
+}
+
+.flex-center {
+  @include flex-align(center, middle);
+  display: flex;
+}
+
+.bottom-space-fix {
+  margin-bottom: auto;
+}
+
+.full-height {
+  @include full-height();
+}
+
 .spinner {
  @include color-spinner();
-  @apply inline-block h-6 py-0 px-6 relative align-middle w-6;
+  display: inline-block;
+  height: $space-medium;
+  padding: $zero $space-medium;
+  position: relative;
+  vertical-align: middle;
+  width: $space-medium;

  &.message {
    @include normal-shadow;
-    @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
+    background: $color-white;
+    border-radius: $space-large;
+    left: 0;
+    margin: $space-slab auto;
+    padding: $space-normal;
+    top: 0;

    &::before {
-      @apply -ml-3 -mt-3;
+      margin-left: -$space-slab;
+      margin-top: -$space-slab;
    }
  }

  &.small {
-    @apply h-4 w-4;
+    height: $space-normal;
+    width: $space-normal;

    &::before {
-      @apply h-4 -mt-2 w-4;
+      height: $space-normal;
+      margin-top: -$space-small;
+      width: $space-normal;
    }
  }
 }
+
+.justify-space-between {
+  justify-content: space-between;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.h-full {
+  height: 100%;
+}
@@ -1,19 +1,5 @@
-// scss-lint:disable SpaceAfterPropertyColon
-@import 'shared/assets/fonts/inter';
-// Inter,
 html,
 body {
-  font-family:
-    'PlusJakarta',
-    -apple-system,
-    system-ui,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Tahoma,
-    Arial,
-    sans-serif !important;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  height: 100%;
@@ -131,12 +131,37 @@
      }
    }

+    .search-header--wrap {
+      .search--input {
+        text-align: right;
+      }
+
+      .layout-switch__container {
+        transform: rotate(180deg);
+      }
+    }
+
    // Basic filter dropdown
    .basic-filter {
      left: 0;
      right: unset;
    }

+    // Card label
+    .label-container {
+      .label {
+        margin-left: var(--space-smaller);
+        margin-right: 0;
+      }
+    }
+
+    // Secondary sidebar toggle button
+    .toggle-sidebar {
+      margin-left: 0;
+      margin-right: var(--space-minus-small);
+      transform: rotate(180deg);
+    }
+
    // Bulk actions
    .bulk-action__container {
      .triangle {
@@ -177,6 +202,22 @@
    }
  }

+  // Notification panel
+  .notification-wrap {
+    left: 0;
+    right: var(--space-jumbo);
+
+    .action-button {
+      margin-left: var(--space-small);
+      margin-right: 0;
+    }
+
+    .notification-content--wrap {
+      margin-left: 0;
+      margin-right: var(--space-small);
+    }
+  }
+
  //   Help center
  .article-container .row--article-block {
    td:last-child {
@@ -283,6 +324,10 @@

  // Other changes

+  .account-selector--wrap {
+    direction: initial;
+  }
+
  .colorpicker--chrome {
    direction: initial;
  }
@@ -302,4 +347,9 @@
  .contact--form .input-group {
    direction: initial;
  }
+
+  // scss-lint:disable QualifyingElement
+  .dropdown-menu--header > span.title {
+    text-align: right;
+  }
 }
@@ -0,0 +1,33 @@
+.page-title {
+  font-size: $font-size-big;
+}
+
+.page-sub-title {
+  font-size: $font-size-large;
+  word-wrap: break-word;
+}
+
+.block-title {
+  font-size: $font-size-medium;
+}
+
+.sub-block-title {
+  font-size: $font-size-default;
+}
+
+.text-block-title {
+  font-size: $font-size-small;
+}
+
+.text-muted {
+  color: var(--s-300);
+}
+
+a {
+  font-size: $font-size-small;
+}
+
+p {
+  font-size: $font-size-small;
+  word-spacing: .12em;
+}
@@ -0,0 +1,73 @@
+.margin-bottom-small {
+  margin-bottom: var(--space-small);
+}
+
+.margin-right-smaller {
+  margin-right: var(--space-smaller);
+}
+
+.margin-left-minus-slab {
+  margin-left: var(--space-minus-slab);
+}
+
+.margin-right-minus-slab {
+  margin-right: var(--space-minus-slab);
+}
+
+.fs-small {
+  font-size: var(--font-size-small);
+}
+
+.fs-default {
+  font-size: var(--font-size-default);
+}
+
+.fw-medium {
+  font-weight: var(--font-weight-medium);
+}
+
+.p-normal {
+  padding: var(--space-normal);
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.border-right {
+  @apply border-r border-slate-50 dark:border-slate-700;
+}
+
+.border-left {
+  border-left: 1px solid var(--color-border);
+}
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flex-between {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-end {
+  display: flex;
+  justify-content: end;
+}
+
+.flex-align-center {
+  align-items: center;
+  display: flex;
+}
@@ -15,372 +15,63 @@
@import 'variables';

@import 'mixins';
+@import 'foundation-settings';
@import 'helper-classes';
@import 'formulate';
@import 'date-picker';

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

-@import 'widgets/base';
@import 'widgets/buttons';
+@import 'widgets/conv-header';
+@import 'widgets/conversation-card';
@import 'widgets/conversation-view';
+@import 'widgets/forms';
+@import 'widgets/login';
+@import 'widgets/modal';
+@import 'widgets/reply-box';
+@import 'widgets/report';
+@import 'widgets/search-box';
+@import 'widgets/sidemenu';
+@import 'widgets/snackbar';
+@import 'widgets/states';
+@import 'widgets/status-bar';
@import 'widgets/tabs';
@import 'widgets/woot-tables';

+@import 'views/settings/inbox';
+@import 'views/settings/integrations';
+
@import 'plugins/multiselect';
@import 'plugins/dropdown';
@import '~shared/assets/stylesheets/ionicons';
+@import 'utility-helpers';

 .tooltip {
  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }
-
-.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;
-  }
-}
@@ -1,7 +1,46 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
+  @include elegant-card;
+  @include border-light;
+  box-sizing: content-box;
+  padding: var(--space-small);
+  width: fit-content;
+  z-index: var(--z-index-very-high);

  &.dropdown-pane--open {
-    @apply bg-white absolute dark:bg-slate-800 block visible;
+    @apply bg-white dark:bg-slate-800;
+    display: block;
+    visibility: visible;
+  }
+
+  &.dropdowm--bottom {
+    &::before {
+      @include arrow(top, var(--color-border-light), 14px);
+      position: absolute;
+      right: 6px;
+      top: -14px;
+    }
+
+    &::after {
+      @include arrow(top, $color-white, var(--space-slab));
+      position: absolute;
+      right: var(--space-small);
+      top: -12px;
+    }
+  }
+
+  &.dropdowm--top {
+    &::before {
+      @include arrow(bottom, var(--color-border-light), 14px);
+      bottom: -14px;
+      position: absolute;
+      right: 6px;
+    }
+
+    &::after {
+      @include arrow(bottom, $color-white, var(--space-slab));
+      bottom: -12px;
+      position: absolute;
+      right: var(--space-small);
+    }
  }
 }
@@ -97,10 +97,6 @@

  .multiselect__tags {
    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 m-0 min-h-[2.875rem] pt-0;
-
-    input {
-      @apply border-0 border-none;
-    }
  }

  .multiselect__tags-wrap {
@@ -153,28 +149,6 @@
 }

 .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,
@@ -206,6 +180,7 @@
  .multiselect--disabled .multiselect__select {
    @apply bg-transparent;
  }
+
 }

 .multiselect-wrap--medium {
@@ -13,14 +13,20 @@
@import '~shared/assets/stylesheets/ionicons';

@import 'mixins';
+@import 'foundation-settings';
@import 'helper-classes';
+@import 'foundation-sites/scss/foundation';
+
+@include foundation-prototype-spacing;
+@include foundation-everything($flex: true);

@import 'typography';
@import 'layout';
@import 'animations';

+@import 'foundation-custom';
@import 'widgets/buttons';
-@import 'widgets/base';
+@import 'widgets/forms';

@import 'plugins/multiselect';

@@ -30,6 +36,7 @@
@import 'tailwindcss/utilities';
@import 'widget/assets/scss/utilities';

+
 html,
 body {
  font-family: 'PlusJakarta', sans-serif;
@@ -1 +1,112 @@
-// to be removed
+.settings {
+  @apply overflow-auto;
+}
+
+.wizard-box {
+  .item {
+    @apply cursor-pointer py-4 pr-4 pl-6 relative;
+
+    &::before,
+    &::after {
+      @apply bg-slate-75 dark:bg-slate-600 content-[''] h-full absolute top-5 w-0.5;
+    }
+
+    &::before {
+      @apply h-4 top-0;
+    }
+
+    &:first-child {
+      &::before {
+        @apply h-0;
+      }
+    }
+
+    &:last-child {
+      &::after {
+        @apply h-0;
+      }
+    }
+
+    &.active {
+      h3 {
+        @apply text-woot-500 dark:text-woot-500;
+      }
+
+      .step {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+    }
+
+    &.over {
+      &::after {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+
+      .step {
+        @apply bg-woot-500 dark:bg-woot-500;
+      }
+
+      & + .item {
+        &::before {
+          @apply bg-woot-500 dark:bg-woot-500;
+        }
+      }
+    }
+
+    h3 {
+      @apply text-slate-800 dark:text-slate-100 text-base pl-6;
+    }
+
+    .completed {
+      @apply text-green-500 dark:text-green-500 ml-1;
+    }
+
+    p {
+      @apply text-slate-600 dark:text-slate-300 text-sm m-0 pl-6;
+    }
+
+    .step {
+      @apply bg-slate-75 dark:bg-slate-600 rounded-2xl font-medium w-4 left-4 leading-4 z-[999] absolute text-center text-white dark:text-white text-xxs top-5;
+
+      i {
+        @apply text-xxs;
+      }
+    }
+  }
+}
+
+.wizard-body {
+  @apply border border-slate-25 dark:border-slate-800/60 bg-white dark:bg-slate-900 h-full p-6;
+
+  &.height-auto {
+    @apply h-auto;
+  }
+}
+
+.settings--content {
+  @apply my-2 mx-8;
+
+  .title {
+    @apply font-medium;
+  }
+
+  .code {
+    @apply bg-slate-50 dark:bg-slate-800 overflow-auto p-2.5 whitespace-nowrap;
+
+    code {
+      @apply bg-transparent border-0;
+    }
+  }
+}
+
+.login-init {
+  @apply pt-[30%] text-center;
+
+  p {
+    @apply p-6;
+  }
+
+  > a > img {
+    @apply w-60;
+  }
+}
@@ -1,146 +0,0 @@
-// scss-lint:disable QualifyingElement
-
-// Base typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @apply font-medium text-slate-800 dark:text-slate-50;
-}
-
-p {
-  text-rendering: optimizeLegibility;
-  word-spacing: 0.12em;
-
-  @apply mb-2 leading-[1.65] text-sm;
-
-  a {
-    @apply text-woot-500 dark:text-woot-500 cursor-pointer;
-  }
-}
-
-a {
-  @apply text-sm;
-}
-
-hr {
-  @apply clear-both max-w-full h-0 my-5 mx-0 border-slate-300 dark:border-slate-600;
-}
-
-ul,
-ol,
-dl {
-  @apply mb-2 list-disc list-outside leading-[1.65];
-}
-
-// Form elements
-label {
-  @apply text-slate-800 dark:text-slate-200 block m-0 leading-7 text-sm font-medium;
-
-  &.error {
-    input {
-      @apply mb-1;
-    }
-  }
-}
-
-.input-wrap,
-.help-text {
-  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
-
-  .help-text {
-    @apply font-normal text-slate-600 dark:text-slate-400;
-  }
-}
-
-// Focus outline removal
-.button,
-textarea,
-input:focus {
-  outline: none;
-}
-
-// Inputs
-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] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
-  }
-}
-
-input[type='file'] {
-  @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4;
-}
-
-// Select
-select {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
-  background-position: right -1rem center;
-  background-size: 9px 6px;
-  @apply h-10 mx-0 mt-0 mb-4 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 pr-6 pl-2 rounded-md w-full text-base font-normal appearance-none transition-colors focus:border-woot-500 dark:focus:border-woot-600 duration-[0.25s] ease-[ease-in-out] bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border border-solid border-slate-200 dark:border-slate-600;
-}
-
-// Textarea
-textarea {
-  @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-16 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] {
-    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600 cursor-not-allowed;
-  }
-}
-
-// Error handling
-.has-multi-select-error {
-  div.multiselect {
-    @apply mb-1;
-  }
-}
-
-.error {
-  input,
-  input:not([type]),
-  textarea,
-  select,
-  .multiselect > .multiselect__tags,
-  .multiselect:not(.no-margin) {
-    @apply border border-solid border-red-400 dark:border-red-400 mb-1;
-  }
-
-  .message {
-    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
-  }
-}
-
-.input-group.small {
-  input {
-    @apply text-sm h-8;
-  }
-
-  .error {
-    @apply border-red-400 dark:border-red-400;
-  }
-}
-
-// Code styling
-code {
-  font-family: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas',
-    '"Liberation Mono"', '"Courier New"', 'monospace';
-  @apply text-xs border-0;
-
-  &.hljs {
-    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5;
-
-    .hljs-number,
-    .hljs-string {
-      @apply text-red-800 dark:text-red-400;
-    }
-  }
-}
@@ -1,40 +1,8 @@
-// scss-lint:disable SpaceAfterPropertyColon
-// scss-lint:disable MergeableSelector
-button {
-  font-family: inherit;
-  transition:
-    background-color 0.25s ease-out,
-    color 0.25s ease-out;
-  @apply inline-block items-center mb-0 text-center align-middle cursor-pointer text-sm mt-0 mx-0 py-1 px-2.5 border border-solid border-transparent dark:border-transparent rounded-[0.3125rem];
-
-  &:disabled,
-  &.disabled {
-    @apply opacity-40 cursor-not-allowed;
-  }
-}
-
-.button-group {
-  @apply mb-0 flex flex-nowrap items-stretch;
-
-  .button {
-    flex: 0 0 auto;
-    @apply m-0 text-sm rounded-none first:rounded-tl-[0.3125rem] first:rounded-bl-[0.3125rem] last:rounded-tr-[0.3125rem] last:rounded-br-[0.3125rem] rtl:space-x-reverse;
-  }
-
-  .button--only-icon {
-    @apply w-10 justify-center pl-0 pr-0;
-  }
-}
-
-.back-button {
-  @apply m-0;
-}
-
 .button {
-  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center inline-flex h-10 mb-0 gap-2;

  .button__content {
-    @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
+    @apply w-full;

    img,
    svg {
@@ -42,61 +10,12 @@ button {
    }
  }

-  &:hover {
-    @apply bg-woot-600 dark:bg-woot-600;
-  }
-
-  &:disabled,
-  &.disabled {
-    @apply opacity-40 cursor-not-allowed;
-  }
-
-  &.success {
-    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
-  }
-
-  &.secondary {
-    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
-  }
-
-  &.primary {
-    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
-  }
-
-  &.clear {
-    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
-  }
-
-  &.alert {
-    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
-
-    &.clear {
-      @apply bg-transparent dark:bg-transparent;
-    }
-  }
-
-  &.warning {
-    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
-
-    &.clear {
-      @apply bg-transparent dark:bg-transparent;
-    }
-  }
-
-  &.tiny {
-    @apply h-6 text-[10px];
-  }
-
-  &.small {
-    @apply h-8 text-xs;
-  }
-
  .spinner {
    @apply px-2 py-0;
  }

  // @TODDO - Remove after moving all buttons to woot-button
-  .icon+.button__content {
+  .icon + .button__content {
    @apply w-auto;
  }

@@ -115,10 +34,10 @@ button {
  }

  &.hollow {
-    @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;
+    @apply border border-woot-500 dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;

    &.secondary {
-      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
+      @apply text-slate-700 border-slate-200 dark:border-slate-600 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
    }

    &.success {
@@ -0,0 +1 @@
+// File to be removed
@@ -0,0 +1,16 @@
+@keyframes left-shift-animation {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  50% {
+    transform: translateX(1px);
+  }
+}
+
+.conversation {
+  &.active {
+    animation: left-shift-animation 0.25s $swift-ease-out-function;
+  }
+}
@@ -79,7 +79,7 @@
      @apply rounded-r-lg rounded-l mr-auto break-words;

      &:not(.is-unsupported) {
-        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50;
+        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50
      }

      &.is-image {
@@ -91,7 +91,7 @@
      }

      .file {
-        .attachment-name {
+        .text-block-title {
          @apply text-slate-700 dark:text-woot-300;
        }

@@ -222,6 +222,20 @@
  @apply flex relative flex-col;
 }

+.typing-indicator-wrap {
+  @apply items-center flex h-0 absolute w-full -top-8;
+
+  .typing-indicator {
+    @include elegant-card;
+    @include round-corner;
+    @apply py-2 pr-4 pl-5 bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100 text-xs font-semibold my-2.5 mx-auto;
+
+    .gif {
+      @apply ml-2 w-6;
+    }
+  }
+}
+
 .left .bubble .text-content {
  h1,
  h2,
@@ -0,0 +1,78 @@
+// scss-lint:disable QualifyingElement
+
+label {
+  @apply text-slate-800 dark:text-slate-200;
+}
+
+textarea {
+  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+}
+
+input {
+  @apply bg-white dark:bg-slate-900 focus:bg-white focus:dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+
+  &[disabled] {
+    @apply bg-slate-200 dark:bg-slate-700 text-slate-400 dark:text-slate-400 border-slate-200 dark:border-slate-600;
+  }
+}
+
+input[type='file'] {
+  @apply bg-white dark:bg-slate-800;
+}
+
+select {
+  @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-200 dark:border-slate-600;
+}
+
+.error {
+  input[type='color'],
+  input[type='date'],
+  input[type='datetime'],
+  input[type='datetime-local'],
+  input[type='email'],
+  input[type='month'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='text'],
+  input[type='time'],
+  input[type='url'],
+  input[type='week'],
+  input:not([type]),
+  textarea,
+  select,
+  .multiselect > .multiselect__tags {
+    @apply border border-solid border-red-400 dark:border-red-400;
+  }
+
+  .message {
+    @apply text-red-400 dark:text-red-400 block text-sm mb-2.5 w-full;
+  }
+}
+
+.button,
+textarea,
+input {
+  &:focus {
+    outline: none;
+  }
+}
+
+.input-wrap {
+  @apply text-slate-800 dark:text-slate-100 text-sm font-medium;
+}
+
+.help-text {
+  @apply font-normal text-slate-600 dark:text-slate-400;
+}
+
+.input-group.small {
+  input {
+    @apply text-sm h-8;
+  }
+
+  .error {
+    @apply border-red-400 dark:border-red-400;
+  }
+}
@@ -0,0 +1,66 @@
+.auth-wrap {
+  width: 100%;
+}
+
+// Outside login wrapper
+.login {
+  @include full-height;
+  overflow-y: auto;
+  padding-top: $space-larger * 1.2;
+
+  .login__hero {
+    margin-bottom: $space-larger;
+
+    .hero__logo {
+      width: 180px;
+    }
+
+    .hero__title {
+      font-weight: $font-weight-light;
+      margin-top: $space-larger;
+    }
+
+    .hero__sub {
+      color: $medium-gray;
+      font-size: $font-size-medium;
+    }
+  }
+
+  // Login box
+  .login-box {
+    @include background-white;
+    @include border-normal;
+    @include elegant-card;
+
+    border-radius: $space-smaller;
+    padding: $space-large;
+
+    label {
+      color: $color-gray;
+      font-size: $font-size-default;
+
+      input {
+        font-size: $font-size-default;
+        height: $space-larger;
+        padding: $space-slab;
+      }
+
+      .error {
+        font-size: $font-size-small;
+      }
+    }
+
+    .button {
+      height: $space-larger;
+    }
+  }
+
+  .sigin__footer {
+    font-size: $font-size-default;
+    padding: $space-medium;
+
+    > a {
+      font-weight: $font-weight-bold;
+    }
+  }
+}
@@ -0,0 +1,75 @@
+.modal-mask {
+  // @include flex;
+  // @include flex-align(center, middle);
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark  z-[9990] h-full left-0 fixed top-0 w-full;
+}
+
+.page-top-bar {
+  @apply px-8 pt-9 pb-0;
+
+  img {
+    @apply max-h-[3.75rem];
+  }
+}
+
+.modal-container {
+  @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];
+
+  &.medium {
+    @apply max-w-[80%] w-[56.25rem];
+  }
+
+  .content-box {
+    @apply h-auto p-0;
+  }
+
+  h2 {
+    @apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
+  }
+
+  p {
+    @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
+  }
+
+  .content {
+    @apply p-8;
+  }
+
+  form,
+  .modal-content {
+    @apply pt-4 pb-8 px-8 self-center;
+
+    a {
+      @apply p-4;
+    }
+  }
+
+  .modal-footer {
+    // @include flex;
+    // @include flex-align($x: flex-end, $y: middle);
+    @apply flex justify-end items-center py-2 px-0 gap-2;
+
+    &.justify-content-end {
+      @apply justify-end;
+    }
+  }
+
+  .delete-item {
+    @apply p-8;
+
+    button {
+      @apply m-0;
+    }
+  }
+}
+
+.modal-enter,
+.modal-leave {
+  @apply opacity-0;
+}
+
+.modal-enter .modal-container,
+.modal-leave .modal-container {
+  transform: scale(1.1);
+  // @apply transform scale-110;
+}
@@ -0,0 +1,60 @@
+.reply-box {
+  transition: box-shadow 0.35s $swift-ease-out-function,
+    height 2s $swift-ease-out-function;
+
+  &.is-focused {
+    box-shadow: var(--shadow);
+  }
+
+  .reply-box__top {
+    .icon {
+      color: $medium-gray;
+      cursor: pointer;
+      font-size: $font-size-medium;
+      margin-right: $space-small;
+
+      &.active {
+        color: $color-woot;
+      }
+    }
+
+    .attachment {
+      cursor: pointer;
+      margin-right: $space-one;
+      padding: 0 $space-small;
+    }
+
+    .video-js {
+      background: transparent;
+      // Override min-height : 50px in foundation
+      //
+      max-height: $space-mega * 2.4;
+      min-height: 3rem;
+      padding: var(--space-normal) 0 0;
+      resize: none;
+    }
+
+    > textarea {
+      @include ghost-input();
+      background: transparent;
+      margin: 0;
+      max-height: $space-mega * 2.4;
+      // Override min-height : 50px in foundation
+      min-height: 3rem;
+      padding: var(--space-normal) 0 0;
+      resize: none;
+    }
+  }
+
+  &.is-private {
+    @apply bg-yellow-100 dark:bg-yellow-800;
+
+    .reply-box__top {
+      @apply bg-yellow-100 dark:bg-yellow-800;
+
+      > input {
+        @apply bg-yellow-100 dark:bg-yellow-800;
+      }
+    }
+  }
+}
@@ -0,0 +1,60 @@
+.report-card {
+  @include custom-border-top(3px, transparent);
+
+  cursor: pointer;
+  margin: 0;
+  padding: var(--space-normal);
+
+  &.active {
+    @include custom-border-top(3px, var(--color-woot));
+    @include background-white;
+    .heading,
+    .metric {
+      color: var(--color-woot);
+    }
+  }
+
+  .heading {
+    align-items: center;
+    color: var(--color-heading);
+    display: flex;
+    font-size: var(--font-size-small);
+    font-weight: var(--font-weight-bold);
+    margin: 0;
+  }
+
+  .info-icon {
+    color: var(--b-400);
+    margin-left: var(--space-micro);
+  }
+
+  .metric-wrap {
+    align-items: center;
+    display: flex;
+  }
+
+  .metric {
+    font-size: var(--font-size-big);
+    font-weight: var(--font-weight-feather);
+    margin-top: var(--space-smaller);
+  }
+
+  .metric-trend {
+    font-size: var(--font-size-small);
+    margin: 0 var(--space-small);
+  }
+
+  .metric-up {
+    color: $success-color;
+  }
+
+  .metric-down {
+    color: $alert-color;
+  }
+
+  .desc {
+    font-size: var(--font-size-small);
+    margin: 0;
+    text-transform: capitalize;
+  }
+}
@@ -0,0 +1,29 @@
+.reports-option__rounded--item {
+  border-radius: 100%;
+  height: var(--space-two);
+  width: var(--space-two);
+}
+
+.reports-option__item {
+  flex-shrink: 0;
+  margin-right: var(--space-small);
+}
+
+.reports-option__label--swatch {
+  border: 1px solid var(--color-border);
+}
+
+.reports-option__wrap {
+  align-items: center;
+  display: flex;
+}
+
+.reports-option__title {
+  margin: 0 var(--space-small);
+}
+
+
+.switch {
+  margin-bottom: var(--space-zero);
+  margin-left: var(--space-small);
+}
@@ -0,0 +1,18 @@
+.search {
+  @include flex;
+  @include flex-align($x: left, $y: middle);
+  @include flex-shrink;
+
+  padding: $space-one $space-normal;
+  transition: all 0.3s var(--ease-in-out-quad);
+
+  > .icon {
+    color: $medium-gray;
+    font-size: $font-size-medium;
+  }
+
+  > input {
+    @include ghost-input();
+    margin: 0;
+  }
+}
@@ -0,0 +1,78 @@
+.side-menu {
+  i {
+    margin-right: var(--space-smaller);
+    min-width: var(--space-two);
+  }
+}
+
+.sidebar {
+  z-index: 1024 - 1;
+
+  //logo
+  .logo {
+    img {
+      max-height: 108px;
+      padding: $woot-logo-padding;
+    }
+  }
+
+  .nested {
+    a {
+      font-size: var(--font-size-small);
+      margin-bottom: var(--space-micro);
+      margin-top: var(--space-micro);
+
+      .inbox-icon {
+        display: inline-block;
+        margin-right: var(--space-micro);
+        min-width: var(--space-normal);
+        text-align: center;
+      }
+    }
+  }
+}
+
+// bottom-nav
+.bottom-nav {
+  @include flex;
+  @include space-between-column;
+  @include border-normal-top;
+  flex-direction: column;
+  padding: var(--space-one) var(--space-normal) var(--space-one)
+    var(--space-one);
+  position: relative;
+
+  &:hover {
+    background: var(--color-background-light);
+  }
+
+  .dropdown-pane {
+    bottom: 3.75rem;
+    display: block;
+    visibility: visible;
+    width: fit-content;
+  }
+
+  .active {
+    border-bottom: 2px solid $medium-gray;
+  }
+}
+
+.hamburger--menu {
+  cursor: pointer;
+  display: block;
+  margin-right: var(--space-normal);
+}
+
+.header--icon {
+  display: block;
+  margin: 0 var(--space-small) 0 var(--space-smaller);
+
+  @media screen and (max-width: 1200px) {
+    display: none;
+  }
+}
+
+.header-title {
+  margin: 0 var(--space-small);
+}
@@ -0,0 +1,45 @@
+.ui-snackbar-container {
+  left: 0;
+  margin: 0 auto;
+  max-width: 25rem;
+  overflow: hidden;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: $space-normal;
+  z-index: 9999;
+}
+
+.ui-snackbar {
+  @include shadow;
+  background-color: $woot-snackbar-bg;
+  border-radius: $space-smaller;
+  display: inline-flex;
+  margin-bottom: $space-small;
+  max-width: 25rem;
+  min-height: 1.875rem;
+  min-width: 15rem;
+  padding: $space-slab $space-medium;
+  text-align: left;
+}
+
+.ui-snackbar-text {
+  color: $color-white;
+  font-size: $font-size-small;
+  font-weight: $font-weight-medium;
+}
+
+.ui-snackbar-action {
+  margin-left: auto;
+  padding-left: 1.875rem;
+
+  button {
+    background: none;
+    border: 0;
+    color: $woot-snackbar-button;
+    font-size: $font-size-small;
+    margin: 0;
+    padding: 0;
+    text-transform: uppercase;
+  }
+}
@@ -0,0 +1 @@
+// To be removed
@@ -0,0 +1,46 @@
+.status-bar {
+  @include flex;
+  @include flex-align($x: center, $y: middle);
+  background: lighten($warning-color, 36%);
+  flex-direction: column;
+  margin: 0;
+  padding: $space-normal $space-smaller;
+
+  .message {
+    font-weight: $font-weight-medium;
+    margin-bottom: $zero;
+  }
+
+  .button {
+    margin: $space-smaller $zero $zero;
+    padding: $space-small $space-normal;
+  }
+
+  &.danger {
+    background: lighten($alert-color, 30%);
+
+    .button {
+      // Default and disabled states
+      &,
+      &.disabled,
+      &[disabled],
+      &.disabled:hover,
+      &[disabled]:hover,
+      &.disabled:focus,
+      &[disabled]:focus {
+        background-color: $alert-color;
+        color: $color-white;
+      }
+
+      &:hover,
+      &:focus {
+        background-color: darken($alert-color, 7%);
+        color: $color-white;
+      }
+    }
+  }
+
+  &.warning {
+    background: lighten($warning-color, 36%);
+  }
+}
@@ -7,7 +7,7 @@
 }

 .tabs {
-  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4;
 }

 .tabs--with-scroll {
@@ -31,7 +31,7 @@
 }

 .tabs-title {
-  @apply flex-shrink-0 my-0 mx-2;
+  @apply flex-shrink-0 my-0 mx-2 ;

  .badge {
    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
  }

  a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
    transition: border-color 0.15s $swift-ease-out-function;
  }

@@ -1,9 +1,9 @@
 table {
-  @apply border-spacing-0 text-sm w-full;
+  @apply border-spacing-0 text-sm;

  thead {
    th {
-      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
+      @apply font-semibold tracking-[1px] text-left uppercase text-slate-900 dark:text-slate-200;
    }
  }

@@ -1,7 +1,7 @@
 <template>
  <div class="-mt-px text-sm">
    <button
-      class="flex items-center select-none w-full rounded-none bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
+      class="flex items-center select-none w-full bg-slate-50 dark:bg-slate-800 border border-l-0 border-r-0 border-solid m-0 border-slate-100 dark:border-slate-700/50 cursor-grab justify-between py-2 px-4 drag-handle"
      @click="$emit('click')"
    >
      <div class="flex justify-between mb-0.5">
@@ -1,12 +1,10 @@
 <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="sm:w-[50%] md:w-[34%] lg:w-[25%] channel"
    @click="$emit('click')"
  >
-    <img :src="src" :alt="title" class="w-[50%] my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
+    <img :src="src" :alt="title" />
+    <h3 class="channel__title">
      {{ title }}
    </h3>
  </button>
@@ -33,8 +31,32 @@ export default {
    filter: grayscale(100%);
  }

-  &:hover {
+  &.channel:hover {
    @apply border-transparent shadow-none cursor-not-allowed;
  }
 }
+
+.channel {
+  @apply 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 {
+    @apply border-woot-500 dark:border-woot-500 shadow-md z-50;
+  }
+
+  &.disabled {
+    @apply opacity-60;
+  }
+
+  img {
+    @apply w-[50%] my-4 mx-auto;
+  }
+
+  .channel__title {
+    @apply text-slate-800 dark:text-slate-100 text-base text-center capitalize;
+  }
+
+  p {
+    @apply text-slate-600 dark:text-slate-300 w-full text-sm;
+  }
+}
 </style>
@@ -1,14 +1,14 @@
 <template>
  <div
-    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',
-    ]"
+    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,
+    }"
  >
    <slot />
    <div
-      class="flex items-center justify-between px-4 py-0"
+      class="flex items-center justify-between py-0 px-4"
      :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 font-medium break-words truncate text-black-900 dark:text-slate-100"
+          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
          :title="pageTitle"
        >
          {{ pageTitle }}
@@ -107,7 +107,7 @@

    <p
      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
+      class="overflow-auto p-4 flex justify-center items-center"
    >
      {{ $t('CHAT_LIST.LIST.404') }}
    </p>
@@ -127,7 +127,7 @@
    />
    <div
      ref="conversationList"
-      class="flex-1 conversations-list"
+      class="conversations-list flex-1"
      :class="{ 'overflow-hidden': isContextMenuOpen }"
    >
      <virtual-list
@@ -136,17 +136,14 @@
        :data-sources="conversationList"
        :data-component="itemComponent"
        :extra-props="virtualListExtraProps"
-        class="w-full h-full overflow-auto"
+        class="w-full overflow-auto h-full"
        footer-tag="div"
      >
        <template #footer>
          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
+            <span class="spinner mt-4 mb-4" />
          </div>
-          <p
-            v-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
-          >
+          <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
            {{ $t('CHAT_LIST.EOF') }}
          </p>
          <intersection-observer
@@ -185,7 +182,7 @@ import ConversationBasicFilter from './widgets/conversation/ConversationBasicFil
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
 import timeMixin from '../mixins/time';
-import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
@@ -199,6 +196,11 @@ 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,
@@ -223,7 +225,7 @@ export default {
  mixins: [
    timeMixin,
    conversationMixin,
-    keyboardEventListenerMixins,
+    eventListenerMixins,
    alertMixin,
    filterMixin,
    uiSettingsMixin,
@@ -686,40 +688,30 @@ export default {
        lastConversationIndex,
      };
    },
-    handlePreviousConversation() {
-      const { allConversations, activeConversationIndex } =
-        this.getKeyboardListenerParams();
-      if (activeConversationIndex === -1) {
-        allConversations[0].click();
+    handleKeyEvents(e) {
+      if (hasPressedAltAndJKey(e)) {
+        const { allConversations, activeConversationIndex } =
+          this.getKeyboardListenerParams();
+        if (activeConversationIndex === -1) {
+          allConversations[0].click();
+        }
+        if (activeConversationIndex >= 1) {
+          allConversations[activeConversationIndex - 1].click();
+        }
      }
-      if (activeConversationIndex >= 1) {
-        allConversations[activeConversationIndex - 1].click();
+      if (hasPressedAltAndKKey(e)) {
+        const {
+          allConversations,
+          activeConversationIndex,
+          lastConversationIndex,
+        } = this.getKeyboardListenerParams();
+        if (activeConversationIndex === -1) {
+          allConversations[lastConversationIndex].click();
+        } else if (activeConversationIndex < lastConversationIndex) {
+          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();
@@ -1039,10 +1031,24 @@ 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;

@@ -1,28 +1,24 @@
 <template>
  <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="flex items-center">
+      <h4 class="text-block-title flex items-center m-0 w-full error">
+        <div v-if="isAttributeTypeCheckbox" class="checkbox-wrap">
          <input
            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
+            class="checkbox"
            type="checkbox"
            @change="onUpdate"
          />
        </div>
        <div class="flex items-center justify-between w-full">
          <span
-            class="w-full font-medium text-sm mb-0"
-            :class="
-              $v.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
+            class="attribute-name"
+            :class="{ error: $v.editedValue.$error }"
          >
            {{ label }}
          </span>
          <woot-button
-            v-if="showCopyAndDeleteButton"
+            v-if="showActions"
            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
            variant="link"
            size="medium"
@@ -35,25 +31,20 @@
      </h4>
    </div>
    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="mb-2 w-full flex items-center">
+      <div v-show="isEditing">
+        <div class="input-group small">
          <input
            ref="inputfield"
            v-model="editedValue"
            :type="inputType"
-            class="!h-8 ltr:rounded-r-none rtl:rounded-l-none !mb-0 !text-sm"
+            class="input-group-field"
            autofocus="true"
            :class="{ error: $v.editedValue.$error }"
            @blur="$v.editedValue.$touch"
            @keyup.enter="onUpdate"
          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
+          <div class="input-group-button">
+            <woot-button size="small" icon="checkmark" @click="onUpdate" />
          </div>
        </div>
        <span
@@ -65,7 +56,7 @@
      </div>
      <div
        v-show="!isEditing"
-        class="flex group"
+        class="value--view"
        :class="{ 'is-editable': showActions }"
      >
        <a
@@ -73,35 +64,35 @@
          :href="hrefURL"
          target="_blank"
          rel="noopener noreferrer"
-          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"
+          class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
        >
          {{ urlValue }}
        </a>
        <p
          v-else
-          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"
+          class="value 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="showCopyAndDeleteButton"
+            v-if="showActions"
            v-tooltip="$t('CUSTOM_ATTRIBUTES.ACTIONS.COPY')"
            variant="link"
            size="small"
            color-scheme="secondary"
            icon="clipboard"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            class-names="edit-button"
            @click="onCopy"
          />
          <woot-button
-            v-if="showEditButton"
+            v-if="showActions"
            v-tooltip.right="$t('CUSTOM_ATTRIBUTES.ACTIONS.EDIT')"
            variant="link"
            size="small"
            color-scheme="secondary"
            icon="edit"
-            class-names="hidden group-hover:flex !w-6 flex-shrink-0"
+            class-names="edit-button"
            @click="onEdit"
          />
        </div>
@@ -130,7 +121,6 @@
 </template>

 <script>
-import { mixin as clickaway } from 'vue-clickaway';
 import { format, parseISO } from 'date-fns';
 import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
@@ -143,7 +133,7 @@ export default {
  components: {
    MultiselectDropdown,
  },
-  mixins: [customAttributeMixin, clickaway],
+  mixins: [customAttributeMixin],
  props: {
    label: { type: String, required: true },
    values: { type: Array, default: () => [] },
@@ -165,18 +155,11 @@ export default {
      editedValue: null,
    };
  },
+
  computed: {
-    showCopyAndDeleteButton() {
-      return this.value && this.showActions;
-    },
-    showEditButton() {
-      return !this.value && this.showActions;
-    },
    displayValue() {
      if (this.isAttributeTypeDate) {
-        return this.value
-          ? new Date(this.value || new Date()).toLocaleDateString()
-          : '';
+        return new Date(this.value || new Date()).toLocaleDateString();
      }
      if (this.isAttributeTypeCheckbox) {
        return this.value === 'false' ? false : this.value;
@@ -242,10 +225,6 @@ 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() {
@@ -284,10 +263,6 @@ export default {
        this.$refs.inputfield.focus();
      }
    },
-    onClickAway() {
-      this.$v.$reset();
-      this.isEditing = false;
-    },
    onEdit() {
      this.isEditing = true;
      this.$nextTick(() => {
@@ -314,7 +289,6 @@ export default {
    },
    onDelete() {
      this.isEditing = false;
-      this.$v.$reset();
      this.$emit('delete', this.attributeKey);
    },
    onCopy() {
@@ -325,6 +299,36 @@ export default {
 </script>

 <style lang="scss" scoped>
+.checkbox-wrap {
+  @apply flex items-center;
+}
+.checkbox {
+  @apply my-0 mr-2 ml-0;
+}
+.attribute-name {
+  @apply w-full text-slate-800 dark:text-slate-100;
+  &.error {
+    @apply text-red-400 dark:text-red-500;
+  }
+}
+
+.edit-button {
+  @apply hidden;
+}
+
+.value--view {
+  @apply flex;
+
+  &.is-editable:hover {
+    .value {
+      @apply bg-slate-50 dark:bg-slate-700 mb-0;
+    }
+    .edit-button {
+      @apply block;
+    }
+  }
+}
+
 ::v-deep {
  .selector-wrap {
    @apply m-0 top-1;
@@ -7,13 +7,7 @@
      @mousedown="handleMouseDown"
    >
      <div
-        :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,
-        }"
+        :class="modalContainerClassName"
        @mouse.stop
        @mousedown="event => event.stopPropagation()"
      >
@@ -22,7 +16,7 @@
          color-scheme="secondary"
          icon="dismiss"
          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          class="absolute ltr:right-2 rtl:left-2 top-2 z-10"
          @click="close"
        />
        <slot />
@@ -66,6 +60,15 @@ export default {
    };
  },
  computed: {
+    modalContainerClassName() {
+      let className =
+        'modal-container bg-white dark:bg-slate-800 skip-context-menu';
+      if (this.fullWidth) {
+        return `${className} modal-container--full-width`;
+      }
+
+      return `${className} ${this.size}`;
+    },
    modalClassName() {
      const modalClassNameMap = {
        centered: '',
@@ -106,43 +109,26 @@ export default {
 };
 </script>

-<style lang="scss">
-.modal-mask {
-  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
+<style scoped lang="scss">
+.modal-container--full-width {
+  align-items: center;
+  border-radius: 0;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.modal-mask.right-aligned {
+  justify-content: flex-end;
+
  .modal-container {
-    &.medium {
-      @apply max-w-[80%] w-[56.25rem];
-    }
-    // .content-box {
-    //   @apply h-auto p-0;
-    // }
-    .content {
-      @apply p-8;
-    }
-    form,
-    .modal-content {
-      @apply pt-4 pb-8 px-8 self-center;
-      a {
-        @apply p-4;
-      }
-    }
+    border-radius: 0;
+    height: 100%;
+    width: 30rem;
  }
 }
 .modal-big {
-  @apply w-full;
-}
-.modal-mask.right-aligned {
-  @apply justify-end;
-  .modal-container {
-    @apply rounded-none h-full w-[30rem];
-  }
-}
-.modal-enter,
-.modal-leave {
-  @apply opacity-0;
-}
-.modal-enter .modal-container,
-.modal-leave .modal-container {
-  transform: scale(1.1);
+  width: 60%;
 }
 </style>
@@ -1,21 +1,21 @@
 <template>
-  <div class="flex flex-col items-start px-8 pt-8 pb-0">
+  <div class="flex flex-col items-start pt-8 px-8 pb-0">
    <img v-if="headerImage" :src="headerImage" alt="No image" />
    <h2
      ref="modalHeaderTitle"
-      class="text-base font-semibold leading-6 text-slate-800 dark:text-slate-50"
+      class="text-slate-800 text-lg dark:text-slate-100"
    >
      {{ headerTitle }}
    </h2>
    <p
      v-if="headerContent"
      ref="modalHeaderContent"
-      class="w-full mt-2 text-sm leading-5 break-words text-slate-600 dark:text-slate-300"
+      class="w-full break-words text-slate-600 mt-2 text-sm dark:text-slate-300"
    >
      {{ headerContent }}
      <span
        v-if="headerContentValue"
-        class="text-sm font-semibold text-slate-600 dark:text-slate-300"
+        class="font-semibold text-sm text-slate-600 dark:text-slate-300"
      >
        {{ headerContentValue }}
      </span>
@@ -1,21 +1,19 @@
 <template>
  <div
-    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
+    class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
    :class="{
-      'border-b border-solid border-slate-50 dark:border-slate-700/30':
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30':
        showBorder,
    }"
  >
-    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
+    <div class="w-[30%] min-w-0 max-w-[30%] pr-12">
      <p
        v-if="title"
        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
      >
        {{ title }}
      </p>
-      <p
-        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
-      >
+      <p class="text-sm mb-2">
        <slot v-if="subTitle" name="subTitle">
          {{ subTitle }}
        </slot>
@@ -25,7 +23,7 @@
        {{ note }}
      </p>
    </div>
-    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
+    <div class="w-[50%] min-w-0 max-w-[50%]">
      <slot />
    </div>
  </div>
@@ -1,17 +1,11 @@
 <template>
  <div>
-    <div
-      class="shadow-sm bg-slate-800 dark:bg-slate-700 rounded-[4px] items-center gap-3 inline-flex mb-2 max-w-[25rem] min-h-[1.875rem] min-w-[15rem] px-6 py-3 text-left"
-    >
-      <div class="text-white dark:text-white text-sm font-medium">
+    <div class="ui-snackbar">
+      <div class="ui-snackbar-text">
        {{ message }}
      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="text-woot-500 dark:text-woot-500 cursor-pointer font-medium hover:text-woot-600 dark:hover:text-woot-600 select-none"
-        >
+      <div v-if="action" class="ui-snackbar-action">
+        <router-link v-if="action.type == 'link'" :to="action.to">
          {{ action.message }}
        </router-link>
      </div>
@@ -1,9 +1,5 @@
 <template>
-  <transition-group
-    name="toast-fade"
-    tag="div"
-    class="left-0 my-0 mx-auto max-w-[25rem] overflow-hidden absolute right-0 text-center top-4 z-[9999]"
-  >
+  <transition-group name="toast-fade" tag="div" class="ui-snackbar-container">
    <woot-snackbar
      v-for="snackMessage in snackMessages"
      :key="snackMessage.key"
@@ -48,7 +48,7 @@
      v-on-clickaway="closeDropdown"
      class="dropdown-pane dropdown-pane--open"
    >
-      <woot-dropdown-menu class="mb-0">
+      <woot-dropdown-menu>
        <woot-dropdown-item v-if="!isPending">
          <woot-button
            variant="clear"
@@ -91,7 +91,12 @@ 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 keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import eventListenerMixins from 'shared/mixins/eventListenerMixins';
+import {
+  hasPressedAltAndEKey,
+  hasPressedCommandPlusAltAndEKey,
+  hasPressedAltAndMKey,
+} from 'shared/helpers/KeyboardHelpers';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
@@ -109,7 +114,7 @@ export default {
    WootDropdownMenu,
    CustomSnoozeModal,
  },
-  mixins: [clickaway, alertMixin, keyboardEventListenerMixins],
+  mixins: [clickaway, alertMixin, eventListenerMixins],
  props: { conversationId: { type: [String, Number], required: true } },
  data() {
    return {
@@ -154,52 +159,37 @@ export default {
    bus.$off(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
  },
  methods: {
-    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() {
+    async handleKeyEvents(e) {
      const allConversations = document.querySelectorAll(
        '.conversations-list .conversation'
      );
-
-      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
+      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();
+        }
      }
    },
    onCmdSnoozeConversation(snoozeType) {
@@ -18,6 +18,7 @@ import Label from './ui/Label';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
+import ReportStatsCard from './widgets/ReportStatsCard';
 import SidemenuIcon from './SidemenuIcon';
 import Spinner from 'shared/components/Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
@@ -45,6 +46,7 @@ const WootUIKit = {
  LoadingState,
  Modal,
  ModalHeader,
+  ReportStatsCard,
  SidemenuIcon,
  Spinner,
  SubmitButton,
@@ -1,5 +1,5 @@
 <template>
-  <aside class="flex h-full">
+  <aside class="h-full flex">
    <primary-sidebar
      :logo-source="globalConfig.logoThumbnail"
      :installation-name="globalConfig.installationName"
@@ -36,7 +36,15 @@ import alertMixin from 'shared/mixins/alertMixin';

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

 export default {
@@ -44,7 +52,7 @@ export default {
    PrimarySidebar,
    SecondarySidebar,
  },
-  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
+  mixins: [adminMixin, alertMixin, eventListenerMixins],
  props: {
    showSecondarySidebar: {
      type: Boolean,
@@ -165,27 +173,30 @@ export default {
    closeKeyShortcutModal() {
      this.$emit('close-key-shortcut-modal');
    },
-    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 });
+    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' });
+        }
      }
    },
    isCurrentRouteSameAsNavigation(routeName) {
@@ -2,7 +2,7 @@ import { frontendURL } from '../../../../helper/URLHelper';

 const campaigns = accountId => ({
  parentNav: 'campaigns',
-  routes: ['ongoing_campaigns', 'one_off'],
+  routes: ['settings_account_campaigns', 'one_off'],
  menuItems: [
    {
      icon: 'arrow-swap',
@@ -10,7 +10,7 @@ const campaigns = accountId => ({
      key: 'ongoingCampaigns',
      hasSubMenu: false,
      toState: frontendURL(`accounts/${accountId}/campaigns/ongoing`),
-      toStateName: 'ongoing_campaigns',
+      toStateName: 'settings_account_campaigns',
    },
    {
      key: 'oneOffCampaigns',
@@ -2,15 +2,6 @@ import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';

 const primaryMenuItems = accountId => [
-  {
-    icon: 'mail-inbox',
-    key: 'inboxView',
-    label: 'INBOX_VIEW',
-    featureFlag: FEATURE_FLAGS.INBOX_VIEW,
-    toState: frontendURL(`accounts/${accountId}/inbox-view`),
-    toStateName: 'inbox_view',
-    roles: ['administrator', 'agent'],
-  },
  {
    icon: 'chat',
    key: 'conversations',
@@ -43,7 +34,7 @@ const primaryMenuItems = accountId => [
    label: 'CAMPAIGNS',
    featureFlag: FEATURE_FLAGS.CAMPAIGNS,
    toState: frontendURL(`accounts/${accountId}/campaigns`),
-    toStateName: 'ongoing_campaigns',
+    toStateName: 'settings_account_campaigns',
    roles: ['administrator'],
  },
  {
@@ -1,4 +1,3 @@
-import { FEATURE_FLAGS } from '../../../../featureFlags';
 import { frontendURL } from '../../../../helper/URLHelper';

 const reports = accountId => ({
@@ -7,12 +6,10 @@ const reports = accountId => ({
    'account_overview_reports',
    'conversation_reports',
    'csat_reports',
-    'bot_reports',
    'agent_reports',
    'label_reports',
    'inbox_reports',
    'team_reports',
-    'sla_reports',
  ],
  menuItems: [
    {
@@ -36,14 +33,6 @@ 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',
@@ -72,14 +61,6 @@ const reports = accountId => ({
      toState: frontendURL(`accounts/${accountId}/reports/teams`),
      toStateName: 'team_reports',
    },
-    {
-      icon: 'document-list-clock',
-      label: 'REPORTS_SLA',
-      hasSubMenu: false,
-      featureFlag: FEATURE_FLAGS.SLA,
-      toState: frontendURL(`accounts/${accountId}/reports/sla`),
-      toStateName: 'sla_reports',
-    },
  ],
 });

@@ -142,26 +142,6 @@ 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',
@@ -170,6 +150,24 @@ 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,
+    },
  ],
 });

@@ -45,7 +45,7 @@

    <div
      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex justify-end items-center p-8 gap-2"
+      class="modal-footer delete-item"
    >
      <button
        class="button success large expanded nice"
@@ -2,7 +2,7 @@
  <woot-button
    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
    variant="link"
-    class="items-center flex rounded-full"
+    class="current-user"
    @click="handleClick"
  >
    <thumbnail
@@ -38,3 +38,12 @@ export default {
  },
 };
 </script>
+
+<style scoped lang="scss">
+.current-user {
+  align-items: center;
+  display: flex;
+  border-radius: 50%;
+  border: 2px solid var(--white);
+}
+</style>
@@ -1,7 +1,7 @@
 <template>
  <div class="mb-4">
    <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 p-0 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
      :class="{
        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
          isNotificationPanelActive,
@@ -16,7 +16,7 @@
      />
      <span
        v-if="unreadCount"
-        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 text-xxs min-w-[1rem] rounded-full"
+        class="text-black-900 bg-yellow-300 absolute -top-0.5 -right-1 p-1 text-xxs min-w-[1rem] rounded-full"
      >
        {{ unreadCount }}
      </span>
@@ -53,7 +53,7 @@
          </span>
          <span
            v-if="showChildCount"
-            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs font-medium mx-1 py-0 px-1"
+            class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
            :class="
              isCountZero
                ? `text-slate-300 dark:text-slate-500`
@@ -2,7 +2,7 @@
  <li v-show="isMenuItemVisible" class="mt-1">
    <div v-if="hasSubMenu" class="flex justify-between">
      <span
-        class="px-2 pt-1 my-2 text-sm font-semibold text-slate-700 dark:text-slate-200"
+        class="text-sm text-slate-700 dark:text-slate-200 font-semibold my-2 px-2 pt-1"
      >
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
@@ -19,7 +19,7 @@
    </div>
    <router-link
      v-else
-      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="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="computedClass"
      :to="menuItem && menuItem.toState"
    >
@@ -31,7 +31,7 @@
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
      <span
        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        class="rounded-md text-xxs font-medium mx-1 py-0 px-1"
        :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="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+        class="px-1 mx-1 inline-block font-medium leading-4 border border-green-400 text-green-500 rounded-lg text-xxs"
      >
        {{ $t('SIDEBAR.BETA') }}
      </span>
    </router-link>

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

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

 export default {
  components: { SecondaryChildNavItem },
-  mixins: [adminMixin, configMixin],
+  mixins: [adminMixin],
  props: {
    menuItem: {
      type: Object,
@@ -133,33 +132,15 @@ 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 isFeatureEnabled;
+      return true;
    },
    isAllConversations() {
      return (
@@ -1,25 +1,18 @@
 <template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :class="labelClass"
-    :style="labelStyle"
-    :title="description"
-  >
+  <div :class="labelClass" :style="labelStyle" :title="description">
    <span v-if="icon" class="label-action--button">
      <fluent-icon :icon="icon" size="12" class="label--icon cursor-pointer" />
    </span>
    <span
      v-if="['smooth', 'dashed'].includes(variant) && title && !icon"
      :style="{ background: color }"
-      class="label-color-dot flex-shrink-0"
+      class="label-color-dot"
    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
+    <span v-if="!href">{{ title }}</span>
    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
    <button
      v-if="showClose"
-      class="label-close--button p-0"
+      class="label-close--button"
      :style="{ color: textColor }"
      @click="onClick"
    >
@@ -111,7 +104,7 @@ export default {

 <style scoped lang="scss">
 .label {
-  @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;
+  @apply inline-flex items-center font-medium gap-1 mr-1 rtl:ml-1 rtl:mr-0 mb-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;
@@ -1,18 +1,6 @@
 <template>
-  <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
-    :class="{
-      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
-        active,
-    }"
-  >
-    <div
-      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
-      :class="{
-        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
-          active,
-      }"
-    >
+  <div class="preview-card--wrap" :class="{ 'active-card': active }">
+    <div class="header--wrap" :class="{ active: active }">
      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
      <fluent-icon
        v-if="active"
@@ -68,3 +56,21 @@ export default {
  },
 };
 </script>
+
+<style lang="scss" scoped>
+.preview-card--wrap {
+  @apply flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600;
+
+  .header--wrap {
+    @apply flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600;
+  }
+
+  .active {
+    @apply bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700;
+  }
+}
+
+.active-card {
+  @apply bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400;
+}
+</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Chatwoot BotandShivam Mishra	4bfc2da19a	chore: Update translations (#8983 )	2024-02-22 12:18:55 +05:30
Vishnu Narayanan Shivam Mishra Sivin Varghese	6a1eb799a4	feat(ee): Add support for SLA in automation rules (#8910 ) Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>	2024-02-22 12:18:55 +05:30
Sojan Jose Shivam Mishra Pranav	2ad9cd2055	feat: Ability to block contacts permanently (#8922 ) Co-authored-by: Pranav <pranav@chatwoot.com>	2024-02-22 12:18:54 +05:30