fix(captain): keep responding to pending conversations on audience or schedule drift

An unset checkbox custom attribute now matches equal_to false and
not_equal_to true instead of never matching.

AGENTS.md

@@ -85,8 +85,8 @@
 ## Project-Specific
 
 - **Translations**:
-  - For product and source-string changes, only update `en.yml` and `en.json`; other languages are handled through Crowdin and the community
+  - Only update `en.yml` and `en.json`
-  - Crowdin-generated translation sync PRs may update non-English locale files; do not flag those changes solely for modifying translated locale files
+  - Other languages are handled by the community
   - Backend i18n → `en.yml`, Frontend i18n → `en.json`
 - **Frontend**:
   - Use `components-next/` for message bubbles (the rest is being deprecated)

Gemfile.lock

@@ -211,14 +211,13 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.38.0)
+    datadog (2.19.0)
-      cgi
+      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      datadog-ruby_core_source (~> 3.5, >= 3.5.3)
+      libdatadog (~> 18.1.0.1.0)
-      libdatadog (~> 36.0.0.1.0)
+      libddwaf (~> 1.24.1.0.3)
-      libddwaf (~> 1.30.0.0.0)
       logger
       msgpack
-    datadog-ruby_core_source (3.5.3)
+    datadog-ruby_core_source (3.4.1)
     date (3.5.1)
     debug (1.8.0)
       irb (>= 1.5.0)
@@ -523,16 +522,15 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    libdatadog (36.0.0.1.0)
+    libdatadog (18.1.0.1.0)
-    libdatadog (36.0.0.1.0-arm64-darwin)
+    libdatadog (18.1.0.1.0-x86_64-linux)
-    libdatadog (36.0.0.1.0-x86_64-linux)
+    libddwaf (1.24.1.0.3)
-    libddwaf (1.30.0.0.2)
       ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-arm64-darwin)
+    libddwaf (1.24.1.0.3-arm64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-x86_64-darwin)
+    libddwaf (1.24.1.0.3-x86_64-darwin)
       ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-x86_64-linux)
+    libddwaf (1.24.1.0.3-x86_64-linux)
       ffi (~> 1.0)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
@@ -549,7 +547,7 @@ GEM
       activesupport (>= 4)
       railties (>= 4)
       request_store (~> 1.0)
-    loofah (2.25.2)
+    loofah (2.23.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     mail (2.8.1)
@@ -742,8 +740,8 @@ GEM
       activesupport (>= 5.0.0)
       minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.7.1)
+    rails-html-sanitizer (1.6.1)
-      loofah (~> 2.25, >= 2.25.2)
+      loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rails-i18n (7.0.10)
       i18n (>= 0.7, < 2)

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2026 Chatwoot Inc.
+Copyright (c) 2017-2024 Chatwoot Inc.
 
 Portions of this software are licensed as follows:
 

VERSION_CW

@@ -1 +1 @@
-4.16.1
+4.15.1

app/builders/agent_builder.rb

@@ -2,14 +2,6 @@
 # It initializes with necessary attributes and provides a perform method
 # to create a user and account user in a transaction.
 class AgentBuilder
-  LIMIT_EXCEEDED_MESSAGE = 'Account limit exceeded. Please purchase more licenses'.freeze
-
-  class LimitExceededError < StandardError
-    def initialize
-      super(AgentBuilder::LIMIT_EXCEEDED_MESSAGE)
-    end
-  end
-
   # Initializes an AgentBuilder with necessary attributes.
   # @param email [String] the email of the user.
   # @param name [String] the name of the user.
@@ -22,23 +14,15 @@ class AgentBuilder
   # Creates a user and account user in a transaction.
   # @return [User] the created user.
   def perform
-    account.with_lock do
+    ActiveRecord::Base.transaction do
-      raise LimitExceededError unless can_add_agent?
+      @user = find_or_create_user
-
+      create_account_user
-      ActiveRecord::Base.transaction do
-        @user = find_or_create_user
-        create_account_user
-      end
     end
     @user
   end
 
   private
 
-  def can_add_agent?
-    account.usage_limits[:agents] > account.account_users.count
-  end
-
   # Finds a user by email or creates a new one with a temporary password.
   # @return [User] the found or created user.
   def find_or_create_user

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

@@ -1,4 +1,5 @@
 class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
+  before_action :current_account
   before_action :check_authorization
   before_action :agent_bot, except: [:index, :create]
 

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

@@ -1,6 +1,8 @@
 class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   before_action :fetch_agent, except: [:create, :index, :bulk_create]
   before_action :check_authorization
+  before_action :validate_limit, only: [:create]
+  before_action :validate_limit_for_bulk_create, only: [:bulk_create]
 
   def index
     @agents = agents
@@ -18,8 +20,6 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     )
 
     @agent = builder.perform
-  rescue AgentBuilder::LimitExceededError => e
-    render_payment_required(e.message)
   end
 
   def update
@@ -36,13 +36,25 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
   def bulk_create
     emails = params[:emails]
 
-    bulk_create_agents(emails)
+    emails.each do |email|
+      builder = AgentBuilder.new(
+        email: email,
+        name: email.split('@').first,
+        inviter: current_user,
+        account: Current.account
+      )
+      begin
+        builder.perform
+      rescue ActiveRecord::RecordInvalid => e
+        Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
+      end
+    end
+
     # This endpoint is used to bulk create agents during onboarding
     # onboarding_step key in present in Current account custom attributes, since this is a one time operation
-    clear_onboarding_step
+    Current.account.custom_attributes.delete('onboarding_step')
+    Current.account.save!
     head :ok
-  rescue AgentBuilder::LimitExceededError => e
-    render_payment_required(e.message)
   end
 
   private
@@ -75,33 +87,22 @@ class Api::V1::Accounts::AgentsController < Api::V1::Accounts::BaseController
     @agents ||= Current.account.users.order_by_full_name.includes(:account_users, { avatar_attachment: [:blob] })
   end
 
-  def bulk_create_agents(emails)
+  def validate_limit_for_bulk_create
-    Current.account.with_lock do
+    limit_available = params[:emails].count <= available_agent_count
-      raise AgentBuilder::LimitExceededError if emails.count > available_agent_count
 
-      emails.each { |email| create_agent_from_email(email) }
+    render_payment_required('Account limit exceeded. Please purchase more licenses') unless limit_available
-    end
   end
 
-  def create_agent_from_email(email)
+  def validate_limit
-    builder = AgentBuilder.new(
+    render_payment_required('Account limit exceeded. Please purchase more licenses') unless can_add_agent?
-      email: email,
-      name: email.split('@').first,
-      inviter: current_user,
-      account: Current.account
-    )
-    builder.perform
-  rescue ActiveRecord::RecordInvalid => e
-    Rails.logger.info "[Agent#bulk_create] ignoring email #{email}, errors: #{e.record.errors}"
-  end
-
-  def clear_onboarding_step
-    Current.account.custom_attributes.delete('onboarding_step')
-    Current.account.save!
   end
 
   def available_agent_count
-    Current.account.usage_limits[:agents] - Current.account.account_users.count
+    Current.account.usage_limits[:agents] - agents.count
+  end
+
+  def can_add_agent?
+    available_agent_count.positive?
   end
 
   def delete_user_record(agent)

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

@@ -1,28 +0,0 @@
-class Api::V1::Accounts::BrandedEmailLayoutsController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-
-  def show
-    set_branded_email_layout
-  end
-
-  def update
-    unless Current.account.feature_enabled?(:branded_email_templates)
-      render_could_not_create_error('Branded email templates feature is not enabled')
-      return
-    end
-
-    branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
-    EmailTemplate.update_account_branded_layout!(account: Current.account, body: branded_email_layout) if params.key?(:branded_email_layout)
-    set_branded_email_layout
-  rescue ActiveRecord::RecordInvalid => e
-    render_could_not_create_error(e.record.errors.full_messages.join(', '))
-  end
-
-  private
-
-  def set_branded_email_layout
-    @branded_email_layout = EmailTemplate.account_branded_layout_template_for(Current.account)&.body
-  end
-end
-
-Api::V1::Accounts::BrandedEmailLayoutsController.prepend_mod_with('Api::V1::Accounts::BrandedEmailLayoutsController')

app/controllers/api/v1/accounts/captain/preferences_controller.rb

@@ -1,4 +1,5 @@
 class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::BaseController
+  before_action :current_account
   before_action :authorize_account_update, only: [:update]
 
   def show

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

@@ -45,20 +45,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    continue_update = false
+    inbox_params = permitted_params.except(:channel, :csat_config)
-
+    inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
-    ActiveRecord::Base.transaction do
+    @inbox.update!(inbox_params)
-      continue_update = update_branded_email_layout
+    update_inbox_working_hours
-      raise ActiveRecord::Rollback unless continue_update
+    update_channel if channel_update_required?
-
-      inbox_params = permitted_params.except(:channel, :csat_config)
-      inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
-      @inbox.update!(inbox_params)
-      update_inbox_working_hours
-      update_channel if channel_update_required?
-    end
-
-    return unless continue_update
   end
 
   def agent_bot
@@ -164,34 +155,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     formatted['template'] = config['template'] if config['template'].present?
   end
 
-  def update_branded_email_layout
-    return true unless params.key?(:branded_email_layout)
-
-    branded_email_layout = normalized_branded_email_layout
-
-    unless Current.account.feature_enabled?(:branded_email_templates)
-      return true if branded_email_layout.blank?
-
-      render_could_not_create_error('Branded email templates feature is not enabled')
-      return false
-    end
-
-    unless @inbox.email?
-      return true if branded_email_layout.blank?
-
-      render_could_not_create_error('Branded email layout is only supported for email inboxes')
-      return false
-    end
-
-    @inbox.update_branded_email_layout!(branded_email_layout)
-    true
-  rescue ActiveRecord::RecordInvalid => e
-    render_could_not_create_error(e.record.errors.full_messages.join(', '))
-    false
-  end
-
-  def normalized_branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
-
   def inbox_attributes
     [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,

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

@@ -1,9 +0,0 @@
-class Api::V1::Accounts::Integrations::BaseController < Api::V1::Accounts::BaseController
-  private
-
-  # Managing an integration hook (create/update/destroy) is admin-only, enforced via HookPolicy.
-  # Subclasses opt in per action with `before_action :check_authorization, only: [...]`.
-  def check_authorization
-    authorize(:hook)
-  end
-end

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

@@ -1,4 +1,4 @@
-class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Integrations::BaseController
+class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::BaseController
   before_action :fetch_hook, except: [:create]
   before_action :check_authorization
 
@@ -35,6 +35,10 @@ class Api::V1::Accounts::Integrations::HooksController < Api::V1::Accounts::Inte
     @hook = Current.account.hooks.find(params[:id])
   end
 
+  def check_authorization
+    authorize(:hook)
+  end
+
   def permitted_params
     params.require(:hook).permit(:app_id, :inbox_id, :status, settings: {})
   end

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

@@ -1,7 +1,6 @@
-class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Integrations::BaseController
+class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
   before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
   before_action :fetch_hook, only: [:destroy]
-  before_action :check_authorization, only: [:destroy]
 
   def destroy
     revoke_linear_token

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

@@ -1,6 +1,5 @@
-class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::Integrations::BaseController
+class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::BaseController
   before_action :fetch_hook, only: [:destroy]
-  before_action :check_authorization, only: [:destroy]
 
   def destroy
     @hook.destroy!

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

@@ -1,8 +1,7 @@
-class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::Integrations::BaseController
+class Api::V1::Accounts::Integrations::ShopifyController < Api::V1::Accounts::BaseController
   include Shopify::IntegrationHelper
   before_action :setup_shopify_context, only: [:orders]
   before_action :fetch_hook, except: [:auth]
-  before_action :check_authorization, only: [:destroy]
   before_action :validate_contact, only: [:orders]
 
   def auth

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

@@ -1,4 +1,5 @@
 class Api::V1::Accounts::LabelsController < Api::V1::Accounts::BaseController
+  before_action :current_account
   before_action :fetch_label, except: [:index, :create]
   before_action :check_authorization
 

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

@@ -81,8 +81,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       :name, :page_title, :slug, :archived,
       { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
                  { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } },
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
-                 { popular_content: popular_content_keys.index_with { { category_ids: [], article_ids: [] } } }] }
     )
   end
 
@@ -90,10 +89,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
     params.dig(:portal, :config, :locale_translations)&.keys || []
   end
 
-  def popular_content_keys
-    params.dig(:portal, :config, :popular_content)&.keys || []
-  end
-
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
     return {} unless permitted_params.key?(:inbox_id)

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

@@ -1,5 +1,4 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
-  before_action :ensure_embedded_signup_enabled
   # Reconfiguring/reauthorizing a live inbox swaps its credentials, so restrict it to admins.
   before_action :check_admin_authorization?, if: -> { params[:inbox_id].present? }
   before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
@@ -19,13 +18,6 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
 
   private
 
-  def ensure_embedded_signup_enabled
-    return unless ChatwootApp.chatwoot_cloud?
-    return if Current.account.feature_enabled?('whatsapp_embedded_signup_inbox_creation')
-
-    raise Pundit::NotAuthorizedError
-  end
-
   def process_embedded_signup
     service = Whatsapp::EmbeddedSignupService.new(
       account: Current.account,
@@ -52,7 +44,8 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
   def can_reconfigure_channel?
     channel = @inbox.channel
     return false unless channel.provider == 'whatsapp_cloud'
-    return true if ChatwootApp.chatwoot_cloud?
+
+    # Reconfiguring a live embedded-signup channel requires the feature flag.
     return Current.account.feature_enabled?('whatsapp_reconfigure') if channel.provider_config['source'] == 'embedded_signup'
 
     true

app/controllers/concerns/portal_home_data.rb

@@ -4,53 +4,17 @@ module PortalHomeData
   private
 
   def load_home_data
-    load_recommended_content
+    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
-    # The classic hero only needs the recommendations above; the rest is
-    # documentation-layout home data (also used on custom-domain home pages).
-    return unless @portal.layout == 'documentation'
-
     @visible_categories = @portal.categories
                                  .where(locale: @locale)
                                  .joins(:articles).where(articles: { status: :published })
                                  .order(position: :asc)
                                  .group('categories.id')
-    @popular_topics = @recommended_categories.presence || @visible_categories.first(3)
+    @popular_topics = @visible_categories.first(3)
     @featured = base_articles.order_by_views.limit(6)
     @category_contributors = build_category_contributors(@visible_categories)
   end
 
-  def load_recommended_content
-    @recommended_categories = recommended_categories
-    @recommended_articles = recommended_articles
-  end
-
-  def base_articles
-    @base_articles ||= @portal.articles.published.where(locale: @locale).includes(:author, :category)
-  end
-
-  # Admin-recommended categories for the locale, in the chosen order. Unlike the
-  # position-based fallback, published articles aren't required: the admin's pick wins.
-  def recommended_categories
-    ids = @portal.popular_category_ids(@locale)
-    ordered_by_ids(@portal.categories.where(locale: @locale, id: ids), ids)
-  end
-
-  # Admin-recommended articles for the locale, in the chosen order, limited to
-  # published articles that still exist.
-  def recommended_articles
-    ids = @portal.popular_article_ids(@locale)
-    ordered_by_ids(base_articles.where(id: ids), ids)
-  end
-
-  # Loads the scope and returns its records ordered to match `ids`, dropping any
-  # that no longer exist. Skips the query entirely when `ids` is blank.
-  def ordered_by_ids(scope, ids)
-    return [] if ids.blank?
-
-    by_id = scope.index_by(&:id)
-    ids.filter_map { |id| by_id[id] }
-  end
-
   def build_category_contributors(categories)
     category_ids = categories.map(&:id)
     return {} if category_ids.empty?

app/controllers/dashboard_controller.rb

@@ -64,8 +64,10 @@ class DashboardController < ActionController::Base
     return unless @portal
 
     @locale = @portal.default_locale
-    request.variant = :documentation if @portal.layout == 'documentation'
+    if @portal.layout == 'documentation'
-    load_home_data
+      request.variant = :documentation
+      load_home_data
+    end
     render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
   end
 

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

@@ -24,11 +24,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_view_variant
-    request.variant = if @is_plain_layout_enabled
+    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
-                        :plain
-                      elsif @portal_layout == 'documentation'
-                        :documentation
-                      end
   end
 
   def portal
@@ -69,8 +65,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
 
   def render_404
     portal
-    # set_locale can render_404 before the child's set_view_variant runs; set it here so plain 404s stay chrome-less
-    set_view_variant
     render 'public/api/v1/portals/error/404', status: :not_found
   end
 

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

@@ -7,7 +7,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   before_action :set_portal_layout
   before_action :set_view_variant
   before_action :ensure_portal_feature_enabled
-  before_action :load_home_data, only: [:show], unless: -> { @is_plain_layout_enabled }
+  before_action :load_home_data, only: [:show], if: -> { @portal_layout == 'documentation' }
   layout 'portal'
 
   def show

app/controllers/webhooks/whatsapp_controller.rb

@@ -47,10 +47,18 @@ class Webhooks::WhatsappController < ActionController::API
     metadata = params.dig(:entry, 0, :changes, 0, :value, :metadata)
     return if metadata.blank?
 
-    Whatsapp::WebhookChannelFinderService.new(
+    phone_number = normalized_phone_number(metadata[:display_phone_number])
-      display_phone_number: metadata[:display_phone_number],
+    phone_number_id = metadata[:phone_number_id]
-      phone_number_id: metadata[:phone_number_id]
+    channel = Channel::Whatsapp.find_by(phone_number: phone_number)
-    ).perform
+
+    return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
+  end
+
+  def normalized_phone_number(phone_number)
+    return if phone_number.blank?
+
+    phone_number = phone_number.to_s
+    phone_number.start_with?('+') ? phone_number : "+#{phone_number}"
   end
 
   def inactive_whatsapp_number?

app/drops/conversation_drop.rb

@@ -1,10 +1,6 @@
 class ConversationDrop < BaseDrop
   include MessageFormatHelper
 
-  def id
-    @obj.try(:display_id)
-  end
-
   def display_id
     @obj.try(:display_id)
   end

app/drops/inbox_drop.rb

@@ -2,18 +2,4 @@ class InboxDrop < BaseDrop
   def name
     @obj.try(:name)
   end
-
-  def business_name
-    @obj.try(:sanitized_business_name)
-  end
-
-  def avatar_url
-    @obj.try(:avatar_url)
-  end
-
-  def email
-    return unless @obj.try(:email?)
-
-    @obj.try(:email_address).presence || @obj.try(:channel).try(:email)
-  end
 end

app/javascript/dashboard/api/calls.js

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

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

@@ -1,9 +0,0 @@
-import ApiClient from '../ApiClient';
-
-class CaptainAgentSessions extends ApiClient {
-  constructor() {
-    super('captain/agent_sessions', { accountScoped: true });
-  }
-}
-
-export default new CaptainAgentSessions();

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

@@ -26,25 +26,15 @@ class CaptainAssistant extends ApiClient {
     });
   }
 
-  getMetrics({ assistantId, range, signal }) {
+  getStats({ assistantId, range }) {
-    const requestConfig = {
+    return axios.get(`${this.url}/${assistantId}/stats`, {
       params: { range, timezone_offset: getTimezoneOffset() },
-    };
+    });
-    if (signal) requestConfig.signal = signal;
-
-    return axios.get(`${this.url}/${assistantId}/metrics`, requestConfig);
   }
 
-  getFaqStats({ assistantId, signal }) {
+  getSummary({ assistantId, range }) {
-    const requestConfig = {};
-    if (signal) requestConfig.signal = signal;
-
-    return axios.get(`${this.url}/${assistantId}/faq_stats`, requestConfig);
-  }
-
-  getSummary({ assistantId, range, stats }) {
     return axios.get(`${this.url}/${assistantId}/summary`, {
-      params: { range, timezone_offset: getTimezoneOffset(), stats },
+      params: { range, timezone_offset: getTimezoneOffset() },
     });
   }
 

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

@@ -10,13 +10,10 @@ class WhatsappCallsAPI extends ApiClient {
     return axios.get(`${this.url}/${callId}`).then(r => r.data);
   }
 
-  // Either conversationId, or contactId + inboxId to let the BE resolve the conversation.
+  initiate(conversationId, sdpOffer) {
-  initiate({ conversationId, contactId, inboxId }, sdpOffer) {
     return axios
       .post(`${this.url}/initiate`, {
         conversation_id: conversationId,
-        contact_id: contactId,
-        inbox_id: inboxId,
         sdp_offer: sdpOffer,
       })
       .then(r => r.data);

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

@@ -17,7 +17,6 @@ class ArticlesAPI extends PortalsAPI {
     categorySlug,
     sort,
     query,
-    signal,
   }) {
     const url = getArticleSearchURL({
       pageNumber,
@@ -31,7 +30,7 @@ class ArticlesAPI extends PortalsAPI {
       host: this.url,
     });
 
-    return axios.get(url, { signal });
+    return axios.get(url);
   }
 
   searchArticles({ portalSlug, query }) {

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

@@ -37,8 +37,7 @@ describe('#PortalAPI', () => {
         authorId: '1',
       });
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1',
+        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
-        { signal: undefined }
       );
     });
   });

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

@@ -28,12 +28,7 @@ const inboxes = computed(() => {
     return {
       name: inbox.name,
       id: inbox.id,
-      icon: getInboxIconByType(
+      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
-        inbox.channelType,
-        inbox.medium,
-        'line',
-        inbox.voiceEnabled
-      ),
     };
   });
 });

app/javascript/dashboard/components-next/Calls/CallListItem.vue

@@ -1,244 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { relativeDayTimestamp } from 'shared/helpers/timeHelper';
-import { getInboxVoiceIcon } from 'dashboard/helper/inbox';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import AudioPlayer from 'dashboard/components-next/audio/AudioPlayer.vue';
-import {
-  VOICE_CALL_DIRECTION,
-  VOICE_CALL_STATUS,
-} from 'dashboard/components-next/message/constants';
-import CallStatusBadge from './CallStatusBadge.vue';
-import { CALL_KIND, getCallKind } from './constants';
-
-const props = defineProps({
-  call: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-const route = useRoute();
-
-const kind = computed(() => getCallKind(props.call));
-
-const contactName = computed(() =>
-  (props.call.contact.name || props.call.contact.phoneNumber || '').replace(
-    /^\+/,
-    ''
-  )
-);
-
-const agentActionLabel = computed(() => {
-  if (!props.call.agent) return '';
-  if (kind.value === CALL_KIND.OUTGOING) return t('CALLS_PAGE.ROW.DIALED_BY');
-  if (kind.value === CALL_KIND.INCOMING) return t('CALLS_PAGE.ROW.PICKED_BY');
-  // Ongoing collapses direction, so resolve dialed-vs-picked from the raw value.
-  if (kind.value === CALL_KIND.ONGOING) {
-    return props.call.direction === VOICE_CALL_DIRECTION.OUTBOUND
-      ? t('CALLS_PAGE.ROW.DIALED_BY')
-      : t('CALLS_PAGE.ROW.PICKED_BY');
-  }
-  return '';
-});
-
-const resultLabel = computed(() => {
-  if (kind.value === CALL_KIND.MISSED) return t('CALLS_PAGE.ROW.NO_AGENT');
-  if (kind.value === CALL_KIND.NO_REPLY) {
-    return t('CALLS_PAGE.ROW.NO_CONTACT_ANSWER');
-  }
-  if (kind.value === CALL_KIND.FAILED) return t('CALLS_PAGE.ROW.FAILED');
-  if (kind.value === CALL_KIND.ONGOING) {
-    return props.call.status === VOICE_CALL_STATUS.RINGING
-      ? t('CALLS_PAGE.ROW.RINGING')
-      : t('CALLS_PAGE.ROW.IN_PROGRESS');
-  }
-  return t('CALLS_PAGE.ROW.ANSWERED');
-});
-
-const providerIcon = computed(() =>
-  getInboxVoiceIcon(props.call.inbox.channelType, props.call.inbox.medium)
-);
-
-const createdAtLabel = computed(() =>
-  relativeDayTimestamp(props.call.createdAt, t('CALLS_PAGE.ROW.YESTERDAY'))
-);
-
-const conversationRoute = computed(() => ({
-  name: 'inbox_conversation',
-  params: {
-    accountId: route.params.accountId,
-    conversation_id: props.call.conversation.displayId,
-  },
-  query: { messageId: props.call.messageId },
-}));
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 py-3.5 border-b border-n-weak lg:hidden">
-    <div class="flex items-center gap-2 min-w-0">
-      <Avatar
-        :src="call.contact.avatar"
-        :name="contactName"
-        :size="24"
-        rounded-full
-      />
-      <span
-        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
-        class="text-heading-3 font-medium truncate text-n-slate-12 min-w-0"
-      >
-        {{ contactName }}
-      </span>
-      <CallStatusBadge :kind="kind" class="ms-auto shrink-0" />
-      <RouterLink
-        :to="conversationRoute"
-        class="inline-flex items-center h-6 gap-1 px-2 text-label-small outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0"
-      >
-        <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
-        {{ call.conversation.displayId }}
-        <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
-      </RouterLink>
-    </div>
-    <div class="flex items-center gap-1.5 min-w-0">
-      <template v-if="agentActionLabel">
-        <span class="text-label-small text-n-slate-10 shrink-0">
-          {{ agentActionLabel }}
-        </span>
-        <Avatar
-          :src="call.agent.avatar"
-          :name="call.agent.name"
-          :size="20"
-          rounded-full
-        />
-        <span class="text-body-main truncate text-n-slate-12 min-w-0">
-          {{ call.agent.name }}
-        </span>
-      </template>
-      <span v-else class="text-body-main truncate text-n-slate-10 min-w-0">
-        {{ resultLabel }}
-      </span>
-      <span class="w-px h-3 bg-n-strong shrink-0" />
-      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
-      <span class="text-body-main truncate text-n-slate-11 min-w-0">
-        {{ call.inbox.name }}
-      </span>
-      <span
-        v-if="!call.recordingUrl"
-        class="ms-auto shrink-0 text-label-small text-n-slate-11 tabular-nums"
-      >
-        {{ createdAtLabel }}
-      </span>
-    </div>
-    <div
-      v-if="call.recordingUrl"
-      class="flex items-center gap-2 min-w-0 justify-between"
-    >
-      <AudioPlayer
-        :src="call.recordingUrl"
-        :fallback-duration="call.durationSeconds || 0"
-        class="flex-1 sm:flex-[0.7] min-w-0"
-      />
-      <span class="shrink-0 text-label-small text-n-slate-11 tabular-nums">
-        {{ createdAtLabel }}
-      </span>
-    </div>
-  </div>
-
-  <div
-    class="hidden items-center gap-x-1.5 gap-y-2.5 border-b border-n-weak lg:flex lg:items-center lg:gap-1.5"
-  >
-    <div class="flex items-center gap-2.5 min-w-0 w-52 shrink-0 py-3.5">
-      <Avatar
-        :src="call.contact.avatar"
-        :name="contactName"
-        :size="24"
-        rounded-full
-      />
-      <span
-        v-tooltip.top="{ content: contactName, delay: { show: 500, hide: 0 } }"
-        class="text-heading-3 font-medium truncate text-n-slate-12"
-      >
-        {{ contactName }}
-      </span>
-    </div>
-    <div
-      class="flex flex-nowrap items-center gap-x-2 gap-y-2 min-w-0 grow shrink"
-    >
-      <div class="flex items-center gap-x-2 min-w-0 lg:contents py-3.5">
-        <CallStatusBadge :kind="kind" class="shrink-0" />
-        <div
-          v-if="agentActionLabel"
-          class="gap-x-1.5 min-w-0 flex items-center"
-        >
-          <span
-            class="text-label-small text-n-slate-10 truncate shrink min-w-8 xl:min-w-14"
-          >
-            {{ agentActionLabel }}
-          </span>
-          <span class="flex items-center gap-1.5 min-w-16 shrink-[20]">
-            <Avatar
-              :src="call.agent.avatar"
-              :name="call.agent.name"
-              :size="20"
-              rounded-full
-            />
-            <span
-              v-tooltip.top="{
-                content: call.agent.name,
-                delay: { show: 500, hide: 0 },
-              }"
-              class="text-body-main truncate text-n-slate-12 min-w-0"
-            >
-              {{ call.agent.name }}
-            </span>
-          </span>
-        </div>
-        <span
-          v-else-if="resultLabel"
-          class="text-body-main truncate text-n-slate-10 min-w-0 shrink-[20]"
-        >
-          {{ resultLabel }}
-        </span>
-      </div>
-      <AudioPlayer
-        v-if="call.recordingUrl"
-        :src="call.recordingUrl"
-        :fallback-duration="call.durationSeconds || 0"
-        class="w-auto min-w-44 shrink mx-auto"
-      />
-    </div>
-    <div
-      v-tooltip.top="{
-        content: call.inbox.name,
-        delay: { show: 500, hide: 0 },
-      }"
-      class="flex items-center gap-1 justify-end w-40 min-w-4 shrink-[100] py-3.5"
-    >
-      <Icon :icon="providerIcon" class="size-4 text-n-slate-11 shrink-0" />
-      <span class="text-body-main truncate text-n-slate-11 min-w-0">
-        {{ call.inbox.name }}
-      </span>
-    </div>
-    <RouterLink
-      :to="conversationRoute"
-      class="inline-flex items-center h-6 gap-1 px-2 text-label-small py-3.5 outline outline-1 -outline-offset-1 rounded-md outline-n-weak text-n-slate-11 hover:bg-n-alpha-1 shrink-0 justify-self-start"
-    >
-      <Icon icon="i-lucide-message-circle" class="size-3.5 text-n-slate-11" />
-      {{ call.conversation.displayId }}
-      <Icon icon="i-lucide-arrow-up-right" class="size-3.5 text-n-slate-11" />
-    </RouterLink>
-    <span
-      v-tooltip.top="{
-        content: createdAtLabel,
-        delay: { show: 500, hide: 0 },
-      }"
-      class="text-label-small text-end text-n-slate-11 truncate py-3.5 tabular-nums justify-self-end min-w-16 max-w-20 shrink-0"
-    >
-      {{ createdAtLabel }}
-    </span>
-  </div>
-</template>

app/javascript/dashboard/components-next/Calls/CallRecordingPlayer.vue

@@ -1,158 +0,0 @@
-<script setup>
-import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
-import { downloadFile } from '@chatwoot/utils';
-import { useEmitter } from 'dashboard/composables/emitter';
-import { emitter } from 'shared/helpers/mitt';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  fallbackDuration: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const PLAYBACK_SPEEDS = [1, 1.5, 2];
-
-const audioPlayer = useTemplateRef('audioPlayer');
-const { uid } = getCurrentInstance();
-
-const isPlaying = ref(false);
-const currentTime = ref(0);
-const duration = ref(props.fallbackDuration);
-const playbackSpeed = ref(1);
-
-const onLoadedMetadata = () => {
-  const loadedDuration = audioPlayer.value?.duration;
-  if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
-};
-
-const formatTime = time => {
-  if (!time || Number.isNaN(time)) return '00:00';
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-};
-
-const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
-
-const displayedTime = computed(() =>
-  formatTime(
-    isPlaying.value || currentTime.value ? currentTime.value : duration.value
-  )
-);
-
-// Only one recording should play at a time across the list.
-useEmitter('pause_playing_audio', currentPlayingId => {
-  if (currentPlayingId !== uid && isPlaying.value) {
-    audioPlayer.value?.pause();
-    isPlaying.value = false;
-  }
-});
-
-const playOrPause = () => {
-  if (isPlaying.value) {
-    audioPlayer.value.pause();
-    isPlaying.value = false;
-  } else {
-    emitter.emit('pause_playing_audio', uid);
-    audioPlayer.value.play();
-    isPlaying.value = true;
-  }
-};
-
-const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value?.currentTime;
-};
-
-const seek = event => {
-  const time = Number(event.target.value);
-  audioPlayer.value.currentTime = time;
-  currentTime.value = time;
-};
-
-const onEnd = () => {
-  isPlaying.value = false;
-  currentTime.value = 0;
-};
-
-const changePlaybackSpeed = () => {
-  const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
-  playbackSpeed.value =
-    PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
-  audioPlayer.value.playbackRate = playbackSpeed.value;
-};
-
-const downloadRecording = () => {
-  downloadFile({ url: props.src, type: 'audio' });
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center h-9 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
-    @click.stop
-  >
-    <audio
-      ref="audioPlayer"
-      class="hidden"
-      playsinline
-      @loadedmetadata="onLoadedMetadata"
-      @timeupdate="onTimeUpdate"
-      @ended="onEnd"
-    >
-      <source :src="src" />
-    </audio>
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      class="!w-6 !p-0 text-n-slate-12"
-      @click="playOrPause"
-    >
-      <template #icon>
-        <Icon
-          :icon="isPlaying ? 'i-lucide-pause' : 'i-lucide-play'"
-          class="size-4 flex-shrink-0"
-        />
-      </template>
-    </Button>
-    <input
-      type="range"
-      min="0"
-      :max="duration || 0"
-      :value="currentTime"
-      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-1 rounded-lg appearance-none cursor-pointer bg-n-slate-12/30 accent-n-slate-11"
-      @input="seek"
-    />
-    <span class="text-sm tabular-nums text-n-slate-11 shrink-0">
-      {{ displayedTime }}
-    </span>
-    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      :label="playbackSpeedLabel"
-      class="!px-1 min-w-6 !text-n-slate-11"
-      @click="changePlaybackSpeed"
-    />
-    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      class="!w-6 !p-0 text-n-slate-11"
-      @click="downloadRecording"
-    >
-      <template #icon>
-        <Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
-      </template>
-    </Button>
-  </div>
-</template>

app/javascript/dashboard/components-next/Calls/CallStatusBadge.vue

@@ -1,56 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { CALL_KIND } from './constants';
-
-const props = defineProps({
-  kind: {
-    type: String,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-
-const KIND_CONFIG = {
-  [CALL_KIND.ONGOING]: {
-    icon: 'i-lucide-phone-call',
-    class: 'bg-n-teal-3 text-n-teal-11',
-  },
-  [CALL_KIND.INCOMING]: {
-    icon: 'i-lucide-phone-incoming',
-    class: 'bg-n-slate-3 text-n-slate-11',
-  },
-  [CALL_KIND.OUTGOING]: {
-    icon: 'i-lucide-phone-outgoing',
-    class: 'bg-n-slate-3 text-n-slate-11',
-  },
-  [CALL_KIND.MISSED]: {
-    icon: 'i-lucide-phone-missed',
-    class: 'bg-n-ruby-3 text-n-ruby-11',
-  },
-  [CALL_KIND.NO_REPLY]: {
-    icon: 'i-lucide-phone-outgoing',
-    class: 'bg-n-amber-3 text-n-amber-11',
-  },
-  [CALL_KIND.FAILED]: {
-    icon: 'i-lucide-phone-off',
-    class: 'bg-n-ruby-3 text-n-ruby-11',
-  },
-};
-
-const config = computed(() => KIND_CONFIG[props.kind]);
-</script>
-
-<template>
-  <span
-    class="inline-flex items-center justify-center w-20 gap-1.5 h-6 px-1 rounded-md text-label-small shrink-0"
-    :class="config.class"
-  >
-    <Icon :icon="config.icon" class="size-3 flex-shrink-0" />
-    <span class="truncate">{{
-      t(`CALLS_PAGE.STATUS.${kind.toUpperCase()}`)
-    }}</span>
-  </span>
-</template>

app/javascript/dashboard/components-next/Calls/CallsEmptyState.vue

@@ -1,34 +0,0 @@
-<script setup>
-import { useRoute, useRouter } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-const router = useRouter();
-
-const setupVoiceChannel = () => {
-  router.push({
-    name: 'settings_inbox_new',
-    params: { accountId: route.params.accountId },
-  });
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="t('CALLS_PAGE.SETUP.TITLE')"
-    :subtitle="t('CALLS_PAGE.SETUP.SUBTITLE')"
-    :show-backdrop="false"
-    :action-perms="['administrator']"
-  >
-    <template #actions>
-      <Button
-        :label="t('CALLS_PAGE.SETUP.ACTION')"
-        icon="i-lucide-plus"
-        @click="setupVoiceChannel"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/Calls/CallsFilterBar.vue

@@ -1,270 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
-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 Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-const props = defineProps({
-  // Null while a fetch is in flight so stale counts are never shown.
-  totalCount: {
-    type: Number,
-    default: null,
-  },
-  agents: {
-    type: Array,
-    default: () => [],
-  },
-  inboxes: {
-    type: Array,
-    default: () => [],
-  },
-  // Self-scoped viewers only ever see their own calls, so the assignee filter
-  // is meaningless for them — only admins get it.
-  showAssignee: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const activity = defineModel('activity', { type: String, default: null });
-const assigneeId = defineModel('assigneeId', { type: Number, default: null });
-const inboxId = defineModel('inboxId', { type: Number, default: null });
-
-const { t } = useI18n();
-
-const ACTIVITY_ICONS = {
-  missed: 'i-lucide-phone-missed',
-  no_reply: 'i-lucide-phone-outgoing',
-  incoming: 'i-lucide-phone-incoming',
-  outgoing: 'i-lucide-phone-outgoing',
-  in_progress: 'i-lucide-phone-call',
-};
-
-const BASE_ACTIVITIES = ['missed', 'no_reply'];
-const OTHER_ACTIVITIES = ['incoming', 'outgoing', 'in_progress'];
-
-// A single open-menu identifier keeps the three dropdowns mutually exclusive:
-// opening one closes the others without any cross-wiring.
-const openMenu = ref(null); // 'activity' | 'assignee' | 'more' | null
-
-const toggleMenu = name => {
-  openMenu.value = openMenu.value === name ? null : name;
-};
-
-// Each dropdown wrapper closes itself on outside clicks. The guard keeps the
-// other two wrappers (which the click is also outside of) from closing a
-// menu the user is interacting with.
-const closeOnOutside = name => {
-  if (openMenu.value === name) openMenu.value = null;
-};
-
-const activityLabel = value => t(`CALLS_PAGE.FILTERS.${value.toUpperCase()}`);
-
-const activeChipLabel = computed(() => {
-  const label = activityLabel(activity.value);
-  return props.totalCount === null ? label : `${label} (${props.totalCount})`;
-});
-
-const inactiveChips = computed(() =>
-  BASE_ACTIVITIES.filter(value => value !== activity.value)
-);
-
-const otherActivityItems = computed(() =>
-  OTHER_ACTIVITIES.map(value => ({
-    label: activityLabel(value),
-    value,
-    action: 'filter',
-    icon: ACTIVITY_ICONS[value],
-    isSelected: activity.value === value,
-  }))
-);
-
-const assigneeItems = computed(() => [
-  {
-    label: t('CALLS_PAGE.FILTERS.ALL_ASSIGNEES'),
-    value: null,
-    action: 'filter',
-    isSelected: !assigneeId.value,
-  },
-  ...props.agents.map(agent => ({
-    label: agent.name,
-    value: agent.id,
-    action: 'filter',
-    thumbnail: { name: agent.name, src: agent.thumbnail },
-    isSelected: assigneeId.value === agent.id,
-  })),
-]);
-
-const moreFiltersSections = computed(() => [
-  {
-    title: t('CALLS_PAGE.FILTERS.INBOX'),
-    items: [
-      {
-        label: t('CALLS_PAGE.FILTERS.ALL_INBOXES'),
-        value: null,
-        action: 'inbox',
-        isSelected: !inboxId.value,
-      },
-      ...props.inboxes.map(inbox => ({
-        label: inbox.name,
-        value: inbox.id,
-        action: 'inbox',
-        isSelected: inboxId.value === inbox.id,
-      })),
-    ],
-  },
-]);
-
-const selectedAssignee = computed(
-  () => props.agents.find(agent => agent.id === assigneeId.value) || null
-);
-
-const selectedAssigneeLabel = computed(
-  () => selectedAssignee.value?.name || t('CALLS_PAGE.FILTERS.ASSIGNEE')
-);
-
-const isOtherActivitySelected = computed(() =>
-  OTHER_ACTIVITIES.includes(activity.value)
-);
-
-const hasMoreFilters = computed(() => Boolean(inboxId.value));
-
-const setActivity = value => {
-  openMenu.value = null;
-  activity.value = value;
-};
-
-const setAssignee = ({ value }) => {
-  openMenu.value = null;
-  assigneeId.value = value;
-};
-
-const applyMoreFilter = ({ action, value }) => {
-  openMenu.value = null;
-  if (action === 'inbox') inboxId.value = value;
-};
-</script>
-
-<template>
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="flex flex-wrap items-center gap-2">
-      <span v-if="!activity" class="text-heading-3 text-n-slate-11 shrink-0">
-        {{
-          totalCount === null
-            ? t('CALLS_PAGE.ALL_CALLS')
-            : t('CALLS_PAGE.ALL_CALLS_COUNT', { count: totalCount })
-        }}
-      </span>
-      <Button
-        v-else
-        variant="outline"
-        color="blue"
-        size="sm"
-        :icon="ACTIVITY_ICONS[activity]"
-        class="shrink-0 !h-7 !px-2"
-        @click="setActivity(null)"
-      >
-        {{ activeChipLabel }}
-        <Icon icon="i-lucide-x" />
-      </Button>
-      <div class="w-px h-3.5 mx-1 bg-n-strong shrink-0" />
-      <Button
-        v-for="chip in inactiveChips"
-        :key="chip"
-        variant="outline"
-        color="slate"
-        size="sm"
-        :icon="ACTIVITY_ICONS[chip]"
-        :label="activityLabel(chip)"
-        class="shrink-0 text-n-slate-11 !h-7 !px-2"
-        @click="setActivity(chip)"
-      />
-      <OnClickOutside
-        class="relative shrink-0"
-        @trigger="closeOnOutside('activity')"
-      >
-        <Button
-          variant="outline"
-          color="slate"
-          size="sm"
-          icon="i-lucide-phone"
-          class="!h-7 !px-2"
-          :class="
-            isOtherActivitySelected ? 'text-n-slate-12' : 'text-n-slate-11'
-          "
-          @click="toggleMenu('activity')"
-        >
-          {{ t('CALLS_PAGE.FILTERS.OTHER_ACTIVITY') }}
-          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11" />
-        </Button>
-        <DropdownMenu
-          v-if="openMenu === 'activity'"
-          :menu-items="otherActivityItems"
-          class="mt-1 start-0 top-full w-44"
-          @action="setActivity($event.value)"
-        />
-      </OnClickOutside>
-    </div>
-    <div class="flex items-center gap-2 shrink-0">
-      <OnClickOutside
-        v-if="showAssignee"
-        class="relative"
-        @trigger="closeOnOutside('assignee')"
-      >
-        <Button
-          variant="outline"
-          color="slate"
-          size="sm"
-          icon="i-woot-empty-assignee"
-          class="max-w-52 !h-7 !px-2"
-          :class="assigneeId ? 'text-n-slate-12' : 'text-n-slate-11'"
-          @click="toggleMenu('assignee')"
-        >
-          <template v-if="selectedAssignee" #icon>
-            <Avatar
-              :src="selectedAssignee.thumbnail"
-              :name="selectedAssignee.name"
-              :size="16"
-              rounded-full
-            />
-          </template>
-          <span class="truncate">{{ selectedAssigneeLabel }}</span>
-          <Icon icon="i-lucide-chevron-down" class="text-n-slate-11 shrink-0" />
-        </Button>
-        <DropdownMenu
-          v-if="openMenu === 'assignee'"
-          :menu-items="assigneeItems"
-          show-search
-          class="mt-1 end-0 top-full w-56 max-h-72"
-          @action="setAssignee"
-        />
-      </OnClickOutside>
-      <OnClickOutside class="relative" @trigger="closeOnOutside('more')">
-        <Button
-          variant="outline"
-          size="sm"
-          icon="i-lucide-list-filter"
-          class="!h-7 !px-2"
-          :color="hasMoreFilters ? 'blue' : 'slate'"
-          :class="hasMoreFilters ? '' : 'text-n-slate-11'"
-          @click="toggleMenu('more')"
-        >
-          {{ t('CALLS_PAGE.FILTERS.MORE_FILTERS') }}
-          <Icon
-            icon="i-lucide-chevron-down"
-            :class="hasMoreFilters ? '' : 'text-n-slate-11'"
-          />
-        </Button>
-        <DropdownMenu
-          v-if="openMenu === 'more'"
-          :menu-sections="moreFiltersSections"
-          class="mt-1 end-0 top-full w-56 max-h-80"
-          @action="applyMoreFilter"
-        />
-      </OnClickOutside>
-    </div>
-  </div>
-</template>

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

@@ -1,51 +0,0 @@
-import {
-  VOICE_CALL_STATUS,
-  VOICE_CALL_DIRECTION,
-} from 'dashboard/components-next/message/constants';
-
-export const CALL_KIND = {
-  ONGOING: 'ongoing',
-  INCOMING: 'incoming',
-  OUTGOING: 'outgoing',
-  MISSED: 'missed',
-  NO_REPLY: 'no_reply',
-  FAILED: 'failed',
-};
-
-// The API returns display values: status (ringing/in-progress/completed/
-// no-answer/failed) and direction (inbound/outbound). The list UI presents
-// them as a single "kind" per row.
-export const getCallKind = call => {
-  if (
-    [VOICE_CALL_STATUS.RINGING, VOICE_CALL_STATUS.IN_PROGRESS].includes(
-      call.status
-    )
-  ) {
-    return CALL_KIND.ONGOING;
-  }
-  if (
-    [VOICE_CALL_STATUS.FAILED, VOICE_CALL_STATUS.REJECTED].includes(call.status)
-  ) {
-    return CALL_KIND.FAILED;
-  }
-  const isInbound = call.direction === VOICE_CALL_DIRECTION.INBOUND;
-  if (call.status === VOICE_CALL_STATUS.NO_ANSWER) {
-    return isInbound ? CALL_KIND.MISSED : CALL_KIND.NO_REPLY;
-  }
-  return isInbound ? CALL_KIND.INCOMING : CALL_KIND.OUTGOING;
-};
-
-// Filter chips map to the status/direction params supported by CallFinder.
-export const CALL_ACTIVITY_PARAMS = {
-  missed: {
-    status: VOICE_CALL_STATUS.NO_ANSWER,
-    direction: VOICE_CALL_DIRECTION.INBOUND,
-  },
-  no_reply: {
-    status: VOICE_CALL_STATUS.NO_ANSWER,
-    direction: VOICE_CALL_DIRECTION.OUTBOUND,
-  },
-  incoming: { direction: VOICE_CALL_DIRECTION.INBOUND },
-  outgoing: { direction: VOICE_CALL_DIRECTION.OUTBOUND },
-  in_progress: { status: VOICE_CALL_STATUS.IN_PROGRESS },
-};

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

@@ -83,12 +83,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const {
+  const { medium, channel_type: type } = props.inbox;
-    medium,
+  return getInboxIconByType(type, medium);
-    channel_type: type,
-    voice_enabled: voiceEnabled,
-  } = props.inbox;
-  return getInboxIconByType(type, medium, 'fill', voiceEnabled);
 });
 </script>
 

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

@@ -16,6 +16,7 @@ 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';
@@ -82,18 +83,39 @@ 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) => {
-  const response = await whatsappCallSession.initiateOutboundCall(
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
-    conversationIdHint
+  // conversation. Use the caller's hint when given (in-conversation flow);
-      ? { conversationId: conversationIdHint }
+  // otherwise pick the most recent one in the inbox.
-      : { contactId: props.contactId, inboxId }
+  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;
-
-  const conversationId = response?.conversation_id || conversationIdHint;
   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

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

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium, voiceEnabled } = inbox.value;
+  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
+  return getInboxIconByType(channelType, medium);
 });
 
 const lastActivityAt = computed(() => {

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

@@ -56,9 +56,6 @@ const localeMenuLabels = computed(() => ({
   'customize-content': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
   ),
-  'select-popular-content': t(
-    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT'
-  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 

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

@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
-import PopularContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -27,7 +26,6 @@ const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 
 const contentDialogRef = ref(null);
-const popularContentDialogRef = ref(null);
 
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
@@ -156,8 +154,6 @@ const handleAction = ({ action }, localeCode) => {
     publishLocale({ localeCode: localeCode });
   } else if (action === 'customize-content') {
     contentDialogRef.value.openForLocale(localeCode);
-  } else if (action === 'select-popular-content') {
-    popularContentDialogRef.value.openForLocale(localeCode);
   } else if (action === 'delete') {
     deletePortalLocale({ localeCode: localeCode });
   }
@@ -178,6 +174,5 @@ const handleAction = ({ action }, localeCode) => {
       @action="handleAction($event, locale.code)"
     />
     <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
-    <PopularContentDialog ref="popularContentDialogRef" :portal="portal" />
   </ul>
 </template>

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

@@ -1,235 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useDebounceFn } from '@vueuse/core';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
-import categoriesAPI from 'dashboard/api/helpCenter/categories';
-import articlesAPI from 'dashboard/api/helpCenter/articles';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ReorderableMultiSelect from 'dashboard/components-next/combobox/ReorderableMultiSelect.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const MAX_CATEGORIES = 3;
-const MAX_ARTICLES = 6;
-const KEY = 'HELP_CENTER.LOCALES_PAGE.POPULAR_CONTENT_DIALOG';
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const activeLocale = ref('');
-// One flag per picker so each shows its skeleton until its own data loads.
-const categoriesLoading = ref(false);
-const { run: runArticleRequest, isPending: articlesLoading } =
-  useAbortableRequest();
-
-const categoryOptions = ref([]);
-const selectedCategoryIds = ref([]);
-
-// Articles are searched server-side, so cache options for selected items that
-// fall outside the current results.
-const articleResults = ref([]);
-const articleOptionById = ref({});
-const selectedArticleIds = ref([]);
-
-const popularContent = computed(
-  () => props.portal?.config?.popular_content || {}
-);
-
-const articleOptions = computed(() => {
-  const options = new Map();
-  selectedArticleIds.value.forEach(id => {
-    if (articleOptionById.value[id])
-      options.set(id, articleOptionById.value[id]);
-  });
-  articleResults.value.forEach(option => options.set(option.value, option));
-  return [...options.values()];
-});
-
-const toArticleOption = article => ({
-  value: article.id,
-  label: article.title,
-  subtitle: t(`${KEY}.ARTICLES.IN_CATEGORY`, {
-    category: article.category?.name || t(`${KEY}.ARTICLES.UNCATEGORIZED`),
-  }),
-});
-
-const fetchCategories = async localeCode => {
-  const {
-    data: { payload },
-  } = await categoriesAPI.get({
-    portalSlug: props.portal?.slug,
-    locale: localeCode,
-  });
-  return payload.map(category => ({
-    value: category.id,
-    label: category.name,
-    subtitle: t(`${KEY}.CATEGORIES.ARTICLES_COUNT`, {
-      count: category.meta?.articles_count || 0,
-    }),
-    icon: category.icon,
-    iconColor: category.icon_color,
-  }));
-};
-
-const requestArticles = async (query, signal) => {
-  const { data } = await articlesAPI.getArticles({
-    pageNumber: 1,
-    portalSlug: props.portal?.slug,
-    locale: activeLocale.value,
-    status: 'published',
-    query,
-    signal,
-  });
-  articleResults.value = data.payload.map(article => {
-    const option = toArticleOption(article);
-    articleOptionById.value[article.id] = option;
-    return option;
-  });
-};
-
-const searchArticles = (query = '') =>
-  runArticleRequest(signal => requestArticles(query, signal));
-
-const onArticleSearch = useDebounceFn(searchArticles, 300);
-
-// Resolve options for pre-selected articles that aren't in the current results.
-const cacheSelectedArticleOptions = async () => {
-  const unknownIds = selectedArticleIds.value.filter(
-    id => !articleOptionById.value[id]
-  );
-  await Promise.all(
-    unknownIds.map(async id => {
-      try {
-        const { data } = await articlesAPI.getArticle({
-          id,
-          portalSlug: props.portal?.slug,
-        });
-        articleOptionById.value[id] = toArticleOption(data.payload);
-      } catch {
-        // Deleted since it was picked; leave it for the id fallback.
-      }
-    })
-  );
-};
-
-const loadCategories = async localeCode => {
-  categoriesLoading.value = true;
-  try {
-    const options = await fetchCategories(localeCode);
-    // Reopened for another locale mid-flight; drop the stale response.
-    if (localeCode !== activeLocale.value) return;
-    categoryOptions.value = options;
-  } catch (error) {
-    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
-  } finally {
-    if (localeCode === activeLocale.value) categoriesLoading.value = false;
-  }
-};
-
-const loadArticles = async () => {
-  try {
-    await runArticleRequest(signal =>
-      Promise.all([cacheSelectedArticleOptions(), requestArticles('', signal)])
-    );
-  } catch (error) {
-    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
-  }
-};
-
-const openForLocale = localeCode => {
-  const existing = popularContent.value[localeCode] || {};
-  activeLocale.value = localeCode;
-  selectedCategoryIds.value = [...(existing.category_ids || [])];
-  selectedArticleIds.value = [...(existing.article_ids || [])];
-  categoryOptions.value = [];
-  articleResults.value = [];
-  articleOptionById.value = {};
-  dialogRef.value?.open();
-
-  loadCategories(localeCode);
-  loadArticles();
-};
-
-const onConfirm = async () => {
-  const updated = { ...popularContent.value };
-  const entry = {
-    category_ids: selectedCategoryIds.value,
-    article_ids: selectedArticleIds.value,
-  };
-
-  if (entry.category_ids.length || entry.article_ids.length) {
-    updated[activeLocale.value] = entry;
-  } else {
-    delete updated[activeLocale.value];
-  }
-
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: { popular_content: updated },
-    });
-    dialogRef.value?.close();
-    useAlert(t(`${KEY}.API.SUCCESS_MESSAGE`));
-  } catch (error) {
-    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
-  }
-};
-
-defineExpose({ openForLocale });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t(`${KEY}.TITLE`)"
-    :description="t(`${KEY}.DESCRIPTION`)"
-    :confirm-button-label="t(`${KEY}.CONFIRM`)"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-5">
-      <ReorderableMultiSelect
-        v-model="selectedCategoryIds"
-        :options="categoryOptions"
-        :max="MAX_CATEGORIES"
-        :label="t(`${KEY}.CATEGORIES.LABEL`)"
-        :add-label="t(`${KEY}.ADD_ANOTHER`)"
-        :search-placeholder="t(`${KEY}.SEARCH`)"
-        :empty-state="t(`${KEY}.EMPTY`)"
-        fallback-icon="i-lucide-folder"
-        :loading="categoriesLoading"
-      >
-        <template #counter="{ remaining }">
-          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
-        </template>
-        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
-      </ReorderableMultiSelect>
-      <ReorderableMultiSelect
-        v-model="selectedArticleIds"
-        server-search
-        :options="articleOptions"
-        :max="MAX_ARTICLES"
-        :label="t(`${KEY}.ARTICLES.LABEL`)"
-        :add-label="t(`${KEY}.ADD_ANOTHER`)"
-        :search-placeholder="t(`${KEY}.SEARCH`)"
-        :empty-state="t(`${KEY}.EMPTY`)"
-        :loading="articlesLoading"
-        @search="onArticleSearch"
-      >
-        <template #counter="{ remaining }">
-          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
-        </template>
-        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
-      </ReorderableMultiSelect>
-    </div>
-  </Dialog>
-</template>

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

@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium, voiceEnabled } = inbox.value;
+  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium, 'fill', voiceEnabled);
+  return getInboxIconByType(channelType, medium);
 });
 
 const hasSlaThreshold = computed(() => {

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

@@ -234,7 +234,6 @@ onMounted(() => resetContacts());
     ref="popoverRef"
     :align="align"
     :show-content-border="false"
-    :close-on-scroll="false"
     @show="onPopoverShow"
     @hide="onPopoverHide"
   >

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

@@ -37,11 +37,10 @@ const transformInbox = ({
   channelType,
   phoneNumber,
   medium,
-  voiceEnabled,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, medium, 'line', voiceEnabled),
+  icon: getInboxIconByType(channelType, medium, 'line'),
   label: generateLabelForContactableInboxesList({
     name,
     email,
@@ -55,7 +54,6 @@ const transformInbox = ({
   phoneNumber,
   channelType,
   medium,
-  voiceEnabled,
   ...rest,
 });
 

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

@@ -79,20 +79,6 @@ describe('composeConversationHelper', () => {
         channelType: INBOX_TYPES.EMAIL,
       });
     });
-
-    it('uses the voice glyph for a voice-enabled inbox', () => {
-      const inboxes = [
-        {
-          id: 2,
-          name: 'WhatsApp Cloud',
-          channelType: INBOX_TYPES.WHATSAPP,
-          voiceEnabled: true,
-        },
-      ];
-
-      const result = helpers.buildContactableInboxesList(inboxes);
-      expect(result[0].icon).toBe('i-woot-whatsapp-voice');
-    });
   });
 
   describe('getCapitalizedNameFromEmail', () => {

app/javascript/dashboard/components-next/audio/AudioPlayer.vue

@@ -1,158 +0,0 @@
-<script setup>
-import { computed, getCurrentInstance, ref, useTemplateRef } from 'vue';
-import { downloadFile } from '@chatwoot/utils';
-import { useEmitter } from 'dashboard/composables/emitter';
-import { emitter } from 'shared/helpers/mitt';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  src: {
-    type: String,
-    required: true,
-  },
-  fallbackDuration: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const PLAYBACK_SPEEDS = [1, 1.5, 2];
-
-const audioPlayer = useTemplateRef('audioPlayer');
-const { uid } = getCurrentInstance();
-
-const isPlaying = ref(false);
-const currentTime = ref(0);
-const duration = ref(props.fallbackDuration);
-const playbackSpeed = ref(1);
-
-const onLoadedMetadata = () => {
-  const loadedDuration = audioPlayer.value?.duration;
-  if (Number.isFinite(loadedDuration)) duration.value = loadedDuration;
-};
-
-const formatTime = time => {
-  if (!time || Number.isNaN(time)) return '00:00';
-  const minutes = Math.floor(time / 60);
-  const seconds = Math.floor(time % 60);
-  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-};
-
-const playbackSpeedLabel = computed(() => `${playbackSpeed.value}x`);
-
-const displayedTime = computed(() =>
-  formatTime(
-    isPlaying.value || currentTime.value ? currentTime.value : duration.value
-  )
-);
-
-// Only one recording should play at a time across the list.
-useEmitter('pause_playing_audio', currentPlayingId => {
-  if (currentPlayingId !== uid && isPlaying.value) {
-    audioPlayer.value?.pause();
-    isPlaying.value = false;
-  }
-});
-
-const playOrPause = () => {
-  if (isPlaying.value) {
-    audioPlayer.value.pause();
-    isPlaying.value = false;
-  } else {
-    emitter.emit('pause_playing_audio', uid);
-    audioPlayer.value.play();
-    isPlaying.value = true;
-  }
-};
-
-const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value?.currentTime;
-};
-
-const seek = event => {
-  const time = Number(event.target.value);
-  audioPlayer.value.currentTime = time;
-  currentTime.value = time;
-};
-
-const onEnd = () => {
-  isPlaying.value = false;
-  currentTime.value = 0;
-};
-
-const changePlaybackSpeed = () => {
-  const currentIndex = PLAYBACK_SPEEDS.indexOf(playbackSpeed.value);
-  playbackSpeed.value =
-    PLAYBACK_SPEEDS[(currentIndex + 1) % PLAYBACK_SPEEDS.length];
-  audioPlayer.value.playbackRate = playbackSpeed.value;
-};
-
-const downloadRecording = () => {
-  downloadFile({ url: props.src, type: 'audio' });
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-center h-8 gap-2 px-2 rounded-full bg-n-alpha-1 dark:bg-n-alpha-2 overflow-hidden"
-    @click.stop
-  >
-    <audio
-      ref="audioPlayer"
-      class="hidden"
-      playsinline
-      @loadedmetadata="onLoadedMetadata"
-      @timeupdate="onTimeUpdate"
-      @ended="onEnd"
-    >
-      <source :src="src" />
-    </audio>
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      class="!w-6 !p-0 text-n-slate-12"
-      @click="playOrPause"
-    >
-      <template #icon>
-        <Icon
-          :icon="isPlaying ? 'i-woot-audio-pause' : 'i-woot-audio-play'"
-          class="size-4 flex-shrink-0 text-n-slate-11"
-        />
-      </template>
-    </Button>
-    <input
-      type="range"
-      min="0"
-      :max="duration || 0"
-      :value="currentTime"
-      class="flex-1 min-w-0 lg:grow-0 lg:basis-24 h-0.5 rounded-full appearance-none cursor-pointer bg-n-slate-12/30 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:size-2 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-n-slate-11 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:size-2 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-n-slate-11"
-      @input="seek"
-    />
-    <span class="text-label-small tabular-nums text-n-slate-11 shrink-0">
-      {{ displayedTime }}
-    </span>
-    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      :label="playbackSpeedLabel"
-      class="!px-1 min-w-6 !text-n-slate-11"
-      @click="changePlaybackSpeed"
-    />
-    <div class="w-px h-3.5 bg-n-slate-6 shrink-0" />
-    <Button
-      variant="ghost"
-      color="slate"
-      size="xs"
-      class="!w-6 !p-0 text-n-slate-11"
-      @click="downloadRecording"
-    >
-      <template #icon>
-        <Icon icon="i-lucide-download" class="size-4 flex-shrink-0" />
-      </template>
-    </Button>
-  </div>
-</template>

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

@@ -58,12 +58,8 @@ const menuItems = computed(() => [
 ]);
 
 const icon = computed(() => {
-  const {
+  const { medium, channel_type: type } = props.inbox;
-    medium,
+  return getInboxIconByType(type, medium, 'outline');
-    channel_type: type,
-    voice_enabled: voiceEnabled,
-  } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline', voiceEnabled);
 });
 
 const handleAction = ({ action, value }) => {

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantAudienceForm.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, watch, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
+import AudienceGroup from './audience/AudienceGroup.vue';
+import { useAudienceFilterTypes } from './audience/useAudienceFilterTypes.js';
+
+const props = defineProps({
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+const { filterTypes } = useAudienceFilterTypes();
+
+let uid = 0;
+const nextId = () => {
+  uid += 1;
+  return `audience-root-${uid}`;
+};
+
+const hasConditions = node =>
+  node && Object.prototype.hasOwnProperty.call(node, 'conditions');
+
+const defaultRoot = () => ({ id: nextId(), operator: 'and', conditions: [] });
+
+const root = ref(defaultRoot());
+const mode = ref('everyone');
+
+const findOption = (filterType, value) =>
+  filterType?.options?.find(option => String(option.id) === String(value));
+
+const hydrateValues = (leaf, filterType) => {
+  const raw = Array.isArray(leaf.values) ? leaf.values : [leaf.values];
+  const inputType = filterType?.inputType;
+  if (inputType === 'multiSelect') {
+    return raw.map(
+      value => findOption(filterType, value) ?? { id: value, name: value }
+    );
+  }
+  if (['searchSelect', 'booleanSelect'].includes(inputType)) {
+    return findOption(filterType, raw[0]) ?? { id: raw[0], name: raw[0] };
+  }
+  return raw[0] ?? '';
+};
+
+const hydrateNode = node => {
+  if (hasConditions(node)) {
+    return {
+      id: nextId(),
+      operator: node.operator || 'and',
+      conditions: (node.conditions || []).map(hydrateNode),
+    };
+  }
+
+  const filterType = filterTypes.value.find(
+    type => type.attributeKey === node.attribute_key
+  );
+  return {
+    id: nextId(),
+    attributeKey: node.attribute_key,
+    filterOperator: node.filter_operator,
+    values: hydrateValues(node, filterType),
+    attributeModel: filterType?.attributeModel || 'standard',
+  };
+};
+
+const hydrateRoot = audience => {
+  if (!audience) return defaultRoot();
+  const hydrated = hydrateNode(audience);
+  return hasConditions(hydrated)
+    ? hydrated
+    : { id: nextId(), operator: 'and', conditions: [hydrated] };
+};
+
+const serializeValues = values => {
+  if (Array.isArray(values)) {
+    return values[0]?.id ? values.map(value => value.id) : values;
+  }
+  if (values && typeof values === 'object') {
+    return [values.id];
+  }
+  if (values === '' || values === null || values === undefined) {
+    return [];
+  }
+  return [values];
+};
+
+const serializeNode = node => {
+  if (hasConditions(node)) {
+    return {
+      operator: node.operator,
+      conditions: node.conditions.map(serializeNode),
+    };
+  }
+  return {
+    attribute_key: node.attributeKey,
+    filter_operator: node.filterOperator,
+    values: serializeValues(node.values),
+  };
+};
+
+const groupRef = useTemplateRef('groupRef');
+
+const handleSubmit = () => {
+  const isSpecific = mode.value === 'specific';
+  if (isSpecific && !groupRef.value.validate()) return;
+
+  const audience =
+    isSpecific && root.value.conditions.length
+      ? serializeNode(root.value)
+      : null;
+
+  emit('submit', {
+    config: {
+      ...props.assistant.config,
+      audience,
+    },
+  });
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (!newAssistant) return;
+    const audience = newAssistant.config?.audience;
+    root.value = hydrateRoot(audience);
+    mode.value = audience ? 'specific' : 'everyone';
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-3">
+      <RadioCard
+        id="everyone"
+        :label="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.EVERYONE.LABEL')"
+        :description="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.EVERYONE.DESC')"
+        :is-active="mode === 'everyone'"
+        @select="mode = 'everyone'"
+      />
+      <RadioCard
+        id="specific"
+        :label="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.SPECIFIC.LABEL')"
+        :description="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.SPECIFIC.DESC')"
+        :is-active="mode === 'specific'"
+        @select="mode = 'specific'"
+      >
+        <AudienceGroup
+          v-if="mode === 'specific'"
+          ref="groupRef"
+          v-model="root"
+          is-root
+          class="w-full mt-2"
+          :filter-types="filterTypes"
+        />
+      </RadioCard>
+    </div>
+    <div>
+      <Button
+        :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+        @click="handleSubmit"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantScheduleForm.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import RadioCard from 'dashboard/components-next/radioCard/RadioCard.vue';
+
+const props = defineProps({
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const OPTIONS = ['always', 'business_hours', 'outside_business_hours'];
+
+const selected = ref('always');
+
+const handleSubmit = () => {
+  emit('submit', {
+    config: { ...props.assistant.config, response_window: selected.value },
+  });
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (newAssistant) {
+      selected.value = newAssistant.config?.response_window || 'always';
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-3">
+      <RadioCard
+        v-for="option in OPTIONS"
+        :id="option"
+        :key="option"
+        :label="
+          t(`CAPTAIN.ASSISTANTS.FORM.SCHEDULE.${option.toUpperCase()}.LABEL`)
+        "
+        :description="
+          t(`CAPTAIN.ASSISTANTS.FORM.SCHEDULE.${option.toUpperCase()}.DESC`)
+        "
+        :is-active="selected === option"
+        @select="selected = $event"
+      />
+    </div>
+    <p class="text-sm text-n-slate-11">
+      {{ t('CAPTAIN.ASSISTANTS.FORM.SCHEDULE.HINT') }}
+    </p>
+    <div>
+      <Button
+        :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+        @click="handleSubmit"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/audience/AudienceGroup.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'next/button/Button.vue';
+import FilterSelect from 'dashboard/components-next/filter/inputs/FilterSelect.vue';
+import ConditionRow from 'dashboard/components-next/filter/ConditionRow.vue';
+
+const props = defineProps({
+  filterTypes: { type: Array, required: true },
+  depth: { type: Number, default: 0 },
+  maxDepth: { type: Number, default: 1 },
+  isRoot: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['remove']);
+
+const node = defineModel({ type: Object, required: true });
+
+const { t } = useI18n();
+
+let uid = 0;
+const nextId = () => {
+  uid += 1;
+  return `audience-${Date.now()}-${uid}`;
+};
+
+const DEFAULT_LEAF = () => ({
+  id: nextId(),
+  attributeKey: 'email',
+  filterOperator: 'contains',
+  values: '',
+  attributeModel: 'standard',
+});
+
+const operatorOptions = [
+  { value: 'and', label: t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.MATCH_ALL') },
+  { value: 'or', label: t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.MATCH_ANY') },
+];
+
+const isGroup = child =>
+  Object.prototype.hasOwnProperty.call(child, 'conditions');
+
+const addCondition = () => {
+  node.value.conditions.push(DEFAULT_LEAF());
+};
+
+const addGroup = () => {
+  node.value.conditions.push({
+    id: nextId(),
+    operator: 'and',
+    conditions: [DEFAULT_LEAF()],
+  });
+};
+
+const removeChild = index => {
+  node.value.conditions.splice(index, 1);
+  // A nested group must always hold at least one condition; remove the whole group when emptied.
+  if (!props.isRoot && node.value.conditions.length === 0) {
+    emit('remove');
+  }
+};
+
+const leafRefs = useTemplateRef('leafRefs');
+const groupRefs = useTemplateRef('groupRefs');
+
+const validate = () => {
+  const leavesValid = (leafRefs.value ?? []).every(row => row.validate());
+  const groupsValid = (groupRefs.value ?? []).every(group => group.validate());
+  return leavesValid && groupsValid;
+};
+
+defineExpose({ validate });
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-4 group/audience-group"
+    :class="
+      isRoot
+        ? 'p-4 border border-n-weak rounded-xl'
+        : 'p-3 border border-n-weak bg-n-alpha-1 rounded-lg'
+    "
+  >
+    <div class="flex items-center gap-2">
+      <div class="flex items-center gap-1.5 text-sm text-n-slate-11">
+        <span>{{ t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.MATCH_PREFIX') }}</span>
+        <FilterSelect
+          v-model="node.operator"
+          variant="faded"
+          hide-icon
+          class="text-sm"
+          :options="operatorOptions"
+        />
+        <span>{{ t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.MATCH_SUFFIX') }}</span>
+      </div>
+      <Button
+        v-if="!isRoot"
+        sm
+        ghost
+        slate
+        icon="i-lucide-trash"
+        class="ml-auto flex-shrink-0 opacity-0 transition-opacity group-hover/audience-group:opacity-100"
+        @click="emit('remove')"
+      />
+    </div>
+
+    <ul class="grid gap-3 list-none">
+      <template v-for="(child, index) in node.conditions" :key="child.id">
+        <AudienceGroup
+          v-if="isGroup(child)"
+          ref="groupRefs"
+          v-model="node.conditions[index]"
+          :filter-types="filterTypes"
+          :depth="depth + 1"
+          :max-depth="maxDepth"
+          @remove="removeChild(index)"
+        />
+        <ConditionRow
+          v-else
+          ref="leafRefs"
+          v-model:attribute-key="child.attributeKey"
+          v-model:filter-operator="child.filterOperator"
+          v-model:values="child.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          searchable-attributes
+          @remove="removeChild(index)"
+        />
+      </template>
+    </ul>
+
+    <div
+      v-if="isRoot && !node.conditions.length"
+      class="flex flex-col items-center gap-1.5 px-4 py-8 text-center border border-dashed rounded-lg border-n-weak"
+    >
+      <span class="text-2xl i-lucide-users-round text-n-slate-10" />
+      <p class="text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.EMPTY_TITLE') }}
+      </p>
+      <p class="max-w-md text-sm text-n-slate-11">
+        {{ t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.EMPTY_BODY') }}
+      </p>
+    </div>
+
+    <div class="flex gap-2">
+      <Button
+        sm
+        ghost
+        blue
+        icon="i-lucide-plus"
+        class="flex-shrink-0"
+        :label="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.ADD_CONDITION')"
+        @click="addCondition"
+      />
+      <Button
+        v-if="depth < maxDepth"
+        sm
+        ghost
+        blue
+        icon="i-lucide-plus"
+        class="flex-shrink-0"
+        :label="t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.ADD_GROUP')"
+        @click="addGroup"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/audience/useAudienceFilterTypes.js

@@ -0,0 +1,137 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useContactFilterContext } from 'dashboard/components-next/filter/contactProvider.js';
+import { useOperators } from 'dashboard/components-next/filter/operators.js';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+
+const STANDARD_ICONS = {
+  name: 'i-lucide-user',
+  email: 'i-lucide-mail',
+  phone_number: 'i-lucide-phone',
+  identifier: 'i-lucide-fingerprint',
+  country_code: 'i-lucide-flag',
+  city: 'i-lucide-map-pin',
+  company_name: 'i-lucide-building-2',
+  created_at: 'i-lucide-calendar',
+  last_activity_at: 'i-lucide-activity',
+  blocked: 'i-lucide-ban',
+  labels: 'i-lucide-tags',
+  hmac_verified: 'i-lucide-user-check',
+  browser_language: 'i-lucide-globe',
+  conversation_language: 'i-lucide-languages',
+};
+
+const CUSTOM_TYPE_ICONS = {
+  text: 'i-lucide-type',
+  number: 'i-lucide-hash',
+  currency: 'i-lucide-banknote',
+  percent: 'i-lucide-percent',
+  link: 'i-lucide-link',
+  date: 'i-lucide-calendar',
+  list: 'i-lucide-list',
+  checkbox: 'i-lucide-square-check',
+};
+
+const DEFAULT_ICON = 'i-lucide-tag';
+
+const header = (id, label) => ({
+  value: `__group_${id}`,
+  label,
+  disabled: true,
+});
+
+export function useAudienceFilterTypes() {
+  const { t } = useI18n();
+  const { filterTypes: contactFilterTypes } = useContactFilterContext();
+  const { equalityOperators } = useOperators();
+  const contactAttributes = useMapGetter('attributes/getContactAttributes');
+
+  const customTypeByKey = computed(() =>
+    Object.fromEntries(
+      (contactAttributes.value || []).map(attr => [
+        attr.attributeKey,
+        attr.attributeDisplayType,
+      ])
+    )
+  );
+
+  const conversationOption = (key, label, options) => ({
+    attributeKey: key,
+    value: key,
+    attributeName: label,
+    label,
+    icon: STANDARD_ICONS[key],
+    inputType: 'searchSelect',
+    options,
+    dataType: 'text',
+    filterOperators: equalityOperators.value,
+    attributeModel: 'additional',
+  });
+
+  const conversationTypes = computed(() => [
+    conversationOption(
+      'hmac_verified',
+      t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.LOGGED_IN'),
+      [
+        {
+          id: 'true',
+          name: t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.LOGGED_IN_TRUE'),
+        },
+        {
+          id: 'false',
+          name: t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.LOGGED_IN_FALSE'),
+        },
+      ]
+    ),
+    conversationOption(
+      'browser_language',
+      t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.BROWSER_LANGUAGE'),
+      languages
+    ),
+    conversationOption(
+      'conversation_language',
+      t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.CONVERSATION_LANGUAGE'),
+      languages
+    ),
+  ]);
+
+  const standardTypes = computed(() =>
+    contactFilterTypes.value
+      .filter(type => type.attributeModel !== 'customAttributes')
+      .map(type => ({
+        ...type,
+        icon: STANDARD_ICONS[type.attributeKey] || DEFAULT_ICON,
+      }))
+  );
+
+  const customTypes = computed(() =>
+    contactFilterTypes.value
+      .filter(type => type.attributeModel === 'customAttributes')
+      .filter(type => type.attributeKey in customTypeByKey.value)
+      .map(type => ({
+        ...type,
+        icon:
+          CUSTOM_TYPE_ICONS[customTypeByKey.value[type.attributeKey]] ||
+          DEFAULT_ICON,
+      }))
+  );
+
+  const filterTypes = computed(() => [
+    header('contact', t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.GROUP_CONTACT')),
+    ...standardTypes.value,
+    header(
+      'conversation',
+      t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.GROUP_CONVERSATION')
+    ),
+    ...conversationTypes.value,
+    ...(customTypes.value.length
+      ? [
+          header('custom', t('CAPTAIN.ASSISTANTS.FORM.AUDIENCE.GROUP_CUSTOM')),
+          ...customTypes.value,
+        ]
+      : []),
+  ]);
+
+  return { filterTypes };
+}

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/audience/useAudienceFilterTypes.spec.js

@@ -0,0 +1,99 @@
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
+import { useAudienceFilterTypes } from './useAudienceFilterTypes';
+
+const state = vi.hoisted(() => ({
+  contactFilterTypes: [],
+  contactAttributes: [],
+  equalityOperators: [{ value: 'equal_to' }, { value: 'not_equal_to' }],
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({ t: key => key }),
+}));
+
+vi.mock('dashboard/composables/store.js', () => ({
+  useMapGetter: () => ({ value: state.contactAttributes }),
+}));
+
+vi.mock('dashboard/components-next/filter/contactProvider.js', () => ({
+  useContactFilterContext: () => ({
+    filterTypes: { value: state.contactFilterTypes },
+  }),
+}));
+
+vi.mock('dashboard/components-next/filter/operators.js', () => ({
+  useOperators: () => ({
+    equalityOperators: { value: state.equalityOperators },
+  }),
+}));
+
+describe('useAudienceFilterTypes', () => {
+  beforeEach(() => {
+    state.contactFilterTypes = [
+      { attributeKey: 'email', attributeModel: 'standard' },
+      { attributeKey: 'mystery', attributeModel: 'standard' },
+      { attributeKey: 'signed_up_on', attributeModel: 'customAttributes' },
+      { attributeKey: 'company_size', attributeModel: 'customAttributes' },
+    ];
+    state.contactAttributes = [
+      { attributeKey: 'signed_up_on', attributeDisplayType: 'date' },
+    ];
+  });
+
+  const build = () => useAudienceFilterTypes().filterTypes.value;
+
+  it('assembles grouped sections in order', () => {
+    const keys = build().map(item => item.attributeKey ?? item.value);
+    expect(keys).toEqual([
+      '__group_contact',
+      'email',
+      'mystery',
+      '__group_conversation',
+      'hmac_verified',
+      'browser_language',
+      'conversation_language',
+      '__group_custom',
+      'signed_up_on',
+    ]);
+  });
+
+  it('marks headers as disabled options', () => {
+    const headers = build().filter(item => item.value?.startsWith('__group_'));
+    expect(headers).toHaveLength(3);
+    expect(headers.every(header => header.disabled)).toBe(true);
+  });
+
+  it('excludes custom attributes that are not contact-model attributes', () => {
+    const keys = build().map(item => item.attributeKey);
+    expect(keys).not.toContain('company_size');
+  });
+
+  it('omits the custom section when there are no contact custom attributes', () => {
+    state.contactAttributes = [];
+    const values = build().map(item => item.attributeKey ?? item.value);
+    expect(values).not.toContain('__group_custom');
+    expect(values).not.toContain('signed_up_on');
+  });
+
+  it('assigns icons by attribute key with a default fallback', () => {
+    const byKey = Object.fromEntries(
+      build().map(item => [item.attributeKey, item.icon])
+    );
+    expect(byKey.email).toBe('i-lucide-mail');
+    expect(byKey.mystery).toBe('i-lucide-tag');
+    expect(byKey.signed_up_on).toBe('i-lucide-calendar');
+  });
+
+  it('builds conversation options as searchSelects with equality operators', () => {
+    const types = build();
+    const hmac = types.find(item => item.attributeKey === 'hmac_verified');
+    expect(hmac.inputType).toBe('searchSelect');
+    expect(hmac.filterOperators).toEqual(state.equalityOperators);
+    expect(hmac.options.map(option => option.id)).toEqual(['true', 'false']);
+
+    const browserLanguage = types.find(
+      item => item.attributeKey === 'browser_language'
+    );
+    expect(browserLanguage.options).toEqual(languages);
+  });
+});

app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue

@@ -9,7 +9,6 @@ const props = defineProps({
   // null = neutral, true = good direction, false = bad direction
   trendGood: { type: Boolean, default: null },
   clickable: { type: Boolean, default: false },
-  loading: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['click']);
@@ -46,11 +45,7 @@ const onActivate = () => {
         class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
       />
     </div>
-    <div v-if="loading" class="flex items-end justify-between gap-2">
+    <div class="flex items-end justify-between gap-2">
-      <div class="w-20 rounded h-9 bg-n-slate-3 animate-pulse" />
-      <div class="w-10 h-5 rounded bg-n-slate-3 animate-pulse" />
-    </div>
-    <div v-else class="flex items-end justify-between gap-2">
       <span
         class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
       >

app/javascript/dashboard/components-next/captain/pageComponents/overview/WelcomeCard.vue

@@ -9,10 +9,6 @@ const props = defineProps({
     type: String,
     default: '30',
   },
-  stats: {
-    type: Object,
-    default: null,
-  },
 });
 
 const route = useRoute();
@@ -24,41 +20,22 @@ const assistantId = computed(() => route.params.assistantId);
 const welcomeMarkdown = ref('');
 const isLoading = ref(false);
 
-// Increments on every fetch so a slow response for a superseded
-// range/stats/assistant can't overwrite the latest request's state.
-let fetchToken = 0;
-
 const fetchSummary = async () => {
-  fetchToken += 1;
-  const token = fetchToken;
-
-  if (!props.stats) {
-    welcomeMarkdown.value = '';
-    isLoading.value = false;
-    return;
-  }
-
   isLoading.value = true;
-  let message = '';
   try {
     const { data } = await CaptainAssistant.getSummary({
       assistantId: assistantId.value,
       range: props.range,
-      stats: props.stats,
     });
-    message = data.message ?? '';
+    welcomeMarkdown.value = data.message ?? '';
   } catch {
-    message = '';
+    welcomeMarkdown.value = '';
+  } finally {
+    isLoading.value = false;
   }
-
-  if (token !== fetchToken) return;
-  welcomeMarkdown.value = message;
-  isLoading.value = false;
 };
 
-watch([() => props.range, () => props.stats, assistantId], fetchSummary, {
+watch([() => props.range, assistantId], fetchSummary, { immediate: true });
-  immediate: true,
-});
 
 // Render through the shared markdown formatter (html disabled, so it is safe)
 // used everywhere else for Captain output, instead of a bespoke parser. It

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

@@ -1,8 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   open: {
@@ -29,10 +27,6 @@ const props = defineProps({
     type: [String, Number, Array],
     default: () => [],
   },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['select', 'search']);
@@ -69,22 +63,13 @@ defineExpose({
     class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
   >
     <div class="relative border-b border-n-strong">
-      <Spinner
+      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
-        v-if="loading"
-        :size="16"
-        class="absolute top-2.5 start-3 text-n-slate-11"
-      />
-      <Icon
-        v-else
-        icon="i-lucide-search"
-        class="absolute top-2.5 size-4 start-3"
-      />
       <input
         ref="searchInput"
         :value="searchValue"
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="reset-base w-full py-2 !ps-10 !pe-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
         @input="onInputSearch"
       />
     </div>

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

@@ -1,297 +0,0 @@
-<script setup>
-import { ref, computed, nextTick } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-// Drag-reorderable multi-select capped at `max`. The model is the ordered list
-// of selected values.
-const props = defineProps({
-  // { value, label, subtitle?, icon?, iconColor? } — icon is an emoji or an
-  // icon-picker value, and falls back to `fallbackIcon`.
-  options: {
-    type: Array,
-    default: () => [],
-  },
-  max: {
-    type: Number,
-    default: 3,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  addLabel: {
-    type: String,
-    default: '',
-  },
-  searchPlaceholder: {
-    type: String,
-    default: '',
-  },
-  emptyState: {
-    type: String,
-    default: '',
-  },
-  fallbackIcon: {
-    type: String,
-    default: 'i-lucide-file-text',
-  },
-  // Show skeleton rows while options load, so the row height stays stable.
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  // Let the parent filter `options` (via the `search` event) instead of locally.
-  serverSearch: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['search']);
-
-const selectedIds = defineModel({ type: Array, default: () => [] });
-
-const isOpen = ref(false);
-const searchQuery = ref('');
-const dragIndex = ref(null);
-const dropdownRef = ref(null);
-
-const optionsByValue = computed(
-  () => new Map(props.options.map(option => [option.value, option]))
-);
-
-const selectedRows = computed(() =>
-  selectedIds.value.map(
-    id => optionsByValue.value.get(id) || { value: id, label: String(id) }
-  )
-);
-
-const remaining = computed(() => props.max - selectedIds.value.length);
-
-const canAddMore = computed(() => selectedIds.value.length < props.max);
-
-const dropdownOptions = computed(() => {
-  const available = props.options.filter(
-    option => !selectedIds.value.includes(option.value)
-  );
-  if (props.serverSearch) return available;
-
-  const query = searchQuery.value.toLowerCase();
-  return available.filter(option =>
-    option.label?.toLowerCase().includes(query)
-  );
-});
-
-const onSearch = value => {
-  searchQuery.value = value;
-  emit('search', value);
-};
-
-const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
-  if (isOpen.value) {
-    onSearch('');
-    nextTick(() => dropdownRef.value?.focus());
-  }
-};
-
-const onSelect = option => {
-  if (!canAddMore.value) return;
-  selectedIds.value = [...selectedIds.value, option.value];
-  if (!canAddMore.value) isOpen.value = false;
-};
-
-const removeItem = id => {
-  selectedIds.value = selectedIds.value.filter(value => value !== id);
-};
-
-const onDragStart = index => {
-  dragIndex.value = index;
-};
-
-const onDragOver = index => {
-  if (dragIndex.value === null || dragIndex.value === index) return;
-  const ids = [...selectedIds.value];
-  const [moved] = ids.splice(dragIndex.value, 1);
-  ids.splice(index, 0, moved);
-  dragIndex.value = index;
-  selectedIds.value = ids;
-};
-
-const onDragEnd = () => {
-  dragIndex.value = null;
-};
-</script>
-
-<template>
-  <div>
-    <div
-      v-if="label || $slots.counter"
-      class="flex items-center justify-between mb-1.5"
-    >
-      <label class="text-sm font-medium text-n-slate-12">{{ label }}</label>
-      <div class="flex items-center gap-2">
-        <span class="text-xs text-n-slate-10">
-          <slot name="counter" :remaining="remaining" :max="max" />
-        </span>
-        <div class="flex items-center gap-1">
-          <span
-            v-for="slot in max"
-            :key="slot"
-            class="w-4 h-1 rounded-full"
-            :class="slot <= selectedIds.length ? 'bg-n-brand' : 'bg-n-slate-4'"
-          />
-        </div>
-      </div>
-    </div>
-
-    <OnClickOutside @trigger="isOpen = false">
-      <div
-        class="flex flex-col gap-1 p-1 border rounded-xl border-n-weak bg-n-background"
-        :class="{ 'opacity-50 pointer-events-none': disabled }"
-      >
-        <div
-          v-if="loading && selectedIds.length && !isOpen"
-          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
-          aria-busy="true"
-        >
-          <div
-            v-for="n in selectedIds.length"
-            :key="n"
-            class="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-n-alpha-2"
-          >
-            <span
-              class="flex-shrink-0 opacity-40 i-lucide-grip-vertical size-4 text-n-slate-9"
-            />
-            <div class="flex-shrink-0 rounded-md size-6 bg-n-alpha-3" />
-            <div class="flex-grow min-w-0">
-              <p class="mb-0 text-sm">
-                <span
-                  class="inline-block w-32 h-2.5 align-middle rounded bg-n-alpha-3 animate-pulse"
-                />
-              </p>
-              <p class="mb-0 text-xs">
-                <span
-                  class="inline-block w-20 h-2 align-middle rounded bg-n-alpha-3 animate-pulse"
-                />
-              </p>
-            </div>
-            <span class="flex-shrink-0 size-6" />
-          </div>
-        </div>
-
-        <div
-          v-else-if="selectedRows.length"
-          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
-        >
-          <div
-            v-for="(row, index) in selectedRows"
-            :key="row.value"
-            draggable="true"
-            class="flex items-center gap-2 px-2 py-1.5 transition-colors rounded-lg cursor-grab group/row"
-            :class="
-              index === dragIndex
-                ? 'opacity-40 bg-n-alpha-3 ring-1 ring-inset ring-n-brand'
-                : 'bg-n-alpha-2 hover:bg-n-alpha-3'
-            "
-            @dragstart="onDragStart(index)"
-            @dragover.prevent="onDragOver(index)"
-            @dragend="onDragEnd"
-          >
-            <span
-              class="flex-shrink-0 transition-colors i-lucide-grip-vertical size-4 text-n-slate-9 group-hover/row:text-n-slate-11"
-            />
-            <div
-              class="flex items-center justify-center flex-shrink-0 text-sm rounded-md size-6 bg-n-alpha-3 text-n-slate-11"
-            >
-              <EmojiIcon
-                v-if="row.icon"
-                :value="row.icon"
-                :color="row.iconColor"
-                class="shrink-0 size-4"
-              />
-              <span v-else class="size-4" :class="fallbackIcon" />
-            </div>
-            <div class="flex-grow min-w-0">
-              <p class="mb-0 text-sm truncate text-n-slate-12">
-                {{ row.label }}
-              </p>
-              <p
-                v-if="row.subtitle"
-                class="mb-0 text-xs truncate text-n-slate-10"
-              >
-                {{ row.subtitle }}
-              </p>
-            </div>
-            <Button
-              type="button"
-              ghost
-              slate
-              xs
-              no-animation
-              icon="i-lucide-x"
-              class="flex-shrink-0"
-              @click="removeItem(row.value)"
-            />
-          </div>
-        </div>
-
-        <div v-if="canAddMore" class="relative">
-          <Button
-            type="button"
-            ghost
-            slate
-            sm
-            no-animation
-            justify="start"
-            :label="addLabel"
-            :disabled="loading && !isOpen"
-            class="w-full"
-            @click="toggleDropdown"
-          >
-            <template #icon>
-              <Spinner
-                v-if="loading && !isOpen"
-                :size="16"
-                class="text-n-slate-11"
-              />
-              <Icon
-                v-else
-                icon="i-lucide-search"
-                class="flex-shrink-0 size-4"
-              />
-            </template>
-          </Button>
-          <ComboBoxDropdown
-            ref="dropdownRef"
-            :open="isOpen"
-            :options="dropdownOptions"
-            :search-value="searchQuery"
-            :search-placeholder="searchPlaceholder"
-            :empty-state="emptyState"
-            :loading="loading"
-            @update:search-value="onSearch"
-            @select="onSelect"
-          />
-        </div>
-      </div>
-    </OnClickOutside>
-
-    <p
-      v-if="selectedIds.length && $slots.note"
-      class="flex items-center gap-1.5 mt-1.5 mb-0 text-xs text-n-slate-11"
-    >
-      <span class="rounded-full size-1.5 bg-n-teal-9" />
-      <slot name="note" />
-    </p>
-  </div>
-</template>

app/javascript/dashboard/components-next/combobox/specs/ReorderableMultiSelect.spec.js

@@ -1,224 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { h } from 'vue';
-import ReorderableMultiSelect from '../ReorderableMultiSelect.vue';
-
-const OPTIONS = [
-  { value: 1, label: 'Getting started', subtitle: 'Guides' },
-  { value: 2, label: 'Billing', subtitle: 'Payments' },
-  { value: 3, label: 'Security' },
-  { value: 4, label: 'API', icon: '🔌', iconColor: '#000' },
-];
-
-// A findable dropdown stub that exposes the `focus()` the component calls on open.
-const ComboBoxDropdownStub = {
-  name: 'ComboBoxDropdown',
-  props: [
-    'open',
-    'options',
-    'searchValue',
-    'searchPlaceholder',
-    'emptyState',
-    'loading',
-  ],
-  emits: ['select', 'update:searchValue'],
-  methods: { focus() {} },
-  template: '<div class="combo-dropdown" />',
-};
-
-// Renders a real <button> so clicks reach the parent handlers; `data-icon`
-// lets specs tell the remove buttons (icon="i-lucide-x") from the add trigger.
-const ButtonStub = {
-  name: 'Button',
-  props: ['label', 'icon', 'disabled'],
-  emits: ['click'],
-  template:
-    '<button :data-icon="icon" :disabled="disabled" @click="$emit(\'click\')"><slot name="icon" />{{ label }}</button>',
-};
-
-const mountSelect = (props = {}, slots = {}) =>
-  mount(ReorderableMultiSelect, {
-    props: { options: OPTIONS, max: 3, ...props },
-    slots,
-    global: {
-      stubs: {
-        Button: ButtonStub,
-        ComboBoxDropdown: ComboBoxDropdownStub,
-        Spinner: true,
-        Icon: true,
-        EmojiIcon: true,
-        OnClickOutside: { template: '<div><slot /></div>' },
-      },
-    },
-  });
-
-const dropdown = wrapper => wrapper.findComponent(ComboBoxDropdownStub);
-const addTrigger = wrapper =>
-  wrapper.findAll('button').find(button => !button.attributes('data-icon'));
-const removeButtons = wrapper =>
-  wrapper.findAll('button[data-icon="i-lucide-x"]');
-const rows = wrapper => wrapper.findAll('[draggable="true"]');
-const lastModel = wrapper => wrapper.emitted('update:modelValue')?.at(-1)?.[0];
-
-describe('ReorderableMultiSelect', () => {
-  describe('rendering selected rows', () => {
-    it('renders rows in model order with labels resolved from options', () => {
-      const wrapper = mountSelect({ modelValue: [2, 1] });
-
-      const labels = rows(wrapper).map(row => row.find('p').text());
-      expect(labels).toEqual(['Billing', 'Getting started']);
-    });
-
-    it('falls back to the stringified id when an option is unknown', () => {
-      const wrapper = mountSelect({ modelValue: [99] });
-
-      expect(rows(wrapper)[0].find('p').text()).toBe('99');
-    });
-
-    it('renders the progress dots filled up to the selection count', () => {
-      const wrapper = mountSelect({
-        modelValue: [1, 2],
-        max: 3,
-        label: 'Tags',
-      });
-
-      const filled = wrapper.findAll('.bg-n-brand').length;
-      expect(filled).toBe(2);
-    });
-
-    it('exposes remaining and max to the counter slot', () => {
-      const wrapper = mountSelect(
-        { modelValue: [1], max: 3 },
-        { counter: ({ remaining, max }) => h('span', `${remaining}/${max}`) }
-      );
-
-      expect(wrapper.text()).toContain('2/3');
-    });
-  });
-
-  describe('adding options', () => {
-    it('appends the chosen option to the model', () => {
-      const wrapper = mountSelect({ modelValue: [1] });
-
-      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
-
-      expect(lastModel(wrapper)).toEqual([1, 2]);
-    });
-
-    it('hides the add trigger once the model reaches max', () => {
-      const wrapper = mountSelect({ modelValue: [1, 2], max: 2 });
-
-      expect(addTrigger(wrapper)).toBeUndefined();
-      expect(dropdown(wrapper).exists()).toBe(false);
-    });
-
-    it('closes the dropdown when the last slot is filled', async () => {
-      const wrapper = mountSelect({ modelValue: [1], max: 2 });
-      await addTrigger(wrapper).trigger('click');
-      expect(dropdown(wrapper).props('open')).toBe(true);
-
-      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
-      await wrapper.vm.$nextTick();
-
-      // Reaching max removes the trigger (and its dropdown) entirely.
-      expect(dropdown(wrapper).exists()).toBe(false);
-    });
-
-    it('excludes already-selected options from the dropdown', () => {
-      const wrapper = mountSelect({ modelValue: [1] });
-
-      const values = dropdown(wrapper)
-        .props('options')
-        .map(option => option.value);
-      expect(values).toEqual([2, 3, 4]);
-    });
-  });
-
-  describe('removing options', () => {
-    it('removes the clicked item from the model', async () => {
-      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
-
-      await removeButtons(wrapper)[1].trigger('click');
-
-      expect(lastModel(wrapper)).toEqual([1, 3]);
-    });
-  });
-
-  describe('searching', () => {
-    it('filters options locally by label', async () => {
-      const wrapper = mountSelect({ modelValue: [] });
-
-      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
-      await wrapper.vm.$nextTick();
-
-      const values = dropdown(wrapper)
-        .props('options')
-        .map(option => option.value);
-      expect(values).toEqual([2]);
-    });
-
-    it('emits search and skips local filtering when serverSearch is set', async () => {
-      const wrapper = mountSelect({ modelValue: [], serverSearch: true });
-
-      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
-      await wrapper.vm.$nextTick();
-
-      expect(wrapper.emitted('search').at(-1)).toEqual(['bill']);
-      // All unselected options remain; the parent owns filtering.
-      expect(dropdown(wrapper).props('options')).toHaveLength(4);
-    });
-
-    it('emits an empty search when the trigger opens', async () => {
-      const wrapper = mountSelect({ modelValue: [1] });
-
-      await addTrigger(wrapper).trigger('click');
-
-      expect(wrapper.emitted('search').at(-1)).toEqual(['']);
-      expect(dropdown(wrapper).props('open')).toBe(true);
-    });
-  });
-
-  describe('reordering', () => {
-    it('moves a row to the dropped position within the model', async () => {
-      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
-
-      await rows(wrapper)[0].trigger('dragstart');
-      await rows(wrapper)[2].trigger('dragover');
-
-      expect(lastModel(wrapper)).toEqual([2, 3, 1]);
-    });
-  });
-
-  describe('loading state', () => {
-    it('shows skeleton rows when loading a non-empty, closed selection', () => {
-      const wrapper = mountSelect({ modelValue: [1, 2], loading: true });
-
-      const skeleton = wrapper.find('[aria-busy="true"]');
-      expect(skeleton.exists()).toBe(true);
-      expect(skeleton.findAll('.animate-pulse').length).toBeGreaterThan(0);
-    });
-
-    it('does not show skeletons when the selection is empty', () => {
-      const wrapper = mountSelect({ modelValue: [], loading: true });
-
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
-    });
-
-    it('shows the real rows, not skeletons, while searching in an open dropdown', async () => {
-      // Open first (trigger is enabled), then a live search turns loading on.
-      const wrapper = mountSelect({ modelValue: [1, 2] });
-      await addTrigger(wrapper).trigger('click');
-
-      await wrapper.setProps({ loading: true });
-
-      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
-      expect(rows(wrapper)).toHaveLength(2);
-    });
-
-    it('forwards loading to the dropdown and disables the closed trigger', () => {
-      const wrapper = mountSelect({ modelValue: [1], loading: true });
-
-      expect(dropdown(wrapper).props('loading')).toBe(true);
-      expect(addTrigger(wrapper).attributes('disabled')).toBeDefined();
-    });
-  });
-});

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

@@ -3,13 +3,8 @@ import { ref, computed, onMounted, watch } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
-import {
+import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
-  isTwilioComplete,
+import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
-  isTwilioMediaTemplate,
-  getTwilioMediaVariableKey,
-  getTwilioMediaUrl,
-  applyTwilioMediaFilename,
-} from '@chatwoot/utils';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 
@@ -45,23 +40,30 @@ const templateBody = computed(() => {
   return props.template.body || '';
 });
 
-// Media-template detection and variable extraction are shared with the mobile
+const hasMediaTemplate = computed(() => {
-// app via @chatwoot/utils.
+  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
-const hasMediaTemplate = computed(() => isTwilioMediaTemplate(props.template));
+});
 
 const hasVariables = computed(() => {
   return templateBody.value?.match(VARIABLE_PATTERN) !== null;
 });
 
-const mediaVariableKey = computed(() =>
+const mediaVariableKey = computed(() => {
-  getTwilioMediaVariableKey(props.template)
+  if (!hasMediaTemplate.value) return null;
-);
+  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
+  if (!mediaUrl) return null;
+  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
+});
 
-const hasMediaVariable = computed(() => mediaVariableKey.value !== null);
+const hasMediaVariable = computed(() => {
+  return hasMediaTemplate.value && mediaVariableKey.value !== null;
+});
 
-const templateMediaUrl = computed(() =>
+const templateMediaUrl = computed(() => {
-  hasMediaTemplate.value ? getTwilioMediaUrl(props.template) : ''
+  if (!hasMediaTemplate.value) return '';
-);
+
+  return props.template?.types?.['twilio/media']?.media?.[0] || '';
+});
 
 const variablePattern = computed(() => {
   if (!hasVariables.value) return [];
@@ -81,10 +83,26 @@ const renderedTemplate = computed(() => {
   return rendered;
 });
 
-// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(() => {
-const isFormInvalid = computed(
+  if (!hasVariables.value && !hasMediaVariable.value) return false;
-  () => !isTwilioComplete(props.template, processedParams.value)
+
-);
+  if (hasVariables.value) {
+    const hasEmptyVariable = variablePattern.value.some(
+      variable => !processedParams.value[variable]
+    );
+    if (hasEmptyVariable) return true;
+  }
+
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    !processedParams.value[mediaVariableKey.value]
+  ) {
+    return true;
+  }
+
+  return false;
+});
 
 const v$ = useVuelidate(
   {
@@ -117,11 +135,19 @@ const sendMessage = () => {
 
   const { friendly_name, language } = props.template;
 
-  // For media templates, reduce the media URL to a filename before sending.
+  // Process parameters and extract filename from media URL if needed
-  const processedParameters = applyTwilioMediaFilename(
+  const processedParameters = { ...processedParams.value };
-    props.template,
+
-    processedParams.value
+  // For media templates, extract filename from full URL
-  );
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    processedParameters[mediaVariableKey.value]
+  ) {
+    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
+      processedParameters[mediaVariableKey.value]
+    );
+  }
 
   const payload = {
     message: renderedTemplate.value,

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

@@ -15,6 +15,7 @@ import { validateSingleFilter } from 'dashboard/helper/validations.js';
 const { filterTypes } = defineProps({
   showQueryOperator: { type: Boolean, default: false },
   filterTypes: { type: Array, required: true },
+  searchableAttributes: { type: Boolean, default: false },
 });
 
 const emit = defineEmits(['remove']);
@@ -199,6 +200,7 @@ defineExpose({ validate, resetValidation });
         v-model="attributeKey"
         variant="faded"
         :options="filterTypes"
+        :searchable="searchableAttributes"
         @update:model-value="resetModelOnAttributeKeyChange"
       />
       <FilterSelect

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

@@ -165,16 +165,6 @@ export function useContactFilterContext() {
       filterOperators: dateOperators.value,
       attributeModel: 'standard',
     },
-    {
-      attributeKey: CONTACT_ATTRIBUTES.REFERER,
-      value: CONTACT_ATTRIBUTES.REFERER,
-      attributeName: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
-      label: t('CONTACTS_LAYOUT.FILTER.REFERER_LINK'),
-      inputType: 'plainText',
-      dataType: 'text',
-      filterOperators: containmentOperators.value,
-      attributeModel: 'standard',
-    },
     {
       attributeKey: CONTACT_ATTRIBUTES.BLOCKED,
       value: CONTACT_ATTRIBUTES.BLOCKED,

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useElementBounding, useWindowSize } from '@vueuse/core';
 import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
 import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
@@ -7,6 +8,7 @@ import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
 import Button from 'next/button/Button.vue';
+import Icon from 'next/icon/Icon.vue';
 
 // [{label, icon, value}]
 const props = defineProps({
@@ -30,6 +32,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  searchable: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const selected = defineModel({
@@ -37,9 +43,21 @@ const selected = defineModel({
   required: true,
 });
 
+const { t } = useI18n();
+
+const searchQuery = ref('');
 const triggerRef = ref(null);
 const dropdownRef = ref(null);
 
+const filteredOptions = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!props.searchable || !query) return props.options;
+  return props.options.filter(
+    option =>
+      !option.disabled && (option.label || '').toLowerCase().includes(query)
+  );
+});
+
 const { top } = useElementBounding(triggerRef);
 const { height } = useWindowSize();
 const { height: dropdownHeight } = useElementBounding(dropdownRef);
@@ -65,6 +83,12 @@ const dropdownPosition = computed(() => {
 
 const updateSelected = newValue => {
   selected.value = newValue;
+  searchQuery.value = '';
+};
+
+const handleTriggerClick = toggle => {
+  searchQuery.value = '';
+  toggle();
 };
 </script>
 
@@ -81,7 +105,7 @@ const updateSelected = newValue => {
           :icon="iconToRender"
           :trailing-icon="selectedOption.icon ? false : true"
           :label="label || (hideLabel ? null : selectedOption.label)"
-          @click="toggle"
+          @click="handleTriggerClick(toggle)"
         />
       </slot>
     </template>
@@ -91,8 +115,17 @@ const updateSelected = newValue => {
       :class="dropdownPosition"
       strong
     >
+      <div v-if="searchable" class="relative">
+        <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
+        <input
+          v-model="searchQuery"
+          v-focus
+          class="w-full p-1.5 pl-8 rounded-lg text-n-slate-11 bg-n-alpha-1"
+          :placeholder="t('FILTER.SEARCH_PLACEHOLDER')"
+        />
+      </div>
       <DropdownSection class="[&>ul]:max-h-72">
-        <template v-for="option in options" :key="option.value">
+        <template v-for="option in filteredOptions" :key="option.value">
           <li
             v-if="option.disabled"
             class="px-2 py-1.5 text-xs font-medium text-n-slate-10 select-none"
@@ -106,6 +139,12 @@ const updateSelected = newValue => {
             @click="updateSelected(option.value)"
           />
         </template>
+        <li
+          v-if="searchable && !filteredOptions.length"
+          class="px-2 py-1.5 text-sm text-n-slate-10 select-none"
+        >
+          {{ t('FILTER.NO_RESULTS') }}
+        </li>
       </DropdownSection>
     </DropdownBody>
   </DropdownContainer>

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

@@ -1,5 +1,6 @@
 <script setup>
 import { computed, toRef } from 'vue';
+import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import { useChannelIcon, useChannelBrandIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -20,6 +21,7 @@ defineOptions({ inheritAttrs: false });
 
 const inboxRef = toRef(props, 'inbox');
 
+const hasVoiceBadge = computed(() => isVoiceCallEnabled(props.inbox));
 const channelIcon = useChannelIcon(inboxRef);
 const brandIcon = useChannelBrandIcon(inboxRef);
 
@@ -29,7 +31,13 @@ const icon = computed(() =>
 </script>
 
 <template>
-  <span class="inline-flex" v-bind="$attrs">
+  <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>
 </template>

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

@@ -1,9 +1,4 @@
-import {
+import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
-  INBOX_TYPES,
-  TWILIO_CHANNEL_MEDIUM,
-  isVoiceCallEnabled,
-  getInboxVoiceIcon,
-} from 'dashboard/helper/inbox';
 import { computed } from 'vue';
 
 const channelTypeIconMap = {
@@ -66,9 +61,16 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Voice-enabled inboxes use the combined channel + voice-wave badge glyph.
+    // Native Twilio voice inbox: a TwilioSms with voice enabled (and no WhatsApp medium)
-    if (isVoiceCallEnabled(inboxDetails)) {
+    // is presented as a Voice channel, so show the phone icon.
-      icon = getInboxVoiceIcon(type, inboxDetails.medium);
+    const voiceEnabled =
+      inboxDetails.voice_enabled || inboxDetails.voiceEnabled;
+    if (
+      type === INBOX_TYPES.TWILIO &&
+      voiceEnabled &&
+      inboxDetails.medium !== TWILIO_CHANNEL_MEDIUM.WHATSAPP
+    ) {
+      icon = 'i-woot-voice';
     }
 
     return icon ?? 'i-ri-global-fill';

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

@@ -19,32 +19,13 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-whatsapp');
   });
 
-  it('returns the voice-call glyph for a voice-enabled Twilio channel', () => {
+  it('returns correct icon for voice-enabled Twilio channel', () => {
     const inbox = {
       channel_type: 'Channel::TwilioSms',
       voice_enabled: true,
     };
     const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-voice-call');
+    expect(icon).toBe('i-woot-voice');
-  });
-
-  it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp channel', () => {
-    const inbox = {
-      channel_type: 'Channel::Whatsapp',
-      voice_enabled: true,
-    };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-whatsapp-voice');
-  });
-
-  it('returns the WhatsApp voice glyph for a voice-enabled Twilio WhatsApp channel', () => {
-    const inbox = {
-      channel_type: 'Channel::TwilioSms',
-      medium: 'whatsapp',
-      voice_enabled: true,
-    };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-woot-whatsapp-voice');
   });
 
   it('returns correct icon for Line channel', () => {

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

@@ -1,342 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n, I18nT } from 'vue-i18n';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Popover from 'dashboard/components-next/popover/Popover.vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useMessageContext } from './provider.js';
-import { MESSAGE_VARIANTS, ORIENTATION } from './constants';
-
-const props = defineProps({
-  messageId: { type: Number, required: true },
-});
-
-const { t } = useI18n();
-const { orientation, variant, createdAt } = useMessageContext();
-const store = useStore();
-const { isCloudFeatureEnabled } = useAccount();
-
-const isOpen = ref(false);
-
-const showSparkle = computed(() =>
-  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
-);
-
-const session = computed(() =>
-  store.getters['captainAgentSessions/getSessionByMessageId'](props.messageId)
-);
-const hasFetched = computed(() =>
-  store.getters['captainAgentSessions/hasFetched'](props.messageId)
-);
-const isLoading = computed(
-  () =>
-    !hasFetched.value ||
-    store.getters['captainAgentSessions/isFetching'](props.messageId)
-);
-
-const citations = computed(() => session.value?.citations || []);
-
-const scenarioTitles = computed(() =>
-  (session.value?.scenarios || []).reduce((map, scenario) => {
-    map[scenario.id] = scenario.title;
-    return map;
-  }, {})
-);
-
-// Fallback for agents without a matching scenario title:
-// "chatwoot_assistant" → "Chatwoot assistant",
-// "scenario_5_chatwoot_uptime_agent" → "Chatwoot uptime".
-const humanizeAgentName = agentName => {
-  const label = agentName
-    .replace(/^scenario_\d+_/, '')
-    .replace(/_agent$/, '')
-    .replaceAll('_', ' ')
-    .trim();
-  return label.charAt(0).toUpperCase() + label.slice(1);
-};
-
-const handoffLabel = agentName => {
-  const scenarioId = agentName.match(/^scenario_(\d+)/)?.[1];
-  return scenarioTitles.value[scenarioId] || humanizeAgentName(agentName);
-};
-
-const ACRONYMS = ['faq', 'api', 'url', 'id', 'sla', 'csat'];
-
-// Tool names arrive as RubyLLM identifiers like
-// "captain--tools--faq_lookup" or "custom_get_status_page_overview";
-// show "FAQ Lookup" / "Get Status Page Overview" instead.
-const humanizeToolName = name => {
-  return (name || '')
-    .split('--')
-    .pop()
-    .replace(/^custom_/, '')
-    .split('_')
-    .filter(Boolean)
-    .map(word =>
-      ACRONYMS.includes(word)
-        ? word.toUpperCase()
-        : word.charAt(0).toUpperCase() + word.slice(1)
-    )
-    .join(' ');
-};
-
-// Argument keys are camelCased by the store ("labelName"); show "Label Name".
-const humanizeArgumentKey = key =>
-  key
-    .replace(/([a-z])([A-Z])/g, '$1 $2')
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ');
-
-const formatArguments = args => {
-  if (!args || typeof args !== 'object') return '';
-  return Object.entries(args)
-    .map(([key, value]) => `${humanizeArgumentKey(key)}: ${value}`)
-    .join(', ');
-};
-
-// Timeline of what Captain did during the run: tool calls (with their
-// arguments) and scenario/agent handoffs. Message bodies and raw tool
-// results are intentionally not echoed here.
-const steps = computed(() => {
-  const runContext = session.value?.runContext;
-  const result = [];
-  let currentAgent = null;
-
-  (Array.isArray(runContext) ? runContext : []).forEach(entry => {
-    if (entry?.role !== 'assistant') return;
-
-    const agentName = entry.agentName;
-    if (agentName && agentName !== currentAgent) {
-      if (currentAgent !== null) {
-        result.push({ type: 'handoff', name: handoffLabel(agentName) });
-      }
-      currentAgent = agentName;
-    }
-
-    (entry.toolCalls || []).forEach(call => {
-      // Agent-to-agent transfers surface as "handoff_to_<agent>" tool calls;
-      // the agent_name change above already yields a handoff step for them.
-      if (call.name?.startsWith('handoff_to_')) return;
-
-      result.push({
-        type: 'tool',
-        name: humanizeToolName(call.name),
-        detail: formatArguments(call.arguments),
-      });
-    });
-  });
-
-  return result;
-});
-
-// The final assistant entry stores structured content ({response, reasoning});
-// surface the model's reasoning for the reply it produced.
-const reasoning = computed(() => {
-  const runContext = session.value?.runContext;
-  if (!Array.isArray(runContext)) return '';
-
-  const entry = [...runContext]
-    .reverse()
-    .find(item => item?.role === 'assistant' && item.content?.reasoning);
-  return entry?.content?.reasoning || '';
-});
-
-const STEP_ICONS = {
-  tool: 'i-ph-wrench',
-  handoff: 'i-ph-user-switch',
-};
-
-const STEP_KEYPATHS = {
-  tool: 'CONVERSATION.CAPTAIN_GENERATION.STEP_TOOL',
-  handoff: 'CONVERSATION.CAPTAIN_GENERATION.STEP_HANDOFF',
-};
-
-const currentUser = useMapGetter('getCurrentUser');
-const isSuperAdmin = computed(() => currentUser.value.type === 'SuperAdmin');
-
-// Model and credits are only surfaced to super admins and in development.
-const devDetails = computed(() => {
-  if (!session.value) return null;
-  if (!import.meta.env.DEV && !isSuperAdmin.value) return null;
-  const model = t('CONVERSATION.CAPTAIN_GENERATION.MODEL', {
-    model: session.value.llmModel,
-  });
-  const credits = t('CONVERSATION.CAPTAIN_GENERATION.CREDITS', {
-    credits: session.value.creditsConsumed,
-  });
-  return `${model} · ${credits}`;
-});
-
-// With the sparkle at the row start, the meta gets pushed to the opposite end;
-// without it, fall back to the message orientation.
-const rowLayoutClass = computed(() => {
-  if (showSparkle.value) return 'justify-between';
-  return orientation.value === ORIENTATION.LEFT
-    ? 'justify-start'
-    : 'justify-end';
-});
-
-// Blend the sparkle with the bubble background: amber on private notes,
-// slate everywhere else. Tokens adapt to dark mode on their own.
-const sparkleColorClass = computed(() => {
-  if (variant.value === MESSAGE_VARIANTS.PRIVATE) {
-    return isOpen.value
-      ? 'text-n-amber-12/80'
-      : 'text-n-amber-12/40 hover:text-n-amber-12/70';
-  }
-  return isOpen.value
-    ? 'text-n-slate-12'
-    : 'text-n-slate-11/60 hover:text-n-slate-12';
-});
-
-const popoverAlign = computed(() =>
-  orientation.value === ORIENTATION.LEFT ? 'start' : 'end'
-);
-
-const prefetch = () => {
-  store.dispatch('captainAgentSessions/fetch', {
-    messageId: props.messageId,
-    createdAt: createdAt.value,
-  });
-};
-
-const onPopoverShow = () => {
-  isOpen.value = true;
-  prefetch();
-};
-
-const onPopoverHide = () => {
-  isOpen.value = false;
-};
-</script>
-
-<template>
-  <div class="flex items-center gap-1.5" :class="rowLayoutClass">
-    <Popover
-      v-if="showSparkle"
-      :align="popoverAlign"
-      @show="onPopoverShow"
-      @hide="onPopoverHide"
-    >
-      <button
-        v-tooltip="t('CONVERSATION.CAPTAIN_GENERATION.TITLE')"
-        type="button"
-        class="inline-flex items-center gap-1 p-0 bg-transparent border-0 cursor-pointer"
-        :class="sparkleColorClass"
-        @mouseenter="prefetch"
-        @focus="prefetch"
-      >
-        <Icon icon="i-ph-sparkle-fill" class="size-3.5" />
-        <span class="text-xs">
-          {{ t('CONVERSATION.CAPTAIN_GENERATION.GENERATED_BY') }}
-        </span>
-      </button>
-      <template #content>
-        <div class="flex flex-col gap-4 p-4 w-80">
-          <span v-if="isLoading" class="text-xs text-n-slate-11">
-            {{ t('CONVERSATION.CAPTAIN_GENERATION.LOADING') }}
-          </span>
-          <span v-else-if="!session" class="text-xs text-n-slate-11">
-            {{ t('CONVERSATION.CAPTAIN_GENERATION.EMPTY') }}
-          </span>
-          <template v-else>
-            <div v-if="steps.length" class="flex flex-col gap-2">
-              <span class="text-xs font-medium text-n-slate-11">
-                {{ t('CONVERSATION.CAPTAIN_GENERATION.TIMELINE') }}
-              </span>
-              <div class="flex flex-col">
-                <div
-                  v-for="(step, index) in steps"
-                  :key="index"
-                  class="flex gap-2.5"
-                >
-                  <div class="flex flex-col items-center">
-                    <span
-                      class="flex items-center justify-center rounded-full size-5 bg-n-alpha-2 text-n-slate-11"
-                    >
-                      <Icon :icon="STEP_ICONS[step.type]" class="size-3" />
-                    </span>
-                    <span
-                      v-if="index < steps.length - 1"
-                      class="flex-1 w-px min-h-2 bg-n-weak"
-                    />
-                  </div>
-                  <div
-                    class="flex flex-col min-w-0 gap-0.5"
-                    :class="index < steps.length - 1 ? 'pb-3' : ''"
-                  >
-                    <I18nT
-                      :keypath="STEP_KEYPATHS[step.type]"
-                      tag="span"
-                      class="text-xs leading-5 text-n-slate-11"
-                    >
-                      <template #name>
-                        <span class="font-medium text-n-slate-12">
-                          {{ step.name }}
-                        </span>
-                      </template>
-                    </I18nT>
-                    <span
-                      v-if="step.detail"
-                      class="text-xs text-n-slate-11 break-words"
-                    >
-                      {{ step.detail }}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div v-if="citations.length" class="flex flex-col gap-2">
-              <div class="flex items-baseline gap-1.5">
-                <span class="text-xs font-medium text-n-slate-11">
-                  {{ t('CONVERSATION.CAPTAIN_GENERATION.SOURCES') }}
-                </span>
-                <span class="text-xs text-n-slate-10">
-                  {{
-                    t(
-                      'CONVERSATION.CAPTAIN_GENERATION.SOURCES_SUMMARY',
-                      citations.length
-                    )
-                  }}
-                </span>
-              </div>
-              <ul class="flex flex-col gap-1 m-0 list-disc ps-4">
-                <li
-                  v-for="citation in citations"
-                  :key="citation.id"
-                  class="text-xs text-n-slate-12"
-                >
-                  <a
-                    v-if="citation.link"
-                    :href="citation.link"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="text-xs text-n-blue-11 hover:underline"
-                  >
-                    {{ citation.title || citation.link }}
-                  </a>
-                  <span v-else>{{ citation.title }}</span>
-                </li>
-              </ul>
-            </div>
-            <div v-if="reasoning" class="flex flex-col gap-2">
-              <span class="text-xs font-medium text-n-slate-11">
-                {{ t('CONVERSATION.CAPTAIN_GENERATION.REASONING') }}
-              </span>
-              <p class="m-0 text-xs leading-normal text-n-slate-12 break-words">
-                {{ reasoning }}
-              </p>
-            </div>
-            <span v-if="devDetails" class="text-xs text-n-slate-11">
-              {{ devDetails }}
-            </span>
-          </template>
-        </div>
-      </template>
-    </Popover>
-    <slot name="meta" />
-  </div>
-</template>

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

@@ -457,11 +457,10 @@ function handleReplyTo() {
 
 const avatarInfo = computed(() => {
   if (props.contentAttributes?.externalEcho) {
-    const { name, avatar_url, channel_type, medium, voice_enabled } =
+    const { name, avatar_url, channel_type, medium } = inbox.value;
-      inbox.value;
     const iconName = avatar_url
       ? null
-      : getInboxIconByType(channel_type, medium, 'fill', voice_enabled);
+      : getInboxIconByType(channel_type, medium);
     return {
       name: iconName ? '' : name || t('CONVERSATION.NATIVE_APP'),
       src: avatar_url || '',

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

@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 
 import MessageMeta from '../MessageMeta.vue';
-import CaptainGenerationDetails from '../CaptainGenerationDetails.vue';
 
 import { emitter } from 'shared/helpers/mitt';
 import { useMessageContext } from '../provider.js';
@@ -10,38 +9,16 @@ import { useI18n } from 'vue-i18n';
 
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
-import { MESSAGE_VARIANTS, ORIENTATION, SENDER_TYPES } from '../constants';
+import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';
 
 const props = defineProps({
   hideMeta: { type: Boolean, default: false },
 });
 
-const {
+const { variant, orientation, inReplyTo, shouldGroupWithNext } =
-  variant,
+  useMessageContext();
-  orientation,
-  inReplyTo,
-  shouldGroupWithNext,
-  id,
-  sender,
-  senderType,
-} = useMessageContext();
 const { t } = useI18n();
 
-const isCaptainMessage = computed(
-  () =>
-    (sender.value?.type ?? senderType.value) === SENDER_TYPES.CAPTAIN_ASSISTANT
-);
-
-const metaColorClass = computed(() =>
-  variant.value === MESSAGE_VARIANTS.PRIVATE
-    ? 'text-n-amber-12/50'
-    : 'text-n-slate-11'
-);
-
-const emailMetaClass = computed(() =>
-  variant.value === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : ''
-);
-
 const varaintBaseMap = {
   [MESSAGE_VARIANTS.AGENT]: 'bg-n-solid-blue text-n-slate-12',
   [MESSAGE_VARIANTS.PRIVATE]:
@@ -137,21 +114,16 @@ const replyToPreview = computed(() => {
       />
     </div>
     <slot />
-    <template v-if="shouldShowMeta">
+    <MessageMeta
-      <CaptainGenerationDetails
+      v-if="shouldShowMeta"
-        v-if="isCaptainMessage"
+      :class="[
-        :message-id="id"
+        flexOrientationClass,
-        class="mt-2"
+        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
-      >
+        variant === MESSAGE_VARIANTS.PRIVATE
-        <template #meta>
+          ? 'text-n-amber-12/50'
-          <MessageMeta :class="[emailMetaClass, metaColorClass]" />
+          : 'text-n-slate-11',
-        </template>
+      ]"
-      </CaptainGenerationDetails>
+      class="mt-2"
-      <MessageMeta
+    />
-        v-else
-        :class="[flexOrientationClass, emailMetaClass, metaColorClass]"
-        class="mt-2"
-      />
-    </template>
   </div>
 </template>

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

@@ -263,9 +263,9 @@ const handleCallBack = async () => {
   if (!canCallBack.value || isInitiatingCall.value) return;
   try {
     if (isWhatsapp.value) {
-      const response = await whatsappCallSession.initiateOutboundCall({
+      const response = await whatsappCallSession.initiateOutboundCall(
-        conversationId: conversationId.value,
+        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) {

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

@@ -1,11 +1,7 @@
 <script setup>
 import { ref, computed, watch, nextTick } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
-import {
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
-  useBreakpoints,
-  breakpointsTailwind,
-  useEventListener,
-} from '@vueuse/core';
 import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
@@ -20,10 +16,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  closeOnScroll: {
-    type: Boolean,
-    default: true,
-  },
   showContentBorder: {
     type: Boolean,
     default: true,
@@ -49,12 +41,8 @@ const { fixedPosition, updatePosition } = useDropdownPosition(
   { align: props.align }
 );
 
-const SCROLL_CLOSE_THRESHOLD = 24;
-const triggerTopAtOpen = ref(0);
-
 const show = async () => {
   isActive.value = true;
-  triggerTopAtOpen.value = triggerRef.value?.getBoundingClientRect().top ?? 0;
   if (!isMobile.value) {
     await nextTick();
     updatePosition();
@@ -68,22 +56,6 @@ const hide = () => {
   emit('hide');
 };
 
-// The teleported popover tracks its trigger while ancestors scroll; allow
-// small drift (trackpad inertia), but close once the trigger moves further.
-useEventListener(
-  window,
-  'scroll',
-  event => {
-    if (!props.closeOnScroll || !showPopover.value) return;
-    if (popoverRef.value?.contains(event.target)) return;
-    const top = triggerRef.value?.getBoundingClientRect().top ?? 0;
-    if (Math.abs(top - triggerTopAtOpen.value) > SCROLL_CLOSE_THRESHOLD) {
-      hide();
-    }
-  },
-  { capture: true, passive: true }
-);
-
 const toggle = async () => {
   if (isActive.value) hide();
   else await show();

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

@@ -2,7 +2,6 @@
 import { h, ref, computed, onMounted, watch } from 'vue';
 import { provideSidebarContext, useSidebarResize } from './provider';
 import { useAccount } from 'dashboard/composables/useAccount';
-import { useConfig } from 'dashboard/composables/useConfig';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useStore } from 'vuex';
@@ -44,14 +43,7 @@ const emit = defineEmits([
 ]);
 
 const { accountScopedRoute, isOnChatwootCloud } = useAccount();
-const { isEnterprise } = useConfig();
 const store = useStore();
-
-// Calls run on the enterprise-only API (cloud runs enterprise); hide the entry
-// on community so it doesn't lead to a dashboard/CTA the backend can't serve.
-const isCallsAvailable = computed(
-  () => isOnChatwootCloud.value || isEnterprise
-);
 const searchShortcut = useKbd([`$mod`, 'k']);
 const { t } = useI18n();
 
@@ -571,17 +563,6 @@ const menuItems = computed(() => {
         },
       ],
     },
-    ...(isCallsAvailable.value
-      ? [
-          {
-            name: 'Calls',
-            label: t('SIDEBAR.CALLS'),
-            icon: 'i-lucide-phone',
-            to: accountScopedRoute('calls_dashboard_index'),
-            activeOn: ['calls_dashboard_index'],
-          },
-        ]
-      : []),
     {
       name: 'Contacts',
       label: t('SIDEBAR.CONTACTS'),

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

@@ -13,7 +13,6 @@ import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { useI18n } from 'vue-i18n';
 
-import { isWhatsAppComplete } from '@chatwoot/utils';
 import Input from 'dashboard/components-next/input/Input.vue';
 import {
   buildTemplateParameters,
@@ -85,10 +84,29 @@ const renderedTemplate = computed(() => {
   return replaceTemplateVariables(bodyText.value, processedParams.value);
 });
 
-// Completeness validation is shared with the mobile app via @chatwoot/utils.
+const isFormInvalid = computed(() => {
-const isFormInvalid = computed(
+  if (!hasVariables.value && !hasMediaHeader.value) return false;
-  () => !isWhatsAppComplete(props.template, processedParams.value)
+
-);
+  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
+    return true;
+  }
+
+  if (hasVariables.value && processedParams.value.body) {
+    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
+      value => !value
+    );
+    if (hasEmptyBodyVariable) return true;
+  }
+
+  if (processedParams.value.buttons) {
+    const hasEmptyButtonParameter = processedParams.value.buttons.some(
+      button => !button.parameter
+    );
+    if (hasEmptyButtonParameter) return true;
+  }
+
+  return false;
+});
 
 const v$ = useVuelidate(
   {

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

@@ -77,15 +77,6 @@ const handleClose = () => {
   emit('close');
 };
 
-const handleFocusOut = event => {
-  // Keep the menu open while focus stays inside it (e.g. the label search
-  // input); close it once focus leaves the menu entirely.
-  if (menuRef.value?.contains(event.relatedTarget)) {
-    return;
-  }
-  handleClose();
-};
-
 onUnmounted(() => {
   isLocked.value = false;
 });
@@ -98,7 +89,7 @@ onUnmounted(() => {
       class="fixed outline-none z-[9999] cursor-pointer"
       :style="position"
       tabindex="0"
-      @focusout="handleFocusOut"
+      @blur="handleClose"
     >
       <slot />
     </div>

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

@@ -8,8 +8,6 @@ import {
   EditorState,
   Selection,
   imageResizeView,
-  toggleMark,
-  wrapInList,
 } from '@chatwoot/prosemirror-schema';
 import {
   suggestionsPlugin,
@@ -19,6 +17,8 @@ import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
 import embedPreviewPlugin from '@chatwoot/prosemirror-schema/src/plugins/embedPreview';
 import trailingParagraphPlugin from '@chatwoot/prosemirror-schema/src/plugins/trailingParagraph';
 import { embeds as markdownEmbeds } from 'dashboard/helper/markdownEmbeds';
+import { toggleMark } from 'prosemirror-commands';
+import { wrapInList } from 'prosemirror-schema-list';
 import { toggleBlockType } from '@chatwoot/prosemirror-schema/src/menu/common';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { isEscape } from 'shared/helpers/KeyboardHelpers';

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

@@ -69,9 +69,9 @@ const callButtonTooltip = computed(() =>
 const startWhatsappCall = async () => {
   if (whatsappCallSession.isInitiating.value) return;
   try {
-    const response = await whatsappCallSession.initiateOutboundCall({
+    const response = await whatsappCallSession.initiateOutboundCall(
-      conversationId: props.chat.id,
+      props.chat.id
-    });
+    );
 
     // Composable returns LOCKED when init is already in flight or a call is
     // active; soft no-op so a parallel click doesn't trigger a banner.

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

@@ -33,7 +33,9 @@ import {
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
-import wootConstants from 'dashboard/constants/globals';
+import wootConstants, {
+  META_RESTRICTION_STATUS_URL,
+} from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
@@ -93,6 +95,7 @@ export default {
       currentUserId: 'getCurrentUserID',
       listLoadingStatus: 'getAllMessagesLoaded',
       currentAccountId: 'getCurrentAccountId',
+      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
     isOpen() {
       return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
@@ -170,6 +173,13 @@ export default {
         instagramInbox
       );
     },
+    isInstagramRestrictionBannerVisible() {
+      return this.isOnChatwootCloud && this.isAnInstagramChannel;
+    },
+    instagramRestrictionStatusUrl() {
+      return META_RESTRICTION_STATUS_URL;
+    },
+
     replyWindowBannerMessage() {
       if (this.isAWhatsAppChannel) {
         return this.$t('CONVERSATION.TWILIO_WHATSAPP_CAN_REPLY');
@@ -454,7 +464,15 @@ export default {
   >
     <div ref="topBannerRef">
       <Banner
-        v-if="!currentChat.can_reply"
+        v-if="isInstagramRestrictionBannerVisible"
+        color-scheme="warning"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="$t('CONVERSATION.INSTAGRAM_RESTRICTION_BANNER')"
+        :href-link="instagramRestrictionStatusUrl"
+        :href-link-text="$t('CONVERSATION.INSTAGRAM_RESTRICTION_STATUS_LINK')"
+      />
+      <Banner
+        v-else-if="!currentChat.can_reply"
         color-scheme="alert"
         class="mx-2 mt-2 overflow-hidden rounded-lg"
         :banner-message="replyWindowBannerMessage"

app/javascript/dashboard/components/widgets/conversation/contextMenu/Index.vue

@@ -7,13 +7,10 @@ import {
   getSortedAgentsByAvailability,
   getAgentsByUpdatedPresence,
 } from 'dashboard/helper/agentHelper.js';
-import { picoSearch } from '@scmmishra/pico-search';
 import MenuItem from './menuItem.vue';
 import MenuItemWithSubmenu from './menuItemWithSubmenu.vue';
 import wootConstants from 'dashboard/constants/globals';
 import AgentLoadingPlaceholder from './agentLoadingPlaceholder.vue';
-import NextInput from 'dashboard/components-next/input/Input.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const MENU = {
   MARK_AS_READ: 'mark-as-read',
@@ -34,8 +31,6 @@ export default {
     MenuItem,
     MenuItemWithSubmenu,
     AgentLoadingPlaceholder,
-    NextInput,
-    Icon,
   },
   props: {
     chatId: {
@@ -92,7 +87,6 @@ export default {
   data() {
     return {
       MENU,
-      labelSearchQuery: '',
       STATUS_TYPE: wootConstants.STATUS_TYPE,
       readOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
@@ -222,14 +216,6 @@ export default {
       // Don't show snooze if the conversation is already snoozed/resolved/pending
       return this.status === wootConstants.STATUS_TYPE.OPEN;
     },
-    filteredLabels() {
-      const labels = this.labelSearchQuery
-        ? picoSearch(this.labels, this.labelSearchQuery, ['title'])
-        : this.labels;
-      // Assigned labels first, keeping each group's existing order.
-      const isAssigned = label => this.conversationLabels.includes(label.title);
-      return [...labels].sort((a, b) => isAssigned(b) - isAssigned(a));
-    },
   },
   mounted() {
     this.$store.dispatch('inboxAssignableAgents/fetch', [this.inboxId]);
@@ -349,49 +335,21 @@ export default {
         :option="labelMenuConfig"
         :sub-menu-available="!!labels.length"
       >
-        <div class="pb-1 w-[12.5rem]">
+        <MenuItem
-          <NextInput
+          v-for="label in labels"
-            v-model="labelSearchQuery"
+          :key="label.id"
-            type="search"
+          :option="generateMenuLabelConfig(label, 'label')"
-            size="sm"
+          :variant="
-            class="w-full"
+            conversationLabels.includes(label.title)
-            custom-input-class="!ps-8 !text-xs"
+              ? 'label-assigned'
-            :placeholder="$t('CONVERSATION.CARD_CONTEXT_MENU.SEARCH_LABELS')"
+              : 'label'
-            @click.stop
+          "
-            @keydown.stop
+          @click.stop="
-          >
+            conversationLabels.includes(label.title)
-            <template #prefix>
+              ? $emit('removeLabel', label)
-              <Icon
+              : $emit('assignLabel', label)
-                icon="i-lucide-search"
+          "
-                class="absolute z-10 -translate-y-1/2 pointer-events-none size-3.5 text-n-slate-10 top-1/2 start-2"
+        />
-              />
-            </template>
-          </NextInput>
-        </div>
-        <div class="overflow-x-hidden overflow-y-auto max-h-[12.5rem]">
-          <MenuItem
-            v-for="label in filteredLabels"
-            :key="label.id"
-            :option="generateMenuLabelConfig(label, 'label')"
-            :variant="
-              conversationLabels.includes(label.title)
-                ? 'label-assigned'
-                : 'label'
-            "
-            @mousedown.prevent
-            @click.stop="
-              conversationLabels.includes(label.title)
-                ? $emit('removeLabel', label)
-                : $emit('assignLabel', label)
-            "
-          />
-          <p
-            v-if="!filteredLabels.length"
-            class="px-2 py-2 m-0 text-xs text-center text-n-slate-11"
-          >
-            {{ $t('CONVERSATION.CARD_CONTEXT_MENU.NO_LABELS_FOUND') }}
-          </p>
-        </div>
       </MenuItemWithSubmenu>
       <MenuItemWithSubmenu
         v-if="isAllowed([MENU.AGENT])"

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItem.vue

@@ -15,7 +15,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="menu group text-n-slate-12 min-h-7 min-w-0" role="button">
+  <div class="menu text-n-slate-12 min-h-7 min-w-0" role="button">
     <fluent-icon
       v-if="variant === 'icon' && option.icon"
       :icon="option.icon"
@@ -52,7 +52,7 @@ defineProps({
     <Icon
       v-if="variant === 'label-assigned'"
       icon="i-lucide-check"
-      class="flex-shrink-0 size-3.5 text-n-brand group-hover:text-white"
+      class="flex-shrink-0 size-3.5 mr-1"
     />
   </div>
 </template>

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

@@ -1,120 +0,0 @@
-import { effectScope } from 'vue';
-import { useAbortableRequest } from '../useAbortableRequest';
-
-// Resolves when the request "completes", rejects like axios does when the
-// signal is aborted mid-flight.
-const abortableRunner =
-  (value, { fail = false } = {}) =>
-  signal =>
-    new Promise((resolve, reject) => {
-      signal.addEventListener('abort', () => {
-        const error = new Error('canceled');
-        error.name = 'CanceledError';
-        reject(error);
-      });
-      // Defer so a follow-up `run`/`abort` can supersede this one first.
-      Promise.resolve().then(() => {
-        if (signal.aborted) return;
-        if (fail) {
-          reject(new Error('boom'));
-          return;
-        }
-        resolve(value);
-      });
-    });
-
-describe('useAbortableRequest', () => {
-  it('passes a fresh signal to the runner and returns its result', async () => {
-    const { run } = useAbortableRequest();
-    let received = null;
-
-    const result = await run(signal => {
-      received = signal;
-      return Promise.resolve('ok');
-    });
-
-    expect(received).toBeInstanceOf(AbortSignal);
-    expect(received.aborted).toBe(false);
-    expect(result).toBe('ok');
-  });
-
-  it('toggles isPending around the request', async () => {
-    const { run, isPending } = useAbortableRequest();
-    expect(isPending.value).toBe(false);
-
-    const pending = run(() => Promise.resolve('done'));
-    expect(isPending.value).toBe(true);
-
-    await pending;
-    expect(isPending.value).toBe(false);
-  });
-
-  it('aborts the previous request when a new one starts', async () => {
-    const { run } = useAbortableRequest();
-
-    const first = run(abortableRunner('first'));
-    const second = run(abortableRunner('second'));
-
-    await expect(first).resolves.toBeUndefined();
-    await expect(second).resolves.toBe('second');
-  });
-
-  it('returns the onAbort value when a request is superseded', async () => {
-    const { run } = useAbortableRequest();
-
-    const first = run(abortableRunner('first'), { onAbort: null });
-    const second = run(abortableRunner('second'));
-
-    await expect(first).resolves.toBeNull();
-    await expect(second).resolves.toBe('second');
-  });
-
-  it('abort cancels the in-flight request and clears isPending', async () => {
-    const { run, abort, isPending } = useAbortableRequest();
-
-    const pending = run(abortableRunner('value'));
-    expect(isPending.value).toBe(true);
-
-    abort();
-
-    await expect(pending).resolves.toBeUndefined();
-    expect(isPending.value).toBe(false);
-  });
-
-  it('rethrows non-abort errors and clears isPending', async () => {
-    const { run, isPending } = useAbortableRequest();
-
-    await expect(run(abortableRunner(null, { fail: true }))).rejects.toThrow(
-      'boom'
-    );
-    expect(isPending.value).toBe(false);
-  });
-
-  it('aborts the in-flight request when its scope is disposed', async () => {
-    const scope = effectScope();
-    let request;
-    scope.run(() => {
-      request = useAbortableRequest();
-    });
-
-    const pending = request.run(abortableRunner('value'));
-    expect(request.isPending.value).toBe(true);
-
-    scope.stop();
-
-    await expect(pending).resolves.toBeUndefined();
-    expect(request.isPending.value).toBe(false);
-  });
-
-  it('keeps separate controllers per instance', async () => {
-    const a = useAbortableRequest();
-    const b = useAbortableRequest();
-
-    const first = a.run(abortableRunner('a'));
-    // Starting b's request must not abort a's.
-    const second = b.run(abortableRunner('b'));
-
-    await expect(first).resolves.toBe('a');
-    await expect(second).resolves.toBe('b');
-  });
-});

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

@@ -1,9 +1,9 @@
-import { useMapGetter } from 'dashboard/composables/store';
-import * as agentHelper from 'dashboard/helper/agentHelper';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { ref } from 'vue';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { useAgentsList } from '../useAgentsList';
+import { useMapGetter } from 'dashboard/composables/store';
 import { allAgentsData, formattedAgentsData } from './fixtures/agentFixtures';
+import * as agentHelper from 'dashboard/helper/agentHelper';
 
 // Mock vue-i18n
 vi.mock('vue-i18n', () => ({
@@ -94,32 +94,6 @@ describe('useAgentsList', () => {
     expect(agentsList.value.length).toBe(formattedAgentsData.slice(1).length);
   });
 
-  it('keeps nameless agent bots and applies a fallback label', () => {
-    const namelessBot = {
-      id: 91,
-      name: null,
-      assignee_type: 'AgentBot',
-      availability_status: 'offline',
-    };
-    mockUseMapGetter({
-      'inboxAssignableAgents/getAssignableAgents': ref(() => [
-        ...allAgentsData,
-        namelessBot,
-      ]),
-    });
-
-    const { agentsList } = useAgentsList();
-    // access the computed to trigger evaluation
-    expect(agentsList.value).toBeDefined();
-
-    const passedAgents =
-      agentHelper.getAgentsByUpdatedPresence.mock.calls[0][0];
-    expect(passedAgents).toContainEqual({
-      ...namelessBot,
-      name: '-',
-    });
-  });
-
   it('handles empty assignable agents', () => {
     mockUseMapGetter({
       'inboxAssignableAgents/getAssignableAgents': ref(() => []),

app/javascript/dashboard/composables/useAbortableRequest.js

@@ -1,62 +0,0 @@
-import { getCurrentScope, onScopeDispose, ref } from 'vue';
-
-export const isAbortError = error =>
-  error?.name === 'AbortError' ||
-  error?.name === 'CanceledError' ||
-  error?.code === 'ERR_CANCELED';
-
-/**
- * Keeps only the latest request alive. Starting a new `run` (or calling
- * `abort`) cancels the previous request through its `AbortSignal`, so
- * out-of-order responses can never overwrite fresher data.
- *
- * @example
- * const { run, abort, isPending } = useAbortableRequest();
- * const results = await run(signal => api.search(query, { signal }));
- *
- * @returns {{
- *   run: (runner: (signal: AbortSignal) => Promise<any>, options?: { onAbort?: any }) => Promise<any>,
- *   abort: () => void,
- *   isPending: import('vue').Ref<boolean>,
- * }}
- * `run` resolves with the runner's value, or `options.onAbort` (default
- * `undefined`) when the request was superseded. Non-abort errors are rethrown.
- */
-export function useAbortableRequest() {
-  const isPending = ref(false);
-  let controller = null;
-
-  const abort = () => {
-    controller?.abort();
-    controller = null;
-    isPending.value = false;
-  };
-
-  const run = async (runner, { onAbort } = {}) => {
-    controller?.abort();
-    const currentController = new AbortController();
-    controller = currentController;
-    isPending.value = true;
-
-    try {
-      return await runner(currentController.signal);
-    } catch (error) {
-      if (currentController.signal.aborted || isAbortError(error))
-        return onAbort;
-      throw error;
-    } finally {
-      // Only the latest run owns the shared state; a superseded run leaves it
-      // for the run that replaced it.
-      if (controller === currentController) {
-        controller = null;
-        isPending.value = false;
-      }
-    }
-  };
-
-  // Cancel any in-flight request when the owning scope is disposed.
-  // Guarded so the composable can also be used outside an effect scope.
-  if (getCurrentScope()) onScopeDispose(abort);
-
-  return { run, abort, isPending };
-}

app/javascript/dashboard/composables/useAgentsList.js

@@ -1,10 +1,10 @@
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
 import {
   getAgentsByUpdatedPresence,
   getSortedAgentsByAvailability,
 } from 'dashboard/helper/agentHelper';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 
 /**
  * A composable function that provides a list of agents for assignment.
@@ -53,11 +53,7 @@ export function useAgentsList(
    * @type {import('vue').ComputedRef<Array>}
    */
   const agentsList = computed(() => {
-    const agents = (assignableAgents.value || []).map(agent =>
+    const agents = assignableAgents.value || [];
-      !agent.name && agent.assignee_type === 'AgentBot'
-        ? { ...agent, name: '-' }
-        : agent
-    );
     const agentsByUpdatedPresence = getAgentsByUpdatedPresence(
       agents,
       currentUser.value,

app/javascript/dashboard/composables/useWhatsappCallSession.js

@@ -308,8 +308,7 @@ export function useWhatsappCallSession() {
     }
   };
 
-  // target: { conversationId } or { contactId, inboxId }
+  const initiateOutboundCall = async conversationId => {
-  const initiateOutboundCall = async target => {
     // Module-scoped lock + active-session guard so a second click — from the
     // same composable instance OR a different one (header vs contact panel)
     // OR while a call is already live — can't tear down the in-flight setup
@@ -321,7 +320,10 @@ export function useWhatsappCallSession() {
     isInitiatingOutbound.value = true;
     try {
       const sdpOffer = await prepareOutboundOffer();
-      const response = await WhatsappCallsAPI.initiate(target, sdpOffer);
+      const response = await WhatsappCallsAPI.initiate(
+        conversationId,
+        sdpOffer
+      );
       if (response?.id) {
         activeCallId = response.id;
         // A connect webhook that raced ahead of this response was buffered;
@@ -352,7 +354,7 @@ export function useWhatsappCallSession() {
         data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_REQUESTED ||
         data?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
       ) {
-        return { status: data.status, conversation_id: data.conversation_id };
+        return { status: data.status };
       }
       throw e;
     } finally {

app/javascript/dashboard/constants/globals.js

@@ -78,3 +78,5 @@ export default {
   },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
+export const META_RESTRICTION_STATUS_URL =
+  'https://status.chatwoot.com/incident/948346';

app/javascript/dashboard/featureFlags.js

@@ -7,7 +7,6 @@ export const FEATURE_FLAGS = {
   AUTOMATIONS: 'automations',
   CAMPAIGNS: 'campaigns',
   WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
-  WHATSAPP_EMBEDDED_SIGNUP_FLOW: 'whatsapp_embedded_signup_inbox_creation',
   WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
   WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
   CANNED_RESPONSES: 'canned_responses',

app/javascript/dashboard/helper/URLHelper.js

@@ -127,8 +127,25 @@ export const getHostNameFromURL = url => {
   }
 };
 
-// Shared with the mobile app via @chatwoot/utils.
+/**
-export { extractFilenameFromUrl } from '@chatwoot/utils';
+ * Extracts filename from a URL
+ * @param {string} url - The URL to extract filename from
+ * @returns {string} - The extracted filename or original URL if extraction fails
+ */
+export const extractFilenameFromUrl = url => {
+  if (!url || typeof url !== 'string') return url;
+
+  try {
+    const urlObj = new URL(url);
+    const pathname = urlObj.pathname;
+    const filename = pathname.split('/').pop();
+    return filename || url;
+  } catch (error) {
+    // If URL parsing fails, try to extract filename using regex
+    const match = url.match(/\/([^/?#]+)(?:[?#]|$)/);
+    return match ? match[1] : url;
+  }
+};
 
 /**
  * Normalizes a comma/newline separated list of domains

app/javascript/dashboard/helper/agentHelper.js

@@ -7,7 +7,7 @@
 export const getAgentsByAvailability = (agents, availability) => {
   return agents
     .filter(agent => agent.availability_status === availability)
-    .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+    .sort((a, b) => a.name.localeCompare(b.name));
 };
 
 /**

app/javascript/dashboard/helper/editorHelper.js

@@ -1,6 +1,4 @@
 import {
-  InputRule,
-  inputRules,
   MessageMarkdownSerializer,
   MessageMarkdownTransformer,
   messageSchema,
@@ -11,6 +9,7 @@ import * as Sentry from '@sentry/vue';
 import camelcaseKeys from 'camelcase-keys';
 import { FORMATTING, MARKDOWN_PATTERNS } from 'dashboard/constants/editor';
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
+import { InputRule, inputRules } from 'prosemirror-inputrules';
 
 /**
  * Extract text from markdown, and remove all images, code blocks, links, headers, bold, italic, lists etc.

app/javascript/dashboard/helper/inbox.js

@@ -55,30 +55,11 @@ export const getVoiceCallProvider = inbox => {
 
 export const isVoiceCallEnabled = inbox => getVoiceCallProvider(inbox) !== null;
 
-// Combined channel + voice-wave badge glyph per voice-call provider.
-export const VOICE_CALL_ICONS = {
-  [VOICE_CALL_PROVIDERS.WHATSAPP]: 'i-woot-whatsapp-voice',
-  [VOICE_CALL_PROVIDERS.TWILIO]: 'i-woot-voice-call',
-};
-
-export const getVoiceCallIcon = provider =>
-  VOICE_CALL_ICONS[provider] ?? VOICE_CALL_ICONS[VOICE_CALL_PROVIDERS.TWILIO];
-
 export const TWILIO_CHANNEL_MEDIUM = {
   WHATSAPP: 'whatsapp',
   SMS: 'sms',
 };
 
-export const getInboxVoiceIcon = (channelType, medium) => {
-  const isWhatsapp =
-    channelType === INBOX_TYPES.WHATSAPP ||
-    (channelType === INBOX_TYPES.TWILIO &&
-      medium === TWILIO_CHANNEL_MEDIUM.WHATSAPP);
-  return getVoiceCallIcon(
-    isWhatsapp ? VOICE_CALL_PROVIDERS.WHATSAPP : VOICE_CALL_PROVIDERS.TWILIO
-  );
-};
-
 const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.WEB]: 'i-ri-global-fill',
   [INBOX_TYPES.FB]: 'i-ri-messenger-fill',
@@ -201,14 +182,7 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (
+export const getInboxIconByType = (type, medium, variant = 'fill') => {
-  type,
-  medium,
-  variant = 'fill',
-  voiceEnabled = false
-) => {
-  if (voiceEnabled) return getInboxVoiceIcon(type, medium);
-
   const iconMap =
     variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
   const defaultIcon =

app/javascript/dashboard/helper/portalHelper.js

@@ -166,13 +166,6 @@ export const LOCALE_MENU_ITEMS = {
     value: 'customize-content',
     icon: 'i-lucide-pencil',
   },
-  selectPopularContent: {
-    label:
-      'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT',
-    action: 'select-popular-content',
-    value: 'select-popular-content',
-    icon: 'i-lucide-sparkles',
-  },
   delete: {
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
     action: 'delete',
@@ -192,7 +185,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
         LOCALE_MENU_ITEMS.moveToDraft,
       ]),
       LOCALE_MENU_ITEMS.customizeContent,
-      LOCALE_MENU_ITEMS.selectPopularContent,
       ...disableLocaleMenuItems([LOCALE_MENU_ITEMS.delete]),
     ];
   }
@@ -201,7 +193,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     return [
       LOCALE_MENU_ITEMS.publishLocale,
       LOCALE_MENU_ITEMS.customizeContent,
-      LOCALE_MENU_ITEMS.selectPopularContent,
       LOCALE_MENU_ITEMS.delete,
     ];
   }
@@ -210,7 +201,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     LOCALE_MENU_ITEMS.makeDefault,
     LOCALE_MENU_ITEMS.moveToDraft,
     LOCALE_MENU_ITEMS.customizeContent,
-    LOCALE_MENU_ITEMS.selectPopularContent,
     LOCALE_MENU_ITEMS.delete,
   ];
 };

app/javascript/dashboard/helper/specs/agentHelper.spec.js

@@ -26,18 +26,6 @@ describe('agentHelper', () => {
         offlineAgentsData
       );
     });
-
-    it('does not throw when an agent has a null name', () => {
-      const agents = [
-        { id: 1, name: null, availability_status: 'offline' },
-        { id: 2, name: 'Zoe', availability_status: 'offline' },
-      ];
-
-      expect(() => getAgentsByAvailability(agents, 'offline')).not.toThrow();
-      expect(
-        getAgentsByAvailability(agents, 'offline').map(agent => agent.id)
-      ).toEqual([1, 2]);
-    });
   });
 
   describe('getSortedAgentsByAvailability', () => {

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -1,11 +1,8 @@
 import {
   INBOX_TYPES,
-  VOICE_CALL_PROVIDERS,
   getInboxClassByType,
   getInboxIconByType,
-  getInboxVoiceIcon,
   getInboxWarningIconClass,
-  getVoiceCallIcon,
 } from '../inbox';
 
 describe('#Inbox Helpers', () => {
@@ -169,63 +166,4 @@ describe('#Inbox Helpers', () => {
       );
     });
   });
-
-  describe('getVoiceCallIcon', () => {
-    it('returns the WhatsApp voice glyph for the whatsapp provider', () => {
-      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.WHATSAPP)).toBe(
-        'i-woot-whatsapp-voice'
-      );
-    });
-
-    it('returns the generic voice-call glyph for the twilio provider', () => {
-      expect(getVoiceCallIcon(VOICE_CALL_PROVIDERS.TWILIO)).toBe(
-        'i-woot-voice-call'
-      );
-    });
-
-    it('falls back to the generic voice-call glyph for an unknown provider', () => {
-      expect(getVoiceCallIcon('unknown')).toBe('i-woot-voice-call');
-      expect(getVoiceCallIcon(undefined)).toBe('i-woot-voice-call');
-    });
-  });
-
-  describe('getInboxVoiceIcon', () => {
-    it('returns the WhatsApp voice glyph for a WhatsApp inbox', () => {
-      expect(getInboxVoiceIcon(INBOX_TYPES.WHATSAPP)).toBe(
-        'i-woot-whatsapp-voice'
-      );
-    });
-
-    it('returns the WhatsApp voice glyph for a Twilio WhatsApp inbox', () => {
-      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
-        'i-woot-whatsapp-voice'
-      );
-    });
-
-    it('returns the generic voice-call glyph for a Twilio voice inbox', () => {
-      expect(getInboxVoiceIcon(INBOX_TYPES.TWILIO, 'sms')).toBe(
-        'i-woot-voice-call'
-      );
-    });
-  });
-
-  describe('getInboxIconByType with voice enabled', () => {
-    it('returns the WhatsApp voice glyph for a voice-enabled WhatsApp inbox', () => {
-      expect(
-        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', true)
-      ).toBe('i-woot-whatsapp-voice');
-    });
-
-    it('returns the generic voice-call glyph for a voice-enabled Twilio inbox', () => {
-      expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms', 'line', true)).toBe(
-        'i-woot-voice-call'
-      );
-    });
-
-    it('returns the normal channel icon when voice is not enabled', () => {
-      expect(
-        getInboxIconByType(INBOX_TYPES.WHATSAPP, undefined, 'line', false)
-      ).toBe('i-woot-whatsapp');
-    });
-  });
 });

app/javascript/dashboard/helper/specs/portalHelper.spec.js

@@ -74,34 +74,26 @@ describe('PortalHelper', () => {
   });
 
   describe('buildLocaleMenuItems', () => {
-    it('disables other actions but keeps content actions enabled for the default locale', () => {
+    it('disables other actions but keeps customize enabled for the default locale', () => {
       const items = buildLocaleMenuItems({ isDefault: true, isDraft: false });
-      const enabledActions = ['customize-content', 'select-popular-content'];
+      const customize = items.find(item => item.action === 'customize-content');
 
-      enabledActions.forEach(action => {
+      expect(customize).toBeTruthy();
-        expect(
+      expect(customize.disabled).toBeFalsy();
-          items.find(item => item.action === action)?.disabled
-        ).toBeFalsy();
-      });
       expect(
         items
-          .filter(item => !enabledActions.includes(item.action))
+          .filter(item => item.action !== 'customize-content')
           .every(item => item.disabled)
       ).toBe(true);
     });
 
-    it('returns publish, customize, popular content, and delete actions for draft locales', () => {
+    it('returns publish, customize, and delete actions for draft locales', () => {
       expect(
         buildLocaleMenuItems({
           isDefault: false,
           isDraft: true,
         }).map(({ action }) => action)
-      ).toEqual([
+      ).toEqual(['publish-locale', 'customize-content', 'delete']);
-        'publish-locale',
-        'customize-content',
-        'select-popular-content',
-        'delete',
-      ]);
     });
 
     it('returns default, draft, customize, and delete actions for live locales', () => {
@@ -114,7 +106,6 @@ describe('PortalHelper', () => {
         'change-default',
         'move-to-draft',
         'customize-content',
-        'select-popular-content',
         'delete',
       ]);
     });

app/javascript/dashboard/helper/specs/templateHelper.spec.js

@@ -156,18 +156,12 @@ describe('templateHelper', () => {
       ]);
     });
 
-    it('should handle templates with no variables but a media header', () => {
+    it('should handle templates with no variables', () => {
       const emptyTemplate = templates.find(
         t => t.name === 'no_variable_template'
       );
-      const result = buildTemplateParameters(emptyTemplate);
+      const result = buildTemplateParameters(emptyTemplate, false);
-      // hasMediaHeader is derived from the template, so the document header is kept.
+      expect(result).toEqual({});
-      expect(result.body).toBeUndefined();
-      expect(result.header).toEqual({
-        media_url: '',
-        media_type: 'document',
-        media_name: '',
-      });
     });
 
     it('should build parameters for templates with multiple component types', () => {

app/javascript/dashboard/helper/templateHelper.js

@@ -1,16 +1,19 @@
-import { processVariable, buildWhatsAppProcessedParams } from '@chatwoot/utils';
+// Constants
-
-// Constants and pure template helpers are shared with the mobile app via
-// @chatwoot/utils so the logic lives in one place.
-export {
-  MEDIA_FORMATS,
-  COMPONENT_TYPES,
-  findComponentByType,
-  processVariable,
-} from '@chatwoot/utils';
-
 export const DEFAULT_LANGUAGE = 'en';
 export const DEFAULT_CATEGORY = 'UTILITY';
+export const COMPONENT_TYPES = {
+  HEADER: 'HEADER',
+  BODY: 'BODY',
+  BUTTONS: 'BUTTONS',
+};
+export const MEDIA_FORMATS = ['IMAGE', 'VIDEO', 'DOCUMENT'];
+
+export const findComponentByType = (template, type) =>
+  template.components?.find(component => component.type === type);
+
+export const processVariable = str => {
+  return str.replace(/{{|}}/g, '');
+};
 
 export const allKeysRequired = value => {
   const keys = Object.keys(value);
@@ -24,7 +27,70 @@ export const replaceTemplateVariables = (templateText, processedParams) => {
   });
 };
 
-// The media-header flag is derived from the template inside the shared helper;
+export const buildTemplateParameters = (template, hasMediaHeaderValue) => {
-// the second argument is kept for backwards-compatible call sites.
+  const allVariables = {};
-export const buildTemplateParameters = template =>
+
-  buildWhatsAppProcessedParams(template);
+  const bodyComponent = findComponentByType(template, COMPONENT_TYPES.BODY);
+  const headerComponent = findComponentByType(template, COMPONENT_TYPES.HEADER);
+
+  if (!bodyComponent) return allVariables;
+
+  const templateString = bodyComponent.text;
+
+  // Process body variables
+  const matchedVariables = templateString.match(/{{([^}]+)}}/g);
+  if (matchedVariables) {
+    allVariables.body = {};
+    matchedVariables.forEach(variable => {
+      const key = processVariable(variable);
+      allVariables.body[key] = '';
+    });
+  }
+
+  if (hasMediaHeaderValue) {
+    if (!allVariables.header) allVariables.header = {};
+    allVariables.header.media_url = '';
+    allVariables.header.media_type = headerComponent.format.toLowerCase();
+
+    // For document templates, include media_name field for filename support
+    if (headerComponent.format.toLowerCase() === 'document') {
+      allVariables.header.media_name = '';
+    }
+  }
+
+  // Process button variables
+  const buttonComponents = template.components.filter(
+    component => component.type === COMPONENT_TYPES.BUTTONS
+  );
+
+  buttonComponents.forEach(buttonComponent => {
+    if (buttonComponent.buttons) {
+      buttonComponent.buttons.forEach((button, index) => {
+        // Handle URL buttons with variables
+        if (button.type === 'URL' && button.url && button.url.includes('{{')) {
+          const buttonVars = button.url.match(/{{([^}]+)}}/g) || [];
+          if (buttonVars.length > 0) {
+            if (!allVariables.buttons) allVariables.buttons = [];
+            allVariables.buttons[index] = {
+              type: 'url',
+              parameter: '',
+              url: button.url,
+              variables: buttonVars.map(v => processVariable(v)),
+            };
+          }
+        }
+
+        // Handle copy code buttons
+        if (button.type === 'COPY_CODE') {
+          if (!allVariables.buttons) allVariables.buttons = [];
+          allVariables.buttons[index] = {
+            type: 'copy_code',
+            parameter: '',
+          };
+        }
+      });
+    }
+  });
+
+  return allVariables;
+};

app/javascript/dashboard/i18n/index.js

@@ -34,7 +34,6 @@ import ta from './locale/ta';
 import th from './locale/th';
 import tr from './locale/tr';
 import uk from './locale/uk';
-import uz from './locale/uz';
 import vi from './locale/vi';
 import zh_CN from './locale/zh_CN';
 import zh_TW from './locale/zh_TW';
@@ -78,7 +77,6 @@ export default {
   th,
   tr,
   uk,
-  uz,
   vi,
   zh_CN,
   zh_TW,

app/javascript/dashboard/i18n/locale/am/advancedFilters.json

@@ -19,8 +19,6 @@
       "OR": "OR"
     },
     "INPUT_PLACEHOLDER": "Enter value",
-    "CONTACT_SEARCH_PLACEHOLDER": "እውቂያዎችን ይፈልጉ",
-    "CONTACT_FALLBACK": "Contact #{id}",
     "OPERATOR_LABELS": {
       "equal_to": "Equal to",
       "not_equal_to": "Not equal to",
@@ -51,7 +49,6 @@
       "ASSIGNEE_NAME": "Assignee name",
       "INBOX_NAME": "Inbox name",
       "TEAM_NAME": "Team name",
-      "CONTACT": "እውቂያ",
       "CONVERSATION_IDENTIFIER": "Conversation identifier",
       "CAMPAIGN_NAME": "Campaign name",
       "LABELS": "Labels",

app/javascript/dashboard/i18n/locale/am/chatlist.json

@@ -79,9 +79,6 @@
       },
       "priority_desc_created_at_asc": {
         "TEXT": "Priority: Highest first, Created: Oldest first"
-      },
-      "unread": {
-        "TEXT": "Unread Count: Highest first"
       }
     },
     "ATTACHMENTS": {