feat: add better stack status tool

We will register them separately

AGENTS.md

@@ -55,21 +55,4 @@
 
 ## Ruby Best Practices
 
-- Use compact `module/class` definitions; avoid nested styles
-
-## Enterprise Edition Notes
-
-- Chatwoot has an Enterprise overlay under `enterprise/` that extends/overrides OSS code.
-- When you add or modify core functionality, always check for corresponding files in `enterprise/` and keep behavior compatible.
-- Follow the Enterprise development practices documented here:
-  - https://chatwoot.help/hc/handbook/articles/developing-enterprise-edition-features-38
-
-Practical checklist for any change impacting core logic or public APIs
-- Search for related files in both trees before editing (e.g., `rg -n "FooService|ControllerName|ModelName" app enterprise`).
-- If adding new endpoints, services, or models, consider whether Enterprise needs:
-  - An override (e.g., `enterprise/app/...`), or
-  - An extension point (e.g., `prepend_mod_with`, hooks, configuration) to avoid hard forks.
-- Avoid hardcoding instance- or plan-specific behavior in OSS; prefer configuration, feature flags, or extension points consumed by Enterprise.
-- Keep request/response contracts stable across OSS and Enterprise; update both sets of routes/controllers when introducing new APIs.
-- When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
-- Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
+- Use compact `module/class` definitions; avoid nested styles

Gemfile

@@ -89,7 +89,7 @@ gem 'wisper', '2.0.0'
 ##--- gems for channels ---##
 gem 'facebook-messenger'
 gem 'line-bot-api'
-gem 'twilio-ruby'
+gem 'twilio-ruby', '~> 5.66'
 # twitty will handle subscription of twitter account events
 # gem 'twitty', git: 'https://github.com/chatwoot/twitty'
 gem 'twitty', '~> 0.1.5'
@@ -108,7 +108,7 @@ gem 'google-cloud-translate-v3', '>= 0.7.0'
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
 # ref application.rb
-gem 'datadog', '~> 2.0', require: false
+gem 'ddtrace', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
@@ -180,8 +180,6 @@ gem 'reverse_markdown'
 gem 'iso-639'
 gem 'ruby-openai'
 gem 'ai-agents', '>= 0.4.3'
-
-# TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm-schema'
 
 gem 'shopify_api'
@@ -212,8 +210,6 @@ group :development do
   gem 'stackprof'
   # Should install the associated chrome extension to view query logs
   gem 'meta_request', '>= 0.8.3'
-
-  gem 'tidewave'
 end
 
 group :test do

Gemfile.lock

@@ -25,35 +25,35 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actioncable (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
       zeitwerk (~> 2.6)
-    actionmailbox (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailbox (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (>= 2.7.1)
       net-imap
       net-pop
       net-smtp
-    actionmailer (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionmailer (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.2)
-    actionpack (7.1.5.2)
-      actionview (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionpack (7.1.5.1)
+      actionview (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       nokogiri (>= 1.8.5)
       racc
       rack (>= 2.2.4)
@@ -61,38 +61,38 @@ GEM
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actiontext (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    actionview (7.1.5.1)
+      activesupport (= 7.1.5.1)
       builder (~> 3.1)
       erubi (~> 1.11)
       rails-dom-testing (~> 2.2)
       rails-html-sanitizer (~> 1.6)
     active_record_query_trace (1.8)
-    activejob (7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activejob (7.1.5.1)
+      activesupport (= 7.1.5.1)
       globalid (>= 0.3.6)
-    activemodel (7.1.5.2)
-      activesupport (= 7.1.5.2)
-    activerecord (7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activemodel (7.1.5.1)
+      activesupport (= 7.1.5.1)
+    activerecord (7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       timeout (>= 0.4.0)
     activerecord-import (2.1.0)
       activerecord (>= 4.2)
-    activestorage (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    activestorage (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       marcel (~> 1.0)
-    activesupport (7.1.5.2)
+    activesupport (7.1.5.1)
       base64
       benchmark (>= 0.3)
       bigdecimal
@@ -155,10 +155,10 @@ GEM
     barnes (0.0.9)
       multi_json (~> 1)
       statsd-ruby (~> 1.1)
-    base64 (0.3.0)
+    base64 (0.2.0)
     bcrypt (3.1.20)
-    benchmark (0.4.1)
-    bigdecimal (3.2.2)
+    benchmark (0.4.0)
+    bigdecimal (3.1.9)
     bindex (0.8.1)
     bootsnap (1.16.0)
       msgpack (~> 1.2)
@@ -194,14 +194,10 @@ GEM
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    datadog (2.19.0)
-      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
-      libdatadog (~> 18.1.0.1.0)
-      libddwaf (~> 1.24.1.0.3)
-      logger
-      msgpack
-    datadog-ruby_core_source (3.4.1)
     date (3.4.1)
+    ddtrace (0.48.0)
+      ffi (~> 1.0)
+      msgpack
     debug (1.8.0)
       irb (>= 1.5.0)
       reline (>= 0.3.1)
@@ -230,35 +226,6 @@ GEM
       addressable (~> 2.8)
     drb (2.2.3)
     dry-cli (1.1.0)
-    dry-configurable (1.3.0)
-      dry-core (~> 1.1)
-      zeitwerk (~> 2.6)
-    dry-core (1.1.0)
-      concurrent-ruby (~> 1.0)
-      logger
-      zeitwerk (~> 2.6)
-    dry-inflector (1.2.0)
-    dry-initializer (3.2.0)
-    dry-logic (1.6.0)
-      bigdecimal
-      concurrent-ruby (~> 1.0)
-      dry-core (~> 1.1)
-      zeitwerk (~> 2.6)
-    dry-schema (1.14.1)
-      concurrent-ruby (~> 1.0)
-      dry-configurable (~> 1.0, >= 1.0.1)
-      dry-core (~> 1.1)
-      dry-initializer (~> 3.2)
-      dry-logic (~> 1.5)
-      dry-types (~> 1.8)
-      zeitwerk (~> 2.6)
-    dry-types (1.8.3)
-      bigdecimal (~> 3.0)
-      concurrent-ruby (~> 1.0)
-      dry-core (~> 1.0)
-      dry-inflector (~> 1.0)
-      dry-logic (~> 1.4)
-      zeitwerk (~> 2.6)
     ecma-re-validator (0.4.0)
       regexp_parser (~> 2.2)
     elastic-apm (4.6.2)
@@ -281,10 +248,8 @@ GEM
       railties (>= 5.0.0)
     faker (3.2.0)
       i18n (>= 1.8.11, < 2)
-    faraday (2.13.1)
-      faraday-net_http (>= 2.0, < 3.5)
-      json
-      logger
+    faraday (2.9.0)
+      faraday-net_http (>= 2.0, < 3.2)
     faraday-follow_redirects (0.3.0)
       faraday (>= 1, < 3)
     faraday-mashify (0.1.1)
@@ -292,20 +257,13 @@ GEM
       hashie
     faraday-multipart (1.0.4)
       multipart-post (~> 2)
-    faraday-net_http (3.4.0)
-      net-http (>= 0.5.0)
+    faraday-net_http (3.1.0)
+      net-http
     faraday-net_http_persistent (2.1.0)
       faraday (~> 2.5)
       net-http-persistent (~> 4.0)
     faraday-retry (2.2.1)
       faraday (~> 2.0)
-    fast-mcp (1.5.0)
-      addressable (~> 2.8)
-      base64
-      dry-schema (~> 1.14)
-      json (~> 2.0)
-      mime-types (~> 3.4)
-      rack (~> 3.1)
     fcm (1.0.8)
       faraday (>= 1.0.0, < 3.0)
       googleauth (~> 1)
@@ -459,7 +417,7 @@ GEM
     judoscale-sidekiq (1.8.2)
       judoscale-ruby (= 1.8.2)
       sidekiq (>= 5.0)
-    jwt (2.10.1)
+    jwt (2.8.1)
       base64
     kaminari (1.2.2)
       activesupport (>= 4.1.0)
@@ -486,16 +444,6 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    libdatadog (18.1.0.1.0)
-    libdatadog (18.1.0.1.0-x86_64-linux)
-    libddwaf (1.24.1.0.3)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-arm64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-darwin)
-      ffi (~> 1.0)
-    libddwaf (1.24.1.0.3-x86_64-linux)
-      ffi (~> 1.0)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
     liquid (5.4.0)
@@ -541,7 +489,7 @@ GEM
     mutex_m (0.3.0)
     neighbor (0.2.3)
       activerecord (>= 5.2)
-    net-http (0.6.0)
+    net-http (0.4.1)
       uri
     net-http-persistent (4.0.2)
       connection_pool (~> 2.2)
@@ -629,7 +577,7 @@ GEM
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
-    rack (3.2.0)
+    rack (2.2.15)
     rack-attack (6.7.0)
       rack (>= 1.0, < 4)
     rack-contrib (2.5.0)
@@ -638,34 +586,33 @@ GEM
       rack (>= 2.0.0)
     rack-mini-profiler (3.2.0)
       rack (>= 1.2.0)
-    rack-protection (4.1.1)
+    rack-protection (3.2.0)
       base64 (>= 0.1.0)
-      logger (>= 1.6.0)
-      rack (>= 3.0.0, < 4)
+      rack (~> 2.2, >= 2.2.4)
     rack-proxy (0.7.7)
       rack
-    rack-session (2.1.1)
-      base64 (>= 0.1.0)
-      rack (>= 3.0.0)
+    rack-session (1.0.2)
+      rack (< 3)
     rack-test (2.1.0)
       rack (>= 1.3)
     rack-timeout (0.6.3)
-    rackup (2.2.1)
-      rack (>= 3)
-    rails (7.1.5.2)
-      actioncable (= 7.1.5.2)
-      actionmailbox (= 7.1.5.2)
-      actionmailer (= 7.1.5.2)
-      actionpack (= 7.1.5.2)
-      actiontext (= 7.1.5.2)
-      actionview (= 7.1.5.2)
-      activejob (= 7.1.5.2)
-      activemodel (= 7.1.5.2)
-      activerecord (= 7.1.5.2)
-      activestorage (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    rackup (1.0.1)
+      rack (< 3)
+      webrick
+    rails (7.1.5.1)
+      actioncable (= 7.1.5.1)
+      actionmailbox (= 7.1.5.1)
+      actionmailer (= 7.1.5.1)
+      actionpack (= 7.1.5.1)
+      actiontext (= 7.1.5.1)
+      actionview (= 7.1.5.1)
+      activejob (= 7.1.5.1)
+      activemodel (= 7.1.5.1)
+      activerecord (= 7.1.5.1)
+      activestorage (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       bundler (>= 1.15.0)
-      railties (= 7.1.5.2)
+      railties (= 7.1.5.1)
     rails-dom-testing (2.2.0)
       activesupport (>= 5.0.0)
       minitest
@@ -673,9 +620,9 @@ GEM
     rails-html-sanitizer (1.6.1)
       loofah (~> 2.21)
       nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.1.5.2)
-      actionpack (= 7.1.5.2)
-      activesupport (= 7.1.5.2)
+    railties (7.1.5.1)
+      actionpack (= 7.1.5.1)
+      activesupport (= 7.1.5.1)
       irb
       rackup (>= 1.0.0)
       rake (>= 12.2)
@@ -882,17 +829,13 @@ GEM
     telephone_number (1.4.20)
     test-prof (1.2.1)
     thor (1.4.0)
-    tidewave (0.2.0)
-      fast-mcp (~> 1.5.0)
-      rack (>= 2.0)
-      rails (>= 7.1.0)
     tilt (2.3.0)
     time_diff (0.3.0)
       activesupport
       i18n
     timeout (0.4.3)
     trailblazer-option (0.1.2)
-    twilio-ruby (7.6.0)
+    twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
       jwt (>= 1.5, < 3.0)
       nokogiri (>= 1.6, < 2.0)
@@ -939,6 +882,7 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
+    webrick (1.9.1)
     websocket-driver (0.7.7)
       base64
       websocket-extensions (>= 0.1.0)
@@ -984,7 +928,7 @@ DEPENDENCIES
   commonmarker
   csv-safe
   database_cleaner
-  datadog (~> 2.0)
+  ddtrace
   debug (~> 1.8)
   devise (>= 4.9.4)
   devise-secure_password!
@@ -1082,9 +1026,8 @@ DEPENDENCIES
   stripe
   telephone_number
   test-prof
-  tidewave
   time_diff
-  twilio-ruby
+  twilio-ruby (~> 5.66)
   twitty (~> 0.1.5)
   tzinfo-data
   uglifier

VERSION_CWCTL

@@ -1 +1 @@
-3.4.3
+3.4.2

app/controllers/api/v1/accounts/assignment_policies/inboxes_controller.rb

@@ -1,20 +0,0 @@
-class Api::V1::Accounts::AssignmentPolicies::InboxesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy
-  before_action -> { check_authorization(AssignmentPolicy) }
-
-  def index
-    @inboxes = @assignment_policy.inboxes
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(
-      params[:assignment_policy_id]
-    )
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id)
-  end
-end

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

@@ -1,36 +0,0 @@
-class Api::V1::Accounts::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_assignment_policy, only: [:show, :update, :destroy]
-  before_action :check_authorization
-
-  def index
-    @assignment_policies = Current.account.assignment_policies
-  end
-
-  def show; end
-
-  def create
-    @assignment_policy = Current.account.assignment_policies.create!(assignment_policy_params)
-  end
-
-  def update
-    @assignment_policy.update!(assignment_policy_params)
-  end
-
-  def destroy
-    @assignment_policy.destroy!
-    head :ok
-  end
-
-  private
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(params[:id])
-  end
-
-  def assignment_policy_params
-    params.require(:assignment_policy).permit(
-      :name, :description, :assignment_order, :conversation_priority,
-      :fair_distribution_limit, :fair_distribution_window, :enabled
-    )
-  end
-end

app/controllers/api/v1/accounts/inboxes/assignment_policies_controller.rb

@@ -1,46 +0,0 @@
-class Api::V1::Accounts::Inboxes::AssignmentPoliciesController < Api::V1::Accounts::BaseController
-  before_action :fetch_inbox
-  before_action :fetch_assignment_policy, only: [:create]
-  before_action -> { check_authorization(AssignmentPolicy) }
-  before_action :validate_assignment_policy, only: [:show, :destroy]
-
-  def show
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def create
-    # There should be only one assignment policy for an inbox.
-    # If there is a new request to add an assignment policy, we will
-    # delete the old one and attach the new policy
-    remove_inbox_assignment_policy
-    @inbox_assignment_policy = @inbox.create_inbox_assignment_policy!(assignment_policy: @assignment_policy)
-    @assignment_policy = @inbox.assignment_policy
-  end
-
-  def destroy
-    remove_inbox_assignment_policy
-    head :ok
-  end
-
-  private
-
-  def remove_inbox_assignment_policy
-    @inbox.inbox_assignment_policy&.destroy
-  end
-
-  def fetch_inbox
-    @inbox = Current.account.inboxes.find(permitted_params[:inbox_id])
-  end
-
-  def fetch_assignment_policy
-    @assignment_policy = Current.account.assignment_policies.find(permitted_params[:assignment_policy_id])
-  end
-
-  def permitted_params
-    params.permit(:assignment_policy_id, :inbox_id)
-  end
-
-  def validate_assignment_policy
-    return render_not_found_error(I18n.t('errors.assignment_policy.not_found')) unless @inbox.assignment_policy
-  end
-end

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

@@ -70,9 +70,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def sync_templates
-    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?
+    unless @inbox.channel.is_a?(Channel::Whatsapp)
+      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
+    end
 
-    trigger_template_sync
+    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
     render status: :ok, json: { message: 'Template sync initiated successfully' }
   rescue StandardError => e
     render status: :internal_server_error, json: { error: e.message }
@@ -183,18 +185,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
       []
     end
   end
-
-  def whatsapp_channel?
-    @inbox.whatsapp? || (@inbox.twilio? && @inbox.channel.whatsapp?)
-  end
-
-  def trigger_template_sync
-    if @inbox.whatsapp?
-      Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
-    elsif @inbox.twilio? && @inbox.channel.whatsapp?
-      Channels::Twilio::TemplatesSyncJob.perform_later(@inbox.channel)
-    end
-  end
 end
 
 Api::V1::Accounts::InboxesController.prepend_mod_with('Api::V1::Accounts::InboxesController')

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

@@ -26,8 +26,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
       @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
       # @portal.custom_domain = parsed_custom_domain
       process_attached_logo if params[:blob_id].present?
-    rescue ActiveRecord::RecordInvalid => e
-      render_record_invalid(e)
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
     end
   end
 

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

@@ -1,10 +1,8 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
   before_action :validate_feature_enabled!
-  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
 
   # POST /api/v1/accounts/:account_id/whatsapp/authorization
-  # Handles both initial authorization and reauthorization
-  # If inbox_id is present in params, it performs reauthorization
+  # Handles the embedded signup callback data from the Facebook SDK
   def create
     validate_embedded_signup_params!
     channel = process_embedded_signup
@@ -18,42 +16,21 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
   def process_embedded_signup
     service = Whatsapp::EmbeddedSignupService.new(
       account: Current.account,
-      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
-      inbox_id: params[:inbox_id]
+      code: params[:code],
+      business_id: params[:business_id],
+      waba_id: params[:waba_id],
+      phone_number_id: params[:phone_number_id]
     )
     service.perform
   end
 
-  def fetch_and_validate_inbox
-    @inbox = Current.account.inboxes.find(params[:inbox_id])
-    validate_reauthorization_required
-  end
-
-  def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
-
-    render json: {
-      success: false,
-      message: I18n.t('inbox.reauthorization.not_required')
-    }, status: :unprocessable_entity
-  end
-
-  def can_upgrade_to_embedded_signup?
-    channel = @inbox.channel
-    return false unless channel.provider == 'whatsapp_cloud'
-
-    true
-  end
-
   def render_success_response(inbox)
-    response = {
+    render json: {
       success: true,
       id: inbox.id,
       name: inbox.name,
       channel_type: 'whatsapp'
     }
-    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
-    render json: response
   end
 
   def render_error_response(error)

app/controllers/platform/api/v1/accounts_controller.rb

@@ -1,11 +1,4 @@
 class Platform::Api::V1::AccountsController < PlatformController
-  def index
-    @resources = @platform_app.platform_app_permissibles
-                              .where(permissible_type: 'Account')
-                              .includes(:permissible)
-                              .map(&:permissible)
-  end
-
   def show; end
 
   def create

app/controllers/slack_uploads_controller.rb

@@ -17,12 +17,7 @@ class SlackUploadsController < ApplicationController
   end
 
   def blob_url
-    # Only generate representations for images
-    if @blob.content_type.start_with?('image/')
-      url_for(@blob.representation(resize_to_fill: [250, nil]))
-    else
-      url_for(@blob)
-    end
+    url_for(@blob.representation(resize_to_fill: [250, nil]))
   end
 
   def avatar_url

app/controllers/twilio/callback_controller.rb

@@ -30,8 +30,7 @@ class Twilio::CallbackController < ApplicationController
       :NumMedia,
       :Latitude,
       :Longitude,
-      :MessageType,
-      :ProfileName
+      :MessageType
     )
   end
 end

app/finders/notification_finder.rb

@@ -15,13 +15,7 @@ class NotificationFinder
   end
 
   def unread_count
-    if type_included?('read')
-      # If we're including read notifications, filter to unread
-      @notifications.where(read_at: nil).count
-    else
-      # Already filtered to unread notifications, just count
-      @notifications.count
-    end
+    @notifications.where(read_at: nil).count
   end
 
   def count
@@ -33,7 +27,7 @@ class NotificationFinder
   def set_up
     find_all_notifications
     filter_snoozed_notifications
-    filter_read_notifications
+    fitler_read_notifications
   end
 
   def find_all_notifications
@@ -44,7 +38,7 @@ class NotificationFinder
     @notifications = @notifications.where(snoozed_until: nil) unless type_included?('snoozed')
   end
 
-  def filter_read_notifications
+  def fitler_read_notifications
     @notifications = @notifications.where(read_at: nil) unless type_included?('read')
   end
 

app/helpers/reporting_event_helper.rb

@@ -18,25 +18,12 @@ module ReportingEventHelper
   end
 
   def last_non_human_activity(conversation)
-    # Try to get either a handoff or reopened event first
-    # These will always take precedence over any other activity
-    # Also, any of these events can happen at any time in the course of a conversation lifecycle.
-    # So we pick the latest event
-    event = ReportingEvent.where(
-      conversation_id: conversation.id,
-      name: %w[conversation_bot_handoff conversation_opened]
-    ).order(event_end_time: :desc).first
+    # check if a handoff event already exists
+    handoff_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_handoff').last
 
-    return event.event_end_time if event&.event_end_time
-
-    # Fallback to bot resolved event
-    # Because this will be closest to the most accurate activity instead of conversation.created_at
-    bot_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_resolved').last
-
-    return bot_event.event_end_time if bot_event&.event_end_time
-
-    # If no events found, return conversation creation time
-    conversation.created_at
+    # if a handoff exists, last non human activity is when the handoff ended,
+    # otherwise it's when the conversation was created
+    handoff_event&.event_end_time || conversation.created_at
   end
 
   private

app/javascript/dashboard/App.vue

@@ -137,6 +137,7 @@ export default {
     v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
     id="app"
     class="flex flex-col w-full h-screen min-h-0"
+    :class="{ 'app-rtl--wrapper': isRTL }"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />

app/javascript/dashboard/api/channel/whatsappChannel.js

@@ -9,13 +9,6 @@ class WhatsappChannel extends ApiClient {
   createEmbeddedSignup(params) {
     return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
   }
-
-  reauthorizeWhatsApp({ inboxId, ...params }) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
-      ...params,
-      inbox_id: inboxId,
-    });
-  }
 }
 
 export default new WhatsappChannel();

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

@@ -1,29 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class PdfDocumentsAPI extends ApiClient {
-  constructor() {
-    super('portals', { accountScoped: true });
-  }
-
-  uploadContent(portalSlug, formData) {
-    return axios.post(`${this.url}/${portalSlug}/upload_content`, formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
-    });
-  }
-
-  getGeneratedContent(portalSlug) {
-    return axios.get(`${this.url}/${portalSlug}/generated_content`);
-  }
-
-  publishContent(portalSlug, responseIds, categoryId = null) {
-    return axios.post(`${this.url}/${portalSlug}/publish_content`, {
-      response_ids: responseIds,
-      category_id: categoryId
-    });
-  }
-}
-
-export default PdfDocumentsAPI;

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

@@ -76,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');
 
 const inboxIcon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium);
+  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, phoneNumber);
 });
 </script>
 

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue

@@ -38,13 +38,11 @@ const handleClose = () => emit('close');
 
 <template>
   <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
   >
-    <div class="p-6 flex flex-col gap-6">
-      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
-        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-      </h3>
-      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-    </div>
+    <h3 class="text-base font-medium text-n-slate-12">
+      {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
+    </h3>
+    <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
   </div>
 </template>

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue

@@ -9,7 +9,6 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
@@ -19,9 +18,7 @@ const formState = {
   uiFlags: useMapGetter('campaigns/getUIFlags'),
   labels: useMapGetter('labels/getLabels'),
   inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getFilteredWhatsAppTemplates: useMapGetter(
-    'inboxes/getFilteredWhatsAppTemplates'
-  ),
+  getWhatsAppTemplates: useMapGetter('inboxes/getWhatsAppTemplates'),
 };
 
 const initialState = {
@@ -33,7 +30,7 @@ const initialState = {
 };
 
 const state = reactive({ ...initialState });
-const templateParserRef = ref(null);
+const processedParams = ref({});
 
 const rules = {
   title: { required, minLength: minLength(1) },
@@ -70,7 +67,7 @@ const inboxOptions = computed(() =>
 
 const templateOptions = computed(() => {
   if (!state.inboxId) return [];
-  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
+  const templates = formState.getWhatsAppTemplates.value(state.inboxId);
   return templates.map(template => {
     // Create a more user-friendly label from template name
     const friendlyName = template.name
@@ -91,6 +88,26 @@ const selectedTemplate = computed(() => {
     ?.template;
 });
 
+const templateString = computed(() => {
+  if (!selectedTemplate.value) return '';
+  try {
+    return (
+      selectedTemplate.value.components?.find(
+        component => component.type === 'BODY'
+      )?.text || ''
+    );
+  } catch (error) {
+    return '';
+  }
+});
+
+const processedString = computed(() => {
+  if (!templateString.value) return '';
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    return processedParams.value[variable] || `{{${variable}}}`;
+  });
+});
+
 const getErrorMessage = (field, errorKey) => {
   const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
   return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
@@ -105,7 +122,8 @@ const formErrors = computed(() => ({
 }));
 
 const hasRequiredTemplateParams = computed(() => {
-  return templateParserRef.value?.v$?.$invalid === false || true;
+  const params = Object.values(processedParams.value);
+  return params.length === 0 || params.every(param => param.trim() !== '');
 });
 
 const isSubmitDisabled = computed(
@@ -117,18 +135,32 @@ const formatToUTCString = localDateTime =>
 
 const resetState = () => {
   Object.assign(state, initialState);
+  processedParams.value = {};
   v$.value.$reset();
 };
 
 const handleCancel = () => emit('cancel');
 
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) {
+    processedParams.value = {};
+    return;
+  }
+
+  const finalVars = matchedVariables.map(match => match.replace(/{{|}}/g, ''));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = processedParams.value[variable] || '';
+    return acc;
+  }, {});
+};
+
 const prepareCampaignDetails = () => {
   // Find the selected template to get its content
   const currentTemplate = selectedTemplate.value;
-  const parserData = templateParserRef.value;
 
   // Extract template content - this should be the template message body
-  const templateContent = parserData?.renderedTemplate || '';
+  const templateContent = templateString.value;
 
   // Prepare template_params object with the same structure as used in contacts
   const templateParams = {
@@ -136,7 +168,7 @@ const prepareCampaignDetails = () => {
     namespace: currentTemplate?.namespace || '',
     category: currentTemplate?.category || 'UTILITY',
     language: currentTemplate?.language || 'en_US',
-    processed_params: parserData?.processedParams || {},
+    processed_params: processedParams.value,
   };
 
   return {
@@ -166,6 +198,15 @@ watch(
   () => state.inboxId,
   () => {
     state.templateId = null;
+    processedParams.value = {};
+  }
+);
+
+// Generate variables when template changes
+watch(
+  () => state.templateId,
+  () => {
+    generateVariables();
   }
 );
 </script>
@@ -213,12 +254,62 @@ watch(
       </p>
     </div>
 
-    <!-- Template Parser -->
-    <WhatsAppTemplateParser
+    <!-- Template Preview -->
+    <div
       v-if="selectedTemplate"
-      ref="templateParserRef"
-      :template="selectedTemplate"
-    />
+      class="flex flex-col gap-4 p-4 rounded-lg bg-n-alpha-black2"
+    >
+      <div class="flex justify-between items-center">
+        <h3 class="text-sm font-medium text-n-slate-12">
+          {{ selectedTemplate.name }}
+        </h3>
+        <span class="text-xs text-n-slate-11">
+          {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LANGUAGE') }}:
+          {{ selectedTemplate.language || 'en' }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="rounded-md bg-n-alpha-black3">
+          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
+            {{ processedString }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-n-slate-11">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.CATEGORY') }}:
+        {{ selectedTemplate.category || 'UTILITY' }}
+      </div>
+    </div>
+
+    <!-- Template Variables -->
+    <div
+      v-if="Object.keys(processedParams).length > 0"
+      class="flex flex-col gap-3"
+    >
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLES_LABEL') }}
+      </label>
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(value, key) in processedParams"
+          :key="key"
+          class="flex gap-2 items-center"
+        >
+          <Input
+            v-model="processedParams[key]"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLE_PLACEHOLDER', {
+                variable: key,
+              })
+            "
+          />
+        </div>
+      </div>
+    </div>
 
     <div class="flex flex-col gap-1">
       <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">

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

@@ -98,7 +98,6 @@ const onClickViewDetails = () => emit('showContact', props.id);
         :src="thumbnail"
         :size="48"
         :status="availabilityStatus"
-        hide-offline-status
         rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1">

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

@@ -1,13 +1,11 @@
 <script setup>
-import { computed, useSlots, ref } from 'vue';
+import { computed, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
-import { vOnClickOutside } from '@vueuse/components';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
-import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 
 const props = defineProps({
   selectedContact: {
@@ -26,8 +24,6 @@ const { t } = useI18n();
 const slots = useSlots();
 const route = useRoute();
 
-const isContactSidebarOpen = ref(false);
-
 const contactId = computed(() => route.params.contactId);
 
 const selectedContactName = computed(() => {
@@ -60,15 +56,6 @@ const handleBreadcrumbClick = () => {
 const toggleBlock = () => {
   emit('toggleBlock', isContactBlocked.value);
 };
-
-const handleConversationSidebarToggle = () => {
-  isContactSidebarOpen.value = !isContactSidebarOpen.value;
-};
-
-const closeMobileSidebar = () => {
-  if (!isContactSidebarOpen.value) return;
-  isContactSidebarOpen.value = false;
-};
 </script>
 
 <template>
@@ -80,9 +67,7 @@ const closeMobileSidebar = () => {
     >
       <header class="sticky top-0 z-10 px-6 3xl:px-0">
         <div class="w-full mx-auto max-w-[40.625rem]">
-          <div
-            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
-          >
+          <div class="flex items-center justify-between w-full h-20 gap-2">
             <Breadcrumb
               :items="breadcrumbItems"
               @click="handleBreadcrumbClick"
@@ -100,11 +85,6 @@ const closeMobileSidebar = () => {
                 :disabled="isUpdating"
                 @click="toggleBlock"
               />
-              <VoiceCallButton
-                :phone="selectedContact?.phoneNumber"
-                :label="$t('CONTACT_PANEL.CALL')"
-                size="sm"
-              />
               <ComposeConversation :contact-id="contactId">
                 <template #trigger="{ toggle }">
                   <Button
@@ -125,65 +105,11 @@ const closeMobileSidebar = () => {
       </main>
     </div>
 
-    <!-- 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="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
     >
       <slot name="sidebar" />
     </div>
-
-    <!-- Mobile sidebar container -->
-    <div
-      v-if="slots.sidebar"
-      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
-      :class="isContactSidebarOpen ? 'w-full' : 'w-16'"
-    >
-      <!-- Toggle button -->
-      <div
-        v-on-click-outside="[
-          closeMobileSidebar,
-          { ignore: ['#contact-sidebar-content'] },
-        ]"
-        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
-        :class="[
-          isContactSidebarOpen
-            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
-            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
-        ]"
-      >
-        <Button
-          ghost
-          slate
-          sm
-          class="!rounded-full rtl:rotate-180"
-          :class="{ 'bg-n-alpha-2': isContactSidebarOpen }"
-          :icon="
-            isContactSidebarOpen
-              ? 'i-lucide-panel-right-close'
-              : 'i-lucide-panel-right-open'
-          "
-          data-contact-sidebar-toggle
-          @click="handleConversationSidebarToggle"
-        />
-      </div>
-
-      <Transition
-        enter-active-class="transition-transform duration-200 ease-in-out"
-        leave-active-class="transition-transform duration-200 ease-in-out"
-        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
-        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
-        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
-      >
-        <div
-          v-if="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"
-        >
-          <slot name="sidebar" />
-        </div>
-      </Transition>
-    </div>
   </section>
 </template>

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

@@ -34,13 +34,13 @@ const emit = defineEmits([
 <template>
   <header class="sticky top-0 z-10">
     <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
     >
       <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2 w-full">
+      <div class="flex items-center flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2">
           <Input
             :model-value="searchValue"
             type="search"
@@ -48,7 +48,6 @@ const emit = defineEmits([
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
-            class="w-full"
             @input="emit('search', $event.target.value)"
           >
             <template #prefix>
@@ -59,66 +58,64 @@ const emit = defineEmits([
             </template>
           </Input>
         </div>
-        <div class="flex items-center flex-shrink-0 gap-4">
-          <div class="flex items-center gap-2">
-            <div v-if="!isLabelView && !isActiveView" class="relative">
-              <Button
-                id="toggleContactsFilterButton"
-                :icon="
-                  isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
-                "
-                color="slate"
-                size="sm"
-                class="relative w-8"
-                variant="ghost"
-                @click="emit('filter')"
-              >
-                <div
-                  v-if="hasActiveFilters && !isSegmentsView"
-                  class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-                />
-              </Button>
-              <slot name="filter" />
-            </div>
+        <div class="flex items-center gap-2">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
             <Button
-              v-if="
-                hasActiveFilters &&
-                !isSegmentsView &&
-                !isLabelView &&
-                !isActiveView
+              id="toggleContactsFilterButton"
+              :icon="
+                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
               "
-              icon="i-lucide-save"
               color="slate"
               size="sm"
+              class="relative w-8"
               variant="ghost"
-              @click="emit('createSegment')"
-            />
-            <Button
-              v-if="isSegmentsView && !isLabelView && !isActiveView"
-              icon="i-lucide-trash"
-              color="slate"
-              size="sm"
-              variant="ghost"
-              @click="emit('deleteSegment')"
-            />
-            <ContactSortMenu
-              :active-sort="activeSort"
-              :active-ordering="activeOrdering"
-              @update:sort="emit('update:sort', $event)"
-            />
-            <ContactMoreActions
-              @add="emit('add')"
-              @import="emit('import')"
-              @export="emit('export')"
-            />
+              @click="emit('filter')"
+            >
+              <div
+                v-if="hasActiveFilters && !isSegmentsView"
+                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+              />
+            </Button>
+            <slot name="filter" />
           </div>
-          <div class="w-px h-4 bg-n-strong" />
-          <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
-            </template>
-          </ComposeConversation>
+          <Button
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
+            icon="i-lucide-save"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('createSegment')"
+          />
+          <Button
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
+            icon="i-lucide-trash"
+            color="slate"
+            size="sm"
+            variant="ghost"
+            @click="emit('deleteSegment')"
+          />
+          <ContactSortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <ContactMoreActions
+            @add="emit('add')"
+            @import="emit('import')"
+            @export="emit('export')"
+          />
         </div>
+        <div class="w-px h-4 bg-n-strong" />
+        <ComposeConversation>
+          <template #trigger="{ toggle }">
+            <Button :label="buttonLabel" size="sm" @click="toggle" />
+          </template>
+        </ComposeConversation>
       </div>
     </div>
   </header>

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

@@ -291,20 +291,17 @@ defineExpose({
     @delete-segment="openDeleteSegmentDialog"
   >
     <template #filter>
-      <div
-        class="absolute mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
-      >
-        <ContactsFilter
-          v-if="showFiltersModal"
-          v-model="appliedFilter"
-          :segment-name="activeSegmentName"
-          :is-segment-view="hasActiveSegments"
-          @apply-filter="onApplyFilter"
-          @update-segment="onUpdateSegment"
-          @close="closeAdvanceFiltersModal"
-          @clear-filters="clearFilters"
-        />
-      </div>
+      <ContactsFilter
+        v-if="showFiltersModal"
+        v-model="appliedFilter"
+        :segment-name="activeSegmentName"
+        :is-segment-view="hasActiveSegments"
+        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
+        @apply-filter="onApplyFilter"
+        @update-segment="onUpdateSegment"
+        @close="closeAdvanceFiltersModal"
+        @clear-filters="clearFilters"
+      />
     </template>
   </ContactsHeader>
 

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

@@ -105,7 +105,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

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

@@ -96,7 +96,10 @@ const openFilter = () => {
           <slot name="default" />
         </div>
       </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer
+        v-if="showPaginationFooter"
+        class="sticky bottom-0 z-10 px-4 pb-4"
+      >
         <PaginationFooter
           current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
           :current-page="currentPage"

app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js

@@ -4,8 +4,8 @@ export default [
       city: 'Los Angeles',
       country: 'United States',
       description:
-        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
-      companyName: 'Lumora',
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
+      companyName: 'Chatwoot',
       countryCode: 'US',
       socialProfiles: {
         github: 'candice-dev',
@@ -16,7 +16,7 @@ export default [
       },
     },
     availabilityStatus: 'offline',
-    email: 'candice.matherson@lumora.com',
+    email: 'candice.matherson@chatwoot.com',
     id: 22,
     name: 'Candice Matherson',
     phoneNumber: '+14155552671',

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

@@ -1,91 +0,0 @@
-<script setup>
-import { computed, ref, useAttrs } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-import { useAlert } from 'dashboard/composables';
-
-import Button from 'dashboard/components-next/button/Button.vue';
-import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
-
-const props = defineProps({
-  phone: { type: String, default: '' },
-  label: { type: String, default: '' },
-  icon: { type: [String, Object, Function], default: '' },
-  size: { type: String, default: 'sm' },
-  tooltipLabel: { type: String, default: '' },
-});
-
-defineOptions({ inheritAttrs: false });
-const attrs = useAttrs();
-
-const { t } = useI18n();
-
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(
-    inbox => inbox.channel_type === INBOX_TYPES.VOICE
-  )
-);
-const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
-
-// Unified behavior: hide when no phone
-const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
-
-const dialogRef = ref(null);
-
-const onClick = () => {
-  if (voiceInboxes.value.length > 1) {
-    dialogRef.value?.open();
-    return;
-  }
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-};
-
-const onPickInbox = () => {
-  // Placeholder until actual call wiring happens
-  useAlert(t('CONTACT_PANEL.CALL_UNDER_DEVELOPMENT'));
-  dialogRef.value?.close();
-};
-</script>
-
-<template>
-  <span class="contents">
-    <Button
-      v-if="shouldRender"
-      v-tooltip.top-end="tooltipLabel || null"
-      v-bind="attrs"
-      :label="label"
-      :icon="icon"
-      :size="size"
-      @click="onClick"
-    />
-
-    <Dialog
-      v-if="shouldRender && voiceInboxes.length > 1"
-      ref="dialogRef"
-      :title="$t('CONTACT_PANEL.VOICE_INBOX_PICKER.TITLE')"
-      show-cancel-button
-      :show-confirm-button="false"
-      width="md"
-    >
-      <div class="flex flex-col gap-2">
-        <button
-          v-for="inbox in voiceInboxes"
-          :key="inbox.id"
-          type="button"
-          class="flex items-center justify-between w-full px-4 py-2 text-left rounded-lg hover:bg-n-alpha-2"
-          @click="onPickInbox(inbox)"
-        >
-          <div class="flex items-center gap-2">
-            <span class="i-ri-phone-fill text-n-slate-10" />
-            <span class="text-sm text-n-slate-12">{{ inbox.name }}</span>
-          </div>
-          <span v-if="inbox.phone_number" class="text-xs text-n-slate-10">
-            {{ inbox.phone_number }}
-          </span>
-        </button>
-      </div>
-    </Dialog>
-  </span>
-</template>

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

@@ -47,7 +47,6 @@ const unreadMessagesCount = computed(() => {
     </p>
     <div class="flex items-center flex-shrink-0 gap-2 pb-2">
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

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

@@ -96,7 +96,6 @@ defineExpose({
         />
       </div>
       <Avatar
-        v-if="assignee.name"
         :name="assignee.name"
         :src="assignee.thumbnail"
         :size="20"

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

@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const lastActivityAt = computed(() => {

app/javascript/dashboard/components-next/HelpCenter/Pages/PdfDocumentsPage/ContentGeneration.vue

@@ -1,284 +0,0 @@
-<template>
-  <div class="bg-white dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 p-6">
-    <div class="mb-6">
-      <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100 mb-2">
-        {{ $t('HELP_CENTER.CONTENT_GENERATION.TITLE') }}
-      </h3>
-      <p class="text-sm text-slate-600 dark:text-slate-400">
-        {{ $t('HELP_CENTER.CONTENT_GENERATION.DESCRIPTION') }}
-      </p>
-    </div>
-
-    <!-- Upload Section -->
-    <div class="mb-8">
-      <h4 class="text-base font-medium text-slate-900 dark:text-slate-100 mb-4">
-        {{ $t('HELP_CENTER.CONTENT_GENERATION.UPLOAD_TITLE') }}
-      </h4>
-      
-      <div
-        class="border-2 border-dashed border-slate-300 dark:border-slate-600 rounded-lg p-6 text-center"
-        :class="{
-          'border-woot-500 bg-woot-25': isDragOver,
-          'border-green-500 bg-green-25': uploadSuccess
-        }"
-        @drop="handleDrop"
-        @dragover="handleDragOver"
-        @dragleave="handleDragLeave"
-      >
-        <div v-if="!isUploading && !uploadSuccess">
-          <DocumentPlusIcon class="mx-auto h-12 w-12 text-slate-400 mb-4" />
-          <p class="text-sm text-slate-600 dark:text-slate-300 mb-2">
-            {{ $t('HELP_CENTER.CONTENT_GENERATION.DRAG_DROP') }}
-          </p>
-          <input
-            ref="fileInput"
-            type="file"
-            accept=".pdf"
-            class="hidden"
-            @change="handleFileSelect"
-          >
-          <button
-            type="button"
-            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-woot-700 bg-woot-100 hover:bg-woot-200"
-            @click="$refs.fileInput.click()"
-          >
-            {{ $t('HELP_CENTER.CONTENT_GENERATION.SELECT_FILE') }}
-          </button>
-        </div>
-
-        <div v-else-if="isUploading" class="py-4">
-          <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-woot-500 mx-auto mb-2"></div>
-          <p class="text-sm text-slate-600">{{ $t('HELP_CENTER.CONTENT_GENERATION.UPLOADING') }}</p>
-        </div>
-
-        <div v-else-if="uploadSuccess" class="py-4">
-          <CheckCircleIcon class="mx-auto h-8 w-8 text-green-500 mb-2" />
-          <p class="text-sm text-green-600">{{ $t('HELP_CENTER.CONTENT_GENERATION.UPLOAD_SUCCESS') }}</p>
-        </div>
-      </div>
-
-      <div v-if="uploadError" class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md">
-        <p class="text-sm text-red-800">{{ uploadError }}</p>
-      </div>
-    </div>
-
-    <!-- Generated Content Section -->
-    <div v-if="generatedResponses.length > 0" class="mb-8">
-      <div class="flex items-center justify-between mb-4">
-        <h4 class="text-base font-medium text-slate-900 dark:text-slate-100">
-          {{ $t('HELP_CENTER.CONTENT_GENERATION.GENERATED_CONTENT') }}
-        </h4>
-        <button
-          v-if="selectedResponses.length > 0"
-          class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded text-white bg-woot-500 hover:bg-woot-600"
-          @click="publishSelectedContent"
-          :disabled="isPublishing"
-        >
-          <template v-if="isPublishing">
-            <div class="animate-spin rounded-full h-4 w-4 border-b border-white mr-2"></div>
-            {{ $t('HELP_CENTER.CONTENT_GENERATION.PUBLISHING') }}
-          </template>
-          <template v-else>
-            {{ $t('HELP_CENTER.CONTENT_GENERATION.PUBLISH_SELECTED') }} ({{ selectedResponses.length }})
-          </template>
-        </button>
-      </div>
-
-      <div class="space-y-3 max-h-96 overflow-y-auto">
-        <div
-          v-for="response in generatedResponses"
-          :key="response.id"
-          class="border border-slate-200 dark:border-slate-600 rounded-lg p-4 hover:bg-slate-50 dark:hover:bg-slate-700"
-        >
-          <div class="flex items-start space-x-3">
-            <input
-              type="checkbox"
-              :value="response.id"
-              v-model="selectedResponses"
-              class="mt-1 rounded border-slate-300 text-woot-500 focus:ring-woot-500"
-            >
-            <div class="flex-1 min-w-0">
-              <h5 class="text-sm font-medium text-slate-900 dark:text-slate-100 mb-1">
-                {{ response.question }}
-              </h5>
-              <p class="text-xs text-slate-600 dark:text-slate-400 line-clamp-2">
-                {{ response.answer }}
-              </p>
-              <div class="mt-2 text-xs text-slate-500">
-                {{ $t('HELP_CENTER.CONTENT_GENERATION.FROM_DOCUMENT') }}: {{ response.documentable?.name }}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Empty State -->
-    <div v-else-if="!isLoading" class="text-center py-8">
-      <DocumentIcon class="mx-auto h-12 w-12 text-slate-400 mb-4" />
-      <p class="text-slate-600 dark:text-slate-400">
-        {{ $t('HELP_CENTER.CONTENT_GENERATION.NO_CONTENT') }}
-      </p>
-    </div>
-
-    <!-- Loading State -->
-    <div v-if="isLoading" class="text-center py-8">
-      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-woot-500 mx-auto mb-2"></div>
-      <p class="text-slate-600">{{ $t('HELP_CENTER.CONTENT_GENERATION.LOADING') }}</p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRoute } from 'vue-router';
-import {
-  DocumentPlusIcon,
-  DocumentIcon,
-  CheckCircleIcon,
-} from '@heroicons/vue/24/outline';
-
-import PdfDocumentsAPI from '../../../../api/helpCenter/pdfDocuments';
-
-const props = defineProps({
-  portalSlug: {
-    type: String,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['content-published']);
-
-const { t } = useI18n();
-const route = useRoute();
-const pdfDocumentsApi = new PdfDocumentsAPI();
-
-// Reactive data
-const generatedResponses = ref([]);
-const selectedResponses = ref([]);
-const isLoading = ref(false);
-const isUploading = ref(false);
-const isPublishing = ref(false);
-const uploadSuccess = ref(false);
-const uploadError = ref('');
-const isDragOver = ref(false);
-
-// Methods
-const loadGeneratedContent = async () => {
-  try {
-    isLoading.value = true;
-    const response = await pdfDocumentsApi.getGeneratedContent(props.portalSlug);
-    generatedResponses.value = response.data.responses || [];
-  } catch (error) {
-    console.error('Failed to load generated content:', error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-const handleFileSelect = (event) => {
-  const file = event.target.files[0];
-  if (file) {
-    uploadFile(file);
-  }
-};
-
-const handleDrop = (event) => {
-  event.preventDefault();
-  isDragOver.value = false;
-  
-  const files = event.dataTransfer.files;
-  if (files.length > 0) {
-    uploadFile(files[0]);
-  }
-};
-
-const handleDragOver = (event) => {
-  event.preventDefault();
-  isDragOver.value = true;
-};
-
-const handleDragLeave = (event) => {
-  event.preventDefault();
-  isDragOver.value = false;
-};
-
-const uploadFile = async (file) => {
-  if (!validateFile(file)) return;
-
-  try {
-    isUploading.value = true;
-    uploadError.value = '';
-
-    const formData = new FormData();
-    formData.append('pdf_file', file);
-
-    await pdfDocumentsApi.uploadContent(props.portalSlug, formData);
-    
-    uploadSuccess.value = true;
-    
-    // Wait a bit then reload content
-    setTimeout(async () => {
-      uploadSuccess.value = false;
-      await loadGeneratedContent();
-    }, 2000);
-
-  } catch (error) {
-    uploadError.value = error.response?.data?.error || t('HELP_CENTER.CONTENT_GENERATION.UPLOAD_ERROR');
-  } finally {
-    isUploading.value = false;
-  }
-};
-
-const validateFile = (file) => {
-  if (file.type !== 'application/pdf') {
-    uploadError.value = t('HELP_CENTER.CONTENT_GENERATION.INVALID_FILE_TYPE');
-    return false;
-  }
-  
-  if (file.size > 512 * 1024 * 1024) {
-    uploadError.value = t('HELP_CENTER.CONTENT_GENERATION.FILE_TOO_LARGE');
-    return false;
-  }
-  
-  return true;
-};
-
-const publishSelectedContent = async () => {
-  if (selectedResponses.value.length === 0) return;
-
-  try {
-    isPublishing.value = true;
-    
-    await pdfDocumentsApi.publishContent(props.portalSlug, selectedResponses.value);
-    
-    // Remove published responses from the list
-    generatedResponses.value = generatedResponses.value.filter(
-      response => !selectedResponses.value.includes(response.id)
-    );
-    
-    selectedResponses.value = [];
-    emit('content-published');
-    
-  } catch (error) {
-    console.error('Failed to publish content:', error);
-  } finally {
-    isPublishing.value = false;
-  }
-};
-
-// Lifecycle
-onMounted(() => {
-  loadGeneratedContent();
-});
-</script>
-
-<style scoped>
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-</style>

app/javascript/dashboard/components-next/HelpCenter/Pages/PdfDocumentsPage/PdfDocumentsPage.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="flex-1 overflow-hidden">
-    <!-- Header -->
-    <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700 px-6 py-4">
-      <div>
-        <h1 class="text-2xl font-semibold text-slate-900 dark:text-slate-100">
-          {{ $t('HELP_CENTER.CONTENT_GENERATION.TITLE') }}
-        </h1>
-        <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
-          {{ $t('HELP_CENTER.CONTENT_GENERATION.DESCRIPTION') }}
-        </p>
-      </div>
-    </div>
-
-    <!-- Content -->
-    <div class="flex-1 overflow-auto px-6 py-6">
-      <ContentGeneration 
-        :portal-slug="portalSlug"
-        @content-published="handleContentPublished"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import ContentGeneration from './ContentGeneration.vue';
-
-const route = useRoute();
-
-// Computed properties
-const portalSlug = computed(() => route.params.portalId);
-
-// Methods
-const handleContentPublished = () => {
-  // Could show a success notification here
-  console.log('Content has been published successfully');
-};
-</script>

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

@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers, url } from '@vuelidate/validators';
-import { isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength, helpers } from '@vuelidate/validators';
+import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -71,7 +71,7 @@ const rules = {
       isValidSlug
     ),
   },
-  homePageLink: { url },
+  homePageLink: { shouldBeUrl },
 };
 
 const v$ = useVuelidate(rules, state);
@@ -315,9 +315,7 @@ const handleAvatarDelete = () => {
           class="[&>div>button:not(.focused)]:!outline-n-weak"
         />
       </div>
-      <div
-        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
-      >
+      <div class="flex items-start justify-between w-full gap-2">
         <label
           class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >

app/javascript/dashboard/components-next/Inbox/InboxCard.vue

@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);
 
 const inboxIcon = computed(() => {
-  const { channelType, medium } = inbox.value;
-  return getInboxIconByType(channelType, medium);
+  const { phoneNumber, channelType } = inbox.value;
+  return getInboxIconByType(channelType, phoneNumber);
 });
 
 const hasSlaThreshold = computed(() => {

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

@@ -2,7 +2,6 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
-import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
@@ -16,7 +15,6 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
@@ -39,16 +37,9 @@ const emit = defineEmits(['close']);
 
 const store = useStore();
 const { t } = useI18n();
-const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const isSmallScreen = computed(
-  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
-);
-
-const viewInModal = computed(() => props.isModal || isSmallScreen.value);
-
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -76,7 +67,7 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));
 
 const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
+  if (props.isModal) return '';
 
   return props.alignPosition === 'right'
     ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -188,18 +179,14 @@ const toggle = () => {
 
 watch(
   activeContact,
-  (currentContact, previousContact) => {
-    if (currentContact && props.contactId) {
-      // Reset on contact change
-      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
-
+  () => {
+    if (activeContact.value && props.contactId) {
+      const contactInboxes = activeContact.value?.contactInboxes || [];
       // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(
-        currentContact.contactInboxes || []
-      );
+      const processedInboxes = processContactableInboxes(contactInboxes);
       // Then Merge processedInboxes with the inboxes list
       selectedContact.value = {
-        ...currentContact,
+        ...activeContact.value,
         contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
       };
     }
@@ -215,7 +202,7 @@ const handleClickOutside = () => {
 };
 
 const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
+  if (!props.isModal) return;
   handleClickOutside();
 };
 
@@ -244,7 +231,7 @@ useKeyboardEvents(keyboardEvents);
     ]"
     class="relative"
     :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
+      'z-40': showComposeNewConversation,
     }"
   >
     <slot
@@ -256,12 +243,12 @@ useKeyboardEvents(keyboardEvents);
       v-if="showComposeNewConversation"
       :class="{
         'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
+          isModal,
       }"
       @click.self="onModalBackdropClick"
     >
       <ComposeNewConversationForm
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
+        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"

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

@@ -25,7 +25,6 @@ const props = defineProps({
   hasNoInbox: { type: Boolean, default: false },
   isDropdownActive: { type: Boolean, default: false },
   messageSignature: { type: String, default: '' },
-  inboxId: { type: Number, default: null },
 });
 
 const emit = defineEmits([
@@ -151,10 +150,9 @@ useKeyboardEvents(keyboardEvents);
   <div
     class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
   >
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <WhatsAppOptions
         v-if="isWhatsappInbox"
-        :inbox-id="inboxId"
         :message-templates="messageTemplates"
         @send-message="emit('sendWhatsappMessage', $event)"
       />
@@ -172,7 +170,7 @@ useKeyboardEvents(keyboardEvents);
         />
         <EmojiInput
           v-if="isEmojiPickerOpen"
-          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
+          class="left-0 top-full mt-1.5"
           :on-click="onClickInsertEmoji"
         />
       </div>
@@ -208,7 +206,7 @@ useKeyboardEvents(keyboardEvents);
       />
     </div>
 
-    <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
       <Button
         :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
         variant="faded"

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

@@ -57,7 +57,7 @@ const removeAttachment = id => {
           variant="ghost"
           icon="i-lucide-trash"
           color="slate"
-          class="absolute top-1 ltr:right-1 rtl:left-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
           @click="removeAttachment(attachment.resource.id)"
         />
       </div>

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

@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
   >
     <ContactSelector
       :contacts="contacts"
@@ -336,7 +336,6 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
       :is-loading="isCreating"
       :disable-send-button="isCreating"
       :has-selected-inbox="!!targetInbox"
-      :inbox-id="targetInbox?.id"
       :has-no-inbox="showNoInboxAlert"
       :is-dropdown-active="isAnyDropdownActive"
       :message-signature="messageSignature"

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

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

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

@@ -1,25 +1,23 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useMapGetter } from 'dashboard/composables/store';
 
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
-import WhatsappTemplate from './WhatsappTemplate.vue';
+import WhatsappTemplateParser from './WhatsappTemplateParser.vue';
 
 const props = defineProps({
-  inboxId: {
-    type: Number,
-    required: true,
+  messageTemplates: {
+    type: Array,
+    default: () => [],
   },
 });
 
 const emit = defineEmits(['sendMessage']);
 
 const { t } = useI18n();
-const getFilteredWhatsAppTemplates = useMapGetter(
-  'inboxes/getFilteredWhatsAppTemplates'
-);
+
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
 const searchQuery = ref('');
 const selectedTemplate = ref(null);
@@ -27,7 +25,19 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);
 
 const whatsAppTemplateMessages = computed(() => {
-  return getFilteredWhatsAppTemplates.value(props.inboxId);
+  // Add null check and ensure it's an array
+  const templates = Array.isArray(props.messageTemplates)
+    ? props.messageTemplates
+    : [];
+
+  // TODO: Remove the last filter when we support all formats
+  return templates
+    .filter(template => template?.status?.toLowerCase() === 'approved')
+    .filter(template => {
+      return template?.components?.every(component => {
+        return !formatsToRemove.includes(component.format);
+      });
+    });
 });
 
 const filteredTemplates = computed(() => {
@@ -74,13 +84,10 @@ const handleSendMessage = template => {
     />
     <div
       v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
-        <Icon
-          icon="i-lucide-search"
-          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-        />
+        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
         <input
           v-model="searchQuery"
           type="search"
@@ -89,13 +96,13 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
         />
       </div>
       <div
         v-for="template in filteredTemplates"
         :key="template.id"
-        class="flex flex-col gap-2 p-2 w-full rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
         @click="handleTemplateClick(template)"
       >
         <span class="text-sm text-n-slate-12">{{ template.name }}</span>
@@ -104,12 +111,12 @@ const handleSendMessage = template => {
         </p>
       </div>
       <template v-if="filteredTemplates.length === 0">
-        <p class="pt-2 w-full text-sm text-n-slate-11">
+        <p class="w-full pt-2 text-sm text-n-slate-11">
           {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
         </p>
       </template>
     </div>
-    <WhatsappTemplate
+    <WhatsappTemplateParser
       v-if="selectedTemplate"
       :template="selectedTemplate"
       @send-message="handleSendMessage"

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

@@ -1,64 +0,0 @@
-<script setup>
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import { useI18n } from 'vue-i18n';
-
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'back']);
-
-const { t } = useI18n();
-
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
-
-const handleBack = () => {
-  emit('back');
-};
-</script>
-
-<template>
-  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
-  >
-    <div class="w-full">
-      <WhatsAppTemplateParser
-        :template="template"
-        @send-message="handleSendMessage"
-        @back="handleBack"
-      >
-        <template #actions="{ sendMessage, goBack, disabled }">
-          <div class="flex gap-3 justify-between items-end w-full h-14">
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
-                )
-              "
-              color="slate"
-              variant="faded"
-              class="w-full font-medium"
-              @click="goBack"
-            />
-            <Button
-              :label="
-                t(
-                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
-                )
-              "
-              class="w-full font-medium"
-              :disabled="disabled"
-              @click="sendMessage"
-            />
-          </div>
-        </template>
-      </WhatsAppTemplateParser>
-    </div>
-  </div>
-</template>

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

@@ -0,0 +1,176 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const templateName = computed(() => {
+  return props.template?.name || '';
+});
+
+const templateString = computed(() => {
+  return props.template?.components?.find(
+    component => component.type === 'BODY'
+  ).text;
+});
+
+const processVariable = str => {
+  return str.replace(/{{|}}/g, '');
+};
+
+const processedString = computed(() => {
+  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+    const variableKey = processVariable(variable);
+    return processedParams.value[variableKey] || `{{${variable}}}`;
+  });
+});
+
+const processedStringWithVariableHighlight = computed(() => {
+  const variables = templateString.value.match(/{{([^}]+)}}/g) || [];
+
+  return variables.reduce((result, variable) => {
+    const variableKey = processVariable(variable);
+    const value = processedParams.value[variableKey] || variable;
+    return result.replace(
+      variable,
+      `<span class="break-all text-n-slate-12">${value}</span>`
+    );
+  }, templateString.value);
+});
+
+const rules = computed(() => {
+  const paramRules = {};
+  Object.keys(processedParams.value).forEach(key => {
+    paramRules[key] = { required: requiredIf(true) };
+  });
+  return {
+    processedParams: paramRules,
+  };
+});
+
+const v$ = useVuelidate(rules, { processedParams });
+
+const getFieldErrorType = key => {
+  if (!v$.value.processedParams[key]?.$error) return 'info';
+  return 'error';
+};
+
+const generateVariables = () => {
+  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+  if (!matchedVariables) return;
+
+  const finalVars = matchedVariables.map(i => processVariable(i));
+  processedParams.value = finalVars.reduce((acc, variable) => {
+    acc[variable] = '';
+    return acc;
+  }, {});
+};
+
+const sendMessage = async () => {
+  const isValid = await v$.value.$validate();
+  if (!isValid) return;
+
+  const payload = {
+    message: processedString.value,
+    templateParams: {
+      name: props.template.name,
+      category: props.template.category,
+      language: props.template.language,
+      namespace: props.template.namespace,
+      processed_params: processedParams.value,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+onMounted(() => {
+  generateVariables();
+});
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <span class="text-sm text-n-slate-12">
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.TEMPLATE_NAME',
+          { templateName: templateName }
+        )
+      }}
+    </span>
+    <p
+      class="mb-0 text-sm text-n-slate-11"
+      v-html="processedStringWithVariableHighlight"
+    />
+
+    <span
+      v-if="Object.keys(processedParams).length"
+      class="text-sm font-medium text-n-slate-12"
+    >
+      {{
+        t(
+          'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.VARIABLES'
+        )
+      }}
+    </span>
+
+    <div
+      v-for="(variable, key) in processedParams"
+      :key="key"
+      class="flex items-center w-full gap-2"
+    >
+      <span
+        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+      >
+        {{ key }}
+      </span>
+      <Input
+        v-model="processedParams[key]"
+        custom-input-class="!h-8 w-full !bg-transparent"
+        class="w-full"
+        :message-type="getFieldErrorType(key)"
+      />
+    </div>
+
+    <div class="flex items-end justify-between w-full gap-3 h-14">
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+          )
+        "
+        color="slate"
+        variant="faded"
+        class="w-full font-medium"
+        @click="emit('back')"
+      />
+      <Button
+        :label="
+          t(
+            'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+          )
+        "
+        class="w-full font-medium"
+        @click="sendMessage"
+      />
+    </div>
+  </div>
+</template>

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

@@ -36,11 +36,10 @@ const transformInbox = ({
   email,
   channelType,
   phoneNumber,
-  medium,
   ...rest
 }) => ({
   id,
-  icon: getInboxIconByType(channelType, medium, 'line'),
+  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
   label: generateLabelForContactableInboxesList({
     name,
     email,

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 import wootConstants from 'dashboard/constants/globals';
 
 const props = defineProps({
@@ -34,18 +33,10 @@ const props = defineProps({
     validator: value =>
       !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
   },
-  inbox: {
-    type: Object,
-    default: null,
-  },
   iconName: {
     type: String,
     default: null,
   },
-  hideOfflineStatus: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits(['upload', 'delete']);
@@ -75,11 +66,11 @@ const AVATAR_COLORS = {
   default: { bg: '#E8E8E8', text: '#60646C' },
 };
 
-const STATUS_CLASSES = computed(() => ({
+const STATUS_CLASSES = {
   online: 'bg-n-teal-10',
   busy: 'bg-n-amber-10',
-  ...(props.hideOfflineStatus ? {} : { offline: 'bg-n-slate-10' }),
-}));
+  offline: 'bg-n-slate-10',
+};
 
 const showDefaultAvatar = computed(() => !props.src && !props.name);
 
@@ -183,31 +174,21 @@ watch(
 </script>
 
 <template>
-  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
-    :style="containerStyles"
-  >
+  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
     <!-- Status Badge -->
     <slot name="badge" :size="size">
       <div
-        v-if="status && STATUS_CLASSES[status]"
+        v-if="status"
         class="absolute z-20 border rounded-full border-n-slate-3"
         :style="badgeStyles"
         :class="STATUS_CLASSES[status]"
       />
-      <div
-        v-if="inbox && !(status && STATUS_CLASSES[status])"
-        :style="badgeStyles"
-        class="absolute z-20 flex items-center justify-center rounded-full bg-n-solid-1 border border-transparent flex-shrink-0"
-      >
-        <ChannelIcon :inbox="inbox" class="w-full h-full text-n-slate-11" />
-      </div>
     </slot>
 
     <!-- Delete Avatar Button -->
     <div
       v-if="src && allowUpload"
-      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 ltr:-right-2 rtl:-left-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
       @click="handleDismiss"
     >
       <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
@@ -251,40 +232,31 @@ watch(
         <!-- Fallback Icon if no name or image -->
         <Icon
           v-else
-          :title="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
           icon="i-lucide-user"
           :style="iconStyles"
         />
       </template>
 
       <!-- Upload Overlay and Input -->
-      <slot
-        v-if="allowUpload || $slots.overlay"
-        name="overlay"
-        :size="size"
-        :handle-upload="handleUploadAvatar"
-        :file-input-ref="fileInput"
-        :handle-image-upload="handleImageUpload"
+      <div
+        v-if="allowUpload"
+        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+        @click="handleUploadAvatar"
       >
-        <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-          @click="handleUploadAvatar"
-        >
-          <Icon
-            icon="i-lucide-upload"
-            class="text-white"
-            :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
-          />
-          <input
-            v-if="allowUpload"
-            ref="fileInput"
-            type="file"
-            accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-            class="hidden"
-            @change="handleImageUpload"
-          />
-        </div>
-      </slot>
+        <Icon
+          icon="i-lucide-upload"
+          class="text-white"
+          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+        />
+        <input
+          ref="fileInput"
+          type="file"
+          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+          class="hidden"
+          @change="handleImageUpload"
+        />
+      </div>
     </span>
   </span>
 </template>

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

@@ -21,17 +21,9 @@ const onClick = (item, index) => {
 </script>
 
 <template>
-  <nav
-    :aria-label="t('BREADCRUMB.ARIA_LABEL')"
-    class="flex items-center h-8 min-w-0"
-  >
-    <ol class="flex items-center mb-0 min-w-0">
-      <li
-        v-for="(item, index) in items"
-        :key="index"
-        class="flex items-center"
-        :class="{ 'min-w-0 flex-1': index === items.length - 1 }"
-      >
+  <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
+    <ol class="flex items-center mb-0">
+      <li v-for="(item, index) in items" :key="index" class="flex items-center">
         <Icon
           v-if="index > 0"
           icon="i-lucide-chevron-right"
@@ -48,7 +40,7 @@ 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">
+        <span v-else class="text-sm truncate text-n-slate-12 max-w-56">
           {{ item.emoji ? item.emoji : '' }} {{ item.label }}
         </span>
       </li>

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

@@ -52,10 +52,10 @@ const handleBreadcrumbClick = item => {
 
 <template>
   <section
-    class="px-6 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
+    class="mt-4 px-10 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
   >
     <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
-      <header class="mb-7 sticky top-0 bg-n-background pt-4 z-20">
+      <header class="mb-7 sticky top-0 z-10 bg-n-background">
         <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
       </header>
       <main class="flex gap-16 w-full flex-1 pb-16">

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

@@ -63,20 +63,6 @@ const menuItems = computed(() => {
 
 const createdAt = computed(() => dynamicTime(props.createdAt));
 
-const isPdfDocument = computed(() => props.externalLink?.startsWith('PDF:'));
-const displayLink = computed(() => {
-  if (isPdfDocument.value) {
-    // Remove 'PDF: ' prefix and timestamp suffix for display
-    const fullName = props.externalLink.substring(5);
-    // Remove timestamp suffix (_YYYYMMDDHHMMSS) if present
-    return fullName.replace(/_\d{14}$/, '');
-  }
-  return props.externalLink;
-});
-const linkIcon = computed(() =>
-  isPdfDocument.value ? 'i-ph-file-pdf' : 'i-ph-link-simple'
-);
-
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
@@ -120,8 +106,8 @@ const handleAction = ({ action, value }) => {
       <span
         class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
       >
-        <i :class="linkIcon" class="shrink-0" />
-        <span class="truncate">{{ displayLink }}</span>
+        <i class="i-ph-link-simple shrink-0" />
+        <span class="truncate">{{ externalLink }}</span>
       </span>
       <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
         {{ createdAt }}

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

@@ -57,10 +57,9 @@ const menuItems = computed(() => [
   },
 ]);
 
-const icon = computed(() => {
-  const { medium, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, medium, 'outline');
-});
+const icon = computed(() =>
+  getInboxIconByType(props.inbox.channel_type, '', 'outline')
+);
 
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);

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

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, h, reactive, ref } from 'vue';
+import { computed, h, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useToggle, useElementSize } from '@vueuse/core';
+import { useToggle } from '@vueuse/core';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength } from '@vuelidate/validators';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
@@ -11,7 +11,6 @@ import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
 import Editor from 'dashboard/components-next/Editor/Editor.vue';
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
-import Icon from 'dashboard/components-next/icon/Icon.vue';
 
 const props = defineProps({
   id: {
@@ -32,7 +31,7 @@ const props = defineProps({
   },
   tools: {
     type: Array,
-    default: () => [],
+    required: true,
   },
   selectable: {
     type: Boolean,
@@ -61,13 +60,7 @@ const state = reactive({
   instruction: '',
 });
 
-const instructionContentRef = ref();
-
 const [isEditing, toggleEditing] = useToggle();
-const [isInstructionExpanded, toggleInstructionExpanded] = useToggle();
-
-const { height: contentHeight } = useElementSize(instructionContentRef);
-const needsOverlay = computed(() => contentHeight.value > 160);
 
 const startEdit = () => {
   Object.assign(state, {
@@ -118,7 +111,7 @@ const LINK_INSTRUCTION_CLASS =
 
 const renderInstruction = instruction => () =>
   h('p', {
-    class: `text-sm text-n-slate-12 py-4 mb-0 prose prose-sm min-w-0 break-words max-w-none ${LINK_INSTRUCTION_CLASS}`,
+    class: `text-sm text-n-slate-12 py-4 mb-0 [&_ol]:list-decimal ${LINK_INSTRUCTION_CLASS}`,
     innerHTML: instruction,
   });
 </script>
@@ -164,38 +157,8 @@ const renderInstruction = instruction => () =>
           />
         </div>
       </div>
-
-      <div
-        class="relative overflow-hidden transition-all duration-300 ease-in-out group/expandable"
-        :class="{ 'cursor-pointer': needsOverlay }"
-        :style="{
-          maxHeight: isInstructionExpanded ? `${contentHeight}px` : '10rem',
-        }"
-        @click="needsOverlay ? toggleInstructionExpanded() : null"
-      >
-        <div ref="instructionContentRef">
-          <component
-            :is="renderInstruction(formatMessage(instruction, false))"
-          />
-        </div>
-
-        <div
-          class="absolute bottom-0 w-full flex items-end justify-center text-xs text-n-slate-11 bg-gradient-to-t h-40 from-n-solid-2 via-n-solid-2 via-10% to-transparent transition-all duration-500 ease-in-out px-2 py-1 rounded pointer-events-none"
-          :class="{
-            'visible opacity-100': !isInstructionExpanded,
-            'invisible opacity-0': isInstructionExpanded || !needsOverlay,
-          }"
-        >
-          <Icon
-            icon="i-lucide-chevron-down"
-            class="text-n-slate-7 mb-4 size-4 group-hover/expandable:text-n-slate-11 transition-colors duration-200"
-          />
-        </div>
-      </div>
-      <span
-        v-if="tools?.length"
-        class="text-sm text-n-slate-11 font-medium mb-1"
-      >
+      <component :is="renderInstruction(formatMessage(instruction, false))" />
+      <span class="text-sm text-n-slate-11 font-medium mb-1">
         {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
         {{ tools?.map(tool => `@${tool}`).join(', ') }}
       </span>

app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue

@@ -35,7 +35,6 @@ const initialState = {
   productName: '',
   featureFaq: false,
   featureMemory: false,
-  featureCitation: false,
 };
 
 const state = reactive({ ...initialState });
@@ -71,7 +70,6 @@ const prepareAssistantDetails = () => ({
     product_name: state.productName,
     feature_faq: state.featureFaq,
     feature_memory: state.featureMemory,
-    feature_citation: state.featureCitation,
   },
 });
 
@@ -95,7 +93,6 @@ const updateStateFromAssistant = assistant => {
     productName: config.product_name,
     featureFaq: config.feature_faq || false,
     featureMemory: config.feature_memory || false,
-    featureCitation: config.feature_citation || false,
   });
 };
 
@@ -154,13 +151,6 @@ watch(
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
         </span>
       </label>
-
-      <label class="flex items-center gap-2">
-        <input v-model="state.featureCitation" type="checkbox" />
-        <span class="text-sm font-medium text-n-slate-12">
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-        </span>
-      </label>
     </fieldset>
 
     <div class="flex items-center justify-between w-full gap-3">

app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue

@@ -41,7 +41,6 @@ const initialState = {
   features: {
     conversationFaqs: false,
     memories: false,
-    citations: false,
   },
   temperature: 1,
 };
@@ -88,7 +87,6 @@ const updateStateFromAssistant = assistant => {
   state.features = {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
-    citations: config.feature_citation || false,
   };
   state.temperature = config.temperature || 1;
 };
@@ -154,7 +152,6 @@ const handleFeaturesUpdate = () => {
       ...props.assistant.config,
       feature_faq: state.features.conversationFaqs,
       feature_memory: state.features.memories,
-      feature_citation: state.features.citations,
     },
   };
 
@@ -303,19 +300,20 @@ watch(
               <input
                 v-model="state.features.conversationFaqs"
                 type="checkbox"
+                class="form-checkbox"
               />
               {{
                 t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
               }}
             </label>
             <label class="flex items-center gap-2">
-              <input v-model="state.features.memories" type="checkbox" />
+              <input
+                v-model="state.features.memories"
+                type="checkbox"
+                class="form-checkbox"
+              />
               {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
             </label>
-            <label class="flex items-center gap-2">
-              <input v-model="state.features.citations" type="checkbox" />
-              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-            </label>
           </div>
         </div>
 

app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue

@@ -26,7 +26,6 @@ const initialState = {
   features: {
     conversationFaqs: false,
     memories: false,
-    citations: false,
   },
 };
 
@@ -58,7 +57,6 @@ const updateStateFromAssistant = assistant => {
   state.features = {
     conversationFaqs: config.feature_faq || false,
     memories: config.feature_memory || false,
-    citations: config.feature_citation || false,
   };
 };
 
@@ -78,7 +76,6 @@ const handleBasicInfoUpdate = async () => {
       product_name: state.productName,
       feature_faq: state.features.conversationFaqs,
       feature_memory: state.features.memories,
-      feature_citation: state.features.citations,
     },
   };
 
@@ -126,17 +123,21 @@ watch(
       </label>
       <div class="flex flex-col gap-2">
         <label class="flex items-center gap-2">
-          <input v-model="state.features.conversationFaqs" type="checkbox" />
+          <input
+            v-model="state.features.conversationFaqs"
+            type="checkbox"
+            class="form-checkbox"
+          />
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
         </label>
         <label class="flex items-center gap-2">
-          <input v-model="state.features.memories" type="checkbox" />
+          <input
+            v-model="state.features.memories"
+            type="checkbox"
+            class="form-checkbox"
+          />
           {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
         </label>
-        <label class="flex items-center gap-2">
-          <input v-model="state.features.citations" type="checkbox" />
-          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
-        </label>
       </div>
     </div>
 

app/javascript/dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue

@@ -23,9 +23,7 @@ const handleSubmit = async newDocument => {
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      error?.response?.data?.message ||
-      error?.response?.message ||
-      t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
     useAlert(errorMessage);
   }
 };

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -1,10 +1,9 @@
 <script setup>
-import { reactive, computed, ref, nextTick } from 'vue';
+import { reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, requiredIf } from '@vuelidate/validators';
+import { required, minLength, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
-import { useAlert } from 'dashboard/composables';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
@@ -21,25 +20,14 @@ const formState = {
 
 const initialState = {
   name: '',
-  url: '',
   assistantId: null,
-  documentType: 'url',
-  pdfFile: null,
 };
 
 const state = reactive({ ...initialState });
-const fileInputRef = ref(null);
 
 const validationRules = {
-  url: {
-    required: requiredIf(() => state.documentType === 'url'),
-    url: requiredIf(() => state.documentType === 'url'),
-    minLength: minLength(1),
-  },
+  url: { required, url, minLength: minLength(1) },
   assistantId: { required },
-  pdfFile: {
-    required: requiredIf(() => state.documentType === 'pdf'),
-  },
 };
 
 const assistantList = computed(() =>
@@ -62,57 +50,14 @@ const getErrorMessage = (field, errorKey) => {
 const formErrors = computed(() => ({
   url: getErrorMessage('url', 'URL'),
   assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
-  pdfFile: getErrorMessage('pdfFile', 'PDF_FILE'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const handleFileChange = event => {
-  const file = event.target.files[0];
-  if (file) {
-    if (file.type !== 'application/pdf') {
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.INVALID_TYPE'));
-      event.target.value = '';
-      return;
-    }
-    if (file.size > 10 * 1024 * 1024) {
-      // 10MB
-      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
-      event.target.value = '';
-      return;
-    }
-    state.pdfFile = file;
-    state.name = file.name.replace('.pdf', '');
-  }
-};
-
-const openFileDialog = () => {
-  // Use nextTick to ensure the ref is available
-  nextTick(() => {
-    if (fileInputRef.value) {
-      fileInputRef.value.click();
-    }
-  });
-};
-
-const prepareDocumentDetails = () => {
-  const formData = new FormData();
-  formData.append('document[assistant_id]', state.assistantId);
-
-  if (state.documentType === 'url') {
-    formData.append('document[external_link]', state.url);
-    formData.append('document[name]', state.name || state.url);
-  } else {
-    formData.append('document[pdf_file]', state.pdfFile);
-    formData.append(
-      'document[name]',
-      state.name || state.pdfFile.name.replace('.pdf', '')
-    );
-    // No need to send external_link for PDF - it's auto-generated in the backend
-  }
-
-  return formData;
-};
+const prepareDocumentDetails = () => ({
+  external_link: state.url,
+  assistant_id: state.assistantId,
+});
 
 const handleSubmit = async () => {
   const isFormValid = await v$.value.$validate();
@@ -126,102 +71,13 @@ const handleSubmit = async () => {
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <div class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
-      </label>
-      <div class="grid grid-cols-2 gap-3 p-1 bg-n-slate-3 rounded-lg">
-        <button
-          type="button"
-          class="relative flex items-center justify-center gap-2 px-4 py-2.5 rounded-md font-medium text-sm transition-all duration-200"
-          :class="
-            state.documentType === 'url'
-              ? 'bg-n-white text-n-slate-12 shadow-sm'
-              : 'text-n-slate-11 hover:text-n-slate-12'
-          "
-          @click="state.documentType = 'url'"
-        >
-          <i class="i-ph-link-simple text-base" />
-          <span>{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') }}</span>
-        </button>
-        <button
-          type="button"
-          class="relative flex items-center justify-center gap-2 px-4 py-2.5 rounded-md font-medium text-sm transition-all duration-200"
-          :class="
-            state.documentType === 'pdf'
-              ? 'bg-n-white text-n-slate-12 shadow-sm'
-              : 'text-n-slate-11 hover:text-n-slate-12'
-          "
-          @click="state.documentType = 'pdf'"
-        >
-          <i class="i-ph-file-pdf text-base" />
-          <span>{{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') }}</span>
-        </button>
-      </div>
-    </div>
-
     <Input
-      v-if="state.documentType === 'url'"
       v-model="state.url"
       :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
       :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
       :message="formErrors.url"
       :message-type="formErrors.url ? 'error' : 'info'"
     />
-
-    <div v-if="state.documentType === 'pdf'" class="flex flex-col gap-2">
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.LABEL') }}
-      </label>
-      <div class="relative">
-        <input
-          ref="fileInputRef"
-          type="file"
-          accept=".pdf"
-          class="hidden"
-          @change="handleFileChange"
-        />
-        <button
-          type="button"
-          class="flex items-center gap-3 px-4 py-3 border border-n-slate-6 rounded-lg cursor-pointer hover:border-n-slate-8 transition-colors w-full text-left"
-          :class="state.pdfFile ? 'bg-n-slate-2' : 'bg-n-white'"
-          @click="openFileDialog"
-        >
-          <div
-            class="flex items-center justify-center w-10 h-10 bg-n-slate-3 rounded-lg"
-          >
-            <i class="i-ph-file-pdf text-xl text-n-slate-11" />
-          </div>
-          <div class="flex-1">
-            <p class="text-sm font-medium text-n-slate-12">
-              {{
-                state.pdfFile
-                  ? state.pdfFile.name
-                  : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
-              }}
-            </p>
-            <p class="text-xs text-n-slate-11">
-              {{
-                state.pdfFile
-                  ? `${(state.pdfFile.size / 1024 / 1024).toFixed(2)} MB`
-                  : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.HELP_TEXT')
-              }}
-            </p>
-          </div>
-          <i class="i-lucide-upload text-n-slate-11" />
-        </button>
-      </div>
-      <p v-if="formErrors.pdfFile" class="text-sm text-n-red-11">
-        {{ formErrors.pdfFile }}
-      </p>
-    </div>
-
-    <Input
-      v-model="state.name"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.NAME.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.NAME.PLACEHOLDER')"
-    />
-
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
         {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}

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

@@ -192,7 +192,6 @@ defineExpose({ validate });
         solid
         slate
         icon="i-lucide-trash"
-        class="flex-shrink-0"
         @click.stop="emit('remove')"
       />
     </div>

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

@@ -104,7 +104,7 @@ const outsideClickHandler = [
 <template>
   <div
     v-on-click-outside="outsideClickHandler"
-    class="z-40 max-w-3xl min-w-96 lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
   >
     <h3 class="text-base font-medium leading-6 text-n-slate-12">
       {{ filterModalHeaderTitle }}
@@ -146,10 +146,10 @@ const outsideClickHandler = [
       </template>
     </ul>
     <div class="flex justify-between gap-2">
-      <Button sm ghost blue class="flex-shrink-0" @click="addFilter">
+      <Button sm ghost blue @click="addFilter">
         {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.ADD_FILTER') }}
       </Button>
-      <div class="flex gap-2 flex-shrink-0">
+      <div class="flex gap-2">
         <Button sm faded slate @click="resetFilter">
           {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.CLEAR_FILTERS') }}
         </Button>

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

@@ -1,5 +1,4 @@
 <script setup>
-import { toRef } from 'vue';
 import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';
 
@@ -10,7 +9,7 @@ const props = defineProps({
   },
 });
 
-const channelIcon = useChannelIcon(toRef(props, 'inbox'));
+const channelIcon = useChannelIcon(props.inbox);
 </script>
 
 <template>

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

@@ -22,21 +22,15 @@ export function useChannelIcon(inbox) {
   };
 
   const channelIcon = computed(() => {
-    const inboxDetails = inbox.value || inbox;
-    const type = inboxDetails.channel_type;
+    const type = inbox.channel_type;
     let icon = channelTypeIconMap[type];
 
-    if (type === 'Channel::Email' && inboxDetails.provider) {
-      if (Object.keys(providerIconMap).includes(inboxDetails.provider)) {
-        icon = providerIconMap[inboxDetails.provider];
+    if (type === 'Channel::Email' && inbox.provider) {
+      if (Object.keys(providerIconMap).includes(inbox.provider)) {
+        icon = providerIconMap[inbox.provider];
       }
     }
 
-    // Special case for Twilio whatsapp
-    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-ri-whatsapp-fill';
-    }
-
     return icon ?? 'i-ri-global-fill';
   });
 

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

@@ -25,77 +25,6 @@ describe('useChannelIcon', () => {
     expect(icon).toBe('i-ri-phone-fill');
   });
 
-  it('returns correct icon for Line channel', () => {
-    const inbox = { channel_type: 'Channel::Line' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-line-fill');
-  });
-
-  it('returns correct icon for SMS channel', () => {
-    const inbox = { channel_type: 'Channel::Sms' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-chat-1-fill');
-  });
-
-  it('returns correct icon for Telegram channel', () => {
-    const inbox = { channel_type: 'Channel::Telegram' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-telegram-fill');
-  });
-
-  it('returns correct icon for Twitter channel', () => {
-    const inbox = { channel_type: 'Channel::TwitterProfile' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-twitter-x-fill');
-  });
-
-  it('returns correct icon for WebWidget channel', () => {
-    const inbox = { channel_type: 'Channel::WebWidget' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-global-fill');
-  });
-
-  it('returns correct icon for Instagram channel', () => {
-    const inbox = { channel_type: 'Channel::Instagram' };
-    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-instagram-fill');
-  });
-
-  describe('TwilioSms channel', () => {
-    it('returns chat icon for regular Twilio SMS channel', () => {
-      const inbox = { channel_type: 'Channel::TwilioSms' };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: 'whatsapp',
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-whatsapp-fill');
-    });
-
-    it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: 'sms',
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-
-    it('returns chat icon for Twilio SMS with undefined medium', () => {
-      const inbox = {
-        channel_type: 'Channel::TwilioSms',
-        medium: undefined,
-      };
-      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
-    });
-  });
-
   describe('Email channel', () => {
     it('returns mail icon for generic email channel', () => {
       const inbox = { channel_type: 'Channel::Email' };

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

@@ -41,7 +41,9 @@ const originalEmailText = computed(() => {
 });
 
 const originalEmailHtml = computed(
-  () => contentAttributes?.value?.email?.htmlContent?.full || ''
+  () =>
+    contentAttributes?.value?.email?.htmlContent?.full ??
+    originalEmailText.value
 );
 
 const messageContent = computed(() => {

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

@@ -509,8 +509,10 @@ const menuItems = computed(() => {
     class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
     :class="[
       {
-        'shadow-lg md:shadow-none': isMobileSidebarOpen,
-        'ltr:-translate-x-full rtl:translate-x-full': !isMobileSidebarOpen,
+        'ltr:translate-x-0 rtl:-translate-x-0 shadow-lg md:shadow-none':
+          isMobileSidebarOpen,
+        'ltr:-translate-x-full rtl:translate-x-full md:translate-x-0':
+          !isMobileSidebarOpen,
       },
     ]"
   >

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

@@ -218,8 +218,8 @@ onMounted(async () => {
   left: 0;
 }
 
-#app[dir='rtl'] .sidebar-group-children > .child-item:last-child::after,
-#app[dir='rtl']
+.app-rtl--wrapper .sidebar-group-children > .child-item:last-child::after,
+.app-rtl--wrapper
   .sidebar-group-children
   > *:last-child
   > *:last-child

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

@@ -86,15 +86,6 @@ const menuItems = computed(() => {
       nativeLink: true,
       target: '_blank',
     },
-    {
-      show: true,
-      showOnCustomBrandedInstance: false,
-      label: t('SIDEBAR_ITEMS.CHANGELOG'),
-      icon: 'i-lucide-scroll-text',
-      link: 'https://www.chatwoot.com/changelog/',
-      nativeLink: true,
-      target: '_blank',
-    },
     {
       show: currentUser.value.type === 'SuperAdmin',
       showOnCustomBrandedInstance: true,
@@ -123,7 +114,7 @@ const allowedMenuItems = computed(() => {
   <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
     <template #trigger="{ toggle, isOpen }">
       <button
-        class="flex gap-2 items-center p-1 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
+        class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
         :class="{ 'bg-n-alpha-1': isOpen }"
         @click="toggle"
       >
@@ -136,16 +127,16 @@ const allowedMenuItems = computed(() => {
           rounded-full
         />
         <div class="min-w-0">
-          <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
+          <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
             {{ currentUser.available_name }}
           </div>
-          <div class="text-xs truncate text-n-slate-11">
+          <div class="text-n-slate-11 text-xs truncate">
             {{ currentUser.email }}
           </div>
         </div>
       </button>
     </template>
-    <DropdownBody class="bottom-12 z-50 mb-2 w-80 ltr:left-0 rtl:right-0">
+    <DropdownBody class="ltr:left-0 rtl:right-0 bottom-12 z-50 w-80 mb-2">
       <SidebarProfileMenuStatus />
       <DropdownSeparator />
       <template v-for="item in allowedMenuItems" :key="item.label">

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

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

app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue

@@ -1,288 +0,0 @@
-<script setup>
-/**
- * This component handles parsing and sending WhatsApp message templates.
- * It works as follows:
- * 1. Displays the template text with variable placeholders.
- * 2. Generates input fields for each variable in the template.
- * 3. Validates that all variables are filled before sending.
- * 4. Replaces placeholders with user-provided values.
- * 5. Emits events to send the processed message or reset the template.
- */
-import { ref, computed, onMounted, watch } from 'vue';
-import { useVuelidate } from '@vuelidate/core';
-import { requiredIf } from '@vuelidate/validators';
-import { useI18n } from 'vue-i18n';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import {
-  buildTemplateParameters,
-  allKeysRequired,
-  replaceTemplateVariables,
-  DEFAULT_LANGUAGE,
-  DEFAULT_CATEGORY,
-  COMPONENT_TYPES,
-  MEDIA_FORMATS,
-  findComponentByType,
-} from 'dashboard/helper/templateHelper';
-
-const props = defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-    validator: value => {
-      if (!value || typeof value !== 'object') return false;
-      if (!value.components || !Array.isArray(value.components)) return false;
-      return true;
-    },
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
-
-const { t } = useI18n();
-
-const processedParams = ref({});
-
-const languageLabel = computed(() => {
-  return `${t('WHATSAPP_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || DEFAULT_LANGUAGE}`;
-});
-
-const categoryLabel = computed(() => {
-  return `${t('WHATSAPP_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || DEFAULT_CATEGORY}`;
-});
-
-const headerComponent = computed(() => {
-  return findComponentByType(props.template, COMPONENT_TYPES.HEADER);
-});
-
-const bodyComponent = computed(() => {
-  return findComponentByType(props.template, COMPONENT_TYPES.BODY);
-});
-
-const bodyText = computed(() => {
-  return bodyComponent.value?.text || '';
-});
-
-const hasMediaHeader = computed(() =>
-  MEDIA_FORMATS.includes(headerComponent.value?.format)
-);
-
-const formatType = computed(() => {
-  const format = headerComponent.value?.format;
-  return format ? format.charAt(0) + format.slice(1).toLowerCase() : '';
-});
-
-const hasVariables = computed(() => {
-  return bodyText.value?.match(/{{([^}]+)}}/g) !== null;
-});
-
-const renderedTemplate = computed(() => {
-  return replaceTemplateVariables(bodyText.value, processedParams.value);
-});
-
-const isFormInvalid = computed(() => {
-  if (!hasVariables.value && !hasMediaHeader.value) return false;
-
-  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
-    return true;
-  }
-
-  if (hasVariables.value && processedParams.value.body) {
-    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
-      value => !value
-    );
-    if (hasEmptyBodyVariable) return true;
-  }
-
-  if (processedParams.value.buttons) {
-    const hasEmptyButtonParameter = processedParams.value.buttons.some(
-      button => !button.parameter
-    );
-    if (hasEmptyButtonParameter) return true;
-  }
-
-  return false;
-});
-
-const v$ = useVuelidate(
-  {
-    processedParams: {
-      requiredIfKeysPresent: requiredIf(hasVariables),
-      allKeysRequired,
-    },
-  },
-  { processedParams }
-);
-
-const initializeTemplateParameters = () => {
-  processedParams.value = buildTemplateParameters(
-    props.template,
-    hasMediaHeader.value
-  );
-};
-
-const updateMediaUrl = value => {
-  processedParams.value.header ??= {};
-  processedParams.value.header.media_url = value;
-};
-
-const sendMessage = () => {
-  v$.value.$touch();
-  if (v$.value.$invalid) return;
-
-  const { name, category, language, namespace } = props.template;
-
-  const payload = {
-    message: renderedTemplate.value,
-    templateParams: {
-      name,
-      category,
-      language,
-      namespace,
-      processed_params: processedParams.value,
-    },
-  };
-  emit('sendMessage', payload);
-};
-
-const resetTemplate = () => {
-  emit('resetTemplate');
-};
-
-const goBack = () => {
-  emit('back');
-};
-
-onMounted(initializeTemplateParameters);
-
-watch(
-  () => props.template,
-  () => {
-    initializeTemplateParameters();
-    v$.value.$reset();
-  },
-  { deep: true }
-);
-
-defineExpose({
-  processedParams,
-  hasVariables,
-  hasMediaHeader,
-  headerComponent,
-  renderedTemplate,
-  v$,
-  updateMediaUrl,
-  sendMessage,
-  resetTemplate,
-  goBack,
-});
-</script>
-
-<template>
-  <div>
-    <div class="flex flex-col gap-4 p-4 mb-4 rounded-lg bg-n-alpha-black2">
-      <div class="flex justify-between items-center">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ template.name }}
-        </h3>
-        <span class="text-xs text-n-slate-11">
-          {{ languageLabel }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <div class="rounded-md">
-          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
-            {{ renderedTemplate }}
-          </div>
-        </div>
-      </div>
-
-      <div class="text-xs text-n-slate-11">
-        {{ categoryLabel }}
-      </div>
-    </div>
-
-    <div v-if="hasVariables || hasMediaHeader">
-      <div v-if="hasMediaHeader" class="mb-4">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{
-            $t('WHATSAPP_TEMPLATES.PARSER.MEDIA_HEADER_LABEL', {
-              type: formatType,
-            }) || `${formatType} Header`
-          }}
-        </p>
-        <div class="flex items-center mb-2.5">
-          <Input
-            :model-value="processedParams.header?.media_url || ''"
-            type="url"
-            class="flex-1"
-            :placeholder="
-              t('WHATSAPP_TEMPLATES.PARSER.MEDIA_URL_LABEL', {
-                type: formatType,
-              })
-            "
-            @update:model-value="updateMediaUrl"
-          />
-        </div>
-      </div>
-
-      <!-- Body Variables Section -->
-      <div v-if="processedParams.body">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
-        </p>
-        <div
-          v-for="(variable, key) in processedParams.body"
-          :key="`body-${key}`"
-          class="flex items-center mb-2.5"
-        >
-          <Input
-            v-model="processedParams.body[key]"
-            type="text"
-            class="flex-1"
-            :placeholder="
-              t('WHATSAPP_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
-                variable: key,
-              })
-            "
-          />
-        </div>
-      </div>
-
-      <!-- Button Variables Section -->
-      <div v-if="processedParams.buttons">
-        <p class="mb-2.5 text-sm font-semibold">
-          {{ t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETERS') }}
-        </p>
-        <div
-          v-for="(button, index) in processedParams.buttons"
-          :key="`button-${index}`"
-          class="flex items-center mb-2.5"
-        >
-          <Input
-            v-model="processedParams.buttons[index].parameter"
-            type="text"
-            class="flex-1"
-            :placeholder="t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETER')"
-          />
-        </div>
-      </div>
-      <p
-        v-if="v$.$dirty && v$.$invalid"
-        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
-      >
-        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
-      </p>
-    </div>
-
-    <slot
-      name="actions"
-      :send-message="sendMessage"
-      :reset-template="resetTemplate"
-      :go-back="goBack"
-      :is-valid="!v$.$invalid"
-      :disabled="isFormInvalid"
-    />
-  </div>
-</template>

app/javascript/dashboard/components/ChatListHeader.vue

@@ -98,7 +98,7 @@ const toggleConversationLayout = () => {
           />
           <div
             id="saveFilterTeleportTarget"
-            class="absolute z-50 mt-2"
+            class="absolute z-40 mt-2"
             :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
@@ -124,7 +124,7 @@ const toggleConversationLayout = () => {
           />
           <div
             id="conversationFilterTeleportTarget"
-            class="absolute z-50 mt-2"
+            class="absolute z-40 mt-2"
             :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
           />
         </div>
@@ -150,7 +150,7 @@ const toggleConversationLayout = () => {
         />
         <div
           id="conversationFilterTeleportTarget"
-          class="absolute z-50 mt-2"
+          class="absolute z-40 mt-2"
           :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
         />
       </div>

app/javascript/dashboard/components/index.js

@@ -1,5 +1,6 @@
 // [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
+import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Code from './Code.vue';
 import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
@@ -17,9 +18,11 @@ import Modal from './Modal.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
+import Thumbnail from './widgets/Thumbnail.vue';
 import DatePicker from './ui/DatePicker/DatePicker.vue';
 
 const WootUIKit = {
+  AvatarUploader,
   Code,
   ColorPicker,
   ConfirmDeleteModal,
@@ -37,6 +40,7 @@ const WootUIKit = {
   Spinner,
   Tabs,
   TabsItem,
+  Thumbnail,
   DatePicker,
   install(Vue) {
     const keys = Object.keys(this);

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

@@ -1,5 +1,9 @@
 <script>
+/* eslint no-console: 0 */
+import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+
 export default {
+  mixins: [globalConfigMixin],
   props: {
     items: {
       type: Array,

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

@@ -0,0 +1,55 @@
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
+      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '');
+      }
+      initials = initials.substring(0, 2).toUpperCase();
+
+      return initials;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="avatar-container" :style="style" aria-hidden="true">
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<style scoped>
+@tailwind components;
+@layer components {
+  .avatar-color {
+    background-image: linear-gradient(to top, #c2e1ff 0%, #d6ebff 100%);
+  }
+
+  .dark-avatar-color {
+    background-image: linear-gradient(to top, #135899 0%, #135899 100%);
+  }
+}
+.avatar-container {
+  @apply flex leading-[100%] font-medium items-center justify-center text-center cursor-default avatar-color dark:dark-avatar-color text-n-blue-text;
+}
+</style>

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

@@ -1,22 +1,32 @@
-<script setup>
-import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+<script>
+import { getInboxClassByType } from 'dashboard/helper/inbox';
 
-defineProps({
-  inbox: {
-    type: Object,
-    default: () => {},
+export default {
+  props: {
+    inbox: {
+      type: Object,
+      default: () => {},
+    },
   },
-});
+  computed: {
+    computedInboxClass() {
+      const { phone_number: phoneNumber, channel_type: type } = this.inbox;
+      const classByType = getInboxClassByType(type, phoneNumber);
+      return classByType;
+    },
+  },
+};
 </script>
 
 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3 ltr:mr-0.5 rtl:ml-0.5 flex-shrink-0"
+  <div
+    class="inbox--name inline-flex items-center py-0.5 px-0 leading-3 whitespace-nowrap bg-none text-n-slate-11 text-xs my-0 mx-2.5"
+  >
+    <fluent-icon
+      class="mr-0.5 rtl:ml-0.5 rtl:mr-0"
+      :icon="computedInboxClass"
+      size="12"
     />
-    <span class="truncate">
-      {{ inbox.name }}
-    </span>
+    {{ inbox.name }}
   </div>
 </template>

app/javascript/dashboard/components/widgets/Thumbnail.spec.js

@@ -0,0 +1,48 @@
+import { mount } from '@vue/test-utils';
+import Avatar from './Avatar.vue';
+import Thumbnail from './Thumbnail.vue';
+
+describe('Thumbnail.vue', () => {
+  it('should render the agent thumbnail if valid image is passed', () => {
+    const wrapper = mount(Thumbnail, {
+      propsData: {
+        src: 'https://some_valid_url.com',
+      },
+      data() {
+        return {
+          hasImageLoaded: true,
+          imgError: false,
+        };
+      },
+    });
+    expect(wrapper.find('.user-thumbnail').exists()).toBe(true);
+    const avatarComponent = wrapper.findComponent(Avatar);
+    expect(avatarComponent.isVisible()).toBe(false);
+  });
+
+  it('should render the avatar component if invalid image is passed', () => {
+    const wrapper = mount(Thumbnail, {
+      propsData: {
+        src: 'https://some_invalid_url.com',
+      },
+      data() {
+        return {
+          hasImageLoaded: true,
+          imgError: true,
+        };
+      },
+    });
+    expect(wrapper.find('#image').exists()).toBe(false);
+    const avatarComponent = wrapper.findComponent(Avatar);
+    expect(avatarComponent.isVisible()).toBe(true);
+  });
+
+  it('should the initial of the name if no image is passed', () => {
+    const wrapper = mount(Avatar, {
+      propsData: {
+        username: 'Angie Rojas',
+      },
+    });
+    expect(wrapper.find('div').text()).toBe('AR');
+  });
+});

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

@@ -0,0 +1,224 @@
+<script>
+/**
+ * Thumbnail Component
+ * Src - source for round image
+ * Size - Size of the thumbnail
+ * Badge - Chat source indication { fb / telegram }
+ * Username - Username for avatar
+ */
+import Avatar from './Avatar.vue';
+import { removeEmoji } from 'shared/helpers/emoji';
+
+export default {
+  components: {
+    Avatar,
+  },
+  props: {
+    src: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '40px',
+    },
+    badge: {
+      type: String,
+      default: '',
+    },
+    username: {
+      type: String,
+      default: '',
+    },
+    status: {
+      type: String,
+      default: '',
+    },
+    hasBorder: {
+      type: Boolean,
+      default: false,
+    },
+    shouldShowStatusAlways: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    variant: {
+      type: String,
+      default: 'circle',
+    },
+  },
+  data() {
+    return {
+      hasImageLoaded: false,
+      imgError: false,
+    };
+  },
+  computed: {
+    userNameWithoutEmoji() {
+      return removeEmoji(this.username);
+    },
+    showStatusIndicator() {
+      if (this.shouldShowStatusAlways) return true;
+      return this.status === 'online' || this.status === 'busy';
+    },
+    avatarSize() {
+      return Number(this.size.replace(/\D+/g, ''));
+    },
+    badgeSrc() {
+      return {
+        instagram_direct_message: 'instagram-dm',
+        facebook: 'messenger',
+        'twitter-tweet': 'twitter-tweet',
+        'twitter-dm': 'twitter-dm',
+        whatsapp: 'whatsapp',
+        sms: 'sms',
+        'Channel::Line': 'line',
+        'Channel::Telegram': 'telegram',
+        'Channel::WebWidget': '',
+      }[this.badge];
+    },
+    badgeStyle() {
+      const size = Math.floor(this.avatarSize / 3);
+      const badgeSize = `${size + 2}px`;
+      const borderRadius = `${size / 2}px`;
+      return { width: badgeSize, height: badgeSize, borderRadius };
+    },
+    statusStyle() {
+      const statusSize = `${this.avatarSize / 4}px`;
+      return { width: statusSize, height: statusSize };
+    },
+    thumbnailClass() {
+      const className = this.hasBorder
+        ? 'border border-solid border-white dark:border-n-weak'
+        : '';
+      const variant =
+        this.variant === 'circle' ? 'thumbnail-rounded' : 'thumbnail-square';
+      return `user-thumbnail ${className} ${variant}`;
+    },
+    thumbnailBoxClass() {
+      const boxClass = this.variant === 'circle' ? 'is-rounded' : '';
+      return `user-thumbnail-box ${boxClass}`;
+    },
+    shouldShowImage() {
+      if (!this.src) {
+        return false;
+      }
+      if (this.hasImageLoaded) {
+        return !this.imgError;
+      }
+      return false;
+    },
+  },
+  watch: {
+    src(value, oldValue) {
+      if (value !== oldValue && this.imgError) {
+        this.imgError = false;
+      }
+    },
+  },
+  methods: {
+    onImgError() {
+      this.imgError = true;
+    },
+    onImgLoad() {
+      this.hasImageLoaded = true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :class="thumbnailBoxClass"
+    :style="{ height: size, width: size }"
+    :title="title"
+  >
+    <!-- Using v-show instead of v-if to avoid flickering as v-if removes dom elements.  -->
+    <slot>
+      <img
+        v-show="shouldShowImage"
+        :src="src"
+        draggable="false"
+        :class="thumbnailClass"
+        @load="onImgLoad"
+        @error="onImgError"
+      />
+      <Avatar
+        v-show="!shouldShowImage"
+        :username="userNameWithoutEmoji"
+        :class="thumbnailClass"
+        :size="avatarSize"
+      />
+    </slot>
+    <img
+      v-if="badgeSrc"
+      class="source-badge z-20"
+      :style="badgeStyle"
+      :src="`/integrations/channels/badges/${badgeSrc}.png`"
+      alt="Badge"
+    />
+    <div
+      v-if="showStatusIndicator"
+      class="z-20"
+      :class="`source-badge user-online-status user-online-status--${status}`"
+      :style="statusStyle"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.user-thumbnail-box {
+  flex: 0 0 auto;
+  max-width: 100%;
+  position: relative;
+
+  &.is-rounded {
+    border-radius: 50%;
+  }
+
+  .user-thumbnail {
+    border-radius: 50%;
+    &.thumbnail-square {
+      border-radius: 0.5625rem;
+    }
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+    object-fit: cover;
+    vertical-align: initial;
+  }
+
+  .source-badge {
+    border-radius: 0.1875rem;
+    bottom: -0.125rem;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    position: absolute;
+    right: 0;
+    @apply bg-n-background p-0.5 size-3;
+  }
+
+  .user-online-status {
+    @apply bottom-0.5 rounded-full;
+
+    &:after {
+      content: ' ';
+    }
+  }
+
+  .user-online-status--online {
+    @apply bg-n-teal-10;
+  }
+
+  .user-online-status--busy {
+    @apply bg-n-amber-10;
+  }
+
+  .user-online-status--offline {
+    @apply bg-n-slate-10;
+  }
+}
+</style>

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

@@ -1,69 +1,78 @@
-<script setup>
-import { computed } from 'vue';
-import Avatar from 'next/avatar/Avatar.vue';
+<script>
+import Thumbnail from './Thumbnail.vue';
 
-const props = defineProps({
-  usersList: {
-    type: Array,
-    default: () => [],
+export default {
+  components: {
+    Thumbnail,
   },
-  size: {
-    type: Number,
-    default: 24,
-  },
-  showMoreThumbnailsCount: {
-    type: Boolean,
-    default: false,
-  },
-  moreThumbnailsText: {
-    type: String,
-    default: '',
-  },
-  gap: {
-    type: String,
-    default: 'normal',
-    validator(value) {
-      // The value must match one of these strings
-      return ['normal', 'tight'].includes(value);
+  props: {
+    usersList: {
+      type: Array,
+      default: () => [],
+    },
+    size: {
+      type: String,
+      default: '24px',
+    },
+    showMoreThumbnailsCount: {
+      type: Boolean,
+      default: false,
+    },
+    moreThumbnailsText: {
+      type: String,
+      default: '',
+    },
+    gap: {
+      type: String,
+      default: 'normal',
+      validator(value) {
+        // The value must match one of these strings
+        return ['normal', '', 'tight'].includes(value);
+      },
     },
   },
-});
-
-const gapClass = computed(() => {
-  if (props.gap === 'tight') {
-    return 'ltr:[&:not(:first-child)]:-ml-2 rtl:[&:not(:first-child)]:-mr-2';
-  }
-  return 'ltr:[&:not(:first-child)]:-ml-1 rtl:[&:not(:first-child)]:-mr-1';
-});
-
-const moreThumbnailsClass = computed(() => {
-  if (props.gap === 'tight') {
-    return 'ltr:-ml-2 rtl:-mr-2';
-  }
-  return 'ltr:-ml-1 rtl:-mr-1';
-});
+};
 </script>
 
 <template>
-  <div class="flex">
-    <Avatar
+  <div class="overlapping-thumbnails">
+    <Thumbnail
       v-for="user in usersList"
       :key="user.id"
       v-tooltip="user.name"
       :title="user.name"
       :src="user.thumbnail"
-      :name="user.name"
+      :username="user.name"
+      has-border
       :size="size"
-      class="[&>span]:outline [&>span]:outline-1 [&>span]:outline-n-background [&>span]:shadow"
-      :class="gapClass"
-      rounded-full
+      :class="`overlapping-thumbnail gap-${gap}`"
     />
-    <span
-      v-if="showMoreThumbnailsCount"
-      class="text-n-slate-11 bg-n-slate-4 outline outline-1 outline-n-background text-xs font-medium rounded-full px-2 inline-flex items-center shadow relative"
-      :class="moreThumbnailsClass"
-    >
+    <span v-if="showMoreThumbnailsCount" class="thumbnail-more-text">
       {{ moreThumbnailsText }}
     </span>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.overlapping-thumbnails {
+  display: flex;
+}
+
+.overlapping-thumbnail {
+  position: relative;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  &:not(:first-child) {
+    margin-left: -0.25rem;
+  }
+
+  .gap-tight {
+    margin-left: -0.5rem;
+  }
+}
+
+.thumbnail-more-text {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  @apply text-n-slate-11 bg-n-slate-4 border border-n-weak text-xs font-medium rounded-full px-2 ltr:-ml-2 rtl:-mr-2 inline-flex items-center relative;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <script setup>
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 
 defineProps({
   user: {
@@ -7,8 +7,8 @@ defineProps({
     default: () => ({}),
   },
   size: {
-    type: Number,
-    default: 20,
+    type: String,
+    default: '20px',
   },
   textClass: {
     type: String,
@@ -19,13 +19,11 @@ defineProps({
 
 <template>
   <div class="flex items-center gap-1.5 text-left">
-    <Avatar
+    <Thumbnail
       :src="user.thumbnail"
       :size="size"
-      :name="user.name"
+      :username="user.name"
       :status="user.availability_status"
-      hide-offline-status
-      rounded-full
     />
     <span class="my-0 truncate text-capitalize" :class="textClass">
       {{ user.name }}

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

@@ -6,12 +6,15 @@ import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import { getAllowedFileTypesByChannel } from '@chatwoot/utils';
-import { ALLOWED_FILE_TYPES } from 'shared/constants/messages';
+import {
+  ALLOWED_FILE_TYPES,
+  ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP,
+  ALLOWED_FILE_TYPES_FOR_LINE,
+  ALLOWED_FILE_TYPES_FOR_INSTAGRAM,
+} from 'shared/constants/messages';
 import VideoCallButton from '../VideoCallButton.vue';
 import AIAssistanceButton from '../AIAssistanceButton.vue';
 import { REPLY_EDITOR_MODES } from './constants';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
 import { mapGetters } from 'vuex';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
@@ -152,11 +155,6 @@ export default {
       uploadRef,
     };
   },
-  data() {
-    return {
-      ALLOWED_FILE_TYPES,
-    };
-  },
   computed: {
     ...mapGetters({
       accountId: 'getCurrentAccountId',
@@ -198,21 +196,17 @@ export default {
       return this.conversationType === 'instagram_direct_message';
     },
     allowedFileTypes() {
-      // Use default file types for private notes
-      if (this.isOnPrivateNote) {
-        return this.ALLOWED_FILE_TYPES;
+      if (this.isATwilioWhatsAppChannel) {
+        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
+      }
+      if (this.isALineChannel) {
+        return ALLOWED_FILE_TYPES_FOR_LINE;
       }
-
-      let channelType = this.channelType || this.inbox?.channel_type;
-
       if (this.isAnInstagramChannel || this.isInstagramDM) {
-        channelType = INBOX_TYPES.INSTAGRAM;
+        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
       }
 
-      return getAllowedFileTypesByChannel({
-        channelType,
-        medium: this.inbox?.medium,
-      });
+      return ALLOWED_FILE_TYPES;
     },
     enableDragAndDrop() {
       return !this.newConversationModalActive;

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

@@ -1,12 +1,12 @@
-<script setup>
-import { computed, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useStore, useMapGetter } from 'dashboard/composables/store';
+<script>
+import { mapGetters } from 'vuex';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
-import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from '../Thumbnail.vue';
 import MessagePreview from './MessagePreview.vue';
+import router from '../../../routes';
+import { frontendURL, conversationUrl } from '../../../helper/URLHelper';
 import InboxName from '../InboxName.vue';
+import inboxMixin from 'shared/mixins/inboxMixin';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
@@ -14,227 +14,257 @@ import PriorityMark from './PriorityMark.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 
-const props = defineProps({
-  activeLabel: { type: String, default: '' },
-  chat: { type: Object, default: () => ({}) },
-  hideInboxName: { type: Boolean, default: false },
-  hideThumbnail: { type: Boolean, default: false },
-  teamId: { type: [String, Number], default: 0 },
-  foldersId: { type: [String, Number], default: 0 },
-  showAssignee: { type: Boolean, default: false },
-  conversationType: { type: String, default: '' },
-  selected: { type: Boolean, default: false },
-  compact: { type: Boolean, default: false },
-  enableContextMenu: { type: Boolean, default: false },
-  allowedContextMenuOptions: { type: Array, default: () => [] },
-});
+export default {
+  components: {
+    CardLabels,
+    InboxName,
+    Thumbnail,
+    ConversationContextMenu,
+    TimeAgo,
+    MessagePreview,
+    PriorityMark,
+    SLACardLabel,
+    ContextMenu,
+  },
+  mixins: [inboxMixin],
+  props: {
+    activeLabel: {
+      type: String,
+      default: '',
+    },
+    chat: {
+      type: Object,
+      default: () => {},
+    },
+    hideInboxName: {
+      type: Boolean,
+      default: false,
+    },
+    hideThumbnail: {
+      type: Boolean,
+      default: false,
+    },
+    teamId: {
+      type: [String, Number],
+      default: 0,
+    },
+    foldersId: {
+      type: [String, Number],
+      default: 0,
+    },
+    showAssignee: {
+      type: Boolean,
+      default: false,
+    },
+    conversationType: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    enableContextMenu: {
+      type: Boolean,
+      default: false,
+    },
+    allowedContextMenuOptions: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  emits: [
+    'contextMenuToggle',
+    'assignAgent',
+    'assignLabel',
+    'assignTeam',
+    'markAsUnread',
+    'markAsRead',
+    'assignPriority',
+    'updateConversationStatus',
+    'deleteConversation',
+  ],
+  data() {
+    return {
+      hovered: false,
+      showContextMenu: false,
+      contextMenu: {
+        x: null,
+        y: null,
+      },
+    };
+  },
+  computed: {
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      inboxesList: 'inboxes/getInboxes',
+      activeInbox: 'getSelectedInbox',
+      accountId: 'getCurrentAccountId',
+    }),
+    chatMetadata() {
+      return this.chat.meta || {};
+    },
 
-const emit = defineEmits([
-  'contextMenuToggle',
-  'assignAgent',
-  'assignLabel',
-  'assignTeam',
-  'markAsUnread',
-  'markAsRead',
-  'assignPriority',
-  'updateConversationStatus',
-  'deleteConversation',
-  'selectConversation',
-  'deSelectConversation',
-]);
+    assignee() {
+      return this.chatMetadata.assignee || {};
+    },
 
-const router = useRouter();
-const store = useStore();
+    currentContact() {
+      return this.$store.getters['contacts/getContact'](
+        this.chatMetadata.sender.id
+      );
+    },
 
-const hovered = ref(false);
-const showContextMenu = ref(false);
-const contextMenu = ref({
-  x: null,
-  y: null,
-});
+    isActiveChat() {
+      return this.currentChat.id === this.chat.id;
+    },
 
-const currentChat = useMapGetter('getSelectedChat');
-const inboxesList = useMapGetter('inboxes/getInboxes');
-const activeInbox = useMapGetter('getSelectedInbox');
-const accountId = useMapGetter('getCurrentAccountId');
+    unreadCount() {
+      return this.chat.unread_count;
+    },
 
-const chatMetadata = computed(() => props.chat.meta || {});
+    hasUnread() {
+      return this.unreadCount > 0;
+    },
 
-const assignee = computed(() => chatMetadata.value.assignee || {});
+    isInboxNameVisible() {
+      return !this.activeInbox;
+    },
 
-const senderId = computed(() => chatMetadata.value.sender?.id);
+    lastMessageInChat() {
+      return getLastMessage(this.chat);
+    },
 
-const currentContact = computed(() => {
-  return senderId.value
-    ? store.getters['contacts/getContact'](senderId.value)
-    : {};
-});
+    inbox() {
+      const { inbox_id: inboxId } = this.chat;
+      const stateInbox = this.$store.getters['inboxes/getInbox'](inboxId);
+      return stateInbox;
+    },
 
-const isActiveChat = computed(() => {
-  return currentChat.value.id === props.chat.id;
-});
+    showInboxName() {
+      return (
+        !this.hideInboxName &&
+        this.isInboxNameVisible &&
+        this.inboxesList.length > 1
+      );
+    },
+    inboxName() {
+      const stateInbox = this.inbox;
+      return stateInbox.name || '';
+    },
+    hasSlaPolicyId() {
+      return this.chat?.sla_policy_id;
+    },
+    conversationPath() {
+      const { activeInbox, chat } = this;
+      return frontendURL(
+        conversationUrl({
+          accountId: this.accountId,
+          activeInbox,
+          id: chat.id,
+          label: this.activeLabel,
+          teamId: this.teamId,
+          foldersId: this.foldersId,
+          conversationType: this.conversationType,
+        })
+      );
+    },
+  },
+  methods: {
+    onCardClick(e) {
+      const path = this.conversationPath;
+      if (!path) return;
 
-const unreadCount = computed(() => props.chat.unread_count);
+      // Handle Ctrl/Cmd + Click for new tab
+      if (e.metaKey || e.ctrlKey) {
+        e.preventDefault();
+        window.open(
+          `${window.chatwootConfig.hostURL}${path}`,
+          '_blank',
+          'noopener,noreferrer'
+        );
+        return;
+      }
 
-const hasUnread = computed(() => unreadCount.value > 0);
+      // Skip if already active
+      if (this.isActiveChat) return;
 
-const isInboxNameVisible = computed(() => !activeInbox.value);
-
-const lastMessageInChat = computed(() => getLastMessage(props.chat));
-
-const inboxId = computed(() => props.chat.inbox_id);
-
-const inbox = computed(() => {
-  return inboxId.value ? store.getters['inboxes/getInbox'](inboxId.value) : {};
-});
-
-const showInboxName = computed(() => {
-  return (
-    !props.hideInboxName &&
-    isInboxNameVisible.value &&
-    inboxesList.value.length > 1
-  );
-});
-
-const showMetaSection = computed(() => {
-  return (
-    showInboxName.value ||
-    (props.showAssignee && assignee.value.name) ||
-    props.chat.priority
-  );
-});
-
-const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
-
-const showLabelsSection = computed(() => {
-  return props.chat.labels?.length > 0 || hasSlaPolicyId.value;
-});
-
-const messagePreviewClass = computed(() => {
-  return [
-    hasUnread.value ? 'font-medium text-n-slate-12' : 'text-n-slate-11',
-    !props.compact && hasUnread.value ? 'ltr:pr-4 rtl:pl-4' : '',
-    props.compact && hasUnread.value ? 'ltr:pr-6 rtl:pl-6' : '',
-  ];
-});
-
-const conversationPath = computed(() => {
-  return frontendURL(
-    conversationUrl({
-      accountId: accountId.value,
-      activeInbox: activeInbox.value,
-      id: props.chat.id,
-      label: props.activeLabel,
-      teamId: props.teamId,
-      conversationType: props.conversationType,
-      foldersId: props.foldersId,
-    })
-  );
-});
-
-const onCardClick = e => {
-  const path = conversationPath.value;
-  if (!path) return;
-
-  // Handle Ctrl/Cmd + Click for new tab
-  if (e.metaKey || e.ctrlKey) {
-    e.preventDefault();
-    window.open(
-      `${window.chatwootConfig.hostURL}${path}`,
-      '_blank',
-      'noopener,noreferrer'
-    );
-    return;
-  }
-
-  // Skip if already active
-  if (isActiveChat.value) return;
-
-  router.push({ path });
-};
-
-const onThumbnailHover = () => {
-  hovered.value = !props.hideThumbnail;
-};
-
-const onThumbnailLeave = () => {
-  hovered.value = false;
-};
-
-const onSelectConversation = checked => {
-  if (checked) {
-    emit('selectConversation', props.chat.id, inbox.value.id);
-  } else {
-    emit('deSelectConversation', props.chat.id, inbox.value.id);
-  }
-};
-
-const openContextMenu = e => {
-  if (!props.enableContextMenu) return;
-  e.preventDefault();
-  emit('contextMenuToggle', true);
-  contextMenu.value.x = e.pageX || e.clientX;
-  contextMenu.value.y = e.pageY || e.clientY;
-  showContextMenu.value = true;
-};
-
-const closeContextMenu = () => {
-  emit('contextMenuToggle', false);
-  showContextMenu.value = false;
-  contextMenu.value.x = null;
-  contextMenu.value.y = null;
-};
-
-const onUpdateConversation = (status, snoozedUntil) => {
-  closeContextMenu();
-  emit('updateConversationStatus', props.chat.id, status, snoozedUntil);
-};
-
-const onAssignAgent = agent => {
-  emit('assignAgent', agent, [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignLabel = label => {
-  emit('assignLabel', [label.title], [props.chat.id]);
-  closeContextMenu();
-};
-
-const onAssignTeam = team => {
-  emit('assignTeam', team, props.chat.id);
-  closeContextMenu();
-};
-
-const markAsUnread = () => {
-  emit('markAsUnread', props.chat.id);
-  closeContextMenu();
-};
-
-const markAsRead = () => {
-  emit('markAsRead', props.chat.id);
-  closeContextMenu();
-};
-
-const assignPriority = priority => {
-  emit('assignPriority', priority, props.chat.id);
-  closeContextMenu();
-};
-
-const deleteConversation = () => {
-  emit('deleteConversation', props.chat.id);
-  closeContextMenu();
+      router.push({ path });
+    },
+    onThumbnailHover() {
+      this.hovered = !this.hideThumbnail;
+    },
+    onThumbnailLeave() {
+      this.hovered = false;
+    },
+    onSelectConversation(checked) {
+      const action = checked ? 'selectConversation' : 'deSelectConversation';
+      this.$emit(action, this.chat.id, this.inbox.id);
+    },
+    openContextMenu(e) {
+      if (!this.enableContextMenu) return;
+      e.preventDefault();
+      this.$emit('contextMenuToggle', true);
+      this.contextMenu.x = e.pageX || e.clientX;
+      this.contextMenu.y = e.pageY || e.clientY;
+      this.showContextMenu = true;
+    },
+    closeContextMenu() {
+      this.$emit('contextMenuToggle', false);
+      this.showContextMenu = false;
+      this.contextMenu.x = null;
+      this.contextMenu.y = null;
+    },
+    onUpdateConversation(status, snoozedUntil) {
+      this.closeContextMenu();
+      this.$emit(
+        'updateConversationStatus',
+        this.chat.id,
+        status,
+        snoozedUntil
+      );
+    },
+    async onAssignAgent(agent) {
+      this.$emit('assignAgent', agent, [this.chat.id]);
+      this.closeContextMenu();
+    },
+    async onAssignLabel(label) {
+      this.$emit('assignLabel', [label.title], [this.chat.id]);
+      this.closeContextMenu();
+    },
+    async onAssignTeam(team) {
+      this.$emit('assignTeam', team, this.chat.id);
+      this.closeContextMenu();
+    },
+    async markAsUnread() {
+      this.$emit('markAsUnread', this.chat.id);
+      this.closeContextMenu();
+    },
+    async markAsRead() {
+      this.$emit('markAsRead', this.chat.id);
+      this.closeContextMenu();
+    },
+    async assignPriority(priority) {
+      this.$emit('assignPriority', priority, this.chat.id);
+      this.closeContextMenu();
+    },
+    async deleteConversation() {
+      this.$emit('deleteConversation', this.chat.id);
+      this.closeContextMenu();
+    },
+  },
 };
 </script>
 
 <template>
   <div
-    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full py-0 border-t-0 border-b-0 border-l-0 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
+    class="relative flex items-start flex-grow-0 flex-shrink-0 w-auto max-w-full px-3 py-0 border-t-0 border-b-0 border-l-2 border-r-0 border-transparent border-solid cursor-pointer conversation hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3 group"
     :class="{
       'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 border-n-weak':
         isActiveChat,
-      'bg-n-slate-2 dark:bg-n-slate-3': selected,
-      'px-0': compact,
-      'px-3': !compact,
+      'unread-chat': hasUnread,
+      'has-inbox-name': showInboxName,
+      'conversation-selected': selected,
     }"
     @click="onCardClick"
     @contextmenu="openContextMenu($event)"
@@ -244,65 +274,46 @@ const deleteConversation = () => {
       @mouseenter="onThumbnailHover"
       @mouseleave="onThumbnailLeave"
     >
-      <Avatar
-        v-if="!hideThumbnail"
-        :name="currentContact.name"
-        :src="currentContact.thumbnail"
-        :size="32"
-        :status="currentContact.availability_status"
-        :inbox="inbox"
-        :class="!showInboxName ? 'mt-4' : 'mt-8'"
-        hide-offline-status
-        rounded-full
+      <label
+        v-if="hovered || selected"
+        class="checkbox-wrapper absolute inset-0 z-20 backdrop-blur-[2px]"
+        @click.stop
       >
-        <template #overlay="{ size }">
-          <label
-            v-if="hovered || selected"
-            class="flex items-center justify-center rounded-full cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px]"
-            :style="{ width: `${size}px`, height: `${size}px` }"
-            @click.stop
-          >
-            <input
-              :value="selected"
-              :checked="selected"
-              class="!m-0 cursor-pointer"
-              type="checkbox"
-              @change="onSelectConversation($event.target.checked)"
-            />
-          </label>
-        </template>
-      </Avatar>
+        <input
+          :value="selected"
+          :checked="selected"
+          class="checkbox"
+          type="checkbox"
+          @change="onSelectConversation($event.target.checked)"
+        />
+      </label>
+      <Thumbnail
+        v-if="!hideThumbnail"
+        :src="currentContact.thumbnail"
+        :badge="inboxBadge"
+        :username="currentContact.name"
+        :status="currentContact.availability_status"
+        size="32px"
+      />
     </div>
     <div
-      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 min-w-0"
+      class="px-0 py-3 border-b group-hover:border-transparent flex-1 border-n-slate-3 w-[calc(100%-40px)]"
     >
-      <div
-        v-if="showMetaSection"
-        class="flex items-center min-w-0 gap-1"
-        :class="{
-          'ltr:ml-2 rtl:mr-2': !compact,
-          'mx-2': compact,
-        }"
-      >
-        <InboxName v-if="showInboxName" :inbox="inbox" class="flex-1 min-w-0" />
-        <div
-          class="flex items-center gap-2 flex-shrink-0"
-          :class="{
-            'flex-1 justify-between': !showInboxName,
-          }"
-        >
+      <div class="flex justify-between conversation-card--meta">
+        <InboxName v-if="showInboxName" :inbox="inbox" />
+        <div class="flex gap-2 ml-2 rtl:mr-2 rtl:ml-0">
           <span
             v-if="showAssignee && assignee.name"
-            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex items-center truncate"
+            class="text-n-slate-11 text-xs font-medium leading-3 py-0.5 px-0 inline-flex text-ellipsis overflow-hidden whitespace-nowrap"
           >
             <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
-          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
+          <PriorityMark :priority="chat.priority" />
         </div>
       </div>
       <h4
-        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap flex-1 min-w-0 ltr:pr-16 rtl:pl-16 text-n-slate-12"
+        class="conversation--user text-sm my-0 mx-2 capitalize pt-0.5 text-ellipsis overflow-hidden whitespace-nowrap w-[calc(100%-70px)] text-n-slate-12"
         :class="hasUnread ? 'font-semibold' : 'font-medium'"
       >
         {{ currentContact.name }}
@@ -310,27 +321,24 @@ const deleteConversation = () => {
       <MessagePreview
         v-if="lastMessageInChat"
         :message="lastMessageInChat"
-        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
-        :class="messagePreviewClass"
+        class="conversation--message my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] text-sm"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       />
       <p
         v-else
-        class="text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap"
-        :class="messagePreviewClass"
+        class="conversation--message text-n-slate-11 text-sm my-0 mx-2 leading-6 h-6 max-w-[96%] w-[16.875rem] overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="hasUnread ? 'font-medium text-n-slate-12' : 'text-n-slate-11'"
       >
         <fluent-icon
           size="16"
           class="-mt-0.5 align-middle inline-block text-n-slate-10"
           icon="info"
         />
-        <span class="mx-0.5">
+        <span>
           {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
         </span>
       </p>
-      <div
-        class="absolute flex flex-col ltr:right-3 rtl:left-3"
-        :class="showMetaSection ? 'top-8' : 'top-4'"
-      >
+      <div class="absolute flex flex-col mt-4 ltr:right-4 rtl:left-4 top-4">
         <span class="ml-auto font-normal leading-4 text-xxs">
           <TimeAgo
             :last-activity-timestamp="chat.timestamp"
@@ -338,17 +346,12 @@ const deleteConversation = () => {
           />
         </span>
         <span
-          class="shadow-lg rounded-full text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
-          :class="hasUnread ? 'block' : 'hidden'"
+          class="unread shadow-lg rounded-full hidden text-xxs font-semibold h-4 leading-4 ltr:ml-auto rtl:mr-auto mt-1 min-w-[1rem] px-1 py-0 text-center text-white bg-n-teal-9"
         >
           {{ unreadCount > 9 ? '9+' : unreadCount }}
         </span>
       </div>
-      <CardLabels
-        v-if="showLabelsSection"
-        :conversation-labels="chat.labels"
-        class="mt-0.5 mx-2 mb-0"
-      >
+      <CardLabels :conversation-labels="chat.labels" class="mt-0.5 mx-2 mb-0">
         <template v-if="hasSlaPolicyId" #before>
           <SLACardLabel :chat="chat" class="ltr:mr-1 rtl:ml-1" />
         </template>
@@ -381,3 +384,55 @@ const deleteConversation = () => {
     </ContextMenu>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.conversation {
+  &.unread-chat {
+    .unread {
+      @apply block;
+    }
+  }
+
+  &.compact {
+    @apply pl-0;
+
+    .conversation-card--meta {
+      @apply ltr:pr-4 rtl:pl-4;
+    }
+
+    .conversation--details {
+      @apply rounded-sm ml-0 pl-5 pr-2;
+    }
+  }
+
+  &::v-deep .user-thumbnail-box {
+    @apply mt-4;
+  }
+
+  &.conversation-selected {
+    @apply bg-n-slate-2 dark:bg-n-slate-3;
+  }
+
+  &.has-inbox-name {
+    &::v-deep .user-thumbnail-box {
+      @apply mt-8;
+    }
+
+    .checkbox-wrapper {
+      @apply mt-8;
+    }
+
+    .conversation--meta {
+      @apply mt-4;
+    }
+  }
+
+  .checkbox-wrapper {
+    @apply flex items-center justify-center rounded-full cursor-pointer mt-4;
+
+    input[type='checkbox'] {
+      @apply m-0 cursor-pointer;
+    }
+  }
+}
+</style>

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

@@ -6,7 +6,7 @@ import { useElementSize } from '@vueuse/core';
 import BackButton from '../BackButton.vue';
 import InboxName from '../InboxName.vue';
 import MoreActions from './MoreActions.vue';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from '../Thumbnail.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
@@ -105,13 +105,12 @@ const hasSlaPolicyId = computed(() => props.chat?.sla_policy_id);
         :back-url="backButtonUrl"
         class="ltr:mr-2 rtl:ml-2"
       />
-      <Avatar
-        :name="currentContact.name"
+      <Thumbnail
         :src="currentContact.thumbnail"
-        :size="32"
+        :username="currentContact.name"
         :status="currentContact.availability_status"
-        hide-offline-status
-        rounded-full
+        size="32px"
+        class="flex-shrink-0"
       />
       <div
         class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"

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

@@ -793,10 +793,6 @@ export default {
       }, 100);
     },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
-      // Clear attachments when switching between private note and reply modes
-      // This is to prevent from breaking the upload rules
-      if (this.attachedFiles.length > 0) this.attachedFiles = [];
-
       const { can_reply: canReply } = this.currentChat;
       this.$store.dispatch('draftMessages/setReplyEditorMode', {
         mode,

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/Modal.vue

@@ -1,10 +1,10 @@
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
-import WhatsAppTemplateReply from './WhatsAppTemplateReply.vue';
+import TemplateParser from './TemplateParser.vue';
 export default {
   components: {
     TemplatesPicker,
-    WhatsAppTemplateReply,
+    TemplateParser,
   },
   props: {
     show: {
@@ -68,7 +68,7 @@ export default {
         :inbox-id="inboxId"
         @on-select="pickTemplate"
       />
-      <WhatsAppTemplateReply
+      <TemplateParser
         v-else
         :template="selectedWaTemplate"
         @reset-template="onResetTemplate"

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplateParser.vue

@@ -0,0 +1,165 @@
+<script>
+/**
+ * This component handles parsing and sending WhatsApp message templates.
+ * It works as follows:
+ * 1. Displays the template text with variable placeholders.
+ * 2. Generates input fields for each variable in the template.
+ * 3. Validates that all variables are filled before sending.
+ * 4. Replaces placeholders with user-provided values.
+ * 5. Emits events to send the processed message or reset the template.
+ */
+import { ref, computed, onMounted } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    template: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['sendMessage', 'resetTemplate'],
+  setup(props, { emit }) {
+    const processVariable = str => {
+      return str.replace(/{{|}}/g, '');
+    };
+
+    const allKeysRequired = value => {
+      const keys = Object.keys(value);
+      return keys.every(key => value[key]);
+    };
+
+    const processedParams = ref({});
+
+    const templateString = computed(() => {
+      return props.template.components.find(
+        component => component.type === 'BODY'
+      ).text;
+    });
+
+    const variables = computed(() => {
+      return templateString.value.match(/{{([^}]+)}}/g);
+    });
+
+    const processedString = computed(() => {
+      return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
+        const variableKey = processVariable(variable);
+        return processedParams.value[variableKey] || `{{${variable}}}`;
+      });
+    });
+
+    const v$ = useVuelidate(
+      {
+        processedParams: {
+          requiredIfKeysPresent: requiredIf(variables),
+          allKeysRequired,
+        },
+      },
+      { processedParams }
+    );
+
+    const generateVariables = () => {
+      const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
+      if (!matchedVariables) return;
+
+      const finalVars = matchedVariables.map(i => processVariable(i));
+      processedParams.value = finalVars.reduce((acc, variable) => {
+        acc[variable] = '';
+        return acc;
+      }, {});
+    };
+
+    const resetTemplate = () => {
+      emit('resetTemplate');
+    };
+
+    const sendMessage = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+
+      const payload = {
+        message: processedString.value,
+        templateParams: {
+          name: props.template.name,
+          category: props.template.category,
+          language: props.template.language,
+          namespace: props.template.namespace,
+          processed_params: processedParams.value,
+        },
+      };
+      emit('sendMessage', payload);
+    };
+
+    onMounted(generateVariables);
+
+    return {
+      processedParams,
+      variables,
+      templateString,
+      processedString,
+      v$,
+      resetTemplate,
+      sendMessage,
+    };
+  },
+};
+</script>
+
+<template>
+  <div class="w-full">
+    <textarea
+      v-model="processedString"
+      rows="4"
+      readonly
+      class="template-input"
+    />
+    <div v-if="variables" class="p-2.5">
+      <p class="text-sm font-semibold mb-2.5">
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+      </p>
+      <div
+        v-for="(variable, key) in processedParams"
+        :key="key"
+        class="items-center flex mb-2.5"
+      >
+        <span
+          class="bg-n-alpha-black2 text-n-slate-12 inline-block rounded-md text-xs py-2.5 px-6"
+        >
+          {{ key }}
+        </span>
+        <woot-input
+          v-model="processedParams[key]"
+          type="text"
+          class="flex-1 text-sm ml-2.5"
+          :styles="{ marginBottom: 0 }"
+        />
+      </div>
+      <p
+        v-if="v$.$dirty && v$.$invalid"
+        class="bg-n-ruby-9/20 rounded-md text-n-ruby-9 p-2.5 text-center"
+      >
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+    <footer class="flex justify-end gap-2">
+      <NextButton
+        faded
+        slate
+        type="reset"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
+        @click="resetTemplate"
+      />
+      <NextButton
+        type="button"
+        :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+        @click="sendMessage"
+      />
+    </footer>
+  </div>
+</template>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/TemplatesPicker.vue

@@ -1,71 +1,60 @@
-<script setup>
-import { ref, computed, toRef } from 'vue';
+<script>
 import { useAlert } from 'dashboard/composables';
-import { useFunctionGetter, useStore } from 'dashboard/composables/store';
-import {
-  COMPONENT_TYPES,
-  MEDIA_FORMATS,
-  findComponentByType,
-} from 'dashboard/helper/templateHelper';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import { useI18n } from 'vue-i18n';
+// TODO: Remove this when we support all formats
+const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
 
-const props = defineProps({
-  inboxId: {
-    type: Number,
-    default: undefined,
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    inboxId: {
+      type: Number,
+      default: undefined,
+    },
+  },
+  emits: ['onSelect'],
+  data() {
+    return {
+      query: '',
+      isRefreshing: false,
+    };
+  },
+  computed: {
+    whatsAppTemplateMessages() {
+      // TODO: Remove the last filter when we support all formats
+      return this.$store.getters['inboxes/getWhatsAppTemplates'](this.inboxId)
+        .filter(template => template.status.toLowerCase() === 'approved')
+        .filter(template => {
+          return template.components.every(component => {
+            return !formatsToRemove.includes(component.format);
+          });
+        });
+    },
+    filteredTemplateMessages() {
+      return this.whatsAppTemplateMessages.filter(template =>
+        template.name.toLowerCase().includes(this.query.toLowerCase())
+      );
+    },
+  },
+  methods: {
+    getTemplatebody(template) {
+      return template.components.find(component => component.type === 'BODY')
+        .text;
+    },
+    async refreshTemplates() {
+      this.isRefreshing = true;
+      try {
+        await this.$store.dispatch('inboxes/syncTemplates', this.inboxId);
+        useAlert(this.$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_SUCCESS'));
+      } catch (error) {
+        useAlert(this.$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_ERROR'));
+      } finally {
+        this.isRefreshing = false;
+      }
+    },
   },
-});
-
-const emit = defineEmits(['onSelect']);
-
-const { t } = useI18n();
-const store = useStore();
-const query = ref('');
-const isRefreshing = ref(false);
-
-const whatsAppTemplateMessages = useFunctionGetter(
-  'inboxes/getFilteredWhatsAppTemplates',
-  toRef(props, 'inboxId')
-);
-
-const filteredTemplateMessages = computed(() =>
-  whatsAppTemplateMessages.value.filter(template =>
-    template.name.toLowerCase().includes(query.value.toLowerCase())
-  )
-);
-
-const getTemplateBody = template => {
-  return findComponentByType(template, COMPONENT_TYPES.BODY)?.text || '';
-};
-
-const getTemplateHeader = template => {
-  return findComponentByType(template, COMPONENT_TYPES.HEADER);
-};
-
-const getTemplateFooter = template => {
-  return findComponentByType(template, COMPONENT_TYPES.FOOTER);
-};
-
-const getTemplateButtons = template => {
-  return findComponentByType(template, COMPONENT_TYPES.BUTTONS);
-};
-
-const hasMediaContent = template => {
-  const header = getTemplateHeader(template);
-  return header && MEDIA_FORMATS.includes(header.format);
-};
-
-const refreshTemplates = async () => {
-  isRefreshing.value = true;
-  try {
-    await store.dispatch('inboxes/syncTemplates', props.inboxId);
-    useAlert(t('WHATSAPP_TEMPLATES.PICKER.REFRESH_SUCCESS'));
-  } catch (error) {
-    useAlert(t('WHATSAPP_TEMPLATES.PICKER.REFRESH_ERROR'));
-  } finally {
-    isRefreshing.value = false;
-  }
 };
 </script>
 
@@ -79,14 +68,14 @@ const refreshTemplates = async () => {
         <input
           v-model="query"
           type="search"
-          :placeholder="t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
+          :placeholder="$t('WHATSAPP_TEMPLATES.PICKER.SEARCH_PLACEHOLDER')"
           class="reset-base w-full h-9 bg-transparent text-n-slate-12 !text-sm !outline-0"
         />
       </div>
       <button
         :disabled="isRefreshing"
         class="flex justify-center items-center w-9 h-9 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 hover:bg-n-alpha-2 dark:hover:bg-n-solid-2 disabled:opacity-50 disabled:cursor-not-allowed"
-        :title="t('WHATSAPP_TEMPLATES.PICKER.REFRESH_BUTTON')"
+        :title="$t('WHATSAPP_TEMPLATES.PICKER.REFRESH_BUTTON')"
         @click="refreshTemplates"
       >
         <Icon
@@ -102,7 +91,7 @@ const refreshTemplates = async () => {
       <div v-for="(template, i) in filteredTemplateMessages" :key="template.id">
         <button
           class="block p-2.5 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-2 dark:hover:bg-n-solid-2"
-          @click="emit('onSelect', template)"
+          @click="$emit('onSelect', template)"
         >
           <div>
             <div class="flex justify-between items-center mb-2.5">
@@ -112,73 +101,21 @@ const refreshTemplates = async () => {
               <span
                 class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
               >
-                {{ t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }}:
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.LANGUAGE') }} :
                 {{ template.language }}
               </span>
             </div>
-            <!-- Header -->
-            <div v-if="getTemplateHeader(template)" class="mb-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.HEADER') || 'HEADER' }}
-              </p>
-              <div
-                v-if="getTemplateHeader(template).format === 'TEXT'"
-                class="text-sm label-body"
-              >
-                {{ getTemplateHeader(template).text }}
-              </div>
-              <div
-                v-else-if="hasMediaContent(template)"
-                class="text-sm italic text-n-slate-11"
-              >
-                {{
-                  t('WHATSAPP_TEMPLATES.PICKER.MEDIA_CONTENT', {
-                    format: getTemplateHeader(template).format,
-                  }) ||
-                  `${getTemplateHeader(template).format} ${t('WHATSAPP_TEMPLATES.PICKER.MEDIA_CONTENT_FALLBACK')}`
-                }}
-              </div>
-            </div>
-
-            <!-- Body -->
             <div>
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.BODY') || 'BODY' }}
+              <p class="font-medium">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.TEMPLATE_BODY') }}
               </p>
-              <p class="text-sm label-body">{{ getTemplateBody(template) }}</p>
+              <p class="label-body">{{ getTemplatebody(template) }}</p>
             </div>
-
-            <!-- Footer -->
-            <div v-if="getTemplateFooter(template)" class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.FOOTER') || 'FOOTER' }}
+            <div class="mt-5">
+              <p class="font-medium">
+                {{ $t('WHATSAPP_TEMPLATES.PICKER.LABELS.CATEGORY') }}
               </p>
-              <p class="text-sm label-body">
-                {{ getTemplateFooter(template).text }}
-              </p>
-            </div>
-
-            <!-- Buttons -->
-            <div v-if="getTemplateButtons(template)" class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.BUTTONS') || 'BUTTONS' }}
-              </p>
-              <div class="flex flex-wrap gap-1 mt-1">
-                <span
-                  v-for="button in getTemplateButtons(template).buttons"
-                  :key="button.text"
-                  class="px-2 py-1 text-xs rounded bg-n-slate-3 text-n-slate-12"
-                >
-                  {{ button.text }}
-                </span>
-              </div>
-            </div>
-
-            <div class="mt-3">
-              <p class="text-xs font-medium text-n-slate-11">
-                {{ t('WHATSAPP_TEMPLATES.PICKER.CATEGORY') || 'CATEGORY' }}
-              </p>
-              <p class="text-sm">{{ template.category }}</p>
+              <p>{{ template.category }}</p>
             </div>
           </div>
         </button>
@@ -191,13 +128,13 @@ const refreshTemplates = async () => {
       <div v-if="!filteredTemplateMessages.length" class="py-8 text-center">
         <div v-if="query && whatsAppTemplateMessages.length">
           <p>
-            {{ t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+            {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
             <strong>{{ query }}</strong>
           </p>
         </div>
         <div v-else-if="!whatsAppTemplateMessages.length" class="space-y-4">
           <p class="text-n-slate-11">
-            {{ t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
+            {{ $t('WHATSAPP_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
           </p>
         </div>
       </div>

app/javascript/dashboard/components/widgets/conversation/WhatsappTemplates/WhatsAppTemplateReply.vue

@@ -1,49 +0,0 @@
-<script setup>
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  template: {
-    type: Object,
-    default: () => ({}),
-  },
-});
-
-const emit = defineEmits(['sendMessage', 'resetTemplate']);
-
-const handleSendMessage = payload => {
-  emit('sendMessage', payload);
-};
-
-const handleResetTemplate = () => {
-  emit('resetTemplate');
-};
-</script>
-
-<template>
-  <div class="w-full">
-    <WhatsAppTemplateParser
-      :template="template"
-      @send-message="handleSendMessage"
-      @reset-template="handleResetTemplate"
-    >
-      <template #actions="{ sendMessage, resetTemplate, disabled }">
-        <footer class="flex gap-2 justify-end">
-          <NextButton
-            faded
-            slate
-            type="reset"
-            :label="$t('WHATSAPP_TEMPLATES.PARSER.GO_BACK_LABEL')"
-            @click="resetTemplate"
-          />
-          <NextButton
-            type="button"
-            :label="$t('WHATSAPP_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
-            :disabled="disabled"
-            @click="sendMessage"
-          />
-        </footer>
-      </template>
-    </WhatsAppTemplateParser>
-  </div>
-</template>

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

@@ -10,7 +10,7 @@ import { messageTimestamp } from 'shared/helpers/timeHelper';
 import { downloadFile } from '@chatwoot/utils';
 
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
 
 const props = defineProps({
@@ -186,12 +186,10 @@ onMounted(() => {
             v-if="senderDetails"
             class="flex items-center min-w-[15rem] shrink-0"
           >
-            <Avatar
+            <Thumbnail
               v-if="senderDetails.avatar"
-              :name="senderDetails.name"
+              :username="senderDetails.name"
               :src="senderDetails.avatar"
-              :size="40"
-              rounded-full
               class="flex-shrink-0"
             />
             <div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">

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

@@ -1,7 +1,7 @@
 <script>
 // components
 import NextButton from 'dashboard/components-next/button/Button.vue';
-import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Avatar from '../../Avatar.vue';
 
 // composables
 import { useAI } from 'dashboard/composables/useAI';
@@ -226,16 +226,18 @@ export default {
         </div>
       </div>
       <div class="sender--info has-tooltip" data-original-title="null">
-        <Avatar
+        <woot-thumbnail
           v-tooltip.top="{
             content: $t('LABEL_MGMT.SUGGESTIONS.POWERED_BY'),
             delay: { show: 600, hide: 0 },
             hideOnClick: true,
           }"
-          :size="16"
-          name="chatwoot-ai"
-          icon-name="i-lucide-sparkles"
-        />
+          size="16px"
+        >
+          <Avatar class="user-thumbnail thumbnail-rounded">
+            <fluent-icon class="chatwoot-ai-icon" icon="chatwoot-ai" />
+          </Avatar>
+        </woot-thumbnail>
       </div>
     </div>
   </li>
@@ -266,6 +268,11 @@ export default {
     }
   }
 
+  .chatwoot-ai-icon {
+    height: 0.75rem;
+    width: 0.75rem;
+  }
+
   .label-suggestion--title {
     @apply text-n-slate-11 mt-0.5 text-xxs;
   }

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

@@ -1,12 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
-import Avatar from 'next/avatar/Avatar.vue';
+import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 
 export default {
   components: {
-    Avatar,
+    Thumbnail,
     Spinner,
     NextButton,
   },
@@ -123,13 +123,11 @@ export default {
           </li>
           <li v-for="agent in filteredAgents" :key="agent.id">
             <div class="agent-list-item" @click="assignAgent(agent)">
-              <Avatar
-                :name="agent.name"
+              <Thumbnail
                 :src="agent.thumbnail"
                 :status="agent.availability_status"
-                :size="22"
-                hide-offline-status
-                rounded-full
+                :username="agent.name"
+                size="22px"
               />
               <span class="my-0 text-n-slate-12">
                 {{ agent.name }}

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

@@ -263,7 +263,7 @@ export default {
 
 <style scoped lang="scss">
 .bulk-action__container {
-  @apply p-3 relative border-b border-solid border-n-strong dark:border-n-weak;
+  @apply p-4 relative border-b border-solid border-n-strong dark:border-n-weak;
 }
 
 .bulk-action__panel {

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -0,0 +1,76 @@
+<script>
+import NextButton from 'dashboard/components-next/button/Button.vue';
+
+export default {
+  components: {
+    NextButton,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+    usernameAvatar: {
+      type: String,
+      default: '',
+    },
+    deleteAvatar: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['onAvatarSelect', 'onAvatarDelete'],
+  watch: {},
+  methods: {
+    handleImageUpload(event) {
+      const [file] = event.target.files;
+
+      this.$emit('onAvatarSelect', {
+        file,
+        url: file ? URL.createObjectURL(file) : null,
+      });
+    },
+    onAvatarDelete() {
+      this.$refs.file.value = null;
+      this.$emit('onAvatarDelete');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <label>
+      <span v-if="label">{{ label }}</span>
+    </label>
+    <woot-thumbnail
+      v-if="src"
+      size="80px"
+      :src="src"
+      :username="usernameAvatar"
+    />
+    <div v-if="src && deleteAvatar" class="my-1">
+      <NextButton
+        outline
+        xs
+        ruby
+        :label="$t('INBOX_MGMT.DELETE.AVATAR_DELETE_BUTTON_TEXT')"
+        @click="onAvatarDelete"
+      />
+    </div>
+    <label>
+      <input
+        id="file"
+        ref="file"
+        type="file"
+        accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+        @change="handleImageUpload"
+      />
+      <slot />
+    </label>
+  </div>
+</template>

app/javascript/dashboard/composables/spec/useAutomation.spec.js

@@ -196,7 +196,6 @@ describe('useAutomation', () => {
     automationTypes.conversation_created = { conditions: [] };
     automationTypes.conversation_updated = { conditions: [] };
     automationTypes.conversation_opened = { conditions: [] };
-    automationTypes.conversation_resolved = { conditions: [] };
 
     automationHelper.generateCustomAttributeTypes.mockReturnValue([]);
     automationHelper.generateCustomAttributes.mockReturnValue([]);

app/javascript/dashboard/composables/spec/useFileUpload.spec.js

@@ -4,7 +4,7 @@ import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
+import { MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL } from 'shared/constants/messages';
 
 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/composables', () => ({
@@ -13,7 +13,6 @@ vi.mock('dashboard/composables', () => ({
 vi.mock('vue-i18n');
 vi.mock('activestorage');
 vi.mock('shared/helpers/FileHelper');
-vi.mock('@chatwoot/utils');
 
 describe('useFileUpload', () => {
   const mockAttachFile = vi.fn();
@@ -23,11 +22,6 @@ describe('useFileUpload', () => {
     file: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
   };
 
-  const inbox = {
-    channel_type: 'Channel::WhatsApp',
-    medium: 'whatsapp',
-  };
-
   beforeEach(() => {
     vi.clearAllMocks();
 
@@ -43,12 +37,11 @@ describe('useFileUpload', () => {
 
     useI18n.mockReturnValue({ t: mockTranslate });
     checkFileSizeLimit.mockReturnValue(true);
-    getMaxUploadSizeByChannel.mockReturnValue(25); // default max size MB for tests
   });
 
-  it('handles direct file upload when direct uploads enabled', () => {
+  it('should handle direct file upload when enabled', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -59,16 +52,6 @@ describe('useFileUpload', () => {
 
     onFileUpload(mockFile);
 
-    // size rules called with inbox + mime
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalledWith({
-      channelType: inbox.channel_type,
-      medium: inbox.medium,
-      mime: 'image/jpeg',
-    });
-
-    // size check called with max from helper
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 25);
-
     expect(DirectUpload).toHaveBeenCalledWith(
       mockFile.file,
       '/api/v1/accounts/123/conversations/456/direct_uploads',
@@ -80,7 +63,7 @@ describe('useFileUpload', () => {
     });
   });
 
-  it('handles indirect file upload when direct upload disabled', () => {
+  it('should handle indirect file upload when direct upload is disabled', () => {
     useMapGetter.mockImplementation(getter => {
       const getterMap = {
         getCurrentAccountId: { value: '123' },
@@ -92,24 +75,22 @@ describe('useFileUpload', () => {
     });
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
     onFileUpload(mockFile);
 
     expect(DirectUpload).not.toHaveBeenCalled();
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalled();
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 25);
     expect(mockAttachFile).toHaveBeenCalledWith({ file: mockFile });
   });
 
-  it('shows alert when file size exceeds limit', () => {
+  it('should show alert when file size exceeds limit', () => {
     checkFileSizeLimit.mockReturnValue(false);
     mockTranslate.mockReturnValue('File size exceeds limit');
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -119,37 +100,28 @@ describe('useFileUpload', () => {
     expect(mockAttachFile).not.toHaveBeenCalled();
   });
 
-  it('uses per-mime limits from helper', () => {
-    getMaxUploadSizeByChannel.mockImplementation(({ mime }) =>
-      mime.startsWith('image/') ? 10 : 50
-    );
+  it('should use different max file size for Twilio SMS channel', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: true,
       attachFile: mockAttachFile,
     });
 
-    DirectUpload.mockImplementation(() => ({
-      create: cb => cb(null, { signed_id: 'blob' }),
-    }));
-
     onFileUpload(mockFile);
 
-    expect(getMaxUploadSizeByChannel).toHaveBeenCalledWith({
-      channelType: inbox.channel_type,
-      medium: inbox.medium,
-      mime: 'image/jpeg',
-    });
-    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 10);
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(
+      mockFile,
+      MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+    );
   });
 
-  it('handles direct upload errors', () => {
+  it('should handle direct upload errors', () => {
     const mockError = 'Upload failed';
     DirectUpload.mockImplementation(() => ({
       create: callback => callback(mockError, null),
     }));
 
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
@@ -159,16 +131,15 @@ describe('useFileUpload', () => {
     expect(mockAttachFile).not.toHaveBeenCalled();
   });
 
-  it('does nothing when file is null', () => {
+  it('should do nothing when file is null', () => {
     const { onFileUpload } = useFileUpload({
-      inbox,
+      isATwilioSMSChannel: false,
       attachFile: mockAttachFile,
     });
 
     onFileUpload(null);
 
     expect(checkFileSizeLimit).not.toHaveBeenCalled();
-    expect(getMaxUploadSizeByChannel).not.toHaveBeenCalled();
     expect(mockAttachFile).not.toHaveBeenCalled();
     expect(useAlert).not.toHaveBeenCalled();
   });

app/javascript/dashboard/composables/spec/useInbox.spec.js

@@ -1,277 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { defineComponent, h } from 'vue';
-import { createStore } from 'vuex';
-import { mount } from '@vue/test-utils';
-import { useInbox } from '../useInbox';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-vi.mock('dashboard/composables/store');
-vi.mock('dashboard/composables/useTransformKeys');
-
-// Mock the dependencies
-const mockStore = createStore({
-  modules: {
-    conversations: {
-      namespaced: false,
-      getters: {
-        getSelectedChat: () => ({ inbox_id: 1 }),
-      },
-    },
-    inboxes: {
-      namespaced: true,
-      getters: {
-        getInboxById: () => id => {
-          const inboxes = {
-            1: {
-              id: 1,
-              channel_type: INBOX_TYPES.WHATSAPP,
-              provider: 'whatsapp_cloud',
-            },
-            2: { id: 2, channel_type: INBOX_TYPES.FB },
-            3: { id: 3, channel_type: INBOX_TYPES.TWILIO, medium: 'sms' },
-            4: { id: 4, channel_type: INBOX_TYPES.TWILIO, medium: 'whatsapp' },
-            5: {
-              id: 5,
-              channel_type: INBOX_TYPES.EMAIL,
-              provider: 'microsoft',
-            },
-            6: { id: 6, channel_type: INBOX_TYPES.EMAIL, provider: 'google' },
-            7: {
-              id: 7,
-              channel_type: INBOX_TYPES.WHATSAPP,
-              provider: 'default',
-            },
-            8: { id: 8, channel_type: INBOX_TYPES.TELEGRAM },
-            9: { id: 9, channel_type: INBOX_TYPES.LINE },
-            10: { id: 10, channel_type: INBOX_TYPES.WEB },
-            11: { id: 11, channel_type: INBOX_TYPES.API },
-            12: { id: 12, channel_type: INBOX_TYPES.SMS },
-            13: { id: 13, channel_type: INBOX_TYPES.INSTAGRAM },
-            14: { id: 14, channel_type: INBOX_TYPES.VOICE },
-          };
-          return inboxes[id] || null;
-        },
-      },
-    },
-  },
-});
-
-// Mock useMapGetter to return mock store getters
-vi.mock('dashboard/composables/store', () => ({
-  useMapGetter: vi.fn(getter => {
-    if (getter === 'getSelectedChat') {
-      return { value: { inbox_id: 1 } };
-    }
-    if (getter === 'inboxes/getInboxById') {
-      return { value: mockStore.getters['inboxes/getInboxById'] };
-    }
-    return { value: null };
-  }),
-}));
-
-// Mock useCamelCase to return the data as-is for testing
-vi.mock('dashboard/composables/useTransformKeys', () => ({
-  useCamelCase: vi.fn(data => ({
-    ...data,
-    channelType: data?.channel_type,
-  })),
-}));
-
-describe('useInbox', () => {
-  const createTestComponent = inboxId =>
-    defineComponent({
-      setup() {
-        return useInbox(inboxId);
-      },
-      render() {
-        return h('div');
-      },
-    });
-
-  describe('with current chat context (no inboxId provided)', () => {
-    it('identifies WhatsApp Cloud channel correctly', () => {
-      const wrapper = mount(createTestComponent(), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-    });
-
-    it('returns correct inbox object', () => {
-      const wrapper = mount(createTestComponent(), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.inbox).toEqual({
-        id: 1,
-        channel_type: INBOX_TYPES.WHATSAPP,
-        provider: 'whatsapp_cloud',
-        channelType: INBOX_TYPES.WHATSAPP,
-      });
-    });
-  });
-
-  describe('with explicit inboxId provided', () => {
-    it('identifies Facebook inbox correctly', () => {
-      const wrapper = mount(createTestComponent(2), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAFacebookInbox).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-    });
-
-    it('identifies Twilio SMS channel correctly', () => {
-      const wrapper = mount(createTestComponent(3), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isATwilioChannel).toBe(true);
-      expect(wrapper.vm.isASmsInbox).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-    });
-
-    it('identifies Twilio WhatsApp channel correctly', () => {
-      const wrapper = mount(createTestComponent(4), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isATwilioChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isATwilioWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
-    });
-
-    it('identifies Microsoft email inbox correctly', () => {
-      const wrapper = mount(createTestComponent(5), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAnEmailChannel).toBe(true);
-      expect(wrapper.vm.isAMicrosoftInbox).toBe(true);
-      expect(wrapper.vm.isAGoogleInbox).toBe(false);
-    });
-
-    it('identifies Google email inbox correctly', () => {
-      const wrapper = mount(createTestComponent(6), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.isAnEmailChannel).toBe(true);
-      expect(wrapper.vm.isAGoogleInbox).toBe(true);
-      expect(wrapper.vm.isAMicrosoftInbox).toBe(false);
-    });
-
-    it('identifies 360Dialog WhatsApp channel correctly', () => {
-      const wrapper = mount(createTestComponent(7), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.is360DialogWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(true);
-      expect(wrapper.vm.isAWhatsAppCloudChannel).toBe(false);
-    });
-
-    it('identifies all other channel types correctly', () => {
-      // Test Telegram
-      let wrapper = mount(createTestComponent(8), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isATelegramChannel).toBe(true);
-
-      // Test Line
-      wrapper = mount(createTestComponent(9), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isALineChannel).toBe(true);
-
-      // Test Web Widget
-      wrapper = mount(createTestComponent(10), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAWebWidgetInbox).toBe(true);
-
-      // Test API
-      wrapper = mount(createTestComponent(11), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAPIInbox).toBe(true);
-
-      // Test SMS
-      wrapper = mount(createTestComponent(12), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isASmsInbox).toBe(true);
-
-      // Test Instagram
-      wrapper = mount(createTestComponent(13), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAnInstagramChannel).toBe(true);
-
-      // Test Voice
-      wrapper = mount(createTestComponent(14), {
-        global: { plugins: [mockStore] },
-      });
-      expect(wrapper.vm.isAVoiceChannel).toBe(true);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('handles non-existent inbox ID gracefully', () => {
-      const wrapper = mount(createTestComponent(999), {
-        global: { plugins: [mockStore] },
-      });
-
-      // useCamelCase still processes null data, so we get an object with channelType: undefined
-      expect(wrapper.vm.inbox).toEqual({ channelType: undefined });
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-      expect(wrapper.vm.isAFacebookInbox).toBe(false);
-    });
-
-    it('handles inbox with no data correctly', () => {
-      // The mock will return null for non-existent IDs, but useCamelCase processes it
-      const wrapper = mount(createTestComponent(999), {
-        global: { plugins: [mockStore] },
-      });
-
-      expect(wrapper.vm.inbox.channelType).toBeUndefined();
-      expect(wrapper.vm.isAWhatsAppChannel).toBe(false);
-      expect(wrapper.vm.isAFacebookInbox).toBe(false);
-      expect(wrapper.vm.isATelegramChannel).toBe(false);
-    });
-  });
-
-  describe('return object completeness', () => {
-    it('returns all expected properties', () => {
-      const wrapper = mount(createTestComponent(1), {
-        global: { plugins: [mockStore] },
-      });
-
-      const expectedProperties = [
-        'inbox',
-        'isAFacebookInbox',
-        'isALineChannel',
-        'isAPIInbox',
-        'isASmsInbox',
-        'isATelegramChannel',
-        'isATwilioChannel',
-        'isAWebWidgetInbox',
-        'isAWhatsAppChannel',
-        'isAMicrosoftInbox',
-        'isAGoogleInbox',
-        'isATwilioWhatsAppChannel',
-        'isAWhatsAppCloudChannel',
-        'is360DialogWhatsAppChannel',
-        'isAnEmailChannel',
-        'isAnInstagramChannel',
-        'isAVoiceChannel',
-      ];
-
-      expectedProperties.forEach(prop => {
-        expect(wrapper.vm).toHaveProperty(prop);
-      });
-    });
-  });
-});

app/javascript/dashboard/composables/useFileUpload.js

@@ -1,19 +1,22 @@
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
 import { DirectUpload } from 'activestorage';
+import {
+  MAXIMUM_FILE_UPLOAD_SIZE,
+  MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL,
+} from 'shared/constants/messages';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
-import { getMaxUploadSizeByChannel } from '@chatwoot/utils';
-import { MAXIMUM_FILE_UPLOAD_SIZE } from 'shared/constants/messages';
 
 /**
  * Composable for handling file uploads in conversations
- * @param {Object} options
- * @param {Object} options.inbox - Current inbox object (has channel_type, medium, etc.)
- * @param {Function} options.attachFile - Callback to handle file attachment
- * @param {boolean} options.isPrivateNote - Whether the upload is for a private note
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.isATwilioSMSChannel - Whether the current channel is Twilio SMS
+ * @param {Function} options.attachFile - Callback function to handle file attachment
+ * @returns {Object} File upload methods and utilities
  */
-export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
+export const useFileUpload = ({ isATwilioSMSChannel, attachFile }) => {
   const { t } = useI18n();
 
   const accountId = useMapGetter('getCurrentAccountId');
@@ -21,72 +24,57 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
   const currentChat = useMapGetter('getSelectedChat');
   const globalConfig = useMapGetter('globalConfig/get');
 
-  // helper: compute max upload size for a given file's mime
-  const maxSizeFor = mime => {
-    // Use default file size limit for private notes
-    if (isPrivateNote) {
-      return MAXIMUM_FILE_UPLOAD_SIZE;
-    }
-
-    return getMaxUploadSizeByChannel({
-      channelType: inbox?.channel_type,
-      medium: inbox?.medium, // e.g. 'sms' | 'whatsapp' | etc.
-      mime, // e.g. 'image/png'
-    });
-  };
-
-  const alertOverLimit = maxSizeMB =>
-    useAlert(
-      t('CONVERSATION.FILE_SIZE_LIMIT', {
-        MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxSizeMB,
-      })
-    );
+  const maxFileSize = computed(() =>
+    isATwilioSMSChannel
+      ? MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
+      : MAXIMUM_FILE_UPLOAD_SIZE
+  );
 
   const handleDirectFileUpload = file => {
     if (!file) return;
 
-    const mime = file.file?.type || file.type;
-    const maxSizeMB = maxSizeFor(mime);
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      const upload = new DirectUpload(
+        file.file,
+        `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
+        {
+          directUploadWillCreateBlobWithXHR: xhr => {
+            xhr.setRequestHeader(
+              'api_access_token',
+              currentUser.value.access_token
+            );
+          },
+        }
+      );
 
-    if (!checkFileSizeLimit(file, maxSizeMB)) {
-      alertOverLimit(maxSizeMB);
-      return;
+      upload.create((error, blob) => {
+        if (error) {
+          useAlert(error);
+        } else {
+          attachFile({ file, blob });
+        }
+      });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
     }
-
-    const upload = new DirectUpload(
-      file.file,
-      `/api/v1/accounts/${accountId.value}/conversations/${currentChat.value.id}/direct_uploads`,
-      {
-        directUploadWillCreateBlobWithXHR: xhr => {
-          xhr.setRequestHeader(
-            'api_access_token',
-            currentUser.value.access_token
-          );
-        },
-      }
-    );
-
-    upload.create((error, blob) => {
-      if (error) {
-        useAlert(error);
-      } else {
-        attachFile({ file, blob });
-      }
-    });
   };
 
   const handleIndirectFileUpload = file => {
     if (!file) return;
 
-    const mime = file.file?.type || file.type;
-    const maxSizeMB = maxSizeFor(mime);
-
-    if (!checkFileSizeLimit(file, maxSizeMB)) {
-      alertOverLimit(maxSizeMB);
-      return;
+    if (checkFileSizeLimit(file, maxFileSize.value)) {
+      attachFile({ file });
+    } else {
+      useAlert(
+        t('CONVERSATION.FILE_SIZE_LIMIT', {
+          MAXIMUM_SUPPORTED_FILE_UPLOAD_SIZE: maxFileSize.value,
+        })
+      );
     }
-
-    attachFile({ file });
   };
 
   const onFileUpload = file => {
@@ -97,5 +85,7 @@ export const useFileUpload = ({ inbox, attachFile, isPrivateNote = false }) => {
     }
   };
 
-  return { onFileUpload };
+  return {
+    onFileUpload,
+  };
 };

app/javascript/dashboard/composables/useInbox.js

@@ -29,24 +29,21 @@ export const INBOX_FEATURE_MAP = {
 };
 
 /**
- * Composable for handling inbox-related functionality
- * @param {string|null} inboxId - Optional inbox ID. If not provided, uses current chat's inbox
- * @returns {Object} An object containing inbox type checking functions
+ * Composable for handling macro-related functionality
+ * @returns {Object} An object containing the getMacroDropdownValues function
  */
-export const useInbox = (inboxId = null) => {
+export const useInbox = () => {
   const currentChat = useMapGetter('getSelectedChat');
   const inboxGetter = useMapGetter('inboxes/getInboxById');
 
   const inbox = computed(() => {
-    const targetInboxId = inboxId || currentChat.value?.inbox_id;
+    const inboxId = currentChat.value.inbox_id;
 
-    if (!targetInboxId) return null;
-
-    return useCamelCase(inboxGetter.value(targetInboxId), { deep: true });
+    return useCamelCase(inboxGetter.value(inboxId), { deep: true });
   });
 
   const channelType = computed(() => {
-    return inbox.value?.channelType;
+    return inbox.value.channelType;
   });
 
   const isAPIInbox = computed(() => {
@@ -78,19 +75,19 @@ export const useInbox = (inboxId = null) => {
   });
 
   const whatsAppAPIProvider = computed(() => {
-    return inbox.value?.provider || '';
+    return inbox.value.provider || '';
   });
 
   const isAMicrosoftInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value?.provider === 'microsoft';
+    return isAnEmailChannel.value && inbox.value.provider === 'microsoft';
   });
 
   const isAGoogleInbox = computed(() => {
-    return isAnEmailChannel.value && inbox.value?.provider === 'google';
+    return isAnEmailChannel.value && inbox.value.provider === 'google';
   });
 
   const isATwilioSMSChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value || {};
+    const { medium: medium = '' } = inbox.value;
     return isATwilioChannel.value && medium === 'sms';
   });
 
@@ -99,7 +96,7 @@ export const useInbox = (inboxId = null) => {
   });
 
   const isATwilioWhatsAppChannel = computed(() => {
-    const { medium: medium = '' } = inbox.value || {};
+    const { medium: medium = '' } = inbox.value;
     return isATwilioChannel.value && medium === 'whatsapp';
   });
 

app/javascript/dashboard/constants/automation.js

@@ -8,7 +8,7 @@ export const DEFAULT_MESSAGE_CREATED_CONDITION = [
   },
 ];
 
-export const DEFAULT_CONVERSATION_CONDITION = [
+export const DEFAULT_CONVERSATION_OPENED_CONDITION = [
   {
     attribute_key: 'browser_language',
     filter_operator: 'equal_to',

app/javascript/dashboard/helper/AnalyticsHelper/index.js

@@ -1,4 +1,4 @@
-import posthog from 'posthog-js';
+import { AnalyticsBrowser } from '@june-so/analytics-next';
 
 /**
  * AnalyticsHelper class to initialize and track user analytics
@@ -26,12 +26,10 @@ export class AnalyticsHelper {
       return;
     }
 
-    posthog.init(this.analyticsToken, {
-      api_host: 'https://app.posthog.com',
-      capture_pageview: false,
-      persistence: 'localStorage+cookie',
+    let [analytics] = await AnalyticsBrowser.load({
+      writeKey: this.analyticsToken,
     });
-    this.analytics = posthog;
+    this.analytics = analytics;
   }
 
   /**
@@ -45,7 +43,8 @@ export class AnalyticsHelper {
     }
 
     this.user = user;
-    this.analytics.identify(this.user.id.toString(), {
+    this.analytics.identify(this.user.email, {
+      userId: this.user.id,
       email: this.user.email,
       name: this.user.name,
       avatar: this.user.avatar_url,
@@ -56,7 +55,7 @@ export class AnalyticsHelper {
       account => account.id === accountId
     );
     if (currentAccount) {
-      this.analytics.group('company', currentAccount.id.toString(), {
+      this.analytics.group(currentAccount.id, this.user.id, {
         name: currentAccount.name,
       });
     }
@@ -72,7 +71,12 @@ export class AnalyticsHelper {
     if (!this.analytics) {
       return;
     }
-    this.analytics.capture(eventName, properties);
+
+    this.analytics.track({
+      userId: this.user.id,
+      event: eventName,
+      properties,
+    });
   }
 
   /**
@@ -85,9 +89,9 @@ export class AnalyticsHelper {
       return;
     }
 
-    this.analytics.capture('$pageview', params);
+    this.analytics.page(params);
   }
 }
 
-// This object is shared across, the init is called in app/javascript/entrypoints/dashboard.js
+// This object is shared across, the init is called in app/javascript/packs/application.js
 export default new AnalyticsHelper(window.analyticsConfig);

app/javascript/dashboard/helper/AnalyticsHelper/specs/helper.spec.js

@@ -1,11 +1,15 @@
 import helperObject, { AnalyticsHelper } from '../';
 
-vi.mock('posthog-js', () => ({
-  default: {
-    init: vi.fn(),
-    identify: vi.fn(),
-    capture: vi.fn(),
-    group: vi.fn(),
+vi.mock('@june-so/analytics-next', () => ({
+  AnalyticsBrowser: {
+    load: () => [
+      {
+        identify: vi.fn(),
+        track: vi.fn(),
+        page: vi.fn(),
+        group: vi.fn(),
+      },
+    ],
   },
 }));
 
@@ -22,12 +26,12 @@ describe('AnalyticsHelper', () => {
   });
 
   describe('init', () => {
-    it('should initialize posthog with the correct token', async () => {
+    it('should initialize the analytics browser with the correct token', async () => {
       await analyticsHelper.init();
       expect(analyticsHelper.analytics).not.toBe(null);
     });
 
-    it('should not initialize posthog if token is not provided', async () => {
+    it('should not initialize the analytics browser if token is not provided', async () => {
       analyticsHelper = new AnalyticsHelper();
       await analyticsHelper.init();
       expect(analyticsHelper.analytics).toBe(null);
@@ -39,36 +43,36 @@ describe('AnalyticsHelper', () => {
       analyticsHelper.analytics = { identify: vi.fn(), group: vi.fn() };
     });
 
-    it('should call identify on posthog with correct arguments', () => {
+    it('should call identify on analytics browser with correct arguments', () => {
       analyticsHelper.identify({
-        id: 123,
+        id: '123',
         email: 'test@example.com',
         name: 'Test User',
         avatar_url: 'avatar_url',
-        accounts: [{ id: 1, name: 'Account 1' }],
-        account_id: 1,
+        accounts: [{ id: '1', name: 'Account 1' }],
+        account_id: '1',
       });
 
-      expect(analyticsHelper.analytics.identify).toHaveBeenCalledWith('123', {
-        email: 'test@example.com',
-        name: 'Test User',
-        avatar: 'avatar_url',
-      });
-      expect(analyticsHelper.analytics.group).toHaveBeenCalledWith(
-        'company',
-        '1',
-        { name: 'Account 1' }
+      expect(analyticsHelper.analytics.identify).toHaveBeenCalledWith(
+        'test@example.com',
+        {
+          userId: '123',
+          email: 'test@example.com',
+          name: 'Test User',
+          avatar: 'avatar_url',
+        }
       );
+      expect(analyticsHelper.analytics.group).toHaveBeenCalled();
     });
 
-    it('should call identify on posthog without group', () => {
+    it('should call identify on analytics browser without group', () => {
       analyticsHelper.identify({
-        id: 123,
+        id: '123',
         email: 'test@example.com',
         name: 'Test User',
         avatar_url: 'avatar_url',
-        accounts: [{ id: 1, name: 'Account 1' }],
-        account_id: 5,
+        accounts: [{ id: '1', name: 'Account 1' }],
+        account_id: '5',
       });
 
       expect(analyticsHelper.analytics.group).not.toHaveBeenCalled();
@@ -83,27 +87,29 @@ describe('AnalyticsHelper', () => {
 
   describe('track', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { capture: vi.fn() };
-      analyticsHelper.user = { id: 123 };
+      analyticsHelper.analytics = { track: vi.fn() };
+      analyticsHelper.user = { id: '123' };
     });
 
-    it('should call capture on posthog with correct arguments', () => {
+    it('should call track on analytics browser with correct arguments', () => {
       analyticsHelper.track('Test Event', { prop1: 'value1', prop2: 'value2' });
-      expect(analyticsHelper.analytics.capture).toHaveBeenCalledWith(
-        'Test Event',
-        { prop1: 'value1', prop2: 'value2' }
-      );
+      expect(analyticsHelper.analytics.track).toHaveBeenCalledWith({
+        userId: '123',
+        event: 'Test Event',
+        properties: { prop1: 'value1', prop2: 'value2' },
+      });
     });
 
-    it('should call capture on posthog with default properties', () => {
+    it('should call track on analytics browser with default properties', () => {
       analyticsHelper.track('Test Event');
-      expect(analyticsHelper.analytics.capture).toHaveBeenCalledWith(
-        'Test Event',
-        {}
-      );
+      expect(analyticsHelper.analytics.track).toHaveBeenCalledWith({
+        userId: '123',
+        event: 'Test Event',
+        properties: {},
+      });
     });
 
-    it('should not call capture on posthog if analytics is not initialized', () => {
+    it('should not call track on analytics browser if analytics is not initialized', () => {
       analyticsHelper.analytics = null;
       analyticsHelper.track('Test Event', { prop1: 'value1', prop2: 'value2' });
       expect(analyticsHelper.analytics).toBe(null);
@@ -112,22 +118,19 @@ describe('AnalyticsHelper', () => {
 
   describe('page', () => {
     beforeEach(() => {
-      analyticsHelper.analytics = { capture: vi.fn() };
+      analyticsHelper.analytics = { page: vi.fn() };
     });
 
-    it('should call the capture method for pageview with the correct arguments', () => {
+    it('should call the analytics.page method with the correct arguments', () => {
       const params = {
         name: 'Test page',
         url: '/test',
       };
       analyticsHelper.page(params);
-      expect(analyticsHelper.analytics.capture).toHaveBeenCalledWith(
-        '$pageview',
-        params
-      );
+      expect(analyticsHelper.analytics.page).toHaveBeenCalledWith(params);
     });
 
-    it('should not call analytics.capture if analytics is null', () => {
+    it('should not call analytics.page if analytics is null', () => {
       analyticsHelper.analytics = null;
       analyticsHelper.page();
       expect(analyticsHelper.analytics).toBe(null);

app/javascript/dashboard/helper/automationHelper.js

@@ -5,7 +5,7 @@ import {
 } from 'dashboard/routes/dashboard/settings/automation/operators';
 import {
   DEFAULT_MESSAGE_CREATED_CONDITION,
-  DEFAULT_CONVERSATION_CONDITION,
+  DEFAULT_CONVERSATION_OPENED_CONDITION,
   DEFAULT_OTHER_CONDITION,
   DEFAULT_ACTIONS,
 } from 'dashboard/constants/automation';
@@ -169,11 +169,8 @@ export const getDefaultConditions = eventName => {
   if (eventName === 'message_created') {
     return DEFAULT_MESSAGE_CREATED_CONDITION;
   }
-  if (
-    eventName === 'conversation_opened' ||
-    eventName === 'conversation_resolved'
-  ) {
-    return DEFAULT_CONVERSATION_CONDITION;
+  if (eventName === 'conversation_opened') {
+    return DEFAULT_CONVERSATION_OPENED_CONDITION;
   }
   return DEFAULT_OTHER_CONDITION;
 };

app/javascript/dashboard/helper/inbox.js

@@ -139,14 +139,14 @@ export const getInboxClassByType = (type, phoneNumber) => {
   }
 };
 
-export const getInboxIconByType = (type, medium, variant = 'fill') => {
+export const getInboxIconByType = (type, phoneNumber, variant = 'fill') => {
   const iconMap =
     variant === 'fill' ? INBOX_ICON_MAP_FILL : INBOX_ICON_MAP_LINE;
   const defaultIcon =
     variant === 'fill' ? DEFAULT_ICON_FILL : DEFAULT_ICON_LINE;
 
   // Special case for Twilio (whatsapp and sms)
-  if (type === INBOX_TYPES.TWILIO && medium === 'whatsapp') {
+  if (type === INBOX_TYPES.TWILIO && phoneNumber?.startsWith('whatsapp')) {
     return iconMap[INBOX_TYPES.WHATSAPP];
   }
 

app/javascript/dashboard/helper/specs/inbox.spec.js

@@ -112,13 +112,13 @@ describe('#Inbox Helpers', () => {
     describe('Twilio cases', () => {
       describe('fill variant', () => {
         it('returns WhatsApp icon for Twilio WhatsApp number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp')).toBe(
-            'i-ri-whatsapp-fill'
-          );
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp:+1234567890')
+          ).toBe('i-ri-whatsapp-fill');
         });
 
         it('returns SMS icon for regular Twilio number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms')).toBe(
+          expect(getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890')).toBe(
             'i-ri-chat-1-fill'
           );
         });
@@ -133,14 +133,18 @@ describe('#Inbox Helpers', () => {
       describe('line variant', () => {
         it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
           expect(
-            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp', 'line')
+            getInboxIconByType(
+              INBOX_TYPES.TWILIO,
+              'whatsapp:+1234567890',
+              'line'
+            )
           ).toBe('i-ri-whatsapp-line');
         });
 
         it('returns SMS line icon for regular Twilio number', () => {
-          expect(getInboxIconByType(INBOX_TYPES.TWILIO, 'sms', 'line')).toBe(
-            'i-ri-chat-1-line'
-          );
+          expect(
+            getInboxIconByType(INBOX_TYPES.TWILIO, '+1234567890', 'line')
+          ).toBe('i-ri-chat-1-line');
         });
       });
     });