Merge branch 'develop' of https://github.com/chatwoot/chatwoot into chore/chat-list-design

.circleci/config.yml

@@ -7,7 +7,7 @@ defaults: &defaults
   working_directory: ~/build
   docker:
     # specify the version you desire here
-    - image: cimg/ruby:3.0.2-browsers
+    - image: cimg/ruby:3.0.4-browsers
 
     # Specify service dependencies here if necessary
     # CircleCI maintains a library of pre-built images
@@ -40,14 +40,13 @@ jobs:
 
       - restore_cache:
           keys:
-            - chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-{{ checksum "Gemfile.lock" }}
+            - chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
-            - chatwoot-bundle
 
       - run: bundle install --frozen --path ~/.bundle
       - save_cache:
           paths:
             - ~/.bundle
-          key: chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-{{ checksum "Gemfile.lock" }}
+          key: chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
 
 
       # Only necessary if app uses webpacker or yarn in some other way

.devcontainer/Dockerfile.base

@@ -1,6 +1,6 @@
-# pre-build stage
+
-ARG VARIANT=3
+ARG VARIANT=ubuntu-20.04
-FROM mcr.microsoft.com/vscode/devcontainers/ruby:${VARIANT}
+FROM mcr.microsoft.com/vscode/devcontainers/base:${VARIANT}
 
 # Update args in docker-compose.yaml to set the UID/GID of the "vscode" user.
 ARG USER_UID=1000
@@ -11,23 +11,36 @@ RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         && chmod -R $USER_UID:$USER_GID /home/vscode; \
     fi
 
-# [Option] Install Node.js
-ARG INSTALL_NODE="true"
-ARG NODE_VERSION="lts/*"
-RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "source /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
-
 RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
   && apt-get -y install --no-install-recommends \
+    build-essential \
     libssl-dev \
+    zlib1g-dev \
+    gnupg2 \
     tar \
     tzdata \
     postgresql-client \
+    libpq-dev \
     yarn \
     git \
     imagemagick \
     tmux \
-    zsh
+    zsh \
+    git-flow \
+    npm
 
+# Install rbenv and ruby
+ARG RUBY_VERSION="3.0.4"
+RUN git clone https://github.com/rbenv/rbenv.git ~/.rbenv \
+    &&  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc \
+    &&  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
+ENV PATH "/root/.rbenv/bin/:/root/.rbenv/shims/:$PATH"
+RUN git clone https://github.com/rbenv/ruby-build.git && \
+    PREFIX=/usr/local ./ruby-build/install.sh
+
+RUN rbenv install $RUBY_VERSION && \
+    rbenv global $RUBY_VERSION && \
+    rbenv versions
 
 # Install overmind
 RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmind-v2.1.0-linux-amd64.gz > overmind.gz \
@@ -35,11 +48,25 @@ RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmi
   && sudo mv overmind /usr/local/bin \
   && chmod +x /usr/local/bin/overmind 
 
+
+# Install gh
+RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
+   && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
+   && sudo apt update \
+   && sudo apt install gh
+
+
 # Do the set up required for chatwoot app 
 WORKDIR /workspace
 COPY . /workspace
-RUN yarn
 
+# set up ruby
 COPY Gemfile Gemfile.lock ./
 RUN gem install bundler && bundle install
 
+# set up node js
+RUN npm install npm@latest -g && \
+    npm install n -g && \
+    n latest
+RUN npm install --global yarn
+RUN yarn

.devcontainer/devcontainer.json

@@ -23,17 +23,18 @@
   // 5432 postgres
   // 6379 redis
   // 1025,8025 mailhog
-  "forwardPorts": [8025],
+  "forwardPorts": [8025, 3000, 3035],
-  //your application may need to listen on all interfaces (0.0.0.0) not just localhost for it to be available externally. Defaults to []
-  "appPort": [3000, 3035],
 
   "postCreateCommand": ".devcontainer/scripts/setup.sh && bundle exec rake db:chatwoot_prepare && yarn",
   "portsAttributes": {
     "3000": {
       "label": "Rails Server"
     },
+    "3035": {
+      "label": "Webpack Dev Server"
+    },
     "8025": {
       "label": "Mailhog UI"
     }
-  },
+  }
 }

.devcontainer/scripts/setup.sh

@@ -6,3 +6,8 @@ sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.de
 sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
 # uncomment the webpacker env variable
 sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
+# fix the error with webpacker
+echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
+
+# codespaces make the ports public
+gh codespace ports visibility 3000:public 3035:public 8025:public -c $CODESPACE_NAME

.env.example

@@ -161,13 +161,15 @@ USE_INBOX_AVATAR_FOR_BOT=true
 ## NewRelic
 # https://docs.newrelic.com/docs/agents/ruby-agent/configuration/ruby-agent-configuration/
 # NEW_RELIC_LICENSE_KEY=
+# Set this to true to allow newrelic apm to send logs.
+# This is turned off by default.
+# NEW_RELIC_APPLICATION_LOGGING_ENABLED=
 
 ## Datadog
 ## https://github.com/DataDog/dd-trace-rb/blob/master/docs/GettingStarted.md#environment-variables
 # DD_TRACE_AGENT_URL=
 
 
-
 ## IP look up configuration
 ## ref https://github.com/alexreisner/geocoder/blob/master/README_API_GUIDE.md
 ## works only on accounts with ip look up feature enabled

.eslintrc.js

@@ -19,18 +19,32 @@ module.exports = {
     'jsx-a11y/label-has-for': 'off',
     'jsx-a11y/anchor-is-valid': 'off',
     'import/no-unresolved': 'off',
-    'vue/max-attributes-per-line': ['error', {
+    'vue/max-attributes-per-line': [
-      'singleline': 20,
+      'error',
-      'multiline': {
+      {
-        'max': 1,
+        singleline: 20,
-        'allowFirstLine': false
+        multiline: {
+          max: 1,
+          allowFirstLine: false,
+        },
       },
-    }],
+    ],
-    'vue/html-self-closing': 'off',
+    'vue/html-self-closing': [
-    "vue/no-v-html": 'off',
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always',
+        },
+        svg: 'always',
+        math: 'always',
+      },
+    ],
+    'vue/no-v-html': 'off',
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
-    'no-console': 'error'
+    'no-console': 'error',
   },
   settings: {
     'import/resolver': {
@@ -41,12 +55,10 @@ module.exports = {
   },
   env: {
     browser: true,
-    node: true,
     jest: true,
-    jasmine: true
+    node: true,
   },
   globals: {
-    __WEBPACK_ENV__: true,
     bus: true,
   },
 };

.github/workflows/publish_foss_docker.yml

@@ -0,0 +1,62 @@
+# #
+# # This action will publish Chatwoot CE docker image.
+# # This is set to run against merges to develop, master
+# # and when tags are created.
+# #
+
+name: Publish Chatwoot CE docker images
+on:
+  push:
+    branches:
+      - develop
+      - master
+    tags:
+      - v*
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    env:
+      GIT_REF: ${{ github.head_ref || github.ref_name }} # ref_name to get tags/branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Strip enterprise code
+        run: |
+          rm -rf enterprise
+          rm -rf spec/enterprise
+
+      - name: Set Chatwoot edition
+        run: |
+          echo -en '\nENV CW_EDITION="ce"' >> docker/Dockerfile
+
+      - name: set docker tag
+        run: |
+          echo "DOCKER_TAG=chatwoot/chatwoot:$GIT_REF-ce" >> $GITHUB_ENV
+
+      - name: replace docker tag if master
+        if: github.ref_name == 'master'
+        run: |
+          echo "DOCKER_TAG=chatwoot/chatwoot:latest-ce" >> $GITHUB_ENV
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: docker/Dockerfile
+          push: true
+          tags: ${{ env.DOCKER_TAG }}

.github/workflows/run_foss_spec.yml

@@ -0,0 +1,73 @@
+# #
+# # This action will strip the enterprise folder
+# # and run the spec.
+# # This is set to run against every PR.
+# #
+
+name: Run Chatwoot CE spec
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    services:
+      postgres:
+        image: postgres:10.8
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ""
+          POSTGRES_DB: postgres
+        ports:
+          - 5432:5432
+        # needed because the postgres container does not provide a healthcheck
+        # tmpfs makes DB faster by using RAM
+        options: >-
+          --mount type=tmpfs,destination=/var/lib/postgresql/data
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    steps:
+    - uses: actions/checkout@v3
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+    - uses: ruby/setup-ruby@v1
+      with:
+        ruby-version: 3.0.4 # Not needed with a .ruby-version file
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+    - name: yarn
+      run: yarn install
+
+    - name: Strip enterprise code
+      run: |
+        rm -rf enterprise
+        rm -rf spec/enterprise
+
+    - name: Create database
+      run: bundle exec rake db:create
+
+    - name: Seed database
+      run: bundle exec rake db:schema:load
+
+    - name: yarn check-files
+      run: yarn install --check-files
+
+    # Run rails tests
+    - name: Run backend tests
+      run: |
+        bundle exec rspec --profile=10 --format documentation

.ruby-version

@@ -1 +1 @@
-3.0.2
+3.0.4

Gemfile

@@ -1,6 +1,6 @@
 source 'https://rubygems.org'
 
-ruby '3.0.2'
+ruby '3.0.4'
 
 ##-- base gems for rails --##
 gem 'rack-cors', require: 'rack/cors'
@@ -97,14 +97,14 @@ gem 'brakeman'
 gem 'ddtrace'
 gem 'newrelic_rpm'
 gem 'scout_apm'
-gem 'sentry-rails'
+gem 'sentry-rails', '~> 5.3'
-gem 'sentry-ruby'
+gem 'sentry-ruby', '~> 5.3'
-gem 'sentry-sidekiq'
+gem 'sentry-sidekiq', '~> 5.3'
 
 ##-- background job processing --##
 gem 'sidekiq', '~> 6.4.0'
 # We want cron jobs
-gem 'sidekiq-cron'
+gem 'sidekiq-cron', '~> 1.3'
 
 ##-- Push notification service --##
 gem 'fcm'
@@ -125,6 +125,12 @@ gem 'procore-sift'
 gem 'email_reply_trimmer'
 gem 'html2text'
 
+# to calculate working hours
+gem 'working_hours'
+
+# full text search for articles
+gem 'pg_search'
+
 group :production, :staging do
   # we dont want request timing out in development while using byebug
   gem 'rack-timeout'
@@ -153,11 +159,6 @@ group :test do
 end
 
 group :development, :test do
-  # TODO: is this needed ?
-  # errors thrown by devise password gem
-  gem 'flay'
-  gem 'rspec'
-  # for error thrown by devise password gem
   gem 'active_record_query_trace'
   gem 'bundle-audit', require: false
   gem 'byebug', platform: :mri

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/chatwoot/devise-secure_password
-  revision: de11e8765654b8242d42101ee9c8ffc8126f7975
+  revision: d777b04f12652d576b1272b8f39857e3e0b3fc26
   specs:
     devise-secure_password (2.0.1)
       devise (>= 4.0.0, < 5.0.0)
@@ -9,63 +9,63 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.4.7)
+    actioncable (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.4.7)
+    actionmailbox (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      activejob (= 6.1.4.7)
+      activejob (= 6.1.5.1)
-      activerecord (= 6.1.4.7)
+      activerecord (= 6.1.5.1)
-      activestorage (= 6.1.4.7)
+      activestorage (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       mail (>= 2.7.1)
-    actionmailer (6.1.4.7)
+    actionmailer (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      actionview (= 6.1.4.7)
+      actionview (= 6.1.5.1)
-      activejob (= 6.1.4.7)
+      activejob (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       mail (~> 2.5, >= 2.5.4)
       rails-dom-testing (~> 2.0)
-    actionpack (6.1.4.7)
+    actionpack (6.1.5.1)
-      actionview (= 6.1.4.7)
+      actionview (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       rack (~> 2.0, >= 2.0.9)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.4.7)
+    actiontext (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      activerecord (= 6.1.4.7)
+      activerecord (= 6.1.5.1)
-      activestorage (= 6.1.4.7)
+      activestorage (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       nokogiri (>= 1.8.5)
-    actionview (6.1.4.7)
+    actionview (6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       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 (6.1.4.7)
+    activejob (6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       globalid (>= 0.3.6)
-    activemodel (6.1.4.7)
+    activemodel (6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
-    activerecord (6.1.4.7)
+    activerecord (6.1.5.1)
-      activemodel (= 6.1.4.7)
+      activemodel (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
     activerecord-import (1.3.0)
       activerecord (>= 4.2)
-    activestorage (6.1.4.7)
+    activestorage (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      activejob (= 6.1.4.7)
+      activejob (= 6.1.5.1)
-      activerecord (= 6.1.4.7)
+      activerecord (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
-      marcel (~> 1.0.0)
+      marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (6.1.4.7)
+    activesupport (6.1.5.1)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -136,7 +136,7 @@ GEM
     climate_control (1.0.1)
     coderay (1.1.3)
     commonmarker (0.23.4)
-    concurrent-ruby (1.1.9)
+    concurrent-ruby (1.1.10)
     connection_pool (2.2.5)
     crack (0.4.5)
       rexml
@@ -182,8 +182,7 @@ GEM
       regexp_parser (~> 2.2)
     email_reply_trimmer (0.1.13)
     erubi (1.10.0)
-    erubis (2.7.0)
+    et-orbi (1.2.7)
-    et-orbi (1.2.6)
       tzinfo
     execjs (2.8.1)
     facebook-messenger (2.0.1)
@@ -204,14 +203,9 @@ GEM
       faraday (~> 1)
     ffi (1.15.5)
     flag_shih_tzu (0.3.23)
-    flay (2.12.1)
-      erubis (~> 2.7.0)
-      path_expander (~> 1.0)
-      ruby_parser (~> 3.0)
-      sexp_processor (~> 4.0)
     foreman (0.87.2)
-    fugit (1.5.2)
+    fugit (1.5.3)
-      et-orbi (~> 1.1, >= 1.1.8)
+      et-orbi (~> 1, >= 1.2.7)
       raabro (~> 1.4)
     gapic-common (0.3.4)
       google-protobuf (~> 3.12, >= 3.12.2)
@@ -309,7 +303,7 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
-    jmespath (1.6.0)
+    jmespath (1.6.1)
     jquery-rails (4.4.0)
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
@@ -349,7 +343,7 @@ GEM
     listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.14.0)
+    loofah (2.17.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -376,16 +370,16 @@ GEM
     net-http-persistent (4.0.1)
       connection_pool (~> 2.2)
     netrc (0.11.0)
-    newrelic_rpm (8.4.0)
+    newrelic_rpm (8.7.0)
     nio4r (2.5.8)
-    nokogiri (1.13.3)
+    nokogiri (1.13.6)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
-    nokogiri (1.13.3-arm64-darwin)
+    nokogiri (1.13.6-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.3-x86_64-darwin)
+    nokogiri (1.13.6-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.3-x86_64-linux)
+    nokogiri (1.13.6-x86_64-linux)
       racc (~> 1.4)
     oauth (0.5.8)
     orm_adapter (0.5.0)
@@ -393,8 +387,10 @@ GEM
     parallel (1.21.0)
     parser (3.1.1.0)
       ast (~> 2.4.1)
-    path_expander (1.1.0)
     pg (1.3.2)
+    pg_search (2.3.6)
+      activerecord (>= 5.2)
+      activesupport (>= 5.2)
     procore-sift (0.16.0)
       rails (> 4.2.0)
     pry (0.14.1)
@@ -403,13 +399,13 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (4.0.6)
-    puma (5.6.2)
+    puma (5.6.4)
       nio4r (~> 2.0)
     pundit (2.2.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.6.0)
-    rack (2.2.3)
+    rack (2.2.3.1)
     rack-attack (6.6.0)
       rack (>= 1.0, < 3)
     rack-cors (1.1.1)
@@ -419,31 +415,31 @@ GEM
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rack-timeout (0.6.0)
-    rails (6.1.4.7)
+    rails (6.1.5.1)
-      actioncable (= 6.1.4.7)
+      actioncable (= 6.1.5.1)
-      actionmailbox (= 6.1.4.7)
+      actionmailbox (= 6.1.5.1)
-      actionmailer (= 6.1.4.7)
+      actionmailer (= 6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      actiontext (= 6.1.4.7)
+      actiontext (= 6.1.5.1)
-      actionview (= 6.1.4.7)
+      actionview (= 6.1.5.1)
-      activejob (= 6.1.4.7)
+      activejob (= 6.1.5.1)
-      activemodel (= 6.1.4.7)
+      activemodel (= 6.1.5.1)
-      activerecord (= 6.1.4.7)
+      activerecord (= 6.1.5.1)
-      activestorage (= 6.1.4.7)
+      activestorage (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       bundler (>= 1.15.0)
-      railties (= 6.1.4.7)
+      railties (= 6.1.5.1)
       sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (6.1.4.7)
+    railties (6.1.5.1)
-      actionpack (= 6.1.4.7)
+      actionpack (= 6.1.5.1)
-      activesupport (= 6.1.4.7)
+      activesupport (= 6.1.5.1)
       method_source
-      rake (>= 0.13)
+      rake (>= 12.2)
       thor (~> 1.0)
     rainbow (3.1.1)
     rake (13.0.6)
@@ -468,10 +464,6 @@ GEM
       netrc (~> 0.8)
     retriable (3.1.2)
     rexml (3.2.5)
-    rspec (3.11.0)
-      rspec-core (~> 3.11.0)
-      rspec-expectations (~> 3.11.0)
-      rspec-mocks (~> 3.11.0)
     rspec-core (3.11.0)
       rspec-support (~> 3.11.0)
     rspec-expectations (3.11.0)
@@ -533,16 +525,16 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.1.0)
+    sentry-rails (5.3.0)
       railties (>= 5.0)
-      sentry-ruby-core (~> 5.1.0)
+      sentry-ruby-core (~> 5.3.0)
-    sentry-ruby (5.1.0)
+    sentry-ruby (5.3.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      sentry-ruby-core (= 5.1.0)
+      sentry-ruby-core (= 5.3.0)
-    sentry-ruby-core (5.1.0)
+    sentry-ruby-core (5.3.0)
       concurrent-ruby
-    sentry-sidekiq (5.1.0)
+    sentry-sidekiq (5.3.0)
-      sentry-ruby-core (~> 5.1.0)
+      sentry-ruby-core (~> 5.3.0)
       sidekiq (>= 3.0)
     sexp_processor (4.16.0)
     shoulda-matchers (5.1.0)
@@ -551,8 +543,8 @@ GEM
       connection_pool (>= 2.2.2)
       rack (~> 2.0)
       redis (>= 4.2.0)
-    sidekiq-cron (1.2.0)
+    sidekiq-cron (1.4.0)
-      fugit (~> 1.1)
+      fugit (~> 1)
       sidekiq (>= 4.2.1)
     signet (0.16.0)
       addressable (~> 2.8)
@@ -636,6 +628,9 @@ GEM
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     wisper (2.0.0)
+    working_hours (1.4.1)
+      activesupport (>= 3.2)
+      tzinfo
     zeitwerk (2.5.4)
 
 PLATFORMS
@@ -678,7 +673,6 @@ DEPENDENCIES
   faker
   fcm
   flag_shih_tzu
-  flay
   foreman
   geocoder
   google-cloud-dialogflow
@@ -703,6 +697,7 @@ DEPENDENCIES
   mock_redis
   newrelic_rpm
   pg
+  pg_search
   procore-sift
   pry-rails
   puma
@@ -715,7 +710,6 @@ DEPENDENCIES
   redis-namespace
   responders
   rest-client
-  rspec
   rspec-rails (~> 5.0.0)
   rubocop
   rubocop-performance
@@ -723,12 +717,12 @@ DEPENDENCIES
   rubocop-rspec
   scout_apm
   seed_dump
-  sentry-rails
+  sentry-rails (~> 5.3)
-  sentry-ruby
+  sentry-ruby (~> 5.3)
-  sentry-sidekiq
+  sentry-sidekiq (~> 5.3)
   shoulda-matchers
   sidekiq (~> 6.4.0)
-  sidekiq-cron
+  sidekiq-cron (~> 1.3)
   simplecov (= 0.17.1)
   slack-ruby-client
   spring
@@ -746,9 +740,10 @@ DEPENDENCIES
   webpacker (~> 5.x)
   webpush
   wisper (= 2.0.0)
+  working_hours
 
 RUBY VERSION
-   ruby 3.0.2p107
+   ruby 3.0.4p208
 
 BUNDLED WITH
-   2.3.8
+   2.3.15

app/builders/campaigns/campaign_conversation_builder.rb

@@ -1,5 +1,5 @@
 class Campaigns::CampaignConversationBuilder
-  pattr_initialize [:contact_inbox_id!, :campaign_display_id!, :conversation_additional_attributes]
+  pattr_initialize [:contact_inbox_id!, :campaign_display_id!, :conversation_additional_attributes, :custom_attributes]
 
   def perform
     @contact_inbox = ContactInbox.find(@contact_inbox_id)
@@ -21,7 +21,8 @@ class Campaigns::CampaignConversationBuilder
 
   def message_params
     ActionController::Parameters.new({
-                                       content: @campaign.message
+                                       content: @campaign.message,
+                                       campaign_id: @campaign.id
                                      })
   end
 
@@ -32,7 +33,8 @@ class Campaigns::CampaignConversationBuilder
       contact_id: @contact_inbox.contact_id,
       contact_inbox_id: @contact_inbox.id,
       campaign_id: @campaign.id,
-      additional_attributes: conversation_additional_attributes
+      additional_attributes: conversation_additional_attributes,
+      custom_attributes: custom_attributes || {}
     }
   end
 end

app/builders/contact_builder.rb

@@ -15,11 +15,10 @@ class ContactBuilder
   end
 
   def create_contact_inbox(contact)
-    ::ContactInbox.create!(
+    ::ContactInbox.create_with(hmac_verified: hmac_verified || false).find_or_create_by!(
       contact_id: contact.id,
       inbox_id: inbox.id,
-      source_id: source_id,
+      source_id: source_id
-      hmac_verified: hmac_verified || false
     )
   end
 

app/builders/messages/facebook/message_builder.rb

@@ -27,9 +27,9 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
     end
     ensure_contact_avatar
   rescue Koala::Facebook::AuthenticationError
-    Rails.logger.error "Facebook Authorization expired for Inbox #{@inbox.id}"
+    @inbox.channel.authorization_error!
   rescue StandardError => e
-    Sentry.capture_exception(e)
+    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     true
   end
 
@@ -43,7 +43,7 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
     return if contact.present?
 
     @contact = Contact.create!(contact_params.except(:remote_avatar_url))
-    @contact_inbox = ContactInbox.create(contact: contact, inbox: @inbox, source_id: @sender_id)
+    @contact_inbox = ContactInbox.find_or_create_by!(contact: contact, inbox: @inbox, source_id: @sender_id)
   end
 
   def build_message
@@ -128,10 +128,10 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
       result = {}
       # OAuthException, code: 100, error_subcode: 2018218, message: (#100) No profile available for this user
       # We don't need to capture this error as we don't care about contact params in case of echo messages
-      Sentry.capture_exception(e) unless @outgoing_echo
+      ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception unless @outgoing_echo
     rescue StandardError => e
       result = {}
-      Sentry.capture_exception(e)
+      ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     end
     process_contact_params_result(result)
   end

app/builders/messages/instagram/message_builder.rb

@@ -24,7 +24,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     @inbox.channel.authorization_error!
     raise
   rescue StandardError => e
-    Sentry.capture_exception(e)
+    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
     true
   end
 

app/builders/messages/message_builder.rb

@@ -9,6 +9,7 @@ class Messages::MessageBuilder
     @user = user
     @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
+    @automation_rule = @params&.dig(:content_attributes, :automation_rule_id)
     return unless params.instance_of?(ActionController::Parameters)
 
     @in_reply_to = params.to_unsafe_h&.dig(:content_attributes, :in_reply_to)
@@ -64,6 +65,18 @@ class Messages::MessageBuilder
     @params[:external_created_at].present? ? { external_created_at: @params[:external_created_at] } : {}
   end
 
+  def automation_rule_id
+    @automation_rule.present? ? { content_attributes: { automation_rule_id: @automation_rule } } : {}
+  end
+
+  def campaign_id
+    @params[:campaign_id].present? ? { additional_attributes: { campaign_id: @params[:campaign_id] } } : {}
+  end
+
+  def template_params
+    @params[:template_params].present? ? { additional_attributes: { template_params: JSON.parse(@params[:template_params].to_json) } } : {}
+  end
+
   def message_sender
     return if @params[:sender_type] != 'AgentBot'
 
@@ -82,6 +95,6 @@ class Messages::MessageBuilder
       items: @items,
       in_reply_to: @in_reply_to,
       echo_id: @params[:echo_id]
-    }.merge(external_created_at)
+    }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)
   end
 end

app/builders/messages/messenger/message_builder.rb

@@ -53,16 +53,7 @@ class Messages::Messenger::MessageBuilder
 
   def fetch_story_link(attachment)
     message = attachment.message
-    begin
+    result = get_story_object_from_source_id(message.source_id)
-      k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
-      result = k.get_object(message.source_id, fields: %w[story from]) || {}
-    rescue Koala::Facebook::AuthenticationError
-      @inbox.channel.authorization_error!
-      raise
-    rescue StandardError => e
-      result = {}
-      Sentry.capture_exception(e)
-    end
     story_id = result['story']['mention']['id']
     story_sender = result['from']['username']
     message.content_attributes[:story_sender] = story_sender
@@ -70,4 +61,15 @@ class Messages::Messenger::MessageBuilder
     message.content = I18n.t('conversations.messages.instagram_story_content', story_sender: story_sender)
     message.save!
   end
+
+  def get_story_object_from_source_id(source_id)
+    k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
+    k.get_object(source_id, fields: %w[story from]) || {}
+  rescue Koala::Facebook::AuthenticationError
+    @inbox.channel.authorization_error!
+    raise
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
+    {}
+  end
 end

app/builders/v2/report_builder.rb

@@ -4,6 +4,7 @@ class V2::ReportBuilder
   attr_reader :account, :params
 
   DEFAULT_GROUP_BY = 'day'.freeze
+  AGENT_RESULTS_PER_PAGE = 25
 
   def initialize(account, params)
     @account = account
@@ -45,7 +46,7 @@ class V2::ReportBuilder
     if params[:type].equal?(:account)
       conversations
     else
-      agent_metrics
+      agent_metrics.sort_by { |hash| hash[:metric][:open] }.reverse
     end
   end
 
@@ -79,20 +80,23 @@ class V2::ReportBuilder
   end
 
   def agent_metrics
-    users = @account.users
+    account_users = @account.account_users.page(params[:page]).per(AGENT_RESULTS_PER_PAGE)
-    users = users.where(id: params[:user_id]) if params[:user_id].present?
+    account_users.each_with_object([]) do |account_user, arr|
-    users.each_with_object([]) do |user, arr|
+      @user = account_user.user
-      @user = user
       arr << {
-        user: { id: user.id, name: user.name, thumbnail: user.avatar_url },
+        id: @user.id,
+        name: @user.name,
+        email: @user.email,
+        thumbnail: @user.avatar_url,
+        availability: account_user.availability_status,
         metric: conversations
       }
     end
   end
 
   def conversations
-    @open_conversations = scope.conversations.open
+    @open_conversations = scope.conversations.where(account_id: @account.id).open
-    first_response_count = scope.reporting_events.where(name: 'first_response', conversation_id: @open_conversations.pluck('id')).count
+    first_response_count = @account.reporting_events.where(name: 'first_response', conversation_id: @open_conversations.pluck('id')).count
     metric = {
       open: @open_conversations.count,
       unattended: @open_conversations.count - first_response_count

app/channels/room_channel.rb

@@ -45,6 +45,8 @@ class RoomChannel < ApplicationCable::Channel
   end
 
   def current_account
+    return if current_user.blank?
+
     @current_account ||= if @current_user.is_a? Contact
                            @current_user.account
                          else

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

@@ -0,0 +1,48 @@
+class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
+  before_action :portal
+  before_action :fetch_article, except: [:index, :create]
+
+  def index
+    @articles = @portal.articles
+    @articles.search(list_params) if params[:payload].present?
+  end
+
+  def create
+    @article = @portal.articles.create!(article_params)
+  end
+
+  def edit; end
+
+  def show; end
+
+  def update
+    @article.update!(article_params)
+  end
+
+  def destroy
+    @article.destroy!
+    head :ok
+  end
+
+  private
+
+  def fetch_article
+    @article = @portal.articles.find(params[:id])
+  end
+
+  def portal
+    @portal ||= Current.account.portals.find_by(slug: params[:portal_id])
+  end
+
+  def article_params
+    params.require(:article).permit(
+      :title, :content, :description, :position, :category_id, :author_id
+    )
+  end
+
+  def list_params
+    params.require(:payload).permit(
+      :category_slug, :locale, :query
+    )
+  end
+end

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

@@ -0,0 +1,24 @@
+class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseController
+  before_action :fetch_inboxes
+
+  def index
+    agent_ids = @inboxes.map do |inbox|
+      authorize inbox, :show?
+      member_ids = inbox.members.pluck(:user_id)
+      member_ids
+    end
+    agent_ids = agent_ids.inject(:&)
+    agents = Current.account.users.where(id: agent_ids)
+    @assignable_agents = (agents + Current.account.administrators).uniq
+  end
+
+  private
+
+  def fetch_inboxes
+    @inboxes = Current.account.inboxes.find(permitted_params[:inbox_ids])
+  end
+
+  def permitted_params
+    params.permit(inbox_ids: [])
+  end
+end

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

@@ -9,6 +9,7 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
   def create
     @automation_rule = Current.account.automation_rules.new(automation_rules_permit)
     @automation_rule.actions = params[:actions]
+    @automation_rule.conditions = params[:conditions]
 
     render json: { error: @automation_rule.errors.messages }, status: :unprocessable_entity and return unless @automation_rule.valid?
 
@@ -17,12 +18,27 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     @automation_rule
   end
 
+  def attach_file
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
+    )
+    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
+  end
+
   def show; end
 
   def update
-    @automation_rule.update(automation_rules_permit)
+    ActiveRecord::Base.transaction do
-    process_attachments
+      automation_rule_update
-    @automation_rule
+      process_attachments
+
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @automation_rule.errors.messages }.to_json, status: :unprocessable_entity
+    end
   end
 
   def destroy
@@ -37,20 +53,30 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     @automation_rule = new_rule
   end
 
+  def process_attachments
+    actions = @automation_rule.actions.filter_map { |k, _v| k if k['action_name'] == 'send_attachment' }
+    return if actions.blank?
+
+    actions.each do |action|
+      blob_id = action['action_params']
+      blob = ActiveStorage::Blob.find_by(id: blob_id)
+      @automation_rule.files.attach(blob)
+    end
+  end
+
   private
 
-  def process_attachments
+  def automation_rule_update
-    return if params[:attachments].blank?
+    @automation_rule.update!(automation_rules_permit)
-
+    @automation_rule.actions = params[:actions] if params[:actions]
-    params[:attachments].each do |uploaded_attachment|
+    @automation_rule.conditions = params[:conditions] if params[:conditions]
-      @automation_rule.files.attach(uploaded_attachment)
+    @automation_rule.save!
-    end
   end
 
   def automation_rules_permit
     params.permit(
       :name, :description, :event_name, :account_id, :active,
-      conditions: [:attribute_key, :filter_operator, :query_operator, { values: [] }],
+      conditions: [:attribute_key, :filter_operator, :query_operator, :custom_attribute_type, { values: [] }],
       actions: [:action_name, { action_params: [] }]
     )
   end

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

@@ -15,7 +15,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
       set_instagram_id(page_access_token, facebook_channel)
       set_avatar(@facebook_inbox, page_id)
     rescue StandardError => e
-      Sentry.capture_exception(e)
+      ChatwootExceptionTracker.new(e).capture_exception
     end
   end
 
@@ -60,7 +60,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
       set_instagram_id(access_token, fb_page)
       fb_page&.reauthorized!
     rescue StandardError => e
-      Sentry.capture_exception(e)
+      ChatwootExceptionTracker.new(e).capture_exception
     end
   end
 

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

@@ -1,8 +1,9 @@
-class Api::V1::Accounts::Kbase::CategoriesController < Api::V1::Accounts::Kbase::BaseController
+class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseController
+  before_action :portal
   before_action :fetch_category, except: [:index, :create]
 
   def index
-    @categories = @portal.categories
+    @categories = @portal.categories.search(params)
   end
 
   def create
@@ -24,9 +25,13 @@ class Api::V1::Accounts::Kbase::CategoriesController < Api::V1::Accounts::Kbase:
     @category = @portal.categories.find(params[:id])
   end
 
+  def portal
+    @portal ||= Current.account.portals.find_by(slug: params[:portal_id])
+  end
+
   def category_params
     params.require(:category).permit(
-      :name, :description, :position
+      :name, :description, :position, :slug, :locale
     )
   end
 end

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

@@ -7,7 +7,6 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
       build_inbox
       setup_webhooks if @twilio_channel.sms?
     rescue StandardError => e
-      Sentry.capture_exception(e)
       render_could_not_create_error(e.message)
     end
   end

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::Conversations::BaseController < Api::V1::Accounts::Base
   private
 
   def conversation
-    @conversation ||= Current.account.conversations.find_by(display_id: params[:conversation_id])
+    @conversation ||= Current.account.conversations.find_by!(display_id: params[:conversation_id])
     authorize @conversation.inbox, :show?
   end
 end

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
   RESULTS_PER_PAGE = 25
 
   before_action :check_authorization
-  before_action :set_csat_survey_responses, only: [:index, :metrics]
+  before_action :set_csat_survey_responses, only: [:index, :metrics, :download]
   before_action :set_current_page, only: [:index]
   before_action :set_current_page_surveys, only: [:index]
   before_action :set_total_sent_messages_count, only: [:metrics]
@@ -19,6 +19,12 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
     @ratings_count = @csat_survey_responses.group(:rating).count
   end
 
+  def download
+    response.headers['Content-Type'] = 'text/csv'
+    response.headers['Content-Disposition'] = 'attachment; filename=csat_report.csv'
+    render layout: false, template: 'api/v1/accounts/csat_survey_responses/download.csv.erb', format: 'csv'
+  end
+
   private
 
   def set_total_sent_messages_count

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

@@ -0,0 +1,44 @@
+class Api::V1::Accounts::DashboardAppsController < Api::V1::Accounts::BaseController
+  before_action :fetch_dashboard_apps, except: [:create]
+  before_action :fetch_dashboard_app, only: [:show, :update, :destroy]
+
+  def index; end
+
+  def show; end
+
+  def create
+    @dashboard_app = Current.account.dashboard_apps.create!(
+      permitted_payload.merge(user_id: Current.user.id)
+    )
+  end
+
+  def update
+    @dashboard_app.update!(permitted_payload)
+  end
+
+  def destroy
+    @dashboard_app.destroy!
+    head :no_content
+  end
+
+  private
+
+  def fetch_dashboard_apps
+    @dashboard_apps = Current.account.dashboard_apps
+  end
+
+  def fetch_dashboard_app
+    @dashboard_app = @dashboard_apps.find(permitted_params[:id])
+  end
+
+  def permitted_payload
+    params.require(:dashboard_app).permit(
+      :title,
+      content: [:url, :type]
+    )
+  end
+
+  def permitted_params
+    params.permit(:id)
+  end
+end

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

@@ -12,6 +12,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
 
   def show; end
 
+  # Deprecated: This API will be removed in 2.7.0
   def assignable_agents
     @assignable_agents = (Current.account.users.where(id: @inbox.members.select(:user_id)) + Current.account.administrators).uniq
   end
@@ -41,15 +42,19 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    @inbox.update(permitted_params.except(:channel))
+    @inbox.update!(permitted_params.except(:channel))
-    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
+    update_inbox_working_hours
     channel_attributes = get_channel_attributes(@inbox.channel_type)
 
     # Inbox update doesn't necessarily need channel attributes
     return if permitted_params(channel_attributes)[:channel].blank?
 
     if @inbox.inbox_type == 'Email'
-      validate_email_channel(channel_attributes)
+      begin
+        validate_email_channel(channel_attributes)
+      rescue StandardError => e
+        render json: { message: e }, status: :unprocessable_entity and return
+      end
       @inbox.channel.reauthorized!
     end
 
@@ -57,6 +62,10 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     update_channel_feature_flags
   end
 
+  def update_inbox_working_hours
+    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
+  end
+
   def agent_bot
     @agent_bot = @inbox.agent_bot
   end
@@ -88,12 +97,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     @agent_bot = AgentBot.find(params[:agent_bot]) if params[:agent_bot]
   end
 
-  def inbox_name(channel)
-    return channel.try(:bot_name) if channel.is_a?(Channel::Telegram)
-
-    permitted_params[:name]
-  end
-
   def create_channel
     return unless %w[web_widget api email line telegram whatsapp sms].include?(permitted_params[:channel][:type])
 
@@ -108,10 +111,14 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     @inbox.channel.save!
   end
 
+  def inbox_attributes
+    [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
+     :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved]
+  end
+
   def permitted_params(channel_attributes = [])
     params.permit(
-      :name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
+      *inbox_attributes,
-      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
       channel: [:type, *channel_attributes]
     )
   end
@@ -128,18 +135,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     }[permitted_params[:channel][:type]]
   end
 
-  def account_channels_method
-    {
-      'web_widget' => Current.account.web_widgets,
-      'api' => Current.account.api_channels,
-      'email' => Current.account.email_channels,
-      'line' => Current.account.line_channels,
-      'telegram' => Current.account.telegram_channels,
-      'whatsapp' => Current.account.whatsapp_channels,
-      'sms' => Current.account.sms_channels
-    }[permitted_params[:channel][:type]]
-  end
-
   def get_channel_attributes(channel_type)
     if channel_type.constantize.const_defined?(:EDITABLE_ATTRS)
       channel_type.constantize::EDITABLE_ATTRS.presence
@@ -147,10 +142,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
       []
     end
   end
-
-  def validate_limit
-    return unless Current.account.inboxes.count >= Current.account.usage_limits[:inboxes]
-
-    render_payment_required('Account limit exceeded. Upgrade to a higher plan')
-  end
 end
+
+Api::V1::Accounts::InboxesController.prepend_mod_with('Api::V1::Accounts::InboxesController')

app/controllers/api/v1/accounts/kbase/base_controller.rb

@@ -1,9 +0,0 @@
-class Api::V1::Accounts::Kbase::BaseController < Api::V1::Accounts::BaseController
-  before_action :portal
-
-  private
-
-  def portal
-    @portal ||= Current.account.kbase_portals.find_by(id: params[:portal_id])
-  end
-end

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

@@ -1,12 +1,14 @@
-class Api::V1::Accounts::Kbase::PortalsController < Api::V1::Accounts::Kbase::BaseController
+class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   before_action :fetch_portal, except: [:index, :create]
 
   def index
-    @portals = Current.account.kbase_portals
+    @portals = Current.account.portals
   end
 
+  def show; end
+
   def create
-    @portal = Current.account.kbase_portals.create!(portal_params)
+    @portal = Current.account.portals.create!(portal_params)
   end
 
   def update
@@ -21,12 +23,16 @@ class Api::V1::Accounts::Kbase::PortalsController < Api::V1::Accounts::Kbase::Ba
   private
 
   def fetch_portal
-    @portal = current_account.kbase_portals.find(params[:id])
+    @portal = Current.account.portals.find_by(slug: permitted_params[:id])
+  end
+
+  def permitted_params
+    params.permit(:id)
   end
 
   def portal_params
     params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug
+      :account_id, :color, :custom_domain, :header_text, :homepage_link, :name, :page_title, :slug, :archived
     )
   end
 end

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

@@ -23,7 +23,7 @@ class Api::V1::Accounts::WebhooksController < Api::V1::Accounts::BaseController
   private
 
   def webhook_params
-    params.require(:webhook).permit(:inbox_id, :url)
+    params.require(:webhook).permit(:inbox_id, :url, subscriptions: [])
   end
 
   def fetch_webhook

app/controllers/api/v1/webhooks_controller.rb

@@ -10,7 +10,7 @@ class Api::V1::WebhooksController < ApplicationController
     twitter_consumer.consume
     head :ok
   rescue StandardError => e
-    Sentry.capture_exception(e)
+    ChatwootExceptionTracker.new(e).capture_exception
     head :ok
   end
 

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

@@ -39,7 +39,8 @@ class Api::V1::Widget::BaseController < ApplicationController
         browser: browser_params,
         referer: permitted_params[:message][:referer_url],
         initiated_at: timestamp_params
-      }
+      },
+      custom_attributes: permitted_params[:custom_attributes].presence || {}
     }
   end
 
@@ -52,16 +53,39 @@ class Api::V1::Widget::BaseController < ApplicationController
         mergee_contact: @contact
       ).perform
     else
-      @contact.update!(email: email, name: contact_name)
+      @contact.update!(email: email)
+      update_contact_name
     end
   end
 
+  def update_contact_phone_number(phone_number)
+    contact_with_phone_number = @current_account.contacts.find_by(phone_number: phone_number)
+    if contact_with_phone_number
+      @contact = ::ContactMergeAction.new(
+        account: @current_account,
+        base_contact: contact_with_phone_number,
+        mergee_contact: @contact
+      ).perform
+    else
+      @contact.update!(phone_number: phone_number)
+      update_contact_name
+    end
+  end
+
+  def update_contact_name
+    @contact.update!(name: contact_name) if contact_name.present?
+  end
+
   def contact_email
-    permitted_params[:contact][:email].downcase
+    permitted_params.dig(:contact, :email)&.downcase
   end
 
   def contact_name
-    params[:contact][:name] || contact_email.split('@')[0]
+    params[:contact][:name] || contact_email.split('@')[0] if contact_email.present?
+  end
+
+  def contact_phone_number
+    permitted_params.dig(:contact, :phone_number)
   end
 
   def browser_params

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

@@ -7,12 +7,17 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
 
   def create
     ActiveRecord::Base.transaction do
-      update_contact(contact_email) if @contact.email.blank? && contact_email.present?
+      process_update_contact
       @conversation = create_conversation
       conversation.messages.create(message_params)
     end
   end
 
+  def process_update_contact
+    update_contact(contact_email) if @contact.email.blank? && contact_email.present?
+    update_contact_phone_number(contact_phone_number) if @contact.phone_number.blank? && contact_phone_number.present?
+  end
+
   def update_last_seen
     head :ok && return if conversation.nil?
 
@@ -45,7 +50,10 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def toggle_status
-    head :not_found && return if conversation.nil?
+    return head :not_found if conversation.nil?
+
+    return head :forbidden unless @web_widget.end_conversation?
+
     unless conversation.resolved?
       conversation.status = :resolved
       conversation.save
@@ -60,6 +68,8 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
   end
 
   def permitted_params
-    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id])
+    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
+                                                               message: [:content, :referer_url, :timestamp, :echo_id],
+                                                               custom_attributes: {})
   end
 end

app/controllers/api/v2/accounts/reports_controller.rb

@@ -1,4 +1,5 @@
 class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
+  include Api::V2::Accounts::ReportsHelper
   before_action :check_authorization
 
   def index
@@ -12,27 +13,23 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
   end
 
   def agents
-    response.headers['Content-Type'] = 'text/csv'
+    @report_data = generate_agents_report
-    response.headers['Content-Disposition'] = 'attachment; filename=agents_report.csv'
+    generate_csv('agents_report', 'api/v2/accounts/reports/agents.csv.erb')
-    render layout: false, template: 'api/v2/accounts/reports/agents.csv.erb', format: 'csv'
   end
 
   def inboxes
-    response.headers['Content-Type'] = 'text/csv'
+    @report_data = generate_inboxes_report
-    response.headers['Content-Disposition'] = 'attachment; filename=inboxes_report.csv'
+    generate_csv('inboxes_report', 'api/v2/accounts/reports/inboxes.csv.erb')
-    render layout: false, template: 'api/v2/accounts/reports/inboxes.csv.erb', format: 'csv'
   end
 
   def labels
-    response.headers['Content-Type'] = 'text/csv'
+    @report_data = generate_labels_report
-    response.headers['Content-Disposition'] = 'attachment; filename=labels_report.csv'
+    generate_csv('labels_report', 'api/v2/accounts/reports/labels.csv.erb')
-    render layout: false, template: 'api/v2/accounts/reports/labels.csv.erb', format: 'csv'
   end
 
   def teams
-    response.headers['Content-Type'] = 'text/csv'
+    @report_data = generate_teams_report
-    response.headers['Content-Disposition'] = 'attachment; filename=teams_report.csv'
+    generate_csv('teams_report', 'api/v2/accounts/reports/teams.csv.erb')
-    render layout: false, template: 'api/v2/accounts/reports/teams.csv.erb', format: 'csv'
   end
 
   def conversations
@@ -43,46 +40,53 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
 
   private
 
+  def generate_csv(filename, template)
+    response.headers['Content-Type'] = 'text/csv'
+    response.headers['Content-Disposition'] = "attachment; filename=#{filename}.csv"
+    render layout: false, template: template, format: 'csv'
+  end
+
   def check_authorization
     raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
   end
 
-  def current_summary_params
+  def common_params
     {
       type: params[:type].to_sym,
       id: params[:id],
-      since: range[:current][:since],
+      group_by: params[:group_by],
-      until: range[:current][:until],
+      business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
-      group_by: params[:group_by]
     }
   end
 
+  def current_summary_params
+    common_params.merge({
+                          since: range[:current][:since],
+                          until: range[:current][:until]
+                        })
+  end
+
   def previous_summary_params
-    {
+    common_params.merge({
-      type: params[:type].to_sym,
+                          since: range[:previous][:since],
-      id: params[:id],
+                          until: range[:previous][:until]
-      since: range[:previous][:since],
+                        })
-      until: range[:previous][:until],
-      group_by: params[:group_by]
-    }
   end
 
   def report_params
-    {
+    common_params.merge({
-      metric: params[:metric],
+                          metric: params[:metric],
-      type: params[:type].to_sym,
+                          since: params[:since],
-      since: params[:since],
+                          until: params[:until],
-      until: params[:until],
+                          timezone_offset: params[:timezone_offset]
-      id: params[:id],
+                        })
-      group_by: params[:group_by],
-      timezone_offset: params[:timezone_offset]
-    }
   end
 
   def conversation_params
     {
       type: params[:type].to_sym,
-      user_id: params[:user_id]
+      user_id: params[:user_id],
+      page: params[:page].presence || 1
     }
   end
 

app/controllers/application_controller.rb

@@ -1,7 +1,7 @@
 class ApplicationController < ActionController::Base
   include DeviseTokenAuth::Concerns::SetUserByToken
   include RequestExceptionHandler
-  include Pundit
+  include Pundit::Authorization
   include SwitchLocale
 
   skip_before_action :verify_authenticity_token

app/controllers/concerns/request_exception_handler.rb

@@ -9,8 +9,7 @@ module RequestExceptionHandler
 
   def handle_with_exception
     yield
-  rescue ActiveRecord::RecordNotFound => e
+  rescue ActiveRecord::RecordNotFound
-    Sentry.capture_exception(e)
     render_not_found_error('Resource could not be found')
   rescue Pundit::NotAuthorizedError
     render_unauthorized('You are not authorized to do this action')

app/controllers/dashboard_controller.rb

@@ -38,9 +38,13 @@ class DashboardController < ActionController::Base
   end
 
   def app_config
-    { APP_VERSION: Chatwoot.config[:version],
+    {
+      APP_VERSION: Chatwoot.config[:version],
       VAPID_PUBLIC_KEY: VapidService.public_key,
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
-      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', '') }
+      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
+      FACEBOOK_API_VERSION: 'v14.0',
+      IS_ENTERPRISE: ChatwootApp.enterprise?
+    }
   end
 end

app/controllers/platform/api/v1/users_controller.rb

@@ -21,6 +21,10 @@ class Platform::Api::V1::UsersController < PlatformController
 
   def update
     @resource.assign_attributes(user_update_params)
+
+    # We are using devise's reconfirmable flow for changing emails
+    # But in case of platform APIs we don't want user to go through this extra step
+    @resource.skip_reconfirmation! if user_update_params[:email].present?
     @resource.save!
   end
 

app/controllers/public/api/v1/inboxes/contacts_controller.rb

@@ -43,6 +43,6 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
   end
 
   def permitted_params
-    params.permit(:identifier, :identifier_hash, :email, :name, :avatar_url, custom_attributes: {})
+    params.permit(:identifier, :identifier_hash, :email, :name, :avatar_url, :phone_number, custom_attributes: {})
   end
 end

app/controllers/widget_tests_controller.rb

@@ -3,6 +3,7 @@ class WidgetTestsController < ActionController::Base
   before_action :ensure_widget_position
   before_action :ensure_widget_type
   before_action :ensure_widget_style
+  before_action :ensure_dark_mode
 
   def index
     render
@@ -14,6 +15,10 @@ class WidgetTestsController < ActionController::Base
     @widget_style = params[:widget_style] || 'standard'
   end
 
+  def ensure_dark_mode
+    @dark_mode = params[:dark_mode] || 'light'
+  end
+
   def ensure_widget_position
     @widget_position = params[:position] || 'left'
   end

app/finders/conversation_finder.rb

@@ -51,6 +51,7 @@ class ConversationFinder
     filter_by_team if @team
     filter_by_labels if params[:labels]
     filter_by_query if params[:q]
+    filter_by_reply_status
   end
 
   def set_inboxes
@@ -90,6 +91,10 @@ class ConversationFinder
     @conversations
   end
 
+  def filter_by_reply_status
+    @conversations = @conversations.where(first_reply_created_at: nil) if params[:reply_status] == 'unattended'
+  end
+
   def filter_by_query
     allowed_message_types = [Message.message_types[:incoming], Message.message_types[:outgoing]]
     @conversations = conversations.joins(:messages).where('messages.content ILIKE :search', search: "%#{params[:q]}%")

app/finders/email_channel_finder.rb

@@ -0,0 +1,15 @@
+class EmailChannelFinder
+  def initialize(email_object)
+    @email_object = email_object
+  end
+
+  def perform
+    channel = nil
+    recipient_mails = @email_object.to.to_a + @email_object.cc.to_a
+    recipient_mails.each do |email|
+      channel = Channel::Email.find_by('lower(email) = ? OR lower(forward_to_email) = ?', email.downcase, email.downcase)
+      break if channel.present?
+    end
+    channel
+  end
+end

app/finders/message_finder.rb

@@ -22,7 +22,7 @@ class MessageFinder
 
   def current_messages
     if @params[:before].present?
-      messages.reorder('created_at desc').where('id < ?', @params[:before]).limit(20).reverse
+      messages.reorder('created_at desc').where('id < ?', @params[:before].to_i).limit(20).reverse
     else
       messages.reorder('created_at desc').limit(20).reverse
     end

app/helpers/api/v1/inboxes_helper.rb

@@ -1,4 +1,10 @@
 module Api::V1::InboxesHelper
+  def inbox_name(channel)
+    return channel.try(:bot_name) if channel.is_a?(Channel::Telegram)
+
+    permitted_params[:name]
+  end
+
   def validate_email_channel(attributes)
     channel_data = permitted_params(attributes)[:channel]
 
@@ -14,13 +20,12 @@ module Api::V1::InboxesHelper
     Mail.defaults do
       retriever_method :imap, { address: channel_data[:imap_address],
                                 port: channel_data[:imap_port],
-                                user_name: channel_data[:imap_email],
+                                user_name: channel_data[:imap_login],
                                 password: channel_data[:imap_password],
                                 enable_ssl: channel_data[:imap_enable_ssl] }
     end
 
-    Mail.connection do # rubocop:disable:block
+    check_imap_connection(channel_data)
-    end
   end
 
   def validate_smtp(channel_data)
@@ -29,8 +34,31 @@ module Api::V1::InboxesHelper
     smtp = Net::SMTP.new(channel_data[:smtp_address], channel_data[:smtp_port])
 
     set_smtp_encryption(channel_data, smtp)
+    check_smtp_connection(channel_data, smtp)
+  end
 
-    smtp.start(channel_data[:smtp_domain], channel_data[:smtp_email], channel_data[:smtp_password], :login)
+  def check_imap_connection(channel_data)
+    Mail.connection {} # rubocop:disable:block
+  rescue SocketError => e
+    raise StandardError, I18n.t('errors.inboxes.imap.socket_error')
+  rescue Net::IMAP::NoResponseError => e
+    raise StandardError, I18n.t('errors.inboxes.imap.no_response_error')
+  rescue Errno::EHOSTUNREACH => e
+    raise StandardError, I18n.t('errors.inboxes.imap.host_unreachable_error')
+  rescue Net::OpenTimeout => e
+    raise StandardError,
+          I18n.t('errors.inboxes.imap.connection_timed_out_error', address: channel_data[:imap_address], port: channel_data[:imap_port])
+  rescue Net::IMAP::Error => e
+    raise StandardError, I18n.t('errors.inboxes.imap.connection_closed_error')
+  rescue StandardError => e
+    raise StandardError, e.message
+  ensure
+    Rails.logger.error e if e.present?
+  end
+
+  def check_smtp_connection(channel_data, smtp)
+    smtp.start(channel_data[:smtp_domain], channel_data[:smtp_login], channel_data[:smtp_password],
+               channel_data[:smtp_authentication]&.to_sym || :login)
     smtp.finish unless smtp&.nil?
   end
 
@@ -70,4 +98,22 @@ module Api::V1::InboxesHelper
     context.verify_mode = openssl_verify_mode
     context
   end
+
+  def account_channels_method
+    {
+      'web_widget' => Current.account.web_widgets,
+      'api' => Current.account.api_channels,
+      'email' => Current.account.email_channels,
+      'line' => Current.account.line_channels,
+      'telegram' => Current.account.telegram_channels,
+      'whatsapp' => Current.account.whatsapp_channels,
+      'sms' => Current.account.sms_channels
+    }[permitted_params[:channel][:type]]
+  end
+
+  def validate_limit
+    return unless Current.account.inboxes.count >= Current.account.usage_limits[:inboxes]
+
+    render_payment_required('Account limit exceeded. Upgrade to a higher plan')
+  end
 end

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

@@ -0,0 +1,56 @@
+module Api::V2::Accounts::ReportsHelper
+  def generate_agents_report
+    Current.account.users.map do |agent|
+      agent_report = generate_report({ type: :agent, id: agent.id })
+      [agent.name] + generate_readable_report_metrics(agent_report)
+    end
+  end
+
+  def generate_inboxes_report
+    Current.account.inboxes.map do |inbox|
+      inbox_report = generate_report({ type: :inbox, id: inbox.id })
+      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(inbox_report)
+    end
+  end
+
+  def generate_teams_report
+    Current.account.teams.map do |team|
+      team_report = generate_report({ type: :team, id: team.id })
+      [team.name] + generate_readable_report_metrics(team_report)
+    end
+  end
+
+  def generate_labels_report
+    Current.account.labels.map do |label|
+      label_report = generate_report({ type: :label, id: label.id })
+      [label.title] + generate_readable_report_metrics(label_report)
+    end
+  end
+
+  def generate_report(report_params)
+    V2::ReportBuilder.new(
+      Current.account,
+      report_params.merge(
+        {
+          since: params[:since],
+          until: params[:until],
+          business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+        }
+      )
+    ).summary
+  end
+
+  private
+
+  def generate_readable_report_metrics(report_metric)
+    [
+      report_metric[:conversations_count],
+      time_to_minutes(report_metric[:avg_first_response_time]),
+      time_to_minutes(report_metric[:avg_resolution_time])
+    ]
+  end
+
+  def time_to_minutes(time_in_seconds)
+    (time_in_seconds / 60).to_i
+  end
+end

app/helpers/report_helper.rb

@@ -17,33 +17,39 @@ module ReportHelper
   end
 
   def conversations_count
-    (get_grouped_values scope.conversations).count
+    (get_grouped_values scope.conversations.where(account_id: account.id)).count
   end
 
   def incoming_messages_count
-    (get_grouped_values scope.messages.incoming.unscope(:order)).count
+    (get_grouped_values scope.messages.where(account_id: account.id).incoming.unscope(:order)).count
   end
 
   def outgoing_messages_count
-    (get_grouped_values scope.messages.outgoing.unscope(:order)).count
+    (get_grouped_values scope.messages.where(account_id: account.id).outgoing.unscope(:order)).count
   end
 
   def resolutions_count
-    (get_grouped_values scope.conversations.resolved).count
+    (get_grouped_values scope.conversations.where(account_id: account.id).resolved).count
   end
 
   def avg_first_response_time
-    (get_grouped_values scope.reporting_events.where(name: 'first_response')).average(:value)
+    grouped_reporting_events = (get_grouped_values scope.reporting_events.where(name: 'first_response', account_id: account.id))
+    return grouped_reporting_events.average(:value_in_business_hours) if params[:business_hours]
+
+    grouped_reporting_events.average(:value)
   end
 
   def avg_resolution_time
-    (get_grouped_values scope.reporting_events.where(name: 'conversation_resolved')).average(:value)
+    grouped_reporting_events = (get_grouped_values scope.reporting_events.where(name: 'conversation_resolved', account_id: account.id))
+    return grouped_reporting_events.average(:value_in_business_hours) if params[:business_hours]
+
+    grouped_reporting_events.average(:value)
   end
 
   def avg_resolution_time_summary
-    avg_rt = scope.reporting_events
+    reporting_events = scope.reporting_events
-                  .where(name: 'conversation_resolved', created_at: range)
+                            .where(name: 'conversation_resolved', account_id: account.id, created_at: range)
-                  .average(:value)
+    avg_rt = params[:business_hours] ? reporting_events.average(:value_in_business_hours) : reporting_events.average(:value)
 
     return 0 if avg_rt.blank?
 
@@ -51,9 +57,9 @@ module ReportHelper
   end
 
   def avg_first_response_time_summary
-    avg_frt = scope.reporting_events
+    reporting_events = scope.reporting_events
-                   .where(name: 'first_response', created_at: range)
+                            .where(name: 'first_response', account_id: account.id, created_at: range)
-                   .average(:value)
+    avg_frt = params[:business_hours] ? reporting_events.average(:value_in_business_hours) : reporting_events.average(:value)
 
     return 0 if avg_frt.blank?
 

app/helpers/reporting_event_helper.rb

@@ -0,0 +1,50 @@
+module ReportingEventHelper
+  def business_hours(inbox, from, to)
+    return 0 unless inbox.working_hours_enabled?
+
+    inbox_working_hours = configure_working_hours(inbox.working_hours)
+    return 0 if inbox_working_hours.blank?
+
+    # Configure working hours
+    WorkingHours::Config.working_hours = inbox_working_hours
+
+    # Configure timezone
+    WorkingHours::Config.time_zone = inbox.timezone
+
+    # Use inbox timezone to change from & to values.
+    from_in_inbox_timezone = from.in_time_zone(inbox.timezone).to_time
+    to_in_inbox_timezone = to.in_time_zone(inbox.timezone).to_time
+    from_in_inbox_timezone.working_time_until(to_in_inbox_timezone)
+  end
+
+  private
+
+  def configure_working_hours(working_hours)
+    working_hours.each_with_object({}) do |working_hour, object|
+      object[day(working_hour.day_of_week)] = working_hour_range(working_hour) unless working_hour.closed_all_day?
+    end
+  end
+
+  def day(day_of_week)
+    week_days = {
+      0 => :sun,
+      1 => :mon,
+      2 => :tue,
+      3 => :wed,
+      4 => :thu,
+      5 => :fri,
+      6 => :sat
+    }
+    week_days[day_of_week]
+  end
+
+  def working_hour_range(working_hour)
+    { format_time(working_hour.open_hour, working_hour.open_minutes) => format_time(working_hour.close_hour, working_hour.close_minutes) }
+  end
+
+  def format_time(hour, minute)
+    hour = hour < 10 ? "0#{hour}" : hour
+    minute = minute < 10 ? "0#{minute}" : minute
+    "#{hour}:#{minute}"
+  end
+end

app/javascript/dashboard/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="app" class="app-wrapper app-root">
+  <div v-if="!authUIFlags.isFetching" id="app" class="app-wrapper app-root">
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
     <transition name="fade" mode="out-in">
-      <router-view></router-view>
+      <router-view />
     </transition>
     <add-account-modal
       :show="showAddAccountModal"
@@ -11,21 +11,28 @@
     <woot-snackbar-box />
     <network-notification />
   </div>
+  <loading-state v-else />
 </template>
 
 <script>
-import { accountIdFromPathname } from './helper/URLHelper';
 import { mapGetters } from 'vuex';
 import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal';
+import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
+import {
+  registerSubscription,
+  verifyServiceWorkerExistence,
+} from './helper/pushHelper';
 
 export default {
   name: 'App',
 
   components: {
     AddAccountModal,
+    LoadingState,
     NetworkNotification,
     UpdateBanner,
     WootSnackbarBox,
@@ -43,13 +50,12 @@ export default {
       getAccount: 'accounts/getAccount',
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
+      authUIFlags: 'getAuthUIFlags',
+      currentAccountId: 'getCurrentAccountId',
     }),
     hasAccounts() {
-      return (
+      const { accounts = [] } = this.currentUser || {};
-        this.currentUser &&
+      return accounts.length > 0;
-        this.currentUser.accounts &&
-        this.currentUser.accounts.length !== 0
-      );
     },
   },
 
@@ -58,32 +64,37 @@ export default {
       if (!this.hasAccounts) {
         this.showAddAccountModal = true;
       }
+      verifyServiceWorkerExistence(registration =>
+        registration.pushManager.getSubscription().then(subscription => {
+          if (subscription) {
+            registerSubscription();
+          }
+        })
+      );
+    },
+    currentAccountId() {
+      if (this.currentAccountId) {
+        this.initializeAccount();
+      }
     },
   },
   mounted() {
-    this.$store.dispatch('setUser');
     this.setLocale(window.chatwootConfig.selectedLocale);
-    this.initializeAccount();
   },
-
   methods: {
     setLocale(locale) {
       this.$root.$i18n.locale = locale;
     },
-
     async initializeAccount() {
-      const { pathname } = window.location;
+      await this.$store.dispatch('accounts/get');
-      const accountId = accountIdFromPathname(pathname);
+      const {
-
+        locale,
-      if (accountId) {
+        latest_chatwoot_version: latestChatwootVersion,
-        await this.$store.dispatch('accounts/get');
+      } = this.getAccount(this.currentAccountId);
-        const {
+      const { pubsub_token: pubsubToken } = this.currentUser || {};
-          locale,
+      this.setLocale(locale);
-          latest_chatwoot_version: latestChatwootVersion,
+      this.latestChatwootVersion = latestChatwootVersion;
-        } = this.getAccount(accountId);
+      vueActionCable.init(pubsubToken);
-        this.setLocale(locale);
-        this.latestChatwootVersion = latestChatwootVersion;
-      }
     },
   },
 };

app/javascript/dashboard/api/assignableAgents.js

@@ -0,0 +1,16 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class AssignableAgents extends ApiClient {
+  constructor() {
+    super('assignable_agents', { accountScoped: true });
+  }
+
+  get(inboxIds) {
+    return axios.get(this.url, {
+      params: { inbox_ids: inboxIds },
+    });
+  }
+}
+
+export default new AssignableAgents();

app/javascript/dashboard/api/auth.js

@@ -1,6 +1,4 @@
-/* eslint no-console: 0 */
 /* global axios */
-/* eslint no-undef: "error" */
 
 import Cookies from 'js-cookie';
 import endPoints from './endPoints';
@@ -61,41 +59,15 @@ export default {
     });
     return fetchPromise;
   },
-
+  hasAuthCookie() {
-  isLoggedIn() {
+    return !!Cookies.getJSON('cw_d_session_info');
-    const hasAuthCookie = !!Cookies.getJSON('auth_data');
-    const hasUserCookie = !!Cookies.getJSON('user');
-    return hasAuthCookie && hasUserCookie;
   },
-
-  isAdmin() {
-    if (this.isLoggedIn()) {
-      return Cookies.getJSON('user').role === 'administrator';
-    }
-    return false;
-  },
-
   getAuthData() {
-    if (this.isLoggedIn()) {
+    if (this.hasAuthCookie()) {
-      return Cookies.getJSON('auth_data');
+      return Cookies.getJSON('cw_d_session_info');
     }
     return false;
   },
-  getPubSubToken() {
-    if (this.isLoggedIn()) {
-      const user = Cookies.getJSON('user') || {};
-      const { pubsub_token: pubsubToken } = user;
-      return pubsubToken;
-    }
-    return null;
-  },
-  getCurrentUser() {
-    if (this.isLoggedIn()) {
-      return Cookies.getJSON('user');
-    }
-    return null;
-  },
-
   verifyPasswordToken({ confirmationToken }) {
     return new Promise((resolve, reject) => {
       axios

app/javascript/dashboard/api/automation.js

@@ -9,6 +9,14 @@ class AutomationsAPI extends ApiClient {
   clone(automationId) {
     return axios.post(`${this.url}/${automationId}/clone`);
   }
+
+  attachment(file) {
+    return axios.post(`${this.url}/attach_file`, file, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }
 }
 
 export default new AutomationsAPI();

app/javascript/dashboard/api/bulkActions.js

@@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class BulkActionsAPI extends ApiClient {
+  constructor() {
+    super('bulk_actions', { accountScoped: true });
+  }
+}
+
+export default new BulkActionsAPI();

app/javascript/dashboard/api/csatReports.js

@@ -18,6 +18,17 @@ class CSATReportsAPI extends ApiClient {
     });
   }
 
+  download({ from, to, user_ids } = {}) {
+    return axios.get(`${this.url}/download`, {
+      params: {
+        since: from,
+        until: to,
+        sort: '-created_at',
+        user_ids,
+      },
+    });
+  }
+
   getMetrics({ from, to, user_ids } = {}) {
     return axios.get(`${this.url}/metrics`, {
       params: { since: from, until: to, user_ids },

app/javascript/dashboard/api/dashboardApps.js

@@ -0,0 +1,9 @@
+import ApiClient from './ApiClient';
+
+class DashboardAppsAPI extends ApiClient {
+  constructor() {
+    super('dashboard_apps', { accountScoped: true });
+  }
+}
+
+export default new DashboardAppsAPI();

app/javascript/dashboard/api/inbox/message.js

@@ -10,6 +10,7 @@ export const buildCreatePayload = ({
   files,
   ccEmails = '',
   bccEmails = '',
+  templateParams,
 }) => {
   let payload;
   if (files && files.length !== 0) {
@@ -32,6 +33,7 @@ export const buildCreatePayload = ({
       content_attributes: contentAttributes,
       cc_emails: ccEmails,
       bcc_emails: bccEmails,
+      template_params: templateParams,
     };
   }
   return payload;
@@ -51,6 +53,7 @@ class MessageApi extends ApiClient {
     files,
     ccEmails = '',
     bccEmails = '',
+    templateParams,
   }) {
     return axios({
       method: 'post',
@@ -63,6 +66,7 @@ class MessageApi extends ApiClient {
         files,
         ccEmails,
         bccEmails,
+        templateParams,
       }),
     });
   }

app/javascript/dashboard/api/inboxes.js

@@ -6,10 +6,6 @@ class Inboxes extends ApiClient {
     super('inboxes', { accountScoped: true });
   }
 
-  getAssignableAgents(inboxId) {
-    return axios.get(`${this.url}/${inboxId}/assignable_agents`);
-  }
-
   getCampaigns(inboxId) {
     return axios.get(`${this.url}/${inboxId}/campaigns`);
   }

app/javascript/dashboard/api/reports.js

@@ -8,7 +8,15 @@ class ReportsAPI extends ApiClient {
     super('reports', { accountScoped: true, apiVersion: 'v2' });
   }
 
-  getReports(metric, since, until, type = 'account', id, group_by) {
+  getReports(
+    metric,
+    since,
+    until,
+    type = 'account',
+    id,
+    group_by,
+    business_hours
+  ) {
     return axios.get(`${this.url}`, {
       params: {
         metric,
@@ -17,12 +25,13 @@ class ReportsAPI extends ApiClient {
         type,
         id,
         group_by,
+        business_hours,
         timezone_offset: getTimeOffset(),
       },
     });
   }
 
-  getSummary(since, until, type = 'account', id, group_by) {
+  getSummary(since, until, type = 'account', id, group_by, business_hours) {
     return axios.get(`${this.url}/summary`, {
       params: {
         since,
@@ -30,31 +39,41 @@ class ReportsAPI extends ApiClient {
         type,
         id,
         group_by,
+        business_hours,
       },
     });
   }
 
-  getAgentReports(since, until) {
+  getConversationMetric(type = 'account', page = 1) {
+    return axios.get(`${this.url}/conversations`, {
+      params: {
+        type,
+        page,
+      },
+    });
+  }
+
+  getAgentReports({ from: since, to: until, businessHours }) {
     return axios.get(`${this.url}/agents`, {
-      params: { since, until },
+      params: { since, until, business_hours: businessHours },
     });
   }
 
-  getLabelReports(since, until) {
+  getLabelReports({ from: since, to: until, businessHours }) {
     return axios.get(`${this.url}/labels`, {
-      params: { since, until },
+      params: { since, until, business_hours: businessHours },
     });
   }
 
-  getInboxReports(since, until) {
+  getInboxReports({ from: since, to: until, businessHours }) {
     return axios.get(`${this.url}/inboxes`, {
-      params: { since, until },
+      params: { since, until, business_hours: businessHours },
     });
   }
 
-  getTeamReports(since, until) {
+  getTeamReports({ from: since, to: until, businessHours }) {
     return axios.get(`${this.url}/teams`, {
-      params: { since, until },
+      params: { since, until, business_hours: businessHours },
     });
   }
 }

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

@@ -0,0 +1,18 @@
+import assignableAgentsAPI from '../assignableAgents';
+import describeWithAPIMock from './apiSpecHelper';
+
+describe('#AssignableAgentsAPI', () => {
+  describeWithAPIMock('API calls', context => {
+    it('#getAssignableAgents', () => {
+      assignableAgentsAPI.get([1]);
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/assignable_agents',
+        {
+          params: {
+            inbox_ids: [1],
+          },
+        }
+      );
+    });
+  });
+});

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

@@ -0,0 +1,9 @@
+import bulkActions from '../bulkActions';
+import ApiClient from '../ApiClient';
+
+describe('#BulkActionsAPI', () => {
+  it('creates correct instance', () => {
+    expect(bulkActions).toBeInstanceOf(ApiClient);
+    expect(bulkActions).toHaveProperty('create');
+  });
+});

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

@@ -33,5 +33,23 @@ describe('#Reports API', () => {
         }
       );
     });
+    it('#download', () => {
+      csatReportsAPI.download({
+        from: 1622485800,
+        to: 1623695400,
+        user_ids: 1,
+      });
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/csat_survey_responses/download',
+        {
+          params: {
+            since: 1622485800,
+            until: 1623695400,
+            user_ids: 1,
+            sort: '-created_at',
+          },
+        }
+      );
+    });
   });
 });

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

@@ -0,0 +1,13 @@
+import dashboardAppsAPI from '../dashboardApps';
+import ApiClient from '../ApiClient';
+
+describe('#dashboardAppsAPI', () => {
+  it('creates correct instance', () => {
+    expect(dashboardAppsAPI).toBeInstanceOf(ApiClient);
+    expect(dashboardAppsAPI).toHaveProperty('get');
+    expect(dashboardAppsAPI).toHaveProperty('show');
+    expect(dashboardAppsAPI).toHaveProperty('create');
+    expect(dashboardAppsAPI).toHaveProperty('update');
+    expect(dashboardAppsAPI).toHaveProperty('delete');
+  });
+});

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

@@ -10,17 +10,9 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('create');
     expect(inboxesAPI).toHaveProperty('update');
     expect(inboxesAPI).toHaveProperty('delete');
-    expect(inboxesAPI).toHaveProperty('getAssignableAgents');
     expect(inboxesAPI).toHaveProperty('getCampaigns');
   });
   describeWithAPIMock('API calls', context => {
-    it('#getAssignableAgents', () => {
-      inboxesAPI.getAssignableAgents(1);
-      expect(context.axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/inboxes/1/assignable_agents'
-      );
-    });
-
     it('#getCampaigns', () => {
       inboxesAPI.getCampaigns(2);
       expect(context.axiosMock.get).toHaveBeenCalledWith(

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

@@ -47,20 +47,25 @@ describe('#Reports API', () => {
     });
 
     it('#getAgentReports', () => {
-      reportsAPI.getAgentReports(1621103400, 1621621800);
+      reportsAPI.getAgentReports({
+        from: 1621103400,
+        to: 1621621800,
+        businessHours: true,
+      });
       expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/agents',
         {
           params: {
             since: 1621103400,
             until: 1621621800,
+            business_hours: true,
           },
         }
       );
     });
 
     it('#getLabelReports', () => {
-      reportsAPI.getLabelReports(1621103400, 1621621800);
+      reportsAPI.getLabelReports({ from: 1621103400, to: 1621621800 });
       expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/labels',
         {
@@ -73,7 +78,7 @@ describe('#Reports API', () => {
     });
 
     it('#getInboxReports', () => {
-      reportsAPI.getInboxReports(1621103400, 1621621800);
+      reportsAPI.getInboxReports({ from: 1621103400, to: 1621621800 });
       expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/inboxes',
         {
@@ -86,7 +91,7 @@ describe('#Reports API', () => {
     });
 
     it('#getTeamReports', () => {
-      reportsAPI.getTeamReports(1621103400, 1621621800);
+      reportsAPI.getTeamReports({ from: 1621103400, to: 1621621800 });
       expect(context.axiosMock.get).toHaveBeenCalledWith(
         '/api/v2/reports/teams',
         {
@@ -97,5 +102,18 @@ describe('#Reports API', () => {
         }
       );
     });
+
+    it('#getConversationMetric', () => {
+      reportsAPI.getConversationMetric('account');
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v2/reports/conversations',
+        {
+          params: {
+            type: 'account',
+            page: 1,
+          },
+        }
+      );
+    });
   });
 });

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -383,8 +383,8 @@ $form-button-radius: var(--border-radius-normal);
 // 20. Label
 // ---------
 
-$label-background: $primary-color;
+$label-background: $white;
-$label-color: $white;
+$label-color: $black;
 $label-color-alt: $black;
 $label-palette: $foundation-palette;
 $label-font-size: $font-size-mini;

app/javascript/dashboard/assets/scss/_utility-helpers.scss

@@ -2,6 +2,10 @@
   margin-right: var(--space-small);
 }
 
+.margin-bottom-small {
+  margin-bottom: var(--space-small);
+}
+
 .margin-right-smaller {
   margin-right: var(--space-smaller);
 }
@@ -51,12 +55,14 @@
   background-color: var(--white);
 }
 
-.text-y-800 {
-  color: var(--y-800);
-}
-
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.flex-between {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -27,6 +27,16 @@
       padding: 0 $space-small;
     }
 
+    .video-js {
+      background: transparent;
+      // Override min-height : 50px in foundation
+      //
+      max-height: $space-mega * 2.4;
+      min-height: 4.8rem;
+      padding: var(--space-normal) 0 0;
+      resize: none;
+    }
+
     >textarea {
       @include ghost-input();
       @include margin(0);

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

@@ -78,5 +78,10 @@
       font-size: $font-size-default;
       color: $color-gray;
     }
+
+    .business-hours {
+      margin: $space-normal;
+      text-align: center;
+    }
   }
 }

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

@@ -25,3 +25,21 @@
   align-items: center;
   display: flex;
 }
+
+.business-hours {
+  align-items: center;
+  display: flex;
+  justify-content: end;
+  margin-bottom: var(--space-normal);
+  margin-left: auto;
+  padding-right: var(--space-normal);
+}
+
+.business-hours-text {
+  font-size: var(--font-size-small);
+}
+
+.switch {
+  margin-bottom: var(--space-zero);
+  margin-left: var(--space-small);
+}

app/javascript/dashboard/components/ChatList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="conversations-list-wrap">
-    <slot></slot>
+    <slot />
     <div
       class="chat-list__top"
       :class="{ filter__applied: hasAppliedFiltersOrActiveFolders }"
@@ -53,8 +53,7 @@
           size="small"
           class="btn-filter"
           @click="onToggleAdvanceFiltersModal"
-        >
+        />
-        </woot-button>
       </div>
     </div>
 
@@ -84,7 +83,19 @@
     <p v-if="!chatListLoading && !conversationList.length" class="content-box">
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
-
+    <conversation-bulk-actions
+      v-if="selectedConversations.length"
+      :conversations="selectedConversations"
+      :all-conversations-selected="allConversationsSelected"
+      :selected-inboxes="uniqueInboxes"
+      :show-open-action="allSelectedConversationsStatus('open')"
+      :show-resolved-action="allSelectedConversationsStatus('resolved')"
+      :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      @select-all-conversations="selectAllConversations"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
+    />
     <div ref="activeConversation" class="conversations-list">
       <conversation-card
         v-for="chat in conversationList"
@@ -95,10 +106,13 @@
         :chat="chat"
         :conversation-type="conversationType"
         :show-assignee="showAssigneeInConversationCard"
+        :selected="isConversationSelected(chat.id)"
+        @select-conversation="selectConversation"
+        @de-select-conversation="deSelectConversation"
       />
 
       <div v-if="chatListLoading" class="text-center">
-        <span class="spinner"></span>
+        <span class="spinner" />
       </div>
 
       <woot-button
@@ -111,11 +125,7 @@
       </woot-button>
 
       <p
-        v-if="
+        v-if="showEndOfListMessage"
-          conversationList.length &&
-            hasCurrentPageEndReached &&
-            !chatListLoading
-        "
         class="text-center text-muted end-of-list-text"
       >
         {{ $t('CHAT_LIST.EOF') }}
@@ -151,6 +161,8 @@ import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
 import AddCustomViews from 'dashboard/routes/dashboard/customviews/AddCustomViews';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
+import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
+import alertMixin from 'shared/mixins/alertMixin';
 
 import {
   hasPressedAltAndJKey,
@@ -165,8 +177,9 @@ export default {
     ChatFilter,
     ConversationAdvancedFilter,
     DeleteCustomViews,
+    ConversationBulkActions,
   },
-  mixins: [timeMixin, conversationMixin, eventListenerMixins],
+  mixins: [timeMixin, conversationMixin, eventListenerMixins, alertMixin],
   props: {
     conversationInbox: {
       type: [String, Number],
@@ -201,6 +214,8 @@ export default {
       foldersQuery: {},
       showAddFoldersModal: false,
       showDeleteFoldersModal: false,
+      selectedConversations: [],
+      selectedInboxes: [],
     };
   },
   computed: {
@@ -216,6 +231,7 @@ export default {
       conversationStats: 'conversationStats/getStats',
       appliedFilters: 'getAppliedConversationFilters',
       folders: 'customViews/getCustomViews',
+      inboxes: 'inboxes/getInboxes',
     }),
     hasAppliedFilters() {
       return this.appliedFilters.length !== 0;
@@ -233,12 +249,24 @@ export default {
       }
       return {};
     },
+    showEndOfListMessage() {
+      return (
+        this.conversationList.length &&
+        this.hasCurrentPageEndReached &&
+        !this.chatListLoading
+      );
+    },
     assigneeTabItems() {
-      return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
+      const ASSIGNEE_TYPE_TAB_KEYS = {
-        const count = this.conversationStats[item.COUNT_KEY] || 0;
+        me: 'mineCount',
+        unassigned: 'unAssignedCount',
+        all: 'allCount',
+      };
+      return Object.keys(ASSIGNEE_TYPE_TAB_KEYS).map(key => {
+        const count = this.conversationStats[ASSIGNEE_TYPE_TAB_KEYS[key]] || 0;
         return {
-          key: item.KEY,
+          key,
-          name: item.NAME,
+          name: this.$t(`CHAT_LIST.ASSIGNEE_TYPE_TABS.${key}`),
           count,
         };
       });
@@ -337,6 +365,17 @@ export default {
       }
       return {};
     },
+    allConversationsSelected() {
+      return (
+        this.conversationList.length === this.selectedConversations.length &&
+        this.conversationList.every(el =>
+          this.selectedConversations.includes(el.id)
+        )
+      );
+    },
+    uniqueInboxes() {
+      return [...new Set(this.selectedInboxes)];
+    },
   },
   watch: {
     activeTeam() {
@@ -370,6 +409,7 @@ export default {
       if (this.$route.name !== 'home') {
         this.$router.push({ name: 'home' });
       }
+      this.resetBulkActions();
       this.foldersQuery = filterQueryGenerator(payload);
       this.$store.dispatch('conversationPage/reset');
       this.$store.dispatch('emptyAllConversations');
@@ -435,6 +475,7 @@ export default {
       }
     },
     resetAndFetchData() {
+      this.resetBulkActions();
       this.$store.dispatch('conversationPage/reset');
       this.$store.dispatch('emptyAllConversations');
       this.$store.dispatch('clearConversationFilters');
@@ -485,6 +526,7 @@ export default {
     },
     updateAssigneeTab(selectedTab) {
       if (this.activeAssigneeTab !== selectedTab) {
+        this.resetBulkActions();
         bus.$emit('clearSearchInput');
         this.activeAssigneeTab = selectedTab;
         if (!this.currentPage) {
@@ -492,6 +534,10 @@ export default {
         }
       }
     },
+    resetBulkActions() {
+      this.selectedConversations = [];
+      this.selectedInboxes = [];
+    },
     updateStatusType(index) {
       if (this.activeStatus !== index) {
         this.activeStatus = index;
@@ -514,6 +560,80 @@ export default {
         this.fetchConversations();
       }
     },
+    isConversationSelected(id) {
+      return this.selectedConversations.includes(id);
+    },
+    selectConversation(conversationId, inboxId) {
+      this.selectedConversations.push(conversationId);
+      this.selectedInboxes.push(inboxId);
+    },
+    deSelectConversation(conversationId, inboxId) {
+      this.selectedConversations = this.selectedConversations.filter(
+        item => item !== conversationId
+      );
+      this.selectedInboxes = this.selectedInboxes.filter(
+        item => item !== inboxId
+      );
+    },
+    selectAllConversations(check) {
+      if (check) {
+        this.selectedConversations = this.conversationList.map(item => item.id);
+        this.selectedInboxes = this.conversationList.map(item => item.inbox_id);
+      } else {
+        this.resetBulkActions();
+      }
+    },
+    async onAssignAgent(agent) {
+      try {
+        await this.$store.dispatch('bulkActions/process', {
+          type: 'Conversation',
+          ids: this.selectedConversations,
+          fields: {
+            assignee_id: agent.id,
+          },
+        });
+        this.selectedConversations = [];
+        this.showAlert(this.$t('BULK_ACTION.ASSIGN_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.ASSIGN_FAILED'));
+      }
+    },
+    async onAssignLabels(labels) {
+      try {
+        await this.$store.dispatch('bulkActions/process', {
+          type: 'Conversation',
+          ids: this.selectedConversations,
+          labels: {
+            add: labels,
+          },
+        });
+        this.selectedConversations = [];
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.LABELS.ASSIGN_FAILED'));
+      }
+    },
+    async onUpdateConversations(status) {
+      try {
+        await this.$store.dispatch('bulkActions/process', {
+          type: 'Conversation',
+          ids: this.selectedConversations,
+          fields: {
+            status,
+          },
+        });
+        this.selectedConversations = [];
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_SUCCESFUL'));
+      } catch (err) {
+        this.showAlert(this.$t('BULK_ACTION.UPDATE.UPDATE_FAILED'));
+      }
+    },
+    allSelectedConversationsStatus(status) {
+      if (!this.selectedConversations.length) return false;
+      return this.selectedConversations.every(item => {
+        return this.$store.getters.getConversationById(item).status === status;
+      });
+    },
   },
 };
 </script>
@@ -529,7 +649,7 @@ export default {
 .conversations-list-wrap {
   flex-shrink: 0;
   width: 34rem;
-
+  overflow: hidden;
   @include breakpoint(large up) {
     width: 36rem;
   }

app/javascript/dashboard/components/Modal.vue

@@ -98,4 +98,7 @@ export default {
     width: 48rem;
   }
 }
+.modal-big {
+  width: 60%;
+}
 </style>

app/javascript/dashboard/components/ModalHeader.vue

@@ -7,7 +7,7 @@
     <p v-if="headerContent" class="small-12 column">
       {{ headerContent }}
     </p>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

app/javascript/dashboard/components/NetworkNotification.vue

@@ -20,8 +20,7 @@
           color-scheme="warning"
           icon="dismiss-circle"
           @click="closeNotification"
-        >
+        />
-        </woot-button>
       </div>
     </div>
   </transition>

app/javascript/dashboard/components/SettingsSection.vue

@@ -7,9 +7,13 @@
       <p class="sub-head">
         {{ subTitle }}
       </p>
+      <p v-if="note">
+        <span class="note">{{ $t('INBOX_MGMT.NOTE') }}</span>
+        {{ note }}
+      </p>
     </div>
     <div class="medium-6 small-12">
-      <slot></slot>
+      <slot />
     </div>
   </div>
 </template>
@@ -25,6 +29,10 @@ export default {
       type: String,
       required: true,
     },
+    note: {
+      type: String,
+      default: '',
+    },
   },
 };
 </script>
@@ -46,5 +54,9 @@ export default {
   .title--section {
     padding-right: var(--space-large);
   }
+
+  .note {
+    font-weight: var(--font-weight-bold);
+  }
 }
 </style>

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

@@ -7,7 +7,7 @@
       :icon="icon"
     />
     <spinner v-if="isLoading" />
-    <slot></slot>
+    <slot />
   </button>
 </template>
 

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

@@ -57,3 +57,13 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+button:disabled {
+  opacity: 1;
+  background-color: var(--w-100);
+
+  &:hover {
+    background-color: var(--w-100);
+  }
+}
+</style>

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

@@ -53,7 +53,7 @@ export default {
   computed: {
     ...mapGetters({
       getCurrentUserAvailability: 'getCurrentUserAvailability',
-      getCurrentAccountId: 'getCurrentAccountId',
+      currentAccountId: 'getCurrentAccountId',
     }),
     availabilityDisplayLabel() {
       const availabilityIndex = AVAILABILITY_STATUS_KEYS.findIndex(
@@ -63,9 +63,6 @@ export default {
         availabilityIndex
       ];
     },
-    currentAccountId() {
-      return this.getCurrentAccountId;
-    },
     currentUserAvailability() {
       return this.getCurrentUserAvailability;
     },

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

@@ -19,6 +19,7 @@
       :menu-config="activeSecondaryMenu"
       :current-role="currentRole"
       @add-label="showAddLabelPopup"
+      @toggle-accounts="toggleAccountModal"
     />
   </aside>
 </template>

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

@@ -3,7 +3,8 @@ import { frontendURL } from '../../../../helper/URLHelper';
 const reports = accountId => ({
   parentNav: 'reports',
   routes: [
-    'settings_account_reports',
+    'account_overview_reports',
+    'conversation_reports',
     'csat_reports',
     'agent_reports',
     'label_reports',
@@ -16,7 +17,14 @@ const reports = accountId => ({
       label: 'REPORTS_OVERVIEW',
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/reports/overview`),
-      toStateName: 'settings_account_reports',
+      toStateName: 'account_overview_reports',
+    },
+    {
+      icon: 'chat',
+      label: 'REPORTS_CONVERSATION',
+      hasSubMenu: false,
+      toState: frontendURL(`accounts/${accountId}/reports/conversation`),
+      toStateName: 'conversation_reports',
     },
     {
       icon: 'emoji',

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

@@ -1,14 +1,34 @@
 <template>
-  <div v-if="showShowCurrentAccountContext" class="account-context--group">
+  <div
+    v-if="showShowCurrentAccountContext"
+    class="account-context--group"
+    @mouseover="setShowSwitch"
+    @mouseleave="resetShowSwitch"
+  >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
     <p class="account-context--name text-ellipsis">
       {{ account.name }}
     </p>
+    <transition name="fade">
+      <div v-if="showSwitchButton" class="account-context--switch-group">
+        <woot-button
+          variant="clear"
+          icon="arrow-swap"
+          class="cursor-pointer"
+          @click="$emit('toggle-accounts')"
+        >
+          {{ $t('SIDEBAR.SWITCH') }}
+        </woot-button>
+      </div>
+    </transition>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
 export default {
+  data() {
+    return { showSwitchButton: false };
+  },
   computed: {
     ...mapGetters({
       account: 'getCurrentAccount',
@@ -18,6 +38,14 @@ export default {
       return this.userAccounts.length > 1 && this.account.name;
     },
   },
+  methods: {
+    setShowSwitch() {
+      this.showSwitchButton = true;
+    },
+    resetShowSwitch() {
+      this.showSwitchButton = false;
+    },
+  },
 };
 </script>
 <style scoped lang="scss">
@@ -27,10 +55,49 @@ export default {
   font-size: var(--font-size-mini);
   padding: var(--space-small);
   margin-bottom: var(--space-small);
+  width: 100%;
+  position: relative;
+
+  &:hover {
+    background: var(--b-100);
+  }
 
   .account-context--name {
     font-weight: var(--font-weight-medium);
     margin-bottom: 0;
   }
 }
+
+.account-context--switch-group {
+  --overlay-shadow: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 0) 0%,
+    rgba(255, 255, 255, 1) 50%
+  );
+
+  align-items: center;
+  background-image: var(--overlay-shadow);
+  border-top-left-radius: 0;
+  border-top-right-radius: var(--border-radius-normal);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: var(--border-radius-normal);
+  display: flex;
+  height: 100%;
+  justify-content: end;
+  opacity: 1;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms ease;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div v-if="hasSecondaryMenu" class="main-nav secondary-menu">
-    <account-context />
+    <account-context @toggle-accounts="toggleAccountModal" />
     <transition-group name="menu-list" tag="ul" class="menu vertical">
       <secondary-nav-item
         v-for="menuItem in accessibleMenuItems"
@@ -85,14 +85,21 @@ export default {
         toState: frontendURL(`accounts/${this.accountId}/settings/inboxes/new`),
         toStateName: 'settings_inbox_new',
         newLinkRouteName: 'settings_inbox_new',
-        children: this.inboxes.map(inbox => ({
+        children: this.inboxes
-          id: inbox.id,
+          .map(inbox => ({
-          label: inbox.name,
+            id: inbox.id,
-          truncateLabel: true,
+            label: inbox.name,
-          toState: frontendURL(`accounts/${this.accountId}/inbox/${inbox.id}`),
+            truncateLabel: true,
-          type: inbox.channel_type,
+            toState: frontendURL(
-          phoneNumber: inbox.phone_number,
+              `accounts/${this.accountId}/inbox/${inbox.id}`
-        })),
+            ),
+            type: inbox.channel_type,
+            phoneNumber: inbox.phone_number,
+            reauthorizationRequired: inbox.reauthorization_required,
+          }))
+          .sort((a, b) =>
+            a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1
+          ),
       };
     },
     labelSection() {
@@ -218,6 +225,9 @@ export default {
     showAddLabelPopup() {
       this.$emit('add-label');
     },
+    toggleAccountModal() {
+      this.$emit('toggle-accounts');
+    },
   },
 };
 </script>

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

@@ -30,6 +30,14 @@
         <span v-if="count" class="badge" :class="{ secondary: !isActive }">
           {{ count }}
         </span>
+        <span v-if="warningIcon" class="badge--icon">
+          <fluent-icon
+            v-tooltip.top-end="$t('SIDEBAR.FACEBOOK_REAUTHORIZE')"
+            class="inbox-icon"
+            :icon="warningIcon"
+            size="12"
+          />
+        </span>
       </a>
     </li>
   </router-link>
@@ -57,6 +65,10 @@ export default {
       type: String,
       default: '',
     },
+    warningIcon: {
+      type: String,
+      default: '',
+    },
     count: {
       type: String,
       default: '',

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

@@ -34,6 +34,7 @@
         :label-color="child.color"
         :should-truncate="child.truncateLabel"
         :icon="computedInboxClass(child)"
+        :warning-icon="computedInboxErrorClass(child)"
       />
       <router-link
         v-if="showItem(menuItem)"
@@ -63,7 +64,10 @@
 import { mapGetters } from 'vuex';
 
 import adminMixin from '../../../mixins/isAdmin';
-import { getInboxClassByType } from 'dashboard/helper/inbox';
+import {
+  getInboxClassByType,
+  getInboxWarningIconClass,
+} from 'dashboard/helper/inbox';
 
 import SecondaryChildNavItem from './SecondaryChildNavItem';
 
@@ -136,6 +140,15 @@ export default {
       const classByType = getInboxClassByType(type, phoneNumber);
       return classByType;
     },
+    computedInboxErrorClass(child) {
+      const { type, reauthorizationRequired } = child;
+      if (!type) return '';
+      const warningClass = getInboxWarningIconClass(
+        type,
+        reauthorizationRequired
+      );
+      return warningClass;
+    },
     newLinkClick(e, navigate) {
       if (this.menuItem.newLinkRouteName) {
         navigate(e);

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

@@ -30,8 +30,7 @@
       icon="dismiss-circle"
       class-names="banner-action__button"
       @click="onClickClose"
-    >
+    />
-    </woot-button>
   </div>
 </template>
 
@@ -112,10 +111,10 @@ export default {
   }
 
   &.warning {
-    background: var(--y-800);
+    background: var(--y-600);
-    color: var(--s-600);
+    color: var(--y-500);
     a {
-      color: var(--s-600);
+      color: var(--y-500);
     }
   }
 

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

@@ -1,13 +1,18 @@
 <template>
   <div :class="labelClass" :style="labelStyle" :title="description">
-    <button v-if="icon" class="label-action--button" @click="onClick">
+    <span v-if="icon" class="label-action--button">
       <fluent-icon :icon="icon" size="12" class="label--icon" />
-    </button>
+    </span>
+    <span
+      v-if="variant === 'smooth'"
+      :style="{ background: color }"
+      class="label-color-dot"
+    />
     <span v-if="!href" class="label__title">{{ title }}</span>
     <a v-else :href="href" :style="anchorStyle">{{ title }}</a>
     <button
       v-if="showClose"
-      class="label-action--button"
+      class="label-close--button "
       :style="{ color: textColor }"
       @click="onClick"
     >
@@ -56,9 +61,14 @@ export default {
       type: String,
       default: '',
     },
+    variant: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     textColor() {
+      if (this.variant === 'smooth') return '';
       return this.color || getContrastingTextColor(this.bgColor);
     },
     labelClass() {
@@ -98,6 +108,11 @@ export default {
   font-weight: var(--font-weight-medium);
   margin-right: var(--space-smaller);
   margin-bottom: var(--space-smaller);
+  padding: var(--space-smaller);
+  background: var(--s-50);
+  color: var(--s-800);
+  border: 1px solid var(--s-75);
+  height: var(--space-medium);
 
   text-shadow: 0.1px 0 rgb(0 0 0 / 5%), 0 0.1px rgb(0 0 0 / 5%),
     -0.1px 0 rgb(0 0 0 / 5%), 0 -0.1px rgb(0 0 0 / 5%);
@@ -115,11 +130,6 @@ export default {
     margin-right: var(--space-smaller);
   }
 
-  .close--icon {
-    cursor: pointer;
-    margin-left: var(--space-smaller);
-  }
-
   &.small .label--icon,
   &.small .close--icon {
     font-size: var(--font-size-nano);
@@ -165,13 +175,28 @@ export default {
   &.warning {
     background: var(--y-100);
     color: var(--y-900);
-
     a {
       color: var(--y-900);
     }
   }
 }
 
+.label-close--button {
+  color: var(--s-800);
+  margin-bottom: var(--space-minus-micro);
+  margin-left: var(--space-smaller);
+  border-radius: var(--border-radius-small);
+  cursor: pointer;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background: var(--s-100);
+  }
+}
+
 .label-action--button {
   color: inherit;
   display: inline-flex;
@@ -183,4 +208,12 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.label-color-dot {
+  display: inline-block;
+  width: var(--space-one);
+  height: var(--space-one);
+  border-radius: var(--border-radius-small);
+  margin-right: var(--space-smaller);
+}
 </style>

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

@@ -1,54 +1,66 @@
 <template>
-  <label class="switch" :class="classObject">
+  <button
-    <input
+    type="button"
-      :id="id"
+    class="toggle-button"
-      v-model="value"
+    :class="{ active: value }"
-      class="switch-input"
+    role="switch"
-      :name="name"
+    :aria-checked="value.toString()"
-      :disabled="disabled"
+    @click="onClick"
-      type="checkbox"
+  >
-    />
+    <span aria-hidden="true" :class="{ active: value }" />
-    <div class="switch-paddle" :for="name">
+  </button>
-      <span class="show-for-sr">on off</span>
-    </div>
-  </label>
 </template>
 
 <script>
 export default {
   props: {
-    disabled: Boolean,
+    value: { type: Boolean, default: false },
-    type: { type: String, default: '' },
-    size: { type: String, default: '' },
-    checked: Boolean,
-    name: { type: String, default: '' },
-    id: { type: String, default: '' },
   },
-  data() {
+  methods: {
-    return {
+    onClick() {
-      value: null,
+      this.$emit('input', !this.value);
-    };
-  },
-  computed: {
-    classObject() {
-      const { type, size, value } = this;
-      return {
-        [`is-${type}`]: type,
-        [`${size}`]: size,
-        checked: value,
-      };
     },
   },
-  watch: {
-    value(val) {
-      this.$emit('input', val);
-    },
-  },
-  beforeMount() {
-    this.value = this.checked;
-  },
-  mounted() {
-    this.$emit('input', (this.value = !!this.checked));
-  },
 };
 </script>
+<style lang="scss" scoped>
+.toggle-button {
+  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
+    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
+    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  background-color: var(--s-200);
+  border-radius: var(--border-radius-large);
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: flex;
+  flex-shrink: 0;
+  height: 19px;
+  position: relative;
+  transition-duration: 200ms;
+  transition-property: background-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  width: 34px;
+
+  &.active {
+    background-color: var(--w-500);
+  }
+
+  span {
+    --space-one-point-five: 1.5rem;
+    background-color: var(--white);
+    border-radius: 100%;
+    box-shadow: var(--toggle-button-box-shadow);
+    display: inline-block;
+    height: var(--space-one-point-five);
+    transform: translate(0, 0);
+    transition-duration: 200ms;
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    width: var(--space-one-point-five);
+
+    &.active {
+      transform: translate(var(--space-one-point-five), var(--space-zero));
+    }
+  }
+}
+</style>

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

@@ -13,7 +13,7 @@
       :icon="icon"
       :icon-size="iconSize"
     />
-    <span v-if="$slots.default" class="button__content"><slot></slot></span>
+    <span v-if="$slots.default" class="button__content"><slot /></span>
   </button>
 </template>
 <script>

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

@@ -7,7 +7,7 @@
       <select
         v-model="action_name"
         class="action__question"
-        :class="{ 'full-width': !inputType }"
+        :class="{ 'full-width': !showActionInput }"
         @change="resetAction()"
       >
         <option
@@ -18,7 +18,7 @@
           {{ attribute.label }}
         </option>
       </select>
-      <div class="filter__answer--wrap">
+      <div v-if="showActionInput" class="filter__answer--wrap">
         <div v-if="inputType">
           <div
             v-if="inputType === 'multi_select'"
@@ -52,6 +52,11 @@
             class="answer--text-input"
             placeholder="Enter url"
           />
+          <automation-action-file-input
+            v-if="inputType === 'attachment'"
+            v-model="action_params"
+            :initial-file-name="initialFileName"
+          />
         </div>
       </div>
       <woot-button
@@ -61,6 +66,18 @@
         @click="removeAction"
       />
     </div>
+    <automation-action-team-message-input
+      v-if="inputType === 'team_message'"
+      v-model="action_params"
+      :teams="dropdownValues"
+    />
+    <textarea
+      v-if="inputType === 'textarea'"
+      v-model="action_params"
+      rows="4"
+      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+      class="action-message"
+    />
     <p
       v-if="v.action_params.$dirty && v.action_params.$error"
       class="filter-error"
@@ -71,7 +88,13 @@
 </template>
 
 <script>
+import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput.vue';
+import AutomationActionFileInput from './AutomationFileInput.vue';
 export default {
+  components: {
+    AutomationActionTeamMessageInput,
+    AutomationActionFileInput,
+  },
   props: {
     value: {
       type: Object,
@@ -89,6 +112,14 @@ export default {
       type: Object,
       default: () => null,
     },
+    showActionInput: {
+      type: Boolean,
+      default: true,
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     action_name: {
@@ -167,6 +198,7 @@ export default {
 .filter__answer--wrap {
   margin-right: var(--space-smaller);
   flex-grow: 1;
+  max-width: 50%;
 
   input {
     margin-bottom: 0;
@@ -207,4 +239,7 @@ export default {
 .multiselect {
   margin-bottom: var(--space-zero);
 }
+.action-message {
+  margin: var(--space-small) 0 0;
+}
 </style>

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

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <div class="multiselect-wrap--small">
+      <multiselect
+        v-model="selectedTeams"
+        track-by="id"
+        label="name"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
+        :multiple="true"
+        selected-label
+        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
+        deselect-label=""
+        :max-height="160"
+        :options="teams"
+        :allow-empty="false"
+        @input="updateValue"
+      />
+      <textarea
+        v-model="message"
+        rows="4"
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        @input="updateValue"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  // The value types are dynamic, hence prop validation removed to work with our action schema
+  // eslint-disable-next-line vue/require-prop-types
+  props: ['teams', 'value'],
+  data() {
+    return {
+      selectedTeams: [],
+      message: '',
+    };
+  },
+  mounted() {
+    const { team_ids: teamIds } = this.value;
+    this.selectedTeams = teamIds;
+    this.message = this.value.message;
+  },
+  methods: {
+    updateValue() {
+      this.$emit('input', {
+        team_ids: this.selectedTeams.map(team => team.id),
+        message: this.message,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.multiselect {
+  margin: var(--space-smaller) var(--space-zero);
+}
+textarea {
+  margin-bottom: var(--space-zero);
+}
+</style>

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

@@ -0,0 +1,117 @@
+<template>
+  <label class="input-wrapper" :class="uploadState">
+    <input
+      v-if="uploadState !== 'processing'"
+      type="file"
+      name="attachment"
+      :class="uploadState === 'processing' ? 'disabled' : ''"
+      @change="onChangeFile"
+    />
+    <spinner v-if="uploadState === 'processing'" />
+    <fluent-icon v-if="uploadState === 'idle'" icon="file-upload" />
+    <fluent-icon
+      v-if="uploadState === 'uploaded'"
+      icon="checkmark-circle"
+      type="outline"
+      class="success-icon"
+    />
+    <fluent-icon
+      v-if="uploadState === 'failed'"
+      icon="dismiss-circle"
+      type="outline"
+      class="error-icon"
+    />
+    <p class="file-button">{{ label }}</p>
+  </label>
+</template>
+
+<script>
+import Spinner from 'shared/components/Spinner';
+import alertMixin from 'shared/mixins/alertMixin';
+export default {
+  components: {
+    Spinner,
+  },
+  mixins: [alertMixin],
+  props: {
+    value: {
+      type: Array,
+      default: () => [],
+    },
+    initialFileName: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      uploadState: 'idle',
+      label: this.$t('AUTOMATION.ATTACHMENT.LABEL_IDLE'),
+    };
+  },
+  mounted() {
+    if (this.initialFileName) {
+      this.label = this.initialFileName;
+      this.uploadState = 'uploaded';
+    }
+  },
+  methods: {
+    async onChangeFile(event) {
+      this.uploadState = 'processing';
+      this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADING');
+      try {
+        const file = event.target.files[0];
+        const formData = new FormData();
+        formData.append('attachment', file, file.name);
+        const id = await this.$store.dispatch(
+          'automations/uploadAttachment',
+          formData
+        );
+        this.$emit('input', [id]);
+        this.uploadState = 'uploaded';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADED');
+      } catch (error) {
+        this.uploadState = 'failed';
+        this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOAD_FAILED');
+        this.showAlert(this.$t('AUTOMATION.ATTACHMENT.UPLOAD_ERROR'));
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type='file'] {
+  display: none;
+}
+.input-wrapper {
+  display: flex;
+  height: 39px;
+  background-color: var(--white);
+  border-radius: var(--border-radius-small);
+  border: 1px dashed var(--w-100);
+  padding: var(--space-smaller) var(--space-small);
+  align-items: center;
+  font-size: var(--font-size-mini);
+  cursor: pointer;
+}
+.success-icon {
+  margin-right: var(--space-small);
+  color: var(--g-500);
+}
+.error-icon {
+  margin-right: var(--space-small);
+  color: var(--r-500);
+}
+
+.processing {
+  cursor: not-allowed;
+  opacity: 0.9;
+}
+.file-button {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+</style>

app/javascript/dashboard/components/widgets/DashboardApp/Frame.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="dashboard-app--container">
+    <div
+      v-for="(configItem, index) in config"
+      :key="index"
+      class="dashboard-app--list"
+    >
+      <iframe
+        v-if="configItem.type === 'frame' && configItem.url"
+        :id="`dashboard-app--frame-${index}`"
+        :src="configItem.url"
+        @load="() => onIframeLoad(index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    config: {
+      type: Array,
+      default: () => [],
+    },
+    currentChat: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    dashboardAppContext() {
+      return {
+        conversation: this.currentChat,
+        contact: this.$store.getters['contacts/getContact'](this.contactId),
+      };
+    },
+    contactId() {
+      return this.currentChat?.meta?.sender?.id;
+    },
+  },
+  methods: {
+    onIframeLoad(index) {
+      const frameElement = document.getElementById(
+        `dashboard-app--frame-${index}`
+      );
+      const eventData = { event: 'appContext', data: this.dashboardAppContext };
+      frameElement.contentWindow.postMessage(JSON.stringify(eventData), '*');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.dashboard-app--container,
+.dashboard-app--list,
+.dashboard-app--list iframe {
+  height: 100%;
+  width: 100%;
+}
+
+.dashboard-app--list iframe {
+  border: 0;
+}
+</style>

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -215,6 +215,32 @@ export default {
         this.$emit('input', { ...payload, query_operator: value });
       },
     },
+    custom_attribute_type: {
+      get() {
+        if (!this.customAttributeType) return '';
+        return this.customAttributeType;
+      },
+      set() {
+        const payload = this.value || {};
+        this.$emit('input', {
+          ...payload,
+          custom_attribute_type: this.customAttributeType,
+        });
+      },
+    },
+  },
+  watch: {
+    customAttributeType: {
+      handler(value) {
+        if (
+          value === 'conversation_attribute' ||
+          value === 'contact_attribute'
+        ) {
+          this.value.custom_attribute_type = this.customAttributeType;
+        } else this.value.custom_attribute_type = '';
+      },
+      immediate: true,
+    },
   },
   methods: {
     removeFilter() {

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

@@ -7,8 +7,8 @@
       :title="label.title"
       :description="label.description"
       :show-close="true"
-      :bg-color="getBleachBgOfHexColor(label.color)"
       :color="label.color"
+      variant="smooth"
       @click="removeItem"
     />
     <div class="dropdown-wrap">

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

@@ -6,7 +6,7 @@
     <p v-if="headerContent" class="small-12 column">
       {{ headerContent }}
     </p>
-    <slot></slot>
+    <slot />
   </div>
 </template>
 

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

@@ -0,0 +1,50 @@
+<template>
+  <span>
+    {{ textToBeDisplayed }}
+    <button class="show-more--button" @click="toggleShowMore">
+      {{ buttonLabel }}
+    </button>
+  </span>
+</template>
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: '',
+    },
+    limit: {
+      type: Number,
+      default: 120,
+    },
+  },
+  data() {
+    return {
+      showMore: false,
+    };
+  },
+  computed: {
+    textToBeDisplayed() {
+      if (this.showMore) {
+        return this.text;
+      }
+
+      return this.text.slice(0, this.limit) + '...';
+    },
+    buttonLabel() {
+      const i18nKey = !this.showMore ? 'SHOW_MORE' : 'SHOW_LESS';
+      return this.$t(`COMPONENTS.SHOW_MORE_BLOCK.${i18nKey}`);
+    },
+  },
+  methods: {
+    toggleShowMore() {
+      this.showMore = !this.showMore;
+    },
+  },
+};
+</script>
+<style scoped>
+.show-more--button {
+  color: var(--w-500);
+}
+</style>

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

@@ -220,7 +220,7 @@ export default {
   }
 
   .user-online-status--busy {
-    background: var(--y-700);
+    background: var(--y-500);
   }
 
   .user-online-status--offline {

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

@@ -1,16 +1,29 @@
 <template>
   <div class="audio-wave-wrapper">
-    <div id="audio-wave"></div>
+    <audio id="audio-wave" class="video-js vjs-fill vjs-default-skin" />
   </div>
 </template>
 
 <script>
-import WaveSurfer from 'wavesurfer.js';
+import 'video.js/dist/video-js.css';
-import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+import 'videojs-record/dist/css/videojs.record.css';
-import RecordRTC from 'recordrtc';
+
+import videojs from 'video.js';
+
 import inboxMixin from '../../../../shared/mixins/inboxMixin';
 import alertMixin from '../../../../shared/mixins/alertMixin';
 
+import Recorder from 'opus-recorder';
+import encoderWorker from 'opus-recorder/dist/encoderWorker.min';
+
+import WaveSurfer from 'wavesurfer.js';
+import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+import 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
+
+import 'videojs-record/dist/videojs.record.js';
+import 'videojs-record/dist/plugins/videojs.record.opus-recorder.js';
+import { format, addSeconds } from 'date-fns';
+
 WaveSurfer.microphone = MicrophonePlugin;
 
 export default {
@@ -18,104 +31,116 @@ export default {
   mixins: [inboxMixin, alertMixin],
   data() {
     return {
-      wavesurfer: false,
+      player: false,
-      recorder: false,
+      recordingDateStarted: new Date(0),
-      recordingInterval: false,
-      recordingDateStarted: new Date().getTime(),
-      timeDuration: '00:00',
       initialTimeDuration: '00:00',
-      options: {
+      recorderOptions: {
-        container: '#audio-wave',
+        debug: true,
-        backend: 'WebAudio',
+        controls: true,
-        interact: true,
+        bigPlayButton: false,
-        cursorWidth: 1,
+        fluid: false,
-        plugins: [
+        controlBar: {
-          WaveSurfer.microphone.create({
+          deviceButton: false,
-            bufferSize: 4096,
+          fullscreenToggle: false,
-            numberOfInputChannels: 1,
+          cameraButton: false,
-            numberOfOutputChannels: 1,
+          volumePanel: false,
-            constraints: {
+        },
-              video: false,
+        plugins: {
-              audio: true,
+          wavesurfer: {
-            },
+            backend: 'WebAudio',
-          }),
+            waveColor: '#1f93ff',
-        ],
+            progressColor: 'rgb(25, 118, 204)',
-      },
+            cursorColor: 'rgba(43, 51, 63, 0.7)',
-      optionsRecorder: {
+            backgroundColor: 'none',
-        type: 'audio',
+            barWidth: 1,
-        mimeType: 'audio/wav',
+            cursorWidth: 1,
-        disableLogs: true,
+            hideScrollbar: true,
-        recorderType: RecordRTC.StereoAudioRecorder,
+            plugins: [
-        sampleRate: 44100,
+              WaveSurfer.microphone.create({
-        numberOfAudioChannels: 2,
+                bufferSize: 4096,
-        checkForInactiveTracks: true,
+                numberOfInputChannels: 1,
-        bufferSize: 4096,
+                numberOfOutputChannels: 1,
+                constraints: {
+                  video: false,
+                  audio: true,
+                },
+              }),
+            ],
+          },
+          record: {
+            audio: true,
+            video: false,
+            displayMilliseconds: false,
+            maxLength: 300,
+            audioEngine: 'opus-recorder',
+            audioWorkerURL: encoderWorker,
+            audioChannels: 1,
+            audioSampleRate: 48000,
+            audioBitRate: 128,
+          },
+        },
       },
     };
   },
   computed: {
     isRecording() {
-      if (this.recorder) {
+      return this.player && this.player.record().isRecording();
-        return this.recorder.getState() === 'recording';
-      }
-      return false;
     },
   },
   mounted() {
-    this.wavesurfer = WaveSurfer.create(this.options);
+    window.Recorder = Recorder;
-    this.wavesurfer.on('play', this.playingRecorder);
+    this.fireProgressRecord(this.initialTimeDuration);
-    this.wavesurfer.on('pause', this.pausedRecorder);
+    this.player = videojs('#audio-wave', this.recorderOptions, () => {
-    this.wavesurfer.microphone.on('deviceReady', this.startRecording);
+      this.$nextTick(() => {
-    this.wavesurfer.microphone.on('deviceError', this.deviceError);
+        this.player.record().getDevice();
-    this.wavesurfer.microphone.start();
+      });
-    this.fireStateRecorderTimerChanged(this.initialTimeDuration);
+    });
+    this.player.on('deviceReady', this.deviceReady);
+    this.player.on('deviceError', this.deviceError);
+    this.player.on('startRecord', this.startRecord);
+    this.player.on('stopRecord', this.stopRecord);
+    this.player.on('progressRecord', this.progressRecord);
+    this.player.on('finishRecord', this.finishRecord);
+    this.player.on('playbackFinish', this.playbackFinish);
   },
   beforeDestroy() {
-    if (this.recorder) {
+    if (this.player) {
-      this.recorder.destroy();
+      this.player.dispose();
     }
-    if (this.wavesurfer) {
+    if (window.Recorder) {
-      this.wavesurfer.destroy();
+      window.Recorder = undefined;
     }
   },
   methods: {
-    startRecording(stream) {
+    deviceReady() {
-      this.recorder = RecordRTC(stream, this.optionsRecorder);
+      this.player.record().start();
-      this.recorder.onStateChanged = this.onStateRecorderChanged;
+    },
-      this.recorder.startRecording();
+    startRecord() {
+      this.fireStateRecorderChanged('recording');
+    },
+    stopRecord() {
+      this.fireStateRecorderChanged('stopped');
+    },
+    finishRecord() {
+      const file = new File(
+        [this.player.recordedData],
+        this.player.recordedData.name,
+        { type: this.player.recordedData.type }
+      );
+      this.fireRecorderBlob(file);
+    },
+    progressRecord() {
+      this.fireProgressRecord(this.formatTimeProgress());
     },
     stopAudioRecording() {
-      if (this.isRecording) {
+      this.player.record().stop();
-        this.recorder.stopRecording(() => {
-          this.wavesurfer.microphone.stopDevice();
-          this.wavesurfer.loadBlob(this.recorder.getBlob());
-          this.wavesurfer.stop();
-          this.fireRecorderBlob(this.getAudioFile());
-        });
-      }
     },
-    getAudioFile() {
+    deviceError() {
-      if (this.hasAudio()) {
+      const deviceError = this.player.deviceErrorCode;
-        return new File([this.recorder.getBlob()], this.getAudioFileName(), {
+      const deviceErrorName = deviceError?.name.toLowerCase();
-          type: 'audio/wav',
-        });
-      }
-      return false;
-    },
-    hasAudio() {
-      return !(this.isRecording || this.wavesurfer.isPlaying());
-    },
-    playingRecorder() {
-      this.fireStateRecorderChanged('playing');
-    },
-    pausedRecorder() {
-      this.fireStateRecorderChanged('paused');
-    },
-    deviceError(err) {
       if (
-        err?.name &&
+        deviceErrorName?.includes('notallowederror') ||
-        (err.name.toLowerCase().includes('notallowederror') ||
+        deviceErrorName?.includes('permissiondeniederror')
-          err.name.toLowerCase().includes('permissiondeniederror'))
       ) {
         this.showAlert(
           this.$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_PERMISSION')
@@ -127,56 +152,37 @@ export default {
         );
       }
     },
-    onStateRecorderChanged(state) {
+    formatTimeProgress() {
-      // recording stopped inactive destroyed
+      return format(
-      switch (state) {
+        addSeconds(
-        case 'recording':
+          new Date(this.recordingDateStarted.getTimezoneOffset() * 1000 * 60),
-          this.timerDurationChanged();
+          this.player.record().getDuration()
-          break;
+        ),
-        case 'stopped':
+        'mm:ss'
-          this.timerDurationChanged();
+      );
-          break;
-        default:
-          break;
-      }
-      this.fireStateRecorderChanged(state);
-    },
-    timerDurationChanged() {
-      if (this.isRecording) {
-        this.recordingInterval = setInterval(() => {
-          this.calculateTimeDuration(
-            (new Date().getTime() - this.recordingDateStarted) / 1000
-          );
-          this.fireStateRecorderTimerChanged(this.timeDuration);
-        }, 1000);
-      } else {
-        clearInterval(this.recordingInterval);
-      }
-    },
-    calculateTimeDuration(secs) {
-      let hr = Math.floor(secs / 3600);
-      let min = Math.floor((secs - hr * 3600) / 60);
-      let sec = Math.floor(secs - hr * 3600 - min * 60);
-      if (min < 10) {
-        min = '0' + min;
-      }
-      if (sec < 10) {
-        sec = '0' + sec;
-      }
-      if (hr <= 0) {
-        this.timeDuration = min + ':' + sec;
-      } else {
-        if (hr < 10) {
-          hr = '0' + hr;
-        }
-        this.timeDuration = hr + ':' + min + ':' + sec;
-      }
     },
     playPause() {
-      this.wavesurfer.playPause();
+      if (this.player.wavesurfer().surfer.isPlaying()) {
+        this.fireStateRecorderChanged('paused');
+      } else {
+        this.fireStateRecorderChanged('playing');
+      }
+      this.player.wavesurfer().surfer.playPause();
+    },
+    play() {
+      this.fireStateRecorderChanged('playing');
+      this.player.wavesurfer().play();
+    },
+    pause() {
+      this.fireStateRecorderChanged('paused');
+      this.player.wavesurfer().pause();
+    },
+    playbackFinish() {
+      this.fireStateRecorderChanged('paused');
+      this.player.wavesurfer().pause();
     },
     fireRecorderBlob(blob) {
-      this.$emit('recorder-blob', {
+      this.$emit('finish-record', {
         name: blob.name,
         type: blob.type,
         size: blob.size,
@@ -186,29 +192,8 @@ export default {
     fireStateRecorderChanged(state) {
       this.$emit('state-recorder-changed', state);
     },
-    fireStateRecorderTimerChanged(duration) {
+    fireProgressRecord(duration) {
-      this.$emit('state-recorder-timer-changed', duration);
+      this.$emit('state-recorder-progress-changed', duration);
-    },
-    getAudioFileName() {
-      const d = new Date();
-      return `audio-${d.getFullYear()}-${d.getMonth()}-${d.getDate()}-${this.getRandomString()}.wav`;
-    },
-    getRandomString() {
-      if (
-        window.crypto &&
-        window.crypto.getRandomValues &&
-        navigator.userAgent.indexOf('Safari') === -1
-      ) {
-        let a = window.crypto.getRandomValues(new Uint32Array(3));
-        let token = '';
-        for (let i = 0, l = a.length; i < l; i += 1) {
-          token += a[i].toString(36);
-        }
-        return token.toLowerCase();
-      }
-      return (Math.random() * new Date().getTime())
-        .toString(36)
-        .replace(/\./g, '');
     },
   },
 };
@@ -217,7 +202,9 @@ export default {
 <style lang="scss">
 .audio-wave-wrapper {
   min-height: 8rem;
-  max-height: 12rem;
+  height: 8rem;
-  overflow: hidden;
+}
+.video-js .vjs-control-bar {
+  background-color: transparent;
 }
 </style>

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

@@ -10,7 +10,7 @@
       :search-key="cannedSearchTerm"
       @click="insertCannedResponse"
     />
-    <div ref="editor"></div>
+    <div ref="editor" />
   </div>
 </template>
 

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

@@ -79,6 +79,16 @@
         :title="signatureToggleTooltip"
         @click="toggleMessageSignature"
       />
+      <woot-button
+        v-if="hasWhatsappTemplates"
+        v-tooltip.top-end="'Whatsapp Templates'"
+        icon="whatsapp"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        :title="'Whatsapp Templates'"
+        @click="$emit('selectWhatsappTemplate')"
+      />
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
@@ -218,6 +228,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    hasWhatsappTemplates: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
     isNote() {