Merge branch 'develop' into deploy-apr-15

2024-07-10 20:29:13 -07:00 · 2024-07-10 20:28:53 -07:00 · 2024-07-08 19:47:10 -07:00 · 2024-05-23 11:18:19 -07:00 · 2024-05-22 21:01:26 -07:00 · 2024-05-22 18:18:55 -07:00
3184 changed files with 81631 additions and 107864 deletions
@@ -1,87 +1,84 @@
-version: 2.1
+# Ruby CircleCI 2.0 configuration file
-orbs:
+#
-  node: circleci/node@6.1.0
+# Check https://circleci.com/docs/2.0/language-ruby/ for more details
-
+#
 version: 2
 defaults: &defaults
  working_directory: ~/build
-  machine:
+  docker:
-    image: ubuntu-2204:2024.05.1
+    # specify the version you desire here
-  resource_class: large
+    - image: cimg/ruby:3.3.3-browsers
    # Specify service dependencies here if necessary
    # CircleCI maintains a library of pre-built images
    # documented at https://circleci.com/docs/2.0/circleci-images/
    - image: cimg/postgres:15.3
    - image: cimg/redis:6.2.6
  environment:
-    RAILS_LOG_TO_STDOUT: false
+    - RAILS_LOG_TO_STDOUT: false
-    COVERAGE: true
+    - COVERAGE: true
-    LOG_LEVEL: warn
+    - LOG_LEVEL: warn
  parallelism: 4
  resource_class: large
 jobs:
  build:
    <<: *defaults
    steps:
      - checkout
      - node/install:
          node-version: '20.12'
      - node/install-pnpm
      - node/install-packages:
          pkg-manager: pnpm
          override-ci-command: pnpm i
      - run: node --version
      - run: pnpm --version
      - run:
-          name: Install System Dependencies
+          name: Configure Bundler
          command: |
-            sudo apt-get update
+            echo 'export BUNDLER_VERSION=$(cat Gemfile.lock | tail -1 | tr -d " ")' >> $BASH_ENV
-            DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
+            source $BASH_ENV
              libpq-dev \
              redis-server \
              postgresql \
              build-essential \
              git \
              curl \
              libssl-dev \
              zlib1g-dev \
              libreadline-dev \
              libyaml-dev \
              openjdk-11-jdk \
              jq \
              software-properties-common \
              ca-certificates \
              imagemagick \
              libxml2-dev \
              libxslt1-dev \
              file \
              g++ \
              gcc \
              autoconf \
              gnupg2 \
              patch \
              ruby-dev \
              liblzma-dev \
              libgmp-dev \
              libncurses5-dev \
              libffi-dev \
              libgdbm6 \
              libgdbm-dev \
              libvips
      - run:
          name: Install RVM and Ruby 3.3.3
          command: |
            sudo apt-get install -y gpg
            gpg --keyserver hkp://keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
            \curl -sSL https://get.rvm.io | bash -s stable
            echo 'source ~/.rvm/scripts/rvm' >> $BASH_ENV
            source ~/.rvm/scripts/rvm
            rvm install "3.3.3"
            rvm use 3.3.3 --default
            gem install bundler
      - run:
-          name: Install Application Dependencies
+          name: Which bundler?
          command: bundle -v
      - run:
          name: Swap node versions
          command: |
-            source ~/.rvm/scripts/rvm
+            set +e
-            bundle install
+            wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
-            # pnpm install
+            export NVM_DIR="$HOME/.nvm"
            [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
            [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
            nvm install v20
            echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
            echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
      # Run bundler
      # Load installed gems from cache if possible, bundle install then save cache
      # Multiple caches are used to increase the chance of a cache hit
      - restore_cache:
          keys:
            - chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
      - run: bundle install --frozen --path ~/.bundle
      - save_cache:
          paths:
            - ~/.bundle
          key: chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
      # Only necessary if app uses webpacker or yarn in some other way
      - restore_cache:
          keys:
            - chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
            - chatwoot-yarn-
      - run:
          name: yarn
          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
      # Store yarn / webpacker cache
      - save_cache:
          key: chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn
      - run:
          name: Download cc-test-reporter
@@ -89,8 +86,12 @@ jobs:
            mkdir -p ~/tmp
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
            chmod +x ~/tmp/cc-test-reporter
      - persist_to_workspace:
          root: ~/tmp
          paths:
            - cc-test-reporter
-      # Swagger verification
+      # verify swagger specification
      - run:
          name: Verify swagger API specification
          command: |
@@ -103,62 +104,45 @@ jobs:
            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
            java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
      # we remove the FRONTED_URL from the .env before running the tests
      - run:
          name: Database Setup and Configure Environment Variables
          command: |
            pg_pass=$(head /dev/urandom | tr -dc A-Za-z0-9 | head -c 15 ; echo '')
            sed -i "s/REPLACE_WITH_PASSWORD/${pg_pass}/g" ${PWD}/.circleci/setup_chatwoot.sql
            chmod 644 ${PWD}/.circleci/setup_chatwoot.sql
            mv ${PWD}/.circleci/setup_chatwoot.sql /tmp/
            sudo -i -u postgres psql -f /tmp/setup_chatwoot.sql
            cp .env.example .env
            sed -i '/^FRONTEND_URL/d' .env
            sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
            sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
            sed -i -e '/POSTGRES_USERNAME/ s/=.*/=chatwoot/' .env
            sed -i -e "/POSTGRES_PASSWORD/ s/=.*/=$pg_pass/" .env
            echo -en "\nINSTALLATION_ENV=circleci" >> ".env"
      # Database setup
-      - run:
+      - run: bundle exec rake db:create
-          name: Run DB migrations
+      - run: bundle exec rake db:schema:load
          command: bundle exec rails db:chatwoot_prepare
      # Bundle audit
      - run:
          name: Bundle audit
          command: bundle exec bundle audit update && bundle exec bundle audit check -v
      # Rubocop linting
      - run:
          name: Rubocop
          command: bundle exec rubocop
-      # ESLint linting
+      # - run:
      #     name: Brakeman
      #     command: bundle exec brakeman
      - run:
          name: eslint
-          command: pnpm run eslint
+          command: yarn run eslint
      # Run frontend tests
      - run:
          name: Run frontend tests
          command: |
-            mkdir -p ~/build/coverage/frontend
+            mkdir -p ~/tmp/test-results/frontend_specs
            ~/tmp/cc-test-reporter before-build
-            pnpm run test:coverage
+            yarn test:coverage
      - run:
-          name: Code Climate Test Coverage (Frontend)
+          name: Code Climate Test Coverage
          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "coverage/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
-      # Run backend tests
+      # Run rails tests
      - run:
          name: Run backend tests
          command: |
            mkdir -p ~/tmp/test-results/rspec
            mkdir -p ~/tmp/test-artifacts
-            mkdir -p ~/build/coverage/backend
+            mkdir -p coverage
            ~/tmp/cc-test-reporter before-build
            TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
            bundle exec rspec --format progress \
@@ -166,18 +150,54 @@ jobs:
                              --out ~/tmp/test-results/rspec.xml \
                              -- ${TESTFILES}
          no_output_timeout: 30m
      - run:
-          name: Code Climate Test Coverage (Backend)
+          name: Code Climate Test Coverage
          command: |
-            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "coverage/codeclimate.$CIRCLE_NODE_INDEX.json"
      - run:
          name: List coverage directory contents
          command: |
            ls -R ~/build/coverage
      - persist_to_workspace:
-          root: ~/build
+          root: coverage
          paths:
-            - coverage
+            - codeclimate.*.json
      # collect reports
      - store_test_results:
          path: ~/tmp/test-results
      - store_artifacts:
          path: ~/tmp/test-artifacts
      - store_artifacts:
          path: log
  upload-coverage:
    working_directory: ~/build
    docker:
      # specify the version you desire here
      - image: circleci/ruby:3.0.2-node-browsers
    environment:
      - CC_TEST_REPORTER_ID: caf26a895e937974a90860cfadfded20891cfd1373a5aaafb3f67406ab9d433f
    steps:
      - attach_workspace:
          at: ~/build
      - run:
          name: Download cc-test-reporter
          command: |
            mkdir -p ~/tmp
            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
            chmod +x ~/tmp/cc-test-reporter
      - persist_to_workspace:
          root: ~/tmp
          paths:
            - cc-test-reporter
      - run:
          name: Upload coverage results to Code Climate
          command: |
            ~/tmp/cc-test-reporter sum-coverage --output - codeclimate.*.json |  ~/tmp/cc-test-reporter upload-coverage --debug --input -
 workflows:
  version: 2
  commit:
    jobs:
      - build
      - upload-coverage:
          requires:
            - build
@@ -1,11 +0,0 @@
 CREATE USER chatwoot CREATEDB;
 ALTER USER chatwoot PASSWORD 'REPLACE_WITH_PASSWORD';
 ALTER ROLE chatwoot SUPERUSER;
 UPDATE pg_database SET datistemplate = FALSE WHERE datname = 'template1';
 DROP DATABASE template1;
 CREATE DATABASE template1 WITH TEMPLATE = template0 ENCODING = 'UNICODE';
 UPDATE pg_database SET datistemplate = TRUE WHERE datname = 'template1';
 \c template1;
 VACUUM FREEZE;
@@ -27,8 +27,7 @@ checks:
      threshold: 50
 exclude_patterns:
  - 'spec/'
-  - '**/specs/**/**'
+  - '**/specs/'
  - '**/spec/**/**'
  - 'db/*'
  - 'bin/**/*'
  - 'db/**/*'
@@ -57,5 +56,3 @@ exclude_patterns:
  - 'app/javascript/shared/constants/locales.js'
  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
  - '**/fixtures/**'
  - '**/*/fixtures.js'
@@ -257,4 +257,3 @@ AZURE_APP_SECRET=
 # Set to true if you want to remove stale contact inboxes
 # contact_inboxes with no conversation older than 90 days will be removed
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false
@@ -2,36 +2,16 @@ module.exports = {
  extends: [
    'airbnb-base/legacy',
    'prettier',
-    'plugin:vue/vue3-recommended',
+    'plugin:vue/recommended',
-    'plugin:vitest-globals/recommended',
+    'plugin:storybook/recommended',
    'plugin:cypress/recommended',
  ],
  overrides: [
    {
      files: ['**/*.spec.{j,t}s?(x)'],
      env: {
        'vitest-globals/env': true,
      },
    },
    {
      files: ['**/*.story.vue'],
      rules: {
        'vue/no-undef-components': [
          'error',
          {
            ignorePatterns: ['Variant', 'Story'],
          },
        ],
        // Story files can have static strings, it doesn't need to handle i18n always.
        'vue/no-bare-strings-in-template': 'off',
        'no-console': 'off',
      },
    },
  ],
  plugins: ['html', 'prettier'],
  parserOptions: {
-    ecmaVersion: 'latest',
+    parser: '@babel/eslint-parser',
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['html', 'prettier', 'babel'],
  rules: {
    'prettier/prettier': ['error'],
    camelcase: 'off',
@@ -47,160 +27,6 @@ module.exports = {
    'import/no-unresolved': 'off',
    'vue/html-indent': 'off',
    'vue/multi-word-component-names': 'off',
    'vue/next-tick-style': ['error', 'callback'],
    'vue/block-order': [
      'error',
      {
        order: ['script', 'template', 'style'],
      },
    ],
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        registeredComponentsOnly: true,
      },
    ],
    'vue/component-options-name-casing': ['error', 'PascalCase'],
    'vue/custom-event-name-casing': ['error', 'camelCase'],
    'vue/define-emits-declaration': ['error'],
    'vue/define-macros-order': [
      'error',
      {
        order: ['defineProps', 'defineEmits'],
        defineExposeLast: false,
      },
    ],
    'vue/define-props-declaration': ['error', 'runtime'],
    'vue/match-component-import-name': ['error'],
    'vue/no-bare-strings-in-template': [
      'error',
      {
        allowlist: [
          '(',
          ')',
          ',',
          '.',
          '&',
          '+',
          '-',
          '=',
          '*',
          '/',
          '#',
          '%',
          '!',
          '?',
          ':',
          '[',
          ']',
          '{',
          '}',
          '<',
          '>',
          '⌘',
          '📄',
          '🎉',
          '💬',
          '👥',
          '📥',
          '🔖',
          '❌',
          '✅',
          '\u00b7',
          '\u2022',
          '\u2010',
          '\u2013',
          '\u2014',
          '\u2212',
          '|',
        ],
        attributes: {
          '/.+/': [
            'title',
            'aria-label',
            'aria-placeholder',
            'aria-roledescription',
            'aria-valuetext',
          ],
          input: ['placeholder'],
        },
        directives: ['v-text'],
      },
    ],
    'vue/no-empty-component-block': 'error',
    'vue/no-multiple-objects-in-class': 'error',
    'vue/no-root-v-if': 'warn',
    'vue/no-static-inline-styles': [
      'error',
      {
        allowBinding: false,
      },
    ],
    'vue/no-template-target-blank': [
      'error',
      {
        allowReferrer: false,
        enforceDynamicLinks: 'always',
      },
    ],
    'vue/no-required-prop-with-default': [
      'error',
      {
        autofix: false,
      },
    ],
    'vue/no-this-in-before-route-enter': 'error',
    'vue/no-undef-components': [
      'error',
      {
        ignorePatterns: [
          '^woot-',
          '^fluent-',
          '^multiselect',
          '^router-link',
          '^router-view',
          '^ninja-keys',
          '^FormulateForm',
          '^FormulateInput',
          '^highlightjs',
        ],
      },
    ],
    'vue/no-unused-emit-declarations': 'error',
    'vue/no-unused-refs': 'error',
    'vue/no-use-v-else-with-v-for': 'error',
    'vue/prefer-true-attribute-shorthand': 'error',
    'vue/no-useless-v-bind': [
      'error',
      {
        ignoreIncludesComment: false,
        ignoreStringEscape: false,
      },
    ],
    'vue/no-v-text': 'error',
    'vue/padding-line-between-blocks': ['error', 'always'],
    'vue/prefer-separate-static-class': 'error',
    'vue/require-explicit-slots': 'error',
    'vue/require-macro-variable-name': [
      'error',
      {
        defineProps: 'props',
        defineEmits: 'emit',
        defineSlots: 'slots',
        useSlots: 'slots',
        useAttrs: 'attrs',
      },
    ],
    'vue/no-unused-properties': [
      'error',
      {
        groups: ['props'],
        deepData: false,
        ignorePublicMembers: false,
        unreferencedOptions: [],
      },
    ],
    'vue/max-attributes-per-line': [
      'error',
      {
@@ -230,6 +56,13 @@ module.exports = {
    'import/extensions': ['off'],
    'no-console': 'error',
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: 'config/webpack/resolve.js',
      },
    },
  },
  env: {
    browser: true,
    node: true,
@@ -1,43 +0,0 @@
 name: Frontend Lint & Test
 on:
  push:
    branches:
      - develop
  pull_request:
    branches:
      - develop
 jobs:
  test:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v4
        with:
          ref: ${{ github.event.pull_request.head.ref }}
          repository: ${{ github.event.pull_request.head.repo.full_name }}
      - uses: ruby/setup-ruby@v1
        with:
          bundler-cache: true
      - uses: pnpm/action-setup@v4
        with:
          version: 9.3.0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'
      - name: Install pnpm dependencies
        run: pnpm install --frozen-lockfile
      - name: Run eslint
        run: pnpm run eslint
      - name: Run frontend tests with coverage
        run: |
          mkdir -p coverage
          pnpm run test:coverage
@@ -25,5 +25,13 @@ jobs:
        with: 
          issue-inactive-days: '30'
          issue-lock-reason: 'resolved'
          issue-comment: >
            This issue has been automatically locked since there
            has not been any recent activity after it was closed.
            Please open a new issue for related bugs.
          pr-inactive-days: '30'
          pr-lock-reason: 'resolved'
          pr-comment: >
            This pull request has been automatically locked since there
            has not been any recent activity after it was closed.
            Please open a new issue for related bugs.
@@ -21,7 +21,7 @@ jobs:
        image: postgres:15.3
        env:
          POSTGRES_USER: postgres
-          POSTGRES_PASSWORD: ''
+          POSTGRES_PASSWORD: ""
          POSTGRES_DB: postgres
          POSTGRES_HOST_AUTH_METHOD: trust
        ports:
@@ -41,49 +41,47 @@ jobs:
        options: --entrypoint redis-server
    steps:
-      - uses: actions/checkout@v4
+    - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
+      with:
-        with:
+        ref: ${{ github.event.pull_request.head.ref }}
-          version: 9
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
          ref: ${{ github.event.pull_request.head.ref }}
          repository: ${{ github.event.pull_request.head.repo.full_name }}
-      - uses: ruby/setup-ruby@v1
+    - uses: ruby/setup-ruby@v1
-        with:
+      with:
-          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
-      - uses: actions/setup-node@v4
+    - uses: actions/setup-node@v4
-        with:
+      with:
-          node-version: 20
+        node-version: 20
-          cache: 'pnpm'
+        cache: yarn
-      - name: Install pnpm dependencies
+    - name: yarn
-        run: pnpm i
+      run: yarn install
-      - name: Strip enterprise code
+    - name: Strip enterprise code
-        run: |
+      run: |
-          rm -rf enterprise
+        rm -rf enterprise
-          rm -rf spec/enterprise
+        rm -rf spec/enterprise
-      - name: Create database
+    - name: Create database
-        run: bundle exec rake db:create
+      run: bundle exec rake db:create
-      - name: Seed database
+    - name: Seed database
-        run: bundle exec rake db:schema:load
+      run: bundle exec rake db:schema:load
-      - name: Run frontend tests
+    - name: yarn check-files
-        run: pnpm run test:coverage
+      run: yarn install --check-files
-      # Run rails tests
+    # Run rails tests
-      - name: Run backend tests
+    - name: Run backend tests
-        run: |
+      run: |
-          bundle exec rspec --profile=10 --format documentation
+        bundle exec rspec --profile=10 --format documentation
-        env:
+      env:
-          NODE_OPTIONS: --openssl-legacy-provider
+        NODE_OPTIONS: --openssl-legacy-provider
-      - name: Upload rails log folder
+    - name: Upload rails log folder
-        uses: actions/upload-artifact@v4
+      uses: actions/upload-artifact@v4
-        if: always()
+      if: always()
-        with:
+      with:
-          name: rails-log-folder
+        name: rails-log-folder
-          path: log
+        path: log
@@ -49,17 +49,13 @@ jobs:
      with:
        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
    - uses: pnpm/action-setup@v2
      with:
        version: 9.3.0
    - uses: actions/setup-node@v4
      with:
        node-version: 20
-        cache: pnpm
+        cache: yarn
-    - name: pnpm
+    - name: yarn
-      run: pnpm install
+      run: yarn install
    - name: Create database
      run: bundle exec rake db:create
@@ -19,33 +19,23 @@ jobs:
        with:
          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
      - uses: pnpm/action-setup@v2
        with:
          version: 9.3.0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
-          cache: 'pnpm'
+          cache: 'yarn'
-      - name: pnpm
+      - name: yarn
-        run: pnpm install
+        run: yarn install
      - name: Strip enterprise code
        run: |
          rm -rf enterprise
          rm -rf spec/enterprise
      - name: setup env
        run: |
          cp .env.example .env
      - name: Run asset compile
        run: bundle exec rake assets:precompile
        env:
-          RAILS_ENV: production
+          NODE_OPTIONS: --openssl-legacy-provider
      - name: Size Check
-        run: pnpm run size
+        run: yarn run size
@@ -32,16 +32,6 @@ 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
@@ -85,8 +75,4 @@ yalc.lock
 yarn-debug.log*
 .yarn-integrity
-# Vite Ruby
+/storybook-static
 /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
@@ -1,11 +1,11 @@
-# #!/bin/sh
+#!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/_/husky.sh"
-# # lint js and vue files
+# lint js and vue files
-# npx --no-install lint-staged
+npx --no-install lint-staged
-# # lint only staged ruby files
+# 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
+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
+# stage rubocop changes to files
-# git diff --name-only --cached | xargs git add
+git diff --name-only --cached | xargs git add
@@ -0,0 +1,56 @@
 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;
  },
 };
@@ -0,0 +1,48 @@
 import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 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(Vuelidate);
 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$/,
    },
  },
 };
@@ -49,7 +49,7 @@ gem 'aws-sdk-s3', require: false
 # original gem isn't maintained actively
 # we wanted updated version of faraday which is a dependency for slack-ruby-client
 gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby', branch: 'chatwoot', require: false
-gem 'google-cloud-storage', '>= 1.48.0', require: false
+gem 'google-cloud-storage', require: false
 gem 'image_processing'
 ##-- gems for database --#
@@ -64,7 +64,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
 gem 'puma'
-gem 'vite_rails'
+gem 'webpacker'
 # metrics on heroku
 gem 'barnes'
@@ -96,12 +96,12 @@ gem 'koala'
 # slack client
 gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
-gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
+gem 'google-cloud-dialogflow-v2'
 gem 'grpc'
 # Translate integrations
 # 'google-cloud-translate' gem depends on faraday 2.0 version
 # this dependency breaks the slack-ruby-client gem
-gem 'google-cloud-translate-v3', '>= 0.7.0'
+gem 'google-cloud-translate-v3'
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
@@ -111,12 +111,12 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.19.0', require: false
+gem 'sentry-rails', '>= 5.18.1', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.19.0', require: false
+gem 'sentry-sidekiq', '>= 5.18.1', require: false
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.3.1'
+gem 'sidekiq', '>= 7.3.0'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
@@ -165,7 +165,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-google-oauth2', '>= 1.1.3'
+gem 'omniauth-google-oauth2', '>= 1.1.2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 ## Gems for reponse bot
@@ -181,9 +181,6 @@ gem 'reverse_markdown'
 group :production do
  # we dont want request timing out in development while using byebug
  gem 'rack-timeout'
  # for heroku autoscaling
  gem 'judoscale-rails', require: false
  gem 'judoscale-sidekiq', require: false
 end
 group :development do
@@ -203,10 +200,12 @@ group :development do
  gem 'rack-mini-profiler', '>= 3.2.0', require: false
  gem 'stackprof'
  # Should install the associated chrome extension to view query logs
-  gem 'meta_request', '>= 0.8.3'
+  gem 'meta_request', '>= 0.8.0'
 end
 group :test do
  # Cypress in rails.
  gem 'cypress-on-rails'
  # fast cleaning of database
  gem 'database_cleaner'
  # mock http calls
@@ -229,7 +228,7 @@ group :development, :test do
  gem 'mock_redis'
  gem 'pry-rails'
  gem 'rspec_junit_formatter'
-  gem 'rspec-rails', '>= 6.1.5'
+  gem 'rspec-rails', '>= 6.1.3'
  gem 'rubocop', require: false
  gem 'rubocop-performance', require: false
  gem 'rubocop-rails', require: false
@@ -33,78 +33,78 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.0.8.5)
+    actioncable (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.8.5)
+    actionmailbox (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.5)
+      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.5)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.5)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.0.8.5)
+    actionmailer (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      actionview (= 7.0.8.5)
+      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.5)
+      activejob (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.0)
-    actionpack (7.0.8.5)
+    actionpack (7.0.8.4)
-      actionview (= 7.0.8.5)
+      actionview (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      rack (~> 2.0, >= 2.2.4)
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.8.5)
+    actiontext (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      activerecord (= 7.0.8.5)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.5)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.0.8.5)
+    actionview (7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      builder (~> 3.1)
      erubi (~> 1.4)
      rails-dom-testing (~> 2.0)
      rails-html-sanitizer (~> 1.1, >= 1.2.0)
    active_record_query_trace (1.8)
-    activejob (7.0.8.5)
+    activejob (7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      globalid (>= 0.3.6)
-    activemodel (7.0.8.5)
+    activemodel (7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
-    activerecord (7.0.8.5)
+    activerecord (7.0.8.4)
-      activemodel (= 7.0.8.5)
+      activemodel (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
    activerecord-import (1.4.1)
      activerecord (>= 4.2)
-    activestorage (7.0.8.5)
+    activestorage (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      activejob (= 7.0.8.5)
+      activejob (= 7.0.8.4)
-      activerecord (= 7.0.8.5)
+      activerecord (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      marcel (~> 1.0)
      mini_mime (>= 1.1.0)
-    activesupport (7.0.8.5)
+    activesupport (7.0.8.4)
      concurrent-ruby (~> 1.0, >= 1.0.2)
      i18n (>= 1.6, < 2)
      minitest (>= 5.1)
      tzinfo (~> 2.0)
    acts-as-taggable-on (9.0.1)
      activerecord (>= 6.0, < 7.1)
-    addressable (2.8.7)
+    addressable (2.8.4)
-      public_suffix (>= 2.0.2, < 7.0)
+      public_suffix (>= 2.0.2, < 6.0)
    administrate (0.20.1)
      actionpack (>= 6.0, < 8.0)
      actionview (>= 6.0, < 8.0)
@@ -148,7 +148,7 @@ GEM
    barnes (0.0.9)
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.1.1)
    bcrypt (3.1.20)
    bigdecimal (3.1.8)
    bindex (0.8.1)
@@ -169,15 +169,16 @@ GEM
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
-    concurrent-ruby (1.3.4)
+    concurrent-ruby (1.3.3)
    connection_pool (2.4.1)
-    crack (1.0.0)
+    crack (0.4.5)
      bigdecimal
      rexml
    crass (1.0.6)
    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)
@@ -209,7 +210,7 @@ GEM
      devise (> 3.5.2, < 5)
      rails (>= 4.2.0, < 7.2)
    diff-lcs (1.5.1)
-    digest-crc (0.6.5)
+    digest-crc (0.6.4)
      rake (>= 12.0.0, < 14.0.0)
    docile (1.4.0)
    domain_name (0.5.20190701)
@@ -220,7 +221,6 @@ 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)
@@ -229,7 +229,7 @@ GEM
      ruby2_keywords
    email_reply_trimmer (0.1.13)
    erubi (1.13.0)
-    et-orbi (1.2.11)
+    et-orbi (1.2.7)
      tzinfo
    execjs (2.8.1)
    facebook-messenger (2.0.1)
@@ -242,8 +242,9 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
+    faraday (2.7.4)
-      faraday-net_http (>= 2.0, < 3.2)
+      faraday-net_http (>= 2.0, < 3.1)
      ruby2_keywords (>= 0.0.4)
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -251,12 +252,11 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.1.0)
+    faraday-net_http (3.0.2)
      net-http
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
-    faraday-retry (2.2.1)
+    faraday-retry (2.1.0)
      faraday (~> 2.0)
    fcm (1.0.8)
      faraday (>= 1.0.0, < 3.0)
@@ -267,10 +267,10 @@ GEM
      rake
    flag_shih_tzu (0.3.23)
    foreman (0.87.2)
-    fugit (1.11.1)
+    fugit (1.9.0)
-      et-orbi (~> 1, >= 1.2.11)
+      et-orbi (~> 1, >= 1.2.7)
      raabro (~> 1.4)
-    gapic-common (0.20.0)
+    gapic-common (0.18.0)
      faraday (>= 1.9, < 3.a)
      faraday-retry (>= 1.0, < 3.a)
      google-protobuf (~> 3.14)
@@ -284,72 +284,60 @@ GEM
      activesupport (>= 6.1)
    gmail_xoauth (0.4.3)
      oauth (>= 0.3.6)
-    google-apis-core (0.15.1)
+    google-apis-core (0.11.0)
      addressable (~> 2.5, >= 2.5.1)
-      googleauth (~> 1.9)
+      googleauth (>= 0.16.2, < 2.a)
-      httpclient (>= 2.8.3, < 3.a)
+      httpclient (>= 2.8.1, < 3.a)
      mini_mime (~> 1.0)
      mutex_m
      representable (~> 3.0)
      retriable (>= 2.0, < 4.a)
-    google-apis-iamcredentials_v1 (0.22.0)
+      rexml
-      google-apis-core (>= 0.15.0, < 2.a)
+      webrick
-    google-apis-storage_v1 (0.47.0)
+    google-apis-iamcredentials_v1 (0.17.0)
-      google-apis-core (>= 0.15.0, < 2.a)
+      google-apis-core (>= 0.11.0, < 2.a)
-    google-cloud-core (1.7.1)
+    google-apis-storage_v1 (0.19.0)
-      google-cloud-env (>= 1.0, < 3.a)
+      google-apis-core (>= 0.9.0, < 2.a)
    google-cloud-core (1.6.0)
      google-cloud-env (~> 1.0)
      google-cloud-errors (~> 1.0)
-    google-cloud-dialogflow-v2 (0.31.0)
+    google-cloud-dialogflow-v2 (0.23.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.18.0, < 2.a)
      google-cloud-errors (~> 1.0)
      google-cloud-location (>= 0.4, < 2.a)
-    google-cloud-env (2.2.1)
+    google-cloud-env (1.6.0)
-      faraday (>= 1.0, < 3.a)
+      faraday (>= 0.17.3, < 3.0)
    google-cloud-errors (1.3.1)
-    google-cloud-location (0.6.0)
+    google-cloud-location (0.4.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-cloud-storage (1.52.0)
+    google-cloud-storage (1.44.0)
      addressable (~> 2.8)
      digest-crc (~> 0.4)
-      google-apis-core (~> 0.13)
+      google-apis-iamcredentials_v1 (~> 0.1)
-      google-apis-iamcredentials_v1 (~> 0.18)
+      google-apis-storage_v1 (~> 0.19.0)
      google-apis-storage_v1 (~> 0.38)
      google-cloud-core (~> 1.6)
-      googleauth (~> 1.9)
+      googleauth (>= 0.16.2, < 2.a)
      mini_mime (~> 1.0)
-    google-cloud-translate-v3 (0.10.0)
+    google-cloud-translate-v3 (0.6.0)
-      gapic-common (>= 0.20.0, < 2.a)
+      gapic-common (>= 0.17.1, < 2.a)
      google-cloud-errors (~> 1.0)
-    google-protobuf (3.25.5)
+    google-protobuf (3.25.3-arm64-darwin)
-    google-protobuf (3.25.5-arm64-darwin)
+    googleapis-common-protos (1.4.0)
-    google-protobuf (3.25.5-x86_64-darwin)
+      google-protobuf (~> 3.14)
-    google-protobuf (3.25.5-x86_64-linux)
+      googleapis-common-protos-types (~> 1.2)
-    googleapis-common-protos (1.6.0)
+      grpc (~> 1.27)
      google-protobuf (>= 3.18, < 5.a)
      googleapis-common-protos-types (~> 1.7)
      grpc (~> 1.41)
    googleapis-common-protos-types (1.14.0)
      google-protobuf (~> 3.18)
-    googleauth (1.11.2)
+    googleauth (1.5.2)
-      faraday (>= 1.0, < 3.a)
+      faraday (>= 0.17.3, < 3.a)
      google-cloud-env (~> 2.1)
      jwt (>= 1.4, < 3.0)
      memoist (~> 0.16)
      multi_json (~> 1.11)
      os (>= 0.9, < 2.0)
      signet (>= 0.16, < 2.a)
    groupdate (6.2.1)
      activesupport (>= 5.2)
-    grpc (1.62.0)
+    grpc (1.63.0-arm64-darwin)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    grpc (1.62.0-arm64-darwin)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    grpc (1.62.0-x86_64-darwin)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    grpc (1.62.0-x86_64-linux)
      google-protobuf (~> 3.25)
      googleapis-common-protos-types (~> 1.0)
    haikunator (1.1.1)
@@ -358,7 +346,7 @@ GEM
      ruby2ruby (~> 2.4)
      ruby_parser (~> 3.10)
    hana (1.3.7)
-    hashdiff (1.1.0)
+    hashdiff (1.0.1)
    hashie (5.0.0)
    http (5.1.1)
      addressable (~> 2.8)
@@ -373,7 +361,7 @@ GEM
      mini_mime (>= 1.0.0)
      multi_xml (>= 0.5.2)
    httpclient (2.8.3)
-    i18n (1.14.6)
+    i18n (1.14.1)
      concurrent-ruby (~> 1.0)
    image_processing (1.12.2)
      mini_magick (>= 4.9.5, < 5)
@@ -397,15 +385,7 @@ GEM
      hana (~> 1.3)
      regexp_parser (~> 2.0)
      uri_template (~> 0.7)
-    judoscale-rails (1.8.2)
+    jwt (2.7.0)
      judoscale-ruby (= 1.8.2)
      railties
    judoscale-ruby (1.8.2)
    judoscale-sidekiq (1.8.2)
      judoscale-ruby (= 1.8.2)
      sidekiq (>= 5.0)
    jwt (2.8.1)
      base64
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
      kaminari-actionview (= 1.2.2)
@@ -429,15 +409,8 @@ GEM
    letter_opener (1.8.1)
      launchy (>= 2.2, < 3)
    libdatadog (7.0.0.1.0)
    libdatadog (7.0.0.1.0-x86_64-linux)
    libddwaf (1.14.0.0.0)
      ffi (~> 1.0)
    libddwaf (1.14.0.0.0-arm64-darwin)
      ffi (~> 1.0)
    libddwaf (1.14.0.0.0-x86_64-darwin)
      ffi (~> 1.0)
    libddwaf (1.14.0.0.0-x86_64-linux)
      ffi (~> 1.0)
    line-bot-api (1.28.0)
    liquid (5.4.0)
    listen (3.8.0)
@@ -462,31 +435,28 @@ GEM
      net-smtp
    marcel (1.0.4)
    maxminddb (0.1.22)
-    meta_request (0.8.3)
+    memoist (0.16.2)
    meta_request (0.8.2)
      rack-contrib (>= 1.1, < 3)
      railties (>= 3.0.0, < 8)
-    method_source (1.1.0)
+    method_source (1.0.0)
    mime-types (3.4.1)
      mime-types-data (~> 3.2015)
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.7)
+    minitest (5.24.1)
    minitest (5.25.1)
    mock_redis (0.36.0)
      ruby2_keywords
    msgpack (1.7.0)
    multi_json (1.15.0)
    multi_xml (0.6.0)
    multipart-post (2.3.0)
    mutex_m (0.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
    net-http (0.4.1)
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
-    net-imap (0.4.17)
+    net-imap (0.4.12)
      date
      net-protocol
    net-pop (0.1.2)
@@ -502,14 +472,7 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.16.7)
+    nokogiri (1.16.6-arm64-darwin)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
    nokogiri (1.16.7-arm64-darwin)
      racc (~> 1.4)
    nokogiri (1.16.7-x86_64-darwin)
      racc (~> 1.4)
    nokogiri (1.16.7-x86_64-linux)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -528,7 +491,7 @@ GEM
      hashie (>= 3.4.6)
      rack (>= 2.2.3)
      rack-protection
-    omniauth-google-oauth2 (1.1.3)
+    omniauth-google-oauth2 (1.1.2)
      jwt (>= 2.0)
      oauth2 (~> 2.0)
      omniauth (~> 2.0)
@@ -557,14 +520,14 @@ GEM
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (5.0.1)
-    puma (6.4.3)
+    puma (6.4.2)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
    raabro (1.4.0)
-    racc (1.8.1)
+    racc (1.8.0)
-    rack (2.2.10)
+    rack (2.2.9)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -573,28 +536,27 @@ GEM
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.2.0)
+    rack-protection (3.1.0)
      base64 (>= 0.1.0)
      rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.7)
+    rack-proxy (0.7.6)
      rack
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rails (7.0.8.5)
+    rails (7.0.8.4)
-      actioncable (= 7.0.8.5)
+      actioncable (= 7.0.8.4)
-      actionmailbox (= 7.0.8.5)
+      actionmailbox (= 7.0.8.4)
-      actionmailer (= 7.0.8.5)
+      actionmailer (= 7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      actiontext (= 7.0.8.5)
+      actiontext (= 7.0.8.4)
-      actionview (= 7.0.8.5)
+      actionview (= 7.0.8.4)
-      activejob (= 7.0.8.5)
+      activejob (= 7.0.8.4)
-      activemodel (= 7.0.8.5)
+      activemodel (= 7.0.8.4)
-      activerecord (= 7.0.8.5)
+      activerecord (= 7.0.8.4)
-      activestorage (= 7.0.8.5)
+      activestorage (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      bundler (>= 1.15.0)
-      railties (= 7.0.8.5)
+      railties (= 7.0.8.4)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -602,15 +564,15 @@ GEM
    rails-html-sanitizer (1.6.0)
      loofah (~> 2.21)
      nokogiri (~> 1.14)
-    railties (7.0.8.5)
+    railties (7.0.8.4)
-      actionpack (= 7.0.8.5)
+      actionpack (= 7.0.8.4)
-      activesupport (= 7.0.8.5)
+      activesupport (= 7.0.8.4)
      method_source
      rake (>= 12.2)
      thor (~> 1.0)
      zeitwerk (~> 2.5)
    rainbow (3.1.1)
-    rake (13.2.1)
+    rake (13.1.0)
    rb-fsevent (0.11.2)
    rb-inotify (0.10.1)
      ffi (~> 1.0)
@@ -640,19 +602,20 @@ GEM
    retriable (3.1.2)
    reverse_markdown (2.1.1)
      nokogiri
-    rexml (3.3.9)
+    rexml (3.3.1)
      strscan
    rspec-core (3.13.0)
      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.2)
+    rspec-expectations (3.13.1)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.13.0)
    rspec-mocks (3.13.1)
      diff-lcs (>= 1.2.0, < 2.0)
      rspec-support (~> 3.13.0)
-    rspec-rails (7.0.1)
+    rspec-rails (6.1.3)
-      actionpack (>= 7.0)
+      actionpack (>= 6.1)
-      activesupport (>= 7.0)
+      activesupport (>= 6.1)
-      railties (>= 7.0)
+      railties (>= 6.1)
      rspec-core (~> 3.13)
      rspec-expectations (~> 3.13)
      rspec-mocks (~> 3.13)
@@ -714,19 +677,20 @@ GEM
      activerecord (>= 4)
      activesupport (>= 4)
    selectize-rails (0.12.6)
-    sentry-rails (5.19.0)
+    semantic_range (3.0.0)
    sentry-rails (5.18.1)
      railties (>= 5.0)
-      sentry-ruby (~> 5.19.0)
+      sentry-ruby (~> 5.18.1)
-    sentry-ruby (5.19.0)
+    sentry-ruby (5.18.1)
      bigdecimal
      concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.19.0)
+    sentry-sidekiq (5.18.1)
-      sentry-ruby (~> 5.19.0)
+      sentry-ruby (~> 5.18.1)
      sidekiq (>= 3.0)
    sexp_processor (4.17.0)
    shoulda-matchers (5.3.0)
      activesupport (>= 5.2.0)
-    sidekiq (7.3.1)
+    sidekiq (7.3.0)
      concurrent-ruby (< 2)
      connection_pool (>= 2.3.0)
      logger
@@ -770,9 +734,10 @@ GEM
    stackprof (0.2.25)
    statsd-ruby (1.5.0)
    stripe (8.5.0)
    strscan (3.1.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.3.0)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -797,19 +762,11 @@ GEM
    unf_ext (0.0.8.2)
    unicode-display_width (2.4.2)
    uniform_notifier (1.16.0)
    uri (0.13.0)
    uri_template (0.7.0)
-    valid_email2 (5.2.6)
+    valid_email2 (4.0.6)
      activemodel (>= 3.2)
      mail (~> 2.5)
-    version_gem (1.1.4)
+    version_gem (1.1.3)
    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)
@@ -820,10 +777,16 @@ GEM
    web-push (3.0.1)
      jwt (~> 2.0)
      openssl (~> 3.0)
-    webmock (3.23.1)
+    webmock (3.18.1)
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
    webpacker (5.4.4)
      activesupport (>= 5.2)
      rack-proxy (>= 0.6.1)
      railties (>= 5.2)
      semantic_range (>= 2.3.0)
    webrick (1.8.1)
    websocket-driver (0.7.6)
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@@ -831,18 +794,10 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.6.17)
+    zeitwerk (2.6.16)
 PLATFORMS
-  arm64-darwin-20
+  arm64-darwin-23
  arm64-darwin-21
  arm64-darwin-22
  ruby
  x86_64-darwin-18
  x86_64-darwin-20
  x86_64-darwin-21
  x86_64-darwin-22
  x86_64-linux
 DEPENDENCIES
  active_record_query_trace
@@ -866,6 +821,7 @@ DEPENDENCIES
  climate_control
  commonmarker
  csv-safe
  cypress-on-rails
  database_cleaner
  ddtrace
  debug (~> 1.8)
@@ -884,9 +840,9 @@ DEPENDENCIES
  foreman
  geocoder
  gmail_xoauth
-  google-cloud-dialogflow-v2 (>= 0.24.0)
+  google-cloud-dialogflow-v2
-  google-cloud-storage (>= 1.48.0)
+  google-cloud-storage
-  google-cloud-translate-v3 (>= 0.7.0)
+  google-cloud-translate-v3
  groupdate
  grpc
  haikunator
@@ -897,8 +853,6 @@ DEPENDENCIES
  jbuilder
  json_refs
  json_schemer
  judoscale-rails
  judoscale-sidekiq
  jwt
  kaminari
  koala
@@ -908,14 +862,14 @@ DEPENDENCIES
  listen
  lograge (~> 0.14.0)
  maxminddb
-  meta_request (>= 0.8.3)
+  meta_request (>= 0.8.0)
  mock_redis
  neighbor
  net-smtp (~> 0.3.4)
  newrelic-sidekiq-metrics (>= 1.6.2)
  newrelic_rpm
  omniauth (>= 2.1.2)
-  omniauth-google-oauth2 (>= 1.1.3)
+  omniauth-google-oauth2 (>= 1.1.2)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
  pg
@@ -935,7 +889,7 @@ DEPENDENCIES
  responders (>= 3.1.1)
  rest-client
  reverse_markdown
-  rspec-rails (>= 6.1.5)
+  rspec-rails (>= 6.1.3)
  rspec_junit_formatter
  rubocop
  rubocop-performance
@@ -944,11 +898,11 @@ DEPENDENCIES
  scout_apm
  scss_lint
  seed_dump
-  sentry-rails (>= 5.19.0)
+  sentry-rails (>= 5.18.1)
  sentry-ruby
-  sentry-sidekiq (>= 5.19.0)
+  sentry-sidekiq (>= 5.18.1)
  shoulda-matchers
-  sidekiq (>= 7.3.1)
+  sidekiq (>= 7.3.0)
  sidekiq-cron (>= 1.12.0)
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.2.0)
@@ -965,10 +919,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
@@ -976,4 +930,4 @@ RUBY VERSION
   ruby 3.3.3p89
 BUNDLED WITH
-   2.5.16
+   2.5.14
@@ -6,7 +6,7 @@ RAILS_ENV ?= development
 setup:
 	gem install bundler
 	bundle install
-	pnpm install
+	yarn install
 db_create:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails db:create
@@ -30,7 +30,7 @@ server:
 	RAILS_ENV=$(RAILS_ENV) bundle exec rails server -b 0.0.0.0 -p 3000
 burn:
-	bundle && pnpm install
+	bundle && yarn
 run:
 	@if [ -f ./.overmind.sock ]; then \
@@ -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
@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-vite: bin/vite dev
+frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
 worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml
@@ -1,6 +1,3 @@
 ## 🚨 Note: This branch is unstable. For the stable branch's source code, please use the branch [3.x](https://github.com/chatwoot/chatwoot/tree/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"/>
@@ -1 +1 @@
-3.13.0
+3.9.0
@@ -1 +1 @@
-3.0.0
+2.8.0
@@ -2,4 +2,5 @@
 //= link administrate/application.css
 //= link administrate/application.js
 //= link administrate-field-active_storage/application.css
 //= link dashboardChart.js
 //= link secretField.js
@@ -0,0 +1,55 @@
 // 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(),
  });
 }
@@ -86,5 +86,8 @@ $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;
@@ -32,13 +32,11 @@ class AccountBuilder
  end
  def validate_email
    raise InvalidEmail.new({ domain_blocked: domain_blocked }) if domain_blocked?
    address = ValidEmail2::Address.new(@email)
-    if address.valid? && !address.disposable?
+    if address.valid? # && !address.disposable?
      true
    else
-      raise InvalidEmail.new({ valid: address.valid?, disposable: address.disposable? })
+      raise InvalidEmail.new(valid: address.valid?)
    end
  end
@@ -81,21 +79,4 @@ class AccountBuilder
    @user.confirm if @confirmed
    @user.save!
  end
  def domain_blocked?
    domain = @email.split('@').last
    blocked_domains.each do |blocked_domain|
      return true if domain.match?(blocked_domain)
    end
    false
  end
  def blocked_domains
    domains = GlobalConfigService.load('BLOCKED_EMAIL_DOMAINS', '')
    return [] if domains.blank?
    domains.split("\n").map(&:strip)
  end
 end
@@ -27,7 +27,7 @@ class Messages::Messenger::MessageBuilder
    file_type = attachment['type'].to_sym
    params = { file_type: file_type, account_id: @message.account_id }
-    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention].include? file_type
      params.merge!(file_type_params(attachment))
    elsif file_type == :location
      params.merge!(location_params(attachment))
@@ -0,0 +1,30 @@
 class V2::BaseConversationReportBuilder
  pattr_initialize :account, :params
  private
  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
  COUNT_METRICS = %w[
    conversations_count
    incoming_messages_count
    outgoing_messages_count
    resolutions_count
    bot_resolutions_count
    bot_handoffs_count
  ].freeze
  def builder_class(metric)
    case metric
    when *AVG_METRICS
      V2::Reports::Timeseries::AverageReportBuilder
    when *COUNT_METRICS
      V2::Reports::Timeseries::CountReportBuilder
    end
  end
  def log_invalid_metric
    Rails.logger.error "ReportBuilder: Invalid metric - #{params[:metric]}"
    {}
  end
 end
@@ -0,0 +1,30 @@
 class V2::ConversationMetricBuilder < V2::BaseConversationReportBuilder
  def summary
    {
      conversations_count: count('conversations_count'),
      incoming_messages_count: count('incoming_messages_count'),
      outgoing_messages_count: count('outgoing_messages_count'),
      avg_first_response_time: count('avg_first_response_time'),
      avg_resolution_time: count('avg_resolution_time'),
      resolutions_count: count('resolutions_count'),
      reply_time: count('reply_time')
    }
  end
  def bot_summary
    {
      bot_resolutions_count: count('bot_resolutions_count'),
      bot_handoffs_count: count('bot_handoffs_count')
    }
  end
  private
  def count(metric)
    builder_class(metric).new(account, builder_params(metric)).aggregate_value
  end
  def builder_params(metric)
    params.merge({ metric: metric })
  end
 end
@@ -0,0 +1,25 @@
 class V2::ConversationReportBuilder < V2::BaseConversationReportBuilder
  include DateRangeHelper
  pattr_initialize :account, :params
  def timeseries
    perform_action(:timeseries)
  end
  def aggregate_value
    perform_action(:aggregate_value)
  end
  private
  def perform_action(method_name)
    return builder.new(account, params).public_send(method_name) if builder.present?
    log_invalid_metric
  end
  def builder
    builder_class(params[:metric])
  end
 end
@@ -3,6 +3,7 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
  def build
    set_grouped_conversations_count
    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end
  def set_grouped_resolved_conversations_count
    @grouped_resolved_conversations_count = reporting_events
                                            .where(name: 'conversation_resolved')
                                            .select(group_by_key, :conversation_id)
                                            .distinct
                                            .group(group_by_key)
                                            .count(:conversation_id)
  end
  def group_by_key
    :user_id
  end
@@ -37,12 +47,14 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
  def prepare_report
    account.account_users.each_with_object([]) do |account_user, arr|
      user_id = account_user.user_id
      arr << {
-        id: account_user.user_id,
+        id: user_id,
-        conversations_count: @grouped_conversations_count[account_user.user_id],
+        conversations_count: @grouped_conversations_count[user_id],
-        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
+        resolved_conversations_count: @grouped_resolved_conversations_count[user_id],
-        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[user_id],
-        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+        avg_first_response_time: @grouped_avg_first_response_time[user_id],
        avg_reply_time: @grouped_avg_reply_time[user_id]
      }
    end
  end
@@ -0,0 +1,65 @@
 class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
  pattr_initialize [:account!, :params!]
  def build
    set_grouped_conversations_count
    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
    prepare_report
  end
  private
  def set_grouped_conversations_count
    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('inbox_id').count
  end
  def set_grouped_avg_resolution_time
    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
  end
  def set_grouped_avg_first_response_time
    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
  end
  def set_grouped_avg_reply_time
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end
  def set_grouped_resolved_conversations_count
    @grouped_resolved_conversations_count = reporting_events
                                            .where(name: 'conversation_resolved')
                                            .select(group_by_key, :conversation_id)
                                            .distinct
                                            .group(group_by_key)
                                            .count(:conversation_id)
  end
  def group_by_key
    :inbox_id
  end
  def reporting_events
    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
  end
  def prepare_report
    account.inboxes.each_with_object([]) do |inbox, arr|
      inbox_id = inbox.id
      arr << {
        id: inbox_id,
        conversations_count: @grouped_conversations_count[inbox_id],
        resolved_conversations_count: @grouped_resolved_conversations_count[inbox_id],
        avg_resolution_time: @grouped_avg_resolution_time[inbox_id],
        avg_first_response_time: @grouped_avg_first_response_time[inbox_id],
        avg_reply_time: @grouped_avg_reply_time[inbox_id]
      }
    end
  end
  def average_value_key
    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
  end
 end
@@ -3,6 +3,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
  def build
    set_grouped_conversations_count
    set_grouped_resolved_conversations_count
    set_grouped_avg_reply_time
    set_grouped_avg_first_response_time
    set_grouped_avg_resolution_time
@@ -27,6 +28,15 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
  end
  def set_grouped_resolved_conversations_count
    @grouped_resolved_conversations_count = reporting_events
                                            .where(name: 'conversation_resolved')
                                            .select(group_by_key, :conversation_id)
                                            .distinct
                                            .group(group_by_key)
                                            .count(:conversation_id)
  end
  def reporting_events
    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
  end
@@ -40,6 +50,7 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
      arr << {
        id: team.id,
        conversations_count: @grouped_conversations_count[team.id],
        resolved_conversations_count: @grouped_resolved_conversations_count[team.id],
        avg_resolution_time: @grouped_avg_resolution_time[team.id],
        avg_first_response_time: @grouped_avg_first_response_time[team.id],
        avg_reply_time: @grouped_avg_reply_time[team.id]
@@ -24,7 +24,7 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
  def update
    @agent.update!(agent_params.slice(:name).compact)
-    @agent.current_account_user.update!(agent_params.slice(*account_user_attributes).compact)
+    @agent.current_account_user.update!(agent_params.slice(:role, :availability, :auto_offline).compact)
  end
  def destroy
@@ -67,16 +67,8 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
    @agent = agents.find(params[:id])
  end
  def account_user_attributes
    [:role, :availability, :auto_offline]
  end
  def allowed_agent_params
    [:name, :email, :name, :role, :availability, :auto_offline]
  end
  def agent_params
-    params.require(:agent).permit(allowed_agent_params)
+    params.require(:agent).permit(:name, :email, :name, :role, :availability, :auto_offline)
  end
  def new_agent_params
@@ -109,5 +101,3 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
    DeleteObjectJob.perform_later(agent) if agent.reload.account_users.blank?
  end
 end
 Api::V1::Accounts::AgentsController.prepend_mod_with('Api::V1::Accounts::AgentsController')
@@ -6,15 +6,13 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  def index
    @portal_articles = @portal.articles
-
+    @all_articles = @portal_articles.search(list_params)
-    set_article_count
+    @articles_count = @all_articles.count
    @articles = @articles.search(list_params)
    @articles = if list_params[:category_slug].present?
-                  @articles.order_by_position.page(@current_page)
+                  @all_articles.order_by_position.page(@current_page)
                else
-                  @articles.order_by_updated_at.page(@current_page)
+                  @all_articles.order_by_updated_at.page(@current_page)
                end
  end
@@ -45,19 +43,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  private
  def set_article_count
    # Search the params without status and author_id, use this to
    # compute mine count published draft etc
    base_search_params = list_params.except(:status, :author_id)
    @articles = @portal_articles.search(base_search_params)
    @articles_count = @articles.count
    @mine_articles_count = @articles.search_by_author(Current.user.id).count
    @published_articles_count = @articles.published.count
    @draft_articles_count = @articles.draft.count
    @archived_articles_count = @articles.archived.count
  end
  def fetch_article
    @article = @portal.articles.find(params[:id])
  end
@@ -68,10 +53,9 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  def article_params
    params.require(:article).permit(
-      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status,
+      :title, :slug, :position, :content, :description, :position, :category_id, :author_id, :associated_article_id, :status, meta: [:title,
-      :locale, meta: [:title,
+                                                                                                                                     :description,
-                      :description,
+                                                                                                                                     { tags: [] }]
                      { tags: [] }]
    )
  end
@@ -13,7 +13,7 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
  def destroy
    ActiveRecord::Base.transaction do
-      message.update!(content: I18n.t('conversations.messages.deleted'), content_type: :text, content_attributes: { deleted: true })
+      message.update!(content: I18n.t('conversations.messages.deleted'), content_attributes: { deleted: true })
      message.attachments.destroy_all
    end
  end
@@ -10,7 +10,7 @@ class Api::V1::Accounts::Integrations::AppsController < Api::V1::Accounts::BaseC
  private
  def fetch_apps
-    @apps = Integrations::App.all.select { |app| app.active?(Current.account) }
+    @apps = Integrations::App.all.select(&:active?)
  end
  def fetch_app
@@ -1,53 +0,0 @@
 class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
  before_action :hook
  def proxy
    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
    render plain: response.body, status: response.code
  end
  private
  def headers
    {
      'X-User-Email' => hook.settings['account_email'],
      'X-User-Token' => hook.settings['access_token'],
      'Content-Type' => 'application/json',
      'Accept' => '*/*'
    }
  end
  def request_path
    request_route = with_leading_hash_on_route(params[:route])
    return 'api/sessions/profile' if request_route == '/sessions/profile'
    "api/accounts/#{hook.settings['account_id']}#{request_route}"
  end
  def request_url
    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
    URI.join(base_url, request_path).to_s
  end
  def hook
    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
  end
  def request_method
    method = permitted_params[:method].downcase
    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
    method
  end
  def with_leading_hash_on_route(request_route)
    return '' if request_route.blank?
    request_route.start_with?('/') ? request_route : "/#{request_route}"
  end
  def permitted_params
    params.permit(:method, :route, body: {})
  end
 end
@@ -11,17 +11,7 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Base
  end
  def process_event
-    response = @hook.process_event(params[:event])
+    render json: { message: @hook.process_event(params[:event]) }
    # for cases like an invalid event, or when conversation does not have enough messages
    # for a label suggestion, the response is nil
    if response.nil?
      render json: { message: nil }
    elsif response[:error]
      render json: { error: response[:error] }, status: :unprocessable_entity
    else
      render json: { message: response[:message] }
    end
  end
  def destroy
@@ -20,7 +20,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
  end
  def create
-    @portal = Current.account.portals.build(portal_params.merge(live_chat_widget_params))
+    @portal = Current.account.portals.build(portal_params)
    @portal.custom_domain = parsed_custom_domain
    @portal.save!
    process_attached_logo
@@ -28,7 +28,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
  def update
    ActiveRecord::Base.transaction do
-      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
+      @portal.update!(portal_params) if params[:portal].present?
      # @portal.custom_domain = parsed_custom_domain
      process_attached_logo if params[:blob_id].present?
    rescue StandardError => e
@@ -70,21 +70,11 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
  def portal_params
    params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived, { config: [:default_locale,
-      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
+                                                                                                                          { allowed_locales: [] }] }
    )
  end
  def live_chat_widget_params
    permitted_params = params.permit(:inbox_id)
    return {} if permitted_params[:inbox_id].blank?
    inbox = Inbox.find(permitted_params[:inbox_id])
    return {} unless inbox.web_widget?
    { channel_web_widget_id: inbox.channel.id }
  end
  def portal_member_params
    params.require(:portal).permit(:account_id, member_ids: [])
  end
@@ -1,68 +1,13 @@
 class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
  def create
-    result = if params[:attachment].present?
+    file_blob = ActiveStorage::Blob.create_and_upload!(
-               create_from_file
+      key: nil,
-             elsif params[:external_url].present?
+      io: params[:attachment].tempfile,
-               create_from_url
+      filename: params[:attachment].original_filename,
-             else
+      content_type: params[:attachment].content_type
               render_error('No file or URL provided', :unprocessable_entity)
             end
    render_success(result) if result.is_a?(ActiveStorage::Blob)
  end
  private
  def create_from_file
    attachment = params[:attachment]
    create_and_save_blob(attachment.tempfile, attachment.original_filename, attachment.content_type)
  end
  def create_from_url
    uri = parse_uri(params[:external_url])
    return if performed?
    fetch_and_process_file_from_uri(uri)
  end
  def parse_uri(url)
    uri = URI.parse(url)
    validate_uri(uri)
    uri
  rescue URI::InvalidURIError, SocketError
    render_error('Invalid URL provided', :unprocessable_entity)
    nil
  end
  def validate_uri(uri)
    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
  end
  def fetch_and_process_file_from_uri(uri)
    uri.open do |file|
      create_and_save_blob(file, File.basename(uri.path), file.content_type)
    end
  rescue OpenURI::HTTPError => e
    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
  rescue SocketError
    render_error('Invalid URL provided', :unprocessable_entity)
  rescue StandardError
    render_error('An unexpected error occurred', :internal_server_error)
  end
  def create_and_save_blob(io, filename, content_type)
    ActiveStorage::Blob.create_and_upload!(
      io: io,
      filename: filename,
      content_type: content_type
    )
-  end
+    file_blob.save!
  def render_success(file_blob)
    render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
  end
  def render_error(message, status)
    render json: { error: message }, status: status
  end
 end
@@ -11,8 +11,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
      process_update_contact
      @conversation = create_conversation
      conversation.messages.create!(message_params)
      # TODO: Temporary fix for message type cast issue, since message_type is returning as string instead of integer
      conversation.reload
    end
  end
@@ -0,0 +1,57 @@
 class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseController
  before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
  before_action :set_group_scope, only: [:grouped_conversation_metrics]
  def conversation_metrics
    render json: {
      open: @conversations.open.count,
      unattended: @conversations.open.unattended.count,
      unassigned: @conversations.open.unassigned.count
    }
  end
  def grouped_conversation_metrics
    count_by_group = @conversations.open.group(@group_scope).count
    unattended_by_group = @conversations.open.unattended.group(@group_scope).count
    unassigned_by_group = @conversations.open.unassigned.group(@group_scope).count
    group_metrics = count_by_group.map do |group_id, count|
      metric = {
        open: count,
        unattended: unattended_by_group[group_id] || 0,
        unassigned: unassigned_by_group[group_id] || 0
      }
      metric[@group_scope] = group_id
      metric
    end
    render json: group_metrics
  end
  private
  def set_group_scope
    render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
      team_id
      assignee_id
    ].include?(permitted_params[:group_by])
    @group_scope = permitted_params[:group_by]
  end
  def team
    return unless permitted_params[:team_id]
    @team ||= Current.account.teams.find(permitted_params[:team_id])
  end
  def load_conversations
    scope = Current.account.conversations
    scope = scope.where(team_id: team.id) if team.present?
    @conversations = scope
  end
  def permitted_params
    params.permit(:team_id, :group_by)
  end
 end
@@ -66,9 +66,7 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
  end
  def check_authorization
-    return if Current.account_user.administrator?
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
    raise Pundit::NotAuthorizedError
  end
  def common_params
@@ -137,5 +135,3 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
    V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
  end
 end
 Api::V2::Accounts::ReportsController.prepend_mod_with('Api::V2::Accounts::ReportsController')
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,6 +10,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::TeamSummaryBuilder)
  end
  def inbox
    render_report_with(V2::Reports::InboxSummaryBuilder)
  end
  private
  def check_authorization
@@ -72,7 +72,7 @@ class DashboardController < ActionController::Base
    @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
                          'v3app'
                        else
-                          'dashboard'
+                          'application'
                        end
  end
@@ -1,15 +1,6 @@
 class Google::CallbacksController < OauthCallbackController
  include GoogleConcern
  def find_channel_by_email
    # find by imap_login first, and then by email
    # this ensures the legacy users can migrate correctly even if inbox email address doesn't match
    imap_channel = Channel::Email.find_by(imap_login: users_data['email'], account: account)
    return imap_channel if imap_channel
    Channel::Email.find_by(email: users_data['email'], account: account)
  end
  private
  def provider_name
@@ -25,7 +25,7 @@ class OauthCallbackController < ApplicationController
  end
  def find_or_create_inbox
-    channel_email = find_channel_by_email
+    channel_email = Channel::Email.find_by(email: users_data['email'], account: account)
    # we need this value to know where to redirect on sucessful processing of the callback
    channel_exists = channel_email.present?
@@ -39,10 +39,6 @@ class OauthCallbackController < ApplicationController
    [channel_email.inbox, channel_exists]
  end
  def find_channel_by_email
    Channel::Email.find_by(email: users_data['email'], account: account)
  end
  def update_channel(channel_email)
    channel_email.update!({
                            imap_login: users_data['email'], imap_address: imap_address,
@@ -4,7 +4,6 @@ class Platform::Api::V1::AccountsController < PlatformController
  def create
    @resource = Account.create!(account_params)
    update_resource_features
    @resource.save!
    @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
  end
@@ -6,7 +6,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  layout 'portal'
  def index
-    @articles = @portal.articles.published
+    @articles = @portal.articles
    search_articles
    order_by_sort_param
    @articles.page(list_params[:page]) if list_params[:page].present?
@@ -30,7 +30,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
  def set_article
    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
+    @article.increment_view_count
    @parsed_content = render_article_content(@article.content)
  end
@@ -26,8 +26,7 @@ class AccountDashboard < Administrate::BaseDashboard
    conversations: CountField,
    locale: Field::Select.with_options(collection: LANGUAGES_CONFIG.map { |_x, y| y[:iso_639_1_code] }),
    status: Field::Select.with_options(collection: [%w[Active active], %w[Suspended suspended]]),
-    account_users: Field::HasMany,
+    account_users: Field::HasMany
    custom_attributes: Field::String
  }.merge(enterprise_attribute_types).freeze
  # COLLECTION_ATTRIBUTES
@@ -46,7 +45,7 @@ class AccountDashboard < Administrate::BaseDashboard
  # SHOW_PAGE_ATTRIBUTES
  # an array of attributes that will be displayed on the model's show page.
-  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[custom_attributes limits all_features] : []
+  enterprise_show_page_attributes = ChatwootApp.enterprise? ? %i[limits all_features] : []
  SHOW_PAGE_ATTRIBUTES = (%i[
    id
    name
@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
  end
  def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
    (date - number_of_days).to_i.to_s
  end
  def until_timestamp(date)
@@ -1,5 +1,33 @@
 <template>
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
    :class="{ 'app-rtl--wrapper': isRTLView }"
    :dir="isRTLView ? 'rtl' : 'ltr'"
  >
    <update-banner :latest-chatwoot-version="latestChatwootVersion" />
    <template v-if="currentAccountId">
      <pending-email-verification-banner v-if="hideOnOnboardingView" />
      <payment-pending-banner v-if="hideOnOnboardingView" />
      <upgrade-banner />
    </template>
    <transition name="fade" mode="out-in">
      <router-view />
    </transition>
    <add-account-modal
      :show="showAddAccountModal"
      :has-accounts="hasAccounts"
    />
    <woot-snackbar-box />
    <network-notification />
  </div>
  <loading-state v-else />
 </template>
 <script>
 import { mapGetters } from 'vuex';
 import router from '../dashboard/routes';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
@@ -8,12 +36,10 @@ 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 rtlMixin from 'shared/mixins/rtlMixin';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
 import {
  registerSubscription,
  verifyServiceWorkerExistence,
@@ -33,13 +59,9 @@ export default {
    UpgradeBanner,
    PendingEmailVerificationBanner,
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const { accountId } = useAccount();
-    return { router, store, currentAccountId: accountId };
+  mixins: [rtlMixin],
-  },
+
  data() {
    return {
      showAddAccountModal: false,
@@ -47,13 +69,15 @@ export default {
      reconnectService: null,
    };
  },
  computed: {
    ...mapGetters({
      getAccount: 'accounts/getAccount',
      isRTL: 'accounts/isRTL',
      currentUser: 'getCurrentUser',
      globalConfig: 'globalConfig/get',
      authUIFlags: 'getAuthUIFlags',
      accountUIFlags: 'accounts/getUIFlags',
      currentAccountId: 'getCurrentAccountId',
    }),
    hasAccounts() {
      const { accounts = [] } = this.currentUser || {};
@@ -70,13 +94,10 @@ export default {
        this.showAddAccountModal = true;
      }
    },
-    currentAccountId: {
+    currentAccountId() {
-      immediate: true,
+      if (this.currentAccountId) {
-      handler() {
+        this.initializeAccount();
-        if (this.currentAccountId) {
+      }
          this.initializeAccount();
        }
      },
    },
  },
  mounted() {
@@ -84,7 +105,7 @@ export default {
    this.listenToThemeChanges();
    this.setLocale(window.chatwootConfig.selectedLocale);
  },
-  unmounted() {
+  beforeDestroy() {
    if (this.reconnectService) {
      this.reconnectService.disconnect();
    }
@@ -109,10 +130,10 @@ export default {
        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
      this.setLocale(locale);
      this.updateRTLDirectionView(locale);
      this.latestChatwootVersion = latestChatwootVersion;
-      vueActionCable.init(this.store, pubsubToken);
+      vueActionCable.init(pubsubToken);
-      this.reconnectService = new ReconnectService(this.store, this.router);
+      this.reconnectService = new ReconnectService(this.$store, router);
      window.reconnectService = this.reconnectService;
      verifyServiceWorkerExistence(registration =>
        registration.pushManager.getSubscription().then(subscription => {
@@ -126,50 +147,8 @@ export default {
 };
 </script>
 <template>
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
    :class="{ 'app-rtl--wrapper': isRTL }"
    :dir="isRTL ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
    <template v-if="currentAccountId">
      <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
      <PaymentPendingBanner v-if="hideOnOnboardingView" />
      <UpgradeBanner />
    </template>
    <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 />
  </div>
  <LoadingState v-else />
 </template>
 <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.css"></style>
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
@@ -1,20 +1,12 @@
 /* global axios */
 const DEFAULT_API_VERSION = 'v1';
 const DEFAULT_OPTIONS = {
  apiVersion: DEFAULT_API_VERSION,
  enterprise: false,
  accountScoped: false,
  cancelPreviousRequests: false,
 };
 class ApiClient {
  constructor(resource, options = {}) {
-    this.options = { ...DEFAULT_OPTIONS, ...options };
+    this.apiVersion = `/api/${options.apiVersion || DEFAULT_API_VERSION}`;
-    this.apiVersion = `/api/${this.options.apiVersion}`;
+    this.options = options;
    this.resource = resource;
    this.abortControllers = new Map();
    this.activeRequests = new Map();
  }
  get url() {
@@ -47,105 +39,24 @@ class ApiClient {
    return url;
  }
-  generateRequestKey(method, id = '', customRequestKey = '') {
+  get() {
-    if (customRequestKey) return customRequestKey;
+    return axios.get(this.url);
    return `${method}-${this.url}${id ? `/${id}` : ''}`;
  }
-  cancelRequest(requestKey) {
+  show(id) {
-    const controller = this.abortControllers.get(requestKey);
+    return axios.get(`${this.url}/${id}`);
    if (controller) {
      controller.abort();
      this.abortControllers.delete(requestKey);
      return true;
    }
    return false;
  }
-  setupRequest(method, options = {}) {
+  create(data) {
-    if (!this.options.cancelPreviousRequests) {
+    return axios.post(this.url, data);
      return {};
    }
    const { id, customRequestKey } = options;
    const requestKey = this.generateRequestKey(method, id, customRequestKey);
    const previousRequests = this.activeRequests.get(method) || [];
    const remainingRequests = previousRequests.filter(key => {
      if (key === requestKey) {
        this.cancelRequest(key);
        return false;
      }
      return true;
    });
    this.activeRequests.set(method, [...remainingRequests, requestKey]);
    const controller = new AbortController();
    this.abortControllers.set(requestKey, controller);
    return { requestKey, signal: controller.signal };
  }
-  async request(method, config = {}) {
+  update(id, data) {
-    const { id, data, customRequestKey, ...axiosConfig } = config;
+    return axios.patch(`${this.url}/${id}`, data);
    const { requestKey, signal } = this.setupRequest(method, {
      id,
      customRequestKey,
    });
    try {
      const url = id ? `${this.url}/${id}` : this.url;
      return await axios({
        method,
        url,
        data,
        signal,
        ...axiosConfig,
      });
    } finally {
      this.abortControllers.delete(requestKey);
      if (this.options.cancelPreviousRequests) {
        const methodRequests = this.activeRequests.get(method) || [];
        this.activeRequests.set(
          method,
          methodRequests.filter(key => key !== requestKey)
        );
      }
    }
  }
-  get(config = {}) {
+  delete(id) {
-    return this.request('GET', config);
+    return axios.delete(`${this.url}/${id}`);
  }
  show(id, config = {}) {
    return this.request('GET', { ...config, id });
  }
  create(data, config = {}) {
    return this.request('POST', { ...config, data });
  }
  update(id, data, config = {}) {
    return this.request('PATCH', { ...config, id, data });
  }
  delete(id, config = {}) {
    return this.request('DELETE', { ...config, id });
  }
  cancelAllRequests() {
    this.abortControllers.forEach(controller => controller.abort());
    this.abortControllers.clear();
    this.activeRequests.clear();
  }
  // Get all active request keys
  getActiveRequests() {
    return Array.from(this.abortControllers.keys());
  }
  destroy() {
    this.cancelAllRequests();
  }
 }
@@ -1,9 +0,0 @@
 import ApiClient from './ApiClient';
 class CustomRole extends ApiClient {
  constructor() {
    super('custom_roles', { accountScoped: true });
  }
 }
 export default new CustomRole();
@@ -52,13 +52,12 @@ class ArticlesAPI extends PortalsAPI {
  }
  createArticle({ portalSlug, articleObj }) {
-    const { content, title, authorId, categoryId, locale } = articleObj;
+    const { content, title, author_id, category_id } = articleObj;
    return axios.post(`${this.url}/${portalSlug}/articles`, {
      content,
      title,
-      author_id: authorId,
+      author_id,
-      category_id: categoryId,
+      category_id,
      locale,
    });
  }
@@ -32,10 +32,6 @@ class IntegrationsAPI extends ApiClient {
  deleteHook(hookId) {
    return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
  }
  requestCaptain(body) {
    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
  }
 }
 export default new IntegrationsAPI();
@@ -0,0 +1,20 @@
 /* global axios */
 import ApiClient from './ApiClient';
 class LiveReportsAPI extends ApiClient {
  constructor() {
    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
  }
  getConversationMetric(params = {}) {
    return axios.get(`${this.url}/conversation_metrics`, { params });
  }
  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
    return axios.get(`${this.url}/grouped_conversation_metrics`, {
      params: { group_by: groupBy },
    });
  }
 }
 export default new LiveReportsAPI();
@@ -5,11 +5,7 @@ const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
 class ReportsAPI extends ApiClient {
  constructor() {
-    super('reports', {
+    super('reports', { accountScoped: true, apiVersion: 'v2' });
      accountScoped: true,
      apiVersion: 'v2',
      cancelPreviousRequests: true,
    });
  }
  getReports({
@@ -21,8 +17,7 @@ class ReportsAPI extends ApiClient {
    groupBy,
    businessHours,
  }) {
-    return this.request('GET', {
+    return axios.get(`${this.url}`, {
      customRequestKey: `${metric}-report-GET`,
      params: {
        metric,
        since: from,
@@ -52,9 +47,7 @@ class ReportsAPI extends ApiClient {
  }
  getConversationMetric(type = 'account', page = 1) {
-    return this.request('GET', {
+    return axios.get(`${this.url}/conversations`, {
      requestPath: `${this.url}/conversations`,
      params: {
        type,
        page,
@@ -68,9 +61,9 @@ class ReportsAPI extends ApiClient {
    });
  }
-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
    return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
    });
  }
@@ -0,0 +1,40 @@
 /* global axios */
 import ApiClient from './ApiClient';
 class SummaryReportsAPI extends ApiClient {
  constructor() {
    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
  }
  getTeamReports({ since, until, businessHours } = {}) {
    return axios.get(`${this.url}/team`, {
      params: {
        since,
        until,
        business_hours: businessHours,
      },
    });
  }
  getAgentReports({ since, until, businessHours } = {}) {
    return axios.get(`${this.url}/agent`, {
      params: {
        since,
        until,
        business_hours: businessHours,
      },
    });
  }
  getInboxReports({ since, until, businessHours } = {}) {
    return axios.get(`${this.url}/inbox`, {
      params: {
        since,
        until,
        business_hours: businessHours,
      },
    });
  }
 }
 export default new SummaryReportsAPI();
@@ -1,3 +0,0 @@
 <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>
@@ -1,3 +0,0 @@
 <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>
@@ -31,6 +31,23 @@
  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);
 }
@@ -48,8 +65,7 @@
 .menu-slide-enter-active,
 .menu-slide-leave-active {
  transform: translateY(0);
-  transition:
+  transition: transform 0.25s var(--ease-in-cubic),
    transform 0.25s var(--ease-in-cubic),
    opacity 0.15s var(--ease-in-cubic);
 }
@@ -1,4 +1,4 @@
-@import 'vue-datepicker-next/scss/index';
+@import '~vue2-datepicker/scss/index';
 .date-picker {
  // To be removed one SLA reports date picker is created
@@ -25,7 +25,7 @@
  }
  .mx-input {
-    @apply h-[2.5rem] flex border border-solid border-n-weak rounded-md shadow-none;
+    @apply h-[2.5rem] flex border border-solid border-slate-200 dark:border-slate-600 rounded-md shadow-none;
  }
  .mx-input:disabled,
@@ -39,7 +39,7 @@
 }
 .mx-datepicker-main {
-  @apply border-0 bg-n-solid-2 rounded-xl;
+  @apply border-0 bg-white dark:bg-slate-800;
  .cell {
    &.disabled {
@@ -53,14 +53,6 @@
    }
  }
  .mx-calendar+.mx-calendar {
    @apply border-l border-n-weak;
  }
  .mx-datepicker-footer {
    @apply border border-n-weak;
  }
  .mx-time {
    @apply border-0 bg-white dark:bg-slate-800;
@@ -1,4 +1,4 @@
-@import 'dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/variables';
 .formulate-input {
  .formulate-input-errors {
@@ -1,11 +1,10 @@
 // scss-lint:disable SpaceAfterPropertyColon
@import 'shared/assets/fonts/inter';
 // Inter,
 html,
 body {
  font-family:
-    'Inter',
+    'PlusJakarta',
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
@@ -24,7 +23,7 @@ body {
 }
 .app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
+  @apply h-full flex-grow-0 min-h-0 w-full;
  .button--fixed-top {
    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
@@ -1,5 +1,5 @@
-@import 'dashboard/assets/scss/variables';
+@import '~dashboard/assets/scss/variables';
-@import 'widget/assets/scss/mixins';
+@import '~widget/assets/scss/mixins';
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
@@ -89,6 +89,9 @@ $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;
@@ -2,9 +2,7 @@
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
-@import 'shared/assets/fonts/InterDisplay/inter-display';
+@import 'shared/assets/fonts/plus-jakarta';
@import 'shared/assets/fonts/inter';
@import 'shared/assets/stylesheets/animations';
@import 'shared/assets/stylesheets/colors';
@import 'shared/assets/stylesheets/spacing';
@@ -33,181 +31,18 @@
@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 max-w-96;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }
 #app {
  @apply h-full w-full;
 }
 .hide {
  @apply hidden;
 }
 .n-blue-border {
  @apply border-n-blue-border;
 }
 .n-blue-text {
  @apply text-n-blue-text;
 }
 // scss-lint:disable PropertySortOrder
@layer base {
-  /* NEXT COLORS START */
+  // scss-lint:disable PropertySortOrder
  :root {
    /* slate */
    --slate-1: 252 252 253;
    --slate-2: 249 249 251;
    --slate-3: 240 240 243;
    --slate-4: 232 232 236;
    --slate-5: 224 225 230;
    --slate-6: 217 217 224;
    --slate-7: 205 206 214;
    --slate-8: 185 187 198;
    --slate-9: 139 141 152;
    --slate-10: 128 131 141;
    --slate-11: 96 100 108;
    --slate-12: 28 32 36;
    --ruby-1: 255 252 253;
    --ruby-2: 255 247 248;
    --ruby-3: 254 234 237;
    --ruby-4: 255 220 225;
    --ruby-5: 255 206 214;
    --ruby-6: 248 191 200;
    --ruby-7: 239 172 184;
    --ruby-8: 229 146 163;
    --ruby-9: 229 70 102;
    --ruby-10: 220 59 93;
    --ruby-11: 202 36 77;
    --ruby-12: 100 23 43;
    --amber-1: 254 253 251;
    --amber-2: 254 251 233;
    --amber-3: 255 247 194;
    --amber-4: 255 238 156;
    --amber-5: 251 229 119;
    --amber-6: 243 214 115;
    --amber-7: 233 193 98;
    --amber-8: 226 163 54;
    --amber-9: 255 197 61;
    --amber-10: 255 186 24;
    --amber-11: 171 100 0;
    --amber-12: 79 52 34;
    --teal-1: 250 254 253;
    --teal-2: 243 251 249;
    --teal-3: 224 248 243;
    --teal-4: 204 243 234;
    --teal-5: 184 234 224;
    --teal-6: 161 222 210;
    --teal-7: 131 205 193;
    --teal-8: 83 185 171;
    --teal-9: 18 165 148;
    --teal-10: 13 155 138;
    --teal-11: 0 133 115;
    --teal-12: 13 61 56;
    --background-color: 253 253 253;
    --text-blue: 8 109 224;
    --border-container: 236 236 236;
    --border-strong: 235 235 235;
    --border-weak: 234 234 234;
    --solid-1: 255 255 255;
    --solid-2: 255 255 255;
    --solid-3: 255 255 255;
    --solid-active: 255 255 255;
    --solid-amber: 252 232 193;
    --solid-blue: 218 236 255;
    --alpha-1: 67, 67, 67, 0.06;
    --alpha-2: 201, 202, 207, 0.15;
    --alpha-3: 255, 255, 255, 0.96;
    --black-alpha-1: 0, 0, 0, 0.12;
    --black-alpha-2: 0, 0, 0, 0.04;
    --border-blue: 39, 129, 246, 0.5;
    --white-alpha: 255, 255, 255, 0.1;
  }
  body.dark {
    /* slate */
    --slate-1: 17 17 19;
    --slate-2: 24 25 27;
    --slate-3: 33 34 37;
    --slate-4: 39 42 45;
    --slate-5: 46 49 53;
    --slate-6: 54 58 63;
    --slate-7: 67 72 78;
    --slate-8: 90 97 105;
    --slate-9: 105 110 119;
    --slate-10: 119 123 132;
    --slate-11: 176 180 186;
    --slate-12: 237 238 240;
    --ruby-1: 25 17 19;
    --ruby-2: 30 21 23;
    --ruby-3: 58 20 30;
    --ruby-4: 78 19 37;
    --ruby-5: 94 26 46;
    --ruby-6: 111 37 57;
    --ruby-7: 136 52 71;
    --ruby-8: 179 68 90;
    --ruby-9: 229 70 102;
    --ruby-10: 236 90 114;
    --ruby-11: 255 148 157;
    --ruby-12: 254 210 225;
    --amber-1: 22 18 12;
    --amber-2: 29 24 15;
    --amber-3: 48 32 8;
    --amber-4: 63 39 0;
    --amber-5: 77 48 0;
    --amber-6: 92 61 5;
    --amber-7: 113 79 25;
    --amber-8: 143 100 36;
    --amber-9: 255 197 61;
    --amber-10: 255 214 10;
    --amber-11: 255 202 22;
    --amber-12: 255 231 179;
    --teal-1: 13 21 20;
    --teal-2: 17 28 27;
    --teal-3: 13 45 42;
    --teal-4: 2 59 55;
    --teal-5: 8 72 67;
    --teal-6: 20 87 80;
    --teal-7: 28 105 97;
    --teal-8: 32 126 115;
    --teal-9: 18 165 148;
    --teal-10: 14 179 158;
    --teal-11: 11 216 182;
    --teal-12: 173 240 221;
    --background-color: 18 18 19;
    --border-strong: 52 52 52;
    --border-weak: 38 38 42;
    --solid-1: 23 23 26;
    --solid-2: 29 30 36;
    --solid-3: 44 45 54;
    --solid-active: 53 57 66;
    --solid-amber: 42 37 30;
    --solid-blue: 16 49 91;
    --text-blue: 126 182 255;
    --alpha-1: 36, 36, 36, 0.8;
    --alpha-2: 139, 147, 182, 0.15;
    --alpha-3: 36, 38, 45, 0.9;
    --black-alpha-1: 0, 0, 0, 0.3;
    --black-alpha-2: 0, 0, 0, 0.2;
    --border-blue: 39, 129, 246, 0.5;
    --border-container: 236, 236, 236, 0;
    --white-alpha: 255, 255, 255, 0.1;
  }
  /* NEXT COLORS END */
  :root {
    --color-amber-25: 254 253 251;
    --color-amber-50: 255 249 237;
@@ -378,7 +213,6 @@
    --color-orange-800: 204 78 0;
    --color-orange-900: 88 45 29;
  }
  // scss-lint:disable QualifyingElement
  body.dark {
    --color-amber-25: 31 19 0;
@@ -550,15 +384,3 @@
    --color-orange-900: 255 224 194;
  }
 }
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
 }
@@ -222,7 +222,6 @@
  .multiselect__input {
    @apply h-[2.875rem] min-h-[2.875rem];
    margin-bottom: 0px !important;
  }
  .multiselect__single {
@@ -0,0 +1,39 @@
@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%;
 }
@@ -31,13 +31,7 @@ hr {
 ul,
 ol,
 dl {
-  @apply list-disc list-outside leading-[1.65];
+  @apply mb-2 list-disc list-outside leading-[1.65];
 }
 ul:not(.reset-base),
 ol:not(.reset-base),
 dl:not(.reset-base) {
  @apply mb-0;
 }
 // Form elements
@@ -96,7 +96,7 @@ button {
  }
  // @TODDO - Remove after moving all buttons to woot-button
-  .icon + .button__content {
+  .icon+.button__content {
    @apply w-auto;
  }
@@ -1,10 +1,6 @@
 table {
  @apply border-spacing-0 text-sm w-full;
 }
 .woot-table {
  thead {
    th {
      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
@@ -20,7 +16,9 @@ table {
      @apply p-2.5 text-slate-700 dark:text-slate-100;
    }
  }
 }
 .woot-table {
  tr {
    .show-if-hover {
      transition: opacity 0.2s $swift-ease-out-function;
@@ -1,137 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
 import SMSCampaignDetails from './SMSCampaignDetails.vue';
 const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  message: {
    type: String,
    default: '',
  },
  isLiveChatType: {
    type: Boolean,
    default: false,
  },
  isEnabled: {
    type: Boolean,
    default: false,
  },
  status: {
    type: String,
    default: '',
  },
  sender: {
    type: Object,
    default: null,
  },
  inbox: {
    type: Object,
    default: null,
  },
  scheduledAt: {
    type: Number,
    default: 0,
  },
 });
 const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();
 const STATUS_COMPLETED = 'completed';
 const { formatMessage } = useMessageFormatter();
 const isActive = computed(() =>
  props.isLiveChatType ? props.isEnabled : props.status !== STATUS_COMPLETED
 );
 const statusTextColor = computed(() => ({
  'text-n-teal-11': isActive.value,
  'text-n-slate-12': !isActive.value,
 }));
 const campaignStatus = computed(() => {
  if (props.isLiveChatType) {
    return props.isEnabled
      ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
  }
  return props.status === STATUS_COMPLETED
    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });
 const inboxName = computed(() => props.inbox?.name || '');
 const inboxIcon = computed(() => {
  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
  return getInboxIconByType(type, phoneNumber);
 });
 </script>
 <template>
  <CardLayout layout="row">
    <div class="flex flex-col items-start justify-between flex-1 min-w-0 gap-2">
      <div class="flex justify-between gap-3 w-fit">
        <span
          class="text-base font-medium capitalize text-n-slate-12 line-clamp-1"
        >
          {{ title }}
        </span>
        <span
          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
          :class="statusTextColor"
        >
          {{ campaignStatus }}
        </span>
      </div>
      <div
        v-dompurify-html="formatMessage(message)"
        class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
      />
      <div class="flex items-center w-full h-6 gap-2 overflow-hidden">
        <LiveChatCampaignDetails
          v-if="isLiveChatType"
          :sender="sender"
          :inbox-name="inboxName"
          :inbox-icon="inboxIcon"
        />
        <SMSCampaignDetails
          v-else
          :inbox-name="inboxName"
          :inbox-icon="inboxIcon"
          :scheduled-at="scheduledAt"
        />
      </div>
    </div>
    <div class="flex items-center justify-end w-20 gap-2">
      <Button
        v-if="isLiveChatType"
        variant="faded"
        size="sm"
        color="slate"
        icon="i-lucide-sliders-vertical"
        @click="emit('edit')"
      />
      <Button
        variant="faded"
        color="ruby"
        size="sm"
        icon="i-lucide-trash"
        @click="emit('delete')"
      />
    </div>
  </CardLayout>
 </template>
@@ -1,56 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 const props = defineProps({
  sender: {
    type: Object,
    default: null,
  },
  inboxName: {
    type: String,
    default: '',
  },
  inboxIcon: {
    type: String,
    default: '',
  },
 });
 const { t } = useI18n();
 const senderName = computed(
  () => props.sender?.name || t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.BOT')
 );
 const senderThumbnailSrc = computed(() => props.sender?.thumbnail);
 </script>
 <template>
  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
  </span>
  <div class="flex items-center gap-1.5 flex-shrink-0">
    <Avatar
      :name="senderName"
      :src="senderThumbnailSrc"
      :size="16"
      rounded-full
    />
    <span class="text-sm font-medium text-n-slate-12">
      {{ senderName }}
    </span>
  </div>
  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
    {{ t('CAMPAIGN.LIVE_CHAT.CARD.CAMPAIGN_DETAILS.FROM') }}
  </span>
  <div class="flex items-center gap-1.5 flex-shrink-0">
    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
    <span class="text-sm font-medium text-n-slate-12">
      {{ inboxName }}
    </span>
  </div>
 </template>
@@ -1,41 +0,0 @@
 <script setup>
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import { messageStamp } from 'shared/helpers/timeHelper';
 import { useI18n } from 'vue-i18n';
 defineProps({
  inboxName: {
    type: String,
    default: '',
  },
  inboxIcon: {
    type: String,
    default: '',
  },
  scheduledAt: {
    type: Number,
    default: 0,
  },
 });
 const { t } = useI18n();
 </script>
 <template>
  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.SENT_FROM') }}
  </span>
  <div class="flex items-center gap-1.5 flex-shrink-0">
    <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
    <span class="text-sm font-medium text-n-slate-12">
      {{ inboxName }}
    </span>
  </div>
  <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
    {{ t('CAMPAIGN.SMS.CARD.CAMPAIGN_DETAILS.ON') }}
  </span>
  <span class="flex-1 text-sm font-medium truncate text-n-slate-12">
    {{ messageStamp(new Date(scheduledAt), 'LLL d, h:mm a') }}
  </span>
 </template>
@@ -1,52 +0,0 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 defineProps({
  headerTitle: {
    type: String,
    default: '',
  },
  buttonLabel: {
    type: String,
    default: '',
  },
 });
 const emit = defineEmits(['click', 'close']);
 const handleButtonClick = () => {
  emit('click');
 };
 </script>
 <template>
  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6 lg:px-0">
      <div class="w-full max-w-[960px] mx-auto">
        <div class="flex items-center justify-between w-full h-20 gap-2">
          <span class="text-xl font-medium text-n-slate-12">
            {{ headerTitle }}
          </span>
          <div
            v-on-clickaway="() => emit('close')"
            class="relative group/campaign-button"
          >
            <Button
              :label="buttonLabel"
              icon="i-lucide-plus"
              size="sm"
              class="group-hover/campaign-button:brightness-110"
              @click="handleButtonClick"
            />
            <slot name="action" />
          </div>
        </div>
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
      <div class="w-full max-w-[960px] mx-auto py-4">
        <slot name="default" />
      </div>
    </main>
  </section>
 </template>
@@ -1,212 +0,0 @@
 export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
  {
    id: 1,
    title: 'Chatbot Assistance',
    inbox: {
      id: 2,
      name: 'PaperLayer Website',
      channel_type: 'Channel::WebWidget',
      phone_number: '',
    },
    sender: {
      id: 1,
      name: 'Alexa Rivera',
    },
    message: 'Hello! 👋 Need help with our chatbot features? Feel free to ask!',
    campaign_status: 'active',
    enabled: true,
    campaign_type: 'ongoing',
    trigger_rules: {
      url: 'https://www.chatwoot.com/features/chatbot/',
      time_on_page: 10,
    },
    trigger_only_during_business_hours: true,
    created_at: '2024-10-24T13:10:26.636Z',
    updated_at: '2024-10-24T13:10:26.636Z',
  },
  {
    id: 2,
    title: 'Pricing Information Support',
    inbox: {
      id: 2,
      name: 'PaperLayer Website',
      channel_type: 'Channel::WebWidget',
      phone_number: '',
    },
    sender: {
      id: 1,
      name: 'Jamie Lee',
    },
    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
    campaign_status: 'active',
    enabled: false,
    campaign_type: 'ongoing',
    trigger_rules: {
      url: 'https://www.chatwoot.com/pricings',
      time_on_page: 10,
    },
    trigger_only_during_business_hours: false,
    created_at: '2024-10-24T13:11:08.763Z',
    updated_at: '2024-10-24T13:11:08.763Z',
  },
  {
    id: 3,
    title: 'Product Setup Assistance',
    inbox: {
      id: 2,
      name: 'PaperLayer Website',
      channel_type: 'Channel::WebWidget',
      phone_number: '',
    },
    sender: {
      id: 1,
      name: 'Chatwoot',
    },
    message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
    campaign_status: 'active',
    enabled: false,
    campaign_type: 'ongoing',
    trigger_rules: {
      url: 'https://{*.}?chatwoot.com/apps/account/*/settings/inboxes/new/',
      time_on_page: 10,
    },
    trigger_only_during_business_hours: false,
    created_at: '2024-10-24T13:11:44.285Z',
    updated_at: '2024-10-24T13:11:44.285Z',
  },
  {
    id: 4,
    title: 'General Assistance Campaign',
    inbox: {
      id: 2,
      name: 'PaperLayer Website',
      channel_type: 'Channel::WebWidget',
      phone_number: '',
    },
    sender: {
      id: 1,
      name: 'Chris Barlow',
    },
    message:
      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
    campaign_status: 'active',
    enabled: true,
    campaign_type: 'ongoing',
    trigger_rules: {
      url: 'https://siv.com',
      time_on_page: 200,
    },
    trigger_only_during_business_hours: false,
    created_at: '2024-10-29T19:54:33.741Z',
    updated_at: '2024-10-29T19:56:26.296Z',
  },
 ];
 export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
  {
    id: 1,
    title: 'Customer Feedback Request',
    inbox: {
      id: 6,
      name: 'PaperLayer Mobile',
      channel_type: 'Channel::Sms',
      phone_number: '+29818373149903',
      provider: 'default',
    },
    message:
      'Hello! Enjoying our product? Share your feedback on G2 and earn a $25 Amazon coupon: https://chwt.app/g2-review',
    campaign_status: 'active',
    enabled: true,
    campaign_type: 'one_off',
    scheduled_at: 1729775588,
    audience: [
      { id: 4, type: 'Label' },
      { id: 5, type: 'Label' },
      { id: 6, type: 'Label' },
    ],
    trigger_rules: {},
    trigger_only_during_business_hours: false,
    created_at: '2024-10-24T13:13:08.496Z',
    updated_at: '2024-10-24T13:15:38.698Z',
  },
  {
    id: 2,
    title: 'Welcome New Customer',
    inbox: {
      id: 6,
      name: 'PaperLayer Mobile',
      channel_type: 'Channel::Sms',
      phone_number: '+29818373149903',
      provider: 'default',
    },
    message: 'Welcome aboard! 🎉 Let us know if you have any questions.',
    campaign_status: 'completed',
    enabled: true,
    campaign_type: 'one_off',
    scheduled_at: 1729732500,
    audience: [
      { id: 1, type: 'Label' },
      { id: 6, type: 'Label' },
      { id: 5, type: 'Label' },
      { id: 2, type: 'Label' },
      { id: 4, type: 'Label' },
    ],
    trigger_rules: {},
    trigger_only_during_business_hours: false,
    created_at: '2024-10-24T13:14:00.168Z',
    updated_at: '2024-10-24T13:15:38.707Z',
  },
  {
    id: 3,
    title: 'New Business Welcome',
    inbox: {
      id: 6,
      name: 'PaperLayer Mobile',
      channel_type: 'Channel::Sms',
      phone_number: '+29818373149903',
      provider: 'default',
    },
    message: 'Hello! We’re excited to have your business with us!',
    campaign_status: 'active',
    enabled: true,
    campaign_type: 'one_off',
    scheduled_at: 1730368440,
    audience: [
      { id: 1, type: 'Label' },
      { id: 3, type: 'Label' },
      { id: 6, type: 'Label' },
      { id: 4, type: 'Label' },
      { id: 2, type: 'Label' },
      { id: 5, type: 'Label' },
    ],
    trigger_rules: {},
    trigger_only_during_business_hours: false,
    created_at: '2024-10-30T07:54:49.915Z',
    updated_at: '2024-10-30T07:54:49.915Z',
  },
  {
    id: 4,
    title: 'New Member Onboarding',
    inbox: {
      id: 6,
      name: 'PaperLayer Mobile',
      channel_type: 'Channel::Sms',
      phone_number: '+29818373149903',
      provider: 'default',
    },
    message: 'Welcome to the team! Reach out if you have questions.',
    campaign_status: 'completed',
    enabled: true,
    campaign_type: 'one_off',
    scheduled_at: 1730304840,
    audience: [
      { id: 1, type: 'Label' },
      { id: 3, type: 'Label' },
      { id: 6, type: 'Label' },
    ],
    trigger_rules: {},
    trigger_only_during_business_hours: false,
    created_at: '2024-10-29T16:14:10.374Z',
    updated_at: '2024-10-30T16:15:03.157Z',
  },
 ];
@@ -1,38 +0,0 @@
 <script setup>
 import { ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
 defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
 });
 </script>
 <template>
  <EmptyStateLayout :title="title" :subtitle="subtitle">
    <template #empty-state-item>
      <div class="flex flex-col gap-4 p-px">
        <CampaignCard
          v-for="campaign in ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT"
          :key="campaign.id"
          :title="campaign.title"
          :message="campaign.message"
          :is-enabled="campaign.enabled"
          :status="campaign.campaign_status"
          :sender="campaign.sender"
          :inbox="campaign.inbox"
          :scheduled-at="campaign.scheduled_at"
          is-live-chat-type
        />
      </div>
    </template>
  </EmptyStateLayout>
 </template>
@@ -1,37 +0,0 @@
 <script setup>
 import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
 defineProps({
  title: {
    type: String,
    default: '',
  },
  subtitle: {
    type: String,
    default: '',
  },
 });
 </script>
 <template>
  <EmptyStateLayout :title="title" :subtitle="subtitle">
    <template #empty-state-item>
      <div class="flex flex-col gap-4 p-px">
        <CampaignCard
          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
          :key="campaign.id"
          :title="campaign.title"
          :message="campaign.message"
          :is-enabled="campaign.enabled"
          :status="campaign.campaign_status"
          :sender="campaign.sender"
          :inbox="campaign.inbox"
          :scheduled-at="campaign.scheduled_at"
        />
      </div>
    </template>
  </EmptyStateLayout>
 </template>
@@ -1,38 +0,0 @@
 <script setup>
 import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
 defineProps({
  campaigns: {
    type: Array,
    required: true,
  },
  isLiveChatType: {
    type: Boolean,
    default: false,
  },
 });
 const emit = defineEmits(['edit', 'delete']);
 const handleEdit = campaign => emit('edit', campaign);
 const handleDelete = campaign => emit('delete', campaign);
 </script>
 <template>
  <div class="flex flex-col gap-4">
    <CampaignCard
      v-for="campaign in campaigns"
      :key="campaign.id"
      :title="campaign.title"
      :message="campaign.message"
      :is-enabled="campaign.enabled"
      :status="campaign.campaign_status"
      :sender="campaign.sender"
      :inbox="campaign.inbox"
      :scheduled-at="campaign.scheduled_at"
      :is-live-chat-type="isLiveChatType"
      @edit="handleEdit(campaign)"
      @delete="handleDelete(campaign)"
    />
  </div>
 </template>
@@ -1,49 +0,0 @@
 <script setup>
 import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useAlert } from 'dashboard/composables';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
  selectedCampaign: {
    type: Object,
    default: null,
  },
 });
 const { t } = useI18n();
 const store = useStore();
 const dialogRef = ref(null);
 const deleteCampaign = async id => {
  if (!id) return;
  try {
    await store.dispatch('campaigns/delete', id);
    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.SUCCESS_MESSAGE'));
  } catch (error) {
    useAlert(t('CAMPAIGN.CONFIRM_DELETE.API.ERROR_MESSAGE'));
  }
 };
 const handleDialogConfirm = async () => {
  await deleteCampaign(props.selectedCampaign.id);
  dialogRef.value?.close();
 };
 defineExpose({ dialogRef });
 </script>
 <template>
  <Dialog
    ref="dialogRef"
    type="alert"
    :title="t('CAMPAIGN.CONFIRM_DELETE.TITLE')"
    :description="t('CAMPAIGN.CONFIRM_DELETE.DESCRIPTION')"
    :confirm-button-label="t('CAMPAIGN.CONFIRM_DELETE.CONFIRM')"
    @confirm="handleDialogConfirm"
  />
 </template>
@@ -1,74 +0,0 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
 const props = defineProps({
  selectedCampaign: {
    type: Object,
    default: null,
  },
 });
 const { t } = useI18n();
 const store = useStore();
 const dialogRef = ref(null);
 const liveChatCampaignFormRef = ref(null);
 const uiFlags = useMapGetter('campaigns/getUIFlags');
 const isUpdatingCampaign = computed(() => uiFlags.value.isUpdating);
 const isInvalidForm = computed(
  () => liveChatCampaignFormRef.value?.isSubmitDisabled
 );
 const selectedCampaignId = computed(() => props.selectedCampaign.id);
 const updateCampaign = async campaignDetails => {
  try {
    await store.dispatch('campaigns/update', {
      id: selectedCampaignId.value,
      ...campaignDetails,
    });
    useAlert(t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.SUCCESS_MESSAGE'));
    dialogRef.value.close();
  } catch (error) {
    const errorMessage =
      error?.response?.message ||
      t('CAMPAIGN.LIVE_CHAT.EDIT.FORM.API.ERROR_MESSAGE');
    useAlert(errorMessage);
  }
 };
 const handleSubmit = () => {
  updateCampaign(liveChatCampaignFormRef.value.prepareCampaignDetails());
 };
 defineExpose({ dialogRef });
 </script>
 <template>
  <Dialog
    ref="dialogRef"
    type="edit"
    :title="t('CAMPAIGN.LIVE_CHAT.EDIT.TITLE')"
    :is-loading="isUpdatingCampaign"
    :disable-confirm-button="isUpdatingCampaign || isInvalidForm"
    overflow-y-auto
    @confirm="handleSubmit"
  >
    <LiveChatCampaignForm
      ref="liveChatCampaignFormRef"
      mode="edit"
      :selected-campaign="selectedCampaign"
      :show-action-buttons="false"
      @submit="handleSubmit"
    />
  </Dialog>
 </template>
@@ -1,54 +0,0 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
 import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
 import LiveChatCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue';
 const emit = defineEmits(['close']);
 const store = useStore();
 const { t } = useI18n();
 const addCampaign = async campaignDetails => {
  try {
    await store.dispatch('campaigns/create', campaignDetails);
    // tracking this here instead of the store to track the type of campaign
    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
      type: CAMPAIGN_TYPES.ONGOING,
    });
    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
  } catch (error) {
    const errorMessage =
      error?.response?.message ||
      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
    useAlert(errorMessage);
  }
 };
 const handleClose = () => emit('close');
 const handleSubmit = campaignDetails => {
  addCampaign(campaignDetails);
  handleClose();
 };
 </script>
 <template>
  <div
    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
  >
    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
    </h3>
    <LiveChatCampaignForm
      mode="create"
      @submit="handleSubmit"
      @cancel="handleClose"
    />
  </div>
 </template>
@@ -1,323 +0,0 @@
 <script setup>
 import { reactive, computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { URLPattern } from 'urlpattern-polyfill';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 const props = defineProps({
  mode: {
    type: String,
    required: true,
    validator: value => ['edit', 'create'].includes(value),
  },
  selectedCampaign: {
    type: Object,
    default: () => ({}),
  },
  showActionButtons: {
    type: Boolean,
    default: true,
  },
 });
 const emit = defineEmits(['submit', 'cancel']);
 const { t } = useI18n();
 const store = useStore();
 const formState = {
  uiFlags: useMapGetter('campaigns/getUIFlags'),
  inboxes: useMapGetter('inboxes/getWebsiteInboxes'),
 };
 const senderList = ref([]);
 const initialState = {
  title: '',
  message: '',
  inboxId: null,
  senderId: 0,
  enabled: true,
  triggerOnlyDuringBusinessHours: false,
  endPoint: '',
  timeOnPage: 10,
 };
 const state = reactive({ ...initialState });
 const urlValidators = {
  shouldBeAValidURLPattern: value => {
    try {
      // eslint-disable-next-line
      new URLPattern(value);
      return true;
    } catch {
      return false;
    }
  },
  shouldStartWithHTTP: value =>
    value ? value.startsWith('https://') || value.startsWith('http://') : false,
 };
 const validationRules = {
  title: { required, minLength: minLength(1) },
  message: { required, minLength: minLength(1) },
  inboxId: { required },
  senderId: { required },
  endPoint: { required, ...urlValidators },
  timeOnPage: { required },
 };
 const v$ = useVuelidate(validationRules, state);
 const isCreating = computed(() => formState.uiFlags.value.isCreating);
 const isSubmitDisabled = computed(() => v$.value.$invalid);
 const mapToOptions = (items, valueKey, labelKey) =>
  items?.map(item => ({
    value: item[valueKey],
    label: item[labelKey],
  })) ?? [];
 const inboxOptions = computed(() =>
  mapToOptions(formState.inboxes.value, 'id', 'name')
 );
 const sendersAndBotList = computed(() => [
  { value: 0, label: 'Bot' },
  ...mapToOptions(senderList.value, 'id', 'name'),
 ]);
 const getErrorMessage = (field, errorKey) => {
  const baseKey = 'CAMPAIGN.LIVE_CHAT.CREATE.FORM';
  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
 };
 const formErrors = computed(() => ({
  title: getErrorMessage('title', 'TITLE'),
  message: getErrorMessage('message', 'MESSAGE'),
  inbox: getErrorMessage('inboxId', 'INBOX'),
  endPoint: getErrorMessage('endPoint', 'END_POINT'),
  timeOnPage: getErrorMessage('timeOnPage', 'TIME_ON_PAGE'),
  sender: getErrorMessage('senderId', 'SENT_BY'),
 }));
 const resetState = () => Object.assign(state, initialState);
 const handleCancel = () => emit('cancel');
 const handleInboxChange = async inboxId => {
  if (!inboxId) {
    senderList.value = [];
    return;
  }
  try {
    const response = await store.dispatch('inboxMembers/get', { inboxId });
    senderList.value = response?.data?.payload ?? [];
  } catch (error) {
    senderList.value = [];
    useAlert(
      error?.response?.message ??
        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE')
    );
  }
 };
 const prepareCampaignDetails = () => ({
  title: state.title,
  message: state.message,
  inbox_id: state.inboxId,
  sender_id: state.senderId || null,
  enabled: state.enabled,
  trigger_only_during_business_hours: state.triggerOnlyDuringBusinessHours,
  trigger_rules: {
    url: state.endPoint,
    time_on_page: state.timeOnPage,
  },
 });
 const handleSubmit = async () => {
  const isFormValid = await v$.value.$validate();
  if (!isFormValid) return;
  emit('submit', prepareCampaignDetails());
  if (props.mode === 'create') {
    resetState();
    handleCancel();
  }
 };
 const updateStateFromCampaign = campaign => {
  if (!campaign) return;
  const {
    title,
    message,
    inbox: { id: inboxId },
    sender,
    enabled,
    trigger_only_during_business_hours: triggerOnlyDuringBusinessHours,
    trigger_rules: { url: endPoint, time_on_page: timeOnPage },
  } = campaign;
  Object.assign(state, {
    title,
    message,
    inboxId,
    senderId: sender?.id ?? 0,
    enabled,
    triggerOnlyDuringBusinessHours,
    endPoint,
    timeOnPage,
  });
 };
 watch(
  () => state.inboxId,
  newInboxId => {
    if (newInboxId) {
      handleInboxChange(newInboxId);
    }
  },
  { immediate: true }
 );
 watch(
  () => props.selectedCampaign,
  newCampaign => {
    if (props.mode === 'edit' && newCampaign) {
      updateStateFromCampaign(newCampaign);
    }
  },
  { immediate: true }
 );
 defineExpose({ prepareCampaignDetails, isSubmitDisabled });
 </script>
 <template>
  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
    <Input
      v-model="state.title"
      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.LABEL')"
      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TITLE.PLACEHOLDER')"
      :message="formErrors.title"
      :message-type="formErrors.title ? 'error' : 'info'"
    />
    <Editor
      v-model="state.message"
      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.LABEL')"
      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.MESSAGE.PLACEHOLDER')"
      :message="formErrors.message"
      :message-type="formErrors.message ? 'error' : 'info'"
    />
    <div class="flex flex-col gap-1">
      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.LABEL') }}
      </label>
      <ComboBox
        id="inbox"
        v-model="state.inboxId"
        :options="inboxOptions"
        :has-error="!!formErrors.inbox"
        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.INBOX.PLACEHOLDER')"
        :message="formErrors.inbox"
        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label for="sentBy" class="mb-0.5 text-sm font-medium text-n-slate-12">
        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.LABEL') }}
      </label>
      <ComboBox
        id="sentBy"
        v-model="state.senderId"
        :options="sendersAndBotList"
        :has-error="!!formErrors.sender"
        :disabled="!state.inboxId"
        :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.SENT_BY.PLACEHOLDER')"
        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
        :message="formErrors.sender"
      />
    </div>
    <Input
      v-model="state.endPoint"
      type="url"
      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.LABEL')"
      :placeholder="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.END_POINT.PLACEHOLDER')"
      :message="formErrors.endPoint"
      :message-type="formErrors.endPoint ? 'error' : 'info'"
    />
    <Input
      v-model="state.timeOnPage"
      type="number"
      :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.LABEL')"
      :placeholder="
        t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.TIME_ON_PAGE.PLACEHOLDER')
      "
      :message="formErrors.timeOnPage"
      :message-type="formErrors.timeOnPage ? 'error' : 'info'"
    />
    <fieldset class="flex flex-col gap-2.5">
      <legend class="mb-2.5 text-sm font-medium text-n-slate-12">
        {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TITLE') }}
      </legend>
      <label class="flex items-center gap-2">
        <input v-model="state.enabled" type="checkbox" />
        <span class="text-sm font-medium text-n-slate-12">
          {{ t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.ENABLED') }}
        </span>
      </label>
      <label class="flex items-center gap-2">
        <input v-model="state.triggerOnlyDuringBusinessHours" type="checkbox" />
        <span class="text-sm font-medium text-n-slate-12">
          {{
            t(
              'CAMPAIGN.LIVE_CHAT.CREATE.FORM.OTHER_PREFERENCES.TRIGGER_ONLY_BUSINESS_HOURS'
            )
          }}
        </span>
      </label>
    </fieldset>
    <div
      v-if="showActionButtons"
      class="flex items-center justify-between w-full gap-3"
    >
      <Button
        type="button"
        variant="faded"
        color="slate"
        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
        type="submit"
        :label="
          t(`CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.${mode.toUpperCase()}`)
        "
        class="w-full"
        :is-loading="isCreating"
        :disabled="isCreating || isSubmitDisabled"
      />
    </div>
  </form>
 </template>
@@ -1,49 +0,0 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
 import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
 import SMSCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue';
 const emit = defineEmits(['close']);
 const store = useStore();
 const { t } = useI18n();
 const addCampaign = async campaignDetails => {
  try {
    await store.dispatch('campaigns/create', campaignDetails);
    // tracking this here instead of the store to track the type of campaign
    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
      type: CAMPAIGN_TYPES.ONE_OFF,
    });
    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
  } catch (error) {
    const errorMessage =
      error?.response?.message ||
      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
    useAlert(errorMessage);
  }
 };
 const handleSubmit = campaignDetails => {
  addCampaign(campaignDetails);
 };
 const handleClose = () => emit('close');
 </script>
 <template>
  <div
    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
  >
    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
    </h3>
    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
  </div>
 </template>
@@ -1,189 +0,0 @@
 <script setup>
 import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
 const emit = defineEmits(['submit', 'cancel']);
 const { t } = useI18n();
 const formState = {
  uiFlags: useMapGetter('campaigns/getUIFlags'),
  labels: useMapGetter('labels/getLabels'),
  inboxes: useMapGetter('inboxes/getSMSInboxes'),
 };
 const initialState = {
  title: '',
  message: '',
  inboxId: null,
  scheduledAt: null,
  selectedAudience: [],
 };
 const state = reactive({ ...initialState });
 const rules = {
  title: { required, minLength: minLength(1) },
  message: { required, minLength: minLength(1) },
  inboxId: { required },
  scheduledAt: { required },
  selectedAudience: { required },
 };
 const v$ = useVuelidate(rules, state);
 const isCreating = computed(() => formState.uiFlags.value.isCreating);
 const currentDateTime = computed(() => {
  // Added to disable the scheduled at field from being set to the current time
  const now = new Date();
  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
  return localTime.toISOString().slice(0, 16);
 });
 const mapToOptions = (items, valueKey, labelKey) =>
  items?.map(item => ({
    value: item[valueKey],
    label: item[labelKey],
  })) ?? [];
 const audienceList = computed(() =>
  mapToOptions(formState.labels.value, 'id', 'title')
 );
 const inboxOptions = computed(() =>
  mapToOptions(formState.inboxes.value, 'id', 'name')
 );
 const getErrorMessage = (field, errorKey) => {
  const baseKey = 'CAMPAIGN.SMS.CREATE.FORM';
  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
 };
 const formErrors = computed(() => ({
  title: getErrorMessage('title', 'TITLE'),
  message: getErrorMessage('message', 'MESSAGE'),
  inbox: getErrorMessage('inboxId', 'INBOX'),
  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
 }));
 const isSubmitDisabled = computed(() => v$.value.$invalid);
 const formatToUTCString = localDateTime =>
  localDateTime ? new Date(localDateTime).toISOString() : null;
 const resetState = () => {
  Object.assign(state, initialState);
 };
 const handleCancel = () => emit('cancel');
 const prepareCampaignDetails = () => ({
  title: state.title,
  message: state.message,
  inbox_id: state.inboxId,
  scheduled_at: formatToUTCString(state.scheduledAt),
  audience: state.selectedAudience?.map(id => ({
    id,
    type: 'Label',
  })),
 });
 const handleSubmit = async () => {
  const isFormValid = await v$.value.$validate();
  if (!isFormValid) return;
  emit('submit', prepareCampaignDetails());
  resetState();
  handleCancel();
 };
 </script>
 <template>
  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
    <Input
      v-model="state.title"
      :label="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.LABEL')"
      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.TITLE.PLACEHOLDER')"
      :message="formErrors.title"
      :message-type="formErrors.title ? 'error' : 'info'"
    />
    <TextArea
      v-model="state.message"
      :label="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.LABEL')"
      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.MESSAGE.PLACEHOLDER')"
      show-character-count
      :message="formErrors.message"
      :message-type="formErrors.message ? 'error' : 'info'"
    />
    <div class="flex flex-col gap-1">
      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
        {{ t('CAMPAIGN.SMS.CREATE.FORM.INBOX.LABEL') }}
      </label>
      <ComboBox
        id="inbox"
        v-model="state.inboxId"
        :options="inboxOptions"
        :has-error="!!formErrors.inbox"
        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.INBOX.PLACEHOLDER')"
        :message="formErrors.inbox"
        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
      />
    </div>
    <div class="flex flex-col gap-1">
      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
        {{ t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL') }}
      </label>
      <TagMultiSelectComboBox
        v-model="state.selectedAudience"
        :options="audienceList"
        :label="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.LABEL')"
        :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
        :has-error="!!formErrors.audience"
        :message="formErrors.audience"
        class="[&>div>button]:bg-n-alpha-black2"
      />
    </div>
    <Input
      v-model="state.scheduledAt"
      :label="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.LABEL')"
      type="datetime-local"
      :min="currentDateTime"
      :placeholder="t('CAMPAIGN.SMS.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
      :message="formErrors.scheduledAt"
      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
    />
    <div class="flex items-center justify-between w-full gap-3">
      <Button
        variant="faded"
        color="slate"
        type="button"
        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CREATE')"
        class="w-full"
        type="submit"
        :is-loading="isCreating"
        :disabled="isCreating || isSubmitDisabled"
      />
    </div>
  </form>
 </template>
@@ -1,32 +0,0 @@
 <script setup>
 defineProps({
  layout: {
    type: String,
    default: 'col',
  },
 });
 const emit = defineEmits(['click']);
 const handleClick = () => {
  emit('click');
 };
 </script>
 <template>
  <div
    class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
  >
    <div
      class="flex w-full gap-3 px-6 py-5"
      :class="
        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
      "
      @click="handleClick"
    >
      <slot />
    </div>
    <slot name="after" />
  </div>
 </template>
@@ -1,102 +0,0 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 const props = defineProps({
  id: { type: Number, required: true },
  name: { type: String, default: '' },
  email: { type: String, default: '' },
  additionalAttributes: { type: Object, default: () => ({}) },
  phoneNumber: { type: String, default: '' },
  thumbnail: { type: String, default: '' },
  isExpanded: { type: Boolean, default: false },
 });
 const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
 const { t } = useI18n();
 const handleFormUpdate = updatedData => {
  emit('updateContact', { id: props.id, updatedData });
 };
 const onClickViewDetails = async () => {
  emit('showContact', props.id);
 };
 </script>
 <template>
  <CardLayout :key="id" layout="row">
    <div class="flex items-center justify-between gap-4">
      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
      <div class="flex flex-col gap-1">
        <div class="flex items-center gap-2">
          <span class="text-sm font-medium truncate text-n-slate-12">
            {{ name }}
          </span>
          <template v-if="additionalAttributes?.companyName">
            <span class="text-sm text-n-slate-11">
              {{ t('CONTACTS_LAYOUT.CARD.OF') }}
            </span>
            <span class="text-sm font-medium truncate text-n-slate-12">
              {{ additionalAttributes.companyName }}
            </span>
          </template>
        </div>
        <div class="flex items-center gap-3">
          <span v-if="email" class="text-sm text-n-slate-11">{{ email }}</span>
          <div v-if="email" class="w-px h-3 bg-n-slate-6" />
          <span v-if="phoneNumber" class="text-sm text-n-slate-11">
            {{ phoneNumber }}
          </span>
          <div v-if="phoneNumber" class="w-px h-3 bg-n-slate-6" />
          <Button
            :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
            variant="link"
            size="xs"
            @click="onClickViewDetails"
          />
        </div>
      </div>
    </div>
    <Button
      icon="i-lucide-chevron-down"
      variant="ghost"
      color="slate"
      size="xs"
      :class="{ 'rotate-180': isExpanded }"
      @click="emit('toggle')"
    />
    <template #after>
      <transition
        enter-active-class="overflow-hidden transition-all duration-300 ease-out"
        leave-active-class="overflow-hidden transition-all duration-300 ease-in"
        enter-from-class="overflow-hidden opacity-0 max-h-0"
        enter-to-class="opacity-100 max-h-[360px]"
        leave-from-class="opacity-100 max-h-[360px]"
        leave-to-class="overflow-hidden opacity-0 max-h-0"
      >
        <div v-show="isExpanded" class="w-full">
          <div class="p-6 border-t border-n-strong">
            <ContactsForm
              :contact-data="{
                id,
                name,
                email,
                phoneNumber,
                additionalAttributes,
              }"
              @update="handleFormUpdate"
            />
          </div>
        </div>
      </transition>
    </template>
  </CardLayout>
 </template>
@@ -1,67 +0,0 @@
 <script setup>
 import { ref } from 'vue';
 import ContactsCard from '../ContactsCard.vue';
 import contacts from './fixtures';
 const expandedCardId = ref(null);
 const toggleExpanded = id => {
  expandedCardId.value = expandedCardId.value === id ? null : id;
 };
 </script>
 <template>
  <Story
    title="Components/Contacts/ContactsCard"
    :layout="{ type: 'grid', width: '800px' }"
  >
    <Variant title="Default with expandable function">
      <div class="flex flex-col p-4">
        <ContactsCard
          v-bind="contacts[0]"
          :is-expanded="expandedCardId === contacts[0].id"
          @toggle="toggleExpanded(contacts[0].id)"
          @update-contact="() => {}"
          @show-contact="() => {}"
        />
      </div>
    </Variant>
    <Variant title="With Company Name and without phone number">
      <div class="flex flex-col p-4">
        <ContactsCard
          v-bind="{ ...contacts[1], phoneNumber: '' }"
          :is-expanded="false"
          @toggle="() => {}"
          @update-contact="() => {}"
          @show-contact="() => {}"
        />
      </div>
    </Variant>
    <Variant title="Expanded State">
      <div class="flex flex-col p-4">
        <ContactsCard
          v-bind="contacts[2]"
          is-expanded
          @toggle="() => {}"
          @update-contact="() => {}"
          @show-contact="() => {}"
        />
      </div>
    </Variant>
    <Variant title="Without Email and Phone">
      <div class="flex flex-col p-4">
        <ContactsCard
          v-bind="{ ...contacts[3], email: '', phoneNumber: '' }"
          :is-expanded="false"
          @toggle="() => {}"
          @update-contact="() => {}"
          @show-contact="() => {}"
        />
      </div>
    </Variant>
  </Story>
 </template>
@@ -1,149 +0,0 @@
 export default [
  {
    additionalAttributes: {
      socialProfiles: {},
    },
    availabilityStatus: null,
    email: 'johndoe@chatwoot.com',
    id: 370,
    name: 'John Doe',
    phoneNumber: '+918634322418',
    identifier: null,
    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Felix',
    customAttributes: {},
    lastActivityAt: 1731608270,
    createdAt: 1731586271,
  },
  {
    additionalAttributes: {
      city: 'kerala',
      country: 'India',
      description: 'Curious about the web. ',
      companyName: 'Chatwoot',
      countryCode: '',
      socialProfiles: {
        github: 'abozler',
        twitter: 'ozler',
        facebook: 'abozler',
        linkedin: 'abozler',
        instagram: 'ozler',
      },
    },
    availabilityStatus: null,
    email: 'ozler@chatwoot.com',
    id: 29,
    name: 'Abraham Ozlers',
    phoneNumber: '+246232222222',
    identifier: null,
    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Upload',
    customAttributes: {
      dateContact: '2024-02-01T00:00:00.000Z',
      linkContact: 'https://staging.chatwoot.com/app/accounts/3/contacts-new',
      listContact: 'Not spam',
      numberContact: '12',
    },
    lastActivityAt: 1712127410,
    createdAt: 1712127389,
  },
  {
    additionalAttributes: {
      city: 'Kerala',
      country: 'India',
      description:
        "I'm Candice developer focusing on building things for the web 🌍. Currently, I’m working as a Product Developer here at @chatwootapp ⚡️🔥",
      companyName: 'Chatwoot',
      countryCode: 'IN',
      socialProfiles: {
        github: 'cmathersonj',
        twitter: 'cmather',
        facebook: 'cmathersonj',
        linkedin: 'cmathersonj',
        instagram: 'cmathersonjs',
      },
    },
    availabilityStatus: null,
    email: 'cmathersonj@va.test',
    id: 22,
    name: 'Candice Matherson',
    phoneNumber: '+917474774742',
    identifier: null,
    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Emery',
    customAttributes: {
      dateContact: '2024-11-12T03:23:06.963Z',
      linkContact: 'https://sd.sd',
      textContact: 'hey',
      numberContact: '12',
      checkboxContact: true,
    },
    lastActivityAt: 1712123233,
    createdAt: 1712123233,
  },
  {
    additionalAttributes: {
      city: '',
      country: '',
      description: '',
      companyName: '',
      countryCode: '',
      socialProfiles: {
        github: '',
        twitter: '',
        facebook: '',
        linkedin: '',
        instagram: '',
      },
    },
    availabilityStatus: null,
    email: 'ofolkardi@taobao.test',
    id: 21,
    name: 'Ophelia Folkard',
    phoneNumber: '',
    identifier: null,
    thumbnail:
      'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBPZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--08dcac8eb72ef12b2cad92d58dddd04cd8a5f513/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/32.jpg',
    customAttributes: {},
    lastActivityAt: 1712123233,
    createdAt: 1712123233,
  },
  {
    additionalAttributes: {
      socialProfiles: {},
    },
    availabilityStatus: null,
    email: 'wcasteloth@exblog.jp',
    id: 20,
    name: 'Willy Castelot',
    phoneNumber: '+919384',
    identifier: null,
    thumbnail: 'https://api.dicebear.com/9.x/thumbs/svg?seed=Jade',
    customAttributes: {},
    lastActivityAt: 1712123233,
    createdAt: 1712123233,
  },
  {
    additionalAttributes: {
      city: '',
      country: '',
      description: '',
      companyName: '',
      countryCode: '',
      socialProfiles: {
        github: '',
        twitter: '',
        facebook: '',
        linkedin: '',
        instagram: '',
      },
    },
    availabilityStatus: null,
    email: 'ederingtong@printfriendly.test',
    id: 19,
    name: 'Elisabeth Derington',
    phoneNumber: '',
    identifier: null,
    thumbnail: 'https://api.dicebear.com/9.x/avataaars/svg?seed=Jade',
    customAttributes: {},
    lastActivityAt: 1712123232,
    createdAt: 1712123232,
  },
 ];
@@ -1,112 +0,0 @@
 <script setup>
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import { useI18n } from 'vue-i18n';
 defineProps({
  selectedContact: {
    type: Object,
    required: true,
  },
  primaryContactId: {
    type: [Number, null],
    default: null,
  },
  primaryContactList: {
    type: Array,
    default: () => [],
  },
  isSearching: {
    type: Boolean,
    default: false,
  },
  hasError: {
    type: Boolean,
    default: false,
  },
  errorMessage: {
    type: String,
    default: '',
  },
 });
 const emit = defineEmits(['update:primaryContactId', 'search']);
 const { t } = useI18n();
 </script>
 <template>
  <div class="flex flex-col">
    <div class="flex flex-col gap-2">
      <div class="flex items-center justify-between h-5 gap-2">
        <label class="text-sm text-n-slate-12">
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY') }}
        </label>
        <span
          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-teal-11 bg-n-alpha-2"
        >
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PRIMARY_HELP_LABEL') }}
        </span>
      </div>
      <ComboBox
        id="inbox"
        :model-value="primaryContactId"
        :options="primaryContactList"
        :empty-state="
          isSearching
            ? t('CONTACTS_LAYOUT.SIDEBAR.MERGE.IS_SEARCHING')
            : t('CONTACTS_LAYOUT.SIDEBAR.MERGE.EMPTY_STATE')
        "
        :search-placeholder="
          t('CONTACTS_LAYOUT.SIDEBAR.MERGE.SEARCH_PLACEHOLDER')
        "
        :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PLACEHOLDER')"
        :has-error="hasError"
        :message="errorMessage"
        class="[&>div>button]:bg-n-alpha-black2"
        @update:model-value="value => emit('update:primaryContactId', value)"
        @search="query => emit('search', query)"
      />
    </div>
    <div class="relative flex justify-center gap-2 top-4">
      <div v-for="i in 3" :key="i" class="relative w-4 h-8">
        <div
          class="absolute w-0 h-0 border-l-[4px] border-r-[4px] border-b-[6px] border-l-transparent border-r-transparent border-n-strong ltr:translate-x-[4px] rtl:-translate-x-[4px] -translate-y-[4px]"
        />
        <div
          class="absolute w-[1px] h-full bg-n-strong left-1/2 transform -translate-x-1/2"
        />
      </div>
    </div>
    <div class="flex flex-col gap-2">
      <div class="flex items-center justify-between h-5 gap-2">
        <label class="text-sm text-n-slate-12">
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT') }}
        </label>
        <span
          class="flex items-center justify-center w-24 h-5 text-xs rounded-md text-n-ruby-11 bg-n-alpha-2"
        >
          {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.PARENT_HELP_LABEL') }}
        </span>
      </div>
      <div
        class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
      >
        <Avatar
          :name="selectedContact.name || ''"
          :src="selectedContact.thumbnail || ''"
          :size="32"
          rounded-full
        />
        <div class="flex flex-col gap-1">
          <span class="text-sm leading-4 truncate text-n-slate-11">
            {{ selectedContact.name }}
          </span>
          <span class="text-sm leading-4 truncate text-n-slate-11">
            {{ selectedContact.email }}
          </span>
        </div>
      </div>
    </div>
  </div>
 </template>
@@ -1,297 +0,0 @@
 <script setup>
 import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { required, email, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import countries from 'shared/constants/countries.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
 const props = defineProps({
  contactData: {
    type: Object,
    default: null,
  },
  isDetailsView: {
    type: Boolean,
    default: false,
  },
  isNewContact: {
    type: Boolean,
    default: false,
  },
 });
 const emit = defineEmits(['update']);
 const { t } = useI18n();
 const FORM_CONFIG = {
  FIRST_NAME: { field: 'firstName' },
  LAST_NAME: { field: 'lastName' },
  EMAIL_ADDRESS: { field: 'email' },
  PHONE_NUMBER: { field: 'phoneNumber' },
  CITY: { field: 'additionalAttributes.city' },
  COUNTRY: { field: 'additionalAttributes.country' },
  BIO: { field: 'additionalAttributes.description' },
  COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };
 const SOCIAL_CONFIG = {
  FACEBOOK: 'i-ri-facebook-circle-fill',
  GITHUB: 'i-ri-github-fill',
  INSTAGRAM: 'i-ri-instagram-line',
  LINKEDIN: 'i-ri-linkedin-box-fill',
  TWITTER: 'i-ri-twitter-x-fill',
 };
 const defaultState = {
  id: 0,
  name: '',
  email: '',
  firstName: '',
  lastName: '',
  phoneNumber: '',
  additionalAttributes: {
    description: '',
    companyName: '',
    countryCode: '',
    country: '',
    city: '',
    socialProfiles: {
      facebook: '',
      github: '',
      instagram: '',
      linkedin: '',
      twitter: '',
    },
  },
 };
 const state = reactive({ ...defaultState });
 const validationRules = {
  firstName: { required, minLength: minLength(2) },
  email: { email },
 };
 const v$ = useVuelidate(validationRules, state);
 const prepareStateBasedOnProps = () => {
  if (props.isNewContact) {
    return; // Added to prevent state update for new contact form
  }
  const {
    id,
    name = '',
    email: emailAddress,
    phoneNumber,
    additionalAttributes = {},
  } = props.contactData || {};
  const [firstName = '', lastName = ''] = name.split(' ');
  const {
    description,
    companyName,
    countryCode,
    country,
    city,
    socialProfiles = {},
  } = additionalAttributes || {};
  Object.assign(state, {
    id,
    name,
    firstName,
    lastName,
    email: emailAddress,
    phoneNumber,
    additionalAttributes: {
      description,
      companyName,
      countryCode,
      country,
      city,
      socialProfiles,
    },
  });
 };
 const countryOptions = computed(() =>
  countries.map(({ name }) => ({ label: name, value: name }))
 );
 const editDetailsForm = computed(() =>
  Object.keys(FORM_CONFIG).map(key => ({
    key,
    placeholder: t(
      `CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.FORM.${key}.PLACEHOLDER`
    ),
  }))
 );
 const socialProfilesForm = computed(() =>
  Object.entries(SOCIAL_CONFIG).map(([key, icon]) => ({
    key,
    placeholder: t(`CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.FORM.${key}.PLACEHOLDER`),
    icon,
  }))
 );
 const isValidationField = key => {
  const field = FORM_CONFIG[key]?.field;
  return ['firstName', 'email'].includes(field);
 };
 const getValidationKey = key => {
  return FORM_CONFIG[key]?.field;
 };
 // Creates a computed property for two-way form field binding
 const getFormBinding = key => {
  const field = FORM_CONFIG[key]?.field;
  if (!field) return null;
  return computed({
    get: () => {
      // Handle firstName/lastName fields
      if (field === 'firstName' || field === 'lastName') {
        return state[field]?.toString() || '';
      }
      // Handle nested vs non-nested fields
      const [base, nested] = field.split('.');
      // Example: 'email' → state.email
      // Example: 'additionalAttributes.city' → state.additionalAttributes.city
      return (nested ? state[base][nested] : state[base])?.toString() || '';
    },
    set: async value => {
      // Handle name fields specially to maintain the combined 'name' field
      if (field === 'firstName' || field === 'lastName') {
        state[field] = value;
        // Example: firstName="John", lastName="Doe" → name="John Doe"
        state.name = `${state.firstName} ${state.lastName}`.trim();
      } else {
        // Handle nested vs non-nested fields
        const [base, nested] = field.split('.');
        if (nested) {
          // Example: additionalAttributes.city = "New York"
          state[base][nested] = value;
        } else {
          // Example: email = "test@example.com"
          state[base] = value;
        }
      }
      const isFormValid = await v$.value.$validate();
      if (isFormValid) {
        const { firstName, lastName, ...stateWithoutNames } = state;
        emit('update', stateWithoutNames);
      }
    },
  });
 };
 const getMessageType = key => {
  return isValidationField(key) && v$.value[getValidationKey(key)]?.$error
    ? 'error'
    : 'info';
 };
 watch(() => props.contactData, prepareStateBasedOnProps, {
  immediate: true,
  deep: true,
 });
 // Expose state to parent component for avatar upload
 defineExpose({
  state,
 });
 </script>
 <template>
  <div class="flex flex-col gap-6">
    <div class="flex flex-col items-start gap-2">
      <span class="py-1 text-sm font-medium text-n-slate-12">
        {{ t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.TITLE') }}
      </span>
      <div class="grid w-full grid-cols-2 gap-4">
        <template v-for="item in editDetailsForm" :key="item.key">
          <ComboBox
            v-if="item.key === 'COUNTRY'"
            v-model="state.additionalAttributes.country"
            :options="countryOptions"
            :placeholder="item.placeholder"
            class="[&>div>button]:h-8"
            :class="{
              '[&>div>button]:bg-n-alpha-black2 [&>div>button]:!outline-transparent':
                !isDetailsView,
              '[&>div>button]:!outline-n-weak [&>div>button]:hover:!outline-n-strong [&>div>button]:!bg-n-alpha-black2':
                isDetailsView,
            }"
            @update:model-value="emit('update', state)"
          />
          <PhoneNumberInput
            v-else-if="item.key === 'PHONE_NUMBER'"
            v-model="getFormBinding(item.key).value"
            :placeholder="item.placeholder"
            :show-border="isDetailsView"
          />
          <Input
            v-else
            v-model="getFormBinding(item.key).value"
            :placeholder="item.placeholder"
            :message-type="getMessageType(item.key)"
            :custom-input-class="`h-8 !pt-1 !pb-1 ${
              !isDetailsView ? '[&:not(.error)]:!border-transparent' : ''
            }`"
            class="w-full"
            @input="
              isValidationField(item.key) &&
                v$[getValidationKey(item.key)].$touch()
            "
            @blur="
              isValidationField(item.key) &&
                v$[getValidationKey(item.key)].$touch()
            "
          />
        </template>
      </div>
    </div>
    <div class="flex flex-col items-start gap-2">
      <span class="py-1 text-sm font-medium text-n-slate-12">
        {{ t('CONTACTS_LAYOUT.CARD.SOCIAL_MEDIA.TITLE') }}
      </span>
      <div class="flex flex-wrap gap-2">
        <div
          v-for="item in socialProfilesForm"
          :key="item.key"
          class="flex items-center h-8 gap-2 px-2 rounded-lg"
          :class="{
            'bg-n-alpha-2 dark:bg-n-solid-2': isDetailsView,
            'bg-n-alpha-2 dark:bg-n-solid-3': !isDetailsView,
          }"
        >
          <Icon
            :icon="item.icon"
            class="flex-shrink-0 text-n-slate-11 size-4"
          />
          <input
            v-model="
              state.additionalAttributes.socialProfiles[item.key.toLowerCase()]
            "
            class="w-auto min-w-[100px] text-sm bg-transparent reset-base text-n-slate-12 dark:text-n-slate-12 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10"
            :placeholder="item.placeholder"
            :size="item.placeholder.length"
            @input="emit('update', state)"
          />
        </div>
      </div>
    </div>
  </div>
 </template>
@@ -1,73 +0,0 @@
 <script setup>
 import ContactMergeForm from '../ContactMergeForm.vue';
 import { contactData, primaryContactList } from './fixtures';
 const handleSearch = query => {
  console.log('Searching for:', query);
 };
 const handleUpdate = value => {
  console.log('Primary contact updated:', value);
 };
 </script>
 <template>
  <Story
    title="Components/Contacts/ContactMergeForm"
    :layout="{ type: 'grid', width: '600px' }"
  >
    <Variant title="Default">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactMergeForm
          :selected-contact="contactData"
          :primary-contact-list="primaryContactList"
          :primary-contact-id="null"
          :is-searching="false"
          @update:primary-contact-id="handleUpdate"
          @search="handleSearch"
        />
      </div>
    </Variant>
    <Variant title="With Selected Primary Contact">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactMergeForm
          :selected-contact="contactData"
          :primary-contact-list="primaryContactList"
          :primary-contact-id="1"
          :is-searching="false"
          @update:primary-contact-id="handleUpdate"
          @search="handleSearch"
        />
      </div>
    </Variant>
    <Variant title="Error State">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactMergeForm
          :selected-contact="contactData"
          :primary-contact-list="primaryContactList"
          :primary-contact-id="null"
          :is-searching="false"
          has-error
          error-message="Please select a primary contact"
          @update:primary-contact-id="handleUpdate"
          @search="handleSearch"
        />
      </div>
    </Variant>
    <Variant title="Empty Primary Contact List">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactMergeForm
          :selected-contact="contactData"
          :primary-contact-list="[]"
          :primary-contact-id="null"
          :is-searching="false"
          @update:primary-contact-id="handleUpdate"
          @search="handleSearch"
        />
      </div>
    </Variant>
  </Story>
 </template>
@@ -1,80 +0,0 @@
 <script setup>
 import ContactsForm from '../ContactsForm.vue';
 import { contactData } from './fixtures';
 const handleUpdate = updatedData => {
  console.log('Form updated:', updatedData);
 };
 </script>
 <template>
  <Story
    title="Components/Contacts/ContactsForm"
    :layout="{ type: 'grid', width: '600px' }"
  >
    <Variant title="Default without border">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactsForm :contact-data="contactData" @update="handleUpdate" />
      </div>
    </Variant>
    <Variant title="Details View with border">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactsForm
          :contact-data="contactData"
          is-details-view
          @update="handleUpdate"
        />
      </div>
    </Variant>
    <Variant title="Minimal Data">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactsForm
          :contact-data="{
            id: 21,
            name: 'Ophelia Folkard',
            email: 'ofolkardi@taobao.test',
            phoneNumber: '',
            additionalAttributes: {
              city: '',
              country: '',
              description: '',
              companyName: '',
              countryCode: '',
              socialProfiles: {
                github: '',
                twitter: '',
                facebook: '',
                linkedin: '',
                instagram: '',
              },
            },
          }"
          @update="handleUpdate"
        />
      </div>
    </Variant>
    <Variant title="With All Social Profiles">
      <div class="p-6 border rounded-lg border-n-strong">
        <ContactsForm
          :contact-data="{
            ...contactData,
            additionalAttributes: {
              ...contactData.additionalAttributes,
              socialProfiles: {
                github: 'cmathersonj',
                twitter: 'cmather',
                facebook: 'cmathersonj',
                linkedin: 'cmathersonj',
                instagram: 'cmathersonjs',
              },
            },
          }"
          @update="handleUpdate"
        />
      </div>
    </Variant>
  </Story>
 </template>
@@ -1,47 +0,0 @@
 export const contactData = {
  id: 370,
  name: 'John Doe',
  email: 'johndoe@chatwoot.com',
  phoneNumber: '+918634322418',
  additionalAttributes: {
    city: 'Kerala',
    country: 'India',
    description: 'Curious about the web.',
    companyName: 'Chatwoot',
    countryCode: 'IN',
    socialProfiles: {
      github: 'johndoe',
      twitter: 'johndoe',
      facebook: 'johndoe',
      linkedin: 'johndoe',
      instagram: 'johndoe',
    },
  },
 };
 export const primaryContactList = [
  {
    id: 1,
    name: 'Jane Smith',
    email: 'jane@chatwoot.com',
    thumbnail: '',
    label: '(ID: 1) Jane Smith',
    value: 1,
  },
  {
    id: 2,
    name: 'Mike Johnson',
    email: 'mike@chatwoot.com',
    thumbnail: '',
    label: '(ID: 2) Mike Johnson',
    value: 2,
  },
  {
    id: 3,
    name: 'Sarah Wilson',
    email: 'sarah@chatwoot.com',
    thumbnail: '',
    label: '(ID: 3) Sarah Wilson',
    value: 3,
  },
 ];
@@ -1,97 +0,0 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import ContactSortMenu from './components/ContactSortMenu.vue';
 import ContactMoreActions from './components/ContactMoreActions.vue';
 defineProps({
  showSearch: {
    type: Boolean,
    default: true,
  },
  searchValue: {
    type: String,
    default: '',
  },
  headerTitle: {
    type: String,
    required: true,
  },
  buttonLabel: {
    type: String,
    required: true,
  },
  activeSort: {
    type: String,
    default: 'last_activity_at',
  },
  activeOrdering: {
    type: String,
    default: '',
  },
 });
 const emit = defineEmits([
  'search',
  'filter',
  'update:sort',
  'message',
  'add',
  'import',
  'export',
 ]);
 </script>
 <template>
  <header class="sticky top-0 z-10 px-6 xl:px-0">
    <div
      class="flex items-center justify-between w-full h-20 gap-2 mx-auto max-w-[960px]"
    >
      <span class="text-xl font-medium truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
      <div class="flex items-center flex-shrink-0 gap-4">
        <div v-if="showSearch" class="flex items-center gap-2">
          <Input
            :model-value="searchValue"
            type="search"
            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
            :custom-input-class="[
              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
            ]"
            @input="emit('search', $event.target.value)"
          >
            <template #prefix>
              <Icon
                icon="i-lucide-search"
                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
              />
            </template>
          </Input>
        </div>
        <div class="flex items-center gap-2">
          <Button
            icon="i-lucide-list-filter"
            color="slate"
            size="sm"
            variant="ghost"
            @click="emit('filter')"
          />
          <ContactSortMenu
            :active-sort="activeSort"
            :active-ordering="activeOrdering"
            @update:sort="emit('update:sort', $event)"
          />
          <ContactMoreActions
            @add="emit('add')"
            @import="emit('import')"
            @export="emit('export')"
          />
        </div>
        <div class="w-px h-4 bg-n-strong" />
        <Button :label="buttonLabel" size="sm" @click="emit('message')" />
      </div>
    </div>
  </header>
 </template>
@@ -1,62 +0,0 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 const emit = defineEmits(['add', 'import', 'export']);
 const { t } = useI18n();
 const contactMenuItems = [
  {
    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
    action: 'add',
    value: 'add',
    icon: 'i-lucide-plus',
  },
  {
    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
    action: 'export',
    value: 'export',
    icon: 'i-lucide-upload',
  },
  {
    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
    action: 'import',
    value: 'import',
    icon: 'i-lucide-download',
  },
 ];
 const showActionsDropdown = ref(false);
 const handleContactAction = ({ action }) => {
  if (action === 'add') {
    emit('add');
  } else if (action === 'import') {
    emit('import');
  } else if (action === 'export') {
    emit('export');
  }
 };
 </script>
 <template>
  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
    <Button
      icon="i-lucide-ellipsis-vertical"
      color="slate"
      variant="ghost"
      size="sm"
      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
      @click="showActionsDropdown = !showActionsDropdown"
    />
    <DropdownMenu
      v-if="showActionsDropdown"
      :menu-items="contactMenuItems"
      class="right-0 mt-1 w-52 top-full"
      @action="handleContactAction($event)"
    />
  </div>
 </template>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Pranav	924d3ef2df	Merge branch 'develop' into deploy-apr-15	2024-07-10 20:29:13 -07:00
Pranav	4ef06530e5	Merge branch 'develop' into deploy-apr-15	2024-07-10 20:28:53 -07:00
Pranav	3f10e89dba	Merge branch 'develop' into deploy-apr-15	2024-07-08 19:47:10 -07:00
Pranav	184325dcae	Remove channel auth error	2024-05-23 11:18:19 -07:00
Pranav	ce2a4f5c34	Fix minor issues	2024-05-22 21:01:26 -07:00
Pranav	7c2f4ec334	Merge branch 'develop' into deploy-apr-15	2024-05-22 18:18:55 -07:00
Pranav	a69894e0fc	Reset data	2024-05-15 20:52:08 -07:00
Pranav	6f36a02519	Fix missing short summary	2024-05-15 20:45:11 -07:00
Pranav	54e697ec51	Fix report average	2024-05-15 20:43:06 -07:00
Pranav	ee044e8602	Fix timezone issues	2024-05-15 20:42:55 -07:00
Pranav	3b7421221c	new_report -> conversation_report	2024-05-15 20:42:43 -07:00
Pranav	bc9327c09f	Revert changes unrelated to performance	2024-05-15 20:42:32 -07:00
Pranav	ac71dacc61	Update records	2024-05-15 20:41:44 -07:00
Pranav	072c607062	Update	2024-05-15 20:41:08 -07:00
Pranav	4b67066027	Add range filter	2024-05-15 20:38:01 -07:00
Pranav	08834b6016	Update report controller to use the new reports builder	2024-05-15 20:37:54 -07:00
PranavandPranav	cbdc5b1ab0	chore: Temporarily disable the disconnect logic for inboxes (#9321 ) * chore: Temporarily disable the disconnect logic for inboxes * Remove unused spec	2024-05-09 19:01:49 -07:00
Pranav	25c6adbd07	Update the duplicate count event	2024-05-09 19:00:23 -07:00
Pranav	d552b41fac	fix: Terminate IMAP connection after the job is complete (#9225 )	2024-04-15 17:43:18 -07:00
Pranav	a315321c4f	Fix the issues with dropdown	2024-04-15 17:42:12 -07:00
Pranav	2e768e2042	inbox view	2024-02-13 19:12:56 -08:00
Pranav	bd481ad314	Update title	2024-02-13 18:39:59 -08:00
Pranav	b90737ee5d	capitalize	2024-02-13 18:36:50 -08:00
Pranav	6e57e76358	update copy	2024-02-13 18:31:39 -08:00
Pranav	75998945a5	Add agent reports	2024-02-13 18:31:07 -08:00
Pranav	cc80e4122a	update team reports	2024-02-13 18:16:52 -08:00
Pranav	8aa0a347d6	commit 2	2024-02-13 17:32:57 -08:00
Pranav	2a34ceb66b	Commit	2024-02-13 17:32:31 -08:00
Pranav	db30a05b19	Update heatmap report	2024-02-13 15:23:46 -08:00
Pranav	73fcb91ca3	Update filter properly	2024-02-13 14:49:49 -08:00
Pranav	bcd5633d2a	Filter for live conversations	2024-02-13 14:36:04 -08:00
Pranav	1a272e7a18	Remove CSV Safe	2024-02-13 12:32:02 -08:00
Pranav	7d4374a3bf	Added a section for group by teams	2024-02-13 12:26:48 -08:00
Pranav	2617d9b2b7	Merge branch 'develop' into report-rewrite	2024-02-13 10:13:10 -08:00
Pranav	375d216d12	Re-write live-conversations API	2024-02-10 18:41:11 -08:00