fix: rely on Rails autoloading for SafeFetch

# Pull Request Template

## Description

This PR adds IMAP authentication mechanism selection to Chatwoot's email
inbox configuration. Users can now choose between 'plain', 'login', and
'cram-md5' authentication methods when configuring IMAP settings,
providing flexibility for different email providers that require
specific authentication types.

https://github.com/chatwoot/chatwoot/issues/8867

The implementation includes:
- Frontend dropdown with numeric keys (1, 2, 3) matching SMTP auth style
- Backend API validation for allowed authentication mechanisms
- Consistent 'cram-md5' format throughout the codebase
- Updated IMAP service to handle different auth types properly

This feature maintains consistency with existing SMTP authentication
options and follows the established UI/UX patterns in the application.

## Type of change

Please delete options that are not relevant.

- [x] New feature (non-breaking change which adds functionality)
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] Breaking change (fix or feature that would cause existing
functionality not to work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

### Manual Testing:
- Tested in Docker environment
- Verified IMAP auth dropdown appears in inbox settings
- Confirmed all three auth mechanisms (plain, login, cram-md5) can be
selected and saved
- Tested API validation by attempting to save invalid auth mechanisms

### Automated Testing:
- Updated existing IMAP service tests to use consistent lowercase values
- Updated API controller tests for authentication parameter handling
- All tests pass locally with the new changes

### Test Configuration:
- Tested with both new and existing inbox configurations

## Checklist:

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

## Additional Notes

- This feature is backward compatible and doesn't break existing IMAP
configurations
- The 'cram-md5' format is used consistently throughout (UI, API,
storage, services)
- Net::IMAP compatibility is maintained by converting to 'CRAM-MD5'
internally
- Follows the same pattern established by SMTP authentication
configuration

---------

Co-authored-by: João Santos <joao.santos@madigital.eu>
Co-authored-by: Sony Mathew <sony@chatwoot.com>

.github/scripts/ghsa_linear_sync.py

@@ -0,0 +1,195 @@
+#!/usr/bin/env python3
+"""Sync triage GitHub security advisories to Linear issues."""
+
+from __future__ import annotations
+
+import os
+import sys
+from typing import Any
+
+import requests
+
+GITHUB_API = "https://api.github.com"
+LINEAR_API = "https://api.linear.app/graphql"
+
+SEVERITY_PRIORITY = {"critical": 1, "high": 2, "medium": 3, "low": 4}
+SEVERITY_COLOR = {
+    "critical": 15548997,
+    "high": 15105570,
+    "medium": 15844367,
+    "low": 3066993,
+}
+DEFAULT_COLOR = 9807270
+
+
+def required_env(name: str) -> str:
+    value = os.environ.get(name)
+    if not value:
+        sys.exit(f"Missing required env var: {name}")
+    return value
+
+
+def fetch_triage_advisories(repo: str, token: str) -> list[dict[str, Any]]:
+    url: str | None = f"{GITHUB_API}/repos/{repo}/security-advisories"
+    params: dict[str, Any] | None = {"state": "triage", "per_page": 100}
+    headers = {
+        "Accept": "application/vnd.github+json",
+        "Authorization": f"Bearer {token}",
+        "X-GitHub-Api-Version": "2022-11-28",
+    }
+    advisories: list[dict[str, Any]] = []
+    while url:
+        r = requests.get(url, headers=headers, params=params, timeout=30)
+        r.raise_for_status()
+        advisories.extend(r.json())
+        next_link = r.links.get("next")
+        url = next_link["url"] if next_link else None
+        params = None
+    return advisories
+
+
+def linear_call(query: str, variables: dict[str, Any], api_key: str) -> dict[str, Any]:
+    r = requests.post(
+        LINEAR_API,
+        headers={"Authorization": api_key},
+        json={"query": query, "variables": variables},
+        timeout=30,
+    )
+    r.raise_for_status()
+    return r.json()
+
+
+def linear_issue_exists(ghsa_id: str, api_key: str) -> bool:
+    query = (
+        "query($q: String!) { issues(filter: {title: {contains: $q}}, first: 1) "
+        "{ nodes { id } } }"
+    )
+    resp = linear_call(query, {"q": ghsa_id}, api_key)
+    return len(resp.get("data", {}).get("issues", {}).get("nodes", [])) > 0
+
+
+def linear_create_issue(input_data: dict[str, Any], api_key: str) -> dict[str, str] | None:
+    query = (
+        "mutation($input: IssueCreateInput!) { issueCreate(input: $input) "
+        "{ success issue { identifier url } } }"
+    )
+    resp = linear_call(query, {"input": input_data}, api_key)
+    create = resp.get("data", {}).get("issueCreate") or {}
+    if not create.get("success"):
+        return None
+    return create.get("issue")
+
+
+def reporter_login(advisory: dict[str, Any]) -> str:
+    for credit in advisory.get("credits") or []:
+        user = (credit or {}).get("user") or {}
+        if user.get("login"):
+            return user["login"]
+    return "unknown"
+
+
+def cvss_score(advisory: dict[str, Any]) -> str:
+    score = (advisory.get("cvss") or {}).get("score")
+    return str(score) if score is not None else "n/a"
+
+
+def build_description(adv: dict[str, Any]) -> str:
+    return (
+        f"**GHSA:** {adv['ghsa_id']}\n"
+        f"**CVE:** {adv.get('cve_id') or 'n/a'}\n"
+        f"**Severity:** {adv.get('severity') or 'unknown'} (CVSS {cvss_score(adv)})\n"
+        f"**Reporter:** {reporter_login(adv)}\n"
+        f"**Reported:** {(adv.get('created_at') or '').split('T')[0]}\n"
+        f"**Advisory:** {adv['html_url']}\n\n"
+        f"---\n\n"
+        f"{adv.get('description') or 'No description provided.'}"
+    )
+
+
+def post_discord(adv: dict[str, Any], issue: dict[str, str], webhook_url: str) -> None:
+    severity = adv.get("severity") or "unknown"
+    title = f"[{adv['ghsa_id']}] {adv['summary']}"[:250]
+    payload = {
+        "username": "GHSA Sync",
+        "embeds": [
+            {
+                "title": title,
+                "url": issue["url"],
+                "color": SEVERITY_COLOR.get(severity, DEFAULT_COLOR),
+                "fields": [
+                    {"name": "Linear", "value": issue["identifier"], "inline": True},
+                    {
+                        "name": "Severity",
+                        "value": f"{severity} (CVSS {cvss_score(adv)})",
+                        "inline": True,
+                    },
+                    {
+                        "name": "Advisory",
+                        "value": f"[GitHub]({adv['html_url']})",
+                        "inline": True,
+                    },
+                ],
+            }
+        ],
+    }
+    try:
+        requests.post(webhook_url, json=payload, timeout=10)
+    except requests.RequestException:
+        pass
+
+
+def main() -> int:
+    repo = required_env("GITHUB_REPOSITORY")
+    gh_token = required_env("GHSA_READ_TOKEN")
+    linear_api_key = required_env("LINEAR_API_KEY")
+    team_id = required_env("LINEAR_TEAM_ID")
+    project_id = required_env("LINEAR_PROJECT_ID")
+    label_id = required_env("LINEAR_LABEL_ID")
+    discord_webhook = os.environ.get("DISCORD_WEBHOOK_URL") or None
+
+    advisories = fetch_triage_advisories(repo, gh_token)
+    print(f"Fetched {len(advisories)} triage advisories")
+
+    created = skipped = failed = 0
+
+    for adv in advisories:
+        ghsa_id = adv.get("ghsa_id")
+        if not ghsa_id:
+            failed += 1
+            continue
+
+        try:
+            if linear_issue_exists(ghsa_id, linear_api_key):
+                skipped += 1
+                continue
+
+            severity = adv.get("severity") or "unknown"
+            issue = linear_create_issue(
+                {
+                    "title": f"[{ghsa_id}] {adv.get('summary', '')}",
+                    "description": build_description(adv),
+                    "teamId": team_id,
+                    "projectId": project_id,
+                    "labelIds": [label_id],
+                    "priority": SEVERITY_PRIORITY.get(severity, 3),
+                },
+                linear_api_key,
+            )
+        except requests.RequestException:
+            failed += 1
+            continue
+
+        if not issue:
+            failed += 1
+            continue
+
+        created += 1
+        if discord_webhook:
+            post_discord(adv, issue, discord_webhook)
+
+    print(f"Created {created}, skipped {skipped}, failed {failed}")
+    return 1 if failed > 0 else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())

.github/workflows/deploy_check.yml

@@ -11,6 +11,9 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   deployment_check:
     name: Check Deployment

.github/workflows/frontend-fe.yml

@@ -8,6 +8,9 @@ on:
     branches:
       - develop
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/ghsa-linear-sync.yml

@@ -0,0 +1,29 @@
+name: Sync GHSA advisories to Linear
+
+on:
+  schedule:
+    - cron: '0 4 * * *'  # daily at 09:30 IST
+  workflow_dispatch: {}
+
+permissions:
+  contents: read
+
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+      - name: Install dependencies
+        run: pip install requests==2.32.3
+      - name: Sync advisories
+        env:
+          GHSA_READ_TOKEN: ${{ secrets.GHSA_READ_TOKEN }}
+          LINEAR_API_KEY: ${{ secrets.LINEAR_API_KEY }}
+          LINEAR_TEAM_ID: ${{ secrets.LINEAR_TEAM_ID }}
+          LINEAR_PROJECT_ID: ${{ secrets.LINEAR_PROJECT_ID }}
+          LINEAR_LABEL_ID: ${{ secrets.LINEAR_LABEL_ID }}
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+        run: python3 .github/scripts/ghsa_linear_sync.py

.github/workflows/logging_percentage_check.yml

@@ -10,6 +10,9 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   log_lines_check:
     runs-on: ubuntu-latest

.github/workflows/nightly_installer.yml

@@ -14,6 +14,9 @@ on:
     - cron: "0 0 * * *"
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   nightly:
     runs-on: ubuntu-24.04

.github/workflows/publish_codespace_image.yml

@@ -3,6 +3,10 @@ name: Publish Codespace Base Image
 on:
   workflow_dispatch:
 
+permissions:
+  contents: read
+  packages: write
+
 jobs:
   publish-code-space-image:
     runs-on: ubuntu-latest

.github/workflows/publish_ee_docker.yml

@@ -18,6 +18,9 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
+permissions:
+  contents: read
+
 jobs:
   build:
     strategy:

.github/workflows/publish_foss_docker.yml

@@ -18,6 +18,9 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
+permissions:
+  contents: read
+
 jobs:
   build:
     strategy:

.github/workflows/size-limit.yml

@@ -10,6 +10,9 @@ concurrency:
   group: pr-${{ github.workflow }}-${{ github.head_ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-22.04

.github/workflows/test_docker_build.yml

@@ -7,6 +7,9 @@ on:
       - master
   workflow_dispatch:
 
+permissions:
+  contents: read
+
 jobs:
   test-build:
     strategy:

Gemfile

@@ -22,6 +22,7 @@ gem 'time_diff'
 gem 'tzinfo-data'
 gem 'valid_email2'
 gem 'email-provider-info'
+gem 'gemoji'
 # compress javascript config.assets.js_compressor
 gem 'uglifier'
 ##-- used for single column multiple binary flags in notification settings/feature flagging --##

Gemfile.lock

@@ -108,8 +108,8 @@ GEM
     acts-as-taggable-on (12.0.0)
       activerecord (>= 7.1, < 8.1)
       zeitwerk (>= 2.4, < 3.0)
-    addressable (2.8.7)
-      public_suffix (>= 2.0.2, < 7.0)
+    addressable (2.9.0)
+      public_suffix (>= 2.0.2, < 8.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -349,6 +349,7 @@ GEM
       googleapis-common-protos-types (>= 1.3.1, < 2.a)
       googleauth (~> 1.0)
       grpc (~> 1.36)
+    gemoji (4.1.0)
     geocoder (1.8.1)
     gli (2.22.2)
       ostruct
@@ -676,14 +677,14 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (6.0.2)
+    public_suffix (7.0.5)
     puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.5)
+    rack (3.2.6)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -698,7 +699,7 @@ GEM
       rack (>= 3.0.0, < 4)
     rack-proxy (0.7.7)
       rack
-    rack-session (2.1.1)
+    rack-session (2.1.2)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -1075,6 +1076,7 @@ DEPENDENCIES
   fcm
   flag_shih_tzu
   foreman
+  gemoji
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)

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

@@ -1,6 +1,7 @@
 class Api::V1::Accounts::CustomAttributeDefinitionsController < Api::V1::Accounts::BaseController
   before_action :fetch_custom_attributes_definitions, except: [:create]
   before_action :fetch_custom_attribute_definition, only: [:show, :update, :destroy]
+  before_action :check_authorization
   DEFAULT_ATTRIBUTE_MODEL = 'conversation_attribute'.freeze
 
   def index; end

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

@@ -18,7 +18,16 @@ class Api::V1::Accounts::LabelsController < Api::V1::Accounts::BaseController
   end
 
   def destroy
+    label_title = @label.title
+    account_id = Current.account.id
+    label_deleted_at = Time.current
+
     @label.destroy!
+    Labels::RemoveAssociationsJob.perform_later(
+      label_title: label_title,
+      account_id: account_id,
+      label_deleted_at: label_deleted_at
+    )
     head :ok
   end
 

app/controllers/concerns/meta_token_verify_concern.rb

@@ -2,6 +2,10 @@
 # This concern handles the token verification step.
 
 module MetaTokenVerifyConcern
+  CHANNEL_APP_SECRET_KEYS = %w[app_secret app_secret_key client_secret api_secret].freeze
+  META_SIGNATURE_HEADER = 'X-Hub-Signature-256'.freeze
+  META_SIGNATURE_PREFIX = 'sha256='.freeze
+
   def verify
     service = is_a?(Webhooks::WhatsappController) ? 'whatsapp' : 'instagram'
     if valid_token?(params['hub.verify_token'])
@@ -14,6 +18,53 @@ module MetaTokenVerifyConcern
 
   private
 
+  def verify_meta_signature!
+    return unless meta_signature_verification_required?
+    return if valid_meta_signature?
+
+    head :unauthorized
+  end
+
+  def valid_meta_signature?
+    signature = request.headers[META_SIGNATURE_HEADER]
+    return false unless signature&.start_with?(META_SIGNATURE_PREFIX)
+
+    meta_app_secrets.any? do |secret|
+      next false if secret.blank?
+
+      expected_signature = "#{META_SIGNATURE_PREFIX}#{OpenSSL::HMAC.hexdigest('SHA256', secret, meta_request_body)}"
+      ActiveSupport::SecurityUtils.secure_compare(expected_signature, signature)
+    end
+  end
+
+  def meta_request_body
+    @meta_request_body ||= request.raw_post
+  end
+
+  def meta_app_secrets
+    raise 'Overwrite this method in your controller'
+  end
+
+  def meta_signature_verification_required?
+    true
+  end
+
+  def channel_meta_app_secrets(channel)
+    return [] if channel.blank?
+
+    secrets = []
+    secrets << channel.app_secret if channel.respond_to?(:app_secret)
+    secrets.concat(provider_config_meta_app_secrets(channel))
+    secrets.compact_blank.uniq
+  end
+
+  def provider_config_meta_app_secrets(channel)
+    return [] unless channel.respond_to?(:provider_config)
+
+    provider_config = channel.provider_config.to_h.with_indifferent_access
+    CHANNEL_APP_SECRET_KEYS.filter_map { |key| provider_config[key].presence }
+  end
+
   def valid_token?(_token)
     raise 'Overwrite this method your controller'
   end

app/controllers/dashboard_controller.rb

@@ -80,10 +80,17 @@ class DashboardController < ActionController::Base
       IS_ENTERPRISE: ChatwootApp.enterprise?,
       AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
       GIT_SHA: GIT_HASH,
-      ALLOWED_LOGIN_METHODS: allowed_login_methods
+      ALLOWED_LOGIN_METHODS: allowed_login_methods,
+      ACTIVE_PLATFORM_BANNERS: active_platform_banners
     }
   end
 
+  def active_platform_banners
+    return [] unless ChatwootApp.chatwoot_cloud?
+
+    PlatformBanner.active.order(created_at: :desc).as_json(only: %i[id banner_message banner_type updated_at])
+  end
+
   def allowed_login_methods
     methods = ['email']
     methods << 'google_oauth' if GlobalConfigService.load('ENABLE_GOOGLE_OAUTH_LOGIN', 'true').to_s != 'false'

app/controllers/devise_overrides/sessions_controller.rb

@@ -25,6 +25,14 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
   private
 
+  def render_create_error_not_confirmed
+    render_error(
+      :unauthorized,
+      I18n.t('devise_token_auth.sessions.not_confirmed', email: @resource.email),
+      error_code: 'user_not_confirmed'
+    )
+  end
+
   def find_user_for_authentication
     return nil unless params[:email].present? && params[:password].present?
 

app/controllers/super_admin/platform_banners_controller.rb

@@ -0,0 +1,9 @@
+class SuperAdmin::PlatformBannersController < SuperAdmin::ApplicationController
+  before_action :ensure_chatwoot_cloud
+
+  private
+
+  def ensure_chatwoot_cloud
+    raise ActionController::RoutingError, 'Not Found' unless ChatwootApp.chatwoot_cloud?
+  end
+end

app/controllers/webhooks/instagram_controller.rb

@@ -1,6 +1,8 @@
 class Webhooks::InstagramController < ActionController::API
   include MetaTokenVerifyConcern
 
+  before_action :verify_meta_signature!, only: :events
+
   def events
     Rails.logger.info('Instagram webhook received events')
     if params['object'].casecmp('instagram').zero?
@@ -39,4 +41,38 @@ class Webhooks::InstagramController < ActionController::API
     token == GlobalConfigService.load('IG_VERIFY_TOKEN', '') ||
       token == GlobalConfigService.load('INSTAGRAM_VERIFY_TOKEN', '')
   end
+
+  def meta_app_secrets
+    [
+      *instagram_channel_meta_app_secrets,
+      GlobalConfigService.load('INSTAGRAM_APP_SECRET', nil),
+      GlobalConfigService.load('FB_APP_SECRET', nil)
+    ]
+  end
+
+  def instagram_channel_meta_app_secrets
+    instagram_channels_from_payload.flat_map { |channel| channel_meta_app_secrets(channel) }
+  end
+
+  def instagram_channels_from_payload
+    Array(params.to_unsafe_hash[:entry]).flat_map do |entry|
+      instagram_ids_from_entry(entry.with_indifferent_access).flat_map do |instagram_id|
+        [
+          Channel::Instagram.find_by(instagram_id: instagram_id),
+          Channel::FacebookPage.find_by(instagram_id: instagram_id)
+        ]
+      end
+    end.compact.uniq
+  end
+
+  def instagram_ids_from_entry(entry)
+    messages = entry[:messaging].presence || entry[:standby] || []
+    messages.filter_map { |messaging| instagram_id_from_messaging(messaging.with_indifferent_access) }
+  end
+
+  def instagram_id_from_messaging(messaging)
+    return messaging.dig(:sender, :id) if messaging.dig(:message, :is_echo).present?
+
+    messaging.dig(:recipient, :id)
+  end
 end

app/controllers/webhooks/whatsapp_controller.rb

@@ -1,6 +1,8 @@
 class Webhooks::WhatsappController < ActionController::API
   include MetaTokenVerifyConcern
 
+  before_action :verify_meta_signature!, only: :process_payload
+
   def process_payload
     if inactive_whatsapp_number?
       Rails.logger.warn("Rejected webhook for inactive WhatsApp number: #{params[:phone_number]}")
@@ -20,6 +22,45 @@ class Webhooks::WhatsappController < ActionController::API
     token == whatsapp_webhook_verify_token if whatsapp_webhook_verify_token.present?
   end
 
+  def meta_app_secrets
+    [
+      *channel_meta_app_secrets(whatsapp_channel),
+      GlobalConfigService.load('WHATSAPP_APP_SECRET', nil)
+    ]
+  end
+
+  def whatsapp_channel
+    @whatsapp_channel ||= whatsapp_business_payload_channel || Channel::Whatsapp.find_by(phone_number: params[:phone_number])
+  end
+
+  def meta_signature_verification_required?
+    return true if whatsapp_channel.blank?
+    return false unless whatsapp_channel.provider == 'whatsapp_cloud'
+    return true if channel_meta_app_secrets(whatsapp_channel).present?
+
+    whatsapp_channel.provider_config['source'] == 'embedded_signup'
+  end
+
+  def whatsapp_business_payload_channel
+    return unless params[:object] == 'whatsapp_business_account'
+
+    metadata = params.dig(:entry, 0, :changes, 0, :value, :metadata)
+    return if metadata.blank?
+
+    phone_number = normalized_phone_number(metadata[:display_phone_number])
+    phone_number_id = metadata[:phone_number_id]
+    channel = Channel::Whatsapp.find_by(phone_number: phone_number)
+
+    return channel if channel && channel.provider_config['phone_number_id'] == phone_number_id
+  end
+
+  def normalized_phone_number(phone_number)
+    return if phone_number.blank?
+
+    phone_number = phone_number.to_s
+    phone_number.start_with?('+') ? phone_number : "+#{phone_number}"
+  end
+
   def inactive_whatsapp_number?
     phone_number = params[:phone_number]
     return false if phone_number.blank?

app/dashboards/platform_banner_dashboard.rb

@@ -0,0 +1,20 @@
+require 'administrate/base_dashboard'
+
+class PlatformBannerDashboard < Administrate::BaseDashboard
+  ATTRIBUTE_TYPES = {
+    id: Field::Number,
+    banner_message: Field::Text.with_options(truncate: 200),
+    banner_type: Field::Select.with_options(collection: %w[info warning error]),
+    active: Field::Boolean,
+    created_at: Field::DateTime,
+    updated_at: Field::DateTime
+  }.freeze
+
+  COLLECTION_ATTRIBUTES = %i[id banner_message banner_type active created_at].freeze
+  SHOW_PAGE_ATTRIBUTES = %i[id banner_message banner_type active created_at updated_at].freeze
+  FORM_ATTRIBUTES = %i[banner_message banner_type active].freeze
+
+  def display_resource(platform_banner)
+    "Banner ##{platform_banner.id} (#{platform_banner.banner_type})"
+  end
+end

app/drops/user_drop.rb

@@ -7,11 +7,15 @@ class UserDrop < BaseDrop
     @obj.try(:available_name)
   end
 
+  def email
+    @obj.try(:email)
+  end
+
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
   end
 
   def last_name
-    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
+    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
   end
 end

app/finders/message_finder.rb

@@ -48,3 +48,5 @@ class MessageFinder
     messages.reorder('created_at desc').limit(20).reverse
   end
 end
+
+MessageFinder.prepend_mod_with('MessageFinder')

app/helpers/api/v1/inboxes_helper.rb

@@ -17,15 +17,12 @@ module Api::V1::InboxesHelper
   def validate_imap(channel_data)
     return unless channel_data.key?('imap_enabled') && channel_data[:imap_enabled]
 
-    Mail.defaults do
-      retriever_method :imap, { address: channel_data[:imap_address],
-                                port: channel_data[:imap_port],
-                                user_name: channel_data[:imap_login],
-                                password: channel_data[:imap_password],
-                                enable_ssl: channel_data[:imap_enable_ssl] }
-    end
+    # Validate the user-selected auth mechanism before opening the connection.
+    authentication = Imap::Authentication.validate_user_configurable!(channel_data[:imap_authentication])
 
-    check_imap_connection(channel_data)
+    # Use the same auth adapter as the fetch service so LOGIN uses the IMAP LOGIN command,
+    # not SASL AUTH=LOGIN.
+    check_imap_connection(channel_data, authentication)
   end
 
   def validate_smtp(channel_data)
@@ -37,8 +34,8 @@ module Api::V1::InboxesHelper
     check_smtp_connection(channel_data, smtp)
   end
 
-  def check_imap_connection(channel_data)
-    Mail.connection {} # rubocop:disable:block
+  def check_imap_connection(channel_data, authentication)
+    imap = open_imap_connection(channel_data, authentication)
   rescue SocketError => e
     raise StandardError, I18n.t('errors.inboxes.imap.socket_error')
   rescue Net::IMAP::NoResponseError => e
@@ -53,9 +50,20 @@ module Api::V1::InboxesHelper
   rescue StandardError => e
     raise StandardError, e.message
   ensure
+    imap.disconnect if imap.present? && !imap.disconnected?
     Rails.logger.error "[Api::V1::InboxesHelper] check_imap_connection failed with #{e.message}" if e.present?
   end
 
+  def open_imap_connection(channel_data, authentication)
+    imap = build_imap_connection(channel_data)
+    Imap::Authentication.authenticate!(imap, authentication, channel_data[:imap_login], channel_data[:imap_password])
+    imap
+  end
+
+  def build_imap_connection(channel_data)
+    Net::IMAP.new(channel_data[:imap_address], port: channel_data[:imap_port], ssl: channel_data[:imap_enable_ssl])
+  end
+
   def check_smtp_connection(channel_data, smtp)
     smtp.open_timeout = 10
     smtp.start(channel_data[:smtp_domain], channel_data[:smtp_login], channel_data[:smtp_password],

app/javascript/dashboard/App.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import StatusBanner from './components/app/StatusBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -27,6 +28,7 @@ export default {
     LoadingState,
     NetworkNotification,
     UpdateBanner,
+    StatusBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
@@ -137,6 +139,7 @@ export default {
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
+    <StatusBanner />
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -68,7 +68,7 @@ class TwilioVoiceClient extends EventTarget {
     this.inboxId = null;
   }
 
-  async joinClientCall({ to, conversationId }) {
+  async joinClientCall({ to, conversationId, callSid }) {
     if (!this.device || !this.initialized || !to) return null;
     if (this.activeConnection) return this.activeConnection;
 
@@ -76,6 +76,7 @@ class TwilioVoiceClient extends EventTarget {
       To: to,
       is_agent: 'true',
       conversation_id: conversationId,
+      call_sid: callSid,
     };
 
     const connection = await this.device.connect({ params });

app/javascript/dashboard/api/channel/voice/voiceAPIClient.js

@@ -12,10 +12,10 @@ class VoiceAPI extends ApiClient {
     return ContactsAPI.initiateCall(contactId, inboxId).then(r => r.data);
   }
 
-  leaveConference(inboxId, conversationId) {
+  leaveConference({ inboxId, conversationId, callSid }) {
     return axios
       .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
-        params: { conversation_id: conversationId },
+        params: { conversation_id: conversationId, call_sid: callSid },
       })
       .then(r => r.data);
   }

app/javascript/dashboard/api/companies.js

@@ -1,21 +1,12 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
-export const buildCompanyParams = (page, sort) => {
-  let params = `page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
-
-export const buildSearchParams = (query, page, sort) => {
-  let params = `q=${encodeURIComponent(query)}&page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
+const buildParams = params =>
+  new URLSearchParams(
+    Object.entries(params).filter(
+      ([key, value]) => value !== undefined && (value !== '' || key === 'q')
+    )
+  ).toString();
 
 class CompanyAPI extends ApiClient {
   constructor() {
@@ -24,14 +15,41 @@ class CompanyAPI extends ApiClient {
 
   get(params = {}) {
     const { page = 1, sort = 'name' } = params;
-    const requestURL = `${this.url}?${buildCompanyParams(page, sort)}`;
+    const requestURL = `${this.url}?${buildParams({ page, sort })}`;
     return axios.get(requestURL);
   }
 
   search(query = '', page = 1, sort = 'name') {
-    const requestURL = `${this.url}/search?${buildSearchParams(query, page, sort)}`;
+    const requestURL = `${this.url}/search?${buildParams({ q: query, page, sort })}`;
     return axios.get(requestURL);
   }
+
+  listContacts(id, page = 1) {
+    return axios.get(`${this.url}/${id}/contacts?${buildParams({ page })}`);
+  }
+
+  searchContacts(id, query = '', page = 1) {
+    const requestURL = `${this.url}/${id}/contacts/search?${buildParams({ q: query, page })}`;
+    return axios.get(requestURL);
+  }
+
+  createContact(id, payload) {
+    return axios.post(`${this.url}/${id}/contacts`, payload);
+  }
+
+  removeContact(id, contactId) {
+    return axios.delete(`${this.url}/${id}/contacts/${contactId}`);
+  }
+
+  destroyCustomAttributes(id, customAttributes) {
+    return axios.post(`${this.url}/${id}/destroy_custom_attributes`, {
+      custom_attributes: customAttributes,
+    });
+  }
+
+  destroyAvatar(id) {
+    return axios.delete(`${this.url}/${id}/avatar`);
+  }
 }
 
 export default new CompanyAPI();

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

@@ -1,7 +1,4 @@
-import companyAPI, {
-  buildCompanyParams,
-  buildSearchParams,
-} from '../companies';
+import companyAPI from '../companies';
 import ApiClient from '../ApiClient';
 
 describe('#CompanyAPI', () => {
@@ -9,7 +6,6 @@ describe('#CompanyAPI', () => {
     expect(companyAPI).toBeInstanceOf(ApiClient);
     expect(companyAPI).toHaveProperty('get');
     expect(companyAPI).toHaveProperty('show');
-    expect(companyAPI).toHaveProperty('create');
     expect(companyAPI).toHaveProperty('update');
     expect(companyAPI).toHaveProperty('delete');
     expect(companyAPI).toHaveProperty('search');
@@ -32,111 +28,69 @@ describe('#CompanyAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('#get with default params', () => {
+    it('#get includes pagination and sorting params', () => {
       companyAPI.get({});
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies?page=1&sort=name'
       );
     });
 
-    it('#get with page and sort params', () => {
-      companyAPI.get({ page: 2, sort: 'domain' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=2&sort=domain'
-      );
-    });
-
-    it('#get with descending sort', () => {
-      companyAPI.get({ page: 1, sort: '-created_at' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with query', () => {
-      companyAPI.search('acme', 1, 'name');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme&page=1&sort=name'
-      );
-    });
-
-    it('#search with special characters in query', () => {
+    it('#search encodes query params', () => {
       companyAPI.search('acme & co', 2, 'domain');
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme%20%26%20co&page=2&sort=domain'
+        '/api/v1/companies/search?q=acme+%26+co&page=2&sort=domain'
       );
     });
 
-    it('#search with descending sort', () => {
-      companyAPI.search('test', 1, '-created_at');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=test&page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with empty query', () => {
+    it('#search keeps empty query param for backend validation', () => {
       companyAPI.search('', 1, 'name');
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies/search?q=&page=1&sort=name'
       );
     });
-  });
-});
 
-describe('#buildCompanyParams', () => {
-  it('returns correct string with page only', () => {
-    expect(buildCompanyParams(1)).toBe('page=1');
-  });
-
-  it('returns correct string with page and sort', () => {
-    expect(buildCompanyParams(1, 'name')).toBe('page=1&sort=name');
-  });
-
-  it('returns correct string with different page', () => {
-    expect(buildCompanyParams(3, 'domain')).toBe('page=3&sort=domain');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildCompanyParams(1, '-created_at')).toBe(
-      'page=1&sort=-created_at'
-    );
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildCompanyParams(2, '')).toBe('page=2');
-  });
-});
-
-describe('#buildSearchParams', () => {
-  it('returns correct string with all parameters', () => {
-    expect(buildSearchParams('acme', 1, 'name')).toBe(
-      'q=acme&page=1&sort=name'
-    );
-  });
-
-  it('returns correct string with special characters', () => {
-    expect(buildSearchParams('acme & co', 2, 'domain')).toBe(
-      'q=acme%20%26%20co&page=2&sort=domain'
-    );
-  });
-
-  it('returns correct string with empty query', () => {
-    expect(buildSearchParams('', 1, 'name')).toBe('q=&page=1&sort=name');
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildSearchParams('test', 1, '')).toBe('q=test&page=1');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildSearchParams('company', 3, '-created_at')).toBe(
-      'q=company&page=3&sort=-created_at'
-    );
-  });
-
-  it('encodes special characters correctly', () => {
-    expect(buildSearchParams('test@example.com', 1, 'name')).toBe(
-      'q=test%40example.com&page=1&sort=name'
-    );
+    it('#destroyAvatar deletes the company avatar endpoint', () => {
+      companyAPI.destroyAvatar(1);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/avatar'
+      );
+    });
+
+    it('#listContacts fetches company contacts', () => {
+      companyAPI.listContacts(1, 2);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts?page=2'
+      );
+    });
+
+    it('#searchContacts encodes contact search params', () => {
+      companyAPI.searchContacts(1, 'jane & co', 3);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/search?q=jane+%26+co&page=3'
+      );
+    });
+
+    it('#createContact links a contact to the company', () => {
+      companyAPI.createContact(1, { contact_id: 2 });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts',
+        { contact_id: 2 }
+      );
+    });
+
+    it('#removeContact unlinks a contact from the company', () => {
+      companyAPI.removeContact(1, 2);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/2'
+      );
+    });
+
+    it('#destroyCustomAttributes removes company custom attributes', () => {
+      companyAPI.destroyCustomAttributes(1, ['plan']);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/destroy_custom_attributes',
+        { custom_attributes: ['plan'] }
+      );
+    });
   });
 });

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

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { formatDistanceToNow } from 'date-fns';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -12,9 +12,8 @@ const props = defineProps({
   name: { type: String, default: '' },
   domain: { type: String, default: '' },
   contactsCount: { type: Number, default: 0 },
-  description: { type: String, default: '' },
   avatarUrl: { type: String, default: '' },
-  updatedAt: { type: [String, Number], default: null },
+  lastActivityAt: { type: [String, Number], default: null },
 });
 
 const emit = defineEmits(['showCompany']);
@@ -27,15 +26,21 @@ const displayName = computed(() => props.name || t('COMPANIES.UNNAMED'));
 
 const avatarSource = computed(() => props.avatarUrl || null);
 
-const formattedUpdatedAt = computed(() => {
-  if (!props.updatedAt) return '';
-  return formatDistanceToNow(new Date(props.updatedAt), { addSuffix: true });
+const hasContacts = computed(() => Number(props.contactsCount || 0) > 0);
+
+const contactsCountLabel = computed(() =>
+  t('COMPANIES.CONTACTS_COUNT', { n: Number(props.contactsCount || 0) })
+);
+
+const formattedLastActivityAt = computed(() => {
+  if (!props.lastActivityAt) return '';
+  return dynamicTime(props.lastActivityAt);
 });
 </script>
 
 <template>
   <CardLayout layout="row" @click="onClickViewDetails">
-    <div class="flex items-center justify-start flex-1 gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4 cursor-pointer">
       <Avatar
         :username="displayName"
         :src="avatarSource"
@@ -51,42 +56,29 @@ const formattedUpdatedAt = computed(() => {
             {{ displayName }}
           </span>
           <span
-            v-if="domain && description"
+            v-if="hasContacts"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
           >
-            <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
-            <span class="truncate">{{ domain }}</span>
+            <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
+            {{ contactsCountLabel }}
           </span>
         </div>
-        <div class="flex items-center justify-between">
-          <div class="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center min-w-0">
             <span
-              v-if="domain && !description"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
+              v-if="domain"
+              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate cursor-text"
+              @click.stop
             >
               <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
               <span class="truncate">{{ domain }}</span>
             </span>
-            <span v-if="description" class="text-sm text-n-slate-11 truncate">
-              {{ description }}
-            </span>
-            <div
-              v-if="(description || domain) && contactsCount"
-              class="w-px h-3 bg-n-slate-6"
-            />
-            <span
-              v-if="contactsCount"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-            >
-              <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
-              {{ t('COMPANIES.CONTACTS_COUNT', { n: contactsCount }) }}
-            </span>
           </div>
           <span
-            v-if="updatedAt"
+            v-if="lastActivityAt"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 flex-shrink-0"
           >
-            {{ formattedUpdatedAt }}
+            {{ formattedLastActivityAt }}
           </span>
         </div>
       </div>

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

@@ -0,0 +1,115 @@
+<script setup>
+import { ref, useSlots } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['back']);
+
+const slots = useSlots();
+const isSidebarOpen = ref(false);
+
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
+};
+
+const closeMobileSidebar = () => {
+  if (!isSidebarOpen.value) {
+    return;
+  }
+
+  isSidebarOpen.value = false;
+};
+</script>
+
+<template>
+  <section
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
+  >
+    <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]">
+          <div
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+          >
+            <Breadcrumb :items="breadcrumbItems" @click="emit('back')" />
+          </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]">
+          <slot />
+        </div>
+      </main>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+    >
+      <slot name="sidebar" />
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
+      :class="isSidebarOpen ? 'w-full' : 'w-16'"
+    >
+      <div
+        v-on-click-outside="[
+          closeMobileSidebar,
+          { ignore: ['#details-sidebar-content'] },
+        ]"
+        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
+        :class="[
+          isSidebarOpen
+            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
+            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
+        ]"
+      >
+        <Button
+          ghost
+          slate
+          sm
+          class="!rounded-full rtl:rotate-180"
+          :class="{ 'bg-n-alpha-2': isSidebarOpen }"
+          :icon="
+            isSidebarOpen
+              ? 'i-lucide-panel-right-close'
+              : 'i-lucide-panel-right-open'
+          "
+          data-details-sidebar-toggle
+          @click="toggleSidebar"
+        />
+      </div>
+
+      <Transition
+        enter-active-class="transition-transform duration-200 ease-in-out"
+        leave-active-class="transition-transform duration-200 ease-in-out"
+        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
+        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
+      >
+        <div
+          v-if="isSidebarOpen"
+          id="details-sidebar-content"
+          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+        >
+          <slot name="sidebar" />
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>

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

@@ -2,6 +2,7 @@
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CompanySortMenu from './components/CompanySortMenu.vue';
+import CompanyMoreActions from './components/CompanyMoreActions.vue';
 
 defineProps({
   showSearch: { type: Boolean, default: true },
@@ -11,7 +12,7 @@ defineProps({
   activeOrdering: { type: String, default: '' },
 });
 
-const emit = defineEmits(['search', 'update:sort']);
+const emit = defineEmits(['search', 'update:sort', 'create']);
 </script>
 
 <template>
@@ -19,22 +20,15 @@ const emit = defineEmits(['search', 'update:sort']);
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
-      <span class="text-heading-1 truncate text-n-slate-12">
+      <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-row flex-shrink-0 gap-2">
-        <div class="flex items-center">
-          <CompanySortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-        </div>
+      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
         <div v-if="showSearch" class="flex items-center gap-2 w-full">
           <Input
             :model-value="searchValue"
             type="search"
-            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :placeholder="$t('COMPANIES.SEARCH_PLACEHOLDER')"
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
@@ -49,6 +43,14 @@ const emit = defineEmits(['search', 'update:sort']);
             </template>
           </Input>
         </div>
+        <div class="flex items-center flex-shrink-0 gap-2">
+          <CompanySortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <CompanyMoreActions @create="emit('create')" />
+        </div>
       </div>
     </div>
   </header>

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

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const showActionsDropdown = ref(false);
+
+const menuItems = [
+  {
+    label: t('COMPANIES.ACTIONS.CREATE'),
+    action: 'create',
+    value: 'create',
+    icon: 'i-lucide-plus',
+  },
+];
+
+const handleAction = ({ action }) => {
+  if (action === 'create') emit('create');
+  showActionsDropdown.value = false;
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="menuItems"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>

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

@@ -35,6 +35,10 @@ const sortMenus = [
     label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
     value: 'created_at',
   },
+  {
+    label: t('COMPANIES.SORT_BY.OPTIONS.LAST_ACTIVITY_AT'),
+    value: 'last_activity_at',
+  },
   {
     label: t('COMPANIES.SORT_BY.OPTIONS.CONTACTS_COUNT'),
     value: 'contacts_count',
@@ -101,6 +105,7 @@ const handleOrderChange = value => {
           :model-value="activeSort"
           :options="sortMenus"
           :label="activeSortLabel"
+          sub-menu-position="left"
           @update:model-value="handleSortChange"
         />
       </div>
@@ -112,6 +117,7 @@ const handleOrderChange = value => {
           :model-value="activeOrdering"
           :options="orderingMenus"
           :label="activeOrderingLabel"
+          sub-menu-position="left"
           @update:model-value="handleOrderChange"
         />
       </div>

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

@@ -12,7 +12,12 @@ defineProps({
   showPaginationFooter: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'create',
+]);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -31,6 +36,7 @@ const updateCurrentPage = page => {
         :active-ordering="activeOrdering"
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
+        @create="emit('create')"
       />
       <main class="flex-1 px-6 overflow-y-auto">
         <div class="w-full mx-auto max-w-5xl py-4">

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

@@ -0,0 +1,110 @@
+<script setup>
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const dialogRef = ref(null);
+
+const form = reactive({ name: '', domain: '', description: '' });
+
+const isFormInvalid = computed(() => !form.name.trim());
+
+const resetForm = () => {
+  form.name = '';
+  form.domain = '';
+  form.description = '';
+};
+
+const handleConfirm = () => {
+  if (isFormInvalid.value) return;
+
+  emit('create', {
+    name: form.name.trim(),
+    domain: form.domain.trim() || null,
+    description: form.description.trim() || null,
+  });
+};
+
+const closeDialog = () => {
+  dialogRef.value?.close();
+};
+
+const onSuccess = () => {
+  resetForm();
+  closeDialog();
+};
+
+defineExpose({ dialogRef, onSuccess });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    overflow-y-auto
+    @confirm="handleConfirm"
+    @close="resetForm"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-start gap-2">
+        <span class="py-1 text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.CREATE.TITLE') }}
+        </span>
+        <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+          <Input
+            v-model="form.name"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+            autofocus
+          />
+          <Input
+            v-model="form.domain"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+          />
+        </div>
+      </div>
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isLoading"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          type="reset"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="t('COMPANIES.CREATE.ACTIONS.SAVE')"
+          color="blue"
+          type="submit"
+          :disabled="isFormInvalid || isLoading"
+          :is-loading="isLoading"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue

@@ -0,0 +1,354 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from '@chatwoot/utils';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  meta: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isBusy: {
+    type: Boolean,
+    default: false,
+  },
+  searchResults: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'cancelContactSelection',
+  'confirmContactSelection',
+  'removeContact',
+  'search',
+  'selectContact',
+  'update:currentPage',
+]);
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const selectedContactId = ref(null);
+const searchQuery = ref('');
+
+const hasContacts = computed(() => props.contacts.length > 0);
+const currentPage = computed(() => Number(props.meta?.page || 1));
+const totalContacts = computed(() => Number(props.meta?.totalCount || 0));
+const linkedContactIds = computed(
+  () => new Set(props.contacts.map(contact => Number(contact.id)))
+);
+const showPaginationFooter = computed(
+  () => hasContacts.value && totalContacts.value > props.contacts.length
+);
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+
+const contactMeta = contact =>
+  [contact.email, contact.phoneNumber].filter(Boolean).join(' • ');
+
+const contactName = contact =>
+  contact.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const contactOptions = computed(() =>
+  props.searchResults
+    .filter(
+      contact =>
+        !contact.linkedToCurrentCompany &&
+        !linkedContactIds.value.has(Number(contact.id))
+    )
+    .map(contact => ({
+      value: contact.id,
+      label: [contactName(contact), contact.email, contact.phoneNumber]
+        .filter(Boolean)
+        .join(' · '),
+    }))
+);
+
+const emptyState = computed(() => {
+  if (props.isSearching) {
+    return t('COMPANIES.DETAIL.CONTACTS.LOADING');
+  }
+
+  return searchQuery.value.trim()
+    ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.EMPTY')
+    : t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.INITIAL');
+});
+
+const selectedContactName = computed(() =>
+  props.selectedContact ? contactName(props.selectedContact) : ''
+);
+
+const selectedContactMeta = computed(() =>
+  props.selectedContact ? contactMeta(props.selectedContact) : ''
+);
+
+const selectedContactCompanyName = computed(
+  () => props.selectedContact?.company?.name || ''
+);
+
+const summaryRows = computed(() => [
+  {
+    key: 'company',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.COMPANY_LABEL'),
+    avatarName: props.company.name || t('COMPANIES.UNNAMED'),
+    avatarSrc: props.company.avatarUrl,
+    primary: props.company.name || t('COMPANIES.UNNAMED'),
+    secondary: props.company.domain,
+  },
+  {
+    key: 'contact',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONTACT_LABEL'),
+    badge: selectedContactCompanyName.value
+      ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CURRENT_COMPANY', {
+          companyName: selectedContactCompanyName.value,
+        })
+      : '',
+    avatarName: selectedContactName.value,
+    avatarSrc: props.selectedContact?.thumbnail,
+    primary: selectedContactName.value,
+    secondary: selectedContactMeta.value,
+  },
+]);
+
+const debouncedSearch = debounce(query => {
+  emit('search', query);
+}, 300);
+
+const handleSearch = query => {
+  searchQuery.value = query;
+  debouncedSearch(query.trim());
+};
+
+const handleContactSelect = contactId => {
+  const selectedContact = props.searchResults.find(
+    contact => contact.id === Number(contactId)
+  );
+
+  selectedContactId.value = null;
+  if (selectedContact) {
+    emit('selectContact', selectedContact);
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-6 pb-8 pt-1">
+    <div v-if="!selectedContact" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.DESCRIPTION') }}
+        </span>
+      </div>
+      <ComboBox
+        use-api-results
+        :model-value="selectedContactId"
+        :options="contactOptions"
+        :disabled="isBusy"
+        :empty-state="emptyState"
+        :search-placeholder="
+          t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD')"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @search="handleSearch"
+        @update:model-value="handleContactSelect"
+      />
+    </div>
+
+    <div v-else class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_TITLE') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_DESCRIPTION') }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="row in summaryRows"
+          :key="row.key"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center justify-between h-5 gap-2">
+            <label class="text-sm text-n-slate-12">
+              {{ row.label }}
+            </label>
+            <span
+              v-if="row.badge"
+              class="px-2 py-0.5 text-xs rounded-md text-n-amber-11 bg-n-alpha-2"
+            >
+              {{ row.badge }}
+            </span>
+          </div>
+
+          <div
+            class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+          >
+            <Avatar
+              :name="row.avatarName"
+              :src="row.avatarSrc"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="flex flex-col w-full min-w-0 gap-1">
+              <span
+                class="text-sm leading-4 font-medium truncate text-n-slate-12"
+              >
+                {{ row.primary }}
+              </span>
+              <span
+                v-if="row.secondary"
+                class="text-sm leading-4 truncate text-n-slate-11"
+              >
+                {{ row.secondary }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between gap-3 mt-2">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CANCEL')"
+          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+          :disabled="isBusy"
+          @click="emit('cancelContactSelection')"
+        />
+        <Button
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.ADD')"
+          class="w-full"
+          :is-loading="isBusy"
+          :disabled="isBusy"
+          @click="emit('confirmContactSelection')"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-3">
+        <h4 class="text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.SIDEBAR.TABS.CONTACTS') }}
+        </h4>
+        <span v-if="hasContacts" class="text-xs tabular-nums text-n-slate-11">
+          {{ t('COMPANIES.CONTACTS_COUNT', { n: totalContacts }) }}
+        </span>
+      </div>
+
+      <div
+        v-if="isLoading && !hasContacts"
+        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.LOADING') }}
+      </div>
+
+      <div
+        v-else-if="!hasContacts"
+        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
+      </div>
+
+      <div v-else class="flex flex-col divide-y divide-n-weak">
+        <div
+          v-for="contact in contacts"
+          :key="contact.id"
+          class="flex items-center gap-2 py-3 group/contact"
+        >
+          <button
+            type="button"
+            class="flex items-center flex-1 min-w-0 !p-0 gap-3 text-start rounded-lg transition-colors text-n-slate-12 hover:text-n-blue-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-n-brand focus-visible:ring-offset-2 focus-visible:ring-offset-n-background"
+            @click="openContact(contact.id)"
+          >
+            <Avatar
+              :name="contactName(contact)"
+              :src="contact.thumbnail"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="min-w-0 space-y-0.5">
+              <span
+                class="text-sm font-medium leading-5 truncate text-n-slate-12"
+              >
+                {{ contactName(contact) }}
+              </span>
+              <p
+                v-if="contactMeta(contact)"
+                class="text-sm leading-5 truncate text-n-slate-11"
+              >
+                {{ contactMeta(contact) }}
+              </p>
+            </div>
+          </button>
+
+          <Button
+            icon="i-lucide-unlink"
+            color="slate"
+            variant="ghost"
+            size="xs"
+            class="shrink-0 opacity-70 transition-opacity sm:opacity-0 sm:group-hover/contact:opacity-100 sm:focus-visible:opacity-100"
+            :disabled="isBusy"
+            :title="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            :aria-label="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            @click.stop="emit('removeContact', contact.id)"
+          />
+        </div>
+      </div>
+
+      <PaginationFooter
+        v-if="showPaginationFooter"
+        current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
+        :current-page="currentPage"
+        :total-items="totalContacts"
+        :items-per-page="15"
+        class="!px-0 before:hidden"
+        @update:current-page="emit('update:currentPage', $event)"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  companyId: {
+    type: Number,
+    required: true,
+  },
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const companiesStore = useCompaniesStore();
+const { t } = useI18n();
+
+const handleDelete = async () => {
+  try {
+    await companiesStore.deleteCustomAttributes({
+      id: props.companyId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await companiesStore.update({
+      id: props.companyId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(
+  () =>
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+);
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import CompanyCustomAttributeItem from 'dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const searchQuery = ref('');
+const companyAttributes = useMapGetter('attributes/getCompanyAttributes');
+
+const customAttributes = computed(() => props.company?.customAttributes || {});
+const hasCompanyAttributes = computed(
+  () => companyAttributes.value?.length > 0
+);
+
+const processCompanyAttributes = (
+  attributes,
+  attributeValues,
+  filterCondition
+) => {
+  if (!attributes.length) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+
+    if (filterCondition(attributeKey, attributeValues)) {
+      result.push({
+        ...attribute,
+        value: attributeValues[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => key in values
+  )
+);
+
+const unusedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => !(key in values)
+  )
+);
+
+const filteredUnusedAttributes = computed(() =>
+  unusedAttributes.value.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  )
+);
+
+const unusedAttributesCount = computed(() => unusedAttributes.value.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+
+onMounted(() => {
+  store.dispatch('attributes/get');
+});
+</script>
+
+<template>
+  <div v-if="hasCompanyAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <CompanyCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="`${company.id}-${attribute.id}`"
+        is-editing-view
+        :company-id="company.id"
+        :attribute="attribute"
+      />
+    </div>
+
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-px bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">
+        {{
+          t('COMPANIES.DETAIL.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+            count: unusedAttributesCount,
+          })
+        }}
+      </span>
+      <div class="flex-1 h-px bg-n-slate-5" />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span
+          class="absolute i-lucide-search size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="t('COMPANIES.DETAIL.ATTRIBUTES.SEARCH_PLACEHOLDER')"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+
+      <div
+        v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <CompanyCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="`${company.id}-${attribute.id}`"
+          :company-id="company.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue

@@ -0,0 +1,203 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+const props = defineProps({
+  company: { type: Object, default: () => ({}) },
+  isLoading: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+const companiesStore = useCompaniesStore();
+
+const form = reactive({ name: '', domain: '', description: '' });
+const avatarPreviewUrl = ref('');
+const isUploadingAvatar = ref(false);
+
+const uiFlags = computed(() => companiesStore.getUIFlags);
+const isUpdating = computed(() => uiFlags.value.updatingItem);
+const isAvatarBusy = computed(
+  () =>
+    isUploadingAvatar.value || uiFlags.value.deletingAvatar || isUpdating.value
+);
+
+const displayName = computed(
+  () => props.company?.name || t('COMPANIES.UNNAMED')
+);
+const avatarSource = computed(
+  () => avatarPreviewUrl.value || props.company?.avatarUrl || ''
+);
+const isFormInvalid = computed(() => !form.name.trim());
+const hasChanges = computed(
+  () =>
+    form.name.trim() !== (props.company?.name || '').trim() ||
+    form.domain.trim() !== (props.company?.domain || '').trim() ||
+    form.description.trim() !== (props.company?.description || '').trim()
+);
+
+const summary = computed(() => {
+  const { createdAt, lastActivityAt } = props.company || {};
+  return [
+    createdAt &&
+      t('COMPANIES.DETAIL.PROFILE.CREATED_AT', {
+        date: dynamicTime(createdAt),
+      }),
+    lastActivityAt &&
+      t('COMPANIES.DETAIL.PROFILE.LAST_ACTIVE', {
+        date: dynamicTime(lastActivityAt),
+      }),
+  ]
+    .filter(Boolean)
+    .join(' • ');
+});
+
+const syncForm = company => {
+  form.name = company?.name || '';
+  form.domain = company?.domain || '';
+  form.description = company?.description || '';
+};
+
+const isCurrentCompany = companyId => Number(props.company?.id) === companyId;
+
+watch(
+  () => [
+    props.company?.id,
+    props.company?.name,
+    props.company?.domain,
+    props.company?.description,
+    props.company?.avatarUrl,
+  ],
+  () => {
+    avatarPreviewUrl.value = '';
+    syncForm(props.company);
+  },
+  { immediate: true }
+);
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarPreviewUrl.value = url;
+  isUploadingAvatar.value = true;
+  try {
+    await companiesStore.update({ id: props.company.id, avatar: file });
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_SUCCESS'));
+  } catch {
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_ERROR'));
+  } finally {
+    isUploadingAvatar.value = false;
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    await companiesStore.deleteCompanyAvatar(props.company.id);
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_ERROR'));
+  }
+};
+
+const handleUpdateCompany = async () => {
+  const companyId = Number(props.company.id);
+
+  try {
+    const updated = await companiesStore.update({
+      id: companyId,
+      name: form.name.trim(),
+      domain: form.domain.trim() || null,
+      description: form.description.trim() || null,
+    });
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(updated);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_SUCCESS'));
+  } catch {
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(props.company);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_ERROR'));
+  }
+};
+</script>
+
+<template>
+  <div v-if="isLoading && !company?.id" class="text-sm text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.LOADING') }}
+  </div>
+
+  <div v-else-if="company?.id" class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :name="displayName"
+        :src="avatarSource"
+        :size="72"
+        :allow-upload="!isAvatarBusy"
+        rounded-full
+        hide-offline-status
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ displayName }}
+        </h3>
+        <span class="text-sm leading-6 text-n-slate-11">{{ summary }}</span>
+        <p
+          v-if="isUploadingAvatar || uiFlags.deletingAvatar"
+          class="text-sm text-n-slate-11"
+        >
+          {{ t('COMPANIES.DETAIL.AVATAR.UPDATING') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start w-full gap-6">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('COMPANIES.DETAIL.PROFILE.TITLE') }}
+      </span>
+
+      <div class="grid w-full gap-4 sm:grid-cols-2">
+        <Input
+          v-model="form.name"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+        <Input
+          v-model="form.domain"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+      </div>
+
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isUpdating"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+
+      <Button
+        :label="t('COMPANIES.DETAIL.PROFILE.ACTIONS.SAVE')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid || !hasChanges"
+        @click="handleUpdateCompany"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const description = computed(() =>
+  props.company?.name
+    ? t('COMPANIES.DETAIL.DELETE.DESCRIPTION_WITH_NAME', {
+        companyName: props.company.name,
+      })
+    : t('COMPANIES.DETAIL.DELETE.DESCRIPTION')
+);
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('COMPANIES.DETAIL.DELETE.TITLE')"
+    :description="description"
+    :confirm-button-label="t('COMPANIES.DETAIL.DELETE.CONFIRM')"
+    :is-loading="isLoading"
+    @confirm="emit('confirm')"
+  />
+</template>

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

@@ -35,10 +35,16 @@ const emit = defineEmits([
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 
-const voiceCallData = computed(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  direction: props.chat.additional_attributes?.call_direction,
-}));
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
+});
 
 const unreadCount = computed(() => props.chat.unread_count);
 

app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -134,7 +134,7 @@ const handleInputUpdate = async () => {
         :message-type="hasError ? 'error' : 'info'"
         autofocus
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -49,7 +49,11 @@ const rules = computed(() => ({
       props.attribute.regexPattern && {
         regexValidation: value => {
           if (!value) return true;
-          return getRegexp(props.attribute.regexPattern).test(value);
+          try {
+            return getRegexp(props.attribute.regexPattern).test(value);
+          } catch {
+            return false;
+          }
         },
       }),
   },
@@ -187,7 +191,7 @@ const handleInputUpdate = async () => {
         :message="attributeErrorMessage"
         :message-type="hasError ? 'error' : 'info'"
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"

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

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

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

@@ -159,7 +159,7 @@ const handleTabChange = value => {
               v-if="isLocaleMenuOpen"
               :menu-items="localeMenuItems"
               show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-40 max-w-[300px] mt-2 xl:right-0 top-full max-h-60"
               @action="handleLocaleAction"
             />
           </OnClickOutside>
@@ -180,7 +180,7 @@ const handleTabChange = value => {
               v-if="isCategoryMenuOpen"
               :menu-items="categoryMenuItems"
               show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-48 mt-2 xl:right-0 top-full max-h-60"
               @action="handleCategoryAction"
             />
           </OnClickOutside>

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

@@ -296,7 +296,7 @@ watch(
             :selected-count-label="selectedCountLabel"
             class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
           >
-            <template #secondary-actions>
+            <template #secondaryActions>
               <Button
                 sm
                 ghost

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

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

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

@@ -90,7 +90,7 @@ const targetInboxLabel = computed(() => {
       <DropdownMenu
         v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
         :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

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

@@ -1,5 +1,3 @@
-<!-- DEPRECIATED -->
-<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script setup>
 import { computed } from 'vue';
 
@@ -20,11 +18,13 @@ const emit = defineEmits(['action']);
 
 const bannerClass = computed(() => {
   const classMap = {
-    slate: 'bg-n-slate-3 border-n-slate-4 text-n-slate-11',
-    amber: 'bg-n-amber-3 border-n-amber-4 text-n-amber-11',
-    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11',
-    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11',
-    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11',
+    slate:
+      'bg-n-slate-3 border-n-slate-4 text-n-slate-11 [&_.link]:text-n-slate-11',
+    amber:
+      'bg-n-amber-3 border-n-amber-4 text-n-amber-11 [&_.link]:text-n-amber-11',
+    teal: 'bg-n-teal-3 border-n-teal-4 text-n-teal-11 [&_.link]:text-n-teal-11',
+    ruby: 'bg-n-ruby-3 border-n-ruby-4 text-n-ruby-11 [&_.link]:text-n-ruby-11',
+    blue: 'bg-n-blue-3 border-n-blue-4 text-n-blue-11 [&_.link]:text-n-blue-11',
   };
 
   return classMap[props.color];

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -47,9 +47,6 @@ const allSelected = computed(
     selectedVisibleCount.value === visibleItemCount.value
 );
 
-const slots = useSlots();
-const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
-
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
@@ -95,10 +92,12 @@ const bulkCheckboxState = computed({
         <span class="text-sm text-n-slate-10 truncate tabular-nums">
           {{ selectedCountLabel }}
         </span>
+        <div v-if="$slots.primaryActions" class="h-4 w-px bg-n-strong" />
+        <slot v-if="$slots.primaryActions" name="primaryActions" />
       </div>
       <div class="flex items-center gap-3">
-        <slot v-if="hasSecondaryActions" name="secondary-actions" />
-        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <slot v-if="$slots.secondaryActions" name="secondaryActions" />
+        <div v-if="$slots.secondaryActions" class="h-4 w-px bg-n-strong" />
         <div class="flex items-center gap-3">
           <slot name="actions" :selected-count="selectedCount">
             <Button

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

@@ -10,9 +10,6 @@ const props = defineProps({
   menuItems: {
     type: Array,
     default: () => [],
-    validator: value => {
-      return value.every(item => item.action && item.value && item.label);
-    },
   },
   menuSections: {
     type: Array,
@@ -22,6 +19,10 @@ const props = defineProps({
     type: Number,
     default: 20,
   },
+  roundedThumbnail: {
+    type: Boolean,
+    default: true,
+  },
   showSearch: {
     type: Boolean,
     default: false,
@@ -42,9 +43,17 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: 'DROPDOWN_MENU.EMPTY_STATE',
+  },
 });
 
-const emit = defineEmits(['action', 'search']);
+const emit = defineEmits(['action', 'search', 'empty']);
 
 const { t } = useI18n();
 
@@ -96,9 +105,13 @@ const filteredMenuSections = computed(() => {
 });
 
 const handleSearchInput = event => {
-  if (props.disableLocalFiltering) {
-    emit('search', event.target.value);
-  }
+  emit('search', event.target.value);
+
+  const isEmpty = hasSections.value
+    ? filteredMenuSections.value.length === 0
+    : filteredMenuItems.value.length === 0;
+
+  if (isEmpty) emit('empty');
 };
 
 const handleAction = item => {
@@ -123,57 +136,104 @@ onMounted(() => {
 
 <template>
   <div
-    class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 gap-2 flex flex-col min-w-[136px] shadow-lg pb-2 px-2"
-    :class="{
-      'pt-2': !showSearch,
-    }"
+    class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 flex flex-col min-w-[136px] shadow-lg pt-2 overflow-hidden"
   >
-    <div
-      v-if="showSearch"
-      class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2 z-20"
-    >
-      <div class="relative">
-        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
-        <input
-          ref="searchInput"
-          v-model="searchQuery"
-          type="search"
-          :placeholder="
-            searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
-          "
-          class="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-          @input="handleSearchInput"
-        />
-      </div>
+    <div v-if="showSearch" class="relative shrink-0 px-2 mb-2">
+      <span
+        class="absolute i-lucide-search size-3.5 top-2 ltr:left-5 rtl:right-5"
+      />
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
+        "
+        class="reset-base w-full h-8 py-2 ltr:pl-10 ltr:pr-2 rtl:pl-2 rtl:pr-10 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        @input="handleSearchInput"
+      />
     </div>
-    <template v-if="hasSections">
-      <div
-        v-for="(section, sectionIndex) in filteredMenuSections"
-        :key="section.title || sectionIndex"
-        class="flex flex-col gap-1"
-      >
-        <p
-          v-if="section.title"
-          class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky z-10 bg-n-alpha-3 backdrop-blur-sm"
-          :class="showSearch ? 'top-10' : 'top-0'"
-        >
-          {{ section.title }}
-        </p>
+    <div class="flex flex-col gap-2 overflow-y-auto min-h-0 px-2 pb-2">
+      <template v-if="hasSections">
         <div
-          v-if="section.isLoading"
-          class="flex items-center justify-center py-2"
+          v-for="(section, sectionIndex) in filteredMenuSections"
+          :key="section.title || sectionIndex"
+          class="flex flex-col gap-1"
         >
+          <p
+            v-if="section.title"
+            class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky top-0 z-10 bg-n-alpha-3 backdrop-blur-sm"
+          >
+            {{ section.title }}
+          </p>
+          <div
+            v-if="section.isLoading"
+            class="flex items-center justify-center py-2"
+          >
+            <Spinner :size="24" />
+          </div>
+          <div
+            v-else-if="!section.items.length && section.emptyState"
+            class="text-sm text-n-slate-11 px-2 py-1.5"
+          >
+            {{ section.emptyState }}
+          </div>
+          <button
+            v-for="(item, itemIndex) in section.items"
+            :key="item.value || itemIndex"
+            type="button"
+            class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+            :class="{
+              'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
+              'text-n-ruby-11': item.action === 'delete',
+              'text-n-slate-12': item.action !== 'delete',
+            }"
+            :disabled="item.disabled"
+            @click="handleAction(item)"
+          >
+            <slot name="thumbnail" :item="item">
+              <Avatar
+                v-if="item.thumbnail"
+                :name="item.thumbnail.name"
+                :src="item.thumbnail.src"
+                :size="thumbnailSize"
+                :rounded-full="roundedThumbnail"
+              />
+            </slot>
+            <slot name="icon" :item="item">
+              <Icon
+                v-if="item.icon"
+                :icon="item.icon"
+                class="flex-shrink-0 size-3.5"
+              />
+            </slot>
+            <span v-if="item.emoji" class="flex-shrink-0">{{
+              item.emoji
+            }}</span>
+            <slot name="label" :item="item">
+              <span
+                v-if="item.label"
+                class="min-w-0 text-sm font-420 truncate"
+                :class="labelClass"
+              >
+                {{ item.label }}
+              </span>
+            </slot>
+            <slot name="trailing-icon" :item="item" />
+          </button>
+          <div
+            v-if="sectionIndex < filteredMenuSections.length - 1"
+            class="h-px bg-n-alpha-2 mx-2 my-1"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <div v-if="isLoading" class="flex items-center justify-center py-2">
           <Spinner :size="24" />
         </div>
-        <div
-          v-else-if="!section.items.length && section.emptyState"
-          class="text-sm text-n-slate-11 px-2 py-1.5"
-        >
-          {{ section.emptyState }}
-        </div>
         <button
-          v-for="(item, itemIndex) in section.items"
-          :key="item.value || itemIndex"
+          v-for="(item, index) in filteredMenuItems"
+          :key="index"
           type="button"
           class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
           :class="{
@@ -190,77 +250,44 @@ onMounted(() => {
               :name="item.thumbnail.name"
               :src="item.thumbnail.src"
               :size="thumbnailSize"
-              rounded-full
+              :rounded-full="roundedThumbnail"
+            />
+          </slot>
+          <slot name="icon" :item="item">
+            <Icon
+              v-if="item.icon"
+              :icon="item.icon"
+              class="flex-shrink-0 size-3.5"
             />
           </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"
-            :class="labelClass"
-          >
-            {{ item.label }}
-          </span>
+          <slot name="label" :item="item">
+            <span
+              v-if="item.label"
+              class="min-w-0 text-sm font-420 truncate"
+              :class="labelClass"
+            >
+              {{ item.label }}
+            </span>
+          </slot>
+          <slot name="trailing-icon" :item="item" />
         </button>
-        <div
-          v-if="sectionIndex < filteredMenuSections.length - 1"
-          class="h-px bg-n-alpha-2 mx-2 my-1"
-        />
-      </div>
-    </template>
-    <template v-else>
-      <button
-        v-for="(item, index) in filteredMenuItems"
-        :key="index"
-        type="button"
-        class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
-        :class="{
-          'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
-          'text-n-ruby-11': item.action === 'delete',
-          'text-n-slate-12': item.action !== 'delete',
-        }"
-        :disabled="item.disabled"
-        @click="handleAction(item)"
+      </template>
+      <div
+        v-if="shouldShowEmptyState"
+        class="text-sm text-n-slate-11 px-2 py-1.5"
       >
-        <slot name="thumbnail" :item="item">
-          <Avatar
-            v-if="item.thumbnail"
-            :name="item.thumbnail.name"
-            :src="item.thumbnail.src"
-            :size="thumbnailSize"
-            rounded-full
-          />
-        </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"
-          :class="labelClass"
-        >
-          {{ item.label }}
-        </span>
-      </button>
-    </template>
-    <div
-      v-if="shouldShowEmptyState"
-      class="text-sm text-n-slate-11 px-2 py-1.5"
-    >
-      {{
-        isSearching
-          ? t('DROPDOWN_MENU.SEARCHING')
-          : t('DROPDOWN_MENU.EMPTY_STATE')
-      }}
+        {{
+          isSearching
+            ? t('DROPDOWN_MENU.SEARCHING')
+            : searchQuery
+              ? t('DROPDOWN_MENU.EMPTY_STATE')
+              : t(emptyStateMessage)
+        }}
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="shrink-0">
+      <slot name="footer" />
     </div>
-    <slot name="footer" />
   </div>
 </template>

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

@@ -35,7 +35,7 @@ const showDropdown = ref(false);
       v-on-clickaway="() => (showDropdown = false)"
       :menu-items="labelMenuItems"
       show-search
-      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+      class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-52"
       @action="emit('updateLabel', $event)"
     >
       <template #thumbnail="{ item }">

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

@@ -113,6 +113,7 @@ const props = defineProps({
     validator: value => Object.values(MESSAGE_STATUS).includes(value),
   },
   attachments: { type: Array, default: () => [] },
+  call: { type: Object, default: null }, // eslint-disable-line vue/no-unused-properties
   content: { type: String, default: null },
   contentAttributes: { type: Object, default: () => ({}) },
   contentType: {

app/javascript/dashboard/components-next/message/bubbles/Template/CallToAction.vue

@@ -1,25 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div class="text-n-slate-12 max-w-80 flex flex-col gap-2.5">
-    <div class="p-3 bg-n-alpha-2 rounded-xl">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="flex gap-2">
-      <Button label="Call us" slate class="!text-n-blue-11 w-full" />
-      <Button label="Visit our website" slate class="!text-n-blue-11 w-full" />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/message/bubbles/Template/ListPicker.vue

@@ -1,25 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button label="See options" link class="hover:!no-underline" />
-    </div>
-  </div>
-</template>

app/javascript/dashboard/components-next/message/bubbles/Template/Media.vue

@@ -1,20 +0,0 @@
-<script setup>
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 text-n-slate-12 rounded-xl flex flex-col gap-2.5 p-3 max-w-80"
-  >
-    <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
-    <span
-      v-dompurify-html="message.content"
-      class="prose prose-bubble font-medium text-sm"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/message/bubbles/Template/QuickReply.vue

@@ -1,68 +0,0 @@
-<script setup>
-import Button from 'dashboard/components-next/button/Button.vue';
-defineProps({
-  message: {
-    type: Object,
-    required: true,
-  },
-});
-</script>
-
-<template>
-  <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
-  >
-    <div class="p-3">
-      <span
-        v-dompurify-html="message.content"
-        class="prose prose-bubble font-medium text-sm"
-      />
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button label="No, that will be all" link class="hover:!no-underline">
-        <template #icon>
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            class="stroke-n-blue-text"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
-              stroke-width="1.333"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </template>
-      </Button>
-    </div>
-    <div class="p-3 flex items-center justify-center">
-      <Button
-        label="I want to talk to an agents"
-        link
-        class="hover:!no-underline"
-      >
-        <template #icon>
-          <svg
-            width="15"
-            height="15"
-            viewBox="0 0 15 15"
-            fill="none"
-            class="stroke-n-blue-text"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M.667 6.654 5.315.667v3.326c7.968 0 8.878 6.46 8.656 10.007l-.005-.027c-.334-1.79-.474-4.658-8.65-4.658v3.327z"
-              stroke-width="1.333"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </template>
-      </Button>
-    </div>
-  </div>
-</template>

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

@@ -1,21 +1,21 @@
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
 import { useMessageContext } from '../provider.js';
-import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
+import { VOICE_CALL_STATUS } from '../constants';
+import { useCallSession } from 'dashboard/composables/useCallSession';
+import { formatDuration } from 'shared/helpers/timeHelper';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import BaseBubble from 'next/message/bubbles/Base.vue';
+import AudioChip from 'next/message/chips/Audio.vue';
 
 const LABEL_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
   [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
 };
 
-const SUBTEXT_MAP = {
-  [VOICE_CALL_STATUS.RINGING]: 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET',
-  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
-};
-
 const ICON_MAP = {
   [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
   [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
@@ -30,15 +30,41 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { contentAttributes, messageType } = useMessageContext();
+const { t } = useI18n();
+const store = useStore();
+const { call, conversationId, currentUserId, inboxId } = useMessageContext();
+const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
+  useCallSession();
 
-const data = computed(() => contentAttributes.value?.data);
-const status = computed(() => data.value?.status?.toString());
-
-const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.OUTGOING);
+const status = computed(() => call.value?.status);
+const isOutbound = computed(() => call.value?.direction === 'outgoing');
 const isFailed = computed(() =>
   [VOICE_CALL_STATUS.NO_ANSWER, VOICE_CALL_STATUS.FAILED].includes(status.value)
 );
+const acceptedByAgentId = computed(() => call.value?.acceptedByAgentId);
+const didCurrentUserAnswer = computed(
+  () =>
+    !!acceptedByAgentId.value && acceptedByAgentId.value === currentUserId.value
+);
+// Pickup auto-assigns the conversation, so the assignee is a safe display proxy
+// for the answerer when the Call payload lacks accepted_by_agent_id (e.g.,
+// Twilio's call-status webhook flipped the call to in-progress before the
+// participant-join webhook claimed it).
+const conversationAssignee = computed(() => {
+  const conversation = store.getters.getConversationById?.(
+    conversationId?.value
+  );
+  return conversation?.meta?.assignee || null;
+});
+const displayAgentName = computed(() => {
+  if (call.value?.acceptedByAgentName) return call.value.acceptedByAgentName;
+  if (acceptedByAgentId.value) {
+    const agent = store.getters['agents/getAgentById'](acceptedByAgentId.value);
+    if (agent?.available_name) return agent.available_name;
+    if (agent?.name) return agent.name;
+  }
+  return conversationAssignee.value?.name || null;
+});
 
 const labelKey = computed(() => {
   if (LABEL_MAP[status.value]) return LABEL_MAP[status.value];
@@ -52,16 +78,32 @@ const labelKey = computed(() => {
     : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-const subtextKey = computed(() => {
-  if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
+const formattedDuration = computed(() =>
+  formatDuration(call.value?.durationSeconds)
+);
+
+const subtext = computed(() => {
+  if (status.value === VOICE_CALL_STATUS.RINGING) {
+    return t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+  }
+  if (status.value === VOICE_CALL_STATUS.COMPLETED) {
+    return formattedDuration.value;
+  }
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    return isOutbound.value
-      ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
-      : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
+    if (isOutbound.value) return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
+    if (didCurrentUserAnswer.value) {
+      return t('CONVERSATION.VOICE_CALL.YOU_ANSWERED');
+    }
+    if (displayAgentName.value) {
+      return t('CONVERSATION.VOICE_CALL.AGENT_ANSWERED', {
+        agentName: displayAgentName.value,
+      });
+    }
+    return t('CONVERSATION.VOICE_CALL.THEY_ANSWERED');
   }
   return isFailed.value
-    ? 'CONVERSATION.VOICE_CALL.NO_ANSWER'
-    : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
+    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
+    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
 });
 
 const iconName = computed(() => {
@@ -70,11 +112,61 @@ const iconName = computed(() => {
 });
 
 const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
+
+const callSid = computed(() => call.value?.providerCallId);
+
+// Show "Join call" when the call is still ringing, no agent has claimed it,
+// and the conversation is unassigned or assigned to the current user. Mirrors
+// the eligibility used by FloatingCallWidget so the bubble can act as a
+// recovery affordance after a refresh or missed widget.
+const canJoinCall = computed(() => {
+  if (status.value !== VOICE_CALL_STATUS.RINGING) return false;
+  if (isOutbound.value) return false;
+  if (acceptedByAgentId.value) return false;
+  if (!callSid.value || !inboxId.value || !conversationId.value) return false;
+  // Suppress the button once this call is the local active session — the
+  // message status webhook may lag behind, so we can't rely on `status` alone
+  // to hide it after a successful join from this client.
+  if (hasActiveCall.value && activeCall.value?.callSid === callSid.value)
+    return false;
+  const assignee = conversationAssignee.value;
+  if (assignee?.id && assignee.id !== currentUserId.value) return false;
+  return true;
+});
+
+const recordingAttachment = computed(() => {
+  const url = call.value?.recordingUrl;
+  if (!url) return null;
+  return {
+    dataUrl: url,
+    fileType: 'audio',
+    extension: 'wav',
+    transcribedText: call.value?.transcript || '',
+  };
+});
+
+const handleJoinCall = async () => {
+  if (!canJoinCall.value || isJoining.value) return;
+
+  if (hasActiveCall.value && activeCall.value?.callSid !== callSid.value) {
+    await endCall({
+      conversationId: activeCall.value.conversationId,
+      inboxId: activeCall.value.inboxId,
+      callSid: activeCall.value.callSid,
+    });
+  }
+
+  await joinCall({
+    conversationId: conversationId.value,
+    inboxId: inboxId.value,
+    callSid: callSid.value,
+  });
+};
 </script>
 
 <template>
   <BaseBubble class="p-0 border-none" hide-meta>
-    <div class="flex overflow-hidden flex-col w-full max-w-xs">
+    <div class="flex overflow-hidden flex-col w-full max-w-sm">
       <div class="flex gap-3 items-center p-3 w-full">
         <div
           class="flex justify-center items-center rounded-full size-10 shrink-0"
@@ -94,11 +186,24 @@ const bgColor = computed(() => BG_COLOR_MAP[status.value] || 'bg-n-teal-9');
           <span class="text-sm font-medium truncate text-n-slate-12">
             {{ $t(labelKey) }}
           </span>
-          <span class="text-xs text-n-slate-11">
-            {{ $t(subtextKey) }}
+          <span v-if="subtext" class="text-xs text-n-slate-11">
+            {{ subtext }}
           </span>
+          <button
+            v-if="canJoinCall"
+            type="button"
+            class="p-0 mt-1 text-xs font-medium text-start text-n-teal-10 hover:text-n-teal-11 disabled:opacity-50"
+            :disabled="isJoining"
+            @click="handleJoinCall"
+          >
+            {{ $t('CONVERSATION.VOICE_CALL.JOIN_CALL') }}
+          </button>
         </div>
       </div>
+
+      <div v-if="recordingAttachment" class="px-3 pb-3">
+        <AudioChip :attachment="recordingAttachment" />
+      </div>
     </div>
   </BaseBubble>
 </template>

app/javascript/dashboard/components-next/message/stories/Template/CallToAction.story.vue

@@ -1,21 +0,0 @@
-<script setup>
-import CallToAction from '../../bubbles/Template/CallToAction.vue';
-
-const message = {
-  content:
-    'We have super cool products going live! Pre-order and customize products. Contact us for more details',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/CallToAction"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Call To Action">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <CallToAction :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/message/stories/Template/Card.story.vue

@@ -1,23 +0,0 @@
-<script setup>
-import Card from '../../bubbles/Template/Card.vue';
-
-const message = {
-  title: 'Two in one cake (1 pound)',
-  content: 'Customize your order for special occasions',
-  image_url:
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Card"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Card">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Card :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/message/stories/Template/ListPicker.story.vue

@@ -1,21 +0,0 @@
-<script setup>
-import ListPicker from '../../bubbles/Template/ListPicker.vue';
-
-const message = {
-  content: `Hey there! Thanks for reaching out to us. Could you let us know
-what you need to help us better assist you? `,
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/ListPicker"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="ListPicker">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <ListPicker :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/message/stories/Template/Media.story.vue

@@ -1,23 +0,0 @@
-<script setup>
-import Media from '../../bubbles/Template/Media.vue';
-
-const message = {
-  content:
-    'Welcome to our Diwali sale! Get flat 50% off on select items. Hurry now!',
-  image_url:
-    'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=500&h=300&fit=crop',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Media"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Image Media">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Media :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/message/stories/Template/QuickReply.story.vue

@@ -1,21 +0,0 @@
-<script setup>
-import QuickReply from '../../bubbles/Template/QuickReply.vue';
-
-const message = {
-  content: `Hey there! Thanks for reaching out to us. Could you let us know
-what you need to help us better assist you?`,
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/QuickReply"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Quick Replies">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <QuickReply :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

app/javascript/dashboard/components-next/message/stories/Template/Text.story.vue

@@ -1,20 +0,0 @@
-<script setup>
-import Text from '../../bubbles/Template/Text.vue';
-
-const message = {
-  content: 'Hello John, how may we assist you?',
-};
-</script>
-
-<template>
-  <Story
-    title="Components/Message Bubbles/Template/Text"
-    :layout="{ type: 'grid', width: '600px' }"
-  >
-    <Variant title="Default Text">
-      <div class="p-4 bg-n-background rounded-lg w-full min-w-4xl">
-        <Text :message="message" />
-      </div>
-    </Variant>
-  </Story>
-</template>

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

@@ -209,7 +209,7 @@ watch(
         v-if="showDropdown"
         :menu-items="filteredCountries"
         show-search
-        class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+        class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-52"
         @action="onSelectCountry"
       />
     </div>

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

@@ -457,7 +457,7 @@ const menuItems = computed(() => {
             {},
             { page: 1, search: undefined }
           ),
-          activeOn: ['companies_dashboard_index'],
+          activeOn: ['companies_dashboard_index', 'companies_dashboard_show'],
         },
       ],
     },

app/javascript/dashboard/components-next/taginput/TagInput.vue

@@ -247,7 +247,7 @@ const handleBlur = e => emit('blur', e);
         v-if="showDropdownMenu"
         :menu-items="filteredMenuItems"
         :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
         @action="handleDropdownAction"
       />
     </div>

app/javascript/dashboard/components-next/template-preview/CallToActionTemplate.vue

@@ -0,0 +1,33 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2.5 text-n-slate-12 max-w-80">
+    <div class="p-3 rounded-xl bg-n-alpha-2">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div
+      v-if="message.buttons && message.buttons.length > 0"
+      class="flex flex-col gap-2"
+    >
+      <Button
+        v-for="(button, index) in message.buttons"
+        :key="index"
+        :label="button.text || button.title || 'Button'"
+        slate
+        class="!text-n-blue-11 w-full"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/template-preview/CardTemplate.vue

@@ -10,22 +10,22 @@ defineProps({
 
 <template>
   <div
-    class="bg-n-alpha-2 divide-y divide-n-strong text-n-slate-12 rounded-xl max-w-80"
+    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
   >
     <div class="px-3 py-2.5">
-      <img :src="message.image_url" class="max-h-44 rounded-lg w-full" />
-      <div class="pt-2.5 flex flex-col gap-2">
+      <img :src="message.image_url" class="w-full max-h-44 rounded-lg" />
+      <div class="flex flex-col gap-2 pt-2.5">
         <h6 class="font-semibold">{{ message.title }}</h6>
         <span
           v-dompurify-html="message.content"
-          class="prose prose-bubble text-sm"
+          class="text-sm prose prose-bubble"
         />
       </div>
     </div>
-    <div class="p-3 flex items-center justify-center">
+    <div class="flex justify-center items-center p-3">
       <Button label="Call us to order" link class="hover:!no-underline" />
     </div>
-    <div class="p-3 flex items-center justify-center">
+    <div class="flex justify-center items-center p-3">
       <Button label="Visit our store" link class="hover:!no-underline" />
     </div>
   </div>

app/javascript/dashboard/components-next/template-preview/MediaTemplate.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import FileIcon from 'dashboard/components-next/icon/FileIcon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+
+const PDF_EXTENSIONS = ['.pdf', 'pdf'];
+const VIDEO_EXTENSIONS = ['.mp4', '.mov', 'video'];
+const DOC_EXTENSIONS = ['.doc'];
+
+const mediaType = computed(() => {
+  if (props.message.mediaType) return props.message.mediaType;
+
+  const format = props.message.header?.format;
+  if (format) return format.toLowerCase();
+
+  const url = props.message.image_url || '';
+  if (PDF_EXTENSIONS.some(ext => url.includes(ext))) return 'document';
+  if (VIDEO_EXTENSIONS.some(ext => url.includes(ext))) return 'video';
+  return 'image';
+});
+
+const fileType = computed(() => {
+  const url = props.message.image_url || '';
+  return DOC_EXTENSIONS.some(ext => url.includes(ext)) ? 'doc' : 'pdf';
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2.5 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
+  >
+    <img
+      v-if="mediaType === 'image'"
+      :src="message.image_url"
+      class="object-cover w-full max-h-44 rounded-lg"
+      alt="Template media"
+    />
+
+    <div
+      v-else-if="mediaType === 'video'"
+      class="overflow-hidden relative rounded-lg"
+    >
+      <video
+        :src="message.image_url"
+        class="object-cover w-full max-h-44"
+        controls
+        preload="metadata"
+      />
+    </div>
+
+    <div v-else-if="mediaType === 'document'" class="flex items-center">
+      <FileIcon :file-type="fileType" class="text-2xl text-n-slate-12" />
+    </div>
+
+    <span
+      v-if="message.content"
+      v-dompurify-html="message.content"
+      class="text-sm font-medium prose prose-bubble"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/template-preview/QuickReplyTemplate.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+
+const actions = computed(() => props.message.actions || []);
+</script>
+
+<template>
+  <div
+    class="rounded-xl divide-y bg-n-alpha-2 divide-n-strong text-n-slate-12 max-w-80"
+  >
+    <div class="p-3">
+      <span
+        v-dompurify-html="message.content"
+        class="text-sm font-medium prose prose-bubble"
+      />
+    </div>
+    <div
+      v-for="(action, index) in actions"
+      :key="index"
+      class="flex justify-center items-center p-3"
+    >
+      <Button
+        :label="action.title || action.text || 'Button'"
+        link
+        class="hover:!no-underline"
+      >
+        <template #icon>
+          <Icon icon="i-woot-quick-reply" class="size-[15px]" />
+        </template>
+      </Button>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.story.vue

@@ -0,0 +1,105 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+import {
+  whatsAppTemplates,
+  getWhatsAppVariables,
+} from './templates/whatsapp-templates.js';
+import { twilioTemplates } from './templates/twilio-templates.js';
+
+const findWhatsApp = name => whatsAppTemplates.find(t => t.name === name);
+const findTwilio = name => twilioTemplates.find(t => t.friendly_name === name);
+
+const greet = findWhatsApp('greet');
+const eventInvitation = findWhatsApp('event_invitation_static');
+const orderConfirmation = findWhatsApp('order_confirmation');
+const discountCoupon = findWhatsApp('discount_coupon');
+const trainingVideo = findWhatsApp('training_video');
+
+const twilioGreet = findTwilio('greet');
+const shoeLaunch = findTwilio('shoe_launch');
+const welcomeMessage = findTwilio('welcome_message_new');
+const courseFeeReminder = findTwilio('course_fee_reminder');
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreview"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <Variant title="WhatsApp - Simple Text">
+      <TemplatePreview
+        :template="greet"
+        :variables="getWhatsAppVariables(greet)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Simple Text (No Variables)">
+      <TemplatePreview :template="greet" :variables="{}" platform="whatsapp" />
+    </Variant>
+
+    <Variant title="WhatsApp - Call to Action Buttons">
+      <TemplatePreview
+        :template="eventInvitation"
+        :variables="getWhatsAppVariables(eventInvitation)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Image Media">
+      <TemplatePreview
+        :template="orderConfirmation"
+        :variables="getWhatsAppVariables(orderConfirmation)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Video Media">
+      <TemplatePreview
+        :template="trainingVideo"
+        :variables="getWhatsAppVariables(trainingVideo)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WhatsApp - Copy Code">
+      <TemplatePreview
+        :template="discountCoupon"
+        :variables="getWhatsAppVariables(discountCoupon)"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Text">
+      <TemplatePreview
+        :template="twilioGreet"
+        :variables="twilioGreet.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Media">
+      <TemplatePreview
+        :template="shoeLaunch"
+        :variables="shoeLaunch.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Quick Reply">
+      <TemplatePreview
+        :template="welcomeMessage"
+        :variables="welcomeMessage.variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio - Call to Action">
+      <TemplatePreview
+        :template="courseFeeReminder"
+        :variables="courseFeeReminder.variables"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreview.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { computed } from 'vue';
+import { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';
+import {
+  PLATFORMS,
+  TEMPLATE_TYPES,
+  WA_HEADER_FORMATS,
+  WA_MEDIA_FORMATS,
+} from 'dashboard/services/TemplateConstants';
+
+import CardTemplate from './CardTemplate.vue';
+import CallToActionTemplate from './CallToActionTemplate.vue';
+import MediaTemplate from './MediaTemplate.vue';
+import WhatsAppTextTemplate from './WhatsAppTextTemplate.vue';
+import QuickReplyTemplate from './QuickReplyTemplate.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+  variables: {
+    type: Object,
+    default: () => ({}),
+  },
+  platform: {
+    type: String,
+    required: true,
+    validator: value => Object.values(PLATFORMS).includes(value),
+  },
+});
+
+const COMPONENT_MAP = {
+  [TEMPLATE_TYPES.WHATSAPP_TEXT]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_TEXT_HEADER]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_IMAGE]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_VIDEO]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_MEDIA_DOCUMENT]: MediaTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_INTERACTIVE]: CallToActionTemplate,
+  [TEMPLATE_TYPES.WHATSAPP_COPY_CODE]: CallToActionTemplate,
+  [TEMPLATE_TYPES.TWILIO_TEXT]: WhatsAppTextTemplate,
+  [TEMPLATE_TYPES.TWILIO_MEDIA]: MediaTemplate,
+  [TEMPLATE_TYPES.TWILIO_QUICK_REPLY]: QuickReplyTemplate,
+  [TEMPLATE_TYPES.TWILIO_CALL_TO_ACTION]: CallToActionTemplate,
+  [TEMPLATE_TYPES.TWILIO_CARD]: CardTemplate,
+};
+
+const substituteVariables = (text, variables) => {
+  if (!text) return '';
+  return text.replace(/\{\{([^}]+)\}\}/g, (match, variable) => {
+    const value = variables[variable];
+    return value !== undefined && value !== '' ? value : `[${variable}]`;
+  });
+};
+
+const processedTemplate = computed(() => {
+  const normalized = TemplateNormalizer.normalize(
+    props.template,
+    props.platform
+  );
+
+  let content = '';
+  let imageUrl = '';
+  let title = '';
+  let footer = '';
+
+  if (props.platform === PLATFORMS.WHATSAPP) {
+    content = normalized.body?.text || '';
+
+    if (normalized.header) {
+      if (WA_MEDIA_FORMATS.includes(normalized.header.format)) {
+        imageUrl = normalized.header.example?.header_handle?.[0] || '';
+      }
+      if (normalized.header.format === WA_HEADER_FORMATS.TEXT) {
+        title = normalized.header.text || '';
+      }
+    }
+
+    footer = normalized.footer?.text || '';
+  } else {
+    content = normalized.body || '';
+
+    if (normalized.media && normalized.media.length > 0) {
+      imageUrl = normalized.media[0];
+    }
+  }
+
+  const buttons = normalized.buttons?.length
+    ? normalized.buttons
+    : normalized.actions || [];
+
+  return {
+    ...normalized,
+    content: substituteVariables(content, props.variables),
+    title: substituteVariables(title, props.variables),
+    footer: substituteVariables(footer, props.variables),
+    image_url: substituteVariables(imageUrl, props.variables),
+    buttons,
+    actions: normalized.actions || [],
+  };
+});
+
+const previewComponent = computed(
+  () => COMPONENT_MAP[processedTemplate.value.type] || WhatsAppTextTemplate
+);
+</script>
+
+<template>
+  <div class="template-preview">
+    <component :is="previewComponent" :message="processedTemplate" />
+  </div>
+</template>

app/javascript/dashboard/components-next/template-preview/TemplatePreviewExamples.story.vue

@@ -0,0 +1,199 @@
+<script setup>
+import TemplatePreview from './TemplatePreview.vue';
+import {
+  whatsAppTemplates,
+  getWhatsAppVariables,
+} from './templates/whatsapp-templates.js';
+import { twilioTemplates } from './templates/twilio-templates.js';
+</script>
+
+<template>
+  <Story
+    title="Components/TemplatePreviewExamples"
+    :layout="{ type: 'grid', width: 400 }"
+  >
+    <Variant title="WA: Event Invitation (Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[0]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[0])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Purchase Receipt (Document)">
+      <TemplatePreview
+        :template="whatsAppTemplates[1]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[1])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Discount Coupon (Copy Code)">
+      <TemplatePreview
+        :template="whatsAppTemplates[2]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[2])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Support Callback (Phone)">
+      <TemplatePreview
+        :template="whatsAppTemplates[3]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[3])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Training Video (Video)">
+      <TemplatePreview
+        :template="whatsAppTemplates[4]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[4])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Order Confirmation (Image)">
+      <TemplatePreview
+        :template="whatsAppTemplates[5]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[5])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Product Launch (Image + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[6]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[6])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Technician Visit (Header + Buttons)">
+      <TemplatePreview
+        :template="whatsAppTemplates[7]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[7])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Greet (Simple Text)">
+      <TemplatePreview
+        :template="whatsAppTemplates[8]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[8])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Hello World (Header + Footer)">
+      <TemplatePreview
+        :template="whatsAppTemplates[9]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[9])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Feedback Request (Button)">
+      <TemplatePreview
+        :template="whatsAppTemplates[10]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[10])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Address Update (Header)">
+      <TemplatePreview
+        :template="whatsAppTemplates[11]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[11])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="WA: Delivery Confirmation">
+      <TemplatePreview
+        :template="whatsAppTemplates[12]"
+        :variables="getWhatsAppVariables(whatsAppTemplates[12])"
+        platform="whatsapp"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Shoe Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[0]"
+        :variables="twilioTemplates[0].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch Custom Price (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[1]"
+        :variables="twilioTemplates[1].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Product Launch (Media)">
+      <TemplatePreview
+        :template="twilioTemplates[2]"
+        :variables="twilioTemplates[2].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Greet (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[3]"
+        :variables="twilioTemplates[3].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Order Status (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[4]"
+        :variables="twilioTemplates[4].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Hello World (Text)">
+      <TemplatePreview
+        :template="twilioTemplates[5]"
+        :variables="twilioTemplates[5].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message New (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[6]"
+        :variables="twilioTemplates[6].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: SaaS WhatsApp Question (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[7]"
+        :variables="twilioTemplates[7].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Welcome Message (Quick Reply)">
+      <TemplatePreview
+        :template="twilioTemplates[8]"
+        :variables="twilioTemplates[8].variables"
+        platform="twilio"
+      />
+    </Variant>
+
+    <Variant title="Twilio: Course Fee Reminder (Call to Action)">
+      <TemplatePreview
+        :template="twilioTemplates[9]"
+        :variables="twilioTemplates[9].variables"
+        platform="twilio"
+      />
+    </Variant>
+  </Story>
+</template>

app/javascript/dashboard/components-next/template-preview/TextTemplate.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
+  <div class="p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80">
     <span v-dompurify-html="message.content" class="prose prose-bubble" />
   </div>
 </template>

app/javascript/dashboard/components-next/template-preview/WhatsAppTextTemplate.vue

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <div
+    class="flex flex-col gap-2 p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80"
+  >
+    <div v-if="message.title" class="text-base font-bold">
+      {{ message.title }}
+    </div>
+
+    <div v-if="message.content" class="text-sm font-medium prose prose-bubble">
+      <span v-dompurify-html="message.content" />
+    </div>
+
+    <div v-if="message.footer" class="text-xs opacity-70 text-n-slate-11">
+      {{ message.footer }}
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/template-preview/index.js

@@ -0,0 +1,6 @@
+// Main Template Preview Component
+export { default as TemplatePreview } from './TemplatePreview.vue';
+
+// Core Services
+export { TemplateTypeDetector } from 'dashboard/services/TemplateTypeDetector';
+export { TemplateNormalizer } from 'dashboard/services/TemplateNormalizer';

app/javascript/dashboard/components-next/template-preview/templates/twilio-templates.js

@@ -0,0 +1,209 @@
+export const twilioTemplates = [
+  {
+    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '100$',
+    },
+    content_sid: 'HX4b1ff075f097ccdf7f274b6af4d7be02',
+    friendly_name: 'shoe_launch',
+    template_type: 'media',
+  },
+  {
+    body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the {{1}}! Available now for just {{2}}. Be among the first to own this style. Limited stock available!',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'Jordan',
+      2: '400$',
+    },
+    content_sid: 'HXd5c1f8f8d68976f841c440d5e4b46c2e',
+    friendly_name: 'product_launch_custom_price',
+    template_type: 'media',
+  },
+  {
+    body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+    types: {
+      'twilio/media': {
+        body: 'Introducing our latest release  the Nike Air Force! Available now for just $129.99',
+        media: ['https://vite-five-phi.vercel.app/jordan-shoes.jpg'],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HX25f6e823f2416ca4b34254d98e916fae',
+    friendly_name: 'product_launch',
+    template_type: 'media',
+  },
+  {
+    body: 'Hey {{1}}, how may I help you?',
+    types: {
+      'twilio/text': {
+        body: 'Hey {{1}}, how may I help you?',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+    },
+    content_sid: 'HXee240fd3a8b5045dba057feda5173e55',
+    friendly_name: 'greet',
+    template_type: 'text',
+  },
+  {
+    body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+    types: {
+      'twilio/text': {
+        body: "Hi {{1}} Thanks for placing an order with us. We'll let you know once your order has been processed and delivered. Your order number is {{3}}. Thanks",
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      1: 'John',
+      3: '12345',
+    },
+    content_sid: 'HX88291ef8d30d7dcd436cbb9b21c236f4',
+    friendly_name: 'order_status',
+    template_type: 'text',
+  },
+  {
+    body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+    types: {
+      'twilio/text': {
+        body: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {},
+    content_sid: 'HXdc6da32d489ee80f67c07d5bb0e7e390',
+    friendly_name: 'hello_world',
+    template_type: 'text',
+  },
+  {
+    body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Before we proceed, we would like to get some information from you to assist you better. To whom would you like to connect?',
+        actions: [
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX778677f5867f96175ab4b7efb9a5bee6',
+    friendly_name: 'welcome_message_new',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+    types: {
+      'twilio/quick-reply': {
+        body: 'What type of Chatwoot installation are you using? Select "Chatwoot Cloud" if you are using app.chatwoot.com, otherwise select "Self-hosted Chatwoot".',
+        actions: [
+          {
+            id: 'Chatwoot Cloud_payload',
+            title: 'Chatwoot Cloud',
+          },
+          {
+            id: 'Self-hosted Chatwoot_payload',
+            title: 'Self-hosted Chatwoot',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX3a35e5cd76529fd91d19341deb4ef685',
+    friendly_name: 'saas_whatsapp_question',
+    template_type: 'quick_reply',
+  },
+  {
+    body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+    types: {
+      'twilio/quick-reply': {
+        body: 'Thanks for reaching out to us. Happy to help. What are you looking for?',
+        actions: [
+          {
+            id: 'Support_payload',
+            title: 'Support',
+          },
+          {
+            id: 'Sales_payload',
+            title: 'Sales',
+          },
+          {
+            id: 'Demo_payload',
+            title: 'Demo',
+          },
+        ],
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en_US',
+    variables: {},
+    content_sid: 'HX5d8e09f96cee2f7fb7bab223c03cb0a1',
+    friendly_name: 'welcome_message',
+    template_type: 'quick_reply',
+  },
+  {
+    types: {
+      'twilio/call-to-action': {
+        actions: [
+          {
+            id: null,
+            title: 'Pay now',
+            type: 'URL',
+            url: 'https://payments.example.com/pay',
+          },
+        ],
+        body: 'Hello, this is a gentle reminder regarding your course fee.\n\nThe payment is due on {{date}}.\nKindly complete the payment at your convenience',
+      },
+    },
+    status: 'approved',
+    category: 'utility',
+    language: 'en',
+    variables: {
+      date: '01-Jan-2026',
+    },
+    content_sid: 'HX63e56fc142aad670f320bf400d5bfeb7',
+    friendly_name: 'course_fee_reminder',
+    template_type: 'call_to_action',
+  },
+];

app/javascript/dashboard/components-next/template-preview/templates/whatsapp-templates.js

@@ -0,0 +1,408 @@
+export const whatsAppTemplates = [
+  {
+    id: '1381151706284063',
+    name: 'event_invitation_static',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "You're invited to {{event_name}} at {{location}}, Join us for an amazing experience!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'F1',
+              param_name: 'event_name',
+            },
+            {
+              example: 'Dubai',
+              param_name: 'location',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://events.example.com/register',
+            text: 'Visit website',
+            type: 'URL',
+          },
+          {
+            url: 'https://maps.app.goo.gl/YoWAzRj1GDuxs6qz8',
+            text: 'Get Directions',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '767076159336759',
+    name: 'purchase_receipt',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'DOCUMENT',
+        example: {
+          header_handle: [
+            'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
+          ],
+        },
+      },
+      {
+        text: 'Thank you for using your {{1}} card at {{2}}. Your {{3}} is attached as a PDF.',
+        type: 'BODY',
+        example: {
+          body_text: [['credit', 'CS Mutual', 'receipt']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1469258364071127',
+    name: 'discount_coupon',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Special offer for you! Get {{discount_percentage}}% off your next purchase. Use the code below at checkout',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: '30',
+              param_name: 'discount_percentage',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Copy offer code',
+            type: 'COPY_CODE',
+            example: ['SAVE1OFF'],
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1075221534579807',
+    name: 'support_callback',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en',
+    components: [
+      {
+        text: 'Hello {{name}},  our support team will call you regarding ticket # {{ticket_id}}.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+            {
+              example: '232323',
+              param_name: 'ticket_id',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Call Support',
+            type: 'PHONE_NUMBER',
+            phone_number: '+2112121212',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1023596726651144',
+    name: 'training_video',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'VIDEO',
+        example: {
+          header_handle: [
+            'https://scontent.whatsapp.net/v/t61.29466-34/521582686_1023596729984477_1872358575355618432_n.mp4',
+          ],
+        },
+      },
+      {
+        text: "Hi {{name}}, here's your training video. Please watch by{{date}}.",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'john',
+              param_name: 'name',
+            },
+            {
+              example: 'July 31',
+              param_name: 'date',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1106685194739985',
+    name: 'order_confirmation',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/vaporfly.png'],
+        },
+      },
+      {
+        text: 'Hi your order {{1}} is confirmed. Please wait for further updates',
+        type: 'BODY',
+        example: {
+          body_text: [['blue canvas shoes']],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1242180011253003',
+    name: 'product_launch',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        type: 'HEADER',
+        format: 'IMAGE',
+        example: {
+          header_handle: ['https://vite-five-phi.vercel.app/coat.png'],
+        },
+      },
+      {
+        text: 'New arrival! Our stunning coat now available in {{color}} color.',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'blue',
+              param_name: 'color',
+            },
+          ],
+        },
+      },
+      {
+        text: 'Free shipping on orders over $100. Limited time offer.',
+        type: 'FOOTER',
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1449876326175680',
+    name: 'technician_visit',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Technician visit',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: "Hi {{1}}, we're scheduling a technician visit to {{2}} on {{3}} between {{4}} and {{5}}. Please confirm if this time slot works for you.",
+        type: 'BODY',
+        example: {
+          body_text: [
+            ['John', '123 Maple St', '2025-12-31', '10:00 AM', '2:00 PM'],
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            text: 'Confirm',
+            type: 'QUICK_REPLY',
+          },
+          {
+            text: 'Reschedule',
+            type: 'QUICK_REPLY',
+          },
+        ],
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '997298832221901',
+    name: 'greet',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: 'Hey {{customer_name}} how may I help you?',
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'John',
+              param_name: 'customer_name',
+            },
+          ],
+        },
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '632315222954611',
+    name: 'hello_world',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Hello World',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Welcome and congratulations!! This message demonstrates your ability to send a WhatsApp message notification from the Cloud API, hosted by Meta. Thank you for taking the time to test with us.',
+        type: 'BODY',
+      },
+      {
+        text: 'WhatsApp Business Platform sample message',
+        type: 'FOOTER',
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '787864066907971',
+    name: 'feedback_request',
+    status: 'APPROVED',
+    category: 'MARKETING',
+    language: 'en',
+    components: [
+      {
+        text: "Hey {{name}}, how was your experience with Puma? We'd love your feedback!",
+        type: 'BODY',
+        example: {
+          body_text_named_params: [
+            {
+              example: 'muhsin',
+              param_name: 'name',
+            },
+          ],
+        },
+      },
+      {
+        type: 'BUTTONS',
+        buttons: [
+          {
+            url: 'https://feedback.example.com/survey',
+            text: 'Leave Feedback',
+            type: 'URL',
+          },
+        ],
+      },
+    ],
+    sub_category: 'CUSTOM',
+    parameter_format: 'NAMED',
+  },
+  {
+    id: '1938057163677205',
+    name: 'address_update',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: 'Address update',
+        type: 'HEADER',
+        format: 'TEXT',
+      },
+      {
+        text: 'Hi {{1}}, your delivery address has been successfully updated to {{2}}. Contact {{3}} for any inquiries.',
+        type: 'BODY',
+        example: {
+          body_text: [['John', '123 Main St', 'support@telco.com']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+  {
+    id: '1644094842949394',
+    name: 'delivery_confirmation',
+    status: 'APPROVED',
+    category: 'UTILITY',
+    language: 'en_US',
+    components: [
+      {
+        text: '{{1}}, your order was successfully delivered on {{2}}.\\n\\nThank you for your purchase.\\n',
+        type: 'BODY',
+        example: {
+          body_text: [['John', 'Jan 1, 2024']],
+        },
+      },
+    ],
+    parameter_format: 'POSITIONAL',
+  },
+];
+
+// Helper function to get variable values from examples
+export const getWhatsAppVariables = template => {
+  const variables = {};
+  template.components?.forEach(component => {
+    if (component.example?.body_text_named_params) {
+      component.example.body_text_named_params.forEach(param => {
+        variables[param.param_name] = param.example;
+      });
+    }
+    if (component.example?.body_text) {
+      component.example.body_text[0]?.forEach((value, index) => {
+        variables[(index + 1).toString()] = value;
+      });
+    }
+  });
+  return variables;
+};

app/javascript/dashboard/components/ChannelSelector.vue

@@ -1,5 +1,7 @@
 <script setup>
+import { useI18n } from 'vue-i18n';
 import Icon from 'next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
 
 defineProps({
   title: {
@@ -18,7 +20,13 @@ defineProps({
     type: Boolean,
     default: false,
   },
+  isBeta: {
+    type: Boolean,
+    default: false,
+  },
 });
+
+const { t } = useI18n();
 </script>
 
 <template>
@@ -37,9 +45,18 @@ defineProps({
     </div>
 
     <div class="flex flex-col items-start gap-1.5">
-      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
-        {{ title }}
-      </h3>
+      <div class="flex items-center gap-2">
+        <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
+          {{ title }}
+        </h3>
+        <Label
+          v-if="isBeta && !isComingSoon"
+          v-tooltip.top="t('GENERAL.BETA_DESCRIPTION')"
+          :label="t('GENERAL.BETA')"
+          color="blue"
+          compact
+        />
+      </div>
       <p class="text-n-slate-11 text-start text-sm">
         {{ description }}
       </p>
@@ -50,7 +67,7 @@ defineProps({
       class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
     >
       <span class="text-n-slate-12 font-medium text-sm">
-        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
+        {{ t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
       </span>
     </div>
   </button>

app/javascript/dashboard/components/ChatList.vue

@@ -122,8 +122,6 @@ const {
   onAssignAgent,
   onAssignLabels,
   onRemoveLabels,
-  onAssignTeamsForBulk,
-  onUpdateConversations,
 } = useBulkActions();
 
 const {
@@ -866,7 +864,7 @@ watch(conversationFilters, (newVal, oldVal) => {
 
 <template>
   <div
-    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1"
+    class="flex flex-col flex-shrink-0 conversations-list-wrap bg-n-surface-1 relative"
     :class="[
       { hidden: !showConversationList },
       isOnExpandedLayout ? 'basis-full' : 'w-[340px] 2xl:w-[412px]',
@@ -924,18 +922,14 @@ watch(conversationFilters, (newVal, oldVal) => {
       {{ $t('CHAT_LIST.LIST.404') }}
     </p>
     <ConversationBulkActions
-      v-if="selectedConversations.length"
       :conversations="selectedConversations"
       :all-conversations-selected="allConversationsSelected"
       :selected-inboxes="uniqueInboxes"
       :show-open-action="allSelectedConversationsStatus('open')"
       :show-resolved-action="allSelectedConversationsStatus('resolved')"
       :show-snoozed-action="allSelectedConversationsStatus('snoozed')"
+      :class="isOnExpandedLayout && 'sm:!w-[24rem] !w-full'"
       @select-all-conversations="toggleSelectAll"
-      @assign-agent="onAssignAgent"
-      @update-conversations="onUpdateConversations"
-      @assign-labels="onAssignLabels"
-      @assign-team="onAssignTeamsForBulk"
     />
     <ConversationList
       :conversation-list="conversationList"

app/javascript/dashboard/components/CustomAttribute.vue

@@ -102,13 +102,14 @@ export default {
       return this.v$.editedValue.$error;
     },
     errorMessage() {
-      if (this.v$.editedValue.url) {
+      if (this.v$.editedValue.url?.$invalid) {
         return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_URL');
       }
-      if (!this.v$.editedValue.regexValidation) {
-        return this.regexCue
-          ? this.regexCue
-          : this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT');
+      if (this.v$.editedValue.regexValidation?.$invalid) {
+        return (
+          this.regexCue ||
+          this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.INVALID_INPUT')
+        );
       }
       return this.$t('CUSTOM_ATTRIBUTES.VALIDATIONS.REQUIRED');
     },
@@ -134,9 +135,12 @@ export default {
       editedValue: {
         required,
         regexValidation: value => {
-          return !(
-            this.attributeRegex && !getRegexp(this.attributeRegex).test(value)
-          );
+          if (!this.attributeRegex || !value) return true;
+          try {
+            return getRegexp(this.attributeRegex).test(value);
+          } catch {
+            return false;
+          }
         },
       },
     };

app/javascript/dashboard/components/app/StatusBanner.vue

@@ -0,0 +1,63 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useI18n } from 'vue-i18n';
+import { LOCAL_STORAGE_KEYS } from 'dashboard/constants/localStorage';
+import { LocalStorage } from 'shared/helpers/localStorage';
+import MessageFormatter from 'shared/helpers/MessageFormatter';
+import Banner from 'dashboard/components-next/banner/Banner.vue';
+
+const BANNER_COLOR_MAP = {
+  info: 'blue',
+  warning: 'amber',
+  error: 'ruby',
+};
+
+const { t } = useI18n();
+const globalConfig = useMapGetter('globalConfig/get');
+
+const dismissedBannerIds = ref(
+  LocalStorage.get(LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS) || []
+);
+
+const dismissKey = banner => `${banner.id}-${banner.updated_at}`;
+
+const visibleBanners = computed(() => {
+  const banners = globalConfig.value?.activePlatformBanners || [];
+  return banners.filter(
+    banner => !dismissedBannerIds.value.includes(dismissKey(banner))
+  );
+});
+
+const formattedMessage = message =>
+  new MessageFormatter(message).formattedMessage;
+
+const bannerColor = bannerType => BANNER_COLOR_MAP[bannerType] || 'slate';
+
+const dismissBanner = banner => {
+  const key = dismissKey(banner);
+  if (dismissedBannerIds.value.includes(key)) return;
+
+  dismissedBannerIds.value.push(key);
+  LocalStorage.set(
+    LOCAL_STORAGE_KEYS.DISMISSED_PLATFORM_BANNERS,
+    dismissedBannerIds.value
+  );
+};
+</script>
+
+<template>
+  <Banner
+    v-for="banner in visibleBanners"
+    :key="banner.id"
+    :color="bannerColor(banner.banner_type)"
+    :action-label="t('GENERAL_SETTINGS.DISMISS')"
+    class="!rounded-none !justify-center [&_.link]:underline [&_p]:m-0"
+    @action="dismissBanner(banner)"
+  >
+    <span
+      v-dompurify-html="formattedMessage(banner.banner_message)"
+      class="text-xs"
+    />
+  </Banner>
+</template>

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

@@ -1,3 +1,5 @@
+<!-- DEPRECIATED -->
+<!-- TODO: Replace this banner component with NextBanner "app/javascript/dashboard/components-next/banner/Banner.vue" -->
 <script>
 import NextButton from 'dashboard/components-next/button/Button.vue';
 

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

@@ -77,6 +77,10 @@ const isComingSoon = computed(() => {
   return ['voice'].includes(key) && !isActive.value;
 });
 
+const isBeta = computed(() => {
+  return ['tiktok', 'voice'].includes(props.channel.key);
+});
+
 const onItemClick = () => {
   if (isActive.value) {
     emit('channelItemClick', props.channel.key);
@@ -90,6 +94,7 @@ const onItemClick = () => {
     :description="channel.description"
     :icon="channel.icon"
     :is-coming-soon="isComingSoon"
+    :is-beta="isBeta"
     :disabled="!isActive"
     @click="onItemClick"
   />

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

@@ -44,6 +44,7 @@ const handleEndCall = async () => {
   await endCallSession({
     conversationId: call.conversationId,
     inboxId,
+    callSid: call.callSid,
   });
 };
 

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

@@ -13,6 +13,9 @@ import {
   triggerCharacters,
 } from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
+import embedPreviewPlugin from '@chatwoot/prosemirror-schema/src/plugins/embedPreview';
+import trailingParagraphPlugin from '@chatwoot/prosemirror-schema/src/plugins/trailingParagraph';
+import { embeds as markdownEmbeds } from 'dashboard/helper/markdownEmbeds';
 import { toggleMark } from 'prosemirror-commands';
 import { wrapInList } from 'prosemirror-schema-list';
 import { toggleBlockType } from '@chatwoot/prosemirror-schema/src/menu/common';
@@ -77,6 +80,8 @@ export default {
       plugins: [
         imagePastePlugin(this.handleImageUpload),
         this.createSlashPlugin(),
+        embedPreviewPlugin(markdownEmbeds),
+        trailingParagraphPlugin(),
       ],
       isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
       showSlashMenu: false,
@@ -113,6 +118,12 @@ export default {
       this.focusEditorInputField();
     }
   },
+  beforeUnmount() {
+    if (editorView) {
+      editorView.destroy();
+      editorView = null;
+    }
+  },
   methods: {
     createSlashPlugin() {
       return suggestionsPlugin({
@@ -488,4 +499,9 @@ export default {
   max-height: 7.5rem;
   overflow: auto;
 }
+
+.ProseMirror .cw-embed-preview {
+  max-width: 36rem;
+  margin: 0.5rem 0 1rem;
+}
 </style>

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

@@ -38,10 +38,16 @@ const unreadCount = computed(() => props.chat.unread_count);
 const hasUnread = computed(() => unreadCount.value > 0);
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 
-const voiceCallData = computed(() => ({
-  status: props.chat.additional_attributes?.call_status,
-  direction: props.chat.additional_attributes?.call_direction,
-}));
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
+});
 
 const showMetaSection = computed(() => {
   return (

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

@@ -13,6 +13,8 @@ import { conversationListPageURL } from 'dashboard/helper/URLHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
 import { useI18n } from 'vue-i18n';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
+import { useAlert } from 'dashboard/composables';
 
 const props = defineProps({
   chat: {
@@ -91,6 +93,15 @@ const hasMultipleInboxes = computed(
 );
 
 const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
+
+const copyConversationId = async () => {
+  try {
+    await copyTextToClipboard(String(props.chat.id));
+    useAlert(t('CONVERSATION.HEADER.COPY_ID_SUCCESS'));
+  } catch (error) {
+    // error
+  }
+};
 </script>
 
 <template>
@@ -133,9 +144,18 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         </div>
 
         <div
-          class="flex items-center gap-2 overflow-hidden text-xs conversation--header--actions text-ellipsis whitespace-nowrap"
+          class="flex items-center gap-1 overflow-hidden text-xs conversation--header--actions text-n-slate-11 text-ellipsis whitespace-nowrap"
         >
+          <button
+            type="button"
+            class="truncate text-label-small text-n-slate-11 hover:text-n-slate-12 !p-0 cucursor-pointer"
+            @click="copyConversationId"
+          >
+            {{ `#${chat.id}` }}
+          </button>
+          <span v-if="hasMultipleInboxes">•</span>
           <InboxName v-if="hasMultipleInboxes" :inbox="inbox" class="!mx-0" />
+          <span v-if="isSnoozed">•</span>
           <span v-if="isSnoozed" class="font-medium text-n-amber-10">
             {{ snoozedDisplayText }}
           </span>

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

@@ -273,6 +273,10 @@ export default {
       return MESSAGE_MAX_LENGTH.GENERAL;
     },
     showFileUpload() {
+      const { image_send: imageSend } =
+        this.currentChat?.additional_attributes?.tiktok_capabilities ?? {};
+      const tiktokAttachmentSupported = imageSend ?? true;
+
       return (
         this.isAWebWidgetInbox ||
         this.isAFacebookInbox ||
@@ -283,7 +287,7 @@ export default {
         this.isATelegramChannel ||
         this.isALineChannel ||
         this.isAnInstagramChannel ||
-        this.isATiktokChannel
+        (this.isATiktokChannel && tiktokAttachmentSupported)
       );
     },
     replyButtonLabel() {
@@ -706,6 +710,7 @@ export default {
 
       // Don't handle paste if editor is disabled
       if (this.isEditorDisabled) return;
+      if (!this.showFileUpload && !this.isOnPrivateNote) return;
 
       // Filter valid files (non-zero size)
       Array.from(e.clipboardData.files)
@@ -1025,6 +1030,8 @@ export default {
       });
     },
     attachFile({ blob, file }) {
+      if (!this.showFileUpload && !this.isOnPrivateNote) return;
+
       const reader = new FileReader();
       reader.readAsDataURL(file.file);
       reader.onloadend = () => {

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

@@ -22,6 +22,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  autoPlay: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['close']);
@@ -309,6 +313,7 @@ onMounted(() => {
               :src="activeAttachment.data_url"
               controls
               playsInline
+              :autoplay="autoPlay"
               class="max-h-full max-w-full object-contain"
               @click.stop
             />
@@ -317,6 +322,7 @@ onMounted(() => {
               v-if="isAudio"
               :key="activeAttachment.message_id"
               controls
+              :autoplay="autoPlay"
               class="w-full max-w-md"
               @click.stop
             >

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/AgentSelector.vue

@@ -1,254 +0,0 @@
-<script>
-import { mapGetters } from 'vuex';
-import Avatar from 'next/avatar/Avatar.vue';
-import Spinner from 'shared/components/Spinner.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  components: {
-    Avatar,
-    Spinner,
-    NextButton,
-  },
-  props: {
-    selectedInboxes: {
-      type: Array,
-      default: () => [],
-    },
-    conversationCount: {
-      type: Number,
-      default: 0,
-    },
-  },
-  emits: ['select', 'close'],
-  data() {
-    return {
-      query: '',
-      selectedAgent: null,
-      goBackToAgentList: false,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      uiFlags: 'bulkActions/getUIFlags',
-      assignableAgentsUiFlags: 'inboxAssignableAgents/getUIFlags',
-    }),
-    filteredAgents() {
-      if (this.query) {
-        return this.assignableAgents.filter(agent =>
-          agent.name.toLowerCase().includes(this.query.toLowerCase())
-        );
-      }
-      return [
-        {
-          confirmed: true,
-          name: 'None',
-          id: null,
-          role: 'agent',
-          account_id: 0,
-          email: 'None',
-        },
-        ...this.assignableAgents,
-      ];
-    },
-    assignableAgents() {
-      return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
-        this.selectedInboxes.join(',')
-      );
-    },
-    conversationLabel() {
-      return this.conversationCount > 1 ? 'conversations' : 'conversation';
-    },
-  },
-  mounted() {
-    this.$store.dispatch('inboxAssignableAgents/fetch', this.selectedInboxes);
-  },
-  methods: {
-    submit() {
-      this.$emit('select', this.selectedAgent);
-    },
-    goBack() {
-      this.goBackToAgentList = true;
-      this.selectedAgent = null;
-    },
-    assignAgent(agent) {
-      this.selectedAgent = agent;
-    },
-    onClose() {
-      this.$emit('close');
-    },
-    onCloseAgentList() {
-      if (this.selectedAgent === null && !this.goBackToAgentList) {
-        this.onClose();
-      }
-      this.goBackToAgentList = false;
-    },
-  },
-};
-</script>
-
-<template>
-  <div v-on-clickaway="onCloseAgentList" class="bulk-action__agents">
-    <div class="triangle">
-      <svg height="12" viewBox="0 0 24 12" width="24">
-        <path d="M20 12l-8-8-12 12" fill-rule="evenodd" stroke-width="1px" />
-      </svg>
-    </div>
-    <div class="flex items-center justify-between header">
-      <span>{{ $t('BULK_ACTION.AGENT_SELECT_LABEL') }}</span>
-      <NextButton ghost xs slate icon="i-lucide-x" @click="onClose" />
-    </div>
-    <div class="container">
-      <div
-        v-if="assignableAgentsUiFlags.isFetching"
-        class="agent__list-loading"
-      >
-        <Spinner />
-        <p>{{ $t('BULK_ACTION.AGENT_LIST_LOADING') }}</p>
-      </div>
-      <div v-else class="agent__list-container">
-        <ul v-if="!selectedAgent">
-          <li class="search-container">
-            <div
-              class="flex items-center justify-between h-8 gap-2 agent-list-search"
-            >
-              <fluent-icon icon="search" class="search-icon" size="16" />
-              <input
-                v-model="query"
-                type="search"
-                :placeholder="$t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
-                class="reset-base !outline-0 !text-sm agent--search_input"
-              />
-            </div>
-          </li>
-          <li v-for="agent in filteredAgents" :key="agent.id">
-            <div class="agent-list-item" @click="assignAgent(agent)">
-              <Avatar
-                :name="agent.name"
-                :src="agent.thumbnail"
-                :status="agent.availability_status"
-                :size="22"
-                hide-offline-status
-                rounded-full
-              />
-              <span class="my-0 text-n-slate-12">
-                {{ agent.name }}
-              </span>
-            </div>
-          </li>
-        </ul>
-        <div v-else class="agent-confirmation-container">
-          <p v-if="selectedAgent.id">
-            {{
-              $t('BULK_ACTION.ASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-            <strong>
-              {{ selectedAgent.name }}
-            </strong>
-            <span>?</span>
-          </p>
-          <p v-else>
-            {{
-              $t('BULK_ACTION.UNASSIGN_CONFIRMATION_LABEL', {
-                conversationCount,
-                conversationLabel,
-              })
-            }}
-          </p>
-          <div class="agent-confirmation-actions">
-            <NextButton
-              faded
-              sm
-              slate
-              type="reset"
-              :label="$t('BULK_ACTION.GO_BACK_LABEL')"
-              @click="goBack"
-            />
-            <NextButton
-              sm
-              type="submit"
-              :label="$t('BULK_ACTION.YES')"
-              :is-loading="uiFlags.isUpdating"
-              @click="submit"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.bulk-action__agents {
-  @apply max-w-[75%] absolute ltr:right-2 rtl:left-2 top-12 origin-top-right w-auto z-20 min-w-[15rem] bg-n-alpha-3 backdrop-blur-[100px] border-n-weak rounded-lg border border-solid shadow-md;
-  .header {
-    @apply p-2.5;
-
-    span {
-      @apply text-sm font-medium;
-    }
-  }
-
-  .container {
-    @apply overflow-y-auto max-h-[15rem];
-    .agent__list-container {
-      @apply h-full;
-    }
-    .agent-list-search {
-      @apply py-0 px-2.5 bg-n-alpha-black2 border border-solid border-n-strong rounded-md;
-      .search-icon {
-        @apply text-n-slate-10;
-      }
-
-      .agent--search_input {
-        @apply border-0 text-xs m-0 dark:bg-transparent bg-transparent h-[unset] w-full;
-      }
-    }
-  }
-  .triangle {
-    @apply block z-10 absolute -top-3 text-left ltr:right-[--triangle-position] rtl:left-[--triangle-position];
-
-    svg path {
-      @apply fill-n-alpha-3 backdrop-blur-[100px]  stroke-n-weak;
-    }
-  }
-}
-ul {
-  @apply m-0 list-none;
-
-  li {
-    &:last-child {
-      .agent-list-item {
-        @apply last:rounded-b-lg;
-      }
-    }
-  }
-}
-
-.agent-list-item {
-  @apply flex items-center p-2.5 gap-2 cursor-pointer hover:bg-n-slate-3 dark:hover:bg-n-solid-3;
-  span {
-    @apply text-sm;
-  }
-}
-
-.agent-confirmation-container {
-  @apply flex flex-col h-full p-2.5;
-  p {
-    @apply flex-grow;
-  }
-  .agent-confirmation-actions {
-    @apply w-full grid grid-cols-2 gap-2.5;
-  }
-}
-.search-container {
-  @apply py-0 px-2.5 sticky top-0 z-20 bg-n-alpha-3 backdrop-blur-[100px];
-}
-
-.agent__list-loading {
-  @apply m-2.5 rounded-md dark:bg-n-solid-3 bg-n-slate-2 flex items-center justify-center flex-col p-5 h-[calc(95%-6.25rem)];
-}
-</style>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkAgentActions.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { useTemplateRef, computed, ref } from 'vue';
+import { useI18n, I18nT } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { useStore } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  selectedInboxes: {
+    type: Array,
+    default: () => [],
+  },
+  conversationCount: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const containerRef = useTemplateRef('containerRef');
+const [showDropdown, toggleDropdown] = useToggle(false);
+const selectedAgent = ref(null);
+
+const assignableAgentsUiFlags = useMapGetter(
+  'inboxAssignableAgents/getUIFlags'
+);
+const bulkActionsUiFlags = useMapGetter('bulkActions/getUIFlags');
+
+const isLoading = computed(() => assignableAgentsUiFlags.value.isFetching);
+const isUpdating = computed(() => bulkActionsUiFlags.value.isUpdating);
+
+const assignableAgentsList = useMapGetter(
+  'inboxAssignableAgents/getAssignableAgents'
+);
+const assignableAgents = computed(() =>
+  assignableAgentsList.value(props.selectedInboxes.join(','))
+);
+
+const agentMenuItems = computed(() => {
+  const items = [
+    {
+      action: 'select',
+      value: 'none',
+      label: t('BULK_ACTION.NONE'),
+      thumbnail: {
+        name: t('BULK_ACTION.NONE'),
+        src: '',
+      },
+      isSelected: selectedAgent.value?.id === null,
+    },
+  ];
+
+  assignableAgents.value.forEach(agent => {
+    items.push({
+      action: 'select',
+      value: agent.id,
+      label: agent.name,
+      thumbnail: {
+        name: agent.name,
+        src: agent.thumbnail,
+      },
+      isSelected: selectedAgent.value?.id === agent.id,
+    });
+  });
+
+  return items;
+});
+
+const handleSelectAgent = item => {
+  if (item.value === 'none') {
+    selectedAgent.value = { id: null, name: t('BULK_ACTION.NONE') };
+  } else {
+    const agent = assignableAgents.value.find(a => a.id === item.value);
+    selectedAgent.value = agent || { id: null, name: t('BULK_ACTION.NONE') };
+  }
+};
+
+const handleAssign = () => {
+  if (isUpdating.value) return;
+  emit('select', selectedAgent.value);
+  selectedAgent.value = null;
+  toggleDropdown(false);
+};
+
+const handleCancel = () => {
+  selectedAgent.value = null;
+};
+
+const handleDismiss = () => {
+  selectedAgent.value = null;
+  toggleDropdown(false);
+};
+
+const handleToggleDropdown = () => {
+  const willOpen = !showDropdown.value;
+  toggleDropdown();
+
+  // Fetch agents only when opening the dropdown
+  if (willOpen && props.selectedInboxes.length > 0) {
+    store.dispatch('inboxAssignableAgents/fetch', props.selectedInboxes);
+  }
+};
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <Button
+      v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
+      icon="i-lucide-user-round-check"
+      slate
+      xs
+      ghost
+      :class="{ 'bg-n-alpha-2': showDropdown }"
+      @click="handleToggleDropdown"
+    />
+    <Transition
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <DropdownMenu
+        v-if="showDropdown"
+        v-on-click-outside="[handleDismiss, { ignore: [containerRef] }]"
+        :menu-items="agentMenuItems"
+        :is-loading="isLoading"
+        show-search
+        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+        class="ltr:-right-10 rtl:-left-10 ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-60 max-h-80"
+        @action="handleSelectAgent"
+      >
+        <template v-if="selectedAgent" #footer>
+          <div
+            class="pt-2 pb-2 px-2 border-t border-n-weak sticky bottom-0 rounded-b-md z-20 bg-n-alpha-3 backdrop-blur-[4px]"
+          >
+            <div class="flex flex-col gap-2">
+              <I18nT
+                v-if="selectedAgent.id"
+                keypath="BULK_ACTION.ASSIGN_AGENT_CONFIRMATION_LABEL"
+                tag="p"
+                class="text-xs text-n-slate-11 px-1 mb-0"
+                :plural="props.conversationCount"
+              >
+                <template #n>
+                  <strong class="text-n-slate-12">
+                    {{ props.conversationCount }}
+                  </strong>
+                </template>
+                <template #agentName>
+                  <strong class="text-n-slate-12">
+                    {{ selectedAgent.name }}
+                  </strong>
+                </template>
+              </I18nT>
+              <I18nT
+                v-else
+                keypath="BULK_ACTION.UNASSIGN_AGENT_CONFIRMATION_LABEL"
+                tag="p"
+                class="text-xs text-n-slate-11 px-1 mb-0"
+                :plural="props.conversationCount"
+              >
+                <template #n>
+                  <strong class="text-n-slate-12">
+                    {{ props.conversationCount }}
+                  </strong>
+                </template>
+              </I18nT>
+              <div class="flex gap-2">
+                <Button
+                  sm
+                  faded
+                  slate
+                  class="flex-1"
+                  :label="t('BULK_ACTION.CANCEL')"
+                  @click="handleCancel"
+                />
+                <Button
+                  sm
+                  class="flex-1"
+                  :label="t('BULK_ACTION.YES')"
+                  :disabled="isUpdating"
+                  :is-loading="isUpdating"
+                  @click="handleAssign"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </DropdownMenu>
+    </Transition>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkLabelActions.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { ref, useTemplateRef, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'conversation',
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['assign']);
+
+const { t } = useI18n();
+
+const labels = useMapGetter('labels/getLabels');
+
+const containerRef = useTemplateRef('containerRef');
+const [showDropdown, toggleDropdown] = useToggle(false);
+const selectedLabels = ref([]);
+
+const isTypeContact = computed(() => props.type === 'contact');
+
+const buttonLabel = computed(() =>
+  props.type === 'contact' ? t('CONTACTS_BULK_ACTIONS.ASSIGN_LABELS') : ''
+);
+
+const isLabelSelected = labelTitle => {
+  return selectedLabels.value.includes(labelTitle);
+};
+
+const labelMenuItems = computed(() => {
+  return labels.value.map(label => ({
+    action: 'select',
+    value: label.title,
+    label: label.title,
+    color: label.color,
+    id: label.id,
+    isSelected: isLabelSelected(label.title),
+  }));
+});
+
+const toggleLabelSelection = labelTitle => {
+  const index = selectedLabels.value.indexOf(labelTitle);
+  if (index > -1) {
+    selectedLabels.value.splice(index, 1);
+  } else {
+    selectedLabels.value.push(labelTitle);
+  }
+};
+
+const handleAssign = () => {
+  if (selectedLabels.value.length > 0) {
+    emit('assign', selectedLabels.value);
+    toggleDropdown(false);
+    selectedLabels.value = [];
+  }
+};
+
+const handleDismiss = () => {
+  selectedLabels.value = [];
+  toggleDropdown(false);
+};
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <NextButton
+      v-tooltip="isTypeContact ? '' : $t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
+      :label="buttonLabel"
+      icon="i-lucide-tag"
+      slate
+      :size="isTypeContact ? 'sm' : 'xs'"
+      ghost
+      :class="{
+        'bg-n-alpha-2': showDropdown,
+        '[&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline w-fit !text-n-blue-11 [&>span]:!text-n-blue-11 !px-2':
+          isTypeContact,
+      }"
+      :disabled="disabled || isLoading"
+      :is-loading="isLoading"
+      @click="toggleDropdown()"
+    />
+    <Transition
+      :enter-active-class="
+        !isTypeContact
+          ? 'transition-all duration-150 ease-out origin-bottom'
+          : 'transition-all duration-150 ease-out origin-top'
+      "
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      :leave-active-class="
+        !isTypeContact
+          ? 'transition-all duration-100 ease-in origin-bottom'
+          : 'transition-all duration-100 ease-in origin-top'
+      "
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <DropdownMenu
+        v-if="showDropdown"
+        v-on-click-outside="[handleDismiss, { ignore: [containerRef] }]"
+        :menu-items="labelMenuItems"
+        show-search
+        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+        class="w-60 max-h-80"
+        :class="{
+          'ltr:-right-[6.5rem] rtl:-left-[6.5rem] ltr:2xl:right-0 rtl:2xl:left-0 bottom-8':
+            !isTypeContact,
+          'ltr:right-0 rtl:left-0 mb-1 top-10': isTypeContact,
+        }"
+        @action="item => toggleLabelSelection(item.value)"
+      >
+        <template #thumbnail="{ item }">
+          <span
+            class="rounded-md h-3 w-3 flex-shrink-0 border border-solid border-n-weak"
+            :style="{ backgroundColor: item.color }"
+          />
+        </template>
+
+        <template #trailing-icon="{ item }">
+          <Icon
+            v-if="isLabelSelected(item.value)"
+            icon="i-lucide-check"
+            class="size-4 text-n-blue-11 flex-shrink-0"
+          />
+        </template>
+
+        <template #footer>
+          <div
+            class="sticky bottom-0 rounded-b-md px-2 py-2 z-20 bg-n-alpha-3 backdrop-blur-[4px]"
+          >
+            <NextButton
+              sm
+              class="w-full [&>span:nth-child(2)]:hidden md:[&>span:nth-child(2)]:inline-flex"
+              :label="t('BULK_ACTION.LABELS.ASSIGN_SELECTED_LABELS')"
+              :disabled="!selectedLabels.length"
+              @click="handleAssign"
+            />
+          </div>
+        </template>
+      </DropdownMenu>
+    </Transition>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkTeamActions.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { useTemplateRef, computed, ref, onMounted } from 'vue';
+import { useI18n, I18nT } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { useStore } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  conversationCount: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const { t } = useI18n();
+const store = useStore();
+const containerRef = useTemplateRef('containerRef');
+const [showDropdown, toggleDropdown] = useToggle(false);
+const selectedTeam = ref(null);
+
+const teams = useMapGetter('teams/getTeams');
+const bulkActionsUiFlags = useMapGetter('bulkActions/getUIFlags');
+const isUpdating = computed(() => bulkActionsUiFlags.value.isUpdating);
+
+const teamMenuItems = computed(() => {
+  const items = [
+    {
+      action: 'select',
+      value: 'none',
+      label: t('BULK_ACTION.TEAMS.NONE'),
+      isSelected: selectedTeam.value?.id === 0,
+    },
+  ];
+
+  teams.value.forEach(team => {
+    items.push({
+      action: 'select',
+      value: team.id,
+      label: team.name,
+      isSelected: selectedTeam.value?.id === team.id,
+    });
+  });
+
+  return items;
+});
+
+const handleSelectTeam = item => {
+  if (item.value === 'none') {
+    selectedTeam.value = { id: 0, name: t('BULK_ACTION.TEAMS.NONE') };
+  } else {
+    const foundTeam = teams.value.find(team => team.id === item.value);
+    selectedTeam.value = foundTeam || {
+      id: 0,
+      name: t('BULK_ACTION.TEAMS.NONE'),
+    };
+  }
+};
+
+const handleAssign = () => {
+  if (isUpdating.value) return;
+  emit('select', selectedTeam.value);
+  selectedTeam.value = null;
+  toggleDropdown(false);
+};
+
+const handleCancel = () => {
+  selectedTeam.value = null;
+};
+
+const handleDismiss = () => {
+  selectedTeam.value = null;
+  toggleDropdown(false);
+};
+
+onMounted(() => {
+  store.dispatch('teams/get');
+});
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <Button
+      v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
+      icon="i-lucide-users-round"
+      slate
+      xs
+      ghost
+      :class="{ 'bg-n-alpha-2': showDropdown }"
+      @click="toggleDropdown()"
+    />
+    <Transition
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <DropdownMenu
+        v-if="showDropdown"
+        v-on-click-outside="[handleDismiss, { ignore: [containerRef] }]"
+        :menu-items="teamMenuItems"
+        show-search
+        :search-placeholder="t('BULK_ACTION.SEARCH_INPUT_PLACEHOLDER')"
+        class="ltr:-right-2 rtl:-left-2 bottom-8 w-60 max-h-80"
+        @action="handleSelectTeam"
+      >
+        <template v-if="selectedTeam" #footer>
+          <div
+            class="pt-2 pb-2 px-2 border-t border-n-weak sticky bottom-0 rounded-b-md z-20 bg-n-alpha-3 backdrop-blur-[4px]"
+          >
+            <div class="flex flex-col gap-2">
+              <I18nT
+                v-if="selectedTeam.id"
+                keypath="BULK_ACTION.TEAMS.ASSIGN_TEAM_CONFIRMATION_LABEL"
+                tag="p"
+                class="text-xs text-n-slate-11 px-1 mb-0"
+                :plural="props.conversationCount"
+              >
+                <template #n>
+                  <strong class="text-n-slate-12">
+                    {{ props.conversationCount }}
+                  </strong>
+                </template>
+                <template #teamName>
+                  <strong class="text-n-slate-12">
+                    {{ selectedTeam.name }}
+                  </strong>
+                </template>
+              </I18nT>
+              <I18nT
+                v-else
+                keypath="BULK_ACTION.TEAMS.UNASSIGN_TEAM_CONFIRMATION_LABEL"
+                tag="p"
+                class="text-xs text-n-slate-11 px-1 mb-0"
+                :plural="props.conversationCount"
+              >
+                <template #n>
+                  <strong class="text-n-slate-12">
+                    {{ props.conversationCount }}
+                  </strong>
+                </template>
+              </I18nT>
+              <div class="flex gap-2">
+                <Button
+                  sm
+                  faded
+                  slate
+                  class="flex-1"
+                  :label="t('BULK_ACTION.CANCEL')"
+                  @click="handleCancel"
+                />
+                <Button
+                  sm
+                  class="flex-1"
+                  :label="t('BULK_ACTION.YES')"
+                  :disabled="isUpdating"
+                  :is-loading="isUpdating"
+                  @click="handleAssign"
+                />
+              </div>
+            </div>
+          </div>
+        </template>
+      </DropdownMenu>
+    </Transition>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/conversationBulkActions/BulkUpdateActions.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { useTemplateRef, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const props = defineProps({
+  showResolve: {
+    type: Boolean,
+    default: true,
+  },
+  showReopen: {
+    type: Boolean,
+    default: true,
+  },
+  showSnooze: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const emit = defineEmits(['update']);
+
+const { t } = useI18n();
+
+const containerRef = useTemplateRef('containerRef');
+const [showDropdown, toggleDropdown] = useToggle(false);
+
+const updateMenuItems = computed(() => {
+  const items = [];
+
+  if (props.showResolve) {
+    items.push({
+      action: 'update',
+      value: 'resolved',
+      label: t('CONVERSATION.HEADER.RESOLVE_ACTION'),
+      icon: 'i-lucide-check',
+    });
+  }
+
+  if (props.showReopen) {
+    items.push({
+      action: 'update',
+      value: 'open',
+      label: t('CONVERSATION.HEADER.REOPEN_ACTION'),
+      icon: 'i-lucide-redo',
+    });
+  }
+
+  if (props.showSnooze) {
+    items.push({
+      action: 'update',
+      value: 'snoozed',
+      label: t('BULK_ACTION.UPDATE.SNOOZE_UNTIL'),
+      icon: 'i-lucide-alarm-clock',
+    });
+  }
+
+  return items;
+});
+
+const handleUpdate = item => {
+  if (item.value === 'snoozed') {
+    // If the user clicks on the snooze option from the bulk action change status dropdown.
+    // Open the snooze option for bulk action in the cmd bar.
+    const ninja = document.querySelector('ninja-keys');
+    ninja?.open({ parent: 'bulk_action_snooze_conversation' });
+  } else {
+    emit('update', item.value);
+  }
+  toggleDropdown(false);
+};
+</script>
+
+<template>
+  <div ref="containerRef" class="relative">
+    <Button
+      v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
+      icon="i-lucide-circle-fading-arrow-up"
+      slate
+      xs
+      ghost
+      :class="{ 'bg-n-alpha-2': showDropdown }"
+      @click="toggleDropdown()"
+    />
+    <Transition
+      enter-active-class="transition-all duration-150 ease-out origin-bottom"
+      enter-from-class="opacity-0 scale-95"
+      enter-to-class="opacity-100 scale-100"
+      leave-active-class="transition-all duration-100 ease-in origin-bottom"
+      leave-from-class="opacity-100 scale-100"
+      leave-to-class="opacity-0 scale-95"
+    >
+      <DropdownMenu
+        v-if="showDropdown"
+        v-on-click-outside="[
+          () => toggleDropdown(false),
+          { ignore: [containerRef] },
+        ]"
+        :menu-items="updateMenuItems"
+        class="ltr:-right-[4.5rem] rtl:-left-[4.5rem] ltr:2xl:right-0 rtl:2xl:left-0 bottom-8 w-36"
+        @action="handleUpdate"
+      />
+    </Transition>
+  </div>
+</template>

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

@@ -1,7 +1,9 @@
-<script>
+<script setup>
+import { ref, computed, onMounted, onUnmounted, useAttrs } from 'vue';
 import { getUnixTime } from 'date-fns';
 import { findSnoozeTime } from 'dashboard/helper/snoozeHelpers';
 import { emitter } from 'shared/helpers/mitt';
+import { useBulkActions } from 'dashboard/composables/chatlist/useBulkActions.js';
 import wootConstants from 'dashboard/constants/globals';
 import {
   CMD_BULK_ACTION_SNOOZE_CONVERSATION,
@@ -10,315 +12,181 @@ import {
 } from 'dashboard/helper/commandbar/events';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import AgentSelector from './AgentSelector.vue';
-import UpdateActions from './UpdateActions.vue';
-import LabelActions from './LabelActions.vue';
-import TeamActions from './TeamActions.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import BulkAgentActions from './BulkAgentActions.vue';
+import BulkUpdateActions from './BulkUpdateActions.vue';
+import BulkLabelActions from './BulkLabelActions.vue';
+import BulkTeamActions from './BulkTeamActions.vue';
 import CustomSnoozeModal from 'dashboard/components/CustomSnoozeModal.vue';
-export default {
-  components: {
-    AgentSelector,
-    UpdateActions,
-    LabelActions,
-    TeamActions,
-    CustomSnoozeModal,
-    NextButton,
+
+const props = defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
   },
-  props: {
-    conversations: {
-      type: Array,
-      default: () => [],
-    },
-    allConversationsSelected: {
-      type: Boolean,
-      default: false,
-    },
-    selectedInboxes: {
-      type: Array,
-      default: () => [],
-    },
-    showOpenAction: {
-      type: Boolean,
-      default: false,
-    },
-    showResolvedAction: {
-      type: Boolean,
-      default: false,
-    },
-    showSnoozedAction: {
-      type: Boolean,
-      default: false,
-    },
+  allConversationsSelected: {
+    type: Boolean,
+    default: false,
   },
-  emits: [
-    'selectAllConversations',
-    'assignAgent',
-    'updateConversations',
-    'assignLabels',
-    'assignTeam',
-    'resolveConversations',
-  ],
-  data() {
-    return {
-      showAgentsList: false,
-      showUpdateActions: false,
-      showLabelActions: false,
-      showTeamsList: false,
-      popoverPositions: {},
-      showCustomTimeSnoozeModal: false,
-    };
+  selectedInboxes: {
+    type: Array,
+    default: () => [],
   },
-  mounted() {
-    emitter.on(
-      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-      this.onCmdSnoozeConversation
-    );
-    emitter.on(
-      CMD_BULK_ACTION_REOPEN_CONVERSATION,
-      this.onCmdReopenConversation
-    );
-    emitter.on(
-      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-      this.onCmdResolveConversation
-    );
+  showOpenAction: {
+    type: Boolean,
+    default: false,
   },
-  unmounted() {
-    emitter.off(
-      CMD_BULK_ACTION_SNOOZE_CONVERSATION,
-      this.onCmdSnoozeConversation
-    );
-    emitter.off(
-      CMD_BULK_ACTION_REOPEN_CONVERSATION,
-      this.onCmdReopenConversation
-    );
-    emitter.off(
-      CMD_BULK_ACTION_RESOLVE_CONVERSATION,
-      this.onCmdResolveConversation
-    );
+  showResolvedAction: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    onCmdSnoozeConversation(snoozeType) {
-      if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
-        this.showCustomTimeSnoozeModal = true;
-      } else if (typeof snoozeType === 'number') {
-        this.updateConversations('snoozed', snoozeType);
-      } else {
-        this.updateConversations('snoozed', findSnoozeTime(snoozeType) || null);
-      }
-    },
-    onCmdReopenConversation() {
-      this.updateConversations('open', null);
-    },
-    onCmdResolveConversation() {
-      this.updateConversations('resolved', null);
-    },
-    customSnoozeTime(customSnoozedTime) {
-      this.showCustomTimeSnoozeModal = false;
-      if (customSnoozedTime) {
-        this.updateConversations('snoozed', getUnixTime(customSnoozedTime));
-      }
-    },
-    hideCustomSnoozeModal() {
-      this.showCustomTimeSnoozeModal = false;
-    },
-    selectAll(e) {
-      this.$emit('selectAllConversations', e.target.checked);
-    },
-    submit(agent) {
-      this.$emit('assignAgent', agent);
-    },
-    updateConversations(status, snoozedUntil) {
-      this.$emit('updateConversations', status, snoozedUntil);
-    },
-    assignLabels(labels) {
-      this.$emit('assignLabels', labels);
-    },
-    assignTeam(team) {
-      this.$emit('assignTeam', team);
-    },
-    resolveConversations() {
-      this.$emit('resolveConversations');
-    },
-    toggleUpdateActions() {
-      this.showUpdateActions = !this.showUpdateActions;
-    },
-    toggleLabelActions() {
-      this.showLabelActions = !this.showLabelActions;
-    },
-    toggleAgentList() {
-      this.showAgentsList = !this.showAgentsList;
-    },
-    toggleTeamsList() {
-      this.showTeamsList = !this.showTeamsList;
-    },
+  showSnoozedAction: {
+    type: Boolean,
+    default: false,
   },
-};
+});
+
+const emit = defineEmits(['selectAllConversations']);
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const attrs = useAttrs();
+
+const {
+  onAssignAgent,
+  onAssignLabels,
+  onAssignTeamsForBulk: onAssignTeam,
+  onUpdateConversations,
+} = useBulkActions();
+
+const showCustomTimeSnoozeModal = ref(false);
+
+function onCmdSnoozeConversation(snoozeType) {
+  if (snoozeType === wootConstants.SNOOZE_OPTIONS.UNTIL_CUSTOM_TIME) {
+    showCustomTimeSnoozeModal.value = true;
+  } else if (typeof snoozeType === 'number') {
+    onUpdateConversations('snoozed', snoozeType);
+  } else {
+    onUpdateConversations('snoozed', findSnoozeTime(snoozeType) || null);
+  }
+}
+
+function onCmdReopenConversation() {
+  onUpdateConversations('open', null);
+}
+
+function onCmdResolveConversation() {
+  onUpdateConversations('resolved', null);
+}
+
+function customSnoozeTime(customSnoozedTime) {
+  showCustomTimeSnoozeModal.value = false;
+  if (customSnoozedTime) {
+    onUpdateConversations('snoozed', getUnixTime(customSnoozedTime));
+  }
+}
+
+function hideCustomSnoozeModal() {
+  showCustomTimeSnoozeModal.value = false;
+}
+
+// Computed property with getter/setter to enable v-model usage
+const allSelected = computed({
+  get: () => props.allConversationsSelected,
+  set: value => {
+    emit('selectAllConversations', value);
+  },
+});
+
+onMounted(() => {
+  emitter.on(CMD_BULK_ACTION_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
+  emitter.on(CMD_BULK_ACTION_REOPEN_CONVERSATION, onCmdReopenConversation);
+  emitter.on(CMD_BULK_ACTION_RESOLVE_CONVERSATION, onCmdResolveConversation);
+});
+
+onUnmounted(() => {
+  emitter.off(CMD_BULK_ACTION_SNOOZE_CONVERSATION, onCmdSnoozeConversation);
+  emitter.off(CMD_BULK_ACTION_REOPEN_CONVERSATION, onCmdReopenConversation);
+  emitter.off(CMD_BULK_ACTION_RESOLVE_CONVERSATION, onCmdResolveConversation);
+});
 </script>
 
 <template>
-  <div class="bulk-action__container">
-    <div class="flex items-center justify-between">
-      <label class="flex items-center justify-between bulk-action__panel">
-        <input
-          type="checkbox"
-          class="checkbox"
-          :checked="allConversationsSelected"
-          :indeterminate.prop="!allConversationsSelected"
-          @change="selectAll($event)"
-        />
-        <span>
-          {{
-            $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
-              conversationCount: conversations.length,
-            })
-          }}
-        </span>
-      </label>
-      <div class="flex items-center gap-1 bulk-action__actions">
-        <NextButton
-          v-tooltip="$t('BULK_ACTION.LABELS.ASSIGN_LABELS')"
-          icon="i-lucide-tags"
-          slate
-          xs
-          faded
-          @click="toggleLabelActions"
-        />
-        <NextButton
-          v-tooltip="$t('BULK_ACTION.UPDATE.CHANGE_STATUS')"
-          icon="i-lucide-repeat"
-          slate
-          xs
-          faded
-          @click="toggleUpdateActions"
-        />
-        <NextButton
-          v-tooltip="$t('BULK_ACTION.ASSIGN_AGENT_TOOLTIP')"
-          icon="i-lucide-user-round-plus"
-          slate
-          xs
-          faded
-          @click="toggleAgentList"
-        />
-        <NextButton
-          v-tooltip="$t('BULK_ACTION.ASSIGN_TEAM_TOOLTIP')"
-          icon="i-lucide-users-round"
-          slate
-          xs
-          faded
-          @click="toggleTeamsList"
-        />
-      </div>
-      <transition name="popover-animation">
-        <LabelActions
-          v-if="showLabelActions"
-          class="label-actions-box"
-          @assign="assignLabels"
-          @close="showLabelActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <UpdateActions
-          v-if="showUpdateActions"
-          class="update-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          :show-resolve="!showResolvedAction"
-          :show-reopen="!showOpenAction"
-          :show-snooze="!showSnoozedAction"
-          @update="updateConversations"
-          @close="showUpdateActions = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <AgentSelector
-          v-if="showAgentsList"
-          class="agent-actions-box"
-          :selected-inboxes="selectedInboxes"
-          :conversation-count="conversations.length"
-          @select="submit"
-          @close="showAgentsList = false"
-        />
-      </transition>
-      <transition name="popover-animation">
-        <TeamActions
-          v-if="showTeamsList"
-          class="team-actions-box"
-          @assign-team="assignTeam"
-          @close="showTeamsList = false"
-        />
-      </transition>
-    </div>
-    <div v-if="allConversationsSelected" class="bulk-action__alert">
-      {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
-    </div>
-    <woot-modal
-      v-model:show="showCustomTimeSnoozeModal"
-      :on-close="hideCustomSnoozeModal"
+  <Transition
+    enter-active-class="transition-all duration-200 ease-out origin-bottom"
+    enter-from-class="opacity-0 scale-95 translate-y-2"
+    enter-to-class="opacity-100 scale-100 translate-y-0"
+    leave-active-class="transition-all duration-150 ease-in origin-bottom"
+    leave-from-class="opacity-100 scale-100 translate-y-0"
+    leave-to-class="opacity-0 scale-95 translate-y-2"
+  >
+    <div
+      v-if="conversations.length > 0"
+      v-bind="attrs"
+      class="px-2 absolute bottom-20 sm:bottom-4 left-1/2 -translate-x-1/2 z-30 w-full origin-bottom"
     >
-      <CustomSnoozeModal
-        @close="hideCustomSnoozeModal"
-        @choose-time="customSnoozeTime"
-      />
-    </woot-modal>
-  </div>
+      <div
+        v-if="allConversationsSelected"
+        class="bg-n-amber-2 outline -outline-offset-1 outline-1 outline-n-amber-5 rounded-lg text-sm mb-2 py-1.5 px-2 text-n-amber-text"
+      >
+        {{ $t('BULK_ACTION.ALL_CONVERSATIONS_SELECTED_ALERT') }}
+      </div>
+      <div
+        class="flex items-center justify-between p-2 bg-n-button-color outline outline-1 -outline-offset-1 rounded-[10px] outline-n-weak shadow-[0_0_12px_0_rgba(27,40,59,0.08)]"
+      >
+        <div class="ltr:ml-0.5 rtl:mr-0.5 flex items-center gap-1">
+          <label class="cursor-pointer flex items-center gap-1.5">
+            <Checkbox
+              v-model="allSelected"
+              :indeterminate="!allConversationsSelected"
+            />
+            <span class="cursor-pointer">
+              {{
+                $t('BULK_ACTION.CONVERSATIONS_SELECTED', {
+                  conversationCount: conversations.length,
+                })
+              }}
+            </span>
+          </label>
+          <div class="w-px h-3 bg-n-weak rounded-lg ltr:ml-1 rtl:mr-1" />
+          <NextButton
+            :label="$t('BULK_ACTION.CLEAR_SELECTION')"
+            ghost
+            class="!text-n-blue-11 !px-1 !h-6"
+            sm
+            @click="allSelected = false"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <BulkLabelActions @assign="onAssignLabels" />
+          <BulkUpdateActions
+            :show-resolve="!showResolvedAction"
+            :show-reopen="!showOpenAction"
+            :show-snooze="!showSnoozedAction"
+            @update="onUpdateConversations"
+          />
+          <BulkAgentActions
+            :selected-inboxes="selectedInboxes"
+            :conversation-count="conversations.length"
+            @select="onAssignAgent"
+          />
+          <BulkTeamActions
+            :conversation-count="conversations.length"
+            @select="onAssignTeam"
+          />
+        </div>
+      </div>
+    </div>
+  </Transition>
+  <woot-modal
+    v-model:show="showCustomTimeSnoozeModal"
+    :on-close="hideCustomSnoozeModal"
+  >
+    <CustomSnoozeModal
+      @close="hideCustomSnoozeModal"
+      @choose-time="customSnoozeTime"
+    />
+  </woot-modal>
 </template>
-
-<style scoped lang="scss">
-.bulk-action__container {
-  @apply p-3 relative border-b border-solid border-n-strong dark:border-n-weak;
-}
-
-.bulk-action__panel {
-  @apply cursor-pointer;
-
-  span {
-    @apply text-xs my-0 mx-1;
-  }
-
-  input[type='checkbox'] {
-    @apply cursor-pointer m-0;
-  }
-}
-
-.bulk-action__alert {
-  @apply bg-n-amber-3 text-n-amber-12 rounded text-xs mt-2 py-1 px-2 border border-solid border-n-amber-5;
-}
-
-.popover-animation-enter-active,
-.popover-animation-leave-active {
-  transition: transform ease-out 0.1s;
-}
-
-.popover-animation-enter {
-  transform: scale(0.95);
-  @apply opacity-0;
-}
-
-.popover-animation-enter-to {
-  transform: scale(1);
-  @apply opacity-100;
-}
-
-.popover-animation-leave {
-  transform: scale(1);
-  @apply opacity-100;
-}
-
-.popover-animation-leave-to {
-  transform: scale(0.95);
-  @apply opacity-0;
-}
-
-.label-actions-box {
-  --triangle-position: 5.3125rem;
-}
-.update-actions-box {
-  --triangle-position: 3.5rem;
-}
-.agent-actions-box {
-  --triangle-position: 1.75rem;
-}
-.team-actions-box {
-  --triangle-position: 0.125rem;
-}
-</style>