Merge branch 'develop' into chore/upgrade-packages-2-25

Followup PR for https://github.com/chatwoot/chatwoot/pull/10876. This PR
just adds all the events related to conversation update to be reloaded
before sending it to the UI.

.circleci/config.yml

@@ -19,7 +19,7 @@ jobs:
     steps:
       - checkout
       - node/install:
-          node-version: '20.12'
+          node-version: '23.7'
       - node/install-pnpm
       - node/install-packages:
           pkg-manager: pnpm

.devcontainer/docker-compose.yml

@@ -5,30 +5,30 @@
 version: '3'
 
 services:
-  base: 
+  base:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile.base
       args:
-        VARIANT: "ubuntu-22.04"
-        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.3.3"
+        VARIANT: 'ubuntu-22.04'
+        NODE_VERSION: '23.7.0'
+        RUBY_VERSION: '3.3.3'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: "1000"
-        USER_GID: "1000"
+        USER_UID: '1000'
+        USER_GID: '1000'
     image: base:latest
-        
+
   app:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile
       args:
-        VARIANT: "ubuntu-22.04"
-        NODE_VERSION: "20.9.0"
-        RUBY_VERSION: "3.3.3"
+        VARIANT: 'ubuntu-22.04'
+        NODE_VERSION: '23.7.0'
+        RUBY_VERSION: '3.3.3'
         # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: "1000"
-        USER_GID: "1000"
+        USER_UID: '1000'
+        USER_GID: '1000'
 
     volumes:
       - ..:/workspace:cached

.github/workflows/frontend-fe.yml

@@ -23,12 +23,10 @@ jobs:
           bundler-cache: true
 
       - uses: pnpm/action-setup@v4
-        with:
-          version: 9.3.0
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/publish_foss_docker.yml

@@ -5,6 +5,7 @@
 # #
 
 name: Publish Chatwoot CE docker images
+
 on:
   push:
     branches:
@@ -12,23 +13,32 @@ on:
       - master
     tags:
       - v*
-# pull_request:
   workflow_dispatch:
 
+env:
+  DOCKER_REPO: chatwoot/chatwoot
+
 jobs:
   build:
-    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
     env:
-      GIT_REF: ${{ github.head_ref || github.ref_name }} # ref_name to get tags/branches
+      GIT_REF: ${{ github.head_ref || github.ref_name }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
 
       - name: Strip enterprise code
         run: |
@@ -39,29 +49,97 @@ jobs:
         run: |
           echo -en '\nENV CW_EDITION="ce"' >> docker/Dockerfile
 
-      - name: set docker tag
+      - name: Set Docker Tags
         run: |
-          # Replace forward slashes with hyphens in the ref name
           SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
-          echo "DOCKER_TAG=chatwoot/chatwoot:$SANITIZED_REF-ce" >> $GITHUB_ENV
+          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
 
-      - name: replace docker tag if master
-        if: github.ref_name == 'master'
-        run: |
-          echo "DOCKER_TAG=chatwoot/chatwoot:latest-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: Login to DockerHub
         if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v3
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Build and push
-        uses: docker/build-push-action@v2
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
         with:
           context: .
           file: docker/Dockerfile
-          platforms: linux/amd64, linux/arm64
+          platforms: ${{ matrix.platform }}
           push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
-          tags: ${{ env.DOCKER_TAG }}
+          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

.github/workflows/run_foss_spec.yml

@@ -38,7 +38,6 @@ jobs:
       - uses: actions/checkout@v4
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           ref: ${{ github.event.pull_request.head.ref }}
           repository: ${{ github.event.pull_request.head.repo.full_name }}
 
@@ -48,7 +47,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
           cache: 'pnpm'
 
       - name: Install pnpm dependencies

.github/workflows/size-limit.yml

@@ -19,13 +19,11 @@ jobs:
         with:
           bundler-cache: true # runs 'bundle install' and caches installed gems automatically
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9.3.0
+      - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 23
           cache: 'pnpm'
 
       - name: pnpm
@@ -39,7 +37,7 @@ jobs:
       - name: setup env
         run: |
           cp .env.example .env
- 
+
       - name: Run asset compile
         run: bundle exec rake assets:precompile
         env:
@@ -47,5 +45,3 @@ jobs:
 
       - name: Size Check
         run: pnpm run size
-
-

Gemfile.lock

@@ -186,7 +186,7 @@ GEM
     database_cleaner-core (2.0.1)
     datadog-ci (0.8.3)
       msgpack
-    date (3.3.4)
+    date (3.4.1)
     ddtrace (1.23.2)
       datadog-ci (~> 0.8.1)
       debase-ruby_core_source (= 3.3.1)
@@ -487,7 +487,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.17)
+    net-imap (0.4.19)
       date
       net-protocol
     net-pop (0.1.2)
@@ -782,7 +782,7 @@ GEM
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.1)
+    timeout (0.4.3)
     trailblazer-option (0.1.2)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)

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-2024, Chatwoot Inc - Released under the MIT License.
+*Chatwoot* &copy; 2017-2025, Chatwoot Inc - Released under the MIT License.

VERSION_CWCTL

@@ -1 +1 @@
-3.1.0
+3.2.0

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)
+    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
   end
 
   def reporting_events

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

@@ -2,7 +2,7 @@ class Api::V1::Accounts::Contacts::ConversationsController < Api::V1::Accounts::
   def index
     @conversations = Current.account.conversations.includes(
       :assignee, :contact, :inbox, :taggings
-    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(id: :desc).limit(20)
+    ).where(inbox_id: inbox_ids, contact_id: @contact.id).order(last_activity_at: :desc).limit(20)
   end
 
   private

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 }.to_json
+    data.present? ? data.to_json : { agents: nil, inboxes: nil, captain_responses: nil, captain_documents: nil }.to_json
   end
 end

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

@@ -1,58 +1,70 @@
 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|
-      agent_report = report_builder({ type: :agent, id: agent.id }).summary
-      [agent.name] + generate_readable_report_metrics(agent_report)
+      report = reports.find { |r| r[:id] == agent.id }
+      [agent.name] + generate_readable_report_metrics(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|
-      inbox_report = generate_report({ type: :inbox, id: inbox.id })
-      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(inbox_report)
+      report = reports.find { |r| r[:id] == inbox.id }
+      [inbox.name, inbox.channel&.name] + generate_readable_report_metrics(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|
-      team_report = report_builder({ type: :team, id: team.id }).summary
-      [team.name] + generate_readable_report_metrics(team_report)
+      report = reports.find { |r| r[:id] == team.id }
+      [team.name] + generate_readable_report_metrics(report)
     end
   end
 
   def generate_labels_report
     Current.account.labels.map do |label|
-      label_report = generate_report({ type: :label, id: label.id })
+      label_report = report_builder({ type: :label, id: label.id }).short_summary
       [label.title] + generate_readable_report_metrics(label_report)
     end
   end
 
-  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])
-        }
-      )
+  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])
+      }
     )
   end
 
-  def generate_report(report_params)
-    report_builder(report_params).short_summary
+  def report_builder(report_params)
+    V2::ReportBuilder.new(Current.account, build_params(report_params))
   end
 
-  private
-
-  def generate_readable_report_metrics(report_metric)
+  def generate_readable_report_metrics(report)
     [
-      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]
+      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]
     ]
   end
 end

app/javascript/dashboard/api/search.js

@@ -14,26 +14,29 @@ class SearchAPI extends ApiClient {
     });
   }
 
-  contacts({ q }) {
+  contacts({ q, page = 1 }) {
     return axios.get(`${this.url}/contacts`, {
       params: {
         q,
+        page: page,
       },
     });
   }
 
-  conversations({ q }) {
+  conversations({ q, page = 1 }) {
     return axios.get(`${this.url}/conversations`, {
       params: {
         q,
+        page: page,
       },
     });
   }
 
-  messages({ q }) {
+  messages({ q, page = 1 }) {
     return axios.get(`${this.url}/messages`, {
       params: {
         q,
+        page: page,
       },
     });
   }

app/javascript/dashboard/api/summaryReports.js

@@ -0,0 +1,40 @@
+/* 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/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -98,7 +98,7 @@ const inboxIcon = computed(() => {
         </span>
       </div>
       <div
-        v-dompurify-html="formatMessage(message)"
+        v-dompurify-html="formatMessage(message, false, false, false)"
         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/ContactsForm/ContactsForm.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { required, email, minLength } from '@vuelidate/validators';
+import { required, email } 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.country' },
+  COUNTRY: { field: 'additionalAttributes.countryCode' },
   BIO: { field: 'additionalAttributes.description' },
   COMPANY_NAME: { field: 'additionalAttributes.companyName' },
 };
@@ -74,7 +74,7 @@ const defaultState = {
 const state = reactive({ ...defaultState });
 
 const validationRules = {
-  firstName: { required, minLength: minLength(2) },
+  firstName: { required },
   email: { email },
 };
 
@@ -123,7 +123,7 @@ const prepareStateBasedOnProps = () => {
 };
 
 const countryOptions = computed(() =>
-  countries.map(({ name }) => ({ label: name, value: name }))
+  countries.map(({ name, id }) => ({ label: name, value: id }))
 );
 
 const editDetailsForm = computed(() =>
@@ -205,8 +205,8 @@ const getMessageType = key => {
 };
 
 const handleCountrySelection = value => {
-  const selectedCountry = countries.find(option => option.name === value);
-  state.additionalAttributes.countryCode = selectedCountry?.id || '';
+  const selectedCountry = countries.find(option => option.id === value);
+  state.additionalAttributes.country = selectedCountry?.name || '';
   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.country"
+            v-model="state.additionalAttributes.countryCode"
             :options="countryOptions"
             :placeholder="item.placeholder"
             class="[&>div>button]:h-8"

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

@@ -59,6 +59,7 @@ 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,6 +2,7 @@
 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';
 
@@ -14,6 +15,8 @@ const props = defineProps({
 
 const { t } = useI18n();
 
+const { uiSettings } = useUISettings();
+
 const searchQuery = ref('');
 
 const contactAttributes = useMapGetter('attributes/getContactAttributes') || [];
@@ -46,20 +49,49 @@ 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(() => {
-  return processContactAttributes(
+  const attributes = processContactAttributes(
     contactAttributes.value,
     props.selectedContact?.customAttributes,
     (key, custom) => key in custom
   );
+
+  return sortByUISettings(attributes);
 });
 
 const unusedAttributes = computed(() => {
-  return processContactAttributes(
+  const attributes = processContactAttributes(
     contactAttributes.value,
     props.selectedContact?.customAttributes,
     (key, custom) => !(key in custom)
   );
+
+  return sortByUISettings(attributes);
 });
 
 const filteredUnusedAttributes = computed(() => {

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

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

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

@@ -36,6 +36,8 @@ const emit = defineEmits([
 
 const { t } = useI18n();
 
+const isNewArticle = computed(() => !props.article?.id);
+
 const saveAndSync = value => {
   emit('saveArticle', value);
 };
@@ -52,21 +54,32 @@ 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 => {
-    quickSave({ title: value });
-    saveAndSyncDebounced({ title: value });
+    handleSave({ title: value });
   },
 });
 
 const articleContent = computed({
   get: () => props.article.content,
   set: content => {
-    quickSave({ content });
-    saveAndSyncDebounced({ content });
+    handleSave({ content });
   },
 });
 

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

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

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

@@ -3,6 +3,7 @@ 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,
@@ -37,6 +38,7 @@ const emit = defineEmits([
 
 const route = useRoute();
 const { t } = useI18n();
+const { updateUISettings } = useUISettings();
 
 const isCategoryMenuOpen = ref(false);
 const isLocaleMenuOpen = ref(false);
@@ -111,13 +113,12 @@ 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 }) => {
@@ -143,7 +144,7 @@ const handleTabChange = value => {
     />
     <div class="flex items-start justify-between w-full gap-2">
       <div class="flex items-center gap-2">
-        <div v-if="hasMoreThanOneLocaleMenuItems" class="relative group">
+        <div class="relative group">
           <OnClickOutside @trigger="isLocaleMenuOpen = false">
             <Button
               :label="activeLocaleName"
@@ -157,6 +158,7 @@ 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"
             />
@@ -177,6 +179,7 @@ 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,11 +99,19 @@ const getStatusMessage = (status, isSuccess) => {
     : '';
 };
 
-const updateMeta = () => {
+const updatePortalMeta = () => {
   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 {
@@ -127,7 +135,8 @@ const handleArticleAction = async (action, { status, id }) => {
         useTrack(PORTALS_EVENTS.PUBLISH_ARTICLE);
       }
     }
-    await updateMeta();
+    await updateArticlesMeta();
+    await updatePortalMeta();
   } catch (error) {
     const errorMessage =
       error?.message ||

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

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

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

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

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

@@ -2,6 +2,7 @@
 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';
@@ -20,6 +21,7 @@ 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;
@@ -56,26 +58,40 @@ const changeDefaultLocale = ({ localeCode }) => {
     defaultLocale: localeCode,
     messageKey: 'CHANGE_DEFAULT_LOCALE',
   });
-
   useTrack(PORTALS_EVENTS.SET_DEFAULT_LOCALE, {
     newLocale: localeCode,
     from: route.name,
   });
 };
 
-const deletePortalLocale = ({ localeCode }) => {
+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 updatedLocales = props.locales
     .filter(locale => locale.code !== localeCode)
     .map(locale => locale.code);
 
   const defaultLocale = props.portal.meta.default_locale;
 
-  updatePortalLocales({
+  await 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/NewConversation/ComposeConversation.vue

@@ -171,6 +171,10 @@ watch(
   { immediate: true, deep: true }
 );
 
+const handleClickOutside = () => {
+  showComposeNewConversation.value = false;
+};
+
 onMounted(() => resetContacts());
 
 const keyboardEvents = {
@@ -188,7 +192,12 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    v-on-click-outside="() => (showComposeNewConversation = false)"
+    v-on-click-outside="[
+      handleClickOutside,
+      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
+      // This will prevent closing the compose conversation modal when the editor Create link popup is open.
+      { ignore: ['div.ProseMirror-prompt'] },
+    ]"
     class="relative"
     :class="{
       'z-40': showComposeNewConversation,

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

@@ -77,7 +77,7 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
-// Added this watch to dynamically set signature.
+// Added this watch to dynamically set signature on target inbox change.
 // Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
 // Set the signature only if the inbox based flag is true
 watch(
@@ -86,7 +86,8 @@ watch(
     nextTick(() => {
       if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
     });
-  }
+  },
+  { immediate: true }
 );
 
 const onClickInsertEmoji = emoji => {

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

@@ -0,0 +1,73 @@
+<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/captain/PageLayout.vue

@@ -1,8 +1,12 @@
 <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';
 
-defineProps({
+const { featureFlag } = defineProps({
   currentPage: {
     type: Number,
     default: 1,
@@ -19,10 +23,26 @@ defineProps({
     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,
@@ -30,6 +50,11 @@ defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
+const { isCloudFeatureEnabled } = useAccount();
+
+const showPaywall = computed(() => {
+  return !isCloudFeatureEnabled(featureFlag);
+});
 
 const handleButtonClick = () => {
   emit('click');
@@ -52,16 +77,19 @@ const handlePageChange = event => {
             <slot name="headerTitle" />
           </span>
           <div
+            v-if="!showPaywall"
             v-on-clickaway="() => emit('close')"
             class="relative group/campaign-button"
           >
-            <Button
-              :label="buttonLabel"
-              icon="i-lucide-plus"
-              size="sm"
-              class="group-hover/campaign-button:brightness-110"
-              @click="handleButtonClick"
-            />
+            <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>
@@ -69,7 +97,21 @@ const handlePageChange = event => {
     </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="default" />
+        <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">

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

@@ -3,6 +3,7 @@ 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';
@@ -28,31 +29,41 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['action']);
+const { checkPermissions } = usePolicy();
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const menuItems = computed(() => [
-  {
-    label: t('CAPTAIN.ASSISTANTS.OPTIONS.VIEW_CONNECTED_INBOXES'),
-    value: 'viewConnectedInboxes',
-    action: 'viewConnectedInboxes',
-    icon: 'i-lucide-link',
-  },
-  {
-    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',
-  },
-]);
+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));
 

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

@@ -3,6 +3,7 @@ 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';
@@ -32,25 +33,33 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['action']);
+const { checkPermissions } = usePolicy();
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const menuItems = computed(() => [
-  {
-    label: t('CAPTAIN.DOCUMENTS.OPTIONS.VIEW_RELATED_RESPONSES'),
-    value: 'viewRelatedQuestions',
-    action: 'viewRelatedQuestions',
-    icon: 'i-ph-tree-view-duotone',
-  },
-  {
-    label: t('CAPTAIN.DOCUMENTS.OPTIONS.DELETE_DOCUMENT'),
-    value: 'delete',
-    action: 'delete',
-    icon: 'i-lucide-trash',
-  },
-]);
+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));
 

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

@@ -6,6 +6,7 @@ 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({
@@ -76,8 +77,9 @@ const handleAction = ({ action, value }) => {
         {{ inboxName }}
       </span>
       <div class="flex items-center gap-2">
-        <div
+        <Policy
           v-on-clickaway="() => toggleDropdown(false)"
+          :permissions="['administrator']"
           class="relative flex items-center group"
         >
           <Button
@@ -93,7 +95,7 @@ const handleAction = ({ action, value }) => {
             class="mt-1 ltr:right-0 rtl:left-0 top-full"
             @action="handleAction($event)"
           />
-        </div>
+        </Policy>
       </div>
     </div>
   </CardLayout>

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

@@ -7,6 +7,7 @@ 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: {
@@ -107,8 +108,9 @@ const handleDocumentableClick = () => {
         {{ question }}
       </span>
       <div v-if="!compact" class="flex items-center gap-2">
-        <div
+        <Policy
           v-on-clickaway="() => toggleDropdown(false)"
+          :permissions="['administrator']"
           class="relative flex items-center group"
         >
           <Button
@@ -124,7 +126,7 @@ const handleDocumentableClick = () => {
             class="mt-1 ltr:right-0 rtl:right-0 top-full"
             @action="handleAssistantAction($event)"
           />
-        </div>
+        </Policy>
       </div>
     </div>
     <span class="text-n-slate-11 text-sm line-clamp-5">

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

@@ -20,6 +20,8 @@ const props = defineProps({
   },
 });
 
+const emit = defineEmits(['deleteSuccess']);
+
 const { t } = useI18n();
 const store = useStore();
 const deleteDialogRef = ref(null);
@@ -30,6 +32,7 @@ const deleteEntity = async payload => {
 
   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`));

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

@@ -0,0 +1,41 @@
+<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/document/LimitBanner.vue

@@ -0,0 +1,40 @@
+<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/emptyStates/AssistantPageEmptyState.vue

@@ -15,6 +15,7 @@ const onClick = () => {
   <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">

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

@@ -15,6 +15,7 @@ const onClick = () => {
   <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">

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

@@ -15,6 +15,7 @@ const onClick = () => {
   <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">

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

@@ -15,6 +15,7 @@ const onClick = () => {
   <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">

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

@@ -0,0 +1,42 @@
+<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 { responseLimits, fetchLimits } = useCaptain();
+
+const openBilling = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: accountId.value },
+  });
+};
+
+const showBanner = computed(() => {
+  if (!responseLimits.value) return false;
+
+  const { consumed, totalCount } = responseLimits.value;
+  if (!consumed || !totalCount) return false;
+
+  return consumed / totalCount > 0.8;
+});
+
+onMounted(fetchLimits);
+</script>
+
+<template>
+  <Banner
+    v-show="showBanner"
+    color="amber"
+    :action-label="$t('CAPTAIN.PAYWALL.UPGRADE_NOW')"
+    @action="openBilling"
+  >
+    {{ $t('CAPTAIN.BANNER.RESPONSES') }}
+  </Banner>
+</template>

app/javascript/dashboard/components-next/copilot/Copilot.vue

@@ -1,9 +1,13 @@
 <script setup>
+import { nextTick, ref, watch } from 'vue';
+import { useTrack } from 'dashboard/composables';
+import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+
 import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
-import { nextTick, ref, watch } from 'vue';
+import Icon from '../icon/Icon.vue';
 
 const props = defineProps({
   supportAgent: {
@@ -24,13 +28,24 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['sendMessage']);
+const emit = defineEmits(['sendMessage', 'reset']);
 
 const COPILOT_USER_ROLES = ['assistant', 'system'];
 
 const sendMessage = message => {
   emit('sendMessage', message);
+  useTrack(COPILOT_EVENTS.SEND_MESSAGE);
 };
+
+const useSuggestion = opt => {
+  emit('sendMessage', opt.prompt);
+  useTrack(COPILOT_EVENTS.SEND_SUGGESTED);
+};
+
+const handleReset = () => {
+  emit('reset');
+};
+
 const chatContainer = ref(null);
 
 const scrollToBottom = async () => {
@@ -40,6 +55,21 @@ const scrollToBottom = async () => {
   }
 };
 
+const promptOptions = [
+  {
+    label: 'Summarize this conversation',
+    prompt: `Summarize the key points discussed between the customer and the support agent, including the customer's concerns, questions, and the solutions or responses provided by the support agent`,
+  },
+  {
+    label: 'Suggest an answer',
+    prompt: `Analyze the customer’s inquiry, and draft a response that effectively addresses their concerns or questions. Ensure the reply is clear, concise, and provides helpful information.`,
+  },
+  {
+    label: 'Rate this conversation',
+    prompt: `Review the conversation to see how well it meets the customer’s needs. Share a rating out of 5 based on tone, clarity, and effectiveness.`,
+  },
+];
+
 watch(
   [() => props.messages, () => props.isCaptainTyping],
   () => {
@@ -50,7 +80,7 @@ watch(
 </script>
 
 <template>
-  <div class="flex flex-col ]mx-auto h-full text-sm leading-6 tracking-tight">
+  <div class="flex flex-col h-full text-sm leading-6 tracking-tight">
     <div ref="chatContainer" class="flex-1 px-4 py-4 space-y-6 overflow-y-auto">
       <template v-for="message in messages" :key="message.id">
         <CopilotAgentMessage
@@ -67,7 +97,32 @@ watch(
 
       <CopilotLoader v-if="isCaptainTyping" />
     </div>
-
-    <CopilotInput class="mx-3 mt-px mb-4" @send="sendMessage" />
+    <div>
+      <div v-if="!messages.length" class="flex-1 px-3 py-3 space-y-1">
+        <span class="text-xs text-n-slate-10">
+          {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
+        </span>
+        <button
+          v-for="prompt in promptOptions"
+          :key="prompt"
+          class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
+          @click="() => useSuggestion(prompt)"
+        >
+          <span>{{ prompt.label }}</span>
+          <Icon icon="i-lucide-chevron-right" />
+        </button>
+      </div>
+      <div class="mx-3 mt-px mb-2 flex flex-col items-end flex-1">
+        <button
+          v-if="messages.length"
+          class="text-xs flex items-center gap-1 hover:underline"
+          @click="handleReset"
+        >
+          <i class="i-lucide-refresh-ccw" />
+          <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
+        </button>
+        <CopilotInput class="mb-1 flex-1 w-full" @send="sendMessage" />
+      </div>
+    </div>
   </div>
 </template>

app/javascript/dashboard/components-next/copilot/CopilotAssistantMessage.vue

@@ -1,8 +1,12 @@
 <script setup>
 import { computed } from 'vue';
 import { emitter } from 'shared/helpers/mitt';
+import { useTrack } from 'dashboard/composables';
+
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import { COPILOT_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
+import MessageFormatter from 'shared/helpers/MessageFormatter.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from '../avatar/Avatar.vue';
@@ -18,6 +22,11 @@ const props = defineProps({
   },
 });
 
+const messageContent = computed(() => {
+  const formatter = new MessageFormatter(props.message.content);
+  return formatter.formattedMessage;
+});
+
 const insertIntoRichEditor = computed(() => {
   return [INBOX_TYPES.WEB, INBOX_TYPES.EMAIL].includes(
     props.conversationInboxType
@@ -30,6 +39,7 @@ const useCopilotResponse = () => {
   } else {
     emitter.emit(BUS_EVENTS.INSERT_INTO_NORMAL_EDITOR, props.message?.content);
   }
+  useTrack(COPILOT_EVENTS.USE_CAPTAIN_RESPONSE);
 };
 </script>
 
@@ -43,9 +53,7 @@ const useCopilotResponse = () => {
     />
     <div class="flex flex-col gap-1 text-n-slate-12">
       <div class="font-medium">{{ $t('CAPTAIN.NAME') }}</div>
-      <div class="break-words">
-        {{ message.content }}
-      </div>
+      <div v-dompurify-html="messageContent" class="prose-sm break-words" />
       <div class="flex flex-row mt-1">
         <Button
           :label="$t('CAPTAIN.COPILOT.USE')"

app/javascript/dashboard/components-next/message/Message.vue

@@ -34,6 +34,8 @@ import UnsupportedBubble from './bubbles/Unsupported.vue';
 import ContactBubble from './bubbles/Contact.vue';
 import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
+import CSATBubble from './bubbles/CSAT.vue';
+import FormBubble from './bubbles/Form.vue';
 
 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -260,6 +262,16 @@ const componentToRender = computed(() => {
     if (emailInboxTypes.includes(props.messageType)) return EmailBubble;
   }
 
+  if (props.contentType === CONTENT_TYPES.INPUT_CSAT) {
+    return CSATBubble;
+  }
+
+  if (
+    [CONTENT_TYPES.INPUT_SELECT, CONTENT_TYPES.FORM].includes(props.contentType)
+  ) {
+    return FormBubble;
+  }
+
   if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
     return EmailBubble;
   }

app/javascript/dashboard/components-next/message/MessageList.vue

@@ -15,18 +15,14 @@ import { useCamelCase } from 'dashboard/composables/useTransformKeys';
  * @property {Array} messages - Array of all messages [These are not in camelcase]
  */
 const props = defineProps({
-  readMessages: {
-    type: Array,
-    default: () => [],
-  },
-  unReadMessages: {
-    type: Array,
-    default: () => [],
-  },
   currentUserId: {
     type: Number,
     required: true,
   },
+  firstUnreadId: {
+    type: Number,
+    default: null,
+  },
   isAnEmailChannel: {
     type: Boolean,
     default: false,
@@ -41,12 +37,8 @@ const props = defineProps({
   },
 });
 
-const unread = computed(() => {
-  return useCamelCase(props.unReadMessages, { deep: true });
-});
-
-const read = computed(() => {
-  return useCamelCase(props.readMessages, { deep: true });
+const allMessages = computed(() => {
+  return useCamelCase(props.messages, { deep: true });
 });
 
 /**
@@ -108,26 +100,18 @@ const getInReplyToMessage = parentMessage => {
 <template>
   <ul class="px-4 bg-n-background">
     <slot name="beforeAll" />
-    <template v-for="(message, index) in read" :key="message.id">
-      <Message
-        v-bind="message"
-        :is-email-inbox="isAnEmailChannel"
-        :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, read)"
-        :inbox-supports-reply-to="inboxSupportsReplyTo"
-        :current-user-id="currentUserId"
-        data-clarity-mask="True"
+    <template v-for="(message, index) in allMessages" :key="message.id">
+      <slot
+        v-if="firstUnreadId && message.id === firstUnreadId"
+        name="unreadBadge"
       />
-    </template>
-    <slot name="beforeUnread" />
-    <template v-for="(message, index) in unread" :key="message.id">
       <Message
         v-bind="message"
+        :is-email-inbox="isAnEmailChannel"
         :in-reply-to="getInReplyToMessage(message)"
-        :group-with-next="shouldGroupWithNext(index, unread)"
+        :group-with-next="shouldGroupWithNext(index, allMessages)"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
-        :is-email-inbox="isAnEmailChannel"
         data-clarity-mask="True"
       />
     </template>

app/javascript/dashboard/components-next/message/bubbles/CSAT.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import { useI18n } from 'vue-i18n';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+import { useMessageContext } from '../provider.js';
+
+const { contentAttributes } = useMessageContext();
+const { t } = useI18n();
+
+const response = computed(() => {
+  return contentAttributes.value?.submittedValues?.csatSurveyResponse ?? {};
+});
+
+const isRatingSubmitted = computed(() => {
+  return !!response.value.rating;
+});
+
+const rating = computed(() => {
+  if (isRatingSubmitted.value) {
+    return CSAT_RATINGS.find(
+      csatOption => csatOption.value === response.value.rating
+    );
+  }
+
+  return null;
+});
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+    <h4>{{ t('CONVERSATION.CSAT_REPLY_MESSAGE') }}</h4>
+    <dl v-if="isRatingSubmitted" class="mt-4">
+      <dt class="text-n-slate-11 italic">
+        {{ t('CONVERSATION.RATING_TITLE') }}
+      </dt>
+      <dd>{{ t(rating.translationKey) }}</dd>
+
+      <dt v-if="response.feedbackMessage" class="text-n-slate-11 italic mt-2">
+        {{ t('CONVERSATION.FEEDBACK_TITLE') }}
+      </dt>
+      <dd>{{ response.feedbackMessage }}</dd>
+    </dl>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue

@@ -26,7 +26,18 @@ const ccEmail = computed(() => {
 });
 
 const senderName = computed(() => {
-  return sender.value.name ?? '';
+  const fromEmailAddress = fromEmail.value[0] ?? '';
+  const senderEmail = sender.value.email ?? '';
+
+  if (!fromEmailAddress && !senderEmail) return null;
+
+  // if the sender of the conversation and the sender of this particular
+  // email are the same, only then we return the sender name
+  if (fromEmailAddress === senderEmail) {
+    return sender.value.name;
+  }
+
+  return null;
 });
 
 const bccEmail = computed(() => {
@@ -59,11 +70,19 @@ const showMeta = computed(() => {
     :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
   >
     <template v-if="showMeta">
-      <div v-if="fromEmail[0]">
-        <span :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'">
-          {{ senderName }}
-        </span>
-        &lt;{{ fromEmail[0] }}&gt;
+      <div
+        v-if="fromEmail[0]"
+        :class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'"
+      >
+        <template v-if="senderName">
+          <span>
+            {{ senderName }}
+          </span>
+          &lt;{{ fromEmail[0] }}&gt;
+        </template>
+        <template v-else>
+          {{ fromEmail[0] }}
+        </template>
       </div>
       <div v-if="toEmail.length">
         {{ $t('EMAIL_HEADER.TO') }}: {{ toEmail.join(', ') }}

app/javascript/dashboard/components-next/message/bubbles/Form.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from './Base.vue';
+import { useI18n } from 'vue-i18n';
+import { CONTENT_TYPES } from '../constants.js';
+import { useMessageContext } from '../provider.js';
+
+const { content, contentAttributes, contentType } = useMessageContext();
+const { t } = useI18n();
+
+const formValues = computed(() => {
+  if (contentType.value === CONTENT_TYPES.FORM) {
+    const { items, submittedValues = [] } = contentAttributes.value;
+
+    if (submittedValues.length) {
+      return submittedValues.map(submittedValue => {
+        const item = items.find(
+          formItem => formItem.name === submittedValue.name
+        );
+        return {
+          title: submittedValue.value,
+          value: submittedValue.value,
+          label: item?.label,
+        };
+      });
+    }
+
+    return [];
+  }
+
+  if (contentType.value === CONTENT_TYPES.INPUT_SELECT) {
+    const [item] = contentAttributes.value?.submittedValues ?? [];
+    if (!item) return [];
+
+    return [
+      {
+        title: item.title,
+        value: item.value,
+        label: '',
+      },
+    ];
+  }
+
+  return [];
+});
+</script>
+
+<template>
+  <BaseBubble class="px-4 py-3" data-bubble-name="csat">
+    <span v-dompurify-html="content" :title="content" />
+    <dl v-if="formValues.length" class="mt-4">
+      <template v-for="item in formValues" :key="item.title">
+        <dt class="text-n-slate-11 italic mt-2">
+          {{ item.label || t('CONVERSATION.RESPONSE') }}
+        </dt>
+        <dd>{{ item.title }}</dd>
+      </template>
+    </dl>
+    <div v-else class="my-2 font-medium">
+      {{ t('CONVERSATION.NO_RESPONSE') }}
+    </div>
+  </BaseBubble>
+</template>

app/javascript/dashboard/components-next/message/bubbles/Image.vue

@@ -1,13 +1,19 @@
 <script setup>
 import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
 import BaseBubble from './Base.vue';
 import Button from 'next/button/Button.vue';
 import Icon from 'next/icon/Icon.vue';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 import { useMessageContext } from '../provider.js';
+import { downloadFile } from '@chatwoot/utils';
+
 import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
 
 const emit = defineEmits(['error']);
+const { t } = useI18n();
+
 const { filteredCurrentChatAttachments, attachments } = useMessageContext();
 
 const attachment = computed(() => {
@@ -16,6 +22,7 @@ const attachment = computed(() => {
 
 const hasError = ref(false);
 const showGallery = ref(false);
+const isDownloading = ref(false);
 
 const handleError = () => {
   hasError.value = true;
@@ -23,16 +30,15 @@ const handleError = () => {
 };
 
 const downloadAttachment = async () => {
-  const response = await fetch(attachment.value.dataUrl);
-  const blob = await response.blob();
-  const url = window.URL.createObjectURL(blob);
-  const a = document.createElement('a');
-  a.href = url;
-  a.download = `attachment${attachment.value.extension || ''}`;
-  document.body.appendChild(a);
-  a.click();
-  window.URL.revokeObjectURL(url);
-  document.body.removeChild(a);
+  const { fileType, dataUrl, extension } = attachment.value;
+  try {
+    isDownloading.value = true;
+    await downloadFile({ url: dataUrl, type: fileType, extension });
+  } catch (error) {
+    useAlert(t('GALLERY_VIEW.ERROR_DOWNLOADING'));
+  } finally {
+    isDownloading.value = false;
+  }
 };
 </script>
 
@@ -66,7 +72,9 @@ const downloadAttachment = async () => {
           slate
           icon="i-lucide-download"
           class="opacity-60"
-          @click="downloadAttachment"
+          :is-loading="isDownloading"
+          :disabled="isDownloading"
+          @click.stop="downloadAttachment"
         />
       </div>
     </div>

app/javascript/dashboard/components-next/message/chips/Audio.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, useTemplateRef, ref } from 'vue';
 import Icon from 'next/icon/Icon.vue';
 import { timeStampAppendedURL } from 'dashboard/helper/URLHelper';
+import { downloadFile } from '@chatwoot/utils';
 
 const { attachment } = defineProps({
   attachment: {
@@ -37,9 +38,10 @@ onMounted(() => {
 });
 
 const formatTime = time => {
+  if (!time || Number.isNaN(time)) return '00:00';
   const minutes = Math.floor(time / 60);
   const seconds = Math.floor(time % 60);
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
 
 const toggleMute = () => {
@@ -48,7 +50,7 @@ const toggleMute = () => {
 };
 
 const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value.currentTime;
+  currentTime.value = audioPlayer.value?.currentTime;
 };
 
 const seek = event => {
@@ -73,17 +75,8 @@ const onEnd = () => {
 };
 
 const downloadAudio = async () => {
-  const response = await fetch(timeStampURL.value);
-  const blob = await response.blob();
-  const url = window.URL.createObjectURL(blob);
-  const anchor = document.createElement('a');
-  anchor.href = url;
-  const filename = timeStampURL.value.split('/').pop().split('?')[0] || 'audio';
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  window.URL.revokeObjectURL(url);
-  document.body.removeChild(anchor);
+  const { fileType, dataUrl, extension } = attachment;
+  downloadFile({ url: dataUrl, type: fileType, extension });
 };
 </script>
 

app/javascript/dashboard/components-next/message/chips/File.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { getFileInfo } from '@chatwoot/utils';
 
 import FileIcon from 'next/icon/FileIcon.vue';
 import Icon from 'next/icon/Icon.vue';
@@ -14,17 +15,20 @@ const { attachment } = defineProps({
 
 const { t } = useI18n();
 
-const fileName = computed(() => {
-  const url = attachment.dataUrl;
-  if (url) {
-    const filename = url.substring(url.lastIndexOf('/') + 1);
-    return filename || t('CONVERSATION.UNKNOWN_FILE_TYPE');
-  }
-  return t('CONVERSATION.UNKNOWN_FILE_TYPE');
+const fileDetails = computed(() => {
+  return getFileInfo(attachment?.dataUrl || '');
 });
 
-const fileType = computed(() => {
-  return fileName.value.split('.').pop();
+const displayFileName = computed(() => {
+  const { base, type } = fileDetails.value;
+  const truncatedName = (str, maxLength, hasExt) =>
+    str.length > maxLength
+      ? `${str.substring(0, maxLength).trimEnd()}${hasExt ? '..' : '...'}`
+      : str;
+
+  return type
+    ? `${truncatedName(base, 12, true)}.${type}`
+    : truncatedName(base, 14, false);
 });
 
 const textColorClass = computed(() => {
@@ -47,21 +51,25 @@ const textColorClass = computed(() => {
     zip: 'dark:text-[#EDEEF0] text-[#2F265F]',
   };
 
-  return colorMap[fileType.value] || 'text-n-slate-12';
+  return colorMap[fileDetails.value.type] || 'text-n-slate-12';
 });
 </script>
 
 <template>
   <div
-    class="h-9 bg-n-alpha-white gap-2 items-center flex px-2 rounded-lg border border-n-container"
+    class="h-9 bg-n-alpha-white gap-2 overflow-hidden items-center flex px-2 rounded-lg border border-n-container"
   >
-    <FileIcon class="flex-shrink-0" :file-type="fileType" />
-    <span class="mr-1 max-w-32 truncate" :class="textColorClass">
-      {{ fileName }}
+    <FileIcon class="flex-shrink-0" :file-type="fileDetails.type" />
+    <span
+      class="flex-1 min-w-0 text-sm max-w-36"
+      :title="fileDetails.name"
+      :class="textColorClass"
+    >
+      {{ displayFileName }}
     </span>
     <a
       v-tooltip="t('CONVERSATION.DOWNLOAD')"
-      class="flex-shrink-0 h-9 grid place-content-center cursor-pointer text-n-slate-11"
+      class="flex-shrink-0 size-9 grid place-content-center cursor-pointer text-n-slate-11 hover:text-n-slate-12 transition-colors"
       :href="attachment.dataUrl"
       rel="noreferrer noopener nofollow"
       target="_blank"

app/javascript/dashboard/components-next/pagination/PaginationFooter.vue

@@ -63,7 +63,7 @@ const pageInfo = computed(() => {
 
 <template>
   <div
-    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center"
+    class="flex justify-between h-12 w-full max-w-[957px] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-background before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
   >
     <div class="flex items-center gap-3">
       <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">

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

@@ -8,6 +8,7 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -36,6 +37,18 @@ const toggleShortcutModalFn = show => {
   }
 };
 
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showV4Routes = computed(() => {
+  return isFeatureEnabledonAccount.value(
+    currentAccountId.value,
+    FEATURE_FLAGS.REPORT_V4
+  );
+});
+
 useSidebarKeyboardShortcuts(toggleShortcutModalFn);
 
 // We're using localStorage to store the expanded item in the sidebar
@@ -77,6 +90,59 @@ const sortedInboxes = computed(() =>
   inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );
 
+const newReportRoutes = [
+  {
+    name: 'Reports Agent',
+    label: t('SIDEBAR.REPORTS_AGENT'),
+    to: accountScopedRoute('agent_reports_index'),
+    activeOn: ['agent_reports_show'],
+  },
+  {
+    name: 'Reports Label',
+    label: t('SIDEBAR.REPORTS_LABEL'),
+    to: accountScopedRoute('label_reports'),
+  },
+  {
+    name: 'Reports Inbox',
+    label: t('SIDEBAR.REPORTS_INBOX'),
+    to: accountScopedRoute('inbox_reports_index'),
+    activeOn: ['inbox_reports_show'],
+  },
+  {
+    name: 'Reports Team',
+    label: t('SIDEBAR.REPORTS_TEAM'),
+    to: accountScopedRoute('team_reports_index'),
+    activeOn: ['team_reports_show'],
+  },
+];
+
+const oldReportRoutes = [
+  {
+    name: 'Reports Agent',
+    label: t('SIDEBAR.REPORTS_AGENT'),
+    to: accountScopedRoute('agent_reports'),
+  },
+  {
+    name: 'Reports Label',
+    label: t('SIDEBAR.REPORTS_LABEL'),
+    to: accountScopedRoute('label_reports'),
+  },
+  {
+    name: 'Reports Inbox',
+    label: t('SIDEBAR.REPORTS_INBOX'),
+    to: accountScopedRoute('inbox_reports'),
+  },
+  {
+    name: 'Reports Team',
+    label: t('SIDEBAR.REPORTS_TEAM'),
+    to: accountScopedRoute('team_reports'),
+  },
+];
+
+const reportRoutes = computed(() =>
+  showV4Routes.value ? newReportRoutes : oldReportRoutes
+);
+
 const menuItems = computed(() => {
   return [
     {
@@ -85,6 +151,9 @@ const menuItems = computed(() => {
       icon: 'i-lucide-inbox',
       to: accountScopedRoute('inbox_view'),
       activeOn: ['inbox_view', 'inbox_view_conversation'],
+      getterKeys: {
+        badge: 'notifications/getHasUnreadNotifications',
+      },
     },
     {
       name: 'Conversation',
@@ -171,20 +240,24 @@ const menuItems = computed(() => {
       name: 'Captain',
       icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
+      showOnlyOnCloud: true,
       children: [
         {
           name: 'Assistants',
           label: t('SIDEBAR.CAPTAIN_ASSISTANTS'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_assistants_index'),
         },
         {
           name: 'Documents',
           label: t('SIDEBAR.CAPTAIN_DOCUMENTS'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_documents_index'),
         },
         {
           name: 'Responses',
           label: t('SIDEBAR.CAPTAIN_RESPONSES'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_responses_index'),
         },
       ],
@@ -261,31 +334,12 @@ const menuItems = computed(() => {
           label: t('SIDEBAR.REPORTS_CONVERSATION'),
           to: accountScopedRoute('conversation_reports'),
         },
+        ...reportRoutes.value,
         {
           name: 'Reports CSAT',
           label: t('SIDEBAR.CSAT'),
           to: accountScopedRoute('csat_reports'),
         },
-        {
-          name: 'Reports Agent',
-          label: t('SIDEBAR.REPORTS_AGENT'),
-          to: accountScopedRoute('agent_reports'),
-        },
-        {
-          name: 'Reports Label',
-          label: t('SIDEBAR.REPORTS_LABEL'),
-          to: accountScopedRoute('label_reports'),
-        },
-        {
-          name: 'Reports Inbox',
-          label: t('SIDEBAR.REPORTS_INBOX'),
-          to: accountScopedRoute('inbox_reports'),
-        },
-        {
-          name: 'Reports Team',
-          label: t('SIDEBAR.REPORTS_TEAM'),
-          to: accountScopedRoute('team_reports'),
-        },
         {
           name: 'Reports SLA',
           label: t('SIDEBAR.REPORTS_SLA'),
@@ -455,6 +509,7 @@ const menuItems = computed(() => {
           name: 'Settings Billing',
           label: t('SIDEBAR.BILLING'),
           icon: 'i-lucide-credit-card',
+          showOnlyOnCloud: true,
           to: accountScopedRoute('billing_settings_index'),
         },
       ],

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

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useAccount } from 'dashboard/composables/useAccount';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
@@ -19,6 +20,12 @@ const { accountId, currentAccount } = useAccount();
 const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 
+const userAccounts = useMapGetter('getUserAccounts');
+
+const showAccountSwitcher = computed(
+  () => userAccounts.value.length > 1 && currentAccount.value.name
+);
+
 const onChangeAccount = newId => {
   const accountUrl = `/app/accounts/${newId}/dashboard`;
   window.location.href = accountUrl;
@@ -37,9 +44,14 @@ const emitNewAccount = () => {
         :data-account-id="accountId"
         aria-haspopup="listbox"
         aria-controls="account-options"
-        class="flex items-center gap-2 justify-between w-full rounded-lg hover:bg-n-alpha-1 px-2"
-        :class="{ 'bg-n-alpha-1': isOpen }"
-        @click="toggle"
+        class="flex items-center gap-2 justify-between w-full rounded-lg px-2"
+        :class="[
+          isOpen && 'bg-n-alpha-1',
+          showAccountSwitcher
+            ? 'hover:bg-n-alpha-1 cursor-pointer'
+            : 'cursor-default',
+        ]"
+        @click="() => showAccountSwitcher && toggle()"
       >
         <span
           class="text-sm font-medium leading-5 text-n-slate-12 truncate"
@@ -49,13 +61,14 @@ const emitNewAccount = () => {
         </span>
 
         <span
+          v-if="showAccountSwitcher"
           aria-hidden="true"
           class="i-lucide-chevron-down size-4 text-n-slate-10 flex-shrink-0"
         />
       </button>
     </template>
-    <DropdownBody class="min-w-80 z-50">
-      <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_WORKSPACE')">
+    <DropdownBody v-if="showAccountSwitcher" class="min-w-80 z-50">
+      <DropdownSection :title="t('SIDEBAR_ITEMS.SWITCH_ACCOUNT')">
         <DropdownItem
           v-for="account in currentUser.accounts"
           :id="`account-${account.id}`"

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

@@ -15,6 +15,7 @@ const props = defineProps({
   to: { type: Object, default: null },
   activeOn: { type: Array, default: () => [] },
   children: { type: Array, default: undefined },
+  getterKeys: { type: Object, default: () => ({}) },
 });
 
 const {
@@ -23,6 +24,7 @@ const {
   resolvePath,
   resolvePermissions,
   resolveFeatureFlag,
+  isOnChatwootCloud,
   isAllowed,
 } = useSidebarContext();
 
@@ -41,6 +43,7 @@ const hasChildren = computed(
 const accessibleItems = computed(() => {
   if (!hasChildren.value) return [];
   return props.children.filter(child => {
+    if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
     // If a item has no link, it means it's just a subgroup header
     // So we don't need to check for permissions here, because there's nothing to
     // access here anyway
@@ -141,6 +144,7 @@ onMounted(async () => {
       :name
       :label
       :to
+      :getter-keys="getterKeys"
       :is-active="isActive"
       :has-active-child="hasActiveChild"
       :expandable="hasChildren"

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

@@ -1,7 +1,8 @@
 <script setup>
+import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';
 
-defineProps({
+const props = defineProps({
   to: { type: [Object, String], default: '' },
   label: { type: String, default: '' },
   icon: { type: [String, Object], default: '' },
@@ -9,9 +10,12 @@ defineProps({
   isExpanded: { type: Boolean, default: false },
   isActive: { type: Boolean, default: false },
   hasActiveChild: { type: Boolean, default: false },
+  getterKeys: { type: Object, default: () => ({}) },
 });
 
 const emit = defineEmits(['toggle']);
+
+const showBadge = useMapGetter(props.getterKeys.badge);
 </script>
 
 <template>
@@ -28,7 +32,13 @@ const emit = defineEmits(['toggle']);
     }"
     @click.stop="emit('toggle')"
   >
-    <Icon v-if="icon" :icon="icon" class="size-4" />
+    <div v-if="icon" class="relative flex items-center gap-2">
+      <Icon v-if="icon" :icon="icon" class="size-4" />
+      <span
+        v-if="showBadge"
+        class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
+      />
+    </div>
     <span class="text-sm font-medium leading-5 flex-grow">
       {{ label }}
     </span>

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

@@ -9,18 +9,28 @@ const props = defineProps({
   to: { type: [String, Object], required: true },
   icon: { type: [String, Object], default: null },
   active: { type: Boolean, default: false },
+  showOnlyOnCloud: { type: Boolean, default: false },
   component: { type: Function, default: null },
 });
 
-const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
+const { resolvePermissions, resolveFeatureFlag, isOnChatwootCloud } =
+  useSidebarContext();
+
+const allowedToShow = computed(() => {
+  if (props.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
+
+  return true;
+});
 
 const shouldRenderComponent = computed(() => {
   return typeof props.component === 'function' || isVNode(props.component);
 });
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
+    v-if="allowedToShow"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"

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

@@ -2,7 +2,6 @@
 import { computed, ref } from 'vue';
 import SidebarGroupLeaf from './SidebarGroupLeaf.vue';
 import SidebarGroupSeparator from './SidebarGroupSeparator.vue';
-import SidebarGroupEmptyLeaf from './SidebarGroupEmptyLeaf.vue';
 
 import { useSidebarContext } from './provider';
 import { useEventListener } from '@vueuse/core';
@@ -15,19 +14,17 @@ const props = defineProps({
   activeChild: { type: Object, default: undefined },
 });
 
-const { isAllowed } = useSidebarContext();
+const { isAllowed, isOnChatwootCloud } = useSidebarContext();
 const scrollableContainer = ref(null);
 
 const accessibleItems = computed(() =>
-  props.children.filter(child => isAllowed(child.to))
+  props.children.filter(child => {
+    if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
+    return child.to && isAllowed(child.to);
+  })
 );
 
 const hasAccessibleItems = computed(() => {
-  if (props.children.length === 0) {
-    // cases like segment, folder and labels where users can create new items
-    return true;
-  }
-
   return accessibleItems.value.length > 0;
 });
 
@@ -52,7 +49,7 @@ useEventListener(scrollableContainer, 'scroll', () => {
     :icon
     class="my-1"
   />
-  <ul class="m-0 list-none reset-base relative group">
+  <ul v-if="children.length" class="m-0 list-none reset-base relative group">
     <!-- Each element has h-8, which is 32px, we will show 7 items with one hidden at the end,
     which is 14rem. Then we add 16px so that we have some text visible from the next item  -->
     <div
@@ -61,16 +58,13 @@ useEventListener(scrollableContainer, 'scroll', () => {
         'max-h-[calc(14rem+16px)] overflow-y-scroll no-scrollbar': isScrollable,
       }"
     >
-      <template v-if="children.length">
-        <SidebarGroupLeaf
-          v-for="child in children"
-          v-show="isExpanded || activeChild?.name === child.name"
-          v-bind="child"
-          :key="child.name"
-          :active="activeChild?.name === child.name"
-        />
-      </template>
-      <SidebarGroupEmptyLeaf v-else v-show="isExpanded" class="ml-3 rtl:mr-3" />
+      <SidebarGroupLeaf
+        v-for="child in children"
+        v-show="isExpanded || activeChild?.name === child.name"
+        v-bind="child"
+        :key="child.name"
+        :active="activeChild?.name === child.name"
+      />
     </div>
     <div
       v-if="isScrollable && isExpanded"

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

@@ -1,4 +1,5 @@
 import { inject, provide } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import { useRouter } from 'vue-router';
 
@@ -11,6 +12,8 @@ export function useSidebarContext() {
   }
 
   const router = useRouter();
+  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+
   const { checkFeatureAllowed, checkPermissions } = usePolicy();
 
   const resolvePath = to => {
@@ -41,6 +44,7 @@ export function useSidebarContext() {
     resolvePermissions,
     resolveFeatureFlag,
     isAllowed,
+    isOnChatwootCloud,
   };
 }
 

app/javascript/dashboard/components/copilot/CopilotContainer.vue

@@ -18,6 +18,10 @@ const messages = ref([]);
 
 const isCaptainTyping = ref(false);
 
+const handleReset = () => {
+  messages.value = [];
+};
+
 const sendMessage = async message => {
   // Add user message
   messages.value.push({
@@ -62,5 +66,6 @@ const sendMessage = async message => {
     :is-captain-typing="isCaptainTyping"
     :conversation-inbox-type="conversationInboxType"
     @send-message="sendMessage"
+    @reset="handleReset"
   />
 </template>

app/javascript/dashboard/components/layout/config/sidebarItems/reports.js

@@ -11,6 +11,7 @@ const reports = accountId => ({
     'agent_reports',
     'label_reports',
     'inbox_reports',
+    'inbox_reports_show',
     'team_reports',
     'sla_reports',
   ],

app/javascript/dashboard/components/table/Table.vue

@@ -40,7 +40,7 @@ const headerClass = computed(() =>
           :style="{
             width: `${header.getSize()}px`,
           }"
-          class="text-left py-3 px-5 font-normal text-sm"
+          class="text-left py-3 px-5 font-medium text-sm text-n-slate-12"
           :class="headerClass"
           @click="header.column.getCanSort() && header.column.toggleSorting()"
         >

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

@@ -1,34 +1,67 @@
 <script setup>
-import { ref, computed, onMounted, nextTick, defineEmits } from 'vue';
+import { computed, onMounted, nextTick, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
 
-const { x, y } = defineProps({
+const props = defineProps({
   x: { type: Number, default: 0 },
   y: { type: Number, default: 0 },
 });
+
 const emit = defineEmits(['close']);
 
-const left = ref(x);
-const top = ref(y);
+const menuRef = useTemplateRef('menuRef');
 
-const style = computed(() => ({
-  top: top.value + 'px',
-  left: left.value + 'px',
-}));
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { width: menuWidth, height: menuHeight } = useElementBounding(menuRef);
+
+const calculatePosition = (x, y, menuW, menuH, windowW, windowH) => {
+  // Initial position
+  let left = x;
+  let top = y;
+
+  // Boundary checks
+  const isOverflowingRight = left + menuW > windowW;
+  const isOverflowingBottom = top + menuH > windowH;
+
+  // Adjust position if overflowing
+  if (isOverflowingRight) left = windowW - menuW;
+  if (isOverflowingBottom) top = windowH - menuH;
+
+  return {
+    left: Math.max(0, left),
+    top: Math.max(0, top),
+  };
+};
+
+const position = computed(() => {
+  if (!menuRef.value) return { top: `${props.y}px`, left: `${props.x}px` };
+
+  const { left, top } = calculatePosition(
+    props.x,
+    props.y,
+    menuWidth.value,
+    menuHeight.value,
+    windowWidth.value,
+    windowHeight.value
+  );
+
+  return {
+    top: `${top}px`,
+    left: `${left}px`,
+  };
+});
 
-const target = ref();
 onMounted(() => {
-  nextTick(() => {
-    target.value.focus();
-  });
+  nextTick(() => menuRef.value?.focus());
 });
 </script>
 
 <template>
   <Teleport to="body">
     <div
-      ref="target"
+      ref="menuRef"
       class="fixed outline-none z-[9999] cursor-pointer"
-      :style="style"
+      :style="position"
       tabindex="0"
       @blur="emit('close')"
     >

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

@@ -37,8 +37,10 @@ const buttonStyleClass = props.compact
   >
     <Icon
       icon="i-lucide-chevron-left"
-      class="size-5 ltr:-ml-1 rtl:-mr-1"
-      :class="props.compact ? 'text-n-slate-11' : 'text-n-blue-text'"
+      class="ltr:-ml-1 rtl:-mr-1"
+      :class="
+        props.compact ? 'text-n-slate-11 size-4' : 'text-n-blue-text size-5'
+      "
     />
     {{ buttonLabel || $t('GENERAL_SETTINGS.BACK') }}
   </button>

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

@@ -243,6 +243,15 @@ export default {
     unreadMessageCount() {
       return this.currentChat.unread_count || 0;
     },
+    unreadMessageLabel() {
+      const count =
+        this.unreadMessageCount > 9 ? '9+' : this.unreadMessageCount;
+      const label =
+        this.unreadMessageCount > 1
+          ? 'CONVERSATION.UNREAD_MESSAGES'
+          : 'CONVERSATION.UNREAD_MESSAGE';
+      return `${count} ${this.$t(label)}`;
+    },
     isInstagramDM() {
       return this.conversationType === 'instagram_direct_message';
     },
@@ -492,12 +501,11 @@ export default {
     <NextMessageList
       v-if="showNextBubbles"
       class="conversation-panel"
-      :read-messages="readMessages"
-      :un-read-messages="unReadMessages"
       :current-user-id="currentUserId"
+      :first-unread-id="unReadMessages[0]?.id"
       :is-an-email-channel="isAnEmailChannel"
       :inbox-supports-reply-to="inboxSupportsReplyTo"
-      :messages="currentChat ? currentChat.messages : []"
+      :messages="getMessages"
     >
       <template #beforeAll>
         <transition name="slide-up">
@@ -507,15 +515,10 @@ export default {
           </li>
         </transition>
       </template>
-      <template #beforeUnread>
+      <template #unreadBadge>
         <li v-show="unreadMessageCount != 0" class="unread--toast">
           <span>
-            {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
-            {{
-              unreadMessageCount > 1
-                ? $t('CONVERSATION.UNREAD_MESSAGES')
-                : $t('CONVERSATION.UNREAD_MESSAGE')
-            }}
+            {{ unreadMessageLabel }}
           </span>
         </li>
       </template>

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

@@ -1,9 +1,14 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { messageTimestamp } from 'shared/helpers/timeHelper';
+import { downloadFile } from '@chatwoot/utils';
 
+import NextButton from 'dashboard/components-next/button/Button.vue';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 const props = defineProps({
@@ -20,6 +25,8 @@ const props = defineProps({
 const emit = defineEmits(['close']);
 const show = defineModel('show', { type: Boolean, default: false });
 
+const { t } = useI18n();
+
 const getters = useStoreGetters();
 
 const ALLOWED_FILE_TYPES = {
@@ -32,6 +39,7 @@ const ALLOWED_FILE_TYPES = {
 const MAX_ZOOM_LEVEL = 2;
 const MIN_ZOOM_LEVEL = 1;
 
+const isDownloading = ref(false);
 const zoomScale = ref(1);
 const activeAttachment = ref({});
 const activeFileType = ref('');
@@ -116,15 +124,20 @@ const onClickChangeAttachment = (attachment, index) => {
   zoomScale.value = 1;
 };
 
-const onClickDownload = () => {
-  const { file_type: type, data_url: url } = activeAttachment.value;
+const onClickDownload = async () => {
+  const { file_type: type, data_url: url, extension } = activeAttachment.value;
   if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
     return;
   }
-  const link = document.createElement('a');
-  link.href = url;
-  link.download = `attachment.${type}`;
-  link.click();
+
+  try {
+    isDownloading.value = true;
+    await downloadFile({ url, type, extension });
+  } catch (error) {
+    useAlert(t('GALLERY_VIEW.ERROR_DOWNLOADING'));
+  } finally {
+    isDownloading.value = false;
+  }
 };
 
 const onRotate = type => {
@@ -164,6 +177,12 @@ const onZoom = scale => {
 };
 
 const onClickZoomImage = () => {
+  // If already at max zoom, clicking should zoom out to minimum
+  if (zoomScale.value >= MAX_ZOOM_LEVEL) {
+    zoomScale.value = MIN_ZOOM_LEVEL;
+    return;
+  }
+  // Otherwise zoom in
   onZoom(0.1);
 };
 
@@ -213,7 +232,6 @@ onMounted(() => {
     :on-close="onClose"
   >
     <div
-      v-on-clickaway="onClose"
       class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
       @click="onClose"
     >
@@ -258,63 +276,54 @@ onMounted(() => {
         <div
           class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
         >
-          <woot-button
+          <NextButton
             v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-in"
+            icon="i-lucide-zoom-in"
+            slate
+            ghost
             @click="onZoom(0.1)"
           />
-          <woot-button
+          <NextButton
             v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="zoom-out"
+            icon="i-lucide-zoom-out"
+            slate
+            ghost
             @click="onZoom(-0.1)"
           />
-          <woot-button
+          <NextButton
             v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-counter-clockwise"
+            icon="i-lucide-rotate-ccw"
+            slate
+            ghost
             @click="onRotate('counter-clockwise')"
           />
-          <woot-button
+          <NextButton
             v-if="isImage"
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-rotate-clockwise"
+            icon="i-lucide-rotate-cw"
+            slate
+            ghost
             @click="onRotate('clockwise')"
           />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="arrow-download"
+          <NextButton
+            icon="i-lucide-download"
+            slate
+            ghost
+            :is-loading="isDownloading"
+            :disabled="isDownloading"
             @click="onClickDownload"
           />
-          <woot-button
-            size="large"
-            color-scheme="secondary"
-            variant="clear"
-            icon="dismiss"
-            @click="onClose"
-          />
+          <NextButton icon="i-lucide-x" slate ghost @click="onClose" />
         </div>
       </div>
       <div class="flex items-center justify-center w-full h-full">
         <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
+          <NextButton
             v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
-            icon="chevron-left"
+            icon="i-lucide-chevron-left"
+            class="z-10 disabled:pointer-events-auto"
+            blue
+            faded
+            lg
             :disabled="activeImageIndex === 0"
             @click.stop="
               onClickChangeAttachment(
@@ -356,14 +365,14 @@ onMounted(() => {
           </div>
         </div>
         <div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
-          <woot-button
+          <NextButton
             v-if="hasMoreThanOneAttachment"
-            class="z-10"
-            size="large"
-            variant="smooth"
-            color-scheme="primary"
+            icon="i-lucide-chevron-right"
+            class="z-10 disabled:pointer-events-auto"
+            blue
+            faded
+            lg
             :disabled="activeImageIndex === allAttachments.length - 1"
-            icon="chevron-right"
             @click.stop="
               onClickChangeAttachment(
                 allAttachments[activeImageIndex + 1],

app/javascript/dashboard/components/widgets/conversation/contextMenu/menuItemWithSubmenu.vue

@@ -1,20 +1,45 @@
-<script>
-export default {
-  props: {
-    option: {
-      type: Object,
-      default: () => {},
-    },
-    subMenuAvailable: {
-      type: Boolean,
-      default: true,
-    },
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { useWindowSize, useElementBounding } from '@vueuse/core';
+
+defineProps({
+  option: {
+    type: Object,
+    default: () => {},
   },
-};
+  subMenuAvailable: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const menuRef = useTemplateRef('menuRef');
+const { width: windowWidth, height: windowHeight } = useWindowSize();
+const { bottom, right } = useElementBounding(menuRef);
+
+// Vertical position
+const verticalPosition = computed(() => {
+  const SUBMENU_HEIGHT = 240; // 15rem in pixels
+  const spaceBelow = windowHeight.value - bottom.value;
+  return spaceBelow < SUBMENU_HEIGHT ? 'bottom-0' : 'top-0';
+});
+
+// Horizontal position
+const horizontalPosition = computed(() => {
+  const SUBMENU_WIDTH = 240;
+  const spaceRight = windowWidth.value - right.value;
+  return spaceRight < SUBMENU_WIDTH ? 'right-full' : 'left-full';
+});
+
+const submenuPosition = computed(() => [
+  verticalPosition.value,
+  horizontalPosition.value,
+]);
 </script>
 
 <template>
   <div
+    ref="menuRef"
     class="text-slate-800 dark:text-slate-100 menu-with-submenu min-width-calc w-full p-1 flex items-center h-7 rounded-md relative bg-n-alpha-3/50 backdrop-blur-[100px] justify-between hover:bg-n-brand/10 cursor-pointer dark:hover:bg-n-solid-3"
     :class="!subMenuAvailable ? 'opacity-50 cursor-not-allowed' : ''"
   >
@@ -25,7 +50,8 @@ export default {
     <fluent-icon icon="chevron-right" size="12" />
     <div
       v-if="subMenuAvailable"
-      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute left-full top-0 hidden min-h-min max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      class="submenu bg-n-alpha-3 backdrop-blur-[100px] p-1 shadow-lg rounded-md absolute hidden max-h-[15rem] overflow-y-auto overflow-x-hidden cursor-pointer"
+      :class="submenuPosition"
     >
       <slot />
     </div>

app/javascript/dashboard/composables/useAccount.js

@@ -13,10 +13,14 @@ export function useAccount() {
    */
   const route = useRoute();
   const getAccountFn = useMapGetter('accounts/getAccount');
+  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+  const isFeatureEnabledonAccount = useMapGetter(
+    'accounts/isFeatureEnabledonAccount'
+  );
+
   const accountId = computed(() => {
     return Number(route.params.accountId);
   });
-
   const currentAccount = computed(() => getAccountFn.value(accountId.value));
 
   /**
@@ -28,6 +32,10 @@ export function useAccount() {
     return `/app/accounts/${accountId.value}/${url}`;
   };
 
+  const isCloudFeatureEnabled = feature => {
+    return isFeatureEnabledonAccount.value(currentAccount.value.id, feature);
+  };
+
   const accountScopedRoute = (name, params, query) => {
     return {
       name,
@@ -42,5 +50,7 @@ export function useAccount() {
     currentAccount,
     accountScopedUrl,
     accountScopedRoute,
+    isCloudFeatureEnabled,
+    isOnChatwootCloud,
   };
 }

app/javascript/dashboard/composables/useCaptain.js

@@ -0,0 +1,46 @@
+import { computed } from 'vue';
+import { useStore } from 'dashboard/composables/store.js';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useCamelCase } from 'dashboard/composables/useTransformKeys';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+
+export function useCaptain() {
+  const store = useStore();
+  const { isCloudFeatureEnabled, currentAccount } = useAccount();
+
+  const captainEnabled = computed(() => {
+    return isCloudFeatureEnabled(FEATURE_FLAGS.CAPTAIN);
+  });
+
+  const captainLimits = computed(() => {
+    return currentAccount.value?.limits?.captain;
+  });
+
+  const documentLimits = computed(() => {
+    if (captainLimits.value?.documents) {
+      return useCamelCase(captainLimits.value.documents);
+    }
+
+    return null;
+  });
+
+  const responseLimits = computed(() => {
+    if (captainLimits.value?.responses) {
+      return useCamelCase(captainLimits.value.responses);
+    }
+
+    return null;
+  });
+
+  const fetchLimits = () => {
+    store.dispatch('accounts/limits');
+  };
+
+  return {
+    captainEnabled,
+    captainLimits,
+    documentLimits,
+    responseLimits,
+    fetchLimits,
+  };
+}

app/javascript/dashboard/featureFlags.js

@@ -33,4 +33,5 @@ export const FEATURE_FLAGS = {
   CAPTAIN: 'captain_integration',
   CUSTOM_ROLES: 'custom_roles',
   CHATWOOT_V4: 'chatwoot_v4',
+  REPORT_V4: 'report_v4',
 };

app/javascript/dashboard/helper/AnalyticsHelper/events.js

@@ -100,6 +100,12 @@ export const OPEN_AI_EVENTS = Object.freeze({
   DISMISS_AI_SUGGESTION: 'OpenAI: Dismiss AI suggestions',
 });
 
+export const COPILOT_EVENTS = Object.freeze({
+  SEND_SUGGESTED: 'Copilot: Send suggested message',
+  SEND_MESSAGE: 'Copilot: Sent a message',
+  USE_CAPTAIN_RESPONSE: 'Copilot: Used captain response',
+});
+
 export const GENERAL_EVENTS = Object.freeze({
   COMMAND_BAR: 'Used commandbar',
 });

app/javascript/dashboard/helper/AudioAlerts/AudioNotificationStore.js

@@ -3,6 +3,7 @@ import {
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions';
 import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+import wootConstants from 'dashboard/constants/globals';
 
 class AudioNotificationStore {
   constructor(store) {
@@ -18,6 +19,15 @@ class AudioNotificationStore {
     return mineConversation.some(conv => conv.unread_count > 0);
   };
 
+  isMessageFromPendingConversation = (message = {}) => {
+    const { conversation_id: conversationId } = message || {};
+    if (!conversationId) return false;
+
+    const activeConversation =
+      this.store.getters.getConversationById(conversationId);
+    return activeConversation?.status === wootConstants.STATUS_TYPE.PENDING;
+  };
+
   isMessageFromCurrentConversation = message => {
     return this.store.getters.getSelectedChat?.id === message.conversation_id;
   };

app/javascript/dashboard/helper/AudioAlerts/DashboardAudioNotificationHelper.js

@@ -172,6 +172,12 @@ export class DashboardAudioNotificationHelper {
       return;
     }
 
+    // If the conversation status is pending, then dismiss the alert
+    // This case is common for all audio event types
+    if (this.store.isMessageFromPendingConversation(message)) {
+      return;
+    }
+
     // If the message is sent by the current user then dismiss the alert
     if (isMessageFromCurrentUser(message, this.currentUser.id)) {
       return;

app/javascript/dashboard/helper/AudioAlerts/specs/AudioNotificationStore.spec.js

@@ -4,6 +4,8 @@ import {
   CONVERSATION_PERMISSIONS,
 } from 'dashboard/constants/permissions';
 import { getUserPermissions } from 'dashboard/helper/permissionsHelper';
+import wootConstants from 'dashboard/constants/globals';
+
 vi.mock('dashboard/helper/permissionsHelper', () => ({
   getUserPermissions: vi.fn(),
 }));
@@ -18,6 +20,7 @@ describe('AudioNotificationStore', () => {
         getMineChats: vi.fn(),
         getSelectedChat: null,
         getCurrentAccountId: 1,
+        getConversationById: vi.fn(),
       },
     };
     audioNotificationStore = new AudioNotificationStore(store);
@@ -59,6 +62,63 @@ describe('AudioNotificationStore', () => {
     });
   });
 
+  describe('isMessageFromPendingConversation', () => {
+    it('should return true when conversation status is pending', () => {
+      store.getters.getConversationById.mockReturnValue({
+        id: 123,
+        status: wootConstants.STATUS_TYPE.PENDING,
+      });
+      const message = { conversation_id: 123 };
+
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(message)
+      ).toBe(true);
+      expect(store.getters.getConversationById).toHaveBeenCalledWith(123);
+    });
+
+    it('should return false when conversation status is not pending', () => {
+      store.getters.getConversationById.mockReturnValue({
+        id: 123,
+        status: wootConstants.STATUS_TYPE.OPEN,
+      });
+      const message = { conversation_id: 123 };
+
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(message)
+      ).toBe(false);
+      expect(store.getters.getConversationById).toHaveBeenCalledWith(123);
+    });
+
+    it('should return false when conversation is not found', () => {
+      store.getters.getConversationById.mockReturnValue(null);
+      const message = { conversation_id: 123 };
+
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(message)
+      ).toBe(false);
+      expect(store.getters.getConversationById).toHaveBeenCalledWith(123);
+    });
+
+    it('should return false when message has no conversation_id', () => {
+      const message = {};
+
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(message)
+      ).toBe(false);
+      expect(store.getters.getConversationById).not.toHaveBeenCalled();
+    });
+
+    it('should return false when message is null or undefined', () => {
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(null)
+      ).toBe(false);
+      expect(
+        audioNotificationStore.isMessageFromPendingConversation(undefined)
+      ).toBe(false);
+      expect(store.getters.getConversationById).not.toHaveBeenCalled();
+    });
+  });
+
   describe('isMessageFromCurrentConversation', () => {
     it('should return true when message is from selected chat', () => {
       store.getters.getSelectedChat = { id: 6179 };

app/javascript/dashboard/helper/featureHelper.js

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

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

@@ -99,6 +99,9 @@
       },
       "fallback": {
         "CONTENT": "has shared a url"
+      },
+      "contact": {
+        "CONTENT": "Shared contact"
       }
     },
     "CHAT_SORT_BY_FILTER": {

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

@@ -54,6 +54,7 @@
     "SUCCESS_DELETE_MESSAGE": "Message deleted successfully",
     "FAIL_DELETE_MESSSAGE": "Couldn't delete message! Try again",
     "NO_RESPONSE": "No response",
+    "RESPONSE": "Response",
     "RATING_TITLE": "Rating",
     "FEEDBACK_TITLE": "Feedback",
     "REPLY_MESSAGE_NOT_FOUND": "Message not available",
@@ -352,5 +353,11 @@
     "ONE": "{user} is typing",
     "TWO": "{user} and {secondUser} are typing",
     "MULTIPLE": "{user} and {count} others are typing"
+  },
+  "COPILOT": {
+    "TRY_THESE_PROMPTS": "Try these prompts"
+  },
+  "GALLERY_VIEW": {
+    "ERROR_DOWNLOADING": "Unable to download attachment. Please try again"
   }
 }

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

@@ -306,7 +306,24 @@
       "SEND_MESSAGE": "Send message...",
       "LOADER": "Captain is thinking",
       "YOU": "You",
-      "USE": "Use this"
+      "USE": "Use this",
+      "RESET": "Reset"
+    },
+    "PAYWALL": {
+      "TITLE": "Upgrade to use Captain AI",
+      "AVAILABLE_ON": "Captain is not available on the free plan.",
+      "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
+      "UPGRADE_NOW": "Upgrade now",
+      "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
+    },
+    "ENTERPRISE_PAYWALL": {
+      "AVAILABLE_ON": "Captain AI feature is only available in a paid plan.",
+      "UPGRADE_PROMPT": "Upgrade your plan to get access to our assistants, copilot and more.",
+      "ASK_ADMIN": "Please reach out to your administrator for the upgrade."
+    },
+    "BANNER": {
+      "RESPONSES": "You've used over 80% of your response limit. To continue using Captain AI, please upgrade.",
+      "DOCUMENTS": "Document limit reached. Upgrade to continue using Captain AI."
     },
     "FORM": {
       "CANCEL": "Cancel",
@@ -363,7 +380,7 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No assistants available",
-        "SUBTITLE": "Create an assistant to provide quick and accurate responses to your users. It can learn from your help articles and past conversations. Click the button below to get started."
+        "SUBTITLE": "Create an assistant to provide quick and accurate responses to your users. It can learn from your help articles and past conversations."
       }
     },
     "DOCUMENTS": {
@@ -405,13 +422,13 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No documents available",
-        "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant. Click the button below to get started."
+        "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant."
       }
     },
     "RESPONSES": {
       "HEADER": "FAQs",
       "ADD_NEW": "Create new FAQ",
-      "DOCUMENTABLE" : {
+      "DOCUMENTABLE": {
         "CONVERSATION": "Conversation #{id}"
       },
       "DELETE": {
@@ -421,7 +438,7 @@
         "SUCCESS_MESSAGE": "FAQ deleted successfully",
         "ERROR_MESSAGE": "There was an error deleting the FAQ, please try again."
       },
-      "FILTER" :{
+      "FILTER": {
         "ASSISTANT": "Assistant: {selected}",
         "STATUS": "Status: {selected}",
         "ALL_ASSISTANTS": "All"
@@ -469,7 +486,7 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No FAQs Found",
-        "SUBTITLE": "FAQs help your assistant provide quick and accurate answers to questions from your customers. They can be generated automatically from your content or can be added manually. Click the button below to create your first FAQ."
+        "SUBTITLE": "FAQs help your assistant provide quick and accurate answers to questions from your customers. They can be generated automatically from your content or can be added manually."
       }
     },
     "INBOXES": {
@@ -500,7 +517,7 @@
       },
       "EMPTY_STATE": {
         "TITLE": "No Connected Inboxes",
-        "SUBTITLE": "Connecting an inbox allows the assistant to handle initial questions from your customers before transferring them to you. Click the button below to set it up now."
+        "SUBTITLE": "Connecting an inbox allows the assistant to handle initial questions from your customers before transferring them to you."
       }
     }
   }

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

@@ -124,6 +124,7 @@
   },
   "AGENT_REPORTS": {
     "HEADER": "Agents Overview",
+    "DESCRIPTION": "Easily track agent performance with key metrics such as conversations, response times, resolution times, and resolved cases. Click an agent’s name to learn more.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
@@ -258,6 +259,7 @@
   },
   "INBOX_REPORTS": {
     "HEADER": "Inbox Overview",
+    "DESCRIPTION": "Quickly view your inbox performance with key metrics like conversations, response times, resolution times, and resolved cases—all in one place. Click an inbox name for more details.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_INBOX_REPORTS": "Download inbox reports",
@@ -325,6 +327,7 @@
   },
   "TEAM_REPORTS": {
     "HEADER": "Team Overview",
+    "DESCRIPTION": "Get a snapshot of your team’s performance with essential metrics, including conversations, response times, resolution times, and resolved cases. Click a team name for more details.",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
     "DOWNLOAD_TEAM_REPORTS": "Download team reports",
@@ -538,5 +541,15 @@
       },
       "VIEW_DETAILS": "View Details"
     }
+  },
+  "SUMMARY_REPORTS": {
+    "INBOX": "Inbox",
+    "AGENT": "Agent",
+    "TEAM": "Team",
+    "AVG_RESOLUTION_TIME": "Avg. Resolution Time",
+    "AVG_FIRST_RESPONSE_TIME": "Avg. First Response Time",
+    "AVG_REPLY_TIME": "Avg. Customer Waiting Time",
+    "RESOLUTION_COUNT": "Resolution Count",
+    "CONVERSATIONS": "No. of conversations"
   }
 }

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

@@ -11,7 +11,10 @@
       "CONVERSATIONS": "Conversations",
       "MESSAGES": "Messages"
     },
+    "VIEW_MORE": "View more",
+    "LOAD_MORE": "Load more",
     "SEARCHING_DATA": "Searching",
+    "LOADING_DATA": "Loading",
     "EMPTY_STATE": "No {item} found for query '{query}'",
     "EMPTY_STATE_FULL": "No results found for query '{query}'",
     "PLACEHOLDER_KEYBINDING": "/ to focus",
@@ -21,6 +24,7 @@
     "READ_MORE": "Read more",
     "WROTE": "wrote:",
     "FROM": "from",
-    "EMAIL": "email"
+    "EMAIL": "email",
+    "EMAIL_SUBJECT": "subject"
   }
 }

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

@@ -194,7 +194,7 @@
   "SIDEBAR_ITEMS": {
     "CHANGE_AVAILABILITY_STATUS": "Change",
     "CHANGE_ACCOUNTS": "Switch account",
-    "SWITCH_WORKSPACE": "Switch workspace",
+    "SWITCH_ACCOUNT": "Switch account",
     "CONTACT_SUPPORT": "Contact support",
     "SELECTOR_SUBTITLE": "Select an account from the following list",
     "PROFILE_SETTINGS": "Profile settings",
@@ -265,7 +265,7 @@
     "CAPTAIN": "Captain",
     "CAPTAIN_ASSISTANTS": "Assistants",
     "CAPTAIN_DOCUMENTS": "Documents",
-    "CAPTAIN_RESPONSES" : "FAQs",
+    "CAPTAIN_RESPONSES": "FAQs",
     "HOME": "Home",
     "AGENTS": "Agents",
     "AGENT_BOTS": "Bots",
@@ -327,15 +327,27 @@
   },
   "BILLING_SETTINGS": {
     "TITLE": "Billing",
+    "DESCRIPTION": "Manage your subscription here, upgrade your plan and get more for your team.",
     "CURRENT_PLAN": {
       "TITLE": "Current Plan",
-      "PLAN_NOTE": "You are currently subscribed to the **{plan}** plan with **{quantity}** licenses"
+      "PLAN_NOTE": "You are currently subscribed to the **{plan}** plan with **{quantity}** licenses",
+      "SEAT_COUNT": "Number of seats",
+      "RENEWS_ON": "Renews on"
     },
+    "VIEW_PRICING": "View Pricing",
     "MANAGE_SUBSCRIPTION": {
       "TITLE": "Manage your subscription",
       "DESCRIPTION": "View your previous invoices, edit your billing details, or cancel your subscription.",
       "BUTTON_TXT": "Go to the billing portal"
     },
+    "CAPTAIN": {
+      "TITLE": "Captain",
+      "DESCRIPTION": "Manage usage and credits for Captain AI.",
+      "BUTTON_TXT": "Buy more credits",
+      "DOCUMENTS": "Documents",
+      "RESPONSES": "Responses",
+      "UPGRADE": "Captain is not available on the free plan, upgrade now to get access to assistants, copilot and more."
+    },
     "CHAT_WITH_US": {
       "TITLE": "Need help?",
       "DESCRIPTION": "Do you face any issues in billing? We are here to help.",

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

@@ -1,73 +1,59 @@
-<script>
+<script setup>
+import { ref, useTemplateRef, onMounted, watch, nextTick } from 'vue';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 import ReadMore from './ReadMore.vue';
 
-export default {
-  components: {
-    ReadMore,
+const props = defineProps({
+  author: {
+    type: String,
+    default: '',
   },
-  props: {
-    author: {
-      type: String,
-      default: '',
-    },
-    content: {
-      type: String,
-      default: '',
-    },
-    searchTerm: {
-      type: String,
-      default: '',
-    },
+  content: {
+    type: String,
+    default: '',
   },
-  setup() {
-    const { formatMessage, highlightContent } = useMessageFormatter();
-    return {
-      formatMessage,
-      highlightContent,
-    };
+  searchTerm: {
+    type: String,
+    default: '',
   },
-  data() {
-    return {
-      isOverflowing: false,
-    };
-  },
-  computed: {
-    messageContent() {
-      return this.formatMessage(this.content);
-    },
-  },
-  mounted() {
-    this.$watch(() => {
-      return this.$refs.messageContainer;
-    }, this.setOverflow);
+});
 
-    this.$nextTick(this.setOverflow);
-  },
-  methods: {
-    setOverflow() {
-      const wrap = this.$refs.messageContainer;
-      if (wrap) {
-        const message = wrap.querySelector('.message-content');
-        this.isOverflowing = message.offsetHeight > 150;
-      }
-    },
-    escapeHtml(html) {
-      var text = document.createTextNode(html);
-      var p = document.createElement('p');
-      p.appendChild(text);
-      return p.innerText;
-    },
-    prepareContent(content = '') {
-      const escapedText = this.escapeHtml(content);
-      return this.highlightContent(
-        escapedText,
-        this.searchTerm,
-        'searchkey--highlight'
-      );
-    },
-  },
+const { highlightContent } = useMessageFormatter();
+
+const messageContainer = useTemplateRef('messageContainer');
+const isOverflowing = ref(false);
+
+const setOverflow = () => {
+  const wrap = messageContainer.value;
+  if (wrap) {
+    const message = wrap.querySelector('.message-content');
+    isOverflowing.value = message.offsetHeight > 150;
+  }
 };
+
+const escapeHtml = html => {
+  var text = document.createTextNode(html);
+  var p = document.createElement('p');
+  p.appendChild(text);
+  return p.innerText;
+};
+
+const prepareContent = (content = '') => {
+  const escapedText = escapeHtml(content);
+  return highlightContent(
+    escapedText,
+    props.searchTerm,
+    'searchkey--highlight'
+  );
+};
+
+onMounted(() => {
+  watch(() => {
+    return messageContainer.value;
+  }, setOverflow);
+
+  nextTick(setOverflow);
+});
 </script>
 
 <template>

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

@@ -1,4 +1,6 @@
 <script setup>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
 defineProps({
   shrink: {
     type: Boolean,
@@ -18,17 +20,18 @@ defineEmits(['expand']);
     >
       <slot />
       <div
-        class="bg-n-slate-3 rounded-md dark:bg-n-solid-3 absolute left-0 right-0 z-20 mx-auto mt-0 max-w-max bottom-2 backdrop-blur[100px]"
+        v-if="shrink"
+        class="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t to-transparent from-n-background flex items-end justify-center pb-2"
       >
-        <woot-button
-          v-if="shrink"
-          size="tiny"
-          variant="smooth"
-          color-scheme="primary"
+        <NextButton
+          :label="$t('SEARCH.READ_MORE')"
+          icon="i-lucide-chevrons-down"
+          blue
+          xs
+          faded
+          class="backdrop-filter backdrop-blur-[2px]"
           @click.prevent="$emit('expand')"
-        >
-          {{ $t('SEARCH.READ_MORE') }}
-        </woot-button>
+        />
       </div>
     </div>
   </div>

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

@@ -1,52 +1,51 @@
-<script>
-export default {
-  emits: ['search'],
+<script setup>
+import { ref, useTemplateRef, onMounted, onUnmounted } from 'vue';
+import { debounce } from '@chatwoot/utils';
 
-  data() {
-    return {
-      searchQuery: '',
-      isInputFocused: false,
-    };
-  },
-  mounted() {
-    this.$refs.searchInput.focus();
-    document.addEventListener('keydown', this.handler);
-  },
-  unmounted() {
-    document.removeEventListener('keydown', this.handler);
-  },
-  methods: {
-    handler(e) {
-      if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
-        e.preventDefault();
-        this.$refs.searchInput.focus();
-      } else if (
-        e.key === 'Escape' &&
-        document.activeElement.tagName === 'INPUT'
-      ) {
-        e.preventDefault();
-        this.$refs.searchInput.blur();
-      }
-    },
-    debounceSearch(e) {
-      this.searchQuery = e.target.value;
-      clearTimeout(this.debounce);
-      this.debounce = setTimeout(async () => {
-        if (this.searchQuery.length > 2 || this.searchQuery.match(/^[0-9]+$/)) {
-          this.$emit('search', this.searchQuery);
-        } else {
-          this.$emit('search', '');
-        }
-      }, 500);
-    },
-    onFocus() {
-      this.isInputFocused = true;
-    },
-    onBlur() {
-      this.isInputFocused = false;
-    },
-  },
+const emit = defineEmits(['search']);
+
+const searchQuery = ref('');
+const isInputFocused = ref(false);
+
+const searchInput = useTemplateRef('searchInput');
+
+const handler = e => {
+  if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
+    e.preventDefault();
+    searchInput.value.focus();
+  } else if (e.key === 'Escape' && document.activeElement.tagName === 'INPUT') {
+    e.preventDefault();
+    searchInput.value.blur();
+  }
 };
+
+const debouncedEmit = debounce(
+  value =>
+    emit('search', value.length > 1 || value.match(/^[0-9]+$/) ? value : ''),
+  500
+);
+
+const onInput = e => {
+  searchQuery.value = e.target.value;
+  debouncedEmit(searchQuery.value);
+};
+
+const onFocus = () => {
+  isInputFocused.value = true;
+};
+
+const onBlur = () => {
+  isInputFocused.value = false;
+};
+
+onMounted(() => {
+  searchInput.value.focus();
+  document.addEventListener('keydown', handler);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handler);
+});
 </script>
 
 <template>
@@ -76,7 +75,7 @@ export default {
       :value="searchQuery"
       @focus="onFocus"
       @blur="onBlur"
-      @input="debounceSearch"
+      @input="onInput"
     />
     <woot-label
       :title="$t('SEARCH.PLACEHOLDER_KEYBINDING')"

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

@@ -1,35 +0,0 @@
-<template>
-  <div class="search-input-box">
-    <woot-button
-      class="hollow"
-      size="small"
-      color-scheme="secondary"
-      is-expanded
-    >
-      <div class="search-input">
-        <fluent-icon icon="search" size="14px" class="search--icon" />
-        <span
-          class="overflow-hidden text-ellipsis whitespace-nowrap search-placeholder"
-        >
-          {{ $t('CONVERSATION.SEARCH_MESSAGES') }}
-        </span>
-      </div>
-    </woot-button>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.search-input-box {
-  @apply p-2;
-}
-.search--icon {
-  @apply flex-shrink-0 text-slate-500 dark:text-slate-300;
-}
-.search-placeholder {
-  @apply text-slate-500 dark:text-slate-300;
-}
-
-.search-input {
-  @apply flex justify-center items-center gap-1;
-}
-</style>

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

@@ -1,6 +1,8 @@
 <script setup>
-import { frontendURL } from 'dashboard/helper/URLHelper';
 import { computed } from 'vue';
+import { frontendURL } from 'dashboard/helper/URLHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
 const props = defineProps({
   id: {
@@ -37,28 +39,27 @@ const navigateTo = computed(() => {
 <template>
   <router-link
     :to="navigateTo"
-    class="flex items-center p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+    class="flex items-start p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
   >
-    <woot-thumbnail :src="thumbnail" :username="name" size="24px" />
-    <div class="ml-2 rtl:mr-2 rtl:ml-0">
-      <h5 class="text-sm name text-n-slate-12 dark:text-n-slate-12">
+    <Avatar
+      :name="name"
+      :src="thumbnail"
+      :size="24"
+      rounded-full
+      class="mt-0.5"
+    />
+    <div class="ml-2 rtl:mr-2 min-w-0 rtl:ml-0">
+      <h5 class="text-sm name truncate min-w-0 text-n-slate-12">
         {{ name }}
       </h5>
       <p
-        class="flex items-center gap-1 m-0 text-sm text-slate-600 dark:text-slate-200"
+        class="grid items-center m-0 gap-1 text-sm grid-cols-[minmax(0,1fr)_auto_auto]"
       >
-        <span v-if="email" class="email text-n-slate-12 dark:text-n-slate-12">{{
-          email
-        }}</span>
-        <span
-          v-if="phone"
-          class="separator text-n-slate-10 dark:text-n-slate-10"
-        >
-          •
-        </span>
-        <span v-if="phone" class="phone text-n-slate-12 dark:text-n-slate-12">
-          {{ phone }}
+        <span v-if="email" class="truncate text-n-slate-12" :title="email">
+          {{ email }}
         </span>
+        <span v-if="phone" class="text-n-slate-10">•</span>
+        <span v-if="phone" class="text-n-slate-12">{{ phone }}</span>
       </p>
     </div>
   </router-link>

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

@@ -1,38 +1,29 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { useMapGetter } from 'dashboard/composables/store.js';
 
 import SearchResultSection from './SearchResultSection.vue';
 import SearchResultContactItem from './SearchResultContactItem.vue';
 
-export default {
-  components: {
-    SearchResultSection,
-    SearchResultContactItem,
+defineProps({
+  contacts: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    contacts: {
-      type: Array,
-      default: () => [],
-    },
-    query: {
-      type: String,
-      default: '',
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
+  query: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
+  isFetching: {
+    type: Boolean,
+    default: false,
   },
-};
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const accountId = useMapGetter('getCurrentAccountId');
 </script>
 
 <template>
@@ -43,7 +34,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="contacts.length" class="space-y-1.5">
+    <ul v-if="contacts.length" class="space-y-1.5 list-none">
       <li v-for="contact in contacts" :key="contact.id">
         <SearchResultContactItem
           :id="contact.id"

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

@@ -1,72 +1,95 @@
-<script>
+<script setup>
+import { computed } from 'vue';
+
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import InboxName from 'dashboard/components/widgets/InboxName.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
-export default {
-  components: {
-    InboxName,
+const props = defineProps({
+  id: {
+    type: Number,
+    default: 0,
   },
-  props: {
-    id: {
-      type: Number,
-      default: 0,
-    },
-    inbox: {
-      type: Object,
-      default: () => ({}),
-    },
-    name: {
-      type: String,
-      default: '',
-    },
-    email: {
-      type: String,
-      default: '',
-    },
-    accountId: {
-      type: [String, Number],
-      default: '',
-    },
-    createdAt: {
-      type: [String, Date, Number],
-      default: '',
-    },
-    messageId: {
-      type: Number,
-      default: 0,
-    },
+  inbox: {
+    type: Object,
+    default: () => ({}),
   },
-  computed: {
-    navigateTo() {
-      const params = {};
-      if (this.messageId) {
-        params.messageId = this.messageId;
-      }
-      return frontendURL(
-        `accounts/${this.accountId}/conversations/${this.id}`,
-        params
-      );
-    },
-    createdAtTime() {
-      return dynamicTime(this.createdAt);
-    },
+  name: {
+    type: String,
+    default: '',
   },
-};
+  email: {
+    type: String,
+    default: '',
+  },
+  accountId: {
+    type: [String, Number],
+    default: '',
+  },
+  createdAt: {
+    type: [String, Date, Number],
+    default: '',
+  },
+  messageId: {
+    type: Number,
+    default: 0,
+  },
+  emailSubject: {
+    type: String,
+    default: '',
+  },
+});
+
+const navigateTo = computed(() => {
+  const params = {};
+  if (props.messageId) {
+    params.messageId = props.messageId;
+  }
+  return frontendURL(
+    `accounts/${props.accountId}/conversations/${props.id}`,
+    params
+  );
+});
+
+const createdAtTime = dynamicTime(props.createdAt);
+
+const infoItems = computed(() => [
+  {
+    label: 'SEARCH.FROM',
+    value: props.name,
+    show: !!props.name,
+  },
+  {
+    label: 'SEARCH.EMAIL',
+    value: props.email,
+    show: !!props.email,
+  },
+  {
+    label: 'SEARCH.EMAIL_SUBJECT',
+    value: props.emailSubject,
+    show: !!props.emailSubject,
+  },
+]);
+
+const visibleInfoItems = computed(() =>
+  infoItems.value.filter(item => item.show)
+);
 </script>
 
 <template>
   <router-link
     :to="navigateTo"
-    class="flex p-2 rounded-md cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3"
+    class="flex p-2 rounded-xl cursor-pointer hover:bg-n-slate-2"
   >
-    <div
-      class="flex items-center justify-center flex-shrink-0 w-6 h-6 rounded bg-n-brand/10 dark:bg-n-brand/40 text-n-blue-text dark:text-n-blue-text"
-    >
-      <fluent-icon icon="chat-multiple" :size="14" />
-    </div>
+    <Avatar
+      name="chats"
+      :size="24"
+      icon-name="i-lucide-messages-square"
+      class="[&>span]:rounded"
+    />
     <div class="flex-grow min-w-0 ml-2">
-      <div class="flex items-center justify-between mb-1">
+      <div class="flex items-center min-w-0 justify-between gap-1 mb-1">
         <div class="flex">
           <woot-label
             class="!bg-n-slate-3 dark:!bg-n-solid-3 !border-n-weak dark:!border-n-strong m-0"
@@ -83,36 +106,24 @@ export default {
             />
           </div>
         </div>
-        <div>
-          <span
-            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
-          >
-            {{ createdAtTime }}
-          </span>
-        </div>
+        <span
+          class="text-xs font-normal min-w-0 truncate text-n-slate-11 dark:text-n-slate-11"
+        >
+          {{ createdAtTime }}
+        </span>
       </div>
-      <div class="flex gap-2">
+      <div class="flex flex-wrap gap-x-2 gap-y-1.5">
         <h5
-          v-if="name"
-          class="m-0 text-sm text-n-slate-12 dark:text-n-slate-12"
+          v-for="item in visibleInfoItems"
+          :key="item.label"
+          class="m-0 text-sm min-w-0 text-n-slate-12 dark:text-n-slate-12 truncate"
         >
           <span
             class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
           >
-            {{ $t('SEARCH.FROM') }}:
+            {{ $t(item.label) }}:
           </span>
-          {{ name }}
-        </h5>
-        <h5
-          v-if="email"
-          class="m-0 overflow-hidden text-sm text-n-slate-12 dark:text-n-slate-12 whitespace-nowrap text-ellipsis"
-        >
-          <span
-            class="text-xs font-normal text-n-slate-11 dark:text-n-slate-11"
-          >
-            {{ $t('SEARCH.EMAIL') }}:
-          </span>
-          {{ email }}
+          {{ item.value }}
         </h5>
       </div>
       <slot />

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

@@ -1,37 +1,36 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { defineProps, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store.js';
 import SearchResultSection from './SearchResultSection.vue';
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
 
-export default {
-  components: {
-    SearchResultSection,
-    SearchResultConversationItem,
+const props = defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    conversations: {
-      type: Array,
-      default: () => [],
-    },
-    query: {
-      type: String,
-      default: '',
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
+  query: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
+  isFetching: {
+    type: Boolean,
+    default: false,
   },
-};
+  showTitle: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const accountId = useMapGetter('getCurrentAccountId');
+
+const conversationsWithSubject = computed(() => {
+  return props.conversations.map(conversation => ({
+    ...conversation,
+    mail_subject: conversation.additional_attributes?.mail_subject || '',
+  }));
+});
 </script>
 
 <template>
@@ -39,11 +38,14 @@ export default {
     :title="$t('SEARCH.SECTION.CONVERSATIONS')"
     :empty="!conversations.length"
     :query="query"
-    :show-title="showTitle || isFetching"
+    :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="conversations.length" class="space-y-1.5">
-      <li v-for="conversation in conversations" :key="conversation.id">
+    <ul v-if="conversations.length" class="space-y-1.5 list-none">
+      <li
+        v-for="conversation in conversationsWithSubject"
+        :key="conversation.id"
+      >
         <SearchResultConversationItem
           :id="conversation.id"
           :name="conversation.contact.name"
@@ -51,6 +53,7 @@ export default {
           :account-id="accountId"
           :inbox="conversation.inbox"
           :created-at="conversation.created_at"
+          :email-subject="conversation.mail_subject"
         />
       </li>
     </ul>

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

@@ -1,45 +1,37 @@
-<script>
-import { mapGetters } from 'vuex';
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store.js';
+
 import SearchResultConversationItem from './SearchResultConversationItem.vue';
 import SearchResultSection from './SearchResultSection.vue';
 import MessageContent from './MessageContent.vue';
 
-export default {
-  components: {
-    SearchResultConversationItem,
-    SearchResultSection,
-    MessageContent,
+defineProps({
+  messages: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    messages: {
-      type: Array,
-      default: () => [],
-    },
-    query: {
-      type: String,
-      default: '',
-    },
-    isFetching: {
-      type: Boolean,
-      default: false,
-    },
-    showTitle: {
-      type: Boolean,
-      default: true,
-    },
+  query: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapGetters({
-      accountId: 'getCurrentAccountId',
-    }),
+  isFetching: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    getName(message) {
-      return message && message.sender && message.sender.name
-        ? message.sender.name
-        : this.$t('SEARCH.BOT_LABEL');
-    },
+  showTitle: {
+    type: Boolean,
+    default: true,
   },
+});
+const { t } = useI18n();
+
+const accountId = useMapGetter('getCurrentAccountId');
+
+const getName = message => {
+  return message && message.sender && message.sender.name
+    ? message.sender.name
+    : t('SEARCH.BOT_LABEL');
 };
 </script>
 
@@ -51,7 +43,7 @@ export default {
     :show-title="showTitle"
     :is-fetching="isFetching"
   >
-    <ul v-if="messages.length" class="space-y-1.5">
+    <ul v-if="messages.length" class="space-y-1.5 list-none">
       <li v-for="message in messages" :key="message.id">
         <SearchResultConversationItem
           :id="message.conversation_id"

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

@@ -32,14 +32,14 @@ const titleCase = computed(() => props.title.toLowerCase());
     <div v-if="showTitle" class="sticky top-0 p-2 z-50 mb-0.5 bg-n-background">
       <h3 class="text-sm text-n-slate-12">{{ title }}</h3>
     </div>
+    <slot />
     <woot-loading-state
       v-if="isFetching"
-      :message="$t('SEARCH.SEARCHING_DATA')"
+      :message="empty ? $t('SEARCH.SEARCHING_DATA') : $t('SEARCH.LOADING_DATA')"
     />
-    <slot v-else />
     <div
       v-if="empty && !isFetching"
-      class="flex items-center justify-center px-4 py-6 m-2 rounded-md bg-n-slate-2 dark:bg-n-solid-3"
+      class="flex items-center justify-center px-4 py-6 m-2 rounded-xl bg-n-slate-2 dark:bg-n-solid-1"
     >
       <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
       <p class="mx-2 my-0 text-center text-n-slate-11">

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

@@ -1,39 +1,38 @@
-<script>
-export default {
-  props: {
-    tabs: {
-      type: Array,
-      default: () => [],
-    },
-    selectedTab: {
-      type: Number,
-      default: 0,
-    },
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => [],
   },
-  emits: ['tabChange'],
-  data() {
-    return {
-      activeTab: 0,
-    };
-  },
-  watch: {
-    selectedTab(value, oldValue) {
-      if (value !== oldValue) {
-        this.activeTab = this.selectedTab;
-      }
-    },
-  },
-  methods: {
-    onTabChange(index) {
-      this.activeTab = index;
-      this.$emit('tabChange', this.tabs[index].key);
-    },
+  selectedTab: {
+    type: Number,
+    default: 0,
   },
+});
+
+const emit = defineEmits(['tabChange']);
+
+const activeTab = ref(props.selectedTab);
+
+watch(
+  () => props.selectedTab,
+  (value, oldValue) => {
+    if (value !== oldValue) {
+      activeTab.value = props.selectedTab;
+    }
+  }
+);
+
+const onTabChange = index => {
+  activeTab.value = index;
+  emit('tabChange', props.tabs[index].key);
 };
 </script>
 
 <template>
-  <div class="tab-container">
+  <div class="mt-1 border-b border-n-weak">
     <woot-tabs :index="activeTab" :border="false" @change="onTabChange">
       <woot-tabs-item
         v-for="(item, index) in tabs"
@@ -41,13 +40,8 @@ export default {
         :index="index"
         :name="item.name"
         :count="item.count"
+        :show-badge="item.showBadge"
       />
     </woot-tabs>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.tab-container {
-  @apply mt-1 border-b border-solid border-slate-100 dark:border-slate-800/50;
-}
-</style>

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

@@ -1,12 +1,9 @@
-<script>
-import SearchHeader from './SearchHeader.vue';
-import SearchTabs from './SearchTabs.vue';
-import SearchResultConversationsList from './SearchResultConversationsList.vue';
-import SearchResultMessagesList from './SearchResultMessagesList.vue';
-import SearchResultContactsList from './SearchResultContactsList.vue';
-import ButtonV4 from 'dashboard/components-next/button/Button.vue';
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useMapGetter, useStore } from 'dashboard/composables/store.js';
+import { useRouter } from 'vue-router';
 import { useTrack } from 'dashboard/composables';
-import Policy from 'dashboard/components/policy.vue';
+import { useI18n } from 'vue-i18n';
 import {
   ROLES,
   CONVERSATION_PERMISSIONS,
@@ -16,197 +13,233 @@ import {
   getUserPermissions,
   filterItemsByPermission,
 } from 'dashboard/helper/permissionsHelper.js';
-
-import { mapGetters } from 'vuex';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 
-export default {
-  components: {
-    SearchHeader,
-    SearchTabs,
-    SearchResultContactsList,
-    SearchResultConversationsList,
-    SearchResultMessagesList,
-    Policy,
-    ButtonV4,
-  },
-  data() {
-    return {
-      selectedTab: 'all',
-      query: '',
-      contactPermissions: CONTACT_PERMISSIONS,
-      conversationPermissions: CONVERSATION_PERMISSIONS,
-      rolePermissions: ROLES,
-    };
-  },
+import Policy from 'dashboard/components/policy.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import SearchHeader from './SearchHeader.vue';
+import SearchTabs from './SearchTabs.vue';
+import SearchResultConversationsList from './SearchResultConversationsList.vue';
+import SearchResultMessagesList from './SearchResultMessagesList.vue';
+import SearchResultContactsList from './SearchResultContactsList.vue';
 
-  computed: {
-    ...mapGetters({
-      currentUser: 'getCurrentUser',
-      currentAccountId: 'getCurrentAccountId',
-      contactRecords: 'conversationSearch/getContactRecords',
-      conversationRecords: 'conversationSearch/getConversationRecords',
-      messageRecords: 'conversationSearch/getMessageRecords',
-      uiFlags: 'conversationSearch/getUIFlags',
-    }),
-    contacts() {
-      return this.contactRecords.map(contact => ({
-        ...contact,
-        type: 'contact',
-      }));
-    },
-    conversations() {
-      return this.conversationRecords.map(conversation => ({
-        ...conversation,
-        type: 'conversation',
-      }));
-    },
-    messages() {
-      return this.messageRecords.map(message => ({
-        ...message,
-        type: 'message',
-      }));
-    },
-    all() {
-      return [...this.contacts, ...this.conversations, ...this.messages];
-    },
-    filterContacts() {
-      return this.selectedTab === 'contacts' || this.isSelectedTabAll;
-    },
-    filterConversations() {
-      return this.selectedTab === 'conversations' || this.isSelectedTabAll;
-    },
-    filterMessages() {
-      return this.selectedTab === 'messages' || this.isSelectedTabAll;
-    },
-    userPermissions() {
-      return getUserPermissions(this.currentUser, this.currentAccountId);
-    },
-    totalSearchResultsCount() {
-      const permissionCounts = {
-        contacts: {
-          permissions: [...this.rolePermissions, this.contactPermissions],
-          count: () => this.contacts.length,
-        },
-        conversations: {
-          permissions: [
-            ...this.rolePermissions,
-            ...this.conversationPermissions,
-          ],
-          count: () => this.conversations.length + this.messages.length,
-        },
-      };
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
 
-      const filteredCounts = filterItemsByPermission(
-        permissionCounts,
-        this.userPermissions,
-        item => item.permissions,
-        (_, item) => item.count
-      );
+const PER_PAGE = 15; // Results per page
+const selectedTab = ref('all');
+const query = ref('');
+const pages = ref({
+  contacts: 1,
+  conversations: 1,
+  messages: 1,
+});
 
-      return filteredCounts.reduce((total, count) => total + count(), 0);
-    },
-    tabs() {
-      const allTabsConfig = {
-        all: {
-          key: 'all',
-          name: this.$t('SEARCH.TABS.ALL'),
-          count: this.totalSearchResultsCount,
-          permissions: [
-            this.contactPermissions,
-            ...this.rolePermissions,
-            ...this.conversationPermissions,
-          ],
-        },
-        contacts: {
-          key: 'contacts',
-          name: this.$t('SEARCH.TABS.CONTACTS'),
-          count: this.contacts.length,
-          permissions: [...this.rolePermissions, this.contactPermissions],
-        },
-        conversations: {
-          key: 'conversations',
-          name: this.$t('SEARCH.TABS.CONVERSATIONS'),
-          count: this.conversations.length,
-          permissions: [
-            ...this.rolePermissions,
-            ...this.conversationPermissions,
-          ],
-        },
-        messages: {
-          key: 'messages',
-          name: this.$t('SEARCH.TABS.MESSAGES'),
-          count: this.messages.length,
-          permissions: [
-            ...this.rolePermissions,
-            ...this.conversationPermissions,
-          ],
-        },
-      };
+const currentUser = useMapGetter('getCurrentUser');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const contactRecords = useMapGetter('conversationSearch/getContactRecords');
+const conversationRecords = useMapGetter(
+  'conversationSearch/getConversationRecords'
+);
+const messageRecords = useMapGetter('conversationSearch/getMessageRecords');
+const uiFlags = useMapGetter('conversationSearch/getUIFlags');
 
-      return filterItemsByPermission(
-        allTabsConfig,
-        this.userPermissions,
-        item => item.permissions
-      );
-    },
-    activeTabIndex() {
-      const index = this.tabs.findIndex(tab => tab.key === this.selectedTab);
-      return index >= 0 ? index : 0;
-    },
-    showEmptySearchResults() {
-      return (
-        this.totalSearchResultsCount === 0 &&
-        this.uiFlags.isSearchCompleted &&
-        !this.uiFlags.isFetching &&
-        this.query
-      );
-    },
-    showResultsSection() {
-      return (
-        (this.uiFlags.isSearchCompleted &&
-          this.totalSearchResultsCount !== 0) ||
-        this.uiFlags.isFetching
-      );
-    },
-    isSelectedTabAll() {
-      return this.selectedTab === 'all';
-    },
+const addTypeToRecords = (records, type) =>
+  records.value.map(item => ({ ...item, type }));
+
+const mappedContacts = computed(() =>
+  addTypeToRecords(contactRecords, 'contact')
+);
+const mappedConversations = computed(() =>
+  addTypeToRecords(conversationRecords, 'conversation')
+);
+const mappedMessages = computed(() =>
+  addTypeToRecords(messageRecords, 'message')
+);
+
+const isSelectedTabAll = computed(() => selectedTab.value === 'all');
+
+const sliceRecordsIfAllTab = items =>
+  isSelectedTabAll.value ? items.value.slice(0, 5) : items.value;
+
+const contacts = computed(() => sliceRecordsIfAllTab(mappedContacts));
+const conversations = computed(() => sliceRecordsIfAllTab(mappedConversations));
+const messages = computed(() => sliceRecordsIfAllTab(mappedMessages));
+
+const filterByTab = tab =>
+  computed(() => selectedTab.value === tab || isSelectedTabAll.value);
+
+const filterContacts = filterByTab('contacts');
+const filterConversations = filterByTab('conversations');
+const filterMessages = filterByTab('messages');
+
+const userPermissions = computed(() =>
+  getUserPermissions(currentUser.value, currentAccountId.value)
+);
+
+const TABS_CONFIG = {
+  all: {
+    permissions: [CONTACT_PERMISSIONS, ...ROLES, ...CONVERSATION_PERMISSIONS],
+    count: () => null, // No count for all tab
   },
-  unmounted() {
-    this.query = '';
-    this.$store.dispatch('conversationSearch/clearSearchResults');
+  contacts: {
+    permissions: [...ROLES, CONTACT_PERMISSIONS],
+    count: () => mappedContacts.value.length,
   },
-  mounted() {
-    this.$store.dispatch('conversationSearch/clearSearchResults');
+  conversations: {
+    permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+    count: () => mappedConversations.value.length,
   },
-  methods: {
-    onSearch(q) {
-      this.selectedTab = 'all';
-      this.query = q;
-      if (!q) {
-        this.$store.dispatch('conversationSearch/clearSearchResults');
-        return;
-      }
-      useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
-      this.$store.dispatch('conversationSearch/fullSearch', { q });
-    },
-    onBack() {
-      if (window.history.length > 2) {
-        this.$router.go(-1);
-      } else {
-        this.$router.push({ name: 'home' });
-      }
-    },
+  messages: {
+    permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+    count: () => mappedMessages.value.length,
   },
 };
+
+const tabs = computed(() => {
+  const configs = Object.entries(TABS_CONFIG).map(([key, config]) => ({
+    key,
+    name: t(`SEARCH.TABS.${key.toUpperCase()}`),
+    count: config.count(),
+    showBadge: key !== 'all',
+    permissions: config.permissions,
+  }));
+
+  return filterItemsByPermission(
+    configs,
+    userPermissions.value,
+    item => item.permissions
+  );
+});
+
+const totalSearchResultsCount = computed(() => {
+  const permissionCounts = {
+    contacts: {
+      permissions: [...ROLES, CONTACT_PERMISSIONS],
+      count: () => contacts.value.length,
+    },
+    conversations: {
+      permissions: [...ROLES, ...CONVERSATION_PERMISSIONS],
+      count: () => conversations.value.length + messages.value.length,
+    },
+  };
+  return filterItemsByPermission(
+    permissionCounts,
+    userPermissions.value,
+    item => item.permissions,
+    (_, item) => item.count
+  ).reduce((total, count) => total + count(), 0);
+});
+
+const activeTabIndex = computed(() => {
+  const index = tabs.value.findIndex(tab => tab.key === selectedTab.value);
+  return index >= 0 ? index : 0;
+});
+
+const isFetchingAny = computed(() => {
+  const { contact, message, conversation, isFetching } = uiFlags.value;
+  return (
+    isFetching ||
+    contact.isFetching ||
+    message.isFetching ||
+    conversation.isFetching
+  );
+});
+
+const showEmptySearchResults = computed(
+  () =>
+    totalSearchResultsCount.value === 0 &&
+    uiFlags.value.isSearchCompleted &&
+    isSelectedTabAll.value &&
+    !isFetchingAny.value &&
+    query.value
+);
+
+const showResultsSection = computed(
+  () =>
+    (uiFlags.value.isSearchCompleted && totalSearchResultsCount.value !== 0) ||
+    isFetchingAny.value ||
+    (!isSelectedTabAll.value && query.value && !isFetchingAny.value)
+);
+
+const showLoadMore = computed(() => {
+  if (!query.value || isFetchingAny.value || selectedTab.value === 'all')
+    return false;
+
+  const records = {
+    contacts: mappedContacts.value,
+    conversations: mappedConversations.value,
+    messages: mappedMessages.value,
+  }[selectedTab.value];
+
+  return (
+    records?.length > 0 &&
+    records.length === pages.value[selectedTab.value] * PER_PAGE
+  );
+});
+
+const showViewMore = computed(() => ({
+  // Hide view more button if the number of records is less than 5
+  contacts: mappedContacts.value?.length > 5 && isSelectedTabAll.value,
+  conversations:
+    mappedConversations.value?.length > 5 && isSelectedTabAll.value,
+  messages: mappedMessages.value?.length > 5 && isSelectedTabAll.value,
+}));
+
+const clearSearchResult = () => {
+  pages.value = { contacts: 1, conversations: 1, messages: 1 };
+  store.dispatch('conversationSearch/clearSearchResults');
+};
+
+const onSearch = q => {
+  query.value = q;
+  clearSearchResult();
+  if (!q) return;
+  useTrack(CONVERSATION_EVENTS.SEARCH_CONVERSATION);
+  store.dispatch('conversationSearch/fullSearch', { q, page: 1 });
+};
+
+const onBack = () => {
+  if (window.history.length > 2) {
+    router.go(-1);
+  } else {
+    router.push({ name: 'home' });
+  }
+  clearSearchResult();
+};
+
+const loadMore = () => {
+  const SEARCH_ACTIONS = {
+    contacts: 'conversationSearch/contactSearch',
+    conversations: 'conversationSearch/conversationSearch',
+    messages: 'conversationSearch/messageSearch',
+  };
+
+  if (uiFlags.value.isFetching || selectedTab.value === 'all') return;
+  const tab = selectedTab.value;
+  pages.value[tab] += 1;
+  store.dispatch(SEARCH_ACTIONS[tab], {
+    q: query.value,
+    page: pages.value[tab],
+  });
+};
+
+onMounted(() => {
+  store.dispatch('conversationSearch/clearSearchResults');
+});
+
+onUnmounted(() => {
+  query.value = '';
+  store.dispatch('conversationSearch/clearSearchResults');
+});
 </script>
 
 <template>
-  <div class="flex flex-col w-full bg-n-background">
-    <div class="flex p-4">
-      <ButtonV4
-        :label="$t('GENERAL_SETTINGS.BACK')"
+  <div class="flex flex-col w-full h-full bg-n-background">
+    <div class="flex w-full p-4">
+      <NextButton
+        :label="t('GENERAL_SETTINGS.BACK')"
         icon="i-lucide-chevron-left"
         faded
         primary
@@ -214,73 +247,119 @@ export default {
         @click="onBack"
       />
     </div>
-    <section
-      class="flex my-0 p-4 relative mx-auto max-w-[45rem] min-h-[20rem] flex-col w-full h-full bg-n-background"
-    >
-      <header>
-        <SearchHeader @search="onSearch" />
-        <SearchTabs
-          v-if="query"
-          :tabs="tabs"
-          :selected-tab="activeTabIndex"
-          @tab-change="tab => (selectedTab = tab)"
-        />
-      </header>
-      <div class="flex-grow h-full px-2 py-0 overflow-y-auto">
-        <div v-if="showResultsSection">
-          <Policy :permissions="[...rolePermissions, contactPermissions]">
-            <SearchResultContactsList
-              v-if="filterContacts"
-              :is-fetching="uiFlags.contact.isFetching"
-              :contacts="contacts"
-              :query="query"
-              :show-title="isSelectedTabAll"
-            />
-          </Policy>
-
-          <Policy
-            :permissions="[...rolePermissions, ...conversationPermissions]"
-          >
-            <SearchResultMessagesList
-              v-if="filterMessages"
-              :is-fetching="uiFlags.message.isFetching"
-              :messages="messages"
-              :query="query"
-              :show-title="isSelectedTabAll"
-            />
-          </Policy>
-
-          <Policy
-            :permissions="[...rolePermissions, ...conversationPermissions]"
-          >
-            <SearchResultConversationsList
-              v-if="filterConversations"
-              :is-fetching="uiFlags.conversation.isFetching"
-              :conversations="conversations"
-              :query="query"
-              :show-title="isSelectedTabAll"
-            />
-          </Policy>
+    <section class="flex flex-col flex-grow w-full h-full overflow-hidden">
+      <div class="w-full max-w-4xl mx-auto">
+        <div class="flex flex-col w-full px-4">
+          <SearchHeader @search="onSearch" />
+          <SearchTabs
+            v-if="query"
+            :tabs="tabs"
+            :selected-tab="activeTabIndex"
+            @tab-change="tab => (selectedTab = tab)"
+          />
         </div>
-        <div
-          v-else-if="showEmptySearchResults"
-          class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
-        >
-          <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
-          <p class="m-2 text-center text-n-slate-11">
-            {{ $t('SEARCH.EMPTY_STATE_FULL', { query }) }}
-          </p>
-        </div>
-        <div
-          v-else
-          class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
-        >
-          <p class="text-center margin-bottom-0">
-            <fluent-icon icon="search" size="24px" class="text-n-slate-11" />
-          </p>
-          <p class="m-2 text-center text-n-slate-11">
-            {{ $t('SEARCH.EMPTY_STATE_DEFAULT') }}
-          </p>
+      </div>
+      <div class="flex-grow w-full h-full overflow-y-auto">
+        <div class="w-full max-w-4xl mx-auto px-4 pb-6">
+          <div v-if="showResultsSection">
+            <Policy
+              :permissions="[...ROLES, CONTACT_PERMISSIONS]"
+              class="flex flex-col justify-center"
+            >
+              <SearchResultContactsList
+                v-if="filterContacts"
+                :is-fetching="uiFlags.contact.isFetching"
+                :contacts="contacts"
+                :query="query"
+                :show-title="isSelectedTabAll"
+              />
+              <NextButton
+                v-if="showViewMore.contacts"
+                :label="t(`SEARCH.VIEW_MORE`)"
+                icon="i-lucide-eye"
+                slate
+                sm
+                outline
+                @click="selectedTab = 'contacts'"
+              />
+            </Policy>
+
+            <Policy
+              :permissions="[...ROLES, ...CONVERSATION_PERMISSIONS]"
+              class="flex flex-col justify-center"
+            >
+              <SearchResultMessagesList
+                v-if="filterMessages"
+                :is-fetching="uiFlags.message.isFetching"
+                :messages="messages"
+                :query="query"
+                :show-title="isSelectedTabAll"
+              />
+              <NextButton
+                v-if="showViewMore.messages"
+                :label="t(`SEARCH.VIEW_MORE`)"
+                icon="i-lucide-eye"
+                slate
+                sm
+                outline
+                @click="selectedTab = 'messages'"
+              />
+            </Policy>
+
+            <Policy
+              :permissions="[...ROLES, ...CONVERSATION_PERMISSIONS]"
+              class="flex flex-col justify-center"
+            >
+              <SearchResultConversationsList
+                v-if="filterConversations"
+                :is-fetching="uiFlags.conversation.isFetching"
+                :conversations="conversations"
+                :query="query"
+                :show-title="isSelectedTabAll"
+              />
+              <NextButton
+                v-if="showViewMore.conversations"
+                :label="t(`SEARCH.VIEW_MORE`)"
+                icon="i-lucide-eye"
+                slate
+                sm
+                outline
+                @click="selectedTab = 'conversations'"
+              />
+            </Policy>
+
+            <div v-if="showLoadMore" class="flex justify-center mt-4 mb-6">
+              <NextButton
+                v-if="!isSelectedTabAll"
+                :label="t(`SEARCH.LOAD_MORE`)"
+                icon="i-lucide-cloud-download"
+                slate
+                sm
+                faded
+                @click="loadMore"
+              />
+            </div>
+          </div>
+          <div
+            v-else-if="showEmptySearchResults"
+            class="flex flex-col items-center justify-center px-4 py-6 mt-8 rounded-md"
+          >
+            <fluent-icon icon="info" size="16px" class="text-n-slate-11" />
+            <p class="m-2 text-center text-n-slate-11">
+              {{ t('SEARCH.EMPTY_STATE_FULL', { query }) }}
+            </p>
+          </div>
+          <div
+            v-else-if="!query"
+            class="flex flex-col items-center justify-center px-4 py-6 mt-8 text-center rounded-md"
+          >
+            <p class="text-center margin-bottom-0">
+              <fluent-icon icon="search" size="24px" class="text-n-slate-11" />
+            </p>
+            <p class="m-2 text-center text-n-slate-11">
+              {{ t('SEARCH.EMPTY_STATE_DEFAULT') }}
+            </p>
+          </div>
         </div>
       </div>
     </section>

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

@@ -1,13 +1,15 @@
 <script setup>
 import { computed, onMounted, ref, nextTick } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CaptainPaywall from 'dashboard/components-next/captain/pageComponents/Paywall.vue';
 import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
 import AssistantPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue';
+import LimitBanner from 'dashboard/components-next/captain/pageComponents/response/LimitBanner.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -73,29 +75,37 @@ onMounted(() => store.dispatch('captainAssistants/get'));
   <PageLayout
     :header-title="$t('CAPTAIN.ASSISTANTS.HEADER')"
     :button-label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
+    :button-policy="['administrator']"
     :show-pagination-footer="false"
+    :is-fetching="isFetching"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
+    :is-empty="!assistants.length"
     @click="handleCreate"
   >
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="assistants.length" class="flex flex-col gap-4">
-      <AssistantCard
-        v-for="assistant in assistants"
-        :id="assistant.id"
-        :key="assistant.id"
-        :name="assistant.name"
-        :description="assistant.description"
-        :updated-at="assistant.updated_at || assistant.created_at"
-        :created-at="assistant.created_at"
-        @action="handleAction"
-      />
-    </div>
+    <template #emptyState>
+      <AssistantPageEmptyState @click="handleCreate" />
+    </template>
 
-    <AssistantPageEmptyState v-else @click="handleCreate" />
+    <template #paywall>
+      <CaptainPaywall />
+    </template>
+
+    <template #body>
+      <LimitBanner class="mb-5" />
+
+      <div class="flex flex-col gap-4">
+        <AssistantCard
+          v-for="assistant in assistants"
+          :id="assistant.id"
+          :key="assistant.id"
+          :name="assistant.name"
+          :description="assistant.description"
+          :updated-at="assistant.updated_at || assistant.created_at"
+          :created-at="assistant.created_at"
+          @action="handleAction"
+        />
+      </div>
+    </template>
 
     <DeleteDialog
       v-if="selectedAssistant"

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

@@ -6,11 +6,11 @@ import {
   useStoreGetters,
 } from 'dashboard/composables/store';
 import { useRoute } from 'vue-router';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import BackButton from 'dashboard/components/widgets/BackButton.vue';
 import DeleteDialog from 'dashboard/components-next/captain/pageComponents/DeleteDialog.vue';
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConnectInboxDialog from 'dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue';
 import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
 import InboxPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue';
@@ -67,19 +67,16 @@ onMounted(() =>
 </script>
 
 <template>
-  <div
-    v-if="isFetchingAssistant"
-    class="flex items-center justify-center py-10 text-n-slate-11"
-  >
-    <Spinner />
-  </div>
   <PageLayout
-    v-else
     :button-label="$t('CAPTAIN.INBOXES.ADD_NEW')"
+    :button-policy="['administrator']"
+    :is-fetching="isFetchingAssistant || isFetching"
+    :is-empty="!captainInboxes.length"
+    :feature-flag="FEATURE_FLAGS.CAPTAIN"
     :show-pagination-footer="false"
     @click="handleCreate"
   >
-    <template #headerTitle>
+    <template v-if="!isFetchingAssistant" #headerTitle>
       <div class="flex flex-row items-center gap-4">
         <BackButton compact />
         <span class="flex items-center gap-1 text-lg">
@@ -89,23 +86,22 @@ onMounted(() =>
         </span>
       </div>
     </template>
-    <div
-      v-if="isFetching"
-      class="flex items-center justify-center py-10 text-n-slate-11"
-    >
-      <Spinner />
-    </div>
-    <div v-else-if="captainInboxes.length" class="flex flex-col gap-4">
-      <InboxCard
-        v-for="captainInbox in captainInboxes"
-        :id="captainInbox.id"
-        :key="captainInbox.id"
-        :inbox="captainInbox"
-        @action="handleAction"
-      />
-    </div>
 
-    <InboxPageEmptyState v-else @click="handleCreate" />
+    <template #emptyState>
+      <InboxPageEmptyState @click="handleCreate" />
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-4">
+        <InboxCard
+          v-for="captainInbox in captainInboxes"
+          :id="captainInbox.id"
+          :key="captainInbox.id"
+          :inbox="captainInbox"
+          @action="handleAction"
+        />
+      </div>
+    </template>
 
     <DeleteDialog
       v-if="selectedInbox"

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

@@ -1,4 +1,4 @@
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+// import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { frontendURL } from '../../../helper/URLHelper';
 import AssistantIndex from './assistants/Index.vue';
 import AssistantInboxesIndex from './assistants/inboxes/Index.vue';
@@ -11,7 +11,6 @@ export const routes = [
     component: AssistantIndex,
     name: 'captain_assistants_index',
     meta: {
-      featureFlag: FEATURE_FLAGS.CAPTAIN,
       permissions: ['administrator', 'agent'],
     },
   },
@@ -22,7 +21,6 @@ export const routes = [
     component: AssistantInboxesIndex,
     name: 'captain_assistants_inboxes_index',
     meta: {
-      featureFlag: FEATURE_FLAGS.CAPTAIN,
       permissions: ['administrator', 'agent'],
     },
   },
@@ -31,7 +29,6 @@ export const routes = [
     component: DocumentsIndex,
     name: 'captain_documents_index',
     meta: {
-      featureFlag: FEATURE_FLAGS.CAPTAIN,
       permissions: ['administrator', 'agent'],
     },
   },
@@ -40,7 +37,6 @@ export const routes = [
     component: ResponsesIndex,
     name: 'captain_responses_index',
     meta: {
-      featureFlag: FEATURE_FLAGS.CAPTAIN,
       permissions: ['administrator', 'agent'],
     },
   },