Merge branch 'develop' into inline-edit

Gemfile

@@ -84,7 +84,6 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
-gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization

Gemfile.lock

@@ -727,9 +727,6 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    rails-i18n (7.0.10)
-      i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 8)
     railties (7.1.5.2)
       actionpack (= 7.1.5.2)
       activesupport (= 7.1.5.2)
@@ -1128,7 +1125,6 @@ DEPENDENCIES
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
   rails (~> 7.1)
-  rails-i18n (~> 7.0)
   redis
   redis-namespace
   responders (>= 3.1.1)

VERSION_CW

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

app/builders/account_builder.rb

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

app/builders/agent_builder.rb

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

app/builders/email/base_builder.rb

@@ -41,7 +41,7 @@ class Email::BaseBuilder
   end
 
   def business_name
-    inbox.sanitized_business_name
+    inbox.business_name || inbox.sanitized_name
   end
 
   def account_support_email

app/builders/v2/report_builder.rb

@@ -1,7 +1,6 @@
 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,6 +11,10 @@ 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,13 +9,37 @@ class V2::Reports::BaseSummaryBuilder
   private
 
   def load_data
-    results = data_source.summary
+    @conversations_count = fetch_conversations_count
+    load_reporting_events_data
+  end
 
-    @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] }
+  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
   end
 
   def group_by_key
@@ -26,26 +50,7 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
-  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)
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
   end
 end

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

@@ -3,10 +3,23 @@ class V2::Reports::Conversations::BaseReportBuilder
 
   private
 
-  def builder_class(metric)
-    return unless Reports::ReportMetricRegistry.supported?(metric)
+  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
 
-    V2::Reports::Timeseries::ReportBuilder
+  def builder_class(metric)
+    case metric
+    when *AVG_METRICS
+      V2::Reports::Timeseries::AverageReportBuilder
+    when *COUNT_METRICS
+      V2::Reports::Timeseries::CountReportBuilder
+    end
   end
 
   def log_invalid_metric

app/builders/v2/reports/inbox_summary_builder.rb

@@ -11,6 +11,15 @@ 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)
@@ -31,4 +40,8 @@ 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,6 +6,14 @@ 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

@@ -0,0 +1,48 @@
+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,13 +1,12 @@
 class V2::Reports::Timeseries::BaseTimeseriesBuilder
   include TimezoneHelper
   include DateRangeHelper
-
   DEFAULT_GROUP_BY = 'day'.freeze
 
   pattr_initialize :account, :params
 
   def scope
-    case dimension_type.to_sym
+    case params[:type].to_sym
     when :account
       account
     when :inbox
@@ -21,20 +20,6 @@ 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
@@ -58,10 +43,4 @@ 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

@@ -0,0 +1,78 @@
+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

@@ -1,9 +0,0 @@
-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

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

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

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

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

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

app/controllers/api/v1/accounts_controller.rb

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

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

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

app/controllers/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, type: :agent)
+    render_report_with(V2::Reports::AgentSummaryBuilder)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
+    render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
+    render_report_with(V2::Reports::InboxSummaryBuilder)
   end
 
   def label
@@ -38,9 +38,8 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     }
   end
 
-  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)
+  def render_report_with(builder_class)
+    builder = builder_class.new(account: Current.account, params: @builder_params)
     render json: builder.build
   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').includes(:permissible)
+    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').all
   end
 
   def show; end

app/controllers/super_admin/push_diagnostics_controller.rb

@@ -1,68 +0,0 @@
-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/helpers/email_helper.rb

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

app/javascript/dashboard/App.vue

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

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

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

app/javascript/dashboard/api/mfa.js

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

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

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

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

@@ -107,10 +107,11 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger>
+                <template #trigger="{ toggle }">
                   <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>
-              <Button :label="buttonLabel" size="sm" />
+            <template #trigger="{ toggle }">
+              <Button :label="buttonLabel" size="sm" @click="toggle" />
             </template>
           </ComposeConversation>
         </div>

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

@@ -103,7 +103,6 @@ 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

@@ -3,7 +3,7 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
@@ -34,7 +34,9 @@ const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
 const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(isVoiceCallEnabled)
+  (inboxesList.value || []).filter(
+    inbox => inbox.channel_type === INBOX_TYPES.VOICE
+  )
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 

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

@@ -1,58 +0,0 @@
-<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

@@ -1,47 +0,0 @@
-<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

@@ -1,175 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

@@ -1,186 +0,0 @@
-<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

@@ -1,156 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-<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

@@ -1,69 +0,0 @@
-<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

@@ -1,19 +0,0 @@
-<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 !z-20"
+    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"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -27,6 +27,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
+  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
@@ -38,37 +39,42 @@ const { t } = useI18n();
 
 const isNewArticle = computed(() => !props.article?.id);
 
-const localTitle = ref(props.article?.title ?? '');
-const localContent = ref(props.article?.content ?? '');
+const saveAndSync = value => {
+  emit('saveArticle', value);
+};
 
-// 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 ?? '';
-    }
-  }
+// 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
 );
 
-const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
+// 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);
 
 const handleSave = value => {
   if (isNewArticle.value) return;
-  debouncedSave(value);
+  quickSave(value);
+  saveAndSyncDebounced(value);
 };
 
 const articleTitle = computed({
-  get: () => localTitle.value,
+  get: () => props.article.title,
   set: value => {
-    localTitle.value = value;
     handleSave({ title: value });
   },
 });
 
+const localContent = ref(props.article.content || '');
+
 const articleContent = computed({
-  get: () => localContent.value,
+  get: () => props.article.content,
   set: content => {
     localContent.value = content;
     handleSave({ content });
@@ -121,12 +127,12 @@ const handleCreateArticle = event => {
           custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
-          :autofocus="isNewArticle"
+          autofocus
           @blur="handleCreateArticle"
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="values => emit('saveArticle', values)"
+          @save-article="saveAndSync"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
@@ -138,7 +144,7 @@ const handleCreateArticle = event => {
           t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
         "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="!isNewArticle"
+        :autofocus="false"
       />
     </template>
   </HelpCenterLayout>
@@ -161,12 +167,8 @@ const handleCreateArticle = event => {
   }
 
   .editor-root .has-selection {
-    .ProseMirror-menubar:not(:has(*)) {
-      display: none !important;
-    }
-
     .ProseMirror-menubar {
-      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      @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;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -174,10 +176,15 @@ const handleCreateArticle = event => {
       position: absolute !important;
 
       .ProseMirror-menuitem {
-        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
+        @apply mr-0;
 
         .ProseMirror-icon {
-          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
+          @apply p-0 mt-0 !mr-0;
+
+          svg {
+            width: 20px !important;
+            height: 20px !important;
+          }
         }
       }
 

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

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

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

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

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

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

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

@@ -2,10 +2,13 @@
 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 {
@@ -15,18 +18,22 @@ 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,
   },
-  align: {
-    type: String,
-    default: 'end',
+  isModal: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -35,16 +42,23 @@ const emit = defineEmits(['close']);
 const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
+const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const popoverRef = ref(null);
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const viewInModal = computed(() => props.isModal || isSmallScreen.value);
+
 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: '',
@@ -81,6 +95,14 @@ 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;
@@ -150,7 +172,7 @@ const clearSelectedContact = () => {
 };
 
 const closeCompose = () => {
-  popoverRef.value?.hide();
+  showComposeNewConversation.value = false;
   if (!props.contactId) {
     // If contactId is passed as prop
     // Then don't allow to remove the selected contact
@@ -158,6 +180,7 @@ const closeCompose = () => {
   }
   targetInbox.value = null;
   resetContacts();
+  emit('close');
 };
 
 const discardCompose = () => {
@@ -190,15 +213,8 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
   }
 };
 
-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');
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
 };
 
 watch(
@@ -226,23 +242,64 @@ 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>
-  <Popover
-    ref="popoverRef"
-    :align="align"
-    :show-content-border="false"
-    @show="onPopoverShow"
-    @hide="onPopoverHide"
+  <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,
+    }"
   >
-    <template #default="{ isOpen }">
-      <slot name="trigger" :is-open="isOpen" />
-    </template>
-    <template #content>
+    <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"
+    >
       <ComposeNewConversationForm
         :form-state="formState"
+        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"
@@ -264,6 +321,6 @@ onMounted(() => resetContacts());
         @create-conversation="createConversation"
         @discard="discardCompose"
       />
-    </template>
-  </Popover>
+    </div>
+  </div>
 </template>

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

@@ -8,6 +8,8 @@ import { useEventListener } from '@vueuse/core';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
 import ContentTemplateSelector from './ContentTemplateSelector.vue';
@@ -18,7 +20,6 @@ const props = defineProps({
   isEmailOrWebWidgetInbox: { type: Boolean, default: false },
   isTwilioSmsInbox: { type: Boolean, default: false },
   isTwilioWhatsAppInbox: { type: Boolean, default: false },
-  // eslint-disable-next-line vue/no-unused-properties
   messageTemplates: { type: Array, default: () => [] },
   channelType: { type: String, default: '' },
   isLoading: { type: Boolean, default: false },
@@ -28,7 +29,6 @@ const props = defineProps({
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   inboxId: { type: Number, default: null },
-  voiceEnabled: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -81,9 +81,11 @@ const isRegularMessageMode = computed(() => {
   return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
 });
 
+const isVoiceInbox = computed(() => props.channelType === INBOX_TYPES.VOICE);
+
 const shouldShowSignatureButton = computed(() => {
   return (
-    props.hasSelectedInbox && isRegularMessageMode.value && !props.voiceEnabled
+    props.hasSelectedInbox && isRegularMessageMode.value && !isVoiceInbox.value
   );
 });
 
@@ -108,7 +110,7 @@ watch(
   () => props.hasSelectedInbox,
   newValue => {
     nextTick(() => {
-      if (newValue && !props.voiceEnabled) setSignature();
+      if (newValue && !isVoiceInbox.value) setSignature();
     });
   },
   { immediate: true }
@@ -196,6 +198,7 @@ useEventListener(document, 'paste', onPaste);
       <WhatsAppOptions
         v-if="isWhatsappInbox"
         :inbox-id="inboxId"
+        :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
       <ContentTemplateSelector
@@ -217,7 +220,7 @@ useEventListener(document, 'paste', onPaste);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="!top-auto !bottom-full mb-1.5 ltr:left-0 rtl:right-0"
+          class="top-full mt-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, isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
@@ -100,8 +100,6 @@ const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 
 const inboxMedium = computed(() => props.targetInbox?.medium || '');
 
-const voiceCallEnabled = computed(() => isVoiceCallEnabled(props.targetInbox));
-
 const effectiveChannelType = computed(() =>
   getEffectiveChannelType(inboxChannelType.value, inboxMedium.value)
 );
@@ -363,7 +361,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    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)]"
+    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)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector
@@ -444,7 +442,6 @@ useKeyboardEvents({
       :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
       :message-templates="whatsappMessageTemplates"
       :channel-type="inboxChannelType"
-      :voice-enabled="voiceCallEnabled"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -30,40 +30,23 @@ const modelValue = defineModel({
 });
 
 const selectedCount = computed(() => modelValue.value.size);
-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 totalCount = computed(() => props.allItems.length);
+
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () =>
-    selectedVisibleCount.value > 0 &&
-    selectedVisibleCount.value < visibleItemCount.value
+  () => hasSelected.value && selectedCount.value < totalCount.value
 );
 const allSelected = computed(
-  () =>
-    visibleItemCount.value > 0 &&
-    selectedVisibleCount.value === visibleItemCount.value
+  () => totalCount.value > 0 && selectedCount.value === totalCount.value
 );
 
-const slots = useSlots();
-const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
-
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
-    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;
+    const newSelectedIds = shouldSelectAll
+      ? new Set(props.allItems.map(item => item.id))
+      : new Set();
+    modelValue.value = newSelectedIds;
   },
 });
 </script>
@@ -80,7 +63,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 min-w-0">
+      <div class="flex items-center gap-3">
         <div class="flex items-center gap-1.5 min-w-0">
           <Checkbox
             v-model="bulkCheckboxState"
@@ -95,23 +78,21 @@ 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 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>
+        <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 v-else class="flex items-center gap-3">

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

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

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

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

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

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

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

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

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

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

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

@@ -226,10 +226,4 @@ 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/popover/Popover.vue

@@ -1,139 +0,0 @@
-<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,6 +10,8 @@ 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';
@@ -182,6 +184,15 @@ 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',
@@ -239,12 +250,6 @@ 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'],
@@ -723,13 +728,7 @@ const menuItems = computed(() => {
   <aside
     v-on-click-outside="[
       closeMobileSidebar,
-      {
-        ignore: [
-          '#mobile-sidebar-launcher',
-          '[data-popover-content]',
-          '[data-popover-backdrop]',
-        ],
-      },
+      { ignore: ['#mobile-sidebar-launcher'] },
     ]"
     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="[
@@ -797,8 +796,8 @@ const menuItems = computed(() => {
         >
           <span class="i-lucide-search size-4 text-n-slate-11" />
         </RouterLink>
-        <ComposeConversation align="start">
-          <template #trigger="{ isOpen }">
+        <ComposeConversation align-position="right" @close="onComposeClose">
+          <template #trigger="{ toggle, isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
@@ -810,6 +809,7 @@ 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,11 +158,9 @@ const activeChild = computed(() => {
     return rankedPage ?? activeOnPages[0];
   }
 
-  return navigableChildren.value.find(child => {
-    if (!child.to) return false;
-    const childPath = resolvePath(child.to);
-    return route.path === childPath || route.path.startsWith(`${childPath}/`);
-  });
+  return navigableChildren.value.find(
+    child => child.to && route.path.startsWith(resolvePath(child.to))
+  );
 });
 
 const hasActiveChild = computed(() => {

app/javascript/dashboard/components/ChatList.vue

@@ -1,5 +1,15 @@
 <script setup>
-import { ref, unref, provide, computed, watch, onMounted } from 'vue';
+// [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 { useStore } from 'vuex';
 import { useRoute, useRouter } from 'vue-router';
 import {
@@ -7,19 +17,23 @@ 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';
@@ -42,7 +56,6 @@ import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHe
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
   isOnMentionsView,
-  isOnParticipatingView,
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import {
@@ -71,6 +84,10 @@ 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);
@@ -82,6 +99,7 @@ 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 => ({
@@ -95,7 +113,6 @@ 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');
@@ -111,6 +128,7 @@ const currentAccountId = useMapGetter('getCurrentAccountId');
 const getTeamFn = useMapGetter('teams/getTeam');
 const getConversationById = useMapGetter('getConversationById');
 
+useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -278,15 +296,13 @@ const pageTitle = computed(() => {
   if (props.label) {
     return `#${props.label}`;
   }
-  if (props.conversationType === wootConstants.CONVERSATION_TYPE.MENTION) {
+  if (props.conversationType === 'mention') {
     return t('CHAT_LIST.MENTION_HEADING');
   }
-  if (
-    props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
-  ) {
+  if (props.conversationType === 'participating') {
     return t('CONVERSATION_PARTICIPANTS.SIDEBAR_MENU_TITLE');
   }
-  if (props.conversationType === wootConstants.CONVERSATION_TYPE.UNATTENDED) {
+  if (props.conversationType === 'unattended') {
     return t('CHAT_LIST.UNATTENDED_HEADING');
   }
   if (hasActiveFolders.value) {
@@ -295,30 +311,12 @@ 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 (
-      props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
-    ) {
-      localConversationList = filterByAssigneeTab(
-        participatingChatsList.value(filters)
-      );
-    } else if (activeAssigneeTab.value === 'me') {
+    if (activeAssigneeTab.value === 'me') {
       localConversationList = [...mineChatsList.value(filters)];
     } else if (activeAssigneeTab.value === 'unassigned') {
       localConversationList = [...unAssignedChatsList.value(filters)];
@@ -340,7 +338,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return !!(
+  return (
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -585,6 +583,14 @@ 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();
@@ -631,11 +637,9 @@ function redirectToConversationList() {
 
   let conversationType = '';
   if (isOnMentionsView({ route: { name } })) {
-    conversationType = wootConstants.CONVERSATION_TYPE.MENTION;
-  } else if (isOnParticipatingView({ route: { name } })) {
-    conversationType = wootConstants.CONVERSATION_TYPE.PARTICIPATING;
+    conversationType = 'mention';
   } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = wootConstants.CONVERSATION_TYPE.UNATTENDED;
+    conversationType = 'unattended';
   }
   router.push(
     conversationListPageURL({
@@ -778,6 +782,10 @@ function allSelectedConversationsStatus(status) {
   });
 }
 
+function onContextMenuToggle(state) {
+  isContextMenuOpen.value = state;
+}
+
 function toggleSelectAll(check) {
   selectAllConversations(check, conversationList);
 }
@@ -825,6 +833,7 @@ provide('assignTeam', onAssignTeam);
 provide('assignLabels', onAssignLabels);
 provide('removeLabels', onRemoveLabels);
 provide('updateConversationStatus', handleResolveConversation);
+provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
 provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
@@ -937,18 +946,43 @@ watch(conversationFilters, (newVal, oldVal) => {
       @assign-labels="onAssignLabels"
       @assign-team="onAssignTeamsForBulk"
     />
-    <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"
-    />
+    <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>
     <Dialog
       ref="deleteConversationDialogRef"
       type="alert"

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,244 +1,74 @@
-<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';
+<script>
 import ConversationCard from './widgets/conversation/ConversationCard.vue';
-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();
+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,
+    },
+  },
 };
 </script>
 
 <template>
-  <!-- Expanded layout: wide screen + expanded setting -->
-  <ConversationCardExpanded
-    v-if="showExpanded"
-    :chat="source"
-    :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
+    :active-label="label"
+    :team-id="teamId"
+    :folders-id="foldersId"
     :chat="source"
-    :current-contact="currentContact"
-    :assignee="assignee"
-    :inbox="inbox"
+    :conversation-type="conversationType"
     :selected="isConversationSelected(source.id)"
-    :is-active-chat="isActiveChat"
     :show-assignee="showAssignee"
-    :show-inbox-name="showInboxName"
-    @click="onCardClick"
-    @contextmenu="openContextMenu"
+    enable-context-menu
     @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

@@ -1,94 +0,0 @@
-<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/WootWriter/CopilotEditor.vue

@@ -27,6 +27,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  isPopout: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -204,7 +208,10 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 mb-4">
-    <div class="overflow-y-auto max-h-56">
+    <div
+      class="overflow-y-auto"
+      :class="{ 'max-h-96': isPopout, 'max-h-56': !isPopout }"
+    >
       <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

@@ -51,7 +51,6 @@ import {
 
 import {
   appendSignature,
-  collapseSelection,
   findNodeToInsertImage,
   getContentNode,
   insertAtCursor,
@@ -67,7 +66,6 @@ import {
 import {
   hasPressedEnterAndNotCmdOrShift,
   hasPressedCommandAndEnter,
-  isEscape,
 } from 'shared/helpers/KeyboardHelpers';
 import { createTypingIndicator } from '@chatwoot/utils';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
@@ -517,9 +515,7 @@ function setMenubarPosition({ selection } = {}) {
 
 function checkSelection(editorState) {
   showSelectionMenu.value = false;
-  const { selection } = editorState;
-  // Skip NodeSelection (from Esc -> selectParentNode); only text ranges count.
-  const hasSelection = !selection.empty && !selection.node;
+  const hasSelection = editorState.selection.from !== editorState.selection.to;
   if (hasSelection === isTextSelected.value) return;
 
   isTextSelected.value = hasSelection;
@@ -715,17 +711,12 @@ function handleLineBreakWhenCmdAndEnterToSendEnabled(event) {
 }
 
 function onKeydown(event) {
-  if (isEscape(event)) {
-    collapseSelection(editorView);
-    return true;
-  }
   if (isEnterToSendEnabled()) {
     handleLineBreakWhenEnterToSendEnabled(event);
   }
   if (isCmdPlusEnterToSendEnabled()) {
     handleLineBreakWhenCmdAndEnterToSendEnabled(event);
   }
-  return false;
 }
 
 function createEditorView() {
@@ -753,9 +744,6 @@ function createEditorView() {
       blur: () => {
         if (props.disabled) return;
         typingIndicator.stop();
-        // PM keeps its selection on blur — clear the menu flags manually.
-        isTextSelected.value = false;
-        editorRoot.value?.classList.remove('has-selection');
         emit('blur');
       },
       paste: (view, event) => {
@@ -996,32 +984,7 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-woot-style {
-  @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);
-  }
+  @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
 }
 
 .ProseMirror-prompt-backdrop::backdrop {

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

@@ -8,24 +8,13 @@ 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 { isEscape } from 'shared/helpers/KeyboardHelpers';
-import { collapseSelection } from 'dashboard/helper/editorHelper';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
-import SlashCommandMenu from './SlashCommandMenu.vue';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
-const SLASH_MENU_OFFSET = 4;
 const createState = (
   content,
   placeholder,
@@ -51,7 +40,6 @@ let editorView = null;
 let state;
 
 export default {
-  components: { SlashCommandMenu },
   mixins: [keyboardEventListenerMixins],
   props: {
     modelValue: { type: String, default: '' },
@@ -74,15 +62,8 @@ export default {
   },
   data() {
     return {
-      plugins: [
-        imagePastePlugin(this.handleImageUpload),
-        this.createSlashPlugin(),
-      ],
+      plugins: [imagePastePlugin(this.handleImageUpload)],
       isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
-      showSlashMenu: false,
-      slashSearchTerm: '',
-      slashRange: null,
-      slashMenuPosition: null,
     };
   },
   watch: {
@@ -114,126 +95,6 @@ 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);
@@ -364,33 +225,19 @@ export default {
     onKeyup() {
       this.$emit('keyup');
     },
-    onKeydown(view, event) {
+    onKeydown() {
       this.$emit('keydown');
-      if (isEscape(event)) {
-        if (this.showSlashMenu) {
-          this.showSlashMenu = false;
-          this.slashSearchTerm = '';
-          this.slashMenuPosition = null;
-          return true;
-        }
-        collapseSelection(editorView);
-        return true;
-      }
-      return false;
     },
     onBlur() {
-      // ProseMirror keeps its selection on blur — clear the menu flag manually.
-      this.isTextSelected = false;
-      this.$refs.editor?.classList.remove('has-selection');
       this.$emit('blur');
     },
     onFocus() {
       this.$emit('focus');
     },
     checkSelection(editorState) {
-      const { selection } = editorState;
-      // Skip NodeSelection (from Esc -> selectParentNode); only text ranges count.
-      const hasSelection = !selection.empty && !selection.node;
+      const { from, to } = editorState.selection;
+      // Check if there's a selection (from and to are different)
+      const hasSelection = from !== to;
       // If the selection state is the same as the previous state, do nothing
       if (hasSelection === this.isTextSelected) return;
       // Update the selection state
@@ -415,8 +262,7 @@ export default {
 
       // Get the editor's width
       const editorWidth = editor.offsetWidth;
-      const menubar = editor.querySelector('.ProseMirror-menubar');
-      const menubarWidth = menubar ? menubar.scrollWidth : 480;
+      const menubarWidth = 480; // Menubar width (adjust as needed (px))
 
       // Get the end position of the selection
       const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
@@ -444,15 +290,7 @@ export default {
 
 <template>
   <div>
-    <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"
-      />
+    <div class="editor-root editor--article">
       <input
         ref="imageUploadInput"
         type="file"

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

@@ -54,7 +54,7 @@ export default {
       default: undefined,
     },
   },
-  emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
+  emits: ['setReplyMode', 'togglePopout', '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('toggleEditorSize')"
+        @click="$emit('togglePopout')"
       />
     </div>
   </div>

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

@@ -1,180 +0,0 @@
-<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,41 +1,98 @@
 <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({
-  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 },
+  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: '' },
+  selected: { type: Boolean, default: false },
   compact: { type: Boolean, default: false },
+  enableContextMenu: { type: Boolean, default: false },
+  allowedContextMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits([
-  'click',
-  'contextmenu',
+  'contextMenuToggle',
+  'assignAgent',
+  'assignLabel',
+  'removeLabel',
+  'assignTeam',
+  'markAsUnread',
+  'markAsRead',
+  'assignPriority',
+  'updateConversationStatus',
+  'deleteConversation',
   '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(() => ({
@@ -43,10 +100,24 @@ const voiceCallData = computed(() => ({
   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 showMetaSection = computed(() => {
   return (
-    props.showInboxName ||
-    (props.showAssignee && props.assignee.name) ||
+    showInboxName.value ||
+    (props.showAssignee && assignee.value.name) ||
     props.chat.priority
   );
 });
@@ -65,6 +136,41 @@ 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;
 };
@@ -75,37 +181,83 @@ const onThumbnailLeave = () => {
 
 const onSelectConversation = checked => {
   if (checked) {
-    emit('selectConversation', props.chat.id, props.inbox.id);
+    emit('selectConversation', props.chat.id, inbox.value.id);
   } else {
-    emit('deSelectConversation', props.chat.id, props.inbox.id);
+    emit('deSelectConversation', props.chat.id, inbox.value.id);
   }
 };
 
-const selectedModel = computed({
-  get: () => props.selected,
-  set: value => onSelectConversation(value),
-});
+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;
+};
 
-watch(
-  () => props.chat.id,
-  () => {
-    hovered.value = false;
-  }
-);
+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();
+};
 </script>
 
 <template>
   <div
-    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="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="{
-      'active animate-card-select bg-n-background !border-n-surface-1':
-        isActiveChat,
-      'selected bg-n-slate-2 !border-n-surface-1': selected,
+      'active animate-card-select bg-n-background border-n-weak': isActiveChat,
+      'bg-n-slate-2': selected,
       'px-0': compact,
       'px-3': !compact,
     }"
-    @click="$emit('click', $event)"
-    @contextmenu="$emit('contextmenu', $event)"
+    @click="onCardClick"
+    @contextmenu="openContextMenu($event)"
   >
     <div
       class="relative"
@@ -120,6 +272,7 @@ watch(
         :status="currentContact.availability_status"
         :class="!showInboxName ? 'mt-4' : 'mt-8'"
         hide-offline-status
+        rounded-full
       >
         <template #overlay="{ size }">
           <label
@@ -128,12 +281,20 @@ watch(
             :style="{ width: `${size}px`, height: `${size}px` }"
             @click.stop
           >
-            <Checkbox v-model="selectedModel" />
+            <input
+              :value="selected"
+              :checked="selected"
+              class="!m-0 cursor-pointer"
+              type="checkbox"
+              @change="onSelectConversation($event.target.checked)"
+            />
           </label>
         </template>
       </Avatar>
     </div>
-    <div class="px-0 py-3 flex-1 min-w-0 border-line">
+    <div
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"
+    >
       <div
         v-if="showMetaSection"
         class="flex items-center min-w-0 gap-1"
@@ -208,11 +369,12 @@ watch(
             :conversation-id="chat.id"
           />
         </span>
-        <UnreadBadge
-          v-if="hasUnread"
-          :count="unreadCount"
-          class="ltr:ml-auto rtl:mr-auto mt-1"
-        />
+        <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>
       </div>
       <CardLabels
         v-if="showLabelsSection"
@@ -224,5 +386,32 @@ watch(
         </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

@@ -45,7 +45,6 @@ const backButtonUrl = computed(() => {
 
   const conversationTypeMap = {
     conversation_through_mentions: 'mention',
-    conversation_through_participating: 'participating',
     conversation_through_unattended: 'unattended',
   };
   return conversationListPageURL({

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

@@ -41,16 +41,7 @@ const closeContactPanel = () => {
 
 <template>
   <div
-    v-on-click-outside="[
-      () => closeContactPanel(),
-      {
-        ignore: [
-          'dialog.ProseMirror-prompt-backdrop',
-          '[data-popover-content]',
-          '[data-popover-backdrop]',
-        ],
-      },
-    ]"
+    v-on-click-outside="() => closeContactPanel()"
     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,6 +16,10 @@ defineProps({
     type: String,
     default: '',
   },
+  isPopout: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -65,6 +69,7 @@ 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, useTemplateRef } from 'vue';
-import { useElementSize } from '@vueuse/core';
+import { ref, provide } from 'vue';
 // composable
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useLabelSuggestions } from 'dashboard/composables/useLabelSuggestions';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
@@ -11,7 +11,6 @@ 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';
@@ -44,16 +43,21 @@ export default {
     Banner,
     ConversationLabelSuggestion,
     Spinner,
-    ResizableEditorWrapper,
   },
   mixins: [inboxMixin],
   setup() {
+    const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
-    const resizableEditorWrapperRef = ref(null);
-    const messagesViewRef = useTemplateRef('messagesViewRef');
-    const topBannerRef = useTemplateRef('topBannerRef');
-    const { height: containerHeight } = useElementSize(messagesViewRef);
-    const { height: topBannerHeight } = useElementSize(topBannerRef);
+
+    const keyboardEvents = {
+      Escape: {
+        action: () => {
+          isPopOutReplyBox.value = false;
+        },
+      },
+    };
+
+    useKeyboardEvents(keyboardEvents);
 
     const {
       captainTasksEnabled,
@@ -64,15 +68,11 @@ export default {
     provide('contextMenuElementTarget', conversationPanelRef);
 
     return {
+      isPopOutReplyBox,
       captainTasksEnabled,
       getLabelSuggestions,
       isLabelSuggestionFeatureEnabled,
       conversationPanelRef,
-      resizableEditorWrapperRef,
-      messagesViewRef,
-      topBannerRef,
-      containerHeight,
-      topBannerHeight,
     };
   },
   data() {
@@ -254,7 +254,6 @@ export default {
       this.fetchAllAttachmentsFromCurrentChat();
       this.fetchSuggestions();
       this.messageSentSinceOpened = false;
-      this.resetReplyEditorHeight();
     },
   },
 
@@ -438,37 +437,26 @@ export default {
       const payload = useSnakeCase(message);
       await this.$store.dispatch('sendMessageWithData', payload);
     },
-    toggleReplyEditorSize() {
-      this.resizableEditorWrapperRef?.toggleEditorExpand?.();
-    },
-    resetReplyEditorHeight() {
-      this.resizableEditorWrapperRef?.resetEditorHeight?.();
-    },
   },
 };
 </script>
 
 <template>
-  <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>
+  <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')"
+    />
     <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"
@@ -510,7 +498,13 @@ export default {
         />
       </template>
     </MessageList>
-    <div class="flex relative flex-col bg-n-surface-1">
+    <div
+      class="flex relative flex-col"
+      :class="{
+        'modal-mask': isPopOutReplyBox,
+        'bg-n-surface-1': !isPopOutReplyBox,
+      }"
+    >
       <div
         v-if="isAnyoneTyping"
         class="absolute flex items-center w-full h-0 -top-7"
@@ -526,12 +520,42 @@ export default {
           />
         </div>
       </div>
-      <ResizableEditorWrapper
-        ref="resizableEditorWrapperRef"
-        :container-height="Math.max(0, containerHeight - topBannerHeight)"
-      >
-        <ReplyBox @toggle-editor-size="toggleReplyEditorSize" />
-      </ResizableEditorWrapper>
+      <ReplyBox
+        :pop-out-reply-box="isPopOutReplyBox"
+        @update:pop-out-reply-box="isPopOutReplyBox = $event"
+      />
     </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

@@ -81,7 +81,13 @@ export default {
     CopilotReplyBottomPanel,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  emits: ['toggleEditorSize'],
+  props: {
+    popOutReplyBox: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['update:popOutReplyBox'],
   setup() {
     const {
       uiSettings,
@@ -791,6 +797,7 @@ export default {
 
         this.clearMessage();
         this.hideEmojiPicker();
+        this.$emit('update:popOutReplyBox', false);
       }
     },
     sendMessageAsMultipleMessages(message, copilotAcceptedMessage = '') {
@@ -1210,9 +1217,8 @@ export default {
         file => !file?.isRecordedAudio
       );
     },
-    toggleEditorSize() {
-      this.$emit('toggleEditorSize');
-      this.$nextTick(() => this.messageEditor?.focusEditorInputField());
+    togglePopout() {
+      this.$emit('update:popOutReplyBox', !this.popOutReplyBox);
     },
     onSubmitCopilotReply() {
       const acceptedMessage = this.copilot.accept();
@@ -1238,8 +1244,9 @@ export default {
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :editor-content="message"
+      :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
-      @toggle-editor-size="toggleEditorSize"
+      @toggle-popout="togglePopout"
       @toggle-copilot="copilot.toggleEditor"
       @execute-copilot-action="executeCopilotAction"
     />
@@ -1268,7 +1275,7 @@ export default {
           v-if="showEmojiPicker"
           v-on-clickaway="hideEmojiPicker"
           :class="{
-            'emoji-dialog--expanded': isOnExpandedLayout,
+            'emoji-dialog--expanded': isOnExpandedLayout || popOutReplyBox,
           }"
           :on-click="addIntoEditor"
         />
@@ -1292,6 +1299,7 @@ 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"

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

@@ -1,154 +0,0 @@
-<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

@@ -92,9 +92,7 @@ describe('useAutomation', () => {
         case 'assign_team':
           return teams;
         case 'assign_agent':
-          return options.addNoneToListFn
-            ? options.addNoneToListFn(options.agents)
-            : options.agents;
+          return agents;
         case 'send_email_to_team':
           return teams;
         case 'send_message':
@@ -242,11 +240,7 @@ describe('useAutomation', () => {
 
     expect(getActionDropdownValues('add_label')).toEqual(labels);
     expect(getActionDropdownValues('assign_team')).toEqual(teams);
-    expect(getActionDropdownValues('assign_agent')).toEqual([
-      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
-      { id: 'last_responding_agent', name: 'AUTOMATION.LAST_RESPONDING_AGENT' },
-      ...agents,
-    ]);
+    expect(getActionDropdownValues('assign_agent')).toEqual(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

@@ -1,239 +0,0 @@
-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

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

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

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

app/javascript/dashboard/composables/useAutomationValues.js

@@ -121,19 +121,8 @@ 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: agentsList,
+      agents: agents.value,
       labels: labels.value,
       teams: teams.value,
       slaPolicies: slaPolicies.value,

app/javascript/dashboard/composables/useDropdownPosition.js

@@ -1,128 +0,0 @@
-import { computed, unref, watch } from 'vue';
-import { useElementBounding, useWindowSize } from '@vueuse/core';
-
-const FALLBACK_SIZE = 200;
-const SAFE_MARGIN = 16;
-const GAP = 8;
-
-/**
- * Auto-position a floating element based on available viewport space.
- *
- * @param {Ref} triggerRef - Trigger element ref
- * @param {Ref} dropdownRef - Dropdown/popover element ref
- * @param {Ref} enabled - Whether to calculate position
- * @param {Object} options
- * @param {Ref}    [options.container] - Constraining container ref
- * @param {number} [options.margin=16] - Min distance from viewport/container edges
- * @param {string} [options.align='end'] - 'start' or 'end' (flips automatically for RTL)
- */
-export function useDropdownPosition(
-  triggerRef,
-  dropdownRef,
-  enabled,
-  { container = null, margin = SAFE_MARGIN, align = 'end' } = {}
-) {
-  const trigger = useElementBounding(triggerRef);
-  const dropdown = useElementBounding(dropdownRef);
-  const bounds = useElementBounding(container);
-  const { width: winWidth, height: winHeight } = useWindowSize();
-
-  const isRTL = computed(
-    () => document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl'
-  );
-
-  // Whether to anchor to the left edge of the trigger
-  const anchorLeft = computed(() => (align === 'start') !== isRTL.value);
-
-  const verticalClass = computed(() => {
-    if (!unref(enabled)) return 'top-full mt-2';
-    const dh = dropdown.height.value || FALLBACK_SIZE;
-    const spaceBelow = winHeight.value - trigger.bottom.value;
-    const spaceAbove = trigger.top.value;
-    // Only flip above if it fits there; otherwise stay below (more room or equal)
-    if (spaceBelow >= dh + margin) return 'top-full mt-2';
-    if (spaceAbove >= dh + margin) return 'bottom-full mb-2';
-    return spaceBelow >= spaceAbove ? 'top-full mt-2' : 'bottom-full mb-2';
-  });
-
-  // Relative mode: Tailwind class + style for absolute-in-parent dropdowns
-  const position = computed(() => {
-    if (!unref(enabled)) return { class: 'top-full mt-2', style: {} };
-
-    const dw = dropdown.width.value || FALLBACK_SIZE;
-    const leftBound = container ? bounds.left.value : 0;
-    const rightBound = container ? bounds.right.value : winWidth.value;
-    const style = {};
-
-    if (anchorLeft.value) {
-      const available = rightBound - trigger.left.value;
-      const overflow = dw - available;
-      style.left = overflow > 0 ? `-${overflow}px` : '0px';
-    } else {
-      const available = trigger.right.value - leftBound;
-      const overflow = dw - available;
-      style.right = overflow > 0 ? `-${overflow}px` : '0px';
-    }
-
-    return { class: verticalClass.value, style };
-  });
-
-  // Fixed mode: styles for teleported popovers
-  const fixedPosition = computed(() => {
-    if (!unref(enabled)) return { class: 'fixed z-[9999]', style: {} };
-
-    const dh = dropdown.height.value || FALLBACK_SIZE;
-    const dw = dropdown.width.value || FALLBACK_SIZE;
-    const spaceBelow = winHeight.value - trigger.bottom.value;
-    const style = {};
-
-    // Vertical: prefer below, flip above only if it fits, else pick the larger side
-    const spaceAbove = trigger.top.value;
-    const placeAbove =
-      spaceBelow < dh + margin &&
-      (spaceAbove >= dh + margin || spaceAbove > spaceBelow);
-
-    if (placeAbove) {
-      style.bottom = `${winHeight.value - trigger.top.value + GAP}px`;
-      style.maxHeight = `${spaceAbove - GAP - margin}px`;
-    } else {
-      style.top = `${trigger.bottom.value + GAP}px`;
-      style.maxHeight = `${spaceBelow - GAP - margin}px`;
-    }
-
-    // Horizontal
-    if (anchorLeft.value) {
-      const left = trigger.left.value;
-      if (left + dw > winWidth.value - margin) {
-        style.right = `${margin}px`;
-      } else {
-        style.left = `${Math.max(margin, left)}px`;
-      }
-    } else {
-      const right = winWidth.value - trigger.right.value;
-      if (trigger.right.value - dw < margin) {
-        style.left = `${margin}px`;
-      } else {
-        style.right = `${right}px`;
-      }
-    }
-
-    return { class: 'fixed z-[9999]', style };
-  });
-
-  const updatePosition = () => {
-    trigger.update();
-    dropdown.update();
-    if (container) bounds.update();
-  };
-
-  // Update position when dropdown opens to ensure RTL state is current
-  watch(
-    () => unref(enabled),
-    isEnabled => {
-      if (isEnabled) updatePosition();
-    }
-  );
-
-  return { position, fixedPosition, updatePosition };
-}

app/javascript/dashboard/composables/useInbox.js

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

app/javascript/dashboard/composables/useKeyboardNavigableList.js

@@ -12,14 +12,11 @@ import { useKeyboardEvents } from './useKeyboardEvents';
 
 /**
  * Wrap the action in a function that calls the action and prevents the default event behavior.
- * Only prevents default when items are available to navigate.
  * @param {Function} action - The action to be called.
- * @param {import('vue').Ref<Array>} items - A ref to the array of selectable items.
  * @returns {{action: Function, allowOnFocusedInput: boolean}} An object containing the action and a flag to allow the event on focused input.
  */
-const createAction = (action, items) => ({
+const createAction = action => ({
   action: e => {
-    if (!items.value?.length) return;
     action();
     e.preventDefault();
   },
@@ -41,14 +38,15 @@ const createKeyboardEvents = (
   items
 ) => {
   const events = {
-    ArrowUp: createAction(moveSelectionUp, items),
-    'Control+KeyP': createAction(moveSelectionUp, items),
-    ArrowDown: createAction(moveSelectionDown, items),
-    'Control+KeyN': createAction(moveSelectionDown, items),
+    ArrowUp: createAction(moveSelectionUp),
+    'Control+KeyP': createAction(moveSelectionUp),
+    ArrowDown: createAction(moveSelectionDown),
+    'Control+KeyN': createAction(moveSelectionDown),
   };
 
+  // Adds an event handler for the Enter key if the onSelect function is provided.
   if (typeof onSelect === 'function') {
-    events.Enter = createAction(onSelect, items);
+    events.Enter = createAction(() => items.value?.length > 0 && onSelect());
   }
 
   return events;

app/javascript/dashboard/composables/useMacros.js

@@ -15,11 +15,6 @@ export const useMacros = () => {
   const teams = computed(() => getters['teams/getTeams'].value);
   const agents = computed(() => getters['agents/getVerifiedAgents'].value);
 
-  const withNoneOption = options => [
-    { id: 'nil', name: t('AUTOMATION.NONE_OPTION') },
-    ...(options || []),
-  ];
-
   /**
    * Get dropdown values based on the specified type
    * @param {string} type - The type of dropdown values to retrieve
@@ -28,15 +23,10 @@ export const useMacros = () => {
   const getMacroDropdownValues = type => {
     switch (type) {
       case 'assign_team':
-        return withNoneOption(teams.value);
       case 'send_email_to_team':
         return teams.value;
       case 'assign_agent':
-        return [
-          ...withNoneOption(),
-          { id: 'self', name: 'Self' },
-          ...agents.value,
-        ];
+        return [{ id: 'self', name: 'Self' }, ...agents.value];
       case 'add_label':
       case 'remove_label':
         return labels.value.map(i => ({

app/javascript/dashboard/constants/editor.js

@@ -109,6 +109,11 @@ export const FORMATTING = {
       'redo',
     ],
   },
+  'Channel::Voice': {
+    marks: [],
+    nodes: [],
+    menu: [],
+  },
   'Channel::Tiktok': {
     marks: [],
     nodes: [],
@@ -167,7 +172,6 @@ export const FORMATTING = {
 export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'strong',
   'em',
-  'strike',
   'link',
   'undo',
   'redo',
@@ -178,7 +182,6 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'h3',
   'imageUpload',
   'code',
-  'insertTable',
 ];
 
 /**

app/javascript/dashboard/constants/globals.js

@@ -12,11 +12,6 @@ export default {
     SNOOZED: 'snoozed',
     ALL: 'all',
   },
-  CONVERSATION_TYPE: {
-    MENTION: 'mention',
-    PARTICIPATING: 'participating',
-    UNATTENDED: 'unattended',
-  },
   SORT_BY_TYPE: {
     LAST_ACTIVITY_AT_ASC: 'last_activity_at_asc',
     LAST_ACTIVITY_AT_DESC: 'last_activity_at_desc',
@@ -45,7 +40,6 @@ export default {
   WHATSAPP_EMBEDDED_SIGNUP_DOCS_URL:
     'https://developers.facebook.com/docs/whatsapp/embedded-signup/custom-flows/onboarding-business-app-users#limitations',
   SMALL_SCREEN_BREAKPOINT: 768,
-  LARGE_SCREEN_BREAKPOINT: 1024,
   AVAILABILITY_STATUS_KEYS: ['online', 'busy', 'offline'],
   SNOOZE_OPTIONS: {
     UNTIL_NEXT_REPLY: 'until_next_reply',

app/javascript/dashboard/featureFlags.js

@@ -36,7 +36,6 @@ export const FEATURE_FLAGS = {
   CHATWOOT_V4: 'chatwoot_v4',
   CHANNEL_INSTAGRAM: 'channel_instagram',
   CHANNEL_TIKTOK: 'channel_tiktok',
-  CHANNEL_VOICE: 'channel_voice',
   CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
   CAPTAIN_CUSTOM_TOOLS: 'custom_tools',
   CAPTAIN_V2: 'captain_integration_v2',

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -153,8 +153,3 @@ export const YEAR_IN_REVIEW_EVENTS = Object.freeze({
   NEXT_CLICKED: 'Year in Review: Next clicked',
   SHARE_CLICKED: 'Year in Review: Share clicked',
 });
-
-export const ONBOARDING_EVENTS = Object.freeze({
-  ACCOUNT_DETAILS_VISITED: 'Onboarding: Account details visited',
-  ACCOUNT_DETAILS_COMPLETED: 'Onboarding: Account details completed',
-});

app/javascript/dashboard/helper/URLHelper.js

@@ -51,7 +51,6 @@ export const conversationListPageURL = ({
   } else if (conversationType) {
     const urlMap = {
       mention: 'mentions/conversations',
-      participating: 'participating/conversations',
       unattended: 'unattended/conversations',
     };
     url = `accounts/${accountId}/${urlMap[conversationType]}`;

app/javascript/dashboard/helper/actionCable.js

@@ -33,7 +33,6 @@ class ActionCableConnector extends BaseActionCableConnector {
       'conversation.read': this.onConversationRead,
       'conversation.updated': this.onConversationUpdated,
       'account.cache_invalidated': this.onCacheInvalidate,
-      'account.enrichment_completed': this.onEnrichmentCompleted,
       'copilot.message.created': this.onCopilotMessageCreated,
     };
   }
@@ -195,10 +194,6 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.app.$store.dispatch('copilotMessages/upsert', data);
   };
 
-  onEnrichmentCompleted = () => {
-    this.app.$store.dispatch('accounts/get', { silent: true });
-  };
-
   onCacheInvalidate = data => {
     const keys = data.cache_keys;
     this.app.$store.dispatch('labels/revalidate', { newKey: keys.label });

app/javascript/dashboard/helper/editorHelper.js

@@ -2,7 +2,6 @@ import {
   messageSchema,
   MessageMarkdownTransformer,
   MessageMarkdownSerializer,
-  Selection,
 } from '@chatwoot/prosemirror-schema';
 import { replaceVariablesInMessage } from '@chatwoot/utils';
 import * as Sentry from '@sentry/vue';
@@ -274,18 +273,6 @@ export const scrollCursorIntoView = view => {
   }
 };
 
-/**
- * Collapse the current selection to a cursor near its head. Used to override
- * the default Escape -> selectParentNode behavior which would otherwise keep
- * the text highlight visible.
- *
- * @param {EditorView} view - The ProseMirror EditorView
- */
-export const collapseSelection = view => {
-  const { tr, selection } = view.state;
-  view.dispatch(tr.setSelection(Selection.near(selection.$head)));
-};
-
 /**
  * Returns a transaction that inserts a node into editor at the given position
  * Has an optional param 'content' to check if the

app/javascript/dashboard/helper/inbox.js

@@ -11,29 +11,9 @@ export const INBOX_TYPES = {
   SMS: 'Channel::Sms',
   INSTAGRAM: 'Channel::Instagram',
   TIKTOK: 'Channel::Tiktok',
+  VOICE: 'Channel::Voice',
 };
 
-// Add providers here as they gain voice capability (e.g., WhatsApp Cloud, Twilio WhatsApp)
-export const VOICE_CALL_PROVIDERS = {
-  TWILIO: 'twilio',
-};
-
-export const getVoiceCallProvider = inbox => {
-  if (!inbox) return null;
-
-  // Callers pass either snake_case (raw API) or camelCase (after camelcaseKeys) shapes.
-  const channelType = inbox.channel_type || inbox.channelType;
-  const voiceEnabled = inbox.voice_enabled || inbox.voiceEnabled;
-
-  if (channelType === INBOX_TYPES.TWILIO && voiceEnabled) {
-    return VOICE_CALL_PROVIDERS.TWILIO;
-  }
-
-  return null;
-};
-
-export const isVoiceCallEnabled = inbox => getVoiceCallProvider(inbox) !== null;
-
 export const TWILIO_CHANNEL_MEDIUM = {
   WHATSAPP: 'whatsapp',
   SMS: 'sms',
@@ -50,6 +30,7 @@ const INBOX_ICON_MAP_FILL = {
   [INBOX_TYPES.LINE]: 'i-ri-line-fill',
   [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-fill',
   [INBOX_TYPES.TIKTOK]: 'i-ri-tiktok-fill',
+  [INBOX_TYPES.VOICE]: 'i-ri-phone-fill',
 };
 
 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';
@@ -64,6 +45,7 @@ const INBOX_ICON_MAP_LINE = {
   [INBOX_TYPES.TELEGRAM]: 'i-woot-telegram',
   [INBOX_TYPES.LINE]: 'i-woot-line',
   [INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
+  [INBOX_TYPES.VOICE]: 'i-woot-voice',
   [INBOX_TYPES.TIKTOK]: 'i-woot-tiktok',
 };
 
@@ -76,6 +58,7 @@ export const getInboxSource = (type, phoneNumber, inbox) => {
 
     case INBOX_TYPES.TWILIO:
     case INBOX_TYPES.WHATSAPP:
+    case INBOX_TYPES.VOICE:
       return phoneNumber || '';
 
     case INBOX_TYPES.EMAIL:
@@ -114,6 +97,9 @@ export const getReadableInboxByType = (type, phoneNumber) => {
     case INBOX_TYPES.LINE:
       return 'line';
 
+    case INBOX_TYPES.VOICE:
+      return 'voice';
+
     default:
       return 'chat';
   }
@@ -156,6 +142,9 @@ export const getInboxClassByType = (type, phoneNumber) => {
     case INBOX_TYPES.TIKTOK:
       return 'brand-tiktok';
 
+    case INBOX_TYPES.VOICE:
+      return 'phone';
+
     default:
       return 'chat';
   }

app/javascript/dashboard/helper/portalHelper.js

@@ -91,13 +91,6 @@ export const ARTICLE_MENU_ITEMS = {
     action: 'archive',
     icon: 'i-lucide-archive-restore',
   },
-  translate: {
-    label:
-      'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.TRANSLATE',
-    value: 'translate',
-    action: 'translate',
-    icon: 'i-lucide-languages',
-  },
   delete: {
     label: 'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.DROPDOWN_MENU.DELETE',
     value: 'delete',
@@ -107,9 +100,9 @@ export const ARTICLE_MENU_ITEMS = {
 };
 
 export const ARTICLE_MENU_OPTIONS = {
-  [ARTICLE_STATUSES.ARCHIVED]: ['publish', 'draft', 'translate'],
-  [ARTICLE_STATUSES.DRAFT]: ['publish', 'archive', 'translate'],
-  [ARTICLE_STATUSES.PUBLISHED]: ['draft', 'archive', 'translate'],
+  [ARTICLE_STATUSES.ARCHIVED]: ['publish', 'draft'],
+  [ARTICLE_STATUSES.DRAFT]: ['publish', 'archive'],
+  [ARTICLE_STATUSES.PUBLISHED]: ['draft', 'archive'],
 };
 
 export const ARTICLE_TABS = {