feat: use feature flag

**Summary**
- Fixed Ruby warning about unescaped closing bracket in character class
within `MENTION_REGEX`
- Properly escaped the `]` character in the regex pattern to follow Ruby
regex syntax standards

**Changes**
- Updated `MENTION_REGEX` in `lib/regex_helper.rb` to escape the closing
bracket in character class `[^]]+` → `[^\\]]+`

.devcontainer/Dockerfile

@@ -4,5 +4,15 @@ FROM ghcr.io/chatwoot/chatwoot_codespace:latest
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
+
+# Copy dependency files first for better caching
+COPY package.json pnpm-lock.yaml ./
+COPY Gemfile Gemfile.lock ./
+
+# Install dependencies (will be cached if files don't change)
+RUN pnpm install --frozen-lockfile && \
+    gem install bundler && \
+    bundle install --jobs=$(nproc)
+
+# Copy source code after dependencies are installed
 COPY . /workspace
-RUN yarn && gem install bundler && bundle install

.devcontainer/Dockerfile.base

@@ -1,12 +1,16 @@
-
-ARG VARIANT
+ARG VARIANT="ubuntu-22.04"
 
 FROM mcr.microsoft.com/vscode/devcontainers/base:0-${VARIANT}
 
+ENV DEBIAN_FRONTEND=noninteractive
+
 ARG NODE_VERSION
 ARG RUBY_VERSION
 ARG USER_UID
 ARG USER_GID
+ARG PNPM_VERSION="10.2.0"
+ENV PNPM_VERSION ${PNPM_VERSION}
+ENV RUBY_CONFIGURE_OPTS=--disable-install-doc
 
 # Update args in docker-compose.yaml to set the UID/GID of the "vscode" user.
 RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
@@ -15,61 +19,80 @@ RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then \
         && chmod -R $USER_UID:$USER_GID /home/vscode; \
     fi
 
-RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-  && apt-get -y install --no-install-recommends \
-    build-essential \
-    libssl-dev \
-    zlib1g-dev \
-    gnupg2 \
-    tar \
-    tzdata \
-    postgresql-client \
-    libpq-dev \
-    yarn \
-    git \
-    imagemagick \
-    tmux \
-    zsh \
-    git-flow \
-    npm \
-    libyaml-dev
+RUN NODE_MAJOR=$(echo $NODE_VERSION | cut -d. -f1) \
+    && curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash - \
+    && apt-get update \
+    && apt-get -y install --no-install-recommends \
+        build-essential \
+        libssl-dev \
+        zlib1g-dev \
+        gnupg \
+        tar \
+        tzdata \
+        postgresql-client \
+        libpq-dev \
+        git \
+        imagemagick \
+        libyaml-dev \
+        curl \
+        ca-certificates \
+        tmux \
+        nodejs \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
-# Install rbenv and ruby
-RUN git clone https://github.com/rbenv/rbenv.git ~/.rbenv \
+# Install rbenv and ruby for root user first
+RUN git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv \
     &&  echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bashrc \
     &&  echo 'eval "$(rbenv init -)"' >> ~/.bashrc
 ENV PATH "/root/.rbenv/bin/:/root/.rbenv/shims/:$PATH"
-RUN git clone https://github.com/rbenv/ruby-build.git && \
+RUN git clone --depth 1 https://github.com/rbenv/ruby-build.git && \
     PREFIX=/usr/local ./ruby-build/install.sh
 
 RUN rbenv install $RUBY_VERSION && \
     rbenv global $RUBY_VERSION && \
     rbenv versions
 
-# Install overmind
+# Set up rbenv for vscode user
+RUN su - vscode -c "git clone --depth 1 https://github.com/rbenv/rbenv.git ~/.rbenv" \
+    && su - vscode -c "echo 'export PATH=\"\$HOME/.rbenv/bin:\$PATH\"' >> ~/.bashrc" \
+    && su - vscode -c "echo 'eval \"\$(rbenv init -)\"' >> ~/.bashrc" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv install $RUBY_VERSION" \
+    && su - vscode -c "PATH=\"/home/vscode/.rbenv/bin:\$PATH\" rbenv global $RUBY_VERSION"
+
+# Install overmind and gh in single layer
 RUN curl -L https://github.com/DarthSim/overmind/releases/download/v2.1.0/overmind-v2.1.0-linux-amd64.gz > overmind.gz \
   && gunzip overmind.gz \
-  && sudo mv overmind /usr/local/bin \
-  && chmod +x /usr/local/bin/overmind
-
-
-# Install gh
-RUN curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
-   && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
-   && sudo apt update \
-   && sudo apt install gh
+  && mv overmind /usr/local/bin \
+  && chmod +x /usr/local/bin/overmind \
+  && curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | dd of=/usr/share/keyrings/githubcli-archive-keyring.gpg \
+  && echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | tee /etc/apt/sources.list.d/github-cli.list > /dev/null \
+  && apt-get update \
+  && apt-get install -y --no-install-recommends gh \
+  && apt-get clean \
+  && rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
 
 
 # Do the set up required for chatwoot app
 WORKDIR /workspace
-COPY . /workspace
+RUN chown vscode:vscode /workspace
 
-# set up ruby
-COPY Gemfile Gemfile.lock ./
-RUN gem install bundler && bundle install
+# set up node js, pnpm and claude code in single layer
+RUN npm install -g pnpm@${PNPM_VERSION} @anthropic-ai/claude-code \
+    && npm cache clean --force
 
-# set up node js
-RUN npm install n -g && \
-    n $NODE_VERSION
-RUN npm install --global yarn
-RUN yarn
+# Switch to vscode user
+USER vscode
+ENV PATH="/home/vscode/.rbenv/bin:/home/vscode/.rbenv/shims:$PATH"
+
+# Copy dependency files first for better caching
+COPY --chown=vscode:vscode Gemfile Gemfile.lock package.json pnpm-lock.yaml ./
+
+# Install dependencies as vscode user
+RUN eval "$(rbenv init -)" \
+    && gem install bundler -N \
+    && bundle install --jobs=$(nproc) \
+    && pnpm install --frozen-lockfile
+
+# Copy source code after dependencies are installed
+COPY --chown=vscode:vscode . /workspace

.devcontainer/devcontainer.json

@@ -4,17 +4,26 @@
   "dockerComposeFile": "docker-compose.yml",
 
   "settings": {
-    "terminal.integrated.shell.linux": "/bin/zsh"
+    "terminal.integrated.shell.linux": "/bin/zsh",
+    "extensions.showRecommendationsOnlyOnDemand": true,
+    "editor.formatOnSave": true,
+    "files.trimTrailingWhitespace": true,
+    "files.insertFinalNewline": true,
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/tmp": true,
+      "**/log": true,
+      "**/coverage": true,
+      "**/public/packs": true
+    }
   },
 
 
   // Add the IDs of extensions you want installed when the container is created.
   "extensions": [
-    "rebornix.Ruby",
+    "Shopify.ruby-lsp",
     "misogi.ruby-rubocop",
-    "wingrunr21.vscode-ruby",
     "davidpallinder.rails-test-runner",
-    "eamodio.gitlens",
     "github.copilot",
     "mrmlnc.vscode-duplicate"
   ],
@@ -23,15 +32,15 @@
   // 5432 postgres
   // 6379 redis
   // 1025,8025 mailhog
-  "forwardPorts": [8025, 3000, 3035],
+  "forwardPorts": [8025, 3000, 3036],
 
-  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && yarn",
+  "postCreateCommand": ".devcontainer/scripts/setup.sh && POSTGRES_STATEMENT_TIMEOUT=600s bundle exec rake db:chatwoot_prepare && pnpm install",
   "portsAttributes": {
     "3000": {
       "label": "Rails Server"
     },
-    "3035": {
-      "label": "Webpack Dev Server"
+    "3036": {
+      "label": "Vite Dev Server"
     },
     "8025": {
       "label": "Mailhog UI"

.devcontainer/docker-compose.base.yml

@@ -0,0 +1,18 @@
+# Docker Compose file for building the base image in GitHub Actions
+# Usage: docker-compose -f .devcontainer/docker-compose.base.yml build base
+
+version: '3'
+
+services:
+  base:
+    build:
+      context: ..
+      dockerfile: .devcontainer/Dockerfile.base
+      args:
+        VARIANT: 'ubuntu-22.04'
+        NODE_VERSION: '23.7.0'
+        RUBY_VERSION: '3.4.4'
+        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
+        USER_UID: '1000'
+        USER_GID: '1000'
+    image: ghcr.io/chatwoot/chatwoot_codespace:latest

.devcontainer/docker-compose.yml

@@ -5,19 +5,6 @@
 version: '3'
 
 services:
-  base:
-    build:
-      context: ..
-      dockerfile: .devcontainer/Dockerfile.base
-      args:
-        VARIANT: 'ubuntu-22.04'
-        NODE_VERSION: '23.7.0'
-        RUBY_VERSION: '3.4.4'
-        # On Linux, you may need to update USER_UID and USER_GID below if not your local UID is not 1000.
-        USER_UID: '1000'
-        USER_GID: '1000'
-    image: base:latest
-
   app:
     build:
       context: ..

.devcontainer/scripts/setup.sh

@@ -2,12 +2,15 @@ cp .env.example .env
 sed -i -e '/REDIS_URL/ s/=.*/=redis:\/\/localhost:6379/' .env
 sed -i -e '/POSTGRES_HOST/ s/=.*/=localhost/' .env
 sed -i -e '/SMTP_ADDRESS/ s/=.*/=localhost/' .env
-sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.githubpreview.dev/" .env
-sed -i -e "/WEBPACKER_DEV_SERVER_PUBLIC/ s/=.*/=https:\/\/$CODESPACE_NAME-3035.githubpreview.dev/" .env
-# uncomment the webpacker env variable
-sed -i -e '/WEBPACKER_DEV_SERVER_PUBLIC/s/^# //' .env
-# fix the error with webpacker
-echo 'export NODE_OPTIONS=--openssl-legacy-provider' >> ~/.zshrc
+sed -i -e "/FRONTEND_URL/ s/=.*/=https:\/\/$CODESPACE_NAME-3000.app.github.dev/" .env
+
+# Setup Claude Code API key if available
+if [ -n "$CLAUDE_CODE_API_KEY" ]; then
+  mkdir -p ~/.claude
+  echo '{"apiKeyHelper": "~/.claude/anthropic_key.sh"}' > ~/.claude/settings.json
+  echo "echo \"$CLAUDE_CODE_API_KEY\"" > ~/.claude/anthropic_key.sh
+  chmod +x ~/.claude/anthropic_key.sh
+fi
 
 # codespaces make the ports public
-gh codespace ports visibility 3000:public 3035:public 8025:public -c $CODESPACE_NAME
+gh codespace ports visibility 3000:public 3036:public 8025:public -c $CODESPACE_NAME

.eslintrc.js

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

.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/publish_codespace_image.yml

@@ -19,6 +19,5 @@ jobs:
 
     - name: Build the Codespace Base Image
       run: |
-        docker-compose -f .devcontainer/docker-compose.yml build base
-        docker tag base:latest ghcr.io/chatwoot/chatwoot_codespace:latest
+        docker compose -f .devcontainer/docker-compose.base.yml build base
         docker push ghcr.io/chatwoot/chatwoot_codespace: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

Gemfile

@@ -180,6 +180,8 @@ gem 'ruby-openai'
 
 gem 'shopify_api'
 
+gem 'ai-agents', '>= 0.2.1'
+
 ### Gems required only in specific deployment environments ###
 ##############################################################
 

Gemfile.lock

@@ -126,6 +126,8 @@ GEM
       jbuilder (~> 2)
       rails (>= 4.2, < 7.2)
       selectize-rails (~> 0.6)
+    ai-agents (0.2.1)
+      ruby_llm (~> 1.3)
     annotate (3.2.0)
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
@@ -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)
@@ -433,10 +437,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)
@@ -563,7 +569,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)
@@ -713,6 +719,15 @@ GEM
     ruby2ruby (2.5.0)
       ruby_parser (~> 3.1)
       sexp_processor (~> 4.6)
+    ruby_llm (1.3.1)
+      base64
+      event_stream_parser (~> 1)
+      faraday (>= 1.10.0)
+      faraday-multipart (>= 1)
+      faraday-net_http (>= 1)
+      faraday-retry (>= 1)
+      marcel (~> 1.0)
+      zeitwerk (~> 2)
     ruby_parser (3.20.0)
       sexp_processor (~> 4.16)
     sass (3.7.4)
@@ -891,6 +906,7 @@ DEPENDENCIES
   administrate (>= 0.20.1)
   administrate-field-active_storage (>= 1.0.3)
   administrate-field-belongs_to_search (>= 0.9.0)
+  ai-agents (>= 0.2.1)
   annotate
   attr_extras
   audited (~> 5.4, >= 5.4.1)

Makefile

@@ -41,8 +41,15 @@ run:
 
 force_run:
 	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
 	overmind start -f Procfile.dev
 
+force_run_tunnel:
+	lsof -ti:3000 | xargs kill -9 2>/dev/null || true
+	rm -f ./.overmind.sock
+	rm -f tmp/pids/*.pid
+	overmind start -f Procfile.tunnel
+
 debug:
 	overmind connect backend
 
@@ -52,4 +59,4 @@ debug_worker:
 docker: 
 	docker build -t $(APP_NAME) -f ./docker/Dockerfile .
 
-.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run debug debug_worker
+.PHONY: setup db_create db_migrate db_seed db_reset db console server burn docker run force_run force_run_tunnel debug debug_worker

Procfile.tunnel

@@ -0,0 +1,4 @@
+backend: DISABLE_MINI_PROFILER=true bin/rails s -p 3000
+# https://github.com/mperham/sidekiq/issues/3090#issuecomment-389748695
+worker: dotenv bundle exec sidekiq -C config/sidekiq.yml
+vite: bin/vite build --watch

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

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

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

@@ -29,6 +29,11 @@ class Api::V1::Accounts::AgentBotsController < Api::V1::Accounts::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @agent_bot.access_token.regenerate_token
+    @agent_bot.reload
+  end
+
   private
 
   def agent_bot

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

@@ -14,7 +14,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :active, :search, :filter]
   before_action :fetch_contact, only: [:show, :update, :destroy, :avatar, :contactable_inboxes, :destroy_custom_attributes]
-  before_action :set_include_contact_inboxes, only: [:index, :search, :filter, :show, :update]
+  before_action :set_include_contact_inboxes, only: [:index, :active, :search, :filter, :show, :update]
 
   def index
     @contacts_count = resolved_contacts.count
@@ -56,7 +56,7 @@ class Api::V1::Accounts::ContactsController < Api::V1::Accounts::BaseController
     contacts = Current.account.contacts.where(id: ::OnlineStatusTracker
                   .get_available_contact_ids(Current.account.id))
     @contacts_count = contacts.count
-    @contacts = contacts.page(@current_page)
+    @contacts = fetch_contacts(contacts)
   end
 
   def show; end

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

@@ -124,6 +124,12 @@ class Api::V1::Accounts::ConversationsController < Api::V1::Accounts::BaseContro
     @conversation.save!
   end
 
+  def destroy
+    authorize @conversation, :destroy?
+    ::DeleteObjectJob.perform_later(@conversation, Current.user, request.ip)
+    head :ok
+  end
+
   private
 
   def permitted_update_params

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/search_controller.rb

@@ -15,6 +15,10 @@ class Api::V1::Accounts::SearchController < Api::V1::Accounts::BaseController
     @result = search('Message')
   end
 
+  def articles
+    @result = search('Article')
+  end
+
   private
 
   def search(search_type)

app/controllers/api/v1/accounts_controller.rb

@@ -92,7 +92,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def settings_params
-    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting)
+    params.permit(:auto_resolve_after, :auto_resolve_message, :auto_resolve_ignore_waiting, :audio_transcriptions, :auto_resolve_label)
   end
 
   def check_signup_enabled

app/controllers/api/v1/profiles_controller.rb

@@ -38,6 +38,11 @@ class Api::V1::ProfilesController < Api::BaseController
     head :ok
   end
 
+  def reset_access_token
+    @user.access_token.regenerate_token
+    @user.reload
+  end
+
   private
 
   def set_user

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

@@ -1,6 +1,6 @@
 class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseController
   before_action :check_authorization
-  before_action :prepare_builder_params, only: [:agent, :team, :inbox]
+  before_action :prepare_builder_params, only: [:agent, :team, :inbox, :label]
 
   def agent
     render_report_with(V2::Reports::AgentSummaryBuilder)
@@ -14,6 +14,10 @@ class Api::V2::Accounts::SummaryReportsController < Api::V1::Accounts::BaseContr
     render_report_with(V2::Reports::InboxSummaryBuilder)
   end
 
+  def label
+    render_report_with(V2::Reports::LabelSummaryBuilder)
+  end
+
   private
 
   def check_authorization

app/controllers/concerns/google_concern.rb

@@ -14,7 +14,7 @@ module GoogleConcern
 
   private
 
-  def 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

@@ -15,7 +15,7 @@ class DashboardController < ActionController::Base
   private
 
   def ensure_html_format
-    head :not_acceptable unless request.format.html?
+    render json: { error: 'Please use API routes instead of dashboard routes for JSON requests' }, status: :not_acceptable if request.format.json?
   end
 
   def set_global_config

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,13 +63,10 @@ class OauthCallbackController < ApplicationController
     raise NotImplementedError
   end
 
-  def cache_key
-    "#{provider_name}::#{users_data['email'].downcase}"
-  end
-
   def create_channel_with_inbox
     ActiveRecord::Base.transaction do
       channel_email = Channel::Email.create!(email: users_data['email'], account: account)
+
       account.inboxes.create!(
         account: account,
         channel: channel_email,
@@ -85,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

@@ -1,19 +1,40 @@
 class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::BaseController
   before_action :ensure_custom_domain_request, only: [:show, :index]
   before_action :portal
-  before_action :set_category, except: [:index, :show]
+  before_action :set_category, except: [:index, :show, :tracking_pixel]
   before_action :set_article, only: [:show]
   layout 'portal'
 
   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])
+    return head :not_found unless @article
+
+    @article.increment_view_count if @article.published?
+
+    # Serve the 1x1 tracking pixel with 24-hour private cache
+    # Private cache bypasses CDN but allows browser caching to prevent duplicate views from same user
+    expires_in 24.hours, public: false
+    response.headers['Content-Type'] = 'image/png'
+
+    pixel_path = Rails.public_path.join('assets/images/tracking-pixel.png')
+    send_file pixel_path, type: 'image/png', disposition: 'inline'
+  end
 
   private
 
@@ -39,7 +60,6 @@ class Public::Api::V1::Portals::ArticlesController < Public::Api::V1::Portals::B
 
   def set_article
     @article = @portal.articles.find_by(slug: permitted_params[:article_slug])
-    @article.increment_view_count if @article.published?
     @parsed_content = render_article_content(@article.content)
   end
 

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/account_users_controller.rb

@@ -2,6 +2,13 @@ class SuperAdmin::AccountUsersController < SuperAdmin::ApplicationController
   # Overwrite any of the RESTful controller actions to implement custom behavior
   # For example, you may want to send an email after a foo is updated.
   #
+
+  # Since account/user page - account user role attribute links to the show page
+  # Handle with a redirect to the user show page
+  def show
+    redirect_to super_admin_user_path(requested_resource.user)
+  end
+
   def create
     resource = resource_class.new(resource_params)
     authorize_resource(resource)

app/controllers/super_admin/app_configs_controller.rb

@@ -32,22 +32,18 @@ class SuperAdmin::AppConfigsController < SuperAdmin::ApplicationController
   end
 
   def allowed_configs
-    @allowed_configs = case @config
-                       when 'facebook'
-                         %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT]
-                       when 'shopify'
-                         %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET]
-                       when 'microsoft'
-                         %w[AZURE_APP_ID AZURE_APP_SECRET]
-                       when 'email'
-                         ['MAILER_INBOUND_EMAIL_DOMAIN']
-                       when 'linear'
-                         %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET]
-                       when 'instagram'
-                         %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
-                       else
-                         %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS]
-                       end
+    mapping = {
+      'facebook' => %w[FB_APP_ID FB_VERIFY_TOKEN FB_APP_SECRET IG_VERIFY_TOKEN FACEBOOK_API_VERSION ENABLE_MESSENGER_CHANNEL_HUMAN_AGENT],
+      'shopify' => %w[SHOPIFY_CLIENT_ID SHOPIFY_CLIENT_SECRET],
+      'microsoft' => %w[AZURE_APP_ID AZURE_APP_SECRET],
+      'email' => ['MAILER_INBOUND_EMAIL_DOMAIN'],
+      'linear' => %w[LINEAR_CLIENT_ID LINEAR_CLIENT_SECRET],
+      'slack' => %w[SLACK_CLIENT_ID SLACK_CLIENT_SECRET],
+      'notion' => %w[NOTION_CLIENT_ID NOTION_CLIENT_SECRET],
+      'instagram' => %w[INSTAGRAM_APP_ID INSTAGRAM_APP_SECRET INSTAGRAM_VERIFY_TOKEN INSTAGRAM_API_VERSION ENABLE_INSTAGRAM_CHANNEL_HUMAN_AGENT]
+    }
+
+    @allowed_configs = mapping.fetch(@config, %w[ENABLE_ACCOUNT_SIGNUP FIREBASE_PROJECT_ID FIREBASE_CREDENTIALS])
   end
 end
 

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/api/v2/accounts/reports_helper.rb

@@ -36,9 +36,13 @@ module Api::V2::Accounts::ReportsHelper
   end
 
   def generate_labels_report
-    Current.account.labels.map do |label|
-      label_report = report_builder({ type: :label, id: label.id }).short_summary
-      [label.title] + generate_readable_report_metrics(label_report)
+    reports = V2::Reports::LabelSummaryBuilder.new(
+      account: Current.account,
+      params: build_params({})
+    ).build
+
+    reports.map do |report|
+      [report[:name]] + generate_readable_report_metrics(report)
     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/agentBots.js

@@ -21,6 +21,10 @@ class AgentBotsAPI extends ApiClient {
   deleteAgentBotAvatar(botId) {
     return axios.delete(`${this.url}/${botId}/avatar`);
   }
+
+  resetAccessToken(botId) {
+    return axios.post(`${this.url}/${botId}/reset_access_token`);
+  }
 }
 
 export default new AgentBotsAPI();

app/javascript/dashboard/api/auth.js

@@ -38,13 +38,7 @@ export default {
     }
     return false;
   },
-  profileUpdate({
-    password,
-    password_confirmation,
-    displayName,
-    avatar,
-    ...profileAttributes
-  }) {
+  profileUpdate({ displayName, avatar, ...profileAttributes }) {
     const formData = new FormData();
     Object.keys(profileAttributes).forEach(key => {
       const hasValue = profileAttributes[key] === undefined;
@@ -53,16 +47,22 @@ export default {
       }
     });
     formData.append('profile[display_name]', displayName || '');
-    if (password && password_confirmation) {
-      formData.append('profile[password]', password);
-      formData.append('profile[password_confirmation]', password_confirmation);
-    }
     if (avatar) {
       formData.append('profile[avatar]', avatar);
     }
     return axios.put(endPoints('profileUpdate').url, formData);
   },
 
+  profilePasswordUpdate({ currentPassword, password, passwordConfirmation }) {
+    return axios.put(endPoints('profileUpdate').url, {
+      profile: {
+        current_password: currentPassword,
+        password,
+        password_confirmation: passwordConfirmation,
+      },
+    });
+  },
+
   updateUISettings({ uiSettings }) {
     return axios.put(endPoints('profileUpdate').url, {
       profile: { ui_settings: uiSettings },
@@ -102,4 +102,8 @@ export default {
     const urlData = endPoints('resendConfirmation');
     return axios.post(urlData.url);
   },
+  resetAccessToken() {
+    const urlData = endPoints('resetAccessToken');
+    return axios.post(urlData.url);
+  },
 };

app/javascript/dashboard/api/captain/copilotMessages.js

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from '../ApiClient';
+
+class CopilotMessages extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+
+  get(threadId) {
+    return axios.get(`${this.url}/${threadId}/copilot_messages`);
+  }
+
+  create({ threadId, ...rest }) {
+    return axios.post(`${this.url}/${threadId}/copilot_messages`, rest);
+  }
+}
+
+export default new CopilotMessages();

app/javascript/dashboard/api/captain/copilotThreads.js

@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class CopilotThreads extends ApiClient {
+  constructor() {
+    super('captain/copilot_threads', { accountScoped: true });
+  }
+}
+
+export default new CopilotThreads();

app/javascript/dashboard/api/contacts.js

@@ -61,6 +61,11 @@ class ContactAPI extends ApiClient {
     return axios.get(requestURL);
   }
 
+  active(page = 1, sortAttr = 'name') {
+    let requestURL = `${this.url}/active?${buildContactParams(page, sortAttr)}`;
+    return axios.get(requestURL);
+  }
+
   // eslint-disable-next-line default-param-last
   filter(page = 1, sortAttr = 'name', queryPayload) {
     let requestURL = `${this.url}/filter?${buildContactParams(page, sortAttr)}`;

app/javascript/dashboard/api/endPoints.js

@@ -51,6 +51,10 @@ const endPoints = {
   resendConfirmation: {
     url: '/api/v1/profile/resend_confirmation',
   },
+
+  resetAccessToken: {
+    url: '/api/v1/profile/reset_access_token',
+  },
 };
 
 export default page => {

app/javascript/dashboard/api/inbox/conversation.js

@@ -134,13 +134,13 @@ class ConversationApi extends ApiClient {
     return axios.get(`${this.url}/${conversationId}/attachments`);
   }
 
-  requestCopilot(conversationId, body) {
-    return axios.post(`${this.url}/${conversationId}/copilot`, body);
-  }
-
   getInboxAssistant(conversationId) {
     return axios.get(`${this.url}/${conversationId}/inbox_assistant`);
   }
+
+  delete(conversationId) {
+    return axios.delete(`${this.url}/${conversationId}`);
+  }
 }
 
 export default new ConversationApi();

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/search.js

@@ -40,6 +40,15 @@ class SearchAPI extends ApiClient {
       },
     });
   }
+
+  articles({ q, page = 1 }) {
+    return axios.get(`${this.url}/articles`, {
+      params: {
+        q,
+        page: page,
+      },
+    });
+  }
 }
 
 export default new SearchAPI();

app/javascript/dashboard/api/specs/agentBots.spec.js

@@ -9,5 +9,6 @@ describe('#AgentBotsAPI', () => {
     expect(AgentBotsAPI).toHaveProperty('create');
     expect(AgentBotsAPI).toHaveProperty('update');
     expect(AgentBotsAPI).toHaveProperty('delete');
+    expect(AgentBotsAPI).toHaveProperty('resetAccessToken');
   });
 });

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/api/summaryReports.js

@@ -35,6 +35,16 @@ class SummaryReportsAPI extends ApiClient {
       },
     });
   }
+
+  getLabelReports({ since, until, businessHours } = {}) {
+    return axios.get(`${this.url}/label`, {
+      params: {
+        since,
+        until,
+        business_hours: businessHours,
+      },
+    });
+  }
 }
 
 export default new SummaryReportsAPI();

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

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

@@ -101,7 +101,7 @@ select {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
   background-size: 9px 6px;
 
-  @apply field-base h-10 bg-origin-content focus-visible:outline-none bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
+  @apply field-base h-10 bg-origin-content bg-no-repeat py-2 ltr:bg-[right_-1rem_center] rtl:bg-[left_-1rem_center] ltr:pr-6 rtl:pl-6 rtl:pr-3 ltr:pl-3;
 
   &[disabled] {
     @apply field-disabled;
@@ -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-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/ContactsCard/ContactsCard.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
+  availabilityStatus: { type: String, default: null },
   isExpanded: { type: Boolean, default: false },
   isUpdating: { type: Boolean, default: false },
 });
@@ -92,7 +93,13 @@ const onClickViewDetails = () => emit('showContact', props.id);
 <template>
   <CardLayout :key="id" layout="row">
     <div class="flex items-center justify-start flex-1 gap-4">
-      <Avatar :name="name" :src="thumbnail" :size="48" rounded-full />
+      <Avatar
+        :name="name"
+        :src="thumbnail"
+        :size="48"
+        :status="availabilityStatus"
+        rounded-full
+      />
       <div class="flex flex-col gap-0.5 flex-1">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1">
           <span class="text-base font-medium truncate text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -7,42 +7,16 @@ import ContactMoreActions from './components/ContactMoreActions.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
 
 defineProps({
-  showSearch: {
-    type: Boolean,
-    default: true,
-  },
-  searchValue: {
-    type: String,
-    default: '',
-  },
-  headerTitle: {
-    type: String,
-    required: true,
-  },
-  buttonLabel: {
-    type: String,
-    default: '',
-  },
-  activeSort: {
-    type: String,
-    default: 'last_activity_at',
-  },
-  activeOrdering: {
-    type: String,
-    default: '',
-  },
-  isSegmentsView: {
-    type: Boolean,
-    default: false,
-  },
-  hasActiveFilters: {
-    type: Boolean,
-    default: false,
-  },
-  isLabelView: {
-    type: Boolean,
-    default: false,
-  },
+  showSearch: { type: Boolean, default: true },
+  searchValue: { type: String, default: '' },
+  headerTitle: { type: String, required: true },
+  buttonLabel: { type: String, default: '' },
+  activeSort: { type: String, default: 'last_activity_at' },
+  activeOrdering: { type: String, default: '' },
+  isSegmentsView: { type: Boolean, default: false },
+  hasActiveFilters: { type: Boolean, default: false },
+  isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -85,7 +59,7 @@ const emit = defineEmits([
           </Input>
         </div>
         <div class="flex items-center gap-2">
-          <div v-if="!isLabelView" class="relative">
+          <div v-if="!isLabelView && !isActiveView" class="relative">
             <Button
               id="toggleContactsFilterButton"
               :icon="
@@ -105,7 +79,12 @@ const emit = defineEmits([
             <slot name="filter" />
           </div>
           <Button
-            v-if="hasActiveFilters && !isSegmentsView && !isLabelView"
+            v-if="
+              hasActiveFilters &&
+              !isSegmentsView &&
+              !isLabelView &&
+              !isActiveView
+            "
             icon="i-lucide-save"
             color="slate"
             size="sm"
@@ -113,7 +92,7 @@ const emit = defineEmits([
             @click="emit('createSegment')"
           />
           <Button
-            v-if="isSegmentsView && !isLabelView"
+            v-if="isSegmentsView && !isLabelView && !isActiveView"
             icon="i-lucide-trash"
             color="slate"
             size="sm"

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactListHeaderWrapper.vue

@@ -36,6 +36,7 @@ const props = defineProps({
   activeSegment: { type: Object, default: null },
   hasAppliedFilters: { type: Boolean, default: false },
   isLabelView: { type: Boolean, default: false },
+  isActiveView: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
@@ -277,6 +278,7 @@ defineExpose({
     :header-title="headerTitle"
     :is-segments-view="hasActiveSegments"
     :is-label-view="isLabelView"
+    :is-active-view="isActiveView"
     :has-active-filters="hasAppliedFilters"
     :button-label="t('CONTACTS_LAYOUT.HEADER.MESSAGE_BUTTON')"
     @search="emit('search', $event)"

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -6,7 +6,7 @@ import ContactListHeaderWrapper from 'dashboard/components-next/Contacts/Contact
 import ContactsActiveFiltersPreview from 'dashboard/components-next/Contacts/ContactsHeader/components/ContactsActiveFiltersPreview.vue';
 import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
 
-defineProps({
+const props = defineProps({
   searchValue: { type: String, default: '' },
   headerTitle: { type: String, default: '' },
   showPaginationFooter: { type: Boolean, default: true },
@@ -37,10 +37,23 @@ const isNotSegmentView = computed(() => {
   return route.name !== 'contacts_dashboard_segments_index';
 });
 
+const isActiveView = computed(() => {
+  return route.name === 'contacts_dashboard_active';
+});
+
 const isLabelView = computed(
   () => route.name === 'contacts_dashboard_labels_index'
 );
 
+const showActiveFiltersPreview = computed(() => {
+  return (
+    (props.hasAppliedFilters || !isNotSegmentView.value) &&
+    !props.isFetchingList &&
+    !isLabelView.value &&
+    !isActiveView.value
+  );
+});
+
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
 };
@@ -57,7 +70,7 @@ const openFilter = () => {
     <div class="flex flex-col w-full h-full transition-all duration-300">
       <ContactListHeaderWrapper
         ref="contactListHeaderWrapper"
-        :show-search="isNotSegmentView"
+        :show-search="isNotSegmentView && !isActiveView"
         :search-value="searchValue"
         :active-sort="activeSort"
         :active-ordering="activeOrdering"
@@ -66,6 +79,7 @@ const openFilter = () => {
         :segments-id="segmentsId"
         :has-applied-filters="hasAppliedFilters"
         :is-label-view="isLabelView"
+        :is-active-view="isActiveView"
         @update:sort="emit('update:sort', $event)"
         @search="emit('search', $event)"
         @apply-filter="emit('applyFilter', $event)"
@@ -74,11 +88,7 @@ const openFilter = () => {
       <main class="flex-1 overflow-y-auto">
         <div class="w-full mx-auto max-w-[60rem]">
           <ContactsActiveFiltersPreview
-            v-if="
-              (hasAppliedFilters || !isNotSegmentView) &&
-              !isFetchingList &&
-              !isLabelView
-            "
+            v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"

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/Contacts/Pages/ContactsList.vue

@@ -71,6 +71,7 @@ const toggleExpanded = id => {
       :thumbnail="contact.thumbnail"
       :phone-number="contact.phoneNumber"
       :additional-attributes="contact.additionalAttributes"
+      :availability-status="contact.availabilityStatus"
       :is-expanded="expandedCardId === contact.id"
       :is-updating="isUpdating"
       @toggle="toggleExpanded(contact.id)"

app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue

@@ -0,0 +1,87 @@
+<script setup>
+import Button from 'dashboard/components-next/button/Button.vue';
+import { useUISettings } from 'dashboard/composables/useUISettings';
+import { computed } from 'vue';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+
+const { updateUISettings } = useUISettings();
+
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const showCopilotTab = computed(() =>
+  isFeatureEnabledonAccount.value(currentAccountId.value, FEATURE_FLAGS.CAPTAIN)
+);
+
+const { uiSettings } = useUISettings();
+const isContactSidebarOpen = computed(
+  () => uiSettings.value.is_contact_sidebar_open
+);
+const isCopilotPanelOpen = computed(
+  () => uiSettings.value.is_copilot_panel_open
+);
+
+const toggleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: !isContactSidebarOpen.value,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleConversationSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: true,
+    is_copilot_panel_open: false,
+  });
+};
+
+const handleCopilotSidebarToggle = () => {
+  updateUISettings({
+    is_contact_sidebar_open: false,
+    is_copilot_panel_open: true,
+  });
+};
+
+const keyboardEvents = {
+  'Alt+KeyO': {
+    action: toggleConversationSidebarToggle,
+  },
+};
+useKeyboardEvents(keyboardEvents);
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2 border border-n-weak rounded-full gap-2 p-1"
+  >
+    <Button
+      v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"
+      ghost
+      slate
+      sm
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2': isContactSidebarOpen,
+      }"
+      icon="i-ph-user-bold"
+      @click="handleConversationSidebarToggle"
+    />
+    <Button
+      v-if="showCopilotTab"
+      v-tooltip.bottom="$t('CONVERSATION.SIDEBAR.COPILOT')"
+      ghost
+      slate
+      class="!rounded-full"
+      :class="{
+        'bg-n-alpha-2 !text-n-iris-9': isCopilotPanelOpen,
+      }"
+      sm
+      icon="i-woot-captain"
+      @click="handleCopilotSidebarToggle"
+    />
+  </div>
+</template>

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

@@ -4,38 +4,14 @@ import { computed, ref, watch, useSlots } from 'vue';
 import WootEditor from 'dashboard/components/widgets/WootWriter/Editor.vue';
 
 const props = defineProps({
-  modelValue: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    default: '',
-  },
-  focusOnMount: {
-    type: Boolean,
-    default: false,
-  },
-  maxLength: {
-    type: Number,
-    default: 200,
-  },
-  showCharacterCount: {
-    type: Boolean,
-    default: true,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  message: {
-    type: String,
-    default: '',
-  },
+  modelValue: { type: String, default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  focusOnMount: { type: Boolean, default: false },
+  maxLength: { type: Number, default: 200 },
+  showCharacterCount: { type: Boolean, default: true },
+  disabled: { type: Boolean, default: false },
+  message: { type: String, default: '' },
   messageType: {
     type: String,
     default: 'info',
@@ -43,6 +19,7 @@ const props = defineProps({
   },
   enableVariables: { type: Boolean, default: false },
   enableCannedResponses: { type: Boolean, default: true },
+  enabledMenuOptions: { type: Array, default: () => [] },
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -58,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';
   }
@@ -120,6 +97,7 @@ watch(
         :disabled="disabled"
         :enable-variables="enableVariables"
         :enable-canned-responses="enableCannedResponses"
+        :enabled-menu-options="enabledMenuOptions"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"

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