feat(help-center): add more analytics integrations to portal settings

Adds Google Analytics 4, Hotjar, Plausible, Amplitude, Microsoft Clarity,
and Meta Pixel alongside Google Tag Manager. Provider IDs are stored in
portal config, validated against safe formats, and rendered as official
embed snippets on the public help center.

.env.example

@@ -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

Gemfile

@@ -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
@@ -209,8 +209,6 @@ gem 'opentelemetry-exporter-otlp'
 
 gem 'shopify_api'
 
-gem 'firecrawl-sdk', '~> 1.0', require: 'firecrawl'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -301,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
@@ -339,7 +339,6 @@ GEM
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
-    firecrawl-sdk (1.4.1)
     flag_shih_tzu (0.3.23)
     foreman (0.87.2)
     fugit (1.11.1)
@@ -491,7 +490,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)
@@ -996,13 +995,11 @@ GEM
       activemodel (>= 3.2)
       mail (~> 2.5)
     version_gem (1.1.4)
-    vite_rails (3.10.0)
-      railties (>= 5.1, < 9)
+    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)
@@ -1082,7 +1079,6 @@ DEPENDENCIES
   faker
   faraday_middleware-aws-sigv4
   fcm
-  firecrawl-sdk (~> 1.0)
   flag_shih_tzu
   foreman
   gemoji
@@ -1104,7 +1100,7 @@ DEPENDENCIES
   json_schemer
   judoscale-rails
   judoscale-sidekiq
-  jwt (~> 2.10, >= 2.10.3)
+  jwt
   kaminari
   koala
   letter_opener

VERSION_CW

@@ -1 +1 @@
-4.14.1
+4.14.0

app/builders/messages/facebook/message_builder.rb

@@ -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,

app/builders/messages/message_builder.rb

@@ -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'
 

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

@@ -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')

app/controllers/api/v1/accounts/conversations/unread_counts_controller.rb

@@ -1,6 +0,0 @@
-class Api::V1::Accounts::Conversations::UnreadCountsController < Api::V1::Accounts::BaseController
-  def index
-    counts = ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
-    render json: { payload: counts }
-  end
-end

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

@@ -162,8 +162,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     # rubocop:disable Rails/SkipsModelValidations
     @conversation.update_columns(updates)
     # rubocop:enable Rails/SkipsModelValidations
-
-    ::Conversations::UnreadCounts::Notifier.new(@conversation).perform
   end
 
   def should_update_last_seen?

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

@@ -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

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

@@ -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

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

@@ -1,36 +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
-
-  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
-end

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

@@ -79,7 +79,8 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     params.require(:portal).permit(
       :id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived,
-      { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
+      { config: [:default_locale, :layout, *Portal::ANALYTICS_CONFIG_FORMATS.keys.map(&:to_sym),
+                 { allowed_locales: [] }, { draft_locales: [] },
                  { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
     )
   end

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

@@ -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

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

@@ -0,0 +1,18 @@
+class Api::V1::Accounts::WorkingHoursController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+  before_action :fetch_webhook, only: [:update]
+
+  def update
+    @working_hour.update!(working_hour_params)
+  end
+
+  private
+
+  def working_hour_params
+    params.require(:working_hour).permit(:inbox_id, :open_hour, :open_minutes, :close_hour, :close_minutes, :closed_all_day)
+  end
+
+  def fetch_working_hour
+    @working_hour = Current.account.working_hours.find(params[:id])
+  end
+end

app/controllers/api/v1/accounts_controller.rb

@@ -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

app/controllers/instagram/callbacks_controller.rb

@@ -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

app/controllers/microsoft/callbacks_controller.rb

@@ -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

app/controllers/oauth_callback_controller.rb

@@ -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

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

@@ -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')

app/controllers/tiktok/callbacks_controller.rb

@@ -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

app/controllers/twilio/callback_controller.rb

@@ -31,11 +31,7 @@ class Twilio::CallbackController < ApplicationController
       :Latitude,
       :Longitude,
       :MessageType,
-      :ProfileName,
-      :ExternalUserId,
-      :ParentExternalUserId,
-      :ProfileUsername,
-      :Username
+      :ProfileName
     )
   end
 end

app/dispatchers/async_dispatcher.rb

@@ -17,7 +17,6 @@ class AsyncDispatcher < BaseDispatcher
       InstallationWebhookListener.instance,
       NotificationListener.instance,
       ParticipationListener.instance,
-      Conversations::UnreadCounts::Listener.instance,
       ReportingEventListener.instance,
       WebhookListener.instance
     ]

app/helpers/instagram/integration_helper.rb

@@ -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

app/helpers/portal_helper.rb

@@ -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

app/helpers/tiktok/integration_helper.rb

@@ -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

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

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

app/javascript/dashboard/api/contacts.js

@@ -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,
     });
   }
 

app/javascript/dashboard/api/conversations.js

@@ -13,10 +13,6 @@ class ConversationApi extends ApiClient {
   updateLabels(conversationID, labels) {
     return axios.post(`${this.url}/${conversationID}/labels`, { labels });
   }
-
-  getUnreadCounts() {
-    return axios.get(`${this.url}/unread_counts`);
-  }
 }
 
 export default new ConversationApi();

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

@@ -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`,

app/javascript/dashboard/api/inbox/message.js

@@ -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,
       }),
     });
   }

app/javascript/dashboard/api/inboxes.js

@@ -52,14 +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`);
-  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/onboarding.js

@@ -1,14 +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);
-  }
-}
-
-export default new OnboardingAPI();

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

@@ -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 }
-      );
-    });
-  });
 });

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

@@ -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'
       );
     });
 

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

@@ -11,7 +11,6 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('delete');
     expect(conversationsAPI).toHaveProperty('getLabels');
     expect(conversationsAPI).toHaveProperty('updateLabels');
-    expect(conversationsAPI).toHaveProperty('getUnreadCounts');
   });
 
   describe('API calls', () => {
@@ -48,12 +47,5 @@ describe('#ConversationApi', () => {
         }
       );
     });
-
-    it('#getUnreadCounts', () => {
-      conversationsAPI.getUnreadCounts();
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/conversations/unread_counts'
-      );
-    });
   });
 });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -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();
-    });
   });
 });

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

@@ -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 || '');

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

@@ -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 }) => {

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

@@ -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"

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

@@ -142,26 +142,28 @@ watch(
 
 <style lang="scss" scoped>
 .editor-wrapper {
-  :deep(.ProseMirror-menubar-wrapper) {
-    .ProseMirror.ProseMirror-woot-style {
-      p {
-        @apply first:mt-0 !important;
-      }
+  ::v-deep {
+    .ProseMirror-menubar-wrapper {
+      .ProseMirror.ProseMirror-woot-style {
+        p {
+          @apply first:mt-0 !important;
+        }
 
-      .empty-node {
-        @apply m-0 !important;
+        .empty-node {
+          @apply m-0 !important;
 
-        &::before {
-          @apply text-n-slate-11 dark:text-n-slate-11;
+          &::before {
+            @apply text-n-slate-11 dark:text-n-slate-11;
+          }
         }
       }
-    }
 
-    .ProseMirror-menubar {
-      width: fit-content !important;
-      position: relative !important;
-      top: unset !important;
-      @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      .ProseMirror-menubar {
+        width: fit-content !important;
+        position: relative !important;
+        top: unset !important;
+        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      }
     }
   }
 }

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

@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import PortalAvatar from 'dashboard/components-next/HelpCenter/PortalAvatar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PortalSwitcher from 'dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue';
 import CreatePortalDialog from 'dashboard/components-next/HelpCenter/PortalSwitcher/CreatePortalDialog.vue';
@@ -30,6 +31,10 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  breadcrumbLabel: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['update:currentPage']);
@@ -44,10 +49,15 @@ const portals = useMapGetter('portals/allPortals');
 
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
-const activePortalName = computed(() => {
-  return portals.value?.find(portal => portal.slug === currentPortalSlug.value)
-    ?.name;
-});
+const activePortal = computed(() =>
+  portals.value?.find(portal => portal.slug === currentPortalSlug.value)
+);
+
+const activePortalName = computed(() => activePortal.value?.name);
+
+const activePortalLogo = computed(
+  () => activePortal.value?.logo?.file_url || ''
+);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -65,32 +75,45 @@ const togglePortalSwitcher = () => {
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
         >
-          <span
-            v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
-          >
-            {{ activePortalName }}
-          </span>
-          <div v-if="activePortalName" class="relative group">
-            <OnClickOutside @trigger="showPortalSwitcher = false">
-              <Button
-                icon="i-lucide-chevron-down"
-                variant="ghost"
-                color="slate"
-                size="xs"
-                class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3"
-                @click="togglePortalSwitcher"
+          <nav v-if="activePortalName" class="flex items-center gap-2">
+            <div class="flex items-center gap-1.5">
+              <PortalAvatar
+                :src="activePortalLogo"
+                :name="activePortalName"
+                :size="24"
               />
+              <span class="text-lg font-medium text-n-slate-12">
+                {{ activePortalName }}
+              </span>
+              <div class="relative group">
+                <OnClickOutside @trigger="showPortalSwitcher = false">
+                  <Button
+                    icon="i-lucide-chevron-down"
+                    :variant="showPortalSwitcher ? 'faded' : 'ghost'"
+                    color="slate"
+                    size="xs"
+                    class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
+                    @click="togglePortalSwitcher"
+                  />
 
-              <PortalSwitcher
-                v-if="showPortalSwitcher"
-                class="absolute ltr:left-0 rtl:right-0 top-9"
-                @close="showPortalSwitcher = false"
-                @create-portal="createPortalDialogRef.dialogRef.open()"
-              />
-            </OnClickOutside>
-            <CreatePortalDialog ref="createPortalDialogRef" />
-          </div>
+                  <PortalSwitcher
+                    v-if="showPortalSwitcher"
+                    class="absolute ltr:left-0 rtl:right-0 top-9"
+                    @close="showPortalSwitcher = false"
+                    @create-portal="createPortalDialogRef.dialogRef.open()"
+                  />
+                </OnClickOutside>
+                <CreatePortalDialog ref="createPortalDialogRef" />
+              </div>
+            </div>
+
+            <template v-if="breadcrumbLabel">
+              <div class="w-0.5 h-4 rounded-2xl bg-n-weak shrink-0" />
+              <span class="pl-1.5 text-lg font-medium text-n-slate-11">
+                {{ breadcrumbLabel }}
+              </span>
+            </template>
+          </nav>
         </div>
         <slot name="header-actions" />
       </div>

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

@@ -145,43 +145,45 @@ const handleCreateArticle = event => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.ProseMirror .empty-node::before) {
-  @apply text-n-slate-10 text-base;
-}
-
-:deep(.ProseMirror-menubar-wrapper) {
-  .ProseMirror-woot-style {
-    @apply min-h-[15rem] max-h-full;
+::v-deep {
+  .ProseMirror .empty-node::before {
+    @apply text-n-slate-10 text-base;
   }
-}
 
-:deep(.ProseMirror-menubar) {
-  display: none; // Hide by default
-}
-
-:deep(.editor-root .has-selection) {
-  .ProseMirror-menubar:not(:has(*)) {
-    display: none !important;
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-woot-style {
+      @apply min-h-[15rem] max-h-full;
+    }
   }
 
   .ProseMirror-menubar {
-    @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
-    display: flex;
-    top: var(--selection-top, auto) !important;
-    left: var(--selection-left, 0) !important;
-    width: fit-content !important;
-    position: absolute !important;
+    display: none; // Hide by default
+  }
 
-    .ProseMirror-menuitem {
-      @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
-
-      .ProseMirror-icon {
-        @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
-      }
+  .editor-root .has-selection {
+    .ProseMirror-menubar:not(:has(*)) {
+      display: none !important;
     }
 
-    .ProseMirror-menu-active {
-      @apply bg-n-slate-3;
+    .ProseMirror-menubar {
+      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      display: flex;
+      top: var(--selection-top, auto) !important;
+      left: var(--selection-left, 0) !important;
+      width: fit-content !important;
+      position: absolute !important;
+
+      .ProseMirror-menuitem {
+        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
+
+        .ProseMirror-icon {
+          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
+        }
+      }
+
+      .ProseMirror-menu-active {
+        @apply bg-n-slate-3;
+      }
     }
   }
 }

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

@@ -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();
 };
@@ -287,6 +256,7 @@ watch(
     :total-items="articlesCount"
     :items-per-page="25"
     :header="portalName"
+    :breadcrumb-label="$t('HELP_CENTER.BREADCRUMB.ARTICLES')"
     :show-pagination-footer="shouldShowPaginationFooter"
     @update:current-page="handlePageChange"
   >
@@ -371,30 +341,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

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.vue

@@ -112,7 +112,10 @@ const reorderCategories = async reorderedGroup => {
 </script>
 
 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :show-pagination-footer="false"
+    :breadcrumb-label="$t('HELP_CENTER.BREADCRUMB.CATEGORIES')"
+  >
     <template #header-actions>
       <CategoryHeaderControls
         :categories="categories"

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -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

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -31,7 +31,10 @@ const localeCount = computed(() => props.locales?.length);
 </script>
 
 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :show-pagination-footer="false"
+    :breadcrumb-label="$t('HELP_CENTER.BREADCRUMB.LOCALES')"
+  >
     <template #header-actions>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-4">

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

@@ -12,8 +12,7 @@ import { isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import PortalAvatar from 'dashboard/components-next/HelpCenter/PortalAvatar.vue';
 import ColorPicker from 'dashboard/components-next/colorpicker/ColorPicker.vue';
 
 const props = defineProps({
@@ -42,31 +41,12 @@ const state = reactive({
   slug: '',
   widgetColor: '',
   homePageLink: '',
-  liveChatWidgetInboxId: '',
   logoUrl: '',
   avatarBlobId: '',
 });
 
 const originalState = reactive({ ...state });
 
-const liveChatWidgets = computed(() => {
-  const inboxes = store.getters['inboxes/getInboxes'];
-  const widgetOptions = inboxes
-    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
-    .map(inbox => ({
-      value: inbox.id,
-      label: inbox.name,
-    }));
-
-  return [
-    {
-      value: '',
-      label: t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.NONE_OPTION'),
-    },
-    ...widgetOptions,
-  ];
-});
-
 const rules = {
   name: { required, minLength: minLength(2) },
   slug: {
@@ -116,7 +96,6 @@ watch(
         widgetColor: newVal.color,
         homePageLink: newVal.homepage_link,
         slug: newVal.slug,
-        liveChatWidgetInboxId: newVal.inbox?.id || '',
       });
       if (newVal.logo) {
         const {
@@ -148,7 +127,6 @@ const handleUpdatePortal = () => {
     header_text: state.headerText,
     homepage_link: state.homePageLink,
     blob_id: state.avatarBlobId,
-    inbox_id: state.liveChatWidgetInboxId,
   };
   emit('updatePortal', portal);
 };
@@ -204,12 +182,11 @@ const handleAvatarDelete = () => {
       <label class="mb-0.5 text-sm font-medium text-gray-900 dark:text-gray-50">
         {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.AVATAR.LABEL') }}
       </label>
-      <Avatar
+      <PortalAvatar
         :src="state.logoUrl"
         :name="state.name"
         :size="72"
         allow-upload
-        icon-name="i-lucide-building-2"
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"
       />
@@ -303,26 +280,6 @@ const handleAvatarDelete = () => {
           @blur="v$.slug.$touch()"
         />
       </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
-        <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
-        >
-          {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
-        </label>
-        <ComboBox
-          v-model="state.liveChatWidgetInboxId"
-          :options="liveChatWidgets"
-          :placeholder="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.PLACEHOLDER')
-          "
-          :message="
-            t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.HELP_TEXT')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-weak"
-        />
-      </div>
       <div
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useAccount } from 'dashboard/composables/useAccount';
 
@@ -62,6 +62,7 @@ const { isOnChatwootCloud } = useAccount();
 const addCustomDomainDialogRef = ref(null);
 const dnsConfigurationDialogRef = ref(null);
 const updatedDomainAddress = ref('');
+const pendingDomain = ref('');
 
 const customDomainAddress = computed(
   () => props.activePortal?.custom_domain || ''
@@ -111,14 +112,23 @@ const updatePortalConfiguration = customDomain => {
     id: props.activePortal?.id,
     custom_domain: customDomain,
   };
+  pendingDomain.value = customDomain;
   emit('updatePortalConfiguration', portal);
   addCustomDomainDialogRef.value.dialogRef.close();
-  if (customDomain) {
-    updatedDomainAddress.value = customDomain;
-    dnsConfigurationDialogRef.value.dialogRef.open();
-  }
 };
 
+// The save above is fire-and-forget, so the DNS instructions dialog must not
+// open until the domain is actually persisted — otherwise a failed save still
+// advances to the next step. We open it once the stored value reflects the
+// submitted domain.
+watch(customDomainAddress, savedDomain => {
+  if (!pendingDomain.value || savedDomain !== pendingDomain.value) return;
+
+  pendingDomain.value = '';
+  updatedDomainAddress.value = savedDomain;
+  dnsConfigurationDialogRef.value.dialogRef.open();
+});
+
 const closeDNSConfigurationDialog = () => {
   updatedDomainAddress.value = '';
   dnsConfigurationDialogRef.value.dialogRef.close();

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

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import PortalBaseSettings from './PortalBaseSettings.vue';
+import ConfirmDeletePortalDialog from './ConfirmDeletePortalDialog.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  activePortal: { type: Object, required: true },
+  isFetching: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['updatePortal', 'deletePortal']);
+
+const { t } = useI18n();
+
+const confirmDeletePortalDialogRef = ref(null);
+
+const activePortalName = computed(() => props.activePortal?.name || '');
+
+const handleUpdatePortal = portal => {
+  emit('updatePortal', portal);
+};
+
+const openConfirmDeletePortalDialog = () => {
+  confirmDeletePortalDialogRef.value.dialogRef.open();
+};
+
+const handleDeletePortal = () => {
+  emit('deletePortal', props.activePortal);
+  confirmDeletePortalDialogRef.value.dialogRef.close();
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-4">
+    <PortalBaseSettings
+      :active-portal="activePortal"
+      :is-fetching="isFetching"
+      @update-portal="handleUpdatePortal"
+    />
+    <div class="w-full h-px bg-n-weak" />
+    <div class="flex items-end justify-between w-full gap-4">
+      <div class="flex flex-col gap-2">
+        <h6 class="text-base font-medium text-n-slate-12">
+          {{
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.HEADER'
+            )
+          }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{
+            t(
+              'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DESCRIPTION'
+            )
+          }}
+        </span>
+      </div>
+      <Button
+        :label="
+          t(
+            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.BUTTON',
+            { portalName: activePortalName }
+          )
+        "
+        color="ruby"
+        class="max-w-56 !w-fit"
+        @click="openConfirmDeletePortalDialog"
+      />
+    </div>
+    <ConfirmDeletePortalDialog
+      ref="confirmDeletePortalDialogRef"
+      :active-portal-name="activePortalName"
+      @delete-portal="handleDeletePortal"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,244 @@
+<script setup>
+import { computed, reactive, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'dashboard/composables/store';
+import { useBranding } from 'shared/composables/useBranding';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  activePortal: { type: Object, required: true },
+  isFetching: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['updatePortalConfiguration']);
+
+const { t } = useI18n();
+const store = useStore();
+const { replaceInstallationName } = useBranding();
+
+// Mirrors Portal::ANALYTICS_CONFIG_FORMATS on the backend.
+const ANALYTICS_PROVIDERS = [
+  {
+    key: 'gtm_container_id',
+    i18nKey: 'GTM',
+    icon: 'i-logos-google-tag-manager',
+    format: /^GTM-[A-Z0-9]+$/,
+  },
+  {
+    key: 'ga4_measurement_id',
+    i18nKey: 'GA4',
+    icon: 'i-logos-google-analytics',
+    format: /^G-[A-Z0-9]+$/,
+  },
+  {
+    key: 'hotjar_site_id',
+    i18nKey: 'HOTJAR',
+    icon: 'i-logos-hotjar-icon',
+    format: /^\d+$/,
+  },
+  {
+    key: 'plausible_domain',
+    i18nKey: 'PLAUSIBLE',
+    icon: 'i-woot-plausible',
+    format: /^[a-z0-9]([a-z0-9.-]*[a-z0-9])?$/i,
+  },
+  {
+    key: 'amplitude_api_key',
+    i18nKey: 'AMPLITUDE',
+    icon: 'i-logos-amplitude-icon',
+    format: /^[a-z0-9]+$/i,
+  },
+  {
+    key: 'clarity_project_id',
+    i18nKey: 'CLARITY',
+    icon: 'i-woot-microsoft-clarity',
+    format: /^[a-z0-9]+$/i,
+  },
+  {
+    key: 'meta_pixel_id',
+    i18nKey: 'META_PIXEL',
+    icon: 'i-logos-meta-icon',
+    format: /^\d+$/,
+  },
+];
+
+const portalConfig = computed(() => props.activePortal?.config || {});
+
+const liveChatWidgets = computed(() => {
+  const widgetOptions = store.getters['inboxes/getInboxes']
+    .filter(inbox => inbox.channel_type === 'Channel::WebWidget')
+    .map(inbox => ({ value: inbox.id, label: inbox.name }));
+
+  return [
+    {
+      value: '',
+      label: t(
+        'HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.LIVE_CHAT.NONE_OPTION'
+      ),
+    },
+    ...widgetOptions,
+  ];
+});
+
+const state = reactive({
+  liveChatWidgetInboxId: '',
+  ...Object.fromEntries(ANALYTICS_PROVIDERS.map(({ key }) => [key, ''])),
+});
+const originalState = reactive({ ...state });
+
+const resetFromPortal = () => {
+  state.liveChatWidgetInboxId = props.activePortal?.inbox?.id || '';
+  ANALYTICS_PROVIDERS.forEach(({ key }) => {
+    state[key] = portalConfig.value[key] || '';
+  });
+  Object.assign(originalState, state);
+};
+
+watch(() => props.activePortal, resetFromPortal, {
+  immediate: true,
+  deep: true,
+});
+
+const liveChatTitle = computed(() =>
+  replaceInstallationName(
+    t('HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.LIVE_CHAT.TITLE')
+  )
+);
+
+const trimmedAnalyticsValues = computed(() =>
+  Object.fromEntries(
+    ANALYTICS_PROVIDERS.map(({ key }) => [key, state[key].trim()])
+  )
+);
+
+const invalidAnalyticsKeys = computed(() =>
+  ANALYTICS_PROVIDERS.filter(({ key, format }) => {
+    const value = trimmedAnalyticsValues.value[key];
+    return value !== '' && !format.test(value);
+  }).map(({ key }) => key)
+);
+
+const isInvalid = key => invalidAnalyticsKeys.value.includes(key);
+
+const hasChanges = computed(
+  () =>
+    state.liveChatWidgetInboxId !== originalState.liveChatWidgetInboxId ||
+    ANALYTICS_PROVIDERS.some(
+      ({ key }) => trimmedAnalyticsValues.value[key] !== originalState[key]
+    )
+);
+
+const handleSave = () => {
+  emit('updatePortalConfiguration', {
+    id: props.activePortal.id,
+    slug: props.activePortal.slug,
+    inbox_id: state.liveChatWidgetInboxId,
+    config: { ...trimmedAnalyticsValues.value },
+  });
+};
+</script>
+
+<template>
+  <div class="flex flex-col w-full gap-6">
+    <div class="flex flex-col gap-2">
+      <h6 class="text-base font-medium text-n-slate-12">
+        {{ t('HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.HEADER') }}
+      </h6>
+      <span class="text-sm text-n-slate-11">
+        {{ t('HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.DESCRIPTION') }}
+      </span>
+    </div>
+
+    <div
+      class="flex flex-col gap-4 p-4 rounded-xl outline outline-1 outline-n-weak"
+    >
+      <div class="flex items-start gap-3">
+        <div
+          class="flex items-center justify-center rounded-lg size-9 shrink-0 bg-n-alpha-2 text-n-slate-12"
+        >
+          <Icon icon="i-lucide-messages-square" class="size-5" />
+        </div>
+        <div class="flex flex-col gap-0.5">
+          <h6 class="text-sm font-medium text-n-slate-12">
+            {{ liveChatTitle }}
+          </h6>
+          <span class="text-sm text-n-slate-11">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.LIVE_CHAT.DESCRIPTION'
+              )
+            }}
+          </span>
+        </div>
+      </div>
+      <ComboBox
+        v-model="state.liveChatWidgetInboxId"
+        :options="liveChatWidgets"
+        :placeholder="
+          t('HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.LIVE_CHAT.PLACEHOLDER')
+        "
+        class="[&>div>button:not(.focused)]:!outline-n-weak"
+      />
+    </div>
+
+    <div
+      v-for="provider in ANALYTICS_PROVIDERS"
+      :key="provider.key"
+      class="flex flex-col gap-4 p-4 rounded-xl outline outline-1 outline-n-weak"
+    >
+      <div class="flex items-start gap-3">
+        <div
+          class="flex items-center justify-center rounded-lg size-9 shrink-0 bg-n-alpha-2 text-n-slate-12"
+        >
+          <Icon :icon="provider.icon" class="size-5" />
+        </div>
+        <div class="flex flex-col gap-0.5">
+          <h6 class="text-sm font-medium text-n-slate-12">
+            {{
+              t(
+                `HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.${provider.i18nKey}.TITLE`
+              )
+            }}
+          </h6>
+          <span class="text-sm text-n-slate-11">
+            {{
+              t(
+                `HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.${provider.i18nKey}.DESCRIPTION`
+              )
+            }}
+          </span>
+        </div>
+      </div>
+      <Input
+        v-model="state[provider.key]"
+        :placeholder="
+          t(
+            `HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.${provider.i18nKey}.PLACEHOLDER`
+          )
+        "
+        :message="
+          isInvalid(provider.key)
+            ? t(
+                `HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.${provider.i18nKey}.INVALID`
+              )
+            : t(
+                `HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.${provider.i18nKey}.HELP`
+              )
+        "
+        :message-type="isInvalid(provider.key) ? 'error' : 'info'"
+      />
+    </div>
+
+    <div class="flex justify-end">
+      <Button
+        :label="t('HELP_CENTER.PORTAL_SETTINGS.INTEGRATIONS.SAVE')"
+        :disabled="!hasChanges || invalidAnalyticsKeys.length > 0 || isFetching"
+        @click="handleSave"
+      />
+    </div>
+  </div>
+</template>

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

@@ -5,12 +5,12 @@ import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
-import PortalBaseSettings from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue';
+import PortalGeneralSettings from './PortalGeneralSettings.vue';
 import PortalConfigurationSettings from './PortalConfigurationSettings.vue';
 import PortalLayoutContentSettings from './PortalLayoutContentSettings.vue';
-import ConfirmDeletePortalDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/ConfirmDeletePortalDialog.vue';
+import PortalIntegrationsSettings from './PortalIntegrationsSettings.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   portals: {
@@ -34,7 +34,30 @@ const emit = defineEmits([
 const { t } = useI18n();
 const route = useRoute();
 
-const confirmDeletePortalDialogRef = ref(null);
+const SETTINGS_TABS = [
+  {
+    id: 'general',
+    labelKey: 'HELP_CENTER.PORTAL_SETTINGS.NAV.GENERAL',
+    icon: 'i-lucide-settings-2',
+  },
+  {
+    id: 'domain',
+    labelKey: 'HELP_CENTER.PORTAL_SETTINGS.NAV.DOMAIN',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 'appearance',
+    labelKey: 'HELP_CENTER.PORTAL_SETTINGS.NAV.APPEARANCE',
+    icon: 'i-lucide-palette',
+  },
+  {
+    id: 'integrations',
+    labelKey: 'HELP_CENTER.PORTAL_SETTINGS.NAV.INTEGRATIONS',
+    icon: 'i-lucide-blocks',
+  },
+];
+
+const activeTab = ref('general');
 
 const currentPortalSlug = computed(() => route.params.portalSlug);
 
@@ -45,8 +68,6 @@ const activePortal = computed(() => {
   return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
 });
 
-const activePortalName = computed(() => activePortal.value?.name || '');
-
 const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
 
 const handleUpdatePortal = portal => {
@@ -65,18 +86,16 @@ const handleSendCnameInstructions = payload => {
   emit('sendCnameInstructions', payload);
 };
 
-const openConfirmDeletePortalDialog = () => {
-  confirmDeletePortalDialogRef.value.dialogRef.open();
-};
-
-const handleDeletePortal = () => {
-  emit('deletePortal', activePortal.value);
-  confirmDeletePortalDialogRef.value.dialogRef.close();
+const handleDeletePortal = portal => {
+  emit('deletePortal', portal);
 };
 </script>
 
 <template>
-  <HelpCenterLayout :show-pagination-footer="false">
+  <HelpCenterLayout
+    :show-pagination-footer="false"
+    :breadcrumb-label="t('HELP_CENTER.BREADCRUMB.SETTINGS')"
+  >
     <template #content>
       <div
         v-if="isLoading"
@@ -84,68 +103,60 @@ const handleDeletePortal = () => {
       >
         <Spinner />
       </div>
-      <div
-        v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
-      >
-        <PortalBaseSettings
-          :active-portal="activePortal"
-          :is-fetching="isFetching"
-          @update-portal="handleUpdatePortal"
-        />
-        <div class="w-full h-px bg-n-weak" />
-        <PortalConfigurationSettings
-          :active-portal="activePortal"
-          :is-fetching="isFetching"
-          :is-fetching-status="isFetchingSSLStatus"
-          @update-portal-configuration="handleUpdatePortalConfiguration"
-          @refresh-status="fetchSSLStatus"
-          @send-cname-instructions="handleSendCnameInstructions"
-        />
-        <div class="w-full h-px bg-n-weak" />
-        <PortalLayoutContentSettings
-          :active-portal="activePortal"
-          :is-fetching="isFetching"
-          @update-portal-configuration="handleUpdatePortalConfiguration"
-        />
-        <div class="w-full h-px bg-n-weak" />
-        <div class="flex items-end justify-between w-full gap-4">
-          <div class="flex flex-col gap-2">
-            <h6 class="text-base font-medium text-n-slate-12">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.HEADER'
-                )
-              }}
-            </h6>
-            <span class="text-sm text-n-slate-11">
-              {{
-                t(
-                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.DESCRIPTION'
-                )
-              }}
-            </span>
-          </div>
-          <Button
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.DELETE_PORTAL.BUTTON',
-                {
-                  portalName: activePortalName,
-                }
-              )
+      <div v-else-if="activePortal" class="flex items-start w-full gap-8">
+        <nav class="sticky top-0 flex flex-col w-48 gap-0.5 shrink-0 py-1">
+          <button
+            v-for="tab in SETTINGS_TABS"
+            :key="tab.id"
+            type="button"
+            class="flex items-center w-full h-9 gap-2 px-2.5 text-sm transition-colors rounded-lg"
+            :class="
+              activeTab === tab.id
+                ? 'bg-n-alpha-2 text-n-slate-12 font-medium'
+                : 'text-n-slate-11 hover:bg-n-alpha-1 hover:text-n-slate-12'
             "
-            color="ruby"
-            class="max-w-56 !w-fit"
-            @click="openConfirmDeletePortalDialog"
+            :aria-current="activeTab === tab.id ? 'page' : undefined"
+            @click="activeTab = tab.id"
+          >
+            <Icon :icon="tab.icon" class="shrink-0 size-4" />
+            {{ t(tab.labelKey) }}
+          </button>
+        </nav>
+
+        <div class="flex flex-col flex-1 min-w-0 max-w-[40rem] pb-8">
+          <PortalGeneralSettings
+            v-if="activeTab === 'general'"
+            :active-portal="activePortal"
+            :is-fetching="isFetching"
+            @update-portal="handleUpdatePortal"
+            @delete-portal="handleDeletePortal"
+          />
+
+          <PortalConfigurationSettings
+            v-else-if="activeTab === 'domain'"
+            :active-portal="activePortal"
+            :is-fetching="isFetching"
+            :is-fetching-status="isFetchingSSLStatus"
+            @update-portal-configuration="handleUpdatePortalConfiguration"
+            @refresh-status="fetchSSLStatus"
+            @send-cname-instructions="handleSendCnameInstructions"
+          />
+
+          <PortalLayoutContentSettings
+            v-else-if="activeTab === 'appearance'"
+            :active-portal="activePortal"
+            :is-fetching="isFetching"
+            @update-portal-configuration="handleUpdatePortalConfiguration"
+          />
+
+          <PortalIntegrationsSettings
+            v-else-if="activeTab === 'integrations'"
+            :active-portal="activePortal"
+            :is-fetching="isFetching"
+            @update-portal-configuration="handleUpdatePortalConfiguration"
           />
         </div>
       </div>
     </template>
-    <ConfirmDeletePortalDialog
-      ref="confirmDeletePortalDialogRef"
-      :active-portal-name="activePortalName"
-      @delete-portal="handleDeletePortal"
-    />
   </HelpCenterLayout>
 </template>

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

@@ -0,0 +1,27 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+// Renders a portal's logo consistently across the help center — the layout
+// header, the portal switcher, and portal settings — so the icon fallback
+// and shape stay in one place instead of being copied per call site.
+defineProps({
+  src: { type: String, default: '' },
+  name: { type: String, default: '' },
+  size: { type: Number, default: 24 },
+  allowUpload: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['upload', 'delete']);
+</script>
+
+<template>
+  <Avatar
+    :src="src"
+    :name="name"
+    :size="size"
+    :allow-upload="allowUpload"
+    icon-name="i-lucide-building-2"
+    @upload="emit('upload', $event)"
+    @delete="emit('delete')"
+  />
+</template>

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

@@ -6,7 +6,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { buildPortalURL } from 'dashboard/helper/portalHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import PortalAvatar from 'dashboard/components-next/HelpCenter/PortalAvatar.vue';
 
 const emit = defineEmits(['close', 'createPortal']);
 
@@ -151,13 +151,11 @@ const redirectToPortalHomePage = () => {
         <span class="text-sm font-medium truncate text-n-slate-12">
           {{ portal.name || '' }}
         </span>
-        <Avatar
+        <PortalAvatar
           v-if="portal"
           :name="portal.name"
           :src="getPortalThumbnailSrc(portal)"
           :size="20"
-          icon-name="i-lucide-building-2"
-          rounded-full
         />
       </Button>
     </div>

app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -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">

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

@@ -1,4 +1,5 @@
 <script setup>
+import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';

app/javascript/dashboard/components-next/call/CallCard.story.vue

@@ -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>

app/javascript/dashboard/components-next/call/CallCard.vue

@@ -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-x-bold"
-            ruby
-            class="!rounded-full rotate-[134deg]"
-            @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>

app/javascript/dashboard/components-next/call/FloatingCallWidget.vue

@@ -1,268 +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 { 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/bell.mp3';
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-
-const {
-  activeCall,
-  incomingCalls,
-  hasActiveCall,
-  isJoining,
-  joinCall,
-  endCall: endCallSession,
-  rejectIncomingCall,
-  dismissCall,
-  formattedCallDuration,
-} = useCallSession();
-
-// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
-// don't expose a mic track on the browser side.
-const isMuted = ref(false);
-const isWhatsappActive = computed(
-  () => activeCall.value?.provider === 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;
-  setWhatsappCallMuted(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 && isWhatsappActive"
-      @accept="handleJoinCall(primaryIncomingCall)"
-      @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
-      @dismiss="dismissCall(primaryIncomingCall?.callSid)"
-      @end="handleEndCall"
-      @toggle-mute="toggleMute"
-      @go-to-conversation="goToConversation(activeCall || primaryIncomingCall)"
-    />
-  </div>
-</template>

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

@@ -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 [];

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

@@ -127,6 +127,7 @@ const menuItems = computed(() => {
       value: 'sync',
       action: 'sync',
       icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
     });
   }
 

app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watch } from 'vue';
+import { defineModel, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Input from 'dashboard/components-next/input/Input.vue';
 

app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, defineModel, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';

app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, defineProps, defineEmits } from 'vue';
 import { Chrome } from '@lk77/vue3-color';
 import { OnClickOutside } from '@vueuse/components';
 

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, h, watch, ref } from 'vue';
+import { computed, defineModel, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';

app/javascript/dashboard/components-next/filter/inputs/MultiSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { defineModel, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'next/icon/Icon.vue';
 import Button from 'next/button/Button.vue';

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { defineModel, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { picoSearch } from '@scmmishra/pico-search';
 import Icon from 'next/icon/Icon.vue';

app/javascript/dashboard/components-next/flag/Flag.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { h } from 'vue';
+import { h, defineProps } from 'vue';
 
 const props = defineProps({
   country: { type: String, required: true },

app/javascript/dashboard/components-next/icon/ChannelIcon.story.vue

@@ -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>

app/javascript/dashboard/components-next/icon/ChannelIcon.vue

@@ -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>

app/javascript/dashboard/components-next/icon/FileIcon.vue

@@ -18,7 +18,6 @@ const fileTypeIcon = computed(() => {
     json: 'i-woot-file-txt',
     odt: 'i-woot-file-doc',
     pdf: 'i-woot-file-pdf',
-    pfx: 'i-woot-file-pfx',
     ppt: 'i-woot-file-ppt',
     pptx: 'i-woot-file-ppt',
     rar: 'i-woot-file-zip',
@@ -27,7 +26,6 @@ const fileTypeIcon = computed(() => {
     txt: 'i-woot-file-txt',
     xls: 'i-woot-file-xls',
     xlsx: 'i-woot-file-xls',
-    xml: 'i-woot-file-txt',
     zip: 'i-woot-file-zip',
   };
 

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

@@ -1,75 +1,45 @@
-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',
+  };
+
+  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 +48,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;
-  });
-}

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

@@ -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)"
       >

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive } from 'vue';
+import { defineProps, computed, reactive } from 'vue';
 import Message from './Message.vue';
 import { MESSAGE_TYPES } from './constants.js';
 import { useCamelCase } from 'dashboard/composables/useTransformKeys';

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

@@ -1,4 +1,6 @@
 <script setup>
+import { defineProps, defineEmits } from 'vue';
+
 defineProps({
   showingOriginal: Boolean,
 });

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

@@ -95,7 +95,7 @@ const replyToPreview = computed(() => {
 
 <template>
   <div
-    class="text-sm min-w-0"
+    class="text-sm"
     :class="[
       messageClass,
       {

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

@@ -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>

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

@@ -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>

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

@@ -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>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useAttrs } from 'vue';
+import { computed, defineOptions, useAttrs } from 'vue';
 
 import ImageChip from 'next/message/chips/Image.vue';
 import VideoChip from 'next/message/chips/Video.vue';

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

@@ -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>

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

@@ -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',
-};

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

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import ChannelIcon from 'next/icon/ChannelIcon.vue';
-import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: {
@@ -18,10 +17,6 @@ const props = defineProps({
     type: Object,
     required: true,
   },
-  badgeCount: {
-    type: [Number, String],
-    default: 0,
-  },
 });
 
 const reauthorizationRequired = computed(() => {
@@ -34,7 +29,6 @@ const reauthorizationRequired = computed(() => {
     <ChannelIcon :inbox="inbox" class="size-4" />
   </span>
   <div class="flex-1 truncate min-w-0">{{ label }}</div>
-  <SidebarUnreadBadge :count="badgeCount" />
   <div
     v-if="reauthorizationRequired"
     v-tooltip.top-end="$t('SIDEBAR.REAUTHORIZE')"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { h, ref, computed, onMounted, watch } from 'vue';
+import { h, ref, computed, onMounted } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
@@ -61,12 +61,6 @@ const hasAdvancedAssignment = computed(() => {
   );
 });
 
-const fetchConversationUnreadCounts = currentAccountId => {
-  if (!currentAccountId) return;
-
-  store.dispatch('conversationUnreadCounts/get');
-};
-
 const toggleShortcutModalFn = show => {
   if (show) {
     emit('openKeyShortcutModal');
@@ -163,15 +157,6 @@ useEventListener(document, 'touchend', onResizeEnd);
 
 const inboxes = useMapGetter('inboxes/getInboxes');
 const labels = useMapGetter('labels/getLabelsOnSidebar');
-const getInboxUnreadCount = useMapGetter(
-  'conversationUnreadCounts/getInboxUnreadCount'
-);
-const getLabelUnreadCount = useMapGetter(
-  'conversationUnreadCounts/getLabelUnreadCount'
-);
-const getTeamUnreadCount = useMapGetter(
-  'conversationUnreadCounts/getTeamUnreadCount'
-);
 const teams = useMapGetter('teams/getMyTeams');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
 const conversationCustomViews = useMapGetter(
@@ -188,48 +173,8 @@ onMounted(() => {
   store.dispatch('customViews/get', 'contact');
 });
 
-watch(accountId, fetchConversationUnreadCounts, {
-  immediate: true,
-});
-
-const normalizeUnreadCount = count => {
-  const unreadCount = Number(count);
-  return Number.isFinite(unreadCount) && unreadCount > 0 ? unreadCount : 0;
-};
-
-const sortByUnreadCount = (items, labelKey, unreadCountKey) =>
-  items.slice().sort((a, b) => {
-    const unreadCountDiff =
-      normalizeUnreadCount(unreadCountKey(b)) -
-      normalizeUnreadCount(unreadCountKey(a));
-
-    if (unreadCountDiff !== 0) return unreadCountDiff;
-
-    return labelKey(a).localeCompare(labelKey(b));
-  });
-
-const sortedTeams = computed(() =>
-  sortByUnreadCount(
-    teams.value,
-    team => team.name,
-    team => getTeamUnreadCount.value(team.id)
-  )
-);
-
 const sortedInboxes = computed(() =>
-  sortByUnreadCount(
-    inboxes.value,
-    inbox => inbox.name,
-    inbox => getInboxUnreadCount.value(inbox.id)
-  )
-);
-
-const sortedLabels = computed(() =>
-  sortByUnreadCount(
-    labels.value,
-    label => label.title,
-    label => getLabelUnreadCount.value(label.id)
-  )
+  inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
 
 const closeMobileSidebar = () => {
@@ -322,10 +267,9 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.TEAMS'),
           icon: 'i-lucide-users',
           activeOn: ['conversations_through_team'],
-          children: sortedTeams.value.map(team => ({
+          children: teams.value.map(team => ({
             name: `${team.name}-${team.id}`,
             label: team.name,
-            badgeCount: getTeamUnreadCount.value(team.id),
             to: accountScopedRoute('team_conversations', { teamId: team.id }),
           })),
         },
@@ -337,7 +281,6 @@ const menuItems = computed(() => {
           children: sortedInboxes.value.map(inbox => ({
             name: `${inbox.name}-${inbox.id}`,
             label: inbox.name,
-            badgeCount: getInboxUnreadCount.value(inbox.id),
             icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
             to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
             component: leafProps =>
@@ -345,7 +288,6 @@ const menuItems = computed(() => {
                 label: leafProps.label,
                 active: leafProps.active,
                 inbox,
-                badgeCount: leafProps.badgeCount,
               }),
           })),
         },
@@ -354,10 +296,9 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.LABELS'),
           icon: 'i-lucide-tag',
           activeOn: ['conversations_through_label'],
-          children: sortedLabels.value.map(label => ({
+          children: labels.value.map(label => ({
             name: `${label.title}-${label.id}`,
             label: label.title,
-            badgeCount: getLabelUnreadCount.value(label.id),
             icon: h('span', {
               class: `size-[8px] rounded-sm`,
               style: { backgroundColor: label.color },

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

@@ -5,7 +5,6 @@ import { useSidebarContext } from './provider';
 import { useMapGetter } from 'dashboard/composables/store';
 import Icon from 'next/icon/Icon.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -167,7 +166,6 @@ onMounted(async () => {
                         class="size-4 flex-shrink-0"
                       />
                       <span class="flex-1 truncate">{{ subChild.label }}</span>
-                      <SidebarUnreadBadge :count="subChild.badgeCount" />
                     </button>
                   </li>
                 </ul>
@@ -190,7 +188,6 @@ onMounted(async () => {
                   class="size-4 flex-shrink-0"
                 />
                 <span class="flex-1 truncate">{{ child.label }}</span>
-                <SidebarUnreadBadge :count="child.badgeCount" />
               </button>
             </li>
           </template>

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

@@ -3,7 +3,6 @@ import { isVNode, computed } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import Policy from 'dashboard/components/policy.vue';
 import { useSidebarContext } from './provider';
-import SidebarUnreadBadge from './SidebarUnreadBadge.vue';
 
 const props = defineProps({
   label: { type: String, required: true },
@@ -11,7 +10,6 @@ const props = defineProps({
   icon: { type: [String, Object], default: null },
   active: { type: Boolean, default: false },
   component: { type: Function, default: null },
-  badgeCount: { type: [Number, String], default: 0 },
 });
 
 const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
@@ -41,14 +39,15 @@ const shouldRenderComponent = computed(() => {
       <component
         :is="component"
         v-if="shouldRenderComponent"
-        v-bind="{ label, icon, active, badgeCount }"
+        :label
+        :icon
+        :active
       />
       <template v-else>
         <span v-if="icon" class="size-4 grid place-content-center rounded-full">
           <Icon :icon="icon" class="size-4 inline-block" />
         </span>
         <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
-        <SidebarUnreadBadge :count="badgeCount" />
       </template>
     </component>
   </Policy>

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

@@ -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" />

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

@@ -1,27 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  count: { type: [Number, String], default: 0 },
-});
-
-const normalizedCount = computed(() => {
-  const count = Number(props.count);
-  return Number.isFinite(count) && count > 0 ? count : 0;
-});
-
-const displayCount = computed(() =>
-  normalizedCount.value > 99 ? '99+' : String(normalizedCount.value)
-);
-</script>
-
-<template>
-  <span
-    v-if="normalizedCount > 0"
-    data-test-id="sidebar-unread-badge"
-    class="inline-grid h-5 min-w-5 place-items-center rounded-full bg-n-slate-4 px-1 text-xxs font-medium leading-3 text-n-slate-12 dark:bg-n-slate-5 flex-shrink-0"
-  >
-    {{ displayCount }}
-  </span>
-  <span v-else class="hidden" />
-</template>

app/javascript/dashboard/components-next/sidebar/specs/ChannelLeaf.spec.js

@@ -1,38 +0,0 @@
-import { mount } from '@vue/test-utils';
-import ChannelLeaf from '../ChannelLeaf.vue';
-
-const mountChannelLeaf = props =>
-  mount(ChannelLeaf, {
-    props: {
-      label: 'Website',
-      inbox: { reauthorization_required: false },
-      ...props,
-    },
-    global: {
-      mocks: {
-        $t: key => key,
-      },
-      stubs: {
-        ChannelIcon: true,
-        Icon: true,
-      },
-    },
-  });
-
-describe('ChannelLeaf', () => {
-  it('renders unread badge when count is present', () => {
-    const wrapper = mountChannelLeaf({ badgeCount: 3 });
-    const badge = wrapper.find('[data-test-id="sidebar-unread-badge"]');
-
-    expect(badge.exists()).toBe(true);
-    expect(badge.text()).toBe('3');
-  });
-
-  it('does not render unread badge when count is zero', () => {
-    const wrapper = mountChannelLeaf({ badgeCount: 0 });
-
-    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').exists()).toBe(
-      false
-    );
-  });
-});

app/javascript/dashboard/components-next/sidebar/specs/SidebarGroupLeaf.spec.js

@@ -1,76 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { h } from 'vue';
-import SidebarGroupLeaf from '../SidebarGroupLeaf.vue';
-
-vi.mock('../provider', () => ({
-  useSidebarContext: () => ({
-    resolvePermissions: () => [],
-    resolveFeatureFlag: () => '',
-  }),
-}));
-
-const PolicyStub = {
-  props: ['as', 'permissions', 'featureFlag'],
-  template: '<li><slot /></li>',
-};
-
-const RouterLinkStub = {
-  props: ['to'],
-  template: '<a><slot /></a>',
-};
-
-const mountLeaf = props =>
-  mount(SidebarGroupLeaf, {
-    props: {
-      label: 'Support',
-      to: '/support',
-      ...props,
-    },
-    global: {
-      stubs: {
-        Icon: true,
-        Policy: PolicyStub,
-        RouterLink: RouterLinkStub,
-      },
-    },
-  });
-
-describe('SidebarGroupLeaf', () => {
-  it('renders unread badge when count is present', () => {
-    const wrapper = mountLeaf({ badgeCount: 7 });
-    const badge = wrapper.find('[data-test-id="sidebar-unread-badge"]');
-
-    expect(badge.exists()).toBe(true);
-    expect(badge.text()).toBe('7');
-  });
-
-  it('does not render unread badge when count is zero', () => {
-    const wrapper = mountLeaf({ badgeCount: 0 });
-
-    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').exists()).toBe(
-      false
-    );
-  });
-
-  it('caps large unread counts', () => {
-    const wrapper = mountLeaf({ badgeCount: 120 });
-
-    expect(wrapper.find('[data-test-id="sidebar-unread-badge"]').text()).toBe(
-      '99+'
-    );
-  });
-
-  it('passes unread count to custom leaf components', () => {
-    const wrapper = mountLeaf({
-      badgeCount: 4,
-      component: leafProps =>
-        h(
-          'span',
-          { 'data-test-id': 'custom-leaf-count' },
-          leafProps.badgeCount
-        ),
-    });
-
-    expect(wrapper.find('[data-test-id="custom-leaf-count"]').text()).toBe('4');
-  });
-});

app/javascript/dashboard/components/Accordion/AccordionItem.vue

@@ -1,5 +1,6 @@
 <script setup>
 import EmojiOrIcon from 'shared/components/EmojiOrIcon.vue';
+import { defineEmits } from 'vue';
 
 defineProps({
   title: {

app/javascript/dashboard/components/ChannelSelector.vue

@@ -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">

app/javascript/dashboard/components/CustomAttribute.vue

@@ -339,15 +339,17 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-:deep(.selector-wrap) {
-  @apply m-0 top-1;
+::v-deep {
+  .selector-wrap {
+    @apply m-0 top-1;
 
-  .selector-name {
+    .selector-name {
+      @apply ml-0;
+    }
+  }
+
+  .name {
     @apply ml-0;
   }
 }
-
-:deep(.name) {
-  @apply ml-0;
-}
 </style>

app/javascript/dashboard/components/IntersectionObserver.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, defineEmits } from 'vue';
 import { useIntersectionObserver } from '@vueuse/core';
 
 const { options } = defineProps({

app/javascript/dashboard/components/Modal.vue

@@ -1,6 +1,6 @@
 <script setup>
 // [TODO] Use Teleport to move the modal to the end of the body
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, defineEmits, onMounted } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import Button from 'dashboard/components-next/button/Button.vue';
 

app/javascript/dashboard/components/ui/Dropdown/DropdownSearch.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { defineEmits, defineModel } from 'vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 defineProps({

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

@@ -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 => {

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

@@ -56,14 +56,6 @@ const isActive = computed(() => {
     return props.enabledFeatures.channel_voice;
   }
 
-  if (key === 'whatsapp_call') {
-    return (
-      props.enabledFeatures.channel_voice &&
-      !!window.chatwootConfig?.whatsappAppId &&
-      window.chatwootConfig.whatsappAppId !== 'none'
-    );
-  }
-
   return [
     'website',
     'twilio',
@@ -86,14 +78,7 @@ 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', 'voice'].includes(props.channel.key);
 });
 
 const onItemClick = () => {
@@ -110,7 +95,6 @@ const onItemClick = () => {
     :icon="channel.icon"
     :is-coming-soon="isComingSoon"
     :is-beta="isBeta"
-    :has-voice-badge="hasVoiceBadge"
     :disabled="!isActive"
     @click="onItemClick"
   />

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

@@ -63,8 +63,10 @@ export default {
 .colorpicker--chrome.vc-chrome {
   @apply shadow-lg -mt-2.5 absolute z-[9999] border border-solid border-n-weak rounded;
 
-  :deep(input) {
-    @apply bg-white dark:bg-white;
+  ::v-deep {
+    input {
+      @apply bg-white dark:bg-white;
+    }
   }
 }
 </style>