Merge branch 'develop' into codex/update-msgpack-security

chore(deps): update msgpack
2026-06-30 14:43:00 +05:30 · 2026-06-30 14:39:11 +05:30
1578 changed files with 2462 additions and 76914 deletions
@@ -77,8 +77,7 @@ jobs:
      - node/install:
          node-version: '24.13'
-      - node/install-pnpm:
+      - node/install-pnpm
          version: '10.2.0'
      - node/install-packages:
          pkg-manager: pnpm
          override-ci-command: pnpm i
@@ -119,8 +118,7 @@ jobs:
      - checkout
      - node/install:
          node-version: '24.13'
-      - node/install-pnpm:
+      - node/install-pnpm
          version: '10.2.0'
      - node/install-packages:
          pkg-manager: pnpm
          override-ci-command: pnpm i
@@ -151,8 +149,7 @@ jobs:
      - checkout
      - node/install:
          node-version: '24.13'
-      - node/install-pnpm:
+      - node/install-pnpm
          version: '10.2.0'
      - node/install-packages:
          pkg-manager: pnpm
          override-ci-command: pnpm i
@@ -272,9 +272,9 @@ AZURE_APP_SECRET=
 # ENABLE_SIDEKIQ_DEQUEUE_LOGGER=false
-# AI powered features (Captain)
+# AI powered features
-# The OpenAI API key and endpoint for Captain are not configured via .env.
+## OpenAI key
-# Set them at Super Admin > App Configs > Captain (CAPTAIN_OPEN_AI_API_KEY, CAPTAIN_OPEN_AI_ENDPOINT).
+# OPENAI_API_KEY=
 # Housekeeping/Performance related configurations
 # Set to true if you want to remove stale contact inboxes
@@ -85,8 +85,8 @@
 ## Project-Specific
 - **Translations**:
-  - For product and source-string changes, only update `en.yml` and `en.json`; other languages are handled through Crowdin and the community
+  - Only update `en.yml` and `en.json`
-  - Crowdin-generated translation sync PRs may update non-English locale files; do not flag those changes solely for modifying translated locale files
+  - Other languages are handled by the community
  - Backend i18n → `en.yml`, Frontend i18n → `en.json`
 - **Frontend**:
  - Use `components-next/` for message bubbles (the rest is being deprecated)
@@ -211,14 +211,13 @@ GEM
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    datadog (2.38.0)
+    datadog (2.19.0)
-      cgi
+      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      datadog-ruby_core_source (~> 3.5, >= 3.5.3)
+      libdatadog (~> 18.1.0.1.0)
-      libdatadog (~> 36.0.0.1.0)
+      libddwaf (~> 1.24.1.0.3)
      libddwaf (~> 1.30.0.0.0)
      logger
      msgpack
-    datadog-ruby_core_source (3.5.3)
+    datadog-ruby_core_source (3.4.1)
    date (3.5.1)
    debug (1.8.0)
      irb (>= 1.5.0)
@@ -523,16 +522,15 @@ GEM
      logger (~> 1.6)
    letter_opener (1.10.0)
      launchy (>= 2.2, < 4)
-    libdatadog (36.0.0.1.0)
+    libdatadog (18.1.0.1.0)
-    libdatadog (36.0.0.1.0-arm64-darwin)
+    libdatadog (18.1.0.1.0-x86_64-linux)
-    libdatadog (36.0.0.1.0-x86_64-linux)
+    libddwaf (1.24.1.0.3)
    libddwaf (1.30.0.0.2)
      ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-arm64-darwin)
+    libddwaf (1.24.1.0.3-arm64-darwin)
      ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-x86_64-darwin)
+    libddwaf (1.24.1.0.3-x86_64-darwin)
      ffi (~> 1.0)
-    libddwaf (1.30.0.0.2-x86_64-linux)
+    libddwaf (1.24.1.0.3-x86_64-linux)
      ffi (~> 1.0)
    line-bot-api (1.28.0)
    lint_roller (1.1.0)
@@ -549,7 +547,7 @@ GEM
      activesupport (>= 4)
      railties (>= 4)
      request_store (~> 1.0)
-    loofah (2.25.2)
+    loofah (2.23.1)
      crass (~> 1.0.2)
      nokogiri (>= 1.12.0)
    mail (2.8.1)
@@ -742,8 +740,8 @@ GEM
      activesupport (>= 5.0.0)
      minitest
      nokogiri (>= 1.6)
-    rails-html-sanitizer (1.7.1)
+    rails-html-sanitizer (1.6.1)
-      loofah (~> 2.25, >= 2.25.2)
+      loofah (~> 2.21)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
    rails-i18n (7.0.10)
      i18n (>= 0.7, < 2)
@@ -1032,7 +1030,7 @@ GEM
      addressable (>= 2.8.0)
      crack (>= 0.3.2)
      hashdiff (>= 0.4.0, < 2.0.0)
-    websocket-driver (0.8.2)
+    websocket-driver (0.7.7)
      base64
      websocket-extensions (>= 0.1.0)
    websocket-extensions (0.1.5)
@@ -1,4 +1,4 @@
-Copyright (c) 2017-2026 Chatwoot Inc.
+Copyright (c) 2017-2024 Chatwoot Inc.
 Portions of this software are licensed as follows:
@@ -1 +1 @@
-4.16.0
+4.15.1
@@ -1,213 +0,0 @@
 class V2::Reports::DrilldownBuilder
  include DateRangeHelper
  include TimezoneHelper
  DEFAULT_GROUP_BY = 'day'.freeze
  DEFAULT_PAGE = 1
  DEFAULT_PER_PAGE = 25
  MAX_PER_PAGE = 100
  SUPPORTED_GROUP_BY = %w[hour day week month year].freeze
  SUPPORTED_DIMENSION_TYPES = %w[account inbox agent label team].freeze
  MESSAGE_METRICS = {
    'incoming_messages_count' => :incoming,
    'outgoing_messages_count' => :outgoing
  }.freeze
  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
  pattr_initialize :account, :params
  def self.supported_dimension_type?(type) = SUPPORTED_DIMENSION_TYPES.include?((type.presence || 'account').to_s)
  def build
    records = paginated_records.to_a
    { meta: meta, payload: records.map { |record| record_serializer(records).serialize(record) } }
  end
  private
  def meta
    {
      metric: metric,
      record_type: record_type,
      bucket: {
        since: bucket_range.begin.to_i,
        until: bucket_range.end.to_i
      },
      current_page: current_page,
      per_page: per_page,
      total_count: paginated_records.total_count,
      conversation_count: conversation_count
    }
  end
  def conversation_count
    return paginated_records.total_count if conversation_metric?
    drilldown_scope.except(:includes).reorder(nil).distinct.count(:conversation_id)
  end
  def paginated_records
    @paginated_records ||= drilldown_scope.page(current_page).per(per_page)
  end
  def drilldown_scope
    if message_metric?
      message_scope
    elsif conversation_metric?
      conversation_scope
    else
      reporting_event_scope
    end
  end
  def message_scope
    scope.messages
         .where(account_id: account.id, created_at: bucket_range)
         .public_send(MESSAGE_METRICS.fetch(metric))
         .includes(:sender, conversation: [:assignee, :contact, :inbox])
         .reorder(created_at: :desc)
  end
  def conversation_scope
    scope.conversations
         .where(account_id: account.id, created_at: bucket_range)
         .includes(:assignee, :contact, :inbox)
         .order(created_at: :desc)
  end
  def reporting_event_scope
    events = scope.reporting_events
                  .where(account_id: account.id, name: raw_event_name, created_at: bucket_range)
                  .includes(:user, :inbox, conversation: [:assignee, :contact, :inbox])
                  .order(created_at: :desc)
    if raw_count_strategy == :exclude_bot_handoffs
      events = events.where.not(conversation_id: bot_handoff_conversation_ids_subquery)
    elsif raw_count_strategy == :distinct_conversation
      events = events.where(id: distinct_conversation_event_ids(events))
    end
    events
  end
  def bot_handoff_conversation_ids_subquery
    scope.reporting_events
         .where(account_id: account.id, name: :conversation_bot_handoff, created_at: range)
         .where.not(conversation_id: nil)
         .select(:conversation_id)
  end
  def distinct_conversation_event_ids(events)
    events.reorder(nil)
          .where.not(conversation_id: nil)
          .select('MAX(reporting_events.id)')
          .group(:conversation_id)
  end
  def record_serializer(records)
    @record_serializer ||= V2::Reports::DrilldownRecordSerializer.new(
      account,
      metric,
      use_business_hours?,
      records
    )
  end
  def bucket_range
    @bucket_range ||= begin
      bucket_start = Time.zone.at(params[:bucket_timestamp].to_i).in_time_zone(timezone)
      bucket_end = bucket_end_for(bucket_start)
      requested_start = Time.zone.at(params[:since].to_i)
      requested_end = Time.zone.at(params[:until].to_i)
      [bucket_start, requested_start].max...[bucket_end, requested_end].min
    end
  end
  def bucket_end_for(bucket_start)
    {
      'hour' => bucket_start + 1.hour,
      'day' => bucket_start + 1.day,
      'week' => bucket_start + 1.week,
      'month' => bucket_start + 1.month,
      'year' => bucket_start + 1.year
    }.fetch(group_by)
  end
  def scope
    case dimension_type
    when 'account' then account
    when 'inbox' then inbox
    when 'agent' then user
    when 'label' then label
    when 'team' then team
    else
      raise ArgumentError, "Unsupported drilldown dimension type: #{dimension_type}"
    end
  end
  def inbox = @inbox ||= account.inboxes.find(params[:id])
  def user = @user ||= account.users.find(params[:id])
  def label = @label ||= account.labels.find(params[:id])
  def team = @team ||= account.teams.find(params[:id])
  def metric
    params[:metric].to_s
  end
  def report_metric
    @report_metric ||= Reports::ReportMetricRegistry.fetch(metric)
  end
  def raw_event_name
    report_metric&.raw_event_name
  end
  def raw_count_strategy
    report_metric&.raw_count_strategy
  end
  def record_type
    return 'message' if message_metric? || MESSAGE_EVENT_METRICS.include?(metric)
    'conversation'
  end
  def message_metric?
    MESSAGE_METRICS.key?(metric)
  end
  def conversation_metric?
    metric == 'conversations_count'
  end
  def dimension_type
    (params[:type].presence || 'account').to_s
  end
  def group_by
    @group_by ||= SUPPORTED_GROUP_BY.include?(params[:group_by].to_s) ? params[:group_by].to_s : DEFAULT_GROUP_BY
  end
  def timezone
    @timezone ||= timezone_name_from_offset(params[:timezone_offset])
  end
  def current_page
    [params[:page].to_i, DEFAULT_PAGE].max
  end
  def per_page
    requested_per_page = params[:per_page].to_i
    requested_per_page = DEFAULT_PER_PAGE if requested_per_page <= 0
    [requested_per_page, MAX_PER_PAGE].min
  end
  def use_business_hours?
    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
  end
 end
@@ -1,199 +0,0 @@
 class V2::Reports::DrilldownRecordSerializer
  MESSAGE_EVENT_METRICS = %w[avg_first_response_time reply_time].freeze
  attr_reader :account, :metric, :use_business_hours, :records
  def initialize(account, metric, use_business_hours, records = [])
    @account = account
    @metric = metric
    @use_business_hours = use_business_hours
    @records = records
  end
  def serialize(record)
    return serialize_message(record) if record.is_a?(Message)
    return serialize_conversation_event(record) if record.is_a?(ReportingEvent)
    serialize_conversation(record)
  end
  private
  def serialize_message(message, metric_value: nil, occurred_at: nil)
    {
      record_type: 'message',
      conversation: conversation_attributes(message.conversation),
      message: message_attributes(message),
      metric_value: metric_value,
      occurred_at: (occurred_at || message.created_at).to_i
    }
  end
  def serialize_conversation_event(event)
    inferred_message = inferred_message_for(event)
    if inferred_message.present?
      return serialize_message(
        inferred_message,
        metric_value: event_metric_value(event),
        occurred_at: event_timestamp(event)
      )
    end
    serialize_conversation(
      event.conversation,
      metric_value: event_metric_value(event),
      occurred_at: event_timestamp(event),
      event_name: event.name
    )
  end
  def serialize_conversation(conversation, metric_value: nil, occurred_at: nil, event_name: nil)
    serialized_record = {
      record_type: 'conversation',
      conversation: conversation_attributes(conversation),
      message: nil,
      metric_value: metric_value,
      occurred_at: (occurred_at || conversation&.created_at)&.to_i
    }
    serialized_record[:event_name] = event_name if event_name.present?
    serialized_record
  end
  def conversation_attributes(conversation)
    return {} if conversation.blank?
    {
      id: conversation.id,
      display_id: conversation.display_id,
      contact_id: conversation.contact_id,
      contact_name: conversation.contact&.name,
      inbox_id: conversation.inbox_id,
      inbox_name: conversation.inbox&.name,
      assignee_id: conversation.assignee_id,
      assignee_name: conversation.assignee&.name,
      status: conversation.status,
      created_at: conversation.created_at.to_i,
      last_activity_at: conversation.last_activity_at.to_i,
      last_message: last_message_attributes(conversation)
    }
  end
  def message_attributes(message)
    {
      id: message.id,
      content: message.content,
      message_type: message.message_type,
      sender_name: message.sender&.try(:name),
      created_at: message.created_at.to_i
    }
  end
  def last_message_attributes(conversation)
    message = latest_messages_by_conversation_id[conversation.id]
    return if message.blank?
    message_attributes(message)
  end
  def inferred_message_for(event)
    return unless MESSAGE_EVENT_METRICS.include?(metric)
    return if event.conversation.blank? || event.event_end_time.blank?
    inferred_messages_by_event_id[event.id]
  end
  def first_response_event_with_user?(event)
    metric == 'avg_first_response_time' && event.user_id.present?
  end
  def message_inference_range(event)
    (event.event_end_time - 1.second)..(event.event_end_time + 1.second)
  end
  def event_metric_value(event)
    use_business_hours ? event.value_in_business_hours : event.value
  end
  def event_timestamp(event)
    event.event_end_time || event.created_at
  end
  def latest_messages_by_conversation_id
    @latest_messages_by_conversation_id ||= if conversation_ids.blank?
                                              {}
                                            else
                                              latest_messages.index_by(&:conversation_id)
                                            end
  end
  def latest_messages
    Message
      .where(account_id: account.id, conversation_id: conversation_ids)
      .where.not(message_type: :activity)
      .select('DISTINCT ON (messages.conversation_id) messages.*')
      .reorder(Arel.sql('messages.conversation_id, messages.created_at DESC, messages.id DESC'))
      .includes(:sender)
  end
  def inferred_messages_by_event_id
    @inferred_messages_by_event_id ||= inference_events.each_with_object({}) do |event, messages_by_event_id|
      messages_by_event_id[event.id] = inferred_message_candidates.find do |message|
        message_matches_event?(message, event)
      end
    end
  end
  def inferred_message_candidates
    @inferred_message_candidates ||= if inference_events.blank?
                                       []
                                     else
                                       inferred_messages.to_a
                                     end
  end
  def inferred_messages
    Message
      .where(account_id: account.id, conversation_id: inference_events.map(&:conversation_id).uniq)
      .where(created_at: inference_time_range)
      .where(message_type: %i[outgoing template])
      .includes(:sender)
      .reorder(created_at: :desc, id: :desc)
  end
  def message_matches_event?(message, event)
    message.conversation_id == event.conversation_id &&
      message.created_at.between?(
        message_inference_range(event).begin,
        message_inference_range(event).end
      ) &&
      message_sender_matches_event?(message, event)
  end
  def message_sender_matches_event?(message, event)
    return true unless first_response_event_with_user?(event)
    message.sender_id == event.user_id && message.sender_type == 'User'
  end
  def inference_time_range
    event_end_times = inference_events.map(&:event_end_time)
    (event_end_times.min - 1.second)..(event_end_times.max + 1.second)
  end
  def inference_events
    @inference_events ||= records.select do |record|
      record.is_a?(ReportingEvent) && record.conversation_id.present? && record.event_end_time.present?
    end
  end
  def conversation_ids
    @conversation_ids ||= records.filter_map { |record| conversation_id_for(record) }.uniq
  end
  def conversation_id_for(record)
    return record.conversation_id if record.is_a?(Message) || record.is_a?(ReportingEvent)
    record.id
  end
 end
@@ -30,8 +30,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  end
  def update
-    persist_article_changes if params[:article].present?
+    @article.update!(article_params) if params[:article].present?
-    render json: { message: @article.errors.full_messages.to_sentence }, status: :unprocessable_entity and return unless @article.valid?
+    render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
  end
  def destroy
@@ -40,8 +40,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
  end
  def reorder
-    positions = Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
+    Article.update_positions(portal: @portal, positions_hash: params[:positions_hash])
-    render json: { positions: positions }
+    head :ok
  end
  private
@@ -67,26 +67,12 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
  end
  # Draft-only autosaves must not bump the public-facing updated_at, so write
  # them with update_columns (which skips the timestamp). update_columns also
  # skips validations, so assign and validate first to avoid persisting content
  # that exceeds the column length limit.
  def persist_article_changes
    keys = article_params.to_h.keys
    if keys.any? && (keys - %w[draft_title draft_content]).empty?
      @article.assign_attributes(article_params)
      @article.update_columns(article_params.to_h) if @article.valid? # rubocop:disable Rails/SkipsModelValidations
    else
      @article.update!(article_params)
    end
  end
  def article_params
    params.require(:article).permit(
      :title, :slug, :position, :content, :description, :category_id, :author_id, :associated_article_id, :status,
-      :locale, :draft_title, :draft_content, meta: [:title,
+      :locale, meta: [:title,
-                                                    :description,
+                      :description,
-                                                    { tags: [] }]
+                      { tags: [] }]
    )
  end
@@ -2,8 +2,6 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
  before_action :fetch_inboxes
  def index
    # TODO: Remove this opt-in once mobile clients support AgentBot assignees in this payload.
    @include_agent_bots = params[:include_agent_bots].present?
    agent_ids = @inboxes.map do |inbox|
      authorize inbox, :show?
      member_ids = inbox.members.pluck(:user_id)
@@ -12,7 +10,6 @@ class Api::V1::Accounts::AssignableAgentsController < Api::V1::Accounts::BaseCon
    agent_ids = agent_ids.inject(:&)
    agents = Current.account.users.where(id: agent_ids)
    @assignable_agents = (agents + Current.account.administrators).uniq
    @agent_bots = @include_agent_bots ? AgentBot.accessible_to(Current.account) : []
  end
  private
@@ -2,14 +2,5 @@ class Api::V1::Accounts::BaseController < Api::BaseController
  include SwitchLocale
  include EnsureCurrentAccountHelper
  before_action :current_account
  before_action :validate_token_api_access, if: :authenticate_by_access_token?
  around_action :switch_locale_using_account_locale
  private
  def validate_token_api_access
    return if Current.account.api_and_webhooks_enabled?
    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
  end
 end
@@ -1,28 +0,0 @@
 class Api::V1::Accounts::BrandedEmailLayoutsController < Api::V1::Accounts::BaseController
  before_action :check_admin_authorization?
  def show
    set_branded_email_layout
  end
  def update
    unless Current.account.feature_enabled?(:branded_email_templates)
      render_could_not_create_error('Branded email templates feature is not enabled')
      return
    end
    branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
    EmailTemplate.update_account_branded_layout!(account: Current.account, body: branded_email_layout) if params.key?(:branded_email_layout)
    set_branded_email_layout
  rescue ActiveRecord::RecordInvalid => e
    render_could_not_create_error(e.record.errors.full_messages.join(', '))
  end
  private
  def set_branded_email_layout
    @branded_email_layout = EmailTemplate.account_branded_layout_template_for(Current.account)&.body
  end
 end
 Api::V1::Accounts::BrandedEmailLayoutsController.prepend_mod_with('Api::V1::Accounts::BrandedEmailLayoutsController')
@@ -6,7 +6,6 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
    page_access_token = params[:page_access_token]
    page_id = params[:page_id]
    inbox_name = params[:inbox_name]
    ActiveRecord::Base.transaction do
      facebook_channel = Current.account.facebook_pages.create!(
        page_id: page_id, user_access_token: user_access_token,
@@ -16,8 +15,6 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
      set_instagram_id(page_access_token, facebook_channel)
      set_avatar(@facebook_inbox, page_id)
    end
  rescue CustomExceptions::Inbox::LimitExceeded => e
    render_error_response(e)
  rescue StandardError => e
    ChatwootExceptionTracker.new(e).capture_exception
    Rails.logger.error "Error in register_facebook_page: #{e.message}"
@@ -66,7 +66,6 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
      config = Llm::Models.feature_config(feature_key)
      route = Llm::FeatureRouter.resolve(feature: feature_key, account: Current.account)
      config.merge(
        default: default_model_for(feature_key),
        enabled: account_features[feature_key] == true,
        model: route[:model],
        selected: route[:model],
@@ -75,10 +74,4 @@ class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::Bas
      )
    end
  end
  def default_model_for(feature_key)
    return Llm::FeatureRouter::CAPTAIN_V2_ASSISTANT_MODEL if feature_key == 'assistant' && Current.account.feature_enabled?('captain_integration_v2')
    Llm::Models.default_model_for(feature_key)
  end
 end
@@ -6,8 +6,6 @@ class Api::V1::Accounts::Channels::TwilioChannelsController < Api::V1::Accounts:
  def create
    process_create
  rescue CustomExceptions::Inbox::LimitExceeded => e
    render_error_response(e)
  rescue StandardError => e
    render_could_not_create_error(e.message)
  end
@@ -1,17 +1,6 @@
 class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage::DirectUploadsController
  include DeviseTokenAuth::Concerns::SetUserByToken
  include RequestExceptionHandler
  include AccessTokenAuthHelper
  include EnsureCurrentAccountHelper
  skip_before_action :verify_authenticity_token, if: :authenticate_by_access_token?
  around_action :handle_with_exception
  before_action :authenticate_access_token!, if: :authenticate_by_access_token?
  before_action :validate_bot_access_token!, if: :authenticate_by_access_token?
  before_action :authenticate_user!, unless: :authenticate_by_access_token?
  before_action :current_account
  before_action :validate_token_api_access, if: :authenticate_by_access_token?
  before_action :conversation
  def create
@@ -22,16 +11,6 @@ class Api::V1::Accounts::Conversations::DirectUploadsController < ActiveStorage:
  private
  def authenticate_by_access_token?
    request.headers[:api_access_token].present? || request.headers[:HTTP_API_ACCESS_TOKEN].present?
  end
  def validate_token_api_access
    return if Current.account.api_and_webhooks_enabled?
    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
  end
  def conversation
    @conversation ||= Current.account.conversations.find_by(display_id: params[:conversation_id])
  end
@@ -1,40 +1,27 @@
 class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accounts::Conversations::BaseController
  include Events::Types
  def show
    @participants = @conversation.conversation_participants
  end
  def create
    participant_ids_to_add = participants_to_be_added_ids
    ActiveRecord::Base.transaction do
-      @participants = participant_ids_to_add.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
+      @participants = participants_to_be_added_ids.map { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
    end
    notify_unread_count_change if participant_ids_to_add.any?
  end
  def update
    participant_ids_to_add = participants_to_be_added_ids
    participant_ids_to_remove = participants_to_be_removed_ids
    changed_participant_ids = participant_ids_to_add + participant_ids_to_remove
    ActiveRecord::Base.transaction do
-      participant_ids_to_add.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
+      participants_to_be_added_ids.each { |user_id| @conversation.conversation_participants.find_or_create_by(user_id: user_id) }
-      participant_ids_to_remove.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
+      participants_to_be_removed_ids.each { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
    end
    notify_unread_count_change if changed_participant_ids.any?
    @participants = @conversation.conversation_participants
    render action: 'show'
  end
  def destroy
    participant_ids_to_remove = current_participant_ids & params[:user_ids]
    ActiveRecord::Base.transaction do
      params[:user_ids].map { |user_id| @conversation.conversation_participants.find_by(user_id: user_id)&.destroy }
    end
    notify_unread_count_change if participant_ids_to_remove.any?
    head :ok
  end
@@ -51,11 +38,4 @@ class Api::V1::Accounts::Conversations::ParticipantsController < Api::V1::Accoun
  def current_participant_ids
    @current_participant_ids ||= @conversation.conversation_participants.pluck(:user_id)
  end
  def notify_unread_count_change
    return unless Current.account.feature_enabled?('conversation_unread_counts')
    return unless Current.account.feature_enabled?('unread_count_for_filters')
    Rails.configuration.dispatcher.dispatch(CONVERSATION_UNREAD_COUNT_CHANGED, Time.zone.now, conversation: @conversation)
  end
 end
@@ -2,28 +2,12 @@ class Api::V1::Accounts::Conversations::UnreadCountsController < Api::V1::Accoun
  before_action :ensure_unread_counts_enabled
  def index
-    counts = if filtered_unread_counts_enabled?
+    counts = ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
               instrumentation.summarize_request(account_id: Current.account.id) { unread_counts }
             else
               unread_counts
             end
    render json: { payload: counts }
  end
  private
  def unread_counts
    ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
  end
  def filtered_unread_counts_enabled?
    Current.account.feature_enabled?(::Conversations::UnreadCounts::FilteredCounter::FEATURE_FLAG)
  end
  def instrumentation
    ::Conversations::UnreadCounts::FilteredCountInstrumentation
  end
  def ensure_unread_counts_enabled
    return if Current.account.feature_enabled?('conversation_unread_counts')
@@ -164,7 +164,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
    # rubocop:enable Rails/SkipsModelValidations
    ::Conversations::UnreadCounts::Notifier.new(@conversation).perform
    ::Conversations::UnreadCounts::FilteredCountInvalidator.new(Current.account).conversation_changed!
  end
  def should_update_last_seen?
@@ -1,5 +1,4 @@
 class Api::V1::Accounts::DashboardAppsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
  before_action :fetch_dashboard_apps, except: [:create]
  before_action :fetch_dashboard_app, only: [:show, :update, :destroy]
@@ -1,159 +0,0 @@
 require 'csv'
 class Api::V1::Accounts::DataImportsController < Api::V1::Accounts::BaseController
  DATA_IMPORT_FEATURE = 'data_import'.freeze
  before_action :ensure_data_import_feature_enabled
  before_action :set_data_import, only: [:show, :start, :abandon, :error_logs, :skip_logs]
  before_action :check_authorization
  def index
    @data_imports = policy_scope(Current.account.data_imports).includes(:initiated_by).order(created_at: :desc)
    data_import_ids = @data_imports.map(&:id)
    @import_errors_counts = DataImportError.non_skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
    @skip_logs_counts = DataImportError.skip_logs.where(data_import_id: data_import_ids).group(:data_import_id).count
  end
  def show
    render_show
  end
  def validate_source
    totals = validate_intercom_source
    render json: { valid: true, totals: totals }
  rescue DataImports::Intercom::Client::AuthenticationError
    render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
  rescue DataImports::Intercom::Client::Error
    render_source_validation_error('Intercom could not be reached. Please try again.')
  rescue ArgumentError => e
    render_source_validation_error(e.message)
  end
  def create
    @data_import = creation_service.perform
    unless @data_import
      render json: { message: 'Another data import is already in progress.' }, status: :unprocessable_entity
      return
    end
    DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id)
    render_show
  rescue DataImports::Intercom::Client::AuthenticationError
    render_source_validation_error('We could not validate this Intercom access key. Check the key and its permissions.')
  rescue DataImports::Intercom::Client::Error
    render_source_validation_error('Intercom could not be reached. Please try again.')
  rescue ArgumentError => e
    render_source_validation_error(e.message)
  end
  def start
    restart_service = DataImports::Intercom::RestartService.new(account: Current.account, data_import: @data_import)
    restart_result = restart_service.perform
    @data_import = restart_service.data_import
    if restart_result == :access_token_missing
      render json: { message: 'The Intercom access key for this import is unavailable.' }, status: :unprocessable_entity
      return
    end
    DataImports::Intercom::ImportJob.perform_later(@data_import, @data_import.active_intercom_import_run_id) if restart_result == :enqueue
    render_show
  end
  def abandon
    @data_import.abandon!
    render_show
  end
  def skip_logs
    send_data(
      skip_logs_csv,
      filename: "data-import-#{@data_import.id}-skip-logs.csv",
      type: 'text/csv'
    )
  end
  def error_logs
    send_data(
      error_logs_csv,
      filename: "data-import-#{@data_import.id}-error-logs.csv",
      type: 'text/csv'
    )
  end
  private
  def ensure_data_import_feature_enabled
    raise Pundit::NotAuthorizedError unless Current.account.feature_enabled?(DATA_IMPORT_FEATURE)
  end
  def set_data_import
    @data_import = Current.account.data_imports.find(params[:id])
  end
  def check_authorization
    authorize(@data_import || DataImport)
  end
  def permitted_params
    params.permit(:name, :source_provider, :access_token, import_types: [])
  end
  def creation_service
    DataImports::Intercom::CreationService.new(
      account: Current.account,
      initiated_by: Current.user,
      source_params: permitted_params.to_h
    )
  end
  def import_types
    return DataImports::Intercom::Importer::DEFAULT_IMPORT_TYPES unless permitted_params.key?(:import_types)
    Array(permitted_params[:import_types]).compact_blank
  end
  def validate_intercom_source
    raise ArgumentError, 'Unsupported import source.' unless permitted_params[:source_provider] == 'intercom'
    DataImports::Intercom::CredentialsValidator.new(
      access_token: permitted_params[:access_token],
      import_types: import_types
    ).perform
  end
  def render_source_validation_error(message)
    render json: { valid: false, message: message }, status: :unprocessable_entity
  end
  def render_show
    @import_errors_finder = DataImportErrorFinder.new(@data_import)
    @skip_logs_finder = DataImportSkipLogFinder.new(@data_import, params)
    render :show
  end
  def skip_logs_csv
    logs_csv(@data_import.import_errors.skip_logs)
  end
  def error_logs_csv
    logs_csv(@data_import.import_errors.non_skip_logs)
  end
  def logs_csv(logs)
    CSV.generate(headers: true) do |csv|
      csv << %w[created_at kind source_object_type source_object_id error_code message details]
      logs.order(:created_at).find_each do |log|
        csv << [
          log.created_at.iso8601,
          log.details['kind'],
          log.source_object_type,
          log.source_object_id,
          log.error_code,
          log.message,
          log.details.to_json
        ]
      end
    end
  end
 end
@@ -2,6 +2,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  include Api::V1::InboxesHelper
  before_action :fetch_inbox, except: [:index, :create]
  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]
@@ -45,20 +46,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end
  def update
-    continue_update = false
+    inbox_params = permitted_params.except(:channel, :csat_config)
-
+    inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
-    ActiveRecord::Base.transaction do
+    @inbox.update!(inbox_params)
-      continue_update = update_branded_email_layout
+    update_inbox_working_hours
-      raise ActiveRecord::Rollback unless continue_update
+    update_channel if channel_update_required?
      inbox_params = permitted_params.except(:channel, :csat_config)
      inbox_params[:csat_config] = format_csat_config(permitted_params[:csat_config]) if permitted_params[:csat_config].present?
      @inbox.update!(inbox_params)
      update_inbox_working_hours
      update_channel if channel_update_required?
    end
    return unless continue_update
  end
  def agent_bot
@@ -133,8 +125,8 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end
  def reauthorize_and_update_channel(channel_attributes)
    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
    @inbox.channel.reauthorized! if @inbox.channel.respond_to?(:reauthorized!)
    @inbox.channel.update!(permitted_params(channel_attributes)[:channel])
  end
  def update_channel_feature_flags
@@ -164,34 +156,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
    formatted['template'] = config['template'] if config['template'].present?
  end
  def update_branded_email_layout
    return true unless params.key?(:branded_email_layout)
    branded_email_layout = normalized_branded_email_layout
    unless Current.account.feature_enabled?(:branded_email_templates)
      return true if branded_email_layout.blank?
      render_could_not_create_error('Branded email templates feature is not enabled')
      return false
    end
    unless @inbox.email?
      return true if branded_email_layout.blank?
      render_could_not_create_error('Branded email layout is only supported for email inboxes')
      return false
    end
    @inbox.update_branded_email_layout!(branded_email_layout)
    true
  rescue ActiveRecord::RecordInvalid => e
    render_could_not_create_error(e.record.errors.full_messages.join(', '))
    false
  end
  def normalized_branded_email_layout = params[:branded_email_layout] == 'null' ? nil : params[:branded_email_layout]
  def inbox_attributes
    [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
     :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
@@ -6,10 +6,7 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
      {
        redirect_uri: "#{base_url}/microsoft/callback",
        scope: scope,
-        state: state,
+        state: state
        # Force the Microsoft account picker so an already-signed-in account does not
        # silently authorize and re-bind to an existing inbox in the new-inbox flow.
        prompt: 'select_account'
      }
    )
    if redirect_url
@@ -81,8 +81,7 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
      :name, :page_title, :slug, :archived,
      { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } },
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
                 { popular_content: popular_content_keys.index_with { { category_ids: [], article_ids: [] } } }] }
    )
  end
@@ -90,10 +89,6 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    params.dig(:portal, :config, :locale_translations)&.keys || []
  end
  def popular_content_keys
    params.dig(:portal, :config, :popular_content)&.keys || []
  end
  def live_chat_widget_params
    permitted_params = params.permit(:inbox_id)
    return {} unless permitted_params.key?(:inbox_id)
@@ -1,6 +1,4 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
  # Reconfiguring/reauthorizing a live inbox swaps its credentials, so restrict it to admins.
  before_action :check_admin_authorization?, if: -> { params[:inbox_id].present? }
  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
  # POST /api/v1/accounts/:account_id/whatsapp/authorization
@@ -10,10 +8,8 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
    validate_embedded_signup_params!
    channel = process_embedded_signup
    render_success_response(channel.inbox)
  rescue CustomExceptions::Inbox::LimitExceeded => e
    render_error_response(e)
  rescue StandardError => e
-    render_embedded_signup_error(e)
+    render_error_response(e)
  end
  private
@@ -33,7 +29,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
  end
  def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_reconfigure_channel?
+    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
    render json: {
      success: false,
@@ -41,13 +37,10 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
    }, status: :unprocessable_entity
  end
-  def can_reconfigure_channel?
+  def can_upgrade_to_embedded_signup?
    channel = @inbox.channel
    return false unless channel.provider == 'whatsapp_cloud'
    # Reconfiguring a live embedded-signup channel requires the feature flag.
    return Current.account.feature_enabled?('whatsapp_reconfigure') if channel.provider_config['source'] == 'embedded_signup'
    true
  end
@@ -62,7 +55,7 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
    render json: response
  end
-  def render_embedded_signup_error(error)
+  def render_error_response(error)
    Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
    Rails.logger.error error.backtrace.join("\n")
    render json: {
@@ -8,7 +8,6 @@ class Api::V1::AccountsController < Api::BaseController
  before_action :ensure_account_name, only: [:create]
  before_action :validate_captcha, only: [:create]
  before_action :fetch_account, except: [:create]
  before_action :validate_token_api_access, if: :authenticate_by_access_token?, except: [:create]
  before_action :check_authorization, except: [:create]
  rescue_from CustomExceptions::Account::InvalidEmail,
@@ -106,12 +105,6 @@ class Api::V1::AccountsController < Api::BaseController
    @current_account_user = @account.account_users.find_by(user_id: current_user.id)
  end
  def validate_token_api_access
    return if @account.api_and_webhooks_enabled?
    render json: { error: 'API access is not enabled for this account' }, status: :forbidden
  end
  def account_params
    params.permit(:account_name, :email, :name, :password, :locale, :domain, :support_email, :user_full_name)
  end
@@ -59,10 +59,6 @@ class Api::V1::Widget::BaseController < ApplicationController
    permitted_params.dig(:contact, :phone_number)
  end
  def contact_custom_attributes
    permitted_params.dig(:contact, :custom_attributes)&.to_h
  end
  def browser_params
    {
      browser_name: browser.name,
@@ -2,7 +2,6 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
  include WidgetHelper
  before_action :validate_hmac, only: [:set_user]
  before_action :validate_hmac_for_identified_update, only: [:update]
  def show; end
@@ -47,16 +46,6 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
    @contact.identifier.present? && @contact.identifier != permitted_params[:identifier]
  end
  # The plain update endpoint is also used for anonymous prechat updates
  # (name/email/phone/custom_attributes with no identifier), which must keep
  # working on hmac_mandatory inboxes. Only the identity-binding path, where an
  # identifier is supplied and the contact can be rebound, requires HMAC.
  def validate_hmac_for_identified_update
    return if params[:identifier].blank?
    validate_hmac
  end
  def validate_hmac
    return unless should_verify_hmac?
@@ -73,15 +62,11 @@ class Api::V1::Widget::ContactsController < Api::V1::Widget::BaseController
  end
  def valid_hmac?
-    expected_hash = OpenSSL::HMAC.hexdigest(
+    params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
      'sha256',
      @web_widget.hmac_token,
      params[:identifier].to_s
    )
    identifier_hash = params[:identifier_hash].to_s
    return false unless identifier_hash.bytesize == expected_hash.bytesize
    ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
  end
  def permitted_params
@@ -19,7 +19,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  def process_update_contact
    @contact = ContactIdentifyAction.new(
      contact: @contact,
-      params: { email: contact_email, phone_number: contact_phone_number, name: contact_name, custom_attributes: contact_custom_attributes },
+      params: { email: contact_email, phone_number: contact_phone_number, name: contact_name },
      retain_original_contact_name: true,
      discard_invalid_attrs: true
    ).perform
@@ -95,7 +95,7 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end
  def permitted_params
-    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number, { custom_attributes: {} }],
+    params.permit(:id, :typing_status, :website_token, :email, contact: [:name, :email, :phone_number],
                                                               message: [:content, :referer_url, :timestamp, :echo_id],
                                                               custom_attributes: {})
  end
@@ -51,13 +51,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
    generate_csv('conversation_traffic_reports', 'api/v2/accounts/reports/conversation_traffic')
  end
  def drilldown
    return head :unauthorized unless Current.account_user.administrator?
    return head :unprocessable_entity unless valid_drilldown_params?
    render json: V2::Reports::DrilldownBuilder.new(Current.account, drilldown_params).build
  end
  def conversations
    return head :unprocessable_entity if params[:type].blank?
@@ -140,22 +133,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
                        })
  end
  def drilldown_params
    permitted_params = params.permit(
      :metric, :id, :since, :until, :group_by, :timezone_offset, :bucket_timestamp, :page, :per_page
    ).to_h.symbolize_keys
    permitted_params.merge(
      type: (params[:type].presence || 'account').to_sym,
      business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
    )
  end
  def valid_drilldown_params?
    %i[metric bucket_timestamp since until].all? { |param| params[param].present? } &&
      Reports::ReportMetricRegistry.supported?(params[:metric]) &&
      V2::Reports::DrilldownBuilder.supported_dimension_type?(params[:type]) && Reports::DrilldownTimestampValidator.valid?(params)
  end
  def conversation_params
    {
      type: params[:type].to_sym,
@@ -14,8 +14,6 @@ module EnsureCurrentAccountHelper
      account_accessible_for_user?(account)
    elsif @resource.is_a?(AgentBot)
      account_accessible_for_bot?(account)
    else
      render_unauthorized(I18n.t('errors.account.not_authorized'))
    end
    account
  end
@@ -23,7 +21,7 @@ module EnsureCurrentAccountHelper
  def account_accessible_for_user?(account)
    @current_account_user = account.account_users.find_by(user_id: current_user.id)
    Current.account_user = @current_account_user
-    render_unauthorized(I18n.t('errors.account.not_authorized')) unless @current_account_user
+    render_unauthorized('You are not authorized to access this account') unless @current_account_user
  end
  def account_accessible_for_bot?(account)
@@ -4,53 +4,17 @@ module PortalHomeData
  private
  def load_home_data
-    load_recommended_content
+    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
    # The classic hero only needs the recommendations above; the rest is
    # documentation-layout home data (also used on custom-domain home pages).
    return unless @portal.layout == 'documentation'
    @visible_categories = @portal.categories
                                 .where(locale: @locale)
                                 .joins(:articles).where(articles: { status: :published })
                                 .order(position: :asc)
                                 .group('categories.id')
-    @popular_topics = @recommended_categories.presence || @visible_categories.first(3)
+    @popular_topics = @visible_categories.first(3)
    @featured = base_articles.order_by_views.limit(6)
    @category_contributors = build_category_contributors(@visible_categories)
  end
  def load_recommended_content
    @recommended_categories = recommended_categories
    @recommended_articles = recommended_articles
  end
  def base_articles
    @base_articles ||= @portal.articles.published.where(locale: @locale).includes(:author, :category)
  end
  # Admin-recommended categories for the locale, in the chosen order. Unlike the
  # position-based fallback, published articles aren't required: the admin's pick wins.
  def recommended_categories
    ids = @portal.popular_category_ids(@locale)
    ordered_by_ids(@portal.categories.where(locale: @locale, id: ids), ids)
  end
  # Admin-recommended articles for the locale, in the chosen order, limited to
  # published articles that still exist.
  def recommended_articles
    ids = @portal.popular_article_ids(@locale)
    ordered_by_ids(base_articles.where(id: ids), ids)
  end
  # Loads the scope and returns its records ordered to match `ids`, dropping any
  # that no longer exist. Skips the query entirely when `ids` is blank.
  def ordered_by_ids(scope, ids)
    return [] if ids.blank?
    by_id = scope.index_by(&:id)
    ids.filter_map { |id| by_id[id] }
  end
  def build_category_contributors(categories)
    category_ids = categories.map(&:id)
    return {} if category_ids.empty?
@@ -1,15 +1,8 @@
 module RequestExceptionHandler
  extend ActiveSupport::Concern
  QUERY_CANCELED_ERROR_MESSAGE_PATTERNS = [
    'ActiveRecord::QueryCanceled',
    'PG::QueryCanceled',
    'canceling statement due to statement timeout'
  ].freeze
  included do
    rescue_from ActiveRecord::RecordInvalid, with: :render_record_invalid
    rescue_from CustomExceptions::Inbox::LimitExceeded, with: :render_error_response
  end
  private
@@ -25,9 +18,6 @@ module RequestExceptionHandler
  rescue ActionController::ParameterMissing => e
    log_handled_error(e)
    render_could_not_create_error(e.message)
  rescue ActiveRecord::QueryCanceled => e
    log_handled_error(e)
    render_could_not_create_error(database_query_canceled_message)
  ensure
    # to address the thread variable leak issues in Puma/Thin webserver
    Current.reset
@@ -41,8 +31,8 @@ module RequestExceptionHandler
    render json: { error: message }, status: :not_found
  end
-  def render_could_not_create_error(error)
+  def render_could_not_create_error(message)
-    render json: { error: sanitized_error_message(error) }, status: :unprocessable_entity
+    render json: { error: message }, status: :unprocessable_entity
  end
  def render_payment_required(message)
@@ -69,19 +59,4 @@ module RequestExceptionHandler
  def log_handled_error(exception)
    logger.info("Handled error: #{exception.inspect}")
  end
  def sanitized_error_message(message)
    return database_query_canceled_message if database_query_canceled_message?(message)
    message
  end
  def database_query_canceled_message?(message)
    error_message = message.to_s
    QUERY_CANCELED_ERROR_MESSAGE_PATTERNS.any? { |pattern| error_message.include?(pattern) }
  end
  def database_query_canceled_message
    I18n.t('errors.database.query_canceled')
  end
 end
@@ -64,8 +64,10 @@ class DashboardController < ActionController::Base
    return unless @portal
    @locale = @portal.default_locale
-    request.variant = :documentation if @portal.layout == 'documentation'
+    if @portal.layout == 'documentation'
-    load_home_data
+      request.variant = :documentation
      load_home_data
    end
    render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
  end
@@ -11,8 +11,6 @@ class Instagram::CallbacksController < ApplicationController
    end
    process_successful_authorization
  rescue CustomExceptions::Inbox::LimitExceeded => e
    handle_limit_error(e)
  rescue StandardError => e
    handle_error(e)
  end
@@ -49,14 +47,6 @@ class Instagram::CallbacksController < ApplicationController
    redirect_to_error_page(error_info)
  end
  def handle_limit_error(error)
    redirect_to_error_page(
      'error_type' => error.class.name,
      'code' => Rack::Utils.status_code(error.http_status),
      'error_message' => error.message
    )
  end
  # Extract error details from the exception
  def extract_error_info(error)
    if error.is_a?(OAuth2::Error)
@@ -18,8 +18,7 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
      contact: @contact_inbox.contact,
      params: permitted_params.to_h.deep_symbolize_keys.except(:identifier)
    )
-    contact_identify_action.perform
+    render json: contact_identify_action.perform
    @contact_inbox.reload
  end
  private
@@ -36,15 +35,11 @@ class Public::Api::V1::Inboxes::ContactsController < Public::Api::V1::InboxesCon
  end
  def valid_hmac?
-    expected_hash = OpenSSL::HMAC.hexdigest(
+    params[:identifier_hash] == OpenSSL::HMAC.hexdigest(
      'sha256',
      @inbox_channel.hmac_token,
      params[:identifier].to_s
    )
    identifier_hash = params[:identifier_hash].to_s
    return false unless identifier_hash.bytesize == expected_hash.bytesize
    ActiveSupport::SecurityUtils.secure_compare(identifier_hash, expected_hash)
  end
  def permitted_params
@@ -24,11 +24,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
  end
  def set_view_variant
-    request.variant = if @is_plain_layout_enabled
+    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
                        :plain
                      elsif @portal_layout == 'documentation'
                        :documentation
                      end
  end
  def portal
@@ -69,8 +65,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
  def render_404
    portal
    # set_locale can render_404 before the child's set_view_variant runs; set it here so plain 404s stay chrome-less
    set_view_variant
    render 'public/api/v1/portals/error/404', status: :not_found
  end
@@ -7,7 +7,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
  before_action :set_portal_layout
  before_action :set_view_variant
  before_action :ensure_portal_feature_enabled
-  before_action :load_home_data, only: [:show], unless: -> { @is_plain_layout_enabled }
+  before_action :load_home_data, only: [:show], if: -> { @portal_layout == 'documentation' }
  layout 'portal'
  def show
@@ -6,8 +6,6 @@ class Tiktok::CallbacksController < ApplicationController
    return handle_ungranted_scopes_error unless all_scopes_granted?
    process_successful_authorization
  rescue CustomExceptions::Inbox::LimitExceeded => e
    handle_limit_error(e)
  rescue StandardError => e
    handle_error(e)
  end
@@ -38,14 +36,6 @@ class Tiktok::CallbacksController < ApplicationController
    redirect_to_error_page(error_type: error.class.name, code: 500, error_message: error.message)
  end
  def handle_limit_error(error)
    redirect_to_error_page(
      error_type: error.class.name,
      code: Rack::Utils.status_code(error.http_status),
      error_message: error.message
    )
  end
  # Handles the case when a user denies permissions or cancels the authorization flow
  def handle_authorization_error
    redirect_to_error_page(
@@ -1,10 +1,6 @@
 class ConversationDrop < BaseDrop
  include MessageFormatHelper
  def id
    @obj.try(:display_id)
  end
  def display_id
    @obj.try(:display_id)
  end
@@ -2,18 +2,4 @@ class InboxDrop < BaseDrop
  def name
    @obj.try(:name)
  end
  def business_name
    @obj.try(:sanitized_business_name)
  end
  def avatar_url
    @obj.try(:avatar_url)
  end
  def email
    return unless @obj.try(:email?)
    @obj.try(:email_address).presence || @obj.try(:channel).try(:email)
  end
 end
@@ -1,11 +0,0 @@
 class DataImportErrorFinder
  RESULTS_LIMIT = 5
  def initialize(data_import)
    @data_import = data_import
  end
  def import_errors
    @data_import.import_errors.non_skip_logs.order(created_at: :desc).limit(RESULTS_LIMIT)
  end
 end
@@ -1,35 +0,0 @@
 class DataImportSkipLogFinder
  RESULTS_LIMIT = 5
  SOURCE_OBJECT_TYPES = %w[contact conversation message].freeze
  attr_reader :selected_source_object_type
  def initialize(data_import, params = {})
    @data_import = data_import
    @selected_source_object_type = valid_source_object_type(params[:skip_logs_type])
  end
  def skip_logs
    filtered_scope.order(created_at: :desc).limit(RESULTS_LIMIT)
  end
  def counts_by_type
    base_scope.group(:source_object_type).count
  end
  private
  def base_scope
    @base_scope ||= @data_import.import_errors.skip_logs
  end
  def filtered_scope
    return base_scope if selected_source_object_type.blank?
    base_scope.where(source_object_type: selected_source_object_type)
  end
  def valid_source_object_type(source_object_type)
    source_object_type if SOURCE_OBJECT_TYPES.include?(source_object_type)
  end
 end
@@ -114,4 +114,10 @@ module Api::V1::InboxesHelper
      'sms' => Current.account.sms_channels
    }[permitted_params[:channel][:type]]
  end
  def validate_limit
    return unless Current.account.inboxes.count >= Current.account.usage_limits[:inboxes]
    render_payment_required('Account limit exceeded. Upgrade to a higher plan')
  end
 end
@@ -22,16 +22,4 @@ module BillingHelper
  def agents(account)
    account.users.count
  end
  # current_period_end moved to the subscription item in newer Stripe API versions; read both.
  def subscription_period_end(subscription)
    subscription['current_period_end'] || subscription['items']['data'].first&.[]('current_period_end')
  end
  def subscription_ends_on(subscription)
    period_end = subscription_period_end(subscription)
    return if period_end.blank?
    Time.zone.at(period_end)
  end
 end
@@ -68,8 +68,6 @@ module Filters::FilterHelper
    when 'text_case_insensitive'
      text_case_insensitive_filter(query_hash, filter_operator_value)
    else
      return text_cast_filter(query_hash, filter_operator_value) if text_search_on_display_id?(query_hash)
      default_filter(query_hash, filter_operator_value)
    end
  end
@@ -84,18 +82,10 @@ module Filters::FilterHelper
      "#{filter_operator_value} #{query_hash[:query_operator]}"
  end
  def text_cast_filter(query_hash, filter_operator_value)
    "(#{filter_config[:table_name]}.#{query_hash[:attribute_key]})::text #{filter_operator_value} #{query_hash[:query_operator]}"
  end
  def default_filter(query_hash, filter_operator_value)
    "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
  end
  def text_search_on_display_id?(query_hash)
    query_hash[:attribute_key] == 'display_id' && %w[contains does_not_contain].include?(query_hash[:filter_operator])
  end
  def validate_single_condition(condition)
    return if condition['query_operator'].nil?
    return if condition['query_operator'].empty?
@@ -6,12 +6,9 @@ class AssignableAgents extends ApiClient {
    super('assignable_agents', { accountScoped: true });
  }
-  get(inboxIds, { includeAgentBots = false } = {}) {
+  get(inboxIds) {
    return axios.get(this.url, {
-      params: {
+      params: { inbox_ids: inboxIds },
        inbox_ids: inboxIds,
        ...(includeAgentBots ? { include_agent_bots: true } : {}),
      },
    });
  }
 }
@@ -1,10 +1,6 @@
 /* global axios */
 import ApiClient from '../ApiClient';
 // Viewer's UTC offset in hours, matching the reports API convention so the
 // backend can anchor calendar ranges to the viewer's day.
 const getTimezoneOffset = () => -new Date().getTimezoneOffset() / 60;
 class CaptainAssistant extends ApiClient {
  constructor() {
    super('captain/assistants', { accountScoped: true });
@@ -25,32 +21,6 @@ class CaptainAssistant extends ApiClient {
      message_history: messageHistory,
    });
  }
  getStats({ assistantId, range }) {
    return axios.get(`${this.url}/${assistantId}/stats`, {
      params: { range, timezone_offset: getTimezoneOffset() },
    });
  }
  getSummary({ assistantId, range }) {
    return axios.get(`${this.url}/${assistantId}/summary`, {
      params: { range, timezone_offset: getTimezoneOffset() },
    });
  }
  getDrilldown({ assistantId, metric, range, page, signal }) {
    const requestConfig = {
      params: {
        metric,
        range,
        timezone_offset: getTimezoneOffset(),
        page,
      },
    };
    if (signal) requestConfig.signal = signal;
    return axios.get(`${this.url}/${assistantId}/drilldown`, requestConfig);
  }
 }
 export default new CaptainAssistant();
@@ -1,39 +0,0 @@
 /* global axios */
 import ApiClient from './ApiClient';
 class DataImportsAPI extends ApiClient {
  constructor() {
    super('data_imports', { accountScoped: true });
  }
  start(id) {
    return axios.post(`${this.url}/${id}/start`);
  }
  abandon(id) {
    return axios.post(`${this.url}/${id}/abandon`);
  }
  show(id, params = {}) {
    return axios.get(`${this.url}/${id}`, { params });
  }
  validateSource(payload) {
    return axios.post(`${this.url}/validate_source`, payload);
  }
  downloadSkipLogs(id) {
    return axios.get(`${this.url}/${id}/skip_logs.csv`, {
      responseType: 'blob',
    });
  }
  downloadErrorLogs(id) {
    return axios.get(`${this.url}/${id}/error_logs.csv`, {
      responseType: 'blob',
    });
  }
 }
 export default new DataImportsAPI();
@@ -14,10 +14,6 @@ class EnterpriseAccountAPI extends ApiClient {
    return axios.post(`${this.url}subscription`);
  }
  selectBillingCurrency(currency) {
    return axios.post(`${this.url}select_billing_currency`, { currency });
  }
  getLimits() {
    return axios.get(`${this.url}limits`);
  }
@@ -31,11 +27,6 @@ class EnterpriseAccountAPI extends ApiClient {
  createTopupCheckout(credits) {
    return axios.post(`${this.url}topup_checkout`, { credits });
  }
  // Topup packages for the account's billing currency.
  getTopupOptions() {
    return axios.get(`${this.url}topup_options`);
  }
 }
 export default new EnterpriseAccountAPI();
@@ -17,7 +17,6 @@ class ArticlesAPI extends PortalsAPI {
    categorySlug,
    sort,
    query,
    signal,
  }) {
    const url = getArticleSearchURL({
      pageNumber,
@@ -31,7 +30,7 @@ class ArticlesAPI extends PortalsAPI {
      host: this.url,
    });
-    return axios.get(url, { signal });
+    return axios.get(url);
  }
  searchArticles({ portalSlug, query }) {
@@ -62,10 +62,9 @@ class ConversationApi extends ApiClient {
    });
  }
-  assignAgent({ conversationId, agentId, assigneeType }) {
+  assignAgent({ conversationId, agentId }) {
    return axios.post(`${this.url}/${conversationId}/assignments`, {
      assignee_id: agentId,
      assignee_type: assigneeType,
    });
  }
@@ -31,42 +31,6 @@ class ReportsAPI extends ApiClient {
    });
  }
  getDrilldown({
    metric,
    bucketTimestamp,
    from,
    to,
    type = 'account',
    id,
    groupBy,
    businessHours,
    page,
    perPage,
    signal,
  }) {
    const requestConfig = {
      params: {
        metric,
        bucket_timestamp: bucketTimestamp,
        since: from,
        until: to,
        type,
        id,
        group_by: groupBy,
        business_hours: businessHours,
        timezone_offset: getTimeOffset(),
        page,
        per_page: perPage,
      },
    };
    if (signal) {
      requestConfig.signal = signal;
    }
    return axios.get(`${this.url}/drilldown`, requestConfig);
  }
  // eslint-disable-next-line default-param-last
  getSummary(since, until, type = 'account', id, groupBy, businessHours) {
    return axios.get(`${this.url}/summary`, {
@@ -37,8 +37,7 @@ describe('#PortalAPI', () => {
        authorId: '1',
      });
      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1',
+        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
        { signal: undefined }
      );
    });
  });
@@ -26,15 +26,5 @@ describe('#AssignableAgentsAPI', () => {
        },
      });
    });
    it('#getAssignableAgents with agent bots', () => {
      assignableAgentsAPI.get([1], { includeAgentBots: true });
      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
        params: {
          inbox_ids: [1],
          include_agent_bots: true,
        },
      });
    });
  });
 });
@@ -90,16 +90,11 @@ describe('#ConversationAPI', () => {
    });
    it('#assignAgent', () => {
-      conversationAPI.assignAgent({
+      conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
        conversationId: 12,
        agentId: 34,
        assigneeType: 'AgentBot',
      });
      expect(axiosMock.post).toHaveBeenCalledWith(
        `/api/v1/conversations/12/assignments`,
        {
          assignee_id: 34,
          assignee_type: 'AgentBot',
        }
      );
    });
@@ -1,8 +1,6 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
 const timezoneOffset = () => -new Date().getTimezoneOffset() / 60;
 describe('#Reports API', () => {
  it('creates correct instance', () => {
    expect(reportsAPI).toBeInstanceOf(ApiClient);
@@ -13,7 +11,6 @@ describe('#Reports API', () => {
    expect(reportsAPI).toHaveProperty('update');
    expect(reportsAPI).toHaveProperty('delete');
    expect(reportsAPI).toHaveProperty('getReports');
    expect(reportsAPI).toHaveProperty('getDrilldown');
    expect(reportsAPI).toHaveProperty('getSummary');
    expect(reportsAPI).toHaveProperty('getAgentReports');
    expect(reportsAPI).toHaveProperty('getLabelReports');
@@ -45,14 +42,11 @@ describe('#Reports API', () => {
      });
      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
        params: {
          business_hours: undefined,
          group_by: undefined,
          id: undefined,
          metric: 'conversations_count',
          since: 1621103400,
          until: 1621621800,
          type: 'account',
-          timezone_offset: timezoneOffset(),
+          timezone_offset: -0,
        },
      });
    });
@@ -65,70 +59,13 @@ describe('#Reports API', () => {
          group_by: undefined,
          id: undefined,
          since: 1621103400,
-          timezone_offset: timezoneOffset(),
+          timezone_offset: -0,
          type: 'account',
          until: 1621621800,
        },
      });
    });
    it('#getDrilldown', () => {
      reportsAPI.getDrilldown({
        metric: 'incoming_messages_count',
        bucketTimestamp: 1621103400,
        from: 1621103400,
        to: 1621621800,
        type: 'inbox',
        id: 1,
        groupBy: 'day',
        businessHours: false,
        page: 2,
        perPage: 25,
      });
      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
        params: {
          metric: 'incoming_messages_count',
          bucket_timestamp: 1621103400,
          since: 1621103400,
          until: 1621621800,
          type: 'inbox',
          id: 1,
          group_by: 'day',
          business_hours: false,
          timezone_offset: timezoneOffset(),
          page: 2,
          per_page: 25,
        },
      });
    });
    it('#getDrilldown with abort signal', () => {
      const controller = new AbortController();
      reportsAPI.getDrilldown({
        metric: 'incoming_messages_count',
        bucketTimestamp: 1621103400,
        signal: controller.signal,
      });
      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
        params: {
          metric: 'incoming_messages_count',
          bucket_timestamp: 1621103400,
          since: undefined,
          until: undefined,
          type: 'account',
          id: undefined,
          group_by: undefined,
          business_hours: undefined,
          timezone_offset: timezoneOffset(),
          page: undefined,
          per_page: undefined,
        },
        signal: controller.signal,
      });
    });
    it('#getAgentReports', () => {
      reportsAPI.getAgentReports({
        from: 1621103400,
@@ -16,10 +16,6 @@ const props = defineProps({
    type: Array,
    required: true,
  },
  contact: {
    type: Object,
    required: true,
  },
 });
 const { t } = useI18n();
@@ -53,9 +49,7 @@ const unreadMessagesCount = computed(() => {
 const hasSlaThreshold = computed(() => {
  return (
-    !props.contact?.blocked &&
+    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
    slaCardLabelRef.value?.hasSlaThreshold &&
    props.conversation?.appliedSla?.id
  );
 });
@@ -126,7 +126,6 @@ const onCardClick = e => {
        v-show="!showMessagePreviewWithoutMeta"
        ref="cardMessagePreviewWithMetaRef"
        :conversation="conversation"
        :contact="contact"
        :account-labels="accountLabels"
      />
    </div>
@@ -51,9 +51,7 @@ const unreadCount = computed(() => props.chat.unread_count);
 const slaCardLabel = useTemplateRef('slaCardLabel');
 const hasSlaPolicyId = computed(
-  () =>
+  () => props.chat?.sla_policy_id || slaCardLabel.value?.hasSlaThreshold
    !props.currentContact?.blocked &&
    (props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold)
 );
 const selectedModel = computed({
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
+import { evaluateSLAStatus } from '@chatwoot/utils';
 const props = defineProps({
  conversation: {
@@ -19,8 +19,16 @@ const slaStatus = ref({
  icon: null,
 });
 // TODO: Remove this once we update the helper from utils
 // https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
 const convertObjectCamelCaseToSnakeCase = object => {
  return Object.keys(object).reduce((acc, key) => {
    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
    return acc;
  }, {});
 };
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const slaEvents = computed(() => props.conversation?.slaEvents);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 const hasSlaThreshold = computed(() => {
@@ -33,9 +41,8 @@ const slaStatusText = computed(() => {
 const updateSlaStatus = () => {
  slaStatus.value = evaluateSLAStatus({
-    appliedSla: appliedSLA.value || {},
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
    chat: props.conversation,
    slaEvents: slaEvents.value || [],
  });
 };
@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
+import { evaluateSLAStatus } from '@chatwoot/utils';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Label from 'dashboard/components-next/label/Label.vue';
@@ -27,7 +27,6 @@ defineOptions({
 });
 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);
@@ -35,7 +34,6 @@ const updateSlaStatus = () => {
  slaStatus.value = evaluateSLAStatus({
    appliedSla: appliedSLA.value || {},
    chat: props.chat,
    slaEvents: slaEvents.value || [],
  });
 };
@@ -1,378 +0,0 @@
 <script setup>
 import { computed, ref, watch, nextTick, onBeforeUnmount } from 'vue';
 import { useEventListener, onKeyStroke, useRafFn } from '@vueuse/core';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 // Reorderable list with cross-page drag. It must stay mounted during a page
 // fetch — hide the list spinner while `dragging`, or the held item is lost.
 const props = defineProps({
  items: { type: Array, required: true },
  itemKey: { type: String, default: 'id' },
  disabled: { type: Boolean, default: false },
  currentPage: { type: Number, default: 1 },
  totalPages: { type: Number, default: 1 },
 });
 const emit = defineEmits(['reorder', 'navigatePage', 'dragging']);
 const DRAG_THRESHOLD = 5;
 const EDGE_BAND = 72; // px from a side that arms a page turn
 const AUTO_PAGE_DELAY = 600; // ms hovering an edge before it flips
 const SCROLL_BAND = 60; // px from top/bottom that autoscrolls the list
 const SCROLL_STEP = 10; // px scrolled per frame while parked at an edge
 const PILL = 36; // px, the page-turn arrow button on each edge
 const root = ref(null);
 const isDragging = ref(false);
 const dragged = ref(null);
 const pointer = ref({ x: 0, y: 0 });
 const insertBefore = ref(null); // key the gap sits before, null = end of list
 const activeEdge = ref(null);
 const bounds = ref({ left: 0, right: 0, top: 0, bottom: 0 }); // visible list rect
 const grab = ref({ dx: 0, dy: 0 }); // cursor offset inside the grabbed card
 const dragHeight = ref(0);
 let press = null; // pending press, before it becomes a drag
 let dwell = null; // timer that flips the page after hovering an edge
 let paging = false; // waiting for a flipped page to load
 let scroller = null; // scrollable ancestor, found when a drag begins
 let scrollDir = 0; // -1 up, +1 down, 0 idle
 let sourcePage = 1; // page the drag started on, to resolve cross-page end-drops
 const keyOf = item => String(item?.[props.itemKey]);
 const others = item => props.items.filter(o => keyOf(o) !== keyOf(item));
 const isRTL = () =>
  document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl';
 const canPage = dir =>
  dir === 'next' ? props.currentPage < props.totalPages : props.currentPage > 1;
 // Key of the item after `key` in `list`, or null when it is the last one.
 const keyAfter = (list, key) => {
  const next = list[list.findIndex(o => keyOf(o) === key) + 1];
  return next ? keyOf(next) : null;
 };
 const edges = computed(() =>
  ['prev', 'next'].filter(canPage).map(dir => {
    const onLeft = isRTL() ? dir === 'next' : dir === 'prev';
    return {
      dir,
      onLeft,
      icon: onLeft ? 'i-lucide-chevrons-left' : 'i-lucide-chevrons-right',
    };
  })
 );
 // Cursor overlay: an edge glow band, a page-turn arrow per edge, and a ghost of
 // the dragged row that follows the cursor and shrinks when aimed at an edge.
 const EDGE_BAND_W = 80; // px width of the glow band on each pageable edge
 const bandStyle = onLeft => {
  const x = onLeft ? bounds.value.left : bounds.value.right - EDGE_BAND_W;
  return {
    width: `${EDGE_BAND_W}px`,
    height: `${bounds.value.bottom - bounds.value.top}px`,
    transform: `translate(${x}px, ${bounds.value.top}px)`,
  };
 };
 const pillStyle = onLeft => {
  const x = onLeft ? bounds.value.left + 12 : bounds.value.right - PILL - 12;
  return { transform: `translate(${x}px, ${pointer.value.y - PILL / 2}px)` };
 };
 const ghostStyle = computed(() => ({
  width: `${bounds.value.right - bounds.value.left}px`,
  transform: `translate(${pointer.value.x - grab.value.dx}px, ${pointer.value.y - grab.value.dy}px)`,
 }));
 const scaleStyle = computed(() => ({
  transformOrigin: `${grab.value.dx}px ${grab.value.dy}px`,
 }));
 // The list as shown mid-drag: the dragged row slotted into the gap at `insertBefore`.
 const displayItems = computed(() => {
  if (!isDragging.value || !dragged.value) return props.items;
  const rest = others(dragged.value);
  const at = rest.findIndex(o => keyOf(o) === insertBefore.value);
  rest.splice(at === -1 ? rest.length : at, 0, dragged.value);
  return rest;
 });
 // Move the gap when the cursor crosses the midpoint of the card it is over.
 const aim = () => {
  const card = document
    .elementFromPoint(pointer.value.x, pointer.value.y)
    ?.closest('[data-drag-id]');
  const key = card?.dataset.dragId;
  if (!key || key === keyOf(dragged.value)) return;
  const { top, height } = card.getBoundingClientRect();
  const above = pointer.value.y < top + height / 2;
  insertBefore.value = above ? key : keyAfter(others(dragged.value), key);
 };
 const flip = dir => {
  if (paging || !isDragging.value) return;
  paging = true;
  emit('navigatePage', props.currentPage + (dir === 'next' ? 1 : -1));
 };
 const aimEdge = x => {
  const rect = root.value?.getBoundingClientRect();
  if (!rect) return;
  // Clip the list rect to the scroll viewport so the glow band and its top/bottom
  // fade always sit on the visible edges, not the far ends of the full content.
  const view = scroller?.getBoundingClientRect();
  const viewTop = Math.max(view?.top ?? 0, 0);
  const viewBottom = Math.min(
    view?.bottom ?? window.innerHeight,
    window.innerHeight
  );
  bounds.value = {
    left: rect.left,
    right: rect.right,
    top: Math.max(rect.top, viewTop),
    bottom: Math.min(rect.bottom, viewBottom),
  };
  let dir = null;
  if (x <= rect.left + EDGE_BAND) dir = isRTL() ? 'next' : 'prev';
  else if (x >= rect.right - EDGE_BAND) dir = isRTL() ? 'prev' : 'next';
  if (dir && !canPage(dir)) dir = null;
  if (dir === activeEdge.value) return;
  activeEdge.value = dir;
  clearTimeout(dwell);
  if (dir) dwell = setTimeout(() => flip(dir), AUTO_PAGE_DELAY);
 };
 // Nearest scrollable ancestor, so a drag can reach rows that are off-screen.
 const scrollParent = () => {
  let el = root.value?.parentElement;
  while (el) {
    const { overflowY } = getComputedStyle(el);
    if (overflowY === 'auto' || overflowY === 'scroll') return el;
    el = el.parentElement;
  }
  return null;
 };
 // While parked at the top/bottom edge, keep scrolling and re-aim as rows slide by.
 const { pause: pauseScroll, resume: resumeScroll } = useRafFn(
  () => {
    if (!scroller || !scrollDir) return;
    scroller.scrollTop += scrollDir * SCROLL_STEP;
    aim();
    aimEdge(pointer.value.x);
  },
  { immediate: false }
 );
 const updateAutoScroll = y => {
  if (!scroller) return;
  const rect = scroller.getBoundingClientRect();
  const atTop = scroller.scrollTop <= 0;
  const atBottom =
    scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight;
  if (y < rect.top + SCROLL_BAND && !atTop) scrollDir = -1;
  else if (y > rect.bottom - SCROLL_BAND && !atBottom) scrollDir = 1;
  else scrollDir = 0;
  if (scrollDir) resumeScroll();
  else pauseScroll();
 };
 const reset = () => {
  isDragging.value = false;
  dragged.value = null;
  insertBefore.value = null;
  activeEdge.value = null;
  clearTimeout(dwell);
  paging = false;
  scrollDir = 0;
  scroller = null;
  pauseScroll();
  document.body.classList.remove('select-none');
  emit('dragging', false);
 };
 // Positions sit on a gap-of-10 grid; a midpoint (±5 at the ends) slots between two rows.
 // Cross-page end-drops are the tricky case: moving an item off its source page pulls the
 // target page's boundary row into the vacated slot. So at the leading edge after moving
 // DOWN (or the trailing edge after moving UP) we land between the two boundary rows, or
 // the item sorts onto the adjacent page and vanishes from view.
 const drop = (item, rawBefore) => {
  const pos = o => o?.position || 0;
  const mid = (a, b) => Math.floor((pos(a) + pos(b)) / 2);
  const rest = others(item);
  // No other rows to position against — e.g. the lone article on a page dropped
  // without crossing to another page. Leave the order untouched.
  if (!rest.length) return;
  // A page flip can leave the aimed key pointing at a row that is no longer on
  // this page. Like displayItems, resolve an unknown key to null (end of list),
  // so what the user sees and what we save agree.
  const before = rest.some(o => keyOf(o) === rawBefore) ? rawBefore : null;
  const movedDown = props.currentPage > sourcePage;
  const movedUp = props.currentPage < sourcePage;
  let position;
  if (before === null) {
    position =
      movedUp && rest.length >= 2
        ? mid(rest.at(-2), rest.at(-1))
        : pos(rest.at(-1)) + 5;
  } else {
    const i = rest.findIndex(o => keyOf(o) === before);
    if (i > 0) {
      position = mid(rest[i - 1], rest[i]);
    } else if (movedDown) {
      // Top-of-page after moving down: the old first row slid up into the source
      // page's gap, so land just after it to stay this page's first.
      position = rest.length >= 2 ? mid(rest[0], rest[1]) : pos(rest[0]) + 5;
    } else {
      position = pos(rest[0]) - 5;
    }
  }
  emit('reorder', { [item[props.itemKey]]: position });
 };
 const startDrag = () => {
  isDragging.value = true;
  dragged.value = press.item;
  grab.value = { dx: press.dx, dy: press.dy };
  dragHeight.value = press.h;
  insertBefore.value = keyAfter(props.items, keyOf(press.item));
  sourcePage = props.currentPage;
  scroller = scrollParent();
  document.body.classList.add('select-none');
  emit('dragging', true);
 };
 const onPointerDown = (item, e) => {
  if (e.button !== 0 || props.disabled) return;
  if (e.target.closest('button, a, input, [role="button"]')) return;
  const rect = e.currentTarget.getBoundingClientRect();
  press = {
    item,
    x: e.clientX,
    y: e.clientY,
    dx: e.clientX - rect.left,
    dy: e.clientY - rect.top,
    h: rect.height,
  };
 };
 useEventListener(window, 'pointermove', e => {
  if (!press) return;
  if (!isDragging.value) {
    const moved = Math.hypot(e.clientX - press.x, e.clientY - press.y);
    if (moved < DRAG_THRESHOLD) return;
    startDrag();
  }
  e.preventDefault();
  pointer.value = { x: e.clientX, y: e.clientY };
  aim();
  aimEdge(e.clientX);
  updateAutoScroll(e.clientY);
 });
 useEventListener(window, 'pointerup', () => {
  if (!press) return;
  press = null;
  if (!isDragging.value) return; // a press without movement is a click
  const item = dragged.value;
  const before = insertBefore.value;
  const flipping = paging;
  reset();
  if (!flipping) drop(item, before);
 });
 // When the flipped page loads, re-aim under the held cursor so a parked edge keeps flipping.
 watch(
  () => props.items,
  () => {
    if (!isDragging.value || !paging) return;
    paging = false;
    nextTick(() => {
      if (!isDragging.value) return;
      aim();
      activeEdge.value = null;
      aimEdge(pointer.value.x);
    });
  }
 );
 onKeyStroke('Escape', () => {
  if (!isDragging.value) return;
  press = null;
  reset();
 });
 onBeforeUnmount(() => {
  clearTimeout(dwell);
  document.body.classList.remove('select-none');
 });
 </script>
 <template>
  <div ref="root" class="relative w-full h-full">
    <ul class="w-full h-full space-y-4">
      <li
        v-for="(item, index) in displayItems"
        :key="keyOf(item)"
        :data-drag-id="keyOf(item)"
        class="relative list-none"
        :class="{ 'cursor-grab': !disabled && !isDragging }"
        @pointerdown="onPointerDown(item, $event)"
        @dragstart.prevent
      >
        <div
          v-if="isDragging && keyOf(item) === keyOf(dragged)"
          :style="{ height: `${dragHeight}px` }"
          class="border-2 border-dashed rounded-2xl border-n-brand/50 bg-n-brand/5"
        />
        <slot v-else name="item" :item="item" :index="index" />
      </li>
    </ul>
    <Teleport v-if="isDragging" to="body">
      <div
        v-for="edge in edges"
        :key="`band-${edge.dir}`"
        :style="bandStyle(edge.onLeft)"
        class="fixed top-0 left-0 z-40 pointer-events-none from-n-brand/15 to-transparent transition-opacity duration-200 [mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)]"
        :class="[
          edge.onLeft ? 'bg-gradient-to-r' : 'bg-gradient-to-l',
          activeEdge === edge.dir ? 'opacity-100' : 'opacity-0',
        ]"
      />
      <div
        v-for="edge in edges"
        :key="edge.dir"
        :style="pillStyle(edge.onLeft)"
        class="fixed top-0 left-0 z-50 flex items-center justify-center transition-all duration-150 border rounded-full pointer-events-none size-9 backdrop-blur-sm"
        :class="
          activeEdge === edge.dir
            ? 'scale-110 border-n-brand bg-n-brand/20 text-n-brand shadow-md'
            : 'opacity-70 border-n-weak/60 bg-n-solid-1/70 text-n-slate-10'
        "
      >
        <Icon
          :icon="edge.icon"
          class="size-4"
          :class="activeEdge === edge.dir && 'animate-pulse'"
        />
      </div>
      <div
        v-if="dragged"
        :style="ghostStyle"
        class="fixed top-0 left-0 z-50 pointer-events-none select-none"
      >
        <div
          :style="scaleStyle"
          class="transition-transform duration-150 shadow-2xl rounded-2xl"
          :class="{ 'scale-50': activeEdge }"
        >
          <slot name="ghost" :item="dragged" />
        </div>
      </div>
    </Teleport>
  </div>
 </template>
@@ -1,222 +0,0 @@
 import { mount } from '@vue/test-utils';
 import { h, nextTick } from 'vue';
 import DraggableReorderList from '../DraggableReorderList.vue';
 // The component is pointer-driven, so we drive it through real pointer events on
 // window while mocking the layout APIs jsdom does not implement: elementFromPoint
 // (which card is under the cursor) and getBoundingClientRect (its geometry).
 const elementAtPoint = { current: null };
 const move = (clientX, clientY) =>
  window.dispatchEvent(new MouseEvent('pointermove', { clientX, clientY }));
 const release = () => window.dispatchEvent(new MouseEvent('pointerup'));
 // Stack the rows 50px apart, each 40px tall, inside a 500px-wide list.
 const stubGeometry = wrapper => {
  wrapper.element.getBoundingClientRect = () => ({
    left: 0,
    right: 500,
    top: 0,
    bottom: 600,
  });
  wrapper.findAll('[data-drag-id]').forEach((li, index) => {
    const top = index * 50;
    li.element.getBoundingClientRect = () => ({
      top,
      height: 40,
      bottom: top + 40,
    });
  });
 };
 const mountList = (props = {}) =>
  mount(DraggableReorderList, {
    props: { items: [], ...props },
    slots: {
      item: scope => h('div', { class: 'card' }, scope.item.title),
      ghost: scope => h('div', { class: 'ghost' }, scope.item.title),
    },
    global: { stubs: { Icon: true, teleport: true } },
  });
 describe('DraggableReorderList', () => {
  let wrapper;
  beforeEach(() => {
    elementAtPoint.current = null;
    document.elementFromPoint = vi.fn(() => elementAtPoint.current);
  });
  afterEach(() => {
    wrapper?.unmount();
    vi.useRealTimers();
  });
  const startDragging = async id => {
    stubGeometry(wrapper);
    wrapper.find(`[data-drag-id="${id}"]`).element.dispatchEvent(
      new MouseEvent('pointerdown', {
        button: 0,
        clientX: 250,
        clientY: 20,
        bubbles: true,
      })
    );
    await nextTick();
  };
  it('renders each item through the item slot', () => {
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha' },
        { id: 2, title: 'Beta' },
      ],
    });
    const cards = wrapper.findAll('.card');
    expect(cards).toHaveLength(2);
    expect(cards[0].text()).toBe('Alpha');
    expect(wrapper.find('[data-drag-id="1"]').exists()).toBe(true);
    expect(wrapper.find('[data-drag-id="2"]').exists()).toBe(true);
  });
  it('shows a grab affordance only when enabled', () => {
    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }] });
    expect(wrapper.find('[data-drag-id="1"]').classes()).toContain(
      'cursor-grab'
    );
    wrapper.unmount();
    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }], disabled: true });
    expect(wrapper.find('[data-drag-id="1"]').classes()).not.toContain(
      'cursor-grab'
    );
  });
  it('does not start a drag when disabled', async () => {
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha' },
        { id: 2, title: 'Beta' },
      ],
      disabled: true,
    });
    await startDragging(1);
    move(250, 200);
    await nextTick();
    expect(wrapper.emitted('dragging')).toBeUndefined();
  });
  it('emits dragging true then false across a drag', async () => {
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha' },
        { id: 2, title: 'Beta' },
      ],
    });
    await startDragging(1);
    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
    move(250, 60);
    await nextTick();
    expect(wrapper.emitted('dragging')[0]).toEqual([true]);
    release();
    await nextTick();
    expect(wrapper.emitted('dragging')[1]).toEqual([false]);
  });
  it('emits the midpoint position when dropped between two rows', async () => {
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha', position: 10 },
        { id: 2, title: 'Beta', position: 20 },
        { id: 3, title: 'Gamma', position: 30 },
      ],
    });
    await startDragging(1);
    // Hover the lower half of Beta (top 50, height 40 → midpoint 70) so the gap
    // sits before Gamma; dropping there lands halfway between Beta and Gamma.
    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
    move(250, 85);
    await nextTick();
    release();
    await nextTick();
    expect(wrapper.emitted('reorder')[0][0]).toEqual({ 1: 25 });
  });
  it('does not reorder when the only row on a page is dropped in place', async () => {
    // P1: dragging the lone article on a later page and releasing without
    // crossing to another page must be a no-op, not move it to the top.
    wrapper = mountList({
      items: [{ id: 5, title: 'Solo', position: 260 }],
      currentPage: 2,
      totalPages: 2,
    });
    await startDragging(5);
    move(250, 300);
    await nextTick();
    release();
    await nextTick();
    expect(wrapper.emitted('dragging')).toEqual([[true], [false]]);
    expect(wrapper.emitted('reorder')).toBeUndefined();
  });
  it('turns the page after dwelling on a pageable edge', async () => {
    vi.useFakeTimers();
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha', position: 10 },
        { id: 2, title: 'Beta', position: 20 },
      ],
      currentPage: 1,
      totalPages: 2,
    });
    await startDragging(1);
    // Drag to the right edge over blank space (no card) and hold.
    elementAtPoint.current = null;
    move(490, 20);
    await nextTick();
    vi.advanceTimersByTime(600);
    expect(wrapper.emitted('navigatePage')[0]).toEqual([2]);
  });
  it('can still turn pages after releasing during a pending flip', async () => {
    // Releasing while a flip fetch is in flight must clear paging state, or every
    // later drag would be stuck unable to navigate.
    vi.useFakeTimers();
    wrapper = mountList({
      items: [
        { id: 1, title: 'Alpha', position: 10 },
        { id: 2, title: 'Beta', position: 20 },
      ],
      currentPage: 1,
      totalPages: 2,
    });
    // First drag: park at the edge to start a flip, then release before the new
    // page arrives (items never change here).
    await startDragging(1);
    elementAtPoint.current = null;
    move(490, 20);
    await nextTick();
    vi.advanceTimersByTime(600);
    release();
    await nextTick();
    // Second drag must be able to flip again.
    await startDragging(1);
    elementAtPoint.current = null;
    move(490, 20);
    await nextTick();
    vi.advanceTimersByTime(600);
    expect(wrapper.emitted('navigatePage')).toEqual([[2], [2]]);
  });
 });
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useTemplateRef } from 'vue';
+import { computed } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
@@ -7,9 +7,7 @@ import {
  ARTICLE_MENU_ITEMS,
  ARTICLE_MENU_OPTIONS,
  ARTICLE_STATUSES,
  getArticleStatus,
 } from 'dashboard/helper/portalHelper';
 import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
@@ -55,10 +53,6 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
  hasPendingChanges: {
    type: Boolean,
    default: false,
  },
  selectable: {
    type: Boolean,
    default: false,
@@ -74,16 +68,12 @@ const emit = defineEmits([
  'articleAction',
  'toggleSelect',
  'hover',
  'draftResolved',
  'draftFailed',
 ]);
 const { t } = useI18n();
 const [showActionsDropdown, toggleDropdown] = useToggle();
 const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
 const currentAccountId = useMapGetter('getCurrentAccountId');
 const isFeatureEnabledonAccount = useMapGetter(
  'accounts/isFeatureEnabledonAccount'
@@ -115,18 +105,7 @@ const articleMenuItems = computed(() => {
    .filter(key => key !== 'translate' || isTranslationAvailable.value)
    .map(key => commonItems[key]);
-  const draftItems = props.hasPendingChanges
+  return [...statusItems, commonItems.delete];
    ? [
        {
          label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
          value: 'discard-draft',
          action: 'discard-draft',
          icon: 'i-lucide-undo-2',
        },
      ]
    : [];
  return [...statusItems, ...draftItems, commonItems.delete];
 });
 const statusTextColor = computed(() => {
@@ -174,12 +153,6 @@ const lastUpdatedAt = computed(() => {
 const handleArticleAction = ({ action, value }) => {
  toggleDropdown(false);
  // Un-publishing an article with staged edits — confirm apply/discard first;
  // the popover applies the chosen status itself.
  if (props.hasPendingChanges && (action === 'draft' || action === 'archive')) {
    pendingChangesPopoverRef.value?.open(getArticleStatus(value));
    return;
  }
  emit('articleAction', { action, value, id: props.id });
 };
@@ -211,18 +184,6 @@ const handleClick = id => {
        </span>
      </div>
      <div class="flex items-center gap-2">
        <span
          v-if="hasPendingChanges"
          :title="
            t(
              'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS_TOOLTIP'
            )
          "
          class="text-xs font-medium inline-flex items-center gap-1 h-6 px-2 py-0.5 rounded-md text-n-slate-11 bg-n-alpha-2 whitespace-nowrap shrink-0"
        >
          <span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
          {{ t('HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.PENDING_EDITS') }}
        </span>
        <span
          class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
          :class="statusTextColor"
@@ -243,15 +204,9 @@ const handleClick = id => {
          <DropdownMenu
            v-if="showActionsDropdown"
            :menu-items="articleMenuItems"
-            class="mt-1 end-0 top-full w-40"
+            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 top-full"
            @action="handleArticleAction($event)"
          />
          <ArticlePendingChangesPopover
            ref="pendingChangesPopoverRef"
            :article-id="id"
            @resolved="emit('draftResolved', $event)"
            @failed="emit('draftFailed', $event)"
          />
        </div>
      </div>
    </div>
@@ -56,9 +56,6 @@ const localeMenuLabels = computed(() => ({
  'customize-content': t(
    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
  ),
  'select-popular-content': t(
    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT'
  ),
  delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
@@ -1,173 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import MessageFormatter from 'shared/helpers/MessageFormatter';
 import {
  renderInlineDiff,
  buildDiffBlocks,
 } from 'dashboard/helper/articleDiffHelper';
 import Button from 'dashboard/components-next/button/Button.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 const props = defineProps({
  article: {
    type: Object,
    default: () => ({}),
  },
 });
 const isOpen = defineModel({ type: Boolean, default: false });
 const { t } = useI18n();
 const liveTitle = computed(() => props.article?.title ?? '');
 const liveContent = computed(() => props.article?.content ?? '');
 const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
 const draftContent = computed(
  () => props.article?.draftContent ?? liveContent.value
 );
 const titleChanged = computed(() => liveTitle.value !== draftTitle.value);
 const titleDiff = computed(() =>
  renderInlineDiff(liveTitle.value, draftTitle.value)
 );
 const contentBlocks = computed(() =>
  buildDiffBlocks(liveContent.value, draftContent.value)
 );
 const contentChanged = computed(() =>
  contentBlocks.value.some(block => block.type !== 'equal')
 );
 // HC tables store per-column widths (px, 0 = unset) in this marker, which the
 // formatter strips. Re-apply them as a fixed-layout <colgroup>, defaulting
 // unsized columns so they don't collapse.
 const COLWIDTHS_RE = /<!--cw-colwidths:([\d,]+)-->/;
 const DEFAULT_COL_WIDTH = 50;
 const applyColumnWidths = (html, widths) => {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  const table = doc.body.querySelector('table');
  if (!table) return html;
  const sized = widths.map(width => (width > 0 ? width : DEFAULT_COL_WIDTH));
  const colgroup = doc.createElement('colgroup');
  sized.forEach(width => {
    const col = doc.createElement('col');
    col.style.width = `${width}px`;
    colgroup.appendChild(col);
  });
  table.insertBefore(colgroup, table.firstChild);
  table.style.tableLayout = 'fixed';
  table.style.width = `${sized.reduce((sum, width) => sum + width, 0)}px`;
  return doc.body.innerHTML;
 };
 const renderMarkdown = markdown => {
  if (!markdown) return '';
  const html = new MessageFormatter(markdown).formattedMessage;
  const match = markdown.match(COLWIDTHS_RE);
  return match
    ? applyColumnWidths(html, match[1].split(',').map(Number))
    : html;
 };
 const blockClass = type => {
  if (type === 'added') {
    return 'border-n-teal-9 bg-n-teal-2';
  }
  if (type === 'removed') {
    return 'border-n-ruby-9 bg-n-ruby-2 line-through decoration-n-ruby-9/50';
  }
  return 'border-transparent';
 };
 const close = () => {
  isOpen.value = false;
 };
 const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
 useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
 </script>
 <template>
  <TeleportWithDirection to="body">
    <Transition
      enter-active-class="transition-transform duration-200 ease-in-out"
      leave-active-class="transition-transform duration-200 ease-in-out"
      enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
      enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
      leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
      leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
    >
      <aside
        v-if="isOpen"
        v-on-click-outside="dismissOnClickOutside"
        class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
      >
        <header
          class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
        >
          <div class="flex flex-col gap-1 min-w-0">
            <div class="flex items-center gap-2">
              <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
              <h3 class="text-base font-medium leading-6 text-n-slate-12">
                {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
              </h3>
            </div>
            <p class="text-sm text-n-slate-11">
              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
            </p>
          </div>
          <Button
            icon="i-lucide-x"
            variant="ghost"
            color="slate"
            size="sm"
            class="shrink-0 hover:text-n-slate-11"
            @click="close"
          />
        </header>
        <div
          class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
        >
          <!-- eslint-disable vue/no-v-html -->
          <div
            v-if="titleChanged"
            class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
          >
            <span
              class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
            >
              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
            </span>
            <h1
              class="text-lg font-semibold leading-snug text-n-slate-12"
              v-html="titleDiff"
            />
          </div>
          <div
            v-if="contentChanged"
            class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
          >
            <div
              v-for="(block, index) in contentBlocks"
              :key="index"
              class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
              :class="blockClass(block.type)"
              v-html="renderMarkdown(block.md)"
            />
          </div>
          <!-- eslint-enable vue/no-v-html -->
        </div>
      </aside>
    </Transition>
  </TeleportWithDirection>
 </template>
@@ -1,6 +1,6 @@
 <script setup>
-import { ref, computed, watch, onBeforeUnmount } from 'vue';
+import { ref, computed, watch } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -9,7 +9,6 @@ import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import FullEditor from 'dashboard/components/widgets/WootWriter/FullEditor.vue';
 import ArticleEditorHeader from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue';
 import ArticleEditorControls from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorControls.vue';
 import ArticleDiffPanel from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue';
 const props = defineProps({
  article: {
@@ -39,75 +38,32 @@ const { t } = useI18n();
 const isNewArticle = computed(() => !props.article?.id);
-// Prefer the draft; `??` keeps a deliberately-cleared empty string instead of
+const localTitle = ref(props.article?.title ?? '');
-// falling back to the live value.
+const localContent = ref(props.article?.content ?? '');
 const effectiveTitle = () =>
  props.article?.draftTitle ?? props.article?.title ?? '';
 const effectiveContent = () =>
  props.article?.draftContent ?? props.article?.content ?? '';
-const hasPendingChanges = computed(
+// Sync local state when navigating to a different article or on initial fetch
  () => props.article?.draftTitle != null || props.article?.draftContent != null
 );
 const localTitle = ref(effectiveTitle());
 const localContent = ref(effectiveContent());
 const isDiffPanelOpen = ref(false);
 // Autosave 500ms after the last edit. It sends both title and content so an
 // edit to one never drops a recent edit to the other. `stop` cancels a queued
 // save; `isPending` tells the header to wait before allowing a publish.
 const {
  isPending: isSaving,
  start: debouncedSave,
  stop: cancelSave,
 } = useTimeoutFn(
  () =>
    emit('saveArticle', {
      title: localTitle.value,
      content: localContent.value,
    }),
  500,
  { immediate: false }
 );
 const syncLocalState = () => {
  cancelSave();
  localTitle.value = effectiveTitle();
  localContent.value = effectiveContent();
 };
 // Reseed on article switch or once a draft is published/discarded; close the
 // diff panel in the latter case since there's nothing left to compare.
 watch(
-  [() => props.article?.id, hasPendingChanges],
+  () => props.article?.id,
-  ([id, pending], [prevId, prevPending]) => {
+  newId => {
-    if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
+    if (newId) {
-    if (prevPending && !pending) isDiffPanelOpen.value = false;
+      localTitle.value = props.article?.title ?? '';
      localContent.value = props.article?.content ?? '';
    }
  }
 );
-const scheduleSave = () => {
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
  if (isNewArticle.value) return;
  debouncedSave();
 };
-// Flush a queued save on unmount so leaving the editor doesn't drop the last edit.
+const handleSave = value => {
-onBeforeUnmount(() => {
+  if (isNewArticle.value) return;
-  if (isNewArticle.value || !isSaving.value) return;
+  debouncedSave(value);
-  cancelSave();
+};
  emit('saveArticle', {
    title: localTitle.value,
    content: localContent.value,
  });
 });
 const articleTitle = computed({
  get: () => localTitle.value,
  set: value => {
    localTitle.value = value;
-    scheduleSave();
+    handleSave({ title: value });
  },
 });
@@ -115,7 +71,7 @@ const articleContent = computed({
  get: () => localContent.value,
  set: content => {
    localContent.value = content;
-    scheduleSave();
+    handleSave({ content });
  },
 });
@@ -152,13 +108,9 @@ const handleCreateArticle = event => {
        :is-saved="isSaved"
        :status="article.status"
        :article-id="article.id"
        :pending-changes="hasPendingChanges"
        :is-saving="isSaving"
        @go-back="onClickGoBack"
        @preview-article="previewArticle"
        @show-diff="isDiffPanelOpen = !isDiffPanelOpen"
      />
      <ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
    </template>
    <template #content>
      <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
@@ -1,8 +1,8 @@
 <script setup>
-import { computed, ref, useTemplateRef } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store.js';
+import { useStore } from 'dashboard/composables/store.js';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { OnClickOutside } from '@vueuse/components';
@@ -17,7 +17,6 @@ import wootConstants from 'dashboard/constants/globals';
 import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import ArticlePendingChangesPopover from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticlePendingChangesPopover.vue';
 const props = defineProps({
  isUpdating: {
@@ -36,17 +35,9 @@ const props = defineProps({
    type: Number,
    default: 0,
  },
  pendingChanges: {
    type: Boolean,
    default: false,
  },
  isSaving: {
    type: Boolean,
    default: false,
  },
 });
-const emit = defineEmits(['goBack', 'previewArticle', 'showDiff']);
+const emit = defineEmits(['goBack', 'previewArticle']);
 const { t } = useI18n();
 const store = useStore();
@@ -58,30 +49,9 @@ const { ARTICLE_STATUS_TYPES } = wootConstants;
 const showArticleActionMenu = ref(false);
 const pendingChangesPopoverRef = useTemplateRef('pendingChangesPopoverRef');
 // Per-article update flag the store already maintains.
 const articleUiFlags = useMapGetter('articles/uiFlags');
 const isUpdatingArticle = computed(
  () => articleUiFlags.value(props.articleId).isUpdating
 );
 // Publishing while a save is still in flight would promote a stale draft, so we show an alert
 const blockedWhileSaving = () => {
  if (!props.isSaving && !isUpdatingArticle.value) return false;
  useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.SAVE_IN_PROGRESS'));
  return true;
 };
 const isPublished = computed(() => props.status === ARTICLE_STATUSES.PUBLISHED);
 const hasPendingChanges = computed(
  () => isPublished.value && props.pendingChanges
 );
 const articleMenuItems = computed(() => {
  const statusOptions = ARTICLE_EDITOR_STATUS_OPTIONS[props.status] ?? [];
-  const items = statusOptions.map(option => {
+  return statusOptions.map(option => {
    const { label, value, icon } = ARTICLE_MENU_ITEMS[option];
    return {
      label: t(label),
@@ -90,17 +60,6 @@ const articleMenuItems = computed(() => {
      icon,
    };
  });
  if (hasPendingChanges.value) {
    items.push({
      label: t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES'),
      value: 'discard-draft',
      action: 'discard-draft',
      icon: 'i-lucide-undo-2',
    });
  }
  return items;
 });
 const statusText = computed(() =>
@@ -126,9 +85,8 @@ const getStatusMessage = (status, isSuccess) => {
    : '';
 };
-// Pass draftAction (publishDraft/discardDraft) to resolve a draft in the same
+const updateArticleStatus = async ({ value }) => {
-// update; omit it for a plain status change.
+  showArticleActionMenu.value = false;
 const performStatusUpdate = async (value, draftAction) => {
  const status = getArticleStatus(value);
  if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
    isArticlePublishing.value = true;
@@ -136,7 +94,7 @@ const performStatusUpdate = async (value, draftAction) => {
  const { portalSlug } = route.params;
  try {
-    await store.dispatch(`articles/${draftAction ?? 'update'}`, {
+    await store.dispatch('articles/update', {
      portalSlug,
      articleId: props.articleId,
      status,
@@ -149,100 +107,12 @@ const performStatusUpdate = async (value, draftAction) => {
    } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
      useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
    }
    isArticlePublishing.value = false;
  } catch (error) {
    useAlert(error?.message ?? getStatusMessage(status, false));
  } finally {
    isArticlePublishing.value = false;
  }
 };
 const updateArticleStatus = ({ value }) => {
  showArticleActionMenu.value = false;
  // Leaving published with unsaved draft edits — ask whether to apply or discard
  // first; the popover applies the status itself once resolved.
  if (hasPendingChanges.value) {
    pendingChangesPopoverRef.value?.open(getArticleStatus(value));
    return;
  }
  performStatusUpdate(value);
 };
 const publishDraftChanges = async () => {
  isArticlePublishing.value = true;
  const { portalSlug } = route.params;
  try {
    await store.dispatch('articles/publishDraft', {
      portalSlug,
      articleId: props.articleId,
    });
    useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_SUCCESS'));
    useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
  } catch (error) {
    useAlert(
      error?.message ??
        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
    );
  } finally {
    isArticlePublishing.value = false;
  }
 };
 const discardDraftChanges = async () => {
  const { portalSlug } = route.params;
  try {
    await store.dispatch('articles/discardDraft', {
      portalSlug,
      articleId: props.articleId,
    });
    useAlert(t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS'));
  } catch (error) {
    useAlert(
      error?.message ??
        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR')
    );
  }
 };
 const onPrimaryAction = () => {
  if (blockedWhileSaving()) return;
  if (hasPendingChanges.value) {
    publishDraftChanges();
  } else if (props.pendingChanges) {
    // Promote leftover draft edits on publish instead of republishing stale content.
    performStatusUpdate(ARTICLE_STATUSES.PUBLISHED, 'publishDraft');
  } else {
    updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED });
  }
 };
 const onMenuAction = event => {
  showArticleActionMenu.value = false;
  // Don't resolve a draft while an autosave is still in flight — it could land
  // after and recreate the draft we just discarded/applied.
  if (blockedWhileSaving()) return;
  if (event.action === 'discard-draft') {
    discardDraftChanges();
  } else {
    updateArticleStatus(event);
  }
 };
 // The popover applies the draft + status itself; we just surface the outcome.
 const onDraftResolved = status => {
  useAlert(getStatusMessage(status, true));
  if (status === ARTICLE_STATUS_TYPES.ARCHIVE) {
    useTrack(PORTALS_EVENTS.ARCHIVE_ARTICLE, { uiFrom: 'header' });
  } else if (status === ARTICLE_STATUS_TYPES.PUBLISH) {
    useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
  }
 };
 const onDraftFailed = error => {
  useAlert(
    error?.message ??
      t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
  );
 };
 </script>
 <template>
@@ -257,24 +127,13 @@ const onDraftFailed = error => {
      @click="onClickGoBack"
    />
    <div class="flex items-center gap-4">
      <button
        v-if="hasPendingChanges"
        type="button"
        data-diff-toggle
        :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
        class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
        @click="emit('showDiff')"
      >
        <span class="rounded-full size-1.5 bg-n-amber-9 shrink-0" />
        {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PENDING_CHANGES') }}
      </button>
      <span
        v-if="isUpdating || isSaved"
        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
      >
        {{ statusText }}
      </span>
-      <div class="relative flex items-center gap-2">
+      <div class="flex items-center gap-2">
        <Button
          :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PREVIEW')"
          color="slate"
@@ -284,21 +143,17 @@ const onDraftFailed = error => {
        />
        <ButtonGroup class="flex items-center">
          <Button
-            :label="
+            :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
              hasPendingChanges
                ? t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES')
                : t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')
            "
            size="sm"
            class="ltr:rounded-r-none rtl:rounded-l-none"
            no-animation
            :is-loading="isArticlePublishing"
            :disabled="
              status === ARTICLE_STATUSES.PUBLISHED ||
              !articleId ||
-              isArticlePublishing ||
+              isArticlePublishing
              (isPublished && !hasPendingChanges)
            "
-            @click="onPrimaryAction"
+            @click="updateArticleStatus({ value: ARTICLE_STATUSES.PUBLISHED })"
          />
          <div class="relative">
            <OnClickOutside @trigger="showArticleActionMenu = false">
@@ -314,17 +169,11 @@ const onDraftFailed = error => {
                v-if="showArticleActionMenu"
                :menu-items="articleMenuItems"
                class="mt-2 ltr:right-0 rtl:left-0 top-full"
-                @action="onMenuAction($event)"
+                @action="updateArticleStatus($event)"
              />
            </OnClickOutside>
          </div>
        </ButtonGroup>
        <ArticlePendingChangesPopover
          ref="pendingChangesPopoverRef"
          :article-id="articleId"
          @resolved="onDraftResolved"
          @failed="onDraftFailed"
        />
      </div>
    </div>
  </div>
@@ -1,132 +0,0 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { onKeyStroke } from '@vueuse/core';
 import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 const props = defineProps({
  articleId: {
    type: Number,
    required: true,
  },
 });
 const emit = defineEmits(['resolved', 'failed']);
 const { t } = useI18n();
 const store = useStore();
 const route = useRoute();
 const isOpen = ref(false);
 const requestedStatus = ref(null);
 // Which button is in flight, so only that one shows the spinner.
 const activeAction = ref(null);
 const articleUiFlags = useMapGetter('articles/uiFlags');
 const isLoading = computed(
  () => articleUiFlags.value(props.articleId).isUpdating
 );
 // Open the confirmation for a target status; resolving it also applies that status.
 const open = status => {
  requestedStatus.value = status;
  activeAction.value = null;
  isOpen.value = true;
 };
 const close = () => {
  isOpen.value = false;
 };
 // Don't let a click-outside or Escape dismiss the popover mid-action.
 const dismiss = () => {
  if (!isLoading.value) close();
 };
 const resolve = async draftAction => {
  activeAction.value = draftAction === 'publishDraft' ? 'apply' : 'discard';
  try {
    await store.dispatch(`articles/${draftAction}`, {
      portalSlug: route.params.portalSlug,
      articleId: props.articleId,
      status: requestedStatus.value,
    });
    emit('resolved', requestedStatus.value);
    close();
  } catch (error) {
    emit('failed', error);
  }
 };
 const onApply = () => resolve('publishDraft');
 const onDiscard = () => resolve('discardDraft');
 onKeyStroke('Escape', () => {
  if (isOpen.value) dismiss();
 });
 defineExpose({ open, close });
 </script>
 <template>
  <div
    v-show="isOpen"
    v-on-click-outside="dismiss"
    class="absolute z-50 flex flex-col gap-4 p-4 mt-2 outline outline-1 shadow-lg w-96 end-0 top-full rounded-xl bg-n-alpha-3 backdrop-blur-[100px] outline-n-container"
  >
    <div class="flex items-start justify-between gap-2">
      <div class="flex flex-col gap-1">
        <h3 class="text-base font-medium text-n-slate-12">
          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.TITLE') }}
        </h3>
        <p class="mb-0 text-sm text-n-slate-11">
          {{
            t(
              'HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DESCRIPTION'
            )
          }}
        </p>
      </div>
      <Button
        icon="i-lucide-x"
        variant="ghost"
        color="slate"
        size="xs"
        class="shrink-0 -me-1 -mt-1"
        :disabled="isLoading"
        @click="close"
      />
    </div>
    <div class="flex items-center justify-between gap-2">
      <Button
        type="button"
        variant="faded"
        color="ruby"
        size="sm"
        class="flex-1"
        :is-loading="isLoading && activeAction === 'discard'"
        :disabled="isLoading"
        :label="
          t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.DISCARD')
        "
        @click="onDiscard"
      />
      <Button
        type="button"
        color="blue"
        size="sm"
        class="flex-1"
        :is-loading="isLoading && activeAction === 'apply'"
        :disabled="isLoading"
        :label="
          t('HELP_CENTER.EDIT_ARTICLE_PAGE.PENDING_CHANGES_POPOVER.APPLY')
        "
        @click="onApply"
      />
    </div>
  </div>
 </template>
@@ -1,19 +1,15 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Draggable from 'vuedraggable';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import {
+import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
  getArticleStatus,
  ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper.js';
 import wootConstants from 'dashboard/constants/globals';
 import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
 import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
 const props = defineProps({
  articles: {
@@ -32,22 +28,9 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  totalPages: {
    type: Number,
    default: 1,
  },
 });
-const emit = defineEmits([
+const emit = defineEmits(['translateArticle', 'toggleSelect']);
  'translateArticle',
  'toggleSelect',
  'navigatePage',
  'dragging',
 ]);
 const { ARTICLE_STATUS_TYPES } = wootConstants;
@@ -56,14 +39,14 @@ const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 const localArticles = ref(props.articles);
 const hoveredArticleId = ref(null);
 const dragEnabled = computed(() => {
  const canReorder = props.articles?.length > 1 || props.totalPages > 1;
  return (
    props.isCategoryArticles &&
    !props.isSearching &&
-    canReorder &&
+    localArticles.value?.length > 1 &&
    props.selectedArticleIds.size === 0
  );
 });
@@ -80,10 +63,6 @@ const handleCardHover = (isHovered, id) => {
 const getCategoryById = useMapGetter('categories/categoryById');
 const getCategory = categoryId => {
  return getCategoryById.value(categoryId) || { name: '', icon: '' };
 };
 const openArticle = id => {
  const { tab, categorySlug, locale } = route.params;
  if (props.isCategoryArticles) {
@@ -104,25 +83,38 @@ const openArticle = id => {
  }
 };
-const onReorder = async positionsHash => {
+const onReorder = async reorderedGroup => {
  const [movedId] = Object.keys(positionsHash);
  // A same-page reorder updates optimistically in the store, so it needs no
  // refetch. Only a cross-page drop must refresh, to pull the moved article
  // onto this page in its new spot.
  const isCrossPage = !props.articles.some(
    article => String(article.id) === movedId
  );
  try {
    await store.dispatch('articles/reorder', {
-      reorderedGroup: positionsHash,
+      reorderedGroup,
      portalSlug: route.params.portalSlug,
    });
    if (isCrossPage) emit('navigatePage', props.currentPage);
  } catch {
    useAlert(t('HELP_CENTER.REORDER_ARTICLE.API.ERROR_MESSAGE'));
  }
 };
 const onDragEnd = () => {
  // Collect and sort existing positions, falling back to index+1 for null/0 values
  const sortedArticlePositions = localArticles.value
    .map((article, index) => article.position || index + 1)
    .sort((a, b) => a - b);
  const orderedArticles = localArticles.value.map(article => article.id);
  // Create a map of article IDs to their new positions
  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
    obj[key] = sortedArticlePositions[index];
    return obj;
  }, {});
  onReorder(reorderedGroup);
 };
 const getCategory = categoryId => {
  return getCategoryById.value(categoryId) || { name: '', icon: '' };
 };
 const getStatusMessage = (status, isSuccess) => {
  const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
  const statusMap = {
@@ -149,24 +141,6 @@ const updateArticlesMeta = () => {
  });
 };
 const refreshArticleMeta = async () => {
  await updateArticlesMeta();
  await updatePortalMeta();
 };
 // The card's pending-changes popover applies the status itself; surface the result.
 const onDraftResolved = status => {
  useAlert(getStatusMessage(status, true));
  refreshArticleMeta();
 };
 const onDraftFailed = error => {
  useAlert(
    error?.message ||
      t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES_ERROR')
  );
 };
 const handleArticleAction = async (action, { status, id }) => {
  const { portalSlug } = route.params;
  try {
@@ -176,14 +150,6 @@ const handleArticleAction = async (action, { status, id }) => {
        articleId: id,
      });
      useAlert(t('HELP_CENTER.DELETE_ARTICLE.API.SUCCESS_MESSAGE'));
    } else if (action === 'discard-draft') {
      await store.dispatch('articles/discardDraft', {
        portalSlug,
        articleId: id,
      });
      useAlert(
        t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_SUCCESS')
      );
    } else {
      await store.dispatch('articles/update', {
        portalSlug,
@@ -198,16 +164,15 @@ const handleArticleAction = async (action, { status, id }) => {
        useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
      }
    }
-    await refreshArticleMeta();
+    await updateArticlesMeta();
    await updatePortalMeta();
  } catch (error) {
-    const fallbackMessage =
+    const errorMessage =
-      {
+      error?.message ||
-        delete: t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE'),
+      (action === 'delete'
-        'discard-draft': t(
+        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
-          'HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR'
+        : getStatusMessage(status, false));
-        ),
+    useAlert(errorMessage);
      }[action] ?? getStatusMessage(status, false);
    useAlert(error?.message || fallbackMessage);
  }
 };
@@ -219,51 +184,54 @@ const updateArticle = ({ action, value, id }) => {
  const status = action !== 'delete' ? getArticleStatus(value) : null;
  handleArticleAction(action, { status, id });
 };
 // Watch for changes in the articles prop and update the localArticles ref
 watch(
  () => props.articles,
  newArticles => {
    localArticles.value = newArticles;
  },
  { deep: true }
 );
 </script>
 <template>
-  <DraggableReorderList
+  <Draggable
-    :items="articles"
+    v-model="localArticles"
    :disabled="!dragEnabled"
-    :current-page="currentPage"
+    item-key="id"
-    :total-pages="totalPages"
+    tag="ul"
-    @reorder="onReorder"
+    ghost-class="article-ghost-class"
-    @navigate-page="page => emit('navigatePage', page)"
+    class="w-full h-full space-y-4"
-    @dragging="value => emit('dragging', value)"
+    @end="onDragEnd"
  >
-    <template #item="{ item }">
+    <template #item="{ element }">
-      <ArticleCard
+      <li class="list-none rounded-2xl">
-        :id="item.id"
+        <ArticleCard
-        :title="item.title"
+          :id="element.id"
-        :status="item.status"
+          :key="element.id"
-        :author="item.author"
+          :title="element.title"
-        :category="getCategory(item.category.id)"
+          :status="element.status"
-        :views="item.views || 0"
+          :author="element.author"
-        :updated-at="item.updatedAt"
+          :category="getCategory(element.category.id)"
-        :is-selected="selectedArticleIds.has(item.id)"
+          :views="element.views || 0"
-        :has-pending-changes="
+          :updated-at="element.updatedAt"
-          item.status === ARTICLE_STATUSES.PUBLISHED && hasPendingChanges(item)
+          :is-selected="selectedArticleIds.has(element.id)"
-        "
+          selectable
-        selectable
+          :show-selection-control="shouldShowSelectionControl(element.id)"
-        :show-selection-control="shouldShowSelectionControl(item.id)"
+          :class="{ 'cursor-grab': dragEnabled }"
-        @open-article="openArticle"
+          @open-article="openArticle"
-        @article-action="updateArticle"
+          @article-action="updateArticle"
-        @draft-resolved="onDraftResolved"
+          @toggle-select="emit('toggleSelect', $event)"
-        @draft-failed="onDraftFailed"
+          @hover="isHovered => handleCardHover(isHovered, element.id)"
-        @toggle-select="emit('toggleSelect', $event)"
+        />
-        @hover="isHovered => handleCardHover(isHovered, item.id)"
+      </li>
      />
    </template>
-    <template #ghost="{ item }">
+  </Draggable>
      <ArticleCard
        :id="item.id"
        :title="item.title"
        :status="item.status"
        :author="item.author"
        :category="getCategory(item.category.id)"
        :views="item.views || 0"
        :updated-at="item.updatedAt"
      />
    </template>
  </DraggableReorderList>
 </template>
 <style lang="scss" scoped>
 .article-ghost-class {
  @apply opacity-50 bg-n-solid-1;
 }
 </style>
@@ -3,15 +3,10 @@ import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
-import { useStore, useMapGetter } from 'dashboard/composables/store.js';
+import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { debounce } from '@chatwoot/utils';
-import {
+import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
  ARTICLE_TABS,
  CATEGORY_ALL,
  ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper';
 import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
 import articlesAPI from 'dashboard/api/helpCenter/articles';
@@ -65,7 +60,6 @@ const emit = defineEmits([
 const router = useRouter();
 const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -76,7 +70,6 @@ const isFeatureEnabledonAccount = useMapGetter(
 );
 const selectedArticleIds = ref(new Set());
 const isArticleDragging = ref(false);
 const deleteConfirmDialogRef = ref(null);
 const isCategoryMenuOpen = ref(false);
 const searchQuery = ref(route.query.search || '');
@@ -155,8 +148,6 @@ const articlesCount = computed(() => {
  return Number(countMap[tab] || countMap['']);
 });
 const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
 const showArticleHeaderControls = computed(
  () => !props.isCategoryArticles && !isSwitchingPortal.value
 );
@@ -233,46 +224,15 @@ const onBulkActionSuccess = message => {
 };
 const bulkUpdateStatus = async status => {
  const selectedIds = [...selectedArticleIds.value];
  const { portalSlug } = route.params;
  const pendingIds = props.articles
    .filter(
      article =>
        selectedIds.includes(article.id) &&
        article.status === ARTICLE_STATUSES.PUBLISHED &&
        hasPendingChanges(article)
    )
    .map(article => article.id);
  // Publish promotes each pending draft; other status changes skip them.
  const isPublishing = status === ARTICLE_STATUSES.PUBLISHED;
  const draftIds = isPublishing ? pendingIds : [];
  const skippedCount = isPublishing ? 0 : pendingIds.length;
  const articleIds = selectedIds.filter(id => !pendingIds.includes(id));
  if (!articleIds.length && !draftIds.length) {
    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED_ALL'));
    return;
  }
  try {
-    if (articleIds.length) {
+    await articlesAPI.bulkUpdateStatus({
-      await articlesAPI.bulkUpdateStatus({ portalSlug, articleIds, status });
+      portalSlug: route.params.portalSlug,
-    }
+      articleIds: [...selectedArticleIds.value],
-    await Promise.all(
+      status,
-      draftIds.map(articleId =>
+    });
        store.dispatch('articles/publishDraft', { portalSlug, articleId })
      )
    );
    onBulkActionSuccess(
      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
    );
    if (skippedCount) {
      useAlert(
        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SKIPPED', skippedCount)
      );
    }
  } catch (error) {
    useAlert(
      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
@@ -383,7 +343,7 @@ watch(
    </template>
    <template #content>
      <div
-        v-if="isLoading && !isArticleDragging"
+        v-if="isLoading"
        class="flex items-center justify-center py-10 text-n-slate-11"
      >
        <Spinner />
@@ -493,13 +453,9 @@ watch(
          :is-category-articles="isCategoryArticles"
          :is-searching="isSearching"
          :selected-article-ids="selectedArticleIds"
          :current-page="Number(meta.currentPage)"
          :total-pages="totalPages"
          class="relative z-0"
          @translate-article="handleTranslateArticle"
          @toggle-select="handleToggleSelect"
          @navigate-page="handlePageChange"
          @dragging="isArticleDragging = $event"
        />
      </template>
      <ArticleEmptyState
@@ -2,7 +2,6 @@
 import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
 import PopularContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -27,7 +26,6 @@ const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 const contentDialogRef = ref(null);
 const popularContentDialogRef = ref(null);
 const isLocaleDefault = code => {
  return props.portal?.meta?.default_locale === code;
@@ -156,8 +154,6 @@ const handleAction = ({ action }, localeCode) => {
    publishLocale({ localeCode: localeCode });
  } else if (action === 'customize-content') {
    contentDialogRef.value.openForLocale(localeCode);
  } else if (action === 'select-popular-content') {
    popularContentDialogRef.value.openForLocale(localeCode);
  } else if (action === 'delete') {
    deletePortalLocale({ localeCode: localeCode });
  }
@@ -178,6 +174,5 @@ const handleAction = ({ action }, localeCode) => {
      @action="handleAction($event, locale.code)"
    />
    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
    <PopularContentDialog ref="popularContentDialogRef" :portal="portal" />
  </ul>
 </template>
@@ -1,235 +0,0 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useDebounceFn } from '@vueuse/core';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useAbortableRequest } from 'dashboard/composables/useAbortableRequest';
 import categoriesAPI from 'dashboard/api/helpCenter/categories';
 import articlesAPI from 'dashboard/api/helpCenter/articles';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ReorderableMultiSelect from 'dashboard/components-next/combobox/ReorderableMultiSelect.vue';
 const props = defineProps({
  portal: {
    type: Object,
    default: () => ({}),
  },
 });
 const MAX_CATEGORIES = 3;
 const MAX_ARTICLES = 6;
 const KEY = 'HELP_CENTER.LOCALES_PAGE.POPULAR_CONTENT_DIALOG';
 const { t } = useI18n();
 const store = useStore();
 const dialogRef = ref(null);
 const activeLocale = ref('');
 // One flag per picker so each shows its skeleton until its own data loads.
 const categoriesLoading = ref(false);
 const { run: runArticleRequest, isPending: articlesLoading } =
  useAbortableRequest();
 const categoryOptions = ref([]);
 const selectedCategoryIds = ref([]);
 // Articles are searched server-side, so cache options for selected items that
 // fall outside the current results.
 const articleResults = ref([]);
 const articleOptionById = ref({});
 const selectedArticleIds = ref([]);
 const popularContent = computed(
  () => props.portal?.config?.popular_content || {}
 );
 const articleOptions = computed(() => {
  const options = new Map();
  selectedArticleIds.value.forEach(id => {
    if (articleOptionById.value[id])
      options.set(id, articleOptionById.value[id]);
  });
  articleResults.value.forEach(option => options.set(option.value, option));
  return [...options.values()];
 });
 const toArticleOption = article => ({
  value: article.id,
  label: article.title,
  subtitle: t(`${KEY}.ARTICLES.IN_CATEGORY`, {
    category: article.category?.name || t(`${KEY}.ARTICLES.UNCATEGORIZED`),
  }),
 });
 const fetchCategories = async localeCode => {
  const {
    data: { payload },
  } = await categoriesAPI.get({
    portalSlug: props.portal?.slug,
    locale: localeCode,
  });
  return payload.map(category => ({
    value: category.id,
    label: category.name,
    subtitle: t(`${KEY}.CATEGORIES.ARTICLES_COUNT`, {
      count: category.meta?.articles_count || 0,
    }),
    icon: category.icon,
    iconColor: category.icon_color,
  }));
 };
 const requestArticles = async (query, signal) => {
  const { data } = await articlesAPI.getArticles({
    pageNumber: 1,
    portalSlug: props.portal?.slug,
    locale: activeLocale.value,
    status: 'published',
    query,
    signal,
  });
  articleResults.value = data.payload.map(article => {
    const option = toArticleOption(article);
    articleOptionById.value[article.id] = option;
    return option;
  });
 };
 const searchArticles = (query = '') =>
  runArticleRequest(signal => requestArticles(query, signal));
 const onArticleSearch = useDebounceFn(searchArticles, 300);
 // Resolve options for pre-selected articles that aren't in the current results.
 const cacheSelectedArticleOptions = async () => {
  const unknownIds = selectedArticleIds.value.filter(
    id => !articleOptionById.value[id]
  );
  await Promise.all(
    unknownIds.map(async id => {
      try {
        const { data } = await articlesAPI.getArticle({
          id,
          portalSlug: props.portal?.slug,
        });
        articleOptionById.value[id] = toArticleOption(data.payload);
      } catch {
        // Deleted since it was picked; leave it for the id fallback.
      }
    })
  );
 };
 const loadCategories = async localeCode => {
  categoriesLoading.value = true;
  try {
    const options = await fetchCategories(localeCode);
    // Reopened for another locale mid-flight; drop the stale response.
    if (localeCode !== activeLocale.value) return;
    categoryOptions.value = options;
  } catch (error) {
    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
  } finally {
    if (localeCode === activeLocale.value) categoriesLoading.value = false;
  }
 };
 const loadArticles = async () => {
  try {
    await runArticleRequest(signal =>
      Promise.all([cacheSelectedArticleOptions(), requestArticles('', signal)])
    );
  } catch (error) {
    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
  }
 };
 const openForLocale = localeCode => {
  const existing = popularContent.value[localeCode] || {};
  activeLocale.value = localeCode;
  selectedCategoryIds.value = [...(existing.category_ids || [])];
  selectedArticleIds.value = [...(existing.article_ids || [])];
  categoryOptions.value = [];
  articleResults.value = [];
  articleOptionById.value = {};
  dialogRef.value?.open();
  loadCategories(localeCode);
  loadArticles();
 };
 const onConfirm = async () => {
  const updated = { ...popularContent.value };
  const entry = {
    category_ids: selectedCategoryIds.value,
    article_ids: selectedArticleIds.value,
  };
  if (entry.category_ids.length || entry.article_ids.length) {
    updated[activeLocale.value] = entry;
  } else {
    delete updated[activeLocale.value];
  }
  try {
    await store.dispatch('portals/update', {
      portalSlug: props.portal?.slug,
      config: { popular_content: updated },
    });
    dialogRef.value?.close();
    useAlert(t(`${KEY}.API.SUCCESS_MESSAGE`));
  } catch (error) {
    useAlert(error?.message || t(`${KEY}.API.ERROR_MESSAGE`));
  }
 };
 defineExpose({ openForLocale });
 </script>
 <template>
  <Dialog
    ref="dialogRef"
    type="edit"
    :title="t(`${KEY}.TITLE`)"
    :description="t(`${KEY}.DESCRIPTION`)"
    :confirm-button-label="t(`${KEY}.CONFIRM`)"
    @confirm="onConfirm"
  >
    <div class="flex flex-col gap-5">
      <ReorderableMultiSelect
        v-model="selectedCategoryIds"
        :options="categoryOptions"
        :max="MAX_CATEGORIES"
        :label="t(`${KEY}.CATEGORIES.LABEL`)"
        :add-label="t(`${KEY}.ADD_ANOTHER`)"
        :search-placeholder="t(`${KEY}.SEARCH`)"
        :empty-state="t(`${KEY}.EMPTY`)"
        fallback-icon="i-lucide-folder"
        :loading="categoriesLoading"
      >
        <template #counter="{ remaining }">
          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
        </template>
        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
      </ReorderableMultiSelect>
      <ReorderableMultiSelect
        v-model="selectedArticleIds"
        server-search
        :options="articleOptions"
        :max="MAX_ARTICLES"
        :label="t(`${KEY}.ARTICLES.LABEL`)"
        :add-label="t(`${KEY}.ADD_ANOTHER`)"
        :search-placeholder="t(`${KEY}.SEARCH`)"
        :empty-state="t(`${KEY}.EMPTY`)"
        :loading="articlesLoading"
        @search="onArticleSearch"
      >
        <template #counter="{ remaining }">
          {{ t(`${KEY}.SLOTS_LEFT`, { count: remaining }) }}
        </template>
        <template #note>{{ t(`${KEY}.OVERRIDING_DEFAULTS`) }}</template>
      </ReorderableMultiSelect>
    </div>
  </Dialog>
 </template>
@@ -61,10 +61,10 @@ const triggerAction = () => {
    <div>
      <slot />
    </div>
-    <div class="flex-shrink-0">
+    <div>
      <button
        v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg whitespace-nowrap"
+        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
        :class="buttonClass"
        @click="triggerAction"
      >
@@ -14,7 +14,6 @@ const props = defineProps({
  icon: { type: [String, Object, Function], default: '' },
  trailingIcon: { type: Boolean, default: false },
  isLoading: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
 });
 const emit = defineEmits(['click']);
@@ -62,7 +61,6 @@ const handleClick = () => {
      :icon="icon"
      :trailing-icon="trailingIcon"
      :is-loading="isLoading"
      :disabled="disabled"
      @click="handleClick"
      @blur="resetConfirmMode"
    >
@@ -182,8 +182,7 @@ const handleCreateAssistant = () => {
            </div>
          </div>
-          <div class="flex items-center gap-2">
+          <div class="flex gap-2">
            <slot name="headerActions" />
            <slot name="search" />
            <div
              v-if="!showPaywall && buttonLabel"
@@ -107,7 +107,6 @@ const onClickCancel = () => {
        <TextArea
          v-model="state.description"
          :max-length="500"
          :label="
            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
          "
@@ -66,10 +66,6 @@ const props = defineProps({
    type: Number,
    default: null,
  },
  responsesCount: {
    type: Number,
    default: 0,
  },
  isSelected: {
    type: Boolean,
    default: false,
@@ -116,10 +112,10 @@ const showSyncStatus = computed(() => !isPdf.value);
 const menuItems = computed(() => {
  const allOptions = [
    {
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_DETAILS'),
+      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-      value: 'viewDetails',
+      value: 'viewRelatedQuestions',
-      action: 'viewDetails',
+      action: 'viewRelatedQuestions',
-      icon: 'i-lucide-eye',
+      icon: 'i-ph-tree-view-duotone',
    },
  ];
@@ -147,9 +143,6 @@ const menuItems = computed(() => {
 });
 const createdAtLabel = computed(() => dynamicTime(props.createdAt));
 const responsesCountLabel = computed(() =>
  t('CAPTAIN.DOCUMENTS.FAQ_COUNT', { n: props.responsesCount })
 );
 const displayLink = computed(() =>
  isPdf.value
@@ -165,10 +158,6 @@ const handleAction = ({ action, value }) => {
  emit('action', { action, value, id: props.id });
 };
 const handleViewDetails = () => {
  emit('action', { action: 'viewDetails', id: props.id });
 };
 const handleRetry = () => {
  emit('action', { action: 'sync', id: props.id });
 };
@@ -188,13 +177,9 @@ const handleRetry = () => {
      <Checkbox v-model="modelValue" />
    </div>
    <div class="flex gap-1 justify-between w-full">
-      <button
+      <span class="text-base text-n-slate-12 line-clamp-1">
        type="button"
        class="p-0 text-base text-left bg-transparent border-0 outline-transparent text-n-slate-12 line-clamp-1 underline-offset-2 hover:underline focus-visible:underline"
        @click="handleViewDetails"
      >
        {{ name }}
-      </button>
+      </span>
      <div v-if="showMenu" class="flex gap-2 items-center">
        <div
          v-on-clickaway="() => toggleDropdown(false)"
@@ -243,9 +228,6 @@ const handleRetry = () => {
        <Icon :icon="linkIcon" class="shrink-0" />
        <span class="truncate">{{ displayLink }}</span>
      </span>
      <span class="text-sm shrink-0 text-n-slate-11">
        {{ responsesCountLabel }}
      </span>
      <DocumentSyncStatus
        v-if="showSyncStatus"
        :status="syncStatus"
@@ -213,7 +213,6 @@ const renderInstruction = instruction => () =>
      <TextArea
        v-model="state.description"
        :max-length="500"
        :label="
          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
        "
@@ -122,7 +122,6 @@ watch(
    <Editor
      v-model="state.description"
      :max-length="500"
      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
      :message="formErrors.description"
@@ -117,7 +117,6 @@ watch(
    <Editor
      v-model="state.description"
      :max-length="500"
      :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
      :message="formErrors.description"
@@ -29,6 +29,7 @@ const initialState = {
  handoffMessage: '',
  resolutionMessage: '',
  instructions: '',
  temperature: 1,
 };
 const state = reactive({ ...initialState });
@@ -56,6 +57,7 @@ const updateStateFromAssistant = assistant => {
  state.handoffMessage = config.handoff_message;
  state.resolutionMessage = config.resolution_message;
  state.instructions = config.instructions;
  state.temperature = config.temperature || 1;
 };
 const handleSystemMessagesUpdate = async () => {
@@ -78,6 +80,7 @@ const handleSystemMessagesUpdate = async () => {
      ...props.assistant.config,
      handoff_message: state.handoffMessage,
      resolution_message: state.resolutionMessage,
      temperature: state.temperature || 1,
    },
  };
@@ -128,6 +131,26 @@ watch(
      class="z-0"
    />
    <div class="flex flex-col gap-2">
      <label class="text-sm font-medium text-n-slate-12">
        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
      </label>
      <div class="flex items-center gap-4">
        <input
          v-model="state.temperature"
          type="range"
          min="0"
          max="1"
          step="0.1"
          class="w-full"
        />
        <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
      </div>
      <p class="text-sm text-n-slate-11 italic">
        {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
      </p>
    </div>
    <div>
      <Button
        :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
@@ -1,86 +0,0 @@
 import { flushPromises, shallowMount } from '@vue/test-utils';
 import DocumentDetails from './DocumentDetails.vue';
 const { dispatch, getterValues } = vi.hoisted(() => ({
  dispatch: vi.fn(),
  getterValues: {
    'captainResponses/getUIFlags': { value: { fetchingList: false } },
    'captainResponses/getRecords': { value: [] },
    'captainResponses/getMeta': { value: { totalCount: 26, page: 1 } },
  },
 }));
 vi.mock('dashboard/composables/store', () => ({
  useStore: () => ({ dispatch }),
  useMapGetter: key => getterValues[key],
 }));
 vi.mock('dashboard/composables', () => ({ useAlert: vi.fn() }));
 vi.mock('vue-i18n', () => ({
  useI18n: () => ({ t: key => key }),
 }));
 const captainDocument = {
  id: 42,
  name: 'FAQ source',
  external_link: 'https://example.com/docs',
  assistant: { id: 7 },
  content: 'Document content',
  pdf_document: false,
 };
 const DialogStub = {
  name: 'Dialog',
  template: '<div><slot /></div>',
 };
 const TabBarStub = {
  name: 'TabBar',
  template:
    '<button data-test="faq-tab" @click="$emit(\'tabChanged\', { key: \'faqs\' })" />',
 };
 const PaginationFooterStub = {
  name: 'PaginationFooter',
  template:
    '<button data-test="next-page" @click="$emit(\'update:currentPage\', 2)" />',
 };
 describe('DocumentDetails', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    dispatch.mockResolvedValue([]);
  });
  it('requests another FAQ page when the document has more than 25 FAQs', async () => {
    const wrapper = shallowMount(DocumentDetails, {
      props: { captainDocument },
      global: {
        directives: { dompurifyHtml: {} },
        stubs: {
          Dialog: DialogStub,
          TabBar: TabBarStub,
          PaginationFooter: PaginationFooterStub,
        },
      },
    });
    await flushPromises();
    expect(dispatch).toHaveBeenCalledWith('captainResponses/get', {
      page: 1,
      assistantId: 7,
      documentId: 42,
    });
    await wrapper.get('[data-test="faq-tab"]').trigger('click');
    await wrapper.get('[data-test="next-page"]').trigger('click');
    expect(dispatch).toHaveBeenLastCalledWith('captainResponses/get', {
      page: 2,
      assistantId: 7,
      documentId: 42,
    });
  });
 });
@@ -1,374 +0,0 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import MessageFormatter from 'shared/helpers/MessageFormatter';
 import {
  isSafeHttpLink,
  formatDocumentLink,
  getDocumentDisplayPath,
 } from 'shared/helpers/documentHelper';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import ResponseCard from '../../assistant/ResponseCard.vue';
 const props = defineProps({
  captainDocument: {
    type: Object,
    required: true,
  },
 });
 const emit = defineEmits(['close']);
 const TAB_KEYS = {
  CONTENT: 'content',
  FAQS: 'faqs',
 };
 const RESPONSES_PER_PAGE = 25;
 const { t } = useI18n();
 const store = useStore();
 const dialogRef = ref(null);
 const documentDetails = computed(() => props.captainDocument);
 const showRawContent = ref(false);
 const activeTabIndex = ref(0);
 const uiFlags = useMapGetter('captainResponses/getUIFlags');
 const responses = useMapGetter('captainResponses/getRecords');
 const meta = useMapGetter('captainResponses/getMeta');
 const isFetching = computed(() => uiFlags.value.fetchingList);
 const totalCount = computed(() => meta.value.totalCount || 0);
 const currentPage = computed(() => meta.value.page || 1);
 const showPaginationFooter = computed(
  () => totalCount.value > RESPONSES_PER_PAGE
 );
 const documentContent = computed(() => documentDetails.value?.content?.trim());
 const documentContentLength = computed(
  () => documentContent.value?.length || 0
 );
 const isPdf = computed(() => documentDetails.value?.pdf_document);
 const displayUrl = computed(() => documentDetails.value?.display_url);
 const externalLink = computed(() => documentDetails.value?.external_link);
 const sourceHref = computed(() => displayUrl.value || externalLink.value);
 const hasSafeLink = computed(() => isSafeHttpLink(sourceHref.value));
 const displayLink = computed(() => {
  if (isPdf.value) return formatDocumentLink(externalLink.value);
  return getDocumentDisplayPath(displayUrl.value || externalLink.value);
 });
 const contentTabLabel = computed(() =>
  isPdf.value
    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TAB')
    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TAB')
 );
 const tabs = computed(() => [
  { key: TAB_KEYS.CONTENT, label: contentTabLabel.value },
  {
    key: TAB_KEYS.FAQS,
    label: t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE'),
    count: totalCount.value,
  },
 ]);
 const activeTabKey = computed(() => tabs.value[activeTabIndex.value]?.key);
 const isUnreadableContent = computed(() => {
  if (!documentContent.value) return false;
  const content = documentContent.value;
  const sample = content.slice(0, 2000);
  const characters = Array.from(sample);
  const nonPrintableCharacters = characters.filter(character => {
    const charCode = character.charCodeAt(0);
    return (
      (charCode <= 31 && ![9, 10, 13].includes(charCode)) ||
      (charCode >= 127 && charCode <= 159)
    );
  });
  const nonPrintableRatio =
    nonPrintableCharacters.length / Math.max(characters.length, 1);
  const replacementCharacterRatio =
    characters.filter(character => character === '\uFFFD').length /
    Math.max(characters.length, 1);
  const hasPdfObjectMarkers =
    content.includes(' obj') &&
    content.includes(' endobj') &&
    content.includes(' stream');
  return (
    content.startsWith('%PDF') ||
    hasPdfObjectMarkers ||
    nonPrintableRatio > 0.02 ||
    replacementCharacterRatio > 0.05
  );
 });
 const formattedDocumentContent = computed(() => {
  if (!documentContent.value || isUnreadableContent.value) return '';
  const formatter = new MessageFormatter(documentContent.value);
  formatter.disableImageRendering();
  return formatter.formattedMessage;
 });
 const updatedAtLabel = computed(() => {
  if (!documentDetails.value?.updated_at) return null;
  return messageTimestamp(
    documentDetails.value.updated_at,
    'MMM d, yyyy h:mm a'
  );
 });
 const syncedAtLabel = computed(() => {
  if (!documentDetails.value?.last_synced_at) return null;
  return messageTimestamp(
    documentDetails.value.last_synced_at,
    'MMM d, yyyy h:mm a'
  );
 });
 const handleClose = () => {
  emit('close');
 };
 const handleCopyContent = async () => {
  try {
    await copyTextToClipboard(documentContent.value);
    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_SUCCESS'));
  } catch {
    useAlert(t('CAPTAIN.DOCUMENTS.DETAILS.COPY_ERROR'));
  }
 };
 const handleTabChanged = tab => {
  activeTabIndex.value = tabs.value.findIndex(item => item.key === tab.key);
 };
 const fetchResponses = (page = 1) => {
  return store.dispatch('captainResponses/get', {
    page,
    assistantId: props.captainDocument.assistant.id,
    documentId: props.captainDocument.id,
  });
 };
 const handlePageChange = page => {
  fetchResponses(page);
 };
 onMounted(() => {
  fetchResponses();
 });
 defineExpose({ dialogRef });
 </script>
 <template>
  <Dialog
    ref="dialogRef"
    type="edit"
    :title="documentDetails.name || documentDetails.external_link"
    :description="t('CAPTAIN.DOCUMENTS.DETAILS.DESCRIPTION')"
    :show-cancel-button="false"
    :show-confirm-button="false"
    overflow-y-auto
    width="3xl"
    @close="handleClose"
  >
    <div
      v-if="isFetching"
      class="flex items-center justify-center py-10 text-n-slate-11"
    >
      <Spinner />
    </div>
    <div v-else class="flex flex-col gap-6 min-h-48">
      <section class="flex flex-col gap-3">
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
          <div class="flex flex-col gap-1">
            <span class="text-xs font-medium uppercase text-n-slate-10">
              {{ t('CAPTAIN.DOCUMENTS.DETAILS.SOURCE') }}
            </span>
            <a
              v-if="hasSafeLink"
              :href="sourceHref"
              :title="sourceHref"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center min-w-0 gap-1 text-sm text-n-slate-12 hover:underline"
            >
              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
              <span class="truncate">{{ displayLink }}</span>
            </a>
            <span v-else class="text-sm truncate text-n-slate-12">
              {{ displayLink }}
            </span>
          </div>
          <div class="flex flex-col gap-1">
            <span class="text-xs font-medium uppercase text-n-slate-10">
              {{ t('CAPTAIN.DOCUMENTS.DETAILS.GENERATED_FAQS') }}
            </span>
            <span class="text-sm text-n-slate-12">
              {{ totalCount }}
            </span>
          </div>
          <div class="flex flex-col gap-1">
            <span class="text-xs font-medium uppercase text-n-slate-10">
              {{ t('CAPTAIN.DOCUMENTS.DETAILS.LAST_UPDATED') }}
            </span>
            <span class="text-sm text-n-slate-12">
              {{
                syncedAtLabel ||
                updatedAtLabel ||
                t('CAPTAIN.DOCUMENTS.DETAILS.NOT_AVAILABLE')
              }}
            </span>
          </div>
        </div>
      </section>
      <TabBar
        :tabs="tabs"
        :initial-active-tab="activeTabIndex"
        @tab-changed="handleTabChanged"
      />
      <div class="h-[32rem] overflow-y-auto">
        <section
          v-if="activeTabKey === TAB_KEYS.CONTENT"
          class="flex flex-col gap-3"
        >
          <div class="flex flex-wrap items-start justify-between gap-3">
            <div class="flex flex-col gap-1">
              <h4 class="text-sm font-medium text-n-slate-12">
                {{
                  isPdf
                    ? t('CAPTAIN.DOCUMENTS.DETAILS.PDF_TITLE')
                    : t('CAPTAIN.DOCUMENTS.DETAILS.CONTENT_TITLE')
                }}
              </h4>
              <span
                v-if="documentContent && !isPdf"
                class="text-xs text-n-slate-10"
              >
                {{
                  t('CAPTAIN.DOCUMENTS.DETAILS.CHARACTER_COUNT', {
                    count: documentContentLength.toLocaleString(),
                  })
                }}
              </span>
            </div>
            <div
              v-if="documentContent && !isPdf"
              class="flex flex-wrap items-center justify-end gap-4"
            >
              <Button
                :label="
                  showRawContent
                    ? t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_PREVIEW')
                    : t('CAPTAIN.DOCUMENTS.DETAILS.VIEW_RAW')
                "
                sm
                slate
                link
                @click="showRawContent = !showRawContent"
              />
              <Button
                :label="t('CAPTAIN.DOCUMENTS.DETAILS.COPY_CONTENT')"
                icon="i-lucide-copy"
                sm
                slate
                link
                @click="handleCopyContent"
              />
            </div>
          </div>
          <div
            v-if="isPdf"
            class="rounded-lg border border-n-weak bg-n-alpha-1 p-4 text-sm text-n-slate-11"
          >
            <p class="mb-3">
              {{ t('CAPTAIN.DOCUMENTS.DETAILS.PDF_DESCRIPTION') }}
            </p>
            <a
              v-if="hasSafeLink"
              :href="sourceHref"
              :title="sourceHref"
              target="_blank"
              rel="noopener noreferrer"
              class="inline-flex items-center gap-1 font-medium text-n-blue-11 hover:underline"
            >
              <Icon icon="i-ph-file-pdf" class="size-4" />
              {{ displayLink }}
              <Icon icon="i-lucide-external-link" class="size-3" />
            </a>
            <span v-else class="inline-flex items-center gap-1 text-n-slate-12">
              <Icon icon="i-ph-file-pdf" class="size-4" />
              {{ displayLink }}
            </span>
          </div>
          <template v-else-if="documentContent">
            <div
              v-if="isUnreadableContent && !showRawContent"
              class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
            >
              {{ t('CAPTAIN.DOCUMENTS.DETAILS.UNREADABLE_CONTENT') }}
            </div>
            <div
              v-else
              class="h-[26rem] overflow-y-auto rounded-lg border border-n-weak bg-n-alpha-1 p-4"
            >
              <pre
                v-if="showRawContent || isUnreadableContent"
                class="m-0 whitespace-pre-wrap break-words text-xs leading-5 text-n-slate-12"
              ><code>{{ documentContent }}</code></pre>
              <div
                v-else
                v-dompurify-html="formattedDocumentContent"
                class="prose prose-sm max-w-none break-words text-n-slate-12 prose-p:my-2 prose-headings:mb-2 prose-headings:mt-4 prose-a:text-n-blue-11 prose-ul:my-2 prose-ol:my-2 prose-li:my-1 prose-img:hidden"
              />
            </div>
          </template>
          <div
            v-else
            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
          >
            {{ t('CAPTAIN.DOCUMENTS.DETAILS.EMPTY_CONTENT') }}
          </div>
        </section>
        <section
          v-if="activeTabKey === TAB_KEYS.FAQS"
          class="flex flex-col gap-3"
        >
          <div v-if="responses.length" class="flex flex-col gap-3">
            <ResponseCard
              v-for="response in responses"
              :id="response.id"
              :key="response.id"
              :question="response.question"
              :status="response.status"
              :answer="response.answer"
              :assistant="response.assistant"
              :created-at="response.created_at"
              :updated-at="response.updated_at"
              compact
            />
          </div>
          <div
            v-else
            class="rounded-lg border border-dashed border-n-weak p-4 text-sm text-n-slate-11"
          >
            {{ t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.EMPTY') }}
          </div>
          <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
            <PaginationFooter
              :current-page="currentPage"
              :total-items="totalCount"
              :items-per-page="RESPONSES_PER_PAGE"
              class="!px-0"
              @update:current-page="handlePageChange"
            />
          </footer>
        </section>
      </div>
    </div>
  </Dialog>
 </template>
@@ -0,0 +1,71 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ResponseCard from '../../assistant/ResponseCard.vue';
 const props = defineProps({
  captainDocument: {
    type: Object,
    required: true,
  },
 });
 const emit = defineEmits(['close']);
 const { t } = useI18n();
 const store = useStore();
 const dialogRef = ref(null);
 const uiFlags = useMapGetter('captainResponses/getUIFlags');
 const responses = useMapGetter('captainResponses/getRecords');
 const meta = useMapGetter('captainResponses/getMeta');
 const isFetching = computed(() => uiFlags.value.fetchingList);
 const totalCount = computed(() => meta.value.totalCount || 0);
 const handleClose = () => {
  emit('close');
 };
 onMounted(() => {
  store.dispatch('captainResponses/get', {
    assistantId: props.captainDocument.assistant.id,
    documentId: props.captainDocument.id,
  });
 });
 defineExpose({ dialogRef });
 </script>
 <template>
  <Dialog
    ref="dialogRef"
    type="edit"
    :title="`${t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')} (${totalCount})`"
    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
    :show-cancel-button="false"
    :show-confirm-button="false"
    overflow-y-auto
    width="3xl"
    @close="handleClose"
  >
    <div
      v-if="isFetching"
      class="flex items-center justify-center py-10 text-n-slate-11"
    >
      <Spinner />
    </div>
    <div v-else class="flex flex-col gap-3 min-h-48">
      <ResponseCard
        v-for="response in responses"
        :id="response.id"
        :key="response.id"
        :question="response.question"
        :status="response.status"
        :answer="response.answer"
        :assistant="response.assistant"
        :created-at="response.created_at"
        :updated-at="response.updated_at"
        compact
      />
    </div>
  </Dialog>
 </template>
@@ -1,234 +0,0 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 import { useEventListener } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import CaptainAssistant from 'dashboard/api/captain/assistant';
 import { useReportDrilldown } from 'dashboard/routes/dashboard/settings/reports/composables/useReportDrilldown';
 import ReportDrilldownCard from 'dashboard/routes/dashboard/settings/reports/components/ReportDrilldownCard.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 const props = defineProps({
  open: { type: Boolean, default: false },
  assistantId: { type: [String, Number], default: null },
  metric: { type: String, default: '' },
  metricName: { type: String, default: '' },
  metricValue: { type: String, default: '' },
  range: { type: String, default: '' },
 });
 const emit = defineEmits(['close']);
 const { t } = useI18n();
 const drawerRef = ref(null);
 const {
  records,
  meta,
  isFetching,
  isFetchingMore,
  hasError,
  hasRecords,
  hasMore,
  open: openDrilldown,
  close,
  loadMore,
 } = useReportDrilldown(params => CaptainAssistant.getDrilldown(params));
 let previousActiveElement = null;
 const isOpen = computed(() => props.open);
 const title = computed(() => props.metricName || '');
 const subtitle = computed(() => {
  if (!meta.value.conversation_count) return '';
  return t('CAPTAIN.OVERVIEW.DRILLDOWN.RESULT_COUNT_CONVERSATION', {
    count: meta.value.conversation_count,
  });
 });
 const recordKey = record => `${record.conversation?.id}-${record.occurred_at}`;
 const restoreFocus = () => {
  if (previousActiveElement?.isConnected) {
    previousActiveElement.focus();
  }
  previousActiveElement = null;
 };
 const closeDrawer = () => {
  close();
  emit('close');
  restoreFocus();
 };
 const rememberActiveElement = () => {
  if (previousActiveElement) return;
  previousActiveElement =
    document.activeElement instanceof HTMLElement
      ? document.activeElement
      : null;
 };
 const focusDrawer = () => {
  nextTick(() => drawerRef.value?.focus());
 };
 const fetchDrilldown = () => {
  if (!props.metric || !props.assistantId) return;
  openDrilldown({
    assistantId: props.assistantId,
    metric: props.metric,
    range: props.range,
  });
 };
 const onKeydown = event => {
  if (!isOpen.value) return;
  if (event.key === 'Escape') {
    event.preventDefault();
    event.stopPropagation();
    closeDrawer();
  }
 };
 useEventListener(document, 'keydown', onKeydown);
 watch(
  () => props.open,
  isDrawerOpen => {
    if (!isDrawerOpen) {
      close();
      restoreFocus();
      return;
    }
    rememberActiveElement();
    fetchDrilldown();
    focusDrawer();
  },
  { immediate: true }
 );
 watch(
  () => [props.metric, props.range],
  () => {
    if (props.open) fetchDrilldown();
  }
 );
 // The drawer's headline value is a snapshot of the previous assistant's card,
 // so switching assistants (e.g. browser Back/Forward) closes it instead of
 // refetching records that would no longer match the header.
 watch(
  () => props.assistantId,
  () => {
    if (props.open) closeDrawer();
  }
 );
 onBeforeUnmount(() => {
  restoreFocus();
 });
 </script>
 <template>
  <TeleportWithDirection to="body">
    <Transition name="report-drilldown-fade">
      <div
        v-if="isOpen"
        class="fixed inset-0 z-50 bg-black/30"
        role="presentation"
        @click.self="closeDrawer"
      >
        <aside
          ref="drawerRef"
          class="fixed inset-y-0 end-0 flex w-full max-w-xl flex-col bg-n-solid-1 shadow-xl outline outline-1 outline-n-container"
          role="dialog"
          aria-modal="true"
          :aria-label="title"
          tabindex="-1"
        >
          <header
            class="flex items-start justify-between gap-4 border-b border-n-weak px-6 py-5"
          >
            <div class="min-w-0">
              <h2 class="truncate text-base font-medium text-n-slate-12">
                {{ title }}
              </h2>
              <p
                v-if="metricValue"
                class="mt-1 text-xl font-semibold text-n-slate-12"
              >
                {{ metricValue }}
              </p>
              <div
                class="text-sm text-n-slate-11"
                :class="{
                  'mt-2': metricValue,
                  'mt-1': !metricValue,
                }"
              >
                {{ subtitle }}
              </div>
            </div>
            <Button
              ghost
              slate
              size="sm"
              icon="i-ph-x"
              :aria-label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.CLOSE')"
              @click="closeDrawer"
            />
          </header>
          <div class="min-h-0 flex-1 overflow-y-auto px-5 py-3">
            <div
              v-if="isFetching"
              class="flex h-40 items-center justify-center"
            >
              <Spinner />
            </div>
            <div
              v-else-if="hasError"
              class="flex h-40 items-center justify-center text-sm text-n-ruby-11"
            >
              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.ERROR') }}
            </div>
            <div
              v-else-if="!hasRecords"
              class="flex h-40 items-center justify-center text-sm text-n-slate-10"
            >
              {{ $t('CAPTAIN.OVERVIEW.DRILLDOWN.EMPTY') }}
            </div>
            <div v-else class="flex flex-col gap-2">
              <ReportDrilldownCard
                v-for="record in records"
                :key="recordKey(record)"
                :record="record"
              />
              <Button
                v-if="hasMore"
                faded
                slate
                size="sm"
                class="mx-auto mt-2"
                :label="$t('CAPTAIN.OVERVIEW.DRILLDOWN.LOAD_MORE')"
                :is-loading="isFetchingMore"
                @click="loadMore"
              />
            </div>
          </div>
        </aside>
      </div>
    </Transition>
  </TeleportWithDirection>
 </template>
@@ -1,96 +0,0 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { LocalStorage } from 'shared/helpers/localStorage';
 const props = defineProps({
  knowledge: {
    type: Object,
    default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
  },
 });
 const route = useRoute();
 const router = useRouter();
 // Dismissal is remembered per assistant for 24 hours (setFlag's default expiry).
 const DISMISS_STORE = 'captain_overview_coverage_banner';
 const accountId = computed(() => route.params.accountId);
 const assistantId = computed(() => route.params.assistantId);
 // Re-read the stored flag whenever the assistant changes, otherwise the banner
 // would keep the first assistant's dismissed state after switching.
 const dismissed = ref(false);
 watch(
  [accountId, assistantId],
  ([account, assistant]) => {
    dismissed.value = LocalStorage.getFlag(DISMISS_STORE, account, assistant);
  },
  { immediate: true }
 );
 // Thin coverage paired with a large review backlog: approving the pending FAQs
 // is the quickest lever to lift auto-resolution, so nudge the team to act.
 const COVERAGE_THRESHOLD = 85;
 const PENDING_THRESHOLD = 100;
 const showBanner = computed(
  () =>
    !dismissed.value &&
    (props.knowledge?.coverage ?? 0) < COVERAGE_THRESHOLD &&
    (props.knowledge?.pending ?? 0) > PENDING_THRESHOLD
 );
 const dismiss = () => {
  LocalStorage.setFlag(DISMISS_STORE, accountId.value, assistantId.value);
  dismissed.value = true;
 };
 const goToPending = () => {
  router.push({
    name: 'captain_assistants_responses_pending',
    params: {
      accountId: route.params.accountId,
      assistantId: route.params.assistantId,
    },
  });
 };
 </script>
 <template>
  <div
    v-if="showBanner"
    class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
  >
    <div class="flex items-center gap-2 min-w-0">
      <span class="shrink-0 i-lucide-triangle-alert size-4" />
      <span class="truncate">
        {{
          $t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.TEXT', {
            count: knowledge.pending,
            coverage: knowledge.coverage,
          })
        }}
      </span>
    </div>
    <div class="flex items-center gap-1 shrink-0">
      <button
        type="button"
        class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
        @click="goToPending"
      >
        {{ $t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.ACTION') }}
      </button>
      <button
        type="button"
        class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
        :aria-label="$t('CAPTAIN.OVERVIEW.COVERAGE_BANNER.DISMISS')"
        @click="dismiss"
      >
        <span class="i-lucide-x size-4" />
      </button>
    </div>
  </div>
 </template>
@@ -1,73 +0,0 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 const route = useRoute();
 const router = useRouter();
 const store = useStore();
 const dismissed = ref(false);
 const assistantId = computed(() => route.params.assistantId);
 const inboxes = useMapGetter('captainInboxes/getRecords');
 const uiFlags = useMapGetter('captainInboxes/getUIFlags');
 // Only surface once we know the assistant has no connected inboxes.
 const showBanner = computed(
  () =>
    !dismissed.value &&
    !uiFlags.value.fetchingList &&
    inboxes.value.length === 0
 );
 watch(
  assistantId,
  id => {
    dismissed.value = false;
    if (id) store.dispatch('captainInboxes/get', { assistantId: id });
  },
  { immediate: true }
 );
 const goToInboxes = () => {
  router.push({
    name: 'captain_assistants_inboxes_index',
    params: {
      accountId: route.params.accountId,
      assistantId: assistantId.value,
    },
  });
 };
 </script>
 <template>
  <div
    v-if="showBanner"
    class="flex items-center justify-between gap-3 px-3 py-2 text-sm border rounded-xl bg-n-amber-3 border-n-amber-4 text-n-amber-11"
  >
    <div class="flex items-center gap-2 min-w-0">
      <span class="shrink-0 i-lucide-triangle-alert size-4" />
      <span class="truncate">
        {{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.TEXT') }}
      </span>
    </div>
    <div class="flex items-center gap-1 shrink-0">
      <button
        type="button"
        class="px-3 py-1 rounded-lg bg-n-amber-4 hover:bg-n-amber-5"
        @click="goToInboxes"
      >
        {{ $t('CAPTAIN.OVERVIEW.INBOX_BANNER.ACTION') }}
      </button>
      <button
        type="button"
        class="grid rounded-lg size-7 place-content-center hover:bg-n-amber-4"
        :aria-label="$t('CAPTAIN.OVERVIEW.INBOX_BANNER.DISMISS')"
        @click="dismissed = true"
      >
        <span class="i-lucide-x size-4" />
      </button>
    </div>
  </div>
 </template>
@@ -1,87 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 const props = defineProps({
  knowledge: {
    type: Object,
    default: () => ({ approved: 0, pending: 0, documents: 0, coverage: 0 }),
  },
 });
 const { t } = useI18n();
 const route = useRoute();
 const approvedPct = computed(() => props.knowledge.coverage ?? 0);
 const linkTo = routeName => ({
  name: routeName,
  params: {
    accountId: route.params.accountId,
    assistantId: route.params.assistantId,
  },
 });
 const stats = computed(() => [
  {
    key: 'approved',
    value: props.knowledge.approved,
    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.APPROVED'),
    to: linkTo('captain_assistants_responses_index'),
  },
  {
    key: 'pending',
    value: props.knowledge.pending,
    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.PENDING'),
    to: linkTo('captain_assistants_responses_pending'),
  },
  {
    key: 'documents',
    value: props.knowledge.documents,
    label: t('CAPTAIN.OVERVIEW.KNOWLEDGE.DOCUMENTS'),
    to: linkTo('captain_assistants_documents_index'),
  },
 ]);
 </script>
 <template>
  <div
    class="flex flex-col gap-4 p-5 border rounded-xl bg-n-solid-1 border-n-weak"
  >
    <div class="flex items-center justify-between">
      <span class="text-sm font-medium text-n-slate-12">
        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.TITLE') }}
      </span>
      <span class="text-sm tabular-nums text-n-slate-11">
        {{ $t('CAPTAIN.OVERVIEW.KNOWLEDGE.COVERAGE', { pct: approvedPct }) }}
      </span>
    </div>
    <div class="w-full h-2 overflow-hidden rounded-full bg-n-alpha-2">
      <div
        class="h-full rounded-full bg-n-brand"
        :style="{ width: `${approvedPct}%` }"
      />
    </div>
    <div class="grid grid-cols-3 gap-3">
      <RouterLink
        v-for="stat in stats"
        :key="stat.key"
        :to="stat.to"
        class="flex flex-col gap-1 group/stat"
      >
        <span class="text-xl font-semibold tabular-nums text-n-slate-12">
          {{ stat.value }}
        </span>
        <span
          class="inline-flex items-center gap-1 text-xs transition-colors text-n-slate-11 group-hover/stat:text-n-slate-12"
        >
          {{ stat.label }}
          <span
            class="transition-opacity opacity-0 i-lucide-arrow-up-right size-3 group-hover/stat:opacity-100"
          />
        </span>
      </RouterLink>
    </div>
  </div>
 </template>
@@ -1,59 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 const props = defineProps({
  label: { type: String, required: true },
  value: { type: String, required: true },
  trend: { type: String, default: '' },
  hint: { type: String, default: '' },
  // null = neutral, true = good direction, false = bad direction
  trendGood: { type: Boolean, default: null },
  clickable: { type: Boolean, default: false },
 });
 const emit = defineEmits(['click']);
 const trendClass = computed(() => {
  if (props.trendGood === null) return 'text-n-slate-11';
  return props.trendGood ? 'text-n-teal-11' : 'text-n-ruby-11';
 });
 const onActivate = () => {
  if (props.clickable) emit('click');
 };
 </script>
 <template>
  <div
    class="flex flex-col gap-3 p-5 group bg-n-solid-1"
    :class="
      clickable
        ? 'cursor-pointer transition-colors hover:bg-n-slate-2/50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-n-brand'
        : ''
    "
    :role="clickable ? 'button' : undefined"
    :tabindex="clickable ? 0 : undefined"
    @click="onActivate"
    @keydown.enter.self.prevent="onActivate"
    @keydown.space.self.prevent="onActivate"
  >
    <div class="flex items-center gap-1.5">
      <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
      <span
        v-if="hint"
        v-tooltip="hint"
        class="transition-opacity opacity-0 cursor-help i-lucide-info size-3.5 text-n-slate-10 group-hover:opacity-100"
      />
    </div>
    <div class="flex items-end justify-between gap-2">
      <span
        class="text-3xl font-semibold tracking-tight tabular-nums text-n-slate-12"
      >
        {{ value }}
      </span>
      <span class="text-sm font-medium tabular-nums" :class="trendClass">
        {{ trend }}
      </span>
    </div>
  </div>
 </template>
@@ -1,81 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useRoute, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { getHelpUrlForFeature } from 'dashboard/helper/featureHelper';
 const { t } = useI18n();
 const route = useRoute();
 const { isOnChatwootCloud } = useAccount();
 const assistantParams = computed(() => ({
  accountId: route.params.accountId,
  assistantId: route.params.assistantId,
 }));
 const links = computed(() => [
  {
    key: 'docs',
    title: t('CAPTAIN.OVERVIEW.LINKS.DOCS.TITLE'),
    description: t('CAPTAIN.OVERVIEW.LINKS.DOCS.DESCRIPTION'),
    icon: 'i-lucide-book-open',
    href: getHelpUrlForFeature('captain'),
  },
  {
    key: 'playground',
    title: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.TITLE'),
    description: t('CAPTAIN.OVERVIEW.LINKS.PLAYGROUND.DESCRIPTION'),
    icon: 'i-lucide-flask-conical',
    to: {
      name: 'captain_assistants_playground_index',
      params: assistantParams.value,
    },
  },
  {
    key: 'billing',
    title: t('CAPTAIN.OVERVIEW.LINKS.BILLING.TITLE'),
    description: t('CAPTAIN.OVERVIEW.LINKS.BILLING.DESCRIPTION'),
    icon: 'i-lucide-credit-card',
    to: {
      name: 'billing_settings_index',
      params: { accountId: route.params.accountId },
    },
  },
 ]);
 </script>
 <template>
  <div v-if="isOnChatwootCloud" class="grid grid-cols-1 gap-4 sm:grid-cols-3">
    <component
      :is="link.href ? 'a' : RouterLink"
      v-for="link in links"
      :key="link.key"
      :href="link.href"
      :to="link.to"
      :target="link.href ? '_blank' : undefined"
      :rel="link.href ? 'noopener noreferrer' : undefined"
      class="flex items-center gap-3 p-4 transition-colors border rounded-xl bg-n-solid-1 border-n-weak hover:bg-n-alpha-1 group/link"
    >
      <span
        class="grid rounded-lg size-9 shrink-0 place-content-center bg-n-alpha-2 text-n-slate-11"
      >
        <span :class="link.icon" class="size-4" />
      </span>
      <div class="flex flex-col min-w-0">
        <span class="text-sm font-medium text-n-slate-12">
          {{ link.title }}
        </span>
        <span class="text-xs truncate text-n-slate-11">
          {{ link.description }}
        </span>
      </div>
      <span
        :class="
          link.href ? 'i-lucide-arrow-up-right' : 'i-lucide-chevron-right'
        "
        class="ml-auto transition-opacity opacity-0 size-4 text-n-slate-10 group-hover/link:opacity-100"
      />
    </component>
  </div>
 </template>
@@ -1,78 +0,0 @@
 <script setup>
 import { computed } from 'vue';
 import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { vOnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 const modelValue = defineModel({ type: String, default: '30' });
 const { t } = useI18n();
 const [showDropdown, toggleDropdown] = useToggle();
 const DAY_RANGES = ['7', '30', '90'];
 const decorate = item => ({
  ...item,
  action: 'select',
  isSelected: item.value === modelValue.value,
 });
 const menuSections = computed(() => {
  const dayItems = DAY_RANGES.map(value =>
    decorate({
      value,
      label: t('CAPTAIN.OVERVIEW.RANGES.LAST_DAYS', { count: value }),
    })
  );
  const monthItems = [
    decorate({
      value: 'this_month',
      label: t('CAPTAIN.OVERVIEW.RANGES.THIS_MONTH'),
    }),
    decorate({
      value: 'last_month',
      label: t('CAPTAIN.OVERVIEW.RANGES.LAST_MONTH'),
    }),
  ];
  return [{ items: dayItems }, { items: monthItems }];
 });
 const menuItems = computed(() =>
  menuSections.value.flatMap(section => section.items)
 );
 const selectedLabel = computed(
  () => menuItems.value.find(item => item.isSelected)?.label || ''
 );
 const handleAction = ({ value }) => {
  toggleDropdown(false);
  modelValue.value = value;
 };
 </script>
 <template>
  <div
    v-on-click-outside="() => toggleDropdown(false)"
    class="relative flex items-center group"
  >
    <Button
      sm
      slate
      faded
      trailing-icon
      icon="i-lucide-chevron-down"
      :label="selectedLabel"
      class="rounded-md group-hover:bg-n-alpha-2"
      @click="toggleDropdown()"
    />
    <DropdownMenu
      v-if="showDropdown"
      :menu-sections="menuSections"
      class="mt-1 ltr:right-0 rtl:left-0 top-full"
      @action="handleAction($event)"
    />
  </div>
 </template>
@@ -1,75 +0,0 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import CaptainAssistant from 'dashboard/api/captain/assistant';
 import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 const props = defineProps({
  range: {
    type: String,
    default: '30',
  },
 });
 const route = useRoute();
 const assistantId = computed(() => route.params.assistantId);
 // Markdown summary generated by the model from the assistant's stats (served by
 // the captain/assistants/:id/summary endpoint). Numbers are emphasised with
 // **bold** so we can highlight them (see prose-strong styling below).
 const welcomeMarkdown = ref('');
 const isLoading = ref(false);
 const fetchSummary = async () => {
  isLoading.value = true;
  try {
    const { data } = await CaptainAssistant.getSummary({
      assistantId: assistantId.value,
      range: props.range,
    });
    welcomeMarkdown.value = data.message ?? '';
  } catch {
    welcomeMarkdown.value = '';
  } finally {
    isLoading.value = false;
  }
 };
 watch([() => props.range, assistantId], fetchSummary, { immediate: true });
 // Render through the shared markdown formatter (html disabled, so it is safe)
 // used everywhere else for Captain output, instead of a bespoke parser. It
 // handles paragraphs, line breaks, links, lists and emphasis consistently.
 const formattedSummary = computed(
  () => new MessageFormatter(welcomeMarkdown.value).formattedMessage
 );
 </script>
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
  <div v-if="isLoading || welcomeMarkdown" class="flex flex-col gap-3">
    <div class="flex items-center gap-1.5 text-n-slate-10">
      <span class="i-lucide-sparkles size-3.5" />
      <span class="text-xs">
        {{ $t('CAPTAIN.OVERVIEW.WELCOME.LABEL') }}
      </span>
    </div>
    <div
      v-if="isLoading"
      class="flex flex-col gap-5"
      :aria-label="$t('CAPTAIN.OVERVIEW.WELCOME.LOADING')"
    >
      <div class="flex flex-col gap-2.5">
        <div class="w-full h-5 rounded bg-n-slate-3 animate-pulse" />
        <div class="w-11/12 h-5 rounded bg-n-slate-3 animate-pulse" />
        <div class="w-4/6 h-5 rounded bg-n-slate-3 animate-pulse" />
      </div>
      <div class="w-5/6 h-5 rounded bg-n-slate-3 animate-pulse" />
    </div>
    <div
      v-else
      v-dompurify-html="formattedSummary"
      class="max-w-none prose prose-p:text-lg prose-p:leading-relaxed prose-p:mt-0 prose-p:mb-3 last:prose-p:mb-0 prose-strong:font-bold prose-strong:tabular-nums prose-strong:text-n-brand text-n-slate-12"
    />
  </div>
 </template>
@@ -65,7 +65,7 @@ const handleAssistantChange = async assistant => {
  const currentRouteName = route.name;
  const targetRouteName =
-    currentRouteName || 'captain_assistants_overview_index';
+    currentRouteName || 'captain_assistants_responses_index';
  await fetchDataForRoute(targetRouteName, assistant.id);
@@ -88,7 +88,7 @@ const openCreateAssistantDialog = () => {
 <template>
  <div
-    class="pt-5 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] max-h-96 rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
  >
    <div
      class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"
@@ -114,10 +114,7 @@ const openCreateAssistantDialog = () => {
        @click="openCreateAssistantDialog"
      />
    </div>
-    <div
+    <div v-if="assistants.length > 0" class="flex flex-col gap-2 px-4">
      v-if="assistants.length > 0"
      class="flex flex-col flex-1 min-h-0 gap-2 px-4 pb-3 overflow-y-auto overscroll-contain"
    >
      <Button
        v-for="assistant in assistants"
        :key="assistant.id"
@@ -1,8 +1,6 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 const props = defineProps({
  open: {
@@ -29,10 +27,6 @@ const props = defineProps({
    type: [String, Number, Array],
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
 });
 const emit = defineEmits(['select', 'search']);
@@ -69,22 +63,13 @@ defineExpose({
    class="absolute z-50 w-full mt-1 transition-opacity duration-200 border rounded-md shadow-lg bg-n-solid-1 border-n-strong"
  >
    <div class="relative border-b border-n-strong">
-      <Spinner
+      <span class="absolute i-lucide-search top-2.5 size-4 left-3" />
        v-if="loading"
        :size="16"
        class="absolute top-2.5 start-3 text-n-slate-11"
      />
      <Icon
        v-else
        icon="i-lucide-search"
        class="absolute top-2.5 size-4 start-3"
      />
      <input
        ref="searchInput"
        :value="searchValue"
        type="search"
        :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="reset-base w-full py-2 !ps-10 !pe-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
        @input="onInputSearch"
      />
    </div>
@@ -1,297 +0,0 @@
 <script setup>
 import { ref, computed, nextTick } from 'vue';
 import { OnClickOutside } from '@vueuse/components';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBoxDropdown from 'dashboard/components-next/combobox/ComboBoxDropdown.vue';
 import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 // Drag-reorderable multi-select capped at `max`. The model is the ordered list
 // of selected values.
 const props = defineProps({
  // { value, label, subtitle?, icon?, iconColor? } — icon is an emoji or an
  // icon-picker value, and falls back to `fallbackIcon`.
  options: {
    type: Array,
    default: () => [],
  },
  max: {
    type: Number,
    default: 3,
  },
  label: {
    type: String,
    default: '',
  },
  addLabel: {
    type: String,
    default: '',
  },
  searchPlaceholder: {
    type: String,
    default: '',
  },
  emptyState: {
    type: String,
    default: '',
  },
  fallbackIcon: {
    type: String,
    default: 'i-lucide-file-text',
  },
  // Show skeleton rows while options load, so the row height stays stable.
  loading: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  // Let the parent filter `options` (via the `search` event) instead of locally.
  serverSearch: {
    type: Boolean,
    default: false,
  },
 });
 const emit = defineEmits(['search']);
 const selectedIds = defineModel({ type: Array, default: () => [] });
 const isOpen = ref(false);
 const searchQuery = ref('');
 const dragIndex = ref(null);
 const dropdownRef = ref(null);
 const optionsByValue = computed(
  () => new Map(props.options.map(option => [option.value, option]))
 );
 const selectedRows = computed(() =>
  selectedIds.value.map(
    id => optionsByValue.value.get(id) || { value: id, label: String(id) }
  )
 );
 const remaining = computed(() => props.max - selectedIds.value.length);
 const canAddMore = computed(() => selectedIds.value.length < props.max);
 const dropdownOptions = computed(() => {
  const available = props.options.filter(
    option => !selectedIds.value.includes(option.value)
  );
  if (props.serverSearch) return available;
  const query = searchQuery.value.toLowerCase();
  return available.filter(option =>
    option.label?.toLowerCase().includes(query)
  );
 });
 const onSearch = value => {
  searchQuery.value = value;
  emit('search', value);
 };
 const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
  if (isOpen.value) {
    onSearch('');
    nextTick(() => dropdownRef.value?.focus());
  }
 };
 const onSelect = option => {
  if (!canAddMore.value) return;
  selectedIds.value = [...selectedIds.value, option.value];
  if (!canAddMore.value) isOpen.value = false;
 };
 const removeItem = id => {
  selectedIds.value = selectedIds.value.filter(value => value !== id);
 };
 const onDragStart = index => {
  dragIndex.value = index;
 };
 const onDragOver = index => {
  if (dragIndex.value === null || dragIndex.value === index) return;
  const ids = [...selectedIds.value];
  const [moved] = ids.splice(dragIndex.value, 1);
  ids.splice(index, 0, moved);
  dragIndex.value = index;
  selectedIds.value = ids;
 };
 const onDragEnd = () => {
  dragIndex.value = null;
 };
 </script>
 <template>
  <div>
    <div
      v-if="label || $slots.counter"
      class="flex items-center justify-between mb-1.5"
    >
      <label class="text-sm font-medium text-n-slate-12">{{ label }}</label>
      <div class="flex items-center gap-2">
        <span class="text-xs text-n-slate-10">
          <slot name="counter" :remaining="remaining" :max="max" />
        </span>
        <div class="flex items-center gap-1">
          <span
            v-for="slot in max"
            :key="slot"
            class="w-4 h-1 rounded-full"
            :class="slot <= selectedIds.length ? 'bg-n-brand' : 'bg-n-slate-4'"
          />
        </div>
      </div>
    </div>
    <OnClickOutside @trigger="isOpen = false">
      <div
        class="flex flex-col gap-1 p-1 border rounded-xl border-n-weak bg-n-background"
        :class="{ 'opacity-50 pointer-events-none': disabled }"
      >
        <div
          v-if="loading && selectedIds.length && !isOpen"
          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
          aria-busy="true"
        >
          <div
            v-for="n in selectedIds.length"
            :key="n"
            class="flex items-center gap-2 px-2 py-1.5 rounded-lg bg-n-alpha-2"
          >
            <span
              class="flex-shrink-0 opacity-40 i-lucide-grip-vertical size-4 text-n-slate-9"
            />
            <div class="flex-shrink-0 rounded-md size-6 bg-n-alpha-3" />
            <div class="flex-grow min-w-0">
              <p class="mb-0 text-sm">
                <span
                  class="inline-block w-32 h-2.5 align-middle rounded bg-n-alpha-3 animate-pulse"
                />
              </p>
              <p class="mb-0 text-xs">
                <span
                  class="inline-block w-20 h-2 align-middle rounded bg-n-alpha-3 animate-pulse"
                />
              </p>
            </div>
            <span class="flex-shrink-0 size-6" />
          </div>
        </div>
        <div
          v-else-if="selectedRows.length"
          class="flex flex-col gap-1 overflow-y-auto max-h-[216px]"
        >
          <div
            v-for="(row, index) in selectedRows"
            :key="row.value"
            draggable="true"
            class="flex items-center gap-2 px-2 py-1.5 transition-colors rounded-lg cursor-grab group/row"
            :class="
              index === dragIndex
                ? 'opacity-40 bg-n-alpha-3 ring-1 ring-inset ring-n-brand'
                : 'bg-n-alpha-2 hover:bg-n-alpha-3'
            "
            @dragstart="onDragStart(index)"
            @dragover.prevent="onDragOver(index)"
            @dragend="onDragEnd"
          >
            <span
              class="flex-shrink-0 transition-colors i-lucide-grip-vertical size-4 text-n-slate-9 group-hover/row:text-n-slate-11"
            />
            <div
              class="flex items-center justify-center flex-shrink-0 text-sm rounded-md size-6 bg-n-alpha-3 text-n-slate-11"
            >
              <EmojiIcon
                v-if="row.icon"
                :value="row.icon"
                :color="row.iconColor"
                class="shrink-0 size-4"
              />
              <span v-else class="size-4" :class="fallbackIcon" />
            </div>
            <div class="flex-grow min-w-0">
              <p class="mb-0 text-sm truncate text-n-slate-12">
                {{ row.label }}
              </p>
              <p
                v-if="row.subtitle"
                class="mb-0 text-xs truncate text-n-slate-10"
              >
                {{ row.subtitle }}
              </p>
            </div>
            <Button
              type="button"
              ghost
              slate
              xs
              no-animation
              icon="i-lucide-x"
              class="flex-shrink-0"
              @click="removeItem(row.value)"
            />
          </div>
        </div>
        <div v-if="canAddMore" class="relative">
          <Button
            type="button"
            ghost
            slate
            sm
            no-animation
            justify="start"
            :label="addLabel"
            :disabled="loading && !isOpen"
            class="w-full"
            @click="toggleDropdown"
          >
            <template #icon>
              <Spinner
                v-if="loading && !isOpen"
                :size="16"
                class="text-n-slate-11"
              />
              <Icon
                v-else
                icon="i-lucide-search"
                class="flex-shrink-0 size-4"
              />
            </template>
          </Button>
          <ComboBoxDropdown
            ref="dropdownRef"
            :open="isOpen"
            :options="dropdownOptions"
            :search-value="searchQuery"
            :search-placeholder="searchPlaceholder"
            :empty-state="emptyState"
            :loading="loading"
            @update:search-value="onSearch"
            @select="onSelect"
          />
        </div>
      </div>
    </OnClickOutside>
    <p
      v-if="selectedIds.length && $slots.note"
      class="flex items-center gap-1.5 mt-1.5 mb-0 text-xs text-n-slate-11"
    >
      <span class="rounded-full size-1.5 bg-n-teal-9" />
      <slot name="note" />
    </p>
  </div>
 </template>
@@ -1,224 +0,0 @@
 import { mount } from '@vue/test-utils';
 import { h } from 'vue';
 import ReorderableMultiSelect from '../ReorderableMultiSelect.vue';
 const OPTIONS = [
  { value: 1, label: 'Getting started', subtitle: 'Guides' },
  { value: 2, label: 'Billing', subtitle: 'Payments' },
  { value: 3, label: 'Security' },
  { value: 4, label: 'API', icon: '🔌', iconColor: '#000' },
 ];
 // A findable dropdown stub that exposes the `focus()` the component calls on open.
 const ComboBoxDropdownStub = {
  name: 'ComboBoxDropdown',
  props: [
    'open',
    'options',
    'searchValue',
    'searchPlaceholder',
    'emptyState',
    'loading',
  ],
  emits: ['select', 'update:searchValue'],
  methods: { focus() {} },
  template: '<div class="combo-dropdown" />',
 };
 // Renders a real <button> so clicks reach the parent handlers; `data-icon`
 // lets specs tell the remove buttons (icon="i-lucide-x") from the add trigger.
 const ButtonStub = {
  name: 'Button',
  props: ['label', 'icon', 'disabled'],
  emits: ['click'],
  template:
    '<button :data-icon="icon" :disabled="disabled" @click="$emit(\'click\')"><slot name="icon" />{{ label }}</button>',
 };
 const mountSelect = (props = {}, slots = {}) =>
  mount(ReorderableMultiSelect, {
    props: { options: OPTIONS, max: 3, ...props },
    slots,
    global: {
      stubs: {
        Button: ButtonStub,
        ComboBoxDropdown: ComboBoxDropdownStub,
        Spinner: true,
        Icon: true,
        EmojiIcon: true,
        OnClickOutside: { template: '<div><slot /></div>' },
      },
    },
  });
 const dropdown = wrapper => wrapper.findComponent(ComboBoxDropdownStub);
 const addTrigger = wrapper =>
  wrapper.findAll('button').find(button => !button.attributes('data-icon'));
 const removeButtons = wrapper =>
  wrapper.findAll('button[data-icon="i-lucide-x"]');
 const rows = wrapper => wrapper.findAll('[draggable="true"]');
 const lastModel = wrapper => wrapper.emitted('update:modelValue')?.at(-1)?.[0];
 describe('ReorderableMultiSelect', () => {
  describe('rendering selected rows', () => {
    it('renders rows in model order with labels resolved from options', () => {
      const wrapper = mountSelect({ modelValue: [2, 1] });
      const labels = rows(wrapper).map(row => row.find('p').text());
      expect(labels).toEqual(['Billing', 'Getting started']);
    });
    it('falls back to the stringified id when an option is unknown', () => {
      const wrapper = mountSelect({ modelValue: [99] });
      expect(rows(wrapper)[0].find('p').text()).toBe('99');
    });
    it('renders the progress dots filled up to the selection count', () => {
      const wrapper = mountSelect({
        modelValue: [1, 2],
        max: 3,
        label: 'Tags',
      });
      const filled = wrapper.findAll('.bg-n-brand').length;
      expect(filled).toBe(2);
    });
    it('exposes remaining and max to the counter slot', () => {
      const wrapper = mountSelect(
        { modelValue: [1], max: 3 },
        { counter: ({ remaining, max }) => h('span', `${remaining}/${max}`) }
      );
      expect(wrapper.text()).toContain('2/3');
    });
  });
  describe('adding options', () => {
    it('appends the chosen option to the model', () => {
      const wrapper = mountSelect({ modelValue: [1] });
      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
      expect(lastModel(wrapper)).toEqual([1, 2]);
    });
    it('hides the add trigger once the model reaches max', () => {
      const wrapper = mountSelect({ modelValue: [1, 2], max: 2 });
      expect(addTrigger(wrapper)).toBeUndefined();
      expect(dropdown(wrapper).exists()).toBe(false);
    });
    it('closes the dropdown when the last slot is filled', async () => {
      const wrapper = mountSelect({ modelValue: [1], max: 2 });
      await addTrigger(wrapper).trigger('click');
      expect(dropdown(wrapper).props('open')).toBe(true);
      dropdown(wrapper).vm.$emit('select', OPTIONS[1]);
      await wrapper.vm.$nextTick();
      // Reaching max removes the trigger (and its dropdown) entirely.
      expect(dropdown(wrapper).exists()).toBe(false);
    });
    it('excludes already-selected options from the dropdown', () => {
      const wrapper = mountSelect({ modelValue: [1] });
      const values = dropdown(wrapper)
        .props('options')
        .map(option => option.value);
      expect(values).toEqual([2, 3, 4]);
    });
  });
  describe('removing options', () => {
    it('removes the clicked item from the model', async () => {
      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
      await removeButtons(wrapper)[1].trigger('click');
      expect(lastModel(wrapper)).toEqual([1, 3]);
    });
  });
  describe('searching', () => {
    it('filters options locally by label', async () => {
      const wrapper = mountSelect({ modelValue: [] });
      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
      await wrapper.vm.$nextTick();
      const values = dropdown(wrapper)
        .props('options')
        .map(option => option.value);
      expect(values).toEqual([2]);
    });
    it('emits search and skips local filtering when serverSearch is set', async () => {
      const wrapper = mountSelect({ modelValue: [], serverSearch: true });
      dropdown(wrapper).vm.$emit('update:searchValue', 'bill');
      await wrapper.vm.$nextTick();
      expect(wrapper.emitted('search').at(-1)).toEqual(['bill']);
      // All unselected options remain; the parent owns filtering.
      expect(dropdown(wrapper).props('options')).toHaveLength(4);
    });
    it('emits an empty search when the trigger opens', async () => {
      const wrapper = mountSelect({ modelValue: [1] });
      await addTrigger(wrapper).trigger('click');
      expect(wrapper.emitted('search').at(-1)).toEqual(['']);
      expect(dropdown(wrapper).props('open')).toBe(true);
    });
  });
  describe('reordering', () => {
    it('moves a row to the dropped position within the model', async () => {
      const wrapper = mountSelect({ modelValue: [1, 2, 3] });
      await rows(wrapper)[0].trigger('dragstart');
      await rows(wrapper)[2].trigger('dragover');
      expect(lastModel(wrapper)).toEqual([2, 3, 1]);
    });
  });
  describe('loading state', () => {
    it('shows skeleton rows when loading a non-empty, closed selection', () => {
      const wrapper = mountSelect({ modelValue: [1, 2], loading: true });
      const skeleton = wrapper.find('[aria-busy="true"]');
      expect(skeleton.exists()).toBe(true);
      expect(skeleton.findAll('.animate-pulse').length).toBeGreaterThan(0);
    });
    it('does not show skeletons when the selection is empty', () => {
      const wrapper = mountSelect({ modelValue: [], loading: true });
      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
    });
    it('shows the real rows, not skeletons, while searching in an open dropdown', async () => {
      // Open first (trigger is enabled), then a live search turns loading on.
      const wrapper = mountSelect({ modelValue: [1, 2] });
      await addTrigger(wrapper).trigger('click');
      await wrapper.setProps({ loading: true });
      expect(wrapper.find('[aria-busy="true"]').exists()).toBe(false);
      expect(rows(wrapper)).toHaveLength(2);
    });
    it('forwards loading to the dropdown and disables the closed trigger', () => {
      const wrapper = mountSelect({ modelValue: [1], loading: true });
      expect(dropdown(wrapper).props('loading')).toBe(true);
      expect(addTrigger(wrapper).attributes('disabled')).toBeDefined();
    });
  });
 });
@@ -75,23 +75,6 @@ const hasConversationUnreadCounts = computed(() => {
  );
 });
 const hasFilteredUnreadCounts = computed(() => {
  return (
    hasConversationUnreadCounts.value &&
    isFeatureEnabledonAccount.value(
      accountId.value,
      FEATURE_FLAGS.UNREAD_COUNT_FOR_FILTERS
    )
  );
 });
 const hasDataImport = computed(() => {
  return isFeatureEnabledonAccount.value(
    accountId.value,
    FEATURE_FLAGS.DATA_IMPORT
  );
 });
 const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => {
  if (!currentAccountId) return;
@@ -216,18 +199,6 @@ const getLabelUnreadCount = useMapGetter(
 const getTeamUnreadCount = useMapGetter(
  'conversationUnreadCounts/getTeamUnreadCount'
 );
 const mentionsUnreadCount = useMapGetter(
  'conversationUnreadCounts/getMentionsUnreadCount'
 );
 const participatingUnreadCount = useMapGetter(
  'conversationUnreadCounts/getParticipatingUnreadCount'
 );
 const unattendedUnreadCount = useMapGetter(
  'conversationUnreadCounts/getUnattendedUnreadCount'
 );
 const getFolderUnreadCount = useMapGetter(
  'conversationUnreadCounts/getFolderUnreadCount'
 );
 const teams = useMapGetter('teams/getMyTeams');
 const contactCustomViews = useMapGetter('customViews/getContactCustomViews');
 const conversationCustomViews = useMapGetter(
@@ -255,22 +226,14 @@ watch([accountId, currentUserId], fetchSidebarSortPreferences, {
  immediate: true,
 });
 const hasUnreadCountsForSection = section => {
  if (section === SIDEBAR_SORT_SECTIONS.FOLDERS) {
    return hasFilteredUnreadCounts.value;
  }
  return hasConversationUnreadCounts.value;
 };
 const getSortOptionsForSection = section =>
  getSidebarSortOptions(section, {
-    hasUnreadCounts: hasUnreadCountsForSection(section),
+    hasUnreadCounts: hasConversationUnreadCounts.value,
  });
 const getSortForSection = section =>
  resolveSidebarSort(section, getSidebarSectionSort.value(section), {
-    hasUnreadCounts: hasUnreadCountsForSection(section),
+    hasUnreadCounts: hasConversationUnreadCounts.value,
  });
 const updateSortPreference = (section, sortBy) => {
@@ -290,7 +253,6 @@ const sortedFolders = computed(() =>
  sortSidebarItems(conversationCustomViews.value, {
    sortBy: getSortForSection(SIDEBAR_SORT_SECTIONS.FOLDERS),
    labelKey: view => view.name,
    unreadCountKey: view => getFolderUnreadCount.value(view.id),
  })
 );
@@ -380,9 +342,6 @@ const menuItems = computed(() => {
          name: 'Mentions',
          label: t('SIDEBAR.MENTIONED_CONVERSATIONS'),
          icon: 'i-lucide-at-sign',
          badgeCount: hasFilteredUnreadCounts.value
            ? mentionsUnreadCount.value
            : 0,
          activeOn: ['conversation_through_mentions'],
          to: accountScopedRoute('conversation_mentions'),
        },
@@ -390,9 +349,6 @@ const menuItems = computed(() => {
          name: 'Participating',
          label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
          icon: 'i-lucide-user-round-check',
          badgeCount: hasFilteredUnreadCounts.value
            ? participatingUnreadCount.value
            : 0,
          activeOn: ['conversation_through_participating'],
          to: accountScopedRoute('conversation_participating'),
        },
@@ -401,9 +357,6 @@ const menuItems = computed(() => {
          activeOn: ['conversation_through_unattended'],
          label: t('SIDEBAR.UNATTENDED_CONVERSATIONS'),
          icon: 'i-lucide-clock-alert',
          badgeCount: hasFilteredUnreadCounts.value
            ? unattendedUnreadCount.value
            : 0,
          to: accountScopedRoute('conversation_unattended'),
        },
        {
@@ -417,9 +370,6 @@ const menuItems = computed(() => {
          children: sortedFolders.value.map(view => ({
            name: `${view.name}-${view.id}`,
            label: view.name,
            badgeCount: hasFilteredUnreadCounts.value
              ? getFolderUnreadCount.value(view.id)
              : 0,
            to: accountScopedRoute('folder_conversations', { id: view.id }),
          })),
        },
@@ -490,14 +440,6 @@ const menuItems = computed(() => {
      label: t('SIDEBAR.CAPTAIN'),
      activeOn: ['captain_assistants_create_index'],
      children: [
        {
          name: 'Overview',
          label: t('SIDEBAR.CAPTAIN_OVERVIEW'),
          activeOn: ['captain_assistants_overview_index'],
          to: accountScopedRoute('captain_assistants_index', {
            navigationPath: 'captain_assistants_overview_index',
          }),
        },
        {
          name: 'FAQs',
          label: t('SIDEBAR.CAPTAIN_RESPONSES'),
@@ -863,16 +805,6 @@ const menuItems = computed(() => {
          icon: 'i-lucide-blocks',
          to: accountScopedRoute('settings_applications'),
        },
        ...(hasDataImport.value
          ? [
              {
                name: 'Settings Data',
                label: t('SIDEBAR.DATA'),
                icon: 'i-lucide-database',
                to: accountScopedRoute('settings_data_imports'),
              },
            ]
          : []),
        {
          name: 'Settings Audit Logs',
          label: t('SIDEBAR.AUDIT_LOGS'),
@@ -44,12 +44,6 @@ const showChatSupport = computed(() => {
  );
 });
 const toggleChatSupport = () => {
  if (window.$chatwoot) {
    window.$chatwoot.toggle();
  }
 };
 const menuItems = computed(() => {
  return [
    {
@@ -57,7 +51,9 @@ const menuItems = computed(() => {
      showOnCustomBrandedInstance: false,
      label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
      icon: 'i-lucide-life-buoy',
-      click: toggleChatSupport,
+      click: () => {
        window.$chatwoot.toggle();
      },
    },
    {
      show: true,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Sony MathewandGitHub	ba742e3431	Merge branch 'develop' into codex/update-msgpack-security	2026-06-30 14:43:00 +05:30
Sony Mathew	bd2468477f	chore(deps): update msgpack	2026-06-30 14:39:11 +05:30
`@@ -1,4 +1,4 @@`
	`Copyright (c) 2017-2026 Chatwoot Inc.`	`Copyright (c) 2017-2024 Chatwoot Inc.`

	`Portions of this software are licensed as follows:`	`Portions of this software are licensed as follows:`