feat: remove maplibre

.circleci/config.yml

@@ -26,12 +26,6 @@ jobs:
           override-ci-command: pnpm i
       - run: node --version
       - run: pnpm --version
-      - run:
-          name: Add PostgreSQL repository and update
-          command: |
-            sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
-            wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add -
-            sudo apt-get update -y
 
       - run:
           name: Install System Dependencies
@@ -40,9 +34,7 @@ jobs:
             DEBIAN_FRONTEND=noninteractive sudo apt-get install -y \
               libpq-dev \
               redis-server \
-              postgresql-common \
-              postgresql-16 \
-              postgresql-16-pgvector \
+              postgresql \
               build-essential \
               git \
               curl \
@@ -82,7 +74,7 @@ jobs:
             source ~/.rvm/scripts/rvm
             rvm install "3.3.3"
             rvm use 3.3.3 --default
-            gem install bundler -v 2.5.16
+            gem install bundler
 
       - run:
           name: Install Application Dependencies

.codeclimate.yml

@@ -51,7 +51,6 @@ exclude_patterns:
   - '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'

.devcontainer/docker-compose.yml

@@ -40,7 +40,7 @@ services:
     network_mode: service:db
 
   db:
-    image: pgvector/pgvector:pg16
+    image: postgres:latest
     restart: unless-stopped
     volumes:
       - postgres-data:/var/lib/postgresql/data

.github/workflows/publish_foss_docker.yml

@@ -5,7 +5,6 @@
 # #
 
 name: Publish Chatwoot CE docker images
-
 on:
   push:
     branches:
@@ -13,32 +12,23 @@ on:
       - master
     tags:
       - v*
+# pull_request:
   workflow_dispatch:
 
-env:
-  DOCKER_REPO: chatwoot/chatwoot
-
 jobs:
   build:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - platform: linux/amd64
-            runner: ubuntu-latest
-          - platform: linux/arm64
-            runner: ubuntu-22.04-arm
-    runs-on: ${{ matrix.runner }}
+    runs-on: ubuntu-latest
     env:
-      GIT_REF: ${{ github.head_ref || github.ref_name }}
+      GIT_REF: ${{ github.head_ref || github.ref_name }} # ref_name to get tags/branches
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Prepare
-        run: |
-          platform=${{ matrix.platform }}
-          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
 
       - name: Strip enterprise code
         run: |
@@ -49,97 +39,29 @@ jobs:
         run: |
           echo -en '\nENV CW_EDITION="ce"' >> docker/Dockerfile
 
-      - name: Set Docker Tags
+      - name: set docker tag
         run: |
+          # Replace forward slashes with hyphens in the ref name
           SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            echo "DOCKER_TAG=${DOCKER_REPO}:latest-ce" >> $GITHUB_ENV
-          else
-            echo "DOCKER_TAG=${DOCKER_REPO}:${SANITIZED_REF}-ce" >> $GITHUB_ENV
-          fi
+          echo "DOCKER_TAG=chatwoot/chatwoot:$SANITIZED_REF-ce" >> $GITHUB_ENV
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+      - name: replace docker tag if master
+        if: github.ref_name == 'master'
+        run: |
+          echo "DOCKER_TAG=chatwoot/chatwoot:latest-ce" >> $GITHUB_ENV
 
       - name: Login to DockerHub
         if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-        uses: docker/login-action@v3
+        uses: docker/login-action@v1
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Build and push by digest
-        id: build
-        uses: docker/build-push-action@v6
+      - name: Build and push
+        uses: docker/build-push-action@v2
         with:
           context: .
           file: docker/Dockerfile
-          platforms: ${{ matrix.platform }}
+          platforms: linux/amd64, linux/arm64
           push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
-          outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-${{ env.PLATFORM_PAIR }}
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    runs-on: ubuntu-latest
-    needs:
-      - build
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        env:
-          GIT_REF: ${{ github.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest-ce"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
-          fi
-          
-          docker buildx imagetools create -t $TAG \
-            $(printf '${{ env.DOCKER_REPO }}@sha256:%s ' *)
-
-      - name: Inspect image
-        env:
-          GIT_REF: ${{ github.head_ref || github.ref_name }}
-        run: |
-          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          if [ "${{ github.ref_name }}" = "master" ]; then
-            TAG="${DOCKER_REPO}:latest-ce"
-          else
-            TAG="${DOCKER_REPO}:${SANITIZED_REF}-ce"
-          fi
-          
-          docker buildx imagetools inspect $TAG
+          tags: ${{ env.DOCKER_TAG }}

.github/workflows/run_foss_spec.yml

@@ -1,3 +1,9 @@
+# #
+# # This action will strip the enterprise folder
+# # and run the spec.
+# # This is set to run against every PR.
+# #
+
 name: Run Chatwoot CE spec
 on:
   push:
@@ -12,7 +18,7 @@ jobs:
     runs-on: ubuntu-20.04
     services:
       postgres:
-        image: pgvector/pgvector:pg15
+        image: postgres:15.3
         env:
           POSTGRES_USER: postgres
           POSTGRES_PASSWORD: ''

.github/workflows/run_response_bot_spec.yml

@@ -0,0 +1,89 @@
+# #
+# # This workflow will run specs related to response bot
+# # This can only be activated in installations Where vector extension is available.
+# #
+
+name: Run Response Bot spec
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  test:
+    runs-on: ubuntu-20.04
+    services:
+      postgres:
+        image: ankane/pgvector
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: ""
+          POSTGRES_DB: postgres
+          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
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+      redis:
+        image: redis
+        ports:
+          - 6379:6379
+        options: --entrypoint redis-server
+
+    steps:
+    - uses: actions/checkout@v4
+      with:
+        ref: ${{ github.event.pull_request.head.ref }}
+        repository: ${{ github.event.pull_request.head.repo.full_name }}
+
+    - uses: ruby/setup-ruby@v1
+      with:
+        bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+
+    - uses: pnpm/action-setup@v2
+      with:
+        version: 9.3.0
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: pnpm
+
+    - name: pnpm
+      run: pnpm install
+
+    - name: Create database
+      run: bundle exec rake db:create
+
+    - name: Seed database
+      run: bundle exec rake db:schema:load
+
+    - name: Enable ResponseBotService in installation
+      run: RAILS_ENV=test bundle exec rails runner "Features::ResponseBotService.new.enable_in_installation"
+
+    # Run  Response Bot specs
+    - name: Run backend tests
+      run: |
+        bundle exec rspec \
+          spec/enterprise/controllers/api/v1/accounts/response_sources_controller_spec.rb \
+          spec/enterprise/services/enterprise/message_templates/response_bot_service_spec.rb \
+          spec/enterprise/controllers/enterprise/api/v1/accounts/inboxes_controller_spec.rb:47 \
+          spec/enterprise/jobs/enterprise/account/conversations_resolution_scheduler_job_spec.rb \
+          --profile=10 \
+          --format documentation
+
+    - name: Upload rails log folder
+      uses: actions/upload-artifact@v4
+      if: always()
+      with:
+        name: rails-log-folder
+        path: log

Gemfile

@@ -175,8 +175,6 @@ gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
 
-gem 'ruby-openai'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -231,7 +231,6 @@ GEM
     erubi (1.13.0)
     et-orbi (1.2.11)
       tzinfo
-    event_stream_parser (1.0.0)
     execjs (2.8.1)
     facebook-messenger (2.0.1)
       httparty (~> 0.13, >= 0.13.7)
@@ -685,10 +684,6 @@ GEM
     rubocop-rspec (2.21.0)
       rubocop (~> 1.33)
       rubocop-capybara (~> 2.17)
-    ruby-openai (7.3.1)
-      event_stream_parser (>= 0.3.0, < 2.0.0)
-      faraday (>= 1)
-      faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
     ruby-vips (2.1.4)
       ffi (~> 1.12)
@@ -946,7 +941,6 @@ DEPENDENCIES
   rubocop-performance
   rubocop-rails
   rubocop-rspec
-  ruby-openai
   scout_apm
   scss_lint
   seed_dump

README.md

@@ -120,4 +120,4 @@ Thanks goes to all these [wonderful people](https://www.chatwoot.com/docs/contri
 <a href="https://github.com/chatwoot/chatwoot/graphs/contributors"><img src="https://opencollective.com/chatwoot/contributors.svg?width=890&button=false" /></a>
 
 
-*Chatwoot* &copy; 2017-2025, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2024, Chatwoot Inc - Released under the MIT License.

SECURITY.md

@@ -2,13 +2,13 @@ Chatwoot is looking forward to working with security researchers worldwide to ke
 
 ## Reporting a Vulnerability
 
-We use Github to track the security issues that affect our project. If you believe you have found a vulnerability, please disclose it via this [form](https://github.com/chatwoot/chatwoot/security/advisories/new). This will enable us to review the vulnerability, fix it promptly, and reward you for your efforts.
+We use [huntr.dev](https://huntr.dev/) for security issues that affect our project. If you believe you have found a vulnerability, please disclose it via this [form](https://huntr.dev/bounties/disclose). This will enable us to review the vulnerability, fix it promptly, and reward you for your efforts.
 
 If you have any questions about the process, contact security@chatwoot.com. 
 
-Please try your best to describe a clear and realistic impact for your report, and please don't open any public issues on GitHub or social media; we're doing our best to respond through Github as quickly as possible.
+Please try your best to describe a clear and realistic impact for your report, and please don't open any public issues on GitHub or social media; we're doing our best to respond through Huntr as quickly as possible.
 
-> Note: Please use the email for questions related to the process. Disclosures should be done via [Github](https://github.com/chatwoot/chatwoot/security/advisories/new)
+> Note: Please use the email for questions related to the process. Disclosures should be done via [huntr.dev](https://huntr.dev/)
 ## Supported versions
 
 | Version | Supported        |
@@ -48,7 +48,7 @@ We consider the following out of scope, though there may be exceptions.
 - Brute force attacks
 - DNSSEC
 
-If you are unsure about the scope, please create a [report](https://github.com/chatwoot/chatwoot/security/advisories/new).
+If you are unsure about the scope, please create a [report](https://huntr.dev/repos/chatwoot/chatwoot/).
 
 
 ## Thanks

VERSION_CWCTL

@@ -1 +1 @@
-3.1.0
+3.0.0

app/actions/contact_merge_action.rb

@@ -54,7 +54,7 @@ class ContactMergeAction
     # attributes in base contact are given preference
     merged_attributes = mergee_contact_attributes.deep_merge(base_contact_attributes)
 
-    @mergee_contact.reload.destroy!
+    @mergee_contact.destroy!
     Rails.configuration.dispatcher.dispatch(CONTACT_MERGED, Time.zone.now, contact: @base_contact,
                                                                            tokens: [@base_contact.contact_inboxes.filter_map(&:pubsub_token)])
     @base_contact.update!(merged_attributes)

app/builders/notification_builder.rb

@@ -25,8 +25,6 @@ class NotificationBuilder
   def build_notification
     # Create conversation_creation notification only if user is subscribed to it
     return if notification_type == 'conversation_creation' && !user_subscribed_to_notification?
-    # skip notifications for blocked conversations except for user mentions
-    return if primary_actor.contact.blocked? && notification_type != 'conversation_mention'
 
     user.notifications.create!(
       notification_type: notification_type,

app/builders/v2/reports/agent_summary_builder.rb

@@ -2,38 +2,52 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
   pattr_initialize [:account!, :params!]
 
   def build
-    load_data
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
     prepare_report
   end
 
   private
 
-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group('assignee_id').count
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('assignee_id').count
   end
 
-  def prepare_report
-    account.account_users.map do |account_user|
-      build_agent_stats(account_user)
-    end
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
   end
 
-  def build_agent_stats(account_user)
-    user_id = account_user.user_id
-    {
-      id: user_id,
-      conversations_count: conversations_count[user_id] || 0,
-      resolved_conversations_count: resolved_count[user_id] || 0,
-      avg_resolution_time: avg_resolution_time[user_id],
-      avg_first_response_time: avg_first_response_time[user_id],
-      avg_reply_time: avg_reply_time[user_id]
-    }
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
   def group_by_key
     :user_id
   end
+
+  def reporting_events
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range)
+  end
+
+  def prepare_report
+    account.account_users.each_with_object([]) do |account_user, arr|
+      arr << {
+        id: account_user.user_id,
+        conversations_count: @grouped_conversations_count[account_user.user_id],
+        avg_resolution_time: @grouped_avg_resolution_time[account_user.user_id],
+        avg_first_response_time: @grouped_avg_first_response_time[account_user.user_id],
+        avg_reply_time: @grouped_avg_reply_time[account_user.user_id]
+      }
+    end
+  end
+
+  def average_value_key
+    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  end
 end

app/builders/v2/reports/base_summary_builder.rb

@@ -1,50 +1,17 @@
 class V2::Reports::BaseSummaryBuilder
   include DateRangeHelper
 
-  def build
-    load_data
-    prepare_report
-  end
-
   private
 
-  def load_data
-    @conversations_count = fetch_conversations_count
-    @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
-    @reporting_events ||= account.reporting_events.where(created_at: range)
-  end
-
-  def fetch_conversations_count
-    # 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
 
-  def prepare_report
-    # 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
+    params[:business_hours].present? ? :value_in_business_hours : :value
   end
 end

app/builders/v2/reports/inbox_summary_builder.rb

@@ -1,50 +0,0 @@
-class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
-  pattr_initialize [:account!, :params!]
-
-  def build
-    load_data
-    prepare_report
-  end
-
-  private
-
-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
-
-  def load_data
-    @conversations_count = fetch_conversations_count
-    @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
-    account.conversations.where(created_at: range).group(group_by_key).count
-  end
-
-  def prepare_report
-    account.inboxes.map do |inbox|
-      build_inbox_stats(inbox)
-    end
-  end
-
-  def build_inbox_stats(inbox)
-    {
-      id: inbox.id,
-      conversations_count: conversations_count[inbox.id] || 0,
-      resolved_conversations_count: resolved_count[inbox.id] || 0,
-      avg_resolution_time: avg_resolution_time[inbox.id],
-      avg_first_response_time: avg_first_response_time[inbox.id],
-      avg_reply_time: avg_reply_time[inbox.id]
-    }
-  end
-
-  def group_by_key
-    :inbox_id
-  end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
-  end
-end

app/builders/v2/reports/team_summary_builder.rb

@@ -1,37 +1,49 @@
 class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
   pattr_initialize [:account!, :params!]
 
+  def build
+    set_grouped_conversations_count
+    set_grouped_avg_reply_time
+    set_grouped_avg_first_response_time
+    set_grouped_avg_resolution_time
+    prepare_report
+  end
+
   private
 
-  attr_reader :conversations_count, :resolved_count,
-              :avg_resolution_time, :avg_first_response_time, :avg_reply_time
+  def set_grouped_conversations_count
+    @grouped_conversations_count = Current.account.conversations.where(created_at: range).group('team_id').count
+  end
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(:team_id).count
+  def set_grouped_avg_resolution_time
+    @grouped_avg_resolution_time = get_grouped_average(reporting_events.where(name: 'conversation_resolved'))
+  end
+
+  def set_grouped_avg_first_response_time
+    @grouped_avg_first_response_time = get_grouped_average(reporting_events.where(name: 'first_response'))
+  end
+
+  def set_grouped_avg_reply_time
+    @grouped_avg_reply_time = get_grouped_average(reporting_events.where(name: 'reply_time'))
   end
 
   def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
-  end
-
-  def prepare_report
-    account.teams.map do |team|
-      build_team_stats(team)
-    end
-  end
-
-  def build_team_stats(team)
-    {
-      id: team.id,
-      conversations_count: conversations_count[team.id] || 0,
-      resolved_conversations_count: resolved_count[team.id] || 0,
-      avg_resolution_time: avg_resolution_time[team.id],
-      avg_first_response_time: avg_first_response_time[team.id],
-      avg_reply_time: avg_reply_time[team.id]
-    }
+    @reporting_events ||= Current.account.reporting_events.where(created_at: range).joins(:conversation)
   end
 
   def group_by_key
     'conversations.team_id'
   end
+
+  def prepare_report
+    account.teams.each_with_object([]) do |team, arr|
+      arr << {
+        id: team.id,
+        conversations_count: @grouped_conversations_count[team.id],
+        avg_resolution_time: @grouped_avg_resolution_time[team.id],
+        avg_first_response_time: @grouped_avg_first_response_time[team.id],
+        avg_reply_time: @grouped_avg_reply_time[team.id]
+      }
+    end
+  end
 end

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

@@ -28,7 +28,7 @@ class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::B
   end
 
   def object_scope
-    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
+    scope.reporting_events.where(name: event_name, created_at: range)
   end
 
   def reporting_events

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

@@ -68,7 +68,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     @contacts = fetch_contacts(contacts)
   rescue CustomExceptions::CustomFilter::InvalidAttribute,
          CustomExceptions::CustomFilter::InvalidOperator,
-         CustomExceptions::CustomFilter::InvalidQueryOperator,
          CustomExceptions::CustomFilter::InvalidValue => e
     render_could_not_create_error(e.message)
   end

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

@@ -46,7 +46,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversations_count = result[:count]
   rescue CustomExceptions::CustomFilter::InvalidAttribute,
          CustomExceptions::CustomFilter::InvalidOperator,
-         CustomExceptions::CustomFilter::InvalidQueryOperator,
          CustomExceptions::CustomFilter::InvalidValue => e
     render_could_not_create_error(e.message)
   end

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

@@ -0,0 +1,78 @@
+class Api::V1::Accounts::Integrations::CaptainController < Api::V1::Accounts::BaseController
+  before_action :hook
+
+  def proxy
+    request_url = build_request_url(request_path)
+    response = HTTParty.send(request_method, request_url, body: permitted_params[:body].to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
+  def copilot
+    request_url = build_request_url(build_request_path("/assistants/#{hook.settings['assistant_id']}/copilot"))
+    params = {
+      previous_messages: copilot_params[:previous_messages],
+      conversation_history: conversation_history,
+      message: copilot_params[:message]
+    }
+    response = HTTParty.send(:post, request_url, body: params.to_json, headers: headers)
+    render plain: response.body, status: response.code
+  end
+
+  private
+
+  def headers
+    {
+      'X-User-Email' => hook.settings['account_email'],
+      'X-User-Token' => hook.settings['access_token'],
+      'Content-Type' => 'application/json',
+      'Accept' => '*/*'
+    }
+  end
+
+  def build_request_path(route)
+    "api/accounts/#{hook.settings['account_id']}#{route}"
+  end
+
+  def request_path
+    request_route = with_leading_hash_on_route(params[:route])
+
+    return 'api/sessions/profile' if request_route == '/sessions/profile'
+
+    build_request_path(request_route)
+  end
+
+  def build_request_url(request_path)
+    base_url = InstallationConfig.find_by(name: 'CAPTAIN_API_URL').value
+    URI.join(base_url, request_path).to_s
+  end
+
+  def hook
+    @hook ||= Current.account.hooks.find_by!(app_id: 'captain')
+  end
+
+  def request_method
+    method = permitted_params[:method].downcase
+    raise 'Invalid or missing HTTP method' unless %w[get post put patch delete options head].include?(method)
+
+    method
+  end
+
+  def with_leading_hash_on_route(request_route)
+    return '' if request_route.blank?
+
+    request_route.start_with?('/') ? request_route : "/#{request_route}"
+  end
+
+  def conversation_history
+    conversation = Current.account.conversations.find_by!(display_id: copilot_params[:conversation_id])
+    conversation.to_llm_text
+  end
+
+  def copilot_params
+    params.permit(:previous_messages, :conversation_id, :message)
+  end
+
+  def permitted_params
+    params.permit(:method, :route, body: {})
+  end
+end

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

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
+  before_action :prepare_builder_params, only: [:agent, :team]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -10,10 +10,6 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::TeamSummaryBuilder)
   end
 
-  def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
-  end
-
   private
 
   def check_authorization
@@ -30,7 +26,8 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
 
   def render_report_with(builder_class)
     builder = builder_class.new(account: Current.account, params: @builder_params)
-    render json: builder.build
+    data = builder.build
+    render json: data
   end
 
   def permitted_params

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

@@ -7,10 +7,9 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def index
     @articles = @portal.articles.published
-    @articles_count = @articles.count
     search_articles
     order_by_sort_param
-    @articles = @articles.page(list_params[:page]) if list_params[:page].present?
+    @articles.page(list_params[:page]) if list_params[:page].present?
   end
 
   def show; end
@@ -45,7 +44,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
   end
 
   def list_params
-    params.permit(:query, :locale, :sort, :status, :page)
+    params.permit(:query, :locale, :sort, :status)
   end
 
   def permitted_params

app/dispatchers/async_dispatcher.rb

@@ -22,5 +22,3 @@ class AsyncDispatcher < BaseDispatcher
     ]
   end
 end
-
-AsyncDispatcher.prepend_mod_with('AsyncDispatcher')

app/fields/enterprise/account_limits_field.rb

@@ -2,6 +2,6 @@ require 'administrate/field/base'
 
 class Enterprise::AccountLimitsField < Administrate::Field::Base
   def to_s
-    data.present? ? data.to_json : { agents: nil, inboxes: nil, captain_responses: nil, captain_documents: nil }.to_json
+    data.present? ? data.to_json : { agents: nil, inboxes: nil }.to_json
   end
 end

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

@@ -1,70 +1,58 @@
 module Api::V2::Accounts::ReportsHelper
   def generate_agents_report
-    reports = V2::Reports::AgentSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :agent)
-    ).build
-
     Current.account.users.map do |agent|
-      report = reports.find { |r| r[:id] == agent.id }
-      [agent.name] + generate_readable_report_metrics(report)
+      agent_report = report_builder({ type: :agent, id: agent.id }).summary
+      [agent.name] + generate_readable_report_metrics(agent_report)
     end
   end
 
   def generate_inboxes_report
-    reports = V2::Reports::InboxSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :inbox)
-    ).build
-
     Current.account.inboxes.map do |inbox|
-      report = reports.find { |r| r[:id] == inbox.id }
-      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(report)
+      inbox_report = generate_report({ type: :inbox, id: inbox.id })
+      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(inbox_report)
     end
   end
 
   def generate_teams_report
-    reports = V2::Reports::TeamSummaryBuilder.new(
-      account: Current.account,
-      params: build_params(type: :team)
-    ).build
-
     Current.account.teams.map do |team|
-      report = reports.find { |r| r[:id] == team.id }
-      [team.name] + generate_readable_report_metrics(report)
+      team_report = report_builder({ type: :team, id: team.id }).summary
+      [team.name] + generate_readable_report_metrics(team_report)
     end
   end
 
   def generate_labels_report
     Current.account.labels.map do |label|
-      label_report = report_builder({ type: :label, id: label.id }).short_summary
+      label_report = generate_report({ type: :label, id: label.id })
       [label.title] + generate_readable_report_metrics(label_report)
     end
   end
 
-  private
-
-  def build_params(base_params)
-    base_params.merge(
-      {
-        since: params[:since],
-        until: params[:until],
-        business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
-      }
+  def report_builder(report_params)
+    V2::ReportBuilder.new(
+      Current.account,
+      report_params.merge(
+        {
+          since: params[:since],
+          until: params[:until],
+          business_hours: ActiveModel::Type::Boolean.new.cast(params[:business_hours])
+        }
+      )
     )
   end
 
-  def report_builder(report_params)
-    V2::ReportBuilder.new(Current.account, build_params(report_params))
+  def generate_report(report_params)
+    report_builder(report_params).short_summary
   end
 
-  def generate_readable_report_metrics(report)
+  private
+
+  def generate_readable_report_metrics(report_metric)
     [
-      report[:conversations_count],
-      Reports::TimeFormatPresenter.new(report[:avg_first_response_time]).format,
-      Reports::TimeFormatPresenter.new(report[:avg_resolution_time]).format,
-      Reports::TimeFormatPresenter.new(report[:avg_reply_time]).format,
-      report[:resolved_conversations_count]
+      report_metric[:conversations_count],
+      Reports::TimeFormatPresenter.new(report_metric[:avg_first_response_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:avg_resolution_time]).format,
+      Reports::TimeFormatPresenter.new(report_metric[:reply_time]).format,
+      report_metric[:resolutions_count]
     ]
   end
 end

app/helpers/filter_helper.rb

@@ -81,12 +81,4 @@ module FilterHelper
   def default_filter(query_hash, filter_operator_value)
     "#{filter_config[:table_name]}.#{query_hash[:attribute_key]} #{filter_operator_value} #{query_hash[:query_operator]}"
   end
-
-  def validate_single_condition(condition)
-    return if condition['query_operator'].nil?
-    return if condition['query_operator'].empty?
-
-    operator = condition['query_operator'].upcase
-    raise CustomExceptions::CustomFilter::InvalidQueryOperator.new({}) unless %w[AND OR].include?(operator)
-  end
 end

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

@@ -1,19 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainAssistant extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-      },
-    });
-  }
-}
-
-export default new CaptainAssistant();

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

@@ -1,20 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainDocument extends ApiClient {
-  constructor() {
-    super('captain/documents', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey, assistantId } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-        assistant_id: assistantId,
-      },
-    });
-  }
-}
-
-export default new CaptainDocument();

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

@@ -1,26 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainInboxes extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId } = {}) {
-    return axios.get(`${this.url}/${assistantId}/inboxes`);
-  }
-
-  create(params = {}) {
-    const { assistantId, inboxId } = params;
-    return axios.post(`${this.url}/${assistantId}/inboxes`, {
-      inbox: { inbox_id: inboxId },
-    });
-  }
-
-  delete(params = {}) {
-    const { assistantId, inboxId } = params;
-    return axios.delete(`${this.url}/${assistantId}/inboxes/${inboxId}`);
-  }
-}
-
-export default new CaptainInboxes();

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

@@ -1,22 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainResponses extends ApiClient {
-  constructor() {
-    super('captain/assistant_responses', { accountScoped: true });
-  }
-
-  get({ page = 1, searchKey, assistantId, documentId, status } = {}) {
-    return axios.get(this.url, {
-      params: {
-        page,
-        searchKey,
-        assistant_id: assistantId,
-        document_id: documentId,
-        status,
-      },
-    });
-  }
-}
-
-export default new CaptainResponses();

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

@@ -133,10 +133,6 @@ class ConversationApi extends ApiClient {
   getAllAttachments(conversationId) {
     return axios.get(`${this.url}/${conversationId}/attachments`);
   }
-
-  requestCopilot(conversationId, body) {
-    return axios.post(`${this.url}/${conversationId}/copilot`, body);
-  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/integrations.js

@@ -32,6 +32,14 @@ class IntegrationsAPI extends ApiClient {
   deleteHook(hookId) {
     return axios.delete(`${this.baseUrl()}/integrations/hooks/${hookId}`);
   }
+
+  requestCaptain(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/proxy`, body);
+  }
+
+  requestCaptainCopilot(body) {
+    return axios.post(`${this.baseUrl()}/integrations/captain/copilot`, body);
+  }
 }
 
 export default new IntegrationsAPI();

app/javascript/dashboard/api/summaryReports.js

@@ -1,40 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class SummaryReportsAPI extends ApiClient {
-  constructor() {
-    super('summary_reports', { accountScoped: true, apiVersion: 'v2' });
-  }
-
-  getTeamReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/team`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-
-  getAgentReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/agent`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-
-  getInboxReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/inbox`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
-}
-
-export default new SummaryReportsAPI();

app/javascript/dashboard/assets/scss/_woot.scss

@@ -124,19 +124,6 @@
     --teal-11: 0 133 115;
     --teal-12: 13 61 56;
 
-    --gray-1: 252 252 252;
-    --gray-2: 249 249 249;
-    --gray-3: 240 240 240;
-    --gray-4: 232 232 232;
-    --gray-5: 224 224 224;
-    --gray-6: 217 217 217;
-    --gray-7: 206 206 206;
-    --gray-8: 187 187 187;
-    --gray-9: 141 141 141;
-    --gray-10: 131 131 131;
-    --gray-11: 100 100 100;
-    --gray-12: 32 32 32;
-
     --background-color: 253 253 253;
     --text-blue: 8 109 224;
     --border-container: 236 236 236;
@@ -226,19 +213,6 @@
     --teal-11: 11 216 182;
     --teal-12: 173 240 221;
 
-    --gray-1: 17 17 17;
-    --gray-2: 25 25 25;
-    --gray-3: 34 34 34;
-    --gray-4: 42 42 42;
-    --gray-5: 49 49 49;
-    --gray-6: 58 58 58;
-    --gray-7: 72 72 72;
-    --gray-8: 96 96 96;
-    --gray-9: 110 110 110;
-    --gray-10: 123 123 123;
-    --gray-11: 180 180 180;
-    --gray-12: 238 238 238;
-
     --background-color: 18 18 19;
     --border-strong: 52 52 52;
     --border-weak: 38 38 42;
@@ -258,7 +232,7 @@
     --black-alpha-2: 0, 0, 0, 0.2;
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 236, 236, 236, 0;
-    --white-alpha: 255, 255, 255, 0.1;
+    --white-alpha: 255, 255, 255, 0.8;
   }
   /* NEXT COLORS END */
 

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -1,7 +1,7 @@
 .dropdown-pane {
-  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
+  @apply border rounded-lg hidden relative invisible shadow-lg border-slate-25 dark:border-slate-700 box-content p-2 w-fit z-[9999];
 
   &.dropdown-pane--open {
-    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
+    @apply bg-white absolute dark:bg-slate-800 block visible;
   }
 }

app/javascript/dashboard/assets/scss/widgets/_buttons.scss

@@ -31,7 +31,7 @@ button {
 }
 
 .button {
-  @apply items-center bg-n-brand px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
+  @apply items-center bg-woot-500 dark:bg-woot-500 px-2.5 text-white dark:text-white inline-flex h-10 mb-0 gap-2 font-medium;
 
   .button__content {
     @apply w-full whitespace-nowrap overflow-hidden text-ellipsis;
@@ -42,10 +42,8 @@ button {
     }
   }
 
-  &:hover:not(.secondary):not(.success):not(.alert):not(.warning):not(
-      .clear
-    ):not(.smooth):not(.hollow) {
-    @apply bg-n-brand/80 dark:bg-n-brand/80;
+  &:hover {
+    @apply bg-woot-600 dark:bg-woot-600;
   }
 
   &:disabled,
@@ -54,23 +52,23 @@ button {
   }
 
   &.success {
-    @apply bg-n-teal-9 text-white dark:text-white;
+    @apply bg-[#44ce4b] dark:bg-[#44ce4b] text-white dark:text-white;
   }
 
   &.secondary {
-    @apply bg-n-solid-3 text-white dark:text-white;
+    @apply bg-slate-700 dark:bg-slate-600 text-white dark:text-white;
   }
 
   &.primary {
-    @apply bg-n-brand text-white dark:text-white;
+    @apply bg-woot-500 dark:bg-woot-500 text-white dark:text-white;
   }
 
   &.clear {
-    @apply text-n-blue-text dark:text-n-blue-text bg-transparent dark:bg-transparent;
+    @apply text-woot-500 dark:text-woot-500 bg-transparent dark:bg-transparent;
   }
 
   &.alert {
-    @apply bg-n-ruby-9 text-white dark:text-white;
+    @apply bg-red-500 dark:bg-red-500 text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -78,7 +76,7 @@ button {
   }
 
   &.warning {
-    @apply bg-n-amber-9 text-white dark:text-white;
+    @apply bg-[#ffc532] dark:bg-[#ffc532] text-white dark:text-white;
 
     &.clear {
       @apply bg-transparent dark:bg-transparent;
@@ -117,74 +115,114 @@ button {
   }
 
   &.hollow {
-    @apply border border-n-brand/40 bg-transparent text-n-blue-text hover:bg-n-brand/20;
+    @apply border border-woot-500 bg-transparent dark:bg-transparent dark:border-woot-500 text-woot-500 dark:text-woot-500 hover:bg-woot-50 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply text-n-slate-12 border-n-slate-5 hover:bg-n-slate-5;
+      @apply text-slate-700 border-slate-100 dark:border-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-700;
     }
 
     &.success {
-      @apply text-n-teal-9 border-n-teal-8 hover:bg-n-teal-5;
+      @apply text-green-700 dark:text-green-400 border-green-100 dark:border-green-600 hover:bg-green-50 dark:hover:bg-green-800;
     }
 
     &.alert {
-      @apply text-n-ruby-9 border-n-ruby-8 hover:bg-n-ruby-5;
+      @apply text-red-700 dark:text-red-400 border-red-100 dark:border-red-600 hover:bg-red-50 dark:hover:bg-red-800;
     }
 
     &.warning {
-      @apply text-n-amber-9 border-n-amber-8 hover:bg-n-amber-5;
+      @apply text-yellow-600 dark:text-yellow-600 border-yellow-600 dark:border-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-800;
+    }
+
+    &:hover {
+      @apply bg-woot-75 dark:bg-woot-800 border-slate-100 dark:border-woot-600 dark:text-woot-400;
+
+      &.secondary {
+        @apply border-slate-100 dark:border-slate-700 text-slate-800 dark:text-slate-100;
+      }
+
+      &.success {
+        @apply border-slate-100 dark:border-slate-700 text-green-800 dark:text-green-100;
+      }
+
+      &.alert {
+        @apply border-slate-100 dark:border-slate-700 text-red-700 dark:text-red-100;
+      }
+
+      &.warning {
+        @apply border-slate-100 dark:border-slate-700 text-yellow-700 dark:text-yellow-500;
+      }
     }
   }
 
   // Smooth style
   &.smooth {
-    @apply bg-n-brand/10 dark:bg-n-brand/30 text-n-blue-text hover:bg-n-brand/20 dark:hover:bg-n-brand/40;
+    @apply bg-woot-50 dark:bg-woot-800 text-woot-700 dark:text-woot-100 hover:text-woot-700 dark:hover:text-woot-700 hover:bg-woot-100 dark:hover:bg-woot-900;
 
     &.secondary {
-      @apply bg-n-slate-4 text-n-slate-11 hover:text-n-slate-11 hover:bg-n-slate-5;
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-700 dark:text-slate-100 hover:bg-slate-100 dark:hover:bg-slate-800;
     }
 
     &.success {
-      @apply bg-n-teal-4 text-n-teal-11 hover:text-n-teal-11 hover:bg-n-teal-5;
+      @apply bg-green-50 dark:bg-green-700 text-green-700 dark:text-green-100 hover:bg-green-100 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
     }
 
     &.alert {
-      @apply bg-n-ruby-4 text-n-ruby-11 hover:text-n-ruby-11 hover:bg-n-ruby-5;
+      @apply bg-red-50 dark:bg-red-700 dark:bg-opacity-50 text-red-700 dark:text-red-100 hover:bg-red-100 dark:hover:bg-red-800 dark:hover:bg-opacity-30;
     }
 
     &.warning {
-      @apply bg-n-amber-4 text-n-amber-11 hover:text-n-amber-11 hover:bg-n-amber-5;
+      @apply bg-yellow-100 dark:bg-yellow-100 text-yellow-700 dark:text-yellow-700 hover:bg-yellow-200 dark:hover:bg-yellow-200;
     }
   }
 
   &.clear {
-    @apply text-n-blue-text hover:bg-n-brand/10 dark:hover:bg-n-brand/30;
+    @apply text-woot-500 dark:text-woot-500;
 
     &.secondary {
-      @apply text-n-slate-12 hover:bg-n-slate-4;
+      @apply text-slate-700 dark:text-slate-100;
     }
 
     &.success {
-      @apply text-n-teal-10 hover:bg-n-teal-4;
+      @apply text-green-700 dark:text-green-100;
     }
 
     &.alert {
-      @apply text-n-ruby-11 hover:bg-n-ruby-4;
+      @apply text-red-700 dark:text-red-100;
     }
 
     &.warning {
-      @apply text-n-amber-11 hover:bg-n-amber-4;
+      @apply text-yellow-700 dark:text-yellow-600;
+    }
+
+    &:hover {
+      @apply hover:bg-woot-50 dark:hover:bg-woot-900/50 hover:text-woot-500 dark:hover:text-woot-100;
+
+      &.secondary {
+        @apply hover:bg-slate-50 dark:hover:bg-slate-700 hover:text-slate-800 dark:hover:text-slate-100;
+      }
+
+      &.success {
+        @apply hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-100;
+      }
+
+      &.alert {
+        @apply hover:bg-red-50 dark:hover:bg-red-800 hover:text-red-700 dark:hover:text-red-100;
+      }
+
+      &.warning {
+        @apply hover:bg-yellow-100 dark:hover:bg-yellow-800 hover:text-yellow-700 dark:hover:text-yellow-600;
+      }
     }
 
     &:active {
       &.secondary {
-        @apply active:bg-n-slate-3 dark:active:bg-n-slate-7;
+        @apply active:bg-slate-100 dark:active:bg-slate-900;
       }
     }
 
     &:focus {
       &.secondary {
-        @apply focus:bg-n-slate-4 dark:focus:bg-n-slate-6;
+        @apply focus:bg-slate-50 dark:focus:bg-slate-700;
       }
     }
   }

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -3,7 +3,7 @@
 }
 
 .tabs--container--with-border {
-  @apply border-b border-n-weak;
+  @apply border-b border-slate-50 dark:border-slate-800/50;
 }
 
 .tabs--container--compact.tab--chat-type {
@@ -42,7 +42,7 @@
   @apply flex-shrink-0 my-0 mx-2;
 
   .badge {
-    @apply bg-n-alpha-black2 dark:bg-n-solid-3 rounded-md text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+    @apply bg-slate-50 dark:bg-slate-800 rounded-md text-slate-600 dark:text-slate-100 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
   }
 
   &:first-child {
@@ -56,22 +56,22 @@
   &:hover,
   &:focus {
     a {
-      @apply text-n-slate-12;
+      @apply text-slate-800 dark:text-slate-100;
     }
   }
 
   a {
-    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-11 text-sm top-[1px] relative;
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-slate-500 dark:text-slate-200 text-sm top-[1px] relative;
     transition: border-color 0.15s $swift-ease-out-function;
   }
 
   &.is-active {
     a {
-      @apply border-b border-n-brand text-n-blue-text;
+      @apply border-b border-woot-500 text-woot-500 dark:text-woot-500;
     }
 
     .badge {
-      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
+      @apply bg-woot-50 dark:bg-woot-500 text-woot-500 dark:text-woot-50 dark:bg-opacity-40;
     }
   }
 }

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -98,7 +98,7 @@ const inboxIcon = computed(() => {
         </span>
       </div>
       <div
-        v-dompurify-html="formatMessage(message, false, false, false)"
+        v-dompurify-html="formatMessage(message)"
         class="text-sm text-n-slate-11 line-clamp-1 [&>p]:mb-0 h-6"
       />
       <div class="flex items-center w-full h-6 gap-2 overflow-hidden">

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

@@ -18,11 +18,6 @@ const route = useRoute();
 
 const showDropdown = ref(false);
 
-// Store the currently hovered label's ID
-// Using JS state management instead of CSS :hover / group hover
-// This will solve the flickering issue when hovering over the last label item
-const hoveredLabel = ref(null);
-
 const allLabels = useMapGetter('labels/getLabels');
 const contactLabels = useMapGetter('contactLabels/getContactLabels');
 
@@ -42,7 +37,7 @@ const labelMenuItems = computed(() => {
       isSelected: savedLabels.value.some(
         savedLabel => savedLabel.id === label.id
       ),
-      action: 'contactLabel',
+      action: 'addLabel',
     }))
     .toSorted((a, b) => Number(a.isSelected) - Number(b.isSelected));
 });
@@ -54,7 +49,7 @@ const fetchLabels = async contactId => {
   store.dispatch('contactLabels/get', contactId);
 };
 
-const handleLabelAction = async ({ value }) => {
+const handleLabelAction = async ({ action, value }) => {
   try {
     // Get current label titles
     const currentLabels = savedLabels.value.map(label => label.title);
@@ -64,15 +59,16 @@ const handleLabelAction = async ({ value }) => {
     if (!selectedLabel) return;
 
     let updatedLabels;
-
-    // If label is already selected, remove it (toggle behavior)
-    if (currentLabels.includes(selectedLabel.title)) {
-      updatedLabels = currentLabels.filter(
-        labelTitle => labelTitle !== selectedLabel.title
-      );
-    } else {
-      // Add the new label
-      updatedLabels = [...currentLabels, selectedLabel.title];
+    if (action === 'addLabel') {
+      // If label is already selected, remove it (toggle behavior)
+      if (currentLabels.includes(selectedLabel.title)) {
+        updatedLabels = currentLabels.filter(
+          labelTitle => labelTitle !== selectedLabel.title
+        );
+      } else {
+        // Add the new label
+        updatedLabels = [...currentLabels, selectedLabel.title];
+      }
     }
 
     await store.dispatch('contactLabels/update', {
@@ -86,10 +82,6 @@ const handleLabelAction = async ({ value }) => {
   }
 };
 
-const handleRemoveLabel = labelId => {
-  return handleLabelAction({ value: labelId });
-};
-
 watch(
   () => props.contactId,
   (newVal, oldVal) => {
@@ -103,31 +95,11 @@ onMounted(() => {
     fetchLabels(route.params.contactId);
   }
 });
-
-const handleMouseLeave = () => {
-  // Reset hover state when mouse leaves the container
-  // This ensures all labels return to their default state
-  hoveredLabel.value = null;
-};
-
-const handleLabelHover = labelId => {
-  // Added this to prevent flickering on when showing remove button on hover
-  // If the label item is at end of the line, it will show the remove button
-  // when hovering over the last label item
-  hoveredLabel.value = labelId;
-};
 </script>
 
 <template>
-  <div class="flex flex-wrap items-center gap-2" @mouseleave="handleMouseLeave">
-    <LabelItem
-      v-for="label in savedLabels"
-      :key="label.id"
-      :label="label"
-      :is-hovered="hoveredLabel === label.id"
-      @remove="handleRemoveLabel"
-      @hover="handleLabelHover(label.id)"
-    />
+  <div class="flex flex-wrap items-center gap-2">
+    <LabelItem v-for="label in savedLabels" :key="label.id" :label="label" />
     <AddLabel
       :label-menu-items="labelMenuItems"
       @update-label="handleLabelAction"

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { required, email } from '@vuelidate/validators';
+import { required, email, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
@@ -35,7 +35,7 @@ const FORM_CONFIG = {
   EMAIL_ADDRESS: { field: 'email' },
   PHONE_NUMBER: { field: 'phoneNumber' },
   CITY: { field: 'additionalAttributes.city' },
-  COUNTRY: { field: 'additionalAttributes.countryCode' },
+  COUNTRY: { field: 'additionalAttributes.country' },
   BIO: { field: 'additionalAttributes.description' },
   COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };
@@ -74,7 +74,7 @@ const defaultState = {
 const state = reactive({ ...defaultState });
 
 const validationRules = {
-  firstName: { required },
+  firstName: { required, minLength: minLength(2) },
   email: { email },
 };
 
@@ -94,7 +94,7 @@ const prepareStateBasedOnProps = () => {
     phoneNumber,
     additionalAttributes = {},
   } = props.contactData || {};
-  const { firstName, lastName } = splitName(name || '');
+  const { firstName, lastName } = splitName(name);
   const {
     description = '',
     companyName = '',
@@ -123,7 +123,7 @@ const prepareStateBasedOnProps = () => {
 };
 
 const countryOptions = computed(() =>
-  countries.map(({ name, id }) => ({ label: name, value: id }))
+  countries.map(({ name }) => ({ label: name, value: name }))
 );
 
 const editDetailsForm = computed(() =>
@@ -205,8 +205,8 @@ const getMessageType = key => {
 };
 
 const handleCountrySelection = value => {
-  const selectedCountry = countries.find(option => option.id === value);
-  state.additionalAttributes.country = selectedCountry?.name || '';
+  const selectedCountry = countries.find(option => option.name === value);
+  state.additionalAttributes.countryCode = selectedCountry?.id || '';
   emit('update', state);
 };
 
@@ -242,7 +242,7 @@ defineExpose({
         <template v-for="item in editDetailsForm" :key="item.key">
           <ComboBox
             v-if="item.key === 'COUNTRY'"
-            v-model="state.additionalAttributes.countryCode"
+            v-model="state.additionalAttributes.country"
             :options="countryOptions"
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"

app/javascript/dashboard/components-next/Contacts/ContactsForm/CreateNewContactDialog.vue

@@ -59,7 +59,6 @@ defineExpose({ dialogRef, contactsFormRef, onSuccess });
             t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.SAVE_CONTACT')
           "
           color="blue"
-          :disabled="contactsFormRef?.isFormInvalid"
           :is-loading="isCreatingContact"
           @click="handleDialogConfirm"
         />

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -2,7 +2,6 @@
 import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 
 import ContactCustomAttributeItem from 'dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributeItem.vue';
 
@@ -15,8 +14,6 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const { uiSettings } = useUISettings();
-
 const searchQuery = ref('');
 
 const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
@@ -49,49 +46,20 @@ const processContactAttributes = (
   }, []);
 };
 
-const sortAttributesOrder = computed(
-  () =>
-    uiSettings.value.conversation_elements_order_conversation_contact_panel ??
-    []
-);
-
-const sortByUISettings = attributes => {
-  // Get saved order from UI settings
-  // Same as conversation panel contact attribute order
-  const order = sortAttributesOrder.value;
-
-  // If no order defined, return original array
-  if (!order?.length) return attributes;
-
-  const orderMap = new Map(order.map((key, index) => [key, index]));
-
-  // Sort attributes based on their position in saved order
-  return [...attributes].sort((a, b) => {
-    // Get positions, use Infinity if not found in order (pushes to end)
-    const aPos = orderMap.get(a.attributeKey) ?? Infinity;
-    const bPos = orderMap.get(b.attributeKey) ?? Infinity;
-    return aPos - bPos;
-  });
-};
-
 const usedAttributes = computed(() => {
-  const attributes = processContactAttributes(
+  return processContactAttributes(
     contactAttributes.value,
     props.selectedContact?.customAttributes,
     (key, custom) => key in custom
   );
-
-  return sortByUISettings(attributes);
 });
 
 const unusedAttributes = computed(() => {
-  const attributes = processContactAttributes(
+  return processContactAttributes(
     contactAttributes.value,
     props.selectedContact?.customAttributes,
     (key, custom) => !(key in custom)
   );
-
-  return sortByUISettings(attributes);
 });
 
 const filteredUnusedAttributes = computed(() => {

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -29,7 +29,7 @@ const getWrittenBy = note => {
   const isCurrentUser = note?.user?.id === currentUser.value.id;
   return isCurrentUser
     ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
-    : note?.user?.name || 'Bot';
+    : note.user.name;
 };
 
 const onAdd = content => {

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue

@@ -33,8 +33,8 @@ const handleDelete = () => {
     <div class="flex items-center justify-between">
       <div class="flex items-center gap-1.5 py-2.5 min-w-0">
         <Avatar
-          :name="note?.user?.name || 'Bot'"
-          :src="note?.user?.thumbnail || '/assets/images/chatwoot_bot.png'"
+          :name="note.user.name"
+          :src="note.user.thumbnail"
           :size="16"
           rounded-full
         />

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

@@ -21,7 +21,7 @@ const lastNonActivityMessageContent = computed(() => {
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
   return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
   );
 });
 

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
@@ -20,8 +20,6 @@ const props = defineProps({
 
 const { t } = useI18n();
 
-const slaCardLabelRef = ref(null);
-
 const { getPlainText } = useMessageFormatter();
 
 const lastNonActivityMessageContent = computed(() => {
@@ -29,7 +27,7 @@ const lastNonActivityMessageContent = computed(() => {
     props.conversation;
   const { email: { subject } = {} } = customAttributes;
   return getPlainText(
-    subject || lastNonActivityMessage?.content || t('CHAT_LIST.NO_CONTENT')
+    subject || lastNonActivityMessage.content || t('CHAT_LIST.NO_CONTENT')
   );
 });
 
@@ -47,15 +45,7 @@ const unreadMessagesCount = computed(() => {
   return unreadCount;
 });
 
-const hasSlaThreshold = computed(() => {
-  return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
-  );
-});
-
-defineExpose({
-  hasSlaThreshold,
-});
+const hasSlaThreshold = computed(() => props.conversation?.slaPolicyId);
 </script>
 
 <template>
@@ -83,11 +73,7 @@ defineExpose({
           : 'grid-cols-[1fr_20px]'
       "
     >
-      <SLACardLabel
-        v-show="hasSlaThreshold"
-        ref="slaCardLabelRef"
-        :conversation="conversation"
-      />
+      <SLACardLabel v-if="hasSlaThreshold" :conversation="conversation" />
       <div v-if="hasSlaThreshold" class="w-px h-3 bg-n-slate-4" />
       <div class="overflow-hidden">
         <CardLabels

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { getInboxIconByType } from 'dashboard/helper/inbox';
 import { useRouter, useRoute } from 'vue-router';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper.js';
@@ -33,8 +33,6 @@ const props = defineProps({
 const router = useRouter();
 const route = useRoute();
 
-const cardMessagePreviewWithMetaRef = ref(null);
-
 const currentContact = computed(() => props.contact);
 
 const currentContactName = computed(() => currentContact.value?.name);
@@ -58,10 +56,8 @@ const lastActivityAt = computed(() => {
 });
 
 const showMessagePreviewWithoutMeta = computed(() => {
-  const { labels = [] } = props.conversation;
-  return (
-    !cardMessagePreviewWithMetaRef.value?.hasSlaThreshold && labels.length === 0
-  );
+  const { slaPolicyId, labels = [] } = props.conversation;
+  return !slaPolicyId && labels.length === 0;
 });
 
 const onCardClick = e => {
@@ -86,7 +82,6 @@ const onCardClick = e => {
 
 <template>
   <div
-    role="button"
     class="flex w-full gap-3 px-3 py-4 transition-all duration-300 ease-in-out cursor-pointer"
     @click="onCardClick"
   >
@@ -97,7 +92,7 @@ const onCardClick = e => {
       :status="currentContactStatus"
       rounded-full
     />
-    <div class="flex flex-col w-full gap-1 min-w-0">
+    <div class="flex flex-col w-full gap-1">
       <div class="flex items-center justify-between h-6 gap-2">
         <h4 class="text-base font-medium truncate text-n-slate-12">
           {{ currentContactName }}
@@ -119,12 +114,11 @@ const onCardClick = e => {
         </div>
       </div>
       <CardMessagePreview
-        v-show="showMessagePreviewWithoutMeta"
+        v-if="showMessagePreviewWithoutMeta"
         :conversation="conversation"
       />
       <CardMessagePreviewWithMeta
-        v-show="!showMessagePreviewWithoutMeta"
-        ref="cardMessagePreviewWithMetaRef"
+        v-else
         :conversation="conversation"
         :account-labels="accountLabels"
       />

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

@@ -31,17 +31,13 @@ const convertObjectCamelCaseToSnakeCase = object => {
 const appliedSLA = computed(() => props.conversation?.appliedSla);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
-const hasSlaThreshold = computed(() => {
-  return slaStatus.value?.threshold && appliedSLA.value?.id;
-});
-
 const slaStatusText = computed(() => {
   return slaStatus.value?.type?.toUpperCase();
 });
 
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
+    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value),
     chat: props.conversation,
   });
 };
@@ -65,21 +61,6 @@ onUnmounted(() => {
 });
 
 watch(() => props.conversation, updateSlaStatus);
-
-// This expose is to provide context to the parent component, so that it can decided weather
-// a new row has to be added to the conversation card or not
-// SLACardLabel > CardMessagePreviewWithMeta > ConversationCard
-//
-// We need to do this becuase each SLA card has it's own SLA timer
-// and it's just convenient to have this logic in the SLACardLabel component
-// However this is a bit hacky, and we should change this in the future
-//
-// TODO: A better implementation would be to have the timer as a shared composable, just like the provider pattern
-// we use across the next components. Have the calculation be done on the top ConversationCard component
-// and then the value be injected to the SLACardLabel component
-defineExpose({
-  hasSlaThreshold,
-});
 </script>
 
 <template>

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

@@ -41,8 +41,6 @@ const props = defineProps({
     default: 'info',
     validator: value => ['info', 'error', 'success'].includes(value),
   },
-  enableVariables: { type: Boolean, default: false },
-  enableCannedResponses: { type: Boolean, default: true },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -118,8 +116,6 @@ watch(
         :placeholder="placeholder"
         :focus-on-mount="focusOnMount"
         :disabled="disabled"
-        :enable-variables="enableVariables"
-        :enable-canned-responses="enableCannedResponses"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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

@@ -1,6 +1,4 @@
 <script setup>
-import Policy from 'dashboard/components/policy.vue';
-
 defineProps({
   title: {
     type: String,
@@ -10,10 +8,6 @@ defineProps({
     type: String,
     required: true,
   },
-  actionPerms: {
-    type: Array,
-    default: () => [],
-  },
 });
 </script>
 
@@ -22,7 +16,7 @@ defineProps({
     class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
   >
     <div
-      class="relative w-full max-w-[960px] mx-auto overflow-hidden h-full max-h-[448px]"
+      class="relative w-full max-w-[940px] mx-auto overflow-hidden h-full max-h-[448px]"
     >
       <div
         class="w-full h-full space-y-4 overflow-y-hidden opacity-50 pointer-events-none"
@@ -45,9 +39,7 @@ defineProps({
               {{ subtitle }}
             </p>
           </div>
-          <Policy :permissions="actionPerms">
-            <slot name="actions" />
-          </Policy>
+          <slot name="actions" />
         </div>
       </div>
     </div>

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

@@ -60,7 +60,7 @@ const togglePortalSwitcher = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto">
         <div
           v-if="showHeaderTitle"
           class="flex items-center justify-start h-20 gap-2"
@@ -96,7 +96,7 @@ const togglePortalSwitcher = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-3 lg:px-6">
+      <div class="w-full max-w-[960px] mx-auto py-3">
         <slot name="content" />
       </div>
     </main>

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

@@ -36,8 +36,6 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
-const isNewArticle = computed(() => !props.article?.id);
-
 const saveAndSync = value => {
   emit('saveArticle', value);
 };
@@ -54,32 +52,21 @@ const quickSave = debounce(
 // 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
 // so we can save the data to the backend and retrieve the updated data
 // this will update the local state with response data
-// Only use to save for existing articles
 const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
 
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
-
-const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
-};
-
 const articleTitle = computed({
   get: () => props.article.title,
   set: value => {
-    handleSave({ title: value });
+    quickSave({ title: value });
+    saveAndSyncDebounced({ title: value });
   },
 });
 
 const articleContent = computed({
   get: () => props.article.content,
   set: content => {
-    handleSave({ content });
+    quickSave({ content });
+    saveAndSyncDebounced({ content });
   },
 });
 

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

@@ -200,8 +200,7 @@ onMounted(() => {
         <DropdownMenu
           v-if="openAgentsList && hasAgentList"
           :menu-items="agentList"
-          show-search
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
           @action="handleArticleAction"
         />
       </OnClickOutside>
@@ -232,8 +231,7 @@ onMounted(() => {
         <DropdownMenu
           v-if="openCategoryList && hasCategoryMenuItems"
           :menu-items="categoryList"
-          show-search
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-52"
           @action="handleArticleAction"
         />
       </OnClickOutside>

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

@@ -3,7 +3,6 @@ import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { OnClickOutside } from '@vueuse/components';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import {
   ARTICLE_TABS,
   CATEGORY_ALL,
@@ -38,7 +37,6 @@ const emit = defineEmits([
 
 const route = useRoute();
 const { t } = useI18n();
-const { updateUISettings } = useUISettings();
 
 const isCategoryMenuOpen = ref(false);
 const isLocaleMenuOpen = ref(false);
@@ -113,12 +111,13 @@ const localeMenuItems = computed(() => {
   }));
 });
 
+const hasMoreThanOneLocaleMenuItems = computed(() => {
+  return localeMenuItems.value?.length > 1;
+});
+
 const handleLocaleAction = ({ value }) => {
   emit('localeChange', value);
   isLocaleMenuOpen.value = false;
-  updateUISettings({
-    last_active_locale_code: value,
-  });
 };
 
 const handleCategoryAction = ({ value }) => {
@@ -144,7 +143,7 @@ const handleTabChange = value => {
     />
     <div class="flex items-start justify-between w-full gap-2">
       <div class="flex items-center gap-2">
-        <div class="relative group">
+        <div v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
           <OnClickOutside @trigger="isLocaleMenuOpen = false">
             <Button
               :label="activeLocaleName"
@@ -158,7 +157,6 @@ const handleTabChange = value => {
             <DropdownMenu
               v-if="isLocaleMenuOpen"
               :menu-items="localeMenuItems"
-              show-search
               class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
               @action="handleLocaleAction"
             />
@@ -179,7 +177,6 @@ const handleTabChange = value => {
             <DropdownMenu
               v-if="isCategoryMenuOpen"
               :menu-items="categoryMenuItems"
-              show-search
               class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
               @action="handleCategoryAction"
             />

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

@@ -99,19 +99,11 @@ const getStatusMessage = (status, isSuccess) => {
     : '';
 };
 
-const updatePortalMeta = () => {
+const updateMeta = () => {
   const { portalSlug, locale } = route.params;
   return store.dispatch('portals/show', { portalSlug, locale });
 };
 
-const updateArticlesMeta = () => {
-  const { portalSlug, locale } = route.params;
-  return store.dispatch('articles/updateArticleMeta', {
-    portalSlug,
-    locale,
-  });
-};
-
 const handleArticleAction = async (action, { status, id }) => {
   const { portalSlug } = route.params;
   try {
@@ -135,8 +127,7 @@ const handleArticleAction = async (action, { status, id }) => {
         useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
       }
     }
-    await updateArticlesMeta();
-    await updatePortalMeta();
+    await updateMeta();
   } catch (error) {
     const errorMessage =
       error?.message ||

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

@@ -91,7 +91,10 @@ const articlesCount = computed(() => {
 });
 
 const showArticleHeaderControls = computed(
-  () => !props.isCategoryArticles && !isSwitchingPortal.value
+  () =>
+    !hasNoArticlesInPortal.value &&
+    !props.isCategoryArticles &&
+    !isSwitchingPortal.value
 );
 
 const showCategoryHeaderControls = computed(

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

@@ -141,7 +141,6 @@ const handleBreadcrumbClick = () => {
           <DropdownMenu
             v-if="isLocaleMenuOpen"
             :menu-items="localeMenuItems"
-            show-search
             class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
             @action="handleLocaleAction"
           />

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

@@ -49,11 +49,8 @@ const onCreate = async () => {
 
   try {
     await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: {
-        allowed_locales: updatedLocales,
-        default_locale: props.portal?.meta?.default_locale,
-      },
+      portalSlug: props.portal.slug,
+      config: { allowed_locales: updatedLocales },
     });
 
     useTrack(PORTALS_EVENTS.CREATE_LOCALE, {

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

@@ -2,7 +2,6 @@
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 import { PORTALS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -21,7 +20,6 @@ const props = defineProps({
 const store = useStore();
 const { t } = useI18n();
 const route = useRoute();
-const { uiSettings, updateUISettings } = useUISettings();
 
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
@@ -58,40 +56,26 @@ const changeDefaultLocale = ({ localeCode }) => {
     defaultLocale: localeCode,
     messageKey: 'CHANGE_DEFAULT_LOCALE',
   });
+
   useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
     newLocale: localeCode,
     from: route.name,
   });
 };
 
-const updateLastActivePortal = async localeCode => {
-  const { last_active_locale_code: lastActiveLocaleCode } =
-    uiSettings.value || {};
-  const defaultLocale = props.portal.meta.default_locale;
-
-  // Update UI settings only if deleting locale matches the last active locale in UI settings.
-  if (localeCode === lastActiveLocaleCode) {
-    await updateUISettings({
-      last_active_locale_code: defaultLocale,
-    });
-  }
-};
-
-const deletePortalLocale = async ({ localeCode }) => {
+const deletePortalLocale = ({ localeCode }) => {
   const updatedLocales = props.locales
     .filter(locale => locale.code !== localeCode)
     .map(locale => locale.code);
 
   const defaultLocale = props.portal.meta.default_locale;
 
-  await updatePortalLocales({
+  updatePortalLocales({
     newAllowedLocales: updatedLocales,
     defaultLocale,
     messageKey: 'DELETE_LOCALE',
   });
 
-  await updateLastActivePortal(localeCode);
-
   useTrack(PORTALS_EVENTS.DELETE_LOCALE, {
     deletedLocale: localeCode,
     from: route.name,

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -1,248 +0,0 @@
-<script setup>
-import { computed, ref, onBeforeMount } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { getInboxIconByType } from 'dashboard/helper/inbox';
-import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-import {
-  snoozedReopenTimeToTimestamp,
-  shortenSnoozeTime,
-} from 'dashboard/helper/snoozeHelpers';
-import { NOTIFICATION_TYPES_MAPPING } from 'dashboard/routes/dashboard/inbox/helpers/InboxViewHelpers';
-
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
-import SLACardLabel from 'dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue';
-import InboxContextMenu from 'dashboard/routes/dashboard/inbox/components/InboxContextMenu.vue';
-
-const props = defineProps({
-  inboxItem: { type: Object, default: () => ({}) },
-  stateInbox: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits([
-  'click',
-  'contextMenuOpen',
-  'contextMenuClose',
-  'markNotificationAsRead',
-  'markNotificationAsUnRead',
-  'deleteNotification',
-]);
-
-const { t } = useI18n();
-
-const isContextMenuOpen = ref(false);
-const contextMenuPosition = ref({ x: null, y: null });
-const slaCardLabel = ref(null);
-
-const getMessageClasses = {
-  emphasis: 'text-sm font-medium text-n-slate-11',
-  emphasisUnread: 'text-sm font-medium text-n-slate-12',
-  normal: 'text-sm font-normal text-n-slate-11',
-  normalUnread: 'text-sm text-n-slate-12',
-};
-
-const primaryActor = computed(() => props.inboxItem?.primaryActor);
-const meta = computed(() => primaryActor.value?.meta);
-const assigneeMeta = computed(() => meta.value?.sender);
-const isUnread = computed(() => !props.inboxItem?.readAt);
-const inbox = computed(() => props.stateInbox);
-
-const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
-});
-
-const hasSlaThreshold = computed(() => {
-  return slaCardLabel.value?.hasSlaThreshold && primaryActor.value?.slaPolicyId;
-});
-
-const lastActivityAt = computed(() => {
-  const timestamp = props.inboxItem?.lastActivityAt;
-  return timestamp ? shortTimestamp(dynamicTime(timestamp)) : '';
-});
-
-const menuItems = computed(() => [
-  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
-  {
-    key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
-    label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
-  },
-]);
-
-const messageClasses = computed(() => ({
-  emphasis: isUnread.value
-    ? getMessageClasses.emphasisUnread
-    : getMessageClasses.emphasis,
-  normal: isUnread.value
-    ? getMessageClasses.normalUnread
-    : getMessageClasses.normal,
-}));
-
-const formatPushMessage = message => {
-  if (message.startsWith(': ')) {
-    return message.slice(2);
-  }
-
-  return message.replace(/^([^:]+):/g, (match, name) => {
-    return `<span class="${messageClasses.value.emphasis}">${name}:</span>`;
-  });
-};
-
-const formattedMessage = computed(() => {
-  const messageContent = `<span class="${messageClasses.value.normal}">${formatPushMessage(props.inboxItem?.pushMessageBody || '')}</span>`;
-
-  return isUnread.value
-    ? `<span class="inline-flex flex-shrink-0 w-2 h-2 mb-px rounded-full bg-n-iris-10 ltr:mr-1 rtl:ml-1"></span> ${messageContent}`
-    : messageContent;
-});
-
-const notificationDetails = computed(() => {
-  const type = props.inboxItem?.notificationType?.toUpperCase() || '';
-  const [icon = '', color = 'text-n-blue-text'] =
-    NOTIFICATION_TYPES_MAPPING[type] || [];
-  return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
-});
-
-const snoozedUntilTime = computed(() => {
-  const { snoozedUntil } = props.inboxItem;
-  if (!snoozedUntil) return null;
-  return shortenSnoozeTime(
-    dynamicTime(snoozedReopenTimeToTimestamp(snoozedUntil))
-  );
-});
-
-const hasLastSnoozed = computed(() => props.inboxItem?.meta?.lastSnoozedAt);
-
-const snoozedText = computed(() => {
-  return !hasLastSnoozed.value
-    ? t('INBOX.TYPES_NEXT.SNOOZED_UNTIL', {
-        time: shortTimestamp(snoozedUntilTime.value),
-      })
-    : t('INBOX.TYPES_NEXT.SNOOZED_ENDS');
-});
-
-const contextMenuActions = {
-  close: () => {
-    isContextMenuOpen.value = false;
-    contextMenuPosition.value = { x: null, y: null };
-    emit('contextMenuClose');
-  },
-  open: e => {
-    e.preventDefault();
-    contextMenuPosition.value = {
-      x: e.pageX || e.clientX,
-      y: e.pageY || e.clientY,
-    };
-    isContextMenuOpen.value = true;
-    emit('contextMenuOpen');
-  },
-  handle: key => {
-    const actions = {
-      mark_as_read: () => emit('markNotificationAsRead', props.inboxItem),
-      mark_as_unread: () => emit('markNotificationAsUnRead', props.inboxItem),
-      delete: () => emit('deleteNotification', props.inboxItem),
-    };
-    actions[key]?.();
-  },
-};
-
-onBeforeMount(contextMenuActions.close);
-</script>
-
-<template>
-  <div
-    role="button"
-    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
-    @contextmenu="contextMenuActions.open($event)"
-    @click="emit('click')"
-  >
-    <div class="flex items-start gap-2">
-      <Avatar
-        :name="assigneeMeta.name"
-        :src="assigneeMeta.thumbnail"
-        :size="20"
-        rounded-full
-        class="mt-1"
-      />
-      <p v-dompurify-html="formattedMessage" class="mb-0 line-clamp-2" />
-    </div>
-    <div class="flex items-center justify-between h-6 gap-2">
-      <div class="flex items-center flex-1 min-w-0 gap-1">
-        <div
-          v-if="snoozedUntilTime || hasLastSnoozed"
-          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
-        >
-          <Icon
-            :icon="
-              !hasLastSnoozed
-                ? 'i-lucide-alarm-clock-plus'
-                : 'i-lucide-alarm-clock-off'
-            "
-            class="flex-shrink-0 size-4"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
-          />
-          <span
-            class="text-xs font-medium truncate"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
-          >
-            {{ snoozedText }}
-          </span>
-        </div>
-        <div
-          v-else-if="notificationDetails.text"
-          class="flex items-center w-full min-w-0 gap-2 ltr:pl-1 rtl:pr-1"
-        >
-          <Icon
-            :icon="notificationDetails.icon"
-            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
-            class="flex-shrink-0 size-4"
-          />
-          <span
-            class="text-xs font-medium truncate"
-            :class="isUnread ? notificationDetails.color : 'text-n-slate-11'"
-          >
-            {{ notificationDetails.text }}
-          </span>
-        </div>
-      </div>
-      <div class="flex items-center flex-shrink-0 gap-2">
-        <SLACardLabel
-          v-show="hasSlaThreshold"
-          ref="slaCardLabel"
-          :conversation="primaryActor"
-          class="[&>span]:text-xs"
-          :class="
-            !isUnread && '[&>span]:text-n-slate-11 [&>div>svg]:fill-n-slate-11'
-          "
-        />
-        <div v-if="hasSlaThreshold" class="w-px h-3 rounded-sm bg-n-slate-4" />
-        <CardPriorityIcon
-          v-if="primaryActor?.priority"
-          :priority="primaryActor?.priority"
-          class="[&>svg]:size-4"
-        />
-        <div
-          v-if="inboxIcon"
-          v-tooltip.left="inbox?.name"
-          class="flex items-center justify-center flex-shrink-0 rounded-full bg-n-alpha-2 size-4"
-        >
-          <Icon
-            :icon="inboxIcon"
-            class="flex-shrink-0 text-n-slate-11 size-2.5"
-          />
-        </div>
-        <span class="text-sm text-n-slate-10">
-          {{ lastActivityAt }}
-        </span>
-      </div>
-    </div>
-    <InboxContextMenu
-      v-if="isContextMenuOpen"
-      :context-menu-position="contextMenuPosition"
-      :menu-items="menuItems"
-      @close="contextMenuActions.close"
-      @select-action="contextMenuActions.handle"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/Label/AddLabel.vue

@@ -21,7 +21,7 @@ const showDropdown = ref(false);
 <template>
   <div class="relative">
     <button
-      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-6 outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
+      class="flex items-center gap-1 px-2 py-1 rounded-md outline-dashed h-[26px] outline-1 outline-n-slate-6 hover:bg-n-alpha-2"
       :class="{ 'bg-n-alpha-2': showDropdown }"
       @click="showDropdown = !showDropdown"
     >

app/javascript/dashboard/components-next/Label/LabelItem.vue

@@ -1,56 +1,22 @@
 <script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
+defineProps({
   label: {
     type: Object,
     default: null,
   },
-  isHovered: {
-    type: Boolean,
-    default: false,
-  },
 });
-
-const emit = defineEmits(['remove', 'hover']);
-
-const handleRemoveLabel = () => {
-  emit('remove', props.label?.id);
-};
-
-const handleMouseEnter = () => {
-  // Notify parent component when this label is hovered
-  // Added this to show the remove button with transition when hovering over the label
-  // This will solve the flickering issue when hovering over the last label item
-  emit('hover', props.label?.id);
-};
 </script>
 
 <template>
   <div
-    class="flex items-center px-1 py-1 overflow-hidden transition-all duration-300 ease-out rounded-md bg-n-alpha-2 h-7"
-    @mouseenter="handleMouseEnter"
+    class="bg-n-alpha-2 rounded-md flex items-center h-7 w-fit py-1 ltr:pl-1 rtl:pr-1 ltr:pr-1.5 rtl:pl-1.5"
   >
     <div
       class="w-2 h-2 m-1 rounded-sm"
       :style="{ backgroundColor: label.color }"
     />
-    <span class="text-sm text-n-slate-12 ltr:mr-px rtl:ml-px">
+    <span class="text-sm text-n-slate-12">
       {{ label.title }}
     </span>
-    <div
-      class="w-0 flex relative ltr:left-1 rtl:right-1 flex-shrink-0 overflow-hidden transition-[width] duration-300 ease-out"
-      :class="{ 'w-6': isHovered }"
-    >
-      <Button
-        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
-        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
-        slate
-        xs
-        faded
-        icon="i-lucide-x"
-        @click="handleRemoveLabel"
-      />
-    </div>
   </div>
 </template>

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

@@ -2,7 +2,6 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
@@ -31,8 +30,6 @@ const props = defineProps({
 const store = useStore();
 const { t } = useI18n();
 
-const { fetchSignatureFlagFromUISettings } = useUISettings();
-
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -46,11 +43,6 @@ const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 const uiFlags = useMapGetter('contactConversations/getUIFlags');
-const messageSignature = useMapGetter('getMessageSignature');
-
-const sendWithSignature = computed(() =>
-  fetchSignatureFlagFromUISettings(targetInbox.value?.channelType)
-);
 
 const directUploadsEnabled = computed(
   () => globalConfig.value.directUploadsEnabled
@@ -189,10 +181,7 @@ useKeyboardEvents(keyboardEvents);
 <template>
   <div
     v-on-click-outside="() => (showComposeNewConversation = false)"
-    class="relative"
-    :class="{
-      'z-40': showComposeNewConversation,
-    }"
+    class="relative z-40"
   >
     <slot
       name="trigger"
@@ -213,8 +202,6 @@ useKeyboardEvents(keyboardEvents);
       :contact-conversations-ui-flags="uiFlags"
       :contacts-ui-flags="contactsUiFlags"
       :class="composePopoverClass"
-      :message-signature="messageSignature"
-      :send-with-signature="sendWithSignature"
       @search-contacts="onContactSearch"
       @reset-contact-search="resetContacts"
       @update-selected-contact="handleSelectedContact"

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

@@ -1,5 +1,6 @@
 <script setup>
-import { defineAsyncComponent, ref, computed, watch, nextTick } from 'vue';
+import { defineAsyncComponent, ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { useFileUpload } from 'dashboard/composables/useFileUpload';
@@ -7,24 +8,51 @@ 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 { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
 
 const props = defineProps({
-  attachedFiles: { type: Array, default: () => [] },
-  isWhatsappInbox: { type: Boolean, default: false },
-  isEmailOrWebWidgetInbox: { type: Boolean, default: false },
-  isTwilioSmsInbox: { type: Boolean, default: false },
-  messageTemplates: { type: Array, default: () => [] },
-  channelType: { type: String, default: '' },
-  isLoading: { type: Boolean, default: false },
-  disableSendButton: { type: Boolean, default: false },
-  hasSelectedInbox: { type: Boolean, default: false },
-  hasNoInbox: { type: Boolean, default: false },
-  isDropdownActive: { type: Boolean, default: false },
-  messageSignature: { type: String, default: '' },
+  attachedFiles: {
+    type: Array,
+    default: () => [],
+  },
+  isWhatsappInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isTwilioSmsInbox: {
+    type: Boolean,
+    default: false,
+  },
+  messageTemplates: {
+    type: Array,
+    default: () => [],
+  },
+  channelType: {
+    type: String,
+    default: '',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disableSendButton: {
+    type: Boolean,
+    default: false,
+  },
+  hasNoInbox: {
+    type: Boolean,
+    default: false,
+  },
+  isDropdownActive: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits([
@@ -46,11 +74,8 @@ const EmojiInput = defineAsyncComponent(
   () => import('shared/components/emoji/EmojiInput.vue')
 );
 
-const signatureToApply = computed(() =>
-  props.isEmailOrWebWidgetInbox
-    ? props.messageSignature
-    : extractTextFromMarkdown(props.messageSignature)
-);
+const messageSignature = useMapGetter('getMessageSignature');
+const signatureToApply = computed(() => messageSignature.value);
 
 const {
   fetchSignatureFlagFromUISettings,
@@ -62,9 +87,13 @@ const sendWithSignature = computed(() => {
   return fetchSignatureFlagFromUISettings(props.channelType);
 });
 
+const isSignatureEnabledForInbox = computed(() => {
+  return props.isEmailOrWebWidgetInbox && sendWithSignature.value;
+});
+
 const setSignature = () => {
   if (signatureToApply.value) {
-    if (sendWithSignature.value) {
+    if (isSignatureEnabledForInbox.value) {
       emit('addSignature', signatureToApply.value);
     } else {
       emit('removeSignature', signatureToApply.value);
@@ -77,18 +106,6 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
-// Added this watch to dynamically set signature.
-// Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
-// Set the signature only if the inbox based flag is true
-watch(
-  () => props.hasSelectedInbox,
-  newValue => {
-    nextTick(() => {
-      if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
-    });
-  }
-);
-
 const onClickInsertEmoji = emoji => {
   emit('insertEmoji', emoji);
 };
@@ -196,7 +213,7 @@ useKeyboardEvents(keyboardEvents);
         />
       </FileUpload>
       <Button
-        v-if="hasSelectedInbox && !isWhatsappInbox"
+        v-if="isEmailOrWebWidgetInbox"
         icon="i-lucide-signature"
         color="slate"
         size="sm"

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

@@ -6,7 +6,6 @@ import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
-  extractTextFromMarkdown,
 } from 'dashboard/helper/editorHelper';
 import {
   buildContactableInboxesList,
@@ -34,8 +33,6 @@ const props = defineProps({
   isDirectUploadsEnabled: { type: Boolean, default: false },
   contactConversationsUiFlags: { type: Object, default: null },
   contactsUiFlags: { type: Object, default: null },
-  messageSignature: { type: String, default: '' },
-  sendWithSignature: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -187,14 +184,6 @@ const handleInboxAction = ({ value, action, ...rest }) => {
 
 const removeTargetInbox = value => {
   v$.value.$reset();
-  // 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 = [];
 };
@@ -313,8 +302,6 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
     <MessageEditor
       v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
       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"
@@ -335,10 +322,8 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :channel-type="inboxChannelType"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
-      :has-selected-inbox="!!targetInbox"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
-      :message-signature="messageSignature"
       @insert-emoji="onClickInsertEmoji"
       @add-signature="handleAddSignature"
       @remove-signature="handleRemoveSignature"

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

@@ -1,11 +1,9 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { INPUT_TYPES } from 'dashboard/components-next/taginput/helper/tagInputHelper.js';
 
 import TagInput from 'dashboard/components-next/taginput/TagInput.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-
 const props = defineProps({
   contacts: {
     type: Array,
@@ -44,19 +42,15 @@ const props = defineProps({
     default: false,
   },
 });
-
 const emit = defineEmits([
   'searchContacts',
   'setSelectedContact',
   'clearSelectedContact',
   'updateDropdown',
 ]);
-
 const i18nPrefix = 'COMPOSE_NEW_CONVERSATION.FORM.CONTACT_SELECTOR';
 const { t } = useI18n();
 
-const inputType = ref(INPUT_TYPES.EMAIL);
-
 const contactsList = computed(() => {
   return props.contacts?.map(({ name, id, thumbnail, email, ...rest }) => ({
     id,
@@ -86,14 +80,6 @@ const errorClass = computed(() => {
     ? '[&_input]:placeholder:!text-n-ruby-9 [&_input]:dark:placeholder:!text-n-ruby-9'
     : '';
 });
-
-const handleInput = value => {
-  // Update input type based on whether input starts with '+'
-  // If it does, set input type to 'tel'
-  // Otherwise, set input type to 'email'
-  inputType.value = value.startsWith('+') ? INPUT_TYPES.TEL : INPUT_TYPES.EMAIL;
-  emit('searchContacts', value);
-};
 </script>
 
 <template>
@@ -140,11 +126,11 @@ const handleInput = value => {
         :is-loading="isLoading"
         :disabled="contactableInboxesList?.length > 0 && showInboxesDropdown"
         allow-create
-        :type="inputType"
+        type="email"
         class="flex-1 min-h-7"
         :class="errorClass"
         focus-on-mount
-        @input="handleInput"
+        @input="emit('searchContacts', $event)"
         @on-click-outside="emit('updateDropdown', 'contacts', false)"
         @add="emit('setSelectedContact', $event)"
         @remove="emit('clearSelectedContact')"

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

@@ -1,22 +1,22 @@
 <script setup>
-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: '' },
+defineProps({
+  isEmailOrWebWidgetInbox: {
+    type: Boolean,
+    required: true,
+  },
+  hasErrors: {
+    type: Boolean,
+    default: false,
+  },
+  hasAttachments: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const { t } = useI18n();
@@ -25,98 +25,41 @@ 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]']">
-    <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
+    v-if="isEmailOrWebWidgetInbox"
+    class="flex-1 h-full"
+    :class="!hasAttachments && 'min-h-[200px]'"
+  >
+    <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'
+          : ''
+      "
+      :show-character-count="false"
+    />
+  </div>
+  <div v-else class="flex-1 h-full" :class="!hasAttachments && 'min-h-[200px]'">
+    <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"
+      auto-height
+      :custom-text-area-class="
+        hasErrors
+          ? 'placeholder:!text-n-ruby-9 dark:placeholder:!text-n-ruby-9'
+          : ''
+      "
+    />
   </div>
 </template>

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

@@ -193,12 +193,10 @@ export const searchContacts = async ({ keys, query }) => {
   return filteredPayload || [];
 };
 
-export const createNewContact = async input => {
+export const createNewContact = async email => {
   const payload = {
-    name: input.startsWith('+')
-      ? input.slice(1) // Remove the '+' prefix if it exists
-      : getCapitalizedNameFromEmail(input),
-    ...(input.startsWith('+') ? { phone_number: input } : { email: input }),
+    name: getCapitalizedNameFromEmail(email),
+    email,
   };
 
   const {

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

@@ -429,28 +429,6 @@ describe('composeConversationHelper', () => {
           email: 'john@example.com',
         });
       });
-
-      it('creates new contact with phone number', async () => {
-        const mockContact = {
-          id: 1,
-          name: '919999999999',
-          phone_number: '+919999999999',
-        };
-        ContactAPI.create.mockResolvedValue({
-          data: { payload: { contact: mockContact } },
-        });
-
-        const result = await helpers.createNewContact('+919999999999');
-        expect(result).toEqual({
-          id: 1,
-          name: '919999999999',
-          phoneNumber: '+919999999999',
-        });
-        expect(ContactAPI.create).toHaveBeenCalledWith({
-          name: '919999999999',
-          phone_number: '+919999999999',
-        });
-      });
     });
 
     describe('fetchContactableInboxes', () => {

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -174,7 +174,7 @@ watch(
 </script>
 
 <template>
-  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
+  <span class="relative inline-flex group/avatar" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div

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

@@ -1,73 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-  color: {
-    type: String,
-    default: 'slate',
-    validator: value =>
-      ['blue', 'ruby', 'amber', 'slate', 'teal'].includes(value),
-  },
-  actionLabel: {
-    type: String,
-    default: null,
-  },
-});
-
-const emit = defineEmits(['action']);
-
-const bannerClass = computed(() => {
-  const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
-  };
-
-  return classMap[props.color];
-});
-
-const buttonClass = computed(() => {
-  const classMap = {
-    slate: 'bg-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-4 text-n-blue-11',
-  };
-
-  return classMap[props.color];
-});
-
-const triggerAction = () => {
-  emit('action');
-};
-</script>
-
-<template>
-  <div
-    class="text-sm rounded-xl flex items-center justify-between gap-2 border"
-    :class="[
-      bannerClass,
-      {
-        'py-2 px-3': !actionLabel,
-        'pl-3 p-2': actionLabel,
-      },
-    ]"
-  >
-    <div>
-      <slot />
-    </div>
-    <div>
-      <button
-        v-if="actionLabel"
-        class="px-3 py-1 w-auto grid place-content-center rounded-lg"
-        :class="buttonClass"
-        @click="triggerAction"
-      >
-        {{ actionLabel }}
-      </button>
-    </div>
-  </div>
-</template>

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

@@ -6,7 +6,6 @@ import Icon from 'dashboard/components-next/icon/Icon.vue';
 import {
   VARIANT_OPTIONS,
   COLOR_OPTIONS,
-  JUSTIFY_OPTIONS,
   SIZE_OPTIONS,
   EXCLUDED_ATTRS,
 } from './constants.js';
@@ -28,11 +27,6 @@ const props = defineProps({
     default: null,
     validator: value => SIZE_OPTIONS.includes(value) || value === null,
   },
-  justify: {
-    type: String,
-    default: null,
-    validator: value => JUSTIFY_OPTIONS.includes(value) || value === null,
-  },
   icon: { type: [String, Object, Function], default: '' },
   trailingIcon: { type: Boolean, default: false },
   isLoading: { type: Boolean, default: false },
@@ -87,15 +81,6 @@ const computedSize = computed(() => {
   return 'md';
 });
 
-const computedJustify = computed(() => {
-  if (props.justify) return props.justify;
-  if (attrs.start || attrs.start === '') return 'start';
-  if (attrs.center || attrs.center === '') return 'center';
-  if (attrs.end || attrs.end === '') return 'end';
-
-  return 'center';
-});
-
 const STYLE_CONFIG = {
   colors: {
     blue: {
@@ -166,12 +151,7 @@ const STYLE_CONFIG = {
     md: 'text-sm font-medium',
     lg: 'text-base',
   },
-  justify: {
-    start: 'justify-start',
-    center: 'justify-center',
-    end: 'justify-end',
-  },
-  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:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
+  base: 'inline-flex items-center justify-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {
@@ -217,7 +197,6 @@ const linkButtonClasses = computed(() => {
       [STYLE_CONFIG.base]: true,
       [isLink ? linkButtonClasses : buttonClasses]: true,
       [STYLE_CONFIG.fontSize[computedSize]]: true,
-      [STYLE_CONFIG.justify[computedJustify]]: true,
       'flex-row-reverse': trailingIcon && !isIconOnly,
     }"
   >

app/javascript/dashboard/components-next/button/constants.js

@@ -1,7 +1,6 @@
 export const VARIANT_OPTIONS = ['solid', 'outline', 'faded', 'link', 'ghost'];
 export const COLOR_OPTIONS = ['blue', 'ruby', 'amber', 'slate', 'teal'];
 export const SIZE_OPTIONS = ['xs', 'sm', 'md', 'lg'];
-export const JUSTIFY_OPTIONS = ['start', 'center', 'end'];
 
 export const EXCLUDED_ATTRS = [
   'variant',
@@ -13,5 +12,4 @@ export const EXCLUDED_ATTRS = [
   ...VARIANT_OPTIONS,
   ...COLOR_OPTIONS,
   ...SIZE_OPTIONS,
-  ...JUSTIFY_OPTIONS,
 ];

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

@@ -1,126 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useAccount } from 'dashboard/composables/useAccount';
-import Button from 'dashboard/components-next/button/Button.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';
-
-const { featureFlag } = defineProps({
-  currentPage: {
-    type: Number,
-    default: 1,
-  },
-  totalCount: {
-    type: Number,
-    default: 100,
-  },
-  itemsPerPage: {
-    type: Number,
-    default: 25,
-  },
-  headerTitle: {
-    type: String,
-    default: '',
-  },
-  buttonPolicy: {
-    type: Array,
-    default: () => [],
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  featureFlag: {
-    type: String,
-    default: '',
-  },
-  isFetching: {
-    type: Boolean,
-    default: false,
-  },
-  isEmpty: {
-    type: Boolean,
-    default: false,
-  },
-  showPaginationFooter: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const emit = defineEmits(['click', 'close', 'update:currentPage']);
-const { isCloudFeatureEnabled } = useAccount();
-
-const showPaywall = computed(() => {
-  return !isCloudFeatureEnabled(featureFlag);
-});
-
-const handleButtonClick = () => {
-  emit('click');
-};
-
-const handlePageChange = event => {
-  emit('update:currentPage', event);
-};
-</script>
-
-<template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
-    <header class="sticky top-0 z-10 px-6 xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto">
-        <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"
-        >
-          <span class="text-xl font-medium text-n-slate-12">
-            {{ headerTitle }}
-            <slot name="headerTitle" />
-          </span>
-          <div
-            v-if="!showPaywall"
-            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>
-      </div>
-    </header>
-    <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[960px] mx-auto py-4">
-        <slot name="controls" />
-        <div
-          v-if="isFetching"
-          class="flex items-center justify-center py-10 text-n-slate-11"
-        >
-          <Spinner />
-        </div>
-        <div v-else-if="showPaywall">
-          <slot name="paywall" />
-        </div>
-        <div v-else-if="isEmpty">
-          <slot name="emptyState" />
-        </div>
-        <slot v-else name="body" />
-        <slot />
-      </div>
-    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
-      <PaginationFooter
-        :current-page="currentPage"
-        :total-items="totalCount"
-        :items-per-page="itemsPerPage"
-        @update:current-page="handlePageChange"
-      />
-    </footer>
-  </section>
-</template>

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

@@ -1,27 +0,0 @@
-<script setup>
-import AssistantCard from './AssistantCard.vue';
-import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/AssistantCard"
-    :layout="{ type: 'grid', width: '700px' }"
-  >
-    <Variant title="Assistant Card">
-      <div
-        v-for="(assistant, index) in assistantsList"
-        :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <AssistantCard
-          :id="assistant.id"
-          :name="assistant.name"
-          :description="assistant.description"
-          :updated-at="assistant.updated_at || assistant.created_at"
-          :created-at="assistant.created_at"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,112 +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 { usePolicy } from 'dashboard/composables/usePolicy';
-
-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';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  name: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    required: true,
-  },
-  updatedAt: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action']);
-const { checkPermissions } = usePolicy();
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const menuItems = computed(() => {
-  const allOptions = [
-    {
-      label: t('CAPTAIN.ASSISTANTS.OPTIONS.VIEW_CONNECTED_INBOXES'),
-      value: 'viewConnectedInboxes',
-      action: 'viewConnectedInboxes',
-      icon: 'i-lucide-link',
-    },
-  ];
-
-  if (checkPermissions(['administrator'])) {
-    allOptions.push(
-      {
-        label: t('CAPTAIN.ASSISTANTS.OPTIONS.EDIT_ASSISTANT'),
-        value: 'edit',
-        action: 'edit',
-        icon: 'i-lucide-pencil-line',
-      },
-      {
-        label: t('CAPTAIN.ASSISTANTS.OPTIONS.DELETE_ASSISTANT'),
-        value: 'delete',
-        action: 'delete',
-        icon: 'i-lucide-trash',
-      }
-    );
-  }
-
-  return allOptions;
-});
-
-const lastUpdatedAt = computed(() => dynamicTime(props.updatedAt));
-
-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('action', { action, value, id: props.id });
-};
-</script>
-
-<template>
-  <CardLayout>
-    <div class="flex justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
-        {{ name }}
-      </span>
-      <div class="flex items-center gap-2">
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          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:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <span class="text-sm truncate text-n-slate-11">
-        {{ description || 'Description not available' }}
-      </span>
-      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
-        {{ lastUpdatedAt }}
-      </span>
-    </div>
-  </CardLayout>
-</template>

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

@@ -1,27 +0,0 @@
-<script setup>
-import DocumentCard from './DocumentCard.vue';
-import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/DocumentCard"
-    :layout="{ type: 'grid', width: '700px' }"
-  >
-    <Variant title="Document Card">
-      <div
-        v-for="(doc, index) in documentsList"
-        :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <DocumentCard
-          :id="doc.id"
-          :name="doc.name"
-          :external-link="doc.external_link"
-          :assistant="doc.assistant"
-          :created-at="doc.created_at"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,117 +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 { usePolicy } from 'dashboard/composables/usePolicy';
-
-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';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  name: {
-    type: String,
-    default: '',
-  },
-  assistant: {
-    type: Object,
-    default: () => ({}),
-  },
-  externalLink: {
-    type: String,
-    required: true,
-  },
-  createdAt: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action']);
-const { checkPermissions } = usePolicy();
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const menuItems = computed(() => {
-  const allOptions = [
-    {
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-      value: 'viewRelatedQuestions',
-      action: 'viewRelatedQuestions',
-      icon: 'i-ph-tree-view-duotone',
-    },
-  ];
-
-  if (checkPermissions(['administrator'])) {
-    allOptions.push({
-      label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
-      value: 'delete',
-      action: 'delete',
-      icon: 'i-lucide-trash',
-    });
-  }
-
-  return allOptions;
-});
-
-const createdAt = computed(() => dynamicTime(props.createdAt));
-
-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('action', { action, value, id: props.id });
-};
-</script>
-
-<template>
-  <CardLayout>
-    <div class="flex justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
-        {{ name }}
-      </span>
-      <div class="flex items-center gap-2">
-        <div
-          v-on-clickaway="() => toggleDropdown(false)"
-          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:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <span
-        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
-      >
-        <i class="i-woot-captain" />
-        {{ assistant?.name || '' }}
-      </span>
-      <span
-        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
-      >
-        <i class="i-ph-link-simple shrink-0" />
-        <span class="truncate">{{ externalLink }}</span>
-      </span>
-      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
-        {{ createdAt }}
-      </div>
-    </div>
-  </CardLayout>
-</template>

app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue

@@ -1,21 +0,0 @@
-<script setup>
-import InboxCard from './InboxCard.vue';
-import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/InboxCard"
-    :layout="{ type: 'grid', width: '700px' }"
-  >
-    <Variant title="Inbox Card">
-      <div
-        v-for="inbox in inboxes"
-        :key="inbox.id"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <InboxCard :id="inbox.id" :inbox="inbox" />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,102 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useToggle } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
-
-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';
-import { INBOX_TYPES, getInboxIconByType } from 'dashboard/helper/inbox';
-
-const props = defineProps({
-  id: {
-    type: Number,
-    required: true,
-  },
-  inbox: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const inboxName = computed(() => {
-  const inbox = props.inbox;
-  if (!inbox?.name) {
-    return '';
-  }
-
-  const isTwilioChannel = inbox.channel_type === INBOX_TYPES.TWILIO;
-  const isWhatsAppChannel = inbox.channel_type === INBOX_TYPES.WHATSAPP;
-  const isEmailChannel = inbox.channel_type === INBOX_TYPES.EMAIL;
-
-  if (isTwilioChannel || isWhatsAppChannel) {
-    const identifier = inbox.messaging_service_sid || inbox.phone_number;
-    return identifier ? `${inbox.name} (${identifier})` : inbox.name;
-  }
-
-  if (isEmailChannel && inbox.email) {
-    return `${inbox.name} (${inbox.email})`;
-  }
-
-  return inbox.name;
-});
-
-const menuItems = computed(() => [
-  {
-    label: t('CAPTAIN.INBOXES.OPTIONS.DISCONNECT'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
-
-const icon = computed(() =>
-  getInboxIconByType(props.inbox.channel_type, '', 'outline')
-);
-
-const handleAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('action', { action, value, id: props.id });
-};
-</script>
-
-<template>
-  <CardLayout>
-    <div class="flex justify-between w-full gap-1">
-      <span
-        class="text-base text-n-slate-12 line-clamp-1 flex items-center gap-2"
-      >
-        <span :class="icon" />
-        {{ inboxName }}
-      </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:left-0 top-full"
-            @action="handleAction($event)"
-          />
-        </Policy>
-      </div>
-    </div>
-  </CardLayout>
-</template>

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

@@ -1,28 +0,0 @@
-<script setup>
-import ResponseCard from './ResponseCard.vue';
-import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-</script>
-
-<template>
-  <Story
-    title="Captain/Assistant/ResponseCard"
-    :layout="{ type: 'grid', width: '700px' }"
-  >
-    <Variant title="Article Card">
-      <div
-        v-for="(response, index) in responsesList"
-        :key="index"
-        class="px-20 py-4 bg-white dark:bg-slate-900"
-      >
-        <ResponseCard
-          :id="response.id"
-          :question="response.question"
-          :answer="response.answer"
-          :status="response.status"
-          :assistant="response.assistant"
-          :created-at="response.created_at"
-        />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -1,204 +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,
-  },
-  question: {
-    type: String,
-    required: true,
-  },
-  answer: {
-    type: String,
-    required: true,
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-  status: {
-    type: String,
-    default: 'approved',
-  },
-  documentable: {
-    type: Object,
-    default: null,
-  },
-  assistant: {
-    type: Object,
-    default: () => ({}),
-  },
-  updatedAt: {
-    type: Number,
-    required: true,
-  },
-  createdAt: {
-    type: Number,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['action', 'navigate']);
-
-const { t } = useI18n();
-
-const [showActionsDropdown, toggleDropdown] = useToggle();
-
-const statusAction = computed(() => {
-  if (props.status === 'pending') {
-    return [
-      {
-        label: t('CAPTAIN.RESPONSES.OPTIONS.APPROVE'),
-        value: 'approve',
-        action: 'approve',
-        icon: 'i-lucide-circle-check-big',
-      },
-    ];
-  }
-  return [];
-});
-
-const menuItems = computed(() => [
-  ...statusAction.value,
-  {
-    label: t('CAPTAIN.RESPONSES.OPTIONS.EDIT_RESPONSE'),
-    value: 'edit',
-    action: 'edit',
-    icon: 'i-lucide-pencil-line',
-  },
-  {
-    label: t('CAPTAIN.RESPONSES.OPTIONS.DELETE_RESPONSE'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
-
-const timestamp = computed(() =>
-  dynamicTime(props.updatedAt || props.createdAt)
-);
-
-const handleAssistantAction = ({ action, value }) => {
-  toggleDropdown(false);
-  emit('action', { action, value, id: props.id });
-};
-
-const handleDocumentableClick = () => {
-  emit('navigate', {
-    id: props.documentable.id,
-    type: props.documentable.type,
-  });
-};
-</script>
-
-<template>
-  <CardLayout :class="{ 'rounded-md': compact }">
-    <div class="flex justify-between w-full gap-1">
-      <span class="text-base text-n-slate-12 line-clamp-1">
-        {{ question }}
-      </span>
-      <div v-if="!compact" 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="handleAssistantAction($event)"
-          />
-        </Policy>
-      </div>
-    </div>
-    <span class="text-n-slate-11 text-sm line-clamp-5">
-      {{ answer }}
-    </span>
-    <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="documentable.type === 'Captain::Document'"
-            class="inline-flex items-center gap-1 truncate over"
-          >
-            <i class="i-ph-chat-circle-dots 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
-              class="max-w-96 truncate"
-              :title="documentable.available_name"
-            >
-              {{ documentable.available_name }}
-            </span>
-          </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>
-          </span>
-          <span v-else />
-        </div>
-        <div
-          v-if="status !== 'approved'"
-          class="shrink-0 text-sm text-n-slate-11 line-clamp-1 inline-flex items-center gap-1 ml-3"
-        >
-          <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

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

@@ -1,59 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  type: {
-    type: String,
-    required: true,
-  },
-  entity: {
-    type: Object,
-    required: true,
-  },
-  deletePayload: {
-    type: Object,
-    default: null,
-  },
-});
-
-const emit = defineEmits(['deleteSuccess']);
-
-const { t } = useI18n();
-const store = useStore();
-const deleteDialogRef = ref(null);
-const i18nKey = computed(() => props.type.toUpperCase());
-
-const deleteEntity = async payload => {
-  if (!payload) return;
-
-  try {
-    await store.dispatch(`captain${props.type}/delete`, payload);
-    emit('deleteSuccess');
-    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.SUCCESS_MESSAGE`));
-  } catch (error) {
-    useAlert(t(`CAPTAIN.${i18nKey.value}.DELETE.ERROR_MESSAGE`));
-  }
-};
-
-const handleDialogConfirm = async () => {
-  await deleteEntity(props.deletePayload || props.entity.id);
-  deleteDialogRef.value?.close();
-};
-
-defineExpose({ dialogRef: deleteDialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="deleteDialogRef"
-    type="alert"
-    :title="t(`CAPTAIN.${i18nKey}.DELETE.TITLE`)"
-    :description="t(`CAPTAIN.${i18nKey}.DELETE.DESCRIPTION`)"
-    :confirm-button-label="t(`CAPTAIN.${i18nKey}.DELETE.CONFIRM`)"
-    @confirm="handleDialogConfirm"
-  />
-</template>

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

@@ -1,41 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useRouter } from 'vue-router';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useAccount } from 'dashboard/composables/useAccount';
-
-import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
-
-const router = useRouter();
-const currentUser = useMapGetter('getCurrentUser');
-
-const isSuperAdmin = computed(() => {
-  return currentUser.value.type === 'SuperAdmin';
-});
-const { accountId, isOnChatwootCloud } = useAccount();
-
-const i18nKey = computed(() =>
-  isOnChatwootCloud.value ? 'PAYWALL' : 'ENTERPRISE_PAYWALL'
-);
-const openBilling = () => {
-  router.push({
-    name: 'billing_settings_index',
-    params: { accountId: accountId.value },
-  });
-};
-</script>
-
-<template>
-  <div
-    class="w-full max-w-[960px] mx-auto h-full max-h-[448px] grid place-content-center"
-  >
-    <BasePaywallModal
-      class="mx-auto"
-      feature-prefix="CAPTAIN"
-      :i18n-key="i18nKey"
-      :is-super-admin="isSuperAdmin"
-      :is-on-chatwoot-cloud="isOnChatwootCloud"
-      @upgrade="openBilling"
-    />
-  </div>
-</template>

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

@@ -1,174 +0,0 @@
-<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';
-
-const props = defineProps({
-  mode: {
-    type: String,
-    required: true,
-    validator: value => ['edit', 'create'].includes(value),
-  },
-  assistant: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('captainAssistants/getUIFlags'),
-};
-
-const initialState = {
-  name: '',
-  description: '',
-  productName: '',
-  featureFaq: false,
-  featureMemory: false,
-};
-
-const state = reactive({ ...initialState });
-
-const validationRules = {
-  name: { required, minLength: minLength(1) },
-  description: { required, minLength: minLength(1) },
-  productName: { required, minLength: minLength(1) },
-};
-
-const v$ = useVuelidate(validationRules, state);
-
-const isLoading = computed(() => formState.uiFlags.value.creatingItem);
-
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.ASSISTANTS.FORM.${errorKey}.ERROR`)
-    : '';
-};
-
-const formErrors = computed(() => ({
-  name: getErrorMessage('name', 'NAME'),
-  description: getErrorMessage('description', 'DESCRIPTION'),
-  productName: getErrorMessage('productName', 'PRODUCT_NAME'),
-}));
-
-const handleCancel = () => emit('cancel');
-
-const prepareAssistantDetails = () => ({
-  name: state.name,
-  description: state.description,
-  config: {
-    product_name: state.productName,
-    feature_faq: state.featureFaq,
-    feature_memory: state.featureMemory,
-  },
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) {
-    return;
-  }
-
-  emit('submit', prepareAssistantDetails());
-};
-
-const updateStateFromAssistant = assistant => {
-  if (!assistant) return;
-
-  const { name, description, config } = assistant;
-
-  Object.assign(state, {
-    name,
-    description,
-    productName: config.product_name,
-    featureFaq: config.feature_faq || false,
-    featureMemory: config.feature_memory || false,
-  });
-};
-
-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">
-    <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'"
-    />
-
-    <fieldset class="flex flex-col gap-2.5">
-      <legend class="mb-3 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.TITLE') }}
-      </legend>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.featureFaq" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
-        </span>
-      </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.featureMemory" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
-        </span>
-      </label>
-    </fieldset>
-
-    <div class="flex items-center justify-between w-full gap-3">
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="t(`CAPTAIN.FORM.${mode.toUpperCase()}`)"
-        class="w-full"
-        :is-loading="isLoading"
-        :disabled="isLoading"
-      />
-    </div>
-  </form>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.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 Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import AssistantForm from './AssistantForm.vue';
-
-const props = defineProps({
-  selectedAssistant: {
-    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 assistantForm = ref(null);
-
-const updateAssistant = assistantDetails =>
-  store.dispatch('captainAssistants/update', {
-    id: props.selectedAssistant.id,
-    ...assistantDetails,
-  });
-
-const i18nKey = computed(
-  () => `CAPTAIN.ASSISTANTS.${props.type.toUpperCase()}`
-);
-
-const createAssistant = assistantDetails =>
-  store.dispatch('captainAssistants/create', assistantDetails);
-
-const handleSubmit = async updatedAssistant => {
-  try {
-    if (props.type === 'edit') {
-      await updateAssistant(updatedAssistant);
-    } else {
-      await createAssistant(updatedAssistant);
-    }
-    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage = error?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => {
-  emit('close');
-};
-
-const handleCancel = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t(`${i18nKey}.TITLE`)"
-    :description="t('CAPTAIN.ASSISTANTS.FORM_DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    overflow-y-auto
-    @close="handleClose"
-  >
-    <AssistantForm
-      ref="assistantForm"
-      :mode="type"
-      :assistant="selectedAssistant"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-    <template #footer />
-  </Dialog>
-</template>

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

@@ -1,58 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import DocumentForm from './DocumentForm.vue';
-
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const documentForm = ref(null);
-
-const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
-
-const handleSubmit = async newDocument => {
-  try {
-    await store.dispatch('captainDocuments/create', newDocument);
-    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => {
-  emit('close');
-};
-
-const handleCancel = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="handleClose"
-  >
-    <DocumentForm
-      ref="documentForm"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-    <template #footer />
-  </Dialog>
-</template>

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

@@ -1,114 +0,0 @@
-<script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, url } 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 ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('captainDocuments/getUIFlags'),
-  assistants: useMapGetter('captainAssistants/getRecords'),
-};
-
-const initialState = {
-  name: '',
-  assistantId: null,
-};
-
-const state = reactive({ ...initialState });
-
-const validationRules = {
-  url: { required, url, 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);
-
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
-    : '';
-};
-
-const formErrors = computed(() => ({
-  url: getErrorMessage('url', 'URL'),
-  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
-}));
-
-const handleCancel = () => emit('cancel');
-
-const prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) {
-    return;
-  }
-
-  emit('submit', prepareDocumentDetails());
-};
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.url"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
-      :message="formErrors.url"
-      :message-type="formErrors.url ? '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.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 [&>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"
-        variant="faded"
-        color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="t('CAPTAIN.FORM.CREATE')"
-        class="w-full"
-        :is-loading="isLoading"
-        :disabled="isLoading"
-      />
-    </div>
-  </form>
-</template>

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

@@ -1,40 +0,0 @@
-<script setup>
-import { onMounted, computed } from 'vue';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { useCaptain } from 'dashboard/composables/useCaptain';
-import { useRouter } from 'vue-router';
-
-import Banner from 'dashboard/components-next/banner/Banner.vue';
-
-const router = useRouter();
-const { accountId } = useAccount();
-
-const { documentLimits, fetchLimits } = useCaptain();
-
-const openBilling = () => {
-  router.push({
-    name: 'billing_settings_index',
-    params: { accountId: accountId.value },
-  });
-};
-
-const showBanner = computed(() => {
-  if (!documentLimits.value) return false;
-
-  const { currentAvailable } = documentLimits.value;
-  return currentAvailable === 0;
-});
-
-onMounted(fetchLimits);
-</script>
-
-<template>
-  <Banner
-    v-show="showBanner"
-    color="amber"
-    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
-    @action="openBilling"
-  >
-    {{ $t('CAPTAIN.BANNER.DOCUMENTS') }}
-  </Banner>
-</template>

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

@@ -1,69 +0,0 @@
-<script setup>
-import { ref, computed, onMounted } from 'vue';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import { useI18n } from 'vue-i18n';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ResponseCard from '../../assistant/ResponseCard.vue';
-const props = defineProps({
-  captainDocument: {
-    type: Object,
-    required: true,
-  },
-});
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-const dialogRef = ref(null);
-
-const uiFlags = useMapGetter('captainResponses/getUIFlags');
-const responses = useMapGetter('captainResponses/getRecords');
-const isFetching = computed(() => uiFlags.value.fetchingList);
-
-const handleClose = () => {
-  emit('close');
-};
-
-onMounted(() => {
-  store.dispatch('captainResponses/get', {
-    assistantId: props.captainDocument.assistant.id,
-    documentId: props.captainDocument.id,
-  });
-});
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')"
-    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    overflow-y-auto
-    width="3xl"
-    @close="handleClose"
-  >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else class="flex flex-col gap-3 min-h-48">
-      <ResponseCard
-        v-for="response in responses"
-        :id="response.id"
-        :key="response.id"
-        :question="response.question"
-        :status="response.status"
-        :answer="response.answer"
-        :assistant="response.assistant"
-        :created-at="response.created_at"
-        :updated-at="response.updated_at"
-        compact
-      />
-    </div>
-  </Dialog>
-</template>

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

@@ -1,40 +0,0 @@
-<script setup>
-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';
-import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
-    :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
-    :action-perms="['administrator']"
-  >
-    <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
-        <AssistantCard
-          v-for="(assistant, index) in assistantsList.slice(0, 5)"
-          :id="assistant.id"
-          :key="`assistant-${index}`"
-          :name="assistant.name"
-          :description="assistant.description"
-          :updated-at="assistant.created_at"
-        />
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
-        icon="i-lucide-plus"
-        @click="onClick"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

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

@@ -1,41 +0,0 @@
-<script setup>
-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';
-import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
-    :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
-    :action-perms="['administrator']"
-  >
-    <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
-        <DocumentCard
-          v-for="(document, index) in documentsList.slice(0, 5)"
-          :id="document.id"
-          :key="`document-${index}`"
-          :name="document.name"
-          :assistant="document.assistant"
-          :external-link="document.external_link"
-          :created-at="document.created_at"
-        />
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
-        icon="i-lucide-plus"
-        @click="onClick"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

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

@@ -1,38 +0,0 @@
-<script setup>
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
-import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
-    :subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
-    :action-perms="['administrator']"
-  >
-    <template #empty-state-item>
-      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
-        <InboxCard
-          v-for="(inbox, index) in inboxes.slice(0, 5)"
-          :id="inbox.id"
-          :key="`inbox-${index}`"
-          :inbox="inbox"
-        />
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('CAPTAIN.INBOXES.ADD_NEW')"
-        icon="i-lucide-plus"
-        @click="onClick"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

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

@@ -1,43 +0,0 @@
-<script setup>
-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 { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
-
-const emit = defineEmits(['click']);
-
-const onClick = () => {
-  emit('click');
-};
-</script>
-
-<template>
-  <EmptyStateLayout
-    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
-    :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
-    :action-perms="['administrator']"
-  >
-    <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)"
-          :id="response.id"
-          :key="`response-${index}`"
-          :question="response.question"
-          :answer="response.answer"
-          :status="response.status"
-          :assistant="response.assistant"
-          :created-at="response.created_at"
-          :updated-at="response.created_at"
-        />
-      </div>
-    </template>
-    <template #actions>
-      <Button
-        :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
-        icon="i-lucide-plus"
-        @click="onClick"
-      />
-    </template>
-  </EmptyStateLayout>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js

@@ -1,286 +0,0 @@
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-export const assistantsList = [
-  {
-    account_id: 2,
-    config: { product_name: 'HelpDesk Pro' },
-    created_at: 1736033561,
-    description:
-      'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
-    id: 4,
-    name: 'Support Genie',
-  },
-  {
-    account_id: 3,
-    config: { product_name: 'CRM Tools' },
-    created_at: 1736033562,
-    description:
-      'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
-    id: 5,
-    name: 'CRM Assistant',
-  },
-  {
-    account_id: 4,
-    config: { product_name: 'SalesFlow' },
-    created_at: 1736033563,
-    description:
-      'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
-    id: 6,
-    name: 'SalesBot',
-  },
-  {
-    account_id: 5,
-    config: { product_name: 'TicketMaster AI' },
-    created_at: 1736033564,
-    description:
-      'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
-    id: 7,
-    name: 'TicketBot',
-  },
-  {
-    account_id: 6,
-    config: { product_name: 'FinanceAssist' },
-    created_at: 1736033565,
-    description:
-      'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
-    id: 8,
-    name: 'Finance Wizard',
-  },
-  {
-    account_id: 8,
-    config: { product_name: 'HR Assistant' },
-    created_at: 1736033567,
-    description:
-      'Streamlines HR operations including employee management, payroll, and recruitment processes.',
-    id: 10,
-    name: 'HR Helper',
-  },
-];
-
-export const documentsList = [
-  {
-    account_id: 1,
-    assistant: { id: 1, name: 'Helper Pro' },
-    content:
-      'Comprehensive guide on using conversation filters to manage chats effectively.',
-    created_at: 1736143272,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
-    id: 3059,
-    name: 'How to use Conversation Filters? | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 2,
-    assistant: { id: 2, name: 'Support Genie' },
-    content:
-      'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
-    created_at: 1736143273,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
-    id: 3060,
-    name: 'Automating Ticket Assignments | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 3,
-    assistant: { id: 3, name: 'CRM Assistant' },
-    content:
-      'A detailed guide on managing and organizing customer profiles for better relationship management.',
-    created_at: 1736143274,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
-    id: 3061,
-    name: 'Managing Customer Profiles | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 4,
-    assistant: { id: 4, name: 'SalesBot' },
-    content:
-      'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
-    created_at: 1736143275,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
-    id: 3062,
-    name: 'Sales Tracking Guide | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 5,
-    assistant: { id: 5, name: 'TicketBot' },
-    content:
-      'How to efficiently create, manage, and resolve tickets in Chatwoot.',
-    created_at: 1736143276,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
-    id: 3063,
-    name: 'Managing Tickets | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 6,
-    assistant: { id: 6, name: 'Finance Wizard' },
-    content:
-      'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
-    created_at: 1736143277,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
-    id: 3064,
-    name: 'Financial Reporting | User Guide | Chatwoot',
-    status: 'available',
-  },
-];
-
-export const responsesList = [
-  {
-    account_id: 1,
-    answer:
-      'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
-    created_at: 1736283330,
-    id: 87,
-    question: 'Why is my Messenger in Chatwoot deactivated?',
-    status: 'pending',
-    assistant: {
-      account_id: 1,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033280,
-      description: 'Assists with general queries and system-wide issues.',
-      id: 1,
-      name: 'Assistant 2',
-    },
-  },
-  {
-    account_id: 2,
-    answer:
-      'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
-    created_at: 1736283340,
-    id: 88,
-    question: 'How do I integrate WhatsApp with Chatwoot?',
-    assistant: {
-      account_id: 2,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033281,
-      description: 'Helps with integration and setup-related inquiries.',
-      id: 2,
-      name: 'Assistant 3',
-    },
-  },
-  {
-    account_id: 3,
-    answer:
-      "To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
-    created_at: 1736283350,
-    id: 89,
-    question: 'How can I reset my password in Chatwoot?',
-    assistant: {
-      account_id: 3,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033282,
-      description: 'Handles account management and recovery support.',
-      id: 3,
-      name: 'Assistant 4',
-    },
-  },
-  {
-    account_id: 4,
-    answer:
-      "You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
-    created_at: 1736283360,
-    id: 90,
-    question: 'How do I enable dark mode in Chatwoot?',
-    assistant: {
-      account_id: 4,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033283,
-      description: 'Helps with UI and theme-related inquiries.',
-      id: 4,
-      name: 'Assistant 5',
-    },
-  },
-  {
-    account_id: 5,
-    answer:
-      "To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
-    created_at: 1736283370,
-    id: 91,
-    question: 'How do I add a new team member in Chatwoot?',
-    assistant: {
-      account_id: 5,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033284,
-      description: 'Supports team management and user access-related queries.',
-      id: 5,
-      name: 'Assistant 6',
-    },
-  },
-  {
-    account_id: 6,
-    answer:
-      "Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
-    created_at: 1736283380,
-    id: 92,
-    question: 'What are campaigns in Chatwoot?',
-    assistant: {
-      account_id: 6,
-      config: { product_name: 'Chatwoot' },
-      created_at: 1736033285,
-      description:
-        'Specialized in marketing, campaign management, and messaging strategies.',
-      id: 6,
-      name: 'Assistant 7',
-    },
-  },
-];
-
-export const inboxes = [
-  {
-    id: 7,
-    name: 'Email Support',
-    channel_type: INBOX_TYPES.EMAIL,
-    email: 'support@company.com',
-  },
-  {
-    id: 1,
-    name: 'Website Chat',
-    channel_type: INBOX_TYPES.WEB,
-  },
-  {
-    id: 2,
-    name: 'Facebook Support',
-    channel_type: INBOX_TYPES.FB,
-  },
-  {
-    id: 5,
-    name: 'SMS Service',
-    channel_type: INBOX_TYPES.TWILIO,
-    messaging_service_sid: 'MGxxxxxx',
-  },
-  {
-    id: 6,
-    name: 'WhatsApp Support',
-    channel_type: INBOX_TYPES.WHATSAPP,
-    phone_number: '+1987654321',
-  },
-  {
-    id: 8,
-    name: 'Telegram Support',
-    channel_type: INBOX_TYPES.TELEGRAM,
-  },
-  {
-    id: 9,
-    name: 'LINE Support',
-    channel_type: INBOX_TYPES.LINE,
-  },
-  {
-    id: 10,
-    name: 'API Channel',
-    channel_type: INBOX_TYPES.API,
-  },
-  {
-    id: 11,
-    name: 'SMS Basic',
-    channel_type: INBOX_TYPES.SMS,
-    phone_number: '+1555555555',
-  },
-];

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue

@@ -1,65 +0,0 @@
-<script setup>
-import { ref } from 'vue';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ConnectInboxForm from './ConnectInboxForm.vue';
-
-defineProps({
-  assistantId: {
-    type: Number,
-    required: true,
-  },
-});
-const emit = defineEmits(['close']);
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const connectForm = ref(null);
-
-const i18nKey = 'CAPTAIN.INBOXES.CREATE';
-
-const handleSubmit = async payload => {
-  try {
-    await store.dispatch('captainInboxes/create', payload);
-    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage = error?.message || t(`${i18nKey}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => {
-  emit('close');
-};
-
-const handleCancel = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="create"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.INBOXES.FORM_DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="handleClose"
-  >
-    <ConnectInboxForm
-      ref="connectForm"
-      :assistant-id="assistantId"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-    <template #footer />
-  </Dialog>
-</template>

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue

@@ -1,115 +0,0 @@
-<script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-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 { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('captainInboxes/getUIFlags'),
-  inboxes: useMapGetter('inboxes/getInboxes'),
-  captainInboxes: useMapGetter('captainInboxes/getRecords'),
-};
-
-const initialState = {
-  inboxId: null,
-};
-
-const state = reactive({ ...initialState });
-
-const validationRules = {
-  inboxId: { required },
-};
-
-const inboxList = computed(() => {
-  const captainInboxIds = formState.captainInboxes.value.map(inbox => inbox.id);
-
-  return formState.inboxes.value
-    .filter(inbox => !captainInboxIds.includes(inbox.id))
-    .map(inbox => ({
-      value: inbox.id,
-      label: inbox.name,
-    }));
-});
-
-const v$ = useVuelidate(validationRules, state);
-
-const isLoading = computed(() => formState.uiFlags.value.creatingItem);
-
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.INBOXES.FORM.${errorKey}.ERROR`)
-    : '';
-};
-
-const formErrors = computed(() => ({
-  inboxId: getErrorMessage('inboxId', 'INBOX'),
-}));
-
-const handleCancel = () => emit('cancel');
-
-const prepareInboxPayload = () => ({
-  inboxId: state.inboxId,
-  assistantId: props.assistantId,
-});
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) {
-    return;
-  }
-
-  emit('submit', prepareInboxPayload());
-};
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.INBOXES.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxList"
-        :has-error="!!formErrors.inboxId"
-        :placeholder="t('CAPTAIN.INBOXES.FORM.INBOX.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.inboxId"
-      />
-    </div>
-
-    <div class="flex items-center justify-between w-full gap-3">
-      <Button
-        type="button"
-        variant="faded"
-        color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        type="submit"
-        :label="t('CAPTAIN.FORM.CREATE')"
-        class="w-full"
-        :is-loading="isLoading"
-        :disabled="isLoading"
-      />
-    </div>
-  </form>
-</template>

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

@@ -1,84 +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 Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ResponseForm from './ResponseForm.vue';
-
-const props = defineProps({
-  selectedResponse: {
-    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 responseForm = ref(null);
-
-const updateResponse = responseDetails =>
-  store.dispatch('captainResponses/update', {
-    id: props.selectedResponse.id,
-    ...responseDetails,
-  });
-
-const i18nKey = computed(() => `CAPTAIN.RESPONSES.${props.type.toUpperCase()}`);
-
-const createResponse = responseDetails =>
-  store.dispatch('captainResponses/create', responseDetails);
-
-const handleSubmit = async updatedResponse => {
-  try {
-    if (props.type === 'edit') {
-      await updateResponse(updatedResponse);
-    } else {
-      await createResponse(updatedResponse);
-    }
-    useAlert(t(`${i18nKey.value}.SUCCESS_MESSAGE`));
-    dialogRef.value.close();
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message || t(`${i18nKey.value}.ERROR_MESSAGE`);
-    useAlert(errorMessage);
-  }
-};
-
-const handleClose = () => {
-  emit('close');
-};
-
-const handleCancel = () => {
-  dialogRef.value.close();
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.RESPONSES.FORM_DESCRIPTION')"
-    :show-cancel-button="false"
-    :show-confirm-button="false"
-    @close="handleClose"
-  >
-    <ResponseForm
-      ref="responseForm"
-      :mode="type"
-      :response="selectedResponse"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-    <template #footer />
-  </Dialog>
-</template>