test: add more cases

This pull request addresses the issue where an error is encountered while attempting to delete user-associated accounts through the Super Admin Console. The problem arises from an error that occurs when the "destroy" action is triggered on an associated account.

Fixes: #7809

.circleci/config.yml

@@ -15,9 +15,9 @@ defaults: &defaults
     - image: cimg/postgres:15.3
     - image: cimg/redis:6.2.6
   environment:
-      - RAILS_LOG_TO_STDOUT: false
-      - COVERAGE: true
-      - LOG_LEVEL: warn
+    - RAILS_LOG_TO_STDOUT: false
+    - COVERAGE: true
+    - LOG_LEVEL: warn
   parallelism: 4
   resource_class: large
 
@@ -46,7 +46,7 @@ jobs:
             export NVM_DIR="$HOME/.nvm"
             [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
             [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
-            nvm install v16
+            nvm install v20
             echo 'export NVM_DIR="$HOME/.nvm"' >> $BASH_ENV
             echo '[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"' >> $BASH_ENV
 
@@ -64,7 +64,6 @@ jobs:
             - ~/.bundle
           key: chatwoot-bundle-{{ .Environment.CACHE_VERSION }}-v20220524-{{ checksum "Gemfile.lock" }}
 
-
       # Only necessary if app uses webpacker or yarn in some other way
       - restore_cache:
           keys:
@@ -82,7 +81,7 @@ jobs:
             - ~/.cache/yarn
 
       - run:
-          name:  Download cc-test-reporter
+          name: Download cc-test-reporter
           command: |
             mkdir -p ~/tmp
             curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
@@ -182,7 +181,7 @@ jobs:
       - attach_workspace:
           at: ~/build
       - run:
-          name:  Download cc-test-reporter
+          name: Download cc-test-reporter
           command: |
             mkdir -p ~/tmp
             curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
@@ -204,4 +203,4 @@ workflows:
       - build
       - upload-coverage:
           requires:
-             - build
+            - build

.env.example

@@ -199,6 +199,8 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## Rack Attack configuration
 ## To prevent and throttle abusive requests
 # ENABLE_RACK_ATTACK=true
+# RACK_ATTACK_IP_LIMIT=3000
+# ENABLE_RACK_ATTACK_WIDGET_API=true
 
 ## Running chatwoot as an API only server
 ## setting this value to true will disable the frontend dashboard endpoints

.github/workflows/logging_percentage_check.yml

@@ -0,0 +1,55 @@
+name: Log Lines Percentage Check
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  log_lines_check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Check for log lines and calculate percentage
+        run: |
+          # Define the log line pattern
+          LOG_LINE_PATTERN="Rails\.logger"
+
+          # Get the list of changed files in the pull request
+          CHANGED_FILES=$(git diff --name-only)
+
+          # Initialize a flag to track if any files have insufficient log lines
+          INSUFFICIENT_LOGS=0
+
+          for file in $CHANGED_FILES; do
+            if [[ $file =~ \.rb$ && ! $file =~ _spec\.rb$ ]]; then
+              # Count the total number of lines in the file
+              total_lines=$(wc -l < "$file")
+
+              # Count the number of log lines in the file
+              log_lines=$(grep -c "$LOG_LINE_PATTERN" "$file")
+
+              # Calculate the percentage of log lines
+              if [ "$total_lines" -gt 0 ]; then
+                percentage=$(awk "BEGIN { pc=100*${log_lines}/${total_lines}; i=int(pc); print (pc-i<0.5)?i:i+1 }")
+              else
+                percentage=0
+              fi
+
+              # Check if the percentage is less than 5%
+              if [ "$percentage" -lt 5 ]; then
+                echo "Error: Log lines percentage is less than 5% ($percentage%) in $file. Please add more log lines using Rails.logger statements."
+                INSUFFICIENT_LOGS=1
+              else
+                echo "Log lines percentage is $percentage% in $file. Code looks good!"
+              fi
+            fi
+          done
+
+          # If any files have insufficient log lines, fail the action
+          if [ "$INSUFFICIENT_LOGS" -eq 1 ]; then
+            exit 1
+          fi

.github/workflows/run_foss_spec.yml

@@ -52,7 +52,8 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
+        cache: yarn
 
     - name: yarn
       run: yarn install
@@ -75,6 +76,8 @@ jobs:
     - name: Run backend tests
       run: |
         bundle exec rspec --profile=10 --format documentation
+      env: 
+        NODE_OPTIONS: --openssl-legacy-provider
 
     - name: Upload rails log folder
       uses: actions/upload-artifact@v3

.github/workflows/run_response_bot_spec.yml

@@ -51,7 +51,8 @@ jobs:
 
     - uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 20
+        cache: yarn
 
     - name: yarn
       run: yarn install

.github/workflows/size-limit.yml

@@ -21,7 +21,8 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
+          cache: 'yarn'
 
       - name: yarn
         run: yarn install
@@ -30,9 +31,11 @@ jobs:
         run: |
           rm -rf enterprise
           rm -rf spec/enterprise
-
+          
       - name: Run asset compile
         run: bundle exec rake assets:precompile
+        env:
+          NODE_OPTIONS: --openssl-legacy-provider
 
       - name: Size Check
         run: yarn run size

.nvmrc

@@ -1 +1 @@
-14.17.4
+20.5.1

.rubocop.yml

@@ -8,15 +8,11 @@ Layout/LineLength:
   Max: 150
 
 Metrics/ClassLength:
-  Max: 125
+  Max: 175
   Exclude:
-    - 'app/models/conversation.rb'
-    - 'app/models/contact.rb'
-    - 'app/mailers/conversation_reply_mailer.rb'
     - 'app/models/message.rb'
-    - 'app/builders/messages/facebook/message_builder.rb'
-    - 'app/controllers/api/v1/accounts/contacts_controller.rb'
-    - 'app/listeners/action_cable_listener.rb'
+    - 'app/models/conversation.rb'
+
 RSpec/ExampleLength:
   Max: 25
 Style/Documentation:
@@ -73,7 +69,7 @@ Rails/ApplicationController:
     - 'app/controllers/survey/responses_controller.rb'
 Rails/FindEach:
   Enabled: true
-  Include: 
+  Include:
     - 'app/**/*.rb'
 Rails/CompactBlank:
   Enabled: false
@@ -189,7 +185,6 @@ RSpec/IndexedLet:
 RSpec/NamedSubject:
   Enabled: false
 
-
 # we should bring this down
 RSpec/MultipleMemoizedHelpers:
   Max: 14

.storybook/main.js

@@ -23,6 +23,18 @@ module.exports = {
     },
     '@storybook/addon-links',
     '@storybook/addon-essentials',
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
   ],
   webpackFinal: config => {
     const newConfig = {
@@ -35,7 +47,7 @@ module.exports = {
 
     newConfig.module.rules.push({
       test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'sass-loader'],
+      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
       include: path.resolve(__dirname, '../app/javascript'),
     });
 

.storybook/preview.js

@@ -4,10 +4,12 @@ import Vuex from 'vuex';
 import VueI18n from 'vue-i18n';
 import Vuelidate from 'vuelidate';
 import Multiselect from 'vue-multiselect';
+import VueDOMPurifyHTML from 'vue-dompurify-html';
 import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
 
 import WootUiKit from '../app/javascript/dashboard/components';
 import i18n from '../app/javascript/dashboard/i18n';
+import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
 
 import '../app/javascript/dashboard/assets/scss/storybook.scss';
 
@@ -15,6 +17,8 @@ Vue.use(VueI18n);
 Vue.use(Vuelidate);
 Vue.use(WootUiKit);
 Vue.use(Vuex);
+Vue.use(VueDOMPurifyHTML, domPurifyConfig);
+
 Vue.component('multiselect', Multiselect);
 Vue.component('fluent-icon', FluentIcon);
 

Gemfile

@@ -4,7 +4,7 @@ ruby '3.2.2'
 
 ##-- base gems for rails --##
 gem 'rack-cors', require: 'rack/cors'
-gem 'rails', '~> 7.0.5.1'
+gem 'rails', '~> 7.0.8.0'
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', require: false
 
@@ -34,7 +34,7 @@ gem 'commonmarker'
 # Validate Data against JSON Schema
 gem 'json_schemer'
 # Rack middleware for blocking & throttling abusive requests
-gem 'rack-attack'
+gem 'rack-attack', '>= 6.7.0'
 # a utility tool for streaming, flexible and safe downloading of remote files
 gem 'down'
 # authentication type to fetch and send mail over oauth2.0
@@ -108,14 +108,14 @@ gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', require: false
 gem 'scout_apm', require: false
-gem 'sentry-rails', '>= 5.10.0', require: false
+gem 'sentry-rails', '>= 5.11.0', require: false
 gem 'sentry-ruby', require: false
-gem 'sentry-sidekiq', '>= 5.10.0', require: false
+gem 'sentry-sidekiq', '>= 5.11.0', require: false
 
 ##-- background job processing --##
-gem 'sidekiq'
+gem 'sidekiq', '>= 7.1.3'
 # We want cron jobs
-gem 'sidekiq-cron'
+gem 'sidekiq-cron', '>= 1.10.1'
 
 ##-- Push notification service --##
 gem 'fcm'
@@ -153,7 +153,7 @@ gem 'stripe'
 gem 'faker'
 
 # Include logrange conditionally in intializer using env variable
-gem 'lograge', '~> 0.12.0', require: false
+gem 'lograge', '~> 0.13.0', require: false
 
 # worked with microsoft refresh token
 gem 'omniauth-oauth2'
@@ -188,7 +188,7 @@ group :development do
   gem 'bullet'
   gem 'letter_opener'
   gem 'scss_lint', require: false
-  gem 'web-console'
+  gem 'web-console', '>= 4.2.1'
 
   # used in swagger build
   gem 'json_refs'
@@ -197,7 +197,7 @@ group :development do
   gem 'squasher'
 
   # profiling
-  gem 'rack-mini-profiler', require: false
+  gem 'rack-mini-profiler', '>= 3.1.1', require: false
   gem 'stackprof'
 end
 

Gemfile.lock

@@ -33,70 +33,70 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actioncable (7.0.8)
+      actionpack (= 7.0.8)
+      activesupport (= 7.0.8)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      activejob (= 7.0.5.1)
-      activerecord (= 7.0.5.1)
-      activestorage (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actionmailbox (7.0.8)
+      actionpack (= 7.0.8)
+      activejob (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      actionview (= 7.0.5.1)
-      activejob (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actionmailer (7.0.8)
+      actionpack (= 7.0.8)
+      actionview (= 7.0.8)
+      activejob (= 7.0.8)
+      activesupport (= 7.0.8)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.5.1)
-      actionview (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actionpack (7.0.8)
+      actionview (= 7.0.8)
+      activesupport (= 7.0.8)
       rack (~> 2.0, >= 2.2.4)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      activerecord (= 7.0.5.1)
-      activestorage (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actiontext (7.0.8)
+      actionpack (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.0.5.1)
-      activesupport (= 7.0.5.1)
+    actionview (7.0.8)
+      activesupport (= 7.0.8)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
     active_record_query_trace (1.8)
-    activejob (7.0.5.1)
-      activesupport (= 7.0.5.1)
+    activejob (7.0.8)
+      activesupport (= 7.0.8)
       globalid (>= 0.3.6)
-    activemodel (7.0.5.1)
-      activesupport (= 7.0.5.1)
-    activerecord (7.0.5.1)
-      activemodel (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    activemodel (7.0.8)
+      activesupport (= 7.0.8)
+    activerecord (7.0.8)
+      activemodel (= 7.0.8)
+      activesupport (= 7.0.8)
     activerecord-import (1.4.1)
       activerecord (>= 4.2)
-    activestorage (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      activejob (= 7.0.5.1)
-      activerecord (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    activestorage (7.0.8)
+      actionpack (= 7.0.8)
+      activejob (= 7.0.8)
+      activerecord (= 7.0.8)
+      activesupport (= 7.0.8)
       marcel (~> 1.0)
       mini_mime (>= 1.1.0)
-    activesupport (7.0.5.1)
+    activesupport (7.0.8)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -162,7 +162,7 @@ GEM
     byebug (11.1.3)
     climate_control (1.2.0)
     coderay (1.1.3)
-    commonmarker (0.23.9)
+    commonmarker (0.23.10)
     concurrent-ruby (1.2.2)
     connection_pool (2.4.1)
     crack (0.4.5)
@@ -269,8 +269,8 @@ GEM
       grpc (~> 1.36)
     geocoder (1.8.1)
     gli (2.21.0)
-    globalid (1.1.0)
-      activesupport (>= 5.0)
+    globalid (1.2.1)
+      activesupport (>= 6.1)
     gmail_xoauth (0.4.2)
       oauth (>= 0.3.6)
     google-apis-core (0.11.0)
@@ -429,7 +429,7 @@ GEM
     llhttp-ffi (0.4.0)
       ffi-compiler (~> 1.0)
       rake (~> 13.0)
-    lograge (0.12.0)
+    lograge (0.13.0)
       actionpack (>= 4)
       activesupport (>= 4)
       railties (>= 4)
@@ -450,9 +450,9 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
-    mini_mime (1.1.2)
+    mini_mime (1.1.5)
     mini_portile2 (2.8.4)
-    minitest (5.18.1)
+    minitest (5.20.0)
     mock_redis (0.36.0)
       ruby2_keywords
     msgpack (1.7.0)
@@ -463,7 +463,7 @@ GEM
       activerecord (>= 5.2)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.3.6)
+    net-imap (0.3.7)
       date
       net-protocol
     net-pop (0.1.2)
@@ -478,14 +478,14 @@ GEM
       sidekiq
     newrelic_rpm (8.16.0)
     nio4r (2.5.9)
-    nokogiri (1.15.3)
+    nokogiri (1.15.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.15.3-arm64-darwin)
+    nokogiri (1.15.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-darwin)
+    nokogiri (1.15.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.15.3-x86_64-linux)
+    nokogiri (1.15.4-x86_64-linux)
       racc (~> 1.4)
     numo-narray (0.9.2.1)
     oauth (1.1.0)
@@ -543,18 +543,18 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (5.0.1)
-    puma (6.2.2)
+    puma (6.3.1)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.7.1)
-    rack (2.2.7)
-    rack-attack (6.6.1)
-      rack (>= 1.0, < 3)
+    rack (2.2.8)
+    rack-attack (6.7.0)
+      rack (>= 1.0, < 4)
     rack-cors (2.0.1)
       rack (>= 2.0.0)
-    rack-mini-profiler (3.1.0)
+    rack-mini-profiler (3.1.1)
       rack (>= 1.2.0)
     rack-protection (3.0.6)
       rack
@@ -563,30 +563,30 @@ GEM
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rails (7.0.5.1)
-      actioncable (= 7.0.5.1)
-      actionmailbox (= 7.0.5.1)
-      actionmailer (= 7.0.5.1)
-      actionpack (= 7.0.5.1)
-      actiontext (= 7.0.5.1)
-      actionview (= 7.0.5.1)
-      activejob (= 7.0.5.1)
-      activemodel (= 7.0.5.1)
-      activerecord (= 7.0.5.1)
-      activestorage (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    rails (7.0.8)
+      actioncable (= 7.0.8)
+      actionmailbox (= 7.0.8)
+      actionmailer (= 7.0.8)
+      actionpack (= 7.0.8)
+      actiontext (= 7.0.8)
+      actionview (= 7.0.8)
+      activejob (= 7.0.8)
+      activemodel (= 7.0.8)
+      activerecord (= 7.0.8)
+      activestorage (= 7.0.8)
+      activesupport (= 7.0.8)
       bundler (>= 1.15.0)
-      railties (= 7.0.5.1)
-    rails-dom-testing (2.1.1)
+      railties (= 7.0.8)
+    rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.6.0)
       loofah (~> 2.21)
       nokogiri (~> 1.14)
-    railties (7.0.5.1)
-      actionpack (= 7.0.5.1)
-      activesupport (= 7.0.5.1)
+    railties (7.0.8)
+      actionpack (= 7.0.8)
+      activesupport (= 7.0.8)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -598,7 +598,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.14.1)
+    redis-client (0.17.0)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -697,23 +697,23 @@ GEM
       activesupport (>= 4)
     selectize-rails (0.12.6)
     semantic_range (3.0.0)
-    sentry-rails (5.10.0)
+    sentry-rails (5.11.0)
       railties (>= 5.0)
-      sentry-ruby (~> 5.10.0)
-    sentry-ruby (5.10.0)
+      sentry-ruby (~> 5.11.0)
+    sentry-ruby (5.11.0)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-    sentry-sidekiq (5.10.0)
-      sentry-ruby (~> 5.10.0)
+    sentry-sidekiq (5.11.0)
+      sentry-ruby (~> 5.11.0)
       sidekiq (>= 3.0)
     sexp_processor (4.17.0)
     shoulda-matchers (5.3.0)
       activesupport (>= 5.2.0)
-    sidekiq (7.1.2)
+    sidekiq (7.1.3)
       concurrent-ruby (< 2)
       connection_pool (>= 2.3.0)
       rack (>= 2.2.4)
       redis-client (>= 0.14.0)
-    sidekiq-cron (1.10.0)
+    sidekiq-cron (1.10.1)
       fugit (~> 1.8)
       globalid (>= 1.0.1)
       sidekiq (>= 6)
@@ -786,7 +786,7 @@ GEM
     version_gem (1.1.2)
     warden (1.2.9)
       rack (>= 2.0.9)
-    web-console (4.2.0)
+    web-console (4.2.1)
       actionview (>= 6.0.0)
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
@@ -805,14 +805,14 @@ GEM
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
     webrick (1.8.1)
-    websocket-driver (0.7.5)
+    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     wisper (2.0.0)
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.6.8)
+    zeitwerk (2.6.11)
 
 PLATFORMS
   arm64-darwin-20
@@ -886,7 +886,7 @@ DEPENDENCIES
   line-bot-api
   liquid
   listen
-  lograge (~> 0.12.0)
+  lograge (~> 0.13.0)
   maxminddb
   mock_redis
   neighbor
@@ -903,11 +903,11 @@ DEPENDENCIES
   pry-rails
   puma
   pundit
-  rack-attack
+  rack-attack (>= 6.7.0)
   rack-cors
-  rack-mini-profiler
+  rack-mini-profiler (>= 3.1.1)
   rack-timeout
-  rails (~> 7.0.5.1)
+  rails (~> 7.0.8.0)
   redis
   redis-namespace
   responders
@@ -922,12 +922,12 @@ DEPENDENCIES
   scout_apm
   scss_lint
   seed_dump
-  sentry-rails (>= 5.10.0)
+  sentry-rails (>= 5.11.0)
   sentry-ruby
-  sentry-sidekiq (>= 5.10.0)
+  sentry-sidekiq (>= 5.11.0)
   shoulda-matchers
-  sidekiq
-  sidekiq-cron
+  sidekiq (>= 7.1.3)
+  sidekiq-cron (>= 1.10.1)
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.0.0)
   spring
@@ -943,7 +943,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier
   valid_email2
-  web-console
+  web-console (>= 4.2.1)
   web-push
   webmock
   webpacker

Procfile.dev

@@ -1,4 +1,4 @@
 backend: bin/rails s -p 3000
-frontend: bin/webpack-dev-server
+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

VERSION_CW

@@ -1 +1 @@
-2.17.0
+3.1.0

VERSION_CWCTL

@@ -1 +1 @@
-2.3.0
+2.4.0

app.json

@@ -60,6 +60,9 @@
   ],
   "stack": "heroku-20",
   "buildpacks": [
+    {
+      "url": "heroku/nodejs"
+    },
     {
       "url": "heroku/ruby"
     }

app/assets/stylesheets/administrate/application.scss

@@ -29,3 +29,5 @@
 @import 'components/pagination';
 @import 'components/search';
 @import 'components/reports';
+
+@import 'custom_styles';

app/assets/stylesheets/administrate/custom_styles.scss

@@ -0,0 +1,24 @@
+// custom styles for the dashboard
+
+.feature-cell {
+  background: $color-extra-light-blue;
+  border-radius: 10px;
+  float: left;
+  margin-left: 8px;
+  margin-top: 6px;
+  padding: 4px 12px;
+
+  .icon-container {
+    margin-right: 4px;
+
+  }
+
+  .value-container {
+    margin-left: 6px;
+  }
+}
+
+
+.feature-container {
+  max-width: 100rem;
+}

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

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   before_action :portal
   before_action :check_authorization
-  before_action :fetch_article, except: [:index, :create, :attach_file, :reorder]
+  before_action :fetch_article, except: [:index, :create, :reorder]
   before_action :set_current_page, only: [:index]
 
   def index
@@ -36,17 +36,6 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
     head :ok
   end
 
-  def attach_file
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:background_image].tempfile,
-      filename: params[:background_image].original_filename,
-      content_type: params[:background_image].content_type
-    )
-    file_blob.save!
-    render json: { file_url: url_for(file_blob) }
-  end
-
   def reorder
     Article.update_positions(params[:positions_hash])
     head :ok

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

@@ -20,16 +20,6 @@ class Api::V1::Accounts::AutomationRulesController < Api::V1::Accounts::BaseCont
     @automation_rule
   end
 
-  def attach_file
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:attachment].tempfile,
-      filename: params[:attachment].original_filename,
-      content_type: params[:attachment].content_type
-    )
-    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
-  end
-
   def update
     ActiveRecord::Base.transaction do
       automation_rule_update

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

@@ -14,8 +14,18 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
       @facebook_inbox = Current.account.inboxes.create!(name: inbox_name, channel: facebook_channel)
       set_instagram_id(page_access_token, facebook_channel)
       set_avatar(@facebook_inbox, page_id)
-    rescue StandardError => e
-      ChatwootExceptionTracker.new(e).capture_exception
+    end
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    Rails.logger.error "Error in register_facebook_page: #{e.message}"
+    # Additional log statements
+    log_additional_info
+  end
+
+  def log_additional_info
+    Rails.logger.debug do
+      "user_access_token: #{params[:user_access_token]} , page_access_token: #{params[:page_access_token]} ,
+      page_id: #{params[:page_id]}, inbox_name: #{params[:inbox_name]}"
     end
   end
 
@@ -30,6 +40,8 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
 
     instagram_id = response['instagram_business_account']['id']
     facebook_channel.update(instagram_id: instagram_id)
+  rescue StandardError => e
+    Rails.logger.error "Error in set_instagram_id: #{e.message}"
   end
 
   # get params[:inbox_id], current_account. params[:omniauth_token]
@@ -61,6 +73,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
       fb_page&.reauthorized!
     rescue StandardError => e
       ChatwootExceptionTracker.new(e).capture_exception
+      Rails.logger.error "Error in update_fb_page: #{e.message}"
     end
   end
 
@@ -77,7 +90,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
     koala = Koala::Facebook::OAuth.new(GlobalConfigService.load('FB_APP_ID', ''), GlobalConfigService.load('FB_APP_SECRET', ''))
     koala.exchange_access_token_info(omniauth_token)['access_token']
   rescue StandardError => e
-    Rails.logger.error e
+    Rails.logger.error "Error in long_lived_token: #{e.message}"
   end
 
   def mark_already_existing_facebook_pages(data)

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

@@ -4,6 +4,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   sort_on :name, internal_name: :order_on_name, type: :scope, scope_params: [:direction]
   sort_on :phone_number, type: :string
   sort_on :last_activity_at, internal_name: :order_on_last_activity_at, type: :scope, scope_params: [:direction]
+  sort_on :created_at, internal_name: :order_on_created_at, type: :scope, scope_params: [:direction]
   sort_on :company, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
   sort_on :city, internal_name: :order_on_city, type: :scope, scope_params: [:direction]
   sort_on :country, internal_name: :order_on_country_name, type: :scope, scope_params: [:direction]
@@ -17,7 +18,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
 
   def index
     @contacts_count = resolved_contacts.count
-    @contacts = fetch_contacts_with_conversation_count(resolved_contacts)
+    @contacts = fetch_contacts(resolved_contacts)
   end
 
   def search
@@ -28,7 +29,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
       search: "%#{params[:q].strip}%"
     )
     @contacts_count = contacts.count
-    @contacts = fetch_contacts_with_conversation_count(contacts)
+    @contacts = fetch_contacts(contacts)
   end
 
   def import
@@ -62,7 +63,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     result = ::Contacts::FilterService.new(params.permit!, current_user).perform
     contacts = result[:contacts]
     @contacts_count = result[:count]
-    @contacts = fetch_contacts_with_conversation_count(contacts)
+    @contacts = fetch_contacts(contacts)
   end
 
   def contactable_inboxes
@@ -124,17 +125,14 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     @current_page = params[:page] || 1
   end
 
-  def fetch_contacts_with_conversation_count(contacts)
-    conversation_count_sub_query = 'SELECT COUNT(*) FROM "conversations" WHERE "conversations"."contact_id" = "contacts"."id"'
-    contacts_with_conversation_count = filtrate(contacts)
-                                       .select("contacts.*, (#{conversation_count_sub_query}) as conversations_count")
-                                       .group('contacts.id')
-                                       .includes([{ avatar_attachment: [:blob] }])
-                                       .page(@current_page).per(RESULTS_PER_PAGE)
+  def fetch_contacts(contacts)
+    contacts_with_avatar = filtrate(contacts)
+                           .includes([{ avatar_attachment: [:blob] }])
+                           .page(@current_page).per(RESULTS_PER_PAGE)
 
-    return contacts_with_conversation_count.includes([{ contact_inboxes: [:inbox] }]) if @include_contact_inboxes
+    return contacts_with_avatar.includes([{ contact_inboxes: [:inbox] }]) if @include_contact_inboxes
 
-    contacts_with_conversation_count
+    contacts_with_avatar
   end
 
   def build_contact_inbox

app/controllers/api/v1/accounts/integrations/slack_controller.rb

@@ -1,27 +1,27 @@
 class Api::V1::Accounts::Integrations::SlackController < Api::V1::Accounts::BaseController
   before_action :check_admin_authorization?
-  before_action :fetch_hook, only: [:update, :destroy]
+  before_action :fetch_hook, only: [:update, :destroy, :list_all_channels]
+
+  def list_all_channels
+    @channels = channel_builder.fetch_channels
+  end
 
   def create
-    ActiveRecord::Base.transaction do
-      builder = Integrations::Slack::HookBuilder.new(
-        account: Current.account,
-        code: params[:code],
-        inbox_id: params[:inbox_id]
-      )
-      @hook = builder.perform
-      create_chatwoot_slack_channel
-    end
+    hook_builder = Integrations::Slack::HookBuilder.new(
+      account: Current.account,
+      code: params[:code],
+      inbox_id: params[:inbox_id]
+    )
+    @hook = hook_builder.perform
   end
 
   def update
-    create_chatwoot_slack_channel
-    render json: @hook
+    @hook = channel_builder.update(permitted_params[:reference_id])
+    render json: { error: I18n.t('errors.slack.invalid_channel_id') }, status: :unprocessable_entity if @hook.blank?
   end
 
   def destroy
     @hook.destroy!
-
     head :ok
   end
 
@@ -31,11 +31,11 @@ class Api::V1::Accounts::Integrations::SlackController < Api::V1::Accounts::Base
     @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'slack')
   end
 
-  def create_chatwoot_slack_channel
-    channel = params[:channel] || 'customer-conversations'
-    builder = Integrations::Slack::ChannelBuilder.new(
-      hook: @hook, channel: channel
-    )
-    builder.perform
+  def channel_builder
+    Integrations::Slack::ChannelBuilder.new(hook: @hook)
+  end
+
+  def permitted_params
+    params.permit(:reference_id)
   end
 end

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

@@ -39,16 +39,6 @@ class Api::V1::Accounts::MacrosController < Api::V1::Accounts::BaseController
     head :ok
   end
 
-  def attach_file
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:attachment].tempfile,
-      filename: params[:attachment].original_filename,
-      content_type: params[:attachment].content_type
-    )
-    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
-  end
-
   def execute
     ::MacrosExecutionJob.perform_later(@macro, conversation_ids: params[:conversation_ids], user: Current.user)
 

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

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   include ::FileTypeHelper
 
-  before_action :fetch_portal, except: [:index, :create, :attach_file]
+  before_action :fetch_portal, except: [:index, :create]
   before_action :check_authorization
   before_action :set_current_page, only: [:index]
 
@@ -53,16 +53,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     @portal.logo.attach(blob)
   end
 
-  def attach_file
-    file_blob = ActiveStorage::Blob.create_and_upload!(
-      key: nil,
-      io: params[:logo].tempfile,
-      filename: params[:logo].original_filename,
-      content_type: params[:logo].content_type
-    )
-    render json: { blob_key: file_blob.key, blob_id: file_blob.id }
-  end
-
   private
 
   def fetch_portal

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

@@ -0,0 +1,13 @@
+class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
+  def create
+    file_blob = ActiveStorage::Blob.create_and_upload!(
+      key: nil,
+      io: params[:attachment].tempfile,
+      filename: params[:attachment].original_filename,
+      content_type: params[:attachment].content_type
+    )
+    file_blob.save!
+
+    render json: { file_url: url_for(file_blob), blob_key: file_blob.key, blob_id: file_blob.id }
+  end
+end

app/controllers/concerns/ensure_current_account_helper.rb

@@ -8,7 +8,7 @@ module EnsureCurrentAccountHelper
 
   def ensure_current_account
     account = Account.find(params[:account_id])
-    ensure_account_is_active?(account)
+    render_unauthorized('Account is suspended') and return unless account.active?
 
     if current_user
       account_accessible_for_user?(account)
@@ -27,8 +27,4 @@ module EnsureCurrentAccountHelper
   def account_accessible_for_bot?(account)
     render_unauthorized('You are not authorized to access this account') unless @resource.agent_bot_inboxes.find_by(account_id: account.id)
   end
-
-  def ensure_account_is_active?(account)
-    render_unauthorized('Account is suspended') unless account.active?
-  end
 end

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

@@ -1,4 +1,7 @@
 class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::InboxesController
+  include Events::Types
+  before_action :set_conversation, only: [:toggle_typing, :update_last_seen]
+
   def index
     @conversations = @contact_inbox.hmac_verified? ? @contact.conversations : @contact_inbox.conversations
   end
@@ -7,12 +10,36 @@ class Public::Api::V1::Inboxes::ConversationsController < Public::Api::V1::Inbox
     @conversation = create_conversation
   end
 
+  def toggle_typing
+    case params[:typing_status]
+    when 'on'
+      trigger_typing_event(CONVERSATION_TYPING_ON)
+    when 'off'
+      trigger_typing_event(CONVERSATION_TYPING_OFF)
+    end
+    head :ok
+  end
+
+  def update_last_seen
+    @conversation.contact_last_seen_at = DateTime.now.utc
+    @conversation.save!
+    head :ok
+  end
+
   private
 
+  def set_conversation
+    @conversation = @contact_inbox.contact.conversations.find_by!(display_id: params[:id])
+  end
+
   def create_conversation
     ::Conversation.create!(conversation_params)
   end
 
+  def trigger_typing_event(event)
+    Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: @conversation, user: @conversation.contact)
+  end
+
   def conversation_params
     {
       account_id: @contact_inbox.contact.account_id,

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

@@ -8,13 +8,22 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   def index
     @articles = @portal.articles
     @articles = @articles.search(list_params) if list_params.present?
-    @articles.order(position: :asc)
+    order_by_sort_param
+    @articles.page(list_params[:page]) if list_params[:page].present?
   end
 
   def show; end
 
   private
 
+  def order_by_sort_param
+    @articles = if list_params[:sort].present? && list_params[:sort] == 'views'
+                  @articles.order_by_views
+                else
+                  @articles.order_by_position
+                end
+  end
+
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
     @article.increment_view_count
@@ -35,7 +44,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale)
+    params.permit(:query, :locale, :sort)
   end
 
   def permitted_params

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

@@ -1,8 +1,14 @@
 class Public::Api::V1::Portals::BaseController < PublicController
+  before_action :show_plain_layout
   around_action :set_locale
+  after_action :allow_iframe_requests
 
   private
 
+  def show_plain_layout
+    @is_plain_layout_enabled = params[:show_plain_layout] == 'true'
+  end
+
   def set_locale(&)
     switch_locale_with_portal(&) if params[:locale].present?
     switch_locale_with_article(&) if params[:article_slug].present?
@@ -34,4 +40,8 @@ class Public::Api::V1::Portals::BaseController < PublicController
 
     I18n.with_locale(@locale, &)
   end
+
+  def allow_iframe_requests
+    response.headers.delete('X-Frame-Options') if @is_plain_layout_enabled
+  end
 end

app/controllers/super_admin/instance_statuses_controller.rb

@@ -6,6 +6,7 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
     postgres_status
     redis_metrics
     chatwoot_edition
+    instance_meta
   end
 
   def chatwoot_edition
@@ -18,6 +19,10 @@ class SuperAdmin::InstanceStatusesController < SuperAdmin::ApplicationController
                                    end
   end
 
+  def instance_meta
+    @metrics['Database Migrations'] = ActiveRecord::Base.connection.migration_context.needs_migration? ? 'pending' : 'completed'
+  end
+
   def chatwoot_version
     @metrics['Chatwoot version'] = Chatwoot.config[:version]
   end

app/dashboards/account_dashboard.rb

@@ -86,7 +86,10 @@ class AccountDashboard < Administrate::BaseDashboard
     "##{account.id} #{account.name}"
   end
 
-  def permitted_attributes
+  # We do not use the action parameter but we still need to define it
+  # to prevent an error from being raised (wrong number of arguments)
+  # Reference: https://github.com/thoughtbot/administrate/pull/2356/files#diff-4e220b661b88f9a19ac527c50d6f1577ef6ab7b0bed2bfdf048e22e6bfa74a05R204
+  def permitted_attributes(action)
     super + [limits: {}]
   end
 end

app/javascript/dashboard/App.vue

@@ -2,8 +2,8 @@
   <div
     v-if="!authUIFlags.isFetching"
     id="app"
-    class="app-wrapper app-root"
-    :class="{ 'app-rtl--wrapper': isRTLView, dark: theme === 'dark' }"
+    class="app-wrapper h-full flex-grow-0 min-h-0 w-full"
+    :class="{ 'app-rtl--wrapper': isRTLView }"
     :dir="isRTLView ? 'rtl' : 'ltr'"
   >
     <update-banner :latest-chatwoot-version="latestChatwootVersion" />
@@ -35,12 +35,11 @@ import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import vueActionCable from './helper/actionCable';
 import WootSnackbarBox from './components/SnackbarContainer';
 import rtlMixin from 'shared/mixins/rtlMixin';
-import { LocalStorage } from 'shared/helpers/localStorage';
+import { setColorTheme } from './helper/themeHelper';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
 } from './helper/pushHelper';
-import { LOCAL_STORAGE_KEYS } from './constants/localStorage';
 
 export default {
   name: 'App',
@@ -61,7 +60,6 @@ export default {
     return {
       showAddAccountModal: false,
       latestChatwootVersion: null,
-      theme: 'light',
     };
   },
 
@@ -99,27 +97,11 @@ export default {
   },
   methods: {
     initializeColorTheme() {
-      this.setColorTheme(
-        window.matchMedia('(prefers-color-scheme: dark)').matches
-      );
-    },
-    setColorTheme(isOSOnDarkMode) {
-      const selectedColorScheme =
-        LocalStorage.get(LOCAL_STORAGE_KEYS.COLOR_SCHEME) || 'light';
-      if (
-        (selectedColorScheme === 'auto' && isOSOnDarkMode) ||
-        selectedColorScheme === 'dark'
-      ) {
-        this.theme = 'dark';
-        document.body.classList.add('dark');
-      } else {
-        this.theme = 'light ';
-        document.body.classList.remove('dark');
-      }
+      setColorTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
     },
     listenToThemeChanges() {
       const mql = window.matchMedia('(prefers-color-scheme: dark)');
-      mql.onchange = e => this.setColorTheme(e.matches);
+      mql.onchange = e => setColorTheme(e.matches);
     },
     setLocale(locale) {
       this.$root.$i18n.locale = locale;

app/javascript/dashboard/api/automation.js

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

app/javascript/dashboard/api/helpCenter/articles.js

@@ -47,20 +47,6 @@ class ArticlesAPI extends PortalsAPI {
     return axios.delete(`${this.url}/${portalSlug}/articles/${articleId}`);
   }
 
-  uploadImage({ portalSlug, file }) {
-    let formData = new FormData();
-    formData.append('background_image', file);
-    return axios.post(
-      `${this.url}/${portalSlug}/articles/attach_file`,
-      formData,
-      {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-        },
-      }
-    );
-  }
-
   reorderArticles({ portalSlug, reorderedGroup, categorySlug }) {
     return axios.post(`${this.url}/${portalSlug}/articles/reorder`, {
       positions_hash: reorderedGroup,

app/javascript/dashboard/api/integrations.js

@@ -8,11 +8,19 @@ class IntegrationsAPI extends ApiClient {
   }
 
   connectSlack(code) {
-    return axios.post(`${this.baseUrl()}/integrations/slack`, {
-      code: code,
+    return axios.post(`${this.baseUrl()}/integrations/slack`, { code });
+  }
+
+  updateSlack({ referenceId }) {
+    return axios.patch(`${this.baseUrl()}/integrations/slack`, {
+      reference_id: referenceId,
     });
   }
 
+  listAllSlackChannels() {
+    return axios.get(`${this.baseUrl()}/integrations/slack/list_all_channels`);
+  }
+
   delete(integrationId) {
     return axios.delete(`${this.baseUrl()}/integrations/${integrationId}`);
   }

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

@@ -11,7 +11,9 @@ describe('#integrationAPI', () => {
     expect(integrationAPI).toHaveProperty('update');
     expect(integrationAPI).toHaveProperty('delete');
     expect(integrationAPI).toHaveProperty('connectSlack');
-    expect(integrationAPI).toHaveProperty('createHook');
+    expect(integrationAPI).toHaveProperty('updateSlack');
+    expect(integrationAPI).toHaveProperty('updateSlack');
+    expect(integrationAPI).toHaveProperty('listAllSlackChannels');
     expect(integrationAPI).toHaveProperty('deleteHook');
   });
   describeWithAPIMock('API calls', context => {
@@ -26,6 +28,24 @@ describe('#integrationAPI', () => {
       );
     });
 
+    it('#updateSlack', () => {
+      const updateObj = { referenceId: 'SDFSDGSVE' };
+      integrationAPI.updateSlack(updateObj);
+      expect(context.axiosMock.patch).toHaveBeenCalledWith(
+        '/api/v1/integrations/slack',
+        {
+          reference_id: updateObj.referenceId,
+        }
+      );
+    });
+
+    it('#listAllSlackChannels', () => {
+      integrationAPI.listAllSlackChannels();
+      expect(context.axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/integrations/slack/list_all_channels'
+      );
+    });
+
     it('#delete', () => {
       integrationAPI.delete(2);
       expect(context.axiosMock.delete).toHaveBeenCalledWith(

app/javascript/dashboard/assets/images/no-chat-dark.svg

@@ -0,0 +1,34 @@
+<svg width="495" height="384" viewBox="0 0 495 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="No Chat History">
+<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M266.903 0C221.687 0 180.128 15.7196 147.313 42.0198H94.2771C87.3866 42.0198 81.749 47.6925 81.749 54.6257C81.749 61.559 87.3866 67.2317 94.2771 67.2317H121.268H129.178C136.068 67.2317 141.706 72.9043 141.706 79.8376C141.706 83.3 140.294 86.4599 138.023 88.7374C135.759 91.0233 132.619 92.4435 129.178 92.4435H112.303H102.986H57.5281C50.6376 92.4435 45 98.1162 45 105.049C45 111.983 50.6376 117.655 57.5281 117.655H90.071C80.2473 140.886 74.8059 166.446 74.8059 193.291C74.8059 203.031 75.5242 212.603 76.9023 221.957C77.4786 225.865 78.1718 229.739 78.982 233.571C102.618 229.932 127.691 227.008 153.866 224.873L155.837 226.68L157.692 224.571C189.137 222.108 222.144 220.797 256.187 220.797C328.516 220.797 396.201 226.714 454.072 237C456.302 227.268 457.806 217.259 458.516 207.023C458.841 202.485 459 197.905 459 193.291C459 86.5356 372.999 0 266.903 0Z" fill="#43484C"/>
+<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M20.2465 91.4282H12.6678C5.7005 91.4282 0 97.1882 0 104.228C0 111.268 5.7005 117.028 12.6678 117.028H20.2465C27.2137 117.028 32.9142 111.268 32.9142 104.228C32.9142 97.1882 27.2137 91.4282 20.2465 91.4282Z" fill="#43484C"/>
+<g id="Group 7">
+<mask id="mask0_201_141" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="78" y="219" width="417" height="165">
+<path id="Clip 6" fill-rule="evenodd" clip-rule="evenodd" d="M495 219V384H286.5H78V219H495Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_201_141)">
+<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M495 279.775C495 286.675 489.336 292.321 482.413 292.321H402.016C398.559 292.321 395.405 293.734 393.131 296.009C390.849 298.276 389.43 301.421 389.43 304.867C389.43 311.768 395.094 317.413 402.016 317.413H416.954C420.41 317.413 423.566 318.827 425.84 321.102C428.122 323.369 429.54 326.514 429.54 329.96C429.54 336.86 423.876 342.506 416.954 342.506H382.608C350.344 366.662 310.251 380.981 266.802 380.981C174.004 380.981 96.5026 315.699 78 228.695C101.747 225.073 126.937 222.162 153.235 220.038L155.215 221.836L157.079 219.736C188.671 217.286 221.833 215.981 256.036 215.981C328.703 215.981 396.705 221.869 454.847 232.107C452.02 244.302 448.026 256.045 442.991 267.228H482.413C485.879 267.228 489.017 268.642 491.3 270.917C493.582 273.184 495 276.328 495 279.775Z" fill="#34393D"/>
+</g>
+</g>
+<path id="Fill 8" fill-rule="evenodd" clip-rule="evenodd" d="M459 206.12C458.285 216.665 456.771 226.975 454.525 237C396.235 226.404 328.06 220.31 255.208 220.31C220.919 220.31 187.673 221.66 156 224.196L177.965 198.615L212.134 221.028L258.388 208.19L337.959 220.31L372.503 208.19L381.252 220.31L402.126 204.736L421.632 222.707L452.396 198L459 206.12Z" fill="#55575E"/>
+<path id="Fill 10" fill-rule="evenodd" clip-rule="evenodd" d="M344.905 216.502C353.565 203.915 358.526 188.987 358.397 173.012C358.043 128.578 318.46 92.8734 269.986 93.2602C221.512 93.6478 182.505 129.983 182.86 174.416C183.214 218.849 222.798 254.555 271.271 254.168C288.59 254.03 304.7 249.3 318.238 241.253L354.454 249.78L344.905 216.502Z" fill="#686B73"/>
+<path id="Fill 12" fill-rule="evenodd" clip-rule="evenodd" d="M245.029 171.813C245.069 176.862 241.008 180.988 235.959 181.028C230.909 181.069 226.783 177.008 226.743 171.959C226.703 166.909 230.763 162.784 235.813 162.743C240.861 162.703 244.987 166.763 245.029 171.813Z" fill="#BEC0D6"/>
+<path id="Fill 14" fill-rule="evenodd" clip-rule="evenodd" d="M277.942 171.812C277.982 176.862 273.922 180.988 268.872 181.028C263.822 181.068 259.696 177.008 259.657 171.959C259.616 166.909 263.677 162.783 268.726 162.743C273.775 162.703 277.901 166.763 277.942 171.812Z" fill="#BEC0D6"/>
+<path id="Fill 16" fill-rule="evenodd" clip-rule="evenodd" d="M310.856 171.812C310.897 176.861 306.836 180.987 301.786 181.028C296.737 181.068 292.611 177.008 292.571 171.958C292.53 166.908 296.591 162.783 301.641 162.743C306.689 162.702 310.815 166.763 310.856 171.812Z" fill="#BEC0D6"/>
+<path id="Fill 20" fill-rule="evenodd" clip-rule="evenodd" d="M173.714 235.887C173.714 241.693 175.571 247.099 178.763 251.649L175.376 263.789L188.564 260.581C193.523 263.465 199.402 265.143 205.714 265.143C223.388 265.143 237.714 252.044 237.714 235.887C237.714 219.728 223.388 206.629 205.714 206.629C188.041 206.629 173.714 219.728 173.714 235.887Z" fill="url(#paint0_linear_201_141)"/>
+<g id="Frame 148">
+<path id="Fill 26" fill-rule="evenodd" clip-rule="evenodd" d="M189 234.658C189 236.677 190.637 238.314 192.657 238.314C194.676 238.314 196.314 236.677 196.314 234.658C196.314 232.638 194.676 231 192.657 231C190.637 231 189 232.638 189 234.658Z" fill="#0D0D0D"/>
+<path id="Fill 24" fill-rule="evenodd" clip-rule="evenodd" d="M202.314 234.658C202.314 236.677 203.951 238.314 205.971 238.314C207.99 238.314 209.628 236.677 209.628 234.658C209.628 232.638 207.99 231 205.971 231C203.951 231 202.314 232.638 202.314 234.658Z" fill="#0D0D0D"/>
+<path id="Fill 22" fill-rule="evenodd" clip-rule="evenodd" d="M215.629 234.658C215.629 236.677 217.265 238.314 219.285 238.314C221.305 238.314 222.943 236.677 222.943 234.658C222.943 232.638 221.305 231 219.285 231C217.265 231 215.629 232.638 215.629 234.658Z" fill="#0D0D0D"/>
+</g>
+<path id="Fill 28" fill-rule="evenodd" clip-rule="evenodd" d="M153.6 223.557C127.481 225.685 102.461 228.601 78.8755 232.228C78.0671 228.408 77.3754 224.546 76.8003 220.65L117.229 190.171L153.6 223.557Z" fill="#55575E"/>
+<path id="Fill 30" fill-rule="evenodd" clip-rule="evenodd" d="M336.457 286.171C336.457 289.706 304.529 292.571 265.143 292.571C225.757 292.571 193.829 289.706 193.829 286.171C193.829 282.638 225.757 279.771 265.143 279.771C304.529 279.771 336.457 282.638 336.457 286.171Z" fill="#686B73"/>
+<path id="Fill 32" fill-rule="evenodd" clip-rule="evenodd" d="M453.486 345.599C446.446 345.599 440.686 339.839 440.686 332.799C440.686 325.76 446.446 320 453.486 320C460.526 320 466.286 325.76 466.286 332.799C466.286 339.839 460.526 345.599 453.486 345.599Z" fill="#34393D"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_201_141" x1="205.714" y1="177.372" x2="147.434" y2="241.115" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9DC9FB"/>
+<stop offset="1" stop-color="#9DC9FB"/>
+</linearGradient>
+</defs>
+</svg>

app/javascript/dashboard/assets/images/no-chat.svg

@@ -0,0 +1,33 @@
+<svg width="495" height="387" viewBox="0 0 495 387" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="No Chat History">
+<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M267.927 1.5C222.792 1.5 181.307 17.1457 148.551 43.3222H95.611C88.7329 43.3222 83.1054 48.9682 83.1054 55.8688C83.1054 62.7695 88.7329 68.4155 95.611 68.4155H122.554H130.449C137.327 68.4155 142.955 74.0615 142.955 80.9621C142.955 84.4083 141.546 87.5533 139.278 89.8201C137.019 92.0952 133.884 93.5088 130.449 93.5088H113.605H104.304H58.9279C52.0499 93.5088 46.4224 99.1548 46.4224 106.055C46.4224 112.956 52.0499 118.602 58.9279 118.602H91.4124C81.6064 141.723 76.1748 167.164 76.1748 193.882C76.1748 203.576 76.8918 213.103 78.2674 222.413C78.8426 226.303 79.5346 230.159 80.3433 233.973C103.937 230.351 128.965 227.44 155.093 225.316L157.061 227.114L158.912 225.014C190.301 222.564 223.249 221.259 257.23 221.259C329.429 221.259 396.993 227.147 454.76 237.385C456.986 227.699 458.487 217.737 459.196 207.549C459.521 203.033 459.679 198.474 459.679 193.882C459.679 87.6286 373.832 1.5 267.927 1.5Z" fill="#F1F2F7"/>
+<path id="Fill 3" fill-rule="evenodd" clip-rule="evenodd" d="M20.954 92.9282H13.3753C6.40802 92.9282 0.70752 98.6882 0.70752 105.728C0.70752 112.768 6.40802 118.528 13.3753 118.528H20.954C27.9213 118.528 33.6218 112.768 33.6218 105.728C33.6218 98.6882 27.9213 92.9282 20.954 92.9282Z" fill="#F1F2F7"/>
+<g id="Group 7">
+<mask id="mask0_156_62" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="80" y="221" width="415" height="165">
+<path id="Clip 6" fill-rule="evenodd" clip-rule="evenodd" d="M494.293 221.536V385.5H287.188H80.083V221.536H494.293Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_156_62)">
+<path id="Fill 5" fill-rule="evenodd" clip-rule="evenodd" d="M494.293 284.929C494.293 291.786 488.667 297.396 481.79 297.396H401.932C398.498 297.396 395.364 298.801 393.106 301.062C390.838 303.314 389.429 306.439 389.429 309.864C389.429 316.721 395.055 322.331 401.932 322.331H416.769C420.202 322.331 423.337 323.736 425.596 325.997C427.863 328.249 429.271 331.374 429.271 334.799C429.271 341.656 423.645 347.266 416.769 347.266H382.653C350.604 371.271 310.78 385.5 267.622 385.5C175.444 385.5 98.4618 320.627 80.083 234.169C103.671 230.57 128.693 227.678 154.815 225.567L156.781 227.354L158.632 225.268C190.013 222.832 222.954 221.536 256.928 221.536C329.108 221.536 396.656 227.387 454.409 237.561C451.601 249.679 447.633 261.349 442.632 272.461H481.79C485.233 272.461 488.35 273.866 490.617 276.127C492.884 278.379 494.293 281.504 494.293 284.929Z" fill="#E8EBF2"/>
+</g>
+</g>
+<path id="Fill 8" fill-rule="evenodd" clip-rule="evenodd" d="M457.85 206.981C457.142 217.363 455.643 227.515 453.42 237.386C395.73 226.953 328.256 220.953 256.153 220.953C222.216 220.953 189.312 222.282 157.964 224.779L179.704 199.591L213.521 221.659L259.3 209.019L338.053 220.953L372.242 209.019L380.901 220.953L401.56 205.618L420.866 223.313L451.314 198.986L457.85 206.981Z" fill="#E0E2EE"/>
+<path id="Fill 10" fill-rule="evenodd" clip-rule="evenodd" d="M345.614 218.002C354.273 205.415 359.234 190.487 359.106 174.512C358.752 130.078 319.168 94.3734 270.694 94.7602C222.22 95.1478 183.213 131.483 183.568 175.916C183.923 220.349 223.506 256.055 271.979 255.668C289.298 255.53 305.408 250.8 318.946 242.753L355.162 251.28L345.614 218.002Z" fill="#D8DBEA"/>
+<path id="Fill 12" fill-rule="evenodd" clip-rule="evenodd" d="M245.736 173.313C245.776 178.362 241.716 182.488 236.667 182.528C231.616 182.569 227.49 178.508 227.451 173.459C227.411 168.409 231.471 164.284 236.52 164.243C241.569 164.203 245.695 168.263 245.736 173.313Z" fill="#BEC0D6"/>
+<path id="Fill 14" fill-rule="evenodd" clip-rule="evenodd" d="M278.65 173.312C278.69 178.362 274.629 182.488 269.58 182.528C264.53 182.568 260.404 178.508 260.365 173.459C260.323 168.409 264.384 164.283 269.434 164.243C274.483 164.203 278.609 168.263 278.65 173.312Z" fill="#BEC0D6"/>
+<path id="Fill 16" fill-rule="evenodd" clip-rule="evenodd" d="M311.565 173.312C311.605 178.361 307.544 182.487 302.495 182.528C297.445 182.568 293.319 178.508 293.28 173.458C293.239 168.408 297.299 164.283 302.349 164.243C307.398 164.202 311.524 168.263 311.565 173.312Z" fill="#BEC0D6"/>
+<path id="Fill 18" fill-rule="evenodd" clip-rule="evenodd" d="M157.965 224.585L156.192 226.414L154.308 224.848C155.521 224.753 156.744 224.666 157.965 224.585Z" fill="#F1F2F7"/>
+<path id="Fill 20" fill-rule="evenodd" clip-rule="evenodd" d="M174.422 237.387C174.422 243.193 176.279 248.599 179.47 253.149L176.083 265.289L189.272 262.081C194.23 264.965 200.11 266.643 206.422 266.643C224.095 266.643 238.422 253.544 238.422 237.387C238.422 221.228 224.095 208.129 206.422 208.129C188.748 208.129 174.422 221.228 174.422 237.387Z" fill="url(#paint0_linear_156_62)"/>
+<path id="Fill 22" fill-rule="evenodd" clip-rule="evenodd" d="M214.651 237.386C214.651 239.405 216.287 241.043 218.308 241.043C220.327 241.043 221.965 239.405 221.965 237.386C221.965 235.366 220.327 233.728 218.308 233.728C216.287 233.728 214.651 235.366 214.651 237.386Z" fill="white"/>
+<path id="Fill 24" fill-rule="evenodd" clip-rule="evenodd" d="M203.679 237.386C203.679 239.405 205.316 241.043 207.336 241.043C209.355 241.043 210.993 239.405 210.993 237.386C210.993 235.366 209.355 233.728 207.336 233.728C205.316 233.728 203.679 235.366 203.679 237.386Z" fill="white"/>
+<path id="Fill 26" fill-rule="evenodd" clip-rule="evenodd" d="M190.879 237.386C190.879 239.405 192.516 241.043 194.537 241.043C196.556 241.043 198.194 239.405 198.194 237.386C198.194 235.366 196.556 233.728 194.537 233.728C192.516 233.728 190.879 235.366 190.879 237.386Z" fill="white"/>
+<path id="Fill 28" fill-rule="evenodd" clip-rule="evenodd" d="M154.308 225.057C128.188 227.185 103.169 230.101 79.583 233.728C78.7746 229.908 78.0829 226.046 77.5078 222.15L117.936 191.671L154.308 225.057Z" fill="#E0E2EE"/>
+<path id="Fill 30" fill-rule="evenodd" clip-rule="evenodd" d="M337.164 287.671C337.164 291.206 305.235 294.071 265.85 294.071C226.464 294.071 194.536 291.206 194.536 287.671C194.536 284.138 226.464 281.271 265.85 281.271C305.235 281.271 337.164 284.138 337.164 287.671Z" fill="#D8DBEA"/>
+<path id="Fill 32" fill-rule="evenodd" clip-rule="evenodd" d="M454.193 347.099C447.153 347.099 441.393 341.339 441.393 334.299C441.393 327.26 447.153 321.5 454.193 321.5C461.233 321.5 466.993 327.26 466.993 334.299C466.993 341.339 461.233 347.099 454.193 347.099Z" fill="#E1E3EF"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_156_62" x1="206.422" y1="178.872" x2="148.142" y2="242.615" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9DC9FB"/>
+<stop offset="1" stop-color="#9DC9FB"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -26,6 +26,7 @@ code {
     background: $color-background;
     border-radius: var(--border-radius-large);
     padding: $space-two;
+    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
   }
 }
 

app/javascript/dashboard/assets/scss/_layout.scss

@@ -9,87 +9,25 @@ body {
 }
 
 .app-wrapper {
-  @include full-height;
-  flex-grow: 0;
-  min-height: 0;
-  width: 100%;
+  @apply h-full flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
 }
 
 .banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
   .button--fixed-top {
-    top: 5.6 * $space-one;
+    @apply top-14;
   }
 
   .off-canvas-content {
     .button--fixed-top {
-      top: $space-small;
+      @apply top-2;
     }
   }
 }
-
-is-closed .app-root {
-  @include flex;
-  flex-direction: column;
-}
-
-.app-content {
-  @include flex;
-  @include full-height;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.view-box {
-  @include full-height;
-  @include space-between-column;
-
-  height: 100vh;
-  margin: 0;
-}
-
-.view-panel {
-  flex-direction: column;
-  margin: 0;
-  overflow-y: auto;
-  padding: $space-normal;
-}
-
-.content-box {
-  overflow: auto;
-  padding: $space-normal;
-}
-
-.back-button {
-  @include flex;
-
-  align-items: center;
-  color: $color-woot;
-  cursor: pointer;
-  font-size: $font-size-default;
-  font-weight: $font-weight-normal;
-  margin-right: $space-normal;
-
-  &::before {
-    font-size: $font-size-large;
-    margin-right: $space-small;
-    vertical-align: text-bottom;
-  }
-}
-
-.button-spinner {
-  float: right;
-}
-
-.no-items-error-message {
-  @include flex;
-  @include full-height;
-
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-
-  img {
-    max-width: $space-mega;
-    padding: $space-one;
-  }
-}

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -1,20 +1,6 @@
 .app-rtl--wrapper {
   direction: rtl;
 
-  .header-section.back-button {
-    direction: initial;
-    margin-left: var(--space-normal);
-    margin-right: var(--space-smaller);
-  }
-
-  // Settings header action button
-  .button--fixed-top {
-    left: $space-small;
-    position: fixed;
-    right: unset;
-    top: $space-small;
-  }
-
   // Woot Tabs
   .tabs-title {
     &:first-child {

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

@@ -71,9 +71,3 @@
   align-items: center;
   display: flex;
 }
-
-.button--fixed-top {
-  position: fixed;
-  right: var(--space-small);
-  top: var(--space-small);
-}

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

@@ -72,7 +72,6 @@
 @import '~shared/assets/stylesheets/ionicons';
 @import 'utility-helpers';
 
-
 .tooltip {
   @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900;
 }

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -18,7 +18,15 @@
   }
 
   &.multiselect--disabled {
-    @apply opacity-80;
+    @apply opacity-50 border border-slate-200 dark:border-slate-600 rounded-md cursor-not-allowed;
+
+    .multiselect__select {
+      @apply cursor-not-allowed bg-white dark:bg-slate-900 rounded-md;
+    }
+
+    .multiselect__tags {
+      @apply border-0;
+    }
   }
 
   .multiselect--active {
@@ -36,7 +44,7 @@
   }
 
   .multiselect__content-wrapper {
-    @apply bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
+    @apply bg-white dark:bg-slate-900 border border-solid border-slate-200 dark:border-slate-600 text-slate-800 dark:text-slate-100;
   }
 
   .multiselect__content {

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

@@ -10,7 +10,7 @@
 @import 'variables';
 
 @import '~spinkit/scss/spinners/7-three-bounce';
-@import '~vue-multiselect/dist/vue-multiselect.min.css';
+@import 'vue-multiselect/dist/vue-multiselect.min.css';
 @import '~shared/assets/stylesheets/ionicons';
 
 @import 'mixins';
@@ -30,3 +30,18 @@
 @import 'widgets/forms';
 
 @import 'plugins/multiselect';
+
+@import 'widget/assets/scss/reset';
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+@import 'widget/assets/scss/utilities';
+
+
+html,
+body {
+  font-family: 'PlusJakarta', sans-serif;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+}

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

@@ -1,5 +1,5 @@
 .button {
-  @apply items-center inline-flex h-10 mb-0;
+  @apply items-center inline-flex h-10 mb-0 gap-2;
 
   .button__content {
     @apply w-full;
@@ -14,17 +14,9 @@
     @apply px-2 py-0;
   }
 
-  .icon--emoji + .button__content {
-    @apply pl-2 rtl:pr-2 rtl:pl-0;
-  }
-
-  .icon--font + .button__content {
-    @apply pl-2 rtl:pr-2 rtl:pl-0;
-  }
-
   // @TODDO - Remove after moving all buttons to woot-button
   .icon + .button__content {
-    @apply pl-2 w-auto rtl:pr-2 rtl:pl-0;
+    @apply w-auto;
   }
 
   &.expanded {
@@ -64,19 +56,19 @@
       @apply bg-slate-75 dark:bg-slate-900 border-slate-100 dark:border-slate-700;
 
       &.secondary {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
       }
 
       &.success {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
       }
 
       &.alert {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
       }
 
       &.warning {
-        @apply border-slate-100 dark:border-slate-700;
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-700;
       }
     }
   }
@@ -90,7 +82,7 @@
     }
 
     &.success {
-      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800;
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
     }
 
     &.alert {
@@ -118,26 +110,26 @@
     }
 
     &.warning {
-      @apply text-yellow-700 dark:text-yellow-700;
+      @apply text-yellow-700 dark:text-yellow-600;
     }
 
     &:hover {
       @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
 
       &.secondary {
-        @apply hover:bg-slate-50 dark:hover:bg-slate-700;
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
       }
 
       &.success {
-        @apply hover:bg-green-50 dark:hover:bg-green-800;
+        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
       }
 
       &.alert {
-        @apply hover:bg-red-50 dark:hover:bg-red-800;
+        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
       }
 
       &.warning {
-        @apply hover:bg-yellow-50 dark:hover:bg-yellow-100;
+        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
       }
     }
 
@@ -157,18 +149,10 @@
   // Sizes
   &.tiny {
     @apply h-6;
-
-    .icon + .button__content {
-      @apply pl-1 rtl:pr-1 rtl:pl-0;
-    }
   }
 
   &.small {
     @apply h-8 pb-1 pt-1;
-
-    .icon + .button__content {
-      @apply pl-1 rtl:pr-1 rtl:pl-0;
-    }
   }
 
   &.large {

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

@@ -1,34 +1,45 @@
 // scss-lint:disable MergeableSelector
 
-@mixin bubble-with-types {
-  @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
-
-  .message-text__wrap {
-    @apply relative;
-
-    .link {
-      @apply text-white dark:text-white underline;
-    }
+@tailwind utilities;
+@layer utilities {
+  .custom-gradient {
+    background-image: linear-gradient(
+      -180deg,
+      transparent 3%,
+      rgb(76 81 85) 130%
+    );
   }
 
-  .image,
-  .video {
-    @apply cursor-pointer relative;
+  .bubble-with-types {
+    @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
 
-    .modal-container {
-      @apply text-center;
+    .message-text__wrap {
+      @apply relative;
+
+      .link {
+        @apply text-white dark:text-white underline;
+      }
     }
 
-    .modal-image {
-      @apply max-h-[76vh] max-w-[76vw];
-    }
+    .image,
+    .video {
+      @apply cursor-pointer relative;
 
-    .modal-video {
-      @apply max-h-[76vh] max-w-[76vw];
-    }
+      .modal-container {
+        @apply text-center;
+      }
 
-    &::before {
-      @apply bg-gradient-to-t from-transparent via-transparent to-slate-800 bg-repeat bg-clip-border bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
+      .modal-image {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      .modal-video {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      &::before {
+        @apply custom-gradient bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
+      }
     }
   }
 }
@@ -55,8 +66,7 @@
   }
 
   .bubble {
-    @include bubble-with-types;
-    @apply text-left break-words;
+    @apply bubble-with-types text-left break-words;
 
     .aplayer {
       @apply shadow-none;
@@ -129,7 +139,15 @@
       @apply ml-auto break-words rounded-l-lg rounded-r;
 
       &.is-private {
-        @apply text-black-900 dark:text-black-900 relative border border-solid bg-[#fff3d5] border-[#ffd97a] dark:bg-[#fff3d5] dark:border-[#ffd97a];
+        @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
+
+        blockquote {
+          @apply border-slate-400 dark:border-slate-400 text-slate-800 dark:text-slate-300;
+
+          p {
+            @apply text-slate-600 dark:text-slate-300;
+          }
+        }
       }
 
       &.is-image {

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

@@ -1,6 +1,6 @@
 .reply-box {
   transition: box-shadow 0.35s $swift-ease-out-function,
-  height 2s $swift-ease-out-function;
+    height 2s $swift-ease-out-function;
 
   &.is-focused {
     box-shadow: var(--shadow);
@@ -47,13 +47,13 @@
   }
 
   &.is-private {
-    background: var(--y-50);
+    @apply bg-yellow-100 dark:bg-yellow-800;
 
     .reply-box__top {
-      background: var(--y-50);
+      @apply bg-yellow-100 dark:bg-yellow-800;
 
       > input {
-        background: var(--y-50);
+        @apply bg-yellow-100 dark:bg-yellow-800;
       }
     }
   }

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

@@ -31,7 +31,7 @@
 }
 
 .tabs-title {
-  @apply flex-shrink-0 my-0 mx-2;
+  @apply flex-shrink-0 my-0 mx-2 ;
 
   .badge {
     @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
@@ -53,7 +53,7 @@
   }
 
   a {
-    @apply flex items-center flex-row border-b border-transparent text-slate-600 dark:text-slate-200 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -76,13 +76,13 @@ table {
 
   .ve-pagination-goto {
     @apply text-slate-600 dark:text-slate-200;
+
+    .ve-pagination-goto-input {
+      @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
+    }
   }
 
   .ve-pagination-li {
     @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
   }
-
-  .ve-pagination-goto-input {
-    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
-  }
 }

app/javascript/dashboard/components/ChatList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="conversations-list-wrap flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
+    class="conversations-list-wrap flex-basis-clamp flex-shrink-0 flex-basis-custom overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50"
     :class="{
       hide: !showConversationList,
       'list--full-width': isOnExpandedLayout,
@@ -15,7 +15,7 @@
     >
       <div class="flex max-w-[85%] justify-center items-center">
         <h1
-          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis mb-0"
+          class="text-xl break-words overflow-hidden whitespace-nowrap text-ellipsis text-black-900 dark:text-slate-100 mb-0"
           :title="pageTitle"
         >
           {{ pageTitle }}
@@ -969,8 +969,6 @@ export default {
 
 <style scoped lang="scss">
 .conversations-list-wrap {
-  @apply flex-basis-clamp;
-
   &.hide {
     @apply hidden;
   }

app/javascript/dashboard/components/CustomAttribute.vue

@@ -61,7 +61,7 @@
       >
         <a
           v-if="isAttributeTypeLink"
-          :href="value"
+          :href="hrefURL"
           target="_blank"
           rel="noopener noreferrer"
           class="value inline-block rounded-sm mb-0 break-all py-0.5 px-1"
@@ -188,6 +188,9 @@ export default {
     urlValue() {
       return isValidURL(this.value) ? this.value : '---';
     },
+    hrefURL() {
+      return isValidURL(this.value) ? this.value : '';
+    },
     notAttributeTypeCheckboxAndList() {
       return !this.isAttributeTypeCheckbox && !this.isAttributeTypeList;
     },

app/javascript/dashboard/components/SettingsSection.vue

@@ -2,7 +2,7 @@
   <div
     class="ml-0 mr-0 flex pt-0 pr-4 pb-4 pl-0"
     :class="{
-      'pt-4 border-b border-solid border-slate-50 dark:border-slate-600': showBorder,
+      'pt-4 border-b border-solid border-slate-50 dark:border-slate-700/30': showBorder,
     }"
   >
     <div class="w-[30%] min-w-0 max-w-[30%] pr-12">

app/javascript/dashboard/components/base/Hotkey.vue

@@ -1,11 +1,21 @@
 <template>
-  <kbd class="hotkey">
+  <kbd class="hotkey p-0.5 min-w-[1rem] uppercase" :class="customClass">
     <slot />
   </kbd>
 </template>
+<script>
+export default {
+  props: {
+    customClass: {
+      type: String,
+      default: '',
+    },
+  },
+};
+</script>
 
 <style lang="scss">
 kbd.hotkey {
-  @apply inline-flex p-0.5 leading-[0.625rem] min-w-[1rem] tracking-wide uppercase text-slate-800 dark:text-slate-100 bg-slate-50 dark:bg-slate-600 text-xxs border border-solid border-slate-75 dark:border-slate-600 rounded flex-shrink-0 items-center select-none justify-center;
+  @apply inline-flex leading-[0.625rem] rounded tracking-wide flex-shrink-0 items-center select-none justify-center;
 }
 </style>

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

@@ -8,7 +8,7 @@
   >
     <fluent-icon v-if="!!iconClass" :icon="iconClass" class="icon" />
     <span>{{ buttonText }}</span>
-    <spinner v-if="loading" />
+    <spinner v-if="loading" class="ml-2" :color-scheme="spinnerClass" />
   </button>
 </template>
 
@@ -40,6 +40,10 @@ export default {
       type: String,
       default: '',
     },
+    spinnerClass: {
+      type: String,
+      default: '',
+    },
     type: {
       type: String,
       default: 'submit',
@@ -47,7 +51,7 @@ export default {
   },
   computed: {
     computedClass() {
-      return `button nice ${this.buttonClass || ' '}`;
+      return `button nice gap-2 ${this.buttonClass || ' '}`;
     },
   },
   methods: {
@@ -59,11 +63,9 @@ export default {
 </script>
 <style lang="scss" scoped>
 button:disabled {
-  opacity: 1;
-  background-color: var(--w-100);
-
+  @apply bg-woot-100 dark:bg-woot-500/25 dark:text-slate-500 opacity-100;
   &:hover {
-    background-color: var(--w-100);
+    @apply bg-woot-100 dark:bg-woot-500/25;
   }
 }
 </style>

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

@@ -29,6 +29,7 @@ const settings = accountId => ({
     'settings_inboxes_page_channel',
     'settings_integrations_dashboard_apps',
     'settings_integrations_integration',
+    'settings_integrations_slack',
     'settings_integrations_webhook',
     'settings_integrations',
     'settings_teams_add_agents',
@@ -92,7 +93,6 @@ const settings = accountId => ({
     {
       icon: 'automation',
       label: 'AUTOMATION',
-      beta: true,
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/automation/list`),
       toStateName: 'automation_list',
@@ -101,7 +101,6 @@ const settings = accountId => ({
     {
       icon: 'bot',
       label: 'AGENT_BOTS',
-      beta: true,
       hasSubMenu: false,
       globalConfigFlag: 'csmlEditorHost',
       toState: frontendURL(`accounts/${accountId}/settings/agent-bots`),
@@ -114,7 +113,6 @@ const settings = accountId => ({
       hasSubMenu: false,
       toState: frontendURL(`accounts/${accountId}/settings/macros`),
       toStateName: 'macros_wrapper',
-      beta: true,
       featureFlag: FEATURE_FLAGS.MACROS,
     },
     {

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

@@ -1,18 +1,20 @@
 <template>
   <div
     v-if="showShowCurrentAccountContext"
-    class="rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer"
+    class="text-slate-700 dark:text-slate-200 rounded-md text-xs py-2 px-2 mt-2 relative border border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
     @mouseover="setShowSwitch"
     @mouseleave="resetShowSwitch"
   >
     {{ $t('SIDEBAR.CURRENTLY_VIEWING_ACCOUNT') }}
-    <p class="text-ellipsis font-medium mb-0">
+    <p
+      class="text-ellipsis overflow-hidden whitespace-nowrap font-medium mb-0 text-slate-800 dark:text-slate-100"
+    >
       {{ account.name }}
     </p>
     <transition name="fade">
       <div
         v-if="showSwitchButton"
-        class="bg-gradient-to-r rtl:bg-gradient-to-l from-transparent via-white dark:via-slate-700 to-white dark:to-slate-700 flex items-center h-full justify-end absolute top-0 right-0 w-full"
+        class="ltr:overlay-shadow ltr:dark:overlay-shadow-dark rtl:rtl-overlay-shadow rtl:dark:rtl-overlay-shadow-dark flex items-center h-full rounded-md justify-end absolute top-0 right-0 w-full"
       >
         <div class="my-0 mx-2">
           <woot-button
@@ -54,7 +56,41 @@ export default {
   },
 };
 </script>
-<style scoped lang="scss">
+<style scoped>
+@tailwind components;
+@layer components {
+  .overlay-shadow {
+    background-image: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 50%
+    );
+  }
+
+  .overlay-shadow-dark {
+    background-image: linear-gradient(
+      to right,
+      rgba(0, 0, 0, 0) 0%,
+      rgb(21, 23, 24) 50%
+    );
+  }
+
+  .rtl-overlay-shadow {
+    background-image: linear-gradient(
+      to left,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(255, 255, 255, 1) 50%
+    );
+  }
+
+  .rtl-overlay-shadow-dark {
+    background-image: linear-gradient(
+      to left,
+      rgba(0, 0, 0, 0) 0%,
+      rgb(21, 23, 24) 50%
+    );
+  }
+}
 .fade-enter-active,
 .fade-leave-active {
   transition: opacity 300ms ease;
@@ -62,6 +98,6 @@ export default {
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+  @apply opacity-0;
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <button
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-800 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50': isNotificationPanelActive,
       }"

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

@@ -3,7 +3,7 @@
     <div
       v-if="show"
       v-on-clickaway="onClickAway"
-      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-10 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
+      class="left-3 rtl:left-auto rtl:right-3 bottom-16 w-64 absolute z-30 rounded-md shadow-xl bg-white dark:bg-slate-800 py-2 px-2 border border-slate-25 dark:border-slate-700"
       :class="{ 'block visible': show }"
     >
       <availability-status />
@@ -60,6 +60,17 @@
             </a>
           </router-link>
         </woot-dropdown-item>
+        <woot-dropdown-item>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            size="small"
+            icon="appearance"
+            @click="openAppearanceOptions"
+          >
+            {{ $t('SIDEBAR_ITEMS.APPEARANCE') }}
+          </woot-button>
+        </woot-dropdown-item>
         <woot-dropdown-item v-if="currentUser.type === 'SuperAdmin'">
           <a
             href="/super_admin"
@@ -145,6 +156,10 @@ export default {
     onClickAway() {
       if (this.show) this.$emit('close');
     },
+    openAppearanceOptions() {
+      const ninja = document.querySelector('ninja-keys');
+      ninja.open({ parent: 'appearance_settings' });
+    },
   },
 };
 </script>

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

@@ -46,6 +46,7 @@ import AgentDetails from './AgentDetails';
 import NotificationBell from './NotificationBell';
 import wootConstants from 'dashboard/constants/globals';
 import { frontendURL } from 'dashboard/helper/URLHelper';
+import { ACCOUNT_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
 export default {
   components: {
@@ -99,6 +100,7 @@ export default {
       window.$chatwoot.toggle();
     },
     openNotificationPanel() {
+      this.$track(ACCOUNT_EVENTS.OPENED_NOTIFICATIONS);
       this.$emit('open-notification-panel');
     },
   },

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

@@ -3,7 +3,7 @@
     <a
       v-tooltip.right="$t(`SIDEBAR.${name}`)"
       :href="href"
-      class="text-slate-600 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
+      class="text-slate-700 dark:text-slate-100 w-10 h-10 my-2 flex items-center justify-center rounded-lg hover:bg-slate-25 dark:hover:bg-slate-700 dark:hover:text-slate-100 hover:text-slate-600 relative"
       :class="{
         'bg-woot-50 dark:bg-slate-800 text-woot-500 hover:bg-woot-50':
           isActive || isChildMenuActive,

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

@@ -22,7 +22,7 @@
           class="inline-flex items-center justify-center w-4 rounded-sm bg-slate-100 dark:bg-slate-700 p-0.5 mr-1.5 rtl:mr-0 rtl:ml-1.5"
         >
           <fluent-icon
-            class="text-xxs text-slate-600 dark:text-slate-200"
+            class="text-xxs text-slate-700 dark:text-slate-200"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
             }"
@@ -41,7 +41,7 @@
         >
           <span
             :title="menuTitle"
-            class="text-sm text-slate-600 dark:text-slate-100"
+            class="text-sm text-slate-700 dark:text-slate-100"
             :class="{
               'text-woot-500 dark:text-woot-500': isActive,
               'text-ellipsis overflow-hidden whitespace-nowrap max-w-full': shouldTruncate,
@@ -54,8 +54,8 @@
             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-600`
-                : `text-slate-600 dark:text-slate-50`
+                ? `text-slate-300 dark:text-slate-700`
+                : `text-slate-700 dark:text-slate-50`
             "
           >
             {{ childItemCount }}

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="banner" :class="bannerClasses">
+  <div
+    class="banner flex items-center h-12 gap-4 text-white dark:text-white text-xs py-3 px-4 justify-center"
+    :class="bannerClasses"
+  >
     <span class="banner-message">
       {{ bannerMessage }}
       <a
@@ -96,87 +99,65 @@ export default {
 
 <style lang="scss" scoped>
 .banner {
-  --x-padding: var(--space-normal);
-  --y-padding: var(--space-slab);
-
-  display: flex;
-  gap: var(--x-padding);
-  color: var(--white);
-  font-size: var(--font-size-mini);
-  padding: var(--y-padding) var(--x-padding);
-  justify-content: center;
-
   &.primary {
-    background: var(--w-500);
+    @apply bg-woot-500 dark:bg-woot-500;
     .banner-action__button {
-      background: var(--w-600);
-      border: none;
-      color: var(--white);
+      @apply bg-woot-600 dark:bg-woot-600 border-none text-white;
 
       &:hover {
-        background: var(--w-800);
+        @apply bg-woot-700 dark:bg-woot-700;
       }
     }
   }
 
   &.secondary {
-    background: var(--s-200);
-    color: var(--s-800);
+    @apply bg-slate-200 dark:bg-slate-300 text-slate-800 dark:text-slate-800;
     a {
-      color: var(--s-800);
+      @apply text-slate-800 dark:text-slate-800;
     }
   }
 
   &.alert {
-    background: var(--r-500);
+    @apply bg-red-500 dark:bg-red-500;
     .banner-action__button {
-      background: var(--r-700);
-      border: none;
-      color: var(--white);
+      @apply bg-red-700 dark:bg-red-700 border-none text-white dark:text-white;
 
       &:hover {
-        background: var(--r-800);
+        @apply bg-red-800 dark:bg-red-800;
       }
     }
   }
 
   &.warning {
-    background: var(--y-600);
-    color: var(--y-500);
+    @apply bg-yellow-500 dark:bg-yellow-500 text-yellow-500 dark:text-yellow-500;
     a {
-      color: var(--y-500);
+      @apply text-yellow-500 dark:text-yellow-500;
     }
   }
 
   &.gray {
-    background: var(--b-500);
+    @apply text-black-500 dark:text-black-500;
     .banner-action__button {
-      color: var(--white);
+      @apply text-white dark:text-white;
     }
   }
 
   a {
-    margin-left: var(--space-smaller);
-    text-decoration: underline;
-    color: var(--white);
-    font-size: var(--font-size-mini);
+    @apply ml-1 underline text-white dark:text-white text-xs;
   }
 
   .banner-action__button {
     ::v-deep .button__content {
-      white-space: nowrap;
+      @apply whitespace-nowrap;
     }
   }
 
   .banner-message {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
   }
 
   .actions {
-    display: flex;
-    gap: var(--space-smaller);
-    right: var(--y-padding);
+    @apply flex gap-1 right-3;
   }
 }
 </style>

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

@@ -1,41 +1,60 @@
 <template>
-  <div v-if="isAIIntegrationEnabled" class="position-relative">
-    <woot-button
-      v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
-      icon="wand"
-      color-scheme="secondary"
-      variant="smooth"
-      size="small"
-      @click="openAIAssist"
-    />
-    <woot-modal
-      :show.sync="showAIAssistanceModal"
-      :on-close="hideAIAssistanceModal"
-    >
-      <AIAssistanceModal
-        :ai-option="aiOption"
-        @apply-text="insertText"
-        @close="hideAIAssistanceModal"
+  <div v-if="!isFetchingAppIntegrations">
+    <div v-if="isAIIntegrationEnabled" class="relative">
+      <AIAssistanceCTAButton
+        v-if="shouldShowAIAssistCTAButton"
+        @click="openAIAssist"
       />
-    </woot-modal>
+      <woot-button
+        v-else
+        v-tooltip.top-end="$t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST')"
+        icon="wand"
+        color-scheme="secondary"
+        variant="smooth"
+        size="small"
+        @click="openAIAssist"
+      />
+      <woot-modal
+        :show.sync="showAIAssistanceModal"
+        :on-close="hideAIAssistanceModal"
+      >
+        <AIAssistanceModal
+          :ai-option="aiOption"
+          @apply-text="insertText"
+          @close="hideAIAssistanceModal"
+        />
+      </woot-modal>
+    </div>
+    <div v-else-if="shouldShowAIAssistCTAButtonForAdmin" class="relative">
+      <AIAssistanceCTAButton @click="openAICta" />
+      <woot-modal :show.sync="showAICtaModal" :on-close="hideAICtaModal">
+        <AICTAModal @close="hideAICtaModal" />
+      </woot-modal>
+    </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-
+import AICTAModal from './AICTAModal.vue';
 import AIAssistanceModal from './AIAssistanceModal.vue';
-import aiMixin from 'dashboard/mixins/aiMixin';
+import adminMixin from 'dashboard/mixins/aiMixin';
+import aiMixin from 'dashboard/mixins/isAdmin';
 import { CMD_AI_ASSIST } from 'dashboard/routes/dashboard/commands/commandBarBusEvents';
 import eventListenerMixins from 'shared/mixins/eventListenerMixins';
 import { buildHotKeys } from 'shared/helpers/KeyboardHelpers';
+import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import AIAssistanceCTAButton from './AIAssistanceCTAButton.vue';
 
 export default {
   components: {
     AIAssistanceModal,
+    AICTAModal,
+    AIAssistanceCTAButton,
   },
-  mixins: [aiMixin, eventListenerMixins],
+  mixins: [aiMixin, eventListenerMixins, adminMixin, uiSettingsMixin],
   data: () => ({
     showAIAssistanceModal: false,
+    showAICtaModal: false,
     aiOption: '',
     initialMessage: '',
   }),
@@ -43,6 +62,21 @@ export default {
     ...mapGetters({
       currentChat: 'getSelectedChat',
     }),
+    isAICTAModalDismissed() {
+      return this.uiSettings.is_open_ai_cta_modal_dismissed;
+    },
+    // Display a AI CTA button for admins if the AI integration has not been added yet and the AI assistance modal has not been dismissed.
+    shouldShowAIAssistCTAButtonForAdmin() {
+      return (
+        this.isAdmin &&
+        !this.isAIIntegrationEnabled &&
+        !this.isAICTAModalDismissed
+      );
+    },
+    // Display a AI CTA button for agents and other admins who have not yet opened the AI assistance modal.
+    shouldShowAIAssistCTAButton() {
+      return this.isAIIntegrationEnabled && !this.isAICTAModalDismissed;
+    },
   },
 
   mounted() {
@@ -61,13 +95,28 @@ export default {
       }
     },
     hideAIAssistanceModal() {
+      this.recordAnalytics('DISMISS_AI_SUGGESTION', {
+        aiOption: this.aiOption,
+      });
       this.showAIAssistanceModal = false;
     },
     openAIAssist() {
+      // Dismiss the CTA modal if it is not dismissed
+      if (!this.isAICTAModalDismissed) {
+        this.updateUISettings({
+          is_open_ai_cta_modal_dismissed: true,
+        });
+      }
       this.initialMessage = this.draftMessage;
       const ninja = document.querySelector('ninja-keys');
       ninja.open({ parent: 'ai_assist' });
     },
+    hideAICtaModal() {
+      this.showAICtaModal = false;
+    },
+    openAICta() {
+      this.showAICtaModal = true;
+    },
     onAIAssist(option) {
       this.aiOption = option;
       this.showAIAssistanceModal = true;

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="relative">
+    <woot-button
+      icon="wand"
+      color-scheme="secondary"
+      variant="smooth"
+      size="small"
+      class-names="cta-btn cta-btn-light dark:cta-btn-dark hover:cta-btn-light-hover dark:hover:cta-btn-dark-hover"
+      @click="onClick"
+    >
+      {{ $t('INTEGRATION_SETTINGS.OPEN_AI.AI_ASSIST') }}
+    </woot-button>
+
+    <div
+      class="radar-ping-animation absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-woot-500 dark:bg-woot-500"
+    />
+    <div
+      class="absolute top-0 right-0 -mt-1 -mr-1 rounded-full w-3 h-3 bg-woot-500 dark:bg-woot-500 opacity-50"
+    />
+  </div>
+</template>
+<script>
+export default {
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+<style scoped>
+@tailwind components;
+@layer components {
+  /* Gradient animation */
+  @keyframes gradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  .cta-btn {
+    animation: gradient 5s ease infinite;
+    border: 0;
+  }
+
+  .cta-btn-light {
+    background: linear-gradient(
+        255.98deg,
+        rgba(161, 87, 246, 0.2) 15.83%,
+        rgba(71, 145, 247, 0.2) 81.39%
+      ),
+      linear-gradient(0deg, #f2f5f8, #f2f5f8);
+  }
+
+  .cta-btn-dark {
+    background: linear-gradient(
+        255.98deg,
+        rgba(161, 87, 246, 0.2) 15.83%,
+        rgba(71, 145, 247, 0.2) 81.39%
+      ),
+      linear-gradient(0deg, #313538, #313538);
+  }
+
+  .cta-btn-light-hover {
+    background: linear-gradient(
+        255.98deg,
+        rgba(161, 87, 246, 0.2) 15.83%,
+        rgba(71, 145, 247, 0.2) 81.39%
+      ),
+      linear-gradient(0deg, #e3e5e7, #e3e5e7);
+  }
+
+  .cta-btn-dark-hover {
+    background: linear-gradient(
+        255.98deg,
+        rgba(161, 87, 246, 0.2) 15.83%,
+        rgba(71, 145, 247, 0.2) 81.39%
+      ),
+      linear-gradient(0deg, #202425, #202425);
+  }
+
+  /* Radar ping animation */
+  @keyframes ping {
+    75%,
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+  .radar-ping-animation {
+    animation: ping 1s ease infinite;
+  }
+}
+</style>

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

@@ -0,0 +1,108 @@
+<template>
+  <div class="px-0 min-w-0 flex-1">
+    <woot-modal-header
+      :header-title="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.TITLE')"
+      :header-content="$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DESC')"
+    />
+    <form
+      class="flex flex-wrap flex-col modal-content"
+      @submit.prevent="finishOpenAI"
+    >
+      <div class="mt-2 w-full">
+        <woot-input
+          v-model="value"
+          type="text"
+          :class="{ error: $v.value.$error }"
+          :placeholder="
+            $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.KEY_PLACEHOLDER')
+          "
+          @blur="$v.value.$touch"
+        />
+      </div>
+      <div class="flex flex-row justify-between gap-2 py-2 px-0 w-full">
+        <woot-button variant="link" @click.prevent="openOpenAIDoc">
+          {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.NEED_HELP') }}
+        </woot-button>
+        <div class="flex items-center gap-1">
+          <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">
+            {{ $t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.BUTTONS.FINISH') }}
+          </woot-button>
+        </div>
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+import { required } from 'vuelidate/lib/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';
+
+export default {
+  mixins: [aiMixin, alertMixin, uiSettingsMixin],
+  data() {
+    return {
+      value: '',
+    };
+  },
+  validations: {
+    value: {
+      required,
+    },
+  },
+  computed: {
+    ...mapGetters({
+      appIntegrations: 'integrations/getAppIntegrations',
+    }),
+  },
+  methods: {
+    onClose() {
+      this.$emit('close');
+    },
+
+    onDismiss() {
+      this.showAlert(
+        this.$t('INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.DISMISS_MESSAGE')
+      );
+      this.updateUISettings({
+        is_open_ai_cta_modal_dismissed: true,
+      });
+      this.onClose();
+    },
+
+    async finishOpenAI() {
+      const payload = {
+        app_id: 'openai',
+        settings: {
+          api_key: this.value,
+        },
+      };
+      try {
+        await this.$store.dispatch('integrations/createHook', payload);
+        this.alertMessage = this.$t(
+          'INTEGRATION_SETTINGS.OPEN_AI.CTA_MODAL.SUCCESS_MESSAGE'
+        );
+        this.recordAnalytics(
+          OPEN_AI_EVENTS.ADDED_AI_INTEGRATION_VIA_CTA_BUTTON
+        );
+        this.onClose();
+      } catch (error) {
+        const errorMessage = error?.response?.data?.message;
+        this.alertMessage =
+          errorMessage || this.$t('INTEGRATION_APPS.ADD.API.ERROR_MESSAGE');
+      } finally {
+        this.showAlert(this.alertMessage);
+      }
+    },
+    openOpenAIDoc() {
+      window.open('https://www.chatwoot.com/blog/v2-17', '_blank');
+    },
+  },
+};
+</script>

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

@@ -213,7 +213,7 @@ export default {
 }
 
 .filter.has-error {
-  @apply bg-red-50 dark:bg-red-100;
+  @apply bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50;
 }
 
 .filter-inputs {
@@ -221,7 +221,7 @@ export default {
 }
 
 .filter-error {
-  @apply text-red-500 dark:text-red-600 block my-1 mx-0;
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
 }
 
 .action__question,

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

@@ -61,11 +61,9 @@ export default {
       this.label = this.$t('AUTOMATION.ATTACHMENT.LABEL_UPLOADING');
       try {
         const file = event.target.files[0];
-        const formData = new FormData();
-        formData.append('attachment', file, file.name);
         const id = await this.$store.dispatch(
           'automations/uploadAttachment',
-          formData
+          file
         );
         this.$emit('input', [id]);
         this.uploadState = 'uploaded';

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

@@ -1,5 +1,8 @@
 <template>
-  <button class="header-section back-button" @click.capture="goBack">
+  <button
+    class="header-section flex items-center text-base font-normal mr-4 ml-2 cursor-pointer text-woot-500 dark:text-woot-500"
+    @click.capture="goBack"
+  >
     <fluent-icon icon="chevron-left" />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>

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

@@ -61,21 +61,16 @@ export default {
 }
 
 .colorpicker--selected {
-  border: 1px solid var(--color-border-light);
-  border-radius: $space-smaller;
-  cursor: pointer;
-  height: $space-large;
-  margin-bottom: $space-normal;
-  width: $space-large;
+  @apply border border-solid border-slate-50 dark:border-slate-600 rounded cursor-pointer h-8 w-8 mb-4;
 }
 
 .colorpicker--chrome.vc-chrome {
-  @include elegant-card;
+  @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-slate-75 dark:border-slate-600 rounded;
 
-  border: 1px solid $color-border;
-  border-radius: $space-smaller;
-  margin-top: -$space-one;
-  position: absolute;
-  z-index: 9999;
+  ::v-deep {
+    input {
+      @apply bg-white dark:bg-white;
+    }
+  }
 }
 </style>

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

@@ -114,10 +114,7 @@
           @click="removeFilter"
         />
       </div>
-      <p
-        v-if="v.values.$dirty && v.values.$error"
-        class="text-red-500 dark:text-red-600 block my-1 mx-0"
-      >
+      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
         {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
       </p>
     </div>
@@ -127,7 +124,7 @@
       class="flex items-center justify-center relative my-2.5 mx-0"
     >
       <hr
-        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-600"
+        class="w-full absolute border-b border-solid border-slate-75 dark:border-slate-800"
       />
       <select
         v-model="query_operator"
@@ -273,8 +270,8 @@ export default {
     },
     getInputErrorClass(isDirty, hasError) {
       return isDirty && hasError
-        ? 'bg-red-50 dark:bg-red-200 border-red-100 dark:border-red-300 '
-        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-600 ';
+        ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },
   },
 };
@@ -286,6 +283,10 @@ export default {
   }
 }
 
+.filter-error {
+  @apply text-red-500 dark:text-red-200 block my-1 mx-0;
+}
+
 .multiselect {
   @apply mb-0;
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="row--user-block">
+  <div class="flex items-center gap-1.5 text-left">
     <thumbnail
       :src="user.thumbnail"
       :size="size"
@@ -7,7 +7,8 @@
       :status="user.availability_status"
     />
     <h6
-      class="text-block-title user-name overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      class="my-0 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis text-capitalize"
+      :class="textClass"
     >
       {{ user.name }}
     </h6>
@@ -29,16 +30,10 @@ export default {
       type: String,
       default: '20px',
     },
+    textClass: {
+      type: String,
+      default: 'text-xs text-slate-600',
+    },
   },
 };
 </script>
-
-<style scoped lang="scss">
-.row--user-block {
-  @apply items-center flex text-left;
-
-  .user-name {
-    @apply my-0 mx-2 text-slate-700 dark:text-slate-100;
-  }
-}
-</style>

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

@@ -15,6 +15,13 @@
       :search-key="variableSearchTerm"
       @click="insertVariable"
     />
+    <input
+      ref="imageUpload"
+      type="file"
+      accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+      hidden
+      @change="onFileChange"
+    />
     <div ref="editor" />
   </div>
 </template>
@@ -22,7 +29,7 @@
 <script>
 import {
   messageSchema,
-  wootMessageWriterSetup,
+  buildEditor,
   EditorView,
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
@@ -37,8 +44,13 @@ import {
 import TagAgents from '../conversation/TagAgents';
 import CannedResponse from '../conversation/CannedResponse';
 import VariableList from '../conversation/VariableList';
+import {
+  appendSignature,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
 
 const TYPING_INDICATOR_IDLE_TIME = 4000;
+const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 
 import {
   hasPressedEnterAndNotCmdOrShift,
@@ -51,14 +63,27 @@ import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { replaceVariablesInMessage } from '@chatwoot/utils';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
+import { uploadFile } from 'dashboard/helper/uploadHelper';
+import alertMixin from 'shared/mixins/alertMixin';
+import { findNodeToInsertImage } from 'dashboard/helper/messageEditorHelper';
+import { MESSAGE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
-const createState = (content, placeholder, plugins = []) => {
+const createState = (
+  content,
+  placeholder,
+  plugins = [],
+  methods = {},
+  enabledMenuOptions
+) => {
   return EditorState.create({
     doc: new MessageMarkdownTransformer(messageSchema).parse(content),
-    plugins: wootMessageWriterSetup({
+    plugins: buildEditor({
       schema: messageSchema,
       placeholder,
+      methods,
       plugins,
+      enabledMenuOptions,
     }),
   });
 };
@@ -66,7 +91,7 @@ const createState = (content, placeholder, plugins = []) => {
 export default {
   name: 'WootMessageEditor',
   components: { TagAgents, CannedResponse, VariableList },
-  mixins: [eventListenerMixins, uiSettingsMixin],
+  mixins: [eventListenerMixins, uiSettingsMixin, alertMixin],
   props: {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
@@ -78,6 +103,11 @@ export default {
     enableVariables: { type: Boolean, default: false },
     enableCannedResponses: { type: Boolean, default: true },
     variables: { type: Object, default: () => ({}) },
+    enabledMenuOptions: { type: Array, default: () => [] },
+    signature: { type: String, default: '' },
+    // allowSignature is a kill switch, ensuring no signature methods
+    // are triggered except when this flag is true
+    allowSignature: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -104,6 +134,11 @@ export default {
         this.enableCannedResponses && this.showCannedMenu && !this.isPrivate
       );
     },
+    editorMenuOptions() {
+      return this.enabledMenuOptions.length
+        ? this.enabledMenuOptions
+        : MESSAGE_EDITOR_MENU_OPTIONS;
+    },
     plugins() {
       if (!this.enableSuggestions) {
         return [];
@@ -193,6 +228,12 @@ export default {
         }),
       ];
     },
+    sendWithSignature() {
+      // this is considered the source of truth, we watch this property
+      // on change, we toggle the signature in the editor
+      const { send_with_signature: isEnabled } = this.uiSettings;
+      return isEnabled && this.allowSignature && !this.isPrivate;
+    },
   },
   watch: {
     showUserMentions(updatedValue) {
@@ -204,20 +245,19 @@ export default {
     showVariables(updatedValue) {
       this.$emit('toggle-variables-menu', !this.isPrivate && updatedValue);
     },
-    value(newValue = '') {
-      if (newValue !== this.contentFromEditor) {
-        this.reloadState();
+    value(newVal = '') {
+      if (newVal !== this.contentFromEditor) {
+        this.reloadState(newVal);
       }
     },
     editorId() {
       this.showCannedMenu = false;
       this.cannedSearchTerm = '';
-      this.reloadState();
+      this.reloadState(this.value);
     },
     isPrivate() {
-      this.reloadState();
+      this.reloadState(this.value);
     },
-
     updateSelectionWith(newValue, oldValue) {
       if (!this.editorView) {
         return null;
@@ -236,20 +276,106 @@ export default {
       }
       return null;
     },
+    sendWithSignature(newValue) {
+      // see if the allowSignature flag is true
+      if (this.allowSignature) {
+        this.toggleSignatureInEditor(newValue);
+      }
+    },
   },
   created() {
-    this.state = createState(this.value, this.placeholder, this.plugins);
+    this.state = createState(
+      this.value,
+      this.placeholder,
+      this.plugins,
+      { onImageUpload: this.openFileBrowser },
+      this.editorMenuOptions
+    );
   },
   mounted() {
     this.createEditorView();
     this.editorView.updateState(this.state);
-    this.focusEditorInputField();
+    this.focusEditor(this.value);
   },
   methods: {
-    reloadState() {
-      this.state = createState(this.value, this.placeholder, this.plugins);
+    reloadState(content = this.value) {
+      this.state = createState(
+        content,
+        this.placeholder,
+        this.plugins,
+        { onImageUpload: this.openFileBrowser },
+        this.editorMenuOptions
+      );
       this.editorView.updateState(this.state);
-      this.focusEditorInputField();
+
+      this.focusEditor(content);
+    },
+    focusEditor(content) {
+      if (this.isBodyEmpty(content) && this.sendWithSignature) {
+        // reload state can be called when switching between conversations, or when drafts is loaded
+        // these drafts can also have a signature, so we need to check if the body is empty
+        // and handle things accordingly
+        this.handleEmptyBodyWithSignature();
+      } else {
+        // this is in the else block, handleEmptyBodyWithSignature also has a call to the focus method
+        // the position is set to start, because the signature is added at the end of the body
+        this.focusEditorInputField('end');
+      }
+    },
+    toggleSignatureInEditor(signatureEnabled) {
+      // The toggleSignatureInEditor gets the new value from the
+      // watcher, this means that if the value is true, the signature
+      // is supposed to be added, else we remove it.
+      if (signatureEnabled) {
+        this.addSignature();
+      } else {
+        this.removeSignature();
+      }
+    },
+    addSignature() {
+      let content = this.value;
+      // see if the content is empty, if it is before appending the signature
+      // we need to add a paragraph node and move the cursor at the start of the editor
+      const contentWasEmpty = this.isBodyEmpty(content);
+      content = appendSignature(content, this.signature);
+      // need to reload first, ensuring that the editorView is updated
+      this.reloadState(content);
+
+      if (contentWasEmpty) {
+        this.handleEmptyBodyWithSignature();
+      }
+    },
+    removeSignature() {
+      if (!this.signature) return;
+      let content = this.value;
+      content = removeSignature(content, this.signature);
+      // reload the state, ensuring that the editorView is updated
+      this.reloadState(content);
+    },
+    isBodyEmpty(content) {
+      // if content is undefined, we assume that the body is empty
+      if (!content) return true;
+
+      // if the signature is present, we need to remove it before checking
+      // note that we don't update the editorView, so this is safe
+      const bodyWithoutSignature = this.signature
+        ? removeSignature(content, this.signature)
+        : content;
+
+      // trimming should remove all the whitespaces, so we can check the length
+      return bodyWithoutSignature.trim().length === 0;
+    },
+    handleEmptyBodyWithSignature() {
+      const { schema, tr } = this.state;
+
+      // create a paragraph node and
+      // start a transaction to append it at the end
+      const paragraph = schema.nodes.paragraph.create();
+      const paragraphTransaction = tr.insert(0, paragraph);
+      this.editorView.dispatch(paragraphTransaction);
+
+      // Set the focus at the start of the input field
+      this.focusEditorInputField('start');
     },
     createEditorView() {
       this.editorView = new EditorView(this.$refs.editor, {
@@ -294,9 +420,11 @@ export default {
         this.focusEditorInputField();
       }
     },
-    focusEditorInputField() {
+    focusEditorInputField(pos = 'end') {
       const { tr } = this.editorView.state;
-      const selection = Selection.atEnd(tr.doc);
+
+      const selection =
+        pos === 'end' ? Selection.atEnd(tr.doc) : Selection.atStart(tr.doc);
 
       this.editorView.dispatch(tr.setSelection(selection));
       this.editorView.focus();
@@ -374,6 +502,57 @@ export default {
       tr.scrollIntoView();
       return false;
     },
+    openFileBrowser() {
+      this.$refs.imageUpload.click();
+    },
+    onFileChange() {
+      const file = this.$refs.imageUpload.files[0];
+      if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
+        this.uploadImageToStorage(file);
+      } else {
+        this.showAlert(
+          this.$t(
+            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SIZE_ERROR',
+            {
+              size: MAXIMUM_FILE_UPLOAD_SIZE,
+            }
+          )
+        );
+      }
+
+      this.$refs.imageUpload.value = '';
+    },
+    async uploadImageToStorage(file) {
+      try {
+        const { fileUrl } = await uploadFile(file);
+        if (fileUrl) {
+          this.onImageInsertInEditor(fileUrl);
+        }
+        this.showAlert(
+          this.$t(
+            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
+          )
+        );
+      } catch (error) {
+        this.showAlert(
+          this.$t(
+            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_ERROR'
+          )
+        );
+      }
+    },
+    onImageInsertInEditor(fileUrl) {
+      const { tr } = this.editorView.state;
+
+      const insertData = findNodeToInsertImage(this.editorView.state, fileUrl);
+
+      if (insertData) {
+        this.editorView.dispatch(
+          tr.insert(insertData.pos, insertData.node).scrollIntoView()
+        );
+        this.focusEditorInputField();
+      }
+    },
 
     emitOnChange() {
       this.editorView.updateState(this.state);
@@ -456,6 +635,28 @@ export default {
   }
   > .ProseMirror {
     @apply p-0 break-words text-slate-800 dark:text-slate-100;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      @apply text-slate-800 dark:text-slate-100;
+    }
+
+    blockquote {
+      @apply border-slate-400 dark:border-slate-500;
+
+      p {
+        @apply text-slate-600 dark:text-slate-400;
+      }
+    }
+
+    ol li {
+      @apply list-item list-decimal;
+    }
   }
 }
 
@@ -469,20 +670,28 @@ export default {
 
 .ProseMirror-prompt {
   @apply z-50 bg-slate-25 dark:bg-slate-700 rounded-md border border-solid border-slate-75 dark:border-slate-800;
+
+  h5 {
+    @apply dark:text-slate-25 text-slate-800;
+  }
 }
 
 .is-private {
   .prosemirror-mention-node {
-    @apply font-medium bg-slate-50 dark:bg-slate-200 text-slate-900 dark:text-slate-900 py-0 px-1;
+    @apply font-medium bg-yellow-100 dark:bg-yellow-800 text-slate-900 dark:text-slate-25 py-0 px-1;
   }
 
   .ProseMirror-menubar-wrapper {
     .ProseMirror-menubar {
-      @apply bg-yellow-50 dark:bg-yellow-50 text-slate-700 dark:text-slate-700;
+      @apply bg-yellow-100 dark:bg-yellow-800 text-slate-700 dark:text-slate-25;
     }
 
     > .ProseMirror {
-      @apply text-slate-800 dark:text-slate-800;
+      @apply text-slate-800 dark:text-slate-25;
+
+      p {
+        @apply text-slate-800 dark:text-slate-25;
+      }
     }
   }
 }

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

@@ -16,7 +16,7 @@
 <script>
 import {
   fullSchema,
-  wootArticleWriterSetup,
+  buildEditor,
   EditorView,
   ArticleMarkdownSerializer,
   ArticleMarkdownTransformer,
@@ -33,15 +33,17 @@ const createState = (
   content,
   placeholder,
   plugins = [],
-  onImageUpload = () => {}
+  methods = {},
+  enabledMenuOptions
 ) => {
   return EditorState.create({
     doc: new ArticleMarkdownTransformer(fullSchema).parse(content),
-    plugins: wootArticleWriterSetup({
+    plugins: buildEditor({
       schema: fullSchema,
       placeholder,
+      methods,
       plugins,
-      onImageUpload,
+      enabledMenuOptions,
     }),
   });
 };
@@ -52,6 +54,7 @@ export default {
     value: { type: String, default: '' },
     editorId: { type: String, default: '' },
     placeholder: { type: String, default: '' },
+    enabledMenuOptions: { type: Array, default: () => [] },
   },
   data() {
     return {
@@ -83,7 +86,8 @@ export default {
       this.value,
       this.placeholder,
       this.plugins,
-      this.openFileBrowser
+      { onImageUpload: this.openFileBrowser },
+      this.enabledMenuOptions
     );
   },
   mounted() {
@@ -152,7 +156,8 @@ export default {
         this.value,
         this.placeholder,
         this.plugins,
-        this.openFileBrowser
+        { onImageUpload: this.openFileBrowser },
+        this.enabledMenuOptions
       );
       this.editorView.updateState(this.state);
       this.focusEditorInputField();
@@ -213,7 +218,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~@chatwoot/prosemirror-schema/src/styles/article.scss';
+@import '@chatwoot/prosemirror-schema/src/styles/article.scss';
 
 .ProseMirror-menubar-wrapper {
   display: flex;

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

@@ -288,7 +288,7 @@ export default {
       }
     },
     showMessageSignatureButton() {
-      return !this.isOnPrivateNote && this.isAnEmailChannel;
+      return !this.isOnPrivateNote;
     },
     sendWithSignature() {
       const { send_with_signature: isEnabled } = this.uiSettings;
@@ -326,7 +326,7 @@ export default {
   @apply flex justify-between py-3 px-4;
 
   &.is-note-mode {
-    @apply bg-yellow-50 dark:bg-yellow-50;
+    @apply bg-yellow-100 dark:bg-yellow-800;
   }
 }
 
@@ -342,7 +342,7 @@ export default {
   label {
     @apply cursor-pointer;
   }
-  &:hover .button {
+  &:hover button {
     @apply dark:bg-slate-800 bg-slate-100;
   }
 }

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

@@ -137,7 +137,7 @@ export default {
   .button--note {
     @apply border-l-0 rounded-none;
     &.is-active {
-      @apply border-r border-b-0 bg-yellow-50 dark:bg-yellow-50 border-t-0 border-slate-50 dark:border-slate-700;
+      @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
     }
     &:hover,
     &:active {

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

@@ -23,7 +23,7 @@
         </label>
       </div>
       <div
-        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-700 border border-solid border-slate-50 dark:border-slate-700 mb-4"
+        class="p-4 rounded-lg bg-slate-25 dark:bg-slate-900 border border-solid border-slate-50 dark:border-slate-700/50 mb-4"
       >
         <filter-input-box
           v-for="(filter, i) in appliedFilters"
@@ -358,6 +358,7 @@ export default {
         applied_filters: this.appliedFilters.map(filter => ({
           key: filter.attribute_key,
           operator: filter.filter_operator,
+          query_operator: filter.query_operator,
         })),
       });
     },

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

@@ -61,7 +61,7 @@ import { mapGetters } from 'vuex';
 import ContactPanel from 'dashboard/routes/dashboard/conversation/ContactPanel';
 import ConversationHeader from './ConversationHeader';
 import DashboardAppFrame from '../DashboardApp/Frame.vue';
-import EmptyState from './EmptyState';
+import EmptyState from './EmptyState/EmptyState';
 import MessagesView from './MessagesView';
 
 export default {

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

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-50 dark:hover:bg-slate-800 group"
+    class="conversation flex flex-shrink-0 flex-grow-0 w-auto max-w-full cursor-pointer relative py-0 px-4 border-transparent border-l-2 border-t-0 border-b-0 border-r-0 border-solid items-start hover:bg-slate-25 dark:hover:bg-slate-800 group"
     :class="{
-      'active bg-slate-50 dark:bg-slate-800 border-woot-500': isActiveChat,
+      'active bg-slate-25 dark:bg-slate-800 border-woot-500': isActiveChat,
       'unread-chat': hasUnread,
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
@@ -84,7 +84,7 @@
           <fluent-icon
             v-if="attachmentIcon"
             size="16"
-            class="-mt-0.5 align-middle inline-block"
+            class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
             :icon="attachmentIcon"
           />
           {{ this.$t(`${attachmentMessageContent}`) }}
@@ -99,8 +99,8 @@
       >
         <fluent-icon
           size="16"
-          class="-mt-0.5 align-middle"
-          icon="info inline-block"
+          class="-mt-0.5 align-middle inline-block text-slate-600 dark:text-slate-300"
+          icon="info"
         />
         <span>
           {{ this.$t(`CHAT_LIST.NO_MESSAGES`) }}

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

@@ -8,7 +8,11 @@
       <div
         class="flex justify-center items-center mr-4 rtl:mr-0 rtl:ml-4 min-w-0"
       >
-        <back-button v-if="showBackButton" :back-url="backButtonUrl" />
+        <back-button
+          v-if="showBackButton"
+          :back-url="backButtonUrl"
+          class="ltr:ml-0 rtl:mr-0 rtl:ml-4"
+        />
         <Thumbnail
           :src="currentContact.thumbnail"
           :badge="inboxBadge"

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

@@ -10,45 +10,40 @@
       class="clearfix"
     >
       <onboarding-view v-if="isAdmin" />
-      <div v-else class="current-chat">
-        <div>
-          <img src="~dashboard/assets/images/inboxes.svg" alt="No Inboxes" />
-          <span>
-            {{ $t('CONVERSATION.NO_INBOX_AGENT') }}
-          </span>
-        </div>
-      </div>
+      <empty-state-message
+        v-else
+        :message="$t('CONVERSATION.NO_INBOX_AGENT')"
+      />
     </div>
     <!-- Show empty state images if not loading -->
+
     <div
       v-else-if="!uiFlags.isFetching && !loadingChatList"
-      class="current-chat"
+      class="flex flex-col items-center justify-center h-full"
     >
       <!-- No conversations available -->
-      <div v-if="!allConversations.length">
-        <img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
-        <span>
-          {{ $t('CONVERSATION.NO_MESSAGE_1') }}
-          <br />
-        </span>
-      </div>
-      <!-- No conversation selected -->
-      <div v-else-if="allConversations.length && !currentChat.id">
-        <img src="~dashboard/assets/images/chat.svg" alt="No Chat" />
-        <span>{{ conversationMissingMessage }}</span>
-      </div>
+      <empty-state-message
+        v-if="!allConversations.length"
+        :message="$t('CONVERSATION.NO_MESSAGE_1')"
+      />
+      <empty-state-message
+        v-else-if="allConversations.length && !currentChat.id"
+        :message="conversationMissingMessage"
+      />
     </div>
   </div>
 </template>
 <script>
 import { mapGetters } from 'vuex';
-import adminMixin from '../../../mixins/isAdmin';
-import accountMixin from '../../../mixins/account';
-import OnboardingView from './OnboardingView';
+import adminMixin from 'dashboard/mixins/isAdmin';
+import accountMixin from 'dashboard/mixins/account';
+import OnboardingView from '../OnboardingView';
+import EmptyStateMessage from './EmptyStateMessage';
 
 export default {
   components: {
     OnboardingView,
+    EmptyStateMessage,
   },
   mixins: [accountMixin, adminMixin],
   props: {
@@ -87,51 +82,10 @@ export default {
         !this.loadingChatList &&
         this.isAdmin
       ) {
-        return 'inbox-empty-state';
+        return 'h-full overflow-auto';
       }
-      return 'columns conv-empty-state';
+      return 'flex-1 min-w-0 px-0 flex flex-col items-center justify-center h-full';
     },
   },
 };
 </script>
-<style lang="scss" scoped>
-.inbox-empty-state {
-  height: 100%;
-  overflow: auto;
-}
-
-.current-chat {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-
-  div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-
-    img {
-      margin: var(--space-normal);
-      width: 6.25rem;
-    }
-
-    span {
-      font-size: var(--font-size-small);
-      font-weight: var(--font-weight-medium);
-      text-align: center;
-    }
-  }
-}
-
-.conv-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/EmptyState/EmptyStateMessage.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-col items-center justify-center h-full">
+    <img
+      class="m-4 w-32 hidden dark:block"
+      src="~dashboard/assets/images/no-chat-dark.svg"
+      alt="No Chat dark"
+    />
+    <img
+      class="m-4 w-32 block dark:hidden"
+      src="~dashboard/assets/images/no-chat.svg"
+      alt="No Chat"
+    />
+    <span
+      class="text-sm text-slate-800 dark:text-slate-200 font-medium text-center"
+    >
+      {{ message }}
+      <br />
+    </span>
+    <!-- Cmd bar, keyboard shortcuts placeholder -->
+    <feature-placeholder />
+  </div>
+</template>
+
+<script>
+import FeaturePlaceholder from './FeaturePlaceholder.vue';
+export default {
+  components: { FeaturePlaceholder },
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/conversation/EmptyState/FeaturePlaceholder.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-2 mt-9">
+    <div
+      v-for="keyShortcut in keyShortcuts"
+      :key="keyShortcut.key"
+      class="flex gap-2 items-center"
+    >
+      <div class="flex gap-2 items-center">
+        <hotkey
+          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
+        >
+          ⌘
+        </hotkey>
+        <hotkey
+          custom-class="h-6 w-8 text-sm font-medium text-slate-700 dark:text-slate-100 bg-slate-100 dark:bg-slate-700 border-b-2 border-slate-300 dark:border-slate-500"
+        >
+          {{ keyShortcut.key }}
+        </hotkey>
+      </div>
+      <span
+        class="text-sm text-slate-700 dark:text-slate-300 font-medium text-center"
+      >
+        {{ keyShortcut.description }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Hotkey from 'dashboard/components/base/Hotkey';
+
+export default {
+  components: {
+    Hotkey,
+  },
+  data() {
+    return {
+      keyShortcuts: [
+        {
+          key: 'K',
+          description: this.$t('CONVERSATION.EMPTY_STATE.CMD_BAR'),
+        },
+        {
+          key: '/',
+          description: this.$t('CONVERSATION.EMPTY_STATE.KEYBOARD_SHORTCUTS'),
+        },
+      ],
+    };
+  },
+};
+</script>

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

@@ -552,10 +552,10 @@ export default {
     }
 
     &.is-private.is-text > .message-text__wrap .link {
-      @apply text-woot-700 dark:text-woot-700;
+      @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 text-slate-700 dark:text-slate-700 underline;
+      @apply font-bold bg-none rounded-sm p-0 bg-yellow-100 dark:bg-yellow-700 text-slate-700 dark:text-slate-25 underline;
     }
 
     &.is-from-bot {
@@ -651,6 +651,10 @@ li.right {
     @apply bg-slate-75 dark:bg-slate-700 inline-block leading-none rounded-sm p-1;
   }
 
+  ol li {
+    @apply list-item list-decimal;
+  }
+
   pre {
     @apply bg-slate-75 dark:bg-slate-700 block border-slate-75 dark:border-slate-700 text-slate-800 dark:text-slate-100 rounded-md p-2 mt-1 mb-2 leading-relaxed whitespace-pre-wrap;
 
@@ -660,7 +664,11 @@ li.right {
   }
 
   blockquote {
-    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-700 text-slate-800 dark:text-slate-100;
+    @apply border-l-4 mx-0 my-1 pt-2 pr-2 pb-0 pl-4 border-slate-75 border-solid dark:border-slate-600 text-slate-800 dark:text-slate-100;
+
+    p {
+      @apply text-slate-800 dark:text-slate-300;
+    }
   }
 }
 

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

@@ -45,7 +45,7 @@
       />
       <li v-show="unreadMessageCount != 0" class="unread--toast">
         <span>
-          {{ unreadMessageCount }}
+          {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
           {{
             unreadMessageCount > 1
               ? $t('CONVERSATION.UNREAD_MESSAGES')
@@ -119,11 +119,13 @@ import aiMixin from 'dashboard/mixins/aiMixin';
 import { getTypingUsersText } from '../../../helper/commons';
 import { calculateScrollTop } from './helpers/scrollTopCalculationHelper';
 import { isEscape } from 'shared/helpers/KeyboardHelpers';
+import { LocalStorage } from 'shared/helpers/localStorage';
 
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
 import wootConstants from 'dashboard/constants/globals';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 
 export default {
   components: {
@@ -312,7 +314,7 @@ export default {
       return '';
     },
     unreadMessageCount() {
-      return this.currentChat.unread_count;
+      return this.currentChat.unread_count || 0;
     },
   },
 
@@ -392,8 +394,11 @@ export default {
       });
     },
     isLabelSuggestionDismissed() {
-      const dismissed = this.getDismissedConversations(this.currentAccountId);
-      return dismissed[this.currentAccountId].includes(this.conversationId);
+      return LocalStorage.getFlag(
+        LOCAL_STORAGE_KEYS.DISMISSED_LABEL_SUGGESTIONS,
+        this.currentAccountId,
+        this.currentChat.id
+      );
     },
     fetchAllAttachmentsFromCurrentChat() {
       this.$store.dispatch('fetchAllAttachments', this.currentChat.id);

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

@@ -2,8 +2,9 @@
   <div class="reply-box" :class="replyBoxClass">
     <banner
       v-if="showSelfAssignBanner"
-      action-button-variant="link"
+      action-button-variant="clear"
       color-scheme="secondary"
+      class="banner--self-assign"
       :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
       :has-action-button="true"
       :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
@@ -52,6 +53,9 @@
         class="input"
         :placeholder="messagePlaceHolder"
         :min-height="4"
+        :signature="signatureToApply"
+        :allow-signature="true"
+        :send-with-signature="sendWithSignature"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
         @focus="onFocus"
@@ -68,6 +72,8 @@
         :min-height="4"
         :enable-variables="true"
         :variables="messageVariables"
+        :signature="signatureToApply"
+        :allow-signature="true"
         @typing-off="onTypingOff"
         @typing-on="onTypingOn"
         @focus="onFocus"
@@ -85,16 +91,10 @@
       />
     </div>
     <div
-      v-if="isSignatureEnabledForInbox"
-      v-tooltip="$t('CONVERSATION.FOOTER.MESSAGE_SIGN_TOOLTIP')"
+      v-if="isSignatureEnabledForInbox && !isSignatureAvailable"
       class="message-signature-wrap"
     >
-      <p
-        v-if="isSignatureAvailable"
-        v-dompurify-html="formatMessage(messageSignature)"
-        class="message-signature"
-      />
-      <p v-else class="message-signature">
+      <p class="message-signature">
         {{ $t('CONVERSATION.FOOTER.MESSAGE_SIGNATURE_NOT_CONFIGURED') }}
         <router-link :to="profilePath">
           {{ $t('CONVERSATION.FOOTER.CLICK_HERE') }}
@@ -183,6 +183,12 @@ import wootConstants from 'dashboard/constants/globals';
 import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
+import {
+  appendSignature,
+  removeSignature,
+  replaceSignature,
+  extractTextFromMarkdown,
+} from 'dashboard/helper/editorHelper';
 
 const EmojiInput = () => import('shared/components/emoji/EmojiInput');
 
@@ -470,10 +476,10 @@ export default {
       );
     },
     isSignatureEnabledForInbox() {
-      return !this.isPrivate && this.isAnEmailChannel && this.sendWithSignature;
+      return !this.isPrivate && this.sendWithSignature;
     },
     isSignatureAvailable() {
-      return !!this.messageSignature;
+      return !!this.signatureToApply;
     },
     sendWithSignature() {
       const { send_with_signature: isEnabled } = this.uiSettings;
@@ -513,6 +519,12 @@ export default {
       });
       return variables;
     },
+    // ensure that the signature is plain text depending on `showRichContentEditor`
+    signatureToApply() {
+      return this.showRichContentEditor
+        ? this.messageSignature
+        : extractTextFromMarkdown(this.messageSignature);
+    },
   },
   watch: {
     currentChat(conversation) {
@@ -580,6 +592,23 @@ export default {
       this.updateUISettings({
         display_rich_content_editor: !this.showRichContentEditor,
       });
+
+      const plainTextSignature = extractTextFromMarkdown(this.messageSignature);
+
+      if (!this.showRichContentEditor && this.messageSignature) {
+        // remove the old signature -> extract text from markdown -> attach new signature
+        let message = removeSignature(this.message, this.messageSignature);
+        message = extractTextFromMarkdown(message);
+        message = appendSignature(message, plainTextSignature);
+
+        this.message = message;
+      } else {
+        this.message = replaceSignature(
+          this.message,
+          plainTextSignature,
+          this.messageSignature
+        );
+      }
     },
     saveDraft(conversationId, replyType) {
       if (this.message || this.message === '') {
@@ -599,9 +628,22 @@ export default {
     getFromDraft() {
       if (this.conversationIdByRoute) {
         const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
-        this.message = this.$store.getters['draftMessages/get'](key) || '';
+        const messageFromStore =
+          this.$store.getters['draftMessages/get'](key) || '';
+
+        // ensure that the message has signature set based on the ui setting
+        this.message = this.toggleSignatureForDraft(messageFromStore);
       }
     },
+    toggleSignatureForDraft(message) {
+      if (this.isPrivate) {
+        return message;
+      }
+
+      return this.sendWithSignature
+        ? appendSignature(message, this.signatureToApply)
+        : removeSignature(message, this.signatureToApply);
+    },
     removeFromDraft() {
       if (this.conversationIdByRoute) {
         const key = `draft-${this.conversationIdByRoute}-${this.replyType}`;
@@ -693,19 +735,14 @@ export default {
         return;
       }
       if (!this.showMentions) {
-        let newMessage = this.message;
-        if (this.isSignatureEnabledForInbox && this.messageSignature) {
-          newMessage += '\n\n' + this.messageSignature;
-        }
-
         const isOnWhatsApp =
           this.isATwilioWhatsAppChannel ||
           this.isAWhatsAppCloudChannel ||
           this.is360DialogWhatsAppChannel;
         if (isOnWhatsApp && !this.isPrivate) {
-          this.sendMessageAsMultipleMessages(newMessage);
+          this.sendMessageAsMultipleMessages(this.message);
         } else {
-          const messagePayload = this.getMessagePayload(newMessage);
+          const messagePayload = this.getMessagePayload(this.message);
           this.sendMessage(messagePayload);
         }
 
@@ -724,6 +761,15 @@ export default {
         this.sendMessage(messagePayload);
       });
     },
+    sendMessageAnalyticsData(isPrivate) {
+      // Analytics data for message signature is enabled or not in channels
+      return isPrivate
+        ? this.$track(CONVERSATION_EVENTS.SENT_PRIVATE_NOTE)
+        : this.$track(CONVERSATION_EVENTS.SENT_MESSAGE, {
+            channelType: this.channelType,
+            signatureEnabled: this.sendWithSignature,
+          });
+    },
     async onSendReply() {
       const undefinedVariables = getUndefinedVariablesInMessage({
         message: this.message,
@@ -757,6 +803,7 @@ export default {
         bus.$emit(BUS_EVENTS.SCROLL_TO_MESSAGE);
         bus.$emit(BUS_EVENTS.MESSAGE_SENT);
         this.removeFromDraft();
+        this.sendMessageAnalyticsData(messagePayload.private);
       } catch (error) {
         const errorMessage =
           error?.response?.data?.error || this.$t('CONVERSATION.MESSAGE_ERROR');
@@ -817,6 +864,10 @@ export default {
     },
     clearMessage() {
       this.message = '';
+      if (this.sendWithSignature && !this.isPrivate) {
+        // if signature is enabled, append it to the message
+        this.message = appendSignature(this.message, this.signatureToApply);
+      }
       this.attachedFiles = [];
       this.isRecordingAudio = false;
     },
@@ -1094,6 +1145,10 @@ export default {
   @apply mb-0;
 }
 
+.banner--self-assign {
+  @apply py-2;
+}
+
 .message-signature-wrap {
   @apply my-0 mx-4 px-1 flex max-h-[8vh] items-baseline justify-between hover:bg-slate-25 dark:hover:bg-slate-800 border border-dashed border-slate-100 dark:border-slate-700 rounded-sm overflow-auto;
 }
@@ -1110,7 +1165,7 @@ export default {
   @apply border-t border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-900;
 
   &.is-private {
-    @apply bg-yellow-50 dark:bg-yellow-50;
+    @apply bg-yellow-50 dark:bg-yellow-200;
   }
 }
 .send-button {
@@ -1122,41 +1177,29 @@ export default {
 }
 
 .emoji-dialog {
-  top: unset;
-  bottom: -40px;
-  left: -320px;
-  right: unset;
+  @apply top-[unset] -bottom-10 -left-80 right-[unset];
 
   &::before {
-    right: var(--space-minus-normal);
-    bottom: var(--space-small);
     transform: rotate(270deg);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
+    @apply -right-4 bottom-2 rtl:right-0 rtl:-left-4;
   }
 }
 
 .emoji-dialog--rtl {
-  left: unset;
-  right: -320px;
+  @apply left-[unset] -right-80;
   &::before {
-    left: var(--space-minus-normal);
     transform: rotate(90deg);
-    right: 0;
-    bottom: var(--space-small);
     filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.08));
   }
 }
 
 .emoji-dialog--expanded {
-  left: unset;
-  bottom: var(--space-jumbo);
-  position: absolute;
-  z-index: var(--z-index-normal);
+  @apply left-[unset] bottom-0 absolute z-[100];
 
   &::before {
     transform: rotate(0deg);
-    left: var(--space-smaller);
-    bottom: var(--space-minus-small);
+    @apply left-1 -bottom-2;
   }
 }
 .message-signature {

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

@@ -95,7 +95,7 @@ export default {
 
 <style scoped lang="scss">
 .mention--box {
-  @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
+  @apply bg-white text-sm dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 leading-[1.2] bottom-full max-h-[12.5rem] border-t border-solid border-slate-75 dark:border-slate-800;
 
   &.with-bottom-border {
     @apply border-b-[0.5rem] border-solid border-white dark:border-slate-600;

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -21,7 +21,9 @@
               <p class="label-title">
                 {{ template.name }}
               </p>
-              <span class="label-lang label">
+              <span
+                class="inline-block py-1 px-2 rounded-sm text-xs leading-none cursor-default bg-white dark:bg-slate-700 text-slate-800 dark:text-slate-100"
+              >
                 {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
@@ -114,7 +116,7 @@ export default {
   @apply bg-slate-25 dark:bg-slate-900 rounded-md max-h-[18.75rem] overflow-y-auto p-2.5;
 
   .template__list-item {
-    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-600;
+    @apply rounded-lg cursor-pointer block p-2.5 text-left w-full hover:bg-woot-50 dark:hover:bg-slate-800;
 
     .label-title {
       @apply text-sm;

app/javascript/dashboard/components/widgets/conversation/bubble/Actions.vue

@@ -233,7 +233,7 @@ export default {
         return false;
       }
 
-      if (this.isAWebWidgetInbox) {
+      if (this.isAWebWidgetInbox || this.isAPIInbox) {
         const { contact_last_seen_at: contactLastSeenAt } = this.currentChat;
         return contactLastSeenAt >= this.createdAt;
       }

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

@@ -8,7 +8,7 @@
     <div class="wrap">
       <div class="label-suggestion--container">
         <h6 class="label-suggestion--title">Suggested labels</h6>
-        <div v-if="!fetchingSuggestions" class="label-suggestion--options">
+        <div class="label-suggestion--options">
           <button
             v-for="label in preparedLabels"
             :key="label.title"
@@ -123,7 +123,6 @@ export default {
   data() {
     return {
       isDismissed: false,
-      fetchingSuggestions: false,
       isHovered: false,
       selectedLabels: [],
     };
@@ -160,11 +159,7 @@ export default {
       if (this.isDismissed) return false;
       if (!this.isAIIntegrationEnabled) return false;
 
-      return (
-        !this.fetchingSuggestions &&
-        this.preparedLabels.length &&
-        this.chatLabels.length === 0
-      );
+      return this.preparedLabels.length && this.chatLabels.length === 0;
     },
   },
   watch: {
@@ -190,12 +185,10 @@ export default {
       }
     },
     dismissSuggestions() {
-      const dismissed = this.getDismissedConversations(this.currentAccountId);
-      dismissed[this.currentAccountId].push(this.conversationId);
-
-      LocalStorage.set(
+      LocalStorage.setFlag(
         LOCAL_STORAGE_KEYS.DISMISSED_LABEL_SUGGESTIONS,
-        dismissed
+        this.currentAccountId,
+        this.conversationId
       );
 
       // dismiss this once the values are set
@@ -203,8 +196,11 @@ export default {
       this.trackLabelEvent(OPEN_AI_EVENTS.DISMISS_LABEL_SUGGESTION);
     },
     isConversationDismissed() {
-      const dismissed = this.getDismissedConversations(this.currentAccountId);
-      return dismissed[this.currentAccountId].includes(this.conversationId);
+      return LocalStorage.getFlag(
+        LOCAL_STORAGE_KEYS.DISMISSED_LABEL_SUGGESTIONS,
+        this.currentAccountId,
+        this.conversationId
+      );
     },
     addAllLabels() {
       let labelsToAdd = this.selectedLabels;
@@ -215,7 +211,7 @@ export default {
         conversationId: this.conversationId,
         labels: labelsToAdd,
       });
-      this.trackLabelEvent(OPEN_AI_EVENTS.LABEL_SUGGESTION_APPLIED);
+      this.trackLabelEvent(OPEN_AI_EVENTS.APPLY_LABEL_SUGGESTION);
     },
     trackLabelEvent(event) {
       const payload = {

app/javascript/dashboard/components/widgets/forms/PhoneInput.vue

@@ -2,7 +2,7 @@
   <div class="phone-input--wrap relative">
     <div class="phone-input" :class="{ 'has-error': error }">
       <div
-        class="cursor-pointer py-2 pr-1 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-2 bg-slate-25 dark:bg-slate-700 h-10 w-[3.25rem]"
+        class="cursor-pointer py-2 pr-1.5 pl-2 rounded-tl-md rounded-bl-md flex items-center justify-center gap-1.5 bg-slate-25 dark:bg-slate-700 h-10 w-14"
         @click="toggleCountryDropdown"
       >
         <h5 v-if="activeCountry.emoji" class="mb-0">

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -79,7 +79,7 @@ export default {
 
 <style scoped lang="scss">
 .mention--box {
-  @apply bg-white dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-[100] pt-2 px-2 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border-t border-solid border-slate-75 dark:border-slate-800;
+  @apply bg-white dark:bg-slate-700 rounded-md overflow-auto absolute w-full z-20 pt-2 px-2 pb-0 shadow-md left-0 bottom-full max-h-[9.75rem] border-t border-solid border-slate-75 dark:border-slate-800;
 
   .dropdown-menu__item:last-child {
     @apply pb-1;

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.vue

@@ -4,22 +4,18 @@
       <woot-modal-header
         :header-title="$t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS')"
       />
-      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-8 mt-6">
+      <div class="grid grid-cols-2 gap-x-5 gap-y-3 pt-0 px-8 pb-4 mt-6">
         <div class="flex justify-between items-center min-w-[25rem]">
           <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TOGGLE_MODAL') }}
           </h5>
-          <div class="flex items-center mb-1 ml-2">
-            <p
-              class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-            >
+          <div class="flex items-center mb-1 ml-2 gap-2">
+            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </p>
-            <p
-              class="shortcut-key items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
-            >
+            </hotkey>
+            <hotkey custom-class="min-h-[28px] min-w-[36px] key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
-            </p>
+            </hotkey>
           </div>
         </div>
       </div>
@@ -29,34 +25,26 @@
           <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.OPEN_CONVERSATION') }}
           </h5>
-          <div class="flex items-center mb-1 ml-2">
-            <div class="flex mr-2">
-              <span
-                class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-              >
+          <div class="flex items-center mb-1 ml-2 gap-2">
+            <div class="flex gap-2">
+              <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-              </span>
-              <span
-                class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-              >
+              </hotkey>
+              <hotkey custom-class="min-h-[28px] w-9 key">
                 J
-              </span>
+              </hotkey>
               <span
                 class="flex items-center font-semibold text-sm text-slate-800 dark:text-slate-100"
               >
                 {{ $t('KEYBOARD_SHORTCUTS.KEYS.FORWARD_SLASH_KEY') }}
               </span>
             </div>
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-            >
+            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </span>
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
-            >
+            </hotkey>
+            <hotkey custom-class="w-9 key">
               K
-            </span>
+            </hotkey>
           </div>
         </div>
 
@@ -64,22 +52,16 @@
           <h5 class="text-sm text-slate-800 dark:text-slate-100">
             {{ $t('KEYBOARD_SHORTCUTS.TITLE.RESOLVE_AND_NEXT') }}
           </h5>
-          <div class="flex items-center mb-1 ml-2">
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-            >
+          <div class="flex items-center mb-1 ml-2 gap-2">
+            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.WINDOWS_KEY_AND_COMMAND_KEY') }}
-            </span>
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
-            >
+            </hotkey>
+            <hotkey custom-class="min-h-[28px] min-w-[60px] normal-case key">
               {{ $t('KEYBOARD_SHORTCUTS.KEYS.ALT_OR_OPTION_KEY') }}
-            </span>
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
-            >
+            </hotkey>
+            <hotkey custom-class="w-9 key">
               E
-            </span>
+            </hotkey>
           </div>
         </div>
         <div
@@ -87,20 +69,22 @@
           :key="shortcutKey.id"
           class="flex justify-between items-center min-w-[25rem]"
         >
-          <h5 class="text-sm text-slate-800 dark:text-slate-100">
+          <h5 class="text-sm text-slate-800 min-w-[36px] dark:text-slate-100">
             {{ title(shortcutKey) }}
           </h5>
-          <div class="flex items-center mb-1 ml-2">
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs"
+          <div class="flex items-center mb-1 ml-2 gap-2">
+            <hotkey
+              :class="{ 'min-w-[60px]': shortcutKey.firstKey !== 'Up' }"
+              custom-class="min-h-[28px] normal-case key"
             >
-              {{ shortcutKey.firstkey }}
-            </span>
-            <span
-              class="items-center rounded-md mr-2 py-2 px-2.5 bg-white dark:bg-slate-900 text-slate-800 dark:text-slate-100 font-semibold text-xs flex justify-center min-w-[2rem] rtl:mr-0 rtl:ml-2"
+              {{ shortcutKey.firstKey }}
+            </hotkey>
+            <hotkey
+              :class="{ 'normal-case': shortcutKey.secondKey === 'Down' }"
+              custom-class="min-h-[28px] min-w-[36px] key"
             >
               {{ shortcutKey.secondKey }}
-            </span>
+            </hotkey>
           </div>
         </div>
       </div>
@@ -111,8 +95,12 @@
 <script>
 import { mixin as clickaway } from 'vue-clickaway';
 import { SHORTCUT_KEYS } from './constants';
+import Hotkey from 'dashboard/components/base/Hotkey';
 
 export default {
+  components: {
+    Hotkey,
+  },
   mixins: [clickaway],
   props: {
     show: {
@@ -132,8 +120,8 @@ export default {
   },
 };
 </script>
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply py-2 px-2.5;
+<style scoped>
+.key {
+  @apply py-2 px-2.5 font-semibold text-xs text-slate-700 dark:text-slate-100 bg-slate-75 dark:bg-slate-900 shadow border-b-2 rtl:border-l-2 ltr:border-r-2 border-slate-200 dark:border-slate-700;
 }
 </style>

app/javascript/dashboard/components/widgets/modal/constants.js

@@ -2,79 +2,79 @@ export const SHORTCUT_KEYS = [
   {
     id: 1,
     label: 'NAVIGATE_DROPDOWN',
-    firstkey: 'Up',
+    firstKey: 'Up',
     secondKey: 'Down',
   },
   {
     id: 2,
     label: 'RESOLVE_CONVERSATION',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'E',
   },
   {
     id: 3,
     label: 'GO_TO_CONVERSATION_DASHBOARD',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'C',
   },
   {
     id: 4,
     label: 'ADD_ATTACHMENT',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'A',
   },
   {
     id: 5,
     label: 'GO_TO_CONTACTS_DASHBOARD',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'V',
   },
   {
     id: 6,
     label: 'TOGGLE_SIDEBAR',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'O',
   },
   {
     id: 7,
     label: 'GO_TO_REPORTS_SIDEBAR',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'R',
   },
   {
     id: 8,
     label: 'MOVE_TO_NEXT_TAB',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'N',
   },
   {
     id: 9,
     label: 'GO_TO_SETTINGS',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'S',
   },
   {
     id: 10,
     label: 'SWITCH_CONVERSATION_STATUS',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'B',
   },
   {
     id: 11,
     label: 'SWITCH_TO_PRIVATE_NOTE',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'P',
   },
   {
     id: 13,
     label: 'SWITCH_TO_REPLY',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'L',
   },
   {
     id: 14,
     label: 'TOGGLE_SNOOZE_DROPDOWN',
-    firstkey: 'Alt / ⌥',
+    firstKey: 'Alt / ⌥',
     secondKey: 'M',
   },
 ];

app/javascript/dashboard/constants/editor.js

@@ -0,0 +1,34 @@
+export const MESSAGE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+  'bulletList',
+  'orderedList',
+  'code',
+];
+
+export const MESSAGE_SIGNATURE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+  'imageUpload',
+];
+
+export const ARTICLE_EDITOR_MENU_OPTIONS = [
+  'strong',
+  'em',
+  'link',
+  'undo',
+  'redo',
+  'bulletList',
+  'orderedList',
+  'h1',
+  'h2',
+  'h3',
+  'imageUpload',
+  'code',
+];

app/javascript/dashboard/constants/localStorage.js

@@ -3,5 +3,5 @@ export const LOCAL_STORAGE_KEYS = {
   WIDGET_BUILDER: 'widgetBubble_',
   DRAFT_MESSAGES: 'draftMessages',
   COLOR_SCHEME: 'color_scheme',
-  DISMISSED_LABEL_SUGGESTIONS: 'dismissedLabelSuggestions',
+  DISMISSED_LABEL_SUGGESTIONS: 'labelSuggestionsDismissed',
 };

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -15,6 +15,9 @@ export const ACCOUNT_EVENTS = Object.freeze({
   ADDED_A_CUSTOM_ATTRIBUTE: 'Added a custom attribute',
   ADDED_AN_INBOX: 'Added an inbox',
   OPEN_MESSAGE_CONTEXT_MENU: 'Opened message context menu',
+  OPENED_NOTIFICATIONS: 'Opened notifications',
+  MARK_AS_READ_NOTIFICATIONS: 'Marked notifications as read',
+  OPEN_CONVERSATION_VIA_NOTIFICATION: 'Opened conversation via notification',
 });
 
 export const LABEL_EVENTS = Object.freeze({
@@ -89,4 +92,11 @@ export const OPEN_AI_EVENTS = Object.freeze({
   SIMPLIFY: 'OpenAI: Used simplify',
   APPLY_LABEL_SUGGESTION: 'OpenAI: Apply label from suggestion',
   DISMISS_LABEL_SUGGESTION: 'OpenAI: Dismiss label suggestions',
+  ADDED_AI_INTEGRATION_VIA_CTA_BUTTON:
+    'OpenAI: Added AI integration via CTA button',
+  DISMISS_AI_SUGGESTION: 'OpenAI: Dismiss AI suggestions',
+});
+
+export const GENERAL_EVENTS = Object.freeze({
+  COMMAND_BAR: 'Used commandbar',
 });

app/javascript/dashboard/helper/auditlogHelper.js

@@ -30,6 +30,10 @@ const translationKeys = {
   'accountuser:create': `AUDIT_LOGS.ACCOUNT_USER.ADD`,
   'accountuser:update:self': `AUDIT_LOGS.ACCOUNT_USER.EDIT.SELF`,
   'accountuser:update:other': `AUDIT_LOGS.ACCOUNT_USER.EDIT.OTHER`,
+  'inboxmember:create': `AUDIT_LOGS.INBOX_MEMBER.ADD`,
+  'inboxmember:destroy': `AUDIT_LOGS.INBOX_MEMBER.REMOVE`,
+  'teammember:create': `AUDIT_LOGS.TEAM_MEMBER.ADD`,
+  'teammember:destroy': `AUDIT_LOGS.TEAM_MEMBER.REMOVE`,
   'account:update': `AUDIT_LOGS.ACCOUNT.EDIT`,
 };
 
@@ -102,6 +106,58 @@ function handleAccountUserUpdate(auditLogItem, translationPayload, agentList) {
   return translationPayload;
 }
 
+function setUserInPayload(auditLogItem, translationPayload, agentList) {
+  const userIdChange = auditLogItem.audited_changes.user_id;
+  if (userIdChange && userIdChange !== undefined) {
+    translationPayload.user = getAgentName(userIdChange, agentList);
+  }
+  return translationPayload;
+}
+
+function setTeamIdInPayload(auditLogItem, translationPayload) {
+  if (auditLogItem.audited_changes.team_id) {
+    translationPayload.team_id = auditLogItem.audited_changes.team_id;
+  }
+  return translationPayload;
+}
+
+function setInboxIdInPayload(auditLogItem, translationPayload) {
+  if (auditLogItem.audited_changes.inbox_id) {
+    translationPayload.inbox_id = auditLogItem.audited_changes.inbox_id;
+  }
+  return translationPayload;
+}
+
+function handleInboxTeamMember(auditLogItem, translationPayload, agentList) {
+  if (auditLogItem.audited_changes) {
+    translationPayload = setUserInPayload(
+      auditLogItem,
+      translationPayload,
+      agentList
+    );
+    translationPayload = setTeamIdInPayload(auditLogItem, translationPayload);
+    translationPayload = setInboxIdInPayload(auditLogItem, translationPayload);
+  }
+  return translationPayload;
+}
+
+function handleAccountUser(
+  auditLogItem,
+  translationPayload,
+  agentList,
+  action
+) {
+  if (action === 'create') {
+    return handleAccountUserCreate(auditLogItem, translationPayload, agentList);
+  }
+
+  if (action === 'update') {
+    return handleAccountUserUpdate(auditLogItem, translationPayload, agentList);
+  }
+
+  return translationPayload;
+}
+
 export function generateTranslationPayload(auditLogItem, agentList) {
   let translationPayload = {
     agentName: getAgentName(auditLogItem.user_id, agentList),
@@ -112,21 +168,20 @@ export function generateTranslationPayload(auditLogItem, agentList) {
   const action = auditLogItem.action.toLowerCase();
 
   if (auditableType === 'accountuser') {
-    if (action === 'create') {
-      translationPayload = handleAccountUserCreate(
-        auditLogItem,
-        translationPayload,
-        agentList
-      );
-    }
+    translationPayload = handleAccountUser(
+      auditLogItem,
+      translationPayload,
+      agentList,
+      action
+    );
+  }
 
-    if (action === 'update') {
-      translationPayload = handleAccountUserUpdate(
-        auditLogItem,
-        translationPayload,
-        agentList
-      );
-    }
+  if (auditableType === 'inboxmember' || auditableType === 'teammember') {
+    translationPayload = handleInboxTeamMember(
+      auditLogItem,
+      translationPayload,
+      agentList
+    );
   }
 
   return translationPayload;

app/javascript/dashboard/helper/automationHelper.js

@@ -120,9 +120,18 @@ export const generateConditionOptions = (options, key = 'id') => {
   });
 };
 
+// Add the "None" option to the agent list
+export const agentList = agents => [
+  {
+    id: 'nil',
+    name: 'None',
+  },
+  ...(agents || []),
+];
+
 export const getActionOptions = ({ agents, teams, labels, type }) => {
   const actionsMap = {
-    assign_agent: agents,
+    assign_agent: agentList(agents),
     assign_team: teams,
     send_email_to_team: teams,
     add_label: generateConditionOptions(labels, 'title'),