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.

.eslintrc.js

@@ -103,7 +103,6 @@ module.exports = {
           '⌘',
           '📄',
           '🎉',
-          '🚀',
           '💬',
           '👥',
           '📥',

.github/workflows/deploy_check.yml

@@ -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

.github/workflows/logging_percentage_check.yml

@@ -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

.github/workflows/size-limit.yml

@@ -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

Gemfile.lock

@@ -172,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)
@@ -435,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)
@@ -567,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)

app/assets/javascripts/secretField.js

@@ -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);
-    }
-  });
-});

app/assets/stylesheets/administrate/components/_cells.scss

@@ -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;
     }
   }
 }

app/builders/v2/reports/label_summary_builder.rb

@@ -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

app/controllers/api/v1/accounts/google/authorizations_controller.rb

@@ -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

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

@@ -81,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

app/controllers/api/v1/accounts/instagram/authorizations_controller.rb

@@ -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

app/controllers/api/v1/accounts/integrations/linear_controller.rb

@@ -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

app/controllers/api/v1/accounts/integrations/notion_controller.rb

@@ -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

app/controllers/api/v1/accounts/microsoft/authorizations_controller.rb

@@ -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

app/controllers/api/v1/accounts/notion/authorizations_controller.rb

@@ -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

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

@@ -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

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

@@ -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

app/controllers/concerns/google_concern.rb

@@ -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

app/controllers/concerns/microsoft_concern.rb

@@ -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

app/controllers/concerns/notion_concern.rb

@@ -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

app/controllers/dashboard_controller.rb

@@ -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

app/controllers/notion/callbacks_controller.rb

@@ -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

app/controllers/oauth_callback_controller.rb

@@ -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

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

@@ -7,11 +7,7 @@ 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

app/controllers/super_admin/app_configs_controller.rb

@@ -39,7 +39,6 @@ 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],
-      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
       'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
     }
 

app/controllers/twilio/callback_controller.rb

@@ -27,10 +27,7 @@ class Twilio::CallbackController < ApplicationController
       *Array.new(10) { |i| :"MediaUrl#{i}" },
       *Array.new(10) { |i| :"MediaContentType#{i}" },
       :MessagingServiceSid,
-      :NumMedia,
-      :Latitude,
-      :Longitude,
-      :MessageType
+      :NumMedia
     )
   end
 end

app/helpers/api/v2/accounts/reports_helper.rb

@@ -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
 

app/javascript/dashboard/App.vue

@@ -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';

app/javascript/dashboard/api/auth.js

@@ -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 },

app/javascript/dashboard/api/endPoints.js

@@ -51,7 +51,6 @@ const endPoints = {
   resendConfirmation: {
     url: '/api/v1/profile/resend_confirmation',
   },
-
   resetAccessToken: {
     url: '/api/v1/profile/reset_access_token',
   },

app/javascript/dashboard/api/integrations/linear.js

@@ -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,
     });
   }
 

app/javascript/dashboard/api/notion_auth.js

@@ -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();

app/javascript/dashboard/api/specs/integrations/linear.spec.js

@@ -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,
         }
       );
     });

app/javascript/dashboard/api/summaryReports.js

@@ -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();

app/javascript/dashboard/assets/scss/_animations.scss

@@ -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);
+}

app/javascript/dashboard/assets/scss/_date-picker.scss

@@ -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;
       }
     }
   }

app/javascript/dashboard/assets/scss/_formulate.scss

@@ -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;
+    }
+  }
+}

app/javascript/dashboard/assets/scss/_helper-classes.scss

@@ -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;
+    }
+  }
+}

app/javascript/dashboard/assets/scss/_layout.scss

@@ -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;
+    }
+  }
+}

app/javascript/dashboard/assets/scss/_mixins.scss

@@ -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;
+  }
+}

app/javascript/dashboard/assets/scss/_rtl.scss

@@ -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;
+  }
+}

app/javascript/dashboard/assets/scss/_variables.scss

@@ -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;
+}

app/javascript/dashboard/assets/scss/_woot.scss

@@ -1,4 +1,3 @@
-// scss-lint:disable SpaceAfterPropertyColon
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -9,66 +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%;
-}
-
-.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;
-    }
-  }
-}
+@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;
@@ -80,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 {

app/javascript/dashboard/assets/scss/plugins/_dropdown.scss

@@ -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;
+  }
+}

app/javascript/dashboard/assets/scss/plugins/_multiselect.scss

@@ -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 {

app/javascript/dashboard/assets/scss/views/settings/inbox.scss

@@ -0,0 +1 @@
+// to be removed

app/javascript/dashboard/assets/scss/views/settings/integrations.scss

@@ -0,0 +1 @@
+// to be removed

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

@@ -201,8 +201,3 @@ code {
     }
   }
 }
-
-// Table
-table {
-  @apply border-spacing-0 text-sm w-full;
-}

app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss

@@ -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;
+  }
+}

app/javascript/dashboard/assets/scss/widgets/_tabs.scss

@@ -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;
+    }
+  }
+}

app/javascript/dashboard/assets/scss/widgets/_woot-tables.scss

@@ -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;
+  }
+}

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignDialog.vue

@@ -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

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/LiveChatCampaign/LiveChatCampaignForm.vue

@@ -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

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignDialog.vue

@@ -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" />

app/javascript/dashboard/components-next/Campaigns/Pages/CampaignPage/SMSCampaign/SMSCampaignForm.vue

@@ -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

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue

@@ -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

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -35,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';
   }

app/javascript/dashboard/components-next/EmptyStateLayout.vue

@@ -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>

app/javascript/dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.story.vue

@@ -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"

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.story.vue

@@ -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"

app/javascript/dashboard/components-next/HelpCenter/CategoryCard/CategoryCard.vue

@@ -121,7 +121,11 @@ const handleAction = ({ action, value }) => {
     </div>
     <span
       class="text-sm line-clamp-3"
-      :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
+      :class="
+        hasDescription
+          ? 'text-slate-500 dark:text-slate-400'
+          : 'text-slate-400 dark:text-slate-700'
+      "
     >
       {{ description }}
     </span>

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.story.vue

@@ -8,7 +8,7 @@ import ArticleEmptyState from './ArticleEmptyState.vue';
     :layout="{ type: 'single', width: '1100px' }"
   >
     <Variant title="Article Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-n-background">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
         <ArticleEmptyState />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/EmptyState/Portal/PortalEmptyState.story.vue

@@ -8,7 +8,7 @@ import PortalEmptyState from './PortalEmptyState.vue';
     :layout="{ type: 'single', width: '1100px' }"
   >
     <Variant title="Portal Empty State">
-      <div class="w-full h-full px-20 mx-auto bg-n-background">
+      <div class="w-full h-full px-20 mx-auto bg-white dark:bg-slate-900">
         <PortalEmptyState />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.story.vue

@@ -14,7 +14,7 @@ const locales = [
     :layout="{ type: 'grid', width: '800px' }"
   >
     <Variant title="Locale Card">
-      <div class="px-10 py-4 bg-n-background">
+      <div class="px-10 py-4 bg-white dark:bg-slate-900">
         <div v-for="(locale, index) in locales" :key="index" class="px-20 py-2">
           <LocaleCard
             :locale="locale.name"

app/javascript/dashboard/components-next/HelpCenter/LocaleCard/LocaleCard.vue

@@ -55,7 +55,9 @@ const handleAction = ({ action, value }) => {
   <CardLayout>
     <div class="flex justify-between gap-2">
       <div class="flex items-center justify-start gap-2">
-        <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
+        <span
+          class="text-sm font-medium text-slate-900 dark:text-slate-50 line-clamp-1"
+        >
           {{ locale }} ({{ localeCode }})
         </span>
         <span
@@ -67,7 +69,9 @@ const handleAction = ({ action, value }) => {
       </div>
       <div class="flex items-center justify-end gap-4">
         <div class="flex items-center gap-4">
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <span
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
+          >
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -75,8 +79,10 @@ const handleAction = ({ action, value }) => {
               )
             }}
           </span>
-          <div class="w-px h-3 bg-n-weak" />
-          <span class="text-sm text-n-slate-11 whitespace-nowrap">
+          <div class="w-px h-3 bg-slate-75 dark:bg-slate-800" />
+          <span
+            class="text-sm text-slate-500 dark:text-slate-400 whitespace-nowrap"
+          >
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.CATEGORIES_COUNT',

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

@@ -146,7 +146,7 @@ const previewArticle = () => {
 <style lang="scss" scoped>
 ::v-deep {
   .ProseMirror .empty-node::before {
-    @apply text-n-slate-10 text-base;
+    @apply text-slate-200 dark:text-slate-500 text-base;
   }
 
   .ProseMirror-menubar-wrapper {
@@ -161,7 +161,7 @@ const previewArticle = () => {
 
   .editor-root .has-selection {
     .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+      @apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -180,10 +180,6 @@ const previewArticle = () => {
           }
         }
       }
-
-      .ProseMirror-menu-active {
-        @apply bg-n-slate-3;
-      }
     }
   }
 }

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

@@ -206,7 +206,7 @@ onMounted(() => {
         />
       </OnClickOutside>
     </div>
-    <div class="w-px h-3 bg-n-weak" />
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
@@ -239,7 +239,7 @@ onMounted(() => {
       </OnClickOutside>
     </div>
 
-    <div class="w-px h-3 bg-n-weak" />
+    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
     <div class="relative">
       <OnClickOutside @trigger="openProperties = false">
         <Button

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

@@ -128,7 +128,7 @@ const updateArticleStatus = async ({ value }) => {
     <div class="flex items-center gap-4">
       <span
         v-if="isUpdating || isSaved"
-        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
+        class="text-xs font-medium transition-all duration-300 text-slate-500 dark:text-slate-400"
       >
         {{ statusText }}
       </span>

app/javascript/dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticlesPage.story.vue

@@ -64,7 +64,7 @@ const articles = [
 <template>
   <Story title="Pages/HelpCenter/ArticlesPage" :layout="{ type: 'single' }">
     <Variant title="All Articles">
-      <div class="w-full min-h-screen bg-n-background">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
         <ArticlesPage :articles="articles" />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoriesPage.story.vue

@@ -201,7 +201,7 @@ const categories = [
 <template>
   <Story title="Pages/HelpCenter/CategoryPage" :layout="{ type: 'single' }">
     <Variant title="All Categories">
-      <div class="w-full min-h-screen bg-n-background">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
         <CategoriesPage :categories="categories" />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue

@@ -90,9 +90,9 @@ const handleCategory = async formData => {
 
 <template>
   <div
-    class="w-[25rem] 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] 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(
           `HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.HEADER.${mode.toUpperCase()}`

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -246,7 +246,7 @@ defineExpose({ state, isSubmitDisabled });
           variant="faded"
           color="slate"
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_DIALOG.BUTTONS.CANCEL')"
-          class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
           @click="handleCancel"
         />
         <Button

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue

@@ -147,8 +147,10 @@ const handleBreadcrumbClick = () => {
           />
         </OnClickOutside>
       </div>
-      <div class="w-px h-3.5 rounded my-auto bg-n-weak" />
-      <span class="min-w-0 text-sm font-medium truncate text-n-slate-12">
+      <div class="w-px h-3.5 rounded my-auto bg-slate-75 dark:bg-slate-800" />
+      <span
+        class="min-w-0 text-sm font-medium truncate text-slate-800 dark:text-slate-100"
+      >
         {{
           t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.CATEGORIES_COUNT', {
             n: categoriesCount,

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.story.vue

@@ -44,7 +44,7 @@ const locales = [
 <template>
   <Story title="Pages/HelpCenter/LocalePage" :layout="{ type: 'single' }">
     <Variant title="All Locales">
-      <div class="w-full min-h-screen bg-n-background">
+      <div class="w-full min-h-screen bg-white dark:bg-slate-900">
         <LocalesPage :locales="locales" />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/Pages/LocalePage/LocalesPage.vue

@@ -35,7 +35,7 @@ const localeCount = computed(() => props.locales?.length);
     <template #header-actions>
       <div class="flex items-center justify-between">
         <div class="flex items-center gap-4">
-          <span class="text-sm font-medium text-n-slate-12">
+          <span class="text-sm font-medium text-slate-800 dark:text-slate-100">
             {{ $t('HELP_CENTER.LOCALES_PAGE.LOCALES_COUNT', localeCount) }}
           </span>
         </div>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalBaseSettings.vue

@@ -211,7 +211,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.NAME.LABEL') }}
         </label>
@@ -229,7 +229,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HEADER_TEXT.LABEL') }}
         </label>
@@ -245,7 +245,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.PAGE_TITLE.LABEL') }}
         </label>
@@ -261,7 +261,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
+          class="text-sm font-medium whitespace-nowrap text-slate-900 py-2.5 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.HOME_PAGE_LINK.LABEL') }}
         </label>
@@ -281,7 +281,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.SLUG.LABEL') }}
         </label>
@@ -299,7 +299,7 @@ const handleAvatarDelete = () => {
         class="grid items-start justify-between w-full gap-2 grid-cols-[200px,1fr]"
       >
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.LIVE_CHAT_WIDGET.LABEL') }}
         </label>
@@ -317,7 +317,7 @@ const handleAvatarDelete = () => {
       </div>
       <div class="flex items-start justify-between w-full gap-2">
         <label
-          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-slate-900 dark:text-slate-50"
         >
           {{ t('HELP_CENTER.PORTAL_SETTINGS.FORM.BRAND_COLOR.LABEL') }}
         </label>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.story.vue

@@ -5,7 +5,7 @@ import PortalSettings from './PortalSettings.vue';
 <template>
   <Story title="Pages/HelpCenter/PortalSettings" :layout="{ type: 'single' }">
     <Variant title="Default">
-      <div class="w-[1000px] min-h-screen bg-n-background">
+      <div class="w-[1000px] min-h-screen bg-white dark:bg-slate-900">
         <PortalSettings />
       </div>
     </Variant>

app/javascript/dashboard/components-next/HelpCenter/Pages/PortalSettingsPage/PortalSettings.vue

@@ -81,13 +81,13 @@ const handleDeletePortal = () => {
           :is-fetching="isFetching"
           @update-portal="handleUpdatePortal"
         />
-        <div class="w-full h-px bg-n-weak" />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
           @update-portal-configuration="handleUpdatePortalConfiguration"
         />
-        <div class="w-full h-px bg-n-weak" />
+        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
         <div class="flex items-end justify-between w-full gap-4">
           <div class="flex flex-col gap-2">
             <h6 class="text-base font-medium text-n-slate-12">

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.story.vue

@@ -32,7 +32,7 @@ const portals = [
     :layout="{ type: 'grid', width: '510px' }"
   >
     <Variant title="Portal Switcher">
-      <div class="h-[500px] p-4 bg-n-slate-2 dark:bg-n-background">
+      <div class="h-[500px] p-4 bg-slate-100 dark:bg-slate-900">
         <PortalSwitcher
           :portals="portals"
           header="Choose a Portal"

app/javascript/dashboard/components-next/HelpCenter/PortalSwitcher/PortalSwitcher.vue

@@ -100,7 +100,7 @@ const redirectToPortalHomePage = () => {
       <div class="flex flex-col gap-1">
         <div class="flex items-center gap-2">
           <h2
-            class="text-base font-medium cursor-pointer text-n-slate-12 w-fit hover:underline"
+            class="text-base font-medium cursor-pointer text-slate-900 dark:text-slate-50 w-fit hover:underline"
             @click="redirectToPortalHomePage"
           >
             {{ t('HELP_CENTER.PORTAL_SWITCHER.PORTALS') }}
@@ -115,7 +115,7 @@ const redirectToPortalHomePage = () => {
             @click="onClickPreviewPortal"
           />
         </div>
-        <p class="text-sm text-n-slate-11">
+        <p class="text-sm text-slate-600 dark:text-slate-300">
           {{ t('HELP_CENTER.PORTAL_SWITCHER.CREATE_PORTAL') }}
         </p>
       </div>

app/javascript/dashboard/components-next/avatar/Avatar.story.vue

@@ -5,7 +5,7 @@ import Avatar from './Avatar.vue';
 <template>
   <Story title="Components/Avatar" :layout="{ type: 'grid', width: '400' }">
     <Variant title="Default">
-      <div class="flex p-4 space-x-4 bg-n-background">
+      <div class="flex p-4 space-x-4 bg-white dark:bg-slate-900">
         <Avatar
           name=""
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
@@ -16,7 +16,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Different Shapes">
-      <div class="gap-4 p-4 bg-n-background">
+      <div class="gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Amaya"
           name=""
@@ -34,7 +34,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Different Sizes">
-      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
           :size="48"
@@ -57,7 +57,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="With Status">
-      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar
           src="https://api.dicebear.com/9.x/thumbs/svg?seed=Felix"
           status="online"
@@ -77,7 +77,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="With Custom Icon">
-      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar name="Custom Icon" icon-name="i-lucide-user" :size="48" />
         <Avatar
           name="Custom Industry"
@@ -88,7 +88,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Upload States">
-      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <!-- Empty state with upload -->
         <Avatar name="Upload New" allow-upload :size="48" />
 
@@ -103,7 +103,7 @@ import Avatar from './Avatar.vue';
     </Variant>
 
     <Variant title="Name Initials">
-      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-slate-900">
         <Avatar name="Catherine" :size="48" />
         <Avatar name="John Doe" :size="48" />
         <Avatar name="Rose Doe John" :size="48" />

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.story.vue

@@ -29,32 +29,32 @@ const longBreadcrumb = ref([
     :layout="{ type: 'grid', width: '800px' }"
   >
     <Variant title="Single Item">
-      <div class="w-full p-4 bg-n-background">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
         <Breadcrumb :items="singleItem" />
       </div>
     </Variant>
 
     <Variant title="Two Items">
-      <div class="w-full p-4 bg-n-background">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
         <Breadcrumb :items="twoItems" />
       </div>
     </Variant>
 
     <Variant title="Three Items with Count">
-      <div class="w-full p-4 bg-n-background">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
         <Breadcrumb :items="threeItems" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="Long Breadcrumb">
-      <div class="w-full p-4 bg-n-background">
+      <div class="w-full p-4 bg-white dark:bg-slate-900">
         <Breadcrumb :items="longBreadcrumb" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="RTL Support">
       <div dir="rtl">
-        <div class="w-full p-4 bg-n-background">
+        <div class="w-full p-4 bg-white dark:bg-slate-900">
           <Breadcrumb :items="threeItems" count-label="articles" />
         </div>
       </div>

app/javascript/dashboard/components-next/breadcrumb/Breadcrumb.vue

@@ -36,7 +36,9 @@ const onClick = event => {
             icon="i-lucide-chevron-right"
             class="flex-shrink-0 mx-2 size-4 text-n-slate-11 dark:text-n-slate-11"
           />
-          <span class="text-sm truncate text-n-slate-12 max-w-56">
+          <span
+            class="text-sm truncate text-slate-900 dark:text-slate-50 max-w-56"
+          >
             {{ item.emoji ? item.emoji : '' }} {{ item.label }}
           </span>
         </template>

app/javascript/dashboard/components-next/button/Button.story.vue

@@ -11,7 +11,7 @@ const SIZES = ['default', 'sm', 'lg'];
   <Story title="Components/Button" :layout="{ type: 'grid', width: '800px' }">
     <!-- Basic Variants -->
     <Variant title="Basic Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button
           v-for="variant in VARIANTS"
           :key="variant"
@@ -23,7 +23,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Colors -->
     <Variant title="Color Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button
           v-for="color in COLORS"
           :key="color"
@@ -35,14 +35,16 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Sizes -->
     <Variant title="Size Variants">
-      <div class="flex flex-wrap items-center gap-2 p-4 bg-n-background">
+      <div
+        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
+      >
         <Button v-for="size in SIZES" :key="size" :label="size" :size="size" />
       </div>
     </Variant>
 
     <!-- Icons -->
     <Variant title="Icons">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Leading Icon" icon="i-lucide-plus" />
         <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
         <Button icon="i-lucide-plus" />
@@ -51,7 +53,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Loading State -->
     <Variant title="Loading State">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Loading" is-loading />
         <Button label="Loading" variant="outline" is-loading />
         <Button is-loading icon="i-lucide-plus" />
@@ -60,7 +62,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Disabled State -->
     <Variant title="Disabled State">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Disabled" disabled />
         <Button label="Disabled Outline" variant="outline" disabled />
         <Button label="Disabled Icon" icon="delete" disabled />
@@ -76,7 +78,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Color Combinations -->
     <Variant title="Color & Variant Combinations">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <template v-for="color in COLORS" :key="color">
           <Button
             v-for="variant in VARIANTS"
@@ -91,7 +93,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Icon Positions -->
     <Variant title="Icon Positions & Sizes">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <template v-for="size in SIZES" :key="size">
           <Button
             :label="`${size} Leading`"
@@ -111,7 +113,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
+      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
         <Button label="Ghost Button" variant="ghost" color="slate" />
         <Button
           label="Ghost with Icon"

app/javascript/dashboard/components-next/button/ConfirmButton.story.vue

@@ -15,7 +15,7 @@ const incrementCount = () => {
     :layout="{ type: 'grid', width: '400px' }"
   >
     <Variant title="Basic">
-      <div class="grid gap-2 p-4 bg-n-background">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
         <p>{{ count }}</p>
         <ConfirmButton
           label="Delete"
@@ -26,7 +26,7 @@ const incrementCount = () => {
     </Variant>
 
     <Variant title="Color Change">
-      <div class="grid gap-2 p-4 bg-n-background">
+      <div class="grid gap-2 p-4 bg-white dark:bg-slate-900">
         <p>{{ count }}</p>
         <ConfirmButton
           label="Archive"

app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue

@@ -12,7 +12,7 @@ import { assistantsList } from 'dashboard/components-next/captain/pageComponents
       <div
         v-for="(assistant, index) in assistantsList"
         :key="index"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <AssistantCard
           :id="assistant.id"

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

@@ -12,7 +12,7 @@ import { documentsList } from 'dashboard/components-next/captain/pageComponents/
       <div
         v-for="(doc, index) in documentsList"
         :key="index"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <DocumentCard
           :id="doc.id"

app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue

@@ -12,7 +12,7 @@ import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyS
       <div
         v-for="inbox in inboxes"
         :key="inbox.id"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <InboxCard :id="inbox.id" :inbox="inbox" />
       </div>

app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue

@@ -12,7 +12,7 @@ import { responsesList } from 'dashboard/components-next/captain/pageComponents/
       <div
         v-for="(response, index) in responsesList"
         :key="index"
-        class="px-20 py-4 bg-n-background"
+        class="px-20 py-4 bg-white dark:bg-slate-900"
       >
         <ResponseCard
           :id="response.id"

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

@@ -123,7 +123,7 @@ const handleDocumentableClick = () => {
     @mouseenter="emit('hover', true)"
     @mouseleave="emit('hover', false)"
   >
-    <div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
+    <div v-show="selectable" class="absolute top-7 ltr:left-4 rtl:right-4">
       <Checkbox v-model="modelValue" />
     </div>
     <div class="flex relative justify-between w-full gap-1">

app/javascript/dashboard/components-next/captain/pageComponents/assistant/AssistantForm.vue

@@ -159,7 +159,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.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

app/javascript/dashboard/components-next/captain/pageComponents/document/DocumentForm.vue

@@ -99,7 +99,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.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

app/javascript/dashboard/components-next/captain/pageComponents/inbox/ConnectInboxForm.vue

@@ -100,7 +100,7 @@ const handleSubmit = async () => {
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.CANCEL')"
-        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button

app/javascript/dashboard/components-next/captain/pageComponents/response/ResponseForm.vue

@@ -146,7 +146,7 @@ watch(
         variant="faded"
         color="slate"
         :label="t('CAPTAIN.FORM.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

app/javascript/dashboard/components-next/colorpicker/ColorPicker.vue

@@ -90,7 +90,7 @@ const pickerRef = ref(null);
 
     input,
     .vc-input__input {
-      @apply bg-n-background text-n-slate-12 rounded-md shadow-none;
+      @apply bg-n-background text-slate-900 dark:text-slate-50 rounded-md shadow-none;
     }
 
     .vc-input__label {

app/javascript/dashboard/components-next/combobox/ComboBox.story.vue

@@ -15,14 +15,14 @@ const selectedValue = ref('');
 <template>
   <Story title="Components/ComboBox" :layout="{ type: 'grid', width: '300px' }">
     <Variant title="Default">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <ComboBox v-model="selectedValue" :options="options" />
         <p class="mt-2">Selected value: {{ selectedValue }}</p>
       </div>
     </Variant>
 
     <Variant title="Disabled">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <ComboBox :options="options" disabled />
       </div>
     </Variant>

app/javascript/dashboard/components-next/combobox/ComboBoxDropdown.vue

@@ -69,7 +69,7 @@ defineExpose({
         :value="searchValue"
         type="search"
         :placeholder="searchPlaceholder || t('COMBOBOX.SEARCH_PLACEHOLDER')"
-        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-n-slate-12"
+        class="reset-base w-full py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-t-md bg-n-solid-1 text-slate-900 dark:text-slate-50"
         @input="onInputSearch"
       />
     </div>
@@ -102,7 +102,10 @@ defineExpose({
           class="flex-shrink-0 i-lucide-check size-4 text-n-slate-11"
         />
       </li>
-      <li v-if="options.length === 0" class="px-3 py-2 text-sm text-n-slate-11">
+      <li
+        v-if="options.length === 0"
+        class="px-3 py-2 text-sm text-slate-600 dark:text-slate-300"
+      >
         {{ emptyState || t('COMBOBOX.EMPTY_STATE') }}
       </li>
     </ul>

app/javascript/dashboard/components-next/combobox/TagMultiSelectComboxBox.story.vue

@@ -20,14 +20,14 @@ const preselectedValues = ref([1, 2]);
     :layout="{ type: 'grid', width: '300px' }"
   >
     <Variant title="Default">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <TagMultiSelectComboBox v-model="selectedValues" :options="options" />
         <p class="mt-2">Selected values: {{ selectedValues }}</p>
       </div>
     </Variant>
 
     <Variant title="With Preselected Values">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <TagMultiSelectComboBox
           v-model="preselectedValues"
           :options="options"
@@ -37,13 +37,13 @@ const preselectedValues = ref([1, 2]);
     </Variant>
 
     <Variant title="Disabled">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <TagMultiSelectComboBox :options="options" disabled />
       </div>
     </Variant>
 
     <Variant title="With Error">
-      <div class="w-full p-4 bg-n-background h-80">
+      <div class="w-full p-4 bg-white h-80 dark:bg-slate-900">
         <TagMultiSelectComboBox
           :options="options"
           has-error

app/javascript/dashboard/components-next/copilot/CopilotLauncher.vue

@@ -19,7 +19,6 @@ const isConversationRoute = computed(() => {
     'conversation_through_mentions',
     'conversation_through_unattended',
     'conversation_through_participating',
-    'inbox_view_conversation',
   ];
   return CONVERSATION_ROUTES.includes(route.name);
 });
@@ -49,10 +48,7 @@ const toggleSidebar = () => {
 </script>
 
 <template>
-  <div
-    v-if="showCopilotLauncher"
-    class="fixed bottom-4 ltr:right-4 rtl:left-4 z-50"
-  >
+  <div v-if="showCopilotLauncher" class="fixed bottom-4 right-4 z-50">
     <div class="rounded-full bg-n-alpha-2 p-1">
       <Button
         icon="i-woot-captain"

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.story.vue

@@ -20,7 +20,7 @@ const handleAction = () => {
 <template>
   <Story title="Components/DropdownMenu" :layout="{ type: 'grid', width: 300 }">
     <Variant title="Default">
-      <div class="p-4 bg-n-background h-72">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
         <div class="relative">
           <Button label="Open Menu" size="sm" @click="toggleDropdown" />
           <DropdownMenu
@@ -34,13 +34,13 @@ const handleAction = () => {
     </Variant>
 
     <Variant title="Always Open">
-      <div class="p-4 bg-n-background h-72">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
         <DropdownMenu :menu-items="menuItems" @action="handleAction" />
       </div>
     </Variant>
 
     <Variant title="Custom Items">
-      <div class="p-4 bg-n-background h-72">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
         <DropdownMenu
           :menu-items="[
             { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },
@@ -53,7 +53,7 @@ const handleAction = () => {
     </Variant>
 
     <Variant title="With search">
-      <div class="p-4 bg-n-background h-72">
+      <div class="p-4 bg-white h-72 dark:bg-slate-900">
         <DropdownMenu
           :menu-items="[
             { label: 'Custom 1', action: 'custom1', icon: 'file-upload' },