Merge branch 'develop' into codex/docker-ci-cache-optimization

.circleci/config.yml

@@ -77,8 +77,7 @@ jobs:
 
       - node/install:
           node-version: '24.13'
-      - node/install-pnpm:
-          version: '10.2.0'
+      - node/install-pnpm
       - 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:
-          version: '10.2.0'
+      - node/install-pnpm
       - 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:
-          version: '10.2.0'
+      - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm
           override-ci-command: pnpm i

.dockerignore

@@ -1,14 +1,21 @@
 .bundle
+.codex
 .env
 .env.*
+.git
+.github
+.agents
 docker-compose.*
 docker/Dockerfile
 docker/dockerfiles
 log
+spec
 storage
+tests
 public/system
 tmp
 .codeclimate.yml
+coverage
 public/packs
 node_modules
 vendor/bundle

.github/workflows/publish_ee_docker.yml

@@ -78,6 +78,12 @@ jobs:
           platforms: ${{ matrix.platform }}
           push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
           outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
+          build-args: |
+            GIT_SHA=${{ github.sha }}
+          cache-from: |
+            type=gha,scope=${{ matrix.platform }}
+            type=gha,scope=${{ matrix.platform }}-ee
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}-ee
 
       - name: Export digest
         run: |
@@ -125,7 +131,7 @@ jobs:
           else
             TAG="${DOCKER_REPO}:${SANITIZED_REF}"
           fi
-          
+
           docker buildx imagetools create -t $TAG \
             $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
 
@@ -139,5 +145,5 @@ jobs:
           else
             TAG="${DOCKER_REPO}:${SANITIZED_REF}"
           fi
-          
+
           docker buildx imagetools inspect $TAG

.github/workflows/publish_foss_docker.yml

@@ -83,6 +83,12 @@ jobs:
           platforms: ${{ matrix.platform }}
           push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
           outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
+          build-args: |
+            GIT_SHA=${{ github.sha }}
+          cache-from: |
+            type=gha,scope=${{ matrix.platform }}
+            type=gha,scope=${{ matrix.platform }}-ce
+          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}-ce
 
       - name: Export digest
         run: |
@@ -130,7 +136,7 @@ jobs:
           else
             TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
           fi
-          
+
           docker buildx imagetools create -t $TAG \
             $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
 
@@ -144,5 +150,5 @@ jobs:
           else
             TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
           fi
-          
+
           docker buildx imagetools inspect $TAG

.github/workflows/test_docker_build.yml

@@ -39,5 +39,9 @@ jobs:
           platforms: ${{ matrix.platform }}
           push: false
           load: false
-          cache-from: type=gha,scope=${{ matrix.platform }}
-          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+          build-args: |
+            GIT_SHA=${{ github.sha }}
+          cache-from: |
+            type=gha,scope=${{ matrix.platform }}
+            type=gha,scope=${{ matrix.platform }}-ce
+            type=gha,scope=${{ matrix.platform }}-ee

Gemfile.lock

@@ -211,14 +211,13 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.38.0)
-      cgi
-      datadog-ruby_core_source (~> 3.5, >= 3.5.3)
-      libdatadog (~> 36.0.0.1.0)
-      libddwaf (~> 1.30.0.0.0)
+    datadog (2.19.0)
+      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
+      libdatadog (~> 18.1.0.1.0)
+      libddwaf (~> 1.24.1.0.3)
       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 (36.0.0.1.0-arm64-darwin)
-    libdatadog (36.0.0.1.0-x86_64-linux)
-    libddwaf (1.30.0.0.2)
+    libdatadog (18.1.0.1.0)
+    libdatadog (18.1.0.1.0-x86_64-linux)
+    libddwaf (1.24.1.0.3)
       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)
-      loofah (~> 2.25, >= 2.25.2)
+    rails-html-sanitizer (1.6.1)
+      loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
     rails-i18n (7.0.10)
       i18n (>= 0.7, < 2)
@@ -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)

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2017-2026 Chatwoot Inc.
+Copyright (c) 2017-2024 Chatwoot Inc.
 
 Portions of this software are licensed as follows:
 

Makefile

@@ -1,6 +1,7 @@
 # Variables
 APP_NAME := chatwoot
 RAILS_ENV ?= development
+GIT_SHA ?= $(shell git rev-parse HEAD 2>/dev/null || echo unknown)
 
 # Targets
 setup:
@@ -61,6 +62,6 @@ debug_worker:
 	overmind connect worker
 
 docker: 
-	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
+	docker build --build-arg GIT_SHA=$(GIT_SHA) -t $(APP_NAME) -f ./docker/Dockerfile .
 
 .PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker

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

@@ -30,8 +30,8 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    persist_article_changes if params[:article].present?
-    render json: { message: @article.errors.full_messages.to_sentence }, status: :unprocessable_entity and return unless @article.valid?
+    @article.update!(article_params) if params[:article].present?
+    render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
   end
 
   def destroy
@@ -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,
-                                                    :description,
-                                                    { tags: [] }]
+      :locale, meta: [:title,
+                      :description,
+                      { tags: [] }]
     )
   end
 

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

@@ -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

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

@@ -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')

app/controllers/api/v1/accounts/conversations/direct_uploads_controller.rb

@@ -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

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

@@ -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]
 

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

@@ -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

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

@@ -45,20 +45,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def update
-    continue_update = false
-
-    ActiveRecord::Base.transaction do
-      continue_update = update_branded_email_layout
-      raise ActiveRecord::Rollback unless continue_update
-
-      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
+    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
 
   def agent_bot
@@ -133,8 +124,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 +155,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,

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -6,10 +6,7 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
       {
         redirect_uri: "#{base_url}/microsoft/callback",
         scope: scope,
-        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'
+        state: state
       }
     )
     if redirect_url

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

@@ -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] } },
-                 { popular_content: popular_content_keys.index_with { { category_ids: [], article_ids: [] } } }] }
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
     )
   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)

app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb

@@ -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
@@ -33,7 +31,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 +39,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
 

app/controllers/api/v1/accounts_controller.rb

@@ -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

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

@@ -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,

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

@@ -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

app/controllers/concerns/ensure_current_account_helper.rb

@@ -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)

app/controllers/concerns/portal_home_data.rb

@@ -4,53 +4,17 @@ module PortalHomeData
   private
 
   def load_home_data
-    load_recommended_content
-    # 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'
-
+    base_articles = @portal.articles.published.where(locale: @locale).includes(:author, :category)
     @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?

app/controllers/dashboard_controller.rb

@@ -64,8 +64,10 @@ class DashboardController < ActionController::Base
     return unless @portal
 
     @locale = @portal.default_locale
-    request.variant = :documentation if @portal.layout == 'documentation'
-    load_home_data
+    if @portal.layout == 'documentation'
+      request.variant = :documentation
+      load_home_data
+    end
     render 'public/api/v1/portals/show', layout: 'portal', portal: @portal and return
   end
 

app/controllers/public/api/v1/inboxes/contacts_controller.rb

@@ -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
-    @contact_inbox.reload
+    render json: contact_identify_action.perform
   end
 
   private

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

@@ -24,11 +24,7 @@ class Public::Api::V1::Portals::BaseController < PublicController
   end
 
   def set_view_variant
-    request.variant = if @is_plain_layout_enabled
-                        :plain
-                      elsif @portal_layout == 'documentation'
-                        :documentation
-                      end
+    request.variant = :documentation if @portal_layout == 'documentation' && !@is_plain_layout_enabled
   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
 

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

@@ -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

app/drops/conversation_drop.rb

@@ -1,10 +1,6 @@
 class ConversationDrop < BaseDrop
   include MessageFormatHelper
 
-  def id
-    @obj.try(:display_id)
-  end
-
   def display_id
     @obj.try(:display_id)
   end

app/drops/inbox_drop.rb

@@ -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

app/finders/data_import_error_finder.rb

@@ -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

app/finders/data_import_skip_log_finder.rb

@@ -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

app/javascript/dashboard/api/captain/assistant.js

@@ -37,20 +37,6 @@ class CaptainAssistant extends ApiClient {
       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();

app/javascript/dashboard/api/dataImports.js

@@ -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();

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

@@ -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 }) {

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

@@ -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',
-        { signal: undefined }
+        '/api/v1/portals/room-rental/articles?page=1&locale=en-US&status=published&author_id=1'
       );
     });
   });

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

@@ -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
-    ? [
-        {
-          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];
+  return [...statusItems, 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>

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

@@ -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'),
 }));
 

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

@@ -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>

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

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, computed, watch, onBeforeUnmount } from 'vue';
-import { useTimeoutFn } from '@vueuse/core';
+import { ref, computed, watch } from 'vue';
+import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
 
@@ -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
-// falling back to the live value.
-const effectiveTitle = () =>
-  props.article?.draftTitle ?? props.article?.title ?? '';
-const effectiveContent = () =>
-  props.article?.draftContent ?? props.article?.content ?? '';
+const localTitle = ref(props.article?.title ?? '');
+const localContent = ref(props.article?.content ?? '');
 
-const hasPendingChanges = computed(
-  () => 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.
+// Sync local state when navigating to a different article or on initial fetch
 watch(
-  [() => props.article?.id, hasPendingChanges],
-  ([id, pending], [prevId, prevPending]) => {
-    if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
-    if (prevPending && !pending) isDiffPanelOpen.value = false;
+  () => props.article?.id,
+  newId => {
+    if (newId) {
+      localTitle.value = props.article?.title ?? '';
+      localContent.value = props.article?.content ?? '';
+    }
   }
 );
 
-const scheduleSave = () => {
-  if (isNewArticle.value) return;
-  debouncedSave();
-};
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
 
-// Flush a queued save on unmount so leaving the editor doesn't drop the last edit.
-onBeforeUnmount(() => {
-  if (isNewArticle.value || !isSaving.value) return;
-  cancelSave();
-  emit('saveArticle', {
-    title: localTitle.value,
-    content: localContent.value,
-  });
-});
+const handleSave = value => {
+  if (isNewArticle.value) return;
+  debouncedSave(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">

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

@@ -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
-// update; omit it for a plain status change.
-const performStatusUpdate = async (value, draftAction) => {
+const updateArticleStatus = async ({ value }) => {
+  showArticleActionMenu.value = false;
   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="
-              hasPendingChanges
-                ? t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH_CHANGES')
-                : t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')
-            "
+            :label="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 ||
-              (isPublished && !hasPendingChanges)
+              isArticlePublishing
             "
-            @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>

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

@@ -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>

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

@@ -5,12 +5,8 @@ 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 {
-  getArticleStatus,
-  ARTICLE_STATUSES,
-} from 'dashboard/helper/portalHelper.js';
+import { getArticleStatus } 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';
@@ -149,24 +145,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 +154,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 +168,15 @@ const handleArticleAction = async (action, { status, id }) => {
         useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
       }
     }
-    await refreshArticleMeta();
+    await updateArticlesMeta();
+    await updatePortalMeta();
   } catch (error) {
-    const fallbackMessage =
-      {
-        delete: t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE'),
-        'discard-draft': t(
-          'HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.DISCARD_CHANGES_ERROR'
-        ),
-      }[action] ?? getStatusMessage(status, false);
-    useAlert(error?.message || fallbackMessage);
+    const errorMessage =
+      error?.message ||
+      (action === 'delete'
+        ? t('HELP_CENTER.DELETE_ARTICLE.API.ERROR_MESSAGE')
+        : getStatusMessage(status, false));
+    useAlert(errorMessage);
   }
 };
 
@@ -241,15 +210,10 @@ const updateArticle = ({ action, value, id }) => {
         :views="item.views || 0"
         :updated-at="item.updatedAt"
         :is-selected="selectedArticleIds.has(item.id)"
-        :has-pending-changes="
-          item.status === ARTICLE_STATUSES.PUBLISHED && hasPendingChanges(item)
-        "
         selectable
         :show-selection-control="shouldShowSelectionControl(item.id)"
         @open-article="openArticle"
         @article-action="updateArticle"
-        @draft-resolved="onDraftResolved"
-        @draft-failed="onDraftFailed"
         @toggle-select="emit('toggleSelect', $event)"
         @hover="isHovered => handleCardHover(isHovered, item.id)"
       />

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

@@ -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 {
-  ARTICLE_TABS,
-  CATEGORY_ALL,
-  ARTICLE_STATUSES,
-} from 'dashboard/helper/portalHelper';
-import { hasPendingChanges } from 'dashboard/helper/articleDiffHelper';
+import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
 import articlesAPI from 'dashboard/api/helpCenter/articles';
@@ -65,7 +60,6 @@ const emit = defineEmits([
 
 const router = useRouter();
 const route = useRoute();
-const store = useStore();
 const { t } = useI18n();
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
@@ -233,46 +227,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({ portalSlug, articleIds, status });
-    }
-    await Promise.all(
-      draftIds.map(articleId =>
-        store.dispatch('articles/publishDraft', { portalSlug, articleId })
-      )
-    );
+    await articlesAPI.bulkUpdateStatus({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+      status,
+    });
     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')

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue

@@ -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>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/PopularContentDialog.vue

@@ -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>

app/javascript/dashboard/components-next/banner/Banner.vue

@@ -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"
       >

app/javascript/dashboard/components-next/button/ConfirmButton.vue

@@ -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"
     >

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

@@ -107,7 +107,6 @@ const onClickCancel = () => {
 
         <TextArea
           v-model="state.description"
-          :max-length="500"
           :label="
             t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
           "

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

@@ -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'),
-      value: 'viewDetails',
-      action: 'viewDetails',
-      icon: 'i-lucide-eye',
+      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
+      value: 'viewRelatedQuestions',
+      action: 'viewRelatedQuestions',
+      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
-        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"
-      >
+      <span class="text-base text-n-slate-12 line-clamp-1">
         {{ 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"

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

@@ -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')
         "

app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue

@@ -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"

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue

@@ -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"

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentDetails.spec.js

@@ -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,
-    });
-  });
-});

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentDetails.vue

@@ -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>

app/javascript/dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue

@@ -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>

app/javascript/dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue

@@ -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>

app/javascript/dashboard/components-next/captain/pageComponents/overview/MetricCard.vue

@@ -8,35 +8,16 @@ const props = defineProps({
   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 flex-col gap-3 p-5 group bg-n-solid-1">
     <div class="flex items-center gap-1.5">
       <span class="text-sm font-medium text-n-slate-11">{{ label }}</span>
       <span

app/javascript/dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue

@@ -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
-      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"
-    >
+    <div v-if="assistants.length > 0" class="flex flex-col gap-2 px-4">
       <Button
         v-for="assistant in assistants"
         :key="assistant.id"

app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue

@@ -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
-        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"
-      />
+      <span class="absolute i-lucide-search top-2.5 size-4 left-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>

app/javascript/dashboard/components-next/combobox/ReorderableMultiSelect.vue

@@ -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>

app/javascript/dashboard/components-next/combobox/specs/ReorderableMultiSelect.spec.js

@@ -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();
-    });
-  });
-});

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

@@ -85,13 +85,6 @@ const hasFilteredUnreadCounts = computed(() => {
   );
 });
 
-const hasDataImport = computed(() => {
-  return isFeatureEnabledonAccount.value(
-    accountId.value,
-    FEATURE_FLAGS.DATA_IMPORT
-  );
-});
-
 const fetchConversationUnreadCounts = ([currentAccountId, isEnabled]) => {
   if (!currentAccountId) return;
 
@@ -863,16 +856,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'),

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

@@ -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,

app/javascript/dashboard/components/Modal.vue

@@ -7,7 +7,7 @@ import Button from 'dashboard/components-next/button/Button.vue';
 const { modalType, closeOnBackdropClick, onClose } = defineProps({
   closeOnBackdropClick: { type: Boolean, default: true },
   showCloseButton: { type: Boolean, default: true },
-  onClose: { type: Function, default: null },
+  onClose: { type: Function, required: true },
   fullWidth: { type: Boolean, default: false },
   modalType: { type: String, default: 'centered' },
   size: { type: String, default: '' },
@@ -35,7 +35,7 @@ const handleMouseDown = () => {
 const close = () => {
   show.value = false;
   emit('close');
-  onClose?.();
+  onClose();
 };
 
 const onMouseUp = () => {

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

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import ChannelSelector from '../ChannelSelector.vue';
+import { IS_WHATSAPP_INBOX_CREATION_DISABLED } from 'dashboard/constants/globals';
 
 const props = defineProps({
   channel: {
@@ -52,10 +53,19 @@ const isActive = computed(() => {
     return props.enabledFeatures.channel_tiktok && hasTiktokConfigured.value;
   }
 
-  if (key === 'voice' || key === 'whatsapp_call') {
+  if (key === 'voice') {
     return props.enabledFeatures.channel_voice;
   }
 
+  if (key === 'whatsapp_call') {
+    return (
+      !IS_WHATSAPP_INBOX_CREATION_DISABLED &&
+      props.enabledFeatures.channel_voice &&
+      !!window.chatwootConfig?.whatsappAppId &&
+      window.chatwootConfig.whatsappAppId !== 'none'
+    );
+  }
+
   return [
     'website',
     'twilio',

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

@@ -62,7 +62,6 @@ import {
   calculateMenuPosition,
   getEffectiveChannelType,
   stripUnsupportedFormatting,
-  createVariableInputRule,
 } from 'dashboard/helper/editorHelper';
 import {
   hasPressedEnterAndNotCmdOrShift,
@@ -307,10 +306,6 @@ const plugins = computed(() => {
       searchTerm: variableSearchTerm,
       isAllowed: () => !props.isPrivate,
     }),
-    createVariableInputRule({
-      isPrivate: () => props.isPrivate,
-      getVariables: () => props.variables,
-    }),
     createSuggestionPlugin({
       trigger: ':',
       minChars: 2,

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

@@ -33,9 +33,7 @@ import {
 // constants
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { REPLY_POLICY } from 'shared/constants/links';
-import wootConstants, {
-  META_RESTRICTION_STATUS_URL,
-} from 'dashboard/constants/globals';
+import wootConstants from 'dashboard/constants/globals';
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 
@@ -95,7 +93,6 @@ export default {
       currentUserId: 'getCurrentUserID',
       listLoadingStatus: 'getAllMessagesLoaded',
       currentAccountId: 'getCurrentAccountId',
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
     }),
     isOpen() {
       return this.currentChat?.status === wootConstants.STATUS_TYPE.OPEN;
@@ -173,12 +170,6 @@ export default {
         instagramInbox
       );
     },
-    isInstagramRestrictionBannerVisible() {
-      return this.isOnChatwootCloud && this.isAnInstagramChannel;
-    },
-    instagramRestrictionStatusUrl() {
-      return META_RESTRICTION_STATUS_URL;
-    },
 
     replyWindowBannerMessage() {
       if (this.isAWhatsAppChannel) {
@@ -464,15 +455,7 @@ export default {
   >
     <div ref="topBannerRef">
       <Banner
-        v-if="isInstagramRestrictionBannerVisible"
-        color-scheme="warning"
-        class="mx-2 mt-2 overflow-hidden rounded-lg"
-        :banner-message="$t('CONVERSATION.INSTAGRAM_RESTRICTION_BANNER')"
-        :href-link="instagramRestrictionStatusUrl"
-        :href-link-text="$t('CONVERSATION.INSTAGRAM_RESTRICTION_STATUS_LINK')"
-      />
-      <Banner
-        v-else-if="!currentChat.can_reply"
+        v-if="!currentChat.can_reply"
         color-scheme="alert"
         class="mx-2 mt-2 overflow-hidden rounded-lg"
         :banner-message="replyWindowBannerMessage"

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

@@ -48,8 +48,6 @@ import {
   appendSignature,
   removeSignature,
   getEffectiveChannelType,
-  getAgentVariables,
-  getContactVariables,
 } from 'dashboard/helper/editorHelper';
 import { useCopilotReply } from 'dashboard/composables/useCopilotReply';
 import { useKbd } from 'dashboard/composables/utils/useKbd';
@@ -395,13 +393,7 @@ export default {
         contact: this.currentContact,
         inbox: this.inbox,
       });
-      // Match the backend drops: names are Ruby-capitalized and
-      // {{agent.*}} is the message sender, not the assignee.
-      return {
-        ...variables,
-        ...getContactVariables(this.currentContact),
-        ...getAgentVariables(this.currentUser),
-      };
+      return variables;
     },
     connectedPortalSlug() {
       const { help_center: portal = {} } = this.inbox;

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

@@ -1,120 +0,0 @@
-import { effectScope } from 'vue';
-import { useAbortableRequest } from '../useAbortableRequest';
-
-// Resolves when the request "completes", rejects like axios does when the
-// signal is aborted mid-flight.
-const abortableRunner =
-  (value, { fail = false } = {}) =>
-  signal =>
-    new Promise((resolve, reject) => {
-      signal.addEventListener('abort', () => {
-        const error = new Error('canceled');
-        error.name = 'CanceledError';
-        reject(error);
-      });
-      // Defer so a follow-up `run`/`abort` can supersede this one first.
-      Promise.resolve().then(() => {
-        if (signal.aborted) return;
-        if (fail) {
-          reject(new Error('boom'));
-          return;
-        }
-        resolve(value);
-      });
-    });
-
-describe('useAbortableRequest', () => {
-  it('passes a fresh signal to the runner and returns its result', async () => {
-    const { run } = useAbortableRequest();
-    let received = null;
-
-    const result = await run(signal => {
-      received = signal;
-      return Promise.resolve('ok');
-    });
-
-    expect(received).toBeInstanceOf(AbortSignal);
-    expect(received.aborted).toBe(false);
-    expect(result).toBe('ok');
-  });
-
-  it('toggles isPending around the request', async () => {
-    const { run, isPending } = useAbortableRequest();
-    expect(isPending.value).toBe(false);
-
-    const pending = run(() => Promise.resolve('done'));
-    expect(isPending.value).toBe(true);
-
-    await pending;
-    expect(isPending.value).toBe(false);
-  });
-
-  it('aborts the previous request when a new one starts', async () => {
-    const { run } = useAbortableRequest();
-
-    const first = run(abortableRunner('first'));
-    const second = run(abortableRunner('second'));
-
-    await expect(first).resolves.toBeUndefined();
-    await expect(second).resolves.toBe('second');
-  });
-
-  it('returns the onAbort value when a request is superseded', async () => {
-    const { run } = useAbortableRequest();
-
-    const first = run(abortableRunner('first'), { onAbort: null });
-    const second = run(abortableRunner('second'));
-
-    await expect(first).resolves.toBeNull();
-    await expect(second).resolves.toBe('second');
-  });
-
-  it('abort cancels the in-flight request and clears isPending', async () => {
-    const { run, abort, isPending } = useAbortableRequest();
-
-    const pending = run(abortableRunner('value'));
-    expect(isPending.value).toBe(true);
-
-    abort();
-
-    await expect(pending).resolves.toBeUndefined();
-    expect(isPending.value).toBe(false);
-  });
-
-  it('rethrows non-abort errors and clears isPending', async () => {
-    const { run, isPending } = useAbortableRequest();
-
-    await expect(run(abortableRunner(null, { fail: true }))).rejects.toThrow(
-      'boom'
-    );
-    expect(isPending.value).toBe(false);
-  });
-
-  it('aborts the in-flight request when its scope is disposed', async () => {
-    const scope = effectScope();
-    let request;
-    scope.run(() => {
-      request = useAbortableRequest();
-    });
-
-    const pending = request.run(abortableRunner('value'));
-    expect(request.isPending.value).toBe(true);
-
-    scope.stop();
-
-    await expect(pending).resolves.toBeUndefined();
-    expect(request.isPending.value).toBe(false);
-  });
-
-  it('keeps separate controllers per instance', async () => {
-    const a = useAbortableRequest();
-    const b = useAbortableRequest();
-
-    const first = a.run(abortableRunner('a'));
-    // Starting b's request must not abort a's.
-    const second = b.run(abortableRunner('b'));
-
-    await expect(first).resolves.toBe('a');
-    await expect(second).resolves.toBe('b');
-  });
-});

app/javascript/dashboard/composables/useAbortableRequest.js

@@ -1,62 +0,0 @@
-import { getCurrentScope, onScopeDispose, ref } from 'vue';
-
-export const isAbortError = error =>
-  error?.name === 'AbortError' ||
-  error?.name === 'CanceledError' ||
-  error?.code === 'ERR_CANCELED';
-
-/**
- * Keeps only the latest request alive. Starting a new `run` (or calling
- * `abort`) cancels the previous request through its `AbortSignal`, so
- * out-of-order responses can never overwrite fresher data.
- *
- * @example
- * const { run, abort, isPending } = useAbortableRequest();
- * const results = await run(signal => api.search(query, { signal }));
- *
- * @returns {{
- *   run: (runner: (signal: AbortSignal) => Promise<any>, options?: { onAbort?: any }) => Promise<any>,
- *   abort: () => void,
- *   isPending: import('vue').Ref<boolean>,
- * }}
- * `run` resolves with the runner's value, or `options.onAbort` (default
- * `undefined`) when the request was superseded. Non-abort errors are rethrown.
- */
-export function useAbortableRequest() {
-  const isPending = ref(false);
-  let controller = null;
-
-  const abort = () => {
-    controller?.abort();
-    controller = null;
-    isPending.value = false;
-  };
-
-  const run = async (runner, { onAbort } = {}) => {
-    controller?.abort();
-    const currentController = new AbortController();
-    controller = currentController;
-    isPending.value = true;
-
-    try {
-      return await runner(currentController.signal);
-    } catch (error) {
-      if (currentController.signal.aborted || isAbortError(error))
-        return onAbort;
-      throw error;
-    } finally {
-      // Only the latest run owns the shared state; a superseded run leaves it
-      // for the run that replaced it.
-      if (controller === currentController) {
-        controller = null;
-        isPending.value = false;
-      }
-    }
-  };
-
-  // Cancel any in-flight request when the owning scope is disposed.
-  // Guarded so the composable can also be used outside an effect scope.
-  if (getCurrentScope()) onScopeDispose(abort);
-
-  return { run, abort, isPending };
-}

app/javascript/dashboard/composables/useFileUpload.js

@@ -2,7 +2,6 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
-import { setDirectUploadAuthHeaders } from 'dashboard/helper/directUploadsHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
 import {
@@ -22,6 +21,7 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
   const { t } = useI18n();
 
   const accountId = useMapGetter('getCurrentAccountId');
+  const currentUser = useMapGetter('getCurrentUser');
   const currentChat = useMapGetter('getSelectedChat');
   const globalConfig = useMapGetter('globalConfig/get');
 
@@ -78,7 +78,10 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
       `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
       {
         directUploadWillCreateBlobWithXHR: xhr => {
-          setDirectUploadAuthHeaders(xhr);
+          xhr.setRequestHeader(
+            'api_access_token',
+            currentUser.value.access_token
+          );
         },
       }
     );

app/javascript/dashboard/constants/globals.js

@@ -78,5 +78,7 @@ export default {
   },
 };
 export const DEFAULT_REDIRECT_URL = '/app/';
-export const META_RESTRICTION_STATUS_URL =
-  'https://status.chatwoot.com/incident/948346';
+
+// Temporarily disables WhatsApp embedded signup and WhatsApp Call inbox
+// creation. Flip to false when the channel is brought back.
+export const IS_WHATSAPP_INBOX_CREATION_DISABLED = true;

app/javascript/dashboard/featureFlags.js

@@ -7,15 +7,9 @@ export const FEATURE_FLAGS = {
   AUTOMATIONS: 'automations',
   CAMPAIGNS: 'campaigns',
   WHATSAPP_CAMPAIGNS: 'whatsapp_campaign',
-  WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION:
-    'whatsapp_embedded_signup_inbox_creation',
-  WHATSAPP_MANUAL_TRANSFER: 'whatsapp_manual_transfer',
-  WHATSAPP_RECONFIGURE: 'whatsapp_reconfigure',
   CANNED_RESPONSES: 'canned_responses',
   CRM: 'crm',
   CUSTOM_ATTRIBUTES: 'custom_attributes',
-  DATA_IMPORT: 'data_import',
-  API_AND_WEBHOOKS: 'api_and_webhooks',
   INBOX_MANAGEMENT: 'inbox_management',
   INTEGRATIONS: 'integrations',
   LABELS: 'labels',

app/javascript/dashboard/helper/articleDiffHelper.js

@@ -1,172 +0,0 @@
-// Powers the "unpublished changes" preview: marks what changed between the live
-// article and the draft — word by word in the title, block by block in the body.
-
-import MarkdownIt from 'markdown-it';
-
-// Matches the public renderer (CommonMark, no typographer). True when two
-// markdown strings render the same — so blank-line/spacing-only edits don't count,
-// but real changes (code indentation, smart quotes, width markers) do.
-const commonmark = MarkdownIt('commonmark');
-export const rendersIdentically = (a, b) =>
-  commonmark.render(a ?? '') === commonmark.render(b ?? '');
-
-const INS_CLASS = '!bg-n-teal-5 !text-n-teal-12 !no-underline rounded px-0.5';
-const DEL_CLASS = '!bg-n-ruby-5 !text-n-ruby-12 !line-through rounded px-0.5';
-
-// Detailed compare gets slow on huge texts; past this, show all old as removed
-// and all new as added.
-const MAX_DIFF_TOKENS = 2000;
-
-const tokenizeWords = value => (value || '').match(/\S+/g) || [];
-
-const escapeHtml = value =>
-  value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-
-// Compares two lists in order and reports what's the same (`equal`), removed
-// (`del`) or added (`ins`), keeping as much unchanged as possible. `keyOf` says
-// how to compare items (title passes words, body passes blocks).
-const diffSequence = (a, b, keyOf = item => item) => {
-  const n = a.length;
-  const m = b.length;
-  if (n > MAX_DIFF_TOKENS || m > MAX_DIFF_TOKENS) {
-    return [
-      ...a.map(item => ({ type: 'del', item })),
-      ...b.map(item => ({ type: 'ins', item })),
-    ];
-  }
-
-  const dp = Array.from({ length: n + 1 }, () => new Array(m + 1).fill(0));
-  for (let i = n - 1; i >= 0; i -= 1) {
-    for (let j = m - 1; j >= 0; j -= 1) {
-      dp[i][j] =
-        keyOf(a[i]) === keyOf(b[j])
-          ? dp[i + 1][j + 1] + 1
-          : Math.max(dp[i + 1][j], dp[i][j + 1]);
-    }
-  }
-
-  const ops = [];
-  let i = 0;
-  let j = 0;
-  while (i < n && j < m) {
-    if (keyOf(a[i]) === keyOf(b[j])) {
-      ops.push({ type: 'equal', item: a[i] });
-      i += 1;
-      j += 1;
-    } else if (dp[i + 1][j] >= dp[i][j + 1]) {
-      ops.push({ type: 'del', item: a[i] });
-      i += 1;
-    } else {
-      ops.push({ type: 'ins', item: b[j] });
-      j += 1;
-    }
-  }
-  while (i < n) {
-    ops.push({ type: 'del', item: a[i] });
-    i += 1;
-  }
-  while (j < m) {
-    ops.push({ type: 'ins', item: b[j] });
-    j += 1;
-  }
-  return ops;
-};
-
-const wrapDiff = {
-  ins: text => `<ins class="${INS_CLASS}">${text}</ins>`,
-  del: text => `<del class="${DEL_CLASS}">${text}</del>`,
-};
-
-// Builds the highlighted title. Compares whole words (not single spaces) so
-// repeated words/spaces don't make the highlights jump around, then rejoins
-// with single spaces — a run of added/removed words shares one <ins>/<del> tag.
-export const renderInlineDiff = (oldValue, newValue) => {
-  const ops = diffSequence(tokenizeWords(oldValue), tokenizeWords(newValue));
-
-  const segments = [];
-  let run = [];
-  let runType = null;
-  const flushRun = () => {
-    if (!run.length) return;
-    const text = run.map(escapeHtml).join(' ');
-    segments.push(wrapDiff[runType] ? wrapDiff[runType](text) : text);
-    run = [];
-  };
-
-  ops.forEach(({ type, item }) => {
-    if (type !== runType) flushRun();
-    runType = type;
-    run.push(item);
-  });
-  flushRun();
-
-  return segments.join(' ');
-};
-
-// A fenced code block opener: ``` or ~~~, indented up to 3 spaces (CommonMark).
-const FENCE_RE = /^ {0,3}(```|~~~)/;
-// A list item marker: -, *, + or "1." / "1)", indented up to 3 spaces.
-const LIST_ITEM_RE = /^ {0,3}(?:[-*+]|\d{1,9}[.)])(?:\s|$)/;
-
-// Split on blank lines so each paragraph, heading or list compares as one piece.
-// Blank lines inside a fenced code block, or between items of the same list, are
-// content — splitting there would tear a code block or list apart and render it
-// with broken structure (orphaned <li>/<p>), so we keep those together.
-const splitBlocks = text => {
-  const lines = (text || '').split('\n');
-  const blocks = [];
-  let buffer = [];
-  let fence = null;
-  let inList = false;
-
-  const flush = () => {
-    const block = buffer.join('\n');
-    if (block.trim()) blocks.push(block);
-    buffer = [];
-    inList = false;
-  };
-
-  lines.forEach((line, index) => {
-    const marker = line.match(FENCE_RE)?.[1];
-    if (marker && !fence) fence = marker;
-    else if (fence && line.trimStart().startsWith(fence)) fence = null;
-
-    if (fence) {
-      buffer.push(line);
-      return;
-    }
-
-    if (LIST_ITEM_RE.test(line)) inList = true;
-
-    if (line.trim() !== '') {
-      buffer.push(line);
-      return;
-    }
-
-    // Blank line: keep it when the current list continues on the next non-blank
-    // line (another item or an indented continuation); otherwise end the block.
-    const next = lines.slice(index + 1).find(other => other.trim() !== '');
-    if (inList && next && (LIST_ITEM_RE.test(next) || /^\s/.test(next))) {
-      buffer.push(line);
-    } else {
-      flush();
-    }
-  });
-
-  flush();
-  return blocks;
-};
-
-const BLOCK_TYPE = { equal: 'equal', del: 'removed', ins: 'added' };
-
-// Diffs the body block by block. Blocks match when they render to the same HTML
-// (the check staging uses), so only edits that change the page show as a diff.
-export const buildDiffBlocks = (oldText, newText) => {
-  const toBlocks = text =>
-    splitBlocks(text).map(md => ({ md, key: commonmark.render(md) }));
-  const ops = diffSequence(toBlocks(oldText), toBlocks(newText), b => b.key);
-  return ops.map(op => ({ type: BLOCK_TYPE[op.type], md: op.item.md }));
-};
-
-export const hasPendingChanges = article =>
-  article?.draftTitle != null || article?.draftContent != null;

app/javascript/dashboard/helper/directUploadsHelper.js

@@ -1,19 +0,0 @@
-import Auth from 'dashboard/api/auth';
-
-export const setDirectUploadAuthHeaders = xhr => {
-  const {
-    'access-token': accessToken,
-    'token-type': tokenType,
-    client,
-    expiry,
-    uid,
-  } = Auth.getAuthData() || {};
-
-  if (!accessToken) return;
-
-  xhr.setRequestHeader('access-token', accessToken);
-  xhr.setRequestHeader('token-type', tokenType);
-  xhr.setRequestHeader('client', client);
-  xhr.setRequestHeader('expiry', expiry);
-  xhr.setRequestHeader('uid', uid);
-};

app/javascript/dashboard/helper/editorHelper.js

@@ -9,7 +9,6 @@ import * as Sentry from '@sentry/vue';
 import camelcaseKeys from 'camelcase-keys';
 import { FORMATTING, MARKDOWN_PATTERNS } from 'dashboard/constants/editor';
 import { INBOX_TYPES, TWILIO_CHANNEL_MEDIUM } from 'dashboard/helper/inbox';
-import { InputRule, inputRules } from 'prosemirror-inputrules';
 
 /**
  * Extract text from markdown, and remove all images, code blocks, links, headers, bold, italic, lists etc.
@@ -429,55 +428,6 @@ export function stripUnsupportedFormatting(content, schema) {
  * - emoji
  */
 
-// Liquid delimiters ({{ }} / {% %}) the backend evaluates on send.
-const LIQUID_SYNTAX = /\{\{|\{%/;
-
-// Value when set (and not itself Liquid), else the {{placeholder}} for the backend.
-export const resolveVariableText = (key, variables) => {
-  const value = String(variables?.[key] ?? '');
-  return value && !LIQUID_SYNTAX.test(value) ? value : `{{${key}}}`;
-};
-
-// Name variables normalized like the backend drops (UserDrop/ContactDrop):
-// name split on whitespace, each word Ruby-capitalized (rest downcased).
-const getNameVariables = (prefix, name) => {
-  const names = (name || '')
-    .split(/\s+/)
-    .filter(Boolean)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase());
-  return {
-    [`${prefix}.name`]: names.join(' '),
-    [`${prefix}.first_name`]: names[0] || '',
-    [`${prefix}.last_name`]: names.length > 1 ? names[names.length - 1] : '',
-  };
-};
-
-// {{agent.*}} values for the message sender.
-export const getAgentVariables = user => ({
-  ...getNameVariables('agent', user.name),
-  'agent.email': user.email,
-});
-
-// {{contact.*}} name values.
-export const getContactVariables = contact =>
-  getNameVariables('contact', contact?.name);
-
-// Resolves a manually typed {{variable}} to its value on the closing braces.
-// Leaves the placeholder when there's no value, the value is Liquid, or it's a private note.
-export const createVariableInputRule = ({ isPrivate, getVariables }) => {
-  const rule = new InputRule(
-    /\{\{([^{}]+)\}\}$/,
-    (editorState, match, from, to) => {
-      if (isPrivate()) return null;
-      const [, key] = match;
-      const text = resolveVariableText(key, getVariables());
-      if (text === `{{${key}}}`) return null;
-      return editorState.tr.insertText(text, from, to);
-    }
-  );
-  return inputRules({ rules: [rule] });
-};
-
 /**
  * Centralized node creation function that handles the creation of different types of nodes based on the specified type.
  * @param {Object} editorView - The editor view instance.
@@ -512,7 +462,7 @@ const createNode = (editorView, nodeType, content) => {
       );
     }
     case 'variable':
-      return state.schema.text(content);
+      return state.schema.text(`{{${content}}}`);
     case 'emoji':
       return state.schema.text(content);
     case 'tool': {
@@ -547,12 +497,8 @@ const nodeCreators = {
       to,
     };
   },
-  variable: (editorView, content, from, to, variables) => ({
-    node: createNode(
-      editorView,
-      'variable',
-      resolveVariableText(content, variables)
-    ),
+  variable: (editorView, content, from, to) => ({
+    node: createNode(editorView, 'variable', content),
     from,
     to,
   }),

app/javascript/dashboard/helper/portalHelper.js

@@ -166,13 +166,6 @@ export const LOCALE_MENU_ITEMS = {
     value: 'customize-content',
     icon: 'i-lucide-pencil',
   },
-  selectPopularContent: {
-    label:
-      'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.SELECT_POPULAR_CONTENT',
-    action: 'select-popular-content',
-    value: 'select-popular-content',
-    icon: 'i-lucide-sparkles',
-  },
   delete: {
     label: 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE',
     action: 'delete',
@@ -192,7 +185,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
         LOCALE_MENU_ITEMS.moveToDraft,
       ]),
       LOCALE_MENU_ITEMS.customizeContent,
-      LOCALE_MENU_ITEMS.selectPopularContent,
       ...disableLocaleMenuItems([LOCALE_MENU_ITEMS.delete]),
     ];
   }
@@ -201,7 +193,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     return [
       LOCALE_MENU_ITEMS.publishLocale,
       LOCALE_MENU_ITEMS.customizeContent,
-      LOCALE_MENU_ITEMS.selectPopularContent,
       LOCALE_MENU_ITEMS.delete,
     ];
   }
@@ -210,7 +201,6 @@ export const buildLocaleMenuItems = ({ isDefault, isDraft }) => {
     LOCALE_MENU_ITEMS.makeDefault,
     LOCALE_MENU_ITEMS.moveToDraft,
     LOCALE_MENU_ITEMS.customizeContent,
-    LOCALE_MENU_ITEMS.selectPopularContent,
     LOCALE_MENU_ITEMS.delete,
   ];
 };

app/javascript/dashboard/helper/specs/articleDiffHelper.spec.js

@@ -1,170 +0,0 @@
-import {
-  renderInlineDiff,
-  buildDiffBlocks,
-  hasPendingChanges,
-  rendersIdentically,
-} from '../articleDiffHelper';
-
-describe('articleDiffHelper', () => {
-  describe('renderInlineDiff', () => {
-    it('returns the text unchanged when there is no difference', () => {
-      const result = renderInlineDiff('hello world', 'hello world');
-      expect(result).toBe('hello world');
-      expect(result).not.toContain('<ins');
-      expect(result).not.toContain('<del');
-    });
-
-    it('wraps inserted words in <ins>', () => {
-      const result = renderInlineDiff('hello', 'hello there');
-      expect(result).toContain('hello');
-      expect(result).toContain('<ins');
-      expect(result).toContain('there');
-    });
-
-    it('wraps removed words in <del>', () => {
-      const result = renderInlineDiff('hello there', 'hello');
-      expect(result).toContain('<del');
-      expect(result).toContain('there');
-    });
-
-    it('keeps a single removal contiguous when a word repeats', () => {
-      const result = renderInlineDiff(
-        'How to use Agent bots?',
-        'How How to Agent bots?'
-      );
-      expect(result).toBe(
-        'How <ins class="!bg-n-teal-5 !text-n-teal-12 !no-underline rounded px-0.5">How</ins> to <del class="!bg-n-ruby-5 !text-n-ruby-12 !line-through rounded px-0.5">use</del> Agent bots?'
-      );
-    });
-
-    it('escapes markup when diffing plain text', () => {
-      const result = renderInlineDiff('a', 'a <b>');
-      expect(result).toContain('&lt;b&gt;');
-      expect(result).not.toContain('<b>');
-    });
-
-    it('treats a cleared empty string as a full deletion', () => {
-      const result = renderInlineDiff('gone', '');
-      expect(result).toContain('<del');
-      expect(result).toContain('gone');
-    });
-  });
-
-  describe('buildDiffBlocks', () => {
-    it('passes an unchanged block through as equal', () => {
-      const blocks = buildDiffBlocks('same para', 'same para');
-      expect(blocks).toEqual([{ type: 'equal', md: 'same para' }]);
-    });
-
-    it('marks an appended block as added', () => {
-      const blocks = buildDiffBlocks('a', 'a\n\nb');
-      expect(blocks).toContainEqual({ type: 'equal', md: 'a' });
-      expect(blocks).toContainEqual({ type: 'added', md: 'b' });
-    });
-
-    it('marks a deleted block as removed', () => {
-      const blocks = buildDiffBlocks('a\n\nb', 'a');
-      expect(blocks).toContainEqual({ type: 'removed', md: 'b' });
-    });
-
-    it('emits the old block then the new block for a reworded section', () => {
-      const blocks = buildDiffBlocks('hello world', 'hello there');
-      expect(blocks).toEqual([
-        { type: 'removed', md: 'hello world' },
-        { type: 'added', md: 'hello there' },
-      ]);
-    });
-
-    it('keeps a fenced code block whole when it contains blank lines', () => {
-      const code = '```\nline one\n\nline two\n```';
-      const blocks = buildDiffBlocks(code, code);
-      expect(blocks).toEqual([{ type: 'equal', md: code }]);
-    });
-
-    it('diffs an edited code block as one whole removed + added block', () => {
-      const live = '```\ncode line\n```';
-      const draft = '```\ncode line\n\nsd\n```';
-      const blocks = buildDiffBlocks(live, draft);
-      expect(blocks).toContainEqual({ type: 'removed', md: live });
-      expect(blocks).toContainEqual({ type: 'added', md: draft });
-    });
-
-    it('surfaces whitespace edits that change the rendered output', () => {
-      expect(
-        buildDiffBlocks('```\nx\n```', '```\n  x\n```').some(
-          block => block.type !== 'equal'
-        )
-      ).toBe(true);
-      expect(
-        buildDiffBlocks('line one\nline two', 'line one  \nline two').some(
-          block => block.type !== 'equal'
-        )
-      ).toBe(true);
-    });
-
-    it('surfaces an indented code block turning into a paragraph', () => {
-      const blocks = buildDiffBlocks(
-        '    curl example.com',
-        'curl example.com'
-      );
-      expect(blocks).toContainEqual({
-        type: 'removed',
-        md: '    curl example.com',
-      });
-      expect(blocks).toContainEqual({ type: 'added', md: 'curl example.com' });
-    });
-
-    it('keeps spacing the renderer ignores as equal', () => {
-      const blocks = buildDiffBlocks('a\nb', 'a \nb');
-      expect(blocks.every(block => block.type === 'equal')).toBe(true);
-    });
-
-    it('keeps a loose list with item descriptions as one block', () => {
-      const list =
-        '1. **One**\n\n   First item.\n\n2. **Two**\n\n   Second item.';
-      const blocks = buildDiffBlocks(list, list);
-      expect(blocks).toEqual([{ type: 'equal', md: list }]);
-    });
-  });
-
-  describe('rendersIdentically', () => {
-    it('ignores blank-line / empty-paragraph differences', () => {
-      expect(rendersIdentically('a\n\nb', 'a\n\n\nb')).toBe(true);
-      expect(rendersIdentically('hello', 'hello\n\n')).toBe(true);
-    });
-
-    it('counts code-block indentation changes', () => {
-      expect(rendersIdentically('```\n  x\n```', '```\nx\n```')).toBe(false);
-    });
-
-    it('counts smart vs straight quotes (no typographer)', () => {
-      expect(rendersIdentically('"hi"', '“hi”')).toBe(false);
-    });
-
-    it('counts real text changes', () => {
-      expect(rendersIdentically('hello world', 'hello there')).toBe(false);
-    });
-
-    it('treats nullish input as empty', () => {
-      expect(rendersIdentically(null, '')).toBe(true);
-      expect(rendersIdentically(undefined, 'x')).toBe(false);
-    });
-  });
-
-  describe('hasPendingChanges', () => {
-    it('is true when a draft title or content is staged', () => {
-      expect(hasPendingChanges({ draftContent: 'edit' })).toBe(true);
-      expect(hasPendingChanges({ draftTitle: 'edit' })).toBe(true);
-    });
-
-    it('treats a cleared empty-string draft as a pending change', () => {
-      expect(hasPendingChanges({ draftTitle: '' })).toBe(true);
-    });
-
-    it('is false with no draft columns', () => {
-      expect(hasPendingChanges({ title: 'live' })).toBe(false);
-      expect(hasPendingChanges({})).toBe(false);
-      expect(hasPendingChanges(null)).toBe(false);
-    });
-  });
-});

app/javascript/dashboard/helper/specs/directUploadsHelper.spec.js

@@ -1,61 +0,0 @@
-import { setDirectUploadAuthHeaders } from '../directUploadsHelper';
-import Auth from 'dashboard/api/auth';
-
-vi.mock('dashboard/api/auth', () => ({
-  default: { getAuthData: vi.fn() },
-}));
-
-describe('setDirectUploadAuthHeaders', () => {
-  const buildXhr = () => ({ setRequestHeader: vi.fn() });
-
-  afterEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('sets the five session auth headers from the auth cookie', () => {
-    Auth.getAuthData.mockReturnValue({
-      'access-token': 'token-123',
-      'token-type': 'Bearer',
-      client: 'client-123',
-      expiry: '9999',
-      uid: 'agent@example.com',
-    });
-    const xhr = buildXhr();
-
-    setDirectUploadAuthHeaders(xhr);
-
-    expect(xhr.setRequestHeader).toHaveBeenCalledTimes(5);
-    expect(xhr.setRequestHeader).toHaveBeenCalledWith(
-      'access-token',
-      'token-123'
-    );
-    expect(xhr.setRequestHeader).toHaveBeenCalledWith('token-type', 'Bearer');
-    expect(xhr.setRequestHeader).toHaveBeenCalledWith('client', 'client-123');
-    expect(xhr.setRequestHeader).toHaveBeenCalledWith('expiry', '9999');
-    expect(xhr.setRequestHeader).toHaveBeenCalledWith(
-      'uid',
-      'agent@example.com'
-    );
-  });
-
-  it('does not set any header when there is no auth data', () => {
-    Auth.getAuthData.mockReturnValue(false);
-    const xhr = buildXhr();
-
-    setDirectUploadAuthHeaders(xhr);
-
-    expect(xhr.setRequestHeader).not.toHaveBeenCalled();
-  });
-
-  it('does not set any header when the access token is missing', () => {
-    Auth.getAuthData.mockReturnValue({
-      client: 'client-123',
-      uid: 'agent@example.com',
-    });
-    const xhr = buildXhr();
-
-    setDirectUploadAuthHeaders(xhr);
-
-    expect(xhr.setRequestHeader).not.toHaveBeenCalled();
-  });
-});

app/javascript/dashboard/helper/specs/editorContentHelper.spec.js

@@ -94,56 +94,16 @@ describe('getContentNode', () => {
   });
 
   describe('getVariableNode', () => {
-    it('should render the resolved value directly when the variable has a value', () => {
-      getContentNode(
-        editorView,
-        'variable',
-        'contact.name',
-        { from: 0, to: 10 },
-        { 'contact.name': 'John' }
-      );
+    it('should create a variable node', () => {
+      const content = 'name';
+      const from = 0;
+      const to = 10;
+      getContentNode(editorView, 'variable', content, {
+        from,
+        to,
+      });
 
-      expect(editorView.state.schema.text).toHaveBeenCalledWith('John');
-    });
-
-    it('should resolve camelCase custom attributes and non-string values', () => {
-      getContentNode(
-        editorView,
-        'variable',
-        'contact.custom_attribute.cloudCustomer',
-        { from: 0, to: 10 },
-        { 'contact.custom_attribute.cloudCustomer': true }
-      );
-
-      expect(editorView.state.schema.text).toHaveBeenCalledWith('true');
-    });
-
-    it('should keep the placeholder when the variable has no value', () => {
-      getContentNode(
-        editorView,
-        'variable',
-        'contact.email',
-        { from: 0, to: 10 },
-        {}
-      );
-
-      expect(editorView.state.schema.text).toHaveBeenCalledWith(
-        '{{contact.email}}'
-      );
-    });
-
-    it('should keep the placeholder when the value contains Liquid syntax', () => {
-      getContentNode(
-        editorView,
-        'variable',
-        'contact.name',
-        { from: 0, to: 10 },
-        { 'contact.name': '{{agent.email}}' }
-      );
-
-      expect(editorView.state.schema.text).toHaveBeenCalledWith(
-        '{{contact.name}}'
-      );
+      expect(editorView.state.schema.text).toHaveBeenCalledWith('{{name}}');
     });
   });
 

app/javascript/dashboard/helper/specs/editorHelper.spec.js

@@ -11,12 +11,9 @@ import {
   calculateMenuPosition,
   cleanSignature,
   collapseSelection,
-  createVariableInputRule,
   extractTextFromMarkdown,
   findNodeToInsertImage,
   findSignatureInBody,
-  getAgentVariables,
-  getContactVariables,
   getContentNode,
   getFormattingForEditor,
   getMenuAnchor,
@@ -1231,149 +1228,3 @@ describe('Menu positioning helpers', () => {
     });
   });
 });
-
-describe('getAgentVariables', () => {
-  it('builds agent variables from the user', () => {
-    expect(
-      getAgentVariables({ name: 'John Doe', email: 'john@example.com' })
-    ).toEqual({
-      'agent.name': 'John Doe',
-      'agent.first_name': 'John',
-      'agent.last_name': 'Doe',
-      'agent.email': 'john@example.com',
-    });
-  });
-
-  it('normalizes casing like the backend UserDrop (Ruby capitalize)', () => {
-    const variables = getAgentVariables({ name: 'JANE doE' });
-
-    expect(variables['agent.name']).toBe('Jane Doe');
-    expect(variables['agent.first_name']).toBe('Jane');
-    expect(variables['agent.last_name']).toBe('Doe');
-  });
-
-  it('ignores extra whitespace between words', () => {
-    expect(getAgentVariables({ name: '  john   doe ' })['agent.name']).toBe(
-      'John Doe'
-    );
-  });
-
-  it('leaves last_name empty for single-word names', () => {
-    const variables = getAgentVariables({ name: 'john' });
-
-    expect(variables['agent.first_name']).toBe('John');
-    expect(variables['agent.last_name']).toBe('');
-  });
-
-  it('handles a missing name', () => {
-    const variables = getAgentVariables({ email: 'john@example.com' });
-
-    expect(variables['agent.name']).toBe('');
-    expect(variables['agent.first_name']).toBe('');
-    expect(variables['agent.last_name']).toBe('');
-  });
-});
-
-describe('getContactVariables', () => {
-  it('normalizes casing like the backend ContactDrop (Ruby capitalize)', () => {
-    expect(getContactVariables({ name: 'JANE doE' })).toEqual({
-      'contact.name': 'Jane Doe',
-      'contact.first_name': 'Jane',
-      'contact.last_name': 'Doe',
-    });
-  });
-
-  it('leaves last_name empty for single-word names', () => {
-    const variables = getContactVariables({ name: 'john' });
-
-    expect(variables['contact.first_name']).toBe('John');
-    expect(variables['contact.last_name']).toBe('');
-  });
-
-  it('handles a missing contact', () => {
-    expect(getContactVariables(undefined)['contact.name']).toBe('');
-  });
-});
-
-describe('createVariableInputRule', () => {
-  // Editor holding `{{key}` so we can simulate typing the final `}`.
-  const buildView = (typed, { isPrivate = false, variables = {} } = {}) => {
-    const plugin = createVariableInputRule({
-      isPrivate: () => isPrivate,
-      getVariables: () => variables,
-    });
-    const state = EditorState.create({
-      schema,
-      doc: schema.node('doc', null, [
-        schema.node('paragraph', null, [schema.text(typed)]),
-      ]),
-      plugins: [plugin],
-    });
-    return new EditorView(document.body, { state });
-  };
-
-  // Types the closing `}`; when the rule declines, insert it like the browser would.
-  const typeClosingBrace = view => {
-    const end = view.state.doc.content.size - 1;
-    const handled = view.someProp('handleTextInput', fn =>
-      fn(view, end, end, '}')
-    );
-    if (!handled) {
-      view.dispatch(view.state.tr.insertText('}', end, end));
-    }
-  };
-
-  it('resolves a manually typed {{variable}} to its value on the closing brace', () => {
-    const view = buildView('{{contact.name}', {
-      variables: { 'contact.name': 'John' },
-    });
-
-    typeClosingBrace(view);
-
-    expect(view.state.doc.textContent).toBe('John');
-    view.destroy();
-  });
-
-  it('resolves boolean/non-string values', () => {
-    const view = buildView('{{contact.custom_attribute.cloudCustomer}', {
-      variables: { 'contact.custom_attribute.cloudCustomer': true },
-    });
-
-    typeClosingBrace(view);
-
-    expect(view.state.doc.textContent).toBe('true');
-    view.destroy();
-  });
-
-  it('keeps the placeholder when the variable has no value', () => {
-    const view = buildView('{{contact.email}', { variables: {} });
-
-    typeClosingBrace(view);
-
-    expect(view.state.doc.textContent).toBe('{{contact.email}}');
-    view.destroy();
-  });
-
-  it('keeps the placeholder when the value itself contains Liquid syntax', () => {
-    const view = buildView('{{contact.name}', {
-      variables: { 'contact.name': '{{agent.email}}' },
-    });
-
-    typeClosingBrace(view);
-
-    expect(view.state.doc.textContent).toBe('{{contact.name}}');
-    view.destroy();
-  });
-
-  it('does not resolve inside a private note', () => {
-    const view = buildView('{{contact.name}', {
-      isPrivate: true,
-      variables: { 'contact.name': 'John' },
-    });
-
-    typeClosingBrace(view);
-
-    expect(view.state.doc.textContent).toBe('{{contact.name}}');
-    view.destroy();
-  });
-});

app/javascript/dashboard/helper/specs/portalHelper.spec.js

@@ -74,34 +74,26 @@ describe('PortalHelper', () => {
   });
 
   describe('buildLocaleMenuItems', () => {
-    it('disables other actions but keeps content actions enabled for the default locale', () => {
+    it('disables other actions but keeps customize enabled for the default locale', () => {
       const items = buildLocaleMenuItems({ isDefault: true, isDraft: false });
-      const enabledActions = ['customize-content', 'select-popular-content'];
+      const customize = items.find(item => item.action === 'customize-content');
 
-      enabledActions.forEach(action => {
-        expect(
-          items.find(item => item.action === action)?.disabled
-        ).toBeFalsy();
-      });
+      expect(customize).toBeTruthy();
+      expect(customize.disabled).toBeFalsy();
       expect(
         items
-          .filter(item => !enabledActions.includes(item.action))
+          .filter(item => item.action !== 'customize-content')
           .every(item => item.disabled)
       ).toBe(true);
     });
 
-    it('returns publish, customize, popular content, and delete actions for draft locales', () => {
+    it('returns publish, customize, and delete actions for draft locales', () => {
       expect(
         buildLocaleMenuItems({
           isDefault: false,
           isDraft: true,
         }).map(({ action }) => action)
-      ).toEqual([
-        'publish-locale',
-        'customize-content',
-        'select-popular-content',
-        'delete',
-      ]);
+      ).toEqual(['publish-locale', 'customize-content', 'delete']);
     });
 
     it('returns default, draft, customize, and delete actions for live locales', () => {
@@ -114,7 +106,6 @@ describe('PortalHelper', () => {
         'change-default',
         'move-to-draft',
         'customize-content',
-        'select-popular-content',
         'delete',
       ]);
     });

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -44,8 +44,6 @@
     "TWILIO_WHATSAPP_CAN_REPLY": "You can only reply to this conversation using a template message due to",
     "TWILIO_WHATSAPP_24_HOURS_WINDOW": "24 hour message window restriction",
     "OLD_INSTAGRAM_INBOX_REPLY_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. All new messages will show up there. You won’t be able to send messages from this conversation anymore.",
-    "INSTAGRAM_RESTRICTION_BANNER": "Instagram is currently restricted. Some messages or actions may be delayed or unavailable while we restore full support.",
-    "INSTAGRAM_RESTRICTION_STATUS_LINK": "View status update",
     "REPLYING_TO": "You are replying to:",
     "REMOVE_SELECTION": "Remove Selection",
     "DOWNLOAD": "Download",
@@ -484,7 +482,7 @@
     "REMANING_PARTICIPANT_TEXT": "+{count} other",
     "TOTAL_PARTICIPANTS_TEXT": "{count} people are participating.",
     "TOTAL_PARTICIPANT_TEXT": "{count} person is participating.",
-    "NO_PARTICIPANTS_TEXT": "No one is participating!",
+    "NO_PARTICIPANTS_TEXT": "No one is participating!.",
     "WATCH_CONVERSATION": "Join conversation",
     "YOU_ARE_WATCHING": "You are participating",
     "API": {

app/javascript/dashboard/i18n/locale/en/helpCenter.json

@@ -533,8 +533,6 @@
             "PUBLISHED": "Published",
             "ARCHIVED": "Archived"
           },
-          "PENDING_EDITS": "Unpublished edits",
-          "PENDING_EDITS_TOOLTIP": "This published article has unpublished edits",
           "CATEGORY": {
             "UNCATEGORISED": "Uncategorised"
           }
@@ -618,8 +616,6 @@
         "DELETE": "Delete",
         "STATUS_SUCCESS": "Articles updated successfully",
         "STATUS_ERROR": "Failed to update articles",
-        "STATUS_SKIPPED": "1 article with unpublished edits was skipped — open it to publish or discard. | {count} articles with unpublished edits were skipped — open them to publish or discard.",
-        "STATUS_SKIPPED_ALL": "These articles have unpublished edits — open each to publish or discard.",
         "CATEGORY_SUCCESS": "Articles moved successfully",
         "CATEGORY_ERROR": "Failed to move articles",
         "DELETE_CONFIRM_TITLE": "Delete article | Delete {count} articles",
@@ -720,33 +716,9 @@
           "MOVE_TO_DRAFT": "Move to draft",
           "PUBLISH_LOCALE": "Publish locale",
           "CUSTOMIZE_CONTENT": "Localize content",
-          "SELECT_POPULAR_CONTENT": "Select recommended content",
           "DELETE": "Delete"
         }
       },
-      "POPULAR_CONTENT_DIALOG": {
-        "TITLE": "Recommended content",
-        "DESCRIPTION": "Pick up to 3 categories and 6 articles to feature on this locale's help center home page. Drag them into the order you want visitors to see.",
-        "SEARCH": "Search...",
-        "EMPTY": "No matching results",
-        "ADD_ANOTHER": "Add another...",
-        "SLOTS_LEFT": "{count} slots left",
-        "OVERRIDING_DEFAULTS": "Overriding defaults for this locale",
-        "CONFIRM": "Save recommendations",
-        "CATEGORIES": {
-          "LABEL": "Recommended categories",
-          "ARTICLES_COUNT": "No articles | {count} article | {count} articles"
-        },
-        "ARTICLES": {
-          "LABEL": "Recommended articles",
-          "IN_CATEGORY": "in {category}",
-          "UNCATEGORIZED": "Uncategorized"
-        },
-        "API": {
-          "SUCCESS_MESSAGE": "Recommended content updated successfully",
-          "ERROR_MESSAGE": "Unable to update recommended content. Try again."
-        }
-      },
       "CONTENT_DIALOG": {
         "TITLE": "Localize content",
         "DESCRIPTION": "Set values specific to this locale. Anything left blank falls back to the default locale.",
@@ -791,30 +763,10 @@
         },
         "PREVIEW": "Preview",
         "PUBLISH": "Publish",
-        "PUBLISH_CHANGES": "Publish changes",
-        "PUBLISH_CHANGES_SUCCESS": "Changes published successfully",
-        "PUBLISH_CHANGES_ERROR": "Could not publish changes",
-        "SAVE_IN_PROGRESS": "Still saving your latest changes — please try again in a moment.",
-        "DISCARD_CHANGES": "Discard changes",
-        "DISCARD_CHANGES_SUCCESS": "Changes discarded",
-        "DISCARD_CHANGES_ERROR": "Could not discard changes",
-        "PENDING_CHANGES": "Pending changes",
-        "VIEW_CHANGES": "View unpublished changes",
         "DRAFT": "Draft",
         "ARCHIVE": "Archive",
         "BACK_TO_ARTICLES": "Back to articles"
       },
-      "PENDING_CHANGES_POPOVER": {
-        "TITLE": "Unpublished changes",
-        "DESCRIPTION": "This article has draft changes that aren't live yet. Apply them before changing the status, or discard them?",
-        "APPLY": "Apply changes",
-        "DISCARD": "Discard changes"
-      },
-      "DIFF_DIALOG": {
-        "TITLE": "Unpublished changes",
-        "DESCRIPTION": "Compare your draft against the version that's currently live.",
-        "TITLE_LABEL": "Title"
-      },
       "EDIT_ARTICLE": {
         "MORE_PROPERTIES": "More properties",
         "UNCATEGORIZED": "Uncategorized",

app/javascript/dashboard/i18n/locale/en/inboxMgmt.json

@@ -58,9 +58,7 @@
         "ERROR_MESSAGE": "There was an error connecting to Instagram, please try again",
         "ERROR_AUTH": "There was an error connecting to Instagram, please try again",
         "NEW_INBOX_SUGGESTION": "This Instagram account was previously linked to a different inbox and has now been migrated here. All new messages will appear here. The old inbox will no longer be able to send or receive messages for this account.",
-        "DUPLICATE_INBOX_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. You won’t be able to send/receive Instagram messages from this inbox anymore.",
-        "SETTINGS_RESTRICTED_WARNING": "Instagram is currently restricted. Some messages or actions may be delayed or unavailable while we restore full support.",
-        "STATUS_LINK": "View status update"
+        "DUPLICATE_INBOX_BANNER": "This Instagram account was migrated to the new Instagram channel inbox. You won’t be able to send/receive Instagram messages from this inbox anymore."
       },
       "TIKTOK": {
         "CONTINUE_WITH_TIKTOK": "Continue with TikTok",
@@ -817,15 +815,6 @@
       "WHATSAPP_EMBEDDED_SIGNUP_SUBHEADER": "This inbox is connected through WhatsApp embedded signup.",
       "WHATSAPP_EMBEDDED_SIGNUP_DESCRIPTION": "You can reconfigure this inbox to update your WhatsApp Business settings.",
       "WHATSAPP_RECONFIGURE_BUTTON": "Reconfigure",
-      "WHATSAPP_MANUAL_TRANSFER_TITLE": "Switch to Manual Setup",
-      "WHATSAPP_MANUAL_TRANSFER_SUBHEADER": "This inbox was connected through WhatsApp embedded signup, which is no longer supported. Enter the WhatsApp Cloud API credentials from your own Meta app to switch this inbox to a manual setup. Configure the webhook in your Meta app using the verification token above before switching.",
-      "WHATSAPP_MANUAL_TRANSFER_PHONE_NUMBER_ID_LABEL": "Phone Number ID",
-      "WHATSAPP_MANUAL_TRANSFER_BUSINESS_ACCOUNT_ID_LABEL": "Business Account ID",
-      "WHATSAPP_MANUAL_TRANSFER_API_KEY_LABEL": "API Key",
-      "WHATSAPP_MANUAL_TRANSFER_API_KEY_PLACEHOLDER": "Enter a permanent access token from your Meta app",
-      "WHATSAPP_MANUAL_TRANSFER_BUTTON": "Switch to Manual Setup",
-      "WHATSAPP_MANUAL_TRANSFER_SUCCESS": "Inbox switched to manual setup successfully.",
-      "WHATSAPP_MANUAL_TRANSFER_ERROR": "Could not switch to manual setup. Please verify the credentials and try again.",
       "WHATSAPP_CONNECT_TITLE": "Connect to WhatsApp Business",
       "WHATSAPP_CONNECT_SUBHEADER": "Upgrade to WhatsApp embedded signup for easier management.",
       "WHATSAPP_CONNECT_DESCRIPTION": "Connect this inbox to WhatsApp Business for enhanced features and easier management.",
@@ -843,70 +832,6 @@
       "WHATSAPP_TEMPLATES_SYNC_SUBHEADER": "Manually sync message templates from WhatsApp to update your available templates.",
       "WHATSAPP_TEMPLATES_SYNC_BUTTON": "Sync Templates",
       "WHATSAPP_TEMPLATES_SYNC_SUCCESS": "Templates sync initiated successfully. It may take a couple of minutes to update.",
-      "WHATSAPP_MANUAL_MIGRATION": {
-        "BANNER": {
-          "TITLE": "Manual setup recommended",
-          "DESCRIPTION": "This inbox connects through the shared Meta app used for embedded signup, which recent Meta restrictions have affected. To avoid similar issues in the future, we recommend reconnecting it with your own Meta app.",
-          "START": "Start manual migration",
-          "GUIDE": "View guide"
-        },
-        "DIALOG": {
-          "EYEBROW": "WhatsApp manual migration",
-          "TITLE": "Reconnect WhatsApp inbox",
-          "CLOSE": "Close",
-          "ACTION_REQUIRED_TITLE": "Reconnect with your own Meta app",
-          "ACTION_REQUIRED_DESCRIPTION": "Inboxes connected through your own Meta app are not affected by restrictions on the shared embedded signup app. This guided flow updates the WhatsApp API connection without creating a new inbox.",
-          "GUIDE_LINK": "Open the manual setup guide",
-          "PRESERVED_TITLE": "Preserved",
-          "PRESERVED_DESCRIPTION": "Conversations, contacts, collaborators, routing, business hours, and inbox settings.",
-          "UPDATED_TITLE": "Updated",
-          "UPDATED_DESCRIPTION": "WABA ID, phone number ID, access token, and webhook configuration.",
-          "WABA_ID": "WABA ID",
-          "WABA_PLACEHOLDER": "Enter WABA ID",
-          "WABA_HELP": "The WhatsApp Business Account that owns this phone number.",
-          "PHONE_NUMBER_ID": "Phone Number ID",
-          "PHONE_NUMBER_PLACEHOLDER": "Enter Phone Number ID",
-          "PHONE_NUMBER_HELP": "Meta's unique ID for the WhatsApp number connected to this inbox.",
-          "DISPLAY_PHONE_NUMBER": "Display phone number",
-          "DISPLAY_PHONE_NUMBER_PLACEHOLDER": "Enter display phone number",
-          "DISPLAY_PHONE_NUMBER_HELP": "The customer-facing WhatsApp number. This cannot be changed during migration.",
-          "ACCESS_TOKEN": "Permanent access token or system user token",
-          "ACCESS_TOKEN_PLACEHOLDER": "Paste access token",
-          "TOKEN_HELP_PREFIX": "The token must include",
-          "TOKEN_HELP_MIDDLE": "Add",
-          "TOKEN_HELP_SUFFIX": "for template sync and template management.",
-          "MESSAGING_PERMISSION": "whatsapp_business_messaging.",
-          "MANAGEMENT_PERMISSION": "whatsapp_business_management",
-          "REVIEW_TITLE": "Review before reconnecting",
-          "INBOX": "Inbox",
-          "PHONE_NUMBER": "Phone number",
-          "NOT_ENTERED": "Not entered",
-          "VERIFY_NOTICE": "Chatwoot will verify these credentials with Meta before applying any changes. If verification fails, the current configuration is left untouched.",
-          "BACK": "Back",
-          "CANCEL": "Cancel",
-          "CONTINUE": "Continue",
-          "REVIEW_MIGRATION": "Review migration",
-          "RECONNECT": "Reconnect WhatsApp inbox"
-        },
-        "STEPS": {
-          "BEFORE_YOU_START": {
-            "TITLE": "Before you start",
-            "DESCRIPTION": "This reconnects the WhatsApp API details for this inbox. Conversations, collaborators, routing, business hours, CSAT, and bot settings will be preserved."
-          },
-          "BUSINESS_DETAILS": {
-            "TITLE": "Business details",
-            "DESCRIPTION": "Enter the WhatsApp assets from the customer Meta Business account."
-          },
-          "ACCESS_TOKEN": {
-            "TITLE": "Access token",
-            "DESCRIPTION": "Paste a permanent access token or system user token with WhatsApp permissions."
-          },
-          "REVIEW_MIGRATION": {
-            "TITLE": "Review migration",
-            "DESCRIPTION": "Confirm the connection details before reconnecting this inbox. Chatwoot will verify the token, WABA, and phone number with Meta before applying changes."
-          }
-        }
-      },
       "WHATSAPP_CALLING_ENABLED": {
         "LABEL": "Enable voice calling",
         "DESCRIPTION": "Allow agents to start and receive WhatsApp voice calls on this inbox. Available only on embedded-signup WhatsApp Cloud channels with calling permission granted by Meta."

app/javascript/dashboard/i18n/locale/en/integrations.json

@@ -31,13 +31,6 @@
     "WEBHOOK": {
       "SUBSCRIBED_EVENTS": "Subscribed Events",
       "LEARN_MORE": "Learn more about webhooks",
-      "PAYWALL": {
-        "TITLE": "Webhooks are available on paid plans",
-        "AVAILABLE_ON": "Use webhooks to receive real-time events from your Chatwoot account.",
-        "UPGRADE_PROMPT": "Upgrade to the Startups, Business, or Enterprise plan to use webhooks.",
-        "UPGRADE_NOW": "Upgrade now",
-        "CANCEL_ANYTIME": "Change or cancel your plan anytime."
-      },
       "SECRET": {
         "LABEL": "Secret",
         "COPY": "Copy secret to clipboard",
@@ -446,13 +439,6 @@
           "HINT": "Average replies the assistant sends per conversation."
         }
       },
-      "DRILLDOWN": {
-        "CLOSE": "Close details",
-        "EMPTY": "No records found for this metric.",
-        "ERROR": "Could not load records. Please try again.",
-        "LOAD_MORE": "Load more",
-        "RESULT_COUNT_CONVERSATION": "{count} conversation | {count} conversations"
-      },
       "KNOWLEDGE": {
         "TITLE": "Knowledge coverage",
         "COVERAGE": "{pct}% approved",
@@ -460,6 +446,17 @@
         "PENDING": "Pending FAQs",
         "DOCUMENTS": "Documents"
       },
+      "FLAGGED": {
+        "TITLE": "Response quality",
+        "TOTAL": "{count} flagged · {rate}"
+      },
+      "CREDITS": {
+        "TITLE": "Credit usage",
+        "UNIT": "credits",
+        "LEGEND": "Daily credits used",
+        "AXIS_START": "{count}d ago",
+        "AXIS_END": "Today"
+      },
       "LINKS": {
         "DOCS": {
           "TITLE": "Captain docs",
@@ -473,6 +470,13 @@
           "TITLE": "Billing",
           "DESCRIPTION": "Manage credits and plan"
         }
+      },
+      "FLAG_REASONS": {
+        "INCORRECT": "Incorrect info",
+        "INCOMPLETE": "Incomplete",
+        "OUTDATED": "Outdated",
+        "INAPPROPRIATE": "Inappropriate",
+        "OTHER": "Other"
       }
     },
     "ASSISTANT_SWITCHER": {
@@ -818,7 +822,6 @@
     "DOCUMENTS": {
       "HEADER": "Documents",
       "ADD_NEW": "Create a new document",
-      "FAQ_COUNT": "{n} FAQ | {n} FAQs",
       "SELECTED": "{count} selected",
       "SELECT_ALL": "Select all ({count})",
       "UNSELECT_ALL": "Unselect all ({count})",
@@ -878,27 +881,7 @@
       },
       "RELATED_RESPONSES": {
         "TITLE": "Related FAQs",
-        "EMPTY": "No FAQs have been generated from this document yet."
-      },
-      "DETAILS": {
-        "DESCRIPTION": "Review the crawled content and the FAQs generated from this source.",
-        "SOURCE": "Source",
-        "GENERATED_FAQS": "Generated FAQs",
-        "LAST_UPDATED": "Last updated",
-        "NOT_AVAILABLE": "Not available",
-        "CONTENT_TAB": "Crawled content",
-        "PDF_TAB": "PDF details",
-        "CONTENT_TITLE": "Crawled content",
-        "PDF_TITLE": "PDF file",
-        "PDF_DESCRIPTION": "Review the original PDF source.",
-        "CHARACTER_COUNT": "{count} characters extracted",
-        "COPY_CONTENT": "Copy",
-        "COPY_SUCCESS": "Crawled content copied to clipboard",
-        "COPY_ERROR": "Could not copy crawled content",
-        "VIEW_RAW": "View raw",
-        "VIEW_PREVIEW": "View preview",
-        "UNREADABLE_CONTENT": "Readable content could not be extracted from this document. You can view the raw extracted content.",
-        "EMPTY_CONTENT": "No crawled content is available for this document yet."
+        "DESCRIPTION": "These FAQs are generated directly from the document."
       },
       "FORM_DESCRIPTION": "Enter the URL of the document to add it as a knowledge source and choose the assistant to associate it with.",
       "CREATE": {
@@ -939,7 +922,7 @@
       },
 
       "OPTIONS": {
-        "VIEW_DETAILS": "View details",
+        "VIEW_RELATED_RESPONSES": "View Related Responses",
         "SYNC_NOW": "Refresh now",
         "RETRY_SYNC": "Retry refresh",
         "DELETE_DOCUMENT": "Delete Document"

app/javascript/dashboard/i18n/locale/en/settings.json

@@ -100,7 +100,6 @@
       "ACCESS_TOKEN": {
         "TITLE": "Access Token",
         "NOTE": "This token can be used if you are building an API based integration",
-        "PAID_PLAN_NOTE": "API access tokens are available on paid plans.",
         "COPY": "Copy",
         "RESET": "Reset",
         "CONFIRM_RESET": "Are you sure?",
@@ -264,7 +263,7 @@
     "EMAIL_VERIFICATION_SENT": "Verification email has been sent. Please check your inbox.",
     "ACCOUNT_SUSPENDED": {
       "TITLE": "Account Suspended",
-      "MESSAGE": "Your account has been suspended due to activity that may violate our policies. If you believe this is a mistake, please contact our support team."
+      "MESSAGE": "Your account is suspended. Please reach out to the support team for more information."
     },
     "NO_ACCOUNTS": {
       "TITLE": "No account found",
@@ -341,7 +340,6 @@
     "NOTIFICATIONS": "Notifications",
     "CANNED_RESPONSES": "Canned Responses",
     "INTEGRATIONS": "Integrations",
-    "DATA": "Data",
     "PROFILE_SETTINGS": "Profile Settings",
     "ACCOUNT_SETTINGS": "Account Settings",
     "APPLICATIONS": "Applications",
@@ -413,104 +411,6 @@
     "CAPTAIN_AI": "Captain",
     "CONVERSATION_WORKFLOW": "Conversation Workflow"
   },
-  "DATA_IMPORTS": {
-    "HEADER": "Data",
-    "DESCRIPTION": "Bring your existing contacts and past conversations into this account from another support tool. Each import runs in the background, so you can keep working while it finishes, track its progress, and review anything that was skipped along the way.",
-    "LOADING": "Fetching imports",
-    "DEFAULT_IMPORT_NAME": "Intercom import",
-    "TABS": {
-      "IMPORT": "Import",
-      "EXPORT": "Export"
-    },
-    "TYPES": {
-      "CONTACTS": "Contacts",
-      "CONVERSATIONS": "Conversations",
-      "MESSAGES": "Messages"
-    },
-    "DRAWER": {
-      "TITLE": "New import",
-      "SOURCE": "Source",
-      "NAME": "Import name",
-      "NAME_PLACEHOLDER": "July Intercom migration",
-      "ACCESS_KEY": "Intercom access key",
-      "ACCESS_KEY_PLACEHOLDER": "Paste your Intercom access key",
-      "DATA_TYPES": "Data to import",
-      "VALIDATING": "Validating access key...",
-      "VALID_KEY": "Access key validated.",
-      "INVALID_KEY": "Could not validate this access key.",
-      "ACTIVE_IMPORT": "Wait for the active import to finish before starting another one.",
-      "CANCEL": "Cancel",
-      "IMPORT": "Import"
-    },
-    "EXPORT": {
-      "TITLE": "Exports are on the way",
-      "DESCRIPTION": "Export your contacts and conversations out of this account. This workflow is coming soon.",
-      "COMING_SOON": "Coming soon"
-    },
-    "TABLE": {
-      "TITLE": "Recent imports",
-      "EMPTY": "No imports yet",
-      "EMPTY_DESCRIPTION": "Start an import to bring your existing customer history into this account.",
-      "NEW_IMPORT": "Import",
-      "COUNT": "{count} imports",
-      "UNNAMED": "Untitled import",
-      "IMPORTED_COUNT": "{count} imported",
-      "VIEW": "View import",
-      "NAME": "Name",
-      "TYPE": "Type",
-      "STATUS": "Status",
-      "IMPORTED": "Imported",
-      "CREATED": "Created",
-      "ABANDON": "Abandon"
-    },
-    "DETAIL": {
-      "BACK": "Back to imports",
-      "ERRORS": "Errors",
-      "SKIP_LOGS": "Skip logs",
-      "SOURCE": "Source",
-      "IMPORT_TYPES": "Import types",
-      "CREATED": "Created",
-      "DURATION": "Duration",
-      "INITIATED_BY": "Started by",
-      "PROGRESS": "Import progress",
-      "PROGRESS_WITH_TOTAL": "{imported} of {total} imported",
-      "PROGRESS_WITHOUT_TOTAL": "{imported} imported",
-      "PROGRESS_OF_TOTAL": "of {total} imported",
-      "PROGRESS_IMPORTED": "imported",
-      "LAST_UPDATED_TOOLTIP": "Last updated {time}",
-      "NO_SKIP_LOGS": "No skipped or failed records recorded.",
-      "DOWNLOAD_SKIP_LOGS": "Download CSV",
-      "DOWNLOAD_ERROR_LOGS": "Download CSV",
-      "ALL_SKIP_LOGS": "All",
-      "KIND": "Kind",
-      "NO_ERRORS": "No errors recorded.",
-      "ERROR_CODE": "Code",
-      "SOURCE_OBJECT": "Source object",
-      "MESSAGE": "Message"
-    },
-    "MONITOR": {
-      "LIVE": "Live updates every {seconds}s",
-      "LAST_UPDATED": "Last updated {time}",
-      "REFRESH": "Refresh",
-      "REFRESHING": "Refreshing",
-      "STAGES": {
-        "unknown": "Waiting for update",
-        "queued": "Queued",
-        "contacts": "Importing contacts",
-        "conversations": "Importing conversations",
-        "finalizing": "Finalizing import",
-        "completed": "Completed",
-        "completed_with_errors": "Completed with errors",
-        "failed": "Failed",
-        "abandoned": "Abandoned"
-      }
-    },
-    "ALERTS": {
-      "IMPORT_STARTED": "Intercom import has started.",
-      "IMPORT_ABANDONED": "Intercom import has been abandoned.",
-      "IMPORT_FAILED": "Could not start the Intercom import."
-    }
-  },
   "CAPTAIN_SETTINGS": {
     "TITLE": "Captain Settings",
     "DESCRIPTION": "Configure your AI models and features for Captain. Captain follows a credit based billing, you will be charged credits for every action Captain takes based on the model selected.",

app/javascript/dashboard/mixins/fileUploadMixin.js

@@ -3,7 +3,6 @@ import { useAlert } from 'dashboard/composables';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
 import { DirectUpload } from 'activestorage';
-import { setDirectUploadAuthHeaders } from 'dashboard/helper/directUploadsHelper';
 import {
   DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE,
   resolveMaximumFileUploadSize,
@@ -78,7 +77,10 @@ export default {
         `/api/v1/accounts/${this.accountId}/conversations/${this.currentChat.id}/direct_uploads`,
         {
           directUploadWillCreateBlobWithXHR: xhr => {
-            setDirectUploadAuthHeaders(xhr);
+            xhr.setRequestHeader(
+              'api_access_token',
+              this.currentUser.access_token
+            );
           },
         }
       );

app/javascript/dashboard/routes/dashboard/captain/assistants/overview/Index.vue

@@ -3,7 +3,6 @@ import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { usePolicy } from 'dashboard/composables/usePolicy';
 import CaptainAssistant from 'dashboard/api/captain/assistant';
 
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
@@ -11,7 +10,6 @@ import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Pay
 import RangeSelector from 'dashboard/components-next/captain/pageComponents/overview/RangeSelector.vue';
 import WelcomeCard from 'dashboard/components-next/captain/pageComponents/overview/WelcomeCard.vue';
 import MetricCard from 'dashboard/components-next/captain/pageComponents/overview/MetricCard.vue';
-import AssistantDrilldownDrawer from 'dashboard/components-next/captain/pageComponents/overview/AssistantDrilldownDrawer.vue';
 import KnowledgeCard from 'dashboard/components-next/captain/pageComponents/overview/KnowledgeCard.vue';
 import QuickLinks from 'dashboard/components-next/captain/pageComponents/overview/QuickLinks.vue';
 import InboxBanner from 'dashboard/components-next/captain/pageComponents/overview/InboxBanner.vue';
@@ -19,9 +17,6 @@ import CoverageBanner from 'dashboard/components-next/captain/pageComponents/ove
 
 const { t } = useI18n();
 const route = useRoute();
-// Drilldown is admin-only; the backend policy enforces the same restriction.
-const { checkPermissions } = usePolicy();
-const canDrilldown = computed(() => checkPermissions(['administrator']));
 
 const selectedRange = ref('this_month');
 
@@ -74,38 +69,34 @@ const metricFor = (statKey, formatValue, direction, trendKind = 'percent') => {
 const metrics = computed(() => [
   {
     key: 'handled',
-    metric: 'conversations_handled',
     label: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HANDLED.HINT'),
     ...metricFor('conversations_handled', v => v.toLocaleString(), 'up'),
   },
   {
     key: 'autoResolution',
-    metric: 'auto_resolution_rate',
     label: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.AUTO_RESOLUTION.HINT'),
     ...metricFor('auto_resolution_rate', v => `${v}%`, 'up', 'point'),
   },
   {
     key: 'handoff',
-    metric: 'handoff_rate',
     label: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HANDOFF.HINT'),
     ...metricFor('handoff_rate', v => `${v}%`, 'down', 'point'),
   },
-  {
-    key: 'reopen',
-    metric: 'reopen_rate',
-    label: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.LABEL'),
-    hint: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.HINT'),
-    ...metricFor('reopen_rate', v => `${v}%`, 'down', 'point'),
-  },
   {
     key: 'hoursSaved',
     label: t('CAPTAIN.OVERVIEW.METRICS.HOURS_SAVED.LABEL'),
     hint: t('CAPTAIN.OVERVIEW.METRICS.HOURS_SAVED.HINT'),
     ...metricFor('hours_saved', formatDuration, 'up'),
   },
+  {
+    key: 'reopen',
+    label: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.LABEL'),
+    hint: t('CAPTAIN.OVERVIEW.METRICS.REOPEN.HINT'),
+    ...metricFor('reopen_rate', v => `${v}%`, 'down', 'point'),
+  },
   {
     key: 'depth',
     label: t('CAPTAIN.OVERVIEW.METRICS.DEPTH.LABEL'),
@@ -118,22 +109,6 @@ const metrics = computed(() => [
     ),
   },
 ]);
-
-const drilldown = ref({ metric: '', label: '', value: '' });
-const isDrilldownOpen = ref(false);
-
-const openDrilldown = metric => {
-  drilldown.value = {
-    metric: metric.metric,
-    label: metric.label,
-    value: metric.value,
-  };
-  isDrilldownOpen.value = true;
-};
-
-const closeDrilldown = () => {
-  isDrilldownOpen.value = false;
-};
 </script>
 
 <template>
@@ -169,8 +144,6 @@ const closeDrilldown = () => {
             :trend="metric.trend"
             :hint="metric.hint"
             :trend-good="metric.trendGood"
-            :clickable="canDrilldown && Boolean(metric.metric)"
-            @click="openDrilldown(metric)"
           />
         </div>
 
@@ -178,17 +151,6 @@ const closeDrilldown = () => {
 
         <QuickLinks />
       </div>
-
-      <AssistantDrilldownDrawer
-        v-if="canDrilldown"
-        :open="isDrilldownOpen"
-        :assistant-id="assistantId"
-        :metric="drilldown.metric"
-        :metric-name="drilldown.label"
-        :metric-value="drilldown.value"
-        :range="selectedRange"
-        @close="closeDrilldown"
-      />
     </template>
   </PageLayout>
 </template>

app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue

@@ -17,7 +17,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Policy from 'dashboard/components/policy.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
-import DocumentDetails from 'dashboard/components-next/captain/pageComponents/document/DocumentDetails.vue';
+import RelatedResponses from 'dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue';
 import CreateDocumentDialog from 'dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue';
 import DocumentPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue';
 import FeatureSpotlightPopover from 'dashboard/components-next/feature-spotlight/FeatureSpotlightPopover.vue';
@@ -51,22 +51,22 @@ const handleDelete = () => {
   deleteDocumentDialog.value.dialogRef.open();
 };
 
-const showDocumentDetails = ref(false);
+const showRelatedResponses = ref(false);
 const showCreateDialog = ref(false);
 const createDocumentDialog = ref(null);
-const documentDetailsDialog = ref(null);
+const relationQuestionDialog = ref(null);
 
-const handleShowDocumentDetails = () => {
-  showDocumentDetails.value = true;
-  nextTick(() => documentDetailsDialog.value.dialogRef.open());
+const handleShowRelatedDocument = () => {
+  showRelatedResponses.value = true;
+  nextTick(() => relationQuestionDialog.value.dialogRef.open());
 };
 const handleCreateDocument = () => {
   showCreateDialog.value = true;
   nextTick(() => createDocumentDialog.value.dialogRef.open());
 };
 
-const handleDocumentDetailsClose = () => {
-  showDocumentDetails.value = false;
+const handleRelatedResponseClose = () => {
+  showRelatedResponses.value = false;
 };
 
 const handleCreateDialogClose = () => {
@@ -235,8 +235,8 @@ const handleAction = ({ action, id }) => {
   nextTick(() => {
     if (action === 'delete') {
       handleDelete();
-    } else if (action === 'viewDetails') {
-      handleShowDocumentDetails();
+    } else if (action === 'viewRelatedQuestions') {
+      handleShowRelatedDocument();
     } else if (action === 'sync') {
       handleSync(id);
     }
@@ -416,7 +416,6 @@ onUnmounted(() => {
           :last-sync-error-code="doc.last_sync_error_code"
           :sync-in-progress="doc.sync_in_progress"
           :sync-stale-after-hours="syncIntervalHours"
-          :responses-count="doc.responses_count"
           :is-selected="canManageDocuments && bulkSelectedIds.has(doc.id)"
           :selectable="canManageDocuments"
           :show-selection-control="shouldShowSelectionControl(doc.id)"
@@ -428,11 +427,11 @@ onUnmounted(() => {
       </div>
     </template>
 
-    <DocumentDetails
-      v-if="showDocumentDetails"
-      ref="documentDetailsDialog"
+    <RelatedResponses
+      v-if="showRelatedResponses"
+      ref="relationQuestionDialog"
       :captain-document="selectedDocument"
-      @close="handleDocumentDetailsClose"
+      @close="handleRelatedResponseClose"
     />
     <CreateDocumentDialog
       v-if="showCreateDialog"

app/javascript/dashboard/routes/dashboard/helpcenter/pages/PortalsArticlesEditPage.vue

@@ -4,12 +4,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
-import {
-  buildPortalArticleURL,
-  ARTICLE_STATUSES,
-} from 'dashboard/helper/portalHelper';
+import { buildPortalArticleURL } from 'dashboard/helper/portalHelper';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { rendersIdentically } from 'dashboard/helper/articleDiffHelper';
 
 import ArticleEditor from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue';
 
@@ -44,60 +40,13 @@ const articleLink = computed(() => {
   );
 });
 
-// On a published article, title/content edits stage into draft_* columns (kept
-// off the live site). Anywhere else they save straight to the live record — and
-// we drop any leftover draft (e.g. left behind when the card/bulk menu moved a
-// published article to draft) so a later publish can't resurrect stale content.
-const stageDraftFields = values => {
-  if (article.value?.status !== ARTICLE_STATUSES.PUBLISHED) {
-    const hasStaleDraft =
-      article.value?.draftTitle != null || article.value?.draftContent != null;
-    if (!hasStaleDraft) return values;
-    // The editor is showing the staged draft, so promote both fields to the live
-    // record (the field being autosaved wins) before dropping the drafts —
-    // otherwise saving one field would snap the other back to the old live value.
-    return {
-      ...values,
-      title: values.title ?? article.value.draftTitle ?? article.value.title,
-      content:
-        values.content ?? article.value.draftContent ?? article.value.content,
-      draft_title: null,
-      draft_content: null,
-    };
-  }
-
-  const staged = { ...values };
-  ['title', 'content'].forEach(field => {
-    if (field in staged) {
-      staged[`draft_${field}`] = staged[field];
-      delete staged[field];
-    }
-  });
-
-  // Clear the draft when it matches the live version (a revert, or a body edit
-  // the renderer ignores like a blank line) so it doesn't leave a "pending
-  // changes" badge with nothing to compare. The title is shown as raw escaped
-  // text, so compare it exactly; only the body is Markdown, so compare its render.
-  const liveTitle = article.value.title ?? '';
-  const liveContent = article.value.content ?? '';
-  const nextTitle = staged.draft_title ?? article.value.draftTitle ?? liveTitle;
-  const nextContent =
-    staged.draft_content ?? article.value.draftContent ?? liveContent;
-  if (nextTitle === liveTitle && rendersIdentically(liveContent, nextContent)) {
-    staged.draft_title = null;
-    staged.draft_content = null;
-  }
-
-  return staged;
-};
-
 const saveArticle = async ({ ...values }) => {
   isUpdating.value = true;
   try {
     await store.dispatch('articles/update', {
       portalSlug,
       articleId: articleSlug,
-      ...stageDraftFields(values),
+      ...values,
     });
     isSaved.value = true;
   } catch (error) {

app/javascript/dashboard/routes/dashboard/onboarding/inbox-setup/useChannelConfig.js

@@ -1,6 +1,5 @@
 import { useMapGetter } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { IS_WHATSAPP_INBOX_CREATION_DISABLED } from 'dashboard/constants/globals';
 
 // OAuth/SDK channels need installation-level app credentials to be usable. When
 // the credential is missing the channel is "not configured" and is hidden from
@@ -9,25 +8,18 @@ import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 // Mirrors the availability checks in ChannelItem.vue.
 export function useChannelConfig() {
   const globalConfig = useMapGetter('globalConfig/get');
-  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
-  const { isCloudFeatureEnabled } = useAccount();
   const installationConfig = window.chatwootConfig || {};
 
   const CHANNEL_CONFIGURED = {
     // WhatsApp is onboarded only via Meta embedded signup, which needs both the
     // app id (not the 'none' sentinel) and the signup configuration id.
     whatsapp: () =>
-      (!isOnChatwootCloud.value ||
-        isCloudFeatureEnabled(
-          FEATURE_FLAGS.WHATSAPP_EMBEDDED_SIGNUP_INBOX_CREATION
-        )) &&
+      !IS_WHATSAPP_INBOX_CREATION_DISABLED &&
       Boolean(installationConfig.whatsappAppId) &&
       installationConfig.whatsappAppId !== 'none' &&
       Boolean(installationConfig.whatsappConfigurationId),
     facebook: () => Boolean(installationConfig.fbAppId),
-    instagram: () =>
-      Boolean(installationConfig.instagramAppId) &&
-      isCloudFeatureEnabled(FEATURE_FLAGS.CHANNEL_INSTAGRAM),
+    instagram: () => Boolean(installationConfig.instagramAppId),
     tiktok: () => Boolean(installationConfig.tiktokAppId),
     gmail: () => Boolean(installationConfig.googleOAuthClientId),
     outlook: () => Boolean(globalConfig.value.azureAppId),

app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/InboxChannelsDialog.spec.js

@@ -6,9 +6,6 @@ vi.mock('vue-i18n', () => ({ useI18n: () => ({ t: key => key }) }));
 vi.mock('dashboard/composables/store', () => ({
   useMapGetter: () => ({ value: {} }),
 }));
-vi.mock('dashboard/composables/useAccount', () => ({
-  useAccount: () => ({ isCloudFeatureEnabled: () => true }),
-}));
 vi.mock('../../inbox-setup/useChannelConnect', () => ({
   useChannelConnect: () => ({
     connectViaOAuth: vi.fn(),

app/javascript/dashboard/routes/dashboard/onboarding/specs/inbox-setup/useDetectedChannels.spec.js

@@ -6,36 +6,28 @@ import { useDetectedChannels } from '../../inbox-setup/useDetectedChannels';
 
 vi.mock('vue-router');
 
+// Neutralize the temporary WhatsApp kill switch so these specs keep covering
+// the credential-based gating it short-circuits.
+vi.mock('dashboard/constants/globals', async importOriginal => ({
+  ...(await importOriginal()),
+  IS_WHATSAPP_INBOX_CREATION_DISABLED: false,
+}));
+
 // Mounts the composable against a real store and the real useAccount (only
 // useRoute and the underlying getters are faked), so a change to how useAccount
 // resolves the current account is exercised here too. The real ./constants are
 // used, so assertions validate against the actual channel identity (label keys,
 // channel_type, social ordering) derived from CHANNEL_LIST.
-const mountComposable = ({
-  brandInfo,
-  features = { channel_instagram: true },
-  inboxes = [],
-  isOnChatwootCloud = false,
-} = {}) => {
+const mountComposable = ({ brandInfo, inboxes = [] } = {}) => {
   const store = createStore({
     modules: {
-      globalConfig: {
-        namespaced: true,
-        getters: {
-          get: () => ({}),
-          isOnChatwootCloud: () => isOnChatwootCloud,
-        },
-      },
       accounts: {
         namespaced: true,
         getters: {
           getAccount: () => () => ({
             id: 1,
-            features,
             custom_attributes: { brand_info: brandInfo },
           }),
-          isFeatureEnabledonAccount: () => (_accountId, feature) =>
-            Boolean(features[feature]),
         },
       },
       inboxes: {
@@ -210,40 +202,6 @@ describe('useDetectedChannels', () => {
         'line',
       ]);
     });
-
-    it('keeps Instagram available on Chatwoot Cloud when enabled for the account', () => {
-      const { displayedChannels } = mountComposable({
-        isOnChatwootCloud: true,
-        brandInfo: {
-          socials: [
-            { type: 'instagram', url: 'https://instagram.com/acme' },
-            { type: 'tiktok', url: 'https://tiktok.com/@acme' },
-          ],
-        },
-      });
-
-      expect(displayedChannels.value.map(channel => channel.type)).toEqual([
-        'instagram',
-        'tiktok',
-      ]);
-    });
-
-    it('hides Instagram when disabled for the account', () => {
-      const { displayedChannels } = mountComposable({
-        features: { channel_instagram: false },
-        isOnChatwootCloud: true,
-        brandInfo: {
-          socials: [
-            { type: 'instagram', url: 'https://instagram.com/acme' },
-            { type: 'tiktok', url: 'https://tiktok.com/@acme' },
-          ],
-        },
-      });
-
-      expect(displayedChannels.value.map(channel => channel.type)).toEqual([
-        'tiktok',
-      ]);
-    });
   });
 
   describe('remainingChannels', () => {

app/javascript/dashboard/routes/dashboard/settings/components/BaseSettingsHeader.vue

@@ -52,11 +52,9 @@ const helpURL = getHelpUrlForFeature(props.featureName);
       v-if="title"
       class="flex items-center justify-between w-full gap-4 min-h-8 mb-2"
     >
-      <slot name="title">
-        <h1 class="text-heading-1 text-n-slate-12">
-          {{ title }}
-        </h1>
-      </slot>
+      <h1 class="text-heading-1 text-n-slate-12">
+        {{ title }}
+      </h1>
     </div>
     <div
       v-if="description || $slots.description || linkText || helpURL"

app/javascript/dashboard/routes/dashboard/settings/data/Index.vue

@@ -1,378 +0,0 @@
-<script setup>
-import {
-  computed,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  ref,
-} from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import { useStoreGetters } from 'dashboard/composables/store';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
-import SettingsLayout from '../SettingsLayout.vue';
-import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import DataImportsAPI from 'dashboard/api/dataImports';
-import NewImportDialog from './NewImportDialog.vue';
-import { importSourceFor } from './importSources';
-import {
-  POLL_INTERVAL_MS,
-  formatDate,
-  formatStatus,
-  importedCount,
-  isActiveImport,
-  isActiveIntercomImport,
-  statusDotClass,
-} from './importStatus';
-
-const { t } = useI18n();
-const getters = useStoreGetters();
-const router = useRouter();
-
-const dataImports = ref([]);
-const isLoading = ref(true);
-const isRefreshing = ref(false);
-const isPolling = ref(false);
-const showImportDrawer = ref(false);
-const activeTab = ref('import');
-let pollTimer;
-let isPageActive = false;
-
-const accountId = getters.getCurrentAccountId;
-
-const tabs = computed(() => [
-  { key: 'import', label: t('DATA_IMPORTS.TABS.IMPORT') },
-  { key: 'export', label: t('DATA_IMPORTS.TABS.EXPORT') },
-]);
-
-const activeTabIndex = computed(() =>
-  tabs.value.findIndex(tab => tab.key === activeTab.value)
-);
-
-const hasActiveImport = computed(() => dataImports.value.some(isActiveImport));
-const hasActiveIntercomImport = computed(() =>
-  dataImports.value.some(isActiveIntercomImport)
-);
-
-const dataImportRoute = dataImport => ({
-  name: 'settings_data_import_show',
-  params: { accountId: accountId.value, dataImportId: dataImport.id },
-});
-
-const importTypesFor = dataImport =>
-  dataImport.import_types?.length
-    ? dataImport.import_types
-    : [dataImport.data_type];
-
-const importTypeLabel = dataImport =>
-  importTypesFor(dataImport)
-    .map(type => {
-      if (type === 'contacts') return t('DATA_IMPORTS.TYPES.CONTACTS');
-      if (type === 'conversations') {
-        return t('DATA_IMPORTS.TYPES.CONVERSATIONS');
-      }
-      return type;
-    })
-    .join(', ');
-
-const fetchImports = async () => {
-  const response = await DataImportsAPI.get();
-  dataImports.value = response.data.payload || [];
-};
-
-const stopPolling = () => {
-  if (!pollTimer) return;
-
-  window.clearInterval(pollTimer);
-  pollTimer = null;
-};
-
-const refreshImportsInBackground = async () => {
-  if (
-    !isPageActive ||
-    isPolling.value ||
-    !hasActiveImport.value ||
-    document.hidden
-  ) {
-    return;
-  }
-
-  isPolling.value = true;
-  try {
-    await fetchImports();
-  } finally {
-    isPolling.value = false;
-    if (!hasActiveImport.value) stopPolling();
-  }
-};
-
-const startPolling = () => {
-  stopPolling();
-  if (!isPageActive || !hasActiveImport.value) return;
-
-  pollTimer = window.setInterval(refreshImportsInBackground, POLL_INTERVAL_MS);
-};
-
-const refresh = async ({ showLoader = true } = {}) => {
-  if (showLoader) isLoading.value = true;
-  else isRefreshing.value = true;
-
-  try {
-    await fetchImports();
-  } finally {
-    isLoading.value = false;
-    isRefreshing.value = false;
-    if (isPageActive) {
-      if (hasActiveImport.value && !pollTimer) startPolling();
-      if (!hasActiveImport.value) stopPolling();
-    }
-  }
-};
-
-const openImport = dataImport => {
-  router.push(dataImportRoute(dataImport));
-};
-
-const openImportDrawer = () => {
-  if (!hasActiveIntercomImport.value) showImportDrawer.value = true;
-};
-
-const onImportCreated = dataImportId => {
-  showImportDrawer.value = false;
-  router.push({
-    name: 'settings_data_import_show',
-    params: { accountId: accountId.value, dataImportId },
-  });
-};
-
-const onTabChanged = tab => {
-  activeTab.value = tab.key;
-};
-
-const handleVisibilityChange = () => {
-  if (isPageActive && !document.hidden && hasActiveImport.value) {
-    refreshImportsInBackground();
-  }
-};
-
-onActivated(async () => {
-  isPageActive = true;
-  await refresh();
-  if (!isPageActive) return;
-
-  startPolling();
-  document.addEventListener('visibilitychange', handleVisibilityChange);
-});
-
-onDeactivated(() => {
-  isPageActive = false;
-  stopPolling();
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-});
-
-onBeforeUnmount(() => {
-  isPageActive = false;
-  stopPolling();
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="isLoading"
-    :loading-message="$t('DATA_IMPORTS.LOADING')"
-  >
-    <template #header>
-      <BaseSettingsHeader
-        :title="$t('DATA_IMPORTS.HEADER')"
-        :description="$t('DATA_IMPORTS.DESCRIPTION')"
-      >
-        <template #tabs>
-          <TabBar
-            :tabs="tabs"
-            :initial-active-tab="activeTabIndex"
-            @tab-changed="onTabChanged"
-          />
-        </template>
-        <template v-if="activeTab === 'import' && dataImports.length" #count>
-          <span class="text-body-main text-n-slate-11">
-            {{ $t('DATA_IMPORTS.TABLE.COUNT', { count: dataImports.length }) }}
-          </span>
-        </template>
-        <template v-if="activeTab === 'import'" #actions>
-          <span
-            v-if="hasActiveImport"
-            class="hidden items-center gap-1.5 text-body-main text-n-slate-11 sm:inline-flex"
-          >
-            <span class="size-2 rounded-full bg-n-teal-9 animate-pulse" />
-            {{
-              $t('DATA_IMPORTS.MONITOR.LIVE', {
-                seconds: POLL_INTERVAL_MS / 1000,
-              })
-            }}
-          </span>
-          <Button
-            ghost
-            slate
-            size="sm"
-            icon="i-lucide-refresh-cw"
-            :is-loading="isRefreshing"
-            :aria-label="$t('DATA_IMPORTS.MONITOR.REFRESH')"
-            :title="$t('DATA_IMPORTS.MONITOR.REFRESH')"
-            @click="refresh({ showLoader: false })"
-          />
-          <Button
-            size="sm"
-            :label="$t('DATA_IMPORTS.TABLE.NEW_IMPORT')"
-            :disabled="hasActiveIntercomImport"
-            :title="
-              hasActiveIntercomImport
-                ? $t('DATA_IMPORTS.DRAWER.ACTIVE_IMPORT')
-                : undefined
-            "
-            @click="openImportDrawer"
-          />
-        </template>
-      </BaseSettingsHeader>
-    </template>
-
-    <template #body>
-      <div
-        v-if="activeTab === 'export'"
-        class="flex min-h-80 flex-col items-center justify-center gap-4 rounded-xl border border-n-weak bg-n-solid-1 px-6 py-16 text-center"
-      >
-        <span
-          class="flex size-12 items-center justify-center rounded-full bg-n-alpha-2"
-        >
-          <Icon icon="i-lucide-upload" class="size-5 text-n-slate-11" />
-        </span>
-        <div class="flex flex-col gap-1">
-          <h3 class="text-heading-2 text-n-slate-12">
-            {{ $t('DATA_IMPORTS.EXPORT.TITLE') }}
-          </h3>
-          <p class="max-w-sm text-body-main text-n-slate-11">
-            {{ $t('DATA_IMPORTS.EXPORT.DESCRIPTION') }}
-          </p>
-        </div>
-        <span
-          class="inline-flex items-center gap-1.5 rounded-md bg-n-alpha-2 px-2 py-1 text-label-small text-n-slate-11"
-        >
-          <Icon icon="i-lucide-clock" class="size-3.5" />
-          {{ $t('DATA_IMPORTS.EXPORT.COMING_SOON') }}
-        </span>
-      </div>
-
-      <div
-        v-else-if="!dataImports.length"
-        class="flex min-h-80 flex-col items-center justify-center gap-4 rounded-xl border border-n-weak bg-n-solid-1 px-6 py-16 text-center"
-      >
-        <span
-          class="flex size-12 items-center justify-center rounded-full bg-n-alpha-2"
-        >
-          <Icon icon="i-lucide-database" class="size-5 text-n-slate-11" />
-        </span>
-        <div class="flex flex-col gap-1">
-          <h3 class="text-heading-2 text-n-slate-12">
-            {{ $t('DATA_IMPORTS.TABLE.EMPTY') }}
-          </h3>
-          <p class="max-w-sm text-body-main text-n-slate-11">
-            {{ $t('DATA_IMPORTS.TABLE.EMPTY_DESCRIPTION') }}
-          </p>
-        </div>
-        <Button
-          size="sm"
-          icon="i-lucide-download"
-          :label="$t('DATA_IMPORTS.TABLE.NEW_IMPORT')"
-          @click="openImportDrawer"
-        />
-      </div>
-
-      <div v-else class="divide-y divide-n-weak border-t border-n-weak">
-        <div
-          v-for="dataImport in dataImports"
-          :key="dataImport.id"
-          class="group flex cursor-pointer items-center justify-between gap-4 py-4"
-          role="button"
-          tabindex="0"
-          @click="openImport(dataImport)"
-          @keydown.enter="openImport(dataImport)"
-          @keydown.space.prevent="openImport(dataImport)"
-        >
-          <div class="flex min-w-0 items-center gap-3">
-            <img
-              v-if="importSourceFor(dataImport).icon"
-              v-tooltip.top="importSourceFor(dataImport).label"
-              :src="importSourceFor(dataImport).icon"
-              alt=""
-              class="size-10 justify-center bg-n-alpha-3 rounded-xl shrink-0 object-contain border border-n-strong"
-            />
-            <span
-              v-else
-              v-tooltip.top="importSourceFor(dataImport).label"
-              class="size-10 justify-center bg-n-alpha-3 rounded-xl ring ring-n-solid-1 border border-n-strong shadow-sm grid place-items-center"
-            >
-              <Icon
-                :icon="importSourceFor(dataImport).iconClass"
-                class="size-4"
-              />
-            </span>
-            <div class="flex min-w-0 flex-col gap-1">
-              <div class="flex items-center gap-2">
-                <span class="truncate text-heading-3 text-n-slate-12">
-                  {{ dataImport.name || $t('DATA_IMPORTS.TABLE.UNNAMED') }}
-                </span>
-                <span class="flex shrink-0 items-center gap-1.5">
-                  <span
-                    class="size-2 rounded-full"
-                    :class="[
-                      statusDotClass(dataImport.status),
-                      { 'animate-pulse': isActiveImport(dataImport) },
-                    ]"
-                  />
-                  <span
-                    class="whitespace-nowrap capitalize text-body-main text-n-slate-11"
-                  >
-                    {{ formatStatus(dataImport.status) }}
-                  </span>
-                </span>
-              </div>
-              <div
-                class="flex flex-wrap items-center gap-2 text-body-main text-n-slate-11"
-              >
-                <span>{{ importTypeLabel(dataImport) }}</span>
-                <div class="h-3 w-px rounded-lg bg-n-strong" />
-                <span class="tabular-nums">
-                  {{
-                    $t('DATA_IMPORTS.TABLE.IMPORTED_COUNT', {
-                      count: importedCount(dataImport),
-                    })
-                  }}
-                </span>
-                <div class="h-3 w-px rounded-lg bg-n-strong" />
-                <span>{{ formatDate(dataImport.created_at) }}</span>
-              </div>
-            </div>
-          </div>
-          <Button
-            v-tooltip.top="$t('DATA_IMPORTS.TABLE.VIEW')"
-            icon="i-lucide-eye"
-            slate
-            sm
-            class="shrink-0"
-            @click.stop="openImport(dataImport)"
-          />
-        </div>
-      </div>
-    </template>
-  </SettingsLayout>
-
-  <NewImportDialog
-    :show="showImportDrawer"
-    :has-active-import="hasActiveIntercomImport"
-    @close="showImportDrawer = false"
-    @created="onImportCreated"
-  />
-</template>

app/javascript/dashboard/routes/dashboard/settings/data/NewImportDialog.vue

@@ -1,210 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Select from 'dashboard/components-next/select/Select.vue';
-import DataImportsAPI from 'dashboard/api/dataImports';
-import { IMPORT_SOURCES } from './importSources';
-
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  hasActiveImport: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['close', 'created']);
-
-const { t } = useI18n();
-const dialogRef = ref(null);
-const sourceProvider = ref('intercom');
-const importName = ref(t('DATA_IMPORTS.DEFAULT_IMPORT_NAME'));
-const accessToken = ref('');
-const selectedImportTypes = ref(['contacts', 'conversations']);
-const validationState = ref('idle');
-const validationMessage = ref('');
-const isCreating = ref(false);
-let validationRequestId = 0;
-
-const closeDrawer = () => emit('close');
-
-const sourceOptions = computed(() =>
-  IMPORT_SOURCES.map(({ value, label }) => ({ value, label }))
-);
-
-const tokenMessageType = computed(() => {
-  if (validationState.value === 'valid') return 'success';
-  if (validationState.value === 'invalid') return 'error';
-  return 'info';
-});
-
-const canCreate = computed(
-  () =>
-    validationState.value === 'valid' &&
-    selectedImportTypes.value.length > 0 &&
-    !props.hasActiveImport &&
-    !isCreating.value
-);
-
-const validationPayload = () => ({
-  source_provider: sourceProvider.value,
-  access_token: accessToken.value.trim(),
-  import_types: selectedImportTypes.value,
-});
-
-const invalidateValidation = () => {
-  validationRequestId += 1;
-  validationState.value = 'idle';
-  validationMessage.value = '';
-};
-
-const validateSource = async () => {
-  if (!accessToken.value.trim() || !selectedImportTypes.value.length) {
-    invalidateValidation();
-    return;
-  }
-
-  validationRequestId += 1;
-  const requestId = validationRequestId;
-  validationState.value = 'validating';
-  validationMessage.value = t('DATA_IMPORTS.DRAWER.VALIDATING');
-  try {
-    await DataImportsAPI.validateSource(validationPayload());
-    if (requestId !== validationRequestId) return;
-
-    validationState.value = 'valid';
-    validationMessage.value = t('DATA_IMPORTS.DRAWER.VALID_KEY');
-  } catch (error) {
-    if (requestId !== validationRequestId) return;
-
-    validationState.value = 'invalid';
-    validationMessage.value =
-      error?.response?.data?.message || t('DATA_IMPORTS.DRAWER.INVALID_KEY');
-  }
-};
-
-const toggleImportType = type => {
-  selectedImportTypes.value = selectedImportTypes.value.includes(type)
-    ? selectedImportTypes.value.filter(item => item !== type)
-    : [...selectedImportTypes.value, type];
-};
-
-const createImport = async () => {
-  if (!canCreate.value) return;
-
-  isCreating.value = true;
-  try {
-    const response = await DataImportsAPI.create({
-      ...validationPayload(),
-      name: importName.value.trim() || t('DATA_IMPORTS.DEFAULT_IMPORT_NAME'),
-    });
-    useAlert(t('DATA_IMPORTS.ALERTS.IMPORT_STARTED'));
-    emit('created', response.data.id);
-  } catch (error) {
-    useAlert(
-      error?.response?.data?.message || t('DATA_IMPORTS.ALERTS.IMPORT_FAILED')
-    );
-  } finally {
-    isCreating.value = false;
-  }
-};
-
-watch(accessToken, invalidateValidation);
-
-watch(selectedImportTypes, () => {
-  invalidateValidation();
-  if (accessToken.value.trim() && selectedImportTypes.value.length) {
-    validateSource();
-  }
-});
-
-watch(
-  () => props.show,
-  show => {
-    if (show) {
-      dialogRef.value?.open();
-      return;
-    }
-
-    dialogRef.value?.close();
-    accessToken.value = '';
-    validationState.value = 'idle';
-    validationMessage.value = '';
-  }
-);
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="$t('DATA_IMPORTS.DRAWER.TITLE')"
-    :confirm-button-label="$t('DATA_IMPORTS.DRAWER.IMPORT')"
-    :cancel-button-label="$t('DATA_IMPORTS.DRAWER.CANCEL')"
-    :disable-confirm-button="!canCreate"
-    :is-loading="isCreating || validationState === 'validating'"
-    width="md"
-    @confirm="createImport"
-    @close="closeDrawer"
-  >
-    <div class="flex flex-col gap-4">
-      <label class="flex flex-col gap-1.5 text-heading-3 text-n-slate-12">
-        {{ $t('DATA_IMPORTS.DRAWER.SOURCE') }}
-        <Select
-          v-model="sourceProvider"
-          class="!w-full [&>select]:w-full"
-          :options="sourceOptions"
-        />
-      </label>
-
-      <Input
-        v-model="importName"
-        :label="$t('DATA_IMPORTS.DRAWER.NAME')"
-        :placeholder="$t('DATA_IMPORTS.DRAWER.NAME_PLACEHOLDER')"
-      />
-
-      <Input
-        v-model="accessToken"
-        type="password"
-        autocomplete="off"
-        :label="$t('DATA_IMPORTS.DRAWER.ACCESS_KEY')"
-        :placeholder="$t('DATA_IMPORTS.DRAWER.ACCESS_KEY_PLACEHOLDER')"
-        :message="validationMessage"
-        :message-type="tokenMessageType"
-        @blur="validateSource"
-      />
-
-      <fieldset class="flex flex-col gap-2.5">
-        <legend class="mb-1.5 text-heading-3 text-n-slate-12">
-          {{ $t('DATA_IMPORTS.DRAWER.DATA_TYPES') }}
-        </legend>
-        <label
-          class="inline-flex cursor-pointer items-center gap-2 text-body-main text-n-slate-12"
-        >
-          <Checkbox
-            :model-value="selectedImportTypes.includes('contacts')"
-            @change="toggleImportType('contacts')"
-          />
-          {{ $t('DATA_IMPORTS.TYPES.CONTACTS') }}
-        </label>
-        <label
-          class="inline-flex cursor-pointer items-center gap-2 text-body-main text-n-slate-12"
-        >
-          <Checkbox
-            :model-value="selectedImportTypes.includes('conversations')"
-            @change="toggleImportType('conversations')"
-          />
-          {{ $t('DATA_IMPORTS.TYPES.CONVERSATIONS') }}
-        </label>
-      </fieldset>
-
-      <p
-        v-if="hasActiveImport"
-        class="rounded-lg bg-n-amber-2 px-3 py-2 text-body-main text-n-amber-11"
-      >
-        {{ $t('DATA_IMPORTS.DRAWER.ACTIVE_IMPORT') }}
-      </p>
-    </div>
-  </Dialog>
-</template>

app/javascript/dashboard/routes/dashboard/settings/data/Show.vue

@@ -1,238 +0,0 @@
-<script setup>
-import {
-  computed,
-  onActivated,
-  onBeforeUnmount,
-  onDeactivated,
-  ref,
-} from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-
-import DataImportsAPI from 'dashboard/api/dataImports';
-import { POLL_INTERVAL_MS, isActiveImport } from './importStatus';
-import SettingsLayout from '../SettingsLayout.vue';
-import ImportDetailHeader from './components/ImportDetailHeader.vue';
-import ImportSummaryTiles from './components/ImportSummaryTiles.vue';
-import ImportProgress from './components/ImportProgress.vue';
-import ImportErrorsSection from './components/ImportErrorsSection.vue';
-import ImportSkipLogsSection from './components/ImportSkipLogsSection.vue';
-
-const { t } = useI18n();
-const route = useRoute();
-
-const dataImport = ref(null);
-const isLoading = ref(true);
-const isRefreshing = ref(false);
-const isPolling = ref(false);
-const isAbandoning = ref(false);
-const isDownloadingErrorLogs = ref(false);
-const isDownloadingSkipLogs = ref(false);
-const isChangingSkipLogsType = ref(false);
-const selectedSkipLogsType = ref('');
-const errorsOpen = ref(true);
-const skipLogsOpen = ref(true);
-let pollTimer;
-let isPageActive = false;
-
-const hasActiveImport = computed(() => isActiveImport(dataImport.value));
-
-const stopPolling = () => {
-  if (!pollTimer) return;
-
-  window.clearInterval(pollTimer);
-  pollTimer = null;
-};
-
-const fetchImport = async ({
-  showLoader = false,
-  manual = false,
-  requestedSkipLogsType = selectedSkipLogsType.value,
-} = {}) => {
-  if (showLoader) {
-    isLoading.value = true;
-  } else if (manual) {
-    isRefreshing.value = true;
-  }
-
-  try {
-    const response = await DataImportsAPI.show(route.params.dataImportId, {
-      skip_logs_type: requestedSkipLogsType || undefined,
-    });
-    dataImport.value = response.data;
-    selectedSkipLogsType.value =
-      response.data.skip_logs_filters?.selected_source_object_type ||
-      requestedSkipLogsType ||
-      '';
-  } finally {
-    if (showLoader) isLoading.value = false;
-    if (manual) isRefreshing.value = false;
-    if (!hasActiveImport.value) stopPolling();
-  }
-};
-
-const changeSkipLogsType = async type => {
-  if (type === selectedSkipLogsType.value || isChangingSkipLogsType.value) {
-    return;
-  }
-
-  selectedSkipLogsType.value = type;
-  isChangingSkipLogsType.value = true;
-  try {
-    await fetchImport({ requestedSkipLogsType: type });
-  } finally {
-    isChangingSkipLogsType.value = false;
-  }
-};
-
-const refreshImportInBackground = async () => {
-  if (
-    !isPageActive ||
-    isPolling.value ||
-    !hasActiveImport.value ||
-    document.hidden
-  ) {
-    return;
-  }
-
-  isPolling.value = true;
-  try {
-    await fetchImport();
-  } finally {
-    isPolling.value = false;
-    if (!hasActiveImport.value) stopPolling();
-  }
-};
-
-const abandonImport = async () => {
-  isAbandoning.value = true;
-  try {
-    const response = await DataImportsAPI.abandon(dataImport.value.id);
-    dataImport.value = response.data;
-    stopPolling();
-    useAlert(t('DATA_IMPORTS.ALERTS.IMPORT_ABANDONED'));
-  } finally {
-    isAbandoning.value = false;
-  }
-};
-
-const downloadCsv = (response, filename) => {
-  const url = window.URL.createObjectURL(
-    new Blob([response.data], { type: 'text/csv' })
-  );
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = filename;
-  link.click();
-  window.URL.revokeObjectURL(url);
-};
-
-const downloadErrorLogs = async () => {
-  isDownloadingErrorLogs.value = true;
-  try {
-    const response = await DataImportsAPI.downloadErrorLogs(
-      dataImport.value.id
-    );
-    downloadCsv(response, `data-import-${dataImport.value.id}-error-logs.csv`);
-  } finally {
-    isDownloadingErrorLogs.value = false;
-  }
-};
-
-const downloadSkipLogs = async () => {
-  isDownloadingSkipLogs.value = true;
-  try {
-    const response = await DataImportsAPI.downloadSkipLogs(dataImport.value.id);
-    downloadCsv(response, `data-import-${dataImport.value.id}-skip-logs.csv`);
-  } finally {
-    isDownloadingSkipLogs.value = false;
-  }
-};
-
-const startPolling = () => {
-  stopPolling();
-  if (!isPageActive || !hasActiveImport.value) return;
-
-  pollTimer = window.setInterval(refreshImportInBackground, POLL_INTERVAL_MS);
-};
-
-const handleVisibilityChange = () => {
-  if (isPageActive && !document.hidden && hasActiveImport.value) {
-    refreshImportInBackground();
-  }
-};
-
-onActivated(async () => {
-  isPageActive = true;
-  await fetchImport({ showLoader: true });
-  if (!isPageActive) return;
-
-  // Collapse empty sections by default; expand the ones with records.
-  errorsOpen.value = Boolean(dataImport.value?.import_errors_count);
-  skipLogsOpen.value = Boolean(dataImport.value?.skip_logs_count);
-  startPolling();
-  document.addEventListener('visibilitychange', handleVisibilityChange);
-});
-
-onDeactivated(() => {
-  isPageActive = false;
-  stopPolling();
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-});
-
-onBeforeUnmount(() => {
-  isPageActive = false;
-  stopPolling();
-  document.removeEventListener('visibilitychange', handleVisibilityChange);
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="isLoading"
-    :loading-message="$t('DATA_IMPORTS.LOADING')"
-  >
-    <template #header>
-      <ImportDetailHeader
-        :data-import="dataImport"
-        :is-refreshing="isRefreshing"
-        :is-abandoning="isAbandoning"
-        :is-polling="isPolling"
-        @refresh="fetchImport({ manual: true })"
-        @abandon="abandonImport"
-      />
-    </template>
-
-    <template #body>
-      <div v-if="dataImport" class="flex flex-col gap-3">
-        <ImportSummaryTiles :data-import="dataImport" />
-
-        <ImportProgress
-          v-if="dataImport.import_types?.length"
-          :data-import="dataImport"
-          :title="$t('DATA_IMPORTS.DETAIL.PROGRESS')"
-        />
-
-        <ImportErrorsSection
-          :data-import="dataImport"
-          :is-open="errorsOpen"
-          :is-downloading="isDownloadingErrorLogs"
-          @toggle="errorsOpen = !errorsOpen"
-          @download="downloadErrorLogs"
-        />
-
-        <ImportSkipLogsSection
-          :data-import="dataImport"
-          :is-open="skipLogsOpen"
-          :is-downloading="isDownloadingSkipLogs"
-          :selected-type="selectedSkipLogsType"
-          :is-changing-type="isChangingSkipLogsType"
-          @toggle="skipLogsOpen = !skipLogsOpen"
-          @download="downloadSkipLogs"
-          @change-type="changeSkipLogsType"
-        />
-      </div>
-    </template>
-  </SettingsLayout>
-</template>

app/javascript/dashboard/routes/dashboard/settings/data/components/ImportDetailHeader.vue

@@ -1,128 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import BaseSettingsHeader from '../../components/BaseSettingsHeader.vue';
-import {
-  POLL_INTERVAL_MS,
-  importStageKey,
-  isAbandonableImport,
-  isActiveImport,
-  statusDotClass as getStatusDotClass,
-} from '../importStatus';
-
-const props = defineProps({
-  dataImport: {
-    type: Object,
-    default: null,
-  },
-  isRefreshing: {
-    type: Boolean,
-    default: false,
-  },
-  isAbandoning: {
-    type: Boolean,
-    default: false,
-  },
-  isPolling: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-defineEmits(['refresh', 'abandon']);
-
-const { t } = useI18n();
-
-const pollIntervalSeconds = POLL_INTERVAL_MS / 1000;
-
-const title = computed(
-  () => props.dataImport?.name || t('DATA_IMPORTS.TABLE.UNNAMED')
-);
-
-const stageLabels = computed(() => ({
-  unknown: t('DATA_IMPORTS.MONITOR.STAGES.unknown'),
-  queued: t('DATA_IMPORTS.MONITOR.STAGES.queued'),
-  contacts: t('DATA_IMPORTS.MONITOR.STAGES.contacts'),
-  conversations: t('DATA_IMPORTS.MONITOR.STAGES.conversations'),
-  finalizing: t('DATA_IMPORTS.MONITOR.STAGES.finalizing'),
-  completed: t('DATA_IMPORTS.MONITOR.STAGES.completed'),
-  completed_with_errors: t('DATA_IMPORTS.MONITOR.STAGES.completed_with_errors'),
-  failed: t('DATA_IMPORTS.MONITOR.STAGES.failed'),
-  abandoned: t('DATA_IMPORTS.MONITOR.STAGES.abandoned'),
-}));
-
-const monitorTitle = computed(
-  () =>
-    stageLabels.value[importStageKey(props.dataImport)] ||
-    stageLabels.value.unknown
-);
-
-const statusDotClass = computed(() =>
-  getStatusDotClass(props.dataImport?.status)
-);
-
-const hasActiveImport = computed(() => isActiveImport(props.dataImport));
-
-const canAbandonImport = computed(() => isAbandonableImport(props.dataImport));
-</script>
-
-<template>
-  <BaseSettingsHeader
-    :title="title"
-    :back-button-label="$t('DATA_IMPORTS.DETAIL.BACK')"
-  >
-    <template #title>
-      <div class="flex w-full items-center justify-between gap-4">
-        <h1 class="min-w-0 truncate text-heading-1 text-n-slate-12">
-          {{ title }}
-        </h1>
-        <div class="flex shrink-0 items-center gap-2">
-          <Button
-            v-if="hasActiveImport"
-            outline
-            slate
-            size="sm"
-            icon="i-lucide-refresh-cw"
-            :is-loading="isRefreshing"
-            :aria-label="$t('DATA_IMPORTS.MONITOR.REFRESH')"
-            :title="$t('DATA_IMPORTS.MONITOR.REFRESH')"
-            @click="$emit('refresh')"
-          />
-          <Button
-            v-if="canAbandonImport"
-            ruby
-            size="sm"
-            :is-loading="isAbandoning"
-            :label="$t('DATA_IMPORTS.TABLE.ABANDON')"
-            @click="$emit('abandon')"
-          />
-        </div>
-      </div>
-    </template>
-    <template #description>
-      <span class="inline-flex items-center gap-1.5 align-middle">
-        <span
-          class="size-2 rounded-full"
-          :class="[statusDotClass, { 'animate-pulse': hasActiveImport }]"
-        />
-        {{ monitorTitle }}
-      </span>
-      <template v-if="hasActiveImport">
-        <span
-          class="mx-2 inline-block h-3 w-px rounded-lg bg-n-strong align-middle"
-        />
-        <span class="text-n-teal-11">
-          {{
-            isPolling
-              ? $t('DATA_IMPORTS.MONITOR.REFRESHING')
-              : $t('DATA_IMPORTS.MONITOR.LIVE', {
-                  seconds: pollIntervalSeconds,
-                })
-          }}
-        </span>
-      </template>
-    </template>
-  </BaseSettingsHeader>
-</template>

app/javascript/dashboard/routes/dashboard/settings/data/components/ImportErrorsSection.vue

@@ -1,78 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { BaseTableRow, BaseTableCell } from 'dashboard/components-next/table';
-import ImportLogSection from './ImportLogSection.vue';
-import { formatDate, sourceObjectLabel } from '../importStatus';
-
-const props = defineProps({
-  dataImport: {
-    type: Object,
-    required: true,
-  },
-  isOpen: {
-    type: Boolean,
-    default: false,
-  },
-  isDownloading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-defineEmits(['toggle', 'download']);
-
-const { t } = useI18n();
-
-const errors = computed(() => props.dataImport?.import_errors || []);
-
-const headers = computed(() => [
-  t('DATA_IMPORTS.DETAIL.ERROR_CODE'),
-  t('DATA_IMPORTS.DETAIL.SOURCE_OBJECT'),
-  t('DATA_IMPORTS.DETAIL.MESSAGE'),
-  t('DATA_IMPORTS.DETAIL.CREATED'),
-]);
-</script>
-
-<template>
-  <ImportLogSection
-    :title="$t('DATA_IMPORTS.DETAIL.ERRORS')"
-    :count="dataImport.import_errors_count"
-    :is-open="isOpen"
-    :is-downloading="isDownloading"
-    :download-label="$t('DATA_IMPORTS.DETAIL.DOWNLOAD_ERROR_LOGS')"
-    :headers="headers"
-    :items="errors"
-    :empty-message="$t('DATA_IMPORTS.DETAIL.NO_ERRORS')"
-    @toggle="$emit('toggle')"
-    @download="$emit('download')"
-  >
-    <template #row="{ items }">
-      <BaseTableRow v-for="error in items" :key="error.id" :item="error">
-        <template #default>
-          <BaseTableCell>
-            <span class="text-body-main text-n-slate-12">
-              {{ error.error_code }}
-            </span>
-          </BaseTableCell>
-          <BaseTableCell>
-            <span class="text-body-main text-n-slate-12">
-              {{ sourceObjectLabel(error) }}
-            </span>
-          </BaseTableCell>
-          <BaseTableCell>
-            <span class="text-body-main text-n-slate-11">
-              {{ error.message || '-' }}
-            </span>
-          </BaseTableCell>
-          <BaseTableCell>
-            <span class="whitespace-nowrap text-body-main text-n-slate-11">
-              {{ formatDate(error.created_at) }}
-            </span>
-          </BaseTableCell>
-        </template>
-      </BaseTableRow>
-    </template>
-  </ImportLogSection>
-</template>