Merge branch 'develop' into fix/error_reporting

Previously, errors were only being logged with logger.info and rendered
as JSON responses, but weren't being properly reported to APM services.
This meant that critical errors like 500s were only visible in application
logs but not in our monitoring systems, making it harder to track and debug
issues in production.

This commit ensures that all errors are properly reported to configured
APM services by:
1. Adding explicit APM error reporting alongside logging
2. Using proper APM reporting methods for each service
3. Maintaining consistent error handling across all APM integrations

These changes ensure that errors are properly captured in our monitoring
systems,improving our ability to track and debug production issues.

.circleci/config.yml

@@ -3,7 +3,6 @@ orbs:
   node: circleci/node@6.1.0
   qlty-orb: qltysh/qlty-orb@0.0
 
-# Shared defaults for setup steps
 defaults: &defaults
   working_directory: ~/build
   machine:
@@ -13,106 +12,10 @@ defaults: &defaults
     RAILS_LOG_TO_STDOUT: false
     COVERAGE: true
     LOG_LEVEL: warn
+  parallelism: 4
 
 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: '23.7'
-      - 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:
+  build:
     <<: *defaults
     steps:
       - checkout
@@ -122,38 +25,8 @@ jobs:
       - 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
-    parallelism: 16
-    steps:
-      - checkout
-      - node/install:
-          node-version: '23.7'
-      - node/install-pnpm
-      - node/install-packages:
-          pkg-manager: pnpm
-          override-ci-command: pnpm i
-
+      - run: node --version
+      - run: pnpm --version
       - run:
           name: Add PostgreSQL repository and update
           command: |
@@ -218,6 +91,20 @@ jobs:
             source ~/.rvm/scripts/rvm
             bundle install
 
+      # 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
+
       # Configure environment and database
       - run:
           name: Database Setup and Configure Environment Variables
@@ -240,91 +127,57 @@ jobs:
           name: Run DB migrations
           command: bundle exec rails db:chatwoot_prepare
 
-      # Run backend tests (parallelized)
+      # 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
+
+      # ESLint linting
+      - run:
+          name: eslint
+          command: pnpm run eslint
+
+      - run:
+          name: Run frontend tests (with coverage)
+          command: |
+            mkdir -p ~/build/coverage/frontend
+            pnpm run test:coverage
+
+      # Run backend tests
       - run:
           name: Run backend tests
           command: |
             mkdir -p ~/tmp/test-results/rspec
             mkdir -p ~/tmp/test-artifacts
             mkdir -p ~/build/coverage/backend
-
-            # Use round-robin distribution (same as GitHub Actions) for better test isolation
-            # This prevents tests with similar timing from being grouped on the same runner
-            SPEC_FILES=($(find spec -name '*_spec.rb' | sort))
-            TESTS=""
-
-            for i in "${!SPEC_FILES[@]}"; do
-              if [ $(( i % $CIRCLE_NODE_TOTAL )) -eq $CIRCLE_NODE_INDEX ]; then
-                TESTS="$TESTS ${SPEC_FILES[$i]}"
-              fi
-            done
-
+            TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
             bundle exec rspec -I ./spec --require coverage_helper --require spec_helper --format progress \
                               --format RspecJunitFormatter \
                               --out ~/tmp/test-results/rspec.xml \
-                              -- $TESTS
+                              -- ${TESTFILES}
           no_output_timeout: 30m
 
-      # Store test results for better splitting in future runs
-      - store_test_results:
-          path: ~/tmp/test-results
+      # Qlty coverage publish
+      - qlty-orb/coverage_publish:
+          files: |
+            coverage/coverage.json
+            coverage/lcov.info
 
       - run:
-          name: Move coverage files if they exist
+          name: List coverage directory contents
           command: |
-            if [ -d "coverage" ]; then
-              mkdir -p ~/build/coverage
-              cp -r coverage ~/build/coverage/backend || true
-            fi
-          when: always
+            ls -R ~/build/coverage
 
       - persist_to_workspace:
           root: ~/build
           paths:
             - coverage
 
-  # Collect coverage from all jobs
-  coverage:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: ~/build
-
-      # Qlty coverage publish
-      - qlty-orb/coverage_publish:
-          files: |
-            coverage/frontend/lcov.info
-
-      - run:
-          name: List coverage directory contents
-          command: |
-            ls -R ~/build/coverage || echo "No coverage directory"
-
       - store_artifacts:
           path: coverage
           destination: coverage
-
-  build:
-      <<: *defaults
-      steps:
-        - run:
-            name: Legacy build aggregator
-            command: |
-              echo "All main jobs passed; build job kept only for GitHub required check compatibility."
-
-workflows:
-  version: 2
-  build:
-    jobs:
-      - lint
-      - frontend-tests
-      - backend-tests
-      - coverage:
-          requires:
-            - frontend-tests
-            - backend-tests
-      - build:
-          requires:
-            - lint
-            - coverage

.env.example

@@ -105,7 +105,6 @@ MAILER_INBOUND_EMAIL_DOMAIN=
 # mandrill for Mandrill
 # postmark for Postmark
 # sendgrid for Sendgrid
-# ses for Amazon SES
 RAILS_INBOUND_EMAIL_SERVICE=
 # Use one of the following based on the email ingress service
 # Ref: https://edgeguides.rubyonrails.org/action_mailbox_basics.html
@@ -115,10 +114,6 @@ RAILS_INBOUND_EMAIL_PASSWORD=
 MAILGUN_INGRESS_SIGNING_KEY=
 MANDRILL_INGRESS_API_KEY=
 
-# SNS topic ARN for ActionMailbox (format: arn:aws:sns:region:account-id:topic-name)
-# Configure only if the rails_inbound_email_service = ses
-ACTION_MAILBOX_SES_SNS_TOPIC=
-
 # Creating Your Inbound Webhook Instructions for Postmark and Sendgrid:
 # Inbound webhook URL format:
 #    https://actionmailbox:[YOUR_RAILS_INBOUND_EMAIL_PASSWORD]@[YOUR_CHATWOOT_DOMAIN.COM]/rails/action_mailbox/[RAILS_INBOUND_EMAIL_SERVICE]/inbound_emails
@@ -220,7 +215,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 ## https://github.com/DataDog/dd-trace-rb/blob/master/docs/GettingStarted.md#environment-variables
 # DD_TRACE_AGENT_URL=
 
-
 # MaxMindDB API key to download GeoLite2 City database
 # IP_LOOKUP_API_KEY=
 
@@ -262,8 +256,6 @@ AZURE_APP_SECRET=
 ## Change these values to fine tune performance
 # control the concurrency setting of sidekiq
 # SIDEKIQ_CONCURRENCY=10
-# Enable verbose logging each time a job is dequeued in Sidekiq
-# ENABLE_SIDEKIQ_DEQUEUE_LOGGER=false
 
 
 # AI powered features

.github/workflows/run_foss_spec.yml

@@ -1,6 +1,4 @@
 name: Run Chatwoot CE spec
-permissions:
-  contents: read
 on:
   push:
     branches:
@@ -10,58 +8,11 @@ on:
   workflow_dispatch:
 
 jobs:
-  # Separate linting jobs for faster feedback
-  lint-backend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: ruby/setup-ruby@v1
-        with:
-          bundler-cache: true
-      - name: Run Rubocop
-        run: bundle exec rubocop --parallel
-
-  lint-frontend:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 23
-          cache: 'pnpm'
-      - name: Install pnpm dependencies
-        run: pnpm i
-      - name: Run ESLint
-        run: pnpm run eslint
-
-  # Frontend tests run in parallel with backend
-  frontend-tests:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 23
-          cache: 'pnpm'
-      - name: Install pnpm dependencies
-        run: pnpm i
-      - name: Run frontend tests
-        run: pnpm run test:coverage
-
-  # Backend tests with parallelization
-  backend-tests:
-    runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        ci_node_total: [16]
-        ci_node_index: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
-
+  test:
+    runs-on: ubuntu-22.04
     services:
       postgres:
-        image: pgvector/pgvector:pg16
+        image: pgvector/pgvector:pg15
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: ''
@@ -69,6 +20,8 @@ jobs:
           POSTGRES_HOST_AUTH_METHOD: trust
         ports:
           - 5432:5432
+        # needed because the postgres container does not provide a healthcheck
+        # tmpfs makes DB faster by using RAM
         options: >-
           --mount type=tmpfs,destination=/var/lib/postgresql/data
           --health-cmd pg_isready
@@ -76,7 +29,7 @@ jobs:
           --health-timeout 5s
           --health-retries 5
       redis:
-        image: redis:alpine
+        image: redis
         ports:
           - 6379:6379
         options: --entrypoint redis-server
@@ -90,7 +43,7 @@ jobs:
 
       - uses: ruby/setup-ruby@v1
         with:
-          bundler-cache: true
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
       - uses: actions/setup-node@v4
         with:
@@ -111,36 +64,19 @@ jobs:
       - name: Seed database
         run: bundle exec rake db:schema:load
 
-      - name: Run backend tests (parallelized)
+      - name: Run frontend tests
+        run: pnpm run test:coverage
+
+      # Run rails tests
+      - name: Run backend tests
         run: |
-          # Get all spec files and split them using round-robin distribution
-          # This ensures slow tests are distributed evenly across all nodes
-          SPEC_FILES=($(find spec -name '*_spec.rb' | sort))
-          TESTS=""
-
-          for i in "${!SPEC_FILES[@]}"; do
-            # Assign spec to this node if: index % total == node_index
-            if [ $(( i % ${{ matrix.ci_node_total }} )) -eq ${{ matrix.ci_node_index }} ]; then
-              TESTS="$TESTS ${SPEC_FILES[$i]}"
-            fi
-          done
-
-          if [ -n "$TESTS" ]; then
-            bundle exec rspec --profile=10 --format progress --format json --out tmp/rspec_results.json $TESTS
-          fi
+          bundle exec rspec --profile=10 --format documentation
         env:
           NODE_OPTIONS: --openssl-legacy-provider
 
-      - name: Upload test results
+      - name: Upload rails log folder
         uses: actions/upload-artifact@v4
         if: always()
         with:
-          name: rspec-results-${{ matrix.ci_node_index }}
-          path: tmp/rspec_results.json
-
-      - name: Upload rails log folder
-        uses: actions/upload-artifact@v4
-        if: failure()
-        with:
-          name: rails-log-folder-${{ matrix.ci_node_index }}
+          name: rails-log-folder
           path: log

.github/workflows/run_mfa_spec.yml

@@ -70,7 +70,6 @@ jobs:
             spec/services/mfa/authentication_service_spec.rb \
             spec/requests/api/v1/profile/mfa_controller_spec.rb \
             spec/controllers/devise_overrides/sessions_controller_spec.rb \
-            spec/models/application_record_external_credentials_encryption_spec.rb \
             --profile=10 \
             --format documentation
         env:

.github/workflows/test_docker_build.yml

@@ -36,5 +36,5 @@ jobs:
           platforms: ${{ matrix.platform }}
           push: false
           load: false
-          cache-from: type=gha,scope=${{ matrix.platform }}
-          cache-to: type=gha,mode=max,scope=${{ matrix.platform }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.gitignore

@@ -99,5 +99,3 @@ CLAUDE.local.md
 # Histoire deployment
 .netlify
 .histoire
-.pnpm-store/*
-local/

.nvmrc

@@ -1 +1 @@
-23.7.0
+20.5.1

.qlty/qlty.toml

@@ -39,7 +39,7 @@ exclude_patterns = [
   "**/target/**",
   "**/templates/**",
   "**/testdata/**",
-  "**/vendor/**", "spec/", "**/specs/**/**", "**/spec/**/**", "db/*", "bin/**/*", "db/**/*", "config/**/*", "public/**/*", "vendor/**/*", "node_modules/**/*", "lib/tasks/auto_annotate_models.rake", "app/test-matchers.js", "docs/*", "**/*.md", "**/*.yml", "app/javascript/dashboard/i18n/locale", "**/*.stories.js", "stories/", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js", "app/javascript/shared/constants/countries.js", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js", "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js", "app/javascript/dashboard/routes/dashboard/settings/automation/constants.js", "app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js", "app/javascript/dashboard/routes/dashboard/settings/reports/constants.js", "app/javascript/dashboard/store/storeFactory.js", "app/javascript/dashboard/i18n/index.js", "app/javascript/widget/i18n/index.js", "app/javascript/survey/i18n/index.js", "app/javascript/shared/constants/locales.js", "app/javascript/dashboard/helper/specs/macrosFixtures.js", "app/javascript/dashboard/routes/dashboard/settings/macros/constants.js", "**/fixtures/**", "**/*/fixtures.js",
+  "**/vendor/**", "spec/", "**/specs/**/**", "**/spec/**/**", "db/*", "bin/**/*", "db/**/*", "config/**/*", "public/**/*", "vendor/**/*", "node_modules/**/*", "lib/tasks/auto_annotate_models.rake", "app/test-matchers.js", "docs/*", "**/*.md", "**/*.yml", "app/javascript/dashboard/i18n/locale", "**/*.stories.js", "stories/", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js", "app/javascript/shared/constants/countries.js", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js", "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js", "app/javascript/dashboard/routes/dashboard/settings/automation/constants.js", "app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js", "app/javascript/dashboard/routes/dashboard/settings/reports/constants.js", "app/javascript/dashboard/store/captain/storeFactory.js", "app/javascript/dashboard/i18n/index.js", "app/javascript/widget/i18n/index.js", "app/javascript/survey/i18n/index.js", "app/javascript/shared/constants/locales.js", "app/javascript/dashboard/helper/specs/macrosFixtures.js", "app/javascript/dashboard/routes/dashboard/settings/macros/constants.js", "**/fixtures/**", "**/*/fixtures.js",
 ]
 
 test_patterns = [

.rubocop.yml

@@ -7,8 +7,6 @@ plugins:
 require:
   - ./rubocop/use_from_email.rb
   - ./rubocop/custom_cop_location.rb
-  - ./rubocop/attachment_download.rb
-  - ./rubocop/one_class_per_file.rb
 
 Layout/LineLength:
   Max: 150
@@ -25,7 +23,7 @@ Metrics/MethodLength:
     - 'enterprise/lib/captain/agent.rb'
 
 RSpec/ExampleLength:
-  Max: 50
+  Max: 25
 
 Style/Documentation:
   Enabled: false
@@ -42,12 +40,6 @@ Style/SymbolArray:
 Style/OpenStructUse:
   Enabled: false
 
-Chatwoot/AttachmentDownload:
-  Enabled: true
-  Exclude:
-    - 'spec/**/*'
-    - 'test/**/*'
-
 Style/OptionalBooleanParameter:
   Exclude:
     - 'app/services/email_templates/db_resolver_service.rb'
@@ -95,7 +87,7 @@ Metrics/ModuleLength:
 Rails/HelperInstanceVariable:
   Exclude:
     - enterprise/app/helpers/captain/chat_helper.rb
-    - enterprise/app/helpers/captain/chat_response_helper.rb
+
 Rails/ApplicationController:
   Exclude:
     - 'app/controllers/api/v1/widget/messages_controller.rb'
@@ -213,9 +205,6 @@ UseFromEmail:
 CustomCopLocation:
   Enabled: true
 
-Style/OneClassPerFile:
-  Enabled: true
-
 AllCops:
   NewCops: enable
   Exclude:
@@ -347,4 +336,4 @@ FactoryBot/RedundantFactoryOption:
   Enabled: false
 
 FactoryBot/FactoryAssociationWithStrategy:
-  Enabled: false
+  Enabled: false

AGENTS.md

@@ -10,9 +10,6 @@
 - **Test Ruby**: `bundle exec rspec spec/path/to/file_spec.rb`
 - **Single Test**: `bundle exec rspec spec/path/to/file_spec.rb:LINE_NUMBER`
 - **Run Project**: `overmind start -f Procfile.dev`
-- **Ruby Version**: Manage Ruby via `rbenv` and install the version listed in `.ruby-version` (e.g., `rbenv install $(cat .ruby-version)`)
-- **rbenv setup**: Before running any `bundle` or `rspec` commands, init rbenv in your shell (`eval "$(rbenv init -)"`) so the correct Ruby/Bundler versions are used
-- Always prefer `bundle exec` for Ruby CLI tasks (rspec, rake, rubocop, etc.)
 
 ## Code Style
 
@@ -40,8 +37,6 @@
 
 - MVP focus: Least code change, happy-path only
 - No unnecessary defensive programming
-- Ship the happy path first: limit guards/fallbacks to what production has proven necessary, then iterate
-- Prefer minimal, readable code over elaborate abstractions; clarity beats cleverness
 - Break down complex tasks into small, testable units
 - Iterate after confirmation
 - Avoid writing specs unless explicitly asked

Gemfile

@@ -21,7 +21,6 @@ gem 'telephone_number'
 gem 'time_diff'
 gem 'tzinfo-data'
 gem 'valid_email2'
-gem 'email-provider-info'
 # compress javascript config.assets.js_compressor
 gem 'uglifier'
 ##-- used for single column multiple binary flags in notification settings/feature flagging --##
@@ -55,9 +54,6 @@ gem 'azure-storage-blob', git: 'https://github.com/chatwoot/azure-storage-ruby',
 gem 'google-cloud-storage', '>= 1.48.0', require: false
 gem 'image_processing'
 
-##-- for actionmailbox --##
-gem 'aws-actionmailbox-ses', '~> 0'
-
 ##-- gems for database --#
 gem 'groupdate'
 gem 'pg'
@@ -162,7 +158,7 @@ gem 'working_hours'
 gem 'pg_search'
 
 # Subscriptions, Billing
-gem 'stripe', '~> 18.0'
+gem 'stripe'
 
 ## - helper gems --##
 ## to populate db with sample data
@@ -191,16 +187,11 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.7.0'
+gem 'ai-agents', '>= 0.4.3'
 
 # TODO: Move this gem as a dependency of ai-agents
-gem 'ruby_llm', '>= 1.8.2'
 gem 'ruby_llm-schema'
 
-# OpenTelemetry for LLM observability
-gem 'opentelemetry-sdk'
-gem 'opentelemetry-exporter-otlp'
-
 gem 'shopify_api'
 
 ### Gems required only in specific deployment environments ###
@@ -215,7 +206,7 @@ group :production do
 end
 
 group :development do
-  gem 'annotaterb'
+  gem 'annotate'
   gem 'bullet'
   gem 'letter_opener'
   gem 'scss_lint', require: false

Gemfile.lock

@@ -126,23 +126,19 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.7.0)
-      ruby_llm (~> 1.8.2)
-    annotaterb (4.20.0)
-      activerecord (>= 6.0.0)
-      activesupport (>= 6.0.0)
+    ai-agents (0.4.3)
+      ruby_llm (~> 1.3)
+    annotate (3.2.0)
+      activerecord (>= 3.2, < 8.0)
+      rake (>= 10.4, < 14.0)
     ast (2.4.3)
     attr_extras (7.1.0)
     audited (5.4.1)
       activerecord (>= 5.0, < 7.7)
       activesupport (>= 5.0, < 7.7)
-    aws-actionmailbox-ses (0.1.0)
-      actionmailbox (>= 7.1.0)
-      aws-sdk-s3 (~> 1, >= 1.123.0)
-      aws-sdk-sns (~> 1, >= 1.61.0)
     aws-eventstream (1.2.0)
     aws-partitions (1.760.0)
-    aws-sdk-core (3.188.0)
+    aws-sdk-core (3.171.1)
       aws-eventstream (~> 1, >= 1.0.2)
       aws-partitions (~> 1, >= 1.651.0)
       aws-sigv4 (~> 1.5)
@@ -150,13 +146,10 @@ GEM
     aws-sdk-kms (1.64.0)
       aws-sdk-core (~> 3, >= 3.165.0)
       aws-sigv4 (~> 1.1)
-    aws-sdk-s3 (1.126.0)
-      aws-sdk-core (~> 3, >= 3.174.0)
+    aws-sdk-s3 (1.122.0)
+      aws-sdk-core (~> 3, >= 3.165.0)
       aws-sdk-kms (~> 1)
       aws-sigv4 (~> 1.4)
-    aws-sdk-sns (1.70.0)
-      aws-sdk-core (~> 3, >= 3.188.0)
-      aws-sigv4 (~> 1.1)
     aws-sigv4 (1.5.2)
       aws-eventstream (~> 1, >= 1.0.2)
     barnes (0.0.9)
@@ -277,7 +270,6 @@ GEM
       concurrent-ruby (~> 1.0)
       http (>= 3.0)
       ruby2_keywords
-    email-provider-info (0.0.1)
     email_reply_trimmer (0.1.13)
     erubi (1.13.0)
     et-orbi (1.2.11)
@@ -602,7 +594,7 @@ GEM
     oj (3.16.10)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
-    omniauth (2.1.4)
+    omniauth (2.1.3)
       hashie (>= 3.4.6)
       logger
       rack (>= 2.2.3)
@@ -625,25 +617,6 @@ GEM
       faraday (>= 1.0, < 3)
       multi_json (>= 1.0)
     openssl (3.2.0)
-    opentelemetry-api (1.7.0)
-    opentelemetry-common (0.23.0)
-      opentelemetry-api (~> 1.0)
-    opentelemetry-exporter-otlp (0.31.1)
-      google-protobuf (>= 3.18)
-      googleapis-common-protos-types (~> 1.3)
-      opentelemetry-api (~> 1.1)
-      opentelemetry-common (~> 0.20)
-      opentelemetry-sdk (~> 1.10)
-      opentelemetry-semantic_conventions
-    opentelemetry-registry (0.4.0)
-      opentelemetry-api (~> 1.1)
-    opentelemetry-sdk (1.10.0)
-      opentelemetry-api (~> 1.1)
-      opentelemetry-common (~> 0.20)
-      opentelemetry-registry (~> 0.2)
-      opentelemetry-semantic_conventions
-    opentelemetry-semantic_conventions (1.36.0)
-      opentelemetry-api (~> 1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
     ostruct (0.6.1)
@@ -671,7 +644,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.3)
+    rack (3.2.0)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -680,7 +653,7 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (4.2.1)
+    rack-protection (4.1.1)
       base64 (>= 0.1.0)
       logger (>= 1.6.0)
       rack (>= 3.0.0, < 4)
@@ -819,7 +792,7 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
-    ruby_llm (1.8.2)
+    ruby_llm (1.5.1)
       base64
       event_stream_parser (~> 1)
       faraday (>= 1.10.0)
@@ -827,9 +800,8 @@ GEM
       faraday-net_http (>= 1)
       faraday-retry (>= 1)
       marcel (~> 1.0)
-      ruby_llm-schema (~> 0.2.1)
       zeitwerk (~> 2)
-    ruby_llm-schema (0.2.5)
+    ruby_llm-schema (0.1.0)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
     sass (3.7.4)
@@ -929,7 +901,7 @@ GEM
     squasher (0.7.2)
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
-    stripe (18.0.1)
+    stripe (8.5.0)
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.4.0)
@@ -963,7 +935,7 @@ GEM
       unicode-emoji (~> 4.0, >= 4.0.4)
     unicode-emoji (4.0.4)
     uniform_notifier (1.17.0)
-    uri (1.0.4)
+    uri (1.0.3)
     uri_template (0.7.0)
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
@@ -1018,11 +990,10 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.7.0)
-  annotaterb
+  ai-agents (>= 0.4.3)
+  annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)
-  aws-actionmailbox-ses (~> 0)
   aws-sdk-s3
   azure-storage-blob!
   barnes
@@ -1045,7 +1016,6 @@ DEPENDENCIES
   dotenv-rails (>= 3.0.0)
   down
   elastic-apm
-  email-provider-info
   email_reply_trimmer
   facebook-messenger
   factory_bot_rails (>= 6.4.3)
@@ -1093,8 +1063,6 @@ DEPENDENCIES
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
   omniauth-saml
   opensearch-ruby
-  opentelemetry-exporter-otlp
-  opentelemetry-sdk
   pg
   pg_search
   pgvector
@@ -1120,7 +1088,6 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-openai
-  ruby_llm (>= 1.8.2)
   ruby_llm-schema
   scout_apm
   scss_lint
@@ -1141,7 +1108,7 @@ DEPENDENCIES
   spring-watcher-listen
   squasher
   stackprof
-  stripe (~> 18.0)
+  stripe
   telephone_number
   test-prof
   tidewave

VERSION_CW

@@ -1 +1 @@
-4.8.0
+4.4.0

app.json

@@ -36,10 +36,6 @@
     "REDIS_OPENSSL_VERIFY_MODE":{
       "description": "OpenSSL verification mode for Redis connections. ref https://help.heroku.com/HC0F8CUS/redis-connection-issues",
       "value": "none"
-    },
-    "NODE_OPTIONS": {
-      "description": "Increase V8 heap for Vite build to avoid OOM",
-      "value": "--max-old-space-size=4096"
     }
   },
   "formation": {

app/builders/contact_inbox_builder.rb

@@ -103,5 +103,3 @@ class ContactInboxBuilder
     @inbox.email? || @inbox.sms? || @inbox.twilio? || @inbox.whatsapp?
   end
 end
-
-ContactInboxBuilder.prepend_mod_with('ContactInboxBuilder')

app/builders/messages/message_builder.rb

@@ -1,8 +1,5 @@
 class Messages::MessageBuilder
   include ::FileTypeHelper
-  include ::EmailHelper
-  include ::DataHelper
-
   attr_reader :message
 
   def initialize(user, conversation, params)
@@ -10,7 +7,6 @@ class Messages::MessageBuilder
     @private = params[:private] || false
     @conversation = conversation
     @user = user
-    @account = conversation.account
     @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
     @automation_rule = content_attributes&.dig(:automation_rule_id)
@@ -24,9 +20,6 @@ class Messages::MessageBuilder
     @message = @conversation.messages.build(message_params)
     process_attachments
     process_emails
-    # When the message has no quoted content, it will just be rendered as a regular message
-    # The frontend is equipped to handle this case
-    process_email_content
     @message.save!
     @message
   end
@@ -41,12 +34,30 @@ class Messages::MessageBuilder
     params = convert_to_hash(@params)
     content_attributes = params.fetch(:content_attributes, {})
 
-    return safe_parse_json(content_attributes) if content_attributes.is_a?(String)
+    return parse_json(content_attributes) if content_attributes.is_a?(String)
     return content_attributes if content_attributes.is_a?(Hash)
 
     {}
   end
 
+  # Converts the given object to a hash.
+  # If it's an instance of ActionController::Parameters, converts it to an unsafe hash.
+  # Otherwise, returns the object as-is.
+  def convert_to_hash(obj)
+    return obj.to_unsafe_h if obj.instance_of?(ActionController::Parameters)
+
+    obj
+  end
+
+  # Attempts to parse a string as JSON.
+  # If successful, returns the parsed hash with symbolized names.
+  # If unsuccessful, returns nil.
+  def parse_json(content)
+    JSON.parse(content, symbolize_names: true)
+  rescue JSON::ParserError
+    {}
+  end
+
   def process_attachments
     return if @attachments.blank?
 
@@ -81,20 +92,18 @@ class Messages::MessageBuilder
     @message.content_attributes[:to_emails] = to_emails
   end
 
-  def process_email_content
-    return unless should_process_email_content?
-
-    @message.content_attributes ||= {}
-    email_attributes = build_email_attributes
-    @message.content_attributes[:email] = email_attributes
-  end
-
   def process_email_string(email_string)
     return [] if email_string.blank?
 
     email_string.gsub(/\s+/, '').split(',')
   end
 
+  def validate_email_addresses(all_emails)
+    all_emails&.each do |email|
+      raise StandardError, 'Invalid email address' unless email.match?(URI::MailTo::EMAIL_REGEXP)
+    end
+  end
+
   def message_type
     if @conversation.inbox.channel_type != 'Channel::Api' && @message_type == 'incoming'
       raise StandardError, 'Incoming messages are only allowed in Api inboxes'
@@ -138,90 +147,10 @@ class Messages::MessageBuilder
       private: @private,
       sender: sender,
       content_type: @params[:content_type],
-      content_attributes: content_attributes.presence,
       items: @items,
       in_reply_to: @in_reply_to,
       echo_id: @params[:echo_id],
       source_id: @params[:source_id]
     }.merge(external_created_at).merge(automation_rule_id).merge(campaign_id).merge(template_params)
   end
-
-  def email_inbox?
-    @conversation.inbox&.inbox_type == 'Email'
-  end
-
-  def should_process_email_content?
-    email_inbox? && !@private && @message.content.present?
-  end
-
-  def build_email_attributes
-    email_attributes = ensure_indifferent_access(@message.content_attributes[:email] || {})
-    normalized_content = normalize_email_body(@message.content)
-
-    # Process liquid templates in normalized content with code block protection
-    processed_content = process_liquid_in_email_body(normalized_content)
-
-    # Use custom HTML content if provided, otherwise generate from message content
-    email_attributes[:html_content] = if custom_email_content_provided?
-                                        build_custom_html_content
-                                      else
-                                        build_html_content(processed_content)
-                                      end
-
-    email_attributes[:text_content] = build_text_content(processed_content)
-    email_attributes
-  end
-
-  def build_html_content(normalized_content)
-    html_content = ensure_indifferent_access(@message.content_attributes.dig(:email, :html_content) || {})
-    rendered_html = render_email_html(normalized_content)
-    html_content[:full] = rendered_html
-    html_content[:reply] = rendered_html
-    html_content
-  end
-
-  def build_text_content(normalized_content)
-    text_content = ensure_indifferent_access(@message.content_attributes.dig(:email, :text_content) || {})
-    text_content[:full] = normalized_content
-    text_content[:reply] = normalized_content
-    text_content
-  end
-
-  def custom_email_content_provided?
-    @params[:email_html_content].present?
-  end
-
-  def build_custom_html_content
-    html_content = ensure_indifferent_access(@message.content_attributes.dig(:email, :html_content) || {})
-
-    html_content[:full] = @params[:email_html_content]
-    html_content[:reply] = @params[:email_html_content]
-
-    html_content
-  end
-
-  # Liquid processing methods for email content
-  def process_liquid_in_email_body(content)
-    return content if content.blank?
-    return content unless should_process_liquid?
-
-    # Protect code blocks from liquid processing
-    modified_content = modified_liquid_content(content)
-    template = Liquid::Template.parse(modified_content)
-    template.render(drops_with_sender)
-  rescue Liquid::Error
-    content
-  end
-
-  def should_process_liquid?
-    @message_type == 'outgoing' || @message_type == 'template'
-  end
-
-  def drops_with_sender
-    message_drops(@conversation).merge({
-                                         'agent' => UserDrop.new(sender)
-                                       })
-  end
 end
-
-Messages::MessageBuilder.prepend_mod_with('Messages::MessageBuilder')

app/builders/messages/messenger/message_builder.rb

@@ -9,8 +9,6 @@ class Messages::Messenger::MessageBuilder
     attachment_obj.save!
     attach_file(attachment_obj, attachment_params(attachment)[:remote_file_url]) if attachment_params(attachment)[:remote_file_url]
     fetch_story_link(attachment_obj) if attachment_obj.file_type == 'story_mention'
-    fetch_ig_story_link(attachment_obj) if attachment_obj.file_type == 'ig_story'
-    fetch_ig_post_link(attachment_obj) if attachment_obj.file_type == 'ig_post'
     update_attachment_file_type(attachment_obj)
   end
 
@@ -29,7 +27,7 @@ class Messages::Messenger::MessageBuilder
     file_type = attachment['type'].to_sym
     params = { file_type: file_type, account_id: @message.account_id }
 
-    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel, :ig_post, :ig_story].include? file_type
+    if [:image, :file, :audio, :video, :share, :story_mention, :ig_reel].include? file_type
       params.merge!(file_type_params(attachment))
     elsif file_type == :location
       params.merge!(location_params(attachment))
@@ -41,17 +39,9 @@ class Messages::Messenger::MessageBuilder
   end
 
   def file_type_params(attachment)
-    # Handle different URL field names for different attachment types
-    url = case attachment['type'].to_sym
-          when :ig_story
-            attachment['payload']['story_media_url']
-          else
-            attachment['payload']['url']
-          end
-
     {
-      external_url: url,
-      remote_file_url: url
+      external_url: attachment['payload']['url'],
+      remote_file_url: attachment['payload']['url']
     }
   end
 
@@ -78,21 +68,6 @@ class Messages::Messenger::MessageBuilder
     message.save!
   end
 
-  def fetch_ig_story_link(attachment)
-    message = attachment.message
-    # For ig_story, we don't have the same API call as story_mention, so we'll set it up similarly but with generic content
-    message.content_attributes[:image_type] = 'ig_story'
-    message.content = I18n.t('conversations.messages.instagram_shared_story_content')
-    message.save!
-  end
-
-  def fetch_ig_post_link(attachment)
-    message = attachment.message
-    message.content_attributes[:image_type] = 'ig_post'
-    message.content = I18n.t('conversations.messages.instagram_shared_post_content')
-    message.save!
-  end
-
   # This is a placeholder method to be overridden by child classes
   def get_story_object_from_source_id(_source_id)
     {}
@@ -101,6 +76,6 @@ class Messages::Messenger::MessageBuilder
   private
 
   def unsupported_file_type?(attachment_type)
-    [:template, :unsupported_type, :ephemeral].include? attachment_type.to_sym
+    [:template, :unsupported_type].include? attachment_type.to_sym
   end
 end

app/builders/v2/reports/base_summary_builder.rb

@@ -10,28 +10,10 @@ class V2::Reports::BaseSummaryBuilder
 
   def load_data
     @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
-
-  def load_reporting_events_data
-    # Extract the column name for indexing (e.g., 'conversations.team_id' -> 'team_id')
-    index_key = group_by_key.to_s.split('.').last
-
-    results = reporting_events
-              .select(
-                "#{group_by_key} as #{index_key}",
-                "COUNT(CASE WHEN name = 'conversation_resolved' THEN 1 END) as resolved_count",
-                "AVG(CASE WHEN name = 'conversation_resolved' THEN #{average_value_key} END) as avg_resolution_time",
-                "AVG(CASE WHEN name = 'first_response' THEN #{average_value_key} END) as avg_first_response_time",
-                "AVG(CASE WHEN name = 'reply_time' THEN #{average_value_key} END) as avg_reply_time"
-              )
-              .group(group_by_key)
-              .index_by { |record| record.public_send(index_key) }
-
-    @resolved_count = results.transform_values(&:resolved_count)
-    @avg_resolution_time = results.transform_values(&:avg_resolution_time)
-    @avg_first_response_time = results.transform_values(&:avg_first_response_time)
-    @avg_reply_time = results.transform_values(&:avg_reply_time)
+    @resolved_count = fetch_resolved_count
+    @avg_resolution_time = fetch_average_time('conversation_resolved')
+    @avg_first_response_time = fetch_average_time('first_response')
+    @avg_reply_time = fetch_average_time('reply_time')
   end
 
   def reporting_events
@@ -42,6 +24,14 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
+  def fetch_average_time(event_name)
+    get_grouped_average(reporting_events.where(name: event_name))
+  end
+
+  def fetch_resolved_count
+    reporting_events.where(name: 'conversation_resolved').group(group_by_key).count
+  end
+
   def group_by_key
     # Override this method
   end
@@ -50,6 +40,10 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
+  def get_grouped_average(events)
+    events.group(group_by_key).average(average_value_key)
+  end
+
   def average_value_key
     ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
   end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -13,7 +13,10 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
 
   def load_data
     @conversations_count = fetch_conversations_count
-    load_reporting_events_data
+    @resolved_count = fetch_resolved_count
+    @avg_resolution_time = fetch_average_time('conversation_resolved')
+    @avg_first_response_time = fetch_average_time('first_response')
+    @avg_reply_time = fetch_average_time('reply_time')
   end
 
   def fetch_conversations_count

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

@@ -4,7 +4,7 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
   before_action :agent_bot, except: [:index, :create]
 
   def index
-    @agent_bots = AgentBot.accessible_to(Current.account)
+    @agent_bots = AgentBot.where(account_id: [nil, Current.account.id])
   end
 
   def show; end
@@ -37,7 +37,7 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
   private
 
   def agent_bot
-    @agent_bot = AgentBot.accessible_to(Current.account).find(params[:id]) if params[:action] == 'show'
+    @agent_bot = AgentBot.where(account_id: [nil, Current.account.id]).find(params[:id]) if params[:action] == 'show'
     @agent_bot ||= Current.account.agent_bots.find(params[:id])
   end
 

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

@@ -22,10 +22,9 @@ class Api::V1::Accounts::ArticlesController < Api::V1::Accounts::BaseController
   def edit; end
 
   def create
-    params_with_defaults = article_params
-    params_with_defaults[:status] ||= :draft
-    @article = @portal.articles.create!(params_with_defaults)
+    @article = @portal.articles.create!(article_params)
     @article.associate_root_article(article_params[:associated_article_id])
+    @article.draft!
     render json: { error: @article.errors.messages }, status: :unprocessable_entity and return unless @article.valid?
   end
 

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

@@ -1,12 +1,13 @@
 class Api::V1::Accounts::BulkActionsController < Api::V1::Accounts::BaseController
+  before_action :type_matches?
+
   def create
-    case normalized_type
-    when 'Conversation'
-      enqueue_conversation_job
-      head :ok
-    when 'Contact'
-      check_authorization_for_contact_action
-      enqueue_contact_job
+    if type_matches?
+      ::BulkActionsJob.perform_later(
+        account: @current_account,
+        user: current_user,
+        params: permitted_params
+      )
       head :ok
     else
       render json: { success: false }, status: :unprocessable_entity
@@ -15,54 +16,11 @@ class Api::V1::Accounts::BulkActionsController < Api::V1::Accounts::BaseControll
 
   private
 
-  def normalized_type
-    params[:type].to_s.camelize
+  def type_matches?
+    ['Conversation'].include?(params[:type])
   end
 
-  def enqueue_conversation_job
-    ::BulkActionsJob.perform_later(
-      account: @current_account,
-      user: current_user,
-      params: conversation_params
-    )
-  end
-
-  def enqueue_contact_job
-    Contacts::BulkActionJob.perform_later(
-      @current_account.id,
-      current_user.id,
-      contact_params
-    )
-  end
-
-  def delete_contact_action?
-    params[:action_name] == 'delete'
-  end
-
-  def check_authorization_for_contact_action
-    authorize(Contact, :destroy?) if delete_contact_action?
-  end
-
-  def conversation_params
-    # TODO: Align conversation payloads with the `{ action_name, action_attributes }`
-    # and then remove this method in favor of a common params method.
-    base = params.permit(
-      :snoozed_until,
-      fields: [:status, :assignee_id, :team_id]
-    )
-    append_common_bulk_attributes(base)
-  end
-
-  def contact_params
-    # TODO: remove this method in favor of a common params method.
-    # once legacy conversation payloads are migrated.
-    append_common_bulk_attributes({})
-  end
-
-  def append_common_bulk_attributes(base_params)
-    # NOTE: Conversation payloads historically diverged per action. Going forward we
-    # want all objects to share a common contract: `{ action_name, action_attributes }`
-    common = params.permit(:type, :action_name, ids: [], labels: [add: [], remove: []])
-    base_params.merge(common)
+  def permitted_params
+    params.permit(:type, :snoozed_until, ids: [], fields: [:status, :assignee_id, :team_id], labels: [add: [], remove: []])
   end
 end

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

@@ -17,8 +17,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]
 
   def index
+    @contacts_count = resolved_contacts.count
     @contacts = fetch_contacts(resolved_contacts)
-    @contacts_count = @contacts.total_count
   end
 
   def search
@@ -29,8 +29,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
         OR contacts.additional_attributes->>\'company_name\' ILIKE :search',
       search: "%#{params[:q].strip}%"
     )
+    @contacts_count = contacts.count
     @contacts = fetch_contacts(contacts)
-    @contacts_count = @contacts.total_count
   end
 
   def import
@@ -55,8 +55,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   def active
     contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                   .get_available_contact_ids(Current.account.id))
+    @contacts_count = contacts.count
     @contacts = fetch_contacts(contacts)
-    @contacts_count = @contacts.total_count
   end
 
   def show; end
@@ -133,14 +133,13 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   end
 
   def fetch_contacts(contacts)
-    # Build includes hash to avoid separate query when contact_inboxes are needed
-    includes_hash = { avatar_attachment: [:blob] }
-    includes_hash[:contact_inboxes] = { inbox: :channel } if @include_contact_inboxes
+    contacts_with_avatar = filtrate(contacts)
+                           .includes([{ avatar_attachment: [:blob] }])
+                           .page(@current_page).per(RESULTS_PER_PAGE)
 
-    filtrate(contacts)
-      .includes(includes_hash)
-      .page(@current_page)
-      .per(RESULTS_PER_PAGE)
+    return contacts_with_avatar.includes([{ contact_inboxes: [:inbox] }]) if @include_contact_inboxes
+
+    contacts_with_avatar
   end
 
   def build_contact_inbox

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

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::Conversations::AssignmentsController < Api::V1::Accounts::Conversations::BaseController
   # assigns agent/team to a conversation
   def create
-    if params.key?(:assignee_id) || agent_bot_assignment?
+    if params.key?(:assignee_id)
       set_agent
     elsif params.key?(:team_id)
       set_team
@@ -13,23 +13,17 @@ class Api::V1::Accounts::Conversations::AssignmentsController < Api::V1::Account
   private
 
   def set_agent
-    resource = Conversations::AssignmentService.new(
-      conversation: @conversation,
-      assignee_id: params[:assignee_id],
-      assignee_type: params[:assignee_type]
-    ).perform
-
-    render_agent(resource)
+    @agent = Current.account.users.find_by(id: params[:assignee_id])
+    @conversation.assignee = @agent
+    @conversation.save!
+    render_agent
   end
 
-  def render_agent(resource)
-    case resource
-    when User
-      render partial: 'api/v1/models/agent', formats: [:json], locals: { resource: resource }
-    when AgentBot
-      render partial: 'api/v1/models/agent_bot_slim', formats: [:json], locals: { resource: resource }
-    else
+  def render_agent
+    if @agent.nil?
       render json: nil
+    else
+      render partial: 'api/v1/models/agent', formats: [:json], locals: { resource: @agent }
     end
   end
 
@@ -38,8 +32,4 @@ class Api::V1::Accounts::Conversations::AssignmentsController < Api::V1::Account
     @conversation.update!(team: @team)
     render json: @team
   end
-
-  def agent_bot_assignment?
-    params[:assignee_type].to_s == 'AgentBot'
-  end
 end

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

@@ -5,6 +5,6 @@ class Api::V1::Accounts::Conversations::BaseController < Api::V1::Accounts::Base
 
   def conversation
     @conversation ||= Current.account.conversations.find_by!(display_id: params[:conversation_id])
-    authorize @conversation, :show?
+    authorize @conversation.inbox, :show?
   end
 end

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

@@ -160,7 +160,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def conversation
     @conversation ||= Current.account.conversations.find_by!(display_id: params[:id])
-    authorize @conversation, :show?
+    authorize @conversation.inbox, :show?
   end
 
   def inbox

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

@@ -1,160 +0,0 @@
-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
-    template = @inbox.csat_config&.dig('template')
-    return render json: { template_exists: false } unless template
-
-    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?
-
-    # 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
-
-  def fetch_inbox
-    @inbox = Current.account.inboxes.find(params[:inbox_id])
-    authorize @inbox, :show?
-  end
-
-  def validate_whatsapp_channel
-    return if @inbox.whatsapp?
-
-    render json: { error: 'CSAT template operations only available for WhatsApp channels' },
-           status: :bad_request
-  end
-
-  def extract_template_params
-    params.require(:template).permit(:message, :button_text, :language)
-  end
-
-  def render_missing_message_error
-    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)
-    else
-      render_failed_template_creation(result)
-    end
-  end
-
-  def render_successful_template_creation(result)
-    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)
-    whatsapp_error = parse_whatsapp_error(result[:response_body])
-    error_message = whatsapp_error[:user_message] || result[:error]
-
-    render json: {
-      error: error_message,
-      details: whatsapp_error[:technical_details]
-    }, 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?
-
-    begin
-      error_data = JSON.parse(response_body)
-      whatsapp_error = error_data['error'] || {}
-
-      user_message = whatsapp_error['error_user_msg'] || whatsapp_error['message']
-      technical_details = {
-        code: whatsapp_error['code'],
-        subcode: whatsapp_error['error_subcode'],
-        type: whatsapp_error['type'],
-        title: whatsapp_error['error_user_title']
-      }.compact
-
-      { user_message: user_message, technical_details: technical_details }
-    rescue JSON::ParserError
-      { user_message: nil, technical_details: response_body }
-    end
-  end
-end

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

@@ -4,8 +4,7 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   before_action :fetch_agent_bot, only: [:set_agent_bot]
   before_action :validate_limit, only: [:create]
   # we are already handling the authorization in fetch inbox
-  before_action :check_authorization, except: [:show, :health]
-  before_action :validate_whatsapp_cloud_channel, only: [:health]
+  before_action :check_authorization, except: [:show]
 
   def index
     @inboxes = policy_scope(Current.account.inboxes.order_by_name.includes(:channel, { avatar_attachment: [:blob] }))
@@ -79,14 +78,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     render status: :internal_server_error, json: { error: e.message }
   end
 
-  def health
-    health_data = Whatsapp::HealthService.new(@inbox.channel).fetch_health_status
-    render json: health_data
-  rescue StandardError => e
-    Rails.logger.error "[INBOX HEALTH] Error fetching health data: #{e.message}"
-    render json: { error: e.message }, status: :unprocessable_entity
-  end
-
   private
 
   def fetch_inbox
@@ -98,12 +89,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     @agent_bot = AgentBot.find(params[:agent_bot]) if params[:agent_bot]
   end
 
-  def validate_whatsapp_cloud_channel
-    return if @inbox.channel.is_a?(Channel::Whatsapp) && @inbox.channel.provider == 'whatsapp_cloud'
-
-    render json: { error: 'Health data only available for WhatsApp Cloud API channels' }, status: :bad_request
-  end
-
   def create_channel
     return unless allowed_channel_types.include?(permitted_params[:channel][:type])
 
@@ -152,37 +137,31 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def format_csat_config(config)
-    formatted = {
-      'display_type' => config['display_type'] || 'emoji',
-      'message' => config['message'] || '',
-      :survey_rules => {
-        'operator' => config.dig('survey_rules', 'operator') || 'contains',
-        'values' => config.dig('survey_rules', 'values') || []
-      },
-      'button_text' => config['button_text'] || 'Please rate us',
-      'language' => config['language'] || 'en'
+    {
+      display_type: config['display_type'] || 'emoji',
+      message: config['message'] || '',
+      survey_rules: {
+        operator: config.dig('survey_rules', 'operator') || 'contains',
+        values: config.dig('survey_rules', 'values') || []
+      }
     }
-    format_template_config(config, formatted)
-    formatted
-  end
-
-  def format_template_config(config, formatted)
-    formatted['template'] = config['template'] if config['template'].present?
   end
 
   def inbox_attributes
     [:name, :avatar, :greeting_enabled, :greeting_message, :enable_email_collect, :csat_survey_enabled,
      :enable_auto_assignment, :working_hours_enabled, :out_of_office_message, :timezone, :allow_messages_after_resolved,
      :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, :created_at, :language] }] }]
+     { csat_config: [:display_type, :message, { survey_rules: [:operator, { values: [] }] }] }]
   end
 
   def permitted_params(channel_attributes = [])
     # We will remove this line after fixing https://linear.app/chatwoot/issue/CW-1567/null-value-passed-as-null-string-to-backend
     params.each { |k, v| params[k] = params[k] == 'null' ? nil : v }
-    params.permit(*inbox_attributes, channel: [:type, *channel_attributes])
+
+    params.permit(
+      *inbox_attributes,
+      channel: [:type, *channel_attributes]
+    )
   end
 
   def channel_type_from_params
@@ -198,7 +177,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def get_channel_attributes(channel_type)
-    channel_type.constantize.const_defined?(:EDITABLE_ATTRS) ? channel_type.constantize::EDITABLE_ATTRS.presence : []
+    if channel_type.constantize.const_defined?(:EDITABLE_ATTRS)
+      channel_type.constantize::EDITABLE_ATTRS.presence
+    else
+      []
+    end
   end
 
   def whatsapp_channel?

app/controllers/api/v1/accounts/integrations/dyte_controller.rb

@@ -22,7 +22,7 @@ class Api::V1::Accounts::Integrations::DyteController < Api::V1::Accounts::BaseC
   private
 
   def authorize_request
-    authorize @conversation, :show?
+    authorize @conversation.inbox, :show?
   end
 
   def render_response(response)

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

@@ -23,7 +23,7 @@ class Api::V1::Accounts::WebhooksController < Api::V1::Accounts::BaseController
   private
 
   def webhook_params
-    params.require(:webhook).permit(:inbox_id, :name, :url, subscriptions: [])
+    params.require(:webhook).permit(:inbox_id, :url, subscriptions: [])
   end
 
   def fetch_webhook

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

@@ -9,13 +9,7 @@ class Api::V1::Widget::ConfigsController < Api::V1::Widget::BaseController
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get(
-      'LOGO_THUMBNAIL',
-      'BRAND_NAME',
-      'WIDGET_BRAND_URL',
-      'MAXIMUM_FILE_UPLOAD_SIZE',
-      'INSTALLATION_NAME'
-    )
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
   end
 
   def set_contact

app/controllers/concerns/access_token_auth_helper.rb

@@ -14,7 +14,6 @@ module AccessTokenAuthHelper
     ensure_access_token
     render_unauthorized('Invalid Access Token') && return if @access_token.blank?
 
-    # NOTE: This ensures that current_user is set and available for the rest of the controller actions
     @resource = @access_token.owner
     Current.user = @resource if allowed_current_user_type?(@resource)
   end

app/controllers/concerns/ensure_current_account_helper.rb

@@ -25,9 +25,6 @@ module EnsureCurrentAccountHelper
   end
 
   def account_accessible_for_bot?(account)
-    return if @resource.account_id == account.id
-    return if @resource.agent_bot_inboxes.find_by(account_id: account.id)
-
-    render_unauthorized('Bot is not authorized to access this account')
+    render_unauthorized('Bot is not authorized to access this account') unless @resource.agent_bot_inboxes.find_by(account_id: account.id)
   end
 end

app/controllers/concerns/request_exception_handler.rb

@@ -23,24 +23,29 @@ module RequestExceptionHandler
     Current.reset
   end
 
+  def render_error(message, status, error = nil)
+    log_handled_error(error) if error
+    render json: { error: message }, status: status
+  end
+
   def render_unauthorized(message)
-    render json: { error: message }, status: :unauthorized
+    render_error(message, :unauthorized)
   end
 
   def render_not_found_error(message)
-    render json: { error: message }, status: :not_found
+    render_error(message, :not_found)
   end
 
   def render_could_not_create_error(message)
-    render json: { error: message }, status: :unprocessable_entity
+    render_error(message, :unprocessable_entity)
   end
 
   def render_payment_required(message)
-    render json: { error: message }, status: :payment_required
+    render_error(message, :payment_required)
   end
 
   def render_internal_server_error(message)
-    render json: { error: message }, status: :internal_server_error
+    render_error(message, :internal_server_error)
   end
 
   def render_record_invalid(exception)
@@ -57,6 +62,23 @@ module RequestExceptionHandler
   end
 
   def log_handled_error(exception)
+    return unless exception
+
     logger.info("Handled error: #{exception.inspect}")
+    report_to_apms(exception)
+  end
+
+  def report_to_apms(exception)
+    apm_reporters = {
+      'NewRelic::Agent' => -> { ::NewRelic::Agent.notice_error(exception) },
+      'Datadog::Tracing' => -> { ::Datadog::Tracing.active_trace&.set_error(exception) },
+      'ElasticAPM' => -> { ::ElasticAPM.report(exception) },
+      'ScoutApm::Error' => -> { ::ScoutApm::Error.capture(exception) },
+      'Sentry' => -> { ::Sentry.capture_exception(exception) }
+    }
+
+    apm_reporters.each do |module_name, reporter|
+      reporter.call if Object.const_defined?(module_name)
+    end
   end
 end

app/controllers/dashboard_controller.rb

@@ -1,31 +1,6 @@
 class DashboardController < ActionController::Base
   include SwitchLocale
 
-  GLOBAL_CONFIG_KEYS = %w[
-    LOGO
-    LOGO_DARK
-    LOGO_THUMBNAIL
-    INSTALLATION_NAME
-    WIDGET_BRAND_URL
-    TERMS_URL
-    BRAND_URL
-    BRAND_NAME
-    PRIVACY_URL
-    DISPLAY_MANIFEST
-    CREATE_NEW_ACCOUNT_FROM_DASHBOARD
-    CHATWOOT_INBOX_TOKEN
-    API_CHANNEL_NAME
-    API_CHANNEL_THUMBNAIL
-    ANALYTICS_TOKEN
-    DIRECT_UPLOADS_ENABLED
-    MAXIMUM_FILE_UPLOAD_SIZE
-    HCAPTCHA_SITE_KEY
-    LOGOUT_REDIRECT_LINK
-    DISABLE_USER_PROFILE_UPDATE
-    DEPLOYMENT_ENV
-    INSTALLATION_PRICING_PLAN
-  ].freeze
-
   before_action :set_application_pack
   before_action :set_global_config
   before_action :set_dashboard_scripts
@@ -44,7 +19,25 @@ class DashboardController < ActionController::Base
   end
 
   def set_global_config
-    @global_config = GlobalConfig.get(*GLOBAL_CONFIG_KEYS).merge(app_config)
+    @global_config = GlobalConfig.get(
+      'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
+      'INSTALLATION_NAME',
+      'WIDGET_BRAND_URL', 'TERMS_URL',
+      'BRAND_URL', 'BRAND_NAME',
+      'PRIVACY_URL',
+      'DISPLAY_MANIFEST',
+      'CREATE_NEW_ACCOUNT_FROM_DASHBOARD',
+      'CHATWOOT_INBOX_TOKEN',
+      'API_CHANNEL_NAME',
+      'API_CHANNEL_THUMBNAIL',
+      'ANALYTICS_TOKEN',
+      'DIRECT_UPLOADS_ENABLED',
+      'HCAPTCHA_SITE_KEY',
+      'LOGOUT_REDIRECT_LINK',
+      'DISABLE_USER_PROFILE_UPDATE',
+      'DEPLOYMENT_ENV',
+      'INSTALLATION_PRICING_PLAN'
+    ).merge(app_config)
   end
 
   def set_dashboard_scripts
@@ -78,18 +71,10 @@ class DashboardController < ActionController::Base
       WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
       IS_ENTERPRISE: ChatwootApp.enterprise?,
       AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
-      GIT_SHA: GIT_HASH,
-      ALLOWED_LOGIN_METHODS: allowed_login_methods
+      GIT_SHA: GIT_HASH
     }
   end
 
-  def allowed_login_methods
-    methods = ['email']
-    methods << 'google_oauth' if GlobalConfigService.load('ENABLE_GOOGLE_OAUTH_LOGIN', 'true').to_s != 'false'
-    methods << 'saml' if ChatwootHub.pricing_plan != 'community' && GlobalConfigService.load('ENABLE_SAML_SSO_LOGIN', 'true').to_s != 'false'
-    methods
-  end
-
   def set_application_pack
     @application_pack = if request.path.include?('/auth') || request.path.include?('/login')
                           'v3app'

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -19,19 +19,6 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
     redirect_to login_page_url(email: encoded_email, sso_auth_token: @resource.generate_sso_auth_token)
   end
 
-  def sign_in_user_on_mobile
-    @resource.skip_confirmation! if confirmable_enabled?
-
-    # once the resource is found and verified
-    # we can just send them to the login page again with the SSO params
-    # that will log them in
-    encoded_email = ERB::Util.url_encode(@resource.email)
-    params = { email: encoded_email, sso_auth_token: @resource.generate_sso_auth_token }.to_query
-
-    mobile_deep_link_base = GlobalConfigService.load('MOBILE_DEEP_LINK_BASE', 'chatwootapp')
-    redirect_to "#{mobile_deep_link_base}://auth/saml?#{params}", allow_other_host: true
-  end
-
   def sign_up_user
     return redirect_to login_page_url(error: 'no-account-found') unless account_signup_allowed?
     return redirect_to login_page_url(error: 'business-account-only') unless validate_signup_email_is_business_domain?

app/controllers/super_admin/app_configs_controller.rb

@@ -15,20 +15,14 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
   end
 
   def create
-    errors = []
     params['app_config'].each do |key, value|
       next unless @allowed_configs.include?(key)
 
       i = InstallationConfig.where(name: key).first_or_create(value: value, locked: false)
       i.value = value
-      errors.concat(i.errors.full_messages) unless i.save
-    end
-
-    if errors.any?
-      redirect_to super_admin_app_config_path(config: @config), alert: errors.join(', ')
-    else
-      redirect_to super_admin_settings_path, notice: "App Configs - #{@config.titleize} updated successfully"
+      i.save!
     end
+    redirect_to super_admin_settings_path, notice: "App Configs - #{@config.titleize} updated successfully"
   end
 
   private
@@ -48,13 +42,10 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
       'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
       'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI ENABLE_GOOGLE_OAUTH_LOGIN]
+      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI]
     }
 
-    @allowed_configs = mapping.fetch(
-      @config,
-      %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE]
-    )
+    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
   end
 end
 

app/controllers/widgets_controller.rb

@@ -14,14 +14,7 @@ class WidgetsController < ActionController::Base
   private
 
   def set_global_config
-    @global_config = GlobalConfig.get(
-      'LOGO_THUMBNAIL',
-      'BRAND_NAME',
-      'WIDGET_BRAND_URL',
-      'DIRECT_UPLOADS_ENABLED',
-      'MAXIMUM_FILE_UPLOAD_SIZE',
-      'INSTALLATION_NAME'
-    )
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED', 'INSTALLATION_NAME')
   end
 
   def set_web_widget

app/helpers/data_helper.rb

@@ -1,24 +0,0 @@
-# Provides utility methods for data transformation, hash manipulation, and JSON parsing.
-# This module contains helper methods for converting between different data types,
-# normalizing hashes, and safely handling JSON operations.
-module DataHelper
-  # Ensures a hash supports indifferent access (string or symbol keys).
-  # Returns an empty hash if the input is blank.
-  def ensure_indifferent_access(hash)
-    return {} if hash.blank?
-
-    hash.respond_to?(:with_indifferent_access) ? hash.with_indifferent_access : hash
-  end
-
-  def convert_to_hash(obj)
-    return obj.to_unsafe_h if obj.instance_of?(ActionController::Parameters)
-
-    obj
-  end
-
-  def safe_parse_json(content)
-    JSON.parse(content, symbolize_names: true)
-  rescue JSON::ParserError
-    {}
-  end
-end

app/helpers/email_helper.rb

@@ -4,19 +4,6 @@ module EmailHelper
     domain.split('.').first
   end
 
-  def render_email_html(content)
-    return '' if content.blank?
-
-    ChatwootMarkdownRenderer.new(content).render_message.to_s
-  end
-
-  # Raise a standard error if any email address is invalid
-  def validate_email_addresses(emails_to_test)
-    emails_to_test&.each do |email|
-      raise StandardError, 'Invalid email address' unless email.match?(URI::MailTo::EMAIL_REGEXP)
-    end
-  end
-
   # ref: https://www.rfc-editor.org/rfc/rfc5233.html
   # This is not a  mandatory requirement for email addresses, but it is a common practice.
   # john+test@xyc.com is the same as john@xyc.com
@@ -34,10 +21,6 @@ module EmailHelper
     end
   end
 
-  def normalize_email_body(content)
-    content.to_s.gsub("\r\n", "\n")
-  end
-
   def modified_liquid_content(email)
     # This regex is used to match the code blocks in the content
     # We don't want to process liquid in code blocks
@@ -46,10 +29,7 @@ module EmailHelper
 
   def message_drops(conversation)
     {
-      'contact' => ContactDrop.new(conversation.contact),
-      'conversation' => ConversationDrop.new(conversation),
-      'inbox' => InboxDrop.new(conversation.inbox),
-      'account' => AccountDrop.new(conversation.account)
+      'contact' => ContactDrop.new(conversation.contact)
     }
   end
 end

app/helpers/super_admin/features.yml

@@ -9,13 +9,6 @@ captain:
   icon: 'icon-captain'
   config_key: 'captain'
   enterprise: true
-saml:
-  name: 'SAML SSO'
-  description: 'Configuration for controlling SAML Single Sign-On availability'
-  enabled: <%= ChatwootApp.enterprise? %>
-  icon: 'icon-lock-line'
-  config_key: 'saml'
-  enterprise: true
 custom_branding:
   name: 'Custom Branding'
   description: 'Apply your own branding to this installation.'

app/javascript/dashboard/App.vue

@@ -1,5 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
+import AddAccountModal from './components/app/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
@@ -24,6 +25,7 @@ export default {
   name: 'App',
 
   components: {
+    AddAccountModal,
     LoadingState,
     NetworkNotification,
     UpdateBanner,
@@ -49,6 +51,7 @@ export default {
   },
   data() {
     return {
+      showAddAccountModal: false,
       latestChatwootVersion: null,
       reconnectService: null,
     };
@@ -61,12 +64,21 @@ export default {
       authUIFlags: 'getAuthUIFlags',
       accountUIFlags: 'accounts/getUIFlags',
     }),
+    hasAccounts() {
+      const { accounts = [] } = this.currentUser || {};
+      return accounts.length > 0;
+    },
     hideOnOnboardingView() {
       return !isOnOnboardingView(this.$route);
     },
   },
 
   watch: {
+    currentUser() {
+      if (!this.hasAccounts) {
+        this.showAddAccountModal = true;
+      }
+    },
     currentAccountId: {
       immediate: true,
       handler() {
@@ -144,6 +156,7 @@ export default {
         <component :is="Component" />
       </transition>
     </router-view>
+    <AddAccountModal :show="showAddAccountModal" :has-accounts="hasAccounts" />
     <WootSnackbarBox />
     <NetworkNotification />
   </div>

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

@@ -1,36 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainCustomTools extends ApiClient {
-  constructor() {
-    super('captain/custom_tools', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey } = {}) {
-    return axios.get(this.url, {
-      params: { page, searchKey },
-    });
-  }
-
-  show(id) {
-    return axios.get(`${this.url}/${id}`);
-  }
-
-  create(data = {}) {
-    return axios.post(this.url, {
-      custom_tool: data,
-    });
-  }
-
-  update(id, data = {}) {
-    return axios.put(`${this.url}/${id}`, {
-      custom_tool: data,
-    });
-  }
-
-  delete(id) {
-    return axios.delete(`${this.url}/${id}`);
-  }
-}
-
-export default new CaptainCustomTools();

app/javascript/dashboard/api/changelog.js

@@ -1,16 +0,0 @@
-import axios from 'axios';
-import ApiClient from './ApiClient';
-import { CHANGELOG_API_URL } from 'shared/constants/links';
-
-class ChangelogApi extends ApiClient {
-  constructor() {
-    super('changelog', { apiVersion: 'v1' });
-  }
-
-  // eslint-disable-next-line class-methods-use-this
-  fetchFromHub() {
-    return axios.get(CHANGELOG_API_URL);
-  }
-}
-
-export default new ChangelogApi();

app/javascript/dashboard/api/companies.js

@@ -1,37 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-export const buildCompanyParams = (page, sort) => {
-  let params = `page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
-
-export const buildSearchParams = (query, page, sort) => {
-  let params = `q=${encodeURIComponent(query)}&page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
-
-class CompanyAPI extends ApiClient {
-  constructor() {
-    super('companies', { accountScoped: true });
-  }
-
-  get(params = {}) {
-    const { page = 1, sort = 'name' } = params;
-    const requestURL = `${this.url}?${buildCompanyParams(page, sort)}`;
-    return axios.get(requestURL);
-  }
-
-  search(query = '', page = 1, sort = 'name') {
-    const requestURL = `${this.url}/search?${buildSearchParams(query, page, sort)}`;
-    return axios.get(requestURL);
-  }
-}
-
-export default new CompanyAPI();

app/javascript/dashboard/api/contacts.js

@@ -47,12 +47,6 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
-  initiateCall(contactId, inboxId) {
-    return axios.post(`${this.url}/${contactId}/call`, {
-      inbox_id: inboxId,
-    });
-  }
-
   updateContactLabels(contactId, labels) {
     return axios.post(`${this.url}/${contactId}/labels`, { labels });
   }

app/javascript/dashboard/api/enterprise/account.js

@@ -23,10 +23,6 @@ class EnterpriseAccountAPI extends ApiClient {
       action_type: action,
     });
   }
-
-  createTopupCheckout(credits) {
-    return axios.post(`${this.url}topup_checkout`, { credits });
-  }
 }
 
 export default new EnterpriseAccountAPI();

app/javascript/dashboard/api/enterprise/specs/account.spec.js

@@ -11,8 +11,6 @@ describe('#enterpriseAccountAPI', () => {
     expect(accountAPI).toHaveProperty('delete');
     expect(accountAPI).toHaveProperty('checkout');
     expect(accountAPI).toHaveProperty('toggleDeletion');
-    expect(accountAPI).toHaveProperty('createTopupCheckout');
-    expect(accountAPI).toHaveProperty('getLimits');
   });
 
   describe('API calls', () => {
@@ -61,29 +59,5 @@ describe('#enterpriseAccountAPI', () => {
         { action_type: 'undelete' }
       );
     });
-
-    it('#createTopupCheckout with credits', () => {
-      accountAPI.createTopupCheckout(1000);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/enterprise/api/v1/topup_checkout',
-        { credits: 1000 }
-      );
-    });
-
-    it('#createTopupCheckout with different credit amounts', () => {
-      const creditAmounts = [1000, 2500, 6000, 12000];
-      creditAmounts.forEach(credits => {
-        accountAPI.createTopupCheckout(credits);
-        expect(axiosMock.post).toHaveBeenCalledWith(
-          '/enterprise/api/v1/topup_checkout',
-          { credits }
-        );
-      });
-    });
-
-    it('#getLimits', () => {
-      accountAPI.getLimits();
-      expect(axiosMock.get).toHaveBeenCalledWith('/enterprise/api/v1/limits');
-    });
   });
 });

app/javascript/dashboard/api/inbox/conversation.js

@@ -63,9 +63,10 @@ class ConversationApi extends ApiClient {
   }
 
   assignAgent({ conversationId, agentId }) {
-    return axios.post(`${this.url}/${conversationId}/assignments`, {
-      assignee_id: agentId,
-    });
+    return axios.post(
+      `${this.url}/${conversationId}/assignments?assignee_id=${agentId}`,
+      {}
+    );
   }
 
   assignTeam({ conversationId, teamId }) {

app/javascript/dashboard/api/inboxHealth.js

@@ -1,14 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class InboxHealthAPI extends ApiClient {
-  constructor() {
-    super('inboxes', { accountScoped: true });
-  }
-
-  getHealthStatus(inboxId) {
-    return axios.get(`${this.url}/${inboxId}/health`);
-  }
-}
-
-export default new InboxHealthAPI();

app/javascript/dashboard/api/integrations/openapi.js

@@ -57,12 +57,6 @@ class OpenAIAPI extends ApiClient {
       content,
     };
 
-    // Always include conversation_display_id when available for session tracking
-    if (conversationId) {
-      data.conversation_display_id = conversationId;
-    }
-
-    // For conversation-level events, only send conversation_display_id
     if (this.conversation_events.includes(type)) {
       data = {
         conversation_display_id: conversationId,

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

@@ -1,142 +0,0 @@
-import companyAPI, {
-  buildCompanyParams,
-  buildSearchParams,
-} from '../companies';
-import ApiClient from '../ApiClient';
-
-describe('#CompanyAPI', () => {
-  it('creates correct instance', () => {
-    expect(companyAPI).toBeInstanceOf(ApiClient);
-    expect(companyAPI).toHaveProperty('get');
-    expect(companyAPI).toHaveProperty('show');
-    expect(companyAPI).toHaveProperty('create');
-    expect(companyAPI).toHaveProperty('update');
-    expect(companyAPI).toHaveProperty('delete');
-    expect(companyAPI).toHaveProperty('search');
-  });
-
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#get with default params', () => {
-      companyAPI.get({});
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=1&sort=name'
-      );
-    });
-
-    it('#get with page and sort params', () => {
-      companyAPI.get({ page: 2, sort: 'domain' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=2&sort=domain'
-      );
-    });
-
-    it('#get with descending sort', () => {
-      companyAPI.get({ page: 1, sort: '-created_at' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with query', () => {
-      companyAPI.search('acme', 1, 'name');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme&page=1&sort=name'
-      );
-    });
-
-    it('#search with special characters in query', () => {
-      companyAPI.search('acme & co', 2, 'domain');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme%20%26%20co&page=2&sort=domain'
-      );
-    });
-
-    it('#search with descending sort', () => {
-      companyAPI.search('test', 1, '-created_at');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=test&page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with empty query', () => {
-      companyAPI.search('', 1, 'name');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=&page=1&sort=name'
-      );
-    });
-  });
-});
-
-describe('#buildCompanyParams', () => {
-  it('returns correct string with page only', () => {
-    expect(buildCompanyParams(1)).toBe('page=1');
-  });
-
-  it('returns correct string with page and sort', () => {
-    expect(buildCompanyParams(1, 'name')).toBe('page=1&sort=name');
-  });
-
-  it('returns correct string with different page', () => {
-    expect(buildCompanyParams(3, 'domain')).toBe('page=3&sort=domain');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildCompanyParams(1, '-created_at')).toBe(
-      'page=1&sort=-created_at'
-    );
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildCompanyParams(2, '')).toBe('page=2');
-  });
-});
-
-describe('#buildSearchParams', () => {
-  it('returns correct string with all parameters', () => {
-    expect(buildSearchParams('acme', 1, 'name')).toBe(
-      'q=acme&page=1&sort=name'
-    );
-  });
-
-  it('returns correct string with special characters', () => {
-    expect(buildSearchParams('acme & co', 2, 'domain')).toBe(
-      'q=acme%20%26%20co&page=2&sort=domain'
-    );
-  });
-
-  it('returns correct string with empty query', () => {
-    expect(buildSearchParams('', 1, 'name')).toBe('q=&page=1&sort=name');
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildSearchParams('test', 1, '')).toBe('q=test&page=1');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildSearchParams('company', 3, '-created_at')).toBe(
-      'q=company&page=3&sort=-created_at'
-    );
-  });
-
-  it('encodes special characters correctly', () => {
-    expect(buildSearchParams('test@example.com', 1, 'name')).toBe(
-      'q=test%40example.com&page=1&sort=name'
-    );
-  });
-});

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -92,10 +92,8 @@ describe('#ConversationAPI', () => {
     it('#assignAgent', () => {
       conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
       expect(axiosMock.post).toHaveBeenCalledWith(
-        `/api/v1/conversations/12/assignments`,
-        {
-          assignee_id: 34,
-        }
+        `/api/v1/conversations/12/assignments?assignee_id=34`,
+        {}
       );
     });
 

app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue

@@ -1,95 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { formatDistanceToNow } from 'date-fns';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  id: { type: Number, required: true },
-  name: { type: String, default: '' },
-  domain: { type: String, default: '' },
-  contactsCount: { type: Number, default: 0 },
-  description: { type: String, default: '' },
-  avatarUrl: { type: String, default: '' },
-  updatedAt: { type: [String, Number], default: null },
-});
-
-const emit = defineEmits(['showCompany']);
-
-const { t } = useI18n();
-
-const onClickViewDetails = () => emit('showCompany', props.id);
-
-const displayName = computed(() => props.name || t('COMPANIES.UNNAMED'));
-
-const avatarSource = computed(() => props.avatarUrl || null);
-
-const formattedUpdatedAt = computed(() => {
-  if (!props.updatedAt) return '';
-  return formatDistanceToNow(new Date(props.updatedAt), { addSuffix: true });
-});
-</script>
-
-<template>
-  <CardLayout layout="row" @click="onClickViewDetails">
-    <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar
-        :username="displayName"
-        :src="avatarSource"
-        class="shrink-0"
-        :name="name"
-        :size="48"
-        hide-offline-status
-        rounded-full
-      />
-      <div class="flex flex-col gap-0.5 flex-1 min-w-0">
-        <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">
-          <span class="text-base font-medium truncate text-n-slate-12">
-            {{ displayName }}
-          </span>
-          <span
-            v-if="domain && description"
-            class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-          >
-            <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
-            <span class="truncate">{{ domain }}</span>
-          </span>
-        </div>
-        <div class="flex items-center justify-between">
-          <div class="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
-            <span
-              v-if="domain && !description"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-            >
-              <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
-              <span class="truncate">{{ domain }}</span>
-            </span>
-            <span v-if="description" class="text-sm text-n-slate-11 truncate">
-              {{ description }}
-            </span>
-            <div
-              v-if="(description || domain) && contactsCount"
-              class="w-px h-3 bg-n-slate-6"
-            />
-            <span
-              v-if="contactsCount"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-            >
-              <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
-              {{ t('COMPANIES.CONTACTS_COUNT', { n: contactsCount }) }}
-            </span>
-          </div>
-          <span
-            v-if="updatedAt"
-            class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 flex-shrink-0"
-          >
-            {{ formattedUpdatedAt }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -1,55 +0,0 @@
-<script setup>
-import Input from 'dashboard/components-next/input/Input.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import CompanySortMenu from './components/CompanySortMenu.vue';
-
-defineProps({
-  showSearch: { type: Boolean, default: true },
-  searchValue: { type: String, default: '' },
-  headerTitle: { type: String, required: true },
-  activeSort: { type: String, default: 'last_activity_at' },
-  activeOrdering: { type: String, default: '' },
-});
-
-const emit = defineEmits(['search', 'update:sort']);
-</script>
-
-<template>
-  <header class="sticky top-0 z-10">
-    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
-    >
-      <span class="text-xl font-medium truncate text-n-slate-12">
-        {{ headerTitle }}
-      </span>
-      <div class="flex items-center flex-row flex-shrink-0 gap-2">
-        <div class="flex items-center">
-          <CompanySortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-        </div>
-        <div v-if="showSearch" class="flex items-center gap-2 w-full">
-          <Input
-            :model-value="searchValue"
-            type="search"
-            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
-            :custom-input-class="[
-              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
-            ]"
-            class="w-full"
-            @input="emit('search', $event.target.value)"
-          >
-            <template #prefix>
-              <Icon
-                icon="i-lucide-search"
-                class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-2 rtl:right-2"
-              />
-            </template>
-          </Input>
-        </div>
-      </div>
-    </div>
-  </header>
-</template>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue

@@ -1,116 +0,0 @@
-<script setup>
-import { ref, computed, toRef } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import SelectMenu from 'dashboard/components-next/selectmenu/SelectMenu.vue';
-
-const props = defineProps({
-  activeSort: {
-    type: String,
-    default: 'name',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits(['update:sort']);
-
-const { t } = useI18n();
-
-const isMenuOpen = ref(false);
-
-const sortMenus = [
-  {
-    label: t('COMPANIES.SORT_BY.OPTIONS.NAME'),
-    value: 'name',
-  },
-  {
-    label: t('COMPANIES.SORT_BY.OPTIONS.DOMAIN'),
-    value: 'domain',
-  },
-  {
-    label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
-    value: 'created_at',
-  },
-];
-
-const orderingMenus = [
-  {
-    label: t('COMPANIES.ORDER.OPTIONS.ASCENDING'),
-    value: '',
-  },
-  {
-    label: t('COMPANIES.ORDER.OPTIONS.DESCENDING'),
-    value: '-',
-  },
-];
-
-// Converted the props to refs for better reactivity
-const activeSort = toRef(props, 'activeSort');
-
-const activeOrdering = toRef(props, 'activeOrdering');
-
-const activeSortLabel = computed(() => {
-  const selectedMenu = sortMenus.find(menu => menu.value === activeSort.value);
-  return selectedMenu?.label || t('COMPANIES.SORT_BY.LABEL');
-});
-
-const activeOrderingLabel = computed(() => {
-  const selectedMenu = orderingMenus.find(
-    menu => menu.value === activeOrdering.value
-  );
-  return selectedMenu?.label || t('COMPANIES.ORDER.LABEL');
-});
-
-const handleSortChange = value => {
-  emit('update:sort', { sort: value, order: props.activeOrdering });
-};
-
-const handleOrderChange = value => {
-  emit('update:sort', { sort: props.activeSort, order: value });
-};
-</script>
-
-<template>
-  <div class="relative">
-    <Button
-      icon="i-lucide-arrow-down-up"
-      color="slate"
-      size="sm"
-      variant="ghost"
-      :class="isMenuOpen ? 'bg-n-alpha-2' : ''"
-      @click="isMenuOpen = !isMenuOpen"
-    />
-    <div
-      v-if="isMenuOpen"
-      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
-    >
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-sm text-n-slate-12">
-          {{ t('COMPANIES.SORT_BY.LABEL') }}
-        </span>
-        <SelectMenu
-          :model-value="activeSort"
-          :options="sortMenus"
-          :label="activeSortLabel"
-          @update:model-value="handleSortChange"
-        />
-      </div>
-      <div class="flex items-center justify-between gap-2">
-        <span class="text-sm text-n-slate-12">
-          {{ t('COMPANIES.ORDER.LABEL') }}
-        </span>
-        <SelectMenu
-          :model-value="activeOrdering"
-          :options="orderingMenus"
-          :label="activeOrderingLabel"
-          @update:model-value="handleOrderChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue

@@ -1,51 +0,0 @@
-<script setup>
-import CompanyHeader from './CompaniesHeader/CompanyHeader.vue';
-import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-
-defineProps({
-  searchValue: { type: String, default: '' },
-  headerTitle: { type: String, default: '' },
-  currentPage: { type: Number, default: 1 },
-  totalItems: { type: Number, default: 100 },
-  activeSort: { type: String, default: 'name' },
-  activeOrdering: { type: String, default: '' },
-  showPaginationFooter: { type: Boolean, default: true },
-});
-
-const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
-
-const updateCurrentPage = page => {
-  emit('update:currentPage', page);
-};
-</script>
-
-<template>
-  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
-  >
-    <div class="flex flex-col w-full h-full transition-all duration-300">
-      <CompanyHeader
-        :search-value="searchValue"
-        :header-title="headerTitle"
-        :active-sort="activeSort"
-        :active-ordering="activeOrdering"
-        @search="emit('search', $event)"
-        @update:sort="emit('update:sort', $event)"
-      />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
-          <slot name="default" />
-        </div>
-      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
-        <PaginationFooter
-          current-page-info="COMPANIES_LAYOUT.PAGINATION_FOOTER.SHOWING"
-          :current-page="currentPage"
-          :total-items="totalItems"
-          :items-per-page="25"
-          @update:current-page="updateCurrentPage"
-        />
-      </footer>
-    </div>
-  </section>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue

@@ -5,7 +5,6 @@ import { useToggle } from '@vueuse/core';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
-import Policy from 'dashboard/components/policy.vue';
 
 defineProps({
   selectedContact: {
@@ -25,44 +24,42 @@ const openConfirmDeleteContactDialog = () => {
 </script>
 
 <template>
-  <Policy :permissions="['administrator']">
-    <div class="flex flex-col items-start border-t border-n-strong px-6 py-5">
-      <Button
-        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
-        sm
-        link
-        slate
-        class="hover:!no-underline text-n-slate-12"
-        icon="i-lucide-chevron-down"
-        trailing-icon
-        @click="toggleDeleteSection()"
-      />
+  <div class="flex flex-col items-start border-t border-n-strong px-6 py-5">
+    <Button
+      :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+      sm
+      link
+      slate
+      class="hover:!no-underline text-n-slate-12"
+      icon="i-lucide-chevron-down"
+      trailing-icon
+      @click="toggleDeleteSection()"
+    />
 
-      <div
-        class="transition-all duration-300 ease-in-out grid w-full overflow-hidden"
-        :class="
-          showDeleteSection
-            ? 'grid-rows-[1fr] opacity-100 mt-2'
-            : 'grid-rows-[0fr] opacity-0 mt-0'
-        "
-      >
-        <div class="overflow-hidden min-h-0">
-          <span class="inline-flex text-n-slate-11 text-sm items-center gap-1">
-            {{ t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.MESSAGE') }}
-            <Button
-              :label="t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.BUTTON')"
-              sm
-              ruby
-              link
-              @click="openConfirmDeleteContactDialog()"
-            />
-          </span>
-        </div>
+    <div
+      class="transition-all duration-300 ease-in-out grid w-full overflow-hidden"
+      :class="
+        showDeleteSection
+          ? 'grid-rows-[1fr] opacity-100 mt-2'
+          : 'grid-rows-[0fr] opacity-0 mt-0'
+      "
+    >
+      <div class="overflow-hidden min-h-0">
+        <span class="inline-flex text-n-slate-11 text-sm items-center gap-1">
+          {{ t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.MESSAGE') }}
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.DELETE_CONTACT.BUTTON')"
+            sm
+            ruby
+            link
+            @click="openConfirmDeleteContactDialog()"
+          />
+        </span>
       </div>
     </div>
-    <ConfirmContactDeleteDialog
-      ref="confirmDeleteContactDialogRef"
-      :selected-contact="selectedContact"
-    />
-  </Policy>
+  </div>
+  <ConfirmContactDeleteDialog
+    ref="confirmDeleteContactDialogRef"
+    :selected-contact="selectedContact"
+  />
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -8,7 +8,6 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Flag from 'dashboard/components-next/flag/Flag.vue';
 import ContactDeleteSection from 'dashboard/components-next/Contacts/ContactsCard/ContactDeleteSection.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import countries from 'shared/constants/countries';
 
 const props = defineProps({
@@ -21,17 +20,9 @@ const props = defineProps({
   availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
   isUpdating: { type: Boolean, default: false },
-  selectable: { type: Boolean, default: false },
-  isSelected: { type: Boolean, default: false },
 });
 
-const emit = defineEmits([
-  'toggle',
-  'updateContact',
-  'showContact',
-  'select',
-  'avatarHover',
-]);
+const emit = defineEmits(['toggle', 'updateContact', 'showContact']);
 
 const { t } = useI18n();
 
@@ -97,148 +88,111 @@ const onClickExpand = () => {
 };
 
 const onClickViewDetails = () => emit('showContact', props.id);
-
-const toggleSelect = checked => {
-  emit('select', checked);
-};
-
-const handleAvatarHover = isHovered => {
-  emit('avatarHover', isHovered);
-};
 </script>
 
 <template>
-  <div class="relative">
-    <CardLayout
-      :key="id"
-      layout="row"
-      :class="{
-        'outline-n-weak !bg-n-slate-3 dark:!bg-n-solid-3': isSelected,
-      }"
-    >
-      <div class="flex items-center justify-start flex-1 gap-4">
-        <div
-          class="relative"
-          @mouseenter="handleAvatarHover(true)"
-          @mouseleave="handleAvatarHover(false)"
-        >
-          <Avatar
-            :name="name"
-            :src="thumbnail"
-            :size="48"
-            :status="availabilityStatus"
-            hide-offline-status
-            rounded-full
-          >
-            <template v-if="selectable" #overlay="{ size }">
-              <label
-                class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] border border-n-weak"
-                :style="{ width: `${size}px`, height: `${size}px` }"
-                @click.stop
-              >
-                <Checkbox
-                  :model-value="isSelected"
-                  @change="event => toggleSelect(event.target.checked)"
-                />
-              </label>
-            </template>
-          </Avatar>
-        </div>
-        <div class="flex flex-col gap-0.5 flex-1">
-          <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
-            <span class="text-base font-medium truncate text-n-slate-12">
-              {{ name }}
-            </span>
-            <span class="inline-flex items-center gap-1">
-              <span
-                v-if="additionalAttributes?.companyName"
-                class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
-              />
-              <span
-                v-if="additionalAttributes?.companyName"
-                class="text-sm truncate text-n-slate-11"
-              >
-                {{ additionalAttributes.companyName }}
-              </span>
-            </span>
-          </div>
-          <div
-            class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1"
-          >
-            <div v-if="email" class="truncate max-w-72" :title="email">
-              <span class="text-sm text-n-slate-11">
-                {{ email }}
-              </span>
-            </div>
-            <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
-            <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
-              {{ phoneNumber }}
-            </span>
-            <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
+  <CardLayout :key="id" layout="row">
+    <div class="flex items-center justify-start flex-1 gap-4">
+      <Avatar
+        :name="name"
+        :src="thumbnail"
+        :size="48"
+        :status="availabilityStatus"
+        hide-offline-status
+        rounded-full
+      />
+      <div class="flex flex-col gap-0.5 flex-1">
+        <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
+          <span class="text-base font-medium truncate text-n-slate-12">
+            {{ name }}
+          </span>
+          <span class="inline-flex items-center gap-1">
             <span
-              v-if="countryDetails"
-              class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
-            >
-              <Flag :country="countryDetails.countryCode" class="size-3.5" />
-              {{ formattedLocation }}
-            </span>
-            <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
-            <Button
-              :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
-              variant="link"
-              size="xs"
-              @click="onClickViewDetails"
+              v-if="additionalAttributes?.companyName"
+              class="i-ph-building-light size-4 text-n-slate-10 mb-0.5"
             />
+            <span
+              v-if="additionalAttributes?.companyName"
+              class="text-sm truncate text-n-slate-11"
+            >
+              {{ additionalAttributes.companyName }}
+            </span>
+          </span>
+        </div>
+        <div class="flex flex-wrap items-center justify-start gap-x-3 gap-y-1">
+          <div v-if="email" class="truncate max-w-72" :title="email">
+            <span class="text-sm text-n-slate-11">
+              {{ email }}
+            </span>
           </div>
+          <div v-if="email" class="w-px h-3 truncate bg-n-slate-6" />
+          <span v-if="phoneNumber" class="text-sm truncate text-n-slate-11">
+            {{ phoneNumber }}
+          </span>
+          <div v-if="phoneNumber" class="w-px h-3 truncate bg-n-slate-6" />
+          <span
+            v-if="countryDetails"
+            class="inline-flex items-center gap-2 text-sm truncate text-n-slate-11"
+          >
+            <Flag :country="countryDetails.countryCode" class="size-3.5" />
+            {{ formattedLocation }}
+          </span>
+          <div v-if="countryDetails" class="w-px h-3 truncate bg-n-slate-6" />
+          <Button
+            :label="t('CONTACTS_LAYOUT.CARD.VIEW_DETAILS')"
+            variant="link"
+            size="xs"
+            @click="onClickViewDetails"
+          />
         </div>
       </div>
+    </div>
 
-      <Button
-        icon="i-lucide-chevron-down"
-        variant="ghost"
-        color="slate"
-        size="xs"
-        :class="{ 'rotate-180': isExpanded }"
-        @click="onClickExpand"
-      />
+    <Button
+      icon="i-lucide-chevron-down"
+      variant="ghost"
+      color="slate"
+      size="xs"
+      :class="{ 'rotate-180': isExpanded }"
+      @click="onClickExpand"
+    />
 
-      <template #after>
-        <div
-          class="transition-all duration-500 ease-in-out grid overflow-hidden"
-          :class="
-            isExpanded
-              ? 'grid-rows-[1fr] opacity-100'
-              : 'grid-rows-[0fr] opacity-0'
-          "
-        >
-          <div class="overflow-hidden">
-            <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
-              <ContactsForm
-                ref="contactsFormRef"
-                :contact-data="contactData"
-                @update="handleFormUpdate"
-              />
-              <div>
-                <Button
-                  :label="
-                    t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
-                  "
-                  size="sm"
-                  :is-loading="isUpdating"
-                  :disabled="isUpdating || isFormInvalid"
-                  @click="handleUpdateContact"
-                />
-              </div>
-            </div>
-            <ContactDeleteSection
-              :selected-contact="{
-                id: props.id,
-                name: props.name,
-              }"
+    <template #after>
+      <div
+        class="transition-all duration-500 ease-in-out grid overflow-hidden"
+        :class="
+          isExpanded
+            ? 'grid-rows-[1fr] opacity-100'
+            : 'grid-rows-[0fr] opacity-0'
+        "
+      >
+        <div class="overflow-hidden">
+          <div class="flex flex-col gap-6 p-6 border-t border-n-strong">
+            <ContactsForm
+              ref="contactsFormRef"
+              :contact-data="contactData"
+              @update="handleFormUpdate"
             />
+            <div>
+              <Button
+                :label="
+                  t('CONTACTS_LAYOUT.CARD.EDIT_DETAILS_FORM.UPDATE_BUTTON')
+                "
+                size="sm"
+                :is-loading="isUpdating"
+                :disabled="isUpdating || isFormInvalid"
+                @click="handleUpdateContact"
+              />
+            </div>
           </div>
+          <ContactDeleteSection
+            :selected-contact="{
+              id: props.id,
+              name: props.name,
+            }"
+          />
         </div>
-      </template>
-    </CardLayout>
-  </div>
+      </div>
+    </template>
+  </CardLayout>
 </template>

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -102,7 +102,6 @@ const closeMobileSidebar = () => {
               />
               <VoiceCallButton
                 :phone="selectedContact?.phoneNumber"
-                :contact-id="contactId"
                 :label="$t('CONTACT_PANEL.CALL')"
                 size="sm"
               />

app/javascript/dashboard/components-next/Contacts/Pages/ContactDetails.vue

@@ -10,7 +10,6 @@ import Button from 'dashboard/components-next/button/Button.vue';
 import ContactLabels from 'dashboard/components-next/Contacts/ContactLabels/ContactLabels.vue';
 import ContactsForm from 'dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue';
 import ConfirmContactDeleteDialog from 'dashboard/components-next/Contacts/ContactsForm/ConfirmContactDeleteDialog.vue';
-import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -175,29 +174,27 @@ const handleAvatarDelete = async () => {
         @click="updateContact"
       />
     </div>
-    <Policy :permissions="['administrator']">
-      <div
-        class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h6 class="text-base font-medium text-n-slate-12">
-            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
-          </h6>
-          <span class="text-sm text-n-slate-11">
-            {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
-          </span>
-        </div>
-        <Button
-          :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
-          color="ruby"
-          @click="openConfirmDeleteContactDialog"
-        />
+    <div
+      class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+    >
+      <div class="flex flex-col gap-2">
+        <h6 class="text-base font-medium text-n-slate-12">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT') }}
+        </h6>
+        <span class="text-sm text-n-slate-11">
+          {{ t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT_DESCRIPTION') }}
+        </span>
       </div>
-      <ConfirmContactDeleteDialog
-        ref="confirmDeleteContactDialogRef"
-        :selected-contact="selectedContact"
-        @go-to-contacts-list="emit('goToContactsList')"
+      <Button
+        :label="t('CONTACTS_LAYOUT.DETAILS.DELETE_CONTACT')"
+        color="ruby"
+        @click="openConfirmDeleteContactDialog"
       />
-    </Policy>
+    </div>
+    <ConfirmContactDeleteDialog
+      ref="confirmDeleteContactDialogRef"
+      :selected-contact="selectedContact"
+      @go-to-contacts-list="emit('goToContactsList')"
+    />
   </div>
 </template>

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -10,15 +10,7 @@ import {
 } from 'shared/helpers/CustomErrors';
 import ContactsCard from 'dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue';
 
-const props = defineProps({
-  contacts: { type: Array, required: true },
-  selectedContactIds: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['toggleContact']);
+defineProps({ contacts: { type: Array, required: true } });
 
 const { t } = useI18n();
 const store = useStore();
@@ -28,9 +20,6 @@ const route = useRoute();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 const isUpdating = computed(() => uiFlags.value.isUpdating);
 const expandedCardId = ref(null);
-const hoveredAvatarId = ref(null);
-
-const selectedIdsSet = computed(() => new Set(props.selectedContactIds || []));
 
 const updateContact = async updatedData => {
   try {
@@ -69,43 +58,25 @@ const onClickViewDetails = async id => {
 const toggleExpanded = id => {
   expandedCardId.value = expandedCardId.value === id ? null : id;
 };
-
-const isSelected = id => selectedIdsSet.value.has(id);
-
-const shouldShowSelection = id => {
-  return hoveredAvatarId.value === id || isSelected(id);
-};
-
-const handleSelect = (id, value) => {
-  emit('toggleContact', { id, value });
-};
-
-const handleAvatarHover = (id, isHovered) => {
-  hoveredAvatarId.value = isHovered ? id : null;
-};
 </script>
 
 <template>
-  <div class="flex flex-col gap-4">
-    <div v-for="contact in contacts" :key="contact.id" class="relative">
-      <ContactsCard
-        :id="contact.id"
-        :name="contact.name"
-        :email="contact.email"
-        :thumbnail="contact.thumbnail"
-        :phone-number="contact.phoneNumber"
-        :additional-attributes="contact.additionalAttributes"
-        :availability-status="contact.availabilityStatus"
-        :is-expanded="expandedCardId === contact.id"
-        :is-updating="isUpdating"
-        :selectable="shouldShowSelection(contact.id)"
-        :is-selected="isSelected(contact.id)"
-        @toggle="toggleExpanded(contact.id)"
-        @update-contact="updateContact"
-        @show-contact="onClickViewDetails"
-        @select="value => handleSelect(contact.id, value)"
-        @avatar-hover="value => handleAvatarHover(contact.id, value)"
-      />
-    </div>
+  <div class="flex flex-col gap-4 px-6 pt-4 pb-6">
+    <ContactsCard
+      v-for="contact in contacts"
+      :id="contact.id"
+      :key="contact.id"
+      :name="contact.name"
+      :email="contact.email"
+      :thumbnail="contact.thumbnail"
+      :phone-number="contact.phoneNumber"
+      :additional-attributes="contact.additionalAttributes"
+      :availability-status="contact.availabilityStatus"
+      :is-expanded="expandedCardId === contact.id"
+      :is-updating="isUpdating"
+      @toggle="toggleExpanded(contact.id)"
+      @update-contact="updateContact"
+      @show-contact="onClickViewDetails"
+    />
   </div>
 </template>

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -1,18 +1,15 @@
 <script setup>
 import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { useMapGetter } from 'dashboard/composables/store';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 
 const props = defineProps({
   phone: { type: String, default: '' },
-  contactId: { type: [String, Number], required: true },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -21,17 +18,10 @@ const props = defineProps({
 
 defineOptions({ inheritAttrs: false });
 const attrs = useAttrs();
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
 
 const { t } = useI18n();
 
-const dialogRef = ref(null);
-
 const inboxesList = useMapGetter('inboxes/getInboxes');
-const contactsUiFlags = useMapGetter('contacts/getUIFlags');
-
 const voiceInboxes = computed(() =>
   (inboxesList.value || []).filter(
     inbox => inbox.channel_type === INBOX_TYPES.VOICE
@@ -42,51 +32,20 @@ const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 // Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
-const isInitiatingCall = computed(() => {
-  return contactsUiFlags.value?.isInitiatingCall || false;
-});
+const dialogRef = ref(null);
 
-const navigateToConversation = conversationId => {
-  const accountId = route.params.accountId;
-  if (conversationId && accountId) {
-    const path = frontendURL(
-      conversationUrl({
-        accountId,
-        id: conversationId,
-      })
-    );
-    router.push({ path });
-  }
-};
-
-const startCall = async inboxId => {
-  if (isInitiatingCall.value) return;
-
-  try {
-    const response = await store.dispatch('contacts/initiateCall', {
-      contactId: props.contactId,
-      inboxId,
-    });
-    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
-    navigateToConversation(response?.conversation_id);
-  } catch (error) {
-    const apiError = error?.message;
-    useAlert(apiError || t('CONTACT_PANEL.CALL_FAILED'));
-  }
-};
-
-const onClick = async () => {
+const onClick = () => {
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;
   }
-  const [inbox] = voiceInboxes.value;
-  await startCall(inbox.id);
+  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
 };
 
-const onPickInbox = async inbox => {
+const onPickInbox = () => {
+  // Placeholder until actual call wiring happens
+  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
   dialogRef.value?.close();
-  await startCall(inbox.id);
 };
 </script>
 
@@ -96,8 +55,6 @@ const onPickInbox = async inbox => {
       v-if="shouldRender"
       v-tooltip.top-end="tooltipLabel || null"
       v-bind="attrs"
-      :disabled="isInitiatingCall"
-      :is-loading="isInitiatingCall"
       :label="label"
       :icon="icon"
       :size="size"

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

@@ -1,6 +1,5 @@
 <script setup>
 import Button from 'dashboard/components-next/button/Button.vue';
-import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { computed } from 'vue';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
@@ -56,17 +55,17 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+  <div
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
       ghost
       slate
       sm
-      class="!rounded-full transition-all duration-[250ms] ease-out active:!scale-95 active:!brightness-105 active:duration-75"
+      class="!rounded-full"
       :class="{
-        'bg-n-alpha-2 active:shadow-sm': isContactSidebarOpen,
+        'bg-n-alpha-2': isContactSidebarOpen,
       }"
       icon="i-ph-user-bold"
       @click="handleConversationSidebarToggle"
@@ -76,14 +75,13 @@ useKeyboardEvents(keyboardEvents);
       v-tooltip.bottom="$t('CONVERSATION.SIDEBAR.COPILOT')"
       ghost
       slate
-      sm
-      class="!rounded-full transition-all duration-[250ms] ease-out active:!scale-95 active:duration-75"
+      class="!rounded-full"
       :class="{
-        'bg-n-alpha-2 !text-n-iris-9 active:!brightness-105 active:shadow-sm':
-          isCopilotPanelOpen,
+        'bg-n-alpha-2 !text-n-iris-9': isCopilotPanelOpen,
       }"
+      sm
       icon="i-woot-captain"
       @click="handleCopilotSidebarToggle"
     />
-  </ButtonGroup>
+  </div>
 </template>

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

@@ -19,12 +19,8 @@ const props = defineProps({
   },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
+  enabledMenuOptions: { type: Array, default: () => [] },
   enableCaptainTools: { type: Boolean, default: false },
-  signature: { type: String, default: '' },
-  allowSignature: { type: Boolean, default: false },
-  sendWithSignature: { type: Boolean, default: false },
-  channelType: { type: String, default: '' },
-  medium: { type: String, default: '' },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -102,12 +98,8 @@ watch(
         :disabled="disabled"
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
+        :enabled-menu-options="enabledMenuOptions"
         :enable-captain-tools="enableCaptainTools"
-        :signature="signature"
-        :allow-signature="allowSignature"
-        :send-with-signature="sendWithSignature"
-        :channel-type="channelType"
-        :medium="medium"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -139,6 +131,19 @@ watch(
 .editor-wrapper {
   ::v-deep {
     .ProseMirror-menubar-wrapper {
+      @apply gap-2 !important;
+
+      .ProseMirror-menubar {
+        @apply bg-transparent dark:bg-transparent w-fit left-1 pt-0 h-5 !top-0 !relative !important;
+
+        .ProseMirror-menuitem {
+          @apply h-5 !important;
+        }
+
+        .ProseMirror-icon {
+          @apply p-1 w-3 h-3 text-n-slate-12 dark:text-n-slate-12 !important;
+        }
+      }
       .ProseMirror.ProseMirror-woot-style {
         p {
           @apply first:mt-0 !important;

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

@@ -14,10 +14,6 @@ defineProps({
     type: Array,
     default: () => [],
   },
-  showBackdrop: {
-    type: Boolean,
-    default: true,
-  },
 });
 </script>
 
@@ -29,24 +25,14 @@ defineProps({
       class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
     >
       <div
-        v-if="showBackdrop"
         class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
       >
         <slot name="empty-state-item" />
       </div>
       <div
-        class="flex flex-col items-center justify-end w-full h-full pb-20"
-        :class="{
-          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent':
-            showBackdrop,
-        }"
+        class="absolute inset-x-0 bottom-0 flex flex-col items-center justify-end w-full h-full pb-20 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent"
       >
-        <div
-          class="flex flex-col items-center justify-center gap-6"
-          :class="{
-            'mt-48': !showBackdrop,
-          }"
-        >
+        <div class="flex flex-col items-center justify-center gap-6">
           <div class="flex flex-col items-center justify-center gap-3">
             <h2
               class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
@@ -54,7 +40,6 @@ defineProps({
               {{ title }}
             </h2>
             <p
-              v-if="subtitle"
               class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
             >
               {{ subtitle }}

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

@@ -172,7 +172,7 @@ const previewArticle = () => {
         @apply mr-0;
 
         .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
+          @apply p-0 mt-1 !mr-0;
 
           svg {
             width: 20px !important;

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

@@ -14,7 +14,6 @@ import {
 } from 'dashboard/helper/portalHelper';
 import wootConstants from 'dashboard/constants/globals';
 
-import ButtonGroup from 'dashboard/components-next/buttonGroup/ButtonGroup.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 
@@ -141,12 +140,11 @@ const updateArticleStatus = async ({ value }) => {
           :disabled="!articleId"
           @click="previewArticle"
         />
-        <ButtonGroup class="flex items-center">
+        <div class="flex items-center">
           <Button
             :label="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.PUBLISH')"
             size="sm"
             class="ltr:rounded-r-none rtl:rounded-l-none"
-            no-animation
             :is-loading="isArticlePublishing"
             :disabled="
               status === ARTICLE_STATUSES.PUBLISHED ||
@@ -161,7 +159,6 @@ const updateArticleStatus = async ({ value }) => {
                 icon="i-lucide-chevron-down"
                 size="sm"
                 :disabled="!articleId"
-                no-animation
                 class="ltr:rounded-l-none rtl:rounded-r-none"
                 @click.stop="showArticleActionMenu = !showArticleActionMenu"
               />
@@ -173,7 +170,7 @@ const updateArticleStatus = async ({ value }) => {
               />
             </OnClickOutside>
           </div>
-        </ButtonGroup>
+        </div>
       </div>
     </div>
   </div>

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

@@ -7,7 +7,7 @@ import { vOnClickOutside } from '@vueuse/components';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
@@ -50,6 +50,12 @@ const EmojiInput = defineAsyncComponent(
   () => import('shared/components/emoji/EmojiInput.vue')
 );
 
+const signatureToApply = computed(() =>
+  props.isEmailOrWebWidgetInbox
+    ? props.messageSignature
+    : extractTextFromMarkdown(props.messageSignature)
+);
+
 const {
   fetchSignatureFlagFromUISettings,
   setSignatureFlagForInbox,
@@ -74,26 +80,19 @@ const isRegularMessageMode = computed(() => {
   return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
 });
 
-const isVoiceInbox = computed(() => props.channelType === INBOX_TYPES.VOICE);
-
-const shouldShowSignatureButton = computed(() => {
-  return (
-    props.hasSelectedInbox && isRegularMessageMode.value && !isVoiceInbox.value
-  );
-});
-
 const setSignature = () => {
-  if (props.messageSignature) {
+  if (signatureToApply.value) {
     if (sendWithSignature.value) {
-      emit('addSignature', props.messageSignature);
+      emit('addSignature', signatureToApply.value);
     } else {
-      emit('removeSignature', props.messageSignature);
+      emit('removeSignature', signatureToApply.value);
     }
   }
 };
 
 const toggleMessageSignature = () => {
   setSignatureFlagForInbox(props.channelType, !sendWithSignature.value);
+  setSignature();
 };
 
 // Added this watch to dynamically set signature on target inbox change.
@@ -103,7 +102,7 @@ watch(
   () => props.hasSelectedInbox,
   newValue => {
     nextTick(() => {
-      if (newValue && !isVoiceInbox.value) setSignature();
+      if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
     });
   },
   { immediate: true }
@@ -222,7 +221,7 @@ useKeyboardEvents(keyboardEvents);
         />
       </FileUpload>
       <Button
-        v-if="shouldShowSignatureButton"
+        v-if="hasSelectedInbox && isRegularMessageMode"
         icon="i-lucide-signature"
         color="slate"
         size="sm"

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

@@ -39,7 +39,7 @@ const removeAttachment = id => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 p-4 max-h-48 overflow-y-auto">
+  <div class="flex flex-col gap-4 p-4">
     <div
       v-if="filteredImageAttachments.length > 0"
       class="flex flex-wrap gap-3"

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

@@ -6,7 +6,7 @@ import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
-  getEffectiveChannelType,
+  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -87,12 +87,6 @@ const whatsappMessageTemplates = computed(() =>
 
 const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 
-const inboxMedium = computed(() => props.targetInbox?.medium || '');
-
-const effectiveChannelType = computed(() =>
-  getEffectiveChannelType(inboxChannelType.value, inboxMedium.value)
-);
-
 const validationRules = computed(() => ({
   selectedContact: { required },
   targetInbox: { required },
@@ -154,21 +148,10 @@ const isAnyDropdownActive = computed(() => {
 
 const handleContactSearch = value => {
   showContactsDropdown.value = true;
-  const query = typeof value === 'string' ? value.trim() : '';
-  const hasAlphabet = Array.from(query).some(char => {
-    const lower = char.toLowerCase();
-    const upper = char.toUpperCase();
-    return lower !== upper;
+  emit('searchContacts', {
+    keys: ['email', 'phone_number', 'name'],
+    query: value,
   });
-  const isEmailLike = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(query);
-
-  const keys = ['email', 'phone_number', 'name'].filter(key => {
-    if (key === 'phone_number' && hasAlphabet) return false;
-    if (key === 'name' && isEmailLike) return false;
-    return true;
-  });
-
-  emit('searchContacts', { keys, query: value });
 };
 
 const handleDropdownUpdate = (type, value) => {
@@ -200,36 +183,27 @@ const setSelectedContact = async ({ value, action, ...rest }) => {
 
 const handleInboxAction = ({ value, action, ...rest }) => {
   v$.value.$reset();
-  state.message = '';
   emit('updateTargetInbox', { ...rest });
   showInboxesDropdown.value = false;
   state.attachedFiles = [];
 };
 
-const removeSignatureFromMessage = () => {
-  // Always remove the signature from message content when inbox/contact is removed
-  // to ensure no leftover signature content remains
-  if (props.messageSignature) {
-    state.message = removeSignature(
-      state.message,
-      props.messageSignature,
-      effectiveChannelType.value
-    );
-  }
-};
-
 const removeTargetInbox = value => {
   v$.value.$reset();
-  removeSignatureFromMessage();
-  state.message = '';
+  // Remove the signature from message content
+  // Based on the Advance Editor (used in isEmailOrWebWidget) and Plain editor(all other inboxes except WhatsApp)
+  if (props.sendWithSignature) {
+    const signatureToRemove = inboxTypes.value.isEmailOrWebWidget
+      ? props.messageSignature
+      : extractTextFromMarkdown(props.messageSignature);
+    state.message = removeSignature(state.message, signatureToRemove);
+  }
   emit('updateTargetInbox', value);
   state.attachedFiles = [];
 };
 
 const clearSelectedContact = () => {
-  removeSignatureFromMessage();
   emit('clearSelectedContact');
-  state.message = '';
   state.attachedFiles = [];
 };
 
@@ -238,19 +212,11 @@ const onClickInsertEmoji = emoji => {
 };
 
 const handleAddSignature = signature => {
-  state.message = appendSignature(
-    state.message,
-    signature,
-    effectiveChannelType.value
-  );
+  state.message = appendSignature(state.message, signature);
 };
 
 const handleRemoveSignature = signature => {
-  state.message = removeSignature(
-    state.message,
-    signature,
-    effectiveChannelType.value
-  );
+  state.message = removeSignature(state.message, signature);
 };
 
 const handleAttachFile = files => {
@@ -374,10 +340,9 @@ const shouldShowMessageEditor = computed(() => {
       v-model="state.message"
       :message-signature="messageSignature"
       :send-with-signature="sendWithSignature"
+      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
       :has-errors="validationStates.isMessageInvalid"
       :has-attachments="state.attachedFiles.length > 0"
-      :channel-type="inboxChannelType"
-      :medium="targetInbox?.medium || ''"
     />
 
     <AttachmentPreviews

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

@@ -1,49 +1,122 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
+import {
+  appendSignature,
+  extractTextFromMarkdown,
+  removeSignature,
+} from 'dashboard/helper/editorHelper';
 
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import CannedResponse from 'dashboard/components/widgets/conversation/CannedResponse.vue';
 
 const props = defineProps({
+  isEmailOrWebWidgetInbox: { type: Boolean, required: true },
   hasErrors: { type: Boolean, default: false },
   hasAttachments: { type: Boolean, default: false },
   sendWithSignature: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
-  channelType: { type: String, default: '' },
-  medium: { type: String, default: '' },
 });
 
-const editorKey = computed(() => `editor-${props.channelType}-${props.medium}`);
-
 const { t } = useI18n();
 
 const modelValue = defineModel({
   type: String,
   default: '',
 });
+
+const state = ref({
+  hasSlashCommand: false,
+  showMentions: false,
+  mentionSearchKey: '',
+});
+
+const plainTextSignature = computed(() =>
+  extractTextFromMarkdown(props.messageSignature)
+);
+
+watch(
+  modelValue,
+  newValue => {
+    if (props.isEmailOrWebWidgetInbox) return;
+
+    const bodyWithoutSignature = newValue
+      ? removeSignature(newValue, plainTextSignature.value)
+      : '';
+
+    // Check if message starts with slash
+    const startsWithSlash = bodyWithoutSignature.startsWith('/');
+
+    // Update slash command and mentions state
+    state.value = {
+      ...state.value,
+      hasSlashCommand: startsWithSlash,
+      showMentions: startsWithSlash,
+      mentionSearchKey: startsWithSlash ? bodyWithoutSignature.slice(1) : '',
+    };
+  },
+  { immediate: true }
+);
+
+const hideMention = () => {
+  state.value.showMentions = false;
+};
+
+const replaceText = async message => {
+  // Only append signature on replace if sendWithSignature is true
+  const finalMessage = props.sendWithSignature
+    ? appendSignature(message, plainTextSignature.value)
+    : message;
+
+  await nextTick();
+  modelValue.value = finalMessage;
+};
 </script>
 
 <template>
   <div class="flex-1 h-full" :class="[!hasAttachments && 'min-h-[200px]']">
-    <Editor
-      :key="editorKey"
-      v-model="modelValue"
-      :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-[200px]"
-      :class="
-        hasErrors
-          ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
-          : ''
-      "
-      enable-variables
-      :show-character-count="false"
-      :signature="messageSignature"
-      allow-signature
-      :send-with-signature="sendWithSignature"
-      :channel-type="channelType"
-      :medium="medium"
-    />
+    <template v-if="isEmailOrWebWidgetInbox">
+      <Editor
+        v-model="modelValue"
+        :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-[200px]"
+        :class="
+          hasErrors
+            ? '[&_.empty-node]:before:!text-n-ruby-9 [&_.empty-node]:dark:before:!text-n-ruby-9'
+            : ''
+        "
+        enable-variables
+        :show-character-count="false"
+      />
+    </template>
+    <template v-else>
+      <TextArea
+        v-model="modelValue"
+        :placeholder="
+          t('COMPOSE_NEW_CONVERSATION.FORM.MESSAGE_EDITOR.PLACEHOLDER')
+        "
+        class="!px-0 [&>div]:!px-4 [&>div]:!border-transparent [&>div]:!bg-transparent"
+        :custom-text-area-class="
+          hasErrors
+            ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+            : ''
+        "
+        auto-height
+        allow-signature
+        :signature="messageSignature"
+        :send-with-signature="sendWithSignature"
+      >
+        <CannedResponse
+          v-if="state.showMentions && state.hasSlashCommand"
+          v-on-clickaway="hideMention"
+          class="normal-editor__canned-box"
+          :search-key="state.mentionSearchKey"
+          @replace="replaceText"
+        />
+      </TextArea>
+    </template>
   </div>
 </template>

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

@@ -36,7 +36,6 @@ const props = defineProps({
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
-  noAnimation: { type: Boolean, default: false },
 });
 
 const slots = useSlots();
@@ -180,18 +179,12 @@ const STYLE_CONFIG = {
     md: 'text-sm font-medium',
     lg: 'text-base',
   },
-  clickAnimation: {
-    xs: 'active:enabled:scale-[0.97]',
-    sm: 'active:enabled:scale-[0.97]',
-    md: 'active:enabled:scale-[0.98]',
-    lg: 'active:enabled:scale-[0.98]',
-  },
   justify: {
     start: 'justify-start',
     center: 'justify-center',
     end: 'justify-end',
   },
-  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-100 ease-out border-0 rounded-lg outline-1 outline disabled:opacity-50',
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {
@@ -228,12 +221,6 @@ const linkButtonClasses = computed(() => {
 
   return classes.join(' ');
 });
-
-const animationClasses = computed(() => {
-  return props.noAnimation
-    ? ''
-    : STYLE_CONFIG.clickAnimation[computedSize.value];
-});
 </script>
 
 <template>
@@ -243,7 +230,6 @@ const animationClasses = computed(() => {
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
       [STYLE_CONFIG.fontSize[computedSize]]: true,
-      [animationClasses]: true,
       [STYLE_CONFIG.justify[computedJustify]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"

app/javascript/dashboard/components-next/buttonGroup/ButtonGroup.vue

@@ -1,20 +0,0 @@
-<script setup>
-defineProps({
-  noAnimation: {
-    type: Boolean,
-    default: false,
-  },
-});
-</script>
-
-<template>
-  <div
-    :class="
-      noAnimation
-        ? ''
-        : 'has-[button:not(:disabled):active]:scale-[0.98] transition-transform duration-150 ease-out'
-    "
-  >
-    <slot />
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/PageLayout.vue

@@ -1,17 +1,11 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { OnClickOutside } from '@vueuse/components';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store.js';
+import { computed } from 'vue';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import Button from 'dashboard/components-next/button/Button.vue';
 import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Policy from 'dashboard/components/policy.vue';
-import AssistantSwitcher from 'dashboard/components-next/captain/pageComponents/switcher/AssistantSwitcher.vue';
-import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
 
 const props = defineProps({
   currentPage: {
@@ -62,36 +56,11 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  showAssistantSwitcher: {
-    type: Boolean,
-    default: true,
-  },
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
-
-const { t } = useI18n();
-
-const route = useRoute();
 const { shouldShowPaywall } = usePolicy();
 
-const showAssistantSwitcherDropdown = ref(false);
-const createAssistantDialogRef = ref(null);
-
-const assistants = useMapGetter('captainAssistants/getRecords');
-const uiFlags = useMapGetter('captainAssistants/getUIFlags');
-
-const currentAssistantId = computed(() => route.params.assistantId);
-const isFetchingAssistants = computed(() => uiFlags.value?.fetchingList);
-
-const activeAssistantName = computed(() => {
-  return (
-    assistants.value?.find(
-      assistant => assistant.id === Number(currentAssistantId.value)
-    )?.name || t('CAPTAIN.ASSISTANT_SWITCHER.NEW_ASSISTANT')
-  );
-});
-
 const showPaywall = computed(() => {
   return shouldShowPaywall(props.featureFlag);
 });
@@ -103,15 +72,6 @@ const handleButtonClick = () => {
 const handlePageChange = event => {
   emit('update:currentPage', event);
 };
-
-const toggleAssistantSwitcher = () => {
-  showAssistantSwitcherDropdown.value = !showAssistantSwitcherDropdown.value;
-};
-
-const handleCreateAssistant = () => {
-  showAssistantSwitcherDropdown.value = false;
-  createAssistantDialogRef.value.dialogRef.open();
-};
 </script>
 
 <template>
@@ -121,86 +81,39 @@ const handleCreateAssistant = () => {
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
-          <div class="flex gap-3 items-center">
-            <BackButton v-if="backUrl" :back-url="backUrl" />
-            <div
-              v-if="showAssistantSwitcher && !showPaywall"
-              class="flex items-center gap-2"
-            >
-              <div class="flex items-center gap-2">
-                <span
-                  v-if="!isFetchingAssistants"
-                  class="text-xl font-medium truncate text-n-slate-12"
-                >
-                  {{ activeAssistantName }}
-                </span>
-                <div class="relative group">
-                  <OnClickOutside
-                    @trigger="showAssistantSwitcherDropdown = false"
-                  >
-                    <Button
-                      icon="i-lucide-chevron-down"
-                      variant="ghost"
-                      color="slate"
-                      size="xs"
-                      :disabled="isFetchingAssistants"
-                      :is-loading="isFetchingAssistants"
-                      class="rounded-md group-hover:bg-n-slate-3 hover:bg-n-slate-3 [&>span]:size-4"
-                      @click="toggleAssistantSwitcher"
-                    />
-
-                    <AssistantSwitcher
-                      v-if="showAssistantSwitcherDropdown"
-                      class="absolute ltr:left-0 rtl:right-0 top-9"
-                      @close="showAssistantSwitcherDropdown = false"
-                      @create-assistant="handleCreateAssistant"
-                    />
-                  </OnClickOutside>
-                </div>
-              </div>
-            </div>
-            <div class="flex items-center gap-4">
-              <div
-                v-if="showAssistantSwitcher && !showPaywall && headerTitle"
-                class="w-0.5 h-4 rounded-2xl bg-n-weak"
-              />
-              <span
-                v-if="headerTitle"
-                class="text-xl font-medium text-n-slate-12"
-              >
+          <div class="flex gap-4 items-center">
+            <BackButton v-if="backUrl" :to="backUrl" />
+            <slot name="headerTitle">
+              <span class="text-xl font-medium text-n-slate-12">
                 {{ headerTitle }}
               </span>
-              <div
-                v-if="!isEmpty && showKnowMore"
-                class="flex items-center gap-2"
-              >
-                <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
-                <slot name="knowMore" />
-              </div>
+            </slot>
+            <div
+              v-if="!isEmpty && showKnowMore"
+              class="flex items-center gap-2"
+            >
+              <div class="w-0.5 h-4 rounded-2xl bg-n-weak" />
+              <slot name="knowMore" />
             </div>
           </div>
 
-          <div class="flex gap-2">
-            <slot name="search" />
-            <div
-              v-if="!showPaywall && buttonLabel"
-              v-on-clickaway="() => emit('close')"
-              class="relative group/captain-button"
-            >
-              <Policy :permissions="buttonPolicy">
-                <Button
-                  :label="buttonLabel"
-                  icon="i-lucide-plus"
-                  size="sm"
-                  class="group-hover/captain-button:brightness-110"
-                  @click="handleButtonClick"
-                />
-              </Policy>
-              <slot name="action" />
-            </div>
+          <div
+            v-if="!showPaywall && buttonLabel"
+            v-on-clickaway="() => emit('close')"
+            class="relative group/campaign-button"
+          >
+            <Policy :permissions="buttonPolicy">
+              <Button
+                :label="buttonLabel"
+                icon="i-lucide-plus"
+                size="sm"
+                class="group-hover/campaign-button:brightness-110"
+                @click="handleButtonClick"
+              />
+            </Policy>
+            <slot name="action" />
           </div>
         </div>
-        <slot name="subHeader" />
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto">
@@ -230,6 +143,5 @@ const handleCreateAssistant = () => {
         @update:current-page="handlePageChange"
       />
     </footer>
-    <CreateAssistantDialog ref="createAssistantDialogRef" type="create" />
   </section>
 </template>

app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue

@@ -0,0 +1,91 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+
+defineProps({
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  isEmpty: {
+    type: Boolean,
+    default: false,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalCount: {
+    type: Number,
+    default: 100,
+  },
+  itemsPerPage: {
+    type: Number,
+    default: 25,
+  },
+  showPaginationFooter: {
+    type: Boolean,
+    default: false,
+  },
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:currentPage']);
+
+const router = useRouter();
+
+const handlePageChange = event => {
+  emit('update:currentPage', event);
+};
+
+const handleBreadcrumbClick = item => {
+  router.push({
+    name: item.routeName,
+  });
+};
+</script>
+
+<template>
+  <section
+    class="px-6 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
+  >
+    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
+      <header class="mb-7 sticky top-0 bg-n-background pt-4 z-20">
+        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
+      </header>
+      <main class="flex gap-16 w-full flex-1 pb-16">
+        <section
+          v-if="$slots.body || $slots.emptyState || isFetching"
+          class="flex flex-col w-full"
+        >
+          <div
+            v-if="isFetching"
+            class="flex items-center justify-center py-10 text-n-slate-11"
+          >
+            <Spinner />
+          </div>
+          <div v-else-if="isEmpty">
+            <slot name="emptyState" />
+          </div>
+          <slot v-else name="body" />
+        </section>
+        <section v-if="$slots.controls" class="flex w-full">
+          <slot name="controls" />
+        </section>
+      </main>
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 pb-4">
+        <PaginationFooter
+          :current-page="currentPage"
+          :total-items="totalCount"
+          :items-per-page="itemsPerPage"
+          @update:current-page="handlePageChange"
+        />
+      </footer>
+    </div>
+  </section>
+</template>

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

@@ -76,11 +76,12 @@ const handleAction = ({ action, value }) => {
 <template>
   <CardLayout>
     <div class="flex justify-between w-full gap-1">
-      <h6
-        class="text-base font-normal text-n-slate-12 line-clamp-1 hover:underline transition-colors"
+      <router-link
+        :to="{ name: 'captain_assistants_edit', params: { assistantId: id } }"
+        class="text-base text-n-slate-12 line-clamp-1 hover:underline transition-colors"
       >
         {{ name }}
-      </h6>
+      </router-link>
       <div class="flex items-center gap-2">
         <div
           v-on-clickaway="() => toggleDropdown(false)"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import MessageList from './MessageList.vue';
@@ -29,16 +29,6 @@ const resetConversation = () => {
   newMessage.value = '';
 };
 
-// Watch for assistant ID changes and reset conversation
-watch(
-  () => assistantId,
-  (newId, oldId) => {
-    if (oldId && newId !== oldId) {
-      resetConversation();
-    }
-  }
-);
-
 const sendMessage = async () => {
   if (!newMessage.value.trim() || isLoading.value) return;
 
@@ -75,17 +65,16 @@ const sendMessage = async () => {
 
 <template>
   <div
-    class="flex flex-col h-full rounded-xl border py-6 border-n-weak text-n-slate-11"
+    class="flex flex-col h-full rounded-lg p-4 border border-n-slate-4 text-n-slate-11"
   >
-    <div class="mb-8 px-6">
+    <div class="mb-4">
       <div class="flex justify-between items-center mb-1">
         <h3 class="text-lg font-medium">
           {{ t('CAPTAIN.PLAYGROUND.HEADER') }}
         </h3>
         <NextButton
           ghost
-          sm
-          slate
+          size="small"
           icon="i-lucide-rotate-ccw"
           @click="resetConversation"
         />
@@ -98,17 +87,17 @@ const sendMessage = async () => {
     <MessageList :messages="messages" :is-loading="isLoading" />
 
     <div
-      class="flex items-center mx-6 bg-n-background outline outline-1 outline-n-weak rounded-xl p-3"
+      class="flex items-center bg-n-solid-1 outline outline-n-container rounded-lg p-3"
     >
       <input
         v-model="newMessage"
-        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0 text-n-slate-12 placeholder:text-n-slate-10"
+        class="flex-1 bg-transparent border-none focus:outline-none text-sm mb-0"
         :placeholder="t('CAPTAIN.PLAYGROUND.MESSAGE_PLACEHOLDER')"
         @keyup.enter="sendMessage"
       />
       <NextButton
         ghost
-        sm
+        size="small"
         :disabled="!newMessage.trim()"
         icon="i-lucide-send"
         @click="sendMessage"

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

@@ -64,23 +64,20 @@ const bulkCheckboxState = computed({
       class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
     >
       <div class="flex items-center gap-3">
-        <div class="flex items-center gap-1.5 min-w-0">
+        <div class="flex items-center gap-1.5">
           <Checkbox
             v-model="bulkCheckboxState"
             :indeterminate="isIndeterminate"
           />
-          <span
-            class="text-sm font-medium truncate text-n-slate-12 tabular-nums"
-          >
+          <span class="text-sm font-medium text-n-slate-12 tabular-nums">
             {{ selectAllLabel }}
           </span>
         </div>
-        <span class="text-sm text-n-slate-10 truncate tabular-nums">
+        <span class="text-sm text-n-slate-10 tabular-nums">
           {{ selectedCountLabel }}
         </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
       </div>
+      <div class="h-4 w-px bg-n-strong" />
       <div class="flex items-center gap-3">
         <slot name="actions" :selected-count="selectedCount">
           <Button

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

@@ -35,8 +35,8 @@ const getAvatarName = sender =>
 
 const getMessageStyle = sender =>
   isUserMessage(sender)
-    ? 'bg-n-solid-blue text-n-slate-12 rounded-br-sm rounded-bl-xl rounded-t-xl'
-    : 'bg-n-solid-iris text-n-slate-12 rounded-bl-sm rounded-br-xl rounded-t-xl';
+    ? 'bg-n-strong text-n-white'
+    : 'bg-n-solid-iris text-n-slate-12';
 
 const scrollToBottom = async () => {
   await nextTick();
@@ -49,10 +49,7 @@ watch(() => props.messages.length, scrollToBottom);
 </script>
 
 <template>
-  <div
-    ref="messageContainer"
-    class="flex-1 overflow-y-auto mb-4 px-6 space-y-6"
-  >
+  <div ref="messageContainer" class="flex-1 overflow-y-auto mb-4 space-y-2">
     <div
       v-for="(message, index) in messages"
       :key="index"
@@ -60,20 +57,15 @@ watch(() => props.messages.length, scrollToBottom);
       :class="getMessageAlignment(message.sender)"
     >
       <div
-        class="flex items-end gap-1.5 max-w-[90%] md:max-w-[60%]"
+        class="flex items-start gap-1.5"
         :class="getMessageDirection(message.sender)"
       >
-        <Avatar
-          :name="getAvatarName(message.sender)"
-          rounded-full
-          :size="24"
-          class="shrink-0"
-        />
+        <Avatar :name="getAvatarName(message.sender)" rounded-full :size="24" />
         <div
-          class="px-4 py-3 text-sm [overflow-wrap:break-word]"
+          class="max-w-[80%] rounded-lg p-3 text-sm"
           :class="getMessageStyle(message.sender)"
         >
-          <div v-html="formatMessage(message.content)" />
+          <div class="break-words" v-html="formatMessage(message.content)" />
         </div>
       </div>
     </div>

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

@@ -9,7 +9,6 @@ import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.v
 import Button from 'dashboard/components-next/button/Button.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   id: {
@@ -60,10 +59,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  showActions: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
@@ -164,116 +159,73 @@ const handleDocumentableClick = () => {
     <span class="text-n-slate-11 text-sm line-clamp-5">
       {{ answer }}
     </span>
-    <div
-      v-if="!compact"
-      class="flex items-start justify-between flex-col-reverse md:flex-row gap-3"
-    >
-      <Policy v-if="showActions" :permissions="['administrator']">
-        <div class="flex items-center gap-2 sm:gap-5 w-full">
-          <Button
-            v-if="status === 'pending'"
-            :label="$t('CAPTAIN.RESPONSES.OPTIONS.APPROVE')"
-            icon="i-lucide-circle-check-big"
-            sm
-            link
-            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({ action: 'approve', value: 'approve' })
-            "
-          />
-          <Button
-            :label="$t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE')"
-            icon="i-lucide-pencil-line"
-            sm
-            slate
-            link
-            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({
-                action: 'edit',
-                value: 'edit',
-              })
-            "
-          />
-          <Button
-            :label="$t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE')"
-            icon="i-lucide-trash"
-            sm
-            ruby
-            link
-            class="hover:!no-underline"
-            @click="
-              handleAssistantAction({ action: 'delete', value: 'delete' })
-            "
-          />
-        </div>
-      </Policy>
-      <div
-        class="flex items-center gap-3"
-        :class="{ 'justify-between w-full': !showActions }"
-      >
-        <div class="inline-flex items-center gap-3 min-w-0">
+    <div v-if="!compact" class="items-center justify-between hidden lg:flex">
+      <div class="inline-flex items-center">
+        <span
+          class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
+        >
+          <i class="i-woot-captain" />
+          {{ assistant?.name || '' }}
+        </span>
+        <div
+          v-if="documentable"
+          class="shrink-0 text-sm text-n-slate-11 inline-flex line-clamp-1 gap-1 ml-3"
+        >
           <span
-            v-if="status === 'approved'"
-            class="text-sm shrink-0 truncate text-n-slate-11 inline-flex items-center gap-1"
+            v-if="documentable.type === 'Captain::Document'"
+            class="inline-flex items-center gap-1 truncate over"
           >
-            <Icon icon="i-woot-captain" class="size-3.5" />
-            {{ assistant?.name || '' }}
-          </span>
-          <div
-            v-if="documentable"
-            class="text-sm text-n-slate-11 grid grid-cols-[auto_1fr] items-center gap-1 min-w-0"
-          >
-            <Icon
-              v-if="documentable.type === 'Captain::Document'"
-              icon="i-ph-files-light"
-              class="size-3.5"
-            />
-            <Icon
-              v-else-if="documentable.type === 'User'"
-              icon="i-ph-user-circle-plus"
-              class="size-3.5"
-            />
-            <Icon
-              v-else-if="documentable.type === 'Conversation'"
-              icon="i-ph-chat-circle-dots"
-              class="size-3.5"
-            />
-            <span
-              v-if="documentable.type === 'Captain::Document'"
-              class="truncate"
-              :title="documentable.name"
-            >
+            <i class="i-ph-files-light text-base" />
+            <span class="max-w-96 truncate" :title="documentable.name">
               {{ documentable.name }}
             </span>
+          </span>
+          <span
+            v-if="documentable.type === 'User'"
+            class="inline-flex items-center gap-1"
+          >
+            <i class="i-ph-user-circle-plus text-base" />
             <span
-              v-else-if="documentable.type === 'User'"
-              class="truncate"
+              class="max-w-96 truncate"
               :title="documentable.available_name"
             >
               {{ documentable.available_name }}
             </span>
-            <span
-              v-else-if="documentable.type === 'Conversation'"
-              class="hover:underline truncate cursor-pointer"
-              role="button"
-              @click="handleDocumentableClick"
-            >
+          </span>
+          <span
+            v-else-if="documentable.type === 'Conversation'"
+            class="inline-flex items-center gap-1 group cursor-pointer"
+            role="button"
+            @click="handleDocumentableClick"
+          >
+            <i class="i-ph-chat-circle-dots text-base" />
+            <span class="group-hover:underline">
               {{
                 t(`CAPTAIN.RESPONSES.DOCUMENTABLE.CONVERSATION`, {
                   id: documentable.display_id,
                 })
               }}
             </span>
-          </div>
+          </span>
+          <span v-else />
         </div>
         <div
-          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1"
+          v-if="status !== 'approved'"
+          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
         >
-          <Icon icon="i-ph-calendar-dot" class="size-3.5" />
-          {{ timestamp }}
+          <i
+            class="i-ph-stack text-base"
+            :title="t('CAPTAIN.RESPONSES.STATUS.TITLE')"
+          />
+          {{ t(`CAPTAIN.RESPONSES.STATUS.${status.toUpperCase()}`) }}
         </div>
       </div>
+      <div
+        class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
+      >
+        <i class="i-ph-calendar-dot" />
+        {{ timestamp }}
+      </div>
     </div>
   </CardLayout>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/AssistantSelector.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  assistantId: {
+    type: [String, Number],
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update']);
+const { t } = useI18n();
+const isFilterOpen = ref(false);
+
+const assistants = useMapGetter('captainAssistants/getRecords');
+const assistantOptions = computed(() => [
+  {
+    label: t(`CAPTAIN.RESPONSES.FILTER.ALL_ASSISTANTS`),
+    value: 'all',
+    action: 'filter',
+  },
+  ...assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+    action: 'filter',
+  })),
+]);
+
+const selectedAssistantLabel = computed(() => {
+  const assistant = assistantOptions.value.find(
+    option => option.value === props.assistantId
+  );
+  return t('CAPTAIN.RESPONSES.FILTER.ASSISTANT', {
+    selected: assistant ? assistant.label : '',
+  });
+});
+
+const handleAssistantFilterChange = ({ value }) => {
+  isFilterOpen.value = false;
+  emit('update', value);
+};
+</script>
+
+<template>
+  <OnClickOutside @trigger="isFilterOpen = false">
+    <Button
+      :label="selectedAssistantLabel"
+      icon="i-lucide-chevron-down"
+      size="sm"
+      color="slate"
+      trailing-icon
+      class="max-w-48"
+      @click="isFilterOpen = !isFilterOpen"
+    />
+
+    <DropdownMenu
+      v-if="isFilterOpen"
+      :menu-items="assistantOptions"
+      class="mt-2"
+      @action="handleAssistantFilterChange"
+    />
+  </OnClickOutside>
+</template>

app/javascript/dashboard/components-next/captain/pageComponents/DeleteDialog.vue

@@ -10,10 +10,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  translationKey: {
-    type: String,
-    required: true,
-  },
   entity: {
     type: Object,
     required: true,
@@ -29,9 +25,7 @@ const emit = defineEmits(['deleteSuccess']);
 const { t } = useI18n();
 const store = useStore();
 const deleteDialogRef = ref(null);
-const i18nKey = computed(() => {
-  return props.translationKey || props.type.toUpperCase();
-});
+const i18nKey = computed(() => props.type.toUpperCase());
 
 const deleteEntity = async payload => {
   if (!payload) return;

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

@@ -18,7 +18,7 @@ const props = defineProps({
     validator: value => ['create', 'edit'].includes(value),
   },
 });
-const emit = defineEmits(['close', 'created']);
+const emit = defineEmits(['close']);
 const { t } = useI18n();
 const store = useStore();
 
@@ -35,18 +35,8 @@ const i18nKey = computed(
   () => `CAPTAIN.ASSISTANTS.${props.type.toUpperCase()}`
 );
 
-const createAssistant = async assistantDetails => {
-  try {
-    const newAssistant = await store.dispatch(
-      'captainAssistants/create',
-      assistantDetails
-    );
-    emit('created', newAssistant);
-  } catch (error) {
-    const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
+const createAssistant = assistantDetails =>
+  store.dispatch('captainAssistants/create', assistantDetails);
 
 const handleSubmit = async updatedAssistant => {
   try {

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

@@ -0,0 +1,333 @@
+<script setup>
+import { reactive, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import Accordion from 'dashboard/components-next/Accordion/Accordion.vue';
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: true,
+    validator: value => ['edit', 'create'].includes(value),
+  },
+  assistant: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['submit']);
+
+const { t } = useI18n();
+
+const formState = {
+  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
+};
+
+const initialState = {
+  name: '',
+  description: '',
+  productName: '',
+  welcomeMessage: '',
+  handoffMessage: '',
+  resolutionMessage: '',
+  instructions: '',
+  features: {
+    conversationFaqs: false,
+    memories: false,
+    citations: false,
+  },
+  temperature: 1,
+};
+
+const state = reactive({ ...initialState });
+
+const validationRules = {
+  name: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+  productName: { required, minLength: minLength(1) },
+  welcomeMessage: { minLength: minLength(1) },
+  handoffMessage: { minLength: minLength(1) },
+  resolutionMessage: { minLength: minLength(1) },
+  instructions: { minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
+const isLoading = computed(() => formState.uiFlags.value.creatingItem);
+
+const getErrorMessage = field => {
+  return v$.value[field].$error ? v$.value[field].$errors[0].$message : '';
+};
+
+const formErrors = computed(() => ({
+  name: getErrorMessage('name'),
+  description: getErrorMessage('description'),
+  productName: getErrorMessage('productName'),
+  welcomeMessage: getErrorMessage('welcomeMessage'),
+  handoffMessage: getErrorMessage('handoffMessage'),
+  resolutionMessage: getErrorMessage('resolutionMessage'),
+  instructions: getErrorMessage('instructions'),
+}));
+
+const updateStateFromAssistant = assistant => {
+  const { config = {} } = assistant;
+  state.name = assistant.name;
+  state.description = assistant.description;
+  state.productName = config.product_name;
+  state.welcomeMessage = config.welcome_message;
+  state.handoffMessage = config.handoff_message;
+  state.resolutionMessage = config.resolution_message;
+  state.instructions = config.instructions;
+  state.features = {
+    conversationFaqs: config.feature_faq || false,
+    memories: config.feature_memory || false,
+    citations: config.feature_citation || false,
+  };
+  state.temperature = config.temperature || 1;
+};
+
+const handleBasicInfoUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.name.$validate(),
+    v$.value.description.$validate(),
+    v$.value.productName.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    name: state.name,
+    description: state.description,
+    config: {
+      ...props.assistant.config,
+      product_name: state.productName,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleSystemMessagesUpdate = async () => {
+  const result = await Promise.all([
+    v$.value.welcomeMessage.$validate(),
+    v$.value.handoffMessage.$validate(),
+    v$.value.resolutionMessage.$validate(),
+  ]).then(results => results.every(Boolean));
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      welcome_message: state.welcomeMessage,
+      handoff_message: state.handoffMessage,
+      resolution_message: state.resolutionMessage,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleInstructionsUpdate = async () => {
+  const result = await v$.value.instructions.$validate();
+  if (!result) return;
+
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      temperature: state.temperature || 1,
+      instructions: state.instructions,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+const handleFeaturesUpdate = () => {
+  const payload = {
+    config: {
+      ...props.assistant.config,
+      feature_faq: state.features.conversationFaqs,
+      feature_memory: state.features.memories,
+      feature_citation: state.features.citations,
+    },
+  };
+
+  emit('submit', payload);
+};
+
+watch(
+  () => props.assistant,
+  newAssistant => {
+    if (props.mode === 'edit' && newAssistant) {
+      updateStateFromAssistant(newAssistant);
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <!-- Basic Information Section -->
+    <Accordion
+      :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.BASIC_INFO')"
+      is-open
+    >
+      <div class="flex flex-col gap-4 pt-4">
+        <Input
+          v-model="state.name"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.NAME.PLACEHOLDER')"
+          :message="formErrors.name"
+          :message-type="formErrors.name ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.description"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
+          :message="formErrors.description"
+          :message-type="formErrors.description ? 'error' : 'info'"
+        />
+
+        <Input
+          v-model="state.productName"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.LABEL')"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.PRODUCT_NAME.PLACEHOLDER')"
+          :message="formErrors.productName"
+          :message-type="formErrors.productName ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            @click="handleBasicInfoUpdate"
+          >
+            {{ t('CAPTAIN.ASSISTANTS.FORM.UPDATE') }}
+          </Button>
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Instructions Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.INSTRUCTIONS')">
+      <div class="flex flex-col gap-4">
+        <Editor
+          v-model="state.instructions"
+          :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
+          :message="formErrors.instructions"
+          :max-length="20000"
+          :message-type="formErrors.instructions ? 'error' : 'info'"
+        />
+
+        <div class="flex flex-col gap-2 mt-4">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.LABEL') }}
+          </label>
+          <div class="flex items-center gap-4">
+            <input
+              v-model="state.temperature"
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              class="w-full"
+            />
+            <span class="text-sm text-n-slate-12">{{ state.temperature }}</span>
+          </div>
+          <p class="text-sm text-n-slate-11 italic">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.TEMPERATURE.DESCRIPTION') }}
+          </p>
+        </div>
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleInstructionsUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Greeting Messages Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.SYSTEM_MESSAGES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <Editor
+          v-model="state.handoffMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.handoffMessage"
+          :message-type="formErrors.handoffMessage ? 'error' : 'info'"
+        />
+
+        <Editor
+          v-model="state.resolutionMessage"
+          :label="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')
+          "
+          :message="formErrors.resolutionMessage"
+          :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
+        />
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleSystemMessagesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+
+    <!-- Features Section -->
+    <Accordion :title="t('CAPTAIN.ASSISTANTS.FORM.SECTIONS.FEATURES')">
+      <div class="flex flex-col gap-4 pt-4">
+        <div class="flex flex-col gap-2">
+          <label class="text-sm font-medium text-n-slate-12">
+            {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
+          </label>
+          <div class="flex flex-col gap-2">
+            <label class="flex items-center gap-2">
+              <input
+                v-model="state.features.conversationFaqs"
+                type="checkbox"
+              />
+              {{
+                t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
+              }}
+            </label>
+            <label class="flex items-center gap-2">
+              <input v-model="state.features.memories" type="checkbox" />
+              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
+            </label>
+            <label class="flex items-center gap-2">
+              <input v-model="state.features.citations" type="checkbox" />
+              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+            </label>
+          </div>
+        </div>
+
+        <div class="flex justify-end">
+          <Button
+            size="small"
+            :loading="isLoading"
+            :label="t('CAPTAIN.ASSISTANTS.FORM.UPDATE')"
+            @click="handleFeaturesUpdate"
+          />
+        </div>
+      </div>
+    </Accordion>
+  </form>
+</template>

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

@@ -118,7 +118,6 @@ watch(
       :placeholder="t('CAPTAIN.ASSISTANTS.FORM.DESCRIPTION.PLACEHOLDER')"
       :message="formErrors.description"
       :message-type="formErrors.description ? 'error' : 'info'"
-      class="z-0"
     />
 
     <div class="flex flex-col gap-2">

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

@@ -3,8 +3,6 @@ import { reactive, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
 import { minLength } from '@vuelidate/validators';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useAccount } from 'dashboard/composables/useAccount';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
@@ -19,16 +17,10 @@ const props = defineProps({
 const emit = defineEmits(['submit']);
 
 const { t } = useI18n();
-const { isCloudFeatureEnabled } = useAccount();
-
-const isCaptainV2Enabled = computed(() =>
-  isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN_V2)
-);
 
 const initialState = {
   handoffMessage: '',
   resolutionMessage: '',
-  instructions: '',
   temperature: 1,
 };
 
@@ -37,7 +29,6 @@ const state = reactive({ ...initialState });
 const validationRules = {
   handoffMessage: { minLength: minLength(1) },
   resolutionMessage: { minLength: minLength(1) },
-  instructions: { minLength: minLength(1) },
 };
 
 const v$ = useVuelidate(validationRules, state);
@@ -49,30 +40,20 @@ const getErrorMessage = field => {
 const formErrors = computed(() => ({
   handoffMessage: getErrorMessage('handoffMessage'),
   resolutionMessage: getErrorMessage('resolutionMessage'),
-  instructions: getErrorMessage('instructions'),
 }));
 
 const updateStateFromAssistant = assistant => {
   const { config = {} } = assistant;
   state.handoffMessage = config.handoff_message;
   state.resolutionMessage = config.resolution_message;
-  state.instructions = config.instructions;
   state.temperature = config.temperature || 1;
 };
 
 const handleSystemMessagesUpdate = async () => {
-  const validations = [
+  const result = await Promise.all([
     v$.value.handoffMessage.$validate(),
     v$.value.resolutionMessage.$validate(),
-  ];
-
-  if (!isCaptainV2Enabled.value) {
-    validations.push(v$.value.instructions.$validate());
-  }
-
-  const result = await Promise.all(validations).then(results =>
-    results.every(Boolean)
-  );
+  ]).then(results => results.every(Boolean));
   if (!result) return;
 
   const payload = {
@@ -84,10 +65,6 @@ const handleSystemMessagesUpdate = async () => {
     },
   };
 
-  if (!isCaptainV2Enabled.value) {
-    payload.config.instructions = state.instructions;
-  }
-
   emit('submit', payload);
 };
 
@@ -108,7 +85,6 @@ watch(
       :placeholder="t('CAPTAIN.ASSISTANTS.FORM.HANDOFF_MESSAGE.PLACEHOLDER')"
       :message="formErrors.handoffMessage"
       :message-type="formErrors.handoffMessage ? 'error' : 'info'"
-      class="z-0"
     />
 
     <Editor
@@ -117,18 +93,6 @@ watch(
       :placeholder="t('CAPTAIN.ASSISTANTS.FORM.RESOLUTION_MESSAGE.PLACEHOLDER')"
       :message="formErrors.resolutionMessage"
       :message-type="formErrors.resolutionMessage ? 'error' : 'info'"
-      class="z-0"
-    />
-
-    <Editor
-      v-if="!isCaptainV2Enabled"
-      v-model="state.instructions"
-      :label="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.LABEL')"
-      :placeholder="t('CAPTAIN.ASSISTANTS.FORM.INSTRUCTIONS.PLACEHOLDER')"
-      :message="formErrors.instructions"
-      :max-length="20000"
-      :message-type="formErrors.instructions ? 'error' : 'info'"
-      class="z-0"
     />
 
     <div class="flex flex-col gap-2">

app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue

@@ -1,73 +0,0 @@
-<script setup>
-import { defineModel, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  authType: {
-    type: String,
-    required: true,
-    validator: value => ['none', 'bearer', 'basic', 'api_key'].includes(value),
-  },
-});
-
-const { t } = useI18n();
-
-const authConfig = defineModel('authConfig', {
-  type: Object,
-  default: () => ({}),
-});
-
-watch(
-  () => props.authType,
-  () => {
-    authConfig.value = {};
-  }
-);
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <Input
-      v-if="authType === 'bearer'"
-      v-model="authConfig.token"
-      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN')"
-      :placeholder="
-        t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.BEARER_TOKEN_PLACEHOLDER')
-      "
-    />
-    <template v-else-if="authType === 'basic'">
-      <Input
-        v-model="authConfig.username"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME')"
-        :placeholder="
-          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.USERNAME_PLACEHOLDER')
-        "
-      />
-      <Input
-        v-model="authConfig.password"
-        type="password"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD')"
-        :placeholder="
-          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.PASSWORD_PLACEHOLDER')
-        "
-      />
-    </template>
-    <template v-else-if="authType === 'api_key'">
-      <Input
-        v-model="authConfig.name"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY')"
-        :placeholder="
-          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_KEY_PLACEHOLDER')
-        "
-      />
-      <Input
-        v-model="authConfig.key"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE')"
-        :placeholder="
-          t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_CONFIG.API_VALUE_PLACEHOLDER')
-        "
-      />
-    </template>
-  </div>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/customTool/CreateCustomToolDialog.vue

@@ -1,87 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import CustomToolForm from './CustomToolForm.vue';
-
-const props = defineProps({
-  selectedTool: {
-    type: Object,
-    default: () => ({}),
-  },
-  type: {
-    type: String,
-    default: 'create',
-    validator: value => ['create', 'edit'].includes(value),
-  },
-});
-
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-
-const updateTool = toolDetails =>
-  store.dispatch('captainCustomTools/update', {
-    id: props.selectedTool.id,
-    ...toolDetails,
-  });
-
-const i18nKey = computed(
-  () => `CAPTAIN.CUSTOM_TOOLS.${props.type.toUpperCase()}`
-);
-
-const createTool = toolDetails =>
-  store.dispatch('captainCustomTools/create', toolDetails);
-
-const handleSubmit = async updatedTool => {
-  try {
-    if (props.type === 'edit') {
-      await updateTool(updatedTool);
-    } else {
-      await createTool(updatedTool);
-    }
-    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      parseAPIErrorResponse(error) || t(`${i18nKey.value}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => {
-  emit('close');
-};
-
-const handleCancel = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    width="2xl"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.CUSTOM_TOOLS.FORM_DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="handleClose"
-  >
-    <CustomToolForm
-      :mode="type"
-      :tool="selectedTool"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-    <template #footer />
-  </Dialog>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolCard.vue

@@ -1,125 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
-import { dynamicTime } from 'shared/helpers/timeHelper';
-
-import CardLayout from 'dashboard/components-next/CardLayout.vue';
-import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Policy from 'dashboard/components/policy.vue';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  title: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  authType: {
-    type: String,
-    default: 'none',
-  },
-  updatedAt: {
-    type: Number,
-    required: true,
-  },
-  createdAt: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const menuItems = computed(() => [
-  {
-    label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.EDIT_TOOL'),
-    value: 'edit',
-    action: 'edit',
-    icon: 'i-lucide-pencil-line',
-  },
-  {
-    label: t('CAPTAIN.CUSTOM_TOOLS.OPTIONS.DELETE_TOOL'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
-
-const timestamp = computed(() =>
-  dynamicTime(props.updatedAt || props.createdAt)
-);
-
-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('action', { action, value, id: props.id });
-};
-
-const authTypeLabel = computed(() => {
-  return t(
-    `CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.${props.authType.toUpperCase()}`
-  );
-});
-</script>
-
-<template>
-  <CardLayout class="relative">
-    <div class="flex relative justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1 font-medium">
-        {{ title }}
-      </span>
-      <div class="flex items-center gap-2">
-        <Policy
-          v-on-clickaway="() => toggleDropdown(false)"
-          :permissions="['administrator']"
-          class="relative flex items-center group"
-        >
-          <Button
-            icon="i-lucide-ellipsis-vertical"
-            color="slate"
-            size="xs"
-            class="rounded-md group-hover:bg-n-alpha-2"
-            @click="toggleDropdown()"
-          />
-          <DropdownMenu
-            v-if="showActionsDropdown"
-            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:right-0 top-full"
-            @action="handleAction($event)"
-          />
-        </Policy>
-      </div>
-    </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-3 flex-1">
-        <span
-          v-if="description"
-          class="text-sm truncate text-n-slate-11 flex-1"
-        >
-          {{ description }}
-        </span>
-        <span
-          v-if="authType !== 'none'"
-          class="text-sm shrink-0 text-n-slate-11 inline-flex items-center gap-1"
-        >
-          <i class="i-lucide-lock text-base" />
-          {{ authTypeLabel }}
-        </span>
-      </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
-        {{ timestamp }}
-      </span>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/customTool/CustomToolForm.vue

@@ -1,271 +0,0 @@
-<script setup>
-import { reactive, computed, useTemplateRef, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import ParamRow from './ParamRow.vue';
-import AuthConfig from './AuthConfig.vue';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'create',
-    validator: value => ['create', 'edit'].includes(value),
-  },
-  tool: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('captainCustomTools/getUIFlags'),
-};
-
-const initialState = {
-  title: '',
-  description: '',
-  endpoint_url: '',
-  http_method: 'GET',
-  request_template: '',
-  response_template: '',
-  auth_type: 'none',
-  auth_config: {},
-  param_schema: [],
-};
-
-const state = reactive({ ...initialState });
-
-// Populate form when in edit mode
-watch(
-  () => props.tool,
-  newTool => {
-    if (props.mode === 'edit' && newTool && newTool.id) {
-      state.title = newTool.title || '';
-      state.description = newTool.description || '';
-      state.endpoint_url = newTool.endpoint_url || '';
-      state.http_method = newTool.http_method || 'GET';
-      state.request_template = newTool.request_template || '';
-      state.response_template = newTool.response_template || '';
-      state.auth_type = newTool.auth_type || 'none';
-      state.auth_config = newTool.auth_config || {};
-      state.param_schema = newTool.param_schema || [];
-    }
-  },
-  { immediate: true }
-);
-
-const DEFAULT_PARAM = {
-  name: '',
-  type: 'string',
-  description: '',
-  required: false,
-};
-
-const validationRules = {
-  title: { required },
-  endpoint_url: { required },
-  http_method: { required },
-  auth_type: { required },
-};
-
-const httpMethodOptions = computed(() => [
-  { value: 'GET', label: 'GET' },
-  { value: 'POST', label: 'POST' },
-]);
-
-const authTypeOptions = computed(() => [
-  { value: 'none', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.NONE') },
-  { value: 'bearer', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BEARER') },
-  { value: 'basic', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.BASIC') },
-  {
-    value: 'api_key',
-    label: t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPES.API_KEY'),
-  },
-]);
-
-const v$ = useVuelidate(validationRules, state);
-
-const isLoading = computed(() =>
-  props.mode === 'edit'
-    ? formState.uiFlags.value.updatingItem
-    : formState.uiFlags.value.creatingItem
-);
-
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`)
-    : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  endpoint_url: getErrorMessage('endpoint_url', 'ENDPOINT_URL'),
-}));
-
-const paramsRef = useTemplateRef('paramsRef');
-
-const isParamsValid = () => {
-  if (!paramsRef.value || paramsRef.value.length === 0) {
-    return true;
-  }
-  return paramsRef.value.every(param => param.validate());
-};
-
-const removeParam = index => {
-  state.param_schema.splice(index, 1);
-};
-
-const addParam = () => {
-  state.param_schema.push({ ...DEFAULT_PARAM });
-};
-
-const handleCancel = () => emit('cancel');
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid || !isParamsValid()) {
-    return;
-  }
-
-  emit('submit', state);
-};
-</script>
-
-<template>
-  <form
-    class="flex flex-col px-4 -mx-4 gap-4 max-h-[calc(100vh-200px)] overflow-y-scroll"
-    @submit.prevent="handleSubmit"
-  >
-    <Input
-      v-model="state.title"
-      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.LABEL')"
-      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <TextArea
-      v-model="state.description"
-      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.LABEL')"
-      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.DESCRIPTION.PLACEHOLDER')"
-      :rows="2"
-    />
-
-    <div class="flex gap-2">
-      <div class="flex flex-col gap-1 w-28">
-        <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.HTTP_METHOD.LABEL') }}
-        </label>
-        <ComboBox
-          v-model="state.http_method"
-          :options="httpMethodOptions"
-          class="[&>div>button]:bg-n-alpha-black2 [&_li]:font-mono [&_button]:font-mono [&>div>button]:outline-offset-[-1px]"
-        />
-      </div>
-      <Input
-        v-model="state.endpoint_url"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.LABEL')"
-        :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.ENDPOINT_URL.PLACEHOLDER')"
-        :message="formErrors.endpoint_url"
-        :message-type="formErrors.endpoint_url ? 'error' : 'info'"
-        class="flex-1"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.AUTH_TYPE.LABEL') }}
-      </label>
-      <ComboBox
-        v-model="state.auth_type"
-        :options="authTypeOptions"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <AuthConfig
-      v-model:auth-config="state.auth_config"
-      :auth-type="state.auth_type"
-    />
-
-    <div class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.LABEL') }}
-      </label>
-      <p class="text-xs text-n-slate-11 -mt-1">
-        {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAMETERS.HELP_TEXT') }}
-      </p>
-      <ul v-if="state.param_schema.length > 0" class="grid gap-2 list-none">
-        <ParamRow
-          v-for="(param, index) in state.param_schema"
-          :key="index"
-          ref="paramsRef"
-          v-model:name="param.name"
-          v-model:type="param.type"
-          v-model:description="param.description"
-          v-model:required="param.required"
-          @remove="removeParam(index)"
-        />
-      </ul>
-      <Button
-        type="button"
-        sm
-        ghost
-        blue
-        icon="i-lucide-plus"
-        :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.ADD_PARAMETER')"
-        @click="addParam"
-      />
-    </div>
-
-    <TextArea
-      v-if="state.http_method === 'POST'"
-      v-model="state.request_template"
-      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.LABEL')"
-      :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.REQUEST_TEMPLATE.PLACEHOLDER')"
-      :rows="4"
-      class="[&_textarea]:font-mono"
-    />
-
-    <TextArea
-      v-model="state.response_template"
-      :label="t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.LABEL')"
-      :placeholder="
-        t('CAPTAIN.CUSTOM_TOOLS.FORM.RESPONSE_TEMPLATE.PLACEHOLDER')
-      "
-      :rows="4"
-      class="[&_textarea]:font-mono"
-    />
-
-    <div class="flex gap-3 justify-between items-center w-full">
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="
-          t(mode === 'edit' ? 'CAPTAIN.FORM.EDIT' : 'CAPTAIN.FORM.CREATE')
-        "
-        class="w-full"
-        :is-loading="isLoading"
-        :disabled="isLoading"
-      />
-    </div>
-  </form>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue

@@ -1,113 +0,0 @@
-<script setup>
-import { computed, defineModel, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-
-const emit = defineEmits(['remove']);
-const { t } = useI18n();
-const showErrors = ref(false);
-
-const name = defineModel('name', {
-  type: String,
-  required: true,
-});
-
-const type = defineModel('type', {
-  type: String,
-  required: true,
-});
-
-const description = defineModel('description', {
-  type: String,
-  default: '',
-});
-
-const required = defineModel('required', {
-  type: Boolean,
-  default: false,
-});
-
-const paramTypeOptions = computed(() => [
-  { value: 'string', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.STRING') },
-  { value: 'number', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.NUMBER') },
-  {
-    value: 'boolean',
-    label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.BOOLEAN'),
-  },
-  { value: 'array', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.ARRAY') },
-  { value: 'object', label: t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPES.OBJECT') },
-]);
-
-const validationError = computed(() => {
-  if (!name.value || name.value.trim() === '') {
-    return 'PARAM_NAME_REQUIRED';
-  }
-  return null;
-});
-
-watch([name, type, description, required], () => {
-  showErrors.value = false;
-});
-
-const validate = () => {
-  showErrors.value = true;
-  return !validationError.value;
-};
-
-defineExpose({ validate });
-</script>
-
-<template>
-  <li class="list-none">
-    <div
-      class="flex items-start gap-2 p-3 rounded-lg border border-n-weak bg-n-alpha-2"
-      :class="{
-        'animate-wiggle border-n-ruby-9': showErrors && validationError,
-      }"
-    >
-      <div class="flex flex-col flex-1 gap-3">
-        <div class="grid grid-cols-3 gap-2">
-          <Input
-            v-model="name"
-            :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_NAME.PLACEHOLDER')"
-            class="col-span-2"
-          />
-          <ComboBox
-            v-model="type"
-            :options="paramTypeOptions"
-            :placeholder="t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_TYPE.PLACEHOLDER')"
-            class="[&>div>button]:bg-n-alpha-black2"
-          />
-        </div>
-        <Input
-          v-model="description"
-          :placeholder="
-            t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_DESCRIPTION.PLACEHOLDER')
-          "
-        />
-        <label class="flex items-center gap-2 cursor-pointer">
-          <Checkbox v-model="required" />
-          <span class="text-sm text-n-slate-11">
-            {{ t('CAPTAIN.CUSTOM_TOOLS.FORM.PARAM_REQUIRED.LABEL') }}
-          </span>
-        </label>
-      </div>
-      <Button
-        solid
-        slate
-        icon="i-lucide-trash"
-        class="flex-shrink-0"
-        @click.stop="emit('remove')"
-      />
-    </div>
-    <span
-      v-if="showErrors && validationError"
-      class="block mt-1 text-sm text-n-ruby-11"
-    >
-      {{ t(`CAPTAIN.CUSTOM_TOOLS.FORM.ERRORS.${validationError}`) }}
-    </span>
-  </li>
-</template>

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

@@ -8,13 +8,6 @@ import { parseAPIErrorResponse } from 'dashboard/store/utils/api';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
 
-defineProps({
-  assistantId: {
-    type: Number,
-    required: true,
-  },
-});
-
 const emit = defineEmits(['close']);
 const { t } = useI18n();
 const store = useStore();
@@ -55,11 +48,7 @@ defineExpose({ dialogRef });
     :show-confirm-button="false"
     @close="handleClose"
   >
-    <DocumentForm
-      :assistant-id="assistantId"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
+    <DocumentForm @submit="handleSubmit" @cancel="handleCancel" />
     <template #footer />
   </Dialog>
 </template>

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

@@ -2,7 +2,7 @@
 import { reactive, computed, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { minLength, requiredIf, url } from '@vuelidate/validators';
+import { required, minLength, requiredIf, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 
@@ -10,13 +10,6 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
-const props = defineProps({
-  assistantId: {
-    type: Number,
-    required: true,
-  },
-});
-
 const emit = defineEmits(['submit', 'cancel']);
 
 const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
@@ -25,11 +18,13 @@ const { t } = useI18n();
 
 const formState = {
   uiFlags: useMapGetter('captainDocuments/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
 };
 
 const initialState = {
   name: '',
   url: '',
+  assistantId: null,
   documentType: 'url',
   pdfFile: null,
 };
@@ -43,11 +38,19 @@ const validationRules = {
     url: requiredIf(() => state.documentType === 'url' && url),
     minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
   },
+  assistantId: { required },
   pdfFile: {
     required: requiredIf(() => state.documentType === 'pdf'),
   },
 };
 
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
 const documentTypeOptions = [
   { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
   { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
@@ -67,6 +70,7 @@ const getErrorMessage = (field, errorKey) => {
 
 const formErrors = computed(() => ({
   url: getErrorMessage('url', 'URL'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
   pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
 }));
 
@@ -102,7 +106,7 @@ const openFileDialog = () => {
 
 const prepareDocumentDetails = () => {
   const formData = new FormData();
-  formData.append('document[assistant_id]', props.assistantId);
+  formData.append('document[assistant_id]', state.assistantId);
 
   if (state.documentType === 'url') {
     formData.append('document[external_link]', state.url);
@@ -214,6 +218,21 @@ const handleSubmit = async () => {
       :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
     />
 
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2"
+        :message="formErrors.assistantId"
+      />
+    </div>
+
     <div class="flex gap-3 justify-between items-center w-full">
       <Button
         type="button"

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { useAccount } from 'dashboard/composables/useAccount';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
@@ -7,7 +6,6 @@ import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/Featur
 import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
-const { isOnChatwootCloud } = useAccount();
 
 const onClick = () => {
   emit('click');
@@ -22,7 +20,6 @@ const onClick = () => {
     fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
     learn-more-url="https://chwt.app/captain-assistant"
     class="mb-8"
-    :hide-actions="!isOnChatwootCloud"
   />
   <EmptyStateLayout
     :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue

@@ -1,29 +0,0 @@
-<script setup>
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
-    :subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"
-    :action-perms="['administrator']"
-  >
-    <template #empty-state-item>
-      <div class="min-h-[600px]" />
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('CAPTAIN.CUSTOM_TOOLS.ADD_NEW')"
-        icon="i-lucide-plus"
-        @click="onClick"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { useAccount } from 'dashboard/composables/useAccount';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
@@ -7,7 +6,6 @@ import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/Featur
 import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
 const emit = defineEmits(['click']);
-const { isOnChatwootCloud } = useAccount();
 
 const onClick = () => {
   emit('click');
@@ -21,7 +19,6 @@ const onClick = () => {
     fallback-thumbnail="/assets/images/dashboard/captain/document-light.svg"
     fallback-thumbnail-dark="/assets/images/dashboard/captain/document-dark.svg"
     learn-more-url="https://chwt.app/captain-document"
-    :hide-actions="!isOnChatwootCloud"
     class="mb-8"
   />
   <EmptyStateLayout

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue

@@ -1,63 +1,32 @@
 <script setup>
-import { useAccount } from 'dashboard/composables/useAccount';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
 import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 
-import { computed } from 'vue';
-
-const props = defineProps({
-  variant: {
-    type: String,
-    default: 'approved',
-    validator: value => ['approved', 'pending'].includes(value),
-  },
-  hasActiveFilters: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click', 'clearFilters']);
-
-const isApproved = computed(() => props.variant === 'approved');
-const isPending = computed(() => props.variant === 'pending');
-
-const { isOnChatwootCloud } = useAccount();
+const emit = defineEmits(['click']);
 
 const onClick = () => {
   emit('click');
 };
-
-const onClearFilters = () => {
-  emit('clearFilters');
-};
 </script>
 
 <template>
   <FeatureSpotlight
-    v-if="isApproved"
     :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
     :note="$t('CAPTAIN.RESPONSES.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
     fallback-thumbnail="/assets/images/dashboard/captain/faqs-light.svg"
     fallback-thumbnail-dark="/assets/images/dashboard/captain/faqs-dark.svg"
     learn-more-url="https://chwt.app/captain-faq"
-    :hide-actions="!isOnChatwootCloud"
     class="mb-8"
   />
   <EmptyStateLayout
-    :title="
-      isPending
-        ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.NO_PENDING_TITLE')
-        : $t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')
-    "
-    :subtitle="isApproved ? $t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE') : ''"
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
     :action-perms="['administrator']"
-    :show-backdrop="isApproved"
   >
-    <template v-if="isApproved" #empty-state-item>
+    <template #empty-state-item>
       <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
         <ResponseCard
           v-for="(response, index) in responsesList.slice(0, 5)"
@@ -73,21 +42,11 @@ const onClearFilters = () => {
       </div>
     </template>
     <template #actions>
-      <div class="flex flex-col items-center gap-3">
-        <Button
-          v-if="isApproved"
-          :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
-          icon="i-lucide-plus"
-          @click="onClick"
-        />
-        <Button
-          v-else-if="isPending && hasActiveFilters"
-          :label="$t('CAPTAIN.RESPONSES.EMPTY_STATE.CLEAR_SEARCH')"
-          variant="link"
-          size="sm"
-          @click="onClearFilters"
-        />
-      </div>
+      <Button
+        :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
     </template>
   </EmptyStateLayout>
 </template>

app/javascript/dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue

@@ -3,7 +3,6 @@ import { ref, computed } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
 
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ResponseForm from './ResponseForm.vue';
@@ -22,7 +21,6 @@ const props = defineProps({
 const emit = defineEmits(['close']);
 const { t } = useI18n();
 const store = useStore();
-const route = useRoute();
 
 const dialogRef = ref(null);
 const responseForm = ref(null);
@@ -41,15 +39,9 @@ const createResponse = responseDetails =>
 const handleSubmit = async updatedResponse => {
   try {
     if (props.type === 'edit') {
-      await updateResponse({
-        ...updatedResponse,
-        assistant_id: route.params.assistantId,
-      });
+      await updateResponse(updatedResponse);
     } else {
-      await createResponse({
-        ...updatedResponse,
-        assistant_id: route.params.assistantId,
-      });
+      await createResponse(updatedResponse);
     }
     useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
     dialogRef.value.close();

app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue

@@ -8,6 +8,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 
 const props = defineProps({
   mode: {
@@ -20,17 +21,18 @@ const props = defineProps({
     default: () => ({}),
   },
 });
-
 const emit = defineEmits(['submit', 'cancel']);
 const { t } = useI18n();
 
 const formState = {
   uiFlags: useMapGetter('captainResponses/getUIFlags'),
+  assistants: useMapGetter('captainAssistants/getRecords'),
 };
 
 const initialState = {
   question: '',
   answer: '',
+  assistantId: null,
 };
 
 const state = reactive({ ...initialState });
@@ -38,8 +40,16 @@ const state = reactive({ ...initialState });
 const validationRules = {
   question: { required, minLength: minLength(1) },
   answer: { required, minLength: minLength(1) },
+  assistantId: { required },
 };
 
+const assistantList = computed(() =>
+  formState.assistants.value.map(assistant => ({
+    value: assistant.id,
+    label: assistant.name,
+  }))
+);
+
 const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
@@ -53,6 +63,7 @@ const getErrorMessage = (field, errorKey) => {
 const formErrors = computed(() => ({
   question: getErrorMessage('question', 'QUESTION'),
   answer: getErrorMessage('answer', 'ANSWER'),
+  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
 }));
 
 const handleCancel = () => emit('cancel');
@@ -60,6 +71,7 @@ const handleCancel = () => emit('cancel');
 const prepareDocumentDetails = () => ({
   question: state.question,
   answer: state.answer,
+  assistant_id: state.assistantId,
 });
 
 const handleSubmit = async () => {
@@ -74,11 +86,12 @@ const handleSubmit = async () => {
 const updateStateFromResponse = response => {
   if (!response) return;
 
-  const { question, answer } = response;
+  const { question, answer, assistant } = response;
 
   Object.assign(state, {
     question,
     answer,
+    assistantId: assistant.id,
   });
 };
 
@@ -102,6 +115,7 @@ watch(
       :message="formErrors.question"
       :message-type="formErrors.question ? 'error' : 'info'"
     />
+
     <Editor
       v-model="state.answer"
       :label="t('CAPTAIN.RESPONSES.FORM.ANSWER.LABEL')"
@@ -110,6 +124,22 @@ watch(
       :max-length="10000"
       :message-type="formErrors.answer ? 'error' : 'info'"
     />
+
+    <div class="flex flex-col gap-1">
+      <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ t('CAPTAIN.RESPONSES.FORM.ASSISTANT.LABEL') }}
+      </label>
+      <ComboBox
+        id="assistant"
+        v-model="state.assistantId"
+        :options="assistantList"
+        :has-error="!!formErrors.assistantId"
+        :placeholder="t('CAPTAIN.RESPONSES.FORM.ASSISTANT.PLACEHOLDER')"
+        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        :message="formErrors.assistantId"
+      />
+    </div>
+
     <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"