fix: attachment initalization issues

Merge branch 'develop' into deploy-apr-15
2024-12-24 11:26:38 +05:30 · 2024-07-10 20:29:13 -07:00 · 2024-07-10 20:28:53 -07:00 · 2024-07-08 19:47:10 -07:00 · 2024-05-23 11:18:19 -07:00 · 2024-05-22 21:01:26 -07:00
2083 changed files with 39002 additions and 56319 deletions
@@ -257,4 +257,3 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
-
@@ -27,160 +27,6 @@ module.exports = {
    'import/no-unresolved': 'off',
    'vue/html-indent': 'off',
    'vue/multi-word-component-names': 'off',
-    'vue/next-tick-style': ['error', 'callback'],
-    'vue/block-order': [
-      'error',
-      {
-        order: ['script', 'template', 'style'],
-      },
-    ],
-    'vue/component-name-in-template-casing': [
-      'error',
-      'PascalCase',
-      {
-        registeredComponentsOnly: true,
-      },
-    ],
-    'vue/component-options-name-casing': ['error', 'PascalCase'],
-    'vue/custom-event-name-casing': ['error', 'camelCase'],
-    'vue/define-emits-declaration': ['error'],
-    'vue/define-macros-order': [
-      'error',
-      {
-        order: ['defineProps', 'defineEmits'],
-        defineExposeLast: false,
-      },
-    ],
-    'vue/define-props-declaration': ['error', 'runtime'],
-    'vue/match-component-import-name': ['error'],
-    'vue/no-bare-strings-in-template': [
-      'error',
-      {
-        allowlist: [
-          '(',
-          ')',
-          ',',
-          '.',
-          '&',
-          '+',
-          '-',
-          '=',
-          '*',
-          '/',
-          '#',
-          '%',
-          '!',
-          '?',
-          ':',
-          '[',
-          ']',
-          '{',
-          '}',
-          '<',
-          '>',
-          '⌘',
-          '📄',
-          '🎉',
-          '💬',
-          '👥',
-          '📥',
-          '🔖',
-          '❌',
-          '✅',
-          '\u00b7',
-          '\u2022',
-          '\u2010',
-          '\u2013',
-          '\u2014',
-          '\u2212',
-          '|',
-        ],
-        attributes: {
-          '/.+/': [
-            'title',
-            'aria-label',
-            'aria-placeholder',
-            'aria-roledescription',
-            'aria-valuetext',
-          ],
-          input: ['placeholder'],
-        },
-        directives: ['v-text'],
-      },
-    ],
-    'vue/no-empty-component-block': 'error',
-    'vue/no-multiple-objects-in-class': 'error',
-    'vue/no-root-v-if': 'warn',
-    'vue/no-static-inline-styles': [
-      'error',
-      {
-        allowBinding: false,
-      },
-    ],
-    'vue/no-template-target-blank': [
-      'error',
-      {
-        allowReferrer: false,
-        enforceDynamicLinks: 'always',
-      },
-    ],
-    'vue/no-required-prop-with-default': [
-      'error',
-      {
-        autofix: false,
-      },
-    ],
-    'vue/no-this-in-before-route-enter': 'error',
-    'vue/no-undef-components': [
-      'error',
-      {
-        ignorePatterns: [
-          '^woot-',
-          '^fluent-',
-          '^multiselect',
-          '^router-link',
-          '^router-view',
-          '^ninja-keys',
-          '^FormulateForm',
-          '^FormulateInput',
-          '^highlightjs',
-        ],
-      },
-    ],
-    'vue/no-unused-emit-declarations': 'error',
-    'vue/no-unused-refs': 'error',
-    'vue/no-use-v-else-with-v-for': 'error',
-    'vue/prefer-true-attribute-shorthand': 'error',
-    'vue/no-useless-v-bind': [
-      'error',
-      {
-        ignoreIncludesComment: false,
-        ignoreStringEscape: false,
-      },
-    ],
-    'vue/no-v-text': 'error',
-    'vue/padding-line-between-blocks': ['error', 'always'],
-    'vue/prefer-separate-static-class': 'error',
-    'vue/require-explicit-slots': 'error',
-    'vue/require-macro-variable-name': [
-      'error',
-      {
-        defineProps: 'props',
-        defineEmits: 'emit',
-        defineSlots: 'slots',
-        useSlots: 'slots',
-        useAttrs: 'attrs',
-      },
-    ],
-    'vue/no-unused-properties': [
-      'error',
-      {
-        groups: ['props'],
-        deepData: false,
-        ignorePublicMembers: false,
-        unreferencedOptions: [],
-      },
-    ],
    'vue/max-attributes-per-line': [
      'error',
      {
@@ -25,5 +25,13 @@ jobs:
        with: 
          issue-inactive-days: '30'
          issue-lock-reason: 'resolved'
+          issue-comment: >
+            This issue has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
          pr-inactive-days: '30'
          pr-lock-reason: 'resolved'
+          pr-comment: >
+            This pull request has been automatically locked since there
+            has not been any recent activity after it was closed.
+            Please open a new issue for related bugs.
@@ -2,6 +2,7 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
+import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -13,6 +14,7 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';

 Vue.use(VueI18n);
+Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -30,7 +32,7 @@ addDecorator(() => ({
  template: '<story/>',
  i18n: i18nConfig,
  store,
-  beforeCreate: function () {
+  beforeCreate: function() {
    this.$root._i18n = this.$i18n;
  },
 }));
@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
+gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3', '>= 0.7.0'
+gem 'google-cloud-translate-v3'

 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -111,12 +111,12 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.19.0', require: false
+gem 'sentry-rails', '>= 5.18.1', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.19.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.1', require: false

 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.1'
+gem 'sidekiq', '>= 7.3.0'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'

@@ -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.3'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'

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

 group :test do
@@ -228,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.4'
+  gem 'rspec-rails', '>= 6.1.3'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -103,8 +103,8 @@ GEM
      tzinfo (~> 2.0)
    acts-as-taggable-on (9.0.1)
      activerecord (>= 6.0, < 7.1)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+    addressable (2.8.4)
+      public_suffix (>= 2.0.2, < 6.0)
    administrate (0.20.1)
      actionpack (>= 6.0, < 8.0)
      actionview (>= 6.0, < 8.0)
@@ -148,7 +148,7 @@ GEM
    barnes (0.0.9)
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
    bcrypt (3.1.20)
    bigdecimal (3.1.8)
    bindex (0.8.1)
@@ -169,10 +169,9 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.3.3)
    connection_pool (2.4.1)
-    crack (1.0.0)
-      bigdecimal
+    crack (0.4.5)
      rexml
    crass (1.0.6)
    csv (3.3.0)
@@ -230,7 +229,7 @@ GEM
      ruby2_keywords
    email_reply_trimmer (0.1.13)
    erubi (1.13.0)
-    et-orbi (1.2.11)
+    et-orbi (1.2.7)
      tzinfo
    execjs (2.8.1)
    facebook-messenger (2.0.1)
@@ -243,8 +242,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)
@@ -252,12 +252,11 @@ 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)
-    faraday-retry (2.2.1)
+    faraday-retry (2.1.0)
      faraday (~> 2.0)
    fcm (1.0.8)
      faraday (>= 1.0.0, < 3.0)
@@ -268,10 +267,10 @@ GEM
      rake
    flag_shih_tzu (0.3.23)
    foreman (0.87.2)
-    fugit (1.11.1)
-      et-orbi (~> 1, >= 1.2.11)
+    fugit (1.9.0)
+      et-orbi (~> 1, >= 1.2.7)
      raabro (~> 1.4)
-    gapic-common (0.20.0)
+    gapic-common (0.18.0)
      faraday (>= 1.9, < 3.a)
      faraday-retry (>= 1.0, < 3.a)
      google-protobuf (~> 3.14)
@@ -301,15 +300,15 @@ GEM
    google-cloud-core (1.6.0)
      google-cloud-env (~> 1.0)
      google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.31.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-dialogflow-v2 (0.23.0)
+      gapic-common (>= 0.18.0, < 2.a)
      google-cloud-errors (~> 1.0)
      google-cloud-location (>= 0.4, < 2.a)
    google-cloud-env (1.6.0)
      faraday (>= 0.17.3, < 3.0)
    google-cloud-errors (1.3.1)
-    google-cloud-location (0.6.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    google-cloud-location (0.4.0)
+      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
    google-cloud-storage (1.44.0)
      addressable (~> 2.8)
@@ -319,17 +318,14 @@ GEM
      google-cloud-core (~> 1.6)
      googleauth (>= 0.16.2, < 2.a)
      mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.10.0)
-      gapic-common (>= 0.20.0, < 2.a)
+    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)
-    googleapis-common-protos (1.6.0)
-      google-protobuf (>= 3.18, < 5.a)
-      googleapis-common-protos-types (~> 1.7)
-      grpc (~> 1.41)
+    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)
      google-protobuf (~> 3.18)
    googleauth (1.5.2)
@@ -341,16 +337,7 @@ GEM
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.62.0)
-      google-protobuf (~> 3.25)
-      googleapis-common-protos-types (~> 1.0)
-    grpc (1.62.0-arm64-darwin)
-      google-protobuf (~> 3.25)
-      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)
+    grpc (1.63.0-arm64-darwin)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
@@ -359,7 +346,7 @@ GEM
      ruby2ruby (~> 2.4)
      ruby_parser (~> 3.10)
    hana (1.3.7)
-    hashdiff (1.1.0)
+    hashdiff (1.0.1)
    hashie (5.0.0)
    http (5.1.1)
      addressable (~> 2.8)
@@ -374,7 +361,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.5)
+    i18n (1.14.1)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@@ -398,8 +385,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)
@@ -423,15 +409,8 @@ GEM
    letter_opener (1.8.1)
      launchy (>= 2.2, < 3)
    libdatadog (7.0.0.1.0)
-    libdatadog (7.0.0.1.0-x86_64-linux)
-    libddwaf (1.14.0.0.0)
-      ffi (~> 1.0)
    libddwaf (1.14.0.0.0-arm64-darwin)
      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.14.0.0.0-x86_64-linux)
-      ffi (~> 1.0)
    line-bot-api (1.28.0)
    liquid (5.4.0)
    listen (3.8.0)
@@ -457,17 +436,16 @@ GEM
    marcel (1.0.4)
    maxminddb (0.1.22)
    memoist (0.16.2)
-    meta_request (0.8.3)
+    meta_request (0.8.2)
      rack-contrib (>= 1.1, < 3)
      railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    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.7)
-    minitest (5.25.1)
+    minitest (5.24.1)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
@@ -476,11 +454,9 @@ 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.14)
+    net-imap (0.4.12)
      date
      net-protocol
    net-pop (0.1.2)
@@ -496,15 +472,8 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.6)
-      mini_portile2 (~> 2.8.2)
-      racc (~> 1.4)
    nokogiri (1.16.6-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-linux)
-      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
      snaky_hash (~> 2.0)
@@ -522,7 +491,7 @@ GEM
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
-    omniauth-google-oauth2 (1.1.3)
+    omniauth-google-oauth2 (1.1.2)
      jwt (>= 2.0)
      oauth2 (~> 2.0)
      omniauth (~> 2.0)
@@ -551,7 +520,7 @@ GEM
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (5.0.1)
    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.0)
@@ -567,8 +536,7 @@ GEM
      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
@@ -604,7 +572,7 @@ GEM
      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)
@@ -634,7 +602,7 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.6)
+    rexml (3.3.1)
      strscan
    rspec-core (3.13.0)
      rspec-support (~> 3.13.0)
@@ -644,7 +612,7 @@ GEM
    rspec-mocks (3.13.1)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.13.0)
-    rspec-rails (6.1.4)
+    rspec-rails (6.1.3)
      actionpack (>= 6.1)
      activesupport (>= 6.1)
      railties (>= 6.1)
@@ -710,19 +678,19 @@ GEM
      activesupport (>= 4)
    selectize-rails (0.12.6)
    semantic_range (3.0.0)
-    sentry-rails (5.19.0)
+    sentry-rails (5.18.1)
      railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
-    sentry-ruby (5.19.0)
+      sentry-ruby (~> 5.18.1)
+    sentry-ruby (5.18.1)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.19.0)
-      sentry-ruby (~> 5.19.0)
+    sentry-sidekiq (5.18.1)
+      sentry-ruby (~> 5.18.1)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.3.1)
+    sidekiq (7.3.0)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      logger
@@ -769,7 +737,7 @@ GEM
    strscan (3.1.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
@@ -794,12 +762,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 (5.2.6)
+    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)
@@ -810,7 +777,7 @@ GEM
    web-push (3.0.1)
      jwt (~> 2.0)
      openssl (~> 3.0)
-    webmock (3.23.1)
+    webmock (3.18.1)
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
@@ -830,15 +797,7 @@ GEM
    zeitwerk (2.6.16)

 PLATFORMS
-  arm64-darwin-20
-  arm64-darwin-21
-  arm64-darwin-22
-  ruby
-  x86_64-darwin-18
-  x86_64-darwin-20
-  x86_64-darwin-21
-  x86_64-darwin-22
-  x86_64-linux
+  arm64-darwin-23

 DEPENDENCIES
  active_record_query_trace
@@ -881,9 +840,9 @@ DEPENDENCIES
  foreman
  geocoder
  gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
  groupdate
  grpc
  haikunator
@@ -903,14 +862,14 @@ DEPENDENCIES
  listen
  lograge (~> 0.14.0)
  maxminddb
-  meta_request (>= 0.8.3)
+  meta_request (>= 0.8.0)
  mock_redis
  neighbor
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
  omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.3)
+  omniauth-google-oauth2 (>= 1.1.2)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
  pg
@@ -930,7 +889,7 @@ DEPENDENCIES
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails (>= 6.1.4)
+  rspec-rails (>= 6.1.3)
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -939,11 +898,11 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.19.0)
+  sentry-rails (>= 5.18.1)
  sentry-ruby
-  sentry-sidekiq (>= 5.19.0)
+  sentry-sidekiq (>= 5.18.1)
  shoulda-matchers
-  sidekiq (>= 7.3.1)
+  sidekiq (>= 7.3.0)
  sidekiq-cron (>= 1.12.0)
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.2.0)
@@ -971,4 +930,4 @@ RUBY VERSION
   ruby 3.3.3p89

 BUNDLED WITH
-   2.5.16
+   2.5.14
@@ -32,13 +32,11 @@ class AccountBuilder
  end

  def validate_email
-    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
-
    address = ValidEmail2::Address.new(@email)
-    if address.valid? && !address.disposable?
+    if address.valid? # && !address.disposable?
      true
    else
-      raise InvalidEmail.new({ valid: address.valid?, disposable: address.disposable? })
+      raise InvalidEmail.new(valid: address.valid?)
    end
  end

@@ -81,21 +79,4 @@ class AccountBuilder
    @user.confirm if @confirmed
    @user.save!
  end
-
-  def domain_blocked?
-    domain = @email.split('@').last
-
-    blocked_domains.each do |blocked_domain|
-      return true if domain.match?(blocked_domain)
-    end
-
-    false
-  end
-
-  def blocked_domains
-    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
-    return [] if domains.blank?
-
-    domains.split("\n").map(&:strip)
-  end
 end
@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
    file_type = attachment['type'].to_sym
    params = { file_type: file_type, account_id: @message.account_id }

-    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
      params.merge!(file_type_params(attachment))
    elsif file_type == :location
      params.merge!(location_params(attachment))
@@ -0,0 +1,30 @@
+class V2::BaseConversationReportBuilder
+  pattr_initialize :account, :params
+
+  private
+
+  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
+  COUNT_METRICS = %w[
+    conversations_count
+    incoming_messages_count
+    outgoing_messages_count
+    resolutions_count
+    bot_resolutions_count
+    bot_handoffs_count
+  ].freeze
+
+  def builder_class(metric)
+    case metric
+    when *AVG_METRICS
+      V2::Reports::Timeseries::AverageReportBuilder
+    when *COUNT_METRICS
+      V2::Reports::Timeseries::CountReportBuilder
+    end
+  end
+
+  def log_invalid_metric
+    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
+
+    {}
+  end
+end
@@ -0,0 +1,30 @@
+class V2::ConversationMetricBuilder < V2::BaseConversationReportBuilder
+  def summary
+    {
+      conversations_count: count('conversations_count'),
+      incoming_messages_count: count('incoming_messages_count'),
+      outgoing_messages_count: count('outgoing_messages_count'),
+      avg_first_response_time: count('avg_first_response_time'),
+      avg_resolution_time: count('avg_resolution_time'),
+      resolutions_count: count('resolutions_count'),
+      reply_time: count('reply_time')
+    }
+  end
+
+  def bot_summary
+    {
+      bot_resolutions_count: count('bot_resolutions_count'),
+      bot_handoffs_count: count('bot_handoffs_count')
+    }
+  end
+
+  private
+
+  def count(metric)
+    builder_class(metric).new(account, builder_params(metric)).aggregate_value
+  end
+
+  def builder_params(metric)
+    params.merge({ metric: metric })
+  end
+end
@@ -0,0 +1,25 @@
+class V2::ConversationReportBuilder < V2::BaseConversationReportBuilder
+  include DateRangeHelper
+
+  pattr_initialize :account, :params
+
+  def timeseries
+    perform_action(:timeseries)
+  end
+
+  def aggregate_value
+    perform_action(:aggregate_value)
+  end
+
+  private
+
+  def perform_action(method_name)
+    return builder.new(account, params).public_send(method_name) if builder.present?
+
+    log_invalid_metric
+  end
+
+  def builder
+    builder_class(params[:metric])
+  end
+end
@@ -3,6 +3,7 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def build
    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
  def group_by_key
    :user_id
  end
@@ -37,12 +47,14 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def prepare_report
    account.account_users.each_with_object([]) do |account_user, arr|
+      user_id = account_user.user_id
      arr << {
-        id: account_user.user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        id: user_id,
+        conversations_count: @grouped_conversations_count[user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[user_id],
+        avg_reply_time: @grouped_avg_reply_time[user_id]
      }
    end
  end
@@ -0,0 +1,65 @@
+class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
+  pattr_initialize [:account!, :params!]
+
+  def build
+    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
+  private
+
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('inbox_id').count
+  end
+
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
+  end
+
+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
+  def group_by_key
+    :inbox_id
+  end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.inboxes.each_with_object([]) do |inbox, arr|
+      inbox_id = inbox.id
+      arr << {
+        id: inbox_id,
+        conversations_count: @grouped_conversations_count[inbox_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[inbox_id],
+        avg_resolution_time: @grouped_avg_resolution_time[inbox_id],
+        avg_first_response_time: @grouped_avg_first_response_time[inbox_id],
+        avg_reply_time: @grouped_avg_reply_time[inbox_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
+end
@@ -3,6 +3,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def build
    set_grouped_conversations_count
+    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end

+  def set_grouped_resolved_conversations_count
+    @grouped_resolved_conversations_count = reporting_events
+                                            .where(name: 'conversation_resolved')
+                                            .select(group_by_key, :conversation_id)
+                                            .distinct
+                                            .group(group_by_key)
+                                            .count(:conversation_id)
+  end
+
  def reporting_events
    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
  end
@@ -40,6 +50,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
      arr << {
        id: team.id,
        conversations_count: @grouped_conversations_count[team.id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[team.id],
        avg_resolution_time: @grouped_avg_resolution_time[team.id],
        avg_first_response_time: @grouped_avg_first_response_time[team.id],
        avg_reply_time: @grouped_avg_reply_time[team.id]
@@ -24,7 +24,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController

  def update
    @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
+    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
  end

  def destroy
@@ -67,16 +67,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
    @agent = agents.find(params[:id])
  end

-  def account_user_attributes
-    [:role, :availability, :auto_offline]
-  end
-
-  def allowed_agent_params
-    [:name, :email, :name, :role, :availability, :auto_offline]
-  end
-
  def agent_params
-    params.require(:agent).permit(allowed_agent_params)
+    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
  end

  def new_agent_params
@@ -109,5 +101,3 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
    DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
  end
 end
-
-Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')
@@ -10,7 +10,7 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
  private

  def fetch_apps
-    @apps = Integrations::App.all.select { |app| app.active?(Current.account) }
+    @apps = Integrations::App.all.select(&:active?)
  end

  def fetch_app
@@ -1,22 +0,0 @@
-class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-  before_action :fetch_hook
-
-  def sso_url
-    params_string =
-      "token=#{URI.encode_www_form_component(@hook['settings']['access_token'])}" \
-      "&email=#{URI.encode_www_form_component(@hook['settings']['account_email'])}" \
-      "&account_id=#{URI.encode_www_form_component(@hook['settings']['account_id'])}"
-
-    installation_config = InstallationConfig.find_by(name: 'CAPTAIN_APP_URL')
-
-    sso_url = "#{installation_config.value}/sso?#{params_string}"
-    render json: { sso_url: sso_url }, status: :ok
-  end
-
-  private
-
-  def fetch_hook
-    @hook = Current.account.hooks.find_by!(app_id: 'captain')
-  end
-end
@@ -11,17 +11,7 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Base
  end

  def process_event
-    response = @hook.process_event(params[:event])
-
-    # for cases like an invalid event, or when conversation does not have enough messages
-    # for a label suggestion, the response is nil
-    if response.nil?
-      render json: { message: nil }
-    elsif response[:error]
-      render json: { error: response[:error] }, status: :unprocessable_entity
-    else
-      render json: { message: response[:message] }
-    end
+    render json: { message: @hook.process_event(params[:event]) }
  end

  def destroy
@@ -1,68 +1,13 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
  def create
-    result = if params[:attachment].present?
-               create_from_file
-             elsif params[:external_url].present?
-               create_from_url
-             else
-               render_error('No file or URL provided', :unprocessable_entity)
-             end
-
-    render_success(result) if result.is_a?(ActiveStorage::Blob)
-  end
-
-  private
-
-  def create_from_file
-    attachment = params[:attachment]
-    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
-  end
-
-  def create_from_url
-    uri = parse_uri(params[:external_url])
-    return if performed?
-
-    fetch_and_process_file_from_uri(uri)
-  end
-
-  def parse_uri(url)
-    uri = URI.parse(url)
-    validate_uri(uri)
-    uri
-  rescue URI::InvalidURIError, SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-    nil
-  end
-
-  def validate_uri(uri)
-    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-  end
-
-  def fetch_and_process_file_from_uri(uri)
-    uri.open do |file|
-      create_and_save_blob(file, File.basename(uri.path), file.content_type)
-    end
-  rescue OpenURI::HTTPError => e
-    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
-  rescue SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-  rescue StandardError
-    render_error('An unexpected error occurred', :internal_server_error)
-  end
-
-  def create_and_save_blob(io, filename, content_type)
-    ActiveStorage::Blob.create_and_upload!(
-      io: io,
-      filename: filename,
-      content_type: content_type
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
    )
-  end
+    file_blob.save!

-  def render_success(file_blob)
    render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
  end
-
-  def render_error(message, status)
-    render json: { error: message }, status: status
-  end
 end
@@ -0,0 +1,57 @@
+class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
+  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
+  before_action :set_group_scope, only: [:grouped_conversation_metrics]
+
+  def conversation_metrics
+    render json: {
+      open: @conversations.open.count,
+      unattended: @conversations.open.unattended.count,
+      unassigned: @conversations.open.unassigned.count
+    }
+  end
+
+  def grouped_conversation_metrics
+    count_by_group = @conversations.open.group(@group_scope).count
+    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
+    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
+
+    group_metrics = count_by_group.map do |group_id, count|
+      metric = {
+        open: count,
+        unattended: unattended_by_group[group_id] || 0,
+        unassigned: unassigned_by_group[group_id] || 0
+      }
+      metric[@group_scope] = group_id
+      metric
+    end
+
+    render json: group_metrics
+  end
+
+  private
+
+  def set_group_scope
+    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
+      team_id
+      assignee_id
+    ].include?(permitted_params[:group_by])
+
+    @group_scope = permitted_params[:group_by]
+  end
+
+  def team
+    return unless permitted_params[:team_id]
+
+    @team ||= Current.account.teams.find(permitted_params[:team_id])
+  end
+
+  def load_conversations
+    scope = Current.account.conversations
+    scope = scope.where(team_id: team.id) if team.present?
+    @conversations = scope
+  end
+
+  def permitted_params
+    params.permit(:team_id, :group_by)
+  end
+end
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]

  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::TeamSummaryBuilder)
  end

+  def inbox
+    render_report_with(V2::Reports::InboxSummaryBuilder)
+  end
+
  private

  def check_authorization
@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
  end

  def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
+    (date - number_of_days).to_i.to_s
  end

  def until_timestamp(date)
@@ -1,3 +1,30 @@
+<template>
+  <div
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    id="app"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
+    :dir="isRTLView ? 'rtl' : 'ltr'"
+  >
+    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
+    <template v-if="currentAccountId">
+      <pending-email-verification-banner v-if="hideOnOnboardingView" />
+      <payment-pending-banner v-if="hideOnOnboardingView" />
+      <upgrade-banner />
+    </template>
+    <transition name="fade" mode="out-in">
+      <router-view />
+    </transition>
+    <add-account-modal
+      :show="showAddAccountModal"
+      :has-accounts="hasAccounts"
+    />
+    <woot-snackbar-box />
+    <network-notification />
+  </div>
+  <loading-state v-else />
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
 import router from '../dashboard/routes';
@@ -10,6 +37,7 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
+import rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import {
@@ -31,6 +59,9 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
+
+  mixins: [rtlMixin],
+
  data() {
    return {
      showAddAccountModal: false,
@@ -42,8 +73,8 @@ export default {
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
-      isRTL: 'accounts/isRTL',
      currentUser: 'getCurrentUser',
+      globalConfig: 'globalConfig/get',
      authUIFlags: 'getAuthUIFlags',
      accountUIFlags: 'accounts/getUIFlags',
      currentAccountId: 'getCurrentAccountId',
@@ -99,6 +130,7 @@ export default {
        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
      this.setLocale(locale);
+      this.updateRTLDirectionView(locale);
      this.latestChatwootVersion = latestChatwootVersion;
      vueActionCable.init(pubsubToken);
      this.reconnectService = new ReconnectService(this.$store, router);
@@ -115,30 +147,6 @@ export default {
 };
 </script>

-<template>
-  <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
-    id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTL }"
-    :dir="isRTL ? 'rtl' : 'ltr'"
-  >
-    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
-    <template v-if="currentAccountId">
-      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
-      <PaymentPendingBanner v-if="hideOnOnboardingView" />
-      <UpgradeBanner />
-    </template>
-    <transition name="fade" mode="out-in">
-      <router-view />
-    </transition>
-    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
-    <WootSnackbarBox />
-    <NetworkNotification />
-  </div>
-  <LoadingState v-else />
-</template>
-
 <style lang="scss">
@import './assets/scss/app';
 </style>
@@ -32,10 +32,6 @@ class IntegrationsAPI extends ApiClient {
  deleteHook(hookId) {
    return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
  }
-
-  fetchCaptainURL() {
-    return axios.get(`${this.baseUrl()}/integrations/captain/sso_url`);
-  }
 }

 export default new IntegrationsAPI();
@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();
@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
    });
  }

-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
    return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
    });
  }

@@ -0,0 +1,40 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SummaryReportsAPI extends ApiClient {
+  constructor() {
+    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getTeamReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/team`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getAgentReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/agent`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+
+  getInboxReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/inbox`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
+}
+
+export default new SummaryReportsAPI();
@@ -3,9 +3,6 @@
@import 'tailwindcss/utilities';

@import 'shared/assets/fonts/plus-jakarta';
-@import 'shared/assets/fonts/InterDisplay/inter-display';
-@import 'shared/assets/fonts/inter';
-
@import 'shared/assets/stylesheets/animations';
@import 'shared/assets/stylesheets/colors';
@import 'shared/assets/stylesheets/spacing';
@@ -45,7 +42,6 @@
 }

@layer base {
-
  // scss-lint:disable PropertySortOrder
  :root {
    --color-amber-25: 254 253 251;
@@ -217,7 +213,6 @@
    --color-orange-800: 204 78 0;
    --color-orange-900: 88 45 29;
  }
-
  // scss-lint:disable QualifyingElement
  body.dark {
    --color-amber-25: 31 19 0;
@@ -1,10 +1,6 @@
 table {
  @apply border-spacing-0 text-sm w-full;

-
-}
-
-.woot-table {
  thead {
    th {
      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
@@ -20,7 +16,9 @@ table {
      @apply p-2.5 text-slate-700 dark:text-slate-100;
    }
  }
+}

+.woot-table {
  tr {
    .show-if-hover {
      transition: opacity 0.2s $swift-ease-out-function;
@@ -1,3 +1,35 @@
+<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"
+      @click="$emit('click')"
+    >
+      <div class="flex justify-between mb-0.5">
+        <emoji-or-icon class="inline-block w-5" :icon="icon" :emoji="emoji" />
+        <h5
+          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
+        >
+          {{ title }}
+        </h5>
+      </div>
+      <div class="flex flex-row">
+        <slot name="button" />
+        <div class="flex justify-end w-3 text-woot-500">
+          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
+          <fluent-icon v-else size="24" icon="add" type="solid" />
+        </div>
+      </div>
+    </button>
+    <div
+      v-if="isOpen"
+      class="bg-white dark:bg-slate-900"
+      :class="compact ? 'p-0' : 'p-4'"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
 <script>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';

@@ -29,35 +61,3 @@ export default {
  },
 };
 </script>
-
-<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"
-      @click="$emit('click')"
-    >
-      <div class="flex justify-between mb-0.5">
-        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
-        <h5
-          class="text-slate-800 text-sm dark:text-slate-100 mb-0 py-0 pr-2 pl-0"
-        >
-          {{ title }}
-        </h5>
-      </div>
-      <div class="flex flex-row">
-        <slot name="button" />
-        <div class="flex justify-end w-3 text-woot-500">
-          <fluent-icon v-if="isOpen" size="24" icon="subtract" type="solid" />
-          <fluent-icon v-else size="24" icon="add" type="solid" />
-        </div>
-      </div>
-    </button>
-    <div
-      v-if="isOpen"
-      class="bg-white dark:bg-slate-900"
-      :class="compact ? 'p-0' : 'p-4'"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
@@ -1,3 +1,17 @@
+<template>
+  <button
+    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
+    @click="$emit('click')"
+  >
+    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
+    <h3
+      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
+    >
+      {{ title }}
+    </h3>
+  </button>
+</template>
+
 <script>
 export default {
  props: {
@@ -13,20 +27,6 @@ export default {
 };
 </script>

-<template>
-  <button
-    class="bg-white dark:bg-slate-900 cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-slate-25 dark:border-slate-800 hover:border-woot-500 dark:hover:border-woot-500 hover:shadow-md hover:z-50 disabled:opacity-60"
-    @click="$emit('click')"
-  >
-    <img :src="src" :alt="title" class="w-1/2 my-4 mx-auto" />
-    <h3
-      class="text-slate-800 dark:text-slate-100 text-base text-center capitalize"
-    >
-      {{ title }}
-    </h3>
-  </button>
-</template>
-
 <style scoped lang="scss">
 .inactive {
  img {
@@ -1,22 +1,139 @@
+<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',
+    ]"
+  >
+    <slot />
+    <chat-list-header
+      :page-title="pageTitle"
+      :has-applied-filters="hasAppliedFilters"
+      :has-active-folders="hasActiveFolders"
+      :active-status="activeStatus"
+      @add-folders="onClickOpenAddFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
+      @reset-filters="resetAndFetchData"
+      @basic-filter-change="onBasicFilterChange"
+    />
+
+    <add-custom-views
+      v-if="showAddFoldersModal"
+      :custom-views-query="foldersQuery"
+      :open-last-saved-item="openLastSavedItemInFolder"
+      @close="onCloseAddFoldersModal"
+    />
+
+    <delete-custom-views
+      v-if="showDeleteFoldersModal"
+      :show-delete-popup.sync="showDeleteFoldersModal"
+      :active-custom-view="activeFolder"
+      :custom-views-id="foldersId"
+      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
+      @close="onCloseDeleteFoldersModal"
+    />
+
+    <chat-type-tabs
+      v-if="!hasAppliedFiltersOrActiveFolders"
+      :items="assigneeTabItems"
+      :active-tab="activeAssigneeTab"
+      class="tab--chat-type"
+      @chatTabChange="updateAssigneeTab"
+    />
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex items-center justify-center p-4 overflow-auto"
+    >
+      {{ $t('CHAT_LIST.LIST.404') }}
+    </p>
+    <conversation-bulk-actions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @select-all-conversations="selectAllConversations"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
+      @assign-team="onAssignTeamsForBulk"
+    />
+    <div
+      ref="conversationList"
+      class="flex-1 conversations-list"
+      :class="{ 'overflow-hidden': isContextMenuOpen }"
+    >
+      <virtual-list
+        ref="conversationVirtualList"
+        :data-key="'id'"
+        :data-sources="conversationList"
+        :data-component="itemComponent"
+        :extra-props="virtualListExtraProps"
+        class="w-full h-full overflow-auto"
+        footer-tag="div"
+      >
+        <template #footer>
+          <div v-if="chatListLoading" class="text-center">
+            <span class="mt-4 mb-4 spinner" />
+          </div>
+          <p
+            v-if="showEndOfListMessage"
+            class="p-4 text-center text-slate-400 dark:text-slate-300"
+          >
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <intersection-observer
+            v-if="!showEndOfListMessage && !chatListLoading"
+            :options="infiniteLoaderOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </virtual-list>
+    </div>
+    <woot-modal
+      :show.sync="showAdvancedFilters"
+      :on-close="closeAdvanceFiltersModal"
+      size="medium"
+    >
+      <conversation-advanced-filter
+        v-if="showAdvancedFilters"
+        :initial-filter-types="advancedFilterTypes"
+        :initial-applied-filters="appliedFilter"
+        :active-folder-name="activeFolderName"
+        :on-close="closeAdvanceFiltersModal"
+        :is-folder-view="hasActiveFolders"
+        @applyFilter="onApplyFilter"
+        @updateFolder="onUpdateSavedFilter"
+      />
+    </woot-modal>
+  </div>
+</template>
+
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useAlert } from 'dashboard/composables';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useFilter } from 'shared/composables/useFilter';
 import VirtualList from 'vue-virtual-scroll-list';

 import ChatListHeader from './ChatListHeader.vue';
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
 import ConversationItem from './ConversationItem.vue';
+import timeMixin from '../mixins/time';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import conversationMixin from '../mixins/conversations';
 import wootConstants from 'dashboard/constants/globals';
 import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
+import alertMixin from 'shared/mixins/alertMixin';
+import filterMixin from 'shared/mixins/filterMixin';
+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';
@@ -41,6 +158,14 @@ export default {
    IntersectionObserver,
    VirtualList,
  },
+  mixins: [
+    timeMixin,
+    conversationMixin,
+    keyboardEventListenerMixins,
+    alertMixin,
+    filterMixin,
+    uiSettingsMixin,
+  ],
  provide() {
    return {
      // Actions to be performed on virtual list item and context menu.
@@ -85,86 +210,6 @@ export default {
      type: Boolean,
    },
  },
-  setup() {
-    const { uiSettings } = useUISettings();
-
-    const conversationListRef = ref(null);
-
-    const {
-      setFilterAttributes,
-      initializeStatusAndAssigneeFilterToModal,
-      initializeInboxTeamAndLabelFilterToModal,
-    } = useFilter({
-      filteri18nKey: 'FILTER',
-      attributeModel: 'conversation_attribute',
-    });
-
-    const getKeyboardListenerParams = () => {
-      const allConversations = conversationListRef.value.querySelectorAll(
-        'div.conversations-list div.conversation'
-      );
-      const activeConversation = conversationListRef.value.querySelector(
-        'div.conversations-list div.conversation.active'
-      );
-      const activeConversationIndex = [...allConversations].indexOf(
-        activeConversation
-      );
-      const lastConversationIndex = allConversations.length - 1;
-      return {
-        allConversations,
-        activeConversation,
-        activeConversationIndex,
-        lastConversationIndex,
-      };
-    };
-    const handleConversationNavigation = direction => {
-      const {
-        allConversations,
-        activeConversationIndex,
-        lastConversationIndex,
-      } = getKeyboardListenerParams();
-
-      // Determine the new index based on the direction
-      const newIndex =
-        direction === 'previous'
-          ? activeConversationIndex - 1
-          : activeConversationIndex + 1;
-
-      // Check if the new index is within the valid range
-      if (
-        allConversations.length > 0 &&
-        newIndex >= 0 &&
-        newIndex <= lastConversationIndex
-      ) {
-        // Click the conversation at the new index
-        allConversations[newIndex].click();
-      } else if (allConversations.length > 0) {
-        // If the new index is out of range, click the first or last conversation based on the direction
-        const fallbackIndex =
-          direction === 'previous' ? 0 : lastConversationIndex;
-        allConversations[fallbackIndex].click();
-      }
-    };
-    const keyboardEvents = {
-      'Alt+KeyJ': {
-        action: () => handleConversationNavigation('previous'),
-        allowOnFocusedInput: true,
-      },
-      'Alt+KeyK': {
-        action: () => handleConversationNavigation('next'),
-        allowOnFocusedInput: true,
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-
-    return {
-      uiSettings,
-      conversationListRef,
-      setFilterAttributes,
-      initializeStatusAndAssigneeFilterToModal,
-      initializeInboxTeamAndLabelFilterToModal,
-    };
-  },
  data() {
    return {
      activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
@@ -185,7 +230,7 @@ export default {
      isContextMenuOpen: false,
      appliedFilter: [],
      infiniteLoaderOptions: {
-        root: this.$refs.conversationListRef,
+        root: this.$refs.conversationList,
        rootMargin: '100px 0px 100px 0px',
      },

@@ -203,16 +248,20 @@ export default {
  },
  computed: {
    ...mapGetters({
+      currentChat: 'getSelectedChat',
      currentUser: 'getCurrentUser',
      chatLists: 'getAllConversations',
      mineChatsList: 'getMineChats',
      allChatList: 'getAllStatusChats',
+      chatListFilters: 'getChatListFilters',
      unAssignedChatsList: 'getUnAssignedChats',
      chatListLoading: 'getChatListLoadingStatus',
+      currentUserID: 'getCurrentUserID',
      activeInbox: 'getSelectedInbox',
      conversationStats: 'conversationStats/getStats',
      appliedFilters: 'getAppliedConversationFilters',
      folders: 'customViews/getCustomViews',
+      inboxes: 'inboxes/getInboxes',
      agentList: 'agents/getAgents',
      teamsList: 'teams/getTeams',
      inboxesList: 'inboxes/getInboxes',
@@ -562,6 +611,58 @@ export default {
        }))
      );
    },
+    getKeyboardListenerParams() {
+      const allConversations = this.$refs.conversationList.querySelectorAll(
+        'div.conversations-list div.conversation'
+      );
+      const activeConversation = this.$refs.conversationList.querySelector(
+        'div.conversations-list div.conversation.active'
+      );
+      const activeConversationIndex = [...allConversations].indexOf(
+        activeConversation
+      );
+      const lastConversationIndex = allConversations.length - 1;
+      return {
+        allConversations,
+        activeConversation,
+        activeConversationIndex,
+        lastConversationIndex,
+      };
+    },
+    handlePreviousConversation() {
+      const { allConversations, activeConversationIndex } =
+        this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[0].click();
+      }
+      if (activeConversationIndex >= 1) {
+        allConversations[activeConversationIndex - 1].click();
+      }
+    },
+    handleNextConversation() {
+      const {
+        allConversations,
+        activeConversationIndex,
+        lastConversationIndex,
+      } = this.getKeyboardListenerParams();
+      if (activeConversationIndex === -1) {
+        allConversations[lastConversationIndex].click();
+      } else if (activeConversationIndex < lastConversationIndex) {
+        allConversations[activeConversationIndex + 1].click();
+      }
+    },
+    getKeyboardEvents() {
+      return {
+        'Alt+KeyJ': {
+          action: () => this.handlePreviousConversation(),
+          allowOnFocusedInput: true,
+        },
+        'Alt+KeyK': {
+          action: () => this.handleNextConversation(),
+          allowOnFocusedInput: true,
+        },
+      };
+    },
    resetAndFetchData() {
      this.appliedFilter = [];
      this.resetBulkActions();
@@ -628,7 +729,7 @@ export default {
      }
    },
    emitConversationLoaded() {
-      this.$emit('conversationLoad');
+      this.$emit('conversation-load');
      this.$nextTick(() => {
        // Addressing a known issue in the virtual list library where dynamically added items
        // might not render correctly. This workaround involves a slight manual adjustment
@@ -711,7 +812,7 @@ export default {
        });
        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
        if (conversationId) {
-          useAlert(
+          this.showAlert(
            this.$t(
              'CONVERSATION.CARD_CONTEXT_MENU.API.AGENT_ASSIGNMENT.SUCCESFUL',
              {
@@ -721,10 +822,10 @@ export default {
            )
          );
        } else {
-          useAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
+          this.showAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
        }
      } catch (err) {
-        useAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
      }
    },
    async assignPriority(priority, conversationId = null) {
@@ -739,7 +840,7 @@ export default {
            newValue: priority,
            from: 'Context menu',
          });
-          useAlert(
+          this.showAlert(
            this.$t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
              priority,
              conversationId,
@@ -782,7 +883,7 @@ export default {
          conversationId,
          teamId: team.id,
        });
-        useAlert(
+        this.showAlert(
          this.$t(
            'CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL',
            {
@@ -792,7 +893,7 @@ export default {
          )
        );
      } catch (error) {
-        useAlert(
+        this.showAlert(
          this.$t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED')
        );
      }
@@ -809,7 +910,7 @@ export default {
        });
        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
        if (conversationId) {
-          useAlert(
+          this.showAlert(
            this.$t(
              'CONVERSATION.CARD_CONTEXT_MENU.API.LABEL_ASSIGNMENT.SUCCESFUL',
              {
@@ -819,10 +920,10 @@ export default {
            )
          );
        } else {
-          useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+          this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
        }
      } catch (err) {
-        useAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
      }
    },
    async onAssignTeamsForBulk(team) {
@@ -835,9 +936,9 @@ export default {
          },
        });
        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_SUCCESFUL'));
      } catch (err) {
-        useAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.TEAMS.ASSIGN_FAILED'));
      }
    },
    async onUpdateConversations(status, snoozedUntil) {
@@ -851,9 +952,9 @@ export default {
          snoozed_until: snoozedUntil,
        });
        this.$store.dispatch('bulkActions/clearSelectedConversationIds');
-        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
      } catch (err) {
-        useAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
      }
    },
    toggleConversationStatus(conversationId, status, snoozedUntil) {
@@ -864,7 +965,7 @@ export default {
          snoozedUntil,
        })
        .then(() => {
-          useAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
          this.isLoading = false;
        });
    },
@@ -877,144 +978,9 @@ export default {
    onContextMenuToggle(state) {
      this.isContextMenuOpen = state;
    },
-    initializeExistingFilterToModal() {
-      const statusFilter = this.initializeStatusAndAssigneeFilterToModal(
-        this.activeStatus,
-        this.currentUserDetails,
-        this.activeAssigneeTab
-      );
-      if (statusFilter) {
-        this.appliedFilter.push(statusFilter);
-      }
-
-      const otherFilters = this.initializeInboxTeamAndLabelFilterToModal(
-        this.conversationInbox,
-        this.inbox,
-        this.teamId,
-        this.activeTeam,
-        this.label
-      );
-      this.appliedFilter.push(...otherFilters);
-    },
  },
 };
 </script>
-
-<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',
-    ]"
-  >
-    <slot />
-    <ChatListHeader
-      :page-title="pageTitle"
-      :has-applied-filters="hasAppliedFilters"
-      :has-active-folders="hasActiveFolders"
-      :active-status="activeStatus"
-      @addFolders="onClickOpenAddFoldersModal"
-      @deleteFolders="onClickOpenDeleteFoldersModal"
-      @filtersModal="onToggleAdvanceFiltersModal"
-      @resetFilters="resetAndFetchData"
-      @basicFilterChange="onBasicFilterChange"
-    />
-
-    <AddCustomViews
-      v-if="showAddFoldersModal"
-      :custom-views-query="foldersQuery"
-      :open-last-saved-item="openLastSavedItemInFolder"
-      @close="onCloseAddFoldersModal"
-    />
-
-    <DeleteCustomViews
-      v-if="showDeleteFoldersModal"
-      :show-delete-popup.sync="showDeleteFoldersModal"
-      :active-custom-view="activeFolder"
-      :custom-views-id="foldersId"
-      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
-      @close="onCloseDeleteFoldersModal"
-    />
-
-    <ChatTypeTabs
-      v-if="!hasAppliedFiltersOrActiveFolders"
-      :items="assigneeTabItems"
-      :active-tab="activeAssigneeTab"
-      @chatTabChange="updateAssigneeTab"
-    />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
-    >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
-    <ConversationBulkActions
-      v-if="selectedConversations.length"
-      :conversations="selectedConversations"
-      :all-conversations-selected="allConversationsSelected"
-      :selected-inboxes="uniqueInboxes"
-      :show-open-action="allSelectedConversationsStatus('open')"
-      :show-resolved-action="allSelectedConversationsStatus('resolved')"
-      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      @selectAllConversations="selectAllConversations"
-      @assignAgent="onAssignAgent"
-      @updateConversations="onUpdateConversations"
-      @assignLabels="onAssignLabels"
-      @assignTeam="onAssignTeamsForBulk"
-    />
-    <div
-      ref="conversationListRef"
-      class="flex-1 conversations-list"
-      :class="{ 'overflow-hidden': isContextMenuOpen }"
-    >
-      <VirtualList
-        ref="conversationVirtualList"
-        data-key="id"
-        :data-sources="conversationList"
-        :data-component="itemComponent"
-        :extra-props="virtualListExtraProps"
-        class="w-full h-full overflow-auto"
-        footer-tag="div"
-      >
-        <template #footer>
-          <div v-if="chatListLoading" class="text-center">
-            <span class="mt-4 mb-4 spinner" />
-          </div>
-          <p
-            v-if="showEndOfListMessage"
-            class="p-4 text-center text-slate-400 dark:text-slate-300"
-          >
-            {{ $t('CHAT_LIST.EOF') }}
-          </p>
-          <IntersectionObserver
-            v-if="!showEndOfListMessage && !chatListLoading"
-            :options="infiniteLoaderOptions"
-            @observed="loadMoreConversations"
-          />
-        </template>
-      </VirtualList>
-    </div>
-    <woot-modal
-      :show.sync="showAdvancedFilters"
-      :on-close="closeAdvanceFiltersModal"
-      size="medium"
-    >
-      <ConversationAdvancedFilter
-        v-if="showAdvancedFilters"
-        :initial-filter-types="advancedFilterTypes"
-        :initial-applied-filters="appliedFilter"
-        :active-folder-name="activeFolderName"
-        :on-close="closeAdvanceFiltersModal"
-        :is-folder-view="hasActiveFolders"
-        @applyFilter="onApplyFilter"
-        @updateFolder="onUpdateSavedFilter"
-      />
-    </woot-modal>
-  </div>
-</template>
-
 <style scoped>
@tailwind components;
@layer components {
@@ -1028,4 +994,14 @@ export default {
 .conversations-list {
  @apply overflow-hidden hover:overflow-y-auto;
 }
+
+.tab--chat-type {
+  @apply py-0 px-4;
+
+  ::v-deep {
+    .tabs {
+      @apply p-0;
+    }
+  }
+}
 </style>
@@ -21,16 +21,16 @@ const props = defineProps({
  },
 });

-const emit = defineEmits([
-  'addFolders',
-  'deleteFolders',
-  'resetFilters',
-  'basicFilterChange',
-  'filtersModal',
+const emits = defineEmits([
+  'add-folders',
+  'delete-folders',
+  'reset-filters',
+  'basic-filter-change',
+  'filters-modal',
 ]);

 const onBasicFilterChange = (value, type) => {
-  emit('basicFilterChange', value, type);
+  emits('basic-filter-change', value, type);
 };

 const hasAppliedFiltersOrActiveFolders = computed(() => {
@@ -68,7 +68,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="secondary"
          icon="save"
-          @click="emit('addFolders')"
+          @click="emits('add-folders')"
        />
        <woot-button
          v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
@@ -76,7 +76,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="alert"
          icon="dismiss-circle"
-          @click="emit('resetFilters')"
+          @click="emits('reset-filters')"
        />
      </div>
      <div v-if="hasActiveFolders">
@@ -86,7 +86,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="secondary"
          icon="edit"
-          @click="emit('filtersModal')"
+          @click="emits('filters-modal')"
        />
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
@@ -94,7 +94,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          variant="smooth"
          color-scheme="alert"
          icon="delete"
-          @click="emit('deleteFolders')"
+          @click="emits('delete-folders')"
        />
      </div>
      <woot-button
@@ -104,9 +104,9 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
        color-scheme="secondary"
        icon="filter"
        size="tiny"
-        @click="emit('filtersModal')"
+        @click="emits('filters-modal')"
      />
-      <ConversationBasicFilter
+      <conversation-basic-filter
        v-if="!hasAppliedFiltersOrActiveFolders"
        @changeFilter="onBasicFilterChange"
      />
@@ -1,9 +1,34 @@
+<template>
+  <div class="code--container">
+    <div class="code--action-area">
+      <form
+        v-if="enableCodePen"
+        class="code--codeopen-form"
+        action="https://codepen.io/pen/define"
+        method="POST"
+        target="_blank"
+      >
+        <input type="hidden" name="data" :value="codepenScriptValue" />
+
+        <button type="submit" class="button secondary tiny">
+          {{ $t('COMPONENTS.CODE.CODEPEN') }}
+        </button>
+      </form>
+      <button class="button secondary tiny" @click="onCopy">
+        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
+      </button>
+    </div>
+    <highlightjs v-if="script" :language="lang" :code="script" />
+  </div>
+</template>
+
 <script>
 import 'highlight.js/styles/default.css';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
+  mixins: [alertMixin],
  props: {
    script: {
      type: String,
@@ -36,36 +61,12 @@ export default {
    async onCopy(e) {
      e.preventDefault();
      await copyTextToClipboard(this.script);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
 };
 </script>

-<template>
-  <div class="code--container">
-    <div class="code--action-area">
-      <form
-        v-if="enableCodePen"
-        class="code--codeopen-form"
-        action="https://codepen.io/pen/define"
-        method="POST"
-        target="_blank"
-      >
-        <input type="hidden" name="data" :value="codepenScriptValue" />
-
-        <button type="submit" class="button secondary tiny">
-          {{ $t('COMPONENTS.CODE.CODEPEN') }}
-        </button>
-      </form>
-      <button class="button secondary tiny" @click="onCopy">
-        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
-      </button>
-    </div>
-    <highlightjs v-if="script" :language="lang" :code="script" />
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .code--container {
  position: relative;
@@ -1,3 +1,26 @@
+<template>
+  <conversation-card
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    :enable-context-menu="true"
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @assign-priority="assignPriority"
+  />
+</template>
+
 <script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
 export default {
@@ -47,26 +70,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <ConversationCard
-    :key="source.id"
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
-    :chat="source"
-    :conversation-type="conversationType"
-    :selected="isConversationSelected(source.id)"
-    :show-assignee="showAssignee"
-    enable-context-menu
-    @selectConversation="selectConversation"
-    @deSelectConversation="deSelectConversation"
-    @assignAgent="assignAgent"
-    @assignTeam="assignTeam"
-    @assignLabel="assignLabels"
-    @updateConversationStatus="updateConversationStatus"
-    @contextMenuToggle="toggleContextMenu"
-    @markAsUnread="markAsUnread"
-    @assignPriority="assignPriority"
-  />
-</template>
@@ -1,12 +1,147 @@
+<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">
+          <input
+            v-model="editedValue"
+            class="!my-0 mr-2 ml-0"
+            type="checkbox"
+            @change="onUpdate"
+          />
+        </div>
+        <div class="flex items-center justify-between w-full">
+          <span
+            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
+            :class="
+              $v.editedValue.$error
+                ? 'text-red-400 dark:text-red-500'
+                : 'text-slate-800 dark:text-slate-100'
+            "
+          >
+            {{ label }}
+            <helper-text-popup
+              v-if="description"
+              :message="description"
+              class="mt-0.5"
+            />
+          </span>
+          <woot-button
+            v-if="showActions && value"
+            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
+            variant="link"
+            size="medium"
+            color-scheme="secondary"
+            icon="delete"
+            class-names="flex justify-end w-4"
+            @click="onDelete"
+          />
+        </div>
+      </h4>
+    </div>
+    <div v-if="notAttributeTypeCheckboxAndList">
+      <div v-if="isEditing" v-on-clickaway="onClickAway">
+        <div class="mb-2 w-full flex items-center">
+          <input
+            ref="inputfield"
+            v-model="editedValue"
+            :type="inputType"
+            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
+            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>
+        </div>
+        <span
+          v-if="shouldShowErrorMessage"
+          class="text-red-400 dark:text-red-500 text-sm block font-normal -mt-px w-full"
+        >
+          {{ errorMessage }}
+        </span>
+      </div>
+      <div
+        v-show="!isEditing"
+        class="flex group"
+        :class="{ 'is-editable': showActions }"
+      >
+        <a
+          v-if="isAttributeTypeLink"
+          :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"
+        >
+          {{ 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"
+        >
+          {{ displayValue || '---' }}
+        </p>
+        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
+          <woot-button
+            v-if="showActions && value"
+            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"
+            @click="onCopy"
+          />
+          <woot-button
+            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"
+            @click="onEdit"
+          />
+        </div>
+      </div>
+    </div>
+    <div v-if="isAttributeTypeList">
+      <multiselect-dropdown
+        :options="listOptions"
+        :selected-item="selectedItem"
+        :has-thumbnail="false"
+        :multiselector-placeholder="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
+        "
+        :no-search-result="
+          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
+        "
+        :input-placeholder="
+          $t(
+            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
+          )
+        "
+        @click="onUpdateListValue"
+      />
+    </div>
+  </div>
+</template>
+
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from '@vuelidate/validators';
+import { required, url } from 'vuelidate/lib/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import HelperTextPopup from 'dashboard/components/ui/HelperTextPopup.vue';
 import { isValidURL } from '../helper/URLHelper';
-import { getRegexp } from 'shared/helpers/Validators';
-import { useVuelidate } from '@vuelidate/core';
+import customAttributeMixin from '../mixins/customAttributeMixin';

 const DATE_FORMAT = 'yyyy-MM-dd';

@@ -15,6 +150,7 @@ export default {
    MultiselectDropdown,
    HelperTextPopup,
  },
+  mixins: [customAttributeMixin],
  props: {
    label: { type: String, required: true },
    description: { type: String, default: '' },
@@ -27,12 +163,10 @@ export default {
      default: null,
    },
    regexCue: { type: String, default: null },
+    regexEnabled: { type: Boolean, default: false },
    attributeKey: { type: String, required: true },
    contactId: { type: Number, default: null },
  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
  data() {
    return {
      isEditing: false,
@@ -91,13 +225,13 @@ export default {
      return this.isAttributeTypeLink ? 'url' : this.attributeType;
    },
    shouldShowErrorMessage() {
-      return this.v$.editedValue.$error;
+      return this.$v.editedValue.$error;
    },
    errorMessage() {
-      if (this.v$.editedValue.url) {
+      if (this.$v.editedValue.url) {
        return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
      }
-      if (!this.v$.editedValue.regexValidation) {
+      if (!this.$v.editedValue.regexValidation) {
        return this.regexCue
          ? this.regexCue
          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
@@ -112,7 +246,7 @@ export default {
    },
    contactId() {
      // Fix to solve validation not resetting when contactId changes in contact page
-      this.v$.$reset();
+      this.$v.$reset();
    },
  },

@@ -127,7 +261,8 @@ export default {
        required,
        regexValidation: value => {
          return !(
-            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
+            this.attributeRegex &&
+            !this.getRegexp(this.attributeRegex).test(value)
          );
        },
      },
@@ -152,7 +287,7 @@ export default {
      }
    },
    onClickAway() {
-      this.v$.$reset();
+      this.$v.$reset();
      this.isEditing = false;
    },
    onEdit() {
@@ -172,8 +307,8 @@ export default {
        this.attributeType === 'date'
          ? parseISO(this.editedValue)
          : this.editedValue;
-      this.v$.$touch();
-      if (this.v$.$invalid) {
+      this.$v.$touch();
+      if (this.$v.$invalid) {
        return;
      }
      this.isEditing = false;
@@ -181,7 +316,7 @@ export default {
    },
    onDelete() {
      this.isEditing = false;
-      this.v$.$reset();
+      this.$v.$reset();
      this.$emit('delete', this.attributeKey);
    },
    onCopy() {
@@ -191,152 +326,14 @@ export default {
 };
 </script>

-<template>
-  <div class="px-4 py-3">
-    <div class="flex items-center mb-1">
-      <h4 class="flex items-center w-full m-0 text-sm error">
-        <div v-if="isAttributeTypeCheckbox" class="flex items-center">
-          <input
-            v-model="editedValue"
-            class="!my-0 mr-2 ml-0"
-            type="checkbox"
-            @change="onUpdate"
-          />
-        </div>
-        <div class="flex items-center justify-between w-full">
-          <span
-            class="w-full inline-flex gap-1.5 items-start font-medium whitespace-nowrap text-sm mb-0"
-            :class="
-              v$.editedValue.$error
-                ? 'text-red-400 dark:text-red-500'
-                : 'text-slate-800 dark:text-slate-100'
-            "
-          >
-            {{ label }}
-            <HelperTextPopup
-              v-if="description"
-              :message="description"
-              class="mt-0.5"
-            />
-          </span>
-          <woot-button
-            v-if="showActions && value"
-            v-tooltip.left="$t('CUSTOM_ATTRIBUTES.ACTIONS.DELETE')"
-            variant="link"
-            size="medium"
-            color-scheme="secondary"
-            icon="delete"
-            class-names="flex justify-end w-4"
-            @click="onDelete"
-          />
-        </div>
-      </h4>
-    </div>
-    <div v-if="notAttributeTypeCheckboxAndList">
-      <div v-if="isEditing" v-on-clickaway="onClickAway">
-        <div class="flex items-center w-full mb-2">
-          <input
-            ref="inputfield"
-            v-model="editedValue"
-            :type="inputType"
-            class="!h-8 ltr:!rounded-r-none rtl:!rounded-l-none !mb-0 !text-sm"
-            autofocus="true"
-            :class="{ error: v$.editedValue.$error }"
-            @blur="v$.editedValue.$touch"
-            @keyup.enter="onUpdate"
-          />
-          <div>
-            <woot-button
-              size="small"
-              icon="checkmark"
-              class="rounded-l-none rtl:rounded-r-none"
-              @click="onUpdate"
-            />
-          </div>
-        </div>
-        <span
-          v-if="shouldShowErrorMessage"
-          class="block w-full -mt-px text-sm font-normal text-red-400 dark:text-red-500"
-        >
-          {{ errorMessage }}
-        </span>
-      </div>
-      <div
-        v-show="!isEditing"
-        class="flex group"
-        :class="{ 'is-editable': showActions }"
-      >
-        <a
-          v-if="isAttributeTypeLink"
-          :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"
-        >
-          {{ 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"
-        >
-          {{ displayValue || '---' }}
-        </p>
-        <div class="flex max-w-[2rem] gap-1 ml-1 rtl:mr-1 rtl:ml-0">
-          <woot-button
-            v-if="showActions && value"
-            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"
-            @click="onCopy"
-          />
-          <woot-button
-            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"
-            @click="onEdit"
-          />
-        </div>
-      </div>
-    </div>
-    <div v-if="isAttributeTypeList">
-      <MultiselectDropdown
-        :options="listOptions"
-        :selected-item="selectedItem"
-        :has-thumbnail="false"
-        :multiselector-placeholder="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.PLACEHOLDER')
-        "
-        :no-search-result="
-          $t('CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.NO_RESULT')
-        "
-        :input-placeholder="
-          $t(
-            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
-          )
-        "
-        @click="onUpdateListValue"
-      />
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 ::v-deep {
  .selector-wrap {
    @apply m-0 top-1;
-
    .selector-name {
      @apply ml-0;
    }
  }
-
  .name {
    @apply ml-0;
  }
@@ -1,25 +0,0 @@
-<script setup>
-import { useStoreGetters } from 'dashboard/composables/store';
-import { computed } from 'vue';
-const props = defineProps({
-  showOnCustomBrandedInstance: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const getters = useStoreGetters();
-
-const isACustomBrandedInstance =
-  getters['globalConfig/isACustomBrandedInstance'];
-
-const shouldShowContent = computed(
-  () => props.showOnCustomBrandedInstance || !isACustomBrandedInstance.value
-);
-</script>
-
-<template>
-  <div v-if="shouldShowContent">
-    <slot />
-  </div>
-</template>
@@ -1,3 +1,28 @@
+<template>
+  <div class="flex flex-col">
+    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
+    <form class="modal-content" @submit.prevent="chooseTime">
+      <date-picker
+        v-model="snoozeTime"
+        type="datetime"
+        inline
+        :lang="lang"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        :popup-style="{ width: '100%' }"
+      />
+      <div class="flex flex-row justify-end gap-2 py-2 px-0 w-full">
+        <woot-button variant="clear" @click.prevent="onClose">
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
+        </woot-button>
+        <woot-button>
+          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
+        </woot-button>
+      </div>
+    </form>
+  </div>
+</template>
+
 <script>
 import DatePicker from 'vue2-datepicker';

@@ -22,7 +47,7 @@ export default {
      this.$emit('close');
    },
    chooseTime() {
-      this.$emit('chooseTime', this.snoozeTime);
+      this.$emit('choose-time', this.snoozeTime);
    },
    disabledDate(date) {
      // Disable all the previous dates
@@ -39,32 +64,6 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div class="flex flex-col">
-    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
-    <form class="modal-content" @submit.prevent="chooseTime">
-      <DatePicker
-        v-model="snoozeTime"
-        type="datetime"
-        inline
-        :lang="lang"
-        :disabled-date="disabledDate"
-        :disabled-time="disabledTime"
-        :popup-style="{ width: '100%' }"
-      />
-      <div class="flex flex-row justify-end w-full gap-2 px-0 py-2">
-        <woot-button variant="clear" @click.prevent="onClose">
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.CANCEL') }}
-        </woot-button>
-        <woot-button>
-          {{ $t('CONVERSATION.CUSTOM_SNOOZE.APPLY') }}
-        </woot-button>
-      </div>
-    </form>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .modal-content {
  @apply pt-2 px-5 pb-6;
@@ -1,16 +1,3 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
 <template>
  <div class="flex flex-col items-start w-full gap-6">
    <div class="flex flex-col w-full gap-4">
@@ -29,3 +16,16 @@ defineProps({
    </div>
  </div>
 </template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+});
+</script>
@@ -1,3 +1,7 @@
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
+
 <script>
 export default {
  props: {
@@ -28,7 +32,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div ref="observedElement" class="h-6 w-full" />
-</template>
@@ -1,33 +1,3 @@
-<script>
-import 'highlight.js/styles/default.css';
-import { copyTextToClipboard } from 'shared/helpers/clipboard';
-import { useAlert } from 'dashboard/composables';
-
-export default {
-  props: {
-    value: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      masked: true,
-    };
-  },
-  methods: {
-    async onCopy(e) {
-      e.preventDefault();
-      await copyTextToClipboard(this.value);
-      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
-    },
-    toggleMasked() {
-      this.masked = !this.masked;
-    },
-  },
-};
-</script>
-
 <template>
  <div class="text--container">
    <woot-button size="small" class="button--text" @click="onCopy">
@@ -45,6 +15,37 @@ export default {
  </div>
 </template>

+<script>
+import 'highlight.js/styles/default.css';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import alertMixin from 'shared/mixins/alertMixin';
+
+export default {
+  mixins: [alertMixin],
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      masked: true,
+    };
+  },
+  methods: {
+    async onCopy(e) {
+      e.preventDefault();
+      await copyTextToClipboard(this.value);
+      this.showAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
+    },
+    toggleMasked() {
+      this.masked = !this.masked;
+    },
+  },
+};
+</script>
+
 <style lang="scss" scoped>
 .text--container {
  position: relative;
@@ -1,3 +1,36 @@
+<template>
+  <transition name="modal-fade">
+    <div
+      v-if="show"
+      :class="modalClassName"
+      transition="modal"
+      @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,
+        }"
+        @mouse.stop
+        @mousedown="event => event.stopPropagation()"
+      >
+        <woot-button
+          v-if="showCloseButton"
+          color-scheme="secondary"
+          icon="dismiss"
+          variant="clear"
+          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
+          @click="close"
+        />
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
 <script>
 export default {
  props: {
@@ -75,39 +108,6 @@ export default {
 };
 </script>

-<template>
-  <transition name="modal-fade">
-    <div
-      v-if="show"
-      :class="modalClassName"
-      transition="modal"
-      @mousedown="handleMouseDown"
-    >
-      <div
-        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
-        :class="{
-          'rounded-xl w-[37.5rem]': !fullWidth,
-          'items-center rounded-none flex h-full justify-center w-full':
-            fullWidth,
-          [size]: true,
-        }"
-        @mouse.stop
-        @mousedown="event => event.stopPropagation()"
-      >
-        <woot-button
-          v-if="showCloseButton"
-          color-scheme="secondary"
-          icon="dismiss"
-          variant="clear"
-          class="absolute z-10 ltr:right-2 rtl:left-2 top-2"
-          @click="close"
-        />
-        <slot />
-      </div>
-    </div>
-  </transition>
-</template>
-
 <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;
@@ -1,28 +1,3 @@
-<script>
-export default {
-  props: {
-    headerTitle: {
-      type: String,
-      default: '',
-    },
-    headerContent: {
-      type: String,
-      default: '',
-    },
-    headerContentValue: {
-      type: String,
-      default: '',
-    },
-    headerImage: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable vue/no-unused-refs -->
-<!-- Added ref for writing specs -->
 <template>
  <div class="flex flex-col items-start px-8 pt-8 pb-0">
    <img v-if="headerImage" :src="headerImage" alt="No image" />
@@ -48,3 +23,26 @@ export default {
    <slot />
  </div>
 </template>
+
+<script>
+export default {
+  props: {
+    headerTitle: {
+      type: String,
+      default: '',
+    },
+    headerContent: {
+      type: String,
+      default: '',
+    },
+    headerContentValue: {
+      type: String,
+      default: '',
+    },
+    headerImage: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
@@ -1,26 +1,3 @@
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
-    subTitle: {
-      type: String,
-      default: '',
-    },
-    showBorder: {
-      type: Boolean,
-      default: true,
-    },
-    note: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
 <template>
  <div
    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
@@ -53,3 +30,26 @@ export default {
    </div>
  </div>
 </template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    showBorder: {
+      type: Boolean,
+      default: true,
+    },
+    note: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
@@ -1,3 +1,14 @@
+<template>
+  <woot-button
+    :size="size"
+    variant="clear"
+    color-scheme="secondary"
+    class="-ml-3 text-black-900 dark:text-slate-300"
+    icon="list"
+    @click="onMenuItemClick"
+  />
+</template>
+
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';

@@ -15,14 +26,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <woot-button
-    :size="size"
-    variant="clear"
-    color-scheme="secondary"
-    class="-ml-3 text-black-900 dark:text-slate-300"
-    icon="list"
-    @click="onMenuItemClick"
-  />
-</template>
@@ -1,3 +1,24 @@
+<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">
+        {{ 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"
+        >
+          {{ action.message }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
 <script>
 export default {
  props: {
@@ -6,6 +27,11 @@ export default {
      type: Object,
      default: () => {},
    },
+    showButton: Boolean,
+    duration: {
+      type: [String, Number],
+      default: 3000,
+    },
  },
  data() {
    return {
@@ -16,24 +42,3 @@ export default {
  methods: {},
 };
 </script>
-
-<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-sm font-medium text-white dark:text-white">
-        {{ message }}
-      </div>
-      <div v-if="action">
-        <router-link
-          v-if="action.type == 'link'"
-          :to="action.to"
-          class="font-medium cursor-pointer select-none text-woot-500 dark:text-woot-500 hover:text-woot-600 dark:hover:text-woot-600"
-        >
-          {{ action.message }}
-        </router-link>
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,10 +1,27 @@
+<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]"
+  >
+    <woot-snackbar
+      v-for="snackMessage in snackMessages"
+      :key="snackMessage.key"
+      :message="snackMessage.message"
+      :action="snackMessage.action"
+    />
+  </transition-group>
+</template>
+
 <script>
 import WootSnackbar from './Snackbar.vue';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: {
    WootSnackbar,
  },
+  mixins: [alertMixin],
  props: {
    duration: {
      type: Number,
@@ -25,7 +42,7 @@ export default {
    this.$emitter.off('newToastMessage', this.onNewToastMessage);
  },
  methods: {
-    onNewToastMessage({ message, action }) {
+    onNewToastMessage(message, action) {
      this.snackMessages.push({
        key: new Date().getTime(),
        message,
@@ -38,18 +55,3 @@ export default {
  },
 };
 </script>
-
-<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]"
-  >
-    <WootSnackbar
-      v-for="snackMessage in snackMessages"
-      :key="snackMessage.key"
-      :message="snackMessage.message"
-      :action="snackMessage.action"
-    />
-  </transition-group>
-</template>
@@ -1,8 +1,19 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
+
 <script>
-import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useAccount } from 'dashboard/composables/useAccount';
 import Banner from 'dashboard/components/ui/Banner.vue';
+import { mapGetters } from 'vuex';
+import adminMixin from 'dashboard/mixins/isAdmin';
+import accountMixin from 'dashboard/mixins/account';

 const EMPTY_SUBSCRIPTION_INFO = {
  status: null,
@@ -11,16 +22,7 @@ const EMPTY_SUBSCRIPTION_INFO = {

 export default {
  components: { Banner },
-  setup() {
-    const { isAdmin } = useAdmin();
-
-    const { accountId } = useAccount();
-
-    return {
-      accountId,
-      isAdmin,
-    };
-  },
+  mixins: [adminMixin, accountMixin],
  computed: {
    ...mapGetters({
      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
@@ -78,14 +80,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <Banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
@@ -1,10 +1,24 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    action-button-icon="mail"
+    has-action-button
+    @click="resendVerificationEmail"
+  />
+</template>
+
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import accountMixin from 'dashboard/mixins/account';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
  components: { Banner },
+  mixins: [accountMixin, alertMixin],
  computed: {
    ...mapGetters({
      currentUser: 'getCurrentUser',
@@ -22,20 +36,8 @@ export default {
  methods: {
    resendVerificationEmail() {
      this.$store.dispatch('resendConfirmation');
-      useAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
+      this.showAlert(this.$t('APP_GLOBAL.EMAIL_VERIFICATION_SENT'));
    },
  },
 };
 </script>
-
-<template>
-  <Banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    action-button-icon="mail"
-    has-action-button
-    @click="resendVerificationEmail"
-  />
-</template>
@@ -1,22 +1,28 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="primary"
+    :banner-message="bannerMessage"
+    href-link="https://github.com/chatwoot/chatwoot/releases"
+    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
+    has-close-button
+    @close="dismissUpdateBanner"
+  />
+</template>
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
+import adminMixin from 'dashboard/mixins/isAdmin';
 import { hasAnUpdateAvailable } from './versionCheckHelper';

 export default {
  components: { Banner },
+  mixins: [adminMixin],
  props: {
    latestChatwootVersion: { type: String, default: '' },
  },
-  setup() {
-    const { isAdmin } = useAdmin();
-    return {
-      isAdmin,
-    };
-  },
  data() {
    return { userDismissedBanner: false };
  },
@@ -66,15 +72,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <Banner
-    v-if="shouldShowBanner"
-    color-scheme="primary"
-    :banner-message="bannerMessage"
-    href-link="https://github.com/chatwoot/chatwoot/releases"
-    :href-link-text="$t('GENERAL_SETTINGS.LEARN_MORE')"
-    has-close-button
-    @close="dismissUpdateBanner"
-  />
-</template>
@@ -1,17 +1,24 @@
+<template>
+  <banner
+    v-if="shouldShowBanner"
+    color-scheme="alert"
+    :banner-message="bannerMessage"
+    :action-button-label="actionButtonMessage"
+    has-action-button
+    @click="routeToBilling"
+  />
+</template>
+
 <script>
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { mapGetters } from 'vuex';
-import { useAccount } from 'dashboard/composables/useAccount';
+import adminMixin from 'dashboard/mixins/isAdmin';
+import accountMixin from 'dashboard/mixins/account';
 import { differenceInDays } from 'date-fns';

 export default {
  components: { Banner },
-  setup() {
-    const { accountId } = useAccount();
-    return {
-      accountId,
-    };
-  },
+  mixins: [adminMixin, accountMixin],
  data() {
    return { conversationMeta: {} };
  },
@@ -80,14 +87,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <Banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @click="routeToBilling"
-  />
-</template>
@@ -1,3 +1,8 @@
+<template>
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
+    <slot />
+  </kbd>
+</template>
 <script>
 export default {
  props: {
@@ -9,12 +14,6 @@ export default {
 };
 </script>

-<template>
-  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
-    <slot />
-  </kbd>
-</template>
-
 <style lang="scss">
 kbd.hotkey {
  @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
@@ -1,10 +1,18 @@
-<script>
-import Spinner from 'shared/components/Spinner.vue';
+<template>
+  <button :type="type" class="button nice" :class="variant" @click="onClick">
+    <fluent-icon
+      v-if="!isLoading && icon"
+      class="icon"
+      :class="buttonIconClass"
+      :icon="icon"
+    />
+    <spinner v-if="isLoading" />
+    <slot />
+  </button>
+</template>

+<script>
 export default {
-  components: {
-    Spinner,
-  },
  props: {
    isLoading: {
      type: Boolean,
@@ -34,16 +42,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
-    <fluent-icon
-      v-if="!isLoading && icon"
-      class="icon"
-      :class="buttonIconClass"
-      :icon="icon"
-    />
-    <Spinner v-if="isLoading" />
-    <slot />
-  </button>
-</template>
@@ -1,3 +1,17 @@
+<template>
+  <button
+    :type="type"
+    data-testid="submit_button"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
+    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
+    <span>{{ buttonText }}</span>
+    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
+  </button>
+</template>
+
 <script>
 import Spinner from 'shared/components/Spinner.vue';

@@ -47,21 +61,6 @@ export default {
  },
 };
 </script>
-
-<template>
-  <button
-    :type="type"
-    data-testid="submit_button"
-    :disabled="disabled"
-    :class="computedClass"
-    @click="onClick"
-  >
-    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
-    <span>{{ buttonText }}</span>
-    <Spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
-  </button>
-</template>
-
 <style lang="scss" scoped>
 button:disabled {
  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
@@ -1,141 +1,3 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useAlert } from 'dashboard/composables';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useStore, useStoreGetters } from 'dashboard/composables/store';
-import { useEmitter } from 'dashboard/composables/emitter';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-
-import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import wootConstants from 'dashboard/constants/globals';
-import {
-  CMD_REOPEN_CONVERSATION,
-  CMD_RESOLVE_CONVERSATION,
-} from 'dashboard/helper/commandbar/events';
-
-const store = useStore();
-const getters = useStoreGetters();
-const { t } = useI18n();
-
-const arrowDownButtonRef = ref(null);
-const isLoading = ref(false);
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-const closeDropdown = () => toggleDropdown(false);
-const openDropdown = () => toggleDropdown(true);
-
-const currentChat = computed(() => getters.getSelectedChat.value);
-
-const isOpen = computed(
-  () => currentChat.value.status === wootConstants.STATUS_TYPE.OPEN
-);
-const isPending = computed(
-  () => currentChat.value.status === wootConstants.STATUS_TYPE.PENDING
-);
-const isResolved = computed(
-  () => currentChat.value.status === wootConstants.STATUS_TYPE.RESOLVED
-);
-const isSnoozed = computed(
-  () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
-);
-
-const buttonClass = computed(() => {
-  if (isPending.value) return 'primary';
-  if (isOpen.value) return 'success';
-  if (isResolved.value) return 'warning';
-  return '';
-});
-
-const showAdditionalActions = computed(
-  () => !isPending.value && !isSnoozed.value
-);
-
-const showOpenButton = computed(() => {
-  return isPending.value || isSnoozed.value;
-});
-
-const getConversationParams = () => {
-  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,
-  };
-};
-
-const openSnoozeModal = () => {
-  const ninja = document.querySelector('ninja-keys');
-  ninja.open({ parent: 'snooze_conversation' });
-};
-
-const toggleStatus = (status, snoozedUntil) => {
-  closeDropdown();
-  isLoading.value = true;
-  store
-    .dispatch('toggleStatus', {
-      conversationId: currentChat.value.id,
-      status,
-      snoozedUntil,
-    })
-    .then(() => {
-      useAlert(t('CONVERSATION.CHANGE_STATUS'));
-      isLoading.value = false;
-    });
-};
-
-const onCmdOpenConversation = () => {
-  toggleStatus(wootConstants.STATUS_TYPE.OPEN);
-};
-
-const onCmdResolveConversation = () => {
-  toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-};
-
-const keyboardEvents = {
-  'Alt+KeyM': {
-    action: () => arrowDownButtonRef.value?.$el.click(),
-    allowOnFocusedInput: true,
-  },
-  'Alt+KeyE': {
-    action: async () => {
-      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-    },
-  },
-  '$mod+Alt+KeyE': {
-    action: async event => {
-      const { all, activeIndex, lastIndex } = getConversationParams();
-      await toggleStatus(wootConstants.STATUS_TYPE.RESOLVED);
-
-      if (activeIndex < lastIndex) {
-        all[activeIndex + 1].click();
-      } else if (all.length > 1) {
-        all[0].click();
-        document.querySelector('.conversations-list').scrollTop = 0;
-      }
-      event.preventDefault();
-    },
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
-
-useEmitter(CMD_REOPEN_CONVERSATION, onCmdOpenConversation);
-useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
-</script>
-
 <template>
  <div class="relative flex items-center justify-end resolve-actions">
    <div class="button-group">
@@ -159,7 +21,7 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
      >
-        {{ t('CONVERSATION.HEADER.REOPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.REOPEN_ACTION') }}
      </woot-button>
      <woot-button
        v-else-if="showOpenButton"
@@ -169,11 +31,11 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
        :is-loading="isLoading"
        @click="onCmdOpenConversation"
      >
-        {{ t('CONVERSATION.HEADER.OPEN_ACTION') }}
+        {{ $t('CONVERSATION.HEADER.OPEN_ACTION') }}
      </woot-button>
      <woot-button
        v-if="showAdditionalActions"
-        ref="arrowDownButtonRef"
+        ref="arrowDownButton"
        :color-scheme="buttonClass"
        :disabled="isLoading"
        icon="chevron-down"
@@ -184,10 +46,10 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
    <div
      v-if="showActionsDropdown"
      v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem]"
+      class="dropdown-pane dropdown-pane--open"
    >
-      <WootDropdownMenu class="mb-0">
-        <WootDropdownItem v-if="!isPending">
+      <woot-dropdown-menu class="mb-0">
+        <woot-dropdown-item v-if="!isPending">
          <woot-button
            variant="clear"
            color-scheme="secondary"
@@ -195,27 +57,173 @@ useEmitter(CMD_RESOLVE_CONVERSATION, onCmdResolveConversation);
            icon="snooze"
            @click="() => openSnoozeModal()"
          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.SNOOZE_UNTIL') }}
          </woot-button>
-        </WootDropdownItem>
-        <WootDropdownItem v-if="!isPending">
+        </woot-dropdown-item>
+        <woot-dropdown-item v-if="!isPending">
          <woot-button
            variant="clear"
            color-scheme="secondary"
            size="small"
            icon="book-clock"
-            @click="() => toggleStatus(wootConstants.STATUS_TYPE.PENDING)"
+            @click="() => toggleStatus(STATUS_TYPE.PENDING)"
          >
-            {{ t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
+            {{ $t('CONVERSATION.RESOLVE_DROPDOWN.MARK_PENDING') }}
          </woot-button>
-        </WootDropdownItem>
-      </WootDropdownMenu>
+        </woot-dropdown-item>
+      </woot-dropdown-menu>
    </div>
  </div>
 </template>

+<script>
+import { mapGetters } from 'vuex';
+import alertMixin from 'shared/mixins/alertMixin';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+
+import wootConstants from 'dashboard/constants/globals';
+import {
+  CMD_REOPEN_CONVERSATION,
+  CMD_RESOLVE_CONVERSATION,
+} from '../../routes/dashboard/commands/commandBarBusEvents';
+
+export default {
+  components: {
+    WootDropdownItem,
+    WootDropdownMenu,
+  },
+  mixins: [alertMixin, keyboardEventListenerMixins],
+  props: { conversationId: { type: [String, Number], required: true } },
+  data() {
+    return {
+      isLoading: false,
+      showActionsDropdown: false,
+      STATUS_TYPE: wootConstants.STATUS_TYPE,
+    };
+  },
+  computed: {
+    ...mapGetters({ currentChat: 'getSelectedChat' }),
+    isOpen() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN;
+    },
+    isPending() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.PENDING;
+    },
+    isResolved() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.RESOLVED;
+    },
+    isSnoozed() {
+      return this.currentChat.status === wootConstants.STATUS_TYPE.SNOOZED;
+    },
+    buttonClass() {
+      if (this.isPending) return 'primary';
+      if (this.isOpen) return 'success';
+      if (this.isResolved) return 'warning';
+      return '';
+    },
+    showAdditionalActions() {
+      return !this.isPending && !this.isSnoozed;
+    },
+  },
+  mounted() {
+    this.$emitter.on(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    this.$emitter.on(CMD_RESOLVE_CONVERSATION, this.onCmdResolveConversation);
+  },
+  destroyed() {
+    this.$emitter.off(CMD_REOPEN_CONVERSATION, this.onCmdOpenConversation);
+    this.$emitter.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() {
+      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
+      }
+    },
+    onCmdOpenConversation() {
+      this.toggleStatus(this.STATUS_TYPE.OPEN);
+    },
+    onCmdResolveConversation() {
+      this.toggleStatus(this.STATUS_TYPE.RESOLVED);
+    },
+    showOpenButton() {
+      return this.isResolved || this.isSnoozed;
+    },
+    closeDropdown() {
+      this.showActionsDropdown = false;
+    },
+    openDropdown() {
+      this.showActionsDropdown = true;
+    },
+    toggleStatus(status, snoozedUntil) {
+      this.closeDropdown();
+      this.isLoading = true;
+      this.$store
+        .dispatch('toggleStatus', {
+          conversationId: this.currentChat.id,
+          status,
+          snoozedUntil,
+        })
+        .then(() => {
+          this.showAlert(this.$t('CONVERSATION.CHANGE_STATUS'));
+          this.isLoading = false;
+        });
+    },
+    openSnoozeModal() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'snooze_conversation' });
+    },
+  },
+};
+</script>
 <style lang="scss" scoped>
 .dropdown-pane {
+  @apply left-auto top-[2.625rem] mt-0.5 right-0 max-w-[12.5rem] min-w-[9.75rem];
+
  .dropdown-menu__item {
    @apply mb-0;
  }
@@ -1,6 +1,53 @@
+<template>
+  <woot-dropdown-menu>
+    <woot-dropdown-header :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
+    <woot-dropdown-item
+      v-for="status in availabilityStatuses"
+      :key="status.value"
+      class="flex items-baseline"
+    >
+      <woot-button
+        size="small"
+        :color-scheme="status.disabled ? '' : 'secondary'"
+        :variant="status.disabled ? 'smooth' : 'clear'"
+        class-names="status-change--dropdown-button"
+        @click="changeAvailabilityStatus(status.value)"
+      >
+        <availability-status-badge :status="status.value" />
+        {{ status.label }}
+      </woot-button>
+    </woot-dropdown-item>
+    <woot-dropdown-divider />
+    <woot-dropdown-item class="m-0 flex items-center justify-between p-2">
+      <div class="flex items-center">
+        <fluent-icon
+          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
+          icon="info"
+          size="14"
+          class="mt-px"
+        />
+
+        <span
+          class="my-0 mx-1 text-xs font-medium text-slate-600 dark:text-slate-100"
+        >
+          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
+        </span>
+      </div>
+
+      <woot-switch
+        size="small"
+        class="mt-px mx-1 mb-0"
+        :value="currentUserAutoOffline"
+        @input="updateAutoOffline"
+      />
+    </woot-dropdown-item>
+    <woot-dropdown-divider />
+  </woot-dropdown-menu>
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import WootDropdownHeader from 'shared/components/ui/dropdown/DropdownHeader.vue';
@@ -18,6 +65,9 @@ export default {
    WootDropdownItem,
    AvailabilityStatusBadge,
  },
+
+  mixins: [alertMixin],
+
  data() {
    return {
      isStatusMenuOpened: false,
@@ -79,7 +129,7 @@ export default {
          account_id: this.currentAccountId,
        });
      } catch (error) {
-        useAlert(
+        this.showAlert(
          this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR')
        );
      } finally {
@@ -89,50 +139,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <WootDropdownMenu>
-    <WootDropdownHeader :title="$t('SIDEBAR.SET_AVAILABILITY_TITLE')" />
-    <WootDropdownItem
-      v-for="status in availabilityStatuses"
-      :key="status.value"
-      class="flex items-baseline"
-    >
-      <woot-button
-        size="small"
-        :color-scheme="status.disabled ? '' : 'secondary'"
-        :variant="status.disabled ? 'smooth' : 'clear'"
-        class-names="status-change--dropdown-button"
-        @click="changeAvailabilityStatus(status.value)"
-      >
-        <AvailabilityStatusBadge :status="status.value" />
-        {{ status.label }}
-      </woot-button>
-    </WootDropdownItem>
-    <WootDropdownDivider />
-    <WootDropdownItem class="flex items-center justify-between p-2 m-0">
-      <div class="flex items-center">
-        <fluent-icon
-          v-tooltip.right-start="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_TEXT')"
-          icon="info"
-          size="14"
-          class="mt-px"
-        />
-
-        <span
-          class="mx-1 my-0 text-xs font-medium text-slate-600 dark:text-slate-100"
-        >
-          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
-        </span>
-      </div>
-
-      <woot-switch
-        size="small"
-        class="mx-1 mt-px mb-0"
-        :value="currentUserAutoOffline"
-        @input="updateAutoOffline"
-      />
-    </WootDropdownItem>
-    <WootDropdownDivider />
-  </WootDropdownMenu>
-</template>
@@ -1,22 +1,51 @@
+<template>
+  <aside class="flex h-full">
+    <primary-sidebar
+      :logo-source="globalConfig.logoThumbnail"
+      :installation-name="globalConfig.installationName"
+      :is-a-custom-branded-instance="isACustomBrandedInstance"
+      :account-id="accountId"
+      :menu-items="primaryMenuItems"
+      :active-menu-item="activePrimaryMenu.key"
+      @toggle-accounts="toggleAccountModal"
+      @key-shortcut-modal="toggleKeyShortcutModal"
+      @open-notification-panel="openNotificationPanel"
+    />
+    <secondary-sidebar
+      v-if="showSecondarySidebar"
+      :class="sidebarClassName"
+      :account-id="accountId"
+      :inboxes="inboxes"
+      :labels="labels"
+      :teams="teams"
+      :custom-views="customViews"
+      :menu-config="activeSecondaryMenu"
+      :current-user="currentUser"
+      :is-on-chatwoot-cloud="isOnChatwootCloud"
+      @add-label="showAddLabelPopup"
+      @toggle-accounts="toggleAccountModal"
+    />
+  </aside>
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
+import adminMixin from '../../mixins/isAdmin';
 import { getSidebarItems } from './config/default-sidebar';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useRoute, useRouter } from 'dashboard/composables/route';
+import alertMixin from 'shared/mixins/alertMixin';

 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
-import { routesWithPermissions } from '../../routes';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../helper/permissionsHelper';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import router, { routesWithPermissions } from '../../routes';
+import { hasPermissions } from '../../helper/permissionsHelper';

 export default {
  components: {
    PrimarySidebar,
    SecondarySidebar,
  },
+  mixins: [adminMixin, alertMixin, keyboardEventListenerMixins],
  props: {
    showSecondarySidebar: {
      type: Boolean,
@@ -27,50 +56,6 @@ export default {
      default: '',
    },
  },
-  setup(props, { emit }) {
-    const route = useRoute();
-    const router = useRouter();
-
-    const toggleKeyShortcutModal = () => {
-      emit('openKeyShortcutModal');
-    };
-    const closeKeyShortcutModal = () => {
-      emit('closeKeyShortcutModal');
-    };
-    const isCurrentRouteSameAsNavigation = routeName => {
-      return route.name === routeName;
-    };
-    const navigateToRoute = routeName => {
-      if (!isCurrentRouteSameAsNavigation(routeName)) {
-        router.push({ name: routeName });
-      }
-    };
-    const keyboardEvents = {
-      '$mod+Slash': {
-        action: toggleKeyShortcutModal,
-      },
-      '$mod+Escape': {
-        action: closeKeyShortcutModal,
-      },
-      'Alt+KeyC': {
-        action: () => navigateToRoute('home'),
-      },
-      'Alt+KeyV': {
-        action: () => navigateToRoute('contacts_dashboard'),
-      },
-      'Alt+KeyR': {
-        action: () => navigateToRoute('account_overview_reports'),
-      },
-      'Alt+KeyS': {
-        action: () => navigateToRoute('agent_list'),
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-
-    return {
-      toggleKeyShortcutModal,
-    };
-  },
  data() {
    return {
      showOptionsMenu: false,
@@ -80,6 +65,7 @@ export default {
  computed: {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
+      currentRole: 'getCurrentRole',
      currentUser: 'getCurrentUser',
      globalConfig: 'globalConfig/get',
      inboxes: 'inboxes/getInboxes',
@@ -113,10 +99,7 @@ export default {
      return getSidebarItems(this.accountId);
    },
    primaryMenuItems() {
-      const userPermissions = getUserPermissions(
-        this.currentUser,
-        this.accountId
-      );
+      const userPermissions = this.currentUser.permissions;
      const menuItems = this.sideMenuConfig.primaryMenu;
      return menuItems.filter(menuItem => {
        const isAvailableForTheUser = hasPermissions(
@@ -181,48 +164,50 @@ export default {
        this.$store.dispatch('customViews/get', this.activeCustomView);
      }
    },
+    toggleKeyShortcutModal() {
+      this.$emit('open-key-shortcut-modal');
+    },
+    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 });
+      }
+    },
+    isCurrentRouteSameAsNavigation(routeName) {
+      return this.$route.name === routeName;
+    },
    toggleSupportChatWindow() {
      window.$chatwoot.toggle();
    },
    toggleAccountModal() {
-      this.$emit('toggleAccountModal');
+      this.$emit('toggle-account-modal');
    },
    showAddLabelPopup() {
-      this.$emit('showAddLabelPopup');
+      this.$emit('show-add-label-popup');
    },
    openNotificationPanel() {
-      this.$emit('openNotificationPanel');
+      this.$emit('open-notification-panel');
    },
  },
 };
 </script>
-
-<template>
-  <aside class="flex h-full">
-    <PrimarySidebar
-      :logo-source="globalConfig.logoThumbnail"
-      :installation-name="globalConfig.installationName"
-      :is-a-custom-branded-instance="isACustomBrandedInstance"
-      :account-id="accountId"
-      :menu-items="primaryMenuItems"
-      :active-menu-item="activePrimaryMenu.key"
-      @toggleAccounts="toggleAccountModal"
-      @openKeyShortcutModal="toggleKeyShortcutModal"
-      @openNotificationPanel="openNotificationPanel"
-    />
-    <SecondarySidebar
-      v-if="showSecondarySidebar"
-      :class="sidebarClassName"
-      :account-id="accountId"
-      :inboxes="inboxes"
-      :labels="labels"
-      :teams="teams"
-      :custom-views="customViews"
-      :menu-config="activeSecondaryMenu"
-      :current-user="currentUser"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @addLabel="showAddLabelPopup"
-      @toggleAccounts="toggleAccountModal"
-    />
-  </aside>
-</template>
@@ -17,14 +17,6 @@ const primaryMenuItems = accountId => [
    toState: frontendURL(`accounts/${accountId}/dashboard`),
    toStateName: 'home',
  },
-  {
-    icon: 'captain',
-    key: 'captain',
-    label: 'CAPTAIN',
-    featureFlag: FEATURE_FLAGS.CAPTAIN,
-    toState: frontendURL(`accounts/${accountId}/captain`),
-    toStateName: 'captain',
-  },
  {
    icon: 'book-contacts',
    key: 'contacts',
@@ -163,6 +163,17 @@ const settings = accountId => ({
        permissions: ['administrator'],
      },
      toState: frontendURL(`accounts/${accountId}/settings/integrations`),
+      toStateName: 'settings_integrations',
+      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
+    },
+    {
+      icon: 'star-emphasis',
+      label: 'APPLICATIONS',
+      hasSubMenu: false,
+      meta: {
+        permissions: ['administrator'],
+      },
+      toState: frontendURL(`accounts/${accountId}/settings/applications`),
      toStateName: 'settings_applications',
      featureFlag: FEATURE_FLAGS.INTEGRATIONS,
    },
@@ -173,10 +184,11 @@ const settings = accountId => ({
      meta: {
        permissions: ['administrator'],
      },
-      toState: frontendURL(`accounts/${accountId}/settings/audit-logs/list`),
+      toState: frontendURL(`accounts/${accountId}/settings/audit-log/list`),
      toStateName: 'auditlogs_list',
      isEnterpriseOnly: true,
      featureFlag: FEATURE_FLAGS.AUDIT_LOGS,
+      beta: true,
    },
    {
      icon: 'document-list-clock',
@@ -1,3 +1,35 @@
+<template>
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
+    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
+    <p
+      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+    >
+      {{ account.name }}
+    </p>
+    <transition name="fade">
+      <div
+        v-if="showSwitchButton"
+        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
+      >
+        <div class="my-0 mx-2">
+          <woot-button
+            variant="clear"
+            size="tiny"
+            icon="arrow-swap"
+            @click="$emit('toggle-accounts')"
+          >
+            {{ $t('SIDEBAR.SWITCH') }}
+          </woot-button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
 <script>
 import { mapGetters } from 'vuex';

@@ -24,40 +56,6 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div
-    v-if="showShowCurrentAccountContext"
-    class="relative px-2 py-2 mt-2 text-xs border rounded-md cursor-pointer text-slate-700 dark:text-slate-200 border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800"
-    @mouseover="setShowSwitch"
-    @mouseleave="resetShowSwitch"
-  >
-    {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p
-      class="mb-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap text-slate-800 dark:text-slate-100"
-    >
-      {{ account.name }}
-    </p>
-    <transition name="fade">
-      <div
-        v-if="showSwitchButton"
-        class="absolute top-0 right-0 flex items-center justify-end w-full h-full rounded-md ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark"
-      >
-        <div class="mx-2 my-0">
-          <woot-button
-            variant="clear"
-            size="tiny"
-            icon="arrow-swap"
-            @click="$emit('toggleAccounts')"
-          >
-            {{ $t('SIDEBAR.SWITCH') }}
-          </woot-button>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
 <style scoped>
@tailwind components;
@layer components {
@@ -1,3 +1,62 @@
+<template>
+  <woot-modal
+    :show="showAccountModal"
+    :on-close="() => $emit('close-account-modal')"
+  >
+    <woot-modal-header
+      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
+      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
+    />
+    <div class="px-8 py-4">
+      <div
+        v-for="account in currentUser.accounts"
+        :id="`account-${account.id}`"
+        :key="account.id"
+        class="pt-0 pb-0"
+      >
+        <button
+          class="flex justify-between items-center expanded clear link cursor-pointer px-4 py-3 w-full rounded-lg hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
+          @click="onChangeAccount(account.id)"
+        >
+          <span class="w-full">
+            <label :for="account.name" class="text-left rtl:text-right">
+              <div
+                class="text-slate-700 text-lg dark:text-slate-100 font-medium hover:underline-offset-4 leading-5"
+              >
+                {{ account.name }}
+              </div>
+              <div
+                class="text-slate-500 text-xs dark:text-slate-500 font-medium hover:underline-offset-4"
+              >
+                {{ account.role }}
+              </div>
+            </label>
+          </span>
+          <fluent-icon
+            v-show="account.id === accountId"
+            class="text-slate-800 dark:text-slate-100"
+            icon="checkmark-circle"
+            type="solid"
+            size="24"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div
+      v-if="globalConfig.createNewAccountFromDashboard"
+      class="flex justify-end items-center px-8 pb-8 pt-4 gap-2"
+    >
+      <button
+        class="button success large expanded nice w-full"
+        @click="$emit('show-create-account-modal')"
+      >
+        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+      </button>
+    </div>
+  </woot-modal>
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
 export default {
@@ -23,62 +82,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <woot-modal
-    :show="showAccountModal"
-    :on-close="() => $emit('closeAccountModal')"
-  >
-    <woot-modal-header
-      :header-title="$t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS')"
-      :header-content="$t('SIDEBAR_ITEMS.SELECTOR_SUBTITLE')"
-    />
-    <div class="px-8 py-4">
-      <div
-        v-for="account in currentUser.accounts"
-        :id="`account-${account.id}`"
-        :key="account.id"
-        class="pt-0 pb-0"
-      >
-        <button
-          class="flex items-center justify-between w-full px-4 py-3 rounded-lg cursor-pointer expanded clear link hover:underline hover:bg-slate-25 dark:hover:bg-slate-900"
-          @click="onChangeAccount(account.id)"
-        >
-          <span class="w-full">
-            <label :for="account.name" class="text-left rtl:text-right">
-              <div
-                class="text-lg font-medium leading-5 text-slate-700 dark:text-slate-100 hover:underline-offset-4"
-              >
-                {{ account.name }}
-              </div>
-              <div
-                class="text-xs font-medium text-slate-500 dark:text-slate-500 hover:underline-offset-4"
-              >
-                {{ account.role }}
-              </div>
-            </label>
-          </span>
-          <fluent-icon
-            v-show="account.id === accountId"
-            class="text-slate-800 dark:text-slate-100"
-            icon="checkmark-circle"
-            type="solid"
-            size="24"
-          />
-        </button>
-      </div>
-    </div>
-
-    <div
-      v-if="globalConfig.createNewAccountFromDashboard"
-      class="flex items-center justify-end gap-2 px-8 pt-4 pb-8"
-    >
-      <button
-        class="w-full button success large expanded nice"
-        @click="$emit('showCreateAccountModal')"
-      >
-        {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
-      </button>
-    </div>
-  </woot-modal>
-</template>
@@ -1,10 +1,60 @@
+<template>
+  <woot-modal
+    :show="show"
+    :on-close="() => $emit('close-account-create-modal')"
+  >
+    <div class="h-auto overflow-auto flex flex-col">
+      <woot-modal-header
+        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+      />
+      <div v-if="!hasAccounts" class="text-sm mt-6 mx-8 mb-0">
+        <div class="items-center rounded-md flex alert">
+          <div class="ml-1 mr-3">
+            <fluent-icon icon="warning" />
+          </div>
+          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
+        </div>
+      </div>
+
+      <form class="flex flex-col w-full" @submit.prevent="addAccount">
+        <div class="w-full">
+          <label :class="{ error: $v.accountName.$error }">
+            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+            <input
+              v-model.trim="accountName"
+              type="text"
+              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+              @input="$v.accountName.$touch"
+            />
+          </label>
+        </div>
+        <div class="w-full">
+          <div class="w-full">
+            <woot-submit-button
+              :disabled="
+                $v.accountName.$invalid ||
+                $v.accountName.$invalid ||
+                uiFlags.isCreating
+              "
+              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+              :loading="uiFlags.isCreating"
+              button-class="large expanded"
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  </woot-modal>
+</template>
+
 <script>
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
+import { required, minLength } from 'vuelidate/lib/validators';
 import { mapGetters } from 'vuex';
-import { useAlert } from 'dashboard/composables';
+import alertMixin from 'shared/mixins/alertMixin';

 export default {
+  mixins: [alertMixin],
  props: {
    show: {
      type: Boolean,
@@ -15,9 +65,6 @@ export default {
      default: true,
    },
  },
-  setup() {
-    return { v$: useVuelidate() };
-  },
  data() {
    return {
      accountName: '',
@@ -40,64 +87,17 @@ export default {
        const account_id = await this.$store.dispatch('accounts/create', {
          account_name: this.accountName,
        });
-        this.$emit('closeAccountCreateModal');
-        useAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        this.$emit('close-account-create-modal');
+        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
        window.location = `/app/accounts/${account_id}/dashboard`;
      } catch (error) {
        if (error.response.status === 422) {
-          useAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
        } else {
-          useAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
        }
      }
    },
  },
 };
 </script>
-
-<template>
-  <woot-modal :show="show" :on-close="() => $emit('closeAccountCreateModal')">
-    <div class="flex flex-col h-auto overflow-auto">
-      <woot-modal-header
-        :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
-        :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
-      />
-      <div v-if="!hasAccounts" class="mx-8 mt-6 mb-0 text-sm">
-        <div class="flex items-center rounded-md alert">
-          <div class="ml-1 mr-3">
-            <fluent-icon icon="warning" />
-          </div>
-          {{ $t('CREATE_ACCOUNT.NO_ACCOUNT_WARNING') }}
-        </div>
-      </div>
-
-      <form class="flex flex-col w-full" @submit.prevent="addAccount">
-        <div class="w-full">
-          <label :class="{ error: v$.accountName.$error }">
-            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
-            <input
-              v-model.trim="accountName"
-              type="text"
-              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="v$.accountName.$touch"
-            />
-          </label>
-        </div>
-        <div class="w-full">
-          <div class="w-full">
-            <woot-submit-button
-              :disabled="
-                v$.accountName.$invalid ||
-                v$.accountName.$invalid ||
-                uiFlags.isCreating
-              "
-              :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
-              :loading="uiFlags.isCreating"
-              button-class="large expanded"
-            />
-          </div>
-        </div>
-      </form>
-    </div>
-  </woot-modal>
-</template>
@@ -1,3 +1,19 @@
+<template>
+  <woot-button
+    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
+    variant="link"
+    class="items-center flex rounded-full"
+    @click="handleClick"
+  >
+    <thumbnail
+      :src="currentUser.avatar_url"
+      :username="currentUser.name"
+      :status="statusOfAgent"
+      should-show-status-always
+      size="32px"
+    />
+  </woot-button>
+</template>
 <script>
 import { mapGetters } from 'vuex';
 import Thumbnail from '../../widgets/Thumbnail.vue';
@@ -17,25 +33,8 @@ export default {
  },
  methods: {
    handleClick() {
-      this.$emit('toggleMenu');
+      this.$emit('toggle-menu');
    },
  },
 };
 </script>
-
-<template>
-  <woot-button
-    v-tooltip.right="$t(`SIDEBAR.PROFILE_SETTINGS`)"
-    variant="link"
-    class="flex items-center rounded-full"
-    @click="handleClick"
-  >
-    <Thumbnail
-      :src="currentUser.avatar_url"
-      :username="currentUser.name"
-      :status="statusOfAgent"
-      should-show-status-always
-      size="32px"
-    />
-  </woot-button>
-</template>
@@ -1,3 +1,10 @@
+<template>
+  <div class="w-8 h-8">
+    <router-link :to="dashboardPath" replace>
+      <img :src="source" :alt="name" />
+    </router-link>
+  </div>
+</template>
 <script>
 import { frontendURL } from 'dashboard/helper/URLHelper';

@@ -23,11 +30,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div class="w-8 h-8">
-    <router-link :to="dashboardPath" replace>
-      <img :src="source" :alt="name" />
-    </router-link>
-  </div>
-</template>
@@ -1,38 +1,7 @@
-<script>
-import { mapGetters } from 'vuex';
-
-export default {
-  computed: {
-    ...mapGetters({
-      notificationMetadata: 'notifications/getMeta',
-    }),
-    unreadCount() {
-      if (!this.notificationMetadata.unreadCount) {
-        return '';
-      }
-
-      return this.notificationMetadata.unreadCount < 100
-        ? `${this.notificationMetadata.unreadCount}`
-        : '99+';
-    },
-    isNotificationPanelActive() {
-      return this.$route.name === 'notifications_index';
-    },
-  },
-  methods: {
-    openNotificationPanel() {
-      if (this.$route.name !== 'notifications_index') {
-        this.$emit('openNotificationPanel');
-      }
-    },
-  },
-};
-</script>
-
 <template>
  <div class="mb-4">
    <button
-      class="relative flex items-center justify-center w-10 h-10 p-0 my-2 rounded-lg text-slate-600 dark:text-slate-100 hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600"
+      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="{
        'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
          isNotificationPanelActive,
@@ -54,3 +23,34 @@ export default {
    </button>
  </div>
 </template>
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  computed: {
+    ...mapGetters({
+      accountId: 'getCurrentAccountId',
+      notificationMetadata: 'notifications/getMeta',
+    }),
+    unreadCount() {
+      if (!this.notificationMetadata.unreadCount) {
+        return '';
+      }
+
+      return this.notificationMetadata.unreadCount < 100
+        ? `${this.notificationMetadata.unreadCount}`
+        : '99+';
+    },
+    isNotificationPanelActive() {
+      return this.$route.name === 'notifications_index';
+    },
+  },
+  methods: {
+    openNotificationPanel() {
+      if (this.$route.name !== 'notifications_index') {
+        this.$emit('open-notification-panel');
+      }
+    },
+  },
+};
+</script>
@@ -1,3 +1,110 @@
+<template>
+  <transition name="menu-slide">
+    <div
+      v-if="show"
+      v-on-clickaway="onClickAway"
+      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      :class="{ 'block visible': show }"
+    >
+      <availability-status />
+      <woot-dropdown-menu>
+        <woot-dropdown-item v-if="showChangeAccountOption">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="arrow-swap"
+            @click="$emit('toggle-accounts')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
+          </woot-button>
+        </woot-dropdown-item>
+        <woot-dropdown-item v-if="globalConfig.chatwootInboxToken">
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="chat-help"
+            @click="$emit('show-support-chat-window')"
+          >
+            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
+          </woot-button>
+        </woot-dropdown-item>
+        <woot-dropdown-item>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="keyboard"
+            @click="handleKeyboardHelpClick"
+          >
+            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
+          </woot-button>
+        </woot-dropdown-item>
+        <woot-dropdown-item>
+          <router-link
+            v-slot="{ href, isActive, navigate }"
+            :to="`/app/accounts/${accountId}/profile/settings`"
+            custom
+          >
+            <a
+              :href="href"
+              class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+              :class="{ 'is-active': isActive }"
+              @click="e => handleProfileSettingClick(e, navigate)"
+            >
+              <fluent-icon icon="person" size="14" class="icon icon--font" />
+              <span class="button__content">
+                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
+              </span>
+            </a>
+          </router-link>
+        </woot-dropdown-item>
+        <woot-dropdown-item>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </woot-dropdown-item>
+        <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
+          <a
+            href="/super_admin"
+            class="button small clear secondary bg-white dark:bg-slate-800 h-8"
+            target="_blank"
+            rel="noopener nofollow noreferrer"
+            @click="$emit('close')"
+          >
+            <fluent-icon
+              icon="content-settings"
+              size="14"
+              class="icon icon--font"
+            />
+            <span class="button__content">
+              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
+            </span>
+          </a>
+        </woot-dropdown-item>
+        <woot-dropdown-item>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="power"
+            @click="logout"
+          >
+            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
+          </woot-button>
+        </woot-dropdown-item>
+      </woot-dropdown-menu>
+    </div>
+  </transition>
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
 import Auth from '../../../api/auth';
@@ -38,7 +145,7 @@ export default {
      navigate(e);
    },
    handleKeyboardHelpClick() {
-      this.$emit('openKeyShortcutModal');
+      this.$emit('key-shortcut-modal');
      this.$emit('close');
    },
    logout() {
@@ -54,110 +161,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <transition name="menu-slide">
-    <div
-      v-if="show"
-      v-on-clickaway="onClickAway"
-      class="absolute z-30 w-64 px-2 py-2 bg-white border rounded-md shadow-xl left-3 rtl:left-auto rtl:right-3 bottom-16 dark:bg-slate-800 border-slate-25 dark:border-slate-700"
-      :class="{ 'block visible': show }"
-    >
-      <AvailabilityStatus />
-      <WootDropdownMenu>
-        <WootDropdownItem v-if="showChangeAccountOption">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="arrow-swap"
-            @click="$emit('toggleAccounts')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
-          </woot-button>
-        </WootDropdownItem>
-        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="chat-help"
-            @click="$emit('showSupportChatWindow')"
-          >
-            {{ $t('SIDEBAR_ITEMS.CONTACT_SUPPORT') }}
-          </woot-button>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="keyboard"
-            @click="handleKeyboardHelpClick"
-          >
-            {{ $t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS') }}
-          </woot-button>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <router-link
-            v-slot="{ href, isActive, navigate }"
-            :to="`/app/accounts/${accountId}/profile/settings`"
-            custom
-          >
-            <a
-              :href="href"
-              class="h-8 bg-white button small clear secondary dark:bg-slate-800"
-              :class="{ 'is-active': isActive }"
-              @click="e => handleProfileSettingClick(e, navigate)"
-            >
-              <fluent-icon icon="person" size="14" class="icon icon--font" />
-              <span class="button__content">
-                {{ $t('SIDEBAR_ITEMS.PROFILE_SETTINGS') }}
-              </span>
-            </a>
-          </router-link>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="appearance"
-            @click="openAppearanceOptions"
-          >
-            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
-          </woot-button>
-        </WootDropdownItem>
-        <WootDropdownItem v-if="currentUser.type === 'SuperAdmin'">
-          <a
-            href="/super_admin"
-            class="h-8 bg-white button small clear secondary dark:bg-slate-800"
-            target="_blank"
-            rel="noopener nofollow noreferrer"
-            @click="$emit('close')"
-          >
-            <fluent-icon
-              icon="content-settings"
-              size="14"
-              class="icon icon--font"
-            />
-            <span class="button__content">
-              {{ $t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE') }}
-            </span>
-          </a>
-        </WootDropdownItem>
-        <WootDropdownItem>
-          <woot-button
-            variant="clear"
-            color-scheme="secondary"
-            size="small"
-            icon="power"
-            @click="logout"
-          >
-            {{ $t('SIDEBAR_ITEMS.LOGOUT') }}
-          </woot-button>
-        </WootDropdownItem>
-      </WootDropdownMenu>
-    </div>
-  </transition>
-</template>
@@ -1,3 +1,43 @@
+<template>
+  <div
+    class="h-full w-16 bg-white dark:bg-slate-900 border-r border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0 flex justify-between flex-col"
+  >
+    <div class="flex flex-col items-center">
+      <logo
+        :source="logoSource"
+        :name="installationName"
+        :account-id="accountId"
+        class="m-4 mb-10"
+      />
+      <primary-nav-item
+        v-for="menuItem in menuItems"
+        :key="menuItem.toState"
+        :icon="menuItem.icon"
+        :name="menuItem.label"
+        :to="menuItem.toState"
+        :is-child-menu-active="menuItem.key === activeMenuItem"
+      />
+    </div>
+    <div class="flex flex-col items-center justify-end pb-6">
+      <primary-nav-item
+        v-if="!isACustomBrandedInstance"
+        icon="book-open-globe"
+        name="DOCS"
+        :open-in-new-page="true"
+        :to="helpDocsURL"
+      />
+      <notification-bell @open-notification-panel="openNotificationPanel" />
+      <agent-details @toggle-menu="toggleOptions" />
+      <options-menu
+        :show="showOptionsMenu"
+        @toggle-accounts="toggleAccountModal"
+        @show-support-chat-window="toggleSupportChatWindow"
+        @key-shortcut-modal="$emit('key-shortcut-modal')"
+        @close="toggleOptions"
+      />
+    </div>
+  </div>
+</template>
 <script>
 import Logo from './Logo.vue';
 import PrimaryNavItem from './PrimaryNavItem.vue';
@@ -54,56 +94,15 @@ export default {
      this.showOptionsMenu = !this.showOptionsMenu;
    },
    toggleAccountModal() {
-      this.$emit('toggleAccounts');
+      this.$emit('toggle-accounts');
    },
    toggleSupportChatWindow() {
      window.$chatwoot.toggle();
    },
    openNotificationPanel() {
      this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
-      this.$emit('openNotificationPanel');
+      this.$emit('open-notification-panel');
    },
  },
 };
 </script>
-
-<template>
-  <div
-    class="flex flex-col justify-between w-16 h-full bg-white border-r dark:bg-slate-900 border-slate-50 dark:border-slate-800/50 rtl:border-l rtl:border-r-0"
-  >
-    <div class="flex flex-col items-center">
-      <Logo
-        :source="logoSource"
-        :name="installationName"
-        :account-id="accountId"
-        class="m-4 mb-10"
-      />
-      <PrimaryNavItem
-        v-for="menuItem in menuItems"
-        :key="menuItem.toState"
-        :icon="menuItem.icon"
-        :name="menuItem.label"
-        :to="menuItem.toState"
-        :is-child-menu-active="menuItem.key === activeMenuItem"
-      />
-    </div>
-    <div class="flex flex-col items-center justify-end pb-6">
-      <PrimaryNavItem
-        v-if="!isACustomBrandedInstance"
-        icon="book-open-globe"
-        name="DOCS"
-        open-in-new-page
-        :to="helpDocsURL"
-      />
-      <NotificationBell @openNotificationPanel="openNotificationPanel" />
-      <AgentDetails @toggleMenu="toggleOptions" />
-      <OptionsMenu
-        :show="showOptionsMenu"
-        @toggleAccounts="toggleAccountModal"
-        @showSupportChatWindow="toggleSupportChatWindow"
-        @openKeyShortcutModal="$emit('openKeyShortcutModal')"
-        @close="toggleOptions"
-      />
-    </div>
-  </div>
-</template>
@@ -1,34 +1,3 @@
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    count: {
-      type: String,
-      default: '',
-    },
-    isChildMenuActive: {
-      type: Boolean,
-      default: false,
-    },
-    openInNewPage: {
-      type: Boolean,
-      default: false,
-    },
-  },
-};
-</script>
-
 <template>
  <router-link v-slot="{ href, isActive, navigate }" :to="to" custom>
    <a
@@ -59,3 +28,33 @@ export default {
    </a>
  </router-link>
 </template>
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    count: {
+      type: String,
+      default: '',
+    },
+    isChildMenuActive: {
+      type: Boolean,
+      default: false,
+    },
+    openInNewPage: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
@@ -1,13 +1,35 @@
+<template>
+  <div
+    v-if="hasSecondaryMenu"
+    class="h-full overflow-auto w-48 flex flex-col bg-white dark:bg-slate-900 border-r dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50 text-sm px-2 pb-8"
+  >
+    <account-context @toggle-accounts="toggleAccountModal" />
+    <transition-group
+      name="menu-list"
+      tag="ul"
+      class="pt-2 list-none ml-0 mb-0"
+    >
+      <secondary-nav-item
+        v-for="menuItem in accessibleMenuItems"
+        :key="menuItem.toState"
+        :menu-item="menuItem"
+      />
+      <secondary-nav-item
+        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
+        :key="menuItem.key"
+        :menu-item="menuItem"
+        @add-label="showAddLabelPopup"
+      />
+    </transition-group>
+  </div>
+</template>
 <script>
 import { frontendURL } from '../../../helper/URLHelper';
 import SecondaryNavItem from './SecondaryNavItem.vue';
 import AccountContext from './AccountContext.vue';
 import { mapGetters } from 'vuex';
 import { FEATURE_FLAGS } from '../../../featureFlags';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../../../helper/permissionsHelper';
+import { hasPermissions } from '../../../helper/permissionsHelper';
 import { routesWithPermissions } from '../../../routes';

 export default {
@@ -62,10 +84,7 @@ export default {
    accessibleMenuItems() {
      const menuItemsFilteredByPermissions = this.menuConfig.menuItems.filter(
        menuItem => {
-          const userPermissions = getUserPermissions(
-            this.currentUser,
-            this.accountId
-          );
+          const { permissions: userPermissions = [] } = this.currentUser;
          return hasPermissions(
            routesWithPermissions[menuItem.toStateName],
            userPermissions
@@ -229,10 +248,10 @@ export default {
  },
  methods: {
    showAddLabelPopup() {
-      this.$emit('addLabel');
+      this.$emit('add-label');
    },
    toggleAccountModal() {
-      this.$emit('toggleAccounts');
+      this.$emit('toggle-accounts');
    },
    showNewLink(featureFlag) {
      return this.isFeatureEnabledonAccount(this.accountId, featureFlag);
@@ -240,29 +259,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div
-    v-if="hasSecondaryMenu"
-    class="flex flex-col w-48 h-full px-2 pb-8 overflow-auto text-sm bg-white border-r dark:bg-slate-900 dark:border-slate-800/50 rtl:border-r-0 rtl:border-l border-slate-50"
-  >
-    <AccountContext @toggleAccounts="toggleAccountModal" />
-    <transition-group
-      name="menu-list"
-      tag="ul"
-      class="pt-2 mb-0 ml-0 list-none"
-    >
-      <SecondaryNavItem
-        v-for="menuItem in accessibleMenuItems"
-        :key="menuItem.toState"
-        :menu-item="menuItem"
-      />
-      <SecondaryNavItem
-        v-for="menuItem in additionalSecondaryMenuItems[menuConfig.parentNav]"
-        :key="menuItem.key"
-        :menu-item="menuItem"
-        @addLabel="showAddLabelPopup"
-      />
-    </transition-group>
-  </div>
-</template>
@@ -1,55 +1,3 @@
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: '',
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    labelColor: {
-      type: String,
-      default: '',
-    },
-    shouldTruncate: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    warningIcon: {
-      type: String,
-      default: '',
-    },
-    showChildCount: {
-      type: Boolean,
-      default: false,
-    },
-    childItemCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  computed: {
-    showIcon() {
-      return {
-        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
-      };
-    },
-    isCountZero() {
-      return this.childItemCount === 0;
-    },
-    menuTitle() {
-      return this.shouldTruncate ? this.label : '';
-    },
-  },
-};
-</script>
-
 <template>
  <router-link
    v-slot="{ href, isActive, navigate }"
@@ -130,3 +78,54 @@ export default {
    </li>
  </router-link>
 </template>
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    labelColor: {
+      type: String,
+      default: '',
+    },
+    shouldTruncate: {
+      type: Boolean,
+      default: false,
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
+    showChildCount: {
+      type: Boolean,
+      default: false,
+    },
+    childItemCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    showIcon() {
+      return {
+        'overflow-hidden whitespace-nowrap text-ellipsis': this.shouldTruncate,
+      };
+    },
+    isCountZero() {
+      return this.childItemCount === 0;
+    },
+    menuTitle() {
+      return this.shouldTruncate ? this.label : '';
+    },
+  },
+};
+</script>
@@ -1,7 +1,102 @@
+<template>
+  <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"
+      >
+        {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      </span>
+      <div v-if="menuItem.showNewButton" class="flex items-center">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          icon="add"
+          class="p-0 ml-2"
+          @click="onClickOpen"
+        />
+      </div>
+    </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="computedClass"
+      :to="menuItem && menuItem.toState"
+    >
+      <fluent-icon
+        :icon="menuItem.icon"
+        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
+        size="14"
+      />
+      {{ $t(`SIDEBAR.${menuItem.label}`) }}
+      <span
+        v-if="showChildCount(menuItem.count)"
+        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        :class="{
+          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
+          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
+          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
+            isActiveView,
+          'bg-slate-50 dark:bg-slate-700': !isActiveView,
+        }"
+      >
+        {{ `${menuItem.count}` }}
+      </span>
+      <span
+        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"
+      >
+        {{ $t('SIDEBAR.BETA') }}
+      </span>
+    </router-link>
+
+    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
+      <secondary-child-nav-item
+        v-for="child in menuItem.children"
+        :key="child.id"
+        :to="child.toState"
+        :label="child.label"
+        :label-color="child.color"
+        :should-truncate="child.truncateLabel"
+        :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
+        :show-child-count="showChildCount(child.count)"
+        :child-item-count="child.count"
+      />
+      <Policy :permissions="['administrator']">
+        <router-link
+          v-if="menuItem.newLink"
+          v-slot="{ href, navigate }"
+          :to="menuItem.toState"
+          custom
+        >
+          <li class="pl-1">
+            <a :href="href">
+              <woot-button
+                size="tiny"
+                variant="clear"
+                color-scheme="secondary"
+                icon="add"
+                :data-testid="menuItem.dataTestid"
+                @click="e => newLinkClick(e, navigate)"
+              >
+                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
+              </woot-button>
+            </a>
+          </li>
+        </router-link>
+      </Policy>
+    </ul>
+  </li>
+</template>
+
 <script>
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useConfig } from 'dashboard/composables/useConfig';
+
+import adminMixin from '../../../mixins/isAdmin';
+import configMixin from 'shared/mixins/configMixin';
 import {
  getInboxClassByType,
  getInboxWarningIconClass,
@@ -16,20 +111,13 @@ import Policy from '../../policy.vue';

 export default {
  components: { SecondaryChildNavItem, Policy },
+  mixins: [adminMixin, configMixin],
  props: {
    menuItem: {
      type: Object,
      default: () => ({}),
    },
  },
-  setup() {
-    const { isAdmin } = useAdmin();
-    const { isEnterprise } = useConfig();
-    return {
-      isAdmin,
-      isEnterprise,
-    };
-  },
  computed: {
    ...mapGetters({
      activeInbox: 'getSelectedInbox',
@@ -170,7 +258,7 @@ export default {
      } else if (this.menuItem.showModalForNewItem) {
        if (this.menuItem.modalName === 'AddLabel') {
          e.preventDefault();
-          this.$emit('addLabel');
+          this.$emit('add-label');
        }
      }
    },
@@ -186,97 +274,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <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"
-      >
-        {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      </span>
-      <div v-if="menuItem.showNewButton" class="flex items-center">
-        <woot-button
-          size="tiny"
-          variant="clear"
-          color-scheme="secondary"
-          icon="add"
-          class="p-0 ml-2"
-          @click="onClickOpen"
-        />
-      </div>
-    </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="computedClass"
-      :to="menuItem && menuItem.toState"
-    >
-      <fluent-icon
-        :icon="menuItem.icon"
-        class="min-w-[1rem] mr-1.5 rtl:mr-0 rtl:ml-1.5"
-        size="14"
-      />
-      {{ $t(`SIDEBAR.${menuItem.label}`) }}
-      <span
-        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
-        :class="{
-          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
-          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
-          'bg-woot-75 dark:bg-woot-200 text-woot-600 dark:text-woot-600':
-            isActiveView,
-          'bg-slate-50 dark:bg-slate-700': !isActiveView,
-        }"
-      >
-        {{ `${menuItem.count}` }}
-      </span>
-      <span
-        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"
-      >
-        {{ $t('SIDEBAR.BETA') }}
-      </span>
-    </router-link>
-
-    <ul v-if="hasSubMenu" class="mb-0 ml-0 list-none">
-      <SecondaryChildNavItem
-        v-for="child in menuItem.children"
-        :key="child.id"
-        :to="child.toState"
-        :label="child.label"
-        :label-color="child.color"
-        :should-truncate="child.truncateLabel"
-        :icon="computedInboxClass(child)"
-        :warning-icon="computedInboxErrorClass(child)"
-        :show-child-count="showChildCount(child.count)"
-        :child-item-count="child.count"
-      />
-      <Policy :permissions="['administrator']">
-        <router-link
-          v-if="menuItem.newLink"
-          v-slot="{ href, navigate }"
-          :to="menuItem.toState"
-          custom
-        >
-          <li class="pl-1">
-            <a :href="href">
-              <woot-button
-                size="tiny"
-                variant="clear"
-                color-scheme="secondary"
-                icon="add"
-                :data-testid="menuItem.dataTestid"
-                @click="e => newLinkClick(e, navigate)"
-              >
-                {{ $t(`SIDEBAR.${menuItem.newLinkTag}`) }}
-              </woot-button>
-            </a>
-          </li>
-        </router-link>
-      </Policy>
-    </ul>
-  </li>
-</template>
@@ -1,11 +1,7 @@
 <script setup>
 import { useStoreGetters } from 'dashboard/composables/store';
 import { computed } from 'vue';
-import {
-  getUserPermissions,
-  hasPermissions,
-} from '../helper/permissionsHelper';
-
+import { hasPermissions } from '../helper/permissionsHelper';
 const props = defineProps({
  permissions: {
    type: Array,
@@ -14,17 +10,12 @@ const props = defineProps({
 });

 const getters = useStoreGetters();
-const user = computed(() => getters.getCurrentUser.value);
-const accountId = computed(() => getters.getCurrentAccountId.value);
-const userPermissions = computed(() => {
-  return getUserPermissions(user.value, accountId.value);
-});
-const hasPermission = computed(() => {
-  return hasPermissions(props.permissions, userPermissions.value);
-});
+const user = getters.getCurrentUser.value;
+const hasPermission = computed(() =>
+  hasPermissions(props.permissions, user.permissions)
+);
 </script>

-<!-- eslint-disable vue/no-root-v-if -->
 <template>
  <div v-if="hasPermission">
    <slot />
@@ -1,3 +1,24 @@
+<template>
+  <div class="announcement-popup">
+    <span v-if="popupMessage" class="popup-content">
+      {{ popupMessage }}
+      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
+        {{ routeText }}
+      </span>
+    </span>
+    <div v-if="hasCloseButton" class="popup-close">
+      <woot-button
+        v-if="hasCloseButton"
+        color-scheme="primary"
+        variant="link"
+        size="small"
+        @click="onClickClose"
+      >
+        {{ closeButtonText }}
+      </woot-button>
+    </div>
+  </div>
+</template>
 <script>
 export default {
  props: {
@@ -29,28 +50,6 @@ export default {
 };
 </script>

-<template>
-  <div class="announcement-popup">
-    <span v-if="popupMessage" class="popup-content">
-      {{ popupMessage }}
-      <span v-if="routeText" class="route-url" @click="onClickOpenPath">
-        {{ routeText }}
-      </span>
-    </span>
-    <div v-if="hasCloseButton" class="popup-close">
-      <woot-button
-        v-if="hasCloseButton"
-        color-scheme="primary"
-        variant="link"
-        size="small"
-        @click="onClickClose"
-      >
-        {{ closeButtonText }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <style lang="scss">
 .announcement-popup {
  max-width: 15rem;
@@ -1,3 +1,45 @@
+<template>
+  <div
+    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
+    :class="bannerClasses"
+  >
+    <span class="banner-message">
+      {{ bannerMessage }}
+      <a
+        v-if="hrefLink"
+        :href="hrefLink"
+        rel="noopener noreferrer nofollow"
+        target="_blank"
+      >
+        {{ hrefLinkText }}
+      </a>
+    </span>
+    <div class="actions">
+      <woot-button
+        v-if="hasActionButton"
+        size="tiny"
+        :icon="actionButtonIcon"
+        :variant="actionButtonVariant"
+        color-scheme="primary"
+        class-names="banner-action__button"
+        @click="onClick"
+      >
+        {{ actionButtonLabel }}
+      </woot-button>
+      <woot-button
+        v-if="hasCloseButton"
+        size="tiny"
+        :color-scheme="colorScheme"
+        icon="dismiss-circle"
+        class-names="banner-action__button"
+        @click="onClickClose"
+      >
+        {{ $t('GENERAL_SETTINGS.DISMISS') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
 <script>
 export default {
  props: {
@@ -59,48 +101,6 @@ export default {
 };
 </script>

-<template>
-  <div
-    class="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white"
-    :class="bannerClasses"
-  >
-    <span class="banner-message">
-      {{ bannerMessage }}
-      <a
-        v-if="hrefLink"
-        :href="hrefLink"
-        rel="noopener noreferrer nofollow"
-        target="_blank"
-      >
-        {{ hrefLinkText }}
-      </a>
-    </span>
-    <div class="actions">
-      <woot-button
-        v-if="hasActionButton"
-        size="tiny"
-        :icon="actionButtonIcon"
-        :variant="actionButtonVariant"
-        color-scheme="primary"
-        class-names="banner-action__button"
-        @click="onClick"
-      >
-        {{ actionButtonLabel }}
-      </woot-button>
-      <woot-button
-        v-if="hasCloseButton"
-        size="tiny"
-        :color-scheme="colorScheme"
-        icon="dismiss-circle"
-        class-names="banner-action__button"
-        @click="onClickClose"
-      >
-        {{ $t('GENERAL_SETTINGS.DISMISS') }}
-      </woot-button>
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
 .banner {
  &.primary {
@@ -1,3 +1,13 @@
+<template>
+  <div
+    class="fixed outline-none z-[9999] cursor-pointer"
+    :style="style"
+    tabindex="0"
+    @blur="$emit('close')"
+  >
+    <slot />
+  </div>
+</template>
 <script>
 export default {
  props: {
@@ -30,14 +40,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
-</template>
@@ -31,7 +31,6 @@ import CalendarMonth from './components/CalendarMonth.vue';
 import CalendarWeek from './components/CalendarWeek.vue';
 import CalendarFooter from './components/CalendarFooter.vue';

-const emit = defineEmits(['dateRangeChanged']);
 const { LAST_7_DAYS, LAST_30_DAYS, CUSTOM_RANGE } = DATE_RANGE_TYPES;
 const { START_CALENDAR, END_CALENDAR } = CALENDAR_TYPES;
 const { WEEK, MONTH, YEAR } = CALENDAR_PERIODS;
@@ -55,6 +54,8 @@ const hoveredEndDate = ref(null);
 const manualStartDate = ref(selectedStartDate.value);
 const manualEndDate = ref(selectedEndDate.value);

+const emit = defineEmits(['change']);
+
 // Watcher will set the start and end dates based on the selected range
 watch(selectedRange, newRange => {
  if (newRange !== CUSTOM_RANGE) {
@@ -222,7 +223,7 @@ const emitDateRange = () => {
    >
      <CalendarDateRange
        :selected-range="selectedRange"
-        @setRange="setDateRange"
+        @set-range="setDateRange"
      />
      <div
        class="flex flex-col w-[680px] ltr:border-l rtl:border-r border-slate-50 dark:border-slate-700/50"
@@ -264,15 +265,15 @@ const emitDateRange = () => {
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @selectYear="openCalendar($event, calendar, YEAR)"
+                  @select-year="openCalendar($event, calendar, YEAR)"
                />
                <CalendarMonth
                  v-else-if="calendarViews[calendar] === MONTH"
                  :calendar-type="calendar"
                  :start-current-date="startCurrentDate"
                  :end-current-date="endCurrentDate"
-                  @selectMonth="openCalendar($event, calendar)"
-                  @setView="setViewMode"
+                  @select-month="openCalendar($event, calendar)"
+                  @set-view="setViewMode"
                  @prev="moveCalendar(calendar, 'prev', YEAR)"
                  @next="moveCalendar(calendar, 'next', YEAR)"
                />
@@ -286,9 +287,9 @@ const emitDateRange = () => {
                  :selected-end-date="selectedEndDate"
                  :selecting-end-date="selectingEndDate"
                  :hovered-end-date="hoveredEndDate"
-                  @updateHoveredEndDate="hoveredEndDate = $event"
-                  @selectDate="selectDate"
-                  @setView="setViewMode"
+                  @update-hovered-end-date="hoveredEndDate = $event"
+                  @select-date="selectDate"
+                  @set-view="setViewMode"
                  @prev="moveCalendar(calendar, 'prev')"
                  @next="moveCalendar(calendar, 'next')"
                />
@@ -19,7 +19,7 @@ defineProps({
    default: '',
  },
 });
-const emit = defineEmits(['prev', 'next', 'setView']);
+const emit = defineEmits(['prev', 'next', 'set-view']);

 const { YEAR } = CALENDAR_PERIODS;

@@ -32,7 +32,7 @@ const onClickNext = type => {
 };

 const onClickSetView = (type, mode) => {
-  emit('setView', type, mode);
+  emit('set-view', type, mode);
 };
 </script>

@@ -8,10 +8,10 @@ defineProps({
  },
 });

-const emit = defineEmits(['setRange']);
+const emit = defineEmits(['set-range']);

 const setDateRange = range => {
-  emit('setRange', range);
+  emit('set-range', range);
 };
 </script>

@@ -1,5 +1,5 @@
 <script setup>
-const emit = defineEmits(['clear', 'clear']);
+const emit = defineEmits(['clear', 'apply']);

 const onClickClear = () => {
  emit('clear');
@@ -18,7 +18,6 @@ const props = defineProps({
  endCurrentDate: Date,
 });

-const emit = defineEmits(['selectMonth', 'prev', 'next', 'setView']);
 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH, YEAR } = CALENDAR_PERIODS;

@@ -34,8 +33,10 @@ const activeMonthIndex = computed(() => {
  return getMonth(date);
 });

+const emit = defineEmits(['select-month', 'prev', 'next', 'set-view']);
+
 const setViewMode = (type, mode) => {
-  emit('setView', type, mode);
+  emit('set-view', type, mode);
 };

 const onClickPrev = () => {
@@ -47,7 +48,7 @@ const onClickNext = () => {
 };

 const selectMonth = index => {
-  emit('selectMonth', index);
+  emit('select-month', index);
 };
 </script>

@@ -62,7 +63,7 @@ const selectMonth = index => {
          MONTH
        )
      "
-      @setView="setViewMode"
+      @set-view="setViewMode"
      @prev="onClickPrev"
      @next="onClickNext"
    />
@@ -31,22 +31,22 @@ const props = defineProps({
 });

 const emit = defineEmits([
-  'updateHoveredEndDate',
-  'selectDate',
+  'update-hovered-end-date',
+  'select-date',
  'prev',
  'next',
-  'setView',
+  'set-view',
 ]);

 const { START_CALENDAR } = CALENDAR_TYPES;
 const { MONTH } = CALENDAR_PERIODS;

 const emitHoveredEndDate = day => {
-  emit('updateHoveredEndDate', day);
+  emit('update-hovered-end-date', day);
 };

 const emitSelectDate = day => {
-  emit('selectDate', day);
+  emit('select-date', day);
 };
 const onClickPrev = () => {
  emit('prev');
@@ -57,7 +57,7 @@ const onClickNext = () => {
 };

 const setViewMode = (type, mode) => {
-  emit('setView', type, mode);
+  emit('set-view', type, mode);
 };

 const weeks = calendarType => {
@@ -139,7 +139,7 @@ const dayClasses = day => ({
      "
      @prev="onClickPrev"
      @next="onClickNext"
-      @setView="setViewMode"
+      @set-view="setViewMode"
    />
    <CalendarWeekLabel />
    <div
@@ -14,8 +14,6 @@ const props = defineProps({
  endCurrentDate: Date,
 });

-const emit = defineEmits(['selectYear']);
-
 const { START_CALENDAR } = CALENDAR_TYPES;

 const calculateStartYear = date => {
@@ -54,8 +52,10 @@ const onClickNext = () => {
  startYear.value = addYears(new Date(startYear.value, 0, 1), 10).getFullYear();
 };

+const emit = defineEmits(['select-year']);
+
 const selectYear = year => {
-  emit('selectYear', year);
+  emit('select-year', year);
 };
 </script>

@@ -12,8 +12,6 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['open']);
-
 const formatDateRange = computed(() => {
  const startDate = props.selectedStartDate;
  const endDate = props.selectedEndDate;
@@ -41,6 +39,8 @@ const activeDateRange = computed(
  () => dateRanges.find(range => range.value === props.selectedRange).label
 );

+const emit = defineEmits(['open']);
+
 const openDatePicker = () => {
  emit('open');
 };
@@ -1,3 +1,18 @@
+<template>
+  <div class="date-picker">
+    <date-picker
+      :range="true"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
 <script>
 import DatePicker from 'vue2-datepicker';
 export default {
@@ -23,18 +38,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div class="date-picker">
-    <DatePicker
-      range
-      confirm
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      @change="handleChange"
-    />
-  </div>
-</template>
@@ -1,3 +1,19 @@
+<template>
+  <div class="date-picker">
+    <date-picker
+      type="datetime"
+      :confirm="true"
+      :clearable="false"
+      :editable="false"
+      :confirm-text="confirmText"
+      :placeholder="placeholder"
+      :value="value"
+      :disabled-date="disableBeforeToday"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
 <script>
 import addDays from 'date-fns/addDays';
 import DatePicker from 'vue2-datepicker';
@@ -29,19 +45,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div class="date-picker">
-    <DatePicker
-      type="datetime"
-      confirm
-      :clearable="false"
-      :editable="false"
-      :confirm-text="confirmText"
-      :placeholder="placeholder"
-      :value="value"
-      :disabled-date="disableBeforeToday"
-      @change="handleChange"
-    />
-  </div>
-</template>
@@ -14,7 +14,6 @@ defineProps({
  },
 });
 </script>
-
 <template>
  <button
    class="inline-flex relative items-center p-1.5 w-fit h-8 gap-1.5 rounded-lg hover:bg-slate-50 dark:hover:bg-slate-800 active:bg-slate-75 dark:active:bg-slate-800"
@@ -6,7 +6,6 @@ defineProps({
  },
 });
 </script>
-
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
@@ -38,13 +38,13 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['onSearch']);
+const emits = defineEmits(['on-search']);

 const searchTerm = ref('');

 const onSearch = debounce(value => {
  searchTerm.value = value;
-  emit('onSearch', value);
+  emits('on-search', value);
 }, 300);

 const filteredListItems = computed(() => {
@@ -71,14 +71,13 @@ const shouldShowEmptyState = computed(() => {
  return !props.isLoading && isDropdownListEmpty.value;
 });
 </script>
-
 <template>
  <div
    class="absolute z-20 w-40 bg-white border shadow dark:bg-slate-800 rounded-xl border-slate-50 dark:border-slate-700/50 max-h-[400px]"
    @click.stop
  >
    <slot name="search">
-      <DropdownSearch
+      <dropdown-search
        v-if="enableSearch"
        :input-value="searchTerm"
        :input-placeholder="inputPlaceholder"
@@ -88,21 +87,19 @@ const shouldShowEmptyState = computed(() => {
      />
    </slot>
    <slot name="listItem">
-      <DropdownLoadingState
+      <dropdown-loading-state
        v-if="shouldShowLoadingState"
        :message="loadingPlaceholder"
      />
-      <DropdownEmptyState
+      <dropdown-empty-state
        v-else-if="shouldShowEmptyState"
        :message="$t('REPORT.FILTER_ACTIONS.EMPTY_LIST')"
      />
-      <ListItemButton
+      <list-item-button
        v-for="item in filteredListItems"
        :key="item.id"
        :is-active="isFilterActive(item.id)"
        :button-text="item.name"
-        :icon="item.icon"
-        :icon-color="item.iconColor"
        @click="$emit('click', item)"
      />
    </slot>
@@ -8,17 +8,8 @@ defineProps({
    type: Boolean,
    default: false,
  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  iconColor: {
-    type: String,
-    default: '',
-  },
 });
 </script>
-
 <template>
  <button
    class="relative inline-flex items-center justify-start w-full p-3 border-0 rounded-none first:rounded-t-xl last:rounded-b-xl h-11 hover:bg-slate-50 dark:hover:bg-slate-700 active:bg-slate-75 dark:active:bg-slate-800"
@@ -28,12 +19,6 @@ defineProps({
    @focus="$emit('focus')"
  >
    <div class="inline-flex items-center gap-3 overflow-hidden">
-      <fluent-icon
-        v-if="icon"
-        :icon="icon"
-        size="18"
-        :style="{ color: iconColor }"
-      />
      <span
        class="text-sm font-medium truncate text-slate-900 dark:text-slate-50"
      >
@@ -6,7 +6,6 @@ defineProps({
  },
 });
 </script>
-
 <template>
  <div
    class="flex items-center justify-center h-10 text-sm text-slate-500 dark:text-slate-300"
@@ -14,7 +14,6 @@ defineProps({
  },
 });
 </script>
-
 <template>
  <div
    class="flex items-center justify-between h-10 min-h-[40px] sticky top-0 bg-white z-10 dark:bg-slate-800 gap-2 px-3 border-b rounded-t-xl border-slate-50 dark:border-slate-700"
@@ -6,7 +6,6 @@ defineProps({
  },
 });
 </script>
-
 <template>
  <div class="relative group w-[inherit] whitespace-normal z-20">
    <fluent-icon
@@ -1,3 +1,32 @@
+<template>
+  <div
+    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
+    :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"
+    />
+    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
+      {{ title }}
+    </span>
+    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
+    <button
+      v-if="showClose"
+      class="label-close--button p-0"
+      :style="{ color: textColor }"
+      @click="onClick"
+    >
+      <fluent-icon icon="dismiss" size="12" class="close--icon" />
+    </button>
+  </div>
+</template>
 <script>
 import { getContrastingTextColor } from '@chatwoot/utils';

@@ -80,36 +109,6 @@ export default {
 };
 </script>

-<template>
-  <div
-    class="inline-flex ltr:mr-1 rtl:ml-1 mb-1"
-    :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"
-    />
-    <span v-if="!href" class="whitespace-nowrap text-ellipsis overflow-hidden">
-      {{ title }}
-    </span>
-    <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
-    <button
-      v-if="showClose"
-      class="label-close--button p-0"
-      :style="{ color: textColor }"
-      @click="onClick"
-    >
-      <fluent-icon icon="dismiss" size="12" class="close--icon" />
-    </button>
-  </div>
-</template>
-
 <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;
@@ -1,26 +1,3 @@
-<script>
-export default {
-  props: {
-    heading: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    active: {
-      type: Boolean,
-      default: false,
-    },
-    src: {
-      type: String,
-      default: '',
-    },
-  },
-};
-</script>
-
 <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"
@@ -36,7 +13,7 @@ export default {
          active,
      }"
    >
-      <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>
+      <div class="items-center flex font-medium p-1 text-sm">{{ heading }}</div>
      <fluent-icon
        v-if="active"
        icon="checkmark-circle"
@@ -64,3 +41,30 @@ export default {
    <slot v-else />
  </div>
 </template>
+
+<script>
+export default {
+  props: {
+    heading: {
+      type: String,
+      default: '',
+    },
+    content: {
+      type: String,
+      default: '',
+    },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    buttonText: {
+      type: String,
+      default: 'Active',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
@@ -1,17 +1,3 @@
-<script>
-export default {
-  props: {
-    value: { type: Boolean, default: false },
-    size: { type: String, default: '' },
-  },
-  methods: {
-    onClick() {
-      this.$emit('input', !this.value);
-    },
-  },
-};
-</script>
-
 <template>
  <button
    type="button"
@@ -25,6 +11,19 @@ export default {
  </button>
 </template>

+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false },
+    size: { type: String, default: '' },
+  },
+  methods: {
+    onClick() {
+      this.$emit('input', !this.value);
+    },
+  },
+};
+</script>
 <style lang="scss" scoped>
 .toggle-button {
  @apply bg-slate-200 dark:bg-slate-600;
@@ -1,3 +1,20 @@
+<template>
+  <li
+    :class="{
+      'tabs-title': true,
+      'is-active': active,
+    }"
+  >
+    <a @click="onTabClick">
+      {{ name }}
+      <div v-if="showBadge" class="badge min-w-[20px]">
+        <span>
+          {{ getItemCount }}
+        </span>
+      </div>
+    </a>
+  </li>
+</template>
 <script>
 export default {
  name: 'WootTabsItem',
@@ -44,21 +61,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <li
-    class="tabs-title"
-    :class="{
-      'is-active': active,
-    }"
-  >
-    <a @click="onTabClick">
-      {{ name }}
-      <div v-if="showBadge" class="badge min-w-[20px]">
-        <span>
-          {{ getItemCount }}
-        </span>
-      </div>
-    </a>
-  </li>
-</template>
@@ -1,16 +1,26 @@
+<template>
+  <div
+    v-tooltip.top="{
+      content: tooltipText,
+      delay: { show: 1500, hide: 0 },
+      hideOnClick: true,
+    }"
+    class="text-xxs text-slate-500 dark:text-slate-500 leading-4 ml-auto hover:text-slate-900 dark:hover:text-slate-100"
+  >
+    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
+  </div>
+</template>
+
 <script>
 const MINUTE_IN_MILLI_SECONDS = 60000;
 const HOUR_IN_MILLI_SECONDS = MINUTE_IN_MILLI_SECONDS * 60;
 const DAY_IN_MILLI_SECONDS = HOUR_IN_MILLI_SECONDS * 24;

-import {
-  dynamicTime,
-  dateFormat,
-  shortTimestamp,
-} from 'shared/helpers/timeHelper';
+import timeMixin from 'dashboard/mixins/time';

 export default {
  name: 'TimeAgo',
+  mixins: [timeMixin],
  props: {
    isAutoRefreshEnabled: {
      type: Boolean,
@@ -27,17 +37,17 @@ export default {
  },
  data() {
    return {
-      lastActivityAtTimeAgo: dynamicTime(this.lastActivityTimestamp),
-      createdAtTimeAgo: dynamicTime(this.createdAtTimestamp),
+      lastActivityAtTimeAgo: this.dynamicTime(this.lastActivityTimestamp),
+      createdAtTimeAgo: this.dynamicTime(this.createdAtTimestamp),
      timer: null,
    };
  },
  computed: {
    lastActivityTime() {
-      return shortTimestamp(this.lastActivityAtTimeAgo);
+      return this.shortTimestamp(this.lastActivityAtTimeAgo);
    },
    createdAtTime() {
-      return shortTimestamp(this.createdAtTimeAgo);
+      return this.shortTimestamp(this.createdAtTimeAgo);
    },
    createdAt() {
      const createdTimeDiff = Date.now() - this.createdAtTimestamp * 1000;
@@ -46,9 +56,9 @@ export default {
        ? `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.LATEST')} ${
            this.createdAtTimeAgo
          }`
-        : `${this.$t('CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST')} ${dateFormat(
-            this.createdAtTimestamp
-          )}`;
+        : `${this.$t(
+            'CHAT_LIST.CHAT_TIME_STAMP.CREATED.OLDEST'
+          )} ${this.dateFormat(this.createdAtTimestamp)}`;
    },
    lastActivity() {
      const lastActivityTimeDiff =
@@ -60,7 +70,7 @@ export default {
          }`
        : `${this.$t(
            'CHAT_LIST.CHAT_TIME_STAMP.LAST_ACTIVITY.NOT_ACTIVE'
-          )} ${dateFormat(this.lastActivityTimestamp)}`;
+          )} ${this.dateFormat(this.lastActivityTimestamp)}`;
    },
    tooltipText() {
      return `${this.createdAt}
@@ -69,10 +79,10 @@ export default {
  },
  watch: {
    lastActivityTimestamp() {
-      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+      this.lastActivityAtTimeAgo = this.dynamicTime(this.lastActivityTimestamp);
    },
    createdAtTimestamp() {
-      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+      this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
    },
  },
  mounted() {
@@ -86,8 +96,10 @@ export default {
  methods: {
    createTimer() {
      this.timer = setTimeout(() => {
-        this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
-        this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+        this.lastActivityAtTimeAgo = this.dynamicTime(
+          this.lastActivityTimestamp
+        );
+        this.createdAtTimeAgo = this.dynamicTime(this.createdAtTimestamp);
        this.createTimer();
      }, this.refreshTime());
    },
@@ -105,16 +117,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <div
-    v-tooltip.top="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
-    }"
-    class="ml-auto leading-4 text-xxs text-slate-500 dark:text-slate-500 hover:text-slate-900 dark:hover:text-slate-100"
-  >
-    <span>{{ `${createdAtTime} • ${lastActivityTime}` }}</span>
-  </div>
-</template>
@@ -1,3 +1,39 @@
+<template>
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
+    <div
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
+    >
+      <div class="flex items-center">
+        <h3
+          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
+        >
+          {{ item.title }}
+        </h3>
+        <span
+          v-if="isOver(item)"
+          class="text-green-500 dark:text-green-500 ml-1"
+        >
+          <fluent-icon icon="checkmark" />
+        </span>
+      </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="text-slate-600 dark:text-slate-300 text-sm m-0 pl-6">
+        {{ item.body }}
+      </p>
+    </div>
+  </transition-group>
+</template>
+
 <script>
 /* eslint no-console: 0 */
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
@@ -5,6 +41,7 @@ import globalConfigMixin from 'shared/mixins/globalConfigMixin';
 export default {
  mixins: [globalConfigMixin],
  props: {
+    isFullwidth: Boolean,
    items: {
      type: Array,
      default: () => [],
@@ -28,43 +65,6 @@ export default {
  },
 };
 </script>
-
-<template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
-    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
-    >
-      <div class="flex items-center">
-        <h3
-          class="text-slate-800 dark:text-slate-100 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mb-1.5 text-ellipsis leading-tight"
-        >
-          {{ item.title }}
-        </h3>
-        <span
-          v-if="isOver(item)"
-          class="ml-1 text-green-500 dark:text-green-500"
-        >
-          <fluent-icon icon="checkmark" />
-        </span>
-      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="pl-6 m-0 text-sm text-slate-600 dark:text-slate-300">
-        {{ item.body }}
-      </p>
-    </div>
-  </transition-group>
-</template>
-
 <style lang="scss" scoped>
 .wizard-box {
  .item {
@@ -1,3 +1,32 @@
+<template>
+  <button
+    class="button"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <spinner
+      v-if="isLoading"
+      size="small"
+      :color-scheme="showDarkSpinner ? 'dark' : ''"
+    />
+    <emoji-or-icon
+      v-else-if="icon || emoji"
+      class="icon"
+      :emoji="emoji"
+      :icon="icon"
+      :icon-size="iconSize"
+    />
+    <span
+      v-if="$slots.default"
+      class="button__content"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+  </button>
+</template>
 <script>
 import Spinner from 'shared/components/Spinner.vue';
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
@@ -103,33 +132,3 @@ export default {
  },
 };
 </script>
-
-<template>
-  <button
-    class="button"
-    :type="type"
-    :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
-    @click="handleClick"
-  >
-    <Spinner
-      v-if="isLoading"
-      size="small"
-      :color-scheme="showDarkSpinner ? 'dark' : ''"
-    />
-    <EmojiOrIcon
-      v-else-if="icon || emoji"
-      class="icon"
-      :emoji="emoji"
-      :icon="icon"
-      :icon-size="iconSize"
-    />
-    <span
-      v-if="$slots.default"
-      class="button__content"
-      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
-    >
-      <slot />
-    </span>
-  </button>
-</template>
@@ -1,13 +1,47 @@
+<template>
+  <div v-if="!isFetchingAppIntegrations">
+    <div v-if="isAIIntegrationEnabled" class="relative">
+      <AIAssistanceCTAButton
+        v-if="shouldShowAIAssistCTAButton"
+        @click="openAIAssist"
+      />
+      <woot-button
+        v-else
+        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
+        icon="wand"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="openAIAssist"
+      />
+      <woot-modal
+        :show.sync="showAIAssistanceModal"
+        :on-close="hideAIAssistanceModal"
+      >
+        <AIAssistanceModal
+          :ai-option="aiOption"
+          @apply-text="insertText"
+          @close="hideAIAssistanceModal"
+        />
+      </woot-modal>
+    </div>
+    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
+      <AIAssistanceCTAButton @click="openAICta" />
+      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+        <AICTAModal @close="hideAICtaModal" />
+      </woot-modal>
+    </div>
+  </div>
+</template>
 <script>
-import { ref } from 'vue';
 import { mapGetters } from 'vuex';
-import { useAdmin } from 'dashboard/composables/useAdmin';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useAI } from 'dashboard/composables/useAI';
 import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
+import adminMixin from 'dashboard/mixins/aiMixin';
+import aiMixin from 'dashboard/mixins/isAdmin';
+import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
+import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';

 export default {
@@ -16,49 +50,16 @@ export default {
    AICTAModal,
    AIAssistanceCTAButton,
  },
-  setup(props, { emit }) {
-    const { uiSettings, updateUISettings } = useUISettings();
-
-    const { isAIIntegrationEnabled, draftMessage, recordAnalytics } = useAI();
-
-    const { isAdmin } = useAdmin();
-
-    const initialMessage = ref('');
-
-    const initializeMessage = draftMsg => {
-      initialMessage.value = draftMsg;
-    };
-    const keyboardEvents = {
-      '$mod+KeyZ': {
-        action: () => {
-          if (initialMessage.value) {
-            emit('replaceText', initialMessage.value);
-            initialMessage.value = '';
-          }
-        },
-        allowOnFocusedInput: true,
-      },
-    };
-    useKeyboardEvents(keyboardEvents);
-
-    return {
-      uiSettings,
-      updateUISettings,
-      isAdmin,
-      initialMessage,
-      initializeMessage,
-      recordAnalytics,
-      isAIIntegrationEnabled,
-      draftMessage,
-    };
-  },
+  mixins: [aiMixin, keyboardEventListenerMixins, adminMixin, uiSettingsMixin],
  data: () => ({
    showAIAssistanceModal: false,
    showAICtaModal: false,
    aiOption: '',
+    initialMessage: '',
  }),
  computed: {
    ...mapGetters({
+      currentChat: 'getSelectedChat',
      isAChatwootInstance: 'globalConfig/isAChatwootInstance',
    }),
    isAICTAModalDismissed() {
@@ -81,10 +82,22 @@ export default {

  mounted() {
    this.$emitter.on(CMD_AI_ASSIST, this.onAIAssist);
-    this.initializeMessage(this.draftMessage);
+    this.initialMessage = this.draftMessage;
  },

  methods: {
+    getKeyboardEvents() {
+      return {
+        '$mod+KeyZ': {
+          action: () => {
+            if (this.initialMessage) {
+              this.$emit('replace-text', this.initialMessage);
+              this.initialMessage = '';
+            }
+          },
+        },
+      };
+    },
    hideAIAssistanceModal() {
      this.recordAnalytics('DISMISS_AI_SUGGESTION', {
        aiOption: this.aiOption,
@@ -98,7 +111,7 @@ export default {
          is_open_ai_cta_modal_dismissed: true,
        });
      }
-      this.initializeMessage(this.draftMessage);
+      this.initialMessage = this.draftMessage;
      const ninja = document.querySelector('ninja-keys');
      ninja.open({ parent: 'ai_assist' });
    },
@@ -113,44 +126,8 @@ export default {
      this.showAIAssistanceModal = true;
    },
    insertText(message) {
-      this.$emit('replaceText', message);
+      this.$emit('replace-text', message);
    },
  },
 };
 </script>
-
-<template>
-  <div>
-    <div v-if="isAIIntegrationEnabled" class="relative">
-      <AIAssistanceCTAButton
-        v-if="shouldShowAIAssistCTAButton"
-        @click="openAIAssist"
-      />
-      <woot-button
-        v-else
-        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
-        icon="wand"
-        color-scheme="secondary"
-        variant="smooth"
-        size="small"
-        @click="openAIAssist"
-      />
-      <woot-modal
-        :show.sync="showAIAssistanceModal"
-        :on-close="hideAIAssistanceModal"
-      >
-        <AIAssistanceModal
-          :ai-option="aiOption"
-          @applyText="insertText"
-          @close="hideAIAssistanceModal"
-        />
-      </woot-modal>
-    </div>
-    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
-      <AIAssistanceCTAButton @click="openAICta" />
-      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
-        <AICTAModal @close="hideAICtaModal" />
-      </woot-modal>
-    </div>
-  </div>
-</template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Shivam Mishra	28fc95ea23	fix: attachment initalization issues	2024-12-24 11:26:38 +05:30
Pranav	924d3ef2df	Merge branch 'develop' into deploy-apr-15	2024-07-10 20:29:13 -07:00
Pranav	4ef06530e5	Merge branch 'develop' into deploy-apr-15	2024-07-10 20:28:53 -07:00
Pranav	3f10e89dba	Merge branch 'develop' into deploy-apr-15	2024-07-08 19:47:10 -07:00
Pranav	184325dcae	Remove channel auth error	2024-05-23 11:18:19 -07:00
Pranav	ce2a4f5c34	Fix minor issues	2024-05-22 21:01:26 -07:00
Pranav	7c2f4ec334	Merge branch 'develop' into deploy-apr-15	2024-05-22 18:18:55 -07:00
Pranav	a69894e0fc	Reset data	2024-05-15 20:52:08 -07:00
Pranav	6f36a02519	Fix missing short summary	2024-05-15 20:45:11 -07:00
Pranav	54e697ec51	Fix report average	2024-05-15 20:43:06 -07:00
Pranav	ee044e8602	Fix timezone issues	2024-05-15 20:42:55 -07:00
Pranav	3b7421221c	new_report -> conversation_report	2024-05-15 20:42:43 -07:00
Pranav	bc9327c09f	Revert changes unrelated to performance	2024-05-15 20:42:32 -07:00
Pranav	ac71dacc61	Update records	2024-05-15 20:41:44 -07:00
Pranav	072c607062	Update	2024-05-15 20:41:08 -07:00
Pranav	4b67066027	Add range filter	2024-05-15 20:38:01 -07:00
Pranav	08834b6016	Update report controller to use the new reports builder	2024-05-15 20:37:54 -07:00
PranavandPranav	cbdc5b1ab0	chore: Temporarily disable the disconnect logic for inboxes (#9321 ) * chore: Temporarily disable the disconnect logic for inboxes * Remove unused spec	2024-05-09 19:01:49 -07:00
Pranav	25c6adbd07	Update the duplicate count event	2024-05-09 19:00:23 -07:00
Pranav	d552b41fac	fix: Terminate IMAP connection after the job is complete (#9225 )	2024-04-15 17:43:18 -07:00
Pranav	a315321c4f	Fix the issues with dropdown	2024-04-15 17:42:12 -07:00
Pranav	2e768e2042	inbox view	2024-02-13 19:12:56 -08:00
Pranav	bd481ad314	Update title	2024-02-13 18:39:59 -08:00
Pranav	b90737ee5d	capitalize	2024-02-13 18:36:50 -08:00
Pranav	6e57e76358	update copy	2024-02-13 18:31:39 -08:00
Pranav	75998945a5	Add agent reports	2024-02-13 18:31:07 -08:00
Pranav	cc80e4122a	update team reports	2024-02-13 18:16:52 -08:00
Pranav	8aa0a347d6	commit 2	2024-02-13 17:32:57 -08:00
Pranav	2a34ceb66b	Commit	2024-02-13 17:32:31 -08:00
Pranav	db30a05b19	Update heatmap report	2024-02-13 15:23:46 -08:00
Pranav	73fcb91ca3	Update filter properly	2024-02-13 14:49:49 -08:00
Pranav	bcd5633d2a	Filter for live conversations	2024-02-13 14:36:04 -08:00
Pranav	1a272e7a18	Remove CSV Safe	2024-02-13 12:32:02 -08:00
Pranav	7d4374a3bf	Added a section for group by teams	2024-02-13 12:26:48 -08:00
Pranav	2617d9b2b7	Merge branch 'develop' into report-rewrite	2024-02-13 10:13:10 -08:00
Pranav	375d216d12	Re-write live-conversations API	2024-02-10 18:41:11 -08:00