fix(signup): normalize account signup config checks

On self-hosted instances without email configured, users created from
Super Admin can get stuck in an unconfirmed state. This PR implements
the default at the Super Admin frontend form layer, not in backend
creation logic.

What changed:
- Added a custom `ConfirmedAtField` for Super Admin user forms.
- Prefills `confirmed_at` with current time on the **New User** form
(`GET /super_admin/users/new`).
- Kept backend create behavior unchanged
(`resource_class.new(resource_params)`), so API/manual payloads still
behave normally.

Behavior:
- In Super Admin UI, `confirmed_at` is prefilled by default.
- If someone wants an unconfirmed user, they can clear the
`confirmed_at` field before saving.
- If `confirmed_at` is omitted from payload entirely, the created user
remains unconfirmed.

Scope note: external signup flows are intentionally unchanged in this PR
(`/api/v1/accounts`, `/api/v2/accounts`, and social/omniauth signup
behavior are not modified).

## Demo 





https://github.com/user-attachments/assets/436abbb0-d4cf-49a6-a1b8-4b6aa85aa09f

AGENTS.md

@@ -68,6 +68,15 @@
 - Example: `feat(auth): add user authentication`
 - Don't reference Claude in commit messages
 
+## PR Description Format
+
+- Start with a short, user-facing paragraph describing the product change.
+- Add a `Closes` section with relevant issue links (GitHub, Linear, etc.).
+- For feature PRs, add `How to test` from a product/UX standpoint.
+- For bugfix PRs, use `How to reproduce` when helpful.
+- Optionally add a `What changed` section for implementation highlights.
+- Do not add a `How this was tested` section listing specs/commands.
+
 ## Project-Specific
 
 - **Translations**:

Gemfile.lock

@@ -191,7 +191,7 @@ GEM
     coderay (1.1.3)
     commonmarker (0.23.10)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.3)
+    connection_pool (2.5.5)
     crack (1.0.0)
       bigdecimal
       rexml
@@ -736,7 +736,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.22.2)
+    redis-client (0.26.4)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)

Makefile

@@ -40,8 +40,12 @@ run:
 	fi
 
 force_run:
-	rm -f ./.overmind.sock
-	rm -f tmp/pids/*.pid
+	@echo "Cleaning up Overmind processes..."
+	@lsof -ti:3036 2>/dev/null | xargs kill -9 2>/dev/null || true
+	@lsof -ti:3000 2>/dev/null | xargs kill -9 2>/dev/null || true
+	@rm -f ./.overmind.sock
+	@rm -f tmp/pids/*.pid
+	@echo "Cleanup complete"
 	overmind start -f Procfile.dev
 
 force_run_tunnel:

VERSION_CW

@@ -1 +1 @@
-4.11.1
+4.11.2

app/builders/messages/facebook/message_builder.rb

@@ -105,15 +105,19 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
   end
 
   def message_params
+    content_attributes = {
+      in_reply_to_external_id: response.in_reply_to_external_id
+    }
+    content_attributes[:external_echo] = true if @outgoing_echo
+
     {
       account_id: conversation.account_id,
       inbox_id: conversation.inbox_id,
       message_type: @message_type,
+      status: @outgoing_echo ? :delivered : :sent,
       content: response.content,
       source_id: response.identifier,
-      content_attributes: {
-        in_reply_to_external_id: response.in_reply_to_external_id
-      },
+      content_attributes: content_attributes,
       sender: @outgoing_echo ? nil : @contact_inbox.contact
     }
   end

app/builders/messages/messenger/message_builder.rb

@@ -2,12 +2,17 @@ class Messages::Messenger::MessageBuilder
   include ::FileTypeHelper
 
   def process_attachment(attachment)
-    # This check handles very rare case if there are multiple files to attach with only one usupported file
+    # This check handles very rare case if there are multiple files to attach with only one unsupported file
     return if unsupported_file_type?(attachment['type'])
 
-    attachment_obj = @message.attachments.new(attachment_params(attachment).except(:remote_file_url))
+    params = attachment_params(attachment)
+    attachment_obj = @message.attachments.new(params.except(:remote_file_url))
     attachment_obj.save!
-    attach_file(attachment_obj, attachment_params(attachment)[:remote_file_url]) if attachment_params(attachment)[:remote_file_url]
+    if facebook_reel?(attachment)
+      update_facebook_reel_content(attachment)
+    elsif params[:remote_file_url]
+      attach_file(attachment_obj, params[:remote_file_url])
+    end
     fetch_story_link(attachment_obj) if attachment_obj.file_type == 'story_mention'
     fetch_ig_story_link(attachment_obj) if attachment_obj.file_type == 'ig_story'
     fetch_ig_post_link(attachment_obj) if attachment_obj.file_type == 'ig_post'
@@ -26,7 +31,7 @@ class Messages::Messenger::MessageBuilder
   end
 
   def attachment_params(attachment)
-    file_type = attachment['type'].to_sym
+    file_type = normalize_file_type(attachment['type'])
     params = { file_type: file_type, account_id: @message.account_id }
 
     if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel, :ig_post, :ig_story].include? file_type
@@ -100,6 +105,28 @@ class Messages::Messenger::MessageBuilder
 
   private
 
+  # Facebook may send attachment types that don't directly match our file_type enum.
+  # Map known aliases to their canonical enum values.
+  FACEBOOK_FILE_TYPE_MAP = { reel: :ig_reel }.freeze
+
+  def normalize_file_type(type)
+    sym = type.to_sym
+    FACEBOOK_FILE_TYPE_MAP.fetch(sym, sym)
+  end
+
+  # Facebook sends reel URLs as webpage links (facebook.com/reel/...) rather than
+  # direct video URLs. Downloading these yields HTML, not video content.
+  def facebook_reel?(attachment)
+    attachment['type'].to_sym == :reel
+  end
+
+  def update_facebook_reel_content(attachment)
+    url = attachment.dig('payload', 'url')
+    return if url.blank?
+
+    @message.update!(content: url) if @message.content.blank?
+  end
+
   def unsupported_file_type?(attachment_type)
     [:template, :unsupported_type, :ephemeral].include? attachment_type.to_sym
   end

app/builders/v2/report_builder.rb

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

app/builders/v2/reports/base_summary_builder.rb

@@ -1,5 +1,6 @@
 class V2::Reports::BaseSummaryBuilder
   include DateRangeHelper
+  include V2::Reports::Concerns::RollupConditions
 
   def build
     load_data
@@ -8,9 +9,15 @@ class V2::Reports::BaseSummaryBuilder
 
   private
 
+  # Summary builders fetch all metrics in a single query, so the per-metric
+  # check from RollupConditions does not apply.
+  def metric_covered?
+    true
+  end
+
   def load_data
     @conversations_count = fetch_conversations_count
-    load_reporting_events_data
+    use_rollup? ? load_rollup_data : load_reporting_events_data
   end
 
   def load_reporting_events_data
@@ -34,6 +41,46 @@ class V2::Reports::BaseSummaryBuilder
     @avg_reply_time = results.transform_values(&:avg_reply_time)
   end
 
+  # rubocop:disable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/MethodLength, Metrics/PerceivedComplexity
+  def load_rollup_data
+    dimension_type = dimension_type_to_rollup
+    value_col = rollup_value_column
+
+    # Fetch rollup data grouped by dimension_id
+    rollup_rows = ReportingEventsRollup.where(
+      account_id: account.id,
+      dimension_type: dimension_type,
+      date: rollup_date_range
+    ).group(:dimension_id).select(
+      'dimension_id',
+      'SUM(CASE WHEN metric = \'resolutions_count\' THEN count ELSE 0 END) as resolved_count',
+      "SUM(CASE WHEN metric = 'resolution_time' THEN count ELSE 0 END) as resolution_count",
+      "SUM(CASE WHEN metric = 'resolution_time' THEN #{value_col} ELSE 0 END) as resolution_sum_value",
+      "SUM(CASE WHEN metric = 'first_response' THEN count ELSE 0 END) as first_response_count",
+      "SUM(CASE WHEN metric = 'first_response' THEN #{value_col} ELSE 0 END) as first_response_sum_value",
+      "SUM(CASE WHEN metric = 'reply_time' THEN count ELSE 0 END) as reply_count",
+      "SUM(CASE WHEN metric = 'reply_time' THEN #{value_col} ELSE 0 END) as reply_sum_value"
+    )
+
+    # Convert to the expected format
+    results = {}
+    rollup_rows.each do |row|
+      results[row.dimension_id] = row
+    end
+
+    @resolved_count = results.transform_values { |r| r.resolved_count.to_i }
+    @avg_resolution_time = results.transform_values do |r|
+      r.resolution_count.to_i.zero? ? nil : (r.resolution_sum_value.to_f / r.resolution_count.to_i)
+    end
+    @avg_first_response_time = results.transform_values do |r|
+      r.first_response_count.to_i.zero? ? nil : (r.first_response_sum_value.to_f / r.first_response_count.to_i)
+    end
+    @avg_reply_time = results.transform_values do |r|
+      r.reply_count.to_i.zero? ? nil : (r.reply_sum_value.to_f / r.reply_count.to_i)
+    end
+  end
+  # rubocop:enable Metrics/AbcSize, Metrics/CyclomaticComplexity, Metrics/MethodLength, Metrics/PerceivedComplexity
+
   def reporting_events
     @reporting_events ||= account.reporting_events.where(created_at: range)
   end

app/builders/v2/reports/concerns/rollup_conditions.rb

@@ -0,0 +1,75 @@
+module V2::Reports::Concerns::RollupConditions
+  COVERED_METRICS = {
+    avg_first_response_time: :first_response,
+    avg_resolution_time: :resolution_time,
+    reply_time: :reply_time,
+    resolutions_count: :resolutions_count,
+    bot_resolutions_count: :bot_resolutions_count,
+    bot_handoffs_count: :bot_handoffs_count
+  }.freeze
+
+  SUPPORTED_DIMENSIONS = %w[account agent inbox].freeze
+
+  def use_rollup?
+    # Condition 0: reporting_timezone must be configured on account
+    return false if account.reporting_timezone.blank?
+
+    # Condition 1: Feature flag must be enabled
+    return false unless account.feature_enabled?('reporting_events_rollup')
+
+    # Condition 2: Metric must be covered by rollup
+    return false unless metric_covered?
+
+    # Condition 3: Not hourly granularity
+    return false if params[:group_by] == 'hour'
+
+    # Condition 4: Dimension must be supported
+    return false unless dimension_supported?
+
+    # Condition 5: Timezone must match
+    timezone_matches_account?
+  end
+
+  private
+
+  def metric_covered?
+    return false if params[:metric].blank?
+
+    COVERED_METRICS.key?(params[:metric].to_sym)
+  end
+
+  def dimension_supported?
+    return true if params[:type].blank? # account dimension (no specific ID)
+
+    SUPPORTED_DIMENSIONS.include?(params[:type].to_s)
+  end
+
+  def timezone_matches_account?
+    return false if params[:timezone_offset].blank?
+
+    offset_in_seconds = params[:timezone_offset].to_f * 3600
+    account_zone = ActiveSupport::TimeZone[account.reporting_timezone]
+    account_zone&.now&.utc_offset == offset_in_seconds
+  end
+
+  def metric_to_rollup_metric(metric)
+    COVERED_METRICS[metric.to_sym]
+  end
+
+  def rollup_value_column
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :sum_value_business_hours : :sum_value
+  end
+
+  def rollup_date_range
+    tz = ActiveSupport::TimeZone[account.reporting_timezone]
+    start_date = range.first.in_time_zone(tz).to_date
+    # range is exclusive (since...until), so subtract a second to avoid
+    # including the until boundary day when it falls exactly at midnight.
+    end_date = (range.last - 1.second).in_time_zone(tz).to_date
+    start_date..end_date
+  end
+
+  def dimension_type_to_rollup
+    { 'account' => :account, 'agent' => :agent, 'inbox' => :inbox }[params[:type].to_s]
+  end
+end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -11,11 +11,6 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
-
   def fetch_conversations_count
     account.conversations.where(created_at: range).group(group_by_key).count
   end

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

@@ -1,5 +1,15 @@
 class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
   def timeseries
+    use_rollup? ? rollup_timeseries : raw_timeseries
+  end
+
+  def aggregate_value
+    use_rollup? ? rollup_aggregate_value : raw_aggregate_value
+  end
+
+  private
+
+  def raw_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|
@@ -12,11 +22,98 @@ class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::B
     end
   end
 
-  def aggregate_value
+  def rollup_timeseries
+    dimension_type = dimension_type_to_rollup
+    dimension_id = dimension_id_for_rollup
+    metric = metric_to_rollup_metric(params[:metric])
+
+    rollup_rows = ReportingEventsRollup.where(
+      account_id: account.id,
+      metric: metric,
+      dimension_type: dimension_type,
+      dimension_id: dimension_id,
+      date: rollup_date_range
+    )
+
+    group_and_aggregate_rollup(rollup_rows)
+  end
+
+  def raw_aggregate_value
     object_scope.average(average_value_key)
   end
 
-  private
+  def rollup_aggregate_value
+    dimension_type = dimension_type_to_rollup
+    dimension_id = dimension_id_for_rollup
+    metric = metric_to_rollup_metric(params[:metric])
+
+    value_col = rollup_value_column
+
+    result = ReportingEventsRollup.where(
+      account_id: account.id,
+      metric: metric,
+      dimension_type: dimension_type,
+      dimension_id: dimension_id,
+      date: rollup_date_range
+    ).pick(Arel.sql("SUM(count), SUM(#{value_col})"))
+
+    return nil if result.blank? || result[0].to_i.zero?
+
+    result[1].to_f / result[0].to_i
+  end
+
+  def dimension_id_for_rollup
+    params[:type].to_s == 'account' ? account.id : scope.id
+  end
+
+  def group_and_aggregate_rollup(rollup_rows)
+    grouped_data = aggregate_rollup_rows(rollup_rows, all_periods_in_range.index_with { { count: 0, sum_value: 0.0 } })
+
+    results = grouped_data.map do |date_key, data|
+      value = data[:count].zero? ? 0 : data[:sum_value] / data[:count]
+      { value: value, timestamp: date_key.in_time_zone(timezone).to_i, count: data[:count] }
+    end
+    results.sort_by { |h| h[:timestamp] }
+  end
+
+  def aggregate_rollup_rows(rollup_rows, grouped_data = {})
+    value_col = rollup_value_column
+    rollup_rows.each_with_object(grouped_data) do |row, all_grouped_data|
+      date_key = date_key_for_group(row.date)
+      all_grouped_data[date_key] ||= { count: 0, sum_value: 0.0 }
+      all_grouped_data[date_key][:count] += row.count
+      all_grouped_data[date_key][:sum_value] += row.public_send(value_col)
+    end
+  end
+
+  def date_key_for_group(date)
+    case group_by
+    when 'week' then date.beginning_of_week(:sunday)
+    when 'month' then date.beginning_of_month
+    when 'year' then date.beginning_of_year
+    else date
+    end
+  end
+
+  def all_periods_in_range
+    date_range = rollup_date_range
+    dates = []
+    current = date_key_for_group(date_range.first)
+    while current <= date_range.last
+      dates << current
+      current = advance_period(current)
+    end
+    dates
+  end
+
+  def advance_period(date)
+    case group_by
+    when 'week' then date + 1.week
+    when 'month' then date + 1.month
+    when 'year' then date + 1.year
+    else date + 1.day
+    end
+  end
 
   def event_name
     metric_to_event_name = {

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

@@ -1,6 +1,8 @@
 class V2::Reports::Timeseries::BaseTimeseriesBuilder
   include TimezoneHelper
   include DateRangeHelper
+  include V2::Reports::Concerns::RollupConditions
+
   DEFAULT_GROUP_BY = 'day'.freeze
 
   pattr_initialize :account, :params

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

@@ -1,5 +1,15 @@
 class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
   def timeseries
+    use_rollup? ? rollup_timeseries : raw_timeseries
+  end
+
+  def aggregate_value
+    use_rollup? ? rollup_aggregate_value : raw_aggregate_value
+  end
+
+  private
+
+  def raw_timeseries
     grouped_count.each_with_object([]) do |element, arr|
       event_date, event_count = element
 
@@ -11,11 +21,92 @@ class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::Bas
     end
   end
 
-  def aggregate_value
+  def rollup_timeseries
+    metric = metric_to_rollup_metric(params[:metric])
+    return [] if metric.blank?
+
+    dimension_type = dimension_type_to_rollup
+    dimension_id = dimension_id_for_rollup
+
+    rollup_rows = ReportingEventsRollup.where(
+      account_id: account.id,
+      metric: metric,
+      dimension_type: dimension_type,
+      dimension_id: dimension_id,
+      date: rollup_date_range
+    )
+
+    group_and_aggregate_rollup_counts(rollup_rows)
+  end
+
+  def raw_aggregate_value
     object_scope.count
   end
 
-  private
+  def rollup_aggregate_value
+    metric = metric_to_rollup_metric(params[:metric])
+    return 0 if metric.blank?
+
+    dimension_type = dimension_type_to_rollup
+    dimension_id = dimension_id_for_rollup
+
+    ReportingEventsRollup.where(
+      account_id: account.id,
+      metric: metric,
+      dimension_type: dimension_type,
+      dimension_id: dimension_id,
+      date: rollup_date_range
+    ).sum(:count).to_i
+  end
+
+  def dimension_id_for_rollup
+    params[:type].to_s == 'account' ? account.id : scope.id
+  end
+
+  def group_and_aggregate_rollup_counts(rollup_rows)
+    # Pre-fill all periods with zero to match raw path's default_value: 0 behavior
+    grouped_data = all_periods_in_range.index_with { 0 }
+
+    rollup_rows.each do |row|
+      date_key = date_key_for_period(row.date)
+      grouped_data[date_key] ||= 0
+      grouped_data[date_key] += row.count
+    end
+
+    results = grouped_data.map do |date_key, count|
+      { value: count, timestamp: date_key.in_time_zone(timezone).to_i }
+    end
+    results.sort_by { |h| h[:timestamp] }
+  end
+
+  def date_key_for_period(date)
+    case group_by
+    when 'week' then date.beginning_of_week(:sunday)
+    when 'month' then date.beginning_of_month
+    when 'year' then date.beginning_of_year
+    else date
+    end
+  end
+
+  def all_periods_in_range
+    date_range = rollup_date_range
+    dates = []
+    current = date_key_for_period(date_range.first)
+    while current <= date_range.last
+      dates << current
+      current = advance_period(current)
+    end
+    dates
+  end
+
+  def advance_period(date)
+    case group_by
+    when 'week' then date + 1.week
+    when 'month' then date + 1.month
+    when 'year' then date + 1.year
+    else date + 1.day
+    end
+  end
 
   def metric
     @metric ||= params[:metric]

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

@@ -40,7 +40,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def reorder
-    Article.update_positions(params[:positions_hash])
+    Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
     head :ok
   end
 

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

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseController
   before_action :portal
   before_action :check_authorization
-  before_action :fetch_category, except: [:index, :create]
+  before_action :fetch_category, except: [:index, :create, :reorder]
   before_action :set_current_page, only: [:index]
 
   def index
@@ -32,6 +32,11 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
     head :ok
   end
 
+  def reorder
+    Category.update_positions(portal: @portal, positions_hash: params[:positions_hash])
+    head :ok
+  end
+
   private
 
   def fetch_category
@@ -39,7 +44,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
   end
 
   def portal
-    @portal ||= Current.account.portals.find_by(slug: params[:portal_id])
+    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
   end
 
   def related_categories_records

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

@@ -107,7 +107,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
   end
 
   def toggle_typing_status
-    typing_status_manager = ::Conversations::TypingStatusManager.new(@conversation, current_user, params)
+    typing_status_manager = ::Conversations::TypingStatusManager.new(@conversation, Current.user, params)
     typing_status_manager.toggle_typing_status
     head :ok
   end

app/controllers/api/v1/accounts_controller.rb

@@ -100,7 +100,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def check_signup_enabled
-    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
+    raise ActionController::RoutingError, 'Not Found' unless GlobalConfigService.account_signup_enabled?
   end
 
   def validate_captcha

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

@@ -3,15 +3,15 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
-    render_report_with(V2::Reports::AgentSummaryBuilder)
+    render_report_with(V2::Reports::AgentSummaryBuilder, type: :agent)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder)
+    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
+    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
   end
 
   def label
@@ -36,15 +36,17 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
       until: permitted_params[:until],
       business_hours: ActiveModel::Type::Boolean.new.cast(permitted_params[:business_hours])
     }
+    @builder_params[:timezone_offset] = permitted_params[:timezone_offset] if permitted_params[:timezone_offset].present?
   end
 
-  def render_report_with(builder_class)
-    builder = builder_class.new(account: Current.account, params: @builder_params)
+  def render_report_with(builder_class, type: nil)
+    builder_params = type.present? ? @builder_params.merge(type: type) : @builder_params
+    builder = builder_class.new(account: Current.account, params: builder_params)
     render json: builder.build
   end
 
   def permitted_params
-    params.permit(:since, :until, :business_hours)
+    params.permit(:since, :until, :business_hours, :timezone_offset)
   end
 
   def date_range_too_long?

app/controllers/api/v2/accounts_controller.rb

@@ -58,7 +58,7 @@ class Api::V2::AccountsController < Api::BaseController
   end
 
   def check_signup_enabled
-    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
+    raise ActionController::RoutingError, 'Not Found' unless GlobalConfigService.account_signup_enabled?
   end
 
   def validate_captcha

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,6 +1,6 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
     'api/v1/accounts/conversations/messages' => ['create'],
     'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze
@@ -28,7 +28,7 @@ module AccessTokenAuthHelper
 
   def validate_bot_access_token!
     return if Current.user.is_a?(User)
-    return if agent_bot_accessible?
+    return if @resource.is_a?(AgentBot) && agent_bot_accessible?
 
     render_unauthorized('Access to this endpoint is not authorized for bots')
   end

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -51,8 +51,7 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   end
 
   def account_signup_allowed?
-    # set it to true by default, this is the behaviour across the app
-    GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') != 'false'
+    GlobalConfigService.account_signup_enabled?
   end
 
   def resource_class(_mapping = nil)

app/dashboards/user_dashboard.rb

@@ -25,7 +25,7 @@ class UserDashboard < Administrate::BaseDashboard
     current_sign_in_ip: Field::String,
     last_sign_in_ip: Field::String,
     confirmation_token: Field::String,
-    confirmed_at: Field::DateTime,
+    confirmed_at: ConfirmedAtField,
     confirmation_sent_at: Field::DateTime,
     unconfirmed_email: Field::String,
     name: Field::String.with_options(searchable: true),

app/fields/confirmed_at_field.rb

@@ -0,0 +1,4 @@
+require 'administrate/field/base'
+
+class ConfirmedAtField < Administrate::Field::DateTime
+end

app/finders/conversation_finder.rb

@@ -11,6 +11,7 @@ class ConversationFinder
     'priority_desc' => %w[sort_on_priority desc],
     'waiting_since_asc' => %w[sort_on_waiting_since asc],
     'waiting_since_desc' => %w[sort_on_waiting_since desc],
+    'priority_desc_created_at_asc' => %w[sort_on_priority_created_at desc],
 
     # To be removed in v3.5.0
     'latest' => %w[sort_on_last_activity_at desc],

app/helpers/filters/filter_helper.rb

@@ -47,11 +47,15 @@ module Filters::FilterHelper
 
   def handle_additional_attributes(query_hash, filter_operator_value, data_type)
     if data_type == 'text_case_insensitive'
-      "LOWER(#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}') " \
-        "#{filter_operator_value} #{query_hash[:query_operator]}"
+      ActiveRecord::Base.sanitize_sql_array(
+        ["LOWER(#{filter_config[:table_name]}.additional_attributes ->> ?) #{filter_operator_value} #{query_hash[:query_operator]}",
+         query_hash[:attribute_key]]
+      )
     else
-      "#{filter_config[:table_name]}.additional_attributes ->> '#{query_hash[:attribute_key]}' " \
-        "#{filter_operator_value} #{query_hash[:query_operator]} "
+      ActiveRecord::Base.sanitize_sql_array(
+        ["#{filter_config[:table_name]}.additional_attributes ->> ? #{filter_operator_value} #{query_hash[:query_operator]} ",
+         query_hash[:attribute_key]]
+      )
     end
   end
 
@@ -70,7 +74,7 @@ module Filters::FilterHelper
 
   def date_filter(current_filter, query_hash, filter_operator_value)
     "(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::#{current_filter['data_type']} " \
-      "#{filter_operator_value}#{current_filter['data_type']} #{query_hash[:query_operator]}"
+      "#{filter_operator_value} #{query_hash[:query_operator]}"
   end
 
   def text_case_insensitive_filter(query_hash, filter_operator_value)

app/javascript/dashboard/api/contacts.js

@@ -57,14 +57,14 @@ class ContactAPI extends ApiClient {
     return axios.post(`${this.url}/${contactId}/labels`, { labels });
   }
 
-  search(search = '', page = 1, sortAttr = 'name', label = '') {
+  search(search = '', page = 1, sortAttr = 'name', label = '', options = {}) {
     let requestURL = `${this.url}/search?${buildContactParams(
       page,
       sortAttr,
       label,
       search
     )}`;
-    return axios.get(requestURL);
+    return axios.get(requestURL, { signal: options.signal });
   }
 
   active(page = 1, sortAttr = 'name') {

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

@@ -25,6 +25,12 @@ class CategoriesAPI extends PortalsAPI {
   delete({ portalSlug, categoryId }) {
     return axios.delete(`${this.url}/${portalSlug}/categories/${categoryId}`);
   }
+
+  reorder({ portalSlug, reorderedGroup }) {
+    return axios.post(`${this.url}/${portalSlug}/categories/reorder`, {
+      positions_hash: reorderedGroup,
+    });
+  }
 }
 
 export default new CategoriesAPI();

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

@@ -68,7 +68,19 @@ describe('#ContactsAPI', () => {
     it('#search', () => {
       contactAPI.search('leads', 1, 'date', 'customer-support');
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support'
+        '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support',
+        { signal: undefined }
+      );
+    });
+
+    it('#search with signal', () => {
+      const controller = new AbortController();
+      contactAPI.search('leads', 1, 'date', 'customer-support', {
+        signal: controller.signal,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support',
+        { signal: controller.signal }
       );
     });
 

app/javascript/dashboard/api/specs/helpCenter/categories.spec.js

@@ -8,5 +8,6 @@ describe('#BulkActionsAPI', () => {
     expect(categoriesAPI).toHaveProperty('create');
     expect(categoriesAPI).toHaveProperty('update');
     expect(categoriesAPI).toHaveProperty('delete');
+    expect(categoriesAPI).toHaveProperty('reorder');
   });
 });

app/javascript/dashboard/api/summaryReports.js

@@ -1,6 +1,8 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
+const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
+
 class SummaryReportsAPI extends ApiClient {
   constructor() {
     super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
@@ -12,6 +14,7 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -22,6 +25,7 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -32,6 +36,7 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -42,6 +47,7 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
       },
     });
   }

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

@@ -1,4 +1,5 @@
 <script setup>
+import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
@@ -28,7 +29,11 @@ const handleButtonClick = () => {
             {{ headerTitle }}
           </span>
           <div
-            v-on-clickaway="() => emit('close')"
+            v-on-click-outside="[
+              () => emit('close'),
+              // This will prevent closing the modal when the editor Create link popup is open
+              { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
+            ]"
             class="relative group/campaign-button"
           >
             <Button

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: 1000, 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/CardPriorityIcon.vue

@@ -1,42 +1,207 @@
 <script setup>
-import { computed } from 'vue';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
+defineProps({
   priority: {
     type: String,
     default: '',
   },
-  showEmpty: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const icons = {
-  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
-  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
-  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
-  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
-};
-
-const iconName = computed(() => {
-  if (props.priority && icons[props.priority]) {
-    return icons[props.priority];
-  }
-  return props.showEmpty ? 'i-woot-priority-empty' : '';
 });
 </script>
 
+<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <Icon
-    v-tooltip.top="{
-      content: priority,
-      delay: { show: 500, hide: 0 },
-    }"
-    :icon="iconName"
-    class="size-4 text-n-slate-5"
-  />
+  <div class="inline-flex items-center justify-center rounded-md">
+    <!-- Low Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.LOW"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- Medium Priority  -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-slate-6"
+        />
+      </g>
+    </svg>
+
+    <!-- High Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.HIGH"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-amber-9"
+        />
+      </g>
+    </svg>
+
+    <!-- Urgent Priority -->
+    <svg
+      v-if="priority === CONVERSATION_PRIORITY.URGENT"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <mask
+        id="mask0_2030_12879"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="20"
+      >
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_2030_12879)">
+        <rect
+          x="3.33301"
+          y="10"
+          width="3.33333"
+          height="6.66667"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="8.33301"
+          y="6.6665"
+          width="3.33333"
+          height="10"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+        <rect
+          x="13.333"
+          y="3.3335"
+          width="3.33333"
+          height="13.3333"
+          rx="1.66667"
+          class="fill-n-ruby-9"
+        />
+      </g>
+    </svg>
+  </div>
 </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/ConversationCardCompact.vue

@@ -1,160 +0,0 @@
-<script setup>
-import { computed, useTemplateRef } from 'vue';
-import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
-import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
-import CardAvatar from './CardAvatar.vue';
-import CardContent from './CardContent.vue';
-import CardLabels from './CardLabelsV5.vue';
-import CardPriorityIcon from './CardPriorityIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.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 },
-  compact: { type: Boolean, default: false },
-  showAssignee: { type: Boolean, default: false },
-  showInboxName: { type: Boolean, default: false },
-  hideThumbnail: { type: Boolean, default: false },
-  enableSelection: { type: Boolean, default: true },
-  isInboxView: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['selectConversation', 'click', 'contextmenu']);
-
-const slaCardLabel = useTemplateRef('slaCardLabel');
-
-const lastMessageInChat = computed(() => getLastMessage(props.chat));
-
-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 hasUnread = computed(() => unreadCount.value > 0);
-
-const hasSlaPolicyId = computed(
-  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
-);
-
-const showLabelsSection = computed(
-  () => props.chat.labels?.length > 0 || hasSlaPolicyId.value
-);
-
-const showMetaSection = computed(
-  () =>
-    (!props.isInboxView && props.showInboxName) ||
-    (props.showAssignee && props.assignee?.name) ||
-    props.chat.priority
-);
-
-const onSelectConversation = checked => {
-  emit('selectConversation', checked);
-};
-</script>
-
-<template>
-  <div
-    class="relative flex items-start max-w-full cursor-pointer group transition-colors duration-150 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
-    :class="{
-      'active animate-card-select bg-n-background border-n-weak': isActiveChat,
-      'bg-n-slate-2': selected,
-      'px-0': compact,
-      'px-2 rounded-lg': !compact,
-    }"
-    @click="$emit('click', $event)"
-    @contextmenu="$emit('contextmenu', $event)"
-  >
-    <div class="relative">
-      <CardAvatar
-        v-if="!compact && !hideThumbnail"
-        :contact="currentContact"
-        :selected="selected"
-        :enable-selection="enableSelection"
-        :hide-thumbnail="hideThumbnail"
-        :class="showMetaSection ? 'mt-8' : 'mt-4'"
-        @select-conversation="onSelectConversation"
-      />
-    </div>
-
-    <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"
-        :class="{
-          'ltr:ml-2 rtl:mr-2': !compact,
-          'mx-2': compact,
-        }"
-      >
-        <InboxName
-          v-if="showInboxName && !isInboxView"
-          :inbox="inbox"
-          class="flex-1 min-w-0"
-        />
-        <div
-          v-if="showAssignee || chat.priority"
-          class="flex items-center gap-2 flex-shrink-0 h-4"
-          :class="{
-            'flex-1 justify-between': isInboxView || !showInboxName,
-          }"
-        >
-          <span
-            v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-label-small px-0 inline-flex items-center truncate gap-0.5 max-w-36"
-          >
-            <Icon icon="i-lucide-user-round" class="text-n-slate-11 size-3" />
-            {{ assignee.name }}
-          </span>
-          <CardPriorityIcon
-            v-if="chat.priority"
-            :priority="chat.priority"
-            class="flex-shrink-0"
-          />
-        </div>
-      </div>
-
-      <div class="inline-flex items-center justify-between w-full">
-        <h4
-          class="text-heading-3 mx-2 capitalize pt-0.5 truncate flex-1 min-w-0 text-n-slate-12"
-          :class="hasUnread ? '!font-520' : ''"
-        >
-          {{ currentContact.name }}
-        </h4>
-
-        <span class="text-label-small text-n-slate-11">
-          <TimeAgo
-            :last-activity-timestamp="chat.timestamp"
-            :created-at-timestamp="chat.created_at"
-          />
-        </span>
-      </div>
-
-      <div class="ltr:ml-2 rtl:mr-2 leading-6 h-6 min-w-0">
-        <CardContent
-          :last-message="lastMessageInChat"
-          :voice-call-status="voiceCallData.status"
-          :voice-call-direction="voiceCallData.direction"
-          :unread-count="unreadCount"
-        />
-      </div>
-
-      <CardLabels
-        v-if="showLabelsSection"
-        :labels="chat.labels"
-        class="mt-0.5 mx-2"
-      >
-        <template v-if="hasSlaPolicyId" #before>
-          <SLACardLabel ref="slaCardLabel" :chat="chat" data-before-slot />
-        </template>
-      </CardLabels>
-    </div>
-  </div>
-</template>

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

@@ -1,182 +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="relative cursor-pointer group transition-colors duration-150 grid gap-4 items-center px-2 h-12"
-    :class="{
-      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3': isActiveChat,
-      'selected bg-n-slate-2 dark:bg-n-slate-3': selected,
-      'hover:bg-n-alpha-1 rounded-lg': !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
-          rounded-full
-        />
-        <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" class="w-20 flex-shrink-0">
-        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
-      </div>
-
-      <div v-if="!isInboxView" 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"
-      >
-        <Icon
-          icon="i-woot-hash"
-          class="size-3.5 text-n-slate-10 flex-shrink-0"
-        />
-        <span class="text-label-small 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
-          :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/ConversationCardV5.vue

@@ -1,245 +0,0 @@
-<script setup>
-import { computed, ref, inject } from 'vue';
-import { useRouter } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
-import ConversationContextMenu from 'dashboard/components/widgets/conversation/contextMenu/Index.vue';
-import ConversationCardExpanded from './ConversationCardExpanded.vue';
-import ConversationCardCompact from './ConversationCardCompact.vue';
-// import ConversationCard from 'dashboard/components/widgets/conversation/ConversationCard.vue';
-
-const props = defineProps({
-  activeLabel: { type: String, default: '' },
-  chat: { type: Object, default: () => ({}) },
-  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: () => [] },
-  enableSelection: { type: Boolean, default: true },
-  isExpandedLayout: { type: Boolean, default: false },
-  isPreviousConversations: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'removeLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
-  'selectConversation',
-  'deSelectConversation',
-]);
-
-const router = useRouter();
-
-const isLargeScreen = inject('isLargeScreen', ref(false));
-
-// Show expanded only when: isExpandedLayout=true AND screen >= 1024px
-const showExpanded = computed(() => {
-  return props.isExpandedLayout && isLargeScreen.value;
-});
-
-const showContextMenu = ref(false);
-const contextMenu = ref({ x: null, y: null });
-
-const currentChat = useMapGetter('getSelectedChat');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const activeInbox = useMapGetter('getSelectedInbox');
-const accountId = useMapGetter('getCurrentAccountId');
-const contactGetter = useMapGetter('contacts/getContact');
-const inboxGetter = useMapGetter('inboxes/getInbox');
-
-const chatMetadata = computed(() => props.chat.meta || {});
-const assignee = computed(() => chatMetadata.value.assignee || {});
-const senderId = computed(() => chatMetadata.value.sender?.id);
-const currentContact = computed(() =>
-  senderId.value ? contactGetter.value(senderId.value) : {}
-);
-const hasActiveInbox = computed(() => activeInbox.value);
-
-const isActiveChat = computed(() => currentChat.value.id === props.chat.id);
-const inbox = computed(() => {
-  const inboxId = props.chat.inbox_id;
-  return inboxId ? inboxGetter.value(inboxId) : {};
-});
-
-const showInboxName = computed(() => inboxesList.value.length > 1);
-
-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;
-
-  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 onSelectConversation = checked => {
-  if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
-  } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.id);
-  }
-};
-
-const openContextMenu = e => {
-  if (!props.enableContextMenu) return;
-  e.preventDefault();
-  emit('contextMenuToggle', true);
-  contextMenu.value.x = e.pageX || e.clientX;
-  contextMenu.value.y = e.pageY || e.clientY;
-  showContextMenu.value = true;
-};
-
-const 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>
-  <!-- Expanded: Only when isExpandedLayout=true AND screen >= 1024px -->
-  <ConversationCardExpanded
-    v-if="showExpanded"
-    :chat="chat"
-    :current-contact="currentContact"
-    :assignee="assignee"
-    :inbox="inbox"
-    :selected="selected"
-    :is-active-chat="isActiveChat"
-    :show-assignee="showAssignee"
-    :show-inbox-name="showInboxName"
-    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
-    @select-conversation="onSelectConversation"
-    @de-select-conversation="onSelectConversation"
-    @click="onCardClick"
-    @contextmenu="openContextMenu"
-  />
-
-  <!-- Compact: All other cases (mobile OR isExpandedLayout=false) -->
-  <ConversationCardCompact
-    v-else
-    :chat="chat"
-    :current-contact="currentContact"
-    :assignee="assignee"
-    :inbox="inbox"
-    :selected="selected"
-    :is-active-chat="isActiveChat"
-    :compact="compact"
-    :show-assignee="showAssignee"
-    :show-inbox-name="showInboxName"
-    :hide-thumbnail="hideThumbnail"
-    :enable-selection="enableSelection"
-    :is-inbox-view="hasActiveInbox && !isPreviousConversations"
-    @select-conversation="onSelectConversation"
-    @click="onCardClick"
-    @contextmenu="openContextMenu"
-  />
-
-  <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="chat.unread_count > 0"
-      :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>
-</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-blue-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-label-small text-n-slate-11">
-      {{ inbox.name }}
-    </span>
-  </div>
-</template>

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

@@ -20,10 +20,10 @@ const showCopilotTab = computed(() =>
 
 const { uiSettings } = useUISettings();
 const isContactSidebarOpen = computed(
-  () => uiSettings.value.is_contact_sidebar_open || false
+  () => uiSettings.value.is_contact_sidebar_open
 );
 const isCopilotPanelOpen = computed(
-  () => uiSettings.value.is_copilot_panel_open || false
+  () => uiSettings.value.is_copilot_panel_open
 );
 
 const toggleConversationSidebarToggle = () => {
@@ -35,7 +35,7 @@ const toggleConversationSidebarToggle = () => {
 
 const handleConversationSidebarToggle = () => {
   updateUISettings({
-    is_contact_sidebar_open: !isContactSidebarOpen.value,
+    is_contact_sidebar_open: true,
     is_copilot_panel_open: false,
   });
 };
@@ -43,7 +43,7 @@ const handleConversationSidebarToggle = () => {
 const handleCopilotSidebarToggle = () => {
   updateUISettings({
     is_contact_sidebar_open: false,
-    is_copilot_panel_open: !isCopilotPanelOpen.value,
+    is_copilot_panel_open: true,
   });
 };
 

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

@@ -1,100 +0,0 @@
-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from '@chatwoot/utils';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-
-import SLAPopoverCard from './SLAPopoverCard.vue';
-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: () => ({}),
-  },
-  showExtendedInfo: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-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 slaEvents = computed(() => props.chat?.sla_events);
-const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
-const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
-
-const conversation = computed(() => useCamelCase(props.chat, { deep: true }));
-
-const showSlaPopoverCard = computed(
-  () => props.showExtendedInfo && slaEvents.value?.length > 0
-);
-
-const updateSlaStatus = () => {
-  slaStatus.value = evaluateSLAStatus({
-    appliedSla: appliedSLA.value || {},
-    chat: conversation.value,
-  });
-};
-
-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>
-    <SLAPopoverCard
-      v-if="showSlaPopoverCard"
-      :sla-missed-events="slaEvents"
-      class="start-0 md:start-auto md:end-0 top-7 hidden group-hover:flex"
-    />
-  </div>
-  <template v-else />
-</template>

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

@@ -1,36 +0,0 @@
-<script setup>
-import { format, fromUnixTime } from 'date-fns';
-
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  items: {
-    type: Array,
-    required: true,
-  },
-});
-const formatDate = timestamp =>
-  format(fromUnixTime(timestamp), 'MMM dd, yyyy, hh:mm a');
-</script>
-
-<template>
-  <div class="flex justify-between w-full">
-    <span
-      class="text-sm sticky top-0 h-fit font-normal tracking-[-0.6%] min-w-[140px] truncate text-n-slate-11"
-    >
-      {{ label }}
-    </span>
-    <div class="flex flex-col w-full gap-2">
-      <span
-        v-for="item in items"
-        :key="item.id"
-        class="text-sm font-normal text-n-slate-12 text-right tabular-nums"
-      >
-        {{ formatDate(item.created_at) }}
-      </span>
-      <slot name="showMore" />
-    </div>
-  </div>
-</template>

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

@@ -1,86 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-
-import wootConstants from 'dashboard/constants/globals';
-import SLAEventItem from './SLAEventItem.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  slaMissedEvents: {
-    type: Array,
-    required: true,
-  },
-});
-
-const { SLA_MISS_TYPES } = wootConstants;
-
-const shouldShowAllNrts = ref(false);
-
-const frtMisses = computed(() =>
-  props.slaMissedEvents.filter(
-    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.FRT
-  )
-);
-const nrtMisses = computed(() => {
-  const missedEvents = props.slaMissedEvents.filter(
-    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.NRT
-  );
-  return shouldShowAllNrts.value ? missedEvents : missedEvents.slice(0, 6);
-});
-const rtMisses = computed(() =>
-  props.slaMissedEvents.filter(
-    slaEvent => slaEvent.event_type === SLA_MISS_TYPES.RT
-  )
-);
-
-const shouldShowMoreNRTButton = computed(() => nrtMisses.value.length > 6);
-const toggleShowAllNRT = () => {
-  shouldShowAllNrts.value = !shouldShowAllNrts.value;
-};
-</script>
-
-<template>
-  <div
-    class="absolute flex flex-col items-start border-n-strong bg-n-solid-3 w-96 backdrop-blur-[100px] px-6 py-5 z-50 shadow rounded-xl gap-4 max-h-96 overflow-auto"
-  >
-    <span class="text-sm font-medium text-n-slate-12">
-      {{ $t('SLA.EVENTS.TITLE') }}
-    </span>
-    <SLAEventItem
-      v-if="frtMisses.length"
-      :label="$t('SLA.EVENTS.FRT')"
-      :items="frtMisses"
-    />
-    <SLAEventItem
-      v-if="nrtMisses.length"
-      :label="$t('SLA.EVENTS.NRT')"
-      :items="nrtMisses"
-    >
-      <template #showMore>
-        <div
-          v-if="shouldShowMoreNRTButton"
-          class="flex flex-col items-end w-full"
-        >
-          <Button
-            link
-            xs
-            slate
-            class="hover:!no-underline"
-            :icon="!shouldShowAllNrts ? 'i-lucide-plus' : ''"
-            :label="
-              shouldShowAllNrts
-                ? $t('SLA.EVENTS.HIDE', { count: nrtMisses.length })
-                : $t('SLA.EVENTS.SHOW_MORE', { count: nrtMisses.length })
-            "
-            @click="toggleShowAllNRT"
-          />
-        </div>
-      </template>
-    </SLAEventItem>
-    <SLAEventItem
-      v-if="rtMisses.length"
-      :label="$t('SLA.EVENTS.RT')"
-      :items="rtMisses"
-    />
-  </div>
-</template>

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

@@ -28,7 +28,7 @@ const props = defineProps({
   medium: { type: String, default: '' },
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'executeCopilotAction']);
 
 const slots = useSlots();
 
@@ -113,6 +113,9 @@ watch(
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
+        @execute-copilot-action="
+          (...args) => emit('executeCopilotAction', ...args)
+        "
       />
       <div
         v-if="showCharacterCount || slots.actions"

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

@@ -58,18 +58,22 @@ const openArticle = id => {
   }
 };
 
-const onReorder = reorderedGroup => {
-  store.dispatch('articles/reorder', {
-    reorderedGroup,
-    portalSlug: route.params.portalSlug,
-  });
+const onReorder = async reorderedGroup => {
+  try {
+    await store.dispatch('articles/reorder', {
+      reorderedGroup,
+      portalSlug: route.params.portalSlug,
+    });
+  } catch {
+    useAlert(t('HELP_CENTER.REORDER_ARTICLE.API.ERROR_MESSAGE'));
+  }
 };
 
 const onDragEnd = () => {
-  // Reuse existing positions to maintain order within the current group
+  // Collect and sort existing positions, falling back to index+1 for null/0 values
   const sortedArticlePositions = localArticles.value
-    .map(article => article.position)
-    .sort((a, b) => a - b); // Use custom sort to handle numeric values correctly
+    .map((article, index) => article.position || index + 1)
+    .sort((a, b) => a - b);
 
   const orderedArticles = localArticles.value.map(article => article.id);
 

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

@@ -98,6 +98,17 @@ const handleAction = ({ action, id, category: categoryData }) => {
     deleteCategory(categoryData);
   }
 };
+
+const reorderCategories = async reorderedGroup => {
+  try {
+    await store.dispatch('categories/reorder', {
+      portalSlug: route.params.portalSlug,
+      reorderedGroup,
+    });
+  } catch {
+    useAlert(t('HELP_CENTER.REORDER_CATEGORY.API.ERROR_MESSAGE'));
+  }
+};
 </script>
 
 <template>
@@ -122,6 +133,7 @@ const handleAction = ({ action, id, category: categoryData }) => {
         :categories="categories"
         @click="openCategoryArticles"
         @action="handleAction"
+        @reorder="reorderCategories"
       />
       <CategoryEmptyState
         v-else

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

@@ -1,14 +1,22 @@
 <script setup>
+import { computed, ref, watch } from 'vue';
+import Draggable from 'vuedraggable';
 import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
 
-defineProps({
+const props = defineProps({
   categories: {
     type: Array,
     required: true,
   },
 });
 
-const emit = defineEmits(['click', 'action']);
+const emit = defineEmits(['click', 'action', 'reorder']);
+
+const localCategories = ref(props.categories);
+
+const dragEnabled = computed(() => {
+  return localCategories.value?.length > 1;
+});
 
 const handleClick = slug => {
   emit('click', slug);
@@ -17,21 +25,57 @@ const handleClick = slug => {
 const handleAction = ({ action, value, id }, category) => {
   emit('action', { action, value, id, category });
 };
+
+const onDragEnd = () => {
+  // Collect and sort existing positions, falling back to index+1 for null/0 values
+  const sortedPositions = localCategories.value
+    .map((category, index) => category.position || index + 1)
+    .sort((a, b) => a - b);
+
+  const reorderedGroup = localCategories.value.reduce(
+    (obj, category, index) => {
+      obj[category.id] = sortedPositions[index];
+      return obj;
+    },
+    {}
+  );
+
+  emit('reorder', reorderedGroup);
+};
+
+watch(
+  () => props.categories,
+  newCategories => {
+    localCategories.value = newCategories;
+  },
+  { deep: true }
+);
 </script>
 
 <template>
-  <ul role="list" class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2">
-    <CategoryCard
-      v-for="category in categories"
-      :id="category.id"
-      :key="category.id"
-      :title="category.name"
-      :icon="category.icon"
-      :description="category.description"
-      :articles-count="category.meta.articles_count || 0"
-      :slug="category.slug"
-      @click="handleClick(category.slug)"
-      @action="handleAction($event, category)"
-    />
-  </ul>
+  <Draggable
+    v-model="localCategories"
+    :disabled="!dragEnabled"
+    item-key="id"
+    tag="ul"
+    role="list"
+    class="grid w-full h-full grid-cols-1 gap-4 md:grid-cols-2"
+    @end="onDragEnd"
+  >
+    <template #item="{ element }">
+      <li class="list-none">
+        <CategoryCard
+          :id="element.id"
+          :title="element.name"
+          :icon="element.icon"
+          :description="element.description"
+          :articles-count="element.meta?.articles_count || 0"
+          :slug="element.slug"
+          :class="{ 'cursor-grab': dragEnabled }"
+          @click="handleClick(element.slug)"
+          @action="handleAction($event, element)"
+        />
+      </li>
+    </template>
+  </Draggable>
 </template>

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

@@ -12,7 +12,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
-  searchContacts,
+  createContactSearcher,
   createNewContact,
   fetchContactableInboxes,
   processContactableInboxes,
@@ -39,6 +39,7 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
+const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
 const { width: windowWidth } = useWindowSize();
@@ -107,15 +108,17 @@ const onContactSearch = debounce(
     isSearching.value = true;
     contacts.value = [];
     try {
-      contacts.value = await searchContacts(query);
+      const results = await searchContacts(query);
+      // null means the request was aborted (a newer search is in-flight),
+      if (results === null) return;
+      contacts.value = results;
       isSearching.value = false;
     } catch (error) {
-      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
-    } finally {
       isSearching.value = false;
+      useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
     }
   },
-  300,
+  400,
   false
 );
 
@@ -138,6 +141,7 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
     contact = rest;
   }
   selectedContact.value = contact;
+  contacts.value = [];
   if (contact?.id) {
     isFetchingInboxes.value = true;
     try {
@@ -273,7 +277,7 @@ useKeyboardEvents(keyboardEvents);
       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: ['div.ProseMirror-prompt'] },
+      { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
     ]"
     class="relative"
     :class="{

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

@@ -15,6 +15,9 @@ import {
   prepareWhatsAppMessagePayload,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
 
+import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
 import ContactSelector from './ContactSelector.vue';
 import InboxSelector from './InboxSelector.vue';
 import EmailOptions from './EmailOptions.vue';
@@ -22,6 +25,7 @@ import MessageEditor from './MessageEditor.vue';
 import ActionButtons from './ActionButtons.vue';
 import InboxEmptyState from './InboxEmptyState.vue';
 import AttachmentPreviews from './AttachmentPreviews.vue';
+import CopilotReplyBottomPanel from 'dashboard/components/widgets/WootWriter/CopilotReplyBottomPanel.vue';
 
 const props = defineProps({
   contacts: { type: Array, default: () => [] },
@@ -42,6 +46,7 @@ const props = defineProps({
 
 const emit = defineEmits([
   'searchContacts',
+  'resetContactSearch',
   'discard',
   'updateSelectedContact',
   'updateTargetInbox',
@@ -51,6 +56,8 @@ const emit = defineEmits([
 
 const DEFAULT_FORMATTING = 'Context::Default';
 
+const copilot = useCopilotReply();
+
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -157,22 +164,8 @@ const isAnyDropdownActive = computed(() => {
 });
 
 const handleContactSearch = value => {
-  showContactsDropdown.value = true;
-  const query = typeof value === 'string' ? value.trim() : '';
-  const hasAlphabet = Array.from(query).some(char => {
-    const lower = char.toLowerCase();
-    const upper = char.toUpperCase();
-    return lower !== upper;
-  });
-  const isEmailLike = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(query);
-
-  const keys = ['email', 'phone_number', 'name'].filter(key => {
-    if (key === 'phone_number' && hasAlphabet) return false;
-    if (key === 'name' && isEmailLike) return false;
-    return true;
-  });
-
-  emit('searchContacts', { keys, query: value });
+  showContactsDropdown.value = value.trim().length > 1;
+  emit('searchContacts', value);
 };
 
 const handleDropdownUpdate = (type, value) => {
@@ -186,13 +179,17 @@ const handleDropdownUpdate = (type, value) => {
 };
 
 const searchCcEmails = value => {
-  showCcEmailsDropdown.value = true;
-  emit('searchContacts', { keys: ['email'], query: value });
+  showBccEmailsDropdown.value = false;
+  emit('resetContactSearch');
+  showCcEmailsDropdown.value = value.trim().length >= 2;
+  emit('searchContacts', value);
 };
 
 const searchBccEmails = value => {
-  showBccEmailsDropdown.value = true;
-  emit('searchContacts', { keys: ['email'], query: value });
+  showCcEmailsDropdown.value = false;
+  emit('resetContactSearch');
+  showBccEmailsDropdown.value = value.trim().length >= 2;
+  emit('searchContacts', value);
 };
 
 const setSelectedContact = async ({ value, action, ...rest }) => {
@@ -210,6 +207,7 @@ const stripMessageFormatting = channelType => {
 
 const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
   v$.value.$reset();
+  copilot.reset(false);
 
   // Strip unsupported formatting when changing the target inbox
   if (channelType) {
@@ -236,6 +234,7 @@ const removeSignatureFromMessage = () => {
 
 const removeTargetInbox = value => {
   v$.value.$reset();
+  copilot.reset(false);
   removeSignatureFromMessage();
 
   stripMessageFormatting(DEFAULT_FORMATTING);
@@ -245,6 +244,7 @@ const removeTargetInbox = value => {
 };
 
 const clearSelectedContact = () => {
+  copilot.reset(false);
   removeSignatureFromMessage();
   emit('clearSelectedContact');
   state.message = '';
@@ -276,6 +276,7 @@ const handleAttachFile = files => {
 };
 
 const clearForm = () => {
+  copilot.reset(false);
   Object.assign(state, {
     message: '',
     subject: '',
@@ -338,6 +339,24 @@ const shouldShowMessageEditor = computed(() => {
     !inboxTypes.value.isTwilioWhatsapp
   );
 });
+
+const isCopilotActive = computed(() => copilot.isActive?.value ?? false);
+
+const onSubmitCopilotReply = () => {
+  const acceptedMessage = copilot.accept();
+  state.message = acceptedMessage;
+};
+
+useKeyboardEvents({
+  '$mod+Enter': {
+    action: () => {
+      if (isCopilotActive.value && !copilot.isButtonDisabled.value) {
+        onSubmitCopilotReply();
+      }
+    },
+    allowOnFocusedInput: true,
+  },
+});
 </script>
 
 <template>
@@ -368,6 +387,7 @@ const shouldShowMessageEditor = computed(() => {
         :show-inboxes-dropdown="showInboxesDropdown"
         :contactable-inboxes-list="contactableInboxesList"
         :has-errors="validationStates.isInboxInvalid"
+        :is-fetching-inboxes="isFetchingInboxes"
         @update-inbox="removeTargetInbox"
         @toggle-dropdown="showInboxesDropdown = $event"
         @handle-inbox-action="handleInboxAction"
@@ -396,6 +416,7 @@ const shouldShowMessageEditor = computed(() => {
         :has-errors="validationStates.isMessageInvalid"
         :channel-type="inboxChannelType"
         :medium="targetInbox?.medium || ''"
+        :copilot="copilot"
       />
 
       <AttachmentPreviews
@@ -405,7 +426,15 @@ const shouldShowMessageEditor = computed(() => {
       />
     </div>
 
+    <CopilotReplyBottomPanel
+      v-if="isCopilotActive"
+      :is-generating-content="copilot.isButtonDisabled.value"
+      class="h-[3.25rem] !px-4 !py-2"
+      @submit="onSubmitCopilotReply"
+      @cancel="copilot.reset"
+    />
     <ActionButtons
+      v-else
       :attached-files="state.attachedFiles"
       :is-whatsapp-inbox="inboxTypes.isWhatsapp"
       :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"

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

@@ -44,14 +44,16 @@ const bccEmailsArray = computed(() =>
 );
 
 const contactEmailsList = computed(() => {
-  return props.contacts?.map(({ name, id, email }) => ({
-    id,
-    label: email,
-    email,
-    thumbnail: { name: name, src: '' },
-    value: id,
-    action: 'email',
-  }));
+  return props.contacts
+    ?.filter(contact => contact.email)
+    .map(({ name, id, email }) => ({
+      id,
+      label: email,
+      email,
+      thumbnail: { name: name, src: '' },
+      value: id,
+      action: 'email',
+    }));
 });
 
 // Handle updates from TagInput and convert array back to string
@@ -97,7 +99,6 @@ const inputClass = computed(() => {
           type="email"
           allow-create
           class="flex-1 min-h-7"
-          @focus="emit('updateDropdown', 'cc', true)"
           @input="emit('searchCcEmails', $event)"
           @on-click-outside="emit('updateDropdown', 'cc', false)"
           @update:model-value="handleCcUpdate"
@@ -131,7 +132,6 @@ const inputClass = computed(() => {
         allow-create
         class="flex-1 min-h-7"
         focus-on-mount
-        @focus="emit('updateDropdown', 'bcc', true)"
         @input="emit('searchBccEmails', $event)"
         @on-click-outside="emit('updateDropdown', 'bcc', false)"
         @update:model-value="handleBccUpdate"

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

@@ -1,9 +1,15 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>
+
 <template>
   <div
     class="flex items-center w-full px-4 py-3 dark:bg-n-amber-11/15 bg-n-amber-3"
   >
     <span class="text-sm dark:text-n-amber-11 text-n-amber-11">
-      {{ $t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
+      {{ t('COMPOSE_NEW_CONVERSATION.FORM.NO_INBOX_ALERT') }}
     </span>
   </div>
 </template>

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

@@ -6,6 +6,7 @@ import { generateLabelForContactableInboxesList } from 'dashboard/components-nex
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
 const props = defineProps({
   targetInbox: {
@@ -28,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isFetchingInboxes: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -71,7 +76,9 @@ const targetInboxLabel = computed(() => {
       v-on-click-outside="() => emit('toggleDropdown', false)"
       class="relative flex items-center h-7"
     >
+      <Spinner v-if="isFetchingInboxes" :size="16" />
       <Button
+        v-else
         :label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
         variant="link"
         size="sm"

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

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import CopilotEditorSection from 'dashboard/components/widgets/conversation/CopilotEditorSection.vue';
 
 const props = defineProps({
   hasErrors: { type: Boolean, default: false },
@@ -10,6 +11,7 @@ const props = defineProps({
   messageSignature: { type: String, default: '' },
   channelType: { type: String, default: '' },
   medium: { type: String, default: '' },
+  copilot: { type: Object, default: null },
 });
 
 const editorKey = computed(() => `editor-${props.channelType}-${props.medium}`);
@@ -20,29 +22,67 @@ const modelValue = defineModel({
   type: String,
   default: '',
 });
+
+const isCopilotActive = computed(() => props.copilot?.isActive?.value ?? false);
+
+const executeCopilotAction = (action, data) => {
+  if (props.copilot) {
+    props.copilot.execute(action, data);
+  }
+};
 </script>
 
 <template>
-  <div class="flex-1 h-full">
-    <Editor
-      v-model="modelValue"
-      :editor-key="editorKey"
-      :placeholder="
-        t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
-      "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[10rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
-      :class="
-        hasErrors
-          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
-          : ''
-      "
-      enable-variables
-      :show-character-count="false"
-      :signature="messageSignature"
-      allow-signature
-      :send-with-signature="sendWithSignature"
-      :channel-type="channelType"
-      :medium="medium"
-    />
+  <div class="flex-1 h-full px-4 py-4">
+    <Transition
+      mode="out-in"
+      enter-active-class="transition-all duration-300 ease-out"
+      enter-from-class="opacity-0 translate-y-2 scale-[0.98]"
+      enter-to-class="opacity-100 translate-y-0 scale-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="opacity-100 translate-y-0 scale-100"
+      leave-to-class="opacity-0 translate-y-2 scale-[0.98]"
+    >
+      <div
+        :key="copilot ? copilot.editorTransitionKey.value : 'rich'"
+        class="h-full"
+      >
+        <CopilotEditorSection
+          v-if="isCopilotActive"
+          :show-copilot-editor="copilot.showEditor.value"
+          :is-generating-content="copilot.isGenerating.value"
+          :generated-content="copilot.generatedContent.value"
+          class="!mb-0"
+          @focus="() => {}"
+          @blur="() => {}"
+          @clear-selection="() => {}"
+          @content-ready="copilot.setContentReady"
+          @send="copilot.sendFollowUp"
+        />
+        <Editor
+          v-else
+          v-model="modelValue"
+          :editor-key="editorKey"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+          "
+          class="[&>div]:!border-transparent [&>div]:px-0 [&>div]:py-0 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[12rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
+          :class="
+            hasErrors
+              ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+              : ''
+          "
+          enable-variables
+          enable-captain-tools
+          :show-character-count="false"
+          :signature="messageSignature"
+          allow-signature
+          :send-with-signature="sendWithSignature"
+          :channel-type="channelType"
+          :medium="medium"
+          @execute-copilot-action="executeCopilotAction"
+        />
+      </div>
+    </Transition>
   </div>
 </template>

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

@@ -176,38 +176,43 @@ export const prepareWhatsAppMessagePayload = ({
   };
 };
 
-export const generateContactQuery = ({ keys = ['email'], query }) => {
-  return {
-    payload: keys.map(key => {
-      const filterPayload = {
-        attribute_key: key,
-        filter_operator: 'contains',
-        values: [query],
-        attribute_model: 'standard',
-      };
-      if (keys.findIndex(k => k === key) !== keys.length - 1) {
-        filterPayload.query_operator = 'or';
-      }
-      return filterPayload;
-    }),
-  };
-};
-
 // API Calls
-export const searchContacts = async ({ keys, query }) => {
-  const {
-    data: { payload },
-  } = await ContactAPI.filter(
-    undefined,
-    'name',
-    generateContactQuery({ keys, query })
-  );
-  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
-  // Filter contacts that have either phone_number or email
-  const filteredPayload = camelCasedPayload?.filter(
-    contact => contact.phoneNumber || contact.email
-  );
-  return filteredPayload || [];
+const MIN_SEARCH_LENGTH = 2;
+
+export const createContactSearcher = () => {
+  let controller = null;
+
+  return async (query, { skipMinLength = false } = {}) => {
+    const trimmed = typeof query === 'string' ? query.trim() : '';
+
+    controller?.abort();
+
+    if (!trimmed || (!skipMinLength && trimmed.length < MIN_SEARCH_LENGTH))
+      return [];
+
+    controller = new AbortController();
+    const { signal } = controller;
+
+    try {
+      const {
+        data: { payload },
+      } = await ContactAPI.search(trimmed, 1, 'name', '', { signal });
+
+      const camelCasedPayload = camelcaseKeys(payload, { deep: true });
+      // Filter contacts that have either phone_number or email
+      const filteredPayload = camelCasedPayload?.filter(
+        contact => contact.phoneNumber || contact.email
+      );
+      return filteredPayload || [];
+    } catch (error) {
+      // Return null for aborted requests so callers can distinguish
+      // "request was cancelled" from "no results found"
+      if (error?.name === 'AbortError' || error?.name === 'CanceledError') {
+        return null;
+      }
+      throw error;
+    }
+  };
 };
 
 export const createNewContact = async input => {

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

@@ -336,72 +336,13 @@ describe('composeConversationHelper', () => {
     });
   });
 
-  describe('generateContactQuery', () => {
-    it('generates correct query structure for contact search', () => {
-      const query = 'test@example.com';
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [query],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
-        expected
-      );
-    });
-
-    it('handles empty query', () => {
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: [''],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(
-        helpers.generateContactQuery({ keys: ['email'], query: '' })
-      ).toEqual(expected);
-    });
-
-    it('handles mutliple keys', () => {
-      const expected = {
-        payload: [
-          {
-            attribute_key: 'email',
-            filter_operator: 'contains',
-            values: ['john'],
-            attribute_model: 'standard',
-            query_operator: 'or',
-          },
-          {
-            attribute_key: 'phone_number',
-            filter_operator: 'contains',
-            values: ['john'],
-            attribute_model: 'standard',
-          },
-        ],
-      };
-
-      expect(
-        helpers.generateContactQuery({
-          keys: ['email', 'phone_number'],
-          query: 'john',
-        })
-      ).toEqual(expected);
-    });
-  });
-
   describe('API calls', () => {
-    describe('searchContacts', () => {
+    describe('createContactSearcher', () => {
+      let searchContacts;
+      beforeEach(() => {
+        searchContacts = helpers.createContactSearcher();
+      });
+
       it('searches contacts and returns camelCase results', async () => {
         const mockPayload = [
           {
@@ -413,14 +354,11 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.filter.mockResolvedValue({
+        ContactAPI.search.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await helpers.searchContacts({
-          keys: ['email'],
-          query: 'john',
-        });
+        const result = await searchContacts('john');
 
         expect(result).toEqual([
           {
@@ -432,16 +370,56 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
-          payload: [
-            {
-              attribute_key: 'email',
-              filter_operator: 'contains',
-              values: ['john'],
-              attribute_model: 'standard',
-            },
-          ],
+        expect(ContactAPI.search).toHaveBeenCalledWith(
+          'john',
+          1,
+          'name',
+          '',
+          expect.objectContaining({ signal: expect.any(AbortSignal) })
+        );
+      });
+
+      it('returns empty array for queries shorter than 2 characters', async () => {
+        const result = await searchContacts('j');
+        expect(result).toEqual([]);
+        expect(ContactAPI.search).not.toHaveBeenCalled();
+      });
+
+      it('returns empty array for empty or whitespace-only queries', async () => {
+        expect(await searchContacts('')).toEqual([]);
+        expect(await searchContacts('  ')).toEqual([]);
+        expect(await searchContacts(null)).toEqual([]);
+        expect(ContactAPI.search).not.toHaveBeenCalled();
+      });
+
+      it('aborts previous in-flight request when a new search starts', async () => {
+        const mockPayload = [
+          { id: 1, name: 'Result', email: 'r@test.com', phone_number: null },
+        ];
+
+        let resolveFirst;
+        const firstCall = new Promise(resolve => {
+          resolveFirst = resolve;
         });
+        ContactAPI.search
+          .mockReturnValueOnce(firstCall)
+          .mockResolvedValueOnce({ data: { payload: mockPayload } });
+
+        // Start first search (will hang)
+        const first = searchContacts('alpha');
+        // Start second search (aborts first)
+        const second = searchContacts('beta');
+
+        // Resolve the first call with CanceledError (simulating axios abort)
+        const canceledError = new Error('canceled');
+        canceledError.name = 'CanceledError';
+        resolveFirst(Promise.reject(canceledError));
+
+        const [firstResult, secondResult] = await Promise.all([first, second]);
+        expect(firstResult).toBeNull();
+        expect(secondResult).toEqual([
+          { id: 1, name: 'Result', email: 'r@test.com', phoneNumber: null },
+        ]);
       });
 
       it('searches contacts and returns only contacts with email or phone number', async () => {
@@ -469,14 +447,11 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.filter.mockResolvedValue({
+        ContactAPI.search.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await helpers.searchContacts({
-          keys: ['email'],
-          query: 'john',
-        });
+        const result = await searchContacts('john');
 
         // Should only return contacts with either email or phone number
         expect(result).toEqual([
@@ -496,24 +471,21 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
-          payload: [
-            {
-              attribute_key: 'email',
-              filter_operator: 'contains',
-              values: ['john'],
-              attribute_model: 'standard',
-            },
-          ],
-        });
+        expect(ContactAPI.search).toHaveBeenCalledWith(
+          'john',
+          1,
+          'name',
+          '',
+          expect.objectContaining({ signal: expect.any(AbortSignal) })
+        );
       });
 
       it('handles empty search results', async () => {
-        ContactAPI.filter.mockResolvedValue({
+        ContactAPI.search.mockResolvedValue({
           data: { payload: [] },
         });
 
-        const result = await helpers.searchContacts('nonexistent');
+        const result = await searchContacts('nonexistent');
         expect(result).toEqual([]);
       });
 
@@ -536,11 +508,11 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.filter.mockResolvedValue({
+        ContactAPI.search.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await helpers.searchContacts('test');
+        const result = await searchContacts('test');
 
         expect(result).toEqual([
           {
@@ -562,6 +534,36 @@ describe('composeConversationHelper', () => {
       });
     });
 
+    describe('createContactSearcher isolation', () => {
+      it('creates isolated searcher instances that do not cancel each other', async () => {
+        const searcherA = helpers.createContactSearcher();
+        const searcherB = helpers.createContactSearcher();
+
+        const payloadA = [
+          { id: 1, name: 'Alice', email: 'a@test.com', phone_number: null },
+        ];
+        const payloadB = [
+          { id: 2, name: 'Bob', email: 'b@test.com', phone_number: null },
+        ];
+
+        ContactAPI.search
+          .mockResolvedValueOnce({ data: { payload: payloadA } })
+          .mockResolvedValueOnce({ data: { payload: payloadB } });
+
+        const [resultA, resultB] = await Promise.all([
+          searcherA('alice'),
+          searcherB('bob'),
+        ]);
+
+        expect(resultA).toEqual([
+          { id: 1, name: 'Alice', email: 'a@test.com', phoneNumber: null },
+        ]);
+        expect(resultB).toEqual([
+          { id: 2, name: 'Bob', email: 'b@test.com', phoneNumber: null },
+        ]);
+      });
+    });
+
     describe('createNewContact', () => {
       it('creates new contact with capitalized name', async () => {
         const mockContact = { id: 1, name: 'John', email: 'john@example.com' };

app/javascript/dashboard/components-next/dialog/Dialog.vue

@@ -96,6 +96,17 @@ const close = () => {
   isOpen.value = false;
 };
 
+// Only close if the close event originated from this dialog,
+// not from a child dialog (e.g. ProseMirror prompt) bubbling up.
+const handleDialogClose = e => e.target === dialogRef.value && close();
+
+// Only close on click-outside if this dialog is the topmost one.
+// If another dialog (e.g. ProseMirror prompt) is open on top, ignore.
+const handleClickOutside = () => {
+  const dialogs = document.querySelectorAll('dialog[open]');
+  if (dialogs[dialogs.length - 1] === dialogRef.value) close();
+};
+
 const confirm = () => {
   emit('confirm');
 };
@@ -113,9 +124,9 @@ defineExpose({ open, close });
         positionClass,
         overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
       ]"
-      @close="close"
+      @close.prevent="handleDialogClose"
     >
-      <OnClickOutside @trigger="close">
+      <OnClickOutside @trigger="handleClickOutside">
         <form
           ref="dialogContentRef"
           class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"

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

@@ -11,13 +11,7 @@ const props = defineProps({
     type: Array,
     default: () => [],
     validator: value => {
-      return value.every(
-        item =>
-          item.action &&
-          item.value !== undefined &&
-          item.value !== null &&
-          item.label
-      );
+      return value.every(item => item.action && item.value && item.label);
     },
   },
   menuSections: {
@@ -28,10 +22,6 @@ const props = defineProps({
     type: Number,
     default: 20,
   },
-  roundedThumbnail: {
-    type: Boolean,
-    default: true,
-  },
   showSearch: {
     type: Boolean,
     default: false,
@@ -52,17 +42,9 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  emptyStateMessage: {
-    type: String,
-    default: 'DROPDOWN_MENU.EMPTY_STATE',
-  },
 });
 
-const emit = defineEmits(['action', 'search', 'empty']);
+const emit = defineEmits(['action', 'search']);
 
 const { t } = useI18n();
 
@@ -114,13 +96,9 @@ const filteredMenuSections = computed(() => {
 });
 
 const handleSearchInput = event => {
-  emit('search', event.target.value);
-
-  const isEmpty = hasSections.value
-    ? filteredMenuSections.value.length === 0
-    : filteredMenuItems.value.length === 0;
-
-  if (isEmpty) emit('empty');
+  if (props.disableLocalFiltering) {
+    emit('search', event.target.value);
+  }
 };
 
 const handleAction = item => {
@@ -212,27 +190,22 @@ onMounted(() => {
               :name="item.thumbnail.name"
               :src="item.thumbnail.src"
               :size="thumbnailSize"
-              :rounded-full="roundedThumbnail"
-            />
-          </slot>
-          <slot name="icon" :item="item">
-            <Icon
-              v-if="item.icon"
-              :icon="item.icon"
-              class="flex-shrink-0 size-3.5"
+              rounded-full
             />
           </slot>
+          <Icon
+            v-if="item.icon"
+            :icon="item.icon"
+            class="flex-shrink-0 size-3.5"
+          />
           <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-          <slot name="label" :item="item">
-            <span
-              v-if="item.label"
-              class="min-w-0 text-sm font-420 truncate"
-              :class="labelClass"
-            >
-              {{ item.label }}
-            </span>
-          </slot>
-          <slot name="trailing-icon" :item="item" />
+          <span
+            v-if="item.label"
+            class="min-w-0 text-sm truncate"
+            :class="labelClass"
+          >
+            {{ item.label }}
+          </span>
         </button>
         <div
           v-if="sectionIndex < filteredMenuSections.length - 1"
@@ -241,9 +214,6 @@ onMounted(() => {
       </div>
     </template>
     <template v-else>
-      <div v-if="isLoading" class="flex items-center justify-center py-2">
-        <Spinner :size="24" />
-      </div>
       <button
         v-for="(item, index) in filteredMenuItems"
         :key="index"
@@ -263,27 +233,22 @@ onMounted(() => {
             :name="item.thumbnail.name"
             :src="item.thumbnail.src"
             :size="thumbnailSize"
-            :rounded-full="roundedThumbnail"
-          />
-        </slot>
-        <slot name="icon" :item="item">
-          <Icon
-            v-if="item.icon"
-            :icon="item.icon"
-            class="flex-shrink-0 size-3.5"
+            rounded-full
           />
         </slot>
+        <Icon
+          v-if="item.icon"
+          :icon="item.icon"
+          class="flex-shrink-0 size-3.5"
+        />
         <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-        <slot name="label" :item="item">
-          <span
-            v-if="item.label"
-            class="min-w-0 text-sm font-420 truncate"
-            :class="labelClass"
-          >
-            {{ item.label }}
-          </span>
-        </slot>
-        <slot name="trailing-icon" :item="item" />
+        <span
+          v-if="item.label"
+          class="min-w-0 text-sm truncate"
+          :class="labelClass"
+        >
+          {{ item.label }}
+        </span>
       </button>
     </template>
     <div
@@ -293,9 +258,7 @@ onMounted(() => {
       {{
         isSearching
           ? t('DROPDOWN_MENU.SEARCHING')
-          : searchQuery
-            ? t('DROPDOWN_MENU.EMPTY_STATE')
-            : t(emptyStateMessage)
+          : t('DROPDOWN_MENU.EMPTY_STATE')
       }}
     </div>
     <slot name="footer" />

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

@@ -39,45 +39,38 @@ const formatFilterValue = value => {
 
   // Case 2: array → map each item, use name if present, else the item itself
   if (Array.isArray(value)) {
-    // Empty array
-    if (value.length === 0) return '';
     return value.map(item => item?.name ?? item).join(', ');
   }
 
-  // Case 3: empty object
-  if (typeof value === 'object' && Object.keys(value).length === 0) {
-    return '';
-  }
-
-  // Case 4: object with a "name" property → return name
-  // Case 5: primitive (string, number, etc.) → return as is
+  // Case 3: object with a "name" property → return name
+  // Case 4: primitive (string, number, etc.) → return as is
   return value?.name ?? value;
 };
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center w-full gap-x-1.5 gap-y-2 mx-auto">
+  <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
     <template v-for="(filter, index) in appliedFilters" :key="index">
       <div
         v-if="index < maxVisibleFilters"
-        class="inline-flex items-center gap-1.5 h-7"
+        class="inline-flex items-center gap-2 h-7"
       >
         <div
-          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg hover:bg-n-solid-2 max-w-72 border-n-weak hover:cursor-pointer bg-n-button-color"
+          class="flex items-center h-full min-w-0 gap-1 px-2 py-1 text-xs border rounded-lg hover:bg-n-solid-2 max-w-72 border-n-weak hover:cursor-pointer"
           @click="emit('openFilter')"
         >
           <span
-            class="lowercase whitespace-nowrap font-440 first-letter:capitalize text-n-slate-12"
+            class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
           >
             {{ replaceUnderscoreWithSpace(filter.attributeKey) }}
           </span>
-          <span class="px-1 text-xs text-n-slate-11 font-440 whitespace-nowrap">
+          <span class="px-1 text-xs text-n-slate-10 whitespace-nowrap">
             {{ formatOperatorLabel(filter.filterOperator) }}
           </span>
           <span
-            v-if="formatFilterValue(filter.values)"
+            v-if="filter.values"
             :title="formatFilterValue(filter.values)"
-            class="lowercase truncate text-n-slate-12 font-440"
+            class="lowercase truncate text-n-slate-12"
             :class="{
               'first-letter:capitalize': shouldCapitalizeFirstLetter(
                 filter.attributeKey
@@ -93,7 +86,7 @@ const formatFilterValue = value => {
           "
         >
           <span
-            class="content-center h-full px-1 text-xs font-440 uppercase rounded-lg text-n-slate-11"
+            class="content-center h-full px-1 text-xs font-medium uppercase rounded-lg text-n-slate-10"
           >
             {{ filter.queryOperator }}
           </span>
@@ -102,7 +95,7 @@ const formatFilterValue = value => {
     </template>
     <div
       v-if="appliedFilters.length > maxVisibleFilters"
-      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 hover:text-n-slate-11 h-7 hover:cursor-pointer font-440"
+      class="inline-flex items-center content-center px-1 text-xs rounded-lg text-n-slate-10 hover:text-n-slate-11 h-7 hover:cursor-pointer"
       @click="emit('openFilter')"
     >
       {{ moreFiltersLabel }}
@@ -112,10 +105,9 @@ const formatFilterValue = value => {
       v-if="showClearButton"
       :label="clearButtonLabel"
       size="xs"
-      class="!px-1 hover:!no-underline"
-      link
+      class="!px-1"
+      variant="ghost"
       @click="emit('clearFilters')"
     />
-    <slot name="actions" />
   </div>
 </template>

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

@@ -1,14 +1,12 @@
 <script setup>
 import { useTemplateRef, onBeforeUnmount, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useBreakpoints } from '@vueuse/core';
 import { useTrack } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import { vOnClickOutside } from '@vueuse/components';
 import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { useConversationFilterContext } from './provider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
-import wootConstants from 'dashboard/constants/globals';
 
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -44,13 +42,6 @@ const DEFAULT_FILTER = {
 const { t } = useI18n();
 const store = useStore();
 
-const breakpoints = useBreakpoints({
-  mobile: wootConstants.SMALL_SCREEN_BREAKPOINT,
-});
-
-const isSmallScreen = breakpoints.smaller('mobile');
-const viewInModal = computed(() => isSmallScreen.value);
-
 const resetFilter = () => {
   filters.value = [{ ...DEFAULT_FILTER }];
 };
@@ -113,80 +104,69 @@ const outsideClickHandler = [
 
 <template>
   <div
-    :class="{
-      'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start justify-center inset-0 px-2 pt-14 pb-8 overflow-y-auto overflow-x-hidden':
-        viewInModal,
-    }"
-    @click.self="viewInModal && emit('close')"
+    v-on-click-outside="outsideClickHandler"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
   >
-    <div
-      v-on-click-outside="viewInModal ? [] : outsideClickHandler"
-      class="z-40 max-w-3xl xl:w-[750px] w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl py-6 grid gap-6"
-      :class="{ 'overflow-x-auto': viewInModal }"
-    >
-      <h3 class="text-base font-medium leading-6 text-n-slate-12 px-6">
-        {{ filterModalHeaderTitle }}
-      </h3>
-      <div v-if="props.isFolderView" class="px-6">
-        <div class="border-b border-n-strong pb-6">
-          <Input
-            v-model="folderNameLocal"
-            :label="t('FILTER.FOLDER_LABEL')"
-            :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
-          />
-        </div>
+    <h3 class="text-base font-medium leading-6 text-n-slate-12">
+      {{ filterModalHeaderTitle }}
+    </h3>
+    <div v-if="props.isFolderView">
+      <div class="border-b border-n-weak pb-6">
+        <Input
+          v-model="folderNameLocal"
+          :label="t('FILTER.FOLDER_LABEL')"
+          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
+        />
       </div>
-      <ul class="grid gap-4 list-none px-6">
-        <template v-for="(filter, index) in filters" :key="filter.id">
-          <ConditionRow
-            v-if="index === 0"
-            ref="conditionsRef"
-            :key="`filter-${filter.attributeKey}-0`"
-            v-model:attribute-key="filter.attributeKey"
-            v-model:filter-operator="filter.filterOperator"
-            v-model:values="filter.values"
-            :filter-types="filterTypes"
-            :show-query-operator="false"
-            @remove="removeFilter(index)"
-          />
-          <ConditionRow
-            v-else
-            :key="`filter-${filter.attributeKey}-${index}`"
-            ref="conditionsRef"
-            v-model:attribute-key="filter.attributeKey"
-            v-model:filter-operator="filter.filterOperator"
-            v-model:query-operator="filters[index - 1].queryOperator"
-            v-model:values="filter.values"
-            show-query-operator
-            :filter-types="filterTypes"
-            @remove="removeFilter(index)"
-          />
-        </template>
-      </ul>
-      <div
-        class="flex gap-2 justify-between ltr:pl-3 ltr:pr-6 rtl:pr-3 rtl:pl-6"
-      >
-        <Button sm ghost blue class="px-0" @click="addFilter">
-          {{ $t('FILTER.ADD_NEW_FILTER') }}
+    </div>
+    <ul class="grid gap-4 list-none">
+      <template v-for="(filter, index) in filters" :key="filter.id">
+        <ConditionRow
+          v-if="index === 0"
+          ref="conditionsRef"
+          :key="`filter-${filter.attributeKey}-0`"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:values="filter.values"
+          :filter-types="filterTypes"
+          :show-query-operator="false"
+          @remove="removeFilter(index)"
+        />
+        <ConditionRow
+          v-else
+          :key="`filter-${filter.attributeKey}-${index}`"
+          ref="conditionsRef"
+          v-model:attribute-key="filter.attributeKey"
+          v-model:filter-operator="filter.filterOperator"
+          v-model:query-operator="filters[index - 1].queryOperator"
+          v-model:values="filter.values"
+          show-query-operator
+          :filter-types="filterTypes"
+          @remove="removeFilter(index)"
+        />
+      </template>
+    </ul>
+    <div class="flex gap-2 justify-between">
+      <Button sm ghost blue @click="addFilter">
+        {{ $t('FILTER.ADD_NEW_FILTER') }}
+      </Button>
+      <div class="flex gap-2">
+        <Button sm faded slate @click="resetFilter">
+          {{ t('FILTER.CLEAR_BUTTON_LABEL') }}
+        </Button>
+        <Button
+          v-if="isFolderView"
+          sm
+          solid
+          blue
+          :disabled="!folderNameLocal"
+          @click="updateSavedCustomViews"
+        >
+          {{ t('FILTER.UPDATE_BUTTON_LABEL') }}
+        </Button>
+        <Button v-else sm solid blue @click="validateAndSubmit">
+          {{ t('FILTER.SUBMIT_BUTTON_LABEL') }}
         </Button>
-        <div class="flex gap-2">
-          <Button sm solid slate @click="resetFilter">
-            {{ t('FILTER.CLEAR_BUTTON_LABEL') }}
-          </Button>
-          <Button
-            v-if="isFolderView"
-            sm
-            solid
-            blue
-            :disabled="!folderNameLocal"
-            @click="updateSavedCustomViews"
-          >
-            {{ t('FILTER.UPDATE_BUTTON_LABEL') }}
-          </Button>
-          <Button v-else sm solid blue @click="validateAndSubmit">
-            {{ t('FILTER.SUBMIT_BUTTON_LABEL') }}
-          </Button>
-        </div>
       </div>
     </div>
   </div>

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

@@ -108,10 +108,8 @@ export default {
       <NextInput
         v-model="name"
         :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-        :message="
-          v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
-        "
-        :message-type="v$.name.$error ? 'error' : 'info'"
+        :message="v$.name.$error && $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE')"
+        :message-type="v$.name.$error && 'error'"
         @blur="v$.name.$touch"
       />
       <div class="flex flex-row justify-end w-full gap-2">

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

@@ -95,7 +95,7 @@ const toggleOption = option => {
     <template #trigger="{ toggle }">
       <button
         v-if="hasItems"
-        class="bg-n-button-color outline outline-1 outline-n-container py-2 rounded-lg h-8 flex items-center px-0"
+        class="bg-n-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
         @click="toggle"
       >
         <div
@@ -119,13 +119,11 @@ const toggleOption = option => {
           <Icon icon="i-lucide-plus" />
         </div>
       </button>
-      <Button v-else sm slate solid @click="toggle">
+      <Button v-else sm slate faded @click="toggle">
         <template #icon>
-          <Icon icon="i-lucide-plus" class="text-n-slate-11 flex-shrink-0" />
+          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
         </template>
-        <span class="text-n-slate-11 truncate">{{
-          t('COMBOBOX.PLACEHOLDER')
-        }}</span>
+        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
       </Button>
     </template>
     <DropdownBody class="top-0 min-w-48 z-50" strong>

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

@@ -129,6 +129,7 @@ const props = defineProps({
   inReplyTo: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
   isEmailInbox: { type: Boolean, default: false },
   private: { type: Boolean, default: false },
+  additionalAttributes: { type: Object, default: () => ({}) }, // eslint-disable-line vue/no-unused-properties
   sender: { type: Object, default: null },
   senderId: { type: Number, default: null },
   senderType: { type: String, default: null },
@@ -172,7 +173,10 @@ const variant = computed(() => {
     return MESSAGE_VARIANTS.AGENT;
   }
 
-  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
+  const isBot =
+    props.sender?.type === SENDER_TYPES.AGENT_BOT ||
+    props.senderType === SENDER_TYPES.AGENT_BOT ||
+    (!props.sender && !props.additionalAttributes?.senderName);
   if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
     return MESSAGE_VARIANTS.BOT;
   }
@@ -450,12 +454,13 @@ const avatarInfo = computed(() => {
     };
   }
 
-  // If no sender, return bot info
+  // If no sender, check for Slack (or other integration) sender info
   if (!props.sender) {
-    return {
-      name: t('CONVERSATION.BOT'),
-      src: '',
-    };
+    const { senderName, senderAvatarUrl } = props.additionalAttributes || {};
+    if (senderName) {
+      return { name: senderName, src: senderAvatarUrl ?? '' };
+    }
+    return { name: t('CONVERSATION.BOT'), src: '' };
   }
 
   const { sender } = props;

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

@@ -81,6 +81,7 @@ const isDelivered = computed(() => {
     isATwilioChannel.value ||
     isASmsInbox.value ||
     isAFacebookInbox.value ||
+    isAnInstagramChannel.value ||
     isATiktokChannel.value
   ) {
     return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;

app/javascript/dashboard/components-next/radioCard/RadioCard.story.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import RadioCard from '../RadioCard.vue';
+import RadioCard from './RadioCard.vue';
 
 const selectedOption = ref('round_robin');
 

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -72,7 +72,7 @@ const isNewTagInValidType = computed(() =>
 
 const showInput = computed(() =>
   props.mode === MODE.SINGLE
-    ? isFocused.value && !tags.value.length
+    ? !tags.value.length
     : isFocused.value || !tags.value.length
 );
 

app/javascript/dashboard/components/ChatList.vue

@@ -1,32 +1,69 @@
 <script setup>
-import { ref, provide, computed, watch, onMounted, defineEmits } 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 { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import {
   useMapGetter,
   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 ChatListFilters from './ChatListFilters.vue';
-import ConversationActiveFiltersPreview from './widgets/conversation/ConversationActiveFiltersPreview.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 { useI18n } from 'vue-i18n';
-import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
-import { useEmitter } from 'dashboard/composables/emitter';
+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';
+import { useI18n } from 'vue-i18n';
+import {
+  useCamelCase,
+  useSnakeCase,
+} from 'dashboard/composables/useTransformKeys';
+import { useEmitter } from 'dashboard/composables/emitter';
+import { useConversationRequiredAttributes } from 'dashboard/composables/useConversationRequiredAttributes';
+
 import { emitter } from 'shared/helpers/mitt';
+
 import wootConstants from 'dashboard/constants/globals';
+import advancedFilterOptions from './widgets/conversation/advancedFilterItems';
 import filterQueryGenerator from '../helper/filterQueryGenerator.js';
+import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
+import countries from 'shared/constants/countries';
+import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
+import { conversationListPageURL } from '../helper/URLHelper';
+import {
+  isOnMentionsView,
+  isOnUnattendedView,
+} from '../store/modules/conversations/helpers/actionHelpers';
 import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
 import { matchesFilters } from '../store/modules/conversations/helpers/filterHelpers';
+import { CONVERSATION_EVENTS } from '../helper/AnalyticsHelper/events';
 import { ASSIGNEE_TYPE_TAB_PERMISSIONS } from 'dashboard/constants/permissions.js';
 
 const props = defineProps({
@@ -42,15 +79,34 @@ const props = defineProps({
 const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
-const store = useStore();
 const router = useRouter();
+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);
 const activeSortBy = ref(wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC);
+const showAdvancedFilters = ref(false);
+// chatsOnView is to store the chats that are currently visible on the screen,
+// which mirrors the conversationList.
 const chatsOnView = ref([]);
+const foldersQuery = ref({});
+const showAddFoldersModal = ref(false);
+const showDeleteFoldersModal = ref(false);
 const isContextMenuOpen = ref(false);
-const chatListFiltersRef = ref(null);
+const appliedFilter = ref([]);
+const advancedFilterTypes = ref(
+  advancedFilterOptions.map(filter => ({
+    ...filter,
+    attributeName: t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
+  }))
+);
 
 const currentUser = useMapGetter('getCurrentUser');
 const chatLists = useMapGetter('getFilteredConversations');
@@ -61,10 +117,18 @@ const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
 const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const getTeamFn = useMapGetter('teams/getTeam');
 const folders = useMapGetter('customViews/getConversationCustomViews');
+const agentList = useMapGetter('agents/getAgents');
+const teamsList = useMapGetter('teams/getTeams');
+const inboxesList = useMapGetter('inboxes/getInboxes');
+const campaigns = useMapGetter('campaigns/getAllCampaigns');
+const labels = useMapGetter('labels/getLabels');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+// We can't useFunctionGetter here since it needs to be called on setup?
+const getTeamFn = useMapGetter('teams/getTeam');
+const getConversationById = useMapGetter('getConversationById');
 
+useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -73,28 +137,57 @@ const {
   selectAllConversations,
   resetBulkActions,
   isConversationSelected,
+  onAssignAgent,
+  onAssignLabels,
+  onRemoveLabels,
+  onAssignTeamsForBulk,
+  onUpdateConversations,
 } = useBulkActions();
 
+const {
+  initializeStatusAndAssigneeFilterToModal,
+  initializeInboxTeamAndLabelFilterToModal,
+} = useFilter({
+  filteri18nKey: 'FILTER',
+  attributeModel: 'conversation_attribute',
+});
+
+const { checkMissingAttributes } = useConversationRequiredAttributes();
+
+// computed
+
 const hasAppliedFilters = computed(() => {
   return appliedFilters.value.length !== 0;
 });
 
-const hasActiveFolders = computed(() => {
-  return Boolean(props.foldersId !== 0);
-});
-
 const activeFolder = computed(() => {
-  return chatListFiltersRef.value?.activeFolder;
+  if (props.foldersId) {
+    const activeView = folders.value.filter(
+      view => view.id === Number(props.foldersId)
+    );
+    const [firstValue] = activeView;
+    return firstValue;
+  }
+  return undefined;
 });
 
-const isFilterModalOpen = computed(() => {
-  return chatListFiltersRef.value?.showAdvancedFilters ?? false;
+const activeFolderName = computed(() => {
+  return activeFolder.value?.name;
+});
+
+const hasActiveFolders = computed(() => {
+  return Boolean(activeFolder.value && props.foldersId !== 0);
 });
 
 const hasAppliedFiltersOrActiveFolders = computed(() => {
   return hasAppliedFilters.value || hasActiveFolders.value;
 });
 
+const currentUserDetails = computed(() => {
+  const { id, name } = currentUser.value;
+  return { id, name };
+});
+
 const userPermissions = computed(() => {
   return getUserPermissions(currentUser.value, currentAccountId.value);
 });
@@ -138,6 +231,11 @@ const hasCurrentPageEndReached = useFunctionGetter(
   currentPageFilterKey
 );
 
+const conversationCustomAttributes = useFunctionGetter(
+  'attributes/getAttributesByModel',
+  'conversation_attribute'
+);
+
 const activeAssigneeTabCount = computed(() => {
   const count = assigneeTabItems.value.find(
     item => item.key === activeAssigneeTab.value
@@ -207,7 +305,7 @@ const pageTitle = computed(() => {
   if (props.conversationType === 'unattended') {
     return t('CHAT_LIST.UNATTENDED_HEADING');
   }
-  if (hasActiveFolders.value && activeFolder.value?.name) {
+  if (hasActiveFolders.value) {
     return activeFolder.value.name;
   }
   return t('CHAT_LIST.TAB_HEADING');
@@ -229,7 +327,7 @@ const conversationList = computed(() => {
     localConversationList = [...chatLists.value];
   }
 
-  if (activeFolder.value?.query?.payload) {
+  if (activeFolder.value) {
     const { payload } = activeFolder.value.query;
     localConversationList = localConversationList.filter(conversation => {
       return matchesFilters(conversation, payload);
@@ -240,7 +338,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return !!(
+  return (
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -277,25 +375,176 @@ function emitConversationLoaded() {
 }
 
 function fetchFilteredConversations(payload) {
-  const transformedPayload = useSnakeCase(payload);
+  payload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
-      queryData: filterQueryGenerator(transformedPayload),
+      queryData: filterQueryGenerator(payload),
+      page,
+    })
+    .then(emitConversationLoaded);
+
+  showAdvancedFilters.value = false;
+}
+
+function fetchSavedFilteredConversations(payload) {
+  payload = useSnakeCase(payload);
+  let page = currentFiltersPage.value + 1;
+  store
+    .dispatch('fetchFilteredConversations', {
+      queryData: payload,
       page,
     })
     .then(emitConversationLoaded);
 }
 
-function fetchSavedFilteredConversations(payload) {
+function onApplyFilter(payload) {
+  payload = useSnakeCase(payload);
+  resetBulkActions();
+  foldersQuery.value = filterQueryGenerator(payload);
+  store.dispatch('conversationPage/reset');
+  store.dispatch('emptyAllConversations');
+  fetchFilteredConversations(payload);
+}
+
+function closeAdvanceFiltersModal() {
+  showAdvancedFilters.value = false;
+  appliedFilter.value = [];
+}
+
+function onUpdateSavedFilter(payload, folderName) {
   const transformedPayload = useSnakeCase(payload);
-  let page = currentFiltersPage.value + 1;
-  store
-    .dispatch('fetchFilteredConversations', {
-      queryData: transformedPayload,
-      page,
-    })
-    .then(emitConversationLoaded);
+  const payloadData = {
+    ...unref(activeFolder),
+    name: unref(folderName),
+    query: filterQueryGenerator(transformedPayload),
+  };
+  store.dispatch('customViews/update', payloadData);
+  closeAdvanceFiltersModal();
+}
+
+function onClickOpenAddFoldersModal() {
+  showAddFoldersModal.value = true;
+}
+
+function onCloseAddFoldersModal() {
+  showAddFoldersModal.value = false;
+}
+
+function onClickOpenDeleteFoldersModal() {
+  showDeleteFoldersModal.value = true;
+}
+
+function onCloseDeleteFoldersModal() {
+  showDeleteFoldersModal.value = false;
+}
+
+function setParamsForEditFolderModal() {
+  // Here we are setting the params for edit folder modal to show the existing values.
+
+  // For agent, team, inboxes,and campaigns we get only the id's from the query.
+  // So we are mapping the id's to the actual values.
+
+  // For labels we get the name of the label from the query.
+  // If we delete the label from the label list then we will not be able to show the label name.
+
+  // For custom attributes we get only attribute key.
+  // So we are mapping it to find the input type of the attribute to show in the edit folder modal.
+  return {
+    agents: agentList.value,
+    teams: teamsList.value,
+    inboxes: inboxesList.value,
+    labels: labels.value,
+    campaigns: campaigns.value,
+    languages: languages,
+    countries: countries,
+    priority: [
+      { id: 'low', name: t('CONVERSATION.PRIORITY.OPTIONS.LOW') },
+      { id: 'medium', name: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM') },
+      { id: 'high', name: t('CONVERSATION.PRIORITY.OPTIONS.HIGH') },
+      { id: 'urgent', name: t('CONVERSATION.PRIORITY.OPTIONS.URGENT') },
+    ],
+    filterTypes: advancedFilterTypes.value,
+    allCustomAttributes: conversationCustomAttributes.value,
+  };
+}
+
+function initializeExistingFilterToModal() {
+  const statusFilter = initializeStatusAndAssigneeFilterToModal(
+    activeStatus.value,
+    currentUserDetails.value,
+    activeAssigneeTab.value
+  );
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
+  if (statusFilter) {
+    appliedFilter.value = [...appliedFilter.value, useCamelCase(statusFilter)];
+  }
+
+  // TODO: Remove the usage of useCamelCase after migrating useFilter to camelcase
+  const otherFilters = initializeInboxTeamAndLabelFilterToModal(
+    props.conversationInbox,
+    inbox.value,
+    props.teamId,
+    activeTeam.value,
+    props.label
+  ).map(useCamelCase);
+
+  appliedFilter.value = [...appliedFilter.value, ...otherFilters];
+}
+
+function initializeFolderToFilterModal(newActiveFolder) {
+  // Here we are setting the params for edit folder modal.
+  //  To show the existing values. when we click on edit folder button.
+
+  // Here we get the query from the active folder.
+  // And we are mapping the query to the actual values.
+  // To show in the edit folder modal by the help of generateValuesForEditCustomViews helper.
+  const query = unref(newActiveFolder)?.query?.payload;
+  if (!Array.isArray(query)) return;
+
+  const newFilters = query.map(filter => {
+    const transformed = useCamelCase(filter);
+    const values = Array.isArray(transformed.values)
+      ? generateValuesForEditCustomViews(
+          useSnakeCase(filter),
+          setParamsForEditFolderModal()
+        )
+      : [];
+
+    return {
+      attributeKey: transformed.attributeKey,
+      attributeModel: transformed.attributeModel,
+      customAttributeType: transformed.customAttributeType,
+      filterOperator: transformed.filterOperator,
+      queryOperator: transformed.queryOperator ?? 'and',
+      values,
+    };
+  });
+
+  appliedFilter.value = [...appliedFilter.value, ...newFilters];
+}
+
+function initalizeAppliedFiltersToModal() {
+  appliedFilter.value = [...appliedFilters.value];
+}
+
+function onToggleAdvanceFiltersModal() {
+  if (showAdvancedFilters.value === true) {
+    closeAdvanceFiltersModal();
+    return;
+  }
+
+  if (!hasAppliedFilters.value && !hasActiveFolders.value) {
+    initializeExistingFilterToModal();
+  }
+  if (hasActiveFolders.value) {
+    initializeFolderToFilterModal(activeFolder.value);
+  }
+  if (hasAppliedFilters.value) {
+    initalizeAppliedFiltersToModal();
+  }
+
+  showAdvancedFilters.value = true;
 }
 
 function fetchConversations() {
@@ -303,42 +552,13 @@ function fetchConversations() {
   store.dispatch('fetchAllConversations').then(emitConversationLoaded);
 }
 
-function onApplyFilter(payload) {
-  resetBulkActions();
-  store.dispatch('conversationPage/reset');
-  store.dispatch('emptyAllConversations');
-  fetchFilteredConversations(payload);
-}
-
-function onOpenAddFolders() {
-  const lastItemOfFolder = folders.value[folders.value.length - 1];
-  const lastItemId = lastItemOfFolder.id;
-  router.push({
-    name: 'folder_conversations',
-    params: { id: lastItemId },
-  });
-}
-
-function onOpenDeleteFolders() {
-  if (folders.value.length > 0) {
-    const lastItemOfFolder = folders.value[folders.value.length - 1];
-    const lastItemId = lastItemOfFolder.id;
-    router.push({
-      name: 'folder_conversations',
-      params: { id: lastItemId },
-    });
-  } else {
-    router.push({ name: 'home' });
-    fetchConversations();
-  }
-}
-
 function resetAndFetchData() {
+  appliedFilter.value = [];
   resetBulkActions();
   store.dispatch('conversationPage/reset');
   store.dispatch('emptyAllConversations');
   store.dispatch('clearConversationFilters');
-  if (hasActiveFolders.value && activeFolder.value?.query) {
+  if (hasActiveFolders.value) {
     const payload = activeFolder.value.query;
     fetchSavedFilteredConversations(payload);
   }
@@ -355,7 +575,7 @@ function loadMoreConversations() {
 
   if (!hasAppliedFiltersOrActiveFolders.value) {
     fetchConversations();
-  } else if (hasActiveFolders.value && activeFolder.value?.query) {
+  } else if (hasActiveFolders.value) {
     const payload = activeFolder.value.query;
     fetchSavedFilteredConversations(payload);
   } else if (hasAppliedFilters.value) {
@@ -363,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();
@@ -383,10 +611,174 @@ function onBasicFilterChange(value, type) {
   resetAndFetchData();
 }
 
+function openLastSavedItemInFolder() {
+  const lastItemOfFolder = folders.value[folders.value.length - 1];
+  const lastItemId = lastItemOfFolder.id;
+  router.push({
+    name: 'folder_conversations',
+    params: { id: lastItemId },
+  });
+}
+
+function openLastItemAfterDeleteInFolder() {
+  if (folders.value.length > 0) {
+    openLastSavedItemInFolder();
+  } else {
+    router.push({ name: 'home' });
+    fetchConversations();
+  }
+}
+
+function redirectToConversationList() {
+  const {
+    params: { accountId, inbox_id: inboxId, label, teamId },
+    name,
+  } = route;
+
+  let conversationType = '';
+  if (isOnMentionsView({ route: { name } })) {
+    conversationType = 'mention';
+  } else if (isOnUnattendedView({ route: { name } })) {
+    conversationType = 'unattended';
+  }
+  router.push(
+    conversationListPageURL({
+      accountId,
+      conversationType: conversationType,
+      customViewId: props.foldersId,
+      inboxId,
+      label,
+      teamId,
+    })
+  );
+}
+
+async function assignPriority(priority, conversationId = null) {
+  store.dispatch('setCurrentChatPriority', {
+    priority,
+    conversationId,
+  });
+  store.dispatch('assignPriority', { conversationId, priority }).then(() => {
+    useTrack(CONVERSATION_EVENTS.CHANGE_PRIORITY, {
+      newValue: priority,
+      from: 'Context menu',
+    });
+    useAlert(
+      t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
+        priority,
+        conversationId,
+      })
+    );
+  });
+}
+
+async function markAsUnread(conversationId) {
+  try {
+    await store.dispatch('markMessagesUnread', {
+      id: conversationId,
+    });
+    redirectToConversationList();
+  } catch (error) {
+    // Ignore error
+  }
+}
+async function markAsRead(conversationId) {
+  try {
+    await store.dispatch('markMessagesRead', {
+      id: conversationId,
+    });
+  } catch (error) {
+    // Ignore error
+  }
+}
+
+async function onAssignTeam(team, conversationId = null) {
+  try {
+    await store.dispatch('assignTeam', {
+      conversationId,
+      teamId: team.id,
+    });
+    useAlert(
+      t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL', {
+        team: team.name,
+        conversationId,
+      })
+    );
+  } catch (error) {
+    useAlert(t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED'));
+  }
+}
+
+function toggleConversationStatus(
+  conversationId,
+  status,
+  snoozedUntil,
+  customAttributes = null
+) {
+  const payload = {
+    conversationId,
+    status,
+    snoozedUntil,
+  };
+
+  if (customAttributes) {
+    payload.customAttributes = customAttributes;
+  }
+
+  store.dispatch('toggleStatus', payload).then(() => {
+    useAlert(t('CONVERSATION.CHANGE_STATUS'));
+  });
+}
+
+function handleResolveConversation(conversationId, status, snoozedUntil) {
+  if (status !== wootConstants.STATUS_TYPE.RESOLVED) {
+    toggleConversationStatus(conversationId, status, snoozedUntil);
+    return;
+  }
+
+  // Check for required attributes before resolving
+  const conversation = getConversationById.value(conversationId);
+  const currentCustomAttributes = conversation?.custom_attributes || {};
+  const { hasMissing, missing } = checkMissingAttributes(
+    currentCustomAttributes
+  );
+
+  if (hasMissing) {
+    // Pass conversation context through the modal's API
+    const conversationContext = {
+      id: conversationId,
+      snoozedUntil,
+    };
+    resolveAttributesModalRef.value?.open(
+      missing,
+      currentCustomAttributes,
+      conversationContext
+    );
+  } else {
+    toggleConversationStatus(conversationId, status, snoozedUntil);
+  }
+}
+
+function handleResolveWithAttributes({ attributes, context }) {
+  if (context) {
+    const existingConversation = getConversationById.value(context.id);
+    const currentCustomAttributes =
+      existingConversation?.custom_attributes || {};
+    const mergedAttributes = { ...currentCustomAttributes, ...attributes };
+
+    toggleConversationStatus(
+      context.id,
+      wootConstants.STATUS_TYPE.RESOLVED,
+      context.snoozedUntil,
+      mergedAttributes
+    );
+  }
+}
+
 function allSelectedConversationsStatus(status) {
   if (!selectedConversations.value.length) return false;
   return selectedConversations.value.every(item => {
-    return store.getters.getConversationById(item)?.status === status;
+    return getConversationById.value(item)?.status === status;
   });
 }
 
@@ -414,19 +806,46 @@ onMounted(() => {
   }
 });
 
+const deleteConversationDialogRef = ref(null);
+const selectedConversationId = ref(null);
+
+async function deleteConversation() {
+  try {
+    await store.dispatch('deleteConversation', selectedConversationId.value);
+    redirectToConversationList();
+    selectedConversationId.value = null;
+    deleteConversationDialogRef.value.close();
+    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
+  }
+}
+
+const handleDelete = conversationId => {
+  selectedConversationId.value = conversationId;
+  deleteConversationDialogRef.value.open();
+};
+
 provide('selectConversation', selectConversation);
 provide('deSelectConversation', deSelectConversation);
+provide('assignAgent', onAssignAgent);
+provide('assignTeam', onAssignTeam);
+provide('assignLabels', onAssignLabels);
+provide('removeLabels', onRemoveLabels);
+provide('updateConversationStatus', handleResolveConversation);
 provide('toggleContextMenu', onContextMenuToggle);
+provide('markAsUnread', markAsUnread);
+provide('markAsRead', markAsRead);
+provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
+provide('deleteConversation', handleDelete);
+
+watch(activeTeam, () => resetAndFetchData());
 
 watch(
   computed(() => props.conversationInbox),
   () => resetAndFetchData()
 );
-watch(
-  computed(() => props.teamId),
-  () => resetAndFetchData()
-);
 watch(
   computed(() => props.label),
   () => resetAndFetchData()
@@ -435,10 +854,6 @@ watch(
   computed(() => props.conversationType),
   () => resetAndFetchData()
 );
-watch(
-  computed(() => props.foldersId),
-  () => resetAndFetchData()
-);
 
 watch(activeFolder, (newVal, oldVal) => {
   if (newVal !== oldVal) {
@@ -460,7 +875,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1 relative"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
@@ -475,25 +890,32 @@ watch(conversationFilters, (newVal, oldVal) => {
       :is-on-expanded-layout="isOnExpandedLayout"
       :conversation-stats="conversationStats"
       :is-list-loading="chatListLoading && !conversationList.length"
-      :is-filter-modal-open="isFilterModalOpen"
-      @filters-modal="chatListFiltersRef?.onToggleAdvanceFiltersModal"
+      @add-folders="onClickOpenAddFoldersModal"
+      @delete-folders="onClickOpenDeleteFoldersModal"
+      @filters-modal="onToggleAdvanceFiltersModal"
+      @reset-filters="resetAndFetchData"
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <ChatListFilters
-      ref="chatListFiltersRef"
-      :conversation-inbox="conversationInbox"
-      :team-id="teamId"
-      :label="label"
-      :folders-id="foldersId"
-      :active-status="activeStatus"
-      :active-assignee-tab="activeAssigneeTab"
-      :current-user-details="{ id: currentUser.id, name: currentUser.name }"
-      :has-active-folders="hasActiveFolders"
-      :has-applied-filters="hasAppliedFilters"
-      @apply-filter="onApplyFilter"
-      @open-add-folders="onOpenAddFolders"
-      @open-delete-folders="onOpenDeleteFolders"
+    <TeleportWithDirection
+      v-if="showAddFoldersModal"
+      to="#saveFilterTeleportTarget"
+    >
+      <SaveCustomView
+        v-model="appliedFilter"
+        :custom-views-query="foldersQuery"
+        :open-last-saved-item="openLastSavedItemInFolder"
+        @close="onCloseAddFoldersModal"
+      />
+    </TeleportWithDirection>
+
+    <DeleteCustomViews
+      v-if="showDeleteFoldersModal"
+      v-model:show="showDeleteFoldersModal"
+      :active-custom-view="activeFolder"
+      :custom-views-id="foldersId"
+      :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
+      @close="onCloseDeleteFoldersModal"
     />
 
     <ChatTypeTabs
@@ -503,45 +925,93 @@ watch(conversationFilters, (newVal, oldVal) => {
       is-compact
       @chat-tab-change="updateAssigneeTab"
     />
-    <ConversationActiveFiltersPreview
-      :active-folder="activeFolder"
-      :has-active-folders="hasActiveFolders"
-      :is-on-expanded-layout="isOnExpandedLayout"
-      @clear-filters="resetAndFetchData"
-      @open-filter="chatListFiltersRef?.onToggleAdvanceFiltersModal"
-      @save-folder="chatListFiltersRef?.onClickOpenAddFoldersModal"
-      @delete-folder="chatListFiltersRef?.onClickOpenDeleteFoldersModal"
-    />
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex overflow-auto justify-center items-center p-4"
+    >
+      {{ $t('CHAT_LIST.LIST.404') }}
+    </p>
     <ConversationBulkActions
+      v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
       :selected-inboxes="uniqueInboxes"
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
-      :class="isOnExpandedLayout && 'sm:!w-[24rem] !w-full'"
       @select-all-conversations="toggleSelectAll"
+      @assign-agent="onAssignAgent"
+      @update-conversations="onUpdateConversations"
+      @assign-labels="onAssignLabels"
+      @assign-team="onAssignTeamsForBulk"
     />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex items-center justify-center p-4 overflow-auto"
+    <div
+      ref="conversationListRef"
+      class="flex-1 min-h-0 overflow-y-auto conversations-list"
+      :class="{ '!overflow-hidden': isContextMenuOpen }"
     >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
-
-    <ConversationList
-      :items="conversationList"
-      :is-loading="chatListLoading"
-      :show-end-of-list-message="showEndOfListMessage"
-      :is-context-menu-open="isContextMenuOpen"
-      :label="label"
-      :team-id="teamId"
-      :folders-id="foldersId"
-      :conversation-type="conversationType"
-      :show-assignee="showAssigneeInConversationCard"
-      :is-expanded-layout="isOnExpandedLayout"
-      @load-more="loadMoreConversations"
+      <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"
+      :title="
+        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
+          conversationId: selectedConversationId,
+        })
+      "
+      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
+      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
+      @confirm="deleteConversation"
+      @close="selectedConversationId = null"
+    />
+    <TeleportWithDirection
+      v-if="showAdvancedFilters"
+      to="#conversationFilterTeleportTarget"
+    >
+      <ConversationFilter
+        v-model="appliedFilter"
+        :folder-name="activeFolderName"
+        :is-folder-view="hasActiveFolders"
+        @apply-filter="onApplyFilter"
+        @update-folder="onUpdateSavedFilter"
+        @close="closeAdvanceFiltersModal"
+      />
+    </TeleportWithDirection>
+    <ConversationResolveAttributesModal
+      ref="resolveAttributesModalRef"
+      @submit="handleResolveWithAttributes"
     />
   </div>
 </template>

app/javascript/dashboard/components/ChatListFilters.vue

@@ -1,309 +0,0 @@
-<script setup>
-import { ref, unref, computed } from 'vue';
-import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
-import {
-  useMapGetter,
-  useFunctionGetter,
-} from 'dashboard/composables/store.js';
-import {
-  useCamelCase,
-  useSnakeCase,
-} from 'dashboard/composables/useTransformKeys';
-import { useFilter } from 'shared/composables/useFilter';
-
-import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import ConversationFilter from 'next/filter/ConversationFilter.vue';
-import SaveCustomView from 'next/filter/SaveCustomView.vue';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
-
-import filterQueryGenerator from '../helper/filterQueryGenerator.js';
-import advancedFilterOptions from './widgets/conversation/advancedFilterItems';
-import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages';
-import countries from 'shared/constants/countries';
-import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHelper';
-
-const props = defineProps({
-  conversationInbox: { type: [String, Number], default: 0 },
-  teamId: { type: [String, Number], default: 0 },
-  label: { type: String, default: '' },
-  foldersId: { type: [String, Number], default: 0 },
-  activeStatus: { type: String, required: true },
-  activeAssigneeTab: { type: String, required: true },
-  currentUserDetails: { type: Object, required: true },
-  hasActiveFolders: { type: Boolean, default: false },
-  hasAppliedFilters: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'applyFilter',
-  'openAddFolders',
-  'openDeleteFolders',
-]);
-
-const store = useStore();
-const { t } = useI18n();
-
-const showAdvancedFilters = ref(false);
-const showAddFoldersModal = ref(false);
-const showDeleteFoldersModal = ref(false);
-const appliedFilter = ref([]);
-const foldersQuery = ref({});
-
-const advancedFilterTypes = ref(
-  advancedFilterOptions.map(filter => ({
-    ...filter,
-    attributeName: t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
-  }))
-);
-
-const folders = useMapGetter('customViews/getConversationCustomViews');
-const agentList = useMapGetter('agents/getAgents');
-const teamsList = useMapGetter('teams/getTeams');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const campaigns = useMapGetter('campaigns/getAllCampaigns');
-const labels = useMapGetter('labels/getLabels');
-const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
-const activeInbox = useMapGetter('getSelectedInbox');
-const getTeamFn = useMapGetter('teams/getTeam');
-
-const inbox = useFunctionGetter('inboxes/getInbox', activeInbox);
-const conversationCustomAttributes = useFunctionGetter(
-  'attributes/getAttributesByModel',
-  'conversation_attribute'
-);
-
-const activeFolder = computed(() => {
-  if (props.foldersId) {
-    const activeView = folders.value.filter(
-      view => view.id === Number(props.foldersId)
-    );
-    const [firstValue] = activeView;
-    return firstValue;
-  }
-  return undefined;
-});
-
-const activeFolderName = computed(() => {
-  return activeFolder.value?.name;
-});
-
-const activeTeam = computed(() => {
-  if (props.teamId) {
-    return getTeamFn.value(props.teamId);
-  }
-  return {};
-});
-
-const {
-  initializeStatusAndAssigneeFilterToModal,
-  initializeInboxTeamAndLabelFilterToModal,
-} = useFilter({
-  filteri18nKey: 'FILTER',
-  attributeModel: 'conversation_attribute',
-});
-
-function closeAdvanceFiltersModal() {
-  showAdvancedFilters.value = false;
-  appliedFilter.value = [];
-}
-
-function onApplyFilter(payload) {
-  const transformedPayload = useSnakeCase(payload);
-  foldersQuery.value = filterQueryGenerator(transformedPayload);
-  emit('applyFilter', transformedPayload);
-  showAdvancedFilters.value = false;
-}
-
-function onUpdateSavedFilter(payload, folderName) {
-  const transformedPayload = useSnakeCase(payload);
-  const payloadData = {
-    ...unref(activeFolder),
-    name: unref(folderName),
-    query: filterQueryGenerator(transformedPayload),
-  };
-  store.dispatch('customViews/update', payloadData);
-  closeAdvanceFiltersModal();
-}
-
-function onClickOpenAddFoldersModal() {
-  showAddFoldersModal.value = true;
-}
-
-function onCloseAddFoldersModal() {
-  showAddFoldersModal.value = false;
-}
-
-function onClickOpenDeleteFoldersModal() {
-  showDeleteFoldersModal.value = true;
-}
-
-function onCloseDeleteFoldersModal() {
-  showDeleteFoldersModal.value = false;
-}
-
-function openLastSavedItemInFolder() {
-  emit('openAddFolders');
-}
-
-function openLastItemAfterDeleteInFolder() {
-  emit('openDeleteFolders');
-}
-
-function setParamsForEditFolderModal() {
-  // Here we are setting the params for edit folder modal to show the existing values.
-
-  // For agent, team, inboxes,and campaigns we get only the id's from the query.
-  // So we are mapping the id's to the actual values.
-
-  // For labels we get the name of the label from the query.
-  // If we delete the label from the label list then we will not be able to show the label name.
-
-  // For custom attributes we get only attribute key.
-  // So we are mapping it to find the input type of the attribute to show in the edit folder modal.
-  return {
-    agents: agentList.value,
-    teams: teamsList.value,
-    inboxes: inboxesList.value,
-    labels: labels.value,
-    campaigns: campaigns.value,
-    languages: languages,
-    countries: countries,
-    priority: [
-      { id: 'low', name: t('CONVERSATION.PRIORITY.OPTIONS.LOW') },
-      { id: 'medium', name: t('CONVERSATION.PRIORITY.OPTIONS.MEDIUM') },
-      { id: 'high', name: t('CONVERSATION.PRIORITY.OPTIONS.HIGH') },
-      { id: 'urgent', name: t('CONVERSATION.PRIORITY.OPTIONS.URGENT') },
-    ],
-    filterTypes: advancedFilterTypes.value,
-    allCustomAttributes: conversationCustomAttributes.value,
-  };
-}
-
-function initializeExistingFilterToModal() {
-  const statusFilter = initializeStatusAndAssigneeFilterToModal(
-    props.activeStatus,
-    props.currentUserDetails,
-    props.activeAssigneeTab
-  );
-  if (statusFilter) {
-    appliedFilter.value = [...appliedFilter.value, useCamelCase(statusFilter)];
-  }
-
-  const otherFilters = initializeInboxTeamAndLabelFilterToModal(
-    props.conversationInbox,
-    inbox.value,
-    props.teamId,
-    activeTeam.value,
-    props.label
-  ).map(useCamelCase);
-
-  appliedFilter.value = [...appliedFilter.value, ...otherFilters];
-}
-
-function initializeFolderToFilterModal(newActiveFolder) {
-  const query = unref(newActiveFolder)?.query?.payload;
-  if (!Array.isArray(query)) return;
-
-  const newFilters = query.map(filter => {
-    const transformed = useCamelCase(filter);
-    const values = Array.isArray(transformed.values)
-      ? generateValuesForEditCustomViews(
-          useSnakeCase(filter),
-          setParamsForEditFolderModal()
-        )
-      : [];
-
-    return {
-      attributeKey: transformed.attributeKey,
-      attributeModel: transformed.attributeModel,
-      customAttributeType: transformed.customAttributeType,
-      filterOperator: transformed.filterOperator,
-      queryOperator: transformed.queryOperator ?? 'and',
-      values,
-    };
-  });
-
-  appliedFilter.value = [...appliedFilter.value, ...newFilters];
-}
-
-function initalizeAppliedFiltersToModal() {
-  appliedFilter.value = [...appliedFilters.value];
-}
-
-function onToggleAdvanceFiltersModal() {
-  if (showAdvancedFilters.value === true) {
-    closeAdvanceFiltersModal();
-    return;
-  }
-
-  appliedFilter.value = [];
-
-  if (!props.hasAppliedFilters && !props.hasActiveFolders) {
-    initializeExistingFilterToModal();
-  }
-  if (props.hasActiveFolders) {
-    initializeFolderToFilterModal(activeFolder.value);
-  }
-  if (props.hasAppliedFilters) {
-    initalizeAppliedFiltersToModal();
-  }
-
-  showAdvancedFilters.value = true;
-}
-
-defineExpose({
-  onToggleAdvanceFiltersModal,
-  onClickOpenAddFoldersModal,
-  onClickOpenDeleteFoldersModal,
-  onCloseAddFoldersModal,
-  onCloseDeleteFoldersModal,
-  foldersQuery,
-  activeFolder,
-  appliedFilter,
-  showAdvancedFilters,
-});
-</script>
-
-<template>
-  <div>
-    <TeleportWithDirection
-      v-if="showAddFoldersModal"
-      to="#saveFilterTeleportTarget"
-    >
-      <SaveCustomView
-        v-model="appliedFilter"
-        :custom-views-query="foldersQuery"
-        :open-last-saved-item="openLastSavedItemInFolder"
-        @close="onCloseAddFoldersModal"
-      />
-    </TeleportWithDirection>
-
-    <TeleportWithDirection
-      v-if="showDeleteFoldersModal"
-      to="#deleteFilterTeleportTarget"
-    >
-      <DeleteCustomViews
-        v-model:show="showDeleteFoldersModal"
-        :active-custom-view="activeFolder"
-        :custom-views-id="foldersId"
-        :open-last-item-after-delete="openLastItemAfterDeleteInFolder"
-        @close="onCloseDeleteFoldersModal"
-      />
-    </TeleportWithDirection>
-
-    <TeleportWithDirection
-      v-if="showAdvancedFilters"
-      to="#conversationFilterTeleportTarget"
-    >
-      <ConversationFilter
-        v-model="appliedFilter"
-        :folder-name="activeFolderName"
-        :is-folder-view="hasActiveFolders"
-        @apply-filter="onApplyFilter"
-        @update-folder="onUpdateSavedFilter"
-        @close="closeAdvanceFiltersModal"
-      />
-    </TeleportWithDirection>
-  </div>
-</template>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -16,10 +16,15 @@ const props = defineProps({
   isOnExpandedLayout: { type: Boolean, required: true },
   conversationStats: { type: Object, required: true },
   isListLoading: { type: Boolean, required: true },
-  isFilterModalOpen: { type: Boolean, default: false },
 });
 
-const emit = defineEmits(['basicFilterChange', 'filtersModal']);
+const emit = defineEmits([
+  'addFolders',
+  'deleteFolders',
+  'resetFilters',
+  'basicFilterChange',
+  'filtersModal',
+]);
 
 const { uiSettings, updateUISettings } = useUISettings();
 
@@ -51,33 +56,61 @@ const toggleConversationLayout = () => {
 </script>
 
 <template>
-  <div class="flex items-center justify-between gap-2 px-4 h-[3.25rem]">
+  <div
+    class="flex items-center justify-between gap-2 px-3 h-[3.25rem]"
+    :class="{
+      'border-b border-n-strong': hasAppliedFiltersOrActiveFolders,
+    }"
+  >
     <div class="flex items-center justify-center min-w-0">
-      <h1 class="text-heading-2 truncate text-n-slate-12" :title="pageTitle">
+      <h1
+        class="text-base font-medium truncate text-n-slate-12"
+        :title="pageTitle"
+      >
         {{ pageTitle }}
       </h1>
       <span
         v-if="
           allCount > 0 && hasAppliedFiltersOrActiveFolders && !isListLoading
         "
-        class="px-2 py-1 my-0.5 mx-1 rounded-lg capitalize -outline-offset-1 outline outline-1 outline-n-container bg-n-button-color text-xxs text-n-slate-12 shrink-0"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
         :title="allCount"
       >
         {{ formattedAllCount }}
       </span>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        class="px-2 py-1 my-0.5 mx-1 rounded-lg capitalize -outline-offset-1 outline outline-1 outline-n-container bg-n-button-color text-xxs text-n-slate-12 shrink-0"
+        class="px-2 py-1 my-0.5 mx-1 rounded-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
     </div>
-    <div class="flex items-center gap-2">
-      <ConversationBasicFilter
-        v-if="!hasAppliedFiltersOrActiveFolders"
-        :is-on-expanded-layout="isOnExpandedLayout"
-        @change-filter="onBasicFilterChange"
-      />
+    <div class="flex items-center gap-1">
+      <template v-if="hasAppliedFilters && !hasActiveFolders">
+        <div class="relative">
+          <NextButton
+            v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.ADD.SAVE_BUTTON')"
+            icon="i-lucide-save"
+            slate
+            xs
+            faded
+            @click="emit('addFolders')"
+          />
+          <div
+            id="saveFilterTeleportTarget"
+            class="absolute z-50 mt-2"
+            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
+          />
+        </div>
+        <NextButton
+          v-tooltip.top-end="$t('FILTER.CLEAR_BUTTON_LABEL')"
+          icon="i-lucide-circle-x"
+          ruby
+          faded
+          xs
+          @click="emit('resetFilters')"
+        />
+      </template>
       <template v-if="hasActiveFolders">
         <div class="relative">
           <NextButton
@@ -85,8 +118,8 @@ const toggleConversationLayout = () => {
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
             icon="i-lucide-pen-line"
             slate
-            sm
-            :variant="isFilterModalOpen ? 'faded' : 'ghost'"
+            xs
+            faded
             @click="emit('filtersModal')"
           />
           <div
@@ -95,6 +128,15 @@ const toggleConversationLayout = () => {
             :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
+        <NextButton
+          id="toggleConversationFilterButton"
+          v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
+          icon="i-lucide-trash-2"
+          ruby
+          xs
+          faded
+          @click="emit('deleteFolders')"
+        />
       </template>
       <div v-else class="relative">
         <NextButton
@@ -102,8 +144,8 @@ const toggleConversationLayout = () => {
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
           icon="i-lucide-list-filter"
           slate
-          sm
-          :variant="isFilterModalOpen ? 'faded' : 'ghost'"
+          xs
+          faded
           @click="emit('filtersModal')"
         />
         <div
@@ -112,6 +154,11 @@ const toggleConversationLayout = () => {
           :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
         />
       </div>
+      <ConversationBasicFilter
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @change-filter="onBasicFilterChange"
+      />
       <SwitchLayout
         :is-on-expanded-layout="isOnExpandedLayout"
         @toggle="toggleConversationLayout"

app/javascript/dashboard/components/ConversationItem.vue

@@ -1,175 +1,55 @@
-<script setup>
-import { inject } from 'vue';
-import { useStore } from 'vuex';
-import { useI18n } from 'vue-i18n';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CONVERSATION_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
-import { useConversationRequiredAttributes } from 'dashboard/composables/useConversationRequiredAttributes';
-import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCardV5.vue';
-import wootConstants from 'dashboard/constants/globals';
-
-const props = defineProps({
-  source: {
-    type: Object,
-    required: true,
+<script>
+import ConversationCard from './widgets/conversation/ConversationCard.vue';
+export default {
+  components: {
+    ConversationCard,
   },
-  teamId: {
-    type: [String, Number],
-    default: 0,
+  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,
+    },
   },
-  label: {
-    type: String,
-    default: '',
-  },
-  conversationType: {
-    type: String,
-    default: '',
-  },
-  foldersId: {
-    type: [String, Number],
-    default: 0,
-  },
-  showAssignee: {
-    type: Boolean,
-    default: false,
-  },
-  isExpandedLayout: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits([
-  'deleteConversation',
-  'showResolveAttributesModal',
-  'redirectToList',
-]);
-
-const store = useStore();
-const { t } = useI18n();
-
-const selectConversation = inject('selectConversation');
-const deSelectConversation = inject('deSelectConversation');
-const toggleContextMenu = inject('toggleContextMenu');
-const isConversationSelected = inject('isConversationSelected');
-
-const { checkMissingAttributes } = useConversationRequiredAttributes();
-
-const { onAssignAgent, onAssignLabels, onRemoveLabels } = useBulkActions();
-
-async function assignTeam(team, conversationId = null) {
-  try {
-    await store.dispatch('assignTeam', {
-      conversationId,
-      teamId: team.id,
-    });
-    useAlert(
-      t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.SUCCESFUL', {
-        team: team.name,
-        conversationId,
-      })
-    );
-  } catch (error) {
-    useAlert(t('CONVERSATION.CARD_CONTEXT_MENU.API.TEAM_ASSIGNMENT.FAILED'));
-  }
-}
-
-function toggleConversationStatus(
-  conversationId,
-  status,
-  snoozedUntil,
-  customAttributes = null
-) {
-  const payload = {
-    conversationId,
-    status,
-    snoozedUntil,
-  };
-
-  if (customAttributes) {
-    payload.customAttributes = customAttributes;
-  }
-
-  store.dispatch('toggleStatus', payload).then(() => {
-    useAlert(t('CONVERSATION.CHANGE_STATUS'));
-  });
-}
-
-function updateConversationStatus(conversationId, status, snoozedUntil) {
-  if (status !== wootConstants.STATUS_TYPE.RESOLVED) {
-    toggleConversationStatus(conversationId, status, snoozedUntil);
-    return;
-  }
-
-  // Check for required attributes before resolving
-  const conversation = store.getters.getConversationById(conversationId);
-  const currentCustomAttributes = conversation?.custom_attributes || {};
-  const { hasMissing, missing } = checkMissingAttributes(
-    currentCustomAttributes
-  );
-
-  if (hasMissing) {
-    // Emit event to parent to show modal
-    emit('showResolveAttributesModal', {
-      conversationId,
-      snoozedUntil,
-      missing,
-      currentCustomAttributes,
-    });
-  } else {
-    toggleConversationStatus(conversationId, status, snoozedUntil);
-  }
-}
-
-async function assignPriority(priority, conversationId = null) {
-  store.dispatch('setCurrentChatPriority', {
-    priority,
-    conversationId,
-  });
-  store.dispatch('assignPriority', { conversationId, priority }).then(() => {
-    useTrack(CONVERSATION_EVENTS.CHANGE_PRIORITY, {
-      newValue: priority,
-      from: 'Context menu',
-    });
-    useAlert(
-      t('CONVERSATION.PRIORITY.CHANGE_PRIORITY.SUCCESSFUL', {
-        priority,
-        conversationId,
-      })
-    );
-  });
-}
-
-async function markAsUnread(conversationId) {
-  try {
-    await store.dispatch('markMessagesUnread', {
-      id: conversationId,
-    });
-    emit('redirectToList');
-  } catch (error) {
-    // Ignore error
-  }
-}
-
-async function markAsRead(conversationId) {
-  try {
-    await store.dispatch('markMessagesRead', {
-      id: conversationId,
-    });
-  } catch (error) {
-    // Ignore error
-  }
-}
-
-function handleDelete() {
-  emit('deleteConversation', props.source.id);
-}
+};
 </script>
 
 <template>
   <ConversationCard
-    :key="source.id"
     :active-label="label"
     :team-id="teamId"
     :folders-id="foldersId"
@@ -177,19 +57,18 @@ function handleDelete() {
     :conversation-type="conversationType"
     :selected="isConversationSelected(source.id)"
     :show-assignee="showAssignee"
-    :is-expanded-layout="isExpandedLayout"
     enable-context-menu
     @select-conversation="selectConversation"
     @de-select-conversation="deSelectConversation"
-    @assign-agent="onAssignAgent"
+    @assign-agent="assignAgent"
     @assign-team="assignTeam"
-    @assign-label="onAssignLabels"
-    @remove-label="onRemoveLabels"
+    @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="handleDelete"
+    @delete-conversation="deleteConversation"
   />
 </template>

app/javascript/dashboard/components/ConversationList.vue

@@ -1,265 +0,0 @@
-<script setup>
-import { provide, useTemplateRef, shallowRef, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRouter, useRoute } from 'vue-router';
-import { Virtualizer } from 'virtua/vue';
-import { useInfiniteScroll, useBreakpoints } from '@vueuse/core';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import { useAlert } from 'dashboard/composables';
-import ConversationItem from './ConversationItem.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
-import wootConstants from 'dashboard/constants/globals';
-import {
-  isOnMentionsView,
-  isOnUnattendedView,
-} from 'dashboard/store/modules/conversations/helpers/actionHelpers';
-import { conversationListPageURL } from 'dashboard/helper/URLHelper';
-
-const props = defineProps({
-  items: { type: Array, default: () => [] },
-  isLoading: { type: Boolean, default: false },
-  showEndOfListMessage: { type: Boolean, default: false },
-  isContextMenuOpen: { 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 },
-  isExpandedLayout: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['loadMore']);
-const { t } = useI18n();
-const store = useStore();
-const router = useRouter();
-const route = useRoute();
-
-const parentRef = useTemplateRef('parentRef');
-const virtualizerRef = shallowRef(null);
-const deleteConversationDialogRef = ref(null);
-const conversationToDelete = ref(null);
-const resolveAttributesModalRef = ref(null);
-
-provide('contextMenuElementTarget', parentRef);
-
-const breakpoints = useBreakpoints({
-  lg: wootConstants.LARGE_SCREEN_BREAKPOINT,
-});
-const isLargeScreen = breakpoints.greaterOrEqual('lg');
-provide('isLargeScreen', isLargeScreen);
-
-useInfiniteScroll(
-  parentRef,
-  () => {
-    if (props.isLoading || props.showEndOfListMessage) return;
-    emit('loadMore');
-  },
-  {
-    distance: 400,
-  }
-);
-
-// Keyboard navigation for conversation list
-const handleConversationNavigation = direction => {
-  if (!parentRef.value) return;
-
-  // Get all wrapper divs with data-id
-  const allWrappers = Array.from(parentRef.value.querySelectorAll('[data-id]'));
-  if (allWrappers.length === 0) return;
-
-  const activeIndex = allWrappers.findIndex(wrapper =>
-    wrapper.querySelector('.active')
-  );
-
-  const delta = direction === 'previous' ? -1 : 1;
-  const newIndex = activeIndex + delta;
-  // Clamp index to valid range [0, length-1]
-  const targetIndex = Math.max(0, Math.min(newIndex, allWrappers.length - 1));
-
-  // Click the first child (ConversationItem root element)
-  allWrappers[targetIndex]?.firstElementChild?.click();
-};
-
-useKeyboardEvents({
-  'Alt+KeyJ': {
-    action: () => handleConversationNavigation('previous'),
-    allowOnFocusedInput: true,
-  },
-  'Alt+KeyK': {
-    action: () => handleConversationNavigation('next'),
-    allowOnFocusedInput: true,
-  },
-});
-
-function handleDeleteConversation(conversationId) {
-  conversationToDelete.value = conversationId;
-  deleteConversationDialogRef.value?.open();
-}
-
-function redirectToConversationList() {
-  const {
-    params: { accountId, inbox_id: inboxId, label, teamId },
-    name,
-  } = route;
-
-  let conversationType = '';
-  if (isOnMentionsView({ route: { name } })) {
-    conversationType = 'mention';
-  } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = 'unattended';
-  }
-  router.push(
-    conversationListPageURL({
-      accountId,
-      conversationType: conversationType,
-      customViewId: props.foldersId,
-      inboxId,
-      label,
-      teamId,
-    })
-  );
-}
-
-async function deleteConversation() {
-  if (!conversationToDelete.value) return;
-
-  try {
-    await store.dispatch('deleteConversation', conversationToDelete.value);
-    redirectToConversationList();
-    deleteConversationDialogRef.value?.close();
-    conversationToDelete.value = null;
-    useAlert(t('CONVERSATION.SUCCESS_DELETE_CONVERSATION'));
-  } catch (error) {
-    useAlert(t('CONVERSATION.FAIL_DELETE_CONVERSATION'));
-  }
-}
-
-function handleShowResolveAttributesModal({
-  conversationId,
-  snoozedUntil,
-  missing,
-  currentCustomAttributes,
-}) {
-  const conversationContext = {
-    id: conversationId,
-    snoozedUntil,
-  };
-  resolveAttributesModalRef.value?.open(
-    missing,
-    currentCustomAttributes,
-    conversationContext
-  );
-}
-
-function toggleConversationStatus(
-  conversationId,
-  status,
-  snoozedUntil,
-  customAttributes = null
-) {
-  const payload = {
-    conversationId,
-    status,
-    snoozedUntil,
-  };
-
-  if (customAttributes) {
-    payload.customAttributes = customAttributes;
-  }
-
-  store.dispatch('toggleStatus', payload).then(() => {
-    useAlert(t('CONVERSATION.CHANGE_STATUS'));
-  });
-}
-
-function handleResolveWithAttributes({ attributes, context }) {
-  if (context) {
-    const existingConversation = store.getters.getConversationById(context.id);
-    const currentCustomAttributes =
-      existingConversation?.custom_attributes || {};
-    const mergedAttributes = { ...currentCustomAttributes, ...attributes };
-
-    toggleConversationStatus(
-      context.id,
-      wootConstants.STATUS_TYPE.RESOLVED,
-      context.snoozedUntil,
-      mergedAttributes
-    );
-  }
-}
-</script>
-
-<template>
-  <div
-    ref="parentRef"
-    class="flex-1 w-full h-full touch-pan-y overflow-x-hidden overscroll-contain [-webkit-overflow-scrolling:touch] [contain:strict] [overflow-anchor:none] [will-change:scroll-position] px-2 pt-2"
-    :class="isContextMenuOpen ? 'overflow-hidden' : 'overflow-y-auto'"
-  >
-    <Virtualizer
-      ref="virtualizerRef"
-      :data="items"
-      :scroll-ref="parentRef"
-      :item-size="isLargeScreen && isExpandedLayout ? 48 : 76"
-      :buffer-size="100"
-      item="div"
-      class="[&>div]:after:content-[''] [&>div]:after:absolute [&>div]:after:bottom-0 [&>div]:after:left-0 [&>div]:after:right-0 [&>div]:after:h-px [&>div]:after:bg-n-weak [&>div]:after:pointer-events-none [&>div:has(*:hover)]:after:!bg-n-surface-1 [&>div:has(+_*:hover)]:after:!bg-n-surface-1 [&>div:has(.active)]:after:!bg-n-surface-1 [&>div:has(+_*_.active)]:after:!bg-n-surface-1 [&>div:has(.selected)]:after:!bg-n-surface-1 [&>div:has(+_*_.selected)]:after:!bg-n-surface-1"
-    >
-      <template #default="{ item }">
-        <div :key="item.id" :data-id="item.id">
-          <ConversationItem
-            :source="item"
-            :label="label"
-            :team-id="teamId"
-            :folders-id="foldersId"
-            :conversation-type="conversationType"
-            :show-assignee="showAssignee"
-            :is-expanded-layout="isExpandedLayout"
-            @delete-conversation="handleDeleteConversation"
-            @show-resolve-attributes-modal="handleShowResolveAttributesModal"
-            @redirect-to-list="redirectToConversationList"
-          />
-        </div>
-      </template>
-    </Virtualizer>
-
-    <Dialog
-      ref="deleteConversationDialogRef"
-      type="alert"
-      :title="
-        $t('CONVERSATION.DELETE_CONVERSATION.TITLE', {
-          conversationId: conversationToDelete,
-        })
-      "
-      :description="$t('CONVERSATION.DELETE_CONVERSATION.DESCRIPTION')"
-      :confirm-button-label="$t('CONVERSATION.DELETE_CONVERSATION.CONFIRM')"
-      @confirm="deleteConversation"
-    />
-
-    <ConversationResolveAttributesModal
-      ref="resolveAttributesModalRef"
-      @submit="handleResolveWithAttributes"
-    />
-
-    <div class="py-2">
-      <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-sm text-n-slate-10 whitespace-nowrap"
-      >
-        <Icon
-          icon="i-woot-party"
-          class="size-4 inline-block align-middle ltr:mr-2 rtl:ml-2"
-        />
-        <span class="align-middle">
-          {{ t('CHAT_LIST.EOF') }}
-        </span>
-      </p>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { computed, inject } from 'vue';
-import { useNumberFormatter } from 'shared/composables/useNumberFormatter';
 
 const props = defineProps({
   index: {
@@ -29,14 +28,11 @@ const props = defineProps({
   },
 });
 
-const { formatCompactWithDecimal } = useNumberFormatter();
-
 const activeIndex = inject('activeIndex');
 const updateActiveIndex = inject('updateActiveIndex');
 
 const active = computed(() => props.index === activeIndex.value);
-const count = computed(() => props.count);
-const getItemCount = computed(() => formatCompactWithDecimal(count.value));
+const getItemCount = computed(() => props.count);
 
 const onTabClick = event => {
   event.preventDefault();
@@ -63,11 +59,7 @@ const onTabClick = event => {
       {{ name }}
       <div
         v-if="showBadge"
-        v-tooltip.top="{
-          content: count,
-          delay: { show: 500, hide: 0 },
-        }"
-        class="rounded-full h-5 flex items-center justify-center font-interDisplay text-xs font-medium my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
+        class="rounded-full h-5 flex items-center justify-center text-xs font-medium my-0 ltr:ml-1 rtl:mr-1 px-1.5 py-0 min-w-[20px]"
         :class="[
           active
             ? 'bg-n-blue-3 text-n-blue-11'

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

@@ -24,6 +24,10 @@ export default {
       type: [String, Date, Number],
       default: '',
     },
+    conversationId: {
+      type: [String, Number],
+      default: '',
+    },
   },
   data() {
     return {
@@ -74,6 +78,15 @@ export default {
     createdAtTimestamp() {
       this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
     },
+    conversationId() {
+      // Reset display values and timer when the row is recycled to a different conversation.
+      this.lastActivityAtTimeAgo = dynamicTime(this.lastActivityTimestamp);
+      this.createdAtTimeAgo = dynamicTime(this.createdAtTimestamp);
+      if (this.isAutoRefreshEnabled) {
+        clearTimeout(this.timer);
+        this.createTimer();
+      }
+    },
   },
   mounted() {
     if (this.isAutoRefreshEnabled) {
@@ -111,7 +124,6 @@ export default {
     v-tooltip.top="{
       content: tooltipText,
       delay: { show: 1000, hide: 0 },
-      hideOnClick: true,
     }"
     class="ml-auto leading-4 text-xxs text-n-slate-10 hover:text-n-slate-11"
   >

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

@@ -48,13 +48,13 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <woot-tabs
     :index="activeTabIndex"
-    class="w-full px-4 py-0 [&_ul]:p-0 h-10"
+    class="w-full px-3 -mt-1 py-0 [&_ul]:p-0 h-10"
     @change="onTabChange"
   >
     <woot-tabs-item
       v-for="(item, index) in items"
       :key="item.key"
-      class="text-sm"
+      class="text-sm [&_a]:font-medium"
       :index="index"
       :name="item.name"
       :count="item.count"

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

@@ -10,11 +10,23 @@ import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 
 import Icon from 'next/icon/Icon.vue';
 
-defineProps({
+const props = defineProps({
   hasSelection: {
     type: Boolean,
     default: false,
   },
+  isEditorMenuPopover: {
+    type: Boolean,
+    default: false,
+  },
+  editorContent: {
+    type: String,
+    default: undefined,
+  },
+  conversationId: {
+    type: Number,
+    default: null,
+  },
 });
 
 const emit = defineEmits(['executeCopilotAction']);
@@ -25,6 +37,13 @@ const { draftMessage } = useCaptain();
 
 const replyMode = useMapGetter('draftMessages/getReplyEditorMode');
 
+// When editorContent prop is passed, use it exclusively (even if empty)
+// This ensures each editor instance shows menu items based on its own content
+// Falls back to global draftMessage only when editorContent is not provided
+const effectiveContent = computed(() =>
+  props.editorContent !== undefined ? props.editorContent : draftMessage.value
+);
+
 // Selection-based menu items (when text is selected)
 const menuItems = computed(() => {
   const items = [];
@@ -42,8 +61,9 @@ const menuItems = computed(() => {
       icon: 'i-fluent-pen-sparkle-24-regular',
     });
   } else if (
+    props.conversationId &&
     replyMode.value === REPLY_EDITOR_MODES.REPLY &&
-    draftMessage.value
+    effectiveContent.value
   ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
@@ -52,7 +72,7 @@ const menuItems = computed(() => {
     });
   }
 
-  if (draftMessage.value) {
+  if (effectiveContent.value) {
     items.push(
       {
         label: t(
@@ -105,7 +125,7 @@ const menuItems = computed(() => {
 
 const generalMenuItems = computed(() => {
   const items = [];
-  if (replyMode.value === REPLY_EDITOR_MODES.REPLY) {
+  if (props.conversationId && replyMode.value === REPLY_EDITOR_MODES.REPLY) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUGGESTION'),
       key: 'reply_suggestion',
@@ -113,7 +133,10 @@ const generalMenuItems = computed(() => {
     });
   }
 
-  if (replyMode.value === REPLY_EDITOR_MODES.NOTE || true) {
+  if (
+    props.conversationId &&
+    (replyMode.value === REPLY_EDITOR_MODES.NOTE || true)
+  ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUMMARIZE'),
       key: 'summarize',
@@ -176,8 +199,8 @@ const handleSubMenuItemClick = (parentItem, subItem) => {
   <DropdownBody
     ref="menuRef"
     class="min-w-56 [&>ul]:gap-3 z-50 [&>ul]:px-4 [&>ul]:py-3.5"
-    :class="{ 'selection-menu': hasSelection }"
-    :style="hasSelection ? selectionMenuStyle : {}"
+    :class="{ 'selection-menu': hasSelection && isEditorMenuPopover }"
+    :style="hasSelection && isEditorMenuPopover ? selectionMenuStyle : {}"
   >
     <div v-if="menuItems.length > 0" class="flex flex-col items-start gap-2.5">
       <div

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

@@ -202,6 +202,11 @@ const editorRoot = useTemplateRef('editorRoot');
 const imageUpload = useTemplateRef('imageUpload');
 const editor = useTemplateRef('editor');
 
+const isEditorMenuPopover = computed(
+  () =>
+    editorRoot.value?.classList.contains('popover-prosemirror-menu') ?? false
+);
+
 const handleCopilotAction = actionKey => {
   if (actionKey === 'improve_selection' && editorView?.state) {
     const { from, to } = editorView.state.selection;
@@ -211,7 +216,7 @@ const handleCopilotAction = actionKey => {
       emit('executeCopilotAction', 'improve', selectedText);
     }
   } else {
-    emit('executeCopilotAction', actionKey);
+    emit('executeCopilotAction', actionKey, props.modelValue);
   }
 
   showSelectionMenu.value = false;
@@ -484,6 +489,7 @@ function setToolbarPosition() {
 function setMenubarPosition({ selection } = {}) {
   const wrapper = editorRoot.value;
   if (!selection || !wrapper) return;
+  if (!isEditorMenuPopover.value) return;
 
   const rect = wrapper.getBoundingClientRect();
   const isRtl = getComputedStyle(wrapper).direction === 'rtl';
@@ -866,8 +872,12 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
       v-if="showSelectionMenu"
       v-on-click-outside="handleClickOutside"
       :has-selection="isTextSelected"
+      :is-editor-menu-popover="isEditorMenuPopover"
+      :editor-content="modelValue"
+      :conversation-id="conversationId"
       :show-selection-menu="showSelectionMenu"
       :show-general-menu="false"
+      class="copilot-editor-menu"
       @execute-copilot-action="handleCopilotAction"
     />
     <input
@@ -968,11 +978,15 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
 }
 
+.ProseMirror-prompt-backdrop::backdrop {
+  @apply bg-n-alpha-black1 backdrop-blur-[4px];
+}
+
 .ProseMirror-prompt {
-  @apply z-[9999] bg-n-alpha-3 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
+  @apply bg-n-alpha-3 border border-n-strong p-6 shadow-xl rounded-xl w-96 !important;
 
   h5 {
-    @apply text-n-slate-12 mb-1.5;
+    @apply text-n-slate-12 mb-3;
   }
 
   .ProseMirror-prompt-buttons {
@@ -1026,6 +1040,17 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
   @apply text-n-ruby-9 dark:text-n-ruby-9 font-normal text-sm pt-1 pb-0 px-0;
 }
 
+// Default copilot menu position (non-popover editors like components-next/Editor)
+// When popover-prosemirror-menu is NOT on the wrapper, anchor below the menubar
+:not(.popover-prosemirror-menu) > .copilot-editor-menu {
+  top: 1.5rem !important;
+
+  [dir='rtl'] & {
+    left: auto !important;
+    right: 0 !important;
+  }
+}
+
 // Float editor menu
 .popover-prosemirror-menu {
   position: relative;

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

@@ -326,26 +326,4 @@ export default {
   max-height: 7.5rem;
   overflow: auto;
 }
-
-.ProseMirror-prompt {
-  @apply z-[9999] bg-n-alpha-3 min-w-80 backdrop-blur-[100px] border border-n-strong p-6 shadow-xl rounded-xl;
-
-  h5 {
-    @apply text-n-slate-12 mb-1.5;
-  }
-
-  .ProseMirror-prompt-buttons {
-    button {
-      @apply h-8 px-3;
-
-      &[type='submit'] {
-        @apply bg-n-brand text-white hover:bg-n-brand/90;
-      }
-
-      &[type='button'] {
-        @apply bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20;
-      }
-    }
-  }
-}
 </style>

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

@@ -189,7 +189,7 @@ export default {
     },
     showAudioRecorderButton() {
       if (this.isEditorDisabled) return false;
-      if (this.isALineChannel) {
+      if (this.isALineChannel || this.isATiktokChannel) {
         return false;
       }
       // Disable audio recorder for safari browser as recording is not supported
@@ -380,7 +380,11 @@ export default {
         @click="$emit('selectContentTemplate')"
       />
       <VideoCallButton
-        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
+        v-if="
+          (isAWebWidgetInbox || isAPIInbox) &&
+          !isOnPrivateNote &&
+          !isEditorDisabled
+        "
         :conversation-id="conversationId"
       />
       <transition name="modal-fade">

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

@@ -49,6 +49,10 @@ export default {
       type: Number,
       default: () => 0,
     },
+    editorContent: {
+      type: String,
+      default: undefined,
+    },
   },
   emits: ['setReplyMode', 'togglePopout', 'executeCopilotAction'],
   setup(props, { emit }) {
@@ -73,8 +77,8 @@ export default {
     const { captainTasksEnabled } = useCaptain();
     const showCopilotMenu = ref(false);
 
-    const handleCopilotAction = actionKey => {
-      emit('executeCopilotAction', actionKey);
+    const handleCopilotAction = (actionKey, data) => {
+      emit('executeCopilotAction', actionKey, data || props.editorContent);
       showCopilotMenu.value = false;
     };
 
@@ -174,6 +178,8 @@ export default {
           v-if="showCopilotMenu"
           v-on-click-outside="handleClickOutside"
           :has-selection="false"
+          :editor-content="editorContent"
+          :conversation-id="conversationId"
           class="ltr:right-0 rtl:left-0 bottom-full mb-2"
           @execute-copilot-action="handleCopilotAction"
         />

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

@@ -1,151 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
-import { useElementSize } from '@vueuse/core';
-
-import ActiveFilterPreview from 'dashboard/components-next/filter/ActiveFilterPreview.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  activeFolder: { type: Object, default: null },
-  hasActiveFolders: { type: Boolean, default: false },
-  isOnExpandedLayout: { type: Boolean, default: false },
-});
-
-const emit = defineEmits([
-  'clearFilters',
-  'saveFolder',
-  'deleteFolder',
-  'openFilter',
-]);
-
-const { t } = useI18n();
-
-const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
-
-const activeFolderQuery = computed(() => {
-  const query = props.activeFolder?.query?.payload;
-  if (!Array.isArray(query)) return [];
-
-  const newFilters = query.map(filter => {
-    const transformed = useCamelCase(filter);
-    return {
-      attributeKey: transformed.attributeKey,
-      attributeModel: transformed.attributeModel,
-      customAttributeType: transformed.customAttributeType,
-      filterOperator: transformed.filterOperator,
-      queryOperator: transformed.queryOperator ?? 'and',
-      values: transformed.values,
-    };
-  });
-
-  return newFilters;
-});
-
-const activeFilterQueryData = computed(() => {
-  return props.hasActiveFolders
-    ? activeFolderQuery.value
-    : appliedFilters.value;
-});
-
-const showPreview = computed(() => {
-  return activeFilterQueryData.value.length > 0;
-});
-
-const containerRef = ref(null);
-const { width: containerWidth } = useElementSize(containerRef);
-
-const maxVisibleFilters = computed(() => {
-  const totalFilters = activeFilterQueryData.value.length;
-  const width = containerWidth.value;
-
-  if (!width || totalFilters === 0) return 0;
-
-  const chipWidth = 200; // Estimated avg width + gap
-  const buttonSpace = 400; // Reserved space for "Edit/Delete/More" buttons
-
-  // Calculate available space across 2 lines
-  const totalAvailablePixels = Math.max(0, width * 2 - buttonSpace);
-  const maxCapacity = Math.floor(totalAvailablePixels / chipWidth);
-  // Return at least 1, but no more than actual total
-  return Math.max(1, Math.min(maxCapacity, totalFilters));
-});
-</script>
-
-<template>
-  <div
-    v-if="showPreview"
-    ref="containerRef"
-    class="flex items-center justify-between gap-2 mx-2 px-2 pb-2 pt-0.5 border-b-[1.2px] border-dashed border-n-strong mt-px"
-  >
-    <ActiveFilterPreview
-      :applied-filters="activeFilterQueryData"
-      :max-visible-filters="maxVisibleFilters"
-      :more-filters-label="
-        t('FILTER.ACTIVE_FILTERS.MORE_FILTERS', {
-          count: activeFilterQueryData.length - maxVisibleFilters,
-        })
-      "
-      :clear-button-label="t('FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')"
-      :show-clear-button="!hasActiveFolders"
-      class="flex-1 min-w-0"
-      @open-filter="emit('openFilter')"
-      @clear-filters="emit('clearFilters')"
-    >
-      <template #actions>
-        <template v-if="hasActiveFolders">
-          <div class="w-px h-3 bg-n-weak rounded-lg" />
-          <Button
-            :label="t('FILTER.ACTIVE_FILTERS.EDIT_BUTTON')"
-            link
-            class="hover:!no-underline !text-n-blue-11 !px-0.5"
-            xs
-            @click="emit('openFilter')"
-          />
-          <div class="w-px h-3 bg-n-weak rounded-lg" />
-          <div class="inline-flex items-center">
-            <Button
-              :label="t('FILTER.CUSTOM_VIEWS.DELETE.DELETE_BUTTON')"
-              link
-              ruby
-              class="hover:!no-underline !no-underline !px-0.5"
-              xs
-              @click="emit('deleteFolder')"
-            />
-            <!-- Teleport target for Delete modal -->
-            <div
-              id="deleteFilterTeleportTarget"
-              class="absolute z-50 mt-2"
-              :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
-            />
-          </div>
-        </template>
-        <div
-          v-if="appliedFilters.length > 0"
-          class="w-px h-3 bg-n-weak rounded-lg"
-        />
-        <div
-          v-if="appliedFilters.length > 0"
-          class="relative inline-flex items-center"
-        >
-          <Button
-            :label="t('FILTER.CUSTOM_VIEWS.SAVE_VIEW')"
-            link
-            class="hover:!no-underline !text-n-blue-11 !px-0.5"
-            xs
-            @click="emit('saveFolder')"
-          />
-          <!-- Teleport target for Save modal -->
-          <div
-            id="saveFilterTeleportTarget"
-            class="absolute z-50 top-6"
-            :class="{ 'ltr:left-0 rtl:right-0': isOnExpandedLayout }"
-          />
-        </div>
-      </template>
-    </ActiveFilterPreview>
-  </div>
-  <template v-else />
-</template>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { useTemplateRef, computed } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToggle } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
@@ -26,7 +26,6 @@ const { updateUISettings } = useUISettings();
 const chatStatusFilter = useMapGetter('getChatStatusFilter');
 const chatSortFilter = useMapGetter('getChatSortFilter');
 
-const filterContainerRef = useTemplateRef('filterContainerRef');
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
 const currentStatusFilter = computed(() => {
@@ -87,6 +86,10 @@ const chatSortOptions = computed(() => [
     label: t('CHAT_LIST.SORT_ORDER_ITEMS.priority_asc.TEXT'),
     value: 'priority_asc',
   },
+  {
+    label: t('CHAT_LIST.SORT_ORDER_ITEMS.priority_desc_created_at_asc.TEXT'),
+    value: 'priority_desc_created_at_asc',
+  },
   {
     label: t('CHAT_LIST.SORT_ORDER_ITEMS.waiting_since_asc.TEXT'),
     value: 'waiting_since_asc',
@@ -132,21 +135,18 @@ const handleSortChange = value => {
 </script>
 
 <template>
-  <div ref="filterContainerRef" class="relative flex">
+  <div class="relative flex">
     <NextButton
       v-tooltip.right="$t('CHAT_LIST.SORT_TOOLTIP_LABEL')"
       icon="i-lucide-arrow-up-down"
       slate
-      sm
-      :variant="showActionsDropdown ? 'faded' : 'ghost'"
+      faded
+      xs
       @click="toggleDropdown()"
     />
     <div
       v-if="showActionsDropdown"
-      v-on-click-outside="[
-        () => toggleDropdown(),
-        { ignore: [filterContainerRef] },
-      ]"
+      v-on-click-outside="() => toggleDropdown()"
       class="mt-1 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4 absolute z-40 top-full"
       :class="{
         'ltr:left-0 rtl:right-0': !isOnExpandedLayout,

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
@@ -50,10 +50,21 @@ const store = useStore();
 
 const hovered = ref(false);
 const showContextMenu = ref(false);
-const contextMenu = ref({
-  x: null,
-  y: null,
-});
+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');
@@ -243,7 +254,7 @@ const deleteConversation = () => {
       'active animate-card-select bg-n-background border-n-weak': isActiveChat,
       'bg-n-slate-2': selected,
       'px-0': compact,
-      'px-2 rounded-lg': !compact,
+      'px-3': !compact,
     }"
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
@@ -352,6 +363,7 @@ const deleteConversation = () => {
           <TimeAgo
             :last-activity-timestamp="chat.timestamp"
             :created-at-timestamp="chat.created_at"
+            :conversation-id="chat.id"
           />
         </span>
         <span

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

@@ -85,7 +85,12 @@ export default {
         useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_SUCCESS'));
         this.onCancel();
       } catch (error) {
-        useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+        const status = error?.response?.status;
+        if (status === 402) {
+          useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_PAYMENT_REQUIRED'));
+        } else {
+          useAlert(this.$t('EMAIL_TRANSCRIPT.SEND_EMAIL_ERROR'));
+        }
       } finally {
         this.isSubmitting = false;
       }

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

@@ -36,7 +36,6 @@ export default {
     v-tooltip="{
       content: tooltipText,
       delay: { show: 1500, hide: 0 },
-      hideOnClick: true,
     }"
     class="shrink-0 rounded-sm inline-flex items-center justify-center w-3.5 h-3.5"
     :class="{

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

@@ -200,9 +200,13 @@ export default {
     },
     messagePlaceHolder() {
       if (this.isEditorDisabled) {
-        return this.isAWhatsAppChannel
-          ? this.$t('CONVERSATION.FOOTER.MESSAGING_RESTRICTED_WHATSAPP')
-          : this.$t('CONVERSATION.FOOTER.MESSAGING_RESTRICTED');
+        if (this.isAWhatsAppChannel) {
+          return this.$t('CONVERSATION.FOOTER.MESSAGING_RESTRICTED_WHATSAPP');
+        }
+        if (this.isAPIInbox) {
+          return this.$t('CONVERSATION.FOOTER.MESSAGING_RESTRICTED_API');
+        }
+        return this.$t('CONVERSATION.FOOTER.MESSAGING_RESTRICTED');
       }
       return this.isPrivate
         ? this.$t('CONVERSATION.FOOTER.PRIVATE_MSG_INPUT')
@@ -279,7 +283,8 @@ export default {
         this.isASmsInbox ||
         this.isATelegramChannel ||
         this.isALineChannel ||
-        this.isAnInstagramChannel
+        this.isAnInstagramChannel ||
+        this.isATiktokChannel
       );
     },
     replyButtonLabel() {
@@ -426,7 +431,7 @@ export default {
     },
     isEditorDisabled() {
       return (
-        this.isAWhatsAppChannel &&
+        (this.isAWhatsAppChannel || this.isAPIInbox) &&
         !this.isOnPrivateNote &&
         !this.currentChat.can_reply
       );
@@ -751,11 +756,13 @@ export default {
           this.isATwilioWhatsAppChannel ||
           this.isAWhatsAppCloudChannel ||
           this.is360DialogWhatsAppChannel;
-        // When users send messages containing both text and attachments on Instagram, Instagram treats them as separate messages.
-        // Although Chatwoot combines these into a single message, Instagram sends separate echo events for each component.
-        // This can create duplicate messages in Chatwoot. To prevent this issue, we'll handle text and attachments as separate messages.
+        // Instagram and TikTok do not support sending text and attachments in the same message.
+        // For Instagram, combining them causes duplicate messages due to separate echo events per component.
+        // For TikTok, the API rejects messages that mix text and media.
+        // To handle both cases, text and attachments are always sent as separate messages.
         const isOnInstagram = this.isAnInstagramChannel;
-        if ((isOnWhatsApp || isOnInstagram) && !this.isPrivate) {
+        const isOnTiktok = this.isATiktokChannel;
+        if ((isOnWhatsApp || isOnInstagram || isOnTiktok) && !this.isPrivate) {
           this.sendMessageAsMultipleMessages(
             this.message,
             copilotAcceptedMessage
@@ -1069,7 +1076,8 @@ export default {
       const multipleMessagePayload = [];
 
       if (this.attachedFiles && this.attachedFiles.length) {
-        let caption = this.isAnInstagramChannel ? '' : message;
+        let caption =
+          this.isAnInstagramChannel || this.isATiktokChannel ? '' : message;
         this.attachedFiles.forEach(attachment => {
           const attachedFile = this.globalConfig.directUploadsEnabled
             ? attachment.blobSignedId
@@ -1091,11 +1099,13 @@ export default {
 
       const hasNoAttachments =
         !this.attachedFiles || !this.attachedFiles.length;
-      // For Instagram, we need a separate text message
-      // For WhatsApp, we only need a text message if there are no attachments
+      // For Instagram and TikTok, text must always be sent as a separate message (no captions on attachments).
+      // For WhatsApp, we only need a text message if there are no attachments.
       if (
-        (this.isAnInstagramChannel && this.message) ||
-        (!this.isAnInstagramChannel && hasNoAttachments)
+        ((this.isAnInstagramChannel || this.isATiktokChannel) &&
+          this.message) ||
+        (!(this.isAnInstagramChannel || this.isATiktokChannel) &&
+          hasNoAttachments)
       ) {
         let messagePayload = {
           conversationId: this.currentChat.id,
@@ -1235,6 +1245,7 @@ export default {
       :is-editor-disabled="isEditorDisabled"
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
+      :editor-content="message"
       :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
       @toggle-popout="togglePopout"

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -0,0 +1,254 @@
+<script>
+import { mapGetters } from 'vuex';
+import Avatar from 'next/avatar/Avatar.vue';
+import Spinner from 'shared/components/Spinner.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    Avatar,
+    Spinner,
+    NextButton,
+  },
+  props: {
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    conversationCount: {
+      type: Number,
+      default: 0,
+    },
+  },
+  emits: ['select', 'close'],
+  data() {
+    return {
+      query: '',
+      selectedAgent: null,
+      goBackToAgentList: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      uiFlags: 'bulkActions/getUIFlags',
+      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
+    }),
+    filteredAgents() {
+      if (this.query) {
+        return this.assignableAgents.filter(agent =>
+          agent.name.toLowerCase().includes(this.query.toLowerCase())
+        );
+      }
+      return [
+        {
+          confirmed: true,
+          name: 'None',
+          id: null,
+          role: 'agent',
+          account_id: 0,
+          email: 'None',
+        },
+        ...this.assignableAgents,
+      ];
+    },
+    assignableAgents() {
+      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
+        this.selectedInboxes.join(',')
+      );
+    },
+    conversationLabel() {
+      return this.conversationCount > 1 ? 'conversations' : 'conversation';
+    },
+  },
+  mounted() {
+    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
+  },
+  methods: {
+    submit() {
+      this.$emit('select', this.selectedAgent);
+    },
+    goBack() {
+      this.goBackToAgentList = true;
+      this.selectedAgent = null;
+    },
+    assignAgent(agent) {
+      this.selectedAgent = agent;
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onCloseAgentList() {
+      if (this.selectedAgent === null && !this.goBackToAgentList) {
+        this.onClose();
+      }
+      this.goBackToAgentList = false;
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
+    </div>
+    <div class="container">
+      <div
+        v-if="assignableAgentsUiFlags.isFetching"
+        class="agent__list-loading"
+      >
+        <Spinner />
+        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
+      </div>
+      <div v-else class="agent__list-container">
+        <ul v-if="!selectedAgent">
+          <li class="search-container">
+            <div
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
+            >
+              <fluent-icon icon="search" class="search-icon" size="16" />
+              <input
+                v-model="query"
+                type="search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+                class="reset-base !outline-0 !text-sm agent--search_input"
+              />
+            </div>
+          </li>
+          <li v-for="agent in filteredAgents" :key="agent.id">
+            <div class="agent-list-item" @click="assignAgent(agent)">
+              <Avatar
+                :name="agent.name"
+                :src="agent.thumbnail"
+                :status="agent.availability_status"
+                :size="22"
+                hide-offline-status
+                rounded-full
+              />
+              <span class="my-0 text-n-slate-12">
+                {{ agent.name }}
+              </span>
+            </div>
+          </li>
+        </ul>
+        <div v-else class="agent-confirmation-container">
+          <p v-if="selectedAgent.id">
+            {{
+              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+            <strong>
+              {{ selectedAgent.name }}
+            </strong>
+            <span>?</span>
+          </p>
+          <p v-else>
+            {{
+              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
+                conversationCount,
+                conversationLabel,
+              })
+            }}
+          </p>
+          <div class="agent-confirmation-actions">
+            <NextButton
+              faded
+              sm
+              slate
+              type="reset"
+              :label="$t('BULK_ACTION.GO_BACK_LABEL')"
+              @click="goBack"
+            />
+            <NextButton
+              sm
+              type="submit"
+              :label="$t('BULK_ACTION.YES')"
+              :is-loading="uiFlags.isUpdating"
+              @click="submit"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bulk-action__agents {
+  @apply max-w-[75%] absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
+  .header {
+    @apply p-2.5;
+
+    span {
+      @apply text-sm font-medium;
+    }
+  }
+
+  .container {
+    @apply overflow-y-auto max-h-[15rem];
+    .agent__list-container {
+      @apply h-full;
+    }
+    .agent-list-search {
+      @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
+      .search-icon {
+        @apply text-n-slate-10;
+      }
+
+      .agent--search_input {
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
+      }
+    }
+  }
+  .triangle {
+    @apply block z-10 absolute -top-3 text-left ltr:right-[--triangle-position] rtl:left-[--triangle-position];
+
+    svg path {
+      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
+    }
+  }
+}
+ul {
+  @apply m-0 list-none;
+
+  li {
+    &:last-child {
+      .agent-list-item {
+        @apply last:rounded-b-lg;
+      }
+    }
+  }
+}
+
+.agent-list-item {
+  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
+  span {
+    @apply text-sm;
+  }
+}
+
+.agent-confirmation-container {
+  @apply flex flex-col h-full p-2.5;
+  p {
+    @apply flex-grow;
+  }
+  .agent-confirmation-actions {
+    @apply w-full grid grid-cols-2 gap-2.5;
+  }
+}
+.search-container {
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-n-alpha-3 backdrop-blur-[100px];
+}
+
+.agent__list-loading {
+  @apply m-2.5 rounded-md dark:bg-n-solid-3 bg-n-slate-2 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue

@@ -1,197 +0,0 @@
-<script setup>
-import { useTemplateRef, computed, ref } from 'vue';
-import { useI18n, I18nT } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-import { useStore } from 'vuex';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
-  },
-  conversationCount: {
-    type: Number,
-    default: 0,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const containerRef = useTemplateRef('containerRef');
-const [showDropdown, toggleDropdown] = useToggle(false);
-const selectedAgent = ref(null);
-
-const assignableAgentsUiFlags = useMapGetter(
-  'inboxAssignableAgents/getUIFlags'
-);
-
-const isLoading = computed(() => assignableAgentsUiFlags.value.isFetching);
-
-const assignableAgentsList = useMapGetter(
-  'inboxAssignableAgents/getAssignableAgents'
-);
-const assignableAgents = computed(() =>
-  assignableAgentsList.value(props.selectedInboxes.join(','))
-);
-
-const agentMenuItems = computed(() => {
-  const items = [
-    {
-      action: 'select',
-      value: 'none',
-      label: 'None',
-      thumbnail: {
-        name: 'None',
-        src: '',
-      },
-    },
-  ];
-
-  assignableAgents.value.forEach(agent => {
-    items.push({
-      action: 'select',
-      value: agent.id,
-      label: agent.name,
-      thumbnail: {
-        name: agent.name,
-        src: agent.thumbnail,
-      },
-      isSelected: selectedAgent.value?.id === agent.id,
-    });
-  });
-
-  return items;
-});
-
-const handleSelectAgent = item => {
-  if (item.value === 'none') {
-    selectedAgent.value = { id: null, name: 'None' };
-  } else {
-    const agent = assignableAgents.value.find(a => a.id === item.value);
-    selectedAgent.value = agent || { id: null, name: 'None' };
-  }
-};
-
-const handleAssign = () => {
-  emit('select', selectedAgent.value);
-  selectedAgent.value = null;
-  toggleDropdown(false);
-};
-
-const handleCancel = () => {
-  selectedAgent.value = null;
-};
-
-const handleDismiss = () => {
-  selectedAgent.value = null;
-  toggleDropdown(false);
-};
-
-const handleToggleDropdown = () => {
-  const willOpen = !showDropdown.value;
-  toggleDropdown();
-
-  // Fetch agents only when opening the dropdown
-  if (willOpen && props.selectedInboxes.length > 0) {
-    store.dispatch('inboxAssignableAgents/fetch', props.selectedInboxes);
-  }
-};
-</script>
-
-<template>
-  <div ref="containerRef" class="relative">
-    <Button
-      v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-      icon="i-lucide-user-round-check"
-      slate
-      xs
-      ghost
-      :class="{ 'bg-n-alpha-2': showDropdown }"
-      @click="handleToggleDropdown"
-    />
-    <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-bottom"
-      enter-from-class="opacity-0 scale-95"
-      enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-bottom"
-      leave-from-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-95"
-    >
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-click-outside="[handleDismiss, { ignore: [containerRef] }]"
-        :menu-items="agentMenuItems"
-        :is-loading="isLoading"
-        show-search
-        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-60 max-h-80 overflow-y-auto"
-        @action="handleSelectAgent"
-      >
-        <template #footer>
-          <div
-            v-if="selectedAgent"
-            class="pt-2 pb-2 border-t border-n-weak sticky bottom-0 rounded-b-md z-20 bg-n-alpha-3 backdrop-blur-[4px] after:absolute after:-bottom-2 after:left-0 after:w-full after:h-2 after:bg-n-alpha-3 after:backdrop-blur-[4px]"
-          >
-            <div class="flex flex-col gap-2">
-              <I18nT
-                v-if="selectedAgent.id"
-                keypath="BULK_ACTION.ASSIGN_CONFIRMATION_LABEL"
-                tag="p"
-                class="text-xs text-n-slate-11 px-1 mb-0"
-                :plural="props.conversationCount"
-              >
-                <template #conversationCount>
-                  <strong class="text-n-slate-12">
-                    {{ props.conversationCount }}
-                  </strong>
-                </template>
-                <template #agentName>
-                  <strong class="text-n-slate-12">
-                    {{ selectedAgent.name }}
-                  </strong>
-                </template>
-              </I18nT>
-              <I18nT
-                v-else
-                keypath="BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL"
-                tag="p"
-                class="text-xs text-n-slate-11 px-1 mb-0"
-                :plural="props.conversationCount"
-              >
-                <template #n>
-                  <strong class="text-n-slate-12">
-                    {{ props.conversationCount }}
-                  </strong>
-                </template>
-              </I18nT>
-              <div class="flex gap-2">
-                <Button
-                  sm
-                  faded
-                  slate
-                  class="flex-1"
-                  :label="t('BULK_ACTION.CANCEL')"
-                  @click="handleCancel"
-                />
-                <Button
-                  sm
-                  class="flex-1"
-                  :label="t('BULK_ACTION.YES')"
-                  @click="handleAssign"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-      </DropdownMenu>
-    </Transition>
-  </div>
-</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue

@@ -1,153 +0,0 @@
-<script setup>
-import { ref, useTemplateRef, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-
-import NextButton from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: 'conversation',
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['assign']);
-
-const { t } = useI18n();
-
-const labels = useMapGetter('labels/getLabels');
-
-const containerRef = useTemplateRef('containerRef');
-const [showDropdown, toggleDropdown] = useToggle(false);
-const selectedLabels = ref([]);
-
-const isTypeContact = computed(() => props.type === 'contact');
-
-const buttonLabel = computed(() => {
-  if (props.type === 'contact') return t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS');
-  return '';
-});
-
-const isLabelSelected = labelTitle => {
-  return selectedLabels.value.includes(labelTitle);
-};
-
-const labelMenuItems = computed(() => {
-  return labels.value.map(label => ({
-    action: 'select',
-    value: label.title,
-    label: label.title,
-    color: label.color,
-    id: label.id,
-    isSelected: isLabelSelected(label.title),
-  }));
-});
-
-const toggleLabelSelection = labelTitle => {
-  const index = selectedLabels.value.indexOf(labelTitle);
-  if (index > -1) {
-    selectedLabels.value.splice(index, 1);
-  } else {
-    selectedLabels.value.push(labelTitle);
-  }
-};
-
-const handleAssign = () => {
-  if (selectedLabels.value.length > 0) {
-    emit('assign', selectedLabels.value);
-    toggleDropdown(false);
-    selectedLabels.value = [];
-  }
-};
-
-const handleDismiss = () => {
-  selectedLabels.value = [];
-  toggleDropdown(false);
-};
-</script>
-
-<template>
-  <div ref="containerRef" class="relative">
-    <NextButton
-      v-tooltip="isTypeContact ? '' : $t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-      :label="buttonLabel"
-      icon="i-lucide-tag"
-      slate
-      :size="isTypeContact ? 'sm' : 'xs'"
-      ghost
-      :class="{
-        'bg-n-alpha-2': showDropdown,
-        '[&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline w-fit':
-          isTypeContact,
-      }"
-      :disabled="disabled"
-      :is-loading="isLoading"
-      @click="toggleDropdown()"
-    />
-    <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-bottom"
-      enter-from-class="opacity-0 scale-95"
-      enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-bottom"
-      leave-from-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-95"
-    >
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-click-outside="[handleDismiss, { ignore: [containerRef] }]"
-        :menu-items="labelMenuItems"
-        show-search
-        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="bottom-8 w-60 max-h-80 overflow-y-auto"
-        :class="{
-          'ltr:-right-[6.5rem] rtl:-left-[6.5rem] ltr:2xl:right-0 rtl:2xl:left-0':
-            !isTypeContact,
-          'ltr:right-0 rtl:left-0 mb-1': isTypeContact,
-        }"
-        @action="item => toggleLabelSelection(item.value)"
-      >
-        <template #thumbnail="{ item }">
-          <span
-            class="rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak"
-            :style="{ backgroundColor: item.color }"
-          />
-        </template>
-
-        <template #trailing-icon="{ item }">
-          <Icon
-            v-if="isLabelSelected(item.value)"
-            icon="i-lucide-check"
-            class="size-4 text-n-blue-11 flex-shrink-0"
-          />
-        </template>
-
-        <template #footer>
-          <div
-            class="sticky bottom-0 rounded-b-md z-20 bg-n-alpha-3 backdrop-blur-[4px] after:absolute after:-bottom-2 after:left-0 after:w-full after:h-2 after:bg-n-alpha-3 after:backdrop-blur-[4px]"
-          >
-            <NextButton
-              sm
-              class="w-full [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
-              :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
-              :disabled="!selectedLabels.length"
-              @click="handleAssign"
-            />
-          </div>
-        </template>
-      </DropdownMenu>
-    </Transition>
-  </div>
-</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue

@@ -1,164 +0,0 @@
-<script setup>
-import { useTemplateRef, computed, ref, onMounted } from 'vue';
-import { useI18n, I18nT } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-import { useStore } from 'vuex';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  conversationCount: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const { t } = useI18n();
-const store = useStore();
-const containerRef = useTemplateRef('containerRef');
-const [showDropdown, toggleDropdown] = useToggle(false);
-const selectedTeam = ref(null);
-
-const teams = useMapGetter('teams/getTeams');
-
-const teamMenuItems = computed(() => {
-  const items = [
-    {
-      action: 'select',
-      value: 'none',
-      label: t('BULK_ACTION.TEAMS.NONE'),
-    },
-  ];
-
-  teams.value.forEach(team => {
-    items.push({
-      action: 'select',
-      value: team.id,
-      label: team.name,
-      isSelected: selectedTeam.value?.id === team.id,
-    });
-  });
-
-  return items;
-});
-
-const handleSelectTeam = item => {
-  if (item.value === 'none') {
-    selectedTeam.value = { id: 0, name: 'None' };
-  } else {
-    const foundTeam = teams.value.find(team => team.id === item.value);
-    selectedTeam.value = foundTeam || { id: 0, name: 'None' };
-  }
-};
-
-const handleAssign = () => {
-  emit('select', selectedTeam.value);
-  selectedTeam.value = null;
-  toggleDropdown(false);
-};
-
-const handleCancel = () => {
-  selectedTeam.value = null;
-};
-
-onMounted(() => {
-  store.dispatch('teams/get');
-});
-</script>
-
-<template>
-  <div ref="containerRef" class="relative">
-    <Button
-      v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-      icon="i-lucide-users-round"
-      slate
-      xs
-      ghost
-      :class="{ 'bg-n-alpha-2': showDropdown }"
-      @click="toggleDropdown()"
-    />
-    <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-bottom"
-      enter-from-class="opacity-0 scale-95"
-      enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-bottom"
-      leave-from-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-95"
-    >
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-click-outside="[
-          () => toggleDropdown(false),
-          { ignore: [containerRef] },
-        ]"
-        :menu-items="teamMenuItems"
-        show-search
-        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-        class="ltr:-right-2 rtl:-left-2 bottom-8 w-60 max-h-80 overflow-y-auto"
-        @action="handleSelectTeam"
-      >
-        <template #footer>
-          <div
-            v-if="selectedTeam"
-            class="pt-2 pb-2 border-t border-n-weak sticky bottom-0 rounded-b-md z-20 bg-n-alpha-3 backdrop-blur-[4px] after:absolute after:-bottom-2 after:left-0 after:w-full after:h-2 after:bg-n-alpha-3 after:backdrop-blur-[4px]"
-          >
-            <div class="flex flex-col gap-2">
-              <I18nT
-                v-if="selectedTeam.id"
-                keypath="BULK_ACTION.TEAMS.ASSIGN_CONFIRMATION_LABEL"
-                tag="p"
-                class="text-xs text-n-slate-11 px-1 mb-0"
-                :plural="props.conversationCount"
-              >
-                <template #conversationCount>
-                  <strong class="text-n-slate-12">
-                    {{ props.conversationCount }}
-                  </strong>
-                </template>
-                <template #teamName>
-                  <strong class="text-n-slate-12">
-                    {{ selectedTeam.name }}
-                  </strong>
-                </template>
-              </I18nT>
-              <I18nT
-                v-else
-                keypath="BULK_ACTION.TEAMS.UNASSIGN_CONFIRMATION_LABEL"
-                tag="p"
-                class="text-xs text-n-slate-11 px-1 mb-0"
-                :plural="props.conversationCount"
-              >
-                <template #n>
-                  <strong class="text-n-slate-12">
-                    {{ props.conversationCount }}
-                  </strong>
-                </template>
-              </I18nT>
-              <div class="flex gap-2">
-                <Button
-                  sm
-                  faded
-                  slate
-                  class="flex-1"
-                  :label="t('BULK_ACTION.CANCEL')"
-                  @click="handleCancel"
-                />
-                <Button
-                  sm
-                  class="flex-1"
-                  :label="t('BULK_ACTION.YES')"
-                  @click="handleAssign"
-                />
-              </div>
-            </div>
-          </div>
-        </template>
-      </DropdownMenu>
-    </Transition>
-  </div>
-</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue

@@ -1,109 +0,0 @@
-<script setup>
-import { useTemplateRef, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useToggle } from '@vueuse/core';
-import { vOnClickOutside } from '@vueuse/components';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-
-const props = defineProps({
-  showResolve: {
-    type: Boolean,
-    default: true,
-  },
-  showReopen: {
-    type: Boolean,
-    default: true,
-  },
-  showSnooze: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['update']);
-
-const { t } = useI18n();
-
-const containerRef = useTemplateRef('containerRef');
-const [showDropdown, toggleDropdown] = useToggle(false);
-
-const updateMenuItems = computed(() => {
-  const items = [];
-
-  if (props.showResolve) {
-    items.push({
-      action: 'update',
-      value: 'resolved',
-      label: t('CONVERSATION.HEADER.RESOLVE_ACTION'),
-      icon: 'i-lucide-check',
-    });
-  }
-
-  if (props.showReopen) {
-    items.push({
-      action: 'update',
-      value: 'open',
-      label: t('CONVERSATION.HEADER.REOPEN_ACTION'),
-      icon: 'i-lucide-redo',
-    });
-  }
-
-  if (props.showSnooze) {
-    items.push({
-      action: 'update',
-      value: 'snoozed',
-      label: t('BULK_ACTION.UPDATE.SNOOZE_UNTIL'),
-      icon: 'i-lucide-alarm-clock',
-    });
-  }
-
-  return items;
-});
-
-const handleUpdate = item => {
-  if (item.value === 'snoozed') {
-    // If the user clicks on the snooze option from the bulk action change status dropdown.
-    // Open the snooze option for bulk action in the cmd bar.
-    const ninja = document.querySelector('ninja-keys');
-    ninja?.open({ parent: 'bulk_action_snooze_conversation' });
-  } else {
-    emit('update', item.value);
-  }
-  toggleDropdown(false);
-};
-</script>
-
-<template>
-  <div ref="containerRef" class="relative">
-    <Button
-      v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-      icon="i-lucide-circle-fading-arrow-up"
-      slate
-      xs
-      ghost
-      :class="{ 'bg-n-alpha-2': showDropdown }"
-      @click="toggleDropdown()"
-    />
-    <Transition
-      enter-active-class="transition-all duration-150 ease-out origin-bottom"
-      enter-from-class="opacity-0 scale-95"
-      enter-to-class="opacity-100 scale-100"
-      leave-active-class="transition-all duration-100 ease-in origin-bottom"
-      leave-from-class="opacity-100 scale-100"
-      leave-to-class="opacity-0 scale-95"
-    >
-      <DropdownMenu
-        v-if="showDropdown"
-        v-on-click-outside="[
-          () => toggleDropdown(false),
-          { ignore: [containerRef] },
-        ]"
-        :menu-items="updateMenuItems"
-        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-36"
-        @action="handleUpdate"
-      />
-    </Transition>
-  </div>
-</template>

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

@@ -1,9 +1,7 @@
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+<script>
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { emitter } from 'shared/helpers/mitt';
-import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions.js';
 import wootConstants from 'dashboard/constants/globals';
 import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
@@ -12,172 +10,315 @@ import {
 } from 'dashboard/helper/commandbar/events';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import BulkAgentActions from './BulkAgentActions.vue';
-import BulkUpdateActions from './BulkUpdateActions.vue';
-import BulkLabelActions from './BulkLabelActions.vue';
-import BulkTeamActions from './BulkTeamActions.vue';
+import AgentSelector from './AgentSelector.vue';
+import UpdateActions from './UpdateActions.vue';
+import LabelActions from './LabelActions.vue';
+import TeamActions from './TeamActions.vue';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-
-const props = defineProps({
-  conversations: {
-    type: Array,
-    default: () => [],
+export default {
+  components: {
+    AgentSelector,
+    UpdateActions,
+    LabelActions,
+    TeamActions,
+    CustomSnoozeModal,
+    NextButton,
   },
-  allConversationsSelected: {
-    type: Boolean,
-    default: false,
+  props: {
+    conversations: {
+      type: Array,
+      default: () => [],
+    },
+    allConversationsSelected: {
+      type: Boolean,
+      default: false,
+    },
+    selectedInboxes: {
+      type: Array,
+      default: () => [],
+    },
+    showOpenAction: {
+      type: Boolean,
+      default: false,
+    },
+    showResolvedAction: {
+      type: Boolean,
+      default: false,
+    },
+    showSnoozedAction: {
+      type: Boolean,
+      default: false,
+    },
   },
-  selectedInboxes: {
-    type: Array,
-    default: () => [],
+  emits: [
+    'selectAllConversations',
+    'assignAgent',
+    'updateConversations',
+    'assignLabels',
+    'assignTeam',
+    'resolveConversations',
+  ],
+  data() {
+    return {
+      showAgentsList: false,
+      showUpdateActions: false,
+      showLabelActions: false,
+      showTeamsList: false,
+      popoverPositions: {},
+      showCustomTimeSnoozeModal: false,
+    };
   },
-  showOpenAction: {
-    type: Boolean,
-    default: false,
+  mounted() {
+    emitter.on(
+      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+      this.onCmdSnoozeConversation
+    );
+    emitter.on(
+      CMD_BULK_ACTION_REOPEN_CONVERSATION,
+      this.onCmdReopenConversation
+    );
+    emitter.on(
+      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
+      this.onCmdResolveConversation
+    );
   },
-  showResolvedAction: {
-    type: Boolean,
-    default: false,
+  unmounted() {
+    emitter.off(
+      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
+      this.onCmdSnoozeConversation
+    );
+    emitter.off(
+      CMD_BULK_ACTION_REOPEN_CONVERSATION,
+      this.onCmdReopenConversation
+    );
+    emitter.off(
+      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
+      this.onCmdResolveConversation
+    );
   },
-  showSnoozedAction: {
-    type: Boolean,
-    default: false,
+  methods: {
+    onCmdSnoozeConversation(snoozeType) {
+      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+        this.showCustomTimeSnoozeModal = true;
+      } else if (typeof snoozeType === 'number') {
+        this.updateConversations('snoozed', snoozeType);
+      } else {
+        this.updateConversations('snoozed', findSnoozeTime(snoozeType) || null);
+      }
+    },
+    onCmdReopenConversation() {
+      this.updateConversations('open', null);
+    },
+    onCmdResolveConversation() {
+      this.updateConversations('resolved', null);
+    },
+    customSnoozeTime(customSnoozedTime) {
+      this.showCustomTimeSnoozeModal = false;
+      if (customSnoozedTime) {
+        this.updateConversations('snoozed', getUnixTime(customSnoozedTime));
+      }
+    },
+    hideCustomSnoozeModal() {
+      this.showCustomTimeSnoozeModal = false;
+    },
+    selectAll(e) {
+      this.$emit('selectAllConversations', e.target.checked);
+    },
+    submit(agent) {
+      this.$emit('assignAgent', agent);
+    },
+    updateConversations(status, snoozedUntil) {
+      this.$emit('updateConversations', status, snoozedUntil);
+    },
+    assignLabels(labels) {
+      this.$emit('assignLabels', labels);
+    },
+    assignTeam(team) {
+      this.$emit('assignTeam', team);
+    },
+    resolveConversations() {
+      this.$emit('resolveConversations');
+    },
+    toggleUpdateActions() {
+      this.showUpdateActions = !this.showUpdateActions;
+    },
+    toggleLabelActions() {
+      this.showLabelActions = !this.showLabelActions;
+    },
+    toggleAgentList() {
+      this.showAgentsList = !this.showAgentsList;
+    },
+    toggleTeamsList() {
+      this.showTeamsList = !this.showTeamsList;
+    },
   },
-});
-
-const emit = defineEmits(['selectAllConversations']);
-
-const {
-  onAssignAgent,
-  onAssignLabels,
-  onAssignTeamsForBulk: onAssignTeam,
-  onUpdateConversations,
-} = useBulkActions();
-
-const showCustomTimeSnoozeModal = ref(false);
-
-function onCmdSnoozeConversation(snoozeType) {
-  if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-    showCustomTimeSnoozeModal.value = true;
-  } else {
-    onUpdateConversations('snoozed', findSnoozeTime(snoozeType) || null);
-  }
-}
-
-function onCmdReopenConversation() {
-  onUpdateConversations('open', null);
-}
-
-function onCmdResolveConversation() {
-  onUpdateConversations('resolved', null);
-}
-
-function customSnoozeTime(customSnoozedTime) {
-  showCustomTimeSnoozeModal.value = false;
-  if (customSnoozedTime) {
-    onUpdateConversations('snoozed', getUnixTime(customSnoozedTime));
-  }
-}
-
-function hideCustomSnoozeModal() {
-  showCustomTimeSnoozeModal.value = false;
-}
-
-// Computed property with getter/setter to enable v-model usage
-const allSelected = computed({
-  get: () => props.allConversationsSelected,
-  set: value => {
-    emit('selectAllConversations', value);
-  },
-});
-
-onMounted(() => {
-  emitter.on(CMD_BULK_ACTION_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
-  emitter.on(CMD_BULK_ACTION_REOPEN_CONVERSATION, onCmdReopenConversation);
-  emitter.on(CMD_BULK_ACTION_RESOLVE_CONVERSATION, onCmdResolveConversation);
-});
-
-onUnmounted(() => {
-  emitter.off(CMD_BULK_ACTION_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
-  emitter.off(CMD_BULK_ACTION_REOPEN_CONVERSATION, onCmdReopenConversation);
-  emitter.off(CMD_BULK_ACTION_RESOLVE_CONVERSATION, onCmdResolveConversation);
-});
+};
 </script>
 
 <template>
-  <Transition
-    enter-active-class="transition-all duration-200 ease-out origin-bottom"
-    enter-from-class="opacity-0 scale-95 translate-y-2"
-    enter-to-class="opacity-100 scale-100 translate-y-0"
-    leave-active-class="transition-all duration-150 ease-in origin-bottom"
-    leave-from-class="opacity-100 scale-100 translate-y-0"
-    leave-to-class="opacity-0 scale-95 translate-y-2"
-  >
-    <div
-      v-show="conversations.length > 0"
-      class="px-2 absolute bottom-4 left-1/2 -translate-x-1/2 z-30 w-full origin-bottom"
-    >
-      <div
-        v-if="allConversationsSelected"
-        class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mb-2 py-1.5 px-2 text-n-amber-text"
-      >
-        {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-      </div>
-      <div
-        class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak shadow-[0_0_12px_0_rgba(27,40,59,0.08)]"
-      >
-        <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
-          <label class="cursor-pointer flex items-center gap-1.5">
-            <Checkbox
-              v-model="allSelected"
-              :indeterminate="!allConversationsSelected"
-            />
-            <span class="cursor-pointer">
-              {{
-                $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-                  conversationCount: conversations.length,
-                })
-              }}
-            </span>
-          </label>
-          <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
-          <NextButton
-            :label="$t('BULK_ACTION.CLEAR_SELECTION')"
-            ghost
-            class="!text-n-blue-11 !px-1 !h-6"
-            sm
-            @click="allSelected = false"
-          />
-        </div>
-        <div class="flex items-center gap-2">
-          <BulkLabelActions @assign="onAssignLabels" />
-          <BulkUpdateActions
-            :show-resolve="!showResolvedAction"
-            :show-reopen="!showOpenAction"
-            :show-snooze="!showSnoozedAction"
-            @update="onUpdateConversations"
-          />
-          <BulkAgentActions
-            :selected-inboxes="selectedInboxes"
-            :conversation-count="conversations.length"
-            @select="onAssignAgent"
-          />
-          <BulkTeamActions
-            :conversation-count="conversations.length"
-            @select="onAssignTeam"
-          />
-        </div>
-      </div>
-      <woot-modal
-        v-model:show="showCustomTimeSnoozeModal"
-        :on-close="hideCustomSnoozeModal"
-      >
-        <CustomSnoozeModal
-          @close="hideCustomSnoozeModal"
-          @choose-time="customSnoozeTime"
+  <div class="bulk-action__container">
+    <div class="flex items-center justify-between">
+      <label class="flex items-center justify-between bulk-action__panel">
+        <input
+          type="checkbox"
+          class="checkbox"
+          :checked="allConversationsSelected"
+          :indeterminate.prop="!allConversationsSelected"
+          @change="selectAll($event)"
         />
-      </woot-modal>
+        <span>
+          {{
+            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+              conversationCount: conversations.length,
+            })
+          }}
+        </span>
+      </label>
+      <div class="flex items-center gap-1 bulk-action__actions">
+        <NextButton
+          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+          icon="i-lucide-tags"
+          slate
+          xs
+          faded
+          @click="toggleLabelActions"
+        />
+        <NextButton
+          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
+          icon="i-lucide-repeat"
+          slate
+          xs
+          faded
+          @click="toggleUpdateActions"
+        />
+        <NextButton
+          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
+          icon="i-lucide-user-round-plus"
+          slate
+          xs
+          faded
+          @click="toggleAgentList"
+        />
+        <NextButton
+          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+          icon="i-lucide-users-round"
+          slate
+          xs
+          faded
+          @click="toggleTeamsList"
+        />
+      </div>
+      <transition name="popover-animation">
+        <LabelActions
+          v-if="showLabelActions"
+          class="label-actions-box"
+          @assign="assignLabels"
+          @close="showLabelActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <UpdateActions
+          v-if="showUpdateActions"
+          class="update-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          :show-resolve="!showResolvedAction"
+          :show-reopen="!showOpenAction"
+          :show-snooze="!showSnoozedAction"
+          @update="updateConversations"
+          @close="showUpdateActions = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <AgentSelector
+          v-if="showAgentsList"
+          class="agent-actions-box"
+          :selected-inboxes="selectedInboxes"
+          :conversation-count="conversations.length"
+          @select="submit"
+          @close="showAgentsList = false"
+        />
+      </transition>
+      <transition name="popover-animation">
+        <TeamActions
+          v-if="showTeamsList"
+          class="team-actions-box"
+          @assign-team="assignTeam"
+          @close="showTeamsList = false"
+        />
+      </transition>
     </div>
-  </Transition>
+    <div v-if="allConversationsSelected" class="bulk-action__alert">
+      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+    </div>
+    <woot-modal
+      v-model:show="showCustomTimeSnoozeModal"
+      :on-close="hideCustomSnoozeModal"
+    >
+      <CustomSnoozeModal
+        @close="hideCustomSnoozeModal"
+        @choose-time="customSnoozeTime"
+      />
+    </woot-modal>
+  </div>
 </template>
+
+<style scoped lang="scss">
+.bulk-action__container {
+  @apply p-3 relative border-b border-solid border-n-strong dark:border-n-weak;
+}
+
+.bulk-action__panel {
+  @apply cursor-pointer;
+
+  span {
+    @apply text-xs my-0 mx-1;
+  }
+
+  input[type='checkbox'] {
+    @apply cursor-pointer m-0;
+  }
+}
+
+.bulk-action__alert {
+  @apply bg-n-amber-3 text-n-amber-12 rounded text-xs mt-2 py-1 px-2 border border-solid border-n-amber-5;
+}
+
+.popover-animation-enter-active,
+.popover-animation-leave-active {
+  transition: transform ease-out 0.1s;
+}
+
+.popover-animation-enter {
+  transform: scale(0.95);
+  @apply opacity-0;
+}
+
+.popover-animation-enter-to {
+  transform: scale(1);
+  @apply opacity-100;
+}
+
+.popover-animation-leave {
+  transform: scale(1);
+  @apply opacity-100;
+}
+
+.popover-animation-leave-to {
+  transform: scale(0.95);
+  @apply opacity-0;
+}
+
+.label-actions-box {
+  --triangle-position: 5.3125rem;
+}
+.update-actions-box {
+  --triangle-position: 3.5rem;
+}
+.agent-actions-box {
+  --triangle-position: 1.75rem;
+}
+.team-actions-box {
+  --triangle-position: 0.125rem;
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/LabelActions.vue

@@ -0,0 +1,141 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { vOnClickOutside } from '@vueuse/components';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const emit = defineEmits(['close', 'assign']);
+
+const { t } = useI18n();
+
+const labels = useMapGetter('labels/getLabels');
+
+const query = ref('');
+const selectedLabels = ref([]);
+
+const filteredLabels = computed(() => {
+  if (!query.value) return labels.value;
+  return labels.value.filter(label =>
+    label.title.toLowerCase().includes(query.value.toLowerCase())
+  );
+});
+
+const hasLabels = computed(() => labels.value.length > 0);
+const hasFilteredLabels = computed(() => filteredLabels.value.length > 0);
+
+const isLabelSelected = label => {
+  return selectedLabels.value.includes(label);
+};
+
+const onClose = () => {
+  emit('close');
+};
+
+const handleAssign = () => {
+  if (selectedLabels.value.length > 0) {
+    emit('assign', selectedLabels.value);
+  }
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="onClose"
+    class="absolute ltr:right-2 rtl:left-2 top-12 origin-top-right z-20 w-60 bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md"
+    role="dialog"
+    aria-labelledby="label-dialog-title"
+  >
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between p-2.5">
+      <span class="text-sm font-medium">{{
+        t('BULK_ACTION.LABELS.ASSIGN_LABELS')
+      }}</span>
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
+    </div>
+    <div class="flex flex-col max-h-60 min-h-0">
+      <header class="py-2 px-2.5">
+        <Input
+          v-model="query"
+          type="search"
+          :placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+          icon-left="i-lucide-search"
+          size="sm"
+          class="w-full"
+          :aria-label="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+        />
+      </header>
+      <ul
+        v-if="hasLabels"
+        class="flex-1 overflow-y-auto m-0 list-none"
+        role="listbox"
+        :aria-label="t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+      >
+        <li v-if="!hasFilteredLabels" class="p-2 text-center">
+          <span class="text-sm text-n-slate-11">{{
+            t('BULK_ACTION.LABELS.NO_LABELS_FOUND')
+          }}</span>
+        </li>
+        <li
+          v-for="label in filteredLabels"
+          :key="label.id"
+          class="my-1 mx-0 py-0 px-2.5"
+          role="option"
+          :aria-selected="isLabelSelected(label.title)"
+        >
+          <label
+            class="items-center rounded-md cursor-pointer flex py-1 px-2.5 hover:bg-n-slate-3 dark:hover:bg-n-solid-3 has-[:checked]:bg-n-slate-2"
+          >
+            <input
+              v-model="selectedLabels"
+              type="checkbox"
+              :value="label.title"
+              class="my-0 ltr:mr-2.5 rtl:ml-2.5"
+              :aria-label="label.title"
+            />
+            <span
+              class="overflow-hidden flex-grow w-full text-sm whitespace-nowrap text-ellipsis"
+            >
+              {{ label.title }}
+            </span>
+            <span
+              class="rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak"
+              :style="{ backgroundColor: label.color }"
+            />
+          </label>
+        </li>
+      </ul>
+      <div v-else class="p-2 text-center">
+        <span class="text-sm text-n-slate-11">{{
+          t('CONTACTS_BULK_ACTIONS.NO_LABELS_FOUND')
+        }}</span>
+      </div>
+      <footer class="p-2">
+        <NextButton
+          sm
+          type="submit"
+          class="w-full"
+          :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
+          :disabled="!selectedLabels.length"
+          @click="handleAssign"
+        />
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.triangle {
+  @apply block z-10 absolute text-left -top-3 ltr:right-[--triangle-position] rtl:left-[--triangle-position];
+
+  svg path {
+    @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
+  }
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/TeamActions.vue

@@ -0,0 +1,145 @@
+<script>
+import { mapGetters } from 'vuex';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  emits: ['assignTeam', 'close'],
+
+  data() {
+    return {
+      query: '',
+      selectedteams: [],
+    };
+  },
+  computed: {
+    ...mapGetters({ teams: 'teams/getTeams' }),
+    filteredTeams() {
+      return [
+        { name: 'None', id: 0 },
+        ...this.teams.filter(team =>
+          team.name.toLowerCase().includes(this.query.toLowerCase())
+        ),
+      ];
+    },
+  },
+  methods: {
+    assignTeam(key) {
+      this.$emit('assignTeam', key);
+    },
+    onClose() {
+      this.$emit('close');
+    },
+  },
+};
+</script>
+
+<template>
+  <div v-on-clickaway="onClose" class="bulk-action__teams">
+    <div class="triangle">
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
+      </svg>
+    </div>
+    <div class="flex items-center justify-between header">
+      <span>{{ $t('BULK_ACTION.TEAMS.TEAM_SELECT_LABEL') }}</span>
+      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
+    </div>
+    <div class="container">
+      <div class="team__list-container">
+        <ul>
+          <li class="search-container">
+            <div
+              class="flex items-center justify-between h-8 gap-2 agent-list-search"
+            >
+              <fluent-icon icon="search" class="search-icon" size="16" />
+              <input
+                v-model="query"
+                type="search"
+                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+                class="reset-base !outline-0 !text-sm agent--search_input"
+              />
+            </div>
+          </li>
+          <template v-if="filteredTeams.length">
+            <li v-for="team in filteredTeams" :key="team.id">
+              <div class="team__list-item" @click="assignTeam(team)">
+                <span class="my-0 ltr:ml-2 rtl:mr-2 text-n-slate-12">
+                  {{ team.name }}
+                </span>
+              </div>
+            </li>
+          </template>
+          <li v-else>
+            <div class="team__list-item">
+              <span class="my-0 ltr:ml-2 rtl:mr-2 text-n-slate-12">
+                {{ $t('BULK_ACTION.TEAMS.NO_TEAMS_AVAILABLE') }}
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bulk-action__teams {
+  @apply max-w-[75%] absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
+  .header {
+    @apply p-2.5;
+
+    span {
+      @apply text-sm font-medium;
+    }
+  }
+
+  .container {
+    @apply overflow-y-auto max-h-[15rem];
+    .team__list-container {
+      @apply h-full;
+    }
+    .agent-list-search {
+      @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
+      .search-icon {
+        @apply text-n-slate-10;
+      }
+
+      .agent--search_input {
+        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent w-full h-[unset];
+      }
+    }
+  }
+  .triangle {
+    @apply block z-10 absolute text-left -top-3 ltr:right-[--triangle-position] rtl:left-[--triangle-position];
+
+    svg path {
+      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
+    }
+  }
+}
+ul {
+  @apply m-0 list-none;
+
+  li {
+    &:last-child {
+      .agent-list-item {
+        @apply last:rounded-b-lg;
+      }
+    }
+  }
+}
+
+.team__list-item {
+  @apply flex items-center p-2.5 cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
+  span {
+    @apply text-sm;
+  }
+}
+
+.search-container {
+  @apply py-0 px-2.5 sticky top-0 z-20 bg-n-alpha-3 backdrop-blur-[100px];
+}
+</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/UpdateActions.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+
+import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
+import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  showResolve: {
+    type: Boolean,
+    default: true,
+  },
+  showReopen: {
+    type: Boolean,
+    default: true,
+  },
+  showSnooze: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['update', 'close']);
+
+const { t } = useI18n();
+
+const actions = ref([
+  { icon: 'i-lucide-check', key: 'resolved' },
+  { icon: 'i-lucide-redo', key: 'open' },
+  { icon: 'i-lucide-alarm-clock', key: 'snoozed' },
+]);
+
+const updateConversations = key => {
+  if (key === 'snoozed') {
+    // If the user clicks on the snooze option from the bulk action change status dropdown.
+    // Open the snooze option for bulk action in the cmd bar.
+    const ninja = document.querySelector('ninja-keys');
+    ninja?.open({ parent: 'bulk_action_snooze_conversation' });
+  } else {
+    emit('update', key);
+  }
+};
+
+const onClose = () => {
+  emit('close');
+};
+
+const showAction = key => {
+  const actionsMap = {
+    resolved: props.showResolve,
+    open: props.showReopen,
+    snoozed: props.showSnooze,
+  };
+  return actionsMap[key] || false;
+};
+
+const actionLabel = key => {
+  const labelsMap = {
+    resolved: t('CONVERSATION.HEADER.RESOLVE_ACTION'),
+    open: t('CONVERSATION.HEADER.REOPEN_ACTION'),
+    snoozed: t('BULK_ACTION.UPDATE.SNOOZE_UNTIL'),
+  };
+  return labelsMap[key] || '';
+};
+</script>
+
+<template>
+  <div
+    v-on-clickaway="onClose"
+    class="absolute z-20 w-auto origin-top-right border border-solid rounded-lg shadow-md ltr:right-2 rtl:left-2 top-12 bg-n-alpha-3 backdrop-blur-[100px] border-n-weak"
+  >
+    <div
+      class="right-[var(--triangle-position)] block z-10 absolute text-left -top-3"
+    >
+      <svg height="12" viewBox="0 0 24 12" width="24">
+        <path
+          d="M20 12l-8-8-12 12"
+          fill-rule="evenodd"
+          stroke-width="1px"
+          class="fill-n-alpha-3 backdrop-blur-[100px] stroke-n-weak"
+        />
+      </svg>
+    </div>
+    <div class="p-2.5 flex gap-1 items-center justify-between">
+      <span class="text-sm font-medium text-n-slate-12">
+        {{ $t('BULK_ACTION.UPDATE.CHANGE_STATUS') }}
+      </span>
+      <Button ghost xs slate icon="i-lucide-x" @click="onClose" />
+    </div>
+    <div class="px-2.5 pt-0 pb-2.5">
+      <WootDropdownMenu class="m-0 list-none">
+        <template v-for="action in actions">
+          <WootDropdownItem v-if="showAction(action.key)" :key="action.key">
+            <Button
+              ghost
+              sm
+              slate
+              class="!w-full !justify-start"
+              :icon="action.icon"
+              :label="actionLabel(action.key)"
+              @click="updateConversations(action.key)"
+            />
+          </WootDropdownItem>
+        </template>
+      </WootDropdownMenu>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/composables/chatlist/useBulkActions.js

@@ -23,15 +23,9 @@ export function useBulkActions() {
 
   function deSelectConversation(conversationId, inboxId) {
     store.dispatch('bulkActions/removeSelectedConversationIds', conversationId);
-    // Only remove one instance of the inboxId, not all
-    // This handles the case where multiple conversations from the same inbox are selected
-    const index = selectedInboxes.value.indexOf(inboxId);
-    if (index > -1) {
-      selectedInboxes.value = [
-        ...selectedInboxes.value.slice(0, index),
-        ...selectedInboxes.value.slice(index + 1),
-      ];
-    }
+    selectedInboxes.value = selectedInboxes.value.filter(
+      item => item !== inboxId
+    );
   }
 
   function resetBulkActions() {

app/javascript/dashboard/constants/globals.js

@@ -21,6 +21,7 @@ export default {
     PRIORITY_DESC: 'priority_desc',
     WAITING_SINCE_ASC: 'waiting_since_asc',
     WAITING_SINCE_DESC: 'waiting_since_desc',
+    PRIORITY_DESC_CREATED_AT_ASC: 'priority_desc_created_at_asc',
   },
   ARTICLE_STATUS_TYPES: {
     DRAFT: 0,
@@ -39,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',