Merge remote-tracking branch 'origin/fix/email_auth_issue' into fix/email_auth_issue

2026-02-25 20:57:36 +05:30
parent 0736d69dec 3a1777d2fe
commit 1a158317fb
282 changed files with 7944 additions and 6713 deletions
@@ -95,6 +95,7 @@ yarn-debug.log*
 .claude/settings.local.json
 .cursor
 .codex/
+.claude/
 CLAUDE.local.md

 # Histoire deployment
@@ -191,7 +191,7 @@ gem 'reverse_markdown'

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

 # TODO: Move this gem as a dependency of ai-agents
 gem 'ruby_llm', '>= 1.8.2'
@@ -126,7 +126,7 @@ GEM
      jbuilder (~> 2)
      rails (>= 4.2, < 7.2)
      selectize-rails (~> 0.6)
-    ai-agents (0.9.0)
+    ai-agents (0.9.1)
      ruby_llm (~> 1.9.1)
    annotaterb (4.20.0)
      activerecord (>= 6.0.0)
@@ -583,14 +583,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.18.9)
+    nokogiri (1.19.1)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.18.9-arm64-darwin)
+    nokogiri (1.19.1-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-darwin)
+    nokogiri (1.19.1-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.19.1-x86_64-linux-gnu)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -677,7 +677,7 @@ GEM
      activesupport (>= 3.0.0)
    raabro (1.4.0)
    racc (1.8.1)
-    rack (3.2.3)
+    rack (3.2.5)
    rack-attack (6.7.0)
      rack (>= 1.0, < 4)
    rack-contrib (2.5.0)
@@ -1024,7 +1024,7 @@ DEPENDENCIES
  administrate (>= 0.20.1)
  administrate-field-active_storage (>= 1.0.3)
  administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents
+  ai-agents (>= 0.9.1)
  annotaterb
  attr_extras
  audited (~> 5.4, >= 5.4.1)
@@ -1 +1 @@
-4.10.1
+4.11.1
@@ -15,7 +15,7 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
  end

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

@@ -1,6 +1,7 @@
 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)
@@ -24,6 +25,23 @@ 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
@@ -46,6 +64,12 @@ 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)
@@ -0,0 +1,35 @@
+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
@@ -55,6 +55,22 @@ 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,39 +57,35 @@ 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_enable_tls(channel_data, smtp)
+      set_smtp_ssl_method(smtp, :enable_tls, channel_data[:smtp_openssl_verify_mode])
    elsif channel_data[:smtp_enable_starttls_auto]
-      set_enable_starttls_auto(channel_data, smtp)
+      set_smtp_ssl_method(smtp, :enable_starttls_auto, channel_data[:smtp_openssl_verify_mode])
    end
  end

-  def set_enable_starttls_auto(channel_data, smtp)
-    return unless smtp.respond_to?(:enable_starttls_auto)
+  def set_smtp_ssl_method(smtp, method, openssl_verify_mode)
+    return unless smtp.respond_to?(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
+    context = enable_openssl_mode(openssl_verify_mode) if openssl_verify_mode
+    context ? smtp.send(method, context) : smtp.send(method)
  end

  def enable_openssl_mode(smtp_openssl_verify_mode)
@@ -164,10 +164,4 @@ 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>
@@ -42,6 +42,12 @@ 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-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;
+    @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;
  }

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

@@ -126,13 +126,6 @@ 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},
@@ -150,9 +143,7 @@ label:has(.help-text) {
  #{$form-input-selector},
  input:not([type]),
  textarea,
-  select,
-  .multiselect > .multiselect__tags,
-  .multiselect:not(.no-margin) {
+  select {
    @apply field-error;
  }

@@ -13,7 +13,6 @@
@import 'base';

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

 html,
@@ -66,4 +65,84 @@ 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;
+  }
 }
@@ -1,273 +0,0 @@
-@mixin label-multiselect-hover {
-  &::after {
-    @apply text-n-brand;
-  }
-
-  &:hover {
-    @apply bg-n-slate-3;
-
-    &::after {
-      @apply text-n-blue-11;
-    }
-  }
-}
-
-.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-base font-medium text-n-slate-12 line-clamp-1">
+          <h3 class="text-heading-2 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-sm line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-body-para 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-base font-medium">{{ title }}</h3>
+        <h3 class="text-n-slate-12 text-heading-2">{{ title }}</h3>
        <Button
          xs
          slate
@@ -29,14 +29,14 @@ const handleClick = () => {
          @click.stop="handleClick"
        />
      </div>
-      <p class="text-n-slate-11 text-sm mb-0">{{ description }}</p>
+      <p class="text-n-slate-11 text-body-para mb-0">{{ description }}</p>
    </div>

    <ul class="flex flex-col items-start gap-3 mt-3">
      <li
        v-for="feature in features"
        :key="feature.id"
-        class="flex items-center gap-3 text-sm"
+        class="flex items-center gap-3 text-body-para"
      >
        <Icon
          :icon="feature.icon"
@@ -60,23 +60,19 @@ 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-base font-medium text-n-slate-12 line-clamp-1">
+          <h3 class="text-heading-2 text-n-slate-12 line-clamp-1">
            {{ name }}
          </h3>
-          <div class="flex items-center gap-2">
-            <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>
+          <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 class="flex items-center gap-2">
          <Button
@@ -93,18 +89,18 @@ const handleFetchInboxes = () => {
          <Button icon="i-lucide-trash" sm slate ghost @click="handleDelete" />
        </div>
      </div>
-      <p class="text-n-slate-11 text-sm line-clamp-1 mb-0 py-1">
+      <p class="text-n-slate-11 text-body-para line-clamp-1 mb-0 py-1">
        {{ description }}
      </p>
      <div class="flex items-center gap-3 py-1.5">
-        <span v-if="order" class="text-n-slate-11 text-sm">
+        <span v-if="order" class="text-n-slate-11 text-body-para">
          {{
            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.ORDER')}:`
          }}
          <span class="text-n-slate-12">{{ order }}</span>
        </span>
        <div v-if="order" class="w-px h-3 bg-n-strong" />
-        <span v-if="priority" class="text-n-slate-11 text-sm">
+        <span v-if="priority" class="text-n-slate-11 text-body-para">
          {{
            `${t('ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.INDEX.CARD.PRIORITY')}:`
          }}
@@ -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';

@@ -1,5 +1,5 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+import Label from 'dashboard/components-next/label/Label.vue';

 const props = defineProps({
  id: {
@@ -22,6 +22,10 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  disabledLabel: {
+    type: String,
+    default: '',
+  },
  disabledMessage: {
    type: String,
    default: '',
@@ -30,8 +34,6 @@ const props = defineProps({

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

-const { t } = useI18n();
-
 const handleChange = () => {
  if (!props.isActive && !props.disabled) {
    emit('select', props.id);
@@ -41,7 +43,7 @@ const handleChange = () => {

 <template>
  <div
-    class="relative 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="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="[
      disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
      isActive ? 'outline-n-blue-9' : 'outline-n-weak',
@@ -49,39 +51,29 @@ const handleChange = () => {
    ]"
    @click="handleChange"
  >
-    <div class="absolute top-4 right-4">
-      <input
-        :id="`${id}`"
-        :checked="isActive"
-        :value="id"
-        :name="id"
-        :disabled="disabled"
-        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">
-      <div class="flex items-center gap-2">
-        <h3 class="text-sm font-medium text-n-slate-12">
-          {{ label }}
-        </h3>
-        <span
-          v-if="disabled"
-          class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-n-yellow-3 text-n-yellow-11"
-        >
-          {{
-            t(
-              'ASSIGNMENT_POLICY.AGENT_ASSIGNMENT_POLICY.FORM.ASSIGNMENT_ORDER.BALANCED.PREMIUM_BADGE'
-            )
-          }}
-        </span>
+    <div class="flex flex-col gap-2 items-start">
+      <div class="flex items-center justify-between w-full gap-3">
+        <div class="flex items-center gap-2">
+          <h3 class="text-heading-3 text-n-slate-12">
+            {{ label }}
+          </h3>
+          <Label v-if="disabled" :label="disabledLabel" color="amber" compact />
+        </div>
+        <input
+          :id="`${id}`"
+          :checked="isActive"
+          :value="id"
+          :name="id"
+          :disabled="disabled"
+          type="radio"
+          class="h-4 w-4 border-n-slate-6 text-n-brand focus:ring-n-brand focus:ring-offset-0 flex-shrink-0"
+          @change="handleChange"
+        />
      </div>
-      <p class="text-sm text-n-slate-11">
+      <p class="text-body-main text-n-slate-11">
        {{ disabled && disabledMessage ? disabledMessage : description }}
      </p>
+      <slot />
    </div>
  </div>
 </template>
@@ -21,10 +21,10 @@ const handleButtonClick = () => {

 <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 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto">
+    <header class="sticky top-0 z-10 px-6">
+      <div class="w-full max-w-5xl mx-auto">
        <div class="flex items-center justify-between w-full h-20 gap-2">
-          <span class="text-xl font-medium text-n-slate-12">
+          <span class="text-heading-1 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 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto py-4">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full max-w-5xl mx-auto py-4">
        <slot name="default" />
      </div>
    </main>
@@ -19,7 +19,7 @@ const handleClick = () => {

 <template>
  <div
-    class="flex flex-col w-full outline-1 outline outline-n-container group/cardLayout rounded-xl bg-n-solid-2"
+    class="flex flex-col w-full outline-1 outline outline-n-container -outline-offset-1 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">
+  <header class="sticky top-0 z-10 px-6">
    <div
-      class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[60rem]"
+      class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
    >
-      <span class="text-xl font-medium truncate text-n-slate-12">
+      <span class="text-heading-1 truncate text-n-slate-12">
        {{ headerTitle }}
      </span>
      <div class="flex items-center flex-row flex-shrink-0 gap-2">
@@ -32,17 +32,18 @@ const updateCurrentPage = page => {
        @search="emit('search', $event)"
        @update:sort="emit('update:sort', $event)"
      />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+      <main class="flex-1 px-6 overflow-y-auto">
+        <div class="w-full mx-auto max-w-5xl py-4">
          <slot name="default" />
        </div>
      </main>
-      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPaginationFooter" class="sticky bottom-0 z-0">
        <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: {
@@ -44,6 +44,7 @@ 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',
@@ -66,6 +67,7 @@ const defaultState = {
      facebook: '',
      github: '',
      instagram: '',
+      telegram: '',
      tiktok: '',
      linkedin: '',
      twitter: '',
@@ -103,9 +105,13 @@ const prepareStateBasedOnProps = () => {
    countryCode = '',
    country = '',
    city = '',
+    socialTelegramUserName = '',
    socialProfiles = {},
  } = additionalAttributes || {};

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

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

-const openCreateNewContactDialog = async () => {
-  await createNewContactDialogRef.value?.contactsFormRef.resetValidation();
+const openCreateNewContactDialog = () => {
  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-[60rem] px-6"
+    class="max-w-5xl"
    @open-filter="emit('openFilter')"
    @clear-filters="emit('clearFilters')"
  />
@@ -98,8 +98,8 @@ const showPagination = computed(() => {
        @apply-filter="emit('applyFilter', $event)"
        @clear-filters="emit('clearFilters')"
      />
-      <main class="flex-1 overflow-y-auto">
-        <div class="w-full mx-auto max-w-[60rem]">
+      <main class="flex-1 overflow-y-auto px-6">
+        <div class="w-full mx-auto max-w-5xl">
          <ContactsActiveFiltersPreview
            v-if="showActiveFiltersPreview"
            :active-segment="activeSegment"
@@ -114,11 +114,12 @@ const showPagination = computed(() => {
          />
        </div>
      </main>
-      <footer v-if="showPagination" class="sticky bottom-0 z-0 px-4 pb-4">
+      <footer v-if="showPagination" class="sticky bottom-0 z-0">
        <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,8 +1,10 @@
 <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: {
@@ -18,7 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['edit', 'delete']);

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

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

 <template>
-  <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 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>
-          <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 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>
        </div>
      </div>
-      <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"
-        />
+      <div class="flex gap-3 justify-end flex-shrink-0">
        <Button
-          icon="i-lucide-pencil-line"
-          size="sm"
-          color="slate"
-          ghost
+          icon="i-woot-edit-pen"
+          slate
+          sm
          @click="emit('edit', attribute)"
        />
-        <div class="w-px h-3 bg-n-strong" />
        <Button
-          icon="i-lucide-trash"
-          size="sm"
-          color="slate"
-          ghost
+          icon="i-woot-bin"
+          slate
+          sm
+          class="hover:enabled:text-n-ruby-11 hover:enabled:bg-n-ruby-2"
          @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,18 +35,20 @@ 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-sm font-medium text-n-slate-12 line-clamp-1">
+      <h5 class="text-heading-3 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-sm text-n-slate-11">{{ attribute.type }}</span>
+        <span class="text-body-para 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-sm text-n-slate-11">{{ attribute.value }}</span>
+        <span class="text-body-para 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-base font-medium text-n-slate-12">
+          <h3 class="text-heading-2 text-n-slate-12">
            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.TITLE') }}
          </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
+          <p class="mb-0 text-body-para text-n-slate-11">
            {{ $t('CONVERSATION_WORKFLOW.REQUIRED_ATTRIBUTES.DESCRIPTION') }}
          </p>
        </div>
@@ -2,6 +2,7 @@
 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: {
@@ -18,11 +19,13 @@ 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(
@@ -31,12 +34,9 @@ const config = computed(
 </script>

 <template>
-  <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>
+  <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>
 </template>
@@ -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-[60rem] mx-auto overflow-hidden h-full max-h-[28rem]"
+      class="relative w-full max-w-5xl mx-auto overflow-hidden h-full max-h-[28rem]"
    >
      <div
        v-if="showBackdrop"
@@ -59,8 +59,8 @@ const togglePortalSwitcher = () => {

 <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 lg:px-0">
-      <div class="w-full max-w-[60rem] mx-auto lg:px-6">
+    <header class="sticky top-0 z-10 px-6 pb-3">
+      <div class="w-full max-w-5xl mx-auto">
        <div
          v-if="showHeaderTitle"
          class="flex items-center justify-start h-20 gap-2"
@@ -95,16 +95,17 @@ const togglePortalSwitcher = () => {
        <slot name="header-actions" />
      </div>
    </header>
-    <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">
+    <main class="flex-1 px-6 overflow-y-auto">
+      <div class="w-full max-w-5xl mx-auto py-3">
        <slot name="content" />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalItems"
        :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
        @update:current-page="updateCurrentPage"
      />
    </footer>
@@ -62,6 +62,7 @@ const onCreate = async () => {
      from: route.name,
    });

+    selectedLocale.value = '';
    dialogRef.value?.close();
    useAlert(
      t('HELP_CENTER.LOCALES_PAGE.ADD_LOCALE_DIALOG.API.SUCCESS_MESSAGE')
@@ -95,6 +95,7 @@ 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)"
@@ -127,6 +128,7 @@ 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)"
@@ -70,7 +70,7 @@ describe('composeConversationHelper', () => {
      const result = helpers.buildContactableInboxesList(inboxes);
      expect(result[0]).toMatchObject({
        id: 1,
-        icon: 'i-ri-mail-line',
+        icon: 'i-woot-mail',
        label: 'Email Inbox (support@example.com)',
        action: 'inbox',
        value: 1,
@@ -0,0 +1,31 @@
+<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>
@@ -0,0 +1,37 @@
+<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>
@@ -0,0 +1,45 @@
+<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,6 +112,19 @@ 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:
@@ -184,7 +197,7 @@ watch(

 <template>
  <span
-    class="relative inline-flex group/avatar z-0 flex-shrink-0"
+    class="relative inline-flex group/avatar z-0 flex-shrink-0 align-middle"
    :style="containerStyles"
  >
    <!-- Status Badge -->
@@ -216,9 +229,9 @@ watch(
    <!-- Avatar Container -->
    <span
      role="img"
-      class="relative inline-flex items-center justify-center object-cover overflow-hidden font-medium"
+      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="[
-        roundedFull ? 'rounded-full' : 'rounded-xl',
+        borderRadiusClass,
        {
          'dark:!bg-[var(--dark-bg)] dark:!text-[var(--dark-text)]':
            !showDefaultAvatar && (!src || !isImageValid),
@@ -267,7 +280,8 @@ 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 rounded-xl bg-n-alpha-black1 group-hover/avatar:visible group-hover/avatar:opacity-100"
+          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"
          @click="handleUploadAvatar"
        >
          <Icon
@@ -117,7 +117,7 @@ const handleCreateAssistant = () => {
 <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-[60rem] mx-auto">
+      <div class="w-full max-w-5xl 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,7 +140,9 @@ const handleCreateAssistant = () => {
                  >
                    <Button
                      icon="i-lucide-chevron-down"
-                      variant="ghost"
+                      :variant="
+                        showAssistantSwitcherDropdown ? 'faded' : 'ghost'
+                      "
                      color="slate"
                      size="xs"
                      :disabled="isFetchingAssistants"
@@ -204,7 +206,7 @@ const handleCreateAssistant = () => {
      </div>
    </header>
    <main class="flex-1 px-6 overflow-y-auto">
-      <div class="w-full max-w-[60rem] h-full mx-auto py-4">
+      <div class="w-full max-w-5xl h-full mx-auto py-4">
        <slot v-if="!showPaywall" name="controls" />
        <div
          v-if="isFetching"
@@ -222,11 +224,12 @@ const handleCreateAssistant = () => {
        <slot />
      </div>
    </main>
-    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10 px-4 pb-4">
+    <footer v-if="showPaginationFooter" class="sticky bottom-0 z-10">
      <PaginationFooter
        :current-page="currentPage"
        :total-items="totalCount"
        :items-per-page="itemsPerPage"
+        class="max-w-[67rem]"
        @update:current-page="handlePageChange"
      />
    </footer>
@@ -27,7 +27,7 @@ const openBilling = () => {

 <template>
  <div
-    class="w-full max-w-[60rem] mx-auto h-full max-h-[448px] grid place-content-center"
+    class="w-full max-w-5xl mx-auto h-full max-h-[448px] grid place-content-center"
  >
    <BasePaywallModal
      class="mx-auto"
@@ -56,8 +56,13 @@ const selectedLabel = computed(() => {
 });

 const selectOption = option => {
-  selectedValue.value = option.value;
-  emit('update:modelValue', option.value);
+  if (selectedValue.value === option.value) {
+    selectedValue.value = '';
+    emit('update:modelValue', '');
+  } else {
+    selectedValue.value = option.value;
+    emit('update:modelValue', option.value);
+  }
  open.value = false;
  search.value = '';
 };
@@ -79,8 +79,8 @@ defineExpose({
      :aria-multiselectable="multiple"
    >
      <li
-        v-for="option in options"
-        :key="option.value"
+        v-for="(option, index) in options"
+        :key="`${option.value}-${index}`"
        class="flex items-center justify-between w-full gap-2 px-3 py-2 text-sm transition-colors duration-150 cursor-pointer hover:bg-n-alpha-2"
        :class="{
          'bg-n-alpha-2': isSelected(option),
@@ -53,6 +53,11 @@ const props = defineProps({
    default: 'lg',
    validator: value => ['3xl', '2xl', 'xl', 'lg', 'md', 'sm'].includes(value),
  },
+  position: {
+    type: String,
+    default: 'center',
+    validator: value => ['center', 'top'].includes(value),
+  },
 });

 const emit = defineEmits(['confirm', 'close']);
@@ -61,6 +66,7 @@ const { t } = useI18n();

 const dialogRef = ref(null);
 const dialogContentRef = ref(null);
+const isOpen = ref(false);

 const maxWidthClass = computed(() => {
  const classesMap = {
@@ -75,13 +81,19 @@ const maxWidthClass = computed(() => {
  return classesMap[props.width] ?? 'max-w-md';
 });

+const positionClass = computed(() =>
+  props.position === 'top' ? 'dialog-position-top' : ''
+);
+
 const open = () => {
+  isOpen.value = true;
  dialogRef.value?.showModal();
 };

 const close = () => {
  emit('close');
  dialogRef.value?.close();
+  isOpen.value = false;
 };

 const confirm = () => {
@@ -98,6 +110,7 @@ defineExpose({ open, close });
      class="w-full transition-all duration-300 ease-in-out shadow-xl rounded-xl"
      :class="[
        maxWidthClass,
+        positionClass,
        overflowYAuto ? 'overflow-y-auto' : 'overflow-visible',
      ]"
      @close="close"
@@ -105,7 +118,7 @@ defineExpose({ open, close });
      <OnClickOutside @trigger="close">
        <form
          ref="dialogContentRef"
-          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-left align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
+          class="flex flex-col w-full h-auto gap-6 p-6 overflow-visible text-start align-middle transition-all duration-300 ease-in-out transform bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
          @submit.prevent="confirm"
          @click.stop
        >
@@ -119,7 +132,7 @@ defineExpose({ open, close });
              </p>
            </slot>
          </div>
-          <slot />
+          <slot v-if="isOpen" />
          <!-- Dialog content will be injected here -->
          <slot name="footer">
            <div
@@ -156,4 +169,9 @@ defineExpose({ open, close });
 dialog::backdrop {
  @apply bg-n-alpha-black1 backdrop-blur-[4px];
 }
+
+.dialog-position-top {
+  margin-top: clamp(2rem, 5vh, 5rem);
+  margin-bottom: auto;
+}
 </style>
@@ -4,6 +4,10 @@ defineProps({
    type: String,
    default: '',
  },
+  height: {
+    type: String,
+    default: 'max-h-96',
+  },
 });
 </script>

@@ -15,7 +19,10 @@ defineProps({
    >
      {{ title }}
    </div>
-    <ul class="gap-2 grid reset-base list-none px-2 max-h-96 overflow-y-auto">
+    <ul
+      class="gap-2 grid reset-base list-none px-2 overflow-y-auto"
+      :class="height"
+    >
      <slot />
    </ul>
  </div>
@@ -50,7 +50,7 @@ const openLink = link => {
      ]"
    >
      <section
-        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80"
+        class="absolute top-full mt-6 ltr:left-0 rtl:right-0 outline outline-1 outline-n-weak bg-n-alpha-3 backdrop-blur-[100px] rounded-xl p-4 w-80 z-20"
      >
        <div
          class="absolute -top-[0.77rem] ltr:left-12 rtl:right-12 w-6 h-6 ltr:rotate-45 rtl:-rotate-45 rtl:rounded-tr ltr:rounded-tl rtl:border-r ltr:border-l border-t border-n-weak bg-n-alpha-3 z-10"
@@ -50,12 +50,12 @@ const currentFilter = computed(() =>
 );

 const getOperator = (filter, selectedOperator) => {
-  const operatorFromOptions = filter.filterOperators.find(
+  const operatorFromOptions = filter?.filterOperators?.find(
    operator => operator.value === selectedOperator
  );

  if (!operatorFromOptions) {
-    return filter.filterOperators[0];
+    return filter?.filterOperators?.[0];
  }

  return operatorFromOptions;
@@ -138,7 +138,11 @@ const validate = () => {
  return !validationError.value;
 };

-defineExpose({ validate });
+const resetValidation = () => {
+  showErrors.value = false;
+};
+
+defineExpose({ validate, resetValidation });
 </script>

 <template>
@@ -166,18 +170,20 @@ defineExpose({ validate });
      <FilterSelect
        v-model="filterOperator"
        variant="ghost"
-        :options="currentFilter.filterOperators"
+        :options="currentFilter?.filterOperators"
      />
-      <template v-if="currentOperator.hasInput">
+      <template v-if="currentOperator?.hasInput">
        <MultiSelect
          v-if="inputType === 'multiSelect'"
          v-model="values"
          :options="currentFilter.options"
+          dropdown-max-height="max-h-72"
        />
        <SingleSelect
          v-else-if="inputType === 'searchSelect'"
          v-model="values"
          :options="currentFilter.options"
+          dropdown-max-height="max-h-64"
        />
        <SingleSelect
          v-else-if="inputType === 'booleanSelect'"
@@ -45,7 +45,7 @@ const { height } = useWindowSize();
 const { height: dropdownHeight } = useElementBounding(dropdownRef);

 const selectedOption = computed(() => {
-  return props.options.find(o => o.value === selected.value) || {};
+  return props.options?.find(o => o.value === selected.value) || {};
 });

 const iconToRender = computed(() => {
@@ -87,18 +87,25 @@ const updateSelected = newValue => {
    </template>
    <DropdownBody
      ref="dropdownRef"
-      class="min-w-48 z-50"
+      class="min-w-56 z-50"
      :class="dropdownPosition"
      strong
    >
-      <DropdownSection class="[&>ul]:max-h-80">
-        <DropdownItem
-          v-for="option in options"
-          :key="option.value"
-          :label="option.label"
-          :icon="option.icon"
-          @click="updateSelected(option.value)"
-        />
+      <DropdownSection class="[&>ul]:max-h-72">
+        <template v-for="option in options" :key="option.value">
+          <li
+            v-if="option.disabled"
+            class="px-2 py-1.5 text-xs font-medium text-n-slate-10 select-none"
+          >
+            {{ option.label }}
+          </li>
+          <DropdownItem
+            v-else
+            :label="option.label"
+            :icon="option.icon"
+            @click="updateSelected(option.value)"
+          />
+        </template>
      </DropdownSection>
    </DropdownBody>
  </DropdownContainer>
@@ -8,7 +8,7 @@ import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
 import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
 import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';

-const { options, maxChips } = defineProps({
+const { options, maxChips, dropdownMaxHeight } = defineProps({
  options: {
    type: Array,
    required: true,
@@ -17,6 +17,10 @@ const { options, maxChips } = defineProps({
    type: Number,
    default: 3,
  },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
 });

 const { t } = useI18n();
@@ -123,7 +127,7 @@ const toggleOption = option => {
      </Button>
    </template>
    <DropdownBody class="top-0 min-w-48 z-50" strong>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
        <DropdownItem
          v-for="option in options"
          :key="option.id"
@@ -12,10 +12,12 @@ import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
 const {
  options,
  disableSearch,
+  disableDeselect,
  placeholderIcon,
  placeholder,
  placeholderTrailingIcon,
  searchPlaceholder,
+  dropdownMaxHeight,
 } = defineProps({
  options: {
    type: Array,
@@ -41,6 +43,14 @@ const {
    type: String,
    default: '',
  },
+  dropdownMaxHeight: {
+    type: String,
+    default: 'max-h-80',
+  },
+  disableDeselect: {
+    type: Boolean,
+    default: false,
+  },
 });

 const { t } = useI18n();
@@ -63,6 +73,8 @@ const selectedItem = computed(() => {
  const optionToSearch = Array.isArray(selected.value)
    ? selected.value[0]
    : selected.value;
+
+  if (!optionToSearch) return null;
  // extract the selected item from the options array
  // this ensures that options like icon is also included
  return options.find(option => option.id === optionToSearch.id);
@@ -77,7 +89,7 @@ const toggleSelected = option => {
  };

  if (selected.value && selected.value.id === optionToToggle.id) {
-    selected.value = null;
+    if (!disableDeselect) selected.value = null;
  } else {
    selected.value = optionToToggle;
  }
@@ -124,7 +136,7 @@ const toggleSelected = option => {
          :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
        />
      </div>
-      <DropdownSection class="[&>ul]:max-h-80">
+      <DropdownSection :height="dropdownMaxHeight">
        <template v-if="searchResults.length">
          <DropdownItem
            v-for="option in searchResults"
@@ -9,12 +9,12 @@ export function useChannelIcon(inbox) {
    'Channel::Sms': 'i-woot-sms',
    'Channel::Telegram': 'i-woot-telegram',
    'Channel::TwilioSms': 'i-woot-sms',
-    'Channel::TwitterProfile': 'i-ri-twitter-x-fill',
+    'Channel::TwitterProfile': 'i-woot-x',
    'Channel::WebWidget': 'i-woot-website',
    'Channel::Whatsapp': 'i-woot-whatsapp',
    'Channel::Instagram': 'i-woot-instagram',
    'Channel::Tiktok': 'i-woot-tiktok',
-    'Channel::Voice': 'i-ri-phone-fill',
+    'Channel::Voice': 'i-woot-voice',
  };

  const providerIconMap = {
@@ -22,7 +22,7 @@ describe('useChannelIcon', () => {
  it('returns correct icon for Voice channel', () => {
    const inbox = { channel_type: 'Channel::Voice' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-phone-fill');
+    expect(icon).toBe('i-woot-voice');
  });

  it('returns correct icon for Line channel', () => {
@@ -46,7 +46,7 @@ describe('useChannelIcon', () => {
  it('returns correct icon for Twitter channel', () => {
    const inbox = { channel_type: 'Channel::TwitterProfile' };
    const { value: icon } = useChannelIcon(inbox);
-    expect(icon).toBe('i-ri-twitter-x-fill');
+    expect(icon).toBe('i-woot-x');
  });

  it('returns correct icon for WebWidget channel', () => {
@@ -108,7 +108,7 @@ onMounted(() => {
    <label
      v-if="label"
      :for="uniqueId"
-      class="mb-0.5 text-sm font-medium text-n-slate-12"
+      class="mb-0.5 text-heading-3 text-n-slate-12"
    >
      {{ label }}
    </label>
@@ -145,7 +145,7 @@ onMounted(() => {
    />
    <p
      v-if="message"
-      class="min-w-0 mt-1 mb-0 text-xs truncate transition-all duration-500 ease-in-out"
+      class="min-w-0 mt-1 mb-0 text-label-small truncate transition-all duration-500 ease-in-out"
      :class="messageClass"
    >
      {{ message }}
@@ -0,0 +1,71 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  label: {
+    type: [Object, String],
+    required: true,
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+  color: {
+    type: String,
+    default: 'slate',
+    validator: value =>
+      ['slate', 'amber', 'teal', 'ruby', 'blue', 'iris'].includes(value),
+  },
+});
+
+const COLOR_CLASSES = {
+  slate: 'bg-n-label-color outline-n-label-border text-n-slate-12',
+  amber: 'bg-n-amber-2 outline-n-amber-4 text-n-amber-11',
+  teal: 'bg-n-teal-2 outline-n-teal-4 text-n-teal-11',
+  ruby: 'bg-n-ruby-2 outline-n-ruby-4 text-n-ruby-11',
+  blue: 'bg-n-blue-2 outline-n-blue-4 text-n-blue-11',
+  iris: 'bg-n-iris-2 outline-n-iris-4 text-n-iris-11',
+};
+
+const isStringLabel = computed(() => typeof props.label === 'string');
+
+const labelTitle = computed(() => {
+  return isStringLabel.value ? props.label : props.label?.title;
+});
+
+const labelDescription = computed(() => {
+  return (!isStringLabel.value && props.label?.description) || '';
+});
+
+const labelColor = computed(() => {
+  return isStringLabel.value ? null : props.label.color;
+});
+
+const colorClasses = computed(() => COLOR_CLASSES[props.color]);
+</script>
+
+<template>
+  <div
+    :title="labelDescription"
+    class="rounded-lg -outline-offset-1 outline outline-1 inline-flex items-center flex-shrink-0"
+    :class="[
+      colorClasses,
+      compact ? 'px-1.5 h-6 gap-1 rounded-md' : 'px-2.5 h-8 gap-1.5 rounded-lg',
+    ]"
+  >
+    <span
+      v-if="labelColor"
+      class="rounded-sm flex-shrink-0"
+      :class="compact ? 'size-1.5' : 'size-2'"
+      :style="{ background: labelColor }"
+    />
+    <slot v-else name="icon" />
+    <span
+      class="whitespace-nowrap"
+      :class="compact ? 'text-label-small' : 'text-label !font-420'"
+    >
+      {{ labelTitle }}
+    </span>
+    <slot name="action" />
+  </div>
+</template>
@@ -71,10 +71,10 @@ const pageInfo = computed(() => {

 <template>
  <div
-    class="flex justify-between h-12 w-full max-w-[calc(60rem-3px)] outline outline-n-container outline-1 -outline-offset-1 mx-auto bg-n-solid-2 rounded-xl py-2 ltr:pl-4 rtl:pr-4 ltr:pr-3 rtl:pl-3 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-10% before:dark:from-0% before:to-transparent before:h-4 before:pointer-events-none"
+    class="flex justify-between h-[3.375rem] w-full border-t border-n-weak mx-auto bg-n-surface-1 py-3 px-6 items-center before:absolute before:inset-x-0 before:-top-4 before:bg-gradient-to-t before:from-n-surface-1 before:from-0% before:to-transparent before:h-4 before:pointer-events-none"
  >
    <div class="flex items-center gap-3">
-      <span class="min-w-0 text-sm font-normal line-clamp-1 text-n-slate-11">
+      <span class="min-w-0 text-body-main line-clamp-1 text-n-slate-11">
        {{ currentPageInformation }}
      </span>
    </div>
@@ -97,11 +97,13 @@ const pageInfo = computed(() => {
        :disabled="isFirstPage"
        @click="changePage(currentPage - 1)"
      />
-      <div class="inline-flex items-center gap-2 text-sm text-n-slate-11">
-        <span class="px-3 tabular-nums py-0.5 bg-n-alpha-black2 rounded-md">
+      <div class="inline-flex items-center gap-2 text-sm">
+        <span
+          class="px-3 tabular-nums py-0.5 font-420 bg-n-input-background text-body-main text-n-slate-12 rounded-md"
+        >
          {{ formatFullNumber(currentPage) }}
        </span>
-        <span class="truncate">
+        <span class="truncate text-body-main text-n-slate-11">
          {{ pageInfo }}
        </span>
      </div>
@@ -0,0 +1,97 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+defineProps({
+  options: {
+    type: Array,
+    default: () => [],
+    validator: options =>
+      options.every(
+        opt => typeof opt === 'object' && 'value' in opt && 'label' in opt
+      ),
+  },
+  groups: {
+    type: Array,
+    default: () => [],
+    validator: groups =>
+      groups.every(
+        group =>
+          'label' in group &&
+          Array.isArray(group.options) &&
+          group.options.every(opt => 'value' in opt && 'label' in opt)
+      ),
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: String,
+    default: '',
+  },
+});
+
+const modelValue = defineModel({
+  type: [String, Number, Boolean],
+  default: '',
+});
+</script>
+
+<template>
+  <div class="w-fit relative">
+    <select
+      v-model="modelValue"
+      :disabled="disabled"
+      class="appearance-none bg-none rounded-lg border-0 outline-1 outline -outline-offset-1 transition-all duration-200 bg-n-surface-1 !mb-0 py-2 px-3 pr-10 text-sm"
+      :class="{
+        'outline-n-weak hover:outline-n-slate-6 focus:outline-n-blue-9':
+          !error && !disabled,
+        'outline-n-red-9 focus:outline-n-red-9': error && !disabled,
+        'outline-n-weak bg-n-slate-2 cursor-not-allowed opacity-60': disabled,
+      }"
+    >
+      <option v-if="placeholder" value="" disabled>
+        {{ placeholder }}
+      </option>
+      <template v-if="groups.length">
+        <optgroup
+          v-for="group in groups"
+          :key="group.label"
+          :label="group.label"
+        >
+          <option
+            v-for="option in group.options"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+          >
+            {{ option.label }}
+          </option>
+        </optgroup>
+      </template>
+      <template v-else>
+        <option
+          v-for="option in options"
+          :key="option.value"
+          :value="option.value"
+          :disabled="option.disabled"
+        >
+          {{ option.label }}
+        </option>
+      </template>
+    </select>
+    <div
+      class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"
+    >
+      <Icon
+        icon="i-lucide-chevron-down"
+        class="size-4 text-n-slate-11"
+        :class="{ 'opacity-50': disabled }"
+      />
+    </div>
+  </div>
+</template>
@@ -25,8 +25,8 @@ const reauthorizationRequired = computed(() => {
 </script>

 <template>
-  <span class="size-5 grid place-content-center rounded-full bg-n-alpha-2">
-    <ChannelIcon :inbox="inbox" class="size-3" />
+  <span class="size-4 grid place-content-center rounded-full">
+    <ChannelIcon :inbox="inbox" class="size-4" />
  </span>
  <div class="flex-1 truncate min-w-0">{{ label }}</div>
  <div
@@ -286,7 +286,7 @@ const menuItems = computed(() => {
          children: sortedInboxes.value.map(inbox => ({
            name: `${inbox.name}-${inbox.id}`,
            label: inbox.name,
-            icon: h(ChannelIcon, { inbox, class: 'size-[12px]' }),
+            icon: h(ChannelIcon, { inbox, class: 'size-[16px]' }),
            to: accountScopedRoute('inbox_dashboard', { inbox_id: inbox.id }),
            component: leafProps =>
              h(ChannelLeaf, {
@@ -595,6 +595,16 @@ const menuItems = computed(() => {
          name: 'Settings Teams',
          label: t('SIDEBAR.TEAMS'),
          icon: 'i-lucide-users',
+          activeOn: [
+            'settings_teams_list',
+            'settings_teams_new',
+            'settings_teams_finish',
+            'settings_teams_add_agents',
+            'settings_teams_show',
+            'settings_teams_edit',
+            'settings_teams_edit_members',
+            'settings_teams_edit_finish',
+          ],
          to: accountScopedRoute('settings_teams_list'),
        },
        ...(hasAdvancedAssignment.value
@@ -603,6 +613,15 @@ const menuItems = computed(() => {
                name: 'Settings Agent Assignment',
                label: t('SIDEBAR.AGENT_ASSIGNMENT'),
                icon: 'i-lucide-user-cog',
+                activeOn: [
+                  'assignment_policy_index',
+                  'agent_assignment_policy_index',
+                  'agent_assignment_policy_create',
+                  'agent_assignment_policy_edit',
+                  'agent_capacity_policy_index',
+                  'agent_capacity_policy_create',
+                  'agent_capacity_policy_edit',
+                ],
                to: accountScopedRoute('assignment_policy_index'),
              },
            ]
@@ -611,6 +630,14 @@ const menuItems = computed(() => {
          name: 'Settings Inboxes',
          label: t('SIDEBAR.INBOXES'),
          icon: 'i-lucide-inbox',
+          activeOn: [
+            'settings_inbox_list',
+            'settings_inbox_show',
+            'settings_inbox_new',
+            'settings_inbox_finish',
+            'settings_inboxes_page_channel',
+            'settings_inboxes_add_agents',
+          ],
          to: accountScopedRoute('settings_inbox_list'),
        },
        {
@@ -703,7 +730,7 @@ const menuItems = computed(() => {
      closeMobileSidebar,
      { ignore: ['#mobile-sidebar-launcher'] },
    ]"
-    class="bg-n-background flex flex-col text-sm pb-0.5 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
+    class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
    :class="[
      {
        'shadow-lg md:shadow-none': isMobileSidebarOpen,
@@ -824,7 +851,7 @@ const menuItems = computed(() => {
        "
      />
      <div
-        class="p-1 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
+        class="px-1 py-1.5 flex-shrink-0 flex w-full z-50 gap-2 items-center border-t border-n-weak shadow-[0px_-2px_4px_0px_rgba(27,28,29,0.02)]"
        :class="isEffectivelyCollapsed ? 'justify-center' : 'justify-between'"
      >
        <SidebarProfileMenu
@@ -44,8 +44,10 @@ const shouldRenderComponent = computed(() => {
        :active
      />
      <template v-else>
-        <Icon v-if="icon" :icon="icon" class="size-4 inline-block" />
-        <div class="flex-1 truncate min-w-0">{{ label }}</div>
+        <span v-if="icon" class="size-4 grid place-content-center rounded-full">
+          <Icon :icon="icon" class="size-4 inline-block" />
+        </span>
+        <div class="flex-1 truncate min-w-0 text-sm">{{ label }}</div>
      </template>
    </component>
  </Policy>
@@ -19,20 +19,24 @@ const updateValue = () => {
 <template>
  <button
    type="button"
-    class="relative h-4 transition-colors duration-200 ease-in-out rounded-full w-7 focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 flex-shrink-0"
-    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6 disabled:bg-n-slate-6/60'"
+    class="group relative h-4 rounded-full w-7 flex-shrink-0 select-none focus:outline-none focus:ring-1 focus:ring-n-brand focus:ring-offset-n-slate-2 focus:ring-offset-2 transition-colors duration-200 ease-in-out"
+    :class="modelValue ? 'bg-n-brand' : 'bg-n-slate-6'"
    role="switch"
    :aria-checked="modelValue"
    @click="updateValue"
  >
    <span class="sr-only">{{ t('SWITCH.TOGGLE') }}</span>
    <span
-      class="absolute top-0.5 left-0.5 h-3 w-3 transform rounded-full shadow-sm transition-transform duration-200 ease-out"
+      class="absolute top-1/2 ltr:left-0.5 rtl:right-0.5 -translate-y-1/2 transition-transform duration-[350ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
      :class="
        modelValue
-          ? 'translate-x-3 bg-n-background'
-          : 'translate-x-0 bg-n-background'
+          ? 'ltr:translate-x-3 rtl:-translate-x-3 group-active:ltr:translate-x-[6px] rtl:group-active:-translate-x-[6px]'
+          : 'ltr:translate-x-0 rtl:translate-x-0'
      "
-    />
+    >
+      <span
+        class="block h-3 w-3 rounded-full bg-n-background shadow-md transition-[width] duration-[180ms] ease-in-out group-active:w-[18px]"
+      />
+    </span>
  </button>
 </template>
@@ -0,0 +1,175 @@
+<script setup>
+import { ref } from 'vue';
+import { BaseTable, BaseTableRow, BaseTableCell } from './index';
+import Button from '../button/Button.vue';
+import Avatar from '../avatar/Avatar.vue';
+import ToggleSwitch from '../switch/Switch.vue';
+
+const automationData = ref([
+  {
+    id: 1,
+    name: 'Welcome Message',
+    description: 'Send welcome message to new contacts',
+    active: true,
+    createdOn: 'Apr 21, 2022',
+  },
+  {
+    id: 2,
+    name: 'Auto-assign to Sales',
+    description: 'Automatically assign sales conversations to sales team',
+    active: false,
+    createdOn: 'May 15, 2022',
+  },
+  {
+    id: 3,
+    name: 'Tag Premium Users',
+    description: 'Add premium tag to conversations from premium users',
+    active: true,
+    createdOn: 'Jun 10, 2022',
+  },
+]);
+
+const agentData = ref([
+  {
+    id: 1,
+    name: 'John Doe',
+    email: 'john@example.com',
+    role: 'Administrator',
+    verified: true,
+    avatarUrl: '',
+  },
+  {
+    id: 2,
+    name: 'Jane Smith',
+    email: 'jane@example.com',
+    role: 'Agent',
+    verified: true,
+    avatarUrl: '',
+  },
+]);
+
+const emptyData = ref([]);
+
+const headers = ['Name', 'Active', 'Created on', 'Actions'];
+const agentHeaders = ['Agent', 'Role', 'Verification', 'Actions'];
+</script>
+
+<template>
+  <Story title="Components/Table" :layout="{ type: 'grid', width: '100%' }">
+    <!-- Basic Table -->
+    <Variant title="Basic Table">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="headers" :items="automationData">
+          <template #row="{ items }">
+            <BaseTableRow
+              v-for="automation in items"
+              :key="automation.id"
+              :item="automation"
+            >
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-2 min-w-0 max-w-full">
+                    <span
+                      class="text-body-main text-n-slate-12 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.name }}
+                    </span>
+                    <div class="w-px h-3 rounded-lg bg-n-weak flex-shrink-0" />
+                    <span
+                      class="text-body-main text-n-slate-11 truncate min-w-0 flex-1"
+                    >
+                      {{ automation.description }}
+                    </span>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <div class="flex justify-center">
+                    <ToggleSwitch v-model="automation.active" />
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ automation.createdOn }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                    <Button icon="i-woot-clone" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Table with Avatars -->
+    <Variant title="Table with Avatars">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable :headers="agentHeaders" :items="agentData">
+          <template #row="{ items }">
+            <BaseTableRow v-for="agent in items" :key="agent.id" :item="agent">
+              <template #default>
+                <BaseTableCell>
+                  <div class="flex items-center gap-3 min-w-0">
+                    <Avatar :user="agent" :size="40" class="flex-shrink-0" />
+                    <div class="flex flex-col min-w-0">
+                      <span class="text-body-main text-n-slate-12 truncate">
+                        {{ agent.name }}
+                      </span>
+                      <span class="text-body-main text-n-slate-11 truncate">
+                        {{ agent.email }}
+                      </span>
+                    </div>
+                  </div>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.role }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell>
+                  <span
+                    class="text-body-main text-n-slate-12 whitespace-nowrap"
+                  >
+                    {{ agent.verified ? 'Verified' : 'Pending' }}
+                  </span>
+                </BaseTableCell>
+
+                <BaseTableCell align="end" class="w-24">
+                  <div class="flex gap-3 justify-end flex-shrink-0">
+                    <Button icon="i-woot-edit-pen" slate sm />
+                    <Button icon="i-woot-bin" slate sm />
+                  </div>
+                </BaseTableCell>
+              </template>
+            </BaseTableRow>
+          </template>
+        </BaseTable>
+      </div>
+    </Variant>
+
+    <!-- Empty State -->
+    <Variant title="Empty State">
+      <div class="p-4 bg-n-surface-1">
+        <BaseTable
+          :headers="headers"
+          :items="emptyData"
+          no-data-message="No automation rules found"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
@@ -0,0 +1,60 @@
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  headers: {
+    type: Array,
+    default: () => [],
+  },
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  noDataMessage: {
+    type: String,
+    default: '',
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const hasHeaderSlot = computed(() => !!props.headers.length);
+const showHeaders = computed(
+  () => hasHeaderSlot.value && props.items.length > 0
+);
+</script>
+
+<template>
+  <div class="w-full">
+    <table class="min-w-full table-auto divide-y divide-n-weak">
+      <thead v-if="showHeaders" class="border-t border-n-weak">
+        <tr>
+          <th
+            v-for="(header, index) in headers"
+            :key="index"
+            class="py-4 ltr:pr-4 rtl:pl-4 text-start text-heading-3 text-n-slate-12 capitalize"
+          >
+            <slot :name="`header-${index}`" :header="header">
+              {{ header }}
+            </slot>
+          </th>
+        </tr>
+      </thead>
+      <tbody class="divide-y divide-n-weak text-n-slate-11">
+        <template v-if="items.length">
+          <slot name="row" :items="items" />
+        </template>
+        <tr v-else-if="noDataMessage && !loading">
+          <td
+            :colspan="headers.length || 1"
+            class="py-20 text-center text-body-main !text-base text-n-slate-11"
+          >
+            {{ noDataMessage }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  align: {
+    type: String,
+    default: 'start',
+    validator: value => ['start', 'center', 'end'].includes(value),
+  },
+});
+</script>
+
+<template>
+  <td
+    class="py-3 ltr:pr-4 rtl:pl-4 text-body-main"
+    :class="{
+      'text-start': align === 'start',
+      'text-center': align === 'center',
+      'text-end': align === 'end',
+    }"
+  >
+    <slot />
+  </td>
+</template>
@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <tr>
+    <slot :item="item" />
+  </tr>
+</template>
@@ -0,0 +1,3 @@
+export { default as BaseTable } from './BaseTable.vue';
+export { default as BaseTableRow } from './BaseTableRow.vue';
+export { default as BaseTableCell } from './BaseTableCell.vue';
@@ -36,6 +36,11 @@ const props = defineProps({
  },
  focusOnMount: { type: Boolean, default: false },
  allowCreate: { type: Boolean, default: false },
+  // Skip label-based dedup when the consumer already filters menuItems by ID.
+  // Prevents removing all same-name items when one is selected (e.g. duplicate agent names).
+  skipLabelDedup: { type: Boolean, default: false },
+  // When false, the dropdown won't auto-open on mount; it opens only on click/focus.
+  autoOpenDropdown: { type: Boolean, default: true },
 });

 const emit = defineEmits([
@@ -56,7 +61,7 @@ const modelValue = defineModel({
 const tagInputRef = ref(null);
 const tags = ref(props.modelValue);
 const newTag = ref('');
-const isFocused = ref(true);
+const isFocused = ref(props.autoOpenDropdown);

 const rules = computed(() => getValidationRules(props.type));
 const v$ = useVuelidate(rules, { newTag });
@@ -74,11 +79,11 @@ const showInput = computed(() =>
 const showDropdownMenu = computed(() =>
  props.mode === MODE.SINGLE && tags.value.length >= 1
    ? false
-    : props.showDropdown
+    : props.showDropdown && isFocused.value
 );

-const filteredMenuItems = computed(() =>
-  buildTagMenuItems({
+const filteredMenuItems = computed(() => {
+  const items = buildTagMenuItems({
    mode: props.mode,
    tags: tags.value,
    menuItems: props.menuItems,
@@ -86,8 +91,14 @@ const filteredMenuItems = computed(() =>
    isLoading: props.isLoading,
    type: props.type,
    isNewTagInValidType: isNewTagInValidType.value,
-  })
-);
+    allowCreate: props.allowCreate,
+    skipLabelDedup: props.skipLabelDedup,
+  });
+  if (props.type !== INPUT_TYPES.TEXT) return items;
+  const query = newTag.value?.trim()?.toLowerCase();
+  if (!query) return items;
+  return items.filter(item => item.label?.toLowerCase().includes(query));
+});

 const emitDataOnAdd = value => {
  const matchingMenuItem = findMatchingMenuItem(props.menuItems, value);
@@ -112,10 +123,13 @@ const addTag = async () => {
    return;
  }

-  if (
-    [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(props.type) ||
-    props.allowCreate
-  ) {
+  const isValidatedType = [INPUT_TYPES.EMAIL, INPUT_TYPES.TEL].includes(
+    props.type
+  );
+
+  if (!isValidatedType && !props.allowCreate && props.showDropdown) return;
+
+  if (isValidatedType || props.allowCreate) {
    if (!(await v$.value.$validate())) return;
    emitDataOnAdd(trimmedTag);
  }
@@ -125,28 +139,31 @@ const addTag = async () => {
 const removeTag = index => {
  tags.value.splice(index, 1);
  modelValue.value = tags.value;
-  emit('remove');
+  emit('remove', index);
 };

 const handleDropdownAction = async ({
  email: emailAddress,
  phoneNumber,
+  label,
  ...rest
 }) => {
  if (props.mode === MODE.SINGLE && tags.value.length >= 1) return;
  if (!props.showDropdown) return;

-  const isEmail = props.type === 'email';
-  newTag.value = isEmail ? emailAddress : phoneNumber;
+  const isEmail = props.type === INPUT_TYPES.EMAIL;
+  const tagValue = isEmail ? emailAddress : phoneNumber || label;

-  if (!(await v$.value.$validate())) return;
+  if (isEmail || props.type === INPUT_TYPES.TEL) {
+    newTag.value = tagValue;
+    if (!(await v$.value.$validate())) return;
+  }

-  const payload = isEmail
-    ? { email: emailAddress, ...rest }
-    : { phoneNumber, ...rest };
-
-  emit('add', payload);
-  updateValueAndFocus(emailAddress);
+  emit(
+    'add',
+    isEmail ? { email: emailAddress, ...rest } : { phoneNumber, label, ...rest }
+  );
+  updateValueAndFocus(tagValue);
 };

 const handleFocus = () => {
@@ -163,7 +180,7 @@ const handleKeydown = event => {
 };

 const handleClickOutside = () => {
-  if (tags.value.length) isFocused.value = false;
+  isFocused.value = false;
  emit('onClickOutside');
 };

@@ -261,6 +261,71 @@ describe('tagInputHelper', () => {
      });
      expect(result).toEqual(menuItems);
    });
+
+    it('does not create suggestion when allowCreate is false', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: false,
+      });
+      expect(result).toEqual([]);
+    });
+
+    it('still returns available menu items when allowCreate is false', () => {
+      const menuItems = [
+        { label: 'Agent 1', value: '1' },
+        { label: 'Agent 2', value: '2' },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        menuItems,
+        newTag: 'Agent',
+        allowCreate: false,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('creates new item when allowCreate is true (default)', () => {
+      const result = buildTagMenuItems({
+        ...baseParams,
+        type: INPUT_TYPES.EMAIL,
+        newTag: 'test@example.com',
+        allowCreate: true,
+      });
+      expect(result).toHaveLength(1);
+      expect(result[0]).toMatchObject({
+        label: 'test@example.com',
+        action: 'create',
+      });
+    });
+
+    it('skips label dedup when skipLabelDedup is true', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+        skipLabelDedup: true,
+      });
+      expect(result).toEqual(menuItems);
+    });
+
+    it('filters by label when skipLabelDedup is false (default)', () => {
+      const menuItems = [
+        { label: 'HDMA', value: 1 },
+        { label: 'HDMA', value: 2 },
+      ];
+      const result = buildTagMenuItems({
+        ...baseParams,
+        tags: ['HDMA'],
+        menuItems,
+      });
+      expect(result).toEqual([]);
+    });
  });

  describe('canAddTag', () => {
@@ -84,25 +84,29 @@ export const buildTagMenuItems = ({
  isLoading,
  type,
  isNewTagInValidType,
+  allowCreate = true,
+  skipLabelDedup = false,
 }) => {
  if (mode === MODE.SINGLE && tags.length >= 1) return [];

-  const availableMenuItems = menuItems.filter(
-    item => !tags.includes(item.label)
-  );
+  const availableMenuItems = skipLabelDedup
+    ? menuItems
+    : menuItems.filter(item => !tags.includes(item.label));

  // Show typed value as suggestion only if:
  // 1. There's a value being typed
  // 2. The value isn't already in the tags
  // 3. Validation passes (email/phone) and There are no menu items available
+  // 4. allowCreate is enabled
  const trimmedNewTag = newTag?.trim();
-  const shouldShowTypedValue =
+  const shouldShowCreateSuggestion =
+    allowCreate &&
    trimmedNewTag &&
    !tags.includes(trimmedNewTag) &&
    !isLoading &&
    !availableMenuItems.length;

-  if (shouldShowTypedValue) {
+  if (shouldShowCreateSuggestion) {
    const { isValid, formattedValue } = validateAndFormatNewTag(
      trimmedNewTag,
      type,
@@ -18,7 +18,7 @@ const props = defineProps({
  },
  year: {
    type: [Number, String],
-    required: true,
+    default: '',
  },
 });

@@ -47,7 +47,7 @@ defineProps({

    <div
      v-if="isComingSoon"
-      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-background/90 via-n-background/70 to-n-background/95 cursor-not-allowed"
+      class="absolute inset-0 flex items-center justify-center backdrop-blur-[2px] rounded-2xl bg-gradient-to-br from-n-surface-1/90 via-n-surface-1/70 to-n-surface-1/95 cursor-not-allowed"
    >
      <span class="text-n-slate-12 font-medium text-sm">
        {{ $t('CHANNEL_SELECTOR.COMING_SOON') }} 🚀
@@ -1,31 +0,0 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  description: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <div class="flex flex-col items-start w-full gap-6">
-    <div class="flex flex-col w-full gap-4">
-      <h4 v-if="title" class="text-lg font-medium text-n-slate-12">
-        {{ title }}
-      </h4>
-      <div class="flex flex-row items-center justify-between">
-        <div class="flex-grow h-px bg-n-weak" />
-      </div>
-      <p v-if="description" class="mb-0 text-sm font-normal text-n-slate-12">
-        {{ description }}
-      </p>
-    </div>
-    <div class="flex flex-col w-full gap-6">
-      <slot />
-    </div>
-  </div>
-</template>
@@ -3,6 +3,9 @@ import AutomationActionTeamMessageInput from './AutomationActionTeamMessageInput
 import AutomationActionFileInput from './AutomationFileInput.vue';
 import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
+import SingleSelect from 'dashboard/components-next/filter/inputs/SingleSelect.vue';
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+import NextInput from 'dashboard/components-next/input/Input.vue';

 export default {
  components: {
@@ -10,6 +13,9 @@ export default {
    AutomationActionFileInput,
    WootMessageEditor,
    NextButton,
+    SingleSelect,
+    MultiSelect,
+    NextInput,
  },
  props: {
    modelValue: {
@@ -40,6 +46,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    dropdownMaxHeight: {
+      type: String,
+      default: 'max-h-80',
+    },
  },
  emits: ['update:modelValue', 'input', 'removeAction', 'resetAction'],
  computed: {
@@ -69,11 +79,21 @@ export default {
      return this.actionTypes.find(action => action.key === this.action_name)
        .inputType;
    },
-    actionInputStyles() {
-      return {
-        'has-error': this.errorMessage,
-        'is-a-macro': this.isMacro,
-      };
+    actionNameAsSelectModel: {
+      get() {
+        if (!this.action_name) return null;
+        const found = this.actionTypes.find(a => a.key === this.action_name);
+        return found ? { id: found.key, name: found.label } : null;
+      },
+      set(value) {
+        this.action_name = value?.id || value;
+      },
+    },
+    actionTypesAsOptions() {
+      return this.actionTypes.map(a => ({ id: a.key, name: a.label }));
+    },
+    isVerticalLayout() {
+      return ['team_message', 'textarea'].includes(this.inputType);
    },
    castMessageVmodel: {
      get() {
@@ -94,203 +114,89 @@ export default {
    resetAction() {
      this.$emit('resetAction');
    },
+    onActionNameChange(value) {
+      this.actionNameAsSelectModel = value;
+      this.resetAction();
+    },
  },
 };
 </script>

 <template>
-  <div class="filter" :class="actionInputStyles">
-    <div class="filter-inputs">
-      <select
-        v-model="action_name"
-        class="action__question"
-        :class="{ 'full-width': !showActionInput }"
-        @change="resetAction()"
-      >
-        <option
-          v-for="attribute in actionTypes"
-          :key="attribute.key"
-          :value="attribute.key"
-        >
-          {{ attribute.label }}
-        </option>
-      </select>
-      <div v-if="showActionInput" class="filter__answer--wrap">
-        <div v-if="inputType" class="w-full">
-          <div
+  <li class="list-none py-2 first:pt-0 last:pb-0">
+    <div
+      class="flex flex-col gap-2"
+      :class="{ 'animate-wiggle': errorMessage }"
+    >
+      <div class="flex items-center gap-2">
+        <SingleSelect
+          :model-value="actionNameAsSelectModel"
+          :options="actionTypesAsOptions"
+          :dropdown-max-height="dropdownMaxHeight"
+          disable-deselect
+          class="flex-shrink-0"
+          @update:model-value="onActionNameChange"
+        />
+        <template v-if="showActionInput && !isVerticalLayout">
+          <SingleSelect
            v-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <MultiSelect
            v-else-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="action_params"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              multiple
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <input
+            v-model="action_params"
+            :options="dropdownValues"
+            :dropdown-max-height="dropdownMaxHeight"
+          />
+          <NextInput
            v-else-if="inputType === 'email'"
            v-model="action_params"
            type="email"
-            class="answer--text-input"
+            size="sm"
            :placeholder="$t('AUTOMATION.ACTION.EMAIL_INPUT_PLACEHOLDER')"
          />
-          <input
+          <NextInput
            v-else-if="inputType === 'url'"
            v-model="action_params"
            type="url"
-            class="answer--text-input"
+            size="sm"
            :placeholder="$t('AUTOMATION.ACTION.URL_INPUT_PLACEHOLDER')"
          />
          <AutomationActionFileInput
-            v-if="inputType === 'attachment'"
+            v-else-if="inputType === 'attachment'"
            v-model="action_params"
            :initial-file-name="initialFileName"
          />
-        </div>
+        </template>
+        <NextButton
+          v-if="!isMacro"
+          sm
+          solid
+          slate
+          icon="i-lucide-trash"
+          class="flex-shrink-0"
+          @click="removeAction"
+        />
      </div>
-      <NextButton
-        v-if="!isMacro"
-        icon="i-lucide-x"
-        slate
-        ghost
-        class="flex-shrink-0"
-        @click="removeAction"
+      <AutomationActionTeamMessageInput
+        v-if="inputType === 'team_message'"
+        v-model="action_params"
+        :teams="dropdownValues"
+        :dropdown-max-height="dropdownMaxHeight"
+      />
+      <WootMessageEditor
+        v-if="inputType === 'textarea'"
+        v-model="castMessageVmodel"
+        rows="4"
+        enable-variables
+        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+        class="[&_.ProseMirror-menubar]:hidden px-3 py-1 bg-n-alpha-1 rounded-lg outline outline-1 outline-n-weak dark:outline-n-strong"
      />
    </div>
-    <AutomationActionTeamMessageInput
-      v-if="inputType === 'team_message'"
-      v-model="action_params"
-      :teams="dropdownValues"
-    />
-    <WootMessageEditor
-      v-if="inputType === 'textarea'"
-      v-model="castMessageVmodel"
-      rows="4"
-      enable-variables
-      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-      class="action-message"
-    />
-    <p v-if="errorMessage" class="filter-error">
+    <span v-if="errorMessage" class="text-sm text-n-ruby-11">
      {{ errorMessage }}
-    </p>
-  </div>
+    </span>
+  </li>
 </template>
-
-<style lang="scss" scoped>
-.filter {
-  @apply bg-n-background p-2 border border-solid border-n-strong dark:border-n-strong rounded-lg mb-2;
-
-  &.is-a-macro {
-    @apply mb-0 bg-n-background dark:bg-n-solid-1 p-0 border-0 rounded-none;
-  }
-}
-
-.no-margin-bottom {
-  @apply mb-0;
-}
-
-.filter.has-error {
-  @apply bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5;
-
-  &.is-a-macro {
-    @apply bg-transparent;
-  }
-}
-
-.filter-inputs {
-  @apply flex gap-1;
-}
-
-.filter-error {
-  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
-}
-
-.action__question,
-.filter__operator {
-  @apply mb-0 mr-1;
-}
-
-.action__question {
-  @apply max-w-[50%];
-}
-
-.action__question.full-width {
-  @apply max-w-full;
-}
-
-.filter__answer--wrap {
-  @apply max-w-[50%] flex-grow mr-1 flex w-full items-center justify-start;
-
-  input {
-    @apply mb-0;
-  }
-}
-.filter__answer {
-  &.answer--text-input {
-    @apply mb-0;
-  }
-}
-
-.filter__join-operator-wrap {
-  @apply relative z-20 m-0;
-}
-
-.filter__join-operator {
-  @apply flex items-center justify-center relative my-2.5 mx-0;
-
-  .operator__line {
-    @apply absolute w-full border-b border-solid border-n-weak;
-  }
-
-  .operator__select {
-    margin-bottom: 0 !important;
-    @apply relative w-auto;
-  }
-}
-
-.multiselect {
-  @apply mb-0;
-}
-.action-message {
-  @apply mt-2 mx-0 mb-0;
-}
-// Prosemirror does not have a native way of hiding the menu bar, hence
-::v-deep .ProseMirror-menubar {
-  @apply hidden;
-}
-</style>
@@ -1,8 +1,14 @@
 <script>
+import MultiSelect from 'dashboard/components-next/filter/inputs/MultiSelect.vue';
+
 export default {
+  components: {
+    MultiSelect,
+  },
  props: {
    teams: { type: Array, required: true },
    modelValue: { type: Object, required: true },
+    dropdownMaxHeight: { type: String, default: 'max-h-80' },
  },
  emits: ['update:modelValue'],
  data() {
@@ -12,9 +18,9 @@ export default {
    };
  },
  mounted() {
-    const { team_ids: teamIds } = this.modelValue;
-    this.selectedTeams = teamIds;
-    this.message = this.modelValue.message;
+    const { team_ids: teamIds, message } = this.modelValue || {};
+    this.selectedTeams = teamIds || [];
+    this.message = message || '';
  },
  methods: {
    updateValue() {
@@ -28,37 +34,19 @@ export default {
 </script>

 <template>
-  <div>
-    <div class="multiselect-wrap--small flex flex-col gap-1 mt-1">
-      <multiselect
-        v-model="selectedTeams"
-        track-by="id"
-        label="name"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_DROPDOWN_PLACEHOLDER')"
-        multiple
-        selected-label
-        :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        deselect-label=""
-        :max-height="160"
-        :options="teams"
-        :allow-empty="false"
-        @update:model-value="updateValue"
-      />
-      <textarea
-        v-model="message"
-        rows="4"
-        :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
-        @input="updateValue"
-      />
-    </div>
+  <div class="flex flex-col gap-2">
+    <MultiSelect
+      v-model="selectedTeams"
+      :options="teams"
+      :dropdown-max-height="dropdownMaxHeight"
+      @update:model-value="updateValue"
+    />
+    <textarea
+      v-model="message"
+      class="mb-0 !text-sm"
+      rows="4"
+      :placeholder="$t('AUTOMATION.ACTION.TEAM_MESSAGE_INPUT_PLACEHOLDER')"
+      @input="updateValue"
+    />
  </div>
 </template>
-
-<style scoped>
-.multiselect {
-  margin: 0.25rem 0;
-}
-textarea {
-  margin-bottom: 0;
-}
-</style>
@@ -79,7 +79,7 @@ input[type='file'] {
  @apply hidden;
 }
 .input-wrapper {
-  @apply flex h-9 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-sm border border-dashed border-n-strong;
+  @apply flex h-8 bg-n-background py-1 px-2 items-center text-xs cursor-pointer rounded-lg border border-dashed border-n-strong;
 }
 .success-icon {
  @apply text-n-teal-9 mr-2;
@@ -1,305 +0,0 @@
-<script>
-import NextButton from 'dashboard/components-next/button/Button.vue';
-
-export default {
-  name: 'FilterInput',
-  components: {
-    NextButton,
-  },
-  props: {
-    modelValue: {
-      type: Object,
-      default: () => {},
-    },
-    filterAttributes: {
-      type: Array,
-      default: () => [],
-    },
-    inputType: {
-      type: String,
-      default: 'plain_text',
-    },
-    operators: {
-      type: Array,
-      default: () => [],
-    },
-    dropdownValues: {
-      type: Array,
-      default: () => [],
-    },
-    showQueryOperator: {
-      type: Boolean,
-      default: false,
-    },
-    showUserInput: {
-      type: Boolean,
-      default: true,
-    },
-    groupedFilters: {
-      type: Boolean,
-      default: false,
-    },
-    filterGroups: {
-      type: Array,
-      default: () => [],
-    },
-    customAttributeType: {
-      type: String,
-      default: '',
-    },
-    errorMessage: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['update:modelValue', 'removeFilter', 'resetFilter'],
-  computed: {
-    attributeKey: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.attribute_key;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, attribute_key: value });
-      },
-    },
-    filterOperator: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.filter_operator;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, filter_operator: value });
-      },
-    },
-    values: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.values;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, values: value });
-      },
-    },
-    query_operator: {
-      get() {
-        if (!this.modelValue) return null;
-        return this.modelValue.query_operator;
-      },
-      set(value) {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', { ...payload, query_operator: value });
-      },
-    },
-    custom_attribute_type: {
-      get() {
-        if (!this.customAttributeType) return '';
-        return this.customAttributeType;
-      },
-      set() {
-        const payload = this.modelValue || {};
-        this.$emit('update:modelValue', {
-          ...payload,
-          custom_attribute_type: this.customAttributeType,
-        });
-      },
-    },
-  },
-  watch: {
-    customAttributeType: {
-      handler(value) {
-        if (
-          value === 'conversation_attribute' ||
-          value === 'contact_attribute'
-        ) {
-          // eslint-disable-next-line vue/no-mutating-props
-          this.modelValue.custom_attribute_type = this.customAttributeType;
-          // eslint-disable-next-line vue/no-mutating-props
-        } else this.modelValue.custom_attribute_type = '';
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    removeFilter() {
-      this.$emit('removeFilter');
-    },
-    resetFilter() {
-      this.$emit('resetFilter');
-    },
-    getInputErrorClass(errorMessage) {
-      return errorMessage
-        ? 'bg-n-ruby-8/20 border-n-ruby-5 dark:border-n-ruby-5'
-        : 'bg-n-background border-n-weak dark:border-n-weak';
-    },
-  },
-};
-</script>
-
-<!-- eslint-disable vue/no-mutating-props -->
-<template>
-  <div>
-    <div
-      class="p-2 border border-solid rounded-lg"
-      :class="getInputErrorClass(errorMessage)"
-    >
-      <div class="flex gap-1">
-        <select
-          v-if="groupedFilters"
-          v-model="attributeKey"
-          class="max-w-[30%] mb-0 mr-1"
-          @change="resetFilter()"
-        >
-          <optgroup
-            v-for="(group, i) in filterGroups"
-            :key="i"
-            :label="group.name"
-          >
-            <option
-              v-for="attribute in group.attributes"
-              :key="attribute.key"
-              :value="attribute.key"
-              :selected="true"
-            >
-              {{ attribute.name }}
-            </option>
-          </optgroup>
-        </select>
-        <select
-          v-else
-          v-model="attributeKey"
-          class="max-w-[30%] mb-0 mr-1"
-          @change="resetFilter()"
-        >
-          <option
-            v-for="attribute in filterAttributes"
-            :key="attribute.key"
-            :value="attribute.key"
-            :disabled="attribute.disabled"
-          >
-            {{ attribute.name }}
-          </option>
-        </select>
-
-        <select v-model="filterOperator" class="max-w-[20%] mb-0 mr-1">
-          <option
-            v-for="(operator, o) in operators"
-            :key="o"
-            :value="operator.value"
-          >
-            {{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
-          </option>
-        </select>
-
-        <div v-if="showUserInput" class="flex-grow mr-1 filter__answer--wrap">
-          <div
-            v-if="inputType === 'multi_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              multiple
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div
-            v-else-if="inputType === 'search_select'"
-            class="multiselect-wrap--small"
-          >
-            <multiselect
-              v-model="values"
-              track-by="id"
-              label="name"
-              :placeholder="$t('FORMS.MULTISELECT.SELECT')"
-              selected-label
-              :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-              deselect-label=""
-              :max-height="160"
-              :options="dropdownValues"
-              :allow-empty="false"
-              :option-height="104"
-            >
-              <template #noOptions>
-                {{ $t('FORMS.MULTISELECT.NO_OPTIONS') }}
-              </template>
-            </multiselect>
-          </div>
-          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
-            <input
-              v-model="values"
-              type="date"
-              :editable="false"
-              class="!mb-0 datepicker"
-            />
-          </div>
-          <input
-            v-else
-            v-model="values"
-            type="text"
-            class="!mb-0"
-            :placeholder="$t('FILTER.INPUT_PLACEHOLDER')"
-          />
-        </div>
-        <NextButton
-          icon="i-lucide-x"
-          slate
-          ghost
-          class="flex-shrink-0"
-          @click="removeFilter"
-        />
-      </div>
-      <p v-if="errorMessage" class="filter-error">
-        {{ errorMessage }}
-      </p>
-    </div>
-
-    <div
-      v-if="showQueryOperator"
-      class="flex items-center justify-center relative my-2.5 mx-0"
-    >
-      <hr class="absolute w-full border-b border-solid border-n-weak" />
-      <select
-        v-model="query_operator"
-        class="relative w-auto mb-0 bg-n-background text-n-slate-12 border-n-weak"
-      >
-        <option value="and">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
-        </option>
-        <option value="or">
-          {{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
-        </option>
-      </select>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.filter__answer--wrap {
-  input {
-    @apply bg-n-background mb-0 text-n-slate-12 border-n-weak;
-  }
-}
-
-.filter-error {
-  @apply text-n-ruby-9 dark:text-n-ruby-9 block my-1 mx-0;
-}
-
-.multiselect {
-  @apply mb-0;
-}
-</style>
@@ -10,12 +10,9 @@ defineProps({
 </script>

 <template>
-  <div class="flex items-center text-n-slate-11 text-xs min-w-0">
-    <ChannelIcon
-      :inbox="inbox"
-      class="size-3 ltr:mr-1 rtl:ml-1 flex-shrink-0"
-    />
-    <span class="truncate">
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-label-small text-n-slate-11">
      {{ inbox.name }}
    </span>
  </div>
@@ -11,7 +11,7 @@ defineProps({
    <h6
      class="flex items-center gap-3 text-base text-center w-100 text-n-slate-11"
    >
-      <span class="text-base font-medium text-n-slate-12">
+      <span class="text-body-main !text-base text-n-slate-12">
        {{ message }}
      </span>
      <Spinner class="text-n-brand" />
@@ -15,7 +15,7 @@ export default {

 <template>
  <div class="border-b border-solid border-n-weak/60">
-    <div class="max-w-6xl w-full mx-auto pt-4 pb-0 px-8">
+    <div class="max-w-7xl w-full mx-auto pt-4 pb-0 px-6">
      <h2 class="text-2xl text-n-slate-12 mb-1 font-medium">
        {{ headerTitle }}
      </h2>
@@ -100,6 +100,9 @@ export default {
      v-if="currentChat.id"
      :chat="currentChat"
      :show-back-button="isOnExpandedLayout && !isInboxView"
+      :class="{
+        'border-b border-b-n-weak !pt-2': !dashboardApps.length,
+      }"
    />
    <woot-tabs
      v-if="dashboardApps.length && currentChat.id"
@@ -61,7 +61,7 @@ export default {

 <template>
  <label class="input-container">
-    <span v-if="label">{{ label }}</span>
+    <span v-if="label" class="text-heading-3">{{ label }}</span>
    <input
      :value="modelValue"
      :type="type"
@@ -71,7 +71,7 @@ export default {
      @input="onChange"
      @blur="onBlur"
    />
-    <p v-if="helpText" class="help-text">{{ helpText }}</p>
+    <p v-if="helpText" class="help-text text-label-small">{{ helpText }}</p>
    <span v-if="error" class="message">
      {{ error }}
    </span>
@@ -81,7 +81,7 @@ export default {

 <style scoped lang="scss">
 .help-text {
-  @apply mt-0.5 text-xs not-italic text-n-slate-11;
+  @apply mt-0.5 not-italic text-n-slate-11;
 }

 .message {
@@ -1,4 +1,4 @@
-import { ref, computed } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { useStoreGetters } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
 import { useI18n } from 'vue-i18n';
@@ -40,7 +40,7 @@ export function useAutomation(startValue = null) {
  } = useAutomationValues();

  const automation = ref(startValue);
-  const automationTypes = structuredClone(AUTOMATIONS);
+  const automationTypes = reactive(structuredClone(AUTOMATIONS));
  const eventName = computed(() => automation.value?.event_name);

  /**
@@ -160,14 +160,24 @@ export function useAutomation(startValue = null) {
      t('AUTOMATION.CONDITION.CONTACT_CUSTOM_ATTR_LABEL')
    );

+    const CUSTOM_ATTR_HEADER_KEYS = new Set([
+      'conversation_custom_attribute',
+      'contact_custom_attribute',
+    ]);
+
    [
      'message_created',
      'conversation_created',
      'conversation_updated',
      'conversation_opened',
    ].forEach(eventToUpdate => {
+      const standardConditions = automationTypes[
+        eventToUpdate
+      ].conditions.filter(
+        c => !c.customAttributeType && !CUSTOM_ATTR_HEADER_KEYS.has(c.key)
+      );
      automationTypes[eventToUpdate].conditions = [
-        ...automationTypes[eventToUpdate].conditions,
+        ...standardConditions,
        ...manifestedCustomAttributes,
      ];
    });
@@ -169,19 +169,19 @@ export const getFileName = (action, files = []) => {

 export const getDefaultConditions = eventName => {
  if (eventName === 'message_created') {
-    return DEFAULT_MESSAGE_CREATED_CONDITION;
+    return structuredClone(DEFAULT_MESSAGE_CREATED_CONDITION);
  }
  if (
    eventName === 'conversation_opened' ||
    eventName === 'conversation_resolved'
  ) {
-    return DEFAULT_CONVERSATION_CONDITION;
+    return structuredClone(DEFAULT_CONVERSATION_CONDITION);
  }
-  return DEFAULT_OTHER_CONDITION;
+  return structuredClone(DEFAULT_OTHER_CONDITION);
 };

 export const getDefaultActions = () => {
-  return DEFAULT_ACTIONS;
+  return structuredClone(DEFAULT_ACTIONS);
 };

 export const filterCustomAttributes = customAttributes => {
@@ -36,17 +36,17 @@ const INBOX_ICON_MAP_FILL = {
 const DEFAULT_ICON_FILL = 'i-ri-chat-1-fill';

 const INBOX_ICON_MAP_LINE = {
-  [INBOX_TYPES.WEB]: 'i-ri-global-line',
-  [INBOX_TYPES.FB]: 'i-ri-messenger-line',
-  [INBOX_TYPES.TWITTER]: 'i-ri-twitter-x-line',
-  [INBOX_TYPES.WHATSAPP]: 'i-ri-whatsapp-line',
-  [INBOX_TYPES.API]: 'i-ri-cloudy-line',
-  [INBOX_TYPES.EMAIL]: 'i-ri-mail-line',
-  [INBOX_TYPES.TELEGRAM]: 'i-ri-telegram-line',
-  [INBOX_TYPES.LINE]: 'i-ri-line-line',
-  [INBOX_TYPES.INSTAGRAM]: 'i-ri-instagram-line',
-  [INBOX_TYPES.TIKTOK]: 'i-ri-tiktok-line',
-  [INBOX_TYPES.VOICE]: 'i-ri-phone-line',
+  [INBOX_TYPES.WEB]: 'i-woot-website',
+  [INBOX_TYPES.FB]: 'i-woot-messenger',
+  [INBOX_TYPES.TWITTER]: 'i-woot-x',
+  [INBOX_TYPES.WHATSAPP]: 'i-woot-whatsapp',
+  [INBOX_TYPES.API]: 'i-woot-api',
+  [INBOX_TYPES.EMAIL]: 'i-woot-mail',
+  [INBOX_TYPES.TELEGRAM]: 'i-woot-telegram',
+  [INBOX_TYPES.LINE]: 'i-woot-line',
+  [INBOX_TYPES.INSTAGRAM]: 'i-woot-instagram',
+  [INBOX_TYPES.VOICE]: 'i-woot-voice',
+  [INBOX_TYPES.TIKTOK]: 'i-woot-tiktok',
 };

 const DEFAULT_ICON_LINE = 'i-ri-chat-1-line';
@@ -99,19 +99,19 @@ describe('#Inbox Helpers', () => {
    describe('line variant', () => {
      it('returns correct line icon for web widget', () => {
        expect(getInboxIconByType(INBOX_TYPES.WEB, null, 'line')).toBe(
-          'i-ri-global-line'
+          'i-woot-website'
        );
      });

      it('returns correct line icon for Facebook', () => {
        expect(getInboxIconByType(INBOX_TYPES.FB, null, 'line')).toBe(
-          'i-ri-messenger-line'
+          'i-woot-messenger'
        );
      });

      it('returns correct line icon for TikTok', () => {
        expect(getInboxIconByType(INBOX_TYPES.TIKTOK, null, 'line')).toBe(
-          'i-ri-tiktok-line'
+          'i-woot-tiktok'
        );
      });

@@ -147,7 +147,7 @@ describe('#Inbox Helpers', () => {
        it('returns WhatsApp line icon for Twilio WhatsApp number', () => {
          expect(
            getInboxIconByType(INBOX_TYPES.TWILIO, 'whatsapp', 'line')
-          ).toBe('i-ri-whatsapp-line');
+          ).toBe('i-woot-whatsapp');
        });

        it('returns SMS line icon for regular Twilio number', () => {
@@ -4,6 +4,9 @@
    "LOADING_EDITOR": "Loading editor...",
    "DESCRIPTION": "Agent Bots are like the most fabulous members of your team. They can handle the small stuff, so you can focus on the stuff that matters. Give them a try. You can manage your bots from this page or create new ones using the 'Add Bot' button.",
    "LEARN_MORE": "Learn about agent bots",
+    "COUNT": "{n} bot | {n} bots",
+    "SEARCH_PLACEHOLDER": "Search bots...",
+    "NO_RESULTS": "No bots found matching your search",
    "GLOBAL_BOT": "System bot",
    "GLOBAL_BOT_BADGE": "System",
    "AVATAR": {
@@ -34,7 +37,8 @@
      "LOADING": "Fetching bots...",
      "TABLE_HEADER": {
        "DETAILS": "Bot Details",
-        "URL": "Webhook URL"
+        "URL": "Webhook URL",
+        "ACTIONS": "Actions"
      }
    },
    "DELETE": {
@@ -9,6 +9,7 @@
      "ADMINISTRATOR": "Administrator",
      "AGENT": "Agent"
    },
+    "COUNT": "{n} agent | {n} agents",
    "LIST": {
      "404": "There are no agents associated to this account",
      "TITLE": "Manage agents in your team",
@@ -96,6 +97,8 @@
        "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
      }
    },
+    "SEARCH_PLACEHOLDER": "Search agents...",
+    "NO_RESULTS": "No agents found matching your search",
    "SEARCH": {
      "NO_RESULTS": "No results found."
    },
@@ -5,6 +5,9 @@
    "LOADING": "Fetching custom attributes",
    "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
    "LEARN_MORE": "Learn more about custom attributes",
+    "COUNT": "{n} attribute | {n} attributes",
+    "SEARCH_PLACEHOLDER": "Search attributes...",
+    "NO_RESULTS": "No attributes found matching your search",
    "ATTRIBUTE_MODELS": {
      "CONVERSATION": "Conversation",
      "CONTACT": "Contact"
@@ -3,8 +3,11 @@
    "HEADER": "Automation",
    "DESCRIPTION": "Automation can replace and streamline existing processes that require manual effort, such as adding labels and assigning conversations to the most suitable agent. This allows the team to focus on their strengths while reducing time spent on routine tasks.",
    "LEARN_MORE": "Learn more about automation",
-    "HEADER_BTN_TXT": "Add Automation Rule",
+    "COUNT": "{n} automation | {n} automations",
+    "HEADER_BTN_TXT": "Create Automation",
    "LOADING": "Fetching automation rules",
+    "SEARCH_PLACEHOLDER": "Search automation rules...",
+    "NO_RESULTS": "No automation rules found matching your search",
    "ADD": {
      "TITLE": "Add Automation Rule",
      "SUBMIT": "Create",
@@ -42,9 +45,9 @@
    "LIST": {
      "TABLE_HEADER": {
        "NAME": "Name",
-        "DESCRIPTION": "Description",
        "ACTIVE": "Active",
-        "CREATED_ON": "Created on"
+        "CREATED_ON": "Created on",
+        "ACTIONS": "Actions"
      },
      "404": "No automation rules found"
    },
@@ -3,8 +3,11 @@
    "HEADER": "Canned Responses",
    "LEARN_MORE": "Learn more about canned responses",
    "DESCRIPTION": "Canned Responses are pre-written reply templates that help you quickly respond to a conversation. Agents can type the '/' character followed by the shortcode to insert a canned response during a conversation. ",
+    "COUNT": "{n} canned response | {n} canned responses",
    "HEADER_BTN_TXT": "Add canned response",
    "LOADING": "Fetching canned responses...",
+    "SEARCH_PLACEHOLDER": "Search canned responses...",
+    "NO_RESULTS": "No canned responses found matching your search",
    "SEARCH_404": "There are no items matching this query.",
    "LIST": {
      "404": "There are no canned responses available in this account.",
@@ -458,6 +458,9 @@
          "INSTAGRAM": {
            "PLACEHOLDER": "Add Instagram"
          },
+          "TELEGRAM": {
+            "PLACEHOLDER": "Add Telegram"
+          },
          "TIKTOK": {
            "PLACEHOLDER": "Add TikTok"
          },
@@ -3,8 +3,11 @@
    "HEADER": "Custom Roles",
    "LEARN_MORE": "Learn more about custom roles",
    "DESCRIPTION": "Custom roles are roles that are created by the account owner or admin. These roles can be assigned to agents to define their access and permissions within the account. Custom roles can be created with specific permissions and access levels to suit the requirements of the organization.",
+    "COUNT": "{n} custom role | {n} custom roles",
    "HEADER_BTN_TXT": "Add custom role",
    "LOADING": "Fetching custom roles...",
+    "SEARCH_PLACEHOLDER": "Search custom roles...",
+    "NO_RESULTS": "No custom roles found matching your search",
    "SEARCH_404": "There are no items matching this query.",
    "PAYWALL": {
      "TITLE": "Upgrade to create custom roles",
@@ -3,6 +3,9 @@
    "HEADER": "Inboxes",
    "DESCRIPTION": "A channel is the mode of communication your customer chooses to interact with you. An inbox is where you manage interactions for a specific channel. It can include communications from various sources such as email, live chat, and social media.",
    "LEARN_MORE": "Learn more about inboxes",
+    "COUNT": "{n} inbox | {n} inboxes",
+    "SEARCH_PLACEHOLDER": "Search inboxes...",
+    "NO_RESULTS": "No inboxes found matching your search",
    "RECONNECTION_REQUIRED": "Your inbox is disconnected. You won't receive new messages until you reauthorize it.",
    "CLICK_TO_RECONNECT": "Click here to reconnect.",
    "WHATSAPP_REGISTRATION_INCOMPLETE": "Your WhatsApp Business registration isn’t complete. Please check your display name status in Meta Business Manager before reconnecting.",
@@ -575,7 +578,7 @@
          "SUBTITLE": "Use only the configured business name as the sender name in the email header."
        },
        "BUSINESS_NAME": {
-          "BUTTON_TEXT": "+ Configure your business name",
+          "BUTTON_TEXT": "Configure your business name",
          "PLACEHOLDER": "Enter your business name",
          "SAVE_BUTTON_TEXT": "Save"
        }
@@ -625,6 +628,8 @@
      "ACCOUNT_HEALTH": "Account Health",
      "CSAT": "CSAT"
    },
+    "CHANNEL_PREFERENCES": "Channel Preferences",
+    "WIDGET_FEATURES": "Widget features",
    "ACCOUNT_HEALTH": {
      "TITLE": "Manage your WhatsApp account",
      "DESCRIPTION": "Review your WhatsApp account status, messaging limits, and quality. Update settings or resolve issues if needed",
@@ -758,6 +763,7 @@
      "LABEL": "Help Center",
      "PLACEHOLDER": "Select Help Center",
      "SELECT_PLACEHOLDER": "Select Help Center",
+      "NONE": "None",
      "REMOVE": "Remove Help Center",
      "SUB_TEXT": "Attach a Help Center with the inbox"
    },
@@ -884,6 +890,20 @@
        "CONFIRM": "Create new template",
        "CANCEL": "Go back"
      },
+      "UTILITY_ANALYZER": {
+        "ACTION": "Check utility fit",
+        "HELPER_NOTE": "Check this message before submission to improve Utility fit. The system creates a dedicated CSAT template with buttons for reporting and submits it as Utility; Meta may still reclassify it as Marketing based on content.",
+        "RESULT_LABEL": "Meta category prediction",
+        "GUIDANCE_NOTE": "This is a guidance check, not a guarantee of Meta approval.",
+        "SUGGESTION_LABEL": "Suggested utility-safe rewrite",
+        "APPLY": "Use this rewrite",
+        "ERROR_MESSAGE": "Couldn't analyze the message. Please try again.",
+        "CLASSIFICATION": {
+          "LIKELY_UTILITY": "Likely Utility",
+          "LIKELY_MARKETING": "Likely Marketing",
+          "UNCLEAR": "Needs clarification"
+        }
+      },
      "SURVEY_RULE": {
        "LABEL": "Survey rule",
        "DESCRIPTION_PREFIX": "Send the survey if the conversation",
@@ -895,7 +915,7 @@
        "SELECT_PLACEHOLDER": "select labels"
      },
      "NOTE": "Note: CSAT surveys are sent only once per conversation",
-      "WHATSAPP_NOTE": "Note: We will create a template and send it for WhatsApp approval. After being approved, surveys will be sent only once per conversation as per the survey rule.",
+      "WHATSAPP_NOTE": "Note: When you save, the system creates a dedicated CSAT template in WhatsApp (used to capture rating and feedback in reports) and submits it as Utility for approval. Meta may still classify it as Marketing based on content. After approval, surveys are sent only once per conversation as per the survey rule.",
      "API": {
        "SUCCESS_MESSAGE": "CSAT settings updated successfully",
        "ERROR_MESSAGE": "We couldn't update CSAT settings. Please try again later."
@@ -911,9 +931,11 @@
      "UNAVAILABLE_MESSAGE_LABEL": "Unavailable message for visitors",
      "TOGGLE_HELP": "Enabling business availability will show the available hours on live chat widget even if all the agents are offline. Outside available hours visitors can be warned with a message and a pre-chat form.",
      "DAY": {
+        "DAY": "Day",
+        "AVAILABILITY": "Availability",
+        "HOURS": "Hours",
        "ENABLE": "Enable availability for this day",
        "UNAVAILABLE": "Unavailable",
-        "HOURS": "hours",
        "VALIDATION_ERROR": "Starting time should be before closing time.",
        "CHOOSE": "Choose"
      },
@@ -1020,11 +1042,12 @@
          "IN_A_DAY": "In a day"
        },
        "WIDGET_COLOR_LABEL": "Widget Color",
-        "WIDGET_BUBBLE_POSITION_LABEL": "Widget Bubble Position",
-        "WIDGET_BUBBLE_TYPE_LABEL": "Widget Bubble Type",
+        "WIDGET_BUBBLE": "Bubble",
+        "WIDGET_BUBBLE_POSITION_LABEL": "Position:",
+        "WIDGET_BUBBLE_TYPE_LABEL": "Type:",
        "WIDGET_BUBBLE_LAUNCHER_TITLE": {
          "DEFAULT": "Chat with us",
-          "LABEL": "Widget Bubble Launcher Title",
+          "LABEL": "Launcher Title",
          "PLACE_HOLDER": "Chat with us"
        },
        "UPDATE": {
@@ -1049,7 +1072,7 @@
      },
      "WIDGET_SCREEN": {
        "DEFAULT": "Default",
-        "CHAT": "Chat"
+        "CHAT": "Chat mode"
      },
      "REPLY_TIME": {
        "IN_A_FEW_MINUTES": "Typically replies in a few minutes",
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .10.1
 .11.1