Update ChannelItem.vue

fix: stabilize store review channel integration
Merge PR #14501 google play reviews channel
2026-05-22 14:02:47 +04:00 · 2026-05-22 14:37:54 +05:30 · 2026-05-22 14:26:14 +05:30 · 2026-05-22 14:21:27 +05:30 · 2026-05-22 12:29:06 +04:00 · 2026-05-22 12:09:40 +04:00
995 changed files with 6705 additions and 24172 deletions
@@ -98,8 +98,6 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
 MAILER_INBOUND_EMAIL_DOMAIN=
-# Maximum time in seconds to process a single IMAP email
-# EMAIL_PROCESSING_TIMEOUT_SECONDS=60
 # Set this to the appropriate ingress channel with regards to incoming emails
 # Possible values are :
 # relay for Exim, Postfix, Qmail
@@ -234,10 +232,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # Comma-separated list of trusted IPs that bypass Rack Attack throttling rules
 # RACK_ATTACK_ALLOWED_IPS=127.0.0.1,::1,192.168.0.10

-## SafeFetch private network access
-## Keep disabled by default. Self-hosted installations can enable this to allow SafeFetch requests to private network URLs.
-# SAFE_FETCH_ALLOW_PRIVATE_NETWORK=false
-
 ## Running chatwoot as an API only server
 ## setting this value to true will disable the frontend dashboard endpoints
 # CW_API_ONLY_SERVER=false
@@ -76,7 +76,7 @@ gem 'faraday_middleware-aws-sigv4'
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
-gem 'puma', '~> 7.2', '>= 7.2.1'
+gem 'puma'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
@@ -89,7 +89,7 @@ gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization
-gem 'jwt', '~> 2.10', '>= 2.10.3'
+gem 'jwt'
 gem 'pundit'

 # super admin
@@ -136,8 +136,6 @@ GEM
    audited (5.4.1)
      activerecord (>= 5.0, < 7.7)
      activesupport (>= 5.0, < 7.7)
-    auth-sanitizer (0.2.1)
-      version_gem (~> 1.1, >= 1.1.10)
    aws-actionmailbox-ses (0.1.0)
      actionmailbox (>= 7.1.0)
      aws-sdk-s3 (~> 1, >= 1.123.0)
@@ -170,7 +168,7 @@ GEM
    base64 (0.3.0)
    bcrypt (3.1.22)
    benchmark (0.4.1)
-    bigdecimal (3.3.1)
+    bigdecimal (3.2.2)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
@@ -186,7 +184,6 @@ GEM
      bundler (>= 1.2.0, < 3)
      thor (~> 1.0)
    byebug (11.1.3)
-    cgi (0.5.1)
    childprocess (5.1.0)
      logger (~> 1.5)
    cld3 (3.7.0)
@@ -304,7 +301,7 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.14.2)
+    faraday (2.14.1)
      faraday-net_http (>= 2.0, < 3.5)
      json
      logger
@@ -315,7 +312,7 @@ GEM
      hashie
    faraday-multipart (1.2.0)
      multipart-post (~> 2.0)
-    faraday-net_http (3.4.4)
+    faraday-net_http (3.4.2)
      net-http (~> 0.5)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
@@ -438,8 +435,7 @@ GEM
    hana (1.3.7)
    hash_diff (1.1.1)
    hashdiff (1.1.0)
-    hashie (5.1.0)
-      logger
+    hashie (5.0.0)
    html2text (0.4.0)
      nokogiri (>= 1.0, < 2.0)
    http (5.1.1)
@@ -474,7 +470,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.19.8)
+    json (2.19.5)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@@ -495,7 +491,7 @@ GEM
    judoscale-sidekiq (1.8.2)
      judoscale-ruby (= 1.8.2)
      sidekiq (>= 5.0)
-    jwt (2.10.3)
+    jwt (2.10.1)
      base64
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
@@ -572,7 +568,7 @@ GEM
      ruby2_keywords
    msgpack (1.8.0)
    multi_json (1.15.0)
-    multi_xml (0.9.1)
+    multi_xml (0.8.0)
      bigdecimal (>= 3.1, < 5)
    multipart-post (2.4.1)
    mutex_m (0.3.0)
@@ -597,7 +593,7 @@ GEM
      sidekiq
    newrelic_rpm (9.6.0)
      base64
-    nio4r (2.7.5)
+    nio4r (2.7.3)
    nokogiri (1.19.3)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
@@ -607,26 +603,19 @@ GEM
      racc (~> 1.4)
    nokogiri (1.19.3-x86_64-linux-gnu)
      racc (~> 1.4)
-    oauth (1.1.6)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      base64 (~> 0.1)
-      cgi
-      oauth-tty (~> 1.0, >= 1.0.8)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
-    oauth-tty (1.0.8)
-      auth-sanitizer (~> 0.1, >= 0.1.3)
-      cgi
-      version_gem (~> 1.1, >= 1.1.9)
-    oauth2 (2.0.22)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      faraday (>= 0.17.3, < 4.0)
-      jwt (>= 1.0, < 4.0)
-      logger (~> 1.2)
+    oauth (1.1.0)
+      oauth-tty (~> 1.0, >= 1.0.1)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
+    oauth-tty (1.0.5)
+      version_gem (~> 1.1, >= 1.1.1)
+    oauth2 (2.0.9)
+      faraday (>= 0.17.3, < 3.0)
+      jwt (>= 1.0, < 3.0)
      multi_xml (~> 0.5)
      rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
    oj (3.16.10)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
@@ -693,7 +682,7 @@ GEM
    pry-rails (0.3.9)
      pry (>= 0.10.4)
    public_suffix (7.0.5)
-    puma (7.2.1)
+    puma (6.4.3)
      nio4r (~> 2.0)
    pundit (2.3.0)
      activesupport (>= 3.0.0)
@@ -946,9 +935,9 @@ GEM
      gli
      hashie
      logger
-    snaky_hash (2.0.5)
-      hashie (>= 0.1.0, < 6)
-      version_gem (>= 1.1.8, < 3)
+    snaky_hash (2.0.1)
+      hashie
+      version_gem (~> 1.1, >= 1.1.1)
    sorbet-runtime (0.5.11934)
    spring (4.1.1)
    spring-watcher-listen (2.1.0)
@@ -1006,14 +995,12 @@ GEM
    valid_email2 (5.2.6)
      activemodel (>= 3.2)
      mail (~> 2.5)
-    version_gem (1.1.11)
-    vite_rails (3.10.0)
-      railties (>= 5.1, < 9)
+    version_gem (1.1.4)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
      vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.10.2)
+    vite_ruby (3.8.0)
      dry-cli (>= 0.7, < 2)
-      logger (~> 1.6)
-      mutex_m
      rack-proxy (~> 0.6, >= 0.6.1)
      zeitwerk (~> 2.2)
    warden (1.2.9)
@@ -1115,7 +1102,7 @@ DEPENDENCIES
  json_schemer
  judoscale-rails
  judoscale-sidekiq
-  jwt (~> 2.10, >= 2.10.3)
+  jwt
  kaminari
  koala
  letter_opener
@@ -1143,7 +1130,7 @@ DEPENDENCIES
  pgvector
  procore-sift
  pry-rails
-  puma (~> 7.2, >= 7.2.1)
+  puma
  pundit
  rack-attack (>= 6.7.0)
  rack-cors (= 2.0.0)
@@ -1 +1 @@
-4.14.2
+4.14.0
@@ -50,7 +50,7 @@ class ContactInboxWithContactBuilder

  def create_contact
    account.contacts.create!(
-      name: contact_name,
+      name: contact_attributes[:name] || ::Haikunator.haikunate(1000),
      phone_number: contact_attributes[:phone_number],
      email: contact_attributes[:email],
      identifier: contact_attributes[:identifier],
@@ -59,11 +59,6 @@ class ContactInboxWithContactBuilder
    )
  end

-  def contact_name
-    name = contact_attributes[:name] || ::Haikunator.haikunate(1000)
-    name.truncate(ApplicationRecord::MAX_STRING_COLUMN_LENGTH, omission: '')
-  end
-
  def find_contact
    contact = find_contact_by_identifier(contact_attributes[:identifier])
    contact ||= find_contact_by_email(contact_attributes[:email])
@@ -92,18 +92,10 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
  def fallback_params(attachment)
    {
      fallback_title: attachment['title'],
-      external_url: attachment['url'] || attachment.dig('payload', 'url')
+      external_url: attachment['url']
    }
  end

-  # Facebook shared posts point to page URLs, not downloadable media URLs.
-  # Keep this Facebook-only so Messenger/Instagram share attachments still use the parent media handling.
-  def normalize_file_type(type)
-    return :fallback if type.to_sym == :share
-
-    super
-  end
-
  def conversation_params
    {
      account_id: @inbox.account_id,
@@ -13,7 +13,6 @@ class Messages::MessageBuilder
    @account = conversation.account
    @message_type = params[:message_type] || 'outgoing'
    @attachments = params[:attachments]
-    @is_voice_message = ActiveModel::Type::Boolean.new.cast(params[:is_voice_message])
    @automation_rule = content_attributes&.dig(:automation_rule_id)
    return unless params.instance_of?(ActionController::Parameters)

@@ -57,25 +56,16 @@ class Messages::MessageBuilder
        file: uploaded_attachment
      )

-      attachment.file_type = attachment_file_type(uploaded_attachment)
-      tag_voice_message(attachment)
+      attachment.file_type = if uploaded_attachment.is_a?(String)
+                               file_type_by_signed_id(
+                                 uploaded_attachment
+                               )
+                             else
+                               file_type(uploaded_attachment&.content_type)
+                             end
    end
  end

-  def attachment_file_type(uploaded_attachment)
-    if uploaded_attachment.is_a?(String)
-      file_type_by_signed_id(uploaded_attachment)
-    else
-      file_type(uploaded_attachment&.content_type)
-    end
-  end
-
-  def tag_voice_message(attachment)
-    return unless @is_voice_message && attachment.file_type == 'audio'
-
-    attachment.meta = (attachment.meta || {}).merge('is_voice_message' => true)
-  end
-
  def process_emails
    return unless @conversation.inbox&.inbox_type == 'Email'

@@ -1,28 +1,9 @@
 class Api::BaseController < ApplicationController
  include AccessTokenAuthHelper
-  # POST-shaped endpoints that are semantically reads and should be reachable
-  # with a read-only token. Keep this list minimal; expand only when a clear
-  # read-with-complex-body use case appears.
-  READ_ONLY_POST_ALLOWLIST = %w[
-    api/v1/accounts/conversations#filter
-    api/v1/accounts/contacts#filter
-    api/v1/accounts/contact_inboxes#filter
-  ].freeze
-
-  # GET-shaped endpoints that mutate state and must be blocked for read-only
-  # tokens despite the verb being "safe". Add any new write-on-GET endpoint
-  # here when it ships.
-  READ_ONLY_BLOCKED_GET_ACTIONS = %w[
-    api/v1/accounts/callbacks#register_facebook_page
-    api/v1/accounts/portals#ssl_status
-    api/v1/accounts/conference#token
-  ].freeze
-
  respond_to :json
  before_action :authenticate_access_token!, if: :authenticate_by_access_token?
  before_action :validate_bot_access_token!, if: :authenticate_by_access_token?
  before_action :authenticate_user!, unless: :authenticate_by_access_token?
-  before_action :enforce_read_only_token_scope

  private

@@ -30,25 +11,6 @@ class Api::BaseController < ApplicationController
    request.headers[:api_access_token].present? || request.headers[:HTTP_API_ACCESS_TOKEN].present?
  end

-  def enforce_read_only_token_scope
-    return unless @access_token&.scope == 'read_only'
-    return if read_only_token_action_allowed?
-
-    render json: { error: 'This access token is read-only and cannot perform write operations.' },
-           status: :forbidden
-  end
-
-  def read_only_token_action_allowed?
-    action_key = "#{params[:controller]}##{params[:action]}"
-    return READ_ONLY_POST_ALLOWLIST.include?(action_key) unless safe_http_method?
-
-    READ_ONLY_BLOCKED_GET_ACTIONS.exclude?(action_key)
-  end
-
-  def safe_http_method?
-    request.get? || request.head? || request.options?
-  end
-
  def check_authorization(model = nil)
    model ||= controller_name.classify.constantize

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::BaseController
  before_action :portal
  before_action :check_authorization
-  before_action :set_articles, only: [:update_status, :update_category, :delete_articles]
+  before_action :set_articles, only: [:update_status, :delete_articles]

  def translate
    head :not_implemented
@@ -19,18 +19,6 @@ class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::Ba
    render_could_not_create_error(e.message)
  end

-  def update_category
-    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.category_not_found')) unless category_valid?
-
-    ActiveRecord::Base.transaction do
-      @articles.find_each { |article| article.update!(category_id: params[:category_id]) }
-    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?

@@ -51,9 +39,5 @@ class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::Ba
  def set_articles
    @articles = @portal.articles.where(id: params[:ids])
  end
-
-  def category_valid?
-    @portal.categories.exists?(id: params[:category_id])
-  end
 end
 Api::V1::Accounts::Articles::BulkActionsController.prepend_mod_with('Api::V1::Accounts::Articles::BulkActionsController')
@@ -1,10 +1,5 @@
 class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage::DirectUploadsController
  include EnsureCurrentAccountHelper
-  include AccessTokenAuthHelper
-  include RequestExceptionHandler
-  before_action :authenticate_access_token!
-  before_action :validate_bot_access_token!
-  before_action :prevent_read_only_access_token!
  before_action :current_account
  before_action :conversation

@@ -0,0 +1,34 @@
+class Api::V1::Accounts::GooglePlay::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+  include GooglePlayOauthConcern
+
+  def create
+    redirect_url = google_client.auth_code.authorize_url(
+      redirect_uri: google_play_callback_url,
+      scope: scope,
+      response_type: 'code',
+      prompt: 'consent', # forces Google to return a refresh token
+      access_type: 'offline',
+      state: google_play_oauth_state,
+      client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
+    )
+
+    if redirect_url
+      render json: { success: true, url: redirect_url }
+    else
+      render json: { success: false }, status: :unprocessable_entity
+    end
+  end
+
+  private
+
+  def google_play_oauth_state
+    google_play_verifier.generate(
+      {
+        account_id: Current.account.id,
+        app_id: params[:app_id],
+        inbox_name: params[:inbox_name]
+      },
+      expires_in: 15.minutes
+    )
+  end
+end
@@ -31,6 +31,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def create
+    return render_app_store_feature_disabled if app_store_channel_requested? && !Current.account.feature_enabled?(:channel_app_store)
+
    ActiveRecord::Base.transaction do
      channel = create_channel
      @inbox = Current.account.inboxes.build(
@@ -97,7 +99,15 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def allowed_channel_types
-    %w[web_widget api email line telegram whatsapp sms]
+    %w[web_widget api email line telegram whatsapp sms app_store google_play]
+  end
+
+  def app_store_channel_requested?
+    permitted_params.dig(:channel, :type) == 'app_store'
+  end
+
+  def render_app_store_feature_disabled
+    render json: { message: 'App Store Reviews channel is not enabled for this account' }, status: :forbidden
  end

  def update_inbox_working_hours
@@ -179,7 +189,9 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
      'line' => Channel::Line,
      'telegram' => Channel::Telegram,
      'whatsapp' => Channel::Whatsapp,
-      'sms' => Channel::Sms
+      'sms' => Channel::Sms,
+      'app_store' => Channel::AppStore,
+      'google_play' => Channel::GooglePlay
    }[permitted_params[:channel][:type]]
  end

@@ -11,7 +11,7 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
        enable_fb_login: '0',
        force_authentication: '1',
        response_type: 'code',
-        state: generate_instagram_token(Current.account.id, params[:return_to])
+        state: generate_instagram_token(Current.account.id)
      }
    )
    if redirect_url
@@ -6,7 +6,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
      {
        redirect_uri: "#{base_url}/microsoft/callback",
        scope: scope,
-        state: state
+        state: state,
+        prompt: 'consent'
      }
    )
    if redirect_url
@@ -8,15 +8,7 @@ class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseC
  end

  def state
-    # The sgid purpose doubles as a return hint: onboarding tags it so the callback
-    # can route the user back to inbox setup. The purpose is part of the signed
-    # payload (tamper-proof), and a non-onboarding request keeps the default
-    # purpose, leaving callers like Notion byte-identical.
-    Current.account.to_sgid(expires_in: 15.minutes, for: state_purpose).to_s
-  end
-
-  def state_purpose
-    params[:return_to] == 'onboarding' ? 'onboarding' : 'default'
+    Current.account.to_sgid(expires_in: 15.minutes).to_s
  end

  def base_url
@@ -1,51 +0,0 @@
-class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-
-  def update
-    @account = Current.account
-    finalize = finalizing_account_details?
-
-    @account.assign_attributes(account_params)
-    @account.custom_attributes.merge!(custom_attributes_params)
-    @account.custom_attributes.delete('onboarding_step') if finalize
-    @account.save!
-
-    # TODO: re-enable when the help center generation UI is ready to surface progress
-    # Onboarding::HelpCenterCreationService.new(@account, Current.user).perform if finalize && website.present?
-
-    render 'api/v1/accounts/update', format: :json
-  end
-
-  def help_center_generation
-    render json: help_center_generation_status
-  end
-
-  private
-
-  def finalizing_account_details?
-    @account.custom_attributes['onboarding_step'] == 'account_details'
-  end
-
-  def website
-    custom_attributes_params[:website]
-  end
-
-  def account_params
-    params.permit(:name, :locale)
-  end
-
-  def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role, :website)
-  end
-
-  def help_center_generation_status
-    {
-      generation_id: nil,
-      state: nil,
-      articles_count: 0,
-      categories_count: 0
-    }
-  end
-end
-
-Api::V1::Accounts::OnboardingsController.prepend_mod_with('Api::V1::Accounts::OnboardingsController')
@@ -80,15 +80,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
      :id, :color, :custom_domain, :header_text, :homepage_link,
      :name, :page_title, :slug, :archived,
      { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
-                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
    )
  end

-  def locale_translation_keys
-    params.dig(:portal, :config, :locale_translations)&.keys || []
-  end
-
  def live_chat_widget_params
    permitted_params = params.permit(:inbox_id)
    return {} unless permitted_params.key?(:inbox_id)
@@ -3,7 +3,7 @@ class Api::V1::Accounts::Tiktok::AuthorizationsController < Api::V1::Accounts::O

  def create
    redirect_url = Tiktok::AuthClient.authorize_url(
-      state: generate_tiktok_token(Current.account.id, params[:return_to])
+      state: generate_tiktok_token(Current.account.id)
    )

    if redirect_url
@@ -58,6 +58,7 @@ 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
@@ -39,14 +39,7 @@ class Api::V1::ProfilesController < Api::BaseController
  end

  def reset_access_token
-    token = AccessToken.create_or_find_by!(owner: @user, scope: 'full')
-    token.regenerate_token
-    @user.reload
-  end
-
-  def reset_read_only_access_token
-    token = AccessToken.create_or_find_by!(owner: @user, scope: 'read_only')
-    token.regenerate_token
+    @user.access_token.regenerate_token
    @user.reload
  end

@@ -1,9 +1,8 @@
 module AccessTokenAuthHelper
  BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[show toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
    'api/v1/accounts/conversations/messages' => ['create'],
-    'api/v1/accounts/conversations/assignments' => ['create'],
-    'api/v1/accounts/conversations/labels' => %w[index create]
+    'api/v1/accounts/conversations/assignments' => ['create']
  }.freeze

  def ensure_access_token
@@ -37,15 +36,4 @@ module AccessTokenAuthHelper
  def agent_bot_accessible?
    BOT_ACCESSIBLE_ENDPOINTS.fetch(params[:controller], []).include?(params[:action])
  end
-
-  # Blocks read-only access tokens from reaching write endpoints that live outside
-  # Api::BaseController (e.g. controllers inheriting from ActiveStorage). Resolves
-  # the token directly since these controllers skip the Api::BaseController chain.
-  def prevent_read_only_access_token!
-    ensure_access_token
-    return unless @access_token&.scope == 'read_only'
-
-    render json: { error: 'This access token is read-only and cannot perform write operations.' },
-           status: :forbidden
-  end
 end
@@ -0,0 +1,26 @@
+module GooglePlayOauthConcern
+  extend ActiveSupport::Concern
+  include GoogleConcern
+
+  GOOGLE_PLAY_SCOPE = 'https://www.googleapis.com/auth/androidpublisher'.freeze
+
+  private
+
+  # Overrides the Gmail scope from GoogleConcern with the Play Developer API scope
+  def scope
+    GOOGLE_PLAY_SCOPE
+  end
+
+  # Carries the account and channel details through the OAuth round trip
+  def google_play_verifier
+    Rails.application.message_verifier('google_play_oauth')
+  end
+
+  def google_play_callback_url
+    "#{base_url}/google_play/callback"
+  end
+
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  end
+end
@@ -0,0 +1,58 @@
+class GooglePlay::CallbacksController < ApplicationController
+  include GooglePlayOauthConcern
+
+  def show
+    return redirect_with_error(params[:error]) if params[:error].present?
+
+    account
+    token = google_client.auth_code.get_token(params[:code], redirect_uri: google_play_callback_url)
+    inbox = create_channel_with_inbox(token)
+
+    redirect_to app_google_play_inbox_agents_url(account_id: account.id, inbox_id: inbox.id)
+  rescue StandardError => e
+    ChatwootExceptionTracker.new(e).capture_exception
+    redirect_with_error(e.message)
+  end
+
+  private
+
+  # Sends the user back to the inbox setup form with the error surfaced as a query param.
+  # Falls back to '/' only when we can't determine the account (e.g. tampered/missing state).
+  def redirect_with_error(error_message)
+    acc = safe_account
+    return redirect_to '/' unless acc
+
+    redirect_to app_new_google_play_inbox_url(account_id: acc.id, error: error_message.to_s.truncate(300))
+  end
+
+  def safe_account
+    Account.find_by(id: state_payload[:account_id])
+  rescue StandardError
+    nil
+  end
+
+  def state_payload
+    @state_payload ||= google_play_verifier.verify(params[:state]).with_indifferent_access
+  end
+
+  def account
+    @account ||= Account.find(state_payload[:account_id])
+  end
+
+  def create_channel_with_inbox(token)
+    ActiveRecord::Base.transaction do
+      channel = Channel::GooglePlay.create!(
+        account: account,
+        app_id: state_payload[:app_id],
+        provider_config: {
+          access_token: token.token,
+          refresh_token: token.refresh_token,
+          expires_on: (Time.current.utc + 1.hour).to_s
+        }
+      )
+      # Return the newly created inbox directly — `channel.inbox` is unreliable here because the polymorphic
+      # has_one cache is not always populated by `account.inboxes.create!`.
+      account.inboxes.create!(account: account, channel: channel, name: state_payload[:inbox_name])
+    end
+  end
+end
@@ -28,8 +28,6 @@ class Instagram::CallbacksController < ApplicationController
    @long_lived_token_response = exchange_for_long_lived_token(@response.token)
    inbox, already_exists = find_or_create_inbox

-    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
-
    if already_exists
      redirect_to app_instagram_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
    else
@@ -151,10 +149,6 @@ class Instagram::CallbacksController < ApplicationController
    verify_instagram_token(params[:state])
  end

-  def return_to
-    instagram_token_return_to(params[:state])
-  end
-
  def oauth_code
    params[:code]
  end
@@ -14,11 +14,4 @@ class Microsoft::CallbacksController < OauthCallbackController
  def imap_address
    'outlook.office365.com'
  end
-
-  # Exchange Online's SMTP AUTH (XOAUTH2) rejects proxy addresses in the SASL `user=` field;
-  # it must match the token's UPN. `preferred_username` is the documented v2.0 claim;
-  # `upn` is the v1.0 fallback.
-  def imap_login_identity
-    users_data['preferred_username'] || users_data['upn'] || super
-  end
 end
@@ -16,8 +16,6 @@ class OauthCallbackController < ApplicationController
  def handle_response
    inbox, already_exists = find_or_create_inbox

-    return redirect_to app_onboarding_inbox_setup_url(account_id: account.id) if return_to == 'onboarding'
-
    if already_exists
      redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
    else
@@ -46,7 +44,7 @@ class OauthCallbackController < ApplicationController

  def update_channel(channel_email)
    channel_email.update!({
-                            imap_login: imap_login_identity, imap_address: imap_address,
+                            imap_login: users_data['email'], imap_address: imap_address,
                            imap_port: '993', imap_enabled: true,
                            provider: provider_name,
                            provider_config: {
@@ -57,13 +55,6 @@ class OauthCallbackController < ApplicationController
                          })
  end

-  # Identity used as the IMAP/SMTP login (SASL XOAUTH2 `user=` field). Defaults to the
-  # id_token's email claim; providers override when their server requires a different
-  # claim (e.g. Microsoft SMTP requires UPN).
-  def imap_login_identity
-    users_data['email']
-  end
-
  def provider_name
    raise NotImplementedError
  end
@@ -90,19 +81,10 @@ class OauthCallbackController < ApplicationController
    decoded_token[0]
  end

-  # The sgid purpose carries the onboarding return hint (see
-  # OauthAuthorizationController#state). Try the onboarding purpose first — a match
-  # both resolves the account and records the return target — then fall back to the
-  # default purpose used by every other caller.
  def account_from_signed_id
    raise ActionController::BadRequest, 'Missing state variable' if params[:state].blank?

-    if (account = GlobalID::Locator.locate_signed(params[:state], for: 'onboarding'))
-      @return_to = 'onboarding'
-    else
-      account = GlobalID::Locator.locate_signed(params[:state])
-    end
-
+    account = GlobalID::Locator.locate_signed(params[:state])
    raise 'Invalid or expired state' if account.nil?

    account
@@ -112,11 +94,6 @@ class OauthCallbackController < ApplicationController
    @account ||= account_from_signed_id
  end

-  def return_to
-    account # resolving the sgid records which purpose matched
-    @return_to
-  end
-
  # Fallback name, for when name field is missing from users_data
  def fallback_name
    users_data['email'].split('@').first.parameterize.titleize
@@ -1,31 +0,0 @@
-class Public::Api::V1::Portals::SearchController < Public::Api::V1::Portals::BaseController
-  before_action :ensure_custom_domain_request, only: [:index]
-  before_action :portal
-  before_action :set_portal_layout
-  before_action :set_view_variant
-  before_action :ensure_portal_feature_enabled
-  layout 'portal'
-
-  def index
-    @query = params[:query].to_s.strip
-    @articles = @portal.articles.published.includes(:category).where(locale: params[:locale])
-
-    search_articles
-
-    @articles = @articles.page(params[:page]).per(10)
-  end
-
-  private
-
-  def search_articles
-    @articles = @query.present? ? @articles.search(search_params) : @articles.none
-  end
-
-  def search_params
-    params.permit(:query, :locale, :sort, :status, :page).tap do |permitted|
-      permitted[:query] = @query
-    end
-  end
-end
-
-Public::Api::V1::Portals::SearchController.prepend_mod_with('Public::Api::V1::Portals::SearchController')
@@ -9,7 +9,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
  layout 'portal'

  def show
-    @og_image_url = helpers.set_og_image_url('', @portal.localized_value('header_text', @locale))
+    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
  end

  def sitemap
@@ -20,8 +20,6 @@ class Tiktok::CallbacksController < ApplicationController
  def process_successful_authorization
    inbox, already_exists = find_or_create_inbox

-    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
-
    if already_exists
      redirect_to app_tiktok_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
    else
@@ -129,10 +127,6 @@ class Tiktok::CallbacksController < ApplicationController
    @account_id ||= verify_tiktok_token(params[:state])
  end

-  def return_to
-    tiktok_token_return_to(params[:state])
-  end
-
  def account
    @account ||= Account.find(account_id)
  end
@@ -12,7 +12,7 @@ class ContactDrop < BaseDrop
  end

  def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize)
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
  end

  def last_name
@@ -12,7 +12,7 @@ class UserDrop < BaseDrop
  end

  def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize)
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
  end

  def last_name
@@ -40,7 +40,7 @@ class ConversationFinder
  def perform
    set_up

-    mine_count, unassigned_count, all_count = set_count_for_all_conversations
+    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
    assigned_count = all_count - unassigned_count

    filter_by_assignee_type
@@ -184,17 +184,6 @@ class ConversationFinder
  end

  def set_count_for_all_conversations
-    return legacy_count_for_all_conversations if @conversations.limit_value || @conversations.offset_value || @conversations.eager_loading?
-
-    counts = @conversations.unscope(:order).pick(
-      Arel.sql("COUNT(*) FILTER (WHERE assignee_id = #{current_user.id})"),
-      Arel.sql('COUNT(*) FILTER (WHERE assignee_id IS NULL)'),
-      Arel.sql('COUNT(*)')
-    )
-    counts || [0, 0, 0]
-  end
-
-  def legacy_count_for_all_conversations
    [
      @conversations.assigned_to(current_user).count,
      @conversations.unassigned.count,
@@ -111,7 +111,9 @@ module Api::V1::InboxesHelper
      'line' => Current.account.line_channels,
      'telegram' => Current.account.telegram_channels,
      'whatsapp' => Current.account.whatsapp_channels,
-      'sms' => Current.account.sms_channels
+      'sms' => Current.account.sms_channels,
+      'app_store' => Current.account.app_store_channels,
+      'google_play' => Current.account.google_play_channels
    }[permitted_params[:channel][:type]]
  end

@@ -4,21 +4,21 @@ module Instagram::IntegrationHelper
  # Generates a signed JWT token for Instagram integration
  #
  # @param account_id [Integer] The account ID to encode in the token
-  # @param return_to [String, nil] Optional onboarding return hint
  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_instagram_token(account_id, return_to = nil)
+  def generate_instagram_token(account_id)
    return if client_secret.blank?

-    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
  rescue StandardError => e
    Rails.logger.error("Failed to generate Instagram token: #{e.message}")
    nil
  end

-  def token_payload(account_id, return_to = nil)
-    payload = { sub: account_id, iat: Time.current.to_i }
-    payload[:return_to] = return_to if return_to.present?
-    payload
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
  end

  # Verifies and decodes a Instagram JWT token
@@ -28,14 +28,7 @@ module Instagram::IntegrationHelper
  def verify_instagram_token(token)
    return if token.blank? || client_secret.blank?

-    decode_token(token, client_secret)&.dig('sub')
-  end
-
-  # Reads the onboarding return hint from a Instagram JWT token, if present.
-  def instagram_token_return_to(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)&.dig('return_to')
+    decode_token(token, client_secret)
  end

  private
@@ -48,7 +41,7 @@ module Instagram::IntegrationHelper
    JWT.decode(token, secret, true, {
                 algorithm: 'HS256',
                 verify_expiration: true
-               }).first
+               }).first['sub']
  rescue StandardError => e
    Rails.logger.error("Unexpected error verifying Instagram token: #{e.message}")
    nil
@@ -45,16 +45,9 @@ module PortalHelper
    theme.present? && theme != 'system' ? "?theme=#{theme}" : ''
  end

-  def portal_query_string(theme, is_plain_layout_enabled)
-    query_params = {}
-    query_params[:theme] = theme if theme.present? && theme != 'system'
-    query_params[:show_plain_layout] = true if is_plain_layout_enabled
-    query_params.present? ? "?#{query_params.to_query}" : ''
-  end
-
  def generate_home_link(portal_slug, portal_locale, theme, is_plain_layout_enabled)
    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{portal_locale}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/#{portal_locale}#{theme_query_string(theme)}"
    else
      "/hc/#{portal_slug}/#{portal_locale}"
    end
@@ -68,7 +61,7 @@ module PortalHelper
    is_plain_layout_enabled = params[:is_plain_layout_enabled]

    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{theme_query_string(theme)}"
    else
      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
    end
@@ -76,7 +69,7 @@ module PortalHelper

  def generate_article_link(portal_slug, article_slug, theme, is_plain_layout_enabled)
    if is_plain_layout_enabled
-      "/hc/#{portal_slug}/articles/#{article_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/articles/#{article_slug}#{theme_query_string(theme)}"
    else
      "/hc/#{portal_slug}/articles/#{article_slug}"
    end
@@ -34,12 +34,6 @@ disable_branding:
  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
  icon: 'icon-sailbot-fill'
  enterprise: true
-voice_calls:
-  name: 'Voice Calls'
-  description: 'Enable voice calling capabilities for your agents and customers.'
-  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
-  icon: 'icon-voice-line'
-  enterprise: true

 # ------- Product Features ------- #
 help_center:
@@ -2,12 +2,11 @@ module Tiktok::IntegrationHelper
  # Generates a signed JWT token for Tiktok integration
  #
  # @param account_id [Integer] The account ID to encode in the token
-  # @param return_to [String, nil] Optional onboarding return hint
  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_tiktok_token(account_id, return_to = nil)
+  def generate_tiktok_token(account_id)
    return if client_secret.blank?

-    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
  rescue StandardError => e
    Rails.logger.error("Failed to generate TikTok token: #{e.message}")
    nil
@@ -20,14 +19,7 @@ module Tiktok::IntegrationHelper
  def verify_tiktok_token(token)
    return if token.blank? || client_secret.blank?

-    decode_token(token, client_secret)&.dig('sub')
-  end
-
-  # Reads the onboarding return hint from a Tiktok JWT token, if present.
-  def tiktok_token_return_to(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)&.dig('return_to')
+    decode_token(token, client_secret)
  end

  private
@@ -36,17 +28,18 @@ module Tiktok::IntegrationHelper
    @client_secret ||= GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
  end

-  def token_payload(account_id, return_to = nil)
-    payload = { sub: account_id, iat: Time.current.to_i }
-    payload[:return_to] = return_to if return_to.present?
-    payload
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
  end

  def decode_token(token, secret)
    JWT.decode(token, secret, true, {
                 algorithm: 'HS256',
                 verify_expiration: true
-               }).first
+               }).first['sub']
  rescue StandardError => e
    Rails.logger.error("Unexpected error verifying Tiktok token: #{e.message}")
    nil
@@ -106,8 +106,4 @@ export default {
    const urlData = endPoints('resetAccessToken');
    return axios.post(urlData.url);
  },
-  resetReadOnlyAccessToken() {
-    const urlData = endPoints('resetReadOnlyAccessToken');
-    return axios.post(urlData.url);
-  },
 };
@@ -0,0 +1,14 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class GooglePlayClient extends ApiClient {
+  constructor() {
+    super('google_play', { accountScoped: true });
+  }
+
+  generateAuthorization(payload) {
+    return axios.post(`${this.url}/authorization`, payload);
+  }
+}
+
+export default new GooglePlayClient();
@@ -48,12 +48,6 @@ class TwilioVoiceClient extends EventTarget {
    return !!this.activeConnection;
  }

-  setMuted(shouldMute) {
-    if (!this.activeConnection) return false;
-    this.activeConnection.mute(shouldMute);
-    return shouldMute;
-  }
-
  endClientCall() {
    if (this.activeConnection) {
      this.activeConnection.disconnect();
@@ -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();
@@ -35,9 +35,8 @@ class ContactAPI extends ApiClient {
    return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
  }

-  getConversations(contactId, { inboxId } = {}) {
-    const params = inboxId ? { inbox_id: inboxId } : {};
-    return axios.get(`${this.url}/${contactId}/conversations`, { params });
+  getConversations(contactId) {
+    return axios.get(`${this.url}/${contactId}/conversations`);
  }

  getContactableInboxes(contactId) {
@@ -48,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,
    });
  }

@@ -55,10 +55,6 @@ const endPoints = {
  resetAccessToken: {
    url: '/api/v1/profile/reset_access_token',
  },
-
-  resetReadOnlyAccessToken: {
-    url: '/api/v1/profile/reset_read_only_access_token',
-  },
 };

 export default page => {
@@ -87,13 +87,6 @@ class ArticlesAPI extends PortalsAPI {
    );
  }

-  bulkUpdateCategory({ portalSlug, articleIds, categoryId }) {
-    return axios.patch(
-      `${this.url}/${portalSlug}/articles/bulk_actions/update_category`,
-      { ids: articleIds, category_id: categoryId }
-    );
-  }
-
  bulkDelete({ portalSlug, articleIds }) {
    return axios.delete(
      `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,
@@ -12,7 +12,6 @@ export const buildCreatePayload = ({
  bccEmails = '',
  toEmails = '',
  templateParams,
-  isVoiceMessage = false,
 }) => {
  let payload;
  if (files && files.length !== 0) {
@@ -34,9 +33,6 @@ export const buildCreatePayload = ({
    if (contentAttributes) {
      payload.append('content_attributes', JSON.stringify(contentAttributes));
    }
-    if (isVoiceMessage) {
-      payload.append('is_voice_message', true);
-    }
  } else {
    payload = {
      content: message,
@@ -68,7 +64,6 @@ class MessageApi extends ApiClient {
    bccEmails = '',
    toEmails = '',
    templateParams,
-    isVoiceMessage = false,
  }) {
    return axios({
      method: 'post',
@@ -83,7 +78,6 @@ class MessageApi extends ApiClient {
        bccEmails,
        toEmails,
        templateParams,
-        isVoiceMessage,
      }),
    });
  }
@@ -52,20 +52,6 @@ class Inboxes extends CacheEnabledApiClient {
  resetSecret(inboxId) {
    return axios.post(`${this.url}/${inboxId}/reset_secret`);
  }
-
-  enableWhatsappCalling(inboxId) {
-    return axios.post(`${this.url}/${inboxId}/enable_whatsapp_calling`);
-  }
-
-  disableWhatsappCalling(inboxId) {
-    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
-  }
-
-  setInboundCalls(inboxId, enabled) {
-    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
-      inbound_calls_enabled: enabled,
-    });
-  }
 }

 export default new Inboxes();
@@ -1,18 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class OnboardingAPI extends ApiClient {
-  constructor() {
-    super('onboarding', { accountScoped: true });
-  }
-
-  update(data) {
-    return axios.patch(this.url, data);
-  }
-
-  getHelpCenterGeneration() {
-    return axios.get(`${this.url}/help_center_generation`);
-  }
-}
-
-export default new OnboardingAPI();
@@ -153,33 +153,4 @@ describe('#PortalAPI', () => {
      );
    });
  });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#bulkUpdateCategory', () => {
-      articlesAPI.bulkUpdateCategory({
-        portalSlug: 'room-rental',
-        articleIds: [1, 2, 3],
-        categoryId: 7,
-      });
-      expect(axiosMock.patch).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles/bulk_actions/update_category',
-        { ids: [1, 2, 3], category_id: 7 }
-      );
-    });
-  });
 });
@@ -41,8 +41,7 @@ describe('#ContactsAPI', () => {
    it('#getConversations', () => {
      contactAPI.getConversations(1);
      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/contacts/1/conversations',
-        { params: {} }
+        '/api/v1/contacts/1/conversations'
      );
    });

@@ -83,29 +83,5 @@ describe('#ConversationAPI', () => {
        template_params: undefined,
      });
    });
-
-    it('appends is_voice_message when isVoiceMessage is true', () => {
-      const formPayload = buildCreatePayload({
-        message: 'voice message',
-        echoId: 42,
-        isPrivate: false,
-        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
-        isVoiceMessage: true,
-      });
-      expect(formPayload).toBeInstanceOf(FormData);
-      expect(formPayload.get('is_voice_message')).toEqual('true');
-    });
-
-    it('does not append is_voice_message when isVoiceMessage is false', () => {
-      const formPayload = buildCreatePayload({
-        message: 'regular audio',
-        echoId: 43,
-        isPrivate: false,
-        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
-        isVoiceMessage: false,
-      });
-      expect(formPayload).toBeInstanceOf(FormData);
-      expect(formPayload.get('is_voice_message')).toBeNull();
-    });
  });
 });
@@ -49,7 +49,6 @@ const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();

 const STATUS_COMPLETED = 'completed';
-const STATUS_PROCESSING = 'processing';

 const { formatMessage } = useMessageFormatter();

@@ -69,15 +68,9 @@ const campaignStatus = computed(() => {
      : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
  }

-  if (props.status === STATUS_COMPLETED) {
-    return t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED');
-  }
-
-  if (props.status === STATUS_PROCESSING) {
-    return t('CAMPAIGN.SMS.CARD.STATUS.PROCESSING');
-  }
-
-  return t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+  return props.status === STATUS_COMPLETED
+    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
+    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });

 const inboxName = computed(() => props.inbox?.name || '');
@@ -46,8 +46,9 @@ const formattedLastActivityAt = computed(() => {
        :src="avatarSource"
        class="shrink-0"
        :name="name"
-        :size="42"
+        :size="48"
        hide-offline-status
+        rounded-full
      />
      <div class="flex flex-col gap-0.5 flex-1 min-w-0">
        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">
@@ -141,6 +141,7 @@ const handleUpdateCompany = async () => {
        :src="avatarSource"
        :size="72"
        :allow-upload="!isAvatarBusy"
+        rounded-full
        hide-offline-status
        @upload="handleAvatarUpload"
        @delete="handleAvatarDelete"
@@ -124,9 +124,10 @@ const handleAvatarHover = isHovered => {
          <Avatar
            :name="name"
            :src="thumbnail"
-            :size="42"
+            :size="48"
            :status="availabilityStatus"
            hide-offline-status
+            rounded-full
          >
            <template v-if="selectable" #overlay="{ size }">
              <label
@@ -1,48 +1,34 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';

 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import { usePolicy } from 'dashboard/composables/usePolicy';

 const emit = defineEmits(['add', 'import', 'export']);

 const { t } = useI18n();
-const { checkPermissions } = usePolicy();

-const contactMenuItems = computed(() => [
+const contactMenuItems = [
  {
    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
    action: 'add',
    value: 'add',
    icon: 'i-lucide-plus',
  },
-  ...(checkPermissions(['administrator', 'contact_manage'])
-    ? [
-        {
-          label: t(
-            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'
-          ),
-          action: 'export',
-          value: 'export',
-          icon: 'i-lucide-upload',
-        },
-      ]
-    : []),
-  ...(checkPermissions(['administrator', 'contact_manage'])
-    ? [
-        {
-          label: t(
-            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'
-          ),
-          action: 'import',
-          value: 'import',
-          icon: 'i-lucide-download',
-        },
-      ]
-    : []),
-]);
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
 const showActionsDropdown = ref(false);

 const handleContactAction = ({ action }) => {
@@ -3,20 +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 {
-  VOICE_CALL_DIRECTION,
-  VOICE_CALL_OUTBOUND_INIT_STATUS,
-} from 'dashboard/components-next/message/constants';
+import { isVoiceCallEnabled } 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';
@@ -24,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,7 +30,6 @@ const { t } = useI18n();

 const dialogRef = ref(null);

-const callsStore = useCallsStore();
 const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');

@@ -52,22 +38,13 @@ const voiceInboxes = computed(() =>
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);

+// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);

 const isInitiatingCall = computed(() => {
  return contactsUiFlags.value?.isInitiatingCall || false;
 });

-// Mirror the conversation-header button: block a new call whenever any provider
-// call is already active or ringing, otherwise starting a WhatsApp call here
-// would leave a still-live Twilio (or other) session with no visible control.
-const isCallButtonDisabled = computed(
-  () =>
-    callsStore.hasActiveCall ||
-    callsStore.hasIncomingCall ||
-    isInitiatingCall.value
-);
-
 const navigateToConversation = conversationId => {
  const accountId = route.params.accountId;
  if (conversationId && accountId) {
@@ -81,96 +58,23 @@ 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).
-// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
-// contacts whose latest WhatsApp conversation falls outside the 20 most recent
-// across all inboxes would be treated as having no conversation.
-const findWhatsappConversationId = async inboxId => {
-  const { data } = await ContactAPI.getConversations(props.contactId, {
-    inboxId,
-  });
-  const conversations = data?.payload || [];
-  const match = [...conversations].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);
-  // The composable returns { status: 'locked' } when an init is already in
-  // flight or a call is already active; treat that as a soft no-op rather than
-  // claiming success.
-  if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
-  if (!response?.id) {
-    // Permission template path returns no call id. Mirror the header button and
-    // surface whether the request was just sent or is already pending instead of
-    // claiming the call started. The permission message lands in the
-    // conversation, so still navigate there.
-    const messageKey =
-      response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
-        ? 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_PENDING'
-        : 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_REQUESTED';
-    useAlert(t(messageKey));
-    navigateToConversation(conversationId);
-    return;
-  }
-
-  // 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: VOICE_CALL_DIRECTION.OUTBOUND,
-    provider: VOICE_CALL_PROVIDERS.WHATSAPP,
-  });
-
-  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
-  navigateToConversation(conversationId);
-};
-
-const startCall = async (inboxId, conversationIdHint = null) => {
-  if (isCallButtonDisabled.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;
-  }
+const startCall = async inboxId => {
+  if (isInitiatingCall.value) 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,
      conversationId,
      inboxId,
-      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+      callDirection: 'outbound',
    });

    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
@@ -182,22 +86,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;
@@ -218,7 +106,7 @@ const onPickInbox = async inbox => {
      v-if="shouldRender"
      v-tooltip.top-end="tooltipLabel || null"
      v-bind="attrs"
-      :disabled="isCallButtonDisabled"
+      :disabled="isInitiatingCall"
      :is-loading="isInitiatingCall"
      :label="label"
      :icon="icon"
@@ -53,9 +53,6 @@ const localeMenuLabels = computed(() => ({
  'publish-locale': t(
    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
  ),
-  'customize-content': t(
-    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
-  ),
  delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));

@@ -131,7 +128,7 @@ const handleAction = ({ action, value }) => {
          <DropdownMenu
            v-if="showDropdownMenu"
            :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
            @action="handleAction"
          />
        </div>
@@ -2,7 +2,6 @@
 import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
@@ -19,7 +18,6 @@ import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/A
 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 DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import BulkTranslateDialog from './BulkTranslateDialog.vue';

 const props = defineProps({
@@ -64,7 +62,6 @@ const isFeatureEnabledonAccount = useMapGetter(

 const selectedArticleIds = ref(new Set());
 const deleteConfirmDialogRef = ref(null);
-const isCategoryMenuOpen = ref(false);

 const { isEnterprise } = useConfig();

@@ -224,34 +221,6 @@ const bulkUpdateStatus = async status => {
  }
 };

-const categoryMenuItems = computed(() =>
-  props.categories.map(category => ({
-    label: category.name,
-    value: category.id,
-    action: 'move',
-    emoji: category.icon,
-  }))
-);
-
-const handleBulkUpdateCategory = async ({ value }) => {
-  isCategoryMenuOpen.value = false;
-  try {
-    await articlesAPI.bulkUpdateCategory({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      categoryId: value,
-    });
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_SUCCESS')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_ERROR')
-    );
-  }
-};
-
 const confirmBulkDelete = () => {
  deleteConfirmDialogRef.value?.open();
 };
@@ -371,30 +340,6 @@ watch(
                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
                  @click="bulkUpdateStatus('archived')"
                />
-                <div v-if="categoryMenuItems.length" class="relative group">
-                  <OnClickOutside @trigger="isCategoryMenuOpen = false">
-                    <Button
-                      sm
-                      faded
-                      slate
-                      icon="i-lucide-folder-input"
-                      :label="
-                        t(
-                          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.MOVE_TO_CATEGORY'
-                        )
-                      "
-                      class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                      @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-                    />
-                    <DropdownMenu
-                      v-if="isCategoryMenuOpen"
-                      :menu-items="categoryMenuItems"
-                      show-search
-                      class="right-0 w-48 mt-2 top-full max-h-60"
-                      @action="handleBulkUpdateCategory"
-                    />
-                  </OnClickOutside>
-                </div>
                <Button
                  v-if="isTranslationAvailable"
                  sm
@@ -202,7 +202,7 @@ defineExpose({ state, isSubmitDisabled });
                size="sm"
                type="button"
                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.38rem] !w-[2.375rem] absolute top-[2rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                @click="isEmojiPickerOpen = !isEmojiPickerOpen"
              />
              <EmojiInput
@@ -1,98 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const activeLocale = ref('');
-const name = ref('');
-const pageTitle = ref('');
-const headerText = ref('');
-
-const localeTranslations = computed(
-  () => props.portal?.config?.locale_translations || {}
-);
-
-const openForLocale = localeCode => {
-  const existing = localeTranslations.value[localeCode] || {};
-  activeLocale.value = localeCode;
-  name.value = existing.name || '';
-  pageTitle.value = existing.page_title || '';
-  headerText.value = existing.header_text || '';
-  dialogRef.value?.open();
-};
-
-const onConfirm = async () => {
-  const translations = { ...localeTranslations.value };
-  const fields = {};
-  if (name.value.trim()) fields.name = name.value.trim();
-  if (pageTitle.value.trim()) fields.page_title = pageTitle.value.trim();
-  if (headerText.value.trim()) fields.header_text = headerText.value.trim();
-
-  if (Object.keys(fields).length) {
-    translations[activeLocale.value] = fields;
-  } else {
-    delete translations[activeLocale.value];
-  }
-
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: { locale_translations: translations },
-    });
-    dialogRef.value?.close();
-    useAlert(t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-defineExpose({ openForLocale });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.TITLE')"
-    :description="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.DESCRIPTION')"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.NAME.LABEL') }}
-        </label>
-        <Input v-model="name" :placeholder="portal.name" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.PAGE_TITLE.LABEL') }}
-        </label>
-        <Input v-model="pageTitle" :placeholder="portal.page_title" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.HEADER_TEXT.LABEL') }}
-        </label>
-        <Input v-model="headerText" :placeholder="portal.header_text" />
-      </div>
-    </div>
-  </Dialog>
-</template>
@@ -1,7 +1,5 @@
 <script setup>
-import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
-import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -25,8 +23,6 @@ const { t } = useI18n();
 const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();

-const contentDialogRef = ref(null);
-
 const isLocaleDefault = code => {
  return props.portal?.meta?.default_locale === code;
 };
@@ -152,8 +148,6 @@ const handleAction = ({ action }, localeCode) => {
    moveLocaleToDraft({ localeCode: localeCode });
  } else if (action === 'publish-locale') {
    publishLocale({ localeCode: localeCode });
-  } else if (action === 'customize-content') {
-    contentDialogRef.value.openForLocale(localeCode);
  } else if (action === 'delete') {
    deletePortalLocale({ localeCode: localeCode });
  }
@@ -173,6 +167,5 @@ const handleAction = ({ action }, localeCode) => {
      :category-count="locale.categoriesCount || 0"
      @action="handleAction($event, locale.code)"
    />
-    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
  </ul>
 </template>
@@ -182,10 +182,7 @@ const MIN_SEARCH_LENGTH = 2;
 export const createContactSearcher = () => {
  let controller = null;

-  return async (
-    query,
-    { skipMinLength = false, reachableOnly = true } = {}
-  ) => {
+  return async (query, { skipMinLength = false } = {}) => {
    const trimmed = typeof query === 'string' ? query.trim() : '';

    controller?.abort();
@@ -202,8 +199,6 @@ export const createContactSearcher = () => {
      } = await ContactAPI.search(trimmed, 1, 'name', '', { signal });

      const camelCasedPayload = camelcaseKeys(payload, { deep: true });
-      if (!reachableOnly) return camelCasedPayload || [];
-
      // Filter contacts that have either phone_number or email
      const filteredPayload = camelCasedPayload?.filter(
        contact => contact.phoneNumber || contact.email
@@ -32,11 +32,7 @@ const modelValue = defineModel({ type: Boolean, default: false });
        <span class="text-heading-3 text-n-slate-12">
          {{ header }}
        </span>
-        <template v-if="hideToggle">
-          <slot name="hiddenToggle">
-            <div class="size-2" />
-          </slot>
-        </template>
+        <div v-if="hideToggle" class="size-2" />
        <ToggleSwitch v-else v-model="modelValue" />
      </div>
      <span v-if="description" class="text-body-main text-n-slate-11">
@@ -1,179 +0,0 @@
-<script setup>
-import CallCard from './CallCard.vue';
-import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
-import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
-
-const whatsappCall = {
-  callSid: 'wamid.HBgM',
-  conversationId: 1234,
-  provider: VOICE_CALL_PROVIDERS.WHATSAPP,
-};
-
-const twilioCall = {
-  callSid: 'CA1234567890',
-  conversationId: 1234,
-};
-
-const richCallInfo = {
-  contactName: 'John Does',
-  phoneNumber: '+1 412 245 0242',
-  inboxName: 'Customer support',
-  location: 'San Francisco, United States',
-  countryFlag: '\u{1F1FA}\u{1F1F8}',
-  hasLocation: true,
-  avatar:
-    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
-};
-
-// Falls back to inbox name when neither city nor country is on the contact.
-const noLocationCallInfo = {
-  contactName: 'Anonymous Lead',
-  phoneNumber: '+44 20 7916 0428',
-  inboxName: 'Sales',
-  location: 'Sales',
-  countryFlag: '',
-  hasLocation: false,
-  avatar: '',
-};
-
-// Truncation regression check — both contact name and location should ellipsize.
-const longCallInfo = {
-  contactName: 'Aleksandra Konstantinopolskaya',
-  phoneNumber: '+49 30 911890',
-  inboxName: 'Customer support',
-  location:
-    'Friedrichshain-Kreuzberg, Federal Republic of Germany (Deutschland)',
-  countryFlag: '\u{1F1E9}\u{1F1EA}',
-  hasLocation: true,
-  avatar: '',
-};
-
-const unknownCallerInfo = {
-  contactName: 'Unknown caller',
-  phoneNumber: '',
-  inboxName: 'Customer support',
-  location: 'Customer support',
-  countryFlag: '',
-  hasLocation: false,
-  avatar: '',
-};
-
-const log =
-  (label, ...args) =>
-  () => {
-    // eslint-disable-next-line no-console
-    console.log(`[CallCard.story] ${label}`, ...args);
-  };
-</script>
-
-<template>
-  <Story
-    title="Components/Call/CallCard"
-    :layout="{ type: 'grid', width: '400px' }"
-  >
-    <Variant title="Incoming · WhatsApp">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Incoming · Twilio (no flag)">
-      <CallCard
-        :call="twilioCall"
-        :call-info="noLocationCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Outgoing · WhatsApp ringing">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.OUTGOING"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · WhatsApp (mute visible, unmuted)">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="01:23"
-        :is-muted="false"
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · WhatsApp muted">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="03:47"
-        is-muted
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · Twilio (no mute control)">
-      <CallCard
-        :call="twilioCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="00:42"
-        @end="log('end')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Incoming · Unknown caller">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="unknownCallerInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Truncation · long name and location">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="longCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · no conversation link in footer">
-      <CallCard
-        :call="{ ...whatsappCall, conversationId: null }"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="02:10"
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-      />
-    </Variant>
-  </Story>
-</template>
@@ -1,242 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
-import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  call: {
-    type: Object,
-    required: true,
-  },
-  callInfo: {
-    type: Object,
-    required: true,
-  },
-  // 'incoming' | 'outgoing' | 'ongoing'
-  state: {
-    type: String,
-    required: true,
-  },
-  duration: {
-    type: String,
-    default: '',
-  },
-  isMuted: {
-    type: Boolean,
-    default: false,
-  },
-  showMute: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-defineEmits([
-  'accept',
-  'reject',
-  'end',
-  'toggleMute',
-  'goToConversation',
-  'dismiss',
-]);
-
-const { t } = useI18n();
-
-const isOngoing = computed(() => props.state === VOICE_CALL_DIRECTION.ONGOING);
-const isIncoming = computed(
-  () => props.state === VOICE_CALL_DIRECTION.INCOMING
-);
-const isOutgoing = computed(
-  () => props.state === VOICE_CALL_DIRECTION.OUTGOING
-);
-
-const statusIcon = computed(() => {
-  if (isOngoing.value) return 'i-ph-phone-call-bold';
-  if (isOutgoing.value) return 'i-ph-phone-outgoing-bold';
-  return 'i-ph-phone-incoming-bold';
-});
-
-const statusLabel = computed(() => {
-  if (isOngoing.value) return t('CONVERSATION.VOICE_WIDGET.CALL_IN_PROGRESS');
-  if (isOutgoing.value) return t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL');
-  return t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL');
-});
-
-const channelIcon = computed(() => {
-  if (props.call?.provider === VOICE_CALL_PROVIDERS.WHATSAPP)
-    return 'i-ri-whatsapp-fill';
-  return 'i-ph-phone-bold';
-});
-</script>
-
-<template>
-  <div
-    class="flex flex-col gap-2 pt-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
-    :class="call?.conversationId ? 'pb-2' : 'pb-4'"
-  >
-    <!-- Top section: status badge + location/inbox + duration -->
-    <div class="flex flex-col gap-3">
-      <div class="flex items-center gap-2 px-4">
-        <!-- Ongoing: status badge on left -->
-        <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
-          <Icon :icon="statusIcon" class="size-3.5 text-n-teal-9 shrink-0" />
-          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
-            {{ statusLabel }}
-          </span>
-        </div>
-
-        <!-- Caller location (city, country) or fallback to channel + inbox name -->
-        <div class="flex items-center gap-1.5 min-w-0 flex-1">
-          <span
-            v-if="callInfo.hasLocation && callInfo.countryFlag"
-            class="text-sm leading-none shrink-0"
-          >
-            {{ callInfo.countryFlag }}
-          </span>
-          <Icon
-            v-else-if="!isOngoing"
-            :icon="channelIcon"
-            class="size-3.5 text-n-slate-10 shrink-0"
-          />
-          <span
-            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
-          >
-            {{ callInfo.location }}
-          </span>
-        </div>
-
-        <!-- Ongoing: duration on right -->
-        <p
-          v-if="isOngoing"
-          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
-        >
-          {{ duration }}
-        </p>
-        <!-- Incoming/Outgoing: status badge on right -->
-        <div v-else class="flex items-center gap-1.5 shrink-0">
-          <Icon :icon="statusIcon" class="size-3.5 text-n-teal-9 shrink-0" />
-          <span class="text-xs font-medium text-n-teal-9 tracking-tight">
-            {{ statusLabel }}
-          </span>
-          <!-- Dismiss: removes the notification from the UI without declining.
-               Incoming only — outgoing/ongoing calls are ended via the call
-               controls, not silently dismissed. -->
-          <NextButton
-            v-if="isIncoming"
-            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.DISMISS_CALL')"
-            icon="i-ph-x-bold"
-            slate
-            ghost
-            xs
-            class="!rounded-full -my-1"
-            @click="$emit('dismiss')"
-          />
-        </div>
-      </div>
-
-      <!-- Main row: avatar + name/phone + actions -->
-      <div class="flex items-center gap-3 px-4">
-        <div class="shrink-0">
-          <Avatar
-            :src="callInfo.avatar"
-            :name="callInfo.contactName"
-            :size="40"
-          />
-        </div>
-        <div class="flex-1 min-w-0">
-          <p
-            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
-          >
-            {{ callInfo.contactName }}
-          </p>
-          <p
-            v-if="callInfo.phoneNumber"
-            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
-          >
-            {{ callInfo.phoneNumber }}
-          </p>
-        </div>
-
-        <!-- Actions -->
-        <div class="flex items-center gap-2 shrink-0">
-          <!-- Mute toggle (WhatsApp ongoing only) -->
-          <NextButton
-            v-if="isOngoing && showMute"
-            v-tooltip.top="
-              isMuted
-                ? $t('CONVERSATION.VOICE_WIDGET.UNMUTE')
-                : $t('CONVERSATION.VOICE_WIDGET.MUTE')
-            "
-            :icon="
-              isMuted ? 'i-ph-microphone-slash-bold' : 'i-ph-microphone-bold'
-            "
-            :variant="isMuted ? 'solid' : 'faded'"
-            :color="isMuted ? 'amber' : 'teal'"
-            class="!rounded-full"
-            @click="$emit('toggleMute')"
-          />
-
-          <!-- Accept call (incoming only) -->
-          <NextButton
-            v-if="isIncoming"
-            v-tooltip.top="$t('CONVERSATION.VOICE_WIDGET.JOIN_CALL')"
-            icon="i-ph-phone-bold"
-            teal
-            class="!rounded-full"
-            @click="$emit('accept')"
-          />
-
-          <!-- Reject / end call (all states) -->
-          <NextButton
-            v-tooltip.top="
-              isOngoing
-                ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
-                : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
-            "
-            icon="i-ph-phone-bold"
-            ruby
-            class="!rounded-full rotate-[135deg]"
-            @click="isOngoing ? $emit('end') : $emit('reject')"
-          />
-        </div>
-      </div>
-    </div>
-
-    <!-- Footer: go to conversation thread -->
-    <NextButton
-      v-if="call?.conversationId"
-      slate
-      ghost
-      trailing-icon
-      class="!justify-between !px-2 !mx-2"
-      @click="$emit('goToConversation')"
-    >
-      <template #icon>
-        <span
-          class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
-        >
-          <Icon
-            icon="i-ph-chat-circle-text-bold"
-            class="size-3.5 text-n-slate-11 shrink-0"
-          />
-          <span class="text-sm tracking-tight tabular-nums">
-            #{{ call.conversationId }}
-          </span>
-          <Icon
-            icon="i-ph-caret-right-bold"
-            class="size-3 text-n-slate-11 shrink-0"
-          />
-        </span>
-      </template>
-      <span
-        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
-      >
-        {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
-      </span>
-    </NextButton>
-  </div>
-</template>
@@ -1,273 +0,0 @@
-<script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
-import { useCallSession } from 'dashboard/composables/useCallSession';
-import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
-import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
-import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
-import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
-import CallCard from 'dashboard/components-next/call/CallCard.vue';
-import countriesList from 'shared/constants/countries.js';
-
-const RINGTONE_URL = '/audio/dashboard/ringtone.mp3';
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-
-const {
-  activeCall,
-  incomingCalls,
-  hasActiveCall,
-  isJoining,
-  joinCall,
-  endCall: endCallSession,
-  rejectIncomingCall,
-  dismissCall,
-  formattedCallDuration,
-} = useCallSession();
-
-// Mute routes by provider: WhatsApp toggles the local mic track, Twilio uses
-// the Voice SDK connection's native mute. Both surface the same button.
-const isMuted = ref(false);
-const isWhatsappActive = computed(
-  () => activeCall.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
-);
-
-const primaryIncomingCall = computed(() =>
-  hasActiveCall.value ? null : incomingCalls.value[0] || null
-);
-
-const stackedIncomingCalls = computed(() =>
-  hasActiveCall.value ? incomingCalls.value : incomingCalls.value.slice(1)
-);
-
-const mainCardState = computed(() => {
-  if (hasActiveCall.value) return VOICE_CALL_DIRECTION.ONGOING;
-  const direction = primaryIncomingCall.value?.callDirection;
-  return direction === VOICE_CALL_DIRECTION.OUTBOUND
-    ? VOICE_CALL_DIRECTION.OUTGOING
-    : VOICE_CALL_DIRECTION.INCOMING;
-});
-
-// Stacked cards are always non-active (ringing) calls, so reflect each call's
-// real direction. An outbound call must render as OUTGOING — otherwise it shows
-// the incoming-only dismiss (✕) control and the agent could drop it locally
-// without terminating, leaving the customer ringing with no widget to end it.
-const stackedCardState = call =>
-  call?.callDirection === VOICE_CALL_DIRECTION.OUTBOUND
-    ? VOICE_CALL_DIRECTION.OUTGOING
-    : VOICE_CALL_DIRECTION.INCOMING;
-
-const toggleMute = () => {
-  isMuted.value = !isMuted.value;
-  if (isWhatsappActive.value) {
-    setWhatsappCallMuted(isMuted.value);
-  } else {
-    TwilioVoiceClient.setMuted(isMuted.value);
-  }
-};
-
-watch(hasActiveCall, active => {
-  if (!active) isMuted.value = false;
-});
-
-// Convert ISO 3166-1 alpha-2 country code (e.g. "US") to its regional indicator
-// flag emoji. Returns empty string if the code is missing or malformed.
-const countryCodeToFlag = code => {
-  if (!code || code.length !== 2) return '';
-  const base = 0x1f1e6;
-  const offset = 'A'.charCodeAt(0);
-  return String.fromCodePoint(
-    ...code
-      .toUpperCase()
-      .split('')
-      .map(c => base + (c.charCodeAt(0) - offset))
-  );
-};
-
-const getCallInfo = call => {
-  const conversation = store.getters.getConversationById(call?.conversationId);
-  // Look up inbox from the call's own inboxId — the conversation can drop out
-  // of the Vuex store when the user navigates between inbox views, so going
-  // through `conversation.inbox_id` would lose the inbox name (and fall back
-  // to the literal "Customer support" string).
-  const inbox = store.getters['inboxes/getInbox'](call?.inboxId);
-  const sender = conversation?.meta?.sender;
-  // `caller` is the snapshot captured when the call first landed (from the
-  // message sender or the WhatsApp cable payload). It outlives the
-  // conversation being in the store, so prefer it for display.
-  const caller = call?.caller;
-  const additional =
-    sender?.additional_attributes || caller?.additionalAttributes || {};
-  const city = additional.city || '';
-  const countryCode = additional.country_code || '';
-  const country =
-    additional.country ||
-    countriesList.find(c => c.id === countryCode.toUpperCase())?.name ||
-    '';
-  // Prefer the richest available location string ("City, Country"); fall back to
-  // whichever single field is present; finally fall back to the inbox name so
-  // there's always something to show.
-  const locationParts = [city, country].filter(Boolean);
-  const location =
-    locationParts.join(', ') || inbox?.name || 'Customer support';
-  return {
-    conversation,
-    inbox,
-    contactName:
-      caller?.name ||
-      sender?.name ||
-      caller?.phone ||
-      sender?.phone_number ||
-      'Unknown caller',
-    phoneNumber: caller?.phone || sender?.phone_number || '',
-    inboxName: inbox?.name || 'Customer support',
-    location,
-    countryFlag: countryCodeToFlag(countryCode),
-    hasLocation: locationParts.length > 0,
-    avatar: caller?.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;
-
-  const inboxId = call.inboxId || getCallInfo(call).conversation?.inbox_id;
-  if (!inboxId) return;
-
-  await endCallSession({
-    conversationId: call.conversationId,
-    inboxId,
-    callSid: call.callSid,
-  });
-};
-
-const handleJoinCall = async call => {
-  if (!call || isJoining.value) return;
-  const { conversation } = getCallInfo(call);
-
-  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,
-    callSid: call.callSid,
-  });
-
-  if (result && conversation) {
-    router.push({
-      name: 'inbox_conversation',
-      params: { conversation_id: call.conversationId },
-    });
-  }
-};
-
-// 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.
-watch(
-  () => incomingCalls.value[0],
-  call => {
-    if (
-      call?.callDirection === VOICE_CALL_DIRECTION.OUTBOUND &&
-      call?.provider !== VOICE_CALL_PROVIDERS.WHATSAPP &&
-      !hasActiveCall.value &&
-      WindowVisibilityHelper.isWindowVisible()
-    ) {
-      handleJoinCall(call);
-    }
-  },
-  { 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. The watcher only fires on the boolean transitioning, so additional
-// ringing calls arriving while one is already ringing don't restart the audio
-// — they silently stack into the UI without producing a fresh ring.
-// 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 !== VOICE_CALL_DIRECTION.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-3 w-[400px]"
-  >
-    <!-- Stacked incoming calls (shown above the primary card) -->
-    <CallCard
-      v-for="call in stackedIncomingCalls"
-      :key="call.callSid"
-      :call="call"
-      :state="stackedCardState(call)"
-      :call-info="getCallInfo(call)"
-      @accept="handleJoinCall(call)"
-      @reject="rejectIncomingCall(call.callSid)"
-      @dismiss="dismissCall(call.callSid)"
-      @go-to-conversation="goToConversation(call)"
-    />
-
-    <!-- Main Call Widget -->
-    <CallCard
-      v-if="hasActiveCall || primaryIncomingCall"
-      :call="activeCall || primaryIncomingCall"
-      :state="mainCardState"
-      :call-info="getCallInfo(activeCall || primaryIncomingCall)"
-      :duration="hasActiveCall ? formattedCallDuration : ''"
-      :is-muted="isMuted"
-      :show-mute="hasActiveCall"
-      @accept="handleJoinCall(primaryIncomingCall)"
-      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
-      @dismiss="dismissCall(primaryIncomingCall?.callSid)"
-      @end="handleEndCall"
-      @toggle-mute="toggleMute"
-      @go-to-conversation="goToConversation(activeCall || primaryIncomingCall)"
-    />
-  </div>
-</template>
@@ -25,7 +25,7 @@ const store = useStore();
 const bulkDeleteDialog = ref(null);

 const isSyncableDocument = doc =>
-  !doc.pdf_document && doc.status === 'available';
+  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;

 const syncableSelectedIds = computed(() => {
  if (!props.selectedIds.size) return [];
@@ -127,6 +127,7 @@ const menuItems = computed(() => {
      value: 'sync',
      action: 'sync',
      icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
    });
  }

@@ -1,7 +1,6 @@
 <script setup>
 import { computed, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { debounce } from '@chatwoot/utils';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
@@ -110,34 +109,6 @@ const inputFieldType = computed(() => {
  return 'text';
 });

-const asyncOptions = ref([]);
-const isSearching = ref(false);
-const lastSearchQuery = ref('');
-
-const performAsyncSearch = async query => {
-  let results;
-  try {
-    results = await currentFilter.value.searchOptions(query);
-  } catch {
-    results = [];
-  }
-  // skip stale responses — a newer search in this row owns the UI
-  if (query !== lastSearchQuery.value) return;
-  // null means another row's search aborted ours, reset instead of staying stuck on the searching state
-  if (results !== null) asyncOptions.value = results;
-  isSearching.value = false;
-};
-
-const debouncedAsyncSearch = debounce(performAsyncSearch, 300);
-
-const onAsyncSearch = query => {
-  const hasQuery = !!query.trim();
-  lastSearchQuery.value = query;
-  if (!hasQuery) asyncOptions.value = [];
-  isSearching.value = hasQuery;
-  debouncedAsyncSearch(query);
-};
-
 const resetModelOnAttributeKeyChange = newAttributeKey => {
  /**
   * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -150,16 +121,11 @@ const resetModelOnAttributeKeyChange = newAttributeKey => {
  const newInputType = getInputType(newOperator, filter);
  if (newInputType === 'multiSelect') {
    values.value = [];
-  } else if (
-    ['searchSelect', 'asyncSearchSelect', 'booleanSelect'].includes(
-      newInputType
-    )
-  ) {
+  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
    values.value = {};
  } else {
    values.value = '';
  }
-  asyncOptions.value = [];
  filterOperator.value = newOperator.value;
 };

@@ -219,16 +185,6 @@ defineExpose({ validate, resetValidation });
          :options="currentFilter.options"
          dropdown-max-height="max-h-64"
        />
-        <SingleSelect
-          v-else-if="inputType === 'asyncSearchSelect'"
-          v-model="values"
-          async-search
-          :options="asyncOptions"
-          :is-searching="isSearching"
-          :search-placeholder="currentFilter.searchPlaceholder"
-          dropdown-max-height="max-h-64"
-          @search="onAsyncSearch"
-        />
        <SingleSelect
          v-else-if="inputType === 'booleanSelect'"
          v-model="values"
@@ -7,7 +7,6 @@ export const CONVERSATION_ATTRIBUTES = {
  ASSIGNEE_ID: 'assignee_id',
  INBOX_ID: 'inbox_id',
  TEAM_ID: 'team_id',
-  CONTACT_ID: 'contact_id',
  DISPLAY_ID: 'display_id',
  CAMPAIGN_ID: 'campaign_id',
  LABELS: 'labels',
@@ -1,37 +1,9 @@
-import { ref } from 'vue';
-import ContactAPI from 'dashboard/api/contacts';
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConversationFilterContext } from '../provider';
 import {
-  CONVERSATION_ATTRIBUTES,
  getCustomAttributeInputType,
  buildAttributesFilterTypes,
  replaceUnderscoreWithSpace,
 } from './filterHelper';

-vi.mock('dashboard/api/contacts', () => ({
-  default: {
-    search: vi.fn(),
-  },
-}));
-
-vi.mock('dashboard/composables/store.js', () => ({
-  useMapGetter: vi.fn(),
-}));
-
-vi.mock('next/icon/provider', () => ({
-  useChannelIcon: () => ref('i-test-channel'),
-}));
-
-vi.mock('vue-i18n', () => ({
-  useI18n: () => ({
-    t: (key, params = {}) => {
-      if (key === 'FILTER.CONTACT_FALLBACK') return `Contact #${params.id}`;
-      return key;
-    },
-  }),
-}));
-
 describe('filterHelper', () => {
  describe('getCustomAttributeInputType', () => {
    it('returns date for date type', () => {
@@ -163,64 +135,3 @@ describe('filterHelper', () => {
    });
  });
 });
-
-const storeValues = {
-  'attributes/getConversationAttributes': ref([]),
-  'labels/getLabels': ref([]),
-  'agents/getAgents': ref([]),
-  'inboxes/getInboxes': ref([]),
-  'teams/getTeams': ref([]),
-  'campaigns/getAllCampaigns': ref([]),
-};
-
-describe('useConversationFilterContext', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    useMapGetter.mockImplementation(key => storeValues[key] || ref([]));
-  });
-
-  it('exposes contact as an async searchable conversation filter', () => {
-    const { filterTypes } = useConversationFilterContext();
-    const contactFilter = filterTypes.value.find(
-      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
-    );
-
-    expect(contactFilter).toMatchObject({
-      attributeKey: 'contact_id',
-      label: 'FILTER.ATTRIBUTES.CONTACT',
-      inputType: 'asyncSearchSelect',
-      dataType: 'number',
-      attributeModel: 'standard',
-    });
-    expect(
-      contactFilter.filterOperators.map(operator => operator.value)
-    ).toEqual(['equal_to', 'not_equal_to']);
-  });
-
-  it('uses the existing contact search API for contact filter options', async () => {
-    ContactAPI.search.mockResolvedValue({
-      data: {
-        payload: [
-          { id: 1, name: 'Jane Doe' },
-          { id: 2, email: 'alex@example.com' },
-          { id: 3 },
-        ],
-      },
-    });
-
-    const { filterTypes } = useConversationFilterContext();
-    const contactFilter = filterTypes.value.find(
-      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
-    );
-    const options = await contactFilter.searchOptions('jane');
-
-    expect(ContactAPI.search).toHaveBeenCalledWith('jane', 1, 'name', '', {
-      signal: expect.any(AbortSignal),
-    });
-    expect(options).toEqual([
-      { id: 1, name: 'Jane Doe' },
-      { id: 2, name: 'alex@example.com' },
-      { id: 3, name: 'Contact #3' },
-    ]);
-  });
-});
@@ -11,8 +11,6 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';

 const {
  options,
-  asyncSearch,
-  isSearching,
  disableSearch,
  disableDeselect,
  placeholderIcon,
@@ -25,14 +23,6 @@ const {
    type: Array,
    required: true,
  },
-  asyncSearch: {
-    type: Boolean,
-    default: false,
-  },
-  isSearching: {
-    type: Boolean,
-    default: false,
-  },
  disableSearch: {
    type: Boolean,
    default: false,
@@ -63,12 +53,6 @@ const {
  },
 });

-const emit = defineEmits(['search']);
-
-// the input is re-inserted on every dropdown open (v-if),
-// where the native autofocus attribute is ignored so focus it via a directive instead
-const vFocus = { mounted: el => el.focus() };
-
 const { t } = useI18n();
 const selected = defineModel({
  type: Object,
@@ -76,9 +60,7 @@ const selected = defineModel({
 });

 const searchTerm = ref('');
-
 const searchResults = computed(() => {
-  if (asyncSearch) return options;
  if (!options) return [];
  return picoSearch(options, searchTerm.value, ['name']);
 });
@@ -95,11 +77,7 @@ const selectedItem = computed(() => {
  if (!optionToSearch) return null;
  // extract the selected item from the options array
  // this ensures that options like icon is also included
-  return (
-    options.find(option => option.id === optionToSearch.id) ||
-    // async options may not include the selected option, fall back to it
-    (asyncSearch && optionToSearch.id !== undefined ? optionToSearch : null)
-  );
+  return options.find(option => option.id === optionToSearch.id);
 });

 const toggleSelected = option => {
@@ -153,19 +131,13 @@ const toggleSelected = option => {
        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
        <input
          v-model="searchTerm"
-          v-focus
+          autofocus
          class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-          @input="emit('search', $event.target.value)"
        />
      </div>
      <DropdownSection :height="dropdownMaxHeight">
-        <template v-if="isSearching">
-          <DropdownItem disabled>
-            {{ t('DROPDOWN_MENU.SEARCHING') }}
-          </DropdownItem>
-        </template>
-        <template v-else-if="searchResults.length">
+        <template v-if="searchResults.length">
          <DropdownItem
            v-for="option in searchResults"
            :key="option.id"
@@ -3,7 +3,6 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
-import { createContactSearcher } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 import {
  buildAttributesFilterTypes,
  CONVERSATION_ATTRIBUTES,
@@ -31,7 +30,7 @@ import languages from 'dashboard/components/widgets/conversation/advancedFilterI
 * @property {string} value - This is a proxy for the attribute key used in FilterSelect
 * @property {string} attributeName - The attribute name used to display on the UI
 * @property {string} label - This is a proxy for the attribute name used in FilterSelect
- * @property {'multiSelect'|'searchSelect'|'asyncSearchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
 * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
 * @property {'text'|'number'} dataType
 * @property {FilterOperator[]} filterOperators - The operators available for the attribute
@@ -69,30 +68,6 @@ export function useConversationFilterContext() {
    getOperatorTypes,
  } = useOperators();

-  const searchContacts = createContactSearcher();
-
-  const contactOptionName = contact =>
-    contact.name ||
-    contact.email ||
-    contact.phoneNumber ||
-    contact.identifier ||
-    t('FILTER.CONTACT_FALLBACK', { id: contact.id });
-
-  const searchContactOptions = async query => {
-    const contacts = await searchContacts(query, {
-      skipMinLength: true,
-      reachableOnly: false,
-    });
-
-    // null means the request was aborted (a newer search is in-flight)
-    if (contacts === null) return null;
-
-    return contacts.map(contact => ({
-      id: contact.id,
-      name: contactOptionName(contact),
-    }));
-  };
-
  /**
   * @type {import('vue').ComputedRef<FilterType[]>}
   */
@@ -183,18 +158,6 @@ export function useConversationFilterContext() {
      filterOperators: presenceOperators.value,
      attributeModel: 'standard',
    },
-    {
-      attributeKey: CONVERSATION_ATTRIBUTES.CONTACT_ID,
-      value: CONVERSATION_ATTRIBUTES.CONTACT_ID,
-      attributeName: t('FILTER.ATTRIBUTES.CONTACT'),
-      label: t('FILTER.ATTRIBUTES.CONTACT'),
-      inputType: 'asyncSearchSelect',
-      searchOptions: searchContactOptions,
-      searchPlaceholder: t('FILTER.CONTACT_SEARCH_PLACEHOLDER'),
-      dataType: 'number',
-      filterOperators: equalityOperators.value,
-      attributeModel: 'standard',
-    },
    {
      attributeKey: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
      value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
@@ -1,65 +0,0 @@
-<script setup>
-import ChannelIcon from './ChannelIcon.vue';
-import { useChannelBrandIcon } from './provider';
-
-const inboxes = [
-  { name: 'API', channel_type: 'Channel::Api' },
-  { name: 'Email', channel_type: 'Channel::Email' },
-  { name: 'Gmail', channel_type: 'Channel::Email', provider: 'google' },
-  { name: 'Outlook', channel_type: 'Channel::Email', provider: 'microsoft' },
-  { name: 'Messenger', channel_type: 'Channel::FacebookPage' },
-  { name: 'Instagram', channel_type: 'Channel::Instagram' },
-  { name: 'Line', channel_type: 'Channel::Line' },
-  { name: 'Telegram', channel_type: 'Channel::Telegram' },
-  { name: 'WhatsApp', channel_type: 'Channel::Whatsapp' },
-  { name: 'TikTok', channel_type: 'Channel::Tiktok' },
-  { name: 'SMS', channel_type: 'Channel::Sms' },
-  { name: 'Twilio SMS', channel_type: 'Channel::TwilioSms' },
-  {
-    name: 'Twilio WhatsApp',
-    channel_type: 'Channel::TwilioSms',
-    medium: 'whatsapp',
-  },
-  {
-    name: 'Voice',
-    channel_type: 'Channel::TwilioSms',
-    voice_enabled: true,
-  },
-  { name: 'Website', channel_type: 'Channel::WebWidget' },
-];
-
-const brandInboxes = inboxes.filter(inbox => useChannelBrandIcon(inbox).value);
-</script>
-
-<template>
-  <Story title="Components/Icons/ChannelIcon">
-    <Variant title="Glyph (default)">
-      <div class="grid grid-cols-4 gap-5">
-        <div
-          v-for="inbox in inboxes"
-          :key="inbox.name"
-          class="flex items-center gap-2"
-        >
-          <ChannelIcon :inbox="inbox" class="size-6 text-n-slate-11" />
-          <span>{{ inbox.name }}</span>
-        </div>
-      </div>
-    </Variant>
-    <Variant title="Brand icon">
-      <div class="grid grid-cols-4 gap-5">
-        <div
-          v-for="inbox in brandInboxes"
-          :key="inbox.name"
-          class="flex items-center gap-2"
-        >
-          <ChannelIcon
-            :inbox="inbox"
-            use-brand-icon
-            class="size-6 text-n-slate-11"
-          />
-          <span>{{ inbox.name }}</span>
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>
@@ -1,7 +1,6 @@
 <script setup>
-import { computed, toRef } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
-import { useChannelIcon, useChannelBrandIcon } from './provider';
+import { toRef } from 'vue';
+import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';

 const props = defineProps({
@@ -9,35 +8,11 @@ const props = defineProps({
    type: Object,
    required: true,
  },
-  // When true, render the full-color brand icon (when one exists for the
-  // channel type) and fall back to the monochrome glyph otherwise.
-  useBrandIcon: {
-    type: Boolean,
-    default: false,
-  },
 });

-defineOptions({ inheritAttrs: false });
-
-const inboxRef = toRef(props, 'inbox');
-
-const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
-const channelIcon = useChannelIcon(inboxRef);
-const brandIcon = useChannelBrandIcon(inboxRef);
-
-const icon = computed(() =>
-  props.useBrandIcon && brandIcon.value ? brandIcon.value : channelIcon.value
-);
+const channelIcon = useChannelIcon(toRef(props, 'inbox'));
 </script>

 <template>
-  <span class="relative inline-flex" v-bind="$attrs">
-    <Icon :icon="icon" class="size-full" />
-    <span
-      v-if="hasVoiceBadge"
-      class="absolute top-0 ltr:right-0 rtl:left-0 inline-flex items-center justify-center size-2 rounded-full bg-n-surface-1"
-    >
-      <Icon icon="i-lucide-audio-lines" class="size-1.5 text-n-slate-12" />
-    </span>
-  </span>
+  <Icon :icon="channelIcon" />
 </template>
@@ -1,75 +1,47 @@
-import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
 import { computed } from 'vue';
-
-const channelTypeIconMap = {
-  'Channel::Api': 'i-woot-api',
-  'Channel::Email': 'i-woot-mail',
-  'Channel::FacebookPage': 'i-woot-messenger',
-  'Channel::Line': 'i-woot-line',
-  'Channel::Sms': 'i-woot-sms',
-  'Channel::Telegram': 'i-woot-telegram',
-  'Channel::TwilioSms': 'i-woot-sms',
-  'Channel::TwitterProfile': 'i-woot-x',
-  'Channel::WebWidget': 'i-woot-website',
-  'Channel::Whatsapp': 'i-woot-whatsapp',
-  'Channel::Instagram': 'i-woot-instagram',
-  'Channel::Tiktok': 'i-woot-tiktok',
-};
-
-const providerIconMap = {
-  microsoft: 'i-woot-outlook',
-  google: 'i-woot-gmail',
-};
-
-// Full-color brand icons. Most come from the `logos` Iconify set; Instagram,
-// Outlook and Line use custom `woot` glyphs since the `logos` versions are
-// monochrome or missing. Channels not listed here have no brand variant and
-// callers should fall back to the monochrome glyph via useChannelIcon.
-const channelTypeBrandIconMap = {
-  'Channel::FacebookPage': 'i-logos-messenger',
-  'Channel::Line': 'i-woot-line-color',
-  'Channel::Telegram': 'i-logos-telegram',
-  'Channel::Whatsapp': 'i-logos-whatsapp-icon',
-  'Channel::Instagram': 'i-woot-instagram-color',
-  'Channel::Tiktok': 'i-logos-tiktok-icon',
-};
-
-const providerBrandIconMap = {
-  microsoft: 'i-woot-outlook-color',
-  google: 'i-logos-google-gmail',
-};
-
-const resolveInbox = inbox => inbox?.value ?? inbox;
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';

 export function useChannelIcon(inbox) {
+  const channelTypeIconMap = {
+    'Channel::Api': 'i-woot-api',
+    'Channel::Email': 'i-woot-mail',
+    'Channel::FacebookPage': 'i-woot-messenger',
+    'Channel::Line': 'i-woot-line',
+    'Channel::Sms': 'i-woot-sms',
+    'Channel::Telegram': 'i-woot-telegram',
+    'Channel::TwilioSms': 'i-woot-sms',
+    'Channel::TwitterProfile': 'i-woot-x',
+    'Channel::WebWidget': 'i-woot-website',
+    'Channel::Whatsapp': 'i-woot-whatsapp',
+    'Channel::Instagram': 'i-woot-instagram',
+    'Channel::Tiktok': 'i-woot-tiktok',
+    'Channel::AppStore': 'i-ri-app-store-fill',
+    'Channel::GooglePlay': 'i-ri-google-play-line',
+  };
+
+  const providerIconMap = {
+    microsoft: 'i-woot-outlook',
+    google: 'i-woot-gmail',
+  };
+
  const channelIcon = computed(() => {
-    const inboxDetails = resolveInbox(inbox);
+    const inboxDetails = inbox.value || inbox;
    const type = inboxDetails.channel_type;
    let icon = channelTypeIconMap[type];

-    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
+    if (type === 'Channel::Email' && inboxDetails.provider) {
      if (Object.keys(providerIconMap).includes(inboxDetails.provider)) {
        icon = providerIconMap[inboxDetails.provider];
      }
    }

    // Special case for Twilio whatsapp
-    if (
-      type === INBOX_TYPES.TWILIO &&
-      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
-    ) {
+    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
      icon = 'i-woot-whatsapp';
    }

-    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
-    // is presented as a Voice channel, so show the phone icon.
-    const voiceEnabled =
-      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
-    if (
-      type === INBOX_TYPES.TWILIO &&
-      voiceEnabled &&
-      inboxDetails.medium !== TWILIO_CHANNEL_MEDIUM.WHATSAPP
-    ) {
+    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
+    if (isVoiceCallEnabled(inboxDetails)) {
      icon = 'i-woot-voice';
    }

@@ -78,26 +50,3 @@ export function useChannelIcon(inbox) {

  return channelIcon;
 }
-
-export function useChannelBrandIcon(inbox) {
-  return computed(() => {
-    const inboxDetails = resolveInbox(inbox);
-    const type = inboxDetails.channel_type;
-    let icon = channelTypeBrandIconMap[type];
-
-    if (type === INBOX_TYPES.EMAIL && inboxDetails.provider) {
-      if (Object.keys(providerBrandIconMap).includes(inboxDetails.provider)) {
-        icon = providerBrandIconMap[inboxDetails.provider];
-      }
-    }
-
-    if (
-      type === INBOX_TYPES.TWILIO &&
-      inboxDetails.medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP
-    ) {
-      icon = channelTypeBrandIconMap['Channel::Whatsapp'];
-    }
-
-    return icon ?? null;
-  });
-}
@@ -31,7 +31,6 @@ import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
 import EmbedBubble from './bubbles/Embed.vue';
-import FallbackBubble from './bubbles/Fallback.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
@@ -329,8 +328,6 @@ const componentToRender = computed(() => {
  if (Array.isArray(props.attachments) && props.attachments.length === 1) {
    const fileType = props.attachments[0].fileType;

-    if (fileType === ATTACHMENT_TYPES.FALLBACK) return FallbackBubble;
-
    if (!props.content) {
      if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
      if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
@@ -557,10 +554,11 @@ provideMessageContext({
        <Avatar v-bind="avatarInfo" :size="24" />
      </div>
      <div
-        class="[grid-area:bubble] flex min-w-0"
+        class="[grid-area:bubble] flex"
        :class="{
          'ltr:ml-8 rtl:mr-8 justify-end': orientation === ORIENTATION.RIGHT,
          'ltr:mr-8 rtl:ml-8': orientation === ORIENTATION.LEFT,
+          'min-w-0': variant === MESSAGE_VARIANTS.EMAIL,
        }"
        @contextmenu="openContextMenu($event)"
      >
@@ -20,7 +20,9 @@ const {
  isAWhatsAppChannel,
  isAnEmailChannel,
  isAnInstagramChannel,
+  isAnAppStoreChannel,
  isATiktokChannel,
+  isAGooglePlayChannel,
 } = useInbox();

 const {
@@ -62,7 +64,9 @@ const isSent = computed(() => {
    isASmsInbox.value ||
    isATelegramChannel.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value ||
+    isAGooglePlayChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
  }
@@ -85,7 +89,8 @@ const isDelivered = computed(() => {
    isASmsInbox.value ||
    isAFacebookInbox.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
  }
@@ -110,7 +115,8 @@ const isRead = computed(() => {
    isATwilioChannel.value ||
    isAFacebookInbox.value ||
    isAnInstagramChannel.value ||
-    isATiktokChannel.value
+    isATiktokChannel.value ||
+    isAnAppStoreChannel.value
  ) {
    return sourceId.value && status.value === MESSAGE_STATUS.READ;
  }
@@ -95,7 +95,7 @@ const replyToPreview = computed(() => {

 <template>
  <div
-    class="text-sm min-w-0"
+    class="text-sm"
    :class="[
      messageClass,
      {
@@ -1,37 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import BaseBubble from './Base.vue';
-import FormattedContent from './Text/FormattedContent.vue';
-import { useMessageContext } from '../provider.js';
-
-const { attachments, content } = useMessageContext();
-
-const attachment = computed(() => attachments.value?.[0] || {});
-const url = computed(
-  () => attachment.value.dataUrl || attachment.value.data_url
-);
-const title = computed(
-  () =>
-    attachment.value.fallbackTitle ||
-    attachment.value.fallback_title ||
-    url.value
-);
-</script>
-
-<template>
-  <BaseBubble class="p-3" data-bubble-name="fallback">
-    <FormattedContent v-if="content" :content="content" class="mb-2" />
-    <a
-      v-if="url"
-      :href="url"
-      target="_blank"
-      rel="noopener noreferrer"
-      class="block max-w-[320px] truncate text-sm text-n-brand underline"
-    >
-      {{ title }}
-    </a>
-    <span v-else class="text-sm text-n-slate-11">
-      {{ title }}
-    </span>
-  </BaseBubble>
-</template>
@@ -6,12 +6,9 @@ import BaseBubble from './Base.vue';

 const { inboxId } = useMessageContext();

-const {
-  isAFacebookInbox,
-  isAnInstagramChannel,
-  isATiktokChannel,
-  isAWhatsAppChannel,
-} = useInbox(inboxId.value);
+const { isAFacebookInbox, isAnInstagramChannel, isATiktokChannel } = useInbox(
+  inboxId.value
+);

 const unsupportedMessageKey = computed(() => {
  if (isAFacebookInbox.value)
@@ -19,8 +16,6 @@ const unsupportedMessageKey = computed(() => {
  if (isAnInstagramChannel.value)
    return 'CONVERSATION.UNSUPPORTED_MESSAGE_INSTAGRAM';
  if (isATiktokChannel.value) return 'CONVERSATION.UNSUPPORTED_MESSAGE_TIKTOK';
-  if (isAWhatsAppChannel.value)
-    return 'CONVERSATION.UNSUPPORTED_MESSAGE_WHATSAPP';
  return 'CONVERSATION.UNSUPPORTED_MESSAGE';
 });
 </script>
@@ -2,27 +2,14 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-import { useMapGetter } from 'dashboard/composables/store';
 import { useMessageContext } from '../provider.js';
-import {
-  VOICE_CALL_STATUS,
-  VOICE_CALL_DIRECTION,
-  VOICE_CALL_OUTBOUND_INIT_STATUS,
-  VOICE_CALL_END_REASON,
-  MESSAGE_TYPES,
-  ATTACHMENT_TYPES,
-} from '../constants';
-import { useCallActions } from 'dashboard/composables/useCallSession';
-import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import { useCallsStore } from 'dashboard/stores/calls';
-import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
+import { VOICE_CALL_STATUS } from '../constants';
+import { useCallSession } from 'dashboard/composables/useCallSession';
 import { formatDuration } from 'shared/helpers/timeHelper';
-import { useAlert } from 'dashboard/composables';

 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';
-import NextButton from 'dashboard/components-next/button/Button.vue';

 const LABEL_MAP = {
  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
@@ -30,67 +17,39 @@ const LABEL_MAP = {
 };

 const ICON_MAP = {
-  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call-bold',
-  [VOICE_CALL_STATUS.COMPLETED]: 'i-ph-phone-bold',
-  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x-bold',
-  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x-bold',
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+};
+
+const BG_COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'bg-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'bg-n-teal-9 animate-pulse',
+  [VOICE_CALL_STATUS.COMPLETED]: 'bg-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'bg-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };

 const { t } = useI18n();
 const store = useStore();
-const {
-  call,
-  attachments,
-  contentAttributes,
-  conversationId,
-  currentUserId,
-  inboxId,
-  sender,
-  messageType,
-} = useMessageContext();
+const { call, conversationId, currentUserId, inboxId } = useMessageContext();
 const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallActions();
-const whatsappCallSession = useWhatsappCallSession();
-const callsStore = useCallsStore();
-const contactsUiFlags = useMapGetter('contacts/getUIFlags');
-const isInitiatingCall = computed(
-  () => contactsUiFlags.value?.isInitiatingCall || false
-);
+  useCallSession();

 const status = computed(() => call.value?.status);
-// Server-side call records use `outgoing`/`incoming`, while the Pinia store
-// and a few API hops normalise to `outbound`/`inbound`. Accept either so the
-// bubble label matches the message orientation no matter the source.
-const isOutbound = computed(() => {
-  const dir = call.value?.direction;
-  if (
-    dir === VOICE_CALL_DIRECTION.OUTGOING ||
-    dir === VOICE_CALL_DIRECTION.OUTBOUND
-  )
-    return true;
-  if (
-    dir === VOICE_CALL_DIRECTION.INCOMING ||
-    dir === VOICE_CALL_DIRECTION.INBOUND
-  )
-    return false;
-  // Fall back to the message orientation: agent-authored messages sit on the
-  // right (outbound) and contact-authored ones on the left.
-  return messageType.value === MESSAGE_TYPES.OUTGOING;
-});
-const isWhatsapp = computed(
-  () => call.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
-);
+const isOutbound = computed(() => call.value?.direction === 'outgoing');
 const isFailed = computed(() =>
  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
-const isMissedInbound = computed(() => isFailed.value && !isOutbound.value);
-const endReason = computed(() => call.value?.endReason);
-const wasDeclinedByAgent = computed(
-  () =>
-    isMissedInbound.value &&
-    endReason.value === VOICE_CALL_END_REASON.AGENT_REJECTED
-);
 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
@@ -107,107 +66,67 @@ const displayAgentName = computed(() => {
  return conversationAssignee.value?.name || null;
 });

-const audioAttachment = computed(() =>
-  (attachments?.value || []).find(a => a.fileType === ATTACHMENT_TYPES.AUDIO)
-);
-
-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));
-
-// Agent who handled the call (initiator on outbound, answerer on inbound), taken
-// strictly from the persisted accept fields — never the conversation's current
-// assignee, which would mis-attribute a historical call after a reassignment.
-const handlerName = computed(() => {
-  if (call.value?.acceptedByAgentName) return call.value.acceptedByAgentName;
-  if (!acceptedByAgentId.value) return null;
-  const agent = store.getters['agents/getAgentById'](acceptedByAgentId.value);
-  return agent?.available_name || agent?.name || null;
-});
-
-const handledBy = computed(() =>
-  handlerName.value
-    ? t('CONVERSATION.VOICE_CALL.HANDLED_BY', { agentName: handlerName.value })
-    : null
-);
-
 const labelKey = computed(() => {
  if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
-  if (isFailed.value) {
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
    return isOutbound.value
-      ? 'CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_LABEL'
-      : 'CONVERSATION.VOICE_CALL.MISSED_CALL';
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
  }
-  // RINGING or an as-yet-unknown/initial status: orient purely by direction so an
-  // outbound call never falls through to the "Incoming call" label.
-  return isOutbound.value
-    ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });

+const formattedDuration = computed(() =>
+  formatDuration(call.value?.durationSeconds)
+);
+
 const subtext = computed(() => {
-  // Completed: "Handled by {agent} · 0:42" (drops either part when absent).
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  }
  if (status.value === VOICE_CALL_STATUS.COMPLETED) {
-    return [handledBy.value, formattedDuration.value]
-      .filter(Boolean)
-      .join(' · ');
+    return formattedDuration.value;
  }
  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    return handledBy.value;
-  }
-  if (isFailed.value) {
-    // Missed/failed calls have no handler, so keep the reason rather than "Handled by".
-    if (isOutbound.value) {
-      return t('CONVERSATION.VOICE_CALL.NO_ANSWER_OUTBOUND_SUBTEXT');
+    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    if (didCurrentUserAnswer.value) {
+      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
    }
-    if (wasDeclinedByAgent.value && displayAgentName.value) {
-      return t('CONVERSATION.VOICE_CALL.MISSED_CALL_DECLINED_BY', {
+    if (displayAgentName.value) {
+      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
        agentName: displayAgentName.value,
      });
    }
-    return t('CONVERSATION.VOICE_CALL.MISSED_CALL_INBOUND_SUBTEXT');
+    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
  }
-  // RINGING or an as-yet-unknown/initial status.
-  if (isOutbound.value) {
-    return handledBy.value || t('CONVERSATION.VOICE_CALL.CALLING');
-  }
-  return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  return isFailed.value
+    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
+    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
 });

 const iconName = computed(() => {
  if (ICON_MAP[status.value]) return ICON_MAP[status.value];
-  return isOutbound.value
-    ? 'i-ph-phone-outgoing-bold'
-    : 'i-ph-phone-incoming-bold';
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
 });

-// Subtle icon container — matches the design's tonal swatch over the bubble bg.
-// Status drives the accent: teal for live, ruby for missed, neutral otherwise.
-const iconContainerClass = computed(() => {
-  if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    return 'bg-n-teal-3 text-n-teal-11';
-  }
-  if (status.value === VOICE_CALL_STATUS.RINGING) {
-    return 'bg-n-teal-3 text-n-teal-11';
-  }
-  if (isMissedInbound.value) {
-    return 'bg-n-alpha-2 text-n-ruby-9';
-  }
-  return 'bg-n-alpha-2 text-n-slate-12';
-});
+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;
@@ -216,12 +135,11 @@ const canJoinCall = computed(() => {
 });

 const recordingAttachment = computed(() => {
-  if (audioAttachment.value) return audioAttachment.value;
  const url = call.value?.recordingUrl;
  if (!url) return null;
  return {
    dataUrl: url,
-    fileType: ATTACHMENT_TYPES.AUDIO,
+    fileType: 'audio',
    extension: 'wav',
    transcribedText: call.value?.transcript || '',
  };
@@ -244,117 +162,48 @@ const handleJoinCall = async () => {
    callSid: callSid.value,
  });
 };
-
-const canCallBack = computed(
-  () =>
-    isMissedInbound.value &&
-    !!inboxId.value &&
-    !!conversationId.value &&
-    !hasActiveCall.value &&
-    !callsStore.hasIncomingCall
-);
-
-const handleCallBack = async () => {
-  if (!canCallBack.value || isInitiatingCall.value) return;
-  try {
-    if (isWhatsapp.value) {
-      const response = await whatsappCallSession.initiateOutboundCall(
-        conversationId.value
-      );
-      if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
-      // Permission template path returns no call id — show banner, no widget yet.
-      if (!response?.id) {
-        useAlert(
-          response?.status ===
-            VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
-            ? t('CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_PENDING')
-            : t('CONVERSATION.HEADER.WHATSAPP_CALL_PERMISSION_REQUESTED')
-        );
-        return;
-      }
-      callsStore.addCall({
-        callSid: response.call_id,
-        callId: response.id,
-        conversationId: conversationId.value,
-        inboxId: inboxId.value,
-        callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
-        provider: VOICE_CALL_PROVIDERS.WHATSAPP,
-      });
-      return;
-    }
-    const response = await store.dispatch('contacts/initiateCall', {
-      contactId: sender.value?.id,
-      inboxId: inboxId.value,
-      conversationId: conversationId.value,
-    });
-    callsStore.addCall({
-      callSid: response?.call_sid,
-      conversationId: response?.conversation_id ?? conversationId.value,
-      inboxId: inboxId.value,
-      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
-    });
-  } catch (error) {
-    useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
-  }
-};
 </script>

 <template>
-  <BaseBubble class="!p-3 !max-w-md min-w-[240px]" hide-meta>
-    <div class="flex flex-col gap-3 w-full">
-      <!-- Header row: icon + title + duration/subtext -->
-      <div class="flex gap-2.5 items-start">
+  <BaseBubble class="p-0 border-none" hide-meta>
+    <div class="flex overflow-hidden flex-col w-full max-w-sm">
+      <div class="flex gap-3 items-center p-3 w-full">
        <div
-          class="flex justify-center items-center rounded-xl size-11 shrink-0"
-          :class="iconContainerClass"
+          class="flex justify-center items-center rounded-full size-10 shrink-0"
+          :class="bgColor"
        >
-          <Icon class="size-4" :icon="iconName" />
+          <Icon
+            class="size-5"
+            :icon="iconName"
+            :class="{
+              'text-n-slate-1': status === VOICE_CALL_STATUS.COMPLETED,
+              'text-white': status !== VOICE_CALL_STATUS.COMPLETED,
+            }"
+          />
        </div>
-        <div class="flex flex-col flex-1 min-w-0 self-center">
-          <span
-            class="font-display text-sm font-medium leading-tight truncate tracking-tight"
-          >
+
+        <div class="flex overflow-hidden flex-col flex-grow">
+          <span class="text-sm font-medium truncate text-n-slate-12">
            {{ $t(labelKey) }}
          </span>
-          <span
-            v-if="subtext"
-            class="text-sm leading-tight truncate tracking-tight opacity-75"
-          >
+          <span v-if="subtext" class="text-xs text-n-slate-11">
            {{ subtext }}
          </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>

-      <!-- Audio player (when there's a recording) -->
-      <AudioChip
-        v-if="recordingAttachment"
-        :attachment="recordingAttachment"
-        show-transcribed-text
-      />
-
-      <!-- Call back button (missed inbound) -->
-      <NextButton
-        v-if="canCallBack"
-        type="button"
-        :label="$t('CONVERSATION.VOICE_CALL.CALL_BACK')"
-        icon="i-ph-phone-bold"
-        teal
-        class="!rounded-full"
-        :disabled="isInitiatingCall"
-        @click="handleCallBack"
-      />
-
-      <!-- Join call button (ringing inbound) -->
-      <NextButton
-        v-if="canJoinCall"
-        type="button"
-        :label="$t('CONVERSATION.VOICE_CALL.JOIN_CALL')"
-        icon="i-ph-phone-bold"
-        teal
-        class="!rounded-full"
-        :disabled="isJoining"
-        @click="handleJoinCall"
-      />
+      <div v-if="recordingAttachment" class="px-3 pb-3">
+        <AudioChip :attachment="recordingAttachment" />
+      </div>
    </div>
  </BaseBubble>
 </template>
@@ -31,17 +31,6 @@ const timeStampURL = computed(() => {
  return timeStampAppendedURL(attachment.dataUrl);
 });

-const TRANSCRIPT_PREVIEW_LENGTH = 200;
-const isTranscriptExpanded = ref(false);
-const isTranscriptLong = computed(
-  () => (attachment.transcribedText?.length || 0) > TRANSCRIPT_PREVIEW_LENGTH
-);
-const displayedTranscript = computed(() => {
-  const text = attachment.transcribedText || '';
-  if (!isTranscriptLong.value || isTranscriptExpanded.value) return text;
-  return `${text.slice(0, TRANSCRIPT_PREVIEW_LENGTH).trimEnd()}…`;
-});
-
 const audioPlayer = useTemplateRef('audioPlayer');

 const isPlaying = ref(false);
@@ -52,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(() => {
@@ -89,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;
 });

@@ -226,18 +189,7 @@ const downloadAudio = async () => {
      v-if="attachment.transcribedText && showTranscribedText"
      class="text-n-slate-12 p-3 text-sm bg-n-alpha-1 rounded-lg w-full break-words"
    >
-      {{ displayedTranscript }}
-      <button
-        v-if="isTranscriptLong"
-        class="block mt-1 p-0 border-0 bg-transparent text-n-slate-11 hover:text-n-slate-12 font-medium"
-        @click="isTranscriptExpanded = !isTranscriptExpanded"
-      >
-        {{
-          isTranscriptExpanded
-            ? $t('CONVERSATION.VOICE_CALL.TRANSCRIPT_SHOW_LESS')
-            : $t('CONVERSATION.VOICE_CALL.TRANSCRIPT_SHOW_MORE')
-        }}
-      </button>
+      {{ attachment.transcribedText }}
    </div>
  </div>
 </template>
@@ -88,18 +88,5 @@ export const VOICE_CALL_STATUS = {

 export const VOICE_CALL_DIRECTION = {
  INBOUND: 'inbound',
-  INCOMING: 'incoming',
-  OUTGOING: 'outgoing',
-  ONGOING: 'ongoing',
  OUTBOUND: 'outbound',
 };
-
-export const VOICE_CALL_OUTBOUND_INIT_STATUS = {
-  LOCKED: 'locked',
-  PERMISSION_REQUESTED: 'permission_requested',
-  PERMISSION_PENDING: 'permission_pending',
-};
-
-export const VOICE_CALL_END_REASON = {
-  AGENT_REJECTED: 'agent_rejected',
-};
@@ -175,9 +175,6 @@ useEventListener(document, 'touchend', onResizeEnd);

 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
-const allUnreadCount = useMapGetter(
-  'conversationUnreadCounts/getAllUnreadCount'
-);
 const getInboxUnreadCount = useMapGetter(
  'conversationUnreadCounts/getInboxUnreadCount'
 );
@@ -300,7 +297,6 @@ const menuItems = computed(() => {
        {
          name: 'All',
          label: t('SIDEBAR.ALL_CONVERSATIONS'),
-          badgeCount: allUnreadCount.value,
          activeOn: ['inbox_conversation'],
          to: accountScopedRoute('home'),
        },
@@ -145,6 +145,7 @@ const allowedMenuItems = computed(() => {
          :src="currentUser.avatar_url"
          :status="currentUserAvailability"
          class="flex-shrink-0"
+          rounded-full
        />
        <div v-if="!isCollapsed" class="min-w-0">
          <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
@@ -78,27 +78,26 @@ function changeAvailabilityStatus(availability) {
 <template>
  <DropdownSection class="[&>ul]:overflow-visible">
    <div class="grid gap-0">
-      <DropdownItem preserve-open class="gap-1">
-        <div class="flex-grow flex items-center gap-1 min-w-0">
+      <DropdownItem preserve-open>
+        <div class="flex-grow flex items-center gap-1">
          {{ $t('SIDEBAR.SET_YOUR_AVAILABILITY') }}
        </div>
-        <DropdownContainer class="shrink-0">
+        <DropdownContainer>
          <template #trigger="{ toggle }">
            <Button
              size="sm"
              color="slate"
              variant="faded"
+              class="min-w-[96px]"
              icon="i-lucide-chevron-down"
              trailing-icon
              @click="toggle"
            >
-              <div class="flex gap-1 items-center min-w-0 text-sm">
+              <div class="flex gap-1 items-center flex-grow text-sm">
                <div class="p-1 flex-shrink-0">
                  <div class="size-2 rounded-sm" :class="activeStatus.color" />
                </div>
-                <span class="truncate max-w-[7rem]">
-                  {{ activeStatus.label }}
-                </span>
+                <span>{{ activeStatus.label }}</span>
              </div>
            </Button>
          </template>
@@ -115,12 +114,12 @@ function changeAvailabilityStatus(availability) {
        </DropdownContainer>
      </DropdownItem>
      <DropdownItem>
-        <div class="flex-grow min-w-0">
+        <div class="flex-grow flex items-center gap-1">
          {{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}
          <Icon
            v-tooltip.top="$t('SIDEBAR.SET_AUTO_OFFLINE.INFO_SHORT')"
            icon="i-lucide-info"
-            class="inline-block align-middle ms-1 size-4 text-n-slate-10"
+            class="size-4 text-n-slate-10"
          />
        </div>
        <ToggleSwitch v-model="autoOfflineToggle" />
@@ -24,10 +24,6 @@ defineProps({
    type: Boolean,
    default: false,
  },
-  hasVoiceBadge: {
-    type: Boolean,
-    default: false,
-  },
 });

 const { t } = useI18n();
@@ -42,18 +38,10 @@ const { t } = useI18n();
      'cursor-not-allowed disabled:opacity-80': isComingSoon,
    }"
  >
-    <div class="relative">
-      <div
-        class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
-      >
-        <Icon :icon="icon" class="text-n-slate-10 size-6" />
-      </div>
-      <div
-        v-if="hasVoiceBadge"
-        class="absolute -top-1 ltr:-right-1 rtl:-left-1 flex size-4 items-center justify-center rounded-full bg-n-alpha-2 ring-2 ring-n-solid-1"
-      >
-        <Icon icon="i-lucide-audio-lines" class="text-n-slate-10 size-2.5" />
-      </div>
+    <div
+      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+    >
+      <Icon :icon="icon" class="text-n-slate-10 size-6" />
    </div>

    <div class="flex flex-col items-start gap-1.5">
@@ -151,9 +151,6 @@ const activeFolder = computed(() => {
  return undefined;
 });

-const getContact = useMapGetter('contacts/getContact');
-const folderContactId = useMapGetter('customViews/getActiveFolderContactId');
-
 const activeFolderName = computed(() => {
  return activeFolder.value?.name;
 });
@@ -459,7 +456,6 @@ function setParamsForEditFolderModal() {
    inboxes: inboxesList.value,
    labels: labels.value,
    campaigns: campaigns.value,
-    contacts: [getContact.value(folderContactId.value)],
    languages: languages,
    countries: countries,
    priority: [
@@ -14,11 +14,11 @@ const props = defineProps({
 const emit = defineEmits(['removeAttachment']);

 const nonRecordedAudioAttachments = computed(() => {
-  return props.attachments.filter(attachment => !attachment?.isVoiceMessage);
+  return props.attachments.filter(attachment => !attachment?.isRecordedAudio);
 });

 const recordedAudioAttachments = computed(() =>
-  props.attachments.filter(attachment => attachment.isVoiceMessage)
+  props.attachments.filter(attachment => attachment.isRecordedAudio)
 );

 const onRemoveAttachment = itemIndex => {
@@ -52,16 +52,12 @@ const isActive = computed(() => {
    return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
  }

-  if (key === 'voice') {
-    return props.enabledFeatures.channel_voice;
+  if (key === 'app_store') {
+    return props.enabledFeatures.channel_app_store;
  }

-  if (key === 'whatsapp_call') {
-    return (
-      props.enabledFeatures.channel_voice &&
-      !!window.chatwootConfig?.whatsappAppId &&
-      window.chatwootConfig.whatsappAppId !== 'none'
-    );
+  if (key === 'voice') {
+    return props.enabledFeatures.channel_voice;
  }

  return [
@@ -75,6 +71,7 @@ const isActive = computed(() => {
    'instagram',
    'tiktok',
    'voice',
+    'google_play',
  ].includes(key);
 });

@@ -86,13 +83,8 @@ const isComingSoon = computed(() => {
 });

 const isBeta = computed(() => {
-  return ['tiktok', 'voice', 'whatsapp_call'].includes(props.channel.key);
-});
-
-const hasVoiceBadge = computed(() => {
-  return (
-    ['voice', 'whatsapp_call'].includes(props.channel.key) &&
-    !!props.enabledFeatures.channel_voice
+  return ['tiktok', 'app_store', 'voice', 'google_play'].includes(
+    props.channel.key
  );
 });

@@ -110,7 +102,6 @@ const onItemClick = () => {
    :icon="channel.icon"
    :is-coming-soon="isComingSoon"
    :is-beta="isBeta"
-    :has-voice-badge="hasVoiceBadge"
    :disabled="!isActive"
    @click="onItemClick"
  />
@@ -0,0 +1,185 @@
+<script setup>
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { useCallSession } from 'dashboard/composables/useCallSession';
+import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilityHelper';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+const router = useRouter();
+const store = useStore();
+
+const {
+  activeCall,
+  incomingCalls,
+  hasActiveCall,
+  isJoining,
+  joinCall,
+  endCall: endCallSession,
+  rejectIncomingCall,
+  dismissCall,
+  formattedCallDuration,
+} = useCallSession();
+
+const getCallInfo = call => {
+  const conversation = store.getters.getConversationById(call?.conversationId);
+  const inbox = store.getters['inboxes/getInbox'](conversation?.inbox_id);
+  const sender = conversation?.meta?.sender;
+  return {
+    conversation,
+    inbox,
+    contactName: sender?.name || sender?.phone_number || 'Unknown caller',
+    inboxName: inbox?.name || 'Customer support',
+    avatar: sender?.avatar || sender?.thumbnail,
+  };
+};
+
+const handleEndCall = async () => {
+  const call = activeCall.value;
+  if (!call) return;
+
+  const inboxId = call.inboxId || getCallInfo(call).conversation?.inbox_id;
+  if (!inboxId) return;
+
+  await endCallSession({
+    conversationId: call.conversationId,
+    inboxId,
+    callSid: call.callSid,
+  });
+};
+
+const handleJoinCall = async call => {
+  const { conversation } = getCallInfo(call);
+  if (!call || !conversation || isJoining.value) return;
+
+  // End current active call before joining new one
+  if (hasActiveCall.value) {
+    await handleEndCall();
+  }
+
+  const result = await joinCall({
+    conversationId: call.conversationId,
+    inboxId: conversation.inbox_id,
+    callSid: call.callSid,
+  });
+
+  if (result) {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: call.conversationId },
+    });
+  }
+};
+
+// Auto-join outbound calls when window is visible
+watch(
+  () => incomingCalls.value[0],
+  call => {
+    if (
+      call?.callDirection === 'outbound' &&
+      !hasActiveCall.value &&
+      WindowVisibilityHelper.isWindowVisible()
+    ) {
+      handleJoinCall(call);
+    }
+  },
+  { immediate: true }
+);
+</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-72"
+  >
+    <!-- Incoming Calls (shown above active call) -->
+    <div
+      v-for="call in hasActiveCall ? incomingCalls : []"
+      :key="call.callSid"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <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 class="text-xs text-n-slate-11 truncate">
+          {{ getCallInfo(call).inboxName }}
+        </p>
+      </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="dismissCall(call.callSid)"
+        >
+          <i class="text-lg text-white i-ph-phone-x-bold" />
+        </button>
+        <button
+          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-lg text-white i-ph-phone-bold" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Main Call Widget -->
+    <div
+      v-if="hasActiveCall || incomingCalls.length"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <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">
+          {{
+            incomingCalls[0]?.callDirection === 'outbound'
+              ? $t('CONVERSATION.VOICE_WIDGET.OUTGOING_CALL')
+              : $t('CONVERSATION.VOICE_WIDGET.INCOMING_CALL')
+          }}
+        </p>
+      </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>
+</template>
@@ -4,7 +4,7 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import WaveSurfer from 'wavesurfer.js';
 import RecordPlugin from 'wavesurfer.js/dist/plugins/record.js';
 import { format, intervalToDuration } from 'date-fns';
-import { convertAudio } from './utils/audioConversionUtils';
+import { convertAudio } from './utils/mp3ConversionUtils';

 const props = defineProps({
  audioRecordFormat: {
@@ -18,7 +18,6 @@ const emit = defineEmits([
  'finishRecord',
  'pause',
  'play',
-  'recordError',
 ]);

 const waveformContainer = ref(null);
@@ -27,7 +26,6 @@ const record = ref(null);
 const isRecording = ref(false);
 const isPlaying = ref(false);
 const hasRecording = ref(false);
-const recordedAudioUrl = ref(null);

 const formatTimeProgress = time => {
  const duration = intervalToDuration({ start: 0, end: time });
@@ -37,28 +35,6 @@ const formatTimeProgress = time => {
  );
 };

-const AUDIO_EXTENSION_MAP = {
-  'audio/ogg': 'ogg',
-  'audio/mp3': 'mp3',
-  'audio/mpeg': 'mp3',
-  'audio/wav': 'wav',
-  'audio/webm': 'webm',
-};
-
-const getRecordPluginOptions = audioFormat => {
-  const options = {
-    scrollingWaveform: true,
-    renderRecordedAudio: false,
-  };
-  if (
-    audioFormat === 'audio/ogg' &&
-    MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
-  ) {
-    options.mimeType = 'audio/ogg;codecs=opus';
-  }
-  return options;
-};
-
 const initWaveSurfer = () => {
  wavesurfer.value = WaveSurfer.create({
    container: waveformContainer.value,
@@ -69,7 +45,10 @@ const initWaveSurfer = () => {
    barGap: 1,
    barRadius: 2,
    plugins: [
-      RecordPlugin.create(getRecordPluginOptions(props.audioRecordFormat)),
+      RecordPlugin.create({
+        scrollingWaveform: true,
+        renderRecordedAudio: false,
+      }),
    ],
  });

@@ -83,34 +62,21 @@ const initWaveSurfer = () => {
  });

  record.value.on('record-end', async blob => {
-    try {
-      const audioBlob = await convertAudio(blob, props.audioRecordFormat);
-      // Use the converted blob's actual type, which may differ from the
-      // requested format when the browser can't produce it (e.g. Safari falls
-      // back to MP3 instead of OGG). This keeps the filename, content type, and
-      // voice-note flag consistent with the real bytes.
-      const audioType = audioBlob.type || props.audioRecordFormat;
-      const ext = AUDIO_EXTENSION_MAP[audioType] || 'mp3';
-      const fileName = `${getUuid()}.${ext}`;
-      const file = new File([audioBlob], fileName, {
-        type: audioType,
-      });
-      if (recordedAudioUrl.value) URL.revokeObjectURL(recordedAudioUrl.value);
-      recordedAudioUrl.value = URL.createObjectURL(audioBlob);
-      wavesurfer.value.load(recordedAudioUrl.value);
-      emit('finishRecord', {
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        file,
-      });
-      hasRecording.value = true;
-      isRecording.value = false;
-    } catch (error) {
-      isRecording.value = false;
-      hasRecording.value = false;
-      emit('recordError', { error });
-    }
+    const audioUrl = URL.createObjectURL(blob);
+    const audioBlob = await convertAudio(blob, props.audioRecordFormat);
+    const fileName = `${getUuid()}.mp3`;
+    const file = new File([audioBlob], fileName, {
+      type: props.audioRecordFormat,
+    });
+    wavesurfer.value.load(audioUrl);
+    emit('finishRecord', {
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      file,
+    });
+    hasRecording.value = true;
+    isRecording.value = false;
  });

  record.value.on('record-progress', time => {
@@ -143,10 +109,6 @@ onMounted(() => {
 });

 onUnmounted(() => {
-  if (recordedAudioUrl.value) {
-    URL.revokeObjectURL(recordedAudioUrl.value);
-    recordedAudioUrl.value = null;
-  }
  if (wavesurfer.value) {
    wavesurfer.value.destroy();
  }
@@ -32,6 +32,7 @@ import {
  CONVERSATION_EVENTS,
  CAPTAIN_EVENTS,
 } from 'dashboard/helper/AnalyticsHelper/events';
+import { MESSAGE_EDITOR_IMAGE_RESIZES } from 'dashboard/constants/editor';

 import {
  messageSchema,
@@ -42,7 +43,6 @@ import {
  MessageMarkdownSerializer,
  EditorState,
  Selection,
-  imageResizeView,
 } from '@chatwoot/prosemirror-schema';
 import {
  suggestionsPlugin,
@@ -57,6 +57,7 @@ import {
  insertAtCursor,
  removeSignature as removeSignatureHelper,
  scrollCursorIntoView,
+  setURLWithQueryAndSize,
  getFormattingForEditor,
  getSelectionCoords,
  calculateMenuPosition,
@@ -71,7 +72,6 @@ import {
 import { createTypingIndicator } from '@chatwoot/utils';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';

 const props = defineProps({
  modelValue: { type: String, default: '' },
@@ -93,6 +93,7 @@ const props = defineProps({
  channelType: { type: String, default: '' },
  conversationId: { type: Number, default: null },
  medium: { type: String, default: '' },
+  showImageResizeToolbar: { type: Boolean, default: false }, // A kill switch to show or hide the image toolbar
  focusOnMount: { type: Boolean, default: true },
 });

@@ -118,14 +119,6 @@ const TYPING_INDICATOR_IDLE_TIME = 4000;
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
 const DEFAULT_FORMATTING = 'Context::Default';
 const PRIVATE_NOTE_FORMATTING = 'Context::PrivateNote';
-const MESSAGE_SIGNATURE_FORMATTING = 'Context::MessageSignature';
-const INLINE_IMAGE_PASTE_TYPES = [
-  'image/png',
-  'image/jpeg',
-  'image/jpg',
-  'image/gif',
-  'image/webp',
-];

 const effectiveChannelType = computed(() =>
  getEffectiveChannelType(props.channelType, props.medium)
@@ -199,8 +192,12 @@ const cannedSearchTerm = ref('');
 const variableSearchTerm = ref('');
 const emojiSearchTerm = ref('');
 const range = ref(null);
+const isImageNodeSelected = ref(false);
+const toolbarPosition = ref({ top: 0, left: 0 });
+const selectedImageNode = ref(null);
 const isTextSelected = ref(false); // Tracks text selection and prevents unnecessary re-renders on mouse selection
 const showSelectionMenu = ref(false);
+const sizes = MESSAGE_EDITOR_IMAGE_RESIZES;

 // element ref
 const editorRoot = useTemplateRef('editorRoot');
@@ -478,6 +475,16 @@ function removeSignature() {
  reloadState(content);
 }

+function setToolbarPosition() {
+  const editorRect = editorRoot.value.getBoundingClientRect();
+  const rect = selectedImageNode.value.getBoundingClientRect();
+
+  toolbarPosition.value = {
+    top: `${rect.top - editorRect.top - 30}px`,
+    left: `${rect.left - editorRect.left - 4}px`,
+  };
+}
+
 function setMenubarPosition({ selection } = {}) {
  const wrapper = editorRoot.value;
  if (!selection || !wrapper) return;
@@ -513,6 +520,30 @@ function checkSelection(editorState) {
  if (hasSelection) setMenubarPosition(editorState);
 }

+function setURLWithQueryAndImageSize(size) {
+  if (!props.showImageResizeToolbar) {
+    return;
+  }
+  setURLWithQueryAndSize(selectedImageNode.value, size, editorView);
+  isImageNodeSelected.value = false;
+}
+
+function isEditorMouseFocusedOnAnImage() {
+  if (!props.showImageResizeToolbar) {
+    return;
+  }
+  selectedImageNode.value = document.querySelector(
+    'img.ProseMirror-selectednode'
+  );
+  if (selectedImageNode.value) {
+    isImageNodeSelected.value = !!selectedImageNode.value;
+    // Get the position of the selected node
+    setToolbarPosition();
+  } else {
+    isImageNodeSelected.value = false;
+  }
+}
+
 function emitOnChange() {
  emit('input', contentFromEditor());
  emit('update:modelValue', contentFromEditor());
@@ -532,6 +563,21 @@ function toggleSignatureInEditor(signatureEnabled) {
  emitOnChange();
 }

+function updateImgToolbarOnDelete() {
+  // check if the selected node is present or not on keyup
+  // this is needed because the user can select an image and then delete it
+  // in that case, the selected node will be null and we need to hide the toolbar
+  // otherwise, the toolbar will be visible even when the image is deleted and cause some errors
+  if (selectedImageNode.value) {
+    const hasImgSelectedNode = document.querySelector(
+      'img.ProseMirror-selectednode'
+    );
+    if (!hasImgSelectedNode) {
+      isImageNodeSelected.value = false;
+    }
+  }
+}
+
 function isEnterToSendEnabled() {
  return isEditorHotKeyEnabled('enter');
 }
@@ -540,6 +586,17 @@ function isCmdPlusEnterToSendEnabled() {
  return isEditorHotKeyEnabled('cmd_enter');
 }

+useKeyboardEvents({
+  'Alt+KeyP': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: true,
+  },
+  'Alt+KeyL': {
+    action: focusEditorInputField,
+    allowOnFocusedInput: true,
+  },
+});
+
 function onImageInsertInEditor(fileUrl) {
  const { tr } = editorView.state;

@@ -560,11 +617,7 @@ async function uploadImageToStorage(file) {
      onImageInsertInEditor(fileUrl);
    }
    useAlert(
-      props.channelType === MESSAGE_SIGNATURE_FORMATTING
-        ? t(
-            'PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS'
-          )
-        : t('CONVERSATION.REPLYBOX.IMAGE_UPLOAD_SUCCESS')
+      t('PROFILE_SETTINGS.FORM.MESSAGE_SIGNATURE_SECTION.IMAGE_UPLOAD_SUCCESS')
    );
  } catch (error) {
    useAlert(
@@ -573,8 +626,8 @@ async function uploadImageToStorage(file) {
  }
 }

-function uploadImageIfWithinSizeLimit(file) {
-  if (!file) return;
+function onFileChange() {
+  const file = imageUpload.value.files[0];
  if (checkFileSizeLimit(file, MAXIMUM_FILE_UPLOAD_SIZE)) {
    uploadImageToStorage(file);
  } else {
@@ -587,61 +640,10 @@ function uploadImageIfWithinSizeLimit(file) {
      )
    );
  }
+
+  imageUpload.value = '';
 }

-function onFileChange() {
-  const input = imageUpload.value;
-  uploadImageIfWithinSizeLimit(input.files[0]);
-  input.value = '';
-}
-
-const allowsInlineImagePaste = computed(
-  () =>
-    !props.isPrivate &&
-    (props.channelType === INBOX_TYPES.EMAIL ||
-      props.channelType === INBOX_TYPES.WEB)
-);
-
-// Shift+Cmd/Ctrl+V on email/website: upload a clipboard image inline. This
-// gesture's native paste event carries no image, so clipboard.read() is the
-// only way to get the bytes. No preventDefault: text still pastes natively.
-async function pasteInlineImageFromClipboard() {
-  if (!editorView?.hasFocus()) return;
-  if (!allowsInlineImagePaste.value || !navigator.clipboard?.read) return;
-  try {
-    const items = await navigator.clipboard.read();
-    const imageItem = items.find(item =>
-      item.types.some(type => INLINE_IMAGE_PASTE_TYPES.includes(type))
-    );
-    if (!imageItem) return;
-    const imageType = imageItem.types.find(type =>
-      INLINE_IMAGE_PASTE_TYPES.includes(type)
-    );
-    const blob = await imageItem.getType(imageType);
-    uploadImageIfWithinSizeLimit(
-      new File([blob], 'pasted-image', { type: imageType })
-    );
-  } catch (error) {
-    // clipboard-read denied/unfocused (NotAllowedError): image can't be read.
-    // Text paste is unaffected — ProseMirror handles it from the native event.
-  }
-}
-
-useKeyboardEvents({
-  'Alt+KeyP': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-  'Alt+KeyL': {
-    action: focusEditorInputField,
-    allowOnFocusedInput: false,
-  },
-  '$mod+Shift+KeyV': {
-    action: pasteInlineImageFromClipboard,
-    allowOnFocusedInput: true,
-  },
-});
-
 function handleLineBreakWhenEnterToSendEnabled(event) {
  if (
    hasPressedEnterAndNotCmdOrShift(event) &&
@@ -734,9 +736,6 @@ function createEditorView() {
  editorView = new EditorView(editor.value, {
    state: state,
    editable: () => !props.disabled,
-    nodeViews: {
-      image: imageResizeView,
-    },
    dispatchTransaction: tx => {
      state = state.apply(tx);
      editorView.updateState(state);
@@ -749,10 +748,12 @@ function createEditorView() {
      keyup: () => {
        if (!props.disabled) {
          typingIndicator.start();
+          updateImgToolbarOnDelete();
        }
      },
      keydown: (view, event) => !props.disabled && onKeydown(event),
      focus: () => !props.disabled && emit('focus'),
+      click: () => !props.disabled && isEditorMouseFocusedOnAnImage(),
      blur: () => {
        if (props.disabled) return;
        typingIndicator.stop();
@@ -917,6 +918,23 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
      @change="onFileChange"
    />
    <div ref="editor" />
+    <div
+      v-show="isImageNodeSelected && showImageResizeToolbar"
+      class="absolute shadow-md rounded-[6px] flex gap-1 py-1 px-1 bg-n-solid-3 outline outline-1 outline-n-weak text-n-slate-12"
+      :style="{
+        top: toolbarPosition.top,
+        left: toolbarPosition.left,
+      }"
+    >
+      <button
+        v-for="size in sizes"
+        :key="size.name"
+        class="text-xs font-medium rounded-[4px] outline outline-1 outline-n-strong px-1.5 py-0.5 hover:bg-n-slate-5"
+        @click="setURLWithQueryAndImageSize(size)"
+      >
+        {{ size.name }}
+      </button>
+    </div>
    <slot name="footer" />
  </div>
 </template>
@@ -979,6 +997,10 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
        @apply text-n-slate-11;
      }
    }
+
+    ol li {
+      @apply list-item list-decimal;
+    }
  }
 }

@@ -105,11 +105,11 @@ export default {
    const keyboardEvents = {
      'Alt+KeyP': {
        action: () => handleNoteClick(),
-        allowOnFocusedInput: false,
+        allowOnFocusedInput: true,
      },
      'Alt+KeyL': {
        action: () => handleReplyClick(),
-        allowOnFocusedInput: false,
+        allowOnFocusedInput: true,
      },
    };
    useKeyboardEvents(keyboardEvents);
@@ -1,7 +1,5 @@
 import lamejs from '@breezystack/lamejs';

-import { remuxWebmToOgg } from './webmOpusToOgg';
-
 const writeString = (view, offset, string) => {
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < string.length; i++) {
@@ -141,20 +139,6 @@ export const convertAudio = async (inputBlob, outputFormat, bitrate = 128) => {
    audio = await convertToWav(inputBlob);
  } else if (outputFormat === 'audio/mp3') {
    audio = await convertToMp3(inputBlob, bitrate);
-  } else if (outputFormat === 'audio/ogg') {
-    const inputType = inputBlob.type.split(';')[0].trim();
-    if (inputType === 'audio/webm' || inputType === 'video/webm') {
-      audio = await remuxWebmToOgg(inputBlob);
-    } else if (inputType === 'audio/ogg') {
-      audio = inputBlob;
-    } else {
-      // Browsers that record neither WebM nor OGG (e.g. Safari records
-      // audio/mp4) cannot produce OGG/Opus. Fall back to MP3 so the recording
-      // still sends as a regular audio message instead of failing. The caller
-      // keys the voice-note flag off the returned blob type, so an MP3 result
-      // is never mislabeled as an OGG/Opus voice note.
-      audio = await convertToMp3(inputBlob, bitrate);
-    }
  } else {
    throw new Error('Unsupported output format');
  }
@@ -1,457 +0,0 @@
-/* eslint-disable no-bitwise */
-/**
- * WebM/Opus → OGG/Opus remuxer
- *
- * Chrome's MediaRecorder produces WebM containers even when
- * `audio/ogg;codecs=opus` is requested. WhatsApp Cloud API requires
- * proper OGG/Opus files for voice messages.
- *
- * This module extracts raw Opus packets from the WebM (EBML) container
- * and repackages them into a valid OGG bitstream. The audio data itself
- * is never re-encoded — only the container format changes.
- *
- * References:
- *   EBML (container for WebM):   RFC 8794 — https://www.rfc-editor.org/rfc/rfc8794
- *   Matroska/WebM elements:      https://www.matroska.org/technical/elements.html
- *   OGG bitstream framing:       RFC 3533 — https://www.rfc-editor.org/rfc/rfc3533
- *   Opus codec:                  RFC 6716 — https://www.rfc-editor.org/rfc/rfc6716
- *   Opus in OGG (OpusHead/Tags): RFC 7845 — https://www.rfc-editor.org/rfc/rfc7845
- */
-
-// ======================== EBML / WebM parser ========================
-
-const EBML_IDS = {
-  Segment: 0x18538067,
-  SegmentInfo: 0x1549a966,
-  Tracks: 0x1654ae6b,
-  TrackEntry: 0xae,
-  CodecPrivate: 0x63a2,
-  Audio: 0xe1,
-  SamplingFrequency: 0xb5,
-  Channels: 0x9f,
-  Cluster: 0x1f43b675,
-  Timecode: 0xe7,
-  SimpleBlock: 0xa3,
-  BlockGroup: 0xa0,
-  Block: 0xa1,
-};
-
-const MASTER_ELEMENTS = new Set([
-  0x1a45dfa3, // EBML header
-  EBML_IDS.Segment,
-  EBML_IDS.SegmentInfo,
-  EBML_IDS.Tracks,
-  EBML_IDS.TrackEntry,
-  EBML_IDS.Audio,
-  EBML_IDS.Cluster,
-  EBML_IDS.BlockGroup,
-]);
-
-/** Read an EBML variable-length integer (data size). */
-function readVint(data, pos) {
-  if (pos >= data.length) return null;
-  const first = data[pos];
-  if (first === 0) return null;
-
-  let len = 1;
-  let mask = 0x80;
-  while (len <= 8 && !(first & mask)) {
-    len += 1;
-    mask >>= 1;
-  }
-  if (len > 8 || pos + len > data.length) return null;
-
-  let value = first & (mask - 1);
-  for (let i = 1; i < len; i += 1) {
-    value = value * 256 + data[pos + i];
-  }
-  return { value, length: len };
-}
-
-/** Read an EBML element ID (leading marker bits are kept). */
-function readElementId(data, pos) {
-  if (pos >= data.length) return null;
-  const first = data[pos];
-  if (first === 0) return null;
-
-  let len = 1;
-  let mask = 0x80;
-  while (len <= 4 && !(first & mask)) {
-    len += 1;
-    mask >>= 1;
-  }
-  if (len > 4 || pos + len > data.length) return null;
-
-  let id = first;
-  for (let i = 1; i < len; i += 1) {
-    id = id * 256 + data[pos + i];
-  }
-  return { id, length: len };
-}
-
-function readUintBE(data, offset, length) {
-  let v = 0;
-  for (let i = 0; i < length; i += 1) v = v * 256 + data[offset + i];
-  return v;
-}
-
-function readFloatBE(data, offset, length) {
-  if (length !== 4 && length !== 8) return NaN;
-  const buf = new ArrayBuffer(length);
-  const u8 = new Uint8Array(buf);
-  for (let i = 0; i < length; i += 1) u8[i] = data[offset + i];
-  const view = new DataView(buf);
-  return length === 4 ? view.getFloat32(0) : view.getFloat64(0);
-}
-
-/** Extract the raw Opus frame from a SimpleBlock / Block element. */
-function extractFrameFromBlock(data, offset, end) {
-  const trackVint = readVint(data, offset);
-  if (!trackVint) return null;
-  let pos = offset + trackVint.length;
-
-  // int16 relative timecode (big-endian, signed) – skip
-  pos += 2;
-  // Flags byte – skip. Lacing (Xiph/EBML/fixed-size) is NOT supported;
-  // this assumes single-frame blocks as produced by MediaRecorder.
-  const flags = data[pos];
-  const lacingBits = (flags >> 1) & 0x03;
-  if (lacingBits !== 0) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      'webmOpusToOgg: laced SimpleBlock detected (unsupported), frame may be invalid'
-    );
-  }
-  pos += 1;
-
-  if (pos >= end) return null;
-  return data.slice(pos, end);
-}
-
-/**
- * Walk the EBML tree and collect metadata + Opus frames.
- * We only descend into master elements and only extract the fields we need.
- */
-function parseWebM(buffer) {
-  const data = new Uint8Array(buffer);
-  const result = {
-    channels: 1,
-    sampleRate: 48000,
-    codecPrivate: null,
-    frames: [],
-  };
-
-  function walk(start, end) {
-    let pos = start;
-    while (pos < end) {
-      const idRes = readElementId(data, pos);
-      if (!idRes) break;
-      pos += idRes.length;
-
-      const sizeRes = readVint(data, pos);
-      if (!sizeRes) break;
-      pos += sizeRes.length;
-
-      // Handle "unknown size" (all-ones VINT) by treating it as the rest of the parent
-      // Use Math.pow instead of bit-shift to avoid 32-bit overflow for 5+ byte VINTs
-      const maxVint = 2 ** (7 * sizeRes.length) - 1;
-      const elEnd =
-        sizeRes.value === maxVint ? end : Math.min(pos + sizeRes.value, end);
-
-      if (MASTER_ELEMENTS.has(idRes.id)) {
-        walk(pos, elEnd);
-      } else {
-        switch (idRes.id) {
-          case EBML_IDS.Channels:
-            result.channels = readUintBE(data, pos, sizeRes.value);
-            break;
-          case EBML_IDS.SamplingFrequency:
-            result.sampleRate = readFloatBE(data, pos, sizeRes.value);
-            break;
-          case EBML_IDS.CodecPrivate:
-            result.codecPrivate = data.slice(pos, elEnd);
-            break;
-          case EBML_IDS.SimpleBlock:
-          case EBML_IDS.Block: {
-            const frame = extractFrameFromBlock(data, pos, elEnd);
-            if (frame && frame.length > 0) result.frames.push(frame);
-            break;
-          }
-          default:
-            break;
-        }
-      }
-      pos = elEnd;
-    }
-  }
-
-  walk(0, data.length);
-  return result;
-}
-
-// ======================== OGG writer ========================
-
-/** OGG CRC-32 table (polynomial 0x04C11DB7). */
-const CRC_TABLE = (() => {
-  const t = new Uint32Array(256);
-  for (let i = 0; i < 256; i += 1) {
-    let c = i << 24;
-    for (let j = 0; j < 8; j += 1) {
-      c = ((c << 1) ^ (c & 0x80000000 ? 0x04c11db7 : 0)) >>> 0;
-    }
-    t[i] = c;
-  }
-  return t;
-})();
-
-function oggCrc32(bytes) {
-  let crc = 0;
-  for (let i = 0; i < bytes.length; i += 1) {
-    crc = (CRC_TABLE[((crc >>> 24) ^ bytes[i]) & 0xff] ^ (crc << 8)) >>> 0;
-  }
-  return crc;
-}
-
-/**
- * Build one OGG page.
- *
- * @param {number}       headerType      0x02 = BOS, 0x04 = EOS, 0x00 = normal
- * @param {number}       granulePosition 48 kHz sample count
- * @param {number}       serialNumber    logical stream id
- * @param {number}       pageSeq         page sequence counter
- * @param {Uint8Array[]} packets         one or more complete Opus packets
- */
-function createOggPage(
-  headerType,
-  granulePosition,
-  serialNumber,
-  pageSeq,
-  packets
-) {
-  // Build the lacing / segment table
-  const segTable = [];
-  let dataLen = 0;
-  packets.forEach(pkt => {
-    let rem = pkt.length;
-    while (rem >= 255) {
-      segTable.push(255);
-      rem -= 255;
-    }
-    segTable.push(rem); // final segment (0 when pkt.length is a multiple of 255)
-    dataLen += pkt.length;
-  });
-
-  const hdrLen = 27 + segTable.length;
-  const page = new Uint8Array(hdrLen + dataLen);
-  const dv = new DataView(page.buffer);
-
-  // Capture pattern
-  page.set([0x4f, 0x67, 0x67, 0x53]); // "OggS"
-  page[4] = 0; // version
-  page[5] = headerType;
-
-  // Granule position (int64 LE)
-  dv.setUint32(6, granulePosition & 0xffffffff, true);
-  dv.setUint32(
-    10,
-    Math.floor(granulePosition / 0x100000000) & 0xffffffff,
-    true
-  );
-
-  dv.setUint32(14, serialNumber, true); // serial
-  dv.setUint32(18, pageSeq, true); // page sequence
-  dv.setUint32(22, 0, true); // CRC placeholder
-
-  page[26] = segTable.length;
-  for (let i = 0; i < segTable.length; i += 1) page[27 + i] = segTable[i];
-
-  let off = hdrLen;
-  packets.forEach(pkt => {
-    page.set(pkt, off);
-    off += pkt.length;
-  });
-
-  // Fill in the CRC
-  dv.setUint32(22, oggCrc32(page), true);
-  return page;
-}
-
-// ======================== Opus helpers ========================
-
-/** Lookup table: frame duration in ms for each Opus TOC config index (0-31). */
-const OPUS_FRAME_MS = [
-  10,
-  20,
-  40,
-  60, // 0-3   SILK NB
-  10,
-  20,
-  40,
-  60, // 4-7   SILK MB
-  10,
-  20,
-  40,
-  60, // 8-11  SILK WB
-  10,
-  20, // 12-13 Hybrid SWB
-  10,
-  20, // 14-15 Hybrid FB
-  2.5,
-  5,
-  10,
-  20, // 16-19 CELT NB
-  2.5,
-  5,
-  10,
-  20, // 20-23 CELT WB
-  2.5,
-  5,
-  10,
-  20, // 24-27 CELT SWB
-  2.5,
-  5,
-  10,
-  20, // 28-31 CELT FB
-];
-
-/** Return the total number of 48 kHz PCM samples represented by an Opus packet. */
-function opusPacketSamples(pkt) {
-  if (!pkt || pkt.length === 0) return 960; // default 20 ms
-  const toc = pkt[0];
-  const config = (toc >> 3) & 0x1f;
-  const code = toc & 0x03;
-
-  const samplesPerFrame = ((OPUS_FRAME_MS[config] || 20) * 48000) / 1000;
-  let frameCount;
-  if (code <= 1) frameCount = code + 1;
-  else if (code === 2) frameCount = 2;
-  else frameCount = pkt.length >= 2 ? pkt[1] & 0x3f : 1;
-
-  return samplesPerFrame * frameCount;
-}
-
-function buildOpusHead(channels, sampleRate, preSkip) {
-  const buf = new Uint8Array(19);
-  const dv = new DataView(buf.buffer);
-  buf.set(new TextEncoder().encode('OpusHead'));
-  buf[8] = 1; // version
-  buf[9] = channels;
-  dv.setUint16(10, preSkip, true);
-  dv.setUint32(12, sampleRate, true);
-  dv.setInt16(16, 0, true); // output gain
-  buf[18] = 0; // channel mapping family
-  return buf;
-}
-
-function buildOpusTags() {
-  const vendor = new TextEncoder().encode('chatwoot');
-  const buf = new Uint8Array(8 + 4 + vendor.length + 4);
-  const dv = new DataView(buf.buffer);
-  buf.set(new TextEncoder().encode('OpusTags'));
-  dv.setUint32(8, vendor.length, true);
-  buf.set(vendor, 12);
-  dv.setUint32(12 + vendor.length, 0, true); // 0 user comments
-  return buf;
-}
-
-// ======================== Public API ========================
-
-const MAX_FRAMES_PER_PAGE = 50; // ~1 s at 20 ms/frame
-const MAX_SEGMENTS_PER_PAGE = 255;
-
-/**
- * Remux a WebM/Opus blob into an OGG/Opus blob.
- * If the input is already OGG (starts with "OggS"), it is returned as-is.
- *
- * @param {Blob} webmBlob
- * @returns {Promise<Blob>} OGG/Opus blob
- */
-export async function remuxWebmToOgg(webmBlob) {
-  const buffer = await webmBlob.arrayBuffer();
-  const bytes = new Uint8Array(buffer);
-
-  // Already OGG? Return unchanged.
-  if (
-    bytes.length >= 4 &&
-    bytes[0] === 0x4f &&
-    bytes[1] === 0x67 &&
-    bytes[2] === 0x67 &&
-    bytes[3] === 0x53
-  ) {
-    return webmBlob;
-  }
-
-  const { channels, sampleRate, codecPrivate, frames } = parseWebM(buffer);
-  if (frames.length === 0) {
-    throw new Error('No Opus frames found in WebM input');
-  }
-
-  // Extract pre-skip from the WebM CodecPrivate (which IS the OpusHead)
-  let preSkip = 312;
-  if (codecPrivate && codecPrivate.length >= 12) {
-    const magic = new TextDecoder().decode(codecPrivate.slice(0, 8));
-    if (magic === 'OpusHead') {
-      preSkip = new DataView(
-        codecPrivate.buffer,
-        codecPrivate.byteOffset,
-        codecPrivate.length
-      ).getUint16(10, true);
-    }
-  }
-
-  const serial = (Math.random() * 0x100000000) >>> 0;
-  let pageSeq = 0;
-  const pages = [];
-
-  // Page 0 – OpusHead (BOS)
-  pages.push(
-    createOggPage(0x02, 0, serial, pageSeq, [
-      buildOpusHead(channels, sampleRate, preSkip),
-    ])
-  );
-  pageSeq += 1;
-
-  // Page 1 – OpusTags
-  pages.push(createOggPage(0x00, 0, serial, pageSeq, [buildOpusTags()]));
-  pageSeq += 1;
-
-  // Audio pages
-  let granule = 0;
-  let idx = 0;
-
-  while (idx < frames.length) {
-    const packets = [];
-    let segs = 0;
-
-    while (idx < frames.length && packets.length < MAX_FRAMES_PER_PAGE) {
-      const pkt = frames[idx];
-      // createOggPage always appends a terminating lacing value, so a packet
-      // spans floor(len/255)+1 segments (including the extra 0 when len is an
-      // exact multiple of 255). Math.ceil would undercount those cases.
-      const pktSegs = Math.floor(pkt.length / 255) + 1;
-      if (segs + pktSegs > MAX_SEGMENTS_PER_PAGE && packets.length > 0) break;
-
-      packets.push(pkt);
-      segs += pktSegs;
-      granule += opusPacketSamples(pkt);
-      idx += 1;
-    }
-
-    const isLast = idx >= frames.length;
-    pages.push(
-      createOggPage(isLast ? 0x04 : 0x00, granule, serial, pageSeq, packets)
-    );
-    pageSeq += 1;
-  }
-
-  // Concatenate pages into a single buffer
-  const total = pages.reduce((s, p) => s + p.length, 0);
-  const out = new Uint8Array(total);
-  let off = 0;
-  pages.forEach(p => {
-    out.set(p, off);
-    off += p.length;
-  });
-
-  return new Blob([out], { type: 'audio/ogg' });
-}
@@ -1,144 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import {
-  getVoiceCallProvider,
-  VOICE_CALL_PROVIDERS,
-} from 'dashboard/helper/inbox';
-import {
-  VOICE_CALL_DIRECTION,
-  VOICE_CALL_OUTBOUND_INIT_STATUS,
-} from 'dashboard/components-next/message/constants';
-import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
-import { useCallsStore } from 'dashboard/stores/calls';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useAlert } from 'dashboard/composables';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  inbox: {
-    type: Object,
-    default: () => ({}),
-  },
-  chat: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-const callsStore = useCallsStore();
-const whatsappCallSession = useWhatsappCallSession();
-const contactsUiFlags = useMapGetter('contacts/getUIFlags');
-const { isCloudFeatureEnabled } = useAccount();
-
-const voiceCallProvider = computed(() => getVoiceCallProvider(props.inbox));
-const isVoiceCallInbox = computed(
-  () =>
-    voiceCallProvider.value !== null &&
-    isCloudFeatureEnabled(FEATURE_FLAGS.CHANNEL_VOICE)
-);
-const isWhatsappVoiceInbox = computed(
-  () => voiceCallProvider.value === VOICE_CALL_PROVIDERS.WHATSAPP
-);
-
-const isCallButtonDisabled = computed(() => {
-  if (callsStore.hasActiveCall || callsStore.hasIncomingCall) return true;
-  if (isWhatsappVoiceInbox.value) {
-    return whatsappCallSession.isInitiating.value;
-  }
-  return contactsUiFlags.value?.isInitiatingCall || false;
-});
-
-const isCallButtonLoading = computed(() =>
-  isWhatsappVoiceInbox.value
-    ? whatsappCallSession.isInitiating.value
-    : !!contactsUiFlags.value?.isInitiatingCall
-);
-
-const callButtonTooltip = computed(() =>
-  isWhatsappVoiceInbox.value
-    ? t('CONVERSATION.HEADER.WHATSAPP_CALL')
-    : t('CONVERSATION.HEADER.VOICE_CALL')
-);
-
-const startWhatsappCall = async () => {
-  if (whatsappCallSession.isInitiating.value) return;
-  try {
-    const response = await whatsappCallSession.initiateOutboundCall(
-      props.chat.id
-    );
-
-    // Composable returns LOCKED when init is already in flight or a call is
-    // active; soft no-op so a parallel click doesn't trigger a banner.
-    if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
-    // Permission template path returns no call id — show banner, no widget yet.
-    if (!response?.id) {
-      const status = response?.status;
-      const messageKey =
-        status === VOICE_CALL_OUTBOUND_INIT_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: props.chat.id,
-      inboxId: props.inbox?.id,
-      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
-      provider: VOICE_CALL_PROVIDERS.WHATSAPP,
-    });
-  } catch (error) {
-    useAlert(error?.message || t('CONVERSATION.HEADER.WHATSAPP_CALL_FAILED'));
-  }
-};
-
-const startTwilioCall = async () => {
-  if (contactsUiFlags.value?.isInitiatingCall) return;
-  try {
-    const response = await store.dispatch('contacts/initiateCall', {
-      contactId: props.chat?.meta?.sender?.id,
-      inboxId: props.inbox?.id,
-      conversationId: props.chat.id,
-    });
-
-    callsStore.addCall({
-      callSid: response?.call_sid,
-      conversationId: response?.conversation_id ?? props.chat.id,
-      inboxId: props.inbox?.id,
-      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
-    });
-  } catch (error) {
-    useAlert(error?.message || t('CONVERSATION.HEADER.VOICE_CALL_FAILED'));
-  }
-};
-
-const startCall = () => {
-  if (isWhatsappVoiceInbox.value) return startWhatsappCall();
-  return startTwilioCall();
-};
-</script>
-
-<template>
-  <NextButton
-    v-if="isVoiceCallInbox"
-    v-tooltip.bottom="callButtonTooltip"
-    sm
-    ghost
-    slate
-    icon="i-lucide-phone"
-    :is-loading="isCallButtonLoading"
-    :disabled="isCallButtonDisabled"
-    @click="startCall"
-  />
-  <template v-else />
-</template>
@@ -8,14 +8,13 @@ import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
 import Avatar from 'next/avatar/Avatar.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
-import ConversationCallButton from './ConversationCallButton.vue';
 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 { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';

 const props = defineProps({
  chat: {
@@ -124,6 +123,7 @@ const copyConversationId = async () => {
        :size="32"
        :status="currentContact.availability_status"
        hide-offline-status
+        rounded-full
      />
      <div
        class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
@@ -172,7 +172,6 @@ const copyConversationId = async () => {
        :parent-width="width"
        class="hidden md:flex"
      />
-      <ConversationCallButton :inbox="inbox" :chat="currentChat" />
      <MoreActions :conversation-id="currentChat.id" />
    </div>
  </div>
@@ -264,6 +264,9 @@ export default {
      if (this.isATiktokChannel) {
        return MESSAGE_MAX_LENGTH.TIKTOK;
      }
+      if (this.isAGooglePlayChannel) {
+        return MESSAGE_MAX_LENGTH.GOOGLE_PLAY;
+      }
      if (this.isATwilioWhatsAppChannel) {
        return MESSAGE_MAX_LENGTH.TWILIO_WHATSAPP;
      }
@@ -375,9 +378,6 @@ export default {
      return `draft-${this.conversationIdByRoute}-${this.replyType}`;
    },
    audioRecordFormat() {
-      if (this.isAWhatsAppCloudChannel) {
-        return AUDIO_FORMATS.OGG;
-      }
      if (this.isAWhatsAppChannel || this.isATelegramChannel) {
        return AUDIO_FORMATS.MP3;
      }
@@ -1011,18 +1011,14 @@ export default {
    onFinishRecorder(file) {
      this.recordingAudioState = 'stopped';
      this.hasRecordedAudio = true;
-      // Added a new key isVoiceMessage to the file to identify recorded audio
+      // Added a new key isRecordedAudio to the file to find it's and recorded audio
      // Because to filter and show only non recorded audio and other attachments
      const autoRecordedFile = {
        ...file,
-        isVoiceMessage: true,
+        isRecordedAudio: true,
      };
      return file && this.onFileUpload(autoRecordedFile);
    },
-    onRecordError() {
-      this.toggleAudioRecorder();
-      useAlert(this.$t('CONVERSATION.REPLYBOX.AUDIO_CONVERSION_FAILED'));
-    },
    toggleTyping(status) {
      const conversationId = this.currentChat.id;
      const isPrivate = this.isPrivate;
@@ -1049,7 +1045,7 @@ export default {
          isPrivate: this.isPrivate,
          thumb: reader.result,
          blobSignedId: blob ? blob.signed_id : undefined,
-          isVoiceMessage: file?.isVoiceMessage || false,
+          isRecordedAudio: file?.isRecordedAudio || false,
        });
      };
    },
@@ -1085,7 +1081,6 @@ export default {
            private: false,
            message: caption,
            sender: this.sender,
-            isVoiceMessage: attachment.isVoiceMessage || false,
          };

          attachmentPayload = this.setReplyToInPayload(attachmentPayload);
@@ -1135,9 +1130,6 @@ export default {
        this.attachedFiles.forEach(attachment => {
          if (this.globalConfig.directUploadsEnabled) {
            messagePayload.files.push(attachment.blobSignedId);
-            if (attachment.isVoiceMessage) {
-              messagePayload.isVoiceMessage = true;
-            }
          } else {
            messagePayload.files.push(attachment.resource.file);
          }
@@ -1226,7 +1218,7 @@ export default {
      this.hasRecordedAudio = false;
      // Only clear the recorded audio when we click toggle button.
      this.attachedFiles = this.attachedFiles.filter(
-        file => !file?.isVoiceMessage
+        file => !file?.isRecordedAudio
      );
    },
    toggleEditorSize() {
@@ -1304,7 +1296,6 @@ export default {
          :audio-record-format="audioRecordFormat"
          @recorder-progress-changed="onRecordProgressChanged"
          @finish-record="onFinishRecorder"
-          @record-error="onRecordError"
          @play="recordingAudioState = 'playing'"
          @pause="recordingAudioState = 'paused'"
        />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Muhsin	95351705a3	Update ChannelItem.vue	2026-05-22 14:02:47 +04:00
Sony Mathew	4465c7c7e9	fix: stabilize store review channel integration	2026-05-22 14:37:54 +05:30
Sony Mathew	215a954d19	Merge PR #14501 google play reviews channel # Conflicts: # app/controllers/api/v1/accounts/inboxes_controller.rb # app/helpers/api/v1/inboxes_helper.rb # app/javascript/dashboard/components-next/icon/provider.js # app/javascript/dashboard/components-next/message/MessageMeta.vue # app/javascript/dashboard/composables/useInbox.js # app/javascript/dashboard/constants/editor.js # app/javascript/dashboard/helper/inbox.js # app/javascript/dashboard/i18n/locale/en/inboxMgmt.json # app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelFactory.vue # app/javascript/dashboard/routes/dashboard/settings/inbox/ChannelList.vue # app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue # app/javascript/dashboard/routes/dashboard/settings/inbox/components/ChannelName.vue # app/javascript/shared/mixins/inboxMixin.js # app/views/api/v1/models/_inbox.json.jbuilder # config/schedule.yml # db/schema.rb	2026-05-22 14:26:14 +05:30
Sony Mathew	86b9bad778	Merge PR #14515 app store reviews channel	2026-05-22 14:21:27 +05:30
Muhsin KelothandGitHub	fd5de4398d	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 12:29:06 +04:00
Muhsin KelothandGitHub	df538a6a3b	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 12:09:40 +04:00
Muhsin	361b28cb03	chore: Use per-account feature flag for App Store channel	2026-05-22 11:56:21 +04:00
Muhsin KelothandGitHub	15227a424a	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 10:55:59 +04:00
Muhsin	1e36126a00	Merge branch 'feat/app-store-reviews' of github.com:chatwoot/chatwoot into feat/app-store-reviews	2026-05-22 10:51:25 +04:00
Muhsin	eb9647d6c6	Merge branch 'feat/app-store-reviews' of github.com:chatwoot/chatwoot into feat/app-store-reviews	2026-05-22 10:35:44 +04:00
Muhsin KelothandGitHub	b3fa179b7f	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 10:26:46 +04:00
Muhsin	da0a122919	Merge branch 'feat/app-store-reviews' of github.com:chatwoot/chatwoot into feat/app-store-reviews	2026-05-22 10:26:06 +04:00
Muhsin KelothandMuhsin	eb30c8dea4	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 10:23:33 +04:00
Muhsin KelothandGitHub	2a624ac800	Merge branch 'develop' into feat/app-store-reviews	2026-05-22 09:03:48 +04:00
Muhsin KelothandGitHub	29ecbc846b	Merge branch 'develop' into feat/google-play-reviews	2026-05-22 09:03:26 +04:00
Muhsin	379daeef18	Merge branch 'feat/app-store-reviews' of github.com:chatwoot/chatwoot into feat/app-store-reviews	2026-05-21 08:29:53 +04:00
Muhsin KelothandGitHub	127a544a89	Merge branch 'develop' into feat/app-store-reviews	2026-05-21 08:23:54 +04:00
Muhsin	572d6d2e40	feat(inboxes): add app store reviews channel	2026-05-21 08:21:35 +04:00
Muhsin	609e27a4c4	feat(inboxes): add app store reviews channel	2026-05-21 08:18:22 +04:00
Pranav	1149edbd2d	Fix name	2026-05-20 07:06:53 -07:00
Pranav	9edad844a4	fix spec	2026-05-19 17:34:32 -07:00
Pranav	37db80793f	Update schema.rb	2026-05-19 17:27:45 -07:00
Pranav	fe87933223	Update spec	2026-05-19 17:23:34 -07:00
Pranav	3509a98eb2	revert schema.rb	2026-05-19 17:23:00 -07:00
Pranav	13a9f2591b	feat: Google Play Store Reviews	2026-05-19 15:32:49 -07:00
@@ -1 +1 @@
 .14.2
 .14.0