chore(ci): move linting from circle CI to github actions

.circleci/config.yml

@@ -15,132 +15,6 @@ defaults: &defaults
     LOG_LEVEL: warn
 
 jobs:
-  # Separate job for linting (no parallelism needed)
-  lint:
-    <<: *defaults
-    steps:
-      - checkout
-
-      # Install minimal system dependencies for linting
-      - run:
-          name: Install System Dependencies
-          command: |
-            sudo apt-get update
-            DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
-              libpq-dev \
-              build-essential \
-              git \
-              curl \
-              libssl-dev \
-              zlib1g-dev \
-              libreadline-dev \
-              libyaml-dev \
-              openjdk-11-jdk \
-              jq \
-              software-properties-common \
-              ca-certificates \
-              imagemagick \
-              libxml2-dev \
-              libxslt1-dev \
-              file \
-              g++ \
-              gcc \
-              autoconf \
-              gnupg2 \
-              patch \
-              ruby-dev \
-              liblzma-dev \
-              libgmp-dev \
-              libncurses5-dev \
-              libffi-dev \
-              libgdbm6 \
-              libgdbm-dev \
-              libvips
-
-      - run:
-          name: Install RVM and Ruby 3.4.4
-          command: |
-            sudo apt-get install -y gpg
-            gpg --keyserver hkp://keyserver.ubuntu.com --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
-            \curl -sSL https://get.rvm.io | bash -s stable
-            echo 'source ~/.rvm/scripts/rvm' >> $BASH_ENV
-            source ~/.rvm/scripts/rvm
-            rvm install "3.4.4"
-            rvm use 3.4.4 --default
-            gem install bundler -v 2.5.16
-
-      - run:
-          name: Install Application Dependencies
-          command: |
-            source ~/.rvm/scripts/rvm
-            bundle install
-
-      - node/install:
-          node-version: '24.13'
-      - node/install-pnpm
-      - node/install-packages:
-          pkg-manager: pnpm
-          override-ci-command: pnpm i
-
-      # Swagger verification
-      - run:
-          name: Verify swagger API specification
-          command: |
-            bundle exec rake swagger:build
-            if [[ `git status swagger/swagger.json --porcelain` ]]
-            then
-              echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
-              exit 1
-            fi
-            mkdir -p ~/tmp
-            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
-            java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
-
-      # Bundle audit
-      - run:
-          name: Bundle audit
-          command: bundle exec bundle audit update && bundle exec bundle audit check -v
-
-      # Rubocop linting
-      - run:
-          name: Rubocop
-          command: bundle exec rubocop --parallel
-
-      # ESLint linting
-      - run:
-          name: eslint
-          command: pnpm run eslint
-
-  # Separate job for frontend tests
-  frontend-tests:
-    <<: *defaults
-    steps:
-      - checkout
-      - node/install:
-          node-version: '24.13'
-      - node/install-pnpm
-      - node/install-packages:
-          pkg-manager: pnpm
-          override-ci-command: pnpm i
-
-      - run:
-          name: Run frontend tests (with coverage)
-          command: pnpm run test:coverage
-
-      - run:
-          name: Move coverage files if they exist
-          command: |
-            if [ -d "coverage" ]; then
-              mkdir -p ~/build/coverage
-              cp -r coverage ~/build/coverage/frontend || true
-            fi
-          when: always
-
-      - persist_to_workspace:
-          root: ~/build
-          paths:
-            - coverage
-
   # Backend tests with parallelization
   backend-tests:
     <<: *defaults
@@ -148,7 +22,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: '24.13'
+          node-version: '23.7'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm
@@ -327,7 +201,7 @@ jobs:
           paths:
             - coverage
 
-  # Collect coverage from all jobs
+  # Collect coverage from backend tests
   coverage:
     <<: *defaults
     steps:
@@ -335,11 +209,6 @@ jobs:
       - attach_workspace:
           at: ~/build
 
-      # Qlty coverage publish
-      - qlty-orb/coverage_publish:
-          files: |
-            coverage/frontend/lcov.info
-
       - run:
           name: List coverage directory contents
           command: |
@@ -361,14 +230,10 @@ workflows:
   version: 2
   build:
     jobs:
-      - lint
-      - frontend-tests
       - backend-tests
       - coverage:
           requires:
-            - frontend-tests
             - backend-tests
       - build:
           requires:
-            - lint
             - coverage

.devcontainer/docker-compose.base.yml

@@ -10,7 +10,7 @@ services:
       dockerfile: .devcontainer/Dockerfile.base
       args:
         VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '24.13.0'
+        NODE_VERSION: '23.7.0'
         RUBY_VERSION: '3.4.4'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: '1000'

.devcontainer/docker-compose.yml

@@ -11,7 +11,7 @@ services:
       dockerfile: .devcontainer/Dockerfile
       args:
         VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '24.13.0'
+        NODE_VERSION: '23.7.0'
         RUBY_VERSION: '3.4.4'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
         USER_UID: '1000'

.github/workflows/frontend-tests.yml

@@ -1,4 +1,4 @@
-name: Frontend Lint & Test
+name: Frontend Tests
 
 on:
   push:
@@ -18,23 +18,16 @@ jobs:
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
 
-      - uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true
-
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 23
           cache: 'pnpm'
 
       - name: Install pnpm dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Run eslint
-        run: pnpm run eslint
-
       - name: Run frontend tests with coverage
         run: |
           mkdir -p coverage

.github/workflows/lint.yml

@@ -0,0 +1,54 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  lint:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+      - uses: ruby/setup-ruby@v1
+        with:
+          bundler-cache: true
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 23
+          cache: 'pnpm'
+
+      - name: Install pnpm dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run eslint
+        run: pnpm run eslint
+
+      - name: Verify swagger API specification
+        run: |
+          bundle exec rake swagger:build
+          if [[ `git status swagger/swagger.json --porcelain` ]]
+          then
+            echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
+            exit 1
+          fi
+          mkdir -p ~/tmp
+          curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
+          java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json
+
+      - name: Bundle audit
+        run: bundle exec bundle audit update && bundle exec bundle audit check -v
+
+      - name: Rubocop
+        run: bundle exec rubocop --parallel

.github/workflows/run_foss_spec.yml

@@ -28,7 +28,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 23
           cache: 'pnpm'
       - name: Install pnpm dependencies
         run: pnpm i
@@ -43,7 +43,7 @@ jobs:
       - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 23
           cache: 'pnpm'
       - name: Install pnpm dependencies
         run: pnpm i
@@ -94,7 +94,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 23
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/size-limit.yml

@@ -28,7 +28,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 23
           cache: 'pnpm'
 
       - name: pnpm

.nvmrc

@@ -1 +1 @@
-24.13.0
+23.7.0

VERSION_CW

@@ -1 +1 @@
-4.10.0
+4.9.1

VERSION_CWCTL

@@ -1 +1 @@
-3.5.0
+3.4.3

app/builders/v2/reports/channel_summary_builder.rb

@@ -1,38 +0,0 @@
-class V2::Reports::ChannelSummaryBuilder
-  include DateRangeHelper
-
-  pattr_initialize [:account!, :params!]
-
-  def build
-    conversations_by_channel_and_status.transform_values { |status_counts| build_channel_stats(status_counts) }
-  end
-
-  private
-
-  def conversations_by_channel_and_status
-    account.conversations
-           .joins(:inbox)
-           .where(created_at: range)
-           .group('inboxes.channel_type', 'conversations.status')
-           .count
-           .each_with_object({}) do |((channel_type, status), count), grouped|
-      grouped[channel_type] ||= {}
-      grouped[channel_type][status] = count
-    end
-  end
-
-  def build_channel_stats(status_counts)
-    open_count = status_counts['open'] || 0
-    resolved_count = status_counts['resolved'] || 0
-    pending_count = status_counts['pending'] || 0
-    snoozed_count = status_counts['snoozed'] || 0
-
-    {
-      open: open_count,
-      resolved: resolved_count,
-      pending: pending_count,
-      snoozed: snoozed_count,
-      total: open_count + resolved_count + pending_count + snoozed_count
-    }
-  end
-end

app/controllers/api/v1/accounts/captain/preferences_controller.rb

@@ -1,76 +0,0 @@
-class Api::V1::Accounts::Captain::PreferencesController < Api::V1::Accounts::BaseController
-  before_action :current_account
-  before_action :authorize_account_update, only: [:update]
-
-  def show
-    render json: preferences_payload
-  end
-
-  def update
-    params_to_update = captain_params
-    @current_account.captain_models = params_to_update[:captain_models] if params_to_update[:captain_models]
-    @current_account.captain_features = params_to_update[:captain_features] if params_to_update[:captain_features]
-    @current_account.save!
-
-    render json: preferences_payload
-  end
-
-  private
-
-  def preferences_payload
-    {
-      providers: Llm::Models.providers,
-      models: Llm::Models.models,
-      features: features_with_account_preferences
-    }
-  end
-
-  def authorize_account_update
-    authorize @current_account, :update?
-  end
-
-  def captain_params
-    permitted = {}
-    permitted[:captain_models] = merged_captain_models if params[:captain_models].present?
-    permitted[:captain_features] = merged_captain_features if params[:captain_features].present?
-    permitted
-  end
-
-  def merged_captain_models
-    existing_models = @current_account.captain_models || {}
-    existing_models.merge(permitted_captain_models)
-  end
-
-  def merged_captain_features
-    existing_features = @current_account.captain_features || {}
-    existing_features.merge(permitted_captain_features)
-  end
-
-  def permitted_captain_models
-    params.require(:captain_models).permit(
-      :editor, :assistant, :copilot, :label_suggestion,
-      :audio_transcription, :help_center_search
-    ).to_h.stringify_keys
-  end
-
-  def permitted_captain_features
-    params.require(:captain_features).permit(
-      :editor, :assistant, :copilot, :label_suggestion,
-      :audio_transcription, :help_center_search
-    ).to_h.stringify_keys
-  end
-
-  def features_with_account_preferences
-    preferences = Current.account.captain_preferences
-    account_features = preferences[:features] || {}
-    account_models = preferences[:models] || {}
-
-    Llm::Models.feature_keys.index_with do |feature_key|
-      config = Llm::Models.feature_config(feature_key)
-      config.merge(
-        enabled: account_features[feature_key] == true,
-        selected: account_models[feature_key] || config[:default]
-      )
-    end
-  end
-end

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

@@ -50,5 +50,3 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
     @current_page = params[:page] || 1
   end
 end
-
-Api::V1::Accounts::CsatSurveyResponsesController.prepend_mod_with('Api::V1::Accounts::CsatSurveyResponsesController')

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

@@ -1,27 +1,38 @@
 class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseController
+  DEFAULT_BUTTON_TEXT = 'Please rate us'.freeze
+  DEFAULT_LANGUAGE = 'en'.freeze
+
   before_action :fetch_inbox
   before_action :validate_whatsapp_channel
 
   def show
-    service = CsatTemplateManagementService.new(@inbox)
-    result = service.template_status
+    template = @inbox.csat_config&.dig('template')
+    return render json: { template_exists: false } unless template
 
-    if result[:service_error]
-      render json: { error: result[:service_error] }, status: :internal_server_error
-    else
-      render json: result
-    end
+    template_name = template['name'] || Whatsapp::CsatTemplateNameService.csat_template_name(@inbox.id)
+    status_result = @inbox.channel.provider_service.get_template_status(template_name)
+
+    render_template_status_response(status_result, template_name)
+  rescue StandardError => e
+    Rails.logger.error "Error fetching CSAT template status: #{e.message}"
+    render json: { error: e.message }, status: :internal_server_error
   end
 
   def create
     template_params = extract_template_params
     return render_missing_message_error if template_params[:message].blank?
 
-    service = CsatTemplateManagementService.new(@inbox)
-    result = service.create_template(template_params)
+    # Delete existing template even though we are using a new one.
+    # We don't want too many templates in the business portfolio, but the create operation shouldn't fail if deletion fails.
+    delete_existing_template_if_needed
+
+    result = create_template_via_provider(template_params)
     render_template_creation_result(result)
   rescue ActionController::ParameterMissing
     render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
+  rescue StandardError => e
+    Rails.logger.error "Error creating CSAT template: #{e.message}"
+    render json: { error: 'Template creation failed' }, status: :internal_server_error
   end
 
   private
@@ -32,9 +43,9 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
   end
 
   def validate_whatsapp_channel
-    return if @inbox.whatsapp? || @inbox.twilio_whatsapp?
+    return if @inbox.whatsapp?
 
-    render json: { error: 'CSAT template operations only available for WhatsApp and Twilio WhatsApp channels' },
+    render json: { error: 'CSAT template operations only available for WhatsApp channels' },
            status: :bad_request
   end
 
@@ -46,36 +57,35 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     render json: { error: 'Message is required' }, status: :unprocessable_entity
   end
 
+  def create_template_via_provider(template_params)
+    template_config = {
+      message: template_params[:message],
+      button_text: template_params[:button_text] || DEFAULT_BUTTON_TEXT,
+      base_url: ENV.fetch('FRONTEND_URL', 'http://localhost:3000'),
+      language: template_params[:language] || DEFAULT_LANGUAGE,
+      template_name: Whatsapp::CsatTemplateNameService.csat_template_name(@inbox.id)
+    }
+
+    @inbox.channel.provider_service.create_csat_template(template_config)
+  end
+
   def render_template_creation_result(result)
     if result[:success]
       render_successful_template_creation(result)
-    elsif result[:service_error]
-      render json: { error: result[:service_error] }, status: :internal_server_error
     else
       render_failed_template_creation(result)
     end
   end
 
   def render_successful_template_creation(result)
-    if @inbox.twilio_whatsapp?
-      render json: {
-        template: {
-          friendly_name: result[:friendly_name],
-          content_sid: result[:content_sid],
-          status: result[:status] || 'pending',
-          language: result[:language] || 'en'
-        }
-      }, status: :created
-    else
-      render json: {
-        template: {
-          name: result[:template_name],
-          template_id: result[:template_id],
-          status: 'PENDING',
-          language: result[:language] || 'en'
-        }
-      }, status: :created
-    end
+    render json: {
+      template: {
+        name: result[:template_name],
+        template_id: result[:template_id],
+        status: 'PENDING',
+        language: result[:language] || DEFAULT_LANGUAGE
+      }
+    }, status: :created
   end
 
   def render_failed_template_creation(result)
@@ -88,6 +98,45 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
     }, status: :unprocessable_entity
   end
 
+  def delete_existing_template_if_needed
+    template = @inbox.csat_config&.dig('template')
+    return true if template.blank?
+
+    template_name = template['name']
+    return true if template_name.blank?
+
+    template_status = @inbox.channel.provider_service.get_template_status(template_name)
+    return true unless template_status[:success]
+
+    deletion_result = @inbox.channel.provider_service.delete_csat_template(template_name)
+    if deletion_result[:success]
+      Rails.logger.info "Deleted existing CSAT template '#{template_name}' for inbox #{@inbox.id}"
+      true
+    else
+      Rails.logger.warn "Failed to delete existing CSAT template '#{template_name}' for inbox #{@inbox.id}: #{deletion_result[:response_body]}"
+      false
+    end
+  rescue StandardError => e
+    Rails.logger.error "Error during template deletion for inbox #{@inbox.id}: #{e.message}"
+    false
+  end
+
+  def render_template_status_response(status_result, template_name)
+    if status_result[:success]
+      render json: {
+        template_exists: true,
+        template_name: template_name,
+        status: status_result[:template][:status],
+        template_id: status_result[:template][:id]
+      }
+    else
+      render json: {
+        template_exists: false,
+        error: 'Template not found'
+      }
+    end
+  end
+
   def parse_whatsapp_error(response_body)
     return { user_message: nil, technical_details: nil } if response_body.blank?
 

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

@@ -176,7 +176,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
      :lock_to_single_conversation, :portal_id, :sender_name_type, :business_name,
      { csat_config: [:display_type, :message, :button_text, :language,
                      { survey_rules: [:operator, { values: [] }],
-                       template: [:name, :template_id, :friendly_name, :content_sid, :approval_sid, :created_at, :language, :status] }] }]
+                       template: [:name, :template_id, :created_at, :language] }] }]
   end
 
   def permitted_params(channel_attributes = [])

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

@@ -38,11 +38,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
     generate_csv('teams_report', 'api/v2/accounts/reports/teams')
   end
 
-  def conversations_summary
-    @report_data = generate_conversations_report
-    generate_csv('conversations_summary_report', 'api/v2/accounts/reports/conversations_summary')
-  end
-
   def conversation_traffic
     @report_data = generate_conversations_heatmap_report
     timezone_offset = (params[:timezone_offset] || 0).to_f

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

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -18,12 +18,6 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::LabelSummaryBuilder)
   end
 
-  def channel
-    return render_could_not_create_error(I18n.t('errors.reports.date_range_too_long')) if date_range_too_long?
-
-    render_report_with(V2::Reports::ChannelSummaryBuilder)
-  end
-
   private
 
   def check_authorization
@@ -46,12 +40,4 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   def permitted_params
     params.permit(:since, :until, :business_hours)
   end
-
-  def date_range_too_long?
-    return false if permitted_params[:since].blank? || permitted_params[:until].blank?
-
-    since_time = Time.zone.at(permitted_params[:since].to_i)
-    until_time = Time.zone.at(permitted_params[:until].to_i)
-    (until_time - since_time) > 6.months
-  end
 end

app/helpers/api/v2/accounts/reports_helper.rb

@@ -46,13 +46,6 @@ module Api::V2::Accounts::ReportsHelper
     end
   end
 
-  def generate_conversations_report
-    builder = V2::Reports::Conversations::MetricBuilder.new(Current.account, build_params(type: :account))
-    summary = builder.summary
-
-    [generate_conversation_report_metrics(summary)]
-  end
-
   private
 
   def build_params(base_params)
@@ -78,16 +71,4 @@ module Api::V2::Accounts::ReportsHelper
       report[:resolved_conversations_count]
     ]
   end
-
-  def generate_conversation_report_metrics(summary)
-    [
-      summary[:conversations_count],
-      summary[:incoming_messages_count],
-      summary[:outgoing_messages_count],
-      Reports::TimeFormatPresenter.new(summary[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(summary[:avg_resolution_time]).format,
-      summary[:resolutions_count],
-      Reports::TimeFormatPresenter.new(summary[:reply_time]).format
-    ]
-  end
 end

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

@@ -1,18 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainPreferences extends ApiClient {
-  constructor() {
-    super('captain/preferences', { accountScoped: true });
-  }
-
-  get() {
-    return axios.get(this.url);
-  }
-
-  updatePreferences(data) {
-    return axios.put(this.url, data);
-  }
-}
-
-export default new CaptainPreferences();

app/javascript/dashboard/api/reports.js

@@ -61,12 +61,6 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationsSummaryReports({ from: since, to: until, businessHours }) {
-    return axios.get(`${this.url}/conversations_summary`, {
-      params: { since, until, business_hours: businessHours },
-    });
-  }
-
   getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
       params: { timezone_offset: getTimeOffset(), days_before: daysBefore },

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

@@ -5,7 +5,6 @@ import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
   modelValue: { type: String, default: '' },
-  editorKey: { type: String, default: '' },
   label: { type: String, default: '' },
   placeholder: { type: String, default: '' },
   focusOnMount: { type: Boolean, default: false },
@@ -97,7 +96,6 @@ watch(
       ]"
     >
       <WootEditor
-        :editor-id="editorKey"
         :model-value="modelValue"
         :placeholder="placeholder"
         :focus-on-mount="focusOnMount"
@@ -154,13 +152,6 @@ watch(
           }
         }
       }
-
-      .ProseMirror-menubar {
-        width: fit-content !important;
-        position: relative !important;
-        top: unset !important;
-        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
-      }
     }
   }
 }

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

@@ -44,12 +44,6 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const attachmentId = ref(0);
-const generateUid = () => {
-  attachmentId.value += 1;
-  return `attachment-${attachmentId.value}`;
-};
-
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);
 
@@ -182,8 +176,7 @@ const onPaste = e => {
     .filter(file => file.size > 0)
     .forEach(file => {
       const { name, type, size } = file;
-      // Add unique ID for clipboard-pasted files
-      onFileUpload({ file, name, type, size, id: generateUid() });
+      onFileUpload({ file, name, type, size });
     });
 };
 

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

@@ -7,7 +7,6 @@ import {
   appendSignature,
   removeSignature,
   getEffectiveChannelType,
-  stripUnsupportedMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -48,8 +47,6 @@ const emit = defineEmits([
   'createConversation',
 ]);
 
-const DEFAULT_FORMATTING = 'Context::Default';
-
 const showContactsDropdown = ref(false);
 const showInboxesDropdown = ref(false);
 const showCcEmailsDropdown = ref(false);
@@ -201,22 +198,10 @@ const setSelectedContact = async ({ value, action, ...rest }) => {
   showInboxesDropdown.value = true;
 };
 
-const stripMessageFormatting = channelType => {
-  if (!state.message || !channelType) return;
-
-  state.message = stripUnsupportedMarkdown(state.message, channelType, false);
-};
-
-const handleInboxAction = ({ value, action, channelType, medium, ...rest }) => {
+const handleInboxAction = ({ value, action, ...rest }) => {
   v$.value.$reset();
-
-  // Strip unsupported formatting when changing the target inbox
-  if (channelType) {
-    const newChannelType = getEffectiveChannelType(channelType, medium);
-    stripMessageFormatting(newChannelType);
-  }
-
-  emit('updateTargetInbox', { ...rest, channelType, medium });
+  state.message = '';
+  emit('updateTargetInbox', { ...rest });
   showInboxesDropdown.value = false;
   state.attachedFiles = [];
 };
@@ -236,9 +221,7 @@ const removeSignatureFromMessage = () => {
 const removeTargetInbox = value => {
   v$.value.$reset();
   removeSignatureFromMessage();
-
-  stripMessageFormatting(DEFAULT_FORMATTING);
-
+  state.message = '';
   emit('updateTargetInbox', value);
   state.attachedFiles = [];
 };
@@ -341,68 +324,67 @@ const shouldShowMessageEditor = computed(() => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
   >
-    <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
-      <ContactSelector
-        :contacts="contacts"
-        :selected-contact="selectedContact"
-        :show-contacts-dropdown="showContactsDropdown"
-        :is-loading="isLoading"
-        :is-creating-contact="isCreatingContact"
-        :contact-id="contactId"
-        :contactable-inboxes-list="contactableInboxesList"
-        :show-inboxes-dropdown="showInboxesDropdown"
-        :has-errors="validationStates.isContactInvalid"
-        @search-contacts="handleContactSearch"
-        @set-selected-contact="setSelectedContact"
-        @clear-selected-contact="clearSelectedContact"
-        @update-dropdown="handleDropdownUpdate"
-      />
-      <InboxEmptyState v-if="showNoInboxAlert" />
-      <InboxSelector
-        v-else
-        :target-inbox="targetInbox"
-        :selected-contact="selectedContact"
-        :show-inboxes-dropdown="showInboxesDropdown"
-        :contactable-inboxes-list="contactableInboxesList"
-        :has-errors="validationStates.isInboxInvalid"
-        @update-inbox="removeTargetInbox"
-        @toggle-dropdown="showInboxesDropdown = $event"
-        @handle-inbox-action="handleInboxAction"
-      />
+    <ContactSelector
+      :contacts="contacts"
+      :selected-contact="selectedContact"
+      :show-contacts-dropdown="showContactsDropdown"
+      :is-loading="isLoading"
+      :is-creating-contact="isCreatingContact"
+      :contact-id="contactId"
+      :contactable-inboxes-list="contactableInboxesList"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :has-errors="validationStates.isContactInvalid"
+      @search-contacts="handleContactSearch"
+      @set-selected-contact="setSelectedContact"
+      @clear-selected-contact="clearSelectedContact"
+      @update-dropdown="handleDropdownUpdate"
+    />
+    <InboxEmptyState v-if="showNoInboxAlert" />
+    <InboxSelector
+      v-else
+      :target-inbox="targetInbox"
+      :selected-contact="selectedContact"
+      :show-inboxes-dropdown="showInboxesDropdown"
+      :contactable-inboxes-list="contactableInboxesList"
+      :has-errors="validationStates.isInboxInvalid"
+      @update-inbox="removeTargetInbox"
+      @toggle-dropdown="showInboxesDropdown = $event"
+      @handle-inbox-action="handleInboxAction"
+    />
 
-      <EmailOptions
-        v-if="inboxTypes.isEmail"
-        v-model:cc-emails="state.ccEmails"
-        v-model:bcc-emails="state.bccEmails"
-        v-model:subject="state.subject"
-        :contacts="contacts"
-        :show-cc-emails-dropdown="showCcEmailsDropdown"
-        :show-bcc-emails-dropdown="showBccEmailsDropdown"
-        :is-loading="isLoading"
-        :has-errors="validationStates.isSubjectInvalid"
-        @search-cc-emails="searchCcEmails"
-        @search-bcc-emails="searchBccEmails"
-        @update-dropdown="handleDropdownUpdate"
-      />
+    <EmailOptions
+      v-if="inboxTypes.isEmail"
+      v-model:cc-emails="state.ccEmails"
+      v-model:bcc-emails="state.bccEmails"
+      v-model:subject="state.subject"
+      :contacts="contacts"
+      :show-cc-emails-dropdown="showCcEmailsDropdown"
+      :show-bcc-emails-dropdown="showBccEmailsDropdown"
+      :is-loading="isLoading"
+      :has-errors="validationStates.isSubjectInvalid"
+      @search-cc-emails="searchCcEmails"
+      @search-bcc-emails="searchBccEmails"
+      @update-dropdown="handleDropdownUpdate"
+    />
 
-      <MessageEditor
-        v-if="shouldShowMessageEditor"
-        v-model="state.message"
-        :message-signature="messageSignature"
-        :send-with-signature="sendWithSignature"
-        :has-errors="validationStates.isMessageInvalid"
-        :channel-type="inboxChannelType"
-        :medium="targetInbox?.medium || ''"
-      />
+    <MessageEditor
+      v-if="shouldShowMessageEditor"
+      v-model="state.message"
+      :message-signature="messageSignature"
+      :send-with-signature="sendWithSignature"
+      :has-errors="validationStates.isMessageInvalid"
+      :has-attachments="state.attachedFiles.length > 0"
+      :channel-type="inboxChannelType"
+      :medium="targetInbox?.medium || ''"
+    />
 
-      <AttachmentPreviews
-        v-if="state.attachedFiles.length > 0"
-        :attachments="state.attachedFiles"
-        @update:attachments="state.attachedFiles = $event"
-      />
-    </div>
+    <AttachmentPreviews
+      v-if="state.attachedFiles.length > 0"
+      :attachments="state.attachedFiles"
+      @update:attachments="state.attachedFiles = $event"
+    />
 
     <ActionButtons
       :attached-files="state.attachedFiles"

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

@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
       <DropdownMenu
         v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
         :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

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

@@ -6,6 +6,7 @@ import Editor from 'dashboard/components-next/Editor/Editor.vue';
 
 const props = defineProps({
   hasErrors: { type: Boolean, default: false },
+  hasAttachments: { type: Boolean, default: false },
   sendWithSignature: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   channelType: { type: String, default: '' },
@@ -23,14 +24,14 @@ const modelValue = defineModel({
 </script>
 
 <template>
-  <div class="flex-1 h-full">
+  <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
     <Editor
+      :key="editorKey"
       v-model="modelValue"
-      :editor-key="editorKey"
       :placeholder="
         t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
       "
-      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[12.5rem] [&_.ProseMirror-woot-style]:!min-h-[10rem] [&_.ProseMirror-menubar]:!pt-0 [&_.mention--box]:-top-[7.5rem] [&_.mention--box]:bottom-[unset]"
+      class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 [&>div]:!bg-transparent h-full [&_.ProseMirror-woot-style]:!max-h-[200px]"
       :class="
         hasErrors
           ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'

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

@@ -11,6 +11,7 @@ export const CONVERSATION_ATTRIBUTES = {
   CAMPAIGN_ID: 'campaign_id',
   LABELS: 'labels',
   BROWSER_LANGUAGE: 'browser_language',
+  COUNTRY_CODE: 'country_code',
   REFERER: 'referer',
   CREATED_AT: 'created_at',
   LAST_ACTIVITY_AT: 'last_activity_at',

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

@@ -7,6 +7,7 @@ import {
   buildAttributesFilterTypes,
   CONVERSATION_ATTRIBUTES,
 } from './helper/filterHelper';
+import countries from 'shared/constants/countries.js';
 import languages from 'dashboard/components/widgets/conversation/advancedFilterItems/languages.js';
 
 /**
@@ -217,6 +218,17 @@ export function useConversationFilterContext() {
       filterOperators: equalityOperators.value,
       attributeModel: 'additional',
     },
+    {
+      attributeKey: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
+      value: CONVERSATION_ATTRIBUTES.COUNTRY_CODE,
+      attributeName: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      label: t('FILTER.ATTRIBUTES.COUNTRY_NAME'),
+      inputType: 'searchSelect',
+      options: countries,
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'additional',
+    },
     {
       attributeKey: CONVERSATION_ATTRIBUTES.REFERER,
       value: CONVERSATION_ATTRIBUTES.REFERER,

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

@@ -15,6 +15,7 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
 import SidebarProfileMenu from './SidebarProfileMenu.vue';
 import SidebarChangelogCard from './SidebarChangelogCard.vue';
+import YearInReviewBanner from '../year-in-review/YearInReviewBanner.vue';
 import ChannelLeaf from './ChannelLeaf.vue';
 import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
@@ -484,12 +485,6 @@ const menuItems = computed(() => {
           icon: 'i-lucide-briefcase',
           to: accountScopedRoute('general_settings_index'),
         },
-        // {
-        //   name: 'Settings Captain',
-        //   label: t('SIDEBAR.CAPTAIN_AI'),
-        //   icon: 'i-woot-captain',
-        //   to: accountScopedRoute('captain_settings_index'),
-        // },
         {
           name: 'Settings Agents',
           label: t('SIDEBAR.AGENTS'),
@@ -660,6 +655,7 @@ const menuItems = computed(() => {
       <div
         class="pointer-events-none absolute inset-x-0 -top-[31px] h-8 bg-gradient-to-t from-n-solid-2 to-transparent"
       />
+      <YearInReviewBanner />
       <SidebarChangelogCard
         v-if="isOnChatwootCloud && !isACustomBrandedInstance"
       />

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

@@ -1,11 +1,13 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
 import Auth from 'dashboard/api/auth';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import Avatar from 'next/avatar/Avatar.vue';
 import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import YearInReviewModal from 'dashboard/components-next/year-in-review/YearInReviewModal.vue';
 
 import {
   DropdownContainer,
@@ -22,6 +24,7 @@ defineOptions({
 });
 
 const { t } = useI18n();
+const { uiSettings } = useUISettings();
 
 const currentUser = useMapGetter('getCurrentUser');
 const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
@@ -31,6 +34,29 @@ const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
 );
 
+const showYearInReviewModal = ref(false);
+
+const bannerClosedKey = computed(() => {
+  return `yir_closed_${accountId.value}_2025`;
+});
+
+const isBannerClosed = computed(() => {
+  return uiSettings.value?.[bannerClosedKey.value] === true;
+});
+
+const showYearInReviewMenuItem = computed(() => {
+  return isBannerClosed.value;
+});
+
+const openYearInReviewModal = () => {
+  showYearInReviewModal.value = true;
+  emit('close');
+};
+
+const closeYearInReviewModal = () => {
+  showYearInReviewModal.value = false;
+};
+
 const showChatSupport = computed(() => {
   return (
     isFeatureEnabledonAccount.value(
@@ -42,6 +68,13 @@ const showChatSupport = computed(() => {
 
 const menuItems = computed(() => {
   return [
+    {
+      show: showYearInReviewMenuItem.value,
+      showOnCustomBrandedInstance: false,
+      label: t('SIDEBAR_ITEMS.YEAR_IN_REVIEW'),
+      icon: 'i-lucide-gift',
+      click: openYearInReviewModal,
+    },
     {
       show: showChatSupport.value,
       showOnCustomBrandedInstance: false,
@@ -157,4 +190,9 @@ const allowedMenuItems = computed(() => {
       </template>
     </DropdownBody>
   </DropdownContainer>
+
+  <YearInReviewModal
+    :show="showYearInReviewModal"
+    @close="closeYearInReviewModal"
+  />
 </template>

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

@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
         v-if="showDropdownMenu"
         :menu-items="filteredMenuItems"
         :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
         @action="handleDropdownAction"
       />
     </div>

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

@@ -206,14 +206,10 @@ const emitDateRange = () => {
     emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
   }
 };
-
-const closeDatePicker = () => {
-  showDatePicker.value = false;
-};
 </script>
 
 <template>
-  <div v-on-clickaway="closeDatePicker" class="relative font-inter">
+  <div class="relative font-inter">
     <DatePickerButton
       :selected-start-date="selectedStartDate"
       :selected-end-date="selectedEndDate"

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

@@ -38,7 +38,7 @@ const toggleShowMore = () => {
     <button
       v-if="text.length > limit"
       class="text-n-brand !p-0 !border-0 align-top"
-      @click.stop="toggleShowMore"
+      @click="toggleShowMore"
     >
       {{ buttonLabel }}
     </button>

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

@@ -45,7 +45,6 @@ import {
   removeSignature,
   getEffectiveChannelType,
 } from 'dashboard/helper/editorHelper';
-import { isFileTypeAllowedForChannel } from 'shared/helpers/FileHelper';
 
 import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
 import { LocalStorage } from 'shared/helpers/localStorage';
@@ -638,25 +637,6 @@ export default {
       // Filter valid files (non-zero size)
       Array.from(e.clipboardData.files)
         .filter(file => file.size > 0)
-        .filter(file => {
-          const isAllowed = isFileTypeAllowedForChannel(file, {
-            channelType: this.channelType || this.inbox?.channel_type,
-            medium: this.inbox?.medium,
-            conversationType: this.conversationType,
-            isInstagramChannel: this.isAnInstagramChannel,
-            isOnPrivateNote: this.isOnPrivateNote,
-          });
-
-          if (!isAllowed) {
-            useAlert(
-              this.$t('CONVERSATION.FILE_TYPE_NOT_SUPPORTED', {
-                fileName: file.name,
-              })
-            );
-          }
-
-          return isAllowed;
-        })
         .forEach(file => {
           const { name, type, size } = file;
           this.onFileUpload({ name, type, size, file });

app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js

@@ -78,6 +78,14 @@ const filterTypes = [
     filterOperators: OPERATOR_TYPES_1,
     attributeModel: 'additional',
   },
+  {
+    attributeKey: 'country_code',
+    attributeI18nKey: 'COUNTRY_NAME',
+    inputType: 'search_select',
+    dataType: 'text',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'additional',
+  },
   {
     attributeKey: 'referer',
     attributeI18nKey: 'REFERER_LINK',
@@ -163,6 +171,10 @@ export const filterAttributeGroups = [
         key: 'browser_language',
         i18nKey: 'BROWSER_LANGUAGE',
       },
+      {
+        key: 'country_code',
+        i18nKey: 'COUNTRY_NAME',
+      },
       {
         key: 'referer',
         i18nKey: 'REFERER_LINK',

app/javascript/dashboard/helper/editorHelper.js

@@ -38,14 +38,9 @@ export function extractTextFromMarkdown(markdown) {
  *
  * @param {string} markdown - markdown text to process
  * @param {string} channelType - The channel type to check supported formatting
- * @param {boolean} cleanWhitespace - Whether to clean up extra whitespace and blank lines (default: true for signatures)
  * @returns {string} - The markdown with unsupported formatting removed
  */
-export function stripUnsupportedMarkdown(
-  markdown,
-  channelType,
-  cleanWhitespace = true
-) {
+export function stripUnsupportedSignatureMarkdown(markdown, channelType) {
   if (!markdown) return '';
 
   const { marks = [], nodes = [] } = FORMATTING[channelType] || {};
@@ -60,9 +55,6 @@ export function stripUnsupportedMarkdown(
     );
   }, markdown);
 
-  if (!cleanWhitespace) return result;
-
-  // Clean whitespace for signatures
   return result
     .split('\n')
     .map(line => line.trim())
@@ -163,7 +155,7 @@ export function getEffectiveChannelType(channelType, medium) {
 export function appendSignature(body, signature, channelType) {
   // Strip only unsupported formatting based on channel capabilities
   const preparedSignature = channelType
-    ? stripUnsupportedMarkdown(signature, channelType)
+    ? stripUnsupportedSignatureMarkdown(signature, channelType)
     : signature;
   const cleanedSignature = cleanSignature(preparedSignature);
   // if signature is already present, return body
@@ -186,7 +178,7 @@ export function appendSignature(body, signature, channelType) {
 export function removeSignature(body, signature, channelType) {
   // Build unique list of signature variants to try
   const channelStripped = channelType
-    ? cleanSignature(stripUnsupportedMarkdown(signature, channelType))
+    ? cleanSignature(stripUnsupportedSignatureMarkdown(signature, channelType))
     : null;
   const signaturesToTry = [
     cleanSignature(signature),

app/javascript/dashboard/helper/emailQuoteExtractor.js

@@ -1,5 +1,3 @@
-import DOMPurify from 'dompurify';
-
 // Quote detection strategies
 const QUOTE_INDICATORS = [
   '.gmail_quote_container',
@@ -31,7 +29,7 @@ export class EmailQuoteExtractor {
   static extractQuotes(htmlContent) {
     // Create a temporary DOM element to parse HTML
     const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = DOMPurify.sanitize(htmlContent);
+    tempDiv.innerHTML = htmlContent;
 
     // Remove elements matching class selectors
     QUOTE_INDICATORS.forEach(selector => {
@@ -58,7 +56,7 @@ export class EmailQuoteExtractor {
    */
   static hasQuotes(htmlContent) {
     const tempDiv = document.createElement('div');
-    tempDiv.innerHTML = DOMPurify.sanitize(htmlContent);
+    tempDiv.innerHTML = htmlContent;
 
     // Check for class-based quotes
     // eslint-disable-next-line no-restricted-syntax

app/javascript/dashboard/helper/featureHelper.js

@@ -20,7 +20,6 @@ const FEATURE_HELP_URLS = {
   webhook: 'https://chwt.app/hc/webhooks',
   billing: 'https://chwt.app/pricing',
   saml: 'https://chwt.app/hc/saml',
-  captain_billing: 'https://chwt.app/hc/captain_billing',
 };
 
 export function getHelpUrlForFeature(featureName) {

app/javascript/dashboard/helper/quotedEmailHelper.js

@@ -1,5 +1,4 @@
 import { format, parseISO, isValid as isValidDate } from 'date-fns';
-import DOMPurify from 'dompurify';
 
 /**
  * Extracts plain text from HTML content
@@ -14,7 +13,7 @@ export const extractPlainTextFromHtml = html => {
     return html.replace(/<[^>]*>/g, ' ');
   }
   const tempDiv = document.createElement('div');
-  tempDiv.innerHTML = DOMPurify.sanitize(html);
+  tempDiv.innerHTML = html;
   return tempDiv.textContent || tempDiv.innerText || '';
 };
 

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

@@ -5,7 +5,7 @@ import {
   replaceSignature,
   cleanSignature,
   extractTextFromMarkdown,
-  stripUnsupportedMarkdown,
+  stripUnsupportedSignatureMarkdown,
   insertAtCursor,
   findNodeToInsertImage,
   setURLWithQueryAndSize,
@@ -145,19 +145,25 @@ describe('appendSignature', () => {
   });
 });
 
-describe('stripUnsupportedMarkdown', () => {
+describe('stripUnsupportedSignatureMarkdown', () => {
   const richSignature =
     '**Bold** _italic_ [link](http://example.com) ![](http://localhost:3000/image.png)';
 
   it('keeps all formatting for Email channel (supports image, link, strong, em)', () => {
-    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Email');
+    const result = stripUnsupportedSignatureMarkdown(
+      richSignature,
+      'Channel::Email'
+    );
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('[link](http://example.com)');
     expect(result).toContain('![](http://localhost:3000/image.png)');
   });
   it('strips images but keeps bold/italic for Api channel', () => {
-    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Api');
+    const result = stripUnsupportedSignatureMarkdown(
+      richSignature,
+      'Channel::Api'
+    );
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('link'); // link text kept
@@ -165,14 +171,20 @@ describe('stripUnsupportedMarkdown', () => {
     expect(result).not.toContain('![]('); // image removed
   });
   it('strips images but keeps bold/italic/link for Telegram channel', () => {
-    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Telegram');
+    const result = stripUnsupportedSignatureMarkdown(
+      richSignature,
+      'Channel::Telegram'
+    );
     expect(result).toContain('**Bold**');
     expect(result).toContain('_italic_');
     expect(result).toContain('[link](http://example.com)');
     expect(result).not.toContain('![](');
   });
   it('strips all formatting for SMS channel', () => {
-    const result = stripUnsupportedMarkdown(richSignature, 'Channel::Sms');
+    const result = stripUnsupportedSignatureMarkdown(
+      richSignature,
+      'Channel::Sms'
+    );
     expect(result).toContain('Bold');
     expect(result).toContain('italic');
     expect(result).toContain('link');
@@ -182,52 +194,8 @@ describe('stripUnsupportedMarkdown', () => {
     expect(result).not.toContain('![](');
   });
   it('returns empty string for empty input', () => {
-    expect(stripUnsupportedMarkdown('', 'Channel::Api')).toBe('');
-    expect(stripUnsupportedMarkdown(null, 'Channel::Api')).toBe('');
-  });
-
-  describe('with cleanWhitespace parameter', () => {
-    const textWithWhitespace =
-      '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  ';
-
-    it('cleans whitespace when cleanWhitespace=true (default)', () => {
-      const result = stripUnsupportedMarkdown(
-        textWithWhitespace,
-        'Channel::Api',
-        true
-      );
-      expect(result).toBe(
-        '**Bold** text\nWith multiple\nLine breaks\nAnd spaces'
-      );
-      expect(result).not.toContain('\n\n');
-      expect(result).not.toContain('  ');
-    });
-
-    it('preserves whitespace when cleanWhitespace=false', () => {
-      const result = stripUnsupportedMarkdown(
-        textWithWhitespace,
-        'Channel::Api',
-        false
-      );
-      expect(result).toContain('\n\n');
-      expect(result).toContain('  And spaces  ');
-      expect(result).toBe(
-        '**Bold** text\n\nWith multiple\n\nLine breaks\n\n  And spaces  '
-      );
-    });
-
-    it('strips formatting but preserves whitespace for messages', () => {
-      const messageWithFormatting = '**Bold**\n\n`code`\n\nNormal text';
-      const result = stripUnsupportedMarkdown(
-        messageWithFormatting,
-        'Channel::Sms',
-        false
-      );
-      expect(result).toBe('Bold\n\ncode\n\nNormal text');
-      expect(result).toContain('\n\n');
-      expect(result).not.toContain('**');
-      expect(result).not.toContain('`');
-    });
+    expect(stripUnsupportedSignatureMarkdown('', 'Channel::Api')).toBe('');
+    expect(stripUnsupportedSignatureMarkdown(null, 'Channel::Api')).toBe('');
   });
 });
 

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

@@ -96,58 +96,4 @@ describe('EmailQuoteExtractor', () => {
   it('detects quotes for trailing blockquotes even when signatures follow text', () => {
     expect(EmailQuoteExtractor.hasQuotes(EMAIL_WITH_SIGNATURE)).toBe(true);
   });
-
-  describe('HTML sanitization', () => {
-    it('removes onerror handlers from img tags in extractQuotes', () => {
-      const maliciousHtml = '<p>Hello</p><img src="x" onerror="alert(1)">';
-      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
-
-      expect(cleanedHtml).not.toContain('onerror');
-      expect(cleanedHtml).toContain('<p>Hello</p>');
-    });
-
-    it('removes onerror handlers from img tags in hasQuotes', () => {
-      const maliciousHtml = '<p>Hello</p><img src="x" onerror="alert(1)">';
-      // Should not throw and should safely check for quotes
-      const result = EmailQuoteExtractor.hasQuotes(maliciousHtml);
-      expect(result).toBe(false);
-    });
-
-    it('removes script tags in extractQuotes', () => {
-      const maliciousHtml =
-        '<p>Content</p><script>alert("xss")</script><p>More</p>';
-      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
-
-      expect(cleanedHtml).not.toContain('<script');
-      expect(cleanedHtml).not.toContain('alert');
-      expect(cleanedHtml).toContain('<p>Content</p>');
-      expect(cleanedHtml).toContain('<p>More</p>');
-    });
-
-    it('removes onclick handlers in extractQuotes', () => {
-      const maliciousHtml = '<p onclick="alert(1)">Click me</p>';
-      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
-
-      expect(cleanedHtml).not.toContain('onclick');
-      expect(cleanedHtml).toContain('Click me');
-    });
-
-    it('removes javascript: URLs in extractQuotes', () => {
-      const maliciousHtml = '<a href="javascript:alert(1)">Link</a>';
-      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
-
-      // eslint-disable-next-line no-script-url
-      expect(cleanedHtml).not.toContain('javascript:');
-      expect(cleanedHtml).toContain('Link');
-    });
-
-    it('removes encoded payloads with event handlers in extractQuotes', () => {
-      const maliciousHtml =
-        '<img src="x" id="PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg==" onerror="eval(atob(this.id))">';
-      const cleanedHtml = EmailQuoteExtractor.extractQuotes(maliciousHtml);
-
-      expect(cleanedHtml).not.toContain('onerror');
-      expect(cleanedHtml).not.toContain('eval');
-    });
-  });
 });

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

@@ -33,26 +33,6 @@ describe('quotedEmailHelper', () => {
       expect(result).toContain('Line 1');
       expect(result).toContain('Line 2');
     });
-
-    it('sanitizes onerror handlers from img tags', () => {
-      const html = '<p>Hello</p><img src="x" onerror="alert(1)">';
-      const result = extractPlainTextFromHtml(html);
-      expect(result).toBe('Hello');
-    });
-
-    it('sanitizes script tags', () => {
-      const html = '<p>Safe</p><script>alert(1)</script><p>Content</p>';
-      const result = extractPlainTextFromHtml(html);
-      expect(result).toContain('Safe');
-      expect(result).toContain('Content');
-      expect(result).not.toContain('alert');
-    });
-
-    it('sanitizes onclick handlers', () => {
-      const html = '<p onclick="alert(1)">Click me</p>';
-      const result = extractPlainTextFromHtml(html);
-      expect(result).toBe('Click me');
-    });
   });
 
   describe('getEmailSenderName', () => {

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

@@ -247,7 +247,6 @@
     "SUCCESS_DELETE_CONVERSATION": "Conversation deleted successfully",
     "FAIL_DELETE_CONVERSATION": "Couldn't delete conversation! Try again",
     "FILE_SIZE_LIMIT": "File exceeds the {MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE} MB attachment limit",
-    "FILE_TYPE_NOT_SUPPORTED": "This {fileName} file type is not supported in this conversation",
     "MESSAGE_ERROR": "Unable to send this message, please try again later",
     "SENT_BY": "Sent by:",
     "BOT": "Bot",

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

@@ -7,7 +7,6 @@
     },
     "CLOSE": "Close",
     "BETA": "Beta",
-    "BETA_DESCRIPTION": "This feature is in beta and may change as we improve it.",
-    "PREFERRED": "Preferred"
+    "BETA_DESCRIPTION": "This feature is in beta and may change as we improve it."
   }
 }

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

@@ -403,7 +403,6 @@
       "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
     },
     "ENTERPRISE_PAYWALL": {
-      "AVAILABLE_ON": "Captain AI is only available in the Enterprise plans.",
       "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
       "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
     },

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

@@ -3,7 +3,7 @@
     "HEADER": "Conversations",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
-    "DOWNLOAD_CONVERSATION_REPORTS": "Download conversation reports",
+    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
     "DATA_FETCHING_FAILED": "Failed to fetch data, please try again later.",
     "SUMMARY_FETCHING_FAILED": "Failed to fetch summary, please try again later.",
     "METRICS": {
@@ -402,48 +402,22 @@
   },
   "CSAT_REPORTS": {
     "HEADER": "CSAT Reports",
-    "NO_RECORDS": "No responses yet",
-    "NO_RECORDS_DESCRIPTION": "CSAT survey responses will appear here once customers start providing feedback.",
+    "NO_RECORDS": "There are no CSAT survey responses available.",
     "DOWNLOAD": "Download CSAT Reports",
     "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
     "FILTERS": {
-      "ADD_FILTER": "Add filter",
-      "CLEAR_ALL": "Clear all",
-      "NO_FILTER": "No filters available",
-      "INPUT_PLACEHOLDER": {
-        "AGENTS": "Search agents",
-        "INBOXES": "Search inboxes",
-        "TEAMS": "Search teams",
-        "RATINGS": "Search ratings"
-      },
       "AGENTS": {
-        "LABEL": "Agent"
-      },
-      "INBOXES": {
-        "LABEL": "Inbox"
-      },
-      "TEAMS": {
-        "LABEL": "Team"
-      },
-      "RATINGS": {
-        "LABEL": "Rating"
+        "PLACEHOLDER": "Choose Agents"
       }
     },
     "TABLE": {
       "HEADER": {
         "CONTACT_NAME": "Contact",
-        "AGENT_NAME": "Agent",
+        "AGENT_NAME": "Assigned agent",
         "RATING": "Rating",
-        "FEEDBACK_TEXT": "Feedback comment",
-        "CONVERSATION": "Conversation",
-        "CUSTOMER": "Customer",
-        "RESPONSE": "Response",
-        "HANDLED_BY": "Handled by"
-      },
-      "UNKNOWN_CUSTOMER": "Unknown customer"
+        "FEEDBACK_TEXT": "Feedback comment"
+      }
     },
-    "NO_AGENT": "No assigned agent",
-    "NO_FEEDBACK": "No feedback provided",
     "METRIC": {
       "TOTAL_RESPONSES": {
         "LABEL": "Total responses",
@@ -456,25 +430,6 @@
       "RESPONSE_RATE": {
         "LABEL": "Response rate",
         "TOOLTIP": "Total number of responses / Total number of CSAT survey messages sent * 100"
-      },
-      "RATING_DISTRIBUTION": "Rating distribution"
-    },
-    "REVIEW_NOTES": {
-      "TITLE": "Review notes",
-      "PLACEHOLDER": "Add review notes about this rating...",
-      "SAVE": "Save",
-      "CANCEL": "Cancel",
-      "SAVING": "Saving...",
-      "SAVED": "Notes saved successfully",
-      "SAVE_ERROR": "Failed to save notes",
-      "UPDATED_BY": "Updated by {name} {time}",
-      "UPDATED_BY_LABEL": "Updated by",
-      "PAYWALL": {
-        "TITLE": "Upgrade to add review notes",
-        "AVAILABLE_ON": "The review notes feature is only available in the Business and Enterprise plans.",
-        "UPGRADE_PROMPT": "Add internal context to every CSAT response with review notes. Capture what really happened, spot patterns faster, and make better decisions from your feedback.",
-        "UPGRADE_NOW": "Upgrade now",
-        "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
       }
     }
   },

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

@@ -378,56 +378,7 @@
       "INFO_SHORT": "Automatically mark offline when you aren't using the app."
     },
     "DOCS": "Read docs",
-    "SECURITY": "Security",
-    "CAPTAIN_AI": "Captain"
-  },
-  "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.",
-    "LOADING": "Loading Captain configuration...",
-    "LINK_TEXT": "Learn more about Captain Credits",
-    "NOT_ENABLED": "Captain is not enabled for your account. Please upgrade your plan to access Captain features.",
-    "MODEL_CONFIG": {
-      "TITLE": "Model Configuration",
-      "DESCRIPTION": "Select AI models for different features.",
-      "SELECT_MODEL": "Select model",
-      "CREDITS_PER_MESSAGE": "{credits} credit/message",
-      "COMING_SOON": "Coming soon",
-      "EDITOR": {
-        "TITLE": "Editor Features",
-        "DESCRIPTION": "Powers smart compose, grammar corrections, tone adjustments, and content enhancement in your message editor."
-      },
-      "ASSISTANT": {
-        "TITLE": "Assistant",
-        "DESCRIPTION": "Handles automated responses, conversation summaries, and intelligent reply suggestions for customer interactions."
-      },
-      "COPILOT": {
-        "TITLE": "Co-pilot",
-        "DESCRIPTION": "Provides real-time contextual suggestions, knowledge base recommendations, and proactive insights during conversations."
-      }
-    },
-    "FEATURES": {
-      "TITLE": "Features",
-      "DESCRIPTION": "Enable or disable AI-powered features.",
-      "AUDIO_TRANSCRIPTION": {
-        "TITLE": "Audio Transcription",
-        "DESCRIPTION": "Automatically convert voice messages and call recordings into searchable text transcripts."
-      },
-      "HELP_CENTER_SEARCH": {
-        "TITLE": "Help Center Search Indexing",
-        "DESCRIPTION": "Use AI for context aware search inside your help center articles."
-      },
-      "LABEL_SUGGESTION": {
-        "TITLE": "Label Suggestion",
-        "DESCRIPTION": "Automatically suggest relevant labels and tags for conversations based on content analysis and context.",
-        "MODEL_TITLE": "Label Suggestion Model",
-        "MODEL_DESCRIPTION": "Select the AI model to use for analyzing conversations and suggesting appropriate labels"
-      }
-    },
-    "API": {
-      "SUCCESS": "Captain settings updated successfully.",
-      "ERROR": "Failed to update Captain settings. Please try again."
-    }
+    "SECURITY": "Security"
   },
   "BILLING_SETTINGS": {
     "TITLE": "Billing",

app/javascript/dashboard/modules/search/components/SearchView.vue

@@ -370,7 +370,7 @@ onUnmounted(() => {
       />
     </div>
     <section class="flex flex-col flex-grow w-full h-full overflow-hidden">
-      <div class="w-full max-w-5xl mx-auto z-30">
+      <div class="w-full max-w-5xl mx-auto z-[60]">
         <div class="flex flex-col w-full px-4">
           <SearchHeader
             v-model:filters="filters"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, watch, ref, nextTick } from 'vue';
+import { computed, onMounted, ref, nextTick } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -49,14 +49,10 @@ const handleCreateClose = () => {
   selectedInbox.value = null;
 };
 
-watch(
-  assistantId,
-  newId => {
-    store.dispatch('captainInboxes/get', {
-      assistantId: newId,
-    });
-  },
-  { immediate: true }
+onMounted(() =>
+  store.dispatch('captainInboxes/get', {
+    assistantId: assistantId.value,
+  })
 );
 </script>
 

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

@@ -1,182 +0,0 @@
-<script setup>
-import { computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-import { useAlert } from 'dashboard/composables';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useCaptain } from 'dashboard/composables/useCaptain';
-import { useConfig } from 'dashboard/composables/useConfig';
-import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
-
-import SettingsLayout from '../SettingsLayout.vue';
-import BaseSettingsHeader from '../components/BaseSettingsHeader.vue';
-import SectionLayout from '../account/components/SectionLayout.vue';
-import ModelSelector from './components/ModelSelector.vue';
-import FeatureToggle from './components/FeatureToggle.vue';
-import CaptainPaywall from 'next/captain/pageComponents/Paywall.vue';
-
-const { t } = useI18n();
-const { captainEnabled } = useCaptain();
-const { isEnterprise, enterprisePlanName } = useConfig();
-const { isOnChatwootCloud } = useAccount();
-
-const captainConfigStore = useCaptainConfigStore();
-const { uiFlags } = storeToRefs(captainConfigStore);
-
-const isLoading = computed(() => uiFlags.value.isFetching);
-
-const modelFeatures = computed(() => [
-  {
-    key: 'editor',
-    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.EDITOR.TITLE'),
-    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.EDITOR.DESCRIPTION'),
-  },
-  {
-    key: 'assistant',
-    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.ASSISTANT.TITLE'),
-    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.ASSISTANT.DESCRIPTION'),
-    enterprise: true,
-  },
-  {
-    key: 'copilot',
-    title: t('CAPTAIN_SETTINGS.MODEL_CONFIG.COPILOT.TITLE'),
-    description: t('CAPTAIN_SETTINGS.MODEL_CONFIG.COPILOT.DESCRIPTION'),
-    enterprise: true,
-  },
-]);
-
-const featureToggles = computed(() => [
-  {
-    key: 'label_suggestion',
-  },
-  {
-    key: 'help_center_search',
-    enterprise: true,
-  },
-  {
-    key: 'audio_transcription',
-    enterprise: true,
-  },
-]);
-
-const shouldShowFeature = feature => {
-  // Cloud will always see these features as long as captain is enabled
-  if (isOnChatwootCloud.value && captainEnabled) {
-    return true;
-  }
-
-  if (feature.enterprise) {
-    // if the app is in enterprise mode, then we can show the feature
-    // this is not the installation plan, but when the enterprise folder is missing
-    return isEnterprise;
-  }
-
-  return true;
-};
-
-const isFeatureAccessible = feature => {
-  // Cloud will always see these features as long as captain is enabled
-  if (isOnChatwootCloud.value && captainEnabled) {
-    return true;
-  }
-
-  if (feature.enterprise) {
-    // plan is shown, but is it accessible?
-    // This ensures that the instance has purchased the enterprise license, and only then we allow
-    // access
-    return isEnterprise && enterprisePlanName === 'enterprise';
-  }
-
-  return true;
-};
-
-async function handleFeatureToggle({ feature, enabled }) {
-  try {
-    await captainConfigStore.updatePreferences({
-      captain_features: { [feature]: enabled },
-    });
-    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
-  } catch (error) {
-    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
-    captainConfigStore.fetch();
-  }
-}
-
-async function handleModelChange({ feature, model }) {
-  try {
-    await captainConfigStore.updatePreferences({
-      captain_models: { [feature]: model },
-    });
-    useAlert(t('CAPTAIN_SETTINGS.API.SUCCESS'));
-  } catch (error) {
-    useAlert(t('CAPTAIN_SETTINGS.API.ERROR'));
-    captainConfigStore.fetch();
-  }
-}
-
-onMounted(() => {
-  captainConfigStore.fetch();
-});
-</script>
-
-<template>
-  <SettingsLayout
-    :is-loading="isLoading"
-    :no-records-message="t('CAPTAIN_SETTINGS.NOT_ENABLED')"
-    :loading-message="t('CAPTAIN_SETTINGS.LOADING')"
-  >
-    <template #header>
-      <BaseSettingsHeader
-        :title="t('CAPTAIN_SETTINGS.TITLE')"
-        :description="t('CAPTAIN_SETTINGS.DESCRIPTION')"
-        :link-text="t('CAPTAIN_SETTINGS.LINK_TEXT')"
-        icon-name="captain"
-        feature-name="captain_billing"
-      />
-    </template>
-    <template #body>
-      <div v-if="captainEnabled" class="flex flex-col gap-1">
-        <!-- Model Configuration Section -->
-        <SectionLayout
-          :title="t('CAPTAIN_SETTINGS.MODEL_CONFIG.TITLE')"
-          :description="t('CAPTAIN_SETTINGS.MODEL_CONFIG.DESCRIPTION')"
-        >
-          <div class="grid gap-4">
-            <ModelSelector
-              v-for="feature in modelFeatures"
-              v-show="shouldShowFeature(feature)"
-              :key="feature.key"
-              :is-allowed="isFeatureAccessible(feature)"
-              :feature-key="feature.key"
-              :title="feature.title"
-              :description="feature.description"
-              @change="handleModelChange"
-            />
-          </div>
-        </SectionLayout>
-
-        <!-- Features Section -->
-        <SectionLayout
-          :title="t('CAPTAIN_SETTINGS.FEATURES.TITLE')"
-          :description="t('CAPTAIN_SETTINGS.FEATURES.DESCRIPTION')"
-          with-border
-        >
-          <div class="grid gap-4">
-            <FeatureToggle
-              v-for="feature in featureToggles"
-              v-show="shouldShowFeature(feature)"
-              :key="feature.key"
-              :is-allowed="isFeatureAccessible(feature)"
-              :feature-key="feature.key"
-              @change="handleFeatureToggle"
-              @model-change="handleModelChange"
-            />
-          </div>
-        </SectionLayout>
-      </div>
-      <div v-else>
-        <CaptainPaywall />
-      </div>
-    </template>
-  </SettingsLayout>
-</template>

app/javascript/dashboard/routes/dashboard/settings/captain/captain.routes.js

@@ -1,38 +0,0 @@
-import { frontendURL } from '../../../../helper/URLHelper';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
-import SettingsWrapper from '../SettingsWrapper.vue';
-import Index from './Index.vue';
-
-export default {
-  routes: [
-    {
-      path: frontendURL('accounts/:accountId/settings/captain'),
-      meta: {
-        permissions: ['administrator'],
-        featureFlag: FEATURE_FLAGS.CAPTAIN,
-      },
-      component: SettingsWrapper,
-      props: {
-        headerTitle: 'CAPTAIN_SETTINGS.TITLE',
-        icon: 'i-lucide-bot',
-        showNewButton: false,
-      },
-      children: [
-        {
-          path: '',
-          name: 'captain_settings_index',
-          component: Index,
-          meta: {
-            permissions: ['administrator'],
-            featureFlag: FEATURE_FLAGS.CAPTAIN,
-            installationTypes: [
-              INSTALLATION_TYPES.ENTERPRISE,
-              INSTALLATION_TYPES.CLOUD,
-            ],
-          },
-        },
-      ],
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/settings/captain/components/FeatureToggle.vue

@@ -1,144 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { storeToRefs } from 'pinia';
-import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
-import Switch from 'dashboard/components-next/switch/Switch.vue';
-import ModelDropdown from './ModelDropdown.vue';
-
-const props = defineProps({
-  featureKey: {
-    type: String,
-    required: true,
-  },
-  isAllowed: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['change', 'modelChange']);
-
-const { t } = useI18n();
-const captainConfigStore = useCaptainConfigStore();
-const { features } = storeToRefs(captainConfigStore);
-
-const availableModels = computed(() =>
-  captainConfigStore.getModelsForFeature(props.featureKey)
-);
-
-const isEnabled = ref(false);
-
-const featureConfig = computed(() => features.value[props.featureKey]);
-
-const hasMultipleModels = computed(() => {
-  return availableModels.value && availableModels.value.length > 1;
-});
-
-const showModelSelector = computed(() => {
-  return isEnabled.value && hasMultipleModels.value;
-});
-
-const title = computed(() => {
-  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.TITLE');
-  }
-  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
-    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.TITLE');
-  }
-  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.TITLE');
-  }
-  return '';
-});
-
-const description = computed(() => {
-  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.DESCRIPTION');
-  }
-  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
-    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.DESCRIPTION');
-  }
-  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.DESCRIPTION');
-  }
-  return '';
-});
-
-const modelTitle = computed(() => {
-  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.MODEL_TITLE');
-  }
-  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
-    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.MODEL_TITLE');
-  }
-  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.MODEL_TITLE');
-  }
-  return '';
-});
-
-const modelDescription = computed(() => {
-  if (props.featureKey.toUpperCase() === 'AUDIO_TRANSCRIPTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.AUDIO_TRANSCRIPTION.MODEL_DESCRIPTION');
-  }
-  if (props.featureKey.toUpperCase() === 'HELP_CENTER_SEARCH') {
-    return t('CAPTAIN_SETTINGS.FEATURES.HELP_CENTER_SEARCH.MODEL_DESCRIPTION');
-  }
-  if (props.featureKey.toUpperCase() === 'LABEL_SUGGESTION') {
-    return t('CAPTAIN_SETTINGS.FEATURES.LABEL_SUGGESTION.MODEL_DESCRIPTION');
-  }
-  return '';
-});
-
-watch(
-  featureConfig,
-  newConfig => {
-    if (newConfig !== undefined) {
-      isEnabled.value = !!newConfig.enabled;
-    }
-  },
-  { immediate: true }
-);
-
-const toggleFeature = () => {
-  emit('change', { feature: props.featureKey, enabled: isEnabled.value });
-};
-
-const handleModelChange = ({ feature, model }) => {
-  emit('modelChange', { feature, model });
-};
-</script>
-
-<template>
-  <div
-    class="p-4 rounded-xl border border-n-weak bg-n-solid-1 flex"
-    :class="{
-      'flex-col gap-3': showModelSelector,
-      'items-center justify-between gap-4': !showModelSelector,
-      'opacity-60 pointer-events-none': !isAllowed,
-    }"
-  >
-    <div class="flex items-center justify-between gap-4 flex-1">
-      <div class="flex-1 min-w-0">
-        <h4 class="text-sm font-medium text-n-slate-12">{{ title }}</h4>
-        <p class="text-sm text-n-slate-11 mt-0.5">{{ description }}</p>
-      </div>
-      <div v-if="isAllowed" class="flex-shrink-0">
-        <Switch v-model="isEnabled" @change="toggleFeature" />
-      </div>
-    </div>
-    <div
-      v-if="showModelSelector && isAllowed"
-      class="flex gap-2 ps-8 relative before:content-[''] before:absolute before:w-0.5 before:h-1/2 before:top-0 before:start-3 before:bg-n-weak after:content-[''] after:absolute after:w-2.5 after:h-3 after:top-[calc(50%-6px)] after:start-3 after:border-b-[0.125rem] after:border-s-[0.125rem] after:rounded-es after:border-n-weak"
-    >
-      <div class="flex-1 min-w-0">
-        <h4 class="text-sm font-medium text-n-slate-12">{{ modelTitle }}</h4>
-        <p class="text-sm text-n-slate-11 mt-0.5">{{ modelDescription }}</p>
-      </div>
-      <div class="flex justify-end">
-        <ModelDropdown :feature-key="featureKey" @change="handleModelChange" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelDropdown.vue

@@ -1,153 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useCaptainConfigStore } from 'dashboard/store/captain/preferences';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import DropdownBody from 'dashboard/components-next/dropdown-menu/base/DropdownBody.vue';
-import DropdownItem from 'dashboard/components-next/dropdown-menu/base/DropdownItem.vue';
-import { provideDropdownContext } from 'dashboard/components-next/dropdown-menu/base/provider.js';
-
-const props = defineProps({
-  featureKey: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['change']);
-const { isOnChatwootCloud } = useAccount();
-
-const PROVIDER_ICONS = {
-  openai: 'i-ri-openai-fill',
-  anthropic: 'i-ri-anthropic-line',
-  mistral: 'i-logos-mistral-icon',
-  gemini: 'i-woot-gemini',
-};
-
-const iconForModel = model => {
-  return PROVIDER_ICONS[model.provider];
-};
-
-const { t } = useI18n();
-const captainConfigStore = useCaptainConfigStore();
-const isOpen = ref(false);
-
-const availableModels = computed(() =>
-  captainConfigStore.getModelsForFeature(props.featureKey)
-);
-
-const recommendedModelId = computed(() =>
-  captainConfigStore.getDefaultModelForFeature(props.featureKey)
-);
-
-const selectedModel = computed(() =>
-  captainConfigStore.getSelectedModelForFeature(props.featureKey)
-);
-
-const selectedModelId = ref(null);
-
-watch(
-  selectedModel,
-  newSelected => {
-    if (newSelected) {
-      selectedModelId.value = newSelected;
-    }
-  },
-  { immediate: true }
-);
-
-const selectedModelDetails = computed(() => {
-  if (!selectedModelId.value) return null;
-  return (
-    availableModels.value.find(m => m.id === selectedModelId.value) || null
-  );
-});
-
-const getCreditLabel = model => {
-  const multiplier = model.credit_multiplier || 1;
-  return t('CAPTAIN_SETTINGS.MODEL_CONFIG.CREDITS_PER_MESSAGE', {
-    credits: multiplier,
-  });
-};
-
-const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
-};
-
-const closeDropdown = () => {
-  isOpen.value = false;
-};
-
-provideDropdownContext({
-  isOpen,
-  toggle: () => toggleDropdown(),
-  closeMenu: closeDropdown,
-});
-
-const selectModel = model => {
-  selectedModelId.value = model.id;
-  emit('change', { feature: props.featureKey, model: model.id });
-  closeDropdown();
-};
-</script>
-
-<template>
-  <div v-on-clickaway="closeDropdown" class="relative flex-shrink-0">
-    <button
-      type="button"
-      class="flex items-center gap-2 px-3 py-2 text-sm border rounded-lg border-n-weak dark:bg-n-solid-2 dark:hover:bg-n-solid-3 bg-n-alpha-2 hover:bg-n-alpha-1 min-w-[180px] justify-between"
-      @click="toggleDropdown"
-    >
-      <span v-if="selectedModelDetails" class="text-n-slate-12">
-        {{ selectedModelDetails.display_name }}
-      </span>
-      <span v-else class="text-n-slate-10">
-        {{ t('CAPTAIN_SETTINGS.MODEL_CONFIG.SELECT_MODEL') }}
-      </span>
-      <Icon
-        icon="i-lucide-chevron-down"
-        class="size-4 text-n-slate-11 transition-transform"
-        :class="{ 'rotate-180': isOpen }"
-      />
-    </button>
-    <DropdownBody
-      v-if="isOpen"
-      class="absolute right-0 top-full mt-1 min-w-64 z-50 max-h-96 [&>ul]:max-h-96 [&>ul]:overflow-y-scroll"
-    >
-      <DropdownItem
-        v-for="model in availableModels"
-        :key="model.id"
-        :click="() => selectModel(model)"
-        class="rounded-lg dark:hover:bg-n-solid-3 hover:bg-n-alpha-1"
-        :class="{
-          'dark:bg-n-solid-3 bg-n-alpha-1': selectedModelId === model.id,
-          'pointer-events-none opacity-60': model.coming_soon,
-        }"
-      >
-        <div class="flex gap-2 w-full">
-          <Icon :icon="iconForModel(model)" class="size-4 flex-shrink-0" />
-          <div class="flex flex-col w-full text-left gap-1">
-            <div
-              class="text-sm w-full font-medium leading-none text-n-slate-12 flex items-baseline justify-between"
-            >
-              {{ model.display_name }}
-              <span
-                v-if="model.id === recommendedModelId"
-                class="text-[10px] uppercase text-n-iris-11 border border-1 border-n-iris-10 leading-none rounded-lg px-1 py-0.5"
-              >
-                {{ t('GENERAL.PREFERRED') }}
-              </span>
-            </div>
-            <span v-if="model.coming_soon" class="text-xs text-n-slate-11">
-              {{ t('CAPTAIN_SETTINGS.MODEL_CONFIG.COMING_SOON') }}
-            </span>
-            <span v-else-if="isOnChatwootCloud" class="text-xs text-n-slate-11">
-              {{ getCreditLabel(model) }}
-            </span>
-          </div>
-        </div>
-      </DropdownItem>
-    </DropdownBody>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/captain/components/ModelSelector.vue

@@ -1,47 +0,0 @@
-<script setup>
-import ModelDropdown from './ModelDropdown.vue';
-
-defineProps({
-  featureKey: {
-    type: String,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  isAllowed: {
-    type: Boolean,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['change']);
-
-const handleModelChange = ({ feature, model }) => {
-  emit('change', { feature, model });
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center justify-between gap-4 p-4 rounded-xl border border-n-weak bg-n-solid-1"
-    :class="{ 'opacity-60 pointer-events-none relative': !isAllowed }"
-  >
-    <div class="flex-1 min-w-0">
-      <h4 class="text-sm font-medium text-n-slate-12">
-        {{ title }}
-      </h4>
-      <p class="text-sm text-n-slate-11 mt-0.5">{{ description }}</p>
-    </div>
-    <ModelDropdown
-      v-if="isAllowed"
-      :feature-key="featureKey"
-      @change="handleModelChange"
-    />
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/inbox/settingsPage/CustomerSatisfactionPage.vue

@@ -28,15 +28,10 @@ const { t } = useI18n();
 const store = useStore();
 const labels = useMapGetter('labels/getLabels');
 
-const { isAWhatsAppChannel, isATwilioWhatsAppChannel } = useInbox(
+const { isAWhatsAppCloudChannel: isWhatsAppChannel } = useInbox(
   props.inbox?.id
 );
 
-// Computed to check if it's any type of WhatsApp channel (Cloud or Twilio)
-const isAnyWhatsAppChannel = computed(
-  () => isAWhatsAppChannel.value || isATwilioWhatsAppChannel.value
-);
-
 const isUpdating = ref(false);
 const selectedLabelValues = ref([]);
 const currentLabel = ref('');
@@ -121,9 +116,7 @@ const templateApprovalStatus = computed(() => {
 
   // Handle existing template with status
   if (templateStatus.value?.template_exists && templateStatus.value.status) {
-    // Convert status to uppercase for consistency with statusMap keys
-    const normalizedStatus = templateStatus.value.status.toUpperCase();
-    return statusMap[normalizedStatus] || statusMap.PENDING;
+    return statusMap[templateStatus.value.status] || statusMap.PENDING;
   }
 
   // Default case - no template exists
@@ -162,7 +155,7 @@ const initializeState = () => {
     : [];
 
   // Store original template values for change detection
-  if (isAnyWhatsAppChannel.value) {
+  if (isWhatsAppChannel.value) {
     originalTemplateValues.value = {
       message: state.message,
       templateButtonText: state.templateButtonText,
@@ -172,7 +165,7 @@ const initializeState = () => {
 };
 
 const checkTemplateStatus = async () => {
-  if (!isAnyWhatsAppChannel.value) return;
+  if (!isWhatsAppChannel.value) return;
 
   try {
     templateLoading.value = true;
@@ -202,7 +195,7 @@ const checkTemplateStatus = async () => {
 onMounted(() => {
   initializeState();
   if (!labels.value?.length) store.dispatch('labels/get');
-  if (isAnyWhatsAppChannel.value) checkTemplateStatus();
+  if (isWhatsAppChannel.value) checkTemplateStatus();
 });
 
 watch(() => props.inbox, initializeState, { immediate: true });
@@ -232,7 +225,7 @@ const removeLabel = label => {
 
 // Check if template-related fields have changed
 const hasTemplateChanges = () => {
-  if (!isAnyWhatsAppChannel.value) return false;
+  if (!isWhatsAppChannel.value) return false;
 
   const original = originalTemplateValues.value;
   return (
@@ -261,28 +254,10 @@ const shouldCreateTemplate = () => {
 
 // Build template config for saving
 const buildTemplateConfig = () => {
-  if (!hasExistingTemplate()) {
-    return null;
-  }
+  if (!hasExistingTemplate()) return null;
 
   const { template_name, template_id, template, status } =
     templateStatus.value || {};
-
-  if (isATwilioWhatsAppChannel.value) {
-    // Twilio WhatsApp format - get from existing template config
-    const existingTemplate = props.inbox?.csat_config?.template;
-
-    return existingTemplate
-      ? {
-          friendly_name: existingTemplate.friendly_name,
-          content_sid: existingTemplate.content_sid,
-          language: existingTemplate.language || state.templateLanguage,
-          status: existingTemplate.status || status,
-        }
-      : null;
-  }
-
-  // WhatsApp Cloud format
   return {
     name: template_name,
     template_id,
@@ -298,11 +273,11 @@ const updateInbox = async attributes => {
     ...attributes,
   };
 
-  await store.dispatch('inboxes/updateInbox', payload);
+  return store.dispatch('inboxes/updateInbox', payload);
 };
 
 const createTemplate = async () => {
-  if (!isAnyWhatsAppChannel.value) return null;
+  if (!isWhatsAppChannel.value) return null;
 
   const response = await store.dispatch('inboxes/createCSATTemplate', {
     inboxId: props.inbox.id,
@@ -323,7 +298,7 @@ const performSave = async () => {
 
     // For WhatsApp channels, create template first if needed
     if (
-      isAnyWhatsAppChannel.value &&
+      isWhatsAppChannel.value &&
       state.csatSurveyEnabled &&
       shouldCreateTemplate()
     ) {
@@ -351,25 +326,13 @@ const performSave = async () => {
 
     // Use new template data if created, otherwise preserve existing template information
     if (newTemplateData) {
-      if (isATwilioWhatsAppChannel.value) {
-        // Twilio WhatsApp template format
-        csatConfig.template = {
-          friendly_name: newTemplateData.friendly_name,
-          content_sid: newTemplateData.content_sid,
-          language: newTemplateData.language,
-          status: newTemplateData.status,
-          created_at: new Date().toISOString(),
-        };
-      } else {
-        // WhatsApp Cloud template format
-        csatConfig.template = {
-          name: newTemplateData.name,
-          template_id: newTemplateData.template_id,
-          language: newTemplateData.language,
-          status: newTemplateData.status,
-          created_at: new Date().toISOString(),
-        };
-      }
+      csatConfig.template = {
+        name: newTemplateData.name,
+        template_id: newTemplateData.template_id,
+        language: newTemplateData.language,
+        status: newTemplateData.status,
+        created_at: new Date().toISOString(),
+      };
     } else {
       const templateConfig = buildTemplateConfig();
       if (templateConfig) {
@@ -393,9 +356,8 @@ const performSave = async () => {
 
 const saveSettings = async () => {
   // Check if we need to show confirmation dialog for WhatsApp template changes
-  // This applies to both WhatsApp Cloud and Twilio WhatsApp channels
   if (
-    isAnyWhatsAppChannel.value &&
+    isWhatsAppChannel.value &&
     state.csatSurveyEnabled &&
     hasExistingTemplate() &&
     hasTemplateChanges()
@@ -428,7 +390,7 @@ const handleConfirmTemplateUpdate = async () => {
       <div class="grid gap-5">
         <!-- Show display type only for non-WhatsApp channels -->
         <WithLabel
-          v-if="!isAnyWhatsAppChannel"
+          v-if="!isWhatsAppChannel"
           :label="$t('INBOX_MGMT.CSAT.DISPLAY_TYPE.LABEL')"
           name="display_type"
         >
@@ -438,7 +400,7 @@ const handleConfirmTemplateUpdate = async () => {
           />
         </WithLabel>
 
-        <template v-if="isAnyWhatsAppChannel">
+        <template v-if="isWhatsAppChannel">
           <div
             class="flex flex-col gap-4 justify-between w-full lg:flex-row lg:gap-6"
           >
@@ -574,7 +536,7 @@ const handleConfirmTemplateUpdate = async () => {
         </WithLabel>
         <p class="text-sm italic text-n-slate-11">
           {{
-            isAnyWhatsAppChannel
+            isWhatsAppChannel
               ? $t('INBOX_MGMT.CSAT.WHATSAPP_NOTE')
               : $t('INBOX_MGMT.CSAT.NOTE')
           }}

app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
 import CsatMetrics from './components/CsatMetrics.vue';
 import CsatTable from './components/CsatTable.vue';
-import CsatFilters from './components/Csat/CsatFilters.vue';
+import ReportFilterSelector from './components/FilterSelector.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -15,7 +15,7 @@ export default {
   components: {
     CsatMetrics,
     CsatTable,
-    CsatFilters,
+    ReportFilterSelector,
     ReportHeader,
     V4Button,
   },
@@ -90,7 +90,7 @@ export default {
       selectedTeam,
       selectedRating,
     }) {
-      // do not track filter change on initial load
+      // do not track filter change on inital load
       if (this.from !== 0 && this.to !== 0) {
         useTrack(REPORTS_EVENTS.FILTER_REPORT, {
           filterType: 'date',
@@ -121,11 +121,16 @@ export default {
     />
   </ReportHeader>
 
-  <div class="flex flex-col gap-6">
-    <CsatFilters
+  <div class="flex flex-col gap-4">
+    <ReportFilterSelector
+      show-agents-filter
+      show-inbox-filter
+      show-rating-filter
       :show-team-filter="isTeamsEnabled"
+      :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
+
     <CsatMetrics :filters="requestPayload" />
     <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>

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

@@ -76,14 +76,14 @@ export default {
         businessHours,
       };
     },
-    downloadConversationReports() {
+    downloadAgentReports() {
       const { from, to } = this;
       const fileName = generateFileName({
-        type: 'conversation',
+        type: 'agent',
         to,
         businessHours: this.businessHours,
       });
-      this.$store.dispatch('downloadConversationsSummaryReports', {
+      this.$store.dispatch('downloadAgentReports', {
         from,
         to,
         fileName,
@@ -109,10 +109,10 @@ export default {
 <template>
   <ReportHeader :header-title="$t('REPORT.HEADER')">
     <V4Button
-      :label="$t('REPORT.DOWNLOAD_CONVERSATION_REPORTS')"
+      :label="$t('REPORT.DOWNLOAD_AGENT_REPORTS')"
       icon="i-ph-download-simple"
       size="sm"
-      @click="downloadConversationReports"
+      @click="downloadAgentReports"
     />
   </ReportHeader>
   <div class="flex flex-col gap-3">

app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue';
+
+const { row } = defineProps({
+  row: {
+    type: Object,
+    required: true,
+  },
+});
+
+const routerParams = computed(() => ({
+  name: 'inbox_conversation',
+  params: { conversation_id: row.original.conversationId },
+}));
+</script>
+
+<template>
+  <div class="text-right">
+    <router-link :to="routerParams" class="hover:underline">
+      {{ `#${row.original.conversationId}` }}
+    </router-link>
+    <div v-tooltip="row.original.createdAt" class="text-n-slate-11 text-sm">
+      {{ row.original.createdAgo }}
+    </div>
+  </div>
+</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilterHelpers.js

@@ -1,36 +0,0 @@
-import { CSAT_RATINGS } from 'shared/constants/messages';
-
-export const buildFilterList = (items, type) =>
-  items.map(item => ({
-    id: item.id,
-    name: type === 'ratings' ? item.emoji : item.name,
-    type,
-  }));
-
-export const buildRatingsList = t =>
-  CSAT_RATINGS.map(rating => ({
-    id: rating.value,
-    name: `${t(rating.translationKey)}`,
-    type: 'ratings',
-  }));
-
-export const getActiveFilter = (filters, type, key) =>
-  filters.find(item => item.id.toString() === key.toString());
-
-export const getFilterType = (input, direction) => {
-  const filterMap = {
-    keyToType: {
-      user_ids: 'agents',
-      inbox_id: 'inboxes',
-      team_id: 'teams',
-      rating: 'ratings',
-    },
-    typeToKey: {
-      agents: 'user_ids',
-      inboxes: 'inbox_id',
-      teams: 'team_id',
-      ratings: 'rating',
-    },
-  };
-  return filterMap[direction][input];
-};

app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue

@@ -1,267 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
-import {
-  buildFilterList,
-  buildRatingsList,
-  getActiveFilter,
-  getFilterType,
-} from './CsatFilterHelpers';
-import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
-import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
-import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
-import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
-
-const props = defineProps({
-  showTeamFilter: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['filterChange']);
-
-const { t } = useI18n();
-const store = useStore();
-
-const showDropdownMenu = ref(false);
-const showSubDropdownMenu = ref(false);
-const activeFilterType = ref('');
-const customDateRange = ref([new Date(), new Date()]);
-const appliedFilters = ref({
-  user_ids: null,
-  inbox_id: null,
-  team_id: null,
-  rating: null,
-});
-
-const agents = computed(() => store.getters['agents/getAgents']);
-const inboxes = computed(() => store.getters['inboxes/getInboxes']);
-const teams = computed(() => store.getters['teams/getTeams']);
-
-const ratings = computed(() => buildRatingsList(t));
-
-const from = computed(() => getUnixStartOfDay(customDateRange.value[0]));
-const to = computed(() => getUnixEndOfDay(customDateRange.value[1]));
-
-const getFilterSource = type => {
-  const sources = {
-    agents: agents.value,
-    inboxes: inboxes.value,
-    teams: teams.value,
-    ratings: ratings.value,
-  };
-  return sources[type] || [];
-};
-
-const getFilterOptions = type => {
-  if (type === 'ratings') {
-    return ratings.value;
-  }
-  return buildFilterList(getFilterSource(type), type);
-};
-
-const filterListMenuItems = computed(() => {
-  const filterTypes = [
-    {
-      id: '1',
-      name: t('CSAT_REPORTS.FILTERS.AGENTS.LABEL'),
-      type: 'agents',
-    },
-    {
-      id: '2',
-      name: t('CSAT_REPORTS.FILTERS.INBOXES.LABEL'),
-      type: 'inboxes',
-    },
-    {
-      id: '3',
-      name: t('CSAT_REPORTS.FILTERS.RATINGS.LABEL'),
-      type: 'ratings',
-    },
-  ];
-
-  if (props.showTeamFilter) {
-    filterTypes.splice(2, 0, {
-      id: '4',
-      name: t('CSAT_REPORTS.FILTERS.TEAMS.LABEL'),
-      type: 'teams',
-    });
-  }
-
-  const activeFilterKeys = Object.keys(appliedFilters.value).filter(
-    key => appliedFilters.value[key]
-  );
-  const activeFilterTypes = activeFilterKeys.map(key =>
-    getFilterType(key, 'keyToType')
-  );
-
-  return filterTypes
-    .filter(({ type }) => !activeFilterTypes.includes(type))
-    .map(({ id, name, type }) => ({
-      id,
-      name,
-      type,
-      options: getFilterOptions(type),
-    }));
-});
-
-const activeFilters = computed(() => {
-  const activeKeys = Object.keys(appliedFilters.value).filter(
-    key => appliedFilters.value[key]
-  );
-  return activeKeys.map(key => {
-    const filterType = getFilterType(key, 'keyToType');
-    const items = getFilterSource(filterType);
-    const item = getActiveFilter(items, filterType, appliedFilters.value[key]);
-    return {
-      id: item?.id,
-      name: item?.name || '',
-      type: filterType,
-      options: getFilterOptions(filterType),
-    };
-  });
-});
-
-const hasActiveFilters = computed(() =>
-  Object.values(appliedFilters.value).some(value => value !== null)
-);
-
-const isAllFilterSelected = computed(() => !filterListMenuItems.value.length);
-
-const emitChange = () => {
-  emit('filterChange', {
-    from: from.value,
-    to: to.value,
-    selectedAgents: appliedFilters.value.user_ids
-      ? [{ id: appliedFilters.value.user_ids }]
-      : [],
-    selectedInbox: appliedFilters.value.inbox_id
-      ? { id: appliedFilters.value.inbox_id }
-      : null,
-    selectedTeam: appliedFilters.value.team_id
-      ? { id: appliedFilters.value.team_id }
-      : null,
-    selectedRating: appliedFilters.value.rating
-      ? { value: appliedFilters.value.rating }
-      : null,
-  });
-};
-
-const closeDropdown = () => {
-  showDropdownMenu.value = false;
-};
-
-const closeActiveFilterDropdown = () => {
-  activeFilterType.value = '';
-  showSubDropdownMenu.value = false;
-};
-
-const resetDropdown = () => {
-  closeDropdown();
-  closeActiveFilterDropdown();
-};
-
-const addFilter = item => {
-  const { type, id } = item;
-  const filterKey = getFilterType(type, 'typeToKey');
-  appliedFilters.value[filterKey] = id;
-  emitChange();
-  resetDropdown();
-};
-
-const removeFilter = type => {
-  const filterKey = getFilterType(type, 'typeToKey');
-  appliedFilters.value[filterKey] = null;
-  emitChange();
-};
-
-const clearAllFilters = () => {
-  appliedFilters.value = {
-    user_ids: null,
-    inbox_id: null,
-    team_id: null,
-    rating: null,
-  };
-  emitChange();
-  resetDropdown();
-};
-
-const showDropdown = () => {
-  showSubDropdownMenu.value = false;
-  showDropdownMenu.value = !showDropdownMenu.value;
-};
-
-const openActiveFilterDropdown = filterType => {
-  closeDropdown();
-  activeFilterType.value = filterType;
-  showSubDropdownMenu.value = !showSubDropdownMenu.value;
-};
-
-const onDateRangeChange = value => {
-  customDateRange.value = value;
-  emitChange();
-};
-
-onMounted(() => {
-  emitChange();
-});
-</script>
-
-<template>
-  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <WootDatePicker @date-range-changed="onDateRangeChange" />
-
-    <div
-      class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
-    >
-      <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
-        <ActiveFilterChip
-          v-for="filter in activeFilters"
-          v-bind="filter"
-          :key="filter.type"
-          :placeholder="
-            $t(
-              `CSAT_REPORTS.FILTERS.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
-            )
-          "
-          :active-filter-type="activeFilterType"
-          :show-menu="showSubDropdownMenu"
-          enable-search
-          @toggle-dropdown="openActiveFilterDropdown"
-          @close-dropdown="closeActiveFilterDropdown"
-          @add-filter="addFilter"
-          @remove-filter="removeFilter"
-        />
-      </div>
-
-      <div
-        v-if="hasActiveFilters && !isAllFilterSelected"
-        class="w-full h-px border md:w-px md:h-5 border-n-weak"
-      />
-
-      <div class="flex items-center gap-2">
-        <AddFilterChip
-          v-if="!isAllFilterSelected"
-          placeholder-i18n-key="CSAT_REPORTS.FILTERS.INPUT_PLACEHOLDER"
-          :name="$t('CSAT_REPORTS.FILTERS.ADD_FILTER')"
-          :menu-option="filterListMenuItems"
-          :show-menu="showDropdownMenu"
-          :empty-state-message="$t('CSAT_REPORTS.FILTERS.NO_FILTER')"
-          @toggle-dropdown="showDropdown"
-          @close-dropdown="closeDropdown"
-          @add-filter="addFilter"
-        />
-
-        <div v-if="hasActiveFilters" class="w-px h-5 border border-n-weak" />
-
-        <FilterButton
-          v-if="hasActiveFilters"
-          :button-text="$t('CSAT_REPORTS.FILTERS.CLEAR_ALL')"
-          @click="clearAllFilters"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatContactCell.vue

@@ -1,52 +0,0 @@
-<script setup>
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-
-defineProps({
-  contact: {
-    type: Object,
-    default: null,
-  },
-  conversationId: {
-    type: Number,
-    required: true,
-  },
-  createdAgo: {
-    type: String,
-    default: '',
-  },
-  createdAt: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="flex items-center gap-2">
-    <Avatar
-      :src="contact?.thumbnail || ''"
-      :name="contact?.name || ''"
-      :size="32"
-      rounded-full
-    />
-    <div class="flex flex-col gap-0.5">
-      <span class="text-sm text-n-slate-12 font-medium capitalize">
-        {{ contact?.name || '—' }}
-      </span>
-      <div
-        class="flex items-center gap-1 text-xs text-n-slate-10 whitespace-nowrap"
-      >
-        <a
-          :href="`/app/accounts/${$route.params.accountId}/conversations/${conversationId}`"
-          class="flex items-center text-xs gap-0.5 hover:text-n-brand hover:underline"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-        >
-          <span>#{{ conversationId }}</span>
-        </a>
-        <span>·</span>
-        <span :title="createdAt">{{ createdAgo }}</span>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatEmptyState.vue

@@ -1,32 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: 'i-lucide-message-square-off',
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col items-center justify-center py-16 px-6 text-center">
-    <div
-      class="size-16 rounded-full bg-n-alpha-2 flex items-center justify-center mb-4"
-    >
-      <i :class="icon" class="size-8 text-n-slate-10" />
-    </div>
-    <h3 class="text-base font-medium text-n-slate-12 mb-1">
-      {{ title }}
-    </h3>
-    <p v-if="description" class="text-sm text-n-slate-10 max-w-sm">
-      {{ description }}
-    </p>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatExpandedRow.vue

@@ -1,162 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useAlert } from 'dashboard/composables';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Editor from 'dashboard/components-next/Editor/Editor.vue';
-import CsatReviewNotesPaywall from './CsatReviewNotesPaywall.vue';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-const props = defineProps({
-  response: {
-    type: Object,
-    required: true,
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-const { isCloudFeatureEnabled, isOnChatwootCloud } = useAccount();
-const { formatMessage } = useMessageFormatter();
-
-const isFeatureEnabled = computed(() =>
-  isCloudFeatureEnabled('csat_review_notes')
-);
-const showPaywall = computed(
-  () => !isFeatureEnabled.value && isOnChatwootCloud.value
-);
-
-const reviewNotes = ref(props.response.csat_review_notes || '');
-const isEditing = ref(!props.response.csat_review_notes);
-const isSaving = ref(false);
-
-const hasExistingReviewNotes = computed(
-  () => !!props.response.csat_review_notes
-);
-
-const hasChanges = computed(
-  () => reviewNotes.value !== (props.response.csat_review_notes || '')
-);
-
-const startEditing = () => {
-  isEditing.value = true;
-};
-
-const cancelEditing = () => {
-  reviewNotes.value = props.response.csat_review_notes || '';
-  if (hasExistingReviewNotes.value) {
-    isEditing.value = false;
-  }
-};
-
-const saveReviewNotes = async () => {
-  isSaving.value = true;
-  try {
-    await store.dispatch('csat/update', {
-      id: props.response.id,
-      reviewNotes: reviewNotes.value,
-    });
-    useAlert(t('CSAT_REPORTS.REVIEW_NOTES.SAVED'));
-    isEditing.value = false;
-  } catch {
-    useAlert(t('CSAT_REPORTS.REVIEW_NOTES.SAVE_ERROR'));
-  } finally {
-    isSaving.value = false;
-  }
-};
-</script>
-
-<template>
-  <div class="py-4 px-5 border-t border-n-container bg-n-background">
-    <CsatReviewNotesPaywall v-if="showPaywall" />
-    <div v-else-if="isFeatureEnabled" class="flex flex-col gap-3">
-      <div class="flex items-start gap-4">
-        <div
-          class="flex items-center gap-1.5 text-n-slate-11 shrink-0 w-36 pt-3"
-        >
-          <i class="i-lucide-notebook-pen size-4" />
-          <span class="text-sm font-medium">
-            {{ $t('CSAT_REPORTS.REVIEW_NOTES.TITLE') }}
-          </span>
-        </div>
-
-        <div class="flex-1 max-w-2xl">
-          <div
-            v-if="hasExistingReviewNotes && !isEditing"
-            class="group flex items-start gap-2 py-2 px-3 rounded-lg hover:bg-n-slate-2 dark:hover:bg-n-solid-3 cursor-pointer transition-colors"
-            @click.stop="startEditing"
-          >
-            <p
-              v-dompurify-html="formatMessage(response.csat_review_notes || '')"
-              class="flex-1 text-sm text-n-slate-12 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0"
-            />
-            <i
-              class="i-lucide-pencil size-4 text-n-slate-10 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5"
-            />
-          </div>
-
-          <div
-            v-else
-            class="flex flex-col gap-3 [&_.ProseMirror]:min-h-32 [&_.ProseMirror]:max-h-64 [&_.ProseMirror-menubar]:!mt-0"
-            @click.stop
-          >
-            <Editor
-              v-model="reviewNotes"
-              :placeholder="$t('CSAT_REPORTS.REVIEW_NOTES.PLACEHOLDER')"
-              :show-character-count="false"
-              :enable-canned-responses="false"
-              focus-on-mount
-            >
-              <template #actions>
-                <div class="flex items-center gap-2 py-2">
-                  <Button
-                    v-if="hasExistingReviewNotes"
-                    variant="ghost"
-                    size="xs"
-                    :label="$t('CSAT_REPORTS.REVIEW_NOTES.CANCEL')"
-                    @click.stop="cancelEditing"
-                  />
-                  <Button
-                    :label="$t('CSAT_REPORTS.REVIEW_NOTES.SAVE')"
-                    :disabled="!hasChanges || isSaving"
-                    :loading="isSaving"
-                    size="xs"
-                    @click.stop="saveReviewNotes"
-                  />
-                </div>
-              </template>
-            </Editor>
-          </div>
-        </div>
-      </div>
-
-      <div
-        v-if="
-          hasExistingReviewNotes &&
-          !isEditing &&
-          response.review_notes_updated_by
-        "
-        class="flex items-center gap-4"
-      >
-        <div class="flex items-center gap-1.5 text-n-slate-11 shrink-0 w-36">
-          <i class="i-lucide-user-pen size-4" />
-          <span class="text-sm font-medium">
-            {{ $t('CSAT_REPORTS.REVIEW_NOTES.UPDATED_BY_LABEL') }}
-          </span>
-        </div>
-        <div class="flex items-center gap-1 flex-1 max-w-2xl px-3">
-          <span class="text-sm text-n-slate-12">
-            {{ response.review_notes_updated_by.name }}
-          </span>
-          <span class="text-n-slate-10">·</span>
-          <span class="text-sm text-n-slate-10">
-            {{ dynamicTime(response.review_notes_updated_at) }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.story.vue

@@ -1,53 +0,0 @@
-<script setup>
-import CsatMetricCard from './CsatMetricCard.vue';
-</script>
-
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
-<template>
-  <Story
-    title="Components/Reports/CsatMetricCard"
-    :layout="{ type: 'grid', width: '400px' }"
-  >
-    <Variant title="Default">
-      <div class="p-4 bg-n-background">
-        <CsatMetricCard
-          label="Total Responses"
-          tooltip="Total number of responses received"
-          value="1,234"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Percentage Value">
-      <div class="p-4 bg-n-background">
-        <CsatMetricCard
-          label="Satisfaction Score"
-          tooltip="Percentage of positive responses"
-          value="85%"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div class="p-4 bg-n-background">
-        <CsatMetricCard
-          label="Response Rate"
-          tooltip="Percentage of conversations with responses"
-          value="0"
-          is-loading
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Zero Value">
-      <div class="p-4 bg-n-background">
-        <CsatMetricCard
-          label="Total Responses"
-          tooltip="Total number of responses received"
-          value="0"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue

@@ -1,41 +0,0 @@
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  tooltip: {
-    type: String,
-    required: true,
-  },
-  value: {
-    type: [String, Number],
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
-    <span
-      class="inline-flex items-center gap-1 text-sm font-medium text-n-slate-11"
-    >
-      {{ label }}
-      <span
-        v-tooltip.right="tooltip"
-        class="i-lucide-info flex flex-shrink-0 text-n-slate-10 size-3.5"
-      />
-    </span>
-    <div
-      v-if="isLoading"
-      class="w-16 h-8 rounded-md bg-n-slate-3 animate-pulse"
-    />
-    <span v-else class="text-2xl font-medium text-n-slate-12">
-      {{ value }}
-    </span>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue

@@ -1,63 +1,135 @@
-<script setup>
-import { computed } from 'vue';
-import { useMapGetter } from 'dashboard/composables/store';
-import CsatMetricCard from './CsatMetricCard.vue';
-import CsatRatingDistribution from './CsatRatingDistribution.vue';
+<script>
+import { mapGetters } from 'vuex';
+import CsatMetricCard from './ReportMetricCard.vue';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+import BarChart from 'shared/components/charts/BarChart.vue';
 
-const metrics = useMapGetter('csat/getMetrics');
-const ratingPercentage = useMapGetter('csat/getRatingPercentage');
-const ratingCount = useMapGetter('csat/getRatingCount');
-const satisfactionScore = useMapGetter('csat/getSatisfactionScore');
-const responseRate = useMapGetter('csat/getResponseRate');
-const uiFlags = useMapGetter('csat/getUIFlags');
-
-const isLoading = computed(() => uiFlags.value.isFetchingMetrics);
-
-const responseCount = computed(() =>
-  metrics.value.totalResponseCount
-    ? metrics.value.totalResponseCount.toLocaleString()
-    : '0'
-);
-
-const formatPercent = value => (value ? `${value}%` : '0%');
+export default {
+  components: { BarChart, CsatMetricCard },
+  props: {
+    filters: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      csatRatings: CSAT_RATINGS,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      metrics: 'csat/getMetrics',
+      ratingPercentage: 'csat/getRatingPercentage',
+      satisfactionScore: 'csat/getSatisfactionScore',
+      responseRate: 'csat/getResponseRate',
+    }),
+    ratingFilterEnabled() {
+      return Boolean(this.filters.rating);
+    },
+    chartData() {
+      const sortedRatings = [...CSAT_RATINGS].sort((a, b) => b.value - a.value);
+      return {
+        labels: ['Rating'],
+        datasets: sortedRatings.map(rating => ({
+          label: rating.emoji,
+          data: [this.ratingPercentage[rating.value]],
+          backgroundColor: rating.color,
+        })),
+      };
+    },
+    responseCount() {
+      return this.metrics.totalResponseCount
+        ? this.metrics.totalResponseCount.toLocaleString()
+        : '--';
+    },
+    chartOptions() {
+      return {
+        indexAxis: 'y',
+        responsive: true,
+        plugins: {
+          legend: {
+            display: false,
+          },
+          title: {
+            display: false,
+          },
+          tooltip: {
+            enabled: false,
+          },
+        },
+        scales: {
+          x: {
+            display: false,
+            stacked: true,
+          },
+          y: {
+            display: false,
+            stacked: true,
+          },
+        },
+      };
+    },
+  },
+  methods: {
+    formatToPercent(value) {
+      return value ? `${value}%` : '--';
+    },
+    ratingToEmoji(value) {
+      return CSAT_RATINGS.find(rating => rating.value === Number(value)).emoji;
+    },
+  },
+};
 </script>
 
+<!-- eslint-disable vue/no-unused-refs -->
+<!-- Added ref for writing specs -->
 <template>
-  <div class="flex flex-col gap-4">
-    <div
-      class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
-    >
-      <CsatMetricCard
-        :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
-        :tooltip="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
-        :value="responseCount"
-        :is-loading="isLoading"
-      />
-
-      <div class="w-full sm:w-px bg-n-strong" />
-
-      <CsatMetricCard
-        :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
-        :tooltip="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-        :value="formatPercent(satisfactionScore)"
-        :is-loading="isLoading"
-      />
-
-      <div class="w-full sm:w-px bg-n-strong" />
-
-      <CsatMetricCard
-        :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
-        :tooltip="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
-        :value="formatPercent(responseRate)"
-        :is-loading="isLoading"
-      />
-    </div>
-
-    <CsatRatingDistribution
-      :rating-percentage="ratingPercentage"
-      :rating-count="ratingCount"
-      :total-response-count="metrics.totalResponseCount"
-      :is-loading="isLoading"
+  <div
+    class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4"
+  >
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
+      :value="responseCount"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
     />
+    <CsatMetricCard
+      :disabled="ratingFilterEnabled"
+      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
+      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+    <CsatMetricCard
+      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
+      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
+      :value="formatToPercent(responseRate)"
+      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
+    />
+
+    <div
+      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
+      ref="csatBarChart"
+      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial]"
+    >
+      <h3
+        class="flex items-center m-0 text-xs font-medium md:text-sm text-n-slate-12"
+      >
+        <div class="flex flex-row-reverse justify-end">
+          <div
+            v-for="(rating, key, index) in ratingPercentage"
+            :key="rating + key + index"
+            class="ltr:pr-4 rtl:pl-4"
+          >
+            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
+            <span>{{ formatToPercent(rating) }}</span>
+          </div>
+        </div>
+      </h3>
+      <div class="mt-2 h-6">
+        <BarChart :collection="chartData" :chart-options="chartOptions" />
+      </div>
+    </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.story.vue

@@ -1,75 +0,0 @@
-<script setup>
-import CsatRatingDistribution from './CsatRatingDistribution.vue';
-
-const sampleRatingPercentage = {
-  1: 5,
-  2: 10,
-  3: 15,
-  4: 25,
-  5: 45,
-};
-
-const sampleRatingCount = {
-  1: 50,
-  2: 100,
-  3: 150,
-  4: 250,
-  5: 450,
-};
-
-const emptyRatingPercentage = {
-  1: 0,
-  2: 0,
-  3: 0,
-  4: 0,
-  5: 0,
-};
-
-const emptyRatingCount = {
-  1: 0,
-  2: 0,
-  3: 0,
-  4: 0,
-  5: 0,
-};
-</script>
-
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
-<template>
-  <Story
-    title="Components/Reports/CsatRatingDistribution"
-    :layout="{ type: 'grid', width: '800px' }"
-  >
-    <Variant title="With Data">
-      <div class="p-4 bg-n-background">
-        <CsatRatingDistribution
-          :rating-percentage="sampleRatingPercentage"
-          :rating-count="sampleRatingCount"
-          :total-response-count="1000"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Empty State">
-      <div class="p-4 bg-n-background">
-        <CsatRatingDistribution
-          :rating-percentage="emptyRatingPercentage"
-          :rating-count="emptyRatingCount"
-          :total-response-count="0"
-        />
-      </div>
-    </Variant>
-
-    <Variant title="Loading State">
-      <div class="p-4 bg-n-background">
-        <CsatRatingDistribution
-          :rating-percentage="emptyRatingPercentage"
-          :rating-count="emptyRatingCount"
-          :total-response-count="0"
-          is-loading
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.vue

@@ -1,101 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { CSAT_RATINGS } from 'shared/constants/messages';
-
-const props = defineProps({
-  ratingPercentage: {
-    type: Object,
-    default: () => ({}),
-  },
-  ratingCount: {
-    type: Object,
-    default: () => ({}),
-  },
-  totalResponseCount: {
-    type: Number,
-    default: 0,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const { t } = useI18n();
-
-const sortedRatings = computed(() =>
-  [...CSAT_RATINGS].sort((a, b) => b.value - a.value)
-);
-
-const formatPercent = value => (value ? `${value}%` : '0%');
-
-const getRatingLabel = value => {
-  const rating = CSAT_RATINGS.find(r => r.value === value);
-  return rating ? t(rating.translationKey) : '';
-};
-
-const getRatingCount = value => {
-  return props.ratingCount[value] || 0;
-};
-</script>
-
-<template>
-  <div
-    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
-  >
-    <span class="text-sm font-medium text-n-slate-11">
-      {{ $t('CSAT_REPORTS.METRIC.RATING_DISTRIBUTION') }}
-    </span>
-
-    <div v-if="isLoading" class="mt-4">
-      <div class="h-6 w-full rounded-full bg-n-slate-3 animate-pulse" />
-      <div class="flex gap-6 mt-4">
-        <div
-          v-for="n in 5"
-          :key="n"
-          class="h-4 w-20 rounded bg-n-slate-3 animate-pulse"
-        />
-      </div>
-    </div>
-
-    <div v-else class="mt-4">
-      <div
-        v-if="totalResponseCount"
-        class="flex h-6 w-full rounded-full overflow-hidden bg-n-alpha-2"
-      >
-        <div
-          v-for="rating in sortedRatings"
-          :key="rating.value"
-          v-tooltip="
-            `${getRatingLabel(rating.value)}: ${formatPercent(ratingPercentage[rating.value])} (${getRatingCount(rating.value)})`
-          "
-          :style="{
-            width: `${ratingPercentage[rating.value]}%`,
-            backgroundColor: rating.color,
-          }"
-          class="h-full transition-all duration-300 first:rounded-s-full last:rounded-e-full cursor-default"
-        />
-      </div>
-      <div v-else class="h-6 w-full rounded-full bg-n-alpha-2" />
-
-      <div class="flex flex-wrap gap-x-6 gap-y-2 mt-4">
-        <div
-          v-for="rating in sortedRatings"
-          :key="rating.value"
-          class="flex items-center gap-2"
-        >
-          <span class="text-sm text-n-slate-11">
-            {{ getRatingLabel(rating.value) }}
-          </span>
-          <span class="text-sm font-medium text-n-slate-12">
-            {{ formatPercent(ratingPercentage[rating.value]) }}
-          </span>
-          <span class="text-xs text-n-slate-10">
-            ({{ getRatingCount(rating.value) }})
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatReviewNotesPaywall.vue

@@ -1,28 +0,0 @@
-<script setup>
-import { useRouter } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
-import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
-
-const router = useRouter();
-const currentAccountId = useMapGetter('getCurrentAccountId');
-
-const goToBillingSettings = () => {
-  router.push({
-    name: 'billing_settings_index',
-    params: { accountId: currentAccountId.value },
-  });
-};
-</script>
-
-<template>
-  <div class="py-4 px-5 bg-n-background">
-    <div class="flex justify-center">
-      <BasePaywallModal
-        feature-prefix="CSAT_REPORTS.REVIEW_NOTES"
-        i18n-key="PAYWALL"
-        is-on-chatwoot-cloud
-        @upgrade="goToBillingSettings"
-      />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue

@@ -1,19 +1,19 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { defineEmits, computed, h } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
 import { useI18n } from 'vue-i18n';
 
+// [TODO] Instead of converting the values to their reprentation when building the tableData
+// We should do the change in the cell
 import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
 
+// components
+import Table from 'dashboard/components/table/Table.vue';
 import Pagination from 'dashboard/components/table/Pagination.vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
-import CsatContactCell from './CsatContactCell.vue';
-import CsatExpandedRow from './CsatExpandedRow.vue';
-import CsatEmptyState from './CsatEmptyState.vue';
-import CsatTableLoader from './CsatTableLoader.vue';
+import ConversationCell from './ConversationCell.vue';
 
+// constants
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
 import {
@@ -31,82 +31,97 @@ const { pageIndex } = defineProps({
 
 const emit = defineEmits(['pageChange']);
 const { t } = useI18n();
-const { isCloudFeatureEnabled, isOnChatwootCloud } = useAccount();
+// const isRTL = useMapGetter('accounts/isRTL');
 const csatResponses = useMapGetter('csat/getCSATResponses');
-
-const isFeatureEnabled = computed(() =>
-  isCloudFeatureEnabled('csat_review_notes')
-);
-const showExpandableRows = computed(
-  () => isFeatureEnabled.value || isOnChatwootCloud.value
-);
 const metrics = useMapGetter('csat/getMetrics');
-const uiFlags = useMapGetter('csat/getUIFlags');
-
-const isLoading = computed(() => uiFlags.value.isFetching);
-
-const expandedRows = ref({});
-
-const toggleRow = id => {
-  expandedRows.value = {
-    ...expandedRows.value,
-    [id]: !expandedRows.value[id],
-  };
-};
-
-const isRowExpanded = id => !!expandedRows.value[id];
 
 const tableData = computed(() => {
   return csatResponses.value.map(response => ({
-    id: response.id,
     contact: response.contact,
     assignedAgent: response.assigned_agent,
     rating: response.rating,
-    feedbackText: response.feedback_message || '',
+    feedbackText: response.feedback_message || '---',
     conversationId: response.conversation_id,
-    csatReviewNotes: response.csat_review_notes,
     createdAgo: dynamicTime(response.created_at),
     createdAt: messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
-    _original: response,
   }));
 });
 
-const getRatingData = rating => {
-  return CSAT_RATINGS.find(r => r.value === rating) || {};
+const defaultSpanRender = cellProps => {
+  const value = cellProps.getValue() || '---';
+  return h(
+    'span',
+    {
+      class: 'line-clamp-5 break-words max-w-full text-n-slate-12',
+      title: value,
+    },
+    value
+  );
 };
 
 const columnHelper = createColumnHelper();
 
-const columns = computed(() => {
-  const baseColumns = [
-    columnHelper.accessor('contact', {
-      header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-    }),
-    columnHelper.accessor('rating', {
-      header: t('CSAT_REPORTS.TABLE.HEADER.RATING'),
-      size: 120,
-    }),
-    columnHelper.accessor('feedbackText', {
-      header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-      size: 500,
-    }),
-    columnHelper.accessor('assignedAgent', {
-      header: t('CSAT_REPORTS.TABLE.HEADER.HANDLED_BY'),
-      size: 160,
-    }),
-  ];
+const columns = computed(() => [
+  columnHelper.accessor('contact', {
+    header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
+    width: 200,
+    cell: cellProps => {
+      const { contact } = cellProps.row.original;
+      if (contact) {
+        return h(UserAvatarWithName, {
+          user: contact,
+          class: 'max-w-[200px] overflow-hidden',
+        });
+      }
+      return '--';
+    },
+  }),
+  columnHelper.accessor('assignedAgent', {
+    header: t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
+    width: 200,
+    cell: cellProps => {
+      const { assignedAgent } = cellProps.row.original;
+      if (assignedAgent) {
+        return h(UserAvatarWithName, {
+          user: assignedAgent,
+          class: 'max-w-[200px] overflow-hidden',
+        });
+      }
+      return '--';
+    },
+  }),
+  columnHelper.accessor('rating', {
+    header: t('CSAT_REPORTS.TABLE.HEADER.RATING'),
+    align: 'center',
+    width: 80,
+    cell: cellProps => {
+      const { rating: giveRating } = cellProps.row.original;
+      const [ratingObject = {}] = CSAT_RATINGS.filter(
+        rating => rating.value === giveRating
+      );
 
-  if (showExpandableRows.value) {
-    baseColumns.push(
-      columnHelper.accessor('actions', {
-        header: '',
-        size: 50,
-      })
-    );
-  }
-
-  return baseColumns;
-});
+      return h(
+        'span',
+        {
+          class: ratingObject.emoji
+            ? 'emoji-response text-lg'
+            : 'text-n-slate-10',
+        },
+        ratingObject.emoji || '---'
+      );
+    },
+  }),
+  columnHelper.accessor('feedbackText', {
+    header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
+    width: 400,
+    cell: defaultSpanRender,
+  }),
+  columnHelper.accessor('conversationId', {
+    header: '',
+    width: 100,
+    cell: cellProps => h(ConversationCell, cellProps),
+  }),
+]);
 
 const paginationParams = computed(() => {
   return {
@@ -134,124 +149,25 @@ const table = useVueTable({
     },
   },
   onPaginationChange: updater => {
-    const newPagination = updater(paginationParams.value);
-    emit('pageChange', newPagination.pageIndex);
+    const newPagintaion = updater(paginationParams.value);
+    emit('pageChange', newPagintaion.pageIndex);
   },
 });
 </script>
 
 <template>
   <div
-    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 overflow-hidden"
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
   >
-    <CsatTableLoader v-if="isLoading" />
-
-    <div v-else-if="tableData.length" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-n-solid-2 border-b border-n-container">
-          <tr>
-            <th
-              v-for="header in table.getFlatHeaders()"
-              :key="header.id"
-              :style="{
-                width: header.getSize() ? `${header.getSize()}px` : 'auto',
-              }"
-              class="text-left py-3 px-5 font-medium text-sm text-n-slate-12"
-            >
-              {{ header.column.columnDef.header }}
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-n-container">
-          <template v-for="row in tableData" :key="row.id">
-            <tr
-              class="group hover:bg-n-slate-2 dark:hover:bg-n-solid-3 transition-colors"
-              :class="{
-                'bg-n-slate-2 dark:bg-n-solid-3': isRowExpanded(row.id),
-                'cursor-pointer': showExpandableRows,
-              }"
-              @click="showExpandableRows && toggleRow(row.id)"
-            >
-              <td class="py-4 px-5">
-                <CsatContactCell
-                  :contact="row.contact"
-                  :conversation-id="row.conversationId"
-                  :created-ago="row.createdAgo"
-                  :created-at="row.createdAt"
-                />
-              </td>
-              <td class="py-4 px-5">
-                <div
-                  class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg"
-                  :style="{
-                    backgroundColor: `${getRatingData(row.rating).color}20`,
-                  }"
-                >
-                  <span class="text-sm font-medium text-n-slate-12 truncate">
-                    {{ $t(getRatingData(row.rating).translationKey) }}
-                  </span>
-                </div>
-              </td>
-              <td class="py-4 px-5">
-                <span
-                  v-if="!row.feedbackText"
-                  class="text-n-slate-10 italic text-sm"
-                >
-                  {{ $t('CSAT_REPORTS.NO_FEEDBACK') }}
-                </span>
-                <div v-else class="text-sm text-n-slate-12">
-                  <ShowMore :text="row.feedbackText" :limit="100" />
-                </div>
-              </td>
-              <td class="py-4 px-5">
-                <UserAvatarWithName
-                  v-if="row.assignedAgent"
-                  :user="row.assignedAgent"
-                  :size="28"
-                />
-                <span v-else class="text-n-slate-10 text-sm italic">
-                  {{ $t('CSAT_REPORTS.NO_AGENT') }}
-                </span>
-              </td>
-              <td v-if="showExpandableRows" class="py-4 px-5">
-                <div
-                  class="p-1.5 rounded-md text-n-slate-10 group-hover:text-n-slate-12 transition-colors"
-                >
-                  <i
-                    class="size-4 block transition-transform duration-200"
-                    :class="
-                      isRowExpanded(row.id)
-                        ? 'i-lucide-chevron-up'
-                        : 'i-lucide-chevron-down'
-                    "
-                  />
-                </div>
-              </td>
-            </tr>
-            <tr
-              v-if="showExpandableRows && isRowExpanded(row.id)"
-              class="!border-t-0"
-            >
-              <td colspan="5" class="p-0 !border-t-0">
-                <CsatExpandedRow :response="row._original" />
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
-
-    <CsatEmptyState
-      v-else
-      :title="$t('CSAT_REPORTS.NO_RECORDS')"
-      :description="$t('CSAT_REPORTS.NO_RECORDS_DESCRIPTION')"
-    />
-
+    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
     <div
-      v-if="metrics.totalResponseCount"
-      class="px-6 py-4 border-t border-n-weak"
+      v-show="!tableData.length"
+      class="h-48 flex items-center justify-center text-n-slate-12 text-sm"
     >
-      <Pagination :table="table" />
+      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
+    </div>
+    <div v-if="metrics.totalResponseCount" class="table-pagination">
+      <Pagination class="mt-2" :table="table" />
     </div>
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTableLoader.vue

@@ -1,36 +0,0 @@
-<script setup>
-defineProps({
-  rows: {
-    type: Number,
-    default: 5,
-  },
-});
-</script>
-
-<template>
-  <div class="p-6">
-    <div class="space-y-4">
-      <div class="flex gap-4 pb-3 border-b border-n-weak">
-        <div class="h-4 w-32 rounded bg-n-slate-3 animate-pulse" />
-        <div class="h-4 w-28 rounded bg-n-slate-3 animate-pulse" />
-        <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
-        <div class="h-4 flex-1 rounded bg-n-slate-3 animate-pulse" />
-        <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
-      </div>
-
-      <div v-for="n in rows" :key="n" class="flex items-center gap-4 py-3">
-        <div class="flex items-center gap-2 w-48">
-          <div class="size-8 rounded-full bg-n-slate-3 animate-pulse" />
-          <div class="h-4 w-24 rounded bg-n-slate-3 animate-pulse" />
-        </div>
-        <div class="flex items-center gap-2 w-44">
-          <div class="size-8 rounded-full bg-n-slate-3 animate-pulse" />
-          <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
-        </div>
-        <div class="h-7 w-24 rounded-lg bg-n-slate-3 animate-pulse" />
-        <div class="h-4 flex-1 rounded bg-n-slate-3 animate-pulse" />
-        <div class="h-4 w-16 rounded bg-n-slate-3 animate-pulse" />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js

@@ -6,6 +6,7 @@ describe('CsatMetrics.vue', () => {
   let getters;
   let store;
   let wrapper;
+  const filters = { rating: 3 };
 
   beforeEach(() => {
     getters = {
@@ -17,16 +18,8 @@ describe('CsatMetrics.vue', () => {
         4: 30,
         5: 10,
       }),
-      'csat/getRatingCount': () => ({
-        1: 10,
-        2: 20,
-        3: 30,
-        4: 30,
-        5: 10,
-      }),
       'csat/getSatisfactionScore': () => 85,
       'csat/getResponseRate': () => 90,
-      'csat/getUIFlags': () => ({ isFetchingMetrics: false }),
     };
 
     store = createStore({
@@ -35,31 +28,40 @@ describe('CsatMetrics.vue', () => {
 
     wrapper = shallowMount(CsatMetrics, {
       global: {
-        plugins: [store],
+        plugins: [store], // Ensure the store is injected here
         mocks: {
-          $t: msg => msg,
+          $t: msg => msg, // mock translation function
         },
         stubs: {
-          CsatMetricCard: true,
-          CsatRatingDistribution: true,
+          CsatMetricCard: '<csat-metric-card/>',
+          BarChart: '<woot-horizontal-bar/>',
         },
       },
+      props: { filters },
     });
   });
 
   it('computes response count correctly', () => {
     expect(wrapper.vm.responseCount).toBe('100');
+    expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('renders metric cards with correct values', () => {
-    const metricCards = wrapper.findAllComponents({ name: 'CsatMetricCard' });
-    expect(metricCards).toHaveLength(3);
+  it('formats values to percent correctly', () => {
+    expect(wrapper.vm.formatToPercent(85)).toBe('85%');
+    expect(wrapper.vm.formatToPercent(null)).toBe('--');
   });
 
-  it('renders rating distribution component', () => {
-    const distribution = wrapper.findComponent({
-      name: 'CsatRatingDistribution',
-    });
-    expect(distribution.exists()).toBe(true);
+  it('maps rating value to emoji correctly', () => {
+    const rating = wrapper.vm.csatRatings[0]; // assuming this is { value: 1, emoji: '😡' }
+    expect(wrapper.vm.ratingToEmoji(rating.value)).toBe(rating.emoji);
+  });
+
+  it('hides report card if rating filter is enabled', () => {
+    expect(wrapper.html()).not.toContain('bar-chart-stub');
+  });
+
+  it('shows report card if rating filter is not enabled', async () => {
+    await wrapper.setProps({ filters: {} });
+    expect(wrapper.html()).toContain('bar-chart-stub');
   });
 });

app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CsatMetrics.vue > computes response count correctly 1`] = `
+"<div class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4">
+  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="100"></csat-metric-card-stub>
+  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="--"></csat-metric-card-stub>
+  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="90%"></csat-metric-card-stub>
+  <!--v-if-->
+</div>"
+`;

app/javascript/dashboard/routes/dashboard/settings/settings.routes.js

@@ -24,7 +24,6 @@ import teams from './teams/teams.routes';
 import customRoles from './customRoles/customRole.routes';
 import profile from './profile/profile.routes';
 import security from './security/security.routes';
-import captain from './captain/captain.routes';
 
 export default {
   routes: [
@@ -64,6 +63,5 @@ export default {
     ...customRoles.routes,
     ...profile.routes,
     ...security.routes,
-    ...captain.routes,
   ],
 };

app/javascript/dashboard/store/captain/preferences.js

@@ -1,71 +0,0 @@
-import { defineStore } from 'pinia';
-import CaptainPreferencesAPI from 'dashboard/api/captain/preferences';
-
-export const useCaptainConfigStore = defineStore('captainConfig', {
-  state: () => ({
-    providers: {},
-    models: {},
-    features: {},
-    uiFlags: {
-      isFetching: false,
-    },
-  }),
-
-  getters: {
-    getProviders: state => state.providers,
-    getModels: state => state.models,
-    getFeatures: state => state.features,
-    getUIFlags: state => state.uiFlags,
-    getModelsForFeature: state => featureKey => {
-      const feature = state.features[featureKey];
-      const models = feature?.models || [];
-
-      const providerOrder = { openai: 0, anthropic: 1, gemini: 2 };
-
-      return [...models].sort((a, b) => {
-        // Move coming_soon items to the end
-        if (a.coming_soon && !b.coming_soon) return 1;
-        if (!a.coming_soon && b.coming_soon) return -1;
-
-        // Sort by provider
-        const providerA = providerOrder[a.provider] ?? 999;
-        const providerB = providerOrder[b.provider] ?? 999;
-        if (providerA !== providerB) return providerA - providerB;
-
-        // Sort by credit_multiplier (highest first)
-        return (b.credit_multiplier || 0) - (a.credit_multiplier || 0);
-      });
-    },
-    getDefaultModelForFeature: state => featureKey => {
-      const feature = state.features[featureKey];
-      return feature?.default || null;
-    },
-    getSelectedModelForFeature: state => featureKey => {
-      const feature = state.features[featureKey];
-      return feature?.selected || feature?.default || null;
-    },
-  },
-
-  actions: {
-    async fetch() {
-      this.uiFlags.isFetching = true;
-      try {
-        const response = await CaptainPreferencesAPI.get();
-        this.providers = response.data.providers || {};
-        this.models = response.data.models || {};
-        this.features = response.data.features || {};
-      } catch (error) {
-        // Ignore error
-      } finally {
-        this.uiFlags.isFetching = false;
-      }
-    },
-
-    async updatePreferences(data) {
-      const response = await CaptainPreferencesAPI.updatePreferences(data);
-      this.providers = response.data.providers || {};
-      this.models = response.data.models || {};
-      this.features = response.data.features || {};
-    },
-  },
-});

app/javascript/dashboard/store/modules/conversations/helpers/filterHelpers.js

@@ -78,6 +78,7 @@ const getValueFromConversation = (conversation, attributeKey) => {
     case 'team_id':
       return conversation.meta?.team?.id;
     case 'browser_language':
+    case 'country_code':
     case 'referer':
       return conversation.additional_attributes?.[attributeKey];
     default:

app/javascript/dashboard/store/modules/csat.js

@@ -82,9 +82,6 @@ export const getters = {
       ),
     };
   },
-  getRatingCount(_state) {
-    return _state.metrics.ratingsCount;
-  },
 };
 
 export const actions = {
@@ -118,13 +115,6 @@ export const actions = {
       });
     });
   },
-  update: async ({ commit }, { id, reviewNotes }) => {
-    const response = await CSATReports.update(id, {
-      csat_review_notes: reviewNotes,
-    });
-    commit(types.UPDATE_CSAT_RESPONSE, response.data);
-    return response.data;
-  },
 };
 
 export const mutations = {
@@ -154,7 +144,6 @@ export const mutations = {
     };
     _state.metrics.totalSentMessagesCount = totalSentMessagesCount || 0;
   },
-  [types.UPDATE_CSAT_RESPONSE]: MutationHelpers.update,
 };
 
 export default {

app/javascript/dashboard/store/modules/reports.js

@@ -234,19 +234,6 @@ export const actions = {
         console.error(error);
       });
   },
-  downloadConversationsSummaryReports(_, reportObj) {
-    return Report.getConversationsSummaryReports(reportObj)
-      .then(response => {
-        downloadCsvFile(reportObj.fileName, response.data);
-        AnalyticsHelper.track(REPORTS_EVENTS.DOWNLOAD_REPORT, {
-          reportType: 'conversations_summary',
-          businessHours: reportObj?.businessHours,
-        });
-      })
-      .catch(error => {
-        console.error(error);
-      });
-  },
   downloadLabelReports(_, reportObj) {
     return Report.getLabelReports(reportObj)
       .then(response => {

app/javascript/dashboard/store/modules/specs/csat/getters.spec.js

@@ -86,19 +86,4 @@ describe('#getters', () => {
       })
     ).toEqual('50.00');
   });
-
-  it('getRatingCount', () => {
-    const state = {
-      metrics: {
-        ratingsCount: { 1: 10, 2: 20, 3: 15, 4: 3, 5: 2 },
-      },
-    };
-    expect(getters.getRatingCount(state)).toEqual({
-      1: 10,
-      2: 20,
-      3: 15,
-      4: 3,
-      5: 2,
-    });
-  });
 });

app/javascript/dashboard/store/modules/specs/reports/actions.spec.js

@@ -201,24 +201,4 @@ describe('#actions', () => {
       );
     });
   });
-
-  describe('#downloadConversationsSummaryReports', () => {
-    it('open CSV download prompt if API is success', async () => {
-      const data = `Conversations,Messages received,Messages sent,Avg first response time,Avg resolution time,Resolution count,Avg customer waiting time
-      217,323,623,23 hours 22 minutes,179 days 18 hours,30,48 days 4 hours`;
-      axios.get.mockResolvedValue({ data });
-      const param = {
-        from: 1631039400,
-        to: 1635013800,
-        fileName: 'conversations-summary-report-24-10-2021.csv',
-      };
-      actions.downloadConversationsSummaryReports(1, param);
-      await flushPromises();
-
-      expect(DownloadHelper.downloadCsvFile).toBeCalledWith(
-        param.fileName,
-        data
-      );
-    });
-  });
 });

app/javascript/dashboard/store/mutation-types.js

@@ -241,7 +241,6 @@ export default {
   SET_CSAT_RESPONSE_UI_FLAG: 'SET_CSAT_RESPONSE_UI_FLAG',
   SET_CSAT_RESPONSE: 'SET_CSAT_RESPONSE',
   SET_CSAT_RESPONSE_METRICS: 'SET_CSAT_RESPONSE_METRICS',
-  UPDATE_CSAT_RESPONSE: 'UPDATE_CSAT_RESPONSE',
 
   // Custom Attributes
   SET_CUSTOM_ATTRIBUTE_UI_FLAG: 'SET_CUSTOM_ATTRIBUTE_UI_FLAG',

app/javascript/shared/helpers/FileHelper.js

@@ -1,7 +1,3 @@
-import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
-
 export const DEFAULT_MAXIMUM_FILE_UPLOAD_SIZE = 40;
 
 export const formatBytes = (bytes, decimals = 2) => {
@@ -35,55 +31,3 @@ export const resolveMaximumFileUploadSize = value => {
 
   return parsedValue;
 };
-
-/**
- * Validates if a file type is allowed for a specific channel
- * @param {File} file - The file to validate
- * @param {Object} options - Validation options
- * @param {string} options.channelType - The channel type
- * @param {string} options.medium - The channel medium
- * @param {string} options.conversationType - The conversation type (for Instagram DM detection)
- * @param {boolean} options.isInstagramChannel - Whether it's an Instagram channel
- * @param {boolean} options.isOnPrivateNote - Whether composing a private note (uses broader file type list)
- * @returns {boolean} - True if file type is allowed, false otherwise
- */
-export const isFileTypeAllowedForChannel = (file, options = {}) => {
-  if (!file || file.size === 0) return false;
-
-  const {
-    channelType: originalChannelType,
-    medium,
-    conversationType,
-    isInstagramChannel,
-    isOnPrivateNote,
-  } = options;
-
-  // Use broader file types for private notes (matches file picker behavior)
-  const allowedFileTypes = isOnPrivateNote
-    ? ALLOWED_FILE_TYPES
-    : getAllowedFileTypesByChannel({
-        channelType:
-          isInstagramChannel || conversationType === 'instagram_direct_message'
-            ? INBOX_TYPES.INSTAGRAM
-            : originalChannelType,
-        medium,
-      });
-
-  // Convert to array and validate
-  const allowedTypesArray = allowedFileTypes.split(',').map(t => t.trim());
-  const fileExtension = `.${file.name.split('.').pop()}`;
-
-  return allowedTypesArray.some(allowedType => {
-    // Check for exact file extension match
-    if (allowedType === fileExtension) return true;
-
-    // Check for wildcard MIME type (e.g., image/*)
-    if (allowedType.endsWith('/*')) {
-      const prefix = allowedType.slice(0, -2); // Remove '/*'
-      return file.type.startsWith(prefix + '/');
-    }
-
-    // Check for exact MIME type match
-    return allowedType === file.type;
-  });
-};

app/javascript/shared/helpers/specs/FileHelper.spec.js

@@ -4,7 +4,6 @@ import {
   fileSizeInMegaBytes,
   checkFileSizeLimit,
   resolveMaximumFileUploadSize,
-  isFileTypeAllowedForChannel,
 } from '../FileHelper';
 
 describe('#File Helpers', () => {
@@ -62,187 +61,4 @@ describe('#File Helpers', () => {
       expect(resolveMaximumFileUploadSize(75)).toBe(75);
     });
   });
-
-  describe('isFileTypeAllowedForChannel', () => {
-    describe('edge cases', () => {
-      it('should return false for null file', () => {
-        expect(isFileTypeAllowedForChannel(null)).toBe(false);
-      });
-
-      it('should return false for undefined file', () => {
-        expect(isFileTypeAllowedForChannel(undefined)).toBe(false);
-      });
-
-      it('should return false for file with zero size', () => {
-        const file = { name: 'test.png', type: 'image/png', size: 0 };
-        expect(isFileTypeAllowedForChannel(file)).toBe(false);
-      });
-    });
-
-    describe('wildcard MIME types', () => {
-      it('should allow image/png when image/* is allowed', () => {
-        const file = { name: 'test.png', type: 'image/png', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-
-      it('should allow image/jpeg when image/* is allowed', () => {
-        const file = { name: 'test.jpg', type: 'image/jpeg', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-
-      it('should allow audio/mp3 when audio/* is allowed', () => {
-        const file = { name: 'test.mp3', type: 'audio/mp3', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-
-      it('should allow video/mp4 when video/* is allowed', () => {
-        const file = { name: 'test.mp4', type: 'video/mp4', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-    });
-
-    describe('exact MIME types', () => {
-      it('should allow application/pdf when explicitly allowed', () => {
-        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-
-      it('should allow text/plain when explicitly allowed', () => {
-        const file = { name: 'test.txt', type: 'text/plain', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-    });
-
-    describe('file extensions', () => {
-      it('should allow .3gpp extension when explicitly allowed', () => {
-        const file = { name: 'test.3gpp', type: '', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(true);
-      });
-    });
-
-    describe('Instagram special handling', () => {
-      it('should use Instagram rules when isInstagramChannel is true', () => {
-        const file = { name: 'test.png', type: 'image/png', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-            isInstagramChannel: true,
-          })
-        ).toBe(true);
-      });
-
-      it('should use Instagram rules when conversationType is instagram_direct_message', () => {
-        const file = { name: 'test.png', type: 'image/png', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-            conversationType: 'instagram_direct_message',
-          })
-        ).toBe(true);
-      });
-    });
-
-    describe('disallowed file types', () => {
-      it('should reject executable files', () => {
-        const file = {
-          name: 'malware.exe',
-          type: 'application/x-msdownload',
-          size: 1000,
-        };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(false);
-      });
-
-      it('should reject unsupported file types', () => {
-        const file = {
-          name: 'test.xyz',
-          type: 'application/x-unknown',
-          size: 1000,
-        };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::WebWidget',
-          })
-        ).toBe(false);
-      });
-    });
-
-    describe('channel-specific rules', () => {
-      it('should allow WhatsApp-specific file types', () => {
-        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::Whatsapp',
-          })
-        ).toBe(true);
-      });
-
-      it('should allow Twilio WhatsApp-specific file types', () => {
-        const file = { name: 'test.pdf', type: 'application/pdf', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::TwilioSms',
-            medium: 'whatsapp',
-          })
-        ).toBe(true);
-      });
-    });
-
-    describe('private note file types', () => {
-      it('should allow broader file types for private notes', () => {
-        const file = {
-          name: 'test.pdf',
-          type: 'application/pdf',
-          size: 1000,
-        };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::Line',
-            isOnPrivateNote: true,
-          })
-        ).toBe(true);
-      });
-
-      it('should allow CSV files in private notes', () => {
-        const file = { name: 'data.csv', type: 'text/csv', size: 1000 };
-        expect(
-          isFileTypeAllowedForChannel(file, {
-            channelType: 'Channel::Line',
-            isOnPrivateNote: true,
-          })
-        ).toBe(true);
-      });
-    });
-  });
 });

app/javascript/widget/App.vue

@@ -82,7 +82,6 @@ export default {
     const { websiteToken, locale, widgetColor } = window.chatwootWebChannel;
     this.setLocale(locale);
     this.setWidgetColor(widgetColor);
-    this.setWidgetColorVariable(widgetColor);
     setHeader(window.authToken);
     if (this.isIFrame) {
       this.registerListeners();
@@ -115,14 +114,6 @@ export default {
       'resetCampaign',
     ]),
     ...mapActions('agent', ['fetchAvailableAgents']),
-    setWidgetColorVariable(widgetColor) {
-      if (widgetColor) {
-        document.documentElement.style.setProperty(
-          '--widget-color',
-          widgetColor
-        );
-      }
-    },
     scrollConversationToBottom() {
       const container = this.$el.querySelector('.conversation-wrap');
       container.scrollTop = container.scrollHeight;

app/javascript/widget/components/ChatInputWrap.vue

@@ -130,7 +130,7 @@ export default {
   <div
     class="items-center flex ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2 rounded-[7px] transition-all duration-200 bg-n-background !shadow-[0_0_0_1px,0_0_2px_3px]"
     :class="{
-      '!shadow-[var(--widget-color,#2781f6)]': isFocused,
+      '!shadow-n-brand dark:!shadow-n-brand': isFocused,
       '!shadow-n-strong dark:!shadow-n-strong': !isFocused,
     }"
     @keydown.esc="hideEmojiPicker"

app/jobs/conversations/resolution_job.rb

@@ -16,12 +16,10 @@ class Conversations::ResolutionJob < ApplicationJob
   private
 
   def conversation_scope(account)
-    base_scope = if account.auto_resolve_ignore_waiting
-                   account.conversations.resolvable_not_waiting(account.auto_resolve_after)
-                 else
-                   account.conversations.resolvable_all(account.auto_resolve_after)
-                 end
-    # Exclude orphan conversations where contact was deleted but conversation cleanup is pending
-    base_scope.where.not(contact_id: nil)
+    if account.auto_resolve_ignore_waiting
+      account.conversations.resolvable_not_waiting(account.auto_resolve_after)
+    else
+      account.conversations.resolvable_all(account.auto_resolve_after)
+    end
   end
 end

app/listeners/action_cable_listener.rb

@@ -159,11 +159,8 @@ class ActionCableListener < BaseListener
   end
 
   def contact_deleted(event)
-    contact_data = event.data[:contact_data]
-    account = Account.find_by(id: contact_data[:account_id])
-    return if account.blank?
-
-    broadcast(account, [account_token(account)], CONTACT_DELETED, contact_data)
+    contact, account = extract_contact_and_account(event)
+    broadcast(account, [account_token(account)], CONTACT_DELETED, contact.push_event_data)
   end
 
   def conversation_mentioned(event)

app/models/account.rb

@@ -28,7 +28,6 @@ class Account < ApplicationRecord
   include Reportable
   include Featurable
   include CacheKeys
-  include CaptainFeaturable
 
   SETTINGS_PARAMS_SCHEMA = {
     'type': 'object',
@@ -42,30 +41,6 @@ class Account < ApplicationRecord
         'conversation_required_attributes': {
           'type': %w[array null],
           'items': { 'type': 'string' }
-        },
-        'captain_models': {
-          'type': %w[object null],
-          'properties': {
-            'editor': { 'type': %w[string null] },
-            'assistant': { 'type': %w[string null] },
-            'copilot': { 'type': %w[string null] },
-            'label_suggestion': { 'type': %w[string null] },
-            'audio_transcription': { 'type': %w[string null] },
-            'help_center_search': { 'type': %w[string null] }
-          },
-          'additionalProperties': false
-        },
-        'captain_features': {
-          'type': %w[object null],
-          'properties': {
-            'editor': { 'type': %w[boolean null] },
-            'assistant': { 'type': %w[boolean null] },
-            'copilot': { 'type': %w[boolean null] },
-            'label_suggestion': { 'type': %w[boolean null] },
-            'audio_transcription': { 'type': %w[boolean null] },
-            'help_center_search': { 'type': %w[boolean null] }
-          },
-          'additionalProperties': false
         }
       },
     'required': [],
@@ -84,9 +59,7 @@ class Account < ApplicationRecord
                  attribute_resolver: ->(record) { record.settings }
 
   store_accessor :settings, :auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting
-
   store_accessor :settings, :audio_transcriptions, :auto_resolve_label, :conversation_required_attributes
-  store_accessor :settings, :captain_models, :captain_features
 
   has_many :account_users, dependent: :destroy_async
   has_many :agent_bot_inboxes, dependent: :destroy_async

app/models/channel/whatsapp.rb

@@ -34,7 +34,6 @@ class Channel::Whatsapp < ApplicationRecord
 
   after_create :sync_templates
   before_destroy :teardown_webhooks
-  after_commit :setup_webhooks, on: :create, if: :should_auto_setup_webhooks?
 
   def name
     'Whatsapp'
@@ -87,10 +86,4 @@ class Channel::Whatsapp < ApplicationRecord
   def teardown_webhooks
     Whatsapp::WebhookTeardownService.new(self).perform
   end
-
-  def should_auto_setup_webhooks?
-    # Only auto-setup webhooks for whatsapp_cloud provider with manual setup
-    # Embedded signup calls setup_webhooks explicitly in EmbeddedSignupService
-    provider == 'whatsapp_cloud' && provider_config['source'] != 'embedded_signup'
-  end
 end

app/models/concerns/captain_featurable.rb

@@ -1,62 +0,0 @@
-# frozen_string_literal: true
-
-module CaptainFeaturable
-  extend ActiveSupport::Concern
-
-  included do
-    validate :validate_captain_models
-
-    # Dynamically define accessor methods for each captain feature
-    Llm::Models.feature_keys.each do |feature_key|
-      # Define enabled? methods (e.g., captain_editor_enabled?)
-      define_method("captain_#{feature_key}_enabled?") do
-        captain_features_with_defaults[feature_key]
-      end
-
-      # Define model accessor methods (e.g., captain_editor_model)
-      define_method("captain_#{feature_key}_model") do
-        captain_models_with_defaults[feature_key]
-      end
-    end
-  end
-
-  def captain_preferences
-    {
-      models: captain_models_with_defaults,
-      features: captain_features_with_defaults
-    }.with_indifferent_access
-  end
-
-  private
-
-  def captain_models_with_defaults
-    stored_models = captain_models || {}
-    Llm::Models.feature_keys.each_with_object({}) do |feature_key, result|
-      stored_value = stored_models[feature_key]
-      result[feature_key] = if stored_value.present? && Llm::Models.valid_model_for?(feature_key, stored_value)
-                              stored_value
-                            else
-                              Llm::Models.default_model_for(feature_key)
-                            end
-    end
-  end
-
-  def captain_features_with_defaults
-    stored_features = captain_features || {}
-    Llm::Models.feature_keys.index_with do |feature_key|
-      stored_features[feature_key] == true
-    end
-  end
-
-  def validate_captain_models
-    return if captain_models.blank?
-
-    captain_models.each do |feature_key, model_name|
-      next if model_name.blank?
-      next if Llm::Models.valid_model_for?(feature_key, model_name)
-
-      allowed_models = Llm::Models.models_for(feature_key)
-      errors.add(:captain_models, "'#{model_name}' is not a valid model for #{feature_key}. Allowed: #{allowed_models.join(', ')}")
-    end
-  end
-end

app/models/concerns/conversation_mute_helpers.rb

@@ -2,21 +2,17 @@ module ConversationMuteHelpers
   extend ActiveSupport::Concern
 
   def mute!
-    return unless contact
-
     resolved!
     contact.update(blocked: true)
     create_muted_message
   end
 
   def unmute!
-    return unless contact
-
     contact.update(blocked: false)
     create_unmuted_message
   end
 
   def muted?
-    contact&.blocked? || false
+    contact.blocked?
   end
 end

app/models/contact.rb

@@ -179,9 +179,11 @@ class Contact < ApplicationRecord
   end
 
   def self.resolved_contacts(use_crm_v2: false)
-    return where(contact_type: 'lead') if use_crm_v2
-
-    where("contacts.email <> '' OR contacts.phone_number <> '' OR contacts.identifier <> ''")
+    if use_crm_v2
+      where(contact_type: 'lead')
+    else
+      where("contacts.email <> '' OR contacts.phone_number <> '' OR contacts.identifier <> ''")
+    end
   end
 
   def discard_invalid_attrs
@@ -241,13 +243,7 @@ class Contact < ApplicationRecord
   end
 
   def dispatch_destroy_event
-    # Pass serialized data instead of ActiveRecord object to avoid DeserializationError
-    # when the async EventDispatcherJob runs after the contact has been deleted
-    Rails.configuration.dispatcher.dispatch(
-      CONTACT_DELETED,
-      Time.zone.now,
-      contact_data: push_event_data.merge(account_id: account_id)
-    )
+    Rails.configuration.dispatcher.dispatch(CONTACT_DELETED, Time.zone.now, contact: self)
   end
 end
 Contact.include_mod_with('Concerns::Contact')

app/models/csat_survey_response.rb

@@ -27,7 +27,6 @@ class CsatSurveyResponse < ApplicationRecord
   belongs_to :contact
   belongs_to :message
   belongs_to :assigned_agent, class_name: 'User', optional: true, inverse_of: :csat_survey_responses
-  belongs_to :review_notes_updated_by, class_name: 'User', optional: true
 
   validates :rating, presence: true, inclusion: { in: [1, 2, 3, 4, 5] }
   validates :account_id, presence: true

app/models/inbox.rb

@@ -158,10 +158,6 @@ class Inbox < ApplicationRecord
     channel_type == 'Channel::Whatsapp'
   end
 
-  def twilio_whatsapp?
-    channel_type == 'Channel::TwilioSms' && channel.medium == 'whatsapp'
-  end
-
   def assignable_agents
     (account.users.where(id: members.select(:user_id)) + account.administrators).uniq
   end

app/models/user.rb

@@ -90,8 +90,6 @@ class User < ApplicationRecord
   has_many :assigned_conversations, foreign_key: 'assignee_id', class_name: 'Conversation', dependent: :nullify, inverse_of: :assignee
   alias_attribute :conversations, :assigned_conversations
   has_many :csat_survey_responses, foreign_key: 'assigned_agent_id', dependent: :nullify, inverse_of: :assigned_agent
-  has_many :reviewed_csat_survey_responses, foreign_key: 'review_notes_updated_by_id', class_name: 'CsatSurveyResponse',
-                                            dependent: :nullify, inverse_of: :review_notes_updated_by
   has_many :conversation_participants, dependent: :destroy_async
   has_many :participating_conversations, through: :conversation_participants, source: :conversation
 

app/services/csat_survey_service.rb

@@ -6,8 +6,6 @@ class CsatSurveyService
 
     if whatsapp_channel? && template_available_and_approved?
       send_whatsapp_template_survey
-    elsif inbox.twilio_whatsapp? && twilio_template_available_and_approved?
-      send_twilio_whatsapp_template_survey
     elsif within_messaging_window?
       ::MessageTemplates::Template::CsatSurvey.new(conversation: conversation).perform
     else
@@ -20,7 +18,7 @@ class CsatSurveyService
   delegate :inbox, :contact, to: :conversation
 
   def should_send_csat_survey?
-    conversation_allows_csat? && csat_enabled? && !csat_already_sent? && csat_allowed_by_survey_rules?
+    conversation_allows_csat? && csat_enabled? && !csat_already_sent?
   end
 
   def conversation_allows_csat?
@@ -39,37 +37,6 @@ class CsatSurveyService
     conversation.can_reply?
   end
 
-  def csat_allowed_by_survey_rules?
-    return true unless survey_rules_configured?
-
-    labels = conversation.label_list
-    return true if rule_values.empty?
-
-    case rule_operator
-    when 'contains'
-      rule_values.any? { |label| labels.include?(label) }
-    when 'does_not_contain'
-      rule_values.none? { |label| labels.include?(label) }
-    else
-      true
-    end
-  end
-
-  def survey_rules_configured?
-    return false if csat_config.blank?
-    return false if csat_config['survey_rules'].blank?
-
-    rule_values.any?
-  end
-
-  def rule_operator
-    csat_config.dig('survey_rules', 'operator') || 'contains'
-  end
-
-  def rule_values
-    csat_config.dig('survey_rules', 'values') || []
-  end
-
   def whatsapp_channel?
     inbox.channel_type == 'Channel::Whatsapp'
   end
@@ -78,7 +45,7 @@ class CsatSurveyService
     template_config = inbox.csat_config&.dig('template')
     return false unless template_config
 
-    template_name = template_config['name'] || CsatTemplateNameService.csat_template_name(inbox.id)
+    template_name = template_config['name'] || Whatsapp::CsatTemplateNameService.csat_template_name(inbox.id)
 
     status_result = inbox.channel.provider_service.get_template_status(template_name)
 
@@ -88,25 +55,9 @@ class CsatSurveyService
     false
   end
 
-  def twilio_template_available_and_approved?
-    template_config = inbox.csat_config&.dig('template')
-    return false unless template_config
-
-    content_sid = template_config['content_sid']
-    return false unless content_sid
-
-    template_service = Twilio::CsatTemplateService.new(inbox.channel)
-    status_result = template_service.get_template_status(content_sid)
-
-    status_result[:success] && status_result[:template][:status] == 'approved'
-  rescue StandardError => e
-    Rails.logger.error "Error checking Twilio CSAT template status: #{e.message}"
-    false
-  end
-
   def send_whatsapp_template_survey
     template_config = inbox.csat_config&.dig('template')
-    template_name = template_config['name'] || CsatTemplateNameService.csat_template_name(inbox.id)
+    template_name = template_config['name'] || Whatsapp::CsatTemplateNameService.csat_template_name(inbox.id)
 
     phone_number = conversation.contact_inbox.source_id
     template_info = build_template_info(template_name, template_config)
@@ -144,30 +95,6 @@ class CsatSurveyService
     )
   end
 
-  def csat_config
-    inbox.csat_config || {}
-  end
-
-  def send_twilio_whatsapp_template_survey
-    template_config = inbox.csat_config&.dig('template')
-    content_sid = template_config['content_sid']
-
-    phone_number = conversation.contact_inbox.source_id
-    content_variables = { '1' => conversation.uuid }
-    message = build_csat_message
-
-    send_service = Twilio::SendOnTwilioService.new(message: message)
-    result = send_service.send_csat_template_message(
-      phone_number: phone_number,
-      content_sid: content_sid,
-      content_variables: content_variables
-    )
-
-    message.update!(source_id: result[:message_id]) if result[:success] && result[:message_id].present?
-  rescue StandardError => e
-    Rails.logger.error "Error sending Twilio WhatsApp CSAT template for conversation #{conversation.id}: #{e.message}"
-  end
-
   def create_csat_not_sent_activity_message
     content = I18n.t('conversations.activity.csat.not_sent_due_to_messaging_window')
     activity_message_params = {

app/services/csat_template_management_service.rb

@@ -1,196 +0,0 @@
-class CsatTemplateManagementService
-  DEFAULT_BUTTON_TEXT = 'Please rate us'.freeze
-  DEFAULT_LANGUAGE = 'en'.freeze
-
-  def initialize(inbox)
-    @inbox = inbox
-  end
-
-  def template_status
-    template = @inbox.csat_config&.dig('template')
-    return { template_exists: false } unless template
-
-    if @inbox.twilio_whatsapp?
-      get_twilio_template_status(template)
-    else
-      get_whatsapp_template_status(template)
-    end
-  rescue StandardError => e
-    Rails.logger.error "Error fetching CSAT template status: #{e.message}"
-    { service_error: e.message }
-  end
-
-  def create_template(template_params)
-    validate_template_params!(template_params)
-
-    delete_existing_template_if_needed
-
-    result = create_template_via_provider(template_params)
-    update_inbox_csat_config(result) if result[:success]
-
-    result
-  rescue StandardError => e
-    Rails.logger.error "Error creating CSAT template: #{e.message}"
-    { success: false, service_error: 'Template creation failed' }
-  end
-
-  private
-
-  def validate_template_params!(template_params)
-    raise ActionController::ParameterMissing, 'message' if template_params[:message].blank?
-  end
-
-  def create_template_via_provider(template_params)
-    if @inbox.twilio_whatsapp?
-      create_twilio_template(template_params)
-    else
-      create_whatsapp_template(template_params)
-    end
-  end
-
-  def create_twilio_template(template_params)
-    template_config = build_template_config(template_params)
-    template_service = Twilio::CsatTemplateService.new(@inbox.channel)
-    template_service.create_template(template_config)
-  end
-
-  def create_whatsapp_template(template_params)
-    template_config = build_template_config(template_params)
-    Whatsapp::CsatTemplateService.new(@inbox.channel).create_template(template_config)
-  end
-
-  def build_template_config(template_params)
-    {
-      message: template_params[:message],
-      button_text: template_params[:button_text] || DEFAULT_BUTTON_TEXT,
-      base_url: ENV.fetch('FRONTEND_URL', 'http://localhost:3000'),
-      language: template_params[:language] || DEFAULT_LANGUAGE,
-      template_name: CsatTemplateNameService.csat_template_name(@inbox.id)
-    }
-  end
-
-  def update_inbox_csat_config(result)
-    current_config = @inbox.csat_config || {}
-    template_data = build_template_data_from_result(result)
-    updated_config = current_config.merge('template' => template_data)
-    @inbox.update!(csat_config: updated_config)
-  end
-
-  def build_template_data_from_result(result)
-    if @inbox.twilio_whatsapp?
-      build_twilio_template_data(result)
-    else
-      build_whatsapp_cloud_template_data(result)
-    end
-  end
-
-  def build_twilio_template_data(result)
-    {
-      'friendly_name' => result[:friendly_name],
-      'content_sid' => result[:content_sid],
-      'approval_sid' => result[:approval_sid],
-      'language' => result[:language],
-      'status' => result[:whatsapp_status] || result[:status],
-      'created_at' => Time.current.iso8601
-    }.compact
-  end
-
-  def build_whatsapp_cloud_template_data(result)
-    {
-      'name' => result[:template_name],
-      'template_id' => result[:template_id],
-      'language' => result[:language],
-      'created_at' => Time.current.iso8601
-    }
-  end
-
-  def get_twilio_template_status(template)
-    content_sid = template['content_sid']
-    return { template_exists: false } unless content_sid
-
-    template_service = Twilio::CsatTemplateService.new(@inbox.channel)
-    status_result = template_service.get_template_status(content_sid)
-
-    if status_result[:success]
-      {
-        template_exists: true,
-        friendly_name: template['friendly_name'],
-        content_sid: template['content_sid'],
-        status: status_result[:template][:status],
-        language: template['language']
-      }
-    else
-      {
-        template_exists: false,
-        error: 'Template not found'
-      }
-    end
-  end
-
-  def get_whatsapp_template_status(template)
-    template_name = template['name'] || CsatTemplateNameService.csat_template_name(@inbox.id)
-    status_result = Whatsapp::CsatTemplateService.new(@inbox.channel).get_template_status(template_name)
-
-    if status_result[:success]
-      {
-        template_exists: true,
-        template_name: template_name,
-        status: status_result[:template][:status],
-        template_id: status_result[:template][:id]
-      }
-    else
-      {
-        template_exists: false,
-        error: 'Template not found'
-      }
-    end
-  end
-
-  def delete_existing_template_if_needed
-    template = @inbox.csat_config&.dig('template')
-    return true if template.blank?
-
-    if @inbox.twilio_whatsapp?
-      delete_existing_twilio_template(template)
-    else
-      delete_existing_whatsapp_template(template)
-    end
-  rescue StandardError => e
-    Rails.logger.error "Error during template deletion for inbox #{@inbox.id}: #{e.message}"
-    false
-  end
-
-  def delete_existing_twilio_template(template)
-    content_sid = template['content_sid']
-    return true if content_sid.blank?
-
-    template_service = Twilio::CsatTemplateService.new(@inbox.channel)
-    deletion_result = template_service.delete_template(nil, content_sid)
-
-    if deletion_result[:success]
-      Rails.logger.info "Deleted existing Twilio CSAT template '#{content_sid}' for inbox #{@inbox.id}"
-      true
-    else
-      Rails.logger.warn "Failed to delete existing Twilio CSAT template '#{content_sid}' for inbox #{@inbox.id}: #{deletion_result[:response_body]}"
-      false
-    end
-  end
-
-  def delete_existing_whatsapp_template(template)
-    template_name = template['name']
-    return true if template_name.blank?
-
-    csat_template_service = Whatsapp::CsatTemplateService.new(@inbox.channel)
-    template_status = csat_template_service.get_template_status(template_name)
-    return true unless template_status[:success]
-
-    deletion_result = csat_template_service.delete_template(template_name)
-    if deletion_result[:success]
-      Rails.logger.info "Deleted existing CSAT template '#{template_name}' for inbox #{@inbox.id}"
-      true
-    else
-      Rails.logger.warn "Failed to delete existing CSAT template '#{template_name}' for inbox #{@inbox.id}: #{deletion_result[:response_body]}"
-      false
-    end
-  end
-end

app/services/message_templates/template/csat_survey.rb

@@ -2,6 +2,8 @@ class MessageTemplates::Template::CsatSurvey
   pattr_initialize [:conversation!]
 
   def perform
+    return unless should_send_csat_survey?
+
     ActiveRecord::Base.transaction do
       conversation.messages.create!(csat_survey_message_params)
     end
@@ -11,6 +13,39 @@ class MessageTemplates::Template::CsatSurvey
 
   delegate :contact, :account, :inbox, to: :conversation
 
+  def should_send_csat_survey?
+    return true unless survey_rules_configured?
+
+    labels = conversation.label_list
+
+    return true if rule_values.empty?
+
+    case rule_operator
+    when 'contains'
+      rule_values.any? { |label| labels.include?(label) }
+    when 'does_not_contain'
+      rule_values.none? { |label| labels.include?(label) }
+    else
+      true
+    end
+  end
+
+  def survey_rules_configured?
+    return false if csat_config.blank?
+    return false if csat_config['survey_rules'].blank?
+    return false if rule_values.empty?
+
+    true
+  end
+
+  def rule_operator
+    csat_config.dig('survey_rules', 'operator') || 'contains'
+  end
+
+  def rule_values
+    csat_config.dig('survey_rules', 'values') || []
+  end
+
   def message_content
     return I18n.t('conversations.templates.csat_input_message_body') if csat_config.blank? || csat_config['message'].blank?
 

app/services/twilio/csat_template_api_client.rb

@@ -1,68 +0,0 @@
-class Twilio::CsatTemplateApiClient
-  def initialize(twilio_channel)
-    @twilio_channel = twilio_channel
-  end
-
-  def create_template(request_body)
-    HTTParty.post(
-      "#{api_base_path}/v1/Content",
-      headers: api_headers,
-      body: request_body.to_json
-    )
-  end
-
-  def submit_for_approval(approval_url, template_name, category)
-    request_body = {
-      name: template_name,
-      category: category
-    }
-
-    HTTParty.post(
-      approval_url,
-      headers: api_headers,
-      body: request_body.to_json
-    )
-  end
-
-  def delete_template(content_sid)
-    HTTParty.delete(
-      "#{api_base_path}/v1/Content/#{content_sid}",
-      headers: api_headers
-    )
-  end
-
-  def fetch_template(content_sid)
-    HTTParty.get(
-      "#{api_base_path}/v1/Content/#{content_sid}",
-      headers: api_headers
-    )
-  end
-
-  def fetch_approval_status(content_sid)
-    HTTParty.get(
-      "#{api_base_path}/v1/Content/#{content_sid}/ApprovalRequests",
-      headers: api_headers
-    )
-  end
-
-  private
-
-  def api_headers
-    {
-      'Authorization' => "Basic #{encoded_credentials}",
-      'Content-Type' => 'application/json'
-    }
-  end
-
-  def encoded_credentials
-    if @twilio_channel.api_key_sid.present?
-      Base64.strict_encode64("#{@twilio_channel.api_key_sid}:#{@twilio_channel.auth_token}")
-    else
-      Base64.strict_encode64("#{@twilio_channel.account_sid}:#{@twilio_channel.auth_token}")
-    end
-  end
-
-  def api_base_path
-    'https://content.twilio.com'
-  end
-end

app/services/twilio/csat_template_service.rb

@@ -1,204 +0,0 @@
-class Twilio::CsatTemplateService
-  DEFAULT_BUTTON_TEXT = 'Please rate us'.freeze
-  DEFAULT_LANGUAGE = 'en'.freeze
-  TEMPLATE_CATEGORY = 'UTILITY'.freeze
-  TEMPLATE_STATUS_PENDING = 'PENDING'.freeze
-  TEMPLATE_CONTENT_TYPE = 'twilio/call-to-action'.freeze
-
-  def initialize(twilio_channel)
-    @twilio_channel = twilio_channel
-    @api_client = Twilio::CsatTemplateApiClient.new(twilio_channel)
-  end
-
-  def create_template(template_config)
-    base_name = template_config[:template_name]
-    template_name = generate_template_name(base_name)
-    template_config_with_name = template_config.merge(template_name: template_name)
-
-    request_body = build_template_request_body(template_config_with_name)
-
-    # Step 1: Create template
-    response = @api_client.create_template(request_body)
-
-    return process_template_creation_response(response, template_config_with_name) unless response.success? && response['sid']
-
-    # Step 2: Submit for WhatsApp approval using the approval_create URL
-    approval_url = response.dig('links', 'approval_create')
-
-    if approval_url.present?
-      approval_response = submit_for_whatsapp_approval(approval_url, template_config_with_name[:template_name])
-      process_approval_response(approval_response, response, template_config_with_name)
-    else
-      Rails.logger.warn 'No approval_create URL provided in template creation response'
-      # Fallback if no approval URL provided
-      process_template_creation_response(response, template_config_with_name)
-    end
-  end
-
-  def delete_template(_template_name = nil, content_sid = nil)
-    content_sid ||= current_template_sid_from_config
-    return { success: false, error: 'No template to delete' } unless content_sid
-
-    response = @api_client.delete_template(content_sid)
-    { success: response.success?, response_body: response.body }
-  end
-
-  def get_template_status(content_sid)
-    return { success: false, error: 'No content SID provided' } unless content_sid
-
-    template_response = fetch_template_details(content_sid)
-    return template_response unless template_response[:success]
-
-    approval_response = fetch_approval_status(content_sid)
-    build_template_status_response(content_sid, template_response[:data], approval_response)
-  rescue StandardError => e
-    Rails.logger.error "Error fetching Twilio template status: #{e.message}"
-    { success: false, error: e.message }
-  end
-
-  private
-
-  def fetch_template_details(content_sid)
-    response = @api_client.fetch_template(content_sid)
-
-    if response.success?
-      { success: true, data: response }
-    else
-      Rails.logger.error "Failed to get template details: #{response.code} - #{response.body}"
-      { success: false, error: 'Template not found' }
-    end
-  end
-
-  def fetch_approval_status(content_sid)
-    @api_client.fetch_approval_status(content_sid)
-  end
-
-  def build_template_status_response(content_sid, template_response, approval_response)
-    if approval_response.success? && approval_response['whatsapp']
-      build_approved_template_response(content_sid, template_response, approval_response['whatsapp'])
-    else
-      build_pending_template_response(content_sid, template_response)
-    end
-  end
-
-  def build_approved_template_response(content_sid, template_response, whatsapp_data)
-    {
-      success: true,
-      template: {
-        content_sid: content_sid,
-        friendly_name: whatsapp_data['name'] || template_response['friendly_name'],
-        status: whatsapp_data['status'] || 'pending',
-        language: template_response['language'] || 'en'
-      }
-    }
-  end
-
-  def build_pending_template_response(content_sid, template_response)
-    {
-      success: true,
-      template: {
-        content_sid: content_sid,
-        friendly_name: template_response['friendly_name'],
-        status: 'pending',
-        language: template_response['language'] || 'en'
-      }
-    }
-  end
-
-  def generate_template_name(base_name)
-    current_template_name = current_template_name_from_config
-    CsatTemplateNameService.generate_next_template_name(base_name, @twilio_channel.inbox.id, current_template_name)
-  end
-
-  def current_template_name_from_config
-    @twilio_channel.inbox.csat_config&.dig('template', 'friendly_name')
-  end
-
-  def current_template_sid_from_config
-    @twilio_channel.inbox.csat_config&.dig('template', 'content_sid')
-  end
-
-  def template_exists_in_config?
-    content_sid = current_template_sid_from_config
-    friendly_name = current_template_name_from_config
-
-    content_sid.present? && friendly_name.present?
-  end
-
-  def build_template_request_body(template_config)
-    {
-      friendly_name: template_config[:template_name],
-      language: template_config[:language] || DEFAULT_LANGUAGE,
-      variables: {
-        '1' => '12345' # Example conversation UUID
-      },
-      types: {
-        TEMPLATE_CONTENT_TYPE => {
-          body: template_config[:message],
-          actions: [
-            {
-              type: 'URL',
-              title: template_config[:button_text] || DEFAULT_BUTTON_TEXT,
-              url: "#{template_config[:base_url]}/survey/responses/{{1}}"
-            }
-          ]
-        }
-      }
-    }
-  end
-
-  def submit_for_whatsapp_approval(approval_url, template_name)
-    @api_client.submit_for_approval(approval_url, template_name, TEMPLATE_CATEGORY)
-  end
-
-  def process_template_creation_response(response, template_config = {})
-    if response.success? && response['sid']
-      {
-        success: true,
-        content_sid: response['sid'],
-        friendly_name: template_config[:template_name],
-        language: template_config[:language] || DEFAULT_LANGUAGE,
-        status: TEMPLATE_STATUS_PENDING
-      }
-    else
-      Rails.logger.error "Twilio template creation failed: #{response.code} - #{response.body}"
-      {
-        success: false,
-        error: 'Template creation failed',
-        response_body: response.body
-      }
-    end
-  end
-
-  def process_approval_response(approval_response, creation_response, template_config)
-    if approval_response.success?
-      build_successful_approval_response(approval_response, creation_response, template_config)
-    else
-      build_failed_approval_response(approval_response, creation_response, template_config)
-    end
-  end
-
-  def build_successful_approval_response(approval_response, creation_response, template_config)
-    approval_data = approval_response.parsed_response
-    {
-      success: true,
-      content_sid: creation_response['sid'],
-      friendly_name: template_config[:template_name],
-      language: template_config[:language] || DEFAULT_LANGUAGE,
-      status: TEMPLATE_STATUS_PENDING,
-      approval_sid: approval_data['sid'],
-      whatsapp_status: approval_data.dig('whatsapp', 'status') || TEMPLATE_STATUS_PENDING
-    }
-  end
-
-  def build_failed_approval_response(approval_response, creation_response, template_config)
-    Rails.logger.error "Twilio template approval submission failed: #{approval_response.code} - #{approval_response.body}"
-    {
-      success: true,
-      content_sid: creation_response['sid'],
-      friendly_name: template_config[:template_name],
-      language: template_config[:language] || DEFAULT_LANGUAGE,
-      status: 'created'
-    }
-  end
-end

app/services/twilio/send_on_twilio_service.rb

@@ -1,24 +1,4 @@
 class Twilio::SendOnTwilioService < Base::SendOnChannelService
-  def send_csat_template_message(phone_number:, content_sid:, content_variables: {})
-    send_params = {
-      to: phone_number,
-      content_sid: content_sid
-    }
-
-    send_params[:content_variables] = content_variables.to_json if content_variables.present?
-    send_params[:status_callback] = channel.send(:twilio_delivery_status_index_url) if channel.respond_to?(:twilio_delivery_status_index_url, true)
-
-    # Add messaging service or from number
-    send_params = send_params.merge(channel.send(:send_message_from))
-
-    twilio_message = channel.send(:client).messages.create(**send_params)
-
-    { success: true, message_id: twilio_message.sid }
-  rescue Twilio::REST::TwilioError, Twilio::REST::RestError => e
-    Rails.logger.error "Failed to send Twilio template message: #{e.message}"
-    { success: false, error: e.message }
-  end
-
   private
 
   def channel_class