fix(instagram): isolate story reply attachment failures

.github/scripts/ghsa_linear_sync.py

@@ -1,195 +0,0 @@
-#!/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,9 +11,6 @@ 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,9 +8,6 @@ on:
     branches:
       - develop
 
-permissions:
-  contents: read
-
 jobs:
   test:
     runs-on: ubuntu-22.04

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

@@ -1,29 +0,0 @@
-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,9 +10,6 @@ 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,9 +14,6 @@ on:
     - cron: "0 0 * * *"
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   nightly:
     runs-on: ubuntu-24.04

.github/workflows/publish_codespace_image.yml

@@ -3,10 +3,6 @@ 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,9 +18,6 @@ on:
 env:
   DOCKER_REPO: chatwoot/chatwoot
 
-permissions:
-  contents: read
-
 jobs:
   build:
     strategy:

.github/workflows/publish_foss_docker.yml

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

.github/workflows/size-limit.yml

@@ -10,9 +10,6 @@ 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,9 +7,6 @@ on:
       - master
   workflow_dispatch:
 
-permissions:
-  contents: read
-
 jobs:
   test-build:
     strategy:

Gemfile

@@ -22,7 +22,6 @@ 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 --##
@@ -85,7 +84,6 @@ gem 'barnes'
 gem 'devise', '>= 4.9.4'
 gem 'devise-secure_password', git: 'https://github.com/chatwoot/devise-secure_password', branch: 'chatwoot'
 gem 'devise_token_auth', '>= 1.2.3'
-gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization
@@ -195,10 +193,10 @@ gem 'reverse_markdown'
 
 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.10.0'
+gem 'ai-agents', '>= 0.9.1'
 
 # TODO: Move this gem as a dependency of ai-agents
-gem 'ruby_llm', '>= 1.14.1'
+gem 'ruby_llm', '>= 1.8.2'
 gem 'ruby_llm-schema'
 
 gem 'cld3', '~> 3.7'

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.9.0)
-      public_suffix (>= 2.0.2, < 8.0)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
     administrate (0.20.1)
       actionpack (>= 6.0, < 8.0)
       actionview (>= 6.0, < 8.0)
@@ -126,8 +126,8 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
-    ai-agents (0.10.0)
-      ruby_llm (~> 1.14)
+    ai-agents (0.9.1)
+      ruby_llm (~> 1.9.1)
     annotaterb (4.20.0)
       activerecord (>= 6.0.0)
       activesupport (>= 6.0.0)
@@ -307,8 +307,8 @@ GEM
     faraday-mashify (1.0.0)
       faraday (~> 2.0)
       hashie
-    faraday-multipart (1.2.0)
-      multipart-post (~> 2.0)
+    faraday-multipart (1.0.4)
+      multipart-post (~> 2)
     faraday-net_http (3.4.2)
       net-http (~> 0.5)
     faraday-net_http_persistent (2.1.0)
@@ -349,7 +349,6 @@ 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
@@ -466,7 +465,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.19.5)
+    json (2.19.2)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -677,14 +676,14 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (7.0.5)
+    public_suffix (6.0.2)
     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.6)
+    rack (3.2.5)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -699,7 +698,7 @@ GEM
       rack (>= 3.0.0, < 4)
     rack-proxy (0.7.7)
       rack
-    rack-session (2.1.2)
+    rack-session (2.1.1)
       base64 (>= 0.1.0)
       rack (>= 3.0.0)
     rack-test (2.1.0)
@@ -728,9 +727,6 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    rails-i18n (7.0.10)
-      i18n (>= 0.7, < 2)
-      railties (>= 6.0.0, < 8)
     railties (7.1.5.2)
       actionpack (= 7.1.5.2)
       activesupport (= 7.1.5.2)
@@ -835,17 +831,17 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
-    ruby_llm (1.15.0)
+    ruby_llm (1.9.2)
       base64
       event_stream_parser (~> 1)
       faraday (>= 1.10.0)
       faraday-multipart (>= 1)
       faraday-net_http (>= 1)
       faraday-retry (>= 1)
-      marcel (~> 1)
-      ruby_llm-schema (~> 0)
+      marcel (~> 1.0)
+      ruby_llm-schema (~> 0.2.1)
       zeitwerk (~> 2)
-    ruby_llm-schema (0.3.0)
+    ruby_llm-schema (0.2.5)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
     sass (3.7.4)
@@ -1019,7 +1015,7 @@ GEM
     working_hours (1.4.1)
       activesupport (>= 3.2)
       tzinfo
-    zeitwerk (2.7.5)
+    zeitwerk (2.7.4)
 
 PLATFORMS
   arm64-darwin-20
@@ -1039,7 +1035,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.10.0)
+  ai-agents (>= 0.9.1)
   annotaterb
   attr_extras
   audited (~> 5.4, >= 5.4.1)
@@ -1076,7 +1072,6 @@ DEPENDENCIES
   fcm
   flag_shih_tzu
   foreman
-  gemoji
   geocoder
   gmail_xoauth
   google-cloud-dialogflow-v2 (>= 0.24.0)
@@ -1130,7 +1125,6 @@ DEPENDENCIES
   rack-mini-profiler (>= 3.2.0)
   rack-timeout
   rails (~> 7.1)
-  rails-i18n (~> 7.0)
   redis
   redis-namespace
   responders (>= 3.1.1)
@@ -1144,7 +1138,7 @@ DEPENDENCIES
   rubocop-rails
   rubocop-rspec
   ruby-openai
-  ruby_llm (>= 1.14.1)
+  ruby_llm (>= 1.8.2)
   ruby_llm-schema
   scout_apm
   scss_lint

app/builders/account_builder.rb

@@ -44,11 +44,7 @@ class AccountBuilder
   end
 
   def create_account
-    @account = Account.create!(
-      name: account_name,
-      locale: I18n.locale,
-      custom_attributes: { 'onboarding_step' => 'account_details' }
-    )
+    @account = Account.create!(name: account_name, locale: I18n.locale)
     Current.account = @account
   end
 

app/builders/agent_builder.rb

@@ -29,9 +29,8 @@ class AgentBuilder
     user = User.from_email(email)
     return user if user
 
-    @name = email.split('@').first if @name.blank?
     temp_password = "1!aA#{SecureRandom.alphanumeric(12)}"
-    User.create!(email: email, name: @name, password: temp_password, password_confirmation: temp_password)
+    User.create!(email: email, name: name, password: temp_password, password_confirmation: temp_password)
   end
 
   # Checks if the user needs confirmation.

app/builders/messages/instagram/base_message_builder.rb

@@ -1,4 +1,6 @@
 class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuilder
+  include ::Messages::Instagram::StoryReplyAttachmentHandling
+
   attr_reader :messaging
 
   def initialize(messaging, inbox, outgoing_echo: false)
@@ -115,24 +117,6 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
     create_story_reply_attachment(story_reply_attributes['url'])
   end
 
-  def create_story_reply_attachment(story_url)
-    return if story_url.blank?
-
-    attachment = @message.attachments.new(
-      file_type: :ig_story,
-      account_id: @message.account_id,
-      external_url: story_url
-    )
-    attachment.save!
-    begin
-      attach_file(attachment, story_url)
-    rescue Down::Error, StandardError => e
-      Rails.logger.warn "Failed to download Instagram story attachment: #{e.message}"
-    end
-    @message.content_attributes[:image_type] = 'ig_story_reply'
-    @message.save!
-  end
-
   def build_conversation
     @contact_inbox ||= contact.contact_inboxes.find_by!(source_id: message_source_id)
     Conversation.create!(conversation_params.merge(

app/builders/messages/instagram/story_reply_attachment_handling.rb

@@ -0,0 +1,55 @@
+module Messages::Instagram::StoryReplyAttachmentHandling
+  private
+
+  def create_story_reply_attachment(story_url)
+    return if story_url.blank?
+
+    attach_story_reply_file(build_story_reply_attachment(story_url), story_url)
+    update_story_reply_message
+  end
+
+  def build_story_reply_attachment(story_url)
+    @message.attachments.new(
+      file_type: :ig_story,
+      account_id: @message.account_id,
+      external_url: story_url
+    )
+  end
+
+  def attach_story_reply_file(attachment, story_url)
+    downloaded_file = nil
+
+    SafeFetch.fetch(story_url, allowed_content_types: Attachment::ACCEPTABLE_FILE_TYPES) do |attachment_file|
+      downloaded_file = attachment_file
+      persist_story_reply_attachment(attachment, attachment_file)
+    end
+  rescue SafeFetch::Error => e
+    Rails.logger.info "Error downloading Messenger attachment from #{story_url}: #{e.message}: Skipping"
+    discard_story_reply_attachment(attachment)
+  rescue StandardError => e
+    Rails.logger.warn "Failed to download Instagram story attachment: #{e.message}"
+    discard_story_reply_attachment(attachment)
+  ensure
+    downloaded_file&.close!
+  end
+
+  def persist_story_reply_attachment(attachment, attachment_file)
+    attachment.file.attach(
+      io: attachment_file.tempfile,
+      filename: attachment_file.original_filename,
+      content_type: attachment_file.content_type
+    )
+    attachment.save!
+  end
+
+  def discard_story_reply_attachment(attachment)
+    return attachment.destroy if attachment.persisted?
+
+    @message.attachments.proxy_association.target.delete(attachment)
+  end
+
+  def update_story_reply_message
+    @message.content_attributes[:image_type] = 'ig_story_reply'
+    @message.save!
+  end
+end

app/builders/messages/messenger/message_builder.rb

@@ -5,14 +5,46 @@ class Messages::Messenger::MessageBuilder
     # This check handles very rare case if there are multiple files to attach with only one unsupported file
     return if unsupported_file_type?(attachment['type'])
 
+    attachment_obj, downloaded_file = prepare_attachment(attachment)
+    return unless attachment_obj
+
+    finalize_attachment(attachment_obj)
+  ensure
+    downloaded_file&.close!
+  end
+
+  def prepare_attachment(attachment)
     params = attachment_params(attachment)
     attachment_obj = @message.attachments.new(params.except(:remote_file_url))
+    downloaded_file = persist_attachment(attachment, attachment_obj, params[:remote_file_url])
+    return [nil, downloaded_file] if params[:remote_file_url].present? && downloaded_file.blank?
+
+    [attachment_obj, downloaded_file]
+  end
+
+  def persist_attachment(attachment, attachment_obj, remote_file_url)
+    return save_facebook_reel_attachment(attachment, attachment_obj) if facebook_reel?(attachment)
+    return save_remote_file_attachment(attachment_obj, remote_file_url) if remote_file_url.present?
+
     attachment_obj.save!
-    if facebook_reel?(attachment)
-      update_facebook_reel_content(attachment)
-    elsif params[:remote_file_url]
-      attach_file(attachment_obj, params[:remote_file_url])
-    end
+    nil
+  end
+
+  def save_facebook_reel_attachment(attachment, attachment_obj)
+    attachment_obj.save!
+    update_facebook_reel_content(attachment)
+    nil
+  end
+
+  def save_remote_file_attachment(attachment_obj, remote_file_url)
+    downloaded_file = attach_file(attachment_obj, remote_file_url)
+    return if downloaded_file.blank?
+
+    attachment_obj.save!
+    downloaded_file
+  end
+
+  def finalize_attachment(attachment_obj)
     fetch_story_link(attachment_obj) if attachment_obj.file_type == 'story_mention'
     fetch_ig_story_link(attachment_obj) if attachment_obj.file_type == 'ig_story'
     fetch_ig_post_link(attachment_obj) if attachment_obj.file_type == 'ig_post'
@@ -20,14 +52,22 @@ class Messages::Messenger::MessageBuilder
   end
 
   def attach_file(attachment, file_url)
-    attachment_file = Down.download(
-      file_url
-    )
-    attachment.file.attach(
-      io: attachment_file,
-      filename: attachment_file.original_filename,
-      content_type: attachment_file.content_type
-    )
+    downloaded_file = nil
+    SafeFetch.fetch(
+      file_url,
+      allowed_content_types: Attachment::ACCEPTABLE_FILE_TYPES
+    ) do |attachment_file|
+      downloaded_file = attachment_file
+      attachment.file.attach(
+        io: attachment_file.tempfile,
+        filename: attachment_file.original_filename,
+        content_type: attachment_file.content_type
+      )
+    end
+    downloaded_file
+  rescue SafeFetch::Error => e
+    Rails.logger.info "Error downloading Messenger attachment from #{file_url}: #{e.message}: Skipping"
+    nil
   end
 
   def attachment_params(attachment)

app/controllers/api/v1/accounts/articles/bulk_actions_controller.rb

@@ -1,43 +0,0 @@
-class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::BaseController
-  before_action :portal
-  before_action :check_authorization
-  before_action :set_articles, only: [:update_status, :delete_articles]
-
-  def translate
-    head :not_implemented
-  end
-
-  def update_status
-    return render_could_not_create_error(I18n.t('portals.articles.no_articles_found')) if @articles.none?
-    return render_could_not_create_error(I18n.t('portals.articles.invalid_status')) unless Article.statuses.key?(params[:status])
-
-    ActiveRecord::Base.transaction do
-      @articles.find_each { |article| article.update!(status: params[:status]) }
-    end
-    head :ok
-  rescue ActiveRecord::RecordInvalid => e
-    render_could_not_create_error(e.message)
-  end
-
-  def delete_articles
-    return render_could_not_create_error(I18n.t('portals.articles.no_articles_found')) if @articles.none?
-
-    @articles.destroy_all
-    head :ok
-  end
-
-  private
-
-  def portal
-    @portal ||= Current.account.portals.find_by!(slug: params[:portal_id])
-  end
-
-  def check_authorization
-    authorize(Article, :create?)
-  end
-
-  def set_articles
-    @articles = @portal.articles.where(id: params[:ids])
-  end
-end
-Api::V1::Accounts::Articles::BulkActionsController.prepend_mod_with('Api::V1::Accounts::Articles::BulkActionsController')

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   sort_on :phone_number, type: :string
   sort_on :last_activity_at, internal_name: :order_on_last_activity_at, type: :scope, scope_params: [:direction]
   sort_on :created_at, internal_name: :order_on_created_at, type: :scope, scope_params: [:direction]
-  sort_on :company_name, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
+  sort_on :company, internal_name: :order_on_company_name, type: :scope, scope_params: [:direction]
   sort_on :city, internal_name: :order_on_city, type: :scope, scope_params: [:direction]
   sort_on :country, internal_name: :order_on_country_name, type: :scope, scope_params: [:direction]
 

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

@@ -1,7 +1,6 @@
 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,16 +18,7 @@ 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/api/v1/accounts/portals_controller.rb

@@ -61,8 +61,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
   end
 
   def process_attached_logo
-    blob = ActiveStorage::Blob.find_signed(params[:blob_id].to_s)
-    @portal.logo.attach(blob) if blob
+    blob_id = params[:blob_id]
+    blob = ActiveStorage::Blob.find_signed(blob_id)
+    @portal.logo.attach(blob)
   end
 
   private

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

@@ -21,6 +21,8 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   def create_from_url
     SafeFetch.fetch(params[:external_url].to_s) do |result|
       create_and_save_blob(result.tempfile, result.filename, result.content_type)
+    ensure
+      result.close!
     end
   rescue SafeFetch::HttpError => e
     render_error(I18n.t('errors.upload.fetch_failed_with_message', message: e.message), :unprocessable_entity)

app/controllers/api/v1/accounts_controller.rb

@@ -58,7 +58,6 @@ class Api::V1::AccountsController < Api::BaseController
     @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
     @account.settings.merge!(settings_params)
-    @account.custom_attributes.delete('onboarding_step') if @account.custom_attributes['onboarding_step'] == 'account_details'
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end
@@ -72,10 +71,9 @@ class Api::V1::AccountsController < Api::BaseController
   private
 
   def enqueue_branding_enrichment
-    email = account_params[:email].presence || @user&.email
-    return if email.blank?
+    return if account_params[:email].blank?
 
-    Account::BrandingEnrichmentJob.perform_later(@account.id, email)
+    Account::BrandingEnrichmentJob.perform_later(@account.id, account_params[:email])
     Redis::Alfred.set(format(Redis::Alfred::ACCOUNT_ONBOARDING_ENRICHMENT, account_id: @account.id), '1', ex: 30)
   rescue StandardError => e
     # Enrichment is optional — never let queue/Redis failures abort signup
@@ -111,7 +109,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role)
+    params.permit(:industry, :company_size, :timezone)
   end
 
   def settings_params

app/controllers/api/v1/profile/mfa_controller.rb

@@ -2,8 +2,8 @@ class Api::V1::Profile::MfaController < Api::BaseController
   before_action :check_mfa_feature_available
   before_action :check_mfa_enabled, only: [:destroy, :backup_codes]
   before_action :check_mfa_disabled, only: [:create, :verify]
-  before_action :validate_password, only: [:destroy]
   before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
+  before_action :validate_password, only: [:destroy]
 
   def show; end
 
@@ -48,8 +48,7 @@ class Api::V1::Profile::MfaController < Api::BaseController
   def validate_otp
     authenticated = Mfa::AuthenticationService.new(
       user: current_user,
-      otp_code: mfa_params[:otp_code],
-      backup_code: mfa_params[:backup_code]
+      otp_code: mfa_params[:otp_code]
     ).authenticate
 
     return if authenticated
@@ -64,6 +63,6 @@ class Api::V1::Profile::MfaController < Api::BaseController
   end
 
   def mfa_params
-    params.permit(:otp_code, :backup_code, :password)
+    params.permit(:otp_code, :password)
   end
 end

app/controllers/concerns/meta_token_verify_concern.rb

@@ -2,10 +2,6 @@
 # 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'])
@@ -18,53 +14,6 @@ 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,17 +80,10 @@ 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,
-      ACTIVE_PLATFORM_BANNERS: active_platform_banners
+      ALLOWED_LOGIN_METHODS: allowed_login_methods
     }
   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,14 +25,6 @@ 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/platform/api/v1/agent_bots_controller.rb

@@ -3,7 +3,7 @@ class Platform::Api::V1::AgentBotsController < PlatformController
   before_action :validate_platform_app_permissible, except: [:index, :create]
 
   def index
-    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').includes(:permissible)
+    @resources = @platform_app.platform_app_permissibles.where(permissible_type: 'AgentBot').all
   end
 
   def show; end

app/controllers/super_admin/platform_banners_controller.rb

@@ -1,9 +0,0 @@
-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,8 +1,6 @@
 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?
@@ -41,38 +39,4 @@ 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,8 +1,6 @@
 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]}")
@@ -22,45 +20,6 @@ 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

@@ -1,20 +0,0 @@
-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,15 +7,11 @@ 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).to_i > 1
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 
   def last_name
-    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size).to_i > 1
+    @obj.try(:name).try(:split).try(:last).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 end

app/finders/message_finder.rb

@@ -48,5 +48,3 @@ 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,12 +17,15 @@ module Api::V1::InboxesHelper
   def validate_imap(channel_data)
     return unless channel_data.key?('imap_enabled') && channel_data[:imap_enabled]
 
-    # Validate the user-selected auth mechanism before opening the connection.
-    authentication = Imap::Authentication.validate_user_configurable!(channel_data[:imap_authentication])
+    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
 
-    # 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)
+    check_imap_connection(channel_data)
   end
 
   def validate_smtp(channel_data)
@@ -34,8 +37,8 @@ module Api::V1::InboxesHelper
     check_smtp_connection(channel_data, smtp)
   end
 
-  def check_imap_connection(channel_data, authentication)
-    imap = open_imap_connection(channel_data, authentication)
+  def check_imap_connection(channel_data)
+    Mail.connection {} # rubocop:disable:block
   rescue SocketError => e
     raise StandardError, I18n.t('errors.inboxes.imap.socket_error')
   rescue Net::IMAP::NoResponseError => e
@@ -50,20 +53,9 @@ 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/helpers/email_helper.rb

@@ -7,7 +7,7 @@ module EmailHelper
   def render_email_html(content)
     return '' if content.blank?
 
-    ChatwootMarkdownRenderer.new(content).render_message(hardbreaks: true).to_s
+    ChatwootMarkdownRenderer.new(content).render_message.to_s
   end
 
   # Raise a standard error if any email address is invalid

app/javascript/dashboard/App.vue

@@ -3,7 +3,6 @@ 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';
@@ -28,7 +27,6 @@ export default {
     LoadingState,
     NetworkNotification,
     UpdateBanner,
-    StatusBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
@@ -61,6 +59,7 @@ export default {
       isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
+      accountUIFlags: 'accounts/getUIFlags',
     }),
     hideOnOnboardingView() {
       return !isOnOnboardingView(this.$route);
@@ -108,9 +107,8 @@ export default {
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
-      const account = this.getAccount(this.currentAccountId);
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        account;
+        this.getAccount(this.currentAccountId);
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       // If user locale is set, use it; otherwise use account locale
       this.setLocale(this.uiSettings?.locale || locale);
@@ -133,13 +131,12 @@ export default {
 
 <template>
   <div
-    v-if="!authUIFlags.isFetching"
+    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
     class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :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, callSid }) {
+  async joinClientCall({ to, conversationId }) {
     if (!this.device || !this.initialized || !to) return null;
     if (this.activeConnection) return this.activeConnection;
 
@@ -76,7 +76,6 @@ 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, callSid }) {
+  leaveConference(inboxId, conversationId) {
     return axios
       .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
-        params: { conversation_id: conversationId, call_sid: callSid },
+        params: { conversation_id: conversationId },
       })
       .then(r => r.data);
   }

app/javascript/dashboard/api/companies.js

@@ -1,12 +1,21 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
-const buildParams = params =>
-  new URLSearchParams(
-    Object.entries(params).filter(
-      ([key, value]) => value !== undefined && (value !== '' || key === 'q')
-    )
-  ).toString();
+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;
+};
 
 class CompanyAPI extends ApiClient {
   constructor() {
@@ -15,41 +24,14 @@ class CompanyAPI extends ApiClient {
 
   get(params = {}) {
     const { page = 1, sort = 'name' } = params;
-    const requestURL = `${this.url}?${buildParams({ page, sort })}`;
+    const requestURL = `${this.url}?${buildCompanyParams(page, sort)}`;
     return axios.get(requestURL);
   }
 
   search(query = '', page = 1, sort = 'name') {
-    const requestURL = `${this.url}/search?${buildParams({ q: query, page, sort })}`;
+    const requestURL = `${this.url}/search?${buildSearchParams(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/helpCenter/articles.js

@@ -72,27 +72,6 @@ class ArticlesAPI extends PortalsAPI {
       category_slug: categorySlug,
     });
   }
-
-  bulkTranslate({ portalSlug, articleIds, locale, categoryId, force = false }) {
-    return axios.post(
-      `${this.url}/${portalSlug}/articles/bulk_actions/translate`,
-      { ids: articleIds, locale, category_id: categoryId, force }
-    );
-  }
-
-  bulkUpdateStatus({ portalSlug, articleIds, status }) {
-    return axios.patch(
-      `${this.url}/${portalSlug}/articles/bulk_actions/update_status`,
-      { ids: articleIds, status }
-    );
-  }
-
-  bulkDelete({ portalSlug, articleIds }) {
-    return axios.delete(
-      `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,
-      { data: { ids: articleIds } }
-    );
-  }
 }
 
 export default new ArticlesAPI();

app/javascript/dashboard/api/mfa.js

@@ -14,9 +14,9 @@ class MfaAPI extends ApiClient {
     return axios.post(`${this.url}/verify`, { otp_code: otpCode });
   }
 
-  disable(password, { otpCode, backupCode } = {}) {
+  disable(password, otpCode) {
     return axios.delete(this.url, {
-      data: { password, otp_code: otpCode, backup_code: backupCode },
+      data: { password, otp_code: otpCode },
     });
   }
 

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

@@ -1,4 +1,7 @@
-import companyAPI from '../companies';
+import companyAPI, {
+  buildCompanyParams,
+  buildSearchParams,
+} from '../companies';
 import ApiClient from '../ApiClient';
 
 describe('#CompanyAPI', () => {
@@ -6,6 +9,7 @@ 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');
@@ -28,69 +32,111 @@ describe('#CompanyAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('#get includes pagination and sorting params', () => {
+    it('#get with default params', () => {
       companyAPI.get({});
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies?page=1&sort=name'
       );
     });
 
-    it('#search encodes query params', () => {
-      companyAPI.search('acme & co', 2, 'domain');
+    it('#get with page and sort params', () => {
+      companyAPI.get({ page: 2, sort: 'domain' });
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme+%26+co&page=2&sort=domain'
+        '/api/v1/companies?page=2&sort=domain'
       );
     });
 
-    it('#search keeps empty query param for backend validation', () => {
+    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', () => {
+      companyAPI.search('acme & co', 2, 'domain');
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/search?q=acme%20%26%20co&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', () => {
       companyAPI.search('', 1, 'name');
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies/search?q=&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'] }
-      );
-    });
+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'
+    );
   });
 });

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

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

@@ -1,115 +0,0 @@
-<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,7 +2,6 @@
 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 },
@@ -12,7 +11,7 @@ defineProps({
   activeOrdering: { type: String, default: '' },
 });
 
-const emit = defineEmits(['search', 'update:sort', 'create']);
+const emit = defineEmits(['search', 'update:sort']);
 </script>
 
 <template>
@@ -20,15 +19,22 @@ const emit = defineEmits(['search', 'update:sort', 'create']);
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-heading-1 truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
+      <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 v-if="showSearch" class="flex items-center gap-2 w-full">
           <Input
             :model-value="searchValue"
             type="search"
-            :placeholder="$t('COMPANIES.SEARCH_PLACEHOLDER')"
+            :placeholder="$t('CONTACTS_LAYOUT.HEADER.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',
             ]"
@@ -43,14 +49,6 @@ const emit = defineEmits(['search', 'update:sort', 'create']);
             </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

@@ -1,45 +0,0 @@
-<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,10 +35,6 @@ 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',
@@ -105,7 +101,6 @@ const handleOrderChange = value => {
           :model-value="activeSort"
           :options="sortMenus"
           :label="activeSortLabel"
-          sub-menu-position="left"
           @update:model-value="handleSortChange"
         />
       </div>
@@ -117,7 +112,6 @@ 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,12 +12,7 @@ defineProps({
   showPaginationFooter: { type: Boolean, default: true },
 });
 
-const emit = defineEmits([
-  'update:currentPage',
-  'update:sort',
-  'search',
-  'create',
-]);
+const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -36,7 +31,6 @@ 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

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

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

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

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

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

@@ -1,45 +0,0 @@
-<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/Contacts/ContactsCard/ContactsCard.vue

@@ -51,6 +51,7 @@ const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
 
 const countriesMap = computed(() => {
   return countries.reduce((acc, country) => {
+    acc[country.code] = country;
     acc[country.id] = country;
     return acc;
   }, {});

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

@@ -3,7 +3,7 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
@@ -34,7 +34,9 @@ const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
 const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(isVoiceCallEnabled)
+  (inboxesList.value || []).filter(
+    inbox => inbox.channel_type === INBOX_TYPES.VOICE
+  )
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 

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

@@ -35,16 +35,10 @@ const emit = defineEmits([
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
 const showLabelsSection = computed(() => props.chat.labels?.length > 0);
 
-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 voiceCallData = computed(() => ({
+  status: props.chat.additional_attributes?.call_status,
+  direction: props.chat.additional_attributes?.call_direction,
+}));
 
 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"
-        @enter="handleInputUpdate"
+        @keyup.enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"

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

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

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

@@ -9,15 +9,11 @@ import {
   ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper';
 
-import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConfig } from 'dashboard/composables/useConfig';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
-import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
   id: {
@@ -48,46 +44,14 @@ const props = defineProps({
     type: Number,
     required: true,
   },
-  isSelected: {
-    type: Boolean,
-    default: false,
-  },
-  selectable: {
-    type: Boolean,
-    default: false,
-  },
-  showSelectionControl: {
-    type: Boolean,
-    default: false,
-  },
 });
 
-const emit = defineEmits([
-  'openArticle',
-  'articleAction',
-  'toggleSelect',
-  'hover',
-]);
+const emit = defineEmits(['openArticle', 'articleAction']);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-const { isEnterprise } = useConfig();
-
-const isTranslationAvailable = computed(
-  () =>
-    isEnterprise &&
-    isFeatureEnabledonAccount.value(
-      currentAccountId.value,
-      FEATURE_FLAGS.CAPTAIN_TASKS
-    )
-);
-
 const articleMenuItems = computed(() => {
   const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
     (acc, [key, item]) => {
@@ -100,9 +64,7 @@ const articleMenuItems = computed(() => {
   const statusItems = (
     ARTICLE_MENU_OPTIONS[props.status] ||
     ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
-  )
-    .filter(key => key !== 'translate' || isTranslationAvailable.value)
-    .map(key => commonItems[key]);
+  ).map(key => commonItems[key]);
 
   return [...statusItems, commonItems.delete];
 });
@@ -161,27 +123,14 @@ const handleClick = id => {
 </script>
 
 <template>
-  <CardLayout
-    :selectable="selectable"
-    class="relative"
-    @mouseenter="emit('hover', true)"
-    @mouseleave="emit('hover', false)"
-  >
-    <div
-      v-show="showSelectionControl"
-      class="absolute top-7 ltr:left-3 rtl:right-3"
-    >
-      <Checkbox :model-value="isSelected" @change="emit('toggleSelect', id)" />
-    </div>
+  <CardLayout>
     <div class="flex justify-between w-full gap-1">
-      <div class="flex items-center gap-2 min-w-0">
-        <span
-          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
-          @click="handleClick(id)"
-        >
-          {{ title }}
-        </span>
-      </div>
+      <span
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
+        @click="handleClick(id)"
+      >
+        {{ title }}
+      </span>
       <div class="flex items-center gap-2">
         <span
           class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"

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

@@ -121,7 +121,7 @@ const handleCreateArticle = event => {
           custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
-          :autofocus="isNewArticle"
+          autofocus
           @blur="handleCreateArticle"
         />
         <ArticleEditorControls
@@ -138,7 +138,7 @@ const handleCreateArticle = event => {
           t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
         "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="!isNewArticle"
+        :autofocus="false"
       />
     </template>
   </HelpCenterLayout>

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 ltr:left-0 rtl:right-0 top-full max-h-60"
+          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-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] left-0 top-full max-h-60"
+          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
           @action="handleArticleAction"
         />
       </OnClickOutside>

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

@@ -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 xl:right-0 top-full max-h-60"
+              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto 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 xl:right-0 top-full max-h-60"
+              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
               @action="handleCategoryAction"
             />
           </OnClickOutside>

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

@@ -20,14 +20,8 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  selectedArticleIds: {
-    type: Set,
-    default: () => new Set(),
-  },
 });
 
-const emit = defineEmits(['translateArticle', 'toggleSelect']);
-
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 const router = useRouter();
@@ -36,26 +30,12 @@ const store = useStore();
 const { t } = useI18n();
 
 const localArticles = ref(props.articles);
-const hoveredArticleId = ref(null);
 
 const dragEnabled = computed(() => {
-  return (
-    props.isCategoryArticles &&
-    localArticles.value?.length > 1 &&
-    props.selectedArticleIds.size === 0
-  );
+  // Enable dragging only for category articles and when there's more than one article
+  return props.isCategoryArticles && localArticles.value?.length > 1;
 });
 
-const hasBulkSelection = computed(() => props.selectedArticleIds.size > 0);
-
-const shouldShowSelectionControl = id => {
-  return hoveredArticleId.value === id || hasBulkSelection.value;
-};
-
-const handleCardHover = (isHovered, id) => {
-  hoveredArticleId.value = isHovered ? id : null;
-};
-
 const getCategoryById = useMapGetter('categories/categoryById');
 
 const openArticle = id => {
@@ -172,10 +152,6 @@ const handleArticleAction = async (action, { status, id }) => {
 };
 
 const updateArticle = ({ action, value, id }) => {
-  if (action === 'translate') {
-    emit('translateArticle', id);
-    return;
-  }
   const status = action !== 'delete' ? getArticleStatus(value) : null;
   handleArticleAction(action, { status, id });
 };
@@ -211,14 +187,9 @@ watch(
           :category="getCategory(element.category.id)"
           :views="element.views || 0"
           :updated-at="element.updatedAt"
-          :is-selected="selectedArticleIds.has(element.id)"
-          selectable
-          :show-selection-control="shouldShowSelectionControl(element.id)"
           :class="{ 'cursor-grab': dragEnabled }"
           @open-article="openArticle"
           @article-action="updateArticle"
-          @toggle-select="emit('toggleSelect', $event)"
-          @hover="isHovered => handleCardHover(isHovered, element.id)"
         />
       </li>
     </template>

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

@@ -1,13 +1,9 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store.js';
-import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useAlert } from 'dashboard/composables';
-import articlesAPI from 'dashboard/api/helpCenter/articles';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
@@ -15,10 +11,6 @@ import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/Ar
 import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
-import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import BulkTranslateDialog from './BulkTranslateDialog.vue';
 
 const props = defineProps({
   articles: {
@@ -47,7 +39,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['pageChange', 'fetchPortal', 'refreshArticles']);
+const emit = defineEmits(['pageChange', 'fetchPortal']);
 
 const router = useRouter();
 const route = useRoute();
@@ -55,42 +47,6 @@ const { t } = useI18n();
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isFetching = useMapGetter('articles/isFetching');
-const currentAccountId = useMapGetter('getCurrentAccountId');
-const isFeatureEnabledonAccount = useMapGetter(
-  'accounts/isFeatureEnabledonAccount'
-);
-
-const selectedArticleIds = ref(new Set());
-const deleteConfirmDialogRef = ref(null);
-
-const { isEnterprise } = useConfig();
-
-const isTranslationAvailable = computed(
-  () =>
-    isEnterprise &&
-    isFeatureEnabledonAccount.value(
-      currentAccountId.value,
-      FEATURE_FLAGS.CAPTAIN_TASKS
-    )
-);
-
-const allItems = computed(() => props.articles.map(a => ({ id: a.id })));
-const visibleArticleIds = computed(() => props.articles.map(a => a.id));
-
-const selectAllLabel = computed(() => {
-  if (!visibleArticleIds.value.length) return '';
-  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECT_ALL', {
-    count: visibleArticleIds.value.length,
-  });
-});
-
-const selectedCountLabel = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECTED_COUNT', {
-    count: selectedArticleIds.value.size,
-  })
-);
-
-const bulkTranslateDialogRef = ref(null);
 
 const hasNoArticles = computed(
   () => !isFetching.value && !props.articles.length
@@ -172,80 +128,6 @@ const navigateToNewArticlePage = () => {
     params: { categorySlug, locale },
   });
 };
-
-const handleToggleSelect = articleId => {
-  const newSet = new Set(selectedArticleIds.value);
-  if (newSet.has(articleId)) {
-    newSet.delete(articleId);
-  } else {
-    newSet.add(articleId);
-  }
-  selectedArticleIds.value = newSet;
-};
-
-const clearSelection = () => {
-  selectedArticleIds.value = new Set();
-};
-
-const handleTranslateArticle = articleId => {
-  selectedArticleIds.value = new Set([articleId]);
-  bulkTranslateDialogRef.value?.dialogRef?.open();
-};
-
-const openTranslateDialog = () => {
-  bulkTranslateDialogRef.value?.dialogRef?.open();
-};
-
-const onBulkActionSuccess = message => {
-  useAlert(message);
-  clearSelection();
-  emit('refreshArticles');
-};
-
-const bulkUpdateStatus = async status => {
-  try {
-    await articlesAPI.bulkUpdateStatus({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      status,
-    });
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
-    );
-  }
-};
-
-const confirmBulkDelete = () => {
-  deleteConfirmDialogRef.value?.open();
-};
-
-const bulkDelete = async () => {
-  try {
-    await articlesAPI.bulkDelete({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-    });
-    deleteConfirmDialogRef.value?.close();
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_SUCCESS')
-    );
-  } catch (error) {
-    deleteConfirmDialogRef.value?.close();
-    useAlert(
-      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_ERROR')
-    );
-  }
-};
-
-// Clear selection when articles change (page change, filter change)
-watch(
-  () => props.articles,
-  () => clearSelection()
-);
 </script>
 
 <template>
@@ -284,91 +166,11 @@ watch(
       >
         <Spinner />
       </div>
-      <template v-else-if="!hasNoArticles">
-        <div
-          v-if="selectedArticleIds.size > 0"
-          class="sticky top-0 z-[5] bg-gradient-to-b from-n-surface-1 from-90% to-transparent pt-1 pb-2"
-        >
-          <BulkSelectBar
-            v-model="selectedArticleIds"
-            :all-items="allItems"
-            :select-all-label="selectAllLabel"
-            :selected-count-label="selectedCountLabel"
-            class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
-          >
-            <template #secondaryActions>
-              <Button
-                sm
-                ghost
-                slate
-                :label="
-                  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CLEAR_SELECTION')
-                "
-                class="!px-1.5"
-                @click="clearSelection"
-              />
-            </template>
-            <template #actions>
-              <div class="flex items-center gap-2 ml-auto">
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-check"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.PUBLISH')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('published')"
-                />
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-pencil-line"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DRAFT')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('draft')"
-                />
-                <Button
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-archive-restore"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.ARCHIVE')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="bulkUpdateStatus('archived')"
-                />
-                <Button
-                  v-if="isTranslationAvailable"
-                  sm
-                  faded
-                  slate
-                  icon="i-lucide-languages"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.TRANSLATE')"
-                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                  @click="openTranslateDialog"
-                />
-                <Button
-                  sm
-                  faded
-                  ruby
-                  icon="i-lucide-trash"
-                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE')"
-                  class="!px-1.5 [&>span:nth-child(2)]:hidden"
-                  @click="confirmBulkDelete"
-                />
-              </div>
-            </template>
-          </BulkSelectBar>
-        </div>
-        <ArticleList
-          :articles="articles"
-          :is-category-articles="isCategoryArticles"
-          :selected-article-ids="selectedArticleIds"
-          class="relative z-0"
-          @translate-article="handleTranslateArticle"
-          @toggle-select="handleToggleSelect"
-        />
-      </template>
+      <ArticleList
+        v-else-if="!hasNoArticles"
+        :articles="articles"
+        :is-category-articles="isCategoryArticles"
+      />
       <ArticleEmptyState
         v-else
         class="pt-14"
@@ -381,31 +183,5 @@ watch(
         @click="navigateToNewArticlePage"
       />
     </template>
-    <BulkTranslateDialog
-      ref="bulkTranslateDialogRef"
-      :selected-article-ids="[...selectedArticleIds]"
-      :allowed-locales="allowedLocales"
-      @translate-started="clearSelection"
-    />
-    <Dialog
-      ref="deleteConfirmDialogRef"
-      type="alert"
-      :title="
-        t(
-          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_TITLE',
-          selectedArticleIds.size
-        )
-      "
-      :description="
-        t(
-          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_DESCRIPTION',
-          selectedArticleIds.size
-        )
-      "
-      :confirm-button-label="
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM')
-      "
-      @confirm="bulkDelete"
-    />
   </HelpCenterLayout>
 </template>

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

@@ -1,249 +0,0 @@
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import categoriesAPI from 'dashboard/api/helpCenter/categories.js';
-
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-
-const props = defineProps({
-  selectedArticleIds: {
-    type: Array,
-    default: () => [],
-  },
-  allowedLocales: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emit = defineEmits(['translateStarted']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const dialogRef = ref(null);
-const isSubmitting = ref(false);
-const selectedLocale = ref('');
-const selectedCategoryId = ref('');
-const targetCategories = ref([]);
-const isFetchingCategories = ref(false);
-const duplicateArticles = ref([]);
-
-const currentLocale = computed(() => route.params.locale);
-
-const localeOptions = computed(() => {
-  return props.allowedLocales
-    .filter(locale => locale.code !== currentLocale.value)
-    .map(locale => ({
-      value: locale.code,
-      label: `${locale.name} (${locale.code})`,
-    }));
-});
-
-const categoryOptions = computed(() => {
-  return targetCategories.value.map(category => ({
-    value: category.id,
-    label: category.name,
-  }));
-});
-
-const articleCount = computed(() => props.selectedArticleIds.length);
-
-const dialogTitle = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.TITLE', articleCount.value)
-);
-
-const description = computed(() =>
-  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DESCRIPTION', articleCount.value)
-);
-
-const hasDuplicates = computed(() => duplicateArticles.value.length > 0);
-
-const confirmLabel = computed(() => {
-  if (hasDuplicates.value) {
-    return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM_OVERWRITE');
-  }
-  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM');
-});
-
-const isConfirmDisabled = computed(() => {
-  return !selectedLocale.value || isSubmitting.value;
-});
-
-const articleEditUrl = articleId => {
-  const { portalSlug, categorySlug, tab } = route.params;
-  const resolved = router.resolve({
-    name: 'portals_articles_edit',
-    params: {
-      portalSlug,
-      locale: selectedLocale.value,
-      categorySlug,
-      tab,
-      articleSlug: articleId,
-    },
-  });
-  return resolved.href;
-};
-
-const fetchCategoriesForLocale = async locale => {
-  if (!locale) {
-    targetCategories.value = [];
-    return;
-  }
-
-  isFetchingCategories.value = true;
-  try {
-    const { data } = await categoriesAPI.get({
-      portalSlug: route.params.portalSlug,
-      locale,
-    });
-    targetCategories.value = data.payload;
-  } catch {
-    targetCategories.value = [];
-  } finally {
-    isFetchingCategories.value = false;
-  }
-};
-
-watch(selectedLocale, newLocale => {
-  selectedCategoryId.value = '';
-  duplicateArticles.value = [];
-  fetchCategoriesForLocale(newLocale);
-});
-
-const resetForm = () => {
-  selectedLocale.value = '';
-  selectedCategoryId.value = '';
-  targetCategories.value = [];
-  duplicateArticles.value = [];
-};
-
-const submitTranslation = async (force = false) => {
-  isSubmitting.value = true;
-  try {
-    await store.dispatch('articles/bulkTranslate', {
-      portalSlug: route.params.portalSlug,
-      articleIds: props.selectedArticleIds,
-      locale: selectedLocale.value,
-      categoryId: selectedCategoryId.value,
-      force,
-    });
-
-    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.SUCCESS_MESSAGE'));
-    resetForm();
-    dialogRef.value?.close();
-    emit('translateStarted');
-  } catch (error) {
-    if (error.response?.status === 409) {
-      duplicateArticles.value = error.response.data.duplicate_articles;
-      return;
-    }
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.ERROR_MESSAGE')
-    );
-  } finally {
-    isSubmitting.value = false;
-  }
-};
-
-const onConfirm = () => {
-  if (isConfirmDisabled.value) return;
-  submitTranslation(hasDuplicates.value);
-};
-
-defineExpose({ dialogRef });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="dialogTitle"
-    :description="description"
-    :confirm-button-label="confirmLabel"
-    :disable-confirm-button="isConfirmDisabled"
-    :is-loading="isSubmitting"
-    @close="resetForm"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-col gap-2">
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_LABEL') }}
-        </span>
-        <ComboBox
-          v-model="selectedLocale"
-          :options="localeOptions"
-          :placeholder="
-            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_PLACEHOLDER')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
-        />
-      </div>
-      <div class="flex flex-col gap-2">
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_LABEL') }}
-          <span class="text-n-slate-10 font-normal">
-            {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.OPTIONAL') }}
-          </span>
-        </span>
-        <ComboBox
-          v-model="selectedCategoryId"
-          :options="categoryOptions"
-          :disabled="!selectedLocale || isFetchingCategories"
-          :placeholder="
-            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_PLACEHOLDER')
-          "
-          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
-        />
-      </div>
-      <div
-        v-if="hasDuplicates"
-        class="flex gap-3 p-3 rounded-xl bg-n-amber-2 border border-n-amber-5"
-      >
-        <Icon
-          icon="i-lucide-triangle-alert"
-          class="size-4 mt-0.5 text-n-amber-11 shrink-0"
-        />
-        <div class="flex flex-col gap-2 min-w-0">
-          <p class="text-sm text-n-amber-12 m-0">
-            {{
-              t(
-                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_WARNING',
-                duplicateArticles.length
-              )
-            }}
-          </p>
-          <div class="flex flex-col gap-1">
-            <a
-              v-for="article in duplicateArticles"
-              :key="article.id"
-              :href="articleEditUrl(article.id)"
-              target="_blank"
-              rel="noopener noreferrer"
-              class="inline-flex items-center gap-1 text-sm text-n-amber-12 underline underline-offset-2 hover:text-n-amber-11 truncate"
-            >
-              {{ article.title }}
-              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
-            </a>
-          </div>
-          <p class="text-xs text-n-amber-11 m-0">
-            {{
-              t(
-                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_CONFIRM_HINT'
-              )
-            }}
-          </p>
-        </div>
-      </div>
-    </div>
-  </Dialog>
-</template>

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 xl:right-0 top-full max-h-60"
+            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
             @action="handleLocaleAction"
           />
         </OnClickOutside>

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

@@ -8,6 +8,8 @@ import { useEventListener } from '@vueuse/core';
 import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import FileUpload from 'vue-upload-component';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
 import ContentTemplateSelector from './ContentTemplateSelector.vue';
@@ -28,7 +30,6 @@ const props = defineProps({
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
   inboxId: { type: Number, default: null },
-  voiceEnabled: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -81,9 +82,11 @@ const isRegularMessageMode = computed(() => {
   return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
 });
 
+const isVoiceInbox = computed(() => props.channelType === INBOX_TYPES.VOICE);
+
 const shouldShowSignatureButton = computed(() => {
   return (
-    props.hasSelectedInbox && isRegularMessageMode.value && !props.voiceEnabled
+    props.hasSelectedInbox && isRegularMessageMode.value && !isVoiceInbox.value
   );
 });
 
@@ -108,7 +111,7 @@ watch(
   () => props.hasSelectedInbox,
   newValue => {
     nextTick(() => {
-      if (newValue && !props.voiceEnabled) setSignature();
+      if (newValue && !isVoiceInbox.value) setSignature();
     });
   },
   { immediate: true }

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

@@ -2,7 +2,7 @@
 import { ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
-import { INBOX_TYPES, isVoiceCallEnabled } from 'dashboard/helper/inbox';
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import {
   appendSignature,
   removeSignature,
@@ -100,8 +100,6 @@ const inboxChannelType = computed(() => props.targetInbox?.channelType || '');
 
 const inboxMedium = computed(() => props.targetInbox?.medium || '');
 
-const voiceCallEnabled = computed(() => isVoiceCallEnabled(props.targetInbox));
-
 const effectiveChannelType = computed(() =>
   getEffectiveChannelType(inboxChannelType.value, inboxMedium.value)
 );
@@ -444,7 +442,6 @@ useKeyboardEvents({
       :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
       :message-templates="whatsappMessageTemplates"
       :channel-type="inboxChannelType"
-      :voice-enabled="voiceCallEnabled"
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"

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 max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
+        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"
         @action="emit('handleInboxAction', $event)"
       />
     </div>

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -47,6 +47,9 @@ 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 => {
@@ -92,12 +95,10 @@ 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="$slots.secondaryActions" name="secondaryActions" />
-        <div v-if="$slots.secondaryActions" class="h-4 w-px bg-n-strong" />
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" 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,6 +10,9 @@ const props = defineProps({
   menuItems: {
     type: Array,
     default: () => [],
+    validator: value => {
+      return value.every(item => item.action && item.value && item.label);
+    },
   },
   menuSections: {
     type: Array,
@@ -19,10 +22,6 @@ const props = defineProps({
     type: Number,
     default: 20,
   },
-  roundedThumbnail: {
-    type: Boolean,
-    default: true,
-  },
   showSearch: {
     type: Boolean,
     default: false,
@@ -43,17 +42,9 @@ 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', 'empty']);
+const emit = defineEmits(['action', 'search']);
 
 const { t } = useI18n();
 
@@ -105,13 +96,9 @@ const filteredMenuSections = computed(() => {
 });
 
 const handleSearchInput = event => {
-  emit('search', event.target.value);
-
-  const isEmpty = hasSections.value
-    ? filteredMenuSections.value.length === 0
-    : filteredMenuItems.value.length === 0;
-
-  if (isEmpty) emit('empty');
+  if (props.disableLocalFiltering) {
+    emit('search', event.target.value);
+  }
 };
 
 const handleAction = item => {
@@ -136,104 +123,57 @@ onMounted(() => {
 
 <template>
   <div
-    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"
+    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,
+    }"
   >
-    <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
+      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>
-    <div class="flex flex-col gap-2 overflow-y-auto min-h-0 px-2 pb-2">
-      <template v-if="hasSections">
+    <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
-          v-for="(section, sectionIndex) in filteredMenuSections"
-          :key="section.title || sectionIndex"
-          class="flex flex-col gap-1"
+          v-if="section.isLoading"
+          class="flex items-center justify-center py-2"
         >
-          <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, index) in filteredMenuItems"
-          :key="index"
+          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="{
@@ -250,44 +190,77 @@ onMounted(() => {
               :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"
+              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>
-          <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" />
+          <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')
-            : searchQuery
-              ? t('DROPDOWN_MENU.EMPTY_STATE')
-              : t(emptyStateMessage)
-        }}
+        <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)"
+      >
+        <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')
+      }}
     </div>
-    <div v-if="$slots.footer" class="shrink-0">
-      <slot name="footer" />
-    </div>
+    <slot name="footer" />
   </div>
 </template>

app/javascript/dashboard/components-next/filter/contactProvider.js

@@ -135,16 +135,6 @@ export function useContactFilterContext() {
       filterOperators: containmentOperators.value,
       attributeModel: 'standard',
     },
-    {
-      attributeKey: CONTACT_ATTRIBUTES.COMPANY_NAME,
-      value: CONTACT_ATTRIBUTES.COMPANY_NAME,
-      attributeName: t('CONTACTS_LAYOUT.FILTER.COMPANY'),
-      label: t('CONTACTS_LAYOUT.FILTER.COMPANY'),
-      inputType: 'plainText',
-      dataType: 'text',
-      filterOperators: containmentOperators.value,
-      attributeModel: 'standard',
-    },
     {
       attributeKey: CONTACT_ATTRIBUTES.CREATED_AT,
       value: CONTACT_ATTRIBUTES.CREATED_AT,

app/javascript/dashboard/components-next/filter/helper/filterHelper.js

@@ -23,7 +23,6 @@ export const CONTACT_ATTRIBUTES = {
   IDENTIFIER: 'identifier',
   COUNTRY_CODE: 'country_code',
   CITY: 'city',
-  COMPANY_NAME: 'company_name',
   CREATED_AT: 'created_at',
   LAST_ACTIVITY_AT: 'last_activity_at',
   REFERER: 'referer',

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

@@ -1,5 +1,4 @@
 import { computed } from 'vue';
-import { isVoiceCallEnabled } from 'dashboard/helper/inbox';
 
 export function useChannelIcon(inbox) {
   const channelTypeIconMap = {
@@ -15,6 +14,7 @@ export function useChannelIcon(inbox) {
     'Channel::Whatsapp': 'i-woot-whatsapp',
     'Channel::Instagram': 'i-woot-instagram',
     'Channel::Tiktok': 'i-woot-tiktok',
+    'Channel::Voice': 'i-woot-voice',
   };
 
   const providerIconMap = {
@@ -38,11 +38,6 @@ export function useChannelIcon(inbox) {
       icon = 'i-woot-whatsapp';
     }
 
-    // Special case for voice-enabled inboxes (Twilio, WhatsApp, etc.)
-    if (isVoiceCallEnabled(inboxDetails)) {
-      icon = 'i-woot-voice';
-    }
-
     return icon ?? 'i-ri-global-fill';
   });
 

app/javascript/dashboard/components-next/icon/specs/provider.spec.js

@@ -19,11 +19,8 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-woot-whatsapp');
   });
 
-  it('returns correct icon for voice-enabled Twilio channel', () => {
-    const inbox = {
-      channel_type: 'Channel::TwilioSms',
-      voice_enabled: true,
-    };
+  it('returns correct icon for Voice channel', () => {
+    const inbox = { channel_type: 'Channel::Voice' };
     const { value: icon } = useChannelIcon(inbox);
     expect(icon).toBe('i-woot-voice');
   });

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -30,10 +30,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
   focusOnMount: {
     type: Boolean,
     default: false,
@@ -86,7 +82,6 @@ onMounted(() => {
 
 defineExpose({
   focus: () => inlineInputRef.value?.focus(),
-  blur: () => inlineInputRef.value?.blur(),
 });
 </script>
 
@@ -111,7 +106,6 @@ defineExpose({
       :type="type"
       :placeholder="placeholder"
       :disabled="disabled"
-      :readonly="readonly"
       :class="customInputClass"
       class="flex w-full reset-base text-sm h-6 !mb-0 border-0 rounded-none outline-none outline-0 bg-transparent dark:bg-transparent placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 dark:text-n-slate-12 transition-all duration-500 ease-in-out"
       @input="handleInput"

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 ltr:left-0 rtl:right-0 top-full max-h-52"
+      class="z-[100] w-48 mt-2 overflow-y-auto 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,7 +113,6 @@ 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

@@ -0,0 +1,25 @@
+<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/Card.vue

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

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

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

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

@@ -0,0 +1,68 @@
+<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/Template/Text.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <div class="p-3 rounded-xl bg-n-alpha-2 text-n-slate-12 max-w-80">
+  <div class="bg-n-alpha-2 text-n-slate-12 rounded-xl p-3 max-w-80">
     <span v-dompurify-html="message.content" class="prose prose-bubble" />
   </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 { VOICE_CALL_STATUS } from '../constants';
-import { useCallSession } from 'dashboard/composables/useCallSession';
-import { formatDuration } from 'shared/helpers/timeHelper';
+import { MESSAGE_TYPES, VOICE_CALL_STATUS } from '../constants';
 
 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,41 +30,15 @@ const BG_COLOR_MAP = {
   [VOICE_CALL_STATUS.FAILED]: 'bg-n-ruby-9',
 };
 
-const { t } = useI18n();
-const store = useStore();
-const { call, conversationId, currentUserId, inboxId } = useMessageContext();
-const { joinCall, endCall, activeCall, hasActiveCall, isJoining } =
-  useCallSession();
+const { contentAttributes, messageType } = useMessageContext();
 
-const status = computed(() => call.value?.status);
-const isOutbound = computed(() => call.value?.direction === 'outgoing');
+const data = computed(() => contentAttributes.value?.data);
+const status = computed(() => data.value?.status?.toString());
+
+const isOutbound = computed(() => messageType.value === MESSAGE_TYPES.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];
@@ -78,32 +52,16 @@ const labelKey = computed(() => {
     : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
 });
 
-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;
-  }
+const subtextKey = computed(() => {
+  if (SUBTEXT_MAP[status.value]) return SUBTEXT_MAP[status.value];
   if (status.value === VOICE_CALL_STATUS.IN_PROGRESS) {
-    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 isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.THEY_ANSWERED'
+      : 'CONVERSATION.VOICE_CALL.YOU_ANSWERED';
   }
   return isFailed.value
-    ? t('CONVERSATION.VOICE_CALL.NO_ANSWER')
-    : t('CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET');
+    ? 'CONVERSATION.VOICE_CALL.NO_ANSWER'
+    : 'CONVERSATION.VOICE_CALL.NOT_ANSWERED_YET';
 });
 
 const iconName = computed(() => {
@@ -112,61 +70,11 @@ 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-sm">
+    <div class="flex overflow-hidden flex-col w-full max-w-xs">
       <div class="flex gap-3 items-center p-3 w-full">
         <div
           class="flex justify-center items-center rounded-full size-10 shrink-0"
@@ -186,24 +94,11 @@ const handleJoinCall = async () => {
           <span class="text-sm font-medium truncate text-n-slate-12">
             {{ $t(labelKey) }}
           </span>
-          <span v-if="subtext" class="text-xs text-n-slate-11">
-            {{ subtext }}
+          <span class="text-xs text-n-slate-11">
+            {{ $t(subtextKey) }}
           </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

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

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

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

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

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

@@ -0,0 +1,20 @@
+<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 ltr:left-0 rtl:right-0 top-full max-h-52"
+        class="z-[100] w-48 mt-2 overflow-y-auto 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', 'companies_dashboard_show'],
+          activeOn: ['companies_dashboard_index'],
         },
       ],
     },

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 max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        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"
         @action="handleDropdownAction"
       />
     </div>