feat(whatsapp-call): direct browser-Meta WebRTC, no media server

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

Gemfile

@@ -40,6 +40,8 @@ gem 'json_refs'
 gem 'rack-attack', '>= 6.7.0'
 # a utility tool for streaming, flexible and safe downloading of remote files
 gem 'down'
+# SSRF-safe URL fetching
+gem 'ssrf_filter', '~> 1.5'
 # authentication type to fetch and send mail over oauth2.0
 gem 'gmail_xoauth'
 # Lock net-smtp to 0.3.4 to avoid issues with gmail_xoauth2
@@ -82,6 +84,7 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
+gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization

Gemfile.lock

@@ -727,6 +727,9 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
+    rails-i18n (7.0.10)
+      i18n (>= 0.7, < 2)
+      railties (>= 6.0.0, < 8)
     railties (7.1.5.2)
       actionpack (= 7.1.5.2)
       activesupport (= 7.1.5.2)
@@ -942,6 +945,7 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     squasher (0.7.2)
+    ssrf_filter (1.5.0)
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (18.0.1)
@@ -1124,6 +1128,7 @@ DEPENDENCIES
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
   rails (~> 7.1)
+  rails-i18n (~> 7.0)
   redis
   redis-namespace
   responders (>= 3.1.1)
@@ -1158,6 +1163,7 @@ DEPENDENCIES
   spring
   spring-watcher-listen
   squasher
+  ssrf_filter (~> 1.5)
   stackprof
   stripe (~> 18.0)
   telephone_number

VERSION_CW

@@ -1 +1 @@
-4.12.1
+4.13.0

app/builders/account_builder.rb

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

app/builders/agent_builder.rb

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

app/builders/email/base_builder.rb

@@ -1,4 +1,6 @@
 class Email::BaseBuilder
+  include EmailAddressParseable
+
   pattr_initialize [:inbox!]
 
   private
@@ -39,7 +41,7 @@ class Email::BaseBuilder
   end
 
   def business_name
-    inbox.business_name || inbox.sanitized_name
+    inbox.sanitized_business_name
   end
 
   def account_support_email
@@ -47,8 +49,4 @@ class Email::BaseBuilder
     # can save it in the format "Name <email@domain.com>"
     parse_email(account.support_email)
   end
-
-  def parse_email(email_string)
-    Mail::Address.new(email_string).address
-  end
 end

app/builders/v2/report_builder.rb

@@ -1,6 +1,7 @@
 class V2::ReportBuilder
   include DateRangeHelper
   include ReportHelper
+
   attr_reader :account, :params
 
   DEFAULT_GROUP_BY = 'day'.freeze

app/builders/v2/reports/agent_summary_builder.rb

@@ -11,10 +11,6 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group('assignee_id').count
-  end
-
   def prepare_report
     account.account_users.map do |account_user|
       build_agent_stats(account_user)

app/builders/v2/reports/base_summary_builder.rb

@@ -9,37 +9,13 @@ class V2::Reports::BaseSummaryBuilder
   private
 
   def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
+    results = data_source.summary
 
-  def load_reporting_events_data
-    # Extract the column name for indexing (e.g., 'conversations.team_id' -> 'team_id')
-    index_key = group_by_key.to_s.split('.').last
-
-    results = reporting_events
-              .select(
-                "#{group_by_key} as #{index_key}",
-                "COUNT(CASE WHEN name = 'conversation_resolved' THEN 1 END) as resolved_count",
-                "AVG(CASE WHEN name = 'conversation_resolved' THEN #{average_value_key} END) as avg_resolution_time",
-                "AVG(CASE WHEN name = 'first_response' THEN #{average_value_key} END) as avg_first_response_time",
-                "AVG(CASE WHEN name = 'reply_time' THEN #{average_value_key} END) as avg_reply_time"
-              )
-              .group(group_by_key)
-              .index_by { |record| record.public_send(index_key) }
-
-    @resolved_count = results.transform_values(&:resolved_count)
-    @avg_resolution_time = results.transform_values(&:avg_resolution_time)
-    @avg_first_response_time = results.transform_values(&:avg_first_response_time)
-    @avg_reply_time = results.transform_values(&:avg_reply_time)
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range)
-  end
-
-  def fetch_conversations_count
-    # Override this method
+    @conversations_count = results.transform_values { |data| data[:conversations_count] }
+    @resolved_count = results.transform_values { |data| data[:resolved_conversations_count] }
+    @avg_resolution_time = results.transform_values { |data| data[:avg_resolution_time] }
+    @avg_first_response_time = results.transform_values { |data| data[:avg_first_response_time] }
+    @avg_reply_time = results.transform_values { |data| data[:avg_reply_time] }
   end
 
   def group_by_key
@@ -50,7 +26,26 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: nil,
+      dimension_type: summary_dimension_type,
+      dimension_id: nil,
+      scope: nil,
+      range: range,
+      group_by: 'day',
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
+  def summary_dimension_type
+    {
+      'account_id' => 'account',
+      'user_id' => 'agent',
+      'inbox_id' => 'inbox',
+      'conversations.team_id' => 'team'
+    }.fetch(group_by_key.to_s)
   end
 end

app/builders/v2/reports/conversations/base_report_builder.rb

@@ -3,23 +3,10 @@ class V2::Reports::Conversations::BaseReportBuilder
 
   private
 
-  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
-  COUNT_METRICS = %w[
-    conversations_count
-    incoming_messages_count
-    outgoing_messages_count
-    resolutions_count
-    bot_resolutions_count
-    bot_handoffs_count
-  ].freeze
-
   def builder_class(metric)
-    case metric
-    when *AVG_METRICS
-      V2::Reports::Timeseries::AverageReportBuilder
-    when *COUNT_METRICS
-      V2::Reports::Timeseries::CountReportBuilder
-    end
+    return unless Reports::ReportMetricRegistry.supported?(metric)
+
+    V2::Reports::Timeseries::ReportBuilder
   end
 
   def log_invalid_metric

app/builders/v2/reports/inbox_summary_builder.rb

@@ -11,15 +11,6 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(group_by_key).count
-  end
-
   def prepare_report
     account.inboxes.map do |inbox|
       build_inbox_stats(inbox)
@@ -40,8 +31,4 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   def group_by_key
     :inbox_id
   end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
-  end
 end

app/builders/v2/reports/team_summary_builder.rb

@@ -6,14 +6,6 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(:team_id).count
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
-  end
-
   def prepare_report
     account.teams.map do |team|
       build_team_stats(team)

app/builders/v2/reports/timeseries/average_report_builder.rb

@@ -1,48 +0,0 @@
-class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_average_time = reporting_events.average(average_value_key)
-    grouped_event_count = reporting_events.count
-    grouped_average_time.each_with_object([]) do |element, arr|
-      event_date, average_time = element
-      arr << {
-        value: average_time,
-        timestamp: event_date.in_time_zone(timezone).to_i,
-        count: grouped_event_count[event_date]
-      }
-    end
-  end
-
-  def aggregate_value
-    object_scope.average(average_value_key)
-  end
-
-  private
-
-  def event_name
-    metric_to_event_name = {
-      avg_first_response_time: :first_response,
-      avg_resolution_time: :conversation_resolved,
-      reply_time: :reply_time
-    }
-    metric_to_event_name[params[:metric].to_sym]
-  end
-
-  def object_scope
-    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
-  end
-
-  def reporting_events
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    )
-  end
-
-  def average_value_key
-    @average_value_key ||= params[:business_hours].present? ? :value_in_business_hours : :value
-  end
-end

app/builders/v2/reports/timeseries/base_timeseries_builder.rb

@@ -1,12 +1,13 @@
 class V2::Reports::Timeseries::BaseTimeseriesBuilder
   include TimezoneHelper
   include DateRangeHelper
+
   DEFAULT_GROUP_BY = 'day'.freeze
 
   pattr_initialize :account, :params
 
   def scope
-    case params[:type].to_sym
+    case dimension_type.to_sym
     when :account
       account
     when :inbox
@@ -20,6 +21,20 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
     end
   end
 
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: params[:metric],
+      dimension_type: dimension_type,
+      dimension_id: params[:id],
+      scope: scope,
+      range: range,
+      group_by: group_by,
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
   def inbox
     @inbox ||= account.inboxes.find(params[:id])
   end
@@ -43,4 +58,10 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
   def timezone
     @timezone ||= timezone_name_from_offset(params[:timezone_offset])
   end
+
+  private
+
+  def dimension_type
+    (params[:type].presence || 'account').to_s
+  end
 end

app/builders/v2/reports/timeseries/count_report_builder.rb

@@ -1,78 +0,0 @@
-class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_count.each_with_object([]) do |element, arr|
-      event_date, event_count = element
-
-      # The `event_date` is in Date format (without time), such as "Wed, 15 May 2024".
-      # We need a timestamp for the start of the day. However, we can't use `event_date.to_time.to_i`
-      # because it converts the date to 12:00 AM server timezone.
-      # The desired output should be 12:00 AM in the specified timezone.
-      arr << { value: event_count, timestamp: event_date.in_time_zone(timezone).to_i }
-    end
-  end
-
-  def aggregate_value
-    object_scope.count
-  end
-
-  private
-
-  def metric
-    @metric ||= params[:metric]
-  end
-
-  def object_scope
-    send("scope_for_#{metric}")
-  end
-
-  def scope_for_conversations_count
-    scope.conversations.where(account_id: account.id, created_at: range)
-  end
-
-  def scope_for_incoming_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).incoming.unscope(:order)
-  end
-
-  def scope_for_outgoing_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).outgoing.unscope(:order)
-  end
-
-  def scope_for_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_bot_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_handoffs_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
-      name: :conversation_bot_handoff,
-      account_id: account.id,
-      created_at: range
-    ).distinct
-  end
-
-  def grouped_count
-    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
-    # It converts timestamps to the target timezone before grouping, which means
-    # the same event can fall into different day buckets depending on timezone
-    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    ).count
-  end
-end

app/builders/v2/reports/timeseries/report_builder.rb

@@ -0,0 +1,9 @@
+class V2::Reports::Timeseries::ReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
+  def timeseries
+    data_source.timeseries
+  end
+
+  def aggregate_value
+    data_source.aggregate
+  end
+end

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
              elsif params[:external_url].present?
                create_from_url
              else
-               render_error('No file or URL provided', :unprocessable_entity)
+               render_error(I18n.t('errors.upload.missing_input'), :unprocessable_entity)
              end
 
     render_success(result) if result.is_a?(ActiveStorage::Blob)
@@ -19,35 +19,21 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   end
 
   def create_from_url
-    uri = parse_uri(params[:external_url])
-    return if performed?
-
-    fetch_and_process_file_from_uri(uri)
-  end
-
-  def parse_uri(url)
-    uri = URI.parse(url)
-    validate_uri(uri)
-    uri
-  rescue URI::InvalidURIError, SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-    nil
-  end
-
-  def validate_uri(uri)
-    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-  end
-
-  def fetch_and_process_file_from_uri(uri)
-    uri.open do |file|
-      create_and_save_blob(file, File.basename(uri.path), file.content_type)
+    SafeFetch.fetch(params[:external_url].to_s) do |result|
+      create_and_save_blob(result.tempfile, result.filename, result.content_type)
     end
-  rescue OpenURI::HTTPError => e
-    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
-  rescue SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
+  rescue SafeFetch::HttpError => e
+    render_error(I18n.t('errors.upload.fetch_failed_with_message', message: e.message), :unprocessable_entity)
+  rescue SafeFetch::FetchError
+    render_error(I18n.t('errors.upload.fetch_failed'), :unprocessable_entity)
+  rescue SafeFetch::FileTooLargeError
+    render_error(I18n.t('errors.upload.file_too_large'), :unprocessable_entity)
+  rescue SafeFetch::UnsupportedContentTypeError
+    render_error(I18n.t('errors.upload.unsupported_content_type'), :unprocessable_entity)
+  rescue SafeFetch::Error
+    render_error(I18n.t('errors.upload.invalid_url'), :unprocessable_entity)
   rescue StandardError
-    render_error('An unexpected error occurred', :internal_server_error)
+    render_error(I18n.t('errors.upload.unexpected'), :internal_server_error)
   end
 
   def create_and_save_blob(io, filename, content_type)

app/controllers/api/v1/accounts_controller.rb

@@ -30,9 +30,20 @@ class Api::V1::AccountsController < Api::BaseController
       locale: account_params[:locale],
       user: current_user
     ).perform
+    enqueue_branding_enrichment
     if @user
-      send_auth_headers(@user)
-      render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
+      # Authenticated users (dashboard "add account") and api_only signups
+      # need the full response with account_id. API-only deployments have no
+      # frontend to handle the email confirmation flow, so they need auth
+      # tokens to proceed.
+      # Unauthenticated web signup returns only the email — no session is
+      # created until the user confirms via the email link.
+      if current_user || api_only_signup?
+        send_auth_headers(@user)
+        render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
+      else
+        render json: { email: @user.email }
+      end
     else
       render_error_response(CustomExceptions::Account::SignupFailed.new({}))
     end
@@ -47,6 +58,7 @@ class Api::V1::AccountsController < Api::BaseController
     @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
     @account.settings.merge!(settings_params)
+    @account.custom_attributes.delete('onboarding_step') if @account.custom_attributes['onboarding_step'] == 'account_details'
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end
@@ -59,6 +71,17 @@ class Api::V1::AccountsController < Api::BaseController
 
   private
 
+  def enqueue_branding_enrichment
+    email = account_params[:email].presence || @user&.email
+    return if email.blank?
+
+    Account::BrandingEnrichmentJob.perform_later(@account.id, email)
+    Redis::Alfred.set(format(Redis::Alfred::ACCOUNT_ONBOARDING_ENRICHMENT, account_id: @account.id), '1', ex: 30)
+  rescue StandardError => e
+    # Enrichment is optional — never let queue/Redis failures abort signup
+    ChatwootExceptionTracker.new(e).capture_exception
+  end
+
   def ensure_account_name
     # ensure that account_name and user_full_name is present
     # this is becuase the account builder and the models validations are not triggered
@@ -88,7 +111,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone)
+    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role)
   end
 
   def settings_params
@@ -103,6 +126,15 @@ class Api::V1::AccountsController < Api::BaseController
     raise ActionController::RoutingError, 'Not Found' unless GlobalConfigService.account_signup_enabled?
   end
 
+  def api_only_signup?
+    # CW_API_ONLY_SERVER is the canonical flag for API-only deployments.
+    # ENABLE_ACCOUNT_SIGNUP='api_only' is a legacy sentinel for the same purpose.
+    # Read ENABLE_ACCOUNT_SIGNUP raw from InstallationConfig because GlobalConfig.get
+    # typecasts it to boolean, coercing 'api_only' to true.
+    ActiveModel::Type::Boolean.new.cast(ENV.fetch('CW_API_ONLY_SERVER', false)) ||
+      InstallationConfig.find_by(name: 'ENABLE_ACCOUNT_SIGNUP')&.value.to_s == 'api_only'
+  end
+
   def validate_captcha
     raise ActionController::InvalidAuthenticityToken, 'Invalid Captcha' unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
   end

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

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

app/controllers/api/v2/accounts/summary_reports_controller.rb

@@ -3,15 +3,15 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
-    render_report_with(V2::Reports::AgentSummaryBuilder)
+    render_report_with(V2::Reports::AgentSummaryBuilder, type: :agent)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder)
+    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
+    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
   end
 
   def label
@@ -38,8 +38,9 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     }
   end
 
-  def render_report_with(builder_class)
-    builder = builder_class.new(account: Current.account, params: @builder_params)
+  def render_report_with(builder_class, type: nil)
+    builder_params = type.present? ? @builder_params.merge(type: type) : @builder_params
+    builder = builder_class.new(account: Current.account, params: builder_params)
     render json: builder.build
   end
 

app/controllers/auth/resend_confirmations_controller.rb

@@ -0,0 +1,18 @@
+# Unauthenticated endpoint for resending confirmation emails during signup.
+# This is a standalone controller (not on DeviseOverrides::ConfirmationsController)
+# because OmniAuth middleware intercepts all POST /auth/* routes as provider
+# callbacks, and Devise controller filters cause 307 redirects for custom actions.
+# Inherits from ActionController::API to avoid both issues entirely.
+# Rate-limited by Rack::Attack (IP + email) and gated by hCaptcha.
+class Auth::ResendConfirmationsController < ActionController::API
+  def create
+    return head(:ok) unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
+
+    email = params[:email]
+    return head(:ok) unless email.is_a?(String)
+
+    user = User.from_email(email.strip.downcase)
+    user&.send_confirmation_instructions unless user&.confirmed?
+    head :ok
+  end
+end

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

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

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

@@ -62,7 +62,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @parsed_content = render_article_content(@article.content)
+    @parsed_content = render_article_content(@article.content.to_s)
   end
 
   def set_category

app/controllers/super_admin/push_diagnostics_controller.rb

@@ -0,0 +1,68 @@
+class SuperAdmin::PushDiagnosticsController < SuperAdmin::ApplicationController
+  def show
+    @query = params[:user_query].to_s.strip
+    @user = resolve_user(@query)
+    @subscriptions = @user ? @user.notification_subscriptions.order(:id) : []
+    @results = []
+  end
+
+  def create
+    @user = User.find_by(id: params[:user_id])
+    return redirect_to super_admin_push_diagnostics_path, alert: I18n.t('super_admin.push_diagnostics.user_not_found') if @user.nil?
+
+    ids = parsed_subscription_ids
+    if ids.empty?
+      return redirect_to super_admin_push_diagnostics_path(user_query: @user.id),
+                         alert: I18n.t('super_admin.push_diagnostics.no_subscriptions_to_test')
+    end
+
+    run_test_and_render(ids)
+  end
+
+  def destroy_subscriptions
+    user = User.find_by(id: params[:user_id])
+    return redirect_to super_admin_push_diagnostics_path, alert: I18n.t('super_admin.push_diagnostics.user_not_found') if user.nil?
+
+    ids = parsed_subscription_ids
+    if ids.empty?
+      return redirect_to super_admin_push_diagnostics_path(user_query: user.id),
+                         alert: I18n.t('super_admin.push_diagnostics.no_subscriptions_to_delete')
+    end
+
+    deleted_count = user.notification_subscriptions.where(id: ids).destroy_all.size
+    log_super_admin_action("deleted #{deleted_count} subscriptions for user #{user.id}: #{ids}")
+    redirect_to super_admin_push_diagnostics_path(user_query: user.id),
+                notice: I18n.t('super_admin.push_diagnostics.subscriptions_deleted', count: deleted_count)
+  end
+
+  private
+
+  def run_test_and_render(ids)
+    @query = @user.id.to_s
+    @subscriptions = @user.notification_subscriptions.order(:id)
+    @results = Notification::PushTestService.new(
+      user: @user, subscription_ids: ids,
+      title: params[:push_title], body: params[:push_body]
+    ).perform
+
+    log_super_admin_action("test sent for user #{@user.id} subscriptions #{ids}")
+    render :show
+  end
+
+  def log_super_admin_action(message)
+    Rails.logger.info(
+      "[SuperAdmin] push diagnostics #{message} " \
+      "(actor_id=#{current_super_admin&.id}, actor_email=#{current_super_admin&.email})"
+    )
+  end
+
+  def resolve_user(query)
+    return if query.blank?
+
+    query.match?(/\A\d+\z/) ? User.find_by(id: query) : User.from_email(query)
+  end
+
+  def parsed_subscription_ids
+    Array(params[:subscription_ids]).reject(&:blank?).map(&:to_i)
+  end
+end

app/finders/message_finder.rb

@@ -11,7 +11,9 @@ class MessageFinder
   private
 
   def conversation_messages
-    @conversation.messages.includes(:attachments, :sender, sender: { avatar_attachment: [:blob] })
+    scope = @conversation.messages.includes(:attachments, :sender, sender: { avatar_attachment: [:blob] })
+    scope = scope.includes(call: [:contact, { inbox: :channel }]) if Message.reflect_on_association(:call)
+    scope
   end
 
   def messages

app/javascript/dashboard/App.vue

@@ -59,7 +59,6 @@ export default {
       isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
-      accountUIFlags: 'accounts/getUIFlags',
     }),
     hideOnOnboardingView() {
       return !isOnOnboardingView(this.$route);
@@ -107,8 +106,9 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
+      const account = this.getAccount(this.currentAccountId);
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        this.getAccount(this.currentAccountId);
+        account;
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       // If user locale is set, use it; otherwise use account locale
       this.setLocale(this.uiSettings?.locale || locale);
@@ -131,7 +131,7 @@ export default {
 
 <template>
   <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    v-if="!authUIFlags.isFetching"
     id="app"
     class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :dir="isRTL ? 'rtl' : 'ltr'"

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

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

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

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

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

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

app/javascript/dashboard/api/mfa.js

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

app/javascript/dashboard/api/voiceCalls.js

@@ -0,0 +1,68 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class VoiceCallsAPI extends ApiClient {
+  constructor() {
+    super('voice_calls', { accountScoped: true });
+  }
+
+  show(callId) {
+    return axios.get(`${this.url}/${callId}`);
+  }
+
+  // The browser does WebRTC locally and ships the SDP answer up. Rails forwards
+  // it to Meta via pre_accept_call+accept_call.
+  accept(callId, { sdpAnswer } = {}) {
+    return axios.post(`${this.url}/${callId}/accept`, {
+      sdp_answer: sdpAnswer,
+    });
+  }
+
+  reject(callId) {
+    return axios.post(`${this.url}/${callId}/reject`);
+  }
+
+  terminate(callId) {
+    return axios.post(`${this.url}/${callId}/terminate`);
+  }
+
+  // Outbound: browser builds the offer first; Rails ships it to Meta and
+  // creates the Call record. Meta delivers its SDP answer later via the
+  // connect webhook (broadcast over ActionCable as voice_call.outbound_connected).
+  initiate(conversationId, provider, { sdpOffer } = {}) {
+    return axios.post(`${this.url}/initiate`, {
+      conversation_id: conversationId,
+      provider,
+      sdp_offer: sdpOffer,
+    });
+  }
+
+  // Get the current agent's active call (if any). Used on page load to detect
+  // a stale active session so we can terminate it cleanly.
+  active() {
+    return axios.get(`${this.url}/active`);
+  }
+
+  // Multipart upload of the in-browser MediaRecorder Blob to Rails. The
+  // controller attaches it to the call's voice_call message; the after-create
+  // hook on Attachment fires Messages::AudioTranscriptionJob automatically.
+  uploadRecording(callId, blob, filename) {
+    const fd = new FormData();
+    fd.append('recording', blob, filename);
+    return axios.post(`${this.url}/${callId}/upload_recording`, fd, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    });
+  }
+
+  // URL helpers for navigator.sendBeacon (which can't carry custom headers and
+  // needs the absolute account-scoped path).
+  uploadRecordingUrl(callId) {
+    return `${this.url}/${callId}/upload_recording`;
+  }
+
+  terminateUrl(callId) {
+    return `${this.url}/${callId}/terminate`;
+  }
+}
+
+export default new VoiceCallsAPI();

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

@@ -107,11 +107,10 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger="{ toggle }">
+                <template #trigger>
                   <Button
                     :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
                     size="sm"
-                    @click="toggle"
                   />
                 </template>
               </ComposeConversation>

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

@@ -114,8 +114,8 @@ const emit = defineEmits([
           </div>
           <div class="w-px h-4 bg-n-strong" />
           <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            <template #trigger>
+              <Button :label="buttonLabel" size="sm" />
             </template>
           </ComposeConversation>
         </div>

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

@@ -103,6 +103,7 @@ const showPagination = computed(() => {
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
+            class="mb-1"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

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

@@ -6,7 +6,7 @@ import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import { useCallsStore } from 'dashboard/stores/calls';
+import { useVoiceCallsStore } from 'dashboard/stores/voiceCalls';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -40,7 +40,6 @@ const voiceInboxes = computed(() =>
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 
-// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
 const isInitiatingCall = computed(() => {
@@ -68,15 +67,16 @@ const startCall = async inboxId => {
       contactId: props.contactId,
       inboxId,
     });
-    const { call_sid: callSid, conversation_id: conversationId } = response;
 
-    // Add call to store immediately so widget shows
-    const callsStore = useCallsStore();
-    callsStore.addCall({
-      callSid,
-      conversationId,
-      inboxId,
-      callDirection: 'outbound',
+    const voiceCallsStore = useVoiceCallsStore();
+    voiceCallsStore.setActiveCall({
+      id: response.call_id,
+      callId: response.call_sid,
+      provider: response.provider || 'twilio',
+      direction: 'outbound',
+      status: 'ringing',
+      conversationId: response.conversation_id,
+      caller: null,
     });
 
     useAlert(t('CONTACT_PANEL.CALL_INITIATED'));

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

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const props = defineProps({
+  contact: { type: Object, required: true },
+  selected: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  hideThumbnail: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation']);
+
+const hovered = ref(false);
+
+const onThumbnailHover = () => {
+  hovered.value = !props.hideThumbnail;
+};
+
+const onThumbnailLeave = () => {
+  hovered.value = false;
+};
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    emit('selectConversation', value);
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative flex items-center flex-shrink-0"
+    @mouseenter="onThumbnailHover"
+    @mouseleave="onThumbnailLeave"
+  >
+    <Avatar
+      v-if="!hideThumbnail"
+      :name="contact.name"
+      :src="contact.thumbnail"
+      :size="24"
+      :status="contact.availability_status"
+      hide-offline-status
+    >
+      <template v-if="enableSelection" #overlay>
+        <div
+          v-if="hovered || selected"
+          class="flex items-center justify-center rounded-md cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] size-6"
+          @click.stop
+        >
+          <Checkbox v-model="selectedModel" />
+        </div>
+      </template>
+    </Avatar>
+  </div>
+</template>

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

@@ -0,0 +1,47 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import MessagePreview from './MessagePreview.vue';
+import VoiceCallStatus from './VoiceCallStatus.vue';
+import UnreadBadge from './UnreadBadge.vue';
+
+defineProps({
+  lastMessage: { type: Object, default: null },
+  voiceCallStatus: { type: String, default: '' },
+  voiceCallDirection: { type: String, default: '' },
+  unreadCount: { type: Number, default: 0 },
+  showExpandedPreview: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[1fr_auto] gap-1.5"
+    :class="showExpandedPreview ? 'items-end' : 'items-center'"
+  >
+    <VoiceCallStatus
+      v-if="voiceCallStatus"
+      key="voice-status-row"
+      :status="voiceCallStatus"
+      :direction="voiceCallDirection"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <MessagePreview
+      v-else-if="lastMessage"
+      key="message-preview"
+      :message="lastMessage"
+      :multi-line="showExpandedPreview"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <span
+      v-else
+      key="no-messages"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    >
+      <Icon icon="i-lucide-info" class="size-3.5" />
+      {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+    </span>
+
+    <UnreadBadge :count="unreadCount" :align-bottom="showExpandedPreview" />
+  </div>
+</template>

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

@@ -0,0 +1,175 @@
+<script setup>
+import { ref, computed, nextTick, useSlots, watch, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useThrottleFn } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  labels: {
+    type: Array,
+    default: () => [],
+  },
+  disableToggle: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const slots = useSlots();
+const { t } = useI18n();
+
+const accountLabels = useMapGetter('labels/getLabels');
+
+const activeLabels = computed(() => {
+  return accountLabels.value.filter(({ title }) =>
+    props.labels.includes(title)
+  );
+});
+
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);
+
+// Show if there are labels OR if before slot exists
+const showSection = computed(
+  () => activeLabels.value.length > 0 || !!slots.before
+);
+
+const computeVisibleLabelPosition = () => {
+  const container = labelContainer.value;
+  if (!container || activeLabels.value.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  const labels = container.querySelectorAll('[data-label]');
+  if (labels.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  // Early exit if all labels are visible
+  if (showAllLabels.value) return;
+
+  const beforeSlot = container.querySelector('[data-before-slot]');
+  const beforeSlotWidth = beforeSlot?.offsetWidth ?? 0;
+  const availableWidth = container.clientWidth - 46 - beforeSlotWidth;
+
+  let totalWidth = 0;
+  const labelsArray = Array.from(labels);
+
+  // Find last visible label index using some() - stops early on overflow
+  const overflowIndex = labelsArray.findIndex(label => {
+    totalWidth += label.offsetWidth + 6;
+    return totalWidth > availableWidth;
+  });
+
+  const visibleIndex =
+    overflowIndex === -1 ? labelsArray.length - 1 : overflowIndex - 1;
+
+  labelPosition.value = visibleIndex;
+  showExpandLabelButton.value = visibleIndex < labelsArray.length - 1;
+};
+
+const throttledCalculate = useThrottleFn(computeVisibleLabelPosition, 16);
+
+watch(activeLabels, () => nextTick(throttledCalculate), { immediate: true });
+
+const hiddenLabelsCount = computed(() => {
+  if (!showExpandLabelButton.value || showAllLabels.value) return 0;
+  return activeLabels.value.length - labelPosition.value - 1;
+});
+
+// Check if all labels are hidden (none visible)
+const allLabelsHidden = computed(() => {
+  return labelPosition.value === -1 && activeLabels.value.length > 0;
+});
+
+// Label text for button when disableToggle is true and all labels are hidden
+const labelsCountText = computed(() => {
+  if (props.disableToggle && allLabelsHidden.value) {
+    return t('CONVERSATION.CARD.LABELS_COUNT', {
+      count: activeLabels.value.length,
+    });
+  }
+  if (!showAllLabels.value && hiddenLabelsCount.value > 0) {
+    return hiddenLabelsCount.value;
+  }
+  return '';
+});
+
+const hiddenLabelsTooltip = computed(() => {
+  if (!props.disableToggle) return '';
+  // When all labels are hidden, show all label titles
+  if (allLabelsHidden.value) {
+    return activeLabels.value.map(label => label.title).join(', ');
+  }
+  if (!showExpandLabelButton.value) return '';
+  const hiddenLabels = activeLabels.value.slice(labelPosition.value + 1);
+  return hiddenLabels.map(label => label.title).join(', ');
+});
+
+const tooltipText = computed(() => {
+  if (props.disableToggle && hiddenLabelsTooltip.value) {
+    return hiddenLabelsTooltip.value;
+  }
+  return showAllLabels.value
+    ? t('CONVERSATION.CARD.HIDE_LABELS')
+    : t('CONVERSATION.CARD.SHOW_LABELS');
+});
+
+const onShowLabels = e => {
+  e.stopPropagation();
+  if (props.disableToggle) return;
+  showAllLabels.value = !showAllLabels.value;
+  nextTick(() => computeVisibleLabelPosition());
+};
+</script>
+
+<template>
+  <div
+    v-if="showSection"
+    ref="labelContainer"
+    v-bind="attrs"
+    v-resize="throttledCalculate"
+    data-labels-container
+    class="flex items-center flex-shrink min-w-0 min-h-6 gap-x-1.5 gap-y-1 [&:not(:has([data-label],[data-before-slot]))]:hidden"
+    :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
+  >
+    <slot name="before" />
+
+    <Label
+      v-for="(label, index) in activeLabels"
+      :key="label ? label.id : index"
+      data-label
+      :label="label"
+      compact
+      :class="{
+        'invisible absolute': !showAllLabels && index > labelPosition,
+      }"
+    />
+    <Button
+      v-if="showExpandLabelButton || (disableToggle && allLabelsHidden)"
+      v-tooltip.top="{
+        content: tooltipText,
+        delay: { show: 500, hide: 0 },
+      }"
+      :label="labelsCountText"
+      xs
+      slate
+      :no-animation="disableToggle"
+      :icon="labelsCountText ? 'i-lucide-plus' : 'i-lucide-chevron-left'"
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1 !gap-0.5 [&>span:first-child]:!text-n-slate-10 [&>span:last-child]:!text-n-slate-11"
+      :class="{ 'cursor-default': disableToggle }"
+      @click="onShowLabels"
+    />
+  </div>
+  <template v-else />
+</template>

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

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_STATUS.OPEN]: 'i-woot-status-open',
+  [CONVERSATION_STATUS.RESOLVED]: 'i-woot-status-resolved',
+  [CONVERSATION_STATUS.PENDING]: 'i-woot-status-pending',
+  [CONVERSATION_STATUS.SNOOZED]: 'i-woot-status-snoozed',
+};
+
+const iconName = computed(() => {
+  if (props.status && icons[props.status]) {
+    return icons[props.status];
+  }
+  return props.showEmpty ? 'i-woot-status-empty' : '';
+});
+</script>
+
+<template>
+  <Icon
+    v-tooltip.top="{
+      content: status,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 flex-shrink-0"
+  />
+</template>

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

@@ -0,0 +1,186 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardAvatar from './CardAvatar.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabelsV5.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
+  selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'selectConversation',
+  'deSelectConversation',
+  'click',
+  'contextmenu',
+]);
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+
+const voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
+
+const unreadCount = computed(() => props.chat.unread_count);
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
+);
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    if (value) {
+      emit('selectConversation', value);
+    } else {
+      emit('deSelectConversation', value);
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    class="conversation relative cursor-pointer group grid gap-4 items-center px-3 h-12 border-b border-n-slate-3 hover:border-n-surface-1 hover:z-[1] before:content-[none] before:absolute before:-top-px before:inset-x-0 before:h-px before:bg-n-surface-1 before:pointer-events-none hover:before:content-['']"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 !border-n-surface-1':
+        isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3 !border-n-surface-1': selected,
+      'hover:bg-n-alpha-1': !isActiveChat && !selected,
+      'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]': showLabelsSection,
+      'grid-cols-[minmax(0,2fr)_max-content]': !showLabelsSection,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <!-- LEFT SECTION -->
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <div class="flex items-center justify-center flex-shrink-0" @click.stop>
+        <Checkbox v-model="selectedModel" />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardPriorityIcon :priority="chat.priority" show-empty />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <Avatar
+          v-if="showAssignee && assignee.name"
+          v-tooltip.top="{
+            content: assignee.name,
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="assignee.name"
+          :src="assignee.thumbnail"
+          :size="14"
+          :status="assignee.availability_status"
+          hide-offline-status
+        />
+        <Icon
+          v-else
+          icon="i-woot-empty-assignee"
+          class="size-4 text-n-slate-7"
+        />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardStatusIcon :status="chat.status" show-empty />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div v-if="!isInboxView && showInboxName" class="w-20 flex-shrink-0">
+        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+      </div>
+
+      <div
+        v-if="!isInboxView && showInboxName"
+        class="w-px h-3 bg-n-slate-6 flex-shrink-0"
+      />
+
+      <div
+        v-tooltip.top="{
+          content: chat.id,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="h-6 flex items-center gap-1 max-w-20 w-full min-w-0 flex-shrink-0"
+      >
+        <Icon
+          icon="i-woot-hash"
+          class="size-3.5 text-n-slate-10 flex-shrink-0"
+        />
+        <span class="text-body-main text-n-slate-11 truncate">
+          {{ chat.id }}
+        </span>
+      </div>
+
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
+
+      <h4
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+      >
+        {{ currentContact.name }}
+      </h4>
+
+      <CardContent
+        :last-message="lastMessageInChat"
+        :voice-call-status="voiceCallData.status"
+        :voice-call-direction="voiceCallData.direction"
+        :unread-count="unreadCount"
+        :show-expanded-preview="false"
+      />
+    </div>
+
+    <!-- RIGHT SECTION -->
+    <div class="flex items-center justify-end gap-1.5 flex-shrink-0">
+      <div v-if="showLabelsSection" class="min-w-0 w-full">
+        <CardLabels
+          :labels="chat.labels"
+          disable-toggle
+          class="my-0 [&>div]:justify-end justify-end"
+        />
+      </div>
+
+      <div v-if="hasSlaPolicyId" class="flex-shrink-0">
+        <SLACardLabel ref="slaCardLabel" :chat="chat" />
+      </div>
+
+      <div class="flex-shrink-0 w-[4.375rem] text-end">
+        <TimeAgo
+          :conversation-id="chat.id"
+          :last-activity-timestamp="chat.timestamp"
+          :created-at-timestamp="chat.created_at"
+          class="font-440 !text-xs text-n-slate-11"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,156 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  showMessageType: {
+    type: Boolean,
+    default: true,
+  },
+  defaultEmptyMessage: {
+    type: String,
+    default: '',
+  },
+  multiLine: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { getPlainText } = useMessageFormatter();
+
+const attachmentIcons = {
+  image: 'i-lucide-image',
+  audio: 'i-lucide-headphones',
+  video: 'i-lucide-video',
+  file: 'i-lucide-file',
+  location: 'i-lucide-map-pin',
+  fallback: 'i-lucide-link-2',
+};
+
+const messageByAgent = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.OUTGOING;
+});
+
+const isMessageAnActivity = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.ACTIVITY;
+});
+
+const isMessagePrivate = computed(() => {
+  const { private: isPrivate } = props.message;
+  return isPrivate;
+});
+
+const parsedLastMessage = computed(() => {
+  const { content_attributes: contentAttributes } = props.message;
+  const { email: { subject } = {} } = contentAttributes || {};
+  return getPlainText(subject || props.message.content);
+});
+
+const lastMessageFileType = computed(() => {
+  const [{ file_type: fileType } = {}] = props.message.attachments;
+  return fileType;
+});
+
+const attachmentIcon = computed(() => {
+  return attachmentIcons[lastMessageFileType.value];
+});
+
+const attachmentMessageContent = computed(() => {
+  return `CHAT_LIST.ATTACHMENTS.${lastMessageFileType.value}.CONTENT`;
+});
+
+const isMessageSticker = computed(() => {
+  return props.message && props.message.content_type === 'sticker';
+});
+</script>
+
+<template>
+  <div
+    class="min-w-0 text-sm"
+    :class="
+      multiLine
+        ? 'flex items-start gap-1'
+        : 'grid grid-cols-[auto_1fr] items-center gap-1'
+    "
+  >
+    <template v-if="showMessageType && !multiLine">
+      <Icon
+        v-if="isMessagePrivate"
+        icon="i-lucide-lock-keyhole"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="messageByAgent"
+        icon="i-lucide-undo-2"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="isMessageAnActivity"
+        icon="i-lucide-info"
+        class="size-3.5"
+      />
+    </template>
+
+    <span
+      class="min-w-0 text-body-main"
+      :class="multiLine ? 'line-clamp-2' : 'truncate'"
+    >
+      <!-- Case for previous and conversation conversation card -->
+      <template v-if="showMessageType && multiLine">
+        <Icon
+          v-if="isMessagePrivate"
+          icon="i-lucide-lock-keyhole"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="messageByAgent"
+          icon="i-lucide-undo-2"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="isMessageAnActivity"
+          icon="i-lucide-info"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+      </template>
+      <span
+        v-if="message.content && isMessageSticker"
+        class="inline-grid grid-flow-col auto-cols-max items-center gap-1"
+      >
+        <Icon icon="i-lucide-image" class="size-3.5" />
+        {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+      </span>
+
+      <template v-else-if="message.content">
+        {{ parsedLastMessage }}
+      </template>
+
+      <span
+        v-else-if="message.attachments"
+        class="inline-block align-middle truncate"
+      >
+        <Icon
+          v-if="attachmentIcon && showMessageType"
+          :icon="attachmentIcon"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <span class="inline-block align-middle">
+          {{ $t(attachmentMessageContent) }}
+        </span>
+      </span>
+
+      <template v-else>
+        {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+      </template>
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  count: { type: Number, required: true },
+  alignBottom: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+
+const displayCount = computed(() =>
+  props.count > 9 ? t('CHAT_LIST.UNREAD_COUNT_OVERFLOW') : props.count
+);
+</script>
+
+<template>
+  <span
+    v-if="count > 0"
+    class="bg-n-teal-9 rounded-full h-4 min-w-4 max-w-5 px-1 w-fit font-medium text-xxs leading-3 text-white inline-grid place-items-center flex-shrink-0"
+    :class="{
+      'mb-0.5': alignBottom,
+    }"
+  >
+    {{ displayCount }}
+  </span>
+  <span v-else />
+</template>

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

@@ -0,0 +1,69 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: { type: String, default: '' },
+  direction: { type: String, default: '' },
+});
+
+const LABEL_KEYS = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const ICON_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+};
+
+const COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.COMPLETED]: 'text-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'text-n-ruby-9',
+};
+
+const isOutbound = computed(
+  () => props.direction === VOICE_CALL_DIRECTION.OUTBOUND
+);
+const isFailed = computed(() =>
+  [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(props.status)
+);
+
+const labelKey = computed(() => {
+  if (LABEL_KEYS[props.status]) return LABEL_KEYS[props.status];
+  if (props.status === VOICE_CALL_STATUS.RINGING) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+});
+
+const iconName = computed(() => {
+  if (ICON_MAP[props.status]) return ICON_MAP[props.status];
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+});
+
+const statusColor = computed(
+  () => COLOR_MAP[props.status] || 'text-n-slate-11'
+);
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
+    <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
+    <span class="truncate text-body-main" :class="statusColor">
+      {{ $t(labelKey) }}
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-body-main text-n-slate-11">
+      {{ inbox.name }}
+    </span>
+  </div>
+</template>

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

@@ -57,7 +57,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow !z-20"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from '@chatwoot/utils';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value || {},
+    chat: props.chat,
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.chat, updateSlaStatus);
+
+defineExpose({
+  hasSlaThreshold,
+});
+</script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    v-bind="$attrs"
+    class="relative flex items-center cursor-pointer min-w-fit group"
+  >
+    <Label
+      :label="slaStatus.threshold"
+      :color="isSlaMissed ? 'ruby' : 'amber'"
+      compact
+    >
+      <template #icon>
+        <Icon icon="i-lucide-flame" class="flex-shrink-0 size-3.5" />
+      </template>
+    </Label>
+  </div>
+  <template v-else />
+</template>

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -27,58 +27,50 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
-  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
   'previewArticle',
+  'createArticle',
 ]);
 
 const { t } = useI18n();
 
 const isNewArticle = computed(() => !props.article?.id);
 
-const saveAndSync = value => {
-  emit('saveArticle', value);
-};
+const localTitle = ref(props.article?.title ?? '');
+const localContent = ref(props.article?.content ?? '');
 
-// this will only send the data to the backend
-// but will not update the local state preventing unnecessary re-renders
-// since the data is already saved and we keep the editor text as the source of truth
-const quickSave = debounce(
-  value => emit('saveArticleAsync', value),
-  400,
-  false
+// Sync local state when navigating to a different article or on initial fetch
+watch(
+  () => props.article?.id,
+  newId => {
+    if (newId) {
+      localTitle.value = props.article?.title ?? '';
+      localContent.value = props.article?.content ?? '';
+    }
+  }
 );
 
-// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
-// so we can save the data to the backend and retrieve the updated data
-// this will update the local state with response data
-// Only use to save for existing articles
-const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
-
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
 
 const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
+  if (isNewArticle.value) return;
+  debouncedSave(value);
 };
 
 const articleTitle = computed({
-  get: () => props.article.title,
+  get: () => localTitle.value,
   set: value => {
+    localTitle.value = value;
     handleSave({ title: value });
   },
 });
 
 const articleContent = computed({
-  get: () => props.article.content,
+  get: () => localContent.value,
   set: content => {
+    localContent.value = content;
     handleSave({ content });
   },
 });
@@ -98,6 +90,14 @@ const setCategoryId = categoryId => {
 const previewArticle = () => {
   emit('previewArticle');
 };
+
+const handleCreateArticle = event => {
+  if (!isNewArticle.value) return;
+  const title = event?.target?.value || '';
+  if (title.trim()) {
+    emit('createArticle', { title, content: localContent.value });
+  }
+};
 </script>
 
 <template>
@@ -121,11 +121,12 @@ const previewArticle = () => {
           custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
-          autofocus
+          :autofocus="isNewArticle"
+          @blur="handleCreateArticle"
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="saveAndSync"
+          @save-article="values => emit('saveArticle', values)"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
@@ -137,7 +138,7 @@ const previewArticle = () => {
           t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
         "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="false"
+        :autofocus="!isNewArticle"
       />
     </template>
   </HelpCenterLayout>
@@ -160,8 +161,12 @@ const previewArticle = () => {
   }
 
   .editor-root .has-selection {
+    .ProseMirror-menubar:not(:has(*)) {
+      display: none !important;
+    }
+
     .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -169,15 +174,10 @@ const previewArticle = () => {
       position: absolute !important;
 
       .ProseMirror-menuitem {
-        @apply mr-0;
+        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
 
         .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
+          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
         }
       }
 

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

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

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

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

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

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

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

@@ -2,13 +2,10 @@
 import { reactive, ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -18,22 +15,18 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
+import Popover from 'dashboard/components-next/popover/Popover.vue';
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
 const props = defineProps({
-  alignPosition: {
-    type: String,
-    default: 'left',
-  },
   contactId: {
     type: String,
     default: null,
   },
-  isModal: {
-    type: Boolean,
-    default: false,
+  align: {
+    type: String,
+    default: 'end',
   },
 });
 
@@ -42,23 +35,16 @@ const emit = defineEmits(['close']);
 const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
-const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const viewInModal = computed(() => props.isModal || isSmallScreen.value);
-
+const popoverRef = ref(null);
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
 const isCreatingContact = ref(false);
 const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
-const showComposeNewConversation = ref(false);
 
 const formState = reactive({
   message: '',
@@ -95,14 +81,6 @@ const directUploadsEnabled = computed(
 
 const activeContact = computed(() => contactById.value(props.contactId));
 
-const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
-
-  return props.alignPosition === 'right'
-    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
-    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
-});
-
 const onContactSearch = debounce(
   async query => {
     isSearching.value = true;
@@ -172,7 +150,7 @@ const clearSelectedContact = () => {
 };
 
 const closeCompose = () => {
-  showComposeNewConversation.value = false;
+  popoverRef.value?.hide();
   if (!props.contactId) {
     // If contactId is passed as prop
     // Then don't allow to remove the selected contact
@@ -180,7 +158,6 @@ const closeCompose = () => {
   }
   targetInbox.value = null;
   resetContacts();
-  emit('close');
 };
 
 const discardCompose = () => {
@@ -213,8 +190,15 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
   }
 };
 
-const toggle = () => {
-  showComposeNewConversation.value = !showComposeNewConversation.value;
+const onPopoverShow = () => {
+  // Flag to prevent triggering drag n drop,
+  // When compose modal is active
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+};
+
+const onPopoverHide = () => {
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+  emit('close');
 };
 
 watch(
@@ -242,64 +226,23 @@ watch(
   { immediate: true, deep: true }
 );
 
-const handleClickOutside = () => {
-  if (!showComposeNewConversation.value) return;
-
-  showComposeNewConversation.value = false;
-  emit('close');
-};
-
-const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
-  handleClickOutside();
-};
-
 onMounted(() => resetContacts());
-
-const keyboardEvents = {
-  Escape: {
-    action: () => {
-      if (showComposeNewConversation.value) {
-        showComposeNewConversation.value = false;
-        emit('close');
-        emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-      }
-    },
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div
-    v-on-click-outside="[
-      handleClickOutside,
-      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open
-      { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
-    ]"
-    class="relative"
-    :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
-    }"
+  <Popover
+    ref="popoverRef"
+    :align="align"
+    :show-content-border="false"
+    @show="onPopoverShow"
+    @hide="onPopoverHide"
   >
-    <slot
-      name="trigger"
-      :is-open="showComposeNewConversation"
-      :toggle="toggle"
-    />
-    <div
-      v-if="showComposeNewConversation"
-      :class="{
-        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
-      }"
-      @click.self="onModalBackdropClick"
-    >
+    <template #default="{ isOpen }">
+      <slot name="trigger" :is-open="isOpen" />
+    </template>
+    <template #content>
       <ComposeNewConversationForm
         :form-state="formState"
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"
@@ -321,6 +264,6 @@ useKeyboardEvents(keyboardEvents);
         @create-conversation="createConversation"
         @discard="discardCompose"
       />
-    </div>
-  </div>
+    </template>
+  </Popover>
 </template>

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

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

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

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { INBOX_TYPES, isVoiceCallEnabled } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
@@ -100,6 +100,8 @@ const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 
 const inboxMedium = computed(() => props.targetInbox?.medium || '');
 
+const voiceCallEnabled = computed(() => isVoiceCallEnabled(props.targetInbox));
+
 const effectiveChannelType = computed(() =>
   getEffectiveChannelType(inboxChannelType.value, inboxMedium.value)
 );
@@ -361,7 +363,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-full md:w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector
@@ -442,6 +444,7 @@ useKeyboardEvents({
       :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
       :message-templates="whatsappMessageTemplates"
       :channel-type="inboxChannelType"
+      :voice-enabled="voiceCallEnabled"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -30,23 +30,40 @@ const modelValue = defineModel({
 });
 
 const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
+const visibleItemIds = computed(() => props.allItems.map(item => item.id));
+const visibleItemCount = computed(() => visibleItemIds.value.length);
+const selectedVisibleCount = computed(
+  () => visibleItemIds.value.filter(id => modelValue.value.has(id)).length
+);
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
+  () =>
+    selectedVisibleCount.value > 0 &&
+    selectedVisibleCount.value < visibleItemCount.value
 );
 const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+  () =>
+    visibleItemCount.value > 0 &&
+    selectedVisibleCount.value === visibleItemCount.value
 );
 
+const slots = useSlots();
+const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
+
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
+    if (!visibleItemCount.value) {
+      return;
+    }
+
+    const updatedSelection = new Set(modelValue.value);
+    if (shouldSelectAll) {
+      visibleItemIds.value.forEach(id => updatedSelection.add(id));
+    } else {
+      visibleItemIds.value.forEach(id => updatedSelection.delete(id));
+    }
+    modelValue.value = updatedSelection;
   },
 });
 </script>
@@ -63,7 +80,7 @@ const bulkCheckboxState = computed({
       v-if="hasSelected"
       class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
     >
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-3 min-w-0">
         <div class="flex items-center gap-1.5 min-w-0">
           <Checkbox
             v-model="bulkCheckboxState"
@@ -78,21 +95,23 @@ const bulkCheckboxState = computed({
         <span class="text-sm text-n-slate-10 truncate tabular-nums">
           {{ selectedCountLabel }}
         </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
       </div>
       <div class="flex items-center gap-3">
-        <slot name="actions" :selected-count="selectedCount">
-          <Button
-            :label="deleteLabel"
-            sm
-            ruby
-            ghost
-            class="!px-1.5"
-            icon="i-lucide-trash"
-            @click="emit('bulkDelete')"
-          />
-        </slot>
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <div class="flex items-center gap-3">
+          <slot name="actions" :selected-count="selectedCount">
+            <Button
+              :label="deleteLabel"
+              sm
+              ruby
+              ghost
+              class="!px-1.5"
+              icon="i-lucide-trash"
+              @click="emit('bulkDelete')"
+            />
+          </slot>
+        </div>
       </div>
     </div>
     <div v-else class="flex items-center gap-3">

app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue

@@ -6,6 +6,13 @@ import { useAccount } from 'dashboard/composables/useAccount';
 
 import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
 
+defineProps({
+  featurePrefix: {
+    type: String,
+    default: 'CAPTAIN',
+  },
+});
+
 const router = useRouter();
 const currentUser = useMapGetter('getCurrentUser');
 
@@ -31,7 +38,7 @@ const openBilling = () => {
   >
     <BasePaywallModal
       class="mx-auto"
-      feature-prefix="CAPTAIN"
+      :feature-prefix="featurePrefix"
       :i18n-key="i18nKey"
       :is-super-admin="isSuperAdmin"
       :is-on-chatwoot-cloud="isOnChatwootCloud"

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

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

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

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

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

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

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

@@ -19,8 +19,11 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-whatsapp');
   });
 
-  it('returns correct icon for Voice channel', () => {
-    const inbox = { channel_type: 'Channel::Voice' };
+  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');
   });

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

@@ -30,13 +30,23 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
   focusOnMount: {
     type: Boolean,
     default: false,
   },
 });
 
-const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+const emit = defineEmits([
+  'enterPress',
+  'escapePress',
+  'input',
+  'blur',
+  'focus',
+]);
 
 const modelValue = defineModel({
   type: [String, Number],
@@ -49,6 +59,10 @@ const onEnterPress = () => {
   emit('enterPress');
 };
 
+const onEscapePress = () => {
+  emit('escapePress');
+};
+
 const handleInput = event => {
   emit('input', event.target.value);
   modelValue.value = event.target.value;
@@ -72,6 +86,7 @@ onMounted(() => {
 
 defineExpose({
   focus: () => inlineInputRef.value?.focus(),
+  blur: () => inlineInputRef.value?.blur(),
 });
 </script>
 
@@ -96,12 +111,14 @@ defineExpose({
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
+      :readonly="readonly"
       :class="customInputClass"
       class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
+      @keydown.escape.prevent="onEscapePress"
     />
   </div>
 </template>

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

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

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -226,4 +226,10 @@ const handleSeeOriginal = () => {
     }
   }
 }
+
+// Email clients (Gmail, Outlook) hardcode dir="ltr" on wrapper elements.
+// In RTL apps this forces email content LTR regardless of actual text.
+[dir='rtl'] .letter-render [dir='ltr'] {
+  direction: inherit;
+}
 </style>

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

@@ -1,7 +1,10 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
 import { useMessageContext } from '../provider.js';
 import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
+import { acceptVoiceCallById } from 'dashboard/composables/useVoiceCallSession';
+import VoiceCallsAPI from 'dashboard/api/voiceCalls';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
@@ -30,8 +33,11 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { contentAttributes, messageType } = useMessageContext();
+const router = useRouter();
+const { contentAttributes, messageType, attachments } = useMessageContext();
 
+// NOTE: contentAttributes.data keys are camelCase because MessageList.vue
+// applies useCamelCase(messages, { deep: true }) before rendering.
 const data = computed(() => contentAttributes.value?.data);
 const status = computed(() => data.value?.status?.toString());
 
@@ -40,6 +46,52 @@ const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
 
+// Call source and metadata — all camelCase due to deep transform
+const callSource = computed(() => data.value?.callSource);
+const isVoiceCall = computed(() =>
+  ['whatsapp', 'twilio'].includes(callSource.value)
+);
+const callId = computed(() => data.value?.callId);
+const acceptedBy = computed(() => data.value?.acceptedBy);
+const durationSeconds = computed(() => data.value?.durationSeconds);
+
+// Recording and transcript live on the first audio attachment. After the
+// call ends, CallRecordingFetchJob creates an Attachment on this message;
+// Messages::AudioTranscriptionService fills in `transcribedText` when ready.
+const audioAttachment = computed(
+  () => attachments.value?.find(a => a.fileType === 'audio') || null
+);
+const recordingUrl = computed(() => audioAttachment.value?.dataUrl);
+const transcript = computed(() => audioAttachment.value?.transcribedText);
+const isJoining = ref(false);
+const isRejecting = ref(false);
+const showTranscript = ref(false);
+
+// Reject is shown only for ringing inbound calls — outbound calls and
+// in-progress calls don't need a reject button (initiator hangs up via the
+// floating widget).
+const showRejectButton = computed(
+  () =>
+    isVoiceCall.value &&
+    !isOutbound.value &&
+    status.value === VOICE_CALL_STATUS.RINGING
+);
+
+const formattedDuration = computed(() => {
+  const seconds = durationSeconds.value;
+  if (!seconds || seconds <= 0) return '';
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return mins > 0 ? `${mins}m ${secs}s` : `${secs}s`;
+});
+
+// Show join/accept button logic
+// Direct browser↔Meta WebRTC has no rejoin path (Meta caches the prior
+// DTLS fingerprint), so only ringing calls show the Accept button.
+const showJoinButton = computed(
+  () => isVoiceCall.value && status.value === VOICE_CALL_STATUS.RINGING
+);
+
 const labelKey = computed(() => {
   if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.RINGING) {
@@ -53,6 +105,19 @@ const labelKey = computed(() => {
 });
 
 const subtextKey = computed(() => {
+  // acceptedBy on outbound calls is the initiator, not the contact — so keep
+  // "They answered" instead of "Answered by <agent>". Only inbound bubbles
+  // should suppress the subtext in favor of the acceptedBy line.
+  if (
+    !isOutbound.value &&
+    acceptedBy.value?.name &&
+    [VOICE_CALL_STATUS.IN_PROGRESS, VOICE_CALL_STATUS.COMPLETED].includes(
+      status.value
+    )
+  ) {
+    return null;
+  }
+
   if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
     return isOutbound.value
@@ -64,12 +129,50 @@ const subtextKey = computed(() => {
     : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
 });
 
+const answeredByText = computed(() => {
+  if (isOutbound.value) return '';
+  if (!acceptedBy.value?.name) return '';
+  return acceptedBy.value.name;
+});
+
 const iconName = computed(() => {
   if (ICON_MAP[status.value]) return ICON_MAP[status.value];
   return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
 });
 
 const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
+
+const handleJoinCall = async () => {
+  if (isJoining.value || !isVoiceCall.value) return;
+  isJoining.value = true;
+  try {
+    const result = await acceptVoiceCallById(callId.value);
+    if (result?.success && result.call) {
+      router.push({
+        name: 'inbox_conversation',
+        params: { conversation_id: result.call.conversationId },
+      });
+    }
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('[Voice Call] Accept from bubble failed:', err);
+  } finally {
+    isJoining.value = false;
+  }
+};
+
+const handleRejectCall = async () => {
+  if (isRejecting.value || !callId.value) return;
+  isRejecting.value = true;
+  try {
+    await VoiceCallsAPI.reject(callId.value);
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.error('[Voice Call] Reject from bubble failed:', err);
+  } finally {
+    isRejecting.value = false;
+  }
+};
 </script>
 
 <template>
@@ -90,14 +193,90 @@ const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
           />
         </div>
 
-        <div class="flex overflow-hidden flex-col flex-grow">
+        <div class="flex overflow-hidden flex-col flex-grow gap-0.5">
           <span class="text-sm font-medium truncate text-n-slate-12">
             {{ $t(labelKey) }}
           </span>
-          <span class="text-xs text-n-slate-11">
+          <span v-if="answeredByText" class="text-xs text-n-slate-11">
+            {{
+              $t('CONVERSATION.VOICE_CALL.ANSWERED_BY', {
+                name: answeredByText,
+              })
+            }}
+          </span>
+          <span v-else-if="subtextKey" class="text-xs text-n-slate-11">
             {{ $t(subtextKey) }}
           </span>
+          <span
+            v-if="formattedDuration && status === VOICE_CALL_STATUS.COMPLETED"
+            class="text-xs text-n-slate-10"
+          >
+            {{ formattedDuration }}
+          </span>
         </div>
+
+        <button
+          v-if="showRejectButton"
+          :disabled="isRejecting"
+          :title="$t('WHATSAPP_CALL.REJECT')"
+          class="flex justify-center items-center w-8 h-8 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors shrink-0"
+          :class="{ 'opacity-75 cursor-wait': isRejecting }"
+          @click="handleRejectCall"
+        >
+          <i
+            v-if="isRejecting"
+            class="i-ph-circle-notch-bold text-sm text-white animate-spin"
+          />
+          <i v-else class="i-ph-phone-x-bold text-sm text-white" />
+        </button>
+
+        <button
+          v-if="showJoinButton"
+          :disabled="isJoining"
+          class="flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-white bg-n-teal-9 hover:bg-n-teal-10 rounded-lg transition-colors shrink-0"
+          :class="{ 'opacity-75 cursor-wait': isJoining }"
+          @click="handleJoinCall"
+        >
+          <i
+            v-if="isJoining"
+            class="i-ph-circle-notch-bold text-sm animate-spin"
+          />
+          <i v-else class="i-ph-phone-bold text-sm" />
+          {{ $t('CONVERSATION.VOICE_CALL.ACCEPT_CALL') }}
+        </button>
+      </div>
+
+      <div
+        v-if="recordingUrl && status === VOICE_CALL_STATUS.COMPLETED"
+        class="px-3 pb-2"
+      >
+        <audio controls class="w-full h-8" :src="recordingUrl">
+          {{ $t('CONVERSATION.VOICE_CALL.AUDIO_NOT_SUPPORTED') }}
+        </audio>
+      </div>
+
+      <div
+        v-if="transcript && status === VOICE_CALL_STATUS.COMPLETED"
+        class="px-3 pb-3"
+      >
+        <button
+          class="flex items-center gap-1 text-xs text-n-slate-11 hover:text-n-slate-12 transition-colors"
+          @click="showTranscript = !showTranscript"
+        >
+          <i
+            class="text-sm"
+            :class="
+              showTranscript ? 'i-ph-caret-up-bold' : 'i-ph-caret-down-bold'
+            "
+          />
+          {{ $t('CONVERSATION.VOICE_CALL.TRANSCRIPT') }}
+        </button>
+        <p
+          v-if="showTranscript"
+          class="mt-1 text-xs leading-relaxed text-n-slate-11 whitespace-pre-wrap"
+        >
+          {{ transcript }}
+        </p>
       </div>
     </div>
   </BaseBubble>

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

@@ -0,0 +1,139 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'end',
+    validator: v => ['start', 'end'].includes(v),
+  },
+  disableMobileView: {
+    type: Boolean,
+    default: false,
+  },
+  showContentBorder: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['show', 'hide']);
+
+const isActive = ref(false);
+const triggerRef = ref(null);
+const popoverRef = ref(null);
+const mobileContentRef = ref(null);
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const belowMd = breakpoints.smaller('md');
+const isMobile = computed(() => !props.disableMobileView && belowMd.value);
+const showPopover = computed(() => isActive.value && !isMobile.value);
+
+const { fixedPosition, updatePosition } = useDropdownPosition(
+  triggerRef,
+  popoverRef,
+  showPopover,
+  { align: props.align }
+);
+
+const show = async () => {
+  isActive.value = true;
+  if (!isMobile.value) {
+    await nextTick();
+    updatePosition();
+  }
+  emit('show');
+};
+
+const hide = () => {
+  if (!isActive.value) return;
+  isActive.value = false;
+  emit('hide');
+};
+
+const toggle = async () => {
+  if (isActive.value) hide();
+  else await show();
+};
+
+// Recalculate position when switching from mobile to desktop while open
+watch(isMobile, async mobile => {
+  if (!isActive.value || mobile) return;
+  await nextTick();
+  updatePosition();
+});
+
+const handleClickOutside = event => {
+  if (triggerRef.value?.contains(event.target)) return;
+  hide();
+};
+
+// Selectors for teleported elements that should not trigger close
+const clickOutsideIgnore = [
+  'dialog.ProseMirror-prompt-backdrop',
+  '[data-popover-content]',
+];
+
+useKeyboardEvents({
+  Escape: {
+    action: () => isActive.value && hide(),
+    allowOnFocusedInput: true,
+  },
+});
+
+defineExpose({ show, hide, toggle });
+</script>
+
+<template>
+  <span ref="triggerRef" class="inline-flex" @click="toggle">
+    <slot :is-open="isActive" />
+  </span>
+
+  <TeleportWithDirection to="body">
+    <!-- Mobile: centered modal with backdrop -->
+    <div
+      v-if="isActive && isMobile"
+      data-popover-backdrop
+      class="fixed inset-0 z-[9999] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center bg-n-alpha-black1"
+    >
+      <div
+        ref="mobileContentRef"
+        v-on-click-outside="[
+          handleClickOutside,
+          { ignore: clickOutsideIgnore },
+        ]"
+        data-popover-content
+        class="relative flex flex-col w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+      >
+        <div
+          class="flex-1 min-h-0 overflow-y-auto overscroll-contain rounded-xl"
+        >
+          <slot name="content" :hide="hide" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Desktop: fixed popover -->
+    <div
+      v-else-if="showPopover"
+      ref="popoverRef"
+      v-on-click-outside="[handleClickOutside, { ignore: clickOutsideIgnore }]"
+      data-popover-content
+      :class="fixedPosition.class"
+      :style="fixedPosition.style"
+      class="flex flex-col bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+    >
+      <div
+        class="flex-1 min-h-0 overflow-y-auto overscroll-contain rounded-xl"
+        :class="{ 'border border-n-strong': showContentBorder }"
+      >
+        <slot name="content" :hide="hide" />
+      </div>
+    </div>
+  </TeleportWithDirection>
+</template>

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

@@ -10,8 +10,6 @@ import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -63,16 +61,6 @@ const hasAdvancedAssignment = computed(() => {
   );
 });
 
-const hasCustomTools = computed(() => {
-  return (
-    isFeatureEnabledonAccount.value(
-      accountId.value,
-      FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS
-    ) ||
-    isFeatureEnabledonAccount.value(accountId.value, FEATURE_FLAGS.CAPTAIN_V2)
-  );
-});
-
 const toggleShortcutModalFn = show => {
   if (show) {
     emit('openKeyShortcutModal');
@@ -194,15 +182,6 @@ const closeMobileSidebar = () => {
   emit('closeMobileSidebar');
 };
 
-const onComposeOpen = toggleFn => {
-  toggleFn();
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
-};
-
-const onComposeClose = () => {
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-};
-
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -260,6 +239,12 @@ const menuItems = computed(() => {
           activeOn: ['conversation_through_mentions'],
           to: accountScopedRoute('conversation_mentions'),
         },
+        {
+          name: 'Participating',
+          label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
+          activeOn: ['conversation_through_participating'],
+          to: accountScopedRoute('conversation_participating'),
+        },
         {
           name: 'Unattended',
           activeOn: ['conversation_through_unattended'],
@@ -374,18 +359,14 @@ const menuItems = computed(() => {
             navigationPath: 'captain_assistants_inboxes_index',
           }),
         },
-        ...(hasCustomTools.value
-          ? [
-              {
-                name: 'Tools',
-                label: t('SIDEBAR.CAPTAIN_TOOLS'),
-                activeOn: ['captain_tools_index'],
-                to: accountScopedRoute('captain_assistants_index', {
-                  navigationPath: 'captain_tools_index',
-                }),
-              },
-            ]
-          : []),
+        {
+          name: 'Tools',
+          label: t('SIDEBAR.CAPTAIN_TOOLS'),
+          activeOn: ['captain_tools_index'],
+          to: accountScopedRoute('captain_assistants_index', {
+            navigationPath: 'captain_tools_index',
+          }),
+        },
         {
           name: 'Settings',
           label: t('SIDEBAR.CAPTAIN_SETTINGS'),
@@ -742,7 +723,13 @@ const menuItems = computed(() => {
   <aside
     v-on-click-outside="[
       closeMobileSidebar,
-      { ignore: ['#mobile-sidebar-launcher'] },
+      {
+        ignore: [
+          '#mobile-sidebar-launcher',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
     ]"
     class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
@@ -810,8 +797,8 @@ const menuItems = computed(() => {
         >
           <span class="i-lucide-search size-4 text-n-slate-11" />
         </RouterLink>
-        <ComposeConversation align-position="right" @close="onComposeClose">
-          <template #trigger="{ toggle, isOpen }">
+        <ComposeConversation align="start">
+          <template #trigger="{ isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
@@ -823,7 +810,6 @@ const menuItems = computed(() => {
                   : '!h-7 !outline-n-weak !text-n-slate-11',
                 { '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen },
               ]"
-              @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>

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

@@ -158,9 +158,11 @@ const activeChild = computed(() => {
     return rankedPage ?? activeOnPages[0];
   }
 
-  return navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
+  return navigableChildren.value.find(child => {
+    if (!child.to) return false;
+    const childPath = resolvePath(child.to);
+    return route.path === childPath || route.path.startsWith(`${childPath}/`);
+  });
 });
 
 const hasActiveChild = computed(() => {

app/javascript/dashboard/components/ChatList.vue

@@ -1,15 +1,5 @@
 <script setup>
-// [TODO] This componet is too big and bulky to be in the same file, we can consider splitting this into multiple
-// composables and components, useVirtualChatList, useChatlistFilters
-import {
-  ref,
-  unref,
-  provide,
-  computed,
-  watch,
-  onMounted,
-  defineEmits,
-} from 'vue';
+import { ref, unref, provide, computed, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import {
@@ -17,23 +7,19 @@ import {
   useFunctionGetter,
 } from 'dashboard/composables/store.js';
 
-import { Virtualizer } from 'virtua/vue';
 import ChatListHeader from './ChatListHeader.vue';
+import ConversationList from './ConversationList.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ConversationFilter from 'next/filter/ConversationFilter.vue';
 import SaveCustomView from 'next/filter/SaveCustomView.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationItem from './ConversationItem.vue';
 import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
 import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useAlert } from 'dashboard/composables';
-import { useChatListKeyboardEvents } from 'dashboard/composables/chatlist/useChatListKeyboardEvents';
 import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 import { useFilter } from 'shared/composables/useFilter';
 import { useTrack } from 'dashboard/composables';
@@ -56,6 +42,7 @@ import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHe
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
   isOnMentionsView,
+  isOnParticipatingView,
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import {
@@ -84,10 +71,6 @@ const route = useRoute();
 const store = useStore();
 
 const resolveAttributesModalRef = ref(null);
-const conversationListRef = ref(null);
-const virtualListRef = ref(null);
-
-provide('contextMenuElementTarget', virtualListRef);
 
 const activeAssigneeTab = ref(wootConstants.ASSIGNEE_TYPE.ME);
 const activeStatus = ref(wootConstants.STATUS_TYPE.OPEN);
@@ -99,7 +82,6 @@ const chatsOnView = ref([]);
 const foldersQuery = ref({});
 const showAddFoldersModal = ref(false);
 const showDeleteFoldersModal = ref(false);
-const isContextMenuOpen = ref(false);
 const appliedFilter = ref([]);
 const advancedFilterTypes = ref(
   advancedFilterOptions.map(filter => ({
@@ -113,6 +95,7 @@ const chatLists = useMapGetter('getFilteredConversations');
 const mineChatsList = useMapGetter('getMineChats');
 const allChatList = useMapGetter('getAllStatusChats');
 const unAssignedChatsList = useMapGetter('getUnAssignedChats');
+const participatingChatsList = useMapGetter('getParticipatingChats');
 const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
@@ -128,7 +111,6 @@ const currentAccountId = useMapGetter('getCurrentAccountId');
 const getTeamFn = useMapGetter('teams/getTeam');
 const getConversationById = useMapGetter('getConversationById');
 
-useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -296,13 +278,15 @@ const pageTitle = computed(() => {
   if (props.label) {
     return `#${props.label}`;
   }
-  if (props.conversationType === 'mention') {
+  if (props.conversationType === wootConstants.CONVERSATION_TYPE.MENTION) {
     return t('CHAT_LIST.MENTION_HEADING');
   }
-  if (props.conversationType === 'participating') {
+  if (
+    props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
+  ) {
     return t('CONVERSATION_PARTICIPANTS.SIDEBAR_MENU_TITLE');
   }
-  if (props.conversationType === 'unattended') {
+  if (props.conversationType === wootConstants.CONVERSATION_TYPE.UNATTENDED) {
     return t('CHAT_LIST.UNATTENDED_HEADING');
   }
   if (hasActiveFolders.value) {
@@ -311,12 +295,30 @@ const pageTitle = computed(() => {
   return t('CHAT_LIST.TAB_HEADING');
 });
 
+function filterByAssigneeTab(conversations) {
+  if (activeAssigneeTab.value === wootConstants.ASSIGNEE_TYPE.ME) {
+    return conversations.filter(
+      c => c.meta?.assignee?.id === currentUser.value?.id
+    );
+  }
+  if (activeAssigneeTab.value === wootConstants.ASSIGNEE_TYPE.UNASSIGNED) {
+    return conversations.filter(c => !c.meta?.assignee);
+  }
+  return [...conversations];
+}
+
 const conversationList = computed(() => {
   let localConversationList = [];
 
   if (!hasAppliedFiltersOrActiveFolders.value) {
     const filters = conversationFilters.value;
-    if (activeAssigneeTab.value === 'me') {
+    if (
+      props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
+    ) {
+      localConversationList = filterByAssigneeTab(
+        participatingChatsList.value(filters)
+      );
+    } else if (activeAssigneeTab.value === 'me') {
       localConversationList = [...mineChatsList.value(filters)];
     } else if (activeAssigneeTab.value === 'unassigned') {
       localConversationList = [...unAssignedChatsList.value(filters)];
@@ -338,7 +340,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return (
+  return !!(
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -583,14 +585,6 @@ function loadMoreConversations() {
   }
 }
 
-// Use IntersectionObserver instead of @scroll since Virtualizer only emits on user scroll.
-// If the list doesn’t fill the viewport, loading can stall.
-// IntersectionObserver triggers as soon as the sentinel is visible.
-const intersectionObserverOptions = computed(() => ({
-  root: conversationListRef.value,
-  rootMargin: '100px 0px 100px 0px',
-}));
-
 function updateAssigneeTab(selectedTab) {
   if (activeAssigneeTab.value !== selectedTab) {
     resetBulkActions();
@@ -637,9 +631,11 @@ function redirectToConversationList() {
 
   let conversationType = '';
   if (isOnMentionsView({ route: { name } })) {
-    conversationType = 'mention';
+    conversationType = wootConstants.CONVERSATION_TYPE.MENTION;
+  } else if (isOnParticipatingView({ route: { name } })) {
+    conversationType = wootConstants.CONVERSATION_TYPE.PARTICIPATING;
   } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = 'unattended';
+    conversationType = wootConstants.CONVERSATION_TYPE.UNATTENDED;
   }
   router.push(
     conversationListPageURL({
@@ -782,10 +778,6 @@ function allSelectedConversationsStatus(status) {
   });
 }
 
-function onContextMenuToggle(state) {
-  isContextMenuOpen.value = state;
-}
-
 function toggleSelectAll(check) {
   selectAllConversations(check, conversationList);
 }
@@ -833,7 +825,6 @@ provide('assignTeam', onAssignTeam);
 provide('assignLabels', onAssignLabels);
 provide('removeLabels', onRemoveLabels);
 provide('updateConversationStatus', handleResolveConversation);
-provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
@@ -946,43 +937,18 @@ watch(conversationFilters, (newVal, oldVal) => {
       @assign-labels="onAssignLabels"
       @assign-team="onAssignTeamsForBulk"
     />
-    <div
-      ref="conversationListRef"
-      class="flex-1 min-h-0 overflow-y-auto conversations-list"
-      :class="{ '!overflow-hidden': isContextMenuOpen }"
-    >
-      <Virtualizer
-        ref="virtualListRef"
-        v-slot="{ item, index }"
-        :data="conversationList"
-      >
-        <ConversationItem
-          :source="item"
-          :label="label"
-          :team-id="teamId"
-          :folders-id="foldersId"
-          :conversation-type="conversationType"
-          :show-assignee="showAssigneeInConversationCard"
-          :data-index="index"
-          @select-conversation="selectConversation"
-          @de-select-conversation="deSelectConversation"
-        />
-      </Virtualizer>
-      <div v-if="chatListLoading" class="flex justify-center my-4">
-        <Spinner class="text-n-brand" />
-      </div>
-      <p
-        v-else-if="showEndOfListMessage"
-        class="p-4 text-center text-n-slate-11"
-      >
-        {{ $t('CHAT_LIST.EOF') }}
-      </p>
-      <IntersectionObserver
-        v-else
-        :options="intersectionObserverOptions"
-        @observed="loadMoreConversations"
-      />
-    </div>
+    <ConversationList
+      :conversation-list="conversationList"
+      :is-loading="chatListLoading"
+      :show-end-of-list-message="showEndOfListMessage"
+      :label="label"
+      :team-id="teamId"
+      :folders-id="foldersId"
+      :conversation-type="conversationType"
+      :show-assignee="showAssigneeInConversationCard"
+      :is-on-expanded-layout="isOnExpandedLayout"
+      @load-more="loadMoreConversations"
+    />
     <Dialog
       ref="deleteConversationDialogRef"
       type="alert"

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,74 +1,244 @@
-<script>
+<script setup>
+import { computed, ref, watch, inject } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
-export default {
-  components: {
-    ConversationCard,
-  },
-  inject: [
-    'selectConversation',
-    'deSelectConversation',
-    'assignAgent',
-    'assignTeam',
-    'assignLabels',
-    'removeLabels',
-    'updateConversationStatus',
-    'toggleContextMenu',
-    'markAsUnread',
-    'markAsRead',
-    'assignPriority',
-    'isConversationSelected',
-    'deleteConversation',
-  ],
-  props: {
-    source: {
-      type: Object,
-      required: true,
-    },
-    teamId: {
-      type: [String, Number],
-      default: 0,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    conversationType: {
-      type: String,
-      default: '',
-    },
-    foldersId: {
-      type: [String, Number],
-      default: 0,
-    },
-    showAssignee: {
-      type: Boolean,
-      default: false,
-    },
-  },
+import ConversationCardExpanded from 'dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue';
+import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
+import ConversationContextMenu from './widgets/conversation/contextMenu/Index.vue';
+
+const props = defineProps({
+  source: { type: Object, required: true },
+  teamId: { type: [String, Number], default: 0 },
+  label: { type: String, default: '' },
+  conversationType: { type: String, default: '' },
+  foldersId: { type: [String, Number], default: 0 },
+  showAssignee: { type: Boolean, default: false },
+  showExpanded: { type: Boolean, default: false },
+});
+
+const router = useRouter();
+const store = useStore();
+
+const selectConversation = inject('selectConversation');
+const deSelectConversation = inject('deSelectConversation');
+const assignAgent = inject('assignAgent');
+const assignTeam = inject('assignTeam');
+const assignLabels = inject('assignLabels');
+const removeLabels = inject('removeLabels');
+const updateConversationStatus = inject('updateConversationStatus');
+const toggleContextMenu = inject('toggleContextMenu');
+const markAsUnread = inject('markAsUnread');
+const markAsRead = inject('markAsRead');
+const assignPriority = inject('assignPriority');
+const isConversationSelected = inject('isConversationSelected');
+const deleteConversation = inject('deleteConversation');
+
+// --- Context menu state (shared by both layouts) ---
+const showContextMenu = ref(false);
+const contextMenu = ref({ x: null, y: null });
+
+// Reset context menu state when the row is recycled to a different conversation.
+watch(
+  () => props.source.id,
+  () => {
+    if (showContextMenu.value) {
+      toggleContextMenu(false);
+    }
+    showContextMenu.value = false;
+    contextMenu.value = { x: null, y: null };
+  }
+);
+
+const currentChat = useMapGetter('getSelectedChat');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const activeInbox = useMapGetter('getSelectedInbox');
+const accountId = useMapGetter('getCurrentAccountId');
+
+const chatMetadata = computed(() => props.source.meta || {});
+const assignee = computed(() => chatMetadata.value.assignee || {});
+const senderId = computed(() => chatMetadata.value.sender?.id);
+
+const currentContact = computed(() =>
+  senderId.value ? store.getters['contacts/getContact'](senderId.value) : {}
+);
+
+const isActiveChat = computed(() => currentChat.value.id === props.source.id);
+
+const inbox = computed(() => {
+  const inboxId = props.source.inbox_id;
+  return inboxId ? store.getters['inboxes/getInbox'](inboxId) : {};
+});
+
+const showInboxName = computed(
+  () => !activeInbox.value && inboxesList.value.length > 1
+);
+const isInboxView = computed(() => !!activeInbox.value);
+const showAssigneeForExpandedCard = computed(
+  () => props.showExpanded || props.showAssignee
+);
+
+const conversationPath = computed(() =>
+  frontendURL(
+    conversationUrl({
+      accountId: accountId.value,
+      activeInbox: activeInbox.value,
+      id: props.source.id,
+      label: props.label,
+      teamId: props.teamId,
+      conversationType: props.conversationType,
+      foldersId: props.foldersId,
+    })
+  )
+);
+
+const onCardClick = e => {
+  const path = conversationPath.value;
+  if (!path) return;
+
+  if (e.metaKey || e.ctrlKey) {
+    e.preventDefault();
+    window.open(
+      `${window.chatwootConfig.hostURL}${path}`,
+      '_blank',
+      'noopener,noreferrer'
+    );
+    return;
+  }
+
+  if (isActiveChat.value) return;
+  router.push({ path });
+};
+
+const onExpandedSelect = checked => {
+  if (checked) {
+    selectConversation(props.source.id, inbox.value.id);
+  } else {
+    deSelectConversation(props.source.id, inbox.value.id);
+  }
+};
+
+const openContextMenu = e => {
+  e.preventDefault();
+  toggleContextMenu(true);
+  contextMenu.value.x = e.pageX || e.clientX;
+  contextMenu.value.y = e.pageY || e.clientY;
+  showContextMenu.value = true;
+};
+
+const closeContextMenu = () => {
+  toggleContextMenu(false);
+  showContextMenu.value = false;
+  contextMenu.value.x = null;
+  contextMenu.value.y = null;
+};
+
+const onUpdateConversation = (status, snoozedUntil) => {
+  closeContextMenu();
+  updateConversationStatus(props.source.id, status, snoozedUntil);
+};
+
+const onAssignAgent = agent => {
+  assignAgent(agent, [props.source.id]);
+  closeContextMenu();
+};
+
+const onAssignLabel = label => {
+  assignLabels([label.title], [props.source.id]);
+};
+
+const onRemoveLabel = label => {
+  removeLabels([label.title], [props.source.id]);
+};
+
+const onAssignTeam = team => {
+  assignTeam(team, props.source.id);
+  closeContextMenu();
+};
+
+const onMarkAsUnread = () => {
+  markAsUnread(props.source.id);
+  closeContextMenu();
+};
+
+const onMarkAsRead = () => {
+  markAsRead(props.source.id);
+  closeContextMenu();
+};
+
+const onAssignPriority = priority => {
+  assignPriority(priority, props.source.id);
+  closeContextMenu();
+};
+
+const onDeleteConversation = () => {
+  deleteConversation(props.source.id);
+  closeContextMenu();
 };
 </script>
 
 <template>
-  <ConversationCard
-    :active-label="label"
-    :team-id="teamId"
-    :folders-id="foldersId"
+  <!-- Expanded layout: wide screen + expanded setting -->
+  <ConversationCardExpanded
+    v-if="showExpanded"
     :chat="source"
-    :conversation-type="conversationType"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
     :selected="isConversationSelected(source.id)"
+    :is-active-chat="isActiveChat"
+    :show-assignee="showAssigneeForExpandedCard"
+    :show-inbox-name="showInboxName"
+    :is-inbox-view="isInboxView"
+    @select-conversation="onExpandedSelect"
+    @de-select-conversation="onExpandedSelect"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
+  />
+
+  <!-- Default (condensed) layout -->
+  <ConversationCard
+    v-else
+    :chat="source"
+    :current-contact="currentContact"
+    :assignee="assignee"
+    :inbox="inbox"
+    :selected="isConversationSelected(source.id)"
+    :is-active-chat="isActiveChat"
     :show-assignee="showAssignee"
-    enable-context-menu
+    :show-inbox-name="showInboxName"
+    @click="onCardClick"
+    @contextmenu="openContextMenu"
     @select-conversation="selectConversation"
     @de-select-conversation="deSelectConversation"
-    @assign-agent="assignAgent"
-    @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @remove-label="removeLabels"
-    @update-conversation-status="updateConversationStatus"
-    @context-menu-toggle="toggleContextMenu"
-    @mark-as-unread="markAsUnread"
-    @mark-as-read="markAsRead"
-    @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
   />
+
+  <!-- Shared context menu for both layouts -->
+  <ContextMenu
+    v-if="showContextMenu"
+    :x="contextMenu.x"
+    :y="contextMenu.y"
+    @close="closeContextMenu"
+  >
+    <ConversationContextMenu
+      :status="source.status"
+      :inbox-id="inbox.id"
+      :priority="source.priority"
+      :chat-id="source.id"
+      :has-unread-messages="source.unread_count > 0"
+      :conversation-labels="source.labels"
+      :conversation-url="conversationPath"
+      @update-conversation="onUpdateConversation"
+      @assign-agent="onAssignAgent"
+      @assign-label="onAssignLabel"
+      @remove-label="onRemoveLabel"
+      @assign-team="onAssignTeam"
+      @mark-as-unread="onMarkAsUnread"
+      @mark-as-read="onMarkAsRead"
+      @assign-priority="onAssignPriority"
+      @delete-conversation="onDeleteConversation"
+      @close="closeContextMenu"
+    />
+  </ContextMenu>
 </template>

app/javascript/dashboard/components/ConversationList.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, computed, provide } from 'vue';
+import { Virtualizer } from 'virtua/vue';
+import { useBreakpoints } from '@vueuse/core';
+import { useChatListKeyboardEvents } from 'dashboard/composables/chatlist/useChatListKeyboardEvents';
+import ConversationItem from './ConversationItem.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
+
+import wootConstants from 'dashboard/constants/globals';
+
+const props = defineProps({
+  conversationList: { type: Array, default: () => [] },
+  isLoading: { type: Boolean, default: false },
+  showEndOfListMessage: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  teamId: { type: [String, Number], default: 0 },
+  foldersId: { type: [String, Number], default: 0 },
+  conversationType: { type: String, default: '' },
+  showAssignee: { type: Boolean, default: false },
+  isOnExpandedLayout: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['loadMore']);
+
+const conversationListRef = ref(null);
+const virtualListRef = ref(null);
+const isContextMenuOpen = ref(false);
+
+provide('contextMenuElementTarget', virtualListRef);
+
+const breakpoints = useBreakpoints({
+  lg: wootConstants.LARGE_SCREEN_BREAKPOINT,
+});
+const isLgScreen = breakpoints.greaterOrEqual('lg');
+const showExpandedCards = computed(
+  () => props.isOnExpandedLayout && isLgScreen.value
+);
+
+useChatListKeyboardEvents(conversationListRef);
+
+const intersectionObserverOptions = computed(() => ({
+  root: conversationListRef.value,
+  rootMargin: '100px 0px 100px 0px',
+}));
+
+const onContextMenuToggle = state => {
+  isContextMenuOpen.value = state;
+};
+
+const loadMoreConversations = () => {
+  emit('loadMore');
+};
+
+provide('toggleContextMenu', onContextMenuToggle);
+
+defineExpose({ conversationListRef });
+</script>
+
+<template>
+  <div
+    ref="conversationListRef"
+    class="flex-1 min-h-0 overflow-y-auto conversations-list"
+    :class="{ '!overflow-hidden': isContextMenuOpen }"
+  >
+    <Virtualizer
+      ref="virtualListRef"
+      v-slot="{ item }"
+      :data="conversationList"
+      class="[&>div:has(+_div_.active)>*]:!border-n-surface-1 [&>div:has(+_div_.selected)>*]:!border-n-surface-1"
+    >
+      <ConversationItem
+        :source="item"
+        :label="label"
+        :team-id="teamId"
+        :folders-id="foldersId"
+        :conversation-type="conversationType"
+        :show-assignee="showAssignee"
+        :show-expanded="showExpandedCards"
+      />
+    </Virtualizer>
+    <div v-if="isLoading" class="flex justify-center my-4">
+      <Spinner class="text-n-brand" />
+    </div>
+    <p v-else-if="showEndOfListMessage" class="p-4 text-center text-n-slate-11">
+      {{ $t('CHAT_LIST.EOF') }}
+    </p>
+    <IntersectionObserver
+      v-else
+      :options="intersectionObserverOptions"
+      @observed="loadMoreConversations"
+    />
+  </div>
+</template>

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

@@ -44,6 +44,7 @@ const handleEndCall = async () => {
   await endCallSession({
     conversationId: call.conversationId,
     inboxId,
+    callSid: call.callSid,
   });
 };
 

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

@@ -0,0 +1,244 @@
+<script setup>
+import { watch, onUnmounted, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useVoiceCallSession } from 'dashboard/composables/useVoiceCallSession';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import { useI18n } from 'vue-i18n';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+const { t } = useI18n();
+const router = useRouter();
+
+const {
+  activeCall,
+  incomingCalls,
+  hasActiveCall,
+  hasIncomingCall,
+  isAccepting,
+  isMuted,
+  isOutboundRinging,
+  callError,
+  formattedCallDuration,
+  acceptCall,
+  rejectCall,
+  endActiveCall,
+  toggleMute,
+  dismissIncomingCall,
+  startDurationTimer,
+} = useVoiceCallSession();
+
+// In server-relay mode, the timer starts when the Peer B WebRTC handshake
+// completes (not when the agent clicks accept). Listen for this event.
+const onAgentWebRTCConnected = () => {
+  startDurationTimer();
+};
+
+const onPermissionGranted = ({ contactName }) => {
+  emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+    message: t('WHATSAPP_CALL.PERMISSION_GRANTED', { contactName }),
+    type: 'success',
+  });
+};
+
+onMounted(() => {
+  emitter.on('voice_call:agent_webrtc_connected', onAgentWebRTCConnected);
+  emitter.on('voice_call:permission_granted', onPermissionGranted);
+});
+
+// Auto-dismiss ringing calls after 30 seconds
+const autoRejectTimers = new Map();
+
+const startAutoRejectTimer = call => {
+  if (autoRejectTimers.has(call.callId)) return;
+  const timer = setTimeout(() => {
+    dismissIncomingCall(call);
+    autoRejectTimers.delete(call.callId);
+  }, 30000);
+  autoRejectTimers.set(call.callId, timer);
+};
+
+const clearAutoRejectTimer = callId => {
+  const timer = autoRejectTimers.get(callId);
+  if (timer) {
+    clearTimeout(timer);
+    autoRejectTimers.delete(callId);
+  }
+};
+
+const handleAccept = async call => {
+  clearAutoRejectTimer(call.callId);
+  await acceptCall(call);
+  if (activeCall.value) {
+    router.push({
+      name: 'inbox_conversation',
+      params: { conversation_id: call.conversationId },
+    });
+  }
+};
+
+const handleReject = async call => {
+  clearAutoRejectTimer(call.callId);
+  await rejectCall(call);
+};
+
+const handleEndCall = async () => {
+  await endActiveCall();
+};
+
+// Start auto-reject timers for each newly added incoming call
+watch(
+  incomingCalls,
+  calls => {
+    calls.forEach(call => startAutoRejectTimer(call));
+  },
+  { immediate: true, deep: true }
+);
+
+onUnmounted(() => {
+  autoRejectTimers.forEach(timer => clearTimeout(timer));
+  autoRejectTimers.clear();
+  emitter.off('voice_call:agent_webrtc_connected', onAgentWebRTCConnected);
+  emitter.off('voice_call:permission_granted', onPermissionGranted);
+});
+</script>
+
+<template>
+  <div
+    v-if="hasIncomingCall || hasActiveCall"
+    class="fixed ltr:right-4 rtl:left-4 bottom-20 z-50 flex flex-col gap-2 w-72"
+  >
+    <!-- Error banner -->
+    <div
+      v-if="callError"
+      class="px-3 py-2 bg-n-ruby-3 border border-n-ruby-6 rounded-lg text-xs text-n-ruby-11"
+    >
+      {{ callError }}
+    </div>
+
+    <!-- Incoming calls (shown when there's no active call yet) -->
+    <template v-if="!hasActiveCall">
+      <div
+        v-for="call in incomingCalls"
+        :key="call.callId"
+        class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+      >
+        <div
+          class="animate-pulse ring-2 ring-n-teal-9 rounded-full inline-flex"
+        >
+          <Avatar
+            :src="call.caller?.avatar"
+            :name="call.caller?.name || call.caller?.phone"
+            :size="40"
+            rounded-full
+          />
+        </div>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+            {{
+              call.caller?.name ||
+              call.caller?.phone ||
+              t('WHATSAPP_CALL.UNKNOWN_CALLER')
+            }}
+          </p>
+          <p class="text-xs text-n-slate-11 truncate">
+            {{
+              call.provider === 'twilio'
+                ? 'Incoming voice call'
+                : t('WHATSAPP_CALL.INCOMING_WHATSAPP_CALL')
+            }}
+          </p>
+        </div>
+        <div class="flex shrink-0 gap-2">
+          <button
+            class="flex justify-center items-center w-10 h-10 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+            :title="t('WHATSAPP_CALL.REJECT')"
+            @click="handleReject(call)"
+          >
+            <i class="text-lg text-white i-ph-phone-x-bold" />
+          </button>
+          <button
+            class="flex justify-center items-center w-10 h-10 bg-n-teal-9 hover:bg-n-teal-10 rounded-full transition-colors"
+            :disabled="isAccepting"
+            :title="t('WHATSAPP_CALL.ACCEPT')"
+            @click="handleAccept(call)"
+          >
+            <i
+              v-if="isAccepting"
+              class="text-lg text-white i-ph-circle-notch animate-spin"
+            />
+            <i v-else class="text-lg text-white i-ph-phone-bold" />
+          </button>
+        </div>
+      </div>
+    </template>
+
+    <!-- Active call widget -->
+    <div
+      v-if="hasActiveCall"
+      class="flex items-center gap-3 p-4 bg-n-solid-2 rounded-xl shadow-xl outline outline-1 outline-n-strong"
+    >
+      <div
+        class="ring-2 ring-n-teal-9 rounded-full inline-flex"
+        :class="{ 'animate-pulse': isOutboundRinging }"
+      >
+        <Avatar
+          :src="activeCall.caller?.avatar"
+          :name="activeCall.caller?.name || activeCall.caller?.phone"
+          :size="40"
+          rounded-full
+        />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-n-slate-12 truncate mb-0">
+          {{
+            activeCall.caller?.name ||
+            activeCall.caller?.phone ||
+            t('WHATSAPP_CALL.UNKNOWN_CALLER')
+          }}
+        </p>
+        <p
+          class="text-sm"
+          :class="
+            isOutboundRinging ? 'text-n-slate-11' : 'font-mono text-n-teal-9'
+          "
+        >
+          <template v-if="isOutboundRinging">
+            {{ t('WHATSAPP_CALL.RINGING') }}
+          </template>
+          <template v-else>
+            {{ formattedCallDuration }}
+          </template>
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <!-- Mute toggle -->
+        <button
+          class="flex justify-center items-center w-9 h-9 rounded-full transition-colors"
+          :class="
+            isMuted
+              ? 'bg-n-amber-9 hover:bg-n-amber-10'
+              : 'bg-n-slate-4 hover:bg-n-slate-5'
+          "
+          :title="isMuted ? t('WHATSAPP_CALL.UNMUTE') : t('WHATSAPP_CALL.MUTE')"
+          @click="toggleMute"
+        >
+          <i
+            class="text-base text-white"
+            :class="
+              isMuted ? 'i-ph-microphone-slash-bold' : 'i-ph-microphone-bold'
+            "
+          />
+        </button>
+        <!-- Hang up -->
+        <button
+          class="flex justify-center items-center w-9 h-9 bg-n-ruby-9 hover:bg-n-ruby-10 rounded-full transition-colors"
+          :title="t('WHATSAPP_CALL.HANG_UP')"
+          @click="handleEndCall"
+        >
+          <i class="text-base text-white i-ph-phone-x-bold" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -27,10 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  isPopout: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -208,10 +204,7 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 mb-4">
-    <div
-      class="overflow-y-auto"
-      :class="{ 'max-h-96': isPopout, 'max-h-56': !isPopout }"
-    >
+    <div class="overflow-y-auto max-h-56">
       <p
         v-dompurify-html="formatMessage(generatedContent, false)"
         class="text-n-iris-12 text-sm prose-sm font-normal !mb-4"

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

@@ -313,7 +313,12 @@ const plugins = computed(() => {
 const sendWithSignature = computed(() => {
   // this is considered the source of truth, we watch this property
   // on change, we toggle the signature in the editor
-  if (props.allowSignature && !props.isPrivate && props.channelType) {
+  if (
+    props.allowSignature &&
+    !props.isPrivate &&
+    props.channelType &&
+    !props.disabled
+  ) {
     return fetchSignatureFlagFromUISettings(props.channelType);
   }
 
@@ -436,6 +441,7 @@ function reloadState(content = props.modelValue) {
 }
 
 function addSignature() {
+  if (props.disabled) return;
   let content = props.modelValue;
   // see if the content is empty, if it is before appending the signature
   // we need to add a paragraph node and move the cursor at the start of the editor
@@ -454,6 +460,7 @@ function addSignature() {
 }
 
 function removeSignature() {
+  if (props.disabled) return;
   if (!props.signature) return;
   let content = props.modelValue;
   content = removeSignatureHelper(
@@ -806,7 +813,7 @@ watch(
 
 watch(sendWithSignature, newValue => {
   // see if the allowSignature flag is true
-  if (props.allowSignature) {
+  if (props.allowSignature && !props.disabled) {
     toggleSignatureInEditor(newValue);
   }
 });
@@ -977,7 +984,32 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-woot-style {
-  @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
+  @apply overflow-auto;
+}
+
+.ProseMirror-woot-style:not(
+    :where(.resizable-editor-wrapper .ProseMirror-woot-style)
+  ) {
+  @apply min-h-[5rem] max-h-[7.5rem];
+}
+
+// Resizable editor wrapper styles
+.resizable-editor-wrapper {
+  .ProseMirror-woot-style {
+    min-height: clamp(
+      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
+      var(--editor-height, var(--editor-min-height, 5rem)),
+      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
+    );
+    max-height: clamp(
+      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
+      var(--editor-height, var(--editor-min-height, 5rem)),
+      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
+    );
+    transition:
+      min-height var(--editor-height-transition, 180ms ease),
+      max-height var(--editor-height-transition, 180ms ease);
+  }
 }
 
 .ProseMirror-prompt-backdrop::backdrop {

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

@@ -8,13 +8,22 @@ import {
   EditorState,
   Selection,
 } from '@chatwoot/prosemirror-schema';
+import {
+  suggestionsPlugin,
+  triggerCharacters,
+} from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
+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 { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import SlashCommandMenu from './SlashCommandMenu.vue';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+const SLASH_MENU_OFFSET = 4;
 const createState = (
   content,
   placeholder,
@@ -40,6 +49,7 @@ let editorView = null;
 let state;
 
 export default {
+  components: { SlashCommandMenu },
   mixins: [keyboardEventListenerMixins],
   props: {
     modelValue: { type: String, default: '' },
@@ -62,8 +72,15 @@ export default {
   },
   data() {
     return {
-      plugins: [imagePastePlugin(this.handleImageUpload)],
+      plugins: [
+        imagePastePlugin(this.handleImageUpload),
+        this.createSlashPlugin(),
+      ],
       isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
+      showSlashMenu: false,
+      slashSearchTerm: '',
+      slashRange: null,
+      slashMenuPosition: null,
     };
   },
   watch: {
@@ -79,7 +96,7 @@ export default {
 
   created() {
     state = createState(
-      this.modelValue,
+      this.modelValue || '',
       this.placeholder,
       this.plugins,
       { onImageUpload: this.openFileBrowser },
@@ -95,6 +112,126 @@ export default {
     }
   },
   methods: {
+    createSlashPlugin() {
+      return suggestionsPlugin({
+        matcher: triggerCharacters('/', 0),
+        suggestionClass: '',
+        onEnter: args => {
+          this.showSlashMenu = true;
+          this.slashRange = args.range;
+          this.slashSearchTerm = args.text || '';
+          this.updateSlashMenuPosition(args.range.from);
+          return false;
+        },
+        onChange: args => {
+          this.slashRange = args.range;
+          this.slashSearchTerm = args.text;
+          return false;
+        },
+        onExit: () => {
+          this.slashSearchTerm = '';
+          this.showSlashMenu = false;
+          this.slashMenuPosition = null;
+          return false;
+        },
+        onKeyDown: ({ event }) => {
+          return (
+            event.keyCode === 13 &&
+            this.showSlashMenu &&
+            this.$refs.slashMenu?.hasItems
+          );
+        },
+      });
+    },
+    updateSlashMenuPosition(pos) {
+      if (!editorView) return;
+      const coords = editorView.coordsAtPos(pos);
+      const editorRect = this.$refs.editor.getBoundingClientRect();
+      const isRtl = getComputedStyle(this.$refs.editor).direction === 'rtl';
+      this.slashMenuPosition = {
+        top: coords.bottom - editorRect.top + SLASH_MENU_OFFSET,
+        ...(isRtl
+          ? { right: editorRect.right - coords.right }
+          : { left: coords.left - editorRect.left }),
+      };
+    },
+    removeSlashTriggerText() {
+      if (!editorView || !this.slashRange) return;
+      const { from, to } = this.slashRange;
+      editorView.dispatch(editorView.state.tr.delete(from, to));
+      state = editorView.state;
+    },
+    executeSlashCommand(actionKey) {
+      if (!editorView) return;
+
+      this.removeSlashTriggerText();
+
+      const { schema } = editorView.state;
+      const commandMap = {
+        strong: () =>
+          toggleMark(schema.marks.strong)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        em: () =>
+          toggleMark(schema.marks.em)(editorView.state, editorView.dispatch),
+        strike: () =>
+          toggleMark(schema.marks.strike)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        code: () =>
+          toggleMark(schema.marks.code)(editorView.state, editorView.dispatch),
+        h1: () =>
+          toggleBlockType(schema.nodes.heading, { level: 1 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        h2: () =>
+          toggleBlockType(schema.nodes.heading, { level: 2 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        h3: () =>
+          toggleBlockType(schema.nodes.heading, { level: 3 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        bulletList: () =>
+          wrapInList(schema.nodes.bullet_list)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        orderedList: () =>
+          wrapInList(schema.nodes.ordered_list)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        insertTable: () => {
+          const { table, table_row, table_header, table_cell, paragraph } =
+            schema.nodes;
+          const headerCells = [0, 1, 2].map(() =>
+            table_header.createAndFill(null, paragraph.create())
+          );
+          const dataCells = [0, 1, 2].map(() =>
+            table_cell.createAndFill(null, paragraph.create())
+          );
+          const headerRow = table_row.create(null, headerCells);
+          const dataRow = table_row.create(null, dataCells);
+          const tableNode = table.create(null, [headerRow, dataRow]);
+          const tr = editorView.state.tr.replaceSelectionWith(tableNode);
+          editorView.dispatch(tr.scrollIntoView());
+        },
+      };
+
+      const command = commandMap[actionKey];
+      if (command) {
+        command();
+        state = editorView.state;
+        this.emitOnChange();
+        editorView.focus();
+      }
+    },
     contentFromEditor() {
       if (editorView) {
         return ArticleMarkdownSerializer.serialize(editorView.state.doc);
@@ -170,7 +307,7 @@ export default {
     },
     reloadState() {
       state = createState(
-        this.modelValue,
+        this.modelValue || '',
         this.placeholder,
         this.plugins,
         { onImageUpload: this.openFileBrowser },
@@ -262,7 +399,8 @@ export default {
 
       // Get the editor's width
       const editorWidth = editor.offsetWidth;
-      const menubarWidth = 480; // Menubar width (adjust as needed (px))
+      const menubar = editor.querySelector('.ProseMirror-menubar');
+      const menubarWidth = menubar ? menubar.scrollWidth : 480;
 
       // Get the end position of the selection
       const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
@@ -290,7 +428,15 @@ export default {
 
 <template>
   <div>
-    <div class="editor-root editor--article">
+    <div class="editor-root editor--article relative">
+      <SlashCommandMenu
+        v-if="showSlashMenu"
+        ref="slashMenu"
+        :search-key="slashSearchTerm"
+        :enabled-menu-options="enabledMenuOptions"
+        :position="slashMenuPosition"
+        @select-action="executeSlashCommand"
+      />
       <input
         ref="imageUploadInput"
         type="file"

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

@@ -128,7 +128,6 @@ export default {
     },
   },
   emits: [
-    'replaceText',
     'toggleInsertArticle',
     'selectWhatsappTemplate',
     'selectContentTemplate',
@@ -277,9 +276,6 @@ export default {
     toggleMessageSignature() {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
     },
-    replaceText(text) {
-      this.$emit('replaceText', text);
-    },
     toggleInsertArticle() {
       this.$emit('toggleInsertArticle');
     },

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

@@ -54,7 +54,7 @@ export default {
       default: undefined,
     },
   },
-  emits: ['setReplyMode', 'togglePopout', 'executeCopilotAction'],
+  emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
   setup(props, { emit }) {
     const setReplyMode = mode => {
       emit('setReplyMode', mode);
@@ -189,7 +189,7 @@ export default {
         class="text-n-slate-11"
         sm
         icon="i-lucide-maximize-2"
-        @click="$emit('togglePopout')"
+        @click="$emit('toggleEditorSize')"
       />
     </div>
   </div>

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

@@ -0,0 +1,180 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
+  },
+  enabledMenuOptions: {
+    type: Array,
+    default: () => [],
+  },
+  position: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['selectAction']);
+
+const { t } = useI18n();
+
+const EDITOR_ACTIONS = [
+  {
+    value: 'h1',
+    labelKey: 'SLASH_COMMANDS.HEADING_1',
+    icon: 'i-lucide-heading-1',
+    menuKey: 'h1',
+  },
+  {
+    value: 'h2',
+    labelKey: 'SLASH_COMMANDS.HEADING_2',
+    icon: 'i-lucide-heading-2',
+    menuKey: 'h2',
+  },
+  {
+    value: 'h3',
+    labelKey: 'SLASH_COMMANDS.HEADING_3',
+    icon: 'i-lucide-heading-3',
+    menuKey: 'h3',
+  },
+  {
+    value: 'strong',
+    labelKey: 'SLASH_COMMANDS.BOLD',
+    icon: 'i-lucide-bold',
+    menuKey: 'strong',
+  },
+  {
+    value: 'em',
+    labelKey: 'SLASH_COMMANDS.ITALIC',
+    icon: 'i-lucide-italic',
+    menuKey: 'em',
+  },
+  {
+    value: 'insertTable',
+    labelKey: 'SLASH_COMMANDS.TABLE',
+    icon: 'i-lucide-table',
+    menuKey: 'insertTable',
+  },
+  {
+    value: 'strike',
+    labelKey: 'SLASH_COMMANDS.STRIKETHROUGH',
+    icon: 'i-lucide-strikethrough',
+    menuKey: 'strike',
+  },
+  {
+    value: 'code',
+    labelKey: 'SLASH_COMMANDS.CODE',
+    icon: 'i-lucide-code',
+    menuKey: 'code',
+  },
+  {
+    value: 'bulletList',
+    labelKey: 'SLASH_COMMANDS.BULLET_LIST',
+    icon: 'i-lucide-list',
+    menuKey: 'bulletList',
+  },
+  {
+    value: 'orderedList',
+    labelKey: 'SLASH_COMMANDS.ORDERED_LIST',
+    icon: 'i-lucide-list-ordered',
+    menuKey: 'orderedList',
+  },
+];
+
+const listContainerRef = ref(null);
+const selectedIndex = ref(0);
+
+const items = computed(() => {
+  const search = props.searchKey.toLowerCase();
+  return EDITOR_ACTIONS.filter(action => {
+    if (!props.enabledMenuOptions.includes(action.menuKey)) return false;
+    if (!search) return true;
+    return t(action.labelKey).toLowerCase().includes(search);
+  });
+});
+
+const hasItems = computed(() => items.value.length > 0);
+
+const menuStyle = computed(() => {
+  if (!props.position) return {};
+  const style = { top: `${props.position.top}px` };
+  if (props.position.right != null) {
+    style.right = `${props.position.right}px`;
+  } else {
+    style.left = `${props.position.left}px`;
+  }
+  return style;
+});
+
+const adjustScroll = () => {
+  nextTick(() => {
+    const container = listContainerRef.value;
+    if (!container) return;
+    const el = container.querySelector(`#slash-item-${selectedIndex.value}`);
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+    }
+  });
+};
+
+const onSelect = () => {
+  const item = items.value[selectedIndex.value];
+  if (item) emit('selectAction', item.value);
+};
+
+useKeyboardNavigableList({
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+// Reset selection when filtered items change
+watch(items, () => {
+  selectedIndex.value = 0;
+});
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onItemClick = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+
+defineExpose({ hasItems });
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="hasItems"
+    ref="listContainerRef"
+    class="bg-n-alpha-3 backdrop-blur-[100px] outline outline-1 outline-n-container absolute rounded-xl z-50 flex flex-col min-w-[10rem] shadow-lg p-2 overflow-auto max-h-[15rem]"
+    :style="menuStyle"
+  >
+    <button
+      v-for="(item, index) in items"
+      :id="`slash-item-${index}`"
+      :key="item.value"
+      type="button"
+      class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 border-0 rounded-lg text-n-slate-12 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2"
+      :class="{
+        'bg-n-alpha-1 dark:bg-n-alpha-2': index === selectedIndex,
+      }"
+      @mouseover="onHover(index)"
+      @click="onItemClick(index)"
+    >
+      <Icon :icon="item.icon" class="flex-shrink-0 size-3.5" />
+      <span class="min-w-0 text-sm truncate">
+        {{ t(item.labelKey) }}
+      </span>
+    </button>
+  </div>
+</template>

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

@@ -1,123 +1,58 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
-import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
 import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
+import UnreadBadge from 'dashboard/components-next/Conversation/ConversationCard/UnreadBadge.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
-import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import VoiceCallStatus from './VoiceCallStatus.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
-  activeLabel: { type: String, default: '' },
-  chat: { type: Object, default: () => ({}) },
-  hideInboxName: { type: Boolean, default: false },
-  hideThumbnail: { type: Boolean, default: false },
-  teamId: { type: [String, Number], default: 0 },
-  foldersId: { type: [String, Number], default: 0 },
-  showAssignee: { type: Boolean, default: false },
-  conversationType: { type: String, default: '' },
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
   selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  hideThumbnail: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
-  enableContextMenu: { type: Boolean, default: false },
-  allowedContextMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'removeLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
+  'click',
+  'contextmenu',
   'selectConversation',
   'deSelectConversation',
 ]);
 
-const router = useRouter();
-const store = useStore();
-
 const hovered = ref(false);
-const showContextMenu = ref(false);
-const contextMenu = ref({ x: null, y: null });
-
-// Reset UI state when conversation changes at same index (no :key, instance reused on reorder)
-// This prevents context menu/hover state from leaking to a different conversation
-// Emit contextMenuToggle(false) to sync parent state if menu was open during recycling
-const resetState = () => {
-  if (showContextMenu.value) {
-    emit('contextMenuToggle', false);
-  }
-  hovered.value = false;
-  showContextMenu.value = false;
-  contextMenu.value = { x: null, y: null };
-};
-
-watch(() => props.chat.id, resetState);
-
-const currentChat = useMapGetter('getSelectedChat');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const activeInbox = useMapGetter('getSelectedInbox');
-const accountId = useMapGetter('getCurrentAccountId');
-
-const chatMetadata = computed(() => props.chat.meta || {});
-
-const assignee = computed(() => chatMetadata.value.assignee || {});
-
-const senderId = computed(() => chatMetadata.value.sender?.id);
-
-const currentContact = computed(() => {
-  return senderId.value
-    ? store.getters['contacts/getContact'](senderId.value)
-    : {};
-});
-
-const isActiveChat = computed(() => {
-  return currentChat.value.id === props.chat.id;
-});
 
 const unreadCount = computed(() => props.chat.unread_count);
-
 const hasUnread = computed(() => unreadCount.value > 0);
-
-const isInboxNameVisible = computed(() => !activeInbox.value);
-
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const voiceCallData = computed(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  direction: props.chat.additional_attributes?.call_direction,
-}));
-
-const inboxId = computed(() => props.chat.inbox_id);
-
-const inbox = computed(() => {
-  return inboxId.value ? store.getters['inboxes/getInbox'](inboxId.value) : {};
-});
-
-const showInboxName = computed(() => {
-  return (
-    !props.hideInboxName &&
-    isInboxNameVisible.value &&
-    inboxesList.value.length > 1
-  );
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
 });
 
 const showMetaSection = computed(() => {
   return (
-    showInboxName.value ||
-    (props.showAssignee && assignee.value.name) ||
+    props.showInboxName ||
+    (props.showAssignee && props.assignee.name) ||
     props.chat.priority
   );
 });
@@ -136,41 +71,6 @@ const messagePreviewClass = computed(() => {
   ];
 });
 
-const conversationPath = computed(() => {
-  return frontendURL(
-    conversationUrl({
-      accountId: accountId.value,
-      activeInbox: activeInbox.value,
-      id: props.chat.id,
-      label: props.activeLabel,
-      teamId: props.teamId,
-      conversationType: props.conversationType,
-      foldersId: props.foldersId,
-    })
-  );
-});
-
-const onCardClick = e => {
-  const path = conversationPath.value;
-  if (!path) return;
-
-  // Handle Ctrl/Cmd + Click for new tab
-  if (e.metaKey || e.ctrlKey) {
-    e.preventDefault();
-    window.open(
-      `${window.chatwootConfig.hostURL}${path}`,
-      '_blank',
-      'noopener,noreferrer'
-    );
-    return;
-  }
-
-  // Skip if already active
-  if (isActiveChat.value) return;
-
-  router.push({ path });
-};
-
 const onThumbnailHover = () => {
   hovered.value = !props.hideThumbnail;
 };
@@ -181,83 +81,37 @@ const onThumbnailLeave = () => {
 
 const onSelectConversation = checked => {
   if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
+    emit('selectConversation', props.chat.id, props.inbox.id);
   } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.id);
+    emit('deSelectConversation', props.chat.id, props.inbox.id);
   }
 };
 
-const openContextMenu = e => {
-  if (!props.enableContextMenu) return;
-  e.preventDefault();
-  emit('contextMenuToggle', true);
-  contextMenu.value.x = e.pageX || e.clientX;
-  contextMenu.value.y = e.pageY || e.clientY;
-  showContextMenu.value = true;
-};
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => onSelectConversation(value),
+});
 
-const closeContextMenu = () => {
-  emit('contextMenuToggle', false);
-  showContextMenu.value = false;
-  contextMenu.value.x = null;
-  contextMenu.value.y = null;
-};
-
-const onUpdateConversation = (status, snoozedUntil) => {
-  closeContextMenu();
-  emit('updateConversationStatus', props.chat.id, status, snoozedUntil);
-};
-
-const onAssignAgent = agent => {
-  emit('assignAgent', agent, [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignLabel = label => {
-  emit('assignLabel', [label.title], [props.chat.id]);
-};
-
-const onRemoveLabel = label => {
-  emit('removeLabel', [label.title], [props.chat.id]);
-};
-
-const onAssignTeam = team => {
-  emit('assignTeam', team, props.chat.id);
-  closeContextMenu();
-};
-
-const markAsUnread = () => {
-  emit('markAsUnread', props.chat.id);
-  closeContextMenu();
-};
-
-const markAsRead = () => {
-  emit('markAsRead', props.chat.id);
-  closeContextMenu();
-};
-
-const assignPriority = priority => {
-  emit('assignPriority', priority, props.chat.id);
-  closeContextMenu();
-};
-
-const deleteConversation = () => {
-  emit('deleteConversation', props.chat.id);
-  closeContextMenu();
-};
+watch(
+  () => props.chat.id,
+  () => {
+    hovered.value = false;
+  }
+);
 </script>
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 border-t-0 border-b-0 border-l-0 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 cursor-pointer conversation border-b border-n-slate-3 hover:border-n-surface-1 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group hover:z-[1] before:content-[none] before:absolute before:-top-px before:inset-x-0 before:h-px before:bg-n-surface-1 before:pointer-events-none hover:before:content-['']"
     :class="{
-      'active animate-card-select bg-n-background border-n-weak': isActiveChat,
-      'bg-n-slate-2': selected,
+      'active animate-card-select bg-n-background !border-n-surface-1':
+        isActiveChat,
+      'selected bg-n-slate-2 !border-n-surface-1': selected,
       'px-0': compact,
       'px-3': !compact,
     }"
-    @click="onCardClick"
-    @contextmenu="openContextMenu($event)"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
   >
     <div
       class="relative"
@@ -272,7 +126,6 @@ const deleteConversation = () => {
         :status="currentContact.availability_status"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
         hide-offline-status
-        rounded-full
       >
         <template #overlay="{ size }">
           <label
@@ -281,20 +134,12 @@ const deleteConversation = () => {
             :style="{ width: `${size}px`, height: `${size}px` }"
             @click.stop
           >
-            <input
-              :value="selected"
-              :checked="selected"
-              class="!m-0 cursor-pointer"
-              type="checkbox"
-              @change="onSelectConversation($event.target.checked)"
-            />
+            <Checkbox v-model="selectedModel" />
           </label>
         </template>
       </Avatar>
     </div>
-    <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"
-    >
+    <div class="px-0 py-3 flex-1 min-w-0 border-line">
       <div
         v-if="showMetaSection"
         class="flex items-center min-w-0 gap-1"
@@ -369,12 +214,11 @@ const deleteConversation = () => {
             :conversation-id="chat.id"
           />
         </span>
-        <span
-          class="shadow-lg rounded-full text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
-          :class="hasUnread ? 'block' : 'hidden'"
-        >
-          {{ unreadCount > 9 ? '9+' : unreadCount }}
-        </span>
+        <UnreadBadge
+          v-if="hasUnread"
+          :count="unreadCount"
+          class="ltr:ml-auto rtl:mr-auto mt-1"
+        />
       </div>
       <CardLabels
         v-if="showLabelsSection"
@@ -386,32 +230,5 @@ const deleteConversation = () => {
         </template>
       </CardLabels>
     </div>
-    <ContextMenu
-      v-if="showContextMenu"
-      :x="contextMenu.x"
-      :y="contextMenu.y"
-      @close="closeContextMenu"
-    >
-      <ConversationContextMenu
-        :status="chat.status"
-        :inbox-id="inbox.id"
-        :priority="chat.priority"
-        :chat-id="chat.id"
-        :has-unread-messages="hasUnread"
-        :conversation-labels="chat.labels"
-        :conversation-url="conversationPath"
-        :allowed-options="allowedContextMenuOptions"
-        @update-conversation="onUpdateConversation"
-        @assign-agent="onAssignAgent"
-        @assign-label="onAssignLabel"
-        @remove-label="onRemoveLabel"
-        @assign-team="onAssignTeam"
-        @mark-as-unread="markAsUnread"
-        @mark-as-read="markAsRead"
-        @assign-priority="assignPriority"
-        @delete-conversation="deleteConversation"
-        @close="closeContextMenu"
-      />
-    </ContextMenu>
   </div>
 </template>

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

@@ -13,6 +13,14 @@ import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
 import { useI18n } from 'vue-i18n';
+import VoiceCallsAPI from 'dashboard/api/voiceCalls';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import { useVoiceCallsStore } from 'dashboard/stores/voiceCalls';
+import {
+  prepareOutboundOffer,
+  cleanupInboundWebRTC,
+} from 'dashboard/composables/useVoiceCallSession';
 
 const props = defineProps({
   chat: {
@@ -30,7 +38,10 @@ const store = useStore();
 const route = useRoute();
 const conversationHeader = ref(null);
 const { width } = useElementSize(conversationHeader);
-const { isAWebWidgetInbox } = useInbox();
+const { isAWebWidgetInbox, isAWhatsAppCloudChannel, voiceCallEnabled } =
+  useInbox();
+const voiceCallsStore = useVoiceCallsStore();
+const isInitiatingCall = ref(false);
 
 const currentChat = computed(() => store.getters.getSelectedChat);
 const accountId = computed(() => store.getters.getCurrentAccountId);
@@ -45,6 +56,7 @@ const backButtonUrl = computed(() => {
 
   const conversationTypeMap = {
     conversation_through_mentions: 'mention',
+    conversation_through_participating: 'participating',
     conversation_through_unattended: 'unattended',
   };
   return conversationListPageURL({
@@ -90,6 +102,99 @@ const hasMultipleInboxes = computed(
 );
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+// Returns the provider to use for an outbound call, based on the inbox
+// channel type. WhatsApp Cloud inboxes use :whatsapp; Twilio Voice inboxes
+// use :twilio. Returns null if outbound calling isn't supported on this
+// channel.
+const callProvider = computed(() => {
+  if (isAWhatsAppCloudChannel.value && inbox.value?.calling_enabled) {
+    return 'whatsapp';
+  }
+  if (voiceCallEnabled.value) {
+    return 'twilio';
+  }
+  return null;
+});
+
+const canInitiateVoiceCall = computed(() => {
+  if (!callProvider.value) return false;
+  if (voiceCallsStore.hasVoiceCall) return false;
+  return true;
+});
+
+// Outbound call initiation. WhatsApp now runs direct browser ↔ Meta WebRTC:
+// the browser builds the SDP offer locally before any network call, so Meta
+// gets the agent's real fingerprint and the eventual answer applies cleanly
+// in the cable handler. Twilio still POSTs first and waits for the
+// synchronous agent_offer in the response (its OutboundCallBuilder produces
+// the SDP server-side). On 138006 (no call permission) we tear down the local
+// PC immediately so the mic light goes off while the contact's phone shows
+// the consent prompt.
+const initiateWhatsappCall = async () => {
+  if (isInitiatingCall.value || !currentChat.value?.id || !callProvider.value)
+    return;
+  isInitiatingCall.value = true;
+  const isWhatsApp = callProvider.value === 'whatsapp';
+
+  try {
+    let sdpOffer = null;
+    if (isWhatsApp) {
+      sdpOffer = await prepareOutboundOffer({});
+    }
+
+    const response = await VoiceCallsAPI.initiate(
+      currentChat.value.id,
+      callProvider.value,
+      isWhatsApp ? { sdpOffer } : {}
+    );
+
+    const callStatus = response.data?.status;
+    if (
+      callStatus === 'permission_requested' ||
+      callStatus === 'permission_pending'
+    ) {
+      // Tear down the local PC; we'll rebuild from scratch on retry.
+      cleanupInboundWebRTC();
+      const message =
+        callStatus === 'permission_requested'
+          ? t('WHATSAPP_CALL.PERMISSION_REQUESTED')
+          : t('WHATSAPP_CALL.PERMISSION_PENDING');
+      emitter.emit(BUS_EVENTS.SHOW_ALERT, { message, type: 'info' });
+      return;
+    }
+
+    emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+      message: t('WHATSAPP_CALL.CALLING'),
+      type: 'success',
+    });
+
+    const callData = response.data || {};
+    voiceCallsStore.setActiveCall({
+      id: callData.id,
+      callId: callData.call_id,
+      provider: callData.provider || callProvider.value,
+      direction: 'outbound',
+      status: 'ringing',
+      conversationId: currentChat.value.id,
+      caller: {
+        name: currentContact.value?.name,
+        phone: currentContact.value?.phone_number,
+        avatar: currentContact.value?.thumbnail,
+      },
+    });
+  } catch (err) {
+    cleanupInboundWebRTC();
+    const errorMessage =
+      err.response?.data?.error || t('WHATSAPP_CALL.CALL_FAILED');
+    emitter.emit(BUS_EVENTS.SHOW_ALERT, {
+      message: errorMessage,
+      type: 'error',
+    });
+  } finally {
+    isInitiatingCall.value = false;
+  }
+};
 </script>
 
 <template>
@@ -151,6 +256,19 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         :parent-width="width"
         class="hidden md:flex"
       />
+      <button
+        v-if="canInitiateVoiceCall"
+        v-tooltip="$t('WHATSAPP_CALL.INITIATE_CALL')"
+        class="flex items-center justify-center w-8 h-8 rounded-lg text-n-slate-11 hover:text-n-slate-12 hover:bg-n-slate-3 transition-colors"
+        :disabled="isInitiatingCall"
+        @click="initiateWhatsappCall"
+      >
+        <i
+          v-if="isInitiatingCall"
+          class="text-base i-ph-circle-notch animate-spin"
+        />
+        <i v-else class="text-base i-ph-phone-bold" />
+      </button>
       <MoreActions :conversation-id="currentChat.id" />
     </div>
   </div>

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

@@ -41,7 +41,16 @@ const closeContactPanel = () => {
 
 <template>
   <div
-    v-on-click-outside="() => closeContactPanel()"
+    v-on-click-outside="[
+      () => closeContactPanel(),
+      {
+        ignore: [
+          'dialog.ProseMirror-prompt-backdrop',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
+    ]"
     class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {

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

@@ -16,10 +16,6 @@ defineProps({
     type: String,
     default: '',
   },
-  isPopout: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -69,7 +65,6 @@ const onSend = () => {
       :generated-content="generatedContent"
       :min-height="4"
       :enabled-menu-options="[]"
-      :is-popout="isPopout"
       @focus="onFocus"
       @blur="onBlur"
       @clear-selection="clearEditorSelection"

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

@@ -1,7 +1,7 @@
 <script>
-import { ref, provide } from 'vue';
+import { ref, provide, useTemplateRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
 // composable
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useLabelSuggestions } from 'dashboard/composables/useLabelSuggestions';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
@@ -11,6 +11,7 @@ import MessageList from 'next/message/MessageList.vue';
 import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ResizableEditorWrapper from './ResizableEditorWrapper.vue';
 
 // stores and apis
 import { mapGetters } from 'vuex';
@@ -43,21 +44,16 @@ export default {
     Banner,
     ConversationLabelSuggestion,
     Spinner,
+    ResizableEditorWrapper,
   },
   mixins: [inboxMixin],
   setup() {
-    const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
-
-    const keyboardEvents = {
-      Escape: {
-        action: () => {
-          isPopOutReplyBox.value = false;
-        },
-      },
-    };
-
-    useKeyboardEvents(keyboardEvents);
+    const resizableEditorWrapperRef = ref(null);
+    const messagesViewRef = useTemplateRef('messagesViewRef');
+    const topBannerRef = useTemplateRef('topBannerRef');
+    const { height: containerHeight } = useElementSize(messagesViewRef);
+    const { height: topBannerHeight } = useElementSize(topBannerRef);
 
     const {
       captainTasksEnabled,
@@ -68,11 +64,15 @@ export default {
     provide('contextMenuElementTarget', conversationPanelRef);
 
     return {
-      isPopOutReplyBox,
       captainTasksEnabled,
       getLabelSuggestions,
       isLabelSuggestionFeatureEnabled,
       conversationPanelRef,
+      resizableEditorWrapperRef,
+      messagesViewRef,
+      topBannerRef,
+      containerHeight,
+      topBannerHeight,
     };
   },
   data() {
@@ -254,6 +254,7 @@ export default {
       this.fetchAllAttachmentsFromCurrentChat();
       this.fetchSuggestions();
       this.messageSentSinceOpened = false;
+      this.resetReplyEditorHeight();
     },
   },
 
@@ -437,26 +438,37 @@ export default {
       const payload = useSnakeCase(message);
       await this.$store.dispatch('sendMessageWithData', payload);
     },
+    toggleReplyEditorSize() {
+      this.resizableEditorWrapperRef?.toggleEditorExpand?.();
+    },
+    resetReplyEditorHeight() {
+      this.resizableEditorWrapperRef?.resetEditorHeight?.();
+    },
   },
 };
 </script>
 
 <template>
-  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <Banner
-      v-if="!currentChat.can_reply"
-      color-scheme="alert"
-      class="mx-2 mt-2 overflow-hidden rounded-lg"
-      :banner-message="replyWindowBannerMessage"
-      :href-link="replyWindowLink"
-      :href-link-text="replyWindowLinkText"
-    />
-    <Banner
-      v-else-if="hasDuplicateInstagramInbox"
-      color-scheme="alert"
-      class="mx-2 mt-2 overflow-hidden rounded-lg"
-      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
-    />
+  <div
+    ref="messagesViewRef"
+    class="flex flex-col justify-between flex-grow h-full min-w-0 m-0"
+  >
+    <div ref="topBannerRef">
+      <Banner
+        v-if="!currentChat.can_reply"
+        color-scheme="alert"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="replyWindowBannerMessage"
+        :href-link="replyWindowLink"
+        :href-link-text="replyWindowLinkText"
+      />
+      <Banner
+        v-else-if="hasDuplicateInstagramInbox"
+        color-scheme="alert"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+      />
+    </div>
     <MessageList
       ref="conversationPanelRef"
       class="conversation-panel flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4"
@@ -498,13 +510,7 @@ export default {
         />
       </template>
     </MessageList>
-    <div
-      class="flex relative flex-col"
-      :class="{
-        'modal-mask': isPopOutReplyBox,
-        'bg-n-surface-1': !isPopOutReplyBox,
-      }"
-    >
+    <div class="flex relative flex-col bg-n-surface-1">
       <div
         v-if="isAnyoneTyping"
         class="absolute flex items-center w-full h-0 -top-7"
@@ -520,42 +526,12 @@ export default {
           />
         </div>
       </div>
-      <ReplyBox
-        :pop-out-reply-box="isPopOutReplyBox"
-        @update:pop-out-reply-box="isPopOutReplyBox = $event"
-      />
+      <ResizableEditorWrapper
+        ref="resizableEditorWrapperRef"
+        :container-height="Math.max(0, containerHeight - topBannerHeight)"
+      >
+        <ReplyBox @toggle-editor-size="toggleReplyEditorSize" />
+      </ResizableEditorWrapper>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.modal-mask {
-  @apply fixed;
-
-  &::v-deep {
-    .ProseMirror-woot-style {
-      @apply max-h-[25rem];
-    }
-
-    .reply-box {
-      @apply border border-n-weak max-w-[75rem] w-[70%];
-
-      &.is-private {
-        @apply dark:border-n-amber-3/30 border-n-amber-12/5;
-      }
-    }
-
-    .reply-box .reply-box__top {
-      @apply relative min-h-[27.5rem];
-    }
-
-    .reply-box__top .input {
-      @apply min-h-[27.5rem];
-    }
-
-    .emoji-dialog {
-      @apply absolute ltr:left-auto rtl:right-auto bottom-1;
-    }
-  }
-}
-</style>

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

@@ -27,7 +27,6 @@ import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
 import {
   getMessageVariables,
   getUndefinedVariablesInMessage,
-  replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import ContentTemplates from './ContentTemplates/ContentTemplatesModal.vue';
@@ -82,13 +81,7 @@ export default {
     CopilotReplyBottomPanel,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  props: {
-    popOutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:popOutReplyBox'],
+  emits: ['toggleEditorSize'],
   setup() {
     const {
       uiSettings,
@@ -636,10 +629,17 @@ export default {
         return message;
       }
 
+      // Even when editor is disabled (e.g. WhatsApp/API can't reply), we must
+      // still normalize stale signatures out of drafts when signature is off.
+      if (this.isEditorDisabled && this.sendWithSignature) {
+        return message;
+      }
+
       const effectiveChannelType = getEffectiveChannelType(
         this.channelType,
         this.inbox?.medium || ''
       );
+
       return this.sendWithSignature
         ? appendSignature(message, this.messageSignature, effectiveChannelType)
         : removeSignature(message, this.messageSignature, effectiveChannelType);
@@ -791,7 +791,6 @@ export default {
 
         this.clearMessage();
         this.hideEmojiPicker();
-        this.$emit('update:popOutReplyBox', false);
       }
     },
     sendMessageAsMultipleMessages(message, copilotAcceptedMessage = '') {
@@ -911,32 +910,6 @@ export default {
       });
       this.hideContentTemplatesModal();
     },
-    replaceText(message) {
-      if (this.sendWithSignature && !this.private) {
-        // if signature is enabled, append it to the message
-        // appendSignature ensures that the signature is not duplicated
-        // so we don't need to check if the signature is already present
-        const effectiveChannelType = getEffectiveChannelType(
-          this.channelType,
-          this.inbox?.medium || ''
-        );
-        message = appendSignature(
-          message,
-          this.messageSignature,
-          effectiveChannelType
-        );
-      }
-
-      const updatedMessage = replaceVariablesInMessage({
-        message,
-        variables: this.messageVariables,
-      });
-
-      setTimeout(() => {
-        useTrack(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
-        this.message = updatedMessage;
-      }, 100);
-    },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       // Clear attachments when switching between private note and reply modes
       // This is to prevent from breaking the upload rules
@@ -1237,8 +1210,9 @@ export default {
         file => !file?.isRecordedAudio
       );
     },
-    togglePopout() {
-      this.$emit('update:popOutReplyBox', !this.popOutReplyBox);
+    toggleEditorSize() {
+      this.$emit('toggleEditorSize');
+      this.$nextTick(() => this.messageEditor?.focusEditorInputField());
     },
     onSubmitCopilotReply() {
       const acceptedMessage = this.copilot.accept();
@@ -1264,9 +1238,8 @@ export default {
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :editor-content="message"
-      :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
-      @toggle-popout="togglePopout"
+      @toggle-editor-size="toggleEditorSize"
       @toggle-copilot="copilot.toggleEditor"
       @execute-copilot-action="executeCopilotAction"
     />
@@ -1295,7 +1268,7 @@ export default {
           v-if="showEmojiPicker"
           v-on-clickaway="hideEmojiPicker"
           :class="{
-            'emoji-dialog--expanded': isOnExpandedLayout || popOutReplyBox,
+            'emoji-dialog--expanded': isOnExpandedLayout,
           }"
           :on-click="addIntoEditor"
         />
@@ -1319,7 +1292,6 @@ export default {
           :show-copilot-editor="copilot.showEditor.value"
           :is-generating-content="copilot.isGenerating.value"
           :generated-content="copilot.generatedContent.value"
-          :is-popout="popOutReplyBox"
           :placeholder="$t('CONVERSATION.FOOTER.COPILOT_MSG_INPUT')"
           @focus="onFocus"
           @blur="onBlur"
@@ -1435,7 +1407,6 @@ export default {
         :new-conversation-modal-active="newConversationModalActive"
         @select-whatsapp-template="openWhatsappTemplateModal"
         @select-content-template="openContentTemplateModal"
-        @replace-text="replaceText"
         @toggle-insert-article="toggleInsertArticle"
         @toggle-quoted-reply="toggleQuotedReply"
       />

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

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+const props = defineProps({
+  containerHeight: { type: Number, default: 0 },
+});
+
+const DEFAULT_HEIGHT = 120;
+const MIN_HEIGHT = 80;
+const MIN_MESSAGES_HEIGHT = 200;
+const EXPAND_RATIO = 0.5;
+const RESET_DELAY_MS = 120;
+
+const wrapperRef = useTemplateRef('wrapperRef');
+const surroundingHeight = ref(0);
+const editorHeight = ref(DEFAULT_HEIGHT);
+const isResizing = ref(false);
+const startY = ref(0);
+const startHeight = ref(0);
+let resetTimeoutId = null;
+
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+
+// Measure height of elements surrounding the editor (top panel, email fields, bottom panel)
+const measureSurroundingHeight = () => {
+  if (wrapperRef.value) {
+    surroundingHeight.value = Math.max(
+      0,
+      wrapperRef.value.offsetHeight - editorHeight.value
+    );
+  }
+};
+
+const isContainerReady = computed(() => props.containerHeight > 0);
+
+const sizeBounds = computed(() => {
+  const h = props.containerHeight;
+  const s = surroundingHeight.value;
+  const max = Math.max(MIN_HEIGHT, h - MIN_MESSAGES_HEIGHT - s);
+  const expanded = clamp(Math.floor(h * EXPAND_RATIO - s / 2), MIN_HEIGHT, max);
+  return {
+    min: MIN_HEIGHT,
+    max: isContainerReady.value ? max : DEFAULT_HEIGHT,
+    expanded,
+    default: clamp(DEFAULT_HEIGHT, MIN_HEIGHT, max),
+  };
+});
+
+const clampToBounds = val =>
+  clamp(val, sizeBounds.value.min, sizeBounds.value.max);
+
+const clearDragStyles = () => {
+  Object.assign(document.body.style, { cursor: '', userSelect: '' });
+};
+
+const getClientY = e => (e.touches ? e.touches[0].clientY : e.clientY);
+
+const onResizeStart = event => {
+  editorHeight.value = clampToBounds(editorHeight.value);
+  measureSurroundingHeight();
+  isResizing.value = true;
+  startY.value = getClientY(event);
+  startHeight.value = clampToBounds(editorHeight.value);
+  editorHeight.value = startHeight.value;
+  Object.assign(document.body.style, {
+    cursor: 'row-resize',
+    userSelect: 'none',
+  });
+};
+
+const onResizeMove = event => {
+  if (!isResizing.value) return;
+  if (event.touches) event.preventDefault();
+  editorHeight.value = clampToBounds(
+    startHeight.value + startY.value - getClientY(event)
+  );
+};
+
+const onResizeEnd = () => {
+  if (!isResizing.value) return;
+  isResizing.value = false;
+  clearDragStyles();
+};
+
+const resetEditorHeight = () => {
+  editorHeight.value = sizeBounds.value.default;
+};
+
+const toggleEditorExpand = () => {
+  editorHeight.value = clampToBounds(editorHeight.value);
+  measureSurroundingHeight();
+  const { expanded, max, default: defaultHeight } = sizeBounds.value;
+  const isExpanded = editorHeight.value > defaultHeight;
+  // If expanded is too close to default, use max so the toggle is always noticeable
+  const target = expanded - defaultHeight < 100 ? max : expanded;
+  editorHeight.value = isExpanded ? defaultHeight : target;
+};
+
+const handleMessageSent = () => {
+  clearTimeout(resetTimeoutId);
+  resetTimeoutId = setTimeout(resetEditorHeight, RESET_DELAY_MS);
+};
+
+onMounted(() => {
+  emitter.on(BUS_EVENTS.MESSAGE_SENT, handleMessageSent);
+});
+
+onBeforeUnmount(() => {
+  emitter.off(BUS_EVENTS.MESSAGE_SENT, handleMessageSent);
+  clearTimeout(resetTimeoutId);
+  if (isResizing.value) {
+    isResizing.value = false;
+    clearDragStyles();
+  }
+});
+
+useEventListener(document, 'mousemove', onResizeMove);
+useEventListener(document, 'mouseup', onResizeEnd);
+useEventListener(document, 'touchmove', onResizeMove, { passive: false });
+useEventListener(document, 'touchend', onResizeEnd);
+useEventListener(document, 'touchcancel', onResizeEnd);
+useEventListener(window, 'blur', onResizeEnd);
+
+defineExpose({ toggleEditorExpand, resetEditorHeight });
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    class="relative resizable-editor-wrapper"
+    :style="{
+      '--editor-height': editorHeight + 'px',
+      '--editor-min-allowed': sizeBounds.min + 'px',
+      '--editor-max-allowed': sizeBounds.max + 'px',
+      '--editor-height-transition': isResizing ? 'none' : '180ms ease',
+    }"
+  >
+    <div
+      class="group absolute inset-x-0 -top-4 z-10 flex h-4 cursor-row-resize select-none items-center justify-center bg-gradient-to-b from-transparent from-10% dark:to-n-surface-1/80 to-n-surface-1/90 backdrop-blur-[0.01875rem]"
+      @mousedown="onResizeStart"
+      @touchstart.prevent="onResizeStart"
+      @dblclick="resetEditorHeight"
+    >
+      <div
+        class="w-8 h-0.5 mt-1 rounded-full bg-n-slate-6 group-hover:bg-n-slate-8 transition-all duration-200 motion-safe:group-hover:animate-bounce"
+        :class="{ 'bg-n-slate-8 animate-bounce': isResizing }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>

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

@@ -8,6 +8,7 @@ import {
   agents,
   teams,
   labels,
+  booleanFilterOptions,
   statusFilterOptions,
   messageTypeOptions,
   priorityOptions,
@@ -73,6 +74,8 @@ describe('useAutomation', () => {
           return countries;
         case 'message_type':
           return messageTypeOptions;
+        case 'private_note':
+          return booleanFilterOptions;
         case 'priority':
           return priorityOptions;
         default:
@@ -89,7 +92,9 @@ describe('useAutomation', () => {
         case 'assign_team':
           return teams;
         case 'assign_agent':
-          return agents;
+          return options.addNoneToListFn
+            ? options.addNoneToListFn(options.agents)
+            : options.agents;
         case 'send_email_to_team':
           return teams;
         case 'send_message':
@@ -226,6 +231,9 @@ describe('useAutomation', () => {
     expect(getConditionDropdownValues('message_type')).toEqual(
       messageTypeOptions
     );
+    expect(getConditionDropdownValues('private_note')).toEqual(
+      booleanFilterOptions
+    );
     expect(getConditionDropdownValues('priority')).toEqual(priorityOptions);
   });
 
@@ -234,7 +242,11 @@ describe('useAutomation', () => {
 
     expect(getActionDropdownValues('add_label')).toEqual(labels);
     expect(getActionDropdownValues('assign_team')).toEqual(teams);
-    expect(getActionDropdownValues('assign_agent')).toEqual(agents);
+    expect(getActionDropdownValues('assign_agent')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
+      { id: 'last_responding_agent', name: 'AUTOMATION.LAST_RESPONDING_AGENT' },
+      ...agents,
+    ]);
     expect(getActionDropdownValues('send_email_to_team')).toEqual(teams);
     expect(getActionDropdownValues('send_message')).toEqual([]);
     expect(getActionDropdownValues('add_sla')).toEqual(slaPolicies);

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

@@ -0,0 +1,239 @@
+import { ref } from 'vue';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+
+// Mock @vueuse/core — return reactive refs we can control per test
+const mockBounding = () => ({
+  top: ref(0),
+  bottom: ref(0),
+  left: ref(0),
+  right: ref(0),
+  width: ref(0),
+  height: ref(0),
+  update: vi.fn(),
+});
+
+const triggerBounds = mockBounding();
+const dropdownBounds = mockBounding();
+const winWidth = ref(1024);
+const winHeight = ref(768);
+
+vi.mock('@vueuse/core', () => {
+  let callCount = 0;
+  return {
+    // First call = trigger, second = dropdown, third = container (if any)
+    useElementBounding: () => {
+      callCount += 1;
+      return callCount % 3 === 1 ? triggerBounds : dropdownBounds;
+    },
+    useWindowSize: () => ({ width: winWidth, height: winHeight }),
+  };
+});
+
+const setTrigger = ({ top, bottom, left, right }) => {
+  triggerBounds.top.value = top;
+  triggerBounds.bottom.value = bottom;
+  triggerBounds.left.value = left ?? 100;
+  triggerBounds.right.value = right ?? 200;
+};
+
+const setDropdown = ({ width, height }) => {
+  dropdownBounds.width.value = width ?? 200;
+  dropdownBounds.height.value = height;
+};
+
+describe('useDropdownPosition', () => {
+  beforeEach(() => {
+    winWidth.value = 1024;
+    winHeight.value = 768;
+    document.body.innerHTML = '<div id="app" dir="ltr"></div>';
+  });
+
+  describe('verticalClass (relative mode)', () => {
+    it('places below when enough space', () => {
+      // Trigger at y=100, dropdown 200px tall
+      // Space below = 768 - 140 = 628 → fits (628 > 216)
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('places above when not enough space below but enough above', () => {
+      // Trigger near bottom at y=600
+      // Space below = 128 → doesn't fit. Space above = 600 → fits
+      setTrigger({ top: 600, bottom: 640 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('picks the side with more space when dropdown fits neither', () => {
+      // Dropdown 500px tall, won't fit above (300) or below (428)
+      // Below has more room → stays below
+      setTrigger({ top: 300, bottom: 340 });
+      setDropdown({ height: 500 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('picks above when above has more space and neither fits', () => {
+      // Dropdown 600px tall, won't fit above (500) or below (228)
+      // Above has more room → flips above
+      setTrigger({ top: 500, bottom: 540 });
+      setDropdown({ height: 600 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('returns default when disabled', () => {
+      setTrigger({ top: 700, bottom: 740 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(position.value.class).toBe('top-full mt-2');
+      expect(position.value.style).toEqual({});
+    });
+  });
+
+  describe('fixedPosition', () => {
+    it('places below with correct top and maxHeight', () => {
+      // Trigger at y=140, space below = 628
+      // top = 140 + 8(gap) = 148
+      // maxHeight = 628 - 8(gap) - 16(margin) = 604
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.top).toBe('148px');
+      expect(fixedPosition.value.style.bottom).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('604px');
+    });
+
+    it('flips above with correct bottom and maxHeight', () => {
+      // Trigger near bottom at y=650, space below = 78 → doesn't fit
+      // Flips above: bottom = 768 - 650 + 8 = 126
+      // maxHeight = 650 - 8 - 16 = 626
+      setTrigger({ top: 650, bottom: 690 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBe('126px');
+      expect(fixedPosition.value.style.top).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('626px');
+    });
+
+    it('constrains maxHeight to available space on short viewports', () => {
+      // Short viewport (400px), trigger in the middle, dropdown 500px tall
+      // Neither side fits → above (200) > below (160) → places above
+      // maxHeight capped to 200 - 8 - 16 = 176
+      winHeight.value = 400;
+      setTrigger({ top: 200, bottom: 240 });
+      setDropdown({ height: 500, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBeDefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('176px');
+    });
+
+    it('returns defaults when disabled', () => {
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(fixedPosition.value.class).toBe('fixed z-[9999]');
+      expect(fixedPosition.value.style).toEqual({});
+    });
+  });
+
+  describe('horizontal positioning (fixedPosition)', () => {
+    it('anchors to the right edge by default (align=end, LTR)', () => {
+      // align=end + LTR → anchorLeft=false → uses style.right
+      // right = 1024 - 900 = 124
+      setTrigger({ top: 100, bottom: 140, left: 800, right: 900 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.right).toBe('124px');
+    });
+
+    it('anchors to the left edge when align=start (LTR)', () => {
+      // align=start + LTR → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+
+    it('shifts left when dropdown overflows right edge', () => {
+      // Trigger at x=900, dropdown 300px wide → 900+300=1200 > 1024
+      // Falls back to right: 16px (margin)
+      setTrigger({ top: 100, bottom: 140, left: 900, right: 1000 });
+      setDropdown({ height: 100, width: 300 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.right).toBe('16px');
+    });
+  });
+
+  describe('RTL', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<div id="app" dir="rtl"></div>';
+    });
+
+    it('flips anchor direction in RTL (align=end anchors left)', () => {
+      // align=end + RTL → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+  });
+});

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

@@ -0,0 +1,98 @@
+import { useEditableAutomation } from '../useEditableAutomation';
+import useAutomationValues from '../useAutomationValues';
+
+vi.mock('../useAutomationValues');
+
+describe('useEditableAutomation', () => {
+  beforeEach(() => {
+    useAutomationValues.mockReturnValue({
+      getConditionDropdownValues: vi.fn(attributeKey => {
+        if (attributeKey === 'private_note') {
+          return [
+            { id: true, name: 'True' },
+            { id: false, name: 'False' },
+          ];
+        }
+
+        return [];
+      }),
+      getActionDropdownValues: vi.fn(actionName => {
+        if (actionName === 'assign_agent') {
+          return [
+            { id: 'nil', name: 'None' },
+            {
+              id: 'last_responding_agent',
+              name: 'Last Responding Agent',
+            },
+            { id: 1, name: 'Agent 1' },
+          ];
+        }
+
+        return [];
+      }),
+    });
+  });
+
+  it('rehydrates boolean conditions as a single selected option', () => {
+    const automation = {
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'private_note',
+          filter_operator: 'equal_to',
+          values: [false],
+          query_operator: null,
+        },
+      ],
+      actions: [],
+    };
+    const automationTypes = {
+      message_created: {
+        conditions: [{ key: 'private_note', inputType: 'search_select' }],
+      },
+    };
+
+    const { formatAutomation } = useEditableAutomation();
+    const result = formatAutomation(automation, [], automationTypes, []);
+
+    expect(result.conditions).toEqual([
+      {
+        attribute_key: 'private_note',
+        filter_operator: 'equal_to',
+        values: { id: false, name: 'False' },
+        query_operator: 'and',
+      },
+    ]);
+  });
+
+  it('rehydrates last responding agent as a selected action option', () => {
+    const automation = {
+      event_name: 'conversation_created',
+      conditions: [],
+      actions: [
+        {
+          action_name: 'assign_agent',
+          action_params: ['last_responding_agent'],
+        },
+      ],
+    };
+    const automationActionTypes = [
+      { key: 'assign_agent', inputType: 'search_select' },
+    ];
+
+    const { formatAutomation } = useEditableAutomation();
+    const result = formatAutomation(automation, [], {}, automationActionTypes);
+
+    expect(result.actions).toEqual([
+      {
+        action_name: 'assign_agent',
+        action_params: [
+          {
+            id: 'last_responding_agent',
+            name: 'Last Responding Agent',
+          },
+        ],
+      },
+    ]);
+  });
+});

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

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

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

@@ -119,24 +119,30 @@ describe('useMacros', () => {
     const { getMacroDropdownValues } = useMacros();
     expect(getMacroDropdownValues('add_label')).toHaveLength(mockLabels.length);
     expect(getMacroDropdownValues('assign_team')).toHaveLength(
-      mockTeams.length
-    );
+      mockTeams.length + 1
+    ); // +1 for "None"
     expect(getMacroDropdownValues('assign_agent')).toHaveLength(
-      mockAgents.length + 1
-    ); // +1 for "Self"
+      mockAgents.length + 2
+    ); // +2 for "None" and "Self"
   });
 
-  it('returns teams for assign_team and send_email_to_team types', () => {
+  it('returns teams with "None" option for assign_team and teams only for send_email_to_team', () => {
     const { getMacroDropdownValues } = useMacros();
-    expect(getMacroDropdownValues('assign_team')).toEqual(mockTeams);
+    const assignTeamResult = getMacroDropdownValues('assign_team');
+    expect(assignTeamResult[0]).toEqual({
+      id: 'nil',
+      name: 'AUTOMATION.NONE_OPTION',
+    });
+    expect(assignTeamResult.slice(1)).toEqual(mockTeams);
     expect(getMacroDropdownValues('send_email_to_team')).toEqual(mockTeams);
   });
 
-  it('returns agents with "Self" option for assign_agent type', () => {
+  it('returns agents with "None" and "Self" options for assign_agent type', () => {
     const { getMacroDropdownValues } = useMacros();
     const result = getMacroDropdownValues('assign_agent');
-    expect(result[0]).toEqual({ id: 'self', name: 'Self' });
-    expect(result.slice(1)).toEqual(mockAgents);
+    expect(result[0]).toEqual({ id: 'nil', name: 'AUTOMATION.NONE_OPTION' });
+    expect(result[1]).toEqual({ id: 'self', name: 'Self' });
+    expect(result.slice(2)).toEqual(mockAgents);
   });
 
   it('returns formatted labels for add_label and remove_label types', () => {
@@ -172,8 +178,11 @@ describe('useMacros', () => {
 
     const { getMacroDropdownValues } = useMacros();
     expect(getMacroDropdownValues('add_label')).toEqual([]);
-    expect(getMacroDropdownValues('assign_team')).toEqual([]);
+    expect(getMacroDropdownValues('assign_team')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
+    ]);
     expect(getMacroDropdownValues('assign_agent')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
       { id: 'self', name: 'Self' },
     ]);
   });

app/javascript/dashboard/composables/useAutomationValues.js

@@ -121,8 +121,19 @@ export default function useAutomationValues() {
    * @returns {Array} An array of action dropdown values.
    */
   const getActionDropdownValues = type => {
+    let agentsList = agents.value;
+    if (type === 'assign_agent') {
+      agentsList = [
+        {
+          id: 'last_responding_agent',
+          name: t('AUTOMATION.LAST_RESPONDING_AGENT'),
+        },
+        ...agentsList,
+      ];
+    }
+
     return getActionOptions({
-      agents: agents.value,
+      agents: agentsList,
       labels: labels.value,
       teams: teams.value,
       slaPolicies: slaPolicies.value,

app/javascript/dashboard/composables/useCallReconnection.js

@@ -0,0 +1,36 @@
+import { onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVoiceCallsStore } from 'dashboard/stores/voiceCalls';
+import VoiceCallsAPI from 'dashboard/api/voiceCalls';
+import { useAlert } from 'dashboard/composables';
+
+/**
+ * Detects a stale active call on page load and cleans it up. Direct
+ * browser ↔ Meta WebRTC has no rejoin path — Meta caches the prior DTLS
+ * fingerprint, so a fresh PC can never re-bind to the existing call leg.
+ * Best we can do is terminate the stranded Call so the agent isn't shown
+ * "in a call" forever.
+ */
+export function useCallReconnection() {
+  const callsStore = useVoiceCallsStore();
+  const { t } = useI18n();
+
+  onMounted(async () => {
+    if (callsStore.hasActiveCall || callsStore.hasIncomingCall) return;
+
+    try {
+      const { data } = await VoiceCallsAPI.active();
+      if (!data?.call && !data?.id) return;
+
+      const activeCallData = data.call || data;
+      try {
+        await VoiceCallsAPI.terminate(activeCallData.id);
+      } catch {
+        // best-effort — Rails-side cleanup
+      }
+      useAlert(t('WHATSAPP_CALL.RELOAD_ENDED_CALL'));
+    } catch {
+      callsStore.clearActiveCall();
+    }
+  });
+}

app/javascript/dashboard/composables/useCallSession.js

@@ -42,8 +42,8 @@ export function useCallSession() {
     );
   });
 
-  const endCall = async ({ conversationId, inboxId }) => {
-    await VoiceAPI.leaveConference(inboxId, conversationId);
+  const endCall = async ({ conversationId, inboxId, callSid }) => {
+    await VoiceAPI.leaveConference({ inboxId, conversationId, callSid });
     TwilioVoiceClient.endClientCall();
     durationTimer.stop();
     callsStore.clearActiveCall();
@@ -66,6 +66,7 @@ export function useCallSession() {
       await TwilioVoiceClient.joinClientCall({
         to: joinResponse?.conference_sid,
         conversationId,
+        callSid,
       });
 
       callsStore.setCallActive(callSid);