fix(twilio): fall back to phone lookup when MessagingServiceSid is unknown

Twilio includes `MessagingServiceSid` on inbound webhooks whenever the
number is part of a Messaging Service pool on Twilio's side (required
for US A2P 10DLC), even for Chatwoot channels registered by phone number
alone. The signature-verify concern was rejecting those webhooks with
403 because lookup-by-MSS returned nil and did not fall through.

Only reject outright when the MSS does resolve to a channel but the
AccountSid mismatches — the cross-tenant guard from the earlier review
is preserved.

.github/workflows/deploy_check.yml

@@ -11,9 +11,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   deployment_check:
     name: Check Deployment

.github/workflows/frontend-fe.yml

@@ -8,9 +8,6 @@ on:
     branches:
       - develop
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/ghsa-linear-sync.yml

@@ -1,97 +0,0 @@
-name: Sync GHSA advisories to Linear
-
-on:
-  schedule:
-    - cron: '0 4 * * *'  # daily at 09:30 IST
-  workflow_dispatch: {}
-
-jobs:
-  sync:
-    runs-on: ubuntu-latest
-    permissions:
-      security-events: read
-    steps:
-      - name: Fetch triage advisories
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          gh api --paginate \
-            -H "Accept: application/vnd.github+json" \
-            "/repos/${{ github.repository }}/security-advisories?state=triage&per_page=100" \
-            | jq -cs 'add | [.[] | {
-                ghsa_id, cve_id, summary, severity, state, html_url,
-                description, created_at,
-                cvss_score: .cvss.score,
-                reporter: ([.credits[]?.user.login] | first // "unknown")
-              }]' > advisories.json
-          echo "Fetched $(jq 'length' advisories.json) triage advisories"
-
-      - name: Create Linear issues for new advisories
-        env:
-          LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
-          LINEAR_TEAM_ID: ${{ secrets.LINEAR_TEAM_ID }}
-          LINEAR_PROJECT_ID: ${{ secrets.LINEAR_PROJECT_ID }}
-          LINEAR_LABEL_ID: ${{ secrets.LINEAR_LABEL_ID }}
-        run: |
-          created_count=0
-          skipped_count=0
-          failed_count=0
-          while read -r advisory; do
-            ghsa_id=$(printf '%s' "$advisory" | jq -r '.ghsa_id')
-            summary=$(printf '%s' "$advisory" | jq -r '.summary')
-            severity=$(printf '%s' "$advisory" | jq -r '.severity // "unknown"')
-            cve_id=$(printf '%s' "$advisory" | jq -r '.cve_id // "n/a"')
-            cvss=$(printf '%s' "$advisory" | jq -r '.cvss_score // "n/a"')
-            reporter=$(printf '%s' "$advisory" | jq -r '.reporter')
-            html_url=$(printf '%s' "$advisory" | jq -r '.html_url')
-            created_date=$(printf '%s' "$advisory" | jq -r '.created_at' | cut -dT -f1)
-            description=$(printf '%s' "$advisory" | jq -r '.description // "No description provided."')
-
-            existing=$(curl -s -X POST https://api.linear.app/graphql \
-              -H "Content-Type: application/json" \
-              -H "Authorization: $LINEAR_API_KEY" \
-              -d "$(jq -n --arg q "$ghsa_id" '{query: "query($q: String!) { issues(filter: {title: {contains: $q}}, first: 1) { nodes { id } } }", variables: {q: $q}}')" \
-              | jq '.data.issues.nodes | length')
-
-            if [ "${existing:-0}" -gt 0 ] 2>/dev/null; then
-              skipped_count=$((skipped_count+1))
-              continue
-            fi
-
-            priority=3
-            case "$severity" in
-              critical) priority=1 ;;
-              high)     priority=2 ;;
-              medium)   priority=3 ;;
-              low)      priority=4 ;;
-            esac
-
-            title="[$ghsa_id] $summary"
-            body=$(printf '**GHSA:** %s\n**CVE:** %s\n**Severity:** %s (CVSS %s)\n**Reporter:** %s\n**Reported:** %s\n**Advisory:** %s\n\n---\n\n%s' \
-              "$ghsa_id" "$cve_id" "$severity" "$cvss" "$reporter" "$created_date" "$html_url" "$description")
-
-            success=$(curl -s -X POST https://api.linear.app/graphql \
-              -H "Content-Type: application/json" \
-              -H "Authorization: $LINEAR_API_KEY" \
-              -d "$(jq -n \
-                --arg title "$title" \
-                --arg body "$body" \
-                --arg teamId "$LINEAR_TEAM_ID" \
-                --arg projectId "$LINEAR_PROJECT_ID" \
-                --arg labelId "$LINEAR_LABEL_ID" \
-                --argjson priority "$priority" \
-                '{
-                  query: "mutation($input: IssueCreateInput!) { issueCreate(input: $input) { success } }",
-                  variables: {input: {title: $title, description: $body, teamId: $teamId, projectId: $projectId, labelIds: [$labelId], priority: $priority}}
-                }')" | jq -r '.data.issueCreate.success // false')
-
-            if [ "$success" = "true" ]; then
-              created_count=$((created_count+1))
-            else
-              failed_count=$((failed_count+1))
-            fi
-          done < <(jq -c '.[]' advisories.json)
-          echo "Created $created_count, skipped $skipped_count, failed $failed_count"
-          if [ "$failed_count" -gt 0 ]; then
-            exit 1
-          fi

.github/workflows/logging_percentage_check.yml

@@ -10,9 +10,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   log_lines_check:
     runs-on: ubuntu-latest

.github/workflows/nightly_installer.yml

@@ -14,9 +14,6 @@ on:
     - cron: "0 0 * * *"
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   nightly:
     runs-on: ubuntu-24.04

.github/workflows/publish_codespace_image.yml

@@ -3,10 +3,6 @@ name: Publish Codespace Base Image
 on:
   workflow_dispatch:
 
-permissions:
-  contents: read
-  packages: write
-
 jobs:
   publish-code-space-image:
     runs-on: ubuntu-latest

.github/workflows/publish_ee_docker.yml

@@ -18,9 +18,6 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
-permissions:
-  contents: read
-
 jobs:
   build:
     strategy:

.github/workflows/publish_foss_docker.yml

@@ -18,9 +18,6 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
-permissions:
-  contents: read
-
 jobs:
   build:
     strategy:

.github/workflows/size-limit.yml

@@ -10,9 +10,6 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/test_docker_build.yml

@@ -7,9 +7,6 @@ on:
       - master
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   test-build:
     strategy:

Gemfile

@@ -22,7 +22,6 @@ gem 'time_diff'
 gem 'tzinfo-data'
 gem 'valid_email2'
 gem 'email-provider-info'
-gem 'gemoji'
 # compress javascript config.assets.js_compressor
 gem 'uglifier'
 ##-- used for single column multiple binary flags in notification settings/feature flagging --##
@@ -85,7 +84,6 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
-gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization

Gemfile.lock

@@ -108,8 +108,8 @@ GEM
     acts-as-taggable-on (12.0.0)
       activerecord (>= 7.1, < 8.1)
       zeitwerk (>= 2.4, < 3.0)
-    addressable (2.9.0)
-      public_suffix (>= 2.0.2, < 8.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -349,7 +349,6 @@ GEM
       googleapis-common-protos-types (>= 1.3.1, < 2.a)
       googleauth (~> 1.0)
       grpc (~> 1.36)
-    gemoji (4.1.0)
     geocoder (1.8.1)
     gli (2.22.2)
       ostruct
@@ -677,7 +676,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (7.0.5)
+    public_suffix (6.0.2)
     puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.3.0)
@@ -728,9 +727,6 @@ 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)
-    rails-i18n (7.0.10)
-      i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 8)
     railties (7.1.5.2)
       actionpack (= 7.1.5.2)
       activesupport (= 7.1.5.2)
@@ -1076,7 +1072,6 @@ DEPENDENCIES
   fcm
   flag_shih_tzu
   foreman
-  gemoji
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)
@@ -1130,7 +1125,6 @@ DEPENDENCIES
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
   rails (~> 7.1)
-  rails-i18n (~> 7.0)
   redis
   redis-namespace
   responders (>= 3.1.1)

app/builders/account_builder.rb

@@ -44,11 +44,7 @@ class AccountBuilder
   end
 
   def create_account
-    @account = Account.create!(
-      name: account_name,
-      locale: I18n.locale,
-      custom_attributes: { 'onboarding_step' => 'account_details' }
-    )
+    @account = Account.create!(name: account_name, locale: I18n.locale)
     Current.account = @account
   end
 

app/builders/agent_builder.rb

@@ -29,9 +29,8 @@ class AgentBuilder
     user = User.from_email(email)
     return user if user
 
-    @name = email.split('@').first if @name.blank?
     temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
-    User.create!(email: email, name: @name, password: temp_password, password_confirmation: temp_password)
+    User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
   end
 
   # Checks if the user needs confirmation.

app/controllers/api/v1/accounts/articles/bulk_actions_controller.rb

@@ -1,43 +0,0 @@
-class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::BaseController
-  before_action :portal
-  before_action :check_authorization
-  before_action :set_articles, only: [:update_status, :delete_articles]
-
-  def translate
-    head :not_implemented
-  end
-
-  def update_status
-    return render_could_not_create_error(I18n.t('portals.articles.no_articles_found')) if @articles.none?
-    return render_could_not_create_error(I18n.t('portals.articles.invalid_status')) unless Article.statuses.key?(params[:status])
-
-    ActiveRecord::Base.transaction do
-      @articles.find_each { |article| article.update!(status: params[:status]) }
-    end
-    head :ok
-  rescue ActiveRecord::RecordInvalid => e
-    render_could_not_create_error(e.message)
-  end
-
-  def delete_articles
-    return render_could_not_create_error(I18n.t('portals.articles.no_articles_found')) if @articles.none?
-
-    @articles.destroy_all
-    head :ok
-  end
-
-  private
-
-  def portal
-    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
-  end
-
-  def check_authorization
-    authorize(Article, :create?)
-  end
-
-  def set_articles
-    @articles = @portal.articles.where(id: params[:ids])
-  end
-end
-Api::V1::Accounts::Articles::BulkActionsController.prepend_mod_with('Api::V1::Accounts::Articles::BulkActionsController')

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   sort_on :phone_number, type: :string
   sort_on :last_activity_at, internal_name: :order_on_last_activity_at, type: :scope, scope_params: [:direction]
   sort_on :created_at, internal_name: :order_on_created_at, type: :scope, scope_params: [:direction]
-  sort_on :company_name, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
+  sort_on :company, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
   sort_on :city, internal_name: :order_on_city, type: :scope, scope_params: [:direction]
   sort_on :country, internal_name: :order_on_country_name, type: :scope, scope_params: [:direction]
 

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

@@ -61,8 +61,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def process_attached_logo
-    blob = ActiveStorage::Blob.find_signed(params[:blob_id].to_s)
-    @portal.logo.attach(blob) if blob
+    blob_id = params[:blob_id]
+    blob = ActiveStorage::Blob.find_signed(blob_id)
+    @portal.logo.attach(blob)
   end
 
   private

app/controllers/api/v1/accounts_controller.rb

@@ -58,7 +58,6 @@ class Api::V1::AccountsController < Api::BaseController
     @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
     @account.settings.merge!(settings_params)
-    @account.custom_attributes.delete('onboarding_step') if @account.custom_attributes['onboarding_step'] == 'account_details'
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end
@@ -72,10 +71,9 @@ class Api::V1::AccountsController < Api::BaseController
   private
 
   def enqueue_branding_enrichment
-    email = account_params[:email].presence || @user&.email
-    return if email.blank?
+    return if account_params[:email].blank?
 
-    Account::BrandingEnrichmentJob.perform_later(@account.id, email)
+    Account::BrandingEnrichmentJob.perform_later(@account.id, account_params[:email])
     Redis::Alfred.set(format(Redis::Alfred::ACCOUNT_ONBOARDING_ENRICHMENT, account_id: @account.id), '1', ex: 30)
   rescue StandardError => e
     # Enrichment is optional — never let queue/Redis failures abort signup
@@ -111,7 +109,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role)
+    params.permit(:industry, :company_size, :timezone)
   end
 
   def settings_params

app/controllers/api/v1/profile/mfa_controller.rb

@@ -2,8 +2,8 @@ class Api::V1::Profile::MfaController < Api::BaseController
   before_action :check_mfa_feature_available
   before_action :check_mfa_enabled, only: [:destroy, :backup_codes]
   before_action :check_mfa_disabled, only: [:create, :verify]
-  before_action :validate_password, only: [:destroy]
   before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
+  before_action :validate_password, only: [:destroy]
 
   def show; end
 
@@ -48,8 +48,7 @@ class Api::V1::Profile::MfaController < Api::BaseController
   def validate_otp
     authenticated = Mfa::AuthenticationService.new(
       user: current_user,
-      otp_code: mfa_params[:otp_code],
-      backup_code: mfa_params[:backup_code]
+      otp_code: mfa_params[:otp_code]
     ).authenticate
 
     return if authenticated
@@ -64,6 +63,6 @@ class Api::V1::Profile::MfaController < Api::BaseController
   end
 
   def mfa_params
-    params.permit(:otp_code, :backup_code, :password)
+    params.permit(:otp_code, :password)
   end
 end

app/controllers/concerns/meta_token_verify_concern.rb

@@ -2,10 +2,6 @@
 # This concern handles the token verification step.
 
 module MetaTokenVerifyConcern
-  CHANNEL_APP_SECRET_KEYS = %w[app_secret app_secret_key client_secret api_secret].freeze
-  META_SIGNATURE_HEADER = 'X-Hub-Signature-256'.freeze
-  META_SIGNATURE_PREFIX = 'sha256='.freeze
-
   def verify
     service = is_a?(Webhooks::WhatsappController) ? 'whatsapp' : 'instagram'
     if valid_token?(params['hub.verify_token'])
@@ -18,53 +14,6 @@ module MetaTokenVerifyConcern
 
   private
 
-  def verify_meta_signature!
-    return unless meta_signature_verification_required?
-    return if valid_meta_signature?
-
-    head :unauthorized
-  end
-
-  def valid_meta_signature?
-    signature = request.headers[META_SIGNATURE_HEADER]
-    return false unless signature&.start_with?(META_SIGNATURE_PREFIX)
-
-    meta_app_secrets.any? do |secret|
-      next false if secret.blank?
-
-      expected_signature = "#{META_SIGNATURE_PREFIX}#{OpenSSL::HMAC.hexdigest('SHA256', secret, meta_request_body)}"
-      ActiveSupport::SecurityUtils.secure_compare(expected_signature, signature)
-    end
-  end
-
-  def meta_request_body
-    @meta_request_body ||= request.raw_post
-  end
-
-  def meta_app_secrets
-    raise 'Overwrite this method in your controller'
-  end
-
-  def meta_signature_verification_required?
-    true
-  end
-
-  def channel_meta_app_secrets(channel)
-    return [] if channel.blank?
-
-    secrets = []
-    secrets << channel.app_secret if channel.respond_to?(:app_secret)
-    secrets.concat(provider_config_meta_app_secrets(channel))
-    secrets.compact_blank.uniq
-  end
-
-  def provider_config_meta_app_secrets(channel)
-    return [] unless channel.respond_to?(:provider_config)
-
-    provider_config = channel.provider_config.to_h.with_indifferent_access
-    CHANNEL_APP_SECRET_KEYS.filter_map { |key| provider_config[key].presence }
-  end
-
   def valid_token?(_token)
     raise 'Overwrite this method your controller'
   end

app/controllers/concerns/twilio_signature_verify_concern.rb

@@ -0,0 +1,90 @@
+module TwilioSignatureVerifyConcern
+  extend ActiveSupport::Concern
+
+  included do
+    before_action :verify_twilio_signature!
+  end
+
+  private
+
+  def verify_twilio_signature!
+    channel = find_twilio_channel
+    return log_and_reject_missing_channel if channel.blank?
+    return if channel.api_key_sid.present? && log_api_key_skip(channel)
+
+    head :forbidden unless valid_signature?(channel)
+  end
+
+  def log_and_reject_missing_channel
+    Rails.logger.warn(
+      '[TWILIO] Channel not found for webhook ' \
+      "account_sid=#{params[:AccountSid]} messaging_service_sid=#{params[:MessagingServiceSid]} " \
+      "to=#{params[:To]} from=#{params[:From]}"
+    )
+    head :forbidden
+  end
+
+  def log_api_key_skip(channel)
+    Rails.logger.warn(
+      '[TWILIO] Signature validation skipped: channel uses API key authentication. ' \
+      "account_sid=#{params[:AccountSid]} channel_id=#{channel.id}"
+    )
+  end
+
+  def valid_signature?(channel)
+    signature = request.headers['X-Twilio-Signature']
+    if signature.blank?
+      Rails.logger.warn("[TWILIO] Missing X-Twilio-Signature header account_sid=#{params[:AccountSid]}")
+      return false
+    end
+
+    validator = Twilio::Security::RequestValidator.new(channel.auth_token)
+    request_url = reconstruct_url
+    return true if validator.validate(request_url, request.request_parameters, signature)
+
+    Rails.logger.warn(
+      '[TWILIO] Signature validation failed ' \
+      "account_sid=#{params[:AccountSid]} channel_id=#{channel.id} url=#{request_url} ip=#{request.remote_ip}"
+    )
+    false
+  end
+
+  def find_twilio_channel
+    if params[:MessagingServiceSid].present?
+      channel = ::Channel::TwilioSms.find_by(messaging_service_sid: params[:MessagingServiceSid])
+      if channel.present?
+        return channel if params[:AccountSid].blank? || channel.account_sid == params[:AccountSid]
+
+        return nil
+      end
+    end
+    return if params[:AccountSid].blank?
+
+    find_channel_by_phone_number
+  end
+
+  def find_channel_by_phone_number
+    channel_lookup_phone_numbers.each do |phone|
+      channel = ::Channel::TwilioSms.find_by(account_sid: params[:AccountSid], phone_number: phone)
+      return channel if channel
+    end
+    nil
+  end
+
+  def channel_lookup_phone_numbers
+    [params[:To], params[:From]].compact_blank
+  end
+
+  def reconstruct_url
+    url = request.original_url
+    url = url.sub('http://', 'https://') if url.start_with?('http://') && https_request?
+    url
+  end
+
+  def https_request?
+    return true if request.ssl?
+
+    forwarded_proto = request.headers['X-Forwarded-Proto'].to_s.split(',').map(&:strip).find(&:present?)
+    forwarded_proto&.casecmp?('https')
+  end
+end

app/controllers/dashboard_controller.rb

@@ -80,17 +80,10 @@ class DashboardController < ActionController::Base
       IS_ENTERPRISE: ChatwootApp.enterprise?,
       AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
       GIT_SHA: GIT_HASH,
-      ALLOWED_LOGIN_METHODS: allowed_login_methods,
-      ACTIVE_PLATFORM_BANNERS: active_platform_banners
+      ALLOWED_LOGIN_METHODS: allowed_login_methods
     }
   end
 
-  def active_platform_banners
-    return [] unless ChatwootApp.chatwoot_cloud?
-
-    PlatformBanner.active.order(created_at: :desc).as_json(only: %i[id banner_message banner_type updated_at])
-  end
-
   def allowed_login_methods
     methods = ['email']
     methods << 'google_oauth' if GlobalConfigService.load('ENABLE_GOOGLE_OAUTH_LOGIN', 'true').to_s != 'false'

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

@@ -3,7 +3,7 @@ class Platform::Api::V1::AgentBotsController < PlatformController
   before_action :validate_platform_app_permissible, except: [:index, :create]
 
   def index
-    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').includes(:permissible)
+    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').all
   end
 
   def show; end

app/controllers/super_admin/platform_banners_controller.rb

@@ -1,9 +0,0 @@
-class SuperAdmin::PlatformBannersController < SuperAdmin::ApplicationController
-  before_action :ensure_chatwoot_cloud
-
-  private
-
-  def ensure_chatwoot_cloud
-    raise ActionController::RoutingError, 'Not Found' unless ChatwootApp.chatwoot_cloud?
-  end
-end

app/controllers/twilio/callback_controller.rb

@@ -1,4 +1,6 @@
 class Twilio::CallbackController < ApplicationController
+  include TwilioSignatureVerifyConcern
+
   def create
     Webhooks::TwilioEventsJob.perform_later(permitted_params.to_unsafe_hash)
 

app/controllers/twilio/delivery_status_controller.rb

@@ -1,4 +1,6 @@
 class Twilio::DeliveryStatusController < ApplicationController
+  include TwilioSignatureVerifyConcern
+
   def create
     Webhooks::TwilioDeliveryStatusJob.perform_later(permitted_params.to_unsafe_hash)
 
@@ -18,4 +20,8 @@ class Twilio::DeliveryStatusController < ApplicationController
       :ErrorMessage
     )
   end
+
+  def channel_lookup_phone_numbers
+    [params[:From]].compact_blank
+  end
 end

app/controllers/webhooks/instagram_controller.rb

@@ -1,8 +1,6 @@
 class Webhooks::InstagramController < ActionController::API
   include MetaTokenVerifyConcern
 
-  before_action :verify_meta_signature!, only: :events
-
   def events
     Rails.logger.info('Instagram webhook received events')
     if params['object'].casecmp('instagram').zero?
@@ -41,38 +39,4 @@ class Webhooks::InstagramController < ActionController::API
     token == GlobalConfigService.load('IG_VERIFY_TOKEN', '') ||
       token == GlobalConfigService.load('INSTAGRAM_VERIFY_TOKEN', '')
   end
-
-  def meta_app_secrets
-    [
-      *instagram_channel_meta_app_secrets,
-      GlobalConfigService.load('INSTAGRAM_APP_SECRET', nil),
-      GlobalConfigService.load('FB_APP_SECRET', nil)
-    ]
-  end
-
-  def instagram_channel_meta_app_secrets
-    instagram_channels_from_payload.flat_map { |channel| channel_meta_app_secrets(channel) }
-  end
-
-  def instagram_channels_from_payload
-    Array(params.to_unsafe_hash[:entry]).flat_map do |entry|
-      instagram_ids_from_entry(entry.with_indifferent_access).flat_map do |instagram_id|
-        [
-          Channel::Instagram.find_by(instagram_id: instagram_id),
-          Channel::FacebookPage.find_by(instagram_id: instagram_id)
-        ]
-      end
-    end.compact.uniq
-  end
-
-  def instagram_ids_from_entry(entry)
-    messages = entry[:messaging].presence || entry[:standby] || []
-    messages.filter_map { |messaging| instagram_id_from_messaging(messaging.with_indifferent_access) }
-  end
-
-  def instagram_id_from_messaging(messaging)
-    return messaging.dig(:sender, :id) if messaging.dig(:message, :is_echo).present?
-
-    messaging.dig(:recipient, :id)
-  end
 end

app/controllers/webhooks/whatsapp_controller.rb

@@ -1,8 +1,6 @@
 class Webhooks::WhatsappController < ActionController::API
   include MetaTokenVerifyConcern
 
-  before_action :verify_meta_signature!, only: :process_payload
-
   def process_payload
     if inactive_whatsapp_number?
       Rails.logger.warn("Rejected webhook for inactive WhatsApp number: #{params[:phone_number]}")
@@ -22,45 +20,6 @@ class Webhooks::WhatsappController < ActionController::API
     token == whatsapp_webhook_verify_token if whatsapp_webhook_verify_token.present?
   end
 
-  def meta_app_secrets
-    [
-      *channel_meta_app_secrets(whatsapp_channel),
-      GlobalConfigService.load('WHATSAPP_APP_SECRET', nil)
-    ]
-  end
-
-  def whatsapp_channel
-    @whatsapp_channel ||= whatsapp_business_payload_channel || Channel::Whatsapp.find_by(phone_number: params[:phone_number])
-  end
-
-  def meta_signature_verification_required?
-    return true if whatsapp_channel.blank?
-    return false unless whatsapp_channel.provider == 'whatsapp_cloud'
-    return true if channel_meta_app_secrets(whatsapp_channel).present?
-
-    whatsapp_channel.provider_config['source'] == 'embedded_signup'
-  end
-
-  def whatsapp_business_payload_channel
-    return unless params[:object] == 'whatsapp_business_account'
-
-    metadata = params.dig(:entry, 0, :changes, 0, :value, :metadata)
-    return if metadata.blank?
-
-    phone_number = normalized_phone_number(metadata[:display_phone_number])
-    phone_number_id = metadata[:phone_number_id]
-    channel = Channel::Whatsapp.find_by(phone_number: phone_number)
-
-    return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
-  end
-
-  def normalized_phone_number(phone_number)
-    return if phone_number.blank?
-
-    phone_number = phone_number.to_s
-    phone_number.start_with?('+') ? phone_number : "+#{phone_number}"
-  end
-
   def inactive_whatsapp_number?
     phone_number = params[:phone_number]
     return false if phone_number.blank?

app/dashboards/platform_banner_dashboard.rb

@@ -1,20 +0,0 @@
-require 'administrate/base_dashboard'
-
-class PlatformBannerDashboard < Administrate::BaseDashboard
-  ATTRIBUTE_TYPES = {
-    id: Field::Number,
-    banner_message: Field::Text.with_options(truncate: 200),
-    banner_type: Field::Select.with_options(collection: %w[info warning error]),
-    active: Field::Boolean,
-    created_at: Field::DateTime,
-    updated_at: Field::DateTime
-  }.freeze
-
-  COLLECTION_ATTRIBUTES = %i[id banner_message banner_type active created_at].freeze
-  SHOW_PAGE_ATTRIBUTES = %i[id banner_message banner_type active created_at updated_at].freeze
-  FORM_ATTRIBUTES = %i[banner_message banner_type active].freeze
-
-  def display_resource(platform_banner)
-    "Banner ##{platform_banner.id} (#{platform_banner.banner_type})"
-  end
-end

app/drops/user_drop.rb

@@ -7,15 +7,11 @@ class UserDrop < BaseDrop
     @obj.try(:available_name)
   end
 
-  def email
-    @obj.try(:email)
-  end
-
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 
   def last_name
-    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 end

app/finders/message_finder.rb

@@ -48,5 +48,3 @@ class MessageFinder
     messages.reorder('created_at desc').limit(20).reverse
   end
 end
-
-MessageFinder.prepend_mod_with('MessageFinder')

app/helpers/email_helper.rb

@@ -7,7 +7,7 @@ module EmailHelper
   def render_email_html(content)
     return '' if content.blank?
 
-    ChatwootMarkdownRenderer.new(content).render_message(hardbreaks: true).to_s
+    ChatwootMarkdownRenderer.new(content).render_message.to_s
   end
 
   # Raise a standard error if any email address is invalid

app/javascript/dashboard/App.vue

@@ -3,7 +3,6 @@ import { mapGetters } from 'vuex';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
-import StatusBanner from './components/app/StatusBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -28,7 +27,6 @@ export default {
     LoadingState,
     NetworkNotification,
     UpdateBanner,
-    StatusBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
@@ -61,6 +59,7 @@ export default {
       isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
+      accountUIFlags: 'accounts/getUIFlags',
     }),
     hideOnOnboardingView() {
       return !isOnOnboardingView(this.$route);
@@ -108,9 +107,8 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
-      const account = this.getAccount(this.currentAccountId);
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        account;
+        this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       // If user locale is set, use it; otherwise use account locale
       this.setLocale(this.uiSettings?.locale || locale);
@@ -133,13 +131,12 @@ export default {
 
 <template>
   <div
-    v-if="!authUIFlags.isFetching"
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
     class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
-    <StatusBanner />
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -68,7 +68,7 @@ class TwilioVoiceClient extends EventTarget {
     this.inboxId = null;
   }
 
-  async joinClientCall({ to, conversationId, callSid }) {
+  async joinClientCall({ to, conversationId }) {
     if (!this.device || !this.initialized || !to) return null;
     if (this.activeConnection) return this.activeConnection;
 
@@ -76,7 +76,6 @@ class TwilioVoiceClient extends EventTarget {
       To: to,
       is_agent: 'true',
       conversation_id: conversationId,
-      call_sid: callSid,
     };
 
     const connection = await this.device.connect({ params });

app/javascript/dashboard/api/channel/voice/voiceAPIClient.js

@@ -12,10 +12,10 @@ class VoiceAPI extends ApiClient {
     return ContactsAPI.initiateCall(contactId, inboxId).then(r => r.data);
   }
 
-  leaveConference({ inboxId, conversationId, callSid }) {
+  leaveConference(inboxId, conversationId) {
     return axios
       .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
-        params: { conversation_id: conversationId, call_sid: callSid },
+        params: { conversation_id: conversationId },
       })
       .then(r => r.data);
   }

app/javascript/dashboard/api/channel/whatsapp/whatsappCallsAPI.js

@@ -1,45 +0,0 @@
-/* global axios */
-import ApiClient from '../../ApiClient';
-
-class WhatsappCallsAPI extends ApiClient {
-  constructor() {
-    super('whatsapp_calls', { accountScoped: true });
-  }
-
-  show(callId) {
-    return axios.get(`${this.url}/${callId}`).then(r => r.data);
-  }
-
-  initiate(conversationId, sdpOffer) {
-    return axios
-      .post(`${this.url}/initiate`, {
-        conversation_id: conversationId,
-        sdp_offer: sdpOffer,
-      })
-      .then(r => r.data);
-  }
-
-  accept(callId, sdpAnswer) {
-    return axios
-      .post(`${this.url}/${callId}/accept`, { sdp_answer: sdpAnswer })
-      .then(r => r.data);
-  }
-
-  reject(callId) {
-    return axios.post(`${this.url}/${callId}/reject`).then(r => r.data);
-  }
-
-  terminate(callId) {
-    return axios.post(`${this.url}/${callId}/terminate`).then(r => r.data);
-  }
-
-  uploadRecording(callId, blob, filename = 'call-recording.webm') {
-    const formData = new FormData();
-    formData.append('recording', blob, filename);
-    return axios
-      .post(`${this.url}/${callId}/upload_recording`, formData)
-      .then(r => r.data);
-  }
-}
-
-export default new WhatsappCallsAPI();

app/javascript/dashboard/api/contacts.js

@@ -47,10 +47,9 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
-  initiateCall(contactId, inboxId, conversationId = null) {
+  initiateCall(contactId, inboxId) {
     return axios.post(`${this.url}/${contactId}/call`, {
       inbox_id: inboxId,
-      conversation_id: conversationId,
     });
   }
 

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

@@ -72,27 +72,6 @@ class ArticlesAPI extends PortalsAPI {
       category_slug: categorySlug,
     });
   }
-
-  bulkTranslate({ portalSlug, articleIds, locale, categoryId, force = false }) {
-    return axios.post(
-      `${this.url}/${portalSlug}/articles/bulk_actions/translate`,
-      { ids: articleIds, locale, category_id: categoryId, force }
-    );
-  }
-
-  bulkUpdateStatus({ portalSlug, articleIds, status }) {
-    return axios.patch(
-      `${this.url}/${portalSlug}/articles/bulk_actions/update_status`,
-      { ids: articleIds, status }
-    );
-  }
-
-  bulkDelete({ portalSlug, articleIds }) {
-    return axios.delete(
-      `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,
-      { data: { ids: articleIds } }
-    );
-  }
 }
 
 export default new ArticlesAPI();

app/javascript/dashboard/api/mfa.js

@@ -14,9 +14,9 @@ class MfaAPI extends ApiClient {
     return axios.post(`${this.url}/verify`, { otp_code: otpCode });
   }
 
-  disable(password, { otpCode, backupCode } = {}) {
+  disable(password, otpCode) {
     return axios.delete(this.url, {
-      data: { password, otp_code: otpCode, backup_code: backupCode },
+      data: { password, otp_code: otpCode },
     });
   }
 

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

@@ -51,6 +51,7 @@ const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
 
 const countriesMap = computed(() => {
   return countries.reduce((acc, country) => {
+    acc[country.code] = country;
     acc[country.id] = country;
     return acc;
   }, {});

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

@@ -3,16 +3,10 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import {
-  isVoiceCallEnabled,
-  getVoiceCallProvider,
-  VOICE_CALL_PROVIDERS,
-} from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
-import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import ContactAPI from 'dashboard/api/contacts';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -20,9 +14,6 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
   phone: { type: String, default: '' },
   contactId: { type: [String, Number], required: true },
-  // When set, the WhatsApp call continues in this conversation (matching the
-  // header button) instead of looking up the contact's most recent one.
-  conversationId: { type: [String, Number], default: null },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -43,10 +34,13 @@ const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
 const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(isVoiceCallEnabled)
+  (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 isInitiatingCall = computed(() => {
@@ -66,76 +60,17 @@ const navigateToConversation = conversationId => {
   }
 };
 
-const whatsappCallSession = useWhatsappCallSession();
-
-// Find the most recent open conversation for this contact in the picked inbox.
-// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
-const findWhatsappConversationId = async inboxId => {
-  const { data } = await ContactAPI.getConversations(props.contactId);
-  const conversations = data?.payload || [];
-  const match = conversations
-    .filter(c => c.inbox_id === inboxId)
-    .sort((a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0))[0];
-  return match?.id || null;
-};
-
-const startWhatsappCall = async (inboxId, conversationIdHint) => {
-  // WhatsApp /initiate is conversation-scoped, so we must hand it a
-  // conversation. Use the caller's hint when given (in-conversation flow);
-  // otherwise pick the most recent one in the inbox.
-  const conversationId =
-    conversationIdHint || (await findWhatsappConversationId(inboxId));
-  if (!conversationId) {
-    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
-    return;
-  }
-
-  const response =
-    await whatsappCallSession.initiateOutboundCall(conversationId);
-  if (!response?.id) {
-    // Permission flow returns no id — banner already handled server-side; surface to user.
-    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
-    navigateToConversation(conversationId);
-    return;
-  }
-
-  const callsStore = useCallsStore();
-  // Stay non-active until the connect cable event arrives — flipping to active
-  // here would start the duration timer before the contact picks up.
-  callsStore.addCall({
-    callSid: response.call_id,
-    callId: response.id,
-    conversationId,
-    inboxId,
-    callDirection: 'outbound',
-    provider: 'whatsapp',
-  });
-
-  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
-  navigateToConversation(conversationId);
-};
-
-const startCall = async (inboxId, conversationIdHint = null) => {
+const startCall = async inboxId => {
   if (isInitiatingCall.value) return;
 
-  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
-  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
-    try {
-      await startWhatsappCall(inboxId, conversationIdHint);
-    } catch (error) {
-      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
-    }
-    return;
-  }
-
   try {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,
       inboxId,
-      conversationId: conversationIdHint,
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
+    // Add call to store immediately so widget shows
     const callsStore = useCallsStore();
     callsStore.addCall({
       callSid,
@@ -153,22 +88,6 @@ const startCall = async (inboxId, conversationIdHint = null) => {
 };
 
 const onClick = async () => {
-  // In conversation context, only stay in this conversation if its inbox is
-  // itself voice-capable (works the same for Twilio and WhatsApp). For
-  // non-voice channels (email, web, …) fall back to the picker so the call
-  // goes out via a voice inbox.
-  if (props.conversationId) {
-    const conversation = store.getters.getConversationById(
-      props.conversationId
-    );
-    const conversationInbox = (inboxesList.value || []).find(
-      i => i.id === conversation?.inbox_id
-    );
-    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
-      await startCall(conversationInbox.id, props.conversationId);
-      return;
-    }
-  }
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;

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

@@ -35,16 +35,10 @@ const emit = defineEmits([
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 
-const voiceCallData = computed(() => {
-  const last = lastMessageInChat.value;
-  if (last?.content_type !== 'voice_call' || !last.call) {
-    return { status: null, direction: null };
-  }
-  return {
-    status: last.call.status,
-    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
-  };
-});
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
 
 const unreadCount = computed(() => props.chat.unread_count);
 

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -49,11 +49,7 @@ const rules = computed(() => ({
       props.attribute.regexPattern && {
         regexValidation: value => {
           if (!value) return true;
-          try {
-            return getRegexp(props.attribute.regexPattern).test(value);
-          } catch {
-            return false;
-          }
+          return getRegexp(props.attribute.regexPattern).test(value);
         },
       }),
   },

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue

@@ -9,15 +9,11 @@ import {
   ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper';
 
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConfig } from 'dashboard/composables/useConfig';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
   id: {
@@ -48,46 +44,14 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  showSelectionControl: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits([
-  'openArticle',
-  'articleAction',
-  'toggleSelect',
-  'hover',
-]);
+const emit = defineEmits(['openArticle', 'articleAction']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-const { isEnterprise } = useConfig();
-
-const isTranslationAvailable = computed(
-  () =>
-    isEnterprise &&
-    isFeatureEnabledonAccount.value(
-      currentAccountId.value,
-      FEATURE_FLAGS.CAPTAIN_TASKS
-    )
-);
-
 const articleMenuItems = computed(() => {
   const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
     (acc, [key, item]) => {
@@ -100,9 +64,7 @@ const articleMenuItems = computed(() => {
   const statusItems = (
     ARTICLE_MENU_OPTIONS[props.status] ||
     ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
-  )
-    .filter(key => key !== 'translate' || isTranslationAvailable.value)
-    .map(key => commonItems[key]);
+  ).map(key => commonItems[key]);
 
   return [...statusItems, commonItems.delete];
 });
@@ -161,27 +123,14 @@ const handleClick = id => {
 </script>
 
 <template>
-  <CardLayout
-    :selectable="selectable"
-    class="relative"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div
-      v-show="showSelectionControl"
-      class="absolute top-7 ltr:left-3 rtl:right-3"
-    >
-      <Checkbox :model-value="isSelected" @change="emit('toggleSelect', id)" />
-    </div>
+  <CardLayout>
     <div class="flex justify-between w-full gap-1">
-      <div class="flex items-center gap-2 min-w-0">
-        <span
-          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
-          @click="handleClick(id)"
-        >
-          {{ title }}
-        </span>
-      </div>
+      <span
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
+        @click="handleClick(id)"
+      >
+        {{ title }}
+      </span>
       <div class="flex items-center gap-2">
         <span
           class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue

@@ -121,7 +121,7 @@ const handleCreateArticle = event => {
           custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
-          :autofocus="isNewArticle"
+          autofocus
           @blur="handleCreateArticle"
         />
         <ArticleEditorControls
@@ -138,7 +138,7 @@ const handleCreateArticle = event => {
           t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
         "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="!isNewArticle"
+        :autofocus="false"
       />
     </template>
   </HelpCenterLayout>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue

@@ -20,14 +20,8 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  selectedArticleIds: {
-    type: Set,
-    default: () => new Set(),
-  },
 });
 
-const emit = defineEmits(['translateArticle', 'toggleSelect']);
-
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 const router = useRouter();
@@ -36,26 +30,12 @@ const store = useStore();
 const { t } = useI18n();
 
 const localArticles = ref(props.articles);
-const hoveredArticleId = ref(null);
 
 const dragEnabled = computed(() => {
-  return (
-    props.isCategoryArticles &&
-    localArticles.value?.length > 1 &&
-    props.selectedArticleIds.size === 0
-  );
+  // Enable dragging only for category articles and when there's more than one article
+  return props.isCategoryArticles && localArticles.value?.length > 1;
 });
 
-const hasBulkSelection = computed(() => props.selectedArticleIds.size > 0);
-
-const shouldShowSelectionControl = id => {
-  return hoveredArticleId.value === id || hasBulkSelection.value;
-};
-
-const handleCardHover = (isHovered, id) => {
-  hoveredArticleId.value = isHovered ? id : null;
-};
-
 const getCategoryById = useMapGetter('categories/categoryById');
 
 const openArticle = id => {
@@ -172,10 +152,6 @@ const handleArticleAction = async (action, { status, id }) => {
 };
 
 const updateArticle = ({ action, value, id }) => {
-  if (action === 'translate') {
-    emit('translateArticle', id);
-    return;
-  }
   const status = action !== 'delete' ? getArticleStatus(value) : null;
   handleArticleAction(action, { status, id });
 };
@@ -211,14 +187,9 @@ watch(
           :category="getCategory(element.category.id)"
           :views="element.views || 0"
           :updated-at="element.updatedAt"
-          :is-selected="selectedArticleIds.has(element.id)"
-          selectable
-          :show-selection-control="shouldShowSelectionControl(element.id)"
           :class="{ 'cursor-grab': dragEnabled }"
           @open-article="openArticle"
           @article-action="updateArticle"
-          @toggle-select="emit('toggleSelect', $event)"
-          @hover="isHovered => handleCardHover(isHovered, element.id)"
         />
       </li>
     </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.vue

@@ -1,13 +1,9 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useAlert } from 'dashboard/composables';
-import articlesAPI from 'dashboard/api/helpCenter/articles';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
@@ -15,10 +11,6 @@ import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/Ar
 import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
-import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import BulkTranslateDialog from './BulkTranslateDialog.vue';
 
 const props = defineProps({
   articles: {
@@ -47,7 +39,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['pageChange', 'fetchPortal', 'refreshArticles']);
+const emit = defineEmits(['pageChange', 'fetchPortal']);
 
 const router = useRouter();
 const route = useRoute();
@@ -55,42 +47,6 @@ const { t } = useI18n();
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isFetching = useMapGetter('articles/isFetching');
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const selectedArticleIds = ref(new Set());
-const deleteConfirmDialogRef = ref(null);
-
-const { isEnterprise } = useConfig();
-
-const isTranslationAvailable = computed(
-  () =>
-    isEnterprise &&
-    isFeatureEnabledonAccount.value(
-      currentAccountId.value,
-      FEATURE_FLAGS.CAPTAIN_TASKS
-    )
-);
-
-const allItems = computed(() => props.articles.map(a => ({ id: a.id })));
-const visibleArticleIds = computed(() => props.articles.map(a => a.id));
-
-const selectAllLabel = computed(() => {
-  if (!visibleArticleIds.value.length) return '';
-  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECT_ALL', {
-    count: visibleArticleIds.value.length,
-  });
-});
-
-const selectedCountLabel = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECTED_COUNT', {
-    count: selectedArticleIds.value.size,
-  })
-);
-
-const bulkTranslateDialogRef = ref(null);
 
 const hasNoArticles = computed(
   () => !isFetching.value && !props.articles.length
@@ -172,80 +128,6 @@ const navigateToNewArticlePage = () => {
     params: { categorySlug, locale },
   });
 };
-
-const handleToggleSelect = articleId => {
-  const newSet = new Set(selectedArticleIds.value);
-  if (newSet.has(articleId)) {
-    newSet.delete(articleId);
-  } else {
-    newSet.add(articleId);
-  }
-  selectedArticleIds.value = newSet;
-};
-
-const clearSelection = () => {
-  selectedArticleIds.value = new Set();
-};
-
-const handleTranslateArticle = articleId => {
-  selectedArticleIds.value = new Set([articleId]);
-  bulkTranslateDialogRef.value?.dialogRef?.open();
-};
-
-const openTranslateDialog = () => {
-  bulkTranslateDialogRef.value?.dialogRef?.open();
-};
-
-const onBulkActionSuccess = message => {
-  useAlert(message);
-  clearSelection();
-  emit('refreshArticles');
-};
-
-const bulkUpdateStatus = async status => {
-  try {
-    await articlesAPI.bulkUpdateStatus({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      status,
-    });
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
-    );
-  }
-};
-
-const confirmBulkDelete = () => {
-  deleteConfirmDialogRef.value?.open();
-};
-
-const bulkDelete = async () => {
-  try {
-    await articlesAPI.bulkDelete({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-    });
-    deleteConfirmDialogRef.value?.close();
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_SUCCESS')
-    );
-  } catch (error) {
-    deleteConfirmDialogRef.value?.close();
-    useAlert(
-      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_ERROR')
-    );
-  }
-};
-
-// Clear selection when articles change (page change, filter change)
-watch(
-  () => props.articles,
-  () => clearSelection()
-);
 </script>
 
 <template>
@@ -284,91 +166,11 @@ watch(
       >
         <Spinner />
       </div>
-      <template v-else-if="!hasNoArticles">
-        <div
-          v-if="selectedArticleIds.size > 0"
-          class="sticky top-0 z-[5] bg-gradient-to-b from-n-surface-1 from-90% to-transparent pt-1 pb-2"
-        >
-          <BulkSelectBar
-            v-model="selectedArticleIds"
-            :all-items="allItems"
-            :select-all-label="selectAllLabel"
-            :selected-count-label="selectedCountLabel"
-            class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
-          >
-            <template #secondary-actions>
-              <Button
-                sm
-                ghost
-                slate
-                :label="
-                  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CLEAR_SELECTION')
-                "
-                class="!px-1.5"
-                @click="clearSelection"
-              />
-            </template>
-            <template #actions>
-              <div class="flex items-center gap-2 ml-auto">
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-check"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.PUBLISH')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('published')"
-                />
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-pencil-line"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DRAFT')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('draft')"
-                />
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-archive-restore"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.ARCHIVE')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('archived')"
-                />
-                <Button
-                  v-if="isTranslationAvailable"
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-languages"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.TRANSLATE')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="openTranslateDialog"
-                />
-                <Button
-                  sm
-                  faded
-                  ruby
-                  icon="i-lucide-trash"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE')"
-                  class="!px-1.5 [&>span:nth-child(2)]:hidden"
-                  @click="confirmBulkDelete"
-                />
-              </div>
-            </template>
-          </BulkSelectBar>
-        </div>
-        <ArticleList
-          :articles="articles"
-          :is-category-articles="isCategoryArticles"
-          :selected-article-ids="selectedArticleIds"
-          class="relative z-0"
-          @translate-article="handleTranslateArticle"
-          @toggle-select="handleToggleSelect"
-        />
-      </template>
+      <ArticleList
+        v-else-if="!hasNoArticles"
+        :articles="articles"
+        :is-category-articles="isCategoryArticles"
+      />
       <ArticleEmptyState
         v-else
         class="pt-14"
@@ -381,31 +183,5 @@ watch(
         @click="navigateToNewArticlePage"
       />
     </template>
-    <BulkTranslateDialog
-      ref="bulkTranslateDialogRef"
-      :selected-article-ids="[...selectedArticleIds]"
-      :allowed-locales="allowedLocales"
-      @translate-started="clearSelection"
-    />
-    <Dialog
-      ref="deleteConfirmDialogRef"
-      type="alert"
-      :title="
-        t(
-          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_TITLE',
-          selectedArticleIds.size
-        )
-      "
-      :description="
-        t(
-          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_DESCRIPTION',
-          selectedArticleIds.size
-        )
-      "
-      :confirm-button-label="
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM')
-      "
-      @confirm="bulkDelete"
-    />
   </HelpCenterLayout>
 </template>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/BulkTranslateDialog.vue

@@ -1,249 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import categoriesAPI from 'dashboard/api/helpCenter/categories.js';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  selectedArticleIds: {
-    type: Array,
-    default: () => [],
-  },
-  allowedLocales: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['translateStarted']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const dialogRef = ref(null);
-const isSubmitting = ref(false);
-const selectedLocale = ref('');
-const selectedCategoryId = ref('');
-const targetCategories = ref([]);
-const isFetchingCategories = ref(false);
-const duplicateArticles = ref([]);
-
-const currentLocale = computed(() => route.params.locale);
-
-const localeOptions = computed(() => {
-  return props.allowedLocales
-    .filter(locale => locale.code !== currentLocale.value)
-    .map(locale => ({
-      value: locale.code,
-      label: `${locale.name} (${locale.code})`,
-    }));
-});
-
-const categoryOptions = computed(() => {
-  return targetCategories.value.map(category => ({
-    value: category.id,
-    label: category.name,
-  }));
-});
-
-const articleCount = computed(() => props.selectedArticleIds.length);
-
-const dialogTitle = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.TITLE', articleCount.value)
-);
-
-const description = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DESCRIPTION', articleCount.value)
-);
-
-const hasDuplicates = computed(() => duplicateArticles.value.length > 0);
-
-const confirmLabel = computed(() => {
-  if (hasDuplicates.value) {
-    return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM_OVERWRITE');
-  }
-  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM');
-});
-
-const isConfirmDisabled = computed(() => {
-  return !selectedLocale.value || isSubmitting.value;
-});
-
-const articleEditUrl = articleId => {
-  const { portalSlug, categorySlug, tab } = route.params;
-  const resolved = router.resolve({
-    name: 'portals_articles_edit',
-    params: {
-      portalSlug,
-      locale: selectedLocale.value,
-      categorySlug,
-      tab,
-      articleSlug: articleId,
-    },
-  });
-  return resolved.href;
-};
-
-const fetchCategoriesForLocale = async locale => {
-  if (!locale) {
-    targetCategories.value = [];
-    return;
-  }
-
-  isFetchingCategories.value = true;
-  try {
-    const { data } = await categoriesAPI.get({
-      portalSlug: route.params.portalSlug,
-      locale,
-    });
-    targetCategories.value = data.payload;
-  } catch {
-    targetCategories.value = [];
-  } finally {
-    isFetchingCategories.value = false;
-  }
-};
-
-watch(selectedLocale, newLocale => {
-  selectedCategoryId.value = '';
-  duplicateArticles.value = [];
-  fetchCategoriesForLocale(newLocale);
-});
-
-const resetForm = () => {
-  selectedLocale.value = '';
-  selectedCategoryId.value = '';
-  targetCategories.value = [];
-  duplicateArticles.value = [];
-};
-
-const submitTranslation = async (force = false) => {
-  isSubmitting.value = true;
-  try {
-    await store.dispatch('articles/bulkTranslate', {
-      portalSlug: route.params.portalSlug,
-      articleIds: props.selectedArticleIds,
-      locale: selectedLocale.value,
-      categoryId: selectedCategoryId.value,
-      force,
-    });
-
-    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.SUCCESS_MESSAGE'));
-    resetForm();
-    dialogRef.value?.close();
-    emit('translateStarted');
-  } catch (error) {
-    if (error.response?.status === 409) {
-      duplicateArticles.value = error.response.data.duplicate_articles;
-      return;
-    }
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.ERROR_MESSAGE')
-    );
-  } finally {
-    isSubmitting.value = false;
-  }
-};
-
-const onConfirm = () => {
-  if (isConfirmDisabled.value) return;
-  submitTranslation(hasDuplicates.value);
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="dialogTitle"
-    :description="description"
-    :confirm-button-label="confirmLabel"
-    :disable-confirm-button="isConfirmDisabled"
-    :is-loading="isSubmitting"
-    @close="resetForm"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-col gap-2">
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_LABEL') }}
-        </span>
-        <ComboBox
-          v-model="selectedLocale"
-          :options="localeOptions"
-          :placeholder="
-            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_PLACEHOLDER')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
-        />
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_LABEL') }}
-          <span class="text-n-slate-10 font-normal">
-            {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.OPTIONAL') }}
-          </span>
-        </span>
-        <ComboBox
-          v-model="selectedCategoryId"
-          :options="categoryOptions"
-          :disabled="!selectedLocale || isFetchingCategories"
-          :placeholder="
-            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_PLACEHOLDER')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
-        />
-      </div>
-      <div
-        v-if="hasDuplicates"
-        class="flex gap-3 p-3 rounded-xl bg-n-amber-2 border border-n-amber-5"
-      >
-        <Icon
-          icon="i-lucide-triangle-alert"
-          class="size-4 mt-0.5 text-n-amber-11 shrink-0"
-        />
-        <div class="flex flex-col gap-2 min-w-0">
-          <p class="text-sm text-n-amber-12 m-0">
-            {{
-              t(
-                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_WARNING',
-                duplicateArticles.length
-              )
-            }}
-          </p>
-          <div class="flex flex-col gap-1">
-            <a
-              v-for="article in duplicateArticles"
-              :key="article.id"
-              :href="articleEditUrl(article.id)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-sm text-n-amber-12 underline underline-offset-2 hover:text-n-amber-11 truncate"
-            >
-              {{ article.title }}
-              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
-            </a>
-          </div>
-          <p class="text-xs text-n-amber-11 m-0">
-            {{
-              t(
-                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_CONFIRM_HINT'
-              )
-            }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </Dialog>
-</template>

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

@@ -233,7 +233,6 @@ onMounted(() => resetContacts());
   <Popover
     ref="popoverRef"
     :align="align"
-    :show-content-border="false"
     @show="onPopoverShow"
     @hide="onPopoverHide"
   >

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

@@ -8,6 +8,8 @@ import { useEventListener } from '@vueuse/core';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
 import ContentTemplateSelector from './ContentTemplateSelector.vue';
@@ -18,7 +20,6 @@ const props = defineProps({
   isEmailOrWebWidgetInbox: { type: Boolean, default: false },
   isTwilioSmsInbox: { type: Boolean, default: false },
   isTwilioWhatsAppInbox: { type: Boolean, default: false },
-  // eslint-disable-next-line vue/no-unused-properties
   messageTemplates: { type: Array, default: () => [] },
   channelType: { type: String, default: '' },
   isLoading: { type: Boolean, default: false },
@@ -28,7 +29,6 @@ const props = defineProps({
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   inboxId: { type: Number, default: null },
-  voiceEnabled: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -81,9 +81,11 @@ const isRegularMessageMode = computed(() => {
   return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
 });
 
+const isVoiceInbox = computed(() => props.channelType === INBOX_TYPES.VOICE);
+
 const shouldShowSignatureButton = computed(() => {
   return (
-    props.hasSelectedInbox && isRegularMessageMode.value && !props.voiceEnabled
+    props.hasSelectedInbox && isRegularMessageMode.value && !isVoiceInbox.value
   );
 });
 
@@ -108,7 +110,7 @@ watch(
   () => props.hasSelectedInbox,
   newValue => {
     nextTick(() => {
-      if (newValue && !props.voiceEnabled) setSignature();
+      if (newValue && !isVoiceInbox.value) setSignature();
     });
   },
   { immediate: true }
@@ -196,6 +198,7 @@ useEventListener(document, 'paste', onPaste);
       <WhatsAppOptions
         v-if="isWhatsappInbox"
         :inbox-id="inboxId"
+        :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
       <ContentTemplateSelector

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

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
-import { INBOX_TYPES, isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
@@ -100,8 +100,6 @@ const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 
 const inboxMedium = computed(() => props.targetInbox?.medium || '');
 
-const voiceCallEnabled = computed(() => isVoiceCallEnabled(props.targetInbox));
-
 const effectiveChannelType = computed(() =>
   getEffectiveChannelType(inboxChannelType.value, inboxMedium.value)
 );
@@ -444,7 +442,6 @@ useKeyboardEvents({
       :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
       :message-templates="whatsappMessageTemplates"
       :channel-type="inboxChannelType"
-      :voice-enabled="voiceCallEnabled"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"

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

@@ -24,7 +24,9 @@ const handleBack = () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem]">
+  <div
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
     <div class="w-full">
       <ContentTemplateParser
         :template="template"

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

@@ -6,7 +6,6 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
-import Popover from 'dashboard/components-next/popover/Popover.vue';
 import ContentTemplateForm from './ContentTemplateForm.vue';
 
 const props = defineProps({
@@ -23,6 +22,7 @@ const inbox = useMapGetter('inboxes/getInbox');
 
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
+const showTemplatesMenu = ref(false);
 
 const contentTemplates = computed(() => {
   const inboxData = inbox.value(props.inboxId);
@@ -39,36 +39,29 @@ const filteredTemplates = computed(() => {
   );
 });
 
-const handlePopoverShow = () => {
+const handleTriggerClick = () => {
   searchQuery.value = '';
-  selectedTemplate.value = null;
-};
-
-const handlePopoverHide = () => {
-  selectedTemplate.value = null;
+  showTemplatesMenu.value = !showTemplatesMenu.value;
 };
 
 const handleTemplateClick = template => {
   selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
 };
 
 const handleBack = () => {
   selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
 };
 
-const handleSendMessage = (template, hide) => {
+const handleSendMessage = template => {
   emit('sendMessage', template);
-  hide();
+  selectedTemplate.value = null;
 };
 </script>
 
 <template>
-  <Popover
-    align="start"
-    disable-mobile-view
-    @show="handlePopoverShow"
-    @hide="handlePopoverHide"
-  >
+  <div class="relative">
     <Button
       icon="i-ph-whatsapp-logo"
       :label="t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.LABEL')"
@@ -76,59 +69,56 @@ const handleSendMessage = (template, hide) => {
       size="sm"
       :disabled="selectedTemplate"
       class="!text-xs font-medium"
+      @click="handleTriggerClick"
     />
-    <template #content="{ hide }">
-      <div
-        v-if="!selectedTemplate"
-        class="flex flex-col gap-2 p-4 items-center w-[21.875rem]"
-      >
-        <div class="w-full">
-          <Input
-            v-model="searchQuery"
-            type="search"
-            :placeholder="
-              t(
-                'COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER'
-              )
-            "
-            custom-input-class="ltr:pl-10 rtl:pr-10"
-          >
-            <template #prefix>
-              <Icon
-                icon="i-lucide-search"
-                class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
-              />
-            </template>
-          </Input>
-        </div>
-        <div
-          v-for="template in filteredTemplates"
-          :key="template.content_sid"
-          tabindex="0"
-          class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
-          @click="handleTemplateClick(template)"
+    <div
+      v-if="showTemplatesMenu"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    >
+      <div class="w-full">
+        <Input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
+          "
+          custom-input-class="ltr:pl-10 rtl:pr-10"
         >
-          <div class="flex justify-between items-center">
-            <span class="text-sm text-n-slate-12">{{
-              template.friendly_name
-            }}</span>
-          </div>
-          <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
-            {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
-          </p>
-        </div>
-        <template v-if="filteredTemplates.length === 0">
-          <p class="pt-2 w-full text-sm text-n-slate-11">
-            {{ t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.EMPTY_STATE') }}
-          </p>
-        </template>
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
       </div>
-      <ContentTemplateForm
-        v-else
-        :template="selectedTemplate"
-        @send-message="payload => handleSendMessage(payload, hide)"
-        @back="handleBack"
-      />
-    </template>
-  </Popover>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.content_sid"
+        tabindex="0"
+        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        @click="handleTemplateClick(template)"
+      >
+        <div class="flex justify-between items-center">
+          <span class="text-sm text-n-slate-12">{{
+            template.friendly_name
+          }}</span>
+        </div>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <ContentTemplateForm
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
 </template>

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

@@ -5,7 +5,6 @@ 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 Popover from 'dashboard/components-next/popover/Popover.vue';
 import WhatsappTemplate from './WhatsappTemplate.vue';
 
 const props = defineProps({
@@ -25,6 +24,8 @@ const getFilteredWhatsAppTemplates = useMapGetter(
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
 
+const showTemplatesMenu = ref(false);
+
 const whatsAppTemplateMessages = computed(() => {
   return getFilteredWhatsAppTemplates.value(props.inboxId);
 });
@@ -39,36 +40,29 @@ const getTemplateBody = template => {
   return template.components.find(component => component.type === 'BODY').text;
 };
 
-const handlePopoverShow = () => {
+const handleTriggerClick = () => {
   searchQuery.value = '';
-  selectedTemplate.value = null;
-};
-
-const handlePopoverHide = () => {
-  selectedTemplate.value = null;
+  showTemplatesMenu.value = !showTemplatesMenu.value;
 };
 
 const handleTemplateClick = template => {
   selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
 };
 
 const handleBack = () => {
   selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
 };
 
-const handleSendMessage = (template, hide) => {
+const handleSendMessage = template => {
   emit('sendMessage', template);
-  hide();
+  selectedTemplate.value = null;
 };
 </script>
 
 <template>
-  <Popover
-    align="start"
-    disable-mobile-view
-    @show="handlePopoverShow"
-    @hide="handlePopoverHide"
-  >
+  <div class="relative">
     <Button
       icon="i-ri-whatsapp-line"
       :label="t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.LABEL')"
@@ -76,53 +70,50 @@ const handleSendMessage = (template, hide) => {
       size="sm"
       :disabled="selectedTemplate"
       class="!text-xs font-medium"
+      @click="handleTriggerClick"
     />
-    <template #content="{ hide }">
-      <div
-        v-if="!selectedTemplate"
-        class="flex flex-col gap-2 p-4 items-center w-[21.875rem]"
-      >
-        <div class="relative w-full">
-          <Icon
-            icon="i-lucide-search"
-            class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-          />
-          <input
-            v-model="searchQuery"
-            type="search"
-            :placeholder="
-              t(
-                'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
-              )
-            "
-            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 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>
-          <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
-            {{ getTemplateBody(template) }}
-          </p>
-        </div>
-        <template v-if="filteredTemplates.length === 0">
-          <p class="pt-2 w-full text-sm text-n-slate-11">
-            {{
-              t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE')
-            }}
-          </p>
-        </template>
+    <div
+      v-if="showTemplatesMenu"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    >
+      <div class="relative w-full">
+        <Icon
+          icon="i-lucide-search"
+          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t(
+              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
+            )
+          "
+          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>
-      <WhatsappTemplate
-        v-else
-        :template="selectedTemplate"
-        @send-message="payload => handleSendMessage(payload, hide)"
-        @back="handleBack"
-      />
-    </template>
-  </Popover>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.id"
+        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>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ getTemplateBody(template) }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <WhatsappTemplate
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
 </template>

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

@@ -24,7 +24,9 @@ const handleBack = () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem]">
+  <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"

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -1,3 +1,5 @@
+<!-- DEPRECIATED -->
+<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script setup>
 import { computed } from 'vue';
 
@@ -18,13 +20,11 @@ const emit = defineEmits(['action']);
 
 const bannerClass = computed(() => {
   const classMap = {
-    slate:
-      'bg-n-slate-3 border-n-slate-4 text-n-slate-11 [&_.link]:text-n-slate-11',
-    amber:
-      'bg-n-amber-3 border-n-amber-4 text-n-amber-11 [&_.link]:text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11 [&_.link]:text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11 [&_.link]:text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11 [&_.link]:text-n-blue-11',
+    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
+    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
+    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
+    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
+    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
   };
 
   return classMap[props.color];

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

@@ -135,16 +135,6 @@ export function useContactFilterContext() {
       filterOperators: containmentOperators.value,
       attributeModel: 'standard',
     },
-    {
-      attributeKey: CONTACT_ATTRIBUTES.COMPANY_NAME,
-      value: CONTACT_ATTRIBUTES.COMPANY_NAME,
-      attributeName: t('CONTACTS_LAYOUT.FILTER.COMPANY'),
-      label: t('CONTACTS_LAYOUT.FILTER.COMPANY'),
-      inputType: 'plainText',
-      dataType: 'text',
-      filterOperators: containmentOperators.value,
-      attributeModel: 'standard',
-    },
     {
       attributeKey: CONTACT_ATTRIBUTES.CREATED_AT,
       value: CONTACT_ATTRIBUTES.CREATED_AT,

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

@@ -23,7 +23,6 @@ export const CONTACT_ATTRIBUTES = {
   IDENTIFIER: 'identifier',
   COUNTRY_CODE: 'country_code',
   CITY: 'city',
-  COMPANY_NAME: 'company_name',
   CREATED_AT: 'created_at',
   LAST_ACTIVITY_AT: 'last_activity_at',
   REFERER: 'referer',

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

@@ -1,5 +1,4 @@
 import { computed } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
@@ -15,6 +14,7 @@ export function useChannelIcon(inbox) {
     'Channel::Whatsapp': 'i-woot-whatsapp',
     'Channel::Instagram': 'i-woot-instagram',
     'Channel::Tiktok': 'i-woot-tiktok',
+    'Channel::Voice': 'i-woot-voice',
   };
 
   const providerIconMap = {
@@ -38,11 +38,6 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
-    if (isVoiceCallEnabled(inboxDetails)) {
-      icon = 'i-woot-voice';
-    }
-
     return icon ?? 'i-ri-global-fill';
   });
 

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

@@ -19,11 +19,8 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-whatsapp');
   });
 
-  it('returns correct icon for voice-enabled Twilio channel', () => {
-    const inbox = {
-      channel_type: 'Channel::TwilioSms',
-      voice_enabled: true,
-    };
+  it('returns correct icon for Voice channel', () => {
+    const inbox = { channel_type: 'Channel::Voice' };
     const { value: icon } = useChannelIcon(inbox);
     expect(icon).toBe('i-woot-voice');
   });

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -30,10 +30,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
   focusOnMount: {
     type: Boolean,
     default: false,
@@ -86,7 +82,6 @@ onMounted(() => {
 
 defineExpose({
   focus: () => inlineInputRef.value?.focus(),
-  blur: () => inlineInputRef.value?.blur(),
 });
 </script>
 
@@ -111,7 +106,6 @@ defineExpose({
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      :readonly="readonly"
       :class="customInputClass"
       class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"

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

@@ -113,7 +113,6 @@ const props = defineProps({
     validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
   attachments: { type: Array, default: () => [] },
-  call: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
   content: { type: String, default: null },
   contentAttributes: { type: Object, default: () => ({}) },
   contentType: {

app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
+    <div class="p-3 bg-n-alpha-2 rounded-xl">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="flex gap-2">
+      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
+      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Card.vue

@@ -10,22 +10,22 @@ defineProps({
 
 <template>
   <div
-    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
   >
     <div class="px-3 py-2.5">
-      <img :src="message.image_url" class="w-full max-h-44 rounded-lg" />
-      <div class="flex flex-col gap-2 pt-2.5">
+      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+      <div class="pt-2.5 flex flex-col gap-2">
         <h6 class="font-semibold">{{ message.title }}</h6>
         <span
           v-dompurify-html="message.content"
-          class="text-sm prose prose-bubble"
+          class="prose prose-bubble text-sm"
         />
       </div>
     </div>
-    <div class="flex justify-center items-center p-3">
+    <div class="p-3 flex items-center justify-center">
       <Button label="Call us to order" link class="hover:!no-underline" />
     </div>
-    <div class="flex justify-center items-center p-3">
+    <div class="p-3 flex items-center justify-center">
       <Button label="Visit our store" link class="hover:!no-underline" />
     </div>
   </div>

app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue

@@ -0,0 +1,25 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="See options" link class="hover:!no-underline" />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
+  >
+    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
+    <span
+      v-dompurify-html="message.content"
+      class="prose prose-bubble font-medium text-sm"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue

@@ -0,0 +1,68 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="prose prose-bubble font-medium text-sm"
+      />
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button label="No, that will be all" link class="hover:!no-underline">
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+    <div class="p-3 flex items-center justify-center">
+      <Button
+        label="I want to talk to an agents"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            class="stroke-n-blue-text"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
+              stroke-width="1.333"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Text.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80">
+  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
     <span v-dompurify-html="message.content" class="prose prose-bubble" />
   </div>
 </template>

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

@@ -1,21 +1,21 @@
 <script setup>
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
 import { useMessageContext } from '../provider.js';
-import { VOICE_CALL_STATUS } from '../constants';
-import { useCallSession } from 'dashboard/composables/useCallSession';
-import { formatDuration } from 'shared/helpers/timeHelper';
+import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
-import AudioChip from 'next/message/chips/Audio.vue';
 
 const LABEL_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
   [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
 };
 
+const SUBTEXT_MAP = {
+  [VOICE_CALL_STATUS.RINGING]: 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
 const ICON_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
   [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
@@ -30,65 +30,15 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { t } = useI18n();
-const store = useStore();
-const {
-  call,
-  attachments,
-  contentAttributes,
-  conversationId,
-  currentUserId,
-  inboxId,
-} = useMessageContext();
-const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+const { contentAttributes, messageType } = useMessageContext();
 
-const status = computed(() => call.value?.status);
-const isOutbound = computed(() => call.value?.direction === 'outgoing');
+const data = computed(() => contentAttributes.value?.data);
+const status = computed(() => data.value?.status?.toString());
+
+const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
 const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
-const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
-const didCurrentUserAnswer = computed(
-  () =>
-    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
-);
-// Pickup auto-assigns the conversation, so the assignee is a safe display proxy
-// for the answerer when the Call payload lacks accepted_by_agent_id (e.g.,
-// Twilio's call-status webhook flipped the call to in-progress before the
-// participant-join webhook claimed it).
-const conversationAssignee = computed(() => {
-  const conversation = store.getters.getConversationById?.(
-    conversationId?.value
-  );
-  return conversation?.meta?.assignee || null;
-});
-const displayAgentName = computed(() => {
-  if (call.value?.acceptedByAgentName) return call.value.acceptedByAgentName;
-  if (acceptedByAgentId.value) {
-    const agent = store.getters['agents/getAgentById'](acceptedByAgentId.value);
-    if (agent?.available_name) return agent.available_name;
-    if (agent?.name) return agent.name;
-  }
-  return conversationAssignee.value?.name || null;
-});
-
-const audioAttachment = computed(() =>
-  (attachments?.value || []).find(a => a.fileType === 'audio')
-);
-
-// Duration may arrive on call.duration_seconds (push_event_data) or
-// content_attributes.data.duration_seconds — and either may be camelCased
-// upstream, so check every variant.
-const durationSeconds = computed(() => {
-  const fromCall = call.value?.durationSeconds || call.value?.duration_seconds;
-  if (fromCall != null) return fromCall;
-
-  const data = contentAttributes?.value?.data;
-  return data?.durationSeconds || data?.duration_seconds;
-});
-
-const formattedDuration = computed(() => formatDuration(durationSeconds.value));
 
 const labelKey = computed(() => {
   if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
@@ -97,46 +47,21 @@ const labelKey = computed(() => {
       ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
       : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
   }
-  if (isFailed.value) {
-    return isOutbound.value
-      ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
-      : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
-  }
-  return 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-const subtext = computed(() => {
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return isOutbound.value
-      ? t('CONVERSATION.VOICE_CALL.CALLING')
-      : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
-  }
-  if (status.value === VOICE_CALL_STATUS.COMPLETED) {
-    return formattedDuration.value;
-  }
+const subtextKey = computed(() => {
+  if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    // Outbound calls can flip to in-progress before the contact actually
-    // picks up (e.g., Twilio marks in-progress when the agent joins the
-    // conference); claiming "they answered" here would be misleading. The
-    // 'Call in progress' label alone is accurate; the floating widget shows
-    // the live duration.
-    if (isOutbound.value) return null;
-    if (didCurrentUserAnswer.value) {
-      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
-    }
-    if (displayAgentName.value) {
-      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
-        agentName: displayAgentName.value,
-      });
-    }
-    return null;
-  }
-  if (isFailed.value) {
     return isOutbound.value
-      ? t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT')
-      : t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
+      ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
+      : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
   }
-  return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.NO_ANSWER'
+    : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
 });
 
 const iconName = computed(() => {
@@ -145,62 +70,11 @@ const iconName = computed(() => {
 });
 
 const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
-
-const callSid = computed(() => call.value?.providerCallId);
-
-// Show "Join call" when the call is still ringing, no agent has claimed it,
-// and the conversation is unassigned or assigned to the current user. Mirrors
-// the eligibility used by FloatingCallWidget so the bubble can act as a
-// recovery affordance after a refresh or missed widget.
-const canJoinCall = computed(() => {
-  if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
-  if (isOutbound.value) return false;
-  if (acceptedByAgentId.value) return false;
-  if (!callSid.value || !inboxId.value || !conversationId.value) return false;
-  // Suppress the button once this call is the local active session — the
-  // message status webhook may lag behind, so we can't rely on `status` alone
-  // to hide it after a successful join from this client.
-  if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
-    return false;
-  const assignee = conversationAssignee.value;
-  if (assignee?.id && assignee.id !== currentUserId.value) return false;
-  return true;
-});
-
-const recordingAttachment = computed(() => {
-  if (audioAttachment.value) return audioAttachment.value;
-  const url = call.value?.recordingUrl;
-  if (!url) return null;
-  return {
-    dataUrl: url,
-    fileType: 'audio',
-    extension: 'wav',
-    transcribedText: call.value?.transcript || '',
-  };
-});
-
-const handleJoinCall = async () => {
-  if (!canJoinCall.value || isJoining.value) return;
-
-  if (hasActiveCall.value && activeCall.value?.callSid !== callSid.value) {
-    await endCall({
-      conversationId: activeCall.value.conversationId,
-      inboxId: activeCall.value.inboxId,
-      callSid: activeCall.value.callSid,
-    });
-  }
-
-  await joinCall({
-    conversationId: conversationId.value,
-    inboxId: inboxId.value,
-    callSid: callSid.value,
-  });
-};
 </script>
 
 <template>
   <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-sm">
+    <div class="flex overflow-hidden flex-col w-full max-w-xs">
       <div class="flex gap-3 items-center p-3 w-full">
         <div
           class="flex justify-center items-center rounded-full size-10 shrink-0"
@@ -220,24 +94,11 @@ const handleJoinCall = async () => {
           <span class="text-sm font-medium truncate text-n-slate-12">
             {{ $t(labelKey) }}
           </span>
-          <span v-if="subtext" class="text-xs text-n-slate-11">
-            {{ subtext }}
+          <span class="text-xs text-n-slate-11">
+            {{ $t(subtextKey) }}
           </span>
-          <button
-            v-if="canJoinCall"
-            type="button"
-            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
-            :disabled="isJoining"
-            @click="handleJoinCall"
-          >
-            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
-          </button>
         </div>
       </div>
-
-      <div v-if="recordingAttachment" class="px-3 pb-3 w-full">
-        <AudioChip :attachment="recordingAttachment" class="text-n-slate-12" />
-      </div>
     </div>
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -41,33 +41,8 @@ const playbackSpeed = ref(1);
 
 const { uid } = getCurrentInstance();
 
-// MediaRecorder-produced WebM/Opus blobs lack a Duration header → <audio>.duration
-// resolves to Infinity until we seek past the end, which forces the engine to
-// scan the file and compute the real length. Safe no-op for files with a real
-// duration already (mp3/m4a/etc).
-const resolveStreamingDuration = () => {
-  const el = audioPlayer.value;
-  if (!el) return;
-  const onTimeUpdate = () => {
-    el.removeEventListener('timeupdate', onTimeUpdate);
-    el.currentTime = 0;
-    duration.value = el.duration;
-  };
-  el.addEventListener('timeupdate', onTimeUpdate);
-  try {
-    el.currentTime = Number.MAX_SAFE_INTEGER;
-  } catch {
-    el.removeEventListener('timeupdate', onTimeUpdate);
-  }
-};
-
 const onLoadedMetadata = () => {
-  const d = audioPlayer.value?.duration;
-  if (!Number.isFinite(d)) {
-    resolveStreamingDuration();
-    return;
-  }
-  duration.value = d;
+  duration.value = audioPlayer.value?.duration;
 };
 
 const playbackSpeedLabel = computed(() => {
@@ -78,8 +53,7 @@ const playbackSpeedLabel = computed(() => {
 // When the onLoadMetadata is called, so we need to set the duration
 // value when the component is mounted
 onMounted(() => {
-  const d = audioPlayer.value?.duration;
-  if (Number.isFinite(d)) duration.value = d;
+  duration.value = audioPlayer.value?.duration;
   audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 

app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import CallToAction from '../../bubbles/Template/CallToAction.vue';
+
+const message = {
+  content:
+    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/CallToAction"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Call To Action">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <CallToAction :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Card from '../../bubbles/Template/Card.vue';
+
+const message = {
+  title: 'Two in one cake (1 pound)',
+  content: 'Customize your order for special occasions',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Card"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Card">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Card :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import ListPicker from '../../bubbles/Template/ListPicker.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you? `,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/ListPicker"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="ListPicker">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <ListPicker :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue

@@ -0,0 +1,23 @@
+<script setup>
+import Media from '../../bubbles/Template/Media.vue';
+
+const message = {
+  content:
+    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
+  image_url:
+    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Media"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Image Media">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Media :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue

@@ -0,0 +1,21 @@
+<script setup>
+import QuickReply from '../../bubbles/Template/QuickReply.vue';
+
+const message = {
+  content: `Hey there! Thanks for reaching out to us. Could you let us know
+what you need to help us better assist you?`,
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/QuickReply"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Quick Replies">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <QuickReply :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue

@@ -0,0 +1,20 @@
+<script setup>
+import Text from '../../bubbles/Template/Text.vue';
+
+const message = {
+  content: 'Hello John, how may we assist you?',
+};
+</script>
+
+<template>
+  <Story
+    title="Components/Message Bubbles/Template/Text"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default Text">
+      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
+        <Text :message="message" />
+      </div>
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/popover/Popover.vue

@@ -12,14 +12,6 @@ const props = defineProps({
     default: 'end',
     validator: v => ['start', 'end'].includes(v),
   },
-  disableMobileView: {
-    type: Boolean,
-    default: false,
-  },
-  showContentBorder: {
-    type: Boolean,
-    default: true,
-  },
 });
 
 const emit = defineEmits(['show', 'hide']);
@@ -30,8 +22,7 @@ const popoverRef = ref(null);
 const mobileContentRef = ref(null);
 
 const breakpoints = useBreakpoints(breakpointsTailwind);
-const belowMd = breakpoints.smaller('md');
-const isMobile = computed(() => !props.disableMobileView && belowMd.value);
+const isMobile = breakpoints.smaller('md');
 const showPopover = computed(() => isActive.value && !isMobile.value);
 
 const { fixedPosition, updatePosition } = useDropdownPosition(
@@ -108,13 +99,9 @@ defineExpose({ show, hide, toggle });
           { ignore: clickOutsideIgnore },
         ]"
         data-popover-content
-        class="relative flex flex-col w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+        class="relative w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 overflow-y-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
       >
-        <div
-          class="flex-1 min-h-0 overflow-y-auto overscroll-contain rounded-xl"
-        >
-          <slot name="content" :hide="hide" />
-        </div>
+        <slot name="content" :hide="hide" />
       </div>
     </div>
 
@@ -126,14 +113,9 @@ defineExpose({ show, hide, toggle });
       data-popover-content
       :class="fixedPosition.class"
       :style="fixedPosition.style"
-      class="flex flex-col bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+      class="bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl overflow-y-auto max-h-[calc(100vh-2rem)]"
     >
-      <div
-        class="flex-1 min-h-0 overflow-y-auto overscroll-contain rounded-xl"
-        :class="{ 'border border-n-strong': showContentBorder }"
-      >
-        <slot name="content" :hide="hide" />
-      </div>
+      <slot name="content" :hide="hide" />
     </div>
   </TeleportWithDirection>
 </template>

app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue

@@ -1,33 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
-    <div class="p-3 rounded-xl bg-n-alpha-2">
-      <span
-        v-dompurify-html="message.content"
-        class="text-sm font-medium prose prose-bubble"
-      />
-    </div>
-    <div
-      v-if="message.buttons && message.buttons.length > 0"
-      class="flex flex-col gap-2"
-    >
-      <Button
-        v-for="(button, index) in message.buttons"
-        :key="index"
-        :label="button.text || button.title || 'Button'"
-        slate
-        class="!text-n-blue-11 w-full"
-      />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import FileIcon from 'dashboard/components-next/icon/FileIcon.vue';
-
-const props = defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-
-const PDF_EXTENSIONS = ['.pdf', 'pdf'];
-const VIDEO_EXTENSIONS = ['.mp4', '.mov', 'video'];
-const DOC_EXTENSIONS = ['.doc'];
-
-const mediaType = computed(() => {
-  if (props.message.mediaType) return props.message.mediaType;
-
-  const format = props.message.header?.format;
-  if (format) return format.toLowerCase();
-
-  const url = props.message.image_url || '';
-  if (PDF_EXTENSIONS.some(ext => url.includes(ext))) return 'document';
-  if (VIDEO_EXTENSIONS.some(ext => url.includes(ext))) return 'video';
-  return 'image';
-});
-
-const fileType = computed(() => {
-  const url = props.message.image_url || '';
-  return DOC_EXTENSIONS.some(ext => url.includes(ext)) ? 'doc' : 'pdf';
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2.5 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
-  >
-    <img
-      v-if="mediaType === 'image'"
-      :src="message.image_url"
-      class="object-cover w-full max-h-44 rounded-lg"
-      alt="Template media"
-    />
-
-    <div
-      v-else-if="mediaType === 'video'"
-      class="overflow-hidden relative rounded-lg"
-    >
-      <video
-        :src="message.image_url"
-        class="object-cover w-full max-h-44"
-        controls
-        preload="metadata"
-      />
-    </div>
-
-    <div v-else-if="mediaType === 'document'" class="flex items-center">
-      <FileIcon :file-type="fileType" class="text-2xl text-n-slate-12" />
-    </div>
-
-    <span
-      v-if="message.content"
-      v-dompurify-html="message.content"
-      class="text-sm font-medium prose prose-bubble"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue

@@ -1,42 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-
-const actions = computed(() => props.message.actions || []);
-</script>
-
-<template>
-  <div
-    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="text-sm font-medium prose prose-bubble"
-      />
-    </div>
-    <div
-      v-for="(action, index) in actions"
-      :key="index"
-      class="flex justify-center items-center p-3"
-    >
-      <Button
-        :label="action.title || action.text || 'Button'"
-        link
-        class="hover:!no-underline"
-      >
-        <template #icon>
-          <Icon icon="i-woot-quick-reply" class="size-[15px]" />
-        </template>
-      </Button>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue

@@ -1,105 +0,0 @@
-<script setup>
-import TemplatePreview from './TemplatePreview.vue';
-import {
-  whatsAppTemplates,
-  getWhatsAppVariables,
-} from './templates/whatsapp-templates.js';
-import { twilioTemplates } from './templates/twilio-templates.js';
-
-const findWhatsApp = name => whatsAppTemplates.find(t => t.name === name);
-const findTwilio = name => twilioTemplates.find(t => t.friendly_name === name);
-
-const greet = findWhatsApp('greet');
-const eventInvitation = findWhatsApp('event_invitation_static');
-const orderConfirmation = findWhatsApp('order_confirmation');
-const discountCoupon = findWhatsApp('discount_coupon');
-const trainingVideo = findWhatsApp('training_video');
-
-const twilioGreet = findTwilio('greet');
-const shoeLaunch = findTwilio('shoe_launch');
-const welcomeMessage = findTwilio('welcome_message_new');
-const courseFeeReminder = findTwilio('course_fee_reminder');
-</script>
-
-<template>
-  <Story
-    title="Components/TemplatePreview"
-    :layout="{ type: 'grid', width: 400 }"
-  >
-    <Variant title="WhatsApp - Simple Text">
-      <TemplatePreview
-        :template="greet"
-        :variables="getWhatsAppVariables(greet)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Simple Text (No Variables)">
-      <TemplatePreview :template="greet" :variables="{}" platform="whatsapp" />
-    </Variant>
-
-    <Variant title="WhatsApp - Call to Action Buttons">
-      <TemplatePreview
-        :template="eventInvitation"
-        :variables="getWhatsAppVariables(eventInvitation)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Image Media">
-      <TemplatePreview
-        :template="orderConfirmation"
-        :variables="getWhatsAppVariables(orderConfirmation)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Video Media">
-      <TemplatePreview
-        :template="trainingVideo"
-        :variables="getWhatsAppVariables(trainingVideo)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WhatsApp - Copy Code">
-      <TemplatePreview
-        :template="discountCoupon"
-        :variables="getWhatsAppVariables(discountCoupon)"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Text">
-      <TemplatePreview
-        :template="twilioGreet"
-        :variables="twilioGreet.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Media">
-      <TemplatePreview
-        :template="shoeLaunch"
-        :variables="shoeLaunch.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Quick Reply">
-      <TemplatePreview
-        :template="welcomeMessage"
-        :variables="welcomeMessage.variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio - Call to Action">
-      <TemplatePreview
-        :template="courseFeeReminder"
-        :variables="courseFeeReminder.variables"
-        platform="twilio"
-      />
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue

@@ -1,112 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
-import {
-  PLATFORMS,
-  TEMPLATE_TYPES,
-  WA_HEADER_FORMATS,
-  WA_MEDIA_FORMATS,
-} from 'dashboard/services/TemplateConstants';
-
-import CardTemplate from './CardTemplate.vue';
-import CallToActionTemplate from './CallToActionTemplate.vue';
-import MediaTemplate from './MediaTemplate.vue';
-import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
-import QuickReplyTemplate from './QuickReplyTemplate.vue';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    required: true,
-  },
-  variables: {
-    type: Object,
-    default: () => ({}),
-  },
-  platform: {
-    type: String,
-    required: true,
-    validator: value => Object.values(PLATFORMS).includes(value),
-  },
-});
-
-const COMPONENT_MAP = {
-  [TEMPLATE_TYPES.WHATSAPP_TEXT]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT]: MediaTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_INTERACTIVE]: CallToActionTemplate,
-  [TEMPLATE_TYPES.WHATSAPP_COPY_CODE]: CallToActionTemplate,
-  [TEMPLATE_TYPES.TWILIO_TEXT]: WhatsAppTextTemplate,
-  [TEMPLATE_TYPES.TWILIO_MEDIA]: MediaTemplate,
-  [TEMPLATE_TYPES.TWILIO_QUICK_REPLY]: QuickReplyTemplate,
-  [TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION]: CallToActionTemplate,
-  [TEMPLATE_TYPES.TWILIO_CARD]: CardTemplate,
-};
-
-const substituteVariables = (text, variables) => {
-  if (!text) return '';
-  return text.replace(/\{\{([^}]+)\}\}/g, (match, variable) => {
-    const value = variables[variable];
-    return value !== undefined && value !== '' ? value : `[${variable}]`;
-  });
-};
-
-const processedTemplate = computed(() => {
-  const normalized = TemplateNormalizer.normalize(
-    props.template,
-    props.platform
-  );
-
-  let content = '';
-  let imageUrl = '';
-  let title = '';
-  let footer = '';
-
-  if (props.platform === PLATFORMS.WHATSAPP) {
-    content = normalized.body?.text || '';
-
-    if (normalized.header) {
-      if (WA_MEDIA_FORMATS.includes(normalized.header.format)) {
-        imageUrl = normalized.header.example?.header_handle?.[0] || '';
-      }
-      if (normalized.header.format === WA_HEADER_FORMATS.TEXT) {
-        title = normalized.header.text || '';
-      }
-    }
-
-    footer = normalized.footer?.text || '';
-  } else {
-    content = normalized.body || '';
-
-    if (normalized.media && normalized.media.length > 0) {
-      imageUrl = normalized.media[0];
-    }
-  }
-
-  const buttons = normalized.buttons?.length
-    ? normalized.buttons
-    : normalized.actions || [];
-
-  return {
-    ...normalized,
-    content: substituteVariables(content, props.variables),
-    title: substituteVariables(title, props.variables),
-    footer: substituteVariables(footer, props.variables),
-    image_url: substituteVariables(imageUrl, props.variables),
-    buttons,
-    actions: normalized.actions || [],
-  };
-});
-
-const previewComponent = computed(
-  () => COMPONENT_MAP[processedTemplate.value.type] || WhatsAppTextTemplate
-);
-</script>
-
-<template>
-  <div class="template-preview">
-    <component :is="previewComponent" :message="processedTemplate" />
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue

@@ -1,199 +0,0 @@
-<script setup>
-import TemplatePreview from './TemplatePreview.vue';
-import {
-  whatsAppTemplates,
-  getWhatsAppVariables,
-} from './templates/whatsapp-templates.js';
-import { twilioTemplates } from './templates/twilio-templates.js';
-</script>
-
-<template>
-  <Story
-    title="Components/TemplatePreviewExamples"
-    :layout="{ type: 'grid', width: 400 }"
-  >
-    <Variant title="WA: Event Invitation (Buttons)">
-      <TemplatePreview
-        :template="whatsAppTemplates[0]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[0])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Purchase Receipt (Document)">
-      <TemplatePreview
-        :template="whatsAppTemplates[1]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[1])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Discount Coupon (Copy Code)">
-      <TemplatePreview
-        :template="whatsAppTemplates[2]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[2])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Support Callback (Phone)">
-      <TemplatePreview
-        :template="whatsAppTemplates[3]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[3])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Training Video (Video)">
-      <TemplatePreview
-        :template="whatsAppTemplates[4]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[4])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Order Confirmation (Image)">
-      <TemplatePreview
-        :template="whatsAppTemplates[5]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[5])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Product Launch (Image + Footer)">
-      <TemplatePreview
-        :template="whatsAppTemplates[6]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[6])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Technician Visit (Header + Buttons)">
-      <TemplatePreview
-        :template="whatsAppTemplates[7]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[7])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Greet (Simple Text)">
-      <TemplatePreview
-        :template="whatsAppTemplates[8]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[8])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Hello World (Header + Footer)">
-      <TemplatePreview
-        :template="whatsAppTemplates[9]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[9])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Feedback Request (Button)">
-      <TemplatePreview
-        :template="whatsAppTemplates[10]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[10])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Address Update (Header)">
-      <TemplatePreview
-        :template="whatsAppTemplates[11]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[11])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="WA: Delivery Confirmation">
-      <TemplatePreview
-        :template="whatsAppTemplates[12]"
-        :variables="getWhatsAppVariables(whatsAppTemplates[12])"
-        platform="whatsapp"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Shoe Launch (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[0]"
-        :variables="twilioTemplates[0].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Product Launch Custom Price (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[1]"
-        :variables="twilioTemplates[1].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Product Launch (Media)">
-      <TemplatePreview
-        :template="twilioTemplates[2]"
-        :variables="twilioTemplates[2].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Greet (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[3]"
-        :variables="twilioTemplates[3].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Order Status (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[4]"
-        :variables="twilioTemplates[4].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Hello World (Text)">
-      <TemplatePreview
-        :template="twilioTemplates[5]"
-        :variables="twilioTemplates[5].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Welcome Message New (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[6]"
-        :variables="twilioTemplates[6].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: SaaS WhatsApp Question (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[7]"
-        :variables="twilioTemplates[7].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Welcome Message (Quick Reply)">
-      <TemplatePreview
-        :template="twilioTemplates[8]"
-        :variables="twilioTemplates[8].variables"
-        platform="twilio"
-      />
-    </Variant>
-
-    <Variant title="Twilio: Course Fee Reminder (Call to Action)">
-      <TemplatePreview
-        :template="twilioTemplates[9]"
-        :variables="twilioTemplates[9].variables"
-        platform="twilio"
-      />
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue

@@ -1,26 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
-  >
-    <div v-if="message.title" class="text-base font-bold">
-      {{ message.title }}
-    </div>
-
-    <div v-if="message.content" class="text-sm font-medium prose prose-bubble">
-      <span v-dompurify-html="message.content" />
-    </div>
-
-    <div v-if="message.footer" class="text-xs opacity-70 text-n-slate-11">
-      {{ message.footer }}
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/template-preview/index.js

@@ -1,6 +0,0 @@
-// Main Template Preview Component
-export { default as TemplatePreview } from './TemplatePreview.vue';
-
-// Core Services
-export { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
-export { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';

app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js

@@ -1,209 +0,0 @@
-export const twilioTemplates = [
-  {
-    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'Jordan',
-      2: '100$',
-    },
-    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
-    friendly_name: 'shoe_launch',
-    template_type: 'media',
-  },
-  {
-    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'Jordan',
-      2: '400$',
-    },
-    content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
-    friendly_name: 'product_launch_custom_price',
-    template_type: 'media',
-  },
-  {
-    body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
-    types: {
-      'twilio/media': {
-        body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
-        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {},
-    content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
-    friendly_name: 'product_launch',
-    template_type: 'media',
-  },
-  {
-    body: 'Hey {{1}}, how may I help you?',
-    types: {
-      'twilio/text': {
-        body: 'Hey {{1}}, how may I help you?',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'John',
-    },
-    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
-    friendly_name: 'greet',
-    template_type: 'text',
-  },
-  {
-    body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
-    types: {
-      'twilio/text': {
-        body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      1: 'John',
-      3: '12345',
-    },
-    content_sid: 'HX88291ef8d30d7dcd436cbb9b21c236f4',
-    friendly_name: 'order_status',
-    template_type: 'text',
-  },
-  {
-    body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-    types: {
-      'twilio/text': {
-        body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {},
-    content_sid: 'HXdc6da32d489ee80f67c07d5bb0e7e390',
-    friendly_name: 'hello_world',
-    template_type: 'text',
-  },
-  {
-    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
-    types: {
-      'twilio/quick-reply': {
-        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
-        actions: [
-          {
-            id: 'Sales_payload',
-            title: 'Sales',
-          },
-          {
-            id: 'Support_payload',
-            title: 'Support',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
-    friendly_name: 'welcome_message_new',
-    template_type: 'quick_reply',
-  },
-  {
-    body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
-    types: {
-      'twilio/quick-reply': {
-        body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
-        actions: [
-          {
-            id: 'Chatwoot Cloud_payload',
-            title: 'Chatwoot Cloud',
-          },
-          {
-            id: 'Self-hosted Chatwoot_payload',
-            title: 'Self-hosted Chatwoot',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX3a35e5cd76529fd91d19341deb4ef685',
-    friendly_name: 'saas_whatsapp_question',
-    template_type: 'quick_reply',
-  },
-  {
-    body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
-    types: {
-      'twilio/quick-reply': {
-        body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
-        actions: [
-          {
-            id: 'Support_payload',
-            title: 'Support',
-          },
-          {
-            id: 'Sales_payload',
-            title: 'Sales',
-          },
-          {
-            id: 'Demo_payload',
-            title: 'Demo',
-          },
-        ],
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en_US',
-    variables: {},
-    content_sid: 'HX5d8e09f96cee2f7fb7bab223c03cb0a1',
-    friendly_name: 'welcome_message',
-    template_type: 'quick_reply',
-  },
-  {
-    types: {
-      'twilio/call-to-action': {
-        actions: [
-          {
-            id: null,
-            title: 'Pay now',
-            type: 'URL',
-            url: 'https://payments.example.com/pay',
-          },
-        ],
-        body: 'Hello, this is a gentle reminder regarding your course fee.\n\nThe payment is due on {{date}}.\nKindly complete the payment at your convenience',
-      },
-    },
-    status: 'approved',
-    category: 'utility',
-    language: 'en',
-    variables: {
-      date: '01-Jan-2026',
-    },
-    content_sid: 'HX63e56fc142aad670f320bf400d5bfeb7',
-    friendly_name: 'course_fee_reminder',
-    template_type: 'call_to_action',
-  },
-];

app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js

@@ -1,408 +0,0 @@
-export const whatsAppTemplates = [
-  {
-    id: '1381151706284063',
-    name: 'event_invitation_static',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'F1',
-              param_name: 'event_name',
-            },
-            {
-              example: 'Dubai',
-              param_name: 'location',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            url: 'https://events.example.com/register',
-            text: 'Visit website',
-            type: 'URL',
-          },
-          {
-            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
-            text: 'Get Directions',
-            type: 'URL',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '767076159336759',
-    name: 'purchase_receipt',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'DOCUMENT',
-        example: {
-          header_handle: [
-            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
-          ],
-        },
-      },
-      {
-        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
-        type: 'BODY',
-        example: {
-          body_text: [['credit', 'CS Mutual', 'receipt']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1469258364071127',
-    name: 'discount_coupon',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: '30',
-              param_name: 'discount_percentage',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Copy offer code',
-            type: 'COPY_CODE',
-            example: ['SAVE1OFF'],
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1075221534579807',
-    name: 'support_callback',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en',
-    components: [
-      {
-        text: 'Hello {{name}},  our support team will call you regarding ticket # {{ticket_id}}.',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'muhsin',
-              param_name: 'name',
-            },
-            {
-              example: '232323',
-              param_name: 'ticket_id',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Call Support',
-            type: 'PHONE_NUMBER',
-            phone_number: '+2112121212',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1023596726651144',
-    name: 'training_video',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'VIDEO',
-        example: {
-          header_handle: [
-            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
-          ],
-        },
-      },
-      {
-        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'john',
-              param_name: 'name',
-            },
-            {
-              example: 'July 31',
-              param_name: 'date',
-            },
-          ],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1106685194739985',
-    name: 'order_confirmation',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'IMAGE',
-        example: {
-          header_handle: ['https://vite-five-phi.vercel.app/vaporfly.png'],
-        },
-      },
-      {
-        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
-        type: 'BODY',
-        example: {
-          body_text: [['blue canvas shoes']],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1242180011253003',
-    name: 'product_launch',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        type: 'HEADER',
-        format: 'IMAGE',
-        example: {
-          header_handle: ['https://vite-five-phi.vercel.app/coat.png'],
-        },
-      },
-      {
-        text: 'New arrival! Our stunning coat now available in {{color}} color.',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'blue',
-              param_name: 'color',
-            },
-          ],
-        },
-      },
-      {
-        text: 'Free shipping on orders over $100. Limited time offer.',
-        type: 'FOOTER',
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1449876326175680',
-    name: 'technician_visit',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Technician visit',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
-        type: 'BODY',
-        example: {
-          body_text: [
-            ['John', '123 Maple St', '2025-12-31', '10:00 AM', '2:00 PM'],
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            text: 'Confirm',
-            type: 'QUICK_REPLY',
-          },
-          {
-            text: 'Reschedule',
-            type: 'QUICK_REPLY',
-          },
-        ],
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '997298832221901',
-    name: 'greet',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: 'Hey {{customer_name}} how may I help you?',
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'John',
-              param_name: 'customer_name',
-            },
-          ],
-        },
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '632315222954611',
-    name: 'hello_world',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Hello World',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
-        type: 'BODY',
-      },
-      {
-        text: 'WhatsApp Business Platform sample message',
-        type: 'FOOTER',
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '787864066907971',
-    name: 'feedback_request',
-    status: 'APPROVED',
-    category: 'MARKETING',
-    language: 'en',
-    components: [
-      {
-        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
-        type: 'BODY',
-        example: {
-          body_text_named_params: [
-            {
-              example: 'muhsin',
-              param_name: 'name',
-            },
-          ],
-        },
-      },
-      {
-        type: 'BUTTONS',
-        buttons: [
-          {
-            url: 'https://feedback.example.com/survey',
-            text: 'Leave Feedback',
-            type: 'URL',
-          },
-        ],
-      },
-    ],
-    sub_category: 'CUSTOM',
-    parameter_format: 'NAMED',
-  },
-  {
-    id: '1938057163677205',
-    name: 'address_update',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: 'Address update',
-        type: 'HEADER',
-        format: 'TEXT',
-      },
-      {
-        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
-        type: 'BODY',
-        example: {
-          body_text: [['John', '123 Main St', 'support@telco.com']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-  {
-    id: '1644094842949394',
-    name: 'delivery_confirmation',
-    status: 'APPROVED',
-    category: 'UTILITY',
-    language: 'en_US',
-    components: [
-      {
-        text: '{{1}}, your order was successfully delivered on {{2}}.\\n\\nThank you for your purchase.\\n',
-        type: 'BODY',
-        example: {
-          body_text: [['John', 'Jan 1, 2024']],
-        },
-      },
-    ],
-    parameter_format: 'POSITIONAL',
-  },
-];
-
-// Helper function to get variable values from examples
-export const getWhatsAppVariables = template => {
-  const variables = {};
-  template.components?.forEach(component => {
-    if (component.example?.body_text_named_params) {
-      component.example.body_text_named_params.forEach(param => {
-        variables[param.param_name] = param.example;
-      });
-    }
-    if (component.example?.body_text) {
-      component.example.body_text[0]?.forEach((value, index) => {
-        variables[(index + 1).toString()] = value;
-      });
-    }
-  });
-  return variables;
-};

app/javascript/dashboard/components/CustomAttribute.vue

@@ -102,14 +102,13 @@ export default {
       return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.v$.editedValue.url?.$invalid) {
+      if (this.v$.editedValue.url) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (this.v$.editedValue.regexValidation?.$invalid) {
-        return (
-          this.regexCue ||
-          this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
-        );
+      if (!this.v$.editedValue.regexValidation) {
+        return this.regexCue
+          ? this.regexCue
+          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
       }
       return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
     },
@@ -135,12 +134,9 @@ export default {
       editedValue: {
         required,
         regexValidation: value => {
-          if (!this.attributeRegex || !value) return true;
-          try {
-            return getRegexp(this.attributeRegex).test(value);
-          } catch {
-            return false;
-          }
+          return !(
+            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
+          );
         },
       },
     };

app/javascript/dashboard/components/app/StatusBanner.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
-import { LocalStorage } from 'shared/helpers/localStorage';
-import MessageFormatter from 'shared/helpers/MessageFormatter';
-import Banner from 'dashboard/components-next/banner/Banner.vue';
-
-const BANNER_COLOR_MAP = {
-  info: 'blue',
-  warning: 'amber',
-  error: 'ruby',
-};
-
-const { t } = useI18n();
-const globalConfig = useMapGetter('globalConfig/get');
-
-const dismissedBannerIds = ref(
-  LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS) || []
-);
-
-const dismissKey = banner => `${banner.id}-${banner.updated_at}`;
-
-const visibleBanners = computed(() => {
-  const banners = globalConfig.value?.activePlatformBanners || [];
-  return banners.filter(
-    banner => !dismissedBannerIds.value.includes(dismissKey(banner))
-  );
-});
-
-const formattedMessage = message =>
-  new MessageFormatter(message).formattedMessage;
-
-const bannerColor = bannerType => BANNER_COLOR_MAP[bannerType] || 'slate';
-
-const dismissBanner = banner => {
-  const key = dismissKey(banner);
-  if (dismissedBannerIds.value.includes(key)) return;
-
-  dismissedBannerIds.value.push(key);
-  LocalStorage.set(
-    LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS,
-    dismissedBannerIds.value
-  );
-};
-</script>
-
-<template>
-  <Banner
-    v-for="banner in visibleBanners"
-    :key="banner.id"
-    :color="bannerColor(banner.banner_type)"
-    :action-label="t('GENERAL_SETTINGS.DISMISS')"
-    class="!rounded-none !justify-center [&_.link]:underline [&_p]:m-0"
-    @action="dismissBanner(banner)"
-  >
-    <span
-      v-dompurify-html="formattedMessage(banner.banner_message)"
-      class="text-xs"
-    />
-  </Banner>
-</template>

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

@@ -1,5 +1,3 @@
-<!-- DEPRECIATED -->
-<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script>
 import NextButton from 'dashboard/components-next/button/Button.vue';
 

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

@@ -1,16 +1,11 @@
 <script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
-import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
-const RINGTONE_URL = '/audio/dashboard/bell.mp3';
-
-const route = useRoute();
 const router = useRouter();
 const store = useStore();
 
@@ -26,53 +21,19 @@ const {
   formattedCallDuration,
 } = useCallSession();
 
-// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
-// don't expose a mic track on the browser side.
-const isMuted = ref(false);
-const isWhatsappActive = computed(
-  () => activeCall.value?.provider === 'whatsapp'
-);
-
-const toggleMute = () => {
-  isMuted.value = !isMuted.value;
-  setWhatsappCallMuted(isMuted.value);
-};
-
-watch(hasActiveCall, active => {
-  if (!active) isMuted.value = false;
-});
-
 const getCallInfo = call => {
   const conversation = store.getters.getConversationById(call?.conversationId);
   const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
   const sender = conversation?.meta?.sender;
-  // Inbound WhatsApp calls stash caller info on the call record (from the cable
-  // payload) so the widget has something to show before the conversation lands.
-  const caller = call?.caller;
   return {
     conversation,
     inbox,
-    contactName:
-      sender?.name ||
-      sender?.phone_number ||
-      caller?.name ||
-      caller?.phone ||
-      'Unknown caller',
-    phoneNumber: sender?.phone_number || caller?.phone || '',
+    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
     inboxName: inbox?.name || 'Customer support',
-    avatar: sender?.avatar || sender?.thumbnail || caller?.avatar,
+    avatar: sender?.avatar || sender?.thumbnail,
   };
 };
 
-const goToConversation = call => {
-  const conversationId = call?.conversationId;
-  const accountId = route.params.accountId;
-  if (!conversationId || !accountId) return;
-  router.push({
-    path: frontendURL(conversationUrl({ accountId, id: conversationId })),
-  });
-};
-
 const handleEndCall = async () => {
   const call = activeCall.value;
   if (!call) return;
@@ -83,27 +44,25 @@ const handleEndCall = async () => {
   await endCallSession({
     conversationId: call.conversationId,
     inboxId,
-    callSid: call.callSid,
   });
 };
 
 const handleJoinCall = async call => {
-  if (!call || isJoining.value) return;
   const { conversation } = getCallInfo(call);
+  if (!call || !conversation || isJoining.value) return;
 
+  // End current active call before joining new one
   if (hasActiveCall.value) {
     await handleEndCall();
   }
 
-  // The conversation may not be hydrated yet (post-refresh seeding path);
-  // call.inboxId already carries what joinCall needs.
   const result = await joinCall({
     conversationId: call.conversationId,
-    inboxId: call.inboxId || conversation?.inbox_id,
+    inboxId: conversation.inbox_id,
     callSid: call.callSid,
   });
 
-  if (result && conversation) {
+  if (result) {
     router.push({
       name: 'inbox_conversation',
       params: { conversation_id: call.conversationId },
@@ -111,15 +70,12 @@ const handleJoinCall = async call => {
   }
 };
 
-// Auto-join outbound calls when window is visible. WhatsApp outbound has no
-// separate join step (the offer was sent at initiate time and the answer is
-// applied directly by the cable handler), so this only covers Twilio.
+// Auto-join outbound calls when window is visible
 watch(
   () => incomingCalls.value[0],
   call => {
     if (
       call?.callDirection === 'outbound' &&
-      call?.provider !== 'whatsapp' &&
       !hasActiveCall.value &&
       WindowVisibilityHelper.isWindowVisible()
     ) {
@@ -128,103 +84,47 @@ watch(
   },
   { immediate: true }
 );
-
-// Loop the ringtone while an inbound call is unanswered. Stop the moment any
-// call is active (we joined), every inbound call cleared, or the widget tears
-// down. Browser autoplay may reject the first play() if the tab has no prior
-// user gesture; that's fine — the visual widget still surfaces the call.
-const ringtone = new Audio(RINGTONE_URL);
-ringtone.loop = true;
-ringtone.volume = 1;
-
-const stopRingtone = () => {
-  ringtone.pause();
-  ringtone.currentTime = 0;
-};
-
-const ringingInbound = computed(() =>
-  incomingCalls.value.some(call => call.callDirection !== 'outbound')
-);
-
-watch(
-  () => ringingInbound.value && !hasActiveCall.value,
-  shouldRing => {
-    if (shouldRing) {
-      ringtone.play().catch(() => {});
-    } else {
-      stopRingtone();
-    }
-  },
-  { immediate: true }
-);
-
-onBeforeUnmount(stopRingtone);
 </script>
 
 <template>
   <div
     v-if="incomingCalls.length || hasActiveCall"
-    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-80"
+    class="fixed ltr:right-4 rtl:left-4 bottom-4 z-50 flex flex-col gap-2 w-72"
   >
     <!-- Incoming Calls (shown above active call) -->
     <div
       v-for="call in hasActiveCall ? incomingCalls : []"
       :key="call.callSid"
-      class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
     >
-      <div class="flex items-center gap-3">
-        <div
-          class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex"
-        >
-          <Avatar
-            :src="getCallInfo(call).avatar"
-            :name="getCallInfo(call).contactName"
-            :size="40"
-            rounded-full
-          />
-        </div>
-        <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-            {{ getCallInfo(call).contactName }}
-          </p>
-          <p
-            v-if="getCallInfo(call).phoneNumber"
-            class="text-xs text-n-slate-11 truncate mb-0"
-          >
-            {{ getCallInfo(call).phoneNumber }}
-          </p>
-        </div>
+      <div class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex">
+        <Avatar
+          :src="getCallInfo(call).avatar"
+          :name="getCallInfo(call).contactName"
+          :size="40"
+          rounded-full
+        />
       </div>
-      <button
-        v-if="call.conversationId"
-        class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
-        @click="goToConversation(call)"
-      >
-        <i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
-        <span class="text-xs text-n-slate-12">
-          {{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
-        </span>
-        <span class="ml-auto text-xs text-n-slate-11">
-          #{{ call.conversationId }}
-        </span>
-        <i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
-      </button>
-      <div class="flex items-center justify-between gap-2">
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(call).contactName }}
+        </p>
+        <p class="text-xs text-n-slate-11 truncate">
+          {{ getCallInfo(call).inboxName }}
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
         <button
-          v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')"
-          class="flex justify-center items-center w-10 h-10 bg-n-slate-3 hover:bg-n-slate-4 rounded-full transition-colors"
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
           @click="dismissCall(call.callSid)"
         >
-          <i class="text-lg text-n-slate-12 i-ph-phone-x-bold" />
+          <i class="text-lg text-white i-ph-phone-x-bold" />
         </button>
         <button
-          class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
           @click="handleJoinCall(call)"
         >
-          <i class="text-base text-white i-ph-phone-bold" />
-          <span class="text-sm font-medium text-white">
-            {{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
-          </span>
+          <i class="text-lg text-white i-ph-phone-bold" />
         </button>
       </div>
     </div>
@@ -232,38 +132,27 @@ onBeforeUnmount(stopRingtone);
     <!-- Main Call Widget -->
     <div
       v-if="hasActiveCall || incomingCalls.length"
-      class="flex flex-col gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
     >
-      <div class="flex items-center gap-3">
-        <div
-          class="ring-2 ring-n-teal-9 rounded-full inline-flex"
-          :class="{ 'animate-pulse': !hasActiveCall }"
-        >
-          <Avatar
-            :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
-            :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
-            :size="40"
-            rounded-full
-          />
-        </div>
-        <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
-            {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
-          </p>
-          <p
-            v-if="getCallInfo(activeCall || incomingCalls[0]).phoneNumber"
-            class="text-xs text-n-slate-11 truncate mb-0"
-          >
-            {{ getCallInfo(activeCall || incomingCalls[0]).phoneNumber }}
-          </p>
-        </div>
-        <p
-          v-if="hasActiveCall"
-          class="font-mono text-sm text-n-slate-12 shrink-0"
-        >
+      <div
+        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
+        :class="{ 'animate-pulse': !hasActiveCall }"
+      >
+        <Avatar
+          :src="getCallInfo(activeCall || incomingCalls[0]).avatar"
+          :name="getCallInfo(activeCall || incomingCalls[0]).contactName"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{ getCallInfo(activeCall || incomingCalls[0]).contactName }}
+        </p>
+        <p v-if="hasActiveCall" class="font-mono text-sm text-n-teal-9">
           {{ formattedCallDuration }}
         </p>
-        <p v-else class="text-xs text-n-slate-11 shrink-0">
+        <p v-else class="text-xs text-n-slate-11">
           {{
             incomingCalls[0]?.callDirection === 'outbound'
               ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
@@ -271,76 +160,24 @@ onBeforeUnmount(stopRingtone);
           }}
         </p>
       </div>
-
-      <button
-        v-if="(activeCall || incomingCalls[0])?.conversationId"
-        class="flex items-center gap-2 px-3 py-2 bg-n-alpha-2 hover:bg-n-alpha-3 rounded-lg transition-colors"
-        @click="goToConversation(activeCall || incomingCalls[0])"
-      >
-        <i class="text-base text-n-slate-11 i-ph-chat-circle-text-bold" />
-        <span class="text-xs text-n-slate-12">
-          {{ $t('CONVERSATION.VOICE_WIDGET.VIEW_CHAT_HISTORY') }}
-        </span>
-        <span class="ml-auto text-xs text-n-slate-11">
-          #{{ (activeCall || incomingCalls[0])?.conversationId }}
-        </span>
-        <i class="text-xs text-n-slate-11 i-ph-caret-right-bold" />
-      </button>
-
-      <div class="flex items-center justify-between gap-2">
-        <div class="flex gap-2">
-          <button
-            v-if="hasActiveCall && isWhatsappActive"
-            v-tooltip.top="
-              isMuted
-                ? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
-                : $t('CONVERSATION.VOICE_WIDGET.MUTE')
-            "
-            class="flex justify-center items-center w-10 h-10 rounded-full transition-colors"
-            :class="
-              isMuted
-                ? 'bg-n-amber-9 hover:bg-n-amber-10'
-                : 'bg-n-slate-3 hover:bg-n-slate-4'
-            "
-            @click="toggleMute"
-          >
-            <i
-              class="text-lg"
-              :class="
-                isMuted
-                  ? 'text-white i-ph-microphone-slash-bold'
-                  : 'text-n-slate-12 i-ph-microphone-bold'
-              "
-            />
-          </button>
-        </div>
-        <div class="flex gap-2">
-          <button
-            v-if="
-              !hasActiveCall && incomingCalls[0]?.callDirection !== 'outbound'
-            "
-            class="flex justify-center items-center gap-2 px-4 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
-            @click="handleJoinCall(incomingCalls[0])"
-          >
-            <i class="text-base text-white i-ph-phone-bold" />
-            <span class="text-sm font-medium text-white">
-              {{ $t('CONVERSATION.VOICE_WIDGET.JOIN_CALL') }}
-            </span>
-          </button>
-          <button
-            class="flex justify-center items-center gap-2 px-4 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
-            @click="
-              hasActiveCall
-                ? handleEndCall()
-                : rejectIncomingCall(incomingCalls[0]?.callSid)
-            "
-          >
-            <i class="text-base text-white i-ph-phone-x-bold" />
-            <span class="text-sm font-medium text-white">
-              {{ $t('CONVERSATION.VOICE_WIDGET.END_CALL') }}
-            </span>
-          </button>
-        </div>
+      <div class="flex shrink-0 gap-2">
+        <button
+          class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          @click="
+            hasActiveCall
+              ? handleEndCall()
+              : rejectIncomingCall(incomingCalls[0]?.callSid)
+          "
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          v-if="!hasActiveCall"
+          class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+          @click="handleJoinCall(incomingCalls[0])"
+        >
+          <i class="text-lg text-white i-ph-phone-bold" />
+        </button>
       </div>
     </div>
   </div>

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

@@ -51,7 +51,6 @@ import {
 
 import {
   appendSignature,
-  collapseSelection,
   findNodeToInsertImage,
   getContentNode,
   insertAtCursor,
@@ -67,7 +66,6 @@ import {
 import {
   hasPressedEnterAndNotCmdOrShift,
   hasPressedCommandAndEnter,
-  isEscape,
 } from 'shared/helpers/KeyboardHelpers';
 import { createTypingIndicator } from '@chatwoot/utils';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
@@ -517,9 +515,7 @@ function setMenubarPosition({ selection } = {}) {
 
 function checkSelection(editorState) {
   showSelectionMenu.value = false;
-  const { selection } = editorState;
-  // Skip NodeSelection (from Esc -> selectParentNode); only text ranges count.
-  const hasSelection = !selection.empty && !selection.node;
+  const hasSelection = editorState.selection.from !== editorState.selection.to;
   if (hasSelection === isTextSelected.value) return;
 
   isTextSelected.value = hasSelection;
@@ -715,17 +711,12 @@ function handleLineBreakWhenCmdAndEnterToSendEnabled(event) {
 }
 
 function onKeydown(event) {
-  if (isEscape(event)) {
-    collapseSelection(editorView);
-    return true;
-  }
   if (isEnterToSendEnabled()) {
     handleLineBreakWhenEnterToSendEnabled(event);
   }
   if (isCmdPlusEnterToSendEnabled()) {
     handleLineBreakWhenCmdAndEnterToSendEnabled(event);
   }
-  return false;
 }
 
 function createEditorView() {
@@ -753,9 +744,6 @@ function createEditorView() {
       blur: () => {
         if (props.disabled) return;
         typingIndicator.stop();
-        // PM keeps its selection on blur — clear the menu flags manually.
-        isTextSelected.value = false;
-        editorRoot.value?.classList.remove('has-selection');
         emit('blur');
       },
       paste: (view, event) => {

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

@@ -13,15 +13,10 @@ import {
   triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
-import embedPreviewPlugin from '@chatwoot/prosemirror-schema/src/plugins/embedPreview';
-import trailingParagraphPlugin from '@chatwoot/prosemirror-schema/src/plugins/trailingParagraph';
-import { embeds as markdownEmbeds } from 'dashboard/helper/markdownEmbeds';
 import { toggleMark } from 'prosemirror-commands';
 import { wrapInList } from 'prosemirror-schema-list';
 import { toggleBlockType } from '@chatwoot/prosemirror-schema/src/menu/common';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { isEscape } from 'shared/helpers/KeyboardHelpers';
-import { collapseSelection } from 'dashboard/helper/editorHelper';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
@@ -80,8 +75,6 @@ export default {
       plugins: [
         imagePastePlugin(this.handleImageUpload),
         this.createSlashPlugin(),
-        embedPreviewPlugin(markdownEmbeds),
-        trailingParagraphPlugin(),
       ],
       isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
       showSlashMenu: false,
@@ -118,12 +111,6 @@ export default {
       this.focusEditorInputField();
     }
   },
-  beforeUnmount() {
-    if (editorView) {
-      editorView.destroy();
-      editorView = null;
-    }
-  },
   methods: {
     createSlashPlugin() {
       return suggestionsPlugin({
@@ -375,33 +362,19 @@ export default {
     onKeyup() {
       this.$emit('keyup');
     },
-    onKeydown(view, event) {
+    onKeydown() {
       this.$emit('keydown');
-      if (isEscape(event)) {
-        if (this.showSlashMenu) {
-          this.showSlashMenu = false;
-          this.slashSearchTerm = '';
-          this.slashMenuPosition = null;
-          return true;
-        }
-        collapseSelection(editorView);
-        return true;
-      }
-      return false;
     },
     onBlur() {
-      // ProseMirror keeps its selection on blur — clear the menu flag manually.
-      this.isTextSelected = false;
-      this.$refs.editor?.classList.remove('has-selection');
       this.$emit('blur');
     },
     onFocus() {
       this.$emit('focus');
     },
     checkSelection(editorState) {
-      const { selection } = editorState;
-      // Skip NodeSelection (from Esc -> selectParentNode); only text ranges count.
-      const hasSelection = !selection.empty && !selection.node;
+      const { from, to } = editorState.selection;
+      // Check if there's a selection (from and to are different)
+      const hasSelection = from !== to;
       // If the selection state is the same as the previous state, do nothing
       if (hasSelection === this.isTextSelected) return;
       // Update the selection state
@@ -499,9 +472,4 @@ export default {
   max-height: 7.5rem;
   overflow: auto;
 }
-
-.ProseMirror .cw-embed-preview {
-  max-width: 36rem;
-  margin: 0.5rem 0 1rem;
-}
 </style>

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

@@ -38,16 +38,10 @@ const unreadCount = computed(() => props.chat.unread_count);
 const hasUnread = computed(() => unreadCount.value > 0);
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const voiceCallData = computed(() => {
-  const last = lastMessageInChat.value;
-  if (last?.content_type !== 'voice_call' || !last.call) {
-    return { status: null, direction: null };
-  }
-  return {
-    status: last.call.status,
-    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
-  };
-});
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
 
 const showMetaSection = computed(() => {
   return (

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

@@ -4,7 +4,6 @@ import { useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
-import ButtonV4 from 'dashboard/components-next/button/Button.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Avatar from 'next/avatar/Avatar.vue';
@@ -13,13 +12,6 @@ import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
-import {
-  getVoiceCallProvider,
-  VOICE_CALL_PROVIDERS,
-} from 'dashboard/helper/inbox';
-import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import { useCallsStore } from 'dashboard/stores/calls';
-import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
@@ -99,53 +91,6 @@ const hasMultipleInboxes = computed(
 );
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
-
-const callsStore = useCallsStore();
-const whatsappCallSession = useWhatsappCallSession();
-
-const isWhatsappVoiceInbox = computed(
-  () => getVoiceCallProvider(inbox.value) === VOICE_CALL_PROVIDERS.WHATSAPP
-);
-
-const isWhatsappCallButtonDisabled = computed(
-  () =>
-    whatsappCallSession.isInitiating.value ||
-    callsStore.hasActiveCall ||
-    callsStore.hasIncomingCall
-);
-
-const startWhatsappCall = async () => {
-  if (whatsappCallSession.isInitiating.value) return;
-  try {
-    const response = await whatsappCallSession.initiateOutboundCall(
-      currentChat.value.id
-    );
-
-    // Permission template path returns no call id — show banner, no widget yet.
-    if (!response?.id) {
-      const status = response?.status;
-      const messageKey =
-        status === 'permission_pending'
-          ? 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_PENDING'
-          : 'CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_REQUESTED';
-      useAlert(t(messageKey));
-      return;
-    }
-
-    // Stay non-active until Meta delivers the connect webhook (sdp_answer);
-    // flipping to active here would start the duration timer before pickup.
-    callsStore.addCall({
-      callSid: response.call_id,
-      callId: response.id,
-      conversationId: currentChat.value.id,
-      inboxId: inbox.value?.id,
-      callDirection: 'outbound',
-      provider: 'whatsapp',
-    });
-  } catch (error) {
-    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
-  }
-};
 </script>
 
 <template>
@@ -207,18 +152,6 @@ const startWhatsappCall = async () => {
         :parent-width="width"
         class="hidden md:flex"
       />
-      <ButtonV4
-        v-if="isWhatsappVoiceInbox"
-        v-tooltip.bottom="$t('CONVERSATION.HEADER.WHATSAPP_CALL')"
-        size="sm"
-        variant="ghost"
-        color="slate"
-        icon="i-lucide-phone"
-        :is-loading="whatsappCallSession.isInitiating.value"
-        :disabled="isWhatsappCallButtonDisabled"
-        class="rounded-md hover:bg-n-alpha-2"
-        @click="startWhatsappCall"
-      />
       <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>

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

@@ -47,11 +47,7 @@ const mockStore = createStore({
             11: { id: 11, channel_type: INBOX_TYPES.API },
             12: { id: 12, channel_type: INBOX_TYPES.SMS },
             13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
-            14: {
-              id: 14,
-              channel_type: INBOX_TYPES.TWILIO,
-              voice_enabled: true,
-            },
+            14: { id: 14, channel_type: INBOX_TYPES.VOICE },
             15: { id: 15, channel_type: INBOX_TYPES.TIKTOK },
           };
           return inboxes[id] || null;
@@ -215,11 +211,11 @@ describe('useInbox', () => {
       });
       expect(wrapper.vm.isAnInstagramChannel).toBe(true);
 
-      // Test Voice (Twilio with voice_enabled)
+      // Test Voice
       wrapper = mount(createTestComponent(14), {
         global: { plugins: [mockStore] },
       });
-      expect(wrapper.vm.voiceCallEnabled).toBe(true);
+      expect(wrapper.vm.isAVoiceChannel).toBe(true);
 
       // Test Tiktok
       wrapper = mount(createTestComponent(15), {
@@ -278,8 +274,7 @@ describe('useInbox', () => {
         'isAnEmailChannel',
         'isAnInstagramChannel',
         'isATiktokChannel',
-        'voiceCallEnabled',
-        'voiceCallProvider',
+        'isAVoiceChannel',
       ];
 
       expectedProperties.forEach(prop => {

app/javascript/dashboard/composables/useCallSession.js

@@ -1,25 +1,11 @@
 import { computed, ref, watch, onUnmounted, onMounted } from 'vue';
-import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
 import VoiceAPI from 'dashboard/api/channel/voice/voiceAPIClient';
 import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { useCallsStore } from 'dashboard/stores/calls';
-import { useAlert } from 'dashboard/composables';
-import {
-  useWhatsappCallSession,
-  sendWhatsappTerminateBeacon,
-  cleanupWhatsappSession,
-} from 'dashboard/composables/useWhatsappCallSession';
-import { handleVoiceCallCreated } from 'dashboard/helper/voice';
 import Timer from 'dashboard/helper/Timer';
 
-const isWhatsappCall = call => call?.provider === 'whatsapp';
-
 export function useCallSession() {
-  const store = useStore();
   const callsStore = useCallsStore();
-  const whatsappSession = useWhatsappCallSession();
-  const { t } = useI18n();
   const isJoining = ref(false);
   const callDuration = ref(0);
   const durationTimer = new Timer(elapsed => {
@@ -29,7 +15,6 @@ export function useCallSession() {
   const activeCall = computed(() => callsStore.activeCall);
   const incomingCalls = computed(() => callsStore.incomingCalls);
   const hasActiveCall = computed(() => callsStore.hasActiveCall);
-  const hasIncomingCall = computed(() => callsStore.hasIncomingCall);
 
   watch(
     hasActiveCall,
@@ -44,79 +29,21 @@ export function useCallSession() {
     { immediate: true }
   );
 
-  // Warn before a refresh/close drops a live or ringing call. Cable events
-  // aren't replayed on reconnect, so a confirmed refresh during ringing would
-  // leave the agent unable to accept; for active calls the WebRTC session
-  // dies outright (no rejoin path).
-  const handleBeforeUnload = event => {
-    if (!hasActiveCall.value && !hasIncomingCall.value) return;
-    event.preventDefault();
-    event.returnValue = '';
-  };
-
-  // Cable broadcasts (voice_call.incoming / message.created) are one-shot, so
-  // on a hard refresh they leave the calls store empty. Seed it from any
-  // ringing voice_call message in the conversation cache.
-  const seedCallsFromHydratedMessages = () => {
-    const conversations = store.getters.getAllConversations || [];
-    const currentUserId = store.getters.getCurrentUserID;
-    conversations.forEach(conv => {
-      (conv.messages || []).forEach(msg => {
-        if (msg.content_type !== 'voice_call') return;
-        if (msg.call?.status !== 'ringing') return;
-        handleVoiceCallCreated(msg, currentUserId);
-      });
-    });
-  };
-
-  // Terminate only the active call — ringing calls stay alive on Meta so the
-  // agent can pick them up after reload (seeded back via the watcher above).
-  const handlePageHide = () => {
-    sendWhatsappTerminateBeacon();
-  };
-
-  const handleTwilioDisconnected = () => callsStore.clearActiveCall();
-
   onMounted(() => {
-    TwilioVoiceClient.addEventListener(
-      'call:disconnected',
-      handleTwilioDisconnected
+    TwilioVoiceClient.addEventListener('call:disconnected', () =>
+      callsStore.clearActiveCall()
     );
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    window.addEventListener('pagehide', handlePageHide);
-    seedCallsFromHydratedMessages();
   });
 
-  // Re-seed when conversations stream in after mount; addCall merges by callSid.
-  watch(
-    () => store.getters.getAllConversations?.length,
-    () => seedCallsFromHydratedMessages()
-  );
-
   onUnmounted(() => {
     durationTimer.stop();
-    TwilioVoiceClient.removeEventListener(
-      'call:disconnected',
-      handleTwilioDisconnected
+    TwilioVoiceClient.removeEventListener('call:disconnected', () =>
+      callsStore.clearActiveCall()
     );
-    window.removeEventListener('beforeunload', handleBeforeUnload);
-    window.removeEventListener('pagehide', handlePageHide);
   });
 
-  const findCall = callSid => callsStore.calls.find(c => c.callSid === callSid);
-
-  const endCall = async ({ conversationId, inboxId, callSid }) => {
-    const call = findCall(callSid);
-    if (isWhatsappCall(call)) {
-      // Pass call.callId so a wiped module state (e.g. a prior accept attempt
-      // tore down the WebRTC session) doesn't stop us hitting /terminate.
-      await whatsappSession.endActiveCall(call.callId);
-      durationTimer.stop();
-      callsStore.clearActiveCall();
-      return;
-    }
-
-    await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
+  const endCall = async ({ conversationId, inboxId }) => {
+    await VoiceAPI.leaveConference(inboxId, conversationId);
     TwilioVoiceClient.endClientCall();
     durationTimer.stop();
     callsStore.clearActiveCall();
@@ -125,26 +52,8 @@ export function useCallSession() {
   const joinCall = async ({ conversationId, inboxId, callSid }) => {
     if (isJoining.value) return null;
 
-    const call = findCall(callSid);
-    // Outbound calls were initiated by this agent — there is no inbound offer
-    // to accept and the WebRTC session is already mid-handshake. Routing
-    // through acceptIncomingCall would call prepareInboundAnswer → cleanup()
-    // and destroy the live outbound session, then 409 from the backend.
-    if (call?.callDirection === 'outbound') return null;
-
     isJoining.value = true;
     try {
-      if (isWhatsappCall(call)) {
-        await whatsappSession.acceptIncomingCall({
-          callId: call.callId,
-          sdpOffer: call.sdpOffer,
-          iceServers: call.iceServers,
-        });
-        callsStore.setCallActive(callSid);
-        durationTimer.start();
-        return { callId: call.callId };
-      }
-
       const device = await TwilioVoiceClient.initializeDevice(inboxId);
       if (!device) return null;
 
@@ -157,7 +66,6 @@ export function useCallSession() {
       await TwilioVoiceClient.joinClientCall({
         to: joinResponse?.conference_sid,
         conversationId,
-        callSid,
       });
 
       callsStore.setCallActive(callSid);
@@ -165,15 +73,8 @@ export function useCallSession() {
 
       return { conferenceSid: joinResponse?.conference_sid };
     } catch (error) {
-      useAlert(error?.response?.data?.error || t('CONTACT_PANEL.CALL_FAILED'));
-      if (error?.response?.status === 409) {
-        TwilioVoiceClient.endClientCall();
-        callsStore.dismissCall(callSid);
-      }
       // eslint-disable-next-line no-console
       console.error('Failed to join call:', error);
-      // Drop any half-built WebRTC state so the next click starts fresh.
-      cleanupWhatsappSession();
       return null;
     } finally {
       isJoining.value = false;
@@ -181,19 +82,7 @@ export function useCallSession() {
   };
 
   const rejectIncomingCall = callSid => {
-    const call = findCall(callSid);
-    if (isWhatsappCall(call) && call?.callId) {
-      // Outbound calls that are still ringing must be terminated, not rejected
-      // (reject is the inbound-side verb on Meta's API). Pass call.callId so
-      // a wiped module state still hits /terminate.
-      if (call.callDirection === 'outbound') {
-        whatsappSession.endActiveCall(call.callId);
-      } else {
-        whatsappSession.rejectIncomingCall(call.callId);
-      }
-    } else {
-      TwilioVoiceClient.endClientCall();
-    }
+    TwilioVoiceClient.endClientCall();
     callsStore.dismissCall(callSid);
   };
 

app/javascript/dashboard/composables/useInbox.js

@@ -1,11 +1,7 @@
 import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-import {
-  INBOX_TYPES,
-  isVoiceCallEnabled,
-  getVoiceCallProvider,
-} from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
 export const INBOX_FEATURES = {
   REPLY_TO: 'replyTo',
@@ -138,9 +134,9 @@ export const useInbox = (inboxId = null) => {
     return channelType.value === INBOX_TYPES.TIKTOK;
   });
 
-  const voiceCallEnabled = computed(() => isVoiceCallEnabled(inbox.value));
-
-  const voiceCallProvider = computed(() => getVoiceCallProvider(inbox.value));
+  const isAVoiceChannel = computed(() => {
+    return channelType.value === INBOX_TYPES.VOICE;
+  });
 
   return {
     inbox,
@@ -160,7 +156,6 @@ export const useInbox = (inboxId = null) => {
     isAnEmailChannel,
     isAnInstagramChannel,
     isATiktokChannel,
-    voiceCallEnabled,
-    voiceCallProvider,
+    isAVoiceChannel,
   };
 };

app/javascript/dashboard/composables/useWhatsappCallSession.js

@@ -1,391 +0,0 @@
-import { ref } from 'vue';
-import Cookies from 'js-cookie';
-import WhatsappCallsAPI from 'dashboard/api/channel/whatsapp/whatsappCallsAPI';
-
-// Module-level state lets the cable handlers and unload listeners reach the
-// live PeerConnection without prop-drilling refs through every composable.
-let pc = null;
-let localStream = null;
-let remoteStream = null;
-let remoteAudioEl = null;
-let mediaRecorder = null;
-let recorderChunks = [];
-let audioContext = null;
-let activeCallId = null;
-let intentionallyClosing = false;
-// Inbound calls record from the moment the agent clicks accept (their click =
-// pickup). Outbound calls must wait — Meta's `connect` webhook (which lands
-// during ringing) negotiates remote tracks ~20s before the contact actually
-// answers, and we don't want pre-pickup audio in the recording. This flag is
-// flipped to true by armOutboundRecorder() when the ACCEPTED status arrives.
-let recorderArmed = false;
-
-const ensureRemoteAudioElement = () => {
-  if (remoteAudioEl) return remoteAudioEl;
-  remoteAudioEl = document.createElement('audio');
-  remoteAudioEl.id = 'whatsapp-call-remote-audio';
-  remoteAudioEl.autoplay = true;
-  remoteAudioEl.playsInline = true;
-  remoteAudioEl.style.display = 'none';
-  document.body.appendChild(remoteAudioEl);
-  return remoteAudioEl;
-};
-
-const playRemoteStream = stream => {
-  const el = ensureRemoteAudioElement();
-  el.srcObject = stream;
-  el.play().catch(err => {
-    // eslint-disable-next-line no-console
-    console.warn('[WhatsApp Call] remote audio play() failed:', err);
-  });
-};
-
-// 1s timeslice keeps a recent recording chunk in memory so a remote hangup
-// that races cleanup still has data to upload.
-const RECORDING_TIMESLICE_MS = 1000;
-const ICE_GATHER_TIMEOUT_MS = 10000;
-
-const RECORDER_MIME_CANDIDATES = [
-  'audio/webm;codecs=opus',
-  'audio/webm',
-  'audio/ogg;codecs=opus',
-];
-
-// Outbound calls have no backend-supplied ice_servers (the call doesn't exist
-// at offer time). Without STUN the browser only sends host candidates and
-// browser→Meta media silently drops through any non-trivial NAT.
-const DEFAULT_OUTBOUND_ICE_SERVERS = [{ urls: 'stun:stun.l.google.com:19302' }];
-
-const waitForIceGatheringComplete = peer =>
-  new Promise(resolve => {
-    if (peer.iceGatheringState === 'complete') {
-      resolve();
-      return;
-    }
-    const timer = setTimeout(resolve, ICE_GATHER_TIMEOUT_MS);
-    peer.addEventListener('icegatheringstatechange', () => {
-      if (peer.iceGatheringState === 'complete') {
-        clearTimeout(timer);
-        resolve();
-      }
-    });
-  });
-
-const setupRecorder = () => {
-  if (!localStream || !remoteStream || mediaRecorder) return;
-  // createMediaStreamSource on a stream with no audio tracks wires up to
-  // nothing — the recorded mix would be silence. Wait until ontrack fires.
-  if (remoteStream.getAudioTracks().length === 0) return;
-
-  audioContext = new AudioContext({ sampleRate: 48000 });
-  // AudioContext starts suspended under most autoplay policies; without
-  // resume() the destination stream produces silence.
-  audioContext.resume().catch(() => {});
-
-  const destination = audioContext.createMediaStreamDestination();
-  audioContext.createMediaStreamSource(localStream).connect(destination);
-  audioContext.createMediaStreamSource(remoteStream).connect(destination);
-
-  const mimeType = RECORDER_MIME_CANDIDATES.find(t =>
-    MediaRecorder.isTypeSupported(t)
-  );
-  if (!mimeType) return;
-
-  recorderChunks = [];
-  mediaRecorder = new MediaRecorder(destination.stream, { mimeType });
-  mediaRecorder.ondataavailable = event => {
-    if (event.data && event.data.size > 0) recorderChunks.push(event.data);
-  };
-  mediaRecorder.start(RECORDING_TIMESLICE_MS);
-};
-
-const cleanup = () => {
-  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-    try {
-      mediaRecorder.stop();
-    } catch (_) {
-      /* noop */
-    }
-  }
-  if (audioContext && audioContext.state !== 'closed') {
-    audioContext.close().catch(() => {});
-  }
-  if (localStream) localStream.getTracks().forEach(t => t.stop());
-  if (remoteStream) remoteStream.getTracks().forEach(t => t.stop());
-  if (pc) pc.close();
-  if (remoteAudioEl) remoteAudioEl.srcObject = null;
-
-  pc = null;
-  localStream = null;
-  remoteStream = null;
-  mediaRecorder = null;
-  recorderChunks = [];
-  audioContext = null;
-  activeCallId = null;
-  intentionallyClosing = false;
-  recorderArmed = false;
-};
-
-const buildPeerConnection = iceServers => {
-  const config = iceServers && iceServers.length ? { iceServers } : {};
-  pc = new RTCPeerConnection(config);
-  remoteStream = new MediaStream();
-  pc.ontrack = event => {
-    // Reuse the same MediaStream object — the recorder's audioContext source
-    // taps it once, so reassigning would orphan the recorder.
-    const tracks =
-      event.streams && event.streams[0]
-        ? event.streams[0].getTracks()
-        : [event.track];
-    tracks.forEach(track => {
-      if (!remoteStream.getTracks().includes(track))
-        remoteStream.addTrack(track);
-    });
-    playRemoteStream(remoteStream);
-    // Only arm the recorder when the call is actually accepted. For outbound
-    // this is the ACCEPTED status webhook; for inbound this is the agent's
-    // own click (acceptIncomingCall flips recorderArmed before returning).
-    if (recorderArmed) setupRecorder();
-  };
-  return pc;
-};
-
-const stopRecorderAndUpload = async callId => {
-  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
-    await new Promise(resolve => {
-      mediaRecorder.addEventListener('stop', resolve, { once: true });
-      try {
-        mediaRecorder.stop();
-      } catch (_) {
-        resolve();
-      }
-    });
-  }
-  if (!recorderChunks.length || !callId) return;
-
-  const blob = new Blob(recorderChunks, { type: recorderChunks[0].type });
-  // Best-effort — the controller's idempotency guard handles a retry.
-  try {
-    await WhatsappCallsAPI.uploadRecording(callId, blob);
-  } catch (_) {
-    /* noop */
-  }
-};
-
-// devise-token-auth requires access-token / client / uid headers on every
-// request — navigator.sendBeacon can't set custom headers, so we rehydrate
-// the auth payload from the cw_d_session_info cookie that the dashboard sets
-// at login. Used by the page-close terminate path below.
-const getDeviseAuthHeaders = () => {
-  try {
-    const raw = Cookies.get('cw_d_session_info');
-    if (!raw) return null;
-    const session = JSON.parse(raw);
-    return {
-      'access-token': session['access-token'] || '',
-      client: session.client || '',
-      uid: session.uid || '',
-      expiry: session.expiry || '',
-      'token-type': session['token-type'] || 'Bearer',
-    };
-  } catch (_) {
-    return null;
-  }
-};
-
-const beaconTerminate = callId => {
-  if (!callId) return;
-  const accountId = window.location.pathname.split('/')[3];
-  if (!accountId) return;
-  const headers = getDeviseAuthHeaders();
-  if (!headers) return;
-  const url = `/api/v1/accounts/${accountId}/whatsapp_calls/${callId}/terminate`;
-  // fetch+keepalive (instead of navigator.sendBeacon) so we can attach auth
-  // headers — without them devise-token-auth 401s and the call stays open on
-  // Meta until its carrier-side timeout (~60s).
-  try {
-    fetch(url, {
-      method: 'POST',
-      keepalive: true,
-      credentials: 'same-origin',
-      headers: { 'Content-Type': 'application/json', ...headers },
-      body: '{}',
-    }).catch(() => {});
-  } catch (_) {
-    /* noop */
-  }
-};
-
-export function useWhatsappCallSession() {
-  const isInitiating = ref(false);
-
-  const prepareInboundAnswer = async (sdpOffer, iceServers) => {
-    cleanup();
-    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    buildPeerConnection(iceServers);
-    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
-    await pc.setRemoteDescription({ type: 'offer', sdp: sdpOffer });
-    const answer = await pc.createAnswer();
-    await pc.setLocalDescription(answer);
-    await waitForIceGatheringComplete(pc);
-    return pc.localDescription.sdp;
-  };
-
-  const prepareOutboundOffer = async () => {
-    cleanup();
-    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-    buildPeerConnection(DEFAULT_OUTBOUND_ICE_SERVERS);
-    localStream.getTracks().forEach(t => pc.addTrack(t, localStream));
-    const offer = await pc.createOffer();
-    await pc.setLocalDescription(offer);
-    await waitForIceGatheringComplete(pc);
-    return pc.localDescription.sdp;
-  };
-
-  const acceptIncomingCall = async ({ callId, sdpOffer, iceServers }) => {
-    // The store may not have sdpOffer yet (the cable broadcast can race the
-    // click). Fall back to GET /whatsapp_calls/:id which exposes it.
-    let offer = sdpOffer;
-    let ice = iceServers;
-    if (!offer && callId) {
-      try {
-        const fresh = await WhatsappCallsAPI.show(callId);
-        offer = fresh?.sdp_offer || fresh?.sdpOffer;
-        ice = ice || fresh?.ice_servers || fresh?.iceServers;
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(
-          '[WhatsApp Call] failed to fetch call data for accept:',
-          e
-        );
-      }
-    }
-    if (!offer) {
-      throw new Error('Missing sdp_offer for accept — call may have ended.');
-    }
-
-    const sdpAnswer = await prepareInboundAnswer(offer, ice);
-    activeCallId = callId;
-    // Inbound: agent's click is the pickup. Arm the recorder before the API
-    // round-trip so when ontrack fires (triggered by setRemoteDescription
-    // back in prepareInboundAnswer) the recorder is already authorized.
-    recorderArmed = true;
-    setupRecorder();
-    await WhatsappCallsAPI.accept(callId, sdpAnswer);
-  };
-
-  const rejectIncomingCall = async callId => {
-    intentionallyClosing = true;
-    try {
-      await WhatsappCallsAPI.reject(callId);
-    } finally {
-      cleanup();
-    }
-  };
-
-  const initiateOutboundCall = async conversationId => {
-    if (isInitiating.value) return null;
-    isInitiating.value = true;
-    try {
-      const sdpOffer = await prepareOutboundOffer();
-      const response = await WhatsappCallsAPI.initiate(
-        conversationId,
-        sdpOffer
-      );
-      // The permission-request branch returns no call id; let the caller render the banner.
-      activeCallId = response?.id || null;
-      return response;
-    } catch (e) {
-      cleanup();
-      // BE returns 422 when the contact hasn't opted in (permission template
-      // sent or already pending). Surface it to the caller as a normal
-      // response shape so it can render the banner instead of an error toast.
-      const data = e?.response?.data;
-      if (
-        data?.status === 'permission_requested' ||
-        data?.status === 'permission_pending'
-      ) {
-        return { status: data.status };
-      }
-      throw e;
-    } finally {
-      isInitiating.value = false;
-    }
-  };
-
-  // callIdOverride is the call.id from the dashboard's calls store. Module
-  // `activeCallId` may be null after a prior accept attempt's cleanup() — but
-  // the call still exists on Meta and must still be terminated. Falling back
-  // to the override means hangup is robust to a wiped local session.
-  const endActiveCall = async (callIdOverride = null) => {
-    const callId = activeCallId || callIdOverride;
-    if (!callId) {
-      cleanup();
-      return;
-    }
-    intentionallyClosing = true;
-    try {
-      await stopRecorderAndUpload(callId);
-      await WhatsappCallsAPI.terminate(callId).catch(() => {});
-    } finally {
-      cleanup();
-    }
-  };
-
-  return {
-    isInitiating,
-    prepareInboundAnswer,
-    prepareOutboundOffer,
-    acceptIncomingCall,
-    rejectIncomingCall,
-    initiateOutboundCall,
-    endActiveCall,
-  };
-}
-
-// Cable handlers fire outside any composable instance, so the shared session
-// surface is exposed as module-level functions for them.
-
-export const applyOutboundAnswer = async (callId, sdpAnswer) => {
-  if (!pc) return;
-  activeCallId = callId;
-  await pc.setRemoteDescription({ type: 'answer', sdp: sdpAnswer });
-};
-
-// Called by the cable handler when Meta delivers status=ACCEPTED for the
-// outbound call (real pickup). Flips the recorder gate and starts the
-// MediaRecorder. Idempotent — safe if ontrack hasn't fired yet (setupRecorder
-// bails until the remote stream has audio tracks; ontrack will retry).
-export const armOutboundRecorder = () => {
-  recorderArmed = true;
-  setupRecorder();
-};
-
-export const cleanupWhatsappSession = () => cleanup();
-
-export const handleWhatsappRemoteEnd = async callId => {
-  // Snapshot before cleanup nulls activeCallId.
-  const id = callId || activeCallId;
-  if (!id) {
-    cleanup();
-    return;
-  }
-  try {
-    await stopRecorderAndUpload(id);
-  } finally {
-    cleanup();
-  }
-};
-
-export const setWhatsappCallMuted = muted => {
-  if (!localStream) return false;
-  localStream.getAudioTracks().forEach(track => {
-    track.enabled = !muted;
-  });
-  return muted;
-};
-
-export const sendWhatsappTerminateBeacon = () => {
-  if (!activeCallId || intentionallyClosing) return;
-  beaconTerminate(activeCallId);
-};