Running version

The system did not detect the delivery errors earlier, resulting in some false positives. The user was not informed when an email failed to be delivered. While we do handle failure status in other channels, we were not able to capture the actual delivery status for the email channel.

This pull request makes the following changes:

- Updated the class EmailReplyWorker to use the deliver_now method instead of deliver_later. This change is made to raise any errors that may occur with the SMTP connection. The errors are then captured and sent to Sentry, and the email is marked as failed. Previously, we did not consider the case of retries in the email channel, so this feature is currently not functioning. So, I have disabled the retry option. We will address this in a follow-up ticket.
- Downgraded the net-smtp gem to version 0.3.4. This change is made to avoid an argument error when using XOAUTH2.

Fixes: https://linear.app/chatwoot/issue/CW-3032/argumenterror-wrong-authentication-type-xoauth2-argumenterror

.circleci/config.yml

@@ -74,7 +74,7 @@ jobs:
           name: yarn
           command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
 
-      # Store yarn / webpacker cache
+      # Store yarn cache
       - save_cache:
           key: chatwoot-yarn-{{ .Environment.CACHE_VERSION }}-{{ checksum "yarn.lock" }}
           paths:

.devcontainer/Dockerfile.base

@@ -1,10 +1,14 @@
 
-ARG VARIANT=ubuntu-20.04
+ARG VARIANT
-FROM mcr.microsoft.com/vscode/devcontainers/base:${VARIANT}
+
+FROM mcr.microsoft.com/vscode/devcontainers/base:0-${VARIANT}
+
+ARG NODE_VERSION
+ARG RUBY_VERSION
+ARG USER_UID
+ARG USER_GID
 
 # Update args in docker-compose.yaml to set the UID/GID of the "vscode" user.
-ARG USER_UID=1000
-ARG USER_GID=$USER_UID
 RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         groupmod --gid $USER_GID vscode \
         && usermod --uid $USER_UID --gid $USER_GID vscode \
@@ -27,10 +31,10 @@ RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
     tmux \
     zsh \
     git-flow \
-    npm
+    npm \
+    libyaml-dev
 
 # Install rbenv and ruby
-ARG RUBY_VERSION="3.2.2"
 RUN git clone https://github.com/rbenv/rbenv.git ~/.rbenv \
     &&  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc \
     &&  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
@@ -65,8 +69,7 @@ COPY Gemfile Gemfile.lock ./
 RUN gem install bundler && bundle install
 
 # set up node js
-RUN npm install npm@latest -g && \
+RUN npm install n -g && \
-    npm install n -g && \
+    n $NODE_VERSION
-    n latest
 RUN npm install --global yarn
 RUN yarn

.devcontainer/docker-compose.yml

@@ -5,19 +5,30 @@
 version: '3'
 
 services:
+  base: 
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.base
+      args:
+        VARIANT: "ubuntu-22.04"
+        NODE_VERSION: "20.9.0"
+        RUBY_VERSION: "3.2.2"
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: "1000"
+        USER_GID: "1000"
+    image: base:latest
+        
   app:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile
       args:
-        # Update 'VARIANT' to pick a Ruby version: https://github.com/microsoft/vscode-dev-containers/tree/main/containers/ruby
+        VARIANT: "ubuntu-22.04"
-        VARIANT: 3
+        NODE_VERSION: "20.9.0"
-        # [Choice] Install Node.js
+        RUBY_VERSION: "3.2.2"
-        INSTALL_NODE: "true"
-        NODE_VERSION: "lts/*"
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: 1000
+        USER_UID: "1000"
-        USER_GID: 1000
+        USER_GID: "1000"
 
     volumes:
       - ..:/workspace:cached
@@ -53,4 +64,3 @@ services:
 volumes:
   postgres-data:
   redis-data:
-  

.devcontainer/scripts/setup.sh

@@ -3,10 +3,10 @@ sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
 sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
 sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.dev/" .env
-sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
+sed -i -e "/DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
-# uncomment the webpacker env variable
+# uncomment the dev server env variable
-sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
+sed -i -e '/DEV_SERVER_PUBLIC/s/^# //' .env
-# fix the error with webpacker
+# fix the error with dev server
 echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
 
 # codespaces make the ports public

.env.example

@@ -223,7 +223,7 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # if you want to use letter_opener for local emails
 # LETTER_OPENER=true
 # meant to be used in github codespaces
-# WEBPACKER_DEV_SERVER_PUBLIC=
+# DEV_SERVER_PUBLIC=
 
 # If you want to use official mobile app,
 # the notifications would be relayed via a Chatwoot server

.eslintrc.js

@@ -7,11 +7,10 @@ module.exports = {
     'plugin:cypress/recommended',
   ],
   parserOptions: {
-    parser: '@babel/eslint-parser',
+    ecmaVersion: 2022,
-    ecmaVersion: 2020,
     sourceType: 'module',
   },
-  plugins: ['html', 'prettier', 'babel'],
+  plugins: ['html', 'prettier'],
   rules: {
     'prettier/prettier': ['error'],
     camelcase: 'off',
@@ -56,13 +55,6 @@ module.exports = {
     'import/extensions': ['off'],
     'no-console': 'error',
   },
-  settings: {
-    'import/resolver': {
-      webpack: {
-        config: 'config/webpack/resolve.js',
-      },
-    },
-  },
   env: {
     browser: true,
     jest: true,

.github/workflows/publish_codespace_image.yml

@@ -19,5 +19,6 @@ jobs:
 
     - name: Build the Codespace Base Image
       run: |
-        docker build . -t ghcr.io/chatwoot/chatwoot_codespace:latest -f .devcontainer/Dockerfile.base 
+        docker-compose -f .devcontainer/docker-compose.yml build base
+        docker tag base:latest ghcr.io/chatwoot/chatwoot_codespace:latest
         docker push ghcr.io/chatwoot/chatwoot_codespace:latest

.gitignore

@@ -76,3 +76,11 @@ yarn-debug.log*
 .yarn-integrity
 
 /storybook-static
+
+# Vite Ruby
+/public/vite*
+node_modules
+# Vite uses dotenv and suggests to ignore local-only env files. See
+# https://vitejs.dev/guide/env-and-mode.html#env-files
+*.local
+

.storybook/preview.js

@@ -2,7 +2,6 @@ import { addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
-import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
@@ -14,7 +13,6 @@ import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
 Vue.use(VueI18n);
-Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
 Vue.use(VueDOMPurifyHTML, domPurifyConfig);
@@ -32,7 +30,7 @@ addDecorator(() => ({
   template: '<story/>',
   i18n: i18nConfig,
   store,
-  beforeCreate: function() {
+  beforeCreate: function () {
     this.$root._i18n = this.$i18n;
   },
 }));

Gemfile

@@ -39,6 +39,8 @@ gem 'rack-attack', '>= 6.7.0'
 gem 'down'
 # authentication type to fetch and send mail over oauth2.0
 gem 'gmail_xoauth'
+# Lock net-smtp to 0.3.4 to avoid issues with gmail_xoauth2
+gem 'net-smtp',  '~> 0.3.4'
 # Prevent CSV injection
 gem 'csv-safe'
 
@@ -62,7 +64,7 @@ gem 'activerecord-import'
 gem 'dotenv-rails'
 gem 'foreman'
 gem 'puma'
-gem 'webpacker'
+gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
 
@@ -74,9 +76,9 @@ gem 'devise_token_auth'
 gem 'jwt'
 gem 'pundit'
 # super admin
-gem 'administrate', '>= 0.19.0'
+gem 'administrate', '>= 0.20.1'
-gem 'administrate-field-active_storage'
+gem 'administrate-field-active_storage', '>= 1.0.1'
-gem 'administrate-field-belongs_to_search'
+gem 'administrate-field-belongs_to_search', '>= 0.9.0'
 
 ##--- gems for pubsub service ---##
 # https://karolgalanciak.com/blog/2019/11/30/from-activerecord-callbacks-to-publish-slash-subscribe-pattern-and-event-driven-design/
@@ -109,14 +111,14 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.13.0', require: false
+gem 'sentry-rails', '>= 5.14.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.13.0', require: false
+gem 'sentry-sidekiq', '>= 5.14.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq', '>= 7.1.3'
+gem 'sidekiq', '>= 7.2.1'
 # We want cron jobs
-gem 'sidekiq-cron', '>= 1.11.0'
+gem 'sidekiq-cron', '>= 1.12.0'
 
 ##-- Push notification service --##
 gem 'fcm'
@@ -162,7 +164,7 @@ gem 'omniauth-oauth2'
 gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
-gem 'omniauth'
+gem 'omniauth', '>= 2.1.2'
 gem 'omniauth-google-oauth2'
 gem 'omniauth-rails_csrf_protection', '~> 1.0'
 
@@ -198,7 +200,7 @@ group :development do
   gem 'squasher'
 
   # profiling
-  gem 'rack-mini-profiler', '>= 3.1.1', require: false
+  gem 'rack-mini-profiler', '>= 3.2.0', require: false
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
   gem 'meta_request'
@@ -224,7 +226,7 @@ group :development, :test do
   gem 'byebug', platform: :mri
   gem 'climate_control'
   gem 'debug', '~> 1.8'
-  gem 'factory_bot_rails'
+  gem 'factory_bot_rails', '>= 6.4.3'
   gem 'listen'
   gem 'mock_redis'
   gem 'pry-rails'

Gemfile.lock

@@ -105,21 +105,21 @@ GEM
       activerecord (>= 6.0, < 7.1)
     addressable (2.8.4)
       public_suffix (>= 2.0.2, < 6.0)
-    administrate (0.19.0)
+    administrate (0.20.1)
-      actionpack (>= 5.0)
+      actionpack (>= 6.0, < 8.0)
-      actionview (>= 5.0)
+      actionview (>= 6.0, < 8.0)
-      activerecord (>= 5.0)
+      activerecord (>= 6.0, < 8.0)
-      jquery-rails (>= 4.0)
+      jquery-rails (~> 4.6.0)
-      kaminari (>= 1.0)
+      kaminari (~> 1.2.2)
       sassc-rails (~> 2.1)
       selectize-rails (~> 0.6)
-    administrate-field-active_storage (0.4.2)
+    administrate-field-active_storage (1.0.1)
       administrate (>= 0.2.2)
       rails (>= 7.0)
-    administrate-field-belongs_to_search (0.8.0)
+    administrate-field-belongs_to_search (0.9.0)
       administrate (>= 0.3, < 1.0)
       jbuilder (~> 2)
-      rails (>= 4.2, < 7.1)
+      rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
@@ -169,7 +169,7 @@ GEM
     climate_control (1.2.0)
     coderay (1.1.3)
     commonmarker (0.23.10)
-    concurrent-ruby (1.2.2)
+    concurrent-ruby (1.2.3)
     connection_pool (2.4.1)
     crack (0.4.5)
       rexml
@@ -183,7 +183,7 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.3.3)
+    date (3.3.4)
     ddtrace (1.11.1)
       debase-ruby_core_source (>= 0.10.16, <= 3.2.0)
       libdatadog (~> 2.0.0.1.0)
@@ -216,6 +216,7 @@ GEM
       railties (>= 3.2)
     down (5.4.0)
       addressable (~> 2.8)
+    dry-cli (1.0.0)
     ecma-re-validator (0.4.0)
       regexp_parser (~> 2.2)
     elastic-apm (4.6.2)
@@ -230,10 +231,10 @@ GEM
     facebook-messenger (2.0.1)
       httparty (~> 0.13, >= 0.13.7)
       rack (>= 1.4.5)
-    factory_bot (6.2.1)
+    factory_bot (6.4.5)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.2.0)
+    factory_bot_rails (6.4.3)
-      factory_bot (~> 6.2.0)
+      factory_bot (~> 6.4)
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
@@ -256,7 +257,7 @@ GEM
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
       googleauth (~> 1)
-    ffi (1.15.5)
+    ffi (1.16.3)
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
@@ -440,7 +441,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.21.4)
+    loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -461,7 +462,7 @@ GEM
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     mini_portile2 (2.8.5)
-    minitest (5.20.0)
+    minitest (5.21.2)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -472,14 +473,14 @@ GEM
       activerecord (>= 5.2)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.3.7)
+    net-imap (0.4.9)
       date
       net-protocol
     net-pop (0.1.2)
       net-protocol
-    net-protocol (0.2.1)
+    net-protocol (0.2.2)
       timeout
-    net-smtp (0.3.3)
+    net-smtp (0.3.4)
       net-protocol
     netrc (0.11.0)
     newrelic-sidekiq-metrics (1.6.2)
@@ -487,15 +488,15 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.5.9)
+    nio4r (2.7.0)
-    nokogiri (1.15.4)
+    nokogiri (1.16.0)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.15.4-arm64-darwin)
+    nokogiri (1.16.0-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-darwin)
+    nokogiri (1.16.0-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.4-x86_64-linux)
+    nokogiri (1.16.0-x86_64-linux)
       racc (~> 1.4)
     numo-narray (0.9.2.1)
     oauth (1.1.0)
@@ -511,7 +512,7 @@ GEM
       rack (>= 1.2, < 4)
       snaky_hash (~> 2.0)
       version_gem (~> 1.1)
-    omniauth (2.1.1)
+    omniauth (2.1.2)
       hashie (>= 3.4.6)
       rack (>= 2.2.3)
       rack-protection
@@ -553,7 +554,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (5.0.1)
-    puma (6.3.1)
+    puma (6.4.2)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
@@ -566,11 +567,11 @@ GEM
       rack (< 4)
     rack-cors (2.0.1)
       rack (>= 2.0.0)
-    rack-mini-profiler (3.1.1)
+    rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (3.0.6)
+    rack-protection (3.1.0)
-      rack
+      rack (~> 2.2, >= 2.2.4)
-    rack-proxy (0.7.6)
+    rack-proxy (0.7.7)
       rack
     rack-test (2.1.0)
       rack (>= 1.3)
@@ -610,7 +611,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.18.0)
+    redis-client (0.19.1)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -708,24 +709,23 @@ GEM
       activerecord (>= 4)
       activesupport (>= 4)
     selectize-rails (0.12.6)
-    semantic_range (3.0.0)
+    sentry-rails (5.14.0)
-    sentry-rails (5.13.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.13.0)
+      sentry-ruby (~> 5.14.0)
-    sentry-ruby (5.13.0)
+    sentry-ruby (5.14.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.13.0)
+    sentry-sidekiq (5.14.0)
-      sentry-ruby (~> 5.13.0)
+      sentry-ruby (~> 5.14.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.2.0)
+    sidekiq (7.2.1)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
-      redis-client (>= 0.14.0)
+      redis-client (>= 0.19.0)
-    sidekiq-cron (1.11.0)
+    sidekiq-cron (1.12.0)
       fugit (~> 1.8)
       globalid (>= 1.0.1)
       sidekiq (>= 6)
@@ -752,7 +752,7 @@ GEM
     spring-watcher-listen (2.1.0)
       listen (>= 2.7, < 4.0)
       spring (>= 4)
-    sprockets (4.2.0)
+    sprockets (4.2.1)
       concurrent-ruby (~> 1.0)
       rack (>= 2.2.4, < 4)
     sprockets-rails (3.4.2)
@@ -766,11 +766,11 @@ GEM
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.3.0)
-    tilt (2.2.0)
+    tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.0)
+    timeout (0.4.1)
     trailblazer-option (0.1.2)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
@@ -795,6 +795,13 @@ GEM
       activemodel (>= 3.2)
       mail (~> 2.5)
     version_gem (1.1.2)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
+      vite_ruby (~> 3.0, >= 3.2.2)
+    vite_ruby (3.5.0)
+      dry-cli (>= 0.7, < 2)
+      rack-proxy (~> 0.6, >= 0.6.1)
+      zeitwerk (~> 2.2)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.1)
@@ -810,11 +817,6 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.4)
-      activesupport (>= 5.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 5.2)
-      semantic_range (>= 2.3.0)
     webrick (1.8.1)
     websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
@@ -840,9 +842,9 @@ DEPENDENCIES
   active_record_query_trace
   activerecord-import
   acts-as-taggable-on
-  administrate (>= 0.19.0)
+  administrate (>= 0.20.1)
-  administrate-field-active_storage
+  administrate-field-active_storage (>= 1.0.1)
-  administrate-field-belongs_to_search
+  administrate-field-belongs_to_search (>= 0.9.0)
   annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -870,7 +872,7 @@ DEPENDENCIES
   elastic-apm
   email_reply_trimmer
   facebook-messenger
-  factory_bot_rails
+  factory_bot_rails (>= 6.4.3)
   faker
   fcm
   flag_shih_tzu
@@ -903,9 +905,10 @@ DEPENDENCIES
   meta_request
   mock_redis
   neighbor
+  net-smtp (~> 0.3.4)
   newrelic-sidekiq-metrics (>= 1.6.2)
   newrelic_rpm
-  omniauth
+  omniauth (>= 2.1.2)
   omniauth-google-oauth2
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0)
@@ -918,7 +921,7 @@ DEPENDENCIES
   pundit
   rack-attack (>= 6.7.0)
   rack-cors
-  rack-mini-profiler (>= 3.1.1)
+  rack-mini-profiler (>= 3.2.0)
   rack-timeout
   rails (~> 7.0.8.0)
   redis
@@ -935,12 +938,12 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.13.0)
+  sentry-rails (>= 5.14.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.13.0)
+  sentry-sidekiq (>= 5.14.0)
   shoulda-matchers
-  sidekiq (>= 7.1.3)
+  sidekiq (>= 7.2.1)
-  sidekiq-cron (>= 1.11.0)
+  sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.2.0)
   spring
@@ -956,10 +959,10 @@ DEPENDENCIES
   tzinfo-data
   uglifier
   valid_email2
+  vite_rails
   web-console (>= 4.2.1)
   web-push
   webmock
-  webpacker
   wisper (= 2.0.0)
   working_hours
 

Procfile.dev

@@ -1,4 +1,4 @@
 backend: bin/rails s -p 3000
-frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
 # https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
 worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
+frontend: bin/vite dev

Procfile.test

@@ -1,3 +1,3 @@
 backend: RAILS_ENV=test bin/rails s -p 5050
-frontend: export NODE_OPTIONS=--openssl-legacy-provider && bin/webpack-dev-server
+frontend: bin/vite
 worker: RAILS_ENV=test dotenv bundle exec sidekiq -C config/sidekiq.yml

README.md

@@ -118,4 +118,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>
 
 
-*Chatwoot* &copy; 2017-2023, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2024, Chatwoot Inc - Released under the MIT License.

VERSION_CW

@@ -1 +1 @@
-3.1.0
+3.3.1

VERSION_CWCTL

@@ -1 +1 @@
-2.6.0
+2.7.0

app/actions/contact_identify_action.rb

@@ -104,7 +104,7 @@ class ContactIdentifyAction
     # TODO: replace reject { |_k, v| v.blank? } with compact_blank when rails is upgraded
     @contact.discard_invalid_attrs if discard_invalid_attrs
     @contact.save!
-    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present?
+    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present? && !@contact.avatar.attached?
   end
 
   def merge_contact(base_contact, merge_contact)

app/actions/contact_merge_action.rb

@@ -12,6 +12,7 @@ class ContactMergeAction
       merge_conversations
       merge_messages
       merge_contact_inboxes
+      merge_contact_notes
       merge_and_remove_mergee_contact
     end
     @base_contact
@@ -33,6 +34,10 @@ class ContactMergeAction
     Conversation.where(contact_id: @mergee_contact.id).update(contact_id: @base_contact.id)
   end
 
+  def merge_contact_notes
+    Note.where(contact_id: @mergee_contact.id, account_id: @mergee_contact.account_id).update(contact_id: @base_contact.id)
+  end
+
   def merge_messages
     Message.where(sender: @mergee_contact).update(sender: @base_contact)
   end

app/assets/stylesheets/administrate/application.scss

@@ -25,7 +25,6 @@
 @import 'components/flashes';
 @import 'components/form-actions';
 @import 'components/main-content';
-@import 'components/navigation';
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';

app/assets/stylesheets/administrate/base/_layout.scss

@@ -1,7 +1,7 @@
 html {
   background-color: $color-white;
   box-sizing: border-box;
-  font-size: 10px;
+  font-size: 16px;
   -webkit-font-smoothing: antialiased;
 }
 

app/assets/stylesheets/administrate/components/_attributes.scss

@@ -16,8 +16,8 @@
 .attribute-data {
   float: left;
   margin-bottom: $base-spacing;
-  margin-left: 2rem;
+  margin-left: 1.25rem;
-  width: calc(84% - 1rem);
+  width: calc(84% - 0.625rem);
 }
 
 .attribute--nested {

app/assets/stylesheets/administrate/components/_field-unit.scss

@@ -9,22 +9,22 @@
 
 .field-unit__label {
   float: left;
-  margin-left: 1rem;
+  margin-left: 0.625rem;
   text-align: right;
-  width: calc(15% - 1rem);
+  width: calc(15% - 0.625rem);
 }
 
 .field-unit__field {
   float: left;
-  margin-left: 2rem;
+  margin-left: 1.25rem;
-  max-width: 50rem;
+  max-width: 31.15rem;
   width: 100%;
 }
 
 .field-unit--nested {
   border: $base-border;
   margin-left: 7.5%;
-  max-width: 60rem;
+  max-width: 37.5rem;
   padding: $small-spacing;
   width: 100%;
 

app/assets/stylesheets/administrate/components/_form-actions.scss

@@ -1,3 +1,3 @@
 .form-actions {
-  margin-left: calc(15% + 2rem);
+  margin-left: calc(15% + 1.25rem);
 }

app/assets/stylesheets/administrate/components/_main-content.scss

@@ -13,6 +13,10 @@
   table {
     font-size: $font-size-small;
   }
+
+  form {
+    margin-top: $space-two;
+  }
 }
 
 .main-content__header {
@@ -20,7 +24,7 @@
   background-color: $color-white;
   border-bottom: 1px solid $color-border;
   display: flex;
-  min-height: 5.6rem;
+  min-height: 3.5rem;
   padding: $space-small $space-normal;
 }
 

app/assets/stylesheets/administrate/components/_navigation.scss

@@ -1,88 +0,0 @@
-.logo-brand {
-  margin-bottom: $space-normal;
-  padding: $space-normal $space-smaller $space-small;
-  text-align: left;
-
-  img {
-    margin-bottom: $space-smaller;
-    max-height: 3rem;
-  }
-}
-
-.navigation {
-  background: $white;
-  border-right: 1px solid $color-border;
-  display: flex;
-  flex-direction: column;
-  font-size: $font-size-default;
-  font-weight: $font-weight-medium;
-  height: 100%;
-  justify-content: flex-start;
-  left: 0;
-  margin: 0;
-  overflow: auto;
-  padding: $space-normal;
-  position: fixed;
-  top: 0;
-  width: 21rem;
-  z-index: 1023;
-
-  li {
-    align-items: center;
-    display: flex;
-    font-size: $font-size-small;
-
-    a {
-      color: $color-gray;
-      text-decoration: none;
-    }
-
-    i {
-      min-width: $space-medium;
-    }
-  }
-
-  hr {
-    margin: $space-slab;
-  }
-}
-
-.navigation__link {
-  background-color: transparent;
-  color: $color-gray;
-  display: block;
-  line-height: 1;
-  margin-bottom: $space-smaller;
-  padding: $space-small;
-
-  &:hover {
-    color: $blue;
-
-    a {
-      color: $blue;
-    }
-  }
-
-
-  &.navigation__link--active {
-    background-color: $color-background;
-    border-radius: $base-border-radius;
-    color: $blue;
-
-    a {
-      color: $blue;
-    }
-  }
-}
-
-.logout {
-  bottom: $space-normal;
-  left: $space-normal;
-  position: fixed;
-}
-
-.app-version {
-  color: $color-gray;
-  font-size: $font-size-small;
-  padding-top: $space-smaller;
-}

app/assets/stylesheets/administrate/components/_search.scss

@@ -1,7 +1,7 @@
 .search {
   margin-left: auto;
-  margin-right: 2rem;
+  margin-right: 1.25rem;
-  max-width: 44rem;
+  max-width: 27.5rem;
   position: relative;
   width: 100%;
 }

app/assets/stylesheets/administrate/library/_variables.scss

@@ -1,10 +1,10 @@
 // Typography
-$base-font-family: PlusJakarta, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+$base-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
   "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif !default;
 $heading-font-family: $base-font-family !default;
 
-$base-font-size: 14px !default;
+$base-font-size: 16px !default;
 
 $base-line-height: 1.5 !default;
 $heading-line-height: 1.2 !default;

app/assets/stylesheets/administrate/utilities/_variables.scss

@@ -1,30 +1,30 @@
 // Font sizes
-$font-size-nano: 0.8rem;
+$font-size-nano: 0.5rem;
-$font-size-micro: 1.0rem;
+$font-size-micro: 0.675rem;
-$font-size-mini: 1.2rem;
+$font-size-mini: 0.75rem;
-$font-size-small: 1.4rem;
+$font-size-small: 0.875rem;
-$font-size-default: 1.6rem;
+$font-size-default: 1rem;
-$font-size-medium: 1.8rem;
+$font-size-medium: 1.125rem;
-$font-size-large: 2.2rem;
+$font-size-large: 1.375rem;
-$font-size-big: 2.4rem;
+$font-size-big: 1.5rem;
-$font-size-bigger: 3.0rem;
+$font-size-bigger: 1.75rem;
-$font-size-mega: 3.4rem;
+$font-size-mega: 2.125rem;
-$font-size-giga: 4.0rem;
+$font-size-giga: 2.5rem;
 
 // spaces
 $zero: 0;
-$space-micro: 0.2rem;
+$space-micro: 0.125rem;
-$space-smaller: 0.4rem;
+$space-smaller: 0.25rem;
-$space-small: 0.8rem;
+$space-small: 0.5rem;
-$space-one: 1rem;
+$space-one: 0.675rem;
-$space-slab: 1.2rem;
+$space-slab: 0.75rem;
-$space-normal: 1.6rem;
+$space-normal: 1rem;
-$space-two: 2.0rem;
+$space-two: 1.25rem;
-$space-medium: 2.4rem;
+$space-medium: 1.5rem;
-$space-large: 3.2rem;
+$space-large: 2rem;
-$space-larger: 4.8rem;
+$space-larger: 3rem;
-$space-jumbo: 6.4rem;
+$space-jumbo: 4rem;
-$space-mega: 10.0rem;
+$space-mega: 6.25rem;
 
 // font-weight
 $font-weight-feather: 100;
@@ -86,8 +86,5 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-timing-function: cubic-bezier(.25, .8, .25, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
 
-// Ionicons
-$ionicons-font-path: '~ionicons/fonts';
-
 // Transitions
 $transition-ease-in: all 0.250s ease-in;

app/builders/messages/facebook/message_builder.rb

@@ -25,7 +25,9 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
       build_contact_inbox
       build_message
     end
-  rescue Koala::Facebook::AuthenticationError
+  rescue Koala::Facebook::AuthenticationError => e
+    Rails.logger.warn("Facebook authentication error for inbox: #{@inbox.id} with error: #{e.message}")
+    Rails.logger.error e
     @inbox.channel.authorization_error!
   rescue StandardError => e
     ChatwootExceptionTracker.new(e, account: @inbox.account).capture_exception
@@ -108,11 +110,15 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
     }
   end
 
+  # rubocop:disable Metrics/AbcSize
+  # rubocop:disable Metrics/MethodLength
   def contact_params
     begin
       k = Koala::Facebook::API.new(@inbox.channel.page_access_token) if @inbox.facebook?
       result = k.get_object(@sender_id) || {}
-    rescue Koala::Facebook::AuthenticationError
+    rescue Koala::Facebook::AuthenticationError => e
+      Rails.logger.warn("Facebook authentication error for inbox: #{@inbox.id} with error: #{e.message}")
+      Rails.logger.error e
       @inbox.channel.authorization_error!
       raise
     rescue Koala::Facebook::ClientError => e
@@ -130,4 +136,6 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
     end
     process_contact_params_result(result)
   end
+  # rubocop:enable Metrics/AbcSize
+  # rubocop:enable Metrics/MethodLength
 end

app/builders/messages/instagram/message_builder.rb

@@ -20,7 +20,9 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     ActiveRecord::Base.transaction do
       build_message
     end
-  rescue Koala::Facebook::AuthenticationError
+  rescue Koala::Facebook::AuthenticationError => e
+    Rails.logger.warn("Instagram authentication error for inbox: #{@inbox.id} with error: #{e.message}")
+    Rails.logger.error e
     @inbox.channel.authorization_error!
     raise
   rescue StandardError => e
@@ -46,6 +48,10 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
     @outgoing_echo ? recipient_id : sender_id
   end
 
+  def message_is_unsupported?
+    message[:is_unsupported].present? && @messaging[:message][:is_unsupported] == true
+  end
+
   def sender_id
     @messaging[:sender][:id]
   end
@@ -116,7 +122,7 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def message_params
-    {
+    params = {
       account_id: conversation.account_id,
       inbox_id: conversation.inbox_id,
       message_type: message_type,
@@ -127,6 +133,9 @@ class Messages::Instagram::MessageBuilder < Messages::Messenger::MessageBuilder
         in_reply_to_external_id: message_reply_attributes
       }
     }
+
+    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
+    params
   end
 
   def already_sent_from_chatwoot?

app/builders/messages/message_builder.rb

@@ -149,7 +149,8 @@ class Messages::MessageBuilder
       content_type: @params[:content_type],
       items: @items,
       in_reply_to: @in_reply_to,
-      echo_id: @params[:echo_id]
+      echo_id: @params[:echo_id],
+      source_id: @params[:source_id]
     }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)
   end
 end

app/builders/notification_builder.rb

@@ -1,22 +1,20 @@
 class NotificationBuilder
-  pattr_initialize [:notification_type!, :user!, :account!, :primary_actor!]
+  pattr_initialize [:notification_type!, :user!, :account!, :primary_actor!, :secondary_actor]
 
   def perform
-    return unless user_subscribed_to_notification?
-
     build_notification
   end
 
   private
 
-  def secondary_actor
+  def current_user
     Current.user
   end
 
   def user_subscribed_to_notification?
     notification_setting = user.notification_settings.find_by(account_id: account.id)
     # added for the case where an assignee might be removed from the account but remains in conversation
-    return if notification_setting.blank?
+    return false if notification_setting.blank?
 
     return true if notification_setting.public_send("email_#{notification_type}?")
     return true if notification_setting.public_send("push_#{notification_type}?")
@@ -25,11 +23,15 @@ class NotificationBuilder
   end
 
   def build_notification
+    # Create conversation_creation notification only if user is subscribed to it
+    return if notification_type == 'conversation_creation' && !user_subscribed_to_notification?
+
     user.notifications.create!(
       notification_type: notification_type,
       account: account,
       primary_actor: primary_actor,
-      secondary_actor: secondary_actor
+      # secondary_actor is secondary_actor if present, else current_user
+      secondary_actor: secondary_actor || current_user
     )
   end
 end

app/builders/v2/report_builder.rb

@@ -46,6 +46,14 @@ class V2::ReportBuilder
     }
   end
 
+  def short_summary
+    {
+      conversations_count: conversations.count,
+      avg_first_response_time: avg_first_response_time_summary,
+      avg_resolution_time: avg_resolution_time_summary
+    }
+  end
+
   def conversation_metrics
     if params[:type].equal?(:account)
       live_conversations

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

@@ -10,11 +10,18 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
   def show; end
 
   def create
-    @agent_bot = Current.account.agent_bots.create!(permitted_params)
+    @agent_bot = Current.account.agent_bots.create!(permitted_params.except(:avatar_url))
+    process_avatar_from_url
   end
 
   def update
-    @agent_bot.update!(permitted_params)
+    @agent_bot.update!(permitted_params.except(:avatar_url))
+    process_avatar_from_url
+  end
+
+  def avatar
+    @agent_bot.avatar.purge if @agent_bot.avatar.attached?
+    @agent_bot
   end
 
   def destroy
@@ -30,6 +37,10 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:name, :description, :outgoing_url, :bot_type, bot_config: [:csml_content])
+    params.permit(:name, :description, :outgoing_url, :avatar, :avatar_url, :bot_type, bot_config: [:csml_content])
+  end
+
+  def process_avatar_from_url
+    ::Avatar::AvatarFromUrlJob.perform_later(@agent_bot, params[:avatar_url]) if params[:avatar_url].present?
   end
 end

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

@@ -83,14 +83,14 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
       @contact = Current.account.contacts.new(permitted_params.except(:avatar_url))
       @contact.save!
       @contact_inbox = build_contact_inbox
-      process_avatar
+      process_avatar_from_url
     end
   end
 
   def update
     @contact.assign_attributes(contact_update_params)
     @contact.save!
-    process_avatar if permitted_params[:avatar].present? || permitted_params[:avatar_url].present?
+    process_avatar_from_url
   end
 
   def destroy
@@ -174,7 +174,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     @contact = Current.account.contacts.includes(contact_inboxes: [:inbox]).find(params[:id])
   end
 
-  def process_avatar
+  def process_avatar_from_url
     ::Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present?
   end
 

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

@@ -14,7 +14,8 @@ class Api::V1::Accounts::Conversations::AssignmentsController < Api::V1::Account
 
   def set_agent
     @agent = Current.account.users.find_by(id: params[:assignee_id])
-    @conversation.update_assignee(@agent)
+    @conversation.assignee = @agent
+    @conversation.save!
     render_agent
   end
 

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

@@ -18,6 +18,15 @@ class Api::V1::Accounts::Conversations::MessagesController < Api::V1::Accounts::
     end
   end
 
+  def retry
+    return if message.blank?
+
+    message.update!(status: :sent, content_attributes: {})
+    ::SendReplyJob.perform_later(message.id)
+  rescue StandardError => e
+    render_could_not_create_error(e.message)
+  end
+
   def translate
     return head :ok if already_translated_content_available?
 

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

@@ -60,13 +60,26 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def toggle_status
-    if params[:status].present?
+    # FIXME: move this logic into a service object
+    if pending_to_open_by_bot?
+      @conversation.bot_handoff!
+    elsif params[:status].present?
       set_conversation_status
       @status = @conversation.save!
     else
       @status = @conversation.toggle_status
     end
-    assign_conversation if @conversation.status == 'open' && Current.user.is_a?(User) && Current.user&.agent?
+    assign_conversation if should_assign_conversation?
+  end
+
+  def pending_to_open_by_bot?
+    return false unless Current.user.is_a?(AgentBot)
+
+    @conversation.status == 'pending' && params[:status] == 'open'
+  end
+
+  def should_assign_conversation?
+    @conversation.status == 'open' && Current.user.is_a?(User) && Current.user&.agent?
   end
 
   def toggle_priority
@@ -110,8 +123,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def assign_conversation
-    @agent = Current.account.users.find(current_user.id)
+    @conversation.assignee = current_user
-    @conversation.update_assignee(@agent)
+    @conversation.save!
   end
 
   def conversation

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

@@ -39,6 +39,8 @@ class Api::V1::Accounts::CustomAttributeDefinitionsController < Api::V1::Account
       :attribute_display_type,
       :attribute_key,
       :attribute_model,
+      :regex_pattern,
+      :regex_cue,
       attribute_values: []
     )
   end

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

@@ -1,14 +1,15 @@
 class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseController
   RESULTS_PER_PAGE = 15
+  include DateRangeHelper
 
-  before_action :fetch_notification, only: [:update]
+  before_action :fetch_notification, only: [:update, :destroy, :snooze]
   before_action :set_primary_actor, only: [:read_all]
   before_action :set_current_page, only: [:index]
 
   def index
-    @unread_count = current_user.notifications.where(account_id: current_account.id, read_at: nil).count
+    @unread_count = notification_finder.unread_count
-    @count = notifications.count
+    @notifications = notification_finder.perform
-    @notifications = notifications.page(@current_page).per(RESULTS_PER_PAGE)
+    @count = notification_finder.count
   end
 
   def read_all
@@ -28,11 +29,21 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
     render json: @notification
   end
 
+  def destroy
+    @notification.destroy
+    head :ok
+  end
+
   def unread_count
-    @unread_count = current_user.notifications.where(account_id: current_account.id, read_at: nil).count
+    @unread_count = notification_finder.unread_count
     render json: @unread_count
   end
 
+  def snooze
+    @notification.update(snoozed_until: parse_date_time(params[:snoozed_until].to_s)) if params[:snoozed_until]
+    render json: @notification
+  end
+
   private
 
   def set_primary_actor
@@ -50,7 +61,7 @@ class Api::V1::Accounts::NotificationsController < Api::V1::Accounts::BaseContro
     @current_page = params[:page] || 1
   end
 
-  def notifications
+  def notification_finder
-    @notifications ||= current_user.notifications.where(account_id: current_account.id)
+    @notification_finder ||= NotificationFinder.new(Current.user, Current.account, params)
   end
 end

app/controllers/concerns/access_token_auth_helper.rb

@@ -14,7 +14,14 @@ module AccessTokenAuthHelper
     render_unauthorized('Invalid Access Token') && return if @access_token.blank?
 
     @resource = @access_token.owner
-    Current.user = @resource if current_user.is_a?(User)
+    Current.user = @resource if allowed_current_user_type?(@resource)
+  end
+
+  def allowed_current_user_type?(resource)
+    return true if resource.is_a?(User)
+    return true if resource.is_a?(AgentBot)
+
+    false
   end
 
   def validate_bot_access_token!

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

@@ -9,13 +9,15 @@ class Platform::Api::V1::AgentBotsController < PlatformController
   def show; end
 
   def create
-    @resource = AgentBot.new(agent_bot_params)
+    @resource = AgentBot.new(agent_bot_params.except(:avatar_url))
     @resource.save!
+    process_avatar_from_url
     @platform_app.platform_app_permissibles.find_or_create_by(permissible: @resource)
   end
 
   def update
-    @resource.update!(agent_bot_params)
+    @resource.update!(agent_bot_params.except(:avatar_url))
+    process_avatar_from_url
   end
 
   def destroy
@@ -23,6 +25,11 @@ class Platform::Api::V1::AgentBotsController < PlatformController
     head :ok
   end
 
+  def avatar
+    @resource.avatar.purge if @resource.avatar.attached?
+    @resource
+  end
+
   private
 
   def set_resource
@@ -30,6 +37,10 @@ class Platform::Api::V1::AgentBotsController < PlatformController
   end
 
   def agent_bot_params
-    params.permit(:name, :description, :account_id, :outgoing_url)
+    params.permit(:name, :description, :account_id, :outgoing_url, :avatar, :avatar_url)
+  end
+
+  def process_avatar_from_url
+    ::Avatar::AvatarFromUrlJob.perform_later(@resource, params[:avatar_url]) if params[:avatar_url].present?
   end
 end

app/controllers/public/api/v1/portals/base_controller.rb

@@ -1,6 +1,7 @@
 class Public::Api::V1::Portals::BaseController < PublicController
   before_action :show_plain_layout
   before_action :set_color_scheme
+  before_action :set_global_config
   around_action :set_locale
   after_action :allow_iframe_requests
 
@@ -11,11 +12,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_color_scheme
-    @theme = if %w[dark light].include?(params[:theme])
+    @theme_from_params = params[:theme] if %w[dark light].include?(params[:theme])
-               params[:theme]
-             else
-               'system'
-             end
   end
 
   def portal
@@ -64,4 +61,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
     portal
     render 'public/api/v1/portals/error/404', status: :not_found
   end
+
+  def set_global_config
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL')
+  end
 end

app/controllers/super_admin/app_configs_controller.rb

@@ -1,21 +1,41 @@
 class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
+  before_action :set_config
+  before_action :allowed_configs
   def show
-    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
     # ref: https://github.com/rubocop/rubocop/issues/7767
     # rubocop:disable Style/HashTransformValues
-    @fb_config = InstallationConfig.where(name: @allowed_configs)
+    @app_config = InstallationConfig.where(name: @allowed_configs)
-                                   .pluck(:name, :serialized_value)
+                                    .pluck(:name, :serialized_value)
-                                   .map { |name, serialized_value| [name, serialized_value['value']] }
+                                    .map { |name, serialized_value| [name, serialized_value['value']] }
-                                   .to_h
+                                    .to_h
     # rubocop:enable Style/HashTransformValues
+    @installation_configs = ConfigLoader.new.general_configs.each_with_object({}) do |config_hash, result|
+      result[config_hash['name']] = config_hash.except('name')
+    end
   end
 
   def create
     params['app_config'].each do |key, value|
+      next unless @allowed_configs.include?(key)
+
       i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
       i.value = value
       i.save!
     end
-    redirect_to super_admin_app_config_url
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: 'App Configs updated successfully'
+    # rubocop:enable Rails/I18nLocaleTexts
+  end
+
+  private
+
+  def set_config
+    @config = params[:config]
+  end
+
+  def allowed_configs
+    @allowed_configs = %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET]
   end
 end
+
+SuperAdmin::AppConfigsController.prepend_mod_with('SuperAdmin::AppConfigsController')

app/controllers/super_admin/application_controller.rb

@@ -20,4 +20,13 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController
       params.fetch(resource_name, {}).fetch(:direction, 'desc')
     )
   end
+
+  private
+
+  def invalid_action_perfomed
+    # rubocop:disable Rails/I18nLocaleTexts
+    flash[:error] = 'Invalid action performed'
+    # rubocop:enable Rails/I18nLocaleTexts
+    redirect_back(fallback_location: root_path)
+  end
 end

app/controllers/super_admin/devise/sessions_controller.rb

@@ -27,7 +27,8 @@ class SuperAdmin::Devise::SessionsController < Devise::SessionsController
 
     true
   rescue StandardError => e
-    @error_message = e.message
+    Rails.logger.error e.message
+    @error_message = 'Invalid credentials. Please try again.'
     false
   end
 end

app/controllers/super_admin/installation_configs_controller.rb

@@ -1,4 +1,5 @@
 class SuperAdmin::InstallationConfigsController < SuperAdmin::ApplicationController
+  rescue_from ActiveRecord::RecordNotUnique, :with => :invalid_action_perfomed
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #

app/controllers/super_admin/settings_controller.rb

@@ -0,0 +1,10 @@
+class SuperAdmin::SettingsController < SuperAdmin::ApplicationController
+  def show; end
+
+  def refresh
+    Internal::CheckNewVersionsJob.perform_now
+    # rubocop:disable Rails/I18nLocaleTexts
+    redirect_to super_admin_settings_path, notice: 'Instance status refreshed'
+    # rubocop:enable Rails/I18nLocaleTexts
+  end
+end

app/dashboards/access_token_dashboard.rb

@@ -30,11 +30,7 @@ class AccessTokenDashboard < Administrate::BaseDashboard
   # SHOW_PAGE_ATTRIBUTES
   # an array of attributes that will be displayed on the model's show page.
   SHOW_PAGE_ATTRIBUTES = %i[
-    owner
-    id
     token
-    created_at
-    updated_at
   ].freeze
 
   # FORM_ATTRIBUTES

app/dashboards/agent_bot_dashboard.rb

@@ -46,6 +46,7 @@ class AgentBotDashboard < Administrate::BaseDashboard
     name
     description
     outgoing_url
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

app/dashboards/platform_app_dashboard.rb

@@ -32,6 +32,7 @@ class PlatformAppDashboard < Administrate::BaseDashboard
     name
     created_at
     updated_at
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

app/dashboards/user_dashboard.rb

@@ -36,7 +36,8 @@ class UserDashboard < Administrate::BaseDashboard
     updated_at: Field::DateTime,
     pubsub_token: Field::String,
     type: Field::Select.with_options(collection: [nil, 'SuperAdmin']),
-    accounts: CountField
+    accounts: CountField,
+    access_token: Field::HasOne
   }.freeze
 
   # COLLECTION_ATTRIBUTES
@@ -67,6 +68,7 @@ class UserDashboard < Administrate::BaseDashboard
     updated_at
     confirmed_at
     account_users
+    access_token
   ].freeze
 
   # FORM_ATTRIBUTES

app/drops/contact_drop.rb

@@ -18,4 +18,9 @@ class ContactDrop < BaseDrop
   def last_name
     @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
+
+  def custom_attribute
+    custom_attributes = @obj.try(:custom_attributes) || {}
+    custom_attributes.transform_keys(&:to_s)
+  end
 end

app/drops/conversation_drop.rb

@@ -19,6 +19,11 @@ class ConversationDrop < BaseDrop
     end
   end
 
+  def custom_attribute
+    custom_attributes = @obj.try(:custom_attributes) || {}
+    custom_attributes.transform_keys(&:to_s)
+  end
+
   private
 
   def message_sender_name(sender)

app/finders/conversation_finder.rb

@@ -3,13 +3,21 @@ class ConversationFinder
 
   DEFAULT_STATUS = 'open'.freeze
   SORT_OPTIONS = {
-    latest: 'latest',
+    'last_activity_at_asc' => %w[sort_on_last_activity_at asc],
-    sort_on_created_at: 'sort_on_created_at',
+    'last_activity_at_desc' => %w[sort_on_last_activity_at desc],
-    last_user_message_at: 'last_user_message_at',
+    'created_at_asc' => %w[sort_on_created_at asc],
-    sort_on_priority: 'sort_on_priority',
+    'created_at_desc' => %w[sort_on_created_at desc],
-    sort_on_waiting_since: 'sort_on_waiting_since'
+    'priority_asc' => %w[sort_on_priority asc],
-  }.with_indifferent_access
+    'priority_desc' => %w[sort_on_priority desc],
+    'waiting_since_asc' => %w[sort_on_waiting_since asc],
+    'waiting_since_desc' => %w[sort_on_waiting_since desc],
 
+    # To be removed in v3.5.0
+    'latest' => %w[sort_on_last_activity_at desc],
+    'sort_on_created_at' => %w[sort_on_created_at asc],
+    'sort_on_priority' => %w[sort_on_priority desc],
+    'sort_on_waiting_since' => %w[sort_on_waiting_since asc]
+  }.with_indifferent_access
   # assumptions
   # inbox_id if not given, take from all conversations, else specific to inbox
   # assignee_type if not given, take 'all'
@@ -159,7 +167,8 @@ class ConversationFinder
     @conversations = @conversations.includes(
       :taggings, :inbox, { assignee: { avatar_attachment: [:blob] } }, { contact: { avatar_attachment: [:blob] } }, :team, :contact_inbox
     )
-    sort_by = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['latest']
+
-    @conversations.send(sort_by).page(current_page)
+    sort_by, sort_order = SORT_OPTIONS[params[:sort_by]] || SORT_OPTIONS['last_activity_at_desc']
+    @conversations.send(sort_by, sort_order).page(current_page).per(ENV.fetch('CONVERSATION_RESULTS_PER_PAGE', '25').to_i)
   end
 end

app/finders/notification_finder.rb

@@ -0,0 +1,47 @@
+class NotificationFinder
+  attr_reader :current_user, :current_account, :params
+
+  RESULTS_PER_PAGE = 15
+
+  def initialize(current_user, current_account, params = {})
+    @current_user = current_user
+    @current_account = current_account
+    @params = params
+    set_up
+  end
+
+  def perform
+    notifications
+  end
+
+  def unread_count
+    @notifications.where(read_at: nil).count
+  end
+
+  def count
+    @notifications.count
+  end
+
+  private
+
+  def set_up
+    find_all_notifications
+    filter_by_status
+  end
+
+  def find_all_notifications
+    @notifications = current_user.notifications.where(account_id: @current_account.id)
+  end
+
+  def filter_by_status
+    @notifications = @notifications.where('snoozed_until > ?', DateTime.now.utc) if params[:status] == 'snoozed'
+  end
+
+  def current_page
+    params[:page] || 1
+  end
+
+  def notifications
+    @notifications.page(current_page).per(RESULTS_PER_PAGE).order(last_activity_at: :desc)
+  end
+end

app/helpers/api/v1/inboxes_helper.rb

@@ -53,7 +53,7 @@ module Api::V1::InboxesHelper
   rescue StandardError => e
     raise StandardError, e.message
   ensure
-    ChatwootExceptionTracker.new(e).capture_exception if e.present?
+    Rails.logger.error "[Api::V1::InboxesHelper] check_imap_connection failed with #{e.message}" if e.present?
   end
 
   def check_smtp_connection(channel_data, smtp)

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

@@ -37,7 +37,7 @@ module Api::V2::Accounts::ReportsHelper
           business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
         }
       )
-    ).summary
+    ).short_summary
   end
 
   private

app/helpers/portal_helper.rb

@@ -6,7 +6,17 @@ module PortalHelper
 
   def generate_portal_bg(portal_color, theme)
     bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
-    "background: url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
+    "url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
+  end
+
+  def generate_gradient_to_bottom(theme)
+    base_color = theme == 'dark' ? '#151718' : 'white'
+    "linear-gradient(to bottom, transparent, #{base_color})"
+  end
+
+  def generate_portal_hover_color(portal_color, theme)
+    base_color = theme == 'dark' ? '#1B1B1B' : '#F9F9F9'
+    "color-mix(in srgb, #{portal_color} 5%, #{base_color})"
   end
 
   def language_name(locale)
@@ -14,35 +24,48 @@ module PortalHelper
     language_map[locale] || locale
   end
 
-  def get_theme_names(theme)
+  def theme_query_string(theme)
-    if theme == 'light'
+    theme.present? && theme != 'system' ? "?theme=#{theme}" : ''
-      I18n.t('public_portal.header.appearance.light')
+  end
-    elsif theme == 'dark'
+
-      I18n.t('public_portal.header.appearance.dark')
+  def generate_home_link(portal_slug, portal_locale, theme, is_plain_layout_enabled)
+    if is_plain_layout_enabled
+      "/hc/#{portal_slug}/#{portal_locale}#{theme_query_string(theme)}"
     else
-      I18n.t('public_portal.header.appearance.system')
+      "/hc/#{portal_slug}/#{portal_locale}"
     end
   end
 
-  def get_theme_icon(theme)
+  def generate_category_link(params)
-    if theme == 'light'
+    portal_slug = params[:portal_slug]
-      'icons/sun'
+    category_locale = params[:category_locale]
-    elsif theme == 'dark'
+    category_slug = params[:category_slug]
-      'icons/moon'
+    theme = params[:theme]
+    is_plain_layout_enabled = params[:is_plain_layout_enabled]
+
+    if is_plain_layout_enabled
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{theme_query_string(theme)}"
     else
-      'icons/monitor'
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
     end
   end
 
-  def generate_gradient_to_bottom(theme)
+  def generate_article_link(portal_slug, article_slug, theme, is_plain_layout_enabled)
-    "background-image: linear-gradient(to bottom, transparent, #{theme == 'dark' ? '#151718' : 'white'})"
+    if is_plain_layout_enabled
-  end
+      "/hc/#{portal_slug}/articles/#{article_slug}#{theme_query_string(theme)}"
-
+    else
-  def generate_article_link(portal_slug, article_slug, theme)
+      "/hc/#{portal_slug}/articles/#{article_slug}"
-    "/hc/#{portal_slug}/articles/#{article_slug}#{theme.present? && theme != 'system' ? "?theme=#{theme}" : ''}"
+    end
   end
 
   def render_category_content(content)
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end
+
+  def thumbnail_bg_color(username)
+    colors = ['#6D95BA', '#A4C3C3', '#E19191']
+    return colors.sample if username.blank?
+
+    colors[username.length % colors.size]
+  end
 end

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

@@ -86,6 +86,12 @@ class MessageApi extends ApiClient {
     return axios.delete(`${this.url}/${conversationID}/messages/${messageId}`);
   }
 
+  retry(conversationID, messageId) {
+    return axios.post(
+      `${this.url}/${conversationID}/messages/${messageId}/retry`
+    );
+  }
+
   getPreviousMessages({ conversationId, after, before }) {
     const params = { before };
     if (after && Number(after) !== Number(before)) {

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -1,4 +1,4 @@
-@import '~vue2-datepicker/scss/index';
+@import 'vue2-datepicker/scss/index';
 
 .date-picker {
   &.no-margin {

app/javascript/dashboard/assets/scss/_formulate.scss

@@ -1,4 +1,4 @@
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';
 
 .formulate-input {
   .formulate-input-errors {

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

@@ -1,623 +0,0 @@
-//  Foundation for Sites Settings
-//  -----------------------------
-//
-//  Table of Contents:
-//
-//   1. Global
-//   2. Breakpoints
-//   3. The Grid
-//   4. Base Typography
-//   5. Typography Helpers
-//   6. Abide
-//   7. Accordion
-//   8. Accordion Menu
-//   9. Badge
-//  10. Breadcrumbs
-//  11. Button
-//  12. Button Group
-//  13. Callout
-//  14. Card
-//  15. Close Button
-//  16. Drilldown
-//  17. Dropdown
-//  18. Dropdown Menu
-//  19. Forms
-//  20. Label
-//  21. Media Object
-//  22. Menu
-//  23. Meter
-//  24. Off-canvas
-//  25. Orbit
-//  26. Pagination
-//  27. Progress Bar
-//  28. Responsive Embed
-//  29. Reveal
-//  30. Slider
-//  31. Switch
-//  32. Table
-//  33. Tabs
-//  34. Thumbnail
-//  35. Title Bar
-//  36. Tooltip
-//  37. Top Bar
-
-@import '~foundation-sites/scss/util/util';
-// 1. Global
-// ---------
-
-// Disable contrast warnings in Foundation.
-$contrast-warnings: false;
-
-$global-font-size: 16px;
-$global-width: 100%;
-$global-lineheight: 1.5;
-$foundation-palette: (primary: $color-woot,
-  secondary: #5d7592,
-  success: #44ce4b,
-  warning: #ffc532,
-  alert: #ff382d);
-$light-gray: #c0ccda;
-$medium-gray: #8492a6;
-$dark-gray: $color-gray;
-$black: #000;
-$white: #fff;
-$body-background: $white;
-$body-font-color: $color-body;
-$body-font-family: 'PlusJakarta',
--apple-system,
-system-ui,
-BlinkMacSystemFont,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-Tahoma,
-Arial,
-sans-serif;
-$body-antialiased: true;
-$global-margin: $space-small;
-$global-padding: $space-small;
-$global-weight-normal: normal;
-$global-weight-bold: bold;
-$global-radius: 0;
-$global-text-direction: ltr;
-$global-flexbox: false;
-$print-transparent-backgrounds: true;
-
-@include add-foundation-colors;
-
-// 2. Breakpoints
-// --------------
-
-$breakpoints: (small: 0,
-  medium: 640px,
-  large: 1024px,
-  xlarge: 1200px,
-  xxlarge: 1400px,
-  xxxlarge: 1600px,
-);
-$print-breakpoint: large;
-$breakpoint-classes: (small medium large);
-
-// 3. The Grid
-// -----------
-
-$grid-row-width: $global-width;
-$grid-column-count: 12;
-$grid-column-gutter: (small: $zero,
-  medium: $zero);
-$grid-column-align-edge: true;
-$block-grid-max: 8;
-
-// 4. Base Typography
-// ------------------
-
-$header-font-family: $body-font-family;
-$header-font-weight: $font-weight-medium;
-$header-font-style: normal;
-$font-family-monospace: $body-font-family;
-$header-color: $color-heading;
-$header-lineheight: 1.4;
-$header-margin-bottom: 0.3125rem;
-$header-styles: (small: ("h1": ("font-size": 24),
-    "h2": ("font-size": 20),
-    "h3": ("font-size": 19),
-    "h4": ("font-size": 18),
-    "h5": ("font-size": 17),
-    "h6": ("font-size": 16)),
-  medium: ("h1": ("font-size": 48),
-    "h2": ("font-size": 40),
-    "h3": ("font-size": 31),
-    "h4": ("font-size": 25),
-    "h5": ("font-size": 20),
-    "h6": ("font-size": 16)));
-$header-text-rendering: optimizeLegibility;
-$small-font-size: 80%;
-$header-small-font-color: $medium-gray;
-$paragraph-lineheight: 1.65;
-$paragraph-margin-bottom: var(--space-small);
-$paragraph-text-rendering: optimizeLegibility;
-$code-color: $black;
-$code-font-family: $font-family-monospace;
-$code-font-weight: $global-weight-normal;
-$code-background: $light-gray;
-$code-border: 1px solid $medium-gray;
-$code-padding: rem-calc(2 5 1);
-$anchor-color: $primary-color;
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
-$anchor-text-decoration: none;
-$anchor-text-decoration-hover: none;
-$hr-width: $global-width;
-$hr-border: 1px solid $medium-gray;
-$hr-margin: rem-calc(20) auto;
-$list-lineheight: $paragraph-lineheight;
-$list-margin-bottom: $paragraph-margin-bottom;
-$list-style-type: disc;
-$list-style-position: outside;
-$list-side-margin: 0.78125rem;
-$list-nested-side-margin: 0.78125rem;
-$defnlist-margin-bottom: 0.6875rem;
-$defnlist-term-weight: $global-weight-bold;
-$defnlist-term-margin-bottom: 0.1875rem;
-$blockquote-color: $dark-gray;
-$blockquote-padding: rem-calc(9 20 0 19);
-$blockquote-border: 1px solid $medium-gray;
-$cite-font-size: rem-calc(13);
-$cite-color: $dark-gray;
-$cite-pseudo-content: '\2014 \0020';
-$keystroke-font: $font-family-monospace;
-$keystroke-color: $black;
-$keystroke-background: $light-gray;
-$keystroke-padding: rem-calc(2 4 0);
-$keystroke-radius: $global-radius;
-$abbr-underline: 1px dotted $black;
-
-// 5. Typography Helpers
-// ---------------------
-
-$lead-font-size: $global-font-size * 1.25;
-$lead-lineheight: 1.6;
-$subheader-lineheight: 1.4;
-$subheader-color: $dark-gray;
-$subheader-font-weight: $global-weight-normal;
-$subheader-margin-top: 0.125rem;
-$subheader-margin-bottom: 0.3125rem;
-$stat-font-size: 1.5625rem;
-
-// 6. Abide
-// --------
-
-$abide-inputs: true;
-$abide-labels: true;
-$input-background-invalid: get-color(alert);
-$form-label-color-invalid: get-color(alert);
-$input-error-color: get-color(alert);
-$input-error-font-size: rem-calc(12);
-$input-error-font-weight: $global-weight-bold;
-
-// 7. Accordion
-// ------------
-
-$accordion-background: $white;
-$accordion-plusminus: true;
-$accordion-title-font-size: rem-calc(12);
-$accordion-item-color: $primary-color;
-$accordion-item-background-hover: $light-gray;
-$accordion-item-padding: 0.78125rem 0.625rem;
-$accordion-content-background: $white;
-$accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: $body-font-color;
-$accordion-content-padding: 0.625rem;
-
-// 8. Accordion Menu
-// -----------------
-
-$accordionmenu-arrows: true;
-$accordionmenu-arrow-color: $primary-color;
-$accordionmenu-arrow-size: 6px;
-
-// 9. Badge
-// --------
-
-$badge-background: $primary-color;
-$badge-color: $white;
-$badge-color-alt: $black;
-$badge-palette: $foundation-palette;
-$badge-padding: var(--space-smaller);
-$badge-minwidth: 2.1em;
-$badge-font-size: var(--font-size-nano);
-
-// 10. Breadcrumbs
-// ---------------
-
-$breadcrumbs-margin: 0 0 $global-margin 0;
-$breadcrumbs-item-font-size: rem-calc(11);
-$breadcrumbs-item-color: $primary-color;
-$breadcrumbs-item-color-current: $black;
-$breadcrumbs-item-color-disabled: $medium-gray;
-$breadcrumbs-item-margin: 0.46875rem;
-$breadcrumbs-item-uppercase: true;
-$breadcrumbs-item-slash: true;
-
-// 11. Button
-// ----------
-
-$button-padding: var(--space-smaller) 1em;
-$button-margin: 0 0 $global-margin 0;
-$button-fill: solid;
-$button-background: $primary-color;
-$button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
-$button-color-alt: $white;
-$button-radius: var(--border-radius-normal);
-$button-sizes: (tiny: var(--font-size-micro),
-  small: var(--font-size-mini),
-  default: var(--font-size-small),
-  large: var(--font-size-medium));
-$button-palette: $foundation-palette;
-$button-opacity-disabled: 0.4;
-$button-background-hover-lightness: -20%;
-$button-hollow-hover-lightness: -50%;
-$button-transition: background-color 0.25s ease-out,
-color 0.25s ease-out;
-
-// 12. Button Group
-// ----------------
-
-$buttongroup-margin: 0;
-$buttongroup-spacing: 0;
-$buttongroup-child-selector: '.button';
-$buttongroup-expand-max: 6;
-$buttongroup-radius-on-each: false;
-
-// 13. Callout
-// -----------
-
-$callout-background: $white;
-$callout-background-fade: 85%;
-$callout-border: 1px solid rgba($black, 0.25);
-$callout-margin: 0 0 0.625rem 0;
-$callout-padding: 0.625rem;
-$callout-font-color: $body-font-color;
-$callout-font-color-alt: $body-background;
-$callout-radius: $global-radius;
-$callout-link-tint: 30%;
-
-// 14. Card
-// --------
-
-$card-background: $white;
-$card-font-color: $body-font-color;
-$card-divider-background: $light-gray;
-$card-border: 1px solid var(--color-border);
-$card-shadow: var(--shadow-small);
-$card-border-radius: var(--border-radius-normal);
-$card-padding: var(--space-small);
-$card-margin: $global-margin;
-
-// 15. Close Button
-// ----------------
-
-$closebutton-position: right top;
-$closebutton-offset-horizontal: (small: 0.66rem,
-  medium: 1rem);
-$closebutton-offset-vertical: (small: 0.33em,
-  medium: 0.5rem);
-$closebutton-size: (small: 1.5em,
-  medium: 2em);
-$closebutton-lineheight: 1;
-$closebutton-color: $dark-gray;
-$closebutton-color-hover: $black;
-
-// 16. Drilldown
-// -------------
-
-$drilldown-transition: transform 0.15s linear;
-$drilldown-arrows: true;
-$drilldown-arrow-color: $primary-color;
-$drilldown-arrow-size: 6px;
-$drilldown-background: $white;
-
-// 17. Dropdown
-// ------------
-
-$dropdown-padding: 0.625rem;
-$dropdown-background: $body-background;
-$dropdown-border: 1px solid $medium-gray;
-$dropdown-font-size: 0.625rem;
-$dropdown-width: 300px;
-$dropdown-radius: $global-radius;
-$dropdown-sizes: (tiny: 100px,
-  small: 200px,
-  large: 400px);
-
-// 18. Dropdown Menu
-// -----------------
-
-$dropdownmenu-arrows: true;
-$dropdownmenu-arrow-color: $anchor-color;
-$dropdownmenu-arrow-size: 6px;
-$dropdownmenu-min-width: 200px;
-$dropdownmenu-background: $white;
-$dropdownmenu-border: 1px solid $medium-gray;
-
-// 19. Forms
-// ---------
-
-$fieldset-border: 1px solid $light-gray;
-$fieldset-padding: $space-two;
-$fieldset-margin: $space-one $zero;
-$legend-padding: rem-calc(0 3);
-$form-spacing: $space-normal;
-$helptext-color: $color-body;
-$helptext-font-size: $font-size-small;
-$helptext-font-style: italic;
-$input-prefix-color: $color-body;
-$input-prefix-background: var(--b-100);
-$input-prefix-border: 1px solid $color-border;
-$input-prefix-padding: 0.625rem;
-$form-label-color: $color-body;
-$form-label-font-size: rem-calc(14);
-$form-label-font-weight: $font-weight-medium;
-$form-label-line-height: 1.8;
-$select-background: $white;
-$select-triangle-color: $dark-gray;
-$select-radius: var(--border-radius-normal);
-$input-color: $color-body;
-$input-placeholder-color: $light-gray;
-$input-font-family: inherit;
-$input-font-size: $font-size-default;
-$input-font-weight: $global-weight-normal;
-$input-background: $white;
-$input-background-focus: $white;
-$input-background-disabled: $light-gray;
-$input-border: 1px solid var(--s-200);
-$input-border-focus: 1px solid lighten($primary-color, 15%);
-$input-shadow: 0;
-$input-shadow-focus: 0;
-$input-cursor-disabled: not-allowed;
-$input-transition: border-color 0.25s ease-in-out;
-$input-number-spinners: true;
-$input-radius: var(--border-radius-normal);
-$form-button-radius: var(--border-radius-normal);
-
-// 20. Label
-// ---------
-
-$label-background: $white;
-$label-color: $black;
-$label-color-alt: $black;
-$label-palette: $foundation-palette;
-$label-font-size: $font-size-mini;
-$label-padding: $space-smaller $space-small;
-$label-radius: var(--border-radius-small);
-
-// 21. Media Object
-// ----------------
-
-$mediaobject-margin-bottom: $global-margin;
-$mediaobject-section-padding: $global-padding;
-$mediaobject-image-width-stacked: 100%;
-
-// 22. Menu
-// --------
-
-$menu-margin: 0;
-$menu-margin-nested: $space-medium;
-$menu-item-padding: $space-slab;
-$menu-item-color-active: $white;
-$menu-item-background-active: $color-background;
-$menu-icon-spacing: 0.15625rem;
-$menu-item-background-hover: $light-gray;
-$menu-border: $light-gray;
-
-// 23. Meter
-// ---------
-
-$meter-height: 0.625rem;
-$meter-radius: $global-radius;
-$meter-background: $medium-gray;
-$meter-fill-good: $success-color;
-$meter-fill-medium: $warning-color;
-$meter-fill-bad: $alert-color;
-
-// 24. Off-canvas
-// --------------
-
-$offcanvas-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-vertical-sizes: (small: 14.375,
-  medium: 14.375,
-);
-$offcanvas-background: $light-gray;
-$offcanvas-shadow: 0 0 10px rgba($black, 0.7);
-$offcanvas-push-zindex: 1;
-$offcanvas-overlap-zindex: 10;
-$offcanvas-reveal-zindex: 1;
-$offcanvas-transition-length: 0.5s;
-$offcanvas-transition-timing: ease;
-$offcanvas-fixed-reveal: true;
-$offcanvas-exit-background: rgba($white, 0.25);
-$maincontent-class: 'off-canvas-content';
-
-// 25. Orbit
-// ---------
-
-$orbit-bullet-background: $medium-gray;
-$orbit-bullet-background-active: $dark-gray;
-$orbit-bullet-diameter: 0.75rem;
-$orbit-bullet-margin: 0.0625rem;
-$orbit-bullet-margin-top: 0.5rem;
-$orbit-bullet-margin-bottom: 0.5rem;
-$orbit-caption-background: rgba($black, 0.5);
-$orbit-caption-padding: 0.625rem;
-$orbit-control-background-hover: rgba($black, 0.5);
-$orbit-control-padding: 0.625rem;
-$orbit-control-zindex: 10;
-
-// 26. Pagination
-// --------------
-
-$pagination-font-size: rem-calc(14);
-$pagination-margin-bottom: $global-margin;
-$pagination-item-color: $black;
-$pagination-item-padding: rem-calc(3 10);
-$pagination-item-spacing: rem-calc(1);
-$pagination-radius: $global-radius;
-$pagination-item-background-hover: $light-gray;
-$pagination-item-background-current: $primary-color;
-$pagination-item-color-current: $white;
-$pagination-item-color-disabled: $medium-gray;
-$pagination-ellipsis-color: $black;
-$pagination-mobile-items: false;
-$pagination-mobile-current-item: false;
-$pagination-arrows: true;
-
-// 27. Progress Bar
-// ----------------
-
-$progress-height: 0.625rem;
-$progress-background: $medium-gray;
-$progress-margin-bottom: $global-margin;
-$progress-meter-background: $primary-color;
-$progress-radius: $global-radius;
-
-// 28. Responsive Embed
-// --------------------
-
-$responsive-embed-margin-bottom: rem-calc(16);
-$responsive-embed-ratios: (default: 4 by 3,
-  widescreen: 16 by 9);
-
-// 29. Reveal
-// ----------
-
-$reveal-background: $white;
-$reveal-width: 600px;
-$reveal-max-width: $global-width;
-$reveal-padding: $global-padding;
-$reveal-border: 1px solid $medium-gray;
-$reveal-radius: $global-radius;
-$reveal-zindex: 1005;
-$reveal-overlay-background: rgba($black, 0.45);
-
-// 30. Slider
-// ----------
-
-$slider-width-vertical: 0.3125rem;
-$slider-transition: all 0.2s ease-in-out;
-$slider-height: 0.3125rem;
-$slider-background: $light-gray;
-$slider-fill-background: $medium-gray;
-$slider-handle-height: 0.875rem;
-$slider-handle-width: 0.875rem;
-$slider-handle-background: $primary-color;
-$slider-opacity-disabled: 0.25;
-$slider-radius: $global-radius;
-
-// 31. Switch
-// ----------
-
-$switch-background: $light-gray;
-$switch-background-active: $primary-color;
-$switch-height: $space-two;
-$switch-height-tiny: $space-slab;
-$switch-height-small: $space-normal;
-$switch-height-large: $space-large;
-$switch-radius: $space-large;
-$switch-margin: $global-margin;
-$switch-paddle-background: $white;
-$switch-paddle-offset: $space-micro;
-$switch-paddle-radius: $space-large;
-$switch-paddle-transition: all 0.15s ease-out;
-
-// 32. Table
-// ---------
-
-$table-background: transparent;
-$table-color-scale: 5%;
-$table-border: 1px solid transparent;
-$table-padding: rem-calc(8 10 10);
-$table-hover-scale: 2%;
-$table-row-hover: darken($table-background, $table-hover-scale);
-$table-row-stripe-hover: darken($table-background,
-  $table-color-scale + $table-hover-scale);
-$table-is-striped: false;
-$table-striped-background: smart-scale($table-background, $table-color-scale);
-$table-stripe: even;
-$table-head-background: smart-scale($table-background, $table-color-scale / 2);
-$table-head-row-hover: darken($table-head-background, $table-hover-scale);
-$table-foot-background: smart-scale($table-background, $table-color-scale);
-$table-foot-row-hover: darken($table-foot-background, $table-hover-scale);
-$table-head-font-color: $body-font-color;
-$table-foot-font-color: $body-font-color;
-$show-header-for-stacked: false;
-
-// 33. Tabs
-// --------
-
-$tab-margin: 0;
-
-$tab-background: transparent;
-$tab-background-active: transparent;
-$tab-item-font-size: $font-size-small;
-$tab-item-background-hover: transparent;
-$tab-item-padding: $space-one $zero;
-$tab-color: $primary-color;
-$tab-active-color: $primary-color;
-$tab-expand-max: 6;
-$tab-content-background: transparent;
-$tab-content-border: transparent;
-$tab-content-color: foreground($tab-background, $primary-color);
-$tab-content-padding: 0.625rem;
-
-// 34. Thumbnail
-// -------------
-
-$thumbnail-border: solid 4px $white;
-$thumbnail-margin-bottom: $global-margin;
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
-$thumbnail-transition: box-shadow 200ms ease-out;
-$thumbnail-radius: $global-radius;
-
-// 35. Title Bar
-// -------------
-
-$titlebar-background: $black;
-$titlebar-color: $white;
-$titlebar-padding: 0.3125rem;
-$titlebar-text-font-weight: bold;
-$titlebar-icon-color: $white;
-$titlebar-icon-color-hover: $medium-gray;
-$titlebar-icon-spacing: 0.15625rem;
-
-// 36. Tooltip
-// -----------
-
-$has-tip-font-weight: $global-weight-bold;
-$has-tip-border-bottom: dotted 1px $dark-gray;
-$tooltip-background-color: $black;
-$tooltip-color: $white;
-$tooltip-padding: 0.46875rem;
-$tooltip-font-size: $font-size-mini;
-$tooltip-pip-width: 0.46875rem;
-$tooltip-pip-height: $tooltip-pip-width * 0.866;
-$tooltip-radius: $global-radius;
-
-// 37. Top Bar
-// -----------
-
-$topbar-padding: 0.3125;
-$topbar-background: $light-gray;
-$topbar-submenu-background: $topbar-background;
-$topbar-title-spacing: 0.3125 0.625rem 0.3125 0;
-$topbar-input-width: 200px;
-$topbar-unstack-breakpoint: medium;
-
-
-// Internal variable that contains the flex justifying options
-$-zf-flex-justify: -zf-flex-justify($global-text-direction);
-
-$menu-items-padding: $space-one;
-$xy-grid: false;

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -2,11 +2,6 @@
   @apply bg-slate-25 dark:bg-slate-800;
 }
 
-.flex-center {
-  @include flex-align(center, middle);
-  display: flex;
-}
-
 .bottom-space-fix {
   margin-bottom: auto;
 }

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -1,5 +1,5 @@
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';
-@import '~widget/assets/scss/mixins';
+@import 'widget/assets/scss/mixins';
 
 $spinner-before-border-color: rgba(255, 255, 255, 0.7);
 

app/javascript/dashboard/assets/scss/_variables.scss

@@ -89,9 +89,6 @@ $swift-ease-out-duration: .4s !default;
 $swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
 $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
 
-// Ionicons
-$ionicons-font-path: '~ionicons/fonts';
-
 // Transitions
 $transition-ease-in: all 0.250s ease-in;
 

app/javascript/dashboard/assets/scss/_woot.scss

@@ -15,36 +15,13 @@
 @import 'variables';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
 @import 'formulate';
 @import 'date-picker';
 
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-everything($flex: true);
-
-@include foundation-prototype-text-utilities;
-@include foundation-prototype-text-transformation;
-@include foundation-prototype-text-decoration;
-@include foundation-prototype-font-styling;
-@include foundation-prototype-list-style-type;
-@include foundation-prototype-rounded;
-@include foundation-prototype-bordered;
-@include foundation-prototype-shadow;
-@include foundation-prototype-separator;
-@include foundation-prototype-overflow;
-@include foundation-prototype-display;
-@include foundation-prototype-position;
-@include foundation-prototype-border-box;
-@include foundation-prototype-border-none;
-@include foundation-prototype-sizing;
-@include foundation-prototype-spacing;
-
 @import 'typography';
 @import 'layout';
 @import 'animations';
-@import 'foundation-custom';
 @import 'rtl';
 
 @import 'widgets/buttons';
@@ -52,15 +29,11 @@
 @import 'widgets/conversation-card';
 @import 'widgets/conversation-view';
 @import 'widgets/forms';
-@import 'widgets/login';
 @import 'widgets/modal';
 @import 'widgets/reply-box';
 @import 'widgets/report';
-@import 'widgets/search-box';
-@import 'widgets/sidemenu';
 @import 'widgets/snackbar';
 @import 'widgets/states';
-@import 'widgets/status-bar';
 @import 'widgets/tabs';
 @import 'widgets/woot-tables';
 
@@ -69,7 +42,6 @@
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';
-@import '~shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
 .tooltip {

app/javascript/dashboard/assets/scss/storybook.scss

@@ -10,21 +10,14 @@
 @import 'variables';
 
 @import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
-@import 'foundation-settings';
 @import 'helper-classes';
-@import 'foundation-sites/scss/foundation';
-
-@include foundation-prototype-spacing;
-@include foundation-everything($flex: true);
 
 @import 'typography';
 @import 'layout';
 @import 'animations';
 
-@import 'foundation-custom';
 @import 'widgets/buttons';
 @import 'widgets/forms';
 

app/javascript/dashboard/assets/scss/super_admin/index.scss

@@ -1,39 +1,8 @@
-@import '../variables';
+@import 'shared/assets/fonts/inter';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
-.superadmin-body {
+body {
-  background: var(--color-background);
+  font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-
-  .hero--title {
-    font-size: var(--font-size-mega);
-    font-weight: var(--font-weight-light);
-    margin-top: var(--space-large);
-  }
-
-  .update-subscription--checkbox {
-    display: flex;
-
-    input {
-      line-height: 1.5;
-      margin-right: var(--space-one);
-      margin-top: var(--space-smaller);
-    }
-
-    label {
-      font-size: var(--font-size-small);
-      line-height: 1.5;
-      margin-bottom: var(--space-normal);
-    }
-  }
 }
-
-.alert-box {
-  background-color: var(--r-500);
-  border-radius: 5px;
-  color: var(--color-white);
-  font-size: 14px;
-  margin-bottom: 14px;
-  padding: 10px;
-  text-align: center;
-}
-
-

app/javascript/dashboard/assets/scss/super_admin/pages.scss

@@ -1,3 +0,0 @@
-@import 'shared/assets/fonts/plus-jakarta';
-@import '../variables';
-@import '~shared/assets/stylesheets/ionicons';

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -76,7 +76,11 @@
 
   &.left {
     .bubble {
-      @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50 rounded-r-lg rounded-l mr-auto break-words;
+      @apply rounded-r-lg rounded-l mr-auto break-words;
+
+      &:not(.is-unsupported) {
+        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50
+      }
 
       &.is-image {
         @apply rounded-lg;

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

@@ -1,66 +0,0 @@
-.auth-wrap {
-  width: 100%;
-}
-
-// Outside login wrapper
-.login {
-  @include full-height;
-  overflow-y: auto;
-  padding-top: $space-larger * 1.2;
-
-  .login__hero {
-    margin-bottom: $space-larger;
-
-    .hero__logo {
-      width: 180px;
-    }
-
-    .hero__title {
-      font-weight: $font-weight-light;
-      margin-top: $space-larger;
-    }
-
-    .hero__sub {
-      color: $medium-gray;
-      font-size: $font-size-medium;
-    }
-  }
-
-  // Login box
-  .login-box {
-    @include background-white;
-    @include border-normal;
-    @include elegant-card;
-
-    border-radius: $space-smaller;
-    padding: $space-large;
-
-    label {
-      color: $color-gray;
-      font-size: $font-size-default;
-
-      input {
-        font-size: $font-size-default;
-        height: $space-larger;
-        padding: $space-slab;
-      }
-
-      .error {
-        font-size: $font-size-small;
-      }
-    }
-
-    .button {
-      height: $space-larger;
-    }
-  }
-
-  .sigin__footer {
-    font-size: $font-size-default;
-    padding: $space-medium;
-
-    > a {
-      font-weight: $font-weight-bold;
-    }
-  }
-}

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

@@ -1,7 +1,5 @@
 .modal-mask {
-  // @include flex;
+  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark z-[9990] h-full left-0 fixed top-0 w-full;
-  // @include flex-align(center, middle);
-  @apply flex items-center justify-center bg-modal dark:bg-modal z-[9990] h-full left-0 fixed top-0 w-full;
 }
 
 .page-top-bar {
@@ -45,8 +43,6 @@
   }
 
   .modal-footer {
-    // @include flex;
-    // @include flex-align($x: flex-end, $y: middle);
     @apply flex justify-end items-center py-2 px-0 gap-2;
 
     &.justify-content-end {

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

@@ -8,7 +8,7 @@
 
   .reply-box__top {
     .icon {
-      color: $medium-gray;
+      color: var(--slate-500);
       cursor: pointer;
       font-size: $font-size-medium;
       margin-right: $space-small;
@@ -34,7 +34,7 @@
       resize: none;
     }
 
-    > textarea {
+    >textarea {
       @include ghost-input();
       background: transparent;
       margin: 0;
@@ -52,7 +52,7 @@
     .reply-box__top {
       @apply bg-yellow-100 dark:bg-yellow-800;
 
-      > input {
+      >input {
         @apply bg-yellow-100 dark:bg-yellow-800;
       }
     }

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

@@ -1,45 +1,10 @@
-.side-menu {
-  i {
-    margin-right: var(--space-smaller);
-    min-width: var(--space-two);
-  }
-}
-
-.sidebar {
-  z-index: 1024 - 1;
-
-  //logo
-  .logo {
-    img {
-      max-height: 108px;
-      padding: $woot-logo-padding;
-    }
-  }
-
-  .nested {
-    a {
-      font-size: var(--font-size-small);
-      margin-bottom: var(--space-micro);
-      margin-top: var(--space-micro);
-
-      .inbox-icon {
-        display: inline-block;
-        margin-right: var(--space-micro);
-        min-width: var(--space-normal);
-        text-align: center;
-      }
-    }
-  }
-}
-
 // bottom-nav
 .bottom-nav {
   @include flex;
   @include space-between-column;
   @include border-normal-top;
   flex-direction: column;
-  padding: var(--space-one) var(--space-normal) var(--space-one)
+  padding: var(--space-one) var(--space-normal) var(--space-one) var(--space-one);
-    var(--space-one);
   position: relative;
 
   &:hover {

app/javascript/dashboard/components/ChatList.vue

@@ -126,49 +126,33 @@
       @assign-team="onAssignTeamsForBulk"
     />
     <div
-      ref="activeConversation"
+      ref="conversationList"
       class="conversations-list flex-1"
       :class="{ 'overflow-hidden': isContextMenuOpen }"
     >
-      <div>
+      <virtual-list
-        <conversation-card
+        ref="conversationVirtualList"
-          v-for="chat in conversationList"
+        :data-key="'id'"
-          :key="chat.id"
+        :data-sources="conversationList"
-          :active-label="label"
+        :data-component="itemComponent"
-          :team-id="teamId"
+        :extra-props="virtualListExtraProps"
-          :folders-id="foldersId"
+        class="w-full overflow-auto h-full"
-          :chat="chat"
+        footer-tag="div"
-          :conversation-type="conversationType"
-          :show-assignee="showAssigneeInConversationCard"
-          :selected="isConversationSelected(chat.id)"
-          @select-conversation="selectConversation"
-          @de-select-conversation="deSelectConversation"
-          @assign-agent="onAssignAgent"
-          @assign-team="onAssignTeam"
-          @assign-label="onAssignLabels"
-          @update-conversation-status="toggleConversationStatus"
-          @context-menu-toggle="onContextMenuToggle"
-          @mark-as-unread="markAsUnread"
-          @assign-priority="assignPriority"
-        />
-      </div>
-      <div v-if="chatListLoading" class="text-center">
-        <span class="spinner mt-4 mb-4" />
-      </div>
-
-      <woot-button
-        v-if="!hasCurrentPageEndReached && !chatListLoading"
-        variant="clear"
-        size="expanded"
-        class="load-more--button"
-        @click="loadMoreConversations"
       >
-        {{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
+        <template #footer>
-      </woot-button>
+          <div v-if="chatListLoading" class="text-center">
-
+            <span class="spinner mt-4 mb-4" />
-      <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
+          </div>
-        {{ $t('CHAT_LIST.EOF') }}
+          <p v-if="showEndOfListMessage" class="text-center text-muted p-4">
-      </p>
+            {{ $t('CHAT_LIST.EOF') }}
+          </p>
+          <intersection-observer
+            v-if="!showEndOfListMessage && !chatListLoading"
+            :options="infiniteLoaderOptions"
+            @observed="loadMoreConversations"
+          />
+        </template>
+      </virtual-list>
     </div>
     <woot-modal
       :show.sync="showAdvancedFilters"
@@ -191,11 +175,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import VirtualList from 'vue-virtual-scroll-list';
 
 import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter.vue';
 import ConversationBasicFilter from './widgets/conversation/ConversationBasicFilter.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationCard from './widgets/conversation/ConversationCard.vue';
+import ConversationItem from './ConversationItem.vue';
 import timeMixin from '../mixins/time';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import conversationMixin from '../mixins/conversations';
@@ -222,16 +207,20 @@ import {
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
+import IntersectionObserver from './IntersectionObserver.vue';
 
 export default {
   components: {
     AddCustomViews,
     ChatTypeTabs,
-    ConversationCard,
+    // eslint-disable-next-line vue/no-unused-components
+    ConversationItem,
     ConversationAdvancedFilter,
     DeleteCustomViews,
     ConversationBulkActions,
     ConversationBasicFilter,
+    IntersectionObserver,
+    VirtualList,
   },
   mixins: [
     timeMixin,
@@ -241,6 +230,20 @@ export default {
     filterMixin,
     uiSettingsMixin,
   ],
+  provide() {
+    return {
+      // Actions to be performed on virtual list item and context menu.
+      selectConversation: this.selectConversation,
+      deSelectConversation: this.deSelectConversation,
+      assignAgent: this.onAssignAgent,
+      assignTeam: this.onAssignTeam,
+      assignLabels: this.onAssignLabels,
+      updateConversationStatus: this.toggleConversationStatus,
+      toggleContextMenu: this.onContextMenuToggle,
+      markAsUnread: this.markAsUnread,
+      assignPriority: this.assignPriority,
+    };
+  },
   props: {
     conversationInbox: {
       type: [String, Number],
@@ -275,7 +278,7 @@ export default {
     return {
       activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
       activeStatus: wootConstants.STATUS_TYPE.OPEN,
-      activeSortBy: wootConstants.SORT_BY_TYPE.LATEST,
+      activeSortBy: wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC,
       showAdvancedFilters: false,
       advancedFilterTypes: advancedFilterTypes.map(filter => ({
         ...filter,
@@ -291,6 +294,21 @@ export default {
       selectedInboxes: [],
       isContextMenuOpen: false,
       appliedFilter: [],
+      infiniteLoaderOptions: {
+        root: this.$refs.conversationList,
+        rootMargin: '100px 0px 100px 0px',
+      },
+
+      itemComponent: ConversationItem,
+      // virtualListExtraProps is to pass the props to the conversationItem component.
+      virtualListExtraProps: {
+        label: this.label,
+        teamId: this.teamId,
+        foldersId: this.foldersId,
+        conversationType: this.conversationType,
+        showAssignee: false,
+        isConversationSelected: this.isConversationSelected,
+      },
     };
   },
   computed: {
@@ -501,6 +519,9 @@ export default {
     },
   },
   watch: {
+    teamId() {
+      this.updateVirtualListProps('teamId', this.teamId);
+    },
     activeTeam() {
       this.resetAndFetchData();
     },
@@ -509,16 +530,22 @@ export default {
     },
     label() {
       this.resetAndFetchData();
+      this.updateVirtualListProps('label', this.label);
     },
     conversationType() {
       this.resetAndFetchData();
+      this.updateVirtualListProps('conversationType', this.conversationType);
     },
     activeFolder() {
       this.resetAndFetchData();
+      this.updateVirtualListProps('foldersId', this.foldersId);
     },
     chatLists() {
       this.chatsOnView = this.conversationList;
     },
+    showAssigneeInConversationCard(newVal) {
+      this.updateVirtualListProps('showAssignee', newVal);
+    },
   },
   mounted() {
     this.setFiltersFromUISettings();
@@ -535,6 +562,12 @@ export default {
     });
   },
   methods: {
+    updateVirtualListProps(key, value) {
+      this.virtualListExtraProps = {
+        ...this.virtualListExtraProps,
+        [key]: value,
+      };
+    },
     onApplyFilter(payload) {
       this.resetBulkActions();
       this.foldersQuery = filterQueryGenerator(payload);
@@ -555,7 +588,10 @@ export default {
       const { conversations_filter_by: filterBy = {} } = this.uiSettings;
       const { status, order_by: orderBy } = filterBy;
       this.activeStatus = status || wootConstants.STATUS_TYPE.OPEN;
-      this.activeSortBy = orderBy || wootConstants.SORT_BY_TYPE.LATEST;
+      this.activeSortBy =
+        Object.keys(wootConstants.SORT_BY_TYPE).find(
+          sortField => sortField === orderBy
+        ) || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
     },
     onClickOpenAddFoldersModal() {
       this.showAddFoldersModal = true;
@@ -635,10 +671,10 @@ export default {
       );
     },
     getKeyboardListenerParams() {
-      const allConversations = this.$refs.activeConversation.querySelectorAll(
+      const allConversations = this.$refs.conversationList.querySelectorAll(
         'div.conversations-list div.conversation'
       );
-      const activeConversation = this.$refs.activeConversation.querySelector(
+      const activeConversation = this.$refs.conversationList.querySelector(
         'div.conversations-list div.conversation.active'
       );
       const activeConversationIndex = [...allConversations].indexOf(
@@ -694,9 +730,12 @@ export default {
     fetchConversations() {
       this.$store
         .dispatch('fetchAllConversations', this.conversationFilters)
-        .then(() => this.$emit('conversation-load'));
+        .then(this.emitConversationLoaded);
     },
     loadMoreConversations() {
+      if (this.hasCurrentPageEndReached || this.chatListLoading) {
+        return;
+      }
       if (!this.hasAppliedFiltersOrActiveFolders) {
         this.fetchConversations();
       }
@@ -715,7 +754,7 @@ export default {
           queryData: filterQueryGenerator(payload),
           page,
         })
-        .then(() => this.$emit('conversation-load'));
+        .then(this.emitConversationLoaded);
       this.showAdvancedFilters = false;
     },
     fetchSavedFilteredConversations(payload) {
@@ -725,7 +764,7 @@ export default {
           queryData: payload,
           page,
         })
-        .then(() => this.$emit('conversation-load'));
+        .then(this.emitConversationLoaded);
     },
     updateAssigneeTab(selectedTab) {
       if (this.activeAssigneeTab !== selectedTab) {
@@ -737,6 +776,20 @@ export default {
         }
       }
     },
+    emitConversationLoaded() {
+      this.$emit('conversation-load');
+      this.$nextTick(() => {
+        // Addressing a known issue in the virtual list library where dynamically added items
+        // might not render correctly. This workaround involves a slight manual adjustment
+        // to the scroll position, triggering the list to refresh its rendering.
+        const virtualList = this.$refs.conversationVirtualList;
+        const scrollToOffset = virtualList?.scrollToOffset;
+        const currentOffset = virtualList?.getOffset() || 0;
+        if (scrollToOffset) {
+          scrollToOffset(currentOffset + 1);
+        }
+      });
+    },
     resetBulkActions() {
       this.selectedConversations = [];
       this.selectedInboxes = [];

app/javascript/dashboard/components/ConversationItem.vue

@@ -0,0 +1,72 @@
+<template>
+  <conversation-card
+    :key="source.id"
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
+    :chat="source"
+    :conversation-type="conversationType"
+    :selected="isConversationSelected(source.id)"
+    :show-assignee="showAssignee"
+    :enable-context-menu="true"
+    @select-conversation="selectConversation"
+    @de-select-conversation="deSelectConversation"
+    @assign-agent="assignAgent"
+    @assign-team="assignTeam"
+    @assign-label="assignLabels"
+    @update-conversation-status="updateConversationStatus"
+    @context-menu-toggle="toggleContextMenu"
+    @mark-as-unread="markAsUnread"
+    @assign-priority="assignPriority"
+  />
+</template>
+
+<script>
+import ConversationCard from './widgets/conversation/ConversationCard.vue';
+export default {
+  components: {
+    ConversationCard,
+  },
+  inject: [
+    'selectConversation',
+    'deSelectConversation',
+    'assignAgent',
+    'assignTeam',
+    'assignLabels',
+    'updateConversationStatus',
+    'toggleContextMenu',
+    'markAsUnread',
+    'assignPriority',
+  ],
+  props: {
+    source: {
+      type: Object,
+      required: true,
+    },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
+    foldersId: {
+      type: [String, Number],
+      default: 0,
+    },
+    isConversationSelected: {
+      type: Function,
+      default: () => {},
+    },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/CustomAttribute.vue

@@ -13,7 +13,7 @@
         <div class="flex items-center justify-between w-full">
           <span
             class="attribute-name"
-            :class="{ error: $v.editedValue.$error }"
+            :class="{ error: v$.editedValue.$error }"
           >
             {{ label }}
           </span>
@@ -39,8 +39,8 @@
             :type="inputType"
             class="input-group-field"
             autofocus="true"
-            :class="{ error: $v.editedValue.$error }"
+            :class="{ error: v$.editedValue.$error }"
-            @blur="$v.editedValue.$touch"
+            @blur="v$.editedValue.$touch"
             @keyup.enter="onUpdate"
           />
           <div class="input-group-button">
@@ -122,25 +122,37 @@
 
 <script>
 import { format, parseISO } from 'date-fns';
-import { required, url } from 'vuelidate/lib/validators';
+import { required, url } from '@vuelidate/validators';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import MultiselectDropdown from 'shared/components/ui/MultiselectDropdown.vue';
 import { isValidURL } from '../helper/URLHelper';
+import customAttributeMixin from '../mixins/customAttributeMixin';
 const DATE_FORMAT = 'yyyy-MM-dd';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
     MultiselectDropdown,
   },
+  mixins: [customAttributeMixin],
   props: {
     label: { type: String, required: true },
     values: { type: Array, default: () => [] },
     value: { type: [String, Number, Boolean], default: '' },
     showActions: { type: Boolean, default: false },
     attributeType: { type: String, default: 'text' },
+    attributeRegex: {
+      type: String,
+      default: null,
+    },
+    regexCue: { type: String, default: null },
+    regexEnabled: { type: Boolean, default: false },
     attributeKey: { type: String, required: true },
     contactId: { type: Number, default: null },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       isEditing: false,
@@ -198,12 +210,17 @@ export default {
       return this.isAttributeTypeLink ? 'url' : this.attributeType;
     },
     shouldShowErrorMessage() {
-      return this.$v.editedValue.$error;
+      return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.$v.editedValue.url) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
+      if (!this.v$.editedValue.regexValidation) {
+        return this.regexCue
+          ? this.regexCue
+          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
+      }
       return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
     },
   },
@@ -221,7 +238,15 @@ export default {
       };
     }
     return {
-      editedValue: { required },
+      editedValue: {
+        required,
+        regexValidation: value => {
+          return !(
+            this.attributeRegex &&
+            !this.getRegexp(this.attributeRegex).test(value)
+          );
+        },
+      },
     };
   },
   mounted() {
@@ -259,8 +284,8 @@ export default {
         this.attributeType === 'date'
           ? parseISO(this.editedValue)
           : this.editedValue;
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) {
+      if (this.v$.$invalid) {
         return;
       }
       this.isEditing = false;
@@ -281,11 +306,14 @@ export default {
 .checkbox-wrap {
   @apply flex items-center;
 }
+
 .checkbox {
   @apply my-0 mr-2 ml-0;
 }
+
 .attribute-name {
   @apply w-full text-slate-800 dark:text-slate-100;
+
   &.error {
     @apply text-red-400 dark:text-red-500;
   }
@@ -302,6 +330,7 @@ export default {
     .value {
       @apply bg-slate-50 dark:bg-slate-700 mb-0;
     }
+
     .edit-button {
       @apply block;
     }
@@ -311,10 +340,12 @@ export default {
 ::v-deep {
   .selector-wrap {
     @apply m-0 top-1;
+
     .selector-name {
       @apply ml-0;
     }
   }
+
   .name {
     @apply ml-0;
   }

app/javascript/dashboard/components/IntersectionObserver.vue

@@ -0,0 +1,34 @@
+<template>
+  <div ref="observedElement" class="h-6 w-full" />
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Object,
+      default: () => ({ root: document, rootMargin: '100px 0 100px 0)' }),
+    },
+  },
+  mounted() {
+    this.intersectionObserver = null;
+    this.registerInfiniteLoader();
+  },
+  beforeDestroy() {
+    this.unobserveInfiniteLoadObserver();
+  },
+  methods: {
+    registerInfiniteLoader() {
+      this.intersectionObserver = new IntersectionObserver(entries => {
+        if (entries && entries[0].isIntersecting) {
+          this.$emit('observed');
+        }
+      }, this.options);
+      this.intersectionObserver.observe(this.$refs.observedElement);
+    },
+    unobserveInfiniteLoadObserver() {
+      this.intersectionObserver.unobserve(this.$refs.observedElement);
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/NetworkNotification.vue

@@ -1,24 +1,33 @@
 <template>
   <transition name="network-notification-fade" tag="div">
-    <div v-show="showNotification" class="ui-notification-container">
+    <div v-show="showNotification" class="fixed top-4 left-2 z-50 group">
-      <div class="ui-notification">
+      <div
-        <fluent-icon icon="wifi-off" />
+        class="flex items-center justify-between py-1 px-2 w-full rounded-lg shadow-lg bg-yellow-200 dark:bg-yellow-700 relative"
-        <p class="ui-notification-text">
+      >
-          {{
+        <fluent-icon
-            useInstallationName(
+          icon="wifi-off"
-              $t('NETWORK.NOTIFICATION.TEXT'),
+          class="text-yellow-700/50 dark:text-yellow-50"
-              globalConfig.installationName
+          size="18"
-            )
+        />
-          }}
+        <span
-        </p>
+          class="text-xs tracking-wide font-medium px-2 text-yellow-700/70 dark:text-yellow-50"
-        <woot-button variant="clear" size="small" @click="refreshPage">
+        >
-          {{ $t('NETWORK.BUTTON.REFRESH') }}
+          {{ $t('NETWORK.NOTIFICATION.OFFLINE') }}
-        </woot-button>
+        </span>
         <woot-button
-          variant="smooth"
+          :title="$t('NETWORK.BUTTON.REFRESH')"
+          variant="clear"
           size="small"
           color-scheme="warning"
-          icon="dismiss-circle"
+          icon="arrow-clockwise"
+          class="visible transition-all duration-500 ease-in-out ml-1"
+          @click="refreshPage"
+        />
+        <woot-button
+          variant="clear"
+          size="small"
+          color-scheme="warning"
+          icon="dismiss"
           @click="closeNotification"
         />
       </div>
@@ -47,7 +56,12 @@ export default {
   mounted() {
     window.addEventListener('offline', this.updateOnlineStatus);
     window.bus.$on(BUS_EVENTS.WEBSOCKET_DISCONNECT, () => {
-      this.updateOnlineStatus({ type: 'offline' });
+      // TODO: Remove this after completing the conversation list refetching
+      // TODO: DIRTY FIX : CLEAN UP THIS WITH PROPER FIX, DELAYING THE RECONNECT FOR NOW
+      // THE CABLE IS FIRING IS VERY COMMON AND THUS INTERFERING USER EXPERIENCE
+      setTimeout(() => {
+        this.updateOnlineStatus({ type: 'offline' });
+      }, 4000);
     });
   },
 
@@ -72,33 +86,3 @@ export default {
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import '~dashboard/assets/scss/mixins';
-
-.ui-notification-container {
-  max-width: 25rem;
-  position: absolute;
-  right: var(--space-normal);
-  top: var(--space-normal);
-  z-index: var(--z-index-very-high);
-}
-
-.ui-notification {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-
-  background-color: var(--y-100);
-  border-radius: var(--border-radius-medium);
-  box-shadow: var(--shadow-large);
-
-  min-width: 15rem;
-  padding: var(--space-normal);
-}
-
-.ui-notification-text {
-  margin: 0 var(--space-small);
-}
-</style>

app/javascript/dashboard/components/index.js

@@ -1,29 +1,29 @@
 /* eslint no-plusplus: 0 */
 import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
-import Button from './ui/WootButton';
+import Button from './ui/WootButton.vue';
-import Code from './Code';
+import Code from './Code.vue';
-import ColorPicker from './widgets/ColorPicker';
+import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
 import ConfirmModal from './widgets/modal/ConfirmationModal.vue';
 import ContextMenu from './ui/ContextMenu.vue';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
-import DropdownItem from 'shared/components/ui/dropdown/DropdownItem';
+import DropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
-import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu';
+import DropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
-import FeatureToggle from './widgets/FeatureToggle';
+import FeatureToggle from './widgets/FeatureToggle.vue';
 import HorizontalBar from './widgets/chart/HorizontalBarChart';
 import Input from './widgets/forms/Input.vue';
 import PhoneInput from './widgets/forms/PhoneInput.vue';
-import Label from './ui/Label';
+import Label from './ui/Label.vue';
-import LoadingState from './widgets/LoadingState';
+import LoadingState from './widgets/LoadingState.vue';
-import Modal from './Modal';
+import Modal from './Modal.vue';
-import ModalHeader from './ModalHeader';
+import ModalHeader from './ModalHeader.vue';
-import ReportStatsCard from './widgets/ReportStatsCard';
+import ReportStatsCard from './widgets/ReportStatsCard.vue';
-import SidemenuIcon from './SidemenuIcon';
+import SidemenuIcon from './SidemenuIcon.vue';
-import Spinner from 'shared/components/Spinner';
+import Spinner from 'shared/components/Spinner.vue';
-import SubmitButton from './buttons/FormSubmitButton';
+import SubmitButton from './buttons/FormSubmitButton.vue';
 import Tabs from './ui/Tabs/Tabs';
-import TabsItem from './ui/Tabs/TabsItem';
+import TabsItem from './ui/Tabs/TabsItem.vue';
 import Thumbnail from './widgets/Thumbnail.vue';
 
 const WootUIKit = {

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

@@ -19,13 +19,13 @@
 
       <form class="flex flex-col w-full" @submit.prevent="addAccount">
         <div class="w-full">
-          <label :class="{ error: $v.accountName.$error }">
+          <label :class="{ error: v$.accountName.$error }">
             {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
             <input
               v-model.trim="accountName"
               type="text"
               :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
-              @input="$v.accountName.$touch"
+              @input="v$.accountName.$touch"
             />
           </label>
         </div>
@@ -33,8 +33,8 @@
           <div class="w-full">
             <woot-submit-button
               :disabled="
-                $v.accountName.$invalid ||
+                v$.accountName.$invalid ||
-                $v.accountName.$invalid ||
+                v$.accountName.$invalid ||
                 uiFlags.isCreating
               "
               :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
@@ -49,9 +49,10 @@
 </template>
 
 <script>
-import { required, minLength } from 'vuelidate/lib/validators';
+import { required, minLength } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [alertMixin],
@@ -65,6 +66,9 @@ export default {
       default: true,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       accountName: '',

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

@@ -56,7 +56,7 @@
             class="bg-slate-50 dark:bg-slate-700 rounded text-xxs font-medium mx-1 py-0 px-1"
             :class="
               isCountZero
-                ? `text-slate-300 dark:text-slate-700`
+                ? `text-slate-300 dark:text-slate-500`
                 : `text-slate-700 dark:text-slate-50`
             "
           >

app/javascript/dashboard/components/ui/Tabs/Tabs.js

@@ -1,4 +1,6 @@
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'WootTabs',
   props: {
     index: {
@@ -73,19 +75,25 @@ export default {
       });
     const leftButton = this.createScrollButton(createElement, 'left');
     const rightButton = this.createScrollButton(createElement, 'right');
-    return (
+    return createElement(
-      <div
+      'div',
-        class={{
+      {
+        class: {
           'tabs--container--with-border': this.border,
           'tabs--container': true,
-        }}
+        },
-      >
+      },
-        {leftButton}
+      [
-        <ul class={{ tabs: true, 'tabs--with-scroll': this.hasScroll }}>
+        leftButton,
-          {Tabs}
+        createElement(
-        </ul>
+          'ul',
-        {rightButton}
+          {
-      </div>
+            class: { tabs: true, 'tabs--with-scroll': this.hasScroll },
+          },
+          Tabs
+        ),
+        rightButton,
+      ]
     );
   },
-};
+});

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

@@ -12,11 +12,11 @@
         <woot-input
           v-model="value"
           type="text"
-          :class="{ error: $v.value.$error }"
+          :class="{ error: v$.value.$error }"
           :placeholder="
             $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
           "
-          @blur="$v.value.$touch"
+          @blur="v$.value.$touch"
         />
       </div>
       <div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
@@ -27,7 +27,7 @@
           <woot-button variant="clear" @click.prevent="onDismiss">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.DISMISS') }}
           </woot-button>
-          <woot-button :is-disabled="$v.value.$invalid">
+          <woot-button :is-disabled="v$.value.$invalid">
             {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
           </woot-button>
         </div>
@@ -37,15 +37,19 @@
 </template>
 
 <script>
-import { required } from 'vuelidate/lib/validators';
+import { required } from '@vuelidate/validators';
 import { mapGetters } from 'vuex';
 import aiMixin from 'dashboard/mixins/aiMixin';
 import alertMixin from 'shared/mixins/alertMixin';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { OPEN_AI_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   mixins: [aiMixin, alertMixin, uiSettingsMixin],
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       value: '',

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

@@ -53,8 +53,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '~dashboard/assets/scss/variables';
+@import 'dashboard/assets/scss/variables';
-@import '~dashboard/assets/scss/mixins';
+@import 'dashboard/assets/scss/mixins';
 
 .colorpicker {
   position: relative;

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

@@ -84,7 +84,10 @@ import {
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
-import { replaceVariablesInMessage } from '@chatwoot/utils';
+import {
+  replaceVariablesInMessage,
+  createTypingIndicator,
+} from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
@@ -140,6 +143,15 @@ export default {
   },
   data() {
     return {
+      typingIndicator: createTypingIndicator(
+        () => {
+          this.$emit('typing-on');
+        },
+        () => {
+          this.$emit('typing-off');
+        },
+        TYPING_INDICATOR_IDLE_TIME
+      ),
       showUserMentions: false,
       showCannedMenu: false,
       showVariables: false,
@@ -638,15 +650,6 @@ export default {
     hideMentions() {
       this.showUserMentions = false;
     },
-    resetTyping() {
-      this.$emit('typing-off');
-      this.idleTimer = null;
-    },
-    turnOffIdleTimer() {
-      if (this.idleTimer) {
-        clearTimeout(this.idleTimer);
-      }
-    },
     handleLineBreakWhenEnterToSendEnabled(event) {
       if (
         hasPressedEnterAndNotCmdOrShift(event) &&
@@ -666,14 +669,7 @@ export default {
       }
     },
     onKeyup() {
-      if (!this.idleTimer) {
+      this.typingIndicator.start();
-        this.$emit('typing-on');
-      }
-      this.turnOffIdleTimer();
-      this.idleTimer = setTimeout(
-        () => this.resetTyping(),
-        TYPING_INDICATOR_IDLE_TIME
-      );
       this.updateImgToolbarOnDelete();
     },
     onKeydown(event) {
@@ -685,8 +681,7 @@ export default {
       }
     },
     onBlur() {
-      this.turnOffIdleTimer();
+      this.typingIndicator.stop();
-      this.resetTyping();
       this.$emit('blur');
     },
     onFocus() {
@@ -710,10 +705,11 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@chatwoot/prosemirror-schema/src/styles/base.scss';
+@import '@chatwoot/prosemirror-schema/src/styles/base.scss';
 
 .ProseMirror-menubar-wrapper {
   @apply flex flex-col;
+
   .ProseMirror-menubar {
     min-height: var(--space-two) !important;
     @apply -ml-2.5 pb-0 bg-white dark:bg-slate-900 text-slate-700 dark:text-slate-100;
@@ -722,6 +718,7 @@ export default {
       @apply bg-slate-75 dark:bg-slate-800;
     }
   }
+
   > .ProseMirror {
     @apply p-0 break-words text-slate-800 dark:text-slate-100;
 

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

@@ -101,10 +101,10 @@
       <transition name="modal-fade">
         <div
           v-show="$refs.upload && $refs.upload.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-600 dark:text-slate-200 bg-white_transparent dark:bg-black_transparent"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-slate-900 dark:text-slate-50 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
-          <h4 class="page-sub-title text-slate-600 dark:text-slate-200">
+          <h4 class="page-sub-title text-slate-900 dark:text-slate-50">
             {{ $t('CONVERSATION.REPLYBOX.DRAG_DROP') }}
           </h4>
         </div>
@@ -144,6 +144,7 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import {
   ALLOWED_FILE_TYPES,
   ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+  ALLOWED_FILE_TYPES_FOR_LINE,
 } from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
@@ -270,6 +271,9 @@ export default {
       return this.showFileUpload || this.isNote;
     },
     showAudioRecorderButton() {
+      if (this.isALineChannel) {
+        return false;
+      }
       // Disable audio recorder for safari browser as recording is not supported
       const isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(
         navigator.userAgent
@@ -291,6 +295,9 @@ export default {
       if (this.isATwilioWhatsAppChannel) {
         return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
       }
+      if (this.isALineChannel) {
+        return ALLOWED_FILE_TYPES_FOR_LINE;
+      }
       return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {

app/javascript/dashboard/components/widgets/conversation/CannedResponse.vue

@@ -1,5 +1,9 @@
 <template>
-  <mention-box :items="items" @mention-select="handleMentionClick">
+  <mention-box
+    v-if="items.length"
+    :items="items"
+    @mention-select="handleMentionClick"
+  >
     <template slot-scope="{ item }">
       <strong>{{ item.label }}</strong> - {{ item.description }}
     </template>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -41,7 +41,7 @@
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           :grouped-filters="true"
-          :v="$v.appliedFilters.$each[i]"
+          :v="v$.appliedFilters.$each[i]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -80,7 +80,7 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
+import { required, requiredIf } from '@vuelidate/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -89,6 +89,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { useVuelidate } from '@vuelidate/core';
 
 export default {
   components: {
@@ -117,6 +118,9 @@ export default {
       default: false,
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   validations: {
     appliedFilters: {
       required,
@@ -347,8 +351,8 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
+      this.v$.$touch();
-      if (this.$v.$invalid) return;
+      if (this.v$.$invalid) return;
       this.$store.dispatch(
         'setConversationFilters',
         JSON.parse(JSON.stringify(this.appliedFilters))

app/javascript/dashboard/components/widgets/conversation/ConversationBasicFilter.vue

@@ -34,7 +34,7 @@
           type="sort"
           :selected-value="sortFilter"
           :items="chatSortItems"
-          path-prefix="CHAT_LIST.CHAT_SORT_FILTER_ITEMS"
+          path-prefix="CHAT_LIST.SORT_ORDER_ITEMS"
           @onChangeFilter="onChangeFilter"
         />
       </div>
@@ -58,7 +58,7 @@ export default {
     return {
       showActionsDropdown: false,
       chatStatusItems: this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS'),
-      chatSortItems: this.$t('CHAT_LIST.CHAT_SORT_FILTER_ITEMS'),
+      chatSortItems: this.$t('CHAT_LIST.SORT_ORDER_ITEMS'),
     };
   },
   computed: {
@@ -70,7 +70,9 @@ export default {
       return this.chatStatusFilter || wootConstants.STATUS_TYPE.OPEN;
     },
     sortFilter() {
-      return this.chatSortFilter || wootConstants.SORT_BY_TYPE.LATEST;
+      return (
+        this.chatSortFilter || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC
+      );
     },
   },
   methods: {

app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -31,7 +31,7 @@
       size="40px"
     />
     <div
-      class="px-0 py-3 border-b group-last:border-transparent group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
+      class="px-0 py-3 border-b group-hover:border-transparent border-slate-50 dark:border-slate-800/75 columns"
     >
       <div class="flex justify-between">
         <inbox-name v-if="showInboxName" :inbox="inbox" />
@@ -175,6 +175,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    enableContextMenu: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -289,6 +293,7 @@ export default {
       this.$emit(action, this.chat.id, this.inbox.id);
     },
     openContextMenu(e) {
+      if (!this.enableContextMenu) return;
       e.preventDefault();
       this.$emit('context-menu-toggle', true);
       this.contextMenu.x = e.pageX || e.clientX;

app/javascript/dashboard/components/widgets/conversation/EmailTranscriptModal.vue

@@ -45,14 +45,14 @@
             }}</label>
           </div>
           <div v-if="sentToOtherEmailAddress" class="w-[50%] mt-1">
-            <label :class="{ error: $v.email.$error }">
+            <label :class="{ error: v$.email.$error }">
               <input
                 v-model.trim="email"
                 type="text"
                 :placeholder="$t('EMAIL_TRANSCRIPT.FORM.EMAIL.PLACEHOLDER')"
-                @input="$v.email.$touch"
+                @input="v$.email.$touch"
               />
-              <span v-if="$v.email.$error" class="message">
+              <span v-if="v$.email.$error" class="message">
                 {{ $t('EMAIL_TRANSCRIPT.FORM.EMAIL.ERROR') }}
               </span>
             </label>
@@ -73,8 +73,10 @@
 </template>
 
 <script>
-import { required, minLength, email } from 'vuelidate/lib/validators';
+import { required, minLength, email } from '@vuelidate/validators';
 import alertMixin from 'shared/mixins/alertMixin';
+import { useVuelidate } from '@vuelidate/core';
+
 export default {
   mixins: [alertMixin],
   props: {
@@ -87,6 +89,9 @@ export default {
       default: () => ({}),
     },
   },
+  setup() {
+    return { v$: useVuelidate() };
+  },
   data() {
     return {
       email: '',
@@ -108,7 +113,7 @@ export default {
     isFormValid() {
       if (this.selectedType) {
         if (this.sentToOtherEmailAddress) {
-          return !!this.email && !this.$v.email.$error;
+          return !!this.email && !this.v$.email.$error;
         }
         return true;
       }

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -1,7 +1,10 @@
 <template>
   <li v-if="shouldRenderMessage" :id="`message${data.id}`" :class="alignBubble">
     <div :class="wrapClass">
-      <div v-if="isFailed" class="message-failed--alert">
+      <div
+        v-if="isFailed && !hasOneDayPassed && !isAnEmailInbox"
+        class="message-failed--alert"
+      >
         <woot-button
           v-tooltip.top-end="$t('CONVERSATION.TRY_AGAIN')"
           size="tiny"
@@ -29,8 +32,19 @@
           :message-type="data.message_type"
           :parent-has-attachments="hasAttachments"
         />
+        <div v-if="isUnsupported">
+          <template v-if="isAFacebookInbox && isInstagram">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM') }}
+          </template>
+          <template v-else-if="isAFacebookInbox">
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE_FACEBOOK') }}
+          </template>
+          <template v-else>
+            {{ $t('CONVERSATION.UNSUPPORTED_MESSAGE') }}
+          </template>
+        </div>
         <bubble-text
-          v-if="data.content"
+          v-else-if="data.content"
           :message="message"
           :is-email="isEmailContentType"
           :display-quoted-button="displayQuotedButton"
@@ -148,6 +162,7 @@ import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { ACCOUNT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
+import { getDayDifferenceFromNow } from 'shared/helpers/DateHelper';
 
 export default {
   components: {
@@ -175,6 +190,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    isAFacebookInbox: {
+      type: Boolean,
+      default: false,
+    },
+    isInstagram: {
+      type: Boolean,
+      default: false,
+    },
     isAWhatsAppChannel: {
       type: Boolean,
       default: false,
@@ -183,6 +206,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isAnEmailInbox: {
+      type: Boolean,
+      default: false,
+    },
     inboxSupportsReplyTo: {
       type: Object,
       default: () => ({}),
@@ -209,11 +236,16 @@ export default {
         created_at: this.data.created_at || '',
       }));
     },
+    hasOneDayPassed() {
+      // Disable retry button if the message is failed and the message is older than 24 hours
+      return getDayDifferenceFromNow(new Date(), this.data?.created_at) >= 1;
+    },
     shouldRenderMessage() {
       return (
         this.hasAttachments ||
         this.data.content ||
         this.isEmailContentType ||
+        this.isUnsupported ||
         this.isAnIntegrationMessage
       );
     },
@@ -402,6 +434,7 @@ export default {
       return {
         bubble: this.isBubble,
         'is-private': this.data.private,
+        'is-unsupported': this.isUnsupported,
         'is-image': this.hasMediaAttachment('image'),
         'is-video': this.hasMediaAttachment('video'),
         'is-text': this.hasText,
@@ -410,6 +443,9 @@ export default {
         'is-email': this.isEmailContentType,
       };
     },
+    isUnsupported() {
+      return this.contentAttributes.is_unsupported ?? false;
+    },
     isPending() {
       return this.data.status === MESSAGE_STATUS.PROGRESS;
     },
@@ -421,11 +457,7 @@ export default {
       return !this.sender.type || this.sender.type === 'agent_bot';
     },
     shouldShowContextMenu() {
-      return !(this.isFailed || this.isPending);
+      return !(this.isFailed || this.isPending || this.isUnsupported);
-    },
-    errorMessage() {
-      const { meta } = this.data;
-      return meta ? meta.error : '';
     },
     showAvatar() {
       if (this.isOutgoing || this.isTemplate) {
@@ -527,6 +559,14 @@ export default {
   > .bubble {
     @apply min-w-[128px];
 
+    &.is-unsupported {
+      @apply text-xs max-w-[300px] border-dashed border border-slate-200 text-slate-600 dark:text-slate-200 bg-slate-50 dark:bg-slate-700 dark:border-slate-500;
+
+      .message-text--metadata .time {
+        @apply text-slate-400 dark:text-slate-300;
+      }
+    }
+
     &.is-image,
     &.is-video {
       @apply p-0 overflow-hidden;
@@ -539,10 +579,12 @@ export default {
         > video {
           @apply rounded-lg;
         }
+
         > video {
           @apply h-full w-full object-cover;
         }
       }
+
       .video {
         @apply h-[11.25rem];
       }
@@ -557,9 +599,11 @@ export default {
       .file--icon {
         @apply text-woot-400 dark:text-woot-400;
       }
+
       .text-block-title {
         @apply text-slate-700 dark:text-slate-700;
       }
+
       .download.button {
         @apply text-woot-400 dark:text-woot-400;
       }
@@ -568,6 +612,7 @@ export default {
     &.is-private.is-text > .message-text__wrap .link {
       @apply text-woot-600 dark:text-woot-200;
     }
+
     &.is-private.is-text > .message-text__wrap .prosemirror-mention-node {
       @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
     }
@@ -578,6 +623,7 @@ export default {
       .message-text--metadata .time {
         @apply text-violet-50 dark:text-violet-50;
       }
+
       &.is-private .message-text--metadata .time {
         @apply text-slate-400 dark:text-slate-400;
       }

app/javascript/dashboard/components/widgets/conversation/MessagePreview.vue

@@ -20,7 +20,15 @@
         icon="info"
       />
     </template>
-    <span v-if="message.content">
+    <span v-if="message.content && isMessageSticker">
+      <fluent-icon
+        size="16"
+        class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+        icon="image"
+      />
+      {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+    </span>
+    <span v-else-if="message.content">
       {{ parsedLastMessage }}
     </span>
     <span v-else-if="message.attachments">
@@ -88,6 +96,9 @@ export default {
     attachmentMessageContent() {
       return `CHAT_LIST.ATTACHMENTS.${this.lastMessageFileType}.CONTENT`;
     },
+    isMessageSticker() {
+      return this.message && this.message.content_type === 'sticker';
+    },
   },
 };
 </script>

app/javascript/dashboard/components/widgets/conversation/MessagesView.vue

@@ -32,6 +32,9 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-an-email-inbox="isAnEmailChannel"
+        :is-instagram="isInstagramDM"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
@@ -54,6 +57,8 @@
         :is-a-tweet="isATweet"
         :is-a-whatsapp-channel="isAWhatsAppChannel"
         :is-web-widget-inbox="isAWebWidgetInbox"
+        :is-a-facebook-inbox="isAFacebookInbox"
+        :is-instagram-dm="isInstagramDM"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :in-reply-to="getInReplyToMessage(message)"
       />
@@ -283,11 +288,16 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    isInstagramDM() {
+      return this.conversationType === 'instagram_direct_message';
+    },
     inboxSupportsReplyTo() {
-      return {
+      const incoming = this.inboxHasFeature(INBOX_FEATURES.REPLY_TO);
-        incoming: this.inboxHasFeature(INBOX_FEATURES.REPLY_TO),
+      const outgoing =
-        outgoing: this.inboxHasFeature(INBOX_FEATURES.REPLY_TO_OUTGOING),
+        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO_OUTGOING) &&
-      };
+        !this.is360DialogWhatsAppChannel;
+
+      return { incoming, outgoing };
     },
   },
 

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -164,7 +164,7 @@ import ReplyTopPanel from 'dashboard/components/widgets/WootWriter/ReplyTopPanel
 import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
-import MessageSignatureMissingAlert from './MessageSignatureMissingAlert';
+import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
@@ -198,7 +198,7 @@ import {
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
 
-const EmojiInput = () => import('shared/components/emoji/EmojiInput');
+const EmojiInput = () => import('shared/components/emoji/EmojiInput.vue');
 
 export default {
   components: {
@@ -271,11 +271,17 @@ export default {
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.currentChat.meta.sender.id
+      );
+    },
     shouldShowReplyToMessage() {
       return (
         this.inReplyTo?.id &&
         !this.isPrivate &&
-        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO)
+        this.inboxHasFeature(INBOX_FEATURES.REPLY_TO) &&
+        !this.is360DialogWhatsAppChannel
       );
     },
     showRichContentEditor() {
@@ -392,7 +398,8 @@ export default {
         this.isAPIInbox ||
         this.isAnEmailChannel ||
         this.isASmsInbox ||
-        this.isATelegramChannel
+        this.isATelegramChannel ||
+        this.isALineChannel
       );
     },
     replyButtonLabel() {
@@ -495,7 +502,11 @@ export default {
       return `draft-${this.conversationIdByRoute}-${this.replyType}`;
     },
     audioRecordFormat() {
-      if (this.isAWhatsAppChannel || this.isAPIInbox) {
+      if (
+        this.isAWhatsAppChannel ||
+        this.isAPIInbox ||
+        this.isATelegramChannel
+      ) {
         return AUDIO_FORMATS.OGG;
       }
       return AUDIO_FORMATS.WAV;
@@ -503,6 +514,7 @@ export default {
     messageVariables() {
       const variables = getMessageVariables({
         conversation: this.currentChat,
+        contact: this.currentContact,
       });
       return variables;
     },
@@ -624,6 +636,8 @@ export default {
           `${this.$t('CONVERSATION.REPLYBOX.INSERT_READ_MORE')} ${url}`
         );
       }
+
+      this.$track(CONVERSATION_EVENTS.INSERT_ARTICLE_LINK);
     },
     toggleRichContentEditor() {
       this.updateUISettings({
@@ -1194,6 +1208,7 @@ export default {
     @apply bg-yellow-50 dark:bg-yellow-200;
   }
 }
+
 .send-button {
   @apply mb-0;
 }
@@ -1214,6 +1229,7 @@ export default {
 
 .emoji-dialog--rtl {
   @apply left-[unset] -right-80;
+
   &::before {
     transform: rotate(90deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));

app/javascript/dashboard/components/widgets/conversation/ReplyEmailHead.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
     <div v-if="toEmails">
-      <div class="input-group small" :class="{ error: $v.toEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.toEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.TO') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.toEmailsVal.$model"
+            v-model.trim="v$.toEmailsVal.$model"
             type="text"
-            :class="{ error: $v.toEmailsVal.$error }"
+            :class="{ error: v$.toEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -17,15 +17,15 @@
       </div>
     </div>
     <div class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.ccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.ccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.LABEL') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.ccEmailsVal.$model"
+            v-model.trim="v$.ccEmailsVal.$model"
             type="text"
-            :class="{ error: $v.ccEmailsVal.$error }"
+            :class="{ error: v$.ccEmailsVal.$error }"
             :placeholder="$t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.PLACEHOLDER')"
             @blur="onBlur"
           />
@@ -39,20 +39,20 @@
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.ADD_BCC') }}
         </woot-button>
       </div>
-      <span v-if="$v.ccEmailsVal.$error" class="message">
+      <span v-if="v$.ccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.CC.ERROR') }}
       </span>
     </div>
     <div v-if="showBcc" class="input-group-wrap">
-      <div class="input-group small" :class="{ error: $v.bccEmailsVal.$error }">
+      <div class="input-group small" :class="{ error: v$.bccEmailsVal.$error }">
         <label class="input-group-label">
           {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.LABEL') }}
         </label>
         <div class="input-group-field">
           <woot-input
-            v-model.trim="$v.bccEmailsVal.$model"
+            v-model.trim="v$.bccEmailsVal.$model"
             type="text"
-            :class="{ error: $v.bccEmailsVal.$error }"
+            :class="{ error: v$.bccEmailsVal.$error }"
             :placeholder="
               $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.PLACEHOLDER')
             "
@@ -60,7 +60,7 @@
           />
         </div>
       </div>
-      <span v-if="$v.bccEmailsVal.$error" class="message">
+      <span v-if="v$.bccEmailsVal.$error" class="message">
         {{ $t('CONVERSATION.REPLYBOX.EMAIL_HEAD.BCC.ERROR') }}
       </span>
     </div>
@@ -137,7 +137,7 @@ export default {
       this.showBcc = true;
     },
     onBlur() {
-      this.$v.$touch();
+      this.v$.$touch();
       this.$emit('update:bccEmails', this.bccEmailsVal);
       this.$emit('update:ccEmails', this.ccEmailsVal);
       this.$emit('update:toEmails', this.toEmailsVal);
@@ -149,12 +149,14 @@ export default {
 .input-group-wrap .message {
   @apply text-sm text-red-500 dark:text-red-500;
 }
+
 .input-group {
   @apply border-b border-solid border-slate-75 dark:border-slate-700 my-1;
 
   .input-group-label {
     @apply border-transparent bg-transparent text-xs font-semibold pl-0;
   }
+
   .input-group-field::v-deep input {
     @apply mb-0 border-transparent;
   }
@@ -162,6 +164,7 @@ export default {
 
 .input-group.error {
   @apply border-b-red-500 dark:border-b-red-500;
+
   .input-group-label {
     @apply text-red-500 dark:text-red-500;
   }

app/javascript/dashboard/components/widgets/conversation/VariableList.vue

@@ -1,5 +1,10 @@
 <template>
-  <mention-box :items="items" @mention-select="handleVariableClick">
+  <mention-box
+    v-if="items.length"
+    type="variable"
+    :items="items"
+    @mention-select="handleVariableClick"
+  >
     <template slot-scope="{ item }">
       <span class="text-capitalize variable--list-label">
         {{ item.description }}
@@ -10,6 +15,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import { MESSAGE_VARIABLES } from 'shared/constants/messages';
 import MentionBox from '../mentions/MentionBox.vue';
 
@@ -22,7 +28,16 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({
+      customAttributes: 'attributes/getAttributes',
+    }),
     items() {
+      return [
+        ...this.standardAttributeVariables,
+        ...this.customAttributeVariables,
+      ];
+    },
+    standardAttributeVariables() {
       return MESSAGE_VARIABLES.filter(variable => {
         return (
           variable.label.includes(this.searchKey) ||
@@ -34,6 +49,20 @@ export default {
         description: variable.label,
       }));
     },
+    customAttributeVariables() {
+      return this.customAttributes.map(attribute => {
+        const attributePrefix =
+          attribute.attribute_model === 'conversation_attribute'
+            ? 'conversation'
+            : 'contact';
+
+        return {
+          label: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
+          key: `${attributePrefix}.custom_attribute.${attribute.attribute_key}`,
+          description: attribute.attribute_description,
+        };
+      });
+    },
   },
   methods: {
     handleVariableClick(item = {}) {