chore: Minor fix

- use useMapGetter for current account id
- drop onBeforeUnmount cleanup; banner lives in the persistent app shell
- switch pluralization to the {n} convention used across en.json

.annotaterb.yml

@@ -0,0 +1,65 @@
+---
+:position: before
+:position_in_additional_file_patterns: before
+:position_in_class: before
+:position_in_factory: before
+:position_in_fixture: before
+:position_in_routes: before
+:position_in_serializer: before
+:position_in_test: before
+:classified_sort: true
+:exclude_controllers: true
+:exclude_factories: true
+:exclude_fixtures: true
+:exclude_helpers: true
+:exclude_scaffolds: true
+:exclude_serializers: true
+:exclude_sti_subclasses: false
+:exclude_tests: true
+:force: false
+:format_markdown: false
+:format_rdoc: false
+:format_yard: false
+:frozen: false
+:grouped_polymorphic: false
+:ignore_model_sub_dir: false
+:ignore_unknown_models: false
+:include_version: false
+:show_check_constraints: false
+:show_complete_foreign_keys: false
+:show_foreign_keys: true
+:show_indexes: true
+:show_indexes_include: false
+:simple_indexes: false
+:sort: false
+:timestamp: false
+:trace: false
+:with_comment: true
+:with_column_comments: true
+:with_table_comments: true
+:position_of_column_comment: :with_name
+:active_admin: false
+:command:
+:debug: false
+:hide_default_column_types: json,jsonb,hstore
+:hide_limit_column_types: integer,bigint,boolean
+:timestamp_columns:
+- created_at
+- updated_at
+:ignore_columns:
+:ignore_routes:
+:models: true
+:routes: false
+:skip_on_db_migrate: false
+:target_action: :do_annotations
+:wrapper:
+:wrapper_close:
+:wrapper_open:
+:classes_default_to_s: []
+:additional_file_patterns: []
+:model_dir:
+- app/models
+- enterprise/app/models
+:require: []
+:root_dir:
+- ''

.bundler-audit.yml

@@ -2,3 +2,8 @@
 ignore:
   - CVE-2021-41098 # https://github.com/chatwoot/chatwoot/issues/3097 (update once azure blob storage is updated)
   - GHSA-57hq-95w6-v4fc # Devise confirmable race condition — patched locally in User model (remove once on Devise 5+)
+  # Chatwoot defaults to Active Storage redirect-style URLs, and its recommended
+  # storage setup uses local/cloud storage with optional direct uploads to the
+  # storage provider rather than Rails proxy mode. Revisit if we enable
+  # rails_storage_proxy or other app-served Active Storage proxy routes.
+  - CVE-2026-33658

Gemfile

@@ -40,6 +40,8 @@ gem 'json_refs'
 gem 'rack-attack', '>= 6.7.0'
 # a utility tool for streaming, flexible and safe downloading of remote files
 gem 'down'
+# SSRF-safe URL fetching
+gem 'ssrf_filter', '~> 1.5'
 # authentication type to fetch and send mail over oauth2.0
 gem 'gmail_xoauth'
 # Lock net-smtp to 0.3.4 to avoid issues with gmail_xoauth2

Gemfile.lock

@@ -942,6 +942,7 @@ GEM
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     squasher (0.7.2)
+    ssrf_filter (1.5.0)
     stackprof (0.2.25)
     statsd-ruby (1.5.0)
     stripe (18.0.1)
@@ -1158,6 +1159,7 @@ DEPENDENCIES
   spring
   spring-watcher-listen
   squasher
+  ssrf_filter (~> 1.5)
   stackprof
   stripe (~> 18.0)
   telephone_number

VERSION_CW

@@ -1 +1 @@
-4.12.0
+4.13.0

app/builders/email/base_builder.rb

@@ -1,4 +1,6 @@
 class Email::BaseBuilder
+  include EmailAddressParseable
+
   pattr_initialize [:inbox!]
 
   private
@@ -47,8 +49,4 @@ class Email::BaseBuilder
     # can save it in the format "Name <email@domain.com>"
     parse_email(account.support_email)
   end
-
-  def parse_email(email_string)
-    Mail::Address.new(email_string).address
-  end
 end

app/builders/v2/report_builder.rb

@@ -1,6 +1,7 @@
 class V2::ReportBuilder
   include DateRangeHelper
   include ReportHelper
+
   attr_reader :account, :params
 
   DEFAULT_GROUP_BY = 'day'.freeze

app/builders/v2/reports/agent_summary_builder.rb

@@ -11,10 +11,6 @@ class V2::Reports::AgentSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group('assignee_id').count
-  end
-
   def prepare_report
     account.account_users.map do |account_user|
       build_agent_stats(account_user)

app/builders/v2/reports/base_summary_builder.rb

@@ -9,37 +9,13 @@ class V2::Reports::BaseSummaryBuilder
   private
 
   def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
+    results = data_source.summary
 
-  def load_reporting_events_data
-    # Extract the column name for indexing (e.g., 'conversations.team_id' -> 'team_id')
-    index_key = group_by_key.to_s.split('.').last
-
-    results = reporting_events
-              .select(
-                "#{group_by_key} as #{index_key}",
-                "COUNT(CASE WHEN name = 'conversation_resolved' THEN 1 END) as resolved_count",
-                "AVG(CASE WHEN name = 'conversation_resolved' THEN #{average_value_key} END) as avg_resolution_time",
-                "AVG(CASE WHEN name = 'first_response' THEN #{average_value_key} END) as avg_first_response_time",
-                "AVG(CASE WHEN name = 'reply_time' THEN #{average_value_key} END) as avg_reply_time"
-              )
-              .group(group_by_key)
-              .index_by { |record| record.public_send(index_key) }
-
-    @resolved_count = results.transform_values(&:resolved_count)
-    @avg_resolution_time = results.transform_values(&:avg_resolution_time)
-    @avg_first_response_time = results.transform_values(&:avg_first_response_time)
-    @avg_reply_time = results.transform_values(&:avg_reply_time)
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range)
-  end
-
-  def fetch_conversations_count
-    # Override this method
+    @conversations_count = results.transform_values { |data| data[:conversations_count] }
+    @resolved_count = results.transform_values { |data| data[:resolved_conversations_count] }
+    @avg_resolution_time = results.transform_values { |data| data[:avg_resolution_time] }
+    @avg_first_response_time = results.transform_values { |data| data[:avg_first_response_time] }
+    @avg_reply_time = results.transform_values { |data| data[:avg_reply_time] }
   end
 
   def group_by_key
@@ -50,7 +26,26 @@ class V2::Reports::BaseSummaryBuilder
     # Override this method
   end
 
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]).present? ? :value_in_business_hours : :value
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: nil,
+      dimension_type: summary_dimension_type,
+      dimension_id: nil,
+      scope: nil,
+      range: range,
+      group_by: 'day',
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
+  def summary_dimension_type
+    {
+      'account_id' => 'account',
+      'user_id' => 'agent',
+      'inbox_id' => 'inbox',
+      'conversations.team_id' => 'team'
+    }.fetch(group_by_key.to_s)
   end
 end

app/builders/v2/reports/conversations/base_report_builder.rb

@@ -3,23 +3,10 @@ class V2::Reports::Conversations::BaseReportBuilder
 
   private
 
-  AVG_METRICS = %w[avg_first_response_time avg_resolution_time reply_time].freeze
-  COUNT_METRICS = %w[
-    conversations_count
-    incoming_messages_count
-    outgoing_messages_count
-    resolutions_count
-    bot_resolutions_count
-    bot_handoffs_count
-  ].freeze
-
   def builder_class(metric)
-    case metric
-    when *AVG_METRICS
-      V2::Reports::Timeseries::AverageReportBuilder
-    when *COUNT_METRICS
-      V2::Reports::Timeseries::CountReportBuilder
-    end
+    return unless Reports::ReportMetricRegistry.supported?(metric)
+
+    V2::Reports::Timeseries::ReportBuilder
   end
 
   def log_invalid_metric

app/builders/v2/reports/inbox_summary_builder.rb

@@ -11,15 +11,6 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def load_data
-    @conversations_count = fetch_conversations_count
-    load_reporting_events_data
-  end
-
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(group_by_key).count
-  end
-
   def prepare_report
     account.inboxes.map do |inbox|
       build_inbox_stats(inbox)
@@ -40,8 +31,4 @@ class V2::Reports::InboxSummaryBuilder < V2::Reports::BaseSummaryBuilder
   def group_by_key
     :inbox_id
   end
-
-  def average_value_key
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours]) ? :value_in_business_hours : :value
-  end
 end

app/builders/v2/reports/team_summary_builder.rb

@@ -6,14 +6,6 @@ class V2::Reports::TeamSummaryBuilder < V2::Reports::BaseSummaryBuilder
   attr_reader :conversations_count, :resolved_count,
               :avg_resolution_time, :avg_first_response_time, :avg_reply_time
 
-  def fetch_conversations_count
-    account.conversations.where(created_at: range).group(:team_id).count
-  end
-
-  def reporting_events
-    @reporting_events ||= account.reporting_events.where(created_at: range).joins(:conversation)
-  end
-
   def prepare_report
     account.teams.map do |team|
       build_team_stats(team)

app/builders/v2/reports/timeseries/average_report_builder.rb

@@ -1,48 +0,0 @@
-class V2::Reports::Timeseries::AverageReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_average_time = reporting_events.average(average_value_key)
-    grouped_event_count = reporting_events.count
-    grouped_average_time.each_with_object([]) do |element, arr|
-      event_date, average_time = element
-      arr << {
-        value: average_time,
-        timestamp: event_date.in_time_zone(timezone).to_i,
-        count: grouped_event_count[event_date]
-      }
-    end
-  end
-
-  def aggregate_value
-    object_scope.average(average_value_key)
-  end
-
-  private
-
-  def event_name
-    metric_to_event_name = {
-      avg_first_response_time: :first_response,
-      avg_resolution_time: :conversation_resolved,
-      reply_time: :reply_time
-    }
-    metric_to_event_name[params[:metric].to_sym]
-  end
-
-  def object_scope
-    scope.reporting_events.where(name: event_name, created_at: range, account_id: account.id)
-  end
-
-  def reporting_events
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    )
-  end
-
-  def average_value_key
-    @average_value_key ||= params[:business_hours].present? ? :value_in_business_hours : :value
-  end
-end

app/builders/v2/reports/timeseries/base_timeseries_builder.rb

@@ -1,12 +1,13 @@
 class V2::Reports::Timeseries::BaseTimeseriesBuilder
   include TimezoneHelper
   include DateRangeHelper
+
   DEFAULT_GROUP_BY = 'day'.freeze
 
   pattr_initialize :account, :params
 
   def scope
-    case params[:type].to_sym
+    case dimension_type.to_sym
     when :account
       account
     when :inbox
@@ -20,6 +21,20 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
     end
   end
 
+  def data_source
+    @data_source ||= Reports::DataSource.for(
+      account: account,
+      metric: params[:metric],
+      dimension_type: dimension_type,
+      dimension_id: params[:id],
+      scope: scope,
+      range: range,
+      group_by: group_by,
+      timezone_offset: params[:timezone_offset],
+      business_hours: params[:business_hours]
+    )
+  end
+
   def inbox
     @inbox ||= account.inboxes.find(params[:id])
   end
@@ -43,4 +58,10 @@ class V2::Reports::Timeseries::BaseTimeseriesBuilder
   def timezone
     @timezone ||= timezone_name_from_offset(params[:timezone_offset])
   end
+
+  private
+
+  def dimension_type
+    (params[:type].presence || 'account').to_s
+  end
 end

app/builders/v2/reports/timeseries/count_report_builder.rb

@@ -1,78 +0,0 @@
-class V2::Reports::Timeseries::CountReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
-  def timeseries
-    grouped_count.each_with_object([]) do |element, arr|
-      event_date, event_count = element
-
-      # The `event_date` is in Date format (without time), such as "Wed, 15 May 2024".
-      # We need a timestamp for the start of the day. However, we can't use `event_date.to_time.to_i`
-      # because it converts the date to 12:00 AM server timezone.
-      # The desired output should be 12:00 AM in the specified timezone.
-      arr << { value: event_count, timestamp: event_date.in_time_zone(timezone).to_i }
-    end
-  end
-
-  def aggregate_value
-    object_scope.count
-  end
-
-  private
-
-  def metric
-    @metric ||= params[:metric]
-  end
-
-  def object_scope
-    send("scope_for_#{metric}")
-  end
-
-  def scope_for_conversations_count
-    scope.conversations.where(account_id: account.id, created_at: range)
-  end
-
-  def scope_for_incoming_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).incoming.unscope(:order)
-  end
-
-  def scope_for_outgoing_messages_count
-    scope.messages.where(account_id: account.id, created_at: range).outgoing.unscope(:order)
-  end
-
-  def scope_for_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_resolutions_count
-    scope.reporting_events.where(
-      name: :conversation_bot_resolved,
-      account_id: account.id,
-      created_at: range
-    )
-  end
-
-  def scope_for_bot_handoffs_count
-    scope.reporting_events.joins(:conversation).select(:conversation_id).where(
-      name: :conversation_bot_handoff,
-      account_id: account.id,
-      created_at: range
-    ).distinct
-  end
-
-  def grouped_count
-    # IMPORTANT: time_zone parameter affects both data grouping AND output timestamps
-    # It converts timestamps to the target timezone before grouping, which means
-    # the same event can fall into different day buckets depending on timezone
-    # Example: 2024-01-15 00:00 UTC becomes 2024-01-14 16:00 PST (falls on different day)
-    @grouped_values = object_scope.group_by_period(
-      group_by,
-      :created_at,
-      default_value: 0,
-      range: range,
-      permit: %w[day week month year hour],
-      time_zone: timezone
-    ).count
-  end
-end

app/builders/v2/reports/timeseries/report_builder.rb

@@ -0,0 +1,9 @@
+class V2::Reports::Timeseries::ReportBuilder < V2::Reports::Timeseries::BaseTimeseriesBuilder
+  def timeseries
+    data_source.timeseries
+  end
+
+  def aggregate_value
+    data_source.aggregate
+  end
+end

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

@@ -34,6 +34,10 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
     @agent_bot.reload
   end
 
+  def reset_secret
+    @agent_bot.reset_secret!
+  end
+
   private
 
   def agent_bot

app/controllers/api/v1/accounts/captain/tasks_controller.rb

@@ -57,7 +57,7 @@ class Api::V1::Accounts::Captain::TasksController < Api::V1::Accounts::BaseContr
     if result.nil?
       render json: { message: nil }
     elsif result[:error]
-      render json: { error: result[:error] }, status: :unprocessable_entity
+      render json: { error: result[:error] }, status: :unprocessable_content
     else
       response_data = { message: result[:message] }
       response_data[:follow_up_context] = result[:follow_up_context] if result[:follow_up_context]
@@ -69,3 +69,5 @@ class Api::V1::Accounts::Captain::TasksController < Api::V1::Accounts::BaseContr
     authorize(:'captain/tasks')
   end
 end
+
+Api::V1::Accounts::Captain::TasksController.prepend_mod_with('Api::V1::Accounts::Captain::TasksController')

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

@@ -116,6 +116,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     # High-traffic accounts generate excessive DB writes when agents frequently switch between conversations.
     # Throttle last_seen updates to once per hour when there are no unread messages to reduce DB load.
     # Always update immediately if there are unread messages to maintain accurate read/unread state.
+    # Visiting a conversation should clear any unread inbox notifications for this conversation.
+    Notification::MarkConversationReadService.new(user: Current.user, account: Current.account, conversation: @conversation).perform
     return update_last_seen_on_conversation(DateTime.now.utc, true) if assignee? && @conversation.assignee_unread_messages.any?
     return update_last_seen_on_conversation(DateTime.now.utc, false) if !assignee? && @conversation.unread_messages.any?
 

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

@@ -66,6 +66,12 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def reset_secret
+    return head :not_found unless @inbox.api?
+
+    @inbox.channel.reset_secret!
+  end
+
   def destroy
     ::DeleteObjectJob.perform_later(@inbox, Current.user, request.ip) if @inbox.present?
     render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }

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

@@ -5,7 +5,7 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
              elsif params[:external_url].present?
                create_from_url
              else
-               render_error('No file or URL provided', :unprocessable_entity)
+               render_error(I18n.t('errors.upload.missing_input'), :unprocessable_entity)
              end
 
     render_success(result) if result.is_a?(ActiveStorage::Blob)
@@ -19,35 +19,21 @@ class Api::V1::Accounts::UploadController < Api::V1::Accounts::BaseController
   end
 
   def create_from_url
-    uri = parse_uri(params[:external_url])
-    return if performed?
-
-    fetch_and_process_file_from_uri(uri)
-  end
-
-  def parse_uri(url)
-    uri = URI.parse(url)
-    validate_uri(uri)
-    uri
-  rescue URI::InvalidURIError, SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
-    nil
-  end
-
-  def validate_uri(uri)
-    raise URI::InvalidURIError unless uri.is_a?(URI::HTTP) || uri.is_a?(URI::HTTPS)
-  end
-
-  def fetch_and_process_file_from_uri(uri)
-    uri.open do |file|
-      create_and_save_blob(file, File.basename(uri.path), file.content_type)
+    SafeFetch.fetch(params[:external_url].to_s) do |result|
+      create_and_save_blob(result.tempfile, result.filename, result.content_type)
     end
-  rescue OpenURI::HTTPError => e
-    render_error("Failed to fetch file from URL: #{e.message}", :unprocessable_entity)
-  rescue SocketError
-    render_error('Invalid URL provided', :unprocessable_entity)
+  rescue SafeFetch::HttpError => e
+    render_error(I18n.t('errors.upload.fetch_failed_with_message', message: e.message), :unprocessable_entity)
+  rescue SafeFetch::FetchError
+    render_error(I18n.t('errors.upload.fetch_failed'), :unprocessable_entity)
+  rescue SafeFetch::FileTooLargeError
+    render_error(I18n.t('errors.upload.file_too_large'), :unprocessable_entity)
+  rescue SafeFetch::UnsupportedContentTypeError
+    render_error(I18n.t('errors.upload.unsupported_content_type'), :unprocessable_entity)
+  rescue SafeFetch::Error
+    render_error(I18n.t('errors.upload.invalid_url'), :unprocessable_entity)
   rescue StandardError
-    render_error('An unexpected error occurred', :internal_server_error)
+    render_error(I18n.t('errors.upload.unexpected'), :internal_server_error)
   end
 
   def create_and_save_blob(io, filename, content_type)

app/controllers/api/v1/accounts_controller.rb

@@ -30,9 +30,20 @@ class Api::V1::AccountsController < Api::BaseController
       locale: account_params[:locale],
       user: current_user
     ).perform
+    enqueue_branding_enrichment
     if @user
-      send_auth_headers(@user)
-      render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
+      # Authenticated users (dashboard "add account") and api_only signups
+      # need the full response with account_id. API-only deployments have no
+      # frontend to handle the email confirmation flow, so they need auth
+      # tokens to proceed.
+      # Unauthenticated web signup returns only the email — no session is
+      # created until the user confirms via the email link.
+      if current_user || api_only_signup?
+        send_auth_headers(@user)
+        render 'api/v1/accounts/create', format: :json, locals: { resource: @user }
+      else
+        render json: { email: @user.email }
+      end
     else
       render_error_response(CustomExceptions::Account::SignupFailed.new({}))
     end
@@ -59,6 +70,16 @@ class Api::V1::AccountsController < Api::BaseController
 
   private
 
+  def enqueue_branding_enrichment
+    return if account_params[:email].blank?
+
+    Account::BrandingEnrichmentJob.perform_later(@account.id, account_params[:email])
+    Redis::Alfred.set(format(Redis::Alfred::ACCOUNT_ONBOARDING_ENRICHMENT, account_id: @account.id), '1', ex: 30)
+  rescue StandardError => e
+    # Enrichment is optional — never let queue/Redis failures abort signup
+    ChatwootExceptionTracker.new(e).capture_exception
+  end
+
   def ensure_account_name
     # ensure that account_name and user_full_name is present
     # this is becuase the account builder and the models validations are not triggered
@@ -103,6 +124,15 @@ class Api::V1::AccountsController < Api::BaseController
     raise ActionController::RoutingError, 'Not Found' unless GlobalConfigService.account_signup_enabled?
   end
 
+  def api_only_signup?
+    # CW_API_ONLY_SERVER is the canonical flag for API-only deployments.
+    # ENABLE_ACCOUNT_SIGNUP='api_only' is a legacy sentinel for the same purpose.
+    # Read ENABLE_ACCOUNT_SIGNUP raw from InstallationConfig because GlobalConfig.get
+    # typecasts it to boolean, coercing 'api_only' to true.
+    ActiveModel::Type::Boolean.new.cast(ENV.fetch('CW_API_ONLY_SERVER', false)) ||
+      InstallationConfig.find_by(name: 'ENABLE_ACCOUNT_SIGNUP')&.value.to_s == 'api_only'
+  end
+
   def validate_captcha
     raise ActionController::InvalidAuthenticityToken, 'Invalid Captcha' unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
   end

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

@@ -2,8 +2,8 @@ class Api::V1::Profile::MfaController < Api::BaseController
   before_action :check_mfa_feature_available
   before_action :check_mfa_enabled, only: [:destroy, :backup_codes]
   before_action :check_mfa_disabled, only: [:create, :verify]
-  before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
   before_action :validate_password, only: [:destroy]
+  before_action :validate_otp, only: [:verify, :backup_codes, :destroy]
 
   def show; end
 
@@ -48,7 +48,8 @@ class Api::V1::Profile::MfaController < Api::BaseController
   def validate_otp
     authenticated = Mfa::AuthenticationService.new(
       user: current_user,
-      otp_code: mfa_params[:otp_code]
+      otp_code: mfa_params[:otp_code],
+      backup_code: mfa_params[:backup_code]
     ).authenticate
 
     return if authenticated
@@ -63,6 +64,6 @@ class Api::V1::Profile::MfaController < Api::BaseController
   end
 
   def mfa_params
-    params.permit(:otp_code, :password)
+    params.permit(:otp_code, :backup_code, :password)
   end
 end

app/controllers/api/v1/widget/messages_controller.rb

@@ -43,7 +43,15 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
   end
 
   def set_conversation
-    @conversation = create_conversation if conversation.nil?
+    return unless conversation.nil?
+
+    @conversation = create_conversation
+    apply_labels if permitted_params[:labels].present?
+  end
+
+  def apply_labels
+    valid_labels = inbox.account.labels.where(title: permitted_params[:labels]).pluck(:title)
+    @conversation.update_labels(valid_labels) if valid_labels.present?
   end
 
   def message_finder_params
@@ -64,7 +72,14 @@ class Api::V1::Widget::MessagesController < Api::V1::Widget::BaseController
 
   def permitted_params
     # timestamp parameter is used in create conversation method
-    params.permit(:id, :before, :after, :website_token, contact: [:name, :email], message: [:content, :referer_url, :timestamp, :echo_id, :reply_to])
+    # custom_attributes and labels are applied when a new conversation is created alongside the first message
+    params.permit(
+      :id, :before, :after, :website_token,
+      contact: [:name, :email],
+      message: [:content, :referer_url, :timestamp, :echo_id, :reply_to],
+      custom_attributes: {},
+      labels: []
+    )
   end
 
   def set_message

app/controllers/api/v2/accounts/summary_reports_controller.rb

@@ -3,15 +3,15 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
   before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label, :channel]
 
   def agent
-    render_report_with(V2::Reports::AgentSummaryBuilder)
+    render_report_with(V2::Reports::AgentSummaryBuilder, type: :agent)
   end
 
   def team
-    render_report_with(V2::Reports::TeamSummaryBuilder)
+    render_report_with(V2::Reports::TeamSummaryBuilder, type: :team)
   end
 
   def inbox
-    render_report_with(V2::Reports::InboxSummaryBuilder)
+    render_report_with(V2::Reports::InboxSummaryBuilder, type: :inbox)
   end
 
   def label
@@ -38,8 +38,9 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     }
   end
 
-  def render_report_with(builder_class)
-    builder = builder_class.new(account: Current.account, params: @builder_params)
+  def render_report_with(builder_class, type: nil)
+    builder_params = type.present? ? @builder_params.merge(type: type) : @builder_params
+    builder = builder_class.new(account: Current.account, params: builder_params)
     render json: builder.build
   end
 

app/controllers/auth/resend_confirmations_controller.rb

@@ -0,0 +1,18 @@
+# Unauthenticated endpoint for resending confirmation emails during signup.
+# This is a standalone controller (not on DeviseOverrides::ConfirmationsController)
+# because OmniAuth middleware intercepts all POST /auth/* routes as provider
+# callbacks, and Devise controller filters cause 307 redirects for custom actions.
+# Inherits from ActionController::API to avoid both issues entirely.
+# Rate-limited by Rack::Attack (IP + email) and gated by hCaptcha.
+class Auth::ResendConfirmationsController < ActionController::API
+  def create
+    return head(:ok) unless ChatwootCaptcha.new(params[:h_captcha_client_response]).valid?
+
+    email = params[:email]
+    return head(:ok) unless email.is_a?(String)
+
+    user = User.from_email(email.strip.downcase)
+    user&.send_confirmation_instructions unless user&.confirmed?
+    head :ok
+  end
+end

app/controllers/devise_overrides/omniauth_callbacks_controller.rb

@@ -10,7 +10,12 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   private
 
   def sign_in_user
+    # Capture before skip_confirmation! sets confirmed_at, which would
+    # make oauth_user_needs_password_reset? return false and skip the
+    # password reset for persisted unconfirmed users.
+    needs_password_reset = oauth_user_needs_password_reset?
     @resource.skip_confirmation! if confirmable_enabled?
+    set_random_password_if_oauth_user if needs_password_reset
 
     # once the resource is found and verified
     # we can just send them to the login page again with the SSO params
@@ -20,7 +25,10 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
   end
 
   def sign_in_user_on_mobile
+    # See comment in sign_in_user for why this is captured before skip_confirmation!
+    needs_password_reset = oauth_user_needs_password_reset?
     @resource.skip_confirmation! if confirmable_enabled?
+    set_random_password_if_oauth_user if needs_password_reset
 
     # once the resource is found and verified
     # we can just send them to the login page again with the SSO params
@@ -37,6 +45,7 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
     return redirect_to login_page_url(error: 'business-account-only') unless validate_signup_email_is_business_domain?
 
     create_account_for_user
+    set_random_password_if_oauth_user
     token = @resource.send(:set_reset_password_token)
     frontend_url = ENV.fetch('FRONTEND_URL', nil)
     redirect_to "#{frontend_url}/app/auth/password/edit?config=default&reset_password_token=#{token}"
@@ -81,6 +90,15 @@ class DeviseOverrides::OmniauthCallbacksController < DeviseTokenAuth::OmniauthCa
     Avatar::AvatarFromUrlJob.perform_later(@resource, auth_hash['info']['image'])
   end
 
+  def oauth_user_needs_password_reset?
+    @resource.present? && (@resource.new_record? || !@resource.confirmed?)
+  end
+
+  def set_random_password_if_oauth_user
+    # Password must satisfy secure_password requirements (uppercase, lowercase, number, special char)
+    @resource.update(password: "#{SecureRandom.hex(16)}aA1!") if @resource.persisted?
+  end
+
   def default_devise_mapping
     'user'
   end

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

@@ -0,0 +1,101 @@
+class Platform::Api::V1::EmailChannelMigrationsController < PlatformController
+  before_action :set_account
+  before_action :validate_account_permissible
+  before_action :validate_feature_flag
+  before_action :validate_params
+
+  def create
+    results = migrate_email_channels
+    render json: { results: results }, status: :ok
+  end
+
+  private
+
+  def set_account
+    @account = Account.find(params[:account_id])
+  end
+
+  def validate_account_permissible
+    return if @platform_app.platform_app_permissibles.find_by(permissible: @account)
+
+    render json: { error: 'Non permissible resource' }, status: :unauthorized
+  end
+
+  def validate_feature_flag
+    return if ActiveModel::Type::Boolean.new.cast(ENV.fetch('EMAIL_CHANNEL_MIGRATION', false))
+
+    render json: { error: 'Email channel migration is not enabled' }, status: :forbidden
+  end
+
+  def validate_params
+    return render json: { error: 'Missing migrations parameter' }, status: :unprocessable_entity if migration_params.blank?
+
+    return unless migration_params.size > MAX_MIGRATIONS
+
+    return render json: { error: "Too many migrations (max #{MAX_MIGRATIONS})" },
+                  status: :unprocessable_entity
+  end
+
+  def migrate_email_channels
+    migration_params.map { |entry| migrate_single(entry) }
+  end
+
+  MAX_MIGRATIONS = 25
+  SUPPORTED_PROVIDERS = %w[google microsoft].freeze
+
+  def migrate_single(entry)
+    validate_provider!(entry[:provider])
+
+    ActiveRecord::Base.transaction do
+      channel = create_channel(entry)
+      inbox = create_inbox(channel, entry)
+
+      { email: entry[:email], inbox_id: inbox.id, channel_id: channel.id, status: 'success' }
+    end
+  rescue StandardError => e
+    { email: entry[:email], status: 'error', message: e.message }
+  end
+
+  def create_channel(entry)
+    Channel::Email.create!(
+      account_id: @account.id,
+      email: entry[:email],
+      provider: entry[:provider],
+      provider_config: entry[:provider_config]&.to_h,
+      imap_enabled: entry.fetch(:imap_enabled, true),
+      imap_address: entry[:imap_address] || default_imap_address(entry[:provider]),
+      imap_port: entry[:imap_port] || 993,
+      imap_login: entry[:imap_login] || entry[:email],
+      imap_enable_ssl: entry.fetch(:imap_enable_ssl, true)
+    )
+  end
+
+  def create_inbox(channel, entry)
+    @account.inboxes.create!(
+      name: entry[:inbox_name] || "Migrated #{entry[:provider]&.capitalize}: #{entry[:email]}",
+      channel: channel
+    )
+  end
+
+  def validate_provider!(provider)
+    return if SUPPORTED_PROVIDERS.include?(provider)
+
+    raise ArgumentError, "Unsupported provider '#{provider}'. Must be one of: #{SUPPORTED_PROVIDERS.join(', ')}"
+  end
+
+  def default_imap_address(provider)
+    case provider
+    when 'google' then 'imap.gmail.com'
+    when 'microsoft' then 'outlook.office365.com'
+    else ''
+    end
+  end
+
+  def migration_params
+    params.permit(migrations: [
+                    :email, :provider, :inbox_name,
+                    :imap_enabled, :imap_address, :imap_port, :imap_login, :imap_enable_ssl,
+                    { provider_config: {} }
+                  ])[:migrations]
+  end
+end

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

@@ -1,6 +1,7 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
+  before_action :ensure_portal_feature_enabled
   before_action :set_category, except: [:index, :show, :tracking_pixel]
   before_action :set_article, only: [:show]
   layout 'portal'
@@ -61,7 +62,7 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @parsed_content = render_article_content(@article.content)
+    @parsed_content = render_article_content(@article.content.to_s)
   end
 
   def set_category

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

@@ -1,6 +1,7 @@
 class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
+  before_action :ensure_portal_feature_enabled
   before_action :set_category, only: [:show]
   layout 'portal'
 

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

@@ -1,7 +1,8 @@
 class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show]
-  before_action :portal
   before_action :redirect_to_portal_with_locale, only: [:show]
+  before_action :portal
+  before_action :ensure_portal_feature_enabled
   layout 'portal'
 
   def show
@@ -24,6 +25,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   def redirect_to_portal_with_locale
     return if params[:locale].present?
 
+    portal
     redirect_to "/hc/#{@portal.slug}/#{@portal.default_locale}"
   end
 end

app/controllers/public_controller.rb

@@ -18,4 +18,11 @@ class PublicController < ActionController::Base
       Please send us an email at support@chatwoot.com with the custom domain name and account API key"
     }, status: :unauthorized and return
   end
+
+  def ensure_portal_feature_enabled
+    return unless ChatwootApp.chatwoot_cloud?
+    return if @portal.account.feature_enabled?('help_center')
+
+    render 'public/api/v1/portals/not_active', status: :payment_required
+  end
 end

app/javascript/dashboard/App.vue

@@ -5,6 +5,7 @@ import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
+import LowBackupCodesBanner from './components/app/LowBackupCodesBanner.vue';
 import vueActionCable from './helper/actionCable';
 import { useRouter } from 'vue-router';
 import { useStore } from 'dashboard/composables/store';
@@ -30,6 +31,7 @@ export default {
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
+    LowBackupCodesBanner,
   },
   setup() {
     const router = useRouter();
@@ -98,7 +100,9 @@ export default {
       mql.onchange = e => setColorTheme(e.matches);
     },
     setLocale(locale) {
-      this.$root.$i18n.locale = locale;
+      if (locale) {
+        this.$root.$i18n.locale = locale;
+      }
     },
     async initializeAccount() {
       await this.$store.dispatch('accounts/get');
@@ -138,6 +142,7 @@ export default {
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />
+      <LowBackupCodesBanner v-if="hideOnOnboardingView" />
     </template>
     <router-view v-slot="{ Component }">
       <transition name="fade" mode="out-in">

app/javascript/dashboard/api/agentBots.js

@@ -25,6 +25,10 @@ class AgentBotsAPI extends ApiClient {
   resetAccessToken(botId) {
     return axios.post(`${this.url}/${botId}/reset_access_token`);
   }
+
+  resetSecret(botId) {
+    return axios.post(`${this.url}/${botId}/reset_secret`);
+  }
 }
 
 export default new AgentBotsAPI();

app/javascript/dashboard/api/captain/customTools.js

@@ -31,6 +31,12 @@ class CaptainCustomTools extends ApiClient {
   delete(id) {
     return axios.delete(`${this.url}/${id}`);
   }
+
+  test(data = {}) {
+    return axios.post(`${this.url}/test`, {
+      custom_tool: data,
+    });
+  }
 }
 
 export default new CaptainCustomTools();

app/javascript/dashboard/api/inboxes.js

@@ -48,6 +48,10 @@ class Inboxes extends CacheEnabledApiClient {
       template,
     });
   }
+
+  resetSecret(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/reset_secret`);
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/mfa.js

@@ -14,9 +14,9 @@ class MfaAPI extends ApiClient {
     return axios.post(`${this.url}/verify`, { otp_code: otpCode });
   }
 
-  disable(password, otpCode) {
+  disable(password, { otpCode, backupCode } = {}) {
     return axios.delete(this.url, {
-      data: { password, otp_code: otpCode },
+      data: { password, otp_code: otpCode, backup_code: backupCode },
     });
   }
 

app/javascript/dashboard/assets/scss/_base.scss

@@ -106,6 +106,10 @@ select {
   &[disabled] {
     @apply field-disabled;
   }
+
+  option:not(:disabled) {
+    @apply bg-n-solid-2 text-n-slate-12;
+  }
 }
 
 // Textarea

app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue

@@ -20,11 +20,11 @@ const excludedLabels = defineModel('excludedLabels', {
 
 const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
   type: Number,
-  default: 10,
+  default: null,
 });
 
-// Duration limits: 10 minutes to 999 days (in minutes)
-const MIN_DURATION_MINUTES = 10;
+// Duration limits: 1 minute to 999 days (in minutes)
+const MIN_DURATION_MINUTES = 1;
 const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
 
 const { t } = useI18n();

app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue

@@ -27,7 +27,7 @@ const { t } = useI18n();
 
 const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
 const DEFAULT_CONVERSATION_LIMIT = 10;
-const MIN_CONVERSATION_LIMIT = 1;
+const MIN_CONVERSATION_LIMIT = 0;
 const MAX_CONVERSATION_LIMIT = 100000;
 
 const selectedInboxIds = computed(
@@ -42,6 +42,7 @@ const availableInboxes = computed(() =>
 
 const isLimitValid = limit => {
   return (
+    Number.isInteger(limit.conversationLimit) &&
     limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
     limit.conversationLimit <= MAX_CONVERSATION_LIMIT
   );

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

@@ -107,11 +107,10 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger="{ toggle }">
+                <template #trigger>
                   <Button
                     :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
                     size="sm"
-                    @click="toggle"
                   />
                 </template>
               </ComposeConversation>

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

@@ -114,8 +114,8 @@ const emit = defineEmits([
           </div>
           <div class="w-px h-4 bg-n-strong" />
           <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            <template #trigger>
+              <Button :label="buttonLabel" size="sm" />
             </template>
           </ComposeConversation>
         </div>

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

@@ -103,6 +103,7 @@ const showPagination = computed(() => {
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
+            class="mb-1"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

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

@@ -1,207 +1,63 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 
-defineProps({
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
   priority: {
     type: String,
     default: '',
   },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { t } = useI18n();
+
+const icons = {
+  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
+  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
+  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
+};
+
+const priorityLabels = {
+  [CONVERSATION_PRIORITY.URGENT]: 'CONVERSATION.PRIORITY.OPTIONS.URGENT',
+  [CONVERSATION_PRIORITY.HIGH]: 'CONVERSATION.PRIORITY.OPTIONS.HIGH',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'CONVERSATION.PRIORITY.OPTIONS.MEDIUM',
+  [CONVERSATION_PRIORITY.LOW]: 'CONVERSATION.PRIORITY.OPTIONS.LOW',
+};
+
+const iconName = computed(() => {
+  if (props.priority && icons[props.priority]) {
+    return icons[props.priority];
+  }
+  return props.showEmpty ? 'i-woot-priority-empty' : '';
+});
+
+const tooltipContent = computed(() => {
+  if (props.priority && priorityLabels[props.priority]) {
+    return t(priorityLabels[props.priority]);
+  }
+
+  if (props.showEmpty) {
+    return t('CONVERSATION.PRIORITY.OPTIONS.NONE');
+  }
+
+  return '';
 });
 </script>
 
-<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- Low Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-      </g>
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-      </g>
-    </svg>
-  </div>
+  <Icon
+    v-tooltip.top="{
+      content: tooltipContent,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 text-n-slate-5"
+  />
 </template>

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

@@ -57,7 +57,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow !z-20"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -27,58 +27,50 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
-  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
   'previewArticle',
+  'createArticle',
 ]);
 
 const { t } = useI18n();
 
 const isNewArticle = computed(() => !props.article?.id);
 
-const saveAndSync = value => {
-  emit('saveArticle', value);
-};
+const localTitle = ref(props.article?.title ?? '');
+const localContent = ref(props.article?.content ?? '');
 
-// this will only send the data to the backend
-// but will not update the local state preventing unnecessary re-renders
-// since the data is already saved and we keep the editor text as the source of truth
-const quickSave = debounce(
-  value => emit('saveArticleAsync', value),
-  400,
-  false
+// Sync local state when navigating to a different article or on initial fetch
+watch(
+  () => props.article?.id,
+  newId => {
+    if (newId) {
+      localTitle.value = props.article?.title ?? '';
+      localContent.value = props.article?.content ?? '';
+    }
+  }
 );
 
-// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
-// so we can save the data to the backend and retrieve the updated data
-// this will update the local state with response data
-// Only use to save for existing articles
-const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
-
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
 
 const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
+  if (isNewArticle.value) return;
+  debouncedSave(value);
 };
 
 const articleTitle = computed({
-  get: () => props.article.title,
+  get: () => localTitle.value,
   set: value => {
+    localTitle.value = value;
     handleSave({ title: value });
   },
 });
 
 const articleContent = computed({
-  get: () => props.article.content,
+  get: () => localContent.value,
   set: content => {
+    localContent.value = content;
     handleSave({ content });
   },
 });
@@ -98,6 +90,14 @@ const setCategoryId = categoryId => {
 const previewArticle = () => {
   emit('previewArticle');
 };
+
+const handleCreateArticle = event => {
+  if (!isNewArticle.value) return;
+  const title = event?.target?.value || '';
+  if (title.trim()) {
+    emit('createArticle', { title, content: localContent.value });
+  }
+};
 </script>
 
 <template>
@@ -122,10 +122,11 @@ const previewArticle = () => {
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
           autofocus
+          @blur="handleCreateArticle"
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="saveAndSync"
+          @save-article="values => emit('saveArticle', values)"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
@@ -160,8 +161,12 @@ const previewArticle = () => {
   }
 
   .editor-root .has-selection {
+    .ProseMirror-menubar:not(:has(*)) {
+      display: none !important;
+    }
+
     .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -169,15 +174,10 @@ const previewArticle = () => {
       position: absolute !important;
 
       .ProseMirror-menuitem {
-        @apply mr-0;
+        @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
 
         .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
+          @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
         }
       }
 

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

@@ -2,13 +2,10 @@
 import { reactive, 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';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -18,22 +15,18 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
-import wootConstants from 'dashboard/constants/globals';
 
+import Popover from 'dashboard/components-next/popover/Popover.vue';
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
 const props = defineProps({
-  alignPosition: {
-    type: String,
-    default: 'left',
-  },
   contactId: {
     type: String,
     default: null,
   },
-  isModal: {
-    type: Boolean,
-    default: false,
+  align: {
+    type: String,
+    default: 'end',
   },
 });
 
@@ -42,23 +35,16 @@ const emit = defineEmits(['close']);
 const searchContacts = createContactSearcher();
 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 popoverRef = ref(null);
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
 const isCreatingContact = ref(false);
 const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
-const showComposeNewConversation = ref(false);
 
 const formState = reactive({
   message: '',
@@ -95,14 +81,6 @@ const directUploadsEnabled = computed(
 
 const activeContact = computed(() => contactById.value(props.contactId));
 
-const composePopoverClass = computed(() => {
-  if (viewInModal.value) return '';
-
-  return props.alignPosition === 'right'
-    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
-    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
-});
-
 const onContactSearch = debounce(
   async query => {
     isSearching.value = true;
@@ -172,7 +150,7 @@ const clearSelectedContact = () => {
 };
 
 const closeCompose = () => {
-  showComposeNewConversation.value = false;
+  popoverRef.value?.hide();
   if (!props.contactId) {
     // If contactId is passed as prop
     // Then don't allow to remove the selected contact
@@ -180,7 +158,6 @@ const closeCompose = () => {
   }
   targetInbox.value = null;
   resetContacts();
-  emit('close');
 };
 
 const discardCompose = () => {
@@ -213,8 +190,15 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
   }
 };
 
-const toggle = () => {
-  showComposeNewConversation.value = !showComposeNewConversation.value;
+const onPopoverShow = () => {
+  // Flag to prevent triggering drag n drop,
+  // When compose modal is active
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+};
+
+const onPopoverHide = () => {
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+  emit('close');
 };
 
 watch(
@@ -242,64 +226,22 @@ watch(
   { immediate: true, deep: true }
 );
 
-const handleClickOutside = () => {
-  if (!showComposeNewConversation.value) return;
-
-  showComposeNewConversation.value = false;
-  emit('close');
-};
-
-const onModalBackdropClick = () => {
-  if (!viewInModal.value) return;
-  handleClickOutside();
-};
-
 onMounted(() => resetContacts());
-
-const keyboardEvents = {
-  Escape: {
-    action: () => {
-      if (showComposeNewConversation.value) {
-        showComposeNewConversation.value = false;
-        emit('close');
-        emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-      }
-    },
-  },
-};
-
-useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div
-    v-on-click-outside="[
-      handleClickOutside,
-      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
-      // This will prevent closing the compose conversation modal when the editor Create link popup is open
-      { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
-    ]"
-    class="relative"
-    :class="{
-      'z-50': showComposeNewConversation && !viewInModal,
-    }"
+  <Popover
+    ref="popoverRef"
+    :align="align"
+    @show="onPopoverShow"
+    @hide="onPopoverHide"
   >
-    <slot
-      name="trigger"
-      :is-open="showComposeNewConversation"
-      :toggle="toggle"
-    />
-    <div
-      v-if="showComposeNewConversation"
-      :class="{
-        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
-          viewInModal,
-      }"
-      @click.self="onModalBackdropClick"
-    >
+    <template #default="{ isOpen }">
+      <slot name="trigger" :is-open="isOpen" />
+    </template>
+    <template #content>
       <ComposeNewConversationForm
         :form-state="formState"
-        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"
@@ -321,6 +263,6 @@ useKeyboardEvents(keyboardEvents);
         @create-conversation="createConversation"
         @discard="discardCompose"
       />
-    </div>
-  </div>
+    </template>
+  </Popover>
 </template>

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

@@ -361,7 +361,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-full md:w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, useSlots } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
@@ -30,23 +30,40 @@ const modelValue = defineModel({
 });
 
 const selectedCount = computed(() => modelValue.value.size);
-const totalCount = computed(() => props.allItems.length);
-
+const visibleItemIds = computed(() => props.allItems.map(item => item.id));
+const visibleItemCount = computed(() => visibleItemIds.value.length);
+const selectedVisibleCount = computed(
+  () => visibleItemIds.value.filter(id => modelValue.value.has(id)).length
+);
 const hasSelected = computed(() => selectedCount.value > 0);
 const isIndeterminate = computed(
-  () => hasSelected.value && selectedCount.value < totalCount.value
+  () =>
+    selectedVisibleCount.value > 0 &&
+    selectedVisibleCount.value < visibleItemCount.value
 );
 const allSelected = computed(
-  () => totalCount.value > 0 && selectedCount.value === totalCount.value
+  () =>
+    visibleItemCount.value > 0 &&
+    selectedVisibleCount.value === visibleItemCount.value
 );
 
+const slots = useSlots();
+const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
+
 const bulkCheckboxState = computed({
   get: () => allSelected.value,
   set: shouldSelectAll => {
-    const newSelectedIds = shouldSelectAll
-      ? new Set(props.allItems.map(item => item.id))
-      : new Set();
-    modelValue.value = newSelectedIds;
+    if (!visibleItemCount.value) {
+      return;
+    }
+
+    const updatedSelection = new Set(modelValue.value);
+    if (shouldSelectAll) {
+      visibleItemIds.value.forEach(id => updatedSelection.add(id));
+    } else {
+      visibleItemIds.value.forEach(id => updatedSelection.delete(id));
+    }
+    modelValue.value = updatedSelection;
   },
 });
 </script>
@@ -63,7 +80,7 @@ const bulkCheckboxState = computed({
       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-3 min-w-0">
         <div class="flex items-center gap-1.5 min-w-0">
           <Checkbox
             v-model="bulkCheckboxState"
@@ -78,21 +95,23 @@ const bulkCheckboxState = computed({
         <span class="text-sm text-n-slate-10 truncate tabular-nums">
           {{ selectedCountLabel }}
         </span>
-        <div class="h-4 w-px bg-n-strong" />
-        <slot name="secondary-actions" />
       </div>
       <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>
+        <slot v-if="hasSecondaryActions" name="secondary-actions" />
+        <div v-if="hasSecondaryActions" 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>
     <div v-else class="flex items-center gap-3">

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

@@ -12,6 +12,7 @@ import {
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
   id: {
@@ -34,14 +35,34 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  showSelectionControl: {
+    type: Boolean,
+    default: false,
+  },
+  showMenu: {
+    type: Boolean,
+    default: true,
+  },
 });
 
-const emit = defineEmits(['action']);
+const emit = defineEmits(['action', 'select', 'hover']);
 const { checkPermissions } = usePolicy();
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
+const modelValue = computed({
+  get: () => props.isSelected,
+  set: () => emit('select', props.id),
+});
 
 const menuItems = computed(() => {
   const allOptions = [
@@ -79,12 +100,23 @@ const handleAction = ({ action, value }) => {
 </script>
 
 <template>
-  <CardLayout>
+  <CardLayout
+    :selectable="selectable"
+    class="relative"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div
+      v-show="showSelectionControl"
+      class="absolute top-7 ltr:left-3 rtl:right-3"
+    >
+      <Checkbox v-model="modelValue" />
+    </div>
     <div class="flex gap-1 justify-between w-full">
       <span class="text-base text-n-slate-12 line-clamp-1">
         {{ name }}
       </span>
-      <div class="flex gap-2 items-center">
+      <div v-if="showMenu" class="flex gap-2 items-center">
         <div
           v-on-clickaway="() => toggleDropdown(false)"
           class="flex relative items-center group"

app/javascript/dashboard/components-next/captain/pageComponents/BulkDeleteDialog.vue

@@ -21,16 +21,22 @@ const emit = defineEmits(['deleteSuccess']);
 const { t } = useI18n();
 const store = useStore();
 const bulkDeleteDialogRef = ref(null);
-const i18nKey = computed(() => props.type.toUpperCase());
+const i18nKey = computed(() => {
+  const i18nTypeMap = {
+    AssistantResponse: 'RESPONSES',
+    AssistantDocument: 'DOCUMENTS',
+  };
+  return i18nTypeMap[props.type];
+});
 
 const handleBulkDelete = async ids => {
   if (!ids) return;
 
   try {
-    await store.dispatch(
-      'captainBulkActions/handleBulkDelete',
-      Array.from(props.bulkIds)
-    );
+    await store.dispatch('captainBulkActions/handleBulkDelete', {
+      ids: Array.from(props.bulkIds),
+      type: props.type,
+    });
 
     emit('deleteSuccess');
     useAlert(t(`CAPTAIN.${i18nKey.value}.BULK_DELETE.SUCCESS_MESSAGE`));

app/javascript/dashboard/components-next/captain/pageComponents/Paywall.vue

@@ -6,6 +6,13 @@ import { useAccount } from 'dashboard/composables/useAccount';
 
 import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
 
+defineProps({
+  featurePrefix: {
+    type: String,
+    default: 'CAPTAIN',
+  },
+});
+
 const router = useRouter();
 const currentUser = useMapGetter('getCurrentUser');
 
@@ -31,7 +38,7 @@ const openBilling = () => {
   >
     <BasePaywallModal
       class="mx-auto"
-      feature-prefix="CAPTAIN"
+      :feature-prefix="featurePrefix"
       :i18n-key="i18nKey"
       :is-super-admin="isSuperAdmin"
       :is-on-chatwoot-cloud="isOnChatwootCloud"

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

@@ -101,12 +101,9 @@ const authTypeLabel = computed(() => {
         </Policy>
       </div>
     </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-3 flex-1">
-        <span
-          v-if="description"
-          class="text-sm truncate text-n-slate-11 flex-1"
-        >
+    <div class="flex items-center justify-between w-full gap-4 min-w-0">
+      <div class="flex items-center gap-3 flex-1 min-w-0">
+        <span v-if="description" class="text-sm truncate text-n-slate-11">
           {{ description }}
         </span>
         <span

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

@@ -1,9 +1,10 @@
 <script setup>
-import { reactive, computed, useTemplateRef, watch } from 'vue';
+import { reactive, computed, ref, useTemplateRef, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+import { required, maxLength } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
+import CustomToolsAPI from 'dashboard/api/captain/customTools';
 
 import Input from 'dashboard/components-next/input/Input.vue';
 import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
@@ -72,8 +73,12 @@ const DEFAULT_PARAM = {
   required: false,
 };
 
+// OpenAI enforces a 64-char limit on function names. The backend slug is
+// "custom_" (7 chars) + parameterized title, so cap the title conservatively.
+const MAX_TOOL_NAME_LENGTH = 55;
+
 const validationRules = {
-  title: { required },
+  title: { required, maxLength: maxLength(MAX_TOOL_NAME_LENGTH) },
   endpoint_url: { required },
   http_method: { required },
   auth_type: { required },
@@ -103,9 +108,15 @@ const isLoading = computed(() =>
 );
 
 const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`)
-    : '';
+  if (!v$.value[field].$error) return '';
+
+  const failedRule = v$.value[field].$errors[0]?.$validator;
+  if (failedRule === 'maxLength') {
+    return t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.MAX_LENGTH_ERROR`, {
+      max: MAX_TOOL_NAME_LENGTH,
+    });
+  }
+  return t(`CAPTAIN.CUSTOM_TOOLS.FORM.${errorKey}.ERROR`);
 };
 
 const formErrors = computed(() => ({
@@ -140,6 +151,30 @@ const handleSubmit = async () => {
 
   emit('submit', state);
 };
+
+const isTesting = ref(false);
+const testResult = ref(null);
+const isTestDisabled = computed(
+  () => state.endpoint_url.includes('{{') || !!state.request_template
+);
+
+const handleTest = async () => {
+  if (!state.endpoint_url) return;
+
+  isTesting.value = true;
+  testResult.value = null;
+  try {
+    const { data } = await CustomToolsAPI.test(state);
+    const isOk = data.status >= 200 && data.status < 300;
+    testResult.value = { success: isOk, status: data.status };
+  } catch (e) {
+    const message =
+      e.response?.data?.error || t('CAPTAIN.CUSTOM_TOOLS.TEST.ERROR');
+    testResult.value = { success: false, message };
+  } finally {
+    isTesting.value = false;
+  }
+};
 </script>
 
 <template>
@@ -248,6 +283,45 @@ const handleSubmit = async () => {
       class="[&_textarea]:font-mono"
     />
 
+    <div class="flex flex-col gap-2">
+      <Button
+        type="button"
+        variant="faded"
+        color="slate"
+        icon="i-lucide-play"
+        :label="t('CAPTAIN.CUSTOM_TOOLS.TEST.BUTTON')"
+        :is-loading="isTesting"
+        :disabled="isTesting || !state.endpoint_url || isTestDisabled"
+        @click="handleTest"
+      />
+      <p v-if="isTestDisabled" class="text-xs text-n-slate-11">
+        {{ t('CAPTAIN.CUSTOM_TOOLS.TEST.DISABLED_HINT') }}
+      </p>
+      <div
+        v-if="testResult"
+        class="flex items-center gap-2 px-3 py-2 text-xs rounded-lg"
+        :class="
+          testResult.success
+            ? 'bg-n-teal-2 text-n-teal-11'
+            : 'bg-n-ruby-2 text-n-ruby-11'
+        "
+      >
+        <span
+          :class="
+            testResult.success ? 'i-lucide-check-circle' : 'i-lucide-x-circle'
+          "
+          class="size-3.5 shrink-0"
+        />
+        {{
+          testResult.status
+            ? t('CAPTAIN.CUSTOM_TOOLS.TEST.SUCCESS', {
+                status: testResult.status,
+              })
+            : testResult.message
+        }}
+      </div>
+    </div>
+
     <div class="flex gap-3 justify-between items-center w-full">
       <Button
         type="button"

app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/CustomToolsPageEmptyState.vue

@@ -1,8 +1,11 @@
 <script setup>
+import { useAccount } from 'dashboard/composables/useAccount';
 import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import FeatureSpotlight from 'dashboard/components-next/feature-spotlight/FeatureSpotlight.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 
 const emit = defineEmits(['click']);
+const { isOnChatwootCloud } = useAccount();
 
 const onClick = () => {
   emit('click');
@@ -10,6 +13,15 @@ const onClick = () => {
 </script>
 
 <template>
+  <FeatureSpotlight
+    :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.FEATURE_SPOTLIGHT.TITLE')"
+    :note="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.FEATURE_SPOTLIGHT.NOTE')"
+    fallback-thumbnail="/assets/images/dashboard/captain/assistant-light.svg"
+    fallback-thumbnail-dark="/assets/images/dashboard/captain/assistant-dark.svg"
+    learn-more-url="https://chwt.app/hc/captain-tools"
+    class="mb-8"
+    :hide-actions="!isOnChatwootCloud"
+  />
   <EmptyStateLayout
     :title="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.TITLE')"
     :subtitle="$t('CAPTAIN.CUSTOM_TOOLS.EMPTY_STATE.SUBTITLE')"

app/javascript/dashboard/components-next/inline-input/InlineInput.vue

@@ -36,7 +36,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['enterPress', 'input', 'blur', 'focus']);
+const emit = defineEmits([
+  'enterPress',
+  'escapePress',
+  'input',
+  'blur',
+  'focus',
+]);
 
 const modelValue = defineModel({
   type: [String, Number],
@@ -49,6 +55,10 @@ const onEnterPress = () => {
   emit('enterPress');
 };
 
+const onEscapePress = () => {
+  emit('escapePress');
+};
+
 const handleInput = event => {
   emit('input', event.target.value);
   modelValue.value = event.target.value;
@@ -102,6 +112,7 @@ defineExpose({
       @focus="handleFocus"
       @blur="handleBlur"
       @keydown.enter.prevent="onEnterPress"
+      @keydown.escape.prevent="onEscapePress"
     />
   </div>
 </template>

app/javascript/dashboard/components-next/input/DurationInput.vue

@@ -32,6 +32,7 @@ const convertToMinutes = newValue => {
 
 const transformedValue = computed({
   get() {
+    if (duration.value == null) return null;
     if (unit.value === DURATION_UNITS.MINUTES) return duration.value;
     if (unit.value === DURATION_UNITS.HOURS)
       return Math.floor(duration.value / 60);
@@ -41,6 +42,10 @@ const transformedValue = computed({
     return 0;
   },
   set(newValue) {
+    if (newValue == null || newValue === '') {
+      duration.value = null;
+      return;
+    }
     let minuteValue = convertToMinutes(newValue);
 
     duration.value = Math.min(Math.max(minuteValue, props.min), props.max);
@@ -53,6 +58,7 @@ const transformedValue = computed({
 // this might create some confusion, especially when saving
 // this watcher fixes it by rounding the duration basically, to the nearest unit value
 watch(unit, () => {
+  if (duration.value == null) return;
   let adjustedValue = convertToMinutes(transformedValue.value);
   duration.value = Math.min(Math.max(adjustedValue, props.min), props.max);
 });

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

@@ -226,4 +226,10 @@ const handleSeeOriginal = () => {
     }
   }
 }
+
+// Email clients (Gmail, Outlook) hardcode dir="ltr" on wrapper elements.
+// In RTL apps this forces email content LTR regardless of actual text.
+[dir='rtl'] .letter-render [dir='ltr'] {
+  direction: inherit;
+}
 </style>

app/javascript/dashboard/components-next/popover/Popover.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+
+const props = defineProps({
+  align: {
+    type: String,
+    default: 'end',
+    validator: v => ['start', 'end'].includes(v),
+  },
+});
+
+const emit = defineEmits(['show', 'hide']);
+
+const isActive = ref(false);
+const triggerRef = ref(null);
+const popoverRef = ref(null);
+const mobileContentRef = ref(null);
+
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const isMobile = breakpoints.smaller('md');
+const showPopover = computed(() => isActive.value && !isMobile.value);
+
+const { fixedPosition, updatePosition } = useDropdownPosition(
+  triggerRef,
+  popoverRef,
+  showPopover,
+  { align: props.align }
+);
+
+const show = async () => {
+  isActive.value = true;
+  if (!isMobile.value) {
+    await nextTick();
+    updatePosition();
+  }
+  emit('show');
+};
+
+const hide = () => {
+  if (!isActive.value) return;
+  isActive.value = false;
+  emit('hide');
+};
+
+const toggle = async () => {
+  if (isActive.value) hide();
+  else await show();
+};
+
+// Recalculate position when switching from mobile to desktop while open
+watch(isMobile, async mobile => {
+  if (!isActive.value || mobile) return;
+  await nextTick();
+  updatePosition();
+});
+
+const handleClickOutside = event => {
+  if (triggerRef.value?.contains(event.target)) return;
+  hide();
+};
+
+// Selectors for teleported elements that should not trigger close
+const clickOutsideIgnore = [
+  'dialog.ProseMirror-prompt-backdrop',
+  '[data-popover-content]',
+];
+
+useKeyboardEvents({
+  Escape: {
+    action: () => isActive.value && hide(),
+    allowOnFocusedInput: true,
+  },
+});
+
+defineExpose({ show, hide, toggle });
+</script>
+
+<template>
+  <span ref="triggerRef" class="inline-flex" @click="toggle">
+    <slot :is-open="isActive" />
+  </span>
+
+  <TeleportWithDirection to="body">
+    <!-- Mobile: centered modal with backdrop -->
+    <div
+      v-if="isActive && isMobile"
+      data-popover-backdrop
+      class="fixed inset-0 z-[9999] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center bg-n-alpha-black1"
+    >
+      <div
+        ref="mobileContentRef"
+        v-on-click-outside="[
+          handleClickOutside,
+          { ignore: clickOutsideIgnore },
+        ]"
+        data-popover-content
+        class="relative w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 overflow-y-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+      >
+        <slot name="content" :hide="hide" />
+      </div>
+    </div>
+
+    <!-- Desktop: fixed popover -->
+    <div
+      v-else-if="showPopover"
+      ref="popoverRef"
+      v-on-click-outside="[handleClickOutside, { ignore: clickOutsideIgnore }]"
+      data-popover-content
+      :class="fixedPosition.class"
+      :style="fixedPosition.style"
+      class="bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl overflow-y-auto max-h-[calc(100vh-2rem)]"
+    >
+      <slot name="content" :hide="hide" />
+    </div>
+  </TeleportWithDirection>
+</template>

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

@@ -10,8 +10,6 @@ import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
-import { emitter } from 'shared/helpers/mitt';
-import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -184,15 +182,6 @@ const closeMobileSidebar = () => {
   emit('closeMobileSidebar');
 };
 
-const onComposeOpen = toggleFn => {
-  toggleFn();
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
-};
-
-const onComposeClose = () => {
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-};
-
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -250,6 +239,12 @@ const menuItems = computed(() => {
           activeOn: ['conversation_through_mentions'],
           to: accountScopedRoute('conversation_mentions'),
         },
+        {
+          name: 'Participating',
+          label: t('SIDEBAR.PARTICIPATING_CONVERSATIONS'),
+          activeOn: ['conversation_through_participating'],
+          to: accountScopedRoute('conversation_participating'),
+        },
         {
           name: 'Unattended',
           activeOn: ['conversation_through_unattended'],
@@ -728,7 +723,13 @@ const menuItems = computed(() => {
   <aside
     v-on-click-outside="[
       closeMobileSidebar,
-      { ignore: ['#mobile-sidebar-launcher'] },
+      {
+        ignore: [
+          '#mobile-sidebar-launcher',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
     ]"
     class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
@@ -796,8 +797,8 @@ const menuItems = computed(() => {
         >
           <span class="i-lucide-search size-4 text-n-slate-11" />
         </RouterLink>
-        <ComposeConversation align-position="right" @close="onComposeClose">
-          <template #trigger="{ toggle, isOpen }">
+        <ComposeConversation align="start">
+          <template #trigger="{ isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
@@ -809,7 +810,6 @@ const menuItems = computed(() => {
                   : '!h-7 !outline-n-weak !text-n-slate-11',
                 { '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen },
               ]"
-              @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>

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

@@ -158,9 +158,11 @@ const activeChild = computed(() => {
     return rankedPage ?? activeOnPages[0];
   }
 
-  return navigableChildren.value.find(
-    child => child.to && route.path.startsWith(resolvePath(child.to))
-  );
+  return navigableChildren.value.find(child => {
+    if (!child.to) return false;
+    const childPath = resolvePath(child.to);
+    return route.path === childPath || route.path.startsWith(`${childPath}/`);
+  });
 });
 
 const hasActiveChild = computed(() => {

app/javascript/dashboard/components/ChatList.vue

@@ -56,6 +56,7 @@ import { generateValuesForEditCustomViews } from 'dashboard/helper/customViewsHe
 import { conversationListPageURL } from '../helper/URLHelper';
 import {
   isOnMentionsView,
+  isOnParticipatingView,
   isOnUnattendedView,
 } from '../store/modules/conversations/helpers/actionHelpers';
 import {
@@ -113,6 +114,7 @@ const chatLists = useMapGetter('getFilteredConversations');
 const mineChatsList = useMapGetter('getMineChats');
 const allChatList = useMapGetter('getAllStatusChats');
 const unAssignedChatsList = useMapGetter('getUnAssignedChats');
+const participatingChatsList = useMapGetter('getParticipatingChats');
 const chatListLoading = useMapGetter('getChatListLoadingStatus');
 const activeInbox = useMapGetter('getSelectedInbox');
 const conversationStats = useMapGetter('conversationStats/getStats');
@@ -296,13 +298,15 @@ const pageTitle = computed(() => {
   if (props.label) {
     return `#${props.label}`;
   }
-  if (props.conversationType === 'mention') {
+  if (props.conversationType === wootConstants.CONVERSATION_TYPE.MENTION) {
     return t('CHAT_LIST.MENTION_HEADING');
   }
-  if (props.conversationType === 'participating') {
+  if (
+    props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
+  ) {
     return t('CONVERSATION_PARTICIPANTS.SIDEBAR_MENU_TITLE');
   }
-  if (props.conversationType === 'unattended') {
+  if (props.conversationType === wootConstants.CONVERSATION_TYPE.UNATTENDED) {
     return t('CHAT_LIST.UNATTENDED_HEADING');
   }
   if (hasActiveFolders.value) {
@@ -311,12 +315,30 @@ const pageTitle = computed(() => {
   return t('CHAT_LIST.TAB_HEADING');
 });
 
+function filterByAssigneeTab(conversations) {
+  if (activeAssigneeTab.value === wootConstants.ASSIGNEE_TYPE.ME) {
+    return conversations.filter(
+      c => c.meta?.assignee?.id === currentUser.value?.id
+    );
+  }
+  if (activeAssigneeTab.value === wootConstants.ASSIGNEE_TYPE.UNASSIGNED) {
+    return conversations.filter(c => !c.meta?.assignee);
+  }
+  return [...conversations];
+}
+
 const conversationList = computed(() => {
   let localConversationList = [];
 
   if (!hasAppliedFiltersOrActiveFolders.value) {
     const filters = conversationFilters.value;
-    if (activeAssigneeTab.value === 'me') {
+    if (
+      props.conversationType === wootConstants.CONVERSATION_TYPE.PARTICIPATING
+    ) {
+      localConversationList = filterByAssigneeTab(
+        participatingChatsList.value(filters)
+      );
+    } else if (activeAssigneeTab.value === 'me') {
       localConversationList = [...mineChatsList.value(filters)];
     } else if (activeAssigneeTab.value === 'unassigned') {
       localConversationList = [...unAssignedChatsList.value(filters)];
@@ -637,9 +659,11 @@ function redirectToConversationList() {
 
   let conversationType = '';
   if (isOnMentionsView({ route: { name } })) {
-    conversationType = 'mention';
+    conversationType = wootConstants.CONVERSATION_TYPE.MENTION;
+  } else if (isOnParticipatingView({ route: { name } })) {
+    conversationType = wootConstants.CONVERSATION_TYPE.PARTICIPATING;
   } else if (isOnUnattendedView({ route: { name } })) {
-    conversationType = 'unattended';
+    conversationType = wootConstants.CONVERSATION_TYPE.UNATTENDED;
   }
   router.push(
     conversationListPageURL({

app/javascript/dashboard/components/app/LowBackupCodesBanner.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed, onUnmounted, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { parseBoolean } from '@chatwoot/utils';
+import { useMapGetter } from 'dashboard/composables/store';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+import mfaAPI from 'dashboard/api/mfa';
+import Banner from 'dashboard/components/ui/Banner.vue';
+
+const LOW_BACKUP_CODES_THRESHOLD = 3;
+
+const { t } = useI18n();
+const router = useRouter();
+
+const mfaEnabled = ref(false);
+const remainingBackupCodes = ref(null);
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+
+const shouldShowBanner = computed(() => {
+  if (!mfaEnabled.value) return false;
+  if (remainingBackupCodes.value === null) return false;
+  return remainingBackupCodes.value <= LOW_BACKUP_CODES_THRESHOLD;
+});
+
+const bannerColorScheme = computed(() =>
+  remainingBackupCodes.value === 0 ? 'alert' : 'warning'
+);
+
+const bannerMessage = computed(() => {
+  if (remainingBackupCodes.value === 0) {
+    return t('MFA_SETTINGS.LOW_BACKUP_CODES.NONE_LEFT');
+  }
+  return t('MFA_SETTINGS.LOW_BACKUP_CODES.MESSAGE', remainingBackupCodes.value);
+});
+
+const fetchMfaStatus = async () => {
+  if (!parseBoolean(window.chatwootConfig?.isMfaEnabled)) return;
+
+  try {
+    const { data } = await mfaAPI.get();
+    mfaEnabled.value = data.enabled;
+    remainingBackupCodes.value = data.remaining_backup_codes ?? null;
+  } catch {
+    // ignore; banner stays hidden
+  }
+};
+
+const goToMfaSettings = () => {
+  router.push({
+    name: 'profile_settings_mfa',
+    params: { accountId: currentAccountId.value },
+  });
+};
+
+onMounted(() => {
+  fetchMfaStatus();
+  emitter.on(BUS_EVENTS.MFA_STATE_CHANGED, fetchMfaStatus);
+});
+
+onUnmounted(() => {
+  emitter.off(BUS_EVENTS.MFA_STATE_CHANGED, fetchMfaStatus);
+});
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <Banner
+    v-if="shouldShowBanner"
+    :color-scheme="bannerColorScheme"
+    :banner-message="bannerMessage"
+    :action-button-label="$t('MFA_SETTINGS.LOW_BACKUP_CODES.ACTION')"
+    action-button-icon="i-lucide-key"
+    has-action-button
+    @primary-action="goToMfaSettings"
+  />
+</template>

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

@@ -27,10 +27,6 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  isPopout: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -208,10 +204,7 @@ onMounted(() => {
 
 <template>
   <div class="space-y-2 mb-4">
-    <div
-      class="overflow-y-auto"
-      :class="{ 'max-h-96': isPopout, 'max-h-56': !isPopout }"
-    >
+    <div class="overflow-y-auto max-h-56">
       <p
         v-dompurify-html="formatMessage(generatedContent, false)"
         class="text-n-iris-12 text-sm prose-sm font-normal !mb-4"

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

@@ -313,7 +313,12 @@ const plugins = computed(() => {
 const sendWithSignature = computed(() => {
   // this is considered the source of truth, we watch this property
   // on change, we toggle the signature in the editor
-  if (props.allowSignature && !props.isPrivate && props.channelType) {
+  if (
+    props.allowSignature &&
+    !props.isPrivate &&
+    props.channelType &&
+    !props.disabled
+  ) {
     return fetchSignatureFlagFromUISettings(props.channelType);
   }
 
@@ -436,6 +441,7 @@ function reloadState(content = props.modelValue) {
 }
 
 function addSignature() {
+  if (props.disabled) return;
   let content = props.modelValue;
   // see if the content is empty, if it is before appending the signature
   // we need to add a paragraph node and move the cursor at the start of the editor
@@ -454,6 +460,7 @@ function addSignature() {
 }
 
 function removeSignature() {
+  if (props.disabled) return;
   if (!props.signature) return;
   let content = props.modelValue;
   content = removeSignatureHelper(
@@ -806,7 +813,7 @@ watch(
 
 watch(sendWithSignature, newValue => {
   // see if the allowSignature flag is true
-  if (props.allowSignature) {
+  if (props.allowSignature && !props.disabled) {
     toggleSignatureInEditor(newValue);
   }
 });
@@ -977,7 +984,32 @@ useEmitter(BUS_EVENTS.INSERT_INTO_RICH_EDITOR, insertContentIntoEditor);
 }
 
 .ProseMirror-woot-style {
-  @apply overflow-auto min-h-[5rem] max-h-[7.5rem];
+  @apply overflow-auto;
+}
+
+.ProseMirror-woot-style:not(
+    :where(.resizable-editor-wrapper .ProseMirror-woot-style)
+  ) {
+  @apply min-h-[5rem] max-h-[7.5rem];
+}
+
+// Resizable editor wrapper styles
+.resizable-editor-wrapper {
+  .ProseMirror-woot-style {
+    min-height: clamp(
+      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
+      var(--editor-height, var(--editor-min-height, 5rem)),
+      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
+    );
+    max-height: clamp(
+      var(--editor-min-allowed, var(--editor-min-height, 5rem)),
+      var(--editor-height, var(--editor-min-height, 5rem)),
+      var(--editor-max-allowed, var(--editor-max-height, 7.5rem))
+    );
+    transition:
+      min-height var(--editor-height-transition, 180ms ease),
+      max-height var(--editor-height-transition, 180ms ease);
+  }
 }
 
 .ProseMirror-prompt-backdrop::backdrop {

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

@@ -8,13 +8,22 @@ import {
   EditorState,
   Selection,
 } from '@chatwoot/prosemirror-schema';
+import {
+  suggestionsPlugin,
+  triggerCharacters,
+} from '@chatwoot/prosemirror-schema/src/mentions/plugin';
 import imagePastePlugin from '@chatwoot/prosemirror-schema/src/plugins/image';
+import { toggleMark } from 'prosemirror-commands';
+import { wrapInList } from 'prosemirror-schema-list';
+import { toggleBlockType } from '@chatwoot/prosemirror-schema/src/menu/common';
 import { checkFileSizeLimit } from 'shared/helpers/FileHelper';
 import { useAlert } from 'dashboard/composables';
 import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
+import SlashCommandMenu from './SlashCommandMenu.vue';
 
 const MAXIMUM_FILE_UPLOAD_SIZE = 4; // in MB
+const SLASH_MENU_OFFSET = 4;
 const createState = (
   content,
   placeholder,
@@ -40,6 +49,7 @@ let editorView = null;
 let state;
 
 export default {
+  components: { SlashCommandMenu },
   mixins: [keyboardEventListenerMixins],
   props: {
     modelValue: { type: String, default: '' },
@@ -62,8 +72,15 @@ export default {
   },
   data() {
     return {
-      plugins: [imagePastePlugin(this.handleImageUpload)],
+      plugins: [
+        imagePastePlugin(this.handleImageUpload),
+        this.createSlashPlugin(),
+      ],
       isTextSelected: false, // Tracks text selection and prevents unnecessary re-renders on mouse selection
+      showSlashMenu: false,
+      slashSearchTerm: '',
+      slashRange: null,
+      slashMenuPosition: null,
     };
   },
   watch: {
@@ -79,7 +96,7 @@ export default {
 
   created() {
     state = createState(
-      this.modelValue,
+      this.modelValue || '',
       this.placeholder,
       this.plugins,
       { onImageUpload: this.openFileBrowser },
@@ -95,6 +112,126 @@ export default {
     }
   },
   methods: {
+    createSlashPlugin() {
+      return suggestionsPlugin({
+        matcher: triggerCharacters('/', 0),
+        suggestionClass: '',
+        onEnter: args => {
+          this.showSlashMenu = true;
+          this.slashRange = args.range;
+          this.slashSearchTerm = args.text || '';
+          this.updateSlashMenuPosition(args.range.from);
+          return false;
+        },
+        onChange: args => {
+          this.slashRange = args.range;
+          this.slashSearchTerm = args.text;
+          return false;
+        },
+        onExit: () => {
+          this.slashSearchTerm = '';
+          this.showSlashMenu = false;
+          this.slashMenuPosition = null;
+          return false;
+        },
+        onKeyDown: ({ event }) => {
+          return (
+            event.keyCode === 13 &&
+            this.showSlashMenu &&
+            this.$refs.slashMenu?.hasItems
+          );
+        },
+      });
+    },
+    updateSlashMenuPosition(pos) {
+      if (!editorView) return;
+      const coords = editorView.coordsAtPos(pos);
+      const editorRect = this.$refs.editor.getBoundingClientRect();
+      const isRtl = getComputedStyle(this.$refs.editor).direction === 'rtl';
+      this.slashMenuPosition = {
+        top: coords.bottom - editorRect.top + SLASH_MENU_OFFSET,
+        ...(isRtl
+          ? { right: editorRect.right - coords.right }
+          : { left: coords.left - editorRect.left }),
+      };
+    },
+    removeSlashTriggerText() {
+      if (!editorView || !this.slashRange) return;
+      const { from, to } = this.slashRange;
+      editorView.dispatch(editorView.state.tr.delete(from, to));
+      state = editorView.state;
+    },
+    executeSlashCommand(actionKey) {
+      if (!editorView) return;
+
+      this.removeSlashTriggerText();
+
+      const { schema } = editorView.state;
+      const commandMap = {
+        strong: () =>
+          toggleMark(schema.marks.strong)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        em: () =>
+          toggleMark(schema.marks.em)(editorView.state, editorView.dispatch),
+        strike: () =>
+          toggleMark(schema.marks.strike)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        code: () =>
+          toggleMark(schema.marks.code)(editorView.state, editorView.dispatch),
+        h1: () =>
+          toggleBlockType(schema.nodes.heading, { level: 1 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        h2: () =>
+          toggleBlockType(schema.nodes.heading, { level: 2 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        h3: () =>
+          toggleBlockType(schema.nodes.heading, { level: 3 })(
+            editorView.state,
+            editorView.dispatch
+          ),
+        bulletList: () =>
+          wrapInList(schema.nodes.bullet_list)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        orderedList: () =>
+          wrapInList(schema.nodes.ordered_list)(
+            editorView.state,
+            editorView.dispatch
+          ),
+        insertTable: () => {
+          const { table, table_row, table_header, table_cell, paragraph } =
+            schema.nodes;
+          const headerCells = [0, 1, 2].map(() =>
+            table_header.createAndFill(null, paragraph.create())
+          );
+          const dataCells = [0, 1, 2].map(() =>
+            table_cell.createAndFill(null, paragraph.create())
+          );
+          const headerRow = table_row.create(null, headerCells);
+          const dataRow = table_row.create(null, dataCells);
+          const tableNode = table.create(null, [headerRow, dataRow]);
+          const tr = editorView.state.tr.replaceSelectionWith(tableNode);
+          editorView.dispatch(tr.scrollIntoView());
+        },
+      };
+
+      const command = commandMap[actionKey];
+      if (command) {
+        command();
+        state = editorView.state;
+        this.emitOnChange();
+        editorView.focus();
+      }
+    },
     contentFromEditor() {
       if (editorView) {
         return ArticleMarkdownSerializer.serialize(editorView.state.doc);
@@ -170,7 +307,7 @@ export default {
     },
     reloadState() {
       state = createState(
-        this.modelValue,
+        this.modelValue || '',
         this.placeholder,
         this.plugins,
         { onImageUpload: this.openFileBrowser },
@@ -262,7 +399,8 @@ export default {
 
       // Get the editor's width
       const editorWidth = editor.offsetWidth;
-      const menubarWidth = 480; // Menubar width (adjust as needed (px))
+      const menubar = editor.querySelector('.ProseMirror-menubar');
+      const menubarWidth = menubar ? menubar.scrollWidth : 480;
 
       // Get the end position of the selection
       const { bottom: endBottom, right: endRight } = editorView.coordsAtPos(to);
@@ -290,7 +428,15 @@ export default {
 
 <template>
   <div>
-    <div class="editor-root editor--article">
+    <div class="editor-root editor--article relative">
+      <SlashCommandMenu
+        v-if="showSlashMenu"
+        ref="slashMenu"
+        :search-key="slashSearchTerm"
+        :enabled-menu-options="enabledMenuOptions"
+        :position="slashMenuPosition"
+        @select-action="executeSlashCommand"
+      />
       <input
         ref="imageUploadInput"
         type="file"

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

@@ -128,7 +128,6 @@ export default {
     },
   },
   emits: [
-    'replaceText',
     'toggleInsertArticle',
     'selectWhatsappTemplate',
     'selectContentTemplate',
@@ -277,9 +276,6 @@ export default {
     toggleMessageSignature() {
       this.setSignatureFlagForInbox(this.channelType, !this.sendWithSignature);
     },
-    replaceText(text) {
-      this.$emit('replaceText', text);
-    },
     toggleInsertArticle() {
       this.$emit('toggleInsertArticle');
     },

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

@@ -54,7 +54,7 @@ export default {
       default: undefined,
     },
   },
-  emits: ['setReplyMode', 'togglePopout', 'executeCopilotAction'],
+  emits: ['setReplyMode', 'toggleEditorSize', 'executeCopilotAction'],
   setup(props, { emit }) {
     const setReplyMode = mode => {
       emit('setReplyMode', mode);
@@ -189,7 +189,7 @@ export default {
         class="text-n-slate-11"
         sm
         icon="i-lucide-maximize-2"
-        @click="$emit('togglePopout')"
+        @click="$emit('toggleEditorSize')"
       />
     </div>
   </div>

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

@@ -0,0 +1,180 @@
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useKeyboardNavigableList } from 'dashboard/composables/useKeyboardNavigableList';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  searchKey: {
+    type: String,
+    default: '',
+  },
+  enabledMenuOptions: {
+    type: Array,
+    default: () => [],
+  },
+  position: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(['selectAction']);
+
+const { t } = useI18n();
+
+const EDITOR_ACTIONS = [
+  {
+    value: 'h1',
+    labelKey: 'SLASH_COMMANDS.HEADING_1',
+    icon: 'i-lucide-heading-1',
+    menuKey: 'h1',
+  },
+  {
+    value: 'h2',
+    labelKey: 'SLASH_COMMANDS.HEADING_2',
+    icon: 'i-lucide-heading-2',
+    menuKey: 'h2',
+  },
+  {
+    value: 'h3',
+    labelKey: 'SLASH_COMMANDS.HEADING_3',
+    icon: 'i-lucide-heading-3',
+    menuKey: 'h3',
+  },
+  {
+    value: 'strong',
+    labelKey: 'SLASH_COMMANDS.BOLD',
+    icon: 'i-lucide-bold',
+    menuKey: 'strong',
+  },
+  {
+    value: 'em',
+    labelKey: 'SLASH_COMMANDS.ITALIC',
+    icon: 'i-lucide-italic',
+    menuKey: 'em',
+  },
+  {
+    value: 'insertTable',
+    labelKey: 'SLASH_COMMANDS.TABLE',
+    icon: 'i-lucide-table',
+    menuKey: 'insertTable',
+  },
+  {
+    value: 'strike',
+    labelKey: 'SLASH_COMMANDS.STRIKETHROUGH',
+    icon: 'i-lucide-strikethrough',
+    menuKey: 'strike',
+  },
+  {
+    value: 'code',
+    labelKey: 'SLASH_COMMANDS.CODE',
+    icon: 'i-lucide-code',
+    menuKey: 'code',
+  },
+  {
+    value: 'bulletList',
+    labelKey: 'SLASH_COMMANDS.BULLET_LIST',
+    icon: 'i-lucide-list',
+    menuKey: 'bulletList',
+  },
+  {
+    value: 'orderedList',
+    labelKey: 'SLASH_COMMANDS.ORDERED_LIST',
+    icon: 'i-lucide-list-ordered',
+    menuKey: 'orderedList',
+  },
+];
+
+const listContainerRef = ref(null);
+const selectedIndex = ref(0);
+
+const items = computed(() => {
+  const search = props.searchKey.toLowerCase();
+  return EDITOR_ACTIONS.filter(action => {
+    if (!props.enabledMenuOptions.includes(action.menuKey)) return false;
+    if (!search) return true;
+    return t(action.labelKey).toLowerCase().includes(search);
+  });
+});
+
+const hasItems = computed(() => items.value.length > 0);
+
+const menuStyle = computed(() => {
+  if (!props.position) return {};
+  const style = { top: `${props.position.top}px` };
+  if (props.position.right != null) {
+    style.right = `${props.position.right}px`;
+  } else {
+    style.left = `${props.position.left}px`;
+  }
+  return style;
+});
+
+const adjustScroll = () => {
+  nextTick(() => {
+    const container = listContainerRef.value;
+    if (!container) return;
+    const el = container.querySelector(`#slash-item-${selectedIndex.value}`);
+    if (el) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'auto' });
+    }
+  });
+};
+
+const onSelect = () => {
+  const item = items.value[selectedIndex.value];
+  if (item) emit('selectAction', item.value);
+};
+
+useKeyboardNavigableList({
+  items,
+  onSelect,
+  adjustScroll,
+  selectedIndex,
+});
+
+// Reset selection when filtered items change
+watch(items, () => {
+  selectedIndex.value = 0;
+});
+
+const onHover = index => {
+  selectedIndex.value = index;
+};
+
+const onItemClick = index => {
+  selectedIndex.value = index;
+  onSelect();
+};
+
+defineExpose({ hasItems });
+</script>
+
+<!-- eslint-disable-next-line vue/no-root-v-if -->
+<template>
+  <div
+    v-if="hasItems"
+    ref="listContainerRef"
+    class="bg-n-alpha-3 backdrop-blur-[100px] outline outline-1 outline-n-container absolute rounded-xl z-50 flex flex-col min-w-[10rem] shadow-lg p-2 overflow-auto max-h-[15rem]"
+    :style="menuStyle"
+  >
+    <button
+      v-for="(item, index) in items"
+      :id="`slash-item-${index}`"
+      :key="item.value"
+      type="button"
+      class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 border-0 rounded-lg text-n-slate-12 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2"
+      :class="{
+        'bg-n-alpha-1 dark:bg-n-alpha-2': index === selectedIndex,
+      }"
+      @mouseover="onHover(index)"
+      @click="onItemClick(index)"
+    >
+      <Icon :icon="item.icon" class="flex-shrink-0 size-3.5" />
+      <span class="min-w-0 text-sm truncate">
+        {{ t(item.labelKey) }}
+      </span>
+    </button>
+  </div>
+</template>

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

@@ -10,7 +10,7 @@ import InboxName from '../InboxName.vue';
 import ConversationContextMenu from './contextMenu/Index.vue';
 import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
 import CardLabels from './conversationCardComponents/CardLabels.vue';
-import PriorityMark from './PriorityMark.vue';
+import CardPriorityIcon from 'dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import ContextMenu from 'dashboard/components/ui/ContextMenu.vue';
 import VoiceCallStatus from './VoiceCallStatus.vue';
@@ -305,7 +305,7 @@ const deleteConversation = () => {
       >
         <InboxName v-if="showInboxName" :inbox="inbox" class="flex-1 min-w-0" />
         <div
-          class="flex items-center gap-2 flex-shrink-0"
+          class="flex items-baseline gap-2 flex-shrink-0"
           :class="{
             'flex-1 justify-between': !showInboxName,
           }"
@@ -317,7 +317,10 @@ const deleteConversation = () => {
             <fluent-icon icon="person" size="12" class="text-n-slate-11" />
             {{ assignee.name }}
           </span>
-          <PriorityMark :priority="chat.priority" class="flex-shrink-0" />
+          <CardPriorityIcon
+            :priority="chat.priority"
+            class="flex-shrink-0 !size-3.5"
+          />
         </div>
       </div>
       <h4

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

@@ -45,6 +45,7 @@ const backButtonUrl = computed(() => {
 
   const conversationTypeMap = {
     conversation_through_mentions: 'mention',
+    conversation_through_participating: 'participating',
     conversation_through_unattended: 'unattended',
   };
   return conversationListPageURL({

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

@@ -41,7 +41,16 @@ const closeContactPanel = () => {
 
 <template>
   <div
-    v-on-click-outside="() => closeContactPanel()"
+    v-on-click-outside="[
+      () => closeContactPanel(),
+      {
+        ignore: [
+          'dialog.ProseMirror-prompt-backdrop',
+          '[data-popover-content]',
+          '[data-popover-backdrop]',
+        ],
+      },
+    ]"
     class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 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="[
       {

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

@@ -16,10 +16,6 @@ defineProps({
     type: String,
     default: '',
   },
-  isPopout: {
-    type: Boolean,
-    default: false,
-  },
 });
 
 const emit = defineEmits([
@@ -69,7 +65,6 @@ const onSend = () => {
       :generated-content="generatedContent"
       :min-height="4"
       :enabled-menu-options="[]"
-      :is-popout="isPopout"
       @focus="onFocus"
       @blur="onBlur"
       @clear-selection="clearEditorSelection"

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

@@ -1,7 +1,7 @@
 <script>
-import { ref, provide } from 'vue';
+import { ref, provide, useTemplateRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
 // composable
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { useLabelSuggestions } from 'dashboard/composables/useLabelSuggestions';
 import { useSnakeCase } from 'dashboard/composables/useTransformKeys';
 
@@ -11,6 +11,7 @@ import MessageList from 'next/message/MessageList.vue';
 import ConversationLabelSuggestion from './conversation/LabelSuggestion.vue';
 import Banner from 'dashboard/components/ui/Banner.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ResizableEditorWrapper from './ResizableEditorWrapper.vue';
 
 // stores and apis
 import { mapGetters } from 'vuex';
@@ -43,21 +44,16 @@ export default {
     Banner,
     ConversationLabelSuggestion,
     Spinner,
+    ResizableEditorWrapper,
   },
   mixins: [inboxMixin],
   setup() {
-    const isPopOutReplyBox = ref(false);
     const conversationPanelRef = ref(null);
-
-    const keyboardEvents = {
-      Escape: {
-        action: () => {
-          isPopOutReplyBox.value = false;
-        },
-      },
-    };
-
-    useKeyboardEvents(keyboardEvents);
+    const resizableEditorWrapperRef = ref(null);
+    const messagesViewRef = useTemplateRef('messagesViewRef');
+    const topBannerRef = useTemplateRef('topBannerRef');
+    const { height: containerHeight } = useElementSize(messagesViewRef);
+    const { height: topBannerHeight } = useElementSize(topBannerRef);
 
     const {
       captainTasksEnabled,
@@ -68,11 +64,15 @@ export default {
     provide('contextMenuElementTarget', conversationPanelRef);
 
     return {
-      isPopOutReplyBox,
       captainTasksEnabled,
       getLabelSuggestions,
       isLabelSuggestionFeatureEnabled,
       conversationPanelRef,
+      resizableEditorWrapperRef,
+      messagesViewRef,
+      topBannerRef,
+      containerHeight,
+      topBannerHeight,
     };
   },
   data() {
@@ -254,6 +254,7 @@ export default {
       this.fetchAllAttachmentsFromCurrentChat();
       this.fetchSuggestions();
       this.messageSentSinceOpened = false;
+      this.resetReplyEditorHeight();
     },
   },
 
@@ -437,26 +438,37 @@ export default {
       const payload = useSnakeCase(message);
       await this.$store.dispatch('sendMessageWithData', payload);
     },
+    toggleReplyEditorSize() {
+      this.resizableEditorWrapperRef?.toggleEditorExpand?.();
+    },
+    resetReplyEditorHeight() {
+      this.resizableEditorWrapperRef?.resetEditorHeight?.();
+    },
   },
 };
 </script>
 
 <template>
-  <div class="flex flex-col justify-between flex-grow h-full min-w-0 m-0">
-    <Banner
-      v-if="!currentChat.can_reply"
-      color-scheme="alert"
-      class="mx-2 mt-2 overflow-hidden rounded-lg"
-      :banner-message="replyWindowBannerMessage"
-      :href-link="replyWindowLink"
-      :href-link-text="replyWindowLinkText"
-    />
-    <Banner
-      v-else-if="hasDuplicateInstagramInbox"
-      color-scheme="alert"
-      class="mx-2 mt-2 overflow-hidden rounded-lg"
-      :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
-    />
+  <div
+    ref="messagesViewRef"
+    class="flex flex-col justify-between flex-grow h-full min-w-0 m-0"
+  >
+    <div ref="topBannerRef">
+      <Banner
+        v-if="!currentChat.can_reply"
+        color-scheme="alert"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="replyWindowBannerMessage"
+        :href-link="replyWindowLink"
+        :href-link-text="replyWindowLinkText"
+      />
+      <Banner
+        v-else-if="hasDuplicateInstagramInbox"
+        color-scheme="alert"
+        class="mx-2 mt-2 overflow-hidden rounded-lg"
+        :banner-message="$t('CONVERSATION.OLD_INSTAGRAM_INBOX_REPLY_BANNER')"
+      />
+    </div>
     <MessageList
       ref="conversationPanelRef"
       class="conversation-panel flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4"
@@ -498,13 +510,7 @@ export default {
         />
       </template>
     </MessageList>
-    <div
-      class="flex relative flex-col"
-      :class="{
-        'modal-mask': isPopOutReplyBox,
-        'bg-n-surface-1': !isPopOutReplyBox,
-      }"
-    >
+    <div class="flex relative flex-col bg-n-surface-1">
       <div
         v-if="isAnyoneTyping"
         class="absolute flex items-center w-full h-0 -top-7"
@@ -520,42 +526,12 @@ export default {
           />
         </div>
       </div>
-      <ReplyBox
-        :pop-out-reply-box="isPopOutReplyBox"
-        @update:pop-out-reply-box="isPopOutReplyBox = $event"
-      />
+      <ResizableEditorWrapper
+        ref="resizableEditorWrapperRef"
+        :container-height="Math.max(0, containerHeight - topBannerHeight)"
+      >
+        <ReplyBox @toggle-editor-size="toggleReplyEditorSize" />
+      </ResizableEditorWrapper>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.modal-mask {
-  @apply fixed;
-
-  &::v-deep {
-    .ProseMirror-woot-style {
-      @apply max-h-[25rem];
-    }
-
-    .reply-box {
-      @apply border border-n-weak max-w-[75rem] w-[70%];
-
-      &.is-private {
-        @apply dark:border-n-amber-3/30 border-n-amber-12/5;
-      }
-    }
-
-    .reply-box .reply-box__top {
-      @apply relative min-h-[27.5rem];
-    }
-
-    .reply-box__top .input {
-      @apply min-h-[27.5rem];
-    }
-
-    .emoji-dialog {
-      @apply absolute ltr:left-auto rtl:right-auto bottom-1;
-    }
-  }
-}
-</style>

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

@@ -1,53 +0,0 @@
-<script>
-import { CONVERSATION_PRIORITY } from '../../../../shared/constants/messages';
-
-export default {
-  name: 'PriorityMark',
-  props: {
-    priority: {
-      type: String,
-      default: '',
-      validate: value =>
-        [...Object.values(CONVERSATION_PRIORITY), ''].includes(value),
-    },
-  },
-  data() {
-    return {
-      CONVERSATION_PRIORITY,
-    };
-  },
-  computed: {
-    tooltipText() {
-      return this.$t(
-        `CONVERSATION.PRIORITY.OPTIONS.${this.priority.toUpperCase()}`
-      );
-    },
-    isUrgent() {
-      return this.priority === CONVERSATION_PRIORITY.URGENT;
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable-next-line vue/no-root-v-if -->
-<template>
-  <span
-    v-if="priority"
-    v-tooltip="{
-      content: tooltipText,
-      delay: { show: 1500, hide: 0 },
-    }"
-    class="shrink-0 rounded-sm inline-flex items-center justify-center w-3.5 h-3.5"
-    :class="{
-      'bg-n-ruby-4 text-n-ruby-10': isUrgent,
-      'bg-n-slate-4 text-n-slate-11': !isUrgent,
-    }"
-  >
-    <fluent-icon
-      :icon="`priority-${priority.toLowerCase()}`"
-      :size="isUrgent ? 12 : 14"
-      class="flex-shrink-0"
-      view-box="0 0 14 14"
-    />
-  </span>
-</template>

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

@@ -27,7 +27,6 @@ import { CMD_AI_ASSIST } from 'dashboard/helper/commandbar/events';
 import {
   getMessageVariables,
   getUndefinedVariablesInMessage,
-  replaceVariablesInMessage,
 } from '@chatwoot/utils';
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import ContentTemplates from './ContentTemplates/ContentTemplatesModal.vue';
@@ -82,13 +81,7 @@ export default {
     CopilotReplyBottomPanel,
   },
   mixins: [inboxMixin, fileUploadMixin, keyboardEventListenerMixins],
-  props: {
-    popOutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['update:popOutReplyBox'],
+  emits: ['toggleEditorSize'],
   setup() {
     const {
       uiSettings,
@@ -253,6 +246,9 @@ export default {
       if (this.isAnInstagramChannel) {
         return MESSAGE_MAX_LENGTH.INSTAGRAM;
       }
+      if (this.isATelegramChannel) {
+        return MESSAGE_MAX_LENGTH.TELEGRAM;
+      }
       if (this.isATiktokChannel) {
         return MESSAGE_MAX_LENGTH.TIKTOK;
       }
@@ -545,7 +541,10 @@ export default {
     },
     setCopilotAcceptedMessage(message, replyType = this.replyType) {
       const key = this.getDraftKey(this.conversationIdByRoute, replyType);
-      this.copilotAcceptedMessages[key] = trimContent(message || '');
+      this.copilotAcceptedMessages[key] = trimContent(
+        message || '',
+        this.maxLength
+      );
     },
     clearCopilotAcceptedMessage(replyType = this.replyType) {
       const key = this.getDraftKey(this.conversationIdByRoute, replyType);
@@ -603,7 +602,7 @@ export default {
     saveDraft(conversationId, replyType) {
       if (this.message || this.message === '') {
         const key = this.getDraftKey(conversationId, replyType);
-        const draftToSave = trimContent(this.message || '');
+        const draftToSave = trimContent(this.message || '', this.maxLength);
 
         this.$store.dispatch('draftMessages/set', {
           key,
@@ -630,10 +629,17 @@ export default {
         return message;
       }
 
+      // Even when editor is disabled (e.g. WhatsApp/API can't reply), we must
+      // still normalize stale signatures out of drafts when signature is off.
+      if (this.isEditorDisabled && this.sendWithSignature) {
+        return message;
+      }
+
       const effectiveChannelType = getEffectiveChannelType(
         this.channelType,
         this.inbox?.medium || ''
       );
+
       return this.sendWithSignature
         ? appendSignature(message, this.messageSignature, effectiveChannelType)
         : removeSignature(message, this.messageSignature, effectiveChannelType);
@@ -785,7 +791,6 @@ export default {
 
         this.clearMessage();
         this.hideEmojiPicker();
-        this.$emit('update:popOutReplyBox', false);
       }
     },
     sendMessageAsMultipleMessages(message, copilotAcceptedMessage = '') {
@@ -905,32 +910,6 @@ export default {
       });
       this.hideContentTemplatesModal();
     },
-    replaceText(message) {
-      if (this.sendWithSignature && !this.private) {
-        // if signature is enabled, append it to the message
-        // appendSignature ensures that the signature is not duplicated
-        // so we don't need to check if the signature is already present
-        const effectiveChannelType = getEffectiveChannelType(
-          this.channelType,
-          this.inbox?.medium || ''
-        );
-        message = appendSignature(
-          message,
-          this.messageSignature,
-          effectiveChannelType
-        );
-      }
-
-      const updatedMessage = replaceVariablesInMessage({
-        message,
-        variables: this.messageVariables,
-      });
-
-      setTimeout(() => {
-        useTrack(CONVERSATION_EVENTS.INSERTED_A_CANNED_RESPONSE);
-        this.message = updatedMessage;
-      }, 100);
-    },
     setReplyMode(mode = REPLY_EDITOR_MODES.REPLY) {
       // Clear attachments when switching between private note and reply modes
       // This is to prevent from breaking the upload rules
@@ -1231,8 +1210,9 @@ export default {
         file => !file?.isRecordedAudio
       );
     },
-    togglePopout() {
-      this.$emit('update:popOutReplyBox', !this.popOutReplyBox);
+    toggleEditorSize() {
+      this.$emit('toggleEditorSize');
+      this.$nextTick(() => this.messageEditor?.focusEditorInputField());
     },
     onSubmitCopilotReply() {
       const acceptedMessage = this.copilot.accept();
@@ -1258,9 +1238,8 @@ export default {
       :is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
       :characters-remaining="charactersRemaining"
       :editor-content="message"
-      :popout-reply-box="popOutReplyBox"
       @set-reply-mode="setReplyMode"
-      @toggle-popout="togglePopout"
+      @toggle-editor-size="toggleEditorSize"
       @toggle-copilot="copilot.toggleEditor"
       @execute-copilot-action="executeCopilotAction"
     />
@@ -1289,7 +1268,7 @@ export default {
           v-if="showEmojiPicker"
           v-on-clickaway="hideEmojiPicker"
           :class="{
-            'emoji-dialog--expanded': isOnExpandedLayout || popOutReplyBox,
+            'emoji-dialog--expanded': isOnExpandedLayout,
           }"
           :on-click="addIntoEditor"
         />
@@ -1313,7 +1292,6 @@ export default {
           :show-copilot-editor="copilot.showEditor.value"
           :is-generating-content="copilot.isGenerating.value"
           :generated-content="copilot.generatedContent.value"
-          :is-popout="popOutReplyBox"
           :placeholder="$t('CONVERSATION.FOOTER.COPILOT_MSG_INPUT')"
           @focus="onFocus"
           @blur="onBlur"
@@ -1429,7 +1407,6 @@ export default {
         :new-conversation-modal-active="newConversationModalActive"
         @select-whatsapp-template="openWhatsappTemplateModal"
         @select-content-template="openContentTemplateModal"
-        @replace-text="replaceText"
         @toggle-insert-article="toggleInsertArticle"
         @toggle-quoted-reply="toggleQuotedReply"
       />

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

@@ -0,0 +1,154 @@
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
+
+const props = defineProps({
+  containerHeight: { type: Number, default: 0 },
+});
+
+const DEFAULT_HEIGHT = 120;
+const MIN_HEIGHT = 80;
+const MIN_MESSAGES_HEIGHT = 200;
+const EXPAND_RATIO = 0.5;
+const RESET_DELAY_MS = 120;
+
+const wrapperRef = useTemplateRef('wrapperRef');
+const surroundingHeight = ref(0);
+const editorHeight = ref(DEFAULT_HEIGHT);
+const isResizing = ref(false);
+const startY = ref(0);
+const startHeight = ref(0);
+let resetTimeoutId = null;
+
+const clamp = (val, min, max) => Math.min(Math.max(val, min), max);
+
+// Measure height of elements surrounding the editor (top panel, email fields, bottom panel)
+const measureSurroundingHeight = () => {
+  if (wrapperRef.value) {
+    surroundingHeight.value = Math.max(
+      0,
+      wrapperRef.value.offsetHeight - editorHeight.value
+    );
+  }
+};
+
+const isContainerReady = computed(() => props.containerHeight > 0);
+
+const sizeBounds = computed(() => {
+  const h = props.containerHeight;
+  const s = surroundingHeight.value;
+  const max = Math.max(MIN_HEIGHT, h - MIN_MESSAGES_HEIGHT - s);
+  const expanded = clamp(Math.floor(h * EXPAND_RATIO - s / 2), MIN_HEIGHT, max);
+  return {
+    min: MIN_HEIGHT,
+    max: isContainerReady.value ? max : DEFAULT_HEIGHT,
+    expanded,
+    default: clamp(DEFAULT_HEIGHT, MIN_HEIGHT, max),
+  };
+});
+
+const clampToBounds = val =>
+  clamp(val, sizeBounds.value.min, sizeBounds.value.max);
+
+const clearDragStyles = () => {
+  Object.assign(document.body.style, { cursor: '', userSelect: '' });
+};
+
+const getClientY = e => (e.touches ? e.touches[0].clientY : e.clientY);
+
+const onResizeStart = event => {
+  editorHeight.value = clampToBounds(editorHeight.value);
+  measureSurroundingHeight();
+  isResizing.value = true;
+  startY.value = getClientY(event);
+  startHeight.value = clampToBounds(editorHeight.value);
+  editorHeight.value = startHeight.value;
+  Object.assign(document.body.style, {
+    cursor: 'row-resize',
+    userSelect: 'none',
+  });
+};
+
+const onResizeMove = event => {
+  if (!isResizing.value) return;
+  if (event.touches) event.preventDefault();
+  editorHeight.value = clampToBounds(
+    startHeight.value + startY.value - getClientY(event)
+  );
+};
+
+const onResizeEnd = () => {
+  if (!isResizing.value) return;
+  isResizing.value = false;
+  clearDragStyles();
+};
+
+const resetEditorHeight = () => {
+  editorHeight.value = sizeBounds.value.default;
+};
+
+const toggleEditorExpand = () => {
+  editorHeight.value = clampToBounds(editorHeight.value);
+  measureSurroundingHeight();
+  const { expanded, max, default: defaultHeight } = sizeBounds.value;
+  const isExpanded = editorHeight.value > defaultHeight;
+  // If expanded is too close to default, use max so the toggle is always noticeable
+  const target = expanded - defaultHeight < 100 ? max : expanded;
+  editorHeight.value = isExpanded ? defaultHeight : target;
+};
+
+const handleMessageSent = () => {
+  clearTimeout(resetTimeoutId);
+  resetTimeoutId = setTimeout(resetEditorHeight, RESET_DELAY_MS);
+};
+
+onMounted(() => {
+  emitter.on(BUS_EVENTS.MESSAGE_SENT, handleMessageSent);
+});
+
+onBeforeUnmount(() => {
+  emitter.off(BUS_EVENTS.MESSAGE_SENT, handleMessageSent);
+  clearTimeout(resetTimeoutId);
+  if (isResizing.value) {
+    isResizing.value = false;
+    clearDragStyles();
+  }
+});
+
+useEventListener(document, 'mousemove', onResizeMove);
+useEventListener(document, 'mouseup', onResizeEnd);
+useEventListener(document, 'touchmove', onResizeMove, { passive: false });
+useEventListener(document, 'touchend', onResizeEnd);
+useEventListener(document, 'touchcancel', onResizeEnd);
+useEventListener(window, 'blur', onResizeEnd);
+
+defineExpose({ toggleEditorExpand, resetEditorHeight });
+</script>
+
+<template>
+  <div
+    ref="wrapperRef"
+    class="relative resizable-editor-wrapper"
+    :style="{
+      '--editor-height': editorHeight + 'px',
+      '--editor-min-allowed': sizeBounds.min + 'px',
+      '--editor-max-allowed': sizeBounds.max + 'px',
+      '--editor-height-transition': isResizing ? 'none' : '180ms ease',
+    }"
+  >
+    <div
+      class="group absolute inset-x-0 -top-4 z-10 flex h-4 cursor-row-resize select-none items-center justify-center bg-gradient-to-b from-transparent from-10% dark:to-n-surface-1/80 to-n-surface-1/90 backdrop-blur-[0.01875rem]"
+      @mousedown="onResizeStart"
+      @touchstart.prevent="onResizeStart"
+      @dblclick="resetEditorHeight"
+    >
+      <div
+        class="w-8 h-0.5 mt-1 rounded-full bg-n-slate-6 group-hover:bg-n-slate-8 transition-all duration-200 motion-safe:group-hover:animate-bounce"
+        :class="{ 'bg-n-slate-8 animate-bounce': isResizing }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>

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

@@ -8,6 +8,7 @@ import {
   agents,
   teams,
   labels,
+  booleanFilterOptions,
   statusFilterOptions,
   messageTypeOptions,
   priorityOptions,
@@ -73,6 +74,8 @@ describe('useAutomation', () => {
           return countries;
         case 'message_type':
           return messageTypeOptions;
+        case 'private_note':
+          return booleanFilterOptions;
         case 'priority':
           return priorityOptions;
         default:
@@ -89,7 +92,9 @@ describe('useAutomation', () => {
         case 'assign_team':
           return teams;
         case 'assign_agent':
-          return agents;
+          return options.addNoneToListFn
+            ? options.addNoneToListFn(options.agents)
+            : options.agents;
         case 'send_email_to_team':
           return teams;
         case 'send_message':
@@ -226,6 +231,9 @@ describe('useAutomation', () => {
     expect(getConditionDropdownValues('message_type')).toEqual(
       messageTypeOptions
     );
+    expect(getConditionDropdownValues('private_note')).toEqual(
+      booleanFilterOptions
+    );
     expect(getConditionDropdownValues('priority')).toEqual(priorityOptions);
   });
 
@@ -234,7 +242,11 @@ describe('useAutomation', () => {
 
     expect(getActionDropdownValues('add_label')).toEqual(labels);
     expect(getActionDropdownValues('assign_team')).toEqual(teams);
-    expect(getActionDropdownValues('assign_agent')).toEqual(agents);
+    expect(getActionDropdownValues('assign_agent')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
+      { id: 'last_responding_agent', name: 'AUTOMATION.LAST_RESPONDING_AGENT' },
+      ...agents,
+    ]);
     expect(getActionDropdownValues('send_email_to_team')).toEqual(teams);
     expect(getActionDropdownValues('send_message')).toEqual([]);
     expect(getActionDropdownValues('add_sla')).toEqual(slaPolicies);

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

@@ -0,0 +1,239 @@
+import { ref } from 'vue';
+import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
+
+// Mock @vueuse/core — return reactive refs we can control per test
+const mockBounding = () => ({
+  top: ref(0),
+  bottom: ref(0),
+  left: ref(0),
+  right: ref(0),
+  width: ref(0),
+  height: ref(0),
+  update: vi.fn(),
+});
+
+const triggerBounds = mockBounding();
+const dropdownBounds = mockBounding();
+const winWidth = ref(1024);
+const winHeight = ref(768);
+
+vi.mock('@vueuse/core', () => {
+  let callCount = 0;
+  return {
+    // First call = trigger, second = dropdown, third = container (if any)
+    useElementBounding: () => {
+      callCount += 1;
+      return callCount % 3 === 1 ? triggerBounds : dropdownBounds;
+    },
+    useWindowSize: () => ({ width: winWidth, height: winHeight }),
+  };
+});
+
+const setTrigger = ({ top, bottom, left, right }) => {
+  triggerBounds.top.value = top;
+  triggerBounds.bottom.value = bottom;
+  triggerBounds.left.value = left ?? 100;
+  triggerBounds.right.value = right ?? 200;
+};
+
+const setDropdown = ({ width, height }) => {
+  dropdownBounds.width.value = width ?? 200;
+  dropdownBounds.height.value = height;
+};
+
+describe('useDropdownPosition', () => {
+  beforeEach(() => {
+    winWidth.value = 1024;
+    winHeight.value = 768;
+    document.body.innerHTML = '<div id="app" dir="ltr"></div>';
+  });
+
+  describe('verticalClass (relative mode)', () => {
+    it('places below when enough space', () => {
+      // Trigger at y=100, dropdown 200px tall
+      // Space below = 768 - 140 = 628 → fits (628 > 216)
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('places above when not enough space below but enough above', () => {
+      // Trigger near bottom at y=600
+      // Space below = 128 → doesn't fit. Space above = 600 → fits
+      setTrigger({ top: 600, bottom: 640 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('picks the side with more space when dropdown fits neither', () => {
+      // Dropdown 500px tall, won't fit above (300) or below (428)
+      // Below has more room → stays below
+      setTrigger({ top: 300, bottom: 340 });
+      setDropdown({ height: 500 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('top-full mt-2');
+    });
+
+    it('picks above when above has more space and neither fits', () => {
+      // Dropdown 600px tall, won't fit above (500) or below (228)
+      // Above has more room → flips above
+      setTrigger({ top: 500, bottom: 540 });
+      setDropdown({ height: 600 });
+
+      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
+      expect(position.value.class).toBe('bottom-full mb-2');
+    });
+
+    it('returns default when disabled', () => {
+      setTrigger({ top: 700, bottom: 740 });
+      setDropdown({ height: 200 });
+
+      const { position } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(position.value.class).toBe('top-full mt-2');
+      expect(position.value.style).toEqual({});
+    });
+  });
+
+  describe('fixedPosition', () => {
+    it('places below with correct top and maxHeight', () => {
+      // Trigger at y=140, space below = 628
+      // top = 140 + 8(gap) = 148
+      // maxHeight = 628 - 8(gap) - 16(margin) = 604
+      setTrigger({ top: 100, bottom: 140 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.top).toBe('148px');
+      expect(fixedPosition.value.style.bottom).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('604px');
+    });
+
+    it('flips above with correct bottom and maxHeight', () => {
+      // Trigger near bottom at y=650, space below = 78 → doesn't fit
+      // Flips above: bottom = 768 - 650 + 8 = 126
+      // maxHeight = 650 - 8 - 16 = 626
+      setTrigger({ top: 650, bottom: 690 });
+      setDropdown({ height: 200, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBe('126px');
+      expect(fixedPosition.value.style.top).toBeUndefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('626px');
+    });
+
+    it('constrains maxHeight to available space on short viewports', () => {
+      // Short viewport (400px), trigger in the middle, dropdown 500px tall
+      // Neither side fits → above (200) > below (160) → places above
+      // maxHeight capped to 200 - 8 - 16 = 176
+      winHeight.value = 400;
+      setTrigger({ top: 200, bottom: 240 });
+      setDropdown({ height: 500, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.bottom).toBeDefined();
+      expect(fixedPosition.value.style.maxHeight).toBe('176px');
+    });
+
+    it('returns defaults when disabled', () => {
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(false)
+      );
+      expect(fixedPosition.value.class).toBe('fixed z-[9999]');
+      expect(fixedPosition.value.style).toEqual({});
+    });
+  });
+
+  describe('horizontal positioning (fixedPosition)', () => {
+    it('anchors to the right edge by default (align=end, LTR)', () => {
+      // align=end + LTR → anchorLeft=false → uses style.right
+      // right = 1024 - 900 = 124
+      setTrigger({ top: 100, bottom: 140, left: 800, right: 900 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.right).toBe('124px');
+    });
+
+    it('anchors to the left edge when align=start (LTR)', () => {
+      // align=start + LTR → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+
+    it('shifts left when dropdown overflows right edge', () => {
+      // Trigger at x=900, dropdown 300px wide → 900+300=1200 > 1024
+      // Falls back to right: 16px (margin)
+      setTrigger({ top: 100, bottom: 140, left: 900, right: 1000 });
+      setDropdown({ height: 100, width: 300 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true),
+        { align: 'start' }
+      );
+
+      expect(fixedPosition.value.style.right).toBe('16px');
+    });
+  });
+
+  describe('RTL', () => {
+    beforeEach(() => {
+      document.body.innerHTML = '<div id="app" dir="rtl"></div>';
+    });
+
+    it('flips anchor direction in RTL (align=end anchors left)', () => {
+      // align=end + RTL → anchorLeft=true → uses style.left
+      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
+      setDropdown({ height: 100, width: 200 });
+
+      const { fixedPosition } = useDropdownPosition(
+        ref(null),
+        ref(null),
+        ref(true)
+      );
+
+      expect(fixedPosition.value.style.left).toBe('100px');
+    });
+  });
+});

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

@@ -0,0 +1,98 @@
+import { useEditableAutomation } from '../useEditableAutomation';
+import useAutomationValues from '../useAutomationValues';
+
+vi.mock('../useAutomationValues');
+
+describe('useEditableAutomation', () => {
+  beforeEach(() => {
+    useAutomationValues.mockReturnValue({
+      getConditionDropdownValues: vi.fn(attributeKey => {
+        if (attributeKey === 'private_note') {
+          return [
+            { id: true, name: 'True' },
+            { id: false, name: 'False' },
+          ];
+        }
+
+        return [];
+      }),
+      getActionDropdownValues: vi.fn(actionName => {
+        if (actionName === 'assign_agent') {
+          return [
+            { id: 'nil', name: 'None' },
+            {
+              id: 'last_responding_agent',
+              name: 'Last Responding Agent',
+            },
+            { id: 1, name: 'Agent 1' },
+          ];
+        }
+
+        return [];
+      }),
+    });
+  });
+
+  it('rehydrates boolean conditions as a single selected option', () => {
+    const automation = {
+      event_name: 'message_created',
+      conditions: [
+        {
+          attribute_key: 'private_note',
+          filter_operator: 'equal_to',
+          values: [false],
+          query_operator: null,
+        },
+      ],
+      actions: [],
+    };
+    const automationTypes = {
+      message_created: {
+        conditions: [{ key: 'private_note', inputType: 'search_select' }],
+      },
+    };
+
+    const { formatAutomation } = useEditableAutomation();
+    const result = formatAutomation(automation, [], automationTypes, []);
+
+    expect(result.conditions).toEqual([
+      {
+        attribute_key: 'private_note',
+        filter_operator: 'equal_to',
+        values: { id: false, name: 'False' },
+        query_operator: 'and',
+      },
+    ]);
+  });
+
+  it('rehydrates last responding agent as a selected action option', () => {
+    const automation = {
+      event_name: 'conversation_created',
+      conditions: [],
+      actions: [
+        {
+          action_name: 'assign_agent',
+          action_params: ['last_responding_agent'],
+        },
+      ],
+    };
+    const automationActionTypes = [
+      { key: 'assign_agent', inputType: 'search_select' },
+    ];
+
+    const { formatAutomation } = useEditableAutomation();
+    const result = formatAutomation(automation, [], {}, automationActionTypes);
+
+    expect(result.actions).toEqual([
+      {
+        action_name: 'assign_agent',
+        action_params: [
+          {
+            id: 'last_responding_agent',
+            name: 'Last Responding Agent',
+          },
+        ],
+      },
+    ]);
+  });
+});

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

@@ -119,24 +119,30 @@ describe('useMacros', () => {
     const { getMacroDropdownValues } = useMacros();
     expect(getMacroDropdownValues('add_label')).toHaveLength(mockLabels.length);
     expect(getMacroDropdownValues('assign_team')).toHaveLength(
-      mockTeams.length
-    );
+      mockTeams.length + 1
+    ); // +1 for "None"
     expect(getMacroDropdownValues('assign_agent')).toHaveLength(
-      mockAgents.length + 1
-    ); // +1 for "Self"
+      mockAgents.length + 2
+    ); // +2 for "None" and "Self"
   });
 
-  it('returns teams for assign_team and send_email_to_team types', () => {
+  it('returns teams with "None" option for assign_team and teams only for send_email_to_team', () => {
     const { getMacroDropdownValues } = useMacros();
-    expect(getMacroDropdownValues('assign_team')).toEqual(mockTeams);
+    const assignTeamResult = getMacroDropdownValues('assign_team');
+    expect(assignTeamResult[0]).toEqual({
+      id: 'nil',
+      name: 'AUTOMATION.NONE_OPTION',
+    });
+    expect(assignTeamResult.slice(1)).toEqual(mockTeams);
     expect(getMacroDropdownValues('send_email_to_team')).toEqual(mockTeams);
   });
 
-  it('returns agents with "Self" option for assign_agent type', () => {
+  it('returns agents with "None" and "Self" options for assign_agent type', () => {
     const { getMacroDropdownValues } = useMacros();
     const result = getMacroDropdownValues('assign_agent');
-    expect(result[0]).toEqual({ id: 'self', name: 'Self' });
-    expect(result.slice(1)).toEqual(mockAgents);
+    expect(result[0]).toEqual({ id: 'nil', name: 'AUTOMATION.NONE_OPTION' });
+    expect(result[1]).toEqual({ id: 'self', name: 'Self' });
+    expect(result.slice(2)).toEqual(mockAgents);
   });
 
   it('returns formatted labels for add_label and remove_label types', () => {
@@ -172,8 +178,11 @@ describe('useMacros', () => {
 
     const { getMacroDropdownValues } = useMacros();
     expect(getMacroDropdownValues('add_label')).toEqual([]);
-    expect(getMacroDropdownValues('assign_team')).toEqual([]);
+    expect(getMacroDropdownValues('assign_team')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
+    ]);
     expect(getMacroDropdownValues('assign_agent')).toEqual([
+      { id: 'nil', name: 'AUTOMATION.NONE_OPTION' },
       { id: 'self', name: 'Self' },
     ]);
   });

app/javascript/dashboard/composables/useAutomationValues.js

@@ -121,8 +121,19 @@ export default function useAutomationValues() {
    * @returns {Array} An array of action dropdown values.
    */
   const getActionDropdownValues = type => {
+    let agentsList = agents.value;
+    if (type === 'assign_agent') {
+      agentsList = [
+        {
+          id: 'last_responding_agent',
+          name: t('AUTOMATION.LAST_RESPONDING_AGENT'),
+        },
+        ...agentsList,
+      ];
+    }
+
     return getActionOptions({
-      agents: agents.value,
+      agents: agentsList,
       labels: labels.value,
       teams: teams.value,
       slaPolicies: slaPolicies.value,

app/javascript/dashboard/composables/useDropdownPosition.js

@@ -0,0 +1,128 @@
+import { computed, unref, watch } from 'vue';
+import { useElementBounding, useWindowSize } from '@vueuse/core';
+
+const FALLBACK_SIZE = 200;
+const SAFE_MARGIN = 16;
+const GAP = 8;
+
+/**
+ * Auto-position a floating element based on available viewport space.
+ *
+ * @param {Ref} triggerRef - Trigger element ref
+ * @param {Ref} dropdownRef - Dropdown/popover element ref
+ * @param {Ref} enabled - Whether to calculate position
+ * @param {Object} options
+ * @param {Ref}    [options.container] - Constraining container ref
+ * @param {number} [options.margin=16] - Min distance from viewport/container edges
+ * @param {string} [options.align='end'] - 'start' or 'end' (flips automatically for RTL)
+ */
+export function useDropdownPosition(
+  triggerRef,
+  dropdownRef,
+  enabled,
+  { container = null, margin = SAFE_MARGIN, align = 'end' } = {}
+) {
+  const trigger = useElementBounding(triggerRef);
+  const dropdown = useElementBounding(dropdownRef);
+  const bounds = useElementBounding(container);
+  const { width: winWidth, height: winHeight } = useWindowSize();
+
+  const isRTL = computed(
+    () => document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl'
+  );
+
+  // Whether to anchor to the left edge of the trigger
+  const anchorLeft = computed(() => (align === 'start') !== isRTL.value);
+
+  const verticalClass = computed(() => {
+    if (!unref(enabled)) return 'top-full mt-2';
+    const dh = dropdown.height.value || FALLBACK_SIZE;
+    const spaceBelow = winHeight.value - trigger.bottom.value;
+    const spaceAbove = trigger.top.value;
+    // Only flip above if it fits there; otherwise stay below (more room or equal)
+    if (spaceBelow >= dh + margin) return 'top-full mt-2';
+    if (spaceAbove >= dh + margin) return 'bottom-full mb-2';
+    return spaceBelow >= spaceAbove ? 'top-full mt-2' : 'bottom-full mb-2';
+  });
+
+  // Relative mode: Tailwind class + style for absolute-in-parent dropdowns
+  const position = computed(() => {
+    if (!unref(enabled)) return { class: 'top-full mt-2', style: {} };
+
+    const dw = dropdown.width.value || FALLBACK_SIZE;
+    const leftBound = container ? bounds.left.value : 0;
+    const rightBound = container ? bounds.right.value : winWidth.value;
+    const style = {};
+
+    if (anchorLeft.value) {
+      const available = rightBound - trigger.left.value;
+      const overflow = dw - available;
+      style.left = overflow > 0 ? `-${overflow}px` : '0px';
+    } else {
+      const available = trigger.right.value - leftBound;
+      const overflow = dw - available;
+      style.right = overflow > 0 ? `-${overflow}px` : '0px';
+    }
+
+    return { class: verticalClass.value, style };
+  });
+
+  // Fixed mode: styles for teleported popovers
+  const fixedPosition = computed(() => {
+    if (!unref(enabled)) return { class: 'fixed z-[9999]', style: {} };
+
+    const dh = dropdown.height.value || FALLBACK_SIZE;
+    const dw = dropdown.width.value || FALLBACK_SIZE;
+    const spaceBelow = winHeight.value - trigger.bottom.value;
+    const style = {};
+
+    // Vertical: prefer below, flip above only if it fits, else pick the larger side
+    const spaceAbove = trigger.top.value;
+    const placeAbove =
+      spaceBelow < dh + margin &&
+      (spaceAbove >= dh + margin || spaceAbove > spaceBelow);
+
+    if (placeAbove) {
+      style.bottom = `${winHeight.value - trigger.top.value + GAP}px`;
+      style.maxHeight = `${spaceAbove - GAP - margin}px`;
+    } else {
+      style.top = `${trigger.bottom.value + GAP}px`;
+      style.maxHeight = `${spaceBelow - GAP - margin}px`;
+    }
+
+    // Horizontal
+    if (anchorLeft.value) {
+      const left = trigger.left.value;
+      if (left + dw > winWidth.value - margin) {
+        style.right = `${margin}px`;
+      } else {
+        style.left = `${Math.max(margin, left)}px`;
+      }
+    } else {
+      const right = winWidth.value - trigger.right.value;
+      if (trigger.right.value - dw < margin) {
+        style.left = `${margin}px`;
+      } else {
+        style.right = `${right}px`;
+      }
+    }
+
+    return { class: 'fixed z-[9999]', style };
+  });
+
+  const updatePosition = () => {
+    trigger.update();
+    dropdown.update();
+    if (container) bounds.update();
+  };
+
+  // Update position when dropdown opens to ensure RTL state is current
+  watch(
+    () => unref(enabled),
+    isEnabled => {
+      if (isEnabled) updatePosition();
+    }
+  );
+
+  return { position, fixedPosition, updatePosition };
+}

app/javascript/dashboard/composables/useEditableAutomation.js

@@ -46,11 +46,26 @@ export function useEditableAutomation() {
       if (inputType === 'comma_separated_plain_text') {
         return { ...condition, values: condition.values.join(',') };
       }
+      const dropdownValues = getConditionDropdownValues(
+        condition.attribute_key
+      );
+      const hasBooleanOptions =
+        inputType === 'search_select' &&
+        dropdownValues.length &&
+        dropdownValues.every(item => typeof item.id === 'boolean');
+
+      if (hasBooleanOptions) {
+        return {
+          ...condition,
+          query_operator: condition.query_operator || 'and',
+          values: dropdownValues.find(item => item.id === condition.values[0]),
+        };
+      }
       return {
         ...condition,
         query_operator: condition.query_operator || 'and',
-        values: [...getConditionDropdownValues(condition.attribute_key)].filter(
-          item => [...condition.values].includes(item.id)
+        values: [...dropdownValues].filter(item =>
+          [...condition.values].includes(item.id)
         ),
       };
     });

app/javascript/dashboard/composables/useKeyboardNavigableList.js

@@ -12,11 +12,14 @@ import { useKeyboardEvents } from './useKeyboardEvents';
 
 /**
  * Wrap the action in a function that calls the action and prevents the default event behavior.
+ * Only prevents default when items are available to navigate.
  * @param {Function} action - The action to be called.
+ * @param {import('vue').Ref<Array>} items - A ref to the array of selectable items.
  * @returns {{action: Function, allowOnFocusedInput: boolean}} An object containing the action and a flag to allow the event on focused input.
  */
-const createAction = action => ({
+const createAction = (action, items) => ({
   action: e => {
+    if (!items.value?.length) return;
     action();
     e.preventDefault();
   },
@@ -38,15 +41,14 @@ const createKeyboardEvents = (
   items
 ) => {
   const events = {
-    ArrowUp: createAction(moveSelectionUp),
-    'Control+KeyP': createAction(moveSelectionUp),
-    ArrowDown: createAction(moveSelectionDown),
-    'Control+KeyN': createAction(moveSelectionDown),
+    ArrowUp: createAction(moveSelectionUp, items),
+    'Control+KeyP': createAction(moveSelectionUp, items),
+    ArrowDown: createAction(moveSelectionDown, items),
+    'Control+KeyN': createAction(moveSelectionDown, items),
   };
 
-  // Adds an event handler for the Enter key if the onSelect function is provided.
   if (typeof onSelect === 'function') {
-    events.Enter = createAction(() => items.value?.length > 0 && onSelect());
+    events.Enter = createAction(onSelect, items);
   }
 
   return events;

app/javascript/dashboard/composables/useMacros.js

@@ -15,6 +15,11 @@ export const useMacros = () => {
   const teams = computed(() => getters['teams/getTeams'].value);
   const agents = computed(() => getters['agents/getVerifiedAgents'].value);
 
+  const withNoneOption = options => [
+    { id: 'nil', name: t('AUTOMATION.NONE_OPTION') },
+    ...(options || []),
+  ];
+
   /**
    * Get dropdown values based on the specified type
    * @param {string} type - The type of dropdown values to retrieve
@@ -23,10 +28,15 @@ export const useMacros = () => {
   const getMacroDropdownValues = type => {
     switch (type) {
       case 'assign_team':
+        return withNoneOption(teams.value);
       case 'send_email_to_team':
         return teams.value;
       case 'assign_agent':
-        return [{ id: 'self', name: 'Self' }, ...agents.value];
+        return [
+          ...withNoneOption(),
+          { id: 'self', name: 'Self' },
+          ...agents.value,
+        ];
       case 'add_label':
       case 'remove_label':
         return labels.value.map(i => ({

app/javascript/dashboard/constants/editor.js

@@ -172,6 +172,7 @@ export const FORMATTING = {
 export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'strong',
   'em',
+  'strike',
   'link',
   'undo',
   'redo',
@@ -182,6 +183,7 @@ export const ARTICLE_EDITOR_MENU_OPTIONS = [
   'h3',
   'imageUpload',
   'code',
+  'insertTable',
 ];
 
 /**

app/javascript/dashboard/constants/globals.js

@@ -12,6 +12,11 @@ export default {
     SNOOZED: 'snoozed',
     ALL: 'all',
   },
+  CONVERSATION_TYPE: {
+    MENTION: 'mention',
+    PARTICIPATING: 'participating',
+    UNATTENDED: 'unattended',
+  },
   SORT_BY_TYPE: {
     LAST_ACTIVITY_AT_ASC: 'last_activity_at_asc',
     LAST_ACTIVITY_AT_DESC: 'last_activity_at_desc',

app/javascript/dashboard/featureFlags.js

@@ -37,6 +37,7 @@ export const FEATURE_FLAGS = {
   CHANNEL_INSTAGRAM: 'channel_instagram',
   CHANNEL_TIKTOK: 'channel_tiktok',
   CONTACT_CHATWOOT_SUPPORT_TEAM: 'contact_chatwoot_support_team',
+  CAPTAIN_CUSTOM_TOOLS: 'custom_tools',
   CAPTAIN_V2: 'captain_integration_v2',
   CAPTAIN_TASKS: 'captain_tasks',
   SAML: 'saml',
@@ -49,6 +50,7 @@ export const FEATURE_FLAGS = {
 export const PREMIUM_FEATURES = [
   FEATURE_FLAGS.SLA,
   FEATURE_FLAGS.CAPTAIN,
+  FEATURE_FLAGS.CAPTAIN_CUSTOM_TOOLS,
   FEATURE_FLAGS.CUSTOM_ROLES,
   FEATURE_FLAGS.AUDIT_LOGS,
   FEATURE_FLAGS.HELP_CENTER,

app/javascript/dashboard/helper/URLHelper.js

@@ -51,6 +51,7 @@ export const conversationListPageURL = ({
   } else if (conversationType) {
     const urlMap = {
       mention: 'mentions/conversations',
+      participating: 'participating/conversations',
       unattended: 'unattended/conversations',
     };
     url = `accounts/${accountId}/${urlMap[conversationType]}`;

app/javascript/dashboard/helper/automationHelper.js

@@ -150,6 +150,7 @@ export const getConditionOptions = ({
     conversation_language: languages,
     country_code: countries,
     message_type: messageTypeOptions,
+    private_note: booleanFilterOptions,
     priority: priorityOptions,
     labels: generateConditionOptions(labels, 'title'),
   };

app/javascript/dashboard/helper/editorHelper.js

@@ -32,6 +32,25 @@ export function extractTextFromMarkdown(markdown) {
     .trim(); // Trim any extra space
 }
 
+/**
+ * Removes inline base64 markdown images from signature content.
+ *
+ * @param {string} content
+ * @returns {{ sanitizedContent: string, hasInlineImages: boolean }}
+ */
+export function stripInlineBase64Images(content) {
+  if (!content || typeof content !== 'string') {
+    return { sanitizedContent: content || '', hasInlineImages: false };
+  }
+
+  const markdownInlineBase64ImageRegex =
+    /!\[[^\]]*]\(\s*data:image\/[a-zA-Z0-9.+-]+;base64,[^)]+\s*\)/gi;
+  const sanitizedContent = content.replace(markdownInlineBase64ImageRegex, '');
+  const hasInlineImages = sanitizedContent !== content;
+
+  return { sanitizedContent, hasInlineImages };
+}
+
 /**
  * Strip unsupported markdown formatting based on channel capabilities.
  * Uses MARKDOWN_PATTERNS from editor constants.

app/javascript/dashboard/helper/snoozeDateParser/localization.js

@@ -166,6 +166,8 @@ const TOD_TO_MERIDIEM = {
   evening: 'pm',
   night: 'pm',
 };
+const CJK_CHAR_RE =
+  /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
 
 // ─── Translation Cache ──────────────────────────────────────────────────────
 
@@ -278,8 +280,13 @@ const escapeRegex = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 const substituteLocalTokens = (text, pairs) => {
   let r = text;
   pairs.forEach(([local, en]) => {
-    const re = new RegExp(`(?<=^|\\s)${escapeRegex(local)}(?=\\s|$)`, 'g');
-    r = r.replace(re, en);
+    if (CJK_CHAR_RE.test(local)) {
+      const re = new RegExp(escapeRegex(local), 'g');
+      r = r.replace(re, ` ${en} `);
+    } else {
+      const re = new RegExp(`(?<=^|\\s)${escapeRegex(local)}(?=\\s|$)`, 'g');
+      r = r.replace(re, en);
+    }
   });
   return r;
 };

app/javascript/dashboard/helper/snoozeDateParser/parser.js

@@ -82,6 +82,9 @@ const ORDINAL_RE = `(\\d{1,2}(?:st|nd|rd|th)?|${ORDINAL_WORDS})`;
 
 const HALF_UNIT_RE = /^(?:in\s+)?half\s+(?:an?\s+)?(hour|day|week|month|year)$/;
 const RELATIVE_DURATION_RE = new RegExp(`^(?:in\\s+)?${NUM_RE}\\s+${UNIT_RE}$`);
+const RELATIVE_DURATION_AFTER_RE = new RegExp(
+  `^(?:in\\s+)?${NUM_RE}\\s+${UNIT_RE}\\s+after$`
+);
 const DURATION_FROM_NOW_RE = new RegExp(
   `^${NUM_RE}\\s+${UNIT_RE}\\s+from\\s+now$`
 );
@@ -89,6 +92,9 @@ const RELATIVE_DAY_ONLY_RE = new RegExp(`^(${RELATIVE_DAYS})$`);
 const RELATIVE_DAY_TOD_RE = new RegExp(
   `^(${RELATIVE_DAYS})\\s+(?:at\\s+)?(${TIME_OF_DAY_NAMES})$`
 );
+const RELATIVE_DAY_MERIDIEM_RE = new RegExp(
+  `^(${RELATIVE_DAYS})\\s+(?:at\\s+)?(am|pm)$`
+);
 const RELATIVE_DAY_TOD_TIME_RE = new RegExp(
   `^(${RELATIVE_DAYS})\\s+(?:at\\s+)?(${TIME_OF_DAY_NAMES})\\s+(\\d{1,2}(?::\\d{2})?)$`
 );
@@ -245,6 +251,7 @@ const matchDuration = (text, now) => {
 
   return (
     parseDuration(text.match(DURATION_FROM_NOW_RE), now) ||
+    parseDuration(text.match(RELATIVE_DURATION_AFTER_RE), now) ||
     parseDuration(text.match(RELATIVE_DURATION_RE), now)
   );
 };
@@ -303,6 +310,13 @@ const matchRelativeDay = (text, now) => {
     );
   }
 
+  const dayMeridiemMatch = text.match(RELATIVE_DAY_MERIDIEM_RE);
+  if (dayMeridiemMatch) {
+    const [, dayKey, meridiem] = dayMeridiemMatch;
+    const hours = meridiem === 'am' ? 9 : 14;
+    return applyTimeWithRollover(RELATIVE_DAY_MAP[dayKey], hours, 0, now);
+  }
+
   const dayAtTimeMatch = text.match(RELATIVE_DAY_AT_TIME_RE);
   if (dayAtTimeMatch) {
     const [, dayKey, timeRaw] = dayAtTimeMatch;

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

@@ -40,6 +40,15 @@ describe('#URL Helpers', () => {
         '/app/accounts/1/custom_view/1'
       );
     });
+
+    it('should return url to participating conversations', () => {
+      expect(
+        conversationListPageURL({
+          accountId: 1,
+          conversationType: 'participating',
+        })
+      ).toBe('/app/accounts/1/participating/conversations');
+    });
   });
   describe('conversationUrl', () => {
     it('should return direct conversation URL if activeInbox is nil', () => {

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

@@ -178,6 +178,21 @@ describe('getConditionOptions', () => {
       })
     ).toEqual(testOptions);
   });
+
+  it('returns boolean options for private_note', () => {
+    const booleanOptions = [
+      { id: true, name: 'True' },
+      { id: false, name: 'False' },
+    ];
+
+    expect(
+      helpers.getConditionOptions({
+        booleanFilterOptions: booleanOptions,
+        customAttributes,
+        type: 'private_note',
+      })
+    ).toEqual(booleanOptions);
+  });
 });
 
 describe('getFileName', () => {

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

@@ -15,6 +15,7 @@ import {
   getMenuAnchor,
   calculateMenuPosition,
   stripUnsupportedFormatting,
+  stripInlineBase64Images,
 } from '../editorHelper';
 import { FORMATTING } from 'dashboard/constants/editor';
 import { EditorState } from '@chatwoot/prosemirror-schema';
@@ -423,6 +424,36 @@ describe('extractTextFromMarkdown', () => {
   });
 });
 
+describe('stripInlineBase64Images', () => {
+  it('removes markdown data:image base64 images and sets hasInlineImages', () => {
+    const content =
+      'Hello\n![x](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAE)\nWorld';
+    const { sanitizedContent, hasInlineImages } =
+      stripInlineBase64Images(content);
+
+    expect(hasInlineImages).toBe(true);
+    expect(sanitizedContent).not.toContain('data:image/png;base64');
+    expect(sanitizedContent).toContain('Hello');
+    expect(sanitizedContent).toContain('World');
+  });
+
+  it('leaves hosted image markdown unchanged', () => {
+    const content = '![](https://example.com/logo.png)';
+    const { sanitizedContent, hasInlineImages } =
+      stripInlineBase64Images(content);
+
+    expect(hasInlineImages).toBe(false);
+    expect(sanitizedContent).toBe(content);
+  });
+
+  it('returns empty hasInlineImages for empty input', () => {
+    expect(stripInlineBase64Images('')).toEqual({
+      sanitizedContent: '',
+      hasInlineImages: false,
+    });
+  });
+});
+
 describe('insertAtCursor', () => {
   it('should return undefined if editorView is not provided', () => {
     const result = insertAtCursor(undefined, schema.text('Hello'), 0);

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

@@ -45,6 +45,10 @@ describe('#resolveTeamIds', () => {
     const resolvedTeams = '⚙️ sales team, 🤷‍♂️ fayaz';
     expect(resolveTeamIds(teams, [1, 2])).toEqual(resolvedTeams);
   });
+
+  it('resolves nil as None', () => {
+    expect(resolveTeamIds(teams, ['nil'])).toEqual('None');
+  });
 });
 
 describe('#resolveLabels', () => {
@@ -59,6 +63,10 @@ describe('#resolveAgents', () => {
     const resolvedAgents = 'John Doe';
     expect(resolveAgents(agents, [1])).toEqual(resolvedAgents);
   });
+
+  it('resolves nil and self values', () => {
+    expect(resolveAgents(agents, ['nil', 'self'])).toEqual('None, Self');
+  });
 });
 
 describe('#getFileName', () => {

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

@@ -1626,6 +1626,24 @@ describe('generateDateSuggestions — localized input regressions', () => {
     },
   };
 
+  const zhTWSnoozeTranslations = {
+    UNITS: {
+      HOUR: '小時',
+      HOURS: '小時',
+      DAY: '天',
+      DAYS: '天',
+    },
+    HALF: '半',
+    RELATIVE: {
+      TOMORROW: '明天',
+    },
+    MERIDIEM: {
+      AM: '上午',
+      PM: '下午',
+    },
+    AFTER: '後',
+  };
+
   describe('P1: short non-English tokens must NOT produce spurious half-duration suggestions', () => {
     it('Arabic "غد" does not produce half-duration suggestions', () => {
       const results = generateDateSuggestions('غد', now, {
@@ -1721,6 +1739,37 @@ describe('generateDateSuggestions — localized input regressions', () => {
       expect(results[0].date.getHours()).toBe(6);
     });
   });
+
+  describe('zh_TW compact CJK inputs', () => {
+    const options = {
+      translations: zhTWSnoozeTranslations,
+      locale: 'zh-TW',
+    };
+
+    it('parses "2小時後" (2 hours from now) without spaces', () => {
+      const results = generateDateSuggestions('2小時後', now, options);
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].date.getDate()).toBe(16);
+      expect(results[0].date.getHours()).toBe(12);
+      expect(results[0].date.getMinutes()).toBe(0);
+    });
+
+    it('parses "半天" (half day) without spaces', () => {
+      const results = generateDateSuggestions('半天', now, options);
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].date.getDate()).toBe(16);
+      expect(results[0].date.getHours()).toBe(22);
+      expect(results[0].date.getMinutes()).toBe(0);
+    });
+
+    it('parses "明天 上午" (tomorrow AM) into tomorrow 9am', () => {
+      const results = generateDateSuggestions('明天 上午', now, options);
+      expect(results.length).toBeGreaterThan(0);
+      expect(results[0].date.getDate()).toBe(17);
+      expect(results[0].date.getHours()).toBe(9);
+      expect(results[0].date.getMinutes()).toBe(0);
+    });
+  });
 });
 
 describe('no-space duration suggestions', () => {

app/javascript/dashboard/helper/validations.js

@@ -125,6 +125,7 @@ const validateSingleAction = action => {
     'mute_conversation',
     'snooze_conversation',
     'resolve_conversation',
+    'remove_assigned_agent',
     'remove_assigned_team',
     'open_conversation',
     'pending_conversation',