Merge branch 'develop' into fix/audio-retry

Facebook Messenger sticker messages no longer break message ingestion.
Meta recently changed its webhook payloads so a sticker now arrives as a
new `sticker` attachment type (alongside the existing `image` attachment
during the transition period). Chatwoot didn't recognise `sticker` as a
valid attachment file type, so the webhook job crashed and the message —
and any others in the same batch — failed to sync. Stickers now appear
in the conversation as a single image, just like before.

Fixes https://linear.app/chatwoot/issue/PLA-177

## How to reproduce

1. Connect a Facebook Page inbox.
2. Send a sticker from Messenger to that page.
3. Before this change: the `Webhooks::FacebookEventsJob` raises
`ArgumentError: 'sticker' is not a valid file_type` and the message is
dropped.
4. After this change: the sticker shows up in the conversation as a
single image attachment.

---------

Co-authored-by: Muhsin <12408980+muhsin-k@users.noreply.github.com>
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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'
+gem 'puma', '~> 7.2', '>= 7.2.1'
 gem 'vite_rails'
 # metrics on heroku
 gem 'barnes'

Gemfile.lock

@@ -136,6 +136,8 @@ 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)
@@ -168,7 +170,7 @@ GEM
     base64 (0.3.0)
     bcrypt (3.1.22)
     benchmark (0.4.1)
-    bigdecimal (3.2.2)
+    bigdecimal (4.1.2)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -184,6 +186,7 @@ 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)
@@ -271,8 +274,8 @@ GEM
       dry-logic (~> 1.5)
       dry-types (~> 1.8)
       zeitwerk (~> 2.6)
-    dry-types (1.8.3)
-      bigdecimal (~> 3.0)
+    dry-types (1.9.1)
+      bigdecimal (>= 3.0)
       concurrent-ruby (~> 1.0)
       dry-core (~> 1.0)
       dry-inflector (~> 1.0)
@@ -312,7 +315,7 @@ GEM
       hashie
     faraday-multipart (1.2.0)
       multipart-post (~> 2.0)
-    faraday-net_http (3.4.2)
+    faraday-net_http (3.4.4)
       net-http (~> 0.5)
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
@@ -435,7 +438,8 @@ GEM
     hana (1.3.7)
     hash_diff (1.1.1)
     hashdiff (1.1.0)
-    hashie (5.0.0)
+    hashie (5.1.0)
+      logger
     html2text (0.4.0)
       nokogiri (>= 1.0, < 2.0)
     http (5.1.1)
@@ -470,7 +474,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
-    json (2.19.5)
+    json (2.19.8)
     json_refs (0.1.8)
       hana
     json_schemer (0.2.24)
@@ -568,7 +572,7 @@ GEM
       ruby2_keywords
     msgpack (1.8.0)
     multi_json (1.15.0)
-    multi_xml (0.8.0)
+    multi_xml (0.9.1)
       bigdecimal (>= 3.1, < 5)
     multipart-post (2.4.1)
     mutex_m (0.3.0)
@@ -578,7 +582,7 @@ GEM
       uri (>= 0.11.1)
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
-    net-imap (0.4.24)
+    net-imap (0.6.4.1)
       date
       net-protocol
     net-pop (0.1.2)
@@ -593,30 +597,37 @@ GEM
       sidekiq
     newrelic_rpm (9.6.0)
       base64
-    nio4r (2.7.3)
-    nokogiri (1.19.3)
+    nio4r (2.7.5)
+    nokogiri (1.19.4)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
-    nokogiri (1.19.3-arm64-darwin)
+    nokogiri (1.19.4-arm64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.3-x86_64-darwin)
+    nokogiri (1.19.4-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.19.3-x86_64-linux-gnu)
+    nokogiri (1.19.4-x86_64-linux-gnu)
       racc (~> 1.4)
-    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)
+    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)
       multi_xml (~> 0.5)
       rack (>= 1.2, < 4)
-      snaky_hash (~> 2.0)
-      version_gem (~> 1.1)
-    oj (3.16.10)
+      snaky_hash (~> 2.0, >= 2.0.5)
+      version_gem (~> 1.1, >= 1.1.11)
+    oj (3.17.3)
       bigdecimal (>= 3.0)
       ostruct (>= 0.2)
     omniauth (2.1.4)
@@ -663,7 +674,7 @@ GEM
       opentelemetry-api (~> 1.0)
     orm_adapter (0.5.0)
     os (1.1.4)
-    ostruct (0.6.1)
+    ostruct (0.6.3)
     parallel (1.27.0)
     parser (3.3.8.0)
       ast (~> 2.4.1)
@@ -682,7 +693,7 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (7.0.5)
-    puma (6.4.3)
+    puma (7.2.1)
       nio4r (~> 2.0)
     pundit (2.3.0)
       activesupport (>= 3.0.0)
@@ -935,9 +946,9 @@ GEM
       gli
       hashie
       logger
-    snaky_hash (2.0.1)
-      hashie
-      version_gem (~> 1.1, >= 1.1.1)
+    snaky_hash (2.0.5)
+      hashie (>= 0.1.0, < 6)
+      version_gem (>= 1.1.8, < 3)
     sorbet-runtime (0.5.11934)
     spring (4.1.1)
     spring-watcher-listen (2.1.0)
@@ -995,12 +1006,14 @@ GEM
     valid_email2 (5.2.6)
       activemodel (>= 3.2)
       mail (~> 2.5)
-    version_gem (1.1.4)
-    vite_rails (3.0.17)
-      railties (>= 5.1, < 8)
+    version_gem (1.1.11)
+    vite_rails (3.10.0)
+      railties (>= 5.1, < 9)
       vite_ruby (~> 3.0, >= 3.2.2)
-    vite_ruby (3.8.0)
+    vite_ruby (3.10.2)
       dry-cli (>= 0.7, < 2)
+      logger (~> 1.6)
+      mutex_m
       rack-proxy (~> 0.6, >= 0.6.1)
       zeitwerk (~> 2.2)
     warden (1.2.9)
@@ -1130,7 +1143,7 @@ DEPENDENCIES
   pgvector
   procore-sift
   pry-rails
-  puma
+  puma (~> 7.2, >= 7.2.1)
   pundit
   rack-attack (>= 6.7.0)
   rack-cors (= 2.0.0)

VERSION_CW

@@ -1 +1 @@
-4.14.1
+4.15.1

app/builders/contact_inbox_with_contact_builder.rb

@@ -50,7 +50,7 @@ class ContactInboxWithContactBuilder
 
   def create_contact
     account.contacts.create!(
-      name: contact_attributes[:name] || ::Haikunator.haikunate(1000),
+      name: contact_name,
       phone_number: contact_attributes[:phone_number],
       email: contact_attributes[:email],
       identifier: contact_attributes[:identifier],
@@ -59,6 +59,11 @@ 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,10 +92,18 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
   def fallback_params(attachment)
     {
       fallback_title: attachment['title'],
-      external_url: attachment['url']
+      external_url: attachment['url'] || attachment.dig('payload', '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,6 +13,7 @@ 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)
 
@@ -56,16 +57,25 @@ class Messages::MessageBuilder
         file: uploaded_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
+      attachment.file_type = attachment_file_type(uploaded_attachment)
+      tag_voice_message(attachment)
     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/builders/messages/messenger/message_builder.rb

@@ -6,6 +6,11 @@ class Messages::Messenger::MessageBuilder
     return if unsupported_file_type?(attachment['type'])
 
     params = attachment_params(attachment)
+    # During Meta's sticker webhook transition, a sticker message carries both an `image`
+    # and a `sticker` attachment pointing to the same URL. Skip the redundant sticker so it
+    # isn't attached twice, while still storing legitimate duplicate attachments of other types.
+    return if duplicate_sticker?(attachment, params[:external_url])
+
     attachment_obj = @message.attachments.new(params.except(:remote_file_url))
     attachment_obj.save!
     if facebook_reel?(attachment)
@@ -13,10 +18,14 @@ class Messages::Messenger::MessageBuilder
     elsif params[:remote_file_url]
       attach_file(attachment_obj, params[:remote_file_url])
     end
+    fetch_attachment_links(attachment_obj)
+    update_attachment_file_type(attachment_obj)
+  end
+
+  def fetch_attachment_links(attachment_obj)
     fetch_story_link(attachment_obj) if attachment_obj.file_type == 'story_mention'
     fetch_ig_story_link(attachment_obj) if attachment_obj.file_type == 'ig_story'
     fetch_ig_post_link(attachment_obj) if attachment_obj.file_type == 'ig_post'
-    update_attachment_file_type(attachment_obj)
   end
 
   def attach_file(attachment, file_url)
@@ -111,13 +120,20 @@ class Messages::Messenger::MessageBuilder
 
   # Facebook may send attachment types that don't directly match our file_type enum.
   # Map known aliases to their canonical enum values.
-  FACEBOOK_FILE_TYPE_MAP = { reel: :ig_reel }.freeze
+  FACEBOOK_FILE_TYPE_MAP = { reel: :ig_reel, sticker: :image }.freeze
 
   def normalize_file_type(type)
     sym = type.to_sym
     FACEBOOK_FILE_TYPE_MAP.fetch(sym, sym)
   end
 
+  def duplicate_sticker?(attachment, url)
+    return false unless attachment['type'].to_sym == :sticker
+    return false if url.blank?
+
+    @message.attachments.any? { |existing| existing.external_url == url }
+  end
+
   # Facebook sends reel URLs as webpage links (facebook.com/reel/...) rather than
   # direct video URLs. Downloading these yields HTML, not video content.
   def facebook_reel?(attachment)

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, :parent_category_id, :associated_category_id
+      :name, :description, :position, :slug, :locale, :icon, :icon_color, :parent_category_id, :associated_category_id
     )
   end
 

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

@@ -214,3 +214,5 @@ 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_controller.rb

@@ -140,7 +140,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
 
   def destroy
     authorize @conversation, :destroy?
-    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
+    ::Conversations::DeleteService.new(conversation: @conversation, user: Current.user, ip: request.ip).perform
     head :ok
   end
 

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)
+        state: generate_instagram_token(Current.account.id, params[:return_to])
       }
     )
     if redirect_url

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

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

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

@@ -8,7 +8,15 @@ class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseC
   end
 
   def state
-    Current.account.to_sgid(expires_in: 15.minutes).to_s
+    # 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'
   end
 
   def base_url

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

@@ -0,0 +1,51 @@
+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,10 +80,15 @@ 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] }] }
+                 { social_profiles: %i[facebook x instagram linkedin youtube tiktok github whatsapp] },
+                 { locale_translations: locale_translation_keys.index_with { %i[name page_title header_text] } }] }
     )
   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)
+      state: generate_tiktok_token(Current.account.id, params[:return_to])
     )
 
     if redirect_url

app/controllers/api/v1/accounts_controller.rb

@@ -58,7 +58,6 @@ class Api::V1::AccountsController < Api::BaseController
     @account.assign_attributes(account_params.slice(:name, :locale, :domain, :support_email))
     @account.custom_attributes.merge!(custom_attributes_params)
     @account.settings.merge!(settings_params)
-    @account.custom_attributes.delete('onboarding_step') if @account.custom_attributes['onboarding_step'] == 'account_details'
     @account.custom_attributes['onboarding_step'] = 'invite_team' if @account.custom_attributes['onboarding_step'] == 'account_update'
     @account.save!
   end

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

@@ -0,0 +1,36 @@
+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,6 +3,7 @@ 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,8 +1,9 @@
 module AccessTokenAuthHelper
   BOT_ACCESSIBLE_ENDPOINTS = {
-    'api/v1/accounts/conversations' => %w[toggle_status toggle_typing_status toggle_priority create update custom_attributes],
+    'api/v1/accounts/conversations' => %w[show 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/assignments' => ['create'],
+    'api/v1/accounts/conversations/labels' => %w[index create]
   }.freeze
 
   def ensure_access_token

app/controllers/concerns/track_session_activity.rb

@@ -0,0 +1,22 @@
+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,4 +1,6 @@
 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: []
@@ -14,12 +16,14 @@ 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
 
@@ -53,6 +57,8 @@ 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
@@ -65,7 +71,10 @@ class DeviseOverrides::SessionsController < DeviseTokenAuth::SessionsController
   end
 
   def authenticate_resource_with_sso_token
-    @token = @resource.create_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)
     @resource.save!
 
     sign_in(:user, @resource, store: false, bypass: false)
@@ -73,11 +82,21 @@ 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])
-    @resource = user if user&.valid_sso_auth_token?(params[:sso_auth_token])
+    return unless user&.valid_sso_auth_token?(params[:sso_auth_token])
+
+    @resource = user
+    @impersonation = user.sso_auth_token_impersonation?(params[:sso_auth_token])
   end
 
   def handle_mfa_required(user)
@@ -103,6 +122,7 @@ 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!
@@ -114,6 +134,103 @@ 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,6 +28,8 @@ 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
@@ -149,6 +151,10 @@ 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,4 +14,11 @@ 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,6 +16,8 @@ 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
@@ -44,7 +46,7 @@ class OauthCallbackController < ApplicationController
 
   def update_channel(channel_email)
     channel_email.update!({
-                            imap_login: users_data['email'], imap_address: imap_address,
+                            imap_login: imap_login_identity, imap_address: imap_address,
                             imap_port: '993', imap_enabled: true,
                             provider: provider_name,
                             provider_config: {
@@ -55,6 +57,13 @@ 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
@@ -81,10 +90,19 @@ 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?
 
-    account = GlobalID::Locator.locate_signed(params[:state])
+    if (account = GlobalID::Locator.locate_signed(params[:state], for: 'onboarding'))
+      @return_to = 'onboarding'
+    else
+      account = GlobalID::Locator.locate_signed(params[:state])
+    end
+
     raise 'Invalid or expired state' if account.nil?
 
     account
@@ -94,6 +112,11 @@ 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

@@ -0,0 +1,31 @@
+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.header_text)
+    @og_image_url = helpers.set_og_image_url('', @portal.localized_value('header_text', @locale))
   end
 
   def sitemap

app/controllers/tiktok/callbacks_controller.rb

@@ -20,6 +20,8 @@ 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
@@ -127,6 +129,10 @@ 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,7 +35,17 @@ class Twilio::CallbackController < ApplicationController
       :ExternalUserId,
       :ParentExternalUserId,
       :ProfileUsername,
-      :Username
+      :Username,
+      :ReferralBody,
+      :ReferralHeadline,
+      :ReferralSourceId,
+      :ReferralSourceType,
+      :ReferralSourceUrl,
+      :ReferralMediaId,
+      :ReferralMediaContentType,
+      :ReferralMediaUrl,
+      :ReferralNumMedia,
+      :ReferralCtwaClid
     )
   end
 end

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

app/finders/conversation_finder.rb

@@ -12,6 +12,7 @@ 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],
@@ -40,7 +41,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
@@ -184,6 +185,17 @@ 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)
+  def generate_instagram_token(account_id, return_to = nil)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate Instagram token: #{e.message}")
     nil
   end
 
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
+  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
   end
 
   # Verifies and decodes a Instagram JWT token
@@ -28,7 +28,14 @@ module Instagram::IntegrationHelper
   def verify_instagram_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)
+    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')
   end
 
   private
@@ -41,7 +48,7 @@ module Instagram::IntegrationHelper
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first['sub']
+               }).first
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Instagram token: #{e.message}")
     nil

app/helpers/portal_helper.rb

@@ -17,15 +17,11 @@ module PortalHelper
     uri.to_s
   end
 
-  def generate_portal_bg_color(portal_color, theme)
+  def generate_portal_bg(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})"
@@ -41,13 +37,24 @@ 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}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/#{portal_locale}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/#{portal_locale}"
     end
@@ -61,7 +68,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}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/#{category_locale}/categories/#{category_slug}"
     end
@@ -69,7 +76,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}#{theme_query_string(theme)}"
+      "/hc/#{portal_slug}/articles/#{article_slug}#{portal_query_string(theme, is_plain_layout_enabled)}"
     else
       "/hc/#{portal_slug}/articles/#{article_slug}"
     end
@@ -90,6 +97,18 @@ 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,6 +34,12 @@ 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,11 +2,12 @@ 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)
+  def generate_tiktok_token(account_id, return_to = nil)
     return if client_secret.blank?
 
-    JWT.encode(token_payload(account_id), client_secret, 'HS256')
+    JWT.encode(token_payload(account_id, return_to), client_secret, 'HS256')
   rescue StandardError => e
     Rails.logger.error("Failed to generate TikTok token: #{e.message}")
     nil
@@ -19,7 +20,14 @@ module Tiktok::IntegrationHelper
   def verify_tiktok_token(token)
     return if token.blank? || client_secret.blank?
 
-    decode_token(token, client_secret)
+    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')
   end
 
   private
@@ -28,18 +36,17 @@ module Tiktok::IntegrationHelper
     @client_secret ||= GlobalConfigService.load('TIKTOK_APP_SECRET', nil)
   end
 
-  def token_payload(account_id)
-    {
-      sub: account_id,
-      iat: Time.current.to_i
-    }
+  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
   end
 
   def decode_token(token, secret)
     JWT.decode(token, secret, true, {
                  algorithm: 'HS256',
                  verify_expiration: true
-               }).first['sub']
+               }).first
   rescue StandardError => e
     Rails.logger.error("Unexpected error verifying Tiktok token: #{e.message}")
     nil

app/javascript/dashboard/api/auth.js

@@ -106,4 +106,10 @@ 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/captain/messageReports.js

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

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

@@ -48,6 +48,12 @@ 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,6 +40,12 @@ 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/helpCenter/articles.js

@@ -16,6 +16,7 @@ class ArticlesAPI extends PortalsAPI {
     authorId,
     categorySlug,
     sort,
+    query,
   }) {
     const url = getArticleSearchURL({
       pageNumber,
@@ -25,6 +26,7 @@ class ArticlesAPI extends PortalsAPI {
       authorId,
       categorySlug,
       sort,
+      query,
       host: this.url,
     });
 

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

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

app/javascript/dashboard/api/inboxes.js

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

@@ -0,0 +1,18 @@
+/* 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/inbox/message.spec.js

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

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

@@ -46,9 +46,8 @@ const formattedLastActivityAt = computed(() => {
         :src="avatarSource"
         class="shrink-0"
         :name="name"
-        :size="48"
+        :size="42"
         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,6 +26,13 @@ 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;
 
@@ -45,7 +52,7 @@ const onSuccess = () => {
   closeDialog();
 };
 
-defineExpose({ dialogRef, onSuccess });
+defineExpose({ dialogRef, onSuccess, open });
 </script>
 
 <template>

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

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

@@ -0,0 +1,153 @@
+<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,6 +15,7 @@ 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: '' },
@@ -41,6 +42,7 @@ const getInitialContactData = () => ({
   id: props.id,
   name: props.name,
   email: props.email,
+  companyId: props.companyId,
   phoneNumber: props.phoneNumber,
   additionalAttributes: props.additionalAttributes,
 });
@@ -124,10 +126,9 @@ const handleAvatarHover = isHovered => {
           <Avatar
             :name="name"
             :src="thumbnail"
-            :size="48"
+            :size="42"
             :status="availabilityStatus"
             hide-offline-status
-            rounded-full
           >
             <template v-if="selectable" #overlay="{ size }">
               <label

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

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

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

@@ -5,8 +5,11 @@ 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';
 
@@ -28,6 +31,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
+const { currentAccount, isCloudFeatureEnabled } = useAccount();
 
 const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
@@ -54,6 +58,7 @@ const defaultState = {
   id: 0,
   name: '',
   email: '',
+  companyId: '',
   firstName: '',
   lastName: '',
   phoneNumber: '',
@@ -85,6 +90,23 @@ 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) {
@@ -96,6 +118,7 @@ const prepareStateBasedOnProps = () => {
     name = '',
     email: emailAddress,
     phoneNumber,
+    companyId = '',
     additionalAttributes = {},
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name || '');
@@ -115,6 +138,7 @@ const prepareStateBasedOnProps = () => {
   Object.assign(state, {
     id,
     name,
+    companyId: companyId || '',
     firstName,
     lastName,
     email: emailAddress,
@@ -200,11 +224,7 @@ const getFormBinding = key => {
         }
       }
 
-      const isFormValid = await v$.value.$validate();
-      if (isFormValid) {
-        const { firstName, lastName, ...stateWithoutNames } = state;
-        emit('update', stateWithoutNames);
-      }
+      await emitContactUpdate();
     },
   });
 };
@@ -221,6 +241,12 @@ 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();
 };
@@ -273,6 +299,13 @@ 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,34 +1,48 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, 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 = [
+const contactMenuItems = computed(() => [
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
     action: 'add',
     value: 'add',
     icon: 'i-lucide-plus',
   },
-  {
-    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',
-  },
-];
+  ...(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',
+        },
+      ]
+    : []),
+]);
 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 py-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-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 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 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

@@ -0,0 +1,108 @@
+<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 py-6">
+  <div class="flex flex-col gap-8 px-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 py-6">
+  <div class="flex flex-col gap-6">
     <Editor
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"

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

@@ -92,6 +92,7 @@ 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/HelpCenter/ArticleCard/ArticleCard.vue

@@ -13,6 +13,7 @@ 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';
@@ -131,7 +132,7 @@ const statusText = computed(() => {
 
 const categoryName = computed(() => {
   if (props.category?.slug) {
-    return `${props.category.icon} ${props.category.name}`;
+    return props.category.name;
   }
   return t(
     'HELP_CENTER.ARTICLES_PAGE.ARTICLE_CARD.CARD.CATEGORY.UNCATEGORISED'
@@ -209,9 +210,9 @@ const handleClick = id => {
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
+    <div class="flex items-center justify-between w-full gap-2 sm:gap-4">
+      <div class="flex items-center min-w-0 gap-2 sm:gap-4">
+        <div class="flex items-center min-w-0 gap-1">
           <Avatar
             :name="authorName"
             :src="authorThumbnailSrc"
@@ -222,11 +223,17 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span class="block text-sm whitespace-nowrap text-n-slate-11">
-          {{ categoryName }}
+        <span class="flex items-center min-w-0 gap-1 text-sm text-n-slate-11">
+          <EmojiIcon
+            v-if="category?.icon"
+            :value="category.icon"
+            :color="category.icon_color"
+            class="flex-shrink-0 size-4"
+          />
+          <span class="truncate">{{ categoryName }}</span>
         </span>
         <div
-          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap shrink-0"
         >
           <Icon icon="i-lucide-eye" class="size-4" />
           <span class="text-sm">
@@ -238,7 +245,7 @@ const handleClick = id => {
           </span>
         </div>
       </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1">
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
         {{ lastUpdatedAt }}
       </span>
     </div>

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

@@ -6,6 +6,7 @@ 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: {
@@ -20,6 +21,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  iconColor: {
+    type: String,
+    default: '',
+  },
   description: {
     type: String,
     required: true,
@@ -55,10 +60,6 @@ const categoryMenuItems = [
   },
 ];
 
-const categoryTitleWithIcon = computed(() => {
-  return `${props.icon} ${props.title}`;
-});
-
 const description = computed(() => {
   return props.description ? props.description : 'No description added';
 });
@@ -83,10 +84,16 @@ 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="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
+            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"
             @click="handleClick(slug)"
           >
-            {{ categoryTitleWithIcon }}
+            <EmojiIcon
+              v-if="icon"
+              :value="icon"
+              :color="iconColor"
+              class="shrink-0 size-4"
+            />
+            <span class="truncate">{{ title }}</span>
           </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/HelpCenterLayout.vue

@@ -67,11 +67,11 @@ const togglePortalSwitcher = () => {
         >
           <span
             v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
+            class="min-w-0 text-xl font-medium truncate text-n-slate-12"
           >
             {{ activePortalName }}
           </span>
-          <div v-if="activePortalName" class="relative group">
+          <div v-if="activePortalName" class="relative shrink-0 group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
               <Button
                 icon="i-lucide-chevron-down"
@@ -91,6 +91,9 @@ const togglePortalSwitcher = () => {
             </OnClickOutside>
             <CreatePortalDialog ref="createPortalDialogRef" />
           </div>
+          <div class="flex justify-end min-w-0 grow">
+            <slot name="title-actions" />
+          </div>
         </div>
         <slot name="header-actions" />
       </div>

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

@@ -53,6 +53,9 @@ 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'),
 }));
 
@@ -128,7 +131,7 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

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

@@ -8,6 +8,7 @@ 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({
@@ -107,10 +108,11 @@ const selectedCategory = computed(() => {
 const categoryList = computed(() => {
   return (
     categories.value
-      .map(({ name, id, icon }) => ({
+      .map(({ name, id, icon, icon_color: iconColor }) => ({
         label: name,
         value: id,
         emoji: icon,
+        iconColor,
         isSelected: isNewArticle.value
           ? id === (selectedCategoryId.value || selectedCategory.value?.id)
           : id === props.article?.category?.id,
@@ -202,10 +204,6 @@ 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"
@@ -213,12 +211,20 @@ onMounted(() => {
           @click="openCategoryList = !openCategoryList"
         >
           <span
-            v-if="selectedCategory"
-            class="text-sm text-n-slate-12 hover:text-n-slate-11"
+            class="flex items-center gap-1.5 min-w-0 text-sm text-n-slate-12 hover:text-n-slate-11"
           >
-            {{
-              `${selectedCategory.icon || ''} ${selectedCategory.name || t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.UNCATEGORIZED')}`
-            }}
+            <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>
           </span>
         </Button>
         <DropdownMenu

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

@@ -13,6 +13,7 @@ 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: {
@@ -63,18 +64,15 @@ const activeTabIndex = computed(() => {
   return tabs.value.findIndex(tab => tab.value === tabParam);
 });
 
-const activeCategoryName = computed(() => {
-  const activeCategory = props.categories.find(
-    category => category.slug === route.params.categorySlug
-  );
+const activeCategory = computed(() =>
+  props.categories.find(category => category.slug === route.params.categorySlug)
+);
 
-  if (activeCategory) {
-    const { icon, name } = activeCategory;
-    return `${icon} ${name}`;
-  }
-
-  return t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL');
-});
+const activeCategoryName = computed(
+  () =>
+    activeCategory.value?.name ||
+    t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.CATEGORY.ALL')
+);
 
 const activeLocaleName = computed(() => {
   return props.allowedLocales.find(
@@ -94,6 +92,7 @@ const categoryMenuItems = computed(() => {
     value: category.slug,
     action: 'filter',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }));
 
   const hasCategorySlug = !!route.params.categorySlug;
@@ -167,14 +166,23 @@ 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/ArticleList.vue

@@ -24,6 +24,10 @@ const props = defineProps({
     type: Set,
     default: () => new Set(),
   },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['translateArticle', 'toggleSelect']);
@@ -41,6 +45,7 @@ const hoveredArticleId = ref(null);
 const dragEnabled = computed(() => {
   return (
     props.isCategoryArticles &&
+    !props.isSearching &&
     localArticles.value?.length > 1 &&
     props.selectedArticleIds.size === 0
   );

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

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useConfig } from 'dashboard/composables/useConfig';
+import { debounce } from '@chatwoot/utils';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useAlert } from 'dashboard/composables';
@@ -18,6 +19,7 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
 import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.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';
@@ -49,7 +51,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['pageChange', 'fetchPortal', 'refreshArticles']);
+const emit = defineEmits([
+  'pageChange',
+  'fetchPortal',
+  'refreshArticles',
+  'search',
+]);
 
 const router = useRouter();
 const route = useRoute();
@@ -65,6 +72,9 @@ const isFeatureEnabledonAccount = useMapGetter(
 const selectedArticleIds = ref(new Set());
 const deleteConfirmDialogRef = ref(null);
 const isCategoryMenuOpen = ref(false);
+const searchQuery = ref(route.query.search || '');
+
+const debouncedSearch = debounce(() => emit('search', searchQuery.value), 500);
 
 const { isEnterprise } = useConfig();
 
@@ -122,6 +132,7 @@ const updateRoute = newParams => {
       categorySlug: newParams.categorySlug ?? categorySlug,
       ...newParams,
     },
+    query: route.query,
   });
 };
 
@@ -145,7 +156,12 @@ const showCategoryHeaderControls = computed(
   () => props.isCategoryArticles && !isSwitchingPortal.value
 );
 
+const isSearching = computed(() => Boolean(searchQuery.value?.trim()));
+
 const getEmptyStateText = type => {
+  if (isSearching.value) {
+    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.SEARCH.${type}`);
+  }
   if (props.isCategoryArticles) {
     return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
   }
@@ -230,6 +246,7 @@ const categoryMenuItems = computed(() =>
     value: category.id,
     action: 'move',
     emoji: category.icon,
+    iconColor: category.icon_color,
   }))
 );
 
@@ -290,6 +307,19 @@ watch(
     :show-pagination-footer="shouldShowPaginationFooter"
     @update:current-page="handlePageChange"
   >
+    <template #title-actions>
+      <Input
+        v-if="!isSwitchingPortal"
+        v-model="searchQuery"
+        :placeholder="
+          t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.SEARCH_PLACEHOLDER')
+        "
+        type="search"
+        size="sm"
+        class="w-full max-w-[16rem] min-w-0"
+        @input="debouncedSearch"
+      />
+    </template>
     <template #header-actions>
       <div class="flex items-end justify-between">
         <ArticleHeaderControls
@@ -421,6 +451,7 @@ watch(
         <ArticleList
           :articles="articles"
           :is-category-articles="isCategoryArticles"
+          :is-searching="isSearching"
           :selected-article-ids="selectedArticleIds"
           class="relative z-0"
           @translate-article="handleTranslateArticle"
@@ -432,7 +463,7 @@ watch(
         class="pt-14"
         :title="getEmptyStateTitle"
         :subtitle="getEmptyStateSubtitle"
-        :show-button="hasNoArticlesInPortal"
+        :show-button="hasNoArticlesInPortal && !isSearching"
         :button-label="
           t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
         "

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

@@ -37,10 +37,21 @@ const { t } = useI18n();
 
 const editCategoryDialog = ref(null);
 const selectedCategory = ref(null);
+const searchQuery = ref('');
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-const hasCategories = computed(() => props.categories?.length > 0);
+
+const filteredCategories = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return props.categories;
+  return props.categories.filter(category =>
+    category.name?.toLowerCase().includes(query)
+  );
+});
+
+const hasCategories = computed(() => filteredCategories.value?.length > 0);
+const isSearching = computed(() => searchQuery.value.trim().length > 0);
 
 const updateRoute = (newParams, routeName) => {
   const { accountId, portalSlug, locale } = route.params;
@@ -115,6 +126,7 @@ const reorderCategories = async reorderedGroup => {
   <HelpCenterLayout :show-pagination-footer="false">
     <template #header-actions>
       <CategoryHeaderControls
+        v-model:search-query="searchQuery"
         :categories="categories"
         :is-category-articles="false"
         :allowed-locales="allowedLocales"
@@ -130,11 +142,18 @@ const reorderCategories = async reorderedGroup => {
       </div>
       <CategoryList
         v-else-if="hasCategories"
-        :categories="categories"
+        :categories="filteredCategories"
+        :disable-drag="isSearching"
         @click="openCategoryArticles"
         @action="handleAction"
         @reorder="reorderCategories"
       />
+      <CategoryEmptyState
+        v-else-if="isSearching"
+        class="pt-14"
+        :title="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.SUBTITLE')"
+      />
       <CategoryEmptyState
         v-else
         class="pt-14"

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, description, locale } = formData;
-  const categoryData = { name, icon, slug, description };
+  const { id, name, slug, icon, iconColor, description, locale } = formData;
+  const categoryData = { name, icon, icon_color: iconColor, slug, description };
 
   if (props.mode === 'create') {
     categoryData.locale = locale;

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

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

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

@@ -6,6 +6,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useStoreGetters } from 'dashboard/composables/store.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';
@@ -27,6 +28,11 @@ const props = defineProps({
 
 const emit = defineEmits(['localeChange', 'newArticle']);
 
+const searchQuery = defineModel('searchQuery', {
+  type: String,
+  default: '',
+});
+
 const route = useRoute();
 const router = useRouter();
 const getters = useStoreGetters();
@@ -106,6 +112,7 @@ const breadcrumbItems = computed(() => {
         }
       ),
       emoji: selectedCategoryEmoji.value,
+      iconColor: selectedCategory.value?.icon_color,
     });
   }
   return items;
@@ -161,23 +168,34 @@ const handleBreadcrumbClick = () => {
       :items="breadcrumbItems"
       @click="handleBreadcrumbClick"
     />
-    <div v-if="!hasSelectedCategory" class="relative">
-      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
-        <Button
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
-        />
-        <CategoryDialog
-          v-if="isCreateCategoryDialogOpen"
-          mode="create"
-          :portal-name="currentPortalName"
-          :active-locale-name="activeLocaleName"
-          :active-locale-code="activeLocaleCode"
-          @close="isCreateCategoryDialogOpen = false"
-        />
-      </OnClickOutside>
+    <div v-if="!hasSelectedCategory" class="flex items-center gap-2">
+      <Input
+        v-model="searchQuery"
+        :placeholder="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.SEARCH_PLACEHOLDER')
+        "
+        type="search"
+        size="sm"
+        class="w-48"
+      />
+      <div class="relative">
+        <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
+          <Button
+            :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
+          />
+          <CategoryDialog
+            v-if="isCreateCategoryDialogOpen"
+            mode="create"
+            :portal-name="currentPortalName"
+            :active-locale-name="activeLocaleName"
+            :active-locale-code="activeLocaleCode"
+            @close="isCreateCategoryDialogOpen = false"
+          />
+        </OnClickOutside>
+      </div>
     </div>
     <div v-else class="relative flex items-center gap-2">
       <OnClickOutside @trigger="isEditCategoryDialogOpen = false">

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

@@ -8,6 +8,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['click', 'action', 'reorder']);
@@ -15,7 +19,7 @@ const emit = defineEmits(['click', 'action', 'reorder']);
 const localCategories = ref(props.categories);
 
 const dragEnabled = computed(() => {
-  return localCategories.value?.length > 1;
+  return !props.disableDrag && localCategories.value?.length > 1;
 });
 
 const handleClick = slug => {
@@ -68,6 +72,7 @@ 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, description } = state;
-  const categoryData = { name, icon, slug, description };
+  const { id, name, slug, icon, iconColor, description } = state;
+  const categoryData = { name, icon, icon_color: iconColor, slug, description };
   categoryData.id = id;
 
   try {

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

@@ -0,0 +1,98 @@
+<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,5 +1,7 @@
 <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';
@@ -23,6 +25,8 @@ const { t } = useI18n();
 const route = useRoute();
 const { uiSettings, updateUISettings } = useUISettings();
 
+const contentDialogRef = ref(null);
+
 const isLocaleDefault = code => {
   return props.portal?.meta?.default_locale === code;
 };
@@ -148,6 +152,8 @@ 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 });
   }
@@ -167,5 +173,6 @@ 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/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -2,8 +2,12 @@
 import { computed, ref } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 
+import { useI18n } from 'vue-i18n';
+
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import LocaleList from 'dashboard/components-next/HelpCenter/Pages/LocalePage/LocaleList.vue';
 import AddLocaleDialog from 'dashboard/components-next/HelpCenter/Pages/LocalePage/AddLocaleDialog.vue';
@@ -19,7 +23,10 @@ const props = defineProps({
   },
 });
 
+const { t } = useI18n();
+
 const addLocaleDialogRef = ref(null);
+const searchQuery = ref('');
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 
@@ -28,6 +35,19 @@ const openAddLocaleDialog = () => {
 };
 
 const localeCount = computed(() => props.locales?.length);
+
+const filteredLocales = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return props.locales;
+  return props.locales.filter(
+    locale =>
+      locale.name?.toLowerCase().includes(query) ||
+      locale.code?.toLowerCase().includes(query)
+  );
+});
+
+const isSearching = computed(() => searchQuery.value.trim().length > 0);
+const hasResults = computed(() => filteredLocales.value?.length > 0);
 </script>
 
 <template>
@@ -39,12 +59,21 @@ const localeCount = computed(() => props.locales?.length);
             {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
           </span>
         </div>
-        <Button
-          :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="openAddLocaleDialog"
-        />
+        <div class="flex items-center gap-2">
+          <Input
+            v-model="searchQuery"
+            :placeholder="$t('HELP_CENTER.LOCALES_PAGE.SEARCH_PLACEHOLDER')"
+            type="search"
+            size="sm"
+            class="w-48"
+          />
+          <Button
+            :label="$t('HELP_CENTER.LOCALES_PAGE.NEW_LOCALE_BUTTON_TEXT')"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="openAddLocaleDialog"
+          />
+        </div>
       </div>
     </template>
     <template #content>
@@ -54,7 +83,13 @@ const localeCount = computed(() => props.locales?.length);
       >
         <Spinner />
       </div>
-      <LocaleList v-else :locales="locales" :portal="portal" />
+      <EmptyStateLayout
+        v-else-if="isSearching && !hasResults"
+        :title="t('HELP_CENTER.LOCALES_PAGE.SEARCH_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.LOCALES_PAGE.SEARCH_EMPTY_STATE.SUBTITLE')"
+        :show-backdrop="false"
+      />
+      <LocaleList v-else :locales="filteredLocales" :portal="portal" />
     </template>
     <AddLocaleDialog ref="addLocaleDialogRef" :portal="portal" />
   </HelpCenterLayout>

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

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

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

@@ -182,7 +182,10 @@ const MIN_SEARCH_LENGTH = 2;
 export const createContactSearcher = () => {
   let controller = null;
 
-  return async (query, { skipMinLength = false } = {}) => {
+  return async (
+    query,
+    { skipMinLength = false, reachableOnly = true } = {}
+  ) => {
     const trimmed = typeof query === 'string' ? query.trim() : '';
 
     controller?.abort();
@@ -199,6 +202,8 @@ 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/SharedAttachments/Files.vue

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

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

@@ -2,6 +2,7 @@
 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: {
@@ -47,8 +48,17 @@ const onClick = (item, index) => {
         </button>
 
         <!-- The last breadcrumb item is plain text -->
-        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
-          {{ item.emoji ? item.emoji : '' }} {{ item.label }}
+        <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>
       </li>
     </ol>

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

@@ -75,11 +75,11 @@ const channelIcon = computed(() => {
 
 <template>
   <div
-    class="flex flex-col gap-2 pt-4 bg-n-solid-2/95 rounded-2xl shadow-xl outline outline-1 outline-n-strong backdrop-blur-md"
+    class="flex flex-col gap-1 pt-4 bg-n-call-widget rounded-2xl shadow-xl outline outline-1 outline-n-call-widget-border backdrop-blur-md"
     :class="call?.conversationId ? 'pb-2' : 'pb-4'"
   >
     <!-- Top section: status badge + location/inbox + duration -->
-    <div class="flex flex-col gap-3">
+    <div class="flex flex-col gap-3 pb-3 border-b border-n-call-widget-border">
       <div class="flex items-center gap-2 px-4">
         <!-- Ongoing: status badge on left -->
         <div v-if="isOngoing" class="flex items-center gap-1.5 shrink-0">
@@ -100,10 +100,10 @@ const channelIcon = computed(() => {
           <Icon
             v-else-if="!isOngoing"
             :icon="channelIcon"
-            class="size-3.5 text-n-slate-10 shrink-0"
+            class="size-3.5 text-n-call-widget-sub-text shrink-0"
           />
           <span
-            class="text-xs font-medium text-n-slate-11 tracking-tight truncate"
+            class="text-xs font-medium text-n-call-widget-sub-text tracking-tight truncate"
           >
             {{ callInfo.location }}
           </span>
@@ -112,7 +112,7 @@ const channelIcon = computed(() => {
         <!-- Ongoing: duration on right -->
         <p
           v-if="isOngoing"
-          class="font-display text-base font-medium text-n-slate-11 shrink-0 mb-0 tabular-nums tracking-tight"
+          class="font-display text-base font-medium text-n-call-widget-sub-text shrink-0 mb-0 tabular-nums tracking-tight"
         >
           {{ duration }}
         </p>
@@ -132,7 +132,7 @@ const channelIcon = computed(() => {
             slate
             ghost
             xs
-            class="!rounded-full -my-1"
+            class="!rounded-full -my-1 -me-1 !text-n-call-widget-sub-text"
             @click="$emit('dismiss')"
           />
         </div>
@@ -149,13 +149,13 @@ const channelIcon = computed(() => {
         </div>
         <div class="flex-1 min-w-0">
           <p
-            class="font-display text-sm font-medium text-n-slate-12 truncate mb-0.5 tracking-tight leading-tight"
+            class="font-display text-sm font-medium text-n-call-widget-text truncate mb-0.5 tracking-tight leading-tight"
           >
             {{ callInfo.contactName }}
           </p>
           <p
             v-if="callInfo.phoneNumber"
-            class="text-sm text-n-slate-11 truncate mb-0 tracking-tight leading-tight"
+            class="text-sm text-n-call-widget-sub-text truncate mb-0 tracking-tight leading-tight"
           >
             {{ callInfo.phoneNumber }}
           </p>
@@ -197,9 +197,9 @@ const channelIcon = computed(() => {
                 ? $t('CONVERSATION.VOICE_WIDGET.END_CALL')
                 : $t('CONVERSATION.VOICE_WIDGET.REJECT_CALL')
             "
-            icon="i-ph-phone-x-bold"
+            icon="i-ph-phone-bold"
             ruby
-            class="!rounded-full rotate-[134deg]"
+            class="!rounded-full rotate-[135deg]"
             @click="isOngoing ? $emit('end') : $emit('reject')"
           />
         </div>
@@ -217,23 +217,23 @@ const channelIcon = computed(() => {
     >
       <template #icon>
         <span
-          class="flex items-center gap-1 text-n-slate-11 group-hover:text-n-slate-12"
+          class="flex items-center gap-1 text-n-call-widget-sub-text group-hover:text-n-call-widget-text"
         >
           <Icon
             icon="i-ph-chat-circle-text-bold"
-            class="size-3.5 text-n-slate-11 shrink-0"
+            class="size-3.5 text-n-call-widget-sub-text shrink-0"
           />
           <span class="text-sm tracking-tight tabular-nums">
             #{{ call.conversationId }}
           </span>
           <Icon
             icon="i-ph-caret-right-bold"
-            class="size-3 text-n-slate-11 shrink-0"
+            class="size-3 text-n-call-widget-sub-text shrink-0"
           />
         </span>
       </template>
       <span
-        class="text-sm text-n-slate-11 tracking-tight group-hover:text-n-slate-12"
+        class="text-sm text-n-call-widget-sub-text tracking-tight group-hover:text-n-call-widget-text"
       >
         {{ $t('CONVERSATION.VOICE_WIDGET.GO_TO_CONVERSATION') }}
       </span>

app/javascript/dashboard/components-next/call/FloatingCallWidget.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { useCallSession } from 'dashboard/composables/useCallSession';
 import { setWhatsappCallMuted } from 'dashboard/composables/useWhatsappCallSession';
+import TwilioVoiceClient from 'dashboard/api/channel/voice/twilioVoiceClient';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { VOICE_CALL_PROVIDERS } from 'dashboard/helper/inbox';
 import { VOICE_CALL_DIRECTION } from 'dashboard/components-next/message/constants';
@@ -11,7 +12,7 @@ import WindowVisibilityHelper from 'dashboard/helper/AudioAlerts/WindowVisibilit
 import CallCard from 'dashboard/components-next/call/CallCard.vue';
 import countriesList from 'shared/constants/countries.js';
 
-const RINGTONE_URL = '/audio/dashboard/bell.mp3';
+const RINGTONE_URL = '/audio/dashboard/ringtone.mp3';
 
 const route = useRoute();
 const router = useRouter();
@@ -29,8 +30,8 @@ const {
   formattedCallDuration,
 } = useCallSession();
 
-// Mute is currently WhatsApp-only — Twilio calls are mediated server-side and
-// don't expose a mic track on the browser side.
+// Mute routes by provider: WhatsApp toggles the local mic track, Twilio uses
+// the Voice SDK connection's native mute. Both surface the same button.
 const isMuted = ref(false);
 const isWhatsappActive = computed(
   () => activeCall.value?.provider === VOICE_CALL_PROVIDERS.WHATSAPP
@@ -63,7 +64,11 @@ const stackedCardState = call =>
 
 const toggleMute = () => {
   isMuted.value = !isMuted.value;
-  setWhatsappCallMuted(isMuted.value);
+  if (isWhatsappActive.value) {
+    setWhatsappCallMuted(isMuted.value);
+  } else {
+    TwilioVoiceClient.setMuted(isMuted.value);
+  }
 };
 
 watch(hasActiveCall, active => {
@@ -256,7 +261,7 @@ onBeforeUnmount(stopRingtone);
       :call-info="getCallInfo(activeCall || primaryIncomingCall)"
       :duration="hasActiveCall ? formattedCallDuration : ''"
       :is-muted="isMuted"
-      :show-mute="hasActiveCall && isWhatsappActive"
+      :show-mute="hasActiveCall"
       @accept="handleJoinCall(primaryIncomingCall)"
       @reject="rejectIncomingCall(primaryIncomingCall?.callSid)"
       @dismiss="dismissCall(primaryIncomingCall?.callSid)"

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

@@ -14,6 +14,9 @@ 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: '' },
@@ -23,7 +26,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']);
+const emit = defineEmits(['update:modelValue', 'search', 'open']);
 
 const { t } = useI18n();
 
@@ -52,7 +55,7 @@ const selectedLabel = computed(() => {
   const selected = props.options.find(
     option => option.value === selectedValue.value
   );
-  return selected?.label ?? selectPlaceholder.value;
+  return selected?.label ?? (props.displayLabel || selectPlaceholder.value);
 });
 
 const selectOption = option => {
@@ -72,6 +75,7 @@ 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="emit('select', option)"
+        @click.stop="emit('select', option)"
       >
         <span
           :class="{

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

@@ -3,6 +3,7 @@ import { ref, 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';
 
@@ -162,7 +163,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"
+            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"
           >
             {{ section.title }}
           </p>
@@ -207,9 +208,12 @@ onMounted(() => {
                 class="flex-shrink-0 size-3.5"
               />
             </slot>
-            <span v-if="item.emoji" class="flex-shrink-0">{{
-              item.emoji
-            }}</span>
+            <EmojiIcon
+              v-if="item.emoji"
+              :value="item.emoji"
+              :color="item.iconColor"
+              class="flex-shrink-0 size-4"
+            />
             <slot name="label" :item="item">
               <span
                 v-if="item.label"
@@ -260,7 +264,12 @@ onMounted(() => {
               class="flex-shrink-0 size-3.5"
             />
           </slot>
-          <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
+          <EmojiIcon
+            v-if="item.emoji"
+            :value="item.emoji"
+            :color="item.iconColor"
+            class="flex-shrink-0 size-4"
+          />
           <slot name="label" :item="item">
             <span
               v-if="item.label"

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

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

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

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

@@ -0,0 +1,310 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Virtualizer } from 'virtua/vue';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import ColorPalette from './ColorPalette.vue';
+import { CURATED_ICONS } from './icons';
+import {
+  DEFAULT_ICON_COLOR,
+  ICON_STYLE,
+  PICKER_MODE,
+  PICKER_TAB,
+  isIconValue,
+} from './constants';
+import {
+  buildEmojiSections,
+  getEmojiTint,
+  getRecentEmojis,
+  addRecentEmoji,
+} from 'shared/components/emoji/pickerHelper';
+
+const props = defineProps({
+  // 'both' shows Icons + Emojis tabs; 'emoji' shows only the emoji panel.
+  mode: {
+    type: String,
+    default: PICKER_MODE.BOTH,
+    validator: value => Object.values(PICKER_MODE).includes(value),
+  },
+  // Saved value: an emoji char or an icon name (e.g. "rocket-line").
+  value: {
+    type: String,
+    default: '',
+  },
+  // Current stored icon color (hex), used to preselect a swatch.
+  color: {
+    type: String,
+    default: '',
+  },
+  showRemoveButton: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'remove', 'colorChange']);
+
+const { t } = useI18n();
+
+const showTabs = computed(() => props.mode === PICKER_MODE.BOTH);
+const showHeader = computed(
+  () => showTabs.value || (props.showRemoveButton && props.value)
+);
+
+const activeTab = ref(
+  props.value && !isIconValue(props.value)
+    ? PICKER_TAB.EMOJIS
+    : PICKER_TAB.ICONS
+);
+
+const tabs = computed(() => [
+  {
+    id: PICKER_TAB.ICONS,
+    label: t('EMOJI_ICON_PICKER.TABS.ICONS'),
+    icon: 'i-lucide-shapes',
+  },
+  {
+    id: PICKER_TAB.EMOJIS,
+    label: t('EMOJI_ICON_PICKER.TABS.EMOJIS'),
+    icon: 'i-lucide-smile',
+  },
+]);
+
+// Icons
+const iconSearch = ref('');
+const selectedColor = ref(props.color || DEFAULT_ICON_COLOR);
+// Preselect the outline/filled toggle from the saved icon's style suffix.
+const iconStyle = ref(
+  props.value.endsWith(`-${ICON_STYLE.FILL}`)
+    ? ICON_STYLE.FILL
+    : ICON_STYLE.LINE
+);
+
+const filteredIcons = computed(() => {
+  const term = iconSearch.value.trim().toLowerCase();
+  if (!term) return CURATED_ICONS;
+  return CURATED_ICONS.filter(
+    icon => icon.name.includes(term) || icon.keywords.includes(term)
+  );
+});
+
+const toggleIconStyle = () => {
+  iconStyle.value =
+    iconStyle.value === ICON_STYLE.LINE ? ICON_STYLE.FILL : ICON_STYLE.LINE;
+};
+
+// Each icon button tints its hover with the selected color (low opacity).
+const iconHoverStyle = computed(() => ({
+  '--ep-tint': `${selectedColor.value}24`,
+}));
+
+const selectIcon = icon => {
+  // Store the name with its style suffix, e.g. "rocket-fill".
+  const value = `${icon.name}-${iconStyle.value}`;
+  emit('select', {
+    type: 'icon',
+    value,
+    icon: value,
+    color: selectedColor.value,
+  });
+};
+
+watch(selectedColor, color => {
+  if (isIconValue(props.value)) emit('colorChange', color);
+});
+
+// Emojis
+const emojiSearch = ref('');
+const recentEmojis = ref([]);
+
+onMounted(() => {
+  recentEmojis.value = getRecentEmojis();
+});
+
+const emojiSections = computed(() =>
+  buildEmojiSections(
+    emojiSearch.value,
+    recentEmojis.value,
+    t('EMOJI_ICON_PICKER.FREQUENTLY_USED')
+  )
+);
+
+// Tints an emoji button with a light shade of the emoji's own color on hover.
+const applyEmojiTint = (event, emoji) => {
+  event.currentTarget.style.setProperty('--ep-tint', getEmojiTint(emoji));
+};
+
+const selectEmoji = emoji => {
+  recentEmojis.value = addRecentEmoji(emoji);
+  emit('select', { type: 'emoji', value: emoji.emoji, emoji: emoji.emoji });
+};
+</script>
+
+<template>
+  <div
+    role="dialog"
+    class="absolute z-20 flex flex-col overflow-hidden shadow-xl w-[22rem] bg-n-surface-2 backdrop-blur-[100px] rounded-2xl outline outline-1 outline-n-weak dark:outline-n-strong/50"
+  >
+    <div v-if="showHeader" class="flex items-center justify-between gap-2 p-2">
+      <div v-if="showTabs" class="flex gap-0.5 p-0.5 rounded-lg bg-n-alpha-1">
+        <button
+          v-for="tab in tabs"
+          :key="tab.id"
+          v-tooltip.top="tab.label"
+          type="button"
+          class="flex items-center justify-center !p-0 transition-all rounded-md size-7 active:scale-[0.92]"
+          :class="
+            activeTab === tab.id
+              ? 'bg-n-surface-1 shadow-sm text-n-slate-12'
+              : 'text-n-slate-10 hover:text-n-slate-12'
+          "
+          @click="activeTab = tab.id"
+        >
+          <span :class="tab.icon" class="size-4" />
+        </button>
+      </div>
+      <Button
+        v-if="showRemoveButton && value"
+        v-tooltip.top="t('EMOJI_ICON_PICKER.REMOVE')"
+        variant="ghost"
+        color="slate"
+        size="sm"
+        icon="i-lucide-eraser"
+        class="flex-shrink-0"
+        @click="emit('remove')"
+      />
+    </div>
+
+    <!-- Icons panel -->
+    <div
+      v-if="showTabs && activeTab === PICKER_TAB.ICONS"
+      class="flex flex-col gap-1.5"
+      :style="iconHoverStyle"
+    >
+      <ColorPalette v-model="selectedColor" />
+      <div class="flex items-center gap-1 px-2">
+        <Input
+          v-model="iconSearch"
+          size="md"
+          class="flex-1"
+          :placeholder="t('EMOJI_ICON_PICKER.SEARCH_ICON')"
+          custom-input-class="!ps-9 !bg-transparent"
+          autofocus
+        >
+          <template #prefix>
+            <span
+              class="absolute z-10 -translate-y-1/2 i-lucide-search size-4 text-n-slate-10 top-1/2 start-3"
+            />
+          </template>
+        </Input>
+        <button
+          v-tooltip.top="
+            iconStyle === ICON_STYLE.FILL
+              ? t('EMOJI_ICON_PICKER.STYLE.FILLED')
+              : t('EMOJI_ICON_PICKER.STYLE.OUTLINE')
+          "
+          type="button"
+          class="flex items-center justify-center flex-shrink-0 transition-all rounded-lg !p-2 size-9 text-n-slate-11 hover:bg-[var(--ep-tint)] active:scale-[0.92]"
+          @click="toggleIconStyle"
+        >
+          <span
+            :class="
+              iconStyle === ICON_STYLE.FILL
+                ? 'i-ri-contrast-2-fill'
+                : 'i-ri-contrast-2-line'
+            "
+            class="size-[1.2rem]"
+            :style="{ color: selectedColor }"
+          />
+        </button>
+      </div>
+      <div
+        v-if="filteredIcons.length"
+        class="grid grid-cols-10 h-52 gap-0.5 overflow-y-auto no-scrollbar content-start px-2 pb-2"
+      >
+        <button
+          v-for="icon in filteredIcons"
+          :key="icon.name"
+          type="button"
+          :title="icon.name"
+          class="flex items-center justify-center !p-0 size-8 transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+          @click="selectIcon(icon)"
+        >
+          <span
+            :class="icon[iconStyle]"
+            class="size-[1.125rem]"
+            :style="{ color: selectedColor }"
+          />
+        </button>
+      </div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 h-52 text-n-slate-10"
+      >
+        <span class="i-lucide-search-x size-7" />
+        <span class="text-sm font-medium">
+          {{ t('EMOJI_ICON_PICKER.NO_ICON') }}
+        </span>
+      </div>
+    </div>
+
+    <!-- Emojis panel -->
+    <div
+      v-if="!showTabs || activeTab === PICKER_TAB.EMOJIS"
+      class="flex flex-col gap-1.5"
+      :class="{ 'pt-2': !showHeader }"
+    >
+      <div class="px-2">
+        <Input
+          v-model="emojiSearch"
+          size="md"
+          :placeholder="t('EMOJI_ICON_PICKER.SEARCH_EMOJI')"
+          custom-input-class="!ps-9 !bg-transparent"
+          autofocus
+        >
+          <template #prefix>
+            <span
+              class="absolute z-10 -translate-y-1/2 i-lucide-search size-4 text-n-slate-10 top-1/2 start-3"
+            />
+          </template>
+        </Input>
+      </div>
+      <div
+        v-if="emojiSections.length"
+        class="h-60 overflow-y-auto px-2 no-scrollbar pb-2"
+      >
+        <Virtualizer v-slot="{ item: section }" :data="emojiSections">
+          <h5
+            class="px-1 pt-2 pb-1 m-0 text-xs font-medium tracking-wide uppercase text-n-slate-10"
+          >
+            {{ section.name }}
+          </h5>
+          <div class="grid grid-cols-10 gap-0.5">
+            <button
+              v-for="emoji in section.emojis"
+              :key="`${section.name}-${emoji.slug}`"
+              type="button"
+              :title="emoji.name"
+              class="flex items-center justify-center !p-0 size-8 w-full max-w-[2rem] text-xl transition-colors rounded-lg aspect-square hover:bg-[var(--ep-tint)] active:enabled:scale-[0.97]"
+              @mouseenter="applyEmojiTint($event, emoji.emoji)"
+              @click="selectEmoji(emoji)"
+            >
+              {{ emoji.emoji }}
+            </button>
+          </div>
+        </Virtualizer>
+      </div>
+      <div
+        v-else
+        class="flex flex-col items-center justify-center gap-2 h-60 text-n-slate-10"
+      >
+        <span class="i-lucide-smile-plus size-7" />
+        <span class="text-sm font-medium">
+          {{ t('EMOJI_ICON_PICKER.NO_EMOJI') }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/emoji-icon-picker/constants.js

@@ -0,0 +1,40 @@
+// Prefix that turns a stored icon name (e.g. "rocket-line") into a class.
+// Swapping icon libraries means changing this and the curated set only.
+export const ICON_PREFIX = 'i-ri-';
+
+export const ICON_STYLE = {
+  LINE: 'line',
+  FILL: 'fill',
+};
+
+// Icon values are ascii names (e.g. "rocket-line"); emoji are non-ascii.
+export const isIconValue = value =>
+  typeof value === 'string' && /^[a-z][a-z0-9-]*$/.test(value);
+
+export const iconClassFor = value =>
+  value.startsWith(ICON_PREFIX) ? value : `${ICON_PREFIX}${value}`;
+
+export const ICON_COLORS = [
+  { name: 'SLATE', value: '#64748B' },
+  { name: 'RED', value: '#EF4444' },
+  { name: 'ORANGE', value: '#F97316' },
+  { name: 'AMBER', value: '#F59E0B' },
+  { name: 'GREEN', value: '#22C55E' },
+  { name: 'TEAL', value: '#14B8A6' },
+  { name: 'BLUE', value: '#3B82F6' },
+  { name: 'INDIGO', value: '#6366F1' },
+  { name: 'VIOLET', value: '#8B5CF6' },
+  { name: 'PINK', value: '#EC4899' },
+];
+
+export const DEFAULT_ICON_COLOR = '#3B82F6';
+
+export const PICKER_MODE = {
+  BOTH: 'both',
+  EMOJI: 'emoji',
+};
+
+export const PICKER_TAB = {
+  ICONS: 'icons',
+  EMOJIS: 'emojis',
+};

app/javascript/dashboard/components-next/emoji-icon-picker/icons.js

@@ -0,0 +1,983 @@
+// Curated Remix (ri) icons, each with a `line` and `fill` class. The class
+// literals are kept here so Tailwind generates them. { name, keywords, line, fill }
+
+export const CURATED_ICONS = [
+  {
+    name: 'home',
+    keywords: 'home house main',
+    line: 'i-ri-home-line',
+    fill: 'i-ri-home-fill',
+  },
+  {
+    name: 'star',
+    keywords: 'favorite star',
+    line: 'i-ri-star-line',
+    fill: 'i-ri-star-fill',
+  },
+  {
+    name: 'heart',
+    keywords: 'like love',
+    line: 'i-ri-heart-line',
+    fill: 'i-ri-heart-fill',
+  },
+  {
+    name: 'bookmark',
+    keywords: 'save',
+    line: 'i-ri-bookmark-line',
+    fill: 'i-ri-bookmark-fill',
+  },
+  {
+    name: 'flag-2',
+    keywords: 'flag report',
+    line: 'i-ri-flag-2-line',
+    fill: 'i-ri-flag-2-fill',
+  },
+  {
+    name: 'price-tag-3',
+    keywords: 'tag label',
+    line: 'i-ri-price-tag-3-line',
+    fill: 'i-ri-price-tag-3-fill',
+  },
+  {
+    name: 'map-pin',
+    keywords: 'location place',
+    line: 'i-ri-map-pin-line',
+    fill: 'i-ri-map-pin-fill',
+  },
+  {
+    name: 'sparkling-2',
+    keywords: 'magic ai shine sparkle',
+    line: 'i-ri-sparkling-2-line',
+    fill: 'i-ri-sparkling-2-fill',
+  },
+  {
+    name: 'fire',
+    keywords: 'flame hot trending',
+    line: 'i-ri-fire-line',
+    fill: 'i-ri-fire-fill',
+  },
+  {
+    name: 'lightbulb',
+    keywords: 'idea tip',
+    line: 'i-ri-lightbulb-line',
+    fill: 'i-ri-lightbulb-fill',
+  },
+  {
+    name: 'rocket',
+    keywords: 'launch startup ship',
+    line: 'i-ri-rocket-line',
+    fill: 'i-ri-rocket-fill',
+  },
+  {
+    name: 'focus-3',
+    keywords: 'target goal aim',
+    line: 'i-ri-focus-3-line',
+    fill: 'i-ri-focus-3-fill',
+  },
+  {
+    name: 'award',
+    keywords: 'prize badge medal',
+    line: 'i-ri-award-line',
+    fill: 'i-ri-award-fill',
+  },
+  {
+    name: 'trophy',
+    keywords: 'win achievement',
+    line: 'i-ri-trophy-line',
+    fill: 'i-ri-trophy-fill',
+  },
+  {
+    name: 'vip-crown-2',
+    keywords: 'crown premium vip',
+    line: 'i-ri-vip-crown-2-line',
+    fill: 'i-ri-vip-crown-2-fill',
+  },
+  {
+    name: 'vip-diamond',
+    keywords: 'gem diamond premium',
+    line: 'i-ri-vip-diamond-line',
+    fill: 'i-ri-vip-diamond-fill',
+  },
+  {
+    name: 'gift',
+    keywords: 'present reward',
+    line: 'i-ri-gift-line',
+    fill: 'i-ri-gift-fill',
+  },
+  {
+    name: 'notification-3',
+    keywords: 'bell alert',
+    line: 'i-ri-notification-3-line',
+    fill: 'i-ri-notification-3-fill',
+  },
+  {
+    name: 'global',
+    keywords: 'globe world web',
+    line: 'i-ri-global-line',
+    fill: 'i-ri-global-fill',
+  },
+  {
+    name: 'compass-3',
+    keywords: 'explore discover',
+    line: 'i-ri-compass-3-line',
+    fill: 'i-ri-compass-3-fill',
+  },
+  {
+    name: 'puzzle-2',
+    keywords: 'extension integration',
+    line: 'i-ri-puzzle-2-line',
+    fill: 'i-ri-puzzle-2-fill',
+  },
+  {
+    name: 'ticket-2',
+    keywords: 'support coupon',
+    line: 'i-ri-ticket-2-line',
+    fill: 'i-ri-ticket-2-fill',
+  },
+  {
+    name: 'megaphone',
+    keywords: 'announce broadcast marketing',
+    line: 'i-ri-megaphone-line',
+    fill: 'i-ri-megaphone-fill',
+  },
+  {
+    name: 'briefcase-4',
+    keywords: 'work job business',
+    line: 'i-ri-briefcase-4-line',
+    fill: 'i-ri-briefcase-4-fill',
+  },
+  {
+    name: 'building-2',
+    keywords: 'company office org',
+    line: 'i-ri-building-2-line',
+    fill: 'i-ri-building-2-fill',
+  },
+  {
+    name: 'store-2',
+    keywords: 'shop commerce',
+    line: 'i-ri-store-2-line',
+    fill: 'i-ri-store-2-fill',
+  },
+  {
+    name: 'community',
+    keywords: 'group team',
+    line: 'i-ri-community-line',
+    fill: 'i-ri-community-fill',
+  },
+  {
+    name: 'folder',
+    keywords: 'directory',
+    line: 'i-ri-folder-line',
+    fill: 'i-ri-folder-fill',
+  },
+  {
+    name: 'folder-open',
+    keywords: 'directory open',
+    line: 'i-ri-folder-open-line',
+    fill: 'i-ri-folder-open-fill',
+  },
+  {
+    name: 'file',
+    keywords: 'document',
+    line: 'i-ri-file-line',
+    fill: 'i-ri-file-fill',
+  },
+  {
+    name: 'file-text',
+    keywords: 'document doc',
+    line: 'i-ri-file-text-line',
+    fill: 'i-ri-file-text-fill',
+  },
+  {
+    name: 'file-copy',
+    keywords: 'documents files',
+    line: 'i-ri-file-copy-line',
+    fill: 'i-ri-file-copy-fill',
+  },
+  {
+    name: 'clipboard',
+    keywords: 'copy tasks',
+    line: 'i-ri-clipboard-line',
+    fill: 'i-ri-clipboard-fill',
+  },
+  {
+    name: 'book-2',
+    keywords: 'read guide book',
+    line: 'i-ri-book-2-line',
+    fill: 'i-ri-book-2-fill',
+  },
+  {
+    name: 'book-open',
+    keywords: 'read guide docs',
+    line: 'i-ri-book-open-line',
+    fill: 'i-ri-book-open-fill',
+  },
+  {
+    name: 'graduation-cap',
+    keywords: 'learn course education',
+    line: 'i-ri-graduation-cap-line',
+    fill: 'i-ri-graduation-cap-fill',
+  },
+  {
+    name: 'newspaper',
+    keywords: 'news article blog',
+    line: 'i-ri-newspaper-line',
+    fill: 'i-ri-newspaper-fill',
+  },
+  {
+    name: 'sticky-note',
+    keywords: 'note memo',
+    line: 'i-ri-sticky-note-line',
+    fill: 'i-ri-sticky-note-fill',
+  },
+  {
+    name: 'pencil',
+    keywords: 'write edit',
+    line: 'i-ri-pencil-line',
+    fill: 'i-ri-pencil-fill',
+  },
+  {
+    name: 'quill-pen',
+    keywords: 'write author',
+    line: 'i-ri-quill-pen-line',
+    fill: 'i-ri-quill-pen-fill',
+  },
+  {
+    name: 'mark-pen',
+    keywords: 'highlight',
+    line: 'i-ri-mark-pen-line',
+    fill: 'i-ri-mark-pen-fill',
+  },
+  {
+    name: 'calendar-2',
+    keywords: 'date schedule calendar',
+    line: 'i-ri-calendar-2-line',
+    fill: 'i-ri-calendar-2-fill',
+  },
+  {
+    name: 'calendar-event',
+    keywords: 'schedule event',
+    line: 'i-ri-calendar-event-line',
+    fill: 'i-ri-calendar-event-fill',
+  },
+  {
+    name: 'time',
+    keywords: 'clock time',
+    line: 'i-ri-time-line',
+    fill: 'i-ri-time-fill',
+  },
+  {
+    name: 'timer',
+    keywords: 'countdown',
+    line: 'i-ri-timer-line',
+    fill: 'i-ri-timer-fill',
+  },
+  {
+    name: 'history',
+    keywords: 'recent past',
+    line: 'i-ri-history-line',
+    fill: 'i-ri-history-fill',
+  },
+  {
+    name: 'hourglass',
+    keywords: 'wait time',
+    line: 'i-ri-hourglass-line',
+    fill: 'i-ri-hourglass-fill',
+  },
+  {
+    name: 'shopping-cart-2',
+    keywords: 'buy ecommerce cart',
+    line: 'i-ri-shopping-cart-2-line',
+    fill: 'i-ri-shopping-cart-2-fill',
+  },
+  {
+    name: 'shopping-bag-3',
+    keywords: 'buy purchase bag',
+    line: 'i-ri-shopping-bag-3-line',
+    fill: 'i-ri-shopping-bag-3-fill',
+  },
+  {
+    name: 'box-3',
+    keywords: 'package box shipping',
+    line: 'i-ri-box-3-line',
+    fill: 'i-ri-box-3-fill',
+  },
+  {
+    name: 'archive',
+    keywords: 'store box archive',
+    line: 'i-ri-archive-line',
+    fill: 'i-ri-archive-fill',
+  },
+  {
+    name: 'bank-card',
+    keywords: 'pay billing card credit',
+    line: 'i-ri-bank-card-line',
+    fill: 'i-ri-bank-card-fill',
+  },
+  {
+    name: 'wallet-3',
+    keywords: 'money pay wallet',
+    line: 'i-ri-wallet-3-line',
+    fill: 'i-ri-wallet-3-fill',
+  },
+  {
+    name: 'money-dollar-circle',
+    keywords: 'money price usd',
+    line: 'i-ri-money-dollar-circle-line',
+    fill: 'i-ri-money-dollar-circle-fill',
+  },
+  {
+    name: 'copper-coin',
+    keywords: 'coins money',
+    line: 'i-ri-copper-coin-line',
+    fill: 'i-ri-copper-coin-fill',
+  },
+  {
+    name: 'currency',
+    keywords: 'money exchange',
+    line: 'i-ri-currency-line',
+    fill: 'i-ri-currency-fill',
+  },
+  {
+    name: 'receipt',
+    keywords: 'invoice bill',
+    line: 'i-ri-receipt-line',
+    fill: 'i-ri-receipt-fill',
+  },
+  {
+    name: 'percent',
+    keywords: 'discount sale',
+    line: 'i-ri-percent-line',
+    fill: 'i-ri-percent-fill',
+  },
+  {
+    name: 'calculator',
+    keywords: 'math',
+    line: 'i-ri-calculator-line',
+    fill: 'i-ri-calculator-fill',
+  },
+  {
+    name: 'mail',
+    keywords: 'email message',
+    line: 'i-ri-mail-line',
+    fill: 'i-ri-mail-fill',
+  },
+  {
+    name: 'send-plane',
+    keywords: 'send submit',
+    line: 'i-ri-send-plane-line',
+    fill: 'i-ri-send-plane-fill',
+  },
+  {
+    name: 'chat-3',
+    keywords: 'chat talk message',
+    line: 'i-ri-chat-3-line',
+    fill: 'i-ri-chat-3-fill',
+  },
+  {
+    name: 'message-2',
+    keywords: 'chat comment',
+    line: 'i-ri-message-2-line',
+    fill: 'i-ri-message-2-fill',
+  },
+  {
+    name: 'question-answer',
+    keywords: 'chat conversation faq',
+    line: 'i-ri-question-answer-line',
+    fill: 'i-ri-question-answer-fill',
+  },
+  {
+    name: 'phone',
+    keywords: 'call',
+    line: 'i-ri-phone-line',
+    fill: 'i-ri-phone-fill',
+  },
+  {
+    name: 'vidicon',
+    keywords: 'video call meeting',
+    line: 'i-ri-vidicon-line',
+    fill: 'i-ri-vidicon-fill',
+  },
+  {
+    name: 'mic',
+    keywords: 'record voice audio',
+    line: 'i-ri-mic-line',
+    fill: 'i-ri-mic-fill',
+  },
+  {
+    name: 'group',
+    keywords: 'team people users',
+    line: 'i-ri-group-line',
+    fill: 'i-ri-group-fill',
+  },
+  {
+    name: 'user',
+    keywords: 'person account',
+    line: 'i-ri-user-line',
+    fill: 'i-ri-user-fill',
+  },
+  {
+    name: 'user-add',
+    keywords: 'add member',
+    line: 'i-ri-user-add-line',
+    fill: 'i-ri-user-add-fill',
+  },
+  {
+    name: 'contacts',
+    keywords: 'person card contact',
+    line: 'i-ri-contacts-line',
+    fill: 'i-ri-contacts-fill',
+  },
+  {
+    name: 'emotion-happy',
+    keywords: 'happy smile emoji',
+    line: 'i-ri-emotion-happy-line',
+    fill: 'i-ri-emotion-happy-fill',
+  },
+  {
+    name: 'thumb-up',
+    keywords: 'like approve',
+    line: 'i-ri-thumb-up-line',
+    fill: 'i-ri-thumb-up-fill',
+  },
+  {
+    name: 'hand-heart',
+    keywords: 'care support',
+    line: 'i-ri-hand-heart-line',
+    fill: 'i-ri-hand-heart-fill',
+  },
+  {
+    name: 'at',
+    keywords: 'mention email at',
+    line: 'i-ri-at-line',
+    fill: 'i-ri-at-fill',
+  },
+  {
+    name: 'image-2',
+    keywords: 'picture photo image',
+    line: 'i-ri-image-2-line',
+    fill: 'i-ri-image-2-fill',
+  },
+  {
+    name: 'camera-3',
+    keywords: 'photo camera',
+    line: 'i-ri-camera-3-line',
+    fill: 'i-ri-camera-3-fill',
+  },
+  {
+    name: 'film',
+    keywords: 'movie video',
+    line: 'i-ri-film-line',
+    fill: 'i-ri-film-fill',
+  },
+  {
+    name: 'music-2',
+    keywords: 'audio song music',
+    line: 'i-ri-music-2-line',
+    fill: 'i-ri-music-2-fill',
+  },
+  {
+    name: 'headphone',
+    keywords: 'audio support',
+    line: 'i-ri-headphone-line',
+    fill: 'i-ri-headphone-fill',
+  },
+  {
+    name: 'palette',
+    keywords: 'color design art',
+    line: 'i-ri-palette-line',
+    fill: 'i-ri-palette-fill',
+  },
+  {
+    name: 'brush-3',
+    keywords: 'paint design brush',
+    line: 'i-ri-brush-3-line',
+    fill: 'i-ri-brush-3-fill',
+  },
+  {
+    name: 'scissors-2',
+    keywords: 'cut',
+    line: 'i-ri-scissors-2-line',
+    fill: 'i-ri-scissors-2-fill',
+  },
+  {
+    name: 'code-s-slash',
+    keywords: 'develop code programming',
+    line: 'i-ri-code-s-slash-line',
+    fill: 'i-ri-code-s-slash-fill',
+  },
+  {
+    name: 'terminal-box',
+    keywords: 'console cli terminal',
+    line: 'i-ri-terminal-box-line',
+    fill: 'i-ri-terminal-box-fill',
+  },
+  {
+    name: 'git-branch',
+    keywords: 'version code git',
+    line: 'i-ri-git-branch-line',
+    fill: 'i-ri-git-branch-fill',
+  },
+  {
+    name: 'github',
+    keywords: 'git code',
+    line: 'i-ri-github-line',
+    fill: 'i-ri-github-fill',
+  },
+  {
+    name: 'cpu',
+    keywords: 'chip processor',
+    line: 'i-ri-cpu-line',
+    fill: 'i-ri-cpu-fill',
+  },
+  {
+    name: 'database-2',
+    keywords: 'storage data',
+    line: 'i-ri-database-2-line',
+    fill: 'i-ri-database-2-fill',
+  },
+  {
+    name: 'server',
+    keywords: 'host backend',
+    line: 'i-ri-server-line',
+    fill: 'i-ri-server-fill',
+  },
+  {
+    name: 'cloud',
+    keywords: 'storage cloud',
+    line: 'i-ri-cloud-line',
+    fill: 'i-ri-cloud-fill',
+  },
+  {
+    name: 'wifi',
+    keywords: 'network internet',
+    line: 'i-ri-wifi-line',
+    fill: 'i-ri-wifi-fill',
+  },
+  {
+    name: 'computer',
+    keywords: 'screen desktop monitor',
+    line: 'i-ri-computer-line',
+    fill: 'i-ri-computer-fill',
+  },
+  {
+    name: 'smartphone',
+    keywords: 'mobile phone',
+    line: 'i-ri-smartphone-line',
+    fill: 'i-ri-smartphone-fill',
+  },
+  {
+    name: 'macbook',
+    keywords: 'laptop computer',
+    line: 'i-ri-macbook-line',
+    fill: 'i-ri-macbook-fill',
+  },
+  {
+    name: 'bug',
+    keywords: 'issue error bug',
+    line: 'i-ri-bug-line',
+    fill: 'i-ri-bug-fill',
+  },
+  {
+    name: 'command',
+    keywords: 'keyboard shortcut',
+    line: 'i-ri-command-line',
+    fill: 'i-ri-command-fill',
+  },
+  {
+    name: 'settings-3',
+    keywords: 'config gear options settings',
+    line: 'i-ri-settings-3-line',
+    fill: 'i-ri-settings-3-fill',
+  },
+  {
+    name: 'equalizer',
+    keywords: 'controls adjust sliders filter',
+    line: 'i-ri-equalizer-line',
+    fill: 'i-ri-equalizer-fill',
+  },
+  {
+    name: 'tools',
+    keywords: 'fix tools config',
+    line: 'i-ri-tools-line',
+    fill: 'i-ri-tools-fill',
+  },
+  {
+    name: 'hammer',
+    keywords: 'build fix hammer',
+    line: 'i-ri-hammer-line',
+    fill: 'i-ri-hammer-fill',
+  },
+  {
+    name: 'key-2',
+    keywords: 'password access key',
+    line: 'i-ri-key-2-line',
+    fill: 'i-ri-key-2-fill',
+  },
+  {
+    name: 'lock',
+    keywords: 'secure private lock',
+    line: 'i-ri-lock-line',
+    fill: 'i-ri-lock-fill',
+  },
+  {
+    name: 'lock-unlock',
+    keywords: 'open access',
+    line: 'i-ri-lock-unlock-line',
+    fill: 'i-ri-lock-unlock-fill',
+  },
+  {
+    name: 'shield',
+    keywords: 'security protect',
+    line: 'i-ri-shield-line',
+    fill: 'i-ri-shield-fill',
+  },
+  {
+    name: 'shield-check',
+    keywords: 'secure verified',
+    line: 'i-ri-shield-check-line',
+    fill: 'i-ri-shield-check-fill',
+  },
+  {
+    name: 'eye',
+    keywords: 'view visible preview',
+    line: 'i-ri-eye-line',
+    fill: 'i-ri-eye-fill',
+  },
+  {
+    name: 'search',
+    keywords: 'find lookup search',
+    line: 'i-ri-search-line',
+    fill: 'i-ri-search-fill',
+  },
+  {
+    name: 'filter-3',
+    keywords: 'sort refine filter',
+    line: 'i-ri-filter-3-line',
+    fill: 'i-ri-filter-3-fill',
+  },
+  {
+    name: 'links',
+    keywords: 'url chain link',
+    line: 'i-ri-links-line',
+    fill: 'i-ri-links-fill',
+  },
+  {
+    name: 'share-forward',
+    keywords: 'share send distribute',
+    line: 'i-ri-share-forward-line',
+    fill: 'i-ri-share-forward-fill',
+  },
+  {
+    name: 'plug',
+    keywords: 'connect integration',
+    line: 'i-ri-plug-line',
+    fill: 'i-ri-plug-fill',
+  },
+  {
+    name: 'shut-down',
+    keywords: 'power on off',
+    line: 'i-ri-shut-down-line',
+    fill: 'i-ri-shut-down-fill',
+  },
+  {
+    name: 'qr-scan-2',
+    keywords: 'qr scan',
+    line: 'i-ri-qr-scan-2-line',
+    fill: 'i-ri-qr-scan-2-fill',
+  },
+  {
+    name: 'fingerprint',
+    keywords: 'identity auth fingerprint',
+    line: 'i-ri-fingerprint-line',
+    fill: 'i-ri-fingerprint-fill',
+  },
+  {
+    name: 'bar-chart',
+    keywords: 'analytics stats graph bar',
+    line: 'i-ri-bar-chart-line',
+    fill: 'i-ri-bar-chart-fill',
+  },
+  {
+    name: 'pie-chart',
+    keywords: 'analytics stats pie',
+    line: 'i-ri-pie-chart-line',
+    fill: 'i-ri-pie-chart-fill',
+  },
+  {
+    name: 'line-chart',
+    keywords: 'analytics trend graph line',
+    line: 'i-ri-line-chart-line',
+    fill: 'i-ri-line-chart-fill',
+  },
+  {
+    name: 'stock',
+    keywords: 'growth increase trending',
+    line: 'i-ri-stock-line',
+    fill: 'i-ri-stock-fill',
+  },
+  {
+    name: 'pulse',
+    keywords: 'activity health monitor',
+    line: 'i-ri-pulse-line',
+    fill: 'i-ri-pulse-fill',
+  },
+  {
+    name: 'dashboard-3',
+    keywords: 'speed performance dashboard gauge',
+    line: 'i-ri-dashboard-3-line',
+    fill: 'i-ri-dashboard-3-fill',
+  },
+  {
+    name: 'check',
+    keywords: 'done complete ok check',
+    line: 'i-ri-check-line',
+    fill: 'i-ri-check-fill',
+  },
+  {
+    name: 'checkbox-circle',
+    keywords: 'done success check',
+    line: 'i-ri-checkbox-circle-line',
+    fill: 'i-ri-checkbox-circle-fill',
+  },
+  {
+    name: 'close-circle',
+    keywords: 'error fail close',
+    line: 'i-ri-close-circle-line',
+    fill: 'i-ri-close-circle-fill',
+  },
+  {
+    name: 'information',
+    keywords: 'info information',
+    line: 'i-ri-information-line',
+    fill: 'i-ri-information-fill',
+  },
+  {
+    name: 'error-warning',
+    keywords: 'warning alert',
+    line: 'i-ri-error-warning-line',
+    fill: 'i-ri-error-warning-fill',
+  },
+  {
+    name: 'alert',
+    keywords: 'warning caution',
+    line: 'i-ri-alert-line',
+    fill: 'i-ri-alert-fill',
+  },
+  {
+    name: 'question',
+    keywords: 'support faq help',
+    line: 'i-ri-question-line',
+    fill: 'i-ri-question-fill',
+  },
+  {
+    name: 'layout-grid',
+    keywords: 'dashboard apps grid',
+    line: 'i-ri-layout-grid-line',
+    fill: 'i-ri-layout-grid-fill',
+  },
+  {
+    name: 'table',
+    keywords: 'grid data table',
+    line: 'i-ri-table-line',
+    fill: 'i-ri-table-fill',
+  },
+  {
+    name: 'function',
+    keywords: 'kanban board',
+    line: 'i-ri-function-line',
+    fill: 'i-ri-function-fill',
+  },
+  {
+    name: 'map-2',
+    keywords: 'location navigate map',
+    line: 'i-ri-map-2-line',
+    fill: 'i-ri-map-2-fill',
+  },
+  {
+    name: 'navigation',
+    keywords: 'direction gps',
+    line: 'i-ri-navigation-line',
+    fill: 'i-ri-navigation-fill',
+  },
+  {
+    name: 'car',
+    keywords: 'drive vehicle car',
+    line: 'i-ri-car-line',
+    fill: 'i-ri-car-fill',
+  },
+  {
+    name: 'truck',
+    keywords: 'delivery shipping',
+    line: 'i-ri-truck-line',
+    fill: 'i-ri-truck-fill',
+  },
+  {
+    name: 'plane',
+    keywords: 'travel flight plane',
+    line: 'i-ri-plane-line',
+    fill: 'i-ri-plane-fill',
+  },
+  {
+    name: 'bike',
+    keywords: 'cycle bike',
+    line: 'i-ri-bike-line',
+    fill: 'i-ri-bike-fill',
+  },
+  {
+    name: 'anchor',
+    keywords: 'ship marine anchor',
+    line: 'i-ri-anchor-line',
+    fill: 'i-ri-anchor-fill',
+  },
+  {
+    name: 'leaf',
+    keywords: 'eco nature green leaf',
+    line: 'i-ri-leaf-line',
+    fill: 'i-ri-leaf-fill',
+  },
+  {
+    name: 'plant',
+    keywords: 'nature plant grow',
+    line: 'i-ri-plant-line',
+    fill: 'i-ri-plant-fill',
+  },
+  {
+    name: 'sun',
+    keywords: 'day light weather sun',
+    line: 'i-ri-sun-line',
+    fill: 'i-ri-sun-fill',
+  },
+  {
+    name: 'moon',
+    keywords: 'night dark moon',
+    line: 'i-ri-moon-line',
+    fill: 'i-ri-moon-fill',
+  },
+  {
+    name: 'rainy',
+    keywords: 'weather rain',
+    line: 'i-ri-rainy-line',
+    fill: 'i-ri-rainy-fill',
+  },
+  {
+    name: 'umbrella',
+    keywords: 'rain protect umbrella',
+    line: 'i-ri-umbrella-line',
+    fill: 'i-ri-umbrella-fill',
+  },
+  {
+    name: 'landscape',
+    keywords: 'outdoor hike mountain',
+    line: 'i-ri-landscape-line',
+    fill: 'i-ri-landscape-fill',
+  },
+  {
+    name: 'drop',
+    keywords: 'water drop',
+    line: 'i-ri-drop-line',
+    fill: 'i-ri-drop-fill',
+  },
+  {
+    name: 'cup',
+    keywords: 'coffee drink cup',
+    line: 'i-ri-cup-line',
+    fill: 'i-ri-cup-fill',
+  },
+  {
+    name: 'restaurant',
+    keywords: 'food eat restaurant',
+    line: 'i-ri-restaurant-line',
+    fill: 'i-ri-restaurant-fill',
+  },
+  {
+    name: 'cake-3',
+    keywords: 'birthday celebrate cake',
+    line: 'i-ri-cake-3-line',
+    fill: 'i-ri-cake-3-fill',
+  },
+  {
+    name: 'goblet',
+    keywords: 'drink wine bar',
+    line: 'i-ri-goblet-line',
+    fill: 'i-ri-goblet-fill',
+  },
+  {
+    name: 'heart-pulse',
+    keywords: 'health medical',
+    line: 'i-ri-heart-pulse-line',
+    fill: 'i-ri-heart-pulse-fill',
+  },
+  {
+    name: 'stethoscope',
+    keywords: 'health doctor medical',
+    line: 'i-ri-stethoscope-line',
+    fill: 'i-ri-stethoscope-fill',
+  },
+  {
+    name: 'capsule',
+    keywords: 'medicine pill health',
+    line: 'i-ri-capsule-line',
+    fill: 'i-ri-capsule-fill',
+  },
+  {
+    name: 'add',
+    keywords: 'add new create plus',
+    line: 'i-ri-add-line',
+    fill: 'i-ri-add-fill',
+  },
+  {
+    name: 'delete-bin',
+    keywords: 'delete remove trash',
+    line: 'i-ri-delete-bin-line',
+    fill: 'i-ri-delete-bin-fill',
+  },
+  {
+    name: 'download',
+    keywords: 'save export download',
+    line: 'i-ri-download-line',
+    fill: 'i-ri-download-fill',
+  },
+  {
+    name: 'upload',
+    keywords: 'import upload',
+    line: 'i-ri-upload-line',
+    fill: 'i-ri-upload-fill',
+  },
+  {
+    name: 'refresh',
+    keywords: 'reload sync update refresh',
+    line: 'i-ri-refresh-line',
+    fill: 'i-ri-refresh-fill',
+  },
+  {
+    name: 'external-link',
+    keywords: 'open new external',
+    line: 'i-ri-external-link-line',
+    fill: 'i-ri-external-link-fill',
+  },
+  {
+    name: 'logout-box',
+    keywords: 'exit signout logout',
+    line: 'i-ri-logout-box-line',
+    fill: 'i-ri-logout-box-fill',
+  },
+  {
+    name: 'fullscreen',
+    keywords: 'expand maximize fullscreen',
+    line: 'i-ri-fullscreen-line',
+    fill: 'i-ri-fullscreen-fill',
+  },
+  {
+    name: 'drag-move',
+    keywords: 'drag reorder move',
+    line: 'i-ri-drag-move-line',
+    fill: 'i-ri-drag-move-fill',
+  },
+  {
+    name: 'paint-brush',
+    keywords: 'brush paint',
+    line: 'i-ri-paint-brush-line',
+    fill: 'i-ri-paint-brush-fill',
+  },
+];

app/javascript/dashboard/components-next/filter/ConditionRow.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { debounce } from '@chatwoot/utils';
 import Button from 'next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
@@ -109,6 +110,34 @@ const inputFieldType = computed(() => {
   return 'text';
 });
 
+const asyncOptions = ref([]);
+const isSearching = ref(false);
+const lastSearchQuery = ref('');
+
+const performAsyncSearch = async query => {
+  let results;
+  try {
+    results = await currentFilter.value.searchOptions(query);
+  } catch {
+    results = [];
+  }
+  // skip stale responses — a newer search in this row owns the UI
+  if (query !== lastSearchQuery.value) return;
+  // null means another row's search aborted ours, reset instead of staying stuck on the searching state
+  if (results !== null) asyncOptions.value = results;
+  isSearching.value = false;
+};
+
+const debouncedAsyncSearch = debounce(performAsyncSearch, 300);
+
+const onAsyncSearch = query => {
+  const hasQuery = !!query.trim();
+  lastSearchQuery.value = query;
+  if (!hasQuery) asyncOptions.value = [];
+  isSearching.value = hasQuery;
+  debouncedAsyncSearch(query);
+};
+
 const resetModelOnAttributeKeyChange = newAttributeKey => {
   /**
    * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -121,11 +150,16 @@ const resetModelOnAttributeKeyChange = newAttributeKey => {
   const newInputType = getInputType(newOperator, filter);
   if (newInputType === 'multiSelect') {
     values.value = [];
-  } else if (['searchSelect', 'booleanSelect'].includes(newInputType)) {
+  } else if (
+    ['searchSelect', 'asyncSearchSelect', 'booleanSelect'].includes(
+      newInputType
+    )
+  ) {
     values.value = {};
   } else {
     values.value = '';
   }
+  asyncOptions.value = [];
   filterOperator.value = newOperator.value;
 };
 
@@ -185,6 +219,16 @@ defineExpose({ validate, resetValidation });
           :options="currentFilter.options"
           dropdown-max-height="max-h-64"
         />
+        <SingleSelect
+          v-else-if="inputType === 'asyncSearchSelect'"
+          v-model="values"
+          async-search
+          :options="asyncOptions"
+          :is-searching="isSearching"
+          :search-placeholder="currentFilter.searchPlaceholder"
+          dropdown-max-height="max-h-64"
+          @search="onAsyncSearch"
+        />
         <SingleSelect
           v-else-if="inputType === 'booleanSelect'"
           v-model="values"

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

@@ -7,6 +7,7 @@ export const CONVERSATION_ATTRIBUTES = {
   ASSIGNEE_ID: 'assignee_id',
   INBOX_ID: 'inbox_id',
   TEAM_ID: 'team_id',
+  CONTACT_ID: 'contact_id',
   DISPLAY_ID: 'display_id',
   CAMPAIGN_ID: 'campaign_id',
   LABELS: 'labels',

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

@@ -1,9 +1,37 @@
+import { ref } from 'vue';
+import ContactAPI from 'dashboard/api/contacts';
+import { useMapGetter } from 'dashboard/composables/store.js';
+import { useConversationFilterContext } from '../provider';
 import {
+  CONVERSATION_ATTRIBUTES,
   getCustomAttributeInputType,
   buildAttributesFilterTypes,
   replaceUnderscoreWithSpace,
 } from './filterHelper';
 
+vi.mock('dashboard/api/contacts', () => ({
+  default: {
+    search: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/composables/store.js', () => ({
+  useMapGetter: vi.fn(),
+}));
+
+vi.mock('next/icon/provider', () => ({
+  useChannelIcon: () => ref('i-test-channel'),
+}));
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key, params = {}) => {
+      if (key === 'FILTER.CONTACT_FALLBACK') return `Contact #${params.id}`;
+      return key;
+    },
+  }),
+}));
+
 describe('filterHelper', () => {
   describe('getCustomAttributeInputType', () => {
     it('returns date for date type', () => {
@@ -135,3 +163,64 @@ describe('filterHelper', () => {
     });
   });
 });
+
+const storeValues = {
+  'attributes/getConversationAttributes': ref([]),
+  'labels/getLabels': ref([]),
+  'agents/getAgents': ref([]),
+  'inboxes/getInboxes': ref([]),
+  'teams/getTeams': ref([]),
+  'campaigns/getAllCampaigns': ref([]),
+};
+
+describe('useConversationFilterContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    useMapGetter.mockImplementation(key => storeValues[key] || ref([]));
+  });
+
+  it('exposes contact as an async searchable conversation filter', () => {
+    const { filterTypes } = useConversationFilterContext();
+    const contactFilter = filterTypes.value.find(
+      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
+    );
+
+    expect(contactFilter).toMatchObject({
+      attributeKey: 'contact_id',
+      label: 'FILTER.ATTRIBUTES.CONTACT',
+      inputType: 'asyncSearchSelect',
+      dataType: 'number',
+      attributeModel: 'standard',
+    });
+    expect(
+      contactFilter.filterOperators.map(operator => operator.value)
+    ).toEqual(['equal_to', 'not_equal_to']);
+  });
+
+  it('uses the existing contact search API for contact filter options', async () => {
+    ContactAPI.search.mockResolvedValue({
+      data: {
+        payload: [
+          { id: 1, name: 'Jane Doe' },
+          { id: 2, email: 'alex@example.com' },
+          { id: 3 },
+        ],
+      },
+    });
+
+    const { filterTypes } = useConversationFilterContext();
+    const contactFilter = filterTypes.value.find(
+      filter => filter.attributeKey === CONVERSATION_ATTRIBUTES.CONTACT_ID
+    );
+    const options = await contactFilter.searchOptions('jane');
+
+    expect(ContactAPI.search).toHaveBeenCalledWith('jane', 1, 'name', '', {
+      signal: expect.any(AbortSignal),
+    });
+    expect(options).toEqual([
+      { id: 1, name: 'Jane Doe' },
+      { id: 2, name: 'alex@example.com' },
+      { id: 3, name: 'Contact #3' },
+    ]);
+  });
+});

app/javascript/dashboard/components-next/filter/inputs/SingleSelect.vue

@@ -11,6 +11,8 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 
 const {
   options,
+  asyncSearch,
+  isSearching,
   disableSearch,
   disableDeselect,
   placeholderIcon,
@@ -23,6 +25,14 @@ const {
     type: Array,
     required: true,
   },
+  asyncSearch: {
+    type: Boolean,
+    default: false,
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
   disableSearch: {
     type: Boolean,
     default: false,
@@ -53,6 +63,12 @@ const {
   },
 });
 
+const emit = defineEmits(['search']);
+
+// the input is re-inserted on every dropdown open (v-if),
+// where the native autofocus attribute is ignored so focus it via a directive instead
+const vFocus = { mounted: el => el.focus() };
+
 const { t } = useI18n();
 const selected = defineModel({
   type: Object,
@@ -60,7 +76,9 @@ const selected = defineModel({
 });
 
 const searchTerm = ref('');
+
 const searchResults = computed(() => {
+  if (asyncSearch) return options;
   if (!options) return [];
   return picoSearch(options, searchTerm.value, ['name']);
 });
@@ -77,7 +95,11 @@ const selectedItem = computed(() => {
   if (!optionToSearch) return null;
   // extract the selected item from the options array
   // this ensures that options like icon is also included
-  return options.find(option => option.id === optionToSearch.id);
+  return (
+    options.find(option => option.id === optionToSearch.id) ||
+    // async options may not include the selected option, fall back to it
+    (asyncSearch && optionToSearch.id !== undefined ? optionToSearch : null)
+  );
 });
 
 const toggleSelected = option => {
@@ -131,13 +153,19 @@ const toggleSelected = option => {
         <Icon class="absolute size-4 left-2 top-2" icon="i-lucide-search" />
         <input
           v-model="searchTerm"
-          autofocus
+          v-focus
           class="p-1.5 pl-8 text-n-slate-11 bg-n-alpha-1 rounded-lg w-full"
           :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
+          @input="emit('search', $event.target.value)"
         />
       </div>
       <DropdownSection :height="dropdownMaxHeight">
-        <template v-if="searchResults.length">
+        <template v-if="isSearching">
+          <DropdownItem disabled>
+            {{ t('DROPDOWN_MENU.SEARCHING') }}
+          </DropdownItem>
+        </template>
+        <template v-else-if="searchResults.length">
           <DropdownItem
             v-for="option in searchResults"
             :key="option.id"

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

@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useOperators } from './operators';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import { useChannelIcon } from 'next/icon/provider';
+import { createContactSearcher } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
 import {
   buildAttributesFilterTypes,
   CONVERSATION_ATTRIBUTES,
@@ -30,7 +31,7 @@ import languages from 'dashboard/components/widgets/conversation/advancedFilterI
  * @property {string} value - This is a proxy for the attribute key used in FilterSelect
  * @property {string} attributeName - The attribute name used to display on the UI
  * @property {string} label - This is a proxy for the attribute name used in FilterSelect
- * @property {'multiSelect'|'searchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
+ * @property {'multiSelect'|'searchSelect'|'asyncSearchSelect'|'plainText'|'date'|'booleanSelect'} inputType - The input type for the attribute
  * @property {FilterOption[]} [options] - The options available for the attribute if it is a multiSelect or singleSelect type
  * @property {'text'|'number'} dataType
  * @property {FilterOperator[]} filterOperators - The operators available for the attribute
@@ -68,6 +69,30 @@ export function useConversationFilterContext() {
     getOperatorTypes,
   } = useOperators();
 
+  const searchContacts = createContactSearcher();
+
+  const contactOptionName = contact =>
+    contact.name ||
+    contact.email ||
+    contact.phoneNumber ||
+    contact.identifier ||
+    t('FILTER.CONTACT_FALLBACK', { id: contact.id });
+
+  const searchContactOptions = async query => {
+    const contacts = await searchContacts(query, {
+      skipMinLength: true,
+      reachableOnly: false,
+    });
+
+    // null means the request was aborted (a newer search is in-flight)
+    if (contacts === null) return null;
+
+    return contacts.map(contact => ({
+      id: contact.id,
+      name: contactOptionName(contact),
+    }));
+  };
+
   /**
    * @type {import('vue').ComputedRef<FilterType[]>}
    */
@@ -158,6 +183,18 @@ export function useConversationFilterContext() {
       filterOperators: presenceOperators.value,
       attributeModel: 'standard',
     },
+    {
+      attributeKey: CONVERSATION_ATTRIBUTES.CONTACT_ID,
+      value: CONVERSATION_ATTRIBUTES.CONTACT_ID,
+      attributeName: t('FILTER.ATTRIBUTES.CONTACT'),
+      label: t('FILTER.ATTRIBUTES.CONTACT'),
+      inputType: 'asyncSearchSelect',
+      searchOptions: searchContactOptions,
+      searchPlaceholder: t('FILTER.CONTACT_SEARCH_PLACEHOLDER'),
+      dataType: 'number',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
     {
       attributeKey: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
       value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,

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

@@ -31,6 +31,7 @@ import FileBubble from './bubbles/File.vue';
 import AudioBubble from './bubbles/Audio.vue';
 import VideoBubble from './bubbles/Video.vue';
 import EmbedBubble from './bubbles/Embed.vue';
+import FallbackBubble from './bubbles/Fallback.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
 import UnsupportedBubble from './bubbles/Unsupported.vue';
@@ -146,8 +147,14 @@ const { t } = useI18n();
 const route = useRoute();
 const inboxGetter = useMapGetter('inboxes/getInbox');
 const inbox = computed(() => inboxGetter.value(props.inboxId) || {});
+const isOnChatwootCloud = useMapGetter('globalConfig/isOnChatwootCloud');
 const { replaceInstallationName } = useBranding();
 
+const isCaptainMessage = computed(() => {
+  const senderType = props.sender?.type ?? props.senderType;
+  return senderType === SENDER_TYPES.CAPTAIN_ASSISTANT;
+});
+
 /**
  * Computes the message variant based on props
  * @type {import('vue').ComputedRef<'user'|'agent'|'activity'|'private'|'bot'|'template'>}
@@ -328,6 +335,8 @@ const componentToRender = computed(() => {
   if (Array.isArray(props.attachments) && props.attachments.length === 1) {
     const fileType = props.attachments[0].fileType;
 
+    if (fileType === ATTACHMENT_TYPES.FALLBACK) return FallbackBubble;
+
     if (!props.content) {
       if (fileType === ATTACHMENT_TYPES.IMAGE) return ImageBubble;
       if (fileType === ATTACHMENT_TYPES.FILE) return FileBubble;
@@ -387,6 +396,10 @@ const contextMenuEnabledOptions = computed(() => {
       !props.private &&
       props.inboxSupportsReplyTo.outgoing &&
       !isFailedOrProcessing,
+    report:
+      isOnChatwootCloud.value &&
+      isCaptainMessage.value &&
+      !isMessageDeleted.value,
   };
 });
 

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

@@ -1,7 +1,9 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import BaseBubble from './Base.vue';
 import AudioChip from 'next/message/chips/Audio.vue';
+import Icon from 'next/icon/Icon.vue';
+import { useLoadWithRetry } from 'dashboard/composables/loadWithRetry';
 import { useMessageContext } from '../provider.js';
 
 const { attachments } = useMessageContext();
@@ -9,11 +11,28 @@ const { attachments } = useMessageContext();
 const attachment = computed(() => {
   return attachments.value[0];
 });
+
+const { isLoaded, hasError, loadWithRetry } = useLoadWithRetry({
+  mediaType: 'audio',
+});
+
+onMounted(() => {
+  if (attachment.value?.dataUrl) {
+    loadWithRetry(attachment.value.dataUrl);
+  }
+});
 </script>
 
 <template>
   <BaseBubble class="bg-transparent" data-bubble-name="audio">
+    <div v-if="hasError" class="flex items-center gap-1 text-center rounded-lg">
+      <Icon icon="i-lucide-circle-off" class="text-n-slate-11" />
+      <p class="mb-0 text-n-slate-11">
+        {{ $t('COMPONENTS.MEDIA.AUDIO_UNAVAILABLE') }}
+      </p>
+    </div>
     <AudioChip
+      v-else-if="isLoaded"
       :attachment="attachment"
       class="p-2 text-n-slate-12 skip-context-menu"
     />