Merge branch 'develop' into fix/url-sanitizer

Extends liquid template processing to WhatsApp `template_params`,
allowing dynamic variable substitution in template parameter values.

Users can now use liquid variables in WhatsApp template parameters:

```
{
  "template_params": {
    "name": "greet",
    "category": "MARKETING",
    "language": "en",
    "processed_params": {
      "body": {
        "customer_name": "{{contact.name}}",
        "customer_email": "{{contact.email | default: 'no-email@example.com'}}"
      }
    }
  }
}

```

When the message is saved, {{contact.name}} gets replaced with the
actual contact name.

Supported Variables

- {{contact.name}}, {{contact.email}}, {{contact.phone_number}}
- {{agent.name}}, {{agent.first_name}}
- {{account.name}}, {{inbox.name}}
- {{conversation.display_id}}
- Custom attributes: {{contact.custom_attribute.key_name}}
- Liquid filters: {{ contact.email | default: "fallback@example.com" }}

.codeclimate.yml

@@ -1,62 +0,0 @@
-version: '2'
-plugins:
-  rubocop:
-    enabled: false
-    channel: rubocop-0-73
-  eslint:
-    enabled: false
-  csslint:
-    enabled: true
-  scss-lint:
-    enabled: true
-  brakeman:
-    enabled: false
-checks:
-  similar-code:
-    enabled: false
-  method-count:
-    enabled: true
-    config:
-      threshold: 32
-  file-lines:
-    enabled: true
-    config:
-      threshold: 300
-  method-lines:
-    config:
-      threshold: 50
-exclude_patterns:
-  - 'spec/'
-  - '**/specs/**/**'
-  - '**/spec/**/**'
-  - 'db/*'
-  - 'bin/**/*'
-  - 'db/**/*'
-  - 'config/**/*'
-  - 'public/**/*'
-  - 'vendor/**/*'
-  - 'node_modules/**/*'
-  - 'lib/tasks/auto_annotate_models.rake'
-  - 'app/test-matchers.js'
-  - 'docs/*'
-  - '**/*.md'
-  - '**/*.yml'
-  - 'app/javascript/dashboard/i18n/locale'
-  - '**/*.stories.js'
-  - 'stories/'
-  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js'
-  - 'app/javascript/shared/constants/countries.js'
-  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js'
-  - 'app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js'
-  - 'app/javascript/dashboard/routes/dashboard/settings/automation/constants.js'
-  - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'
-  - 'app/javascript/dashboard/routes/dashboard/settings/reports/constants.js'
-  - 'app/javascript/dashboard/store/captain/storeFactory.js'
-  - 'app/javascript/dashboard/i18n/index.js'
-  - 'app/javascript/widget/i18n/index.js'
-  - 'app/javascript/survey/i18n/index.js'
-  - 'app/javascript/shared/constants/locales.js'
-  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
-  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
-  - '**/fixtures/**'
-  - '**/*/fixtures.js'

.github/workflows/auto-assign-pr.yml

@@ -0,0 +1,28 @@
+name: Auto-assign PR to Author
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Auto-assign PR to author
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const pull_number = context.payload.pull_request.number;
+            const author = context.payload.pull_request.user.login;
+            
+            await github.rest.issues.addAssignees({
+              owner,
+              repo,
+              issue_number: pull_number,
+              assignees: [author]
+            });
+            
+            console.log(`Assigned PR #${pull_number} to ${author}`);

.gitignore

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

.qlty/.gitignore

@@ -0,0 +1,7 @@
+*
+!configs
+!configs/**
+!hooks
+!hooks/**
+!qlty.toml
+!.gitignore

.qlty/configs/.hadolint.yaml

@@ -0,0 +1,2 @@
+ignored:
+  - DL3008

.qlty/configs/.shellcheckrc

@@ -0,0 +1 @@
+source-path=SCRIPTDIR

.qlty/configs/.yamllint.yaml

@@ -0,0 +1,8 @@
+rules:
+  document-start: disable
+  quoted-strings:
+    required: only-when-needed
+    extra-allowed: ["{|}"]
+  key-duplicates: {}
+  octal-values:
+    forbid-implicit-octal: true

.qlty/qlty.toml

@@ -0,0 +1,84 @@
+# This file was automatically generated by `qlty init`.
+# You can modify it to suit your needs.
+# We recommend you to commit this file to your repository.
+#
+# This configuration is used by both Qlty CLI and Qlty Cloud.
+#
+#     Qlty CLI -- Code quality toolkit for developers
+#     Qlty Cloud -- Fully automated Code Health Platform
+#
+# Try Qlty Cloud: https://qlty.sh
+#
+# For a guide to configuration, visit https://qlty.sh/d/config
+# Or for a full reference, visit https://qlty.sh/d/qlty-toml
+config_version = "0"
+
+exclude_patterns = [
+  "*_min.*",
+  "*-min.*",
+  "*.min.*",
+  "**/.yarn/**",
+  "**/*.d.ts",
+  "**/assets/**",
+  "**/bower_components/**",
+  "**/build/**",
+  "**/cache/**",
+  "**/config/**",
+  "**/db/**",
+  "**/deps/**",
+  "**/dist/**",
+  "**/extern/**",
+  "**/external/**",
+  "**/generated/**",
+  "**/Godeps/**",
+  "**/gradlew/**",
+  "**/mvnw/**",
+  "**/node_modules/**",
+  "**/protos/**",
+  "**/seed/**",
+  "**/target/**",
+  "**/templates/**",
+  "**/testdata/**",
+  "**/vendor/**", "spec/", "**/specs/**/**", "**/spec/**/**", "db/*", "bin/**/*", "db/**/*", "config/**/*", "public/**/*", "vendor/**/*", "node_modules/**/*", "lib/tasks/auto_annotate_models.rake", "app/test-matchers.js", "docs/*", "**/*.md", "**/*.yml", "app/javascript/dashboard/i18n/locale", "**/*.stories.js", "stories/", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js", "app/javascript/shared/constants/countries.js", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js", "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js", "app/javascript/dashboard/routes/dashboard/settings/automation/constants.js", "app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js", "app/javascript/dashboard/routes/dashboard/settings/reports/constants.js", "app/javascript/dashboard/store/captain/storeFactory.js", "app/javascript/dashboard/i18n/index.js", "app/javascript/widget/i18n/index.js", "app/javascript/survey/i18n/index.js", "app/javascript/shared/constants/locales.js", "app/javascript/dashboard/helper/specs/macrosFixtures.js", "app/javascript/dashboard/routes/dashboard/settings/macros/constants.js", "**/fixtures/**", "**/*/fixtures.js",
+]
+
+test_patterns = [
+  "**/test/**",
+  "**/spec/**",
+  "**/*.test.*",
+  "**/*.spec.*",
+  "**/*_test.*",
+  "**/*_spec.*",
+  "**/test_*.*",
+  "**/spec_*.*",
+]
+
+[smells]
+mode = "comment"
+
+[smells.boolean_logic]
+threshold = 4
+
+[smells.file_complexity]
+threshold = 66
+enabled = true
+
+[smells.return_statements]
+threshold = 4
+
+[smells.nested_control_flow]
+threshold = 4
+
+[smells.function_parameters]
+threshold = 4
+
+[smells.function_complexity]
+threshold = 5
+
+[smells.duplication]
+enabled = true
+threshold = 20
+
+[[source]]
+name = "default"
+default = true

.rubocop.yml

@@ -283,7 +283,7 @@ Rails/RedundantActiveRecordAllMethod:
   Enabled: false
 
 Layout/TrailingEmptyLines:
-  Enabled: false
+  Enabled: true
 
 Style/SafeNavigationChainLength:
   Enabled: false

AGENTS.md

@@ -55,4 +55,21 @@
 
 ## Ruby Best Practices
 
-- Use compact `module/class` definitions; avoid nested styles
+- 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.

Gemfile

@@ -108,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 'ddtrace', require: false
+gem 'datadog', '~> 2.0', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
@@ -121,6 +121,8 @@ gem 'sentry-sidekiq', '>= 5.19.0', require: false
 gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
+# for sidekiq healthcheck
+gem 'sidekiq_alive'
 
 ##-- Push notification service --##
 gem 'fcm'
@@ -177,6 +179,10 @@ 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 'shopify_api'
 

Gemfile.lock

@@ -25,35 +25,35 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actioncable (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    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)
+    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)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    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)
+    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)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.5.1)
-      actionview (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionpack (7.1.5.2)
+      actionview (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
       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.1)
-      actionpack (= 7.1.5.1)
-      activerecord (= 7.1.5.1)
-      activestorage (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    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)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionview (7.1.5.2)
+      activesupport (= 7.1.5.2)
       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.1)
-      activesupport (= 7.1.5.1)
+    activejob (7.1.5.2)
+      activesupport (= 7.1.5.2)
       globalid (>= 0.3.6)
-    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)
+    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)
       timeout (>= 0.4.0)
     activerecord-import (2.1.0)
       activerecord (>= 4.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)
+    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)
       marcel (~> 1.0)
-    activesupport (7.1.5.1)
+    activesupport (7.1.5.2)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -126,6 +126,8 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
+    ai-agents (0.4.3)
+      ruby_llm (~> 1.3)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -153,10 +155,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.3.0)
     bcrypt (3.1.20)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -192,10 +194,14 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    date (3.4.1)
-    ddtrace (0.48.0)
-      ffi (~> 1.0)
+    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)
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -359,6 +365,7 @@ GEM
     grpc (1.72.0-x86_64-linux)
       google-protobuf (>= 3.25, < 5.0)
       googleapis-common-protos-types (~> 1.0)
+    gserver (0.0.1)
     haikunator (1.1.1)
     hairtrigger (1.0.0)
       activerecord (>= 6.0, < 8)
@@ -443,6 +450,16 @@ 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)
@@ -477,7 +494,7 @@ GEM
     mime-types-data (3.2023.0218.1)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
-    mini_portile2 (2.8.8)
+    mini_portile2 (2.8.9)
     minitest (5.25.5)
     mock_redis (0.36.0)
       ruby2_keywords
@@ -508,14 +525,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.8)
+    nokogiri (1.18.9)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.8-arm64-darwin)
+    nokogiri (1.18.9-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-darwin)
+    nokogiri (1.18.9-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-gnu)
+    nokogiri (1.18.9-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -598,20 +615,20 @@ GEM
     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)
+    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)
       bundler (>= 1.15.0)
-      railties (= 7.1.5.1)
+      railties (= 7.1.5.2)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -619,9 +636,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.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    railties (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
       irb
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -719,6 +736,16 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
+    ruby_llm (1.5.1)
+      base64
+      event_stream_parser (~> 1)
+      faraday (>= 1.10.0)
+      faraday-multipart (>= 1)
+      faraday-net_http (>= 1)
+      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)
@@ -776,6 +803,9 @@ GEM
       fugit (~> 1.8)
       globalid (>= 1.0.1)
       sidekiq (>= 6)
+    sidekiq_alive (2.5.0)
+      gserver (~> 0.0.1)
+      sidekiq (>= 5, < 9)
     signet (0.17.0)
       addressable (~> 2.8)
       faraday (>= 0.17.5, < 3.a)
@@ -814,7 +844,7 @@ GEM
     stripe (8.5.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.4.0)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
@@ -897,6 +927,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)
   annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -913,7 +944,7 @@ DEPENDENCIES
   commonmarker
   csv-safe
   database_cleaner
-  ddtrace
+  datadog (~> 2.0)
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
@@ -990,6 +1021,7 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-openai
+  ruby_llm-schema
   scout_apm
   scss_lint
   seed_dump
@@ -1000,6 +1032,7 @@ DEPENDENCIES
   shoulda-matchers
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
+  sidekiq_alive
   simplecov (= 0.17.1)
   slack-ruby-client (~> 2.5.2)
   spring

VERSION_CW

@@ -1 +1 @@
-3.13.0
+4.4.0

VERSION_CWCTL

@@ -1 +1 @@
-3.2.0
+3.4.3

app/actions/contact_identify_action.rb

@@ -6,6 +6,7 @@
 # We don't want to update the name of the identified original contact.
 
 class ContactIdentifyAction
+  include UrlHelper
   pattr_initialize [:contact!, :params!, { retain_original_contact_name: false, discard_invalid_attrs: false }]
 
   def perform
@@ -104,7 +105,14 @@ class ContactIdentifyAction
     # TODO: replace reject { |_k, v| v.blank? } with compact_blank when rails is upgraded
     @contact.discard_invalid_attrs if discard_invalid_attrs
     @contact.save!
-    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present? && !@contact.avatar.attached?
+    enqueue_avatar_job
+  end
+
+  def enqueue_avatar_job
+    return unless params[:avatar_url].present? && !@contact.avatar.attached?
+    return unless url_valid?(params[:avatar_url])
+
+    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url])
   end
 
   def merge_contact(base_contact, merge_contact)

app/builders/contact_inbox_builder.rb

@@ -21,8 +21,6 @@ class ContactInboxBuilder
       email_source_id
     when 'Channel::Sms'
       phone_source_id
-    when 'Channel::Voice'
-      phone_source_id # Voice uses phone number as source ID
     when 'Channel::Api', 'Channel::WebWidget'
       SecureRandom.uuid
     else
@@ -37,12 +35,7 @@ class ContactInboxBuilder
   end
 
   def phone_source_id
-    unless @contact.phone_number.present?
-      # For voice channels, we'll create a fallback source ID if phone number is missing
-      return SecureRandom.uuid if @inbox.channel_type == 'Channel::Voice'
-
-      raise ActionController::ParameterMissing, 'contact phone number'
-    end
+    raise ActionController::ParameterMissing, 'contact phone number' unless @contact.phone_number
 
     @contact.phone_number
   end
@@ -107,6 +100,6 @@ class ContactInboxBuilder
   end
 
   def allowed_channels?
-    @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp? || @inbox.channel_type == 'Channel::Voice'
+    @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp?
   end
 end

app/builders/messages/message_builder.rb

@@ -7,7 +7,7 @@ class Messages::MessageBuilder
     @private = params[:private] || false
     @conversation = conversation
     @user = user
-    @message_type = params[:message_type].to_s || 'outgoing'
+    @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
     @automation_rule = content_attributes&.dig(:automation_rule_id)
     return unless params.instance_of?(ActionController::Parameters)
@@ -33,6 +33,11 @@ class Messages::MessageBuilder
   def content_attributes
     params = convert_to_hash(@params)
     content_attributes = params.fetch(:content_attributes, {})
+
+    return parse_json(content_attributes) if content_attributes.is_a?(String)
+    return content_attributes if content_attributes.is_a?(Hash)
+
+    {}
   end
 
   # Converts the given object to a hash.
@@ -100,9 +105,8 @@ class Messages::MessageBuilder
   end
 
   def message_type
-    # Allow incoming messages in both API and Voice channels
-    if !['Channel::Api', 'Channel::Voice'].include?(@conversation.inbox.channel_type) && @message_type == 'incoming'
-      raise StandardError, 'Incoming messages are only allowed in Api and Voice inboxes'
+    if @conversation.inbox.channel_type != 'Channel::Api' && @message_type == 'incoming'
+      raise StandardError, 'Incoming messages are only allowed in Api inboxes'
     end
 
     @message_type
@@ -135,7 +139,7 @@ class Messages::MessageBuilder
   end
 
   def message_params
-    message_attrs = {
+    {
       account_id: @conversation.account_id,
       inbox_id: @conversation.inbox_id,
       message_type: message_type,
@@ -148,12 +152,5 @@ class Messages::MessageBuilder
       echo_id: @params[:echo_id],
       source_id: @params[:source_id]
     }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)
-    
-    # Directly add content_attributes from params if present
-    if @params[:content_attributes].present?
-      message_attrs[:content_attributes] = content_attributes
-    end
-    
-    message_attrs
   end
-end
+end

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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,36 @@
+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/callbacks_controller.rb

@@ -30,7 +30,14 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
   end
 
   def facebook_pages
-    @page_details = mark_already_existing_facebook_pages(fb_object.get_connections('me', 'accounts'))
+    pages = []
+    fb_pages = fb_object.get_connections('me', 'accounts')
+    pages.concat(fb_pages)
+    while fb_pages.respond_to?(:next_page) && (next_page = fb_pages.next_page)
+      fb_pages = next_page
+      pages.concat(fb_pages)
+    end
+    @page_details = mark_already_existing_facebook_pages(pages)
   end
 
   def set_instagram_id(page_access_token, facebook_channel)

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

@@ -29,6 +29,6 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController
 
   def campaign_params
     params.require(:campaign).permit(:title, :description, :message, :enabled, :trigger_only_during_business_hours, :inbox_id, :sender_id,
-                                     :scheduled_at, audience: [:type, :id], trigger_rules: {})
+                                     :scheduled_at, audience: [:type, :id], trigger_rules: {}, template_params: {})
   end
 end

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

@@ -1,152 +0,0 @@
-class Api::V1::Accounts::Channels::Voice::WebhooksController < Api::V1::Accounts::BaseController
-  skip_before_action :authenticate_user!, :set_current_user, only: [:incoming, :conference_status]
-  protect_from_forgery with: :null_session, only: [:incoming, :conference_status]
-  before_action :validate_twilio_signature, only: [:incoming]
-  before_action :handle_options_request, only: [:incoming, :conference_status]
-  
-  # Handle CORS preflight OPTIONS requests
-  def handle_options_request
-    if request.method == "OPTIONS"
-      set_cors_headers
-      head :ok
-      return true
-    end
-    false
-  end
-  
-  def set_cors_headers
-    headers['Access-Control-Allow-Origin'] = '*'
-    headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'
-    headers['Access-Control-Allow-Headers'] = 'Content-Type, X-Twilio-Signature'
-    headers['Access-Control-Max-Age'] = '86400' # 24 hours
-  end
-
-  # Handle incoming calls from Twilio
-  def incoming
-    # Set CORS headers first to ensure they're included
-    set_cors_headers
-    
-    # Log basic request info
-    Rails.logger.info("🔔 INCOMING CALL WEBHOOK: CallSid=#{params['CallSid']} From=#{params['From']} To=#{params['To']}")
-    
-    # Process incoming call using service
-    begin
-      # Ensure account is set properly
-      if !Current.account && params[:account_id].present?
-        Current.account = Account.find(params[:account_id])
-        Rails.logger.info("👑 Set Current.account to #{Current.account.id}")
-      end
-      
-      # Validate required parameters
-      validate_incoming_params
-      
-      # Process the call
-      service = Voice::IncomingCallService.new(
-        account: Current.account, 
-        params: params.to_unsafe_h.merge(host_with_port: request.host_with_port)
-      )
-      twiml_response = service.process
-      
-      # Return TwiML response
-      Rails.logger.info("✅ INCOMING CALL: Successfully processed")
-      render xml: twiml_response
-    rescue StandardError => e
-      # Log the error with detailed information
-      Rails.logger.error("❌ INCOMING CALL ERROR: #{e.message}")
-      Rails.logger.error("❌ BACKTRACE: #{e.backtrace[0..5].join("\n")}")
-      
-      # Return friendly error message to caller
-      render_error("We're sorry, but we're experiencing technical difficulties. Please try your call again later.")
-    end
-  end
-
-  # Handle conference status updates
-  def conference_status
-    # Set CORS headers first to ensure they're always included
-    set_cors_headers
-    
-    # Return immediately for OPTIONS requests
-    if request.method == "OPTIONS"
-      return head :ok
-    end
-    
-    # Log basic request info
-    Rails.logger.info("🎧 CONFERENCE STATUS WEBHOOK: ConferenceSid=#{params['ConferenceSid']} Event=#{params['StatusCallbackEvent']}")
-    
-    # Process conference status updates using service
-    begin
-      # Set account for local development if needed
-      if !Current.account && params[:account_id].present?
-        Current.account = Account.find(params[:account_id])
-        Rails.logger.info("👑 Set Current.account to #{Current.account.id}")
-      end
-      
-      # Validate required parameters
-      if params['ConferenceSid'].blank? && params['CallSid'].blank?
-        Rails.logger.error("❌ MISSING REQUIRED PARAMS: Need either ConferenceSid or CallSid")
-      end
-      
-      # Use service to process conference status
-      service = Voice::ConferenceStatusService.new(account: Current.account, params: params)
-      service.process
-      
-      Rails.logger.info("✅ CONFERENCE STATUS: Successfully processed")
-    rescue StandardError => e
-      # Log errors but don't affect the response
-      Rails.logger.error("❌ CONFERENCE STATUS ERROR: #{e.message}")
-      Rails.logger.error("❌ BACKTRACE: #{e.backtrace[0..5].join("\n")}")
-    end
-    
-    # Always return a successful response for Twilio
-    head :ok
-  end
-
-  private
-
-  def validate_incoming_params
-    if params['CallSid'].blank?
-      raise "Missing required parameter: CallSid"
-    end
-    
-    if params['From'].blank?
-      raise "Missing required parameter: From"
-    end
-    
-    if params['To'].blank?
-      raise "Missing required parameter: To"
-    end
-    
-    if Current.account.nil?
-      raise "Current account not set"
-    end
-  end
-
-  def validate_twilio_signature
-    begin
-      validator = Voice::TwilioValidatorService.new(
-        account: Current.account,
-        params: params,
-        request: request
-      )
-      
-      if !validator.valid?
-        Rails.logger.error("❌ INVALID TWILIO SIGNATURE")
-        render_error('Invalid Twilio signature')
-        return false
-      end
-      
-      return true
-    rescue StandardError => e
-      Rails.logger.error("❌ TWILIO VALIDATION ERROR: #{e.message}")
-      render_error('Error validating Twilio request')
-      return false
-    end
-  end
-
-  def render_error(message)
-    response = Twilio::TwiML::VoiceResponse.new
-    response.say(message: message)
-    response.hangup
-    render xml: response.to_s
-  end
-end

app/controllers/api/v1/accounts/contacts/calls_controller.rb

@@ -1,39 +0,0 @@
-class Api::V1::Accounts::Contacts::CallsController < Api::V1::Accounts::BaseController
-  before_action :fetch_contact
-
-  def create
-    # Validate that contact has a phone number
-    if @contact.phone_number.blank?
-      render json: { error: 'Contact has no phone number' }, status: :unprocessable_entity
-      return
-    end
-
-    begin
-      # Use the outgoing call service to handle the entire process
-      service = Voice::OutgoingCallService.new(
-        account: Current.account,
-        contact: @contact,
-        user: Current.user
-      )
-      
-      # Process the call - this handles all the steps
-      conversation = service.process
-      
-      # Assign to @conversation so jbuilder template can access it
-      @conversation = conversation
-
-      # Use the conversation jbuilder template to ensure consistent representation
-      # This will ensure only display_id is used as the id, not the internal database id
-      render 'api/v1/accounts/conversations/show'
-    rescue StandardError => e
-      Rails.logger.error("Error initiating call: #{e.message}")
-      render json: { error: e.message }, status: :unprocessable_entity
-    end
-  end
-
-  private
-
-  def fetch_contact
-    @contact = Current.account.contacts.find(params[:contact_id])
-  end
-end

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

@@ -122,7 +122,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def resolved_contacts
     return @resolved_contacts if @resolved_contacts
 
-    @resolved_contacts = Current.account.contacts.resolved_contacts
+    @resolved_contacts = Current.account.contacts.resolved_contacts(use_crm_v2: Current.account.feature_enabled?('crm_v2'))
 
     @resolved_contacts = @resolved_contacts.tagged_with(params[:labels], any: true) if params[:labels].present?
     @resolved_contacts

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

@@ -0,0 +1,46 @@
+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

@@ -69,6 +69,17 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
   end
 
+  def sync_templates
+    unless @inbox.channel.is_a?(Channel::Whatsapp)
+      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
+    end
+
+    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 }
+  end
+
   private
 
   def fetch_inbox
@@ -163,8 +174,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
       'line' => Channel::Line,
       'telegram' => Channel::Telegram,
       'whatsapp' => Channel::Whatsapp,
-      'sms' => Channel::Sms,
-      'voice' => Channel::Voice
+      'sms' => Channel::Sms
     }[permitted_params[:channel][:type]]
   end
 

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

@@ -11,4 +11,4 @@ class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::Bas
   def fetch_hook
     @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'notion')
   end
-end
+end

app/controllers/api/v1/accounts/notion/authorizations_controller.rb

@@ -18,4 +18,4 @@ class Api::V1::Accounts::Notion::AuthorizationsController < Api::V1::Accounts::O
       render json: { success: false }, status: :unprocessable_entity
     end
   end
-end
+end

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

@@ -26,9 +26,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
-    rescue StandardError => e
-      Rails.logger.error e
-      render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
+    rescue ActiveRecord::RecordInvalid => e
+      render_record_invalid(e)
     end
   end
 
@@ -47,6 +46,20 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def send_instructions
+    email = permitted_params[:email]
+    return render_could_not_create_error(I18n.t('portals.send_instructions.email_required')) if email.blank?
+    return render_could_not_create_error(I18n.t('portals.send_instructions.invalid_email_format')) unless valid_email?(email)
+    return render_could_not_create_error(I18n.t('portals.send_instructions.custom_domain_not_configured')) if @portal.custom_domain.blank?
+
+    PortalInstructionsMailer.send_cname_instructions(
+      portal: @portal,
+      recipient_email: email
+    ).deliver_later
+
+    render json: { message: I18n.t('portals.send_instructions.instructions_sent_successfully') }, status: :ok
+  end
+
   def process_attached_logo
     blob_id = params[:blob_id]
     blob = ActiveStorage::Blob.find_by(id: blob_id)
@@ -60,12 +73,12 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def permitted_params
-    params.permit(:id)
+    params.permit(:id, :email)
   end
 
   def portal_params
     params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
     )
   end
@@ -88,4 +101,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     domain = URI.parse(@portal.custom_domain)
     domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
   end
+
+  def valid_email?(email)
+    ValidEmail2::Address.new(email).valid?
+  end
 end
+
+Api::V1::Accounts::PortalsController.prepend_mod_with('Api::V1::Accounts::PortalsController')

app/controllers/api/v1/accounts/voice/tokens_controller.rb

@@ -1,80 +0,0 @@
-class Api::V1::Accounts::Voice::TokensController < Api::V1::Accounts::BaseController
-  before_action :set_voice_inbox
-
-  def create
-    render json: build_response
-  rescue StandardError => e
-    Rails.logger.error("Voice::TokensController#create: #{e.class} - #{e.message}\n#{e.backtrace.first(5).join("\n")}")
-    render json: { error: 'Failed to generate token', details: e.message }, status: :internal_server_error
-  end
-
-  private
-
-  def build_response
-    {
-      token:          twilio_token.to_jwt,
-      identity:       client_identity,
-      voice_enabled:  true,
-      account_sid:    twilio_config[:account_sid],
-      agent_id:       Current.user.id,
-      account_id:     Current.account.id,
-      inbox_id:       @voice_inbox.id,
-      phone_number:   twilio_config[:phone_number],
-      twiml_endpoint: twilio_config[:twiml_url],
-      has_twiml_app:  twilio_config[:outgoing_app_sid].present?
-    }
-  end
-
-  def twilio_token
-    Twilio::JWT::AccessToken.new(
-      *twilio_credentials,
-      identity: client_identity,
-      ttl: 1.hour.to_i
-    ).tap { |t| t.add_grant(voice_grant) }
-  end
-
-  def twilio_credentials
-    twilio_config.values_at(:account_sid, :api_key_sid, :api_key_secret)
-  end
-
-  def voice_grant
-    Twilio::JWT::AccessToken::VoiceGrant.new.tap do |grant|
-      grant.incoming_allow = true
-      grant.outgoing_application_sid    = twilio_config[:outgoing_app_sid]
-      grant.outgoing_application_params = outgoing_params
-    end
-  end
-
-  def outgoing_params
-    {
-      account_id:  Current.account.id,
-      agent_id:    Current.user.id,
-      identity:    client_identity,
-      client_name: client_identity,
-      accountSid:  twilio_config[:account_sid],
-      is_agent:    'true'
-    }
-  end
-
-  def twilio_config
-    @twilio_config ||= begin
-      cfg = @voice_inbox.channel.provider_config_hash || {}
-      {
-        account_sid:      cfg['account_sid'],
-        api_key_sid:      cfg['api_key_sid'],
-        api_key_secret:   cfg['api_key_secret'],
-        outgoing_app_sid: cfg['outgoing_application_sid'],
-        phone_number:     @voice_inbox.channel.phone_number,
-        twiml_url:        "#{ENV.fetch('FRONTEND_URL', '')}/api/v1/accounts/#{Current.account.id}/voice/twiml_for_client"
-      }.with_indifferent_access.merge(client_identity:)
-    end
-  end
-
-  def client_identity
-    @client_identity ||= "agent-#{Current.user.id}-account-#{Current.account.id}"
-  end
-
-  def set_voice_inbox
-    @voice_inbox = Current.account.inboxes.find(params[:inbox_id])
-  end
-end

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

@@ -1,230 +0,0 @@
-require 'twilio-ruby'
-
-class Api::V1::Accounts::VoiceController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: %i[end_call join_call reject_call]
-  skip_before_action :authenticate_user!, only: :twiml_for_client
-  protect_from_forgery with: :null_session, only: :twiml_for_client
-
-  before_action :render_options, if: -> { request.options? }
-  after_action  :set_cors_headers, if: -> { action_name == 'twiml_for_client' }
-
-  # ---------- PUBLIC ACTIONS --------------------------------------------------
-
-  def end_call
-    call_sid = params[:call_sid] || convo_attr('call_sid')
-    return render_not_found('active call') unless call_sid
-
-    twilio_client.calls(call_sid).update(status: 'completed') if in_progress?(call_sid)
-
-    Voice::CallStatus::Manager.new(conversation: @conversation,
-                                   call_sid:    call_sid,
-                                   provider:    :twilio)
-                              .process_status_update('completed', nil, false, "Call ended by #{current_user.name}")
-
-    broadcast_status(call_sid, 'completed')
-    render_success('Call successfully ended')
-  rescue StandardError => e
-    render_error("Failed to end call: #{e.message}")
-  end
-
-  def join_call
-    call_sid = params[:call_sid] || convo_attr('call_sid')
-    outbound  = convo_attr('requires_agent_join') == true
-
-    return render_not_found('active call') unless call_sid || outbound
-
-    conference_sid = convo_attr('conference_sid') || create_conference_sid!
-    update_join_metadata!(call_sid)
-    broadcast_status(call_sid, 'in-progress')
-
-    render json: {
-      status:         'success',
-      message:        'Agent joining call via WebRTC',
-      conference_sid: conference_sid,
-      using_webrtc:   true,
-      conversation_id: @conversation.display_id,
-      account_id:     Current.account.id
-    }
-  rescue StandardError => e
-    render_error("Failed to join call: #{e.message}")
-  end
-
-  def reject_call
-    call_sid = params[:call_sid] || convo_attr('call_sid')
-    return render_not_found('active call') unless call_sid
-
-    @conversation.update!(additional_attributes: convo_attrs.merge(
-      'agent_rejected' => true,
-      'rejected_at'    => Time.current.to_i,
-      'rejected_by'    => user_meta
-    ))
-
-    Voice::CallStatus::Manager.new(conversation: @conversation,
-                                   call_sid:    call_sid,
-                                   provider:    :twilio)
-                              .create_activity_message("#{current_user.name} declined to answer",
-                                                       rejected_by: current_user.name,
-                                                       rejected_at: Time.current.to_i)
-
-    render_success('Call rejected by agent')
-  end
-
-  def call_status
-    call_sid = params[:call_sid]
-    return render_not_found('active call') unless call_sid
-
-    call = twilio_client.calls(call_sid).fetch
-    render json: call.slice(:status, :duration, :direction, :from, :to, :start_time, :end_time)
-  rescue StandardError => e
-    render_error("Failed to fetch call status: #{e.message}")
-  end
-
-  # TwiML for agent WebRTC dial‑in
-  def twiml_for_client
-    to          = params[:To] || params[:to]
-    return render_twiml_error('Missing conference ID parameter') if to.blank?
-
-    render xml: build_twiml(to), content_type: 'text/xml'
-  rescue StandardError => e
-    render_twiml_error(e.message)
-  end
-
-  # ---------- PRIVATE ---------------------------------------------------------
-
-  private
-
-  # ---- Helpers ---------------------------------------------------------------
-
-  def render_options
-    head :ok
-  end
-
-  def set_cors_headers
-    headers['Content-Type']                 ||= 'text/xml; charset=utf-8'
-    headers['Access-Control-Allow-Origin']   = '*'
-    headers['Access-Control-Allow-Methods']  = 'POST, GET, OPTIONS'
-    headers['Access-Control-Allow-Headers']  = 'Content-Type, X-Twilio-Signature'
-    headers['Access-Control-Max-Age']        = '86400'
-  end
-
-  def render_success(msg) = render json: { status: 'success', message: msg }
-  def render_not_found(resource) = render json: { error: "No #{resource} found" }, status: :not_found
-  def render_error(msg) = render json: { error: msg }, status: :internal_server_error
-
-  def fetch_conversation
-    @conversation = Current.account.conversations.find_by(display_id: params[:conversation_id])
-  end
-
-  def twilio_client
-    @twilio_client ||= begin
-      cfg = @conversation.inbox.channel.provider_config_hash
-      Twilio::REST::Client.new(cfg['account_sid'], cfg['auth_token'])
-    end
-  end
-
-  def in_progress?(call_sid)
-    %w[in-progress ringing].include?(twilio_client.calls(call_sid).fetch.status)
-  end
-
-  def convo_attrs
-    @conversation.additional_attributes || {}
-  end
-
-  def convo_attr(key)
-    convo_attrs[key]
-  end
-
-  def user_meta
-    { id: current_user.id, name: current_user.name }
-  end
-
-  def create_conference_sid!
-    sid = "conf_account_#{Current.account.id}_conv_#{@conversation.display_id}"
-    @conversation.update!(additional_attributes: convo_attrs.merge('conference_sid' => sid))
-    sid
-  end
-
-  def update_join_metadata!(call_sid)
-    @conversation.update!(additional_attributes: convo_attrs.merge(
-      'agent_joined' => true,
-      'joined_at'    => Time.current.to_i,
-      'joined_by'    => user_meta,
-      'call_status'  => 'in-progress'
-    ))
-
-    Voice::CallStatus::Manager.new(conversation: @conversation,
-                                   call_sid:    call_sid,
-                                   provider:    :twilio)
-                              .process_status_update('in-progress', nil, false, "#{current_user.name} joined the call")
-  end
-
-  def broadcast_status(call_sid, status)
-    ActionCable.server.broadcast "account_#{@conversation.account_id}", {
-      event_name: 'call_status_changed',
-      data: {
-        call_sid:        call_sid,
-        status:          status,
-        conversation_id: @conversation.display_id,
-        inbox_id:        @conversation.inbox_id,
-        timestamp:       Time.current.to_i
-      }
-    }
-  end
-
-  # ---- TwiML -----------------------------------------------------------------
-
-  def build_twiml(conference_name)
-    # For agent legs, we need to add transcription too
-    account_id = params[:account_id] || Current.account&.id
-    agent_id = params[:agent_id] || current_user&.id
-    transcription_url = "#{base_url}/twilio/transcription_callback?account_id=#{account_id}&conference_sid=#{conference_name}&speaker_type=agent&agent_id=#{agent_id}"
-
-    Twilio::TwiML::VoiceResponse.new do |r|
-      # Add transcription for the agent leg too
-      r.start do |start|
-        start.transcription(
-          status_callback_url: transcription_url,
-          status_callback_method: 'POST',
-          track: 'inbound_track', # Use inbound_track consistently for conference calls
-          language_code: 'en-US'
-        )
-      end
-
-      r.dial do |dial|
-        dial.conference(
-          conference_name,
-          startConferenceOnEnter: true,
-          endConferenceOnExit:    true,
-          muted:                  false,
-          beep:                   false,
-          waitUrl:                '',
-          earlyMedia:             true,
-          statusCallback:         conference_callback_url,
-          statusCallbackEvent:    'start end join leave',
-          statusCallbackMethod:   'POST',
-          participantLabel:       "agent-#{params[:agent_id] || current_user&.id}"
-        )
-      end
-    end.to_s
-  end
-
-  def conference_callback_url
-    account_id = params[:account_id] || Current.account&.id
-    "#{base_url.chomp('/')}/api/v1/accounts/#{account_id}/channels/voice/webhooks/conference_status"
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', '')
-  end
-
-  # ---- TwiML Error -----------------------------------------------------------
-
-  def render_twiml_error(message)
-    response = Twilio::TwiML::VoiceResponse.new do |r|
-      r.say(message: "Error: #{message}")
-      r.hangup
-    end
-    set_cors_headers
-    render xml: response.to_s, content_type: 'text/xml'
-  end
-end

app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb

@@ -0,0 +1,87 @@
+class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
+  before_action :validate_feature_enabled!
+  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
+
+  # POST /api/v1/accounts/:account_id/whatsapp/authorization
+  # Handles both initial authorization and reauthorization
+  # If inbox_id is present in params, it performs reauthorization
+  def create
+    validate_embedded_signup_params!
+    channel = process_embedded_signup
+    render_success_response(channel.inbox)
+  rescue StandardError => e
+    render_error_response(e)
+  end
+
+  private
+
+  def process_embedded_signup
+    service = Whatsapp::EmbeddedSignupService.new(
+      account: Current.account,
+      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
+      inbox_id: params[:inbox_id]
+    )
+    service.perform
+  end
+
+  def fetch_and_validate_inbox
+    @inbox = Current.account.inboxes.find(params[:inbox_id])
+    validate_reauthorization_required
+  end
+
+  def validate_reauthorization_required
+    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
+
+    render json: {
+      success: false,
+      message: I18n.t('inbox.reauthorization.not_required')
+    }, status: :unprocessable_entity
+  end
+
+  def can_upgrade_to_embedded_signup?
+    channel = @inbox.channel
+    return false unless channel.provider == 'whatsapp_cloud'
+
+    true
+  end
+
+  def render_success_response(inbox)
+    response = {
+      success: true,
+      id: inbox.id,
+      name: inbox.name,
+      channel_type: 'whatsapp'
+    }
+    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
+    render json: response
+  end
+
+  def render_error_response(error)
+    Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
+    Rails.logger.error error.backtrace.join("\n")
+    render json: {
+      success: false,
+      error: error.message
+    }, status: :unprocessable_entity
+  end
+
+  def validate_feature_enabled!
+    return if Current.account.feature_whatsapp_embedded_signup?
+
+    render json: {
+      success: false,
+      error: 'WhatsApp embedded signup is not enabled for this account'
+    }, status: :forbidden
+  end
+
+  def validate_embedded_signup_params!
+    missing_params = []
+    missing_params << 'code' if params[:code].blank?
+    missing_params << 'business_id' if params[:business_id].blank?
+    missing_params << 'waba_id' if params[:waba_id].blank?
+
+    return if missing_params.empty?
+
+    raise ArgumentError, "Required parameters are missing: #{missing_params.join(', ')}"
+  end
+end

app/controllers/dashboard_controller.rb

@@ -67,6 +67,8 @@ class DashboardController < ActionController::Base
       FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
       INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
       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?,
       AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
       GIT_SHA: GIT_HASH

app/controllers/microsoft_controller.rb

@@ -2,7 +2,7 @@ class MicrosoftController < ApplicationController
   after_action :set_version_header
 
   def identity_association
-    microsoft_indentity
+    microsoft_identity
   end
 
   private
@@ -11,7 +11,7 @@ class MicrosoftController < ApplicationController
     response.headers['Content-Length'] = { associatedApplications: [{ applicationId: @identity_json }] }.to_json.length
   end
 
-  def microsoft_indentity
+  def microsoft_identity
     @identity_json = GlobalConfigService.load('AZURE_APP_ID', nil)
   end
 end

app/controllers/notion/callbacks_controller.rb

@@ -33,4 +33,4 @@ class Notion::CallbacksController < OauthCallbackController
   def notion_redirect_uri
     "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/notion"
   end
-end
+end

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

@@ -1,4 +1,11 @@
 class Platform::Api::V1::AccountsController < PlatformController
+  def index
+    @resources = @platform_app.platform_app_permissibles
+                              .where(permissible_type: 'Account')
+                              .includes(:permissible)
+                              .map(&:permissible)
+  end
+
   def show; end
 
   def create

app/controllers/slack_uploads_controller.rb

@@ -17,7 +17,12 @@ class SlackUploadsController < ApplicationController
   end
 
   def blob_url
-    url_for(@blob.representation(resize_to_fill: [250, nil]))
+    # 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
   end
 
   def avatar_url

app/controllers/super_admin/app_configs_controller.rb

@@ -39,8 +39,10 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
       'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
+      'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
       'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI]
     }
 
     @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])

app/controllers/super_admin/application_controller.rb

@@ -7,8 +7,9 @@
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
   include ActionView::Helpers::TagHelper
   include ActionView::Context
+  include SuperAdmin::NavigationHelper
 
-  helper_method :render_vue_component
+  helper_method :render_vue_component, :settings_open?, :settings_pages
   # authenticiation done via devise : SuperAdmin Model
   before_action :authenticate_super_admin!
 

app/controllers/twilio/callback_controller.rb

@@ -30,7 +30,8 @@ class Twilio::CallbackController < ApplicationController
       :NumMedia,
       :Latitude,
       :Longitude,
-      :MessageType
+      :MessageType,
+      :ProfileName
     )
   end
 end

app/controllers/twilio/recording_controller.rb

@@ -1,81 +0,0 @@
-# frozen_string_literal: true
-
-class Twilio::RecordingController < ActionController::Base
-  skip_forgery_protection
-
-  # POST /twilio/recording_callback
-  # This endpoint is called by Twilio when a call recording is available
-  def recording_callback
-    conference_sid = params['conference_sid']
-    call_sid = params['CallSid']
-    recording_url = params['RecordingUrl']
-    recording_sid = params['RecordingSid']
-    account_id = params['account_id']
-    Rails.logger.info("[Twilio::RecordingController] Incoming recording_callback with params: #{params.inspect}")
-    unless recording_url && account_id && (conference_sid || call_sid)
-      Rails.logger.warn("[Twilio::RecordingController] Missing required params. recording_url: #{recording_url}, account_id: #{account_id}, conference_sid: #{conference_sid}, call_sid: #{call_sid}")
-      return head :bad_request
-    end
-
-    # Find the account
-    account = Account.find_by(id: account_id)
-    unless account
-      Rails.logger.warn("[Twilio::RecordingController] Account not found for id: #{account_id}")
-      return head :not_found
-    end
-
-    # Prefer lookup by conference_sid (most robust for conference recordings)
-    conversation = if conference_sid
-      account.conversations.find_by("additional_attributes ->> 'conference_sid' = ?", conference_sid)
-    elsif call_sid
-      account.conversations.find_by("additional_attributes ->> 'call_sid' = ?", call_sid)
-    end
-    unless conversation
-      Rails.logger.warn("[Twilio::RecordingController] Conversation not found for conference_sid: #{conference_sid} or call_sid: #{call_sid}")
-      return head :not_found
-    end
-
-    # Find the original voice call message (should be unique per conference)
-    message = conversation.messages.voice_call.order(:created_at).first
-    unless message
-      Rails.logger.warn("[Twilio::RecordingController] No voice_call message found in conversation_id: #{conversation.id}")
-      return head :not_found
-    end
-
-    # Download the recording from Twilio
-    begin
-      Rails.logger.info("[Twilio::RecordingController] Downloading recording from: #{recording_url}.mp3")
-      file = URI.open(recording_url + '.mp3')
-    rescue => e
-      Rails.logger.error("[Twilio::RecordingController] Failed to download recording: #{e.message}")
-      return head :internal_server_error
-    end
-
-    # Attach the audio file to the message as an audio attachment
-    begin
-      att = message.attachments.create!(
-        account_id: account.id,
-        file: {
-          io: file,
-          filename: "twilio_recording_#{recording_sid}.mp3",
-          content_type: 'audio/mpeg'
-        },
-        file_type: :audio,
-        external_url: recording_url + '.mp3',
-        meta: { recording_sid: recording_sid, conference_sid: conference_sid, call_sid: call_sid }
-      )
-      Rails.logger.info("[Twilio::RecordingController] Successfully attached recording to message_id: #{message.id}, attachment_id: #{att.id}")
-    rescue => e
-      Rails.logger.error("[Twilio::RecordingController] Failed to attach recording: #{e.message}")
-      return head :internal_server_error
-    end
-
-    # Optionally, update message content_attributes to indicate recording is attached
-    content_attributes = message.content_attributes || {}
-    content_attributes['recording_attached'] = true
-    content_attributes['conference_sid'] = conference_sid if conference_sid
-    message.update!(content_attributes: content_attributes)
-
-    head :ok
-  end
-end

app/controllers/twilio/transcription_controller.rb

@@ -1,62 +0,0 @@
-class Twilio::TranscriptionController < ActionController::Base
-  skip_forgery_protection
-
-  # Receives real-time transcription updates from Twilio
-  def transcription_callback
-    # Set Current.account
-    Current.account = Account.find_by(id: params[:account_id])
-    
-    # Only process transcription content events
-    if params['TranscriptionEvent'] == 'transcription-content'
-      process_transcription_content
-    end
-
-    head :ok
-  end
-
-  private
-
-  def process_transcription_content
-    # Extract transcript content from JSON
-    data = JSON.parse(params['TranscriptionData'])
-    transcript_content = data['transcript']
-    confidence = data['confidence']
-  
-    
-    # Find conversation by conference_sid from our standard format
-    display_id = params[:conference_sid].match(/^conf_account_\d+_conv_(\d+)$/)[1]
-    conversation = Current.account.conversations.find_by(display_id: display_id)
-    
-    # Create message based on speaker_type
-    create_message(conversation, transcript_content, confidence)
-  end
-  
-  def create_message(conversation, content, confidence)
-    if params[:speaker_type] == 'contact'
-      # Contact message (incoming)
-      sender = conversation.contact
-      message_type = :incoming
-    else
-      # Agent message (outgoing)
-      sender = User.find_by(id: params[:agent_id])
-      message_type = :outgoing
-    end
-    
-    # Create the message
-    Messages::MessageBuilder.new(
-      sender,
-      conversation,
-      content: content,
-      message_type: message_type,
-      private: false,
-      additional_attributes: {
-        transcription: true,
-        call_sid: params['CallSid'],
-        conference_sid: params[:conference_sid],
-        speaker_type: params[:speaker_type],
-        confidence: confidence,
-        track: params['Track']
-      }
-    ).perform
-  end
-end

app/controllers/twilio/voice_controller.rb

@@ -1,189 +0,0 @@
-class Twilio::VoiceController < ActionController::Base
-  skip_forgery_protection
-
-  before_action :set_call_details, only: %i[status_callback simple_twiml]
-  before_action :set_inbox,        only: %i[status_callback simple_twiml]
-
- 
-  def status_callback
-    return head :ok unless @inbox
-
-    conversation = Voice::ConversationFinderService.new(
-      account:      @inbox.account,
-      call_sid:     @call_sid,
-      phone_number: incoming_number,
-      is_outbound:  outbound?,
-      inbox:        @inbox
-    ).perform
-
-    Voice::CallStatus::Manager.new(
-      conversation: conversation,
-      call_sid:     @call_sid,
-      provider:     :twilio
-    ).process_status_update(params[:CallStatus], params[:CallDuration]&.to_i, first_status_response?)
-
-    head :ok
-  end
-
-  def simple_twiml
-    return fallback_twiml unless @inbox
-
-    conversation = Voice::ConversationFinderService.new(
-      account:      @inbox.account,
-      call_sid:     @call_sid,
-      phone_number: incoming_number,
-      is_outbound:  outbound?,
-      inbox:        @inbox
-    ).perform
-
-    Voice::CallStatus::Manager.new(
-      conversation: conversation,
-      call_sid:     @call_sid,
-      provider:     :twilio
-    ).process_status_update('in-progress', nil, true)
-
-    conference_name = ensure_conference_name(conversation, params[:conference_name])
-
-    conversation.update!(
-      additional_attributes: conversation.additional_attributes.merge(
-        'conference_sid'       => conference_name,
-        'call_direction'       => outbound? ? 'outbound' : 'inbound',
-        'requires_agent_join'  => true
-      )
-    )
-
-    render_twiml do |r|
-      r.say(message: 'Please wait while we connect you to an agent')
-
-      # Enable real-time transcription for this call leg
-      # For outbound calls, we're connecting to the contact, so this track is for the contact
-      contact_id = conversation.contact_id
-      callback_url = "#{base_url}/twilio/transcription_callback?account_id=#{@inbox.account_id}&conference_sid=#{conference_name}&speaker_type=contact&contact_id=#{contact_id}"
-      Rails.logger.info("📞 VoiceController: Setting transcription callback to: #{callback_url}")
-
-      r.start do |start|
-        start.transcription(
-          status_callback_url: callback_url,
-          status_callback_method: 'POST',
-          track: 'inbound_track',
-          language_code: 'en-US'
-        )
-      end
-
-      # Set up the conference
-      conference_callback_url = "#{base_url}/api/v1/accounts/#{@inbox.account_id}/channels/voice/webhooks/conference_status"
-      Rails.logger.info("📞 VoiceController: Setting conference callback to: #{conference_callback_url}")
-
-      r.dial do |d|
-        d.conference(
-          conference_name,
-          startConferenceOnEnter: false,
-          endConferenceOnExit:    true,
-          beep:                   false,
-          muted:                  false,
-          waitUrl:                '',
-          earlyMedia:             true,
-          statusCallback:         conference_callback_url,
-          statusCallbackMethod:   'POST',
-          statusCallbackEvent:    'start end join leave',
-          participantLabel:       "caller-#{@call_sid.last(8)}",
-          record:                 'record-from-start',
-          recording_status_callback: "#{base_url}/twilio/recording_callback?account_id=#{@inbox.account_id}&conference_sid=#{conference_name}",
-          recording_status_callback_method: 'POST'
-        )
-      end
-    end
-  rescue StandardError => e
-    Rails.logger.error("Error creating voice conversation: #{e.message}")
-    fallback_twiml
-  end
-
-  private
-
-  def set_call_details
-    @call_sid  = params[:CallSid]
-    @direction = params[:Direction]
-  end
-
-  def set_inbox
-    @inbox = find_inbox(outbound? ? params[:From] : params[:To])
-  end
-
-  def outbound?
-    @direction == 'outbound-api'
-  end
-
-  def incoming_number
-    outbound? ? params[:To] : params[:From]
-  end
-
-  def first_status_response?
-    params[:IsFirstResponseForStatus] == 'true'
-  end
-
-  def render_twiml(status: :ok)
-    response = Twilio::TwiML::VoiceResponse.new
-    yield response
-    render xml: response.to_s, status: status
-  end
-
-  def build_message(conversation, content)
-    Messages::MessageBuilder.new(
-      nil,
-      conversation,
-      content:               content,
-      message_type:          :activity,
-      additional_attributes: { call_sid: @call_sid, call_status: 'in-progress', user_input: true }
-    ).perform
-  end
-
-  def input_text
-    return "Caller pressed #{params[:Digits]}"           if params[:Digits].present?
-    return "Caller said: \"#{params[:SpeechResult]}\""   if params[:SpeechResult].present?
-
-    'Caller responded'
-  end
-
-  def ensure_conference_name(conversation, supplied)
-    name = supplied.presence ||
-           conversation.additional_attributes['conference_sid'] ||
-           conversation.additional_attributes['conference_name']
-
-    return name if name&.match?(/^conf_account_\d+_conv_\d+$/)
-
-    "conf_account_#{@inbox.account_id}_conv_#{conversation.display_id}"
-  end
-
-  def fallback_twiml
-    render_twiml do |r|
-      r.say(message: 'Hello from Chatwoot. This is a courtesy call to check on your recent signup.')
-      r.pause(length: 1)
-      r.say(message: 'We will connect you with an agent shortly.')
-      r.hangup
-    end
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-
-  def find_inbox(phone_number)
-    return nil if phone_number.blank?
-
-    Inbox.joins('INNER JOIN channel_voice ON channel_voice.account_id = inboxes.account_id AND inboxes.channel_id = channel_voice.id')
-         .find_by('channel_voice.phone_number = ?', phone_number)
-  end
-
-  def find_or_create_conversation(inbox, phone_number, call_sid)
-    Voice::ConversationFinderService.new(
-      account:      inbox.account,
-      call_sid:     call_sid,
-      phone_number: phone_number,
-      is_outbound:  false,
-      inbox:        inbox
-    ).perform
-  rescue StandardError => e
-    Rails.logger.error("find_or_create_conversation error: #{e.message}")
-    nil
-  end
-end

app/controllers/webhooks/instagram_controller.rb

@@ -4,7 +4,16 @@ class Webhooks::InstagramController < ActionController::API
   def events
     Rails.logger.info('Instagram webhook received events')
     if params['object'].casecmp('instagram').zero?
-      ::Webhooks::InstagramEventsJob.perform_later(params.to_unsafe_hash[:entry])
+      entry_params = params.to_unsafe_hash[:entry]
+
+      if contains_echo_event?(entry_params)
+        # Add delay to prevent race condition where echo arrives before send message API completes
+        # This avoids duplicate messages when echo comes early during API processing
+        ::Webhooks::InstagramEventsJob.set(wait: 2.seconds).perform_later(entry_params)
+      else
+        ::Webhooks::InstagramEventsJob.perform_later(entry_params)
+      end
+
       render json: :ok
     else
       Rails.logger.warn("Message is not received from the instagram webhook event: #{params['object']}")
@@ -14,6 +23,16 @@ class Webhooks::InstagramController < ActionController::API
 
   private
 
+  def contains_echo_event?(entry_params)
+    return false unless entry_params.is_a?(Array)
+
+    entry_params.any? do |entry|
+      # Check messaging array for echo events
+      messaging_events = entry[:messaging] || []
+      messaging_events.any? { |messaging| messaging.dig(:message, :is_echo).present? }
+    end
+  end
+
   def valid_token?(token)
     # Validates against both IG_VERIFY_TOKEN (Instagram channel via Facebook page) and
     # INSTAGRAM_VERIFY_TOKEN (Instagram channel via direct Instagram login)

app/dispatchers/async_dispatcher.rb

@@ -15,7 +15,6 @@ class AsyncDispatcher < BaseDispatcher
       CsatSurveyListener.instance,
       HookListener.instance,
       InstallationWebhookListener.instance,
-      MessageListener.instance,
       NotificationListener.instance,
       ParticipationListener.instance,
       ReportingEventListener.instance,

app/finders/notification_finder.rb

@@ -15,7 +15,13 @@ class NotificationFinder
   end
 
   def unread_count
-    @notifications.where(read_at: nil).count
+    if type_included?('read')
+      # If we're including read notifications, filter to unread
+      @notifications.where(read_at: nil).count
+    else
+      # Already filtered to unread notifications, just count
+      @notifications.count
+    end
   end
 
   def count
@@ -27,7 +33,7 @@ class NotificationFinder
   def set_up
     find_all_notifications
     filter_snoozed_notifications
-    fitler_read_notifications
+    filter_read_notifications
   end
 
   def find_all_notifications
@@ -38,7 +44,7 @@ class NotificationFinder
     @notifications = @notifications.where(snoozed_until: nil) unless type_included?('snoozed')
   end
 
-  def fitler_read_notifications
+  def filter_read_notifications
     @notifications = @notifications.where(read_at: nil) unless type_included?('read')
   end
 

app/helpers/api/v1/inboxes_helper.rb

@@ -107,8 +107,7 @@ module Api::V1::InboxesHelper
       'line' => Current.account.line_channels,
       'telegram' => Current.account.telegram_channels,
       'whatsapp' => Current.account.whatsapp_channels,
-      'sms' => Current.account.sms_channels,
-      'voice' => Current.account.voice_channels
+      'sms' => Current.account.sms_channels
     }[permitted_params[:channel][:type]]
   end
 

app/helpers/reporting_event_helper.rb

@@ -18,12 +18,25 @@ module ReportingEventHelper
   end
 
   def last_non_human_activity(conversation)
-    # check if a handoff event already exists
-    handoff_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_handoff').last
+    # 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
 
-    # 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
+    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
   end
 
   private

app/helpers/super_admin/features.yml

@@ -1,5 +1,7 @@
 # TODO: Move this values to features.yml itself
 # No need to replicate the same values in two places
+
+# ------- Premium Features ------- #
 captain:
   name: 'Captain'
   description: 'Enable AI-powered conversations with your customers.'
@@ -32,6 +34,15 @@ disable_branding:
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-sailbot-fill'
   enterprise: true
+
+# ------- Product Features ------- #
+help_center:
+  name: 'Help Center'
+  description: 'Allow agents to create help center articles and publish them in a portal.'
+  enabled: true
+  icon: 'icon-book-2-line'
+
+# ------- Communication Channels ------- #
 live_chat:
   name: 'Live Chat'
   description: 'Improve your customer experience using a live chat on your website.'
@@ -42,6 +53,12 @@ email:
   description: 'Manage your email customer interactions from Chatwoot.'
   enabled: true
   icon: 'icon-mail-send-fill'
+  config_key: 'email'
+sms:
+  name: 'SMS'
+  description: 'Manage your SMS customer interactions from Chatwoot.'
+  enabled: true
+  icon: 'icon-message-line'
 messenger:
   name: 'Messenger'
   description: 'Stay connected with your customers on Facebook & Instagram.'
@@ -69,22 +86,22 @@ line:
   description: 'Manage your Line customer interactions from Chatwoot.'
   enabled: true
   icon: 'icon-line-line'
-sms:
-  name: 'SMS'
-  description: 'Manage your SMS customer interactions from Chatwoot.'
+
+# ------- OAuth & Authentication ------- #
+google:
+  name: 'Google'
+  description: 'Configuration for setting up Google OAuth Integration'
   enabled: true
-  icon: 'icon-message-line'
-help_center:
-  name: 'Help Center'
-  description: 'Allow agents to create help center articles and publish them in a portal.'
-  enabled: true
-  icon: 'icon-book-2-line'
+  icon: 'icon-google'
+  config_key: 'google'
 microsoft:
   name: 'Microsoft'
   description: 'Configuration for setting up Microsoft Email'
   enabled: true
   icon: 'icon-microsoft'
   config_key: 'microsoft'
+
+# ------- Third-party Integrations ------- #
 linear:
   name: 'Linear'
   description: 'Configuration for setting up Linear Integration'
@@ -103,6 +120,12 @@ slack:
   enabled: true
   icon: 'icon-slack'
   config_key: 'slack'
+whatsapp_embedded:
+  name: 'WhatsApp Embedded'
+  description: 'Configuration for setting up WhatsApp Embedded Integration'
+  enabled: true
+  icon: 'icon-whatsapp-line'
+  config_key: 'whatsapp_embedded'
 shopify:
   name: 'Shopify'
   description: 'Configuration for setting up Shopify Integration'

app/helpers/super_admin/features_helper.rb

@@ -1,6 +1,6 @@
 module SuperAdmin::FeaturesHelper
   def self.available_features
-    YAML.load(ERB.new(Rails.root.join('enterprise/app/helpers/super_admin/features.yml').read).result).with_indifferent_access
+    YAML.load(ERB.new(Rails.root.join('app/helpers/super_admin/features.yml').read).result).with_indifferent_access
   end
 
   def self.plan_details

app/helpers/super_admin/navigation_helper.rb

@@ -0,0 +1,16 @@
+module SuperAdmin::NavigationHelper
+  def settings_open?
+    params[:controller].in? %w[super_admin/settings super_admin/app_configs]
+  end
+
+  def settings_pages
+    features = SuperAdmin::FeaturesHelper.available_features.select do |_feature, attrs|
+      attrs['config_key'].present? && attrs['enabled']
+    end
+
+    # Add general at the beginning
+    general_feature = [['general', { 'config_key' => 'general', 'name' => 'General' }]]
+
+    general_feature + features.to_a
+  end
+end

app/javascript/dashboard/App.vue

@@ -6,7 +6,6 @@ import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
-import FloatingCallWidget from './components/widgets/FloatingCallWidget.vue';
 import vueActionCable from './helper/actionCable';
 import { useRouter } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
@@ -15,8 +14,6 @@ import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useFontSize } from 'dashboard/composables/useFontSize';
-import { useAlert } from 'dashboard/composables';
-import VoiceAPI from 'dashboard/api/channels/voice';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -28,7 +25,6 @@ export default {
 
   components: {
     AddAccountModal,
-    FloatingCallWidget,
     LoadingState,
     NetworkNotification,
     UpdateBanner,
@@ -55,7 +51,6 @@ export default {
       showAddAccountModal: false,
       latestChatwootVersion: null,
       reconnectService: null,
-      showCallWidget: false, // Will be set to true when calls are active
     };
   },
   computed: {
@@ -65,10 +60,6 @@ export default {
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
-      activeCall: 'calls/getActiveCall',
-      hasActiveCall: 'calls/hasActiveCall',
-      incomingCall: 'calls/getIncomingCall',
-      hasIncomingCall: 'calls/hasIncomingCall',
     }),
     hasAccounts() {
       const { accounts = [] } = this.currentUser || {};
@@ -93,34 +84,11 @@ export default {
         }
       },
     },
-    hasIncomingCall: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.showCallWidget = true;
-        } else {
-          this.showCallWidget = false;
-        }
-      }
-    },
-    hasActiveCall: {
-      immediate: true,
-      handler(newVal) {
-        if (newVal) {
-          this.showCallWidget = true;
-        } else {
-          this.showCallWidget = false;
-        }
-      }
-    },
   },
   mounted() {
     this.initializeColorTheme();
     this.listenToThemeChanges();
     this.setLocale(window.chatwootConfig.selectedLocale);
-    
-    // Make app instance available globally for direct call widget updates
-    window.app = this;
   },
   unmounted() {
     if (this.reconnectService) {
@@ -138,77 +106,6 @@ export default {
     setLocale(locale) {
       this.$root.$i18n.locale = locale;
     },
-    handleCallEnded() {
-      this.showCallWidget = false;
-      this.$store.dispatch('calls/clearActiveCall');
-      this.$store.dispatch('calls/clearIncomingCall');
-      
-      // Clear the activeCallConversation state in all ContactInfo components
-      this.$nextTick(() => {
-        const clearContactInfoCallState = (components) => {
-          if (!components) return;
-          
-          components.forEach(component => {
-            if (component.$options && component.$options.name === 'ContactInfo') {
-              if (component.activeCallConversation) {
-                component.activeCallConversation = null;
-                component.$forceUpdate();
-              }
-            }
-            if (component.$children && component.$children.length) {
-              clearContactInfoCallState(component.$children);
-            }
-          });
-        };
-        
-        clearContactInfoCallState(this.$children);
-      });
-    },
-    handleCallJoined() {
-      this.showCallWidget = true;
-    },
-    handleCallRejected() {
-      this.showCallWidget = false;
-      this.$store.dispatch('calls/clearIncomingCall');
-    },
-    forceEndCall() {
-      this.showCallWidget = false;
-      if (window.forceEndCallHandlers) {
-        window.forceEndCallHandlers.forEach(handler => {
-          try {
-            handler();
-          } catch (e) {
-            // Optionally log error in production
-          }
-        });
-      }
-      if (this.activeCall && this.activeCall.callSid) {
-        const { callSid, conversationId } = this.activeCall;
-        const savedCallSid = callSid;
-        const savedConversationId = conversationId;
-        this.$store.dispatch('calls/clearActiveCall');
-        if (savedConversationId) {
-          VoiceAPI.endCall(savedCallSid, savedConversationId)
-            .then(() => {
-              useAlert({ message: 'Call ended successfully', type: 'success' });
-            })
-            .catch(() => {
-              setTimeout(() => {
-                VoiceAPI.endCall(savedCallSid, savedConversationId)
-                  .then(() => {
-                  })
-                  .catch(() => {
-                  });
-              }, 1000);
-              useAlert({ message: 'Call UI has been reset', type: 'info' });
-            });
-        } else {
-          useAlert({ message: 'Call ended', type: 'success' });
-        }
-      } else {
-        this.$store.dispatch('calls/clearActiveCall');
-      }
-    },
     async initializeAccount() {
       await this.$store.dispatch('accounts/get');
       this.$store.dispatch('setActiveAccount', {
@@ -239,8 +136,7 @@ export default {
   <div
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTL }"
+    class="flex flex-col w-full h-screen min-h-0"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
@@ -256,25 +152,6 @@ export default {
     <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
     <WootSnackbarBox />
     <NetworkNotification />
-    <!-- Floating call widget that appears during active calls -->
-    <FloatingCallWidget
-      v-if="showCallWidget || hasActiveCall || hasIncomingCall"
-      :key="activeCall ? activeCall.callSid : (incomingCall ? incomingCall.callSid : 'no-call')"
-      :call-sid="activeCall ? activeCall.callSid : (incomingCall ? incomingCall.callSid : '')"
-      :inbox-name="activeCall ? (activeCall.inboxName || 'Primary') : (incomingCall ? incomingCall.inboxName : 'Primary')"
-      :conversation-id="activeCall ? activeCall.conversationId : (incomingCall ? incomingCall.conversationId : null)"
-      :contact-name="activeCall ? activeCall.contactName : (incomingCall ? incomingCall.contactName : '')"
-      :contact-id="activeCall ? activeCall.contactId : (incomingCall ? incomingCall.contactId : null)"
-      :inbox-id="activeCall ? activeCall.inboxId : (incomingCall ? incomingCall.inboxId : null)"
-      :inbox-avatar-url="activeCall ? activeCall.inboxAvatarUrl : (incomingCall ? incomingCall.inboxAvatarUrl : '')"
-      :inbox-phone-number="activeCall ? activeCall.inboxPhoneNumber : (incomingCall ? incomingCall.inboxPhoneNumber : '')"
-      :avatar-url="activeCall ? activeCall.avatarUrl : (incomingCall ? incomingCall.avatarUrl : '')"
-      :phone-number="activeCall ? activeCall.phoneNumber : (incomingCall ? incomingCall.phoneNumber : '')"
-      use-web-rtc
-      @callEnded="handleCallEnded"
-      @callJoined="handleCallJoined"
-      @callRejected="handleCallRejected"
-    />
   </div>
   <LoadingState v-else />
 </template>

app/javascript/dashboard/api/captain/scenarios.js

@@ -0,0 +1,36 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainScenarios extends ApiClient {
+  constructor() {
+    super('captain/assistants', { accountScoped: true });
+  }
+
+  get({ assistantId, page = 1, searchKey } = {}) {
+    return axios.get(`${this.url}/${assistantId}/scenarios`, {
+      params: { page, searchKey },
+    });
+  }
+
+  show({ assistantId, id }) {
+    return axios.get(`${this.url}/${assistantId}/scenarios/${id}`);
+  }
+
+  create({ assistantId, ...data } = {}) {
+    return axios.post(`${this.url}/${assistantId}/scenarios`, {
+      scenario: data,
+    });
+  }
+
+  update({ assistantId, id }, data = {}) {
+    return axios.put(`${this.url}/${assistantId}/scenarios/${id}`, {
+      scenario: data,
+    });
+  }
+
+  delete({ assistantId, id }) {
+    return axios.delete(`${this.url}/${assistantId}/scenarios/${id}`);
+  }
+}
+
+export default new CaptainScenarios();

app/javascript/dashboard/api/captain/tools.js

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

app/javascript/dashboard/api/channel/whatsappChannel.js

@@ -0,0 +1,21 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class WhatsappChannel extends ApiClient {
+  constructor() {
+    super('whatsapp', { accountScoped: true });
+  }
+
+  createEmbeddedSignup(params) {
+    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
+  }
+
+  reauthorizeWhatsApp({ inboxId, ...params }) {
+    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
+      ...params,
+      inbox_id: inboxId,
+    });
+  }
+}
+
+export default new WhatsappChannel();

app/javascript/dashboard/api/channels/voice.js

@@ -1,856 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class VoiceAPI extends ApiClient {
-  constructor() {
-    // Use 'voice' as the resource with accountScoped: true
-    super('voice', { accountScoped: true });
-    
-    // Client-side Twilio device
-    this.device = null;
-    this.activeConnection = null;
-    this.initialized = false;
-  }
-
-  // Initiate a call to a contact
-  initiateCall(contactId) {
-    if (!contactId) {
-      throw new Error('Contact ID is required to initiate a call');
-    }
-
-    // Based on the route definition, the correct URL path is /api/v1/accounts/{accountId}/contacts/{contactId}/call
-    // The endpoint is defined in the contacts namespace, not voice namespace
-    return axios.post(`${this.baseUrl().replace('/voice', '')}/contacts/${contactId}/call`);
-  }
-
-  // End an active call
-  endCall(callSid, conversationId) {
-    if (!conversationId) {
-      throw new Error('Conversation ID is required to end a call');
-    }
-
-    if (!callSid) {
-      throw new Error('Call SID is required to end a call');
-    }
-
-    // Validate call SID format - Twilio call SID starts with 'CA' or 'TJ'
-    if (!callSid.startsWith('CA') && !callSid.startsWith('TJ')) {
-      throw new Error(
-        'Invalid call SID format. Expected Twilio call SID starting with CA or TJ.'
-      );
-    }
-
-    return axios.post(`${this.url}/end_call`, {
-      call_sid: callSid,
-      conversation_id: conversationId,
-      id: conversationId,
-    });
-  }
-
-  // Get call status
-  getCallStatus(callSid) {
-    if (!callSid) {
-      throw new Error('Call SID is required to get call status');
-    }
-
-    return axios.get(`${this.url}/call_status`, {
-      params: { call_sid: callSid },
-    });
-  }
-
-  // Join an incoming call as an agent (join the conference)
-  // This is used for the WebRTC client-side setup, not for phone calls anymore
-  joinCall(params) {
-    // Check if we have individual parameters or a params object
-    const conversationId = params.conversation_id || params.conversationId;
-    const callSid = params.call_sid || params.callSid;
-    const accountId = params.account_id;
-
-    if (!conversationId) {
-      throw new Error('Conversation ID is required to join a call');
-    }
-
-    if (!callSid) {
-      throw new Error('Call SID is required to join a call');
-    }
-
-    // Build request payload with proper naming convention
-    const payload = {
-      call_sid: callSid,
-      conversation_id: conversationId,
-    };
-
-    // Add account_id if provided
-    if (accountId) {
-      payload.account_id = accountId;
-    }
-
-    console.log('Calling join_call API endpoint with payload:', payload);
-
-    return axios.post(`${this.url}/join_call`, payload);
-  }
-
-  // Reject an incoming call as an agent (don't join the conference)
-  rejectCall(callSid, conversationId) {
-    if (!conversationId) {
-      throw new Error('Conversation ID is required to reject a call');
-    }
-
-    if (!callSid) {
-      throw new Error('Call SID is required to reject a call');
-    }
-
-    return axios.post(`${this.url}/reject_call`, {
-      call_sid: callSid,
-      conversation_id: conversationId,
-    });
-  }
-  
-  // Client SDK methods
-  
-  // Get a capability token for the Twilio Client
-  getToken(inboxId) {
-    console.log(`Requesting token for inbox ID: ${inboxId} at URL: ${this.url}/tokens`);
-    
-    // Log the base URL for debugging
-    console.log(`Base URL: ${this.baseUrl()}`);
-    
-    // Check if inboxId is valid
-    if (!inboxId) {
-      console.error('No inbox ID provided for token request');
-      return Promise.reject(new Error('Inbox ID is required'));
-    }
-    
-    // Add more request details to help debugging
-    return axios.post(`${this.url}/tokens`, { inbox_id: inboxId }, {
-      headers: { 'Content-Type': 'application/json' },
-    }).catch(error => {
-      // Extract useful error details for debugging
-      const errorInfo = {
-        status: error.response?.status,
-        statusText: error.response?.statusText,
-        data: error.response?.data,
-        url: `${this.url}/tokens`,
-        inboxId,
-      };
-      
-      console.error('Token request error details:', errorInfo);
-      
-      // Try to extract a more useful error message from the HTML response if it's a 500 error
-      if (error.response?.status === 500 && typeof error.response.data === 'string') {
-        // Look for specific error patterns in the HTML
-        const htmlData = error.response.data;
-        
-        // Check for common Ruby/Rails error patterns
-        const nameMatchResult = htmlData.match(/<h2>(.*?)<\/h2>/);
-        const detailsMatchResult = htmlData.match(/<pre>([\s\S]*?)<\/pre>/);
-        
-        const errorName = nameMatchResult ? nameMatchResult[1] : null;
-        const errorDetails = detailsMatchResult ? detailsMatchResult[1] : null;
-        
-        if (errorName || errorDetails) {
-          const enhancedError = new Error(`Server error: ${errorName || 'Internal Server Error'}`);
-          enhancedError.details = errorDetails;
-          enhancedError.originalError = error;
-          throw enhancedError;
-        }
-      }
-      
-      throw error;
-    });
-  }
-  
-  // Initialize the Twilio Device
-  async initializeDevice(inboxId) {
-    // If already initialized, return the existing device after checking its health
-    if (this.initialized && this.device) {
-      const deviceState = this.device.state;
-      console.log('Device already initialized, current state:', deviceState);
-      
-      // If the device is in a bad state, destroy and reinitialize
-      if (deviceState === 'error' || deviceState === 'unregistered') {
-        console.log('Device is in a bad state, destroying and reinitializing...');
-        try {
-          this.device.destroy();
-        } catch (e) {
-          console.log('Error destroying device:', e);
-        }
-        this.device = null;
-        this.initialized = false;
-      } else {
-        // Device is in a good state, return it
-        return this.device;
-      }
-    }
-    
-    // Device needs to be initialized or reinitialized
-    try {
-      console.log(`Starting Twilio Device initialization for inbox: ${inboxId}`);
-      
-      // Import the Twilio Voice SDK
-      let Device;
-      try {
-        // We know the package is installed via package.json
-        const { Device: TwilioDevice } = await import('@twilio/voice-sdk');
-        Device = TwilioDevice;
-        console.log('✓ Twilio Voice SDK imported successfully');
-      } catch (importError) {
-        console.error('✗ Failed to import Twilio Voice SDK:', importError);
-        throw new Error(`Failed to load Twilio Voice SDK: ${importError.message}`);
-      }
-      
-      // Validate inbox ID
-      if (!inboxId) {
-        throw new Error('Inbox ID is required to initialize the Twilio Device');
-      }
-      
-      // Step 1: Get a token from the server
-      console.log(`Requesting Twilio token for inbox: ${inboxId}`);
-      let response;
-      try {
-        response = await this.getToken(inboxId);
-        console.log(`✓ Token response received with status: ${response.status}`);
-      } catch (tokenError) {
-        console.error('✗ Token request failed:', tokenError);
-        
-        // Enhanced error handling for token requests
-        if (tokenError.details) {
-          // If we already have extracted details from the error, include those
-          console.error('Token error details:', tokenError.details);
-          throw new Error(`Failed to get token: ${tokenError.message}`);
-        }
-        
-        // Check for specific HTTP error status codes
-        if (tokenError.response) {
-          const status = tokenError.response.status;
-          const data = tokenError.response.data;
-          
-          if (status === 401) {
-            throw new Error('Authentication error: Please check your Twilio credentials');
-          } else if (status === 403) {
-            throw new Error('Permission denied: You don\'t have access to this inbox');
-          } else if (status === 404) {
-            throw new Error('Inbox not found or does not have voice capability');
-          } else if (status === 500) {
-            throw new Error('Server error: The server encountered an error processing your request. Check your Twilio configuration.');
-          } else if (data && data.error) {
-            throw new Error(`Server error: ${data.error}`);
-          }
-        }
-        
-        throw new Error(`Failed to get token: ${tokenError.message}`);
-      }
-      
-      // Validate token response
-      if (!response.data || !response.data.token) {
-        console.error('✗ Invalid token response data:', response.data);
-        
-        // Check if we have an error message in the response
-        if (response.data && response.data.error) {
-          throw new Error(`Server did not return a valid token: ${response.data.error}`);
-        } else {
-          throw new Error('Server did not return a valid token');
-        }
-      }
-      
-      // Check for warnings about missing TwiML App SID
-      if (response.data.warning) {
-        console.warn('⚠️ Twilio Voice Warning:', response.data.warning);
-        
-        if (!response.data.has_twiml_app) {
-          console.error(
-            '🚨 IMPORTANT: Missing TwiML App SID. Browser-based calling requires a ' +
-            'TwiML App configured in Twilio Console. Set the Voice Request URL to: ' +
-            response.data.twiml_endpoint
-          );
-        }
-      }
-      
-      // Extract token data
-      const { token, identity, voice_enabled, account_sid } = response.data;
-      
-      // Log diagnostic information
-      console.log(`✓ Token data received for identity: ${identity}`);
-      console.log(`✓ Voice enabled: ${voice_enabled}`);
-      console.log(`✓ Twilio Account SID available: ${!!account_sid}`);
-      
-      // Log the TwiML endpoint that will be used
-      if (response.data.twiml_endpoint) {
-        console.log(`✓ TwiML endpoint: ${response.data.twiml_endpoint}`);
-      } else {
-        console.warn('⚠️ No TwiML endpoint found in token response');
-      }
-      
-      // Check if voice is enabled
-      if (!voice_enabled) {
-        throw new Error('Voice is not enabled for this inbox. Check your Twilio configuration.');
-      }
-      
-      // Store the TwiML endpoint URL for later use
-      this.twimlEndpoint = response.data.twiml_endpoint;
-
-      // Step 2: Create Twilio Device with better options
-      const deviceOptions = {
-        // Use absolute minimal options - less is more for audio compatibility
-        allowIncomingWhileBusy: true, // Allow incoming calls while already on a call
-        debug: true, // Enable debug logging
-        warnings: true, // Show warnings in console
-        disableAudioContextSounds: true, // Disable browser audio context for sounds
-        // Add explicit edge parameter - this helps avoid connectivity issues
-        edge: ['ashburn', 'sydney', 'roaming'],
-        // Explicitly set codec preferences
-        codecPreferences: ['opus', 'pcmu'],
-        // Add the account ID to any calls made by this device
-        appParams: {
-          account_id: response.data.account_id,
-        }
-      };
-      
-      console.log('Creating Twilio Device with options:', deviceOptions);
-      
-      try {
-        this.device = new Device(token, deviceOptions);
-        console.log('✓ Twilio Device created successfully');
-      } catch (deviceError) {
-        console.error('✗ Failed to create Twilio Device:', deviceError);
-        throw new Error(`Failed to create Twilio Device: ${deviceError.message}`);
-      }
-      
-      // Step 3: Set up event listeners with enhanced error handling
-      this._setupDeviceEventListeners(inboxId);
-      
-      // Step 4: Register the device with Twilio
-      console.log('Registering Twilio Device...');
-      try {
-        await this.device.register();
-        console.log('✓ Twilio Device registered successfully');
-        this.initialized = true;
-        return this.device;
-      } catch (registerError) {
-        console.error('✗ Failed to register Twilio Device:', registerError);
-        
-        // Handle specific registration errors
-        if (registerError.message && registerError.message.includes('token')) {
-          throw new Error('Invalid Twilio token. Check your account credentials.');
-        } else if (registerError.message && registerError.message.includes('permission')) {
-          throw new Error('Missing microphone permission. Please allow microphone access.');
-        }
-        
-        throw new Error(`Failed to register device: ${registerError.message}`);
-      }
-    } catch (error) {
-      // Clear device and initialized flag in case of error
-      this.device = null;
-      this.initialized = false;
-      
-      console.error('Failed to initialize Twilio Device:', error);
-      
-      // Create a detailed error with context for debugging
-      const enhancedError = new Error(`Twilio Device initialization failed: ${error.message}`);
-      enhancedError.originalError = error;
-      enhancedError.inboxId = inboxId;
-      enhancedError.timestamp = new Date().toISOString();
-      enhancedError.browserInfo = {
-        userAgent: navigator.userAgent,
-        hasGetUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
-      };
-      
-      // Add specific advice for known error cases
-      if (error.message.includes('permission')) {
-        enhancedError.advice = 'Please ensure your browser allows microphone access.';
-      } else if (error.message.includes('token')) {
-        enhancedError.advice = 'Check your Twilio credentials in the Voice channel settings.';
-      } else if (error.message.includes('TwiML')) {
-        enhancedError.advice = 'Set up a valid TwiML app in your Twilio console and configure it in the inbox settings.';
-      } else if (error.message.includes('configuration')) {
-        enhancedError.advice = 'Review your Voice inbox configuration to ensure all required fields are completed.';
-      }
-      
-      throw enhancedError;
-    }
-  }
-  
-  // Helper method to set up device event listeners
-  _setupDeviceEventListeners(inboxId) {
-    if (!this.device) return;
-    
-    // Remove any existing listeners to prevent duplicates
-    this.device.removeAllListeners();
-    
-    // Add standard event listeners
-    this.device.on('registered', () => {
-      console.log('✓ Twilio Device registered with Twilio servers');
-    });
-    
-    this.device.on('unregistered', () => {
-      console.log('⚠️ Twilio Device unregistered from Twilio servers');
-    });
-    
-    this.device.on('tokenWillExpire', () => {
-      console.log('⚠️ Twilio token is about to expire, refreshing...');
-      this.getToken(inboxId)
-        .then(newTokenResponse => {
-          if (newTokenResponse.data && newTokenResponse.data.token) {
-            console.log('✓ Successfully obtained new token');
-            this.device.updateToken(newTokenResponse.data.token);
-          } else {
-            console.error('✗ Failed to get a valid token for renewal');
-          }
-        })
-        .catch(tokenError => {
-          console.error('✗ Error refreshing token:', tokenError);
-        });
-    });
-    
-    this.device.on('incoming', connection => {
-      console.log('📞 Incoming call received via Twilio Device');
-      this.activeConnection = connection;
-      
-      // Set up connection-specific events
-      this._setupConnectionEventListeners(connection);
-    });
-    
-    this.device.on('error', error => {
-      // Enhanced error logging with full details
-      const errorDetails = {
-        code: error.code,
-        message: error.message,
-        description: error.description || 'No description',
-        twilioErrorObject: error,
-        connectionInfo: this.activeConnection ? {
-          parameters: this.activeConnection.parameters,
-          status: this.activeConnection.status && this.activeConnection.status(),
-          direction: this.activeConnection.direction,
-        } : 'No active connection',
-        deviceState: this.device.state,
-        browserInfo: {
-          userAgent: navigator.userAgent,
-          platform: navigator.platform
-        },
-        timestamp: new Date().toISOString()
-      };
-      
-      console.error('❌ DETAILED Twilio Device Error:', errorDetails);
-      
-      // Provide helpful troubleshooting tips based on error code
-      switch (error.code) {
-        case 31000:
-          console.error('⚠️ Error 31000: General Error. This could be an authentication, configuration, or network issue.');
-          console.error('31000 Error Details:', {
-            sdp: error.sdp || 'No SDP data',
-            callState: error.call ? error.call.state : 'No call state',
-            connectionState: error.connection ? error.connection.state : 'No connection state',
-            peerConnectionState: error.peerConnection ? error.peerConnection.iceConnectionState : 'No ICE state',
-            message: error.message,
-            twilioError: error,
-            info: error.info || 'No additional info',
-            solution: 'Check Twilio account status, SDP negotiations, and network connectivity'
-          });
-          
-          // Create a network diagnostic to check connectivity
-          fetch('https://status.twilio.com/api/v2/status.json')
-            .then(response => response.json())
-            .then(data => {
-              console.log('Twilio service status check:', data);
-            })
-            .catch(statusError => {
-              console.error('Failed to check Twilio status:', statusError);
-            });
-          break;
-        case 31002:
-          console.error('⚠️ Error 31002: Permission Denied. Your browser microphone is blocked or unavailable.');
-          break;
-        case 31003:
-          console.error('⚠️ Error 31003: TwiML App Error. Your TwiML application does not exist or is misconfigured.');
-          break;
-        case 31005:
-          console.error('⚠️ Error 31005: Error sent from gateway in HANGUP. This usually means the TwiML endpoint is not reachable or returning invalid TwiML.');
-          console.error('Additional details for 31005:', {
-            activeConnection: this.activeConnection ? 'Yes' : 'No',
-            deviceState: this.device ? this.device.state : 'No device',
-            params: this.activeConnection ? this.activeConnection.parameters : 'No params',
-            twimlEndpoint: this.activeConnection && this.activeConnection.parameters ? 
-              this.activeConnection.parameters.To : 'Unknown endpoint',
-            hangupReason: error.hangupReason || 'Unknown',  // Capture hangup reason
-            message: error.message,
-            description: error.description,
-            customMessage: error.customMessage,
-            originalError: error.originalError ? JSON.stringify(error.originalError) : 'None'
-          });
-          break;
-        case 31008:
-          console.error('⚠️ Error 31008: Connection Error. The call could not be established.');
-          break;
-        case 31204:
-          console.error('⚠️ Error 31204: ICE Connection Failed. WebRTC connection failure, check firewall settings.');
-          break;
-        default:
-          console.error(`⚠️ Unspecified error with code ${error.code}: ${error.message}`);
-      }
-    });
-    
-    this.device.on('connect', connection => {
-      console.log('📞 Call connected');
-      this.activeConnection = connection;
-      this._setupConnectionEventListeners(connection);
-    });
-    
-    this.device.on('disconnect', () => {
-      console.log('📞 Call disconnected');
-      this.activeConnection = null;
-    });
-  }
-  
-  // Set up event listeners for the active connection with enhanced audio diagnostic logging
-  _setupConnectionEventListeners(connection) {
-    if (!connection) return;
-    
-    // Add advanced audio debug data
-    const getAudioDiagnostics = () => {
-      const audioContext = window.AudioContext || window.webkitAudioContext;
-      let audioInfo = { supported: !!audioContext };
-      
-      try {
-        if (audioContext) {
-          const context = new audioContext();
-          audioInfo = {
-            ...audioInfo,
-            sampleRate: context.sampleRate,
-            state: context.state,
-            baseLatency: context.baseLatency,
-            outputLatency: context.outputLatency,
-            destination: {
-              maxChannelCount: context.destination.maxChannelCount,
-              numberOfInputs: context.destination.numberOfInputs,
-              numberOfOutputs: context.destination.numberOfOutputs
-            }
-          };
-          context.close();
-        }
-      } catch (e) {
-        audioInfo.error = e.message;
-      }
-      
-      // Check if microphone is accessible
-      let microphoneInfo = { detected: false, active: false, tracks: [] };
-      if (window.activeAudioStream) {
-        const tracks = window.activeAudioStream.getAudioTracks();
-        microphoneInfo = {
-          detected: true,
-          active: tracks.some(track => track.enabled && track.readyState === 'live'),
-          tracks: tracks.map(track => ({
-            id: track.id,
-            label: track.label,
-            enabled: track.enabled,
-            muted: track.muted,
-            readyState: track.readyState,
-            constraints: track.getConstraints()
-          }))
-        };
-      }
-      
-      return { 
-        audioContext: audioInfo, 
-        microphone: microphoneInfo,
-        speakersMuted: typeof window.speechSynthesis !== 'undefined' ? 
-          window.speechSynthesis.speaking === false : 'unknown'
-      };
-    };
-    
-    connection.on('error', error => {
-      // Significantly enhanced connection error logging with audio diagnostics
-      const diagnostics = getAudioDiagnostics();
-      
-      const connectionErrorDetails = {
-        code: error.code,
-        message: error.message,
-        description: error.description || 'No description',
-        twilioErrorObject: error,
-        connectionInfo: {
-          parameters: connection.parameters,
-          status: connection.status && connection.status(),
-          direction: connection.direction,
-        },
-        deviceState: this.device ? this.device.state : 'No device',
-        timestamp: new Date().toISOString(),
-        // Audio diagnostics for troubleshooting
-        audioDiagnostics: diagnostics,
-        // Browser media permissions
-        mediaPermissions: {
-          hasGetUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
-          activeAudioStream: !!window.activeAudioStream,
-          activeAudioTracks: window.activeAudioStream ? 
-            window.activeAudioStream.getAudioTracks().length : 0
-        }
-      };
-      
-      console.error('❌ DETAILED Connection Error with Audio Diagnostics:', connectionErrorDetails);
-    });
-    
-    connection.on('mute', isMuted => {
-      console.log(`📞 Call ${isMuted ? 'muted' : 'unmuted'}`);
-    });
-    
-    connection.on('accept', () => {
-      // Enhanced logging for accept event with audio diagnostics
-      const diagnostics = getAudioDiagnostics();
-      
-      console.log('📞 Call accepted with audio diagnostics:', {
-        connectionParameters: connection.parameters,
-        status: connection.status && connection.status(),
-        audioDiagnostics: diagnostics,
-        activeAudioStream: window.activeAudioStream ? {
-          active: window.activeAudioStream.active,
-          id: window.activeAudioStream.id,
-          trackCount: window.activeAudioStream.getTracks().length
-        } : 'No active stream'
-      });
-      
-      // AUDIO HEALTH CHECK AFTER CONNECTION
-      setTimeout(() => {
-        console.log('🔊 AUDIO HEALTH CHECK:', {
-          connectionActive: this.activeConnection === connection,
-          connectionState: connection.status && connection.status(),
-          audioTracks: window.activeAudioStream ? 
-            window.activeAudioStream.getAudioTracks().map(track => ({
-              label: track.label,
-              enabled: track.enabled,
-              readyState: track.readyState,
-              muted: track.muted
-            })) : 'No active stream',
-          // Device state after 5 seconds
-          deviceState: this.device ? this.device.state : 'No device'
-        });
-      }, 5000);
-    });
-    
-    connection.on('disconnect', () => {
-      console.log('📞 Call disconnected', {
-        disconnectCause: connection.parameters ? connection.parameters.DisconnectCause : 'Unknown',
-        finalStatus: connection.status && connection.status(),
-        audioDiagnostics: getAudioDiagnostics()
-      });
-      this.activeConnection = null;
-    });
-    
-    connection.on('reject', () => {
-      console.log('📞 Call rejected', {
-        rejectCause: connection.parameters ? connection.parameters.DisconnectCause : 'Unknown',
-        audioDiagnostics: getAudioDiagnostics()
-      });
-      this.activeConnection = null;
-    });
-    
-    // Additional event for warning messages
-    connection.on('warning', warning => {
-      console.warn('⚠️ Connection Warning:', warning);
-    });
-    
-    // Listen for TwiML processing events
-    connection.on('twiml-processing', twiml => {
-      console.log('📄 Processing TwiML:', twiml);
-    });
-    
-    // Enhanced audio events for debugging
-    if (typeof connection.on === 'function') {
-      try {
-        // Check for volume events
-        connection.on('volume', (inputVolume, outputVolume) => {
-          // Log only significant volume changes to avoid console spam
-          if (Math.abs(inputVolume) > 50 || Math.abs(outputVolume) > 50) {
-            console.log(`🔊 Volume change - Input: ${inputVolume}, Output: ${outputVolume}`);
-          }
-        });
-        
-        // Check for media stream events if supported
-        if (typeof connection.getRemoteStream === 'function') {
-          const remoteStream = connection.getRemoteStream();
-          if (remoteStream) {
-            console.log('✅ Remote audio stream available:', {
-              active: remoteStream.active,
-              id: remoteStream.id,
-              tracks: remoteStream.getTracks().map(t => ({
-                kind: t.kind,
-                enabled: t.enabled,
-                readyState: t.readyState
-              }))
-            });
-          } else {
-            console.warn('⚠️ No remote audio stream available');
-          }
-        }
-      } catch (e) {
-        console.warn('Error setting up enhanced audio events:', e);
-      }
-    }
-  }
-  
-  // Make a call using the Twilio Client
-  makeClientCall(params) {
-    if (!this.device || !this.initialized) {
-      throw new Error('Twilio Device not initialized');
-    }
-    
-    this.activeConnection = this.device.connect(params);
-    return this.activeConnection;
-  }
-  
-  // Join a conference call using the Twilio Client
-  joinClientCall(conferenceParams) {
-    if (!this.device || !this.initialized) {
-      throw new Error('Twilio Device not initialized');
-    }
-
-    try {
-      // IMPORTANT: Do NOT try to register if already registered
-      // Only check state is ready
-      if (this.device.state !== 'ready' && this.device.state !== 'registered') {
-        // Don't try to register again if already registered
-      }
-
-      // This is CRITICAL for Twilio - params must be formatted exactly right
-      // and passed directly in the format Twilio expects
-      const params = {
-        // REQUIRED: Twilio Voice JS SDK expects 'To' parameter to be a properly formatted string
-        To: `${conferenceParams.To}`,
-
-        // Additional params for our server
-        account_id: conferenceParams.account_id,
-        is_agent: 'true'
-      };
-
-      // Check To parameter exists - fail if missing
-      if (!params.To) {
-        throw new Error('Missing To parameter for conference');
-      }
-
-      // Make sure 'To' is explicitly a string
-      const stringifiedTo = String(params.To);
-      console.log('🎯 CRITICAL CONFERENCE CONNECTION: Connecting agent to conference with To=', stringifiedTo);
-
-      // Follow Twilio documentation format - params should be nested under 'params' property
-      console.log('🎯 TRYING CONNECTION: Using documented format with params property');
-
-      // Just use the minimal required parameters
-      const connection = this.device.connect({
-        params: {
-          To: stringifiedTo,  // Conference ID
-          is_agent: 'true'    // Flag to indicate agent is joining
-        }
-      });
-
-      console.log('🎯 CONFERENCE CONNECTION RESULT:', connection ? 'Success' : 'Failed');
-      this.activeConnection = connection;
-
-      if (connection && typeof connection.then === 'function') {
-        // It's a Promise - newer Twilio SDK version
-        connection.then(resolvedConnection => {
-          this.activeConnection = resolvedConnection;
-          try {
-            if (typeof resolvedConnection.on === 'function') {
-              resolvedConnection.on('accept', () => {
-                // Connection accepted
-              });
-            }
-          } catch (listenerError) {
-            // Could not add listeners to Promise connection
-          }
-        }).catch(connError => {
-          // WebRTC Promise connection error
-        });
-      } else {
-        // It's a synchronous connection - older Twilio SDK
-      }
-      return connection;
-    } catch (error) {
-      // Error joining conference
-    }
-  }
-
-  // Get the status of the device with additional diagnostic info
-  getDeviceStatus() {
-    if (!this.device) {
-      return 'not_initialized';
-    }
-    
-    const deviceState = this.device.state;
-    
-    // Append a recommended action based on the state
-    switch (deviceState) {
-      case 'registered':
-        return 'ready';
-      case 'unregistered':
-        return 'disconnected';
-      case 'destroyed':
-        return 'terminated';
-      case 'busy':
-        return 'busy';
-      case 'error':
-        return 'error';
-      default:
-        return deviceState;
-    }
-  }
-  
-  // Get comprehensive diagnostic information about the device and connection
-  getDiagnosticInfo() {
-    const browserInfo = {
-      userAgent: navigator.userAgent,
-      platform: navigator.platform,
-      vendor: navigator.vendor,
-      hasMediaDevices: !!navigator.mediaDevices,
-      hasGetUserMedia: !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
-    };
-    
-    const deviceInfo = this.device ? {
-      state: this.device.state,
-      isInitialized: this.initialized,
-      capabilities: this.device.capabilities || {},
-      isBusy: this.device.isBusy || false,
-      audio: {
-        isAudioSelectionSupported: this.device.isAudioSelectionSupported || false
-      }
-    } : { state: 'not_initialized' };
-    
-    const connectionInfo = this.activeConnection ? {
-      status: this.activeConnection.status(),
-      isMuted: this.activeConnection.isMuted(),
-      direction: this.activeConnection.direction,
-      parameters: this.activeConnection.parameters,
-    } : { status: 'no_connection' };
-    
-    return {
-      timestamp: new Date().toISOString(),
-      browser: browserInfo,
-      device: deviceInfo,
-      connection: connectionInfo
-    };
-  }
-  
-  // Get the status of the active connection
-  getConnectionStatus() {
-    if (!this.activeConnection) {
-      return 'no_connection';
-    }
-    
-    const status = this.activeConnection.status();
-    
-    // Translate connection statuses to more user-friendly terms
-    switch (status) {
-      case 'pending':
-        return 'connecting';
-      case 'open':
-        return 'connected';
-      case 'connecting':
-        return 'connecting';
-      case 'ringing':
-        return 'ringing';
-      case 'closed':
-        return 'ended';
-      default:
-        return status;
-    }
-  }
-}
-
-export default new VoiceAPI();

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

@@ -21,6 +21,14 @@ class PortalsAPI extends ApiClient {
   deleteLogo(portalSlug) {
     return axios.delete(`${this.url}/${portalSlug}/logo`);
   }
+
+  sendCnameInstructions(portalSlug, email) {
+    return axios.post(`${this.url}/${portalSlug}/send_instructions`, { email });
+  }
+
+  sslStatus(portalSlug) {
+    return axios.get(`${this.url}/${portalSlug}/ssl_status`);
+  }
 }
 
 export default PortalsAPI;

app/javascript/dashboard/api/inboxes.js

@@ -28,6 +28,10 @@ class Inboxes extends CacheEnabledApiClient {
       agent_bot: botId,
     });
   }
+
+  syncTemplates(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/sync_templates`);
+  }
 }
 
 export default new Inboxes();

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

@@ -12,6 +12,7 @@ describe('#InboxesAPI', () => {
     expect(inboxesAPI).toHaveProperty('getCampaigns');
     expect(inboxesAPI).toHaveProperty('getAgentBot');
     expect(inboxesAPI).toHaveProperty('setAgentBot');
+    expect(inboxesAPI).toHaveProperty('syncTemplates');
   });
 
   describe('API calls', () => {
@@ -40,5 +41,12 @@ describe('#InboxesAPI', () => {
       inboxesAPI.deleteInboxAvatar(2);
       expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
     });
+
+    it('#syncTemplates', () => {
+      inboxesAPI.syncTemplates(2);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/sync_templates'
+      );
+    });
   });
 });

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

@@ -37,30 +37,6 @@ body {
   width: 100%;
 }
 
-.app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
-
-  .button--fixed-top {
-    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
-  }
-}
-
-.banner + .app-wrapper {
-  // Reduce the height of the dashboard to make room for the banner.
-  // And causing the top right green-action button to be pushed down when scrolling.
-  @apply h-[calc(100%-48px)];
-
-  .button--fixed-top {
-    @apply top-14;
-  }
-
-  .off-canvas-content {
-    .button--fixed-top {
-      @apply top-2;
-    }
-  }
-}
-
 .tooltip {
   @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }

app/javascript/dashboard/components-next/CallModal/CallButton.vue

@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <Button
-      icon="i-ri-phone-fill"
-      color="slate"
-      size="sm"
-      :tooltip="$t('CALL_BUTTON.TOOLTIP')"
-      class="!h-7 !bg-n-solid-3 dark:!bg-n-black/30 !outline-n-weak !text-n-slate-11"
-      @click="openCallModal"
-    />
-    <div v-if="showCallModal" class="fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0">
-      <CallModal @close="showCallModal = false" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import CallModal from './CallModal.vue';
-
-const showCallModal = ref(false);
-
-const openCallModal = () => {
-  showCallModal.value = true;
-};
-</script>

app/javascript/dashboard/components-next/CallModal/CallModal.vue

@@ -1,306 +0,0 @@
-<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">
-    <div class="px-4 py-3 flex items-center">
-      <h3 class="text-base font-medium">{{ $t('CALL_MODAL.START_CALL') }}</h3>
-    </div>
-    
-    <!-- Inbox Selector (First) -->
-    <div class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible">
-      <label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
-        {{ $t('CALL_MODAL.VIA') }}
-      </label>
-      
-      <div
-        v-if="selectedInbox"
-        class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 h-7 min-w-0"
-      >
-        <span class="text-sm truncate text-n-slate-12 flex items-center gap-2">
-          <span class="i-ri-phone-fill text-n-slate-11"></span>
-          {{ selectedInbox.name }} - {{ selectedInbox.phoneNumber }}
-        </span>
-        <Button
-          variant="ghost"
-          icon="i-lucide-x"
-          color="slate"
-          size="xs"
-          class="flex-shrink-0"
-          @click="selectedInbox = null"
-        />
-      </div>
-      
-      <div
-        v-else
-        v-on-click-outside="() => showInboxDropdown = false"
-        class="relative flex items-center h-7"
-      >
-        <Button
-          :label="$t('CALL_MODAL.SELECT_INBOX')"
-          variant="link"
-          size="sm"
-          color="slate"
-          class="hover:!no-underline"
-          @click="showInboxDropdown = !showInboxDropdown"
-        />
-        <DropdownMenu
-          v-if="voiceInboxesList.length > 0 && showInboxDropdown"
-          :menu-items="voiceInboxesList"
-          class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
-          @action="selectInbox($event)"
-        />
-      </div>
-    </div>
-    
-    <!-- Contact Selector -->
-    <ContactSelector
-      :contacts="contacts"
-      :selected-contact="selectedContact"
-      :show-contacts-dropdown="showContactsDropdown"
-      :is-loading="isSearching"
-      :is-creating-contact="false"
-      :contact-id="null"
-      :contactable-inboxes-list="[]"
-      :show-inboxes-dropdown="false"
-      :has-errors="false"
-      @search-contacts="handleContactSearch"
-      @set-selected-contact="handleSelectedContact"
-      @clear-selected-contact="clearSelectedContact"
-      @update-dropdown="handleDropdownUpdate"
-    />
-
-    <!-- Action buttons -->
-    <div class="flex items-center justify-end w-full h-[3.25rem] gap-2 px-4 py-3">
-      <Button
-        :label="$t('CALL_MODAL.CANCEL')"
-        variant="faded"
-        color="slate"
-        size="sm"
-        class="!text-xs font-medium"
-        @click="$emit('close')"
-      />
-      <Button
-        :label="$t('CALL_MODAL.CALL')"
-        icon="i-ri-phone-fill"
-        size="sm"
-        class="!text-xs font-medium"
-        :disabled="!selectedInbox || !selectedContact || isLoading"
-        :is-loading="isLoading"
-        @click="makeCall"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { debounce } from '@chatwoot/utils';
-import { vOnClickOutside } from '@vueuse/components';
-import ContactAPI from 'dashboard/api/contacts';
-import VoiceAPI from 'dashboard/api/channels/voice';
-import camelcaseKeys from 'camelcase-keys';
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import ContactSelector from 'dashboard/components-next/NewConversation/components/ContactSelector.vue';
-import axios from 'axios';
-
-const { t } = useI18n();
-const store = useStore();
-
-const emit = defineEmits(['close']);
-
-const selectedContact = ref(null);
-const selectedInbox = ref(null);
-const showContactsDropdown = ref(false);
-const showInboxDropdown = ref(false);
-const contacts = ref([]);
-const isSearching = ref(false);
-const isLoading = ref(false);
-
-const inboxes = useMapGetter('inboxes/getInboxes');
-
-const voiceInboxesList = computed(() => {
-  return inboxes.value
-    .filter(inbox => inbox.channel_type === INBOX_TYPES.VOICE)
-    .map(inbox => ({
-      id: inbox.id,
-      title: `${inbox.name}`,
-      subtitle: inbox.phone_number,
-      label: `${inbox.name} - ${inbox.phone_number}`,
-      action: 'select-inbox',
-      value: inbox.id,
-      sourceId: inbox.id,
-      phoneNumber: inbox.phone_number,
-      name: inbox.name,
-      icon: 'i-ri-phone-fill',
-    }));
-});
-
-// Auto-select the first available voice inbox
-watch(voiceInboxesList, (newList) => {
-  if (newList.length > 0 && !selectedInbox.value) {
-    selectedInbox.value = newList[0];
-  }
-}, { immediate: true });
-
-const selectInbox = item => {
-  const inbox = voiceInboxesList.value.find(i => i.value === item.value);
-  if (inbox) {
-    selectedInbox.value = inbox;
-    showInboxDropdown.value = false;
-  }
-};
-
-const handleSelectedContact = ({ value, action, ...rest }) => {
-  // If this is a direct call to a phone number
-  if (action === 'create' && value.match(/^\+?[0-9\s\-()]+$/)) {
-    selectedContact.value = {
-      id: 'direct-call',
-      name: t('CALL_MODAL.CALL_DIRECTLY'),
-      sourceId: 'direct-call',
-      phoneNumber: value,
-      action: 'contact',
-    };
-  } else {
-    // For existing contacts, make sure we're capturing their ID properly
-    console.log('Contact selected from dropdown:', { value, action, ...rest });
-    selectedContact.value = {
-      ...rest,
-      sourceId: rest.id || rest.value || value // Make sure we have the ID in sourceId
-    };
-  }
-  showContactsDropdown.value = false;
-};
-
-const handleDropdownUpdate = (type, value) => {
-  showContactsDropdown.value = value;
-};
-
-const clearSelectedContact = () => {
-  selectedContact.value = null;
-};
-
-// This function gets called from the ContactSelector component
-const handleContactSearch = value => {
-  showContactsDropdown.value = true;
-  // Pass all the needed keys for search when using the value sent directly
-  debouncedSearchContacts(value);
-};
-
-const debouncedSearchContacts = debounce(async query => {
-  if (!query || query.length < 2) {
-    contacts.value = [];
-    return;
-  }
-
-  isSearching.value = true;
-  try {
-    // Use the simple search endpoint since it's more reliable for this use case
-    const { data } = await ContactAPI.search(query);
-
-    console.log('Search response:', data); // Log the search response
-
-    // Ensure contacts.value is an array and convert to camelCase
-    const searchResults = data?.payload ? camelcaseKeys(data.payload, { deep: true }) : [];
-
-    // Filter to only include contacts with phone numbers
-    const contactsWithPhone = searchResults.filter(contact => contact.phoneNumber);
-
-    // Map the contacts to ensure they have sourceId set to ID for consistency
-    contacts.value = contactsWithPhone.map(contact => ({
-      ...contact,
-      sourceId: contact.id, // Make sure sourceId is set
-      value: contact.id // Make sure value is set for TagInput
-    }));
-
-    // If it looks like a phone number, add option to call directly
-    if (query.match(/^\+?[0-9\s\-()]+$/) && !contacts.value.some(c => c.phoneNumber === query)) {
-      contacts.value.push({
-        id: 'direct-call',
-        name: t('CALL_MODAL.CALL_DIRECTLY'),
-        phoneNumber: query,
-        sourceId: 'direct-call',
-        value: 'direct-call'
-      });
-    }
-
-    console.log('Processed contacts for dropdown:', contacts.value);
-  } catch (error) {
-    console.error('Error searching contacts:', error);
-    contacts.value = []; // Ensure this is always an array
-    useAlert(t('CALL_MODAL.CONTACT_SEARCH_ERROR'));
-  } finally {
-    isSearching.value = false;
-  }
-}, 300);
-
-const makeCall = async () => {
-  if (!selectedInbox.value || !selectedContact.value) {
-    useAlert(t('CALL_MODAL.VALIDATION_ERROR'));
-    return;
-  }
-
-  isLoading.value = true;
-
-  try {
-    const isDirect = selectedContact.value.sourceId === 'direct-call';
-    const contactId = isDirect ? null : (selectedContact.value.sourceId || selectedContact.value.id);
-    
-    if (contactId) {
-      console.log('Making call to contact ID:', contactId, 'with full contact:', selectedContact.value);
-      // Use VoiceAPI.initiateCall instead of direct axios call
-      await VoiceAPI.initiateCall(contactId);
-    } else {
-      // For direct phone number calls
-      const phoneNumber = selectedContact.value.phoneNumber;
-
-      if (!phoneNumber) {
-        throw new Error('Phone number is required for direct calls');
-      }
-
-      // First create a contact with this phone number
-      console.log('Creating new contact with phone number:', phoneNumber);
-      const contactPayload = {
-        phone_number: phoneNumber,
-        inbox_id: selectedInbox.value.sourceId,
-        name: `Phone: ${phoneNumber}`,
-      };
-
-      const contactResponse = await ContactAPI.create(contactPayload);
-      console.log('Created contact:', contactResponse.data);
-
-      // Then initiate call to the newly created contact
-      if (contactResponse.data && contactResponse.data.payload && contactResponse.data.payload.contact) {
-        const newContactId = contactResponse.data.payload.contact.id;
-        console.log('Using new contact ID:', newContactId);
-        await VoiceAPI.initiateCall(newContactId);
-      } else {
-        throw new Error('Failed to create contact for direct call');
-      }
-    }
-
-    useAlert(t('CALL_MODAL.SUCCESS_MESSAGE'));
-    emit('close');
-  } catch (error) {
-    console.error('Error making call:', error);
-
-    let errorMessage = t('CALL_MODAL.ERROR_MESSAGE');
-
-    // Simple error handling - just show server message if available
-    if (error.response && error.response.data && error.response.data.error) {
-      errorMessage = error.response.data.error;
-    }
-
-    useAlert(errorMessage);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-onMounted(() => {
-  // The first inbox will be selected automatically via the watch
-  // This ensures it works even if voiceInboxesList is populated after mounting
-});
-</script>

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -8,7 +8,6 @@ import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import LiveChatCampaignDetails from './LiveChatCampaignDetails.vue';
 import SMSCampaignDetails from './SMSCampaignDetails.vue';
-import VoiceCampaignDetails from './VoiceCampaignDetails.vue';
 
 const props = defineProps({
   title: {
@@ -23,10 +22,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  isVoiceType: {
-    type: Boolean,
-    default: false,
-  },
   isEnabled: {
     type: Boolean,
     default: false,
@@ -72,12 +67,6 @@ const campaignStatus = computed(() => {
       ? t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.ENABLED')
       : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
   }
-  
-  if (props.isVoiceType) {
-    return props.status === STATUS_COMPLETED
-      ? t('CAMPAIGN.VOICE.CARD.STATUS.COMPLETED')
-      : t('CAMPAIGN.VOICE.CARD.STATUS.SCHEDULED');
-  }
 
   return props.status === STATUS_COMPLETED
     ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
@@ -87,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, phoneNumber);
+  const { medium, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, medium);
 });
 </script>
 
@@ -119,12 +108,6 @@ const inboxIcon = computed(() => {
           :inbox-name="inboxName"
           :inbox-icon="inboxIcon"
         />
-        <VoiceCampaignDetails
-          v-else-if="isVoiceType"
-          :sender="sender"
-          :inbox-name="inboxName"
-          :inbox-icon="inboxIcon"
-        />
         <SMSCampaignDetails
           v-else
           :inbox-name="inboxName"
@@ -135,7 +118,7 @@ const inboxIcon = computed(() => {
     </div>
     <div class="flex items-center justify-end w-20 gap-2">
       <Button
-        v-if="isLiveChatType || isVoiceType"
+        v-if="isLiveChatType"
         variant="faded"
         size="sm"
         color="slate"

app/javascript/dashboard/components-next/Campaigns/CampaignCard/VoiceCampaignDetails.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  sender: {
-    type: Object,
-    default: null,
-  },
-  inboxName: {
-    type: String,
-    default: '',
-  },
-  inboxIcon: {
-    type: String,
-    default: '',
-  },
-  campaign: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-
-const senderName = computed(() => 
-  props.sender?.name || t('CAMPAIGN.VOICE.CARD.CAMPAIGN_DETAILS.BOT')
-);
-
-const senderThumbnail = computed(() => props.sender?.thumbnail || '');
-</script>
-
-<template>
-  <div class="flex items-center gap-2 w-full overflow-hidden">
-    <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-      {{ t('CAMPAIGN.VOICE.CARD.CAMPAIGN_DETAILS.SENT_BY') }}
-    </span>
-    <div class="flex items-center gap-1.5 flex-shrink-0">
-      <Avatar
-        :name="senderName"
-        :src="senderThumbnail"
-        :size="16"
-        rounded-full
-      />
-      <span class="text-sm font-medium text-n-slate-12">
-        {{ senderName }}
-      </span>
-    </div>
-    <span class="flex-shrink-0 text-sm text-n-slate-11 whitespace-nowrap">
-      {{ t('CAMPAIGN.VOICE.CARD.CAMPAIGN_DETAILS.FROM') }}
-    </span>
-    <div class="flex items-center gap-1.5 flex-shrink-0">
-      <Icon :icon="inboxIcon" class="flex-shrink-0 text-n-slate-12 size-3" />
-      <span class="text-sm font-medium text-n-slate-12">
-        {{ inboxName }}
-      </span>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/CampaignEmptyStateContent.js

@@ -37,7 +37,7 @@ export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
       id: 1,
       name: 'Jamie Lee',
     },
-    message: 'Hello! 👋 Any questions on pricing? I am here to help!',
+    message: 'Hello! 👋 Any questions on pricing? I’m here to help!',
     campaign_status: 'active',
     enabled: false,
     campaign_type: 'ongoing',
@@ -60,8 +60,7 @@ export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
     },
     sender: {
       id: 1,
-      name: 'Alexa Rivera',
-      thumbnail: 'AR',
+      name: 'Chatwoot',
     },
     message: 'Hi! Chatwoot here. Need help setting up? Let me know!',
     campaign_status: 'active',
@@ -89,7 +88,7 @@ export const ONGOING_CAMPAIGN_EMPTY_STATE_CONTENT = [
       name: 'Chris Barlow',
     },
     message:
-      'Hi there! 👋 I am here for any questions you may have. Let us chat!',
+      'Hi there! 👋 I’m here for any questions you may have. Let’s chat!',
     campaign_status: 'active',
     enabled: true,
     campaign_type: 'ongoing',
@@ -167,7 +166,7 @@ export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
       phone_number: '+29818373149903',
       provider: 'default',
     },
-    message: 'Hello! We are excited to have your business with us!',
+    message: 'Hello! We’re excited to have your business with us!',
     campaign_status: 'active',
     enabled: true,
     campaign_type: 'one_off',
@@ -211,114 +210,3 @@ export const ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT = [
     updated_at: '2024-10-30T16:15:03.157Z',
   },
 ];
-
-export const VOICE_CAMPAIGN_EMPTY_STATE_CONTENT = [
-  {
-    id: 1,
-    title: 'Signup Confirmation Call',
-    inbox: {
-      id: 10,
-      name: 'PaperLayer Phone Support',
-      channel_type: 'Channel::Voice',
-      avatar_url: '',
-      phone_number: '+14155552671',
-    },
-    message: 'Hello! 👋 Thanks for signing up with PaperLayer. I am calling to confirm your account setup and see if you have any questions about getting started.',
-    campaign_status: 'scheduled',
-    enabled: true,
-    campaign_type: 'voice',
-    scheduled_at: new Date('2024-11-16T20:43:08.000Z').getTime(),
-    audience: [
-      { id: 4, type: 'Label', title: 'Support Customers' },
-      { id: 5, type: 'Label', title: 'Active Users' },
-    ],
-    sender: { 
-      id: 1,
-      name: 'Chris Barlow',
-      thumbnail: 'CB'
-    },
-    created_at: '2024-11-15T13:13:08.496Z',
-    updated_at: '2024-11-15T13:15:38.698Z',
-  },
-  {
-    id: 3,
-    title: 'Support Ticket Follow-Up',
-    inbox: {
-      id: 10,
-      name: 'PaperLayer Phone Support',
-      channel_type: 'Channel::Voice',
-      avatar_url: '',
-      phone_number: '+14155552671',
-    },
-    message: 'Hi, this is PaperLayer support calling to follow up on your recent ticket #12345. Has your issue been resolved to your satisfaction? If not, I can connect you with a specialist right away.',
-    campaign_status: 'completed',
-    enabled: true,
-    campaign_type: 'voice',
-    scheduled_at: new Date('2024-11-10T15:30:00.000Z').getTime(),
-    audience: [
-      { id: 1, type: 'Label', title: 'Enterprise' },
-      { id: 6, type: 'Label', title: 'Premium' },
-    ],
-    sender: { 
-      id: 2,
-      name: 'Sarah Wilson',
-      thumbnail: 'SW'
-    },
-    created_at: '2024-11-10T13:14:00.168Z',
-    updated_at: '2024-11-10T13:15:38.707Z',
-  },
-  {
-    id: 2,
-    title: 'Appointment Reminder',
-    inbox: {
-      id: 10,
-      name: 'PaperLayer Phone Support',
-      channel_type: 'Channel::Voice',
-      avatar_url: '',
-      phone_number: '+14155552671',
-    },
-    message: 'Hello, this is a reminder about your upcoming consultation scheduled for tomorrow at 2:00 PM. Would you like to confirm this appointment or would you prefer to reschedule?',
-    campaign_status: 'scheduled',
-    enabled: true,
-    campaign_type: 'voice',
-    scheduled_at: new Date('2024-11-20T18:00:00.000Z').getTime(),
-    audience: [
-      { id: 7, type: 'Label', title: 'Consultation Clients' },
-      { id: 8, type: 'Label', title: 'New Customers' },
-    ],
-    sender: { 
-      id: 3,
-      name: 'Michael Thompson',
-      thumbnail: 'MT'
-    },
-    created_at: '2024-11-12T09:30:45.123Z',
-    updated_at: '2024-11-12T09:30:45.123Z',
-  },
-  {
-    id: 4,
-    title: 'Customer Feedback Survey',
-    inbox: {
-      id: 10,
-      name: 'PaperLayer Phone Support',
-      channel_type: 'Channel::Voice',
-      avatar_url: '',
-      phone_number: '+14155552671',
-    },
-    message: 'Hello, this is PaperLayer reaching out for your valuable feedback. We noticed you\'ve been using our service for 30 days now. I\'d like to ask a few quick questions about your experience. Your feedback helps us improve our service. Would you have a moment to share your thoughts?',
-    campaign_status: 'scheduled',
-    enabled: true,
-    campaign_type: 'voice',
-    scheduled_at: new Date('2024-11-25T14:15:00.000Z').getTime(),
-    audience: [
-      { id: 9, type: 'Label', title: 'Active 30+ Days' },
-      { id: 10, type: 'Label', title: 'Product Users' },
-    ],
-    sender: { 
-      id: 4,
-      name: 'Jessica Rivera',
-      thumbnail: 'JR'
-    },
-    created_at: '2024-11-18T10:45:23.789Z',
-    updated_at: '2024-11-18T10:45:23.789Z',
-  }
-];

app/javascript/dashboard/components-next/Campaigns/EmptyState/CustomEmptyStateLayout.vue

@@ -1,55 +0,0 @@
-<script setup>
-import Policy from 'dashboard/components/policy.vue';
-
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  subtitle: {
-    type: String,
-    required: true,
-  },
-  actionPerms: {
-    type: Array,
-    default: () => [],
-  },
-});
-</script>
-
-<template>
-  <section
-    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
-  >
-    <div
-      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[36rem]"
-    >
-      <div
-        class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
-      >
-        <slot name="empty-state-item" />
-      </div>
-      <div
-        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full bg-gradient-to-t from-n-background from-0% via-n-background/95 via-25% to-transparent"
-      >
-        <div class="flex flex-col items-center justify-center gap-6 w-full max-w-4xl mx-auto px-4">
-          <div class="flex flex-col items-center justify-center gap-3">
-            <h2
-              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
-            >
-              {{ title }}
-            </h2>
-            <p
-              class="max-w-2xl mx-auto text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
-            >
-              {{ subtitle }}
-            </p>
-          </div>
-          <Policy :permissions="actionPerms">
-            <slot name="actions" />
-          </Policy>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/VoiceCampaignEmptyState.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { VOICE_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-import { useI18n } from 'vue-i18n';
-
-import EmptyStateLayout from './CustomEmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <div 
-          v-for="(campaign, index) in VOICE_CAMPAIGN_EMPTY_STATE_CONTENT" 
-          :key="campaign.id"
-          :style="{
-            opacity: index === 0 ? 1 : index === 1 ? 0.7 : index === 2 ? 0.4 : 0.2
-          }"
-        >
-          <CampaignCard
-            :title="campaign.title"
-            :message="campaign.message"
-            :is-enabled="campaign.enabled"
-            :status="campaign.campaign_status"
-            :sender="campaign.sender"
-            :inbox="campaign.inbox"
-            :scheduled-at="campaign.scheduled_at"
-            :is-voice-type="true"
-          />
-        </div>
-      </div>
-    </template>
-    <template #actions>
-      <div class="mt-10 py-5 px-8 rounded-lg bg-slate-800/5 border border-slate-300/10 max-w-[32rem] mx-auto text-center shadow-sm">
-        <p class="mb-4 text-sm text-slate-700 dark:text-slate-300 font-medium">
-          {{ t('CAMPAIGN.VOICE.EMPTY_STATE.JS_API_DESCRIPTION') }}
-        </p>
-        <code class="block px-5 py-4 overflow-auto text-xs rounded bg-slate-800 text-slate-200 text-left">
-          chatwoot.triggerVoiceCampaign({
-            campaignId: 'CAMPAIGN_ID',
-            user: {
-              name: 'John Doe', 
-              phone: '+1234567890'
-            }
-          });
-        </code>
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/Campaigns/EmptyState/WhatsAppCampaignEmptyState.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
+
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  subtitle: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <EmptyStateLayout :title="title" :subtitle="subtitle">
+    <template #empty-state-item>
+      <div class="flex flex-col gap-4 p-px">
+        <CampaignCard
+          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
+          :key="campaign.id"
+          :title="campaign.title"
+          :message="campaign.message"
+          :is-enabled="campaign.enabled"
+          :status="campaign.campaign_status"
+          :sender="campaign.sender"
+          :inbox="campaign.inbox"
+          :scheduled-at="campaign.scheduled_at"
+        />
+      </div>
+    </template>
+  </EmptyStateLayout>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/CampaignList.vue

@@ -10,10 +10,6 @@ defineProps({
     type: Boolean,
     default: false,
   },
-  isVoiceType: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['edit', 'delete']);
@@ -35,7 +31,6 @@ const handleDelete = campaign => emit('delete', campaign);
       :inbox="campaign.inbox"
       :scheduled-at="campaign.scheduled_at"
       :is-live-chat-type="isLiveChatType"
-      :is-voice-type="isVoiceType"
       @edit="handleEdit(campaign)"
       @delete="handleDelete(campaign)"
     />

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/VoiceCampaign/VoiceCampaignDialog.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import VoiceCampaignForm from './VoiceCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-onMounted(() => {
-  store.dispatch('inboxes/get');
-  store.dispatch('labels/get');
-});
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', {
-      ...campaignDetails,
-      campaign_type: CAMPAIGN_TYPES.VOICE,
-    });
-    
-    // tracking this here instead of the store to track the type of campaign
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.VOICE,
-    });
-    
-    useAlert(t('CAMPAIGN.VOICE.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage = error?.response?.message || t('CAMPAIGN.VOICE.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => emit('close');
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-  handleClose();
-};
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
-  >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
-      {{ t(`CAMPAIGN.VOICE.CREATE.TITLE`) }}
-    </h3>
-    <VoiceCampaignForm
-      @submit="handleSubmit"
-      @cancel="handleClose"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert, useTrack } from 'dashboard/composables';
+import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
+import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
+
+import WhatsAppCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue';
+
+const emit = defineEmits(['close']);
+
+const store = useStore();
+const { t } = useI18n();
+
+const addCampaign = async campaignDetails => {
+  try {
+    await store.dispatch('campaigns/create', campaignDetails);
+
+    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
+      type: CAMPAIGN_TYPES.ONE_OFF,
+    });
+
+    useAlert(t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.SUCCESS_MESSAGE'));
+  } catch (error) {
+    const errorMessage =
+      error?.response?.message ||
+      t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.ERROR_MESSAGE');
+    useAlert(errorMessage);
+  }
+};
+
+const handleSubmit = campaignDetails => {
+  addCampaign(campaignDetails);
+};
+
+const handleClose = () => emit('close');
+</script>
+
+<template>
+  <div
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
+  >
+    <div class="p-6 flex flex-col gap-6">
+      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
+        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
+      </h3>
+      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue

@@ -1,46 +1,44 @@
 <script setup>
-import { reactive, computed, ref, watch } from 'vue';
+import { reactive, computed, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
+import { useMapGetter } from 'dashboard/composables/store';
 
 import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
+import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
 const { t } = useI18n();
-const store = useStore();
 
 const formState = {
   uiFlags: useMapGetter('campaigns/getUIFlags'),
   labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getVoiceInboxes'),
+  inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
+  getFilteredWhatsAppTemplates: useMapGetter(
+    'inboxes/getFilteredWhatsAppTemplates'
+  ),
 };
 
-const senderList = ref([]);
-
 const initialState = {
   title: '',
-  message: '',
   inboxId: null,
-  senderId: null,
+  templateId: null,
   scheduledAt: null,
   selectedAudience: [],
 };
 
 const state = reactive({ ...initialState });
+const templateParserRef = ref(null);
 
 const rules = {
   title: { required, minLength: minLength(1) },
-  message: { required, minLength: minLength(1) },
   inboxId: { required },
-  senderId: { required },
+  templateId: { required },
   scheduledAt: { required },
   selectedAudience: { required },
 };
@@ -70,75 +68,89 @@ const inboxOptions = computed(() =>
   mapToOptions(formState.inboxes.value, 'id', 'name')
 );
 
-const sendersAndBotList = computed(() => [
-  { value: 0, label: t('CAMPAIGN.VOICE.CARD.CAMPAIGN_DETAILS.BOT') },
-  ...mapToOptions(senderList.value, 'id', 'name'),
-]);
+const templateOptions = computed(() => {
+  if (!state.inboxId) return [];
+  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
+  return templates.map(template => {
+    // Create a more user-friendly label from template name
+    const friendlyName = template.name
+      .replace(/_/g, ' ')
+      .replace(/\b\w/g, l => l.toUpperCase());
+
+    return {
+      value: template.id,
+      label: `${friendlyName} (${template.language || 'en'})`,
+      template: template,
+    };
+  });
+});
+
+const selectedTemplate = computed(() => {
+  if (!state.templateId) return null;
+  return templateOptions.value.find(option => option.value === state.templateId)
+    ?.template;
+});
 
 const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.VOICE.CREATE.FORM';
+  const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
   return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
 };
 
 const formErrors = computed(() => ({
   title: getErrorMessage('title', 'TITLE'),
-  message: getErrorMessage('message', 'MESSAGE'),
   inbox: getErrorMessage('inboxId', 'INBOX'),
-  sender: getErrorMessage('senderId', 'SENT_BY'),
+  template: getErrorMessage('templateId', 'TEMPLATE'),
   scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
   audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
 }));
 
-const isSubmitDisabled = computed(() => v$.value.$invalid);
+const hasRequiredTemplateParams = computed(() => {
+  return templateParserRef.value?.v$?.$invalid === false || true;
+});
+
+const isSubmitDisabled = computed(
+  () => v$.value.$invalid || !hasRequiredTemplateParams.value
+);
 
 const formatToUTCString = localDateTime =>
   localDateTime ? new Date(localDateTime).toISOString() : null;
 
-const handleInboxChange = async inboxId => {
-  if (!inboxId) {
-    senderList.value = [];
-    return;
-  }
-
-  try {
-    const response = await store.dispatch('inboxMembers/get', { inboxId });
-    senderList.value = response?.data?.payload ?? [];
-  } catch (error) {
-    senderList.value = [];
-    useAlert(
-      error?.response?.message ??
-        t('CAMPAIGN.VOICE.CREATE.FORM.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-watch(
-  () => state.inboxId,
-  newInboxId => {
-    if (newInboxId) {
-      handleInboxChange(newInboxId);
-    }
-  },
-  { immediate: true }
-);
-
 const resetState = () => {
   Object.assign(state, initialState);
+  v$.value.$reset();
 };
 
 const handleCancel = () => emit('cancel');
 
-const prepareCampaignDetails = () => ({
-  title: state.title,
-  message: state.message,
-  inbox_id: state.inboxId,
-  sender_id: state.senderId || null,
-  scheduled_at: formatToUTCString(state.scheduledAt),
-  audience: state.selectedAudience?.map(id => ({
-    id,
-    type: 'Label',
-  })),
-});
+const prepareCampaignDetails = () => {
+  // Find the selected template to get its content
+  const currentTemplate = selectedTemplate.value;
+  const parserData = templateParserRef.value;
+
+  // Extract template content - this should be the template message body
+  const templateContent = parserData?.renderedTemplate || '';
+
+  // Prepare template_params object with the same structure as used in contacts
+  const templateParams = {
+    name: currentTemplate?.name || '',
+    namespace: currentTemplate?.namespace || '',
+    category: currentTemplate?.category || 'UTILITY',
+    language: currentTemplate?.language || 'en_US',
+    processed_params: parserData?.processedParams || {},
+  };
+
+  return {
+    title: state.title,
+    message: templateContent,
+    template_params: templateParams,
+    inbox_id: state.inboxId,
+    scheduled_at: formatToUTCString(state.scheduledAt),
+    audience: state.selectedAudience?.map(id => ({
+      id,
+      type: 'Label',
+    })),
+  };
+};
 
 const handleSubmit = async () => {
   const isFormValid = await v$.value.$validate();
@@ -148,67 +160,75 @@ const handleSubmit = async () => {
   resetState();
   handleCancel();
 };
+
+// Reset template selection when inbox changes
+watch(
+  () => state.inboxId,
+  () => {
+    state.templateId = null;
+  }
+);
 </script>
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
     <Input
       v-model="state.title"
-      :label="t('CAMPAIGN.VOICE.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.TITLE.PLACEHOLDER')"
+      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.LABEL')"
+      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.PLACEHOLDER')"
       :message="formErrors.title"
       :message-type="formErrors.title ? 'error' : 'info'"
     />
 
-    <TextArea
-      v-model="state.message"
-      :label="t('CAMPAIGN.VOICE.CREATE.FORM.MESSAGE.LABEL')"
-      :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.MESSAGE.PLACEHOLDER')"
-      show-character-count
-      :message="formErrors.message"
-      :message-type="formErrors.message ? 'error' : 'info'"
-    />
-
     <div class="flex flex-col gap-1">
       <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.VOICE.CREATE.FORM.INBOX.LABEL') }}
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.LABEL') }}
       </label>
       <ComboBox
         id="inbox"
         v-model="state.inboxId"
         :options="inboxOptions"
         :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.INBOX.PLACEHOLDER')"
+        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.PLACEHOLDER')"
         :message="formErrors.inbox"
         class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
       />
     </div>
-    
+
     <div class="flex flex-col gap-1">
-      <label for="sender" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.VOICE.CREATE.FORM.SENT_BY.LABEL') }}
+      <label for="template" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LABEL') }}
       </label>
       <ComboBox
-        id="sender"
-        v-model="state.senderId"
-        :options="sendersAndBotList"
-        :has-error="!!formErrors.sender"
-        :disabled="!state.inboxId"
-        :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.SENT_BY.PLACEHOLDER')"
-        :message="formErrors.sender"
+        id="template"
+        v-model="state.templateId"
+        :options="templateOptions"
+        :has-error="!!formErrors.template"
+        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.PLACEHOLDER')"
+        :message="formErrors.template"
         class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
       />
+      <p class="mt-1 text-xs text-n-slate-11">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.INFO') }}
+      </p>
     </div>
+
+    <!-- Template Parser -->
+    <WhatsAppTemplateParser
+      v-if="selectedTemplate"
+      ref="templateParserRef"
+      :template="selectedTemplate"
+    />
 
     <div class="flex flex-col gap-1">
       <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.VOICE.CREATE.FORM.AUDIENCE.LABEL') }}
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL') }}
       </label>
       <TagMultiSelectComboBox
         v-model="state.selectedAudience"
         :options="audienceList"
-        :label="t('CAMPAIGN.VOICE.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
+        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL')"
+        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
         :has-error="!!formErrors.audience"
         :message="formErrors.audience"
         class="[&>div>button]:bg-n-alpha-black2"
@@ -217,25 +237,25 @@ const handleSubmit = async () => {
 
     <Input
       v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.VOICE.CREATE.FORM.SCHEDULED_AT.LABEL')"
+      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.LABEL')"
       type="datetime-local"
       :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.VOICE.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
+      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
       :message="formErrors.scheduledAt"
       :message-type="formErrors.scheduledAt ? 'error' : 'info'"
     />
 
-    <div class="flex items-center justify-between w-full gap-3">
+    <div class="flex gap-3 justify-between items-center w-full">
       <Button
         variant="faded"
         color="slate"
         type="button"
-        :label="t('CAMPAIGN.VOICE.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
+        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
-        :label="t('CAMPAIGN.VOICE.CREATE.FORM.BUTTONS.CREATE')"
+        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CREATE')"
         class="w-full"
         type="submit"
         :is-loading="isCreating"
@@ -243,4 +263,4 @@ const handleSubmit = async () => {
       />
     </div>
   </form>
-</template>
+</template>

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

@@ -98,6 +98,7 @@ const onClickViewDetails = () => emit('showContact', props.id);
         :src="thumbnail"
         :size="48"
         :status="availabilityStatus"
+        hide-offline-status
         rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1">

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

@@ -1,11 +1,13 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots, ref } 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: {
@@ -24,6 +26,8 @@ const { t } = useI18n();
 const slots = useSlots();
 const route = useRoute();
 
+const isContactSidebarOpen = ref(false);
+
 const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
@@ -56,6 +60,15 @@ 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>
@@ -67,7 +80,9 @@ const toggleBlock = () => {
     >
       <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 items-center justify-between w-full h-20 gap-2">
+          <div
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+          >
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
@@ -85,6 +100,11 @@ const toggleBlock = () => {
                 :disabled="isUpdating"
                 @click="toggleBlock"
               />
+              <VoiceCallButton
+                :phone="selectedContact?.phoneNumber"
+                :label="$t('CONTACT_PANEL.CALL')"
+                size="sm"
+              />
               <ComposeConversation :contact-id="contactId">
                 <template #trigger="{ toggle }">
                   <Button
@@ -105,11 +125,65 @@ const toggleBlock = () => {
       </main>
     </div>
 
+    <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      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"
+      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"
     >
       <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/ContactsForm/ContactsForm.vue

@@ -218,10 +218,13 @@ const resetForm = () => {
   Object.assign(state, defaultState);
 };
 
-watch(() => props.contactData, prepareStateBasedOnProps, {
-  immediate: true,
-  deep: true,
-});
+watch(
+  () => props.contactData?.id,
+  id => {
+    if (id) prepareStateBasedOnProps();
+  },
+  { immediate: true }
+);
 
 // Expose state to parent component for avatar upload
 defineExpose({
@@ -272,11 +275,11 @@ defineExpose({
             class="w-full"
             @input="
               isValidationField(item.key) &&
-              v$[getValidationKey(item.key)].$touch()
+                v$[getValidationKey(item.key)].$touch()
             "
             @blur="
               isValidationField(item.key) &&
-              v$[getValidationKey(item.key)].$touch()
+                v$[getValidationKey(item.key)].$touch()
             "
           />
         </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-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 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-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2">
+      <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">
           <Input
             :model-value="searchValue"
             type="search"
@@ -48,6 +48,7 @@ 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>
@@ -58,64 +59,66 @@ const emit = defineEmits([
             </template>
           </Input>
         </div>
-        <div class="flex items-center gap-2">
-          <div v-if="!isLabelView && !isActiveView" class="relative">
+        <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>
             <Button
-              id="toggleContactsFilterButton"
-              :icon="
-                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+              v-if="
+                hasActiveFilters &&
+                !isSegmentsView &&
+                !isLabelView &&
+                !isActiveView
               "
+              icon="i-lucide-save"
               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" />
+              @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>
-          <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 class="w-px h-4 bg-n-strong" />
+          <ComposeConversation>
+            <template #trigger="{ toggle }">
+              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            </template>
+          </ComposeConversation>
         </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

@@ -291,17 +291,20 @@ defineExpose({
     @delete-segment="openDeleteSegmentDialog"
   >
     <template #filter>
-      <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"
-      />
+      <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>
     </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-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"
+      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"
     >
       <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,10 +96,7 @@ const openFilter = () => {
           <slot name="default" />
         </div>
       </main>
-      <footer
-        v-if="showPaginationFooter"
-        class="sticky bottom-0 z-10 px-4 pb-4"
-      >
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 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 Chatwoot.",
-      companyName: 'Chatwoot',
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
+      companyName: 'Lumora',
       countryCode: 'US',
       socialProfiles: {
         github: 'candice-dev',
@@ -16,7 +16,7 @@ export default [
       },
     },
     availabilityStatus: 'offline',
-    email: 'candice.matherson@chatwoot.com',
+    email: 'candice.matherson@lumora.com',
     id: 22,
     name: 'Candice Matherson',
     phoneNumber: '+14155552671',

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

@@ -0,0 +1,91 @@
+<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

@@ -13,99 +13,13 @@ const props = defineProps({
 });
 
 const { t } = useI18n();
+
 const { getPlainText } = useMessageFormatter();
 
-// Simple check: Is this a voice channel conversation?
-const isVoiceChannel = computed(() => {
-  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
-});
-
-// Get call direction: inbound or outbound
-const isIncomingCall = computed(() => {
-  if (!isVoiceChannel.value) return false;
-  
-  const direction = props.conversation?.additional_attributes?.call_direction;
-  return direction === 'inbound';
-});
-
-// Simple function to normalize call status
-const normalizedCallStatus = computed(() => {
-  if (!isVoiceChannel.value) return null;
-  
-  // Get the raw status directly from conversation
-  const status = props.conversation?.additional_attributes?.call_status;
-  
-  // Simple mapping of call statuses
-  if (status === 'in-progress') return 'active';
-  if (status === 'completed') return 'ended';
-  if (status === 'canceled') return 'ended';
-  if (status === 'failed') return 'ended';
-  if (status === 'busy') return 'no-answer';
-  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
-  
-  // Return the status as is for explicit values
-  if (status === 'active') return 'active';
-  if (status === 'missed') return 'missed';
-  if (status === 'ended') return 'ended';
-  if (status === 'ringing') return 'ringing';
-  
-  // If no status is set, default to 'ended'
-  return 'ended';
-});
-
-// Get formatted call status text for voice channel conversations
-const callStatusText = computed(() => {
-  if (!isVoiceChannel.value) return '';
-  
-  const status = normalizedCallStatus.value;
-  const isIncoming = isIncomingCall.value;
-  
-  if (status === 'active') {
-    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
-  }
-  
-  if (isIncoming) {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
-    }
-    
-    if (status === 'missed') {
-      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  } else {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-    }
-    
-    if (status === 'no-answer') {
-      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  }
-  
-  return isIncoming 
-    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
-    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-});
-
-// Return proper message content based on message type
 const lastNonActivityMessageContent = computed(() => {
   const { lastNonActivityMessage = {}, customAttributes = {} } =
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
-  
-  // Return special formatting for voice calls
-  if (isVoiceChannel.value) {
-    return callStatusText.value;
-  }
-  
   return getPlainText(
     subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
   );
@@ -128,59 +42,12 @@ const unreadMessagesCount = computed(() => {
 
 <template>
   <div class="flex items-end w-full gap-2 pb-1">
-    <!-- Voice Call Message -->
-    <div 
-      v-if="isVoiceChannel" 
-      class="w-full mb-0 text-sm flex items-center gap-1 pt-0.5"
-      :class="{
-        'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
-        'text-woot-600 dark:text-woot-400': normalizedCallStatus === 'active',
-        'text-red-600 dark:text-red-400': normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer',
-        'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
-      }"
-    >
-      <!-- Explicit icon based on call status -->
-      <!-- Missed call or no answer -->
-      <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
-         class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
-            
-      <!-- Active call -->
-      <i v-else-if="normalizedCallStatus === 'active'" 
-         class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
-            
-      <!-- Ended incoming call -->
-      <i v-else-if="normalizedCallStatus === 'ended' && isIncomingCall" 
-         class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
-            
-      <!-- Ended outgoing call -->
-      <i v-else-if="normalizedCallStatus === 'ended'" 
-         class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
-            
-      <!-- Ringing incoming call -->
-      <i v-else-if="isIncomingCall" 
-         class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-         :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-            
-      <!-- Ringing outgoing call -->
-      <i v-else 
-         class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-         :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-      <span class="text-current truncate">{{ callStatusText }}</span>
-      <span 
-        v-if="normalizedCallStatus === 'ringing'"
-        class="flex-shrink-0 text-xs font-medium text-green-600 dark:text-green-400"
-      >
-        ({{ t('CONVERSATION.VOICE_CALL.JOIN_CALL') }})
-      </span>
-    </div>
-    
-    <!-- Regular Message -->
-    <p v-else class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
+    <p class="w-full mb-0 text-sm leading-7 text-n-slate-12 line-clamp-2">
       {{ lastNonActivityMessageContent }}
     </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"
@@ -198,22 +65,3 @@ const unreadMessagesCount = computed(() => {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/* Animation for ringing calls */
-.pulse-animation {
-  animation: icon-pulse 1.5s infinite;
-}
-
-@keyframes icon-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>

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

@@ -24,93 +24,7 @@ const slaCardLabelRef = ref(null);
 
 const { getPlainText } = useMessageFormatter();
 
-// Simple check: Is this a voice channel conversation?
-const isVoiceChannel = computed(() => {
-  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
-});
-
-// Get call direction: inbound or outbound
-const isIncomingCall = computed(() => {
-  if (!isVoiceChannel.value) return false;
-  
-  const direction = props.conversation?.additional_attributes?.call_direction;
-  return direction === 'inbound';
-});
-
-// Simple function to normalize call status
-const normalizedCallStatus = computed(() => {
-  if (!isVoiceChannel.value) return null;
-  
-  // Get the raw status directly from conversation
-  const status = props.conversation?.additional_attributes?.call_status;
-  
-  // Simple mapping of call statuses
-  if (status === 'in-progress') return 'active';
-  if (status === 'completed') return 'ended';
-  if (status === 'canceled') return 'ended';
-  if (status === 'failed') return 'ended';
-  if (status === 'busy') return 'no-answer';
-  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
-  
-  // Return the status as is for explicit values
-  if (status === 'active') return 'active';
-  if (status === 'missed') return 'missed';
-  if (status === 'ended') return 'ended';
-  if (status === 'ringing') return 'ringing';
-  
-  // If no status is set, default to 'ended'
-  return 'ended';
-});
-
-// Get formatted call status text for voice channel conversations
-const callStatusText = computed(() => {
-  if (!isVoiceChannel.value) return '';
-  
-  const status = normalizedCallStatus.value;
-  const isIncoming = isIncomingCall.value;
-  
-  if (status === 'active') {
-    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
-  }
-  
-  if (isIncoming) {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
-    }
-    
-    if (status === 'missed') {
-      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  } else {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-    }
-    
-    if (status === 'no-answer') {
-      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  }
-  
-  return isIncoming 
-    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
-    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-});
-
 const lastNonActivityMessageContent = computed(() => {
-  // If it's a voice call, use the voice call text with icon
-  if (isVoiceChannel.value) {
-    return callStatusText.value;
-  }
-  
-  // Otherwise use the regular message content
   const { lastNonActivityMessage = {}, customAttributes = {} } =
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
@@ -147,49 +61,7 @@ defineExpose({
 <template>
   <div class="flex flex-col w-full gap-1">
     <div class="flex items-center justify-between w-full gap-2 py-1 h-7">
-      <!-- Voice Call Message display with icon -->
-      <div 
-        v-if="isVoiceChannel" 
-        class="flex items-center gap-1 mb-0 text-sm line-clamp-1"
-        :class="{
-          'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
-          'text-woot-600 dark:text-woot-400': normalizedCallStatus === 'active',
-          'text-red-600 dark:text-red-400': normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer',
-          'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
-        }"
-      >
-        <!-- Explicit icon based on call status -->
-        <!-- Missed call or no answer -->
-        <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
-           class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
-              
-        <!-- Active call -->
-        <i v-else-if="normalizedCallStatus === 'active'" 
-           class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
-              
-        <!-- Ended incoming call -->
-        <i v-else-if="normalizedCallStatus === 'ended' && isIncomingCall" 
-           class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
-              
-        <!-- Ended outgoing call -->
-        <i v-else-if="normalizedCallStatus === 'ended'" 
-           class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
-              
-        <!-- Ringing incoming call -->
-        <i v-else-if="isIncomingCall" 
-           class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-              
-        <!-- Ringing outgoing call -->
-        <i v-else 
-           class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-              
-        <span class="text-current truncate">{{ callStatusText }}</span>
-      </div>
-      
-      <!-- Regular Message display -->
-      <p v-else class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
+      <p class="mb-0 text-sm leading-7 text-n-slate-12 line-clamp-1">
         {{ lastNonActivityMessageContent }}
       </p>
 
@@ -224,6 +96,7 @@ defineExpose({
         />
       </div>
       <Avatar
+        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"
@@ -233,22 +106,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/* Animation for ringing calls */
-.pulse-animation {
-  animation: icon-pulse 1.5s infinite;
-}
-
-@keyframes icon-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>

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

@@ -4,7 +4,6 @@ import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -33,7 +32,6 @@ const props = defineProps({
 
 const router = useRouter();
 const route = useRoute();
-const { t } = useI18n();
 
 const cardMessagePreviewWithMetaRef = ref(null);
 
@@ -50,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
+  const { channelType, medium } = inbox.value;
+  return getInboxIconByType(channelType, medium);
 });
 
 const lastActivityAt = computed(() => {
@@ -59,123 +57,6 @@ const lastActivityAt = computed(() => {
   return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
 });
 
-const lastNonActivityMessage = computed(() => {
-  return props.conversation?.lastNonActivityMessage || {};
-});
-
-// Simple check: Is this a voice channel conversation?
-const isVoiceChannel = computed(() => {
-  return props.conversation?.meta?.inbox?.channel_type === 'Channel::Voice';
-});
-
-// Get call direction: inbound or outbound
-const isIncomingCall = computed(() => {
-  if (!isVoiceChannel.value) return false;
-  
-  const direction = props.conversation?.additional_attributes?.call_direction;
-  return direction === 'inbound';
-});
-
-// Simple function to normalize call status
-const normalizedCallStatus = computed(() => {
-  if (!isVoiceChannel.value) return null;
-  
-  // Get the raw status directly from conversation
-  const status = props.conversation?.additional_attributes?.call_status;
-  
-  // Simple mapping of call statuses
-  if (status === 'in-progress') return 'active';
-  if (status === 'completed') return 'ended';
-  if (status === 'canceled') return 'ended';
-  if (status === 'failed') return 'ended';
-  if (status === 'busy') return 'no-answer';
-  if (status === 'no-answer') return isIncomingCall.value ? 'missed' : 'no-answer';
-  
-  // Return the status as is for explicit values
-  if (status === 'active') return 'active';
-  if (status === 'missed') return 'missed';
-  if (status === 'ended') return 'ended';
-  if (status === 'ringing') return 'ringing';
-  
-  // If no status is set, default to 'ended'
-  return 'ended';
-});
-
-const isRingingCall = computed(() => {
-  return normalizedCallStatus.value === 'ringing';
-});
-
-const isActiveCall = computed(() => {
-  return normalizedCallStatus.value === 'active';
-});
-
-// Get formatted call status text for voice channel conversations
-const callStatusText = computed(() => {
-  if (!isVoiceChannel.value) return '';
-  
-  const status = normalizedCallStatus.value;
-  const isIncoming = isIncomingCall.value;
-  
-  if (status === 'active') {
-    return t('CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS');
-  }
-  
-  if (isIncoming) {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.INCOMING_CALL');
-    }
-    
-    if (status === 'missed') {
-      return t('CONVERSATION.VOICE_CALL.MISSED_CALL');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  } else {
-    if (status === 'ringing') {
-      return t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-    }
-    
-    if (status === 'no-answer') {
-      return t('CONVERSATION.VOICE_CALL.NO_ANSWER');
-    }
-    
-    if (status === 'ended') {
-      return t('CONVERSATION.VOICE_CALL.CALL_ENDED');
-    }
-  }
-  
-  return isIncoming 
-    ? t('CONVERSATION.VOICE_CALL.INCOMING_CALL') 
-    : t('CONVERSATION.VOICE_CALL.OUTGOING_CALL');
-});
-
-// Get icon class based on call status
-const callIconClass = computed(() => {
-  if (!isVoiceChannel.value) return '';
-  
-  const status = normalizedCallStatus.value;
-  const isIncoming = isIncomingCall.value;
-  
-  if (status === 'missed' || status === 'no-answer') {
-    return 'i-ph-phone-x-fill';
-  }
-  
-  if (status === 'active') {
-    return 'i-ph-phone-call-fill';
-  }
-  
-  if (status === 'ended' || status === 'completed') {
-    return 'i-ph-phone-fill';
-  }
-  
-  // Default phone icon for ringing state
-  return isIncoming
-    ? 'i-ph-phone-incoming-fill'
-    : 'i-ph-phone-outgoing-fill';
-});
-
 const showMessagePreviewWithoutMeta = computed(() => {
   const { labels = [] } = props.conversation;
   return (
@@ -206,21 +87,9 @@ const onCardClick = e => {
 <template>
   <div
     role="button"
-    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer relative"
-    :class="{ 
-      'border-l-2 border-green-500 dark:border-green-400': isRingingCall,
-      'border-l-2 border-woot-500 dark:border-woot-400': isActiveCall,
-      'border-l-2 border-red-500 dark:border-red-400': normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer',
-      'conversation-ringing': isRingingCall
-    }"
+    class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
-    <!-- Ringing call indicator (pulse effect) -->
-    <div 
-      v-if="isRingingCall" 
-      class="absolute left-0 top-0 bottom-0 w-0.5 bg-green-500 dark:bg-green-400 animate-pulse"
-    ></div>
-  
     <Avatar
       :name="currentContactName"
       :src="currentContactThumbnail"
@@ -239,35 +108,7 @@ const onCardClick = e => {
             v-tooltip.left="inboxName"
             class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-5"
           >
-            <!-- Special handling for voice channel with specific icons based on call status -->
-            <span
-              v-if="isVoiceChannel && normalizedCallStatus === 'missed'"
-              class="i-ph-phone-x-fill text-red-600 dark:text-red-400 size-3 inline-block"
-            ></span>
-            <span
-              v-else-if="isVoiceChannel && normalizedCallStatus === 'active'"
-              class="i-ph-phone-call-fill text-woot-600 dark:text-woot-400 size-3 inline-block"
-            ></span>
-            <span
-              v-else-if="isVoiceChannel && normalizedCallStatus === 'ended' && isIncomingCall"
-              class="i-ph-phone-incoming-fill text-n-slate-11 size-3 inline-block"
-            ></span>
-            <span
-              v-else-if="isVoiceChannel && normalizedCallStatus === 'ended'"
-              class="i-ph-phone-outgoing-fill text-n-slate-11 size-3 inline-block"
-            ></span>
-            <span
-              v-else-if="isVoiceChannel && isIncomingCall"
-              class="i-ph-phone-incoming-fill text-green-600 dark:text-green-400 size-3 inline-block"
-              :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"
-            ></span>
-            <span
-              v-else-if="isVoiceChannel"
-              class="i-ph-phone-outgoing-fill text-green-600 dark:text-green-400 size-3 inline-block"
-              :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"
-            ></span>
             <Icon
-              v-else
               :icon="inboxIcon"
               class="flex-shrink-0 text-n-slate-11 size-3"
             />
@@ -277,94 +118,16 @@ const onCardClick = e => {
           </span>
         </div>
       </div>
-      
-      <!-- Special preview for voice channel conversations -->
-      <div 
-        v-if="isVoiceChannel"
-        class="flex items-center py-1 h-7 gap-1 mb-0 text-sm line-clamp-1"
-        :class="{
-          'text-green-600 dark:text-green-400': normalizedCallStatus === 'ringing',
-          'text-woot-600 dark:text-woot-400': normalizedCallStatus === 'active',
-          'text-red-600 dark:text-red-400': normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer',
-          'text-slate-600 dark:text-slate-400': normalizedCallStatus === 'ended'
-        }"
-      >
-        <!-- Icon based on call status -->
-        <i v-if="normalizedCallStatus === 'missed' || normalizedCallStatus === 'no-answer'" 
-           class="i-ph-phone-x-fill text-base inline-block flex-shrink-0 text-red-600 dark:text-red-400 mr-1"></i>
-              
-        <i v-else-if="normalizedCallStatus === 'active'" 
-           class="i-ph-phone-call-fill text-base inline-block flex-shrink-0 text-woot-600 dark:text-woot-400 mr-1"></i>
-              
-        <i v-else-if="normalizedCallStatus === 'ended'" 
-           class="i-ph-phone-fill text-base inline-block flex-shrink-0 text-slate-600 dark:text-slate-400 mr-1"></i>
-              
-        <i v-else-if="isIncomingCall" 
-           class="i-ph-phone-incoming-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-              
-        <i v-else 
-           class="i-ph-phone-outgoing-fill text-base inline-block flex-shrink-0 text-green-600 dark:text-green-400 mr-1"
-           :class="{ 'pulse-animation': normalizedCallStatus === 'ringing' }"></i>
-              
-        <span class="text-current truncate">{{ callStatusText }}</span>
-        
-        <!-- Join now prompt for ringing calls -->
-        <span 
-          v-if="normalizedCallStatus === 'ringing'"
-          class="flex-shrink-0 text-xs font-medium text-green-600 dark:text-green-400"
-        >
-          ({{ t('CONVERSATION.VOICE_CALL.JOIN_CALL') }})
-        </span>
-      </div>
-      
-      <!-- Regular message previews for non-voice channel conversations -->
-      <template v-else>
-        <CardMessagePreview
-          v-show="showMessagePreviewWithoutMeta"
-          :conversation="conversation"
-        />
-        <CardMessagePreviewWithMeta
-          v-show="!showMessagePreviewWithoutMeta"
-          ref="cardMessagePreviewWithMetaRef"
-          :conversation="conversation"
-          :account-labels="accountLabels"
-        />
-      </template>
+      <CardMessagePreview
+        v-show="showMessagePreviewWithoutMeta"
+        :conversation="conversation"
+      />
+      <CardMessagePreviewWithMeta
+        v-show="!showMessagePreviewWithoutMeta"
+        ref="cardMessagePreviewWithMetaRef"
+        :conversation="conversation"
+        :account-labels="accountLabels"
+      />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.conversation-ringing {
-  animation: border-pulse 1.5s infinite;
-}
-
-.pulse-animation {
-  animation: icon-pulse 1.5s infinite;
-}
-
-@keyframes border-pulse {
-  0% {
-    border-color: rgba(34, 197, 94, 0.8); /* Green for ringing */
-  }
-  50% {
-    border-color: rgba(34, 197, 94, 0.2);
-  }
-  100% {
-    border-color: rgba(34, 197, 94, 0.8);
-  }
-}
-
-@keyframes icon-pulse {
-  0% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -20,6 +20,7 @@ const props = defineProps({
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
   enabledMenuOptions: { type: Array, default: () => [] },
+  enableCaptainTools: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -98,6 +99,7 @@ watch(
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
         :enabled-menu-options="enabledMenuOptions"
+        :enable-captain-tools="enableCaptainTools"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { helpers } from '@vuelidate/validators';
+import { isValidDomain } from '@chatwoot/utils';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -26,6 +29,20 @@ const formState = reactive({
   customDomain: props.customDomain,
 });
 
+const rules = {
+  customDomain: {
+    isValidDomain: helpers.withMessage(
+      () =>
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
+        ),
+      isValidDomain
+    ),
+  },
+};
+
+const v$ = useVuelidate(rules, formState);
+
 watch(
   () => props.customDomain,
   newVal => {
@@ -33,7 +50,10 @@ watch(
   }
 );
 
-const handleDialogConfirm = () => {
+const handleDialogConfirm = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
   emit('addCustomDomain', formState.customDomain);
 };
 
@@ -67,6 +87,11 @@ defineExpose({ dialogRef });
           'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
         )
       "
+      :message="
+        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
+      "
+      :message-type="v$.customDomain.$error ? 'error' : 'info'"
+      @blur="v$.customDomain.$touch()"
     />
   </Dialog>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue

@@ -1,9 +1,15 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
+import { email, required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
 
 const props = defineProps({
   customDomain: {
@@ -12,10 +18,20 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['confirm']);
+const emit = defineEmits(['send', 'close']);
 
 const { t } = useI18n();
 
+const state = reactive({
+  email: '',
+});
+
+const validationRules = {
+  email: { email, required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
 const domain = computed(() => {
   const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
   return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
@@ -25,10 +41,34 @@ const subdomainCNAME = computed(
   () => `${props.customDomain} CNAME ${domain.value}`
 );
 
+const handleCopy = async e => {
+  e.stopPropagation();
+  await copyTextToClipboard(subdomainCNAME.value);
+  useAlert(
+    t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
+    )
+  );
+};
+
 const dialogRef = ref(null);
 
-const handleDialogConfirm = () => {
-  emit('confirm');
+const resetForm = () => {
+  v$.value.$reset();
+  state.email = '';
+};
+
+const onClose = () => {
+  resetForm();
+  emit('close');
+};
+
+const handleSend = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('send', state.email);
+  onClose();
 };
 
 defineExpose({ dialogRef });
@@ -37,42 +77,103 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
-    :title="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
-      )
-    "
-    :confirm-button-label="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
-      )
-    "
     :show-cancel-button="false"
-    @confirm="handleDialogConfirm"
+    :show-confirm-button="false"
+    @close="resetForm"
   >
-    <template #description>
-      <p class="mb-0 text-sm text-n-slate-12">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
-          )
-        }}
-      </p>
-    </template>
+    <NextButton
+      icon="i-lucide-x"
+      sm
+      ghost
+      slate
+      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
+      @click="onClose"
+    />
+    <div class="flex flex-col gap-6 divide-y divide-n-strong">
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <div class="flex items-center gap-3 w-full">
+          <span
+            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+          >
+            {{ subdomainCNAME }}
+          </span>
+          <NextButton
+            faded
+            slate
+            type="button"
+            icon="i-lucide-copy"
+            class="flex-shrink-0"
+            @click="handleCopy"
+          />
+        </div>
+      </div>
 
-    <div class="flex flex-col gap-6">
-      <span
-        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-      >
-        {{ subdomainCNAME }}
-      </span>
-      <p class="text-sm text-n-slate-12">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
-          )
-        }}
-      </p>
+      <div class="flex flex-col gap-6 pt-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <form
+          class="flex items-start gap-3 w-full"
+          @submit.prevent="handleSend"
+        >
+          <Input
+            v-model="state.email"
+            :placeholder="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
+              )
+            "
+            :message="
+              v$.email.$error
+                ? t(
+                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
+                  )
+                : ''
+            "
+            :message-type="v$.email.$error ? 'error' : 'info'"
+            class="w-full"
+            @blur="v$.email.$touch()"
+          />
+          <NextButton
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
+              )
+            "
+            type="submit"
+            class="flex-shrink-0"
+          />
+        </form>
+      </div>
     </div>
   </Dialog>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers } from '@vuelidate/validators';
-import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength, helpers, url } from '@vuelidate/validators';
+import { isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -71,7 +71,7 @@ const rules = {
       isValidSlug
     ),
   },
-  homePageLink: { shouldBeUrl },
+  homePageLink: { url },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -315,7 +315,9 @@ const handleAvatarDelete = () => {
           class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
         <label
           class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';
 
 import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
 import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
@@ -11,11 +12,52 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  isFetchingStatus: {
+    type: Boolean,
+    required: true,
+  },
 });
 
-const emit = defineEmits(['updatePortalConfiguration']);
+const emit = defineEmits([
+  'updatePortalConfiguration',
+  'refreshStatus',
+  'sendCnameInstructions',
+]);
+
+const SSL_STATUS = {
+  LIVE: ['active', 'staging_active'],
+  PENDING: [
+    'provisioned',
+    'pending',
+    'initializing',
+    'pending_validation',
+    'pending_deployment',
+    'pending_issuance',
+    'holding_deployment',
+    'holding_validation',
+    'pending_expiration',
+    'pending_cleanup',
+    'pending_deletion',
+    'staging_deployment',
+    'backup_issued',
+  ],
+  ERROR: [
+    'blocked',
+    'inactive',
+    'moved',
+    'expired',
+    'deleted',
+    'timed_out_initializing',
+    'timed_out_validation',
+    'timed_out_issuance',
+    'timed_out_deployment',
+    'timed_out_deletion',
+    'deactivating',
+  ],
+};
 
 const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();
 
 const addCustomDomainDialogRef = ref(null);
 const dnsConfigurationDialogRef = ref(null);
@@ -25,6 +67,45 @@ const customDomainAddress = computed(
   () => props.activePortal?.custom_domain || ''
 );
 
+const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
+const verificationErrors = computed(
+  () => sslSettings.value.verification_errors || ''
+);
+
+const isLive = computed(() =>
+  SSL_STATUS.LIVE.includes(sslSettings.value.status)
+);
+const isPending = computed(() =>
+  SSL_STATUS.PENDING.includes(sslSettings.value.status)
+);
+const isError = computed(() =>
+  SSL_STATUS.ERROR.includes(sslSettings.value.status)
+);
+
+const statusText = computed(() => {
+  if (isLive.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
+    );
+  if (isPending.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
+    );
+  if (isError.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
+    );
+  return '';
+});
+
+const statusColors = computed(() => {
+  if (isLive.value)
+    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
+  if (isError.value)
+    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
+  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
+});
+
 const updatePortalConfiguration = customDomain => {
   const portal = {
     id: props.activePortal?.id,
@@ -42,6 +123,17 @@ const closeDNSConfigurationDialog = () => {
   updatedDomainAddress.value = '';
   dnsConfigurationDialogRef.value.dialogRef.close();
 };
+
+const onClickRefreshSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const onClickSend = email => {
+  emit('sendCnameInstructions', {
+    portalSlug: props.activePortal?.slug,
+    email,
+  });
+};
 </script>
 
 <template>
@@ -63,33 +155,76 @@ const closeDNSConfigurationDialog = () => {
       </span>
     </div>
     <div class="flex flex-col w-full gap-4">
-      <div class="flex justify-between w-full gap-2">
-        <div
-          v-if="customDomainAddress"
-          class="flex items-center w-full h-8 gap-4"
-        >
-          <label class="text-sm font-medium text-n-slate-12">
+      <div class="flex items-center justify-between w-full gap-2">
+        <div v-if="customDomainAddress" class="flex flex-col gap-1">
+          <div class="flex items-center w-full h-8 gap-4">
+            <label class="text-sm font-medium text-n-slate-12">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+                )
+              }}
+            </label>
+            <span class="text-sm text-n-slate-12">
+              {{ customDomainAddress }}
+            </span>
+          </div>
+          <span
+            v-if="!isLive && isOnChatwootCloud"
+            class="text-sm text-n-slate-11"
+          >
             {{
               t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
               )
             }}
-          </label>
-          <span class="text-sm text-n-slate-12">
-            {{ customDomainAddress }}
           </span>
         </div>
-        <div class="flex items-center justify-end w-full">
-          <Button
-            v-if="customDomainAddress"
-            color="slate"
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
-              )
-            "
-            @click="addCustomDomainDialogRef.dialogRef.open()"
-          />
+        <div class="flex items-center">
+          <div v-if="customDomainAddress" class="flex items-center gap-3">
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              v-tooltip="verificationErrors"
+              class="flex items-center gap-3 flex-shrink-0"
+            >
+              <span
+                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
+                :class="statusColors.bubble"
+              />
+              <span
+                :class="statusColors.text"
+                class="text-sm leading-[16px] font-medium"
+              >
+                {{ statusText }}
+              </span>
+            </div>
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              class="w-px h-3 bg-n-weak"
+            />
+            <Button
+              slate
+              sm
+              link
+              :label="
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+                )
+              "
+              class="hover:!no-underline flex-shrink-0"
+              @click="addCustomDomainDialogRef.dialogRef.open()"
+            />
+            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
+            <Button
+              v-if="isOnChatwootCloud"
+              slate
+              sm
+              link
+              icon="i-lucide-refresh-ccw"
+              :class="isFetchingStatus && 'animate-spin'"
+              @click="onClickRefreshSSLStatus"
+            />
+          </div>
           <Button
             v-else
             :label="
@@ -112,7 +247,8 @@ const closeDNSConfigurationDialog = () => {
     <DNSConfigurationDialog
       ref="dnsConfigurationDialogRef"
       :custom-domain="updatedDomainAddress || customDomainAddress"
-      @confirm="closeDNSConfigurationDialog"
+      @close="closeDNSConfigurationDialog"
+      @send="onClickSend"
     />
   </div>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -26,6 +26,8 @@ const emit = defineEmits([
   'updatePortal',
   'updatePortalConfiguration',
   'deletePortal',
+  'refreshStatus',
+  'sendCnameInstructions',
 ]);
 
 const { t } = useI18n();
@@ -36,6 +38,7 @@ const confirmDeletePortalDialogRef = ref(null);
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');
 
 const activePortal = computed(() => {
   return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
@@ -53,6 +56,14 @@ const handleUpdatePortalConfiguration = portal => {
   emit('updatePortalConfiguration', portal);
 };
 
+const fetchSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const handleSendCnameInstructions = payload => {
+  emit('sendCnameInstructions', payload);
+};
+
 const openConfirmDeletePortalDialog = () => {
   confirmDeletePortalDialogRef.value.dialogRef.open();
 };
@@ -85,7 +96,10 @@ const handleDeletePortal = () => {
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
+          :is-fetching-status="isFetchingSSLStatus"
           @update-portal-configuration="handleUpdatePortalConfiguration"
+          @refresh-status="fetchSSLStatus"
+          @send-cname-instructions="handleSendCnameInstructions"
         />
         <div class="w-full h-px bg-n-weak" />
         <div class="flex items-end justify-between w-full gap-4">

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
+  const { channelType, medium } = inbox.value;
+  return getInboxIconByType(channelType, medium);
 });
 
 const hasSlaThreshold = computed(() => {
@@ -63,11 +63,12 @@ const lastActivityAt = computed(() => {
 });
 
 const menuItems = computed(() => [
-  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
   {
     key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
+    icon: isUnread.value ? 'mail' : 'mail-unread',
     label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
   },
+  { key: 'delete', icon: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
 ]);
 
 const messageClasses = computed(() => ({
@@ -153,7 +154,7 @@ onBeforeMount(contextMenuActions.close);
 <template>
   <div
     role="button"
-    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
+    class="flex flex-col w-full gap-1 p-3 transition-all duration-300 ease-in-out cursor-pointer"
     @contextmenu="contextMenuActions.open($event)"
     @click="emit('click')"
   >
@@ -232,7 +233,7 @@ onBeforeMount(contextMenuActions.close);
             class="flex-shrink-0 text-n-slate-11 size-2.5"
           />
         </div>
-        <span class="text-sm text-n-slate-10">
+        <span class="text-xs text-n-slate-10">
           {{ lastActivityAt }}
         </span>
       </div>

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

@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
@@ -15,6 +16,7 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+import wootConstants from 'dashboard/constants/globals';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
@@ -37,9 +39,16 @@ const emit = defineEmits(['close']);
 
 const store = useStore();
 const { t } = useI18n();
+const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const viewInModal = computed(() => props.isModal || isSmallScreen.value);
+
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -67,7 +76,7 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
-  if (props.isModal) return '';
+  if (viewInModal.value) return '';
 
   return props.alignPosition === 'right'
     ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -179,14 +188,18 @@ const toggle = () => {
 
 watch(
   activeContact,
-  () => {
-    if (activeContact.value && props.contactId) {
-      const contactInboxes = activeContact.value?.contactInboxes || [];
+  (currentContact, previousContact) => {
+    if (currentContact && props.contactId) {
+      // Reset on contact change
+      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
+
       // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(contactInboxes);
+      const processedInboxes = processContactableInboxes(
+        currentContact.contactInboxes || []
+      );
       // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
-        ...activeContact.value,
+        ...currentContact,
         contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
       };
     }
@@ -202,7 +215,7 @@ const handleClickOutside = () => {
 };
 
 const onModalBackdropClick = () => {
-  if (!props.isModal) return;
+  if (!viewInModal.value) return;
   handleClickOutside();
 };
 
@@ -231,7 +244,7 @@ useKeyboardEvents(keyboardEvents);
     ]"
     class="relative"
     :class="{
-      'z-40': showComposeNewConversation,
+      'z-50': showComposeNewConversation && !viewInModal,
     }"
   >
     <slot
@@ -243,12 +256,12 @@ useKeyboardEvents(keyboardEvents);
       v-if="showComposeNewConversation"
       :class="{
         'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          isModal,
+          viewInModal,
       }"
       @click.self="onModalBackdropClick"
     >
       <ComposeNewConversationForm
-        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
+        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"

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

@@ -15,7 +15,6 @@ import WhatsAppOptions from './WhatsAppOptions.vue';
 const props = defineProps({
   attachedFiles: { type: Array, default: () => [] },
   isWhatsappInbox: { type: Boolean, default: false },
-  isVoiceInbox: { type: Boolean, default: false },
   isEmailOrWebWidgetInbox: { type: Boolean, default: false },
   isTwilioSmsInbox: { type: Boolean, default: false },
   messageTemplates: { type: Array, default: () => [] },
@@ -26,6 +25,7 @@ const props = defineProps({
   hasNoInbox: { type: Boolean, default: false },
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
+  inboxId: { type: Number, default: null },
 });
 
 const emit = defineEmits([
@@ -114,12 +114,6 @@ const { onFileUpload } = useFileUpload({
 });
 
 const sendButtonLabel = computed(() => {
-  // For voice inboxes, show "Make a Call" instead of "Send"
-  if (props.isVoiceInbox) {
-    return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.MAKE_CALL');
-  }
-  
-  // For all other inboxes, show the standard "Send" label
   const keyCode = isEditorHotKeyEnabled('cmd_enter') ? '⌘ + ↵' : '↵';
   return t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.SEND', {
     keyCode,
@@ -157,14 +151,15 @@ useKeyboardEvents(keyboardEvents);
   <div
     class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex gap-2 items-center">
       <WhatsAppOptions
         v-if="isWhatsappInbox"
+        :inbox-id="inboxId"
         :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
       <div
-        v-if="!isWhatsappInbox && !isVoiceInbox && !hasNoInbox"
+        v-if="!isWhatsappInbox && !hasNoInbox"
         v-on-click-outside="() => (isEmojiPickerOpen = false)"
         class="relative"
       >
@@ -177,7 +172,7 @@ useKeyboardEvents(keyboardEvents);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="left-0 top-full mt-1.5"
+          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
           :on-click="onClickInsertEmoji"
         />
       </div>
@@ -204,7 +199,7 @@ useKeyboardEvents(keyboardEvents);
         />
       </FileUpload>
       <Button
-        v-if="hasSelectedInbox && !isWhatsappInbox && !isVoiceInbox"
+        v-if="hasSelectedInbox && !isWhatsappInbox"
         icon="i-lucide-signature"
         color="slate"
         size="sm"
@@ -213,7 +208,7 @@ useKeyboardEvents(keyboardEvents);
       />
     </div>
 
-    <div class="flex items-center gap-2">
+    <div class="flex gap-2 items-center">
       <Button
         :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
         variant="faded"
@@ -224,7 +219,6 @@ useKeyboardEvents(keyboardEvents);
       />
       <Button
         v-if="!isWhatsappInbox"
-        :icon="isVoiceInbox ? 'i-ri-phone-fill' : undefined"
         :label="sendButtonLabel"
         size="sm"
         class="!text-xs font-medium"

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

@@ -57,7 +57,7 @@ const removeAttachment = id => {
           variant="ghost"
           icon="i-lucide-trash"
           color="slate"
-          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          class="absolute top-1 ltr:right-1 rtl:left-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
           @click="removeAttachment(attachment.resource.id)"
         />
       </div>

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

@@ -68,7 +68,6 @@ const inboxTypes = computed(() => ({
   isWhatsapp: props.targetInbox?.channelType === INBOX_TYPES.WHATSAPP,
   isWebWidget: props.targetInbox?.channelType === INBOX_TYPES.WEB,
   isApi: props.targetInbox?.channelType === INBOX_TYPES.API,
-  isVoice: props.targetInbox?.channelType === INBOX_TYPES.VOICE,
   isEmailOrWebWidget:
     props.targetInbox?.channelType === INBOX_TYPES.EMAIL ||
     props.targetInbox?.channelType === INBOX_TYPES.WEB,
@@ -88,7 +87,7 @@ const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 const validationRules = computed(() => ({
   selectedContact: { required },
   targetInbox: { required },
-  message: { required: requiredIf(!inboxTypes.value.isWhatsapp && !inboxTypes.value.isVoice) },
+  message: { required: requiredIf(!inboxTypes.value.isWhatsapp) },
   subject: { required: requiredIf(inboxTypes.value.isEmail) },
 }));
 
@@ -266,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <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"
+    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"
   >
     <ContactSelector
       :contacts="contacts"
@@ -312,7 +311,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     />
 
     <MessageEditor
-      v-if="!inboxTypes.isWhatsapp && !inboxTypes.isVoice && !showNoInboxAlert"
+      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
       v-model="state.message"
       :message-signature="messageSignature"
       :send-with-signature="sendWithSignature"
@@ -322,7 +321,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     />
 
     <AttachmentPreviews
-      v-if="state.attachedFiles.length > 0 && !inboxTypes.isVoice"
+      v-if="state.attachedFiles.length > 0"
       :attachments="state.attachedFiles"
       @update:attachments="state.attachedFiles = $event"
     />
@@ -330,7 +329,6 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     <ActionButtons
       :attached-files="state.attachedFiles"
       :is-whatsapp-inbox="inboxTypes.isWhatsapp"
-      :is-voice-inbox="inboxTypes.isVoice"
       :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
       :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
       :message-templates="whatsappMessageTemplates"
@@ -338,6 +336,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"
+      :inbox-id="targetInbox?.id"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
       :message-signature="messageSignature"

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

@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
       <DropdownMenu
         v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
         :menu-items="contactableInboxesList"
-        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

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

@@ -1,23 +1,25 @@
 <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 WhatsappTemplateParser from './WhatsappTemplateParser.vue';
+import WhatsappTemplate from './WhatsappTemplate.vue';
 
 const props = defineProps({
-  messageTemplates: {
-    type: Array,
-    default: () => [],
+  inboxId: {
+    type: Number,
+    required: true,
   },
 });
 
 const emit = defineEmits(['sendMessage']);
 
 const { t } = useI18n();
-
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+const getFilteredWhatsAppTemplates = useMapGetter(
+  'inboxes/getFilteredWhatsAppTemplates'
+);
 
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
@@ -25,19 +27,7 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);
 
 const whatsAppTemplateMessages = computed(() => {
-  // Add null check and ensure it's an array
-  const templates = Array.isArray(props.messageTemplates)
-    ? props.messageTemplates
-    : [];
-
-  // TODO: Remove the last filter when we support all formats
-  return templates
-    .filter(template => template?.status?.toLowerCase() === 'approved')
-    .filter(template => {
-      return template?.components?.every(component => {
-        return !formatsToRemove.includes(component.format);
-      });
-    });
+  return getFilteredWhatsAppTemplates.value(props.inboxId);
 });
 
 const filteredTemplates = computed(() => {
@@ -84,10 +74,13 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-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"
+      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="relative w-full">
-        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <Icon
+          icon="i-lucide-search"
+          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
         <input
           v-model="searchQuery"
           type="search"
@@ -96,13 +89,13 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
         v-for="template in filteredTemplates"
         :key="template.id"
-        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        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)"
       >
         <span class="text-sm text-n-slate-12">{{ template.name }}</span>
@@ -111,12 +104,12 @@ const handleSendMessage = template => {
         </p>
       </div>
       <template v-if="filteredTemplates.length === 0">
-        <p class="w-full pt-2 text-sm text-n-slate-11">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
           {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
         </p>
       </template>
     </div>
-    <WhatsappTemplateParser
+    <WhatsappTemplate
       v-if="selectedTemplate"
       :template="selectedTemplate"
       @send-message="handleSendMessage"

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

@@ -0,0 +1,64 @@
+<script setup>
+import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.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">
+      <WhatsAppTemplateParser
+        :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(
+                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+                )
+              "
+              color="slate"
+              variant="faded"
+              class="w-full font-medium"
+              @click="goBack"
+            />
+            <Button
+              :label="
+                t(
+                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+                )
+              "
+              class="w-full font-medium"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </WhatsAppTemplateParser>
+    </div>
+  </div>
+</template>

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

@@ -106,7 +106,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-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"
+    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">
       {{
@@ -138,7 +138,8 @@ onMounted(() => {
       class="flex items-center w-full gap-2"
     >
       <span
-        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
+        :title="key"
       >
         {{ key }}
       </span>

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

@@ -8,9 +8,8 @@ const CHANNEL_PRIORITY = {
   'Channel::Whatsapp': 2,
   'Channel::Sms': 3,
   'Channel::TwilioSms': 4,
-  'Channel::Voice': 5,
-  'Channel::WebWidget': 6,
-  'Channel::Api': 7,
+  'Channel::WebWidget': 5,
+  'Channel::Api': 6,
 };
 
 export const generateLabelForContactableInboxesList = ({
@@ -24,8 +23,7 @@ export const generateLabelForContactableInboxesList = ({
   }
   if (
     channelType === INBOX_TYPES.TWILIO ||
-    channelType === INBOX_TYPES.WHATSAPP ||
-    channelType === INBOX_TYPES.VOICE
+    channelType === INBOX_TYPES.WHATSAPP
   ) {
     return `${name} (${phoneNumber})`;
   }
@@ -38,10 +36,11 @@ const transformInbox = ({
   email,
   channelType,
   phoneNumber,
+  medium,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  icon: getInboxIconByType(channelType, medium, 'line'),
   label: generateLabelForContactableInboxesList({
     name,
     email,