Merge branch 'develop' into feat(v5)/expanded-chatlist

.circleci/config.yml

@@ -93,8 +93,8 @@ jobs:
               exit 1
             fi
             mkdir -p ~/tmp
-            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/7.19.0/openapi-generator-cli-7.19.0.jar > ~/tmp/openapi-generator-cli-7.19.0.jar
-            java -jar ~/tmp/openapi-generator-cli-7.19.0.jar validate -i swagger/swagger.json
+            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
+            java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
 
       # Bundle audit
       - run:

AGENTS.md

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

@@ -268,7 +268,6 @@ group :development, :test do
   gem 'seed_dump'
   gem 'shoulda-matchers'
   gem 'simplecov', '>= 0.21', require: false
-  gem 'skooma'
   gem 'spring'
   gem 'spring-watcher-listen'
 end

Gemfile.lock

@@ -191,7 +191,7 @@ GEM
     coderay (1.1.3)
     commonmarker (0.23.10)
     concurrent-ruby (1.3.5)
-    connection_pool (2.5.5)
+    connection_pool (2.5.3)
     crack (1.0.0)
       bigdecimal
       rexml
@@ -473,12 +473,6 @@ GEM
       hana (~> 1.3)
       regexp_parser (~> 2.0)
       uri_template (~> 0.7)
-    json_skooma (0.2.5)
-      bigdecimal
-      hana (~> 1.3)
-      regexp_parser (~> 2.0)
-      uri-idna (~> 0.2)
-      zeitwerk (~> 2.6)
     judoscale-rails (1.8.2)
       judoscale-ruby (= 1.8.2)
       railties
@@ -742,7 +736,7 @@ GEM
       ffi (~> 1.0)
     redis (5.0.6)
       redis-client (>= 0.9.0)
-    redis-client (0.26.4)
+    redis-client (0.22.2)
       connection_pool
     redis-namespace (1.10.0)
       redis (>= 4)
@@ -916,9 +910,6 @@ GEM
       simplecov_json_formatter (~> 0.1)
     simplecov-html (0.13.2)
     simplecov_json_formatter (0.1.4)
-    skooma (0.3.7)
-      json_skooma (~> 0.2.5)
-      zeitwerk (~> 2.6)
     slack-ruby-client (2.7.0)
       faraday (>= 2.0.1)
       faraday-mashify
@@ -979,7 +970,6 @@ GEM
     unicode-emoji (4.0.4)
     uniform_notifier (1.17.0)
     uri (1.1.1)
-    uri-idna (0.3.1)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
@@ -1153,7 +1143,6 @@ DEPENDENCIES
   sidekiq_alive
   simplecov (>= 0.21)
   simplecov_json_formatter
-  skooma
   slack-ruby-client (~> 2.7.0)
   spring
   spring-watcher-listen

Makefile

@@ -40,12 +40,8 @@ run:
 	fi
 
 force_run:
-	@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"
+	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
 force_run_tunnel:

VERSION_CW

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

app/actions/contact_identify_action.rb

@@ -104,7 +104,7 @@ class ContactIdentifyAction
     # blank identifier or email will throw unique index error
     # TODO: replace reject { |_k, v| v.blank? } with compact_blank when rails is upgraded
     @contact.discard_invalid_attrs if discard_invalid_attrs
-    @contact.save! if @contact.changed?
+    @contact.save!
     enqueue_avatar_job
   end
 

app/builders/messages/facebook/message_builder.rb

@@ -105,19 +105,15 @@ 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: content_attributes,
+      content_attributes: {
+        in_reply_to_external_id: response.in_reply_to_external_id
+      },
       sender: @outgoing_echo ? nil : @contact_inbox.contact
     }
   end

app/builders/messages/messenger/message_builder.rb

@@ -2,17 +2,12 @@ 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 unsupported file
+    # This check handles very rare case if there are multiple files to attach with only one usupported file
     return if unsupported_file_type?(attachment['type'])
 
-    params = attachment_params(attachment)
-    attachment_obj = @message.attachments.new(params.except(:remote_file_url))
+    attachment_obj = @message.attachments.new(attachment_params(attachment).except(:remote_file_url))
     attachment_obj.save!
-    if facebook_reel?(attachment)
-      update_facebook_reel_content(attachment)
-    elsif params[:remote_file_url]
-      attach_file(attachment_obj, params[:remote_file_url])
-    end
+    attach_file(attachment_obj, attachment_params(attachment)[:remote_file_url]) if attachment_params(attachment)[:remote_file_url]
     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'
@@ -31,7 +26,7 @@ class Messages::Messenger::MessageBuilder
   end
 
   def attachment_params(attachment)
-    file_type = normalize_file_type(attachment['type'])
+    file_type = attachment['type'].to_sym
     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
@@ -105,28 +100,6 @@ 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,7 +1,6 @@
 class V2::ReportBuilder
   include DateRangeHelper
   include ReportHelper
-
   attr_reader :account, :params
 
   DEFAULT_GROUP_BY = 'day'.freeze

app/builders/v2/reports/agent_summary_builder.rb

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

app/builders/v2/reports/base_summary_builder.rb

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

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

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

app/builders/v2/reports/inbox_summary_builder.rb

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

app/builders/v2/reports/label_summary_builder.rb

@@ -7,7 +7,8 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
     @account = account
     @params = params
 
-    @timezone = timezone_name_from_params(params[:timezone], params[:timezone_offset])
+    timezone_offset = (params[:timezone_offset] || 0).to_f
+    @timezone = ActiveSupport::TimeZone[timezone_offset]&.name
   end
   # rubocop:enable Lint/MissingSuper
 

app/builders/v2/reports/team_summary_builder.rb

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

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

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

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

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

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

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

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

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

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

@@ -40,7 +40,7 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def reorder
-    Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
+    Article.update_positions(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, :reorder]
+  before_action :fetch_category, except: [:index, :create]
   before_action :set_current_page, only: [:index]
 
   def index
@@ -32,11 +32,6 @@ 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
@@ -44,7 +39,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/concerns/whatsapp_health_management.rb

@@ -1,55 +0,0 @@
-module Api::V1::Accounts::Concerns::WhatsappHealthManagement
-  extend ActiveSupport::Concern
-
-  included do
-    skip_before_action :check_authorization, only: [:health, :register_webhook]
-    before_action :check_admin_authorization?, only: [:register_webhook]
-    before_action :validate_whatsapp_cloud_channel, only: [:health, :register_webhook]
-  end
-
-  def sync_templates
-    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?
-
-    trigger_template_sync
-    render status: :ok, json: { message: 'Template sync initiated successfully' }
-  rescue StandardError => e
-    render status: :internal_server_error, json: { error: e.message }
-  end
-
-  def health
-    health_data = Whatsapp::HealthService.new(@inbox.channel).fetch_health_status
-    render json: health_data
-  rescue StandardError => e
-    Rails.logger.error "[INBOX HEALTH] Error fetching health data: #{e.message}"
-    render json: { error: e.message }, status: :unprocessable_entity
-  end
-
-  def register_webhook
-    Whatsapp::WebhookSetupService.new(@inbox.channel).register_callback
-
-    render json: { message: 'Webhook registered successfully' }, status: :ok
-  rescue StandardError => e
-    Rails.logger.error "[INBOX WEBHOOK] Webhook registration failed: #{e.message}"
-    render json: { error: e.message }, status: :unprocessable_entity
-  end
-
-  private
-
-  def validate_whatsapp_cloud_channel
-    return if @inbox.channel.is_a?(Channel::Whatsapp) && @inbox.channel.provider == 'whatsapp_cloud'
-
-    render json: { error: 'Health data only available for WhatsApp Cloud API channels' }, status: :bad_request
-  end
-
-  def whatsapp_channel?
-    @inbox.whatsapp? || (@inbox.twilio? && @inbox.channel.whatsapp?)
-  end
-
-  def trigger_template_sync
-    if @inbox.whatsapp?
-      Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
-    elsif @inbox.twilio? && @inbox.channel.whatsapp?
-      Channels::Twilio::TemplatesSyncJob.perform_later(@inbox.channel)
-    end
-  end
-end

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

@@ -201,9 +201,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   end
 
   def fetch_contact
-    contact_scope = Current.account.contacts
-    contact_scope = contact_scope.includes(contact_inboxes: [:inbox]) if @include_contact_inboxes
-    @contact = contact_scope.find(params[:id])
+    @contact = Current.account.contacts.includes(contact_inboxes: [:inbox]).find(params[:id])
   end
 
   def process_avatar_from_url

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/inboxes_controller.rb

@@ -4,9 +4,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   before_action :fetch_agent_bot, only: [:set_agent_bot]
   before_action :validate_limit, only: [:create]
   # we are already handling the authorization in fetch inbox
-  before_action :check_authorization, except: [:show]
-
-  include Api::V1::Accounts::Concerns::WhatsappHealthManagement
+  before_action :check_authorization, except: [:show, :health]
+  before_action :validate_whatsapp_cloud_channel, only: [:health]
 
   def index
     @inboxes = policy_scope(Current.account.inboxes.order_by_name.includes(:channel, { avatar_attachment: [:blob] }))
@@ -71,6 +70,23 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
   end
 
+  def sync_templates
+    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?
+
+    trigger_template_sync
+    render status: :ok, json: { message: 'Template sync initiated successfully' }
+  rescue StandardError => e
+    render status: :internal_server_error, json: { error: e.message }
+  end
+
+  def health
+    health_data = Whatsapp::HealthService.new(@inbox.channel).fetch_health_status
+    render json: health_data
+  rescue StandardError => e
+    Rails.logger.error "[INBOX HEALTH] Error fetching health data: #{e.message}"
+    render json: { error: e.message }, status: :unprocessable_entity
+  end
+
   private
 
   def fetch_inbox
@@ -82,6 +98,12 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     @agent_bot = AgentBot.find(params[:agent_bot]) if params[:agent_bot]
   end
 
+  def validate_whatsapp_cloud_channel
+    return if @inbox.channel.is_a?(Channel::Whatsapp) && @inbox.channel.provider == 'whatsapp_cloud'
+
+    render json: { error: 'Health data only available for WhatsApp Cloud API channels' }, status: :bad_request
+  end
+
   def create_channel
     return unless allowed_channel_types.include?(permitted_params[:channel][:type])
 
@@ -178,6 +200,18 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   def get_channel_attributes(channel_type)
     channel_type.constantize.const_defined?(:EDITABLE_ATTRS) ? channel_type.constantize::EDITABLE_ATTRS.presence : []
   end
+
+  def whatsapp_channel?
+    @inbox.whatsapp? || (@inbox.twilio? && @inbox.channel.whatsapp?)
+  end
+
+  def trigger_template_sync
+    if @inbox.whatsapp?
+      Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
+    elsif @inbox.twilio? && @inbox.channel.whatsapp?
+      Channels::Twilio::TemplatesSyncJob.perform_later(@inbox.channel)
+    end
+  end
 end
 
 Api::V1::Accounts::InboxesController.prepend_mod_with('Api::V1::Accounts::InboxesController')

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' unless GlobalConfigService.account_signup_enabled?
+    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
   end
 
   def validate_captcha

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

@@ -19,7 +19,7 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
       contact = @contact
     end
 
-    @contact_inbox.update(hmac_verified: true) if should_verify_hmac?
+    @contact_inbox.update(hmac_verified: true) if should_verify_hmac? && valid_hmac?
 
     identify_contact(contact)
   end

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

@@ -112,7 +112,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     common_params.merge({
                           since: range[:current][:since],
                           until: range[:current][:until],
-                          timezone: params[:timezone],
                           timezone_offset: params[:timezone_offset]
                         })
   end
@@ -121,7 +120,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     common_params.merge({
                           since: range[:previous][:since],
                           until: range[:previous][:until],
-                          timezone: params[:timezone],
                           timezone_offset: params[:timezone_offset]
                         })
   end
@@ -131,7 +129,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
                           metric: params[:metric],
                           since: params[:since],
                           until: params[:until],
-                          timezone: params[:timezone],
                           timezone_offset: params[:timezone_offset]
                         })
   end

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

@@ -3,15 +3,15 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
-    render_report_with(V2::Reports::AgentSummaryBuilder, type: :agent)
+    render_report_with(V2::Reports::AgentSummaryBuilder)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
+    render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
+    render_report_with(V2::Reports::InboxSummaryBuilder)
   end
 
   def label
@@ -36,18 +36,15 @@ 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] = permitted_params[:timezone] if permitted_params[:timezone].present?
-    @builder_params[:timezone_offset] = permitted_params[:timezone_offset] if permitted_params[:timezone_offset].present?
   end
 
-  def render_report_with(builder_class, type: nil)
-    builder_params = type.present? ? @builder_params.merge(type: type) : @builder_params
-    builder = builder_class.new(account: Current.account, params: builder_params)
+  def render_report_with(builder_class)
+    builder = builder_class.new(account: Current.account, params: @builder_params)
     render json: builder.build
   end
 
   def permitted_params
-    params.permit(:since, :until, :business_hours, :timezone, :timezone_offset)
+    params.permit(:since, :until, :business_hours)
   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' unless GlobalConfigService.account_signup_enabled?
+    raise ActionController::RoutingError, 'Not Found' if GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') == 'false'
   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_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_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 @resource.is_a?(AgentBot) && agent_bot_accessible?
+    return if agent_bot_accessible?
 
     render_unauthorized('Access to this endpoint is not authorized for bots')
   end

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -51,7 +51,8 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   end
 
   def account_signup_allowed?
-    GlobalConfigService.account_signup_enabled?
+    # set it to true by default, this is the behaviour across the app
+    GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false') != 'false'
   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: ConfirmedAtField,
+    confirmed_at: Field::DateTime,
     confirmation_sent_at: Field::DateTime,
     unconfirmed_email: Field::String,
     name: Field::String.with_options(searchable: true),

app/fields/confirmed_at_field.rb

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

app/finders/conversation_finder.rb

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

app/helpers/timezone_helper.rb

@@ -1,10 +1,4 @@
 module TimezoneHelper
-  def timezone_name_from_params(timezone, offset)
-    return timezone if timezone.present? && ActiveSupport::TimeZone[timezone].present?
-
-    timezone_name_from_offset(offset)
-  end
-
   # ActiveSupport TimeZone is not aware of the current time, so ActiveSupport::Timezone[offset]
   # would return the timezone without considering day light savings. To get the correct timezone,
   # this method uses zone.now.utc_offset for comparison as referenced in the issues below

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 = '', options = {}) {
+  search(search = '', page = 1, sortAttr = 'name', label = '') {
     let requestURL = `${this.url}/search?${buildContactParams(
       page,
       sortAttr,
       label,
       search
     )}`;
-    return axios.get(requestURL, { signal: options.signal });
+    return axios.get(requestURL);
   }
 
   active(page = 1, sortAttr = 'name') {

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

@@ -25,12 +25,6 @@ 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/inboxHealth.js

@@ -9,10 +9,6 @@ class InboxHealthAPI extends ApiClient {
   getHealthStatus(inboxId) {
     return axios.get(`${this.url}/${inboxId}/health`);
   }
-
-  registerWebhook(inboxId) {
-    return axios.post(`${this.url}/${inboxId}/register_webhook`);
-  }
 }
 
 export default new InboxHealthAPI();

app/javascript/dashboard/api/reports.js

@@ -2,7 +2,6 @@
 import ApiClient from './ApiClient';
 
 const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
-const getTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
 
 class ReportsAPI extends ApiClient {
   constructor() {
@@ -27,7 +26,6 @@ class ReportsAPI extends ApiClient {
         id,
         group_by: groupBy,
         business_hours: businessHours,
-        timezone: getTimeZone(),
         timezone_offset: getTimeOffset(),
       },
     });
@@ -43,7 +41,6 @@ class ReportsAPI extends ApiClient {
         id,
         group_by: groupBy,
         business_hours: businessHours,
-        timezone: getTimeZone(),
         timezone_offset: getTimeOffset(),
       },
     });
@@ -108,8 +105,6 @@ class ReportsAPI extends ApiClient {
         type: 'account',
         group_by: groupBy,
         business_hours: businessHours,
-        timezone: getTimeZone(),
-        timezone_offset: getTimeOffset(),
       },
     });
   }

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

@@ -68,19 +68,7 @@ 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',
-        { 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 }
+        '/api/v1/contacts/search?include_contact_inboxes=false&page=1&sort=date&q=leads&labels[]=customer-support'
       );
     });
 

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

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

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

@@ -2,8 +2,6 @@ import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
 
 describe('#Reports API', () => {
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
   it('creates correct instance', () => {
     expect(reportsAPI).toBeInstanceOf(ApiClient);
     expect(reportsAPI.apiVersion).toBe('/api/v2');
@@ -48,7 +46,6 @@ describe('#Reports API', () => {
           since: 1621103400,
           until: 1621621800,
           type: 'account',
-          timezone,
           timezone_offset: -0,
         },
       });
@@ -62,7 +59,6 @@ describe('#Reports API', () => {
           group_by: undefined,
           id: undefined,
           since: 1621103400,
-          timezone,
           timezone_offset: -0,
           type: 'account',
           until: 1621621800,
@@ -144,8 +140,6 @@ describe('#Reports API', () => {
             type: 'account',
             group_by: 'date',
             business_hours: true,
-            timezone,
-            timezone_offset: -0,
           },
         }
       );

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

@@ -1,47 +0,0 @@
-import summaryReportsAPI from '../summaryReports';
-import ApiClient from '../ApiClient';
-
-describe('#Summary Reports API', () => {
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  it('creates correct instance', () => {
-    expect(summaryReportsAPI).toBeInstanceOf(ApiClient);
-    expect(summaryReportsAPI.apiVersion).toBe('/api/v2');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      get: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('includes timezone data in summary report requests', () => {
-      summaryReportsAPI.getAgentReports({
-        since: 1621103400,
-        until: 1621621800,
-        businessHours: true,
-      });
-
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v2/summary_reports/agent',
-        {
-          params: {
-            since: 1621103400,
-            until: 1621621800,
-            business_hours: true,
-            timezone,
-            timezone_offset: -0,
-          },
-        }
-      );
-    });
-  });
-});

app/javascript/dashboard/api/summaryReports.js

@@ -1,9 +1,6 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
-const getTimeOffset = () => -new Date().getTimezoneOffset() / 60;
-const getTimeZone = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
-
 class SummaryReportsAPI extends ApiClient {
   constructor() {
     super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
@@ -15,8 +12,6 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
-        timezone: getTimeZone(),
-        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -27,8 +22,6 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
-        timezone: getTimeZone(),
-        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -39,8 +32,6 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
-        timezone: getTimeZone(),
-        timezone_offset: getTimeOffset(),
       },
     });
   }
@@ -51,8 +42,6 @@ class SummaryReportsAPI extends ApiClient {
         since,
         until,
         business_hours: businessHours,
-        timezone: getTimeZone(),
-        timezone_offset: getTimeOffset(),
       },
     });
   }

app/javascript/dashboard/components-next/AssignmentPolicy/components/story/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/Campaigns/CampaignLayout.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 defineProps({
@@ -29,11 +28,7 @@ const handleButtonClick = () => {
             {{ headerTitle }}
           </span>
           <div
-            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'] },
-            ]"
+            v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
             <Button

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  count: { type: Number, required: true },
+  alignBottom: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+
+const displayCount = computed(() =>
+  props.count > 9 ? t('CHAT_LIST.UNREAD_COUNT_OVERFLOW') : props.count
+);
+</script>
+
+<template>
+  <span
+    v-if="count > 0"
+    class="bg-n-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

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

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

@@ -0,0 +1,19 @@
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-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
+  () => uiSettings.value.is_contact_sidebar_open || false
 );
 const isCopilotPanelOpen = computed(
-  () => uiSettings.value.is_copilot_panel_open
+  () => uiSettings.value.is_copilot_panel_open || false
 );
 
 const toggleConversationSidebarToggle = () => {
@@ -35,7 +35,7 @@ const toggleConversationSidebarToggle = () => {
 
 const handleConversationSidebarToggle = () => {
   updateUISettings({
-    is_contact_sidebar_open: true,
+    is_contact_sidebar_open: !isContactSidebarOpen.value,
     is_copilot_panel_open: false,
   });
 };
@@ -43,7 +43,7 @@ const handleConversationSidebarToggle = () => {
 const handleCopilotSidebarToggle = () => {
   updateUISettings({
     is_contact_sidebar_open: false,
-    is_copilot_panel_open: true,
+    is_copilot_panel_open: !isCopilotPanelOpen.value,
   });
 };
 

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

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

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

@@ -0,0 +1,86 @@
+<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', 'executeCopilotAction']);
+const emit = defineEmits(['update:modelValue']);
 
 const slots = useSlots();
 
@@ -113,9 +113,6 @@ 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/EmptyState/Portal/PortalEmptyState.vue

@@ -26,7 +26,6 @@ const onPortalCreate = ({ slug: portalSlug, locale }) => {
   <EmptyStateLayout
     :title="$t('HELP_CENTER.TITLE')"
     :subtitle="$t('HELP_CENTER.NEW_PAGE.DESCRIPTION')"
-    class="bg-n-surface-1"
   >
     <template #empty-state-item>
       <div class="grid grid-cols-2 gap-4 p-px">

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

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

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

@@ -98,17 +98,6 @@ 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>
@@ -133,7 +122,6 @@ const reorderCategories = async reorderedGroup => {
         :categories="categories"
         @click="openCategoryArticles"
         @action="handleAction"
-        @reorder="reorderCategories"
       />
       <CategoryEmptyState
         v-else

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

@@ -1,22 +1,14 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
-import Draggable from 'vuedraggable';
 import CategoryCard from 'dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue';
 
-const props = defineProps({
+defineProps({
   categories: {
     type: Array,
     required: true,
   },
 });
 
-const emit = defineEmits(['click', 'action', 'reorder']);
-
-const localCategories = ref(props.categories);
-
-const dragEnabled = computed(() => {
-  return localCategories.value?.length > 1;
-});
+const emit = defineEmits(['click', 'action']);
 
 const handleClick = slug => {
   emit('click', slug);
@@ -25,57 +17,21 @@ 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>
-  <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>
+  <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>
 </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 {
-  createContactSearcher,
+  searchContacts,
   createNewContact,
   fetchContactableInboxes,
   processContactableInboxes,
@@ -39,7 +39,6 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
-const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
 const { width: windowWidth } = useWindowSize();
@@ -108,17 +107,15 @@ const onContactSearch = debounce(
     isSearching.value = true;
     contacts.value = [];
     try {
-      const results = await searchContacts(query);
-      // null means the request was aborted (a newer search is in-flight),
-      if (results === null) return;
-      contacts.value = results;
+      contacts.value = await searchContacts(query);
       isSearching.value = false;
     } catch (error) {
-      isSearching.value = false;
       useAlert(t('COMPOSE_NEW_CONVERSATION.CONTACT_SEARCH.ERROR_MESSAGE'));
+    } finally {
+      isSearching.value = false;
     }
   },
-  400,
+  300,
   false
 );
 
@@ -141,7 +138,6 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
     contact = rest;
   }
   selectedContact.value = contact;
-  contacts.value = [];
   if (contact?.id) {
     isFetchingInboxes.value = true;
     try {
@@ -277,7 +273,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: ['dialog.ProseMirror-prompt-backdrop'] },
+      { ignore: ['div.ProseMirror-prompt'] },
     ]"
     class="relative"
     :class="{

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

@@ -15,9 +15,6 @@ 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';
@@ -25,7 +22,6 @@ 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: () => [] },
@@ -46,7 +42,6 @@ const props = defineProps({
 
 const emit = defineEmits([
   'searchContacts',
-  'resetContactSearch',
   'discard',
   'updateSelectedContact',
   'updateTargetInbox',
@@ -56,8 +51,6 @@ const emit = defineEmits([
 
 const DEFAULT_FORMATTING = 'Context::Default';
 
-const copilot = useCopilotReply();
-
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -164,8 +157,22 @@ const isAnyDropdownActive = computed(() => {
 });
 
 const handleContactSearch = value => {
-  showContactsDropdown.value = value.trim().length > 1;
-  emit('searchContacts', 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 });
 };
 
 const handleDropdownUpdate = (type, value) => {
@@ -179,17 +186,13 @@ const handleDropdownUpdate = (type, value) => {
 };
 
 const searchCcEmails = value => {
-  showBccEmailsDropdown.value = false;
-  emit('resetContactSearch');
-  showCcEmailsDropdown.value = value.trim().length >= 2;
-  emit('searchContacts', value);
+  showCcEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const searchBccEmails = value => {
-  showCcEmailsDropdown.value = false;
-  emit('resetContactSearch');
-  showBccEmailsDropdown.value = value.trim().length >= 2;
-  emit('searchContacts', value);
+  showBccEmailsDropdown.value = true;
+  emit('searchContacts', { keys: ['email'], query: value });
 };
 
 const setSelectedContact = async ({ value, action, ...rest }) => {
@@ -207,7 +210,6 @@ 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) {
@@ -234,7 +236,6 @@ const removeSignatureFromMessage = () => {
 
 const removeTargetInbox = value => {
   v$.value.$reset();
-  copilot.reset(false);
   removeSignatureFromMessage();
 
   stripMessageFormatting(DEFAULT_FORMATTING);
@@ -244,7 +245,6 @@ const removeTargetInbox = value => {
 };
 
 const clearSelectedContact = () => {
-  copilot.reset(false);
   removeSignatureFromMessage();
   emit('clearSelectedContact');
   state.message = '';
@@ -276,7 +276,6 @@ const handleAttachFile = files => {
 };
 
 const clearForm = () => {
-  copilot.reset(false);
   Object.assign(state, {
     message: '',
     subject: '',
@@ -339,24 +338,6 @@ 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>
@@ -387,7 +368,6 @@ useKeyboardEvents({
         :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"
@@ -416,7 +396,6 @@ useKeyboardEvents({
         :has-errors="validationStates.isMessageInvalid"
         :channel-type="inboxChannelType"
         :medium="targetInbox?.medium || ''"
-        :copilot="copilot"
       />
 
       <AttachmentPreviews
@@ -426,15 +405,7 @@ useKeyboardEvents({
       />
     </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,16 +44,14 @@ const bccEmailsArray = computed(() =>
 );
 
 const contactEmailsList = computed(() => {
-  return props.contacts
-    ?.filter(contact => contact.email)
-    .map(({ name, id, email }) => ({
-      id,
-      label: email,
-      email,
-      thumbnail: { name: name, src: '' },
-      value: id,
-      action: 'email',
-    }));
+  return props.contacts?.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
@@ -99,6 +97,7 @@ 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"
@@ -132,6 +131,7 @@ 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,15 +1,9 @@
-<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,7 +6,6 @@ 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: {
@@ -29,10 +28,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  isFetchingInboxes: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -76,9 +71,7 @@ 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,7 +3,6 @@ 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 },
@@ -11,7 +10,6 @@ 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}`);
@@ -22,67 +20,29 @@ 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 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 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>
 </template>

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

@@ -176,45 +176,40 @@ export const prepareWhatsAppMessagePayload = ({
   };
 };
 
-// API Calls
-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;
+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';
       }
-      throw error;
-    }
+      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 || [];
+};
+
 export const createNewContact = async input => {
   const payload = {
     name: input.startsWith('+')

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

@@ -336,13 +336,72 @@ describe('composeConversationHelper', () => {
     });
   });
 
-  describe('API calls', () => {
-    describe('createContactSearcher', () => {
-      let searchContacts;
-      beforeEach(() => {
-        searchContacts = helpers.createContactSearcher();
-      });
+  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', () => {
       it('searches contacts and returns camelCase results', async () => {
         const mockPayload = [
           {
@@ -354,11 +413,14 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
 
         expect(result).toEqual([
           {
@@ -370,56 +432,16 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        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;
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
         });
-        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 () => {
@@ -447,11 +469,14 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });
 
         // Should only return contacts with either email or phone number
         expect(result).toEqual([
@@ -471,21 +496,24 @@ describe('composeConversationHelper', () => {
           },
         ]);
 
-        expect(ContactAPI.search).toHaveBeenCalledWith(
-          'john',
-          1,
-          'name',
-          '',
-          expect.objectContaining({ signal: expect.any(AbortSignal) })
-        );
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
       });
 
       it('handles empty search results', async () => {
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: [] },
         });
 
-        const result = await searchContacts('nonexistent');
+        const result = await helpers.searchContacts('nonexistent');
         expect(result).toEqual([]);
       });
 
@@ -508,11 +536,11 @@ describe('composeConversationHelper', () => {
           },
         ];
 
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
           data: { payload: mockPayload },
         });
 
-        const result = await searchContacts('test');
+        const result = await helpers.searchContacts('test');
 
         expect(result).toEqual([
           {
@@ -534,36 +562,6 @@ 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/captain/assistant/AssistantPlayground.vue

@@ -18,18 +18,10 @@ const newMessage = ref('');
 const isLoading = ref(false);
 
 const formatMessagesForApi = () => {
-  return messages.value.map(message => {
-    const payload = {
-      role: message.sender,
-      content: message.content,
-    };
-
-    if (message.sender === 'assistant' && message.agentName) {
-      payload.agent_name = message.agentName;
-    }
-
-    return payload;
-  });
+  return messages.value.map(message => ({
+    role: message.sender,
+    content: message.content,
+  }));
 };
 
 const resetConversation = () => {
@@ -70,7 +62,6 @@ const sendMessage = async () => {
     messages.value.push({
       content: data.response,
       sender: 'assistant',
-      agentName: data.agent_name,
       timestamp: new Date().toISOString(),
     });
   } catch (error) {
@@ -80,12 +71,6 @@ const sendMessage = async () => {
     isLoading.value = false;
   }
 };
-
-const handleEnterKey = event => {
-  if (event.isComposing) return;
-  event.preventDefault();
-  sendMessage();
-};
 </script>
 
 <template>
@@ -119,7 +104,7 @@ const handleEnterKey = event => {
         v-model="newMessage"
         class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
         :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
-        @keydown.enter.exact="handleEnterKey"
+        @keyup.enter="sendMessage"
       />
       <NextButton
         ghost

app/javascript/dashboard/components-next/copilot/CopilotInput.vue

@@ -29,12 +29,6 @@ const handleInput = () => {
   nextTick(adjustHeight);
 };
 
-const handleEnterKey = event => {
-  if (event.isComposing) return;
-  event.preventDefault();
-  sendMessage();
-};
-
 onMounted(() => {
   nextTick(adjustHeight);
 });
@@ -49,7 +43,7 @@ onMounted(() => {
       class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
       rows="1"
       @input="handleInput"
-      @keydown.enter.exact="handleEnterKey"
+      @keydown.enter.exact.prevent="sendMessage"
     />
     <button
       class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"

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

@@ -96,17 +96,6 @@ 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');
 };
@@ -124,9 +113,9 @@ defineExpose({ open, close });
         positionClass,
         overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
       ]"
-      @close.prevent="handleDialogClose"
+      @close="close"
     >
-      <OnClickOutside @trigger="handleClickOutside">
+      <OnClickOutside @trigger="close">
         <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,7 +11,13 @@ const props = defineProps({
     type: Array,
     default: () => [],
     validator: value => {
-      return value.every(item => item.action && item.value && item.label);
+      return value.every(
+        item =>
+          item.action &&
+          item.value !== undefined &&
+          item.value !== null &&
+          item.label
+      );
     },
   },
   menuSections: {
@@ -22,6 +28,10 @@ const props = defineProps({
     type: Number,
     default: 20,
   },
+  roundedThumbnail: {
+    type: Boolean,
+    default: true,
+  },
   showSearch: {
     type: Boolean,
     default: false,
@@ -42,9 +52,17 @@ 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']);
+const emit = defineEmits(['action', 'search', 'empty']);
 
 const { t } = useI18n();
 
@@ -96,9 +114,13 @@ const filteredMenuSections = computed(() => {
 });
 
 const handleSearchInput = event => {
-  if (props.disableLocalFiltering) {
-    emit('search', event.target.value);
-  }
+  emit('search', event.target.value);
+
+  const isEmpty = hasSections.value
+    ? filteredMenuSections.value.length === 0
+    : filteredMenuItems.value.length === 0;
+
+  if (isEmpty) emit('empty');
 };
 
 const handleAction = item => {
@@ -190,22 +212,27 @@ onMounted(() => {
               :name="item.thumbnail.name"
               :src="item.thumbnail.src"
               :size="thumbnailSize"
-              rounded-full
+              :rounded-full="roundedThumbnail"
+            />
+          </slot>
+          <slot name="icon" :item="item">
+            <Icon
+              v-if="item.icon"
+              :icon="item.icon"
+              class="flex-shrink-0 size-3.5"
             />
           </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>
-          <span
-            v-if="item.label"
-            class="min-w-0 text-sm truncate"
-            :class="labelClass"
-          >
-            {{ item.label }}
-          </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" />
         </button>
         <div
           v-if="sectionIndex < filteredMenuSections.length - 1"
@@ -214,6 +241,9 @@ 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"
@@ -233,22 +263,27 @@ onMounted(() => {
             :name="item.thumbnail.name"
             :src="item.thumbnail.src"
             :size="thumbnailSize"
-            rounded-full
+            :rounded-full="roundedThumbnail"
+          />
+        </slot>
+        <slot name="icon" :item="item">
+          <Icon
+            v-if="item.icon"
+            :icon="item.icon"
+            class="flex-shrink-0 size-3.5"
           />
         </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>
-        <span
-          v-if="item.label"
-          class="min-w-0 text-sm truncate"
-          :class="labelClass"
-        >
-          {{ item.label }}
-        </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" />
       </button>
     </template>
     <div
@@ -258,7 +293,9 @@ onMounted(() => {
       {{
         isSearching
           ? t('DROPDOWN_MENU.SEARCHING')
-          : t('DROPDOWN_MENU.EMPTY_STATE')
+          : searchQuery
+            ? t('DROPDOWN_MENU.EMPTY_STATE')
+            : t(emptyStateMessage)
       }}
     </div>
     <slot name="footer" />

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

@@ -39,38 +39,45 @@ 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: object with a "name" property → return name
-  // Case 4: primitive (string, number, etc.) → return as is
+  // 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
   return value?.name ?? value;
 };
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center w-full gap-2 mx-auto">
+  <div class="flex flex-wrap items-center w-full gap-x-1.5 gap-y-2 mx-auto">
     <template v-for="(filter, index) in appliedFilters" :key="index">
       <div
         v-if="index < maxVisibleFilters"
-        class="inline-flex items-center gap-2 h-7"
+        class="inline-flex items-center gap-1.5 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"
+          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"
           @click="emit('openFilter')"
         >
           <span
-            class="lowercase whitespace-nowrap first-letter:capitalize text-n-slate-12"
+            class="lowercase whitespace-nowrap font-440 first-letter:capitalize text-n-slate-12"
           >
             {{ replaceUnderscoreWithSpace(filter.attributeKey) }}
           </span>
-          <span class="px-1 text-xs text-n-slate-10 whitespace-nowrap">
+          <span class="px-1 text-xs text-n-slate-11 font-440 whitespace-nowrap">
             {{ formatOperatorLabel(filter.filterOperator) }}
           </span>
           <span
-            v-if="filter.values"
+            v-if="formatFilterValue(filter.values)"
             :title="formatFilterValue(filter.values)"
-            class="lowercase truncate text-n-slate-12"
+            class="lowercase truncate text-n-slate-12 font-440"
             :class="{
               'first-letter:capitalize': shouldCapitalizeFirstLetter(
                 filter.attributeKey
@@ -86,7 +93,7 @@ const formatFilterValue = value => {
           "
         >
           <span
-            class="content-center h-full px-1 text-xs font-medium uppercase rounded-lg text-n-slate-10"
+            class="content-center h-full px-1 text-xs font-440 uppercase rounded-lg text-n-slate-11"
           >
             {{ filter.queryOperator }}
           </span>
@@ -95,7 +102,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"
+      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"
       @click="emit('openFilter')"
     >
       {{ moreFiltersLabel }}
@@ -105,9 +112,10 @@ const formatFilterValue = value => {
       v-if="showClearButton"
       :label="clearButtonLabel"
       size="xs"
-      class="!px-1"
-      variant="ghost"
+      class="!px-1 hover:!no-underline"
+      link
       @click="emit('clearFilters')"
     />
+    <slot name="actions" />
   </div>
 </template>

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

@@ -1,12 +1,14 @@
 <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';
@@ -42,6 +44,13 @@ 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 }];
 };
@@ -104,69 +113,80 @@ const outsideClickHandler = [
 
 <template>
   <div
-    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"
+    :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')"
   >
-    <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
+      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>
       </div>
-    </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') }}
+      <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') }}
         </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,8 +108,10 @@ 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'"
+        :message="
+          v$.name.$error ? $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') : ''
+        "
+        :message-type="v$.name.$error ? 'error' : 'info'"
         @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-alpha-2 py-2 rounded-lg h-8 flex items-center px-0"
+        class="bg-n-button-color outline outline-1 outline-n-container py-2 rounded-lg h-8 flex items-center px-0"
         @click="toggle"
       >
         <div
@@ -119,11 +119,13 @@ const toggleOption = option => {
           <Icon icon="i-lucide-plus" />
         </div>
       </button>
-      <Button v-else sm slate faded @click="toggle">
+      <Button v-else sm slate solid @click="toggle">
         <template #icon>
-          <Icon icon="i-lucide-plus" class="text-n-slate-11" />
+          <Icon icon="i-lucide-plus" class="text-n-slate-11 flex-shrink-0" />
         </template>
-        <span class="text-n-slate-11">{{ t('COMBOBOX.PLACEHOLDER') }}</span>
+        <span class="text-n-slate-11 truncate">{{
+          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,7 +129,6 @@ 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 },
@@ -173,10 +172,7 @@ const variant = computed(() => {
     return MESSAGE_VARIANTS.AGENT;
   }
 
-  const isBot =
-    props.sender?.type === SENDER_TYPES.AGENT_BOT ||
-    props.senderType === SENDER_TYPES.AGENT_BOT ||
-    (!props.sender && !props.additionalAttributes?.senderName);
+  const isBot = !props.sender || props.sender.type === SENDER_TYPES.AGENT_BOT;
   if (isBot && props.messageType === MESSAGE_TYPES.OUTGOING) {
     return MESSAGE_VARIANTS.BOT;
   }
@@ -454,13 +450,12 @@ const avatarInfo = computed(() => {
     };
   }
 
-  // If no sender, check for Slack (or other integration) sender info
+  // If no sender, return bot info
   if (!props.sender) {
-    const { senderName, senderAvatarUrl } = props.additionalAttributes || {};
-    if (senderName) {
-      return { name: senderName, src: senderAvatarUrl ?? '' };
-    }
-    return { name: t('CONVERSATION.BOT'), src: '' };
+    return {
+      name: t('CONVERSATION.BOT'),
+      src: '',
+    };
   }
 
   const { sender } = props;

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

@@ -81,7 +81,6 @@ 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/taginput/TagInput.vue

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

app/javascript/dashboard/components/ChatList.vue

@@ -1,69 +1,32 @@
 <script setup>
-// [TODO] This componet is too big and bulky to be in the same file, we can consider splitting this into multiple
-// composables and components, useVirtualChatList, useChatlistFilters
-import {
-  ref,
-  unref,
-  provide,
-  computed,
-  watch,
-  onMounted,
-  defineEmits,
-} from 'vue';
+import { ref, provide, computed, watch, onMounted, defineEmits } from 'vue';
 import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
+import { useRouter } from 'vue-router';
 import {
   useMapGetter,
   useFunctionGetter,
 } from 'dashboard/composables/store.js';
 
-import { Virtualizer } from 'virtua/vue';
 import ChatListHeader from './ChatListHeader.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 ConversationList from './ConversationList.vue';
 import ChatTypeTabs from './widgets/ChatTypeTabs.vue';
-import ConversationItem from './ConversationItem.vue';
-import DeleteCustomViews from 'dashboard/routes/dashboard/customviews/DeleteCustomViews.vue';
 import ConversationBulkActions from './widgets/conversation/conversationBulkActions/Index.vue';
-import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import IntersectionObserver from 'dashboard/components/IntersectionObserver.vue';
-import ConversationResolveAttributesModal from 'dashboard/components-next/ConversationWorkflow/ConversationResolveAttributesModal.vue';
+import ChatListFilters from './ChatListFilters.vue';
+import ConversationActiveFiltersPreview from './widgets/conversation/ConversationActiveFiltersPreview.vue';
 
 import { useUISettings } from 'dashboard/composables/useUISettings';
-import { useAlert } from 'dashboard/composables';
-import { useChatListKeyboardEvents } from 'dashboard/composables/chatlist/useChatListKeyboardEvents';
-import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
-import { useFilter } from 'shared/composables/useFilter';
-import { useTrack } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import {
-  useCamelCase,
-  useSnakeCase,
-} from 'dashboard/composables/useTransformKeys';
+import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useEmitter } from 'dashboard/composables/emitter';
-import { useConversationRequiredAttributes } from 'dashboard/composables/useConversationRequiredAttributes';
-
+import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions';
 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({
@@ -79,34 +42,15 @@ const props = defineProps({
 const emit = defineEmits(['conversationLoad']);
 const { uiSettings } = useUISettings();
 const { t } = useI18n();
-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 router = useRouter();
 
 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 appliedFilter = ref([]);
-const advancedFilterTypes = ref(
-  advancedFilterOptions.map(filter => ({
-    ...filter,
-    attributeName: t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
-  }))
-);
+const chatListFiltersRef = ref(null);
 
 const currentUser = useMapGetter('getCurrentUser');
 const chatLists = useMapGetter('getFilteredConversations');
@@ -117,18 +61,10 @@ const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
 const appliedFilters = useMapGetter('getAppliedConversationFiltersV2');
-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');
+const folders = useMapGetter('customViews/getConversationCustomViews');
 
-useChatListKeyboardEvents(conversationListRef);
 const {
   selectedConversations,
   selectedInboxes,
@@ -137,57 +73,28 @@ 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 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 hasActiveFolders = computed(() => {
-  return Boolean(activeFolder.value && props.foldersId !== 0);
+  return Boolean(props.foldersId !== 0);
+});
+
+const activeFolder = computed(() => {
+  return chatListFiltersRef.value?.activeFolder;
+});
+
+const isFilterModalOpen = computed(() => {
+  return chatListFiltersRef.value?.showAdvancedFilters ?? false;
 });
 
 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);
 });
@@ -231,11 +138,6 @@ const hasCurrentPageEndReached = useFunctionGetter(
   currentPageFilterKey
 );
 
-const conversationCustomAttributes = useFunctionGetter(
-  'attributes/getAttributesByModel',
-  'conversation_attribute'
-);
-
 const activeAssigneeTabCount = computed(() => {
   const count = assigneeTabItems.value.find(
     item => item.key === activeAssigneeTab.value
@@ -305,7 +207,7 @@ const pageTitle = computed(() => {
   if (props.conversationType === 'unattended') {
     return t('CHAT_LIST.UNATTENDED_HEADING');
   }
-  if (hasActiveFolders.value) {
+  if (hasActiveFolders.value && activeFolder.value?.name) {
     return activeFolder.value.name;
   }
   return t('CHAT_LIST.TAB_HEADING');
@@ -327,7 +229,7 @@ const conversationList = computed(() => {
     localConversationList = [...chatLists.value];
   }
 
-  if (activeFolder.value) {
+  if (activeFolder.value?.query?.payload) {
     const { payload } = activeFolder.value.query;
     localConversationList = localConversationList.filter(conversation => {
       return matchesFilters(conversation, payload);
@@ -338,7 +240,7 @@ const conversationList = computed(() => {
 });
 
 const showEndOfListMessage = computed(() => {
-  return (
+  return !!(
     conversationList.value.length &&
     hasCurrentPageEndReached.value &&
     !chatListLoading.value
@@ -375,190 +277,68 @@ function emitConversationLoaded() {
 }
 
 function fetchFilteredConversations(payload) {
-  payload = useSnakeCase(payload);
+  const transformedPayload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
-      queryData: filterQueryGenerator(payload),
+      queryData: filterQueryGenerator(transformedPayload),
       page,
     })
     .then(emitConversationLoaded);
-
-  showAdvancedFilters.value = false;
 }
 
 function fetchSavedFilteredConversations(payload) {
-  payload = useSnakeCase(payload);
+  const transformedPayload = useSnakeCase(payload);
   let page = currentFiltersPage.value + 1;
   store
     .dispatch('fetchFilteredConversations', {
-      queryData: payload,
+      queryData: transformedPayload,
       page,
     })
     .then(emitConversationLoaded);
 }
 
-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);
-  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() {
   store.dispatch('updateChatListFilters', conversationFilters.value);
   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) {
+  if (hasActiveFolders.value && activeFolder.value?.query) {
     const payload = activeFolder.value.query;
     fetchSavedFilteredConversations(payload);
   }
@@ -575,7 +355,7 @@ function loadMoreConversations() {
 
   if (!hasAppliedFiltersOrActiveFolders.value) {
     fetchConversations();
-  } else if (hasActiveFolders.value) {
+  } else if (hasActiveFolders.value && activeFolder.value?.query) {
     const payload = activeFolder.value.query;
     fetchSavedFilteredConversations(payload);
   } else if (hasAppliedFilters.value) {
@@ -583,14 +363,6 @@ function loadMoreConversations() {
   }
 }
 
-// Use IntersectionObserver instead of @scroll since Virtualizer only emits on user scroll.
-// If the list doesn’t fill the viewport, loading can stall.
-// IntersectionObserver triggers as soon as the sentinel is visible.
-const intersectionObserverOptions = computed(() => ({
-  root: conversationListRef.value,
-  rootMargin: '100px 0px 100px 0px',
-}));
-
 function updateAssigneeTab(selectedTab) {
   if (activeAssigneeTab.value !== selectedTab) {
     resetBulkActions();
@@ -611,174 +383,10 @@ 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 getConversationById.value(item)?.status === status;
+    return store.getters.getConversationById(item)?.status === status;
   });
 }
 
@@ -806,46 +414,19 @@ 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()
@@ -854,6 +435,10 @@ watch(
   computed(() => props.conversationType),
   () => resetAndFetchData()
 );
+watch(
+  computed(() => props.foldersId),
+  () => resetAndFetchData()
+);
 
 watch(activeFolder, (newVal, oldVal) => {
   if (newVal !== oldVal) {
@@ -875,7 +460,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1 relative"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
@@ -890,32 +475,25 @@ watch(conversationFilters, (newVal, oldVal) => {
       :is-on-expanded-layout="isOnExpandedLayout"
       :conversation-stats="conversationStats"
       :is-list-loading="chatListLoading && !conversationList.length"
-      @add-folders="onClickOpenAddFoldersModal"
-      @delete-folders="onClickOpenDeleteFoldersModal"
-      @filters-modal="onToggleAdvanceFiltersModal"
-      @reset-filters="resetAndFetchData"
+      :is-filter-modal-open="isFilterModalOpen"
+      @filters-modal="chatListFiltersRef?.onToggleAdvanceFiltersModal"
       @basic-filter-change="onBasicFilterChange"
     />
 
-    <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"
+    <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"
     />
 
     <ChatTypeTabs
@@ -925,93 +503,45 @@ watch(conversationFilters, (newVal, oldVal) => {
       is-compact
       @chat-tab-change="updateAssigneeTab"
     />
-
-    <p
-      v-if="!chatListLoading && !conversationList.length"
-      class="flex overflow-auto justify-center items-center p-4"
-    >
-      {{ $t('CHAT_LIST.LIST.404') }}
-    </p>
+    <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"
+    />
     <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"
     />
-    <div
-      ref="conversationListRef"
-      class="flex-1 min-h-0 overflow-y-auto conversations-list"
-      :class="{ '!overflow-hidden': isContextMenuOpen }"
+
+    <p
+      v-if="!chatListLoading && !conversationList.length"
+      class="flex items-center justify-center p-4 overflow-auto"
     >
-      <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"
+      {{ $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"
     />
   </div>
 </template>

app/javascript/dashboard/components/ChatListFilters.vue

@@ -0,0 +1,309 @@
+<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,15 +16,10 @@ 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([
-  'addFolders',
-  'deleteFolders',
-  'resetFilters',
-  'basicFilterChange',
-  'filtersModal',
-]);
+const emit = defineEmits(['basicFilterChange', 'filtersModal']);
 
 const { uiSettings, updateUISettings } = useUISettings();
 
@@ -56,61 +51,33 @@ const toggleConversationLayout = () => {
 </script>
 
 <template>
-  <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-between gap-2 px-4 h-[3.25rem]">
     <div class="flex items-center justify-center min-w-0">
-      <h1
-        class="text-base font-medium truncate text-n-slate-12"
-        :title="pageTitle"
-      >
+      <h1 class="text-heading-2 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-md capitalize bg-n-slate-3 text-xxs text-n-slate-12 shrink-0"
+        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"
         :title="allCount"
       >
         {{ formattedAllCount }}
       </span>
       <span
         v-if="!hasAppliedFiltersOrActiveFolders"
-        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"
+        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"
       >
         {{ $t(`CHAT_LIST.CHAT_STATUS_FILTER_ITEMS.${activeStatus}.TEXT`) }}
       </span>
     </div>
-    <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>
+    <div class="flex items-center gap-2">
+      <ConversationBasicFilter
+        v-if="!hasAppliedFiltersOrActiveFolders"
+        :is-on-expanded-layout="isOnExpandedLayout"
+        @change-filter="onBasicFilterChange"
+      />
       <template v-if="hasActiveFolders">
         <div class="relative">
           <NextButton
@@ -118,8 +85,8 @@ const toggleConversationLayout = () => {
             v-tooltip.top-end="$t('FILTER.CUSTOM_VIEWS.EDIT.EDIT_BUTTON')"
             icon="i-lucide-pen-line"
             slate
-            xs
-            faded
+            sm
+            :variant="isFilterModalOpen ? 'faded' : 'ghost'"
             @click="emit('filtersModal')"
           />
           <div
@@ -128,15 +95,6 @@ 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
@@ -144,8 +102,8 @@ const toggleConversationLayout = () => {
           v-tooltip.right="$t('FILTER.TOOLTIP_LABEL')"
           icon="i-lucide-list-filter"
           slate
-          xs
-          faded
+          sm
+          :variant="isFilterModalOpen ? 'faded' : 'ghost'"
           @click="emit('filtersModal')"
         />
         <div
@@ -154,11 +112,6 @@ 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,55 +1,175 @@
-<script>
-import ConversationCard from './widgets/conversation/ConversationCard.vue';
-export default {
-  components: {
-    ConversationCard,
+<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,
   },
-  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,
-    },
+  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,
+  },
+  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"
@@ -57,18 +177,19 @@ export default {
     :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="assignAgent"
+    @assign-agent="onAssignAgent"
     @assign-team="assignTeam"
-    @assign-label="assignLabels"
-    @remove-label="removeLabels"
+    @assign-label="onAssignLabels"
+    @remove-label="onRemoveLabels"
     @update-conversation-status="updateConversationStatus"
     @context-menu-toggle="toggleContextMenu"
     @mark-as-unread="markAsUnread"
     @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
-    @delete-conversation="deleteConversation"
+    @delete-conversation="handleDelete"
   />
 </template>

app/javascript/dashboard/components/ConversationList.vue

@@ -0,0 +1,265 @@
+<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,5 +1,6 @@
 <script setup>
 import { computed, inject } from 'vue';
+import { useNumberFormatter } from 'shared/composables/useNumberFormatter';
 
 const props = defineProps({
   index: {
@@ -28,11 +29,14 @@ const props = defineProps({
   },
 });
 
+const { formatCompactWithDecimal } = useNumberFormatter();
+
 const activeIndex = inject('activeIndex');
 const updateActiveIndex = inject('updateActiveIndex');
 
 const active = computed(() => props.index === activeIndex.value);
-const getItemCount = computed(() => props.count);
+const count = computed(() => props.count);
+const getItemCount = computed(() => formatCompactWithDecimal(count.value));
 
 const onTabClick = event => {
   event.preventDefault();
@@ -59,7 +63,11 @@ const onTabClick = event => {
       {{ name }}
       <div
         v-if="showBadge"
-        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]"
+        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="[
           active
             ? 'bg-n-blue-3 text-n-blue-11'

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

@@ -24,10 +24,6 @@ export default {
       type: [String, Date, Number],
       default: '',
     },
-    conversationId: {
-      type: [String, Number],
-      default: '',
-    },
   },
   data() {
     return {
@@ -78,15 +74,6 @@ 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) {
@@ -124,6 +111,7 @@ 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-3 -mt-1 py-0 [&_ul]:p-0 h-10"
+    class="w-full px-4 py-0 [&_ul]:p-0 h-10"
     @change="onTabChange"
   >
     <woot-tabs-item
       v-for="(item, index) in items"
       :key="item.key"
-      class="text-sm [&_a]:font-medium"
+      class="text-sm"
       :index="index"
       :name="item.name"
       :count="item.count"

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

@@ -107,8 +107,7 @@ function onKeydown(view, event) {
   emit('keydown');
 
   // Handle Enter key to send message (Shift+Enter for new line)
-  // Skip if IME composition is active (CJK character confirmation)
-  if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+  if (event.key === 'Enter' && !event.shiftKey) {
     event.preventDefault();
     handleSubmit();
     return true; // Prevent ProseMirror's default Enter handling

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

@@ -10,23 +10,11 @@ import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 
 import Icon from 'next/icon/Icon.vue';
 
-const props = defineProps({
+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']);
@@ -37,13 +25,6 @@ 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 = [];
@@ -61,9 +42,8 @@ const menuItems = computed(() => {
       icon: 'i-fluent-pen-sparkle-24-regular',
     });
   } else if (
-    props.conversationId &&
     replyMode.value === REPLY_EDITOR_MODES.REPLY &&
-    effectiveContent.value
+    draftMessage.value
   ) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.IMPROVE_REPLY'),
@@ -72,7 +52,7 @@ const menuItems = computed(() => {
     });
   }
 
-  if (effectiveContent.value) {
+  if (draftMessage.value) {
     items.push(
       {
         label: t(
@@ -125,7 +105,7 @@ const menuItems = computed(() => {
 
 const generalMenuItems = computed(() => {
   const items = [];
-  if (props.conversationId && replyMode.value === REPLY_EDITOR_MODES.REPLY) {
+  if (replyMode.value === REPLY_EDITOR_MODES.REPLY) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUGGESTION'),
       key: 'reply_suggestion',
@@ -133,10 +113,7 @@ const generalMenuItems = computed(() => {
     });
   }
 
-  if (
-    props.conversationId &&
-    (replyMode.value === REPLY_EDITOR_MODES.NOTE || true)
-  ) {
+  if (replyMode.value === REPLY_EDITOR_MODES.NOTE || true) {
     items.push({
       label: t('INTEGRATION_SETTINGS.OPEN_AI.REPLY_OPTIONS.SUMMARIZE'),
       key: 'summarize',
@@ -199,8 +176,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 && isEditorMenuPopover }"
-    :style="hasSelection && isEditorMenuPopover ? selectionMenuStyle : {}"
+    :class="{ 'selection-menu': hasSelection }"
+    :style="hasSelection ? selectionMenuStyle : {}"
   >
     <div v-if="menuItems.length > 0" class="flex flex-col items-start gap-2.5">
       <div