feat: Vite + vue 3 💚 (#10047)

Fixes https://github.com/chatwoot/chatwoot/issues/8436 Fixes https://github.com/chatwoot/chatwoot/issues/9767 Fixes https://github.com/chatwoot/chatwoot/issues/10156 Fixes https://github.com/chatwoot/chatwoot/issues/6031 Fixes https://github.com/chatwoot/chatwoot/issues/5696 Fixes https://github.com/chatwoot/chatwoot/issues/9250 Fixes https://github.com/chatwoot/chatwoot/issues/9762 --------- Co-authored-by: Pranav <pranavrajs@gmail.com> Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
2025-10-28 17:52:39 +00:00 · 2024-10-02 13:06:30 +05:30
parent e0bf2bd9d4
commit 42f6621afb
661 changed files with 15939 additions and 31194 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,17 +1,6 @@
 module.exports = {
-  extends: [
-    'airbnb-base/legacy',
-    'prettier',
-    'plugin:vue/recommended',
-    'plugin:storybook/recommended',
-    'plugin:cypress/recommended',
-  ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  plugins: ['html', 'prettier', 'babel'],
+  extends: ['airbnb-base/legacy', 'prettier', 'plugin:vue/recommended'],
+  plugins: ['html', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    camelcase: 'off',
@@ -210,13 +199,6 @@ module.exports = {
    'import/extensions': ['off'],
    'no-console': 'error',
  },
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: 'config/webpack/resolve.js',
-      },
-    },
-  },
  env: {
    browser: true,
    node: true,
--- a/.github/workflows/run_foss_spec.yml
+++ b/.github/workflows/run_foss_spec.yml
@@ -42,7 +42,9 @@ jobs:

    steps:
    - uses: actions/checkout@v4
+    - uses: pnpm/action-setup@v4
      with:
+        version: 9
        ref: ${{ github.event.pull_request.head.ref }}
        repository: ${{ github.event.pull_request.head.repo.full_name }}

@@ -53,10 +55,10 @@ jobs:
    - uses: actions/setup-node@v4
      with:
        node-version: 20
-        cache: yarn
+        cache: 'pnpm'

-    - name: yarn
-      run: yarn install
+    - name: Install pnpm dependencies
+      run: pnpm i

    - name: Strip enterprise code
      run: |
@@ -69,9 +71,6 @@ jobs:
    - name: Seed database
      run: bundle exec rake db:schema:load

-    - name: yarn check-files
-      run: yarn install --check-files
-
    # Run rails tests
    - name: Run backend tests
      run: |
--- a/.gitignore
+++ b/.gitignore
@@ -32,6 +32,16 @@ master.key

 public/uploads
 public/packs*
+public/assets/administrate*
+public/assets/action*.js
+public/assets/activestorage*.js
+public/assets/trix*
+public/assets/belongs_to*.js
+public/assets/manifest*.js
+public/assets/manifest*.js
+public/assets/*.js.gz
+public/assets/secretField*
+public/assets/.sprockets-manifest-*.json

 # VIM files
 *.swp
@@ -75,4 +85,8 @@ yalc.lock
 yarn-debug.log*
 .yarn-integrity

-/storybook-static
+# Vite Ruby
+/public/vite*
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,11 +1,11 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# #!/bin/sh
+# . "$(dirname "$0")/_/husky.sh"

-# lint js and vue files
-npx --no-install lint-staged
+# # lint js and vue files
+# npx --no-install lint-staged

-# lint only staged ruby files
-git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+# # lint only staged ruby files
+# git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a

-# stage rubocop changes to files
-git diff --name-only --cached | xargs git add
+# # stage rubocop changes to files
+# git diff --name-only --cached | xargs git add
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,56 +0,0 @@
-const path = require('path');
-const resolve = require('../config/webpack/resolve');
-
-// Chatwoot's webpack.config.js
-process.env.NODE_ENV = 'development';
-const custom = require('../config/webpack/environment');
-
-module.exports = {
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../app/javascript/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
-    },
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      /**
-       * Fix Storybook issue with PostCSS@8
-       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
-       */
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  webpackFinal: config => {
-    const newConfig = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        modules: custom.resolvedModules.map(i => i.value),
-      },
-    };
-
-    newConfig.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../app/javascript'),
-    });
-
-    return newConfig;
-  },
-};
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,46 +0,0 @@
-import { addDecorator } from '@storybook/vue';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import Multiselect from 'vue-multiselect';
-import VueDOMPurifyHTML from 'vue-dompurify-html';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
-
-import WootUiKit from '../app/javascript/dashboard/components';
-import i18n from '../app/javascript/dashboard/i18n';
-import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
-
-import '../app/javascript/dashboard/assets/scss/storybook.scss';
-
-Vue.use(VueI18n);
-Vue.use(WootUiKit);
-Vue.use(Vuex);
-Vue.use(VueDOMPurifyHTML, domPurifyConfig);
-
-Vue.component('multiselect', Multiselect);
-Vue.component('fluent-icon', FluentIcon);
-
-const store = new Vuex.Store({});
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-addDecorator(() => ({
-  template: '<story/>',
-  i18n: i18nConfig,
-  store,
-  beforeCreate: function () {
-    this.$root._i18n = this.$i18n;
-  },
-}));
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
--- a/4
+++ b/4
@@ -64,7 +64,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
 gem 'puma'
-gem 'webpacker'
+gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'

@@ -204,8 +204,6 @@ group :development do
 end

 group :test do
-  # Cypress in rails.
-  gem 'cypress-on-rails'
  # fast cleaning of database
  gem 'database_cleaner'
  # mock http calls
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -178,8 +178,6 @@ GEM
    csv (3.3.0)
    csv-safe (3.3.1)
      csv (~> 3.0)
-    cypress-on-rails (1.16.0)
-      rack
    database_cleaner (2.0.2)
      database_cleaner-active_record (>= 2, < 3)
    database_cleaner-active_record (2.1.0)
@@ -222,6 +220,7 @@ GEM
      railties (>= 6.1)
    down (5.4.0)
      addressable (~> 2.8)
+    dry-cli (1.1.0)
    ecma-re-validator (0.4.0)
      regexp_parser (~> 2.2)
    elastic-apm (4.6.2)
@@ -496,14 +495,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.6)
+    nokogiri (1.16.7)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.16.6-arm64-darwin)
+    nokogiri (1.16.7-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-darwin)
+    nokogiri (1.16.7-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-linux)
+    nokogiri (1.16.7-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -557,7 +556,7 @@ GEM
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.8.0)
+    racc (1.8.1)
    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
@@ -570,7 +569,7 @@ GEM
    rack-protection (3.2.0)
      base64 (>= 0.1.0)
      rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
      rack
    rack-test (2.1.0)
      rack (>= 1.3)
@@ -709,7 +708,6 @@ GEM
      activerecord (>= 4)
      activesupport (>= 4)
    selectize-rails (0.12.6)
-    semantic_range (3.0.0)
    sentry-rails (5.19.0)
      railties (>= 5.0)
      sentry-ruby (~> 5.19.0)
@@ -800,6 +798,13 @@ GEM
      activemodel (>= 3.2)
      mail (~> 2.5)
    version_gem (1.1.4)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.8.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
    warden (1.2.9)
      rack (>= 2.0.9)
    web-console (4.2.1)
@@ -814,11 +819,6 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
    webrick (1.8.2)
    websocket-driver (0.7.6)
      websocket-extensions (>= 0.1.0)
@@ -827,7 +827,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.16)
+    zeitwerk (2.6.17)

 PLATFORMS
  arm64-darwin-20
@@ -862,7 +862,6 @@ DEPENDENCIES
  climate_control
  commonmarker
  csv-safe
-  cypress-on-rails
  database_cleaner
  ddtrace
  debug (~> 1.8)
@@ -960,10 +959,10 @@ DEPENDENCIES
  tzinfo-data
  uglifier
  valid_email2
+  vite_rails
  web-console (>= 4.2.1)
  web-push (>= 3.0.1)
  webmock
-  webpacker
  wisper (= 2.0.0)
  working_hours

--- a/Procfile.dev
+++ b/Procfile.dev
@@ -1,4 +1,4 @@
 backend: bin/rails s -p 3000
-frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
 # https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
 worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
+vite: bin/vite dev
--- a/Procfile.test
+++ b/Procfile.test
@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
+vite: bin/vite dev
 worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
+## 🚨 Note: This branch is unstable. For the stable branch's source code, please use version 3.x
+
+
 <img src="https://user-images.githubusercontent.com/2246121/282256557-1570674b-d142-4198-9740-69404cc6a339.png#gh-light-mode-only" width="100%" alt="Chat dashboard dark mode"/>
 <img src="https://user-images.githubusercontent.com/2246121/282256632-87f6a01b-6467-4e0e-8a93-7bbf66d03a17.png#gh-dark-mode-only" width="100%" alt="Chat dashboard"/>

 ___

-# Chatwoot 
+# Chatwoot

 Customer engagement suite, an open-source alternative to Intercom, Zendesk, Salesforce Service Cloud etc.
 <p>
@@ -98,7 +101,7 @@ Chatwoot now supports 1-Click deployment to DigitalOcean as a kubernetes app.

 ### Other deployment options

-For other supported options, checkout our [deployment page](https://chatwoot.com/deploy). 
+For other supported options, checkout our [deployment page](https://chatwoot.com/deploy).

 ## Security

--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -2,5 +2,4 @@
 //= link administrate/application.css
 //= link administrate/application.js
 //= link administrate-field-active_storage/application.css
-//= link dashboardChart.js
 //= link secretField.js
--- a/app/assets/javascripts/dashboardChart.js
+++ b/app/assets/javascripts/dashboardChart.js
@@ -1,55 +0,0 @@
-// eslint-disable-next-line
-function prepareData(data) {
-  var labels = [];
-  var dataSet = [];
-  data.forEach(item => {
-    labels.push(item[0]);
-    dataSet.push(item[1]);
-  });
-  return { labels, dataSet };
-}
-
-function getChartOptions() {
-  var fontFamily =
-    'PlusJakarta,-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
-  return {
-    responsive: true,
-    legend: { labels: { fontFamily } },
-    scales: {
-      xAxes: [
-        {
-          barPercentage: 1.26,
-          ticks: { fontFamily },
-          gridLines: { display: false },
-        },
-      ],
-      yAxes: [
-        {
-          ticks: { fontFamily },
-          gridLines: { display: false },
-        },
-      ],
-    },
-  };
-}
-
-// eslint-disable-next-line
-function drawSuperAdminDashboard(data) {
-  var ctx = document.getElementById('dashboard-chart').getContext('2d');
-  var chartData = prepareData(data);
-  // eslint-disable-next-line
-  new Chart(ctx, {
-    type: 'bar',
-    data: {
-      labels: chartData.labels,
-      datasets: [
-        {
-          label: 'Conversations',
-          data: chartData.dataSet,
-          backgroundColor: '#1f93ff',
-        },
-      ],
-    },
-    options: getChartOptions(),
-  });
-}
--- a/app/assets/stylesheets/administrate/utilities/_variables.scss
+++ b/app/assets/stylesheets/administrate/utilities/_variables.scss
@@ -86,8 +86,5 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;

-// Ionicons
-$ionicons-font-path: '~ionicons/fonts';
-
 // Transitions
 $transition-ease-in: all 0.250s ease-in;
--- a/app/controllers/dashboard_controller.rb
+++ b/app/controllers/dashboard_controller.rb
@@ -72,7 +72,7 @@ class DashboardController < ActionController::Base
    @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
                          'v3app'
                        else
-                          'application'
+                          'dashboard'
                        end
  end

--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -1,6 +1,5 @@
 <script>
 import { mapGetters } from 'vuex';
-import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -9,6 +8,8 @@ import UpgradeBanner from './components/app/UpgradeBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
+import { useRouter } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
 import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
@@ -31,6 +32,12 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
+  setup() {
+    const router = useRouter();
+    const store = useStore();
+
+    return { router, store };
+  },
  data() {
    return {
      showAddAccountModal: false,
@@ -38,7 +45,6 @@ export default {
      reconnectService: null,
    };
  },
-
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
@@ -74,7 +80,7 @@ export default {
    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
-  beforeDestroy() {
+  unmounted() {
    if (this.reconnectService) {
      this.reconnectService.disconnect();
    }
@@ -100,8 +106,9 @@ export default {
      const { pubsub_token: pubsubToken } = this.currentUser || {};
      this.setLocale(locale);
      this.latestChatwootVersion = latestChatwootVersion;
-      vueActionCable.init(pubsubToken);
-      this.reconnectService = new ReconnectService(this.$store, router);
+      vueActionCable.init(this.store, pubsubToken);
+      this.reconnectService = new ReconnectService(this.store, this.router);
+      window.reconnectService = this.reconnectService;

      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -129,9 +136,11 @@ export default {
      <PaymentPendingBanner v-if="hideOnOnboardingView" />
      <UpgradeBanner />
    </template>
-    <transition name="fade" mode="out-in">
-      <router-view />
-    </transition>
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <component :is="Component" />
+      </transition>
+    </router-view>
    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
    <WootSnackbarBox />
    <NetworkNotification />
@@ -141,6 +150,22 @@ export default {

 <style lang="scss">
@import './assets/scss/app';
+
+.v-popper--theme-tooltip .v-popper__inner {
+  background: black !important;
+  font-size: 0.75rem;
+  padding: 4px 8px !important;
+  border-radius: 6px;
+  font-weight: 400;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-container {
+  display: none;
+}
+
+.multiselect__input {
+  margin-bottom: 0px !important;
+}
 </style>

-<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
--- a/app/javascript/dashboard/assets/images/auth/auth--bg.svg
+++ b/app/javascript/dashboard/assets/images/auth/auth--bg.svg
--- a/app/javascript/dashboard/assets/images/auth/bottom-right.svg
+++ b/app/javascript/dashboard/assets/images/auth/bottom-right.svg
@@ -0,0 +1,3 @@
+<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H600V200H400V400H200V600H0V800H200H400H600H800V600V400V200V0Z" fill="#2773E4" fill-opacity="0.42"/>
+</svg>
--- a/app/javascript/dashboard/assets/images/auth/top-left.svg
+++ b/app/javascript/dashboard/assets/images/auth/top-left.svg
@@ -0,0 +1,3 @@
+<svg width="600" height="600" viewBox="0 0 600 600" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M200 0H0V200V400V600H200V400H400V200H600V0H400H200Z" fill="#2773E4" fill-opacity="0.42"/>
+</svg>
--- a/app/javascript/dashboard/assets/scss/_animations.scss
+++ b/app/javascript/dashboard/assets/scss/_animations.scss
@@ -31,23 +31,6 @@
  transform: translateX($space-medium);
 }

-.menu-list-enter-active,
-.menu-list-leave-active {
-  transition: opacity 0.3s var(--ease-out-cubic),
-    transform 0.2s var(--ease-out-cubic);
-}
-
-.menu-list-leave-to {
-  opacity: 0;
-  position: absolute;
-  transform: translateX($space-small);
-}
-
-.menu-list-enter {
-  opacity: 0;
-  transform: translateX(-$space-small);
-}
-
 .slide-up-enter-active {
  transition: all 0.3s var(--ease-in-cubic);
 }
@@ -65,7 +48,8 @@
 .menu-slide-enter-active,
 .menu-slide-leave-active {
  transform: translateY(0);
-  transition: transform 0.25s var(--ease-in-cubic),
+  transition:
+    transform 0.25s var(--ease-in-cubic),
    opacity 0.15s var(--ease-in-cubic);
 }

--- a/app/javascript/dashboard/assets/scss/_date-picker.scss
+++ b/app/javascript/dashboard/assets/scss/_date-picker.scss
@@ -1,4 +1,4 @@
-@import '~vue2-datepicker/scss/index';
+@import 'vue-datepicker-next/scss/index';

 .date-picker {
  // To be removed one SLA reports date picker is created
--- a/app/javascript/dashboard/assets/scss/_formulate.scss
+++ b/app/javascript/dashboard/assets/scss/_formulate.scss
@@ -1,4 +1,4 @@
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';

 .formulate-input {
  .formulate-input-errors {
--- a/app/javascript/dashboard/assets/scss/_layout.scss
+++ b/app/javascript/dashboard/assets/scss/_layout.scss
@@ -1,10 +1,11 @@
 // scss-lint:disable SpaceAfterPropertyColon
@import 'shared/assets/fonts/inter';
+
 // Inter,
 html,
 body {
  font-family:
-    'PlusJakarta',
+    'Inter',
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
@@ -23,7 +24,7 @@ body {
 }

 .app-wrapper {
-  @apply h-full flex-grow-0 min-h-0 w-full;
+  @apply h-screen flex-grow-0 min-h-0 w-full;

  .button--fixed-top {
    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
--- a/app/javascript/dashboard/assets/scss/_mixins.scss
+++ b/app/javascript/dashboard/assets/scss/_mixins.scss
@@ -1,5 +1,5 @@
-@import '~dashboard/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'widget/assets/scss/mixins';

 $spinner-before-border-color: rgba(255, 255, 255, 0.7);

--- a/app/javascript/dashboard/assets/scss/_variables.scss
+++ b/app/javascript/dashboard/assets/scss/_variables.scss
@@ -89,9 +89,6 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;

-// Ionicons
-$ionicons-font-path: '~ionicons/fonts';
-
 // Transitions
 $transition-ease-in: all 0.250s ease-in;

--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -2,7 +2,6 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

-@import 'shared/assets/fonts/plus-jakarta';
@import 'shared/assets/fonts/InterDisplay/inter-display';
@import 'shared/assets/fonts/inter';

@@ -34,10 +33,13 @@

@import 'plugins/multiselect';
@import 'plugins/dropdown';
-@import '~shared/assets/stylesheets/ionicons';

 .tooltip {
-  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900 max-w-96;
+}
+
+#app {
+  @apply h-full w-full;
 }

 .hide {
@@ -45,7 +47,6 @@
 }

@layer base {
-
  // scss-lint:disable PropertySortOrder
  :root {
    --color-amber-25: 254 253 251;
--- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
+++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss
@@ -222,6 +222,7 @@

  .multiselect__input {
    @apply h-[2.875rem] min-h-[2.875rem];
+    margin-bottom: 0px !important;
  }

  .multiselect__single {
--- a/app/javascript/dashboard/assets/scss/storybook.scss
+++ b/app/javascript/dashboard/assets/scss/storybook.scss
@@ -1,39 +0,0 @@
-@import 'shared/assets/fonts/inter';
-@import 'shared/assets/fonts/plus-jakarta';
-@import 'shared/assets/stylesheets/animations';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/font-weights';
-@import 'shared/assets/stylesheets/shadows';
-@import 'shared/assets/stylesheets/border-radius';
-@import 'variables';
-
-@import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
-
-@import 'mixins';
-@import 'helper-classes';
-
-@import 'typography';
-@import 'layout';
-@import 'animations';
-
-@import 'widgets/buttons';
-@import 'widgets/base';
-
-@import 'plugins/multiselect';
-
-@import 'widget/assets/scss/reset';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'widget/assets/scss/utilities';
-
-html,
-body {
-  font-family: 'PlusJakarta', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
-}
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.stories.js
@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AccordionItemComponent from './AccordionItem';
-
-export default {
-  title: 'Components/Generic/Accordion',
-  component: AccordionItemComponent,
-  argTypes: {
-    title: {
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AccordionItem: AccordionItemComponent },
-  template: `
-    <accordion-item v-bind="$props" @click="onClick">
-    This is a sample content you can pass as a slot
-    </accordion-item>
-  `,
-});
-
-export const AccordionItem = Template.bind({});
-AccordionItem.args = {
-  onClick: action('Added'),
-  title: 'Title of the accordion item',
-};
--- a/app/javascript/dashboard/components/Accordion/AccordionItem.vue
+++ b/app/javascript/dashboard/components/Accordion/AccordionItem.vue
@@ -1,32 +1,34 @@
-<script>
+<script setup>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import { defineEmits } from 'vue';

-export default {
-  components: {
-    EmojiOrIcon,
+defineProps({
+  title: {
+    type: String,
+    required: true,
  },
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    compact: {
-      type: Boolean,
-      default: false,
-    },
-    icon: {
-      type: String,
-      default: '',
-    },
-    emoji: {
-      type: String,
-      default: '',
-    },
-    isOpen: {
-      type: Boolean,
-      default: true,
-    },
+  compact: {
+    type: Boolean,
+    default: false,
  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  emoji: {
+    type: String,
+    default: '',
+  },
+  isOpen: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['toggle']);
+
+const onToggle = () => {
+  emit('toggle');
 };
 </script>

@@ -34,7 +36,7 @@ export default {
  <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')"
+      @click.stop="onToggle"
    >
      <div class="flex justify-between mb-0.5">
        <EmojiOrIcon class="inline-block w-5" :icon="icon" :emoji="emoji" />
--- a/app/javascript/dashboard/components/ChannelSelector.vue
+++ b/app/javascript/dashboard/components/ChannelSelector.vue
@@ -16,7 +16,6 @@ export default {
 <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
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -61,7 +61,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
      </span>
    </div>
    <div class="flex items-center gap-1">
-      <div v-if="hasAppliedFilters && !hasActiveFolders">
+      <template v-if="hasAppliedFilters && !hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
          size="tiny"
@@ -78,8 +78,8 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          icon="dismiss-circle"
          @click="emit('resetFilters')"
        />
-      </div>
-      <div v-if="hasActiveFolders">
+      </template>
+      <template v-if="hasActiveFolders">
        <woot-button
          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
          size="tiny"
@@ -96,7 +96,7 @@ const hasAppliedFiltersOrActiveFolders = computed(() => {
          icon="delete"
          @click="emit('deleteFolders')"
        />
-      </div>
+      </template>
      <woot-button
        v-else
        v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -1,5 +1,7 @@
 <script>
 import 'highlight.js/styles/default.css';
+import 'highlight.js/lib/common';
+
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { useAlert } from 'dashboard/composables';

@@ -28,14 +30,28 @@ export default {
      return JSON.stringify({
        title: this.codepenTitle,
        private: true,
-        [lang]: this.script,
+        [lang]: this.scrubbedScript,
      });
    },
+    scrubbedScript() {
+      // remove trailing and leading extra lines and not spaces
+      const scrubbed = this.script.replace(/^\s*[\r\n]/gm, '');
+      const lines = scrubbed.split('\n');
+
+      // remove extra indentations
+      const minIndent = lines.reduce((min, line) => {
+        if (line.trim().length === 0) return min;
+        const indent = line.match(/^\s*/)[0].length;
+        return Math.min(min, indent);
+      }, Infinity);
+
+      return lines.map(line => line.slice(minIndent)).join('\n');
+    },
  },
  methods: {
    async onCopy(e) {
      e.preventDefault();
-      await copyTextToClipboard(this.script);
+      await copyTextToClipboard(this.scrubbedScript);
      useAlert(this.$t('COMPONENTS.CODE.COPY_SUCCESSFUL'));
    },
  },
@@ -43,42 +59,24 @@ export default {
 </script>

 <template>
-  <div class="code--container">
-    <div class="code--action-area">
+  <div class="relative text-left">
+    <div class="top-1.5 absolute right-1.5 flex items-center gap-1">
      <form
        v-if="enableCodePen"
-        class="code--codeopen-form"
+        class="flex items-center"
        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">
+      <button type="button" class="button secondary tiny" @click="onCopy">
        {{ $t('COMPONENTS.CODE.BUTTON_TEXT') }}
      </button>
    </div>
-    <highlightjs v-if="script" :language="lang" :code="script" />
+    <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
  </div>
 </template>
-
-<style lang="scss" scoped>
-.code--container {
-  position: relative;
-  text-align: left;
-
-  .code--action-area {
-    top: var(--space-small);
-    position: absolute;
-    right: var(--space-small);
-  }
-
-  .code--codeopen-form {
-    display: inline-block;
-  }
-}
-</style>
--- a/app/javascript/dashboard/components/ConversationItem.vue
+++ b/app/javascript/dashboard/components/ConversationItem.vue
@@ -14,6 +14,7 @@ export default {
    'toggleContextMenu',
    'markAsUnread',
    'assignPriority',
+    'isConversationSelected',
  ],
  props: {
    source: {
@@ -36,10 +37,6 @@ export default {
      type: [String, Number],
      default: 0,
    },
-    isConversationSelected: {
-      type: Function,
-      default: () => {},
-    },
    showAssignee: {
      type: Boolean,
      default: false,
--- a/app/javascript/dashboard/components/CustomAttribute.vue
+++ b/app/javascript/dashboard/components/CustomAttribute.vue
@@ -7,6 +7,7 @@ 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 { emitter } from 'shared/helpers/mitt';

 const DATE_FORMAT = 'yyyy-MM-dd';

@@ -135,10 +136,10 @@ export default {
  },
  mounted() {
    this.editedValue = this.formattedValue;
-    this.$emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    emitter.on(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  destroyed() {
-    this.$emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
+    emitter.off(BUS_EVENTS.FOCUS_CUSTOM_ATTRIBUTE, this.onFocusAttribute);
  },
  methods: {
    onFocusAttribute(focusAttributeKey) {
@@ -321,7 +322,7 @@ export default {
            'CUSTOM_ATTRIBUTES.FORM.ATTRIBUTE_TYPE.LIST.SEARCH_INPUT_PLACEHOLDER'
          )
        "
-        @click="onUpdateListValue"
+        @select="onUpdateListValue"
      />
    </div>
  </div>
--- a/app/javascript/dashboard/components/CustomSnoozeModal.vue
+++ b/app/javascript/dashboard/components/CustomSnoozeModal.vue
@@ -1,5 +1,5 @@
 <script>
-import DatePicker from 'vue2-datepicker';
+import DatePicker from 'vue-datepicker-next';

 export default {
  components: {
@@ -45,7 +45,7 @@ export default {
    <woot-modal-header :header-title="$t('CONVERSATION.CUSTOM_SNOOZE.TITLE')" />
    <form class="modal-content" @submit.prevent="chooseTime">
      <DatePicker
-        v-model="snoozeTime"
+        v-model:value="snoozeTime"
        type="datetime"
        inline
        :lang="lang"
--- a/app/javascript/dashboard/components/IntersectionObserver.vue
+++ b/app/javascript/dashboard/components/IntersectionObserver.vue
@@ -1,32 +1,26 @@
-<script>
-export default {
-  props: {
-    options: {
-      type: Object,
-      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
-    },
+<script setup>
+import { ref, defineEmits } from 'vue';
+import { useIntersectionObserver } from '@vueuse/core';
+
+const { options } = defineProps({
+  options: {
+    type: Object,
+    default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
  },
-  mounted() {
-    this.intersectionObserver = null;
-    this.registerInfiniteLoader();
+});
+
+const emit = defineEmits(['observed']);
+const observedElement = ref('');
+
+useIntersectionObserver(
+  observedElement,
+  ([{ isIntersecting }]) => {
+    if (isIntersecting) {
+      emit('observed');
+    }
  },
-  beforeDestroy() {
-    this.unobserveInfiniteLoadObserver();
-  },
-  methods: {
-    registerInfiniteLoader() {
-      this.intersectionObserver = new IntersectionObserver(entries => {
-        if (entries && entries[0].isIntersecting) {
-          this.$emit('observed');
-        }
-      }, this.options);
-      this.intersectionObserver.observe(this.$refs.observedElement);
-    },
-    unobserveInfiniteLoadObserver() {
-      this.intersectionObserver.unobserve(this.$refs.observedElement);
-    },
-  },
-};
+  options
+);
 </script>

 <template>
--- a/app/javascript/dashboard/components/Modal.vue
+++ b/app/javascript/dashboard/components/Modal.vue
@@ -1,78 +1,68 @@
-<script>
-export default {
-  props: {
-    closeOnBackdropClick: {
-      type: Boolean,
-      default: true,
-    },
-    show: Boolean,
-    showCloseButton: {
-      type: Boolean,
-      default: true,
-    },
-    onClose: {
-      type: Function,
-      required: true,
-    },
-    fullWidth: {
-      type: Boolean,
-      default: false,
-    },
-    modalType: {
-      type: String,
-      default: 'centered',
-    },
-    size: {
-      type: String,
-      default: '',
-    },
-  },
-  data() {
-    return {
-      mousedDownOnBackdrop: false,
-    };
-  },
-  computed: {
-    modalClassName() {
-      const modalClassNameMap = {
-        centered: '',
-        'right-aligned': 'right-aligned',
-      };
+<script setup>
+// [TODO] Use Teleport to move the modal to the end of the body
+import { ref, computed, defineEmits, onMounted } from 'vue';
+import { useEventListener } from '@vueuse/core';

-      return `modal-mask skip-context-menu ${
-        modalClassNameMap[this.modalType] || ''
-      }`;
-    },
-  },
-  mounted() {
-    document.addEventListener('keydown', e => {
-      if (this.show && e.code === 'Escape') {
-        this.onClose();
-      }
-    });
+const { show, modalType, closeOnBackdropClick, onClose } = defineProps({
+  closeOnBackdropClick: { type: Boolean, default: true },
+  show: Boolean,
+  showCloseButton: { type: Boolean, default: true },
+  onClose: { type: Function, required: true },
+  fullWidth: { type: Boolean, default: false },
+  modalType: { type: String, default: 'centered' },
+  size: { type: String, default: '' },
+});

-    document.body.addEventListener('mouseup', this.onMouseUp);
-  },
-  beforeDestroy() {
-    document.body.removeEventListener('mouseup', this.onMouseUp);
-  },
-  methods: {
-    handleMouseDown() {
-      this.mousedDownOnBackdrop = true;
-    },
-    close() {
-      this.onClose();
-    },
-    onMouseUp() {
-      if (this.mousedDownOnBackdrop) {
-        this.mousedDownOnBackdrop = false;
-        if (this.closeOnBackdropClick) {
-          this.onClose();
-        }
-      }
-    },
-  },
+const emit = defineEmits(['close']);
+
+const modalClassName = computed(() => {
+  const modalClassNameMap = {
+    centered: '',
+    'right-aligned': 'right-aligned',
+  };
+
+  return `modal-mask skip-context-menu ${modalClassNameMap[modalType] || ''}`;
+});
+
+// [TODO] Revisit this logic to use outside click directive
+const mousedDownOnBackdrop = ref(false);
+
+const handleMouseDown = () => {
+  mousedDownOnBackdrop.value = true;
 };
+
+const close = () => {
+  emit('close');
+  onClose();
+};
+
+const onMouseUp = () => {
+  if (mousedDownOnBackdrop.value) {
+    mousedDownOnBackdrop.value = false;
+    if (closeOnBackdropClick) {
+      onClose();
+    }
+  }
+};
+
+const onKeydown = e => {
+  if (show && e.code === 'Escape') {
+    onClose();
+    e.stopPropagation();
+  }
+};
+
+useEventListener(document.body, 'mouseup', onMouseUp);
+useEventListener(document, 'keydown', onKeydown);
+
+onMounted(() => {
+  if (onClose && typeof onClose === 'function') {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."
+    );
+  }
+});
 </script>

 <template>
--- a/app/javascript/dashboard/components/NetworkNotification.vue
+++ b/app/javascript/dashboard/components/NetworkNotification.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref, computed, onBeforeUnmount } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
-import { useRoute } from 'dashboard/composables/route';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
--- a/app/javascript/dashboard/components/SidemenuIcon.vue
+++ b/app/javascript/dashboard/components/SidemenuIcon.vue
@@ -1,5 +1,6 @@
 <script>
 import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { emitter } from 'shared/helpers/mitt';

 export default {
  props: {
@@ -10,7 +11,7 @@ export default {
  },
  methods: {
    onMenuItemClick() {
-      this.$emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
+      emitter.emit(BUS_EVENTS.TOGGLE_SIDEMENU);
    },
  },
 };
--- a/app/javascript/dashboard/components/SnackbarContainer.vue
+++ b/app/javascript/dashboard/components/SnackbarContainer.vue
@@ -1,5 +1,6 @@
 <script>
 import WootSnackbar from './Snackbar.vue';
+import { emitter } from 'shared/helpers/mitt';

 export default {
  components: {
@@ -19,10 +20,10 @@ export default {
  },

  mounted() {
-    this.$emitter.on('newToastMessage', this.onNewToastMessage);
+    emitter.on('newToastMessage', this.onNewToastMessage);
  },
-  beforeDestroy() {
-    this.$emitter.off('newToastMessage', this.onNewToastMessage);
+  unmounted() {
+    emitter.off('newToastMessage', this.onNewToastMessage);
  },
  methods: {
    onNewToastMessage({ message, action }) {
--- a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -86,6 +86,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @click="routeToBilling"
+    @primaryAction="routeToBilling"
  />
 </template>
--- a/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
+++ b/app/javascript/dashboard/components/app/PendingEmailVerificationBanner.vue
@@ -36,6 +36,6 @@ export default {
    :action-button-label="actionButtonMessage"
    action-button-icon="mail"
    has-action-button
-    @click="resendVerificationEmail"
+    @primaryAction="resendVerificationEmail"
  />
 </template>
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -88,6 +88,6 @@ export default {
    :banner-message="bannerMessage"
    :action-button-label="actionButtonMessage"
    has-action-button
-    @click="routeToBilling"
+    @primaryAction="routeToBilling"
  />
 </template>
--- a/app/javascript/dashboard/components/buttons/Button.vue
+++ b/app/javascript/dashboard/components/buttons/Button.vue
@@ -27,16 +27,17 @@ export default {
      default: 'primary',
    },
  },
-  methods: {
-    onClick(e) {
-      this.$emit('click', e);
-    },
+  created() {
+    // eslint-disable-next-line
+    console.warn(
+      '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
+    );
  },
 };
 </script>

 <template>
-  <button :type="type" class="button nice" :class="variant" @click="onClick">
+  <button :type="type" class="button nice" :class="variant">
    <fluent-icon
      v-if="!isLoading && icon"
      class="icon"
--- a/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
+++ b/app/javascript/dashboard/components/buttons/FormSubmitButton.vue
@@ -40,11 +40,6 @@ export default {
      return `button nice gap-2 ${this.buttonClass || ' '}`;
    },
  },
-  methods: {
-    onClick() {
-      this.$emit('click');
-    },
-  },
 };
 </script>

@@ -54,7 +49,6 @@ export default {
    data-testid="submit_button"
    :disabled="disabled"
    :class="computedClass"
-    @click="onClick"
  >
    <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
    <span>{{ buttonText }}</span>
--- a/app/javascript/dashboard/components/buttons/ResolveAction.vue
+++ b/app/javascript/dashboard/components/buttons/ResolveAction.vue
@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useAlert } from 'dashboard/composables';
 import { useToggle } from '@vueuse/core';
-import { useI18n } from 'dashboard/composables/useI18n';
+import { useI18n } from 'vue-i18n';
 import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { useEmitter } from 'dashboard/composables/emitter';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -1,45 +1,40 @@
+// [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
-import Bar from './widgets/chart/BarChart';
-import Button from './ui/WootButton';
-import Code from './Code';
-import ColorPicker from './widgets/ColorPicker';
+import Button from './ui/WootButton.vue';
+import Code from './Code.vue';
+import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
-import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
-import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
-import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
-import FeatureToggle from './widgets/FeatureToggle';
-import HorizontalBar from './widgets/chart/HorizontalBarChart';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import FeatureToggle from './widgets/FeatureToggle.vue';
 import Input from './widgets/forms/Input.vue';
 import PhoneInput from './widgets/forms/PhoneInput.vue';
-import Label from './ui/Label';
-import LoadingState from './widgets/LoadingState';
-import Modal from './Modal';
-import ModalHeader from './ModalHeader';
-import SidemenuIcon from './SidemenuIcon';
-import Spinner from 'shared/components/Spinner';
-import SubmitButton from './buttons/FormSubmitButton';
-import Tabs from './ui/Tabs/Tabs';
-import TabsItem from './ui/Tabs/TabsItem';
+import Label from './ui/Label.vue';
+import LoadingState from './widgets/LoadingState.vue';
+import ModalHeader from './ModalHeader.vue';
+import Modal from './Modal.vue';
+import SidemenuIcon from './SidemenuIcon.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import SubmitButton from './buttons/FormSubmitButton.vue';
+import Tabs from './ui/Tabs/Tabs.vue';
+import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';
 import DatePicker from './ui/DatePicker/DatePicker.vue';

 const WootUIKit = {
  AvatarUploader,
-  Bar,
  Button,
  Code,
  ColorPicker,
  ConfirmDeleteModal,
  ConfirmModal,
-  ContextMenu,
  DeleteModal,
  DropdownItem,
  DropdownMenu,
  FeatureToggle,
-  HorizontalBar,
  Input,
  PhoneInput,
  Label,
--- a/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
+++ b/app/javascript/dashboard/components/layout/AvailabilityStatus.vue
@@ -31,26 +31,29 @@ export default {
      currentAccountId: 'getCurrentAccountId',
      currentUserAutoOffline: 'getCurrentUserAutoOffline',
    }),
+    statusList() {
+      return [
+        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.ONLINE'),
+        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.BUSY'),
+        this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUS.OFFLINE'),
+      ];
+    },
    availabilityDisplayLabel() {
      const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
        key => key === this.currentUserAvailability
      );
-      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST')[
-        availabilityIndex
-      ];
+      return this.statusList[availabilityIndex];
    },
    currentUserAvailability() {
      return this.getCurrentUserAvailability;
    },
    availabilityStatuses() {
-      return this.$t('PROFILE_SETTINGS.FORM.AVAILABILITY.STATUSES_LIST').map(
-        (statusLabel, index) => ({
-          label: statusLabel,
-          value: AVAILABILITY_STATUS_KEYS[index],
-          disabled:
-            this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
-        })
-      );
+      return this.statusList.map((statusLabel, index) => ({
+        label: statusLabel,
+        value: AVAILABILITY_STATUS_KEYS[index],
+        disabled:
+          this.currentUserAvailability === AVAILABILITY_STATUS_KEYS[index],
+      }));
    },
  },

@@ -129,7 +132,7 @@ export default {
      <woot-switch
        size="small"
        class="mx-1 mt-px mb-0"
-        :value="currentUserAutoOffline"
+        :model-value="currentUserAutoOffline"
        @input="updateAutoOffline"
      />
    </WootDropdownItem>
--- a/app/javascript/dashboard/components/layout/Sidebar.vue
+++ b/app/javascript/dashboard/components/layout/Sidebar.vue
@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { getSidebarItems } from './config/default-sidebar';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useRoute, useRouter } from 'dashboard/composables/route';
+import { useRoute, useRouter } from 'vue-router';

 import PrimarySidebar from './sidebarComponents/Primary.vue';
 import SecondarySidebar from './sidebarComponents/Secondary.vue';
@@ -22,9 +22,9 @@ export default {
      type: Boolean,
      default: true,
    },
-    sidebarClassName: {
-      type: String,
-      default: '',
+    hasBanner: {
+      type: Boolean,
+      default: false,
    },
  },
  setup(props, { emit }) {
@@ -159,6 +159,17 @@ export default {
        ) || {};
      return activePrimaryMenu;
    },
+    hasSecondaryMenu() {
+      return (
+        this.activeSecondaryMenu.menuItems &&
+        this.activeSecondaryMenu.menuItems.length
+      );
+    },
+    hasSecondarySidebar() {
+      // if it is explicitly stated to show and it has secondary menu items to show
+      // showSecondarySidebar corresponds to the UI settings, indicating if the user has toggled it
+      return this.showSecondarySidebar && this.hasSecondaryMenu;
+    },
  },

  watch: {
@@ -211,8 +222,7 @@ export default {
      @openNotificationPanel="openNotificationPanel"
    />
    <SecondarySidebar
-      v-if="showSecondarySidebar"
-      :class="sidebarClassName"
+      v-if="hasSecondarySidebar"
      :account-id="accountId"
      :inboxes="inboxes"
      :labels="labels"
--- a/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/AddAccountModal.vue
@@ -1,7 +1,7 @@
 <script>
-import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
+import { useVuelidate } from '@vuelidate/core';
 import { useAlert } from 'dashboard/composables';

 export default {
@@ -23,11 +23,13 @@ export default {
      accountName: '',
    };
  },
-  validations: {
-    accountName: {
-      required,
-      minLength: minLength(1),
-    },
+  validations() {
+    return {
+      accountName: {
+        required,
+        minLength: minLength(1),
+      },
+    };
  },
  computed: {
    ...mapGetters({
@@ -76,7 +78,7 @@ export default {
          <label :class="{ error: v$.accountName.$error }">
            {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
            <input
-              v-model.trim="accountName"
+              v-model="accountName"
              type="text"
              :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
              @input="v$.accountName.$touch"
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Primary.vue
@@ -7,6 +7,7 @@ import NotificationBell from './NotificationBell.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
 import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { useTrack } from 'dashboard/composables';

 export default {
  components: {
@@ -60,7 +61,7 @@ export default {
      window.$chatwoot.toggle();
    },
    openNotificationPanel() {
-      this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
+      useTrack(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
      this.$emit('openNotificationPanel');
    },
  },
--- a/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/Secondary.vue
@@ -53,9 +53,6 @@ export default {
    ...mapGetters({
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
    }),
-    hasSecondaryMenu() {
-      return this.menuConfig.menuItems && this.menuConfig.menuItems.length;
-    },
    contactCustomViews() {
      return this.customViews.filter(view => view.filter_type === 'contact');
    },
@@ -243,7 +240,6 @@ export default {

 <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" />
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryChildNavItem.vue
@@ -58,7 +58,7 @@ export default {
    active-class="active"
  >
    <li
-      class="font-medium h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
+      class="h-7 my-1 hover:bg-slate-25 hover:text-bg-50 flex items-center px-2 rounded-md dark:hover:bg-slate-800"
      :class="{
        'bg-woot-25 dark:bg-slate-800': isActive,
        'text-ellipsis overflow-hidden whitespace-nowrap max-w-full':
@@ -105,12 +105,11 @@ export default {
          </span>
          <span
            v-if="showChildCount"
-            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs font-medium mx-1 py-0 px-1"
-            :class="
-              isCountZero
+            class="bg-slate-50 dark:bg-slate-700 rounded-full min-w-[18px] justify-center items-center flex text-xxs mx-1 py-0 px-1"
+            :class="isCountZero
                ? `text-slate-300 dark:text-slate-500`
                : `text-slate-700 dark:text-slate-50`
-            "
+              "
          >
            {{ childItemCount }}
          </span>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@@ -102,7 +102,7 @@ export default {
    },
    isInboxSettings() {
      return (
-        this.$store.state.route.name === 'settings_inbox_show' &&
+        this.$route.name === 'settings_inbox_show' &&
        this.menuItem.toStateName === 'settings_inbox_list'
      );
    },
@@ -208,7 +208,7 @@ export default {
    </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="flex items-center p-2 m-0 text-sm 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"
    >
@@ -220,7 +220,7 @@ export default {
      {{ $t(`SIDEBAR.${menuItem.label}`) }}
      <span
        v-if="showChildCount(menuItem.count)"
-        class="px-1 py-0 mx-1 font-medium rounded-md text-xxs"
+        class="px-1 py-0 mx-1 rounded-md text-xxs"
        :class="{
          'text-slate-300 dark:text-slate-600': isCountZero && !isActiveView,
          'text-slate-600 dark:text-slate-50': !isCountZero && !isActiveView,
@@ -235,7 +235,7 @@ export default {
        v-if="menuItem.beta"
        data-view-component="true"
        label="Beta"
-        class="inline-block px-1 mx-1 font-medium leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
+        class="inline-block px-1 mx-1 leading-4 text-green-500 border border-green-400 rounded-lg text-xxs"
      >
        {{ $t('SIDEBAR.BETA') }}
      </span>
--- a/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/specs/AgentDetails.spec.js
@@ -2,7 +2,6 @@ import AgentDetails from '../AgentDetails.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import VTooltip from 'v-tooltip';

 import i18n from 'dashboard/i18n';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
--- a/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
+++ b/app/javascript/dashboard/components/layout/specs/AvailabilityStatus.spec.js
@@ -2,7 +2,7 @@ import AvailabilityStatus from '../AvailabilityStatus.vue';
 import { createLocalVue, mount } from '@vue/test-utils';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import VTooltip from 'v-tooltip';
+import FloatingVue from 'floating-vue';

 import WootButton from 'dashboard/components/ui/WootButton.vue';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
@@ -14,8 +14,8 @@ import FluentIcon from 'shared/components/FluentIcon/DashboardIcon.vue';
 import i18n from 'dashboard/i18n';

 const localVue = createLocalVue();
-localVue.use(VTooltip, {
-  defaultHtml: false,
+localVue.use(FloatingVue, {
+  html: false,
 });
 localVue.use(Vuex);
 localVue.use(VueI18n);
--- a/app/javascript/dashboard/components/table/BaseCell.vue
+++ b/app/javascript/dashboard/components/table/BaseCell.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { useMapGetter } from 'dashboard/composables/store';
+
+defineProps({
+  content: {
+    type: String,
+    default: '',
+  },
+});
+
+const isRTL = useMapGetter('accounts/isRTL');
+</script>
+
+<template>
+  <div
+    class="overflow-hidden whitespace-nowrap text-ellipsis"
+    :class="{ 'text-right': isRTL }"
+  >
+    <slot v-if="$slots.default || content">
+      <template v-if="content">{{ content }}</template>
+    </slot>
+    <span v-else class="text-slate-300 dark:text-slate-700"> --- </span>
+  </div>
+</template>
--- a/app/javascript/dashboard/components/table/Pagination.vue
+++ b/app/javascript/dashboard/components/table/Pagination.vue
@@ -0,0 +1,117 @@
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+});
+
+const getFormattedPages = (start, end) => {
+  const formatter = new Intl.NumberFormat(navigator.language);
+  return Array.from({ length: end - start + 1 }, (_, i) =>
+    formatter.format(start + i)
+  );
+};
+
+const currentPage = computed(() => {
+  return props.table.getState().pagination.pageIndex + 1;
+});
+
+const totalPages = computed(() => {
+  return props.table.getPageCount();
+});
+
+const visiblePages = computed(() => {
+  if (totalPages.value <= 3) return getFormattedPages(1, totalPages.value);
+  if (currentPage.value === 1) return getFormattedPages(1, 3);
+  if (currentPage.value === totalPages.value) {
+    return getFormattedPages(totalPages.value - 2, totalPages.value);
+  }
+
+  return getFormattedPages(currentPage.value - 1, currentPage.value + 1);
+});
+
+const total = computed(() => {
+  return props.table.getRowCount();
+});
+
+const start = computed(() => {
+  const { pagination } = props.table.getState();
+  return pagination.pageIndex * pagination.pageSize + 1;
+});
+
+const end = computed(() => {
+  const { pagination } = props.table.getState();
+  return Math.min(
+    (pagination.pageIndex + 1) * pagination.pageSize,
+    total.value
+  );
+});
+</script>
+
+<template>
+  <div class="flex items-center justify-between">
+    <div class="flex flex-1 items-center justify-between">
+      <div>
+        <p class="text-sm text-gray-700">
+          {{ $t('REPORT.PAGINATION.RESULTS', { start, end, total }) }}
+        </p>
+      </div>
+      <nav class="isolate inline-flex gap-1">
+        <woot-button
+          :disabled="!table.getCanPreviousPage()"
+          variant="clear"
+          class="size-8 flex items-center border border-slate-50"
+          color-scheme="secondary"
+          @click="table.setPageIndex(0)"
+        >
+          <span class="i-lucide-chevrons-left size-3" aria-hidden="true" />
+        </woot-button>
+        <woot-button
+          variant="clear"
+          class="size-8 flex items-center border border-slate-50"
+          color-scheme="secondary"
+          :disabled="!table.getCanPreviousPage()"
+          @click="table.previousPage()"
+        >
+          <span class="i-lucide-chevron-left size-3" aria-hidden="true" />
+        </woot-button>
+        <woot-button
+          v-for="page in visiblePages"
+          :key="page"
+          variant="clear"
+          class="size-8 flex items-center justify-center border text-xs leading-none text-center"
+          :class="page == currentPage ? 'border-woot-500' : 'border-slate-50'"
+          color-scheme="secondary"
+          @click="table.setPageIndex(page - 1)"
+        >
+          <div
+            class="text-center"
+            :class="{ 'text-woot-500': page == currentPage }"
+          >
+            {{ page }}
+          </div>
+        </woot-button>
+        <woot-button
+          :disabled="!table.getCanNextPage()"
+          variant="clear"
+          class="size-8 flex items-center border border-slate-50"
+          color-scheme="secondary"
+          @click="table.nextPage()"
+        >
+          <span class="i-lucide-chevron-right size-3" aria-hidden="true" />
+        </woot-button>
+        <woot-button
+          :disabled="!table.getCanNextPage()"
+          variant="clear"
+          class="size-8 flex items-center border border-slate-50"
+          color-scheme="secondary"
+          @click="table.setPageIndex(table.getPageCount() - 1)"
+        >
+          <span class="i-lucide-chevrons-right size-3" aria-hidden="true" />
+        </woot-button>
+      </nav>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components/table/SortButton.vue
+++ b/app/javascript/dashboard/components/table/SortButton.vue
@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  header: {
+    type: Object,
+    required: true,
+  },
+});
+
+const sortIconMap = {
+  default: 'i-lucide-chevrons-up-down',
+  asc: 'i-lucide-chevron-up',
+  desc: 'i-lucide-chevron-down',
+};
+</script>
+
+<template>
+  <span :class="sortIconMap[header.column.getIsSorted() || 'default']" />
+</template>
--- a/app/javascript/dashboard/components/table/Table.vue
+++ b/app/javascript/dashboard/components/table/Table.vue
@@ -0,0 +1,65 @@
+<script setup>
+import { FlexRender } from '@tanstack/vue-table';
+import SortButton from './SortButton.vue';
+
+defineProps({
+  table: {
+    type: Object,
+    required: true,
+  },
+  fixed: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <table :class="{ 'table-fixed': fixed }">
+    <thead
+      class="sticky top-0 z-10 border-b border-slate-50 dark:border-slate-800 bg-slate-25 dark:bg-slate-800"
+    >
+      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+        <th
+          v-for="header in headerGroup.headers"
+          :key="header.id"
+          :style="{
+            width: `${header.getSize()}px`,
+          }"
+          class="text-left py-3 px-5 dark:bg-slate-800 text-slate-800 dark:text-slate-200 font-normal text-xs"
+          @click="header.column.getCanSort() && header.column.toggleSorting()"
+        >
+          <div
+            v-if="!header.isPlaceholder"
+            class="flex place-items-center gap-1"
+          >
+            <FlexRender
+              :render="header.column.columnDef.header"
+              :props="header.getContext()"
+            />
+            <SortButton v-if="header.column.getCanSort()" :header="header" />
+          </div>
+        </th>
+      </tr>
+    </thead>
+
+    <tbody class="divide-y divide-slate-25 dark:divide-slate-900">
+      <tr
+        v-for="row in table.getRowModel().rows"
+        :key="row.id"
+        class="hover:bg-slate-25 dark:hover:bg-slate-800"
+      >
+        <td
+          v-for="cell in row.getVisibleCells()"
+          :key="cell.id"
+          class="py-2 px-5"
+        >
+          <FlexRender
+            :render="cell.column.columnDef.cell"
+            :props="cell.getContext()"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -50,7 +50,7 @@ export default {
  },
  methods: {
    onClick(e) {
-      this.$emit('click', e);
+      this.$emit('primaryAction', e);
    },
    onClickClose(e) {
      this.$emit('close', e);
@@ -61,7 +61,7 @@ export default {

 <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="flex items-center justify-center h-12 gap-4 px-4 py-3 text-xs text-white banner dark:text-white woot-banner"
    :class="bannerClasses"
  >
    <span class="banner-message">
--- a/app/javascript/dashboard/components/ui/ContextMenu.vue
+++ b/app/javascript/dashboard/components/ui/ContextMenu.vue
@@ -1,43 +1,38 @@
-<script>
-export default {
-  props: {
-    x: {
-      type: Number,
-      default: 0,
-    },
-    y: {
-      type: Number,
-      default: 0,
-    },
-  },
-  data() {
-    return {
-      left: this.x,
-      top: this.y,
-      show: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        top: this.top + 'px',
-        left: this.left + 'px',
-      };
-    },
-  },
-  mounted() {
-    this.$nextTick(() => this.$el.focus());
-  },
-};
+<script setup>
+import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
+
+const { x, y } = defineProps({
+  x: { type: Number, default: 0 },
+  y: { type: Number, default: 0 },
+});
+const emit = defineEmits(['close']);
+
+const left = ref(x);
+const top = ref(y);
+
+const style = computed(() => ({
+  top: top.value + 'px',
+  left: left.value + 'px',
+}));
+
+const target = ref();
+onMounted(() => {
+  nextTick(() => {
+    target.value.focus();
+  });
+});
 </script>

 <template>
-  <div
-    class="fixed outline-none z-[9999] cursor-pointer"
-    :style="style"
-    tabindex="0"
-    @blur="$emit('close')"
-  >
-    <slot />
-  </div>
+  <Teleport to="body">
+    <div
+      ref="target"
+      class="fixed outline-none z-[9999] cursor-pointer"
+      :style="style"
+      tabindex="0"
+      @blur="emit('close')"
+    >
+      <slot />
+    </div>
+  </Teleport>
 </template>
--- a/app/javascript/dashboard/components/ui/DateRangePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateRangePicker.vue
@@ -1,5 +1,5 @@
 <script>
-import DatePicker from 'vue2-datepicker';
+import DatePicker from 'vue-datepicker-next';
 export default {
  components: { DatePicker },
  props: {
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -1,6 +1,6 @@
 <script>
 import addDays from 'date-fns/addDays';
-import DatePicker from 'vue2-datepicker';
+import DatePicker from 'vue-datepicker-next';
 export default {
  components: { DatePicker },
  props: {
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownButton.vue
@@ -18,7 +18,6 @@ defineProps({
 <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"
-    @click="$emit('click')"
  >
    <slot name="leftIcon">
      <fluent-icon
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownList.vue
@@ -38,15 +38,19 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['onSearch']);
+const emit = defineEmits(['onSearch', 'select']);

 const searchTerm = ref('');

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

+const onSearch = value => {
+  searchTerm.value = value;
+  debouncedEmit();
+};
+
 const filteredListItems = computed(() => {
  if (!searchTerm.value) return props.listItems;
  return picoSearch(props.listItems, searchTerm.value, ['name']);
@@ -84,7 +88,7 @@ const shouldShowEmptyState = computed(() => {
        :input-placeholder="inputPlaceholder"
        :show-clear-filter="showClearFilter"
        @input="onSearch"
-        @click="$emit('removeFilter')"
+        @remove="$emit('removeFilter')"
      />
    </slot>
    <slot name="listItem">
@@ -103,7 +107,7 @@ const shouldShowEmptyState = computed(() => {
        :button-text="item.name"
        :icon="item.icon"
        :icon-color="item.iconColor"
-        @click="$emit('click', item)"
+        @click.stop.prevent="emit('select', item)"
      />
    </slot>
  </div>
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownListItemButton.vue
@@ -22,10 +22,6 @@ defineProps({
 <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"
-    @click.stop.prevent="$emit('click')"
-    @mouseenter="$emit('mouseenter')"
-    @mouseleave="$emit('mouseleave')"
-    @focus="$emit('focus')"
  >
    <div class="inline-flex items-center gap-3 overflow-hidden">
      <fluent-icon
--- a/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
+++ b/app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { defineEmits } from 'vue';
 defineProps({
  inputValue: {
    type: String,
@@ -13,6 +14,8 @@ defineProps({
    default: false,
  },
 });
+
+const emit = defineEmits(['input', 'remove']);
 </script>

 <template>
@@ -30,7 +33,7 @@ defineProps({
        class="w-full mb-0 text-sm bg-white dark:bg-slate-800 text-slate-800 dark:text-slate-75 reset-base"
        :placeholder="inputPlaceholder"
        :value="inputValue"
-        @input="$emit('input', $event.target.value)"
+        @input="emit('input', $event.target.value)"
      />
    </div>
    <!-- Clear filter button -->
@@ -40,7 +43,7 @@ defineProps({
      variant="clear"
      color-scheme="primary"
      class="!px-1 !py-1.5"
-      @click="$emit('click')"
+      @click="emit('remove')"
    >
      {{ $t('REPORT.FILTER_ACTIONS.CLEAR_FILTER') }}
    </woot-button>
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@@ -74,7 +74,7 @@ export default {
  },
  methods: {
    onClick() {
-      this.$emit('click', this.title);
+      this.$emit('remove', this.title);
    },
  },
 };
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,12 +1,13 @@
 <script>
 export default {
  props: {
-    value: { type: Boolean, default: false },
+    modelValue: { type: Boolean, default: false },
    size: { type: String, default: '' },
  },
  methods: {
    onClick() {
-      this.$emit('input', !this.value);
+      this.$emit('update:modelValue', !this.modelValue);
+      this.$emit('input', !this.modelValue);
    },
  },
 };
@@ -16,12 +17,12 @@ export default {
  <button
    type="button"
    class="toggle-button p-0"
-    :class="{ active: value, small: size === 'small' }"
+    :class="{ active: modelValue, small: size === 'small' }"
    role="switch"
-    :aria-checked="value.toString()"
+    :aria-checked="modelValue.toString()"
    @click="onClick"
  >
-    <span aria-hidden="true" :class="{ active: value }" />
+    <span aria-hidden="true" :class="{ active: modelValue }" />
  </button>
 </template>

--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.js
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.js
@@ -1,91 +0,0 @@
-export default {
-  name: 'WootTabs',
-  props: {
-    index: {
-      type: Number,
-      default: 0,
-    },
-    border: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return { hasScroll: false };
-  },
-  created() {
-    window.addEventListener('resize', this.computeScrollWidth);
-  },
-  beforeDestroy() {
-    window.removeEventListener('resize', this.computeScrollWidth);
-  },
-  mounted() {
-    this.computeScrollWidth();
-  },
-  methods: {
-    computeScrollWidth() {
-      const tabElement = this.$el.getElementsByClassName('tabs')[0];
-      this.hasScroll = tabElement.scrollWidth > tabElement.clientWidth;
-    },
-    onScrollClick(direction) {
-      const tabElement = this.$el.getElementsByClassName('tabs')[0];
-      let scrollPosition = tabElement.scrollLeft;
-      if (direction === 'left') {
-        scrollPosition -= 100;
-      } else {
-        scrollPosition += 100;
-      }
-      tabElement.scrollTo({
-        top: 0,
-        left: scrollPosition,
-        behavior: 'smooth',
-      });
-    },
-    createScrollButton(createElement, direction) {
-      if (!this.hasScroll) {
-        return false;
-      }
-      return createElement(
-        'button',
-        {
-          class: 'tabs--scroll-button button clear secondary button--only-icon',
-          on: { click: () => this.onScrollClick(direction) },
-        },
-        [
-          createElement('fluent-icon', {
-            props: { icon: `chevron-${direction}`, size: 16 },
-          }),
-        ]
-      );
-    },
-  },
-  render(createElement) {
-    const Tabs = this.$slots.default
-      .filter(
-        node =>
-          node.componentOptions &&
-          node.componentOptions.tag === 'woot-tabs-item'
-      )
-      .map((node, index) => {
-        const data = node.componentOptions.propsData;
-        data.index = index;
-        return node;
-      });
-    const leftButton = this.createScrollButton(createElement, 'left');
-    const rightButton = this.createScrollButton(createElement, 'right');
-    return (
-      <div
-        class={{
-          'tabs--container--with-border': this.border,
-          'tabs--container': true,
-        }}
-      >
-        {leftButton}
-        <ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
-          {Tabs}
-        </ul>
-        {rightButton}
-      </div>
-    );
-  },
-};
--- a/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/Tabs.vue
@@ -0,0 +1,89 @@
+<script setup>
+// [VITE] TODO: Test this component across different screen sizes and usages
+import { ref, provide, onMounted, computed } from 'vue';
+import { useEventListener } from '@vueuse/core';
+
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
+  },
+  border: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['change']);
+
+const hasScroll = ref(false);
+// TODO: We may not this internalActiveIndex, we can use activeIndex directly
+// But right I'll keep it and fix it when testing the rest of the codebase
+const internalActiveIndex = ref(props.index);
+
+// Create a proxy for activeIndex using computed
+const activeIndex = computed({
+  get: () => internalActiveIndex.value,
+  set: newValue => {
+    internalActiveIndex.value = newValue;
+    emit('change', newValue);
+  },
+});
+
+provide('activeIndex', activeIndex);
+provide('updateActiveIndex', index => {
+  activeIndex.value = index;
+});
+
+const computeScrollWidth = () => {
+  // TODO: use useElementSize from vueuse
+  const tabElement = document.querySelector('.tabs');
+  if (tabElement) {
+    hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
+  }
+};
+
+const onScrollClick = direction => {
+  // TODO: use useElementSize from vueuse
+  const tabElement = document.querySelector('.tabs');
+  if (tabElement) {
+    let scrollPosition = tabElement.scrollLeft;
+    scrollPosition += direction === 'left' ? -100 : 100;
+    tabElement.scrollTo({
+      top: 0,
+      left: scrollPosition,
+      behavior: 'smooth',
+    });
+  }
+};
+
+useEventListener(window, 'resize', computeScrollWidth);
+onMounted(() => {
+  computeScrollWidth();
+});
+</script>
+
+<template>
+  <div
+    :class="{ 'tabs--container--with-border': border }"
+    class="tabs--container"
+  >
+    <button
+      v-if="hasScroll"
+      class="tabs--scroll-button button clear secondary button--only-icon"
+      @click="onScrollClick('left')"
+    >
+      <fluent-icon icon="chevron-left" :size="16" />
+    </button>
+    <ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
+      <slot />
+    </ul>
+    <button
+      v-if="hasScroll"
+      class="tabs--scroll-button button clear secondary button--only-icon"
+      @click="onScrollClick('right')"
+    >
+      <fluent-icon icon="chevron-right" :size="16" />
+    </button>
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
+++ b/app/javascript/dashboard/components/ui/Tabs/TabsItem.vue
@@ -1,47 +1,40 @@
-<script>
-export default {
-  name: 'WootTabsItem',
-  props: {
-    index: {
-      type: Number,
-      default: 0,
-    },
-    name: {
-      type: String,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    count: {
-      type: Number,
-      default: 0,
-    },
-    showBadge: {
-      type: Boolean,
-      default: true,
-    },
-  },
+<script setup>
+import { computed, inject } from 'vue';

-  computed: {
-    active() {
-      return this.index === this.$parent.index;
-    },
-
-    getItemCount() {
-      return this.count;
-    },
+const props = defineProps({
+  index: {
+    type: Number,
+    default: 0,
  },
-
-  methods: {
-    onTabClick(event) {
-      event.preventDefault();
-      if (!this.disabled) {
-        this.$parent.$emit('change', this.index);
-      }
-    },
+  name: {
+    type: String,
+    required: true,
  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  count: {
+    type: Number,
+    default: 0,
+  },
+  showBadge: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const activeIndex = inject('activeIndex');
+const updateActiveIndex = inject('updateActiveIndex');
+
+const active = computed(() => props.index === activeIndex.value);
+const getItemCount = computed(() => props.count);
+
+const onTabClick = event => {
+  event.preventDefault();
+  if (!props.disabled) {
+    updateActiveIndex(props.index);
+  }
 };
 </script>

--- a/app/javascript/dashboard/components/ui/TimeAgo.vue
+++ b/app/javascript/dashboard/components/ui/TimeAgo.vue
@@ -80,7 +80,7 @@ export default {
      this.createTimer();
    }
  },
-  beforeDestroy() {
+  unmounted() {
    clearTimeout(this.timer);
  },
  methods: {
--- a/app/javascript/dashboard/components/ui/WootButton.vue
+++ b/app/javascript/dashboard/components/ui/WootButton.vue
@@ -96,11 +96,6 @@ export default {
      );
    },
  },
-  methods: {
-    handleClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
 };
 </script>

@@ -110,7 +105,6 @@ export default {
    :type="type"
    :class="buttonClasses"
    :disabled="isDisabled || isLoading"
-    @click="handleClick"
  >
    <Spinner
      v-if="isLoading"
--- a/app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js
@@ -1,46 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootAnnouncementPopup from '../AnnouncementPopup.vue';
-
-export default {
-  title: 'Components/Popup/Announcement Popup',
-  argTypes: {
-    popupMessage: {
-      defaultValue:
-        'Now a new key shortcut (⌘ + ↵) is available to send messages. You can enable it in the',
-      control: {
-        type: 'text',
-      },
-    },
-    routeText: {
-      defaultValue: 'profile settings',
-      control: {
-        type: 'text',
-      },
-    },
-    hasCloseButton: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    closeButtonText: {
-      defaultValue: 'Got it',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootAnnouncementPopup },
-  template:
-    '<woot-announcement-popup v-bind="$props" @open="onClickOpenPath" @close="onClickClose"></woot-announcement-popup>',
-});
-
-export const AnnouncementPopup = Template.bind({});
-AnnouncementPopup.args = {
-  onClickOpenPath: action('opened path'),
-  onClickClose: action('closed the popup'),
-};
--- a/app/javascript/dashboard/components/ui/stories/Button.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/Button.stories.js
@@ -1,50 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootButton from '../WootButton.vue';
-
-export default {
-  title: 'Components/Button',
-  component: WootButton,
-  argTypes: {
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['tiny', 'small', 'medium', 'large', 'expanded'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['hollow', 'clear'],
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootButton },
-  template:
-    '<woot-button v-bind="$props" @click="onClick">{{label}}</woot-button>',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  label: 'New message',
-  onClick: action('Hello'),
-};
--- a/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js
@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Range Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date range',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateRangePicker },
-  template:
-    '<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
-});
-
-export const DateRangePicker = Template.bind({});
-DateRangePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};
--- a/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js
@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateTimePicker from '../DateTimePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Time Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date time',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateTimePicker },
-  template:
-    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
-});
-
-export const DateTimePicker = Template.bind({});
-DateTimePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};
--- a/app/javascript/dashboard/components/ui/stories/Label.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/Label.stories.js
@@ -1,64 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Label',
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    description: {
-      defaultValue: 'label',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      control: {
-        type: 'text',
-      },
-    },
-    bgColor: {
-      defaultValue: '#a83262',
-      control: {
-        type: 'text',
-      },
-    },
-    small: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    showClose: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-close',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  template: '<woot-label v-bind="$props" @click="onClick"></woot-label>',
-});
-
-export const DefaultLabel = Template.bind({});
-DefaultLabel.args = {
-  onClick: action('clicked'),
-};
--- a/app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js
+++ b/app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js
@@ -1,30 +0,0 @@
-import TimeAgo from 'dashboard/components/ui/TimeAgo';
-
-export default {
-  title: 'Components/TimeAgo',
-  component: TimeAgo,
-  argTypes: {
-    isAutoRefreshEnabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    timestamp: {
-      control: {
-        type: 'text, date, number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { TimeAgo },
-  template: '<time-ago v-bind="$props"></time-ago>',
-});
-
-export const TimeAgoView = Template.bind({});
-TimeAgoView.args = {
-  timestamp: 1549843200,
-  isAutoRefreshEnabled: false,
-};
--- a/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceButton.vue
@@ -9,6 +9,7 @@ import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
 import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
 import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
+import { emitter } from 'shared/helpers/mitt';

 export default {
  components: {
@@ -80,7 +81,7 @@ export default {
  },

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

@@ -124,7 +125,7 @@ export default {
    <div v-if="isAIIntegrationEnabled" class="relative">
      <AIAssistanceCTAButton
        v-if="shouldShowAIAssistCTAButton"
-        @click="openAIAssist"
+        @open="openAIAssist"
      />
      <woot-button
        v-else
--- a/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
+++ b/app/javascript/dashboard/components/widgets/AIAssistanceCTAButton.vue
@@ -2,7 +2,7 @@
 export default {
  methods: {
    onClick() {
-      this.$emit('click');
+      this.$emit('open');
    },
  },
 };
--- a/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionInput.vue
@@ -9,7 +9,7 @@ export default {
    WootMessageEditor,
  },
  props: {
-    value: {
+    modelValue: {
      type: Object,
      default: () => null,
    },
@@ -41,21 +41,23 @@ export default {
  computed: {
    action_name: {
      get() {
-        if (!this.value) return null;
-        return this.value.action_name;
+        if (!this.modelValue) return null;
+        return this.modelValue.action_name;
      },
      set(value) {
-        const payload = this.value || {};
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, action_name: value });
        this.$emit('input', { ...payload, action_name: value });
      },
    },
    action_params: {
      get() {
-        if (!this.value) return null;
-        return this.value.action_params;
+        if (!this.modelValue) return null;
+        return this.modelValue.action_params;
      },
      set(value) {
-        const payload = this.value || {};
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, action_params: value });
        this.$emit('input', { ...payload, action_params: value });
      },
    },
--- a/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationActionTeamMessageInput.vue
@@ -40,7 +40,7 @@ export default {
        :max-height="160"
        :options="teams"
        :allow-empty="false"
-        @input="updateValue"
+        @update:model-value="updateValue"
      />
      <textarea
        v-model="message"
--- a/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
+++ b/app/javascript/dashboard/components/widgets/AutomationFileInput.vue
@@ -33,7 +33,7 @@ export default {
          'automations/uploadAttachment',
          file
        );
-        this.$emit('input', [id]);
+        this.$emit('update:modelValue', [id]);
        this.uploadState = 'uploaded';
        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADED');
      } catch (error) {
--- a/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
+++ b/app/javascript/dashboard/components/widgets/ChatTypeTabs.vue
@@ -52,8 +52,9 @@ useKeyboardEvents(keyboardEvents);
    @change="onTabChange"
  >
    <woot-tabs-item
-      v-for="item in items"
+      v-for="(item, index) in items"
      :key="item.key"
+      :index="index"
      :name="item.name"
      :count="item.count"
    />
--- a/app/javascript/dashboard/components/widgets/ColorPicker.vue
+++ b/app/javascript/dashboard/components/widgets/ColorPicker.vue
@@ -1,12 +1,12 @@
 <script>
-import { Chrome } from 'vue-color';
+import { Chrome } from '@lk77/vue3-color';

 export default {
  components: {
    Chrome,
  },
  props: {
-    value: {
+    modelValue: {
      type: String,
      default: '',
    },
@@ -26,7 +26,7 @@ export default {
      this.isPickerOpen = !this.isPickerOpen;
    },
    updateColor(e) {
-      this.$emit('input', e.hex);
+      this.$emit('update:modelValue', e.hex);
    },
  },
 };
@@ -36,23 +36,23 @@ export default {
  <div class="colorpicker">
    <div
      class="colorpicker--selected"
-      :style="`background-color: ${value}`"
+      :style="`background-color: ${modelValue}`"
      @click.prevent="toggleColorPicker"
    />
    <Chrome
      v-if="isPickerOpen"
      v-on-clickaway="closeTogglePicker"
      disable-alpha
-      :value="value"
+      :model-value="modelValue"
      class="colorpicker--chrome"
-      @input="updateColor"
+      @update:modelValue="updateColor"
    />
  </div>
 </template>

 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/mixins';

 .colorpicker {
  position: relative;
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -1,9 +1,10 @@
 <script>
 export default {
+  name: 'FilterInput',
  props: {
-    value: {
+    modelValue: {
      type: Object,
-      default: () => null,
+      default: () => {},
    },
    filterAttributes: {
      type: Array,
@@ -49,42 +50,42 @@ export default {
  computed: {
    attributeKey: {
      get() {
-        if (!this.value) return null;
-        return this.value.attribute_key;
+        if (!this.modelValue) return null;
+        return this.modelValue.attribute_key;
      },
      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, attribute_key: value });
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, attribute_key: value });
      },
    },
    filterOperator: {
      get() {
-        if (!this.value) return null;
-        return this.value.filter_operator;
+        if (!this.modelValue) return null;
+        return this.modelValue.filter_operator;
      },
      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, filter_operator: value });
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, filter_operator: value });
      },
    },
    values: {
      get() {
-        if (!this.value) return null;
-        return this.value.values;
+        if (!this.modelValue) return null;
+        return this.modelValue.values;
      },
      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, values: value });
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, values: value });
      },
    },
    query_operator: {
      get() {
-        if (!this.value) return null;
-        return this.value.query_operator;
+        if (!this.modelValue) return null;
+        return this.modelValue.query_operator;
      },
      set(value) {
-        const payload = this.value || {};
-        this.$emit('input', { ...payload, query_operator: value });
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', { ...payload, query_operator: value });
      },
    },
    custom_attribute_type: {
@@ -93,8 +94,8 @@ export default {
        return this.customAttributeType;
      },
      set() {
-        const payload = this.value || {};
-        this.$emit('input', {
+        const payload = this.modelValue || {};
+        this.$emit('update:modelValue', {
          ...payload,
          custom_attribute_type: this.customAttributeType,
        });
@@ -109,9 +110,9 @@ export default {
          value === 'contact_attribute'
        ) {
          // eslint-disable-next-line vue/no-mutating-props
-          this.value.custom_attribute_type = this.customAttributeType;
+          this.modelValue.custom_attribute_type = this.customAttributeType;
          // eslint-disable-next-line vue/no-mutating-props
-        } else this.value.custom_attribute_type = '';
+        } else this.modelValue.custom_attribute_type = '';
      },
      immediate: true,
    },
@@ -155,6 +156,7 @@ export default {
              v-for="attribute in group.attributes"
              :key="attribute.key"
              :value="attribute.key"
+              :selected="true"
            >
              {{ attribute.name }}
            </option>
--- a/app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js
+++ b/app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js
@@ -1,37 +0,0 @@
-import InboxDropdownItem from './InboxDropdownItem';
-
-export default {
-  title: 'Components/DropDowns/InboxDropdownItem',
-  component: InboxDropdownItem,
-  argTypes: {
-    name: {
-      defaultValue: 'My new inbox',
-      control: {
-        type: 'text',
-      },
-    },
-
-    inboxIdentifier: {
-      defaultValue: 'nithin@mail.com',
-      control: {
-        type: 'text',
-      },
-    },
-
-    channelType: {
-      defaultValue: 'email',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { InboxDropdownItem },
-  template: '<inbox-dropdown-item v-bind="$props" ></inbox-dropdown-item>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};
--- a/app/javascript/dashboard/components/widgets/InboxName.vue
+++ b/app/javascript/dashboard/components/widgets/InboxName.vue
@@ -5,7 +5,7 @@ export default {
  props: {
    inbox: {
      type: Object,
-      default: () => {},
+      default: () => { },
    },
  },
  computed: {
@@ -20,7 +20,7 @@ export default {

 <template>
  <div
-    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap font-medium bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-slate-600 dark:text-slate-500 text-xs my-0 mx-2.5"
  >
    <fluent-icon
      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
--- a/app/javascript/dashboard/components/widgets/LabelSelector.stories.js
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.stories.js
@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelSelector from './LabelSelector';
-
-export default {
-  title: 'Components/Label/Contact Label',
-  component: LabelSelector,
-  argTypes: {
-    contactId: {
-      control: {
-        type: 'text ,number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelSelector },
-  template:
-    '<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>',
-});
-
-export const ContactLabel = Template.bind({});
-ContactLabel.args = {
-  onAdd: action('Added'),
-  onRemove: action('Removed'),
-  allLabels: [
-    {
-      id: '1',
-      title: 'sales',
-      description: '',
-      color: '#0a5dd1',
-    },
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '3',
-      title: 'testing',
-      description: '',
-      color: '#f542f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-  savedLabels: [
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-};
--- a/app/javascript/dashboard/components/widgets/LabelSelector.vue
+++ b/app/javascript/dashboard/components/widgets/LabelSelector.vue
@@ -69,7 +69,7 @@ useKeyboardEvents(keyboardEvents);
      show-close
      :color="label.color"
      variant="smooth"
-      @click="removeItem"
+      @remove="removeItem"
    />
    <div class="absolute w-full top-7">
      <div
--- a/app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js
+++ b/app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js
@@ -1,30 +0,0 @@
-import SettingIntroBanner from './SettingIntroBanner';
-
-export default {
-  title: 'Components/Settings/Banner',
-  component: SettingIntroBanner,
-  argTypes: {
-    headerTitle: {
-      defaultValue: 'Acme Support',
-      control: {
-        type: 'text',
-      },
-    },
-    headerContent: {
-      defaultValue:
-        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SettingIntroBanner },
-  template: '<setting-intro-banner v-bind="$props" ></setting-intro-banner>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
-import { useI18n } from 'dashboard/composables/useI18n';
+import { useI18n } from 'vue-i18n';

 const props = defineProps({
  text: {
--- a/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
+++ b/app/javascript/dashboard/components/widgets/Thumbnail.stories.js
@@ -1,61 +0,0 @@
-import Thumbnail from './Thumbnail.vue';
-
-export default {
-  title: 'Components/Thumbnail',
-  component: Thumbnail,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    badge: {
-      control: {
-        type: 'select',
-        options: ['fb', 'whatsapp', 'sms', 'twitter-tweet', 'twitter-dm'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circle', 'square'],
-      },
-    },
-    username: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    status: {
-      defaultValue: 'circle',
-      control: {
-        type: 'select',
-        options: ['online', 'busy'],
-      },
-    },
-    hasBorder: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    shouldShowStatusAlways: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Thumbnail },
-  template: '<thumbnail v-bind="$props" @click="onClick">{{label}}</thumbnail>',
-});
-
-export const Primary = Template.bind({});
--- a/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
+++ b/app/javascript/dashboard/components/widgets/UserAvatarWithName.vue
@@ -1,25 +1,20 @@
-<script>
+<script setup>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';

-export default {
-  components: {
-    Thumbnail,
+defineProps({
+  user: {
+    type: Object,
+    default: () => {},
  },
-  props: {
-    user: {
-      type: Object,
-      default: () => {},
-    },
-    size: {
-      type: String,
-      default: '20px',
-    },
-    textClass: {
-      type: String,
-      default: 'text-xs text-slate-600',
-    },
+  size: {
+    type: String,
+    default: '20px',
  },
-};
+  textClass: {
+    type: String,
+    default: 'text-xs text-slate-600',
+  },
+});
 </script>

 <template>
--- a/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
+++ b/app/javascript/dashboard/components/widgets/WootWriter/AudioRecorder.vue
@@ -1,263 +1,116 @@
-<script>
+<script setup>
 import getUuid from 'widget/helpers/uuid';
-import 'video.js/dist/video-js.css';
-import 'videojs-record/dist/css/videojs.record.css';
-
-import videojs from 'video.js';
-
-import { useAlert } from 'dashboard/composables';
-
-import Recorder from 'opus-recorder';
-
-// Workers to record Audio .ogg and .wav
-import encoderWorker from 'opus-recorder/dist/encoderWorker.min';
-import waveWorker from 'opus-recorder/dist/waveWorker.min';
-
+import { ref, onMounted, onUnmounted, defineEmits, defineExpose } from 'vue';
 import WaveSurfer from 'wavesurfer.js';
-import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
+import { format, intervalToDuration } from 'date-fns';
+import { convertAudio } from './utils/mp3ConversionUtils';

-import 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
-import 'videojs-record/dist/videojs.record.js';
-
-import OpusRecorderEngine from 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
-
-import { format, addSeconds } from 'date-fns';
-import { AUDIO_FORMATS } from 'shared/constants/messages';
-import { convertWavToMp3 } from './utils/mp3ConversionUtils';
-
-WaveSurfer.microphone = MicrophonePlugin;
-
-const RECORDER_CONFIG = {
-  [AUDIO_FORMATS.WAV]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.MP3]: {
-    audioMimeType: 'audio/wav',
-    audioWorkerURL: waveWorker,
-  },
-  [AUDIO_FORMATS.OGG]: {
-    audioMimeType: 'audio/ogg',
-    audioWorkerURL: encoderWorker,
+const props = defineProps({
+  audioRecordFormat: {
+    type: String,
+    required: true,
  },
+});
+
+const emit = defineEmits(['recorderProgressChanged', 'finishRecord']);
+
+const waveformContainer = ref(null);
+const wavesurfer = ref(null);
+const record = ref(null);
+const isRecording = ref(false);
+const isPlaying = ref(false);
+const hasRecording = ref(false);
+
+const formatTimeProgress = time => {
+  const duration = intervalToDuration({ start: 0, end: time });
+  return format(
+    new Date(0, 0, 0, 0, duration.minutes, duration.seconds),
+    'mm:ss'
+  );
 };

-export default {
-  name: 'WootAudioRecorder',
-  props: {
-    audioRecordFormat: {
-      type: String,
-      default: AUDIO_FORMATS.WAV,
-    },
-  },
-  data() {
-    return {
-      player: false,
-      recordingDateStarted: new Date(0),
-      initialTimeDuration: '00:00',
-      recorderOptions: {
-        controls: true,
-        bigPlayButton: false,
-        fluid: false,
-        controlBar: {
-          deviceButton: false,
-          fullscreenToggle: false,
-          cameraButton: false,
-          volumePanel: false,
-        },
-        plugins: {
-          wavesurfer: {
-            backend: 'WebAudio',
-            waveColor: '#1f93ff',
-            progressColor: 'rgb(25, 118, 204)',
-            cursorColor: 'rgba(43, 51, 63, 0.7)',
-            backgroundColor: 'none',
-            barWidth: 1,
-            cursorWidth: 1,
-            hideScrollbar: true,
-            plugins: [
-              WaveSurfer.microphone.create({
-                bufferSize: 4096,
-                numberOfInputChannels: 1,
-                numberOfOutputChannels: 1,
-                constraints: {
-                  video: false,
-                  audio: true,
-                },
-              }),
-            ],
-          },
-          record: {
-            audio: true,
-            video: false,
-            maxLength: 900,
-            timeSlice: 1000,
-            maxFileSize: 15 * 1024 * 1024,
-            displayMilliseconds: false,
-            audioChannels: 1,
-            audioSampleRate: 48000,
-            audioBitRate: 128,
-            audioEngine: 'opus-recorder',
-            ...RECORDER_CONFIG[this.audioRecordFormat],
-          },
-        },
-      },
-    };
-  },
-  computed: {
-    isRecording() {
-      return this.player && this.player.record().isRecording();
-    },
-  },
-  mounted() {
-    window.Recorder = Recorder;
-    this.fireProgressRecord(this.initialTimeDuration);
-    this.player = videojs('#audio-wave', this.recorderOptions, () => {
-      this.$nextTick(() => {
-        this.player.record().getDevice();
-      });
+const initWaveSurfer = () => {
+  wavesurfer.value = WaveSurfer.create({
+    container: waveformContainer.value,
+    waveColor: '#1F93FF',
+    progressColor: '#6E6F73',
+    height: 100,
+    barWidth: 2,
+    barGap: 1,
+    barRadius: 2,
+    plugins: [
+      RecordPlugin.create({
+        scrollingWaveform: true,
+        renderRecordedAudio: false,
+      }),
+    ],
+  });
+
+  record.value = wavesurfer.value.plugins[0];
+
+  wavesurfer.value.on('finish', () => {
+    isPlaying.value = false;
+  });
+
+  record.value.on('record-end', async blob => {
+    const audioUrl = URL.createObjectURL(blob);
+    const audioBlob = await convertAudio(blob, props.audioRecordFormat);
+    const fileName = `${getUuid()}.mp3`;
+    const file = new File([audioBlob], fileName, {
+      type: props.audioRecordFormat,
    });
-    this.player.on('deviceReady', this.deviceReady);
-    this.player.on('deviceError', this.deviceError);
-    this.player.on('startRecord', this.startRecord);
-    this.player.on('stopRecord', this.stopRecord);
-    this.player.on('progressRecord', this.progressRecord);
-    this.player.on('finishRecord', this.finishRecord);
-    this.player.on('playbackFinish', this.playbackFinish);
-  },
-  beforeDestroy() {
-    if (this.player) {
-      this.player.dispose();
-    }
-    if (window.Recorder) {
-      window.Recorder = undefined;
-    }
-  },
-  methods: {
-    deviceReady() {
-      if (this.player.record().engine instanceof OpusRecorderEngine) {
-        if (
-          [AUDIO_FORMATS.WAV, AUDIO_FORMATS.MP3].includes(
-            this.audioRecordFormat
-          )
-        ) {
-          this.player.record().engine.audioType = 'audio/wav';
-        }
-      }
-      this.player.record().start();
-    },
-    startRecord() {
-      this.fireStateRecorderChanged('recording');
-    },
-    stopRecord() {
-      this.fireStateRecorderChanged('stopped');
-    },
-    async finishRecord() {
-      let recordedContent = this.player.recordedData;
-      let fileName = this.player.recordedData.name;
-      let type = this.player.recordedData.type;
-      if (this.audioRecordFormat === AUDIO_FORMATS.MP3) {
-        recordedContent = await convertWavToMp3(this.player.recordedData);
-        fileName = `${getUuid()}.mp3`;
-        type = AUDIO_FORMATS.MP3;
-      }
-      const file = new File([recordedContent], fileName, { type });
-      this.fireRecorderBlob(file);
-    },
-    progressRecord() {
-      this.fireProgressRecord(this.formatTimeProgress());
-    },
-    stopAudioRecording() {
-      this.player.record().stop();
-    },
-    deviceError() {
-      const deviceError = this.player.deviceErrorCode;
-      const deviceErrorName = deviceError?.name.toLowerCase();
-      if (
-        deviceErrorName?.includes('notallowederror') ||
-        deviceErrorName?.includes('permissiondeniederror')
-      ) {
-        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION'));
-        this.fireStateRecorderChanged('notallowederror');
-      } else {
-        useAlert(this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ERROR'));
-      }
-    },
-    formatTimeProgress() {
-      return format(
-        addSeconds(
-          new Date(this.recordingDateStarted.getTimezoneOffset() * 1000 * 60),
-          this.player.record().getDuration()
-        ),
-        'mm:ss'
-      );
-    },
-    playPause() {
-      if (this.player.wavesurfer().surfer.isPlaying()) {
-        this.fireStateRecorderChanged('paused');
-      } else {
-        this.fireStateRecorderChanged('playing');
-      }
-      this.player.wavesurfer().surfer.playPause();
-    },
-    play() {
-      this.fireStateRecorderChanged('playing');
-      this.player.wavesurfer().play();
-    },
-    pause() {
-      this.fireStateRecorderChanged('paused');
-      this.player.wavesurfer().pause();
-    },
-    playbackFinish() {
-      this.fireStateRecorderChanged('paused');
-      this.player.wavesurfer().pause();
-    },
-    fireRecorderBlob(blob) {
-      this.$emit('finishRecord', {
-        name: blob.name,
-        type: blob.type,
-        size: blob.size,
-        file: blob,
-      });
-    },
-    fireStateRecorderChanged(state) {
-      this.$emit('stateRecorderChanged', state);
-    },
-    fireProgressRecord(duration) {
-      this.$emit('stateRecorderProgressChanged', duration);
-    },
-  },
+    wavesurfer.value.load(audioUrl);
+    emit('finishRecord', {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      file,
+    });
+    hasRecording.value = true;
+    isRecording.value = false;
+  });
+
+  record.value.on('record-progress', time => {
+    emit('recorderProgressChanged', formatTimeProgress(time));
+  });
 };
+
+const stopRecording = () => {
+  if (isRecording.value) {
+    record.value.stopRecording();
+    isRecording.value = false;
+  }
+};
+
+const startRecording = () => {
+  record.value.startRecording();
+  isRecording.value = true;
+};
+
+const playPause = () => {
+  if (hasRecording.value) {
+    wavesurfer.value.playPause();
+    isPlaying.value = !isPlaying.value;
+  }
+};
+
+onMounted(() => {
+  initWaveSurfer();
+  startRecording();
+});
+
+onUnmounted(() => {
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+  }
+});
+
+defineExpose({ playPause, stopRecording });
 </script>

 <template>
-  <div class="audio-wave-wrapper">
-    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
+  <div class="w-full">
+    <div ref="waveformContainer" />
  </div>
 </template>
-
-<style lang="scss">
-.audio-wave-wrapper {
-  @apply h-20 min-h-[5rem];
-
-  .video-js {
-    @apply bg-transparent max-h-60 min-h-[3rem] pt-4 px-0 pb-0 resize-none;
-  }
-}
-
-// Added to override the default text and bg style to support dark and light mode.
-.video-js .vjs-control-bar,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:before {
-  @apply text-slate-600 dark:text-slate-200 bg-transparent dark:bg-transparent;
-}
-
-// Added to fix  div overlays the screen and takes over the button clicks
-// https://github.com/collab-project/videojs-record/issues/688
-// https://github.com/collab-project/videojs-record/pull/709
-.vjs-record.video-js .vjs-control.vjs-record-indicator.vjs-hidden,
-.vjs-record.video-js .vjs-control.vjs-record-indicator,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:before,
-.vjs-record.video-js .vjs-control.vjs-record-indicator:after {
-  @apply pointer-events-none;
-}
-</style>
--- a/Show More
+++ b/Show More