Merge remote-tracking branch 'origin/feat/whatsapp-embedded-signup' into test-pdf-support-captain

# Pull Request Template

## Description

This PR updates the inbox list on the settings page to be sorted
alphabetically.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## How Has This Been Tested?

### Screenshot
<img width="222" height="463" alt="image"
src="https://github.com/user-attachments/assets/0caabeb1-b2bd-4072-a44f-e0ac5a52404d"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

.eslintrc.js

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

.github/workflows/auto-assign-pr.yml

@@ -0,0 +1,28 @@
+name: Auto-assign PR to Author
+
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+    steps:
+      - name: Auto-assign PR to author
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { owner, repo } = context.repo;
+            const pull_number = context.payload.pull_request.number;
+            const author = context.payload.pull_request.user.login;
+            
+            await github.rest.issues.addAssignees({
+              owner,
+              repo,
+              issue_number: pull_number,
+              assignees: [author]
+            });
+            
+            console.log(`Assigned PR #${pull_number} to ${author}`);

.github/workflows/deploy_check.yml

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

.rubocop.yml

@@ -283,7 +283,7 @@ Rails/RedundantActiveRecordAllMethod:
   Enabled: false
 
 Layout/TrailingEmptyLines:
-  Enabled: false
+  Enabled: true
 
 Style/SafeNavigationChainLength:
   Enabled: false

Gemfile

@@ -174,6 +174,8 @@ gem 'neighbor'
 gem 'pgvector'
 # Convert Website HTML to Markdown
 gem 'reverse_markdown'
+# PDF text extraction
+gem 'pdf-reader', '~> 2.0'
 
 gem 'iso-639'
 gem 'ruby-openai'

Gemfile.lock

@@ -25,6 +25,7 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
+    Ascii85 (2.0.1)
     actioncable (7.1.5.1)
       actionpack (= 7.1.5.1)
       activesupport (= 7.1.5.1)
@@ -126,6 +127,7 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
+    afm (0.2.2)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -172,6 +174,8 @@ 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)
@@ -363,6 +367,7 @@ GEM
     hana (1.3.7)
     hash_diff (1.1.1)
     hashdiff (1.1.0)
+    hashery (2.1.2)
     hashie (5.0.0)
     html2text (0.4.0)
       nokogiri (>= 1.0, < 2.0)
@@ -433,10 +438,12 @@ GEM
       json (>= 1.8)
       rexml
     language_server-protocol (3.17.0.5)
-    launchy (2.5.2)
+    launchy (3.1.1)
       addressable (~> 2.8)
-    letter_opener (1.8.1)
-      launchy (>= 2.2, < 3)
+      childprocess (~> 5.0)
+      logger (~> 1.6)
+    letter_opener (1.10.0)
+      launchy (>= 2.2, < 4)
     line-bot-api (1.28.0)
     lint_roller (1.1.0)
     liquid (5.4.0)
@@ -550,6 +557,12 @@ GEM
     parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
+    pdf-reader (2.14.1)
+      Ascii85 (>= 1.0, < 3.0, != 2.0.0)
+      afm (~> 0.2.1)
+      hashery (~> 2.0)
+      ruby-rc4
+      ttfunk
     pg (1.5.3)
     pg_search (2.3.6)
       activerecord (>= 5.2)
@@ -563,7 +576,7 @@ GEM
       method_source (~> 1.0)
     pry-rails (0.3.9)
       pry (>= 0.10.4)
-    public_suffix (6.0.0)
+    public_suffix (6.0.2)
     puma (6.4.3)
       nio4r (~> 2.0)
     pundit (2.3.0)
@@ -707,6 +720,7 @@ GEM
       faraday (>= 1)
       faraday-multipart (>= 1)
     ruby-progressbar (1.13.0)
+    ruby-rc4 (0.1.5)
     ruby-vips (2.1.4)
       ffi (~> 1.12)
     ruby2_keywords (0.0.5)
@@ -815,6 +829,8 @@ GEM
       i18n
     timeout (0.4.3)
     trailblazer-option (0.1.2)
+    ttfunk (1.8.0)
+      bigdecimal (~> 3.1)
     twilio-ruby (5.77.0)
       faraday (>= 0.9, < 3.0)
       jwt (>= 1.5, < 3.0)
@@ -959,6 +975,7 @@ DEPENDENCIES
   omniauth-google-oauth2 (>= 1.1.3)
   omniauth-oauth2
   omniauth-rails_csrf_protection (~> 1.0, >= 1.0.2)
+  pdf-reader (~> 2.0)
   pg
   pg_search
   pgvector
@@ -1020,4 +1037,4 @@ RUBY VERSION
    ruby 3.4.4p34
 
 BUNDLED WITH
-   2.5.16
+   2.6.7

app/assets/javascripts/secretField.js

@@ -10,7 +10,8 @@ function toggleSecretField(e) {
   if (!textElement) return;
 
   if (textElement.dataset.secretMasked === 'false') {
-    textElement.textContent = '•'.repeat(10);
+    const maskedLength = secretField.dataset.secretText?.length || 10;
+    textElement.textContent = '•'.repeat(maskedLength);
     textElement.dataset.secretMasked = 'true';
     toggler.querySelector('svg use').setAttribute('xlink:href', '#eye-show');
 
@@ -32,3 +33,13 @@ 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,17 +46,25 @@
 
 .cell-data__secret-field {
   align-items: center;
+  color: $hint-grey;
   display: flex;
 
   span {
-    flex: 1;
+    flex: 0 0 auto;
   }
 
-  button {
-    margin-left: 5px;
+  [data-secret-toggler],
+  [data-secret-copier] {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    margin-left: 0.5rem;
+    padding: 0;
 
     svg {
       fill: currentColor;
+      height: 1.25rem;
+      width: 1.25rem;
     }
   }
 }

app/builders/v2/reports/label_summary_builder.rb

@@ -31,7 +31,7 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
       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', use_business_hours)
+      reply_metrics: fetch_metrics(conversation_filter, 'reply_time', use_business_hours)
     }
   end
 
@@ -63,7 +63,9 @@ class V2::Reports::LabelSummaryBuilder < V2::Reports::BaseSummaryBuilder
   end
 
   def fetch_resolved_counts(conversation_filter)
-    fetch_counts(conversation_filter.merge(status: :resolved))
+    # 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)

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

@@ -1,32 +1,23 @@
-class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Google::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   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: 'email profile https://mail.google.com/',
+        scope: scope,
         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,11 +81,15 @@ class Api::V1::Accounts::InboxesController < Api::V1::Accounts::BaseController
   end
 
   def create_channel
-    return unless %w[web_widget api email line telegram whatsapp sms].include?(permitted_params[:channel][:type])
+    return unless allowed_channel_types.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,7 +1,6 @@
-class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Instagram::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   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
@@ -21,10 +20,4 @@ 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,8 +1,9 @@
 class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::BaseController
-  before_action :fetch_conversation, only: [:link_issue, :linked_issues]
+  before_action :fetch_conversation, only: [:create_issue, :link_issue, :unlink_issue, :linked_issues]
   before_action :fetch_hook, only: [:destroy]
 
   def destroy
+    revoke_linear_token
     @hook.destroy!
     head :ok
   end
@@ -27,10 +28,16 @@ class Api::V1::Accounts::Integrations::LinearController < Api::V1::Accounts::Bas
   end
 
   def create_issue
-    issue = linear_processor_service.create_issue(permitted_params)
+    issue = linear_processor_service.create_issue(permitted_params, Current.user)
     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
@@ -38,21 +45,34 @@ 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)
+    issue = linear_processor_service.link_issue(conversation_link, issue_id, title, Current.user)
     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
@@ -101,4 +121,15 @@ 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

@@ -0,0 +1,14 @@
+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,28 +1,19 @@
-class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::BaseController
+class Api::V1::Accounts::Microsoft::AuthorizationsController < Api::V1::Accounts::OauthAuthorizationController
   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: 'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile',
+        scope: scope,
+        state: state,
         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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,23 @@
+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/v1/accounts/whatsapp/authorizations_controller.rb

@@ -0,0 +1,64 @@
+class Api::V1::Accounts::Whatsapp::AuthorizationsController < Api::V1::Accounts::BaseController
+  before_action :validate_feature_enabled!
+
+  # POST /api/v1/accounts/:account_id/whatsapp/authorization
+  # Handles the embedded signup callback data from the Facebook SDK
+  def create
+    validate_embedded_signup_params!
+    channel = process_embedded_signup
+    render_success_response(channel.inbox)
+  rescue StandardError => e
+    render_error_response(e)
+  end
+
+  private
+
+  def process_embedded_signup
+    service = Whatsapp::EmbeddedSignupService.new(
+      account: Current.account,
+      code: params[:code],
+      business_id: params[:business_id],
+      waba_id: params[:waba_id],
+      phone_number_id: params[:phone_number_id]
+    )
+    service.perform
+  end
+
+  def render_success_response(inbox)
+    render json: {
+      success: true,
+      id: inbox.id,
+      name: inbox.name,
+      channel_type: 'whatsapp'
+    }
+  end
+
+  def render_error_response(error)
+    Rails.logger.error "[WHATSAPP AUTHORIZATION] Embedded signup error: #{error.message}"
+    Rails.logger.error error.backtrace.join("\n")
+    render json: {
+      success: false,
+      error: error.message
+    }, status: :unprocessable_entity
+  end
+
+  def validate_feature_enabled!
+    return if Current.account.feature_whatsapp_embedded_signup?
+
+    render json: {
+      success: false,
+      error: 'WhatsApp embedded signup is not enabled for this account'
+    }, status: :forbidden
+  end
+
+  def validate_embedded_signup_params!
+    missing_params = []
+    missing_params << 'code' if params[:code].blank?
+    missing_params << 'business_id' if params[:business_id].blank?
+    missing_params << 'waba_id' if params[:waba_id].blank?
+
+    return if missing_params.empty?
+
+    raise ArgumentError, "Required parameters are missing: #{missing_params.join(', ')}"
+  end
+end

app/controllers/concerns/google_concern.rb

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

app/controllers/concerns/microsoft_concern.rb

@@ -15,7 +15,7 @@ module MicrosoftConcern
 
   private
 
-  def base_url
-    ENV.fetch('FRONTEND_URL', 'http://localhost:3000')
+  def scope
+    'offline_access https://outlook.office.com/IMAP.AccessAsUser.All https://outlook.office.com/SMTP.Send openid profile email'
   end
 end

app/controllers/concerns/notion_concern.rb

@@ -0,0 +1,21 @@
+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

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

app/controllers/notion/callbacks_controller.rb

@@ -0,0 +1,36 @@
+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,7 +6,6 @@ class OauthCallbackController < ApplicationController
     )
 
     handle_response
-    ::Redis::Alfred.delete(cache_key)
   rescue StandardError => e
     ChatwootExceptionTracker.new(e).capture_exception
     redirect_to '/'
@@ -64,10 +63,6 @@ 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)
@@ -86,12 +81,17 @@ class OauthCallbackController < ApplicationController
     decoded_token[0]
   end
 
-  def account_id
-    ::Redis::Alfred.get(cache_key)
+  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
   end
 
   def account
-    @account ||= Account.find(account_id)
+    @account ||= account_from_signed_id
   end
 
   # Fallback name, for when name field is missing from users_data

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

@@ -7,13 +7,19 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def index
     @articles = @portal.articles.published.includes(:category, :author)
+
+    @articles = @articles.where(locale: permitted_params[:locale]) if permitted_params[:locale].present?
+
     @articles_count = @articles.count
+
     search_articles
     order_by_sort_param
     limit_results
   end
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url(@portal.name, @article.title)
+  end
 
   def tracking_pixel
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])

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

@@ -8,7 +8,9 @@ class Public::Api::V1::Portals::CategoriesController < Public::Api::V1::Portals:
     @categories = @portal.categories.order(position: :asc)
   end
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url(@portal.name, @category.name)
+  end
 
   private
 

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

@@ -4,7 +4,9 @@ class Public::Api::V1::PortalsController < Public::Api::V1::Portals::BaseControl
   before_action :redirect_to_portal_with_locale, only: [:show]
   layout 'portal'
 
-  def show; end
+  def show
+    @og_image_url = helpers.set_og_image_url('', @portal.header_text)
+  end
 
   def sitemap
     @help_center_url = @portal.custom_domain || ChatwootApp.help_center_root

app/controllers/super_admin/app_configs_controller.rb

@@ -39,7 +39,9 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
       'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
       'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
       'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
-      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT],
+      'whatsapp_embedded' => %w[WHATSAPP_APP_ID WHATSAPP_APP_SECRET WHATSAPP_CONFIGURATION_ID WHATSAPP_API_VERSION],
+      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET]
     }
 
     @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])

app/controllers/twilio/callback_controller.rb

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

app/helpers/message_format_helper.rb

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

app/helpers/portal_helper.rb

@@ -1,4 +1,21 @@
 module PortalHelper
+  def set_og_image_url(portal_name, title)
+    cdn_url = GlobalConfig.get('OG_IMAGE_CDN_URL')['OG_IMAGE_CDN_URL']
+    return if cdn_url.blank?
+
+    client_ref = GlobalConfig.get('OG_IMAGE_CLIENT_REF')['OG_IMAGE_CLIENT_REF']
+
+    uri = URI.parse(cdn_url)
+    uri.path = '/og'
+    uri.query = URI.encode_www_form(
+      clientRef: client_ref,
+      title: title,
+      portalName: portal_name
+    )
+
+    uri.to_s
+  end
+
   def generate_portal_bg_color(portal_color, theme)
     base_color = theme == 'dark' ? 'black' : 'white'
     "color-mix(in srgb, #{portal_color} 20%, #{base_color})"

app/javascript/dashboard/App.vue

@@ -1,6 +1,6 @@
 <script>
 import { mapGetters } from 'vuex';
-import AddAccountModal from '../dashboard/components/layout/sidebarComponents/AddAccountModal.vue';
+import AddAccountModal from './components/app/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/captain/document.js

@@ -15,6 +15,14 @@ class CaptainDocument extends ApiClient {
       },
     });
   }
+
+  uploadPdf(formData) {
+    return axios.post(`${this.url}/upload_pdf`, formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+  }
 }
 
 export default new CaptainDocument();

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

@@ -33,9 +33,11 @@ class LinearAPI extends ApiClient {
     );
   }
 
-  unlinkIssue(linkId) {
+  unlinkIssue(linkId, issueIdentifier, conversationId) {
     return axios.post(`${this.url}/unlink_issue`, {
       link_id: linkId,
+      issue_id: issueIdentifier,
+      conversation_id: conversationId,
     });
   }
 

app/javascript/dashboard/api/notion_auth.js

@@ -0,0 +1,14 @@
+/* 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,6 +91,19 @@ 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', () => {
@@ -120,6 +133,18 @@ 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', () => {
@@ -164,12 +189,26 @@ describe('#linearAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('creates a valid request', () => {
-      LinearAPIClient.unlinkIssue(1);
+    it('creates a valid request with link_id only', () => {
+      LinearAPIClient.unlinkIssue('link123');
       expect(axiosMock.post).toHaveBeenCalledWith(
         '/api/v1/integrations/linear/unlink_issue',
         {
-          link_id: 1,
+          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,
         }
       );
     });

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

@@ -1,101 +0,0 @@
-.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/_base.scss

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

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

@@ -1,38 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-// 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

@@ -1,48 +0,0 @@
-// 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

@@ -1,101 +0,0 @@
-@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

@@ -1,204 +0,0 @@
-.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

@@ -1,97 +0,0 @@
-// 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,3 +1,4 @@
+// scss-lint:disable SpaceAfterPropertyColon
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
@@ -8,54 +9,66 @@
 // Next Colors
 @import 'next-colors';
 
-@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';
+// Base styles for elements
+@import 'base';
 
+// Plugins
 @import 'plugins/multiselect';
-@import 'plugins/dropdown';
+@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;
+    }
+  }
+}
 
 .tooltip {
-  @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;
+  @apply bg-n-solid-2 text-n-slate-12 py-1 px-2 z-40 text-xs rounded-md 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;
@@ -67,351 +80,6 @@
   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/_date-picker.scss

@@ -30,11 +30,11 @@
 
   .mx-input:disabled,
   .mx-input[readonly] {
-    @apply bg-white dark:bg-slate-900 cursor-pointer;
+    @apply bg-n-background cursor-pointer;
   }
 
   .mx-icon-calendar {
-    @apply dark:text-slate-500;
+    @apply text-n-slate-10;
   }
 }
 
@@ -43,17 +43,17 @@
 
   .cell {
     &.disabled {
-      @apply bg-slate-25 dark:bg-slate-900 text-slate-200 dark:text-slate-300;
+      @apply bg-n-slate-2 dark:bg-n-background text-n-slate-10;
     }
 
     &:hover,
     &.hover-in-range,
     &.in-range {
-      @apply bg-slate-75 dark:bg-slate-700 text-slate-900 dark:text-slate-100;
+      @apply bg-n-slate-3 dark:bg-n-solid-3 text-n-slate-12;
     }
   }
 
-  .mx-calendar+.mx-calendar {
+  .mx-calendar + .mx-calendar {
     @apply border-l border-n-weak;
   }
 
@@ -62,7 +62,7 @@
   }
 
   .mx-time {
-    @apply border-0 bg-white dark:bg-slate-800;
+    @apply border-0 bg-n-background dark:bg-n-solid-2;
 
     .mx-time-header {
       @apply border-0;
@@ -70,11 +70,11 @@
 
     .mx-time-item {
       &.disabled {
-        @apply bg-slate-25 dark:bg-slate-900;
+        @apply bg-n-slate-2 dark:bg-n-background;
       }
 
       &:hover {
-        @apply bg-slate-75 dark:bg-slate-700;
+        @apply bg-n-slate-3 dark:bg-n-solid-3;
       }
     }
   }

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

@@ -1,7 +0,0 @@
-.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,6 +17,10 @@
     @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;
 
@@ -47,7 +51,7 @@
     @apply max-w-full;
 
     .multiselect__option {
-      @apply text-sm font-normal;
+      @apply text-sm font-normal flex justify-between items-center;
 
       span {
         @apply inline-block overflow-hidden text-ellipsis whitespace-nowrap w-fit;
@@ -58,7 +62,7 @@
       }
 
       &::after {
-        @apply bottom-0 flex items-center justify-center text-center;
+        @apply bottom-0 flex items-center justify-center text-center relative px-1 leading-tight;
       }
 
       &.multiselect__option--highlight {
@@ -74,7 +78,7 @@
       }
 
       &.multiselect__option--highlight::after {
-        @apply bg-transparent;
+        @apply bg-transparent text-n-slate-12;
       }
 
       &.multiselect__option--selected {
@@ -124,8 +128,7 @@
   }
 
   .multiselect__input {
-    @include ghost-input;
-    @apply text-sm h-[2.875rem] mb-0 p-0;
+    @apply text-sm h-[2.875rem] mb-0 p-0 shadow-none border-transparent hover:border-transparent hover:shadow-none focus:border-transparent focus:shadow-none active:border-transparent active:shadow-none;
   }
 
   .multiselect__single {

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

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

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

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

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

@@ -1,261 +0,0 @@
-// 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

@@ -1,77 +0,0 @@
-.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

@@ -1,90 +0,0 @@
-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-slate-50 dark:border-slate-900 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-n-weak shadow-md flex flex-col gap-6 max-h-[85vh] overflow-y-auto"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{ 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 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-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-slate-50 dark:border-slate-900 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-n-weak shadow-md flex flex-col gap-6"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{ 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 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-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 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-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-green-500 dark:text-green-400';
+      return 'text-n-teal-10 dark:text-n-teal-10';
     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-slate-900 dark:text-white font-interDisplay"
+              class="text-3xl font-medium text-center text-n-slate-12 font-interDisplay"
             >
               {{ title }}
             </h2>
             <p
-              class="max-w-xl text-base text-center text-slate-600 dark:text-slate-300 font-interDisplay tracking-[0.3px]"
+              class="max-w-xl text-base text-center text-n-slate-11 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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <CategoryCard
           :id="category.id"

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

@@ -121,11 +121,7 @@ const handleAction = ({ action, value }) => {
     </div>
     <span
       class="text-sm line-clamp-3"
-      :class="
-        hasDescription
-          ? 'text-slate-500 dark:text-slate-400'
-          : 'text-slate-400 dark:text-slate-700'
-      "
+      :class="hasDescription ? 'text-n-slate-11' : 'text-n-slate-9'"
     >
       {{ 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-white dark:bg-slate-900">
+      <div class="w-full h-full px-20 mx-auto bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="w-full h-full px-20 mx-auto bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="px-10 py-4 bg-n-background">
         <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,9 +55,7 @@ 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-slate-900 dark:text-slate-50 line-clamp-1"
-        >
+        <span class="text-sm font-medium text-n-slate-12 line-clamp-1">
           {{ locale }} ({{ localeCode }})
         </span>
         <span
@@ -69,9 +67,7 @@ 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-slate-500 dark:text-slate-400 whitespace-nowrap"
-          >
+          <span class="text-sm text-n-slate-11 whitespace-nowrap">
             {{
               $t(
                 'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.ARTICLES_COUNT',
@@ -79,10 +75,8 @@ const handleAction = ({ action, value }) => {
               )
             }}
           </span>
-          <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"
-          >
+          <div class="w-px h-3 bg-n-weak" />
+          <span class="text-sm text-n-slate-11 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-slate-200 dark:text-slate-500 text-base;
+    @apply text-n-slate-10 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-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;
+      @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;
       display: flex;
       top: var(--selection-top, auto) !important;
       left: var(--selection-left, 0) !important;
@@ -180,6 +180,10 @@ 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-slate-50 dark:bg-slate-800" />
+    <div class="w-px h-3 bg-n-weak" />
     <div class="relative">
       <OnClickOutside @trigger="openCategoryList = false">
         <Button
@@ -239,7 +239,7 @@ onMounted(() => {
       </OnClickOutside>
     </div>
 
-    <div class="w-px h-3 bg-slate-50 dark:bg-slate-800" />
+    <div class="w-px h-3 bg-n-weak" />
     <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-slate-500 dark:text-slate-400"
+        class="text-xs font-medium transition-all duration-300 text-n-slate-11"
       >
         {{ 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-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <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-slate-50 dark:border-slate-900 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-n-weak shadow-md flex flex-col gap-6"
   >
-    <h3 class="text-base font-medium text-slate-900 dark:text-slate-50">
+    <h3 class="text-base font-medium text-n-slate-12">
       {{
         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 n-blue-text hover:bg-n-alpha-3"
+          class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
           @click="handleCancel"
         />
         <Button

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

@@ -147,10 +147,8 @@ const handleBreadcrumbClick = () => {
           />
         </OnClickOutside>
       </div>
-      <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"
-      >
+      <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">
         {{
           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-white dark:bg-slate-900">
+      <div class="w-full min-h-screen bg-n-background">
         <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-slate-800 dark:text-slate-100">
+          <span class="text-sm font-medium text-n-slate-12">
             {{ $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-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ 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-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ 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-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
         >
           {{ 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-slate-900 py-2.5 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap text-n-slate-12 py-2.5"
         >
           {{ 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-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ 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-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ 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-slate-900 dark:text-slate-50"
+          class="text-sm font-medium whitespace-nowrap py-2.5 text-n-slate-12"
         >
           {{ 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-white dark:bg-slate-900">
+      <div class="w-[1000px] min-h-screen bg-n-background">
         <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-slate-50 dark:bg-slate-800/50" />
+        <div class="w-full h-px bg-n-weak" />
         <PortalConfigurationSettings
           :active-portal="activePortal"
           :is-fetching="isFetching"
           @update-portal-configuration="handleUpdatePortalConfiguration"
         />
-        <div class="w-full h-px bg-slate-50 dark:bg-slate-800/50" />
+        <div class="w-full h-px bg-n-weak" />
         <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-slate-100 dark:bg-slate-900">
+      <div class="h-[500px] p-4 bg-n-slate-2 dark:bg-n-background">
         <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-slate-900 dark:text-slate-50 w-fit hover:underline"
+            class="text-base font-medium cursor-pointer text-n-slate-12 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-slate-600 dark:text-slate-300">
+        <p class="text-sm text-n-slate-11">
           {{ 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-white dark:bg-slate-900">
+      <div class="flex p-4 space-x-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="gap-4 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <!-- 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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-4 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="singleItem" />
       </div>
     </Variant>
 
     <Variant title="Two Items">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="twoItems" />
       </div>
     </Variant>
 
     <Variant title="Three Items with Count">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="threeItems" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="Long Breadcrumb">
-      <div class="w-full p-4 bg-white dark:bg-slate-900">
+      <div class="w-full p-4 bg-n-background">
         <Breadcrumb :items="longBreadcrumb" count-label="articles" />
       </div>
     </Variant>
 
     <Variant title="RTL Support">
       <div dir="rtl">
-        <div class="w-full p-4 bg-white dark:bg-slate-900">
+        <div class="w-full p-4 bg-n-background">
           <Breadcrumb :items="threeItems" count-label="articles" />
         </div>
       </div>

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

@@ -36,9 +36,7 @@ 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-slate-900 dark:text-slate-50 max-w-56"
-          >
+          <span class="text-sm truncate text-n-slate-12 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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button
           v-for="color in COLORS"
           :key="color"
@@ -35,16 +35,14 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Sizes -->
     <Variant title="Size Variants">
-      <div
-        class="flex flex-wrap items-center gap-2 p-4 bg-white dark:bg-slate-900"
-      >
+      <div class="flex flex-wrap items-center gap-2 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Leading Icon" icon="i-lucide-plus" />
         <Button label="Trailing Icon" icon="i-lucide-plus" trailing-icon />
         <Button icon="i-lucide-plus" />
@@ -53,7 +51,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Loading State -->
     <Variant title="Loading State">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Loading" is-loading />
         <Button label="Loading" variant="outline" is-loading />
         <Button is-loading icon="i-lucide-plus" />
@@ -62,7 +60,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Disabled State -->
     <Variant title="Disabled State">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <Button label="Disabled" disabled />
         <Button label="Disabled Outline" variant="outline" disabled />
         <Button label="Disabled Icon" icon="delete" disabled />
@@ -78,7 +76,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Color Combinations -->
     <Variant title="Color & Variant Combinations">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <template v-for="color in COLORS" :key="color">
           <Button
             v-for="variant in VARIANTS"
@@ -93,7 +91,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Icon Positions -->
     <Variant title="Icon Positions & Sizes">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <template v-for="size in SIZES" :key="size">
           <Button
             :label="`${size} Leading`"
@@ -113,7 +111,7 @@ const SIZES = ['default', 'sm', 'lg'];
 
     <!-- Ghost & Link Variants -->
     <Variant title="Ghost & Link Variants">
-      <div class="flex flex-wrap gap-2 p-4 bg-white dark:bg-slate-900">
+      <div class="flex flex-wrap gap-2 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="grid gap-2 p-4 bg-n-background">
         <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-white dark:bg-slate-900">
+      <div class="grid gap-2 p-4 bg-n-background">
         <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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <DocumentCard
           :id="doc.id"

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

@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  file: {
+    type: Object,
+    default: null,
+  },
   createdAt: {
     type: Number,
     required: true,
@@ -63,6 +67,22 @@ const menuItems = computed(() => {
 
 const createdAt = computed(() => dynamicTime(props.createdAt));
 
+const displayLink = computed(() => {
+  // For PDF uploads, show the filename instead of the generated external_link
+  if (props.file?.filename) {
+    return props.file.filename;
+  }
+  return props.externalLink;
+});
+
+const actualLink = computed(() => {
+  // For PDF uploads, return the actual file URL; for URLs, return the external_link
+  if (props.file?.url) {
+    return props.file.url;
+  }
+  return props.externalLink;
+});
+
 const handleAction = ({ action, value }) => {
   toggleDropdown(false);
   emit('action', { action, value, id: props.id });
@@ -103,12 +123,15 @@ const handleAction = ({ action, value }) => {
         <i class="i-woot-captain" />
         {{ assistant?.name || '' }}
       </span>
-      <span
-        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1"
+      <a
+        :href="actualLink"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-n-slate-11 text-sm truncate flex justify-start flex-1 items-center gap-1 hover:text-n-slate-12 transition-colors"
       >
         <i class="i-ph-link-simple shrink-0" />
-        <span class="truncate">{{ externalLink }}</span>
-      </span>
+        <span class="truncate">{{ displayLink }}</span>
+      </a>
       <div class="shrink-0 text-sm text-n-slate-11 line-clamp-1">
         {{ createdAt }}
       </div>

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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <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-white dark:bg-slate-900"
+        class="px-20 py-4 bg-n-background"
       >
         <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-4 rtl:right-4">
+    <div v-show="selectable" class="absolute top-7 ltr:left-3 rtl:right-3">
       <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 n-blue-text hover:bg-n-alpha-3"
+        class="w-full bg-n-alpha-2 text-n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button

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

@@ -2,28 +2,43 @@
 import { ref } from 'vue';
 import { useStore } from 'dashboard/composables/store';
 import { useAlert } from 'dashboard/composables';
-import { useI18n } from 'vue-i18n';
-
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import DocumentForm from './DocumentForm.vue';
 
-const emit = defineEmits(['close']);
-const { t } = useI18n();
+const emit = defineEmits(['close', 'success']);
 const store = useStore();
 
 const dialogRef = ref(null);
 const documentForm = ref(null);
 
-const i18nKey = 'CAPTAIN.DOCUMENTS.CREATE';
-
 const handleSubmit = async newDocument => {
   try {
-    await store.dispatch('captainDocuments/create', newDocument);
-    useAlert(t(`${i18nKey}.SUCCESS_MESSAGE`));
+    if (newDocument.type === 'pdf') {
+      // Handle PDF upload
+      const formData = new FormData();
+      formData.append('pdf_document', newDocument.pdf_document);
+      formData.append('assistant_id', newDocument.assistant_id);
+
+      await store.dispatch('captainDocuments/uploadPdf', formData);
+      useAlert('PDF uploaded successfully! Processing will begin shortly.');
+    } else {
+      // Handle URL creation
+      await store.dispatch('captainDocuments/create', {
+        document: {
+          external_link: newDocument.external_link,
+          assistant_id: newDocument.assistant_id,
+        },
+      });
+      useAlert('Document created successfully!');
+    }
+
+    // Emit success event to refresh the list
+    emit('success');
     dialogRef.value.close();
   } catch (error) {
     const errorMessage =
-      error?.response?.message || t(`${i18nKey}.ERROR_MESSAGE`);
+      error?.response?.data?.message ||
+      'Failed to create document. Please try again.';
     useAlert(errorMessage);
   }
 };
@@ -42,8 +57,8 @@ defineExpose({ dialogRef });
 <template>
   <Dialog
     ref="dialogRef"
-    :title="$t(`${i18nKey}.TITLE`)"
-    :description="$t('CAPTAIN.DOCUMENTS.FORM_DESCRIPTION')"
+    :title="$t('CAPTAIN.DOCUMENTS.CREATE.TITLE')"
+    :description="$t('CAPTAIN.DOCUMENTS.CREATE.DESCRIPTION')"
     :show-cancel-button="false"
     :show-confirm-button="false"
     @close="handleClose"

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

@@ -1,6 +1,5 @@
 <script setup>
-import { reactive, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import { reactive, computed, ref } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { required, minLength, url } from '@vuelidate/validators';
 import { useMapGetter } from 'dashboard/composables/store';
@@ -8,27 +7,36 @@ import { useMapGetter } from 'dashboard/composables/store';
 import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import FileUpload from 'dashboard/components-next/fileUpload/FileUpload.vue';
 
 const emit = defineEmits(['submit', 'cancel']);
 
-const { t } = useI18n();
-
 const formState = {
   uiFlags: useMapGetter('captainDocuments/getUIFlags'),
   assistants: useMapGetter('captainAssistants/getRecords'),
 };
 
 const initialState = {
-  name: '',
+  url: '',
   assistantId: null,
+  selectedFile: null,
+  sourceType: 'url', // 'url' or 'pdf'
 };
 
 const state = reactive({ ...initialState });
+const uploadError = ref('');
 
-const validationRules = {
-  url: { required, url, minLength: minLength(1) },
-  assistantId: { required },
-};
+const validationRules = computed(() => {
+  const rules = {
+    assistantId: { required },
+  };
+
+  if (state.sourceType === 'url') {
+    rules.url = { required, url, minLength: minLength(1) };
+  }
+
+  return rules;
+});
 
 const assistantList = computed(() =>
   formState.assistants.value.map(assistant => ({
@@ -41,70 +49,258 @@ const v$ = useVuelidate(validationRules, state);
 
 const isLoading = computed(() => formState.uiFlags.value.creatingItem);
 
-const getErrorMessage = (field, errorKey) => {
-  return v$.value[field].$error
-    ? t(`CAPTAIN.DOCUMENTS.FORM.${errorKey}.ERROR`)
-    : '';
+const getErrorMessage = (field, errorMessage) => {
+  return v$.value[field]?.$error ? errorMessage : '';
 };
 
 const formErrors = computed(() => ({
-  url: getErrorMessage('url', 'URL'),
-  assistantId: getErrorMessage('assistantId', 'ASSISTANT'),
+  url: getErrorMessage('url', 'Please enter a valid URL'),
+  assistantId: getErrorMessage('assistantId', 'Please select an assistant'),
 }));
 
 const handleCancel = () => emit('cancel');
 
-const prepareDocumentDetails = () => ({
-  external_link: state.url,
-  assistant_id: state.assistantId,
-});
+const prepareDocumentDetails = () => {
+  if (state.sourceType === 'pdf') {
+    return {
+      type: 'pdf',
+      pdf_document: state.selectedFile,
+      assistant_id: state.assistantId,
+    };
+  }
+
+  return {
+    type: 'url',
+    external_link: state.url,
+    assistant_id: state.assistantId,
+  };
+};
 
 const handleSubmit = async () => {
+  uploadError.value = '';
+
+  // Validate form
   const isFormValid = await v$.value.$validate();
   if (!isFormValid) {
     return;
   }
 
+  // For PDF uploads, check if file is selected
+  if (state.sourceType === 'pdf' && !state.selectedFile) {
+    uploadError.value = 'Please select a PDF file to upload.';
+    return;
+  }
+
   emit('submit', prepareDocumentDetails());
 };
+
+// PDF Upload handlers
+const handleFileSelected = file => {
+  state.selectedFile = file;
+  uploadError.value = '';
+};
+
+const handleFileError = error => {
+  uploadError.value = error;
+  state.selectedFile = null;
+};
+
+const clearSelectedFile = () => {
+  state.selectedFile = null;
+  uploadError.value = '';
+};
+
+const handleSourceTypeChange = type => {
+  state.sourceType = type;
+  uploadError.value = '';
+  state.selectedFile = null;
+  state.url = '';
+};
 </script>
 
 <template>
   <form class="flex flex-col gap-4" @submit.prevent="handleSubmit">
-    <Input
-      v-model="state.url"
-      :label="t('CAPTAIN.DOCUMENTS.FORM.URL.LABEL')"
-      :placeholder="t('CAPTAIN.DOCUMENTS.FORM.URL.PLACEHOLDER')"
-      :message="formErrors.url"
-      :message-type="formErrors.url ? 'error' : 'info'"
-    />
+    <!-- Source Type Selection -->
+    <div class="flex flex-col gap-2">
+      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.LABEL') }}
+      </label>
+      <div class="flex gap-2">
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
+          :class="{
+            'ring-2 ring-woot-500 text-woot-500 border-0':
+              state.sourceType === 'url',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'url',
+          }"
+          @click="handleSourceTypeChange('url')"
+        >
+          <div class="flex items-center justify-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M3.9 12C3.9 10.29 5.29 8.9 7 8.9H11V7H7C4.24 7 2 9.24 2 12S4.24 17 7 17H11V15.1H7C5.29 15.1 3.9 13.71 3.9 12ZM8 13H16V11H8V13ZM17 7H13V8.9H17C18.71 8.9 20.1 10.29 20.1 12S18.71 15.1 17 15.1H13V17H17C19.76 17 22 14.76 22 12S19.76 7 17 7Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">{{
+              $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.WEBSITE_URL')
+            }}</span>
+          </div>
+        </button>
+        <button
+          type="button"
+          class="flex-1 p-3 rounded-lg bg-n-alpha-2 hover:border-n-slate-7 transition-colors focus:outline-none"
+          :class="{
+            'ring-2 ring-woot-500 text-woot-500 border-0':
+              state.sourceType === 'pdf',
+            'border-2 border-n-slate-7 text-n-slate-11':
+              state.sourceType !== 'pdf',
+          }"
+          @click="handleSourceTypeChange('pdf')"
+        >
+          <div class="flex items-center justify-center gap-2">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <span class="text-sm font-medium">{{
+              $t('CAPTAIN.DOCUMENTS.CREATE.FORM.SOURCE_TYPE.PDF_UPLOAD')
+            }}</span>
+          </div>
+        </button>
+      </div>
+    </div>
+
+    <!-- URL Input (when URL is selected) -->
+    <div v-if="state.sourceType === 'url'">
+      <Input
+        v-model="state.url"
+        label="Website URL"
+        placeholder="Enter the website URL to crawl"
+        :message="formErrors.url"
+        :message-type="formErrors.url ? 'error' : 'info'"
+      />
+    </div>
+
+    <!-- PDF Upload (when PDF is selected) -->
+    <div v-if="state.sourceType === 'pdf'" class="flex flex-col gap-2">
+      <label class="mb-0.5 text-sm font-medium text-n-slate-12">
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.PDF_UPLOAD.LABEL') }}
+      </label>
+
+      <!-- File upload area -->
+      <div v-if="!state.selectedFile">
+        <FileUpload
+          accept="application/pdf"
+          :max-size-m-b="25"
+          placeholder="Select a PDF file"
+          upload-text="Click to select PDF or drag and drop"
+          drag-text="Drop PDF file here"
+          @file-selected="handleFileSelected"
+          @file-error="handleFileError"
+        />
+      </div>
+
+      <!-- Selected file display -->
+      <div v-else class="p-3 bg-n-alpha-2 rounded-lg border border-n-slate-6">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="text-red-600"
+            >
+              <path
+                d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"
+                fill="currentColor"
+              />
+            </svg>
+            <div>
+              <p class="text-sm font-medium text-n-slate-12">
+                {{ state.selectedFile.name }}
+              </p>
+              <p class="text-xs text-n-slate-8">
+                {{
+                  Math.round((state.selectedFile.size / 1024 / 1024) * 100) /
+                  100
+                }}
+                {{ $t('GENERAL.FILE_SIZE.MB') }}
+              </p>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="p-1 rounded hover:bg-n-alpha-3 text-n-slate-8 hover:text-n-slate-10"
+            @click="clearSelectedFile"
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                fill="currentColor"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- Upload error -->
+      <p v-if="uploadError" class="text-sm text-red-600">{{ uploadError }}</p>
+    </div>
+
+    <!-- Assistant Selection -->
     <div class="flex flex-col gap-1">
       <label for="assistant" class="mb-0.5 text-sm font-medium text-n-slate-12">
-        {{ t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.LABEL') }}
+        {{ $t('CAPTAIN.DOCUMENTS.CREATE.FORM.ASSISTANT.LABEL') }}
       </label>
       <ComboBox
         id="assistant"
         v-model="state.assistantId"
         :options="assistantList"
         :has-error="!!formErrors.assistantId"
-        :placeholder="t('CAPTAIN.DOCUMENTS.FORM.ASSISTANT.PLACEHOLDER')"
+        placeholder="Choose an assistant"
         class="[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:dark:outline-n-weak [&>div>button:not(.focused)]:hover:!outline-n-slate-6"
         :message="formErrors.assistantId"
       />
     </div>
 
+    <!-- Action Buttons -->
     <div class="flex items-center justify-between w-full gap-3">
       <Button
         type="button"
         variant="faded"
         color="slate"
-        :label="t('CAPTAIN.FORM.CANCEL')"
+        label="Cancel"
         class="w-full bg-n-alpha-2 n-blue-text hover:bg-n-alpha-3"
         @click="handleCancel"
       />
       <Button
         type="submit"
-        :label="t('CAPTAIN.FORM.CREATE')"
+        label="Create Document"
         class="w-full"
         :is-loading="isLoading"
         :disabled="isLoading"