feat: add timeout before marking as read

# Pull Request Template

## Description

The PR includes usability feedback fixes for the conversation card
context menu. A "Mark as Read" option has been added after "Mark as
Unread" to prevent misclicks due to shifting menu positions.
Additionally, a separator line has been introduced for better grouping
and clarity

#### **Orders**  
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/d7c04356-7cfb-4f43-ac55-beb4167f91e9"
/>
<img width="210" alt="image"
src="https://github.com/user-attachments/assets/593acd58-39cf-4b25-b119-03b89cb3528c"
/>

**Fixes** https://linear.app/chatwoot/issue/CW-4088/usability-feedback

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### **Loom video**

https://www.loom.com/share/59f8ad3bf4054b299bfcffc0ba24eca1?sid=98fbb67d-c3e9-4fa4-9b04-2a7cb3bf8568

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

.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_ee_docker.yml

@@ -0,0 +1,140 @@
+# #
+# # This action will publish Chatwoot EE docker image.
+# # This is set to run against merges to develop, master
+# # and when tags are created.
+# #
+
+name: Publish Chatwoot EE docker images
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+    tags:
+      - v*
+  workflow_dispatch:
+
+env:
+  DOCKER_REPO: chatwoot/chatwoot
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
+    env:
+      GIT_REF: ${{ github.head_ref || github.ref_name }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Prepare
+        run: |
+          platform=${{ matrix.platform }}
+          echo "PLATFORM_PAIR=${platform//\//-}" >> $GITHUB_ENV
+
+      - name: Set Chatwoot edition
+        run: |
+          echo -en '\nENV CW_EDITION="ee"' >> docker/Dockerfile
+
+      - name: Set Docker Tags
+        run: |
+          SANITIZED_REF=$(echo "$GIT_REF" | sed 's/\//-/g')
+          if [ "${{ github.ref_name }}" = "master" ]; then
+            echo "DOCKER_TAG=${DOCKER_REPO}:latest" >> $GITHUB_ENV
+          else
+            echo "DOCKER_TAG=${DOCKER_REPO}:${SANITIZED_REF}" >> $GITHUB_ENV
+          fi
+
+      - 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@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: ${{ matrix.platform }}
+          push: ${{ github.event_name == 'push' || github.event_name == 'workflow_dispatch' }}
+          outputs: type=image,name=${{ env.DOCKER_REPO }},push-by-digest=true,name-canonical=true,push=true
+
+      - 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"
+          else
+            TAG="${DOCKER_REPO}:${SANITIZED_REF}"
+          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"
+          else
+            TAG="${DOCKER_REPO}:${SANITIZED_REF}"
+          fi
+          
+          docker buildx imagetools inspect $TAG

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

.github/workflows/test_docker_build.yml

@@ -0,0 +1,40 @@
+name: Test Docker Build
+
+on:
+  pull_request:
+    branches:
+      - develop
+      - master
+  workflow_dispatch:
+
+jobs:
+  test-build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-22.04-arm
+    runs-on: ${{ matrix.runner }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Build Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          file: docker/Dockerfile
+          platforms: ${{ matrix.platform }}
+          push: false
+          load: false
+          cache-from: type=gha
+          cache-to: type=gha,mode=max

.husky/pre-commit

@@ -1,11 +1,11 @@
-# #!/bin/sh
-# . "$(dirname "$0")/_/husky.sh"
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
 
-# # lint js and vue files
-# npx --no-install lint-staged
+# lint js and vue files
+npx --no-install lint-staged
 
-# # lint only staged ruby files
-# git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
+# lint only staged ruby files
+git diff --name-only --cached | xargs ls -1 2>/dev/null | grep '\.rb$' | xargs bundle exec rubocop --force-exclusion -a
 
-# # stage rubocop changes to files
-# git diff --name-only --cached | xargs git add
+# stage rubocop changes to files
+git diff --name-only --cached | xargs git add

Gemfile

@@ -94,7 +94,7 @@ gem 'twitty', '~> 0.1.5'
 # facebook client
 gem 'koala'
 # slack client
-gem 'slack-ruby-client', '~> 2.2.0'
+gem 'slack-ruby-client', '~> 2.5.2'
 # for dialogflow integrations
 gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
 gem 'grpc'
@@ -138,9 +138,7 @@ gem 'procore-sift'
 # parse email
 gem 'email_reply_trimmer'
 
-# TODO: we might have to fork this gem since 0.3.1 has hard depency on nokogir 1.10.
-# and this gem hasn't been updated for a while.
-gem 'html2text', git: 'https://github.com/chatwoot/html2text_ruby', branch: 'chatwoot'
+gem 'html2text'
 
 # to calculate working hours
 gem 'working_hours'

Gemfile.lock

@@ -22,14 +22,6 @@ GIT
       devise (>= 4.0.0, < 5.0.0)
       railties (>= 5.0.0, < 8.0.0)
 
-GIT
-  remote: https://github.com/chatwoot/html2text_ruby
-  revision: cdbdbbbf898d846d0136d69d688a003c6b26074b
-  branch: chatwoot
-  specs:
-    html2text (0.3.1)
-      nokogiri (>= 1.13.6)
-
 GEM
   remote: https://rubygems.org/
   specs:
@@ -186,7 +178,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)
@@ -280,7 +272,8 @@ GEM
       googleauth (~> 1.0)
       grpc (~> 1.36)
     geocoder (1.8.1)
-    gli (2.21.1)
+    gli (2.22.2)
+      ostruct
     globalid (1.2.1)
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
@@ -361,6 +354,8 @@ GEM
     hana (1.3.7)
     hashdiff (1.1.0)
     hashie (5.0.0)
+    html2text (0.4.0)
+      nokogiri (>= 1.0, < 2.0)
     http (5.1.1)
       addressable (~> 2.8)
       http-cookie (~> 1.0)
@@ -487,7 +482,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)
@@ -503,14 +498,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.17.1)
+    nokogiri (1.18.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.17.1-arm64-darwin)
+    nokogiri (1.18.3-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-darwin)
+    nokogiri (1.18.3-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.17.1-x86_64-linux)
+    nokogiri (1.18.3-x86_64-linux-gnu)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -543,6 +538,7 @@ GEM
     openssl (3.2.0)
     orm_adapter (0.5.0)
     os (1.1.4)
+    ostruct (0.6.1)
     parallel (1.23.0)
     parser (3.2.2.1)
       ast (~> 2.4.1)
@@ -565,7 +561,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (2.2.10)
+    rack (2.2.11)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -751,12 +747,13 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    slack-ruby-client (2.2.0)
+    slack-ruby-client (2.5.2)
       faraday (>= 2.0)
       faraday-mashify
       faraday-multipart
       gli
       hashie
+      logger
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
@@ -782,7 +779,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)
@@ -897,7 +894,7 @@ DEPENDENCIES
   haikunator
   hairtrigger
   hashie
-  html2text!
+  html2text
   image_processing
   jbuilder
   json_refs
@@ -957,7 +954,7 @@ DEPENDENCIES
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
-  slack-ruby-client (~> 2.2.0)
+  slack-ruby-client (~> 2.5.2)
   spring
   spring-watcher-listen
   squasher

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/controllers/api/v1/accounts/inbox_members_controller.rb

@@ -10,7 +10,7 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
   def create
     authorize @inbox, :create?
     ActiveRecord::Base.transaction do
-      agents_to_be_added_ids.map { |user_id| @inbox.add_member(user_id) }
+      @inbox.add_members(agents_to_be_added_ids)
     end
     fetch_updated_agents
   end
@@ -24,7 +24,7 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
   def destroy
     authorize @inbox, :destroy?
     ActiveRecord::Base.transaction do
-      params[:user_ids].map { |user_id| @inbox.remove_member(user_id) }
+      @inbox.remove_members(params[:user_ids])
     end
     head :ok
   end
@@ -41,8 +41,8 @@ class Api::V1::Accounts::InboxMembersController < Api::V1::Accounts::BaseControl
     # the missing ones are the agents which are to be deleted from the inbox
     # the new ones are the agents which are to be added to the inbox
     ActiveRecord::Base.transaction do
-      agents_to_be_added_ids.each { |user_id| @inbox.add_member(user_id) }
-      agents_to_be_removed_ids.each { |user_id| @inbox.remove_member(user_id) }
+      @inbox.add_members(agents_to_be_added_ids)
+      @inbox.remove_members(agents_to_be_removed_ids)
     end
   end
 

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

@@ -9,14 +9,14 @@ class Api::V1::Accounts::TeamMembersController < Api::V1::Accounts::BaseControll
 
   def create
     ActiveRecord::Base.transaction do
-      @team_members = members_to_be_added_ids.map { |user_id| @team.add_member(user_id) }
+      @team_members = @team.add_members(members_to_be_added_ids)
     end
   end
 
   def update
     ActiveRecord::Base.transaction do
-      members_to_be_added_ids.each { |user_id| @team.add_member(user_id) }
-      members_to_be_removed_ids.each { |user_id| @team.remove_member(user_id) }
+      @team.add_members(members_to_be_added_ids)
+      @team.remove_members(members_to_be_removed_ids)
     end
     @team_members = @team.members
     render action: 'create'
@@ -24,7 +24,7 @@ class Api::V1::Accounts::TeamMembersController < Api::V1::Accounts::BaseControll
 
   def destroy
     ActiveRecord::Base.transaction do
-      params[:user_ids].map { |user_id| @team.remove_member(user_id) }
+      @team.remove_members(params[:user_ids])
     end
     head :ok
   end

app/controllers/dashboard_controller.rb

@@ -7,13 +7,17 @@ class DashboardController < ActionController::Base
   around_action :switch_locale
   before_action :ensure_installation_onboarding, only: [:index]
   before_action :render_hc_if_custom_domain, only: [:index]
-
+  before_action :ensure_html_format
   layout 'vueapp'
 
   def index; end
 
   private
 
+  def ensure_html_format
+    head :not_acceptable unless request.format.html?
+  end
+
   def set_global_config
     @global_config = GlobalConfig.get(
       'LOGO', 'LOGO_DARK', 'LOGO_THUMBNAIL',
@@ -32,7 +36,7 @@ class DashboardController < ActionController::Base
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
       'DEPLOYMENT_ENV',
-      'CSML_EDITOR_HOST'
+      'CSML_EDITOR_HOST', 'INSTALLATION_PRICING_PLAN'
     ).merge(app_config)
   end
 

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

@@ -94,7 +94,8 @@ module Api::V2::Accounts::HeatmapHelper
   end
 
   def since_timestamp(date)
-    (date - 6.days).to_i.to_s
+    number_of_days = params[:days_before].present? ? params[:days_before].to_i.days : 6.days
+    (date - number_of_days).to_i.to_s
   end
 
   def until_timestamp(date)

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/helpers/portal_helper.rb

@@ -5,8 +5,7 @@ module PortalHelper
   end
 
   def generate_portal_bg(portal_color, theme)
-    bg_image = theme == 'dark' ? 'hexagon-dark.svg' : 'hexagon-light.svg'
-    "url(/assets/images/hc/#{bg_image}) #{generate_portal_bg_color(portal_color, theme)}"
+    generate_portal_bg_color(portal_color, theme)
   end
 
   def generate_gradient_to_bottom(theme)

app/helpers/super_admin/account_features_helper.rb

@@ -6,4 +6,47 @@ module SuperAdmin::AccountFeaturesHelper
   def self.account_premium_features
     account_features.filter { |feature| feature['premium'] }.pluck('name')
   end
+
+  # Returns a hash mapping feature names to their display names
+  def self.feature_display_names
+    account_features.each_with_object({}) do |feature, hash|
+      hash[feature['name']] = feature['display_name']
+    end
+  end
+
+  def self.filter_internal_features(features)
+    return features if GlobalConfig.get_value('DEPLOYMENT_ENV') == 'cloud'
+
+    internal_features = account_features.select { |f| f['chatwoot_internal'] }.pluck('name')
+    features.except(*internal_features)
+  end
+
+  def self.filter_deprecated_features(features)
+    deprecated_features = account_features.select { |f| f['deprecated'] }.pluck('name')
+    features.except(*deprecated_features)
+  end
+
+  def self.sort_and_transform_features(features, display_names)
+    features.sort_by { |key, _| display_names[key] || key }
+            .to_h
+            .transform_keys { |key| [key, display_names[key]] }
+  end
+
+  def self.partition_features(features)
+    filtered = filter_internal_features(features)
+    filtered = filter_deprecated_features(filtered)
+    display_names = feature_display_names
+
+    regular, premium = filtered.partition { |key, _value| account_premium_features.exclude?(key) }
+
+    [
+      sort_and_transform_features(regular, display_names),
+      sort_and_transform_features(premium, display_names)
+    ]
+  end
+
+  def self.filtered_features(features)
+    regular, premium = partition_features(features)
+    regular.merge(premium)
+  end
 end

app/javascript/dashboard/api/reports.js

@@ -61,9 +61,9 @@ class ReportsAPI extends ApiClient {
     });
   }
 
-  getConversationTrafficCSV() {
+  getConversationTrafficCSV({ daysBefore = 6 } = {}) {
     return axios.get(`${this.url}/conversation_traffic`, {
-      params: { timezone_offset: getTimeOffset() },
+      params: { timezone_offset: getTimeOffset(), days_before: daysBefore },
     });
   }
 

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/assets/scss/super_admin/index.scss

@@ -6,3 +6,209 @@
 body {
   font-family: Inter, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
 }
+
+@layer base {
+  // FIXME: Use a common color file for all packs
+  // scss-lint:disable PropertySortOrder
+  :root {
+    --slate-1: 252 252 253;
+    --slate-2: 249 249 251;
+    --slate-3: 240 240 243;
+    --slate-4: 232 232 236;
+    --slate-5: 224 225 230;
+    --slate-6: 217 217 224;
+    --slate-7: 205 206 214;
+    --slate-8: 185 187 198;
+    --slate-9: 139 141 152;
+    --slate-10: 128 131 141;
+    --slate-11: 96 100 108;
+    --slate-12: 28 32 36;
+
+    --iris-1: 253 253 255;
+    --iris-2: 248 248 255;
+    --iris-3: 240 241 254;
+    --iris-4: 230 231 255;
+    --iris-5: 218 220 255;
+    --iris-6: 203 205 255;
+    --iris-7: 184 186 248;
+    --iris-8: 155 158 240;
+    --iris-9: 91 91 214;
+    --iris-10: 81 81 205;
+    --iris-11: 87 83 198;
+    --iris-12: 39 41 98;
+
+    --ruby-1: 255 252 253;
+    --ruby-2: 255 247 248;
+    --ruby-3: 254 234 237;
+    --ruby-4: 255 220 225;
+    --ruby-5: 255 206 214;
+    --ruby-6: 248 191 200;
+    --ruby-7: 239 172 184;
+    --ruby-8: 229 146 163;
+    --ruby-9: 229 70 102;
+    --ruby-10: 220 59 93;
+    --ruby-11: 202 36 77;
+    --ruby-12: 100 23 43;
+
+    --amber-1: 254 253 251;
+    --amber-2: 254 251 233;
+    --amber-3: 255 247 194;
+    --amber-4: 255 238 156;
+    --amber-5: 251 229 119;
+    --amber-6: 243 214 115;
+    --amber-7: 233 193 98;
+    --amber-8: 226 163 54;
+    --amber-9: 255 197 61;
+    --amber-10: 255 186 24;
+    --amber-11: 171 100 0;
+    --amber-12: 79 52 34;
+
+    --teal-1: 250 254 253;
+    --teal-2: 243 251 249;
+    --teal-3: 224 248 243;
+    --teal-4: 204 243 234;
+    --teal-5: 184 234 224;
+    --teal-6: 161 222 210;
+    --teal-7: 131 205 193;
+    --teal-8: 83 185 171;
+    --teal-9: 18 165 148;
+    --teal-10: 13 155 138;
+    --teal-11: 0 133 115;
+    --teal-12: 13 61 56;
+
+    --gray-1: 252 252 252;
+    --gray-2: 249 249 249;
+    --gray-3: 240 240 240;
+    --gray-4: 232 232 232;
+    --gray-5: 224 224 224;
+    --gray-6: 217 217 217;
+    --gray-7: 206 206 206;
+    --gray-8: 187 187 187;
+    --gray-9: 141 141 141;
+    --gray-10: 131 131 131;
+    --gray-11: 100 100 100;
+    --gray-12: 32 32 32;
+
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
+    --border-container: 236 236 236;
+    --border-strong: 235 235 235;
+    --border-weak: 234 234 234;
+    --solid-1: 255 255 255;
+    --solid-2: 255 255 255;
+    --solid-3: 255 255 255;
+    --solid-active: 255 255 255;
+    --solid-amber: 252 232 193;
+    --solid-blue: 218 236 255;
+    --solid-iris: 230 231 255;
+
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
+    --alpha-3: 255, 255, 255, 0.96;
+    --black-alpha-1: 0, 0, 0, 0.12;
+    --black-alpha-2: 0, 0, 0, 0.04;
+    --border-blue: 39, 129, 246, 0.5;
+    --white-alpha: 255, 255, 255, 0.8;
+  }
+
+  .dark {
+    --slate-1: 17 17 19;
+    --slate-2: 24 25 27;
+    --slate-3: 33 34 37;
+    --slate-4: 39 42 45;
+    --slate-5: 46 49 53;
+    --slate-6: 54 58 63;
+    --slate-7: 67 72 78;
+    --slate-8: 90 97 105;
+    --slate-9: 105 110 119;
+    --slate-10: 119 123 132;
+    --slate-11: 176 180 186;
+    --slate-12: 237 238 240;
+
+    --iris-1: 19 19 30;
+    --iris-2: 23 22 37;
+    --iris-3: 32 34 72;
+    --iris-4: 38 42 101;
+    --iris-5: 48 51 116;
+    --iris-6: 61 62 130;
+    --iris-7: 74 74 149;
+    --iris-8: 89 88 177;
+    --iris-9: 91 91 214;
+    --iris-10: 84 114 228;
+    --iris-11: 158 177 255;
+    --iris-12: 224 223 254;
+
+    --ruby-1: 25 17 19;
+    --ruby-2: 30 21 23;
+    --ruby-3: 58 20 30;
+    --ruby-4: 78 19 37;
+    --ruby-5: 94 26 46;
+    --ruby-6: 111 37 57;
+    --ruby-7: 136 52 71;
+    --ruby-8: 179 68 90;
+    --ruby-9: 229 70 102;
+    --ruby-10: 236 90 114;
+    --ruby-11: 255 148 157;
+    --ruby-12: 254 210 225;
+
+    --amber-1: 22 18 12;
+    --amber-2: 29 24 15;
+    --amber-3: 48 32 8;
+    --amber-4: 63 39 0;
+    --amber-5: 77 48 0;
+    --amber-6: 92 61 5;
+    --amber-7: 113 79 25;
+    --amber-8: 143 100 36;
+    --amber-9: 255 197 61;
+    --amber-10: 255 214 10;
+    --amber-11: 255 202 22;
+    --amber-12: 255 231 179;
+
+    --teal-1: 13 21 20;
+    --teal-2: 17 28 27;
+    --teal-3: 13 45 42;
+    --teal-4: 2 59 55;
+    --teal-5: 8 72 67;
+    --teal-6: 20 87 80;
+    --teal-7: 28 105 97;
+    --teal-8: 32 126 115;
+    --teal-9: 18 165 148;
+    --teal-10: 14 179 158;
+    --teal-11: 11 216 182;
+    --teal-12: 173 240 221;
+
+    --gray-1: 17 17 17;
+    --gray-2: 25 25 25;
+    --gray-3: 34 34 34;
+    --gray-4: 42 42 42;
+    --gray-5: 49 49 49;
+    --gray-6: 58 58 58;
+    --gray-7: 72 72 72;
+    --gray-8: 96 96 96;
+    --gray-9: 110 110 110;
+    --gray-10: 123 123 123;
+    --gray-11: 180 180 180;
+    --gray-12: 238 238 238;
+
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
+    --solid-1: 23 23 26;
+    --solid-2: 29 30 36;
+    --solid-3: 44 45 54;
+    --solid-active: 53 57 66;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
+    --solid-iris: 38 42 101;
+    --text-blue: 126 182 255;
+
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
+    --black-alpha-1: 0, 0, 0, 0.3;
+    --black-alpha-2: 0, 0, 0, 0.2;
+    --border-blue: 39, 129, 246, 0.5;
+    --border-container: 236, 236, 236, 0;
+    --white-alpha: 255, 255, 255, 0.1;
+  }
+}

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue

@@ -21,11 +21,11 @@ const addCampaign = async campaignDetails => {
       type: CAMPAIGN_TYPES.ONGOING,
     });
 
-    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
+    useAlert(t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.SUCCESS_MESSAGE'));
   } catch (error) {
     const errorMessage =
       error?.response?.message ||
-      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
+      t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE');
     useAlert(errorMessage);
   }
 };

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

@@ -8,17 +8,17 @@ import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 const props = defineProps({
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
   selectedContact: {
     type: Object,
     default: () => ({}),
   },
+  isUpdating: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['goToContactsList']);
+const emit = defineEmits(['goToContactsList', 'toggleBlock']);
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -45,9 +45,17 @@ const breadcrumbItems = computed(() => {
   return items;
 });
 
+const isContactBlocked = computed(() => {
+  return props.selectedContact?.blocked;
+});
+
 const handleBreadcrumbClick = () => {
   emit('goToContactsList');
 };
+
+const toggleBlock = () => {
+  emit('toggleBlock', isContactBlocked.value);
+};
 </script>
 
 <template>
@@ -64,11 +72,29 @@ const handleBreadcrumbClick = () => {
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <ComposeConversation :contact-id="contactId">
-              <template #trigger="{ toggle }">
-                <Button :label="buttonLabel" size="sm" @click="toggle" />
-              </template>
-            </ComposeConversation>
+            <div class="flex items-center gap-2">
+              <Button
+                :label="
+                  !isContactBlocked
+                    ? $t('CONTACTS_LAYOUT.HEADER.BLOCK_CONTACT')
+                    : $t('CONTACTS_LAYOUT.HEADER.UNBLOCK_CONTACT')
+                "
+                size="sm"
+                slate
+                :is-loading="isUpdating"
+                :disabled="isUpdating"
+                @click="toggleBlock"
+              />
+              <ComposeConversation :contact-id="contactId">
+                <template #trigger="{ toggle }">
+                  <Button
+                    :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
+                    size="sm"
+                    @click="toggle"
+                  />
+                </template>
+              </ComposeConversation>
+            </div>
           </div>
         </div>
       </header>

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

@@ -50,6 +50,7 @@ const { t } = useI18n();
       </div>
       <ComboBox
         id="inbox"
+        use-api-results
         :model-value="primaryContactId"
         :options="primaryContactList"
         :empty-state="

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';
@@ -74,7 +74,7 @@ const defaultState = {
 const state = reactive({ ...defaultState });
 
 const validationRules = {
-  firstName: { required, minLength: minLength(2) },
+  firstName: { required },
   email: { email },
 };
 

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/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 { usePolicy } from 'dashboard/composables/usePolicy';
 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 props = 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 { shouldShowPaywall } = usePolicy();
+
+const showPaywall = computed(() => {
+  return shouldShowPaywall(props.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 v-if="!showPaywall" 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/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/combobox/ComboBox.vue

@@ -13,34 +13,14 @@ const props = defineProps({
     validator: value =>
       value.every(option => 'value' in option && 'label' in option),
   },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  searchPlaceholder: {
-    type: String,
-    default: '',
-  },
-  emptyState: {
-    type: String,
-    default: '',
-  },
-  message: {
-    type: String,
-    default: '',
-  },
-  hasError: {
-    type: Boolean,
-    default: false,
-  },
+  placeholder: { type: String, default: '' },
+  modelValue: { type: [String, Number], default: '' },
+  disabled: { type: Boolean, default: false },
+  searchPlaceholder: { type: String, default: '' },
+  emptyState: { type: String, default: '' },
+  message: { type: String, default: '' },
+  hasError: { type: Boolean, default: false },
+  useApiResults: { type: Boolean, default: false }, // useApiResults prop to determine if search is handled by API
 });
 
 const emit = defineEmits(['update:modelValue', 'search']);
@@ -54,6 +34,12 @@ const dropdownRef = ref(null);
 const comboboxRef = ref(null);
 
 const filteredOptions = computed(() => {
+  // For API search, don't filter options locally
+  if (props.useApiResults && search.value) {
+    return props.options;
+  }
+
+  // For local search, filter options based on search term
   const searchTerm = search.value.toLowerCase();
   return props.options.filter(option =>
     option.label.toLowerCase().includes(searchTerm)

app/javascript/dashboard/components-next/icon/Logo.vue

@@ -1,6 +1,21 @@
+<script setup>
+import { useAttrs } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+
+const attrs = useAttrs();
+const globalConfig = useMapGetter('globalConfig/get');
+</script>
+
 <template>
+  <img
+    v-if="globalConfig.logoThumbnail"
+    v-bind="attrs"
+    :src="globalConfig.logoThumbnail"
+  />
   <svg
+    v-else
     v-once
+    v-bind="attrs"
     width="16"
     height="16"
     viewBox="0 0 16 16"

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

@@ -414,6 +414,11 @@ const avatarInfo = computed(() => {
   };
 });
 
+const avatarTooltip = computed(() => {
+  if (avatarInfo.value.name === '') return '';
+  return `${t('CONVERSATION.SENT_BY')} ${avatarInfo.value.name}`;
+});
+
 const setupHighlightTimer = () => {
   if (Number(route.query.messageId) !== Number(props.id)) {
     return;
@@ -472,6 +477,7 @@ provideMessageContext({
     >
       <div
         v-if="!shouldGroupWithNext && shouldShowAvatar"
+        v-tooltip.right-end="avatarTooltip"
         class="[grid-area:avatar] flex items-end"
       >
         <Avatar v-bind="avatarInfo" :size="24" />

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/BaseAttachment.vue

@@ -10,6 +10,7 @@ defineProps({
   iconBgColor: { type: String, default: 'bg-n-alpha-3' },
   senderTranslationKey: { type: String, required: true },
   content: { type: String, required: true },
+  title: { type: String, default: '' }, // Title can be any name, description, etc
   action: {
     type: Object,
     required: true,
@@ -23,14 +24,14 @@ const { sender } = useMessageContext();
 const { t } = useI18n();
 
 const senderName = computed(() => {
-  return sender?.value.name;
+  return sender?.value?.name || '';
 });
 </script>
 
 <template>
   <BaseBubble class="overflow-hidden p-3" data-bubble-name="attachment">
     <div class="grid gap-4 min-w-64">
-      <div class="grid gap-3 z-20">
+      <div class="grid gap-3">
         <div
           class="size-8 rounded-lg grid place-content-center"
           :class="iconBgColor"
@@ -48,6 +49,9 @@ const senderName = computed(() => {
             }}
           </div>
           <slot>
+            <div v-if="title" class="truncate text-sm text-n-slate-12">
+              {{ title }}
+            </div>
             <div v-if="content" class="truncate text-sm text-n-slate-11">
               {{ content }}
             </div>

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

@@ -11,7 +11,7 @@ import {
   ExceptionWithMessage,
 } from 'shared/helpers/CustomErrors';
 
-const { content, attachments } = useMessageContext();
+const { attachments } = useMessageContext();
 
 const $store = useStore();
 const { t } = useI18n();
@@ -24,6 +24,12 @@ const phoneNumber = computed(() => {
   return attachment.value.fallbackTitle;
 });
 
+const contactName = computed(() => {
+  const { meta } = attachment.value ?? {};
+  const { firstName, lastName } = meta ?? {};
+  return `${firstName ?? ''} ${lastName ?? ''}`.trim();
+});
+
 const formattedPhoneNumber = computed(() => {
   return phoneNumber.value.replace(/\s|-|[A-Za-z]/g, '');
 });
@@ -32,13 +38,9 @@ const rawPhoneNumber = computed(() => {
   return phoneNumber.value.replace(/\D/g, '');
 });
 
-const name = computed(() => {
-  return content.value;
-});
-
 function getContactObject() {
   const contactItem = {
-    name: name.value,
+    name: contactName.value,
     phone_number: `+${rawPhoneNumber.value}`,
   };
   return contactItem;
@@ -99,6 +101,7 @@ const action = computed(() => ({
     icon="i-teenyicons-user-circle-solid"
     icon-bg-color="bg-[#D6409F]"
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.CONTACT"
+    :title="contactName"
     :content="phoneNumber"
     :action="formattedPhoneNumber ? action : null"
   />

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

@@ -2,34 +2,30 @@
 import { computed, ref } from 'vue';
 import DyteAPI from 'dashboard/api/integrations/dyte';
 import { buildDyteURL } from 'shared/helpers/IntegrationHelper';
-import { useCamelCase } from 'dashboard/composables/useTransformKeys';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 
 import { useMessageContext } from '../provider.js';
 import BaseAttachmentBubble from './BaseAttachment.vue';
 
-const { contentAttributes } = useMessageContext();
+const { content, sender, id } = useMessageContext();
 
 const { t } = useI18n();
 
-const meetingData = computed(() => {
-  return useCamelCase(contentAttributes.value.data);
-});
-
 const isLoading = ref(false);
 const dyteAuthToken = ref('');
 
 const meetingLink = computed(() => {
-  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
+  return buildDyteURL(dyteAuthToken.value);
 });
 
 const joinTheCall = async () => {
   isLoading.value = true;
   try {
-    const { data: { authResponse: { authToken } = {} } = {} } =
-      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
-    dyteAuthToken.value = authToken;
+    const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
+      id.value
+    );
+    dyteAuthToken.value = token;
   } catch (err) {
     useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
   } finally {
@@ -38,7 +34,7 @@ const joinTheCall = async () => {
 };
 
 const leaveTheRoom = () => {
-  this.dyteAuthToken = '';
+  dyteAuthToken.value = '';
 };
 const action = computed(() => ({
   label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
@@ -53,13 +49,18 @@ const action = computed(() => ({
     sender-translation-key="CONVERSATION.SHARED_ATTACHMENT.MEETING"
     :action="action"
   >
+    <div v-if="!sender" class="text-sm truncate text-n-slate-12">
+      <!-- Added as a fallback, where the sender is not available (Deleted) -->
+      <!-- Will show the content, if senderName in BaseAttachment.vue is empty -->
+      {{ content }}
+    </div>
     <div v-if="dyteAuthToken" class="video-call--container">
       <iframe
         :src="meetingLink"
         allow="camera;microphone;fullscreen;display-capture;picture-in-picture;clipboard-write;"
       />
       <button
-        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
+        class="px-4 py-2 text-sm rounded-lg bg-n-solid-3 mt-3"
         @click="leaveTheRoom"
       >
         {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}

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/Email/Index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
+import { allowedCssProperties } from 'lettersanitizer';
 
 import Icon from 'next/icon/Icon.vue';
 import { EmailQuoteExtractor } from './removeReply.js';
@@ -29,8 +30,15 @@ const isOutgoing = computed(() => {
 });
 const isIncoming = computed(() => !isOutgoing.value);
 
+const textToShow = computed(() => {
+  const text =
+    contentAttributes?.value?.email?.textContent?.full ?? content.value;
+  return text?.replace(/\n/g, '<br>');
+});
+
+// Use TextContent as the default to fullHTML
 const fullHTML = computed(() => {
-  return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? textToShow.value;
 });
 
 const unquotedHTML = computed(() => {
@@ -40,12 +48,6 @@ const unquotedHTML = computed(() => {
 const hasQuotedMessage = computed(() => {
   return EmailQuoteExtractor.hasQuotes(fullHTML.value);
 });
-
-const textToShow = computed(() => {
-  const text =
-    contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return text?.replace(/\n/g, '<br>');
-});
 </script>
 
 <template>
@@ -92,6 +94,11 @@ const textToShow = computed(() => {
           <Letter
             v-if="showQuotedMessage"
             class-name="prose prose-bubble !max-w-none"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :html="fullHTML"
             :text="textToShow"
           />
@@ -99,6 +106,11 @@ const textToShow = computed(() => {
             v-else
             class-name="prose prose-bubble !max-w-none"
             :html="unquotedHTML"
+            :allowed-css-properties="[
+              ...allowedCssProperties,
+              'transform',
+              'transform-origin',
+            ]"
             :text="textToShow"
           />
         </template>

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

@@ -1,5 +1,7 @@
 <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';
@@ -10,6 +12,8 @@ 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(() => {
@@ -31,7 +35,7 @@ const downloadAttachment = async () => {
     isDownloading.value = true;
     await downloadFile({ url: dataUrl, type: fileType, extension });
   } catch (error) {
-    // error
+    useAlert(t('GALLERY_VIEW.ERROR_DOWNLOADING'));
   } finally {
     isDownloading.value = false;
   }

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

@@ -25,22 +25,29 @@ const isPlaying = ref(false);
 const isMuted = ref(false);
 const currentTime = ref(0);
 const duration = ref(0);
+const playbackSpeed = ref(1);
 
 const onLoadedMetadata = () => {
   duration.value = audioPlayer.value?.duration;
 };
 
+const playbackSpeedLabel = computed(() => {
+  return `${playbackSpeed.value}x`;
+});
+
 // There maybe a chance that the audioPlayer ref is not available
 // When the onLoadMetadata is called, so we need to set the duration
 // value when the component is mounted
 onMounted(() => {
   duration.value = audioPlayer.value?.duration;
+  audioPlayer.value.playbackRate = playbackSpeed.value;
 });
 
 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 = () => {
@@ -49,7 +56,7 @@ const toggleMute = () => {
 };
 
 const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value.currentTime;
+  currentTime.value = audioPlayer.value?.currentTime;
 };
 
 const seek = event => {
@@ -71,6 +78,16 @@ const playOrPause = () => {
 const onEnd = () => {
   isPlaying.value = false;
   currentTime.value = 0;
+  playbackSpeed.value = 1;
+  audioPlayer.value.playbackRate = 1;
+};
+
+const changePlaybackSpeed = () => {
+  const speeds = [1, 1.5, 2];
+  const currentIndex = speeds.indexOf(playbackSpeed.value);
+  const nextIndex = (currentIndex + 1) % speeds.length;
+  playbackSpeed.value = speeds[nextIndex];
+  audioPlayer.value.playbackRate = playbackSpeed.value;
 };
 
 const downloadAudio = async () => {
@@ -105,7 +122,7 @@ const downloadAudio = async () => {
     <div class="tabular-nums text-xs">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </div>
-    <div class="flex items-center px-2">
+    <div class="flex-1 items-center flex px-2">
       <input
         type="range"
         min="0"
@@ -115,6 +132,14 @@ const downloadAudio = async () => {
         @input="seek"
       />
     </div>
+    <button
+      class="border-0 w-10 h-6 grid place-content-center bg-n-alpha-2 hover:bg-alpha-3 rounded-2xl"
+      @click="changePlaybackSpeed"
+    >
+      <span class="text-xs text-n-slate-11 font-medium">
+        {{ playbackSpeedLabel }}
+      </span>
+    </button>
     <button
       class="p-0 border-0 size-8 grid place-content-center"
       @click="toggleMute"

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/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',
@@ -261,31 +330,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'),
@@ -470,7 +520,7 @@ const menuItems = computed(() => {
     <section class="grid gap-2 mt-2 mb-4">
       <div class="flex items-center min-w-0 gap-2 px-2">
         <div class="grid flex-shrink-0 size-6 place-content-center">
-          <Logo />
+          <Logo class="size-4" />
         </div>
         <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarAccountSwitcher

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 {
@@ -141,6 +142,7 @@ onMounted(async () => {
       :name
       :label
       :to
+      :getter-keys="getterKeys"
       :is-active="isActive"
       :has-active-child="hasActiveChild"
       :expandable="hasChildren"
@@ -162,7 +164,7 @@ onMounted(async () => {
           :active-child="activeChild"
         />
         <SidebarGroupLeaf
-          v-else
+          v-else-if="isAllowed(child.to)"
           v-show="isExpanded || activeChild?.name === child.name"
           v-bind="child"
           :active="activeChild?.name === child.name"

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

@@ -19,6 +19,7 @@ const shouldRenderComponent = computed(() => {
 });
 </script>
 
+<!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
     :permissions="resolvePermissions(to)"

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

@@ -5,6 +5,7 @@ import { useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import Avatar from 'next/avatar/Avatar.vue';
 import SidebarProfileMenuStatus from './SidebarProfileMenuStatus.vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 
 import {
   DropdownContainer,
@@ -12,6 +13,7 @@ import {
   DropdownSeparator,
   DropdownItem,
 } from 'next/dropdown-menu/base';
+import CustomBrandPolicyWrapper from '../../components/CustomBrandPolicyWrapper.vue';
 
 const emit = defineEmits(['close', 'openKeyShortcutModal']);
 
@@ -21,14 +23,28 @@ defineOptions({
 
 const { t } = useI18n();
 
-const globalConfig = useMapGetter('globalConfig/get');
 const currentUser = useMapGetter('getCurrentUser');
 const currentUserAvailability = useMapGetter('getCurrentUserAvailability');
+const accountId = useMapGetter('getCurrentAccountId');
+const globalConfig = useMapGetter('globalConfig/get');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showChatSupport = computed(() => {
+  return (
+    isFeatureEnabledonAccount.value(
+      accountId.value,
+      FEATURE_FLAGS.CONTACT_CHATWOOT_SUPPORT_TEAM
+    ) && globalConfig.value.chatwootInboxToken
+  );
+});
 
 const menuItems = computed(() => {
   return [
     {
-      show: !!globalConfig.value.chatwootInboxToken,
+      show: showChatSupport.value,
+      showOnCustomBrandedInstance: false,
       label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
       icon: 'i-lucide-life-buoy',
       click: () => {
@@ -37,6 +53,7 @@ const menuItems = computed(() => {
     },
     {
       show: true,
+      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
       icon: 'i-lucide-keyboard',
       click: () => {
@@ -45,12 +62,14 @@ const menuItems = computed(() => {
     },
     {
       show: true,
+      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.PROFILE_SETTINGS'),
       icon: 'i-lucide-user-pen',
       link: { name: 'profile_settings_index' },
     },
     {
       show: true,
+      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.APPEARANCE'),
       icon: 'i-lucide-palette',
       click: () => {
@@ -60,6 +79,7 @@ const menuItems = computed(() => {
     },
     {
       show: true,
+      showOnCustomBrandedInstance: false,
       label: t('SIDEBAR_ITEMS.DOCS'),
       icon: 'i-lucide-book',
       link: 'https://www.chatwoot.com/hc/user-guide/en',
@@ -68,6 +88,7 @@ const menuItems = computed(() => {
     },
     {
       show: currentUser.value.type === 'SuperAdmin',
+      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
       icon: 'i-lucide-castle',
       link: '/super_admin',
@@ -76,6 +97,7 @@ const menuItems = computed(() => {
     },
     {
       show: true,
+      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.LOGOUT'),
       icon: 'i-lucide-power',
       click: Auth.logout,
@@ -122,7 +144,11 @@ const allowedMenuItems = computed(() => {
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">
-        <DropdownItem v-if="item.show" v-bind="item" />
+        <CustomBrandPolicyWrapper
+          :show-on-custom-branded-instance="item.showOnCustomBrandedInstance"
+        >
+          <DropdownItem v-if="item.show" v-bind="item" />
+        </CustomBrandPolicyWrapper>
       </template>
     </DropdownBody>
   </DropdownContainer>

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';
@@ -19,15 +18,12 @@ const { isAllowed } = useSidebarContext();
 const scrollableContainer = ref(null);
 
 const accessibleItems = computed(() =>
-  props.children.filter(child => isAllowed(child.to))
+  props.children.filter(child => {
+    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 +48,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 +57,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

@@ -11,7 +11,8 @@ export function useSidebarContext() {
   }
 
   const router = useRouter();
-  const { checkFeatureAllowed, checkPermissions } = usePolicy();
+
+  const { shouldShow } = usePolicy();
 
   const resolvePath = to => {
     if (to) return router.resolve(to)?.path || '/';
@@ -28,11 +29,17 @@ export function useSidebarContext() {
     return '';
   };
 
+  const resolveInstallationType = to => {
+    if (to) return router.resolve(to)?.meta?.installationTypes || [];
+    return [];
+  };
+
   const isAllowed = to => {
     const permissions = resolvePermissions(to);
     const featureFlag = resolveFeatureFlag(to);
+    const installationType = resolveInstallationType(to);
 
-    return checkPermissions(permissions) && checkFeatureAllowed(featureFlag);
+    return shouldShow(featureFlag, permissions, installationType);
   };
 
   return {

app/javascript/dashboard/components/ChatList.vue

@@ -675,6 +675,15 @@ async function markAsUnread(conversationId) {
     // Ignore error
   }
 }
+async function markAsRead(conversationId) {
+  try {
+    await store.dispatch('markMessagesRead', {
+      id: conversationId,
+    });
+  } catch (error) {
+    // Ignore error
+  }
+}
 async function onAssignTeam(team, conversationId = null) {
   try {
     await store.dispatch('assignTeam', {
@@ -744,6 +753,7 @@ provide('assignLabels', onAssignLabels);
 provide('updateConversationStatus', toggleConversationStatus);
 provide('toggleContextMenu', onContextMenuToggle);
 provide('markAsUnread', markAsUnread);
+provide('markAsRead', markAsRead);
 provide('assignPriority', assignPriority);
 provide('isConversationSelected', isConversationSelected);
 

app/javascript/dashboard/components/ConversationItem.vue

@@ -13,6 +13,7 @@ export default {
     'updateConversationStatus',
     'toggleContextMenu',
     'markAsUnread',
+    'markAsRead',
     'assignPriority',
     'isConversationSelected',
   ],
@@ -64,6 +65,7 @@ export default {
     @update-conversation-status="updateConversationStatus"
     @context-menu-toggle="toggleContextMenu"
     @mark-as-unread="markAsUnread"
+    @mark-as-read="markAsRead"
     @assign-priority="assignPriority"
   />
 </template>

app/javascript/dashboard/components/Modal.vue

@@ -57,7 +57,7 @@ useEventListener(document.body, 'mouseup', onMouseUp);
 useEventListener(document, 'keydown', onKeydown);
 
 onMounted(() => {
-  if (onClose && typeof onClose === 'function') {
+  if (import.meta.env.DEV && onClose && typeof onClose === 'function') {
     // eslint-disable-next-line no-console
     console.warn(
       "[DEPRECATED] The 'onClose' prop is deprecated. Please use the 'close' event instead."

app/javascript/dashboard/components/buttons/Button.vue

@@ -28,10 +28,12 @@ export default {
     },
   },
   created() {
-    // eslint-disable-next-line
-    console.warn(
-      '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
-    );
+    if (import.meta.env.DEV) {
+      // eslint-disable-next-line
+      console.warn(
+        '[DEPRECATED] This component has been deprecated and will be removed soon. Please use v3/components/Form/Button.vue instead'
+      );
+    }
   },
 };
 </script>

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/layout/sidebarComponents/OptionsMenu.vue

@@ -4,6 +4,7 @@ import Auth from '../../../api/auth';
 import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
 import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
 import AvailabilityStatus from 'dashboard/components/layout/AvailabilityStatus.vue';
+import { FEATURE_FLAGS } from '../../../featureFlags';
 
 export default {
   components: {
@@ -28,6 +29,7 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       accountId: 'getCurrentAccountId',
+      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showChangeAccountOption() {
       if (this.globalConfig.createNewAccountFromDashboard) {
@@ -37,6 +39,14 @@ export default {
       const { accounts = [] } = this.currentUser;
       return accounts.length > 1;
     },
+    showChatSupport() {
+      return (
+        this.isFeatureEnabledonAccount(
+          this.accountId,
+          FEATURE_FLAGS.CONTACT_CHATWOOT_SUPPORT_TEAM
+        ) && this.globalConfig.chatwootInboxToken
+      );
+    },
   },
   methods: {
     handleProfileSettingClick(e, navigate) {
@@ -82,7 +92,7 @@ export default {
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
         </WootDropdownItem>
-        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
+        <WootDropdownItem v-if="showChatSupport">
           <woot-button
             variant="clear"
             color-scheme="secondary"

app/javascript/dashboard/components/policy.vue

@@ -15,17 +15,22 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  installationTypes: {
+    type: Array,
+    default: null,
+  },
 });
 
-const { checkFeatureAllowed, checkPermissions } = usePolicy();
+const { shouldShow } = usePolicy();
 
-const isFeatureAllowed = computed(() => checkFeatureAllowed(props.featureFlag));
-const hasPermission = computed(() => checkPermissions(props.permissions));
+const show = computed(() =>
+  shouldShow(props.featureFlag, props.permissions, props.installationTypes)
+);
 </script>
 
 <!-- eslint-disable vue/no-root-v-if -->
 <template>
-  <component :is="as" v-if="isFeatureAllowed && hasPermission">
+  <component :is="as" v-if="show">
     <slot />
   </component>
 </template>

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/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/Thumbnail.vue

@@ -156,13 +156,14 @@ export default {
     </slot>
     <img
       v-if="badgeSrc"
-      class="source-badge"
+      class="source-badge z-20"
       :style="badgeStyle"
       :src="`/integrations/channels/badges/${badgeSrc}.png`"
       alt="Badge"
     />
     <div
       v-if="showStatusIndicator"
+      class="z-20"
       :class="`source-badge user-online-status user-online-status--${status}`"
       :style="statusStyle"
     />

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

@@ -75,6 +75,7 @@ export default {
     'assignLabel',
     'assignTeam',
     'markAsUnread',
+    'markAsRead',
     'assignPriority',
     'updateConversationStatus',
   ],
@@ -95,9 +96,6 @@ export default {
       activeInbox: 'getSelectedInbox',
       accountId: 'getCurrentAccountId',
     }),
-    bulkActionCheck() {
-      return !this.hideThumbnail && !this.hovered && !this.selected;
-    },
     chatMetadata() {
       return this.chat.meta || {};
     },
@@ -182,10 +180,10 @@ export default {
 
       router.push({ path });
     },
-    onCardHover() {
+    onThumbnailHover() {
       this.hovered = !this.hideThumbnail;
     },
-    onCardLeave() {
+    onThumbnailLeave() {
       this.hovered = false;
     },
     onSelectConversation(checked) {
@@ -231,6 +229,10 @@ export default {
       this.$emit('markAsUnread', this.chat.id);
       this.closeContextMenu();
     },
+    async markAsRead() {
+      this.$emit('markAsRead', this.chat.id);
+      this.closeContextMenu();
+    },
     async assignPriority(priority) {
       this.$emit('assignPriority', priority, this.chat.id);
       this.closeContextMenu();
@@ -249,28 +251,36 @@ export default {
       'has-inbox-name': showInboxName,
       'conversation-selected': selected,
     }"
-    @mouseenter="onCardHover"
-    @mouseleave="onCardLeave"
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
   >
-    <label v-if="hovered || selected" class="checkbox-wrapper" @click.stop>
-      <input
-        :value="selected"
-        :checked="selected"
-        class="checkbox"
-        type="checkbox"
-        @change="onSelectConversation($event.target.checked)"
+    <div
+      class="relative"
+      @mouseenter="onThumbnailHover"
+      @mouseleave="onThumbnailLeave"
+    >
+      <label
+        v-if="hovered || selected"
+        class="checkbox-wrapper absolute inset-0 z-20 backdrop-blur-[2px]"
+        @click.stop
+      >
+        <input
+          :value="selected"
+          :checked="selected"
+          class="checkbox"
+          type="checkbox"
+          @change="onSelectConversation($event.target.checked)"
+        />
+      </label>
+      <Thumbnail
+        v-if="!hideThumbnail"
+        :src="currentContact.thumbnail"
+        :badge="inboxBadge"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="40px"
       />
-    </label>
-    <Thumbnail
-      v-if="bulkActionCheck"
-      :src="currentContact.thumbnail"
-      :badge="inboxBadge"
-      :username="currentContact.name"
-      :status="currentContact.availability_status"
-      size="40px"
-    />
+    </div>
     <div
       class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
@@ -351,6 +361,7 @@ export default {
         @assign-label="onAssignLabel"
         @assign-team="onAssignTeam"
         @mark-as-unread="markAsUnread"
+        @mark-as-read="markAsRead"
         @assign-priority="assignPriority"
       />
     </ContextMenu>
@@ -400,7 +411,7 @@ export default {
   }
 
   .checkbox-wrapper {
-    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4 hover:bg-woot-100 dark:hover:bg-woot-800;
+    @apply h-10 w-10 flex items-center justify-center rounded-full cursor-pointer mt-4;
 
     input[type='checkbox'] {
       @apply m-0 cursor-pointer;

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

@@ -115,6 +115,7 @@ export default {
       isProgrammaticScroll: false,
       messageSentSinceOpened: false,
       labelSuggestions: [],
+      markReadTimeout: null,
     };
   },
 
@@ -243,6 +244,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';
     },
@@ -263,6 +273,7 @@ export default {
       }
       this.fetchAllAttachmentsFromCurrentChat();
       this.fetchSuggestions();
+      this.removeMarkReadTimeout();
       this.messageSentSinceOpened = false;
     },
   },
@@ -287,6 +298,7 @@ export default {
   unmounted() {
     this.removeBusListeners();
     this.removeScrollListener();
+    this.removeMarkReadTimeout();
   },
 
   methods: {
@@ -353,7 +365,9 @@ export default {
           this.scrollToBottom();
         }
       });
-      this.makeMessagesRead();
+      this.markReadTimeout = setTimeout(this.makeMessagesRead, 5000, {
+        once: true,
+      });
     },
     addScrollListener() {
       this.conversationPanel = this.$el.querySelector('.conversation-panel');
@@ -464,6 +478,9 @@ export default {
         return false;
       });
     },
+    removeMarkReadTimeout() {
+      clearTimeout(this.markReadTimeout);
+    },
   },
 };
 </script>
@@ -492,12 +509,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 +523,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/ReplyBox.vue

@@ -30,7 +30,7 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
-import { trimContent, debounce } from '@chatwoot/utils';
+import { trimContent, debounce, getRecipients } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
@@ -326,7 +326,8 @@ export default {
         this.isAnEmailChannel ||
         this.isAWebWidgetInbox ||
         this.isAPIInbox ||
-        this.isAWhatsAppChannel
+        this.isAWhatsAppChannel ||
+        this.isATelegramChannel
       );
     },
     isSignatureEnabledForInbox() {
@@ -388,7 +389,6 @@ export default {
   watch: {
     currentChat(conversation) {
       const { can_reply: canReply } = conversation;
-
       this.setCCAndToEmailsFromLastChat();
 
       if (this.isOnPrivateNote) {
@@ -403,6 +403,19 @@ export default {
 
       this.fetchAndSetReplyTo();
     },
+    // When moving from one conversation to another, the store may not have the
+    // list of all the messages. A fetch is subsequently made to get the messages.
+    // However, this update does not trigger the `currentChat` watcher.
+    // We can add a deep watcher to it, but then, that would be too broad of a net to cast
+    // And would impact performance too. So we watch the messages directly.
+    // The watcher here is `deep` too, because the messages array is mutated and
+    // not replaced. So, a shallow watcher would not catch the change.
+    'currentChat.messages': {
+      handler() {
+        this.setCCAndToEmailsFromLastChat();
+      },
+      deep: true,
+    },
     conversationIdByRoute(conversationId, oldConversationId) {
       if (conversationId !== oldConversationId) {
         this.setToDraft(oldConversationId, this.replyType);
@@ -989,45 +1002,20 @@ export default {
       this.ccEmails = value.ccEmails;
     },
     setCCAndToEmailsFromLastChat() {
-      if (!this.lastEmail) return;
-
-      const {
-        content_attributes: { email: emailAttributes = {} },
-      } = this.lastEmail;
-
-      // Retrieve the email of the current conversation's sender
       const conversationContact = this.currentChat?.meta?.sender?.email || '';
-      let cc = emailAttributes.cc ? [...emailAttributes.cc] : [];
-      let to = [];
+      const { email: inboxEmail, forward_to_email: forwardToEmail } =
+        this.inbox;
 
-      // there might be a situation where the current conversation will include a message from a third person,
-      // and the current conversation contact is in CC.
-      // This is an edge-case, reported here: CW-1511 [ONLY FOR INTERNAL REFERENCE]
-      // So we remove the current conversation contact's email from the CC list if present
-      if (cc.includes(conversationContact)) {
-        cc = cc.filter(email => email !== conversationContact);
-      }
-
-      // If the last incoming message sender is different from the conversation contact, add them to the "to"
-      // and add the conversation contact to the CC
-      if (!emailAttributes.from.includes(conversationContact)) {
-        to.push(...emailAttributes.from);
-        cc.push(conversationContact);
-      }
-
-      // Remove the conversation contact's email from the BCC list if present
-      let bcc = (emailAttributes.bcc || []).filter(
-        email => email !== conversationContact
+      const { cc, bcc, to } = getRecipients(
+        this.lastEmail,
+        conversationContact,
+        inboxEmail,
+        forwardToEmail
       );
 
-      // Ensure only unique email addresses are in the CC list
-      bcc = [...new Set(bcc)];
-      cc = [...new Set(cc)];
-      to = [...new Set(to)];
-
+      this.toEmails = to.join(', ');
       this.ccEmails = cc.join(', ');
       this.bccEmails = bcc.join(', ');
-      this.toEmails = to.join(', ');
     },
     fetchAndSetReplyTo() {
       const replyStorageKey = LOCAL_STORAGE_KEYS.MESSAGE_REPLY_TO;

app/javascript/dashboard/components/widgets/conversation/bubble/integrations/Dyte.vue

@@ -9,26 +9,23 @@ export default {
       type: Number,
       required: true,
     },
-    meetingData: {
-      type: Object,
-      default: () => ({}),
-    },
   },
   data() {
     return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
   },
   computed: {
     meetingLink() {
-      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
+      return buildDyteURL(this.dyteAuthToken);
     },
   },
   methods: {
     async joinTheCall() {
       this.isLoading = true;
       try {
-        const { data: { authResponse: { authToken } = {} } = {} } =
-          await DyteAPI.addParticipantToMeeting(this.messageId);
-        this.dyteAuthToken = authToken;
+        const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
+          this.messageId
+        );
+        this.dyteAuthToken = token;
       } catch (err) {
         useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
       } finally {

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

@@ -1,5 +1,8 @@
 <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';
@@ -22,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 = {
@@ -129,7 +134,7 @@ const onClickDownload = async () => {
     isDownloading.value = true;
     await downloadFile({ url, type, extension });
   } catch (error) {
-    // error
+    useAlert(t('GALLERY_VIEW.ERROR_DOWNLOADING'));
   } finally {
     isDownloading.value = false;
   }

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

@@ -41,6 +41,7 @@ export default {
     'updateConversation',
     'assignPriority',
     'markAsUnread',
+    'markAsRead',
     'assignAgent',
     'assignTeam',
     'assignLabel',
@@ -48,6 +49,10 @@ export default {
   data() {
     return {
       STATUS_TYPE: wootConstants.STATUS_TYPE,
+      readOption: {
+        label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_READ'),
+        icon: 'mail',
+      },
       unreadOption: {
         label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.MARK_AS_UNREAD'),
         icon: 'mail',
@@ -58,16 +63,16 @@ export default {
           label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.RESOLVED'),
           icon: 'checkmark',
         },
-        {
-          key: wootConstants.STATUS_TYPE.PENDING,
-          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
-          icon: 'book-clock',
-        },
         {
           key: wootConstants.STATUS_TYPE.OPEN,
           label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.REOPEN'),
           icon: 'arrow-redo',
         },
+        {
+          key: wootConstants.STATUS_TYPE.PENDING,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.PENDING'),
+          icon: 'book-clock',
+        },
       ],
       snoozeOption: {
         key: wootConstants.STATUS_TYPE.SNOOZED,
@@ -203,6 +208,13 @@ export default {
       variant="icon"
       @click.stop="$emit('markAsUnread')"
     />
+    <MenuItem
+      v-else
+      :option="readOption"
+      variant="icon"
+      @click.stop="$emit('markAsRead')"
+    />
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
     <template v-for="option in statusMenuConfig">
       <MenuItem
         v-if="show(option.key)"
@@ -218,7 +230,7 @@ export default {
       variant="icon"
       @click.stop="snoozeConversation()"
     />
-
+    <hr class="m-1 rounded border-b border-n-weak dark:border-n-weak" />
     <MenuItemWithSubmenu :option="priorityConfig">
       <MenuItem
         v-for="(option, i) in priorityConfig.options"

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -40,10 +40,12 @@ export default {
   },
   emits: ['update:modelValue', 'input', 'blur'],
   mounted() {
-    // eslint-disable-next-line
-    console.warn(
-      '[DEPRECATED] <WootInput> has be deprecated and will be removed soon. Please use v3/components/Form/Input.vue instead'
-    );
+    if (import.meta.env.DEV) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[DEPRECATED] <WootInput> has be deprecated and will be removed soon. Please use v3/components/Form/Input.vue instead'
+      );
+    }
   },
   methods: {
     onChange(e) {

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/composables/useLiveRefresh.js

@@ -0,0 +1,28 @@
+import { ref, onBeforeUnmount } from 'vue';
+
+export const useLiveRefresh = (callback, interval = 60000) => {
+  const timeoutId = ref(null);
+
+  const startRefetching = () => {
+    timeoutId.value = setTimeout(async () => {
+      await callback();
+      startRefetching();
+    }, interval);
+  };
+
+  const stopRefetching = () => {
+    if (timeoutId.value) {
+      clearTimeout(timeoutId.value);
+      timeoutId.value = null;
+    }
+  };
+
+  onBeforeUnmount(() => {
+    stopRefetching();
+  });
+
+  return {
+    startRefetching,
+    stopRefetching,
+  };
+};

app/javascript/dashboard/composables/usePolicy.js

@@ -1,20 +1,31 @@
+import { computed, unref } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useAccount } from 'dashboard/composables/useAccount';
+import { useConfig } from 'dashboard/composables/useConfig';
 import {
   getUserPermissions,
   hasPermissions,
 } from 'dashboard/helper/permissionsHelper';
+import { PREMIUM_FEATURES } from 'dashboard/featureFlags';
+
+import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 
 export function usePolicy() {
   const user = useMapGetter('getCurrentUser');
   const isFeatureEnabled = useMapGetter('accounts/isFeatureEnabledonAccount');
+  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
+  const isACustomBrandedInstance = useMapGetter(
+    'globalConfig/isACustomBrandedInstance'
+  );
+
+  const { isEnterprise, enterprisePlanName } = useConfig();
   const { accountId } = useAccount();
 
   const getUserPermissionsForAccount = () => {
     return getUserPermissions(user.value, accountId.value);
   };
 
-  const checkFeatureAllowed = featureFlag => {
+  const isFeatureFlagEnabled = featureFlag => {
     if (!featureFlag) return true;
     return isFeatureEnabled.value(accountId.value, featureFlag);
   };
@@ -25,5 +36,99 @@ export function usePolicy() {
     return hasPermissions(requiredPermissions, userPermissions);
   };
 
-  return { checkFeatureAllowed, checkPermissions };
+  const checkInstallationType = config => {
+    if (Array.isArray(config) && config.length > 0) {
+      const installationCheck = {
+        [INSTALLATION_TYPES.ENTERPRISE]: isEnterprise,
+        [INSTALLATION_TYPES.CLOUD]: isOnChatwootCloud.value,
+        [INSTALLATION_TYPES.COMMUNITY]: true,
+      };
+
+      return config.some(type => installationCheck[type]);
+    }
+
+    return true;
+  };
+
+  const isPremiumFeature = featureFlag => {
+    if (!featureFlag) return true;
+    return PREMIUM_FEATURES.includes(featureFlag);
+  };
+
+  const hasPremiumEnterprise = computed(() => {
+    if (isEnterprise) return enterprisePlanName !== 'community';
+
+    return true;
+  });
+
+  const shouldShow = (featureFlag, permissions, installationTypes) => {
+    const flag = unref(featureFlag);
+    const perms = unref(permissions);
+    const installation = unref(installationTypes);
+
+    // if the user does not have permissions or installation type is not supported
+    // return false;
+    // This supersedes everything
+    if (!checkPermissions(perms)) return false;
+    if (!checkInstallationType(installation)) return false;
+
+    if (isACustomBrandedInstance.value) {
+      // if this is a custom branded instance, we just use the feature flag as a reference
+      return isFeatureFlagEnabled(flag);
+    }
+
+    // if on cloud, we should if the feature is allowed
+    // or if the feature is a premium one like SLA to show a paywall
+    // the paywall should be managed by the individual component
+    if (isOnChatwootCloud.value) {
+      return isFeatureFlagEnabled(flag) || isPremiumFeature(flag);
+    }
+
+    if (isEnterprise) {
+      // in enterprise, if the feature is premium but they don't have an enterprise plan
+      // we should it anyway this is to show upsells on enterprise regardless of the feature flag
+      // Feature flag is only honored if they have a premium plan
+      //
+      // In case they have a premium plan, the check on feature flag alone is enough
+      // because the second condition will always be false
+      // That means once subscribed, the feature can be disabled by the admin
+      //
+      // the paywall should be managed by the individual component
+      return (
+        isFeatureFlagEnabled(flag) ||
+        (isPremiumFeature(flag) && !hasPremiumEnterprise.value)
+      );
+    }
+
+    // default to true
+    return true;
+  };
+
+  const shouldShowPaywall = featureFlag => {
+    const flag = unref(featureFlag);
+    if (!flag) return false;
+
+    if (isACustomBrandedInstance.value) {
+      // custom branded instances never show paywall
+      return false;
+    }
+
+    if (isPremiumFeature(flag)) {
+      if (isOnChatwootCloud.value) {
+        return !isFeatureFlagEnabled(flag);
+      }
+
+      if (isEnterprise) {
+        return !hasPremiumEnterprise.value;
+      }
+    }
+
+    return false;
+  };
+
+  return {
+    checkPermissions,
+    shouldShowPaywall,
+    shouldShow,
+  };
 }

app/javascript/dashboard/constants/installationTypes.js

@@ -0,0 +1,5 @@
+export const INSTALLATION_TYPES = {
+  CLOUD: 'cloud',
+  ENTERPRISE: 'enterprise',
+  COMMUNITY: 'community',
+};

app/javascript/dashboard/featureFlags.js

@@ -33,4 +33,14 @@ export const FEATURE_FLAGS = {
   CAPTAIN: 'captain_integration',
   CUSTOM_ROLES: 'custom_roles',
   CHATWOOT_V4: 'chatwoot_v4',
+  REPORT_V4: 'report_v4',
+  CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
 };
+
+export const PREMIUM_FEATURES = [
+  FEATURE_FLAGS.SLA,
+  FEATURE_FLAGS.CAPTAIN,
+  FEATURE_FLAGS.CUSTOM_ROLES,
+  FEATURE_FLAGS.AUDIT_LOGS,
+  FEATURE_FLAGS.HELP_CENTER,
+];

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

@@ -152,7 +152,10 @@ export class DashboardAudioNotificationHelper {
 
     const shouldPlayAudio = [];
 
-    if (audioAlertType.includes(EVENT_TYPES.ASSIGNED)) {
+    if (
+      audioAlertType.includes(EVENT_TYPES.ASSIGNED) ||
+      audioAlertType.includes('mine')
+    ) {
       shouldPlayAudio.push(assignedToMe);
     }
     if (audioAlertType.includes(EVENT_TYPES.UNASSIGNED)) {
@@ -172,6 +175,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/helper/scriptHelpers.js

@@ -8,6 +8,7 @@ import DashboardAudioNotificationHelper from './AudioAlerts/DashboardAudioNotifi
 import { emitter } from 'shared/helpers/mitt';
 
 export const initializeAnalyticsEvents = () => {
+  AnalyticsHelper.init();
   emitter.on(ANALYTICS_IDENTITY, ({ user }) => {
     AnalyticsHelper.identify(user);
   });

app/javascript/dashboard/i18n/locale/am/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/am/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/am/index.js

@@ -0,0 +1,77 @@
+import advancedFilters from './advancedFilters.json';
+import agentBots from './agentBots.json';
+import agentMgmt from './agentMgmt.json';
+import attributesMgmt from './attributesMgmt.json';
+import auditLogs from './auditLogs.json';
+import automation from './automation.json';
+import bulkActions from './bulkActions.json';
+import campaign from './campaign.json';
+import cannedMgmt from './cannedMgmt.json';
+import chatlist from './chatlist.json';
+import components from './components.json';
+import contact from './contact.json';
+import contactFilters from './contactFilters.json';
+import conversation from './conversation.json';
+import csatMgmt from './csatMgmt.json';
+import customRole from './customRole.json';
+import datePicker from './datePicker.json';
+import emoji from './emoji.json';
+import general from './general.json';
+import generalSettings from './generalSettings.json';
+import helpCenter from './helpCenter.json';
+import inbox from './inbox.json';
+import inboxMgmt from './inboxMgmt.json';
+import integrationApps from './integrationApps.json';
+import integrations from './integrations.json';
+import labelsMgmt from './labelsMgmt.json';
+import login from './login.json';
+import macros from './macros.json';
+import report from './report.json';
+import resetPassword from './resetPassword.json';
+import search from './search.json';
+import setNewPassword from './setNewPassword.json';
+import settings from './settings.json';
+import signup from './signup.json';
+import sla from './sla.json';
+import teamsSettings from './teamsSettings.json';
+import whatsappTemplates from './whatsappTemplates.json';
+
+export default {
+  ...advancedFilters,
+  ...agentBots,
+  ...agentMgmt,
+  ...attributesMgmt,
+  ...auditLogs,
+  ...automation,
+  ...bulkActions,
+  ...campaign,
+  ...cannedMgmt,
+  ...chatlist,
+  ...components,
+  ...contact,
+  ...contactFilters,
+  ...conversation,
+  ...csatMgmt,
+  ...customRole,
+  ...datePicker,
+  ...emoji,
+  ...general,
+  ...generalSettings,
+  ...helpCenter,
+  ...inbox,
+  ...inboxMgmt,
+  ...integrationApps,
+  ...integrations,
+  ...labelsMgmt,
+  ...login,
+  ...macros,
+  ...report,
+  ...resetPassword,
+  ...search,
+  ...setNewPassword,
+  ...settings,
+  ...signup,
+  ...sla,
+  ...teamsSettings,
+  ...whatsappTemplates,
+};

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

@@ -309,7 +309,217 @@
       "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",
+      "CREATE": "Create",
+      "EDIT": "Update"
+    },
+    "ASSISTANTS": {
+      "HEADER": "Assistants",
+      "ADD_NEW": "Create a new assistant",
+      "DELETE": {
+        "TITLE": "Are you sure to delete the assistant?",
+        "DESCRIPTION": "This action is permanent. Deleting this assistant will remove it from all connected inboxes and permanently erase all generated knowledge.",
+        "CONFIRM": "Yes, delete",
+        "SUCCESS_MESSAGE": "The assistant has been successfully deleted",
+        "ERROR_MESSAGE": "There was an error deleting the assistant, please try again."
+      },
+      "FORM_DESCRIPTION": "Fill out the details below to name your assistant, describe its purpose, and specify the product it will support.",
+      "CREATE": {
+        "TITLE": "Create an assistant",
+        "SUCCESS_MESSAGE": "The assistant has been successfully created",
+        "ERROR_MESSAGE": "There was an error creating the assistant, please try again."
+      },
+      "FORM": {
+        "NAME": {
+          "LABEL": "Assistant Name",
+          "PLACEHOLDER": "Enter a name for the assistant",
+          "ERROR": "Please provide a name for the assistant"
+        },
+        "DESCRIPTION": {
+          "LABEL": "Assistant Description",
+          "PLACEHOLDER": "Describe how and where this assistant will be used",
+          "ERROR": "A description is required"
+        },
+        "PRODUCT_NAME": {
+          "LABEL": "Product Name",
+          "PLACEHOLDER": "Enter the name of the product this assistant is designed for",
+          "ERROR": "The product name is required"
+        },
+        "FEATURES": {
+          "TITLE": "Features",
+          "ALLOW_CONVERSATION_FAQS": "Generate FAQs from resolved conversations",
+          "ALLOW_MEMORIES": "Capture key details as memories from customer interactions."
+        }
+      },
+      "EDIT": {
+        "TITLE": "Update the assistant",
+        "SUCCESS_MESSAGE": "The assistant has been successfully updated",
+        "ERROR_MESSAGE": "There was an error updating the assistant, please try again."
+      },
+      "OPTIONS": {
+        "EDIT_ASSISTANT": "Edit Assistant",
+        "DELETE_ASSISTANT": "Delete Assistant",
+        "VIEW_CONNECTED_INBOXES": "View connected inboxes"
+      },
+      "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."
+      }
+    },
+    "DOCUMENTS": {
+      "HEADER": "Documents",
+      "ADD_NEW": "Create a new document",
+      "RELATED_RESPONSES": {
+        "TITLE": "Related FAQs",
+        "DESCRIPTION": "These FAQs are generated directly from the document."
+      },
+      "FORM_DESCRIPTION": "Enter the URL of the document to add it as a knowledge source and choose the assistant to associate it with.",
+      "CREATE": {
+        "TITLE": "Add a document",
+        "SUCCESS_MESSAGE": "The document has been successfully created",
+        "ERROR_MESSAGE": "There was an error creating the document, please try again."
+      },
+      "FORM": {
+        "URL": {
+          "LABEL": "URL",
+          "PLACEHOLDER": "Enter the URL of the document",
+          "ERROR": "Please provide a valid URL for the document"
+        },
+        "ASSISTANT": {
+          "LABEL": "Assistant",
+          "PLACEHOLDER": "Select the assistant",
+          "ERROR": "The assistant field is required"
+        }
+      },
+      "DELETE": {
+        "TITLE": "Are you sure to delete the document?",
+        "DESCRIPTION": "This action is permanent. Deleting this document will permanently erase all generated knowledge.",
+        "CONFIRM": "Yes, delete",
+        "SUCCESS_MESSAGE": "The document has been successfully deleted",
+        "ERROR_MESSAGE": "There was an error deleting the document, please try again."
+      },
+      "OPTIONS": {
+        "VIEW_RELATED_RESPONSES": "View Related Responses",
+        "DELETE_DOCUMENT": "Delete Document"
+      },
+      "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."
+      }
+    },
+    "RESPONSES": {
+      "HEADER": "FAQs",
+      "ADD_NEW": "Create new FAQ",
+      "DOCUMENTABLE": {
+        "CONVERSATION": "Conversation #{id}"
+      },
+      "DELETE": {
+        "TITLE": "Are you sure to delete the FAQ?",
+        "DESCRIPTION": "",
+        "CONFIRM": "Yes, delete",
+        "SUCCESS_MESSAGE": "FAQ deleted successfully",
+        "ERROR_MESSAGE": "There was an error deleting the FAQ, please try again."
+      },
+      "FILTER": {
+        "ASSISTANT": "Assistant: {selected}",
+        "STATUS": "Status: {selected}",
+        "ALL_ASSISTANTS": "All"
+      },
+      "STATUS": {
+        "TITLE": "Status",
+        "PENDING": "Pending",
+        "APPROVED": "Approved",
+        "ALL": "All"
+      },
+      "FORM_DESCRIPTION": "Add a question and its corresponding answer to the knowledge base and select the assistant it should be associated with.",
+      "CREATE": {
+        "TITLE": "Add an FAQ",
+        "SUCCESS_MESSAGE": "The response has been added successfully.",
+        "ERROR_MESSAGE": "An error occurred while adding the response. Please try again."
+      },
+      "FORM": {
+        "QUESTION": {
+          "LABEL": "Question",
+          "PLACEHOLDER": "Enter the question here",
+          "ERROR": "Please provide a valid question."
+        },
+        "ANSWER": {
+          "LABEL": "Answer",
+          "PLACEHOLDER": "Enter the answer here",
+          "ERROR": "Please provide a valid answer."
+        },
+        "ASSISTANT": {
+          "LABEL": "Assistant",
+          "PLACEHOLDER": "Select an assistant",
+          "ERROR": "Please select an assistant."
+        }
+      },
+      "EDIT": {
+        "TITLE": "Update the FAQ",
+        "SUCCESS_MESSAGE": "The FAQ has been successfully updated",
+        "ERROR_MESSAGE": "There was an error updating the FAQ, please try again",
+        "APPROVE_SUCCESS_MESSAGE": "The FAQ was marked as approved"
+      },
+      "OPTIONS": {
+        "APPROVE": "Mark as approved",
+        "EDIT_RESPONSE": "Edit FAQ",
+        "DELETE_RESPONSE": "Delete FAQ"
+      },
+      "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."
+      }
+    },
+    "INBOXES": {
+      "HEADER": "Connected Inboxes",
+      "ADD_NEW": "Connect a new inbox",
+      "OPTIONS": {
+        "DISCONNECT": "Disconnect"
+      },
+      "DELETE": {
+        "TITLE": "Are you sure to disconnect the inbox?",
+        "DESCRIPTION": "",
+        "CONFIRM": "Yes, delete",
+        "SUCCESS_MESSAGE": "The inbox was successfully disconnected.",
+        "ERROR_MESSAGE": "There was an error disconnecting the inbox, please try again."
+      },
+      "FORM_DESCRIPTION": "Choose an inbox to connect with the assistant.",
+      "CREATE": {
+        "TITLE": "Connect an Inbox",
+        "SUCCESS_MESSAGE": "The inbox was successfully connected.",
+        "ERROR_MESSAGE": "An error occurred while connecting the inbox. Please try again."
+      },
+      "FORM": {
+        "INBOX": {
+          "LABEL": "Inbox",
+          "PLACEHOLDER": "Choose the inbox to deploy the assistant.",
+          "ERROR": "An inbox selection is required."
+        }
+      },
+      "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."
+      }
     }
   }
 }