do not send notifications for failed messages

2026-01-27 17:06:04 +05:30
695 changed files with 10109 additions and 22391 deletions
@@ -144,7 +144,7 @@ jobs:
  # Backend tests with parallelization
  backend-tests:
    <<: *defaults
-    parallelism: 18
+    parallelism: 16
    steps:
      - checkout
      - node/install:
@@ -350,12 +350,12 @@ jobs:
          destination: coverage

  build:
-    <<: *defaults
-    steps:
-      - run:
-          name: Legacy build aggregator
-          command: |
-            echo "All main jobs passed; build job kept only for GitHub required check compatibility."
+      <<: *defaults
+      steps:
+        - run:
+            name: Legacy build aggregator
+            command: |
+              echo "All main jobs passed; build job kept only for GitHub required check compatibility."

 workflows:
  version: 2
@@ -276,4 +276,3 @@ AZURE_APP_SECRET=
 # REMOVE_STALE_CONTACT_INBOX_JOB_STATUS=false

 # REDIS_ALFRED_SIZE=10
-# REDIS_VELMA_SIZE=10
@@ -94,8 +94,6 @@ yarn-debug.log*
 .vscode
 .claude/settings.local.json
 .cursor
-.codex/
-.claude/
 CLAUDE.local.md

 # Histoire deployment
@@ -103,4 +101,3 @@ CLAUDE.local.md
 .histoire
 .pnpm-store/*
 local/
-Procfile.worktree
@@ -4,11 +4,6 @@

 - **Setup**: `bundle install && pnpm install`
 - **Run Dev**: `pnpm dev` or `overmind start -f ./Procfile.dev`
- **Seed Local Test Data**: `bundle exec rails db:seed` (quickly populates minimal data for standard feature verification)
- **Seed Search Test Data**: `bundle exec rails search:setup_test_data` (bulk fixture generation for search/performance/manual load scenarios)
- **Seed Account Sample Data (richer test data)**: `Seeders::AccountSeeder` is available as an internal utility and is exposed through Super Admin `Accounts#seed`, but can be used directly in dev workflows too:
-  - UI path: Super Admin → Accounts → Seed (enqueues `Internal::SeedAccountJob`).
-  - CLI path: `bundle exec rails runner "Internal::SeedAccountJob.perform_now(Account.find(<id>))"` (or call `Seeders::AccountSeeder.new(account: Account.find(<id>)).perform!` directly).
 - **Lint JS/Vue**: `pnpm eslint` / `pnpm eslint:fix`
 - **Lint Ruby**: `bundle exec rubocop -a`
 - **Test JS**: `pnpm test` or `pnpm test:watch`
@@ -55,13 +50,6 @@
 - Prefer `with_modified_env` (from spec helpers) over stubbing `ENV` directly in specs
 - Specs in parallel/reloading environments: prefer comparing `error.class.name` over constant class equality when asserting raised errors

-## Codex Worktree Workflow
-
- Use a separate git worktree + branch per task to keep changes isolated.
- Keep Codex-specific local setup under `.codex/` and use `Procfile.worktree` for worktree process orchestration.
- The setup workflow in `.codex/environments/environment.toml` should dynamically generate per-worktree DB/port values (Rails, Vite, Redis DB index) to avoid collisions.
- Start each worktree with its own Overmind socket/title so multiple instances can run at the same time.
-
 ## Commit Messages

 - Prefer Conventional Commits: `type(scope): subject` (scope optional)
@@ -98,7 +86,3 @@ Practical checklist for any change impacting core logic or public APIs
 - When renaming/moving shared code, mirror the change in `enterprise/` to prevent drift.
 - Tests: Add Enterprise-specific specs under `spec/enterprise`, mirroring OSS spec layout where applicable.
 - When modifying existing OSS features for Enterprise-only behavior, add an Enterprise module (via `prepend_mod_with`/`include_mod_with`) instead of editing OSS files directly—especially for policies, controllers, and services. For Enterprise-exclusive features, place code directly under `enterprise/`.
-
-## Branding / White-labeling note
-
- For user-facing strings that currently contain "Chatwoot" but should adapt to branded/self-hosted installs, prefer applying `replaceInstallationName` from `shared/composables/useBranding` in the UI layer (for example tooltip and suggestion labels) instead of adding hardcoded brand-specific copy.
@@ -191,14 +191,12 @@ gem 'reverse_markdown'

 gem 'iso-639'
 gem 'ruby-openai'
-gem 'ai-agents', '>= 0.9.1'
+gem 'ai-agents', '>= 0.7.0'

 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.8.2'
 gem 'ruby_llm-schema'

-gem 'cld3', '~> 3.7'
-
 # OpenTelemetry for LLM observability
 gem 'opentelemetry-sdk'
 gem 'opentelemetry-exporter-otlp'
@@ -126,8 +126,8 @@ GEM
      jbuilder (~> 2)
      rails (>= 4.2, < 7.2)
      selectize-rails (~> 0.6)
-    ai-agents (0.9.1)
-      ruby_llm (~> 1.9.1)
+    ai-agents (0.7.0)
+      ruby_llm (~> 1.8.2)
    annotaterb (4.20.0)
      activerecord (>= 6.0.0)
      activesupport (>= 6.0.0)
@@ -186,7 +186,6 @@ GEM
    byebug (11.1.3)
    childprocess (5.1.0)
      logger (~> 1.5)
-    cld3 (3.7.0)
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
@@ -298,7 +297,7 @@ GEM
      railties (>= 5.0.0)
    faker (3.2.0)
      i18n (>= 1.8.11, < 2)
-    faraday (2.14.1)
+    faraday (2.13.1)
      faraday-net_http (>= 2.0, < 3.5)
      json
      logger
@@ -309,12 +308,12 @@ GEM
      hashie
    faraday-multipart (1.0.4)
      multipart-post (~> 2)
-    faraday-net_http (3.4.2)
-      net-http (~> 0.5)
+    faraday-net_http (3.4.0)
+      net-http (>= 0.5.0)
    faraday-net_http_persistent (2.1.0)
      faraday (~> 2.5)
      net-http-persistent (~> 4.0)
-    faraday-retry (2.4.0)
+    faraday-retry (2.2.1)
      faraday (~> 2.0)
    faraday_middleware-aws-sigv4 (1.0.1)
      aws-sigv4 (~> 1.0)
@@ -465,7 +464,7 @@ GEM
      rails-dom-testing (>= 1, < 3)
      railties (>= 4.2.0)
      thor (>= 0.14, < 2.0)
-    json (2.18.1)
+    json (2.13.2)
    json_refs (0.1.8)
      hana
    json_schemer (0.2.24)
@@ -540,11 +539,11 @@ GEM
      net-imap
      net-pop
      net-smtp
-    marcel (1.1.0)
+    marcel (1.0.4)
    maxminddb (0.1.22)
-    meta_request (0.8.5)
+    meta_request (0.8.3)
      rack-contrib (>= 1.1, < 3)
-      railties (>= 3.0.0, < 9)
+      railties (>= 3.0.0, < 8)
    method_source (1.1.0)
    mime-types (3.4.1)
      mime-types-data (~> 3.2015)
@@ -559,12 +558,12 @@ GEM
    multi_json (1.15.0)
    multi_xml (0.8.0)
      bigdecimal (>= 3.1, < 5)
-    multipart-post (2.4.1)
+    multipart-post (2.3.0)
    mutex_m (0.3.0)
    neighbor (0.2.3)
      activerecord (>= 5.2)
-    net-http (0.9.1)
-      uri (>= 0.11.1)
+    net-http (0.6.0)
+      uri
    net-http-persistent (4.0.2)
      connection_pool (~> 2.2)
    net-imap (0.4.20)
@@ -583,14 +582,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.19.1)
+    nokogiri (1.18.9)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.19.1-arm64-darwin)
+    nokogiri (1.18.9-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-darwin)
+    nokogiri (1.18.9-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.19.1-x86_64-linux-gnu)
+    nokogiri (1.18.9-x86_64-linux-gnu)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -677,7 +676,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (3.2.5)
+    rack (3.2.3)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -825,7 +824,7 @@ GEM
    ruby2ruby (2.5.0)
      ruby_parser (~> 3.1)
      sexp_processor (~> 4.6)
-    ruby_llm (1.9.2)
+    ruby_llm (1.8.2)
      base64
      event_stream_parser (~> 1)
      faraday (>= 1.10.0)
@@ -969,7 +968,7 @@ GEM
      unicode-emoji (~> 4.0, >= 4.0.4)
    unicode-emoji (4.0.4)
    uniform_notifier (1.17.0)
-    uri (1.1.1)
+    uri (1.0.4)
    uri_template (0.7.0)
    valid_email2 (5.2.6)
      activemodel (>= 3.2)
@@ -1004,7 +1003,7 @@ GEM
    working_hours (1.4.1)
      activesupport (>= 3.2)
      tzinfo
-    zeitwerk (2.7.4)
+    zeitwerk (2.6.17)

 PLATFORMS
  arm64-darwin-20
@@ -1024,7 +1023,7 @@ DEPENDENCIES
  administrate (>= 0.20.1)
  administrate-field-active_storage (>= 1.0.3)
  administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.9.1)
+  ai-agents (>= 0.7.0)
  annotaterb
  attr_extras
  audited (~> 5.4, >= 5.4.1)
@@ -1038,7 +1037,6 @@ DEPENDENCIES
  bullet
  bundle-audit
  byebug
-  cld3 (~> 3.7)
  climate_control
  commonmarker
  csv-safe
@@ -1 +1 @@
-4.11.1
+4.10.1
@@ -105,19 +105,15 @@ class Messages::Facebook::MessageBuilder < Messages::Messenger::MessageBuilder
  end

  def message_params
-    content_attributes = {
-      in_reply_to_external_id: response.in_reply_to_external_id
-    }
-    content_attributes[:external_echo] = true if @outgoing_echo
-
    {
      account_id: conversation.account_id,
      inbox_id: conversation.inbox_id,
      message_type: @message_type,
-      status: @outgoing_echo ? :delivered : :sent,
      content: response.content,
      source_id: response.identifier,
-      content_attributes: content_attributes,
+      content_attributes: {
+        in_reply_to_external_id: response.in_reply_to_external_id
+      },
      sender: @outgoing_echo ? nil : @contact_inbox.contact
    }
  end
@@ -112,25 +112,6 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
    return if story_reply_attributes.blank?

    @message.save_story_info(story_reply_attributes)
-    create_story_reply_attachment(story_reply_attributes['url'])
-  end
-
-  def create_story_reply_attachment(story_url)
-    return if story_url.blank?
-
-    attachment = @message.attachments.new(
-      file_type: :ig_story,
-      account_id: @message.account_id,
-      external_url: story_url
-    )
-    attachment.save!
-    begin
-      attach_file(attachment, story_url)
-    rescue Down::Error, StandardError => e
-      Rails.logger.warn "Failed to download Instagram story attachment: #{e.message}"
-    end
-    @message.content_attributes[:image_type] = 'ig_story_reply'
-    @message.save!
  end

  def build_conversation
@@ -158,7 +139,6 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
      account_id: conversation.account_id,
      inbox_id: conversation.inbox_id,
      message_type: message_type,
-      status: @outgoing_echo ? :delivered : :sent,
      source_id: message_identifier,
      content: message_content,
      sender: @outgoing_echo ? nil : contact,
@@ -167,7 +147,6 @@ class Messages::Instagram::BaseMessageBuilder < Messages::Messenger::MessageBuil
      }
    }

-    params[:content_attributes][:external_echo] = true if @outgoing_echo
    params[:content_attributes][:is_unsupported] = true if message_is_unsupported?
    params
  end
@@ -1,68 +0,0 @@
-class V2::Reports::FirstResponseTimeDistributionBuilder
-  include DateRangeHelper
-
-  attr_reader :account, :params
-
-  def initialize(account:, params:)
-    @account = account
-    @params = params
-  end
-
-  def build
-    build_distribution
-  end
-
-  private
-
-  def build_distribution
-    results = fetch_aggregated_counts
-    map_to_channel_types(results)
-  end
-
-  def fetch_aggregated_counts
-    ReportingEvent
-      .where(account_id: account.id, name: 'first_response')
-      .where(range_condition)
-      .group(:inbox_id)
-      .select(
-        :inbox_id,
-        bucket_case_statements
-      )
-  end
-
-  def bucket_case_statements
-    <<~SQL.squish
-      COUNT(CASE WHEN value < 3600 THEN 1 END) AS bucket_0_1h,
-      COUNT(CASE WHEN value >= 3600 AND value < 14400 THEN 1 END) AS bucket_1_4h,
-      COUNT(CASE WHEN value >= 14400 AND value < 28800 THEN 1 END) AS bucket_4_8h,
-      COUNT(CASE WHEN value >= 28800 AND value < 86400 THEN 1 END) AS bucket_8_24h,
-      COUNT(CASE WHEN value >= 86400 THEN 1 END) AS bucket_24h_plus
-    SQL
-  end
-
-  def range_condition
-    range.present? ? { created_at: range } : {}
-  end
-
-  def inbox_channel_types
-    @inbox_channel_types ||= account.inboxes.pluck(:id, :channel_type).to_h
-  end
-
-  def map_to_channel_types(results)
-    results.each_with_object({}) do |row, hash|
-      channel_type = inbox_channel_types[row.inbox_id]
-      next unless channel_type
-
-      hash[channel_type] ||= empty_buckets
-      hash[channel_type]['0-1h'] += row.bucket_0_1h
-      hash[channel_type]['1-4h'] += row.bucket_1_4h
-      hash[channel_type]['4-8h'] += row.bucket_4_8h
-      hash[channel_type]['8-24h'] += row.bucket_8_24h
-      hash[channel_type]['24h+'] += row.bucket_24h_plus
-    end
-  end
-
-  def empty_buckets
-    { '0-1h' => 0, '1-4h' => 0, '4-8h' => 0, '8-24h' => 0, '24h+' => 0 }
-  end
-end
@@ -1,65 +0,0 @@
-class V2::Reports::InboxLabelMatrixBuilder
-  include DateRangeHelper
-
-  attr_reader :account, :params
-
-  def initialize(account:, params:)
-    @account = account
-    @params = params
-  end
-
-  def build
-    {
-      inboxes: filtered_inboxes.map { |inbox| { id: inbox.id, name: inbox.name } },
-      labels: filtered_labels.map { |label| { id: label.id, title: label.title } },
-      matrix: build_matrix
-    }
-  end
-
-  private
-
-  def filtered_inboxes
-    @filtered_inboxes ||= begin
-      inboxes = account.inboxes
-      inboxes = inboxes.where(id: params[:inbox_ids]) if params[:inbox_ids].present?
-      inboxes.order(:name).to_a
-    end
-  end
-
-  def filtered_labels
-    @filtered_labels ||= begin
-      labels = account.labels
-      labels = labels.where(id: params[:label_ids]) if params[:label_ids].present?
-      labels.order(:title).to_a
-    end
-  end
-
-  def conversation_filter
-    filter = { account_id: account.id }
-    filter[:created_at] = range if range.present?
-    filter[:inbox_id] = params[:inbox_ids] if params[:inbox_ids].present?
-    filter
-  end
-
-  def fetch_grouped_counts
-    label_names = filtered_labels.map(&:title)
-    return {} if label_names.empty?
-
-    ActsAsTaggableOn::Tagging
-      .joins('INNER JOIN conversations ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
-      .where(taggable_type: 'Conversation', context: 'labels', conversations: conversation_filter)
-      .where(tags: { name: label_names })
-      .group('conversations.inbox_id', 'tags.name')
-      .count
-  end
-
-  def build_matrix
-    counts = fetch_grouped_counts
-    filtered_inboxes.map do |inbox|
-      filtered_labels.map do |label|
-        counts[[inbox.id, label.title]] || 0
-      end
-    end
-  end
-end
@@ -1,79 +0,0 @@
-class V2::Reports::OutgoingMessagesCountBuilder
-  include DateRangeHelper
-  attr_reader :account, :params
-
-  def initialize(account, params)
-    @account = account
-    @params = params
-  end
-
-  def build
-    send("build_by_#{params[:group_by]}")
-  end
-
-  private
-
-  def base_messages
-    account.messages.outgoing.unscope(:order).where(created_at: range)
-  end
-
-  def build_by_agent
-    counts = base_messages
-             .where(sender_type: 'User')
-             .where.not(sender_id: nil)
-             .group(:sender_id)
-             .count
-
-    user_names = account.users.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |user_id, count|
-      user = user_names[user_id]
-      { id: user_id, name: user&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_team
-    counts = base_messages
-             .joins('INNER JOIN conversations ON messages.conversation_id = conversations.id')
-             .where.not(conversations: { team_id: nil })
-             .group('conversations.team_id')
-             .count
-
-    team_names = account.teams.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |team_id, count|
-      team = team_names[team_id]
-      { id: team_id, name: team&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_inbox
-    counts = base_messages
-             .group(:inbox_id)
-             .count
-
-    inbox_names = account.inboxes.where(id: counts.keys).index_by(&:id)
-
-    counts.map do |inbox_id, count|
-      inbox = inbox_names[inbox_id]
-      { id: inbox_id, name: inbox&.name, outgoing_messages_count: count }
-    end
-  end
-
-  def build_by_label
-    counts = base_messages
-             .joins('INNER JOIN conversations ON messages.conversation_id = conversations.id')
-             .joins("INNER JOIN taggings ON taggings.taggable_id = conversations.id
-                     AND taggings.taggable_type = 'Conversation' AND taggings.context = 'labels'")
-             .joins('INNER JOIN tags ON tags.id = taggings.tag_id')
-             .group('tags.name')
-             .count
-
-    label_ids = account.labels.where(title: counts.keys).index_by(&:title)
-
-    counts.map do |label_name, count|
-      label = label_ids[label_name]
-      { id: label&.id, name: label_name, outgoing_messages_count: count }
-    end
-  end
-end
@@ -28,7 +28,8 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
      'name ILIKE :search OR email ILIKE :search OR phone_number ILIKE :search OR contacts.identifier LIKE :search',
      search: "%#{params[:q].strip}%"
    )
-    @contacts = fetch_contacts_with_has_more(contacts)
+    @contacts = fetch_contacts(contacts)
+    @contacts_count = @contacts.total_count
  end

  def import
@@ -141,24 +142,6 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
      .per(RESULTS_PER_PAGE)
  end

-  def fetch_contacts_with_has_more(contacts)
-    includes_hash = { avatar_attachment: [:blob] }
-    includes_hash[:contact_inboxes] = { inbox: :channel } if @include_contact_inboxes
-
-    # Calculate offset manually to fetch one extra record for has_more check
-    offset = (@current_page.to_i - 1) * RESULTS_PER_PAGE
-    results = filtrate(contacts)
-              .includes(includes_hash)
-              .offset(offset)
-              .limit(RESULTS_PER_PAGE + 1)
-              .to_a
-
-    @has_more = results.size > RESULTS_PER_PAGE
-    results = results.first(RESULTS_PER_PAGE) if @has_more
-    @contacts_count = results.size
-    results
-  end
-
  def build_contact_inbox
    return if params[:inbox_id].blank?

@@ -15,7 +15,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

  def meta
-    result = conversation_finder.perform_meta_only
+    result = conversation_finder.perform
    @conversations_count = result[:count]
  end

@@ -70,11 +70,8 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro

  def transcript
    render json: { error: 'email param missing' }, status: :unprocessable_entity and return if params[:email].blank?
-    return render_payment_required('Email transcript is not available on your plan') unless @conversation.account.email_transcript_enabled?
-    return head :too_many_requests unless @conversation.account.within_email_rate_limit?

    ConversationReplyMailer.with(account: @conversation.account).conversation_transcript(@conversation, params[:email])&.deliver_later
-    @conversation.account.increment_email_sent_count
    head :ok
  end

@@ -1,7 +1,6 @@
 class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseController
  before_action :fetch_inbox
  before_action :validate_whatsapp_channel
-  before_action :validate_captain_enabled, only: [:analyze]

  def show
    service = CsatTemplateManagementService.new(@inbox)
@@ -25,23 +24,6 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
    render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
  end

-  def analyze
-    template_params = extract_template_params
-    return render_missing_message_error if template_params[:message].blank?
-
-    result = CsatTemplateUtilityAnalysisService.new(
-      account: Current.account,
-      inbox: @inbox,
-      message: template_params[:message],
-      button_text: template_params[:button_text],
-      language: template_params[:language]
-    ).perform
-
-    render json: result
-  rescue ActionController::ParameterMissing
-    render json: { error: 'Template parameters are required' }, status: :unprocessable_entity
-  end
-
  private

  def fetch_inbox
@@ -64,12 +46,6 @@ class Api::V1::Accounts::InboxCsatTemplatesController < Api::V1::Accounts::BaseC
    render json: { error: 'Message is required' }, status: :unprocessable_entity
  end

-  def validate_captain_enabled
-    return if Current.account.feature_enabled?('captain_integration')
-
-    render json: { error: 'Captain is required for template analysis' }, status: :forbidden
-  end
-
  def render_template_creation_result(result)
    if result[:success]
      render_successful_template_creation(result)
@@ -35,11 +35,12 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController
  end

  def transcript
-    return head :too_many_requests if conversation.blank?
-    return head :payment_required unless conversation.account.email_transcript_enabled?
-    return head :too_many_requests unless conversation.account.within_email_rate_limit?
-
-    send_transcript_email
+    if conversation.present? && conversation.contact.present? && conversation.contact.email.present?
+      ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
+        conversation,
+        conversation.contact.email
+      )&.deliver_later
+    end
    head :ok
  end

@@ -76,16 +77,6 @@ class Api::V1::Widget::ConversationsController < Api::V1::Widget::BaseController

  private

-  def send_transcript_email
-    return if conversation.contact&.email.blank?
-
-    ConversationReplyMailer.with(account: conversation.account).conversation_transcript(
-      conversation,
-      conversation.contact.email
-    )&.deliver_later
-    conversation.account.increment_email_sent_count
-  end
-
  def trigger_typing_event(event)
    Rails.configuration.dispatcher.dispatch(event, Time.zone.now, conversation: conversation, user: @contact)
  end
@@ -62,31 +62,6 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
    render json: bot_metrics
  end

-  def inbox_label_matrix
-    builder = V2::Reports::InboxLabelMatrixBuilder.new(
-      account: Current.account,
-      params: inbox_label_matrix_params
-    )
-    render json: builder.build
-  end
-
-  def first_response_time_distribution
-    builder = V2::Reports::FirstResponseTimeDistributionBuilder.new(
-      account: Current.account,
-      params: first_response_time_distribution_params
-    )
-    render json: builder.build
-  end
-
-  OUTGOING_MESSAGES_ALLOWED_GROUP_BY = %w[agent team inbox label].freeze
-
-  def outgoing_messages_count
-    return head :unprocessable_entity unless OUTGOING_MESSAGES_ALLOWED_GROUP_BY.include?(params[:group_by])
-
-    builder = V2::Reports::OutgoingMessagesCountBuilder.new(Current.account, outgoing_messages_count_params)
-    render json: builder.build
-  end
-
  private

  def generate_csv(filename, template)
@@ -164,28 +139,4 @@ class Api::V2::Accounts::ReportsController < Api::V1::Accounts::BaseController
  def conversation_metrics
    V2::ReportBuilder.new(Current.account, conversation_params).conversation_metrics
  end
-
-  def inbox_label_matrix_params
-    {
-      since: params[:since],
-      until: params[:until],
-      inbox_ids: params[:inbox_ids],
-      label_ids: params[:label_ids]
-    }
-  end
-
-  def first_response_time_distribution_params
-    {
-      since: params[:since],
-      until: params[:until]
-    }
-  end
-
-  def outgoing_messages_count_params
-    {
-      group_by: params[:group_by],
-      since: params[:since],
-      until: params[:until]
-    }
-  end
 end
@@ -6,8 +6,12 @@ class DeviseOverrides::PasswordsController < Devise::PasswordsController

  def create
    @user = User.from_email(params[:email])
-    @user&.send_reset_password_instructions
-    build_response(I18n.t('messages.reset_password'), 200)
+    if @user
+      @user.send_reset_password_instructions
+      build_response(I18n.t('messages.reset_password_success'), 200)
+    else
+      build_response(I18n.t('messages.reset_password_failure'), 404)
+    end
  end

  def update
@@ -1,7 +0,0 @@
-# Inherits from ActionController::Base to skip all middleware,
-# authentication, and callbacks. Used for health checks
-class HealthController < ActionController::Base # rubocop:disable Rails/ApplicationController
-  def show
-    render json: { status: 'woot' }
-  end
-end
@@ -42,11 +42,11 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
      'facebook' => %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT],
      'shopify' => %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET],
      'microsoft' => %w[AZURE_APP_ID AZURE_APP_SECRET],
-      'email' => %w[MAILER_INBOUND_EMAIL_DOMAIN ACCOUNT_EMAILS_LIMIT ACCOUNT_EMAILS_PLAN_LIMITS],
+      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
-      'tiktok' => %w[TIKTOK_APP_ID TIKTOK_APP_SECRET TIKTOK_API_VERSION],
+      'tiktok' => %w[TIKTOK_APP_ID TIKTOK_APP_SECRET],
      'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI ENABLE_GOOGLE_OAUTH_LOGIN],
@@ -55,7 +55,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController

    @allowed_configs = mapping.fetch(
      @config,
-      %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE WIDGET_TOKEN_EXPIRY]
+      %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS WEBHOOK_TIMEOUT MAXIMUM_FILE_UPLOAD_SIZE]
    )
  end
 end
@@ -1,35 +0,0 @@
-class Webhooks::ShopifyController < ActionController::API
-  before_action :verify_hmac!
-
-  def events
-    case request.headers['X-Shopify-Topic']
-    when 'shop/redact'
-      handle_shop_redact
-    end
-
-    head :ok
-  end
-
-  private
-
-  def verify_hmac!
-    secret = GlobalConfigService.load('SHOPIFY_CLIENT_SECRET', nil)
-    return head :unauthorized if secret.blank?
-
-    data = request.body.read
-    request.body.rewind
-
-    hmac_header = request.headers['X-Shopify-Hmac-SHA256']
-    return head :unauthorized if hmac_header.blank?
-
-    computed = Base64.strict_encode64(OpenSSL::HMAC.digest('SHA256', secret, data))
-    return head :unauthorized unless ActiveSupport::SecurityUtils.secure_compare(computed, hmac_header)
-  end
-
-  def handle_shop_redact
-    shop_domain = params[:shop_domain]
-    return if shop_domain.blank?
-
-    Integrations::Hook.where(app_id: 'shopify', reference_id: shop_domain).destroy_all
-  end
-end
@@ -11,7 +11,6 @@ class ConversationFinder
    'priority_desc' => %w[sort_on_priority desc],
    'waiting_since_asc' => %w[sort_on_waiting_since asc],
    'waiting_since_desc' => %w[sort_on_waiting_since desc],
-    'priority_desc_created_at_asc' => %w[sort_on_priority_created_at desc],

    # To be removed in v3.5.0
    'latest' => %w[sort_on_last_activity_at desc],
@@ -56,22 +55,6 @@ class ConversationFinder
    }
  end

-  def perform_meta_only
-    set_up
-
-    mine_count, unassigned_count, all_count, = set_count_for_all_conversations
-    assigned_count = all_count - unassigned_count
-
-    {
-      count: {
-        mine_count: mine_count,
-        assigned_count: assigned_count,
-        unassigned_count: unassigned_count,
-        all_count: all_count
-      }
-    }
-  end
-
  private

  def set_up
@@ -57,35 +57,39 @@ module Api::V1::InboxesHelper
  end

  def check_smtp_connection(channel_data, smtp)
-    smtp.open_timeout = 10
    smtp.start(channel_data[:smtp_domain], channel_data[:smtp_login], channel_data[:smtp_password],
               channel_data[:smtp_authentication]&.to_sym || :login)
    smtp.finish
-  rescue Net::SMTPAuthenticationError
-    raise StandardError, I18n.t('errors.inboxes.smtp.authentication_error')
-  rescue SocketError, Errno::ECONNREFUSED, Errno::EHOSTUNREACH, Errno::ENETUNREACH, Net::OpenTimeout
-    raise StandardError, I18n.t('errors.inboxes.smtp.connection_error')
-  rescue OpenSSL::SSL::SSLError
-    raise StandardError, I18n.t('errors.inboxes.smtp.ssl_error')
-  rescue Net::SMTPServerBusy, Net::SMTPSyntaxError, Net::SMTPFatalError
-    raise StandardError, I18n.t('errors.inboxes.smtp.smtp_error')
-  rescue StandardError => e
-    raise StandardError, e.message
  end

  def set_smtp_encryption(channel_data, smtp)
    if channel_data[:smtp_enable_ssl_tls]
-      set_smtp_ssl_method(smtp, :enable_tls, channel_data[:smtp_openssl_verify_mode])
+      set_enable_tls(channel_data, smtp)
    elsif channel_data[:smtp_enable_starttls_auto]
-      set_smtp_ssl_method(smtp, :enable_starttls_auto, channel_data[:smtp_openssl_verify_mode])
+      set_enable_starttls_auto(channel_data, smtp)
    end
  end

-  def set_smtp_ssl_method(smtp, method, openssl_verify_mode)
-    return unless smtp.respond_to?(method)
+  def set_enable_starttls_auto(channel_data, smtp)
+    return unless smtp.respond_to?(:enable_starttls_auto)

-    context = enable_openssl_mode(openssl_verify_mode) if openssl_verify_mode
-    context ? smtp.send(method, context) : smtp.send(method)
+    if channel_data[:smtp_openssl_verify_mode]
+      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
+      smtp.enable_starttls_auto(context)
+    else
+      smtp.enable_starttls_auto
+    end
+  end
+
+  def set_enable_tls(channel_data, smtp)
+    return unless smtp.respond_to?(:enable_tls)
+
+    if channel_data[:smtp_openssl_verify_mode]
+      context = enable_openssl_mode(channel_data[:smtp_openssl_verify_mode])
+      smtp.enable_tls(context)
+    else
+      smtp.enable_tls
+    end
  end

  def enable_openssl_mode(smtp_openssl_verify_mode)
@@ -131,7 +131,7 @@ export default {
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
-    class="flex flex-col w-full h-screen min-h-0 bg-n-background"
+    class="flex flex-col w-full h-screen min-h-0"
    :dir="isRTL ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
@@ -164,4 +164,10 @@ export default {
 .v-popper--theme-tooltip .v-popper__arrow-container {
  display: none;
 }
+
+.multiselect__input {
+  margin-bottom: 0px !important;
+}
 </style>
+
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>
@@ -1,40 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainWorkflows extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId, page = 1 } = {}) {
-    return axios.get(`${this.url}/${assistantId}/workflows`, {
-      params: { page },
-    });
-  }
-
-  show({ assistantId, id }) {
-    return axios.get(`${this.url}/${assistantId}/workflows/${id}`);
-  }
-
-  create({ assistantId, ...data } = {}) {
-    return axios.post(`${this.url}/${assistantId}/workflows`, {
-      workflow: data,
-    });
-  }
-
-  update({ assistantId, id }, data = {}) {
-    return axios.put(`${this.url}/${assistantId}/workflows/${id}`, {
-      workflow: data,
-    });
-  }
-
-  delete({ assistantId, id }) {
-    return axios.delete(`${this.url}/${assistantId}/workflows/${id}`);
-  }
-
-  executions({ assistantId, id }) {
-    return axios.get(`${this.url}/${assistantId}/workflows/${id}/executions`);
-  }
-}
-
-export default new CaptainWorkflows();
@@ -42,12 +42,6 @@ class Inboxes extends CacheEnabledApiClient {
  getCSATTemplateStatus(inboxId) {
    return axios.get(`${this.url}/${inboxId}/csat_template`);
  }
-
-  analyzeCSATTemplateUtility(inboxId, template) {
-    return axios.post(`${this.url}/${inboxId}/csat_template/analyze`, {
-      template,
-    });
-  }
 }

 export default new Inboxes();
@@ -66,7 +66,7 @@ textarea {
 // Field base styles (Input, TextArea, Select)
@layer components {
  .field-base {
-    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-sm font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
+    @apply block box-border w-full transition-colors duration-[0.25s] ease-[ease-in-out] focus:outline-n-brand dark:focus:outline-n-brand appearance-none mx-0 mt-0 mb-4 py-2 px-3 rounded-lg text-base font-normal bg-n-alpha-black2 placeholder:text-n-slate-10 dark:placeholder:text-n-slate-10 text-n-slate-12 border-none outline outline-1 outline-n-weak dark:outline-n-weak hover:outline-n-slate-6 dark:hover:outline-n-slate-6;
  }

  .field-disabled {
@@ -78,7 +78,7 @@ textarea {
  }
 }

-$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.no-margin)";
+$form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not([type='radio']):not([type='range']):not([type='button']):not([type='submit']):not([type='reset']):not([type='color']):not([type='image']):not([type='hidden']):not(.reset-base):not(.multiselect__input):not(.no-margin)";

 #{$form-input-selector} {
  @apply field-base h-10;
@@ -92,7 +92,7 @@ $form-input-selector: "input[type]:not([type='file']):not([type='checkbox']):not
  }
 }

-input[type='file'] {
+input[type='file']:not(.multiselect__input) {
  @apply leading-[1.15] mb-4 border-0 bg-transparent text-sm;
 }

@@ -126,6 +126,13 @@ label:has(.help-text) {
  }
 }

+// Error handling
+.has-multi-select-error {
+  div.multiselect {
+    @apply mb-1;
+  }
+}
+
 // FormKit support
 .formkit-outer[data-invalid='true'] {
  #{$form-input-selector},
@@ -143,7 +150,9 @@ label:has(.help-text) {
  #{$form-input-selector},
  input:not([type]),
  textarea,
-  select {
+  select,
+  .multiselect > .multiselect__tags,
+  .multiselect:not(.no-margin) {
    @apply field-error;
  }

@@ -107,39 +107,21 @@
    --violet-11: 101 85 183;
    --violet-12: 47 38 95;

-    --background-color: 247 247 247;
-    --surface-1: 254 254 254;
-    --surface-2: 255 255 255;
-    --surface-active: 255 255 255;
-    --background-input-box: 0, 0, 0, 0.03;
-    --text-blue: 1 22 44;
-    --text-purple: 2 4 49;
-    --text-amber: 37 24 1;
+    --background-color: 253 253 253;
+    --text-blue: 8 109 224;
    --border-container: 236 236 236;
-    --border-strong: 226 227 231;
+    --border-strong: 235 235 235;
    --border-weak: 234 234 234;
-    --border-blue-strong: 18 61 117;
    --solid-1: 255 255 255;
    --solid-2: 255 255 255;
    --solid-3: 255 255 255;
    --solid-active: 255 255 255;
-    --solid-amber: 255 228 181;
+    --solid-amber: 252 232 193;
    --solid-blue: 218 236 255;
-    --solid-blue-2: 251 253 255;
    --solid-iris: 230 231 255;
-    --solid-purple: 230 231 255;
-    --solid-red: 254 200 201;
-    --solid-amber-button: 255 221 141;
-    --card-color: 255 255 255;
-    --overlay: 0, 0, 0, 0.12;
-    --overlay-avatar: 255, 255, 255, 0.67;
-    --button-color: 255 255 255;
-    --button-hover-color: 255, 255, 255, 0.2;
-    --label-background: 247 247 247;
-    --label-border: 0, 0, 0, 0.04;

-    --alpha-1: 215, 215, 215, 0.22;
-    --alpha-2: 196, 197, 198, 0.22;
+    --alpha-1: 67, 67, 67, 0.06;
+    --alpha-2: 201, 202, 207, 0.15;
    --alpha-3: 255, 255, 255, 0.96;
    --black-alpha-1: 0, 0, 0, 0.12;
    --black-alpha-2: 0, 0, 0, 0.04;
@@ -253,43 +235,25 @@
    --violet-11: 169 153 236;
    --violet-12: 226 221 254;

-    --background-color: 28 29 32;
-    --surface-1: 20 21 23;
-    --surface-2: 22 23 26;
-    --surface-active: 53 57 66;
-    --background-input-box: 255, 255, 255, 0.02;
-    --text-blue: 213 234 255;
-    --text-purple: 232 233 254;
-    --text-amber: 255 247 234;
-    --border-strong: 46 45 50;
-    --border-weak: 31 31 37;
-    --border-blue-strong: 201 226 255;
+    --background-color: 18 18 19;
+    --border-strong: 52 52 52;
+    --border-weak: 38 38 42;
    --solid-1: 23 23 26;
    --solid-2: 29 30 36;
    --solid-3: 44 45 54;
    --solid-active: 53 57 66;
-    --solid-amber: 56 50 41;
-    --solid-blue: 15 57 102;
-    --solid-blue-2: 26 29 35;
+    --solid-amber: 42 37 30;
+    --solid-blue: 16 49 91;
    --solid-iris: 38 42 101;
-    --solid-purple: 51 51 107;
-    --solid-red: 90 33 34;
-    --solid-amber-button: 255 221 141;
-    --card-color: 28 30 34;
-    --overlay: 0, 0, 0, 0.4;
-    --overlay-avatar: 0, 0, 0, 0.05;
-    --button-color: 42 43 51;
-    --button-hover-color: 0, 0, 0, 0.15;
-    --label-background: 36 38 45;
-    --label-border: 255, 255, 255, 0.03;
+    --text-blue: 126 182 255;

-    --alpha-1: 35, 36, 42, 0.8;
-    --alpha-2: 147, 153, 176, 0.12;
-    --alpha-3: 33, 34, 38, 0.95;
+    --alpha-1: 36, 36, 36, 0.8;
+    --alpha-2: 139, 147, 182, 0.15;
+    --alpha-3: 36, 38, 45, 0.9;
    --black-alpha-1: 0, 0, 0, 0.3;
    --black-alpha-2: 0, 0, 0, 0.2;
    --border-blue: 39, 129, 246, 0.5;
-    --border-container: 255, 255, 255, 0;
+    --border-container: 236, 236, 236, 0;
    --white-alpha: 255, 255, 255, 0.1;
  }
 }
@@ -13,6 +13,7 @@
@import 'base';

 // Plugins
+@import 'plugins/multiselect';
@import 'plugins/date-picker';

 html,
@@ -65,84 +66,4 @@ body {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
-
-  /**
-   * ============================================================================
-   * TYPOGRAPHY UTILITIES
-   * ============================================================================
-   *
-   * | Class              | Use Case                                           |
-   * |--------------------|----------------------------------------------------|
-   * | .text-body-main    | <p>, <span>, general body text                     |
-   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
-   * | .text-heading-1    | <h1>, page titles, panel headers                   |
-   * | .text-heading-2    | <h2>, section headings, card titles                |
-   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
-   * | .text-label        | <label>, form labels, field names                  |
-   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
-   * | .text-button       | <button>, standard button text                     |
-   * | .text-button-small | <button>, small/compact button text                |
-   */
-
-  /* body-text-main: Main text style for general body text */
-  .text-body-main {
-    @apply font-inter text-sm font-420;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.28px;
-  }
-
-  /* body-text-paragraph: For paragraphs or larger blocks of text */
-  .text-body-para {
-    @apply font-inter text-sm font-420;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.21px;
-  }
-
-  /* heading-1: Large heading for pages and panels */
-  .text-heading-1 {
-    @apply font-inter text-lg font-520;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: -0.27px;
-  }
-
-  /* heading-2: Secondary heading for sections */
-  .text-heading-2 {
-    @apply font-inter text-base font-medium;
-    line-height: 24px; /* 133.333% */
-    letter-spacing: -0.27px;
-  }
-
-  /* heading-3: For card headings, breadcrumbs, subsections */
-  .text-heading-3 {
-    @apply font-inter text-sm font-medium;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.27px;
-  }
-
-  /* label: Standard label text for form fields */
-  .text-label {
-    @apply font-inter text-sm font-medium;
-    line-height: 21px; /* 150% */
-  }
-
-  /* label-small: Smallest font for labels, footnotes, tags */
-  .text-label-small {
-    @apply font-inter text-xs font-440;
-    line-height: 16px; /* 133.333% */
-    letter-spacing: -0.24px;
-  }
-
-  /* button-text: Text for standard size buttons */
-  .text-button {
-    @apply font-inter text-sm font-460;
-    line-height: 21px; /* 150% */
-    letter-spacing: -0.28px;
-  }
-
-  /* button-text-small: Text for smaller buttons */
-  .text-button-small {
-    @apply font-inter text-xs font-440;
-    line-height: 18px; /* 150% */
-    letter-spacing: -0.24px;
-  }
 }
@@ -0,0 +1,273 @@
+@mixin label-multiselect-hover {
+  &::after {
+    @apply text-n-brand;
+  }
+
+  &:hover {
+    @apply bg-n-slate-3;
+
+    &::after {
+      @apply text-n-blue-text;
+    }
+  }
+}
+
+.multiselect {
+  &:not(.no-margin) {
+    @apply mb-4;
+  }
+
+  &.invalid .multiselect__tags {
+    @apply border-0 outline outline-1 outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9 disabled:outline-n-ruby-8 dark:disabled:outline-n-ruby-8;
+  }
+
+  &.multiselect--disabled {
+    @apply opacity-50  rounded-lg cursor-not-allowed pointer-events-auto;
+
+    .multiselect__select {
+      @apply cursor-not-allowed bg-transparent rounded-lg;
+    }
+  }
+
+  .multiselect--active {
+    > .multiselect__tags {
+      @apply outline-n-blue-border;
+    }
+  }
+
+  .multiselect__select {
+    @apply min-h-[2.875rem] p-0 right-0 top-0;
+
+    &::before {
+      @apply right-0;
+    }
+  }
+
+  .multiselect__content-wrapper {
+    @apply bg-n-alpha-black2 text-n-slate-12 backdrop-blur-[100px] border-0 border-none outline outline-1 outline-n-weak rounded-b-lg;
+  }
+
+  .multiselect__content {
+    @apply max-w-full;
+
+    .multiselect__option {
+      @apply text-sm font-normal flex justify-between items-center;
+
+      span {
+        @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
+      }
+
+      p {
+        @apply mb-0;
+      }
+
+      &::after {
+        @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight;
+      }
+
+      &.multiselect__option--highlight {
+        @apply bg-n-alpha-black2 text-n-slate-12;
+      }
+
+      &.multiselect__option--highlight:hover {
+        @apply bg-n-brand/10 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent text-center text-n-slate-12;
+        }
+      }
+
+      &.multiselect__option--highlight::after {
+        @apply bg-transparent text-n-slate-12;
+      }
+
+      &.multiselect__option--selected {
+        @apply bg-n-brand/20 text-n-slate-12;
+
+        &::after {
+          @apply bg-transparent;
+        }
+
+        &.multiselect__option--highlight:hover {
+          @apply bg-transparent;
+
+          &::after:hover {
+            @apply text-n-slate-12 bg-transparent;
+          }
+        }
+      }
+    }
+  }
+
+  .multiselect__tags {
+    @apply bg-n-alpha-black2 border-0 grid items-center w-full border-none outline-1 outline outline-n-weak hover:outline-n-slate-6 m-0 min-h-[2.875rem] rounded-lg pt-0;
+
+    input {
+      @apply border-0 border-none bg-transparent dark:bg-transparent text-n-slate-12 placeholder:text-n-slate-10;
+    }
+  }
+
+  .multiselect__spinner {
+    background-color: transparent;
+  }
+
+  .multiselect__tags-wrap {
+    @apply inline-block leading-none mt-1;
+  }
+
+  .multiselect__placeholder {
+    @apply text-n-slate-10 font-normal pt-3;
+  }
+
+  .multiselect__tag {
+    @apply bg-n-alpha-white mt-1 text-n-slate-12 pr-6 pl-2.5 py-1.5;
+  }
+
+  .multiselect__tag-icon {
+    @include label-multiselect-hover;
+  }
+
+  .multiselect__input {
+    @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none;
+  }
+
+  .multiselect__single {
+    @apply bg-transparent text-n-slate-12 inline-block mb-0 py-3 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis;
+  }
+}
+
+.sidebar-labels-wrap {
+  &.has-edited,
+  &:hover {
+    .multiselect {
+      @apply cursor-pointer;
+    }
+  }
+
+  .multiselect {
+    > .multiselect__select {
+      @apply invisible;
+    }
+
+    > .multiselect__tags {
+      @apply outline-transparent;
+    }
+
+    &.multiselect--active > .multiselect__tags {
+      @apply outline-n-blue-border;
+    }
+  }
+}
+
+.multiselect-wrap--small {
+  // To be removed one SLA reports date picker is created
+  &.tiny {
+    .multiselect.no-margin {
+      @apply min-h-[32px];
+    }
+
+    .multiselect__select {
+      @apply min-h-[32px] h-8;
+
+      &::before {
+        @apply top-[60%];
+      }
+    }
+
+    .multiselect__tags {
+      @apply min-h-[32px] max-h-[32px];
+
+      .multiselect__single {
+        @apply pt-1 pb-1;
+      }
+    }
+  }
+
+  .multiselect__tags,
+  .multiselect__input,
+  .multiselect {
+    @apply text-n-slate-12 rounded-lg text-sm  min-h-[2.5rem];
+  }
+
+  .multiselect__input {
+    @apply h-[2.375rem] min-h-[2.375rem];
+  }
+
+  .multiselect__single {
+    @apply items-center flex m-0 text-sm max-h-[2.375rem] bg-transparent text-n-slate-12 py-3 px-0.5;
+  }
+
+  .multiselect__placeholder {
+    @apply m-0 py-2 px-0.5;
+  }
+
+  .multiselect__tag {
+    @apply py-[6px] my-[1px];
+  }
+
+  .multiselect__select {
+    @apply min-h-[2.5rem];
+  }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    @apply bg-transparent;
+  }
+}
+
+.multiselect--disabled {
+  background-color: rgba(var(--black-alpha-2)) !important;
+
+  .multiselect__tags {
+    @apply hover:outline-n-weak;
+  }
+}
+
+.multiselect--active {
+  .multiselect__select::before {
+    @apply top-[62%];
+  }
+}
+
+.multiselect__select::before {
+  top: 60% !important;
+}
+
+.multiselect-wrap--medium {
+  .multiselect__tags,
+  .multiselect__input {
+    @apply items-center flex;
+  }
+
+  .multiselect__tags,
+  .multiselect__input,
+  .multiselect {
+    @apply bg-n-alpha-black2 text-n-slate-12 text-sm h-12 min-h-[3rem];
+  }
+
+  .multiselect__input {
+    @apply h-[2.875rem] min-h-[2.875rem];
+    margin-bottom: 0 !important;
+  }
+
+  .multiselect__single {
+    @apply items-center flex m-0 text-sm py-1 px-0.5 bg-transparent text-n-slate-12;
+  }
+
+  .multiselect__placeholder {
+    @apply m-0 py-1 px-0.5;
+  }
+
+  .multiselect__select {
+    @apply min-h-[3rem];
+  }
+
+  .multiselect--disabled .multiselect__current,
+  .multiselect--disabled .multiselect__select {
+    @apply bg-transparent;
+  }
+
+  .multiselect__tags-wrap {
+    @apply flex-shrink-0;
+  }
+}
@@ -49,7 +49,7 @@ const handleFetchUsers = () => {
    <div class="flex flex-col gap-2 relative justify-between w-full">
      <div class="flex items-center gap-3 justify-between w-full">
        <div class="flex items-center gap-3">
-          <h3 class="text-heading-2 text-n-slate-12 line-clamp-1">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
            {{ name }}
          </h3>
          <CardPopover
@@ -78,7 +78,7 @@ const handleFetchUsers = () => {
          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
        </div>
      </div>
-      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
        {{ description }}
      </p>
    </div>
@@ -20,7 +20,7 @@ const handleClick = () => {
  <CardLayout class="[&>div]:px-5 cursor-pointer" @click="handleClick">
    <div class="flex flex-col items-start gap-2">
      <div class="flex justify-between w-full items-center">
-        <h3 class="text-n-slate-12 text-heading-2">{{ title }}</h3>
+        <h3 class="text-n-slate-12 text-base font-medium">{{ title }}</h3>
        <Button
          xs
          slate
@@ -29,14 +29,14 @@ const handleClick = () => {
          @click.stop="handleClick"
        />
      </div>
-      <p class="text-n-slate-11 text-body-para mb-0">{{ description }}</p>
+      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
    </div>

    <ul class="flex flex-col items-start gap-3 mt-3">
      <li
        v-for="feature in features"
        :key="feature.id"
-        class="flex items-center gap-3 text-body-para"
+        class="flex items-center gap-3 text-sm"
      >
        <Icon
          :icon="feature.icon"
@@ -39,6 +39,7 @@ const policyA = withCount({
  description: 'Distributes conversations evenly among available agents',
  assignmentOrder: 'round_robin',
  conversationPriority: 'high',
+  enabled: true,
  inboxes: [mockInboxes[0], mockInboxes[1]],
  isFetchingInboxes: false,
 });
@@ -49,6 +50,7 @@ const policyB = withCount({
  description: 'Assigns based on capacity and workload',
  assignmentOrder: 'capacity_based',
  conversationPriority: 'medium',
+  enabled: true,
  inboxes: [mockInboxes[2], mockInboxes[3]],
  isFetchingInboxes: false,
 });
@@ -59,6 +61,7 @@ const emptyPolicy = withCount({
  description: 'Policy with no assigned inboxes',
  assignmentOrder: 'manual',
  conversationPriority: 'low',
+  enabled: false,
  inboxes: [],
  isFetchingInboxes: false,
 });
@@ -15,6 +15,7 @@ const props = defineProps({
  assignmentOrder: { type: String, default: '' },
  conversationPriority: { type: String, default: '' },
  assignedInboxCount: { type: Number, default: 0 },
+  enabled: { type: Boolean, default: false },
  inboxes: { type: Array, default: () => [] },
  isFetchingInboxes: { type: Boolean, default: false },
 });
@@ -60,19 +61,39 @@ const handleFetchInboxes = () => {
    <div class="flex flex-col gap-2 relative justify-between w-full">
      <div class="flex items-center gap-3 justify-between w-full">
        <div class="flex items-center gap-3">
-          <h3 class="text-heading-2 text-n-slate-12 line-clamp-1">
+          <h3 class="text-base font-medium text-n-slate-12 line-clamp-1">
            {{ name }}
          </h3>
-          <CardPopover
-            :title="
-              t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER')
-            "
-            icon="i-lucide-inbox"
-            :count="assignedInboxCount"
-            :items="inboxes"
-            :is-fetching="isFetchingInboxes"
-            @fetch="handleFetchInboxes"
-          />
+          <div class="flex items-center gap-2">
+            <div class="flex items-center rounded-md bg-n-alpha-2 h-6 px-2">
+              <span
+                class="text-xs"
+                :class="enabled ? 'text-n-teal-11' : 'text-n-slate-12'"
+              >
+                {{
+                  enabled
+                    ? t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ACTIVE'
+                      )
+                    : t(
+                        'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.INACTIVE'
+                      )
+                }}
+              </span>
+            </div>
+            <CardPopover
+              :title="
+                t(
+                  'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.POPOVER'
+                )
+              "
+              icon="i-lucide-inbox"
+              :count="assignedInboxCount"
+              :items="inboxes"
+              :is-fetching="isFetchingInboxes"
+              @fetch="handleFetchInboxes"
+            />
+          </div>
        </div>
        <div class="flex items-center gap-2">
          <Button
@@ -89,18 +110,18 @@ const handleFetchInboxes = () => {
          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
        </div>
      </div>
-      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
        {{ description }}
      </p>
      <div class="flex items-center gap-3 py-1.5">
-        <span v-if="order" class="text-n-slate-11 text-body-para">
+        <span v-if="order" class="text-n-slate-11 text-sm">
          {{
            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
          }}
          <span class="text-n-slate-12">{{ order }}</span>
        </span>
        <div v-if="order" class="w-px h-3 bg-n-strong" />
-        <span v-if="priority" class="text-n-slate-11 text-body-para">
+        <span v-if="priority" class="text-n-slate-11 text-sm">
          {{
            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
          }}
@@ -19,15 +19,11 @@ defineProps({
  },
 });

-const emit = defineEmits(['delete', 'navigate']);
+const emit = defineEmits(['delete']);

 const handleDelete = itemId => {
  emit('delete', itemId);
 };
-
-const handleNavigate = item => {
-  emit('navigate', item);
-};
 </script>

 <template>
@@ -51,11 +47,7 @@ const handleNavigate = item => {
      :key="item.id"
      class="grid grid-cols-4 items-center gap-3 min-w-0 w-full justify-between h-[3.25rem] ltr:pr-2 rtl:pl-2"
    >
-      <button
-        type="button"
-        class="flex items-center gap-2 col-span-2 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 rounded-lg py-1 px-1.5 -ml-1.5 transition-colors cursor-pointer group"
-        @click="handleNavigate(item)"
-      >
+      <div class="flex items-center gap-2 col-span-2">
        <Icon
          v-if="item.icon"
          :icon="item.icon"
@@ -69,16 +61,10 @@ const handleNavigate = item => {
          :size="20"
          rounded-full
        />
-        <span
-          class="text-sm text-n-slate-12 truncate min-w-0 group-hover:text-n-blue-11 dark:group-hover:text-n-blue-10 transition-colors"
-        >
+        <span class="text-sm text-n-slate-12 truncate min-w-0">
          {{ item.name }}
        </span>
-        <Icon
-          icon="i-lucide-external-link"
-          class="size-3.5 text-n-slate-10 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
-        />
-      </button>
+      </div>

      <div class="flex items-start gap-2 col-span-1">
        <span
@@ -2,7 +2,7 @@
 import { computed, ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import AddDataDropdown from 'dashboard/components-next/AssignmentPolicy/components/AddDataDropdown.vue';
-import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
 import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
 import { DURATION_UNITS } from 'dashboard/components-next/input/constants';

@@ -119,7 +119,7 @@ onMounted(() => {
            )
          "
          :items="filteredTags"
-          class="[&>button]:!text-n-blue-11 [&>div]:min-w-64"
+          class="[&>button]:!text-n-blue-text [&>div]:min-w-64"
          @add="onClickAddTag"
        />
      </div>
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, onMounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Input from 'dashboard/components-next/input/Input.vue';
 import DurationInput from 'dashboard/components-next/input/DurationInput.vue';
@@ -15,9 +15,6 @@ const fairDistributionLimit = defineModel('fairDistributionLimit', {
  },
 });

-// The model value is in seconds (for the backend/DB)
-// DurationInput works in minutes internally
-// We need to convert between seconds and minutes
 const fairDistributionWindow = defineModel('fairDistributionWindow', {
  type: Number,
  default: 3600,
@@ -28,17 +25,6 @@ const fairDistributionWindow = defineModel('fairDistributionWindow', {

 const windowUnit = ref(DURATION_UNITS.MINUTES);

-// Convert seconds to minutes for DurationInput
-const windowInMinutes = computed({
-  get() {
-    return Math.floor((fairDistributionWindow.value || 0) / 60);
-  },
-  set(minutes) {
-    fairDistributionWindow.value = minutes * 60;
-  },
-});
-
-// Detect unit based on minutes (converted from seconds)
 const detectUnit = minutes => {
  const m = Number(minutes) || 0;
  if (m === 0) return DURATION_UNITS.MINUTES;
@@ -48,7 +34,7 @@ const detectUnit = minutes => {
 };

 onMounted(() => {
-  windowUnit.value = detectUnit(windowInMinutes.value);
+  windowUnit.value = detectUnit(fairDistributionWindow.value);
 });
 </script>

@@ -87,9 +73,9 @@ onMounted(() => {
      <div
        class="flex items-center gap-2 flex-1 [&>select]:!bg-n-alpha-2 [&>select]:!outline-none [&>select]:hover:brightness-110"
      >
-        <!-- allow 10 mins to 999 days (in minutes) -->
+        <!-- allow 10 mins to 999 days -->
        <DurationInput
-          v-model:model-value="windowInMinutes"
+          v-model:model-value="fairDistributionWindow"
          v-model:unit="windowUnit"
          :min="10"
          :max="1438560"
@@ -0,0 +1,60 @@
+<script setup>
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    required: true,
+  },
+  isActive: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const handleChange = () => {
+  if (!props.isActive) {
+    emit('select', props.id);
+  }
+};
+</script>
+
+<template>
+  <div
+    class="relative cursor-pointer rounded-xl outline outline-1 p-4 transition-all duration-200 bg-n-solid-1 py-4 ltr:pl-4 rtl:pr-4 ltr:pr-6 rtl:pl-6"
+    :class="[
+      isActive ? 'outline-n-blue-9' : 'outline-n-weak hover:outline-n-strong',
+    ]"
+    @click="handleChange"
+  >
+    <div class="absolute top-4 right-4">
+      <input
+        :id="`${id}`"
+        :checked="isActive"
+        :value="id"
+        :name="id"
+        type="radio"
+        class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0"
+        @change="handleChange"
+      />
+    </div>
+
+    <!-- Content -->
+    <div class="flex flex-col gap-3 items-start">
+      <h3 class="text-sm font-medium text-n-slate-12">
+        {{ label }}
+      </h3>
+      <p class="text-sm text-n-slate-11">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>
@@ -6,6 +6,7 @@ const policyName = ref('Round Robin Policy');
 const description = ref(
  'Distributes conversations evenly among available agents'
 );
+const enabled = ref(true);
 </script>

 <template>
@@ -18,10 +19,13 @@ const description = ref(
        <BaseInfo
          v-model:policy-name="policyName"
          v-model:description="description"
+          v-model:enabled="enabled"
          name-label="Policy Name"
          name-placeholder="Enter policy name"
          description-label="Description"
          description-placeholder="Enter policy description"
+          status-label="Status"
+          status-placeholder="Active"
        />
      </div>
    </Variant>
@@ -1,6 +1,6 @@
 <script setup>
 import { ref } from 'vue';
-import RadioCard from './RadioCard.vue';
+import RadioCard from '../RadioCard.vue';

 const selectedOption = ref('round_robin');

@@ -20,11 +20,11 @@ const handleButtonClick = () => {
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-5xl mx-auto">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto">
        <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-heading-1 text-n-slate-12">
+          <span class="text-xl font-medium text-n-slate-12">
            {{ headerTitle }}
          </span>
          <div
@@ -43,8 +43,8 @@ const handleButtonClick = () => {
        </div>
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl mx-auto py-4">
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto py-4">
        <slot name="default" />
      </div>
    </main>
@@ -306,7 +306,7 @@ defineExpose({ prepareCampaignDetails, isSubmitDisabled });
        variant="faded"
        color="slate"
        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -174,7 +174,7 @@ const handleSubmit = async () => {
        color="slate"
        type="button"
        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -251,7 +251,7 @@ watch(
        color="slate"
        type="button"
        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -19,7 +19,7 @@ const handleClick = () => {

 <template>
  <div
-    class="flex flex-col w-full outline-1 outline outline-n-container -outline-offset-1 group/cardLayout rounded-xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
  >
    <div
      class="flex w-full gap-3 py-5"
@@ -15,11 +15,11 @@ const emit = defineEmits(['search', 'update:sort']);
 </script>

 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-10">
    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
+      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
    >
-      <span class="text-heading-1 truncate text-n-slate-12">
+      <span class="text-xl font-medium truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
      <div class="flex items-center flex-row flex-shrink-0 gap-2">
@@ -21,7 +21,7 @@ const updateCurrentPage = page => {

 <template>
  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
  >
    <div class="flex flex-col w-full h-full transition-all duration-300">
      <CompanyHeader
@@ -32,18 +32,17 @@ const updateCurrentPage = page => {
        @search="emit('search', $event)"
        @update:sort="emit('update:sort', $event)"
      />
-      <main class="flex-1 px-6 overflow-y-auto">
-        <div class="w-full mx-auto max-w-5xl py-4">
+      <main class="flex-1 overflow-y-auto">
+        <div class="w-full mx-auto max-w-[60rem]">
          <slot name="default" />
        </div>
      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
        <PaginationFooter
          current-page-info="COMPANIES_LAYOUT.PAGINATION_FOOTER.SHOWING"
          :current-page="currentPage"
          :total-items="totalItems"
          :items-per-page="25"
-          class="max-w-[67rem]"
          @update:current-page="updateCurrentPage"
        />
      </footer>
@@ -3,8 +3,8 @@ import { computed, watch, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';

-import LabelItem from 'dashboard/components-next/label/LabelItem.vue';
-import AddLabel from 'dashboard/components-next/label/AddLabel.vue';
+import LabelItem from 'dashboard/components-next/Label/LabelItem.vue';
+import AddLabel from 'dashboard/components-next/Label/AddLabel.vue';

 const props = defineProps({
  contactId: {
@@ -73,7 +73,7 @@ const closeMobileSidebar = () => {

 <template>
  <section
-    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-background"
  >
    <div
      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
@@ -73,7 +73,7 @@ defineExpose({ dialogRef });
          target="_blank"
          rel="noopener noreferrer"
          download="import-contacts-sample.csv"
-          class="text-n-blue-11"
+          class="text-n-blue-text"
        >
          {{
            t('CONTACTS_LAYOUT.HEADER.ACTIONS.IMPORT_CONTACT.DOWNLOAD_LABEL')
@@ -44,7 +44,6 @@ const SOCIAL_CONFIG = {
  LINKEDIN: 'i-ri-linkedin-box-fill',
  FACEBOOK: 'i-ri-facebook-circle-fill',
  INSTAGRAM: 'i-ri-instagram-line',
-  TELEGRAM: 'i-ri-telegram-fill',
  TIKTOK: 'i-ri-tiktok-fill',
  TWITTER: 'i-ri-twitter-x-fill',
  GITHUB: 'i-ri-github-fill',
@@ -67,7 +66,6 @@ const defaultState = {
      facebook: '',
      github: '',
      instagram: '',
-      telegram: '',
      tiktok: '',
      linkedin: '',
      twitter: '',
@@ -105,13 +103,9 @@ const prepareStateBasedOnProps = () => {
    countryCode = '',
    country = '',
    city = '',
-    socialTelegramUserName = '',
    socialProfiles = {},
  } = additionalAttributes || {};

-  const telegramUsername =
-    socialProfiles?.telegram || socialTelegramUserName || '';
-
  Object.assign(state, {
    id,
    name,
@@ -125,10 +119,7 @@ const prepareStateBasedOnProps = () => {
      countryCode,
      country,
      city,
-      socialProfiles: {
-        ...socialProfiles,
-        telegram: telegramUsername,
-      },
+      socialProfiles,
    },
  });
 };
@@ -32,9 +32,9 @@ const emit = defineEmits([
 </script>

 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-10">
    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
+      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
    >
      <span class="text-xl font-medium truncate text-n-slate-12">
        {{ headerTitle }}
@@ -68,7 +68,8 @@ const hasActiveSegments = computed(
 );
 const activeSegmentName = computed(() => props.activeSegment?.name);

-const openCreateNewContactDialog = () => {
+const openCreateNewContactDialog = async () => {
+  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
  createNewContactDialogRef.value?.dialogRef.open();
 };
 const openContactImportDialog = () =>
@@ -62,7 +62,7 @@ const activeFilterQueryData = computed(() => {
      t('CONTACTS_LAYOUT.FILTER.ACTIVE_FILTERS.CLEAR_FILTERS')
    "
    :show-clear-button="!hasActiveSegments"
-    class="max-w-5xl"
+    class="max-w-[60rem] px-6"
    @open-filter="emit('openFilter')"
    @clear-filters="emit('clearFilters')"
  />
@@ -5,7 +5,6 @@ import { useRoute } from 'vue-router';
 import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue';
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
-import ContactsLoadMore from 'dashboard/components-next/Contacts/ContactsLoadMore.vue';

 const props = defineProps({
  searchValue: { type: String, default: '' },
@@ -20,9 +19,6 @@ const props = defineProps({
  segmentsId: { type: [String, Number], default: 0 },
  hasAppliedFilters: { type: Boolean, default: false },
  isFetchingList: { type: Boolean, default: false },
-  useInfiniteScroll: { type: Boolean, default: false },
-  hasMore: { type: Boolean, default: false },
-  isLoadingMore: { type: Boolean, default: false },
 });

 const emit = defineEmits([
@@ -31,7 +27,6 @@ const emit = defineEmits([
  'search',
  'applyFilter',
  'clearFilters',
-  'loadMore',
 ]);

 const route = useRoute();
@@ -66,19 +61,11 @@ const updateCurrentPage = page => {
 const openFilter = () => {
  contactListHeaderWrapper.value?.onToggleFilters();
 };
-
-const showLoadMore = computed(() => {
-  return props.useInfiniteScroll && props.hasMore;
-});
-
-const showPagination = computed(() => {
-  return !props.useInfiniteScroll && props.showPaginationFooter;
-});
 </script>

 <template>
  <section
-    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-surface-1"
+    class="flex w-full h-full gap-4 overflow-hidden justify-evenly bg-n-background"
  >
    <div class="flex flex-col w-full h-full transition-all duration-300">
      <ContactListHeaderWrapper
@@ -98,8 +85,8 @@ const showPagination = computed(() => {
        @apply-filter="emit('applyFilter', $event)"
        @clear-filters="emit('clearFilters')"
      />
-      <main class="flex-1 overflow-y-auto px-6">
-        <div class="w-full mx-auto max-w-5xl">
+      <main class="flex-1 overflow-y-auto">
+        <div class="w-full mx-auto max-w-[60rem]">
          <ContactsActiveFiltersPreview
            v-if="showActiveFiltersPreview"
            :active-segment="activeSegment"
@@ -107,19 +94,13 @@ const showPagination = computed(() => {
            @open-filter="openFilter"
          />
          <slot name="default" />
-          <ContactsLoadMore
-            v-if="showLoadMore"
-            :is-loading="isLoadingMore"
-            @load-more="emit('loadMore')"
-          />
        </div>
      </main>
-      <footer v-if="showPagination" class="sticky bottom-0 z-0">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
        <PaginationFooter
          current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
          :current-page="currentPage"
          :total-items="totalItems"
-          class="max-w-[67rem]"
          :items-per-page="itemsPerPage"
          @update:current-page="updateCurrentPage"
        />
@@ -1,28 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-defineProps({
-  isLoading: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['loadMore']);
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <div class="flex justify-center py-4">
-    <Button
-      :label="t('CONTACTS_LAYOUT.LOAD_MORE')"
-      :is-loading="isLoading"
-      variant="faded"
-      color="slate"
-      size="sm"
-      @click="emit('loadMore')"
-    />
-  </div>
-</template>
@@ -130,7 +130,7 @@ const onMergeContacts = async () => {
        variant="faded"
        color="slate"
        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="resetState"
      />
      <Button
@@ -1,10 +1,8 @@
 <script setup>
-import { computed } from 'vue';
-
 import Button from 'dashboard/components-next/button/Button.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Label from 'dashboard/components-next/label/Label.vue';
 import AttributeBadge from 'dashboard/components-next/CustomAttributes/AttributeBadge.vue';
+import { computed } from 'vue';

 const props = defineProps({
  attribute: {
@@ -20,7 +18,7 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete']);

 const iconByType = {
-  text: 'i-lucide-menu',
+  text: 'i-lucide-align-justify',
  checkbox: 'i-lucide-circle-check-big',
  list: 'i-lucide-list',
  date: 'i-lucide-calendar',
@@ -30,66 +28,61 @@ const iconByType = {

 const attributeIcon = computed(() => {
  const typeKey = props.attribute.type?.toLowerCase();
-  return iconByType[typeKey] || 'i-lucide-menu';
+  return iconByType[typeKey] || 'i-lucide-align-justify';
 });
 </script>

 <template>
-  <div class="flex flex-col py-4 min-w-0">
-    <div class="flex justify-between flex-row items-center gap-4 min-w-0">
-      <div class="flex items-center gap-4 min-w-0">
-        <div
-          class="flex items-center flex-shrink-0 size-10 justify-center rounded-xl outline outline-1 outline-n-weak -outline-offset-1"
-        >
-          <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
-        </div>
-        <div class="flex flex-col gap-1.5 items-start min-w-0 overflow-hidden">
-          <div class="flex items-center gap-2 min-w-0">
-            <h4 class="text-heading-3 truncate text-n-slate-12 min-w-0">
-              {{ attribute.label }}
-            </h4>
-            <div class="flex items-center gap-1.5">
-              <Label :label="attribute.type" compact />
-              <AttributeBadge
-                v-for="badge in badges"
-                :key="badge.type"
-                :type="badge.type"
-              />
-            </div>
+  <div
+    class="flex flex-col gap-2 p-4 bg-n-solid-1 rounded-2xl outline outline-1 outline-n-container"
+  >
+    <div class="flex flex-wrap gap-2 justify-between items-center">
+      <div class="flex flex-wrap gap-2 items-center min-w-0">
+        <h4 class="text-sm font-medium truncate text-n-slate-12">
+          {{ attribute.label }}
+        </h4>
+        <div class="w-px h-3 bg-n-strong" />
+        <div class="flex gap-2 items-center text-sm text-n-slate-11">
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon :icon="attributeIcon" class="size-4" />
+            <span class="text-sm">{{ attribute.type }}</span>
          </div>
-          <div class="grid grid-cols-[auto_1fr] items-center gap-1.5">
-            <Icon icon="i-lucide-key-round" class="size-3.5 text-n-slate-11" />
-            <div class="flex items-center gap-2 min-w-0">
-              <span class="text-body-main text-n-slate-11 truncate">
-                {{ attribute.value }}
-              </span>
-              <template
-                v-if="attribute.attribute_description || attribute.description"
-              >
-                <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
-                <span class="text-body-main text-n-slate-11 truncate">
-                  {{ attribute.attribute_description || attribute.description }}
-                </span>
-              </template>
-            </div>
+          <div class="w-px h-3 bg-n-weak" />
+          <div class="flex items-center gap-1.5 text-n-slate-11">
+            <Icon icon="i-lucide-key-round" class="size-4" />
+            <span class="line-clamp-1 text-sm">{{ attribute.value }}</span>
          </div>
        </div>
      </div>
-      <div class="flex gap-3 justify-end flex-shrink-0">
-        <Button
-          icon="i-woot-edit-pen"
-          slate
-          sm
-          @click="emit('edit', attribute)"
+      <div class="flex gap-2 items-center">
+        <AttributeBadge
+          v-for="badge in badges"
+          :key="badge.type"
+          :type="badge.type"
+        />
+        <div
+          v-if="badges.length > 0"
+          class="w-px h-3 bg-n-strong ltr:ml-1.5 rtl:mr-1.5"
        />
        <Button
-          icon="i-woot-bin"
-          slate
-          sm
-          class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
+          icon="i-lucide-pencil-line"
+          size="sm"
+          color="slate"
+          ghost
+          @click="emit('edit', attribute)"
+        />
+        <div class="w-px h-3 bg-n-strong" />
+        <Button
+          icon="i-lucide-trash"
+          size="sm"
+          color="slate"
+          ghost
          @click="emit('delete', attribute)"
        />
      </div>
    </div>
+    <p class="mb-0 text-sm text-n-slate-11">
+      {{ attribute.attribute_description || attribute.description || '' }}
+    </p>
  </div>
 </template>
@@ -35,20 +35,18 @@ const handleDelete = () => {
 <template>
  <div class="flex justify-between items-center px-4 py-3 w-full">
    <div class="flex gap-3 items-center">
-      <h5 class="text-heading-3 text-n-slate-12 line-clamp-1">
+      <h5 class="text-sm font-medium text-n-slate-12 line-clamp-1">
        {{ attribute.label }}
      </h5>
      <div class="w-px h-2.5 bg-n-slate-5" />
      <div class="flex gap-1.5 items-center">
        <Icon :icon="attributeIcon" class="size-4 text-n-slate-11" />
-        <span class="text-body-para text-n-slate-11">{{ attribute.type }}</span>
+        <span class="text-sm text-n-slate-11">{{ attribute.type }}</span>
      </div>
      <div class="w-px h-2.5 bg-n-slate-5" />
      <div class="flex gap-1.5 items-center">
        <Icon icon="i-lucide-key-round" class="size-4 text-n-slate-11" />
-        <span class="text-body-para text-n-slate-11">{{
-          attribute.value
-        }}</span>
+        <span class="text-sm text-n-slate-11">{{ attribute.value }}</span>
      </div>
    </div>
    <div class="flex gap-2 items-center">
@@ -129,10 +129,10 @@ const handleDelete = attribute => {
    <div class="flex flex-col gap-2 items-start px-5 py-4">
      <div class="flex justify-between items-center w-full">
        <div class="flex flex-col gap-2">
-          <h3 class="text-heading-2 text-n-slate-12">
+          <h3 class="text-base font-medium text-n-slate-12">
            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE') }}
          </h3>
-          <p class="mb-0 text-body-para text-n-slate-11">
+          <p class="mb-0 text-sm text-n-slate-11">
            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION') }}
          </p>
        </div>
@@ -2,7 +2,6 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Label from 'dashboard/components-next/label/Label.vue';

 const props = defineProps({
  type: {
@@ -19,13 +18,11 @@ const attributeConfig = {
    colorClass: 'text-n-blue-11',
    icon: 'i-lucide-message-circle',
    labelKey: 'ATTRIBUTES_MGMT.BADGES.PRE_CHAT',
-    color: 'slate',
  },
  resolution: {
    colorClass: 'text-n-teal-11',
    icon: 'i-lucide-circle-check-big',
    labelKey: 'ATTRIBUTES_MGMT.BADGES.RESOLUTION',
-    color: 'slate',
  },
 };
 const config = computed(
@@ -34,9 +31,12 @@ const config = computed(
 </script>

 <template>
-  <Label :label="t(config.labelKey)" :color="config.color" compact>
-    <template #icon>
-      <Icon :icon="config.icon" class="size-3.5 text-n-slate-12" />
-    </template>
-  </Label>
+  <div
+    class="flex gap-1 justify-center items-center px-1.5 py-1 rounded-md shadow outline-1 outline outline-n-container bg-n-solid-2"
+  >
+    <Icon :icon="config.icon" class="size-4" :class="config.colorClass" />
+    <span class="text-xs" :class="config.colorClass">{{
+      t(config.labelKey)
+    }}</span>
+  </div>
 </template>
@@ -128,7 +128,7 @@ const handleInputUpdate = async () => {
        'cursor-pointer text-n-slate-11 hover:text-n-slate-12 py-2 select-none font-medium':
          !isEditingView,
        'text-n-slate-12 truncate': isEditingView && !isAttributeTypeLink,
-        'truncate hover:text-n-brand text-n-blue-11':
+        'truncate hover:text-n-brand text-n-blue-text':
          isEditingView && isAttributeTypeLink,
      }"
      @click="toggleEditValue(!isEditingView)"
@@ -26,7 +26,7 @@ defineProps({
    class="relative flex flex-col items-center justify-center w-full h-full overflow-hidden"
  >
    <div
-      class="relative w-full max-w-5xl mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
    >
      <div
        v-if="showBackdrop"
@@ -37,7 +37,7 @@ defineProps({
      <div
        class="flex flex-col items-center justify-end w-full h-full pb-20"
        :class="{
-          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-surface-1 from-25% to-transparent':
+          'absolute inset-x-0 bottom-0 bg-gradient-to-t from-n-background from-25% dark:from-n-background to-transparent':
            showBackdrop,
        }"
      >
@@ -48,12 +48,14 @@ defineProps({
          }"
        >
          <div class="flex flex-col items-center justify-center gap-3">
-            <h2 class="text-3xl font-medium text-center text-n-slate-12">
+            <h2
+              class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
+            >
              {{ title }}
            </h2>
            <p
              v-if="subtitle"
-              class="max-w-xl text-base text-center text-n-slate-11 tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
            >
              {{ subtitle }}
            </p>
@@ -126,7 +126,7 @@ const handleClick = id => {
  <CardLayout>
    <div class="flex justify-between w-full gap-1">
      <span
-        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
+        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12 line-clamp-1"
        @click="handleClick(id)"
      >
        {{ title }}
@@ -83,7 +83,7 @@ const handleAction = ({ action, value }) => {
      <div class="flex justify-between w-full gap-2">
        <div class="flex items-center justify-start w-full min-w-0 gap-2">
          <span
-            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12"
+            class="text-base truncate cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-text text-n-slate-12"
            @click="handleClick(slug)"
          >
            {{ categoryTitleWithIcon }}
@@ -58,9 +58,9 @@ const togglePortalSwitcher = () => {
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
-    <header class="sticky top-0 z-10 px-6 pb-3">
-      <div class="w-full max-w-5xl mx-auto">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
+    <header class="sticky top-0 z-10 px-6 pb-3 lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
        <div
          v-if="showHeaderTitle"
          class="flex items-center justify-start h-20 gap-2"
@@ -95,17 +95,16 @@ const togglePortalSwitcher = () => {
        <slot name="header-actions" />
      </div>
    </header>
-    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl mx-auto py-3">
+    <main class="flex-1 px-6 overflow-y-auto lg:px-0">
+      <div class="w-full max-w-[60rem] mx-auto py-3 lg:px-6">
        <slot name="content" />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalItems"
        :items-per-page="itemsPerPage"
-        class="max-w-[67rem]"
        @update:current-page="updateCurrentPage"
      />
    </footer>
@@ -60,7 +60,7 @@ const handleAction = ({ action, value }) => {
        </span>
        <span
          v-if="isDefault"
-          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-11 px-2 py-0.5"
+          class="bg-n-alpha-2 h-6 inline-flex items-center justify-center rounded-md text-xs border-px border-transparent text-n-blue-text px-2 py-0.5"
        >
          {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DEFAULT') }}
        </span>
@@ -246,7 +246,7 @@ defineExpose({ state, isSubmitDisabled });
          variant="faded"
          color="slate"
          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
          @click="handleCancel"
        />
        <Button
@@ -62,7 +62,6 @@ const onCreate = async () => {
      from: route.name,
    });

-    selectedLocale.value = '';
    dialogRef.value?.close();
    useAlert(
      t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
@@ -100,7 +100,7 @@ const formattedMessage = computed(() => {

 const notificationDetails = computed(() => {
  const type = props.inboxItem?.notificationType?.toUpperCase() || '';
-  const [icon = '', color = 'text-n-blue-11'] =
+  const [icon = '', color = 'text-n-blue-text'] =
    NOTIFICATION_TYPES_MAPPING[type] || [];
  return { text: type ? t(`INBOX.TYPES_NEXT.${type}`) : '', icon, color };
 });
@@ -181,11 +181,11 @@ onBeforeMount(contextMenuActions.close);
                : 'i-lucide-alarm-clock-off'
            "
            class="flex-shrink-0 size-4"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-11'"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
          />
          <span
            class="text-xs font-medium truncate"
-            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-11'"
+            :class="!isUnread ? 'text-n-slate-11' : 'text-n-blue-text'"
          >
            {{ snoozedText }}
          </span>
@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
 import { useWindowSize } from '@vueuse/core';
@@ -59,23 +59,6 @@ const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
 const showComposeNewConversation = ref(false);

-const formState = reactive({
-  message: '',
-  subject: '',
-  ccEmails: '',
-  bccEmails: '',
-  attachedFiles: [],
-});
-
-const clearFormState = () => {
-  Object.assign(formState, {
-    subject: '',
-    ccEmails: '',
-    bccEmails: '',
-    attachedFiles: [],
-  });
-};
-
 const contactById = useMapGetter('contacts/getContactById');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 const currentUser = useMapGetter('getCurrentUser');
@@ -157,14 +140,12 @@ const handleSelectedContact = async ({ value, action, ...rest }) => {

 const handleTargetInbox = inbox => {
  targetInbox.value = inbox;
-  if (!inbox) clearFormState();
  resetContacts();
 };

 const clearSelectedContact = () => {
  selectedContact.value = null;
  targetInbox.value = null;
-  clearFormState();
 };

 const closeCompose = () => {
@@ -179,12 +160,6 @@ const closeCompose = () => {
  emit('close');
 };

-const discardCompose = () => {
-  clearFormState();
-  formState.message = '';
-  closeCompose();
-};
-
 const createConversation = async ({ payload, isFromWhatsApp }) => {
  try {
    const data = await store.dispatch('contactConversations/create', {
@@ -196,7 +171,7 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
      to: `/app/accounts/${data.account_id}/conversations/${data.id}`,
      message: t('COMPOSE_NEW_CONVERSATION.FORM.GO_TO_CONVERSATION'),
    };
-    discardCompose();
+    closeCompose();
    useAlert(t('COMPOSE_NEW_CONVERSATION.FORM.SUCCESS_MESSAGE'), action);
    return true; // Return success
  } catch (error) {
@@ -218,11 +193,7 @@ watch(
  (currentContact, previousContact) => {
    if (currentContact && props.contactId) {
      // Reset on contact change
-      if (currentContact?.id !== previousContact?.id) {
-        clearSelectedContact();
-        clearFormState();
-        formState.message = '';
-      }
+      if (currentContact?.id !== previousContact?.id) clearSelectedContact();

      // First process the contactable inboxes to get the right structure
      const processedInboxes = processContactableInboxes(
@@ -294,7 +265,6 @@ useKeyboardEvents(keyboardEvents);
      @click.self="onModalBackdropClick"
    >
      <ComposeNewConversationForm
-        :form-state="formState"
        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
        :contacts="contacts"
        :contact-id="contactId"
@@ -315,7 +285,7 @@ useKeyboardEvents(keyboardEvents);
        @update-target-inbox="handleTargetInbox"
        @clear-selected-contact="clearSelectedContact"
        @create-conversation="createConversation"
-        @discard="discardCompose"
+        @discard="closeCompose"
      />
    </div>
  </div>
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
 import { INBOX_TYPES } from 'dashboard/helper/inbox';
@@ -37,7 +37,6 @@ const props = defineProps({
  contactsUiFlags: { type: Object, default: null },
  messageSignature: { type: String, default: '' },
  sendWithSignature: { type: Boolean, default: false },
-  formState: { type: Object, required: true },
 });

 const emit = defineEmits([
@@ -58,13 +57,13 @@ const showBccEmailsDropdown = ref(false);

 const isCreating = computed(() => props.contactConversationsUiFlags.isCreating);

-const state = props.formState || {
+const state = reactive({
  message: '',
  subject: '',
  ccEmails: '',
  bccEmails: '',
  attachedFiles: [],
-};
+});

 const inboxTypes = computed(() => ({
  isEmail: props.targetInbox?.channelType === INBOX_TYPES.EMAIL,
@@ -158,7 +157,21 @@ const isAnyDropdownActive = computed(() => {

 const handleContactSearch = value => {
  showContactsDropdown.value = true;
-  emit('searchContacts', value);
+  const query = typeof value === 'string' ? value.trim() : '';
+  const hasAlphabet = Array.from(query).some(char => {
+    const lower = char.toLowerCase();
+    const upper = char.toUpperCase();
+    return lower !== upper;
+  });
+  const isEmailLike = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(query);
+
+  const keys = ['email', 'phone_number', 'name'].filter(key => {
+    if (key === 'phone_number' && hasAlphabet) return false;
+    if (key === 'name' && isEmailLike) return false;
+    return true;
+  });
+
+  emit('searchContacts', { keys, query: value });
 };

 const handleDropdownUpdate = (type, value) => {
@@ -173,12 +186,12 @@ const handleDropdownUpdate = (type, value) => {

 const searchCcEmails = value => {
  showCcEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };

 const searchBccEmails = value => {
  showBccEmailsDropdown.value = true;
-  emit('searchContacts', value);
+  emit('searchContacts', { keys: ['email'], query: value });
 };

 const setSelectedContact = async ({ value, action, ...rest }) => {
@@ -44,16 +44,14 @@ const bccEmailsArray = computed(() =>
 );

 const contactEmailsList = computed(() => {
-  return props.contacts
-    ?.filter(contact => contact.email)
-    .map(({ name, id, email }) => ({
-      id,
-      label: email,
-      email,
-      thumbnail: { name: name, src: '' },
-      value: id,
-      action: 'email',
-    }));
+  return props.contacts?.map(({ name, id, email }) => ({
+    id,
+    label: email,
+    email,
+    thumbnail: { name: name, src: '' },
+    value: id,
+    action: 'email',
+  }));
 });

 // Handle updates from TagInput and convert array back to string
@@ -97,7 +95,6 @@ const inputClass = computed(() => {
          :show-dropdown="showCcEmailsDropdown"
          :is-loading="isLoading"
          type="email"
-          allow-create
          class="flex-1 min-h-7"
          @focus="emit('updateDropdown', 'cc', true)"
          @input="emit('searchCcEmails', $event)"
@@ -130,7 +127,6 @@ const inputClass = computed(() => {
        :show-dropdown="showBccEmailsDropdown"
        :is-loading="isLoading"
        type="email"
-        allow-create
        class="flex-1 min-h-7"
        focus-on-mount
        @focus="emit('updateDropdown', 'bcc', true)"
@@ -176,14 +176,32 @@ export const prepareWhatsAppMessagePayload = ({
  };
 };

-// API Calls
-export const searchContacts = async query => {
-  const trimmed = typeof query === 'string' ? query.trim() : '';
-  if (!trimmed) return [];
+export const generateContactQuery = ({ keys = ['email'], query }) => {
+  return {
+    payload: keys.map(key => {
+      const filterPayload = {
+        attribute_key: key,
+        filter_operator: 'contains',
+        values: [query],
+        attribute_model: 'standard',
+      };
+      if (keys.findIndex(k => k === key) !== keys.length - 1) {
+        filterPayload.query_operator = 'or';
+      }
+      return filterPayload;
+    }),
+  };
+};

+// API Calls
+export const searchContacts = async ({ keys, query }) => {
  const {
    data: { payload },
-  } = await ContactAPI.search(trimmed);
+  } = await ContactAPI.filter(
+    undefined,
+    'name',
+    generateContactQuery({ keys, query })
+  );
  const camelCasedPayload = camelcaseKeys(payload, { deep: true });
  // Filter contacts that have either phone_number or email
  const filteredPayload = camelCasedPayload?.filter(
@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
      const result = helpers.buildContactableInboxesList(inboxes);
      expect(result[0]).toMatchObject({
        id: 1,
-        icon: 'i-woot-mail',
+        icon: 'i-ri-mail-line',
        label: 'Email Inbox (support@example.com)',
        action: 'inbox',
        value: 1,
@@ -336,6 +336,70 @@ describe('composeConversationHelper', () => {
    });
  });

+  describe('generateContactQuery', () => {
+    it('generates correct query structure for contact search', () => {
+      const query = 'test@example.com';
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [query],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(helpers.generateContactQuery({ keys: ['email'], query })).toEqual(
+        expected
+      );
+    });
+
+    it('handles empty query', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: [''],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({ keys: ['email'], query: '' })
+      ).toEqual(expected);
+    });
+
+    it('handles mutliple keys', () => {
+      const expected = {
+        payload: [
+          {
+            attribute_key: 'email',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+            query_operator: 'or',
+          },
+          {
+            attribute_key: 'phone_number',
+            filter_operator: 'contains',
+            values: ['john'],
+            attribute_model: 'standard',
+          },
+        ],
+      };
+
+      expect(
+        helpers.generateContactQuery({
+          keys: ['email', 'phone_number'],
+          query: 'john',
+        })
+      ).toEqual(expected);
+    });
+  });
+
  describe('API calls', () => {
    describe('searchContacts', () => {
      it('searches contacts and returns camelCase results', async () => {
@@ -349,11 +413,14 @@ describe('composeConversationHelper', () => {
          },
        ];

-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
          data: { payload: mockPayload },
        });

-        const result = await helpers.searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });

        expect(result).toEqual([
          {
@@ -365,7 +432,16 @@ describe('composeConversationHelper', () => {
          },
        ]);

-        expect(ContactAPI.search).toHaveBeenCalledWith('john');
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
      });

      it('searches contacts and returns only contacts with email or phone number', async () => {
@@ -393,11 +469,14 @@ describe('composeConversationHelper', () => {
          },
        ];

-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
          data: { payload: mockPayload },
        });

-        const result = await helpers.searchContacts('john');
+        const result = await helpers.searchContacts({
+          keys: ['email'],
+          query: 'john',
+        });

        // Should only return contacts with either email or phone number
        expect(result).toEqual([
@@ -417,11 +496,20 @@ describe('composeConversationHelper', () => {
          },
        ]);

-        expect(ContactAPI.search).toHaveBeenCalledWith('john');
+        expect(ContactAPI.filter).toHaveBeenCalledWith(undefined, 'name', {
+          payload: [
+            {
+              attribute_key: 'email',
+              filter_operator: 'contains',
+              values: ['john'],
+              attribute_model: 'standard',
+            },
+          ],
+        });
      });

      it('handles empty search results', async () => {
-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
          data: { payload: [] },
        });

@@ -448,7 +536,7 @@ describe('composeConversationHelper', () => {
          },
        ];

-        ContactAPI.search.mockResolvedValue({
+        ContactAPI.filter.mockResolvedValue({
          data: { payload: mockPayload },
        });

@@ -1,31 +0,0 @@
-<script setup>
-import { useToggle } from '@vueuse/core';
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  defaultOpen: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const [isOpen, toggle] = useToggle(props.defaultOpen);
-</script>
-
-<template>
-  <div
-    v-bind="$attrs"
-    class="flex items-center justify-between w-full cursor-pointer pb-2 pt-4 border-t border-n-weak"
-    @click="toggle()"
-  >
-    <span class="text-heading-2 text-n-slate-12 w-full">
-      {{ title }}
-    </span>
-  </div>
-  <div v-if="isOpen" class="w-full space-y-4 pt-4 mb-4">
-    <slot />
-  </div>
-</template>
@@ -1,37 +0,0 @@
-<script setup>
-defineProps({
-  label: {
-    type: String,
-    required: true,
-  },
-  helpText: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="w-full py-2 mb-2 [interpolate-size:allow-keywords]">
-    <div
-      class="grid grid-cols-1 lg:grid-cols-8 gap-1.5 lg:gap-4 items-start lg:items-center"
-    >
-      <label class="text-heading-3 text-n-slate-12 col-span-1 lg:col-span-2">
-        {{ label }}
-      </label>
-      <div class="col-span-1 lg:col-span-6">
-        <slot />
-      </div>
-    </div>
-    <div v-if="helpText" class="grid grid-cols-1 lg:grid-cols-8">
-      <div class="col-span-1 lg:col-span-2 invisible" />
-      <p
-        v-if="helpText"
-        class="mt-1.5 col-span-1 lg:col-span-6 text-label-small text-n-slate-11 ltr:ml-1 rtl:mr-1"
-      >
-        {{ helpText }}
-      </p>
-    </div>
-    <slot name="extra" />
-  </div>
-</template>
@@ -1,45 +0,0 @@
-<script setup>
-import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
-
-defineProps({
-  header: {
-    type: String,
-    required: true,
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-  compact: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const modelValue = defineModel({ type: Boolean, default: false });
-</script>
-
-<template>
-  <div
-    class="flex flex-col items-start outline outline-1 -outline-offset-1 outline-n-weak rounded-xl [interpolate-size:allow-keywords]"
-  >
-    <div class="flex flex-col gap-1 items-start w-full px-4 py-3">
-      <div class="flex items-center gap-3 w-full justify-between">
-        <span class="text-heading-3 text-n-slate-12">
-          {{ header }}
-        </span>
-        <ToggleSwitch v-model="modelValue" />
-      </div>
-      <span v-if="description" class="text-body-main text-n-slate-11">
-        {{ description }}
-      </span>
-    </div>
-    <div
-      v-if="$slots.editor"
-      class="w-full border-t border-n-weak"
-      :class="{ 'p-0': compact, 'px-4 pb-4 pt-2': !compact }"
-    >
-      <slot name="editor" />
-    </div>
-  </div>
-</template>
@@ -112,19 +112,6 @@ const containerStyles = computed(() => ({
  height: `${props.size}px`,
 }));

-const borderRadiusClass = computed(() => {
-  if (props.roundedFull) {
-    return 'rounded-full';
-  }
-
-  // Approximates 25% of size
-  if (props.size <= 16) return 'rounded'; // 4px
-  if (props.size <= 24) return 'rounded-md'; // 6px
-  if (props.size <= 32) return 'rounded-lg'; // 8px
-  if (props.size <= 48) return 'rounded-xl'; // 12px
-  return 'rounded-2xl'; // 16px
-});
-
 const avatarStyles = computed(() => ({
  ...containerStyles.value,
  backgroundColor:
@@ -197,7 +184,7 @@ watch(

 <template>
  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0"
    :style="containerStyles"
  >
    <!-- Status Badge -->
@@ -229,9 +216,9 @@ watch(
    <!-- Avatar Container -->
    <span
      role="img"
-      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium outline outline-1 -outline-offset-1 outline-[rgb(0_0_0_/_0.03)] dark:outline-[rgb(255_255_255_/_0.04)]"
+      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
      :class="[
-        borderRadiusClass,
+        roundedFull ? 'rounded-full' : 'rounded-xl',
        {
          'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
            !showDefaultAvatar && (!src || !isImageValid),
@@ -280,8 +267,7 @@ watch(
        :handle-image-upload="handleImageUpload"
      >
        <div
-          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
-          :class="borderRadiusClass"
+          class="absolute inset-0 z-10 flex items-center justify-center invisible w-full h-full transition-all duration-300 ease-in-out opacity-0 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
          @click="handleUploadAvatar"
        >
          <Icon
@@ -103,11 +103,11 @@ const STYLE_CONFIG = {
      solid:
        'bg-n-brand text-white hover:enabled:brightness-110 focus-visible:brightness-110 outline-transparent',
      faded:
-        'bg-n-brand/10 text-n-blue-11 hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
-      outline: 'text-n-blue-11 outline-n-brand',
+        'bg-n-brand/10 text-n-blue-text hover:enabled:bg-n-brand/20 focus-visible:bg-n-brand/20 outline-transparent',
+      outline: 'text-n-blue-text outline-n-brand',
      ghost:
-        'text-n-blue-11 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
-      link: 'text-n-blue-11 hover:enabled:underline focus-visible:underline outline-transparent',
+        'text-n-blue-text hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 outline-transparent',
+      link: 'text-n-blue-text hover:enabled:underline focus-visible:underline outline-transparent',
    },
    ruby: {
      solid:
@@ -133,7 +133,7 @@ const STYLE_CONFIG = {
    },
    slate: {
      solid:
-        'bg-n-button-color dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
+        'bg-n-solid-3 dark:hover:enabled:bg-n-solid-2 dark:focus-visible:bg-n-solid-2 hover:enabled:bg-n-alpha-2 focus-visible:bg-n-alpha-2 text-n-slate-12 outline-n-container',
      faded:
        'bg-n-slate-9/10 text-n-slate-12 hover:enabled:bg-n-slate-9/20 focus-visible:bg-n-slate-9/20 outline-transparent',
      outline:
@@ -115,9 +115,9 @@ const handleCreateAssistant = () => {
 </script>

 <template>
-  <section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
+  <section class="flex flex-col w-full h-full overflow-hidden bg-n-background">
    <header class="sticky top-0 z-10 px-6">
-      <div class="w-full max-w-5xl mx-auto">
+      <div class="w-full max-w-[60rem] mx-auto">
        <div
          class="flex items-start lg:items-center justify-between w-full py-6 lg:py-0 lg:h-20 gap-4 lg:gap-2 flex-col lg:flex-row"
        >
@@ -140,9 +140,7 @@ const handleCreateAssistant = () => {
                  >
                    <Button
                      icon="i-lucide-chevron-down"
-                      :variant="
-                        showAssistantSwitcherDropdown ? 'faded' : 'ghost'
-                      "
+                      variant="ghost"
                      color="slate"
                      size="xs"
                      :disabled="isFetchingAssistants"
@@ -206,7 +204,7 @@ const handleCreateAssistant = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-5xl h-full mx-auto py-4">
+      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
          v-if="isFetching"
@@ -224,12 +222,11 @@ const handleCreateAssistant = () => {
        <slot />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalCount"
        :items-per-page="itemsPerPage"
-        class="max-w-[67rem]"
        @update:current-page="handlePageChange"
      />
    </footer>
@@ -141,7 +141,7 @@ const onClickCancel = () => {
          variant="faded"
          color="slate"
          :label="t('CAPTAIN.ASSISTANTS.SCENARIOS.ADD.NEW.FORM.CANCEL')"
-          class="w-full bg-n-alpha-2 !text-n-blue-11 hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 !text-n-blue-text hover:bg-n-alpha-3"
          @click="onClickCancel"
        />
        <Button
@@ -27,7 +27,7 @@ const openBilling = () => {

 <template>
  <div
-    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
  >
    <BasePaywallModal
      class="mx-auto"
@@ -169,7 +169,7 @@ watch(
        variant="faded"
        color="slate"
        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -254,7 +254,7 @@ const handleSubmit = async () => {
        variant="faded"
        color="slate"
        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -220,7 +220,7 @@ const handleSubmit = async () => {
        variant="faded"
        color="slate"
        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -18,9 +18,7 @@ const dialogRef = ref(null);

 const uiFlags = useMapGetter('captainResponses/getUIFlags');
 const responses = useMapGetter('captainResponses/getRecords');
-const meta = useMapGetter('captainResponses/getMeta');
 const isFetching = computed(() => uiFlags.value.fetchingList);
-const totalCount = computed(() => meta.value.totalCount || 0);

 const handleClose = () => {
  emit('close');
@@ -39,7 +37,7 @@ defineExpose({ dialogRef });
  <Dialog
    ref="dialogRef"
    type="edit"
-    :title="`${t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')} (${totalCount})`"
+    :title="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.TITLE')"
    :description="t('CAPTAIN.DOCUMENTS.RELATED_RESPONSES.DESCRIPTION')"
    :show-cancel-button="false"
    :show-confirm-button="false"
@@ -100,7 +100,7 @@ const handleSubmit = async () => {
        variant="faded"
        color="slate"
        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -116,7 +116,7 @@ watch(
        variant="faded"
        color="slate"
        :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -1,171 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Textarea from 'dashboard/components-next/textarea/Textarea.vue';
-
-const props = defineProps({
-  node: { type: Object, required: true },
-});
-
-const emit = defineEmits(['update', 'delete', 'close']);
-const { t } = useI18n();
-
-const nodeData = ref({ ...props.node.data });
-
-watch(
-  () => props.node,
-  val => {
-    nodeData.value = { ...val.data };
-  }
-);
-
-const FIELD_CONFIGS = {
-  send_message: [
-    {
-      key: 'message',
-      component: 'textarea',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.MESSAGE',
-    },
-  ],
-  add_label: [
-    {
-      key: 'label',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.LABEL',
-    },
-  ],
-  assign_agent: [
-    {
-      key: 'agent_id',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.AGENT_ID',
-    },
-  ],
-  assign_team: [
-    {
-      key: 'team_id',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.TEAM_ID',
-    },
-  ],
-  add_private_note: [
-    {
-      key: 'message',
-      component: 'textarea',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.MESSAGE',
-    },
-  ],
-  update_priority: [
-    {
-      key: 'priority',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.PRIORITY',
-    },
-  ],
-  collect_input: [
-    {
-      key: 'input_key',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.INPUT_KEY',
-    },
-    {
-      key: 'prompt',
-      component: 'textarea',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.PROMPT',
-    },
-  ],
-  condition: [
-    {
-      key: 'attribute',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.ATTRIBUTE',
-    },
-    {
-      key: 'operator',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.OPERATOR',
-    },
-    {
-      key: 'value',
-      component: 'input',
-      label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.VALUE',
-    },
-  ],
-};
-
-const fields = ref(FIELD_CONFIGS[props.node.type] || []);
-
-watch(
-  () => props.node.type,
-  type => {
-    fields.value = FIELD_CONFIGS[type] || [];
-  }
-);
-
-const applyChanges = () => {
-  emit('update', props.node.id, nodeData.value);
-};
-
-const deleteNode = () => {
-  emit('delete', props.node.id);
-};
-</script>
-
-<template>
-  <div
-    class="w-72 shrink-0 border-l border-n-weak bg-n-solid-2 overflow-y-auto flex flex-col"
-  >
-    <div
-      class="flex justify-between items-center px-4 py-3 border-b border-n-weak"
-    >
-      <h3 class="text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.TITLE') }}
-      </h3>
-      <Button icon="i-lucide-x" xs ghost slate @click="emit('close')" />
-    </div>
-
-    <div class="flex flex-col gap-3 p-4">
-      <div class="flex flex-col gap-1.5">
-        <label class="text-xs font-medium text-n-slate-11">
-          {{ t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.LABEL_FIELD') }}
-        </label>
-        <Input v-model="nodeData.label" @change="applyChanges" />
-      </div>
-
-      <div
-        v-for="field in fields"
-        :key="field.key"
-        class="flex flex-col gap-1.5"
-      >
-        <label class="text-xs font-medium text-n-slate-11">
-          {{ t(field.label) }}
-        </label>
-        <Textarea
-          v-if="field.component === 'textarea'"
-          v-model="nodeData[field.key]"
-          rows="3"
-          @change="applyChanges"
-        />
-        <Input v-else v-model="nodeData[field.key]" @change="applyChanges" />
-      </div>
-    </div>
-
-    <div class="mt-auto flex items-center gap-2 p-4 border-t border-n-weak">
-      <Button
-        :label="t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.APPLY')"
-        sm
-        @click="applyChanges"
-      />
-      <Button
-        :label="t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.DELETE')"
-        icon="i-lucide-trash-2"
-        sm
-        ghost
-        slate
-        @click="deleteNode"
-      />
-    </div>
-  </div>
-</template>
@@ -1,113 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-const NODE_CATEGORIES = [
-  {
-    label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.PALETTE.INTERACTIVE',
-    color: 'n-violet',
-    icon: 'i-lucide-message-circle-question',
-    nodes: [
-      {
-        type: 'collect_input',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.COLLECT_INPUT',
-      },
-    ],
-  },
-  {
-    label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.PALETTE.LOGIC',
-    color: 'n-amber',
-    icon: 'i-lucide-git-branch',
-    nodes: [
-      {
-        type: 'condition',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.CONDITION',
-      },
-    ],
-  },
-  {
-    label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.PALETTE.ACTIONS',
-    color: 'n-blue',
-    icon: 'i-lucide-play',
-    nodes: [
-      {
-        type: 'send_message',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.SEND_MESSAGE',
-      },
-      {
-        type: 'add_label',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.ADD_LABEL',
-      },
-      {
-        type: 'assign_agent',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.ASSIGN_AGENT',
-      },
-      {
-        type: 'assign_team',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.ASSIGN_TEAM',
-      },
-      {
-        type: 'resolve_conversation',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.RESOLVE_CONVERSATION',
-      },
-      {
-        type: 'add_private_note',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.ADD_PRIVATE_NOTE',
-      },
-      {
-        type: 'update_priority',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.UPDATE_PRIORITY',
-      },
-    ],
-  },
-  {
-    label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.PALETTE.SHOPIFY',
-    color: 'n-teal',
-    icon: 'i-lucide-shopping-bag',
-    nodes: [
-      {
-        type: 'shopify_search_customer',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.SHOPIFY_SEARCH_CUSTOMER',
-      },
-      {
-        type: 'shopify_get_customer_orders',
-        label: 'CAPTAIN.ASSISTANTS.WORKFLOWS.NODES.SHOPIFY_GET_CUSTOMER_ORDERS',
-      },
-    ],
-  },
-];
-
-const onDragStart = (event, type) => {
-  event.dataTransfer.setData('application/captainnode', type);
-  event.dataTransfer.effectAllowed = 'move';
-};
-</script>
-
-<template>
-  <div
-    class="w-60 shrink-0 border-r border-n-weak bg-n-solid-2 overflow-y-auto"
-  >
-    <div class="p-3 flex flex-col gap-4">
-      <div v-for="category in NODE_CATEGORIES" :key="category.label">
-        <div class="flex items-center gap-1.5 mb-2 px-1">
-          <span class="size-3 text-n-slate-10" :class="[category.icon]" />
-          <h4 class="text-[11px] font-semibold text-n-slate-10 uppercase">
-            {{ t(category.label) }}
-          </h4>
-        </div>
-        <div class="flex flex-col gap-1">
-          <div
-            v-for="node in category.nodes"
-            :key="node.type"
-            class="flex items-center gap-2 px-2.5 py-2 text-xs text-n-slate-12 rounded-lg cursor-grab bg-n-solid-2 hover:bg-n-alpha-2 outline outline-1 -outline-offset-1 outline-n-container transition-colors"
-            draggable="true"
-            @dragstart="e => onDragStart(e, node.type)"
-          >
-            {{ t(node.label) }}
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
@@ -1,64 +0,0 @@
-<script setup>
-import { ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import Button from 'dashboard/components-next/button/Button.vue';
-import Input from 'dashboard/components-next/input/Input.vue';
-import Switch from 'dashboard/components-next/switch/Switch.vue';
-
-const props = defineProps({
-  workflow: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits(['save', 'back']);
-const { t } = useI18n();
-
-const name = ref('');
-const description = ref('');
-const enabled = ref(false);
-
-watch(
-  () => props.workflow,
-  val => {
-    if (val && val.id) {
-      name.value = val.name || '';
-      description.value = val.description || '';
-      enabled.value = val.enabled || false;
-    }
-  },
-  { immediate: true }
-);
-
-const save = () => {
-  emit('save', {
-    name: name.value,
-    description: description.value,
-    enabled: enabled.value,
-  });
-};
-</script>
-
-<template>
-  <div
-    class="flex items-center gap-3 px-4 py-2.5 border-b border-n-weak bg-n-solid-2"
-  >
-    <Button icon="i-lucide-arrow-left" xs ghost slate @click="emit('back')" />
-    <span class="w-px h-4 bg-n-weak" />
-    <Input
-      v-model="name"
-      class="max-w-xs"
-      :placeholder="t('CAPTAIN.ASSISTANTS.WORKFLOWS.TOOLBAR.NAME_PLACEHOLDER')"
-    />
-    <div class="flex items-center gap-2.5 ml-auto">
-      <span class="text-xs text-n-slate-11">
-        {{ t('CAPTAIN.ASSISTANTS.WORKFLOWS.TOOLBAR.ENABLED') }}
-      </span>
-      <Switch v-model="enabled" />
-      <span class="w-px h-4 bg-n-weak" />
-      <Button
-        :label="t('CAPTAIN.ASSISTANTS.WORKFLOWS.TOOLBAR.SAVE')"
-        sm
-        @click="save"
-      />
-    </div>
-  </div>
-</template>
@@ -1,25 +0,0 @@
-<script setup>
-import { Handle, Position } from '@vue-flow/core';
-
-defineProps({
-  data: { type: Object, default: () => ({}) },
-});
-</script>
-
-<template>
-  <div
-    class="flex rounded-lg bg-n-solid-2 outline outline-1 -outline-offset-1 outline-n-container shadow-sm"
-  >
-    <Handle type="target" :position="Position.Top" class="!bg-n-blue-9" />
-    <div class="w-0.5 shrink-0 bg-n-blue-9" />
-    <div class="flex items-center gap-1 px-1.5 py-1 min-w-0">
-      <span class="i-lucide-play text-n-blue-11 size-2.5 shrink-0" />
-      <span
-        class="text-[11px] leading-none font-medium text-n-slate-12 truncate"
-      >
-        {{ data.label || 'Action' }}
-      </span>
-    </div>
-    <Handle type="source" :position="Position.Bottom" class="!bg-n-blue-9" />
-  </div>
-</template>
@@ -1,27 +0,0 @@
-<script setup>
-import { Handle, Position } from '@vue-flow/core';
-
-defineProps({
-  data: { type: Object, default: () => ({}) },
-});
-</script>
-
-<template>
-  <div
-    class="flex rounded-lg bg-n-solid-2 outline outline-1 -outline-offset-1 outline-n-container shadow-sm"
-  >
-    <Handle type="target" :position="Position.Top" class="!bg-n-violet-9" />
-    <div class="w-0.5 shrink-0 bg-n-violet-9" />
-    <div class="flex items-center gap-1 px-1.5 py-1 min-w-0">
-      <span
-        class="i-lucide-message-circle-question text-n-violet-11 size-2.5 shrink-0"
-      />
-      <span
-        class="text-[11px] leading-none font-medium text-n-slate-12 truncate"
-      >
-        {{ data.label || 'Collect Input' }}
-      </span>
-    </div>
-    <Handle type="source" :position="Position.Bottom" class="!bg-n-violet-9" />
-  </div>
-</template>
@@ -1,47 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { Handle, Position } from '@vue-flow/core';
-
-defineProps({
-  data: { type: Object, default: () => ({}) },
-});
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <div
-    class="flex w-32 rounded-xl bg-n-solid-2 outline outline-1 -outline-offset-1 outline-n-container shadow-sm"
-  >
-    <Handle type="target" :position="Position.Top" class="!bg-n-amber-9" />
-    <div class="w-1 shrink-0 bg-n-amber-9" />
-    <div class="flex flex-col gap-0.5 px-2 py-1.5 min-w-0">
-      <div class="flex items-center gap-2">
-        <span class="i-lucide-git-branch text-n-amber-11 size-3 shrink-0" />
-        <span class="text-xs font-medium text-n-slate-12 truncate">
-          {{ data.label || 'Condition' }}
-        </span>
-      </div>
-      <div class="flex items-center justify-between mt-1">
-        <span class="text-[11px] font-medium text-n-teal-11">
-          {{ t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.CONDITION_TRUE') }}
-        </span>
-        <span class="text-[11px] font-medium text-n-ruby-11">
-          {{ t('CAPTAIN.ASSISTANTS.WORKFLOWS.CONFIG.CONDITION_FALSE') }}
-        </span>
-      </div>
-    </div>
-    <Handle
-      id="true"
-      type="source"
-      :position="Position.Bottom"
-      class="!left-[25%] !bg-n-teal-9"
-    />
-    <Handle
-      id="false"
-      type="source"
-      :position="Position.Bottom"
-      class="!left-[75%] !bg-n-ruby-9"
-    />
-  </div>
-</template>
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .11.1
 .10.1