Allow agents to export contacts

This change modifies the ContactPolicy to allow users with the agent role to export contacts. Previously, only administrators could perform this action. Includes tests to verify that both agents and administrators can export contacts.
2025-06-09 16:47:58 +00:00 · 2025-06-09 16:40:30 +00:00
2053 changed files with 15851 additions and 61154 deletions
@@ -0,0 +1,62 @@
+version: '2'
+plugins:
+  rubocop:
+    enabled: false
+    channel: rubocop-0-73
+  eslint:
+    enabled: false
+  csslint:
+    enabled: true
+  scss-lint:
+    enabled: true
+  brakeman:
+    enabled: false
+checks:
+  similar-code:
+    enabled: false
+  method-count:
+    enabled: true
+    config:
+      threshold: 32
+  file-lines:
+    enabled: true
+    config:
+      threshold: 300
+  method-lines:
+    config:
+      threshold: 50
+exclude_patterns:
+  - 'spec/'
+  - '**/specs/**/**'
+  - '**/spec/**/**'
+  - 'db/*'
+  - 'bin/**/*'
+  - 'db/**/*'
+  - 'config/**/*'
+  - 'public/**/*'
+  - 'vendor/**/*'
+  - 'node_modules/**/*'
+  - 'lib/tasks/auto_annotate_models.rake'
+  - 'app/test-matchers.js'
+  - 'docs/*'
+  - '**/*.md'
+  - '**/*.yml'
+  - 'app/javascript/dashboard/i18n/locale'
+  - '**/*.stories.js'
+  - 'stories/'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js'
+  - 'app/javascript/shared/constants/countries.js'
+  - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js'
+  - 'app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/automation/constants.js'
+  - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/reports/constants.js'
+  - 'app/javascript/dashboard/store/captain/storeFactory.js'
+  - 'app/javascript/dashboard/i18n/index.js'
+  - 'app/javascript/widget/i18n/index.js'
+  - 'app/javascript/survey/i18n/index.js'
+  - 'app/javascript/shared/constants/locales.js'
+  - 'app/javascript/dashboard/helper/specs/macrosFixtures.js'
+  - 'app/javascript/dashboard/routes/dashboard/settings/macros/constants.js'
+  - '**/fixtures/**'
+  - '**/*/fixtures.js'
@@ -103,7 +103,6 @@ module.exports = {
          '⌘',
          '📄',
          '🎉',
-          '🚀',
          '💬',
          '👥',
          '📥',
@@ -1,28 +0,0 @@
-name: Auto-assign PR to Author
-
-on:
-  pull_request:
-    types: [opened]
-
-jobs:
-  auto-assign:
-    runs-on: ubuntu-latest
-    permissions:
-      pull-requests: write
-    steps:
-      - name: Auto-assign PR to author
-        uses: actions/github-script@v7
-        with:
-          script: |
-            const { owner, repo } = context.repo;
-            const pull_number = context.payload.pull_request.number;
-            const author = context.payload.pull_request.user.login;
-            
-            await github.rest.issues.addAssignees({
-              owner,
-              repo,
-              issue_number: pull_number,
-              assignees: [author]
-            });
-            
-            console.log(`Assigned PR #${pull_number} to ${author}`);
@@ -6,11 +6,6 @@ name: Deploy Check
 on:
  pull_request:

-# If two pushes happen within a short time in the same PR, cancel the run of the oldest push
-concurrency:
-  group: pr-${{ github.workflow }}-${{ github.head_ref }}
-  cancel-in-progress: true
-
 jobs:
  deployment_check:
    name: Check Deployment
@@ -5,11 +5,6 @@ on:
    branches:
      - develop

-# If two pushes happen within a short time in the same PR, cancel the run of the oldest push
-concurrency:
-  group: pr-${{ github.workflow }}-${{ github.head_ref }}
-  cancel-in-progress: true
-
 jobs:
  log_lines_check:
    runs-on: ubuntu-latest
@@ -5,11 +5,6 @@ on:
    branches:
      - develop

-# If two pushes happen within a short time in the same PR, cancel the run of the oldest push
-concurrency:
-  group: pr-${{ github.workflow }}-${{ github.head_ref }}
-  cancel-in-progress: true
-
 jobs:
  test:
    runs-on: ubuntu-22.04
@@ -1,7 +0,0 @@
-*
-!configs
-!configs/**
-!hooks
-!hooks/**
-!qlty.toml
-!.gitignore
@@ -1,2 +0,0 @@
-ignored:
-  - DL3008
@@ -1 +0,0 @@
-source-path=SCRIPTDIR
@@ -1,8 +0,0 @@
-rules:
-  document-start: disable
-  quoted-strings:
-    required: only-when-needed
-    extra-allowed: ["{|}"]
-  key-duplicates: {}
-  octal-values:
-    forbid-implicit-octal: true
@@ -1,84 +0,0 @@
-# This file was automatically generated by `qlty init`.
-# You can modify it to suit your needs.
-# We recommend you to commit this file to your repository.
-#
-# This configuration is used by both Qlty CLI and Qlty Cloud.
-#
-#     Qlty CLI -- Code quality toolkit for developers
-#     Qlty Cloud -- Fully automated Code Health Platform
-#
-# Try Qlty Cloud: https://qlty.sh
-#
-# For a guide to configuration, visit https://qlty.sh/d/config
-# Or for a full reference, visit https://qlty.sh/d/qlty-toml
-config_version = "0"
-
-exclude_patterns = [
-  "*_min.*",
-  "*-min.*",
-  "*.min.*",
-  "**/.yarn/**",
-  "**/*.d.ts",
-  "**/assets/**",
-  "**/bower_components/**",
-  "**/build/**",
-  "**/cache/**",
-  "**/config/**",
-  "**/db/**",
-  "**/deps/**",
-  "**/dist/**",
-  "**/extern/**",
-  "**/external/**",
-  "**/generated/**",
-  "**/Godeps/**",
-  "**/gradlew/**",
-  "**/mvnw/**",
-  "**/node_modules/**",
-  "**/protos/**",
-  "**/seed/**",
-  "**/target/**",
-  "**/templates/**",
-  "**/testdata/**",
-  "**/vendor/**", "spec/", "**/specs/**/**", "**/spec/**/**", "db/*", "bin/**/*", "db/**/*", "config/**/*", "public/**/*", "vendor/**/*", "node_modules/**/*", "lib/tasks/auto_annotate_models.rake", "app/test-matchers.js", "docs/*", "**/*.md", "**/*.yml", "app/javascript/dashboard/i18n/locale", "**/*.stories.js", "stories/", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js", "app/javascript/shared/constants/countries.js", "app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js", "app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js", "app/javascript/dashboard/routes/dashboard/settings/automation/constants.js", "app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js", "app/javascript/dashboard/routes/dashboard/settings/reports/constants.js", "app/javascript/dashboard/store/captain/storeFactory.js", "app/javascript/dashboard/i18n/index.js", "app/javascript/widget/i18n/index.js", "app/javascript/survey/i18n/index.js", "app/javascript/shared/constants/locales.js", "app/javascript/dashboard/helper/specs/macrosFixtures.js", "app/javascript/dashboard/routes/dashboard/settings/macros/constants.js", "**/fixtures/**", "**/*/fixtures.js",
-]
-
-test_patterns = [
-  "**/test/**",
-  "**/spec/**",
-  "**/*.test.*",
-  "**/*.spec.*",
-  "**/*_test.*",
-  "**/*_spec.*",
-  "**/test_*.*",
-  "**/spec_*.*",
-]
-
-[smells]
-mode = "comment"
-
-[smells.boolean_logic]
-threshold = 4
-
-[smells.file_complexity]
-threshold = 66
-enabled = true
-
-[smells.return_statements]
-threshold = 4
-
-[smells.nested_control_flow]
-threshold = 4
-
-[smells.function_parameters]
-threshold = 4
-
-[smells.function_complexity]
-threshold = 5
-
-[smells.duplication]
-enabled = true
-threshold = 20
-
-[[source]]
-name = "default"
-default = true
@@ -283,7 +283,7 @@ Rails/RedundantActiveRecordAllMethod:
  Enabled: false

 Layout/TrailingEmptyLines:
-  Enabled: true
+  Enabled: false

 Style/SafeNavigationChainLength:
  Enabled: false
@@ -121,8 +121,6 @@ gem 'sentry-sidekiq', '>= 5.19.0', require: false
 gem 'sidekiq', '>= 7.3.1'
 # We want cron jobs
 gem 'sidekiq-cron', '>= 1.12.0'
-# for sidekiq healthcheck
-gem 'sidekiq_alive'

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

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

 gem 'shopify_api'

@@ -126,8 +126,6 @@ GEM
      jbuilder (~> 2)
      rails (>= 4.2, < 7.2)
      selectize-rails (~> 0.6)
-    ai-agents (0.2.1)
-      ruby_llm (~> 1.3)
    annotate (3.2.0)
      activerecord (>= 3.2, < 8.0)
      rake (>= 10.4, < 14.0)
@@ -174,8 +172,6 @@ GEM
      bundler (>= 1.2.0, < 3)
      thor (~> 1.0)
    byebug (11.1.3)
-    childprocess (5.1.0)
-      logger (~> 1.5)
    climate_control (1.2.0)
    coderay (1.1.3)
    commonmarker (0.23.10)
@@ -359,7 +355,6 @@ GEM
    grpc (1.72.0-x86_64-linux)
      google-protobuf (>= 3.25, < 5.0)
      googleapis-common-protos-types (~> 1.0)
-    gserver (0.0.1)
    haikunator (1.1.1)
    hairtrigger (1.0.0)
      activerecord (>= 6.0, < 8)
@@ -438,12 +433,10 @@ GEM
      json (>= 1.8)
      rexml
    language_server-protocol (3.17.0.5)
-    launchy (3.1.1)
+    launchy (2.5.2)
      addressable (~> 2.8)
-      childprocess (~> 5.0)
-      logger (~> 1.6)
-    letter_opener (1.10.0)
-      launchy (>= 2.2, < 4)
+    letter_opener (1.8.1)
+      launchy (>= 2.2, < 3)
    line-bot-api (1.28.0)
    lint_roller (1.1.0)
    liquid (5.4.0)
@@ -478,7 +471,7 @@ GEM
    mime-types-data (3.2023.0218.1)
    mini_magick (4.12.0)
    mini_mime (1.1.5)
-    mini_portile2 (2.8.9)
+    mini_portile2 (2.8.8)
    minitest (5.25.5)
    mock_redis (0.36.0)
      ruby2_keywords
@@ -509,14 +502,14 @@ GEM
    newrelic_rpm (9.6.0)
      base64
    nio4r (2.7.3)
-    nokogiri (1.18.9)
+    nokogiri (1.18.8)
      mini_portile2 (~> 2.8.2)
      racc (~> 1.4)
-    nokogiri (1.18.9-arm64-darwin)
+    nokogiri (1.18.8-arm64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-darwin)
+    nokogiri (1.18.8-x86_64-darwin)
      racc (~> 1.4)
-    nokogiri (1.18.9-x86_64-linux-gnu)
+    nokogiri (1.18.8-x86_64-linux-gnu)
      racc (~> 1.4)
    oauth (1.1.0)
      oauth-tty (~> 1.0, >= 1.0.1)
@@ -570,7 +563,7 @@ GEM
      method_source (~> 1.0)
    pry-rails (0.3.9)
      pry (>= 0.10.4)
-    public_suffix (6.0.2)
+    public_suffix (6.0.0)
    puma (6.4.3)
      nio4r (~> 2.0)
    pundit (2.3.0)
@@ -720,15 +713,6 @@ GEM
    ruby2ruby (2.5.0)
      ruby_parser (~> 3.1)
      sexp_processor (~> 4.6)
-    ruby_llm (1.3.1)
-      base64
-      event_stream_parser (~> 1)
-      faraday (>= 1.10.0)
-      faraday-multipart (>= 1)
-      faraday-net_http (>= 1)
-      faraday-retry (>= 1)
-      marcel (~> 1.0)
-      zeitwerk (~> 2)
    ruby_parser (3.20.0)
      sexp_processor (~> 4.16)
    sass (3.7.4)
@@ -786,9 +770,6 @@ GEM
      fugit (~> 1.8)
      globalid (>= 1.0.1)
      sidekiq (>= 6)
-    sidekiq_alive (2.5.0)
-      gserver (~> 0.0.1)
-      sidekiq (>= 5, < 9)
    signet (0.17.0)
      addressable (~> 2.8)
      faraday (>= 0.17.5, < 3.a)
@@ -827,7 +808,7 @@ GEM
    stripe (8.5.0)
    telephone_number (1.4.20)
    test-prof (1.2.1)
-    thor (1.4.0)
+    thor (1.3.1)
    tilt (2.3.0)
    time_diff (0.3.0)
      activesupport
@@ -910,7 +891,6 @@ DEPENDENCIES
  administrate (>= 0.20.1)
  administrate-field-active_storage (>= 1.0.3)
  administrate-field-belongs_to_search (>= 0.9.0)
-  ai-agents (>= 0.2.1)
  annotate
  attr_extras
  audited (~> 5.4, >= 5.4.1)
@@ -1014,7 +994,6 @@ DEPENDENCIES
  shoulda-matchers
  sidekiq (>= 7.3.1)
  sidekiq-cron (>= 1.12.0)
-  sidekiq_alive
  simplecov (= 0.17.1)
  slack-ruby-client (~> 2.5.2)
  spring
@@ -1 +1 @@
-4.4.0
+3.13.0
@@ -1 +1 @@
-3.4.2
+3.2.0
@@ -6,7 +6,6 @@
 # We don't want to update the name of the identified original contact.

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

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

  def merge_contact(base_contact, merge_contact)
@@ -10,8 +10,7 @@ function toggleSecretField(e) {
  if (!textElement) return;

  if (textElement.dataset.secretMasked === 'false') {
-    const maskedLength = secretField.dataset.secretText?.length || 10;
-    textElement.textContent = '•'.repeat(maskedLength);
+    textElement.textContent = '•'.repeat(10);
    textElement.dataset.secretMasked = 'true';
    toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-show');

@@ -33,13 +32,3 @@ function copySecretField(e) {

  navigator.clipboard.writeText(secretField.dataset.secretText);
 }
-
-document.addEventListener('DOMContentLoaded', () => {
-  document.querySelectorAll('.cell-data__secret-field').forEach(field => {
-    const span = field.querySelector('[data-secret-masked]');
-    if (span && span.dataset.secretMasked === 'true') {
-      const len = field.dataset.secretText?.length || 10;
-      span.textContent = '•'.repeat(len);
-    }
-  });
-});
@@ -46,25 +46,17 @@

 .cell-data__secret-field {
  align-items: center;
-  color: $hint-grey;
  display: flex;

  span {
-    flex: 0 0 auto;
+    flex: 1;
  }

-  [data-secret-toggler],
-  [data-secret-copier] {
-    background: transparent;
-    border: 0;
-    color: inherit;
-    margin-left: 0.5rem;
-    padding: 0;
+  button {
+    margin-left: 5px;

    svg {
      fill: currentColor;
-      height: 1.25rem;
-      width: 1.25rem;
    }
  }
 }
@@ -1,103 +0,0 @@
-class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
-  attr_reader :account, :params
-
-  # rubocop:disable Lint/MissingSuper
-  # the parent class has no initialize
-  def initialize(account:, params:)
-    @account = account
-    @params = params
-
-    timezone_offset = (params[:timezone_offset] || 0).to_f
-    @timezone = ActiveSupport::TimeZone[timezone_offset]&.name
-  end
-  # rubocop:enable Lint/MissingSuper
-
-  def build
-    labels = account.labels.to_a
-    return [] if labels.empty?
-
-    report_data = collect_report_data
-    labels.map { |label| build_label_report(label, report_data) }
-  end
-
-  private
-
-  def collect_report_data
-    conversation_filter = build_conversation_filter
-    use_business_hours = use_business_hours?
-
-    {
-      conversation_counts: fetch_conversation_counts(conversation_filter),
-      resolved_counts: fetch_resolved_counts(conversation_filter),
-      resolution_metrics: fetch_metrics(conversation_filter, 'conversation_resolved', use_business_hours),
-      first_response_metrics: fetch_metrics(conversation_filter, 'first_response', use_business_hours),
-      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
-    }
-  end
-
-  def build_label_report(label, report_data)
-    {
-      id: label.id,
-      name: label.title,
-      conversations_count: report_data[:conversation_counts][label.title] || 0,
-      avg_resolution_time: report_data[:resolution_metrics][label.title] || 0,
-      avg_first_response_time: report_data[:first_response_metrics][label.title] || 0,
-      avg_reply_time: report_data[:reply_metrics][label.title] || 0,
-      resolved_conversations_count: report_data[:resolved_counts][label.title] || 0
-    }
-  end
-
-  def use_business_hours?
-    ActiveModel::Type::Boolean.new.cast(params[:business_hours])
-  end
-
-  def build_conversation_filter
-    conversation_filter = { account_id: account.id }
-    conversation_filter[:created_at] = range if range.present?
-
-    conversation_filter
-  end
-
-  def fetch_conversation_counts(conversation_filter)
-    fetch_counts(conversation_filter)
-  end
-
-  def fetch_resolved_counts(conversation_filter)
-    # since the base query is ActsAsTaggableOn,
-    # the status :resolved won't automatically be converted to integer status
-    fetch_counts(conversation_filter.merge(status: Conversation.statuses[:resolved]))
-  end
-
-  def fetch_counts(conversation_filter)
-    ActsAsTaggableOn::Tagging
-      .joins('INNER JOIN conversations ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
-      .where(
-        taggable_type: 'Conversation',
-        context: 'labels',
-        conversations: conversation_filter
-      )
-      .select('tags.name, COUNT(taggings.*) AS count')
-      .group('tags.name')
-      .each_with_object({}) { |record, hash| hash[record.name] = record.count }
-  end
-
-  def fetch_metrics(conversation_filter, event_name, use_business_hours)
-    ReportingEvent
-      .joins('INNER JOIN conversations ON reporting_events.conversation_id = conversations.id')
-      .joins('INNER JOIN taggings ON taggings.taggable_id = conversations.id')
-      .joins('INNER JOIN tags ON taggings.tag_id = tags.id')
-      .where(
-        conversations: conversation_filter,
-        name: event_name,
-        taggings: { taggable_type: 'Conversation', context: 'labels' }
-      )
-      .group('tags.name')
-      .order('tags.name')
-      .select(
-        'tags.name',
-        use_business_hours ? 'AVG(reporting_events.value_in_business_hours) as avg_value' : 'AVG(reporting_events.value) as avg_value'
-      )
-      .each_with_object({}) { |record, hash| hash[record.name] = record.avg_value.to_f }
-  end
-end
@@ -30,14 +30,7 @@ class Api::V1::Accounts::CallbacksController < Api::V1::Accounts::BaseController
  end

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

  def set_instagram_id(page_access_token, facebook_channel)
@@ -29,6 +29,6 @@ class Api::V1::Accounts::CampaignsController < Api::V1::Accounts::BaseController

  def campaign_params
    params.require(:campaign).permit(:title, :description, :message, :enabled, :trigger_only_during_business_hours, :inbox_id, :sender_id,
-                                     :scheduled_at, audience: [:type, :id], trigger_rules: {}, template_params: {})
+                                     :scheduled_at, audience: [:type, :id], trigger_rules: {})
  end
 end
@@ -122,7 +122,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
  def resolved_contacts
    return @resolved_contacts if @resolved_contacts

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

    @resolved_contacts = @resolved_contacts.tagged_with(params[:labels], any: true) if params[:labels].present?
    @resolved_contacts
@@ -1,23 +1,32 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
  include GoogleConcern
+  before_action :check_authorization

  def create
+    email = params[:authorization][:email]
    redirect_url = google_client.auth_code.authorize_url(
      {
        redirect_uri: "#{base_url}/google/callback",
-        scope: scope,
+        scope: 'email profile https://mail.google.com/',
        response_type: 'code',
        prompt: 'consent', # the oauth flow does not return a refresh token, this is supposed to fix it
        access_type: 'offline', # the default is 'online'
-        state: state,
        client_id: GlobalConfigService.load('GOOGLE_OAUTH_CLIENT_ID', nil)
      }
    )

    if redirect_url
+      cache_key = "google::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
      render json: { success: true, url: redirect_url }
    else
      render json: { success: false }, status: :unprocessable_entity
    end
  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
 end
@@ -69,17 +69,6 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
    render status: :ok, json: { message: I18n.t('messages.inbox_deletetion_response') }
  end

-  def sync_templates
-    unless @inbox.channel.is_a?(Channel::Whatsapp)
-      return render status: :unprocessable_entity, json: { error: 'Template sync is only available for WhatsApp channels' }
-    end
-
-    Channels::Whatsapp::TemplatesSyncJob.perform_later(@inbox.channel)
-    render status: :ok, json: { message: 'Template sync initiated successfully' }
-  rescue StandardError => e
-    render status: :internal_server_error, json: { error: e.message }
-  end
-
  private

  def fetch_inbox
@@ -92,15 +81,11 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
  end

  def create_channel
-    return unless allowed_channel_types.include?(permitted_params[:channel][:type])
+    return unless %w[web_widget api email line telegram whatsapp sms].include?(permitted_params[:channel][:type])

    account_channels_method.create!(permitted_params(channel_type_from_params::EDITABLE_ATTRS)[:channel].except(:type))
  end

-  def allowed_channel_types
-    %w[web_widget api email line telegram whatsapp sms]
-  end
-
  def update_inbox_working_hours
    @inbox.update_working_hours(params.permit(working_hours: Inbox::OFFISABLE_ATTRS)[:working_hours]) if params[:working_hours]
  end
@@ -1,6 +1,7 @@
-class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::BaseController
  include InstagramConcern
  include Instagram::IntegrationHelper
+  before_action :check_authorization

  def create
    # https://developers.facebook.com/docs/instagram-platform/instagram-api-with-instagram-login/business-login#step-1--get-authorization
@@ -20,4 +21,10 @@ class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts
      render json: { success: false }, status: :unprocessable_entity
    end
  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
 end
@@ -1,9 +1,8 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
+  before_action :fetch_conversation, only: [:link_issue, :linked_issues]
  before_action :fetch_hook, only: [:destroy]

  def destroy
-    revoke_linear_token
    @hook.destroy!
    head :ok
  end
@@ -28,16 +27,10 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
  end

  def create_issue
-    issue = linear_processor_service.create_issue(permitted_params, Current.user)
+    issue = linear_processor_service.create_issue(permitted_params)
    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_created,
-        issue_data: { id: issue[:data][:identifier] },
-        user: Current.user
-      ).perform
      render json: issue[:data], status: :ok
    end
  end
@@ -45,34 +38,21 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
  def link_issue
    issue_id = permitted_params[:issue_id]
    title = permitted_params[:title]
-    issue = linear_processor_service.link_issue(conversation_link, issue_id, title, Current.user)
+    issue = linear_processor_service.link_issue(conversation_link, issue_id, title)
    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_linked,
-        issue_data: { id: issue_id },
-        user: Current.user
-      ).perform
      render json: issue[:data], status: :ok
    end
  end

  def unlink_issue
    link_id = permitted_params[:link_id]
-    issue_id = permitted_params[:issue_id]
    issue = linear_processor_service.unlink_issue(link_id)

    if issue[:error]
      render json: { error: issue[:error] }, status: :unprocessable_entity
    else
-      Linear::ActivityMessageService.new(
-        conversation: @conversation,
-        action_type: :issue_unlinked,
-        issue_data: { id: issue_id },
-        user: Current.user
-      ).perform
      render json: issue[:data], status: :ok
    end
  end
@@ -121,15 +101,4 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
  def fetch_hook
    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'linear')
  end
-
-  def revoke_linear_token
-    return unless @hook&.access_token
-
-    begin
-      linear_client = Linear.new(@hook.access_token)
-      linear_client.revoke_token
-    rescue StandardError => e
-      Rails.logger.error "Failed to revoke Linear token: #{e.message}"
-    end
-  end
 end
@@ -1,14 +0,0 @@
-class Api::V1::Accounts::Integrations::NotionController < Api::V1::Accounts::BaseController
-  before_action :fetch_hook, only: [:destroy]
-
-  def destroy
-    @hook.destroy!
-    head :ok
-  end
-
-  private
-
-  def fetch_hook
-    @hook = Integrations::Hook.where(account: Current.account).find_by(app_id: 'notion')
-  end
-end
@@ -1,19 +1,28 @@
-class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
+class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::BaseController
  include MicrosoftConcern
+  before_action :check_authorization

  def create
+    email = params[:authorization][:email]
    redirect_url = microsoft_client.auth_code.authorize_url(
      {
        redirect_uri: "#{base_url}/microsoft/callback",
-        scope: scope,
-        state: state,
+        scope: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
        prompt: 'consent'
      }
    )
    if redirect_url
+      cache_key = "microsoft::#{email.downcase}"
+      ::Redis::Alfred.setex(cache_key, Current.account.id, 5.minutes)
      render json: { success: true, url: redirect_url }
    else
      render json: { success: false }, status: :unprocessable_entity
    end
  end
+
+  private
+
+  def check_authorization
+    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
+  end
 end
@@ -1,21 +0,0 @@
-class Api::V1::Accounts::Notion::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
-  include NotionConcern
-
-  def create
-    redirect_url = notion_client.auth_code.authorize_url(
-      {
-        redirect_uri: "#{base_url}/notion/callback",
-        response_type: 'code',
-        owner: 'user',
-        state: state,
-        client_id: GlobalConfigService.load('NOTION_CLIENT_ID', nil)
-      }
-    )
-
-    if redirect_url
-      render json: { success: true, url: redirect_url }
-    else
-      render json: { success: false }, status: :unprocessable_entity
-    end
-  end
-end
@@ -1,23 +0,0 @@
-class Api::V1::Accounts::OauthAuthorizationController < Api::V1::Accounts::BaseController
-  before_action :check_authorization
-
-  protected
-
-  def scope
-    ''
-  end
-
-  def state
-    Current.account.to_sgid(expires_in: 15.minutes).to_s
-  end
-
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
-  end
-
-  private
-
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless Current.account_user.administrator?
-  end
-end
@@ -26,8 +26,9 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
      @portal.update!(portal_params.merge(live_chat_widget_params)) if params[:portal].present?
      # @portal.custom_domain = parsed_custom_domain
      process_attached_logo if params[:blob_id].present?
-    rescue ActiveRecord::RecordInvalid => e
-      render_record_invalid(e)
+    rescue StandardError => e
+      Rails.logger.error e
+      render json: { error: @portal.errors.messages }.to_json, status: :unprocessable_entity
    end
  end

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

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

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

  def portal_params
    params.require(:portal).permit(
-      :id, :account_id, :color, :custom_domain, :header_text, :homepage_link,
+      :account_id, :color, :custom_domain, :header_text, :homepage_link,
      :name, :page_title, :slug, :archived, { config: [:default_locale, { allowed_locales: [] }] }
    )
  end
@@ -101,10 +88,4 @@ class Api::V1::Accounts::PortalsController < Api::V1::Accounts::BaseController
    domain = URI.parse(@portal.custom_domain)
    domain.is_a?(URI::HTTP) ? domain.host : @portal.custom_domain
  end
-
-  def valid_email?(email)
-    ValidEmail2::Address.new(email).valid?
-  end
 end
-
-Api::V1::Accounts::PortalsController.prepend_mod_with('Api::V1::Accounts::PortalsController')
@@ -1,87 +0,0 @@
-class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
-  before_action :validate_feature_enabled!
-  before_action :fetch_and_validate_inbox, if: -> { params[:inbox_id].present? }
-
-  # POST /api/v1/accounts/:account_id/whatsapp/authorization
-  # Handles both initial authorization and reauthorization
-  # If inbox_id is present in params, it performs reauthorization
-  def create
-    validate_embedded_signup_params!
-    channel = process_embedded_signup
-    render_success_response(channel.inbox)
-  rescue StandardError => e
-    render_error_response(e)
-  end
-
-  private
-
-  def process_embedded_signup
-    service = Whatsapp::EmbeddedSignupService.new(
-      account: Current.account,
-      params: params.permit(:code, :business_id, :waba_id, :phone_number_id).to_h.symbolize_keys,
-      inbox_id: params[:inbox_id]
-    )
-    service.perform
-  end
-
-  def fetch_and_validate_inbox
-    @inbox = Current.account.inboxes.find(params[:inbox_id])
-    validate_reauthorization_required
-  end
-
-  def validate_reauthorization_required
-    return if @inbox.channel.reauthorization_required? || can_upgrade_to_embedded_signup?
-
-    render json: {
-      success: false,
-      message: I18n.t('inbox.reauthorization.not_required')
-    }, status: :unprocessable_entity
-  end
-
-  def can_upgrade_to_embedded_signup?
-    channel = @inbox.channel
-    return false unless channel.provider == 'whatsapp_cloud'
-
-    true
-  end
-
-  def render_success_response(inbox)
-    response = {
-      success: true,
-      id: inbox.id,
-      name: inbox.name,
-      channel_type: 'whatsapp'
-    }
-    response[:message] = I18n.t('inbox.reauthorization.success') if params[:inbox_id].present?
-    render json: response
-  end
-
-  def render_error_response(error)
-    Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
-    Rails.logger.error error.backtrace.join("\n")
-    render json: {
-      success: false,
-      error: error.message
-    }, status: :unprocessable_entity
-  end
-
-  def validate_feature_enabled!
-    return if Current.account.feature_whatsapp_embedded_signup?
-
-    render json: {
-      success: false,
-      error: 'WhatsApp embedded signup is not enabled for this account'
-    }, status: :forbidden
-  end
-
-  def validate_embedded_signup_params!
-    missing_params = []
-    missing_params << 'code' if params[:code].blank?
-    missing_params << 'business_id' if params[:business_id].blank?
-    missing_params << 'waba_id' if params[:waba_id].blank?
-
-    return if missing_params.empty?
-
-    raise ArgumentError, "Required parameters are missing: #{missing_params.join(', ')}"
-  end
-end
@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
  before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox]

  def agent
    render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -14,10 +14,6 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
    render_report_with(V2::Reports::InboxSummaryBuilder)
  end

-  def label
-    render_report_with(V2::Reports::LabelSummaryBuilder)
-  end
-
  private

  def check_authorization
@@ -14,7 +14,7 @@ module GoogleConcern

  private

-  def scope
-    'email profile https://mail.google.com/'
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
 end
@@ -15,7 +15,7 @@ module MicrosoftConcern

  private

-  def scope
-    'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile email'
+  def base_url
+    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
  end
 end
@@ -1,21 +0,0 @@
-module NotionConcern
-  extend ActiveSupport::Concern
-
-  def notion_client
-    app_id = GlobalConfigService.load('NOTION_CLIENT_ID', nil)
-    app_secret = GlobalConfigService.load('NOTION_CLIENT_SECRET', nil)
-
-    ::OAuth2::Client.new(app_id, app_secret, {
-                           site: 'https://api.notion.com',
-                           authorize_url: 'https://api.notion.com/v1/oauth/authorize',
-                           token_url: 'https://api.notion.com/v1/oauth/token',
-                           auth_scheme: :basic_auth
-                         })
-  end
-
-  private
-
-  def scope
-    ''
-  end
-end
@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
  private

  def ensure_html_format
-    render json: { error: 'Please use API routes instead of dashboard routes for JSON requests' }, status: :not_acceptable if request.format.json?
+    head :not_acceptable unless request.format.html?
  end

  def set_global_config
@@ -67,8 +67,6 @@ class DashboardController < ActionController::Base
      FB_APP_ID: GlobalConfigService.load('FB_APP_ID', ''),
      INSTAGRAM_APP_ID: GlobalConfigService.load('INSTAGRAM_APP_ID', ''),
      FACEBOOK_API_VERSION: GlobalConfigService.load('FACEBOOK_API_VERSION', 'v17.0'),
-      WHATSAPP_APP_ID: GlobalConfigService.load('WHATSAPP_APP_ID', ''),
-      WHATSAPP_CONFIGURATION_ID: GlobalConfigService.load('WHATSAPP_CONFIGURATION_ID', ''),
      IS_ENTERPRISE: ChatwootApp.enterprise?,
      AZURE_APP_ID: GlobalConfigService.load('AZURE_APP_ID', ''),
      GIT_SHA: GIT_HASH
@@ -2,7 +2,7 @@ class MicrosoftController < ApplicationController
  after_action :set_version_header

  def identity_association
-    microsoft_identity
+    microsoft_indentity
  end

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

-  def microsoft_identity
+  def microsoft_indentity
    @identity_json = GlobalConfigService.load('AZURE_APP_ID', nil)
  end
 end
@@ -1,36 +0,0 @@
-class Notion::CallbacksController < OauthCallbackController
-  include NotionConcern
-
-  private
-
-  def provider_name
-    'notion'
-  end
-
-  def oauth_client
-    notion_client
-  end
-
-  def handle_response
-    hook = account.hooks.new(
-      access_token: parsed_body['access_token'],
-      status: 'enabled',
-      app_id: 'notion',
-      settings: {
-        token_type: parsed_body['token_type'],
-        workspace_name: parsed_body['workspace_name'],
-        workspace_id: parsed_body['workspace_id'],
-        workspace_icon: parsed_body['workspace_icon'],
-        bot_id: parsed_body['bot_id'],
-        owner: parsed_body['owner']
-      }
-    )
-
-    hook.save!
-    redirect_to notion_redirect_uri
-  end
-
-  def notion_redirect_uri
-    "#{ENV.fetch('FRONTEND_URL', nil)}/app/accounts/#{account.id}/settings/integrations/notion"
-  end
-end
@@ -6,6 +6,7 @@ class OauthCallbackController < ApplicationController
    )

    handle_response
+    ::Redis::Alfred.delete(cache_key)
  rescue StandardError => e
    ChatwootExceptionTracker.new(e).capture_exception
    redirect_to '/'
@@ -63,6 +64,10 @@ class OauthCallbackController < ApplicationController
    raise NotImplementedError
  end

+  def cache_key
+    "#{provider_name}::#{users_data['email'].downcase}"
+  end
+
  def create_channel_with_inbox
    ActiveRecord::Base.transaction do
      channel_email = Channel::Email.create!(email: users_data['email'], account: account)
@@ -81,17 +86,12 @@ class OauthCallbackController < ApplicationController
    decoded_token[0]
  end

-  def account_from_signed_id
-    raise ActionController::BadRequest, 'Missing state variable' if params[:state].blank?
-
-    account = GlobalID::Locator.locate_signed(params[:state])
-    raise 'Invalid or expired state' if account.nil?
-
-    account
+  def account_id
+    ::Redis::Alfred.get(cache_key)
  end

  def account
-    @account ||= account_from_signed_id
+    @account ||= Account.find(account_id)
  end

  # Fallback name, for when name field is missing from users_data
@@ -1,11 +1,4 @@
 class Platform::Api::V1::AccountsController < PlatformController
-  def index
-    @resources = @platform_app.platform_app_permissibles
-                              .where(permissible_type: 'Account')
-                              .includes(:permissible)
-                              .map(&:permissible)
-  end
-
  def show; end

  def create
@@ -7,19 +7,13 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B

  def index
    @articles = @portal.articles.published.includes(:category, :author)
-
-    @articles = @articles.where(locale: permitted_params[:locale]) if permitted_params[:locale].present?
-
    @articles_count = @articles.count
-
    search_articles
    order_by_sort_param
    limit_results
  end

-  def show
-    @og_image_url = helpers.set_og_image_url(@portal.name, @article.title)
-  end
+  def show; end

  def tracking_pixel
    @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
@@ -8,9 +8,7 @@ class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals:
    @categories = @portal.categories.order(position: :asc)
  end

-  def show
-    @og_image_url = helpers.set_og_image_url(@portal.name, @category.name)
-  end
+  def show; end

  private

@@ -4,9 +4,7 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
  before_action :redirect_to_portal_with_locale, only: [:show]
  layout 'portal'

-  def show
-    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
-  end
+  def show; end

  def sitemap
    @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root
@@ -39,10 +39,7 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
-      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
-      'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
-      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
-      'google' => %w[GOOGLE_OAUTH_CLIENT_ID GOOGLE_OAUTH_CLIENT_SECRET GOOGLE_OAUTH_REDIRECT_URI]
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
    }

    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
@@ -7,9 +7,8 @@
 class SuperAdmin::ApplicationController < Administrate::ApplicationController
  include ActionView::Helpers::TagHelper
  include ActionView::Context
-  include SuperAdmin::NavigationHelper

-  helper_method :render_vue_component, :settings_open?, :settings_pages
+  helper_method :render_vue_component
  # authenticiation done via devise : SuperAdmin Model
  before_action :authenticate_super_admin!

@@ -27,11 +27,7 @@ class Twilio::CallbackController < ApplicationController
      *Array.new(10) { |i| :"MediaUrl#{i}" },
      *Array.new(10) { |i| :"MediaContentType#{i}" },
      :MessagingServiceSid,
-      :NumMedia,
-      :Latitude,
-      :Longitude,
-      :MessageType,
-      :ProfileName
+      :NumMedia
    )
  end
 end
@@ -4,16 +4,7 @@ class Webhooks::InstagramController < ActionController::API
  def events
    Rails.logger.info('Instagram webhook received events')
    if params['object'].casecmp('instagram').zero?
-      entry_params = params.to_unsafe_hash[:entry]
-
-      if contains_echo_event?(entry_params)
-        # Add delay to prevent race condition where echo arrives before send message API completes
-        # This avoids duplicate messages when echo comes early during API processing
-        ::Webhooks::InstagramEventsJob.set(wait: 2.seconds).perform_later(entry_params)
-      else
-        ::Webhooks::InstagramEventsJob.perform_later(entry_params)
-      end
-
+      ::Webhooks::InstagramEventsJob.perform_later(params.to_unsafe_hash[:entry])
      render json: :ok
    else
      Rails.logger.warn("Message is not received from the instagram webhook event: #{params['object']}")
@@ -23,16 +14,6 @@ class Webhooks::InstagramController < ActionController::API

  private

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

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

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

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

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

@@ -36,13 +36,9 @@ module Api::V2::Accounts::ReportsHelper
  end

  def generate_labels_report
-    reports = V2::Reports::LabelSummaryBuilder.new(
-      account: Current.account,
-      params: build_params({})
-    ).build
-
-    reports.map do |report|
-      [report[:name]] + generate_readable_report_metrics(report)
+    Current.account.labels.map do |label|
+      label_report = report_builder({ type: :label, id: label.id }).short_summary
+      [label.title] + generate_readable_report_metrics(label_report)
    end
  end

@@ -1,13 +1,9 @@
 module MessageFormatHelper
+  include RegexHelper
+
  def transform_user_mention_content(message_content)
    # attachment message without content, message_content is nil
-    return '' unless message_content.presence
-
-    # Use CommonMarker to convert markdown to plain text for notifications
-    # This handles all markdown formatting (links, bold, italic, etc.) not just mentions
-    # Converts: [@👍 customer support](mention://team/1/%F0%9F%91%8D%20customer%20support)
-    # To: @👍 customer support
-    CommonMarker.render_doc(message_content).to_plaintext.strip
+    message_content.presence ? message_content.gsub(MENTION_REGEX, '\1') : ''
  end

  def render_message_content(message_content)
@@ -1,21 +1,4 @@
 module PortalHelper
-  def set_og_image_url(portal_name, title)
-    cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
-    return if cdn_url.blank?
-
-    client_ref = GlobalConfig.get('OG_IMAGE_CLIENT_REF')['OG_IMAGE_CLIENT_REF']
-
-    uri = URI.parse(cdn_url)
-    uri.path = '/og'
-    uri.query = URI.encode_www_form(
-      clientRef: client_ref,
-      title: title,
-      portalName: portal_name
-    )
-
-    uri.to_s
-  end
-
  def generate_portal_bg_color(portal_color, theme)
    base_color = theme == 'dark' ? 'black' : 'white'
    "color-mix(in srgb, #{portal_color} 20%, #{base_color})"
@@ -1,16 +0,0 @@
-module SuperAdmin::NavigationHelper
-  def settings_open?
-    params[:controller].in? %w[super_admin/settings super_admin/app_configs]
-  end
-
-  def settings_pages
-    features = SuperAdmin::FeaturesHelper.available_features.select do |_feature, attrs|
-      attrs['config_key'].present? && attrs['enabled']
-    end
-
-    # Add general at the beginning
-    general_feature = [['general', { 'config_key' => 'general', 'name' => 'General' }]]
-
-    general_feature + features.to_a
-  end
-end
@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import AddAccountModal from './components/app/AddAccountModal.vue';
+import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
@@ -136,7 +136,8 @@ export default {
  <div
    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
    id="app"
-    class="flex flex-col w-full h-screen min-h-0"
+    class="flex-grow-0 w-full h-full min-h-0 app-wrapper"
+    :class="{ 'app-rtl--wrapper': isRTL }"
    :dir="isRTL ? 'rtl' : 'ltr'"
  >
    <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
@@ -38,7 +38,13 @@ export default {
    }
    return false;
  },
-  profileUpdate({ displayName, avatar, ...profileAttributes }) {
+  profileUpdate({
+    password,
+    password_confirmation,
+    displayName,
+    avatar,
+    ...profileAttributes
+  }) {
    const formData = new FormData();
    Object.keys(profileAttributes).forEach(key => {
      const hasValue = profileAttributes[key] === undefined;
@@ -47,22 +53,16 @@ export default {
      }
    });
    formData.append('profile[display_name]', displayName || '');
+    if (password && password_confirmation) {
+      formData.append('profile[password]', password);
+      formData.append('profile[password_confirmation]', password_confirmation);
+    }
    if (avatar) {
      formData.append('profile[avatar]', avatar);
    }
    return axios.put(endPoints('profileUpdate').url, formData);
  },

-  profilePasswordUpdate({ currentPassword, password, passwordConfirmation }) {
-    return axios.put(endPoints('profileUpdate').url, {
-      profile: {
-        current_password: currentPassword,
-        password,
-        password_confirmation: passwordConfirmation,
-      },
-    });
-  },
-
  updateUISettings({ uiSettings }) {
    return axios.put(endPoints('profileUpdate').url, {
      profile: { ui_settings: uiSettings },
@@ -1,36 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainScenarios extends ApiClient {
-  constructor() {
-    super('captain/assistants', { accountScoped: true });
-  }
-
-  get({ assistantId, page = 1, searchKey } = {}) {
-    return axios.get(`${this.url}/${assistantId}/scenarios`, {
-      params: { page, searchKey },
-    });
-  }
-
-  show({ assistantId, id }) {
-    return axios.get(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-
-  create({ assistantId, ...data } = {}) {
-    return axios.post(`${this.url}/${assistantId}/scenarios`, {
-      scenario: data,
-    });
-  }
-
-  update({ assistantId, id }, data = {}) {
-    return axios.put(`${this.url}/${assistantId}/scenarios/${id}`, {
-      scenario: data,
-    });
-  }
-
-  delete({ assistantId, id }) {
-    return axios.delete(`${this.url}/${assistantId}/scenarios/${id}`);
-  }
-}
-
-export default new CaptainScenarios();
@@ -1,16 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class CaptainTools extends ApiClient {
-  constructor() {
-    super('captain/assistants/tools', { accountScoped: true });
-  }
-
-  get(params = {}) {
-    return axios.get(this.url, {
-      params,
-    });
-  }
-}
-
-export default new CaptainTools();
@@ -1,21 +0,0 @@
-/* global axios */
-import ApiClient from '../ApiClient';
-
-class WhatsappChannel extends ApiClient {
-  constructor() {
-    super('whatsapp', { accountScoped: true });
-  }
-
-  createEmbeddedSignup(params) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, params);
-  }
-
-  reauthorizeWhatsApp({ inboxId, ...params }) {
-    return axios.post(`${this.baseUrl()}/whatsapp/authorization`, {
-      ...params,
-      inbox_id: inboxId,
-    });
-  }
-}
-
-export default new WhatsappChannel();
@@ -51,7 +51,6 @@ const endPoints = {
  resendConfirmation: {
    url: '/api/v1/profile/resend_confirmation',
  },
-
  resetAccessToken: {
    url: '/api/v1/profile/reset_access_token',
  },
@@ -21,14 +21,6 @@ class PortalsAPI extends ApiClient {
  deleteLogo(portalSlug) {
    return axios.delete(`${this.url}/${portalSlug}/logo`);
  }
-
-  sendCnameInstructions(portalSlug, email) {
-    return axios.post(`${this.url}/${portalSlug}/send_instructions`, { email });
-  }
-
-  sslStatus(portalSlug) {
-    return axios.get(`${this.url}/${portalSlug}/ssl_status`);
-  }
 }

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

 export default new Inboxes();
@@ -33,11 +33,9 @@ class LinearAPI extends ApiClient {
    );
  }

-  unlinkIssue(linkId, issueIdentifier, conversationId) {
+  unlinkIssue(linkId) {
    return axios.post(`${this.url}/unlink_issue`, {
      link_id: linkId,
-      issue_id: issueIdentifier,
-      conversation_id: conversationId,
    });
  }

@@ -1,14 +0,0 @@
-/* global axios */
-import ApiClient from './ApiClient';
-
-class NotionOAuthClient extends ApiClient {
-  constructor() {
-    super('notion', { accountScoped: true });
-  }
-
-  generateAuthorization() {
-    return axios.post(`${this.url}/authorization`);
-  }
-}
-
-export default new NotionOAuthClient();
@@ -12,7 +12,6 @@ describe('#InboxesAPI', () => {
    expect(inboxesAPI).toHaveProperty('getCampaigns');
    expect(inboxesAPI).toHaveProperty('getAgentBot');
    expect(inboxesAPI).toHaveProperty('setAgentBot');
-    expect(inboxesAPI).toHaveProperty('syncTemplates');
  });

  describe('API calls', () => {
@@ -41,12 +40,5 @@ describe('#InboxesAPI', () => {
      inboxesAPI.deleteInboxAvatar(2);
      expect(axiosMock.delete).toHaveBeenCalledWith('/api/v1/inboxes/2/avatar');
    });
-
-    it('#syncTemplates', () => {
-      inboxesAPI.syncTemplates(2);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/inboxes/2/sync_templates'
-      );
-    });
  });
 });
@@ -91,19 +91,6 @@ describe('#linearAPI', () => {
        issueData
      );
    });
-
-    it('creates a valid request with conversation_id', () => {
-      const issueData = {
-        title: 'New Issue',
-        description: 'Issue description',
-        conversation_id: 123,
-      };
-      LinearAPIClient.createIssue(issueData);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/create_issue',
-        issueData
-      );
-    });
  });

  describe('link_issue', () => {
@@ -133,18 +120,6 @@ describe('#linearAPI', () => {
        }
      );
    });
-
-    it('creates a valid request with title', () => {
-      LinearAPIClient.link_issue(1, 'ENG-123', 'Sample Issue');
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/link_issue',
-        {
-          issue_id: 'ENG-123',
-          conversation_id: 1,
-          title: 'Sample Issue',
-        }
-      );
-    });
  });

  describe('getLinkedIssue', () => {
@@ -189,26 +164,12 @@ describe('#linearAPI', () => {
      window.axios = originalAxios;
    });

-    it('creates a valid request with link_id only', () => {
-      LinearAPIClient.unlinkIssue('link123');
+    it('creates a valid request', () => {
+      LinearAPIClient.unlinkIssue(1);
      expect(axiosMock.post).toHaveBeenCalledWith(
        '/api/v1/integrations/linear/unlink_issue',
        {
-          link_id: 'link123',
-          issue_id: undefined,
-          conversation_id: undefined,
-        }
-      );
-    });
-
-    it('creates a valid request with all parameters', () => {
-      LinearAPIClient.unlinkIssue('link123', 'ENG-456', 789);
-      expect(axiosMock.post).toHaveBeenCalledWith(
-        '/api/v1/integrations/linear/unlink_issue',
-        {
-          link_id: 'link123',
-          issue_id: 'ENG-456',
-          conversation_id: 789,
+          link_id: 1,
        }
      );
    });
@@ -35,16 +35,6 @@ class SummaryReportsAPI extends ApiClient {
      },
    });
  }
-
-  getLabelReports({ since, until, businessHours } = {}) {
-    return axios.get(`${this.url}/label`, {
-      params: {
-        since,
-        until,
-        business_hours: businessHours,
-      },
-    });
-  }
 }

 export default new SummaryReportsAPI();
@@ -0,0 +1,101 @@
+.slide-fade-enter-active {
+  transition: all 0.3s var(--ease-in-cubic);
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s var(--ease-out-cubic);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(10px);
+}
+
+.slide-fade-enter {
+  transform: translateX($space-micro);
+}
+
+.slide-fade-leave-to {
+  transform: translateX($space-medium);
+}
+
+.conversations-list-enter-active,
+.conversations-list-leave-active {
+  transition: all 0.25s var(--ease-out-cubic);
+}
+
+.conversations-list-enter,
+.conversations-list-leave-to {
+  opacity: 0;
+  transform: translateX($space-medium);
+}
+
+.slide-up-enter-active {
+  transition: all 0.3s var(--ease-in-cubic);
+}
+
+.slide-up-leave-active {
+  transition: all 0.3s var(--ease-out-cubic);
+}
+
+.slide-up-enter,
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-$space-medium);
+}
+
+.menu-slide-enter-active,
+.menu-slide-leave-active {
+  transform: translateY(0);
+  transition:
+    transform 0.25s var(--ease-in-cubic),
+    opacity 0.15s var(--ease-in-cubic);
+}
+
+.menu-slide-enter,
+.menu-slide-leave-to {
+  opacity: 0;
+  transform: translateY($space-small);
+}
+
+.toast-fade-enter-active {
+  transition: all 0.3s var(--ease-in-sine);
+}
+
+.toast-fade-leave-active {
+  transition: all 0.1s var(--ease-out-sine);
+}
+
+.toast-fade-enter,
+.toast-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-$space-small);
+}
+
+.modal-fade-enter-active {
+  transition: all 0.3s var(--ease-in-sine);
+}
+
+.modal-fade-leave-active {
+  transition: all 0.1s var(--ease-out-sine);
+}
+
+.modal-fade-enter,
+.modal-fade-leave-to {
+  opacity: 0;
+}
+
+.network-notification-fade-enter-active {
+  transition: all 0.1s var(--ease-in-sine);
+}
+
+.network-notification-fade-leave-active {
+  transition: all 0.1s var(--ease-out-sine);
+}
+
+.network-notification-fade-enter,
+.network-notification-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-$space-small);
+}
@@ -30,11 +30,11 @@

  .mx-input:disabled,
  .mx-input[readonly] {
-    @apply bg-n-background cursor-pointer;
+    @apply bg-white dark:bg-slate-900 cursor-pointer;
  }

  .mx-icon-calendar {
-    @apply text-n-slate-10;
+    @apply dark:text-slate-500;
  }
 }

@@ -43,17 +43,17 @@

  .cell {
    &.disabled {
-      @apply bg-n-slate-2 dark:bg-n-background text-n-slate-10;
+      @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
    }

    &:hover,
    &.hover-in-range,
    &.in-range {
-      @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
+      @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
    }
  }

-  .mx-calendar + .mx-calendar {
+  .mx-calendar+.mx-calendar {
    @apply border-l border-n-weak;
  }

@@ -62,7 +62,7 @@
  }

  .mx-time {
-    @apply border-0 bg-n-background dark:bg-n-solid-2;
+    @apply border-0 bg-white dark:bg-slate-800;

    .mx-time-header {
      @apply border-0;
@@ -70,11 +70,11 @@

    .mx-time-item {
      &.disabled {
-        @apply bg-n-slate-2 dark:bg-n-background;
+        @apply bg-slate-25 dark:bg-slate-900;
      }

      &:hover {
-        @apply bg-n-slate-3 dark:bg-n-solid-3;
+        @apply bg-slate-75 dark:bg-slate-700;
      }
    }
  }
@@ -0,0 +1,38 @@
+@import 'dashboard/assets/scss/variables';
+
+.formulate-input {
+  .formulate-input-errors {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .formulate-input-error {
+    color: var(--r-400);
+    display: block;
+    font-size: var(--font-size-small);
+    font-weight: $font-weight-normal;
+    margin-bottom: $space-one;
+    width: 100%;
+  }
+}
+
+.integration-hooks {
+  .formulate-input[data-type='checkbox'] {
+    .formulate-input-wrapper {
+      @apply flex;
+
+      .formulate-input-element {
+        @apply pr-2;
+
+        input {
+          @apply mb-0;
+        }
+      }
+    }
+
+    .formulate-input-element-decorator {
+      @apply hidden;
+    }
+  }
+}
@@ -0,0 +1,21 @@
+// loader class
+.spinner {
+  @include color-spinner();
+  @apply inline-block h-6 py-0 px-6 relative align-middle w-6;
+
+  &.message {
+    @apply bg-white dark:bg-slate-800 rounded-full left-0 my-3 mx-auto p-4 top-0;
+
+    &::before {
+      @apply -ml-3 -mt-3;
+    }
+  }
+
+  &.small {
+    @apply h-4 w-4;
+
+    &::before {
+      @apply h-4 -mt-2 w-4;
+    }
+  }
+}
@@ -0,0 +1,48 @@
+// scss-lint:disable SpaceAfterPropertyColon
+@import 'shared/assets/fonts/inter';
+
+// Inter,
+html,
+body {
+  font-family:
+    'Inter',
+    -apple-system,
+    system-ui,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Tahoma,
+    Arial,
+    sans-serif !important;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.app-wrapper {
+  @apply h-screen flex-grow-0 min-h-0 w-full;
+
+  .button--fixed-top {
+    @apply fixed ltr:right-2 rtl:left-2 top-2 flex flex-row;
+  }
+}
+
+.banner + .app-wrapper {
+  // Reduce the height of the dashboard to make room for the banner.
+  // And causing the top right green-action button to be pushed down when scrolling.
+  @apply h-[calc(100%-48px)];
+
+  .button--fixed-top {
+    @apply top-14;
+  }
+
+  .off-canvas-content {
+    .button--fixed-top {
+      @apply top-2;
+    }
+  }
+}
@@ -0,0 +1,101 @@
+@import 'dashboard/assets/scss/variables';
+
+$spinner-before-border-color: rgba(255, 255, 255, 0.7);
+
+// input form
+@mixin ghost-input() {
+  box-shadow: none;
+  border-color: transparent;
+
+  &:active,
+  &:hover,
+  &:focus {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
+
+@mixin color-spinner() {
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  &::before {
+    animation: spinner .9s linear infinite;
+    border: 2px solid $spinner-before-border-color;
+    border-radius: 50%;
+    border-top-color: lighten($color-woot, 10%);
+    box-sizing: border-box;
+    content: '';
+    height: $space-medium;
+    left: 50%;
+    margin-left: -$space-one;
+    margin-top: -$space-one;
+    position: absolute;
+    top: 50%;
+    width: $space-medium;
+  }
+}
+
+// --------------------------------------------------------
+// arrows
+// --------------------------------------------------------
+// $direction: top, left, right, bottom, top-left, top-right, bottom-left, bottom-right
+// $color: hex, rgb or rbga
+// $size: px or em
+// @example
+// .element{
+//     @include arrow(top, #000, 50px);
+// }
+@mixin arrow($direction, $color, $size) {
+  display: block;
+  height: 0;
+  width: 0;
+  content: '';
+
+  @if $direction == 'top' {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+  }
+
+  @else if $direction == 'right' {
+    border-bottom: $size solid transparent;
+    border-left: $size solid $color;
+    border-top: $size solid transparent;
+  }
+
+  @else if $direction == 'bottom' {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  @else if $direction == 'left' {
+    border-bottom: $size solid transparent;
+    border-right: $size solid $color;
+    border-top: $size solid transparent;
+  }
+
+  @else if $direction == 'top-left' {
+    border-right: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  @else if $direction == 'top-right' {
+    border-left: $size solid transparent;
+    border-top: $size solid $color;
+  }
+
+  @else if $direction == 'bottom-left' {
+    border-bottom: $size solid $color;
+    border-right: $size solid transparent;
+  }
+
+  @else if $direction == 'bottom-right' {
+    border-bottom: $size solid $color;
+    border-left: $size solid transparent;
+  }
+}
@@ -0,0 +1,204 @@
+.app-rtl--wrapper {
+  direction: rtl;
+
+  // Woot Tabs
+  .tabs-title {
+    &:first-child {
+      margin-left: var(--space-small);
+      margin-right: unset;
+    }
+
+    &:last-child {
+      margin-left: unset;
+      margin-right: var(--space-small);
+    }
+  }
+
+  // woot tables
+  table,
+  thead,
+  th {
+    text-align: right;
+  }
+
+  // Table footer
+  .footer {
+    .page-meta {
+      direction: initial;
+    }
+  }
+
+  // Wizard box
+  .wizard-box {
+    direction: initial;
+  }
+
+  // Conversation details
+  .conversation-details-wrap {
+    .conversation-panel {
+      // Message text
+      .text-content {
+        p {
+          unicode-bidi: plaintext;
+        }
+
+        ul {
+          padding-left: unset;
+          padding-right: var(--space-two);
+        }
+
+        li {
+          text-align: right;
+        }
+      }
+
+      // Message items and actions
+      li {
+        &.right {
+          .sender--info {
+            padding: var(--space-small) var(--space-smaller)
+              var(--space-smaller) 0;
+          }
+
+          .context-menu-wrap {
+            margin-left: 0;
+            margin-right: auto;
+          }
+        }
+      }
+    }
+
+    // Conversation footer
+    .conversation-footer {
+      .preview-item {
+        direction: initial;
+      }
+    }
+
+    // Custom attributes section in conversation sidebar
+    .conversation-sidebar-wrap .checkbox-wrap {
+      .checkbox {
+        margin-left: var(--space-small);
+      }
+    }
+  }
+
+  // Conversation list
+  .conversations-list-wrap {
+    border-right: 0;
+
+    .conversation {
+      .conversation--meta {
+        left: $space-normal;
+        right: unset;
+
+        .unread {
+          margin-left: unset;
+          margin-right: auto;
+        }
+      }
+
+      .assignee-label {
+        margin-left: 0;
+        margin-right: var(--space-one);
+      }
+
+      .show-more--button {
+        margin: unset;
+        transform: rotate(180deg);
+      }
+    }
+
+    // Basic filter dropdown
+    .basic-filter {
+      left: 0;
+      right: unset;
+    }
+
+    // Bulk actions
+    .bulk-action__container {
+      .triangle {
+        left: var(--triangle-position);
+        right: unset;
+      }
+
+      .bulk-action__agents {
+        left: var(--space-small);
+        right: unset;
+      }
+
+      .labels-container {
+        left: var(--space-small);
+        right: unset;
+
+        .label-checkbox {
+          margin: 0 0 0 var(--space-one);
+        }
+      }
+
+      .actions-container {
+        left: var(--space-small);
+        right: unset;
+      }
+
+      .bulk-action__teams {
+        left: var(--space-small);
+        right: unset;
+      }
+    }
+  }
+
+  // Contact notes
+  .card.note-wrap {
+    .time-stamp {
+      unicode-bidi: plaintext;
+    }
+  }
+
+  // Toggle switch
+  .toggle-button {
+    &.small {
+      span {
+        &.active {
+          transform: translate(var(--space-minus-small), var(--space-zero));
+        }
+      }
+    }
+
+    span {
+      --minus-space-one-point-five: -0.9375rem;
+
+      &.active {
+        transform: translate(
+          var(--minus-space-one-point-five),
+          var(--space-zero)
+        );
+      }
+    }
+  }
+
+  // Modal
+  .modal-container {
+    text-align: right;
+
+    .modal-footer {
+      button {
+        margin-left: 0;
+        margin-right: var(--space-small);
+      }
+    }
+  }
+
+  // Other changes
+  .colorpicker--chrome {
+    direction: initial;
+  }
+
+  .mention--box {
+    direction: initial;
+  }
+
+  .contact--form .input-group {
+    direction: initial;
+  }
+}
@@ -0,0 +1,97 @@
+// Font sizes
+$font-size-nano: 0.5rem;
+$font-size-micro: 0.675rem;
+$font-size-mini: 0.75rem;
+$font-size-small: 0.875rem;
+$font-size-default: 1rem;
+$font-size-medium: 1.125rem;
+$font-size-large: 1.375rem;
+$font-size-big: 1.5rem;
+$font-size-bigger: 1.75rem;
+$font-size-mega: 2.125rem;
+$font-size-giga: 2.5rem;
+
+// spaces
+$zero: 0;
+$space-micro: 0.125rem;
+$space-smaller: 0.25rem;
+$space-small: 0.5rem;
+$space-one: 0.675rem;
+$space-slab: 0.75rem;
+$space-normal: 1rem;
+$space-two: 1.25rem;
+$space-medium: 1.5rem;
+$space-large: 2rem;
+$space-larger: 3rem;
+$space-jumbo: 4rem;
+$space-mega: 6.25rem;
+
+// font-weight
+$font-weight-feather: 100;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 700;
+
+//Navbar
+$nav-bar-width: 14.375rem;
+$header-height: 3.5rem;
+
+$woot-logo-padding: $space-large $space-two;
+
+// Colors
+$color-woot: #1f93ff;
+$color-gray: #6e6f73;
+$color-light-gray: #999a9b;
+
+$color-border: var(--s-75);
+$color-border-light: var(--s-50);
+$color-border-dark: var(--s-100);
+
+$color-background: var(--s-50);
+$color-background-light: var(--s-25);
+
+$color-white: #fff;
+$color-body: #3c4858;
+$color-heading: #1f2d3d;
+$color-extra-light-blue: #f5f7f9;
+
+$primary-color: $color-woot;
+$secondary-color: #5d7592;
+$success-color: #44ce4b;
+$warning-color: #ffc532;
+$alert-color: #ff382d;
+
+$masked-bg: rgba(0, 0, 0, .4);
+
+// Color-palettes
+
+$color-primary-light: #c7e3ff;
+$color-primary-dark: darken($color-woot, 20%);
+
+// Thumbnail
+$thumbnail-radius: 2.5rem;
+
+// chat-header
+$conv-header-height: 2.5rem;
+
+// Inbox List
+
+$inbox-thumb-size: 3rem;
+
+
+// Snackbar default
+$woot-snackbar-bg: #323232;
+$woot-snackbar-button: #ffeb3b;
+
+$swift-ease-out-duration: .4s !default;
+$swift-ease-out-function: cubic-bezier(0.37, 0, 0.63, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-function !default;
+
+// Transitions
+$transition-ease-in: all 0.250s ease-in;
+
+:root {
+  --dashboard-app-tabs-height: 2.4375rem;
+}
@@ -1,4 +1,3 @@
-// scss-lint:disable SpaceAfterPropertyColon
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@@ -9,42 +8,54 @@
 // Next Colors
@import 'next-colors';

-// Base styles for elements
-@import 'base';
+@import 'shared/assets/stylesheets/animations';
+@import 'shared/assets/stylesheets/colors';
+@import 'shared/assets/stylesheets/spacing';
+@import 'shared/assets/stylesheets/font-size';
+@import 'shared/assets/stylesheets/font-weights';
+@import 'shared/assets/stylesheets/shadows';
+@import 'shared/assets/stylesheets/border-radius';
+@import 'shared/assets/stylesheets/z-index';
+
+@import 'variables';
+
+@import 'mixins';
+@import 'helper-classes';
+@import 'formulate';
+@import 'date-picker';
+
+@import 'layout';
+@import 'animations';
+@import 'rtl';
+
+@import 'widgets/base';
+@import 'widgets/conversation-view';
+@import 'widgets/tabs';
+@import 'widgets/woot-tables';

-// Plugins
@import 'plugins/multiselect';
-@import 'plugins/date-picker';
-
-html,
-body {
-  font-family:
-    'Inter',
-    -apple-system,
-    system-ui,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    'Helvetica Neue',
-    Tahoma,
-    Arial,
-    sans-serif !important;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-}
+@import 'plugins/dropdown';

 .tooltip {
-  @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md max-w-96;
+  @apply bg-slate-900 text-white py-1 px-2 z-40 text-xs rounded-md dark:bg-slate-200 dark:text-slate-900 max-w-96;
 }

 #app {
  @apply h-full w-full;
 }

+.hide {
+  @apply hidden;
+}
+
+.n-blue-border {
+  @apply border-n-blue-border;
+}
+
+.n-blue-text {
+  @apply text-n-blue-text;
+}
+
 .custom-dashed-border {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23E2E3E7' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: center;
@@ -56,6 +67,351 @@ body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23343434' stroke-width='2' stroke-dasharray='6, 8' stroke-dashoffset='0' stroke-linecap='round'/%3E%3C/svg%3E");
 }

+// scss-lint:disable PropertySortOrder
+@layer base {
+  :root {
+    --color-amber-25: 254 253 251;
+    --color-amber-50: 255 249 237;
+    --color-amber-75: 255 243 208;
+    --color-amber-100: 255 236 183;
+    --color-amber-200: 255 224 161;
+    --color-amber-300: 245 208 140;
+    --color-amber-400: 228 187 120;
+    --color-amber-500: 214 163 92;
+    --color-amber-600: 214 163 92;
+    --color-amber-700: 255 186 26;
+    --color-amber-800: 145 89 48;
+    --color-amber-900: 79 52 34;
+
+    --color-ash-100: 235 235 239;
+    --color-ash-200: 228 228 233;
+    --color-ash-25: 252 252 253;
+    --color-ash-300: 221 221 227;
+    --color-ash-400: 211 212 219;
+    --color-ash-50: 249 249 251;
+    --color-ash-500: 185 187 198;
+    --color-ash-600: 139 141 152;
+    --color-ash-700: 126 128 138;
+    --color-ash-75: 242 242 245;
+    --color-ash-800: 96 100 108;
+    --color-ash-900: 28 32 36;
+
+    --color-primary-25: 251 253 255;
+    --color-primary-50: 245 249 255;
+    --color-primary-75: 233 243 255;
+    --color-primary-100: 218 236 255;
+    --color-primary-200: 201 226 255;
+    --color-primary-300: 181 213 255;
+    --color-primary-400: 155 195 252;
+    --color-primary-500: 117 171 247;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 16 115 233;
+    --color-primary-800: 8 109 224;
+    --color-primary-900: 11 50 101;
+
+    --color-ruby-100: 255 220 225;
+    --color-ruby-200: 255 206 214;
+    --color-ruby-25: 255 252 253;
+    --color-ruby-300: 248 191 200;
+    --color-ruby-400: 239 172 184;
+    --color-ruby-50: 255 247 248;
+    --color-ruby-500: 229 146 163;
+    --color-ruby-600: 229 70 102;
+    --color-ruby-700: 220 59 93;
+    --color-ruby-75: 254 234 237;
+    --color-ruby-800: 202 36 77;
+    --color-ruby-900: 100 23 43;
+
+    --color-teal-100: 224 248 243;
+    --color-teal-200: 204 243 234;
+    --color-teal-25: 250 254 253;
+    --color-teal-300: 184 234 224;
+    --color-teal-400: 161 222 210;
+    --color-teal-50: 243 251 249;
+    --color-teal-500: 83 185 171;
+    --color-teal-600: 18 165 148;
+    --color-teal-700: 13 155 138;
+    --color-teal-75: 236 249 255;
+    --color-teal-800: 0 133 115;
+    --color-teal-900: 13 61 56;
+
+    --color-green-25: 251 254 252;
+    --color-green-50: 244 251 246;
+    --color-green-75: 230 246 235;
+    --color-green-100: 214 241 223;
+    --color-green-200: 196 232 209;
+    --color-green-300: 173 221 192;
+    --color-green-400: 142 206 170;
+    --color-green-500: 91 185 139;
+    --color-green-600: 48 164 108;
+    --color-green-700: 43 154 102;
+    --color-green-800: 33 131 88;
+    --color-green-900: 25 59 45;
+
+    --color-mint-25: 249 254 253;
+    --color-mint-50: 242 251 249;
+    --color-mint-75: 221 249 242;
+    --color-mint-100: 200 244 233;
+    --color-mint-200: 179 236 222;
+    --color-mint-300: 156 224 208;
+    --color-mint-400: 126 207 189;
+    --color-mint-500: 76 187 165;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 125 224 203;
+    --color-mint-800: 2 120 100;
+    --color-mint-900: 22 67 60;
+
+    --color-sky-25: 249 254 255;
+    --color-sky-50: 241 250 253;
+    --color-sky-75: 225 246 253;
+    --color-sky-100: 209 240 250;
+    --color-sky-200: 190 231 245;
+    --color-sky-300: 169 218 237;
+    --color-sky-400: 141 202 227;
+    --color-sky-500: 96 179 215;
+    --color-sky-600: 124 226 254;
+    --color-sky-700: 116 218 248;
+    --color-sky-800: 0 116 158;
+    --color-sky-900: 29 62 86;
+
+    --color-indigo-25: 253 253 254;
+    --color-indigo-50: 247 249 255;
+    --color-indigo-75: 237 242 254;
+    --color-indigo-100: 225 233 255;
+    --color-indigo-200: 210 222 255;
+    --color-indigo-300: 193 208 255;
+    --color-indigo-400: 171 189 249;
+    --color-indigo-500: 141 164 239;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 51 88 212;
+    --color-indigo-800: 58 91 199;
+    --color-indigo-900: 31 45 92;
+
+    --color-iris-25: 253 253 255;
+    --color-iris-50: 248 248 255;
+    --color-iris-75: 240 241 254;
+    --color-iris-100: 230 231 255;
+    --color-iris-200: 218 220 255;
+    --color-iris-300: 203 205 255;
+    --color-iris-400: 184 186 248;
+    --color-iris-500: 155 158 240;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 81 81 205;
+    --color-iris-800: 87 83 198;
+    --color-iris-900: 39 41 98;
+
+    --color-violet-25: 253 252 254;
+    --color-violet-50: 250 248 255;
+    --color-violet-75: 244 240 254;
+    --color-violet-100: 235 228 255;
+    --color-violet-200: 225 217 255;
+    --color-violet-300: 212 202 254;
+    --color-violet-400: 194 181 245;
+    --color-violet-500: 170 153 236;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 101 77 196;
+    --color-violet-800: 101 80 185;
+    --color-violet-900: 47 38 95;
+
+    --color-pink-25: 255 252 254;
+    --color-pink-50: 254 247 251;
+    --color-pink-75: 254 233 245;
+    --color-pink-100: 251 220 239;
+    --color-pink-200: 246 206 231;
+    --color-pink-300: 239 191 221;
+    --color-pink-400: 231 172 208;
+    --color-pink-500: 221 147 194;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 207 56 151;
+    --color-pink-800: 194 41 138;
+    --color-pink-900: 101 18 73;
+
+    --color-orange-25: 254 252 251;
+    --color-orange-50: 255 247 237;
+    --color-orange-75: 255 239 214;
+    --color-orange-100: 255 223 181;
+    --color-orange-200: 255 209 154;
+    --color-orange-300: 255 193 130;
+    --color-orange-400: 245 174 115;
+    --color-orange-500: 236 148 85;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 239 95 0;
+    --color-orange-800: 204 78 0;
+    --color-orange-900: 88 45 29;
+  }
+
+  // scss-lint:disable QualifyingElement
+  body.dark {
+    --color-amber-25: 31 19 0;
+    --color-amber-50: 37 24 4;
+    --color-amber-75: 48 32 11;
+    --color-amber-100: 57 39 15;
+    --color-amber-200: 67 46 18;
+    --color-amber-300: 83 57 22;
+    --color-amber-400: 111 77 29;
+    --color-amber-500: 169 118 42;
+    --color-amber-600: 169 118 42;
+    --color-amber-700: 255 203 71;
+    --color-amber-800: 255 204 77;
+    --color-amber-900: 255 231 179;
+
+    --color-ash-100: 46 48 53;
+    --color-ash-200: 53 55 60;
+    --color-ash-25: 24 24 26;
+    --color-ash-300: 60 63 68;
+    --color-ash-400: 70 75 80;
+    --color-ash-50: 27 27 31;
+    --color-ash-500: 90 97 101;
+    --color-ash-600: 105 110 119;
+    --color-ash-700: 120 127 133;
+    --color-ash-75: 39 40 45;
+    --color-ash-800: 173 177 184;
+    --color-ash-900: 237 238 240;
+
+    --color-primary-25: 10 17 28;
+    --color-primary-50: 15 24 38;
+    --color-primary-75: 15 39 72;
+    --color-primary-100: 10 49 99;
+    --color-primary-200: 18 61 117;
+    --color-primary-300: 29 74 134;
+    --color-primary-400: 40 89 156;
+    --color-primary-500: 48 106 186;
+    --color-primary-600: 39 129 246;
+    --color-primary-700: 21 116 231;
+    --color-primary-800: 126 182 255;
+    --color-primary-900: 205 227 255;
+
+    --color-ruby-100: 78 19 37;
+    --color-ruby-200: 94 26 46;
+    --color-ruby-25: 25 17 19;
+    --color-ruby-300: 111 37 57;
+    --color-ruby-400: 136 52 71;
+    --color-ruby-50: 30 21 23;
+    --color-ruby-500: 179 68 90;
+    --color-ruby-600: 229 70 102;
+    --color-ruby-700: 236 90 114;
+    --color-ruby-75: 58 20 30;
+    --color-ruby-800: 255 148 157;
+    --color-ruby-900: 254 210 225;
+
+    --color-teal-100: 2 59 55;
+    --color-teal-200: 8 72 67;
+    --color-teal-25: 13 21 20;
+    --color-teal-300: 28 105 97;
+    --color-teal-400: 28 105 97;
+    --color-teal-50: 17 28 27;
+    --color-teal-500: 32 126 115;
+    --color-teal-600: 41 163 131;
+    --color-teal-700: 14 179 158;
+    --color-teal-75: 13 45 42;
+    --color-teal-800: 11 216 182;
+    --color-teal-900: 173 240 221;
+
+    --color-green-25: 14 21 18;
+    --color-green-50: 18 27 23;
+    --color-green-75: 19 45 33;
+    --color-green-100: 17 59 41;
+    --color-green-200: 23 73 51;
+    --color-green-300: 32 87 62;
+    --color-green-400: 40 104 74;
+    --color-green-500: 47 124 87;
+    --color-green-600: 48 164 108;
+    --color-green-700: 51 176 116;
+    --color-green-800: 61 214 140;
+    --color-green-900: 177 241 203;
+
+    --color-mint-25: 14 21 21;
+    --color-mint-50: 15 27 27;
+    --color-mint-75: 9 44 43;
+    --color-mint-100: 0 58 56;
+    --color-mint-200: 0 71 68;
+    --color-mint-300: 16 86 80;
+    --color-mint-400: 30 104 95;
+    --color-mint-500: 39 127 112;
+    --color-mint-600: 134 234 212;
+    --color-mint-700: 168 245 229;
+    --color-mint-800: 88 213 186;
+    --color-mint-900: 196 245 225;
+
+    --color-sky-25: 14 21 21;
+    --color-sky-50: 15 27 27;
+    --color-sky-75: 9 44 43;
+    --color-sky-100: 0 58 56;
+    --color-sky-200: 0 71 68;
+    --color-sky-300: 16 86 80;
+    --color-sky-400: 30 104 95;
+    --color-sky-500: 39 127 112;
+    --color-sky-600: 134 234 212;
+    --color-sky-700: 168 245 229;
+    --color-sky-800: 88 213 186;
+    --color-sky-900: 196 245 225;
+
+    --color-indigo-25: 17 19 31;
+    --color-indigo-50: 20 23 38;
+    --color-indigo-75: 24 36 73;
+    --color-indigo-100: 29 46 98;
+    --color-indigo-200: 37 57 116;
+    --color-indigo-300: 48 67 132;
+    --color-indigo-400: 58 79 151;
+    --color-indigo-500: 67 93 177;
+    --color-indigo-600: 62 99 221;
+    --color-indigo-700: 84 114 228;
+    --color-indigo-800: 158 177 255;
+    --color-indigo-900: 214 225 255;
+
+    --color-iris-25: 19 19 30;
+    --color-iris-50: 23 22 37;
+    --color-iris-75: 32 34 72;
+    --color-iris-100: 38 42 101;
+    --color-iris-200: 48 51 116;
+    --color-iris-300: 61 62 130;
+    --color-iris-400: 74 74 149;
+    --color-iris-500: 89 88 177;
+    --color-iris-600: 91 91 214;
+    --color-iris-700: 110 106 222;
+    --color-iris-800: 177 169 255;
+    --color-iris-900: 224 223 254;
+
+    --color-violet-25: 20 18 31;
+    --color-violet-50: 27 21 37;
+    --color-violet-75: 41 31 67;
+    --color-violet-100: 51 37 91;
+    --color-violet-200: 60 46 105;
+    --color-violet-300: 71 56 118;
+    --color-violet-400: 86 70 139;
+    --color-violet-500: 105 88 173;
+    --color-violet-600: 110 86 207;
+    --color-violet-700: 125 102 217;
+    --color-violet-800: 186 167 255;
+    --color-violet-900: 226 221 254;
+
+    --color-pink-25: 25 17 23;
+    --color-pink-50: 33 18 29;
+    --color-pink-75: 55 23 47;
+    --color-pink-100: 75 20 61;
+    --color-pink-200: 89 28 71;
+    --color-pink-300: 105 41 85;
+    --color-pink-400: 131 56 105;
+    --color-pink-500: 168 72 133;
+    --color-pink-600: 214 64 159;
+    --color-pink-700: 222 81 168;
+    --color-pink-800: 255 141 204;
+    --color-pink-900: 253 209 234;
+    --color-orange-25: 23 18 14;
+    --color-orange-50: 30 22 15;
+    --color-orange-75: 51 30 11;
+    --color-orange-100: 70 33 0;
+    --color-orange-200: 86 40 0;
+    --color-orange-300: 102 53 12;
+    --color-orange-400: 126 69 29;
+    --color-orange-500: 163 88 41;
+    --color-orange-600: 247 107 21;
+    --color-orange-700: 255 128 31;
+    --color-orange-800: 255 160 87;
+    --color-orange-900: 255 224 194;
+  }
+}
+
@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
@@ -0,0 +1,7 @@
+.dropdown-pane {
+  @apply border rounded-lg hidden relative invisible shadow-lg border-n-strong dark:border-n-strong box-content p-2 w-fit z-[9999];
+
+  &.dropdown-pane--open {
+    @apply bg-n-alpha-3 backdrop-blur-[100px] absolute  block visible;
+  }
+}
@@ -17,10 +17,6 @@
    @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;

@@ -51,7 +47,7 @@
    @apply max-w-full;

    .multiselect__option {
-      @apply text-sm font-normal flex justify-between items-center;
+      @apply text-sm font-normal;

      span {
        @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
@@ -62,7 +58,7 @@
      }

      &::after {
-        @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight;
+        @apply bottom-0 flex items-center justify-center text-center;
      }

      &.multiselect__option--highlight {
@@ -78,7 +74,7 @@
      }

      &.multiselect__option--highlight::after {
-        @apply bg-transparent text-n-slate-12;
+        @apply bg-transparent;
      }

      &.multiselect__option--selected {
@@ -128,7 +124,8 @@
  }

  .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;
+    @include ghost-input;
+    @apply text-sm h-[2.875rem] mb-0 p-0;
  }

  .multiselect__single {
@@ -0,0 +1 @@
+// to be removed
@@ -0,0 +1 @@
+// to be removed
@@ -201,8 +201,3 @@ code {
    }
  }
 }
-
-// Table
-table {
-  @apply border-spacing-0 text-sm w-full;
-}
@@ -0,0 +1,261 @@
+// scss-lint:disable MergeableSelector
+
+@tailwind utilities;
+@layer utilities {
+  .custom-gradient {
+    background-image: linear-gradient(
+      -180deg,
+      transparent 3%,
+      rgb(76 81 85) 130%
+    );
+  }
+
+  .bubble-with-types {
+    @apply py-2 text-sm font-normal bg-woot-500 dark:bg-woot-500 relative px-4 m-0 text-white dark:text-white;
+
+    .message-text__wrap {
+      @apply relative;
+
+      .link {
+        @apply text-white dark:text-white underline;
+      }
+    }
+
+    .image,
+    .video {
+      @apply cursor-pointer relative;
+
+      .modal-container {
+        @apply text-center;
+      }
+
+      .modal-image {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      .modal-video {
+        @apply max-h-[76vh] max-w-[76vw];
+      }
+
+      &::before {
+        @apply custom-gradient bottom-0 h-[20%] content-[''] left-0 absolute w-full opacity-80;
+      }
+    }
+  }
+}
+
+.conversation-panel {
+  @apply flex-shrink flex-grow basis-px flex flex-col overflow-y-auto relative h-full m-0 pb-4;
+}
+
+.conversation-panel > li {
+  @apply flex flex-shrink-0 flex-grow-0 flex-auto max-w-full mt-0 mr-0 mb-1 ml-0 relative first:mt-auto last:mb-0;
+
+  &.unread--toast {
+    + .right {
+      @apply mb-1;
+    }
+
+    + .left {
+      @apply mb-0;
+    }
+
+    span {
+      @apply shadow-lg rounded-full bg-woot-500 dark:bg-woot-500 text-white dark:text-white text-xs font-medium my-2.5 mx-auto px-2.5 py-1.5;
+    }
+  }
+
+  .bubble {
+    @apply bubble-with-types text-left break-words;
+
+    .aplayer {
+      @apply shadow-none;
+      font-family: inherit;
+    }
+  }
+
+  &.left {
+    .bubble {
+      @apply rounded-r-lg rounded-l mr-auto break-words;
+
+      &:not(.is-unsupported) {
+        @apply border border-slate-50 dark:border-slate-700 bg-white dark:bg-slate-700 text-black-900 dark:text-slate-50;
+      }
+
+      &.is-image {
+        @apply rounded-lg;
+      }
+
+      .link {
+        @apply text-woot-600 dark:text-woot-600;
+      }
+
+      .file {
+        .attachment-name {
+          @apply text-slate-700 dark:text-woot-300;
+        }
+
+        .icon-wrap {
+          @apply text-woot-600 dark:text-woot-600;
+        }
+
+        .download {
+          @apply text-woot-600 dark:text-woot-600;
+        }
+      }
+    }
+
+    + .right {
+      @apply mt-2.5;
+
+      .bubble {
+        @apply rounded-tr-lg;
+      }
+    }
+
+    + .unread--toast {
+      + .right {
+        @apply mt-2.5;
+
+        .bubble {
+          @apply rounded-tr-lg;
+        }
+      }
+
+      + .left {
+        @apply mt-0;
+      }
+    }
+  }
+
+  &.right {
+    @apply justify-end;
+
+    .wrap {
+      @apply flex items-end mr-4 text-right;
+
+      .sender--info {
+        @apply pt-2 pb-1 pr-0 pl-2;
+      }
+    }
+
+    .bubble {
+      @apply ml-auto break-words rounded-l-lg rounded-r;
+
+      &.is-private {
+        @apply text-black-900 dark:text-white relative border border-solid bg-yellow-100 dark:bg-yellow-700 border-yellow-200 dark:border-yellow-600/25;
+
+        blockquote {
+          @apply border-slate-400 dark:border-slate-400 text-slate-800 dark:text-slate-300;
+
+          p {
+            @apply text-slate-600 dark:text-slate-300;
+          }
+        }
+      }
+
+      &.is-image {
+        @apply rounded-lg;
+
+        .message__mail-head {
+          @apply px-4 py-2;
+        }
+      }
+    }
+
+    + .left {
+      @apply mt-2.5;
+
+      .bubble {
+        @apply rounded-tl-lg;
+      }
+    }
+
+    + .unread--toast {
+      + .left {
+        @apply rounded-lg;
+
+        .bubble {
+          @apply rounded-tl-lg;
+        }
+      }
+
+      + .right {
+        @apply mt-0;
+      }
+    }
+  }
+
+  &.center {
+    @apply items-center justify-center;
+  }
+
+  .wrap {
+    max-width: Min(31rem, 84%);
+    @apply my-0 mx-4;
+
+    .sender--name {
+      @apply text-xs mb-1;
+    }
+  }
+
+  .sender--thumbnail {
+    @apply h-3 mr-3 mt-0.5 w-3 rounded-full;
+  }
+
+  .activity-wrap {
+    @apply flex justify-center text-sm my-1 mx-0 py-1 pr-0.5 pl-2.5 bg-slate-50 dark:bg-slate-600 text-slate-800 dark:text-slate-100 rounded-md border border-slate-100 dark:border-slate-600 border-solid;
+
+    .is-text {
+      @apply inline-flex items-center text-start 2xl:flex;
+    }
+  }
+}
+
+.activity-wrap .message-text__wrap {
+  .text-content p {
+    @apply mb-0;
+  }
+}
+
+.conversation-footer {
+  @apply flex relative flex-col;
+}
+
+.left .bubble .text-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-slate-800 dark:text-slate-100;
+  }
+
+  a {
+    @apply text-woot-500 dark:text-woot-500 underline;
+  }
+
+  p:last-child {
+    @apply mb-0;
+  }
+}
+
+.right .bubble .text-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-white dark:text-white;
+  }
+
+  a {
+    @apply text-white dark:text-white underline;
+  }
+
+  p:last-child {
+    @apply mb-0;
+  }
+}
@@ -0,0 +1,77 @@
+.tabs--container {
+  @apply flex;
+}
+
+.tabs--container--with-border {
+  @apply border-b border-b-n-weak;
+}
+
+.tabs--container--compact.tab--chat-type {
+  .tabs-title {
+    a {
+      @apply py-2 text-sm;
+    }
+  }
+}
+
+.tabs {
+  @apply border-r-0 border-l-0 border-t-0 flex min-w-[6.25rem] py-0 px-4 list-none mb-0;
+}
+
+.tabs--with-scroll {
+  @apply overflow-hidden py-0 px-1;
+  max-width: calc(100% - 64px);
+}
+
+.tabs--scroll-button {
+  @apply items-center rounded-none cursor-pointer flex h-auto justify-center min-w-[2rem];
+}
+
+// Tab chat type
+.tab--chat-type {
+  @apply flex;
+
+  .tabs-title {
+    a {
+      @apply text-base font-medium py-3;
+    }
+  }
+}
+
+.tabs-title {
+  @apply flex-shrink-0 my-0 mx-2;
+
+  .badge {
+    @apply bg-n-alpha-black2 dark:bg-n-solid-3 rounded-md text-n-slate-11 h-5 flex items-center justify-center text-xxs font-semibold my-0 mx-1 px-1 py-0;
+  }
+
+  &:first-child {
+    @apply ml-0;
+  }
+
+  &:last-child {
+    @apply mr-0;
+  }
+
+  &:hover,
+  &:focus {
+    a {
+      @apply text-n-slate-12;
+    }
+  }
+
+  a {
+    @apply flex items-center flex-row border-b py-2.5 select-none cursor-pointer border-transparent text-n-slate-11 text-sm top-[1px] relative;
+    transition: border-color 0.15s $swift-ease-out-function;
+  }
+
+  &.is-active {
+    a {
+      @apply border-b border-n-brand text-n-blue-text;
+    }
+
+    .badge {
+      @apply bg-n-brand/10 dark:bg-n-brand/20 text-n-blue-text;
+    }
+  }
+}
@@ -0,0 +1,90 @@
+table {
+  @apply border-spacing-0 text-sm w-full;
+
+
+}
+
+.woot-table {
+  thead {
+    th {
+      @apply font-semibold tracking-[1px] text-left px-2.5 uppercase text-slate-900 dark:text-slate-200;
+    }
+  }
+
+  tbody {
+    tr {
+      @apply border-b border-slate-50 dark:border-slate-800/30;
+    }
+
+    td {
+      @apply p-2.5 text-slate-700 dark:text-slate-100;
+    }
+  }
+
+  tr {
+    .show-if-hover {
+      transition: opacity 0.2s $swift-ease-out-function;
+      @apply opacity-0;
+    }
+
+    &:hover {
+      .show-if-hover {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  .agent-name {
+    @apply block font-medium capitalize;
+  }
+
+  .woot-thumbnail {
+    @apply rounded-full h-[3.125rem] w-[3.125rem];
+  }
+
+  .button-wrapper {
+    @apply flex justify-start flex-row min-w-[12.5rem] gap-1;
+  }
+
+  .button {
+    margin: 0;
+  }
+}
+
+.ve-table {
+  .ve-table-container.ve-table-border-around {
+    @apply border-slate-200 dark:border-slate-700;
+  }
+
+  .ve-table-content {
+    .ve-table-header .ve-table-header-tr .ve-table-header-th {
+      @apply bg-slate-50 dark:bg-slate-800 text-slate-800 dark:text-slate-100 border-slate-100 dark:border-slate-700/50;
+    }
+
+    .ve-table-body .ve-table-body-tr .ve-table-body-td {
+      @apply bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 border-slate-75 dark:border-slate-800;
+    }
+
+    .ve-table-body.ve-table-row-hover .ve-table-body-tr:hover td {
+      @apply bg-slate-50 dark:bg-slate-700 text-slate-800 dark:text-slate-100;
+    }
+  }
+}
+
+.table-pagination {
+  .ve-pagination-total {
+    @apply text-slate-600 dark:text-slate-200;
+  }
+
+  .ve-pagination-goto {
+    @apply text-slate-600 dark:text-slate-200;
+
+    .ve-pagination-goto-input {
+      @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200;
+    }
+  }
+
+  .ve-pagination-li {
+    @apply bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-200 border-slate-75 dark:border-slate-700;
+  }
+}
@@ -76,8 +76,8 @@ const campaignStatus = computed(() => {
 const inboxName = computed(() => props.inbox?.name || '');

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

@@ -1,37 +0,0 @@
-<script setup>
-import { ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT } from './CampaignEmptyStateContent';
-
-import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
-import CampaignCard from 'dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue';
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  subtitle: {
-    type: String,
-    default: '',
-  },
-});
-</script>
-
-<template>
-  <EmptyStateLayout :title="title" :subtitle="subtitle">
-    <template #empty-state-item>
-      <div class="flex flex-col gap-4 p-px">
-        <CampaignCard
-          v-for="campaign in ONE_OFF_CAMPAIGN_EMPTY_STATE_CONTENT"
-          :key="campaign.id"
-          :title="campaign.title"
-          :message="campaign.message"
-          :is-enabled="campaign.enabled"
-          :status="campaign.campaign_status"
-          :sender="campaign.sender"
-          :inbox="campaign.inbox"
-          :scheduled-at="campaign.scheduled_at"
-        />
-      </div>
-    </template>
-  </EmptyStateLayout>
-</template>
@@ -40,9 +40,9 @@ const handleSubmit = campaignDetails => {

 <template>
  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
  >
-    <h3 class="text-base font-medium text-n-slate-12">
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.LIVE_CHAT.CREATE.TITLE`) }}
    </h3>
    <LiveChatCampaignForm
@@ -306,7 +306,7 @@ defineExpose({ prepareCampaignDetails, isSubmitDisabled });
        variant="faded"
        color="slate"
        :label="t('CAMPAIGN.LIVE_CHAT.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -39,9 +39,9 @@ const handleClose = () => emit('close');

 <template>
  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-n-weak shadow-md flex flex-col gap-6"
+    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] p-6 rounded-xl border border-slate-50 dark:border-slate-900 shadow-md flex flex-col gap-6"
  >
-    <h3 class="text-base font-medium text-n-slate-12">
+    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
      {{ t(`CAMPAIGN.SMS.CREATE.TITLE`) }}
    </h3>
    <SMSCampaignForm @submit="handleSubmit" @cancel="handleClose" />
@@ -174,7 +174,7 @@ const handleSubmit = async () => {
        color="slate"
        type="button"
        :label="t('CAMPAIGN.SMS.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
        @click="handleCancel"
      />
      <Button
@@ -1,50 +0,0 @@
-<script setup>
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'dashboard/composables/store';
-import { useAlert, useTrack } from 'dashboard/composables';
-import { CAMPAIGN_TYPES } from 'shared/constants/campaign.js';
-import { CAMPAIGNS_EVENTS } from 'dashboard/helper/AnalyticsHelper/events.js';
-
-import WhatsAppCampaignForm from 'dashboard/components-next/Campaigns/Pages/CampaignPage/WhatsAppCampaign/WhatsAppCampaignForm.vue';
-
-const emit = defineEmits(['close']);
-
-const store = useStore();
-const { t } = useI18n();
-
-const addCampaign = async campaignDetails => {
-  try {
-    await store.dispatch('campaigns/create', campaignDetails);
-
-    useTrack(CAMPAIGNS_EVENTS.CREATE_CAMPAIGN, {
-      type: CAMPAIGN_TYPES.ONE_OFF,
-    });
-
-    useAlert(t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.SUCCESS_MESSAGE'));
-  } catch (error) {
-    const errorMessage =
-      error?.response?.message ||
-      t('CAMPAIGN.WHATSAPP.CREATE.FORM.API.ERROR_MESSAGE');
-    useAlert(errorMessage);
-  }
-};
-
-const handleSubmit = campaignDetails => {
-  addCampaign(campaignDetails);
-};
-
-const handleClose = () => emit('close');
-</script>
-
-<template>
-  <div
-    class="w-[25rem] z-50 min-w-0 absolute top-10 ltr:right-0 rtl:left-0 bg-n-alpha-3 backdrop-blur-[100px] rounded-xl border border-n-weak shadow-md max-h-[80vh] overflow-y-auto"
-  >
-    <div class="p-6 flex flex-col gap-6">
-      <h3 class="text-base font-medium text-n-slate-12 flex-shrink-0">
-        {{ t(`CAMPAIGN.WHATSAPP.CREATE.TITLE`) }}
-      </h3>
-      <WhatsAppCampaignForm @submit="handleSubmit" @cancel="handleClose" />
-    </div>
-  </div>
-</template>
@@ -1,266 +0,0 @@
-<script setup>
-import { reactive, computed, watch, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useVuelidate } from '@vuelidate/core';
-import { required, minLength } from '@vuelidate/validators';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Input from 'dashboard/components-next/input/Input.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
-import TagMultiSelectComboBox from 'dashboard/components-next/combobox/TagMultiSelectComboBox.vue';
-import WhatsAppTemplateParser from 'dashboard/components-next/whatsapp/WhatsAppTemplateParser.vue';
-
-const emit = defineEmits(['submit', 'cancel']);
-
-const { t } = useI18n();
-
-const formState = {
-  uiFlags: useMapGetter('campaigns/getUIFlags'),
-  labels: useMapGetter('labels/getLabels'),
-  inboxes: useMapGetter('inboxes/getWhatsAppInboxes'),
-  getFilteredWhatsAppTemplates: useMapGetter(
-    'inboxes/getFilteredWhatsAppTemplates'
-  ),
-};
-
-const initialState = {
-  title: '',
-  inboxId: null,
-  templateId: null,
-  scheduledAt: null,
-  selectedAudience: [],
-};
-
-const state = reactive({ ...initialState });
-const templateParserRef = ref(null);
-
-const rules = {
-  title: { required, minLength: minLength(1) },
-  inboxId: { required },
-  templateId: { required },
-  scheduledAt: { required },
-  selectedAudience: { required },
-};
-
-const v$ = useVuelidate(rules, state);
-
-const isCreating = computed(() => formState.uiFlags.value.isCreating);
-
-const currentDateTime = computed(() => {
-  // Added to disable the scheduled at field from being set to the current time
-  const now = new Date();
-  const localTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
-  return localTime.toISOString().slice(0, 16);
-});
-
-const mapToOptions = (items, valueKey, labelKey) =>
-  items?.map(item => ({
-    value: item[valueKey],
-    label: item[labelKey],
-  })) ?? [];
-
-const audienceList = computed(() =>
-  mapToOptions(formState.labels.value, 'id', 'title')
-);
-
-const inboxOptions = computed(() =>
-  mapToOptions(formState.inboxes.value, 'id', 'name')
-);
-
-const templateOptions = computed(() => {
-  if (!state.inboxId) return [];
-  const templates = formState.getFilteredWhatsAppTemplates.value(state.inboxId);
-  return templates.map(template => {
-    // Create a more user-friendly label from template name
-    const friendlyName = template.name
-      .replace(/_/g, ' ')
-      .replace(/\b\w/g, l => l.toUpperCase());
-
-    return {
-      value: template.id,
-      label: `${friendlyName} (${template.language || 'en'})`,
-      template: template,
-    };
-  });
-});
-
-const selectedTemplate = computed(() => {
-  if (!state.templateId) return null;
-  return templateOptions.value.find(option => option.value === state.templateId)
-    ?.template;
-});
-
-const getErrorMessage = (field, errorKey) => {
-  const baseKey = 'CAMPAIGN.WHATSAPP.CREATE.FORM';
-  return v$.value[field].$error ? t(`${baseKey}.${errorKey}.ERROR`) : '';
-};
-
-const formErrors = computed(() => ({
-  title: getErrorMessage('title', 'TITLE'),
-  inbox: getErrorMessage('inboxId', 'INBOX'),
-  template: getErrorMessage('templateId', 'TEMPLATE'),
-  scheduledAt: getErrorMessage('scheduledAt', 'SCHEDULED_AT'),
-  audience: getErrorMessage('selectedAudience', 'AUDIENCE'),
-}));
-
-const hasRequiredTemplateParams = computed(() => {
-  return templateParserRef.value?.v$?.$invalid === false || true;
-});
-
-const isSubmitDisabled = computed(
-  () => v$.value.$invalid || !hasRequiredTemplateParams.value
-);
-
-const formatToUTCString = localDateTime =>
-  localDateTime ? new Date(localDateTime).toISOString() : null;
-
-const resetState = () => {
-  Object.assign(state, initialState);
-  v$.value.$reset();
-};
-
-const handleCancel = () => emit('cancel');
-
-const prepareCampaignDetails = () => {
-  // Find the selected template to get its content
-  const currentTemplate = selectedTemplate.value;
-  const parserData = templateParserRef.value;
-
-  // Extract template content - this should be the template message body
-  const templateContent = parserData?.renderedTemplate || '';
-
-  // Prepare template_params object with the same structure as used in contacts
-  const templateParams = {
-    name: currentTemplate?.name || '',
-    namespace: currentTemplate?.namespace || '',
-    category: currentTemplate?.category || 'UTILITY',
-    language: currentTemplate?.language || 'en_US',
-    processed_params: parserData?.processedParams || {},
-  };
-
-  return {
-    title: state.title,
-    message: templateContent,
-    template_params: templateParams,
-    inbox_id: state.inboxId,
-    scheduled_at: formatToUTCString(state.scheduledAt),
-    audience: state.selectedAudience?.map(id => ({
-      id,
-      type: 'Label',
-    })),
-  };
-};
-
-const handleSubmit = async () => {
-  const isFormValid = await v$.value.$validate();
-  if (!isFormValid) return;
-
-  emit('submit', prepareCampaignDetails());
-  resetState();
-  handleCancel();
-};
-
-// Reset template selection when inbox changes
-watch(
-  () => state.inboxId,
-  () => {
-    state.templateId = null;
-  }
-);
-</script>
-
-<template>
-  <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.title"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.LABEL')"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TITLE.PLACEHOLDER')"
-      :message="formErrors.title"
-      :message-type="formErrors.title ? 'error' : 'info'"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="inbox" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.LABEL') }}
-      </label>
-      <ComboBox
-        id="inbox"
-        v-model="state.inboxId"
-        :options="inboxOptions"
-        :has-error="!!formErrors.inbox"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.INBOX.PLACEHOLDER')"
-        :message="formErrors.inbox"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-    </div>
-
-    <div class="flex flex-col gap-1">
-      <label for="template" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.LABEL') }}
-      </label>
-      <ComboBox
-        id="template"
-        v-model="state.templateId"
-        :options="templateOptions"
-        :has-error="!!formErrors.template"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.PLACEHOLDER')"
-        :message="formErrors.template"
-        class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
-      />
-      <p class="mt-1 text-xs text-n-slate-11">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.TEMPLATE.INFO') }}
-      </p>
-    </div>
-
-    <!-- Template Parser -->
-    <WhatsAppTemplateParser
-      v-if="selectedTemplate"
-      ref="templateParserRef"
-      :template="selectedTemplate"
-    />
-
-    <div class="flex flex-col gap-1">
-      <label for="audience" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL') }}
-      </label>
-      <TagMultiSelectComboBox
-        v-model="state.selectedAudience"
-        :options="audienceList"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.LABEL')"
-        :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.AUDIENCE.PLACEHOLDER')"
-        :has-error="!!formErrors.audience"
-        :message="formErrors.audience"
-        class="[&>div>button]:bg-n-alpha-black2"
-      />
-    </div>
-
-    <Input
-      v-model="state.scheduledAt"
-      :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.LABEL')"
-      type="datetime-local"
-      :min="currentDateTime"
-      :placeholder="t('CAMPAIGN.WHATSAPP.CREATE.FORM.SCHEDULED_AT.PLACEHOLDER')"
-      :message="formErrors.scheduledAt"
-      :message-type="formErrors.scheduledAt ? 'error' : 'info'"
-    />
-
-    <div class="flex gap-3 justify-between items-center w-full">
-      <Button
-        variant="faded"
-        color="slate"
-        type="button"
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
-        @click="handleCancel"
-      />
-      <Button
-        :label="t('CAMPAIGN.WHATSAPP.CREATE.FORM.BUTTONS.CREATE')"
-        class="w-full"
-        type="submit"
-        :is-loading="isCreating"
-        :disabled="isCreating || isSubmitDisabled"
-      />
-    </div>
-  </form>
-</template>
@@ -98,7 +98,6 @@ const onClickViewDetails = () => emit('showContact', props.id);
        :src="thumbnail"
        :size="48"
        :status="availabilityStatus"
-        hide-offline-status
        rounded-full
      />
      <div class="flex flex-col gap-0.5 flex-1">
@@ -218,13 +218,10 @@ const resetForm = () => {
  Object.assign(state, defaultState);
 };

-watch(
-  () => props.contactData?.id,
-  id => {
-    if (id) prepareStateBasedOnProps();
-  },
-  { immediate: true }
-);
+watch(() => props.contactData, prepareStateBasedOnProps, {
+  immediate: true,
+  deep: true,
+});

 // Expose state to parent component for avatar upload
 defineExpose({
@@ -130,7 +130,7 @@ const onMergeContacts = async () => {
        variant="faded"
        color="slate"
        :label="t('CONTACTS_LAYOUT.SIDEBAR.MERGE.BUTTONS.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
        @click="resetState"
      />
      <Button
@@ -48,8 +48,8 @@ const inbox = computed(() => props.stateInbox);
 const inboxName = computed(() => inbox.value?.name);

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

 const lastActivityAt = computed(() => {
@@ -20,7 +20,6 @@ const props = defineProps({
  enableVariables: { type: Boolean, default: false },
  enableCannedResponses: { type: Boolean, default: true },
  enabledMenuOptions: { type: Array, default: () => [] },
-  enableCaptainTools: { type: Boolean, default: false },
 });

 const emit = defineEmits(['update:modelValue']);
@@ -36,7 +35,7 @@ const messageClass = computed(() => {
    case 'error':
      return 'text-n-ruby-9 dark:text-n-ruby-9';
    case 'success':
-      return 'text-n-teal-10 dark:text-n-teal-10';
+      return 'text-green-500 dark:text-green-400';
    default:
      return 'text-n-slate-11 dark:text-n-slate-11';
  }
@@ -99,7 +98,6 @@ watch(
        :enable-variables="enableVariables"
        :enable-canned-responses="enableCannedResponses"
        :enabled-menu-options="enabledMenuOptions"
-        :enable-captain-tools="enableCaptainTools"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
@@ -35,12 +35,12 @@ defineProps({
        <div class="flex flex-col items-center justify-center gap-6">
          <div class="flex flex-col items-center justify-center gap-3">
            <h2
-              class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
+              class="text-3xl font-medium text-center text-slate-900 dark:text-white font-interDisplay"
            >
              {{ title }}
            </h2>
            <p
-              class="max-w-xl text-base text-center text-n-slate-11 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
            >
              {{ subtitle }}
            </p>
@@ -70,7 +70,7 @@ const category = {
      <div
        v-for="(article, index) in articles"
        :key="index"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
      >
        <ArticleCard
          :id="article.id"
@@ -32,7 +32,7 @@ const categories = [
      <div
        v-for="(category, index) in categories"
        :key="index"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
      >
        <CategoryCard
          :id="category.id"
--- a/Show More
+++ b/Show More
@@ -1 +1 @@
 .4.0
 .13.0
@@ -1 +1 @@
 .4.2
 .2.0