fix(voice): reuse open conversation for inbound calls instead of always creating new

Backend for WhatsApp WABA calling: query/enable/disable calling status via Meta, webhook re-subscribe, inbox policy, and incoming call service wiring. Builds on the WhatsApp calling UI branch.

.env.example

@@ -98,8 +98,6 @@ SMTP_OPENSSL_VERIFY_MODE=peer
 # Mail Incoming
 # This is the domain set for the reply emails when conversation continuity is enabled
 MAILER_INBOUND_EMAIL_DOMAIN=
-# Maximum time in seconds to process a single IMAP email
-# EMAIL_PROCESSING_TIMEOUT_SECONDS=60
 # Set this to the appropriate ingress channel with regards to incoming emails
 # Possible values are :
 # relay for Exim, Postfix, Qmail
@@ -234,10 +232,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # Comma-separated list of trusted IPs that bypass Rack Attack throttling rules
 # RACK_ATTACK_ALLOWED_IPS=127.0.0.1,::1,192.168.0.10
 
-## SafeFetch private network access
-## Keep disabled by default. Self-hosted installations can enable this to allow SafeFetch requests to private network URLs.
-# SAFE_FETCH_ALLOW_PRIVATE_NETWORK=false
-
 ## Running chatwoot as an API only server
 ## setting this value to true will disable the frontend dashboard endpoints
 # CW_API_ONLY_SERVER=false

Gemfile

@@ -76,7 +76,7 @@ gem 'faraday_middleware-aws-sigv4'
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
-gem 'puma', '~> 7.2', '>= 7.2.1'
+gem 'puma'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'
@@ -89,7 +89,7 @@ gem 'rails-i18n', '~> 7.0'
 # two-factor authentication
 gem 'devise-two-factor', '>= 5.0.0'
 # authorization
-gem 'jwt', '~> 2.10', '>= 2.10.3'
+gem 'jwt'
 gem 'pundit'
 
 # super admin
@@ -209,8 +209,6 @@ gem 'opentelemetry-exporter-otlp'
 
 gem 'shopify_api'
 
-gem 'firecrawl-sdk', '~> 1.0', require: 'firecrawl'
-
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -136,8 +136,6 @@ GEM
     audited (5.4.1)
       activerecord (>= 5.0, < 7.7)
       activesupport (>= 5.0, < 7.7)
-    auth-sanitizer (0.2.1)
-      version_gem (~> 1.1, >= 1.1.10)
     aws-actionmailbox-ses (0.1.0)
       actionmailbox (>= 7.1.0)
       aws-sdk-s3 (~> 1, >= 1.123.0)
@@ -170,7 +168,7 @@ GEM
     base64 (0.3.0)
     bcrypt (3.1.22)
     benchmark (0.4.1)
-    bigdecimal (3.3.1)
+    bigdecimal (3.2.2)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -186,7 +184,6 @@ GEM
       bundler (>= 1.2.0, < 3)
       thor (~> 1.0)
     byebug (11.1.3)
-    cgi (0.5.1)
     childprocess (5.1.0)
       logger (~> 1.5)
     cld3 (3.7.0)
@@ -304,7 +301,7 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.14.2)
+    faraday (2.14.1)
       faraday-net_http (>= 2.0, < 3.5)
       json
       logger
@@ -315,7 +312,7 @@ GEM
       hashie
     faraday-multipart (1.2.0)
       multipart-post (~> 2.0)
-    faraday-net_http (3.4.4)
+    faraday-net_http (3.4.2)
       net-http (~> 0.5)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
@@ -342,7 +339,6 @@ GEM
     ffi-compiler (1.0.1)
       ffi (>= 1.0.0)
       rake
-    firecrawl-sdk (1.4.1)
     flag_shih_tzu (0.3.23)
     foreman (0.87.2)
     fugit (1.11.1)
@@ -438,8 +434,7 @@ GEM
     hana (1.3.7)
     hash_diff (1.1.1)
     hashdiff (1.1.0)
-    hashie (5.1.0)
-      logger
+    hashie (5.0.0)
     html2text (0.4.0)
       nokogiri (>= 1.0, < 2.0)
     http (5.1.1)
@@ -474,7 +469,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.19.8)
+    json (2.19.5)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -495,7 +490,7 @@ GEM
     judoscale-sidekiq (1.8.2)
       judoscale-ruby (= 1.8.2)
       sidekiq (>= 5.0)
-    jwt (2.10.3)
+    jwt (2.10.1)
       base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -572,7 +567,7 @@ GEM
       ruby2_keywords
     msgpack (1.8.0)
     multi_json (1.15.0)
-    multi_xml (0.9.1)
+    multi_xml (0.8.0)
       bigdecimal (>= 3.1, < 5)
     multipart-post (2.4.1)
     mutex_m (0.3.0)
@@ -582,7 +577,7 @@ GEM
       uri (>= 0.11.1)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.6.4.1)
+    net-imap (0.4.24)
       date
       net-protocol
     net-pop (0.1.2)
@@ -597,7 +592,7 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.5)
+    nio4r (2.7.3)
     nokogiri (1.19.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
@@ -607,26 +602,19 @@ GEM
       racc (~> 1.4)
     nokogiri (1.19.3-x86_64-linux-gnu)
       racc (~> 1.4)
-    oauth (1.1.6)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      base64 (~> 0.1)
-      cgi
-      oauth-tty (~> 1.0, >= 1.0.8)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
-    oauth-tty (1.0.8)
-      auth-sanitizer (~> 0.1, >= 0.1.3)
-      cgi
-      version_gem (~> 1.1, >= 1.1.9)
-    oauth2 (2.0.22)
-      auth-sanitizer (~> 0.2, >= 0.2.1)
-      faraday (>= 0.17.3, < 4.0)
-      jwt (>= 1.0, < 4.0)
-      logger (~> 1.2)
+    oauth (1.1.0)
+      oauth-tty (~> 1.0, >= 1.0.1)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
+    oauth-tty (1.0.5)
+      version_gem (~> 1.1, >= 1.1.1)
+    oauth2 (2.0.9)
+      faraday (>= 0.17.3, < 3.0)
+      jwt (>= 1.0, < 3.0)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0, >= 2.0.5)
-      version_gem (~> 1.1, >= 1.1.11)
+      snaky_hash (~> 2.0)
+      version_gem (~> 1.1)
     oj (3.16.10)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
@@ -693,7 +681,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (7.0.5)
-    puma (7.2.1)
+    puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
@@ -946,9 +934,9 @@ GEM
       gli
       hashie
       logger
-    snaky_hash (2.0.5)
-      hashie (>= 0.1.0, < 6)
-      version_gem (>= 1.1.8, < 3)
+    snaky_hash (2.0.1)
+      hashie
+      version_gem (~> 1.1, >= 1.1.1)
     sorbet-runtime (0.5.11934)
     spring (4.1.1)
     spring-watcher-listen (2.1.0)
@@ -1006,14 +994,12 @@ GEM
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.11)
-    vite_rails (3.10.0)
-      railties (>= 5.1, < 9)
+    version_gem (1.1.4)
+    vite_rails (3.0.17)
+      railties (>= 5.1, < 8)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.10.2)
+    vite_ruby (3.8.0)
       dry-cli (>= 0.7, < 2)
-      logger (~> 1.6)
-      mutex_m
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
     warden (1.2.9)
@@ -1093,7 +1079,6 @@ DEPENDENCIES
   faker
   faraday_middleware-aws-sigv4
   fcm
-  firecrawl-sdk (~> 1.0)
   flag_shih_tzu
   foreman
   gemoji
@@ -1115,7 +1100,7 @@ DEPENDENCIES
   json_schemer
   judoscale-rails
   judoscale-sidekiq
-  jwt (~> 2.10, >= 2.10.3)
+  jwt
   kaminari
   koala
   letter_opener
@@ -1143,7 +1128,7 @@ DEPENDENCIES
   pgvector
   procore-sift
   pry-rails
-  puma (~> 7.2, >= 7.2.1)
+  puma
   pundit
   rack-attack (>= 6.7.0)
   rack-cors (= 2.0.0)

VERSION_CW

@@ -1 +1 @@
-4.15.1
+4.14.0

app/builders/contact_inbox_with_contact_builder.rb

@@ -50,7 +50,7 @@ class ContactInboxWithContactBuilder
 
   def create_contact
     account.contacts.create!(
-      name: contact_name,
+      name: contact_attributes[:name] || ::Haikunator.haikunate(1000),
       phone_number: contact_attributes[:phone_number],
       email: contact_attributes[:email],
       identifier: contact_attributes[:identifier],
@@ -59,11 +59,6 @@ class ContactInboxWithContactBuilder
     )
   end
 
-  def contact_name
-    name = contact_attributes[:name] || ::Haikunator.haikunate(1000)
-    name.truncate(ApplicationRecord::MAX_STRING_COLUMN_LENGTH, omission: '')
-  end
-
   def find_contact
     contact = find_contact_by_identifier(contact_attributes[:identifier])
     contact ||= find_contact_by_email(contact_attributes[:email])

app/builders/messages/facebook/message_builder.rb

@@ -92,18 +92,10 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
   def fallback_params(attachment)
     {
       fallback_title: attachment['title'],
-      external_url: attachment['url'] || attachment.dig('payload', 'url')
+      external_url: attachment['url']
     }
   end
 
-  # Facebook shared posts point to page URLs, not downloadable media URLs.
-  # Keep this Facebook-only so Messenger/Instagram share attachments still use the parent media handling.
-  def normalize_file_type(type)
-    return :fallback if type.to_sym == :share
-
-    super
-  end
-
   def conversation_params
     {
       account_id: @inbox.account_id,

app/builders/messages/message_builder.rb

@@ -13,7 +13,6 @@ class Messages::MessageBuilder
     @account = conversation.account
     @message_type = params[:message_type] || 'outgoing'
     @attachments = params[:attachments]
-    @is_voice_message = ActiveModel::Type::Boolean.new.cast(params[:is_voice_message])
     @automation_rule = content_attributes&.dig(:automation_rule_id)
     return unless params.instance_of?(ActionController::Parameters)
 
@@ -57,25 +56,16 @@ class Messages::MessageBuilder
         file: uploaded_attachment
       )
 
-      attachment.file_type = attachment_file_type(uploaded_attachment)
-      tag_voice_message(attachment)
+      attachment.file_type = if uploaded_attachment.is_a?(String)
+                               file_type_by_signed_id(
+                                 uploaded_attachment
+                               )
+                             else
+                               file_type(uploaded_attachment&.content_type)
+                             end
     end
   end
 
-  def attachment_file_type(uploaded_attachment)
-    if uploaded_attachment.is_a?(String)
-      file_type_by_signed_id(uploaded_attachment)
-    else
-      file_type(uploaded_attachment&.content_type)
-    end
-  end
-
-  def tag_voice_message(attachment)
-    return unless @is_voice_message && attachment.file_type == 'audio'
-
-    attachment.meta = (attachment.meta || {}).merge('is_voice_message' => true)
-  end
-
   def process_emails
     return unless @conversation.inbox&.inbox_type == 'Email'
 

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

@@ -1,7 +1,7 @@
 class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::BaseController
   before_action :portal
   before_action :check_authorization
-  before_action :set_articles, only: [:update_status, :update_category, :delete_articles]
+  before_action :set_articles, only: [:update_status, :delete_articles]
 
   def translate
     head :not_implemented
@@ -19,18 +19,6 @@ class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::Ba
     render_could_not_create_error(e.message)
   end
 
-  def update_category
-    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.category_not_found')) unless category_valid?
-
-    ActiveRecord::Base.transaction do
-      @articles.find_each { |article| article.update!(category_id: params[:category_id]) }
-    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?
 
@@ -51,9 +39,5 @@ class Api::V1::Accounts::Articles::BulkActionsController < Api::V1::Accounts::Ba
   def set_articles
     @articles = @portal.articles.where(id: params[:ids])
   end
-
-  def category_valid?
-    @portal.categories.exists?(id: params[:category_id])
-  end
 end
 Api::V1::Accounts::Articles::BulkActionsController.prepend_mod_with('Api::V1::Accounts::Articles::BulkActionsController')

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

@@ -53,7 +53,7 @@ class Api::V1::Accounts::CategoriesController < Api::V1::Accounts::BaseControlle
 
   def category_params
     params.require(:category).permit(
-      :name, :description, :position, :slug, :locale, :icon, :icon_color, :parent_category_id, :associated_category_id
+      :name, :description, :position, :slug, :locale, :icon, :parent_category_id, :associated_category_id
     )
   end
 

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

@@ -214,5 +214,3 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     render json: error, status: error_status
   end
 end
-
-Api::V1::Accounts::ContactsController.prepend_mod_with('Api::V1::Accounts::ContactsController')

app/controllers/api/v1/accounts/conversations/unread_counts_controller.rb

@@ -1,16 +0,0 @@
-class Api::V1::Accounts::Conversations::UnreadCountsController < Api::V1::Accounts::BaseController
-  before_action :ensure_unread_counts_enabled
-
-  def index
-    counts = ::Conversations::UnreadCounts::Counter.new(account: Current.account, user: Current.user).perform
-    render json: { payload: counts }
-  end
-
-  private
-
-  def ensure_unread_counts_enabled
-    return if Current.account.feature_enabled?('conversation_unread_counts')
-
-    render json: { error: I18n.t('errors.conversations.unread_counts.feature_not_enabled') }, status: :forbidden
-  end
-end

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

@@ -140,7 +140,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def destroy
     authorize @conversation, :destroy?
-    ::Conversations::DeleteService.new(conversation: @conversation, user: Current.user, ip: request.ip).perform
+    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
     head :ok
   end
 
@@ -162,8 +162,6 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     # rubocop:disable Rails/SkipsModelValidations
     @conversation.update_columns(updates)
     # rubocop:enable Rails/SkipsModelValidations
-
-    ::Conversations::UnreadCounts::Notifier.new(@conversation).perform
   end
 
   def should_update_last_seen?

app/controllers/api/v1/accounts/instagram/authorizations_controller.rb

@@ -11,7 +11,7 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
         enable_fb_login: '0',
         force_authentication: '1',
         response_type: 'code',
-        state: generate_instagram_token(Current.account.id, params[:return_to])
+        state: generate_instagram_token(Current.account.id)
       }
     )
     if redirect_url

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -6,7 +6,8 @@ class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts
       {
         redirect_uri: "#{base_url}/microsoft/callback",
         scope: scope,
-        state: state
+        state: state,
+        prompt: 'consent'
       }
     )
     if redirect_url

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

@@ -8,15 +8,7 @@ class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseC
   end
 
   def state
-    # The sgid purpose doubles as a return hint: onboarding tags it so the callback
-    # can route the user back to inbox setup. The purpose is part of the signed
-    # payload (tamper-proof), and a non-onboarding request keeps the default
-    # purpose, leaving callers like Notion byte-identical.
-    Current.account.to_sgid(expires_in: 15.minutes, for: state_purpose).to_s
-  end
-
-  def state_purpose
-    params[:return_to] == 'onboarding' ? 'onboarding' : 'default'
+    Current.account.to_sgid(expires_in: 15.minutes).to_s
   end
 
   def base_url

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

@@ -1,51 +0,0 @@
-class Api::V1::Accounts::OnboardingsController < Api::V1::Accounts::BaseController
-  before_action :check_admin_authorization?
-
-  def update
-    @account = Current.account
-    finalize = finalizing_account_details?
-
-    @account.assign_attributes(account_params)
-    @account.custom_attributes.merge!(custom_attributes_params)
-    @account.custom_attributes.delete('onboarding_step') if finalize
-    @account.save!
-
-    # TODO: re-enable when the help center generation UI is ready to surface progress
-    # Onboarding::HelpCenterCreationService.new(@account, Current.user).perform if finalize && website.present?
-
-    render 'api/v1/accounts/update', format: :json
-  end
-
-  def help_center_generation
-    render json: help_center_generation_status
-  end
-
-  private
-
-  def finalizing_account_details?
-    @account.custom_attributes['onboarding_step'] == 'account_details'
-  end
-
-  def website
-    custom_attributes_params[:website]
-  end
-
-  def account_params
-    params.permit(:name, :locale)
-  end
-
-  def custom_attributes_params
-    params.permit(:industry, :company_size, :timezone, :referral_source, :user_role, :website)
-  end
-
-  def help_center_generation_status
-    {
-      generation_id: nil,
-      state: nil,
-      articles_count: 0,
-      categories_count: 0
-    }
-  end
-end
-
-Api::V1::Accounts::OnboardingsController.prepend_mod_with('Api::V1::Accounts::OnboardingsController')

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

@@ -80,15 +80,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       :id, :color, :custom_domain, :header_text, :homepage_link,
       :name, :page_title, :slug, :archived,
       { config: [:default_locale, :layout, { allowed_locales: [] }, { draft_locales: [] },
-                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
-                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] }] }
     )
   end
 
-  def locale_translation_keys
-    params.dig(:portal, :config, :locale_translations)&.keys || []
-  end
-
   def live_chat_widget_params
     permitted_params = params.permit(:inbox_id)
     return {} unless permitted_params.key?(:inbox_id)

app/controllers/api/v1/accounts/tiktok/authorizations_controller.rb

@@ -3,7 +3,7 @@ class Api::V1::Accounts::Tiktok::AuthorizationsController < Api::V1::Accounts::O
 
   def create
     redirect_url = Tiktok::AuthClient.authorize_url(
-      state: generate_tiktok_token(Current.account.id, params[:return_to])
+      state: generate_tiktok_token(Current.account.id)
     )
 
     if redirect_url

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

@@ -0,0 +1,18 @@
+class Api::V1::Accounts::WorkingHoursController < Api::V1::Accounts::BaseController
+  before_action :check_authorization
+  before_action :fetch_webhook, only: [:update]
+
+  def update
+    @working_hour.update!(working_hour_params)
+  end
+
+  private
+
+  def working_hour_params
+    params.require(:working_hour).permit(:inbox_id, :open_hour, :open_minutes, :close_hour, :close_minutes, :closed_all_day)
+  end
+
+  def fetch_working_hour
+    @working_hour = Current.account.working_hours.find(params[:id])
+  end
+end

app/controllers/api/v1/accounts_controller.rb

@@ -58,6 +58,7 @@ 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

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

@@ -1,36 +0,0 @@
-class Api::V1::Profile::SessionsController < Api::BaseController
-  before_action :set_session, only: [:destroy]
-
-  def index
-    @sessions = current_user.user_sessions.where(client_id: active_token_client_ids).order(last_activity_at: :desc)
-    @current_client_id = request.headers['client']
-  end
-
-  def destroy
-    if @session.current?(request.headers['client'])
-      render json: { error: I18n.t('profile_settings.sessions.cannot_revoke_current') }, status: :unprocessable_entity
-      return
-    end
-
-    revoke_token!(@session.client_id)
-    @session.destroy!
-    head :ok
-  end
-
-  private
-
-  def set_session
-    @session = current_user.user_sessions.find(params[:id])
-  end
-
-  def revoke_token!(client_id)
-    tokens = current_user.tokens
-    tokens.delete(client_id)
-    current_user.update!(tokens: tokens)
-  end
-
-  def active_token_client_ids
-    now = Time.current.to_i
-    (current_user.tokens || {}).select { |_, v| v['expiry'].to_i > now }.keys
-  end
-end

app/controllers/application_controller.rb

@@ -3,7 +3,6 @@ class ApplicationController < ActionController::Base
   include RequestExceptionHandler
   include Pundit::Authorization
   include SwitchLocale
-  include TrackSessionActivity
 
   skip_before_action :verify_authenticity_token
 

app/controllers/concerns/access_token_auth_helper.rb

@@ -1,9 +1,8 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[show toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
     'api/v1/accounts/conversations/messages' => ['create'],
-    'api/v1/accounts/conversations/assignments' => ['create'],
-    'api/v1/accounts/conversations/labels' => %w[index create]
+    'api/v1/accounts/conversations/assignments' => ['create']
   }.freeze
 
   def ensure_access_token

app/controllers/concerns/track_session_activity.rb

@@ -1,22 +0,0 @@
-module TrackSessionActivity
-  extend ActiveSupport::Concern
-
-  included do
-    after_action :update_session_activity
-  end
-
-  private
-
-  def update_session_activity
-    return unless current_user
-    return if request.headers['client'].blank?
-
-    UserSessionTrackingService.new(
-      user: current_user,
-      request: request,
-      client_id: request.headers['client']
-    ).update_activity!
-  rescue StandardError => e
-    Rails.logger.warn "Session activity update failed: #{e.message}"
-  end
-end

app/controllers/devise_overrides/sessions_controller.rb

@@ -1,6 +1,4 @@
 class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
-  MAX_SESSIONS = ENV.fetch('MAX_USER_SESSIONS', 25).to_i
-
   # Prevent session parameter from being passed
   # Unpermitted parameter: session
   wrap_parameters format: []
@@ -16,14 +14,12 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
 
     user = find_user_for_authentication
     return handle_mfa_required(user) if user&.mfa_enabled?
-    return if user && enforce_session_limit_for_password_login(user)
 
     # Only proceed with standard authentication if no MFA is required
     super
   end
 
   def render_create_success
-    track_user_session unless @impersonation
     render partial: 'devise/auth', formats: [:json], locals: { resource: @resource }
   end
 
@@ -57,8 +53,6 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def handle_sso_authentication
-    return if !@impersonation && enforce_session_limit_for_password_login(@resource)
-
     authenticate_resource_with_sso_token
     yield @resource if block_given?
     render_create_success
@@ -71,10 +65,7 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def authenticate_resource_with_sso_token
-    # DTA evicts the earliest-expiring token after save when at max_number_of_devices.
-    # The short-lived impersonation token would always be that one, so pre-evict to make room.
-    make_room_for_impersonation_token if @impersonation
-    @token = @resource.create_token(lifespan: @impersonation ? 2.days.to_i : nil)
+    @token = @resource.create_token
     @resource.save!
 
     sign_in(:user, @resource, store: false, bypass: false)
@@ -82,21 +73,11 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
     @resource.invalidate_sso_auth_token(params[:sso_auth_token])
   end
 
-  def make_room_for_impersonation_token
-    return if @resource.tokens.size < DeviseTokenAuth.max_number_of_devices
-
-    oldest_client_id = @resource.tokens.min_by { |_, v| v['expiry'].to_i }&.first
-    @resource.tokens.delete(oldest_client_id) if oldest_client_id
-  end
-
   def process_sso_auth_token
     return if params[:email].blank?
 
     user = User.from_email(params[:email])
-    return unless user&.valid_sso_auth_token?(params[:sso_auth_token])
-
-    @resource = user
-    @impersonation = user.sso_auth_token_impersonation?(params[:sso_auth_token])
+    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
   end
 
   def handle_mfa_required(user)
@@ -122,7 +103,6 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def sign_in_mfa_user(user)
-    evict_oldest_session(user) if sessions_limit_reached?(user)
     @resource = user
     @token = @resource.create_token
     @resource.save!
@@ -134,103 +114,6 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   def render_mfa_error(message_key, status = :bad_request)
     render json: { error: I18n.t(message_key) }, status: status
   end
-
-  def sessions_limit_reached?(user)
-    active_token_count(user) >= MAX_SESSIONS
-  end
-
-  def active_token_count(user)
-    now = Time.current.to_i
-    (user.tokens || {}).count { |_, v| v['expiry'].to_i > now }
-  end
-
-  # Returns true when a response has been rendered (e.g., 409 picker). Non-browser clients
-  # auto-evict instead of getting stuck on a UI they can't render.
-  def enforce_session_limit_for_password_login(user)
-    if revoking_sessions?
-      revoke_sessions_for_login(user)
-      return false
-    end
-
-    return false unless sessions_limit_reached?(user)
-
-    # Picker only when every token has a tracked session; partial tracking would
-    # show a misleading count, so fall through to silent eviction instead.
-    if browser_request? && user.user_sessions.count >= user.tokens.size
-      handle_sessions_limit_for_login(user)
-      true
-    else
-      evict_oldest_session(user)
-      false
-    end
-  end
-
-  def browser_request?
-    request.user_agent.to_s.include?('Mozilla')
-  end
-
-  def revoking_sessions?
-    params[:revoke_session_id].present? || params[:revoke_all_sessions].present?
-  end
-
-  def revoke_sessions_for_login(user)
-    if params[:revoke_all_sessions].present?
-      user.tokens = {}
-      user.save!
-      user.user_sessions.destroy_all
-    elsif params[:revoke_session_id].present?
-      session = user.user_sessions.find_by(id: params[:revoke_session_id])
-      return unless session
-
-      user.tokens.delete(session.client_id)
-      user.save!
-      session.destroy!
-    end
-  end
-
-  def evict_oldest_session(user)
-    # Drop pre-rollout untracked tokens first so freshly tracked logins aren't evicted.
-    return evict_oldest_token(user) if user.user_sessions.count < user.tokens.size
-
-    oldest_session = user.user_sessions.order(Arel.sql('COALESCE(last_activity_at, created_at) ASC')).first
-    return evict_oldest_token(user) unless oldest_session
-
-    user.tokens.delete(oldest_session.client_id)
-    user.save!
-    oldest_session.destroy!
-  end
-
-  # Fallback if a token exists without a UserSession row (e.g., legacy data before tracking shipped).
-  def evict_oldest_token(user)
-    return if user.tokens.blank?
-
-    oldest_client_id = user.tokens.min_by { |_, v| v['expiry'].to_i }&.first
-    return unless oldest_client_id
-
-    user.tokens.delete(oldest_client_id)
-    user.save!
-  end
-
-  PICKER_SESSION_FIELDS = %i[id browser_name browser_version device_name platform_name platform_version
-                             ip_address city country last_activity_at created_at].freeze
-
-  def handle_sessions_limit_for_login(user)
-    sessions = user.user_sessions.order(last_activity_at: :desc).map { |s| s.slice(*PICKER_SESSION_FIELDS) }
-    render json: { sessions_limit_reached: true, sessions: sessions }, status: :conflict
-  end
-
-  def track_user_session
-    client_id = @token&.try(:client) || response.headers['client']
-    return unless client_id.present? && @resource.present?
-
-    UserSessionTrackingService.new(
-      user: @resource,
-      request: request,
-      client_id: client_id
-    ).create_or_update!
-  rescue StandardError => e
-    Rails.logger.warn "Session tracking failed: #{e.message}"
-  end
 end
 
 DeviseOverrides::SessionsController.prepend_mod_with('DeviseOverrides::SessionsController')

app/controllers/instagram/callbacks_controller.rb

@@ -28,8 +28,6 @@ class Instagram::CallbacksController < ApplicationController
     @long_lived_token_response = exchange_for_long_lived_token(@response.token)
     inbox, already_exists = find_or_create_inbox
 
-    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
-
     if already_exists
       redirect_to app_instagram_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
     else
@@ -151,10 +149,6 @@ class Instagram::CallbacksController < ApplicationController
     verify_instagram_token(params[:state])
   end
 
-  def return_to
-    instagram_token_return_to(params[:state])
-  end
-
   def oauth_code
     params[:code]
   end

app/controllers/microsoft/callbacks_controller.rb

@@ -14,11 +14,4 @@ class Microsoft::CallbacksController < OauthCallbackController
   def imap_address
     'outlook.office365.com'
   end
-
-  # Exchange Online's SMTP AUTH (XOAUTH2) rejects proxy addresses in the SASL `user=` field;
-  # it must match the token's UPN. `preferred_username` is the documented v2.0 claim;
-  # `upn` is the v1.0 fallback.
-  def imap_login_identity
-    users_data['preferred_username'] || users_data['upn'] || super
-  end
 end

app/controllers/oauth_callback_controller.rb

@@ -16,8 +16,6 @@ class OauthCallbackController < ApplicationController
   def handle_response
     inbox, already_exists = find_or_create_inbox
 
-    return redirect_to app_onboarding_inbox_setup_url(account_id: account.id) if return_to == 'onboarding'
-
     if already_exists
       redirect_to app_email_inbox_settings_url(account_id: account.id, inbox_id: inbox.id)
     else
@@ -46,7 +44,7 @@ class OauthCallbackController < ApplicationController
 
   def update_channel(channel_email)
     channel_email.update!({
-                            imap_login: imap_login_identity, imap_address: imap_address,
+                            imap_login: users_data['email'], imap_address: imap_address,
                             imap_port: '993', imap_enabled: true,
                             provider: provider_name,
                             provider_config: {
@@ -57,13 +55,6 @@ class OauthCallbackController < ApplicationController
                           })
   end
 
-  # Identity used as the IMAP/SMTP login (SASL XOAUTH2 `user=` field). Defaults to the
-  # id_token's email claim; providers override when their server requires a different
-  # claim (e.g. Microsoft SMTP requires UPN).
-  def imap_login_identity
-    users_data['email']
-  end
-
   def provider_name
     raise NotImplementedError
   end
@@ -90,19 +81,10 @@ class OauthCallbackController < ApplicationController
     decoded_token[0]
   end
 
-  # The sgid purpose carries the onboarding return hint (see
-  # OauthAuthorizationController#state). Try the onboarding purpose first — a match
-  # both resolves the account and records the return target — then fall back to the
-  # default purpose used by every other caller.
   def account_from_signed_id
     raise ActionController::BadRequest, 'Missing state variable' if params[:state].blank?
 
-    if (account = GlobalID::Locator.locate_signed(params[:state], for: 'onboarding'))
-      @return_to = 'onboarding'
-    else
-      account = GlobalID::Locator.locate_signed(params[:state])
-    end
-
+    account = GlobalID::Locator.locate_signed(params[:state])
     raise 'Invalid or expired state' if account.nil?
 
     account
@@ -112,11 +94,6 @@ class OauthCallbackController < ApplicationController
     @account ||= account_from_signed_id
   end
 
-  def return_to
-    account # resolving the sgid records which purpose matched
-    @return_to
-  end
-
   # Fallback name, for when name field is missing from users_data
   def fallback_name
     users_data['email'].split('@').first.parameterize.titleize

app/controllers/public/api/v1/portals/search_controller.rb

@@ -1,31 +0,0 @@
-class Public::Api::V1::Portals::SearchController < Public::Api::V1::Portals::BaseController
-  before_action :ensure_custom_domain_request, only: [:index]
-  before_action :portal
-  before_action :set_portal_layout
-  before_action :set_view_variant
-  before_action :ensure_portal_feature_enabled
-  layout 'portal'
-
-  def index
-    @query = params[:query].to_s.strip
-    @articles = @portal.articles.published.includes(:category).where(locale: params[:locale])
-
-    search_articles
-
-    @articles = @articles.page(params[:page]).per(10)
-  end
-
-  private
-
-  def search_articles
-    @articles = @query.present? ? @articles.search(search_params) : @articles.none
-  end
-
-  def search_params
-    params.permit(:query, :locale, :sort, :status, :page).tap do |permitted|
-      permitted[:query] = @query
-    end
-  end
-end
-
-Public::Api::V1::Portals::SearchController.prepend_mod_with('Public::Api::V1::Portals::SearchController')

app/controllers/public/api/v1/portals_controller.rb

@@ -9,7 +9,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   layout 'portal'
 
   def show
-    @og_image_url = helpers.set_og_image_url('', @portal.localized_value('header_text', @locale))
+    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
   end
 
   def sitemap

app/controllers/tiktok/callbacks_controller.rb

@@ -20,8 +20,6 @@ class Tiktok::CallbacksController < ApplicationController
   def process_successful_authorization
     inbox, already_exists = find_or_create_inbox
 
-    return redirect_to app_onboarding_inbox_setup_url(account_id: account_id) if return_to == 'onboarding'
-
     if already_exists
       redirect_to app_tiktok_inbox_settings_url(account_id: account_id, inbox_id: inbox.id)
     else
@@ -129,10 +127,6 @@ class Tiktok::CallbacksController < ApplicationController
     @account_id ||= verify_tiktok_token(params[:state])
   end
 
-  def return_to
-    tiktok_token_return_to(params[:state])
-  end
-
   def account
     @account ||= Account.find(account_id)
   end

app/controllers/twilio/callback_controller.rb

@@ -35,17 +35,7 @@ class Twilio::CallbackController < ApplicationController
       :ExternalUserId,
       :ParentExternalUserId,
       :ProfileUsername,
-      :Username,
-      :ReferralBody,
-      :ReferralHeadline,
-      :ReferralSourceId,
-      :ReferralSourceType,
-      :ReferralSourceUrl,
-      :ReferralMediaId,
-      :ReferralMediaContentType,
-      :ReferralMediaUrl,
-      :ReferralNumMedia,
-      :ReferralCtwaClid
+      :Username
     )
   end
 end

app/dispatchers/async_dispatcher.rb

@@ -17,7 +17,6 @@ class AsyncDispatcher < BaseDispatcher
       InstallationWebhookListener.instance,
       NotificationListener.instance,
       ParticipationListener.instance,
-      Conversations::UnreadCounts::Listener.instance,
       ReportingEventListener.instance,
       WebhookListener.instance
     ]

app/drops/contact_drop.rb

@@ -12,7 +12,7 @@ class ContactDrop < BaseDrop
   end
 
   def first_name
-    @obj.try(:name).try(:split).try(:first).try(:capitalize)
+    @obj.try(:name).try(:split).try(:first).try(:capitalize) if @obj.try(:name).try(:split).try(:size) > 1
   end
 
   def last_name

app/drops/user_drop.rb

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

app/finders/conversation_finder.rb

@@ -12,7 +12,6 @@ class ConversationFinder
     'waiting_since_asc' => %w[sort_on_waiting_since asc],
     'waiting_since_desc' => %w[sort_on_waiting_since desc],
     'priority_desc_created_at_asc' => %w[sort_on_priority_created_at desc],
-    'unread' => %w[sort_on_unread desc],
 
     # To be removed in v3.5.0
     'latest' => %w[sort_on_last_activity_at desc],
@@ -41,7 +40,7 @@ class ConversationFinder
   def perform
     set_up
 
-    mine_count, unassigned_count, all_count = set_count_for_all_conversations
+    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
     assigned_count = all_count - unassigned_count
 
     filter_by_assignee_type
@@ -185,17 +184,6 @@ class ConversationFinder
   end
 
   def set_count_for_all_conversations
-    return legacy_count_for_all_conversations if @conversations.limit_value || @conversations.offset_value || @conversations.eager_loading?
-
-    counts = @conversations.unscope(:order).pick(
-      Arel.sql("COUNT(*) FILTER (WHERE assignee_id = #{current_user.id})"),
-      Arel.sql('COUNT(*) FILTER (WHERE assignee_id IS NULL)'),
-      Arel.sql('COUNT(*)')
-    )
-    counts || [0, 0, 0]
-  end
-
-  def legacy_count_for_all_conversations
     [
       @conversations.assigned_to(current_user).count,
       @conversations.unassigned.count,

app/helpers/instagram/integration_helper.rb

@@ -4,21 +4,21 @@ module Instagram::IntegrationHelper
   # Generates a signed JWT token for Instagram integration
   #
   # @param account_id [Integer] The account ID to encode in the token
-  # @param return_to [String, nil] Optional onboarding return hint
   # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_instagram_token(account_id, return_to = nil)
+  def generate_instagram_token(account_id)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate Instagram token: #{e.message}")
     nil
   end
 
-  def token_payload(account_id, return_to = nil)
-    payload = { sub: account_id, iat: Time.current.to_i }
-    payload[:return_to] = return_to if return_to.present?
-    payload
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
   end
 
   # Verifies and decodes a Instagram JWT token
@@ -28,14 +28,7 @@ module Instagram::IntegrationHelper
   def verify_instagram_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)&.dig('sub')
-  end
-
-  # Reads the onboarding return hint from a Instagram JWT token, if present.
-  def instagram_token_return_to(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)&.dig('return_to')
+    decode_token(token, client_secret)
   end
 
   private
@@ -48,7 +41,7 @@ module Instagram::IntegrationHelper
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first
+               }).first['sub']
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Instagram token: #{e.message}")
     nil

app/helpers/portal_helper.rb

@@ -17,11 +17,15 @@ module PortalHelper
     uri.to_s
   end
 
-  def generate_portal_bg(portal_color, theme)
+  def generate_portal_bg_color(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
     "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
   end
 
+  def generate_portal_bg(portal_color, theme)
+    generate_portal_bg_color(portal_color, theme)
+  end
+
   def generate_gradient_to_bottom(theme)
     base_color = theme == 'dark' ? '#151718' : 'white'
     "linear-gradient(to bottom, transparent, #{base_color})"
@@ -37,24 +41,13 @@ module PortalHelper
     language_map[locale] || locale
   end
 
-  def html_lang_attribute(locale)
-    locale.to_s.tr('_', '-')
-  end
-
   def theme_query_string(theme)
     theme.present? && theme != 'system' ? "?theme=#{theme}" : ''
   end
 
-  def portal_query_string(theme, is_plain_layout_enabled)
-    query_params = {}
-    query_params[:theme] = theme if theme.present? && theme != 'system'
-    query_params[:show_plain_layout] = true if is_plain_layout_enabled
-    query_params.present? ? "?#{query_params.to_query}" : ''
-  end
-
   def generate_home_link(portal_slug, portal_locale, theme, is_plain_layout_enabled)
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{portal_locale}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/#{portal_locale}#{theme_query_string(theme)}"
     else
       "/hc/#{portal_slug}/#{portal_locale}"
     end
@@ -68,7 +61,7 @@ module PortalHelper
     is_plain_layout_enabled = params[:is_plain_layout_enabled]
 
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{theme_query_string(theme)}"
     else
       "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
     end
@@ -76,7 +69,7 @@ module PortalHelper
 
   def generate_article_link(portal_slug, article_slug, theme, is_plain_layout_enabled)
     if is_plain_layout_enabled
-      "/hc/#{portal_slug}/articles/#{article_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
+      "/hc/#{portal_slug}/articles/#{article_slug}#{theme_query_string(theme)}"
     else
       "/hc/#{portal_slug}/articles/#{article_slug}"
     end
@@ -97,18 +90,6 @@ module PortalHelper
     ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
   end
 
-  # Renders a stored category icon: a bare ri icon name (e.g. `vip-crown-2-fill/line`) saved color, or a plain emoji character.
-  def render_emoji_or_icon(value, color = nil)
-    return '' if value.blank?
-
-    # Emojis are non-ascii; bare icon names match this safe charset.
-    return ERB::Util.html_escape(value) unless value.match?(/\A[a-z][a-z0-9-]*\z/)
-
-    icon_class = value.start_with?('i-') ? value : "i-ri-#{value}"
-    style = "color: #{color};" if color.to_s.match?(/\A#\h{3,8}\z/)
-    tag.span(class: icon_class, style: style, 'aria-hidden': true)
-  end
-
   def thumbnail_bg_color(username)
     colors = ['#6D95BA', '#A4C3C3', '#E19191']
     return colors.sample if username.blank?

app/helpers/super_admin/features.yml

@@ -34,12 +34,6 @@ disable_branding:
   enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
   icon: 'icon-sailbot-fill'
   enterprise: true
-voice_calls:
-  name: 'Voice Calls'
-  description: 'Enable voice calling capabilities for your agents and customers.'
-  enabled: <%= (ChatwootHub.pricing_plan != 'community') %>
-  icon: 'icon-voice-line'
-  enterprise: true
 
 # ------- Product Features ------- #
 help_center:

app/helpers/tiktok/integration_helper.rb

@@ -2,12 +2,11 @@ module Tiktok::IntegrationHelper
   # Generates a signed JWT token for Tiktok integration
   #
   # @param account_id [Integer] The account ID to encode in the token
-  # @param return_to [String, nil] Optional onboarding return hint
   # @return [String, nil] The encoded JWT token or nil if client secret is missing
-  def generate_tiktok_token(account_id, return_to = nil)
+  def generate_tiktok_token(account_id)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate TikTok token: #{e.message}")
     nil
@@ -20,14 +19,7 @@ module Tiktok::IntegrationHelper
   def verify_tiktok_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)&.dig('sub')
-  end
-
-  # Reads the onboarding return hint from a Tiktok JWT token, if present.
-  def tiktok_token_return_to(token)
-    return if token.blank? || client_secret.blank?
-
-    decode_token(token, client_secret)&.dig('return_to')
+    decode_token(token, client_secret)
   end
 
   private
@@ -36,17 +28,18 @@ module Tiktok::IntegrationHelper
     @client_secret ||= GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
   end
 
-  def token_payload(account_id, return_to = nil)
-    payload = { sub: account_id, iat: Time.current.to_i }
-    payload[:return_to] = return_to if return_to.present?
-    payload
+  def token_payload(account_id)
+    {
+      sub: account_id,
+      iat: Time.current.to_i
+    }
   end
 
   def decode_token(token, secret)
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first
+               }).first['sub']
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Tiktok token: #{e.message}")
     nil

app/javascript/dashboard/api/auth.js

@@ -106,10 +106,4 @@ export default {
     const urlData = endPoints('resetAccessToken');
     return axios.post(urlData.url);
   },
-  getSessions() {
-    return axios.get('/api/v1/profile/sessions');
-  },
-  revokeSession(id) {
-    return axios.delete(`/api/v1/profile/sessions/${id}`);
-  },
 };

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

@@ -48,12 +48,6 @@ class TwilioVoiceClient extends EventTarget {
     return !!this.activeConnection;
   }
 
-  setMuted(shouldMute) {
-    if (!this.activeConnection) return false;
-    this.activeConnection.mute(shouldMute);
-    return shouldMute;
-  }
-
   endClientCall() {
     if (this.activeConnection) {
       this.activeConnection.disconnect();

app/javascript/dashboard/api/contacts.js

@@ -40,12 +40,6 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/conversations`, { params });
   }
 
-  getAttachments(contactId, page = 1) {
-    return axios.get(`${this.url}/${contactId}/attachments`, {
-      params: { page },
-    });
-  }
-
   getContactableInboxes(contactId) {
     return axios.get(`${this.url}/${contactId}/contactable_inboxes`);
   }

app/javascript/dashboard/api/conversations.js

@@ -13,10 +13,6 @@ class ConversationApi extends ApiClient {
   updateLabels(conversationID, labels) {
     return axios.post(`${this.url}/${conversationID}/labels`, { labels });
   }
-
-  getUnreadCounts() {
-    return axios.get(`${this.url}/unread_counts`);
-  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/helpCenter/articles.js

@@ -87,13 +87,6 @@ class ArticlesAPI extends PortalsAPI {
     );
   }
 
-  bulkUpdateCategory({ portalSlug, articleIds, categoryId }) {
-    return axios.patch(
-      `${this.url}/${portalSlug}/articles/bulk_actions/update_category`,
-      { ids: articleIds, category_id: categoryId }
-    );
-  }
-
   bulkDelete({ portalSlug, articleIds }) {
     return axios.delete(
       `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,

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

@@ -12,7 +12,6 @@ export const buildCreatePayload = ({
   bccEmails = '',
   toEmails = '',
   templateParams,
-  isVoiceMessage = false,
 }) => {
   let payload;
   if (files && files.length !== 0) {
@@ -34,9 +33,6 @@ export const buildCreatePayload = ({
     if (contentAttributes) {
       payload.append('content_attributes', JSON.stringify(contentAttributes));
     }
-    if (isVoiceMessage) {
-      payload.append('is_voice_message', true);
-    }
   } else {
     payload = {
       content: message,
@@ -68,7 +64,6 @@ class MessageApi extends ApiClient {
     bccEmails = '',
     toEmails = '',
     templateParams,
-    isVoiceMessage = false,
   }) {
     return axios({
       method: 'post',
@@ -83,7 +78,6 @@ class MessageApi extends ApiClient {
         bccEmails,
         toEmails,
         templateParams,
-        isVoiceMessage,
       }),
     });
   }

app/javascript/dashboard/api/inboxes.js

@@ -60,12 +60,6 @@ class Inboxes extends CacheEnabledApiClient {
   disableWhatsappCalling(inboxId) {
     return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
   }
-
-  setInboundCalls(inboxId, enabled) {
-    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
-      inbound_calls_enabled: enabled,
-    });
-  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/onboarding.js

@@ -1,18 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class OnboardingAPI extends ApiClient {
-  constructor() {
-    super('onboarding', { accountScoped: true });
-  }
-
-  update(data) {
-    return axios.patch(this.url, data);
-  }
-
-  getHelpCenterGeneration() {
-    return axios.get(`${this.url}/help_center_generation`);
-  }
-}
-
-export default new OnboardingAPI();

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

@@ -153,33 +153,4 @@ describe('#PortalAPI', () => {
       );
     });
   });
-  describe('API calls', () => {
-    const originalAxios = window.axios;
-    const axiosMock = {
-      post: vi.fn(() => Promise.resolve()),
-      get: vi.fn(() => Promise.resolve()),
-      patch: vi.fn(() => Promise.resolve()),
-      delete: vi.fn(() => Promise.resolve()),
-    };
-
-    beforeEach(() => {
-      window.axios = axiosMock;
-    });
-
-    afterEach(() => {
-      window.axios = originalAxios;
-    });
-
-    it('#bulkUpdateCategory', () => {
-      articlesAPI.bulkUpdateCategory({
-        portalSlug: 'room-rental',
-        articleIds: [1, 2, 3],
-        categoryId: 7,
-      });
-      expect(axiosMock.patch).toHaveBeenCalledWith(
-        '/api/v1/portals/room-rental/articles/bulk_actions/update_category',
-        { ids: [1, 2, 3], category_id: 7 }
-      );
-    });
-  });
 });

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

@@ -11,7 +11,6 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('delete');
     expect(conversationsAPI).toHaveProperty('getLabels');
     expect(conversationsAPI).toHaveProperty('updateLabels');
-    expect(conversationsAPI).toHaveProperty('getUnreadCounts');
   });
 
   describe('API calls', () => {
@@ -48,12 +47,5 @@ describe('#ConversationApi', () => {
         }
       );
     });
-
-    it('#getUnreadCounts', () => {
-      conversationsAPI.getUnreadCounts();
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/conversations/unread_counts'
-      );
-    });
   });
 });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -83,29 +83,5 @@ describe('#ConversationAPI', () => {
         template_params: undefined,
       });
     });
-
-    it('appends is_voice_message when isVoiceMessage is true', () => {
-      const formPayload = buildCreatePayload({
-        message: 'voice message',
-        echoId: 42,
-        isPrivate: false,
-        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
-        isVoiceMessage: true,
-      });
-      expect(formPayload).toBeInstanceOf(FormData);
-      expect(formPayload.get('is_voice_message')).toEqual('true');
-    });
-
-    it('does not append is_voice_message when isVoiceMessage is false', () => {
-      const formPayload = buildCreatePayload({
-        message: 'regular audio',
-        echoId: 43,
-        isPrivate: false,
-        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
-        isVoiceMessage: false,
-      });
-      expect(formPayload).toBeInstanceOf(FormData);
-      expect(formPayload.get('is_voice_message')).toBeNull();
-    });
   });
 });

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -145,12 +145,6 @@
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
     --white-alpha: 255, 255, 255, 0.8;
-
-    // Voice call widget - light mode
-    --call-widget: 33, 34, 38, 0.95;
-    --call-widget-border: 255, 255, 255, 0.1;
-    --call-widget-text: 237, 238, 240, 1;
-    --call-widget-sub-text: 173, 177, 184, 1;
   }
 
   .dark {
@@ -297,12 +291,6 @@
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
-
-    // Voice call widget - dark mode
-    --call-widget: 50, 53, 61, 1;
-    --call-widget-border: 255, 255, 255, 0.07;
-    --call-widget-text: 237, 238, 240, 1;
-    --call-widget-sub-text: 173, 177, 184, 1;
   }
 }
 // NEXT COLORS END

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

@@ -49,7 +49,6 @@ const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();
 
 const STATUS_COMPLETED = 'completed';
-const STATUS_PROCESSING = 'processing';
 
 const { formatMessage } = useMessageFormatter();
 
@@ -69,15 +68,9 @@ const campaignStatus = computed(() => {
       : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
   }
 
-  if (props.status === STATUS_COMPLETED) {
-    return t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED');
-  }
-
-  if (props.status === STATUS_PROCESSING) {
-    return t('CAMPAIGN.SMS.CARD.STATUS.PROCESSING');
-  }
-
-  return t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+  return props.status === STATUS_COMPLETED
+    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
+    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });
 
 const inboxName = computed(() => props.inbox?.name || '');

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

@@ -46,8 +46,9 @@ const formattedLastActivityAt = computed(() => {
         :src="avatarSource"
         class="shrink-0"
         :name="name"
-        :size="42"
+        :size="48"
         hide-offline-status
+        rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1 min-w-0">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">

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

@@ -26,13 +26,6 @@ const resetForm = () => {
   form.description = '';
 };
 
-const open = (company = {}) => {
-  form.name = company.name || '';
-  form.domain = company.domain || '';
-  form.description = company.description || '';
-  dialogRef.value?.open();
-};
-
 const handleConfirm = () => {
   if (isFormInvalid.value) return;
 
@@ -52,7 +45,7 @@ const onSuccess = () => {
   closeDialog();
 };
 
-defineExpose({ dialogRef, onSuccess, open });
+defineExpose({ dialogRef, onSuccess });
 </script>
 
 <template>

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

@@ -141,6 +141,7 @@ const handleUpdateCompany = async () => {
         :src="avatarSource"
         :size="72"
         :allow-upload="!isAvatarBusy"
+        rounded-full
         hide-offline-status
         @upload="handleAvatarUpload"
         @delete="handleAvatarDelete"

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

@@ -1,153 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useDebounceFn } from '@vueuse/core';
-import CompanyAPI from 'dashboard/api/companies';
-import { useAlert } from 'dashboard/composables';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import CompanyCreateDialog from 'dashboard/components-next/Companies/CompanyCreateDialog.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-  // Name of the linked company, so the label shows before the list is loaded.
-  selectedName: {
-    type: String,
-    default: '',
-  },
-  isDetailsView: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['select']);
-
-const { t } = useI18n();
-
-const CREATE_PREFIX = 'create:';
-
-const options = ref([]);
-const searchQuery = ref('');
-const createDialogRef = ref(null);
-const isCreatingCompany = ref(false);
-
-const toOption = company => ({ label: company.name, value: company.id });
-
-const createOption = computed(() => {
-  const name = searchQuery.value.trim();
-  if (!name) return null;
-
-  const exists = options.value.some(
-    option => option.label.toLowerCase() === name.toLowerCase()
-  );
-  if (exists) return null;
-
-  return {
-    label: t('COMPANIES.SELECTOR.CREATE_OPTION', { name }),
-    value: `${CREATE_PREFIX}${name}`,
-  };
-});
-
-const comboboxOptions = computed(() => {
-  const list = [...options.value];
-
-  // Keep the linked company visible even when it is not in the loaded results.
-  if (
-    props.modelValue &&
-    props.selectedName &&
-    !list.some(option => option.value === Number(props.modelValue))
-  ) {
-    list.unshift({
-      label: props.selectedName,
-      value: Number(props.modelValue),
-    });
-  }
-
-  if (createOption.value) list.push(createOption.value);
-  return list;
-});
-
-const fetchCompanies = async query => {
-  try {
-    const {
-      data: { payload },
-    } = query
-      ? await CompanyAPI.search(query)
-      : await CompanyAPI.get({ page: 1 });
-    options.value = (payload || []).map(toOption);
-  } catch {
-    options.value = [];
-  }
-};
-
-// Fetch lazily, only when the dropdown opens, instead of on mount.
-const handleOpen = () => {
-  searchQuery.value = '';
-  fetchCompanies('');
-};
-
-const handleSearch = useDebounceFn(query => {
-  searchQuery.value = query?.trim() || '';
-  fetchCompanies(searchQuery.value);
-}, 300);
-
-// Open the create dialog (prefilled with the typed name) so the user can add
-// domain/description before saving, instead of creating with just a name.
-const createCompany = async company => {
-  isCreatingCompany.value = true;
-  try {
-    const {
-      data: { payload },
-    } = await CompanyAPI.create({ company });
-    createDialogRef.value?.onSuccess();
-    emit('select', { id: payload.id, name: payload.name });
-    useAlert(t('COMPANIES.CREATE.MESSAGES.SUCCESS'));
-  } catch {
-    useAlert(t('COMPANIES.CREATE.MESSAGES.ERROR'));
-  } finally {
-    isCreatingCompany.value = false;
-  }
-};
-
-const handleSelect = value => {
-  if (typeof value === 'string' && value.startsWith(CREATE_PREFIX)) {
-    createDialogRef.value?.open({ name: value.slice(CREATE_PREFIX.length) });
-    // Drop the transient "Add …" option so the button label doesn't stick to
-    // it if the dialog is dismissed without creating.
-    searchQuery.value = '';
-    return;
-  }
-
-  const id = value ? Number(value) : '';
-  const selected = comboboxOptions.value.find(option => option.value === id);
-  emit('select', { id, name: selected?.label || '' });
-};
-</script>
-
-<template>
-  <ComboBox
-    :model-value="modelValue"
-    :options="comboboxOptions"
-    :display-label="selectedName"
-    :placeholder="t('COMPANIES.SELECTOR.PLACEHOLDER')"
-    :search-placeholder="t('COMPANIES.SEARCH_PLACEHOLDER')"
-    use-api-results
-    class="[&>div>button]:h-8 [&>div>div_ul]:max-h-56"
-    :class="{
-      '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
-        !isDetailsView,
-      '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
-    }"
-    @open="handleOpen"
-    @search="handleSearch"
-    @update:model-value="handleSelect"
-  />
-  <CompanyCreateDialog
-    ref="createDialogRef"
-    :is-loading="isCreatingCompany"
-    @create="createCompany"
-  />
-</template>

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

@@ -15,7 +15,6 @@ const props = defineProps({
   id: { type: Number, required: true },
   name: { type: String, default: '' },
   email: { type: String, default: '' },
-  companyId: { type: [Number, String], default: '' },
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
@@ -42,7 +41,6 @@ const getInitialContactData = () => ({
   id: props.id,
   name: props.name,
   email: props.email,
-  companyId: props.companyId,
   phoneNumber: props.phoneNumber,
   additionalAttributes: props.additionalAttributes,
 });
@@ -126,9 +124,10 @@ const handleAvatarHover = isHovered => {
           <Avatar
             :name="name"
             :src="thumbnail"
-            :size="42"
+            :size="48"
             :status="availabilityStatus"
             hide-offline-status
+            rounded-full
           >
             <template v-if="selectable" #overlay="{ size }">
               <label

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

@@ -128,14 +128,9 @@ const closeMobileSidebar = () => {
     <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
+      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"
     >
-      <div class="shrink-0">
-        <slot name="sidebarHeader" />
-      </div>
-      <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
-        <slot name="sidebar" />
-      </div>
+      <slot name="sidebar" />
     </div>
 
     <!-- Mobile sidebar container -->
@@ -184,14 +179,9 @@ const closeMobileSidebar = () => {
         <div
           v-if="isContactSidebarOpen"
           id="contact-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
+          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"
         >
-          <div class="shrink-0">
-            <slot name="sidebarHeader" />
-          </div>
-          <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
-            <slot name="sidebar" />
-          </div>
+          <slot name="sidebar" />
         </div>
       </Transition>
     </div>

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

@@ -5,11 +5,8 @@ import { required, email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
-import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { useAccount } from 'dashboard/composables/useAccount';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import CompanySelector from 'dashboard/components-next/Companies/CompanySelector.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
 
@@ -31,7 +28,6 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
-const { currentAccount, isCloudFeatureEnabled } = useAccount();
 
 const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
@@ -58,7 +54,6 @@ const defaultState = {
   id: 0,
   name: '',
   email: '',
-  companyId: '',
   firstName: '',
   lastName: '',
   phoneNumber: '',
@@ -90,23 +85,6 @@ const validationRules = {
 const v$ = useVuelidate(validationRules, state);
 
 const isFormInvalid = computed(() => v$.value.$invalid);
-const hasCompaniesFeature = computed(
-  () =>
-    currentAccount.value?.id && isCloudFeatureEnabled(FEATURE_FLAGS.COMPANIES)
-);
-const showCompanySelector = computed(
-  () =>
-    hasCompaniesFeature.value &&
-    (Boolean(state.companyId) || !state.additionalAttributes.companyName)
-);
-
-const emitContactUpdate = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  const { firstName, lastName, ...stateWithoutNames } = state;
-  emit('update', stateWithoutNames);
-};
 
 const prepareStateBasedOnProps = () => {
   if (props.isNewContact) {
@@ -118,7 +96,6 @@ const prepareStateBasedOnProps = () => {
     name = '',
     email: emailAddress,
     phoneNumber,
-    companyId = '',
     additionalAttributes = {},
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name || '');
@@ -138,7 +115,6 @@ const prepareStateBasedOnProps = () => {
   Object.assign(state, {
     id,
     name,
-    companyId: companyId || '',
     firstName,
     lastName,
     email: emailAddress,
@@ -224,7 +200,11 @@ const getFormBinding = key => {
         }
       }
 
-      await emitContactUpdate();
+      const isFormValid = await v$.value.$validate();
+      if (isFormValid) {
+        const { firstName, lastName, ...stateWithoutNames } = state;
+        emit('update', stateWithoutNames);
+      }
     },
   });
 };
@@ -241,12 +221,6 @@ const handleCountrySelection = value => {
   emit('update', state);
 };
 
-const handleCompanySelection = async ({ id, name }) => {
-  state.companyId = id || '';
-  state.additionalAttributes.companyName = name || '';
-  await emitContactUpdate();
-};
-
 const resetValidation = () => {
   v$.value.$reset();
 };
@@ -299,13 +273,6 @@ defineExpose({
             :placeholder="item.placeholder"
             :show-border="isDetailsView"
           />
-          <CompanySelector
-            v-else-if="item.key === 'COMPANY_NAME' && showCompanySelector"
-            :model-value="state.companyId"
-            :selected-name="state.additionalAttributes.companyName"
-            :is-details-view="isDetailsView"
-            @select="handleCompanySelection"
-          />
           <Input
             v-else
             v-model="getFormBinding(item.key).value"

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

@@ -1,48 +1,34 @@
 <script setup>
-import { computed, ref } from 'vue';
+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';
-import { usePolicy } from 'dashboard/composables/usePolicy';
 
 const emit = defineEmits(['add', 'import', 'export']);
 
 const { t } = useI18n();
-const { checkPermissions } = usePolicy();
 
-const contactMenuItems = computed(() => [
+const contactMenuItems = [
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
     action: 'add',
     value: 'add',
     icon: 'i-lucide-plus',
   },
-  ...(checkPermissions(['administrator', 'contact_manage'])
-    ? [
-        {
-          label: t(
-            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'
-          ),
-          action: 'export',
-          value: 'export',
-          icon: 'i-lucide-upload',
-        },
-      ]
-    : []),
-  ...(checkPermissions(['administrator', 'contact_manage'])
-    ? [
-        {
-          label: t(
-            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'
-          ),
-          action: 'import',
-          value: 'import',
-          icon: 'i-lucide-download',
-        },
-      ]
-    : []),
-]);
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
+    action: 'export',
+    value: 'export',
+    icon: 'i-lucide-upload',
+  },
+  {
+    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
+    action: 'import',
+    value: 'import',
+    icon: 'i-lucide-download',
+  },
+];
 const showActionsDropdown = ref(false);
 
 const handleContactAction = ({ action }) => {

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -108,7 +108,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
     <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -36,7 +36,7 @@ const contactConversations = computed(() =>
   </div>
   <div
     v-else-if="contactConversations.length > 0"
-    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
   >
     <ConversationCard
       v-for="conversation in contactConversations"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMedia.vue

@@ -1,108 +0,0 @@
-<script setup>
-import { computed, onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
-import {
-  MEDIA_TYPES,
-  NON_FILE_TYPES,
-} from 'dashboard/components-next/message/constants';
-
-import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
-import Media from 'dashboard/components-next/SharedAttachments/Media.vue';
-import Files from 'dashboard/components-next/SharedAttachments/Files.vue';
-import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
-
-const MEDIA_PEEK_LIMIT = 12;
-const FILES_PEEK_LIMIT = 6;
-
-const route = useRoute();
-const router = useRouter();
-const store = useStore();
-const { t } = useI18n();
-
-const attachmentsByContact = useMapGetter('contacts/getContactAttachments');
-const uiFlags = useMapGetter('contacts/getUIFlags');
-
-const attachments = computed(() =>
-  attachmentsByContact.value(route.params.contactId)
-);
-const isFetching = computed(() => uiFlags.value.isFetchingAttachments);
-
-const hasContent = computed(() =>
-  attachments.value.some(
-    a => a.data_url && !NON_FILE_TYPES.includes(a.file_type)
-  )
-);
-
-const mediaAttachments = computed(() =>
-  attachments.value
-    .filter(a => MEDIA_TYPES.includes(a.file_type) && a.data_url)
-    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
-);
-
-const showGallery = ref(false);
-const selectedAttachment = ref(null);
-
-const onMediaSelect = attachment => {
-  selectedAttachment.value = attachment;
-  showGallery.value = true;
-};
-
-const onFileSelect = attachment => {
-  if (attachment.data_url) {
-    window.open(attachment.data_url, '_blank', 'noopener,noreferrer');
-  }
-};
-
-const onJumpToMessage = attachment => {
-  if (!attachment.conversation_id || !attachment.message_id) return;
-  router.push({
-    name: 'inbox_conversation',
-    params: {
-      accountId: route.params.accountId,
-      conversation_id: attachment.conversation_id,
-    },
-    query: { messageId: attachment.message_id },
-  });
-};
-
-onMounted(() => {
-  store.dispatch('contacts/fetchAttachments', route.params.contactId);
-});
-</script>
-
-<template>
-  <div class="px-6">
-    <div v-if="isFetching" class="flex justify-center p-3">
-      <Spinner class="size-5" />
-    </div>
-    <p v-else-if="!hasContent" class="p-3 text-sm text-center text-n-slate-11">
-      {{ t('CONVERSATION_SIDEBAR.SHARED_FILES.EMPTY') }}
-    </p>
-    <div v-else class="flex flex-col gap-5">
-      <Media
-        :attachments="attachments"
-        :peek-limit="MEDIA_PEEK_LIMIT"
-        show-jump-to-message
-        @select="onMediaSelect"
-        @jump-to-message="onJumpToMessage"
-      />
-      <Files
-        :attachments="attachments"
-        :peek-limit="FILES_PEEK_LIMIT"
-        show-jump-to-message
-        @select="onFileSelect"
-        @jump-to-message="onJumpToMessage"
-      />
-    </div>
-    <GalleryView
-      v-if="showGallery && selectedAttachment"
-      v-model:show="showGallery"
-      :attachment="selectedAttachment"
-      :all-attachments="mediaAttachments"
-      auto-play
-      @close="showGallery = false"
-    />
-  </div>
-</template>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue

@@ -103,7 +103,7 @@ const onMergeContacts = async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-6">
+  <div class="flex flex-col gap-8 px-6 py-6">
     <div class="flex flex-col gap-2">
       <h4 class="text-base text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -55,7 +55,7 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6">
+  <div class="flex flex-col gap-6 py-6">
     <Editor
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -92,7 +92,6 @@ const handleAvatarHover = (id, isHovered) => {
         :id="contact.id"
         :name="contact.name"
         :email="contact.email"
-        :company-id="contact.companyId"
         :thumbnail="contact.thumbnail"
         :phone-number="contact.phoneNumber"
         :additional-attributes="contact.additionalAttributes"

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

@@ -8,10 +8,6 @@ import {
   getVoiceCallProvider,
   VOICE_CALL_PROVIDERS,
 } from 'dashboard/helper/inbox';
-import {
-  VOICE_CALL_DIRECTION,
-  VOICE_CALL_OUTBOUND_INIT_STATUS,
-} from 'dashboard/components-next/message/constants';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
@@ -43,7 +39,6 @@ const { t } = useI18n();
 
 const dialogRef = ref(null);
 
-const callsStore = useCallsStore();
 const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
@@ -58,16 +53,6 @@ const isInitiatingCall = computed(() => {
   return contactsUiFlags.value?.isInitiatingCall || false;
 });
 
-// Mirror the conversation-header button: block a new call whenever any provider
-// call is already active or ringing, otherwise starting a WhatsApp call here
-// would leave a still-live Twilio (or other) session with no visible control.
-const isCallButtonDisabled = computed(
-  () =>
-    callsStore.hasActiveCall ||
-    callsStore.hasIncomingCall ||
-    isInitiatingCall.value
-);
-
 const navigateToConversation = conversationId => {
   const accountId = route.params.accountId;
   if (conversationId && accountId) {
@@ -115,21 +100,15 @@ const startWhatsappCall = async (inboxId, conversationIdHint) => {
   // The composable returns { status: 'locked' } when an init is already in
   // flight or a call is already active; treat that as a soft no-op rather than
   // claiming success.
-  if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+  if (response?.status === 'locked') return;
   if (!response?.id) {
-    // Permission template path returns no call id. Mirror the header button and
-    // surface whether the request was just sent or is already pending instead of
-    // claiming the call started. The permission message lands in the
-    // conversation, so still navigate there.
-    const messageKey =
-      response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
-        ? 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_PENDING'
-        : 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_REQUESTED';
-    useAlert(t(messageKey));
+    // Permission flow returns no id — banner already handled server-side; surface to user.
+    useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
     navigateToConversation(conversationId);
     return;
   }
 
+  const callsStore = useCallsStore();
   // Stay non-active until the connect cable event arrives — flipping to active
   // here would start the duration timer before the contact picks up.
   callsStore.addCall({
@@ -137,8 +116,8 @@ const startWhatsappCall = async (inboxId, conversationIdHint) => {
     callId: response.id,
     conversationId,
     inboxId,
-    callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
-    provider: VOICE_CALL_PROVIDERS.WHATSAPP,
+    callDirection: 'outbound',
+    provider: 'whatsapp',
   });
 
   useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
@@ -146,7 +125,7 @@ const startWhatsappCall = async (inboxId, conversationIdHint) => {
 };
 
 const startCall = async (inboxId, conversationIdHint = null) => {
-  if (isCallButtonDisabled.value) return;
+  if (isInitiatingCall.value) return;
 
   const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
   if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
@@ -166,11 +145,12 @@ const startCall = async (inboxId, conversationIdHint = null) => {
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
+    const callsStore = useCallsStore();
     callsStore.addCall({
       callSid,
       conversationId,
       inboxId,
-      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+      callDirection: 'outbound',
     });
 
     useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
@@ -218,7 +198,7 @@ const onPickInbox = async inbox => {
       v-if="shouldRender"
       v-tooltip.top-end="tooltipLabel || null"
       v-bind="attrs"
-      :disabled="isCallButtonDisabled"
+      :disabled="isInitiatingCall"
       :is-loading="isInitiatingCall"
       :label="label"
       :icon="icon"

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

@@ -142,26 +142,28 @@ watch(
 
 <style lang="scss" scoped>
 .editor-wrapper {
-  :deep(.ProseMirror-menubar-wrapper) {
-    .ProseMirror.ProseMirror-woot-style {
-      p {
-        @apply first:mt-0 !important;
-      }
+  ::v-deep {
+    .ProseMirror-menubar-wrapper {
+      .ProseMirror.ProseMirror-woot-style {
+        p {
+          @apply first:mt-0 !important;
+        }
 
-      .empty-node {
-        @apply m-0 !important;
+        .empty-node {
+          @apply m-0 !important;
 
-        &::before {
-          @apply text-n-slate-11 dark:text-n-slate-11;
+          &::before {
+            @apply text-n-slate-11 dark:text-n-slate-11;
+          }
         }
       }
-    }
 
-    .ProseMirror-menubar {
-      width: fit-content !important;
-      position: relative !important;
-      top: unset !important;
-      @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      .ProseMirror-menubar {
+        width: fit-content !important;
+        position: relative !important;
+        top: unset !important;
+        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      }
     }
   }
 }

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

@@ -13,7 +13,6 @@ 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 EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.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';
@@ -132,7 +131,7 @@ const statusText = computed(() => {
 
 const categoryName = computed(() => {
   if (props.category?.slug) {
-    return props.category.name;
+    return `${props.category.icon} ${props.category.name}`;
   }
   return t(
     'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
@@ -223,15 +222,7 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span
-          class="flex items-center gap-1 text-sm whitespace-nowrap text-n-slate-11"
-        >
-          <EmojiIcon
-            v-if="category?.icon"
-            :value="category.icon"
-            :color="category.icon_color"
-            class="flex-shrink-0 size-4"
-          />
+        <span class="block text-sm whitespace-nowrap text-n-slate-11">
           {{ categoryName }}
         </span>
         <div

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

@@ -6,7 +6,6 @@ import { useToggle } from '@vueuse/core';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   id: {
@@ -21,10 +20,6 @@ const props = defineProps({
     type: String,
     required: true,
   },
-  iconColor: {
-    type: String,
-    default: '',
-  },
   description: {
     type: String,
     required: true,
@@ -60,6 +55,10 @@ const categoryMenuItems = [
   },
 ];
 
+const categoryTitleWithIcon = computed(() => {
+  return `${props.icon} ${props.title}`;
+});
+
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -84,16 +83,10 @@ const handleAction = ({ action, value }) => {
       <div class="flex justify-between w-full gap-2">
         <div class="flex items-center justify-start w-full min-w-0 gap-2">
           <span
-            class="flex items-center gap-1.5 text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
+            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
             @click="handleClick(slug)"
           >
-            <EmojiIcon
-              v-if="icon"
-              :value="icon"
-              :color="iconColor"
-              class="shrink-0 size-4"
-            />
-            <span class="truncate">{{ title }}</span>
+            {{ categoryTitleWithIcon }}
           </span>
           <span
             class="inline-flex items-center justify-center h-6 px-2 py-1 text-xs text-center border rounded-lg bg-n-slate-1 whitespace-nowrap shrink-0 text-n-slate-11 border-n-slate-4"

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

@@ -53,9 +53,6 @@ const localeMenuLabels = computed(() => ({
   'publish-locale': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
   ),
-  'customize-content': t(
-    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
-  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 
@@ -131,7 +128,7 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

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

@@ -145,43 +145,45 @@ const handleCreateArticle = event => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.ProseMirror .empty-node::before) {
-  @apply text-n-slate-10 text-base;
-}
-
-:deep(.ProseMirror-menubar-wrapper) {
-  .ProseMirror-woot-style {
-    @apply min-h-[15rem] max-h-full;
+::v-deep {
+  .ProseMirror .empty-node::before {
+    @apply text-n-slate-10 text-base;
   }
-}
 
-:deep(.ProseMirror-menubar) {
-  display: none; // Hide by default
-}
-
-:deep(.editor-root .has-selection) {
-  .ProseMirror-menubar:not(:has(*)) {
-    display: none !important;
+  .ProseMirror-menubar-wrapper {
+    .ProseMirror-woot-style {
+      @apply min-h-[15rem] max-h-full;
+    }
   }
 
   .ProseMirror-menubar {
-    @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
-    display: flex;
-    top: var(--selection-top, auto) !important;
-    left: var(--selection-left, 0) !important;
-    width: fit-content !important;
-    position: absolute !important;
+    display: none; // Hide by default
+  }
 
-    .ProseMirror-menuitem {
-      @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
-
-      .ProseMirror-icon {
-        @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
-      }
+  .editor-root .has-selection {
+    .ProseMirror-menubar:not(:has(*)) {
+      display: none !important;
     }
 
-    .ProseMirror-menu-active {
-      @apply bg-n-slate-3;
+    .ProseMirror-menubar {
+      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      display: flex;
+      top: var(--selection-top, auto) !important;
+      left: var(--selection-left, 0) !important;
+      width: fit-content !important;
+      position: absolute !important;
+
+      .ProseMirror-menuitem {
+        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
+
+        .ProseMirror-icon {
+          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
+        }
+      }
+
+      .ProseMirror-menu-active {
+        @apply bg-n-slate-3;
+      }
     }
   }
 }

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

@@ -8,7 +8,6 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import ArticleEditorProperties from 'dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorProperties.vue';
 
 const props = defineProps({
@@ -108,11 +107,10 @@ const selectedCategory = computed(() => {
 const categoryList = computed(() => {
   return (
     categories.value
-      .map(({ name, id, icon, icon_color: iconColor }) => ({
+      .map(({ name, id, icon }) => ({
         label: name,
         value: id,
         emoji: icon,
-        iconColor,
         isSelected: isNewArticle.value
           ? id === (selectedCategoryId.value || selectedCategory.value?.id)
           : id === props.article?.category?.id,
@@ -204,6 +202,10 @@ onMounted(() => {
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
+          :label="
+            selectedCategory?.name ||
+            t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
+          "
           :icon="!selectedCategory?.icon ? 'i-lucide-shapes' : ''"
           variant="ghost"
           color="slate"
@@ -211,20 +213,12 @@ onMounted(() => {
           @click="openCategoryList = !openCategoryList"
         >
           <span
-            class="flex items-center gap-1.5 min-w-0 text-sm text-n-slate-12 hover:text-n-slate-11"
+            v-if="selectedCategory"
+            class="text-sm text-n-slate-12 hover:text-n-slate-11"
           >
-            <EmojiIcon
-              v-if="selectedCategory?.icon"
-              :value="selectedCategory.icon"
-              :color="selectedCategory.icon_color"
-              class="flex-shrink-0 size-4"
-            />
-            <span class="truncate">
-              {{
-                selectedCategory?.name ||
-                t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')
-              }}
-            </span>
+            {{
+              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
+            }}
           </span>
         </Button>
         <DropdownMenu

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

@@ -13,7 +13,6 @@ import {
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   categories: {
@@ -64,15 +63,18 @@ const activeTabIndex = computed(() => {
   return tabs.value.findIndex(tab => tab.value === tabParam);
 });
 
-const activeCategory = computed(() =>
-  props.categories.find(category => category.slug === route.params.categorySlug)
-);
+const activeCategoryName = computed(() => {
+  const activeCategory = props.categories.find(
+    category => category.slug === route.params.categorySlug
+  );
 
-const activeCategoryName = computed(
-  () =>
-    activeCategory.value?.name ||
-    t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL')
-);
+  if (activeCategory) {
+    const { icon, name } = activeCategory;
+    return `${icon} ${name}`;
+  }
+
+  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
+});
 
 const activeLocaleName = computed(() => {
   return props.allowedLocales.find(
@@ -92,7 +94,6 @@ const categoryMenuItems = computed(() => {
     value: category.slug,
     action: 'filter',
     emoji: category.icon,
-    iconColor: category.icon_color,
   }));
 
   const hasCategorySlug = !!route.params.categorySlug;
@@ -166,23 +167,14 @@ const handleTabChange = value => {
         <div v-if="hasCategoryMenuItems" class="relative group">
           <OnClickOutside @trigger="isCategoryMenuOpen = false">
             <Button
+              :label="activeCategoryName"
               icon="i-lucide-chevron-down"
               size="sm"
               color="slate"
               trailing-icon
               class="max-w-48"
               @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-            >
-              <span class="flex items-center gap-1.5 min-w-0">
-                <EmojiIcon
-                  v-if="activeCategory?.icon"
-                  :value="activeCategory.icon"
-                  :color="activeCategory.icon_color"
-                  class="flex-shrink-0 size-4"
-                />
-                <span class="truncate">{{ activeCategoryName }}</span>
-              </span>
-            </Button>
+            />
 
             <DropdownMenu
               v-if="isCategoryMenuOpen"

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

@@ -2,7 +2,6 @@
 import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
-import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
@@ -19,7 +18,6 @@ import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/A
 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 DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import BulkTranslateDialog from './BulkTranslateDialog.vue';
 
 const props = defineProps({
@@ -64,7 +62,6 @@ const isFeatureEnabledonAccount = useMapGetter(
 
 const selectedArticleIds = ref(new Set());
 const deleteConfirmDialogRef = ref(null);
-const isCategoryMenuOpen = ref(false);
 
 const { isEnterprise } = useConfig();
 
@@ -224,35 +221,6 @@ const bulkUpdateStatus = async status => {
   }
 };
 
-const categoryMenuItems = computed(() =>
-  props.categories.map(category => ({
-    label: category.name,
-    value: category.id,
-    action: 'move',
-    emoji: category.icon,
-    iconColor: category.icon_color,
-  }))
-);
-
-const handleBulkUpdateCategory = async ({ value }) => {
-  isCategoryMenuOpen.value = false;
-  try {
-    await articlesAPI.bulkUpdateCategory({
-      portalSlug: route.params.portalSlug,
-      articleIds: [...selectedArticleIds.value],
-      categoryId: value,
-    });
-    onBulkActionSuccess(
-      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_SUCCESS')
-    );
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_ERROR')
-    );
-  }
-};
-
 const confirmBulkDelete = () => {
   deleteConfirmDialogRef.value?.open();
 };
@@ -372,30 +340,6 @@ watch(
                   class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
                   @click="bulkUpdateStatus('archived')"
                 />
-                <div v-if="categoryMenuItems.length" class="relative group">
-                  <OnClickOutside @trigger="isCategoryMenuOpen = false">
-                    <Button
-                      sm
-                      faded
-                      slate
-                      icon="i-lucide-folder-input"
-                      :label="
-                        t(
-                          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.MOVE_TO_CATEGORY'
-                        )
-                      "
-                      class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
-                      @click="isCategoryMenuOpen = !isCategoryMenuOpen"
-                    />
-                    <DropdownMenu
-                      v-if="isCategoryMenuOpen"
-                      :menu-items="categoryMenuItems"
-                      show-search
-                      class="right-0 w-48 mt-2 top-full max-h-60"
-                      @action="handleBulkUpdateCategory"
-                    />
-                  </OnClickOutside>
-                </div>
                 <Button
                   v-if="isTranslationAvailable"
                   sm

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

@@ -38,8 +38,8 @@ const { t } = useI18n();
 const route = useRoute();
 
 const handleCategory = async formData => {
-  const { id, name, slug, icon, iconColor, description, locale } = formData;
-  const categoryData = { name, icon, icon_color: iconColor, slug, description };
+  const { id, name, slug, icon, description, locale } = formData;
+  const categoryData = { name, icon, slug, description };
 
   if (props.mode === 'create') {
     categoryData.locale = locale;

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

@@ -18,7 +18,6 @@ import { convertToCategorySlug } from 'dashboard/helper/commons.js';
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 const props = defineProps({
   mode: {
@@ -50,9 +49,8 @@ const props = defineProps({
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const EmojiIconPicker = defineAsyncComponent(
-  () =>
-    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
 );
 
 const { t } = useI18n();
@@ -74,7 +72,6 @@ const state = reactive({
   id: '',
   name: '',
   icon: '',
-  iconColor: '',
   slug: '',
   description: '',
   locale: '',
@@ -112,19 +109,8 @@ const slugHelpText = computed(() => {
   });
 });
 
-const onSelectIcon = ({ type, value, color }) => {
-  state.icon = value;
-  state.iconColor = type === 'icon' ? color : '';
-  isEmojiPickerOpen.value = false;
-};
-
-const onColorChange = color => {
-  state.iconColor = color;
-};
-
-const onRemoveIcon = () => {
-  state.icon = '';
-  state.iconColor = '';
+const onClickInsertEmoji = emoji => {
+  state.icon = emoji;
   isEmojiPickerOpen.value = false;
 };
 
@@ -153,14 +139,7 @@ watch(
   newCategory => {
     if (props.mode === 'edit' && newCategory) {
       const { id, name, icon, slug, description } = newCategory;
-      Object.assign(state, {
-        id,
-        name,
-        icon,
-        iconColor: newCategory.icon_color || '',
-        slug,
-        description,
-      });
+      Object.assign(state, { id, name, icon, slug, description });
     }
   },
   { immediate: true }
@@ -218,29 +197,19 @@ defineExpose({ state, isSubmitDisabled });
           <template #prefix>
             <OnClickOutside @trigger="isEmojiPickerOpen = false">
               <Button
-                type="button"
-                variant="ghost"
+                :label="state.icon"
                 color="slate"
-                class="!h-[2.38rem] !w-[2.375rem] !p-0 absolute top-[2rem] start-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                size="sm"
+                type="button"
+                :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
+                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
-              >
-                <EmojiIcon
-                  v-if="state.icon"
-                  :value="state.icon"
-                  :color="state.iconColor"
-                  class="size-5 text-xl !leading-5"
-                />
-                <span v-else class="i-lucide-smile-plus size-4" />
-              </Button>
-              <EmojiIconPicker
+              />
+              <EmojiInput
                 v-if="isEmojiPickerOpen"
                 class="left-0 top-16"
-                :value="state.icon"
-                :color="state.iconColor"
                 show-remove-button
-                @select="onSelectIcon"
-                @color-change="onColorChange"
-                @remove="onRemoveIcon"
+                :on-click="onClickInsertEmoji"
               />
             </OnClickOutside>
           </template>

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

@@ -106,7 +106,6 @@ const breadcrumbItems = computed(() => {
         }
       ),
       emoji: selectedCategoryEmoji.value,
-      iconColor: selectedCategory.value?.icon_color,
     });
   }
   return items;

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

@@ -68,7 +68,6 @@ watch(
           :id="element.id"
           :title="element.name"
           :icon="element.icon"
-          :icon-color="element.icon_color"
           :description="element.description"
           :articles-count="element.meta?.articles_count || 0"
           :slug="element.slug"

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

@@ -52,8 +52,8 @@ const activeLocaleCode = computed(() => activeLocale.value?.code ?? '');
 const onUpdateCategory = async () => {
   if (!categoryFormRef.value) return;
   const { state } = categoryFormRef.value;
-  const { id, name, slug, icon, iconColor, description } = state;
-  const categoryData = { name, icon, icon_color: iconColor, slug, description };
+  const { id, name, slug, icon, description } = state;
+  const categoryData = { name, icon, slug, description };
   categoryData.id = id;
 
   try {

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

@@ -1,98 +0,0 @@
-<script setup>
-import { ref, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-
-const props = defineProps({
-  portal: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const { t } = useI18n();
-const store = useStore();
-
-const dialogRef = ref(null);
-const activeLocale = ref('');
-const name = ref('');
-const pageTitle = ref('');
-const headerText = ref('');
-
-const localeTranslations = computed(
-  () => props.portal?.config?.locale_translations || {}
-);
-
-const openForLocale = localeCode => {
-  const existing = localeTranslations.value[localeCode] || {};
-  activeLocale.value = localeCode;
-  name.value = existing.name || '';
-  pageTitle.value = existing.page_title || '';
-  headerText.value = existing.header_text || '';
-  dialogRef.value?.open();
-};
-
-const onConfirm = async () => {
-  const translations = { ...localeTranslations.value };
-  const fields = {};
-  if (name.value.trim()) fields.name = name.value.trim();
-  if (pageTitle.value.trim()) fields.page_title = pageTitle.value.trim();
-  if (headerText.value.trim()) fields.header_text = headerText.value.trim();
-
-  if (Object.keys(fields).length) {
-    translations[activeLocale.value] = fields;
-  } else {
-    delete translations[activeLocale.value];
-  }
-
-  try {
-    await store.dispatch('portals/update', {
-      portalSlug: props.portal?.slug,
-      config: { locale_translations: translations },
-    });
-    dialogRef.value?.close();
-    useAlert(t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    useAlert(
-      error?.message ||
-        t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.API.ERROR_MESSAGE')
-    );
-  }
-};
-
-defineExpose({ openForLocale });
-</script>
-
-<template>
-  <Dialog
-    ref="dialogRef"
-    type="edit"
-    :title="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.TITLE')"
-    :description="t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.DESCRIPTION')"
-    @confirm="onConfirm"
-  >
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.NAME.LABEL') }}
-        </label>
-        <Input v-model="name" :placeholder="portal.name" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.PAGE_TITLE.LABEL') }}
-        </label>
-        <Input v-model="pageTitle" :placeholder="portal.page_title" />
-      </div>
-      <div class="flex flex-col gap-1">
-        <label class="text-sm font-medium text-n-slate-12">
-          {{ t('HELP_CENTER.LOCALES_PAGE.CONTENT_DIALOG.HEADER_TEXT.LABEL') }}
-        </label>
-        <Input v-model="headerText" :placeholder="portal.header_text" />
-      </div>
-    </div>
-  </Dialog>
-</template>

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

@@ -1,7 +1,5 @@
 <script setup>
-import { ref } from 'vue';
 import LocaleCard from 'dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue';
-import LocaleContentDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleContentDialog.vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
@@ -25,8 +23,6 @@ const { t } = useI18n();
 const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 
-const contentDialogRef = ref(null);
-
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
 };
@@ -152,8 +148,6 @@ const handleAction = ({ action }, localeCode) => {
     moveLocaleToDraft({ localeCode: localeCode });
   } else if (action === 'publish-locale') {
     publishLocale({ localeCode: localeCode });
-  } else if (action === 'customize-content') {
-    contentDialogRef.value.openForLocale(localeCode);
   } else if (action === 'delete') {
     deletePortalLocale({ localeCode: localeCode });
   }
@@ -173,6 +167,5 @@ const handleAction = ({ action }, localeCode) => {
       :category-count="locale.categoriesCount || 0"
       @action="handleAction($event, locale.code)"
     />
-    <LocaleContentDialog ref="contentDialogRef" :portal="portal" />
   </ul>
 </template>

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

@@ -53,9 +53,8 @@ const generateUid = () => {
 const uploadAttachment = ref(null);
 const isEmojiPickerOpen = ref(false);
 
-const EmojiIconPicker = defineAsyncComponent(
-  () =>
-    import('dashboard/components-next/emoji-icon-picker/EmojiIconPicker.vue')
+const EmojiInput = defineAsyncComponent(
+  () => import('shared/components/emoji/EmojiInput.vue')
 );
 
 const {
@@ -216,11 +215,10 @@ useEventListener(document, 'paste', onPaste);
           class="!w-10"
           @click="isEmojiPickerOpen = !isEmojiPickerOpen"
         />
-        <EmojiIconPicker
+        <EmojiInput
           v-if="isEmojiPickerOpen"
-          mode="emoji"
           class="!top-auto !bottom-full mb-1.5 ltr:left-0 rtl:right-0"
-          @select="onClickInsertEmoji($event.value)"
+          :on-click="onClickInsertEmoji"
         />
       </div>
       <FileUpload

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

@@ -182,10 +182,7 @@ const MIN_SEARCH_LENGTH = 2;
 export const createContactSearcher = () => {
   let controller = null;
 
-  return async (
-    query,
-    { skipMinLength = false, reachableOnly = true } = {}
-  ) => {
+  return async (query, { skipMinLength = false } = {}) => {
     const trimmed = typeof query === 'string' ? query.trim() : '';
 
     controller?.abort();
@@ -202,8 +199,6 @@ export const createContactSearcher = () => {
       } = await ContactAPI.search(trimmed, 1, 'name', '', { signal });
 
       const camelCasedPayload = camelcaseKeys(payload, { deep: true });
-      if (!reachableOnly) return camelCasedPayload || [];
-
       // Filter contacts that have either phone_number or email
       const filteredPayload = camelCasedPayload?.filter(
         contact => contact.phoneNumber || contact.email

app/javascript/dashboard/components-next/Settings/SettingsToggleSection.vue

@@ -32,11 +32,7 @@ const modelValue = defineModel({ type: Boolean, default: false });
         <span class="text-heading-3 text-n-slate-12">
           {{ header }}
         </span>
-        <template v-if="hideToggle">
-          <slot name="hiddenToggle">
-            <div class="size-2" />
-          </slot>
-        </template>
+        <div v-if="hideToggle" class="size-2" />
         <ToggleSwitch v-else v-model="modelValue" />
       </div>
       <span v-if="description" class="text-body-main text-n-slate-11">

app/javascript/dashboard/components-next/SharedAttachments/Files.vue

@@ -1,175 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import { formatBytes } from 'shared/helpers/FileHelper';
-import { dynamicTime, shortTimestamp } from 'shared/helpers/timeHelper';
-import { downloadFile } from '@chatwoot/utils';
-import {
-  MEDIA_TYPES,
-  NON_FILE_TYPES,
-} from 'dashboard/components-next/message/constants';
-
-import FileIcon from 'next/icon/FileIcon.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  attachments: { type: Array, default: () => [] },
-  peekLimit: { type: Number, default: 0 },
-  showJumpToMessage: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['select', 'jumpToMessage']);
-
-const { t } = useI18n();
-
-const fileAttachments = computed(() =>
-  [...props.attachments]
-    .filter(
-      a =>
-        a.data_url &&
-        !MEDIA_TYPES.includes(a.file_type) &&
-        !NON_FILE_TYPES.includes(a.file_type)
-    )
-    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
-);
-
-const showAll = ref(false);
-const downloadingId = ref(null);
-
-const isPeekable = computed(() => props.peekLimit > 0);
-
-const visibleFiles = computed(() => {
-  if (!isPeekable.value || showAll.value) return fileAttachments.value;
-  return fileAttachments.value.slice(0, props.peekLimit);
-});
-
-const fileNameFromUrl = url => {
-  if (!url) return '';
-  const name = url.split('/').pop();
-  return name ? decodeURIComponent(name) : '';
-};
-
-const displayName = attachment =>
-  fileNameFromUrl(attachment.data_url) ||
-  t('CONVERSATION_SIDEBAR.SHARED_FILES.UNTITLED_FILE');
-
-const displaySize = attachment => {
-  if (attachment.file_size) return formatBytes(attachment.file_size);
-  if (attachment.extension) return attachment.extension.toUpperCase();
-  return '—';
-};
-
-const displayTime = attachment => {
-  if (!attachment.created_at) return '';
-  return shortTimestamp(dynamicTime(attachment.created_at), true);
-};
-
-const onActivate = attachment => emit('select', attachment);
-
-const onDownloadFile = async attachment => {
-  const { id, file_type: type, data_url: url, extension } = attachment;
-  try {
-    downloadingId.value = id;
-    await downloadFile({ url, type, extension });
-  } catch (error) {
-    useAlert(t('CONVERSATION_SIDEBAR.SHARED_FILES.DOWNLOAD_ERROR'));
-  } finally {
-    downloadingId.value = null;
-  }
-};
-</script>
-
-<template>
-  <section v-if="fileAttachments.length" class="flex flex-col gap-2.5">
-    <header class="flex items-center justify-between px-0.5">
-      <h4
-        class="text-xs font-semibold tracking-wider uppercase text-n-slate-11"
-      >
-        {{ t('CONVERSATION_SIDEBAR.SHARED_FILES.FILES_HEADING') }}
-        <span
-          class="ms-1 font-medium tracking-normal normal-case text-n-slate-10"
-        >
-          {{ fileAttachments.length }}
-        </span>
-      </h4>
-      <NextButton
-        v-if="isPeekable && fileAttachments.length > peekLimit"
-        ghost
-        slate
-        xs
-        trailing-icon
-        :icon="showAll ? 'i-lucide-chevron-up' : 'i-lucide-chevron-right'"
-        :label="
-          showAll
-            ? t('CONVERSATION_SIDEBAR.SHARED_FILES.SHOW_LESS')
-            : t('CONVERSATION_SIDEBAR.SHARED_FILES.VIEW_ALL')
-        "
-        @click="showAll = !showAll"
-      />
-    </header>
-    <ul class="flex flex-col gap-0.5">
-      <li
-        v-for="attachment in visibleFiles"
-        :key="attachment.id"
-        role="button"
-        tabindex="0"
-        class="flex items-center gap-3 px-2 py-2 transition-colors rounded-lg cursor-pointer hover:bg-n-slate-3 group focus:outline-none focus-visible:ring-2 focus-visible:ring-n-blue-9"
-        @click="onActivate(attachment)"
-        @keydown.enter="onActivate(attachment)"
-        @keydown.space.prevent="onActivate(attachment)"
-      >
-        <div
-          class="flex items-center justify-center rounded-lg size-9 shrink-0 bg-gradient-to-br from-n-slate-3 to-n-slate-4 ring-1 ring-inset ring-n-slate-4/40"
-        >
-          <FileIcon
-            :file-type="attachment.extension?.toLowerCase() || ''"
-            class="size-4 text-n-slate-11"
-          />
-        </div>
-        <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium truncate text-n-slate-12 mb-1">
-            {{ displayName(attachment) }}
-          </p>
-          <p class="text-xs text-n-slate-11">
-            {{ displaySize(attachment) }}
-            <template v-if="displayTime(attachment)">
-              · {{ displayTime(attachment) }}
-            </template>
-          </p>
-        </div>
-        <div class="flex items-center gap-1">
-          <NextButton
-            v-if="showJumpToMessage && attachment.message_id"
-            v-tooltip.top="{
-              content: t('CONVERSATION_SIDEBAR.SHARED_FILES.JUMP_TO_MESSAGE'),
-              delay: { show: 500, hide: 0 },
-            }"
-            ghost
-            slate
-            sm
-            icon="i-lucide-external-link"
-            class="opacity-0 group-hover:opacity-100"
-            :aria-label="t('CONVERSATION_SIDEBAR.SHARED_FILES.JUMP_TO_MESSAGE')"
-            @click.stop="emit('jumpToMessage', attachment)"
-            @keydown.enter.stop
-            @keydown.space.stop
-          />
-          <NextButton
-            ghost
-            slate
-            sm
-            icon="i-lucide-download"
-            class="opacity-0 group-hover:opacity-100"
-            :is-loading="downloadingId === attachment.id"
-            :aria-label="t('CONVERSATION_SIDEBAR.SHARED_FILES.DOWNLOAD')"
-            @click.stop="onDownloadFile(attachment)"
-            @keydown.enter.stop
-            @keydown.space.stop
-          />
-        </div>
-      </li>
-    </ul>
-  </section>
-  <template v-else />
-</template>

app/javascript/dashboard/components-next/SharedAttachments/Media.vue

@@ -1,305 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useAlert } from 'dashboard/composables';
-import {
-  dynamicTime,
-  formatDuration,
-  shortTimestamp,
-} from 'shared/helpers/timeHelper';
-import { downloadFile } from '@chatwoot/utils';
-import {
-  ATTACHMENT_TYPES,
-  MEDIA_TYPES,
-} from 'dashboard/components-next/message/constants';
-
-import Icon from 'next/icon/Icon.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-const props = defineProps({
-  attachments: { type: Array, default: () => [] },
-  peekLimit: { type: Number, default: 0 },
-  showJumpToMessage: { type: Boolean, default: false },
-});
-
-const emit = defineEmits(['select', 'jumpToMessage']);
-
-const { t } = useI18n();
-
-const mediaAttachments = computed(() =>
-  [...props.attachments]
-    .filter(a => a.data_url && MEDIA_TYPES.includes(a.file_type))
-    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
-);
-
-const showAll = ref(false);
-const failedThumbs = ref(new Set());
-const failedPreviews = ref(new Set());
-const durations = ref({});
-const downloadingId = ref(null);
-
-const isPeekable = computed(() => props.peekLimit > 0);
-
-const visibleMedia = computed(() => {
-  if (!isPeekable.value || showAll.value) return mediaAttachments.value;
-  return mediaAttachments.value.slice(0, props.peekLimit);
-});
-
-const overflow = computed(() => {
-  if (!isPeekable.value) return 0;
-  const total = mediaAttachments.value.length;
-  return total > props.peekLimit ? total - (props.peekLimit - 1) : 0;
-});
-
-const fileNameFromUrl = url => {
-  if (!url) return '';
-  const name = url.split('/').pop();
-  return name ? decodeURIComponent(name) : '';
-};
-
-const isVideoType = type =>
-  [ATTACHMENT_TYPES.VIDEO, ATTACHMENT_TYPES.IG_REEL].includes(type);
-const isAudioType = type => type === ATTACHMENT_TYPES.AUDIO;
-const isPlayableType = type => isVideoType(type) || isAudioType(type);
-
-const imagePreviewSrc = ({
-  id,
-  file_type: type,
-  thumb_url: thumbUrl,
-  data_url: dataUrl,
-}) => {
-  const canUseThumb = thumbUrl && !failedThumbs.value.has(id);
-  if (type === ATTACHMENT_TYPES.IMAGE) return canUseThumb ? thumbUrl : dataUrl;
-  if (isVideoType(type)) return canUseThumb ? thumbUrl : null;
-  return null;
-};
-
-const onPreviewError = ({
-  id,
-  file_type: type,
-  thumb_url: thumbUrl,
-  data_url: dataUrl,
-}) => {
-  const canRetryWithFull = thumbUrl && !failedThumbs.value.has(id) && dataUrl;
-  if (
-    canRetryWithFull &&
-    (type === ATTACHMENT_TYPES.IMAGE || isVideoType(type))
-  ) {
-    failedThumbs.value.add(id);
-    return;
-  }
-  failedPreviews.value.add(id);
-};
-
-const hasPreview = attachment =>
-  !!imagePreviewSrc(attachment) && !failedPreviews.value.has(attachment.id);
-
-const hasVideoPreview = attachment =>
-  isVideoType(attachment.file_type) &&
-  attachment.data_url &&
-  !failedPreviews.value.has(attachment.id);
-
-const fallbackIcon = type => {
-  if (isAudioType(type)) return 'i-lucide-music';
-  if (isVideoType(type)) return 'i-lucide-video';
-  return 'i-lucide-image';
-};
-
-const onLoadedMetadata = (attachment, event) => {
-  const seconds = event.target?.duration;
-  if (Number.isFinite(seconds) && seconds > 0) {
-    durations.value[attachment.id] = seconds;
-  }
-};
-
-const displayDuration = attachment => {
-  const seconds = durations.value[attachment.id];
-  return seconds ? formatDuration(Math.round(seconds)) : '';
-};
-
-const displayTime = attachment => {
-  if (!attachment.created_at) return '';
-  return shortTimestamp(dynamicTime(attachment.created_at), true);
-};
-
-const isOverflowTile = index =>
-  isPeekable.value &&
-  !showAll.value &&
-  overflow.value > 0 &&
-  index === props.peekLimit - 1;
-
-const onTileActivate = (attachment, index) => {
-  if (isOverflowTile(index)) {
-    showAll.value = true;
-    return;
-  }
-  emit('select', attachment);
-};
-
-const onDownloadFile = async attachment => {
-  const { id, file_type: type, data_url: url, extension } = attachment;
-  try {
-    downloadingId.value = id;
-    await downloadFile({ url, type, extension });
-  } catch (error) {
-    useAlert(t('CONVERSATION_SIDEBAR.SHARED_FILES.DOWNLOAD_ERROR'));
-  } finally {
-    downloadingId.value = null;
-  }
-};
-</script>
-
-<template>
-  <section v-if="mediaAttachments.length" class="flex flex-col gap-2.5">
-    <header class="flex items-center justify-between px-0.5">
-      <h4
-        class="text-xs font-semibold tracking-wider uppercase text-n-slate-11"
-      >
-        {{ t('CONVERSATION_SIDEBAR.SHARED_FILES.MEDIA_HEADING') }}
-        <span
-          class="ms-1 font-medium tracking-normal normal-case text-n-slate-10"
-        >
-          {{ mediaAttachments.length }}
-        </span>
-      </h4>
-      <NextButton
-        v-if="overflow > 0"
-        ghost
-        slate
-        xs
-        trailing-icon
-        :icon="showAll ? 'i-lucide-chevron-up' : 'i-lucide-chevron-right'"
-        :label="
-          showAll
-            ? t('CONVERSATION_SIDEBAR.SHARED_FILES.SHOW_LESS')
-            : t('CONVERSATION_SIDEBAR.SHARED_FILES.VIEW_ALL')
-        "
-        @click="showAll = !showAll"
-      />
-    </header>
-    <div class="grid grid-cols-3 gap-2">
-      <div
-        v-for="(attachment, index) in visibleMedia"
-        :key="attachment.id"
-        role="button"
-        tabindex="0"
-        class="relative w-full overflow-hidden transition-all duration-200 rounded-lg cursor-pointer aspect-square bg-n-slate-3 shadow-sm hover:shadow-md hover:-translate-y-px group focus:outline-none focus-visible:ring-2 focus-visible:ring-n-blue-9"
-        @click="onTileActivate(attachment, index)"
-        @keydown.enter="onTileActivate(attachment, index)"
-        @keydown.space.prevent="onTileActivate(attachment, index)"
-      >
-        <template v-if="!isOverflowTile(index)">
-          <img
-            v-if="hasPreview(attachment)"
-            :src="imagePreviewSrc(attachment)"
-            class="object-cover w-full h-full transition-transform duration-300 group-hover:scale-110"
-            loading="lazy"
-            :alt="fileNameFromUrl(attachment.data_url)"
-            @error="onPreviewError(attachment)"
-          />
-          <video
-            v-else-if="hasVideoPreview(attachment)"
-            :src="`${attachment.data_url}#t=0.1`"
-            preload="metadata"
-            muted
-            playsinline
-            class="object-cover w-full h-full transition-transform duration-300 group-hover:scale-110 pointer-events-none"
-            @loadedmetadata="onLoadedMetadata(attachment, $event)"
-            @error="onPreviewError(attachment)"
-          />
-          <div
-            v-else
-            class="flex items-center justify-center w-full h-full bg-gradient-to-br from-n-slate-3 to-n-slate-4"
-          >
-            <Icon
-              :icon="fallbackIcon(attachment.file_type)"
-              class="size-6 text-n-slate-11"
-            />
-          </div>
-
-          <audio
-            v-if="isAudioType(attachment.file_type) && attachment.data_url"
-            :src="attachment.data_url"
-            preload="metadata"
-            class="hidden"
-            @loadedmetadata="onLoadedMetadata(attachment, $event)"
-          />
-
-          <div
-            class="absolute inset-0 transition-opacity duration-200 opacity-0 pointer-events-none group-hover:opacity-100 bg-gradient-to-t from-black/40 via-transparent to-transparent"
-          />
-
-          <div
-            v-if="hasVideoPreview(attachment)"
-            class="absolute inset-0 flex items-center justify-center pointer-events-none bg-gradient-to-t from-black/30 via-transparent to-transparent"
-          >
-            <div
-              class="flex items-center justify-center rounded-full size-7 bg-white/95 shadow-md"
-            >
-              <Icon icon="i-lucide-play" class="ms-0.5 size-3.5 text-n-black" />
-            </div>
-          </div>
-
-          <span
-            v-if="
-              isPlayableType(attachment.file_type) &&
-              displayDuration(attachment)
-            "
-            class="absolute text-xxs font-medium tabular-nums transition-opacity bottom-1.5 ltr:right-1.5 rtl:left-1.5 text-white [text-shadow:_0_1px_3px_rgba(0,0,0,0.95),_0_0_10px_rgba(0,0,0,0.7)] group-hover:opacity-0"
-          >
-            {{ displayDuration(attachment) }}
-          </span>
-
-          <span
-            v-if="displayTime(attachment)"
-            class="absolute text-xxs font-medium transition-opacity opacity-0 bottom-1.5 ltr:left-1.5 rtl:right-1.5 text-white [text-shadow:_0_1px_3px_rgba(0,0,0,0.95),_0_0_10px_rgba(0,0,0,0.7)] group-hover:opacity-100"
-          >
-            {{ displayTime(attachment) }}
-          </span>
-
-          <button
-            type="button"
-            class="absolute flex items-center justify-center !p-px transition-all rounded-full opacity-0 bottom-1.5 ltr:right-1.5 rtl:left-1.5 size-6 bg-white/95 shadow-md group-hover:opacity-100 hover:bg-white disabled:opacity-50"
-            :disabled="downloadingId === attachment.id"
-            :aria-label="t('CONVERSATION_SIDEBAR.SHARED_FILES.DOWNLOAD')"
-            @click.stop="onDownloadFile(attachment)"
-            @keydown.enter.stop
-            @keydown.space.stop
-          >
-            <Icon icon="i-lucide-download" class="size-3 text-n-black" />
-          </button>
-
-          <button
-            v-if="showJumpToMessage && attachment.message_id"
-            v-tooltip.top="{
-              content: t('CONVERSATION_SIDEBAR.SHARED_FILES.JUMP_TO_MESSAGE'),
-              delay: { show: 500, hide: 0 },
-            }"
-            type="button"
-            class="absolute flex items-center justify-center !p-px transition-all rounded-full opacity-0 top-1.5 ltr:right-1.5 rtl:left-1.5 size-6 bg-white/95 shadow-md group-hover:opacity-100 hover:bg-white"
-            :aria-label="t('CONVERSATION_SIDEBAR.SHARED_FILES.JUMP_TO_MESSAGE')"
-            @click.stop="emit('jumpToMessage', attachment)"
-            @keydown.enter.stop
-            @keydown.space.stop
-          >
-            <Icon icon="i-lucide-external-link" class="size-3 text-n-black" />
-          </button>
-        </template>
-
-        <div
-          v-if="isOverflowTile(index)"
-          class="absolute inset-0 flex items-center justify-center bg-n-slate-5"
-        >
-          <span class="text-base font-semibold text-n-slate-12">
-            {{
-              t('CONVERSATION_SIDEBAR.SHARED_FILES.MORE_COUNT', {
-                count: overflow,
-              })
-            }}
-          </span>
-        </div>
-      </div>
-    </div>
-  </section>
-  <template v-else />
-</template>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -1,8 +1,8 @@
 <script setup>
+import { defineProps } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 
 defineProps({
   items: {
@@ -48,17 +48,8 @@ const onClick = (item, index) => {
         </button>
 
         <!-- The last breadcrumb item is plain text -->
-        <span
-          v-else
-          class="inline-flex items-center gap-1 text-sm truncate min-w-0"
-        >
-          <EmojiIcon
-            v-if="item.emoji"
-            :value="item.emoji"
-            :color="item.iconColor"
-            class="flex-shrink-0 size-4"
-          />
-          <span class="truncate text-n-slate-12">{{ item.label }}</span>
+        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
+          {{ item.emoji ? item.emoji : '' }} {{ item.label }}
         </span>
       </li>
     </ol>

app/javascript/dashboard/components-next/call/CallCard.story.vue

@@ -1,179 +0,0 @@
-<script setup>
-import CallCard from './CallCard.vue';
-import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
-import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
-
-const whatsappCall = {
-  callSid: 'wamid.HBgM',
-  conversationId: 1234,
-  provider: VOICE_CALL_PROVIDERS.WHATSAPP,
-};
-
-const twilioCall = {
-  callSid: 'CA1234567890',
-  conversationId: 1234,
-};
-
-const richCallInfo = {
-  contactName: 'John Does',
-  phoneNumber: '+1 412 245 0242',
-  inboxName: 'Customer support',
-  location: 'San Francisco, United States',
-  countryFlag: '\u{1F1FA}\u{1F1F8}',
-  hasLocation: true,
-  avatar:
-    'https://app.chatwoot.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBd3FodGc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d218a325af0ef45061eefd352f8efb9ac84275e8/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lKYW5CbFp3WTZCa1ZVT2hOeVpYTnBlbVZmZEc5ZlptbHNiRnNIYVFINk1BPT0iLCJleHAiOm51bGwsInB1ciI6InZhcmlhdGlvbiJ9fQ==--533c3ad7218e24c4b0e8f8959dc1953ce1d279b9/1707423736896.jpeg',
-};
-
-// Falls back to inbox name when neither city nor country is on the contact.
-const noLocationCallInfo = {
-  contactName: 'Anonymous Lead',
-  phoneNumber: '+44 20 7916 0428',
-  inboxName: 'Sales',
-  location: 'Sales',
-  countryFlag: '',
-  hasLocation: false,
-  avatar: '',
-};
-
-// Truncation regression check — both contact name and location should ellipsize.
-const longCallInfo = {
-  contactName: 'Aleksandra Konstantinopolskaya',
-  phoneNumber: '+49 30 911890',
-  inboxName: 'Customer support',
-  location:
-    'Friedrichshain-Kreuzberg, Federal Republic of Germany (Deutschland)',
-  countryFlag: '\u{1F1E9}\u{1F1EA}',
-  hasLocation: true,
-  avatar: '',
-};
-
-const unknownCallerInfo = {
-  contactName: 'Unknown caller',
-  phoneNumber: '',
-  inboxName: 'Customer support',
-  location: 'Customer support',
-  countryFlag: '',
-  hasLocation: false,
-  avatar: '',
-};
-
-const log =
-  (label, ...args) =>
-  () => {
-    // eslint-disable-next-line no-console
-    console.log(`[CallCard.story] ${label}`, ...args);
-  };
-</script>
-
-<template>
-  <Story
-    title="Components/Call/CallCard"
-    :layout="{ type: 'grid', width: '400px' }"
-  >
-    <Variant title="Incoming · WhatsApp">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Incoming · Twilio (no flag)">
-      <CallCard
-        :call="twilioCall"
-        :call-info="noLocationCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Outgoing · WhatsApp ringing">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.OUTGOING"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · WhatsApp (mute visible, unmuted)">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="01:23"
-        :is-muted="false"
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · WhatsApp muted">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="03:47"
-        is-muted
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · Twilio (no mute control)">
-      <CallCard
-        :call="twilioCall"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="00:42"
-        @end="log('end')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Incoming · Unknown caller">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="unknownCallerInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Truncation · long name and location">
-      <CallCard
-        :call="whatsappCall"
-        :call-info="longCallInfo"
-        :state="VOICE_CALL_DIRECTION.INCOMING"
-        @accept="log('accept')"
-        @reject="log('reject')"
-        @go-to-conversation="log('goToConversation')"
-      />
-    </Variant>
-
-    <Variant title="Ongoing · no conversation link in footer">
-      <CallCard
-        :call="{ ...whatsappCall, conversationId: null }"
-        :call-info="richCallInfo"
-        :state="VOICE_CALL_DIRECTION.ONGOING"
-        duration="02:10"
-        show-mute
-        @end="log('end')"
-        @toggle-mute="log('toggleMute')"
-      />
-    </Variant>
-  </Story>
-</template>

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

@@ -25,7 +25,7 @@ const store = useStore();
 const bulkDeleteDialog = ref(null);
 
 const isSyncableDocument = doc =>
-  !doc.pdf_document && doc.status === 'available';
+  !doc.pdf_document && doc.status === 'available' && !doc.sync_in_progress;
 
 const syncableSelectedIds = computed(() => {
   if (!props.selectedIds.size) return [];

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

@@ -127,6 +127,7 @@ const menuItems = computed(() => {
       value: 'sync',
       action: 'sync',
       icon: 'i-lucide-refresh-cw',
+      disabled: props.syncInProgress,
     });
   }
 

app/javascript/dashboard/components-next/captain/pageComponents/customTool/AuthConfig.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { watch } from 'vue';
+import { defineModel, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Input from 'dashboard/components-next/input/Input.vue';
 

app/javascript/dashboard/components-next/captain/pageComponents/customTool/ParamRow.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue';
+import { computed, defineModel, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';

app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, defineProps, defineEmits } from 'vue';
 import { Chrome } from '@lk77/vue3-color';
 import { OnClickOutside } from '@vueuse/components';
 

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

@@ -14,9 +14,6 @@ const props = defineProps({
       value.every(option => 'value' in option && 'label' in option),
   },
   placeholder: { type: String, default: '' },
-  // Fallback label shown when the selected value is not in `options` yet
-  // (e.g. API-backed lists that load lazily on open).
-  displayLabel: { type: String, default: '' },
   modelValue: { type: [String, Number], default: '' },
   disabled: { type: Boolean, default: false },
   searchPlaceholder: { type: String, default: '' },
@@ -26,7 +23,7 @@ const props = defineProps({
   useApiResults: { type: Boolean, default: false }, // useApiResults prop to determine if search is handled by API
 });
 
-const emit = defineEmits(['update:modelValue', 'search', 'open']);
+const emit = defineEmits(['update:modelValue', 'search']);
 
 const { t } = useI18n();
 
@@ -55,7 +52,7 @@ const selectedLabel = computed(() => {
   const selected = props.options.find(
     option => option.value === selectedValue.value
   );
-  return selected?.label ?? (props.displayLabel || selectPlaceholder.value);
+  return selected?.label ?? selectPlaceholder.value;
 });
 
 const selectOption = option => {
@@ -75,7 +72,6 @@ const toggleDropdown = () => {
   open.value = !open.value;
   if (open.value) {
     search.value = '';
-    emit('open');
     nextTick(() => dropdownRef.value?.focus());
   }
 };

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

@@ -87,7 +87,7 @@ defineExpose({
         }"
         role="option"
         :aria-selected="isSelected(option)"
-        @click.stop="emit('select', option)"
+        @click="emit('select', option)"
       >
         <span
           :class="{

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

@@ -1,9 +1,8 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 
@@ -163,7 +162,7 @@ onMounted(() => {
         >
           <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 truncate min-w-0"
+            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>
@@ -208,12 +207,9 @@ onMounted(() => {
                 class="flex-shrink-0 size-3.5"
               />
             </slot>
-            <EmojiIcon
-              v-if="item.emoji"
-              :value="item.emoji"
-              :color="item.iconColor"
-              class="flex-shrink-0 size-4"
-            />
+            <span v-if="item.emoji" class="flex-shrink-0">{{
+              item.emoji
+            }}</span>
             <slot name="label" :item="item">
               <span
                 v-if="item.label"
@@ -264,12 +260,7 @@ onMounted(() => {
               class="flex-shrink-0 size-3.5"
             />
           </slot>
-          <EmojiIcon
-            v-if="item.emoji"
-            :value="item.emoji"
-            :color="item.iconColor"
-            class="flex-shrink-0 size-4"
-          />
+          <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
           <slot name="label" :item="item">
             <span
               v-if="item.label"

app/javascript/dashboard/components-next/emoji-icon-picker/ColorPalette.vue

@@ -1,27 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { ICON_COLORS } from './constants';
-
-const { t } = useI18n();
-const selectedColor = defineModel({ type: String, default: '' });
-</script>
-
-<template>
-  <div class="flex items-center justify-between gap-1 px-0.5 mx-2 py-1 mb-px">
-    <button
-      v-for="color in ICON_COLORS"
-      :key="color.value"
-      v-tooltip.top="t(`EMOJI_ICON_PICKER.COLORS.${color.name}`)"
-      type="button"
-      class="flex items-center justify-center flex-shrink-0 transition-all rounded-full size-5 ring-offset-2 ring-offset-n-surface-2 hover:ring-2"
-      :class="{ 'ring-2': selectedColor === color.value }"
-      :style="{ backgroundColor: color.value, '--tw-ring-color': color.value }"
-      @click="selectedColor = color.value"
-    >
-      <span
-        v-if="selectedColor === color.value"
-        class="text-white i-lucide-check size-3"
-      />
-    </button>
-  </div>
-</template>

app/javascript/dashboard/components-next/emoji-icon-picker/EmojiIcon.vue

@@ -1,35 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { isIconValue, iconClassFor } from './constants';
-
-// Renders a saved picker value: a color-tinted icon or an emoji.
-const props = defineProps({
-  value: {
-    type: String,
-    default: '',
-  },
-  color: {
-    type: String,
-    default: '',
-  },
-});
-
-const isIcon = computed(() => isIconValue(props.value));
-const iconClass = computed(() => iconClassFor(props.value));
-const iconStyle = computed(() =>
-  props.color ? { color: props.color } : undefined
-);
-</script>
-
-<template>
-  <span class="inline-flex items-center justify-center leading-none">
-    <Icon
-      v-if="isIcon"
-      :icon="iconClass"
-      class="size-full"
-      :style="iconStyle"
-    />
-    <span v-else v-dompurify-html="value" />
-  </span>
-</template>