Revert changes on widget helper

Merge branch 'develop' into pr/12259
fix: handle empty string for CAPTAIN_OPEN_AI_ENDPOINT config (#12435 )
2025-09-15 19:44:15 -07:00 · 2025-09-15 18:19:18 -07:00 · 2025-09-15 17:48:18 -07:00 · 2025-09-15 17:47:35 -07:00 · 2025-09-15 22:21:59 +05:30 · 2025-09-15 21:41:34 +05:30
946 changed files with 47850 additions and 5380 deletions
@@ -1,6 +1,7 @@
 version: 2.1
 orbs:
  node: circleci/node@6.1.0
+  qlty-orb: qltysh/qlty-orb@0.0

 defaults: &defaults
  working_directory: ~/build
@@ -89,14 +90,6 @@ jobs:
          command: |
            source ~/.rvm/scripts/rvm
            bundle install
-            # pnpm install
-
-      - run:
-          name: Download cc-test-reporter
-          command: |
-            mkdir -p ~/tmp
-            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ~/tmp/cc-test-reporter
-            chmod +x ~/tmp/cc-test-reporter

      # Swagger verification
      - run:
@@ -108,10 +101,11 @@ jobs:
              echo "ERROR: The swagger.json file is not in sync with the yaml specification. Run 'rake swagger:build' and commit 'swagger/swagger.json'."
              exit 1
            fi
+            mkdir -p ~/tmp
            curl -L https://repo1.maven.org/maven2/org/openapitools/openapi-generator-cli/6.3.0/openapi-generator-cli-6.3.0.jar > ~/tmp/openapi-generator-cli-6.3.0.jar
            java -jar ~/tmp/openapi-generator-cli-6.3.0.jar validate -i swagger/swagger.json

-      # we remove the FRONTED_URL from the .env before running the tests
+      # Configure environment and database
      - run:
          name: Database Setup and Configure Environment Variables
          command: |
@@ -149,17 +143,11 @@ jobs:
          command: pnpm run eslint

      - run:
-          name: Run frontend tests
+          name: Run frontend tests (with coverage)
          command: |
            mkdir -p ~/build/coverage/frontend
-            ~/tmp/cc-test-reporter before-build
            pnpm run test:coverage

-      - run:
-          name: Code Climate Test Coverage (Frontend)
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t lcov -o "~/build/coverage/frontend/codeclimate.frontend_$CIRCLE_NODE_INDEX.json"
-
      # Run backend tests
      - run:
          name: Run backend tests
@@ -167,18 +155,18 @@ jobs:
            mkdir -p ~/tmp/test-results/rspec
            mkdir -p ~/tmp/test-artifacts
            mkdir -p ~/build/coverage/backend
-            ~/tmp/cc-test-reporter before-build
            TESTFILES=$(circleci tests glob "spec/**/*_spec.rb" | circleci tests split --split-by=timings)
-            bundle exec rspec --format progress \
+            bundle exec rspec -I ./spec --require coverage_helper --require spec_helper --format progress \
                              --format RspecJunitFormatter \
                              --out ~/tmp/test-results/rspec.xml \
                              -- ${TESTFILES}
          no_output_timeout: 30m

-      - run:
-          name: Code Climate Test Coverage (Backend)
-          command: |
-            ~/tmp/cc-test-reporter format-coverage -t simplecov -o "~/build/coverage/backend/codeclimate.$CIRCLE_NODE_INDEX.json"
+      # Qlty coverage publish
+      - qlty-orb/coverage_publish:
+          files: |
+            coverage/coverage.json
+            coverage/lcov.info

      - run:
          name: List coverage directory contents
@@ -189,3 +177,7 @@ jobs:
          root: ~/build
          paths:
            - coverage
+
+      - store_artifacts:
+          path: coverage
+          destination: coverage
@@ -95,3 +95,7 @@ yarn-debug.log*
 .claude/settings.local.json
 .cursor
 CLAUDE.local.md
+
+# Histoire deployment
+.netlify
+.histoire
@@ -62,6 +62,10 @@ gem 'redis-namespace'
 # super fast record imports in bulk
 gem 'activerecord-import'

+gem 'searchkick'
+gem 'opensearch-ruby'
+gem 'faraday_middleware-aws-sigv4'
+
 ##--- gems for server & infra configuration ---##
 gem 'dotenv-rails', '>= 3.0.0'
 gem 'foreman'
@@ -77,6 +81,7 @@ gem 'devise_token_auth', '>= 1.2.3'
 # authorization
 gem 'jwt'
 gem 'pundit'
+
 # super admin
 gem 'administrate', '>= 0.20.1'
 gem 'administrate-field-active_storage', '>= 1.0.3'
@@ -89,7 +94,7 @@ gem 'wisper', '2.0.0'
 ##--- gems for channels ---##
 gem 'facebook-messenger'
 gem 'line-bot-api'
-gem 'twilio-ruby', '~> 5.66'
+gem 'twilio-ruby'
 # twitty will handle subscription of twitter account events
 # gem 'twitty', git: 'https://github.com/chatwoot/twitty'
 gem 'twitty', '~> 0.1.5'
@@ -167,6 +172,7 @@ gem 'audited', '~> 5.4', '>= 5.4.1'

 # need for google auth
 gem 'omniauth', '>= 2.1.2'
+gem 'omniauth-saml'
 gem 'omniauth-google-oauth2', '>= 1.1.3'
 gem 'omniauth-rails_csrf_protection', '~> 1.0', '>= 1.0.2'

@@ -212,6 +218,8 @@ 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
@@ -221,6 +229,7 @@ group :test do
  gem 'webmock'
  # test profiling
  gem 'test-prof'
+  gem 'simplecov_json_formatter', require: false
 end

 group :development, :test do
@@ -245,7 +254,7 @@ group :development, :test do
  gem 'rubocop-factory_bot', require: false
  gem 'seed_dump'
  gem 'shoulda-matchers'
-  gem 'simplecov', '0.17.1', require: false
+  gem 'simplecov', '>= 0.21', require: false
  gem 'spring'
  gem 'spring-watcher-listen'
 end
@@ -219,7 +219,7 @@ GEM
    diff-lcs (1.5.1)
    digest-crc (0.6.5)
      rake (>= 12.0.0, < 14.0.0)
-    docile (1.4.0)
+    docile (1.4.1)
    domain_name (0.5.20190701)
      unf (>= 0.0.5, < 1.0.0)
    dotenv (3.1.2)
@@ -230,6 +230,35 @@ 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)
@@ -252,8 +281,10 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.9.0)
-      faraday-net_http (>= 2.0, < 3.2)
+    faraday (2.13.1)
+      faraday-net_http (>= 2.0, < 3.5)
+      json
+      logger
    faraday-follow_redirects (0.3.0)
      faraday (>= 1, < 3)
    faraday-mashify (0.1.1)
@@ -261,13 +292,23 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.1.0)
-      net-http
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
    faraday-retry (2.2.1)
      faraday (~> 2.0)
+    faraday_middleware-aws-sigv4 (1.0.1)
+      aws-sigv4 (~> 1.0)
+      faraday (>= 2.0, < 3)
+    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)
@@ -406,7 +447,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.12.0)
+    json (2.13.2)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@@ -421,7 +462,7 @@ GEM
    judoscale-sidekiq (1.8.2)
      judoscale-ruby (= 1.8.2)
      sidekiq (>= 5.0)
-    jwt (2.8.1)
+    jwt (2.10.1)
      base64
    kaminari (1.2.2)
      activesupport (>= 4.1.0)
@@ -503,7 +544,7 @@ GEM
    mutex_m (0.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
-    net-http (0.4.1)
+    net-http (0.6.0)
      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
@@ -548,8 +589,9 @@ GEM
    oj (3.16.10)
      bigdecimal (>= 3.0)
      ostruct (>= 0.2)
-    omniauth (2.1.2)
+    omniauth (2.1.3)
      hashie (>= 3.4.6)
+      logger
      rack (>= 2.2.3)
      rack-protection
    omniauth-google-oauth2 (1.1.3)
@@ -563,6 +605,12 @@ GEM
    omniauth-rails_csrf_protection (1.0.2)
      actionpack (>= 4.2)
      omniauth (~> 2.0)
+    omniauth-saml (2.2.4)
+      omniauth (~> 2.1)
+      ruby-saml (~> 1.18)
+    opensearch-ruby (3.4.0)
+      faraday (>= 1.0, < 3)
+      multi_json (>= 1.0)
    openssl (3.2.0)
    orm_adapter (0.5.0)
    os (1.1.4)
@@ -591,7 +639,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (2.2.15)
+    rack (3.2.0)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -600,19 +648,20 @@ GEM
      rack (>= 2.0.0)
    rack-mini-profiler (3.2.0)
      rack (>= 1.2.0)
-    rack-protection (3.2.0)
+    rack-protection (4.1.1)
      base64 (>= 0.1.0)
-      rack (~> 2.2, >= 2.2.4)
+      logger (>= 1.6.0)
+      rack (>= 3.0.0, < 4)
    rack-proxy (0.7.7)
      rack
-    rack-session (1.0.2)
-      rack (< 3)
+    rack-session (2.1.1)
+      base64 (>= 0.1.0)
+      rack (>= 3.0.0)
    rack-test (2.1.0)
      rack (>= 1.3)
    rack-timeout (0.6.3)
-    rackup (1.0.1)
-      rack (< 3)
-      webrick
+    rackup (2.2.1)
+      rack (>= 3)
    rails (7.1.5.2)
      actioncable (= 7.1.5.2)
      actionmailbox (= 7.1.5.2)
@@ -728,6 +777,9 @@ GEM
      faraday (>= 1)
      faraday-multipart (>= 1)
    ruby-progressbar (1.13.0)
+    ruby-saml (1.18.1)
+      nokogiri (>= 1.13.10)
+      rexml
    ruby-vips (2.1.4)
      ffi (~> 1.12)
    ruby2_keywords (0.0.5)
@@ -763,6 +815,9 @@ GEM
      parser
    scss_lint (0.60.0)
      sass (~> 3.5, >= 3.5.5)
+    searchkick (5.5.2)
+      activemodel (>= 7.1)
+      hashie
    securerandom (0.4.1)
    seed_dump (3.3.1)
      activerecord (>= 4)
@@ -809,11 +864,12 @@ GEM
      faraday (>= 0.17.5, < 3.a)
      jwt (>= 1.5, < 3.0)
      multi_json (~> 1.10)
-    simplecov (0.17.1)
+    simplecov (0.22.0)
      docile (~> 1.1)
-      json (>= 1.8, < 3)
-      simplecov-html (~> 0.10.0)
-    simplecov-html (0.10.2)
+      simplecov-html (~> 0.11)
+      simplecov_json_formatter (~> 0.1)
+    simplecov-html (0.13.2)
+    simplecov_json_formatter (0.1.4)
    slack-ruby-client (2.5.2)
      faraday (>= 2.0)
      faraday-mashify
@@ -843,13 +899,17 @@ 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 (5.77.0)
+    twilio-ruby (7.6.0)
      faraday (>= 0.9, < 3.0)
      jwt (>= 1.5, < 3.0)
      nokogiri (>= 1.6, < 2.0)
@@ -896,7 +956,6 @@ 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)
@@ -954,6 +1013,7 @@ DEPENDENCIES
  facebook-messenger
  factory_bot_rails (>= 6.4.3)
  faker
+  faraday_middleware-aws-sigv4
  fcm
  flag_shih_tzu
  foreman
@@ -994,6 +1054,8 @@ DEPENDENCIES
  omniauth-google-oauth2 (>= 1.1.3)
  omniauth-oauth2
  omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
+  omniauth-saml
+  opensearch-ruby
  pg
  pg_search
  pgvector
@@ -1022,6 +1084,7 @@ DEPENDENCIES
  ruby_llm-schema
  scout_apm
  scss_lint
+  searchkick
  seed_dump
  sentry-rails (>= 5.19.0)
  sentry-ruby
@@ -1031,7 +1094,8 @@ DEPENDENCIES
  sidekiq (>= 7.3.1)
  sidekiq-cron (>= 1.12.0)
  sidekiq_alive
-  simplecov (= 0.17.1)
+  simplecov (>= 0.21)
+  simplecov_json_formatter
  slack-ruby-client (~> 2.5.2)
  spring
  spring-watcher-listen
@@ -1040,8 +1104,9 @@ DEPENDENCIES
  stripe
  telephone_number
  test-prof
+  tidewave
  time_diff
-  twilio-ruby (~> 5.66)
+  twilio-ruby
  twitty (~> 0.1.5)
  tzinfo-data
  uglifier
@@ -2,5 +2,8 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.

 require_relative 'config/application'
+# Load Enterprise Edition rake tasks if they exist
+enterprise_tasks_path = Rails.root.join('enterprise/tasks_railtie.rb').to_s
+require enterprise_tasks_path if File.exist?(enterprise_tasks_path)

 Rails.application.load_tasks
@@ -1 +1 @@
-3.4.2
+3.4.3
@@ -28,7 +28,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder

    {
      conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts(conversation_filter),
+      resolved_counts: fetch_resolved_counts,
      resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
      first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
@@ -62,10 +62,21 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
    fetch_counts(conversation_filter)
  end

-  def fetch_resolved_counts(conversation_filter)
-    # since the base query is ActsAsTaggableOn,
-    # the status :resolved won't automatically be converted to integer status
-    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
+  def fetch_resolved_counts
+    # Count resolution events, not conversations currently in resolved status
+    # Filter by reporting_event.created_at, not conversation.created_at
+    reporting_event_filter = { name: 'conversation_resolved', account_id: account.id }
+    reporting_event_filter[:created_at] = range if range.present?
+
+    ReportingEvent
+      .joins(conversation: { taggings: :tag })
+      .where(
+        reporting_event_filter.merge(
+          taggings: { taggable_type: 'Conversation', context: 'labels' }
+        )
+      )
+      .group('tags.name')
+      .count
  end

  def fetch_counts(conversation_filter)
@@ -84,9 +95,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder

  def fetch_metrics(conversation_filter, event_name, use_business_hours)
    ReportingEvent
-      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
-      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
+      .joins(conversation: { taggings: :tag })
      .where(
        conversations: conversation_filter,
        name: event_name,
@@ -38,27 +38,34 @@ class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::Bas
  end

  def scope_for_resolutions_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
+    scope.reporting_events.where(
      name: :conversation_resolved,
-      conversations: { status: :resolved }, created_at: range
-    ).distinct
+      account_id: account.id,
+      created_at: range
+    )
  end

  def scope_for_bot_resolutions_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
+    scope.reporting_events.where(
      name: :conversation_bot_resolved,
-      conversations: { status: :resolved }, created_at: range
-    ).distinct
+      account_id: account.id,
+      created_at: range
+    )
  end

  def scope_for_bot_handoffs_count
    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
      name: :conversation_bot_handoff,
+      account_id: account.id,
      created_at: range
    ).distinct
  end

  def grouped_count
+    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
+    # It converts timestamps to the target timezone before grouping, which means
+    # the same event can fall into different day buckets depending on timezone
+    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
    @grouped_values = object_scope.group_by_period(
      group_by,
      :created_at,
@@ -70,11 +70,9 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def sync_templates
-    unless @inbox.channel.is_a?(Channel::Whatsapp)
-      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
-    end
+    return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' } unless whatsapp_channel?

-    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
+    trigger_template_sync
    render status: :ok, json: { message: 'Template sync initiated successfully' }
  rescue StandardError => e
    render status: :internal_server_error, json: { error: e.message }
@@ -185,6 +183,18 @@ 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')
@@ -1,5 +1,4 @@
 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
@@ -65,15 +64,6 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
    }, status: :unprocessable_entity
  end

-  def validate_feature_enabled!
-    return if Current.account.feature_whatsapp_embedded_signup?
-
-    render json: {
-      success: false,
-      error: 'WhatsApp embedded signup is not enabled for this account'
-    }, status: :forbidden
-  end
-
  def validate_embedded_signup_params!
    missing_params = []
    missing_params << 'code' if params[:code].blank?
@@ -9,7 +9,7 @@ class Api::V1::Widget::ConfigsController < Api::V1::Widget::BaseController
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
  end

  def set_contact
@@ -4,17 +4,28 @@ module SwitchLocale
  private

  def switch_locale(&)
-    # priority is for locale set in query string (mostly for widget/from js sdk)
+    # Priority is for locale set in query string (mostly for widget/from js sdk)
    locale ||= params[:locale]

+    # Use the user's locale if available
+    locale ||= locale_from_user
+
+    # Use the locale from a custom domain if applicable
    locale ||= locale_from_custom_domain
+
    # if locale is not set in account, let's use DEFAULT_LOCALE env variable
    locale ||= ENV.fetch('DEFAULT_LOCALE', nil)
+
    set_locale(locale, &)
  end

  def switch_locale_using_account_locale(&)
-    locale = locale_from_account(@current_account)
+    # Get the locale from the user first
+    locale = locale_from_user
+
+    # Fallback to the account's locale if the user's locale is not set
+    locale ||= locale_from_account(@current_account)
+
    set_locale(locale, &)
  end

@@ -32,6 +43,12 @@ module SwitchLocale
    @portal.default_locale
  end

+  def locale_from_user
+    return unless @user
+
+    @user.ui_settings&.dig('locale')
+  end
+
  def set_locale(locale, &)
    safe_locale = validate_and_get_locale(locale)
    # Ensure locale won't bleed into other requests
@@ -66,7 +66,7 @@ class DashboardController < ActionController::Base
      ENABLE_ACCOUNT_SIGNUP: GlobalConfigService.load('ENABLE_ACCOUNT_SIGNUP', 'false'),
      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
      INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
-      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
+      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v18.0'),
      WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
      WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
      IS_ENTERPRISE: ChatwootApp.enterprise?,
@@ -47,10 +47,8 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
  end

  def get_resource_from_auth_hash # rubocop:disable Naming/AccessorMethodName
-    # find the user with their email instead of UID and token
-    @resource = resource_class.where(
-      email: auth_hash['info']['email']
-    ).first
+    email = auth_hash.dig('info', 'email')
+    @resource = resource_class.from_email(email)
  end

  def validate_signup_email_is_business_domain?
@@ -75,3 +73,5 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
    'user'
  end
 end
+
+DeviseOverrides::OmniauthCallbacksController.prepend_mod_with('DeviseOverrides::OmniauthCallbacksController')
@@ -44,3 +44,5 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController
    }, status: status
  end
 end
+
+DeviseOverrides::PasswordsController.prepend_mod_with('DeviseOverrides::PasswordsController')
@@ -58,6 +58,6 @@ class Public::Api::V1::Portals::BaseController < PublicController
  end

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'BRAND_URL', 'INSTALLATION_NAME')
  end
 end
@@ -5,6 +5,6 @@ class Survey::ResponsesController < ActionController::Base
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'INSTALLATION_NAME')
  end
 end
@@ -6,6 +6,7 @@ class WidgetsController < ActionController::Base
  before_action :set_web_widget
  before_action :ensure_account_is_active
  before_action :ensure_location_is_supported
+  before_action :validate_origin_domain
  before_action :set_token
  before_action :set_contact
  before_action :build_contact
@@ -14,7 +15,7 @@ class WidgetsController < ActionController::Base
  private

  def set_global_config
-    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED')
+    @global_config = GlobalConfig.get('LOGO_THUMBNAIL', 'BRAND_NAME', 'WIDGET_BRAND_URL', 'DIRECT_UPLOADS_ENABLED', 'INSTALLATION_NAME')
  end

  def set_web_widget
@@ -24,6 +25,75 @@ class WidgetsController < ActionController::Base
    render json: { error: 'web widget does not exist' }, status: :not_found
  end

+  def validate_origin_domain
+    # Only validate origin if website_url is configured
+    return if @web_widget.website_url.blank?
+
+    origin_domain = extract_domain_from_origin
+    return if domain_allowed?(origin_domain, @web_widget.website_url)
+
+    Rails.logger.warn('Widget access denied.')
+    render json: { error: 'Widget access denied.' }, status: :forbidden
+  end
+
+  def domain_allowed?(origin_domain, website_url)
+    return false if origin_domain.blank?
+
+    # Split website_url by comma to handle multiple domains/wildcards
+    allowed_domains = website_url.split(',').map(&:strip).reject(&:blank?)
+
+    allowed_domains.any? do |allowed_domain|
+      # Extract domain and protocol from the allowed domain
+      allowed_domain_without_protocol = extract_domain_from_url(allowed_domain)
+      allowed_protocol = extract_protocol_from_url(allowed_domain)
+      origin_protocol = extract_protocol_from_origin
+
+      # Check if the extracted domain starts with wildcard
+      if allowed_domain_without_protocol&.start_with?('*.')
+        # Handle wildcard domains (e.g., "*.example.com")
+        wildcard_suffix = allowed_domain_without_protocol[2..-1] # Remove "*.", keep "example.com"
+        origin_domain.end_with?(wildcard_suffix) && origin_protocol == allowed_protocol
+      else
+        # Handle exact domain and protocol match
+        origin_domain == allowed_domain_without_protocol && origin_protocol == allowed_protocol
+      end
+    end
+  end
+
+  def extract_domain_from_origin
+    origin = request.headers['Origin']
+    return nil if origin.blank?
+
+    extract_domain_from_url(origin)
+  end
+
+  def extract_protocol_from_origin
+    origin = request.headers['Origin']
+    return nil if origin.blank?
+
+    extract_protocol_from_url(origin)
+  end
+
+  def extract_domain_from_url(url)
+    return nil if url.blank?
+
+    # Parse the URL and extract the domain
+    uri = URI.parse(url)
+    uri.host&.downcase
+  rescue URI::InvalidURIError
+    nil
+  end
+
+  def extract_protocol_from_url(url)
+    return nil if url.blank?
+
+    # Parse the URL and extract the protocol
+    uri = URI.parse(url)
+    uri.scheme&.downcase
+  rescue URI::InvalidURIError
+    nil
+  end
+
  def set_token
    @token = permitted_params[:cw_conversation]
    @auth_token_params = if @token.present?
@@ -1,4 +1,5 @@
 module PortalHelper
+  include UrlHelper
  def set_og_image_url(portal_name, title)
    cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
    return if cdn_url.blank?
@@ -74,6 +75,17 @@ module PortalHelper
    end
  end

+  def generate_portal_brand_url(brand_url, referer)
+    url = URI.parse(brand_url.to_s)
+    query_params = Rack::Utils.parse_query(url.query)
+    query_params['utm_medium'] = 'helpcenter'
+    query_params['utm_campaign'] = 'branding'
+    query_params['utm_source'] = URI.parse(referer).host if url_valid?(referer)
+
+    url.query = query_params.to_query
+    url.to_s
+  end
+
  def render_category_content(content)
    ChatwootMarkdownRenderer.new(content).render_markdown_to_plain_text
  end
@@ -53,13 +53,13 @@ module ReportHelper
  end

  def resolutions
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_resolved,
-                                                                               conversations: { status: :resolved }, created_at: range).distinct
+    scope.reporting_events.where(account_id: account.id, name: :conversation_resolved,
+                                 created_at: range)
  end

  def bot_resolutions
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(account_id: account.id, name: :conversation_bot_resolved,
-                                                                               conversations: { status: :resolved }, created_at: range).distinct
+    scope.reporting_events.where(account_id: account.id, name: :conversation_bot_resolved,
+                                 created_at: range)
  end

  def bot_handoffs
@@ -2,6 +2,7 @@ module WidgetHelper
  def build_contact_inbox_with_token(web_widget, additional_attributes = {})
    contact_inbox = web_widget.create_contact_inbox(additional_attributes)
    payload = { source_id: contact_inbox.source_id, inbox_id: web_widget.inbox.id }
+
    token = ::Widget::TokenService.new(payload: payload).generate_token

    [contact_inbox, token]
@@ -19,6 +19,7 @@ import {
  verifyServiceWorkerExistence,
 } from './helper/pushHelper';
 import ReconnectService from 'dashboard/helper/ReconnectService';
+import { useUISettings } from 'dashboard/composables/useUISettings';

 export default {
  name: 'App',
@@ -38,12 +39,14 @@ export default {
    const { accountId } = useAccount();
    // Use the font size composable (it automatically sets up the watcher)
    const { currentFontSize } = useFontSize();
+    const { uiSettings } = useUISettings();

    return {
      router,
      store,
      currentAccountId: accountId,
      currentFontSize,
+      uiSettings,
    };
  },
  data() {
@@ -88,7 +91,10 @@ export default {
  mounted() {
    this.initializeColorTheme();
    this.listenToThemeChanges();
-    this.setLocale(window.chatwootConfig.selectedLocale);
+    // If user locale is set, use it; otherwise use account locale
+    this.setLocale(
+      this.uiSettings?.locale || window.chatwootConfig.selectedLocale
+    );
  },
  unmounted() {
    if (this.reconnectService) {
@@ -114,7 +120,8 @@ export default {
      const { locale, latest_chatwoot_version: latestChatwootVersion } =
        this.getAccount(this.currentAccountId);
      const { pubsub_token: pubsubToken } = this.currentUser || {};
-      this.setLocale(locale);
+      // If user locale is set, use it; otherwise use account locale
+      this.setLocale(this.uiSettings?.locale || locale);
      this.latestChatwootVersion = latestChatwootVersion;
      vueActionCable.init(this.store, pubsubToken);
      this.reconnectService = new ReconnectService(this.store, this.router);
@@ -0,0 +1,43 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class AgentCapacityPolicies extends ApiClient {
+  constructor() {
+    super('agent_capacity_policies', { accountScoped: true });
+  }
+
+  getUsers(policyId) {
+    return axios.get(`${this.url}/${policyId}/users`);
+  }
+
+  addUser(policyId, userData) {
+    return axios.post(`${this.url}/${policyId}/users`, {
+      user_id: userData.id,
+      capacity: userData.capacity,
+    });
+  }
+
+  removeUser(policyId, userId) {
+    return axios.delete(`${this.url}/${policyId}/users/${userId}`);
+  }
+
+  createInboxLimit(policyId, limitData) {
+    return axios.post(`${this.url}/${policyId}/inbox_limits`, {
+      inbox_id: limitData.inboxId,
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  updateInboxLimit(policyId, limitId, limitData) {
+    return axios.put(`${this.url}/${policyId}/inbox_limits/${limitId}`, {
+      conversation_limit: limitData.conversationLimit,
+    });
+  }
+
+  deleteInboxLimit(policyId, limitId) {
+    return axios.delete(`${this.url}/${policyId}/inbox_limits/${limitId}`);
+  }
+}
+
+export default new AgentCapacityPolicies();
@@ -0,0 +1,36 @@
+/* global axios */
+
+import ApiClient from './ApiClient';
+
+class AssignmentPolicies extends ApiClient {
+  constructor() {
+    super('assignment_policies', { accountScoped: true });
+  }
+
+  getInboxes(policyId) {
+    return axios.get(`${this.url}/${policyId}/inboxes`);
+  }
+
+  setInboxPolicy(inboxId, policyId) {
+    return axios.post(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`,
+      {
+        assignment_policy_id: policyId,
+      }
+    );
+  }
+
+  getInboxPolicy(inboxId) {
+    return axios.get(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
+    );
+  }
+
+  removeInboxPolicy(inboxId) {
+    return axios.delete(
+      `/api/v1/accounts/${this.accountIdFromRoute}/inboxes/${inboxId}/assignment_policy`
+    );
+  }
+}
+
+export default new AssignmentPolicies();
@@ -0,0 +1,26 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class SamlSettingsAPI extends ApiClient {
+  constructor() {
+    super('saml_settings', { accountScoped: true });
+  }
+
+  get() {
+    return axios.get(this.url);
+  }
+
+  create(data) {
+    return axios.post(this.url, { saml_settings: data });
+  }
+
+  update(data) {
+    return axios.put(this.url, { saml_settings: data });
+  }
+
+  delete() {
+    return axios.delete(this.url);
+  }
+}
+
+export default new SamlSettingsAPI();
@@ -0,0 +1,98 @@
+import agentCapacityPolicies from '../agentCapacityPolicies';
+import ApiClient from '../ApiClient';
+
+describe('#AgentCapacityPoliciesAPI', () => {
+  it('creates correct instance', () => {
+    expect(agentCapacityPolicies).toBeInstanceOf(ApiClient);
+    expect(agentCapacityPolicies).toHaveProperty('get');
+    expect(agentCapacityPolicies).toHaveProperty('show');
+    expect(agentCapacityPolicies).toHaveProperty('create');
+    expect(agentCapacityPolicies).toHaveProperty('update');
+    expect(agentCapacityPolicies).toHaveProperty('delete');
+    expect(agentCapacityPolicies).toHaveProperty('getUsers');
+    expect(agentCapacityPolicies).toHaveProperty('addUser');
+    expect(agentCapacityPolicies).toHaveProperty('removeUser');
+    expect(agentCapacityPolicies).toHaveProperty('createInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('updateInboxLimit');
+    expect(agentCapacityPolicies).toHaveProperty('deleteInboxLimit');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      put: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      // Mock accountIdFromRoute
+      Object.defineProperty(agentCapacityPolicies, 'accountIdFromRoute', {
+        get: () => '1',
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#getUsers', () => {
+      agentCapacityPolicies.getUsers(123);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users'
+      );
+    });
+
+    it('#addUser', () => {
+      const userData = { id: 456, capacity: 20 };
+      agentCapacityPolicies.addUser(123, userData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users',
+        {
+          user_id: 456,
+          capacity: 20,
+        }
+      );
+    });
+
+    it('#removeUser', () => {
+      agentCapacityPolicies.removeUser(123, 456);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/users/456'
+      );
+    });
+
+    it('#createInboxLimit', () => {
+      const limitData = { inboxId: 1, conversationLimit: 10 };
+      agentCapacityPolicies.createInboxLimit(123, limitData);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits',
+        {
+          inbox_id: 1,
+          conversation_limit: 10,
+        }
+      );
+    });
+
+    it('#updateInboxLimit', () => {
+      const limitData = { conversationLimit: 15 };
+      agentCapacityPolicies.updateInboxLimit(123, 789, limitData);
+      expect(axiosMock.put).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789',
+        {
+          conversation_limit: 15,
+        }
+      );
+    });
+
+    it('#deleteInboxLimit', () => {
+      agentCapacityPolicies.deleteInboxLimit(123, 789);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/agent_capacity_policies/123/inbox_limits/789'
+      );
+    });
+  });
+});
@@ -0,0 +1,70 @@
+import assignmentPolicies from '../assignmentPolicies';
+import ApiClient from '../ApiClient';
+
+describe('#AssignmentPoliciesAPI', () => {
+  it('creates correct instance', () => {
+    expect(assignmentPolicies).toBeInstanceOf(ApiClient);
+    expect(assignmentPolicies).toHaveProperty('get');
+    expect(assignmentPolicies).toHaveProperty('show');
+    expect(assignmentPolicies).toHaveProperty('create');
+    expect(assignmentPolicies).toHaveProperty('update');
+    expect(assignmentPolicies).toHaveProperty('delete');
+    expect(assignmentPolicies).toHaveProperty('getInboxes');
+    expect(assignmentPolicies).toHaveProperty('setInboxPolicy');
+    expect(assignmentPolicies).toHaveProperty('getInboxPolicy');
+    expect(assignmentPolicies).toHaveProperty('removeInboxPolicy');
+  });
+
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      get: vi.fn(() => Promise.resolve()),
+      post: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+      // Mock accountIdFromRoute
+      Object.defineProperty(assignmentPolicies, 'accountIdFromRoute', {
+        get: () => '1',
+        configurable: true,
+      });
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#getInboxes', () => {
+      assignmentPolicies.getInboxes(123);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/assignment_policies/123/inboxes'
+      );
+    });
+
+    it('#setInboxPolicy', () => {
+      assignmentPolicies.setInboxPolicy(456, 123);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy',
+        {
+          assignment_policy_id: 123,
+        }
+      );
+    });
+
+    it('#getInboxPolicy', () => {
+      assignmentPolicies.getInboxPolicy(456);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy'
+      );
+    });
+
+    it('#removeInboxPolicy', () => {
+      assignmentPolicies.removeInboxPolicy(456);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/accounts/1/inboxes/456/assignment_policy'
+      );
+    });
+  });
+});
@@ -0,0 +1,116 @@
+<script setup>
+import AgentCapacityPolicyCard from './AgentCapacityPolicyCard.vue';
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+
+const withCount = policy => ({
+  ...policy,
+  assignedAgentCount: policy.users.length,
+});
+
+const policyA = withCount({
+  id: 1,
+  name: 'High Volume Support',
+  description:
+    'Capacity-based policy for handling high conversation volumes with experienced agents',
+  users: [mockUsers[0], mockUsers[1], mockUsers[2]],
+  isFetchingUsers: false,
+});
+
+const policyB = withCount({
+  id: 2,
+  name: 'Specialized Team',
+  description: 'Custom capacity limits for specialized support team members',
+  users: [mockUsers[3], mockUsers[4]],
+  isFetchingUsers: false,
+});
+
+const emptyPolicy = withCount({
+  id: 3,
+  name: 'New Policy',
+  description: 'Recently created policy with no assigned agents yet',
+  users: [],
+  isFetchingUsers: false,
+});
+
+const loadingPolicy = withCount({
+  id: 4,
+  name: 'Loading Policy',
+  description: 'Policy currently loading agent information',
+  users: [],
+  isFetchingUsers: true,
+});
+
+const onEdit = id => console.log('Edit policy:', id);
+const onDelete = id => console.log('Delete policy:', id);
+const onFetchUsers = id => console.log('Fetch users for policy:', id);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AgentCapacityPolicyCard"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Multiple Cards (Various States)">
+      <div class="p-4 bg-n-background">
+        <div class="grid grid-cols-1 gap-4">
+          <AgentCapacityPolicyCard
+            v-bind="policyA"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="policyB"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="emptyPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+          <AgentCapacityPolicyCard
+            v-bind="loadingPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-users="onFetchUsers"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import CardPopover from '../components/CardPopover.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  description: { type: String, default: '' },
+  assignedAgentCount: { type: Number, default: 0 },
+  users: { type: Array, default: () => [] },
+  isFetchingUsers: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['edit', 'delete', 'fetchUsers']);
+
+const { t } = useI18n();
+
+const users = computed(() => {
+  return props.users.map(user => {
+    return {
+      name: user.name,
+      key: user.id,
+      email: user.email,
+      avatarUrl: user.avatarUrl,
+    };
+  });
+});
+
+const handleEdit = () => {
+  emit('edit', props.id);
+};
+
+const handleDelete = () => {
+  emit('delete', props.id);
+};
+
+const handleFetchUsers = () => {
+  if (props.users?.length > 0) return;
+  emit('fetchUsers', props.id);
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5">
+    <div class="flex flex-col gap-2 relative justify-between w-full">
+      <div class="flex items-center gap-3 justify-between w-full">
+        <div class="flex items-center gap-3">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+            {{ name }}
+          </h3>
+          <CardPopover
+            :title="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.POPOVER')
+            "
+            icon="i-lucide-users-round"
+            :count="assignedAgentCount"
+            :items="users"
+            :is-fetching="isFetchingUsers"
+            @fetch="handleFetchUsers"
+          />
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :label="
+              t('ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.INDEX.CARD.EDIT')
+            "
+            sm
+            slate
+            link
+            class="px-2"
+            @click="handleEdit"
+          />
+          <div class="w-px h-2.5 bg-n-slate-5" />
+          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
+        </div>
+      </div>
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+        {{ description }}
+      </p>
+    </div>
+  </CardLayout>
+</template>
@@ -0,0 +1,63 @@
+<script setup>
+import AssignmentCard from './AssignmentCard.vue';
+
+const agentAssignments = [
+  {
+    id: 1,
+    title: 'Assignment policy',
+    description: 'Manage how conversations get assigned in inboxes.',
+    features: [
+      {
+        icon: 'i-lucide-circle-fading-arrow-up',
+        label: 'Assign by conversations evenly or by available capacity',
+      },
+      {
+        icon: 'i-lucide-scale',
+        label: 'Add fair distribution rules to avoid overloading any agent',
+      },
+      {
+        icon: 'i-lucide-inbox',
+        label: 'Add inboxes to a policy - one policy per inbox',
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: 'Agent capacity policy',
+    description: 'Manage workload for agents.',
+    features: [
+      {
+        icon: 'i-lucide-glass-water',
+        label: 'Define maximum conversations per inbox',
+      },
+      {
+        icon: 'i-lucide-circle-minus',
+        label: 'Create exceptions based on labels and time',
+      },
+      {
+        icon: 'i-lucide-users-round',
+        label: 'Add agents to a policy - one policy per agent',
+      },
+    ],
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AssignmentCard"
+    :layout="{ type: 'grid', width: '1000px' }"
+  >
+    <Variant title="Assignment Card">
+      <div class="px-4 py-4 bg-n-background flex gap-6 justify-between">
+        <AssignmentCard
+          v-for="(item, index) in agentAssignments"
+          :key="index"
+          :title="item.title"
+          :description="item.description"
+          :features="item.features"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,49 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+
+defineProps({
+  title: { type: String, default: '' },
+  description: { type: String, default: '' },
+  features: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
+    <div class="flex flex-col items-start gap-2">
+      <div class="flex justify-between w-full items-center">
+        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
+        <Button
+          xs
+          slate
+          ghost
+          icon="i-lucide-chevron-right"
+          @click.stop="handleClick"
+        />
+      </div>
+      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
+    </div>
+
+    <ul class="flex flex-col items-start gap-3 mt-3">
+      <li
+        v-for="feature in features"
+        :key="feature.id"
+        class="flex items-center gap-3 text-sm"
+      >
+        <Icon
+          :icon="feature.icon"
+          class="text-n-slate-11 size-4 flex-shrink-0"
+        />
+        {{ feature.label }}
+      </li>
+    </ul>
+  </CardLayout>
+</template>
@@ -0,0 +1,104 @@
+<script setup>
+import AssignmentPolicyCard from './AssignmentPolicyCard.vue';
+
+const mockInboxes = [
+  {
+    id: 1,
+    name: 'Website Support',
+    channel_type: 'Channel::WebWidget',
+    inbox_type: 'Website',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    channel_type: 'Channel::Email',
+    inbox_type: 'Email',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    channel_type: 'Channel::Whatsapp',
+    inbox_type: 'WhatsApp',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    channel_type: 'Channel::FacebookPage',
+    inbox_type: 'Messenger',
+  },
+];
+
+const withCount = policy => ({
+  ...policy,
+  assignedInboxCount: policy.inboxes.length,
+});
+
+const policyA = withCount({
+  id: 1,
+  name: 'Website & Email',
+  description: 'Distributes conversations evenly among available agents',
+  assignmentOrder: 'round_robin',
+  conversationPriority: 'high',
+  enabled: true,
+  inboxes: [mockInboxes[0], mockInboxes[1]],
+  isFetchingInboxes: false,
+});
+
+const policyB = withCount({
+  id: 2,
+  name: 'WhatsApp & Messenger',
+  description: 'Assigns based on capacity and workload',
+  assignmentOrder: 'capacity_based',
+  conversationPriority: 'medium',
+  enabled: true,
+  inboxes: [mockInboxes[2], mockInboxes[3]],
+  isFetchingInboxes: false,
+});
+
+const emptyPolicy = withCount({
+  id: 3,
+  name: 'No Inboxes Yet',
+  description: 'Policy with no assigned inboxes',
+  assignmentOrder: 'manual',
+  conversationPriority: 'low',
+  enabled: false,
+  inboxes: [],
+  isFetchingInboxes: false,
+});
+
+const onEdit = id => console.log('Edit policy:', id);
+const onDelete = id => console.log('Delete policy:', id);
+const onFetch = () => console.log('Fetch inboxes');
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AssignmentPolicyCard"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Three Cards (Two with inboxes, One empty)">
+      <div class="p-4 bg-n-background">
+        <div class="grid grid-cols-1 gap-4">
+          <AssignmentPolicyCard
+            v-bind="policyA"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+          <AssignmentPolicyCard
+            v-bind="policyB"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+          <AssignmentPolicyCard
+            v-bind="emptyPolicy"
+            @edit="onEdit"
+            @delete="onDelete"
+            @fetch-inboxes="onFetch"
+          />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,133 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { getInboxIconByType } from 'dashboard/helper/inbox';
+import { formatToTitleCase } from 'dashboard/helper/commons';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import CardPopover from '../components/CardPopover.vue';
+
+const props = defineProps({
+  id: { type: Number, required: true },
+  name: { type: String, default: '' },
+  description: { type: String, default: '' },
+  assignmentOrder: { type: String, default: '' },
+  conversationPriority: { type: String, default: '' },
+  assignedInboxCount: { type: Number, default: 0 },
+  enabled: { type: Boolean, default: false },
+  inboxes: { type: Array, default: () => [] },
+  isFetchingInboxes: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['edit', 'delete', 'fetchInboxes']);
+
+const { t } = useI18n();
+
+const inboxes = computed(() => {
+  return props.inboxes.map(inbox => {
+    return {
+      name: inbox.name,
+      id: inbox.id,
+      icon: getInboxIconByType(inbox.channelType, inbox.medium, 'line'),
+    };
+  });
+});
+
+const order = computed(() => {
+  return formatToTitleCase(props.assignmentOrder);
+});
+
+const priority = computed(() => {
+  return formatToTitleCase(props.conversationPriority);
+});
+
+const handleEdit = () => {
+  emit('edit', props.id);
+};
+
+const handleDelete = () => {
+  emit('delete', props.id);
+};
+
+const handleFetchInboxes = () => {
+  if (props.inboxes?.length > 0) return;
+  emit('fetchInboxes', props.id);
+};
+</script>
+
+<template>
+  <CardLayout class="[&>div]:px-5">
+    <div class="flex flex-col gap-2 relative justify-between w-full">
+      <div class="flex items-center gap-3 justify-between w-full">
+        <div class="flex items-center gap-3">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
+            {{ name }}
+          </h3>
+          <div class="flex items-center gap-2">
+            <div class="flex items-center rounded-md bg-n-alpha-2 h-6 px-2">
+              <span
+                class="text-xs"
+                :class="enabled ? 'text-n-teal-11' : 'text-n-slate-12'"
+              >
+                {{
+                  enabled
+                    ? t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ACTIVE'
+                      )
+                    : t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.INACTIVE'
+                      )
+                }}
+              </span>
+            </div>
+            <CardPopover
+              :title="
+                t(
+                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
+                )
+              "
+              icon="i-lucide-inbox"
+              :count="assignedInboxCount"
+              :items="inboxes"
+              :is-fetching="isFetchingInboxes"
+              @fetch="handleFetchInboxes"
+            />
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <Button
+            :label="
+              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.EDIT')
+            "
+            sm
+            slate
+            link
+            class="px-2"
+            @click="handleEdit"
+          />
+          <div v-if="order" class="w-px h-2.5 bg-n-slate-5" />
+          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
+        </div>
+      </div>
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+        {{ description }}
+      </p>
+      <div class="flex items-center gap-3 py-1.5">
+        <span v-if="order" class="text-n-slate-11 text-sm">
+          {{
+            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
+          }}
+          <span class="text-n-slate-12">{{ order }}</span>
+        </span>
+        <div v-if="order" class="w-px h-3 bg-n-strong" />
+        <span v-if="priority" class="text-n-slate-11 text-sm">
+          {{
+            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
+          }}
+          <span class="text-n-slate-12">{{ priority }}</span>
+        </span>
+      </div>
+    </div>
+  </CardLayout>
+</template>
@@ -0,0 +1,134 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { picoSearch } from '@scmmishra/pico-search';
+
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const [showPopover, togglePopover] = useToggle();
+
+const searchValue = ref('');
+
+const filteredItems = computed(() => {
+  if (!searchValue.value) return props.items;
+  const query = searchValue.value.toLowerCase();
+
+  return picoSearch(props.items, query, ['name']);
+});
+
+const handleAdd = item => {
+  emit('add', item);
+  togglePopover(false);
+};
+
+const handleClickOutside = () => {
+  if (showPopover.value) {
+    togglePopover(false);
+  }
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="handleClickOutside"
+    class="relative flex items-center group"
+  >
+    <Button
+      slate
+      type="button"
+      icon="i-lucide-plus"
+      sm
+      :label="label"
+      @click="togglePopover(!showPopover)"
+    />
+    <div
+      v-if="showPopover"
+      class="top-full mt-2 ltr:right-0 rtl:left-0 xl:ltr:left-0 xl:rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto py-2"
+    >
+      <div class="flex flex-col divide-y divide-n-slate-4 w-full">
+        <Input
+          v-model="searchValue"
+          :placeholder="searchPlaceholder"
+          custom-input-class="bg-transparent !outline-none w-full ltr:!pl-10 rtl:!pr-10 h-10"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute -translate-y-1/2 text-n-slate-11 size-4 top-1/2 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
+
+        <div
+          v-for="item in filteredItems"
+          :key="item.id"
+          class="flex gap-3 min-w-0 w-full py-4 px-3 hover:bg-n-alpha-2 cursor-pointer"
+          :class="{ 'items-center': item.color, 'items-start': !item.color }"
+          @click="handleAdd(item)"
+        >
+          <Icon
+            v-if="item.icon"
+            :icon="item.icon"
+            class="size-2 text-n-slate-12 flex-shrink-0 mt-0.5"
+          />
+          <span
+            v-else-if="item.color"
+            :style="{ backgroundColor: item.color }"
+            class="size-3 rounded-sm"
+          />
+          <Avatar
+            v-else
+            :title="item.name"
+            :src="item.avatarUrl"
+            :name="item.name"
+            :size="20"
+            rounded-full
+          />
+          <div class="flex flex-col items-start gap-2 min-w-0">
+            <div class="flex items-center gap-1 min-w-0">
+              <span
+                :title="item.name || item.title"
+                class="text-sm text-n-slate-12 truncate min-w-0"
+              >
+                {{ item.name || item.title }}
+              </span>
+              <span
+                v-if="item.id"
+                class="text-xs text-n-slate-11 flex-shrink-0"
+              >
+                {{ `#${item.id}` }}
+              </span>
+            </div>
+            <span
+              v-if="item.email || item.phoneNumber"
+              class="text-sm text-n-slate-11 truncate min-w-0"
+            >
+              {{ item.email || item.phoneNumber }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,127 @@
+<script setup>
+import { computed, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+
+import WithLabel from 'v3/components/Form/WithLabel.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Switch from 'dashboard/components-next/switch/Switch.vue';
+
+defineProps({
+  nameLabel: {
+    type: String,
+    default: '',
+  },
+  namePlaceholder: {
+    type: String,
+    default: '',
+  },
+  descriptionLabel: {
+    type: String,
+    default: '',
+  },
+  descriptionPlaceholder: {
+    type: String,
+    default: '',
+  },
+  statusLabel: {
+    type: String,
+    default: '',
+  },
+  statusPlaceholder: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['validationChange']);
+
+const policyName = defineModel('policyName', {
+  type: String,
+  default: '',
+});
+
+const description = defineModel('description', {
+  type: String,
+  default: '',
+});
+
+const enabled = defineModel('enabled', {
+  type: Boolean,
+  default: true,
+});
+
+const validationRules = {
+  policyName: { required, minLength: minLength(1) },
+  description: { required, minLength: minLength(1) },
+};
+
+const v$ = useVuelidate(validationRules, { policyName, description });
+
+const isValid = computed(() => !v$.value.$invalid);
+
+watch(
+  isValid,
+  () => {
+    emit('validationChange', {
+      isValid: isValid.value,
+      section: 'baseInfo',
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 pb-4">
+    <!-- Policy Name Field -->
+    <div class="flex items-center gap-6">
+      <WithLabel
+        :label="nameLabel"
+        name="policyName"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex-1">
+          <Input
+            v-model="policyName"
+            type="text"
+            :placeholder="namePlaceholder"
+          />
+        </div>
+      </WithLabel>
+    </div>
+
+    <!-- Description Field -->
+    <div class="flex items-center gap-6">
+      <WithLabel
+        :label="descriptionLabel"
+        name="description"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex-1">
+          <Input
+            v-model="description"
+            type="text"
+            :placeholder="descriptionPlaceholder"
+          />
+        </div>
+      </WithLabel>
+    </div>
+
+    <!-- Status Field -->
+    <div v-if="statusLabel" class="flex items-center gap-6">
+      <WithLabel
+        :label="statusLabel"
+        name="enabled"
+        class="flex items-center w-full [&>label]:min-w-[120px]"
+      >
+        <div class="flex items-center gap-2">
+          <Switch v-model="enabled" />
+          <span class="text-sm text-n-slate-11">
+            {{ statusPlaceholder }}
+          </span>
+        </div>
+      </WithLabel>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,121 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  count: {
+    type: Number,
+    default: 0,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['fetch']);
+
+const [showPopover, togglePopover] = useToggle();
+
+const handleButtonClick = () => {
+  emit('fetch');
+  togglePopover(!showPopover.value);
+};
+
+const handleClickOutside = () => {
+  if (showPopover.value) {
+    togglePopover(false);
+  }
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="handleClickOutside"
+    class="relative flex items-center group"
+  >
+    <button
+      v-if="count"
+      class="h-6 px-2 rounded-md bg-n-alpha-2 gap-1.5 flex items-center"
+      @click="handleButtonClick()"
+    >
+      <Icon :icon="icon" class="size-3.5 text-n-slate-12" />
+      <span class="text-n-slate-12 text-sm">
+        {{ count }}
+      </span>
+    </button>
+    <div
+      v-if="showPopover"
+      class="top-full mt-1 ltr:left-0 rtl:right-0 z-50 flex flex-col items-start absolute bg-n-alpha-3 backdrop-blur-[50px] border-0 gap-4 outline outline-1 outline-n-weak p-3 rounded-xl max-w-96 min-w-80 max-h-[20rem] overflow-y-auto"
+    >
+      <div class="flex items-center gap-2.5 pb-2">
+        <Icon :icon="icon" class="size-3.5" />
+        <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
+      </div>
+
+      <div
+        v-if="isFetching"
+        class="flex items-center justify-center py-3 w-full text-n-slate-11"
+      >
+        <Spinner />
+      </div>
+
+      <div v-else class="flex flex-col gap-4 w-full">
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="flex items-center justify-between gap-2 min-w-0 w-full"
+        >
+          <div class="flex items-center gap-2 min-w-0 w-full">
+            <Icon
+              v-if="item.icon"
+              :icon="item.icon"
+              class="size-4 text-n-slate-12 flex-shrink-0"
+            />
+            <Avatar
+              v-else
+              :title="item.name"
+              :src="item.avatarUrl"
+              :name="item.name"
+              :size="20"
+              rounded-full
+            />
+            <div class="flex items-center gap-1 min-w-0 flex-1">
+              <span
+                :title="item.name"
+                class="text-sm text-n-slate-12 truncate min-w-0"
+              >
+                {{ item.name }}
+              </span>
+              <span
+                v-if="item.id"
+                class="text-sm text-n-slate-11 flex-shrink-0"
+              >
+                {{ `#${item.id}` }}
+              </span>
+            </div>
+          </div>
+          <span v-if="item.email" class="text-sm text-n-slate-11 flex-shrink-0">
+            {{ item.email }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,90 @@
+<script setup>
+import Avatar from 'next/avatar/Avatar.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['delete']);
+
+const handleDelete = itemId => {
+  emit('delete', itemId);
+};
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-3 w-full text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div
+    v-else-if="items.length === 0 && emptyStateMessage"
+    class="custom-dashed-border flex items-center justify-center py-6 w-full"
+  >
+    <span class="text-sm text-n-slate-11">
+      {{ emptyStateMessage }}
+    </span>
+  </div>
+  <div v-else class="flex flex-col divide-y divide-n-weak">
+    <div
+      v-for="item in items"
+      :key="item.id"
+      class="grid grid-cols-4 items-center gap-3 min-w-0 w-full justify-between h-[3.25rem] ltr:pr-2 rtl:pl-2"
+    >
+      <div class="flex items-center gap-2 col-span-2">
+        <Icon
+          v-if="item.icon"
+          :icon="item.icon"
+          class="size-4 text-n-slate-12 flex-shrink-0"
+        />
+        <Avatar
+          v-else
+          :title="item.name"
+          :src="item.avatarUrl"
+          :name="item.name"
+          :size="20"
+          rounded-full
+        />
+        <span class="text-sm text-n-slate-12 truncate min-w-0">
+          {{ item.name }}
+        </span>
+      </div>
+
+      <div class="flex items-start gap-2 col-span-1">
+        <span
+          :title="item.email || item.phoneNumber"
+          class="text-sm text-n-slate-12 truncate min-w-0"
+        >
+          {{ item.email || item.phoneNumber }}
+        </span>
+      </div>
+
+      <div class="col-span-1 justify-end flex items-center">
+        <Button
+          icon="i-lucide-trash"
+          slate
+          ghost
+          sm
+          type="button"
+          @click="handleDelete(item.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,149 @@
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
+
+const props = defineProps({
+  tagsList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const excludedLabels = defineModel('excludedLabels', {
+  type: Array,
+  default: () => [],
+});
+
+const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
+  type: Number,
+  default: 10,
+});
+
+// Duration limits: 10 minutes to 999 days (in minutes)
+const MIN_DURATION_MINUTES = 10;
+const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
+
+const { t } = useI18n();
+
+const hoveredLabel = ref(null);
+const windowUnit = ref(DURATION_UNITS.MINUTES);
+
+const addedTags = computed(() =>
+  props.tagsList
+    .filter(label => excludedLabels.value.includes(label.name))
+    .map(label => ({ id: label.id, title: label.name, ...label }))
+);
+
+const filteredTags = computed(() =>
+  props.tagsList.filter(
+    label => !addedTags.value.some(tag => tag.id === label.id)
+  )
+);
+
+const detectUnit = minutes => {
+  const m = Number(minutes) || 0;
+  if (m === 0) return DURATION_UNITS.MINUTES;
+  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
+  if (m % 60 === 0) return DURATION_UNITS.HOURS;
+  return DURATION_UNITS.MINUTES;
+};
+
+const onClickAddTag = tag => {
+  excludedLabels.value = [...excludedLabels.value, tag.name];
+};
+
+const onClickRemoveTag = tag => {
+  excludedLabels.value = excludedLabels.value.filter(
+    name => name !== tag.title
+  );
+};
+
+onMounted(() => {
+  windowUnit.value = detectUnit(excludeOlderThanMinutes.value);
+});
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-6">
+    <div class="flex flex-col items-start gap-1 py-1">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.LABEL'
+          )
+        }}
+      </label>
+      <p class="mb-0 text-n-slate-11 text-sm">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DESCRIPTION'
+          )
+        }}
+      </p>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.LABEL'
+          )
+        }}
+      </label>
+      <div
+        class="flex items-start gap-2 flex-wrap"
+        @mouseleave="hoveredLabel = null"
+      >
+        <LabelItem
+          v-for="tag in addedTags"
+          :key="tag.id"
+          :label="tag"
+          :is-hovered="hoveredLabel === tag.id"
+          class="h-8"
+          @remove="onClickRemoveTag"
+          @hover="hoveredLabel = tag.id"
+        />
+        <AddDataDropdown
+          :label="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.ADD_TAG'
+            )
+          "
+          :search-placeholder="
+            t(
+              'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.TAGS.DROPDOWN.SEARCH_PLACEHOLDER'
+            )
+          "
+          :items="filteredTags"
+          class="[&>button]:!text-n-blue-text"
+          @add="onClickAddTag"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start gap-4">
+      <label class="text-sm font-medium text-n-slate-12 py-1">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY.FORM.EXCLUSION_RULES.DURATION.LABEL'
+          )
+        }}
+      </label>
+      <div
+        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
+      >
+        <!-- allow 10 mins to 999 days -->
+        <DurationInput
+          v-model:unit="windowUnit"
+          v-model:model-value="excludeOlderThanMinutes"
+          :min="MIN_DURATION_MINUTES"
+          :max="MAX_DURATION_MINUTES"
+        />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,86 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Input from 'dashboard/components-next/input/Input.vue';
+import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
+import { DURATION_UNITS } from 'dashboard/components-next/input/constants';
+
+const { t } = useI18n();
+
+const fairDistributionLimit = defineModel('fairDistributionLimit', {
+  type: Number,
+  default: 100,
+  set(value) {
+    return Number(value) || 0;
+  },
+});
+
+const fairDistributionWindow = defineModel('fairDistributionWindow', {
+  type: Number,
+  default: 3600,
+  set(value) {
+    return Number(value) || 0;
+  },
+});
+
+const windowUnit = ref(DURATION_UNITS.MINUTES);
+
+const detectUnit = minutes => {
+  const m = Number(minutes) || 0;
+  if (m === 0) return DURATION_UNITS.MINUTES;
+  if (m % (24 * 60) === 0) return DURATION_UNITS.DAYS;
+  if (m % 60 === 0) return DURATION_UNITS.HOURS;
+  return DURATION_UNITS.MINUTES;
+};
+
+onMounted(() => {
+  windowUnit.value = detectUnit(fairDistributionWindow.value);
+});
+</script>
+
+<template>
+  <div
+    class="flex items-start xl:items-center flex-col md:flex-row gap-4 lg:gap-3 bg-n-solid-1 p-4 outline outline-1 outline-n-weak rounded-xl"
+  >
+    <div class="flex items-center gap-3">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.INPUT_MAX'
+          )
+        }}
+      </label>
+      <div class="flex-1">
+        <Input
+          v-model="fairDistributionLimit"
+          type="number"
+          placeholder="100"
+          max="100000"
+          class="w-full"
+        />
+      </div>
+    </div>
+
+    <div class="flex sm:flex-row flex-col items-start sm:items-center gap-4">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{
+          t(
+            'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.FAIR_DISTRIBUTION.DURATION'
+          )
+        }}
+      </label>
+
+      <div
+        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
+      >
+        <!-- allow 10 mins to 999 days -->
+        <DurationInput
+          v-model:model-value="fairDistributionWindow"
+          v-model:unit="windowUnit"
+          :min="10"
+          :max="1438560"
+        />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,163 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
+
+const props = defineProps({
+  inboxList: {
+    type: Array,
+    default: () => [],
+  },
+  isFetching: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['delete', 'add', 'update']);
+
+const inboxCapacityLimits = defineModel('inboxCapacityLimits', {
+  type: Array,
+  default: () => [],
+});
+
+const { t } = useI18n();
+
+const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
+const DEFAULT_CONVERSATION_LIMIT = 10;
+const MIN_CONVERSATION_LIMIT = 1;
+const MAX_CONVERSATION_LIMIT = 100000;
+
+const selectedInboxIds = computed(
+  () => new Set(inboxCapacityLimits.value.map(limit => limit.inboxId))
+);
+
+const availableInboxes = computed(() =>
+  props.inboxList.filter(
+    inbox => inbox && !selectedInboxIds.value.has(inbox.id)
+  )
+);
+
+const isLimitValid = limit => {
+  return (
+    limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
+    limit.conversationLimit <= MAX_CONVERSATION_LIMIT
+  );
+};
+
+const inboxMap = computed(
+  () => new Map(props.inboxList.map(inbox => [inbox.id, inbox]))
+);
+
+const handleAddInbox = inbox => {
+  emit('add', {
+    inboxId: inbox.id,
+    conversationLimit: DEFAULT_CONVERSATION_LIMIT,
+  });
+};
+
+const handleRemoveLimit = limitId => {
+  emit('delete', limitId);
+};
+
+const handleLimitChange = limit => {
+  if (isLimitValid(limit)) {
+    emit('update', limit);
+  }
+};
+
+const getInboxName = inboxId => {
+  return inboxMap.value.get(inboxId)?.name || '';
+};
+</script>
+
+<template>
+  <div class="py-4 flex-col flex gap-3">
+    <div class="flex items-center w-full gap-8 justify-between pt-1 pb-3">
+      <label class="text-sm font-medium text-n-slate-12">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.LABEL`) }}
+      </label>
+
+      <AddDataDropdown
+        :label="t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.ADD_BUTTON`)"
+        :search-placeholder="
+          t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SELECT_INBOX`)
+        "
+        :items="availableInboxes"
+        @add="handleAddInbox"
+      />
+    </div>
+
+    <div
+      v-if="isFetching"
+      class="flex items-center justify-center py-3 w-full text-n-slate-11"
+    >
+      <Spinner />
+    </div>
+
+    <div
+      v-else-if="!inboxCapacityLimits.length"
+      class="custom-dashed-border flex items-center justify-center py-6 w-full"
+    >
+      <span class="text-sm text-n-slate-11">
+        {{ t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.EMPTY_STATE`) }}
+      </span>
+    </div>
+
+    <div v-else class="flex-col flex gap-3">
+      <div
+        v-for="(limit, index) in inboxCapacityLimits"
+        :key="limit.id || `temp-${index}`"
+        class="flex items-center gap-3"
+      >
+        <div
+          class="flex items-start rounded-lg outline-1 outline cursor-not-allowed text-n-slate-11 outline-n-weak py-2.5 px-3 text-sm w-full"
+        >
+          {{ getInboxName(limit.inboxId) }}
+        </div>
+
+        <div
+          class="py-2.5 px-3 rounded-lg gap-2 outline outline-1 flex-shrink-0 flex items-center"
+          :class="[
+            !isLimitValid(limit) ? 'outline-n-ruby-8' : 'outline-n-weak',
+          ]"
+        >
+          <label class="text-sm text-n-slate-12 ltr:pr-2 rtl:pl-2">
+            {{
+              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.MAX_CONVERSATIONS`)
+            }}
+          </label>
+
+          <div class="h-5 w-px bg-n-weak" />
+
+          <input
+            v-model.number="limit.conversationLimit"
+            type="number"
+            :min="MIN_CONVERSATION_LIMIT"
+            :max="MAX_CONVERSATION_LIMIT"
+            class="reset-base bg-transparent focus:outline-none max-w-20 text-sm"
+            :class="[
+              !isLimitValid(limit)
+                ? 'placeholder:text-n-ruby-9 !text-n-ruby-9'
+                : 'placeholder:text-n-slate-10 text-n-slate-12',
+            ]"
+            :placeholder="
+              t(`${BASE_KEY}.FORM.INBOX_CAPACITY_LIMIT.FIELD.SET_LIMIT`)
+            "
+            @blur="handleLimitChange(limit)"
+          />
+        </div>
+
+        <Button
+          type="button"
+          slate
+          icon="i-lucide-trash"
+          class="flex-shrink-0"
+          @click="handleRemoveLimit(limit.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,60 @@
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const handleChange = () => {
+  if (!props.isActive) {
+    emit('select', props.id);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="relative cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
+    :class="[
+      isActive ? 'outline-n-blue-9' : 'outline-n-weak hover:outline-n-strong',
+    ]"
+    @click="handleChange"
+  >
+    <div class="absolute top-4 right-4">
+      <input
+        :id="`${id}`"
+        :checked="isActive"
+        :value="id"
+        :name="id"
+        type="radio"
+        class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col gap-3 items-start">
+      <h3 class="text-sm font-medium text-n-slate-12">
+        {{ label }}
+      </h3>
+      <p class="text-sm text-n-slate-11">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,92 @@
+<script setup>
+import AddDataDropdown from '../AddDataDropdown.vue';
+
+const mockInboxes = [
+  {
+    id: 1,
+    name: 'Website Support',
+    email: 'support@company.com',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    email: 'help@company.com',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    phoneNumber: '+1 555-0123',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    email: 'messenger@company.com',
+    icon: 'i-lucide-facebook',
+  },
+  {
+    id: 5,
+    name: 'Twitter DM',
+    email: 'twitter@company.com',
+    icon: 'i-lucide-twitter',
+  },
+];
+
+const mockTags = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+];
+
+const handleAdd = item => {
+  console.log('Add item:', item);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/AddDataDropdown"
+    :layout="{ type: 'grid', width: '500px' }"
+  >
+    <Variant title="Basic Usage - Inboxes">
+      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
+        <AddDataDropdown
+          label="Add Inbox"
+          search-placeholder="Search inboxes..."
+          :items="mockInboxes"
+          @add="handleAdd"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Basic Usage - Tags">
+      <div class="p-8 bg-n-background flex gap-4 h-[400px] items-start">
+        <AddDataDropdown
+          label="Add Tag"
+          search-placeholder="Search tags..."
+          :items="mockTags"
+          @add="handleAdd"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,33 @@
+<script setup>
+import { ref } from 'vue';
+import BaseInfo from '../BaseInfo.vue';
+
+const policyName = ref('Round Robin Policy');
+const description = ref(
+  'Distributes conversations evenly among available agents'
+);
+const enabled = ref(true);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/BaseInfo"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background">
+        <BaseInfo
+          v-model:policy-name="policyName"
+          v-model:description="description"
+          v-model:enabled="enabled"
+          name-label="Policy Name"
+          name-placeholder="Enter policy name"
+          description-label="Description"
+          description-placeholder="Enter policy description"
+          status-label="Status"
+          status-placeholder="Active"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,89 @@
+<script setup>
+import CardPopover from '../CardPopover.vue';
+
+const mockItems = [
+  {
+    id: 1,
+    name: 'Website Support',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    id: 4,
+    name: 'Facebook Messenger',
+    icon: 'i-lucide-facebook',
+  },
+];
+
+const mockUsers = [
+  {
+    id: 1,
+    name: 'John Smith',
+    email: 'john.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Sarah Johnson',
+    email: 'sarah.johnson@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+  {
+    id: 3,
+    name: 'Mike Chen',
+    email: 'mike.chen@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=3',
+  },
+  {
+    id: 4,
+    name: 'Emily Davis',
+    email: 'emily.davis@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=4',
+  },
+  {
+    id: 5,
+    name: 'Alex Rodriguez',
+    email: 'alex.rodriguez@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=5',
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/CardPopover"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
+        <CardPopover
+          :count="3"
+          title="Added Inboxes"
+          icon="i-lucide-inbox"
+          :items="mockItems.slice(0, 3)"
+          @fetch="() => console.log('Fetch triggered')"
+        />
+      </div>
+    </Variant>
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background flex gap-4 h-96 items-start">
+        <CardPopover
+          :count="3"
+          title="Added Agents"
+          icon="i-lucide-users-round"
+          :items="mockUsers.slice(0, 3)"
+          @fetch="() => console.log('Fetch triggered')"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,87 @@
+<script setup>
+import DataTable from '../DataTable.vue';
+
+const mockItems = [
+  {
+    id: 1,
+    name: 'Website Support',
+    email: 'support@company.com',
+    icon: 'i-lucide-globe',
+  },
+  {
+    id: 2,
+    name: 'Email Support',
+    email: 'help@company.com',
+    icon: 'i-lucide-mail',
+  },
+  {
+    id: 3,
+    name: 'WhatsApp Business',
+    phoneNumber: '+1 555-0123',
+    icon: 'i-lucide-message-circle',
+  },
+];
+
+const mockAgentList = [
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john.doe@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=1',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane.smith@example.com',
+    avatarUrl: 'https://i.pravatar.cc/150?img=2',
+  },
+];
+
+const handleDelete = itemId => {
+  console.log('Delete item:', itemId);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/DataTable"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With Data">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="mockItems"
+          :is-fetching="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With Agents">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="mockAgentList"
+          :is-fetching="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-8 bg-n-background">
+        <DataTable :items="[]" is-fetching @delete="handleDelete" />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="p-8 bg-n-background">
+        <DataTable
+          :items="[]"
+          :is-fetching="false"
+          empty-state-message="No items found"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,67 @@
+<script setup>
+import ExclusionRules from '../ExclusionRules.vue';
+import { ref } from 'vue';
+
+const mockTagsList = [
+  {
+    id: 1,
+    name: 'urgent',
+    color: '#ff4757',
+  },
+  {
+    id: 2,
+    name: 'bug',
+    color: '#ff6b6b',
+  },
+  {
+    id: 3,
+    name: 'feature-request',
+    color: '#4834d4',
+  },
+  {
+    id: 4,
+    name: 'documentation',
+    color: '#26de81',
+  },
+  {
+    id: 5,
+    name: 'enhancement',
+    color: '#2ed573',
+  },
+  {
+    id: 6,
+    name: 'question',
+    color: '#ffa502',
+  },
+  {
+    id: 7,
+    name: 'duplicate',
+    color: '#747d8c',
+  },
+  {
+    id: 8,
+    name: 'wontfix',
+    color: '#57606f',
+  },
+];
+
+const excludedLabelsBasic = ref([]);
+const excludeOlderThanHoursBasic = ref(10);
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/ExclusionRules"
+    :layout="{ type: 'grid', width: '1200px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background h-[600px]">
+        <ExclusionRules
+          v-model:excluded-labels="excludedLabelsBasic"
+          v-model:exclude-older-than-minutes="excludeOlderThanHoursBasic"
+          :tags-list="mockTagsList"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,25 @@
+<script setup>
+import { ref } from 'vue';
+import FairDistribution from '../FairDistribution.vue';
+
+const fairDistributionLimit = ref(100);
+const fairDistributionWindow = ref(3600);
+const windowUnit = ref('minutes');
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/FairDistribution"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background">
+        <FairDistribution
+          v-model:fair-distribution-limit="fairDistributionLimit"
+          v-model:fair-distribution-window="fairDistributionWindow"
+          v-model:window-unit="windowUnit"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,108 @@
+<script setup>
+import InboxCapacityLimits from '../InboxCapacityLimits.vue';
+import { ref } from 'vue';
+
+const mockInboxList = [
+  {
+    value: 1,
+    label: 'Website Support',
+    icon: 'i-lucide-globe',
+  },
+  {
+    value: 2,
+    label: 'Email Support',
+    icon: 'i-lucide-mail',
+  },
+  {
+    value: 3,
+    label: 'WhatsApp Business',
+    icon: 'i-lucide-message-circle',
+  },
+  {
+    value: 4,
+    label: 'Facebook Messenger',
+    icon: 'i-lucide-facebook',
+  },
+  {
+    value: 5,
+    label: 'Twitter DM',
+    icon: 'i-lucide-twitter',
+  },
+  {
+    value: 6,
+    label: 'Telegram',
+    icon: 'i-lucide-send',
+  },
+];
+
+const inboxCapacityLimitsEmpty = ref([]);
+const inboxCapacityLimitsNew = ref([
+  { id: 1, inboxId: 1, conversationLimit: 5 },
+  { inboxId: null, conversationLimit: null },
+]);
+
+const handleDelete = id => {
+  console.log('Delete capacity limit:', id);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/InboxCapacityLimits"
+    :layout="{ type: 'grid', width: '900px' }"
+  >
+    <Variant title="Empty State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          is-fetching
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="With New Row and existing data">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsNew"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Interactive Demo">
+      <div class="p-8 bg-n-background">
+        <InboxCapacityLimits
+          v-model:inbox-capacity-limits="inboxCapacityLimitsEmpty"
+          :inbox-list="mockInboxList"
+          :is-fetching="false"
+          :is-updating="false"
+          @delete="handleDelete"
+        />
+        <div class="mt-4 p-4 bg-n-alpha-2 rounded-lg">
+          <h4 class="text-sm font-medium mb-2">Current Limits:</h4>
+          <pre class="text-xs">{{
+            JSON.stringify(inboxCapacityLimitsEmpty, null, 2)
+          }}</pre>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,61 @@
+<script setup>
+import { ref } from 'vue';
+import RadioCard from '../RadioCard.vue';
+
+const selectedOption = ref('round_robin');
+
+const handleSelect = value => {
+  selectedOption.value = value;
+  console.log('Selected:', value);
+};
+</script>
+
+<template>
+  <Story
+    title="Components/AgentManagementPolicy/RadioCard"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Basic Usage">
+      <div class="p-8 bg-n-background space-y-4">
+        <RadioCard
+          id="round_robin"
+          label="Round Robin"
+          description="Distributes conversations evenly among all available agents in a rotating manner"
+          :is-active="selectedOption === 'round_robin'"
+          @select="handleSelect"
+        />
+        <RadioCard
+          id="balanced"
+          label="Balanced Assignment"
+          description="Assigns conversations based on agent workload to maintain balance"
+          :is-active="selectedOption === 'balanced'"
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Active State">
+      <div class="p-8 bg-n-background">
+        <RadioCard
+          id="active_option"
+          label="Active Option"
+          description="This option is currently selected and active"
+          is-active
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Inactive State">
+      <div class="p-8 bg-n-background">
+        <RadioCard
+          id="inactive_option"
+          label="Inactive Option"
+          description="This option is not selected and can be clicked to activate"
+          is-active
+          @select="handleSelect"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -86,8 +86,8 @@ const handleLabelAction = async ({ value }) => {
  }
 };

-const handleRemoveLabel = labelId => {
-  return handleLabelAction({ value: labelId });
+const handleRemoveLabel = label => {
+  return handleLabelAction({ value: label.id });
 };

 watch(
@@ -62,6 +62,7 @@ const segmentsQuery = ref({});

 const appliedFilters = useMapGetter('contacts/getAppliedContactFiltersV4');
 const contactAttributes = useMapGetter('attributes/getContactAttributes');
+const labels = useMapGetter('labels/getLabels');
 const hasActiveSegments = computed(
  () => props.activeSegment && props.segmentsId !== 0
 );
@@ -215,6 +216,7 @@ const setParamsForEditSegmentModal = () => {
    countries,
    filterTypes: contactFilterItems,
    allCustomAttributes: useSnakeCase(contactAttributes.value),
+    labels: labels.value || [],
  };
 };

@@ -15,7 +15,7 @@ const props = defineProps({
 const emit = defineEmits(['remove', 'hover']);

 const handleRemoveLabel = () => {
-  emit('remove', props.label?.id);
+  emit('remove', props.label);
 };

 const handleMouseEnter = () => {
@@ -45,6 +45,7 @@ const handleMouseEnter = () => {
      <Button
        class="transition-opacity duration-200 !h-7 ltr:rounded-r-md rtl:rounded-l-md ltr:rounded-l-none rtl:rounded-r-none w-6 bg-transparent"
        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+        type="button"
        slate
        xs
        faded
@@ -11,12 +11,14 @@ import { extractTextFromMarkdown } from 'dashboard/helper/editorHelper';

 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsAppOptions from './WhatsAppOptions.vue';
+import ContentTemplateSelector from './ContentTemplateSelector.vue';

 const props = defineProps({
  attachedFiles: { type: Array, default: () => [] },
  isWhatsappInbox: { type: Boolean, default: false },
  isEmailOrWebWidgetInbox: { type: Boolean, default: false },
  isTwilioSmsInbox: { type: Boolean, default: false },
+  isTwilioWhatsAppInbox: { type: Boolean, default: false },
  messageTemplates: { type: Array, default: () => [] },
  channelType: { type: String, default: '' },
  isLoading: { type: Boolean, default: false },
@@ -32,6 +34,7 @@ const emit = defineEmits([
  'discard',
  'sendMessage',
  'sendWhatsappMessage',
+  'sendTwilioMessage',
  'insertEmoji',
  'addSignature',
  'removeSignature',
@@ -63,6 +66,20 @@ const sendWithSignature = computed(() => {
  return fetchSignatureFlagFromUISettings(props.channelType);
 });

+const showTwilioContentTemplates = computed(() => {
+  return props.isTwilioWhatsAppInbox && props.inboxId;
+});
+
+const shouldShowEmojiButton = computed(() => {
+  return (
+    !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox && !props.hasNoInbox
+  );
+});
+
+const isRegularMessageMode = computed(() => {
+  return !props.isWhatsappInbox && !props.isTwilioWhatsAppInbox;
+});
+
 const setSignature = () => {
  if (signatureToApply.value) {
    if (sendWithSignature.value) {
@@ -125,7 +142,7 @@ const keyboardEvents = {
    action: () => {
      if (
        isEditorHotKeyEnabled('enter') &&
-        !props.isWhatsappInbox &&
+        isRegularMessageMode.value &&
        !props.isDropdownActive
      ) {
        emit('sendMessage');
@@ -136,7 +153,7 @@ const keyboardEvents = {
    action: () => {
      if (
        isEditorHotKeyEnabled('cmd_enter') &&
-        !props.isWhatsappInbox &&
+        isRegularMessageMode.value &&
        !props.isDropdownActive
      ) {
        emit('sendMessage');
@@ -158,8 +175,13 @@ useKeyboardEvents(keyboardEvents);
        :message-templates="messageTemplates"
        @send-message="emit('sendWhatsappMessage', $event)"
      />
+      <ContentTemplateSelector
+        v-if="showTwilioContentTemplates"
+        :inbox-id="inboxId"
+        @send-message="emit('sendTwilioMessage', $event)"
+      />
      <div
-        v-if="!isWhatsappInbox && !hasNoInbox"
+        v-if="shouldShowEmojiButton"
        v-on-click-outside="() => (isEmojiPickerOpen = false)"
        class="relative"
      >
@@ -172,7 +194,7 @@ useKeyboardEvents(keyboardEvents);
        />
        <EmojiInput
          v-if="isEmojiPickerOpen"
-          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
+          class="top-full mt-1.5 ltr:left-0 rtl:right-0"
          :on-click="onClickInsertEmoji"
        />
      </div>
@@ -199,7 +221,7 @@ useKeyboardEvents(keyboardEvents);
        />
      </FileUpload>
      <Button
-        v-if="hasSelectedInbox && !isWhatsappInbox"
+        v-if="hasSelectedInbox && isRegularMessageMode"
        icon="i-lucide-signature"
        color="slate"
        size="sm"
@@ -218,7 +240,7 @@ useKeyboardEvents(keyboardEvents);
        @click="emit('discard')"
      />
      <Button
-        v-if="!isWhatsappInbox"
+        v-if="isRegularMessageMode"
        :label="sendButtonLabel"
        size="sm"
        class="!text-xs font-medium"
@@ -74,6 +74,9 @@ const inboxTypes = computed(() => ({
  isTwilioSMS:
    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
    props.targetInbox?.medium === 'sms',
+  isTwilioWhatsapp:
+    props.targetInbox?.channelType === INBOX_TYPES.TWILIO &&
+    props.targetInbox?.medium === 'whatsapp',
 }));

 const whatsappMessageTemplates = computed(() =>
@@ -261,6 +264,28 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
    isFromWhatsApp: true,
  });
 };
+
+const handleSendTwilioMessage = async ({ message, templateParams }) => {
+  const twilioMessagePayload = prepareWhatsAppMessagePayload({
+    targetInbox: props.targetInbox,
+    selectedContact: props.selectedContact,
+    message,
+    templateParams,
+    currentUser: props.currentUser,
+  });
+  await emit('createConversation', {
+    payload: twilioMessagePayload,
+    isFromWhatsApp: true,
+  });
+};
+
+const shouldShowMessageEditor = computed(() => {
+  return (
+    !inboxTypes.value.isWhatsapp &&
+    !showNoInboxAlert.value &&
+    !inboxTypes.value.isTwilioWhatsapp
+  );
+});
 </script>

 <template>
@@ -311,7 +336,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
    />

    <MessageEditor
-      v-if="!inboxTypes.isWhatsapp && !showNoInboxAlert"
+      v-if="shouldShowMessageEditor"
      v-model="state.message"
      :message-signature="messageSignature"
      :send-with-signature="sendWithSignature"
@@ -331,6 +356,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
      :is-whatsapp-inbox="inboxTypes.isWhatsapp"
      :is-email-or-web-widget-inbox="inboxTypes.isEmailOrWebWidget"
      :is-twilio-sms-inbox="inboxTypes.isTwilioSMS"
+      :is-twilio-whats-app-inbox="inboxTypes.isTwilioWhatsapp"
      :message-templates="whatsappMessageTemplates"
      :channel-type="inboxChannelType"
      :is-loading="isCreating"
@@ -347,6 +373,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
      @discard="$emit('discard')"
      @send-message="handleSendMessage"
      @send-whatsapp-message="handleSendWhatsappMessage"
+      @send-twilio-message="handleSendTwilioMessage"
    />
  </div>
 </template>
@@ -0,0 +1,56 @@
+<script setup>
+import ContentTemplateParser from 'dashboard/components-next/content-templates/ContentTemplateParser.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">
+      <ContentTemplateParser
+        :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('CONTENT_TEMPLATES.FORM.BACK_BUTTON')"
+              color="slate"
+              variant="faded"
+              class="w-full font-medium"
+              @click="goBack"
+            />
+            <Button
+              :label="t('CONTENT_TEMPLATES.FORM.SEND_MESSAGE_BUTTON')"
+              class="w-full font-medium"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </ContentTemplateParser>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,124 @@
+<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 Input from 'dashboard/components-next/input/Input.vue';
+import ContentTemplateForm from './ContentTemplateForm.vue';
+
+const props = defineProps({
+  inboxId: {
+    type: Number,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['sendMessage']);
+
+const { t } = useI18n();
+const inbox = useMapGetter('inboxes/getInbox');
+
+const searchQuery = ref('');
+const selectedTemplate = ref(null);
+const showTemplatesMenu = ref(false);
+
+const contentTemplates = computed(() => {
+  const inboxData = inbox.value(props.inboxId);
+  return inboxData?.content_templates?.templates || [];
+});
+
+const filteredTemplates = computed(() => {
+  return contentTemplates.value.filter(
+    template =>
+      template.friendly_name
+        .toLowerCase()
+        .includes(searchQuery.value.toLowerCase()) &&
+      template.status === 'approved'
+  );
+});
+
+const handleTriggerClick = () => {
+  searchQuery.value = '';
+  showTemplatesMenu.value = !showTemplatesMenu.value;
+};
+
+const handleTemplateClick = template => {
+  selectedTemplate.value = template;
+  showTemplatesMenu.value = false;
+};
+
+const handleBack = () => {
+  selectedTemplate.value = null;
+  showTemplatesMenu.value = true;
+};
+
+const handleSendMessage = template => {
+  emit('sendMessage', template);
+  selectedTemplate.value = null;
+};
+</script>
+
+<template>
+  <div class="relative">
+    <Button
+      icon="i-ph-whatsapp-logo"
+      :label="t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.LABEL')"
+      color="slate"
+      size="sm"
+      :disabled="selectedTemplate"
+      class="!text-xs font-medium"
+      @click="handleTriggerClick"
+    />
+    <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"
+    >
+      <div class="w-full">
+        <Input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="
+            t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
+          "
+          custom-input-class="ltr:pl-10 rtl:pr-10"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
+      </div>
+      <div
+        v-for="template in filteredTemplates"
+        :key="template.content_sid"
+        tabindex="0"
+        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"
+        @click="handleTemplateClick(template)"
+      >
+        <div class="flex justify-between items-center">
+          <span class="text-sm text-n-slate-12">{{
+            template.friendly_name
+          }}</span>
+        </div>
+        <p class="mb-0 text-xs leading-5 text-n-slate-11 line-clamp-2">
+          {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
+        </p>
+      </div>
+      <template v-if="filteredTemplates.length === 0">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
+          {{ t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.EMPTY_STATE') }}
+        </p>
+      </template>
+    </div>
+    <ContentTemplateForm
+      v-if="selectedTemplate"
+      :template="selectedTemplate"
+      @send-message="handleSendMessage"
+      @back="handleBack"
+    />
+  </div>
+</template>
@@ -1,177 +0,0 @@
-<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 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"
-  >
-    <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="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
-        :title="key"
-      >
-        {{ 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>
@@ -25,7 +25,7 @@ export const generateLabelForContactableInboxesList = ({
    channelType === INBOX_TYPES.TWILIO ||
    channelType === INBOX_TYPES.WHATSAPP
  ) {
-    return `${name} (${phoneNumber})`;
+    return phoneNumber ? `${name} (${phoneNumber})` : name;
  }
  return name;
 };
@@ -53,6 +53,7 @@ const transformInbox = ({
  email,
  phoneNumber,
  channelType,
+  medium,
  ...rest,
 });

@@ -4,6 +4,10 @@ import { useToggle } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { dynamicTime } from 'shared/helpers/timeHelper';
 import { usePolicy } from 'dashboard/composables/usePolicy';
+import {
+  isPdfDocument,
+  formatDocumentLink,
+} from 'shared/helpers/documentHelper';

 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
@@ -63,6 +67,11 @@ const menuItems = computed(() => {

 const createdAt = computed(() => dynamicTime(props.createdAt));

+const displayLink = computed(() => formatDocumentLink(props.externalLink));
+const linkIcon = computed(() =>
+  isPdfDocument(props.externalLink) ? 'i-ph-file-pdf' : 'i-ph-link-simple'
+);
+
 const handleAction = ({ action, value }) => {
  toggleDropdown(false);
  emit('action', { action, value, id: props.id });
@@ -71,14 +80,14 @@ const handleAction = ({ action, value }) => {

 <template>
  <CardLayout>
-    <div class="flex justify-between w-full gap-1">
+    <div class="flex gap-1 justify-between w-full">
      <span class="text-base text-n-slate-12 line-clamp-1">
        {{ name }}
      </span>
-      <div class="flex items-center gap-2">
+      <div class="flex gap-2 items-center">
        <div
          v-on-clickaway="() => toggleDropdown(false)"
-          class="relative flex items-center group"
+          class="flex relative items-center group"
        >
          <Button
            icon="i-lucide-ellipsis-vertical"
@@ -90,26 +99,26 @@ const handleAction = ({ action, value }) => {
          <DropdownMenu
            v-if="showActionsDropdown"
            :menu-items="menuItems"
-            class="mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0 top-full"
+            class="top-full mt-1 ltr:right-0 rtl:left-0 xl:ltr:right-0 xl:rtl:left-0"
            @action="handleAction($event)"
          />
        </div>
      </div>
    </div>
-    <div class="flex items-center justify-between w-full gap-4">
+    <div class="flex gap-4 justify-between items-center w-full">
      <span
-        class="text-sm shrink-0 truncate text-n-slate-11 flex items-center gap-1"
+        class="flex gap-1 items-center text-sm truncate shrink-0 text-n-slate-11"
      >
        <i class="i-woot-captain" />
        {{ assistant?.name || '' }}
      </span>
      <span
-        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
+        class="flex flex-1 gap-1 justify-start items-center text-sm truncate text-n-slate-11"
      >
-        <i class="i-ph-link-simple shrink-0" />
-        <span class="truncate">{{ externalLink }}</span>
+        <i :class="linkIcon" class="shrink-0" />
+        <span class="truncate">{{ displayLink }}</span>
      </span>
-      <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
+      <div class="text-sm shrink-0 text-n-slate-11 line-clamp-1">
        {{ createdAt }}
      </div>
    </div>
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
+import { parseAPIErrorResponse } from 'dashboard/store/utils/api';

 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
@@ -12,7 +13,6 @@ const { t } = useI18n();
 const store = useStore();

 const dialogRef = ref(null);
-const documentForm = ref(null);

 const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';

@@ -23,7 +23,7 @@ const handleSubmit = async newDocument => {
    dialogRef.value.close();
  } catch (error) {
    const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+      parseAPIErrorResponse(error) || t(`${i18nKey}.ERROR_MESSAGE`);
    useAlert(errorMessage);
  }
 };
@@ -48,11 +48,7 @@ defineExpose({ dialogRef });
    :show-confirm-button="false"
    @close="handleClose"
  >
-    <DocumentForm
-      ref="documentForm"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
+    <DocumentForm @submit="handleSubmit" @cancel="handleCancel" />
    <template #footer />
  </Dialog>
 </template>
@@ -1,9 +1,10 @@
 <script setup>
-import { reactive, computed } from 'vue';
+import { reactive, computed, ref, nextTick } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, url } from '@vuelidate/validators';
+import { required, minLength, requiredIf, 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';
@@ -11,6 +12,8 @@ import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';

 const emit = defineEmits(['submit', 'cancel']);

+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
+
 const { t } = useI18n();

 const formState = {
@@ -20,14 +23,25 @@ const formState = {

 const initialState = {
  name: '',
+  url: '',
  assistantId: null,
+  documentType: 'url',
+  pdfFile: null,
 };

 const state = reactive({ ...initialState });
+const fileInputRef = ref(null);

 const validationRules = {
-  url: { required, url, minLength: minLength(1) },
+  url: {
+    required: requiredIf(() => state.documentType === 'url'),
+    url: requiredIf(() => state.documentType === 'url' && url),
+    minLength: requiredIf(() => state.documentType === 'url' && minLength(1)),
+  },
  assistantId: { required },
+  pdfFile: {
+    required: requiredIf(() => state.documentType === 'pdf'),
+  },
 };

 const assistantList = computed(() =>
@@ -37,10 +51,17 @@ const assistantList = computed(() =>
  }))
 );

+const documentTypeOptions = [
+  { value: 'url', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.URL') },
+  { value: 'pdf', label: t('CAPTAIN.DOCUMENTS.FORM.TYPE.PDF') },
+];
+
 const v$ = useVuelidate(validationRules, state);

 const isLoading = computed(() => formState.uiFlags.value.creatingItem);

+const hasPdfFileError = computed(() => v$.value.pdfFile.$error);
+
 const getErrorMessage = (field, errorKey) => {
  return v$.value[field].$error
    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
@@ -50,14 +71,57 @@ 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 prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
+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 > MAX_FILE_SIZE) {
+      // 10MB
+      useAlert(t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.TOO_LARGE'));
+      event.target.value = '';
+      return;
+    }
+    state.pdfFile = file;
+    state.name = file.name.replace(/\.pdf$/i, '');
+  }
+};
+
+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 handleSubmit = async () => {
  const isFormValid = await v$.value.$validate();
@@ -71,13 +135,89 @@ const handleSubmit = async () => {

 <template>
  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
+    <div class="flex flex-col gap-1">
+      <label
+        for="documentType"
+        class="mb-0.5 text-sm font-medium text-n-slate-12"
+      >
+        {{ t('CAPTAIN.DOCUMENTS.FORM.TYPE.LABEL') }}
+      </label>
+      <ComboBox
+        id="documentType"
+        v-model="state.documentType"
+        :options="documentTypeOptions"
+        class="[&>div>button]:bg-n-alpha-black2"
+      />
+    </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"
+          :color="hasPdfFileError ? 'ruby' : 'slate'"
+          :variant="hasPdfFileError ? 'outline' : 'solid'"
+          class="!w-full !h-auto !justify-between !py-4"
+          @click="openFileDialog"
+        >
+          <template #default>
+            <div class="flex gap-2 items-center">
+              <div
+                class="flex justify-center items-center w-10 h-10 rounded-lg bg-n-slate-3"
+              >
+                <i class="text-xl i-ph-file-pdf text-n-slate-11" />
+              </div>
+              <div class="flex flex-col flex-1 gap-1 items-start">
+                <p class="m-0 text-sm font-medium text-n-slate-12">
+                  {{
+                    state.pdfFile
+                      ? state.pdfFile.name
+                      : t('CAPTAIN.DOCUMENTS.FORM.PDF_FILE.CHOOSE_FILE')
+                  }}
+                </p>
+                <p class="m-0 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>
+            </div>
+
+            <i class="i-lucide-upload text-n-slate-11" />
+          </template>
+        </Button>
+      </div>
+      <p v-if="formErrors.pdfFile" class="text-xs text-n-ruby-9">
+        {{ 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') }}
@@ -88,12 +228,12 @@ const handleSubmit = async () => {
        :options="assistantList"
        :has-error="!!formErrors.assistantId"
        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
+        class="[&>div>button]:bg-n-alpha-black2"
        :message="formErrors.assistantId"
      />
    </div>

-    <div class="flex items-center justify-between w-full gap-3">
+    <div class="flex gap-3 justify-between items-center w-full">
      <Button
        type="button"
        variant="faded"
@@ -96,8 +96,12 @@ watch(
        :label="selectedLabel"
        trailing-icon
        :disabled="disabled"
-        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:outline-n-weak focus:outline-n-brand"
-        :class="{ focused: open }"
+        class="justify-between w-full !px-3 !py-2.5 text-n-slate-12 font-normal group-hover/combobox:border-n-slate-6 focus:outline-n-brand"
+        :class="{
+          focused: open,
+          '[&:not(.focused)]:dark:outline-n-weak [&:not(.focused)]:hover:enabled:outline-n-slate-6 [&:not(.focused)]:dark:hover:enabled:outline-n-slate-6':
+            !hasError,
+        }"
        :icon="open ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
        @click="toggleDropdown"
      />
@@ -0,0 +1,278 @@
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { useI18n } from 'vue-i18n';
+import { extractFilenameFromUrl } from 'dashboard/helper/URLHelper';
+import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    default: () => ({}),
+    validator: value => {
+      if (!value || typeof value !== 'object') return false;
+      if (!value.friendly_name) return false;
+      return true;
+    },
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
+
+const VARIABLE_PATTERN = /{{([^}]+)}}/g;
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const languageLabel = computed(() => {
+  return `${t('CONTENT_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || 'en'}`;
+});
+
+const categoryLabel = computed(() => {
+  return `${t('CONTENT_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || 'utility'}`;
+});
+
+const templateBody = computed(() => {
+  return props.template.body || '';
+});
+
+const hasMediaTemplate = computed(() => {
+  return props.template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA;
+});
+
+const hasVariables = computed(() => {
+  return templateBody.value?.match(VARIABLE_PATTERN) !== null;
+});
+
+const mediaVariableKey = computed(() => {
+  if (!hasMediaTemplate.value) return null;
+  const mediaUrl = props.template?.types?.['twilio/media']?.media?.[0];
+  if (!mediaUrl) return null;
+  return mediaUrl.match(/{{(\d+)}}/)?.[1] ?? null;
+});
+
+const hasMediaVariable = computed(() => {
+  return hasMediaTemplate.value && mediaVariableKey.value !== null;
+});
+
+const templateMediaUrl = computed(() => {
+  if (!hasMediaTemplate.value) return '';
+
+  return props.template?.types?.['twilio/media']?.media?.[0] || '';
+});
+
+const variablePattern = computed(() => {
+  if (!hasVariables.value) return [];
+  const matches = templateBody.value.match(VARIABLE_PATTERN) || [];
+  return matches.map(match => match.replace(/[{}]/g, ''));
+});
+
+const renderedTemplate = computed(() => {
+  let rendered = templateBody.value;
+  if (processedParams.value && Object.keys(processedParams.value).length > 0) {
+    // Replace variables in the format {{1}}, {{2}}, etc.
+    rendered = rendered.replace(VARIABLE_PATTERN, (match, variable) => {
+      const cleanVariable = variable.trim();
+      return processedParams.value[cleanVariable] || match;
+    });
+  }
+  return rendered;
+});
+
+const isFormInvalid = computed(() => {
+  if (!hasVariables.value && !hasMediaVariable.value) return false;
+
+  if (hasVariables.value) {
+    const hasEmptyVariable = variablePattern.value.some(
+      variable => !processedParams.value[variable]
+    );
+    if (hasEmptyVariable) return true;
+  }
+
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    !processedParams.value[mediaVariableKey.value]
+  ) {
+    return true;
+  }
+
+  return false;
+});
+
+const v$ = useVuelidate(
+  {
+    processedParams: {
+      requiredIfKeysPresent: requiredIf(
+        () => hasVariables.value || hasMediaVariable.value
+      ),
+    },
+  },
+  { processedParams }
+);
+
+const initializeTemplateParameters = () => {
+  processedParams.value = {};
+
+  if (hasVariables.value) {
+    variablePattern.value.forEach(variable => {
+      processedParams.value[variable] = '';
+    });
+  }
+
+  if (hasMediaVariable.value && mediaVariableKey.value) {
+    processedParams.value[mediaVariableKey.value] = '';
+  }
+};
+
+const sendMessage = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid || isFormInvalid.value) return;
+
+  const { friendly_name, language } = props.template;
+
+  // Process parameters and extract filename from media URL if needed
+  const processedParameters = { ...processedParams.value };
+
+  // For media templates, extract filename from full URL
+  if (
+    hasMediaVariable.value &&
+    mediaVariableKey.value &&
+    processedParameters[mediaVariableKey.value]
+  ) {
+    processedParameters[mediaVariableKey.value] = extractFilenameFromUrl(
+      processedParameters[mediaVariableKey.value]
+    );
+  }
+
+  const payload = {
+    message: renderedTemplate.value,
+    templateParams: {
+      name: friendly_name,
+      language,
+      processed_params: processedParameters,
+    },
+  };
+  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,
+  hasMediaTemplate,
+  renderedTemplate,
+  v$,
+  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.friendly_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 || hasMediaVariable">
+      <!-- Media URL for media templates -->
+      <div v-if="hasMediaVariable" class="mb-4">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ $t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_LABEL') }}
+        </p>
+        <div class="flex items-center mb-2.5">
+          <Input
+            v-model="processedParams[mediaVariableKey]"
+            type="url"
+            class="flex-1"
+            :placeholder="
+              templateMediaUrl ||
+              t('CONTENT_TEMPLATES.PARSER.MEDIA_URL_PLACEHOLDER')
+            "
+          />
+        </div>
+      </div>
+
+      <!-- Body Variables Section -->
+      <div v-if="hasVariables">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ $t('CONTENT_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+        </p>
+        <div
+          v-for="variable in variablePattern"
+          :key="`variable-${variable}`"
+          class="flex items-center mb-2.5"
+        >
+          <Input
+            v-model="processedParams[variable]"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('CONTENT_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
+                variable: variable,
+              })
+            "
+          />
+        </div>
+      </div>
+
+      <p
+        v-if="v$.$dirty && (v$.$invalid || isFormInvalid)"
+        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
+      >
+        {{ $t('CONTENT_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+
+    <slot
+      name="actions"
+      :send-message="sendMessage"
+      :reset-template="resetTemplate"
+      :go-back="goBack"
+      :is-valid="!v$.$invalid && !isFormInvalid"
+      :disabled="isFormInvalid"
+    />
+  </div>
+</template>
@@ -1,25 +1,49 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, nextTick, onMounted } from 'vue';

 const emit = defineEmits(['send']);
 const message = ref('');
+const textareaRef = ref(null);
+
+const adjustHeight = () => {
+  if (!textareaRef.value) return;
+
+  // Reset height to auto to get the correct scrollHeight
+  textareaRef.value.style.height = 'auto';
+  // Set the height to the scrollHeight
+  textareaRef.value.style.height = `${textareaRef.value.scrollHeight}px`;
+};

 const sendMessage = () => {
  if (message.value.trim()) {
    emit('send', message.value);
    message.value = '';
+    // Reset textarea height after sending
+    nextTick(() => {
+      adjustHeight();
+    });
  }
 };
+
+const handleInput = () => {
+  nextTick(adjustHeight);
+};
+
+onMounted(() => {
+  nextTick(adjustHeight);
+});
 </script>

 <template>
  <form class="relative" @submit.prevent="sendMessage">
-    <input
+    <textarea
+      ref="textareaRef"
      v-model="message"
-      type="text"
      :placeholder="$t('CAPTAIN.COPILOT.SEND_MESSAGE')"
-      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-n-slate-11 text-sm border border-n-weak rounded-lg focus:outline-none focus:ring-1 focus:ring-n-blue-11 focus:border-n-blue-11"
-      @keyup.enter="sendMessage"
+      class="w-full reset-base bg-n-alpha-3 ltr:pl-4 ltr:pr-12 rtl:pl-12 rtl:pr-4 py-3 text-sm border border-n-weak rounded-lg focus:outline-0 focus:outline-none focus:ring-2 focus:ring-n-blue-11 focus:border-n-blue-11 resize-none overflow-hidden max-h-[200px] mb-0 text-n-slate-12"
+      rows="1"
+      @input="handleInput"
+      @keydown.enter.exact.prevent="sendMessage"
    />
    <button
      class="absolute ltr:right-1 rtl:left-1 top-1/2 -translate-y-1/2 h-9 w-10 flex items-center justify-center text-n-slate-11 hover:text-n-blue-11"
@@ -15,7 +15,7 @@ defineProps({
    >
      {{ title }}
    </div>
-    <ul class="gap-2 grid reset-base list-none px-2">
+    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
      <slot />
    </ul>
  </div>
@@ -34,14 +34,17 @@ const formatOperatorLabel = operator => {
 };

 const formatFilterValue = value => {
+  // Case 1: null, undefined, empty string
  if (!value) return '';
+
+  // Case 2: array → map each item, use name if present, else the item itself
  if (Array.isArray(value)) {
-    return value.join(', ');
+    return value.map(item => item?.name ?? item).join(', ');
  }
-  if (typeof value === 'object' && value.name) {
-    return value.name;
-  }
-  return value;
+
+  // Case 3: object with a "name" property → return name
+  // Case 4: primitive (string, number, etc.) → return as is
+  return value?.name ?? value;
 };
 </script>

@@ -66,6 +69,7 @@ const formatFilterValue = value => {
          </span>
          <span
            v-if="filter.values"
+            :title="formatFilterValue(filter.values)"
            class="lowercase truncate text-n-slate-12"
            :class="{
              'first-letter:capitalize': shouldCapitalizeFirstLetter(
@@ -103,6 +103,12 @@ const validationError = computed(() => {
  );
 });

+const inputFieldType = computed(() => {
+  if (inputType.value === 'date') return 'date';
+  if (inputType.value === 'number') return 'number';
+  return 'text';
+});
+
 const resetModelOnAttributeKeyChange = newAttributeKey => {
  /**
   * Resets the filter values and operator when the attribute key changes. This ensures that
@@ -182,7 +188,7 @@ defineExpose({ validate });
        <Input
          v-else
          v-model="values"
-          :type="inputType === 'date' ? 'date' : 'text'"
+          :type="inputFieldType"
          class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
        />
@@ -50,6 +50,7 @@ export function useContactFilterContext() {
  const { t } = useI18n();

  const contactAttributes = useMapGetter('attributes/getContactAttributes');
+  const labels = useMapGetter('labels/getLabels');

  const {
    equalityOperators,
@@ -184,6 +185,20 @@ export function useContactFilterContext() {
      filterOperators: equalityOperators.value,
      attributeModel: 'standard',
    },
+    {
+      attributeKey: CONTACT_ATTRIBUTES.LABELS,
+      value: CONTACT_ATTRIBUTES.LABELS,
+      attributeName: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
+      label: t('CONTACTS_FILTER.ATTRIBUTES.LABELS'),
+      inputType: 'multiSelect',
+      options: labels.value?.map(label => ({
+        id: label.title,
+        name: label.title,
+      })),
+      dataType: 'text',
+      filterOperators: equalityOperators.value,
+      attributeModel: 'standard',
+    },
    ...customFilterTypes.value,
  ]);

@@ -28,6 +28,7 @@ export const CONTACT_ATTRIBUTES = {
  LAST_ACTIVITY_AT: 'last_activity_at',
  REFERER: 'referer',
  BLOCKED: 'blocked',
+  LABELS: 'labels',
 };

 /**
@@ -164,8 +164,8 @@ export function useConversationFilterContext() {
      value: CONVERSATION_ATTRIBUTES.DISPLAY_ID,
      attributeName: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
      label: t('FILTER.ATTRIBUTES.CONVERSATION_IDENTIFIER'),
-      inputType: 'plainText',
-      datatype: 'number',
+      inputType: 'number',
+      dataType: 'number',
      filterOperators: containmentOperators.value,
      attributeModel: 'standard',
    },
@@ -179,7 +179,7 @@ export function useConversationFilterContext() {
        id: campaign.id,
        name: campaign.title,
      })),
-      datatype: 'number',
+      dataType: 'number',
      filterOperators: presenceOperators.value,
      attributeModel: 'standard',
    },
@@ -2,23 +2,23 @@ import { computed } from 'vue';

 export function useChannelIcon(inbox) {
  const channelTypeIconMap = {
-    'Channel::Api': 'i-ri-cloudy-fill',
-    'Channel::Email': 'i-ri-mail-fill',
-    'Channel::FacebookPage': 'i-ri-messenger-fill',
-    'Channel::Line': 'i-ri-line-fill',
-    'Channel::Sms': 'i-ri-chat-1-fill',
-    'Channel::Telegram': 'i-ri-telegram-fill',
-    'Channel::TwilioSms': 'i-ri-chat-1-fill',
+    'Channel::Api': 'i-woot-api',
+    'Channel::Email': 'i-woot-mail',
+    'Channel::FacebookPage': 'i-woot-messenger',
+    'Channel::Line': 'i-woot-line',
+    'Channel::Sms': 'i-woot-sms',
+    'Channel::Telegram': 'i-woot-telegram',
+    'Channel::TwilioSms': 'i-woot-sms',
    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
-    'Channel::WebWidget': 'i-ri-global-fill',
-    'Channel::Whatsapp': 'i-ri-whatsapp-fill',
-    'Channel::Instagram': 'i-ri-instagram-fill',
+    'Channel::WebWidget': 'i-woot-website',
+    'Channel::Whatsapp': 'i-woot-whatsapp',
+    'Channel::Instagram': 'i-woot-instagram',
    'Channel::Voice': 'i-ri-phone-fill',
  };

  const providerIconMap = {
-    microsoft: 'i-ri-microsoft-fill',
-    google: 'i-ri-google-fill',
+    microsoft: 'i-woot-outlook',
+    google: 'i-woot-gmail',
  };

  const channelIcon = computed(() => {
@@ -34,7 +34,7 @@ export function useChannelIcon(inbox) {

    // Special case for Twilio whatsapp
    if (type === 'Channel::TwilioSms' && inboxDetails.medium === 'whatsapp') {
-      icon = 'i-ri-whatsapp-fill';
+      icon = 'i-woot-whatsapp';
    }

    return icon ?? 'i-ri-global-fill';
@@ -4,19 +4,19 @@ describe('useChannelIcon', () => {
  it('returns correct icon for API channel', () => {
    const inbox = { channel_type: 'Channel::Api' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-cloudy-fill');
+    expect(icon).toBe('i-woot-api');
  });

  it('returns correct icon for Facebook channel', () => {
    const inbox = { channel_type: 'Channel::FacebookPage' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-messenger-fill');
+    expect(icon).toBe('i-woot-messenger');
  });

  it('returns correct icon for WhatsApp channel', () => {
    const inbox = { channel_type: 'Channel::Whatsapp' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-whatsapp-fill');
+    expect(icon).toBe('i-woot-whatsapp');
  });

  it('returns correct icon for Voice channel', () => {
@@ -28,19 +28,19 @@ describe('useChannelIcon', () => {
  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');
+    expect(icon).toBe('i-woot-line');
  });

  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');
+    expect(icon).toBe('i-woot-sms');
  });

  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');
+    expect(icon).toBe('i-woot-telegram');
  });

  it('returns correct icon for Twitter channel', () => {
@@ -52,20 +52,20 @@ describe('useChannelIcon', () => {
  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');
+    expect(icon).toBe('i-woot-website');
  });

  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');
+    expect(icon).toBe('i-woot-instagram');
  });

  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');
+      expect(icon).toBe('i-woot-sms');
    });

    it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
@@ -74,7 +74,7 @@ describe('useChannelIcon', () => {
        medium: 'whatsapp',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-whatsapp-fill');
+      expect(icon).toBe('i-woot-whatsapp');
    });

    it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
@@ -83,7 +83,7 @@ describe('useChannelIcon', () => {
        medium: 'sms',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
    });

    it('returns chat icon for Twilio SMS with undefined medium', () => {
@@ -92,7 +92,7 @@ describe('useChannelIcon', () => {
        medium: undefined,
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-chat-1-fill');
+      expect(icon).toBe('i-woot-sms');
    });
  });

@@ -100,7 +100,7 @@ describe('useChannelIcon', () => {
    it('returns mail icon for generic email channel', () => {
      const inbox = { channel_type: 'Channel::Email' };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-mail-fill');
+      expect(icon).toBe('i-woot-mail');
    });

    it('returns Microsoft icon for Microsoft email provider', () => {
@@ -109,7 +109,7 @@ describe('useChannelIcon', () => {
        provider: 'microsoft',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-microsoft-fill');
+      expect(icon).toBe('i-woot-outlook');
    });

    it('returns Google icon for Google email provider', () => {
@@ -118,7 +118,7 @@ describe('useChannelIcon', () => {
        provider: 'google',
      };
      const { value: icon } = useChannelIcon(inbox);
-      expect(icon).toBe('i-ri-google-fill');
+      expect(icon).toBe('i-woot-gmail');
    });
  });

@@ -78,6 +78,8 @@ watch(unit, () => {
    <option :value="DURATION_UNITS.HOURS">
      {{ t('DURATION_INPUT.HOURS') }}
    </option>
-    <option :value="DURATION_UNITS.DAYS">{{ t('DURATION_INPUT.DAYS') }}</option>
+    <option :value="DURATION_UNITS.DAYS">
+      {{ t('DURATION_INPUT.DAYS') }}
+    </option>
  </select>
 </template>
@@ -15,6 +15,7 @@ const props = defineProps({
    validator: value => ['info', 'error', 'success'].includes(value),
  },
  min: { type: String, default: '' },
+  max: { type: String, default: '' },
  autofocus: { type: Boolean, default: false },
 });

@@ -54,7 +55,12 @@ const inputOutlineClass = computed(() => {
 });

 const handleInput = event => {
-  emit('update:modelValue', event.target.value);
+  let value = event.target.value;
+  // Convert to number if type is number and value is not empty
+  if (props.type === 'number' && value !== '') {
+    value = Number(value);
+  }
+  emit('update:modelValue', value);
  emit('input', event);
 };

@@ -108,7 +114,12 @@ onMounted(() => {
      :placeholder="placeholder"
      :disabled="disabled"
      :min="['date', 'datetime-local', 'time'].includes(type) ? min : undefined"
-      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out"
+      :max="
+        ['date', 'datetime-local', 'time', 'number'].includes(type)
+          ? max
+          : undefined
+      "
+      class="block w-full reset-base text-sm h-10 !px-3 !py-2.5 !mb-0 outline outline-1 border-none border-0 outline-offset-[-1px] rounded-lg bg-n-alpha-black2 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 disabled:cursor-not-allowed disabled:opacity-50 text-n-slate-12 transition-all duration-500 ease-in-out [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
@@ -36,6 +36,7 @@ import DyteBubble from './bubbles/Dyte.vue';
 import LocationBubble from './bubbles/Location.vue';
 import CSATBubble from './bubbles/CSAT.vue';
 import FormBubble from './bubbles/Form.vue';
+import VoiceCallBubble from './bubbles/VoiceCall.vue';

 import MessageError from './MessageError.vue';
 import ContextMenu from 'dashboard/modules/conversations/components/MessageContextMenu.vue';
@@ -280,6 +281,10 @@ const componentToRender = computed(() => {
    return FormBubble;
  }

+  if (props.contentType === CONTENT_TYPES.VOICE_CALL) {
+    return VoiceCallBubble;
+  }
+
  if (props.contentType === CONTENT_TYPES.INCOMING_EMAIL) {
    return EmailBubble;
  }
@@ -10,6 +10,10 @@ import { useI18n } from 'vue-i18n';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import { MESSAGE_VARIANTS, ORIENTATION } from '../constants';

+const props = defineProps({
+  hideMeta: { type: Boolean, default: false },
+});
+
 const { variant, orientation, inReplyTo, shouldGroupWithNext } =
  useMessageContext();
 const { t } = useI18n();
@@ -64,6 +68,13 @@ const scrollToMessage = () => {
  });
 };

+const shouldShowMeta = computed(
+  () =>
+    !props.hideMeta &&
+    !shouldGroupWithNext.value &&
+    variant.value !== MESSAGE_VARIANTS.ACTIVITY
+);
+
 const replyToPreview = computed(() => {
  if (!inReplyTo) return '';

@@ -93,16 +104,16 @@ const replyToPreview = computed(() => {
  >
    <div
      v-if="inReplyTo"
-      class="bg-n-alpha-black1 rounded-lg p-2 -mx-1 mb-2 cursor-pointer"
+      class="p-2 -mx-1 mb-2 rounded-lg cursor-pointer bg-n-alpha-black1"
      @click="scrollToMessage"
    >
-      <span class="line-clamp-2 break-all">
+      <span class="break-all line-clamp-2">
        {{ replyToPreview }}
      </span>
    </div>
    <slot />
    <MessageMeta
-      v-if="!shouldGroupWithNext && variant !== MESSAGE_VARIANTS.ACTIVITY"
+      v-if="shouldShowMeta"
      :class="[
        flexOrientationClass,
        variant === MESSAGE_VARIANTS.EMAIL ? 'px-3 pb-3' : '',
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, useTemplateRef, ref, onMounted } from 'vue';
 import { Letter } from 'vue-letter';
+import { sanitizeTextForRender } from '@chatwoot/utils';
 import { allowedCssProperties } from 'lettersanitizer';

 import Icon from 'next/icon/Icon.vue';
@@ -37,12 +38,12 @@ const { hasTranslations, translationContent } =
 const originalEmailText = computed(() => {
  const text =
    contentAttributes?.value?.email?.textContent?.full ?? content.value;
-  return text?.replace(/\n/g, '<br>');
+  return sanitizeTextForRender(text);
 });

 const originalEmailHtml = computed(
  () =>
-    contentAttributes?.value?.email?.htmlContent?.full ??
+    contentAttributes?.value?.email?.htmlContent?.full ||
    originalEmailText.value
 );

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from 'vue';
+import BaseBubble from 'next/message/bubbles/Base.vue';
+import { useMessageContext } from '../provider.js';
+import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
+
+const { contentAttributes } = useMessageContext();
+
+const data = computed(() => contentAttributes.value?.data);
+
+const status = computed(() => data.value?.status);
+const direction = computed(() => data.value?.call_direction);
+
+const { labelKey, subtextKey, bubbleIconBg, bubbleIconName } =
+  useVoiceCallStatus(status, direction);
+
+const containerRingClass = computed(() => {
+  return status.value === 'ringing' ? 'ring-1 ring-emerald-300' : '';
+});
+</script>
+
+<template>
+  <BaseBubble class="p-0 border-none" hide-meta>
+    <div
+      class="flex overflow-hidden flex-col w-full max-w-xs bg-white rounded-lg border border-slate-100 text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100"
+      :class="containerRingClass"
+    >
+      <div class="flex gap-3 items-center p-3 w-full">
+        <div
+          class="flex justify-center items-center rounded-full size-10 shrink-0"
+          :class="bubbleIconBg"
+        >
+          <span class="text-xl" :class="bubbleIconName" />
+        </div>
+
+        <div class="flex overflow-hidden flex-col flex-grow">
+          <span class="text-base font-medium truncate">{{ $t(labelKey) }}</span>
+          <span class="text-xs text-slate-500">{{ $t(subtextKey) }}</span>
+        </div>
+      </div>
+    </div>
+  </BaseBubble>
+</template>
@@ -64,6 +64,7 @@ export const CONTENT_TYPES = {
  INPUT_CSAT: 'input_csat',
  INTEGRATIONS: 'integrations',
  STICKER: 'sticker',
+  VOICE_CALL: 'voice_call',
 };

 export const MEDIA_TYPES = [
@@ -25,7 +25,7 @@ const reauthorizationRequired = computed(() => {

 <template>
  <span
-    class="size-4 grid place-content-center rounded-full bg-n-alpha-2"
+    class="size-5 grid place-content-center rounded-full bg-n-alpha-2"
    :class="{ 'bg-n-solid-blue': active }"
  >
    <ChannelIcon :inbox="inbox" class="size-3" />
@@ -128,7 +128,7 @@ const menuItems = computed(() => {
      to: accountScopedRoute('inbox_view'),
      activeOn: ['inbox_view', 'inbox_view_conversation'],
      getterKeys: {
-        badge: 'notifications/getHasUnreadNotifications',
+        count: 'notifications/getUnreadCount',
      },
    },
    {
@@ -422,6 +422,12 @@ const menuItems = computed(() => {
          icon: 'i-lucide-users',
          to: accountScopedRoute('settings_teams_list'),
        },
+        {
+          name: 'Settings Agent Assignment',
+          label: t('SIDEBAR.AGENT_ASSIGNMENT'),
+          icon: 'i-lucide-user-cog',
+          to: accountScopedRoute('assignment_policy_index'),
+        },
        {
          name: 'Settings Inboxes',
          label: t('SIDEBAR.INBOXES'),
@@ -488,6 +494,12 @@ const menuItems = computed(() => {
          icon: 'i-lucide-clock-alert',
          to: accountScopedRoute('sla_list'),
        },
+        {
+          name: 'Settings Security',
+          label: t('SIDEBAR.SECURITY'),
+          icon: 'i-lucide-shield',
+          to: accountScopedRoute('security_settings_index'),
+        },
        {
          name: 'Settings Billing',
          label: t('SIDEBAR.BILLING'),
@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store.js';
 import Icon from 'next/icon/Icon.vue';

@@ -16,12 +17,16 @@ const props = defineProps({
 const emit = defineEmits(['toggle']);

 const showBadge = useMapGetter(props.getterKeys.badge);
+const dynamicCount = useMapGetter(props.getterKeys.count);
+const count = computed(() =>
+  dynamicCount.value > 99 ? '99+' : dynamicCount.value
+);
 </script>

 <template>
  <component
    :is="to ? 'router-link' : 'div'"
-    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8"
+    class="flex items-center gap-2 px-2 py-1.5 rounded-lg h-8 min-w-0"
    role="button"
    draggable="false"
    :to="to"
@@ -40,9 +45,21 @@ const showBadge = useMapGetter(props.getterKeys.badge);
        class="size-2 -top-px ltr:-right-px rtl:-left-px bg-n-brand absolute rounded-full border border-n-solid-2"
      />
    </div>
-    <span class="text-sm font-medium leading-5 flex-grow">
-      {{ label }}
-    </span>
+    <div class="flex items-center gap-1.5 flex-grow min-w-0">
+      <span class="text-sm font-medium leading-5 truncate">
+        {{ label }}
+      </span>
+      <span
+        v-if="dynamicCount && !expandable"
+        class="rounded-md capitalize text-xs leading-5 font-medium text-center outline outline-1 px-1 flex-shrink-0"
+        :class="{
+          'text-n-blue-text outline-n-slate-6': isActive,
+          'text-n-slate-11 outline-n-strong': !isActive,
+        }"
+      >
+        {{ count }}
+      </span>
+    </div>
    <span
      v-if="expandable"
      v-show="isExpanded"
@@ -1,4 +1,13 @@
 <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';
@@ -1,50 +1,57 @@
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true,
-    },
-    src: {
-      type: String,
-      required: true,
-    },
-    isComingSoon: {
-      type: Boolean,
-      default: false,
-    },
+<script setup>
+import Icon from 'next/icon/Icon.vue';
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
  },
-};
+  description: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    required: true,
+  },
+  isComingSoon: {
+    type: Boolean,
+    default: false,
+  },
+});
 </script>

 <template>
  <button
-    class="relative bg-n-background cursor-pointer flex flex-col justify-end transition-all duration-200 ease-in -m-px py-4 px-0 items-center border border-solid border-n-weak hover:border-n-brand hover:shadow-md hover:z-50 disabled:opacity-60"
+    class="relative bg-n-solid-1 gap-6 cursor-pointer rounded-2xl flex flex-col justify-start transition-all duration-200 ease-in -m-px py-6 px-5 items-start border border-solid border-n-weak"
+    :class="{
+      'hover:enabled:border-n-blue-9 hover:enabled:shadow-md disabled:opacity-60 disabled:cursor-not-allowed':
+        !isComingSoon,
+      'cursor-not-allowed disabled:opacity-80': isComingSoon,
+    }"
  >
-    <img :src="src" :alt="title" draggable="false" class="w-1/2 my-4 mx-auto" />
-    <h3 class="text-n-slate-12 text-base text-center capitalize">
-      {{ title }}
-    </h3>
+    <div
+      class="flex size-10 items-center justify-center rounded-full bg-n-alpha-2"
+    >
+      <Icon :icon="icon" class="text-n-slate-10 size-6" />
+    </div>
+
+    <div class="flex flex-col items-start gap-1.5">
+      <h3 class="text-n-slate-12 text-sm text-start font-medium capitalize">
+        {{ title }}
+      </h3>
+      <p class="text-n-slate-11 text-start text-sm">
+        {{ description }}
+      </p>
+    </div>

    <div
      v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-md bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
    >
-      <span class="text-n-slate-12 font-medium text-base">
+      <span class="text-n-slate-12 font-medium text-sm">
        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
      </span>
    </div>
  </button>
 </template>
-
-<style scoped lang="scss">
-.inactive {
-  img {
-    filter: grayscale(100%);
-  }
-
-  &:hover {
-    @apply border-n-strong shadow-none cursor-not-allowed;
-  }
-}
-</style>
@@ -1,5 +1,6 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue';
+import { useAlert } from 'dashboard/composables';
 import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -100,20 +101,24 @@ const handleReset = () => {
 };

 const sendMessage = async message => {
-  if (selectedCopilotThreadId.value) {
-    await store.dispatch('copilotMessages/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      threadId: selectedCopilotThreadId.value,
-      message,
-    });
-  } else {
-    const response = await store.dispatch('copilotThreads/create', {
-      assistant_id: activeAssistant.value.id,
-      conversation_id: currentChat.value?.id,
-      message,
-    });
-    selectedCopilotThreadId.value = response.id;
+  try {
+    if (selectedCopilotThreadId.value) {
+      await store.dispatch('copilotMessages/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        threadId: selectedCopilotThreadId.value,
+        message,
+      });
+    } else {
+      const response = await store.dispatch('copilotThreads/create', {
+        assistant_id: activeAssistant.value.id,
+        conversation_id: currentChat.value?.id,
+        message,
+      });
+      selectedCopilotThreadId.value = response.id;
+    }
+  } catch (error) {
+    useAlert(error.message);
  }
 };

@@ -1,97 +1,81 @@
-<script>
-export default {
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Icon from 'next/icon/Icon.vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
  },
-  computed: {
-    classObject() {
-      return 'w-full';
-    },
-    activeIndex() {
-      return this.items.findIndex(i => i.route === this.$route.name);
-    },
-  },
-  methods: {
-    isActive(item) {
-      return this.items.indexOf(item) === this.activeIndex;
-    },
-    isOver(item) {
-      return this.items.indexOf(item) < this.activeIndex;
-    },
-  },
-};
+});
+
+const route = useRoute();
+
+const activeIndex = computed(() => {
+  const index = props.items.findIndex(i => i.route === route.name);
+  return index === -1 ? 0 : index;
+});
+
+const steps = computed(() =>
+  props.items.map((item, index) => {
+    const isActive = index === activeIndex.value;
+    const isOver = index < activeIndex.value;
+    return {
+      ...item,
+      index,
+      isActive,
+      isOver,
+    };
+  })
+);
 </script>

 <template>
-  <transition-group
-    name="wizard-items"
-    tag="div"
-    class="wizard-box"
-    :class="classObject"
-  >
+  <transition-group tag="div">
    <div
-      v-for="item in items"
-      :key="item.route"
-      class="item"
-      :class="{ active: isActive(item), over: isOver(item) }"
+      v-for="step in steps"
+      :key="step.route"
+      class="cursor-pointer flex items-start gap-6 relative after:content-[''] after:absolute after:w-0.5 after:h-full after:top-5 ltr:after:left-4 rtl:after:right-4 before:content-[''] before:absolute before:w-0.5 before:h-4 before:top-0 before:left-4 rtl:before:right-4 last:after:hidden last:before:hidden after:bg-n-slate-3 before:bg-n-slate-3"
    >
-      <div class="flex items-center">
-        <h3
-          class="text-n-slate-12 text-base font-medium pl-6 overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
+      <!-- Circle -->
+      <div
+        class="rounded-2xl flex-shrink-0 size-8 border-2 border-n-slate-3 flex items-center justify-center left-2 leading-4 z-10 top-5 transition-all duration-300 ease-in-out"
+        :class="{
+          'bg-n-slate-3': step.isActive || step.isOver,
+          'bg-n-background': !step.isActive && !step.isOver,
+        }"
+      >
+        <span
+          v-if="!step.isOver"
+          :key="'num-' + step.index"
+          class="text-xs font-bold transition-colors duration-300"
+          :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-11'"
        >
-          {{ item.title }}
-        </h3>
-        <span v-if="isOver(item)" class="mx-1 mt-0.5 text-n-teal-9">
-          <fluent-icon icon="checkmark" />
+          {{ step.index + 1 }}
        </span>
+        <Icon
+          v-else
+          :key="'check-' + step.index"
+          icon="i-lucide-check"
+          class="text-n-slate-11 size-4"
+        />
+      </div>
+
+      <!-- Content -->
+      <div class="flex flex-col items-start gap-1.5 pb-10 pt-1">
+        <div class="flex items-center">
+          <h3
+            class="text-sm font-medium overflow-hidden whitespace-nowrap mt-0.5 text-ellipsis leading-tight"
+            :class="step.isActive ? 'text-n-blue-11' : 'text-n-slate-12'"
+          >
+            {{ step.title }}
+          </h3>
+        </div>
+        <p class="m-0 mt-1.5 text-sm text-n-slate-11">
+          {{ step.body }}
+        </p>
      </div>
-      <span class="step">
-        {{ items.indexOf(item) + 1 }}
-      </span>
-      <p class="pl-6 m-0 mt-1.5 text-sm text-n-slate-11">
-        {{ item.body }}
-      </p>
    </div>
  </transition-group>
 </template>
-
-<style lang="scss" scoped>
-.wizard-box {
-  .item {
-    @apply cursor-pointer after:bg-n-slate-6 before:bg-n-slate-6 py-4 ltr:pr-4 rtl:pl-4 ltr:pl-6 rtl:pr-6 relative before:h-4 before:top-0 last:before:h-0 first:before:h-0 last:after:h-0 before:content-[''] before:absolute before:w-0.5 after:content-[''] after:h-full after:absolute after:top-5 after:w-0.5 rtl:after:left-6 rtl:before:left-6;
-
-    &.active {
-      h3 {
-        @apply text-n-blue-text dark:text-n-blue-text;
-      }
-
-      .step {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-    }
-
-    &.over {
-      &::after {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-
-      .step {
-        @apply bg-n-brand dark:bg-n-brand;
-      }
-
-      & + .item {
-        &::before {
-          @apply bg-n-brand dark:bg-n-brand;
-        }
-      }
-    }
-
-    .step {
-      @apply bg-n-slate-7 rounded-2xl font-medium w-4 left-4 leading-4 z-10 absolute text-center text-white dark:text-white text-xxs top-5;
-    }
-  }
-}
-</style>
@@ -1,91 +1,87 @@
-<script>
+<script setup>
+import { computed } from 'vue';
 import ChannelSelector from '../ChannelSelector.vue';
-export default {
-  components: { ChannelSelector },
-  props: {
-    channel: {
-      type: Object,
-      required: true,
-    },
-    enabledFeatures: {
-      type: Object,
-      required: true,
-    },
-  },
-  emits: ['channelItemClick'],
-  computed: {
-    hasFbConfigured() {
-      return window.chatwootConfig?.fbAppId;
-    },
-    hasInstagramConfigured() {
-      return window.chatwootConfig?.instagramAppId;
-    },
-    isActive() {
-      const { key } = this.channel;
-      if (Object.keys(this.enabledFeatures).length === 0) {
-        return false;
-      }
-      if (key === 'website') {
-        return this.enabledFeatures.channel_website;
-      }
-      if (key === 'facebook') {
-        return this.enabledFeatures.channel_facebook && this.hasFbConfigured;
-      }
-      if (key === 'email') {
-        return this.enabledFeatures.channel_email;
-      }

-      if (key === 'instagram') {
-        return (
-          this.enabledFeatures.channel_instagram && this.hasInstagramConfigured
-        );
-      }
-
-      if (key === 'voice') {
-        return this.enabledFeatures.channel_voice;
-      }
-
-      return [
-        'website',
-        'twilio',
-        'api',
-        'whatsapp',
-        'sms',
-        'telegram',
-        'line',
-        'instagram',
-        'voice',
-      ].includes(key);
-    },
-    isComingSoon() {
-      const { key } = this.channel;
-      // Show "Coming Soon" only if the channel is marked as coming soon
-      // and the corresponding feature flag is not enabled yet.
-      return ['voice'].includes(key) && !this.isActive;
-    },
+const props = defineProps({
+  channel: {
+    type: Object,
+    required: true,
  },
-  methods: {
-    getChannelThumbnail() {
-      if (this.channel.key === 'api' && this.channel.thumbnail) {
-        return this.channel.thumbnail;
-      }
-      return `/assets/images/dashboard/channels/${this.channel.key}.png`;
-    },
-    onItemClick() {
-      if (this.isActive) {
-        this.$emit('channelItemClick', this.channel.key);
-      }
-    },
+  enabledFeatures: {
+    type: Object,
+    required: true,
  },
+});
+
+const emit = defineEmits(['channelItemClick']);
+
+const hasFbConfigured = computed(() => {
+  return window.chatwootConfig?.fbAppId;
+});
+
+const hasInstagramConfigured = computed(() => {
+  return window.chatwootConfig?.instagramAppId;
+});
+
+const isActive = computed(() => {
+  const { key } = props.channel;
+  if (Object.keys(props.enabledFeatures).length === 0) {
+    return false;
+  }
+  if (key === 'website') {
+    return props.enabledFeatures.channel_website;
+  }
+  if (key === 'facebook') {
+    return props.enabledFeatures.channel_facebook && hasFbConfigured.value;
+  }
+  if (key === 'email') {
+    return props.enabledFeatures.channel_email;
+  }
+
+  if (key === 'instagram') {
+    return (
+      props.enabledFeatures.channel_instagram && hasInstagramConfigured.value
+    );
+  }
+
+  if (key === 'voice') {
+    return props.enabledFeatures.channel_voice;
+  }
+
+  return [
+    'website',
+    'twilio',
+    'api',
+    'whatsapp',
+    'sms',
+    'telegram',
+    'line',
+    'instagram',
+    'voice',
+  ].includes(key);
+});
+
+const isComingSoon = computed(() => {
+  const { key } = props.channel;
+  // Show "Coming Soon" only if the channel is marked as coming soon
+  // and the corresponding feature flag is not enabled yet.
+  return ['voice'].includes(key) && !isActive.value;
+});
+
+const onItemClick = () => {
+  if (isActive.value) {
+    emit('channelItemClick', props.channel.key);
+  }
 };
 </script>

 <template>
  <ChannelSelector
-    :class="{ inactive: !isActive }"
-    :title="channel.name"
-    :src="getChannelThumbnail()"
+    :title="channel.title"
+    :description="channel.description"
+    :icon="channel.icon"
    :is-coming-soon="isComingSoon"
+    :disabled="!isActive"
    @click="onItemClick"
  />
 </template>
@@ -13,7 +13,7 @@ defineProps({
  <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"
+      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
    />
    <span class="truncate">
      {{ inbox.name }}
@@ -8,6 +8,10 @@ const props = defineProps({
    type: String,
    default: REPLY_EDITOR_MODES.REPLY,
  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });

 defineEmits(['toggleMode']);
@@ -20,9 +24,12 @@ const privateModeSize = useElementSize(wootEditorPrivateMode);

 /**
 * Computed boolean indicating if the editor is in private note mode
+ * When disabled, always show NOTE mode regardless of actual mode prop
 * @type {ComputedRef<boolean>}
 */
-const isPrivate = computed(() => props.mode === REPLY_EDITOR_MODES.NOTE);
+const isPrivate = computed(() => {
+  return props.disabled || props.mode === REPLY_EDITOR_MODES.NOTE;
+});

 /**
 * Computes the width of the sliding background chip in pixels
@@ -53,6 +60,10 @@ const translateValue = computed(() => {
 <template>
  <button
    class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
+    :disabled="disabled"
+    :class="{
+      'cursor-not-allowed': disabled,
+    }"
    @click="$emit('toggleMode')"
  >
    <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -62,7 +73,10 @@ const translateValue = computed(() => {
      {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
    </div>
    <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="{
+        'transition-all duration-300': !disabled,
+      }"
      :style="{
        '--chip-width': width,
        '--translate-x': translateValue,
@@ -6,15 +6,11 @@ import FileUpload from 'vue-upload-component';
 import * as ActiveStorage from 'activestorage';
 import inboxMixin from 'shared/mixins/inboxMixin';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-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 { getAllowedFileTypesByChannel } from '@chatwoot/utils';
+import { ALLOWED_FILE_TYPES } 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';

@@ -23,9 +19,9 @@ export default {
  components: { NextButton, FileUpload, VideoCallButton, AIAssistanceButton },
  mixins: [inboxMixin],
  props: {
-    mode: {
-      type: String,
-      default: REPLY_EDITOR_MODES.REPLY,
+    isNote: {
+      type: Boolean,
+      default: false,
    },
    onSend: {
      type: Function,
@@ -98,6 +94,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    enableContentTemplates: {
+      type: Boolean,
+      default: false,
+    },
    conversationId: {
      type: Number,
      required: true,
@@ -124,6 +124,7 @@ export default {
    'toggleInsertArticle',
    'toggleEditor',
    'selectWhatsappTemplate',
+    'selectContentTemplate',
  ],
  setup() {
    const { setSignatureFlagForInbox, fetchSignatureFlagFromUISettings } =
@@ -155,15 +156,17 @@ export default {
      uploadRef,
    };
  },
+  data() {
+    return {
+      ALLOWED_FILE_TYPES,
+    };
+  },
  computed: {
    ...mapGetters({
      accountId: 'getCurrentAccountId',
      isFeatureEnabledonAccount: 'accounts/isFeatureEnabledonAccount',
      uiFlags: 'integrations/getUIFlags',
    }),
-    isNote() {
-      return this.mode === REPLY_EDITOR_MODES.NOTE;
-    },
    wrapClass() {
      return {
        'is-note-mode': this.isNote,
@@ -196,17 +199,21 @@ export default {
      return this.conversationType === 'instagram_direct_message';
    },
    allowedFileTypes() {
-      if (this.isATwilioWhatsAppChannel) {
-        return ALLOWED_FILE_TYPES_FOR_TWILIO_WHATSAPP;
-      }
-      if (this.isALineChannel) {
-        return ALLOWED_FILE_TYPES_FOR_LINE;
-      }
-      if (this.isAnInstagramChannel || this.isInstagramDM) {
-        return ALLOWED_FILE_TYPES_FOR_INSTAGRAM;
+      // Use default file types for private notes
+      if (this.isOnPrivateNote) {
+        return this.ALLOWED_FILE_TYPES;
      }

-      return ALLOWED_FILE_TYPES;
+      let channelType = this.channelType || this.inbox?.channel_type;
+
+      if (this.isAnInstagramChannel || this.isInstagramDM) {
+        channelType = INBOX_TYPES.INSTAGRAM;
+      }
+
+      return getAllowedFileTypesByChannel({
+        channelType,
+        medium: this.inbox?.medium,
+      });
    },
    enableDragAndDrop() {
      return !this.newConversationModalActive;
@@ -341,6 +348,15 @@ export default {
        sm
        @click="$emit('selectWhatsappTemplate')"
      />
+      <NextButton
+        v-if="enableContentTemplates"
+        v-tooltip.top-end="'Content Templates'"
+        icon="i-ph-whatsapp-logo"
+        slate
+        faded
+        sm
+        @click="$emit('selectContentTemplate')"
+      />
      <VideoCallButton
        v-if="(isAWebWidgetInbox || isAPIInbox) && !isOnPrivateNote"
        :conversation-id="conversationId"
@@ -355,7 +371,7 @@ export default {
      <transition name="modal-fade">
        <div
          v-show="uploadRef && uploadRef.dropActive"
-          class="fixed top-0 bottom-0 left-0 right-0 z-20 flex flex-col items-center justify-center w-full h-full gap-2 text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
+          class="flex fixed top-0 right-0 bottom-0 left-0 z-20 flex-col gap-2 justify-center items-center w-full h-full text-n-slate-12 bg-modal-backdrop-light dark:bg-modal-backdrop-dark"
        >
          <fluent-icon icon="cloud-backup" size="40" />
          <h4 class="text-2xl break-words text-n-slate-12">
@@ -15,6 +15,10 @@ export default {
      type: String,
      default: REPLY_EDITOR_MODES.REPLY,
    },
+    isReplyRestricted: {
+      type: Boolean,
+      default: false,
+    },
    isMessageLengthReachingThreshold: {
      type: Boolean,
      default: () => false,
@@ -30,6 +34,7 @@ export default {
      emit('setReplyMode', mode);
    };
    const handleReplyClick = () => {
+      if (props.isReplyRestricted) return;
      setReplyMode(REPLY_EDITOR_MODES.REPLY);
    };
    const handleNoteClick = () => {
@@ -88,6 +93,7 @@ export default {
  <div class="flex justify-between h-[3.25rem] gap-2 ltr:pl-3 rtl:pr-3">
    <EditorModeToggle
      :mode="mode"
+      :disabled="isReplyRestricted"
      class="mt-3"
      @toggle-mode="handleModeToggle"
    />
@@ -0,0 +1,97 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import TemplatesPicker from './ContentTemplatesPicker.vue';
+import TemplateParser from '../../../../components-next/content-templates/ContentTemplateParser.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  inboxId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['onSend', 'cancel', 'update:show']);
+
+const { t } = useI18n();
+
+const selectedContentTemplate = ref(null);
+
+const localShow = computed({
+  get() {
+    return props.show;
+  },
+  set(value) {
+    emit('update:show', value);
+  },
+});
+
+const modalHeaderContent = computed(() => {
+  return selectedContentTemplate.value
+    ? t('CONTENT_TEMPLATES.MODAL.TEMPLATE_SELECTED_SUBTITLE', {
+        templateName: selectedContentTemplate.value.friendly_name,
+      })
+    : t('CONTENT_TEMPLATES.MODAL.SUBTITLE');
+});
+
+const pickTemplate = template => {
+  selectedContentTemplate.value = template;
+};
+
+const onResetTemplate = () => {
+  selectedContentTemplate.value = null;
+};
+
+const onSendMessage = message => {
+  emit('onSend', message);
+};
+
+const onClose = () => {
+  emit('cancel');
+};
+</script>
+
+<template>
+  <woot-modal v-model:show="localShow" :on-close="onClose" size="modal-big">
+    <woot-modal-header
+      :header-title="$t('CONTENT_TEMPLATES.MODAL.TITLE')"
+      :header-content="modalHeaderContent"
+    />
+    <div class="px-8 py-6 row">
+      <TemplatesPicker
+        v-if="!selectedContentTemplate"
+        :inbox-id="inboxId"
+        @on-select="pickTemplate"
+      />
+      <TemplateParser
+        v-else
+        :template="selectedContentTemplate"
+        @reset-template="onResetTemplate"
+        @send-message="onSendMessage"
+      >
+        <template #actions="{ sendMessage, resetTemplate, disabled }">
+          <div class="flex gap-2 mt-6">
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.GO_BACK_LABEL')"
+              color="slate"
+              variant="faded"
+              class="flex-1"
+              @click="resetTemplate"
+            />
+            <Button
+              :label="t('CONTENT_TEMPLATES.PARSER.SEND_MESSAGE_LABEL')"
+              class="flex-1"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </TemplateParser>
+    </div>
+  </woot-modal>
+</template>
@@ -0,0 +1,169 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useAlert } from 'dashboard/composables';
+import { useStore } from 'dashboard/composables/store';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
+import { TWILIO_CONTENT_TEMPLATE_TYPES } from 'shared/constants/messages';
+
+const props = defineProps({
+  inboxId: {
+    type: Number,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['onSelect']);
+
+const { t } = useI18n();
+const store = useStore();
+const query = ref('');
+const isRefreshing = ref(false);
+
+const twilioTemplates = computed(() => {
+  const inbox = store.getters['inboxes/getInbox'](props.inboxId);
+  return inbox?.content_templates?.templates || [];
+});
+
+const filteredTemplateMessages = computed(() =>
+  twilioTemplates.value.filter(
+    template =>
+      template.friendly_name
+        .toLowerCase()
+        .includes(query.value.toLowerCase()) && template.status === 'approved'
+  )
+);
+
+const getTemplateType = template => {
+  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.MEDIA) {
+    return t('CONTENT_TEMPLATES.PICKER.TYPES.MEDIA');
+  }
+  if (template.template_type === TWILIO_CONTENT_TEMPLATE_TYPES.QUICK_REPLY) {
+    return t('CONTENT_TEMPLATES.PICKER.TYPES.QUICK_REPLY');
+  }
+  return t('CONTENT_TEMPLATES.PICKER.TYPES.TEXT');
+};
+
+const refreshTemplates = async () => {
+  isRefreshing.value = true;
+  try {
+    await store.dispatch('inboxes/syncTemplates', props.inboxId);
+    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_SUCCESS'));
+  } catch (error) {
+    useAlert(t('CONTENT_TEMPLATES.PICKER.REFRESH_ERROR'));
+  } finally {
+    isRefreshing.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="flex gap-2 mb-2.5">
+      <div
+        class="flex flex-1 gap-1 items-center px-2.5 py-0 rounded-lg bg-n-alpha-black2 outline outline-1 outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6 focus-within:outline-n-brand dark:focus-within:outline-n-brand"
+      >
+        <fluent-icon icon="search" class="text-n-slate-12" size="16" />
+        <input
+          v-model="query"
+          type="search"
+          :placeholder="t('CONTENT_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('CONTENT_TEMPLATES.PICKER.REFRESH_BUTTON')"
+        @click="refreshTemplates"
+      >
+        <Icon
+          icon="i-lucide-refresh-ccw"
+          class="text-n-slate-12 size-4"
+          :class="{ 'animate-spin': isRefreshing }"
+        />
+      </button>
+    </div>
+    <div
+      class="bg-n-background outline-n-container outline outline-1 rounded-lg max-h-[18.75rem] overflow-y-auto p-2.5"
+    >
+      <div
+        v-for="(template, i) in filteredTemplateMessages"
+        :key="template.content_sid"
+      >
+        <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)"
+        >
+          <div>
+            <div class="flex justify-between items-center mb-2.5">
+              <p class="text-sm">
+                {{ template.friendly_name }}
+              </p>
+              <div class="flex gap-2">
+                <span
+                  class="inline-block px-2 py-1 text-xs leading-none rounded-lg cursor-default bg-n-slate-3 text-n-slate-12"
+                >
+                  {{ getTemplateType(template) }}
+                </span>
+                <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('CONTENT_TEMPLATES.PICKER.LABELS.LANGUAGE')}: ${template.language}`
+                  }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Body -->
+            <div>
+              <p class="text-xs font-medium text-n-slate-11">
+                {{ t('CONTENT_TEMPLATES.PICKER.BODY') }}
+              </p>
+              <p class="text-sm label-body">
+                {{ template.body || t('CONTENT_TEMPLATES.PICKER.NO_CONTENT') }}
+              </p>
+            </div>
+
+            <div class="flex justify-between items-center mt-3">
+              <div>
+                <p class="text-xs font-medium text-n-slate-11">
+                  {{ t('CONTENT_TEMPLATES.PICKER.LABELS.CATEGORY') }}
+                </p>
+                <p class="text-sm">{{ template.category || 'utility' }}</p>
+              </div>
+              <div class="text-xs text-n-slate-11">
+                {{ new Date(template.created_at).toLocaleDateString() }}
+              </div>
+            </div>
+          </div>
+        </button>
+        <hr
+          v-if="i != filteredTemplateMessages.length - 1"
+          :key="`hr-${i}`"
+          class="border-b border-solid border-n-weak my-2.5 mx-auto max-w-[95%]"
+        />
+      </div>
+      <div v-if="!filteredTemplateMessages.length" class="py-8 text-center">
+        <div v-if="query && twilioTemplates.length">
+          <p>
+            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_FOUND') }}
+            <strong>{{ query }}</strong>
+          </p>
+        </div>
+        <div v-else-if="!twilioTemplates.length" class="space-y-4">
+          <p class="text-n-slate-11">
+            {{ t('CONTENT_TEMPLATES.PICKER.NO_TEMPLATES_AVAILABLE') }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.label-body {
+  font-family: monospace;
+}
+</style>
@@ -3,6 +3,7 @@ import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import { useVoiceCallStatus } from 'dashboard/composables/useVoiceCallStatus';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
@@ -82,6 +83,16 @@ const isInboxNameVisible = computed(() => !activeInbox.value);

 const lastMessageInChat = computed(() => getLastMessage(props.chat));

+const callStatus = computed(
+  () => props.chat.additional_attributes?.call_status
+);
+const callDirection = computed(
+  () => props.chat.additional_attributes?.call_direction
+);
+
+const { labelKey: voiceLabelKey, listIconColor: voiceIconColor } =
+  useVoiceCallStatus(callStatus, callDirection);
+
 const inboxId = computed(() => props.chat.inbox_id);

 const inbox = computed(() => {
@@ -250,7 +261,6 @@ const deleteConversation = () => {
        :src="currentContact.thumbnail"
        :size="32"
        :status="currentContact.availability_status"
-        :inbox="inbox"
        :class="!showInboxName ? 'mt-4' : 'mt-8'"
        hide-offline-status
        rounded-full
@@ -307,14 +317,30 @@ const deleteConversation = () => {
      >
        {{ currentContact.name }}
      </h4>
+      <div
+        v-if="callStatus"
+        key="voice-status-row"
+        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm overflow-hidden text-ellipsis whitespace-nowrap"
+        :class="messagePreviewClass"
+      >
+        <span
+          class="inline-block -mt-0.5 align-middle text-[16px] i-ph-phone-incoming"
+          :class="[voiceIconColor]"
+        />
+        <span class="mx-1">
+          {{ $t(voiceLabelKey) }}
+        </span>
+      </div>
      <MessagePreview
-        v-if="lastMessageInChat"
+        v-else-if="lastMessageInChat"
+        key="message-preview"
        :message="lastMessageInChat"
        class="my-0 mx-2 leading-6 h-6 flex-1 min-w-0 text-sm"
        :class="messagePreviewClass"
      />
      <p
        v-else
+        key="no-messages"
        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"
      >
@@ -15,7 +15,7 @@ import ReplyEmailHead from './ReplyEmailHead.vue';
 import ReplyBottomPanel from 'dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue';
 import ArticleSearchPopover from 'dashboard/routes/dashboard/helpcenter/components/ArticleSearch/SearchPopover.vue';
 import MessageSignatureMissingAlert from './MessageSignatureMissingAlert.vue';
-import Banner from 'dashboard/components/ui/Banner.vue';
+import ReplyBoxBanner from './ReplyBoxBanner.vue';
 import { REPLY_EDITOR_MODES } from 'dashboard/components/widgets/WootWriter/constants';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import AudioRecorder from 'dashboard/components/widgets/WootWriter/AudioRecorder.vue';
@@ -27,6 +27,7 @@ import {
  replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
+import ContentTemplates from './ContentTemplates/ContentTemplatesModal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
 import { trimContent, debounce, getRecipients } from '@chatwoot/utils';
@@ -52,8 +53,8 @@ export default {
    ArticleSearchPopover,
    AttachmentPreview,
    AudioRecorder,
-    Banner,
    CannedResponse,
+    ReplyBoxBanner,
    EmojiInput,
    MessageSignatureMissingAlert,
    ReplyBottomPanel,
@@ -61,6 +62,7 @@ export default {
    ReplyToMessage,
    ReplyTopPanel,
    ResizableTextArea,
+    ContentTemplates,
    WhatsappTemplates,
    WootMessageEditor,
  },
@@ -109,6 +111,7 @@ export default {
      toEmails: '',
      doAutoSaveDraft: () => {},
      showWhatsAppTemplatesModal: false,
+      showContentTemplatesModal: false,
      updateEditorSelectionWith: '',
      undefinedVariableMessage: '',
      showMentions: false,
@@ -155,44 +158,21 @@ export default {

      return false;
    },
-    assignedAgent: {
-      get() {
-        return this.currentChat.meta.assignee;
-      },
-      set(agent) {
-        const agentId = agent ? agent.id : 0;
-        this.$store.dispatch('setCurrentChatAssignee', agent);
-        this.$store
-          .dispatch('assignAgent', {
-            conversationId: this.currentChat.id,
-            agentId,
-          })
-          .then(() => {
-            useAlert(this.$t('CONVERSATION.CHANGE_AGENT'));
-          });
-      },
-    },
-    showSelfAssignBanner() {
-      if (this.message !== '' && !this.isOnPrivateNote) {
-        if (!this.assignedAgent) {
-          return true;
-        }
-        if (this.assignedAgent.id !== this.currentUser.id) {
-          return true;
-        }
-      }
-
-      return false;
-    },
    showWhatsappTemplates() {
      return this.isAWhatsAppCloudChannel && !this.isPrivate;
    },
+    showContentTemplates() {
+      return this.isATwilioWhatsAppChannel && !this.isPrivate;
+    },
    isPrivate() {
      if (this.currentChat.can_reply || this.isAWhatsAppChannel) {
        return this.isOnPrivateNote;
      }
      return true;
    },
+    isReplyRestricted() {
+      return !this.currentChat?.can_reply && !this.isAWhatsAppChannel;
+    },
    inboxId() {
      return this.currentChat.inbox_id;
    },
@@ -659,28 +639,11 @@ export default {
    hideWhatsappTemplatesModal() {
      this.showWhatsAppTemplatesModal = false;
    },
-    onClickSelfAssign() {
-      const {
-        account_id,
-        availability_status,
-        available_name,
-        email,
-        id,
-        name,
-        role,
-        avatar_url,
-      } = this.currentUser;
-      const selfAssign = {
-        account_id,
-        availability_status,
-        available_name,
-        email,
-        id,
-        name,
-        role,
-        thumbnail: avatar_url,
-      };
-      this.assignedAgent = selfAssign;
+    openContentTemplateModal() {
+      this.showContentTemplatesModal = true;
+    },
+    hideContentTemplatesModal() {
+      this.showContentTemplatesModal = false;
    },
    confirmOnSendReply() {
      if (this.isReplyButtonDisabled) {
@@ -774,6 +737,13 @@ export default {
      });
      this.hideWhatsappTemplatesModal();
    },
+    async onSendContentTemplateReply(messagePayload) {
+      this.sendMessage({
+        conversationId: this.currentChat.id,
+        ...messagePayload,
+      });
+      this.hideContentTemplatesModal();
+    },
    replaceText(message) {
      if (this.sendWithSignature && !this.private) {
        // if signature is enabled, append it to the message
@@ -793,6 +763,10 @@ 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,
@@ -1095,19 +1069,11 @@ export default {
 </script>

 <template>
-  <Banner
-    v-if="showSelfAssignBanner"
-    action-button-variant="ghost"
-    color-scheme="secondary"
-    class="mx-2 mb-2 rounded-lg banner--self-assign"
-    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
-    has-action-button
-    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
-    @primary-action="onClickSelfAssign"
-  />
+  <ReplyBoxBanner :message="message" :is-on-private-note="isOnPrivateNote" />
  <div ref="replyEditor" class="reply-box" :class="replyBoxClass">
    <ReplyTopPanel
      :mode="replyType"
+      :is-reply-restricted="isReplyRestricted"
      :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
      :characters-remaining="charactersRemaining"
      :popout-reply-box="popOutReplyBox"
@@ -1213,11 +1179,12 @@ export default {
      :conversation-id="conversationId"
      :enable-multiple-file-upload="enableMultipleFileUpload"
      :enable-whats-app-templates="showWhatsappTemplates"
+      :enable-content-templates="showContentTemplates"
      :inbox="inbox"
      :is-on-private-note="isOnPrivateNote"
      :is-recording-audio="isRecordingAudio"
      :is-send-disabled="isReplyButtonDisabled"
-      :mode="replyType"
+      :is-note="isPrivate"
      :on-file-upload="onFileUpload"
      :on-send="onSendReply"
      :conversation-type="conversationType"
@@ -1235,6 +1202,7 @@ export default {
      :portal-slug="connectedPortalSlug"
      :new-conversation-modal-active="newConversationModalActive"
      @select-whatsapp-template="openWhatsappTemplateModal"
+      @select-content-template="openContentTemplateModal"
      @toggle-editor="toggleRichContentEditor"
      @replace-text="replaceText"
      @toggle-insert-article="toggleInsertArticle"
@@ -1247,6 +1215,14 @@ export default {
      @cancel="hideWhatsappTemplatesModal"
    />

+    <ContentTemplates
+      :inbox-id="inbox.id"
+      :show="showContentTemplatesModal"
+      @close="hideContentTemplatesModal"
+      @on-send="onSendContentTemplateReply"
+      @cancel="hideContentTemplatesModal"
+    />
+
    <woot-confirm-modal
      ref="confirmDialog"
      :title="$t('CONVERSATION.REPLYBOX.UNDEFINED_VARIABLES.TITLE')"
@@ -1260,10 +1236,6 @@ export default {
  @apply mb-0;
 }

-.banner--self-assign {
-  @apply py-2;
-}
-
 .attachment-preview-box {
  @apply bg-transparent py-0 px-4;
 }
@@ -0,0 +1,129 @@
+<script setup>
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import { useI18n } from 'vue-i18n';
+import wootConstants from 'dashboard/constants/globals';
+
+import Banner from 'dashboard/components/ui/Banner.vue';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: '',
+  },
+  isOnPrivateNote: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const currentChat = useMapGetter('getSelectedChat');
+const currentUser = useMapGetter('getCurrentUser');
+
+const assignedAgent = computed({
+  get() {
+    return currentChat.value?.meta?.assignee;
+  },
+  set(agent) {
+    const agentId = agent ? agent.id : 0;
+    store.dispatch('setCurrentChatAssignee', agent);
+    store.dispatch('assignAgent', {
+      conversationId: currentChat.value?.id,
+      agentId,
+    });
+  },
+});
+
+const isUserTyping = computed(
+  () => props.message !== '' && !props.isOnPrivateNote
+);
+const isUnassigned = computed(() => !assignedAgent.value);
+const isAssignedToOtherAgent = computed(
+  () => assignedAgent.value?.id !== currentUser.value?.id
+);
+
+const showSelfAssignBanner = computed(() => {
+  return (
+    isUserTyping.value && (isUnassigned.value || isAssignedToOtherAgent.value)
+  );
+});
+
+const showBotHandoffBanner = computed(
+  () =>
+    isUserTyping.value &&
+    currentChat.value?.status === wootConstants.STATUS_TYPE.PENDING
+);
+
+const botHandoffActionLabel = computed(() => {
+  return assignedAgent.value?.id === currentUser.value?.id
+    ? t('CONVERSATION.BOT_HANDOFF_REOPEN_ACTION')
+    : t('CONVERSATION.BOT_HANDOFF_ACTION');
+});
+
+const selfAssignConversation = async () => {
+  const { avatar_url, ...rest } = currentUser.value || {};
+  assignedAgent.value = { ...rest, thumbnail: avatar_url };
+};
+
+const needsAssignmentToCurrentUser = computed(() => {
+  return isUnassigned.value || isAssignedToOtherAgent.value;
+});
+
+const onClickSelfAssign = async () => {
+  try {
+    await selfAssignConversation();
+    useAlert(t('CONVERSATION.CHANGE_AGENT'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.CHANGE_AGENT_FAILED'));
+  }
+};
+
+const reopenConversation = async () => {
+  await store.dispatch('toggleStatus', {
+    conversationId: currentChat.value?.id,
+    status: wootConstants.STATUS_TYPE.OPEN,
+  });
+};
+
+const onClickBotHandoff = async () => {
+  try {
+    await reopenConversation();
+
+    if (needsAssignmentToCurrentUser.value) {
+      await selfAssignConversation();
+    }
+
+    useAlert(t('CONVERSATION.BOT_HANDOFF_SUCCESS'));
+  } catch (error) {
+    useAlert(t('CONVERSATION.BOT_HANDOFF_ERROR'));
+  }
+};
+</script>
+
+<template>
+  <Banner
+    v-if="showSelfAssignBanner && !showBotHandoffBanner"
+    action-button-variant="ghost"
+    color-scheme="secondary"
+    class="mx-2 mb-2 rounded-lg !py-2"
+    :banner-message="$t('CONVERSATION.NOT_ASSIGNED_TO_YOU')"
+    has-action-button
+    :action-button-label="$t('CONVERSATION.ASSIGN_TO_ME')"
+    @primary-action="onClickSelfAssign"
+  />
+  <Banner
+    v-if="showBotHandoffBanner"
+    action-button-variant="ghost"
+    color-scheme="secondary"
+    class="mx-2 mb-2 rounded-lg !py-2"
+    :banner-message="$t('CONVERSATION.BOT_HANDOFF_MESSAGE')"
+    has-action-button
+    :action-button-label="botHandoffActionLabel"
+    @primary-action="onClickBotHandoff"
+  />
+</template>
@@ -1,10 +1,10 @@
 <script>
 import TemplatesPicker from './TemplatesPicker.vue';
-import TemplateParser from './TemplateParser.vue';
+import WhatsAppTemplateReply from './WhatsAppTemplateReply.vue';
 export default {
  components: {
    TemplatesPicker,
-    TemplateParser,
+    WhatsAppTemplateReply,
  },
  props: {
    show: {
@@ -68,7 +68,7 @@ export default {
        :inbox-id="inboxId"
        @on-select="pickTemplate"
      />
-      <TemplateParser
+      <WhatsAppTemplateReply
        v-else
        :template="selectedWaTemplate"
        @reset-template="onResetTemplate"
@@ -1,13 +1,4 @@
 <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 WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';

@@ -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 { MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL } from 'shared/constants/messages';
+import { getMaxUploadSizeByChannel } from '@chatwoot/utils';

 vi.mock('dashboard/composables/store');
 vi.mock('dashboard/composables', () => ({
@@ -13,6 +13,7 @@ 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();
@@ -22,6 +23,11 @@ describe('useFileUpload', () => {
    file: new File(['test'], 'test.jpg', { type: 'image/jpeg' }),
  };

+  const inbox = {
+    channel_type: 'Channel::WhatsApp',
+    medium: 'whatsapp',
+  };
+
  beforeEach(() => {
    vi.clearAllMocks();

@@ -37,11 +43,12 @@ describe('useFileUpload', () => {

    useI18n.mockReturnValue({ t: mockTranslate });
    checkFileSizeLimit.mockReturnValue(true);
+    getMaxUploadSizeByChannel.mockReturnValue(25); // default max size MB for tests
  });

-  it('should handle direct file upload when enabled', () => {
+  it('handles direct file upload when direct uploads enabled', () => {
    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: false,
+      inbox,
      attachFile: mockAttachFile,
    });

@@ -52,6 +59,16 @@ 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',
@@ -63,7 +80,7 @@ describe('useFileUpload', () => {
    });
  });

-  it('should handle indirect file upload when direct upload is disabled', () => {
+  it('handles indirect file upload when direct upload disabled', () => {
    useMapGetter.mockImplementation(getter => {
      const getterMap = {
        getCurrentAccountId: { value: '123' },
@@ -75,22 +92,24 @@ describe('useFileUpload', () => {
    });

    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: false,
+      inbox,
      attachFile: mockAttachFile,
    });

    onFileUpload(mockFile);

    expect(DirectUpload).not.toHaveBeenCalled();
+    expect(getMaxUploadSizeByChannel).toHaveBeenCalled();
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 25);
    expect(mockAttachFile).toHaveBeenCalledWith({ file: mockFile });
  });

-  it('should show alert when file size exceeds limit', () => {
+  it('shows alert when file size exceeds limit', () => {
    checkFileSizeLimit.mockReturnValue(false);
    mockTranslate.mockReturnValue('File size exceeds limit');

    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: false,
+      inbox,
      attachFile: mockAttachFile,
    });

@@ -100,28 +119,37 @@ describe('useFileUpload', () => {
    expect(mockAttachFile).not.toHaveBeenCalled();
  });

-  it('should use different max file size for Twilio SMS channel', () => {
+  it('uses per-mime limits from helper', () => {
+    getMaxUploadSizeByChannel.mockImplementation(({ mime }) =>
+      mime.startsWith('image/') ? 10 : 50
+    );
    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: true,
+      inbox,
      attachFile: mockAttachFile,
    });

+    DirectUpload.mockImplementation(() => ({
+      create: cb => cb(null, { signed_id: 'blob' }),
+    }));
+
    onFileUpload(mockFile);

-    expect(checkFileSizeLimit).toHaveBeenCalledWith(
-      mockFile,
-      MAXIMUM_FILE_UPLOAD_SIZE_TWILIO_SMS_CHANNEL
-    );
+    expect(getMaxUploadSizeByChannel).toHaveBeenCalledWith({
+      channelType: inbox.channel_type,
+      medium: inbox.medium,
+      mime: 'image/jpeg',
+    });
+    expect(checkFileSizeLimit).toHaveBeenCalledWith(mockFile, 10);
  });

-  it('should handle direct upload errors', () => {
+  it('handles direct upload errors', () => {
    const mockError = 'Upload failed';
    DirectUpload.mockImplementation(() => ({
      create: callback => callback(mockError, null),
    }));

    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: false,
+      inbox,
      attachFile: mockAttachFile,
    });

@@ -131,15 +159,16 @@ describe('useFileUpload', () => {
    expect(mockAttachFile).not.toHaveBeenCalled();
  });

-  it('should do nothing when file is null', () => {
+  it('does nothing when file is null', () => {
    const { onFileUpload } = useFileUpload({
-      isATwilioSMSChannel: false,
+      inbox,
      attachFile: mockAttachFile,
    });

    onFileUpload(null);

    expect(checkFileSizeLimit).not.toHaveBeenCalled();
+    expect(getMaxUploadSizeByChannel).not.toHaveBeenCalled();
    expect(mockAttachFile).not.toHaveBeenCalled();
    expect(useAlert).not.toHaveBeenCalled();
  });
@@ -43,18 +43,22 @@ describe('useFontSize', () => {

  it('returns fontSizeOptions with correct structure', () => {
    const { fontSizeOptions } = useFontSize();
-    expect(fontSizeOptions).toHaveLength(5);
-    expect(fontSizeOptions[0]).toHaveProperty('value');
-    expect(fontSizeOptions[0]).toHaveProperty('label');
+    expect(fontSizeOptions.value).toHaveLength(5);
+    expect(fontSizeOptions.value[0]).toHaveProperty('value');
+    expect(fontSizeOptions.value[0]).toHaveProperty('label');

    // Check specific options
-    expect(fontSizeOptions.find(option => option.value === '16px')).toEqual({
+    expect(
+      fontSizeOptions.value.find(option => option.value === '16px')
+    ).toEqual({
      value: '16px',
      label:
        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.DEFAULT',
    });

-    expect(fontSizeOptions.find(option => option.value === '14px')).toEqual({
+    expect(
+      fontSizeOptions.value.find(option => option.value === '14px')
+    ).toEqual({
      value: '14px',
      label:
        'PROFILE_SETTINGS.FORM.INTERFACE_SECTION.FONT_SIZE.OPTIONS.SMALLER',
@@ -143,12 +147,12 @@ describe('useFontSize', () => {
    const { fontSizeOptions } = useFontSize();

    // Check that translation is applied
-    expect(fontSizeOptions.find(option => option.value === '14px').label).toBe(
-      'Smaller'
-    );
-    expect(fontSizeOptions.find(option => option.value === '16px').label).toBe(
-      'Default'
-    );
+    expect(
+      fontSizeOptions.value.find(option => option.value === '14px').label
+    ).toBe('Smaller');
+    expect(
+      fontSizeOptions.value.find(option => option.value === '16px').label
+    ).toBe('Default');

    // Verify translation function was called with correct keys
    expect(mockTranslate).toHaveBeenCalledWith(
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .4.2
 .4.3