Revert "fix: handle active storage preview error for password protected pdfs (#11888)"

This reverts commit 6cab741392.

.circleci/config.yml

@@ -1,7 +1,6 @@
 version: 2.1
 orbs:
   node: circleci/node@6.1.0
-  qlty-orb: qltysh/qlty-orb@0.0
 
 defaults: &defaults
   working_directory: ~/build
@@ -90,6 +89,14 @@ jobs:
           command: |
             source ~/.rvm/scripts/rvm
             bundle install
+            # pnpm install
+
+      - run:
+          name: Download cc-test-reporter
+          command: |
+            mkdir -p ~/tmp
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
+            chmod +x ~/tmp/cc-test-reporter
 
       # Swagger verification
       - run:
@@ -101,11 +108,10 @@ jobs:
               echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
               exit 1
             fi
-            mkdir -p ~/tmp
             curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
             java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
 
-      # Configure environment and database
+      # we remove the FRONTED_URL from the .env before running the tests
       - run:
           name: Database Setup and Configure Environment Variables
           command: |
@@ -143,11 +149,17 @@ jobs:
           command: pnpm run eslint
 
       - run:
-          name: Run frontend tests (with coverage)
+          name: Run frontend tests
           command: |
             mkdir -p ~/build/coverage/frontend
+            ~/tmp/cc-test-reporter before-build
             pnpm run test:coverage
 
+      - run:
+          name: Code Climate Test Coverage (Frontend)
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
+
       # Run backend tests
       - run:
           name: Run backend tests
@@ -155,18 +167,18 @@ jobs:
             mkdir -p ~/tmp/test-results/rspec
             mkdir -p ~/tmp/test-artifacts
             mkdir -p ~/build/coverage/backend
+            ~/tmp/cc-test-reporter before-build
             TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
-            bundle exec rspec -I ./spec --require coverage_helper --require spec_helper --format progress \
+            bundle exec rspec --format progress \
                               --format RspecJunitFormatter \
                               --out ~/tmp/test-results/rspec.xml \
                               -- ${TESTFILES}
           no_output_timeout: 30m
 
-      # Qlty coverage publish
-      - qlty-orb/coverage_publish:
-          files: |
-            coverage/coverage.json
-            coverage/lcov.info
+      - run:
+          name: Code Climate Test Coverage (Backend)
+          command: |
+            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
 
       - run:
           name: List coverage directory contents
@@ -177,7 +189,3 @@ jobs:
           root: ~/build
           paths:
             - coverage
-
-      - store_artifacts:
-          path: coverage
-          destination: coverage

.gitignore

@@ -94,4 +94,3 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
-CLAUDE.local.md

AGENTS.md

@@ -55,21 +55,4 @@
 
 ## Ruby Best Practices
 
-- Use compact `module/class` definitions; avoid nested styles
-
-## Enterprise Edition Notes
-
-- Chatwoot has an Enterprise overlay under `enterprise/` that extends/overrides OSS code.
-- When you add or modify core functionality, always check for corresponding files in `enterprise/` and keep behavior compatible.
-- Follow the Enterprise development practices documented here:
-  - https://chatwoot.help/hc/handbook/articles/developing-enterprise-edition-features-38
-
-Practical checklist for any change impacting core logic or public APIs
-- Search for related files in both trees before editing (e.g., `rg -n "FooService|ControllerName|ModelName" app enterprise`).
-- If adding new endpoints, services, or models, consider whether Enterprise needs:
-  - An override (e.g., `enterprise/app/...`), or
-  - An extension point (e.g., `prepend_mod_with`, hooks, configuration) to avoid hard forks.
-- Avoid hardcoding instance- or plan-specific behavior in OSS; prefer configuration, feature flags, or extension points consumed by Enterprise.
-- Keep request/response contracts stable across OSS and Enterprise; update both sets of routes/controllers when introducing new APIs.
-- When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
-- Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
+- Use compact `module/class` definitions; avoid nested styles

Gemfile

@@ -62,10 +62,6 @@ gem 'redis-namespace'
 # super fast record imports in bulk
 gem 'activerecord-import'
 
-gem 'searchkick'
-gem 'opensearch-ruby'
-gem 'faraday_middleware-aws-sigv4'
-
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
@@ -81,7 +77,6 @@ gem 'devise_token_auth', '>= 1.2.3'
 # authorization
 gem 'jwt'
 gem 'pundit'
-
 # super admin
 gem 'administrate', '>= 0.20.1'
 gem 'administrate-field-active_storage', '>= 1.0.3'
@@ -94,7 +89,7 @@ gem 'wisper', '2.0.0'
 ##--- gems for channels ---##
 gem 'facebook-messenger'
 gem 'line-bot-api'
-gem 'twilio-ruby'
+gem 'twilio-ruby', '~> 5.66'
 # twitty will handle subscription of twitter account events
 # gem 'twitty', git: 'https://github.com/chatwoot/twitty'
 gem 'twitty', '~> 0.1.5'
@@ -113,7 +108,7 @@ gem 'google-cloud-translate-v3', '>= 0.7.0'
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
 # ref application.rb
-gem 'datadog', '~> 2.0', require: false
+gem 'ddtrace', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
@@ -172,7 +167,6 @@ gem 'audited', '~> 5.4', '>= 5.4.1'
 
 # need for google auth
 gem 'omniauth', '>= 2.1.2'
-gem 'omniauth-saml'
 gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'
 
@@ -185,10 +179,7 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.4.3'
-
-# TODO: Move this gem as a dependency of ai-agents
-gem 'ruby_llm-schema'
+gem 'ai-agents', '>= 0.2.1'
 
 gem 'shopify_api'
 
@@ -218,8 +209,6 @@ group :development do
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
   gem 'meta_request', '>= 0.8.3'
-
-  gem 'tidewave'
 end
 
 group :test do
@@ -229,7 +218,6 @@ group :test do
   gem 'webmock'
   # test profiling
   gem 'test-prof'
-  gem 'simplecov_json_formatter', require: false
 end
 
 group :development, :test do
@@ -254,7 +242,7 @@ group :development, :test do
   gem 'rubocop-factory_bot', require: false
   gem 'seed_dump'
   gem 'shoulda-matchers'
-  gem 'simplecov', '>= 0.21', require: false
+  gem 'simplecov', '0.17.1', require: false
   gem 'spring'
   gem 'spring-watcher-listen'
 end

Gemfile.lock

@@ -25,35 +25,35 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actioncable (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailbox (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailer (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.5.2)
-      actionview (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionpack (7.1.5.1)
+      actionview (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -61,38 +61,38 @@ GEM
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actiontext (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionview (7.1.5.1)
+      activesupport (= 7.1.5.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
     active_record_query_trace (1.8)
-    activejob (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activejob (7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.3.6)
-    activemodel (7.1.5.2)
-      activesupport (= 7.1.5.2)
-    activerecord (7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activemodel (7.1.5.1)
+      activesupport (= 7.1.5.1)
+    activerecord (7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       timeout (>= 0.4.0)
     activerecord-import (2.1.0)
       activerecord (>= 4.2)
-    activestorage (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activestorage (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       marcel (~> 1.0)
-    activesupport (7.1.5.2)
+    activesupport (7.1.5.1)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -126,7 +126,7 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.4.3)
+    ai-agents (0.2.1)
       ruby_llm (~> 1.3)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
@@ -155,10 +155,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.3.0)
+    base64 (0.2.0)
     bcrypt (3.1.20)
-    benchmark (0.4.1)
-    bigdecimal (3.2.2)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -194,14 +194,10 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.19.0)
-      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      libdatadog (~> 18.1.0.1.0)
-      libddwaf (~> 1.24.1.0.3)
-      logger
-      msgpack
-    datadog-ruby_core_source (3.4.1)
     date (3.4.1)
+    ddtrace (0.48.0)
+      ffi (~> 1.0)
+      msgpack
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -219,7 +215,7 @@ GEM
     diff-lcs (1.5.1)
     digest-crc (0.6.5)
       rake (>= 12.0.0, < 14.0.0)
-    docile (1.4.1)
+    docile (1.4.0)
     domain_name (0.5.20190701)
       unf (>= 0.0.5, < 1.0.0)
     dotenv (3.1.2)
@@ -230,35 +226,6 @@ GEM
       addressable (~> 2.8)
     drb (2.2.3)
     dry-cli (1.1.0)
-    dry-configurable (1.3.0)
-      dry-core (~> 1.1)
-      zeitwerk (~> 2.6)
-    dry-core (1.1.0)
-      concurrent-ruby (~> 1.0)
-      logger
-      zeitwerk (~> 2.6)
-    dry-inflector (1.2.0)
-    dry-initializer (3.2.0)
-    dry-logic (1.6.0)
-      bigdecimal
-      concurrent-ruby (~> 1.0)
-      dry-core (~> 1.1)
-      zeitwerk (~> 2.6)
-    dry-schema (1.14.1)
-      concurrent-ruby (~> 1.0)
-      dry-configurable (~> 1.0, >= 1.0.1)
-      dry-core (~> 1.1)
-      dry-initializer (~> 3.2)
-      dry-logic (~> 1.5)
-      dry-types (~> 1.8)
-      zeitwerk (~> 2.6)
-    dry-types (1.8.3)
-      bigdecimal (~> 3.0)
-      concurrent-ruby (~> 1.0)
-      dry-core (~> 1.0)
-      dry-inflector (~> 1.0)
-      dry-logic (~> 1.4)
-      zeitwerk (~> 2.6)
     ecma-re-validator (0.4.0)
       regexp_parser (~> 2.2)
     elastic-apm (4.6.2)
@@ -281,10 +248,8 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.13.1)
-      faraday-net_http (>= 2.0, < 3.5)
-      json
-      logger
+    faraday (2.9.0)
+      faraday-net_http (>= 2.0, < 3.2)
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-mashify (0.1.1)
@@ -292,23 +257,13 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.4.0)
-      net-http (>= 0.5.0)
+    faraday-net_http (3.1.0)
+      net-http
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
     faraday-retry (2.2.1)
       faraday (~> 2.0)
-    faraday_middleware-aws-sigv4 (1.0.1)
-      aws-sigv4 (~> 1.0)
-      faraday (>= 2.0, < 3)
-    fast-mcp (1.5.0)
-      addressable (~> 2.8)
-      base64
-      dry-schema (~> 1.14)
-      json (~> 2.0)
-      mime-types (~> 3.4)
-      rack (~> 3.1)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
       googleauth (~> 1)
@@ -447,7 +402,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.13.2)
+    json (2.12.0)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -462,7 +417,7 @@ GEM
     judoscale-sidekiq (1.8.2)
       judoscale-ruby (= 1.8.2)
       sidekiq (>= 5.0)
-    jwt (2.10.1)
+    jwt (2.8.1)
       base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -489,16 +444,6 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    libdatadog (18.1.0.1.0)
-    libdatadog (18.1.0.1.0-x86_64-linux)
-    libddwaf (1.24.1.0.3)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-linux)
-      ffi (~> 1.0)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
     liquid (5.4.0)
@@ -544,7 +489,7 @@ GEM
     mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
-    net-http (0.6.0)
+    net-http (0.4.1)
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
@@ -589,9 +534,8 @@ GEM
     oj (3.16.10)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
-    omniauth (2.1.3)
+    omniauth (2.1.2)
       hashie (>= 3.4.6)
-      logger
       rack (>= 2.2.3)
       rack-protection
     omniauth-google-oauth2 (1.1.3)
@@ -605,12 +549,6 @@ GEM
     omniauth-rails_csrf_protection (1.0.2)
       actionpack (>= 4.2)
       omniauth (~> 2.0)
-    omniauth-saml (2.2.4)
-      omniauth (~> 2.1)
-      ruby-saml (~> 1.18)
-    opensearch-ruby (3.4.0)
-      faraday (>= 1.0, < 3)
-      multi_json (>= 1.0)
     openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
@@ -639,7 +577,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.0)
+    rack (2.2.15)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -648,34 +586,33 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (4.1.1)
+    rack-protection (3.2.0)
       base64 (>= 0.1.0)
-      logger (>= 1.6.0)
-      rack (>= 3.0.0, < 4)
+      rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.7)
       rack
-    rack-session (2.1.1)
-      base64 (>= 0.1.0)
-      rack (>= 3.0.0)
+    rack-session (1.0.2)
+      rack (< 3)
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rackup (2.2.1)
-      rack (>= 3)
-    rails (7.1.5.2)
-      actioncable (= 7.1.5.2)
-      actionmailbox (= 7.1.5.2)
-      actionmailer (= 7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actiontext (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    rackup (1.0.1)
+      rack (< 3)
+      webrick
+    rails (7.1.5.1)
+      actioncable (= 7.1.5.1)
+      actionmailbox (= 7.1.5.1)
+      actionmailer (= 7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actiontext (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       bundler (>= 1.15.0)
-      railties (= 7.1.5.2)
+      railties (= 7.1.5.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -683,9 +620,9 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    railties (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       irb
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -777,16 +714,13 @@ GEM
       faraday (>= 1)
       faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
-    ruby-saml (1.18.1)
-      nokogiri (>= 1.13.10)
-      rexml
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
-    ruby_llm (1.5.1)
+    ruby_llm (1.3.1)
       base64
       event_stream_parser (~> 1)
       faraday (>= 1.10.0)
@@ -795,7 +729,6 @@ GEM
       faraday-retry (>= 1)
       marcel (~> 1.0)
       zeitwerk (~> 2)
-    ruby_llm-schema (0.1.0)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
     sass (3.7.4)
@@ -815,9 +748,6 @@ GEM
       parser
     scss_lint (0.60.0)
       sass (~> 3.5, >= 3.5.5)
-    searchkick (5.5.2)
-      activemodel (>= 7.1)
-      hashie
     securerandom (0.4.1)
     seed_dump (3.3.1)
       activerecord (>= 4)
@@ -864,12 +794,11 @@ GEM
       faraday (>= 0.17.5, < 3.a)
       jwt (>= 1.5, < 3.0)
       multi_json (~> 1.10)
-    simplecov (0.22.0)
+    simplecov (0.17.1)
       docile (~> 1.1)
-      simplecov-html (~> 0.11)
-      simplecov_json_formatter (~> 0.1)
-    simplecov-html (0.13.2)
-    simplecov_json_formatter (0.1.4)
+      json (>= 1.8, < 3)
+      simplecov-html (~> 0.10.0)
+    simplecov-html (0.10.2)
     slack-ruby-client (2.5.2)
       faraday (>= 2.0)
       faraday-mashify
@@ -899,17 +828,13 @@ GEM
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.4.0)
-    tidewave (0.2.0)
-      fast-mcp (~> 1.5.0)
-      rack (>= 2.0)
-      rails (>= 7.1.0)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
       i18n
     timeout (0.4.3)
     trailblazer-option (0.1.2)
-    twilio-ruby (7.6.0)
+    twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
       jwt (>= 1.5, < 3.0)
       nokogiri (>= 1.6, < 2.0)
@@ -956,6 +881,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
+    webrick (1.9.1)
     websocket-driver (0.7.7)
       base64
       websocket-extensions (>= 0.1.0)
@@ -984,7 +910,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.4.3)
+  ai-agents (>= 0.2.1)
   annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -1001,7 +927,7 @@ DEPENDENCIES
   commonmarker
   csv-safe
   database_cleaner
-  datadog (~> 2.0)
+  ddtrace
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
@@ -1013,7 +939,6 @@ DEPENDENCIES
   facebook-messenger
   factory_bot_rails (>= 6.4.3)
   faker
-  faraday_middleware-aws-sigv4
   fcm
   flag_shih_tzu
   foreman
@@ -1054,8 +979,6 @@ DEPENDENCIES
   omniauth-google-oauth2 (>= 1.1.3)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
-  omniauth-saml
-  opensearch-ruby
   pg
   pg_search
   pgvector
@@ -1081,10 +1004,8 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-openai
-  ruby_llm-schema
   scout_apm
   scss_lint
-  searchkick
   seed_dump
   sentry-rails (>= 5.19.0)
   sentry-ruby
@@ -1094,8 +1015,7 @@ DEPENDENCIES
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   sidekiq_alive
-  simplecov (>= 0.21)
-  simplecov_json_formatter
+  simplecov (= 0.17.1)
   slack-ruby-client (~> 2.5.2)
   spring
   spring-watcher-listen
@@ -1104,9 +1024,8 @@ DEPENDENCIES
   stripe
   telephone_number
   test-prof
-  tidewave
   time_diff
-  twilio-ruby
+  twilio-ruby (~> 5.66)
   twitty (~> 0.1.5)
   tzinfo-data
   uglifier

Rakefile

@@ -4,7 +4,3 @@
 require_relative 'config/application'
 
 Rails.application.load_tasks
-
-# Load Enterprise Edition rake tasks if they exist
-enterprise_tasks_path = Rails.root.join('enterprise/lib/tasks.rb').to_s
-require enterprise_tasks_path if File.exist?(enterprise_tasks_path)

VERSION_CWCTL

@@ -1 +1 @@
-3.4.3
+3.4.2

app/builders/v2/reports/label_summary_builder.rb

@@ -28,7 +28,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
     {
       conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts,
+      resolved_counts: fetch_resolved_counts(conversation_filter),
       resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
       first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
       reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
@@ -62,21 +62,10 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
     fetch_counts(conversation_filter)
   end
 
-  def fetch_resolved_counts
-    # Count resolution events, not conversations currently in resolved status
-    # Filter by reporting_event.created_at, not conversation.created_at
-    reporting_event_filter = { name: 'conversation_resolved', account_id: account.id }
-    reporting_event_filter[:created_at] = range if range.present?
-
-    ReportingEvent
-      .joins(conversation: { taggings: :tag })
-      .where(
-        reporting_event_filter.merge(
-          taggings: { taggable_type: 'Conversation', context: 'labels' }
-        )
-      )
-      .group('tags.name')
-      .count
+  def fetch_resolved_counts(conversation_filter)
+    # since the base query is ActsAsTaggableOn,
+    # the status :resolved won't automatically be converted to integer status
+    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
   end
 
   def fetch_counts(conversation_filter)
@@ -95,7 +84,9 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def fetch_metrics(conversation_filter, event_name, use_business_hours)
     ReportingEvent
-      .joins(conversation: { taggings: :tag })
+      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
+      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
+      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
       .where(
         conversations: conversation_filter,
         name: event_name,

app/builders/v2/reports/timeseries/count_report_builder.rb

@@ -38,34 +38,27 @@ class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::Bas
   end
 
   def scope_for_resolutions_count
-    scope.reporting_events.where(
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_resolved,
-      account_id: account.id,
-      created_at: range
-    )
+      conversations: { status: :resolved }, created_at: range
+    ).distinct
   end
 
   def scope_for_bot_resolutions_count
-    scope.reporting_events.where(
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_bot_resolved,
-      account_id: account.id,
-      created_at: range
-    )
+      conversations: { status: :resolved }, created_at: range
+    ).distinct
   end
 
   def scope_for_bot_handoffs_count
     scope.reporting_events.joins(:conversation).select(:conversation_id).where(
       name: :conversation_bot_handoff,
-      account_id: account.id,
       created_at: range
     ).distinct
   end
 
   def grouped_count
-    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
-    # It converts timestamps to the target timezone before grouping, which means
-    # the same event can fall into different day buckets depending on timezone
-    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
     @grouped_values = object_scope.group_by_period(
       group_by,
       :created_at,

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

@@ -1,20 +0,0 @@
-class Api::V1::Accounts::AssignmentPolicies::InboxesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy
-  before_action -> { check_authorization(AssignmentPolicy) }
-
-  def index
-    @inboxes = @assignment_policy.inboxes
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(
-      params[:assignment_policy_id]
-    )
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id)
-  end
-end

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

@@ -1,36 +0,0 @@
-class Api::V1::Accounts::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy, only: [:show, :update, :destroy]
-  before_action :check_authorization
-
-  def index
-    @assignment_policies = Current.account.assignment_policies
-  end
-
-  def show; end
-
-  def create
-    @assignment_policy = Current.account.assignment_policies.create!(assignment_policy_params)
-  end
-
-  def update
-    @assignment_policy.update!(assignment_policy_params)
-  end
-
-  def destroy
-    @assignment_policy.destroy!
-    head :ok
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(params[:id])
-  end
-
-  def assignment_policy_params
-    params.require(:assignment_policy).permit(
-      :name, :description, :assignment_order, :conversation_priority,
-      :fair_distribution_limit, :fair_distribution_window, :enabled
-    )
-  end
-end

app/controllers/api/v1/accounts/inboxes/assignment_policies_controller.rb

@@ -1,46 +0,0 @@
-class Api::V1::Accounts::Inboxes::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_inbox
-  before_action :fetch_assignment_policy, only: [:create]
-  before_action -> { check_authorization(AssignmentPolicy) }
-  before_action :validate_assignment_policy, only: [:show, :destroy]
-
-  def show
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def create
-    # There should be only one assignment policy for an inbox.
-    # If there is a new request to add an assignment policy, we will
-    # delete the old one and attach the new policy
-    remove_inbox_assignment_policy
-    @inbox_assignment_policy = @inbox.create_inbox_assignment_policy!(assignment_policy: @assignment_policy)
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def destroy
-    remove_inbox_assignment_policy
-    head :ok
-  end
-
-  private
-
-  def remove_inbox_assignment_policy
-    @inbox.inbox_assignment_policy&.destroy
-  end
-
-  def fetch_inbox
-    @inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
-  end
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(permitted_params[:assignment_policy_id])
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id, :inbox_id)
-  end
-
-  def validate_assignment_policy
-    return render_not_found_error(I18n.t('errors.assignment_policy.not_found')) unless @inbox.assignment_policy
-  end
-end

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

@@ -70,9 +70,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def sync_templates
-    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?
+    unless @inbox.channel.is_a?(Channel::Whatsapp)
+      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
+    end
 
-    trigger_template_sync
+    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
     render status: :ok, json: { message: 'Template sync initiated successfully' }
   rescue StandardError => e
     render status: :internal_server_error, json: { error: e.message }
@@ -183,18 +185,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
       []
     end
   end
-
-  def whatsapp_channel?
-    @inbox.whatsapp? || (@inbox.twilio? && @inbox.channel.whatsapp?)
-  end
-
-  def trigger_template_sync
-    if @inbox.whatsapp?
-      Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
-    elsif @inbox.twilio? && @inbox.channel.whatsapp?
-      Channels::Twilio::TemplatesSyncJob.perform_later(@inbox.channel)
-    end
-  end
 end
 
 Api::V1::Accounts::InboxesController.prepend_mod_with('Api::V1::Accounts::InboxesController')

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

@@ -9,7 +9,7 @@ class Api::V1::Widget::ConfigsController < Api::V1::Widget::BaseController
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
   end
 
   def set_contact

app/controllers/concerns/switch_locale.rb

@@ -4,28 +4,17 @@ module SwitchLocale
   private
 
   def switch_locale(&)
-    # Priority is for locale set in query string (mostly for widget/from js sdk)
+    # priority is for locale set in query string (mostly for widget/from js sdk)
     locale ||= params[:locale]
 
-    # Use the user's locale if available
-    locale ||= locale_from_user
-
-    # Use the locale from a custom domain if applicable
     locale ||= locale_from_custom_domain
-
     # if locale is not set in account, let's use DEFAULT_LOCALE env variable
     locale ||= ENV.fetch('DEFAULT_LOCALE', nil)
-
     set_locale(locale, &)
   end
 
   def switch_locale_using_account_locale(&)
-    # Get the locale from the user first
-    locale = locale_from_user
-
-    # Fallback to the account's locale if the user's locale is not set
-    locale ||= locale_from_account(@current_account)
-
+    locale = locale_from_account(@current_account)
     set_locale(locale, &)
   end
 
@@ -43,12 +32,6 @@ module SwitchLocale
     @portal.default_locale
   end
 
-  def locale_from_user
-    return unless @user
-
-    @user.ui_settings&.dig('locale')
-  end
-
   def set_locale(locale, &)
     safe_locale = validate_and_get_locale(locale)
     # Ensure locale won't bleed into other requests

app/controllers/dashboard_controller.rb

@@ -66,7 +66,7 @@ class DashboardController < ActionController::Base
       ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
-      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v18.0'),
+      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
       WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
       WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
       IS_ENTERPRISE: ChatwootApp.enterprise?,

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -47,8 +47,10 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   end
 
   def get_resource_from_auth_hash # rubocop:disable Naming/AccessorMethodName
-    email = auth_hash.dig('info', 'email')
-    @resource = resource_class.from_email(email)
+    # find the user with their email instead of UID and token
+    @resource = resource_class.where(
+      email: auth_hash['info']['email']
+    ).first
   end
 
   def validate_signup_email_is_business_domain?
@@ -73,5 +75,3 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
     'user'
   end
 end
-
-DeviseOverrides::OmniauthCallbacksController.prepend_mod_with('DeviseOverrides::OmniauthCallbacksController')

app/controllers/devise_overrides/passwords_controller.rb

@@ -44,5 +44,3 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
     }, status: status
   end
 end
-
-DeviseOverrides::PasswordsController.prepend_mod_with('DeviseOverrides::PasswordsController')

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

@@ -58,6 +58,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL')
   end
 end

app/controllers/slack_uploads_controller.rb

@@ -17,12 +17,7 @@ class SlackUploadsController < ApplicationController
   end
 
   def blob_url
-    # Only generate representations for images
-    if @blob.content_type.start_with?('image/')
-      url_for(@blob.representation(resize_to_fill: [250, nil]))
-    else
-      url_for(@blob)
-    end
+    url_for(@blob.representation(resize_to_fill: [250, nil]))
   end
 
   def avatar_url

app/controllers/survey/responses_controller.rb

@@ -5,6 +5,6 @@ class Survey::ResponsesController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
   end
 end

app/controllers/widgets_controller.rb

@@ -14,7 +14,7 @@ class WidgetsController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED', 'INSTALLATION_NAME')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
   end
 
   def set_web_widget

app/helpers/portal_helper.rb

@@ -74,17 +74,6 @@ module PortalHelper
     end
   end
 
-  def generate_portal_brand_url(brand_url, referer)
-    url = URI.parse(brand_url.to_s)
-    query_params = Rack::Utils.parse_query(url.query)
-    query_params['utm_medium'] = 'helpcenter'
-    query_params['utm_campaign'] = 'branding'
-    query_params['utm_source'] = URI.parse(referer).host if referer.present? && referer.match?(URI::DEFAULT_PARSER.make_regexp)
-
-    url.query = query_params.to_query
-    url.to_s
-  end
-
   def render_category_content(content)
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end

app/helpers/report_helper.rb

@@ -53,13 +53,13 @@ module ReportHelper
   end
 
   def resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved,
-                                 created_at: range)
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_resolved,
+                                                                               conversations: { status: :resolved }, created_at: range).distinct
   end
 
   def bot_resolutions
-    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved,
-                                 created_at: range)
+    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
+                                                                               conversations: { status: :resolved }, created_at: range).distinct
   end
 
   def bot_handoffs

app/helpers/reporting_event_helper.rb

@@ -18,25 +18,12 @@ module ReportingEventHelper
   end
 
   def last_non_human_activity(conversation)
-    # Try to get either a handoff or reopened event first
-    # These will always take precedence over any other activity
-    # Also, any of these events can happen at any time in the course of a conversation lifecycle.
-    # So we pick the latest event
-    event = ReportingEvent.where(
-      conversation_id: conversation.id,
-      name: %w[conversation_bot_handoff conversation_opened]
-    ).order(event_end_time: :desc).first
+    # check if a handoff event already exists
+    handoff_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_handoff').last
 
-    return event.event_end_time if event&.event_end_time
-
-    # Fallback to bot resolved event
-    # Because this will be closest to the most accurate activity instead of conversation.created_at
-    bot_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_resolved').last
-
-    return bot_event.event_end_time if bot_event&.event_end_time
-
-    # If no events found, return conversation creation time
-    conversation.created_at
+    # if a handoff exists, last non human activity is when the handoff ended,
+    # otherwise it's when the conversation was created
+    handoff_event&.event_end_time || conversation.created_at
   end
 
   private

app/javascript/dashboard/App.vue

@@ -19,7 +19,6 @@ import {
   verifyServiceWorkerExistence,
 } from './helper/pushHelper';
 import ReconnectService from 'dashboard/helper/ReconnectService';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   name: 'App',
@@ -39,14 +38,12 @@ export default {
     const { accountId } = useAccount();
     // Use the font size composable (it automatically sets up the watcher)
     const { currentFontSize } = useFontSize();
-    const { uiSettings } = useUISettings();
 
     return {
       router,
       store,
       currentAccountId: accountId,
       currentFontSize,
-      uiSettings,
     };
   },
   data() {
@@ -91,10 +88,7 @@ export default {
   mounted() {
     this.initializeColorTheme();
     this.listenToThemeChanges();
-    // If user locale is set, use it; otherwise use account locale
-    this.setLocale(
-      this.uiSettings?.locale || window.chatwootConfig.selectedLocale
-    );
+    this.setLocale(window.chatwootConfig.selectedLocale);
   },
   unmounted() {
     if (this.reconnectService) {
@@ -120,8 +114,7 @@ export default {
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
         this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
-      // If user locale is set, use it; otherwise use account locale
-      this.setLocale(this.uiSettings?.locale || locale);
+      this.setLocale(locale);
       this.latestChatwootVersion = latestChatwootVersion;
       vueActionCable.init(this.store, pubsubToken);
       this.reconnectService = new ReconnectService(this.store, this.router);

app/javascript/dashboard/api/assignmentPolicies.js

@@ -1,36 +0,0 @@
-/* global axios */
-
-import ApiClient from './ApiClient';
-
-class AssignmentPolicies extends ApiClient {
-  constructor() {
-    super('assignment_policies', { accountScoped: true });
-  }
-
-  getInboxes(policyId) {
-    return axios.get(`${this.url}/${policyId}/inboxes`);
-  }
-
-  setInboxPolicy(inboxId, policyId) {
-    return axios.post(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`,
-      {
-        assignment_policy_id: policyId,
-      }
-    );
-  }
-
-  getInboxPolicy(inboxId) {
-    return axios.get(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
-    );
-  }
-
-  removeInboxPolicy(inboxId) {
-    return axios.delete(
-      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
-    );
-  }
-}
-
-export default new AssignmentPolicies();

app/javascript/dashboard/api/samlSettings.js

@@ -1,26 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class SamlSettingsAPI extends ApiClient {
-  constructor() {
-    super('saml_settings', { accountScoped: true });
-  }
-
-  get() {
-    return axios.get(this.url);
-  }
-
-  create(data) {
-    return axios.post(this.url, { saml_settings: data });
-  }
-
-  update(data) {
-    return axios.put(this.url, { saml_settings: data });
-  }
-
-  delete() {
-    return axios.delete(this.url);
-  }
-}
-
-export default new SamlSettingsAPI();

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

@@ -1,70 +0,0 @@
-import assignmentPolicies from '../assignmentPolicies';
-import ApiClient from '../ApiClient';
-
-describe('#AssignmentPoliciesAPI', () => {
-  it('creates correct instance', () => {
-    expect(assignmentPolicies).toBeInstanceOf(ApiClient);
-    expect(assignmentPolicies).toHaveProperty('get');
-    expect(assignmentPolicies).toHaveProperty('show');
-    expect(assignmentPolicies).toHaveProperty('create');
-    expect(assignmentPolicies).toHaveProperty('update');
-    expect(assignmentPolicies).toHaveProperty('delete');
-    expect(assignmentPolicies).toHaveProperty('getInboxes');
-    expect(assignmentPolicies).toHaveProperty('setInboxPolicy');
-    expect(assignmentPolicies).toHaveProperty('getInboxPolicy');
-    expect(assignmentPolicies).toHaveProperty('removeInboxPolicy');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      get: vi.fn(() => Promise.resolve()),
-      post: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-      // Mock accountIdFromRoute
-      Object.defineProperty(assignmentPolicies, 'accountIdFromRoute', {
-        get: () => '1',
-        configurable: true,
-      });
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#getInboxes', () => {
-      assignmentPolicies.getInboxes(123);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/assignment_policies/123/inboxes'
-      );
-    });
-
-    it('#setInboxPolicy', () => {
-      assignmentPolicies.setInboxPolicy(456, 123);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy',
-        {
-          assignment_policy_id: 123,
-        }
-      );
-    });
-
-    it('#getInboxPolicy', () => {
-      assignmentPolicies.getInboxPolicy(456);
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy'
-      );
-    });
-
-    it('#removeInboxPolicy', () => {
-      assignmentPolicies.removeInboxPolicy(456);
-      expect(axiosMock.delete).toHaveBeenCalledWith(
-        '/api/v1/accounts/1/inboxes/456/assignment_policy'
-      );
-    });
-  });
-});

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.story.vue

@@ -1,63 +0,0 @@
-<script setup>
-import AssignmentCard from './AssignmentCard.vue';
-
-const agentAssignments = [
-  {
-    id: 1,
-    title: 'Assignment policy',
-    description: 'Manage how conversations get assigned in inboxes.',
-    features: [
-      {
-        icon: 'i-lucide-circle-fading-arrow-up',
-        label: 'Assign by conversations evenly or by available capacity',
-      },
-      {
-        icon: 'i-lucide-scale',
-        label: 'Add fair distribution rules to avoid overloading any agent',
-      },
-      {
-        icon: 'i-lucide-inbox',
-        label: 'Add inboxes to a policy - one policy per inbox',
-      },
-    ],
-  },
-  {
-    id: 2,
-    title: 'Agent capacity policy',
-    description: 'Manage workload for agents.',
-    features: [
-      {
-        icon: 'i-lucide-glass-water',
-        label: 'Define maximum conversations per inbox',
-      },
-      {
-        icon: 'i-lucide-circle-minus',
-        label: 'Create exceptions based on labels and time',
-      },
-      {
-        icon: 'i-lucide-users-round',
-        label: 'Add agents to a policy - one policy per agent',
-      },
-    ],
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AssignmentCard"
-    :layout="{ type: 'grid', width: '1000px' }"
-  >
-    <Variant title="Assignment Card">
-      <div class="px-4 py-4 bg-n-background flex gap-6 justify-between">
-        <AssignmentCard
-          v-for="(item, index) in agentAssignments"
-          :key="index"
-          :title="item.title"
-          :description="item.description"
-          :features="item.features"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentCard/AssignmentCard.vue

@@ -1,49 +0,0 @@
-<script setup>
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-
-defineProps({
-  title: { type: String, default: '' },
-  description: { type: String, default: '' },
-  features: { type: Array, default: () => [] },
-});
-
-const emit = defineEmits(['click']);
-
-const handleClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
-    <div class="flex flex-col items-start gap-2">
-      <div class="flex justify-between w-full items-center">
-        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
-        <Button
-          xs
-          slate
-          ghost
-          icon="i-lucide-chevron-right"
-          @click.stop="handleClick"
-        />
-      </div>
-      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
-    </div>
-
-    <ul class="flex flex-col items-start gap-3 mt-3">
-      <li
-        v-for="feature in features"
-        :key="feature.id"
-        class="flex items-center gap-3 text-sm"
-      >
-        <Icon
-          :icon="feature.icon"
-          class="text-n-slate-11 size-4 flex-shrink-0"
-        />
-        {{ feature.label }}
-      </li>
-    </ul>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.story.vue

@@ -1,104 +0,0 @@
-<script setup>
-import AssignmentPolicyCard from './AssignmentPolicyCard.vue';
-
-const mockInboxes = [
-  {
-    id: 1,
-    name: 'Website Support',
-    channel_type: 'Channel::WebWidget',
-    inbox_type: 'Website',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    channel_type: 'Channel::Email',
-    inbox_type: 'Email',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    channel_type: 'Channel::Whatsapp',
-    inbox_type: 'WhatsApp',
-  },
-  {
-    id: 4,
-    name: 'Facebook Messenger',
-    channel_type: 'Channel::FacebookPage',
-    inbox_type: 'Messenger',
-  },
-];
-
-const withCount = policy => ({
-  ...policy,
-  assignedInboxCount: policy.inboxes.length,
-});
-
-const policyA = withCount({
-  id: 1,
-  name: 'Website & Email',
-  description: 'Distributes conversations evenly among available agents',
-  assignmentOrder: 'round_robin',
-  conversationPriority: 'high',
-  enabled: true,
-  inboxes: [mockInboxes[0], mockInboxes[1]],
-  isFetchingInboxes: false,
-});
-
-const policyB = withCount({
-  id: 2,
-  name: 'WhatsApp & Messenger',
-  description: 'Assigns based on capacity and workload',
-  assignmentOrder: 'capacity_based',
-  conversationPriority: 'medium',
-  enabled: true,
-  inboxes: [mockInboxes[2], mockInboxes[3]],
-  isFetchingInboxes: false,
-});
-
-const emptyPolicy = withCount({
-  id: 3,
-  name: 'No Inboxes Yet',
-  description: 'Policy with no assigned inboxes',
-  assignmentOrder: 'manual',
-  conversationPriority: 'low',
-  enabled: false,
-  inboxes: [],
-  isFetchingInboxes: false,
-});
-
-const onEdit = id => console.log('Edit policy:', id);
-const onDelete = id => console.log('Delete policy:', id);
-const onFetch = () => console.log('Fetch inboxes');
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/AssignmentPolicyCard"
-    :layout="{ type: 'grid', width: '1200px' }"
-  >
-    <Variant title="Three Cards (Two with inboxes, One empty)">
-      <div class="p-4 bg-n-background">
-        <div class="grid grid-cols-1 gap-4">
-          <AssignmentPolicyCard
-            v-bind="policyA"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-          <AssignmentPolicyCard
-            v-bind="policyB"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-          <AssignmentPolicyCard
-            v-bind="emptyPolicy"
-            @edit="onEdit"
-            @delete="onDelete"
-            @fetch-inboxes="onFetch"
-          />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/AssignmentPolicyCard/AssignmentPolicyCard.vue

@@ -1,133 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { formatToTitleCase } from 'dashboard/helper/commons';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import CardPopover from '../components/CardPopover.vue';
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  name: { type: String, default: '' },
-  description: { type: String, default: '' },
-  assignmentOrder: { type: String, default: '' },
-  conversationPriority: { type: String, default: '' },
-  assignedInboxCount: { type: Number, default: 0 },
-  enabled: { type: Boolean, default: false },
-  inboxes: { type: Array, default: () => [] },
-  isFetchingInboxes: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['edit', 'delete', 'fetchInboxes']);
-
-const { t } = useI18n();
-
-const inboxes = computed(() => {
-  return props.inboxes.map(inbox => {
-    return {
-      name: inbox.name,
-      id: inbox.id,
-      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
-    };
-  });
-});
-
-const order = computed(() => {
-  return formatToTitleCase(props.assignmentOrder);
-});
-
-const priority = computed(() => {
-  return formatToTitleCase(props.conversationPriority);
-});
-
-const handleEdit = () => {
-  emit('edit', props.id);
-};
-
-const handleDelete = () => {
-  emit('delete', props.id);
-};
-
-const handleFetchInboxes = () => {
-  if (props.inboxes?.length > 0) return;
-  emit('fetchInboxes', props.id);
-};
-</script>
-
-<template>
-  <CardLayout class="[&>div]:px-5">
-    <div class="flex flex-col gap-2 relative justify-between w-full">
-      <div class="flex items-center gap-3 justify-between w-full">
-        <div class="flex items-center gap-3">
-          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
-            {{ name }}
-          </h3>
-          <div class="flex items-center gap-2">
-            <div class="flex items-center rounded-md bg-n-alpha-2 h-6 px-2">
-              <span
-                class="text-xs"
-                :class="enabled ? 'text-n-teal-11' : 'text-n-slate-12'"
-              >
-                {{
-                  enabled
-                    ? t(
-                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ACTIVE'
-                      )
-                    : t(
-                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.INACTIVE'
-                      )
-                }}
-              </span>
-            </div>
-            <CardPopover
-              :title="
-                t(
-                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
-                )
-              "
-              icon="i-lucide-inbox"
-              :count="assignedInboxCount"
-              :items="inboxes"
-              :is-fetching="isFetchingInboxes"
-              @fetch="handleFetchInboxes"
-            />
-          </div>
-        </div>
-        <div class="flex items-center gap-2">
-          <Button
-            :label="
-              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.EDIT')
-            "
-            sm
-            slate
-            link
-            class="px-2"
-            @click="handleEdit"
-          />
-          <div v-if="order" class="w-px h-2.5 bg-n-slate-5" />
-          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
-        </div>
-      </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
-        {{ description }}
-      </p>
-      <div class="flex items-center gap-3 py-1.5">
-        <span v-if="order" class="text-n-slate-11 text-sm">
-          {{
-            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
-          }}
-          <span class="text-n-slate-12">{{ order }}</span>
-        </span>
-        <div v-if="order" class="w-px h-3 bg-n-strong" />
-        <span v-if="priority" class="text-n-slate-11 text-sm">
-          {{
-            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
-          }}
-          <span class="text-n-slate-12">{{ priority }}</span>
-        </span>
-      </div>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/CardPopover.vue

@@ -1,103 +0,0 @@
-<script setup>
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-defineProps({
-  count: {
-    type: Number,
-    default: 0,
-  },
-  title: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  items: {
-    type: Array,
-    default: () => [],
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['fetch']);
-
-const [showPopover, togglePopover] = useToggle();
-
-const handleButtonClick = () => {
-  emit('fetch');
-  togglePopover(!showPopover.value);
-};
-
-const handleClickOutside = () => {
-  if (showPopover.value) {
-    togglePopover(false);
-  }
-};
-</script>
-
-<template>
-  <div
-    v-on-click-outside="handleClickOutside"
-    class="relative flex items-center group"
-  >
-    <button
-      v-if="count"
-      class="h-6 px-2 rounded-md bg-n-alpha-2 gap-1.5 flex items-center"
-      @click="handleButtonClick()"
-    >
-      <Icon icon="i-lucide-inbox" class="size-3.5 text-n-slate-12" />
-      <span class="text-n-slate-12 text-sm">
-        {{ count }}
-      </span>
-    </button>
-    <div
-      v-if="showPopover"
-      class="top-full mt-1 ltr:left-0 rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak p-3 rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto"
-    >
-      <div class="flex items-center gap-2.5 pb-2">
-        <Icon :icon="icon" class="size-3.5" />
-        <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
-      </div>
-
-      <div
-        v-if="isFetching"
-        class="flex items-center justify-center py-3 w-full text-n-slate-11"
-      >
-        <Spinner />
-      </div>
-
-      <div v-else class="flex flex-col gap-4">
-        <div
-          v-for="item in items"
-          :key="item.id"
-          class="flex items-center gap-2 min-w-0 w-full"
-        >
-          <Icon
-            v-if="item.icon"
-            :icon="item.icon"
-            class="size-4 text-n-slate-12 flex-shrink-0"
-          />
-          <div class="flex items-center gap-1 min-w-0 flex-1">
-            <span
-              :title="item.name"
-              class="text-sm text-n-slate-12 truncate min-w-0"
-            >
-              {{ item.name }}
-            </span>
-            <span v-if="item.id" class="text-sm text-n-slate-11 flex-shrink-0">
-              {{ `#${item.id}` }}
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/CardPopover.story.vue

@@ -1,45 +0,0 @@
-<script setup>
-import CardPopover from '../CardPopover.vue';
-
-const mockItems = [
-  {
-    id: 1,
-    name: 'Website Support',
-    icon: 'i-lucide-globe',
-  },
-  {
-    id: 2,
-    name: 'Email Support',
-    icon: 'i-lucide-mail',
-  },
-  {
-    id: 3,
-    name: 'WhatsApp Business',
-    icon: 'i-lucide-message-circle',
-  },
-  {
-    id: 4,
-    name: 'Facebook Messenger',
-    icon: 'i-lucide-facebook',
-  },
-];
-</script>
-
-<template>
-  <Story
-    title="Components/AgentManagementPolicy/CardPopover"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="Basic Usage">
-      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
-        <CardPopover
-          :count="3"
-          title="Added Inboxes"
-          icon="i-lucide-inbox"
-          :items="mockItems.slice(0, 3)"
-          @fetch="() => console.log('Fetch triggered')"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -1,13 +1,11 @@
 <script setup>
-import { computed, useSlots, ref } from 'vue';
+import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -26,8 +24,6 @@ const { t } = useI18n();
 const slots = useSlots();
 const route = useRoute();
 
-const isContactSidebarOpen = ref(false);
-
 const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
@@ -60,15 +56,6 @@ const handleBreadcrumbClick = () => {
 const toggleBlock = () => {
   emit('toggleBlock', isContactBlocked.value);
 };
-
-const handleConversationSidebarToggle = () => {
-  isContactSidebarOpen.value = !isContactSidebarOpen.value;
-};
-
-const closeMobileSidebar = () => {
-  if (!isContactSidebarOpen.value) return;
-  isContactSidebarOpen.value = false;
-};
 </script>
 
 <template>
@@ -80,9 +67,7 @@ const closeMobileSidebar = () => {
     >
       <header class="sticky top-0 z-10 px-6 3xl:px-0">
         <div class="w-full mx-auto max-w-[40.625rem]">
-          <div
-            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
-          >
+          <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
@@ -100,11 +85,6 @@ const closeMobileSidebar = () => {
                 :disabled="isUpdating"
                 @click="toggleBlock"
               />
-              <VoiceCallButton
-                :phone="selectedContact?.phoneNumber"
-                :label="$t('CONTACT_PANEL.CALL')"
-                size="sm"
-              />
               <ComposeConversation :contact-id="contactId">
                 <template #trigger="{ toggle }">
                   <Button
@@ -125,65 +105,11 @@ const closeMobileSidebar = () => {
       </main>
     </div>
 
-    <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>
-
-    <!-- Mobile sidebar container -->
-    <div
-      v-if="slots.sidebar"
-      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
-      :class="isContactSidebarOpen ? 'w-full' : 'w-16'"
-    >
-      <!-- Toggle button -->
-      <div
-        v-on-click-outside="[
-          closeMobileSidebar,
-          { ignore: ['#contact-sidebar-content'] },
-        ]"
-        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
-        :class="[
-          isContactSidebarOpen
-            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
-            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
-        ]"
-      >
-        <Button
-          ghost
-          slate
-          sm
-          class="!rounded-full rtl:rotate-180"
-          :class="{ 'bg-n-alpha-2': isContactSidebarOpen }"
-          :icon="
-            isContactSidebarOpen
-              ? 'i-lucide-panel-right-close'
-              : 'i-lucide-panel-right-open'
-          "
-          data-contact-sidebar-toggle
-          @click="handleConversationSidebarToggle"
-        />
-      </div>
-
-      <Transition
-        enter-active-class="transition-transform duration-200 ease-in-out"
-        leave-active-class="transition-transform duration-200 ease-in-out"
-        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
-        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
-      >
-        <div
-          v-if="isContactSidebarOpen"
-          id="contact-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
-        >
-          <slot name="sidebar" />
-        </div>
-      </Transition>
-    </div>
   </section>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -34,13 +34,13 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2 w-full">
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
           <Input
             :model-value="searchValue"
             type="search"
@@ -48,7 +48,6 @@ const emit = defineEmits([
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
-            class="w-full"
             @input="emit('search', $event.target.value)"
           >
             <template #prefix>
@@ -59,66 +58,64 @@ const emit = defineEmits([
             </template>
           </Input>
         </div>
-        <div class="flex items-center flex-shrink-0 gap-4">
-          <div class="flex items-center gap-2">
-            <div v-if="!isLabelView && !isActiveView" class="relative">
-              <Button
-                id="toggleContactsFilterButton"
-                :icon="
-                  isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
-                "
-                color="slate"
-                size="sm"
-                class="relative w-8"
-                variant="ghost"
-                @click="emit('filter')"
-              >
-                <div
-                  v-if="hasActiveFilters && !isSegmentsView"
-                  class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-                />
-              </Button>
-              <slot name="filter" />
-            </div>
+        <div class="flex items-center gap-2">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
             <Button
-              v-if="
-                hasActiveFilters &&
-                !isSegmentsView &&
-                !isLabelView &&
-                !isActiveView
+              id="toggleContactsFilterButton"
+              :icon="
+                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
               "
-              icon="i-lucide-save"
               color="slate"
               size="sm"
+              class="relative w-8"
               variant="ghost"
-              @click="emit('createSegment')"
-            />
-            <Button
-              v-if="isSegmentsView && !isLabelView && !isActiveView"
-              icon="i-lucide-trash"
-              color="slate"
-              size="sm"
-              variant="ghost"
-              @click="emit('deleteSegment')"
-            />
-            <ContactSortMenu
-              :active-sort="activeSort"
-              :active-ordering="activeOrdering"
-              @update:sort="emit('update:sort', $event)"
-            />
-            <ContactMoreActions
-              @add="emit('add')"
-              @import="emit('import')"
-              @export="emit('export')"
-            />
+              @click="emit('filter')"
+            >
+              <div
+                v-if="hasActiveFilters && !isSegmentsView"
+                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+              />
+            </Button>
+            <slot name="filter" />
           </div>
-          <div class="w-px h-4 bg-n-strong" />
-          <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
-            </template>
-          </ComposeConversation>
+          <Button
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('deleteSegment')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
         </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -62,7 +62,6 @@ const segmentsQuery = ref({});
 
 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
 const contactAttributes = useMapGetter('attributes/getContactAttributes');
-const labels = useMapGetter('labels/getLabels');
 const hasActiveSegments = computed(
   () => props.activeSegment && props.segmentsId !== 0
 );
@@ -216,7 +215,6 @@ const setParamsForEditSegmentModal = () => {
     countries,
     filterTypes: contactFilterItems,
     allCustomAttributes: useSnakeCase(contactAttributes.value),
-    labels: labels.value || [],
   };
 };
 
@@ -293,20 +291,17 @@ defineExpose({
     @delete-segment="openDeleteSegmentDialog"
   >
     <template #filter>
-      <div
-        class="absolute mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
-      >
-        <ContactsFilter
-          v-if="showFiltersModal"
-          v-model="appliedFilter"
-          :segment-name="activeSegmentName"
-          :is-segment-view="hasActiveSegments"
-          @apply-filter="onApplyFilter"
-          @update-segment="onUpdateSegment"
-          @close="closeAdvanceFiltersModal"
-          @clear-filters="clearFilters"
-        />
-      </div>
+      <ContactsFilter
+        v-if="showFiltersModal"
+        v-model="appliedFilter"
+        :segment-name="activeSegmentName"
+        :is-segment-view="hasActiveSegments"
+        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
+        @apply-filter="onApplyFilter"
+        @update-segment="onUpdateSegment"
+        @close="closeAdvanceFiltersModal"
+        @clear-filters="clearFilters"
+      />
     </template>
   </ContactsHeader>
 

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue

@@ -105,7 +105,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -96,7 +96,10 @@ const openFilter = () => {
           <slot name="default" />
         </div>
       </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer
+        v-if="showPaginationFooter"
+        class="sticky bottom-0 z-10 px-4 pb-4"
+      >
         <PaginationFooter
           current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"

app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js

@@ -4,8 +4,8 @@ export default [
       city: 'Los Angeles',
       country: 'United States',
       description:
-        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
-      companyName: 'Lumora',
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
       countryCode: 'US',
       socialProfiles: {
         github: 'candice-dev',
@@ -16,7 +16,7 @@ export default [
       },
     },
     availabilityStatus: 'offline',
-    email: 'candice.matherson@lumora.com',
+    email: 'candice.matherson@chatwoot.com',
     id: 22,
     name: 'Candice Matherson',
     phoneNumber: '+14155552671',

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { computed, ref, useAttrs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { useAlert } from 'dashboard/composables';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  phone: { type: String, default: '' },
-  label: { type: String, default: '' },
-  icon: { type: [String, Object, Function], default: '' },
-  size: { type: String, default: 'sm' },
-  tooltipLabel: { type: String, default: '' },
-});
-
-defineOptions({ inheritAttrs: false });
-const attrs = useAttrs();
-
-const { t } = useI18n();
-
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(
-    inbox => inbox.channel_type === INBOX_TYPES.VOICE
-  )
-);
-const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
-
-// Unified behavior: hide when no phone
-const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
-
-const dialogRef = ref(null);
-
-const onClick = () => {
-  if (voiceInboxes.value.length > 1) {
-    dialogRef.value?.open();
-    return;
-  }
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-};
-
-const onPickInbox = () => {
-  // Placeholder until actual call wiring happens
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-  dialogRef.value?.close();
-};
-</script>
-
-<template>
-  <span class="contents">
-    <Button
-      v-if="shouldRender"
-      v-tooltip.top-end="tooltipLabel || null"
-      v-bind="attrs"
-      :label="label"
-      :icon="icon"
-      :size="size"
-      @click="onClick"
-    />
-
-    <Dialog
-      v-if="shouldRender && voiceInboxes.length > 1"
-      ref="dialogRef"
-      :title="$t('CONTACT_PANEL.VOICE_INBOX_PICKER.TITLE')"
-      show-cancel-button
-      :show-confirm-button="false"
-      width="md"
-    >
-      <div class="flex flex-col gap-2">
-        <button
-          v-for="inbox in voiceInboxes"
-          :key="inbox.id"
-          type="button"
-          class="flex items-center justify-between w-full px-4 py-2 text-left rounded-lg hover:bg-n-alpha-2"
-          @click="onPickInbox(inbox)"
-        >
-          <div class="flex items-center gap-2">
-            <span class="i-ri-phone-fill text-n-slate-10" />
-            <span class="text-sm text-n-slate-12">{{ inbox.name }}</span>
-          </div>
-          <span v-if="inbox.phone_number" class="text-xs text-n-slate-10">
-            {{ inbox.phone_number }}
-          </span>
-        </button>
-      </div>
-    </Dialog>
-  </span>
-</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue

@@ -47,7 +47,6 @@ const unreadMessagesCount = computed(() => {
     </p>
     <div class="flex items-center flex-shrink-0 gap-2 pb-2">
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue

@@ -96,7 +96,6 @@ defineExpose({
         />
       </div>
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue

@@ -188,18 +188,14 @@ const toggle = () => {
 
 watch(
   activeContact,
-  (currentContact, previousContact) => {
-    if (currentContact && props.contactId) {
-      // Reset on contact change
-      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
-
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
       // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(
-        currentContact.contactInboxes || []
-      );
+      const processedInboxes = processContactableInboxes(contactInboxes);
       // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
-        ...currentContact,
+        ...activeContact.value,
         contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
       };
     }

app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue

@@ -11,14 +11,12 @@ import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
-import ContentTemplateSelector from './ContentTemplateSelector.vue';
 
 const props = defineProps({
   attachedFiles: { type: Array, default: () => [] },
   isWhatsappInbox: { type: Boolean, default: false },
   isEmailOrWebWidgetInbox: { type: Boolean, default: false },
   isTwilioSmsInbox: { type: Boolean, default: false },
-  isTwilioWhatsAppInbox: { type: Boolean, default: false },
   messageTemplates: { type: Array, default: () => [] },
   channelType: { type: String, default: '' },
   isLoading: { type: Boolean, default: false },
@@ -34,7 +32,6 @@ const emit = defineEmits([
   'discard',
   'sendMessage',
   'sendWhatsappMessage',
-  'sendTwilioMessage',
   'insertEmoji',
   'addSignature',
   'removeSignature',
@@ -66,20 +63,6 @@ const sendWithSignature = computed(() => {
   return fetchSignatureFlagFromUISettings(props.channelType);
 });
 
-const showTwilioContentTemplates = computed(() => {
-  return props.isTwilioWhatsAppInbox && props.inboxId;
-});
-
-const shouldShowEmojiButton = computed(() => {
-  return (
-    !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox && !props.hasNoInbox
-  );
-});
-
-const isRegularMessageMode = computed(() => {
-  return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
-});
-
 const setSignature = () => {
   if (signatureToApply.value) {
     if (sendWithSignature.value) {
@@ -142,7 +125,7 @@ const keyboardEvents = {
     action: () => {
       if (
         isEditorHotKeyEnabled('enter') &&
-        isRegularMessageMode.value &&
+        !props.isWhatsappInbox &&
         !props.isDropdownActive
       ) {
         emit('sendMessage');
@@ -153,7 +136,7 @@ const keyboardEvents = {
     action: () => {
       if (
         isEditorHotKeyEnabled('cmd_enter') &&
-        isRegularMessageMode.value &&
+        !props.isWhatsappInbox &&
         !props.isDropdownActive
       ) {
         emit('sendMessage');
@@ -175,13 +158,8 @@ useKeyboardEvents(keyboardEvents);
         :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
-      <ContentTemplateSelector
-        v-if="showTwilioContentTemplates"
-        :inbox-id="inboxId"
-        @send-message="emit('sendTwilioMessage', $event)"
-      />
       <div
-        v-if="shouldShowEmojiButton"
+        v-if="!isWhatsappInbox && !hasNoInbox"
         v-on-click-outside="() => (isEmojiPickerOpen = false)"
         class="relative"
       >
@@ -194,7 +172,7 @@ useKeyboardEvents(keyboardEvents);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="top-full mt-1.5 ltr:left-0 rtl:right-0"
+          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
           :on-click="onClickInsertEmoji"
         />
       </div>
@@ -221,7 +199,7 @@ useKeyboardEvents(keyboardEvents);
         />
       </FileUpload>
       <Button
-        v-if="hasSelectedInbox && isRegularMessageMode"
+        v-if="hasSelectedInbox && !isWhatsappInbox"
         icon="i-lucide-signature"
         color="slate"
         size="sm"
@@ -240,7 +218,7 @@ useKeyboardEvents(keyboardEvents);
         @click="emit('discard')"
       />
       <Button
-        v-if="isRegularMessageMode"
+        v-if="!isWhatsappInbox"
         :label="sendButtonLabel"
         size="sm"
         class="!text-xs font-medium"

app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue

@@ -74,9 +74,6 @@ const inboxTypes = computed(() => ({
   isTwilioSMS:
     props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
     props.targetInbox?.medium === 'sms',
-  isTwilioWhatsapp:
-    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
-    props.targetInbox?.medium === 'whatsapp',
 }));
 
 const whatsappMessageTemplates = computed(() =>
@@ -264,33 +261,11 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     isFromWhatsApp: true,
   });
 };
-
-const handleSendTwilioMessage = async ({ message, templateParams }) => {
-  const twilioMessagePayload = prepareWhatsAppMessagePayload({
-    targetInbox: props.targetInbox,
-    selectedContact: props.selectedContact,
-    message,
-    templateParams,
-    currentUser: props.currentUser,
-  });
-  await emit('createConversation', {
-    payload: twilioMessagePayload,
-    isFromWhatsApp: true,
-  });
-};
-
-const shouldShowMessageEditor = computed(() => {
-  return (
-    !inboxTypes.value.isWhatsapp &&
-    !showNoInboxAlert.value &&
-    !inboxTypes.value.isTwilioWhatsapp
-  );
-});
 </script>
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"
@@ -336,7 +311,7 @@ const shouldShowMessageEditor = computed(() => {
     />
 
     <MessageEditor
-      v-if="shouldShowMessageEditor"
+      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
       v-model="state.message"
       :message-signature="messageSignature"
       :send-with-signature="sendWithSignature"
@@ -356,7 +331,6 @@ const shouldShowMessageEditor = computed(() => {
       :is-whatsapp-inbox="inboxTypes.isWhatsapp"
       :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
       :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
-      :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
       :message-templates="whatsappMessageTemplates"
       :channel-type="inboxChannelType"
       :is-loading="isCreating"
@@ -373,7 +347,6 @@ const shouldShowMessageEditor = computed(() => {
       @discard="$emit('discard')"
       @send-message="handleSendMessage"
       @send-whatsapp-message="handleSendWhatsappMessage"
-      @send-twilio-message="handleSendTwilioMessage"
     />
   </div>
 </template>

app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateForm.vue

@@ -1,56 +0,0 @@
-<script setup>
-import ContentTemplateParser from 'dashboard/components-next/content-templates/ContentTemplateParser.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
-
-const handleBack = () => {
-  emit('back');
-};
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <div class="w-full">
-      <ContentTemplateParser
-        :template="template"
-        @send-message="handleSendMessage"
-        @back="handleBack"
-      >
-        <template #actions="{ sendMessage, goBack, disabled }">
-          <div class="flex gap-3 justify-between items-end w-full h-14">
-            <Button
-              :label="t('CONTENT_TEMPLATES.FORM.BACK_BUTTON')"
-              color="slate"
-              variant="faded"
-              class="w-full font-medium"
-              @click="goBack"
-            />
-            <Button
-              :label="t('CONTENT_TEMPLATES.FORM.SEND_MESSAGE_BUTTON')"
-              class="w-full font-medium"
-              :disabled="disabled"
-              @click="sendMessage"
-            />
-          </div>
-        </template>
-      </ContentTemplateParser>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateSelector.vue

@@ -1,124 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import ContentTemplateForm from './ContentTemplateForm.vue';
-
-const props = defineProps({
-  inboxId: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['sendMessage']);
-
-const { t } = useI18n();
-const inbox = useMapGetter('inboxes/getInbox');
-
-const searchQuery = ref('');
-const selectedTemplate = ref(null);
-const showTemplatesMenu = ref(false);
-
-const contentTemplates = computed(() => {
-  const inboxData = inbox.value(props.inboxId);
-  return inboxData?.content_templates?.templates || [];
-});
-
-const filteredTemplates = computed(() => {
-  return contentTemplates.value.filter(
-    template =>
-      template.friendly_name
-        .toLowerCase()
-        .includes(searchQuery.value.toLowerCase()) &&
-      template.status === 'approved'
-  );
-});
-
-const handleTriggerClick = () => {
-  searchQuery.value = '';
-  showTemplatesMenu.value = !showTemplatesMenu.value;
-};
-
-const handleTemplateClick = template => {
-  selectedTemplate.value = template;
-  showTemplatesMenu.value = false;
-};
-
-const handleBack = () => {
-  selectedTemplate.value = null;
-  showTemplatesMenu.value = true;
-};
-
-const handleSendMessage = template => {
-  emit('sendMessage', template);
-  selectedTemplate.value = null;
-};
-</script>
-
-<template>
-  <div class="relative">
-    <Button
-      icon="i-ph-whatsapp-logo"
-      :label="t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.LABEL')"
-      color="slate"
-      size="sm"
-      :disabled="selectedTemplate"
-      class="!text-xs font-medium"
-      @click="handleTriggerClick"
-    />
-    <div
-      v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-    >
-      <div class="w-full">
-        <Input
-          v-model="searchQuery"
-          type="search"
-          :placeholder="
-            t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
-          "
-          custom-input-class="ltr:pl-10 rtl:pr-10"
-        >
-          <template #prefix>
-            <Icon
-              icon="i-lucide-search"
-              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
-            />
-          </template>
-        </Input>
-      </div>
-      <div
-        v-for="template in filteredTemplates"
-        :key="template.content_sid"
-        tabindex="0"
-        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
-        @click="handleTemplateClick(template)"
-      >
-        <div class="flex justify-between items-center">
-          <span class="text-sm text-n-slate-12">{{
-            template.friendly_name
-          }}</span>
-        </div>
-        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
-          {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
-        </p>
-      </div>
-      <template v-if="filteredTemplates.length === 0">
-        <p class="pt-2 w-full text-sm text-n-slate-11">
-          {{ t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.EMPTY_STATE') }}
-        </p>
-      </template>
-    </div>
-    <ContentTemplateForm
-      v-if="selectedTemplate"
-      :template="selectedTemplate"
-      @send-message="handleSendMessage"
-      @back="handleBack"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const templateName = computed(() => {
+  return props.template?.name || '';
+});
+
+const templateString = computed(() => {
+  return props.template?.components?.find(
+    component => component.type === 'BODY'
+  ).text;
+});
+
+const processVariable = str => {
+  return str.replace(/{{|}}/g, '');
+};
+
+const processedString = computed(() => {
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    const variableKey = processVariable(variable);
+    return processedParams.value[variableKey] || `{{${variable}}}`;
+  });
+});
+
+const processedStringWithVariableHighlight = computed(() => {
+  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
+
+  return variables.reduce((result, variable) => {
+    const variableKey = processVariable(variable);
+    const value = processedParams.value[variableKey] || variable;
+    return result.replace(
+      variable,
+      `<span class="break-all text-n-slate-12">${value}</span>`
+    );
+  }, templateString.value);
+});
+
+const rules = computed(() => {
+  const paramRules = {};
+  Object.keys(processedParams.value).forEach(key => {
+    paramRules[key] = { required: requiredIf(true) };
+  });
+  return {
+    processedParams: paramRules,
+  };
+});
+
+const v$ = useVuelidate(rules, { processedParams });
+
+const getFieldErrorType = key => {
+  if (!v$.value.processedParams[key]?.$error) return 'info';
+  return 'error';
+};
+
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) return;
+
+  const finalVars = matchedVariables.map(i => processVariable(i));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = '';
+    return acc;
+  }, {});
+};
+
+const sendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  const payload = {
+    message: processedString.value,
+    templateParams: {
+      name: props.template.name,
+      category: props.template.category,
+      language: props.template.language,
+      namespace: props.template.namespace,
+      processed_params: processedParams.value,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+onMounted(() => {
+  generateVariables();
+});
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <span class="text-sm text-n-slate-12">
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
+          { templateName: templateName }
+        )
+      }}
+    </span>
+    <p
+      class="mb-0 text-sm text-n-slate-11"
+      v-html="processedStringWithVariableHighlight"
+    />
+
+    <span
+      v-if="Object.keys(processedParams).length"
+      class="text-sm font-medium text-n-slate-12"
+    >
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
+        )
+      }}
+    </span>
+
+    <div
+      v-for="(variable, key) in processedParams"
+      :key="key"
+      class="flex items-center w-full gap-2"
+    >
+      <span
+        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
+        :title="key"
+      >
+        {{ key }}
+      </span>
+      <Input
+        v-model="processedParams[key]"
+        custom-input-class="!h-8 w-full !bg-transparent"
+        class="w-full"
+        :message-type="getFieldErrorType(key)"
+      />
+    </div>
+
+    <div class="flex items-end justify-between w-full gap-3 h-14">
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+          )
+        "
+        color="slate"
+        variant="faded"
+        class="w-full font-medium"
+        @click="emit('back')"
+      />
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+          )
+        "
+        class="w-full font-medium"
+        @click="sendMessage"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js

@@ -25,7 +25,7 @@ export const generateLabelForContactableInboxesList = ({
     channelType === INBOX_TYPES.TWILIO ||
     channelType === INBOX_TYPES.WHATSAPP
   ) {
-    return phoneNumber ? `${name} (${phoneNumber})` : name;
+    return `${name} (${phoneNumber})`;
   }
   return name;
 };
@@ -53,7 +53,6 @@ const transformInbox = ({
   email,
   phoneNumber,
   channelType,
-  medium,
   ...rest,
 });
 

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -21,17 +21,9 @@ const onClick = (item, index) => {
 </script>
 
 <template>
-  <nav
-    :aria-label="t('BREADCRUMB.ARIA_LABEL')"
-    class="flex items-center h-8 min-w-0"
-  >
-    <ol class="flex items-center mb-0 min-w-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center"
-        :class="{ 'min-w-0 flex-1': index === items.length - 1 }"
-      >
+  <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
+    <ol class="flex items-center mb-0">
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
         <Icon
           v-if="index > 0"
           icon="i-lucide-chevron-right"
@@ -48,7 +40,7 @@ const onClick = (item, index) => {
         </button>
 
         <!-- The last breadcrumb item is plain text -->
-        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
+        <span v-else class="text-sm truncate text-n-slate-12 max-w-56">
           {{ item.emoji ? item.emoji : '' }} {{ item.label }}
         </span>
       </li>

app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue

@@ -52,10 +52,10 @@ const handleBreadcrumbClick = item => {
 
 <template>
   <section
-    class="px-6 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
+    class="mt-4 px-10 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
   >
     <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
-      <header class="mb-7 sticky top-0 bg-n-background pt-4 z-20">
+      <header class="mb-7 sticky top-0 z-10 bg-n-background">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </header>
       <main class="flex gap-16 w-full flex-1 pb-16">

app/javascript/dashboard/components-next/captain/assistant/DocumentCard.vue

@@ -4,10 +4,6 @@ import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
-import {
-  isPdfDocument,
-  formatDocumentLink,
-} from 'shared/helpers/documentHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
@@ -67,11 +63,6 @@ const menuItems = computed(() => {
 
 const createdAt = computed(() => dynamicTime(props.createdAt));
 
-const displayLink = computed(() => formatDocumentLink(props.externalLink));
-const linkIcon = computed(() =>
-  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
-);
-
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
@@ -80,14 +71,14 @@ const handleAction = ({ action, value }) => {
 
 <template>
   <CardLayout>
-    <div class="flex gap-1 justify-between w-full">
+    <div class="flex justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ name }}
       </span>
-      <div class="flex gap-2 items-center">
+      <div class="flex items-center gap-2">
         <div
           v-on-clickaway="() => toggleDropdown(false)"
-          class="flex relative items-center group"
+          class="relative flex items-center group"
         >
           <Button
             icon="i-lucide-ellipsis-vertical"
@@ -99,26 +90,26 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showActionsDropdown"
             :menu-items="menuItems"
-            class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
             @action="handleAction($event)"
           />
         </div>
       </div>
     </div>
-    <div class="flex gap-4 justify-between items-center w-full">
+    <div class="flex items-center justify-between w-full gap-4">
       <span
-        class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
+        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
       >
         <i class="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
       <span
-        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
+        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
       >
-        <i :class="linkIcon" class="shrink-0" />
-        <span class="truncate">{{ displayLink }}</span>
+        <i class="i-ph-link-simple shrink-0" />
+        <span class="truncate">{{ externalLink }}</span>
       </span>
-      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
+      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
         {{ createdAt }}
       </div>
     </div>

app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue';
+import { computed, h, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useToggle, useElementSize } from '@vueuse/core';
+import { useToggle } from '@vueuse/core';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
@@ -11,7 +11,6 @@ import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   id: {
@@ -32,7 +31,7 @@ const props = defineProps({
   },
   tools: {
     type: Array,
-    default: () => [],
+    required: true,
   },
   selectable: {
     type: Boolean,
@@ -61,13 +60,7 @@ const state = reactive({
   instruction: '',
 });
 
-const instructionContentRef = ref();
-
 const [isEditing, toggleEditing] = useToggle();
-const [isInstructionExpanded, toggleInstructionExpanded] = useToggle();
-
-const { height: contentHeight } = useElementSize(instructionContentRef);
-const needsOverlay = computed(() => contentHeight.value > 160);
 
 const startEdit = () => {
   Object.assign(state, {
@@ -118,7 +111,7 @@ const LINK_INSTRUCTION_CLASS =
 
 const renderInstruction = instruction => () =>
   h('p', {
-    class: `text-sm text-n-slate-12 py-4 mb-0 prose prose-sm min-w-0 break-words max-w-none ${LINK_INSTRUCTION_CLASS}`,
+    class: `text-sm text-n-slate-12 py-4 mb-0 [&_ol]:list-decimal ${LINK_INSTRUCTION_CLASS}`,
     innerHTML: instruction,
   });
 </script>
@@ -164,38 +157,8 @@ const renderInstruction = instruction => () =>
           />
         </div>
       </div>
-
-      <div
-        class="relative overflow-hidden transition-all duration-300 ease-in-out group/expandable"
-        :class="{ 'cursor-pointer': needsOverlay }"
-        :style="{
-          maxHeight: isInstructionExpanded ? `${contentHeight}px` : '10rem',
-        }"
-        @click="needsOverlay ? toggleInstructionExpanded() : null"
-      >
-        <div ref="instructionContentRef">
-          <component
-            :is="renderInstruction(formatMessage(instruction, false))"
-          />
-        </div>
-
-        <div
-          class="absolute bottom-0 w-full flex items-end justify-center text-xs text-n-slate-11 bg-gradient-to-t h-40 from-n-solid-2 via-n-solid-2 via-10% to-transparent transition-all duration-500 ease-in-out px-2 py-1 rounded pointer-events-none"
-          :class="{
-            'visible opacity-100': !isInstructionExpanded,
-            'invisible opacity-0': isInstructionExpanded || !needsOverlay,
-          }"
-        >
-          <Icon
-            icon="i-lucide-chevron-down"
-            class="text-n-slate-7 mb-4 size-4 group-hover/expandable:text-n-slate-11 transition-colors duration-200"
-          />
-        </div>
-      </div>
-      <span
-        v-if="tools?.length"
-        class="text-sm text-n-slate-11 font-medium mb-1"
-      >
+      <component :is="renderInstruction(formatMessage(instruction, false))" />
+      <span class="text-sm text-n-slate-11 font-medium mb-1">
         {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
         {{ tools?.map(tool => `@${tool}`).join(', ') }}
       </span>

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -3,7 +3,6 @@ import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
@@ -13,6 +12,7 @@ const { t } = useI18n();
 const store = useStore();
 
 const dialogRef = ref(null);
+const documentForm = ref(null);
 
 const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
 
@@ -23,7 +23,7 @@ const handleSubmit = async newDocument => {
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      parseAPIErrorResponse(error) || t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
     useAlert(errorMessage);
   }
 };
@@ -48,7 +48,11 @@ defineExpose({ dialogRef });
     :show-confirm-button="false"
     @close="handleClose"
   >
-    <DocumentForm @submit="handleSubmit" @cancel="handleCancel" />
+    <DocumentForm
+      ref="documentForm"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
     <template #footer />
   </Dialog>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { reactive, computed, ref, nextTick } from 'vue';
+import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, requiredIf, url } from '@vuelidate/validators';
+import { required, minLength, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -12,8 +11,6 @@ import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
 const { t } = useI18n();
 
 const formState = {
@@ -23,25 +20,14 @@ const formState = {
 
 const initialState = {
   name: '',
-  url: '',
   assistantId: null,
-  documentType: 'url',
-  pdfFile: null,
 };
 
 const state = reactive({ ...initialState });
-const fileInputRef = ref(null);
 
 const validationRules = {
-  url: {
-    required: requiredIf(() => state.documentType === 'url'),
-    url: requiredIf(() => state.documentType === 'url' && url),
-    minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
-  },
+  url: { required, url, minLength: minLength(1) },
   assistantId: { required },
-  pdfFile: {
-    required: requiredIf(() => state.documentType === 'pdf'),
-  },
 };
 
 const assistantList = computed(() =>
@@ -51,17 +37,10 @@ const assistantList = computed(() =>
   }))
 );
 
-const documentTypeOptions = [
-  { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
-  { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
-];
-
 const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
 
-const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
-
 const getErrorMessage = (field, errorKey) => {
   return v$.value[field].$error
     ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
@@ -71,57 +50,14 @@ const getErrorMessage = (field, errorKey) => {
 const formErrors = computed(() => ({
   url: getErrorMessage('url', 'URL'),
   assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
-  pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const handleFileChange = event => {
-  const file = event.target.files[0];
-  if (file) {
-    if (file.type !== 'application/pdf') {
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
-      event.target.value = '';
-      return;
-    }
-    if (file.size > MAX_FILE_SIZE) {
-      // 10MB
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
-      event.target.value = '';
-      return;
-    }
-    state.pdfFile = file;
-    state.name = file.name.replace(/\.pdf$/i, '');
-  }
-};
-
-const openFileDialog = () => {
-  // Use nextTick to ensure the ref is available
-  nextTick(() => {
-    if (fileInputRef.value) {
-      fileInputRef.value.click();
-    }
-  });
-};
-
-const prepareDocumentDetails = () => {
-  const formData = new FormData();
-  formData.append('document[assistant_id]', state.assistantId);
-
-  if (state.documentType === 'url') {
-    formData.append('document[external_link]', state.url);
-    formData.append('document[name]', state.name || state.url);
-  } else {
-    formData.append('document[pdf_file]', state.pdfFile);
-    formData.append(
-      'document[name]',
-      state.name || state.pdfFile.name.replace('.pdf', '')
-    );
-    // No need to send external_link for PDF - it's auto-generated in the backend
-  }
-
-  return formData;
-};
+const prepareDocumentDetails = () => ({
+  external_link: state.url,
+  assistant_id: state.assistantId,
+});
 
 const handleSubmit = async () => {
   const isFormValid = await v$.value.$validate();
@@ -135,89 +71,13 @@ const handleSubmit = async () => {
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-1">
-      <label
-        for="documentType"
-        class="mb-0.5 text-sm font-medium text-n-slate-12"
-      >
-        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
-      </label>
-      <ComboBox
-        id="documentType"
-        v-model="state.documentType"
-        :options="documentTypeOptions"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
     <Input
-      v-if="state.documentType === 'url'"
       v-model="state.url"
       :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
       :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
       :message="formErrors.url"
       :message-type="formErrors.url ? 'error' : 'info'"
     />
-
-    <div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
-      </label>
-      <div class="relative">
-        <input
-          ref="fileInputRef"
-          type="file"
-          accept=".pdf"
-          class="hidden"
-          @change="handleFileChange"
-        />
-        <Button
-          type="button"
-          :color="hasPdfFileError ? 'ruby' : 'slate'"
-          :variant="hasPdfFileError ? 'outline' : 'solid'"
-          class="!w-full !h-auto !justify-between !py-4"
-          @click="openFileDialog"
-        >
-          <template #default>
-            <div class="flex gap-2 items-center">
-              <div
-                class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
-              >
-                <i class="text-xl i-ph-file-pdf text-n-slate-11" />
-              </div>
-              <div class="flex flex-col flex-1 gap-1 items-start">
-                <p class="m-0 text-sm font-medium text-n-slate-12">
-                  {{
-                    state.pdfFile
-                      ? state.pdfFile.name
-                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
-                  }}
-                </p>
-                <p class="m-0 text-xs text-n-slate-11">
-                  {{
-                    state.pdfFile
-                      ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
-                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
-                  }}
-                </p>
-              </div>
-            </div>
-
-            <i class="i-lucide-upload text-n-slate-11" />
-          </template>
-        </Button>
-      </div>
-      <p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
-        {{ formErrors.pdfFile }}
-      </p>
-    </div>
-
-    <Input
-      v-model="state.name"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
-    />
-
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
         {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
@@ -228,12 +88,12 @@ const handleSubmit = async () => {
         :options="assistantList"
         :has-error="!!formErrors.assistantId"
         :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
         :message="formErrors.assistantId"
       />
     </div>
 
-    <div class="flex gap-3 justify-between items-center w-full">
+    <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"
         variant="faded"

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -96,12 +96,8 @@ watch(
         :label="selectedLabel"
         trailing-icon
         :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 focus:outline-n-brand"
-        :class="{
-          focused: open,
-          '[&:not(.focused)]:dark:outline-n-weak [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6':
-            !hasError,
-        }"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
+        :class="{ focused: open }"
         :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
         @click="toggleDropdown"
       />

app/javascript/dashboard/components-next/content-templates/ContentTemplateParser.vue

@@ -1,278 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
-import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-    validator: value => {
-      if (!value || typeof value !== 'object') return false;
-      if (!value.friendly_name) return false;
-      return true;
-    },
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
-
-const VARIABLE_PATTERN = /{{([^}]+)}}/g;
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const languageLabel = computed(() => {
-  return `${t('CONTENT_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || 'en'}`;
-});
-
-const categoryLabel = computed(() => {
-  return `${t('CONTENT_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || 'utility'}`;
-});
-
-const templateBody = computed(() => {
-  return props.template.body || '';
-});
-
-const hasMediaTemplate = computed(() => {
-  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
-});
-
-const hasVariables = computed(() => {
-  return templateBody.value?.match(VARIABLE_PATTERN) !== null;
-});
-
-const mediaVariableKey = computed(() => {
-  if (!hasMediaTemplate.value) return null;
-  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
-  if (!mediaUrl) return null;
-  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
-});
-
-const hasMediaVariable = computed(() => {
-  return hasMediaTemplate.value && mediaVariableKey.value !== null;
-});
-
-const templateMediaUrl = computed(() => {
-  if (!hasMediaTemplate.value) return '';
-
-  return props.template?.types?.['twilio/media']?.media?.[0] || '';
-});
-
-const variablePattern = computed(() => {
-  if (!hasVariables.value) return [];
-  const matches = templateBody.value.match(VARIABLE_PATTERN) || [];
-  return matches.map(match => match.replace(/[{}]/g, ''));
-});
-
-const renderedTemplate = computed(() => {
-  let rendered = templateBody.value;
-  if (processedParams.value && Object.keys(processedParams.value).length > 0) {
-    // Replace variables in the format {{1}}, {{2}}, etc.
-    rendered = rendered.replace(VARIABLE_PATTERN, (match, variable) => {
-      const cleanVariable = variable.trim();
-      return processedParams.value[cleanVariable] || match;
-    });
-  }
-  return rendered;
-});
-
-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaVariable.value) return false;
-
-  if (hasVariables.value) {
-    const hasEmptyVariable = variablePattern.value.some(
-      variable => !processedParams.value[variable]
-    );
-    if (hasEmptyVariable) return true;
-  }
-
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    !processedParams.value[mediaVariableKey.value]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const v$ = useVuelidate(
-  {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf(
-        () => hasVariables.value || hasMediaVariable.value
-      ),
-    },
-  },
-  { processedParams }
-);
-
-const initializeTemplateParameters = () => {
-  processedParams.value = {};
-
-  if (hasVariables.value) {
-    variablePattern.value.forEach(variable => {
-      processedParams.value[variable] = '';
-    });
-  }
-
-  if (hasMediaVariable.value && mediaVariableKey.value) {
-    processedParams.value[mediaVariableKey.value] = '';
-  }
-};
-
-const sendMessage = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid || isFormInvalid.value) return;
-
-  const { friendly_name, language } = props.template;
-
-  // Process parameters and extract filename from media URL if needed
-  const processedParameters = { ...processedParams.value };
-
-  // For media templates, extract filename from full URL
-  if (
-    hasMediaVariable.value &&
-    mediaVariableKey.value &&
-    processedParameters[mediaVariableKey.value]
-  ) {
-    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
-      processedParameters[mediaVariableKey.value]
-    );
-  }
-
-  const payload = {
-    message: renderedTemplate.value,
-    templateParams: {
-      name: friendly_name,
-      language,
-      processed_params: processedParameters,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-const resetTemplate = () => {
-  emit('resetTemplate');
-};
-
-const goBack = () => {
-  emit('back');
-};
-
-onMounted(initializeTemplateParameters);
-
-watch(
-  () => props.template,
-  () => {
-    initializeTemplateParameters();
-    v$.value.$reset();
-  },
-  { deep: true }
-);
-
-defineExpose({
-  processedParams,
-  hasVariables,
-  hasMediaTemplate,
-  renderedTemplate,
-  v$,
-  sendMessage,
-  resetTemplate,
-  goBack,
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex flex-col gap-4 p-4 mb-4 rounded-lg bg-n-alpha-black2">
-      <div class="flex justify-between items-center">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ template.friendly_name }}
-        </h3>
-        <span class="text-xs text-n-slate-11">
-          {{ languageLabel }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <div class="rounded-md">
-          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
-            {{ renderedTemplate }}
-          </div>
-        </div>
-      </div>
-
-      <div class="text-xs text-n-slate-11">
-        {{ categoryLabel }}
-      </div>
-    </div>
-
-    <div v-if="hasVariables || hasMediaVariable">
-      <!-- Media URL for media templates -->
-      <div v-if="hasMediaVariable" class="mb-4">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ $t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_LABEL') }}
-        </p>
-        <div class="flex items-center mb-2.5">
-          <Input
-            v-model="processedParams[mediaVariableKey]"
-            type="url"
-            class="flex-1"
-            :placeholder="
-              templateMediaUrl ||
-              t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_PLACEHOLDER')
-            "
-          />
-        </div>
-      </div>
-
-      <!-- Body Variables Section -->
-      <div v-if="hasVariables">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ $t('CONTENT_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-        </p>
-        <div
-          v-for="variable in variablePattern"
-          :key="`variable-${variable}`"
-          class="flex items-center mb-2.5"
-        >
-          <Input
-            v-model="processedParams[variable]"
-            type="text"
-            class="flex-1"
-            :placeholder="
-              t('CONTENT_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
-                variable: variable,
-              })
-            "
-          />
-        </div>
-      </div>
-
-      <p
-        v-if="v$.$dirty && (v$.$invalid || isFormInvalid)"
-        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
-      >
-        {{ $t('CONTENT_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-      </p>
-    </div>
-
-    <slot
-      name="actions"
-      :send-message="sendMessage"
-      :reset-template="resetTemplate"
-      :go-back="goBack"
-      :is-valid="!v$.$invalid && !isFormInvalid"
-      :disabled="isFormInvalid"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/copilot/CopilotInput.vue

@@ -1,49 +1,25 @@
 <script setup>
-import { ref, nextTick, onMounted } from 'vue';
+import { ref } from 'vue';
 
 const emit = defineEmits(['send']);
 const message = ref('');
-const textareaRef = ref(null);
-
-const adjustHeight = () => {
-  if (!textareaRef.value) return;
-
-  // Reset height to auto to get the correct scrollHeight
-  textareaRef.value.style.height = 'auto';
-  // Set the height to the scrollHeight
-  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
-};
 
 const sendMessage = () => {
   if (message.value.trim()) {
     emit('send', message.value);
     message.value = '';
-    // Reset textarea height after sending
-    nextTick(() => {
-      adjustHeight();
-    });
   }
 };
-
-const handleInput = () => {
-  nextTick(adjustHeight);
-};
-
-onMounted(() => {
-  nextTick(adjustHeight);
-});
 </script>
 
 <template>
   <form class="relative" @submit.prevent="sendMessage">
-    <textarea
-      ref="textareaRef"
+    <input
       v-model="message"
+      type="text"
       :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
-      rows="1"
-      @input="handleInput"
-      @keydown.enter.exact.prevent="sendMessage"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
+      @keyup.enter="sendMessage"
     />
     <button
       class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownSection.vue

@@ -15,7 +15,7 @@ defineProps({
     >
       {{ title }}
     </div>
-    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
+    <ul class="gap-2 grid reset-base list-none px-2">
       <slot />
     </ul>
   </div>

app/javascript/dashboard/components-next/filter/ActiveFilterPreview.vue

@@ -34,17 +34,14 @@ const formatOperatorLabel = operator => {
 };
 
 const formatFilterValue = value => {
-  // Case 1: null, undefined, empty string
   if (!value) return '';
-
-  // Case 2: array → map each item, use name if present, else the item itself
   if (Array.isArray(value)) {
-    return value.map(item => item?.name ?? item).join(', ');
+    return value.join(', ');
   }
-
-  // Case 3: object with a "name" property → return name
-  // Case 4: primitive (string, number, etc.) → return as is
-  return value?.name ?? value;
+  if (typeof value === 'object' && value.name) {
+    return value.name;
+  }
+  return value;
 };
 </script>
 
@@ -69,7 +66,6 @@ const formatFilterValue = value => {
           </span>
           <span
             v-if="filter.values"
-            :title="formatFilterValue(filter.values)"
             class="lowercase truncate text-n-slate-12"
             :class="{
               'first-letter:capitalize': shouldCapitalizeFirstLetter(

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -192,7 +192,6 @@ defineExpose({ validate });
         solid
         slate
         icon="i-lucide-trash"
-        class="flex-shrink-0"
         @click.stop="emit('remove')"
       />
     </div>

app/javascript/dashboard/components-next/filter/ContactsFilter.vue

@@ -104,7 +104,7 @@ const outsideClickHandler = [
 <template>
   <div
     v-on-click-outside="outsideClickHandler"
-    class="z-40 max-w-3xl min-w-96 lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
   >
     <h3 class="text-base font-medium leading-6 text-n-slate-12">
       {{ filterModalHeaderTitle }}
@@ -146,10 +146,10 @@ const outsideClickHandler = [
       </template>
     </ul>
     <div class="flex justify-between gap-2">
-      <Button sm ghost blue class="flex-shrink-0" @click="addFilter">
+      <Button sm ghost blue @click="addFilter">
         {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.ADD_FILTER') }}
       </Button>
-      <div class="flex gap-2 flex-shrink-0">
+      <div class="flex gap-2">
         <Button sm faded slate @click="resetFilter">
           {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.CLEAR_FILTERS') }}
         </Button>

app/javascript/dashboard/components-next/filter/contactProvider.js

@@ -50,7 +50,6 @@ export function useContactFilterContext() {
   const { t } = useI18n();
 
   const contactAttributes = useMapGetter('attributes/getContactAttributes');
-  const labels = useMapGetter('labels/getLabels');
 
   const {
     equalityOperators,
@@ -185,20 +184,6 @@ export function useContactFilterContext() {
       filterOperators: equalityOperators.value,
       attributeModel: 'standard',
     },
-    {
-      attributeKey: CONTACT_ATTRIBUTES.LABELS,
-      value: CONTACT_ATTRIBUTES.LABELS,
-      attributeName: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
-      label: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
-      inputType: 'multiSelect',
-      options: labels.value?.map(label => ({
-        id: label.title,
-        name: label.title,
-      })),
-      dataType: 'text',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'standard',
-    },
     ...customFilterTypes.value,
   ]);
 

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -28,7 +28,6 @@ export const CONTACT_ATTRIBUTES = {
   LAST_ACTIVITY_AT: 'last_activity_at',
   REFERER: 'referer',
   BLOCKED: 'blocked',
-  LABELS: 'labels',
 };
 
 /**

app/javascript/dashboard/components-next/icon/provider.js

@@ -2,23 +2,23 @@ import { computed } from 'vue';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
-    'Channel::Api': 'i-woot-api',
-    'Channel::Email': 'i-woot-mail',
-    'Channel::FacebookPage': 'i-woot-messenger',
-    'Channel::Line': 'i-woot-line',
-    'Channel::Sms': 'i-woot-sms',
-    'Channel::Telegram': 'i-woot-telegram',
-    'Channel::TwilioSms': 'i-woot-sms',
+    'Channel::Api': 'i-ri-cloudy-fill',
+    'Channel::Email': 'i-ri-mail-fill',
+    'Channel::FacebookPage': 'i-ri-messenger-fill',
+    'Channel::Line': 'i-ri-line-fill',
+    'Channel::Sms': 'i-ri-chat-1-fill',
+    'Channel::Telegram': 'i-ri-telegram-fill',
+    'Channel::TwilioSms': 'i-ri-chat-1-fill',
     'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-    'Channel::WebWidget': 'i-woot-website',
-    'Channel::Whatsapp': 'i-woot-whatsapp',
-    'Channel::Instagram': 'i-woot-instagram',
+    'Channel::WebWidget': 'i-ri-global-fill',
+    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
+    'Channel::Instagram': 'i-ri-instagram-fill',
     'Channel::Voice': 'i-ri-phone-fill',
   };
 
   const providerIconMap = {
-    microsoft: 'i-woot-outlook',
-    google: 'i-woot-gmail',
+    microsoft: 'i-ri-microsoft-fill',
+    google: 'i-ri-google-fill',
   };
 
   const channelIcon = computed(() => {
@@ -34,7 +34,7 @@ export function useChannelIcon(inbox) {
 
     // Special case for Twilio whatsapp
     if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-woot-whatsapp';
+      icon = 'i-ri-whatsapp-fill';
     }
 
     return icon ?? 'i-ri-global-fill';

app/javascript/dashboard/components-next/icon/specs/provider.spec.js

@@ -4,19 +4,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for API channel', () => {
     const inbox = { channel_type: 'Channel::Api' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-api');
+    expect(icon).toBe('i-ri-cloudy-fill');
   });
 
   it('returns correct icon for Facebook channel', () => {
     const inbox = { channel_type: 'Channel::FacebookPage' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-messenger');
+    expect(icon).toBe('i-ri-messenger-fill');
   });
 
   it('returns correct icon for WhatsApp channel', () => {
     const inbox = { channel_type: 'Channel::Whatsapp' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-whatsapp');
+    expect(icon).toBe('i-ri-whatsapp-fill');
   });
 
   it('returns correct icon for Voice channel', () => {
@@ -28,19 +28,19 @@ describe('useChannelIcon', () => {
   it('returns correct icon for Line channel', () => {
     const inbox = { channel_type: 'Channel::Line' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-line');
+    expect(icon).toBe('i-ri-line-fill');
   });
 
   it('returns correct icon for SMS channel', () => {
     const inbox = { channel_type: 'Channel::Sms' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-sms');
+    expect(icon).toBe('i-ri-chat-1-fill');
   });
 
   it('returns correct icon for Telegram channel', () => {
     const inbox = { channel_type: 'Channel::Telegram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-telegram');
+    expect(icon).toBe('i-ri-telegram-fill');
   });
 
   it('returns correct icon for Twitter channel', () => {
@@ -52,20 +52,20 @@ describe('useChannelIcon', () => {
   it('returns correct icon for WebWidget channel', () => {
     const inbox = { channel_type: 'Channel::WebWidget' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-website');
+    expect(icon).toBe('i-ri-global-fill');
   });
 
   it('returns correct icon for Instagram channel', () => {
     const inbox = { channel_type: 'Channel::Instagram' };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-instagram');
+    expect(icon).toBe('i-ri-instagram-fill');
   });
 
   describe('TwilioSms channel', () => {
     it('returns chat icon for regular Twilio SMS channel', () => {
       const inbox = { channel_type: 'Channel::TwilioSms' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
 
     it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
@@ -74,7 +74,7 @@ describe('useChannelIcon', () => {
         medium: 'whatsapp',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-whatsapp');
+      expect(icon).toBe('i-ri-whatsapp-fill');
     });
 
     it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
@@ -83,7 +83,7 @@ describe('useChannelIcon', () => {
         medium: 'sms',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
 
     it('returns chat icon for Twilio SMS with undefined medium', () => {
@@ -92,7 +92,7 @@ describe('useChannelIcon', () => {
         medium: undefined,
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-sms');
+      expect(icon).toBe('i-ri-chat-1-fill');
     });
   });
 
@@ -100,7 +100,7 @@ describe('useChannelIcon', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-mail');
+      expect(icon).toBe('i-ri-mail-fill');
     });
 
     it('returns Microsoft icon for Microsoft email provider', () => {
@@ -109,7 +109,7 @@ describe('useChannelIcon', () => {
         provider: 'microsoft',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-outlook');
+      expect(icon).toBe('i-ri-microsoft-fill');
     });
 
     it('returns Google icon for Google email provider', () => {
@@ -118,7 +118,7 @@ describe('useChannelIcon', () => {
         provider: 'google',
       };
       const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-woot-gmail');
+      expect(icon).toBe('i-ri-google-fill');
     });
   });
 

app/javascript/dashboard/components-next/message/Message.vue

@@ -36,7 +36,6 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
-import VoiceCallBubble from './bubbles/VoiceCall.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -281,10 +280,6 @@ const componentToRender = computed(() => {
     return FormBubble;
   }
 
-  if (props.contentType === CONTENT_TYPES.VOICE_CALL) {
-    return VoiceCallBubble;
-  }
-
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }

app/javascript/dashboard/components-next/message/bubbles/Base.vue

@@ -10,10 +10,6 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
-const props = defineProps({
-  hideMeta: { type: Boolean, default: false },
-});
-
 const { variant, orientation, inReplyTo, shouldGroupWithNext } =
   useMessageContext();
 const { t } = useI18n();
@@ -68,13 +64,6 @@ const scrollToMessage = () => {
   });
 };
 
-const shouldShowMeta = computed(
-  () =>
-    !props.hideMeta &&
-    !shouldGroupWithNext.value &&
-    variant.value !== MESSAGE_VARIANTS.ACTIVITY
-);
-
 const replyToPreview = computed(() => {
   if (!inReplyTo) return '';
 
@@ -104,16 +93,16 @@ const replyToPreview = computed(() => {
   >
     <div
       v-if="inReplyTo"
-      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
+      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
       @click="scrollToMessage"
     >
-      <span class="break-all line-clamp-2">
+      <span class="line-clamp-2 break-all">
         {{ replyToPreview }}
       </span>
     </div>
     <slot />
     <MessageMeta
-      v-if="shouldShowMeta"
+      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
       :class="[
         flexOrientationClass,
         variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
-import { sanitizeTextForRender } from '@chatwoot/utils';
 import { allowedCssProperties } from 'lettersanitizer';
 
 import Icon from 'next/icon/Icon.vue';
@@ -38,12 +37,12 @@ const { hasTranslations, translationContent } =
 const originalEmailText = computed(() => {
   const text =
     contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return sanitizeTextForRender(text);
+  return text?.replace(/\n/g, '<br>');
 });
 
 const originalEmailHtml = computed(
   () =>
-    contentAttributes?.value?.email?.htmlContent?.full ||
+    contentAttributes?.value?.email?.htmlContent?.full ??
     originalEmailText.value
 );
 

app/javascript/dashboard/components-next/message/bubbles/VoiceCall.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import BaseBubble from 'next/message/bubbles/Base.vue';
-import { useMessageContext } from '../provider.js';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
-
-const { contentAttributes } = useMessageContext();
-
-const data = computed(() => contentAttributes.value?.data);
-
-const status = computed(() => data.value?.status);
-const direction = computed(() => data.value?.call_direction);
-
-const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
-  useVoiceCallStatus(status, direction);
-
-const containerRingClass = computed(() => {
-  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
-});
-</script>
-
-<template>
-  <BaseBubble class="p-0 border-none" hide-meta>
-    <div
-      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
-      :class="containerRingClass"
-    >
-      <div class="flex gap-3 items-center p-3 w-full">
-        <div
-          class="flex justify-center items-center rounded-full size-10 shrink-0"
-          :class="bubbleIconBg"
-        >
-          <span class="text-xl" :class="bubbleIconName" />
-        </div>
-
-        <div class="flex overflow-hidden flex-col flex-grow">
-          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
-          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
-        </div>
-      </div>
-    </div>
-  </BaseBubble>
-</template>

app/javascript/dashboard/components-next/message/constants.js

@@ -64,7 +64,6 @@ export const CONTENT_TYPES = {
   INPUT_CSAT: 'input_csat',
   INTEGRATIONS: 'integrations',
   STICKER: 'sticker',
-  VOICE_CALL: 'voice_call',
 };
 
 export const MEDIA_TYPES = [

app/javascript/dashboard/components-next/sidebar/ChannelLeaf.vue

@@ -25,7 +25,7 @@ const reauthorizationRequired = computed(() => {
 
 <template>
   <span
-    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
+    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
     :class="{ 'bg-n-solid-blue': active }"
   >
     <ChannelIcon :inbox="inbox" class="size-3" />

app/javascript/dashboard/components-next/sidebar/Sidebar.vue

@@ -128,7 +128,7 @@ const menuItems = computed(() => {
       to: accountScopedRoute('inbox_view'),
       activeOn: ['inbox_view', 'inbox_view_conversation'],
       getterKeys: {
-        count: 'notifications/getUnreadCount',
+        badge: 'notifications/getHasUnreadNotifications',
       },
     },
     {
@@ -422,12 +422,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-users',
           to: accountScopedRoute('settings_teams_list'),
         },
-        {
-          name: 'Settings Agent Assignment',
-          label: t('SIDEBAR.AGENT_ASSIGNMENT'),
-          icon: 'i-lucide-user-cog',
-          to: accountScopedRoute('assignment_policy_index'),
-        },
         {
           name: 'Settings Inboxes',
           label: t('SIDEBAR.INBOXES'),
@@ -494,12 +488,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-clock-alert',
           to: accountScopedRoute('sla_list'),
         },
-        {
-          name: 'Settings Security',
-          label: t('SIDEBAR.SECURITY'),
-          icon: 'i-lucide-shield',
-          to: accountScopedRoute('security_settings_index'),
-        },
         {
           name: 'Settings Billing',
           label: t('SIDEBAR.BILLING'),

app/javascript/dashboard/components-next/sidebar/SidebarGroupHeader.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';
 
@@ -17,16 +16,12 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);
 
 const showBadge = useMapGetter(props.getterKeys.badge);
-const dynamicCount = useMapGetter(props.getterKeys.count);
-const count = computed(() =>
-  dynamicCount.value > 99 ? '99+' : dynamicCount.value
-);
 </script>
 
 <template>
   <component
     :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
     role="button"
     draggable="false"
     :to="to"
@@ -45,21 +40,9 @@ const count = computed(() =>
         class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
       />
     </div>
-    <div class="flex items-center gap-1.5 flex-grow min-w-0">
-      <span class="text-sm font-medium leading-5 truncate">
-        {{ label }}
-      </span>
-      <span
-        v-if="dynamicCount && !expandable"
-        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
-        :class="{
-          'text-n-blue-text outline-n-slate-6': isActive,
-          'text-n-slate-11 outline-n-strong': !isActive,
-        }"
-      >
-        {{ count }}
-      </span>
-    </div>
+    <span class="text-sm font-medium leading-5 flex-grow">
+      {{ label }}
+    </span>
     <span
       v-if="expandable"
       v-show="isExpanded"

app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue

@@ -86,15 +86,6 @@ const menuItems = computed(() => {
       nativeLink: true,
       target: '_blank',
     },
-    {
-      show: true,
-      showOnCustomBrandedInstance: false,
-      label: t('SIDEBAR_ITEMS.CHANGELOG'),
-      icon: 'i-lucide-scroll-text',
-      link: 'https://www.chatwoot.com/changelog/',
-      nativeLink: true,
-      target: '_blank',
-    },
     {
       show: currentUser.value.type === 'SuperAdmin',
       showOnCustomBrandedInstance: true,
@@ -123,7 +114,7 @@ const allowedMenuItems = computed(() => {
   <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
     <template #trigger="{ toggle, isOpen }">
       <button
-        class="flex gap-2 items-center p-1 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
+        class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
         :class="{ 'bg-n-alpha-1': isOpen }"
         @click="toggle"
       >
@@ -136,16 +127,16 @@ const allowedMenuItems = computed(() => {
           rounded-full
         />
         <div class="min-w-0">
-          <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
+          <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
             {{ currentUser.available_name }}
           </div>
-          <div class="text-xs truncate text-n-slate-11">
+          <div class="text-n-slate-11 text-xs truncate">
             {{ currentUser.email }}
           </div>
         </div>
       </button>
     </template>
-    <DropdownBody class="bottom-12 z-50 mb-2 w-80 ltr:left-0 rtl:right-0">
+    <DropdownBody class="ltr:left-0 rtl:right-0 bottom-12 z-50 w-80 mb-2">
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">

app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue

@@ -1,13 +1,4 @@
 <script setup>
-/**
- * This component handles parsing and sending WhatsApp message templates.
- * It works as follows:
- * 1. Displays the template text with variable placeholders.
- * 2. Generates input fields for each variable in the template.
- * 3. Validates that all variables are filled before sending.
- * 4. Replaces placeholders with user-provided values.
- * 5. Emits events to send the processed message or reset the template.
- */
 import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,57 +1,50 @@
-<script setup>
-import Icon from 'next/icon/Icon.vue';
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    src: {
+      type: String,
+      required: true,
+    },
+    isComingSoon: {
+      type: Boolean,
+      default: false,
+    },
   },
-  description: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    required: true,
-  },
-  isComingSoon: {
-    type: Boolean,
-    default: false,
-  },
-});
+};
 </script>
 
 <template>
   <button
-    class="relative bg-n-solid-1 gap-6 cursor-pointer rounded-2xl flex flex-col justify-start transition-all duration-200 ease-in -m-px py-6 px-5 items-start border border-solid border-n-weak"
-    :class="{
-      'hover:enabled:border-n-blue-9 hover:enabled:shadow-md disabled:opacity-60 disabled:cursor-not-allowed':
-        !isComingSoon,
-      'cursor-not-allowed disabled:opacity-80': isComingSoon,
-    }"
+    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
   >
-    <div
-      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-    >
-      <Icon :icon="icon" class="text-n-slate-10 size-6" />
-    </div>
-
-    <div class="flex flex-col items-start gap-1.5">
-      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
-        {{ title }}
-      </h3>
-      <p class="text-n-slate-11 text-start text-sm">
-        {{ description }}
-      </p>
-    </div>
+    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
+    <h3 class="text-n-slate-12 text-base text-center capitalize">
+      {{ title }}
+    </h3>
 
     <div
       v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
     >
-      <span class="text-n-slate-12 font-medium text-sm">
+      <span class="text-n-slate-12 font-medium text-base">
         {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
       </span>
     </div>
   </button>
 </template>
+
+<style scoped lang="scss">
+.inactive {
+  img {
+    filter: grayscale(100%);
+  }
+
+  &:hover {
+    @apply border-n-strong shadow-none cursor-not-allowed;
+  }
+}
+</style>

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -101,24 +100,20 @@ const handleReset = () => {
 };
 
 const sendMessage = async message => {
-  try {
-    if (selectedCopilotThreadId.value) {
-      await store.dispatch('copilotMessages/create', {
-        assistant_id: activeAssistant.value.id,
-        conversation_id: currentChat.value?.id,
-        threadId: selectedCopilotThreadId.value,
-        message,
-      });
-    } else {
-      const response = await store.dispatch('copilotThreads/create', {
-        assistant_id: activeAssistant.value.id,
-        conversation_id: currentChat.value?.id,
-        message,
-      });
-      selectedCopilotThreadId.value = response.id;
-    }
-  } catch (error) {
-    useAlert(error.message);
+  if (selectedCopilotThreadId.value) {
+    await store.dispatch('copilotMessages/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      threadId: selectedCopilotThreadId.value,
+      message,
+    });
+  } else {
+    const response = await store.dispatch('copilotThreads/create', {
+      assistant_id: activeAssistant.value.id,
+      conversation_id: currentChat.value?.id,
+      message,
+    });
+    selectedCopilotThreadId.value = response.id;
   }
 };
 

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

@@ -1,81 +1,97 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import Icon from 'next/icon/Icon.vue';
-
-const props = defineProps({
-  items: {
-    type: Array,
-    default: () => [],
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
+    },
   },
-});
-
-const route = useRoute();
-
-const activeIndex = computed(() => {
-  const index = props.items.findIndex(i => i.route === route.name);
-  return index === -1 ? 0 : index;
-});
-
-const steps = computed(() =>
-  props.items.map((item, index) => {
-    const isActive = index === activeIndex.value;
-    const isOver = index < activeIndex.value;
-    return {
-      ...item,
-      index,
-      isActive,
-      isOver,
-    };
-  })
-);
+  computed: {
+    classObject() {
+      return 'w-full';
+    },
+    activeIndex() {
+      return this.items.findIndex(i => i.route === this.$route.name);
+    },
+  },
+  methods: {
+    isActive(item) {
+      return this.items.indexOf(item) === this.activeIndex;
+    },
+    isOver(item) {
+      return this.items.indexOf(item) < this.activeIndex;
+    },
+  },
+};
 </script>
 
 <template>
-  <transition-group tag="div">
+  <transition-group
+    name="wizard-items"
+    tag="div"
+    class="wizard-box"
+    :class="classObject"
+  >
     <div
-      v-for="step in steps"
-      :key="step.route"
-      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
+      v-for="item in items"
+      :key="item.route"
+      class="item"
+      :class="{ active: isActive(item), over: isOver(item) }"
     >
-      <!-- Circle -->
-      <div
-        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
-        :class="{
-          'bg-n-slate-3': step.isActive || step.isOver,
-          'bg-n-background': !step.isActive && !step.isOver,
-        }"
-      >
-        <span
-          v-if="!step.isOver"
-          :key="'num-' + step.index"
-          class="text-xs font-bold transition-colors duration-300"
-          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
+      <div class="flex items-center">
+        <h3
+          class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
         >
-          {{ step.index + 1 }}
+          {{ item.title }}
+        </h3>
+        <span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
+          <fluent-icon icon="checkmark" />
         </span>
-        <Icon
-          v-else
-          :key="'check-' + step.index"
-          icon="i-lucide-check"
-          class="text-n-slate-11 size-4"
-        />
-      </div>
-
-      <!-- Content -->
-      <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
-        <div class="flex items-center">
-          <h3
-            class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
-            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
-          >
-            {{ step.title }}
-          </h3>
-        </div>
-        <p class="m-0 mt-1.5 text-sm text-n-slate-11">
-          {{ step.body }}
-        </p>
       </div>
+      <span class="step">
+        {{ items.indexOf(item) + 1 }}
+      </span>
+      <p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
+        {{ item.body }}
+      </p>
     </div>
   </transition-group>
 </template>
+
+<style lang="scss" scoped>
+.wizard-box {
+  .item {
+    @apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
+
+    &.active {
+      h3 {
+        @apply text-n-blue-text dark:text-n-blue-text;
+      }
+
+      .step {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+    }
+
+    &.over {
+      &::after {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+
+      .step {
+        @apply bg-n-brand dark:bg-n-brand;
+      }
+
+      & + .item {
+        &::before {
+          @apply bg-n-brand dark:bg-n-brand;
+        }
+      }
+    }
+
+    .step {
+      @apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
+    }
+  }
+}
+</style>

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

@@ -1,87 +1,91 @@
-<script setup>
-import { computed } from 'vue';
+<script>
 import ChannelSelector from '../ChannelSelector.vue';
-
-const props = defineProps({
-  channel: {
-    type: Object,
-    required: true,
+export default {
+  components: { ChannelSelector },
+  props: {
+    channel: {
+      type: Object,
+      required: true,
+    },
+    enabledFeatures: {
+      type: Object,
+      required: true,
+    },
   },
-  enabledFeatures: {
-    type: Object,
-    required: true,
+  emits: ['channelItemClick'],
+  computed: {
+    hasFbConfigured() {
+      return window.chatwootConfig?.fbAppId;
+    },
+    hasInstagramConfigured() {
+      return window.chatwootConfig?.instagramAppId;
+    },
+    isActive() {
+      const { key } = this.channel;
+      if (Object.keys(this.enabledFeatures).length === 0) {
+        return false;
+      }
+      if (key === 'website') {
+        return this.enabledFeatures.channel_website;
+      }
+      if (key === 'facebook') {
+        return this.enabledFeatures.channel_facebook && this.hasFbConfigured;
+      }
+      if (key === 'email') {
+        return this.enabledFeatures.channel_email;
+      }
+
+      if (key === 'instagram') {
+        return (
+          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
+        );
+      }
+
+      if (key === 'voice') {
+        return this.enabledFeatures.channel_voice;
+      }
+
+      return [
+        'website',
+        'twilio',
+        'api',
+        'whatsapp',
+        'sms',
+        'telegram',
+        'line',
+        'instagram',
+        'voice',
+      ].includes(key);
+    },
+    isComingSoon() {
+      const { key } = this.channel;
+      // Show "Coming Soon" only if the channel is marked as coming soon
+      // and the corresponding feature flag is not enabled yet.
+      return ['voice'].includes(key) && !this.isActive;
+    },
+  },
+  methods: {
+    getChannelThumbnail() {
+      if (this.channel.key === 'api' && this.channel.thumbnail) {
+        return this.channel.thumbnail;
+      }
+      return `/assets/images/dashboard/channels/${this.channel.key}.png`;
+    },
+    onItemClick() {
+      if (this.isActive) {
+        this.$emit('channelItemClick', this.channel.key);
+      }
+    },
   },
-});
-
-const emit = defineEmits(['channelItemClick']);
-
-const hasFbConfigured = computed(() => {
-  return window.chatwootConfig?.fbAppId;
-});
-
-const hasInstagramConfigured = computed(() => {
-  return window.chatwootConfig?.instagramAppId;
-});
-
-const isActive = computed(() => {
-  const { key } = props.channel;
-  if (Object.keys(props.enabledFeatures).length === 0) {
-    return false;
-  }
-  if (key === 'website') {
-    return props.enabledFeatures.channel_website;
-  }
-  if (key === 'facebook') {
-    return props.enabledFeatures.channel_facebook && hasFbConfigured.value;
-  }
-  if (key === 'email') {
-    return props.enabledFeatures.channel_email;
-  }
-
-  if (key === 'instagram') {
-    return (
-      props.enabledFeatures.channel_instagram && hasInstagramConfigured.value
-    );
-  }
-
-  if (key === 'voice') {
-    return props.enabledFeatures.channel_voice;
-  }
-
-  return [
-    'website',
-    'twilio',
-    'api',
-    'whatsapp',
-    'sms',
-    'telegram',
-    'line',
-    'instagram',
-    'voice',
-  ].includes(key);
-});
-
-const isComingSoon = computed(() => {
-  const { key } = props.channel;
-  // Show "Coming Soon" only if the channel is marked as coming soon
-  // and the corresponding feature flag is not enabled yet.
-  return ['voice'].includes(key) && !isActive.value;
-});
-
-const onItemClick = () => {
-  if (isActive.value) {
-    emit('channelItemClick', props.channel.key);
-  }
 };
 </script>
 
 <template>
   <ChannelSelector
-    :title="channel.title"
-    :description="channel.description"
-    :icon="channel.icon"
+    :class="{ inactive: !isActive }"
+    :title="channel.name"
+    :src="getChannelThumbnail()"
     :is-coming-soon="isComingSoon"
-    :disabled="!isActive"
     @click="onItemClick"
   />
 </template>

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

@@ -13,7 +13,7 @@ defineProps({
   <div class="flex items-center text-n-slate-11 text-xs min-w-0">
     <ChannelIcon
       :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
+      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
     />
     <span class="truncate">
       {{ inbox.name }}

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

@@ -8,10 +8,6 @@ const props = defineProps({
     type: String,
     default: REPLY_EDITOR_MODES.REPLY,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 defineEmits(['toggleMode']);
@@ -24,12 +20,9 @@ const privateModeSize = useElementSize(wootEditorPrivateMode);
 
 /**
  * Computed boolean indicating if the editor is in private note mode
- * When disabled, always show NOTE mode regardless of actual mode prop
  * @type {ComputedRef<boolean>}
  */
-const isPrivate = computed(() => {
-  return props.disabled || props.mode === REPLY_EDITOR_MODES.NOTE;
-});
+const isPrivate = computed(() => props.mode === REPLY_EDITOR_MODES.NOTE);
 
 /**
  * Computes the width of the sliding background chip in pixels
@@ -60,10 +53,6 @@ const translateValue = computed(() => {
 <template>
   <button
     class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
-    :disabled="disabled"
-    :class="{
-      'cursor-not-allowed': disabled,
-    }"
     @click="$emit('toggleMode')"
   >
     <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -73,10 +62,7 @@ const translateValue = computed(() => {
       {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
     </div>
     <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
-      :class="{
-        'transition-all duration-300': !disabled,
-      }"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,

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

@@ -6,11 +6,15 @@ import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import {
+  ALLOWED_FILE_TYPES,
+  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+  ALLOWED_FILE_TYPES_FOR_LINE,
+  ALLOWED_FILE_TYPES_FOR_INSTAGRAM,
+} from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { REPLY_EDITOR_MODES } from './constants';
 import { mapGetters } from 'vuex';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -19,9 +23,9 @@ export default {
   components: { NextButton, FileUpload, VideoCallButton, AIAssistanceButton },
   mixins: [inboxMixin],
   props: {
-    isNote: {
-      type: Boolean,
-      default: false,
+    mode: {
+      type: String,
+      default: REPLY_EDITOR_MODES.REPLY,
     },
     onSend: {
       type: Function,
@@ -94,10 +98,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    enableContentTemplates: {
-      type: Boolean,
-      default: false,
-    },
     conversationId: {
       type: Number,
       required: true,
@@ -124,7 +124,6 @@ export default {
     'toggleInsertArticle',
     'toggleEditor',
     'selectWhatsappTemplate',
-    'selectContentTemplate',
   ],
   setup() {
     const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
@@ -156,17 +155,15 @@ export default {
       uploadRef,
     };
   },
-  data() {
-    return {
-      ALLOWED_FILE_TYPES,
-    };
-  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
       isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
       uiFlags: 'integrations/getUIFlags',
     }),
+    isNote() {
+      return this.mode === REPLY_EDITOR_MODES.NOTE;
+    },
     wrapClass() {
       return {
         'is-note-mode': this.isNote,
@@ -199,21 +196,17 @@ export default {
       return this.conversationType === 'instagram_direct_message';
     },
     allowedFileTypes() {
-      // Use default file types for private notes
-      if (this.isOnPrivateNote) {
-        return this.ALLOWED_FILE_TYPES;
+      if (this.isATwilioWhatsAppChannel) {
+        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
+      }
+      if (this.isALineChannel) {
+        return ALLOWED_FILE_TYPES_FOR_LINE;
       }
-
-      let channelType = this.channelType || this.inbox?.channel_type;
-
       if (this.isAnInstagramChannel || this.isInstagramDM) {
-        channelType = INBOX_TYPES.INSTAGRAM;
+        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
       }
 
-      return getAllowedFileTypesByChannel({
-        channelType,
-        medium: this.inbox?.medium,
-      });
+      return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {
       return !this.newConversationModalActive;
@@ -348,15 +341,6 @@ export default {
         sm
         @click="$emit('selectWhatsappTemplate')"
       />
-      <NextButton
-        v-if="enableContentTemplates"
-        v-tooltip.top-end="'Content Templates'"
-        icon="i-ph-whatsapp-logo"
-        slate
-        faded
-        sm
-        @click="$emit('selectContentTemplate')"
-      />
       <VideoCallButton
         v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
         :conversation-id="conversationId"
@@ -371,7 +355,7 @@ export default {
       <transition name="modal-fade">
         <div
           v-show="uploadRef && uploadRef.dropActive"
-          class="flex fixed top-0 right-0 bottom-0 left-0 z-20 flex-col gap-2 justify-center items-center w-full h-full text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
         >
           <fluent-icon icon="cloud-backup" size="40" />
           <h4 class="text-2xl break-words text-n-slate-12">

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

@@ -15,10 +15,6 @@ export default {
       type: String,
       default: REPLY_EDITOR_MODES.REPLY,
     },
-    isReplyRestricted: {
-      type: Boolean,
-      default: false,
-    },
     isMessageLengthReachingThreshold: {
       type: Boolean,
       default: () => false,
@@ -34,7 +30,6 @@ export default {
       emit('setReplyMode', mode);
     };
     const handleReplyClick = () => {
-      if (props.isReplyRestricted) return;
       setReplyMode(REPLY_EDITOR_MODES.REPLY);
     };
     const handleNoteClick = () => {
@@ -93,7 +88,6 @@ export default {
   <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
     <EditorModeToggle
       :mode="mode"
-      :disabled="isReplyRestricted"
       class="mt-3"
       @toggle-mode="handleModeToggle"
     />

app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesModal.vue

@@ -1,97 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import TemplatesPicker from './ContentTemplatesPicker.vue';
-import TemplateParser from '../../../../components-next/content-templates/ContentTemplateParser.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  show: {
-    type: Boolean,
-    default: false,
-  },
-  inboxId: {
-    type: Number,
-    default: undefined,
-  },
-});
-
-const emit = defineEmits(['onSend', 'cancel', 'update:show']);
-
-const { t } = useI18n();
-
-const selectedContentTemplate = ref(null);
-
-const localShow = computed({
-  get() {
-    return props.show;
-  },
-  set(value) {
-    emit('update:show', value);
-  },
-});
-
-const modalHeaderContent = computed(() => {
-  return selectedContentTemplate.value
-    ? t('CONTENT_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
-        templateName: selectedContentTemplate.value.friendly_name,
-      })
-    : t('CONTENT_TEMPLATES.MODAL.SUBTITLE');
-});
-
-const pickTemplate = template => {
-  selectedContentTemplate.value = template;
-};
-
-const onResetTemplate = () => {
-  selectedContentTemplate.value = null;
-};
-
-const onSendMessage = message => {
-  emit('onSend', message);
-};
-
-const onClose = () => {
-  emit('cancel');
-};
-</script>
-
-<template>
-  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
-    <woot-modal-header
-      :header-title="$t('CONTENT_TEMPLATES.MODAL.TITLE')"
-      :header-content="modalHeaderContent"
-    />
-    <div class="px-8 py-6 row">
-      <TemplatesPicker
-        v-if="!selectedContentTemplate"
-        :inbox-id="inboxId"
-        @on-select="pickTemplate"
-      />
-      <TemplateParser
-        v-else
-        :template="selectedContentTemplate"
-        @reset-template="onResetTemplate"
-        @send-message="onSendMessage"
-      >
-        <template #actions="{ sendMessage, resetTemplate, disabled }">
-          <div class="flex gap-2 mt-6">
-            <Button
-              :label="t('CONTENT_TEMPLATES.PARSER.GO_BACK_LABEL')"
-              color="slate"
-              variant="faded"
-              class="flex-1"
-              @click="resetTemplate"
-            />
-            <Button
-              :label="t('CONTENT_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
-              class="flex-1"
-              :disabled="disabled"
-              @click="sendMessage"
-            />
-          </div>
-        </template>
-      </TemplateParser>
-    </div>
-  </woot-modal>
-</template>

app/javascript/dashboard/components/widgets/conversation/ContentTemplates/ContentTemplatesPicker.vue

@@ -1,169 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useAlert } from 'dashboard/composables';
-import { useStore } from 'dashboard/composables/store';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { useI18n } from 'vue-i18n';
-import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
-
-const props = defineProps({
-  inboxId: {
-    type: Number,
-    default: undefined,
-  },
-});
-
-const emit = defineEmits(['onSelect']);
-
-const { t } = useI18n();
-const store = useStore();
-const query = ref('');
-const isRefreshing = ref(false);
-
-const twilioTemplates = computed(() => {
-  const inbox = store.getters['inboxes/getInbox'](props.inboxId);
-  return inbox?.content_templates?.templates || [];
-});
-
-const filteredTemplateMessages = computed(() =>
-  twilioTemplates.value.filter(
-    template =>
-      template.friendly_name
-        .toLowerCase()
-        .includes(query.value.toLowerCase()) && template.status === 'approved'
-  )
-);
-
-const getTemplateType = template => {
-  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA) {
-    return t('CONTENT_TEMPLATES.PICKER.TYPES.MEDIA');
-  }
-  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.QUICK_REPLY) {
-    return t('CONTENT_TEMPLATES.PICKER.TYPES.QUICK_REPLY');
-  }
-  return t('CONTENT_TEMPLATES.PICKER.TYPES.TEXT');
-};
-
-const refreshTemplates = async () => {
-  isRefreshing.value = true;
-  try {
-    await store.dispatch('inboxes/syncTemplates', props.inboxId);
-    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_SUCCESS'));
-  } catch (error) {
-    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_ERROR'));
-  } finally {
-    isRefreshing.value = false;
-  }
-};
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="flex gap-2 mb-2.5">
-      <div
-        class="flex flex-1 gap-1 items-center px-2.5 py-0 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus-within:outline-n-brand dark:focus-within:outline-n-brand"
-      >
-        <fluent-icon icon="search" class="text-n-slate-12" size="16" />
-        <input
-          v-model="query"
-          type="search"
-          :placeholder="t('CONTENT_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
-          class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
-        />
-      </div>
-      <button
-        :disabled="isRefreshing"
-        class="flex justify-center items-center w-9 h-9 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 hover:bg-n-alpha-2 dark:hover:bg-n-solid-2 disabled:opacity-50 disabled:cursor-not-allowed"
-        :title="t('CONTENT_TEMPLATES.PICKER.REFRESH_BUTTON')"
-        @click="refreshTemplates"
-      >
-        <Icon
-          icon="i-lucide-refresh-ccw"
-          class="text-n-slate-12 size-4"
-          :class="{ 'animate-spin': isRefreshing }"
-        />
-      </button>
-    </div>
-    <div
-      class="bg-n-background outline-n-container outline outline-1 rounded-lg max-h-[18.75rem] overflow-y-auto p-2.5"
-    >
-      <div
-        v-for="(template, i) in filteredTemplateMessages"
-        :key="template.content_sid"
-      >
-        <button
-          class="block p-2.5 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
-          @click="emit('onSelect', template)"
-        >
-          <div>
-            <div class="flex justify-between items-center mb-2.5">
-              <p class="text-sm">
-                {{ template.friendly_name }}
-              </p>
-              <div class="flex gap-2">
-                <span
-                  class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
-                >
-                  {{ getTemplateType(template) }}
-                </span>
-                <span
-                  class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
-                >
-                  {{
-                    `${t('CONTENT_TEMPLATES.PICKER.LABELS.LANGUAGE')}: ${template.language}`
-                  }}
-                </span>
-              </div>
-            </div>
-
-            <!-- Body -->
-            <div>
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('CONTENT_TEMPLATES.PICKER.BODY') }}
-              </p>
-              <p class="text-sm label-body">
-                {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
-              </p>
-            </div>
-
-            <div class="flex justify-between items-center mt-3">
-              <div>
-                <p class="text-xs font-medium text-n-slate-11">
-                  {{ t('CONTENT_TEMPLATES.PICKER.LABELS.CATEGORY') }}
-                </p>
-                <p class="text-sm">{{ template.category || 'utility' }}</p>
-              </div>
-              <div class="text-xs text-n-slate-11">
-                {{ new Date(template.created_at).toLocaleDateString() }}
-              </div>
-            </div>
-          </div>
-        </button>
-        <hr
-          v-if="i != filteredTemplateMessages.length - 1"
-          :key="`hr-${i}`"
-          class="border-b border-solid border-n-weak my-2.5 mx-auto max-w-[95%]"
-        />
-      </div>
-      <div v-if="!filteredTemplateMessages.length" class="py-8 text-center">
-        <div v-if="query && twilioTemplates.length">
-          <p>
-            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
-            <strong>{{ query }}</strong>
-          </p>
-        </div>
-        <div v-else-if="!twilioTemplates.length" class="space-y-4">
-          <p class="text-n-slate-11">
-            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.label-body {
-  font-family: monospace;
-}
-</style>

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

@@ -3,7 +3,6 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
@@ -83,16 +82,6 @@ const isInboxNameVisible = computed(() => !activeInbox.value);
 
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const callStatus = computed(
-  () => props.chat.additional_attributes?.call_status
-);
-const callDirection = computed(
-  () => props.chat.additional_attributes?.call_direction
-);
-
-const { labelKey: voiceLabelKey, listIconColor: voiceIconColor } =
-  useVoiceCallStatus(callStatus, callDirection);
-
 const inboxId = computed(() => props.chat.inbox_id);
 
 const inbox = computed(() => {
@@ -261,6 +250,7 @@ const deleteConversation = () => {
         :src="currentContact.thumbnail"
         :size="32"
         :status="currentContact.availability_status"
+        :inbox="inbox"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
         hide-offline-status
         rounded-full
@@ -317,30 +307,14 @@ const deleteConversation = () => {
       >
         {{ currentContact.name }}
       </h4>
-      <div
-        v-if="callStatus"
-        key="voice-status-row"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
-      >
-        <span
-          class="inline-block -mt-0.5 align-middle text-[16px] i-ph-phone-incoming"
-          :class="[voiceIconColor]"
-        />
-        <span class="mx-1">
-          {{ $t(voiceLabelKey) }}
-        </span>
-      </div>
       <MessagePreview
-        v-else-if="lastMessageInChat"
-        key="message-preview"
+        v-if="lastMessageInChat"
         :message="lastMessageInChat"
         class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
         :class="messagePreviewClass"
       />
       <p
         v-else
-        key="no-messages"
         class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
         :class="messagePreviewClass"
       >

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

@@ -15,7 +15,7 @@ import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
 import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
-import ReplyBoxBanner from './ReplyBoxBanner.vue';
+import Banner from 'dashboard/components/ui/Banner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import AudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
@@ -27,7 +27,6 @@ import {
   replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
-import ContentTemplates from './ContentTemplates/ContentTemplatesModal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import { trimContent, debounce, getRecipients } from '@chatwoot/utils';
@@ -53,8 +52,8 @@ export default {
     ArticleSearchPopover,
     AttachmentPreview,
     AudioRecorder,
+    Banner,
     CannedResponse,
-    ReplyBoxBanner,
     EmojiInput,
     MessageSignatureMissingAlert,
     ReplyBottomPanel,
@@ -62,7 +61,6 @@ export default {
     ReplyToMessage,
     ReplyTopPanel,
     ResizableTextArea,
-    ContentTemplates,
     WhatsappTemplates,
     WootMessageEditor,
   },
@@ -111,7 +109,6 @@ export default {
       toEmails: '',
       doAutoSaveDraft: () => {},
       showWhatsAppTemplatesModal: false,
-      showContentTemplatesModal: false,
       updateEditorSelectionWith: '',
       undefinedVariableMessage: '',
       showMentions: false,
@@ -158,21 +155,44 @@ export default {
 
       return false;
     },
+    assignedAgent: {
+      get() {
+        return this.currentChat.meta.assignee;
+      },
+      set(agent) {
+        const agentId = agent ? agent.id : 0;
+        this.$store.dispatch('setCurrentChatAssignee', agent);
+        this.$store
+          .dispatch('assignAgent', {
+            conversationId: this.currentChat.id,
+            agentId,
+          })
+          .then(() => {
+            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
+          });
+      },
+    },
+    showSelfAssignBanner() {
+      if (this.message !== '' && !this.isOnPrivateNote) {
+        if (!this.assignedAgent) {
+          return true;
+        }
+        if (this.assignedAgent.id !== this.currentUser.id) {
+          return true;
+        }
+      }
+
+      return false;
+    },
     showWhatsappTemplates() {
       return this.isAWhatsAppCloudChannel && !this.isPrivate;
     },
-    showContentTemplates() {
-      return this.isATwilioWhatsAppChannel && !this.isPrivate;
-    },
     isPrivate() {
       if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
         return this.isOnPrivateNote;
       }
       return true;
     },
-    isReplyRestricted() {
-      return !this.currentChat?.can_reply && !this.isAWhatsAppChannel;
-    },
     inboxId() {
       return this.currentChat.inbox_id;
     },
@@ -639,11 +659,28 @@ export default {
     hideWhatsappTemplatesModal() {
       this.showWhatsAppTemplatesModal = false;
     },
-    openContentTemplateModal() {
-      this.showContentTemplatesModal = true;
-    },
-    hideContentTemplatesModal() {
-      this.showContentTemplatesModal = false;
+    onClickSelfAssign() {
+      const {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        avatar_url,
+      } = this.currentUser;
+      const selfAssign = {
+        account_id,
+        availability_status,
+        available_name,
+        email,
+        id,
+        name,
+        role,
+        thumbnail: avatar_url,
+      };
+      this.assignedAgent = selfAssign;
     },
     confirmOnSendReply() {
       if (this.isReplyButtonDisabled) {
@@ -737,13 +774,6 @@ export default {
       });
       this.hideWhatsappTemplatesModal();
     },
-    async onSendContentTemplateReply(messagePayload) {
-      this.sendMessage({
-        conversationId: this.currentChat.id,
-        ...messagePayload,
-      });
-      this.hideContentTemplatesModal();
-    },
     replaceText(message) {
       if (this.sendWithSignature && !this.private) {
         // if signature is enabled, append it to the message
@@ -763,10 +793,6 @@ export default {
       }, 100);
     },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
-      // Clear attachments when switching between private note and reply modes
-      // This is to prevent from breaking the upload rules
-      if (this.attachedFiles.length > 0) this.attachedFiles = [];
-
       const { can_reply: canReply } = this.currentChat;
       this.$store.dispatch('draftMessages/setReplyEditorMode', {
         mode,
@@ -1069,11 +1095,19 @@ export default {
 </script>
 
 <template>
-  <ReplyBoxBanner :message="message" :is-on-private-note="isOnPrivateNote" />
+  <Banner
+    v-if="showSelfAssignBanner"
+    action-button-variant="ghost"
+    color-scheme="secondary"
+    class="mx-2 mb-2 rounded-lg banner--self-assign"
+    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+    has-action-button
+    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+    @primary-action="onClickSelfAssign"
+  />
   <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
     <ReplyTopPanel
       :mode="replyType"
-      :is-reply-restricted="isReplyRestricted"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :popout-reply-box="popOutReplyBox"
@@ -1179,12 +1213,11 @@ export default {
       :conversation-id="conversationId"
       :enable-multiple-file-upload="enableMultipleFileUpload"
       :enable-whats-app-templates="showWhatsappTemplates"
-      :enable-content-templates="showContentTemplates"
       :inbox="inbox"
       :is-on-private-note="isOnPrivateNote"
       :is-recording-audio="isRecordingAudio"
       :is-send-disabled="isReplyButtonDisabled"
-      :is-note="isPrivate"
+      :mode="replyType"
       :on-file-upload="onFileUpload"
       :on-send="onSendReply"
       :conversation-type="conversationType"
@@ -1202,7 +1235,6 @@ export default {
       :portal-slug="connectedPortalSlug"
       :new-conversation-modal-active="newConversationModalActive"
       @select-whatsapp-template="openWhatsappTemplateModal"
-      @select-content-template="openContentTemplateModal"
       @toggle-editor="toggleRichContentEditor"
       @replace-text="replaceText"
       @toggle-insert-article="toggleInsertArticle"
@@ -1215,14 +1247,6 @@ export default {
       @cancel="hideWhatsappTemplatesModal"
     />
 
-    <ContentTemplates
-      :inbox-id="inbox.id"
-      :show="showContentTemplatesModal"
-      @close="hideContentTemplatesModal"
-      @on-send="onSendContentTemplateReply"
-      @cancel="hideContentTemplatesModal"
-    />
-
     <woot-confirm-modal
       ref="confirmDialog"
       :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
@@ -1236,6 +1260,10 @@ export default {
   @apply mb-0;
 }
 
+.banner--self-assign {
+  @apply py-2;
+}
+
 .attachment-preview-box {
   @apply bg-transparent py-0 px-4;
 }

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

@@ -1,129 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'vuex';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import wootConstants from 'dashboard/constants/globals';
-
-import Banner from 'dashboard/components/ui/Banner.vue';
-
-const props = defineProps({
-  message: {
-    type: String,
-    default: '',
-  },
-  isOnPrivateNote: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const store = useStore();
-const { t } = useI18n();
-
-const currentChat = useMapGetter('getSelectedChat');
-const currentUser = useMapGetter('getCurrentUser');
-
-const assignedAgent = computed({
-  get() {
-    return currentChat.value?.meta?.assignee;
-  },
-  set(agent) {
-    const agentId = agent ? agent.id : 0;
-    store.dispatch('setCurrentChatAssignee', agent);
-    store.dispatch('assignAgent', {
-      conversationId: currentChat.value?.id,
-      agentId,
-    });
-  },
-});
-
-const isUserTyping = computed(
-  () => props.message !== '' && !props.isOnPrivateNote
-);
-const isUnassigned = computed(() => !assignedAgent.value);
-const isAssignedToOtherAgent = computed(
-  () => assignedAgent.value?.id !== currentUser.value?.id
-);
-
-const showSelfAssignBanner = computed(() => {
-  return (
-    isUserTyping.value && (isUnassigned.value || isAssignedToOtherAgent.value)
-  );
-});
-
-const showBotHandoffBanner = computed(
-  () =>
-    isUserTyping.value &&
-    currentChat.value?.status === wootConstants.STATUS_TYPE.PENDING
-);
-
-const botHandoffActionLabel = computed(() => {
-  return assignedAgent.value?.id === currentUser.value?.id
-    ? t('CONVERSATION.BOT_HANDOFF_REOPEN_ACTION')
-    : t('CONVERSATION.BOT_HANDOFF_ACTION');
-});
-
-const selfAssignConversation = async () => {
-  const { avatar_url, ...rest } = currentUser.value || {};
-  assignedAgent.value = { ...rest, thumbnail: avatar_url };
-};
-
-const needsAssignmentToCurrentUser = computed(() => {
-  return isUnassigned.value || isAssignedToOtherAgent.value;
-});
-
-const onClickSelfAssign = async () => {
-  try {
-    await selfAssignConversation();
-    useAlert(t('CONVERSATION.CHANGE_AGENT'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.CHANGE_AGENT_FAILED'));
-  }
-};
-
-const reopenConversation = async () => {
-  await store.dispatch('toggleStatus', {
-    conversationId: currentChat.value?.id,
-    status: wootConstants.STATUS_TYPE.OPEN,
-  });
-};
-
-const onClickBotHandoff = async () => {
-  try {
-    await reopenConversation();
-
-    if (needsAssignmentToCurrentUser.value) {
-      await selfAssignConversation();
-    }
-
-    useAlert(t('CONVERSATION.BOT_HANDOFF_SUCCESS'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.BOT_HANDOFF_ERROR'));
-  }
-};
-</script>
-
-<template>
-  <Banner
-    v-if="showSelfAssignBanner && !showBotHandoffBanner"
-    action-button-variant="ghost"
-    color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg !py-2"
-    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-    has-action-button
-    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-    @primary-action="onClickSelfAssign"
-  />
-  <Banner
-    v-if="showBotHandoffBanner"
-    action-button-variant="ghost"
-    color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg !py-2"
-    :banner-message="$t('CONVERSATION.BOT_HANDOFF_MESSAGE')"
-    has-action-button
-    :action-button-label="botHandoffActionLabel"
-    @primary-action="onClickBotHandoff"
-  />
-</template>

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

@@ -1,10 +1,10 @@
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
-import WhatsAppTemplateReply from './WhatsAppTemplateReply.vue';
+import TemplateParser from './TemplateParser.vue';
 export default {
   components: {
     TemplatesPicker,
-    WhatsAppTemplateReply,
+    TemplateParser,
   },
   props: {
     show: {
@@ -68,7 +68,7 @@ export default {
         :inbox-id="inboxId"
         @on-select="pickTemplate"
       />
-      <WhatsAppTemplateReply
+      <TemplateParser
         v-else
         :template="selectedWaTemplate"
         @reset-template="onResetTemplate"

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

@@ -1,4 +1,13 @@
 <script setup>
+/**
+ * This component handles parsing and sending WhatsApp message templates.
+ * It works as follows:
+ * 1. Displays the template text with variable placeholders.
+ * 2. Generates input fields for each variable in the template.
+ * 3. Validates that all variables are filled before sending.
+ * 4. Replaces placeholders with user-provided values.
+ * 5. Emits events to send the processed message or reset the template.
+ */
 import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 

app/javascript/dashboard/composables/spec/useAutomation.spec.js

@@ -196,7 +196,6 @@ describe('useAutomation', () => {
     automationTypes.conversation_created = { conditions: [] };
     automationTypes.conversation_updated = { conditions: [] };
     automationTypes.conversation_opened = { conditions: [] };
-    automationTypes.conversation_resolved = { conditions: [] };
 
     automationHelper.generateCustomAttributeTypes.mockReturnValue([]);
     automationHelper.generateCustomAttributes.mockReturnValue([]);

app/javascript/dashboard/composables/spec/useFileUpload.spec.js

@@ -4,7 +4,7 @@ import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
+import { MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL } from 'shared/constants/messages';
 
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/composables', () => ({
@@ -13,7 +13,6 @@ vi.mock('dashboard/composables', () => ({
 vi.mock('vue-i18n');
 vi.mock('activestorage');
 vi.mock('shared/helpers/FileHelper');
-vi.mock('@chatwoot/utils');
 
 describe('useFileUpload', () => {
   const mockAttachFile = vi.fn();
@@ -23,11 +22,6 @@ describe('useFileUpload', () => {
     file: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
   };
 
-  const inbox = {
-    channel_type: 'Channel::WhatsApp',
-    medium: 'whatsapp',
-  };
-
   beforeEach(() => {
     vi.clearAllMocks();
 
@@ -43,12 +37,11 @@ describe('useFileUpload', () => {
 
     useI18n.mockReturnValue({ t: mockTranslate });
     checkFileSizeLimit.mockReturnValue(true);
-    getMaxUploadSizeByChannel.mockReturnValue(25); // default max size MB for tests
   });
 
-  it('handles direct file upload when direct uploads enabled', () => {
+  it('should handle direct file upload when enabled', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -59,16 +52,6 @@ describe('useFileUpload', () => {
 
     onFileUpload(mockFile);
 
-    // size rules called with inbox + mime
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalledWith({
-      channelType: inbox.channel_type,
-      medium: inbox.medium,
-      mime: 'image/jpeg',
-    });
-
-    // size check called with max from helper
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 25);
-
     expect(DirectUpload).toHaveBeenCalledWith(
       mockFile.file,
       '/api/v1/accounts/123/conversations/456/direct_uploads',
@@ -80,7 +63,7 @@ describe('useFileUpload', () => {
     });
   });
 
-  it('handles indirect file upload when direct upload disabled', () => {
+  it('should handle indirect file upload when direct upload is disabled', () => {
     useMapGetter.mockImplementation(getter => {
       const getterMap = {
         getCurrentAccountId: { value: '123' },
@@ -92,24 +75,22 @@ describe('useFileUpload', () => {
     });
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
     onFileUpload(mockFile);
 
     expect(DirectUpload).not.toHaveBeenCalled();
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalled();
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 25);
     expect(mockAttachFile).toHaveBeenCalledWith({ file: mockFile });
   });
 
-  it('shows alert when file size exceeds limit', () => {
+  it('should show alert when file size exceeds limit', () => {
     checkFileSizeLimit.mockReturnValue(false);
     mockTranslate.mockReturnValue('File size exceeds limit');
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -119,37 +100,28 @@ describe('useFileUpload', () => {
     expect(mockAttachFile).not.toHaveBeenCalled();
   });
 
-  it('uses per-mime limits from helper', () => {
-    getMaxUploadSizeByChannel.mockImplementation(({ mime }) =>
-      mime.startsWith('image/') ? 10 : 50
-    );
+  it('should use different max file size for Twilio SMS channel', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: true,
       attachFile: mockAttachFile,
     });
 
-    DirectUpload.mockImplementation(() => ({
-      create: cb => cb(null, { signed_id: 'blob' }),
-    }));
-
     onFileUpload(mockFile);
 
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalledWith({
-      channelType: inbox.channel_type,
-      medium: inbox.medium,
-      mime: 'image/jpeg',
-    });
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 10);
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(
+      mockFile,
+      MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+    );
   });
 
-  it('handles direct upload errors', () => {
+  it('should handle direct upload errors', () => {
     const mockError = 'Upload failed';
     DirectUpload.mockImplementation(() => ({
       create: callback => callback(mockError, null),
     }));
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -159,16 +131,15 @@ describe('useFileUpload', () => {
     expect(mockAttachFile).not.toHaveBeenCalled();
   });
 
-  it('does nothing when file is null', () => {
+  it('should do nothing when file is null', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
     onFileUpload(null);
 
     expect(checkFileSizeLimit).not.toHaveBeenCalled();
-    expect(getMaxUploadSizeByChannel).not.toHaveBeenCalled();
     expect(mockAttachFile).not.toHaveBeenCalled();
     expect(useAlert).not.toHaveBeenCalled();
   });

app/javascript/dashboard/composables/spec/useFontSize.spec.js

@@ -43,22 +43,18 @@ describe('useFontSize', () => {
 
   it('returns fontSizeOptions with correct structure', () => {
     const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions.value).toHaveLength(5);
-    expect(fontSizeOptions.value[0]).toHaveProperty('value');
-    expect(fontSizeOptions.value[0]).toHaveProperty('label');
+    expect(fontSizeOptions).toHaveLength(5);
+    expect(fontSizeOptions[0]).toHaveProperty('value');
+    expect(fontSizeOptions[0]).toHaveProperty('label');
 
     // Check specific options
-    expect(
-      fontSizeOptions.value.find(option => option.value === '16px')
-    ).toEqual({
+    expect(fontSizeOptions.find(option => option.value === '16px')).toEqual({
       value: '16px',
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT',
     });
 
-    expect(
-      fontSizeOptions.value.find(option => option.value === '14px')
-    ).toEqual({
+    expect(fontSizeOptions.find(option => option.value === '14px')).toEqual({
       value: '14px',
       label:
         'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
@@ -147,12 +143,12 @@ describe('useFontSize', () => {
     const { fontSizeOptions } = useFontSize();
 
     // Check that translation is applied
-    expect(
-      fontSizeOptions.value.find(option => option.value === '14px').label
-    ).toBe('Smaller');
-    expect(
-      fontSizeOptions.value.find(option => option.value === '16px').label
-    ).toBe('Default');
+    expect(fontSizeOptions.find(option => option.value === '14px').label).toBe(
+      'Smaller'
+    );
+    expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
+      'Default'
+    );
 
     // Verify translation function was called with correct keys
     expect(mockTranslate).toHaveBeenCalledWith(

app/javascript/dashboard/composables/spec/useInbox.spec.js

@@ -1,277 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { defineComponent, h } from 'vue';
-import { createStore } from 'vuex';
-import { mount } from '@vue/test-utils';
-import { useInbox } from '../useInbox';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-vi.mock('dashboard/composables/store');
-vi.mock('dashboard/composables/useTransformKeys');
-
-// Mock the dependencies
-const mockStore = createStore({
-  modules: {
-    conversations: {
-      namespaced: false,
-      getters: {
-        getSelectedChat: () => ({ inbox_id: 1 }),
-      },
-    },
-    inboxes: {
-      namespaced: true,
-      getters: {
-        getInboxById: () => id => {
-          const inboxes = {
-            1: {
-              id: 1,
-              channel_type: INBOX_TYPES.WHATSAPP,
-              provider: 'whatsapp_cloud',
-            },
-            2: { id: 2, channel_type: INBOX_TYPES.FB },
-            3: { id: 3, channel_type: INBOX_TYPES.TWILIO, medium: 'sms' },
-            4: { id: 4, channel_type: INBOX_TYPES.TWILIO, medium: 'whatsapp' },
-            5: {
-              id: 5,
-              channel_type: INBOX_TYPES.EMAIL,
-              provider: 'microsoft',
-            },
-            6: { id: 6, channel_type: INBOX_TYPES.EMAIL, provider: 'google' },
-            7: {
-              id: 7,
-              channel_type: INBOX_TYPES.WHATSAPP,
-              provider: 'default',
-            },
-            8: { id: 8, channel_type: INBOX_TYPES.TELEGRAM },
-            9: { id: 9, channel_type: INBOX_TYPES.LINE },
-            10: { id: 10, channel_type: INBOX_TYPES.WEB },
-            11: { id: 11, channel_type: INBOX_TYPES.API },
-            12: { id: 12, channel_type: INBOX_TYPES.SMS },
-            13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
-            14: { id: 14, channel_type: INBOX_TYPES.VOICE },
-          };
-          return inboxes[id] || null;
-        },
-      },
-    },
-  },
-});
-
-// Mock useMapGetter to return mock store getters
-vi.mock('dashboard/composables/store', () => ({
-  useMapGetter: vi.fn(getter => {
-    if (getter === 'getSelectedChat') {
-      return { value: { inbox_id: 1 } };
-    }
-    if (getter === 'inboxes/getInboxById') {
-      return { value: mockStore.getters['inboxes/getInboxById'] };
-    }
-    return { value: null };
-  }),
-}));
-
-// Mock useCamelCase to return the data as-is for testing
-vi.mock('dashboard/composables/useTransformKeys', () => ({
-  useCamelCase: vi.fn(data => ({
-    ...data,
-    channelType: data?.channel_type,
-  })),
-}));
-
-describe('useInbox', () => {
-  const createTestComponent = inboxId =>
-    defineComponent({
-      setup() {
-        return useInbox(inboxId);
-      },
-      render() {
-        return h('div');
-      },
-    });
-
-  describe('with current chat context (no inboxId provided)', () => {
-    it('identifies WhatsApp Cloud channel correctly', () => {
-      const wrapper = mount(createTestComponent(), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-    });
-
-    it('returns correct inbox object', () => {
-      const wrapper = mount(createTestComponent(), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.inbox).toEqual({
-        id: 1,
-        channel_type: INBOX_TYPES.WHATSAPP,
-        provider: 'whatsapp_cloud',
-        channelType: INBOX_TYPES.WHATSAPP,
-      });
-    });
-  });
-
-  describe('with explicit inboxId provided', () => {
-    it('identifies Facebook inbox correctly', () => {
-      const wrapper = mount(createTestComponent(2), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAFacebookInbox).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-    });
-
-    it('identifies Twilio SMS channel correctly', () => {
-      const wrapper = mount(createTestComponent(3), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isATwilioChannel).toBe(true);
-      expect(wrapper.vm.isASmsInbox).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-    });
-
-    it('identifies Twilio WhatsApp channel correctly', () => {
-      const wrapper = mount(createTestComponent(4), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isATwilioChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
-    });
-
-    it('identifies Microsoft email inbox correctly', () => {
-      const wrapper = mount(createTestComponent(5), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAnEmailChannel).toBe(true);
-      expect(wrapper.vm.isAMicrosoftInbox).toBe(true);
-      expect(wrapper.vm.isAGoogleInbox).toBe(false);
-    });
-
-    it('identifies Google email inbox correctly', () => {
-      const wrapper = mount(createTestComponent(6), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAnEmailChannel).toBe(true);
-      expect(wrapper.vm.isAGoogleInbox).toBe(true);
-      expect(wrapper.vm.isAMicrosoftInbox).toBe(false);
-    });
-
-    it('identifies 360Dialog WhatsApp channel correctly', () => {
-      const wrapper = mount(createTestComponent(7), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.is360DialogWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
-    });
-
-    it('identifies all other channel types correctly', () => {
-      // Test Telegram
-      let wrapper = mount(createTestComponent(8), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isATelegramChannel).toBe(true);
-
-      // Test Line
-      wrapper = mount(createTestComponent(9), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isALineChannel).toBe(true);
-
-      // Test Web Widget
-      wrapper = mount(createTestComponent(10), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
-
-      // Test API
-      wrapper = mount(createTestComponent(11), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAPIInbox).toBe(true);
-
-      // Test SMS
-      wrapper = mount(createTestComponent(12), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isASmsInbox).toBe(true);
-
-      // Test Instagram
-      wrapper = mount(createTestComponent(13), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAnInstagramChannel).toBe(true);
-
-      // Test Voice
-      wrapper = mount(createTestComponent(14), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAVoiceChannel).toBe(true);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles non-existent inbox ID gracefully', () => {
-      const wrapper = mount(createTestComponent(999), {
-        global: { plugins: [mockStore] },
-      });
-
-      // useCamelCase still processes null data, so we get an object with channelType: undefined
-      expect(wrapper.vm.inbox).toEqual({ channelType: undefined });
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-      expect(wrapper.vm.isAFacebookInbox).toBe(false);
-    });
-
-    it('handles inbox with no data correctly', () => {
-      // The mock will return null for non-existent IDs, but useCamelCase processes it
-      const wrapper = mount(createTestComponent(999), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.inbox.channelType).toBeUndefined();
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-      expect(wrapper.vm.isAFacebookInbox).toBe(false);
-      expect(wrapper.vm.isATelegramChannel).toBe(false);
-    });
-  });
-
-  describe('return object completeness', () => {
-    it('returns all expected properties', () => {
-      const wrapper = mount(createTestComponent(1), {
-        global: { plugins: [mockStore] },
-      });
-
-      const expectedProperties = [
-        'inbox',
-        'isAFacebookInbox',
-        'isALineChannel',
-        'isAPIInbox',
-        'isASmsInbox',
-        'isATelegramChannel',
-        'isATwilioChannel',
-        'isAWebWidgetInbox',
-        'isAWhatsAppChannel',
-        'isAMicrosoftInbox',
-        'isAGoogleInbox',
-        'isATwilioWhatsAppChannel',
-        'isAWhatsAppCloudChannel',
-        'is360DialogWhatsAppChannel',
-        'isAnEmailChannel',
-        'isAnInstagramChannel',
-        'isAVoiceChannel',
-      ];
-
-      expectedProperties.forEach(prop => {
-        expect(wrapper.vm).toHaveProperty(prop);
-      });
-    });
-  });
-});

app/javascript/dashboard/composables/useFileUpload.js

@@ -1,19 +1,22 @@
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
-import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 
 /**
  * Composable for handling file uploads in conversations
- * @param {Object} options
- * @param {Object} options.inbox - Current inbox object (has channel_type, medium, etc.)
- * @param {Function} options.attachFile - Callback to handle file attachment
- * @param {boolean} options.isPrivateNote - Whether the upload is for a private note
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
+ * @param {Function} options.attachFile - Callback function to handle file attachment
+ * @returns {Object} File upload methods and utilities
  */
-export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
+export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
   const { t } = useI18n();
 
   const accountId = useMapGetter('getCurrentAccountId');
@@ -21,72 +24,57 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
   const currentChat = useMapGetter('getSelectedChat');
   const globalConfig = useMapGetter('globalConfig/get');
 
-  // helper: compute max upload size for a given file's mime
-  const maxSizeFor = mime => {
-    // Use default file size limit for private notes
-    if (isPrivateNote) {
-      return MAXIMUM_FILE_UPLOAD_SIZE;
-    }
-
-    return getMaxUploadSizeByChannel({
-      channelType: inbox?.channel_type,
-      medium: inbox?.medium, // e.g. 'sms' | 'whatsapp' | etc.
-      mime, // e.g. 'image/png'
-    });
-  };
-
-  const alertOverLimit = maxSizeMB =>
-    useAlert(
-      t('CONVERSATION.FILE_SIZE_LIMIT', {
-        MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxSizeMB,
-      })
-    );
+  const maxFileSize = computed(() =>
+    isATwilioSMSChannel
+      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+      : MAXIMUM_FILE_UPLOAD_SIZE
+  );
 
   const handleDirectFileUpload = file => {
     if (!file) return;
 
-    const mime = file.file?.type || file.type;
-    const maxSizeMB = maxSizeFor(mime);
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      const upload = new DirectUpload(
+        file.file,
+        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
+        {
+          directUploadWillCreateBlobWithXHR: xhr => {
+            xhr.setRequestHeader(
+              'api_access_token',
+              currentUser.value.access_token
+            );
+          },
+        }
+      );
 
-    if (!checkFileSizeLimit(file, maxSizeMB)) {
-      alertOverLimit(maxSizeMB);
-      return;
+      upload.create((error, blob) => {
+        if (error) {
+          useAlert(error);
+        } else {
+          attachFile({ file, blob });
+        }
+      });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
     }
-
-    const upload = new DirectUpload(
-      file.file,
-      `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
-      {
-        directUploadWillCreateBlobWithXHR: xhr => {
-          xhr.setRequestHeader(
-            'api_access_token',
-            currentUser.value.access_token
-          );
-        },
-      }
-    );
-
-    upload.create((error, blob) => {
-      if (error) {
-        useAlert(error);
-      } else {
-        attachFile({ file, blob });
-      }
-    });
   };
 
   const handleIndirectFileUpload = file => {
     if (!file) return;
 
-    const mime = file.file?.type || file.type;
-    const maxSizeMB = maxSizeFor(mime);
-
-    if (!checkFileSizeLimit(file, maxSizeMB)) {
-      alertOverLimit(maxSizeMB);
-      return;
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      attachFile({ file });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
     }
-
-    attachFile({ file });
   };
 
   const onFileUpload = file => {
@@ -97,5 +85,7 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
     }
   };
 
-  return { onFileUpload };
+  return {
+    onFileUpload,
+  };
 };

app/javascript/dashboard/composables/useFontSize.js

@@ -77,8 +77,8 @@ export const useFontSize = () => {
    * Font size options for select dropdown
    * @type {Array<{value: string, label: string}>}
    */
-  const fontSizeOptions = computed(() =>
-    FONT_SIZE_NAMES.map(name => createFontSizeOption(t, name))
+  const fontSizeOptions = FONT_SIZE_NAMES.map(name =>
+    createFontSizeOption(t, name)
   );
 
   /**

app/javascript/dashboard/composables/useInbox.js

@@ -29,24 +29,21 @@ export const INBOX_FEATURE_MAP = {
 };
 
 /**
- * Composable for handling inbox-related functionality
- * @param {string|null} inboxId - Optional inbox ID. If not provided, uses current chat's inbox
- * @returns {Object} An object containing inbox type checking functions
+ * Composable for handling macro-related functionality
+ * @returns {Object} An object containing the getMacroDropdownValues function
  */
-export const useInbox = (inboxId = null) => {
+export const useInbox = () => {
   const currentChat = useMapGetter('getSelectedChat');
   const inboxGetter = useMapGetter('inboxes/getInboxById');
 
   const inbox = computed(() => {
-    const targetInboxId = inboxId || currentChat.value?.inbox_id;
+    const inboxId = currentChat.value.inbox_id;
 
-    if (!targetInboxId) return null;
-
-    return useCamelCase(inboxGetter.value(targetInboxId), { deep: true });
+    return useCamelCase(inboxGetter.value(inboxId), { deep: true });
   });
 
   const channelType = computed(() => {
-    return inbox.value?.channelType;
+    return inbox.value.channelType;
   });
 
   const isAPIInbox = computed(() => {
@@ -78,19 +75,19 @@ export const useInbox = (inboxId = null) => {
   });
 
   const whatsAppAPIProvider = computed(() => {
-    return inbox.value?.provider || '';
+    return inbox.value.provider || '';
   });
 
   const isAMicrosoftInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value?.provider === 'microsoft';
+    return isAnEmailChannel.value && inbox.value.provider === 'microsoft';
   });
 
   const isAGoogleInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value?.provider === 'google';
+    return isAnEmailChannel.value && inbox.value.provider === 'google';
   });
 
   const isATwilioSMSChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value || {};
+    const { medium: medium = '' } = inbox.value;
     return isATwilioChannel.value && medium === 'sms';
   });
 
@@ -99,7 +96,7 @@ export const useInbox = (inboxId = null) => {
   });
 
   const isATwilioWhatsAppChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value || {};
+    const { medium: medium = '' } = inbox.value;
     return isATwilioChannel.value && medium === 'whatsapp';
   });