Fix branding

.eslintrc.js

@@ -4,8 +4,6 @@ module.exports = {
     'prettier',
     'plugin:vue/vue3-recommended',
     'plugin:vitest-globals/recommended',
-    // use recommended-legacy when upgrading the plugin to v4
-    'plugin:@intlify/vue-i18n/recommended',
   ],
   overrides: [
     {
@@ -231,18 +229,6 @@ module.exports = {
     'vue/singleline-html-element-content-newline': 'off',
     'import/extensions': ['off'],
     'no-console': 'error',
-    '@intlify/vue-i18n/no-dynamic-keys': 'warn',
-    '@intlify/vue-i18n/no-unused-keys': [
-      'warn',
-      {
-        extensions: ['.js', '.vue'],
-      },
-    ],
-  },
-  settings: {
-    'vue-i18n': {
-      localeDir: './app/javascript/*/i18n/**.json',
-    },
   },
   env: {
     browser: true,

.github/workflows/publish_ee_docker.yml

@@ -1,140 +0,0 @@
-# #
-# # 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/test_docker_build.yml

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

.gitignore

@@ -73,7 +73,6 @@ test/cypress/videos/*
 
 #ignore files under .vscode directory
 .vscode
-.cursor
 
 # yalc for local testing
 .yalc

.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.5.2'
+gem 'slack-ruby-client', '~> 2.2.0'
 # for dialogflow integrations
 gem 'google-cloud-dialogflow-v2', '>= 0.24.0'
 gem 'grpc'
@@ -138,7 +138,9 @@ gem 'procore-sift'
 # parse email
 gem 'email_reply_trimmer'
 
-gem 'html2text'
+# 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'
 
 # to calculate working hours
 gem 'working_hours'

Gemfile.lock

@@ -22,6 +22,14 @@ 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:
@@ -178,7 +186,7 @@ GEM
     database_cleaner-core (2.0.1)
     datadog-ci (0.8.3)
       msgpack
-    date (3.4.1)
+    date (3.3.4)
     ddtrace (1.23.2)
       datadog-ci (~> 0.8.1)
       debase-ruby_core_source (= 3.3.1)
@@ -272,8 +280,7 @@ GEM
       googleauth (~> 1.0)
       grpc (~> 1.36)
     geocoder (1.8.1)
-    gli (2.22.2)
-      ostruct
+    gli (2.21.1)
     globalid (1.2.1)
       activesupport (>= 6.1)
     gmail_xoauth (0.4.3)
@@ -354,8 +361,6 @@ 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)
@@ -482,7 +487,7 @@ GEM
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.19)
+    net-imap (0.4.17)
       date
       net-protocol
     net-pop (0.1.2)
@@ -498,14 +503,14 @@ GEM
     newrelic_rpm (9.6.0)
       base64
     nio4r (2.7.3)
-    nokogiri (1.18.3)
+    nokogiri (1.17.1)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.18.3-arm64-darwin)
+    nokogiri (1.17.1-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-darwin)
+    nokogiri (1.17.1-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.18.3-x86_64-linux-gnu)
+    nokogiri (1.17.1-x86_64-linux)
       racc (~> 1.4)
     oauth (1.1.0)
       oauth-tty (~> 1.0, >= 1.0.1)
@@ -538,7 +543,6 @@ 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)
@@ -561,7 +565,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (2.2.11)
+    rack (2.2.10)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -747,13 +751,12 @@ GEM
       json (>= 1.8, < 3)
       simplecov-html (~> 0.10.0)
     simplecov-html (0.10.2)
-    slack-ruby-client (2.5.2)
+    slack-ruby-client (2.2.0)
       faraday (>= 2.0)
       faraday-mashify
       faraday-multipart
       gli
       hashie
-      logger
     snaky_hash (2.0.1)
       hashie
       version_gem (~> 1.1, >= 1.1.1)
@@ -779,7 +782,7 @@ GEM
     time_diff (0.3.0)
       activesupport
       i18n
-    timeout (0.4.3)
+    timeout (0.4.1)
     trailblazer-option (0.1.2)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
@@ -894,7 +897,7 @@ DEPENDENCIES
   haikunator
   hairtrigger
   hashie
-  html2text
+  html2text!
   image_processing
   jbuilder
   json_refs
@@ -954,7 +957,7 @@ DEPENDENCIES
   sidekiq (>= 7.3.1)
   sidekiq-cron (>= 1.12.0)
   simplecov (= 0.17.1)
-  slack-ruby-client (~> 2.5.2)
+  slack-ruby-client (~> 2.2.0)
   spring
   spring-watcher-listen
   squasher

VERSION_CWCTL

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

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
-      @inbox.add_members(agents_to_be_added_ids)
+      agents_to_be_added_ids.map { |user_id| @inbox.add_member(user_id) }
     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
-      @inbox.remove_members(params[:user_ids])
+      params[:user_ids].map { |user_id| @inbox.remove_member(user_id) }
     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
-      @inbox.add_members(agents_to_be_added_ids)
-      @inbox.remove_members(agents_to_be_removed_ids)
+      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) }
     end
   end
 

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

@@ -1,11 +1,5 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
   before_action :fetch_conversation, only: [:link_issue, :linked_issues]
-  before_action :fetch_hook, only: [:destroy]
-
-  def destroy
-    @hook.destroy!
-    head :ok
-  end
 
   def teams
     teams = linear_processor_service.teams
@@ -96,8 +90,4 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   def permitted_params
     params.permit(:team_id, :project_id, :conversation_id, :issue_id, :link_id, :title, :description, :assignee_id, :priority, label_ids: [])
   end
-
-  def fetch_hook
-    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'linear')
-  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 = @team.add_members(members_to_be_added_ids)
+      @team_members = members_to_be_added_ids.map { |user_id| @team.add_member(user_id) }
     end
   end
 
   def update
     ActiveRecord::Base.transaction do
-      @team.add_members(members_to_be_added_ids)
-      @team.remove_members(members_to_be_removed_ids)
+      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) }
     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
-      @team.remove_members(params[:user_ids])
+      params[:user_ids].map { |user_id| @team.remove_member(user_id) }
     end
     head :ok
   end

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

@@ -2,8 +2,6 @@ class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseControll
   before_action :load_conversations, only: [:conversation_metrics, :grouped_conversation_metrics]
   before_action :set_group_scope, only: [:grouped_conversation_metrics]
 
-  before_action :check_authorization
-
   def conversation_metrics
     render json: {
       open: @conversations.open.count,
@@ -33,10 +31,6 @@ class Api::V2::Accounts::LiveReportsController < Api::V1::Accounts::BaseControll
 
   private
 
-  def check_authorization
-    authorize :report, :view?
-  end
-
   def set_group_scope
     render json: { error: 'invalid group_by' }, status: :unprocessable_entity and return unless %w[
       team_id

app/controllers/dashboard_controller.rb

@@ -7,17 +7,13 @@ 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',
@@ -36,7 +32,7 @@ class DashboardController < ActionController::Base
       'LOGOUT_REDIRECT_LINK',
       'DISABLE_USER_PROFILE_UPDATE',
       'DEPLOYMENT_ENV',
-      'CSML_EDITOR_HOST', 'INSTALLATION_PRICING_PLAN'
+      'CSML_EDITOR_HOST'
     ).merge(app_config)
   end
 

app/controllers/linear/callbacks_controller.rb

@@ -1,73 +0,0 @@
-class Linear::CallbacksController < ApplicationController
-  include Linear::IntegrationHelper
-
-  def show
-    @response = oauth_client.auth_code.get_token(
-      params[:code],
-      redirect_uri: "#{base_url}/linear/callback"
-    )
-
-    handle_response
-  rescue StandardError => e
-    Rails.logger.error("Linear callback error: #{e.message}")
-    redirect_to linear_redirect_uri
-  end
-
-  private
-
-  def oauth_client
-    app_id = GlobalConfigService.load('LINEAR_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
-
-    OAuth2::Client.new(
-      app_id,
-      app_secret,
-      {
-        site: 'https://api.linear.app',
-        token_url: '/oauth/token',
-        authorize_url: '/oauth/authorize'
-      }
-    )
-  end
-
-  def handle_response
-    hook = account.hooks.new(
-      access_token: parsed_body['access_token'],
-      status: 'enabled',
-      app_id: 'linear',
-      settings: {
-        token_type: parsed_body['token_type'],
-        expires_in: parsed_body['expires_in'],
-        scope: parsed_body['scope']
-      }
-    )
-    # You may wonder why we're not handling the refresh token update, since the token will expire only after 10 years, https://github.com/linear/linear/issues/251
-    hook.save!
-    redirect_to linear_redirect_uri
-  rescue StandardError => e
-    Rails.logger.error("Linear callback error: #{e.message}")
-    redirect_to linear_redirect_uri
-  end
-
-  def account
-    @account ||= Account.find(account_id)
-  end
-
-  def account_id
-    return unless params[:state]
-
-    verify_linear_token(params[:state])
-  end
-
-  def linear_redirect_uri
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/linear"
-  end
-
-  def parsed_body
-    @parsed_body ||= @response.response.parsed
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-end

app/controllers/super_admin/app_configs_controller.rb

@@ -39,8 +39,6 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
                          %w[AZURE_APP_ID AZURE_APP_SECRET]
                        when 'email'
                          ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       when 'linear'
-                         %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
                        else
                          %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
                        end

app/helpers/linear/integration_helper.rb

@@ -1,47 +0,0 @@
-module Linear::IntegrationHelper
-  # Generates a signed JWT token for Linear integration
-  #
-  # @param account_id [Integer] The account ID to encode in the token
-  # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_linear_token(account_id)
-    return if client_secret.blank?
-
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
-  rescue StandardError => e
-    Rails.logger.error("Failed to generate Linear token: #{e.message}")
-    nil
-  end
-
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
-  end
-
-  # Verifies and decodes a Linear JWT token
-  #
-  # @param token [String] The JWT token to verify
-  # @return [Integer, nil] The account ID from the token or nil if invalid
-  def verify_linear_token(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)
-  end
-
-  private
-
-  def client_secret
-    @client_secret ||= GlobalConfigService.load('LINEAR_CLIENT_SECRET', nil)
-  end
-
-  def decode_token(token, secret)
-    JWT.decode(token, secret, true, {
-                 algorithm: 'HS256',
-                 verify_expiration: true
-               }).first['sub']
-  rescue StandardError => e
-    Rails.logger.error("Unexpected error verifying Linear token: #{e.message}")
-    nil
-  end
-end

app/helpers/portal_helper.rb

@@ -5,7 +5,8 @@ module PortalHelper
   end
 
   def generate_portal_bg(portal_color, theme)
-    generate_portal_bg_color(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)}"
   end
 
   def generate_gradient_to_bottom(theme)

app/helpers/super_admin/account_features_helper.rb

@@ -6,47 +6,4 @@ 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/App.vue

@@ -14,7 +14,6 @@ import WootSnackbarBox from './components/SnackbarContainer.vue';
 import { setColorTheme } from './helper/themeHelper';
 import { isOnOnboardingView } from 'v3/helpers/RouteHelper';
 import { useAccount } from 'dashboard/composables/useAccount';
-import { useFontSize } from 'dashboard/composables/useFontSize';
 import {
   registerSubscription,
   verifyServiceWorkerExistence,
@@ -38,15 +37,8 @@ export default {
     const router = useRouter();
     const store = useStore();
     const { accountId } = useAccount();
-    // Use the font size composable (it automatically sets up the watcher)
-    const { currentFontSize } = useFontSize();
 
-    return {
-      router,
-      store,
-      currentAccountId: accountId,
-      currentFontSize,
-    };
+    return { router, store, currentAccountId: accountId };
   },
   data() {
     return {

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

@@ -1,9 +0,0 @@
-import ApiClient from '../ApiClient';
-
-class CaptainBulkActionsAPI extends ApiClient {
-  constructor() {
-    super('captain/bulk_actions', { accountScoped: true });
-  }
-}
-
-export default new CaptainBulkActionsAPI();

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

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

app/javascript/dashboard/api/liveReports.js

@@ -0,0 +1,20 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class LiveReportsAPI extends ApiClient {
+  constructor() {
+    super('live_reports', { accountScoped: true, apiVersion: 'v2' });
+  }
+
+  getConversationMetric(params = {}) {
+    return axios.get(`${this.url}/conversation_metrics`, { params });
+  }
+
+  getGroupedConversations({ groupBy } = { groupBy: 'assignee_id' }) {
+    return axios.get(`${this.url}/grouped_conversation_metrics`, {
+      params: { group_by: groupBy },
+    });
+  }
+}
+
+export default new LiveReportsAPI();

app/javascript/dashboard/assets/scss/super_admin/index.scss

@@ -6,209 +6,3 @@
 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/assets/scss/widgets/_base.scss

@@ -82,7 +82,7 @@ input[type='url']:not(.reset-base) {
 }
 
 input[type='file'] {
-  @apply bg-white dark:bg-n-solid-1 leading-[1.15] mb-4;
+  @apply bg-white dark:bg-slate-800 leading-[1.15] mb-4;
 }
 
 // Select
@@ -141,16 +141,11 @@ code {
   @apply text-xs border-0;
 
   &.hljs {
-    @apply bg-n-slate-3 dark:bg-n-solid-3 text-slate-800 dark:text-slate-50 rounded-lg p-5;
+    @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-50 rounded-lg p-5;
 
     .hljs-number,
     .hljs-string {
       @apply text-red-800 dark:text-red-400;
     }
-
-    .hljs-name,
-    .hljs-tag {
-      @apply text-n-slate-11;
-    }
   }
 }

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

@@ -22,7 +22,7 @@ const handleButtonClick = () => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div class="flex items-center justify-between w-full h-20 gap-2">
           <span class="text-xl font-medium text-n-slate-12">
             {{ headerTitle }}
@@ -44,7 +44,7 @@ const handleButtonClick = () => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+      <div class="w-full max-w-[960px] mx-auto py-4">
         <slot name="default" />
       </div>
     </main>

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.LIVE_CHAT.CREATE.FORM.API.SUCCESS_MESSAGE'));
+    useAlert(t('CAMPAIGN.SMS.CREATE.FORM.API.SUCCESS_MESSAGE'));
   } catch (error) {
     const errorMessage =
       error?.response?.message ||
-      t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.API.ERROR_MESSAGE');
+      t('CAMPAIGN.SMS.CREATE.FORM.API.ERROR_MESSAGE');
     useAlert(errorMessage);
   }
 };
@@ -40,7 +40,7 @@ const handleSubmit = campaignDetails => {
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue

@@ -39,7 +39,7 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[400px] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}

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

@@ -4,10 +4,6 @@ defineProps({
     type: String,
     default: 'col',
   },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['click']);
@@ -22,11 +18,10 @@ const handleClick = () => {
     class="flex flex-col w-full shadow outline-1 outline outline-n-container group/cardLayout rounded-2xl bg-n-solid-2"
   >
     <div
-      class="flex w-full gap-3 py-5"
-      :class="[
-        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center',
-        selectable ? 'px-10 py-6' : 'px-6',
-      ]"
+      class="flex w-full gap-3 px-6 py-5"
+      :class="
+        layout === 'col' ? 'flex-col' : 'flex-row justify-between items-center'
+      "
       @click="handleClick"
     >
       <slot />

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', 'toggleBlock']);
+const emit = defineEmits(['goToContactsList']);
 
 const { t } = useI18n();
 const slots = useSlots();
@@ -45,17 +45,9 @@ const breadcrumbItems = computed(() => {
   return items;
 });
 
-const isContactBlocked = computed(() => {
-  return props.selectedContact?.blocked;
-});
-
 const handleBreadcrumbClick = () => {
   emit('goToContactsList');
 };
-
-const toggleBlock = () => {
-  emit('toggleBlock', isContactBlocked.value);
-};
 </script>
 
 <template>
@@ -65,41 +57,23 @@ const toggleBlock = () => {
     <div
       class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
     >
-      <header class="sticky top-0 z-10 px-6 3xl:px-0">
-        <div class="w-full mx-auto max-w-[40.625rem]">
+      <header class="sticky top-0 z-10 px-6 xl:px-0">
+        <div class="w-full mx-auto max-w-[650px]">
           <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
             />
-            <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>
+            <ComposeConversation :contact-id="contactId">
+              <template #trigger="{ toggle }">
+                <Button :label="buttonLabel" size="sm" @click="toggle" />
+              </template>
+            </ComposeConversation>
           </div>
         </div>
       </header>
-      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
-        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
+      <main class="flex-1 px-6 overflow-y-auto xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[650px]">
           <slot name="default" />
         </div>
       </main>
@@ -107,7 +81,7 @@ const toggleBlock = () => {
 
     <div
       v-if="slots.sidebar"
-      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="overflow-y-auto justify-end min-w-[200px] w-full py-6 max-w-[440px] border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>

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

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

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -60,7 +60,7 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[960px]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue

@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
       t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
     "
     :show-clear-button="!hasActiveSegments"
-    class="max-w-[60rem] px-6"
+    class="max-w-[960px] px-6"
     @open-filter="emit('openFilter')"
     @clear-filters="emit('clearFilters')"
   />

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

@@ -72,7 +72,7 @@ const openFilter = () => {
         @clear-filters="emit('clearFilters')"
       />
       <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+        <div class="w-full mx-auto max-w-[960px]">
           <ContactsActiveFiltersPreview
             v-if="
               (hasAppliedFilters || !isNotSegmentView) &&

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

@@ -22,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-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
+      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"

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

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

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

@@ -52,7 +52,7 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex flex-col absolute w-[25rem] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
+    class="flex flex-col absolute w-[400px] bg-n-alpha-3 outline outline-1 outline-n-container backdrop-blur-[100px] shadow-lg gap-6 rounded-xl p-6"
   >
     <div class="flex items-center justify-between">
       <h3>
@@ -75,7 +75,7 @@ onMounted(() => {
       <div>
         <div class="flex justify-between w-full gap-4 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[6.25rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[100px] text-slate-900 dark:text-slate-50"
           >
             {{
               t(
@@ -90,9 +90,9 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_DESCRIPTION_PLACEHOLDER'
               )
             "
-            class="w-[13.75rem]"
+            class="w-[220px]"
             custom-text-area-wrapper-class="!p-0 !border-0 !rounded-none !bg-transparent transition-none"
-            custom-text-area-class="max-h-[9.375rem]"
+            custom-text-area-class="max-h-[150px]"
             auto-height
             min-height="3rem"
           />
@@ -108,12 +108,12 @@ onMounted(() => {
             :label="
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TITLE')
             "
-            custom-label-class="min-w-[7.5rem]"
+            custom-label-class="min-w-[120px]"
           />
         </div>
         <div class="flex justify-between w-full gap-3 py-2">
           <label
-            class="text-sm font-medium whitespace-nowrap min-w-[7.5rem] text-slate-900 dark:text-slate-50"
+            class="text-sm font-medium whitespace-nowrap min-w-[120px] text-slate-900 dark:text-slate-50"
           >
             {{
               t('HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS')
@@ -126,7 +126,7 @@ onMounted(() => {
                 'HELP_CENTER.EDIT_ARTICLE_PAGE.ARTICLE_PROPERTIES.META_TAGS_PLACEHOLDER'
               )
             "
-            class="w-[14rem]"
+            class="w-[224px]"
           />
         </div>
       </div>

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

@@ -90,7 +90,7 @@ const handleCategory = async formData => {
 
 <template>
   <div
-    class="w-[25rem] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
+    class="w-[400px] absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
   >
     <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
       {{

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

@@ -201,7 +201,7 @@ defineExpose({ state, isSubmitDisabled });
                 color="slate"
                 size="sm"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[38px] !w-[38px] absolute top-[31px] !outline-none !rounded-[7px] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -74,7 +74,7 @@ const handleDeletePortal = () => {
       </div>
       <div
         v-else-if="activePortal"
-        class="flex flex-col w-full gap-4 max-w-[40rem] pb-8"
+        class="flex flex-col w-full gap-4 max-w-[640px] pb-8"
       >
         <PortalBaseSettings
           :active-portal="activePortal"

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

@@ -92,7 +92,7 @@ const redirectToPortalHomePage = () => {
 
 <template>
   <div
-    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[27.5rem] rounded-xl shadow-md flex flex-col gap-4"
+    class="pt-5 pb-3 bg-n-alpha-3 backdrop-blur-[100px] outline outline-n-container outline-1 z-50 absolute w-[440px] rounded-xl shadow-md flex flex-col gap-4"
   >
     <div
       class="flex items-center justify-between gap-4 px-6 pb-3 border-b border-n-alpha-2"

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

@@ -13,7 +13,6 @@ import {
   createNewContact,
   fetchContactableInboxes,
   processContactableInboxes,
-  mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
@@ -48,7 +47,6 @@ const currentUser = useMapGetter('getCurrentUser');
 const globalConfig = useMapGetter('globalConfig/get');
 const uiFlags = useMapGetter('contactConversations/getUIFlags');
 const messageSignature = useMapGetter('getMessageSignature');
-const inboxesList = useMapGetter('inboxes/getInboxes');
 
 const sendWithSignature = computed(() =>
   fetchSignatureFlagFromUISettings(targetInbox.value?.channelType)
@@ -106,12 +104,7 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {
     isFetchingInboxes.value = true;
     try {
       const contactableInboxes = await fetchContactableInboxes(contact.id);
-      // Merge the processed contactableInboxes with the inboxesList
-      selectedContact.value.contactInboxes = mergeInboxDetails(
-        contactableInboxes,
-        inboxesList.value
-      );
-
+      selectedContact.value.contactInboxes = contactableInboxes;
       isFetchingInboxes.value = false;
     } catch (error) {
       isFetchingInboxes.value = false;
@@ -169,12 +162,9 @@ watch(
   () => {
     if (activeContact.value && props.contactId) {
       const contactInboxes = activeContact.value?.contactInboxes || [];
-      // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(contactInboxes);
-      // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
         ...activeContact.value,
-        contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
+        contactInboxes: processContactableInboxes(contactInboxes),
       };
     }
   },

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

@@ -77,7 +77,7 @@ const toggleMessageSignature = () => {
   setSignature();
 };
 
-// Added this watch to dynamically set signature on target inbox change.
+// Added this watch to dynamically set signature.
 // Only targetInbox has value and is Advance Editor(used by isEmailOrWebWidgetInbox)
 // Set the signature only if the inbox based flag is true
 watch(
@@ -86,8 +86,7 @@ watch(
     nextTick(() => {
       if (newValue && props.isEmailOrWebWidgetInbox) setSignature();
     });
-  },
-  { immediate: true }
+  }
 );
 
 const onClickInsertEmoji = emoji => {
@@ -148,7 +147,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <div
-    class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
+    class="flex items-center justify-between w-full h-[52px] gap-2 px-4 py-3"
   >
     <div class="flex items-center gap-2">
       <WhatsAppOptions

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

@@ -47,10 +47,10 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredImageAttachments"
         :key="attachment.id"
-        class="relative group/image w-[4.5rem] h-[4.5rem]"
+        class="relative group/image w-[72px] h-[72px]"
       >
         <img
-          class="object-cover w-[4.5rem] h-[4.5rem] rounded-lg"
+          class="object-cover w-[72px] h-[72px] rounded-lg"
           :src="attachment.thumb"
         />
         <Button
@@ -69,7 +69,7 @@ const removeAttachment = id => {
       <div
         v-for="attachment in filteredNonImageAttachments"
         :key="attachment.id"
-        class="max-w-[18.75rem] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
+        class="max-w-[300px] inline-flex items-center h-8 min-w-0 bg-n-alpha-2 dark:bg-n-solid-3 rounded-lg gap-3 ltr:pl-3 rtl:pr-3 ltr:pr-2 rtl:pl-2"
       >
         <span class="text-sm font-medium text-n-slate-11">
           {{ fileNameWithEllipsis(attachment.resource) }}

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

@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[42rem] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[670px] mt-2 divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"

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

@@ -87,21 +87,6 @@ export const processContactableInboxes = inboxes => {
   }));
 };
 
-export const mergeInboxDetails = (inboxesData, inboxesList = []) => {
-  if (!inboxesData || !inboxesData.length) {
-    return [];
-  }
-
-  return inboxesData.map(inboxData => {
-    const matchingInbox =
-      inboxesList.find(inbox => inbox.id === inboxData.id) || {};
-    return {
-      ...camelcaseKeys(matchingInbox, { deep: true }),
-      ...inboxData,
-    };
-  });
-};
-
 export const prepareAttachmentPayload = (
   attachedFiles,
   directUploadsEnabled

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

@@ -110,153 +110,6 @@ describe('composeConversationHelper', () => {
     });
   });
 
-  describe('mergeInboxDetails', () => {
-    it('returns empty array if inboxesData is empty or null', () => {
-      expect(helpers.mergeInboxDetails(null)).toEqual([]);
-      expect(helpers.mergeInboxDetails([])).toEqual([]);
-      expect(helpers.mergeInboxDetails(undefined)).toEqual([]);
-    });
-
-    it('merges inbox data with matching inboxes from the list', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1' },
-        { id: 2, sourceId: 'source2' },
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-          channel_id: 10,
-          phone_number: null,
-        },
-        {
-          id: 2,
-          name: 'Inbox 2',
-          channel_type: 'Channel::Whatsapp',
-          channel_id: 20,
-          phone_number: '+1234567890',
-        },
-        {
-          id: 3,
-          name: 'Inbox 3',
-          channel_type: 'Channel::Api',
-          channel_id: 30,
-          phone_number: null,
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result.length).toBe(2);
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-        channelId: 10,
-        phoneNumber: null,
-      });
-
-      expect(result[1]).toMatchObject({
-        id: 2,
-        sourceId: 'source2',
-        name: 'Inbox 2',
-        channelType: 'Channel::Whatsapp',
-        channelId: 20,
-        phoneNumber: '+1234567890',
-      });
-    });
-
-    it('handles inboxes not found in the list', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1' },
-        { id: 99, sourceId: 'source99' }, // This doesn't exist in inboxesList
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result.length).toBe(2);
-
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-      });
-
-      expect(result[1]).toMatchObject({
-        id: 99,
-        sourceId: 'source99',
-      });
-
-      expect(result[1].name).toBeUndefined();
-      expect(result[1].channelType).toBeUndefined();
-    });
-
-    it('camelcases properties from inboxesList', () => {
-      const inboxesData = [{ id: 1, sourceId: 'source1' }];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'Inbox 1',
-          channel_type: 'Channel::Email',
-          avatar_url: 'https://example.com/avatar.png',
-          working_hours: [
-            {
-              day_of_week: 1,
-              closed_all_day: false,
-            },
-          ],
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result[0]).toMatchObject({
-        id: 1,
-        sourceId: 'source1',
-        name: 'Inbox 1',
-        channelType: 'Channel::Email',
-        avatarUrl: 'https://example.com/avatar.png',
-      });
-
-      expect(result[0].workingHours[0]).toMatchObject({
-        dayOfWeek: 1,
-        closedAllDay: false,
-      });
-    });
-
-    it('preserves original properties when they conflict with inboxesList', () => {
-      const inboxesData = [
-        { id: 1, sourceId: 'source1', name: 'Original Name' },
-      ];
-
-      const inboxesList = [
-        {
-          id: 1,
-          name: 'List Name',
-          channel_type: 'Channel::Email',
-        },
-      ];
-
-      const result = helpers.mergeInboxDetails(inboxesData, inboxesList);
-
-      expect(result[0].name).toBe('Original Name');
-      expect(result[0].channelType).toBe('Channel::Email');
-    });
-  });
-
   describe('prepareAttachmentPayload', () => {
     it('prepares direct upload files', () => {
       const files = [{ blobSignedId: 'signed1' }];

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

@@ -99,50 +99,45 @@ const computedJustify = computed(() => {
 const STYLE_CONFIG = {
   colors: {
     blue: {
-      solid:
-        'bg-n-brand text-white hover:enabled:brightness-110 outline-transparent',
+      solid: 'bg-n-brand text-white hover:brightness-110 outline-transparent',
       faded:
-        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 outline-transparent',
+        'bg-n-brand/10 text-n-blue-text hover:bg-n-brand/20 outline-transparent',
       outline: 'text-n-blue-text outline-n-blue-border',
-      ghost: 'text-n-blue-text hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-text hover:enabled:underline outline-transparent',
+      ghost: 'text-n-blue-text hover:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:underline outline-transparent',
     },
     ruby: {
-      solid:
-        'bg-n-ruby-9 text-white hover:enabled:bg-n-ruby-10 outline-transparent',
+      solid: 'bg-n-ruby-9 text-white hover:bg-n-ruby-10 outline-transparent',
       faded:
-        'bg-n-ruby-9/10 text-n-ruby-11 hover:enabled:bg-n-ruby-9/20 outline-transparent',
-      outline: 'text-n-ruby-11 hover:enabled:bg-n-ruby-9/10 outline-n-ruby-8',
-      ghost: 'text-n-ruby-11 hover:enabled:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-ruby-9 hover:enabled:underline outline-transparent',
+        'bg-n-ruby-9/10 text-n-ruby-11 hover:bg-n-ruby-9/20 outline-transparent',
+      outline: 'text-n-ruby-11 hover:bg-n-ruby-9/10 outline-n-ruby-8',
+      ghost: 'text-n-ruby-11 hover:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-ruby-9 hover:underline outline-transparent',
     },
     amber: {
-      solid:
-        'bg-n-amber-9 text-white hover:enabled:bg-n-amber-10 outline-transparent',
+      solid: 'bg-n-amber-9 text-white hover:bg-n-amber-10 outline-transparent',
       faded:
-        'bg-n-amber-9/10 text-n-slate-12 hover:enabled:bg-n-amber-9/20 outline-transparent',
-      outline:
-        'text-n-amber-11 hover:enabled:bg-n-amber-9/10 outline-n-amber-9',
-      link: 'text-n-amber-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-amber-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-amber-9/10 text-n-slate-12 hover:bg-n-amber-9/20 outline-transparent',
+      outline: 'text-n-amber-11 hover:bg-n-amber-9/10 outline-n-amber-9',
+      link: 'text-n-amber-9 hover:underline outline-transparent',
+      ghost: 'text-n-amber-9 hover:bg-n-alpha-2 outline-transparent',
     },
     slate: {
       solid:
-        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 hover:enabled:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2 text-n-slate-12 outline-n-container',
       faded:
-        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 outline-transparent',
-      outline: 'text-n-slate-11 outline-n-strong hover:enabled:bg-n-slate-9/10',
-      link: 'text-n-slate-11 hover:enabled:text-n-slate-12 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-slate-12 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-slate-9/10 text-n-slate-12 hover:bg-n-slate-9/20 outline-transparent',
+      outline: 'text-n-slate-11 outline-n-strong hover:bg-n-slate-9/10',
+      link: 'text-n-slate-11 hover:text-n-slate-12 hover:underline outline-transparent',
+      ghost: 'text-n-slate-12 hover:bg-n-alpha-2 outline-transparent',
     },
     teal: {
-      solid:
-        'bg-n-teal-9 text-white hover:enabled:bg-n-teal-10 outline-transparent',
+      solid: 'bg-n-teal-9 text-white hover:bg-n-teal-10 outline-transparent',
       faded:
-        'bg-n-teal-9/10 text-n-slate-12 hover:enabled:bg-n-teal-9/20 outline-transparent',
-      outline: 'text-n-teal-11 hover:enabled:bg-n-teal-9/10 outline-n-teal-9',
-      link: 'text-n-teal-9 hover:enabled:underline outline-transparent',
-      ghost: 'text-n-teal-9 hover:enabled:bg-n-alpha-2 outline-transparent',
+        'bg-n-teal-9/10 text-n-slate-12 hover:bg-n-teal-9/20 outline-transparent',
+      outline: 'text-n-teal-11 hover:bg-n-teal-9/10 outline-n-teal-9',
+      link: 'text-n-teal-9 hover:underline outline-transparent',
+      ghost: 'text-n-teal-9 hover:bg-n-alpha-2 outline-transparent',
     },
   },
   sizes: {
@@ -176,7 +171,7 @@ const STYLE_CONFIG = {
     center: 'justify-center',
     end: 'justify-end',
   },
-  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:opacity-50',
+  base: 'inline-flex items-center min-w-0 gap-2 transition-all duration-200 ease-in-out border-0 rounded-lg outline-1 outline disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',
 };
 
 const variantClasses = computed(() => {

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

@@ -1,12 +1,12 @@
 <script setup>
 import { computed } from 'vue';
-import { usePolicy } from 'dashboard/composables/usePolicy';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Button from 'dashboard/components-next/button/Button.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import Policy from 'dashboard/components/policy.vue';
 
-const props = defineProps({
+const { featureFlag } = defineProps({
   currentPage: {
     type: Number,
     default: 1,
@@ -50,10 +50,10 @@ const props = defineProps({
 });
 
 const emit = defineEmits(['click', 'close', 'update:currentPage']);
-const { shouldShowPaywall } = usePolicy();
+const { isCloudFeatureEnabled } = useAccount();
 
 const showPaywall = computed(() => {
-  return shouldShowPaywall(props.featureFlag);
+  return !isCloudFeatureEnabled(featureFlag);
 });
 
 const handleButtonClick = () => {
@@ -68,7 +68,7 @@ const handlePageChange = event => {
 <template>
   <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
     <header class="sticky top-0 z-10 px-6 xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+      <div class="w-full max-w-[960px] mx-auto">
         <div
           class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
         >
@@ -96,8 +96,8 @@ const handlePageChange = event => {
       </div>
     </header>
     <main class="flex-1 px-6 overflow-y-auto xl:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
-        <slot v-if="!showPaywall" name="controls" />
+      <div class="w-full max-w-[960px] mx-auto py-4">
+        <slot name="controls" />
         <div
           v-if="isFetching"
           class="flex items-center justify-center py-10 text-n-slate-11"

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

@@ -7,7 +7,6 @@ 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 Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Policy from 'dashboard/components/policy.vue';
 
 const props = defineProps({
@@ -47,27 +46,14 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits(['action', 'navigate', 'select', 'hover']);
+const emit = defineEmits(['action', 'navigate']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const modelValue = computed({
-  get: () => props.isSelected,
-  set: () => emit('select', props.id),
-});
-
 const statusAction = computed(() => {
   if (props.status === 'pending') {
     return [
@@ -116,17 +102,8 @@ const handleDocumentableClick = () => {
 </script>
 
 <template>
-  <CardLayout
-    selectable
-    class="relative"
-    :class="{ 'rounded-md': compact }"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
-      <Checkbox v-model="modelValue" />
-    </div>
-    <div class="flex relative justify-between w-full gap-1">
+  <CardLayout :class="{ 'rounded-md': compact }">
+    <div class="flex justify-between w-full gap-1">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ question }}
       </span>
@@ -171,7 +148,7 @@ const handleDocumentableClick = () => {
             v-if="documentable.type === 'Captain::Document'"
             class="inline-flex items-center gap-1 truncate over"
           >
-            <i class="i-ph-files-light text-base" />
+            <i class="i-ph-chat-circle-dots text-base" />
             <span class="max-w-96 truncate" :title="documentable.name">
               {{ documentable.name }}
             </span>

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

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

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

@@ -27,7 +27,7 @@ const openBilling = () => {
 
 <template>
   <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[960px] mx-auto h-full max-h-[448px] grid place-content-center"
   >
     <BasePaywallModal
       class="mx-auto"

app/javascript/dashboard/components-next/checkbox/Checkbox.story.vue

@@ -1,47 +0,0 @@
-<script setup>
-import Checkbox from './Checkbox.vue';
-import { ref } from 'vue';
-
-const defaultValue = ref(false);
-const isChecked = ref(false);
-const checkedValue = ref(true);
-const indeterminateValue = ref(true);
-</script>
-
-<template>
-  <Story title="Components/Checkbox" :layout="{ type: 'grid', width: '250px' }">
-    <Variant title="States">
-      <div class="p-2 space-y-4">
-        <div class="flex items-center justify-between gap-4">
-          <span>Default:</span>
-          <Checkbox v-model="defaultValue" />
-        </div>
-
-        <div class="flex items-center justify-between gap-4">
-          <span>Checked:</span>
-          <Checkbox v-model="checkedValue" />
-        </div>
-
-        <div class="flex items-center justify-between gap-4">
-          <span>Indeterminate:</span>
-          <Checkbox v-model="indeterminateValue" indeterminate />
-        </div>
-
-        <div class="flex items-center justify-between gap-4">
-          <span>Indeterminate disabled:</span>
-          <Checkbox v-model="indeterminateValue" indeterminate disabled />
-        </div>
-
-        <div class="flex items-center justify-between gap-4">
-          <span>Disabled:</span>
-          <Checkbox v-model="defaultValue" disabled />
-        </div>
-
-        <div class="flex items-center justify-between gap-4">
-          <span>Disabled Checked:</span>
-          <Checkbox v-model="isChecked" disabled />
-        </div>
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/checkbox/Checkbox.vue

@@ -1,63 +0,0 @@
-<script setup>
-defineProps({
-  indeterminate: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['change']);
-
-const modelValue = defineModel('modelValue', {
-  type: Boolean,
-  default: false,
-});
-
-const handleChange = event => {
-  modelValue.value = event.target.checked;
-  emit('change', event);
-};
-</script>
-
-<template>
-  <div class="relative w-4 h-4">
-    <input
-      :checked="modelValue"
-      :indeterminate="indeterminate"
-      type="checkbox"
-      :disabled="disabled"
-      class="peer absolute inset-0 z-10 h-4 w-4 disabled:opacity-50 appearance-none rounded border border-n-slate-6 ring-transparent transition-all duration-200 checked:border-n-brand checked:bg-n-brand dark:border-gray-600 dark:checked:border-n-brand indeterminate:border-n-brand indeterminate:bg-n-brand hover:enabled:bg-n-blue-border cursor-pointer"
-      @change="handleChange"
-    />
-    <!-- Checkmark SVG -->
-    <svg
-      viewBox="0 0 14 14"
-      fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-checked:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-    >
-      <path
-        d="M3 8L6 11L11 3.5"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-    <!-- Minus/Indeterminate SVG -->
-    <svg
-      viewBox="0 0 14 14"
-      fill="none"
-      class="pointer-events-none absolute w-3.5 h-3.5 z-20 stroke-white opacity-0 peer-indeterminate:opacity-100 transition-opacity duration-200 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
-    >
-      <path
-        d="M3 7L11 7"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  </div>
-</template>

app/javascript/dashboard/components-next/combobox/ComboBox.vue

@@ -13,14 +13,34 @@ 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 },
-  useApiResults: { type: Boolean, default: false }, // useApiResults prop to determine if search is handled by API
+  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,
+  },
 });
 
 const emit = defineEmits(['update:modelValue', 'search']);
@@ -34,12 +54,6 @@ 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/copilot/Copilot.vue

@@ -7,7 +7,6 @@ import CopilotInput from './CopilotInput.vue';
 import CopilotLoader from './CopilotLoader.vue';
 import CopilotAgentMessage from './CopilotAgentMessage.vue';
 import CopilotAssistantMessage from './CopilotAssistantMessage.vue';
-import ToggleCopilotAssistant from './ToggleCopilotAssistant.vue';
 import Icon from '../icon/Icon.vue';
 
 const props = defineProps({
@@ -27,17 +26,9 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  assistants: {
-    type: Array,
-    default: () => [],
-  },
-  activeAssistant: {
-    type: Object,
-    default: () => ({}),
-  },
 });
 
-const emit = defineEmits(['sendMessage', 'reset', 'setAssistant']);
+const emit = defineEmits(['sendMessage', 'reset']);
 
 const COPILOT_USER_ROLES = ['assistant', 'system'];
 
@@ -106,18 +97,14 @@ watch(
 
       <CopilotLoader v-if="isCaptainTyping" />
     </div>
-
-    <div
-      v-if="!messages.length"
-      class="h-full w-full flex items-center justify-center"
-    >
-      <div class="h-fit px-3 py-3 space-y-1">
+    <div>
+      <div v-if="!messages.length" class="flex-1 px-3 py-3 space-y-1">
         <span class="text-xs text-n-slate-10">
           {{ $t('COPILOT.TRY_THESE_PROMPTS') }}
         </span>
         <button
           v-for="prompt in promptOptions"
-          :key="prompt.label"
+          :key="prompt"
           class="px-2 py-1 rounded-md border border-n-weak bg-n-slate-2 text-n-slate-11 flex items-center gap-1"
           @click="() => useSuggestion(prompt)"
         >
@@ -125,17 +112,7 @@ watch(
           <Icon icon="i-lucide-chevron-right" />
         </button>
       </div>
-    </div>
-
-    <div class="mx-3 mt-px mb-2">
-      <div class="flex items-center gap-2 justify-between w-full mb-1">
-        <ToggleCopilotAssistant
-          v-if="assistants.length"
-          :assistants="assistants"
-          :active-assistant="activeAssistant"
-          @set-assistant="$event => emit('setAssistant', $event)"
-        />
-        <div v-else />
+      <div class="mx-3 mt-px mb-2 flex flex-col items-end flex-1">
         <button
           v-if="messages.length"
           class="text-xs flex items-center gap-1 hover:underline"
@@ -144,8 +121,8 @@ watch(
           <i class="i-lucide-refresh-ccw" />
           <span>{{ $t('CAPTAIN.COPILOT.RESET') }}</span>
         </button>
+        <CopilotInput class="mb-1 flex-1 w-full" @send="sendMessage" />
       </div>
-      <CopilotInput class="mb-1 w-full" @send="sendMessage" />
     </div>
   </div>
 </template>

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

@@ -1,81 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
-import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
-import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
-import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
-
-const props = defineProps({
-  assistants: {
-    type: Array,
-    required: true,
-  },
-  activeAssistant: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['setAssistant']);
-
-const { t } = useI18n();
-
-const activeAssistantLabel = computed(() => {
-  return props.activeAssistant
-    ? props.activeAssistant.name
-    : t('CAPTAIN.COPILOT.SELECT_ASSISTANT');
-});
-</script>
-
-<template>
-  <div>
-    <DropdownContainer>
-      <template #trigger="{ toggle, isOpen }">
-        <Button
-          :label="activeAssistantLabel"
-          icon="i-woot-captain"
-          ghost
-          slate
-          xs
-          :class="{ 'bg-n-alpha-2': isOpen }"
-          @click="toggle"
-        />
-      </template>
-      <DropdownBody class="bottom-9 min-w-64 z-50" strong>
-        <DropdownSection class="max-h-80 overflow-scroll">
-          <DropdownItem
-            v-for="assistant in assistants"
-            :key="assistant.id"
-            class="!items-start !gap-1 flex-col cursor-pointer"
-            @click="() => emit('setAssistant', assistant)"
-          >
-            <template #label>
-              <div class="flex gap-1 justify-between w-full">
-                <div class="items-start flex gap-1 flex-col">
-                  <span class="text-n-slate-12 text-sm">
-                    {{ assistant.name }}
-                  </span>
-                  <span class="line-clamp-2 text-n-slate-11 text-xs">
-                    {{ assistant.description }}
-                  </span>
-                </div>
-
-                <div
-                  v-if="assistant.id === activeAssistant?.id"
-                  class="flex items-center justify-center flex-shrink-0 w-4 h-4 rounded-full bg-n-slate-12 dark:bg-n-slate-11"
-                >
-                  <i
-                    class="i-lucide-check text-white dark:text-n-slate-1 size-3"
-                  />
-                </div>
-              </div>
-            </template>
-          </DropdownItem>
-        </DropdownSection>
-      </DropdownBody>
-    </DropdownContainer>
-  </div>
-</template>

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -29,6 +29,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  labelClass: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['action']);
@@ -97,9 +101,13 @@ onMounted(() => {
       </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0 size-3.5" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-      <span v-if="item.label" class="min-w-0 text-sm truncate">{{
-        item.label
-      }}</span>
+      <span
+        v-if="item.label"
+        class="min-w-0 text-sm truncate"
+        :class="labelClass"
+      >
+        {{ item.label }}
+      </span>
     </button>
     <div
       v-if="filteredMenuItems.length === 0"

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownBody.vue

@@ -19,7 +19,7 @@ const beforeClass = computed(() => {
 
   // Add extra blur layer only when strong prop is true, as a hack for Chrome's stacked backdrop-blur limitation
   // https://issues.chromium.org/issues/40835530
-  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:rounded-xl before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
+  return "before:content-['\x00A0'] before:absolute before:bottom-0 before:left-0 before:w-full before:h-full before:backdrop-contrast-70 before:backdrop-blur-sm before:z-0 [&>*]:relative";
 });
 </script>
 

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

@@ -1,21 +1,6 @@
-<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,11 +414,6 @@ 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;
@@ -477,7 +472,6 @@ 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,14 +15,18 @@ 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,
@@ -37,8 +41,12 @@ const props = defineProps({
   },
 });
 
-const allMessages = computed(() => {
-  return useCamelCase(props.messages, { deep: true });
+const unread = computed(() => {
+  return useCamelCase(props.unReadMessages, { deep: true });
+});
+
+const read = computed(() => {
+  return useCamelCase(props.readMessages, { deep: true });
 });
 
 /**
@@ -100,21 +108,29 @@ const getInReplyToMessage = parentMessage => {
 <template>
   <ul class="px-4 bg-n-background">
     <slot name="beforeAll" />
-    <template v-for="(message, index) in allMessages" :key="message.id">
-      <slot
-        v-if="firstUnreadId && message.id === firstUnreadId"
-        name="unreadBadge"
-      />
+    <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, allMessages)"
+        :group-with-next="shouldGroupWithNext(index, read)"
         :inbox-supports-reply-to="inboxSupportsReplyTo"
         :current-user-id="currentUserId"
         data-clarity-mask="True"
       />
     </template>
+    <slot name="beforeUnread" />
+    <template v-for="(message, index) in unread" :key="message.id">
+      <Message
+        v-bind="message"
+        :in-reply-to="getInReplyToMessage(message)"
+        :group-with-next="shouldGroupWithNext(index, unread)"
+        :inbox-supports-reply-to="inboxSupportsReplyTo"
+        :current-user-id="currentUserId"
+        :is-email-inbox="isAnEmailChannel"
+        data-clarity-mask="True"
+      />
+    </template>
     <slot name="after" />
   </ul>
 </template>

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

@@ -49,7 +49,7 @@ const isSent = computed(() => {
     isASmsInbox.value ||
     isATelegramChannel.value
   ) {
-    return status.value === MESSAGE_STATUS.SENT;
+    return sourceId.value && status.value === MESSAGE_STATUS.SENT;
   }
 
   // All messages will be mark as sent for the Line channel, as there is no source ID.
@@ -67,7 +67,7 @@ const isDelivered = computed(() => {
     isASmsInbox.value ||
     isAFacebookInbox.value
   ) {
-    return status.value === MESSAGE_STATUS.DELIVERED;
+    return sourceId.value && status.value === MESSAGE_STATUS.DELIVERED;
   }
   // All messages marked as delivered for the web widget inbox and API inbox once they are sent.
   if (isAWebWidgetInbox.value || isAPIInbox.value) {
@@ -88,7 +88,7 @@ const isRead = computed(() => {
     isATwilioChannel.value ||
     isAFacebookInbox.value
   ) {
-    return status.value === MESSAGE_STATUS.READ;
+    return sourceId.value && status.value === MESSAGE_STATUS.READ;
   }
 
   if (isAWebWidgetInbox.value || isAPIInbox.value) {

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

@@ -10,7 +10,6 @@ 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,
@@ -24,14 +23,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">
+      <div class="grid gap-3 z-20">
         <div
           class="size-8 rounded-lg grid place-content-center"
           :class="iconBgColor"
@@ -49,9 +48,6 @@ 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 { attachments } = useMessageContext();
+const { content, attachments } = useMessageContext();
 
 const $store = useStore();
 const { t } = useI18n();
@@ -24,12 +24,6 @@ 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, '');
 });
@@ -38,9 +32,13 @@ const rawPhoneNumber = computed(() => {
   return phoneNumber.value.replace(/\D/g, '');
 });
 
+const name = computed(() => {
+  return content.value;
+});
+
 function getContactObject() {
   const contactItem = {
-    name: contactName.value,
+    name: name.value,
     phone_number: `+${rawPhoneNumber.value}`,
   };
   return contactItem;
@@ -101,7 +99,6 @@ 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,30 +2,34 @@
 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 { content, sender, id } = useMessageContext();
+const { contentAttributes } = useMessageContext();
 
 const { t } = useI18n();
 
+const meetingData = computed(() => {
+  return useCamelCase(contentAttributes.value.data);
+});
+
 const isLoading = ref(false);
 const dyteAuthToken = ref('');
 
 const meetingLink = computed(() => {
-  return buildDyteURL(dyteAuthToken.value);
+  return buildDyteURL(meetingData.value.roomName, dyteAuthToken.value);
 });
 
 const joinTheCall = async () => {
   isLoading.value = true;
   try {
-    const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
-      id.value
-    );
-    dyteAuthToken.value = token;
+    const { data: { authResponse: { authToken } = {} } = {} } =
+      await DyteAPI.addParticipantToMeeting(meetingData.value.messageId);
+    dyteAuthToken.value = authToken;
   } catch (err) {
     useAlert(t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
   } finally {
@@ -34,7 +38,7 @@ const joinTheCall = async () => {
 };
 
 const leaveTheRoom = () => {
-  dyteAuthToken.value = '';
+  this.dyteAuthToken = '';
 };
 const action = computed(() => ({
   label: t('INTEGRATION_SETTINGS.DYTE.CLICK_HERE_TO_JOIN'),
@@ -49,18 +53,13 @@ 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="px-4 py-2 text-sm rounded-lg bg-n-solid-3 mt-3"
+        class="bg-n-solid-3 px-4 py-2 rounded-lg text-sm"
         @click="leaveTheRoom"
       >
         {{ $t('INTEGRATION_SETTINGS.DYTE.LEAVE_THE_ROOM') }}

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

@@ -1,7 +1,6 @@
 <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';
@@ -30,15 +29,8 @@ 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 ?? textToShow.value;
+  return contentAttributes?.value?.email?.htmlContent?.full ?? content.value;
 });
 
 const unquotedHTML = computed(() => {
@@ -48,6 +40,12 @@ 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>
@@ -94,11 +92,6 @@ const hasQuotedMessage = computed(() => {
           <Letter
             v-if="showQuotedMessage"
             class-name="prose prose-bubble !max-w-none"
-            :allowed-css-properties="[
-              ...allowedCssProperties,
-              'transform',
-              'transform-origin',
-            ]"
             :html="fullHTML"
             :text="textToShow"
           />
@@ -106,11 +99,6 @@ const hasQuotedMessage = 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/chips/Audio.vue

@@ -25,29 +25,22 @@ 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.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
 };
 
 const toggleMute = () => {
@@ -56,7 +49,7 @@ const toggleMute = () => {
 };
 
 const onTimeUpdate = () => {
-  currentTime.value = audioPlayer.value?.currentTime;
+  currentTime.value = audioPlayer.value.currentTime;
 };
 
 const seek = event => {
@@ -78,16 +71,6 @@ 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 () => {
@@ -122,7 +105,7 @@ const downloadAudio = async () => {
     <div class="tabular-nums text-xs">
       {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
     </div>
-    <div class="flex-1 items-center flex px-2">
+    <div class="flex items-center px-2">
       <input
         type="range"
         min="0"
@@ -132,14 +115,6 @@ 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/pagination/PaginationFooter.vue

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

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -185,7 +185,7 @@ watch(
               "
               trailing-icon
               :disabled="disabled"
-              class="!h-[1.875rem] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[30px] top-1 !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span

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

@@ -42,6 +42,8 @@ const isFeatureEnabledonAccount = useMapGetter(
   'accounts/isFeatureEnabledonAccount'
 );
 
+const globalConfig = useMapGetter('globalConfig/get');
+
 const showV4Routes = computed(() => {
   return isFeatureEnabledonAccount.value(
     currentAccountId.value,
@@ -240,20 +242,24 @@ const menuItems = computed(() => {
       name: 'Captain',
       icon: 'i-woot-captain',
       label: t('SIDEBAR.CAPTAIN'),
+      showOnlyOnCloud: true,
       children: [
         {
           name: 'Assistants',
           label: t('SIDEBAR.CAPTAIN_ASSISTANTS'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_assistants_index'),
         },
         {
           name: 'Documents',
           label: t('SIDEBAR.CAPTAIN_DOCUMENTS'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_documents_index'),
         },
         {
           name: 'Responses',
           label: t('SIDEBAR.CAPTAIN_RESPONSES'),
+          showOnlyOnCloud: true,
           to: accountScopedRoute('captain_responses_index'),
         },
       ],
@@ -505,6 +511,7 @@ const menuItems = computed(() => {
           name: 'Settings Billing',
           label: t('SIDEBAR.BILLING'),
           icon: 'i-lucide-credit-card',
+          showOnlyOnCloud: true,
           to: accountScopedRoute('billing_settings_index'),
         },
       ],
@@ -515,12 +522,17 @@ const menuItems = computed(() => {
 
 <template>
   <aside
-    class="w-[12.5rem] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
   >
     <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 class="size-4" />
+          <img
+            v-if="globalConfig.logoThumbnail"
+            :src="globalConfig.logoThumbnail"
+            class="h-5 w-5"
+          />
+          <Logo v-else />
         </div>
         <div class="flex-shrink-0 w-px h-3 bg-n-strong" />
         <SidebarAccountSwitcher

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

@@ -24,6 +24,7 @@ const {
   resolvePath,
   resolvePermissions,
   resolveFeatureFlag,
+  isOnChatwootCloud,
   isAllowed,
 } = useSidebarContext();
 
@@ -42,6 +43,7 @@ const hasChildren = computed(
 const accessibleItems = computed(() => {
   if (!hasChildren.value) return [];
   return props.children.filter(child => {
+    if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
     // If a item has no link, it means it's just a subgroup header
     // So we don't need to check for permissions here, because there's nothing to
     // access here anyway
@@ -164,7 +166,7 @@ onMounted(async () => {
           :active-child="activeChild"
         />
         <SidebarGroupLeaf
-          v-else-if="isAllowed(child.to)"
+          v-else
           v-show="isExpanded || activeChild?.name === child.name"
           v-bind="child"
           :active="activeChild?.name === child.name"

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

@@ -9,10 +9,18 @@ const props = defineProps({
   to: { type: [String, Object], required: true },
   icon: { type: [String, Object], default: null },
   active: { type: Boolean, default: false },
+  showOnlyOnCloud: { type: Boolean, default: false },
   component: { type: Function, default: null },
 });
 
-const { resolvePermissions, resolveFeatureFlag } = useSidebarContext();
+const { resolvePermissions, resolveFeatureFlag, isOnChatwootCloud } =
+  useSidebarContext();
+
+const allowedToShow = computed(() => {
+  if (props.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
+
+  return true;
+});
 
 const shouldRenderComponent = computed(() => {
   return typeof props.component === 'function' || isVNode(props.component);
@@ -22,6 +30,7 @@ const shouldRenderComponent = computed(() => {
 <!-- eslint-disable-next-line vue/no-root-v-if -->
 <template>
   <Policy
+    v-if="allowedToShow"
     :permissions="resolvePermissions(to)"
     :feature-flag="resolveFeatureFlag(to)"
     as="li"
@@ -31,7 +40,7 @@ const shouldRenderComponent = computed(() => {
       :is="to ? 'router-link' : 'div'"
       :to="to"
       :title="label"
-      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[9.438rem] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
+      class="flex h-8 items-center gap-2 px-2 py-1 rounded-lg max-w-[151px] hover:bg-gradient-to-r from-transparent via-n-slate-3/70 to-n-slate-3/70 group"
       :class="{
         'n-blue-text bg-n-alpha-2 active': active,
       }"

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

@@ -5,7 +5,6 @@ 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,
@@ -13,7 +12,6 @@ import {
   DropdownSeparator,
   DropdownItem,
 } from 'next/dropdown-menu/base';
-import CustomBrandPolicyWrapper from '../../components/CustomBrandPolicyWrapper.vue';
 
 const emit = defineEmits(['close', 'openKeyShortcutModal']);
 
@@ -23,28 +21,14 @@ 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: showChatSupport.value,
-      showOnCustomBrandedInstance: false,
+      show: !!globalConfig.value.chatwootInboxToken,
       label: t('SIDEBAR_ITEMS.CONTACT_SUPPORT'),
       icon: 'i-lucide-life-buoy',
       click: () => {
@@ -53,7 +37,6 @@ const menuItems = computed(() => {
     },
     {
       show: true,
-      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.KEYBOARD_SHORTCUTS'),
       icon: 'i-lucide-keyboard',
       click: () => {
@@ -62,14 +45,12 @@ 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: () => {
@@ -79,7 +60,6 @@ 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',
@@ -88,7 +68,6 @@ const menuItems = computed(() => {
     },
     {
       show: currentUser.value.type === 'SuperAdmin',
-      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.SUPER_ADMIN_CONSOLE'),
       icon: 'i-lucide-castle',
       link: '/super_admin',
@@ -97,7 +76,6 @@ const menuItems = computed(() => {
     },
     {
       show: true,
-      showOnCustomBrandedInstance: true,
       label: t('SIDEBAR_ITEMS.LOGOUT'),
       icon: 'i-lucide-power',
       click: Auth.logout,
@@ -144,11 +122,7 @@ const allowedMenuItems = computed(() => {
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">
-        <CustomBrandPolicyWrapper
-          :show-on-custom-branded-instance="item.showOnCustomBrandedInstance"
-        >
-          <DropdownItem v-if="item.show" v-bind="item" />
-        </CustomBrandPolicyWrapper>
+        <DropdownItem v-if="item.show" v-bind="item" />
       </template>
     </DropdownBody>
   </DropdownContainer>

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

@@ -14,11 +14,12 @@ const props = defineProps({
   activeChild: { type: Object, default: undefined },
 });
 
-const { isAllowed } = useSidebarContext();
+const { isAllowed, isOnChatwootCloud } = useSidebarContext();
 const scrollableContainer = ref(null);
 
 const accessibleItems = computed(() =>
   props.children.filter(child => {
+    if (child.showOnlyOnCloud && !isOnChatwootCloud.value) return false;
     return child.to && isAllowed(child.to);
   })
 );

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

@@ -1,4 +1,5 @@
 import { inject, provide } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
 import { usePolicy } from 'dashboard/composables/usePolicy';
 import { useRouter } from 'vue-router';
 
@@ -11,8 +12,9 @@ export function useSidebarContext() {
   }
 
   const router = useRouter();
+  const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
 
-  const { shouldShow } = usePolicy();
+  const { checkFeatureAllowed, checkPermissions } = usePolicy();
 
   const resolvePath = to => {
     if (to) return router.resolve(to)?.path || '/';
@@ -29,17 +31,11 @@ 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 shouldShow(featureFlag, permissions, installationType);
+    return checkPermissions(permissions) && checkFeatureAllowed(featureFlag);
   };
 
   return {
@@ -48,6 +44,7 @@ export function useSidebarContext() {
     resolvePermissions,
     resolveFeatureFlag,
     isAllowed,
+    isOnChatwootCloud,
   };
 }
 

app/javascript/dashboard/components-next/switch/Switch.vue

@@ -27,7 +27,7 @@ const updateValue = () => {
   >
     <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
     <span
-      class="absolute top-[0.07rem] left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
+      class="absolute top-px left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-in-out"
       :class="
         modelValue
           ? 'translate-x-2.5 bg-white'

app/javascript/dashboard/components/ChatList.vue

@@ -353,11 +353,10 @@ function setFiltersFromUISettings() {
   const { conversations_filter_by: filterBy = {} } = uiSettings.value;
   const { status, order_by: orderBy } = filterBy;
   activeStatus.value = status || wootConstants.STATUS_TYPE.OPEN;
-  activeSortBy.value = Object.values(wootConstants.SORT_BY_TYPE).includes(
-    orderBy
-  )
-    ? orderBy
-    : wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
+  activeSortBy.value =
+    Object.keys(wootConstants.SORT_BY_TYPE).find(
+      sortField => sortField === orderBy
+    ) || wootConstants.SORT_BY_TYPE.LAST_ACTIVITY_AT_DESC;
 }
 
 function emitConversationLoaded() {
@@ -676,15 +675,6 @@ 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', {
@@ -754,7 +744,6 @@ 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,7 +13,6 @@ export default {
     'updateConversationStatus',
     'toggleContextMenu',
     'markAsUnread',
-    'markAsRead',
     'assignPriority',
     'isConversationSelected',
   ],
@@ -65,7 +64,6 @@ 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 (import.meta.env.DEV && onClose && typeof onClose === 'function') {
+  if (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/SettingsSection.vue

@@ -23,34 +23,33 @@ export default {
 
 <template>
   <div
-    class="ml-0 mr-0 py-8 w-full"
+    class="ml-0 mr-0 flex py-8 w-full xl:w-3/4 flex-col xl:flex-row"
     :class="{
-      'border-b border-solid border-n-weak/60 dark:border-n-weak': showBorder,
+      'border-b border-solid border-slate-50 dark:border-slate-700/30':
+        showBorder,
     }"
   >
-    <div class="grid grid-cols-1 lg:grid-cols-6 gap-6">
-      <div class="col-span-2 xl:col-span-1">
-        <p
-          v-if="title"
-          class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
-        >
-          {{ title }}
-        </p>
-        <p
-          class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
-        >
-          <slot v-if="subTitle" name="subTitle">
-            {{ subTitle }}
-          </slot>
-        </p>
-        <p v-if="note">
-          <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
-          {{ note }}
-        </p>
-      </div>
-      <div class="col-span-4 lg:col-span-4 2xl:col-span-3">
-        <slot />
-      </div>
+    <div class="w-full xl:w-1/4 min-w-0 xl:max-w-[30%] pr-12">
+      <p
+        v-if="title"
+        class="text-base text-woot-500 dark:text-woot-500 mb-0 font-medium"
+      >
+        {{ title }}
+      </p>
+      <p
+        class="text-sm mb-2 text-slate-700 dark:text-slate-300 leading-5 tracking-normal mt-2"
+      >
+        <slot v-if="subTitle" name="subTitle">
+          {{ subTitle }}
+        </slot>
+      </p>
+      <p v-if="note">
+        <span class="font-semibold">{{ $t('INBOX_MGMT.NOTE') }}</span>
+        {{ note }}
+      </p>
+    </div>
+    <div class="w-full xl:w-1/2 min-w-0 xl:max-w-[50%]">
+      <slot />
     </div>
   </div>
 </template>

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

@@ -28,12 +28,10 @@ export default {
     },
   },
   created() {
-    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'
-      );
-    }
+    // 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/copilot/CopilotContainer.vue

@@ -1,11 +1,8 @@
 <script setup>
-import { ref, computed, onMounted, watchEffect } from 'vue';
-import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import ConversationAPI from 'dashboard/api/inbox/conversation';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useUISettings } from 'dashboard/composables/useUISettings';
-
+import { ref } from 'vue';
 const props = defineProps({
   conversationId: {
     type: [Number, String],
@@ -16,44 +13,10 @@ const props = defineProps({
     required: true,
   },
 });
-
-const store = useStore();
 const currentUser = useMapGetter('getCurrentUser');
-const assistants = useMapGetter('captainAssistants/getRecords');
-const inboxAssistant = useMapGetter('getCopilotAssistant');
-const { uiSettings, updateUISettings } = useUISettings();
-
 const messages = ref([]);
+
 const isCaptainTyping = ref(false);
-const selectedAssistantId = ref(null);
-
-const activeAssistant = computed(() => {
-  const preferredId = uiSettings.value.preferred_captain_assistant_id;
-
-  // If the user has selected a specific assistant, it takes first preference for Copilot.
-  if (preferredId) {
-    const preferredAssistant = assistants.value.find(a => a.id === preferredId);
-    // Return the preferred assistant if found, otherwise continue to next cases
-    if (preferredAssistant) return preferredAssistant;
-  }
-
-  // If the above is not available, the assistant connected to the inbox takes preference.
-  if (inboxAssistant.value) {
-    const inboxMatchedAssistant = assistants.value.find(
-      a => a.id === inboxAssistant.value.id
-    );
-    if (inboxMatchedAssistant) return inboxMatchedAssistant;
-  }
-  // If neither of the above is available, the first assistant in the account takes preference.
-  return assistants.value[0];
-});
-
-const setAssistant = async assistant => {
-  selectedAssistantId.value = assistant.id;
-  await updateUISettings({
-    preferred_captain_assistant_id: assistant.id,
-  });
-};
 
 const handleReset = () => {
   messages.value = [];
@@ -79,7 +42,7 @@ const sendMessage = async message => {
           }))
           .slice(0, -1),
         message,
-        assistant_id: selectedAssistantId.value,
+        assistant_id: 16,
       }
     );
     messages.value.push({
@@ -94,17 +57,6 @@ const sendMessage = async message => {
     isCaptainTyping.value = false;
   }
 };
-
-onMounted(() => {
-  store.dispatch('captainAssistants/get');
-});
-
-watchEffect(() => {
-  if (props.conversationId) {
-    store.dispatch('getInboxCaptainAssistantById', props.conversationId);
-    selectedAssistantId.value = activeAssistant.value?.id;
-  }
-});
 </script>
 
 <template>
@@ -113,9 +65,6 @@ watchEffect(() => {
     :support-agent="currentUser"
     :is-captain-typing="isCaptainTyping"
     :conversation-inbox-type="conversationInboxType"
-    :assistants="assistants"
-    :active-assistant="activeAssistant"
-    @set-assistant="setAssistant"
     @send-message="sendMessage"
     @reset="handleReset"
   />

app/javascript/dashboard/components/layout/sidebarComponents/OptionsMenu.vue

@@ -4,7 +4,6 @@ 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: {
@@ -29,7 +28,6 @@ export default {
       currentUser: 'getCurrentUser',
       globalConfig: 'globalConfig/get',
       accountId: 'getCurrentAccountId',
-      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
     }),
     showChangeAccountOption() {
       if (this.globalConfig.createNewAccountFromDashboard) {
@@ -39,14 +37,6 @@ 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) {
@@ -92,7 +82,7 @@ export default {
             {{ $t('SIDEBAR_ITEMS.CHANGE_ACCOUNTS') }}
           </woot-button>
         </WootDropdownItem>
-        <WootDropdownItem v-if="showChatSupport">
+        <WootDropdownItem v-if="globalConfig.chatwootInboxToken">
           <woot-button
             variant="clear"
             color-scheme="secondary"

app/javascript/dashboard/components/policy.vue

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

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

@@ -23,16 +23,17 @@ export default {
 
 <template>
   <div
-    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-n-strong"
+    class="flex flex-col min-w-[15rem] max-h-[21.25rem] max-w-[23.75rem] rounded-md border border-solid border-slate-75 dark:border-slate-600"
     :class="{
-      'bg-woot-25 dark:bg-n-solid-2 border border-solid border-n-blue-border':
+      'bg-woot-25 dark:bg-slate-700 border border-solid border-woot-300 dark:border-woot-400':
         active,
     }"
   >
     <div
-      class="flex justify-between items-center rounded-t-md px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 border-b border-solid border-n-strong"
+      class="flex justify-between items-center px-2 w-full h-10 bg-slate-50 dark:bg-slate-900 rounded-t-[5px] border-b border-solid border-slate-50 dark:border-slate-600"
       :class="{
-        'bg-woot-50 border-b border-solid border-n-blue-border': active,
+        'bg-woot-50 border-b border-solid border-woot-75 dark:border-woot-700':
+          active,
       }"
     >
       <div class="flex items-center p-1 text-sm font-medium">{{ heading }}</div>

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

@@ -38,20 +38,20 @@ export default {
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
-  height: 1.188rem;
+  height: 19px;
   position: relative;
   transition-duration: 200ms;
   transition-property: background-color;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 2.125rem;
+  width: 34px;
 
   &.active {
     background-color: var(--w-500);
   }
 
   &.small {
-    width: 1.375rem;
-    height: 0.875rem;
+    width: 22px;
+    height: 14px;
 
     span {
       height: var(--space-one);

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

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, useTemplateRef, provide, computed, watch } from 'vue';
-import { useElementSize } from '@vueuse/core';
+import { ref, provide, onMounted, computed } from 'vue';
+import { useEventListener } from '@vueuse/core';
 
 const props = defineProps({
   index: {
@@ -19,12 +19,6 @@ const props = defineProps({
 
 const emit = defineEmits(['change']);
 
-const tabsContainer = useTemplateRef('tabsContainer');
-const tabsList = useTemplateRef('tabsList');
-
-const { width: containerWidth } = useElementSize(tabsContainer);
-const { width: listWidth } = useElementSize(tabsList);
-
 const hasScroll = ref(false);
 
 const activeIndex = computed({
@@ -40,16 +34,20 @@ provide('updateActiveIndex', index => {
 });
 
 const computeScrollWidth = () => {
-  if (tabsContainer.value && tabsList.value) {
-    hasScroll.value = tabsList.value.scrollWidth > tabsList.value.clientWidth;
+  // TODO: use useElementSize from vueuse
+  const tabElement = document.querySelector('.tabs');
+  if (tabElement) {
+    hasScroll.value = tabElement.scrollWidth > tabElement.clientWidth;
   }
 };
 
 const onScrollClick = direction => {
-  if (tabsContainer.value && tabsList.value) {
-    let scrollPosition = tabsList.value.scrollLeft;
+  // TODO: use useElementSize from vueuse
+  const tabElement = document.querySelector('.tabs');
+  if (tabElement) {
+    let scrollPosition = tabElement.scrollLeft;
     scrollPosition += direction === 'left' ? -100 : 100;
-    tabsList.value.scrollTo({
+    tabElement.scrollTo({
       top: 0,
       left: scrollPosition,
       behavior: 'smooth',
@@ -57,19 +55,14 @@ const onScrollClick = direction => {
   }
 };
 
-// Watch for changes in element sizes with immediate execution
-watch(
-  [containerWidth, listWidth],
-  () => {
-    computeScrollWidth();
-  },
-  { immediate: true }
-);
+useEventListener(window, 'resize', computeScrollWidth);
+onMounted(() => {
+  computeScrollWidth();
+});
 </script>
 
 <template>
   <div
-    ref="tabsContainer"
     :class="{
       'tabs--container--with-border': border,
       'tabs--container--compact': isCompact,
@@ -83,7 +76,7 @@ watch(
     >
       <fluent-icon icon="chevron-left" :size="16" />
     </button>
-    <ul ref="tabsList" :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
+    <ul :class="{ 'tabs--with-scroll': hasScroll }" class="tabs">
       <slot />
     </ul>
     <button

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

@@ -72,26 +72,26 @@ export default {
 
     &.active {
       h3 {
-        @apply text-n-blue-text dark:text-n-blue-text;
+        @apply text-woot-500 dark:text-woot-500;
       }
 
       .step {
-        @apply bg-n-brand dark:bg-n-brand;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
     }
 
     &.over {
       &::after {
-        @apply bg-n-brand dark:bg-n-brand;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
 
       .step {
-        @apply bg-n-brand dark:bg-n-brand;
+        @apply bg-woot-500 dark:bg-woot-500;
       }
 
       & + .item {
         &::before {
-          @apply bg-n-brand dark:bg-n-brand;
+          @apply bg-woot-500 dark:bg-woot-500;
         }
       }
     }

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

@@ -201,10 +201,10 @@ export default {
 
 <style lang="scss" scoped>
 .filter {
-  @apply bg-n-slate-3 dark:bg-n-solid-3 p-2 border border-solid border-n-strong dark:border-n-strong rounded-md mb-2;
+  @apply bg-slate-50 dark:bg-slate-800 p-2 border border-solid border-slate-75 dark:border-slate-600 rounded-md mb-2;
 
   &.is-a-macro {
-    @apply mb-0 bg-n-slate-2 dark:bg-n-solid-3 p-0 border-0 rounded-none;
+    @apply mb-0 bg-white dark:bg-slate-700 p-0 border-0 rounded-none;
   }
 }
 

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -128,7 +128,7 @@ export default {
     getInputErrorClass(errorMessage) {
       return errorMessage
         ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
-        : 'bg-n-slate-3 dark:bg-n-solid-3 border-n-strong dark:border-n-strong';
+        : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },
   },
 };

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

@@ -14,7 +14,7 @@ export default {
 </script>
 
 <template>
-  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak/60">
+  <div class="pt-4 pb-0 px-8 border-b border-solid border-n-weak">
     <h2 class="text-2xl text-slate-800 dark:text-slate-100 mb-1 font-medium">
       {{ headerTitle }}
     </h2>

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

@@ -156,14 +156,13 @@ export default {
     </slot>
     <img
       v-if="badgeSrc"
-      class="source-badge z-20"
+      class="source-badge"
       :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/WootWriter/ReplyBottomPanel.vue

@@ -127,7 +127,7 @@ export default {
     const uploadRef = ref(false);
 
     const keyboardEvents = {
-      '$mod+Alt+KeyA': {
+      'Alt+KeyA': {
         action: () => {
           // TODO: This is really hacky, we need to replace the file picker component with
           // a custom one, where the logic and the component markup is isolated.

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -85,7 +85,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
+  <div class="flex justify-between h-[52px] gap-2 ltr:pl-3 rtl:pr-3">
     <EditorModeToggle
       :mode="mode"
       class="mt-3"

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

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

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

@@ -53,7 +53,7 @@ const showCopilotTab = computed(() =>
 
 <template>
   <div
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-80 min-w-80 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
+    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 min-w-[320px] w-[320px] 2xl:min-w-96 2xl:w-96 flex flex-col bg-n-background"
   >
     <div v-if="showCopilotTab" class="p-2">
       <TabBar

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

@@ -243,15 +243,6 @@ 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';
     },
@@ -501,11 +492,12 @@ 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="getMessages"
+      :messages="currentChat ? currentChat.messages : []"
     >
       <template #beforeAll>
         <transition name="slide-up">
@@ -515,10 +507,15 @@ export default {
           </li>
         </transition>
       </template>
-      <template #unreadBadge>
+      <template #beforeUnread>
         <li v-show="unreadMessageCount != 0" class="unread--toast">
           <span>
-            {{ unreadMessageLabel }}
+            {{ unreadMessageCount > 9 ? '9+' : unreadMessageCount }}
+            {{
+              unreadMessageCount > 1
+                ? $t('CONVERSATION.UNREAD_MESSAGES')
+                : $t('CONVERSATION.UNREAD_MESSAGE')
+            }}
           </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, getRecipients } from '@chatwoot/utils';
+import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
@@ -326,8 +326,7 @@ export default {
         this.isAnEmailChannel ||
         this.isAWebWidgetInbox ||
         this.isAPIInbox ||
-        this.isAWhatsAppChannel ||
-        this.isATelegramChannel
+        this.isAWhatsAppChannel
       );
     },
     isSignatureEnabledForInbox() {
@@ -389,6 +388,7 @@ export default {
   watch: {
     currentChat(conversation) {
       const { can_reply: canReply } = conversation;
+
       this.setCCAndToEmailsFromLastChat();
 
       if (this.isOnPrivateNote) {
@@ -403,19 +403,6 @@ 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);
@@ -1002,20 +989,45 @@ export default {
       this.ccEmails = value.ccEmails;
     },
     setCCAndToEmailsFromLastChat() {
-      const conversationContact = this.currentChat?.meta?.sender?.email || '';
-      const { email: inboxEmail, forward_to_email: forwardToEmail } =
-        this.inbox;
+      if (!this.lastEmail) return;
 
-      const { cc, bcc, to } = getRecipients(
-        this.lastEmail,
-        conversationContact,
-        inboxEmail,
-        forwardToEmail
+      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 = [];
+
+      // 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
       );
 
-      this.toEmails = to.join(', ');
+      // Ensure only unique email addresses are in the CC list
+      bcc = [...new Set(bcc)];
+      cc = [...new Set(cc)];
+      to = [...new Set(to)];
+
       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,23 +9,26 @@ export default {
       type: Number,
       required: true,
     },
+    meetingData: {
+      type: Object,
+      default: () => ({}),
+    },
   },
   data() {
     return { isLoading: false, dyteAuthToken: '', isSDKMounted: false };
   },
   computed: {
     meetingLink() {
-      return buildDyteURL(this.dyteAuthToken);
+      return buildDyteURL(this.meetingData.room_name, this.dyteAuthToken);
     },
   },
   methods: {
     async joinTheCall() {
       this.isLoading = true;
       try {
-        const { data: { token } = {} } = await DyteAPI.addParticipantToMeeting(
-          this.messageId
-        );
-        this.dyteAuthToken = token;
+        const { data: { authResponse: { authToken } = {} } = {} } =
+          await DyteAPI.addParticipantToMeeting(this.messageId);
+        this.dyteAuthToken = authToken;
       } catch (err) {
         useAlert(this.$t('INTEGRATION_SETTINGS.DYTE.JOIN_ERROR'));
       } finally {

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

@@ -41,7 +41,6 @@ export default {
     'updateConversation',
     'assignPriority',
     'markAsUnread',
-    'markAsRead',
     'assignAgent',
     'assignTeam',
     'assignLabel',
@@ -49,10 +48,6 @@ 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',
@@ -63,16 +58,16 @@ export default {
           label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.RESOLVED'),
           icon: 'checkmark',
         },
-        {
-          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',
         },
+        {
+          key: wootConstants.STATUS_TYPE.OPEN,
+          label: this.$t('CONVERSATION.CARD_CONTEXT_MENU.REOPEN'),
+          icon: 'arrow-redo',
+        },
       ],
       snoozeOption: {
         key: wootConstants.STATUS_TYPE.SNOOZED,
@@ -208,13 +203,6 @@ 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)"
@@ -230,7 +218,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"