Merge branch 'release/4.5.0'

2025-10-29 18:22:53 +00:00 · 2025-08-18 18:40:04 +02:00
parent 545453537f eac292b11b
commit 75d3569f22
1023 changed files with 38865 additions and 5510 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -94,3 +94,4 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
+CLAUDE.local.md
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -55,4 +55,21 @@

 ## Ruby Best Practices

- Use compact `module/class` definitions; avoid nested styles
+- Use compact `module/class` definitions; avoid nested styles
+
+## Enterprise Edition Notes
+
+- Chatwoot has an Enterprise overlay under `enterprise/` that extends/overrides OSS code.
+- When you add or modify core functionality, always check for corresponding files in `enterprise/` and keep behavior compatible.
+- Follow the Enterprise development practices documented here:
+  - https://chatwoot.help/hc/handbook/articles/developing-enterprise-edition-features-38
+
+Practical checklist for any change impacting core logic or public APIs
+- Search for related files in both trees before editing (e.g., `rg -n "FooService|ControllerName|ModelName" app enterprise`).
+- If adding new endpoints, services, or models, consider whether Enterprise needs:
+  - An override (e.g., `enterprise/app/...`), or
+  - An extension point (e.g., `prepend_mod_with`, hooks, configuration) to avoid hard forks.
+- Avoid hardcoding instance- or plan-specific behavior in OSS; prefer configuration, feature flags, or extension points consumed by Enterprise.
+- Keep request/response contracts stable across OSS and Enterprise; update both sets of routes/controllers when introducing new APIs.
+- When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
+- Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
--- a/8
+++ b/8
@@ -108,7 +108,7 @@ gem 'google-cloud-translate-v3', '>= 0.7.0'
 ##-- apm and error monitoring ---#
 # loaded only when environment variables are set.
 # ref application.rb
-gem 'ddtrace', require: false
+gem 'datadog', '~> 2.0', require: false
 gem 'elastic-apm', require: false
 gem 'newrelic_rpm', require: false
 gem 'newrelic-sidekiq-metrics', '>= 1.6.2', require: false
@@ -121,6 +121,8 @@ gem 'sentry-sidekiq', '>= 5.19.0', require: false
 gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
+# for sidekiq healthcheck
+gem 'sidekiq_alive'

 ##-- Push notification service --##
 gem 'fcm'
@@ -177,6 +179,10 @@ gem 'reverse_markdown'

 gem 'iso-639'
 gem 'ruby-openai'
+gem 'ai-agents', '>= 0.4.3'
+
+# TODO: Move this gem as a dependency of ai-agents
+gem 'ruby_llm-schema'

 gem 'shopify_api'

--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -25,35 +25,35 @@ GIT
 GEM
  remote: https://rubygems.org/
  specs:
-    actioncable (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actioncable (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      nio4r (~> 2.0)
      websocket-driver (>= 0.6.1)
      zeitwerk (~> 2.6)
-    actionmailbox (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activejob (= 7.1.5.1)
-      activerecord (= 7.1.5.1)
-      activestorage (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionmailbox (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activejob (= 7.1.5.2)
+      activerecord (= 7.1.5.2)
+      activestorage (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      mail (>= 2.7.1)
      net-imap
      net-pop
      net-smtp
-    actionmailer (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      actionview (= 7.1.5.1)
-      activejob (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionmailer (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      actionview (= 7.1.5.2)
+      activejob (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      mail (~> 2.5, >= 2.5.4)
      net-imap
      net-pop
      net-smtp
      rails-dom-testing (~> 2.2)
-    actionpack (7.1.5.1)
-      actionview (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionpack (7.1.5.2)
+      actionview (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      nokogiri (>= 1.8.5)
      racc
      rack (>= 2.2.4)
@@ -61,38 +61,38 @@ GEM
      rack-test (>= 0.6.3)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
-    actiontext (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activerecord (= 7.1.5.1)
-      activestorage (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actiontext (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activerecord (= 7.1.5.2)
+      activestorage (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      globalid (>= 0.6.0)
      nokogiri (>= 1.8.5)
-    actionview (7.1.5.1)
-      activesupport (= 7.1.5.1)
+    actionview (7.1.5.2)
+      activesupport (= 7.1.5.2)
      builder (~> 3.1)
      erubi (~> 1.11)
      rails-dom-testing (~> 2.2)
      rails-html-sanitizer (~> 1.6)
    active_record_query_trace (1.8)
-    activejob (7.1.5.1)
-      activesupport (= 7.1.5.1)
+    activejob (7.1.5.2)
+      activesupport (= 7.1.5.2)
      globalid (>= 0.3.6)
-    activemodel (7.1.5.1)
-      activesupport (= 7.1.5.1)
-    activerecord (7.1.5.1)
-      activemodel (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    activemodel (7.1.5.2)
+      activesupport (= 7.1.5.2)
+    activerecord (7.1.5.2)
+      activemodel (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      timeout (>= 0.4.0)
    activerecord-import (2.1.0)
      activerecord (>= 4.2)
-    activestorage (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activejob (= 7.1.5.1)
-      activerecord (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    activestorage (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activejob (= 7.1.5.2)
+      activerecord (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      marcel (~> 1.0)
-    activesupport (7.1.5.1)
+    activesupport (7.1.5.2)
      base64
      benchmark (>= 0.3)
      bigdecimal
@@ -126,6 +126,8 @@ GEM
      jbuilder (~> 2)
      rails (>= 4.2, < 7.2)
      selectize-rails (~> 0.6)
+    ai-agents (0.4.3)
+      ruby_llm (~> 1.3)
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
@@ -153,10 +155,10 @@ GEM
    barnes (0.0.9)
      multi_json (~> 1)
      statsd-ruby (~> 1.1)
-    base64 (0.2.0)
+    base64 (0.3.0)
    bcrypt (3.1.20)
-    benchmark (0.4.0)
-    bigdecimal (3.1.9)
+    benchmark (0.4.1)
+    bigdecimal (3.2.2)
    bindex (0.8.1)
    bootsnap (1.16.0)
      msgpack (~> 1.2)
@@ -192,10 +194,14 @@ GEM
      activerecord (>= 5.a)
      database_cleaner-core (~> 2.0.0)
    database_cleaner-core (2.0.1)
-    date (3.4.1)
-    ddtrace (0.48.0)
-      ffi (~> 1.0)
+    datadog (2.19.0)
+      datadog-ruby_core_source (~> 3.4, >= 3.4.1)
+      libdatadog (~> 18.1.0.1.0)
+      libddwaf (~> 1.24.1.0.3)
+      logger
      msgpack
+    datadog-ruby_core_source (3.4.1)
+    date (3.4.1)
    debug (1.8.0)
      irb (>= 1.5.0)
      reline (>= 0.3.1)
@@ -357,6 +363,7 @@ GEM
    grpc (1.72.0-x86_64-linux)
      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
+    gserver (0.0.1)
    haikunator (1.1.1)
    hairtrigger (1.0.0)
      activerecord (>= 6.0, < 8)
@@ -441,6 +448,16 @@ GEM
      logger (~> 1.6)
    letter_opener (1.10.0)
      launchy (>= 2.2, < 4)
+    libdatadog (18.1.0.1.0)
+    libdatadog (18.1.0.1.0-x86_64-linux)
+    libddwaf (1.24.1.0.3)
+      ffi (~> 1.0)
+    libddwaf (1.24.1.0.3-arm64-darwin)
+      ffi (~> 1.0)
+    libddwaf (1.24.1.0.3-x86_64-darwin)
+      ffi (~> 1.0)
+    libddwaf (1.24.1.0.3-x86_64-linux)
+      ffi (~> 1.0)
    line-bot-api (1.28.0)
    lint_roller (1.1.0)
    liquid (5.4.0)
@@ -475,7 +492,7 @@ GEM
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.8)
+    mini_portile2 (2.8.9)
    minitest (5.25.5)
    mock_redis (0.36.0)
      ruby2_keywords
@@ -506,14 +523,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.18.8)
+    nokogiri (1.18.9)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.18.8-arm64-darwin)
+    nokogiri (1.18.9-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-darwin)
+    nokogiri (1.18.9-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.8-x86_64-linux-gnu)
+    nokogiri (1.18.9-x86_64-linux-gnu)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -596,20 +613,20 @@ GEM
    rackup (1.0.1)
      rack (< 3)
      webrick
-    rails (7.1.5.1)
-      actioncable (= 7.1.5.1)
-      actionmailbox (= 7.1.5.1)
-      actionmailer (= 7.1.5.1)
-      actionpack (= 7.1.5.1)
-      actiontext (= 7.1.5.1)
-      actionview (= 7.1.5.1)
-      activejob (= 7.1.5.1)
-      activemodel (= 7.1.5.1)
-      activerecord (= 7.1.5.1)
-      activestorage (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    rails (7.1.5.2)
+      actioncable (= 7.1.5.2)
+      actionmailbox (= 7.1.5.2)
+      actionmailer (= 7.1.5.2)
+      actionpack (= 7.1.5.2)
+      actiontext (= 7.1.5.2)
+      actionview (= 7.1.5.2)
+      activejob (= 7.1.5.2)
+      activemodel (= 7.1.5.2)
+      activerecord (= 7.1.5.2)
+      activestorage (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      bundler (>= 1.15.0)
-      railties (= 7.1.5.1)
+      railties (= 7.1.5.2)
    rails-dom-testing (2.2.0)
      activesupport (>= 5.0.0)
      minitest
@@ -617,9 +634,9 @@ GEM
    rails-html-sanitizer (1.6.1)
      loofah (~> 2.21)
      nokogiri (>= 1.15.7, != 1.16.7, != 1.16.6, != 1.16.5, != 1.16.4, != 1.16.3, != 1.16.2, != 1.16.1, != 1.16.0.rc1, != 1.16.0)
-    railties (7.1.5.1)
-      actionpack (= 7.1.5.1)
-      activesupport (= 7.1.5.1)
+    railties (7.1.5.2)
+      actionpack (= 7.1.5.2)
+      activesupport (= 7.1.5.2)
      irb
      rackup (>= 1.0.0)
      rake (>= 12.2)
@@ -717,6 +734,16 @@ GEM
    ruby2ruby (2.5.0)
      ruby_parser (~> 3.1)
      sexp_processor (~> 4.6)
+    ruby_llm (1.5.1)
+      base64
+      event_stream_parser (~> 1)
+      faraday (>= 1.10.0)
+      faraday-multipart (>= 1)
+      faraday-net_http (>= 1)
+      faraday-retry (>= 1)
+      marcel (~> 1.0)
+      zeitwerk (~> 2)
+    ruby_llm-schema (0.1.0)
    ruby_parser (3.20.0)
      sexp_processor (~> 4.16)
    sass (3.7.4)
@@ -774,6 +801,9 @@ GEM
      fugit (~> 1.8)
      globalid (>= 1.0.1)
      sidekiq (>= 6)
+    sidekiq_alive (2.5.0)
+      gserver (~> 0.0.1)
+      sidekiq (>= 5, < 9)
    signet (0.17.0)
      addressable (~> 2.8)
      faraday (>= 0.17.5, < 3.a)
@@ -812,7 +842,7 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.3.1)
+    thor (1.4.0)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -895,6 +925,7 @@ DEPENDENCIES
  administrate (>= 0.20.1)
  administrate-field-active_storage (>= 1.0.3)
  administrate-field-belongs_to_search (>= 0.9.0)
+  ai-agents (>= 0.4.3)
  annotate
  attr_extras
  audited (~> 5.4, >= 5.4.1)
@@ -911,7 +942,7 @@ DEPENDENCIES
  commonmarker
  csv-safe
  database_cleaner
-  ddtrace
+  datadog (~> 2.0)
  debug (~> 1.8)
  devise (>= 4.9.4)
  devise-secure_password!
@@ -988,6 +1019,7 @@ DEPENDENCIES
  rubocop-rails
  rubocop-rspec
  ruby-openai
+  ruby_llm-schema
  scout_apm
  scss_lint
  seed_dump
@@ -998,6 +1030,7 @@ DEPENDENCIES
  shoulda-matchers
  sidekiq (>= 7.3.1)
  sidekiq-cron (>= 1.12.0)
+  sidekiq_alive
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.5.2)
  spring
--- a/2
+++ b/2
@@ -1 +1 @@
-3.13.0
+4.4.0
--- a/2
+++ b/2
@@ -1 +1 @@
-3.2.0
+3.4.2
--- a/app/actions/contact_identify_action.rb
+++ b/app/actions/contact_identify_action.rb
@@ -6,6 +6,7 @@
 # We don't want to update the name of the identified original contact.

 class ContactIdentifyAction
+  include UrlHelper
  pattr_initialize [:contact!, :params!, { retain_original_contact_name: false, discard_invalid_attrs: false }]

  def perform
@@ -104,7 +105,14 @@ class ContactIdentifyAction
    # TODO: replace reject { |_k, v| v.blank? } with compact_blank when rails is upgraded
    @contact.discard_invalid_attrs if discard_invalid_attrs
    @contact.save!
-    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url]) if params[:avatar_url].present? && !@contact.avatar.attached?
+    enqueue_avatar_job
+  end
+
+  def enqueue_avatar_job
+    return unless params[:avatar_url].present? && !@contact.avatar.attached?
+    return unless url_valid?(params[:avatar_url])
+
+    Avatar::AvatarFromUrlJob.perform_later(@contact, params[:avatar_url])
  end

  def merge_contact(base_contact, merge_contact)
--- a/app/controllers/api/v1/accounts/callbacks_controller.rb
+++ b/app/controllers/api/v1/accounts/callbacks_controller.rb
@@ -30,7 +30,14 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
  end

  def facebook_pages
-    @page_details = mark_already_existing_facebook_pages(fb_object.get_connections('me', 'accounts'))
+    pages = []
+    fb_pages = fb_object.get_connections('me', 'accounts')
+    pages.concat(fb_pages)
+    while fb_pages.respond_to?(:next_page) && (next_page = fb_pages.next_page)
+      fb_pages = next_page
+      pages.concat(fb_pages)
+    end
+    @page_details = mark_already_existing_facebook_pages(pages)
  end

  def set_instagram_id(page_access_token, facebook_channel)
--- a/app/controllers/api/v1/accounts/contacts_controller.rb
+++ b/app/controllers/api/v1/accounts/contacts_controller.rb
@@ -122,7 +122,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  def resolved_contacts
    return @resolved_contacts if @resolved_contacts

-    @resolved_contacts = Current.account.contacts.resolved_contacts
+    @resolved_contacts = Current.account.contacts.resolved_contacts(use_crm_v2: Current.account.feature_enabled?('crm_v2'))

    @resolved_contacts = @resolved_contacts.tagged_with(params[:labels], any: true) if params[:labels].present?
    @resolved_contacts
--- a/app/controllers/api/v1/accounts/inboxes_controller.rb
+++ b/app/controllers/api/v1/accounts/inboxes_controller.rb
@@ -69,6 +69,17 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
    render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
  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
+
+    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
+    render status: :ok, json: { message: 'Template sync initiated successfully' }
+  rescue StandardError => e
+    render status: :internal_server_error, json: { error: e.message }
+  end
+
  private

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

@@ -47,6 +46,20 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    head :ok
  end

+  def send_instructions
+    email = permitted_params[:email]
+    return render_could_not_create_error(I18n.t('portals.send_instructions.email_required')) if email.blank?
+    return render_could_not_create_error(I18n.t('portals.send_instructions.invalid_email_format')) unless valid_email?(email)
+    return render_could_not_create_error(I18n.t('portals.send_instructions.custom_domain_not_configured')) if @portal.custom_domain.blank?
+
+    PortalInstructionsMailer.send_cname_instructions(
+      portal: @portal,
+      recipient_email: email
+    ).deliver_later
+
+    render json: { message: I18n.t('portals.send_instructions.instructions_sent_successfully') }, status: :ok
+  end
+
  def process_attached_logo
    blob_id = params[:blob_id]
    blob = ActiveStorage::Blob.find_by(id: blob_id)
@@ -60,12 +73,12 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
  end

  def permitted_params
-    params.permit(:id)
+    params.permit(:id, :email)
  end

  def portal_params
    params.require(:portal).permit(
-      :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
    )
  end
@@ -88,4 +101,10 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    domain = URI.parse(@portal.custom_domain)
    domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
  end
+
+  def valid_email?(email)
+    ValidEmail2::Address.new(email).valid?
+  end
 end
+
+Api::V1::Accounts::PortalsController.prepend_mod_with('Api::V1::Accounts::PortalsController')
--- a/app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb
+++ b/app/controllers/api/v1/accounts/whatsapp/authorizations_controller.rb
@@ -1,8 +1,10 @@
 class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
  before_action :validate_feature_enabled!
+  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }

  # POST /api/v1/accounts/:account_id/whatsapp/authorization
-  # Handles the embedded signup callback data from the Facebook SDK
+  # Handles both initial authorization and reauthorization
+  # If inbox_id is present in params, it performs reauthorization
  def create
    validate_embedded_signup_params!
    channel = process_embedded_signup
@@ -16,21 +18,42 @@ class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts:
  def process_embedded_signup
    service = Whatsapp::EmbeddedSignupService.new(
      account: Current.account,
-      code: params[:code],
-      business_id: params[:business_id],
-      waba_id: params[:waba_id],
-      phone_number_id: params[:phone_number_id]
+      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
+      inbox_id: params[:inbox_id]
    )
    service.perform
  end

-  def render_success_response(inbox)
+  def fetch_and_validate_inbox
+    @inbox = Current.account.inboxes.find(params[:inbox_id])
+    validate_reauthorization_required
+  end
+
+  def validate_reauthorization_required
+    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
+
    render json: {
+      success: false,
+      message: I18n.t('inbox.reauthorization.not_required')
+    }, status: :unprocessable_entity
+  end
+
+  def can_upgrade_to_embedded_signup?
+    channel = @inbox.channel
+    return false unless channel.provider == 'whatsapp_cloud'
+
+    true
+  end
+
+  def render_success_response(inbox)
+    response = {
      success: true,
      id: inbox.id,
      name: inbox.name,
      channel_type: 'whatsapp'
    }
+    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
+    render json: response
  end

  def render_error_response(error)
--- a/app/controllers/microsoft_controller.rb
+++ b/app/controllers/microsoft_controller.rb
@@ -2,7 +2,7 @@ class MicrosoftController < ApplicationController
  after_action :set_version_header

  def identity_association
-    microsoft_indentity
+    microsoft_identity
  end

  private
@@ -11,7 +11,7 @@ class MicrosoftController < ApplicationController
    response.headers['Content-Length'] = { associatedApplications: [{ applicationId: @identity_json }] }.to_json.length
  end

-  def microsoft_indentity
+  def microsoft_identity
    @identity_json = GlobalConfigService.load('AZURE_APP_ID', nil)
  end
 end
--- a/app/controllers/platform/api/v1/accounts_controller.rb
+++ b/app/controllers/platform/api/v1/accounts_controller.rb
@@ -1,4 +1,11 @@
 class Platform::Api::V1::AccountsController < PlatformController
+  def index
+    @resources = @platform_app.platform_app_permissibles
+                              .where(permissible_type: 'Account')
+                              .includes(:permissible)
+                              .map(&:permissible)
+  end
+
  def show; end

  def create
--- a/app/controllers/slack_uploads_controller.rb
+++ b/app/controllers/slack_uploads_controller.rb
@@ -17,7 +17,12 @@ class SlackUploadsController < ApplicationController
  end

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

  def avatar_url
--- a/app/controllers/twilio/callback_controller.rb
+++ b/app/controllers/twilio/callback_controller.rb
@@ -30,7 +30,8 @@ class Twilio::CallbackController < ApplicationController
      :NumMedia,
      :Latitude,
      :Longitude,
-      :MessageType
+      :MessageType,
+      :ProfileName
    )
  end
 end
--- a/app/controllers/webhooks/instagram_controller.rb
+++ b/app/controllers/webhooks/instagram_controller.rb
@@ -4,7 +4,16 @@ class Webhooks::InstagramController < ActionController::API
  def events
    Rails.logger.info('Instagram webhook received events')
    if params['object'].casecmp('instagram').zero?
-      ::Webhooks::InstagramEventsJob.perform_later(params.to_unsafe_hash[:entry])
+      entry_params = params.to_unsafe_hash[:entry]
+
+      if contains_echo_event?(entry_params)
+        # Add delay to prevent race condition where echo arrives before send message API completes
+        # This avoids duplicate messages when echo comes early during API processing
+        ::Webhooks::InstagramEventsJob.set(wait: 2.seconds).perform_later(entry_params)
+      else
+        ::Webhooks::InstagramEventsJob.perform_later(entry_params)
+      end
+
      render json: :ok
    else
      Rails.logger.warn("Message is not received from the instagram webhook event: #{params['object']}")
@@ -14,6 +23,16 @@ class Webhooks::InstagramController < ActionController::API

  private

+  def contains_echo_event?(entry_params)
+    return false unless entry_params.is_a?(Array)
+
+    entry_params.any? do |entry|
+      # Check messaging array for echo events
+      messaging_events = entry[:messaging] || []
+      messaging_events.any? { |messaging| messaging.dig(:message, :is_echo).present? }
+    end
+  end
+
  def valid_token?(token)
    # Validates against both IG_VERIFY_TOKEN (Instagram channel via Facebook page) and
    # INSTAGRAM_VERIFY_TOKEN (Instagram channel via direct Instagram login)
--- a/app/finders/notification_finder.rb
+++ b/app/finders/notification_finder.rb
@@ -15,7 +15,13 @@ class NotificationFinder
  end

  def unread_count
-    @notifications.where(read_at: nil).count
+    if type_included?('read')
+      # If we're including read notifications, filter to unread
+      @notifications.where(read_at: nil).count
+    else
+      # Already filtered to unread notifications, just count
+      @notifications.count
+    end
  end

  def count
@@ -27,7 +33,7 @@ class NotificationFinder
  def set_up
    find_all_notifications
    filter_snoozed_notifications
-    fitler_read_notifications
+    filter_read_notifications
  end

  def find_all_notifications
@@ -38,7 +44,7 @@ class NotificationFinder
    @notifications = @notifications.where(snoozed_until: nil) unless type_included?('snoozed')
  end

-  def fitler_read_notifications
+  def filter_read_notifications
    @notifications = @notifications.where(read_at: nil) unless type_included?('read')
  end

--- a/app/helpers/reporting_event_helper.rb
+++ b/app/helpers/reporting_event_helper.rb
@@ -18,12 +18,25 @@ module ReportingEventHelper
  end

  def last_non_human_activity(conversation)
-    # check if a handoff event already exists
-    handoff_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_handoff').last
+    # Try to get either a handoff or reopened event first
+    # These will always take precedence over any other activity
+    # Also, any of these events can happen at any time in the course of a conversation lifecycle.
+    # So we pick the latest event
+    event = ReportingEvent.where(
+      conversation_id: conversation.id,
+      name: %w[conversation_bot_handoff conversation_opened]
+    ).order(event_end_time: :desc).first

-    # if a handoff exists, last non human activity is when the handoff ended,
-    # otherwise it's when the conversation was created
-    handoff_event&.event_end_time || conversation.created_at
+    return event.event_end_time if event&.event_end_time
+
+    # Fallback to bot resolved event
+    # Because this will be closest to the most accurate activity instead of conversation.created_at
+    bot_event = ReportingEvent.where(conversation_id: conversation.id, name: 'conversation_bot_resolved').last
+
+    return bot_event.event_end_time if bot_event&.event_end_time
+
+    # If no events found, return conversation creation time
+    conversation.created_at
  end

  private
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -136,8 +136,7 @@ export default {
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
-    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
-    :class="{ 'app-rtl--wrapper': isRTL }"
+    class="flex flex-col w-full h-screen min-h-0"
    :dir="isRTL ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
--- a/app/javascript/dashboard/api/captain/scenarios.js
+++ b/app/javascript/dashboard/api/captain/scenarios.js
@@ -0,0 +1,36 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainScenarios extends ApiClient {
+  constructor() {
+    super('captain/assistants', { accountScoped: true });
+  }
+
+  get({ assistantId, page = 1, searchKey } = {}) {
+    return axios.get(`${this.url}/${assistantId}/scenarios`, {
+      params: { page, searchKey },
+    });
+  }
+
+  show({ assistantId, id }) {
+    return axios.get(`${this.url}/${assistantId}/scenarios/${id}`);
+  }
+
+  create({ assistantId, ...data } = {}) {
+    return axios.post(`${this.url}/${assistantId}/scenarios`, {
+      scenario: data,
+    });
+  }
+
+  update({ assistantId, id }, data = {}) {
+    return axios.put(`${this.url}/${assistantId}/scenarios/${id}`, {
+      scenario: data,
+    });
+  }
+
+  delete({ assistantId, id }) {
+    return axios.delete(`${this.url}/${assistantId}/scenarios/${id}`);
+  }
+}
+
+export default new CaptainScenarios();
--- a/app/javascript/dashboard/api/captain/tools.js
+++ b/app/javascript/dashboard/api/captain/tools.js
@@ -0,0 +1,16 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CaptainTools extends ApiClient {
+  constructor() {
+    super('captain/assistants/tools', { accountScoped: true });
+  }
+
+  get(params = {}) {
+    return axios.get(this.url, {
+      params,
+    });
+  }
+}
+
+export default new CaptainTools();
--- a/app/javascript/dashboard/api/channel/whatsappChannel.js
+++ b/app/javascript/dashboard/api/channel/whatsappChannel.js
@@ -9,6 +9,13 @@ class WhatsappChannel extends ApiClient {
  createEmbeddedSignup(params) {
    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
  }
+
+  reauthorizeWhatsApp({ inboxId, ...params }) {
+    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
+      ...params,
+      inbox_id: inboxId,
+    });
+  }
 }

 export default new WhatsappChannel();
--- a/app/javascript/dashboard/api/helpCenter/portals.js
+++ b/app/javascript/dashboard/api/helpCenter/portals.js
@@ -21,6 +21,14 @@ class PortalsAPI extends ApiClient {
  deleteLogo(portalSlug) {
    return axios.delete(`${this.url}/${portalSlug}/logo`);
  }
+
+  sendCnameInstructions(portalSlug, email) {
+    return axios.post(`${this.url}/${portalSlug}/send_instructions`, { email });
+  }
+
+  sslStatus(portalSlug) {
+    return axios.get(`${this.url}/${portalSlug}/ssl_status`);
+  }
 }

 export default PortalsAPI;
--- a/app/javascript/dashboard/api/inboxes.js
+++ b/app/javascript/dashboard/api/inboxes.js
@@ -28,6 +28,10 @@ class Inboxes extends CacheEnabledApiClient {
      agent_bot: botId,
    });
  }
+
+  syncTemplates(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/sync_templates`);
+  }
 }

 export default new Inboxes();
--- a/app/javascript/dashboard/api/specs/inboxes.spec.js
+++ b/app/javascript/dashboard/api/specs/inboxes.spec.js
@@ -12,6 +12,7 @@ describe('#InboxesAPI', () => {
    expect(inboxesAPI).toHaveProperty('getCampaigns');
    expect(inboxesAPI).toHaveProperty('getAgentBot');
    expect(inboxesAPI).toHaveProperty('setAgentBot');
+    expect(inboxesAPI).toHaveProperty('syncTemplates');
  });

  describe('API calls', () => {
@@ -40,5 +41,12 @@ describe('#InboxesAPI', () => {
      inboxesAPI.deleteInboxAvatar(2);
      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
    });
+
+    it('#syncTemplates', () => {
+      inboxesAPI.syncTemplates(2);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/inboxes/2/sync_templates'
+      );
+    });
  });
 });
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -37,30 +37,6 @@ body {
  width: 100%;
 }

-.app-wrapper {
-  @apply h-screen flex-grow-0 min-h-0 w-full;
-
-  .button--fixed-top {
-    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
-  }
-}
-
-.banner + .app-wrapper {
-  // Reduce the height of the dashboard to make room for the banner.
-  // And causing the top right green-action button to be pushed down when scrolling.
-  @apply h-[calc(100%-48px)];
-
-  .button--fixed-top {
-    @apply top-14;
-  }
-
-  .off-canvas-content {
-    .button--fixed-top {
-      @apply top-2;
-    }
-  }
-}
-
 .tooltip {
  @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
 }
--- a/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue
@@ -76,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');

 const inboxIcon = computed(() => {
-  const { phone_number: phoneNumber, channel_type: type } = props.inbox;
-  return getInboxIconByType(type, phoneNumber);
+  const { medium, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, medium);
 });
 </script>

--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignDialog.vue
@@ -38,11 +38,13 @@ const handleClose = () => emit('close');

 <template>
  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
  >
-    <h3 class="text-base font-medium text-n-slate-12">
-      {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-    </h3>
-    <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+    <div class="p-6 flex flex-col gap-6">
+      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
+        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
+      </h3>
+      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
+    </div>
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
+++ b/app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue
@@ -9,6 +9,7 @@ import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
 import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
+import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';

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

@@ -18,7 +19,9 @@ const formState = {
  uiFlags: useMapGetter('campaigns/getUIFlags'),
  labels: useMapGetter('labels/getLabels'),
  inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getWhatsAppTemplates: useMapGetter('inboxes/getWhatsAppTemplates'),
+  getFilteredWhatsAppTemplates: useMapGetter(
+    'inboxes/getFilteredWhatsAppTemplates'
+  ),
 };

 const initialState = {
@@ -30,7 +33,7 @@ const initialState = {
 };

 const state = reactive({ ...initialState });
-const processedParams = ref({});
+const templateParserRef = ref(null);

 const rules = {
  title: { required, minLength: minLength(1) },
@@ -67,7 +70,7 @@ const inboxOptions = computed(() =>

 const templateOptions = computed(() => {
  if (!state.inboxId) return [];
-  const templates = formState.getWhatsAppTemplates.value(state.inboxId);
+  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
  return templates.map(template => {
    // Create a more user-friendly label from template name
    const friendlyName = template.name
@@ -88,26 +91,6 @@ const selectedTemplate = computed(() => {
    ?.template;
 });

-const templateString = computed(() => {
-  if (!selectedTemplate.value) return '';
-  try {
-    return (
-      selectedTemplate.value.components?.find(
-        component => component.type === 'BODY'
-      )?.text || ''
-    );
-  } catch (error) {
-    return '';
-  }
-});
-
-const processedString = computed(() => {
-  if (!templateString.value) return '';
-  return templateString.value.replace(/{{([^}]+)}}/g, (match, variable) => {
-    return processedParams.value[variable] || `{{${variable}}}`;
-  });
-});
-
 const getErrorMessage = (field, errorKey) => {
  const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
@@ -122,8 +105,7 @@ const formErrors = computed(() => ({
 }));

 const hasRequiredTemplateParams = computed(() => {
-  const params = Object.values(processedParams.value);
-  return params.length === 0 || params.every(param => param.trim() !== '');
+  return templateParserRef.value?.v$?.$invalid === false || true;
 });

 const isSubmitDisabled = computed(
@@ -135,32 +117,18 @@ const formatToUTCString = localDateTime =>

 const resetState = () => {
  Object.assign(state, initialState);
-  processedParams.value = {};
  v$.value.$reset();
 };

 const handleCancel = () => emit('cancel');

-const generateVariables = () => {
-  const matchedVariables = templateString.value.match(/{{([^}]+)}}/g);
-  if (!matchedVariables) {
-    processedParams.value = {};
-    return;
-  }
-
-  const finalVars = matchedVariables.map(match => match.replace(/{{|}}/g, ''));
-  processedParams.value = finalVars.reduce((acc, variable) => {
-    acc[variable] = processedParams.value[variable] || '';
-    return acc;
-  }, {});
-};
-
 const prepareCampaignDetails = () => {
  // Find the selected template to get its content
  const currentTemplate = selectedTemplate.value;
+  const parserData = templateParserRef.value;

  // Extract template content - this should be the template message body
-  const templateContent = templateString.value;
+  const templateContent = parserData?.renderedTemplate || '';

  // Prepare template_params object with the same structure as used in contacts
  const templateParams = {
@@ -168,7 +136,7 @@ const prepareCampaignDetails = () => {
    namespace: currentTemplate?.namespace || '',
    category: currentTemplate?.category || 'UTILITY',
    language: currentTemplate?.language || 'en_US',
-    processed_params: processedParams.value,
+    processed_params: parserData?.processedParams || {},
  };

  return {
@@ -198,15 +166,6 @@ watch(
  () => state.inboxId,
  () => {
    state.templateId = null;
-    processedParams.value = {};
-  }
-);
-
-// Generate variables when template changes
-watch(
-  () => state.templateId,
-  () => {
-    generateVariables();
  }
 );
 </script>
@@ -254,62 +213,12 @@ watch(
      </p>
    </div>

-    <!-- Template Preview -->
-    <div
+    <!-- Template Parser -->
+    <WhatsAppTemplateParser
      v-if="selectedTemplate"
-      class="flex flex-col gap-4 p-4 rounded-lg bg-n-alpha-black2"
-    >
-      <div class="flex justify-between items-center">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ selectedTemplate.name }}
-        </h3>
-        <span class="text-xs text-n-slate-11">
-          {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LANGUAGE') }}:
-          {{ selectedTemplate.language || 'en' }}
-        </span>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <div class="rounded-md bg-n-alpha-black3">
-          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
-            {{ processedString }}
-          </div>
-        </div>
-      </div>
-
-      <div class="text-xs text-n-slate-11">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.CATEGORY') }}:
-        {{ selectedTemplate.category || 'UTILITY' }}
-      </div>
-    </div>
-
-    <!-- Template Variables -->
-    <div
-      v-if="Object.keys(processedParams).length > 0"
-      class="flex flex-col gap-3"
-    >
-      <label class="text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLES_LABEL') }}
-      </label>
-      <div class="flex flex-col gap-2">
-        <div
-          v-for="(value, key) in processedParams"
-          :key="key"
-          class="flex gap-2 items-center"
-        >
-          <Input
-            v-model="processedParams[key]"
-            type="text"
-            class="flex-1"
-            :placeholder="
-              t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.VARIABLE_PLACEHOLDER', {
-                variable: key,
-              })
-            "
-          />
-        </div>
-      </div>
-    </div>
+      ref="templateParserRef"
+      :template="selectedTemplate"
+    />

    <div class="flex flex-col gap-1">
      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
--- a/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
@@ -98,6 +98,7 @@ const onClickViewDetails = () => emit('showContact', props.id);
        :src="thumbnail"
        :size="48"
        :status="availabilityStatus"
+        hide-offline-status
        rounded-full
      />
      <div class="flex flex-col gap-0.5 flex-1">
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed, useSlots, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+import { vOnClickOutside } from '@vueuse/components';

 import Button from 'dashboard/components-next/button/Button.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
@@ -24,6 +25,8 @@ const { t } = useI18n();
 const slots = useSlots();
 const route = useRoute();

+const isContactSidebarOpen = ref(false);
+
 const contactId = computed(() => route.params.contactId);

 const selectedContactName = computed(() => {
@@ -56,6 +59,15 @@ const handleBreadcrumbClick = () => {
 const toggleBlock = () => {
  emit('toggleBlock', isContactBlocked.value);
 };
+
+const handleConversationSidebarToggle = () => {
+  isContactSidebarOpen.value = !isContactSidebarOpen.value;
+};
+
+const closeMobileSidebar = () => {
+  if (!isContactSidebarOpen.value) return;
+  isContactSidebarOpen.value = false;
+};
 </script>

 <template>
@@ -67,7 +79,9 @@ const toggleBlock = () => {
    >
      <header class="sticky top-0 z-10 px-6 3xl:px-0">
        <div class="w-full mx-auto max-w-[40.625rem]">
-          <div class="flex items-center justify-between w-full h-20 gap-2">
+          <div
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+          >
            <Breadcrumb
              :items="breadcrumbItems"
              @click="handleBreadcrumbClick"
@@ -105,11 +119,65 @@ const toggleBlock = () => {
      </main>
    </div>

+    <!-- Desktop sidebar -->
    <div
      v-if="slots.sidebar"
-      class="overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
    >
      <slot name="sidebar" />
    </div>
+
+    <!-- Mobile sidebar container -->
+    <div
+      v-if="slots.sidebar"
+      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
+      :class="isContactSidebarOpen ? 'w-full' : 'w-16'"
+    >
+      <!-- Toggle button -->
+      <div
+        v-on-click-outside="[
+          closeMobileSidebar,
+          { ignore: ['#contact-sidebar-content'] },
+        ]"
+        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
+        :class="[
+          isContactSidebarOpen
+            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
+            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
+        ]"
+      >
+        <Button
+          ghost
+          slate
+          sm
+          class="!rounded-full rtl:rotate-180"
+          :class="{ 'bg-n-alpha-2': isContactSidebarOpen }"
+          :icon="
+            isContactSidebarOpen
+              ? 'i-lucide-panel-right-close'
+              : 'i-lucide-panel-right-open'
+          "
+          data-contact-sidebar-toggle
+          @click="handleConversationSidebarToggle"
+        />
+      </div>
+
+      <Transition
+        enter-active-class="transition-transform duration-200 ease-in-out"
+        leave-active-class="transition-transform duration-200 ease-in-out"
+        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
+        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
+      >
+        <div
+          v-if="isContactSidebarOpen"
+          id="contact-sidebar-content"
+          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+        >
+          <slot name="sidebar" />
+        </div>
+      </Transition>
+    </div>
  </section>
 </template>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -34,13 +34,13 @@ const emit = defineEmits([
 <template>
  <header class="sticky top-0 z-10">
    <div
-      class="flex items-center justify-between w-full h-20 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
    >
      <span class="text-xl font-medium truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
-      <div class="flex items-center flex-shrink-0 gap-4">
-        <div v-if="showSearch" class="flex items-center gap-2">
+      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
+        <div v-if="showSearch" class="flex items-center gap-2 w-full">
          <Input
            :model-value="searchValue"
            type="search"
@@ -48,6 +48,7 @@ const emit = defineEmits([
            :custom-input-class="[
              'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
            ]"
+            class="w-full"
            @input="emit('search', $event.target.value)"
          >
            <template #prefix>
@@ -58,64 +59,66 @@ const emit = defineEmits([
            </template>
          </Input>
        </div>
-        <div class="flex items-center gap-2">
-          <div v-if="!isLabelView && !isActiveView" class="relative">
+        <div class="flex items-center flex-shrink-0 gap-4">
+          <div class="flex items-center gap-2">
+            <div v-if="!isLabelView && !isActiveView" class="relative">
+              <Button
+                id="toggleContactsFilterButton"
+                :icon="
+                  isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+                "
+                color="slate"
+                size="sm"
+                class="relative w-8"
+                variant="ghost"
+                @click="emit('filter')"
+              >
+                <div
+                  v-if="hasActiveFilters && !isSegmentsView"
+                  class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
+                />
+              </Button>
+              <slot name="filter" />
+            </div>
            <Button
-              id="toggleContactsFilterButton"
-              :icon="
-                isSegmentsView ? 'i-lucide-pen-line' : 'i-lucide-list-filter'
+              v-if="
+                hasActiveFilters &&
+                !isSegmentsView &&
+                !isLabelView &&
+                !isActiveView
              "
+              icon="i-lucide-save"
              color="slate"
              size="sm"
-              class="relative w-8"
              variant="ghost"
-              @click="emit('filter')"
-            >
-              <div
-                v-if="hasActiveFilters && !isSegmentsView"
-                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-n-brand"
-              />
-            </Button>
-            <slot name="filter" />
+              @click="emit('createSegment')"
+            />
+            <Button
+              v-if="isSegmentsView && !isLabelView && !isActiveView"
+              icon="i-lucide-trash"
+              color="slate"
+              size="sm"
+              variant="ghost"
+              @click="emit('deleteSegment')"
+            />
+            <ContactSortMenu
+              :active-sort="activeSort"
+              :active-ordering="activeOrdering"
+              @update:sort="emit('update:sort', $event)"
+            />
+            <ContactMoreActions
+              @add="emit('add')"
+              @import="emit('import')"
+              @export="emit('export')"
+            />
          </div>
-          <Button
-            v-if="
-              hasActiveFilters &&
-              !isSegmentsView &&
-              !isLabelView &&
-              !isActiveView
-            "
-            icon="i-lucide-save"
-            color="slate"
-            size="sm"
-            variant="ghost"
-            @click="emit('createSegment')"
-          />
-          <Button
-            v-if="isSegmentsView && !isLabelView && !isActiveView"
-            icon="i-lucide-trash"
-            color="slate"
-            size="sm"
-            variant="ghost"
-            @click="emit('deleteSegment')"
-          />
-          <ContactSortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-          <ContactMoreActions
-            @add="emit('add')"
-            @import="emit('import')"
-            @export="emit('export')"
-          />
+          <div class="w-px h-4 bg-n-strong" />
+          <ComposeConversation>
+            <template #trigger="{ toggle }">
+              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            </template>
+          </ComposeConversation>
        </div>
-        <div class="w-px h-4 bg-n-strong" />
-        <ComposeConversation>
-          <template #trigger="{ toggle }">
-            <Button :label="buttonLabel" size="sm" @click="toggle" />
-          </template>
-        </ComposeConversation>
      </div>
    </div>
  </header>
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue
@@ -291,17 +291,20 @@ defineExpose({
    @delete-segment="openDeleteSegmentDialog"
  >
    <template #filter>
-      <ContactsFilter
-        v-if="showFiltersModal"
-        v-model="appliedFilter"
-        :segment-name="activeSegmentName"
-        :is-segment-view="hasActiveSegments"
-        class="absolute mt-1 ltr:right-0 rtl:left-0 top-full"
-        @apply-filter="onApplyFilter"
-        @update-segment="onUpdateSegment"
-        @close="closeAdvanceFiltersModal"
-        @clear-filters="clearFilters"
-      />
+      <div
+        class="absolute mt-1 ltr:-right-52 rtl:-left-52 sm:ltr:right-0 sm:rtl:left-0 top-full"
+      >
+        <ContactsFilter
+          v-if="showFiltersModal"
+          v-model="appliedFilter"
+          :segment-name="activeSegmentName"
+          :is-segment-view="hasActiveSegments"
+          @apply-filter="onApplyFilter"
+          @update-segment="onUpdateSegment"
+          @close="closeAdvanceFiltersModal"
+          @clear-filters="clearFilters"
+        />
+      </div>
    </template>
  </ContactsHeader>

--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue
@@ -105,7 +105,7 @@ const handleOrderChange = value => {
    <div
      v-if="isMenuOpen"
      v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:right-0 rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
    >
      <div class="flex items-center justify-between gap-2">
        <span class="text-sm text-n-slate-12">
--- a/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue
@@ -96,10 +96,7 @@ const openFilter = () => {
          <slot name="default" />
        </div>
      </main>
-      <footer
-        v-if="showPaginationFooter"
-        class="sticky bottom-0 z-10 px-4 pb-4"
-      >
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
        <PaginationFooter
          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
          :current-page="currentPage"
--- a/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
+++ b/app/javascript/dashboard/components-next/Contacts/EmptyState/contactEmptyStateContent.js
@@ -4,8 +4,8 @@ export default [
      city: 'Los Angeles',
      country: 'United States',
      description:
-        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Chatwoot.",
-      companyName: 'Chatwoot',
+        "I'm Candice, a developer focusing on building web solutions. Currently, I’m working as a Product Developer at Lumora.",
+      companyName: 'Lumora',
      countryCode: 'US',
      socialProfiles: {
        github: 'candice-dev',
@@ -16,7 +16,7 @@ export default [
      },
    },
    availabilityStatus: 'offline',
-    email: 'candice.matherson@chatwoot.com',
+    email: 'candice.matherson@lumora.com',
    id: 22,
    name: 'Candice Matherson',
    phoneNumber: '+14155552671',
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreview.vue
@@ -47,6 +47,7 @@ const unreadMessagesCount = computed(() => {
    </p>
    <div class="flex items-center flex-shrink-0 gap-2 pb-2">
      <Avatar
+        v-if="assignee.name"
        :name="assignee.name"
        :src="assignee.thumbnail"
        :size="20"
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue
@@ -96,6 +96,7 @@ defineExpose({
        />
      </div>
      <Avatar
+        v-if="assignee.name"
        :name="assignee.name"
        :src="assignee.thumbnail"
        :size="20"
--- a/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
+++ b/app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue
@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);

 const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
+  const { channelType, medium } = inbox.value;
+  return getInboxIconByType(channelType, medium);
 });

 const lastActivityAt = computed(() => {
--- a/app/javascript/dashboard/components-next/Editor/Editor.vue
+++ b/app/javascript/dashboard/components-next/Editor/Editor.vue
@@ -20,6 +20,7 @@ const props = defineProps({
  enableVariables: { type: Boolean, default: false },
  enableCannedResponses: { type: Boolean, default: true },
  enabledMenuOptions: { type: Array, default: () => [] },
+  enableCaptainTools: { type: Boolean, default: false },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -98,6 +99,7 @@ watch(
        :enable-variables="enableVariables"
        :enable-canned-responses="enableCannedResponses"
        :enabled-menu-options="enabledMenuOptions"
+        :enable-captain-tools="enableCaptainTools"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue
@@ -1,6 +1,9 @@
 <script setup>
 import { ref, reactive, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useVuelidate } from '@vuelidate/core';
+import { helpers } from '@vuelidate/validators';
+import { isValidDomain } from '@chatwoot/utils';

 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -26,6 +29,20 @@ const formState = reactive({
  customDomain: props.customDomain,
 });

+const rules = {
+  customDomain: {
+    isValidDomain: helpers.withMessage(
+      () =>
+        t(
+          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.FORMAT_ERROR'
+        ),
+      isValidDomain
+    ),
+  },
+};
+
+const v$ = useVuelidate(rules, formState);
+
 watch(
  () => props.customDomain,
  newVal => {
@@ -33,7 +50,10 @@ watch(
  }
 );

-const handleDialogConfirm = () => {
+const handleDialogConfirm = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
  emit('addCustomDomain', formState.customDomain);
 };

@@ -67,6 +87,11 @@ defineExpose({ dialogRef });
          'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DIALOG.PLACEHOLDER'
        )
      "
+      :message="
+        v$.customDomain.$error ? v$.customDomain.$errors[0].$message : ''
+      "
+      :message-type="v$.customDomain.$error ? 'error' : 'info'"
+      @blur="v$.customDomain.$touch()"
    />
  </Dialog>
 </template>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue
@@ -1,9 +1,15 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { reactive, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { copyTextToClipboard } from 'shared/helpers/clipboard';
 import { getHostNameFromURL } from 'dashboard/helper/URLHelper';
+import { email, required } from '@vuelidate/validators';
+import { useVuelidate } from '@vuelidate/core';

 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import NextButton from 'dashboard/components-next/button/Button.vue';

 const props = defineProps({
  customDomain: {
@@ -12,10 +18,20 @@ const props = defineProps({
  },
 });

-const emit = defineEmits(['confirm']);
+const emit = defineEmits(['send', 'close']);

 const { t } = useI18n();

+const state = reactive({
+  email: '',
+});
+
+const validationRules = {
+  email: { email, required },
+};
+
+const v$ = useVuelidate(validationRules, state);
+
 const domain = computed(() => {
  const { hostURL, helpCenterURL } = window?.chatwootConfig || {};
  return getHostNameFromURL(helpCenterURL) || getHostNameFromURL(hostURL) || '';
@@ -25,10 +41,34 @@ const subdomainCNAME = computed(
  () => `${props.customDomain} CNAME ${domain.value}`
 );

+const handleCopy = async e => {
+  e.stopPropagation();
+  await copyTextToClipboard(subdomainCNAME.value);
+  useAlert(
+    t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.COPY'
+    )
+  );
+};
+
 const dialogRef = ref(null);

-const handleDialogConfirm = () => {
-  emit('confirm');
+const resetForm = () => {
+  v$.value.$reset();
+  state.email = '';
+};
+
+const onClose = () => {
+  resetForm();
+  emit('close');
+};
+
+const handleSend = async () => {
+  const isFormCorrect = await v$.value.$validate();
+  if (!isFormCorrect) return;
+
+  emit('send', state.email);
+  onClose();
 };

 defineExpose({ dialogRef });
@@ -37,42 +77,103 @@ defineExpose({ dialogRef });
 <template>
  <Dialog
    ref="dialogRef"
-    :title="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
-      )
-    "
-    :confirm-button-label="
-      t(
-        'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.CONFIRM_BUTTON_LABEL'
-      )
-    "
    :show-cancel-button="false"
-    @confirm="handleDialogConfirm"
+    :show-confirm-button="false"
+    @close="resetForm"
  >
-    <template #description>
-      <p class="mb-0 text-sm text-n-slate-12">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
-          )
-        }}
-      </p>
-    </template>
+    <NextButton
+      icon="i-lucide-x"
+      sm
+      ghost
+      slate
+      class="flex-shrink-0 absolute top-2 ltr:right-2 rtl:left-2"
+      @click="onClose"
+    />
+    <div class="flex flex-col gap-6 divide-y divide-n-strong">
+      <div class="flex flex-col gap-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <div class="flex items-center gap-3 w-full">
+          <span
+            class="min-h-10 px-3 py-2.5 inline-flex items-center w-full text-sm bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
+          >
+            {{ subdomainCNAME }}
+          </span>
+          <NextButton
+            faded
+            slate
+            type="button"
+            icon="i-lucide-copy"
+            class="flex-shrink-0"
+            @click="handleCopy"
+          />
+        </div>
+      </div>

-    <div class="flex flex-col gap-6">
-      <span
-        class="h-10 px-3 py-2.5 text-sm select-none bg-transparent border rounded-lg text-n-slate-11 border-n-strong"
-      >
-        {{ subdomainCNAME }}
-      </span>
-      <p class="text-sm text-n-slate-12">
-        {{
-          t(
-            'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.HELP_TEXT'
-          )
-        }}
-      </p>
+      <div class="flex flex-col gap-6 pt-6">
+        <div class="flex flex-col gap-2 ltr:pr-10 rtl:pl-10">
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.HEADER'
+              )
+            }}
+          </h3>
+          <p class="mb-0 text-sm text-n-slate-12">
+            {{
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.DESCRIPTION'
+              )
+            }}
+          </p>
+        </div>
+        <form
+          class="flex items-start gap-3 w-full"
+          @submit.prevent="handleSend"
+        >
+          <Input
+            v-model="state.email"
+            :placeholder="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.PLACEHOLDER'
+              )
+            "
+            :message="
+              v$.email.$error
+                ? t(
+                    'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.ERROR'
+                  )
+                : ''
+            "
+            :message-type="v$.email.$error ? 'error' : 'info'"
+            class="w-full"
+            @blur="v$.email.$touch()"
+          />
+          <NextButton
+            :label="
+              t(
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.DNS_CONFIGURATION_DIALOG.SEND_INSTRUCTIONS.SEND_BUTTON'
+              )
+            "
+            type="submit"
+            class="flex-shrink-0"
+          />
+        </form>
+      </div>
    </div>
  </Dialog>
 </template>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue
@@ -7,8 +7,8 @@ import { useStore, useStoreGetters } from 'dashboard/composables/store';
 import { uploadFile } from 'dashboard/helper/uploadHelper';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useVuelidate } from '@vuelidate/core';
-import { required, minLength, helpers } from '@vuelidate/validators';
-import { shouldBeUrl, isValidSlug } from 'shared/helpers/Validators';
+import { required, minLength, helpers, url } from '@vuelidate/validators';
+import { isValidSlug } from 'shared/helpers/Validators';

 import Button from 'dashboard/components-next/button/Button.vue';
 import Input from 'dashboard/components-next/input/Input.vue';
@@ -71,7 +71,7 @@ const rules = {
      isValidSlug
    ),
  },
-  homePageLink: { shouldBeUrl },
+  homePageLink: { url },
 };

 const v$ = useVuelidate(rules, state);
@@ -315,7 +315,9 @@ const handleAvatarDelete = () => {
          class="[&>div>button:not(.focused)]:!outline-n-weak"
        />
      </div>
-      <div class="flex items-start justify-between w-full gap-2">
+      <div
+        class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
+      >
        <label
          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
        >
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalConfigurationSettings.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { useAccount } from 'dashboard/composables/useAccount';

 import AddCustomDomainDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/AddCustomDomainDialog.vue';
 import DNSConfigurationDialog from 'dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/DNSConfigurationDialog.vue';
@@ -11,11 +12,52 @@ const props = defineProps({
    type: Object,
    required: true,
  },
+  isFetchingStatus: {
+    type: Boolean,
+    required: true,
+  },
 });

-const emit = defineEmits(['updatePortalConfiguration']);
+const emit = defineEmits([
+  'updatePortalConfiguration',
+  'refreshStatus',
+  'sendCnameInstructions',
+]);
+
+const SSL_STATUS = {
+  LIVE: ['active', 'staging_active'],
+  PENDING: [
+    'provisioned',
+    'pending',
+    'initializing',
+    'pending_validation',
+    'pending_deployment',
+    'pending_issuance',
+    'holding_deployment',
+    'holding_validation',
+    'pending_expiration',
+    'pending_cleanup',
+    'pending_deletion',
+    'staging_deployment',
+    'backup_issued',
+  ],
+  ERROR: [
+    'blocked',
+    'inactive',
+    'moved',
+    'expired',
+    'deleted',
+    'timed_out_initializing',
+    'timed_out_validation',
+    'timed_out_issuance',
+    'timed_out_deployment',
+    'timed_out_deletion',
+    'deactivating',
+  ],
+};

 const { t } = useI18n();
+const { isOnChatwootCloud } = useAccount();

 const addCustomDomainDialogRef = ref(null);
 const dnsConfigurationDialogRef = ref(null);
@@ -25,6 +67,45 @@ const customDomainAddress = computed(
  () => props.activePortal?.custom_domain || ''
 );

+const sslSettings = computed(() => props.activePortal?.ssl_settings || {});
+const verificationErrors = computed(
+  () => sslSettings.value.verification_errors || ''
+);
+
+const isLive = computed(() =>
+  SSL_STATUS.LIVE.includes(sslSettings.value.status)
+);
+const isPending = computed(() =>
+  SSL_STATUS.PENDING.includes(sslSettings.value.status)
+);
+const isError = computed(() =>
+  SSL_STATUS.ERROR.includes(sslSettings.value.status)
+);
+
+const statusText = computed(() => {
+  if (isLive.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.LIVE'
+    );
+  if (isPending.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.PENDING'
+    );
+  if (isError.value)
+    return t(
+      'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS.ERROR'
+    );
+  return '';
+});
+
+const statusColors = computed(() => {
+  if (isLive.value)
+    return { text: 'text-n-teal-11', bubble: 'outline-n-teal-6 bg-n-teal-9' };
+  if (isError.value)
+    return { text: 'text-n-ruby-11', bubble: 'outline-n-ruby-6 bg-n-ruby-9' };
+  return { text: 'text-n-amber-11', bubble: 'outline-n-amber-6 bg-n-amber-9' };
+});
+
 const updatePortalConfiguration = customDomain => {
  const portal = {
    id: props.activePortal?.id,
@@ -42,6 +123,17 @@ const closeDNSConfigurationDialog = () => {
  updatedDomainAddress.value = '';
  dnsConfigurationDialogRef.value.dialogRef.close();
 };
+
+const onClickRefreshSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const onClickSend = email => {
+  emit('sendCnameInstructions', {
+    portalSlug: props.activePortal?.slug,
+    email,
+  });
+};
 </script>

 <template>
@@ -63,33 +155,76 @@ const closeDNSConfigurationDialog = () => {
      </span>
    </div>
    <div class="flex flex-col w-full gap-4">
-      <div class="flex justify-between w-full gap-2">
-        <div
-          v-if="customDomainAddress"
-          class="flex items-center w-full h-8 gap-4"
-        >
-          <label class="text-sm font-medium text-n-slate-12">
+      <div class="flex items-center justify-between w-full gap-2">
+        <div v-if="customDomainAddress" class="flex flex-col gap-1">
+          <div class="flex items-center w-full h-8 gap-4">
+            <label class="text-sm font-medium text-n-slate-12">
+              {{
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+                )
+              }}
+            </label>
+            <span class="text-sm text-n-slate-12">
+              {{ customDomainAddress }}
+            </span>
+          </div>
+          <span
+            v-if="!isLive && isOnChatwootCloud"
+            class="text-sm text-n-slate-11"
+          >
            {{
              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.LABEL'
+                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.STATUS_DESCRIPTION'
              )
            }}
-          </label>
-          <span class="text-sm text-n-slate-12">
-            {{ customDomainAddress }}
          </span>
        </div>
-        <div class="flex items-center justify-end w-full">
-          <Button
-            v-if="customDomainAddress"
-            color="slate"
-            :label="
-              t(
-                'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
-              )
-            "
-            @click="addCustomDomainDialogRef.dialogRef.open()"
-          />
+        <div class="flex items-center">
+          <div v-if="customDomainAddress" class="flex items-center gap-3">
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              v-tooltip="verificationErrors"
+              class="flex items-center gap-3 flex-shrink-0"
+            >
+              <span
+                class="size-1.5 rounded-full outline outline-2 block flex-shrink-0"
+                :class="statusColors.bubble"
+              />
+              <span
+                :class="statusColors.text"
+                class="text-sm leading-[16px] font-medium"
+              >
+                {{ statusText }}
+              </span>
+            </div>
+            <div
+              v-if="statusText && isOnChatwootCloud"
+              class="w-px h-3 bg-n-weak"
+            />
+            <Button
+              slate
+              sm
+              link
+              :label="
+                t(
+                  'HELP_CENTER.PORTAL_SETTINGS.CONFIGURATION_FORM.CUSTOM_DOMAIN.EDIT_BUTTON'
+                )
+              "
+              class="hover:!no-underline flex-shrink-0"
+              @click="addCustomDomainDialogRef.dialogRef.open()"
+            />
+            <div v-if="isOnChatwootCloud" class="w-px h-3 bg-n-weak" />
+            <Button
+              v-if="isOnChatwootCloud"
+              slate
+              sm
+              link
+              icon="i-lucide-refresh-ccw"
+              :class="isFetchingStatus && 'animate-spin'"
+              @click="onClickRefreshSSLStatus"
+            />
+          </div>
          <Button
            v-else
            :label="
@@ -112,7 +247,8 @@ const closeDNSConfigurationDialog = () => {
    <DNSConfigurationDialog
      ref="dnsConfigurationDialogRef"
      :custom-domain="updatedDomainAddress || customDomainAddress"
-      @confirm="closeDNSConfigurationDialog"
+      @close="closeDNSConfigurationDialog"
+      @send="onClickSend"
    />
  </div>
 </template>
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue
@@ -26,6 +26,8 @@ const emit = defineEmits([
  'updatePortal',
  'updatePortalConfiguration',
  'deletePortal',
+  'refreshStatus',
+  'sendCnameInstructions',
 ]);

 const { t } = useI18n();
@@ -36,6 +38,7 @@ const confirmDeletePortalDialogRef = ref(null);
 const currentPortalSlug = computed(() => route.params.portalSlug);

 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
+const isFetchingSSLStatus = useMapGetter('portals/isFetchingSSLStatus');

 const activePortal = computed(() => {
  return props.portals?.find(portal => portal.slug === currentPortalSlug.value);
@@ -53,6 +56,14 @@ const handleUpdatePortalConfiguration = portal => {
  emit('updatePortalConfiguration', portal);
 };

+const fetchSSLStatus = () => {
+  emit('refreshStatus');
+};
+
+const handleSendCnameInstructions = payload => {
+  emit('sendCnameInstructions', payload);
+};
+
 const openConfirmDeletePortalDialog = () => {
  confirmDeletePortalDialogRef.value.dialogRef.open();
 };
@@ -85,7 +96,10 @@ const handleDeletePortal = () => {
        <PortalConfigurationSettings
          :active-portal="activePortal"
          :is-fetching="isFetching"
+          :is-fetching-status="isFetchingSSLStatus"
          @update-portal-configuration="handleUpdatePortalConfiguration"
+          @refresh-status="fetchSSLStatus"
+          @send-cname-instructions="handleSendCnameInstructions"
        />
        <div class="w-full h-px bg-n-weak" />
        <div class="flex items-end justify-between w-full gap-4">
--- a/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/Inbox/InboxCard.vue
@@ -49,8 +49,8 @@ const isUnread = computed(() => !props.inboxItem?.readAt);
 const inbox = computed(() => props.stateInbox);

 const inboxIcon = computed(() => {
-  const { phoneNumber, channelType } = inbox.value;
-  return getInboxIconByType(channelType, phoneNumber);
+  const { channelType, medium } = inbox.value;
+  return getInboxIconByType(channelType, medium);
 });

 const hasSlaThreshold = computed(() => {
@@ -63,11 +63,12 @@ const lastActivityAt = computed(() => {
 });

 const menuItems = computed(() => [
-  { key: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
  {
    key: isUnread.value ? 'mark_as_read' : 'mark_as_unread',
+    icon: isUnread.value ? 'mail' : 'mail-unread',
    label: t(`INBOX.MENU_ITEM.MARK_AS_${isUnread.value ? 'READ' : 'UNREAD'}`),
  },
+  { key: 'delete', icon: 'delete', label: t('INBOX.MENU_ITEM.DELETE') },
 ]);

 const messageClasses = computed(() => ({
@@ -153,7 +154,7 @@ onBeforeMount(contextMenuActions.close);
 <template>
  <div
    role="button"
-    class="flex flex-col w-full gap-2 p-3 transition-all duration-300 ease-in-out cursor-pointer"
+    class="flex flex-col w-full gap-1 p-3 transition-all duration-300 ease-in-out cursor-pointer"
    @contextmenu="contextMenuActions.open($event)"
    @click="emit('click')"
  >
@@ -232,7 +233,7 @@ onBeforeMount(contextMenuActions.close);
            class="flex-shrink-0 text-n-slate-11 size-2.5"
          />
        </div>
-        <span class="text-sm text-n-slate-10">
+        <span class="text-xs text-n-slate-10">
          {{ lastActivityAt }}
        </span>
      </div>
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -2,6 +2,7 @@
 import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
@@ -15,6 +16,7 @@ import {
  processContactableInboxes,
  mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+import wootConstants from 'dashboard/constants/globals';

 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';

@@ -37,9 +39,16 @@ const emit = defineEmits(['close']);

 const store = useStore();
 const { t } = useI18n();
+const { width: windowWidth } = useWindowSize();

 const { fetchSignatureFlagFromUISettings } = useUISettings();

+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const viewInModal = computed(() => props.isModal || isSmallScreen.value);
+
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
@@ -67,7 +76,7 @@ const directUploadsEnabled = computed(
 const activeContact = computed(() => contactById.value(props.contactId));

 const composePopoverClass = computed(() => {
-  if (props.isModal) return '';
+  if (viewInModal.value) return '';

  return props.alignPosition === 'right'
    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -179,14 +188,18 @@ const toggle = () => {

 watch(
  activeContact,
-  () => {
-    if (activeContact.value && props.contactId) {
-      const contactInboxes = activeContact.value?.contactInboxes || [];
+  (currentContact, previousContact) => {
+    if (currentContact && props.contactId) {
+      // Reset on contact change
+      if (currentContact?.id !== previousContact?.id) clearSelectedContact();
+
      // First process the contactable inboxes to get the right structure
-      const processedInboxes = processContactableInboxes(contactInboxes);
+      const processedInboxes = processContactableInboxes(
+        currentContact.contactInboxes || []
+      );
      // Then Merge processedInboxes with the inboxes list
      selectedContact.value = {
-        ...activeContact.value,
+        ...currentContact,
        contactInboxes: mergeInboxDetails(processedInboxes, inboxesList.value),
      };
    }
@@ -202,7 +215,7 @@ const handleClickOutside = () => {
 };

 const onModalBackdropClick = () => {
-  if (!props.isModal) return;
+  if (!viewInModal.value) return;
  handleClickOutside();
 };

@@ -231,7 +244,7 @@ useKeyboardEvents(keyboardEvents);
    ]"
    class="relative"
    :class="{
-      'z-40': showComposeNewConversation,
+      'z-50': showComposeNewConversation && !viewInModal,
    }"
  >
    <slot
@@ -243,12 +256,12 @@ useKeyboardEvents(keyboardEvents);
      v-if="showComposeNewConversation"
      :class="{
        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          isModal,
+          viewInModal,
      }"
      @click.self="onModalBackdropClick"
    >
      <ComposeNewConversationForm
-        :class="[{ 'mt-2': !isModal }, composePopoverClass]"
+        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
        :contacts="contacts"
        :contact-id="contactId"
        :is-loading="isSearching"
--- a/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ActionButtons.vue
@@ -25,6 +25,7 @@ const props = defineProps({
  hasNoInbox: { type: Boolean, default: false },
  isDropdownActive: { type: Boolean, default: false },
  messageSignature: { type: String, default: '' },
+  inboxId: { type: Number, default: null },
 });

 const emit = defineEmits([
@@ -150,9 +151,10 @@ useKeyboardEvents(keyboardEvents);
  <div
    class="flex items-center justify-between w-full h-[3.25rem] gap-2 px-4 py-3"
  >
-    <div class="flex items-center gap-2">
+    <div class="flex gap-2 items-center">
      <WhatsAppOptions
        v-if="isWhatsappInbox"
+        :inbox-id="inboxId"
        :message-templates="messageTemplates"
        @send-message="emit('sendWhatsappMessage', $event)"
      />
@@ -170,7 +172,7 @@ useKeyboardEvents(keyboardEvents);
        />
        <EmojiInput
          v-if="isEmojiPickerOpen"
-          class="left-0 top-full mt-1.5"
+          class="ltr:left-0 rtl:right-0 top-full mt-1.5"
          :on-click="onClickInsertEmoji"
        />
      </div>
@@ -206,7 +208,7 @@ useKeyboardEvents(keyboardEvents);
      />
    </div>

-    <div class="flex items-center gap-2">
+    <div class="flex gap-2 items-center">
      <Button
        :label="t('COMPOSE_NEW_CONVERSATION.FORM.ACTION_BUTTONS.DISCARD')"
        variant="faded"
--- a/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/AttachmentPreviews.vue
@@ -57,7 +57,7 @@ const removeAttachment = id => {
          variant="ghost"
          icon="i-lucide-trash"
          color="slate"
-          class="absolute top-1 right-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
+          class="absolute top-1 ltr:right-1 rtl:left-1 !w-5 !h-5 transition-opacity duration-150 ease-in-out opacity-0 group-hover/image:opacity-100"
          @click="removeAttachment(attachment.resource.id)"
        />
      </div>
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -265,7 +265,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {

 <template>
  <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0"
  >
    <ContactSelector
      :contacts="contacts"
@@ -336,6 +336,7 @@ const handleSendWhatsappMessage = async ({ message, templateParams }) => {
      :is-loading="isCreating"
      :disable-send-button="isCreating"
      :has-selected-inbox="!!targetInbox"
+      :inbox-id="targetInbox?.id"
      :has-no-inbox="showNoInboxAlert"
      :is-dropdown-active="isAnyDropdownActive"
      :message-signature="messageSignature"
--- a/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/InboxSelector.vue
@@ -83,7 +83,7 @@ const targetInboxLabel = computed(() => {
      <DropdownMenu
        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
        :menu-items="contactableInboxesList"
-        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
        @action="emit('handleInboxAction', $event)"
      />
    </div>
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue
@@ -1,23 +1,25 @@
 <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 WhatsappTemplateParser from './WhatsappTemplateParser.vue';
+import WhatsappTemplate from './WhatsappTemplate.vue';

 const props = defineProps({
-  messageTemplates: {
-    type: Array,
-    default: () => [],
+  inboxId: {
+    type: Number,
+    required: true,
  },
 });

 const emit = defineEmits(['sendMessage']);

 const { t } = useI18n();
-
-// TODO: Remove this when we support all formats
-const formatsToRemove = ['DOCUMENT', 'IMAGE', 'VIDEO'];
+const getFilteredWhatsAppTemplates = useMapGetter(
+  'inboxes/getFilteredWhatsAppTemplates'
+);

 const searchQuery = ref('');
 const selectedTemplate = ref(null);
@@ -25,19 +27,7 @@ const selectedTemplate = ref(null);
 const showTemplatesMenu = ref(false);

 const whatsAppTemplateMessages = computed(() => {
-  // Add null check and ensure it's an array
-  const templates = Array.isArray(props.messageTemplates)
-    ? props.messageTemplates
-    : [];
-
-  // TODO: Remove the last filter when we support all formats
-  return templates
-    .filter(template => template?.status?.toLowerCase() === 'approved')
-    .filter(template => {
-      return template?.components?.every(component => {
-        return !formatsToRemove.includes(component.format);
-      });
-    });
+  return getFilteredWhatsAppTemplates.value(props.inboxId);
 });

 const filteredTemplates = computed(() => {
@@ -84,10 +74,13 @@ const handleSendMessage = template => {
    />
    <div
      v-if="showTemplatesMenu"
-      class="absolute top-full mt-1.5 max-h-96 overflow-y-auto left-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+      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="relative w-full">
-        <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+        <Icon
+          icon="i-lucide-search"
+          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
        <input
          v-model="searchQuery"
          type="search"
@@ -96,13 +89,13 @@ const handleSendMessage = template => {
              'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
            )
          "
-          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
        />
      </div>
      <div
        v-for="template in filteredTemplates"
        :key="template.id"
-        class="flex flex-col w-full gap-2 p-2 rounded-lg cursor-pointer dark:hover:bg-n-alpha-3 hover:bg-n-alpha-1"
+        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)"
      >
        <span class="text-sm text-n-slate-12">{{ template.name }}</span>
@@ -111,12 +104,12 @@ const handleSendMessage = template => {
        </p>
      </div>
      <template v-if="filteredTemplates.length === 0">
-        <p class="w-full pt-2 text-sm text-n-slate-11">
+        <p class="pt-2 w-full text-sm text-n-slate-11">
          {{ t('COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.EMPTY_STATE') }}
        </p>
      </template>
    </div>
-    <WhatsappTemplateParser
+    <WhatsappTemplate
      v-if="selectedTemplate"
      :template="selectedTemplate"
      @send-message="handleSendMessage"
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplate.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplate.vue
@@ -0,0 +1,64 @@
+<script setup>
+import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useI18n } from 'vue-i18n';
+
+defineProps({
+  template: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'back']);
+
+const { t } = useI18n();
+
+const handleSendMessage = payload => {
+  emit('sendMessage', payload);
+};
+
+const handleBack = () => {
+  emit('back');
+};
+</script>
+
+<template>
+  <div
+    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+  >
+    <div class="w-full">
+      <WhatsAppTemplateParser
+        :template="template"
+        @send-message="handleSendMessage"
+        @back="handleBack"
+      >
+        <template #actions="{ sendMessage, goBack, disabled }">
+          <div class="flex gap-3 justify-between items-end w-full h-14">
+            <Button
+              :label="
+                t(
+                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.BACK'
+                )
+              "
+              color="slate"
+              variant="faded"
+              class="w-full font-medium"
+              @click="goBack"
+            />
+            <Button
+              :label="
+                t(
+                  'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.TEMPLATE_PARSER.SEND_MESSAGE'
+                )
+              "
+              class="w-full font-medium"
+              :disabled="disabled"
+              @click="sendMessage"
+            />
+          </div>
+        </template>
+      </WhatsAppTemplateParser>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/WhatsappTemplateParser.vue
@@ -106,7 +106,7 @@ onMounted(() => {

 <template>
  <div
-    class="absolute top-full mt-1.5 max-h-[30rem] overflow-y-auto left-0 flex flex-col gap-4 px-4 pt-6 pb-5 items-start w-[28.75rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
+    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">
      {{
@@ -138,7 +138,8 @@ onMounted(() => {
      class="flex items-center w-full gap-2"
    >
      <span
-        class="flex items-center h-8 text-sm min-w-6 ltr:text-left rtl:text-right text-n-slate-10"
+        class="block h-8 text-sm min-w-6 text-start truncate text-n-slate-10 leading-8"
+        :title="key"
      >
        {{ key }}
      </span>
--- a/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
+++ b/app/javascript/dashboard/components-next/NewConversation/helpers/composeConversationHelper.js
@@ -36,10 +36,11 @@ const transformInbox = ({
  email,
  channelType,
  phoneNumber,
+  medium,
  ...rest
 }) => ({
  id,
-  icon: getInboxIconByType(channelType, phoneNumber, 'line'),
+  icon: getInboxIconByType(channelType, medium, 'line'),
  label: generateLabelForContactableInboxesList({
    name,
    email,
--- a/app/javascript/dashboard/components-next/avatar/Avatar.vue
+++ b/app/javascript/dashboard/components-next/avatar/Avatar.vue
@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { removeEmoji } from 'shared/helpers/emoji';

 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
 import wootConstants from 'dashboard/constants/globals';

 const props = defineProps({
@@ -33,10 +34,18 @@ const props = defineProps({
    validator: value =>
      !value || wootConstants.AVAILABILITY_STATUS_KEYS.includes(value),
  },
+  inbox: {
+    type: Object,
+    default: null,
+  },
  iconName: {
    type: String,
    default: null,
  },
+  hideOfflineStatus: {
+    type: Boolean,
+    default: false,
+  },
 });

 const emit = defineEmits(['upload', 'delete']);
@@ -66,11 +75,11 @@ const AVATAR_COLORS = {
  default: { bg: '#E8E8E8', text: '#60646C' },
 };

-const STATUS_CLASSES = {
+const STATUS_CLASSES = computed(() => ({
  online: 'bg-n-teal-10',
  busy: 'bg-n-amber-10',
-  offline: 'bg-n-slate-10',
-};
+  ...(props.hideOfflineStatus ? {} : { offline: 'bg-n-slate-10' }),
+}));

 const showDefaultAvatar = computed(() => !props.src && !props.name);

@@ -174,21 +183,31 @@ watch(
 </script>

 <template>
-  <span class="relative inline-flex group/avatar z-0" :style="containerStyles">
+  <span
+    class="relative inline-flex group/avatar z-0 flex-shrink-0"
+    :style="containerStyles"
+  >
    <!-- Status Badge -->
    <slot name="badge" :size="size">
      <div
-        v-if="status"
+        v-if="status && STATUS_CLASSES[status]"
        class="absolute z-20 border rounded-full border-n-slate-3"
        :style="badgeStyles"
        :class="STATUS_CLASSES[status]"
      />
+      <div
+        v-if="inbox && !(status && STATUS_CLASSES[status])"
+        :style="badgeStyles"
+        class="absolute z-20 flex items-center justify-center rounded-full bg-n-solid-1 border border-transparent flex-shrink-0"
+      >
+        <ChannelIcon :inbox="inbox" class="w-full h-full text-n-slate-11" />
+      </div>
    </slot>

    <!-- Delete Avatar Button -->
    <div
      v-if="src && allowUpload"
-      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 -right-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
+      class="absolute z-20 flex items-center justify-center invisible w-6 h-6 transition-all duration-300 ease-in-out opacity-0 cursor-pointer outline outline-1 outline-n-container -top-2 ltr:-right-2 rtl:-left-2 rounded-xl bg-n-solid-3 group-hover/avatar:visible group-hover/avatar:opacity-100"
      @click="handleDismiss"
    >
      <Icon icon="i-lucide-x" class="text-n-slate-11 size-4" />
@@ -232,31 +251,40 @@ watch(
        <!-- Fallback Icon if no name or image -->
        <Icon
          v-else
-          v-tooltip.top-start="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
+          :title="t('THUMBNAIL.AUTHOR.NOT_AVAILABLE')"
          icon="i-lucide-user"
          :style="iconStyles"
        />
      </template>

      <!-- Upload Overlay and Input -->
-      <div
-        v-if="allowUpload"
-        class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-        @click="handleUploadAvatar"
+      <slot
+        v-if="allowUpload || $slots.overlay"
+        name="overlay"
+        :size="size"
+        :handle-upload="handleUploadAvatar"
+        :file-input-ref="fileInput"
+        :handle-image-upload="handleImageUpload"
      >
-        <Icon
-          icon="i-lucide-upload"
-          class="text-white"
-          :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
-        />
-        <input
-          ref="fileInput"
-          type="file"
-          accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
-          class="hidden"
-          @change="handleImageUpload"
-        />
-      </div>
+        <div
+          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          @click="handleUploadAvatar"
+        >
+          <Icon
+            icon="i-lucide-upload"
+            class="text-white"
+            :style="{ width: `${size / 2}px`, height: `${size / 2}px` }"
+          />
+          <input
+            v-if="allowUpload"
+            ref="fileInput"
+            type="file"
+            accept="image/png, image/jpeg, image/jpg, image/gif, image/webp"
+            class="hidden"
+            @change="handleImageUpload"
+          />
+        </div>
+      </slot>
    </span>
  </span>
 </template>
--- a/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
+++ b/app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue
@@ -21,9 +21,17 @@ const onClick = (item, index) => {
 </script>

 <template>
-  <nav :aria-label="t('BREADCRUMB.ARIA_LABEL')" class="flex items-center h-8">
-    <ol class="flex items-center mb-0">
-      <li v-for="(item, index) in items" :key="index" class="flex items-center">
+  <nav
+    :aria-label="t('BREADCRUMB.ARIA_LABEL')"
+    class="flex items-center h-8 min-w-0"
+  >
+    <ol class="flex items-center mb-0 min-w-0">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="flex items-center"
+        :class="{ 'min-w-0 flex-1': index === items.length - 1 }"
+      >
        <Icon
          v-if="index > 0"
          icon="i-lucide-chevron-right"
@@ -40,7 +48,7 @@ const onClick = (item, index) => {
        </button>

        <!-- The last breadcrumb item is plain text -->
-        <span v-else class="text-sm truncate text-n-slate-12 max-w-56">
+        <span v-else class="text-sm truncate text-n-slate-12 min-w-0 block">
          {{ item.emoji ? item.emoji : '' }} {{ item.label }}
        </span>
      </li>
--- a/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue
+++ b/app/javascript/dashboard/components-next/captain/SettingsPageLayout.vue
@@ -52,10 +52,10 @@ const handleBreadcrumbClick = item => {

 <template>
  <section
-    class="my-4 px-10 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
+    class="px-6 flex flex-col w-full h-screen overflow-y-auto bg-n-background"
  >
-    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full">
-      <header class="mb-7 sticky top-0 z-10 bg-n-background">
+    <div class="max-w-[60rem] mx-auto flex flex-col w-full h-full mb-4">
+      <header class="mb-7 sticky top-0 bg-n-background pt-4 z-20">
        <Breadcrumb :items="breadcrumbItems" @click="handleBreadcrumbClick" />
      </header>
      <main class="flex gap-16 w-full flex-1 pb-16">
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.story.vue
@@ -0,0 +1,21 @@
+<script setup>
+import AddNewRulesDialog from './AddNewRulesDialog.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/AddNewRulesDialog"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-4 py-4 bg-n-background h-[200px]">
+        <AddNewRulesDialog
+          button-label="Add a guardrail"
+          placeholder="Type in another guardrail..."
+          confirm-label="Create"
+          cancel-label="Cancel"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesDialog.vue
@@ -0,0 +1,81 @@
+<script setup>
+import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  buttonLabel: {
+    type: String,
+    default: '',
+  },
+  confirmLabel: {
+    type: String,
+    default: '',
+  },
+  cancelLabel: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+
+const [showPopover, togglePopover] = useToggle();
+const onClickAdd = () => {
+  if (!modelValue.value?.trim()) return;
+  emit('add', modelValue.value.trim());
+  modelValue.value = '';
+  togglePopover(false);
+};
+
+const onClickCancel = () => {
+  togglePopover(false);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => togglePopover(false)"
+    class="inline-flex relative"
+  >
+    <Button
+      :label="buttonLabel"
+      sm
+      slate
+      class="flex-shrink-0"
+      @click="togglePopover(!showPopover)"
+    />
+    <div
+      v-if="showPopover"
+      class="absolute w-[26.5rem] top-9 z-50 ltr:left-0 rtl:right-0 flex flex-col gap-5 bg-n-alpha-3 backdrop-blur-[100px] p-4 rounded-xl border border-n-weak shadow-md"
+    >
+      <InlineInput
+        v-model="modelValue"
+        :placeholder="placeholder"
+        @keyup.enter="onClickAdd"
+      />
+      <div class="flex gap-2 justify-between">
+        <Button
+          :label="cancelLabel"
+          sm
+          link
+          slate
+          class="h-10 hover:!no-underline"
+          @click="onClickCancel"
+        />
+        <Button :label="confirmLabel" sm @click="onClickAdd" />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.story.vue
@@ -0,0 +1,19 @@
+<script setup>
+import AddNewRulesInput from './AddNewRulesInput.vue';
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/AddNewRulesInput"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div class="px-6 py-4 bg-n-background">
+        <AddNewRulesInput
+          placeholder="Type in another response guideline..."
+          label="Add and save (↵)"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewRulesInput.vue
@@ -0,0 +1,51 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['add']);
+
+const modelValue = defineModel({
+  type: String,
+  default: '',
+});
+
+const onClickAdd = () => {
+  if (!modelValue.value?.trim()) return;
+  emit('add', modelValue.value.trim());
+  modelValue.value = '';
+};
+</script>
+
+<template>
+  <div
+    class="flex py-3 ltr:pl-3 h-16 rtl:pr-3 ltr:pr-4 rtl:pl-4 items-center gap-3 rounded-xl bg-n-solid-2 outline-1 outline outline-n-container"
+  >
+    <Icon icon="i-lucide-plus" class="text-n-slate-10 size-5 flex-shrink-0" />
+
+    <InlineInput
+      v-model="modelValue"
+      :placeholder="placeholder"
+      @keyup.enter="onClickAdd"
+    />
+    <Button
+      :label="label"
+      ghost
+      xs
+      slate
+      class="!text-sm !text-n-slate-11 flex-shrink-0"
+      @click="onClickAdd"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AddNewScenariosDialog.vue
@@ -0,0 +1,155 @@
+<script setup>
+import { computed, reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { vOnClickOutside } from '@vueuse/components';
+import { required, minLength } from '@vuelidate/validators';
+
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+
+const emit = defineEmits(['add']);
+
+const { t } = useI18n();
+
+const [showPopover, togglePopover] = useToggle();
+
+const state = reactive({
+  id: '',
+  title: '',
+  description: '',
+  instruction: '',
+});
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  description: { required },
+  instruction: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const titleError = computed(() =>
+  v$.value.title.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
+    : ''
+);
+
+const descriptionError = computed(() =>
+  v$.value.description.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
+    : ''
+);
+
+const instructionError = computed(() =>
+  v$.value.instruction.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
+    : ''
+);
+
+const resetState = () => {
+  Object.assign(state, {
+    id: '',
+    title: '',
+    description: '',
+    instruction: '',
+  });
+};
+
+const onClickAdd = async () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  await emit('add', state);
+  resetState();
+  togglePopover(false);
+};
+
+const onClickCancel = () => {
+  togglePopover(false);
+};
+</script>
+
+<template>
+  <div
+    v-on-click-outside="() => togglePopover(false)"
+    class="inline-flex relative"
+  >
+    <Button
+      :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.CREATE')"
+      sm
+      slate
+      class="flex-shrink-0"
+      @click="togglePopover(!showPopover)"
+    />
+
+    <div
+      v-if="showPopover"
+      class="w-[31.25rem] absolute top-10 ltr:left-0 rtl:right-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 z-50"
+    >
+      <h3 class="text-base font-medium text-n-slate-12">
+        {{ t(`CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.TITLE`) }}
+      </h3>
+
+      <div class="flex flex-col gap-4">
+        <Input
+          v-model="state.title"
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
+          :placeholder="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
+          "
+          :message="titleError"
+          :message-type="titleError ? 'error' : 'info'"
+        />
+
+        <TextArea
+          v-model="state.description"
+          :label="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
+          "
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER'
+            )
+          "
+          :message="descriptionError"
+          :message-type="descriptionError ? 'error' : 'info'"
+          show-character-count
+        />
+        <Editor
+          v-model="state.instruction"
+          :label="
+            t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
+          "
+          :placeholder="
+            t(
+              'CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER'
+            )
+          "
+          :message="instructionError"
+          :message-type="instructionError ? 'error' : 'info'"
+          :show-character-count="false"
+          enable-captain-tools
+        />
+      </div>
+
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
+          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
+          @click="onClickCancel"
+        />
+        <Button
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CREATE')"
+          class="w-full"
+          @click="onClickAdd"
+        />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/BulkSelectBar.vue
@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from 'vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const props = defineProps({
+  allItems: {
+    type: Array,
+    required: true,
+  },
+  selectAllLabel: {
+    type: String,
+    default: '',
+  },
+  selectedCountLabel: {
+    type: String,
+    default: '',
+  },
+  deleteLabel: {
+    type: String,
+    default: 'Delete',
+  },
+});
+
+const emit = defineEmits(['bulkDelete']);
+
+const modelValue = defineModel({
+  type: Set,
+  default: () => new Set(),
+});
+
+const selectedCount = computed(() => modelValue.value.size);
+const totalCount = computed(() => props.allItems.length);
+
+const hasSelected = computed(() => selectedCount.value > 0);
+const isIndeterminate = computed(
+  () => hasSelected.value && selectedCount.value < totalCount.value
+);
+const allSelected = computed(
+  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+);
+
+const bulkCheckboxState = computed({
+  get: () => allSelected.value,
+  set: shouldSelectAll => {
+    const newSelectedIds = shouldSelectAll
+      ? new Set(props.allItems.map(item => item.id))
+      : new Set();
+    modelValue.value = newSelectedIds;
+  },
+});
+</script>
+
+<template>
+  <transition
+    name="slide-fade"
+    enter-active-class="transition-all duration-300 ease-out"
+    enter-from-class="opacity-0 transform ltr:-translate-x-4 rtl:translate-x-4"
+    enter-to-class="opacity-100 transform translate-x-0"
+    leave-active-class="hidden opacity-0"
+  >
+    <div
+      v-if="hasSelected"
+      class="flex items-center gap-3 py-1 ltr:pl-3 rtl:pr-3 ltr:pr-4 rtl:pl-4 rounded-lg bg-n-solid-2 outline outline-1 outline-n-container shadow"
+    >
+      <div class="flex items-center gap-3">
+        <div class="flex items-center gap-1.5">
+          <Checkbox
+            v-model="bulkCheckboxState"
+            :indeterminate="isIndeterminate"
+          />
+          <span class="text-sm font-medium text-n-slate-12 tabular-nums">
+            {{ selectAllLabel }}
+          </span>
+        </div>
+        <span class="text-sm text-n-slate-10 tabular-nums">
+          {{ selectedCountLabel }}
+        </span>
+      </div>
+      <div class="h-4 w-px bg-n-strong" />
+      <div class="flex items-center gap-3">
+        <slot name="actions" :selected-count="selectedCount">
+          <Button
+            :label="deleteLabel"
+            sm
+            ruby
+            ghost
+            class="!px-1.5"
+            icon="i-lucide-trash"
+            @click="emit('bulkDelete')"
+          />
+        </slot>
+      </div>
+    </div>
+    <div v-else class="flex items-center gap-3">
+      <slot name="default-actions" />
+    </div>
+  </transition>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.vue
@@ -57,9 +57,10 @@ const menuItems = computed(() => [
  },
 ]);

-const icon = computed(() =>
-  getInboxIconByType(props.inbox.channel_type, '', 'outline')
-);
+const icon = computed(() => {
+  const { medium, channel_type: type } = props.inbox;
+  return getInboxIconByType(type, medium, 'outline');
+});

 const handleAction = ({ action, value }) => {
  toggleDropdown(false);
--- a/app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.story.vue
@@ -0,0 +1,37 @@
+<script setup>
+import RuleCard from './RuleCard.vue';
+
+const sampleRules = [
+  { id: 1, content: 'Block sensitive personal information', selectable: true },
+  { id: 2, content: 'Reject offensive language', selectable: true },
+  { id: 3, content: 'Deflect legal or medical advice', selectable: true },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/RuleCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Selectable List">
+      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
+        <RuleCard
+          v-for="rule in sampleRules"
+          :id="rule.id"
+          :key="rule.id"
+          :content="rule.content"
+          :selectable="rule.selectable"
+          @select="id => console.log('Selected rule', id)"
+          @edit="id => console.log('Edit', id)"
+          @delete="id => console.log('Delete', id)"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Non-Selectable">
+      <div class="flex flex-col gap-4 px-20 py-4 bg-n-background">
+        <RuleCard id="4" content="Replies should be friendly and clear." />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/RuleCard.vue
@@ -0,0 +1,93 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  content: {
+    type: String,
+    required: true,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'hover', 'edit', 'delete']);
+
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
+const isEditing = ref(false);
+const editedContent = ref(props.content);
+
+// Local content to display to avoid flicker until parent prop updates on inline edit
+const localContent = ref(props.content);
+
+// Keeps localContent in sync when parent updates content prop
+watch(
+  () => props.content,
+  newVal => {
+    localContent.value = newVal;
+  }
+);
+
+const startEdit = () => {
+  isEditing.value = true;
+  editedContent.value = props.content;
+};
+
+const saveEdit = () => {
+  isEditing.value = false;
+  // Update local content
+  localContent.value = editedContent.value;
+  emit('edit', { id: props.id, content: editedContent.value });
+};
+</script>
+
+<template>
+  <CardLayout
+    selectable
+    class="relative [&>div]:!py-5 [&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4"
+    layout="row"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div v-show="selectable" class="absolute top-6 ltr:left-3 rtl:right-3">
+      <Checkbox v-model="modelValue" />
+    </div>
+    <InlineInput
+      v-if="isEditing"
+      v-model="editedContent"
+      focus-on-mount
+      @keyup.enter="saveEdit"
+    />
+    <span v-else class="flex items-center gap-2 text-sm text-n-slate-12">
+      {{ localContent }}
+    </span>
+    <div class="flex items-center gap-2">
+      <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
+      <span class="w-px h-4 bg-n-weak" />
+      <Button
+        icon="i-lucide-trash"
+        slate
+        xs
+        ghost
+        @click="emit('delete', id)"
+      />
+    </div>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.story.vue
@@ -0,0 +1,45 @@
+<script setup>
+import ScenariosCard from './ScenariosCard.vue';
+
+const sampleScenarios = [
+  {
+    id: 1,
+    title: 'Refund Order',
+    description: 'User requests a refund for a recent purchase.',
+    instruction:
+      'Gather order details and reason for refund. Use [Order Search](tool://order_search) then submit with [Refund Payment](tool://refund_payment).',
+    tools: ['order_search', 'refund_payment'],
+  },
+  {
+    id: 2,
+    title: 'Bug Report',
+    description: 'Customer reports a bug in the mobile app.',
+    instruction:
+      'Ask for reproduction steps and environment. Check [Known Issues](tool://known_issues) then create ticket with [Create Bug Report](tool://bug_report_create).',
+    tools: ['known_issues', 'bug_report_create'],
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/ScenariosCard"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Default">
+      <div
+        v-for="scenario in sampleScenarios"
+        :key="scenario.id"
+        class="px-4 py-4 bg-n-background"
+      >
+        <ScenariosCard
+          :id="scenario.id"
+          :title="scenario.title"
+          :description="scenario.description"
+          :instruction="scenario.instruction"
+          :tools="scenario.tools"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ScenariosCard.vue
@@ -0,0 +1,255 @@
+<script setup>
+import { computed, h, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useToggle, useElementSize } from '@vueuse/core';
+import { useVuelidate } from '@vuelidate/core';
+import { required, minLength } from '@vuelidate/validators';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import CardLayout from 'dashboard/components-next/CardLayout.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  id: {
+    type: Number,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  instruction: {
+    type: String,
+    required: true,
+  },
+  tools: {
+    type: Array,
+    default: () => [],
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select', 'hover', 'delete', 'update']);
+
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
+
+const state = reactive({
+  id: '',
+  title: '',
+  description: '',
+  instruction: '',
+});
+
+const instructionContentRef = ref();
+
+const [isEditing, toggleEditing] = useToggle();
+const [isInstructionExpanded, toggleInstructionExpanded] = useToggle();
+
+const { height: contentHeight } = useElementSize(instructionContentRef);
+const needsOverlay = computed(() => contentHeight.value > 160);
+
+const startEdit = () => {
+  Object.assign(state, {
+    id: props.id,
+    title: props.title,
+    description: props.description,
+    instruction: props.instruction,
+    tools: props.tools,
+  });
+  toggleEditing(true);
+};
+
+const rules = {
+  title: { required, minLength: minLength(1) },
+  description: { required },
+  instruction: { required },
+};
+
+const v$ = useVuelidate(rules, state);
+
+const titleError = computed(() =>
+  v$.value.title.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.ERROR')
+    : ''
+);
+
+const descriptionError = computed(() =>
+  v$.value.description.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.ERROR')
+    : ''
+);
+
+const onClickUpdate = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+  emit('update', { ...state });
+  toggleEditing(false);
+};
+
+const instructionError = computed(() =>
+  v$.value.instruction.$error
+    ? t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.ERROR')
+    : ''
+);
+
+const LINK_INSTRUCTION_CLASS =
+  '[&_a[href^="tool://"]]:text-n-iris-11 [&_a:not([href^="tool://"])]:text-n-slate-12 [&_a]:pointer-events-none [&_a]:cursor-default';
+
+const renderInstruction = instruction => () =>
+  h('p', {
+    class: `text-sm text-n-slate-12 py-4 mb-0 prose prose-sm min-w-0 break-words max-w-none ${LINK_INSTRUCTION_CLASS}`,
+    innerHTML: instruction,
+  });
+</script>
+
+<template>
+  <CardLayout
+    selectable
+    class="relative [&>div]:!py-4"
+    :class="{
+      '[&>div]:ltr:!pr-4 [&>div]:rtl:!pl-4': !isEditing,
+      '[&>div]:ltr:!pr-10 [&>div]:rtl:!pl-10': isEditing,
+    }"
+    layout="row"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div
+      v-show="selectable && !isEditing"
+      class="absolute top-[1.125rem] ltr:left-3 rtl:right-3"
+    >
+      <Checkbox v-model="modelValue" />
+    </div>
+
+    <div v-if="!isEditing" class="flex flex-col w-full">
+      <div class="flex items-start justify-between w-full gap-2">
+        <div class="flex flex-col items-start">
+          <span class="text-sm text-n-slate-12 font-medium">{{ title }}</span>
+          <span class="text-sm text-n-slate-11 mt-2">
+            {{ description }}
+          </span>
+        </div>
+        <div class="flex items-center gap-2">
+          <!-- <Button label="Test" slate xs ghost class="!text-sm" />
+          <span class="w-px h-4 bg-n-weak" /> -->
+          <Button icon="i-lucide-pen" slate xs ghost @click="startEdit" />
+          <span class="w-px h-4 bg-n-weak" />
+          <Button
+            icon="i-lucide-trash"
+            slate
+            xs
+            ghost
+            @click="emit('delete', id)"
+          />
+        </div>
+      </div>
+
+      <div
+        class="relative overflow-hidden transition-all duration-300 ease-in-out group/expandable"
+        :class="{ 'cursor-pointer': needsOverlay }"
+        :style="{
+          maxHeight: isInstructionExpanded ? `${contentHeight}px` : '10rem',
+        }"
+        @click="needsOverlay ? toggleInstructionExpanded() : null"
+      >
+        <div ref="instructionContentRef">
+          <component
+            :is="renderInstruction(formatMessage(instruction, false))"
+          />
+        </div>
+
+        <div
+          class="absolute bottom-0 w-full flex items-end justify-center text-xs text-n-slate-11 bg-gradient-to-t h-40 from-n-solid-2 via-n-solid-2 via-10% to-transparent transition-all duration-500 ease-in-out px-2 py-1 rounded pointer-events-none"
+          :class="{
+            'visible opacity-100': !isInstructionExpanded,
+            'invisible opacity-0': isInstructionExpanded || !needsOverlay,
+          }"
+        >
+          <Icon
+            icon="i-lucide-chevron-down"
+            class="text-n-slate-7 mb-4 size-4 group-hover/expandable:text-n-slate-11 transition-colors duration-200"
+          />
+        </div>
+      </div>
+      <span
+        v-if="tools?.length"
+        class="text-sm text-n-slate-11 font-medium mb-1"
+      >
+        {{ t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.SUGGESTED.TOOLS_USED') }}
+        {{ tools?.map(tool => `@${tool}`).join(', ') }}
+      </span>
+    </div>
+    <div v-else class="overflow-hidden flex flex-col gap-4 w-full">
+      <Input
+        v-model="state.title"
+        :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.LABEL')"
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.TITLE.PLACEHOLDER')
+        "
+        :message="titleError"
+        :message-type="titleError ? 'error' : 'info'"
+      />
+
+      <TextArea
+        v-model="state.description"
+        :label="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.LABEL')
+        "
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.DESCRIPTION.PLACEHOLDER')
+        "
+        :message="descriptionError"
+        :message-type="descriptionError ? 'error' : 'info'"
+        show-character-count
+      />
+      <Editor
+        v-model="state.instruction"
+        :label="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.LABEL')
+        "
+        :placeholder="
+          t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.INSTRUCTION.PLACEHOLDER')
+        "
+        :message="instructionError"
+        :message-type="instructionError ? 'error' : 'info'"
+        :show-character-count="false"
+        enable-captain-tools
+      />
+      <div class="flex items-center gap-3">
+        <Button
+          faded
+          slate
+          sm
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.CANCEL')"
+          @click="toggleEditing(false)"
+        />
+        <Button
+          sm
+          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.UPDATE.UPDATE')"
+          @click="onClickUpdate"
+        />
+      </div>
+    </div>
+  </CardLayout>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.story.vue
@@ -0,0 +1,46 @@
+<script setup>
+import SuggestedRules from './SuggestedRules.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+const guidelinesExample = [
+  {
+    content:
+      'Block queries that share or request sensitive personal information (e.g. phone numbers, passwords).',
+  },
+  {
+    content:
+      'Reject queries that include offensive, discriminatory, or threatening language.',
+  },
+  {
+    content:
+      'Deflect when the assistant is asked for legal or medical diagnosis or treatment.',
+  },
+];
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/SuggestedRules"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="Suggested Rules List">
+      <div class="px-20 py-4 bg-n-background">
+        <SuggestedRules
+          title="Example response guidelines"
+          :items="guidelinesExample"
+        >
+          <template #default="{ item }">
+            <span class="text-sm text-n-slate-12">{{ item.content }}</span>
+            <Button
+              label="Add this"
+              ghost
+              xs
+              slate
+              class="!text-sm !text-n-slate-11 flex-shrink-0"
+            />
+          </template>
+        </SuggestedRules>
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/SuggestedRules.vue
@@ -0,0 +1,63 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['add', 'close']);
+
+const { t } = useI18n();
+
+const onAddClick = () => {
+  emit('add');
+};
+
+const onClickClose = () => {
+  emit('close');
+};
+</script>
+
+<template>
+  <div
+    class="flex flex-col items-start self-stretch rounded-xl w-full overflow-hidden border border-dashed border-n-strong"
+  >
+    <div class="flex items-center justify-between w-full gap-3 px-4 pb-1 pt-4">
+      <div class="flex items-center gap-3">
+        <h5 class="text-sm font-medium text-n-slate-11">{{ title }}</h5>
+        <span class="h-3 w-px bg-n-weak" />
+        <Button
+          :label="t('CAPTAIN.ASSISTANTS.GUARDRAILS.ADD.SUGGESTED.ADD')"
+          ghost
+          xs
+          slate
+          class="!text-sm !text-n-slate-11 flex-shrink-0"
+          @click="onAddClick"
+        />
+      </div>
+      <Button
+        ghost
+        xs
+        slate
+        icon="i-lucide-x"
+        class="!text-sm !text-n-slate-11 flex-shrink-0"
+        @click="onClickClose"
+      />
+    </div>
+    <div
+      class="flex flex-col items-start divide-y divide-n-strong divide-dashed w-full"
+    >
+      <div v-for="item in items" :key="item.content" class="w-full px-4 py-4">
+        <slot :item="item" />
+      </div>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.story.vue
@@ -0,0 +1,37 @@
+<script setup>
+import { ref } from 'vue';
+import ToolsDropdown from './ToolsDropdown.vue';
+
+const items = [
+  {
+    id: 'order_search',
+    title: 'Order Search',
+    description: 'Lookup orders by customer ID, email, or order number',
+  },
+  {
+    id: 'refund_payment',
+    title: 'Refund Payment',
+    description: 'Initiates a refund on a specific payment',
+  },
+  {
+    id: 'fetch_customer',
+    title: 'Fetch Customer',
+    description: 'Pulls customer details (email, tags, last seen, etc.)',
+  },
+];
+
+const selectedIndex = ref(0);
+</script>
+
+<template>
+  <Story
+    title="Captain/Assistant/ToolsDropdown"
+    :layout="{ type: 'grid', width: '600px' }"
+  >
+    <Variant title="Default">
+      <div class="relative h-80 bg-n-background p-4">
+        <ToolsDropdown :items="items" :selected-index="selectedIndex" />
+      </div>
+    </Variant>
+  </Story>
+</template>
--- a/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ToolsDropdown.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { ref, watch, nextTick } from 'vue';
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+  },
+  selectedIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const toolsDropdownRef = ref(null);
+
+const onItemClick = idx => emit('select', idx);
+
+watch(
+  () => props.selectedIndex,
+  () => {
+    nextTick(() => {
+      const el = toolsDropdownRef.value?.querySelector(
+        `#tool-item-${props.selectedIndex}`
+      );
+      if (el) {
+        el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+      }
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    ref="toolsDropdownRef"
+    class="w-[22.5rem] p-2 flex flex-col gap-1 z-50 absolute rounded-xl bg-n-alpha-3 shadow outline outline-1 outline-n-weak backdrop-blur-[50px] max-h-[20rem] overflow-y-auto"
+  >
+    <div
+      v-for="(tool, idx) in items"
+      :id="`tool-item-${idx}`"
+      :key="tool.id || idx"
+      :class="{ 'bg-n-alpha-black2': idx === selectedIndex }"
+      class="flex flex-col gap-1 rounded-md py-2 px-2 cursor-pointer hover:bg-n-alpha-black2"
+      @click="onItemClick(idx)"
+    >
+      <span class="text-n-slate-12 font-medium text-sm">{{ tool.title }}</span>
+      <span class="text-n-slate-11 text-sm">{{ tool.description }}</span>
+    </div>
+  </div>
+</template>
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue
@@ -35,6 +35,7 @@ const initialState = {
  productName: '',
  featureFaq: false,
  featureMemory: false,
+  featureCitation: false,
 };

 const state = reactive({ ...initialState });
@@ -70,6 +71,7 @@ const prepareAssistantDetails = () => ({
    product_name: state.productName,
    feature_faq: state.featureFaq,
    feature_memory: state.featureMemory,
+    feature_citation: state.featureCitation,
  },
 });

@@ -93,6 +95,7 @@ const updateStateFromAssistant = assistant => {
    productName: config.product_name,
    featureFaq: config.feature_faq || false,
    featureMemory: config.feature_memory || false,
+    featureCitation: config.feature_citation || false,
  });
 };

@@ -151,6 +154,13 @@ watch(
          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
        </span>
      </label>
+
+      <label class="flex items-center gap-2">
+        <input v-model="state.featureCitation" type="checkbox" />
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+        </span>
+      </label>
    </fieldset>

    <div class="flex items-center justify-between w-full gap-3">
--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/EditAssistantForm.vue
@@ -41,6 +41,7 @@ const initialState = {
  features: {
    conversationFaqs: false,
    memories: false,
+    citations: false,
  },
  temperature: 1,
 };
@@ -87,6 +88,7 @@ const updateStateFromAssistant = assistant => {
  state.features = {
    conversationFaqs: config.feature_faq || false,
    memories: config.feature_memory || false,
+    citations: config.feature_citation || false,
  };
  state.temperature = config.temperature || 1;
 };
@@ -152,6 +154,7 @@ const handleFeaturesUpdate = () => {
      ...props.assistant.config,
      feature_faq: state.features.conversationFaqs,
      feature_memory: state.features.memories,
+      feature_citation: state.features.citations,
    },
  };

@@ -300,20 +303,19 @@ watch(
              <input
                v-model="state.features.conversationFaqs"
                type="checkbox"
-                class="form-checkbox"
              />
              {{
                t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS')
              }}
            </label>
            <label class="flex items-center gap-2">
-              <input
-                v-model="state.features.memories"
-                type="checkbox"
-                class="form-checkbox"
-              />
+              <input v-model="state.features.memories" type="checkbox" />
              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
            </label>
+            <label class="flex items-center gap-2">
+              <input v-model="state.features.citations" type="checkbox" />
+              {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+            </label>
          </div>
        </div>

--- a/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/assistant/settings/AssistantBasicSettingsForm.vue
@@ -26,6 +26,7 @@ const initialState = {
  features: {
    conversationFaqs: false,
    memories: false,
+    citations: false,
  },
 };

@@ -57,6 +58,7 @@ const updateStateFromAssistant = assistant => {
  state.features = {
    conversationFaqs: config.feature_faq || false,
    memories: config.feature_memory || false,
+    citations: config.feature_citation || false,
  };
 };

@@ -76,6 +78,7 @@ const handleBasicInfoUpdate = async () => {
      product_name: state.productName,
      feature_faq: state.features.conversationFaqs,
      feature_memory: state.features.memories,
+      feature_citation: state.features.citations,
    },
  };

@@ -123,21 +126,17 @@ watch(
      </label>
      <div class="flex flex-col gap-2">
        <label class="flex items-center gap-2">
-          <input
-            v-model="state.features.conversationFaqs"
-            type="checkbox"
-            class="form-checkbox"
-          />
+          <input v-model="state.features.conversationFaqs" type="checkbox" />
          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CONVERSATION_FAQS') }}
        </label>
        <label class="flex items-center gap-2">
-          <input
-            v-model="state.features.memories"
-            type="checkbox"
-            class="form-checkbox"
-          />
+          <input v-model="state.features.memories" type="checkbox" />
          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_MEMORIES') }}
        </label>
+        <label class="flex items-center gap-2">
+          <input v-model="state.features.citations" type="checkbox" />
+          {{ t('CAPTAIN.ASSISTANTS.FORM.FEATURES.ALLOW_CITATIONS') }}
+        </label>
      </div>
    </div>

--- a/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
+++ b/app/javascript/dashboard/components-next/dropdown-menu/DropdownPrimitives.story.vue
@@ -6,7 +6,7 @@ import DropdownBody from './base/DropdownBody.vue';
 import DropdownSection from './base/DropdownSection.vue';
 import DropdownItem from './base/DropdownItem.vue';
 import DropdownSeparator from './base/DropdownSeparator.vue';
-import WootSwitch from 'components/ui/Switch.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';

 const currentUserAutoOffline = ref(false);

@@ -61,7 +61,7 @@ const menuItems = ref([
              <DropdownItem label="Contact Support" class="justify-between">
                <span>{{ $t('SIDEBAR.SET_AUTO_OFFLINE.TEXT') }}</span>
                <div class="flex-shrink-0">
-                  <WootSwitch v-model="currentUserAutoOffline" />
+                  <ToggleSwitch v-model="currentUserAutoOffline" />
                </div>
              </DropdownItem>
            </DropdownSection>
--- a/app/javascript/dashboard/components-next/filter/ConditionRow.vue
+++ b/app/javascript/dashboard/components-next/filter/ConditionRow.vue
@@ -2,6 +2,7 @@
 import { computed, defineModel, h, watch, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import FilterSelect from './inputs/FilterSelect.vue';
 import MultiSelect from './inputs/MultiSelect.vue';
 import SingleSelect from './inputs/SingleSelect.vue';
@@ -178,11 +179,11 @@ defineExpose({ validate });
          disable-search
          :options="booleanOptions"
        />
-        <input
+        <Input
          v-else
          v-model="values"
          :type="inputType === 'date' ? 'date' : 'text'"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base"
+          class="[&>input]:h-8 [&>input]:py-1.5 [&>input]:outline-offset-0"
          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
        />
      </template>
@@ -191,6 +192,7 @@ defineExpose({ validate });
        solid
        slate
        icon="i-lucide-trash"
+        class="flex-shrink-0"
        @click.stop="emit('remove')"
      />
    </div>
--- a/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
+++ b/app/javascript/dashboard/components-next/filter/ContactsFilter.vue
@@ -9,6 +9,7 @@ import { useContactFilterContext } from './contactProvider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';

 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';

 const props = defineProps({
@@ -103,22 +104,19 @@ const outsideClickHandler = [
 <template>
  <div
    v-on-click-outside="outsideClickHandler"
-    class="z-40 max-w-3xl lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
+    class="z-40 max-w-3xl min-w-96 lg:w-[750px] overflow-visible w-full border border-n-weak bg-n-alpha-3 backdrop-blur-[100px] shadow-lg rounded-xl p-6 grid gap-6"
  >
    <h3 class="text-base font-medium leading-6 text-n-slate-12">
      {{ filterModalHeaderTitle }}
    </h3>
    <div v-if="props.isSegmentView">
-      <label class="pb-6 border-b border-n-weak">
-        <div class="mb-2 text-sm text-n-slate-11">
-          {{ $t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL') }}
-        </div>
-        <input
+      <div class="pb-6 border-b border-n-weak">
+        <Input
          v-model="segmentNameLocal"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :label="$t('CONTACTS_LAYOUT.FILTER.SEGMENT.LABEL')"
          :placeholder="t('CONTACTS_LAYOUT.FILTER.SEGMENT.INPUT_PLACEHOLDER')"
        />
-      </label>
+      </div>
    </div>
    <ul class="grid gap-4 list-none">
      <template v-for="(filter, index) in filters" :key="filter.id">
@@ -148,10 +146,10 @@ const outsideClickHandler = [
      </template>
    </ul>
    <div class="flex justify-between gap-2">
-      <Button sm ghost blue @click="addFilter">
+      <Button sm ghost blue class="flex-shrink-0" @click="addFilter">
        {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.ADD_FILTER') }}
      </Button>
-      <div class="flex gap-2">
+      <div class="flex gap-2 flex-shrink-0">
        <Button sm faded slate @click="resetFilter">
          {{ $t('CONTACTS_LAYOUT.FILTER.BUTTONS.CLEAR_FILTERS') }}
        </Button>
--- a/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
+++ b/app/javascript/dashboard/components-next/filter/ConversationFilter.vue
@@ -9,6 +9,7 @@ import { useConversationFilterContext } from './provider.js';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';

 import Button from 'next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import ConditionRow from './ConditionRow.vue';

 const props = defineProps({
@@ -110,16 +111,13 @@ const outsideClickHandler = [
      {{ filterModalHeaderTitle }}
    </h3>
    <div v-if="props.isFolderView">
-      <label class="border-b border-n-weak pb-6">
-        <div class="text-n-slate-11 text-sm mb-2">
-          {{ t('FILTER.FOLDER_LABEL') }}
-        </div>
-        <input
+      <div class="border-b border-n-weak pb-6">
+        <Input
          v-model="folderNameLocal"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
+          :label="t('FILTER.FOLDER_LABEL')"
          :placeholder="t('FILTER.INPUT_PLACEHOLDER')"
        />
-      </label>
+      </div>
    </div>
    <ul class="grid gap-4 list-none">
      <template v-for="(filter, index) in filters" :key="filter.id">
--- a/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
+++ b/app/javascript/dashboard/components-next/filter/SaveCustomView.vue
@@ -6,10 +6,12 @@ import { CONTACTS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
 import { vOnClickOutside } from '@vueuse/components';
 import { useTrack } from 'dashboard/composables';
 import NextButton from 'next/button/Button.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';

 export default {
  components: {
    NextButton,
+    NextInput,
  },
  directives: {
    onClickOutside: vOnClickOutside,
@@ -103,20 +105,13 @@ export default {
      {{ $t('FILTER.CUSTOM_VIEWS.ADD.TITLE') }}
    </h3>
    <form class="w-full grid gap-6" @submit.prevent="saveCustomViews">
-      <label :class="{ error: v$.name.$error }">
-        <input
-          v-model="name"
-          class="py-1.5 px-3 text-n-slate-12 bg-n-alpha-1 text-sm rounded-lg reset-base w-full"
-          :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
-          @blur="v$.name.$touch"
-        />
-        <span
-          v-if="v$.name.$error"
-          class="text-xs text-n-ruby-11 ml-1 rtl:mr-1"
-        >
-          {{ $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE') }}
-        </span>
-      </label>
+      <NextInput
+        v-model="name"
+        :placeholder="$t('FILTER.CUSTOM_VIEWS.ADD.PLACEHOLDER')"
+        :message="v$.name.$error && $t('FILTER.CUSTOM_VIEWS.ADD.ERROR_MESSAGE')"
+        :message-type="v$.name.$error && 'error'"
+        @blur="v$.name.$touch"
+      />
      <div class="flex flex-row justify-end w-full gap-2">
        <NextButton faded slate sm @click.prevent="onClose">
          {{ $t('FILTER.CUSTOM_VIEWS.ADD.CANCEL_BUTTON') }}
--- a/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
+++ b/app/javascript/dashboard/components-next/icon/ChannelIcon.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { toRef } from 'vue';
 import { useChannelIcon } from './provider';
 import Icon from 'next/icon/Icon.vue';

@@ -9,7 +10,7 @@ const props = defineProps({
  },
 });

-const channelIcon = useChannelIcon(props.inbox);
+const channelIcon = useChannelIcon(toRef(props, 'inbox'));
 </script>

 <template>
--- a/app/javascript/dashboard/components-next/icon/provider.js
+++ b/app/javascript/dashboard/components-next/icon/provider.js
@@ -22,15 +22,21 @@ export function useChannelIcon(inbox) {
  };

  const channelIcon = computed(() => {
-    const type = inbox.channel_type;
+    const inboxDetails = inbox.value || inbox;
+    const type = inboxDetails.channel_type;
    let icon = channelTypeIconMap[type];

-    if (type === 'Channel::Email' && inbox.provider) {
-      if (Object.keys(providerIconMap).includes(inbox.provider)) {
-        icon = providerIconMap[inbox.provider];
+    if (type === 'Channel::Email' && inboxDetails.provider) {
+      if (Object.keys(providerIconMap).includes(inboxDetails.provider)) {
+        icon = providerIconMap[inboxDetails.provider];
      }
    }

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

--- a/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
+++ b/app/javascript/dashboard/components-next/icon/specs/provider.spec.js
@@ -25,6 +25,77 @@ describe('useChannelIcon', () => {
    expect(icon).toBe('i-ri-phone-fill');
  });

+  it('returns correct icon for Line channel', () => {
+    const inbox = { channel_type: 'Channel::Line' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-line-fill');
+  });
+
+  it('returns correct icon for SMS channel', () => {
+    const inbox = { channel_type: 'Channel::Sms' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-chat-1-fill');
+  });
+
+  it('returns correct icon for Telegram channel', () => {
+    const inbox = { channel_type: 'Channel::Telegram' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-telegram-fill');
+  });
+
+  it('returns correct icon for Twitter channel', () => {
+    const inbox = { channel_type: 'Channel::TwitterProfile' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-twitter-x-fill');
+  });
+
+  it('returns correct icon for WebWidget channel', () => {
+    const inbox = { channel_type: 'Channel::WebWidget' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-global-fill');
+  });
+
+  it('returns correct icon for Instagram channel', () => {
+    const inbox = { channel_type: 'Channel::Instagram' };
+    const { value: icon } = useChannelIcon(inbox);
+    expect(icon).toBe('i-ri-instagram-fill');
+  });
+
+  describe('TwilioSms channel', () => {
+    it('returns chat icon for regular Twilio SMS channel', () => {
+      const inbox = { channel_type: 'Channel::TwilioSms' };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-chat-1-fill');
+    });
+
+    it('returns WhatsApp icon for Twilio SMS with WhatsApp medium', () => {
+      const inbox = {
+        channel_type: 'Channel::TwilioSms',
+        medium: 'whatsapp',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-whatsapp-fill');
+    });
+
+    it('returns chat icon for Twilio SMS with non-WhatsApp medium', () => {
+      const inbox = {
+        channel_type: 'Channel::TwilioSms',
+        medium: 'sms',
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-chat-1-fill');
+    });
+
+    it('returns chat icon for Twilio SMS with undefined medium', () => {
+      const inbox = {
+        channel_type: 'Channel::TwilioSms',
+        medium: undefined,
+      };
+      const { value: icon } = useChannelIcon(inbox);
+      expect(icon).toBe('i-ri-chat-1-fill');
+    });
+  });
+
  describe('Email channel', () => {
    it('returns mail icon for generic email channel', () => {
      const inbox = { channel_type: 'Channel::Email' };
--- a/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
@@ -119,7 +119,13 @@ const handleSeeOriginal = () => {
      >
        <div
          v-if="isExpandable && !isExpanded"
-          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent"
+          class="absolute left-0 right-0 bottom-0 h-40 px-8 flex items-end"
+          :class="{
+            'bg-gradient-to-t from-n-slate-4 via-n-slate-4 via-20% to-transparent':
+              isIncoming,
+            'bg-gradient-to-t from-n-solid-blue via-n-solid-blue via-20% to-transparent':
+              isOutgoing,
+          }"
        >
          <button
            class="text-n-slate-12 py-2 px-8 mx-auto text-center flex items-center gap-2"
--- a/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
+++ b/app/javascript/dashboard/components-next/sidebar/MobileSidebarLauncher.vue
@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  isMobileSidebarOpen: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['toggle']);
+
+const route = useRoute();
+
+const isConversationRoute = computed(() => {
+  const CONVERSATION_ROUTES = [
+    'inbox_conversation',
+    'conversation_through_inbox',
+    'conversations_through_label',
+    'team_conversations_through_label',
+    'conversations_through_folders',
+    'conversation_through_mentions',
+    'conversation_through_unattended',
+    'conversation_through_participating',
+    'inbox_view_conversation',
+  ];
+  return CONVERSATION_ROUTES.includes(route.name);
+});
+
+const toggleSidebar = () => {
+  emit('toggle');
+};
+</script>
+
+<template>
+  <div
+    v-if="!isConversationRoute"
+    id="mobile-sidebar-launcher"
+    class="fixed bottom-4 ltr:left-4 rtl:right-4 z-40 transition-transform duration-200 ease-in-out block md:hidden"
+    :class="[
+      {
+        'ltr:translate-x-48 rtl:-translate-x-48': isMobileSidebarOpen,
+      },
+    ]"
+  >
+    <div class="rounded-full bg-n-alpha-2 p-1">
+      <Button
+        icon="i-lucide-menu"
+        class="!rounded-full !bg-n-solid-3 dark:!bg-n-alpha-2 !text-n-slate-12 text-xl"
+        lg
+        @click="toggleSidebar"
+      />
+    </div>
+  </div>
+  <template v-else />
+</template>
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -8,6 +8,7 @@ import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useStorage } from '@vueuse/core';
 import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
+import { vOnClickOutside } from '@vueuse/components';

 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -17,10 +18,18 @@ import SidebarAccountSwitcher from './SidebarAccountSwitcher.vue';
 import Logo from 'next/icon/Logo.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';

+const props = defineProps({
+  isMobileSidebarOpen: {
+    type: Boolean,
+    default: false,
+  },
+});
+
 const emit = defineEmits([
  'closeKeyShortcutModal',
  'openKeyShortcutModal',
  'showCreateAccountModal',
+  'closeMobileSidebar',
 ]);

 const { accountScopedRoute } = useAccount();
@@ -77,6 +86,11 @@ const sortedInboxes = computed(() =>
  inboxes.value.slice().sort((a, b) => a.name.localeCompare(b.name))
 );

+const closeMobileSidebar = () => {
+  if (!props.isMobileSidebarOpen) return;
+  emit('closeMobileSidebar');
+};
+
 const newReportRoutes = () => [
  {
    name: 'Reports Agent',
@@ -488,7 +502,17 @@ const menuItems = computed(() => {

 <template>
  <aside
-    class="w-[200px] bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak h-screen flex flex-col text-sm pb-1"
+    v-on-click-outside="[
+      closeMobileSidebar,
+      { ignore: ['#mobile-sidebar-launcher'] },
+    ]"
+    class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
+    :class="[
+      {
+        'shadow-lg md:shadow-none': isMobileSidebarOpen,
+        'ltr:-translate-x-full rtl:translate-x-full': !isMobileSidebarOpen,
+      },
+    ]"
  >
    <section class="grid gap-2 mt-2 mb-4">
      <div class="flex items-center min-w-0 gap-2 px-2">
--- a/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarGroup.vue
@@ -218,8 +218,8 @@ onMounted(async () => {
  left: 0;
 }

-.app-rtl--wrapper .sidebar-group-children > .child-item:last-child::after,
-.app-rtl--wrapper
+#app[dir='rtl'] .sidebar-group-children > .child-item:last-child::after,
+#app[dir='rtl']
  .sidebar-group-children
  > *:last-child
  > *:last-child
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenu.vue
@@ -86,6 +86,15 @@ const menuItems = computed(() => {
      nativeLink: true,
      target: '_blank',
    },
+    {
+      show: true,
+      showOnCustomBrandedInstance: false,
+      label: t('SIDEBAR_ITEMS.CHANGELOG'),
+      icon: 'i-lucide-scroll-text',
+      link: 'https://www.chatwoot.com/changelog/',
+      nativeLink: true,
+      target: '_blank',
+    },
    {
      show: currentUser.value.type === 'SuperAdmin',
      showOnCustomBrandedInstance: true,
@@ -114,7 +123,7 @@ const allowedMenuItems = computed(() => {
  <DropdownContainer class="relative w-full min-w-0" @close="emit('close')">
    <template #trigger="{ toggle, isOpen }">
      <button
-        class="flex gap-2 items-center rounded-lg cursor-pointer text-left w-full hover:bg-n-alpha-1 p-1"
+        class="flex gap-2 items-center p-1 w-full text-left rounded-lg cursor-pointer hover:bg-n-alpha-1"
        :class="{ 'bg-n-alpha-1': isOpen }"
        @click="toggle"
      >
@@ -127,16 +136,16 @@ const allowedMenuItems = computed(() => {
          rounded-full
        />
        <div class="min-w-0">
-          <div class="text-n-slate-12 text-sm leading-4 font-medium truncate">
+          <div class="text-sm font-medium leading-4 truncate text-n-slate-12">
            {{ currentUser.available_name }}
          </div>
-          <div class="text-n-slate-11 text-xs truncate">
+          <div class="text-xs truncate text-n-slate-11">
            {{ currentUser.email }}
          </div>
        </div>
      </button>
    </template>
-    <DropdownBody class="ltr:left-0 rtl:right-0 bottom-12 z-50 w-80 mb-2">
+    <DropdownBody class="bottom-12 z-50 mb-2 w-80 ltr:left-0 rtl:right-0">
      <SidebarProfileMenuStatus />
      <DropdownSeparator />
      <template v-for="item in allowedMenuItems" :key="item.label">
--- a/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
+++ b/app/javascript/dashboard/components-next/sidebar/SidebarProfileMenuStatus.vue
@@ -14,6 +14,7 @@ import {
 } from 'next/dropdown-menu/base';
 import Icon from 'next/icon/Icon.vue';
 import Button from 'next/button/Button.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';

 const { t } = useI18n();
 const store = useStore();
@@ -48,6 +49,16 @@ const activeStatus = computed(() => {
  return availabilityStatuses.value.find(status => status.active);
 });

+const autoOfflineToggle = computed({
+  get: () => currentUserAutoOffline.value,
+  set: autoOffline => {
+    store.dispatch('updateAutoOffline', {
+      accountId: currentAccountId.value,
+      autoOffline,
+    });
+  },
+});
+
 function changeAvailabilityStatus(availability) {
  if (isImpersonating.value) {
    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.IMPERSONATING_ERROR'));
@@ -62,13 +73,6 @@ function changeAvailabilityStatus(availability) {
    useAlert(t('PROFILE_SETTINGS.FORM.AVAILABILITY.SET_AVAILABILITY_ERROR'));
  }
 }
-
-function updateAutoOffline(autoOffline) {
-  store.dispatch('updateAutoOffline', {
-    accountId: currentAccountId.value,
-    autoOffline,
-  });
-}
 </script>

 <template>
@@ -118,11 +122,7 @@ function updateAutoOffline(autoOffline) {
            class="size-4 text-n-slate-10"
          />
        </div>
-        <woot-switch
-          class="flex-shrink-0"
-          :model-value="currentUserAutoOffline"
-          @input="updateAutoOffline"
-        />
+        <ToggleSwitch v-model="autoOfflineToggle" />
      </DropdownItem>
    </div>
  </DropdownSection>
--- a/app/javascript/dashboard/components-next/switch/Switch.vue
+++ b/app/javascript/dashboard/components-next/switch/Switch.vue
@@ -19,8 +19,8 @@ const updateValue = () => {
 <template>
  <button
    type="button"
-    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2"
-    :class="modelValue ? 'bg-n-brand' : 'bg-n-alpha-1 dark:bg-n-alpha-2'"
+    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 flex-shrink-0"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6 disabled:bg-n-slate-6/60'"
    role="switch"
    :aria-checked="modelValue"
    @click="updateValue"
--- a/app/javascript/dashboard/components-next/taginput/TagInput.vue
+++ b/app/javascript/dashboard/components-next/taginput/TagInput.vue
@@ -230,7 +230,7 @@ const handleBlur = e => emit('blur', e);
        v-if="showDropdownMenu"
        :menu-items="filteredMenuItems"
        :is-searching="isLoading"
-        class="left-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-[inherit] max-w-md dark:!outline-n-slate-5"
        @action="handleDropdownAction"
      />
    </div>
--- a/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
+++ b/app/javascript/dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue
@@ -0,0 +1,279 @@
+<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 Input from 'dashboard/components-next/input/Input.vue';
+import {
+  buildTemplateParameters,
+  allKeysRequired,
+  replaceTemplateVariables,
+  DEFAULT_LANGUAGE,
+  DEFAULT_CATEGORY,
+  COMPONENT_TYPES,
+  MEDIA_FORMATS,
+  findComponentByType,
+} from 'dashboard/helper/templateHelper';
+
+const props = defineProps({
+  template: {
+    type: Object,
+    default: () => ({}),
+    validator: value => {
+      if (!value || typeof value !== 'object') return false;
+      if (!value.components || !Array.isArray(value.components)) return false;
+      return true;
+    },
+  },
+});
+
+const emit = defineEmits(['sendMessage', 'resetTemplate', 'back']);
+
+const { t } = useI18n();
+
+const processedParams = ref({});
+
+const languageLabel = computed(() => {
+  return `${t('WHATSAPP_TEMPLATES.PARSER.LANGUAGE')}: ${props.template.language || DEFAULT_LANGUAGE}`;
+});
+
+const categoryLabel = computed(() => {
+  return `${t('WHATSAPP_TEMPLATES.PARSER.CATEGORY')}: ${props.template.category || DEFAULT_CATEGORY}`;
+});
+
+const headerComponent = computed(() => {
+  return findComponentByType(props.template, COMPONENT_TYPES.HEADER);
+});
+
+const bodyComponent = computed(() => {
+  return findComponentByType(props.template, COMPONENT_TYPES.BODY);
+});
+
+const bodyText = computed(() => {
+  return bodyComponent.value?.text || '';
+});
+
+const hasMediaHeader = computed(() =>
+  MEDIA_FORMATS.includes(headerComponent.value?.format)
+);
+
+const formatType = computed(() => {
+  const format = headerComponent.value?.format;
+  return format ? format.charAt(0) + format.slice(1).toLowerCase() : '';
+});
+
+const hasVariables = computed(() => {
+  return bodyText.value?.match(/{{([^}]+)}}/g) !== null;
+});
+
+const renderedTemplate = computed(() => {
+  return replaceTemplateVariables(bodyText.value, processedParams.value);
+});
+
+const isFormInvalid = computed(() => {
+  if (!hasVariables.value && !hasMediaHeader.value) return false;
+
+  if (hasMediaHeader.value && !processedParams.value.header?.media_url) {
+    return true;
+  }
+
+  if (hasVariables.value && processedParams.value.body) {
+    const hasEmptyBodyVariable = Object.values(processedParams.value.body).some(
+      value => !value
+    );
+    if (hasEmptyBodyVariable) return true;
+  }
+
+  if (processedParams.value.buttons) {
+    const hasEmptyButtonParameter = processedParams.value.buttons.some(
+      button => !button.parameter
+    );
+    if (hasEmptyButtonParameter) return true;
+  }
+
+  return false;
+});
+
+const v$ = useVuelidate(
+  {
+    processedParams: {
+      requiredIfKeysPresent: requiredIf(hasVariables),
+      allKeysRequired,
+    },
+  },
+  { processedParams }
+);
+
+const initializeTemplateParameters = () => {
+  processedParams.value = buildTemplateParameters(
+    props.template,
+    hasMediaHeader.value
+  );
+};
+
+const updateMediaUrl = value => {
+  processedParams.value.header ??= {};
+  processedParams.value.header.media_url = value;
+};
+
+const sendMessage = () => {
+  v$.value.$touch();
+  if (v$.value.$invalid) return;
+
+  const { name, category, language, namespace } = props.template;
+
+  const payload = {
+    message: renderedTemplate.value,
+    templateParams: {
+      name,
+      category,
+      language,
+      namespace,
+      processed_params: processedParams.value,
+    },
+  };
+  emit('sendMessage', payload);
+};
+
+const resetTemplate = () => {
+  emit('resetTemplate');
+};
+
+const goBack = () => {
+  emit('back');
+};
+
+onMounted(initializeTemplateParameters);
+
+watch(
+  () => props.template,
+  () => {
+    initializeTemplateParameters();
+    v$.value.$reset();
+  },
+  { deep: true }
+);
+
+defineExpose({
+  processedParams,
+  hasVariables,
+  hasMediaHeader,
+  headerComponent,
+  renderedTemplate,
+  v$,
+  updateMediaUrl,
+  sendMessage,
+  resetTemplate,
+  goBack,
+});
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-col gap-4 p-4 mb-4 rounded-lg bg-n-alpha-black2">
+      <div class="flex justify-between items-center">
+        <h3 class="text-sm font-medium text-n-slate-12">
+          {{ template.name }}
+        </h3>
+        <span class="text-xs text-n-slate-11">
+          {{ languageLabel }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <div class="rounded-md">
+          <div class="text-sm whitespace-pre-wrap text-n-slate-12">
+            {{ renderedTemplate }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-n-slate-11">
+        {{ categoryLabel }}
+      </div>
+    </div>
+
+    <div v-if="hasVariables || hasMediaHeader">
+      <div v-if="hasMediaHeader" class="mb-4">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{
+            $t('WHATSAPP_TEMPLATES.PARSER.MEDIA_HEADER_LABEL', {
+              type: formatType,
+            }) || `${formatType} Header`
+          }}
+        </p>
+        <div class="flex items-center mb-2.5">
+          <Input
+            :model-value="processedParams.header?.media_url || ''"
+            type="url"
+            class="flex-1"
+            :placeholder="
+              t('WHATSAPP_TEMPLATES.PARSER.MEDIA_URL_LABEL', {
+                type: formatType,
+              })
+            "
+            @update:model-value="updateMediaUrl"
+          />
+        </div>
+      </div>
+
+      <!-- Body Variables Section -->
+      <div v-if="processedParams.body">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ $t('WHATSAPP_TEMPLATES.PARSER.VARIABLES_LABEL') }}
+        </p>
+        <div
+          v-for="(variable, key) in processedParams.body"
+          :key="`body-${key}`"
+          class="flex items-center mb-2.5"
+        >
+          <Input
+            v-model="processedParams.body[key]"
+            type="text"
+            class="flex-1"
+            :placeholder="
+              t('WHATSAPP_TEMPLATES.PARSER.VARIABLE_PLACEHOLDER', {
+                variable: key,
+              })
+            "
+          />
+        </div>
+      </div>
+
+      <!-- Button Variables Section -->
+      <div v-if="processedParams.buttons">
+        <p class="mb-2.5 text-sm font-semibold">
+          {{ t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETERS') }}
+        </p>
+        <div
+          v-for="(button, index) in processedParams.buttons"
+          :key="`button-${index}`"
+          class="flex items-center mb-2.5"
+        >
+          <Input
+            v-model="processedParams.buttons[index].parameter"
+            type="text"
+            class="flex-1"
+            :placeholder="t('WHATSAPP_TEMPLATES.PARSER.BUTTON_PARAMETER')"
+          />
+        </div>
+      </div>
+      <p
+        v-if="v$.$dirty && v$.$invalid"
+        class="p-2.5 text-center rounded-md bg-n-ruby-9/20 text-n-ruby-9"
+      >
+        {{ $t('WHATSAPP_TEMPLATES.PARSER.FORM_ERROR_MESSAGE') }}
+      </p>
+    </div>
+
+    <slot
+      name="actions"
+      :send-message="sendMessage"
+      :reset-template="resetTemplate"
+      :go-back="goBack"
+      :is-valid="!v$.$invalid"
+      :disabled="isFormInvalid"
+    />
+  </div>
+</template>
--- a/app/javascript/dashboard/components/ChatListHeader.vue
+++ b/app/javascript/dashboard/components/ChatListHeader.vue
@@ -98,7 +98,7 @@ const toggleConversationLayout = () => {
          />
          <div
            id="saveFilterTeleportTarget"
-            class="absolute z-40 mt-2"
+            class="absolute z-50 mt-2"
            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
          />
        </div>
@@ -124,7 +124,7 @@ const toggleConversationLayout = () => {
          />
          <div
            id="conversationFilterTeleportTarget"
-            class="absolute z-40 mt-2"
+            class="absolute z-50 mt-2"
            :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
          />
        </div>
@@ -150,7 +150,7 @@ const toggleConversationLayout = () => {
        />
        <div
          id="conversationFilterTeleportTarget"
-          class="absolute z-40 mt-2"
+          class="absolute z-50 mt-2"
          :class="{ 'ltr:right-0 rtl:left-0': isOnExpandedLayout }"
        />
      </div>
--- a/app/javascript/dashboard/components/Code.vue
+++ b/app/javascript/dashboard/components/Code.vue
@@ -61,7 +61,9 @@ const onCopy = async e => {

 <template>
  <div class="relative text-left">
-    <div class="top-1.5 absolute right-1.5 flex items-center gap-1">
+    <div
+      class="top-1.5 absolute ltr:right-1.5 rtl:left-1.5 flex backdrop-blur-sm rounded-lg items-center gap-1"
+    >
      <form
        v-if="enableCodePen"
        class="flex items-center"
@@ -86,6 +88,11 @@ const onCopy = async e => {
        @click="onCopy"
      />
    </div>
-    <highlightjs v-if="script" :language="lang" :code="scrubbedScript" />
+    <highlightjs
+      v-if="script"
+      :language="lang"
+      :code="scrubbedScript"
+      class="[&_code]:text-start"
+    />
  </div>
 </template>
--- a/app/javascript/dashboard/components/app/UpgradeBanner.vue
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -1,94 +0,0 @@
-<script>
-import Banner from 'dashboard/components/ui/Banner.vue';
-import { mapGetters } from 'vuex';
-import { useAccount } from 'dashboard/composables/useAccount';
-import { differenceInDays } from 'date-fns';
-
-export default {
-  components: { Banner },
-  setup() {
-    const { accountId } = useAccount();
-    return {
-      accountId,
-    };
-  },
-  data() {
-    return { conversationMeta: {} };
-  },
-  computed: {
-    ...mapGetters({
-      isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
-      getAccount: 'accounts/getAccount',
-    }),
-    bannerMessage() {
-      return this.$t('GENERAL_SETTINGS.LIMITS_UPGRADE');
-    },
-    actionButtonMessage() {
-      return this.$t('GENERAL_SETTINGS.OPEN_BILLING');
-    },
-    shouldShowBanner() {
-      if (!this.isOnChatwootCloud) {
-        return false;
-      }
-
-      if (this.isTrialAccount()) {
-        return false;
-      }
-
-      return this.isLimitExceeded();
-    },
-  },
-  mounted() {
-    if (this.isOnChatwootCloud) {
-      this.fetchLimits();
-    }
-  },
-  methods: {
-    fetchLimits() {
-      this.$store.dispatch('accounts/limits');
-    },
-    routeToBilling() {
-      this.$router.push({
-        name: 'billing_settings_index',
-        params: { accountId: this.accountId },
-      });
-    },
-    isTrialAccount() {
-      // check if account is less than 15 days old
-      const account = this.getAccount(this.accountId);
-      if (!account) return false;
-
-      const createdAt = new Date(account.created_at);
-
-      const diffDays = differenceInDays(new Date(), createdAt);
-
-      return diffDays <= 15;
-    },
-    isLimitExceeded() {
-      const account = this.getAccount(this.accountId);
-      if (!account) return false;
-
-      const { limits } = account;
-      if (!limits) return false;
-
-      const { conversation, non_web_inboxes: nonWebInboxes } = limits;
-      return this.testLimit(conversation) || this.testLimit(nonWebInboxes);
-    },
-    testLimit({ allowed, consumed }) {
-      return consumed > allowed;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <Banner
-    v-if="shouldShowBanner"
-    color-scheme="alert"
-    :banner-message="bannerMessage"
-    :action-button-label="actionButtonMessage"
-    has-action-button
-    @primary-action="routeToBilling"
-  />
-</template>
--- a/app/javascript/dashboard/components/copilot/CopilotContainer.vue
+++ b/app/javascript/dashboard/components/copilot/CopilotContainer.vue
@@ -4,7 +4,12 @@ import { useStore } from 'dashboard/composables/store';
 import Copilot from 'dashboard/components-next/copilot/Copilot.vue';
 import { useMapGetter } from 'dashboard/composables/store';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { useConfig } from 'dashboard/composables/useConfig';
+import { useWindowSize } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import wootConstants from 'dashboard/constants/globals';
+
 defineProps({
  conversationInboxType: {
    type: String,
@@ -13,12 +18,20 @@ defineProps({
 });

 const store = useStore();
+const { uiSettings, updateUISettings } = useUISettings();
+const { isEnterprise } = useConfig();
+const { width: windowWidth } = useWindowSize();
+
 const currentUser = useMapGetter('getCurrentUser');
 const assistants = useMapGetter('captainAssistants/getRecords');
 const uiFlags = useMapGetter('captainAssistants/getUIFlags');
 const inboxAssistant = useMapGetter('getCopilotAssistant');
 const currentChat = useMapGetter('getSelectedChat');

+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
 const selectedCopilotThreadId = ref(null);
 const messages = computed(() =>
  store.getters['copilotMessages/getMessagesByThreadId'](
@@ -32,7 +45,6 @@ const isFeatureEnabledonAccount = useMapGetter(
 );

 const selectedAssistantId = ref(null);
-const { uiSettings, updateUISettings } = useUISettings();

 const activeAssistant = computed(() => {
  const preferredId = uiSettings.value.preferred_captain_assistant_id;
@@ -55,6 +67,15 @@ const activeAssistant = computed(() => {
  return assistants.value[0];
 });

+const closeCopilotPanel = () => {
+  if (isSmallScreen.value && uiSettings.value?.is_copilot_panel_open) {
+    updateUISettings({
+      is_contact_sidebar_open: false,
+      is_copilot_panel_open: false,
+    });
+  }
+};
+
 const setAssistant = async assistant => {
  selectedAssistantId.value = assistant.id;
  await updateUISettings({
@@ -63,6 +84,9 @@ const setAssistant = async assistant => {
 };

 const shouldShowCopilotPanel = computed(() => {
+  if (!isEnterprise) {
+    return false;
+  }
  const isCaptainEnabled = isFeatureEnabledonAccount.value(
    currentAccountId.value,
    FEATURE_FLAGS.CAPTAIN
@@ -94,14 +118,23 @@ const sendMessage = async message => {
 };

 onMounted(() => {
-  store.dispatch('captainAssistants/get');
+  if (isEnterprise) {
+    store.dispatch('captainAssistants/get');
+  }
 });
 </script>

 <template>
  <div
    v-if="shouldShowCopilotPanel"
-    class="ltr:border-l rtl:border-r border-n-weak h-full overflow-hidden z-10 w-[320px] min-w-[320px] 2xl:min-w-[360px] 2xl:w-[360px] flex flex-col bg-n-background"
+    v-on-click-outside="() => closeCopilotPanel()"
+    class="bg-n-background h-full overflow-hidden flex-col fixed top-0 ltr:right-0 rtl:left-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
+    :class="[
+      {
+        'md:flex': shouldShowCopilotPanel,
+        'md:hidden': !shouldShowCopilotPanel,
+      },
+    ]"
  >
    <Copilot
      :messages="messages"
--- a/app/javascript/dashboard/components/index.js
+++ b/app/javascript/dashboard/components/index.js
@@ -1,6 +1,5 @@
 // [NOTE][DEPRECATED] This method is to be deprecated, please do not add new components to this file.
 /* eslint no-plusplus: 0 */
-import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Code from './Code.vue';
 import ColorPicker from './widgets/ColorPicker.vue';
 import ConfirmDeleteModal from './widgets/modal/ConfirmDeleteModal.vue';
@@ -18,11 +17,9 @@ import Modal from './Modal.vue';
 import Spinner from 'shared/components/Spinner.vue';
 import Tabs from './ui/Tabs/Tabs.vue';
 import TabsItem from './ui/Tabs/TabsItem.vue';
-import Thumbnail from './widgets/Thumbnail.vue';
 import DatePicker from './ui/DatePicker/DatePicker.vue';

 const WootUIKit = {
-  AvatarUploader,
  Code,
  ColorPicker,
  ConfirmDeleteModal,
@@ -40,7 +37,6 @@ const WootUIKit = {
  Spinner,
  Tabs,
  TabsItem,
-  Thumbnail,
  DatePicker,
  install(Vue) {
    const keys = Object.keys(this);
--- a/app/javascript/dashboard/components/ui/Switch.vue
+++ b/app/javascript/dashboard/components/ui/Switch.vue
@@ -1,83 +0,0 @@
-<script>
-export default {
-  props: {
-    modelValue: { type: Boolean, default: false },
-    size: { type: String, default: '' },
-  },
-  emits: ['update:modelValue', 'input'],
-  methods: {
-    onClick() {
-      this.$emit('update:modelValue', !this.modelValue);
-      this.$emit('input', !this.modelValue);
-    },
-  },
-};
-</script>
-
-<template>
-  <button
-    type="button"
-    class="toggle-button p-0"
-    :class="{ active: modelValue, small: size === 'small' }"
-    role="switch"
-    :aria-checked="modelValue.toString()"
-    @click="onClick"
-  >
-    <span aria-hidden="true" :class="{ active: modelValue }" />
-  </button>
-</template>
-
-<style lang="scss" scoped>
-.toggle-button {
-  @apply bg-n-slate-5;
-  --toggle-button-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px,
-    rgba(59, 130, 246, 0.5) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
-    rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
-  border-radius: 0.5625rem;
-  border: 2px solid transparent;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  height: 1.188rem;
-  position: relative;
-  transition-duration: 200ms;
-  transition-property: background-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: 2.125rem;
-
-  &.active {
-    @apply bg-n-brand;
-  }
-
-  &.small {
-    width: 1.375rem;
-    height: 0.875rem;
-
-    span {
-      @apply size-2.5;
-
-      &.active {
-        @apply ltr:translate-x-[0.5rem] ltr:translate-y-0 rtl:translate-x-[-0.5rem] rtl:translate-y-0;
-      }
-    }
-  }
-
-  span {
-    @apply bg-n-background;
-
-    border-radius: 100%;
-    box-shadow: var(--toggle-button-box-shadow);
-    display: inline-block;
-    height: 0.9375rem;
-    transform: translate(0, 0);
-    transition-duration: 200ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    width: 0.9375rem;
-
-    &.active {
-      @apply ltr:translate-x-[0.9375rem] ltr:translate-y-0 rtl:translate-x-[-0.9375rem] rtl:translate-y-0;
-    }
-  }
-}
-</style>
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .13.0
 .4.0
@@ -1 +1 @@
 .2.0
 .4.2